/* brauckmann.ch — Korrekturen fuer Telefon und Tablet.
 *
 * Eigene Datei, NICHT im Theme geaendert: der Spiegel laesst sich jederzeit
 * neu erzeugen (spiegeln.sh), und dann waeren Aenderungen am Theme wieder
 * weg. Diese Datei wird per Skript in jede Seite eingehaengt und ueberlebt
 * das.
 *
 * Alles steht unter `max-width: 1024px`. Der Desktop bleibt, wie er ist.
 *
 * Behoben werden fuenf gemessene Fehler:
 *   1. Weisse Flaeche zwischen Hero und Inhalt (Slider 1500 statt 852 px)
 *   2. Weisser Balken oben, 100 px hoch, mit winzigem Menuezeichen
 *   3. Trefferflaechen unter 44 px (Menueknopf 22x100, Schliessen 32x32)
 *   4. Zoomsperre (steht im Viewport-Meta, siehe mobil-fix.sh)
 *   5. Schrift unter 12 px
 */

@media (max-width: 1024px) {

/* ── 1. Die weisse Flaeche ───────────────────────────────────────────────
 * Das Theme setzt die Slides per JavaScript auf Fensterhoehe (852 px), den
 * Rahmen darum aber auf 1500 px. Die Differenz stand als weisse Flaeche
 * zwischen Video und dem Citrix-Abschnitt. `!important` ist hier noetig und
 * nicht Bequemlichkeit: die 1500 px stehen als Inline-Stil am Element, und
 * dagegen kommt eine normale Regel nicht an.
 *
 * svh statt vh: auf dem Telefon faehrt die Browserleiste beim Scrollen ein
 * und aus; vh rechnet mit der grossen Variante und laesst den Hero unten
 * abgeschnitten wirken.
 */
.carousel.slide,
.carousel.slide > .carousel-inner,
.carousel.slide .carousel-inner > .item {
  height: 100svh !important;
  max-height: 100svh !important;
}
@supports not (height: 100svh) {
  .carousel.slide,
  .carousel.slide > .carousel-inner,
  .carousel.slide .carousel-inner > .item { height: 100vh !important; max-height: 100vh !important; }
}
/* Das Hintergrundbild soll die Flaeche fuellen, nicht in ihr stehen. */
.carousel.slide .item .qodef-image,
.carousel.slide .item > .qodef-video,
.carousel.slide .item video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ── 2. Die Kopfzeile ────────────────────────────────────────────────────
 * Vorher: 100 px weisse Flaeche, die dem Hero den Platz nahm.
 *
 * Auf der Startseite liegt darunter ein Vollbild-Slider — dort legt sich
 * der Kopf DARUEBER, mit einem Verlauf statt einer Flaeche. Auf den
 * Inhaltsseiten beginnt sofort Text; dort bliebe unter einem
 * ueberlagernden Kopf die erste Zeile verdeckt, also bleibt er im Fluss —
 * nur dunkel-durchscheinend statt weiss.
 */
.qodef-mobile-header .qodef-mobile-header-inner {
  height: calc(72px + env(safe-area-inset-top, 0px));
  line-height: normal;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  background: rgba(24, 26, 30, .78);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
}
.qodef-mobile-header .qodef-mobile-header-holder,
.qodef-mobile-header .qodef-vertical-align-containers {
  height: calc(72px + env(safe-area-inset-top, 0px));
}
/* Das Menue faehrt unter der Kopfzeile auf — es darf nicht mit unter die
   Statusleiste rutschen. */
.qodef-mobile-header .qodef-mobile-nav { margin-top: 0; }

/* Startseite (Vollbild-Slider) UND jede Seite mit Titelbanner: der Kopf
   legt sich darueber, damit Bild bzw. Banner bis an den oberen Rand gehen.
   `:has()` prueft, ob die Seite ueberhaupt ein Banner hat — Seiten ohne
   eines behalten den Kopf im Fluss, sonst laege ihre erste Zeile darunter.
   Kann ein Browser `:has()` nicht, greift genau dieser sichere Fall. */
body.home .qodef-mobile-header,
body:has(.qodef-title) .qodef-mobile-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 120;
  background: transparent;
}
body.home .qodef-mobile-header .qodef-mobile-header-inner,
body:has(.qodef-title) .qodef-mobile-header .qodef-mobile-header-inner {
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 100%);
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Das Banner reicht jetzt bis nach oben — sein Text darf aber nicht unter
   den Menueknopf geraten. Der endet bei 76 px (22 oben + 54 hoch).
 *
 * Ein blosses padding-top half nicht: das Theme setzt per JavaScript feste
 * Hoehen als Inline-Stil (.qodef-title 350px, .qodef-title-holder 250px)
 * und eine Responsive-Regel drueckt sie auf 143 px. In einer festen Hoehe
 * schiebt Innenabstand nichts nach unten, er staucht nur den Inhalt.
 * Deshalb zuerst die Hoehen loesen, dann den Abstand setzen. */
.qodef-title.qodef-standard-type,
.qodef-title .qodef-title-holder,
.qodef-title .qodef-title-subtitle-holder,
.qodef-title .qodef-title-subtitle-holder-inner {
  height: auto !important;
}
.qodef-title.qodef-standard-type {
  min-height: 240px !important;
  position: relative;                 /* Bezug fuer das Bild darunter */
  overflow: hidden;
}
/* Der Text beginnt deutlich UNTER dem Menueknopf. Der endet bei 76 px
   (22 oben + 54 hoch); 112 px lassen 36 px Luft. */
.qodef-title .qodef-title-holder {
  padding-top: 112px !important;
  padding-bottom: 30px !important;
  position: relative;
  z-index: 2;
}

/* Das Hintergrundbild fuellte die Flaeche nicht: .qodef-title-image war
   143 px hoch, das Banner 240 — darunter stand die blosse Fuellfarbe.
   Jetzt deckt es die ganze Flaeche und wird beschnitten statt gestaucht;
   `cover` haelt dabei das Seitenverhaeltnis. */
.qodef-title .qodef-title-image {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.qodef-title .qodef-title-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}
/* Etwas Abdunklung, damit weisse Schrift auf jedem Bild lesbar bleibt. */
.qodef-title .qodef-title-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .28) 100%);
}

/* ── 3. Der Menueknopf ───────────────────────────────────────────────────
 * Vorher 22 px breit und 100 px hoch: ueber dem Bild kaum zu sehen und
 * unter dem Richtwert von 44 px Kantenlaenge.
 */
.qodef-mobile-header .qodef-mobile-menu-opener > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  /* Vom Rand weg: in der Ecke sitzt auf dem iPhone die Statusleiste, und
     ein Knopf, der die Kante beruehrt, wirkt wie hineingerutscht.
     env(safe-area-inset-top) ist ohne viewport-fit=cover null — die Angabe
     schadet also nicht und greift, sobald jemand das ergaenzt. */
  margin: calc(10px + env(safe-area-inset-top, 0px)) 0 10px 10px;
  padding: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .30);
  transition: background .18s ease, transform .12s ease, border-color .18s ease;
}
.qodef-mobile-header .qodef-mobile-menu-opener > a:active {
  transform: scale(.93);
  background: rgba(178, 221, 76, .30);
  border-color: #b2dd4c;
}
.qodef-mobile-header .qodef-mobile-menu-opener .qodef-mobile-opener-icon-holder { line-height: 1; }
.qodef-mobile-header .qodef-mobile-menu-opener i {
  font-size: 23px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
/* Geoeffnet: gruen, damit sichtbar ist, dass er gedrueckt wurde. */
.qodef-mobile-header .qodef-mobile-menu-opener.qodef-display-mobile-menu > a,
.qodef-mobile-header .qodef-mobile-menu-opener.opened > a {
  background: #b2dd4c;
  border-color: #b2dd4c;
}
.qodef-mobile-header .qodef-mobile-menu-opener.qodef-display-mobile-menu i,
.qodef-mobile-header .qodef-mobile-menu-opener.opened i {
  color: #17191d;
  text-shadow: none;
}

/* ── Das aufgeklappte Menue ───────────────────────────────────────────── */
/* Durchscheinend statt deckend: das Hintergrundbild soll noch zu ahnen
   sein. Deckkraft allein reicht dafuer nicht — ohne die starke Unschaerfe
   liest sich weisse Schrift auf einem unruhigen Motiv nicht mehr. Blur und
   Saettigung machen daraus eine ruhige Flaeche, die trotzdem die Farben des
   Bildes traegt. Der Schattenwurf an der Schrift ist die Rueckfallebene
   fuer Browser ohne backdrop-filter. */
.qodef-mobile-header .qodef-mobile-nav {
  background: rgba(16, 18, 22, .42);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
/* Kann der Browser die Unschaerfe nicht, wird die Flaeche wieder dichter —
   sonst stuende der Text direkt auf dem Bild. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qodef-mobile-header .qodef-mobile-nav { background: rgba(16, 18, 22, .90); }
}
.qodef-mobile-header .qodef-mobile-nav ul li a {
  display: flex;
  align-items: center;
  min-height: 54px;                 /* Daumenmass, nicht Schriftmass */
  padding: 0 6px;
  font-size: 16px;
  letter-spacing: .02em;
  color: #f2f4f6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.qodef-mobile-header .qodef-mobile-nav ul li:last-child a { border-bottom: 0; }
.qodef-mobile-header .qodef-mobile-nav ul li a:active { color: #b2dd4c; }
.qodef-mobile-header .qodef-mobile-nav ul li.qodef-active-item > a,
.qodef-mobile-header .qodef-mobile-nav ul li.current-menu-item > a {
  color: #b2dd4c;
  font-weight: 600;
}
/* Der Kontor-Eintrag fuehrt aus der Website heraus. Er stand mit einem
   Pfeil (↗) da; der ist auf Wunsch weg — die Farbe hebt ihn genug ab. */
.qodef-mobile-header .qodef-mobile-nav ul li#mobile-menu-item-kontor a {
  color: #b2dd4c;
}

/* ── 4. Uebrige Trefferflaechen ──────────────────────────────────────── */
a.qodef-close-side-menu {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}

/* ── 5. Schriftgroessen ──────────────────────────────────────────────── */
/* Gemessen wurden 11 px im Fliesstext — auf einem Telefon nicht lesbar. */
.qodef-content p,
.qodef-content li,
.qodef-content td,
.qodef-content span,
.wpb_text_column p,
.wpb_text_column li { font-size: max(13px, 1em); }

/* Unter 16 px zoomt iOS Safari beim Antippen eines Feldes die ganze Seite
   heran und kommt nicht wieder zurueck. */
input, select, textarea { font-size: 16px; }
input:not([type="checkbox"]):not([type="radio"]),
select,
button,
.wpcf7 input[type="submit"] { min-height: 44px; }

}  /* Ende max-width: 1024px */


/* ── Nur Telefon (unter 600 px) ───────────────────────────────────────── */
@media (max-width: 599.98px) {

/* Menueknopf nach links und etwas nach unten.
 *
 * Am Rand des Knopfes zu drehen brachte fast nichts: der Abstand kommt vom
 * Raster des Themes. `.qodef-grid` ist im Kopf ein zentrierter Block von
 * 300 px Breite und haelt damit auf einem 393-px-Schirm 46,5 px Rand links.
 * Hier steht im Kopf nur der eine Knopf — das Raster darf also die volle
 * Breite nehmen. Nur auf dem Telefon; auf dem Tablet ist der Platz da. */
.qodef-mobile-header .qodef-grid {
  width: auto !important;
  margin-left: 18px !important;
  margin-right: 18px !important;
}
.qodef-mobile-header .qodef-mobile-menu-opener > a {
  margin-left: 0;
  margin-top: calc(22px + env(safe-area-inset-top, 0px));
}

/* Der Textblock des Sliders klebte am linken Bildrand — auf dem Desktop
   haelt ihn das Raster des Themes, das es hier nicht gibt. */
.carousel.slide .qodef-slider-content-inner,
.carousel.slide .qodef-slider-content .qodef-text {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* Die grosse Ueberschrift bricht sonst in fuenf Zeilen und verdraengt den
   Untertitel aus dem Bild. */
.carousel.slide .item h1,
.carousel.slide .item h2.qodef-slide-title,
.carousel.slide .item .qodef-slider-title {
  font-size: clamp(29px, 8.5vw, 42px) !important;
  line-height: 1.12 !important;
}
/* Untertitel war 13 px und damit kaum lesbar. */
.carousel.slide .item .qodef-slide-subtitle,
.carousel.slide .item .qodef-slider-content p {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Die Punkte unter dem Slider sind mit dem Daumen kaum zu treffen. */
.carousel.slide .carousel-indicators li {
  width: 12px !important;
  height: 12px !important;
  margin: 0 7px !important;
}

/* Zwei Spalten nebeneinander ergeben bei 393 px zwei zu schmale Spalten. */
.qodef-elements-holder.qodef-two-columns > .qodef-elements-holder-item {
  width: 100% !important;
  float: none !important;
}

}


/* ══ Das 3D-Handy auf "about me" ═══════════════════════════════════════════
 *
 * ACHTUNG: dieser Abschnitt steht bewusst AUSSERHALB der Breiten-Abfragen —
 * er gilt auch am Desktop. Die Datei heisst "mobil", weil sie dort anfing;
 * sie ist inzwischen das eigene Stylesheet der Seite.
 *
 * WIE ES IM ORIGINAL LAEUFT (aus modules.min.js und modules.min.css des
 * Themes, das ist die verlaessliche Quelle — nicht geraten):
 *
 *   Ausloeser:  modules.min.js haengt beim Hereinscrollen einmalig die
 *               Klasse `qodef-view-layers` an .qodef-mobile-wrapper. Mehr
 *               passiert im JavaScript nicht — der ganze Rest ist CSS.
 *   Geraet:     steht zuerst aufrecht (rotateY 17deg / rotateX 10deg) und
 *               kippt dann flach (rotateX 90deg). Dauer .7s.
 *   Schirme:    fahren gestaffelt nach oben (translateZ 65 bis 265 px),
 *               Dauer .7s, Versatz .7 .6 .5 .4 .3 s — RUECKWAERTS, der
 *               oberste zuerst.
 *   Etiketten:  klappen mit rotateX(-90deg) auf, Dauer .7s, Versatz
 *               1.1 1.0 .9 .8 .7 s.
 *
 * Der ganze Ablauf war damit nach rund 1,8 s vorbei — zu schnell, um ihn
 * zu lesen.
 *
 * WAS HIER GEAENDERT IST: ausschliesslich das TEMPO, Faktor 3, und ein
 * halbe Sekunde Vorlauf, damit man das aufrechte Telefon einen Moment sieht,
 * bevor es kippt. Reihenfolge, Versatz-Verhaeltnisse und Endzustaende
 * bleiben exakt wie im Theme.
 *
 * Mein erster Versuch hatte genau das verletzt: gleichmaessige Versaetze
 * 0 .3 .6 .9 1.2 statt der rueckwaertigen Staffelung, und `nth-of-type`
 * statt `nth-child` — dadurch lief die Folge in der falschen Reihenfolge
 * und das Geraet kippte weg, bevor die Schirme kamen.
 *
 * HINWEIS: Auf Telefon und Tablet zeigt das Theme das 3D-Objekt gar nicht.
 * `.touch … .qodef-perspective { display:none }` blendet es aus und zeigt
 * stattdessen ein festes Bild. Dieser Abschnitt wirkt also am Desktop.
 */

/* Das Geraet: Vorlauf, dann langsam kippen. */
.qodef-mobile-showcase .qodef-mobile-wrapper .qodef-device {
  transition: transform 2.1s ease-in-out !important;
  transition-delay: .5s !important;
}

/* Die Schirme: Dauer und Deckkraft im selben Verhaeltnis wie im Original
   (.7s / .4s), nur dreifach. */
.qodef-mobile-showcase .qodef-mobile-wrapper .qodef-screens > .qodef-screen {
  transition: transform 2.1s, opacity 1.2s !important;
}
.qodef-mobile-showcase .qodef-mobile-wrapper .qodef-screens .qodef-label {
  transition: opacity 2.1s, transform 2.1s !important;
}

/* Die Staffelung — dieselbe Reihenfolge wie im Theme (rueckwaerts), Faktor 3,
   plus die halbe Sekunde Vorlauf des Geraets. */
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(1) { transition-delay: 2.6s !important; }
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(2) { transition-delay: 2.3s !important; }
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(3) { transition-delay: 2.0s !important; }
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(4) { transition-delay: 1.7s !important; }
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(5) { transition-delay: 1.4s !important; }

.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(1) .qodef-label { transition-delay: 3.8s !important; }
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(2) .qodef-label { transition-delay: 3.5s !important; }
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(3) .qodef-label { transition-delay: 3.2s !important; }
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(4) .qodef-label { transition-delay: 2.9s !important; }
.qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers .qodef-screens .qodef-screen:nth-child(5) .qodef-label { transition-delay: 2.6s !important; }

/* Wer Bewegung im System abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .qodef-mobile-showcase .qodef-mobile-wrapper *,
  .qodef-mobile-showcase .qodef-mobile-wrapper.qodef-view-layers * {
    transition-duration: .01s !important;
    transition-delay: 0s !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   Das Telefon im Abschnitt „Mikrosegmentierung" kippt zum Zeiger.

   Die Grundstellung ist die des Themes (rotateY 17°, rotateX 10°); die
   Variablen stehen in Ruhe auf null, das Telefon steht also unveraendert
   da. seite.js setzt sie beim Darueberfahren.

   Diese Regel muss die des Themes ueberstimmen — sie hat dieselbe
   Genauigkeit, kommt aber spaeter im Kopf und gewinnt damit. Die Dauer ist
   kuerzer als die .7s des Themes: beim Folgen eines Zeigers wirkt eine
   lange Uebergangszeit wie Verzoegerung, nicht wie Ruhe.
   ───────────────────────────────────────────────────────────────────── */
.qodef-mobile-showcase .qodef-mobile-wrapper .qodef-device {
  transform: rotateY(calc(17deg + var(--kipp-y, 0deg)))
             rotateX(calc(10deg + var(--kipp-x, 0deg)))
             translateZ(var(--hub, 0px));
  transition: transform .30s cubic-bezier(.22,.61,.36,1);
}
/* Der Schatten liegt HINTER dem Telefon in der Ebene des Abschnitts, nicht
   als filter am Geraet: ein filter erzeugt einen eigenen Zeichenkontext und
   wuerde die 3D-Darstellung flach machen. */
.qodef-mobile-showcase .qodef-perspective::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: 4%; width: 300px; height: 90px;
  transform: translateX(-50%) scale(calc(.85 + var(--naehe, 0) * .25));
  background: radial-gradient(ellipse at center,
              rgba(20,22,28,.30) 0%, rgba(20,22,28,.12) 45%, rgba(20,22,28,0) 72%);
  opacity: calc(.35 + var(--naehe, 0) * .55);
  transition: opacity .30s ease, transform .30s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .qodef-mobile-showcase .qodef-mobile-wrapper .qodef-device { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Untermenue unter „Kontor" (Login, Handbuch, Makrodaten) UND unter
   „About me" (Thank you, Hobby) — dieselbe Optik fuer beide, 20.9.26.

   Das Theme oeffnet Untermenues ueber eine Klasse (.qodef-drop-down-start),
   die sein JavaScript beim Darueberfahren setzt. Kein Menuepunkt dieser
   Website hatte je ein Untermenue, das Verhalten ist hier also ungeprueft.
   Deshalb wird zusaetzlich rein ueber :hover und :focus-within geoeffnet —
   das haelt auch, wenn das Theme-JS nicht anspringt, und macht das Menue
   nebenbei mit der Tastatur bedienbar.
   ───────────────────────────────────────────────────────────────────── */
/* Auf dem Telefon gibt es kein Darueberfahren: dort stehen die Unterpunkte
   als eigene, eingerueckte Zeilen unter ihrem Hauptpunkt (Kontor, About me). */
#menu-top-bar-menu-2 .kontor-unterpunkt > a,
#menu-top-bar-menu-2 .aboutme-unterpunkt > a { padding-left: 26px !important; }
#menu-top-bar-menu-2 .kontor-unterpunkt > a span,
#menu-top-bar-menu-2 .aboutme-unterpunkt > a span { opacity: .72; font-size: .92em; }

/* ── Menü „Trading“: der Eintrag „Chart“ ist der wichtigste und muss
   unübersehbar sein — Leuchtgrün (Markenfarbe der Seite), fett, mit
   Dreieck davor und leichtem Puls. Gilt im Dropdown (Desktop) und als
   eigene Zeile im Handy-Menü. Bei „Bewegung reduzieren“ kein Puls. */
#menu-top-bar-menu-2 .kontor-unterpunkt.kn-chart > a {
  background: #b2dd4c; border-radius: 3px; margin: 4px 0;
  animation: kn-chart-puls 2.4s ease-in-out infinite;
}
#menu-top-bar-menu-2 .kontor-unterpunkt.kn-chart > a span {
  opacity: 1; color: #14161a !important; font-weight: 800; font-size: 1em;
}
#menu-top-bar-menu-2 .kontor-unterpunkt.kn-chart > a span::before { content: "\25B6\00A0"; font-size: .8em; }
@keyframes kn-chart-puls {
  0%, 100% { box-shadow: 0 0 0 1px rgba(178,221,76,.7), 0 0 8px rgba(178,221,76,.35); }
  50%      { box-shadow: 0 0 0 1px rgba(178,221,76,.9), 0 0 20px rgba(178,221,76,.7); }
}
@media (prefers-reduced-motion: reduce) {
  #menu-top-bar-menu-2 .kontor-unterpunkt.kn-chart > a { animation: none; }
}

/* Zusatz hinter einem Qualifikationseintrag — leiser als der Nachweis
   selbst, damit die Liste beim Ueberfliegen weiter aus Titeln besteht. */
.qual-zusatz { color: #9a9a9a; font-size: .88em; }

/* Rueckmeldung des Rueckruf-Formulars. Contact Form 7 bringt dafuer einen
   Kasten mit 2px-Rahmen und 2em Abstand mit — in einer Fusszeilenspalte
   sieht das aus wie ein Fehler der Seite, nicht wie eine Antwort auf den
   eigenen Klick. Naeher heran, duenner, kleiner. */
form.wpcf7-form .wpcf7-response-output {
  margin: 12px 0 0; padding: 8px 12px;
  border-width: 1px; border-radius: 3px;
  font-size: 13px; line-height: 1.45;
}

/* ── Qualifikationen: zwei Spalten ──────────────────────────────────────
   column-count statt zweier Behaelter — der Browser verteilt selbst, und
   die Aufteilung bleibt richtig, wenn ein Eintrag dazukommt. Kein Eintrag
   darf dabei zwischen den Spalten aufgetrennt werden. */
.qual-liste { column-count: 2; column-gap: 40px; }
.qual-liste .qodef-icon-list-item {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: 14px;
}
@media only screen and (max-width: 1024px) { .qual-liste { column-count: 1; } }

/* Der Anthropic-Block unter dem Foto. */
.qual-claude { margin: 22px 0 0; padding-top: 16px; border-top: 2px solid #b2dd4c; }
.qual-claude-titel {
  margin: 0 0 6px; font-size: 12px; letter-spacing: 1.4px;
  text-transform: uppercase; color: #303030;
}
.qual-claude-zeile { margin: 0; line-height: 1.5; }


/* ─────────────────────────────────────────────────────────────────────────
   Hobby-Seite: Spalten ausrichten.

   Die Bloecke sind in WPBakery aus vier Viertel-Spalten gebaut (Foto,
   Druckteile, Druckteile, Druckteile) plus einer vollen Spalte fuer den
   Download-Knopf. Die Spalten sind gefloatet und deshalb unterschiedlich
   hoch — Bilder und Knopf standen auf verschiedenen Hoehen. Als Flex-Reihe
   sitzen sie oben buendig; die Bilder bekommen eine gemeinsame Hoehe,
   damit sie auf einer Linie stehen statt je nach Seitenverhaeltnis.

   Nur auf dieser Seite (page-id-5182) — die Klassen selbst gehoeren dem
   Theme und werden ueberall sonst gebraucht.
   ───────────────────────────────────────────────────────────────────── */
/* KEIN display:flex auf den Reihen — auch wenn es naheliegt.
   Der Aufbau dieser Seite beruht auf Floats: das Bild des Evo 10 steht in
   einer Reihe, seine Ausstattungsliste in der naechsten, und die steht nur
   deshalb DANEBEN, weil der Text um die gefloatete Bildspalte fliesst.
   Als Flex-Reihe faellt die Liste unter das Bild. Ausgerichtet wird
   deshalb ueber gemeinsame Bildhoehen, nicht ueber das Reihenmodell. */
/* Die Bildueberschriften stehen im Original als <pre> — Schreibmaschine
   mitten im Fliesstext. Es sind Titel, also sehen sie wie Titel aus. */
.page-id-5182 pre {
  font-family: inherit; font-size: 21px; line-height: 1.3;
  color: #303030; background: none; border: none;
  padding: 0; margin: 0 0 16px; white-space: normal;
}
/* Gemeinsame Bildhoehe: die Fotos sind 4:3, die Druckteile quadratisch —
   ohne Deckel stehen sie auf ganz verschiedenen Grundlinien. */
.page-id-5182 .vc_col-sm-3 img { max-height: 190px; width: auto; }
.page-id-5182 .vc_col-sm-3 .wpb_gallery_slides img { max-height: 190px; }
/* Der Download-Knopf gehoert zum Block darueber, nicht in die naechste
   Bildschirmhoehe. */
.page-id-5182 .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper > .qodef-btn {
  margin-top: 4px;
}
@media only screen and (max-width: 768px) {
  .page-id-5182 .vc_col-sm-3 img { max-height: none; width: 100%; }
}

/* Einmaliger Schwung des Telefons beim Betreten mit der Maus. Beginnt und
   endet exakt in der Grundstellung des Themes (rotateY 17°, rotateX 10°),
   damit kein Sprung entsteht, wenn danach wieder der Zeiger fuehrt. */
@keyframes tel-schwung {
    0% { transform: rotateY(17deg)  rotateX(10deg) translateZ(0); }
   32% { transform: rotateY(-17deg) rotateX(3deg)  translateZ(64px); }
   66% { transform: rotateY(28deg)  rotateX(14deg) translateZ(24px); }
  100% { transform: rotateY(17deg)  rotateX(10deg) translateZ(0); }
}
.qodef-mobile-showcase .qodef-mobile-wrapper .qodef-device.tel-schwung {
  animation: tel-schwung 1.05s cubic-bezier(.34,.78,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .qodef-mobile-showcase .qodef-mobile-wrapper .qodef-device.tel-schwung {
    animation: none;
  }
}

/* Die Ausstattungslisten auf der Hobby-Seite.
   Das Theme nimmt in .qodef-ordered-list allen Listen den Punkt weg
   (list-style-type: none) und gibt ihn nur nummerierten Listen als
   :before zurueck. Aufzaehlungen standen dadurch als blosse Zeilen da —
   man sah nicht, was Fliesstext und was Ausstattung ist. */
.page-id-5182 .qodef-ordered-list ul {
  list-style: disc outside; margin: 0 0 22px; padding-left: 20px;
}
.page-id-5182 .qodef-ordered-list ul li {
  margin: 0 0 4px; padding-left: 4px;
}
.page-id-5182 .qodef-ordered-list ul li::marker { color: #b2dd4c; }
/* Der Block begann eine Zeile unter der Bildoberkante: das erste <p> bringt
   den Standardabstand des Themes mit, obwohl darueber nichts steht. */
.page-id-5182 .qodef-ordered-list > p:first-of-type { margin-top: 0; }
.page-id-5182 .qodef-ordered-list p { margin: 0 0 6px; }

/* Die Ausstattungsliste steht neben dem Bild des Quads (Evo 10 verschoben von
   hobby-fix.sh). Sie braucht mehr als ein Viertel — die drei Spalten
   rechts davon sind bei diesem Modell leer. */
.page-id-5182 .vc_col-sm-3.quad-daten { width: 74%; }
@media only screen and (max-width: 768px) {
  .page-id-5182 .vc_col-sm-3.quad-daten { width: 100%; }
}

/* Eigenes Hintergrundvideo der Startseite (siehe seite.js). Es liegt an
   derselben Stelle wie das des Themes, unter dem Muster-Overlay. */
.qodef-video .k-hintergrundvideo {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; border: none; background: #14161a;
}
.qodef-video .qodef-video-overlay { z-index: 2; }

/* ─────────────────────────────────────────────────────────────────────────
   Begruessungstitel der ersten Folie auf dem Telefon.

   Gemessen: der Videokasten (.qodef-video) ist dort 852 px hoch und steht
   im normalen Fluss — am Rechner ist er 0 px hoch, weil seine Kinder
   absolut liegen. Der Textblock rutschte dadurch auf dem Telefon UNTER das
   Video, auf Position 1184 px, also weit unter den sichtbaren Bereich.
   Deshalb sah man nur Video oder Standbild und nie den Titel.

   Der Kasten wird hier ebenfalls aus dem Fluss genommen; der Text liegt
   dann wieder oben und darueber.
   ───────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 1000px) {
  .carousel .item .qodef-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  }
  /* z-index steht hier bewusst NICHT mehr: die 3 von frueher lag unter dem
     Muster-Overlay des Themes (z-index 11) und war genau der Grund, warum
     der Titel der ersten Folie auf dem Telefon nicht zu sehen war. Gesetzt
     wird er jetzt am Ende dieser Datei, dort steht auch die Erklaerung. */
  .carousel .item .qodef-slider-content-outer { position: relative; }
}

/* Einflug der Folientexte (siehe seite.js). Von rechts herein, weil der
   Blick beim Lesen von links kommt — der Text laeuft ihm entgegen und
   bleibt stehen. Die Ueberschrift etwas straffer als der Absatz. */
.qodef-slide-title.k-einflug,
.qodef-slide-text.k-einflug {
  opacity: 0; transform: translateX(80px);
  transition: opacity .55s ease-out, transform .85s cubic-bezier(.22,.7,.28,1);
  will-change: opacity, transform;
}
.qodef-slide-text.k-einflug { transform: translateX(56px); transition-duration: .6s, .95s; }
.qodef-slide-title.k-einflug-da,
.qodef-slide-text.k-einflug-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .qodef-slide-title.k-einflug, .qodef-slide-text.k-einflug {
    opacity: 1; transform: none; transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Folientexte des Startseiten-Sliders auf dem Telefon: sichtbar und lesbar.

   Gemeldet war "engineering is a passion kommt auf dem iPhone nicht". Der
   Text war da — gemessen bei 393x852 stand die Ueberschrift auf Position
   332 px, volle Deckkraft. Sie war nur nicht zu SEHEN, und zwar aus vier
   Gruenden gleichzeitig:

   1. Das Muster-Overlay der Videofolie lag UEBER dem Text. Zwei
      Stapelwerte stehen sich gegenueber:

        Theme   .carousel .qodef-video .qodef-video-overlay  z-index: 11
        Theme   .carousel-inner .qodef-slider-content-outer  z-index: 12

      Am Rechner geht das auf: 12 liegt ueber 11. Auf dem Telefon nicht,
      denn die Nachbesserung fuer den Videokasten weiter oben in dieser
      Datei setzte den Textkasten auf `z-index: 3` — mit drei Klassen
      spezifischer als die Theme-Regel mit ihrer 12. Der Text rutschte
      damit unter das Muster. elementsFromPoint auf der Titelmitte lieferte
      als oberstes Element tatsaechlich `DIV.qodef-video-overlay z=11`.
      Betroffen war genau die erste Folie, also die, auf der man landet.
      Die alte Zeile `.qodef-video .qodef-video-overlay { z-index: 2 }`
      half nicht: sie ist zwei Klassen tief und verliert gegen die drei
      Klassen des Themes, obwohl sie spaeter kommt.
   2. Weisse Schrift auf einem hellen Foto ohne jede Abdunklung und ohne
      Schatten. Auf den Folien 2 bis 4 gerade noch gut, auf dem hellen
      Video der ersten Folie nicht mehr.
   3. Der Fliesstext stand auf 12 px — die Nachbesserung weiter oben zielt
      auf `.qodef-slide-subtitle` und `.qodef-slider-content p`; das Markup
      benutzt aber `h3.qodef-slide-text`. Die Regel lief also ins Leere.
   4. Der Textkasten ist per Inline-Stil 77 % breit. Am Rechner ist das
      richtig, auf 393 px bleiben davon 251 px Textbreite und rechts 93 px
      ungenutzt — die Ueberschrift bricht unnoetig oft um.

   Alles hier steht unter max-width: 1024px, der Desktop bleibt unberuehrt.
   ───────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 1024px) {

  /* Zu 1. Gleiche Spezifitaet wie die Theme-Regel, deshalb gewinnt die
     spaetere — diese hier. Das Muster gehoert unter den Text, nicht
     darueber; der Textkasten kommt sicherheitshalber ueber beide. */
  .carousel .qodef-video .qodef-video-overlay { z-index: 2; }
  .carousel.slide .item .qodef-slider-content-outer { z-index: 12; }

  /* Zu 2. Eine dezente Abdunklung ueber Bild und Video, staerker in der
     Mitte, wo der Text steht, und schwaecher an den Raendern, damit das
     Foto nicht flach wirkt. Liegt ueber dem Bild (1) und dem Muster (2),
     aber unter dem Text (12). pointer-events: none, damit die
     Videosteuerung darunter bedienbar bleibt.
     Inaktive Folien sind display:none — der Schleier zeigt sich also nur
     auf der gerade sichtbaren. */
  .carousel.slide .carousel-inner > .item::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg,
                rgba(10,12,16,.26) 0%,
                rgba(10,12,16,.52) 38%,
                rgba(10,12,16,.52) 66%,
                rgba(10,12,16,.24) 100%);
  }

  /* Und ein Schatten direkt an der Schrift — er traegt auch dort, wo das
     Foto zufaellig hell ist. */
  .carousel.slide .item h2.qodef-slide-title,
  .carousel.slide .item h3.qodef-slide-text {
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 20px rgba(0,0,0,.45);
  }

  /* Zu 3. Der Fliesstext, diesmal auf dem Element, das es wirklich gibt. */
  .carousel.slide .item h3.qodef-slide-text {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Zu 4. Die volle Breite nutzen. `!important`, weil die 77 % als
     Inline-Stil am Element stehen. */
  .carousel.slide .item .qodef-slider-content-inner {
    width: 100% !important;
  }

  /* Sicherheitsnetz gegen Skrollr. Am Textkasten haengen die Attribute
     data-0="opacity: 1" und data-300="opacity: 0"; beim Scrollen blendet
     Skrollr ihn aus. Berechnet es die Startposition nicht — auf
     Touchgeraeten faehrt es einen eigenen, oft haengenden Ersatzmodus —,
     bleibt der Kasten auf 0 stehen und der Text ist unwiderruflich weg.
     Auf dem Telefon ist die Ausblendung ohnehin ohne Wert: der Hero ist
     genau bildschirmhoch, der Text scrollt einfach mit hinaus.

     Das trifft NICHT die Ueberblendung zwischen den Folien (die laeuft
     ueber .qodef-slider-content-outer) und NICHT den Einflug aus
     seite.js (der laeuft an Titel und Text selbst). */
  .carousel.slide .item .qodef-slider-content { opacity: 1 !important; }
}

/* Folie 2 (home-main-slide-6, Azure-Monitor-Foto) im Hochformat.
   Das Bild ist 16:9, der Telefonbildschirm steht hochkant: `cover` schneidet
   links und rechts weg und behaelt die Mitte — und die Person steht bei
   ca. 20-36 % der Bildbreite, also links ausserhalb des Ausschnitts (nur die
   Brille am Rand war zu sehen). Darum den Ausschnitt nach links ziehen, so
   dass das Gesicht mittig sitzt. Der Text steht sonst genau auf Gesicht und
   Oberkoerper (Bildhoehe 10-60 %) und wird deshalb nach unten geschoben.
   Nur Hochformat bis Tablet-Breite; Desktop und Querformat bleiben. */
@media only screen and (max-width: 1000px) and (orientation: portrait) {
  .carousel.slide .item .qodef-image[style*="home-main-slide-6"] {
    background-position: 20% 50% !important;
  }
  .carousel.slide .item:has(.qodef-image[style*="home-main-slide-6"]) .qodef-slider-content-outer {
    top: 20svh;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Rueckruf in der Fusszeile — drei Felder statt einem
   ─────────────────────────────────────────────────────────────────────────
   Seit Name und Anlass Pflicht sind, ergaenzt seite.js im alten
   Fusszeilenformular (Contact Form 7) die beiden fehlenden Felder. Das
   Theme hat dieses Formular aber fuer EIN Feld mit dem Knopf daneben
   gebaut: das Nummernfeld auf 80 %, der Knopf absolut rechts daran
   geklebt. Mit drei Feldern sieht das wie ein Umbruchfehler aus.

   Deshalb hier untereinander, jedes auf voller Breite, der Knopf darunter.
   Nur in der Fusszeile — das Formular auf /contact/ bringt seine eigenen
   Stile mit (kn-…) und wird davon nicht beruehrt.
   ───────────────────────────────────────────────────────────────────── */
footer .wpcf7-form p { display: flex; flex-wrap: wrap; gap: 8px; }
footer .wpcf7-form .wpcf7-form-control-wrap { flex: 1 1 100%; }
footer .wpcf7-form input.wpcf7-text,
footer #wpcf7-footer-tel {
  width: 100%; margin-bottom: 0;
  border-right: 1px solid #B4B4B4;   /* das Theme nimmt sie fuer den Knopf weg */
  border-radius: 3px;
}
footer .wpcf7-form .wpcf7-submit {
  position: static; width: 100%; border-radius: 3px;
}

/* ── Ankuendigungsstreifen (seite.js, Inhalt aus Kontor) ────────────────
 *
 * Fest am unteren Fensterrand: der Streifen kommt per fetch und damit nach
 * dem ersten Zeichnen. Im Dokumentfluss oben wuerde er in diesem Moment die
 * ganze Seite nach unten schieben — bei einem bildschirmfuellenden Kopfbild
 * der haesslichste denkbare Sprung. Unten ueberlagert er nichts, was man
 * gerade liest.
 *
 * Farben aus der Seite selbst: #14161a ist der dunkle Grund der
 * Produktseite, #b2dd4c ihr Akzent. Keine neue Farbwelt fuer einen Kasten.
 */
.k-ankuendigung {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: calc(100% - 2rem);
  max-width: 46rem;
  box-sizing: border-box;
  padding: .75rem 1rem;
  border-radius: .4rem;
  border-left: 3px solid #b2dd4c;
  background: #14161a;
  color: #f2f4f6;
  font-size: .82rem;
  line-height: 1.45;
  box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .45);
  /* Kein Einflug bei "Bewegung reduzieren" — siehe @media unten. */
  animation: k-ank-auf .35s ease both;
}
@keyframes k-ank-auf {
  from { opacity: 0; transform: translate(-50%, 1rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .k-ankuendigung { animation: none; }
}
.k-ankuendigung b { display: block; font-weight: 600; }
.k-ankuendigung span { display: block; opacity: .85; }
.k-ankuendigung > div { flex: 1 1 auto; min-width: 0; }
.k-ankuendigung a {
  flex: none;
  color: #b2dd4c;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.k-ankuendigung a:hover { text-decoration: underline; }
.k-ankuendigung button {
  flex: none;
  background: none;
  border: 0;
  color: #9a9a9a;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 .2rem;
  cursor: pointer;
}
.k-ankuendigung button:hover { color: #f2f4f6; }
/* Angebot und Ereignis nur an der Kante unterscheiden — der Kasten selbst
   bleibt derselbe, damit nicht drei Gestaltungen nebeneinanderstehen. */
.k-ank-angebot  { border-left-color: #ff8a4a; }
.k-ank-ereignis { border-left-color: #c9ccd4; }

@media (max-width: 700px) {
  .k-ankuendigung {
    flex-wrap: wrap;
    bottom: .6rem;
    width: calc(100% - 1.2rem);
    font-size: .78rem;
  }
  /* Der Schliessknopf bleibt oben rechts, auch wenn der Verweis umbricht. */
  .k-ankuendigung button { position: absolute; top: .35rem; right: .5rem; }
}

/* ══ Hauptmenü wie im ursprünglichen WordPress-Theme (Startit) ══════════════
   Das Theme liefert das Aussehen selbst: weisse Schrift, grüne Kachel fährt
   beim Darüberfahren und für den aktuellen Punkt ein, weisse Leiste beim
   Hochscrollen, weisses Untermenü. Hier nur Korrekturen, die auf der
   statischen Kopie nötig sind (Rechner und Tablet quer, ab 1025 px):
   - weicher dunkler Verlauf am oberen Rand, damit die weisse Schrift auch
     auf hellen Fotos lesbar ist,
   - in der weissen Leiste dunkle Schrift (das Theme färbt sie weiss, die
     Umschaltung des Originals fehlt hier),
   - Untermenü direkt unter dem Punkt statt 40 px darunter,
   - keine Suche (ohne Funktion). */
@media (min-width: 1025px) {
  header.qodef-page-header { position: relative; }
  header.qodef-page-header::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px;
    background: linear-gradient(to bottom, rgba(11,16,26,.72) 0%, rgba(11,16,26,.46) 50%, rgba(11,16,26,0) 100%);
    pointer-events: none; z-index: 0;
  }
  header.qodef-page-header .qodef-menu-area { position: relative; z-index: 1; }

  .qodef-sticky-header .qodef-main-menu > ul > li:not(:hover) > a,
  .qodef-sticky-header .qodef-main-menu > ul > li:not(:hover) > a .item_text { color: #303030 !important; }
  .qodef-sticky-header a.qodef-side-menu-button-opener,
  .qodef-sticky-header a.qodef-side-menu-button-opener span { color: #303030 !important; }

  .qodef-main-menu li.has_sub > .second { top: 72px !important; border-top-width: 2px !important; }

  /* aktueller Bereich: keine Kachel; beim Darüberfahren bleibt die Kachel des Themes. */
  .qodef-main-menu > ul > li > a .item_text { position: relative; display: inline-block; }
  .qodef-main-menu > ul > li.qodef-active-item:not(:hover) > a .item_outer::before { transform: scaleX(0) !important; opacity: 0 !important; }

  .qodef-main-menu li.has_sub.kn-offen > .second { visibility: visible; overflow: visible; opacity: 1; }
  a.qodef-search-opener { display: none !important; }

  /* höhere Zeilen im Untermenü: der helle Streifen beim Darüberfahren füllt die ganze Zeile */
  .qodef-main-menu li.has_sub > .second .inner ul li { margin: 0 !important; height: auto !important; }
  .qodef-main-menu li.has_sub > .second .inner ul li > a,
  .qodef-main-menu li.has_sub > .second .inner ul li > a .item_outer,
  .qodef-main-menu li.has_sub > .second .inner ul li > a .item_inner { display: block; height: auto !important; line-height: 1.3 !important; }
  .qodef-main-menu li.has_sub > .second .inner ul li > a { padding: 15px 25px !important; }

  /* weisse Flächen zu 75 % durchsichtig (25 % Weiss). Untermenü: Hintergrund wird unscharf und abgedunkelt, deshalb helle Schrift;
     feste Leiste: Hintergrund wird unscharf und aufgehellt, deshalb dunkle Schrift. */
  /* 18.10.2026 (Nutzer): auf hellem Grund war das Glas hellgrau und die weisse Schrift unlesbar. Einheitliches Grau,
     fast deckend, auf Weiss wie auf dunklen Flächen gleich; ein Rest Unschärfe bleibt. */
  .qodef-main-menu li.has_sub > .second .inner ul { background-color: rgba(78,80,86,.94) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  .qodef-main-menu li.has_sub > .second .inner ul li > a { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .qodef-main-menu li.has_sub > .second .inner ul li > a:hover { color: #fff !important; background: rgba(255,255,255,.14); }
  .qodef-sticky-header .qodef-sticky-holder { background-color: rgba(255,255,255,.25) !important; -webkit-backdrop-filter: blur(14px) brightness(1.15) saturate(1.1); backdrop-filter: blur(14px) brightness(1.15) saturate(1.1); }
  .qodef-sticky-header .qodef-main-menu > ul > li:not(:hover) > a,
  .qodef-sticky-header .qodef-main-menu > ul > li:not(:hover) > a .item_text { color: #1e2128 !important; }
}

/* ── Kopier-Knopf an Codeblöcken (seite.js) ───────────────────────────────── */
.kn-kopierbox { position: relative; }
.kn-kopierbox > pre { padding-right: 52px; }
.kn-kopieren {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #555; border: 1px solid rgba(0,0,0,.18); border-radius: 6px;
  cursor: pointer; opacity: .8; line-height: 1;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}
.kn-kopieren:hover, .kn-kopieren:focus-visible { opacity: 1; color: #111; border-color: rgba(0,0,0,.4); }
.kn-kopieren:focus-visible { outline: 2px solid #b2dd4c; outline-offset: 1px; }
.kn-kopieren.ok { color: #1a7f37; border-color: #1a7f37; opacity: 1; }
@media (hover: none) { .kn-kopieren { width: 40px; height: 40px; } .kn-kopierbox > pre { padding-right: 60px; } }

/* ══ Handy-Menü wie das Desktop-Menü (7.10.2026) ═════════════════════════════
   Das Desktop-Menü wurde überarbeitet (weisse Raleway-Schrift fett, Untermenü als
   Milchglas mit grüner Kopflinie, helle Fläche beim Antippen). Das Handy-Menü hing
   noch am alten Stand: dunkle Fläche, grüne Schrift, Trennlinien, leuchtendes
   grünes „Chart“ mit Dreieck. Hier derselbe Aufbau wie am Rechner:
   - Fläche: weiss zu 25 %, unscharf und abgedunkelt (dieselben Werte wie das Untermenü am Rechner),
     grüne Kopflinie 2 px, unten abgerundet,
   - Hauptpunkte: weiss, 16 px, fett, ohne Schatten und ohne Trennlinien,
   - Unterpunkte: 14 px, mittelstark, weisser Text mit leichtem Schatten, eingerückt,
   - Antippen: helle Fläche (wie Darüberfahren im Untermenü), bei Hauptpunkten die grüne Kachel,
   - „Chart“ ist kein Sonderfall mehr (am Rechner ist es auch keiner). */
@media (max-width: 1024.98px) {
  .qodef-mobile-header .qodef-mobile-nav {
    background: rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(14px) brightness(.62) saturate(1.1);
    backdrop-filter: blur(14px) brightness(.62) saturate(1.1);
    border-top: 2px solid #b2dd4c;
    border-radius: 0 0 3px 3px;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .qodef-mobile-header .qodef-mobile-nav { background: rgba(16, 18, 22, .90); }
  }
  #menu-top-bar-menu-2 li > a,
  .qodef-mobile-header .qodef-mobile-nav ul li a {
    padding: 0 25px;
    font-size: 16px; font-weight: 700; letter-spacing: normal;
    color: #fff; text-shadow: none;
    border-bottom: 0;
    border-radius: 0;
  }
  /* aktueller Bereich: keine Farbe, wie am Rechner (dort gibt es für ihn auch keine Kachel) */
  .qodef-mobile-header .qodef-mobile-nav ul li.qodef-active-item > a,
  .qodef-mobile-header .qodef-mobile-nav ul li.current-menu-item > a,
  .qodef-mobile-header .qodef-mobile-nav ul li#mobile-menu-item-kontor a { color: #fff; font-weight: 700; }
  /* Antippen: grüne Kachel wie das Darüberfahren am Rechner */
  .qodef-mobile-header .qodef-mobile-nav ul li > a:active,
  .qodef-mobile-header .qodef-mobile-nav ul li > a:focus-visible {
    background: #b2dd4c; color: #fff; border-radius: 3px; outline: 0;
  }
  /* Unterpunkte */
  #menu-top-bar-menu-2 .kontor-unterpunkt > a,
  #menu-top-bar-menu-2 .aboutme-unterpunkt > a {
    padding-left: 25px !important; padding-right: 25px;
    min-height: 50px;
    font-size: 14px; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    background: rgba(255, 255, 255, .08);
  }
  #menu-top-bar-menu-2 .kontor-unterpunkt > a span,
  #menu-top-bar-menu-2 .aboutme-unterpunkt > a span { opacity: 1; font-size: 1em; color: #fff; }
  #menu-top-bar-menu-2 .kontor-unterpunkt > a:active,
  #menu-top-bar-menu-2 .aboutme-unterpunkt > a:active { background: rgba(255, 255, 255, .22); }
  /* „Chart“: kein Sonderfall mehr (kein Leuchtgrün, kein Dreieck, kein Puls) */
  #menu-top-bar-menu-2 .kontor-unterpunkt.kn-chart > a {
    background: rgba(255, 255, 255, .08); border-radius: 0; margin: 0; animation: none; box-shadow: none;
  }
  #menu-top-bar-menu-2 .kontor-unterpunkt.kn-chart > a:active { background: rgba(255, 255, 255, .22); }
  #menu-top-bar-menu-2 .kontor-unterpunkt.kn-chart > a span { color: #fff !important; font-weight: 500; font-size: 1em; }
  #menu-top-bar-menu-2 .kontor-unterpunkt.kn-chart > a span::before { content: none; }
}


/* ══ Startvideo auf Handy und Tablet: kein Standbild (7.10.2026) ═══════════════════════════════
   Das Theme zeigt auf Mobilgeräten ein Standbild statt des Videos; seite.js (startvideo) setzt ein eigenes Video ein, sobald
   das Standbild sichtbar wird. Damit zwischen Laden und Videostart kein Standbild aufblitzt, bleibt es UNSICHTBAR (visibility,
   nicht display: seite.js prüft display). Startet das Video nicht, setzt seite.js die Klasse k-video-fehlt, und das Standbild
   erscheint als Notlösung. Fällt das Skript ganz aus, erscheint das Standbild nach 4 s von selbst. */
.qodef-video .qodef-mobile-video-image { visibility: hidden; animation: k-standbild-spaet 0s 4s forwards; }
.qodef-video.k-video-fehlt .qodef-mobile-video-image { visibility: visible; animation: none; }
@keyframes k-standbild-spaet { to { visibility: visible; } }

/* Fussbereich auf dem Telefon: die drei Spalten (Aufgabenbereich, Planung, Rueckruf) stehen untereinander
   und beginnen alle an derselben Kante. Das Theme gibt der ersten Spalte 70 px Einzug und jeder Spalte
   eine Trennlinie rechts (Desktop-Regeln aus modules.min.css), die hier nicht passen. */
@media (max-width: 768px) {
  footer .qodef-footer-top .qodef-column,
  footer .qodef-footer-top .qodef-column:first-child { padding-left: 40px; padding-right: 40px; border-right: 0; }
}


/* ══ Suche (17.10.2026) ═══════════════════════════════════════════════════════════════════════════
   Menüeintrag "Suche" (seite.js setzt ihn in alle Menülisten), das Panel unter dem Menü und das Feld im
   Blog-Kopf. Die Logik steckt in suche.js. Ein Satz Farben für beide Oberflächen; hat die Seite einen
   dunklen Grund, setzt suche.js die Klasse kn-su-dunkel, und die Farben kehren sich um. */
.kn-su-panel, .kn-su-block, .kn-su-feld {
  --su-fg: #1f2328; --su-muted: #6b6f76; --su-bg: #fff; --su-flaeche: #fcfcfc; --su-linie: #e3e3e3; --su-linie-fein: #ececec;
  --su-titel: #0846a8; --su-text: #555; --su-aktiv: #f3f6fb; --su-chip: #eef0f4; --su-chip-fg: #444;
  --su-feld-bg: #fff; --su-feld-rand: #c9ccd4; --su-feld-fokus: #303030; --su-mark: #fff1b8;
}
.kn-su-dunkel {
  --su-fg: #e8eaed; --su-muted: #9aa0a8; --su-bg: #1b1d21; --su-flaeche: #202328; --su-linie: #33363c; --su-linie-fein: #2a2d33;
  --su-titel: #8ab4ff; --su-text: #b9bec6; --su-aktiv: #262a31; --su-chip: #2c3037; --su-chip-fg: #cfd3d9;
  --su-feld-bg: #14161a; --su-feld-rand: #4a4e56; --su-feld-fokus: #8ab4ff; --su-mark: rgba(255, 214, 102, .3);
}

/* Menüeintrag */
.kn-su-eintrag .kn-su-lupe { display: inline-block; vertical-align: -2px; margin-right: 3px; }
#menu-top-bar-menu-2 .kn-su-eintrag a { cursor: pointer; }

/* Feld */
.kn-su-beschriftung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kn-su-feld { position: relative; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; box-sizing: border-box; }
.kn-su-eingabe { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.kn-su-eingabe .kn-su-lupe { position: absolute; left: 14px; pointer-events: none; color: var(--su-muted); }
.kn-su-eingabe input[type="search"] {
  width: 100%; box-sizing: border-box; height: 46px; margin: 0; padding: 0 42px 0 42px;
  font: inherit; font-size: 16px; font-weight: 500; line-height: 46px; color: var(--su-fg); background: var(--su-feld-bg);
  border: 1px solid var(--su-feld-rand); border-radius: 4px; box-shadow: none; outline: 0; -webkit-appearance: none; appearance: none;
}
.kn-su-eingabe input[type="search"]::placeholder { color: var(--su-muted); opacity: 1; font-weight: 400; }
.kn-su-eingabe input[type="search"]:focus { border-color: var(--su-feld-fokus); box-shadow: 0 0 0 1px var(--su-feld-fokus); }
.kn-su-eingabe input[type="search"]::-webkit-search-cancel-button,
.kn-su-eingabe input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.kn-su-leer, .kn-su-zu {
  display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--su-muted);
  font-family: inherit; line-height: 1; border-radius: 50%;
}
.kn-su-leer { position: absolute; right: 5px; width: 36px; height: 36px; font-size: 22px; }
.kn-su-leer[hidden] { display: none; }
.kn-su-zu { flex: 0 0 auto; width: 44px; height: 44px; font-size: 30px; }
.kn-su-leer:hover, .kn-su-zu:hover { color: var(--su-fg); background: var(--su-aktiv); }
.kn-su-leer:focus-visible, .kn-su-zu:focus-visible { outline: 2px solid var(--su-feld-fokus); outline-offset: 0; }

/* Feld im Blog-Kopf (unter dem Einleitungstext) */
.qodef-title .kn-su-feld { max-width: 450px; margin: 22px 0 0 auto; }   /* rechtsbuendig, rund 30 % kuerzer */
/* Desktop: rechts, kurz ueber der Unterkante des Kopfbildes (Wunsch 17.10.2026, 22 px Abstand); Handy bleibt darunter.
   Die Kopfhoehe des Themes waechst ab 1141 px mit der Breite (gemessen: Abstand Feld-Bezug bis Kopfende = 10,6vw + 16px). */
@media (min-width: 769px) {
  .qodef-title .kn-su-feld { position: absolute; top: 66px; right: 0; width: 450px; margin: 0; }
}
@media (min-width: 1141px) { .qodef-title .kn-su-feld { top: calc(10.6vw - 46px); } }
@media (min-width: 769px) and (max-width: 1140px) { .qodef-title .kn-su-feld { width: 320px; } }
/* dezent: halbtransparent auf dem Bild, erst beim Fokus deutlich */
.qodef-title .kn-su-eingabe input[type="search"] {
  height: 40px; line-height: 40px; font-size: 15px; color: #fff; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .32); transition: background-color .15s, border-color .15s, color .15s;
}
.qodef-title .kn-su-eingabe input[type="search"]::placeholder { color: rgba(255, 255, 255, .72); }
.qodef-title .kn-su-eingabe .kn-su-lupe, .qodef-title .kn-su-leer { color: rgba(255, 255, 255, .75); }
.qodef-title .kn-su-eingabe input[type="search"]:focus {
  background: #fff; color: #1f2328; border-color: #fff; box-shadow: none;
}
.qodef-title .kn-su-eingabe:focus-within .kn-su-lupe, .qodef-title .kn-su-eingabe:focus-within .kn-su-leer { color: #6b6f76; }
.qodef-title .kn-su-eingabe input[type="search"]:focus::placeholder { color: #6b6f76; }

/* Trefferliste: gleiche Gestalt im Blog und im Panel */
.kn-su-block { max-width: 1100px; margin: 0 auto; padding: 32px 0 0; box-sizing: border-box; }
.kn-su-block[hidden], .kn-su-panel[hidden] { display: none; }
.kn-su-block .kn-su-inner { border: 1px solid var(--su-linie); background: var(--su-flaeche); padding: 8px 18px 10px; }
.kn-su-status { font-size: 13.5px; line-height: 1.45; color: var(--su-muted); padding: 10px 10px 8px; }
.kn-su-status:empty { display: none; }
.kn-su-liste { list-style: none; margin: 0; padding: 0; }
.kn-su-liste .kn-su-treffer { margin: 0; padding: 0; border-top: 1px solid var(--su-linie-fein); list-style: none; }
.kn-su-liste .kn-su-treffer:first-child { border-top: 0; }
.kn-su-liste .kn-su-treffer a {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 10px; text-decoration: none; color: inherit; border-radius: 3px;
}
.kn-su-liste .kn-su-treffer.aktiv a, .kn-su-liste .kn-su-treffer a:hover { background: var(--su-aktiv); }
.kn-su-liste .kn-su-bild { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border-radius: 3px; background: var(--su-chip); display: block; }
.kn-su-liste .kn-su-text { flex: 1 1 auto; min-width: 0; display: block; overflow-wrap: anywhere; }
.kn-su-liste .kn-su-titel { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--su-titel); }
.kn-su-liste .kn-su-auszug { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--su-text); }
.kn-su-liste .kn-su-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; font-size: 12.5px; color: var(--su-muted); }
.kn-su-liste .kn-su-meta time { color: inherit; }
.kn-su-liste .kn-su-chip { padding: 1px 9px; border-radius: 999px; background: var(--su-chip); color: var(--su-chip-fg); }
.kn-su-liste mark { background: var(--su-mark); color: inherit; padding: 0 1px; border-radius: 2px; }

/* Panel unter dem Menü, in der ganzen Breite */
.kn-su-panel {
  position: absolute; left: 0; right: 0; top: 100px; z-index: 100000; box-sizing: border-box;
  background: var(--su-bg); color: var(--su-fg); font-family: Raleway, sans-serif; border-top: 1px solid var(--su-linie); border-bottom: 1px solid var(--su-linie);
}
.kn-su-panel.kn-su-fest { position: fixed; }
.kn-su-panel .kn-su-inner { max-width: 1100px; margin: 0 auto; padding: 18px 20px 10px; box-sizing: border-box; }
.kn-su-panel .kn-su-liste {
  max-height: calc(100vh - var(--kn-su-oben, 100px) - 120px); min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 1140px) { .kn-su-block { padding-left: 1rem; padding-right: 1rem; } }
@media (max-width: 768px) {
  .kn-su-panel .kn-su-inner { padding: 14px 16px 8px; }
  .kn-su-panel .kn-su-liste { max-height: calc(100vh - var(--kn-su-oben, 72px) - 100px); max-height: calc(100dvh - var(--kn-su-oben, 72px) - 100px); }
  .kn-su-liste .kn-su-treffer a { gap: 12px; padding: 12px 6px; }
  .kn-su-liste .kn-su-bild { flex-basis: 52px; width: 52px; height: 52px; }
  .kn-su-liste .kn-su-titel { font-size: 16px; }
  .kn-su-block { padding-top: 22px; }
  .kn-su-block .kn-su-inner { padding: 6px 10px 8px; }
  .qodef-title .kn-su-feld { max-width: none; margin-top: 18px; }
}


/* Suche-Panel (Korrektur 17.10.2026): so breit wie die Menüzeile, zurückhaltend wie das Feld im Blog-Kopf.
   Milchglas mit dunklem Hauch, dünner heller Rand; die Breite setzt suche.js (positionieren). */
.kn-su-panel {
  --su-fg: #fff; --su-muted: rgba(255, 255, 255, .62); --su-bg: rgba(20, 22, 26, .58); --su-linie: rgba(255, 255, 255, .28);
  --su-linie-fein: rgba(255, 255, 255, .12); --su-titel: #dbe7ff; --su-text: rgba(255, 255, 255, .78); --su-aktiv: rgba(255, 255, 255, .1);
  --su-chip: rgba(255, 255, 255, .14); --su-chip-fg: rgba(255, 255, 255, .85); --su-feld-bg: rgba(255, 255, 255, .1);
  --su-feld-rand: rgba(255, 255, 255, .3); --su-feld-fokus: rgba(255, 255, 255, .75); --su-mark: rgba(255, 214, 102, .35);
  left: 16px; right: auto; width: calc(100vw - 32px); border: 1px solid var(--su-linie); border-radius: 4px; box-sizing: border-box;
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); box-shadow: none;
}
.kn-su-panel .kn-su-inner { max-width: none; padding: 12px 14px 6px; }
.kn-su-panel .kn-su-eingabe input[type="search"] { height: 40px; line-height: 40px; font-size: 15px; }
.kn-su-panel .kn-su-eingabe input[type="search"]:focus { box-shadow: none; background: rgba(255, 255, 255, .16); }
.kn-su-panel .kn-su-zu { width: 36px; height: 36px; font-size: 26px; }
.kn-su-panel .kn-su-liste .kn-su-titel { font-size: 16px; }
.kn-su-panel .kn-su-liste .kn-su-treffer a { padding: 11px 8px; }
@media (max-width: 768px) { .kn-su-panel .kn-su-inner { padding: 10px 10px 4px; } }
.kn-su-panel { --su-bg: rgba(22, 24, 29, .86); }
.kn-su-panel .kn-su-eingabe input[type="search"] { color: #fff !important; -webkit-text-fill-color: #fff; }
.kn-su-panel .kn-su-eingabe input[type="search"]::placeholder { color: rgba(255, 255, 255, .6); -webkit-text-fill-color: rgba(255, 255, 255, .6); }
.kn-su-panel .kn-su-status { color: rgba(255, 255, 255, .7); }

/* Übersetzte Seiten (Google Übersetzer, Klasse aus seite.js): Menüpunkte beginnen gross ("Home", "Contact"),
   Google liefert sonst "home"/"contact" klein (Nutzer 18.10.2026) */
html.kn-uebersetzt .qodef-main-menu > ul > li:not(.kn-sprache) > a .item_text,
html.kn-uebersetzt .qodef-mobile-nav ul > li:not(.kn-sprache) > a > span { display: inline-block; }
html.kn-uebersetzt .qodef-main-menu > ul > li:not(.kn-sprache) > a .item_text::first-letter,
html.kn-uebersetzt .qodef-mobile-nav ul > li:not(.kn-sprache) > a > span::first-letter { text-transform: uppercase; }

/* Sprachmenue nach "Kontakt" (17.10.2026, seit 18.10.2026 auf allen Seiten; Logik: seite.js): aufklappbar wie "Über mich" */
.kn-sprache .kn-flagge { display: inline-block; vertical-align: -2px; margin-right: 7px; line-height: 0; }
.kn-sprache .kn-flagge svg { width: 20px; height: 13px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.kn-sprache .kn-flagge-de svg { width: 13px; height: 13px; }
.kn-sprache .item_text, .kn-sprache .item_text2 { white-space: nowrap; }
li.kn-sprache.has_sub:hover > .second, li.kn-sprache.has_sub:focus-within > .second { visibility: visible !important; opacity: 1 !important; display: block !important; }
.kn-sprache .second .kn-sprache-aktiv a { cursor: default; font-weight: 600; }
.kn-sprache-kopf a { pointer-events: none; }
/* Auswahlliste linksbuendig, Flaggen in gleich breiten Feldern, damit die Namen untereinander beginnen (Wunsch 17.10.2026) */
.kn-sprache .second .inner ul, .kn-sprache .second li, .kn-sprache .second li a, .kn-sprache .second .item_outer,
.kn-sprache .second .item_inner { text-align: left !important; justify-content: flex-start !important; }
.kn-sprache .second .item_text2 { display: inline-flex; align-items: center; }
.kn-sprache .kn-flagge { width: 20px; display: inline-flex !important; justify-content: center; }

/* Globus fuer weitere Sprachen und das Feld "Weitere Sprache …" (17.10.2026) */
.kn-sprache .kn-flagge-welt svg { width: 16px; height: 16px; box-shadow: none; border-radius: 0; color: currentColor; }
.kn-sprache-weitere .kn-sprache-feld { display: flex; align-items: center; padding: 8px 14px 12px 22px; box-sizing: border-box; max-width: 100%; }
.kn-sprache-weitere input { width: 100%; min-width: 0; box-sizing: border-box; height: 32px; padding: 0 10px; font: inherit; font-size: 14px; color: #fff;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.4); border-radius: 4px; outline: none; }
.kn-sprache-weitere input::placeholder { color: rgba(255,255,255,.75); }
.kn-sprache-weitere input:focus { border-color: #fff; background: rgba(0,0,0,.5); }
#menu-top-bar-menu-2 .kn-sprache-weitere .kn-sprache-feld { padding: 8px 0 12px 40px; }
#menu-top-bar-menu-2 .kn-sprache-weitere input { color: inherit; background: transparent; border-color: rgba(0,0,0,.25); }
#menu-top-bar-menu-2 .kn-sprache-weitere input::placeholder { color: rgba(0,0,0,.5); }

/* Google Übersetzer: kein "Originaltext"-Feld und keine blaue Markierung beim Überfahren von Text (Nutzer 18.10.2026:
   "das stört jeden"). Die Kennungen goog-gt-tt/goog-gt-vt setzt Google selbst; die Klassen VIpgJd-… sind verschluesselt
   und koennen sich aendern, darum zusaetzlich ueber Teilnamen */
#goog-gt-tt, #goog-gt-vt, .goog-tooltip, .goog-te-balloon-frame { display: none !important; visibility: hidden !important; }
.goog-text-highlight, font[class*="fmcmS-sn54Q"], [class*="VIpgJd-yAWNEb-VIpgJd-fmcmS"] { background: none !important; box-shadow: none !important; }

/* Rechts-nach-links-Sprachen über den Google Übersetzer (Klasse kn-rtl aus seite.js, 18.10.2026): Texte rechtsbündig
   und in Leserichtung; Rahmen, Menü und Spalten bleiben, Code und Kalenderzahlen bleiben links nach rechts */
html.kn-rtl .qodef-content :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt, td, th, ul, ol, .widget, .kn-su-text),
html.kn-rtl .qodef-title :is(h1, .qodef-title-subtitle, span), html.kn-rtl .qodef-page-footer :is(p, li, h1, h2, h3, h4, h5, .widget) {
  direction: rtl; text-align: right; }
html.kn-rtl :is(pre, code, .kn-sprache, .kn-sprache *) { direction: ltr; text-align: left; }
/* Kalender wie in arabischen Kalendern von rechts: erste Spalte rechts, Monatspfeile gespiegelt */
html.kn-rtl .kal-tab, html.kn-rtl .kal-kopf { direction: rtl; }
html.kn-rtl .kal-tab td, html.kn-rtl .kal-tab th { text-align: center; }
html.kn-rtl .kal-kopf .kal-pfeil { transform: scaleX(-1); }

/* Rechts-nach-links, Spiegelung (18.10.2026, nach Vorbild arabischer Blogs wie Al Jazeera, ArabGeek, AITNews, BBC Arabic):
   Menü beginnt rechts, im Blog steht die Seitenleiste links, Blätter-Pfeile gespiegelt (Tastatur folgt in blog-kopf.js).
   Bewusst nicht gespiegelt: Kopfzeile, Fusszeile, Bilder, Logo, Kalender, Code. Grössere Umbauten erst bei Bedarf. */
html.kn-rtl .qodef-main-menu > ul { direction: rtl; display: flex !important; }   /* Theme laesst die Punkte schweben (float), Flex folgt der Leserichtung */
html.kn-rtl .blog-seite.blog-liste { direction: rtl; }
html.kn-rtl .blaettern-c .pfeil svg { transform: scaleX(-1); }

/* Google Übersetzer: Leiste oben ("Google Übersetzen  Deutsch → Norwegisch") ausgeblendet (Nutzer 18.10.2026: "hässlich und
   störend"). Sprachwahl und Rückweg zu Deutsch bietet das eigene Sprachmenü; Google schiebt die Seite sonst 56 px nach unten. */
#gt-nvframe { display: none !important; }
html.translated-ltr body, html.translated-rtl body, html.kn-uebersetzt body { margin-top: 0 !important; }
html.kn-rtl .blog-seitenleiste .kal-tab .kal-kw { border-right: 0 !important; border-left: 1px solid #e3e3e3 !important; }
html.kn-rtl .qodef-title .qodef-title-holder, html.kn-rtl .qodef-title .qodef-container-inner, html.kn-rtl .qodef-title .qodef-title-subtitle-holder { text-align: right; }
html.kn-rtl .tasten-hilfe, html.kn-rtl .tasten-hilfe * { direction: ltr; }   /* Tasten liegen auf der Tastatur fest: links bleibt links */

/* ── Handy-Steuerung v1 (18.10.2026, Handy = freie Hand) ──────────────────────────────────────────────────────
   Schwebende Daumenleiste unten (schrumpft beim Lesen nach unten, kommt beim Hochscrollen zurück), Blatt von unten
   für Sprache und Weiteres, Wischen zwischen Artikeln mit Seitenübergang in Wischrichtung, Lesefortschritt.
   Nur Berührungsgeräte mit schmalem Bildschirm; Logik in seite.js („Handy-Steuerung“). Farben der Seite. */
/* Touch-Menü: gilt per Klasse html.kh-touch (seite.js), nicht mehr nach Breite (18.10.2026) */
  html.kh-touch .kh-leiste { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    z-index: 9990; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px;
    background: rgba(20,22,26,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: transform .25s ease, opacity .25s ease; font-family: Raleway, sans-serif; }
  html.kh-touch .kh-leiste.kh-klein { transform: translateX(-50%) translateY(calc(100% + 24px)); opacity: 0; }
  html.kh-touch .kh-leiste a, html.kh-touch .kh-leiste button { min-width: 52px; min-height: 48px; padding: 0 10px; border: 0; border-radius: 999px;
    background: transparent; color: #f2f2f2; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font: 600 10.5px/1.1 Raleway, sans-serif; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  html.kh-touch .kh-leiste svg { width: 20px; height: 20px; }
  html.kh-touch .kh-leiste .kh-aktiv { background: #b2dd4c; color: #14161a; }
  html.kh-touch .kh-leiste .kh-aus { opacity: .35; pointer-events: none; }
  html.kh-touch .kh-fortschritt { width: 92px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; margin: 0 6px; }
  html.kh-touch .kh-fortschritt i { display: block; height: 100%; width: 0; background: #b2dd4c; border-radius: 2px; }
  html.kh-touch body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* Musik-Knopf (Plugin Soundy, setzt left/bottom inline): unten liegt die Leiste, also oben links (18.10.2026) */
  html.kh-touch img.war_soundy_audio_control { top: calc(14px + env(safe-area-inset-top)) !important; left: 14px !important; bottom: auto !important;
    width: 40px !important; height: 40px !important; padding: 7px !important; box-sizing: border-box; border-radius: 12px !important; z-index: 9980 !important;
    background: rgba(8,9,11,.80); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
  /* Blatt von unten */
  html.kh-touch .kh-blatt { position: fixed; inset: auto 0 0 0; z-index: 9995; max-height: 82vh; overflow-y: auto; margin: 0; width: auto; max-width: none;
    border: 0; border-radius: 22px 22px 0 0; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); background: #ffffff; color: #14161a;
    box-shadow: 0 -10px 30px rgba(0,0,0,.25); font-family: Raleway, sans-serif; }
  html.kh-touch .kh-blatt::backdrop { background: rgba(20,22,26,.45); }
  html.kh-touch .kh-blatt[open] { animation: kh-hoch .22s ease-out; }
  @keyframes kh-hoch { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
  html.kh-touch .kh-griff { width: 42px; height: 5px; border-radius: 3px; background: #d2d2d2; margin: 0 auto 14px; }
  html.kh-touch .kh-blatt h3 { margin: 6px 0 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
  html.kh-touch .kh-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  html.kh-touch .kh-kacheln a { min-height: 76px; border-radius: 16px; background: #f2f4ee; color: #14161a; text-decoration: none; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 14px; }
  html.kh-touch .kh-sprachen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.kh-touch .kh-sprachen a { min-height: 46px; padding: 0 12px; border-radius: 12px; background: #f2f4ee; color: #14161a; text-decoration: none;
    display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
  html.kh-touch .kh-sprachen a .kn-flagge svg { width: 22px; height: 15px; }
  html.kh-touch .kh-sprachen a .kn-flagge { display: inline-flex; flex-shrink: 0; width: 22px; margin-right: 2px; }
  /* Blatt v2: altes Burgermenue weg, Highlight oben, Sprache als eine Zeile (18.10.2026) */
  html.kh-touch .qodef-mobile-header .qodef-mobile-menu-opener, html.kh-touch .qodef-mobile-header .qodef-mobile-nav { display: none !important; }
  html.kh-touch .kh-highlight:empty { display: none; }
  html.kh-touch .kh-neu { display: flex; gap: 12px; align-items: center; padding: 10px; margin: 4px 48px 16px 0; border-radius: 16px; background: #f2f4ee; color: #14161a; text-decoration: none; }
  html.kh-touch .kh-neu img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
  html.kh-touch .kh-neu span { font-weight: 600; font-size: 15px; line-height: 1.3; }
  html.kh-touch .kh-neu small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; font-weight: 600; margin-bottom: 2px; }
  html.kh-touch .kh-sprache { margin-top: 4px; }
  html.kh-touch .kh-kacheln a { min-height: 56px !important; border-radius: 14px; }
  html.kh-touch .kh-sprache summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: #f2f4ee; font-weight: 600; cursor: pointer; }
  html.kh-touch .kh-sprache summary::-webkit-details-marker { display: none; }
  html.kh-touch .kh-sprache .kh-akt { display: flex; align-items: center; gap: 8px; color: #14161a; font-weight: 600; }
  html.kh-touch .kh-sprache .kh-akt * { margin: 0 !important; color: inherit !important; }
  html.kh-touch .kh-sprache .kh-aendern { margin-left: auto; font-style: normal; font-weight: 500; color: #6b6b6b; font-size: 14px; }
  html.kh-touch .kh-sprache summary .kn-flagge svg { width: 22px; height: 15px; }
  html.kh-touch .kh-sprache[open] summary { margin-bottom: 10px; }
  html.kh-touch .kh-zu { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f2f4ee; font-size: 22px; }
  /* Blatt v3 (18.10.2026): Tiefschwarz als Glas, 80 % Deckkraft, Seite scheint weich durch; Kacheln dunkel mit feiner Kante */
  html.kh-touch .kh-leiste { background: rgba(8,9,11,.58) !important; -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 30px rgba(0,0,0,.30);
    /* Kommt weich herein (Einblenden), geht etwas schneller (Nutzer 18.10.2026) */
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
  html.kh-touch .kh-leiste.kh-klein { transform: translateX(-50%) translateY(16px); opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .3s ease; }
  html.kh-touch .kh-blatt { background: rgba(8,9,11,.82) !important; color: #f4f4f2 !important; -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 -14px 40px rgba(0,0,0,.45) !important; }
  html.kh-touch .kh-blatt::backdrop { background: rgba(0,0,0,.30); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  html.kh-touch .kh-griff { background: rgba(255,255,255,.28) !important; }
  html.kh-touch .kh-zu { background: rgba(255,255,255,.08) !important; color: #f4f4f2 !important; border: 1px solid rgba(255,255,255,.10) !important; }
  html.kh-touch .kh-kacheln a, html.kh-touch .kh-sprachen a, html.kh-touch .kh-sprache summary { background: rgba(255,255,255,.06) !important; color: #f4f4f2 !important;
    border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); letter-spacing: .01em;
    transition: background .15s ease, transform .15s ease; }
  html.kh-touch .kh-kacheln a:active, html.kh-touch .kh-sprachen a:active { background: #b2dd4c !important; color: #14161a !important; transform: scale(.97); }
  html.kh-touch .kh-kacheln a { position: relative; }
  /* Kein Pfeil fuer "neues Fenster" auf den Kacheln (Nutzer 18.10.2026; iPhone zeigte ihn als Emoji-Kaestchen) */
  html.kh-touch .kh-neu { background: linear-gradient(135deg, rgba(178,221,76,.20), rgba(255,255,255,.04)) !important; color: #f4f4f2 !important;
    border: 1px solid rgba(178,221,76,.25); }
  html.kh-touch .kh-neu small { color: #b2dd4c !important; }
  html.kh-touch .kh-sprache .kh-akt { color: #f4f4f2 !important; }
  html.kh-touch .kh-sprache .kh-aendern { color: rgba(244,244,242,.55) !important; }
  /* Seitenübergang zwischen Artikeln in Wischrichtung (View Transitions zwischen Dokumenten) */
  @media (pointer: coarse) { @view-transition { navigation: auto; } }   /* nur Touch, Desktop bleibt ohne Übergang */
  html.kh-touch:active-view-transition-type(weiter)::view-transition-old(root) { animation: kh-raus-links .28s ease both; }
  html.kh-touch:active-view-transition-type(weiter)::view-transition-new(root) { animation: kh-rein-rechts .28s ease both; }
  html.kh-touch:active-view-transition-type(zurueck)::view-transition-old(root) { animation: kh-raus-rechts .28s ease both; }
  html.kh-touch:active-view-transition-type(zurueck)::view-transition-new(root) { animation: kh-rein-links .28s ease both; }
  @keyframes kh-raus-links { to { transform: translateX(-30%); opacity: 0; } }
  @keyframes kh-rein-rechts { from { transform: translateX(30%); opacity: 0; } }
  @keyframes kh-raus-rechts { to { transform: translateX(30%); opacity: 0; } }
  @keyframes kh-rein-links { from { transform: translateX(-30%); opacity: 0; } }
  html.kh-touch .kh-wischhinweis { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9989;
    padding: 8px 14px; border-radius: 999px; background: rgba(20,22,26,.85); color: #f2f2f2; font: 600 12.5px Raleway, sans-serif;
    transition: opacity .4s; pointer-events: none; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html.kh-touch .kh-leiste, html.kh-touch .kh-blatt[open] { transition: none; animation: none; }
  @view-transition { navigation: none; }
}

/* "Aktuell" in der Leiste: Blatt "Auf dem Laufenden bleiben" (18.10.2026), im Stil von Blatt v3 */
/* Touch-Menü: gilt per Klasse html.kh-touch (seite.js), nicht mehr nach Breite (18.10.2026) */
  html.kh-touch #kh-laufend h3 { color: rgba(244,244,242,.6) !important; margin: 4px 52px 14px 2px; }
  html.kh-touch .kh-laufend { display: grid; gap: 10px; margin-bottom: 14px; }
  html.kh-touch .kh-laufend a { display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: 16px; text-decoration: none;
    background: rgba(255,255,255,.06); color: #f4f4f2 !important; border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: background .15s ease, transform .15s ease; }
  html.kh-touch .kh-laufend a:active { background: #b2dd4c; color: #14161a !important; transform: scale(.98); }
  html.kh-touch .kh-l-ico { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(178,221,76,.16); color: #b2dd4c; }
  html.kh-touch .kh-l-ico svg { width: 22px; height: 22px; }
  html.kh-touch .kh-l-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.kh-touch .kh-l-text b { font: 600 15px/1.25 Raleway, sans-serif; }
  html.kh-touch .kh-l-text small { font: 500 12.5px/1.3 Raleway, sans-serif; color: rgba(244,244,242,.6); }
  html.kh-touch .kh-laufend a:active .kh-l-text small { color: rgba(20,22,26,.7); }
  html.kh-touch .kh-laufend-folgen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  html.kh-touch .kh-laufend-folgen a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(244,244,242,.85) !important;
    text-decoration: none; font: 600 13px Raleway, sans-serif; }
  html.kh-touch .kh-laufend-folgen svg { width: 18px; height: 18px; }


/* Tablets (breiter als 768 px): Blätter schmal und mittig statt über die ganze Breite; Umschalter Touch-/Desktop-Menü (18.10.2026) */
@media (min-width: 769px) {
  html.kh-touch .kh-blatt { left: 50% !important; right: auto !important; transform: translateX(-50%); width: min(640px, 100vw) !important; }
  html.kh-touch .kh-blatt[open] { animation: kh-hoch-mitte .22s ease-out; }
  @keyframes kh-hoch-mitte { from { transform: translateX(-50%) translateY(40%); opacity: .4; } to { transform: translateX(-50%); opacity: 1; } }
}
/* Altes Menü auf Tablets weg (Nutzer 18.10.2026): Desktop-Kopf im Querformat ohne Hauptmenü und Seitenmenü-Knopf */
html.kh-touch .qodef-page-header .qodef-main-menu, html.kh-touch .qodef-page-header .qodef-side-menu-button-opener,
html.kh-touch .qodef-sticky-header .qodef-main-menu, html.kh-touch .qodef-sticky-header .qodef-side-menu-button-opener,
html.kh-touch .qodef-side-menu { display: none !important; }