/* Top-Navigation: Kopfzeile, Skip-Link, Logo-Leiste, Schnellzugriffe, Suche,
   Theme- und Sprachumschalter, Login-Link, Hauptmenü mit Dropdowns und das
   Mobilmenü mit seinen Panels (Konzept top-navigation, E-16; AP2-49). Jede
   Seite mit #thomaschristl-nav-placeholder lädt diese Datei als eigenen
   <link> direkt nach styles.css und theme-early.js; Seiten-CSS lädt danach.
   Die Tokens (:root, [data-theme="dark"]) und .thomaschristl-visually-hidden
   stehen in embedded/general/styles.css, Fußbereich-Regeln gehören nicht
   hierher. Reihenfolge wie vor dem Umzug: zuerst die Grundregeln, dann die
   mobile-first Basis des reduzierten Modus, danach der gegatete
   Desktop-Block, der allein durch seine Position nach der Basis gewinnt. */

/* Radien der Navigation (AP2-51, Entscheidung E1): Nur diese Komponente folgt
   dem Soll-Bild mit 8/10/14/20 px; die übrige Website bleibt bei 5 px. Deshalb
   eigene Tokens hier und kein geänderter Wert der --radius-*-Tokens in
   styles.css. Pillen nutzen weiter --radius-pill (999px). In dieser Datei
   steht kein Radius von 4 oder 5 px und kein --radius-xs/-md/-lg/-xl mehr. */
:root {
  --thomaschristl-nav-radius-xs: 8px;
  --thomaschristl-nav-radius-sm: 10px;
  --thomaschristl-nav-radius-md: 14px;
  --thomaschristl-nav-radius-lg: 20px;
  /* Logout-Knopf: ein Rot, auf dem der weiße Text 4.5:1 erreicht (WCAG 1.4.3)
     und das sich in beiden Themes mit mindestens 3:1 von der Kopfzeile abhebt
     (WCAG 1.4.11). Das hellere Rot der Seiten-Werkzeugleisten (#cf4d5c)
     erreicht mit Weiß nur 4.3:1 und wird hier deshalb nicht verwendet. */
  --thomaschristl-nav-logout-bg: #c2404f;
  --thomaschristl-nav-logout-text: #ffffff;
  /* Untertitel neben dem Logo. Auf dem Desktop steht er auf Glas: --muted
     (#60707d) fiele dort unter 4.5:1, sobald dunkle Inhalte durch die
     Kopfzeile scheinen (WCAG 1.4.3); dieser Ton hält auch dann 5.5:1. */
  --thomaschristl-nav-tagline: #4d5d6b;
}

/* Im dunklen Theme kehrt sich das Paar um wie beim Login-Knopf: heller Knopf,
   dunkle Schrift. Das dunkle Rot oben fiele auf der dunklen Kopfzeile unter
   3:1, sobald helle Inhalte durch das Glas scheinen. */
[data-theme="dark"] {
  --thomaschristl-nav-logout-bg: #f28b82;
  --thomaschristl-nav-logout-text: #0f1b25;
  --thomaschristl-nav-tagline: #adc1cf;
}

html.mobile-nav-open,
body.mobile-nav-open {
  overscroll-behavior: none;
  overflow: hidden;
}

/* Grundfläche der Kopfzeile: deckend und ohne Radius. So gilt sie im
   reduzierten Modus (Leiste am unteren Rand, Konzept top-navigation E-11:
   kein Glas auf dem Handy); Glas, Haarlinie und Glas-Schatten setzt erst der
   gegatete Desktop-Block am Ende dieser Datei. */
.site-header {
  z-index: 20;
  border-radius: 0;
  background: var(--header-bg-solid);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
}

/* Ausgeblendete Hauptnavigation (Toolbar-Kacheln der SaaS-Seiten): Der
   Skip-Link sitzt im Navigationsfragment dieser Kopfzeile und muss auch hier
   erster Tab-Stopp bleiben (WCAG 2.4.1). Deshalb verschwindet nur der übrige
   Fragmentinhalt, und die Kopfzeile schrumpft auf null Fläche, statt samt
   Skip-Link per display: none aus dem Dokument zu fallen. Ohne
   backdrop-filter, weil ein Element mit diesem Filter der Bezugsrahmen
   seiner position: fixed-Nachfahren wird: Der fokussierte Skip-Link hinge
   sonst an der Kopfzeile ohne Höhe statt am Fenster und läge nach dem
   Scrollen außerhalb des sichtbaren Bereichs. */
body.thomaschristl-main-nav-hidden .site-header {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.thomaschristl-main-nav-hidden #thomaschristl-nav-placeholder {
  min-height: 0;
}

body.thomaschristl-main-nav-hidden #thomaschristl-nav-placeholder > :not(.thomaschristl-skip-link) {
  display: none;
}

/* Reserve der Kopfzeile, bis der Modus feststeht. Bis 860px ist das die feste
   Leiste unten (mobile-first, 92px). Ab 861px beginnt der Inhalt entweder unter
   dem Desktop-Kopf (139px hoch) oder im reduzierten Modus am Fensterrand. Beides
   ist erst nach der Messung bekannt, und CLS rechnet die Strecke gegen die
   Fensterbreite. Ab 1410px hat die Kopfzeile auf den Seiten mit der Schrift der
   Website auch angemeldet Platz, dort reserviert sie ihre volle Höhe: 119px plus
   Innenabstand und Rand. Darunter steht sie bei 50px (30px plus Innenabstand und
   Rand), sodass der Inhalt in beiden Modi nur ein kleines Stück rückt: Der
   schmalste Desktop rückt 89px bei 1193px Breite, der schmalste reduzierte Modus
   50px bei 861px. Andere Seitenfamilien halten den reduzierten Modus angemeldet
   bis 1514px (Tabelle in README.md, „Bekannte Einschränkungen“); dort rückt der
   Inhalt von 139px an seinen Anfang. Die Grenze folgt ihnen nicht, weil sonst jeder
   abgemeldete Besucher bis 1514px die Stufe von 89px bekäme, statt keiner. */
#thomaschristl-nav-placeholder {
  --thomaschristl-nav-reserve: 119px;
  display: block;
  width: 100%;
  min-height: 92px;
}

@media (max-width: 1409px) {
  #thomaschristl-nav-placeholder {
    --thomaschristl-nav-reserve: 30px;
  }
}

#thomaschristl-nav-placeholder.thomaschristl-nav-placeholder--loaded,
#thomaschristl-nav-placeholder.thomaschristl-nav-placeholder--failed {
  min-height: 0;
}

/* Erst nav-toggle.js entscheidet, ob ab 861px der Desktop-Kopf passt: Vorher
   tragen die Einträge noch ihre Chevrons und die Wörter der Ausgangssprache,
   brechen darum um und würden den Inhalt verschieben. Bis zur Entscheidung
   hält der Platzhalter deshalb seine Reserve, und die Kopfzeile bleibt
   unsichtbar; so springt sie nicht vom oberen an den unteren Fensterrand.
   load-navigation.js gibt sie spätestens nach einer Frist frei, und ein
   Ladefehler sofort (--failed), weil das Markup dann über seine Links bedienbar
   bleiben muss. Die Breitenmessung arbeitet auch auf verborgenen Elementen. */
@media (min-width: 861px) {
  :where(body:not(.thomaschristl-nav-force-mobile)) #thomaschristl-nav-placeholder {
    min-height: var(--thomaschristl-nav-reserve);
  }

  :where(body:not(.thomaschristl-nav-force-mobile)):not(.thomaschristl-main-nav-hidden) #thomaschristl-nav-placeholder.thomaschristl-nav-placeholder--loaded:not(.thomaschristl-nav-placeholder--layout-settled):not(.thomaschristl-nav-placeholder--failed) {
    height: var(--thomaschristl-nav-reserve);
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .site-header:has(#thomaschristl-nav-placeholder:not(.thomaschristl-nav-placeholder--layout-settled):not(.thomaschristl-nav-placeholder--failed)),
  :where(body:not(.thomaschristl-nav-force-mobile)) .site-header:has(#thomaschristl-nav-placeholder:not(.thomaschristl-nav-placeholder--layout-settled):not(.thomaschristl-nav-placeholder--failed)) .site-nav {
    visibility: hidden;
  }

  /* Der Skip-Link bleibt auch dann der erste Tab-Stopp (WCAG 2.4.1). */
  :where(body:not(.thomaschristl-nav-force-mobile)) .site-header:has(#thomaschristl-nav-placeholder:not(.thomaschristl-nav-placeholder--layout-settled):not(.thomaschristl-nav-placeholder--failed)) .thomaschristl-skip-link {
    visibility: visible;
  }
}

/* Skip-Link (WCAG 2.4.1). Bis zum Fokus visuell verborgen, aber im
   Accessibility-Tree und in der Tab-Reihenfolge - deshalb die Clip-Technik
   von .thomaschristl-visually-hidden statt display/visibility. Zielt auf
   <main id="thomaschristl-main" tabindex="-1">, das jede Seite statisch
   trägt, damit der Sprung auch ohne partielle Navigation funktioniert. */
.thomaschristl-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.thomaschristl-skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 18px;
  overflow: visible;
  clip: auto;
  border-radius: var(--thomaschristl-nav-radius-xs);
  background: var(--accent-solid);
  color: var(--accent-contrast);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow);
  outline: 3px solid var(--accent-contrast);
  outline-offset: -6px;
}

/* Scroll-Abstand für die Leisten, die einen Fensterrand verdecken (WCAG
   2.4.11, AP2-51b). Der Browser scrollt ein fokussiertes Element und jedes
   Sprungziel nur bis an den Rand des Scrollbereichs; scroll-padding am <html>
   zieht diesen Rand um die Höhe der Leiste ein. Das gilt für den
   Skip-Link-Sprung nach <main> genauso wie für ein Ziel, das Shift+Tab
   erreicht. Die Höhe steht nur hier: Ein Sprungziel rechnet in
   scroll-margin-top seinen eigenen Anteil ein (eigene klebende Elemente,
   eigener Abstand), nie die Höhe der Kopfzeile. Die Höhen pflegt
   nav-toggle.js. Die Regel steht in dieser Datei und nicht in styles.css,
   weil nur Seiten mit Navigation sie laden: Eine Seite ohne Kopfzeile bekommt
   so keinen Abstand.

   Basis ist der reduzierte Modus: oben die fixierte Logo-Leiste plus 10px,
   unten die fixierte Aktionsleiste plus 64px, weil über ihr das
   Cookie-Zahnrad schwebt (42px hoch, 14px Abstand; derselbe Wert wie im
   Vital Insights Tracker). Beide Selektoren haben nur die Spezifität eines
   Typselektors und stehen in der Kaskade vor dem Seiten-CSS, damit die
   eigenen html-Regeln des Vital Insights Tracker (Filterleiste, Dock) und
   die des Cookie-Banners weiter gewinnen. */
html {
  scroll-padding-top: calc(var(--thomaschristl-brand-bar-height, 64px) + 10px);
  scroll-padding-bottom: calc(var(--thomaschristl-header-height, 110px) + 64px);
}

/* Ab 861px und nicht erzwungen mobil klebt .site-header bündig oben (top: 0):
   Oben zählt dann ihre Höhe, unten verdeckt nichts mehr. Das Wurzelelement
   kann das Desktop-Gate nicht als Vorfahren tragen, deshalb steht das Gate in
   :has(); mit :where() bleibt die Spezifität beim Typselektor. */
@media (min-width: 861px) {
  html:has(> :where(body:not(.thomaschristl-nav-force-mobile))) {
    scroll-padding-top: calc(var(--thomaschristl-header-height, 140px) + 10px);
    scroll-padding-bottom: auto;
  }
}

.header-top {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.header-start {
  align-items: center;
  gap: 0;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand img {
  border-radius: var(--thomaschristl-nav-radius-xs);
  background: transparent;
}

.brand span {
  display: block;
  color: var(--thomaschristl-nav-tagline);
}

.brand-text strong {
  display: block;
}

.header-actions {
  display: flex;
  margin-left: auto;
}

.header-search-form {
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.cir-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  height: 44px;
  padding: 0 8px 0 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
}

.cir-search__icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

/* align-self: Die Eingabe füllt die Höhe der Pille, damit das Ziel nicht nur
   die Textzeile ist (WCAG 2.5.8). */
.cir-search__field {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

.cir-search__field::placeholder {
  color: var(--muted);
}

.cir-search:focus-within {
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 3px var(--accent-soft-strong), var(--shadow);
}

[data-theme="dark"] .cir-search {
  background: color-mix(in srgb, var(--paper) 78%, var(--white) 8%);
  border-color: color-mix(in srgb, var(--line) 72%, var(--white) 15%);
}

.header-actions a {
  padding: 8px 12px;
  font-size: 0.95rem;
  border-radius: var(--thomaschristl-nav-radius-sm);
  color: var(--navy);
  background: var(--accent-soft);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.header-actions a.login-cta-link,
.header-actions a.login-cta-link:link,
.header-actions a.login-cta-link:visited {
  width: 45px;
  height: 45px;
  padding: 0;
  border-radius: 50%;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
  color: var(--accent-contrast);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Login und Logout tragen je ein Farbpaar, in dem der Text 4.5:1 und das
   Icon 3:1 gegen den Knopf erreichen (WCAG 1.4.3/1.4.11), in beiden Themes:
   Login über das Akzentpaar des Themes, Logout über die Tokens oben. Icon und
   Text übernehmen die Farbe des Knopfs (currentColor), damit das Paar an
   einer Stelle steht. Hover und Fokus ändern die Farben nicht. */
.header-actions a.login-cta-link.is-login,
.header-actions a.login-cta-link.is-login:link,
.header-actions a.login-cta-link.is-login:visited {
  background-color: var(--accent-solid);
  color: var(--accent-contrast);
}

.header-actions a.login-cta-link.is-logout,
.header-actions a.login-cta-link.is-logout:link,
.header-actions a.login-cta-link.is-logout:visited {
  background-color: var(--thomaschristl-nav-logout-bg);
  color: var(--thomaschristl-nav-logout-text);
}

.login-cta-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-cta-icon svg {
  width: 17px;
  height: 17px;
}

.login-cta-icon svg path {
  fill: currentColor;
}

.login-cta-text {
  position: absolute;
  right: 0;
  width: 0;
  opacity: 0;
  color: inherit;
  font-size: 1em;
  font-weight: 600;
  white-space: nowrap;
}

.header-actions a.login-cta-link:hover,
.header-actions a.login-cta-link:focus-visible {
  width: 125px;
  border-radius: var(--radius-pill);
}

.header-actions a.login-cta-link:hover .login-cta-icon,
.header-actions a.login-cta-link:focus-visible .login-cta-icon {
  width: 30%;
  padding-left: 20px;
}

.header-actions a.login-cta-link:hover .login-cta-text,
.header-actions a.login-cta-link:focus-visible .login-cta-text {
  opacity: 1;
  width: 70%;
  padding-right: 10px;
}

.header-actions a.login-cta-link:active {
  transform: translate(2px, 2px);
}

.language-switch,
.site-nav-language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 6px;
  border: 0;
  border-radius: var(--thomaschristl-nav-radius-xs);
  background: transparent;
  color: var(--navy);
  font: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.language-switch:hover,
.language-switch:focus-visible,
.site-nav-language-switch:hover,
.site-nav-language-switch:focus-visible {
  background: var(--accent-soft);
}

.language-switch:focus-visible,
.site-nav-language-switch:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.language-switch-flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(18, 27, 34, 0.18);
  flex-shrink: 0;
}

.language-switch-flag-de {
  background: linear-gradient(
    to bottom,
    #000000 0 33.333%,
    #dd0000 33.333% 66.666%,
    #ffce00 66.666% 100%
  );
}

.language-switch-flag-en {
  background:
    radial-gradient(circle at 12% 11%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 0.7px),
    radial-gradient(circle at 28% 11%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 0.7px),
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 0.7px),
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 0.7px),
    radial-gradient(circle at 12% 37%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 0.7px),
    radial-gradient(circle at 28% 37%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 0.7px),
    linear-gradient(#3c3b6e 0 0),
    repeating-linear-gradient(
      to bottom,
      #b22234 0 7.692%,
      #ffffff 7.692% 15.384%
    );
  background-size:
    40% 54%,
    40% 54%,
    40% 54%,
    40% 54%,
    40% 54%,
    40% 54%,
    40% 54%,
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    left top,
    left top,
    left top,
    left top,
    left top,
    left top,
    left top,
    left top;
}

.language-switch-flag[hidden] {
  display: none;
}

/* Knopf „Verknüpfung installieren“ und seine Anleitung (AP2-69) in der
   Werkzeugleiste des Mobilmenüs, nach dem Vorbild der Schwester-Website. Die
   Werkzeugleiste ist ab 861 px ohne erzwungenen Mobilmodus verborgen, der Knopf
   damit auch. Die Anleitung ist eine Zeile in voller Breite unter dem Knopf;
   leer bleibt sie im Barrierefreiheitsbaum (Live-Region), nimmt aber keinen
   Platz ein. Bewegung steht im Block „prefers-reduced-motion: no-preference“. */
.thomaschristl-nav-install-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-soft-strong);
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.thomaschristl-nav-install-button:hover,
.thomaschristl-nav-install-button:focus-visible {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.thomaschristl-nav-install-button:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.thomaschristl-nav-install-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.thomaschristl-nav-install-hint {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--thomaschristl-nav-radius-sm);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
}

.thomaschristl-nav-install-hint:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.thomaschristl-nav-install-hint-confirm {
  min-height: 38px;
  margin-top: 6px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-solid);
  color: var(--accent-contrast);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.thomaschristl-nav-install-hint-confirm:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

/* Theme-Switch-Slider (From Uiverse.io by lenin55, Größe an die Kopfzeile
   angepasst) - ersetzt den vorherigen einfachen Icon-Toggle 1:1 mit der
   TVA-Optik (Wolken, Sterne, Mond mit Kratern). */
.theme-switch {
  --toggle-size: 11.2px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3d7eae;
  --container-night-bg: #1d1f2c;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ecca2f;
  --moon-bg: #c4c9d1;
  --spot-color: #959db1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #f3fdff;
  --back-clouds-color: #aacadf;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius)
}

.theme-switch__checkbox:focus-visible + .theme-switch__container {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
}

.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
}

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__container:hover .theme-switch__circle-container {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--thomaschristl-nav-radius-sm);
  background: var(--accent-solid);
  color: var(--accent-contrast);
  padding: 10px 16px;
  font: inherit;
}

.header-actions-theme-toggle {
  align-items: center;
  flex-shrink: 0;
}

.nav-toggle-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  width: clamp(16px, 5.5vw, 22px);
  height: clamp(16px, 5.5vw, 22px);
  flex-shrink: 0;
}

.nav-toggle-burger-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
}

.header-actions .nav-toggle[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent-solid);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-burger-bar--top {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-burger-bar--middle {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-burger-bar--bottom {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-search-cancel {
  display: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
}

/* Hover-Pille des Desktop-Menüs: Glasfläche mit Innenring statt einer
   Farbfläche, damit sie auf der Glas-Kopfzeile in beiden Themes als Kante
   erkennbar bleibt (Konzept top-navigation 5.3). */
.site-nav-slider {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: var(--radius-pill);
  background: var(--glass-pill-bg);
  box-shadow: inset 0 0 0 1px var(--glass-pill-ring);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.site-nav.thomaschristl-slider-active .site-nav-slider {
  opacity: 1;
}

.site-nav a,
.nav-link {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  color: var(--navy);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-nav a.active,
.site-nav a:focus-visible,
.nav-link.active,
.nav-link:focus-visible,
.header-actions a:hover,
.header-actions a:focus-visible {
  background: var(--accent-soft-strong);
}

.site-nav a.active,
.nav-link.active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-contrast) 24%, transparent);
}

.nav-item {
  z-index: 1;
}

.nav-item-row {
  align-items: center;
  min-width: 0;
}

.nav-item-row > .nav-link {
  min-width: 0;
}

.has-dropdown {
  align-items: center;
}

.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
}

.nav-chevron {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--navy-soft);
}

.nav-chevron svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.has-dropdown:hover > .nav-item-row .nav-chevron,
.has-dropdown:focus-within > .nav-item-row .nav-chevron,
.has-dropdown.open > .nav-item-row .nav-chevron,
.dropdown-item.has-submenu:hover > .dropdown-item-row .nav-chevron,
.dropdown-item.has-submenu:focus-within > .dropdown-item-row .nav-chevron,
.dropdown-item.has-submenu.open > .dropdown-item-row .nav-chevron {
  transform: rotate(180deg);
}

.dropdown-toggle {
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 4px 4px 4px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--menu-control-bg);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

/* Im reduzierten Modus füllt ein Panel die ganze Menüfläche und hat keinen
   Radius; den Panel-Radius des Soll-Bilds setzt der Desktop-Block. */
.dropdown-menu {
  position: absolute;
  border-radius: 0;
  z-index: 30;
}

.dropdown-menu a {
  display: block;
  border-radius: var(--thomaschristl-nav-radius-xs);
}

.mega-menu {
  max-height: none;
  overflow: visible;
  width: min(700px, calc(100vw - 32px));
}

.mega-menu-columns .menu-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-section-icon {
  width: 15px;
  height: 15px;
  color: var(--accent-solid);
  flex-shrink: 0;
}

.mega-menu-scroll {
  padding-right: 4px;
}

/* --muted statt --navy-soft: Die kleine Versalzeile erreicht damit 4.5:1 auf
   dem Panel (WCAG 1.4.3); --navy-soft liegt im hellen Theme bei 3.8:1. */
.menu-section-label {
  padding: 8px 10px 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-direct-link,
.dropdown-item > a,
.submenu-panel a {
  padding: 10px 12px;
}

.menu-direct-link:hover,
.dropdown-item > a:hover,
.submenu-panel a:hover {
  background: var(--accent-soft);
}

.menu-direct-link.active,
.dropdown-item > a.active,
.submenu-panel a.active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.dropdown-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.dropdown-item-row > a {
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.dropdown-item.has-submenu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 14px;
  height: 100%;
}

.submenu-toggle {
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 4px 4px 4px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--menu-control-bg);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
}

.toggle-label {
  white-space: nowrap;
}

.toggle-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.dropdown-toggle:active .toggle-icon-wrap,
.submenu-toggle:active .toggle-icon-wrap {
  transform: scale(0.88);
}

.submenu-toggle .toggle-icon,
.dropdown-toggle .toggle-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.submenu-panel {
  position: absolute;
  border-radius: 0;
  z-index: 40;
}

.dropdown-item.has-submenu.open > .submenu-panel {
  display: block;
}

.has-dropdown.open .dropdown-menu {
  display: block;
}

/* Sichtbarer Tastaturfokus (WCAG 2.4.7, AP2-51): eine 2-px-Outline in der
   Akzentfarbe, zusätzlich zum Hintergrundwechsel der Links. Die Akzentfarbe
   erreicht in beiden Themes mehr als 3:1 gegen Kopfzeile, Menü und Panels
   (WCAG 1.4.11). Außen liegt die Outline dort, wo um das Element Platz ist;
   die Logo-Leiste des reduzierten Modus zieht sie weiter unten nach innen. */
.brand:focus-visible,
.site-nav a:focus-visible,
.nav-link:focus-visible,
.header-actions a.login-cta-link:focus-visible,
.dropdown-toggle:focus-visible,
.submenu-toggle:focus-visible,
.mobile-search-cancel:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

/* Nach innen gezogen, wo ein Scroll-Container eine außen liegende Outline
   abschneiden würde: die Schnellzugriffe in .header-actions (overflow im
   reduzierten Modus), die Links in den Panels (.mega-menu-scroll,
   .dropdown-menu-scroll, .mobile-panel-body) und der Zurück-Knopf am Rand
   eines Panels. Die Selektoren sind spezifischer als ".site-nav a" oben. */
.header-actions .tab-item:focus-visible,
.site-nav .menu-direct-link:focus-visible,
.site-nav .dropdown-item > a:focus-visible,
.site-nav .submenu-panel a:focus-visible,
.site-nav .mobile-panel-back:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: -2px;
}

/* Der aktive Panel-Link ist selbst in der Akzentfarbe gefüllt; eine innen
   liegende Outline derselben Farbe wäre unsichtbar. */
.site-nav .menu-direct-link.active:focus-visible,
.site-nav .dropdown-item > a.active:focus-visible,
.site-nav .submenu-panel a.active:focus-visible {
  outline-color: var(--accent-contrast);
}

@media (prefers-reduced-motion: no-preference) {
  .cir-search {
    transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header-actions a.login-cta-link,
  .header-actions a.login-cta-link:link,
  .header-actions a.login-cta-link:visited {
    transition: width 0.3s, border-radius 0.3s;
  }

  .login-cta-icon {
    transition: padding-left 0.3s;
  }

  .login-cta-text {
    transition: opacity 0.3s, width 0.3s, padding-right 0.3s;
  }

  .language-switch,
  .site-nav-language-switch {
    transition: background-color 0.2s ease;
  }

  .thomaschristl-nav-install-button {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }

  .thomaschristl-nav-install-button:active {
    transform: scale(0.97);
  }

  .theme-switch__container,
  .theme-switch__sun-moon-container,
  .theme-switch__moon,
  .theme-switch__stars-container {
    transition: var(--transition);
  }

  .theme-switch__circle-container {
    transition: var(--circle-transition);
  }

  .theme-switch__clouds {
    transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  }

  .nav-toggle-burger-bar {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
  }

  /* Der Hover-Slider animiert left/top/width/height, weil nav-toggle.js
     genau diese Werte inline setzt - bei "reduce" springt er direkt. */
  .site-nav-slider {
    transition: left 0.4s cubic-bezier(0.33, 0.83, 0.99, 0.98),
                top 0.4s cubic-bezier(0.33, 0.83, 0.99, 0.98),
                width 0.4s cubic-bezier(0.33, 0.83, 0.99, 0.98),
                height 0.4s cubic-bezier(0.33, 0.83, 0.99, 0.98),
                opacity 0.25s ease;
  }

  .site-nav a,
  .nav-link {
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .nav-chevron {
    transition: transform 0.25s ease;
  }

  .toggle-icon-wrap {
    transition: transform 0.2s ease;
  }
}

/* Navigation im reduzierten Modus - mobile-first Basis ohne Media-Query.
   Der reduzierte Modus gilt bei <=860px ODER wenn nav-toggle.js
   body.thomaschristl-nav-force-mobile setzt, weil die Kopfzeile trotz
   Breite nicht in eine Zeile passt. "Breite ODER Klasse" lässt sich in CSS
   nicht in einer Regel ausdrücken, die Umkehrung "min-width: 861px UND
   NICHT Klasse" schon. Deshalb stehen die Mobil-Werte hier genau einmal und
   die Desktop-Werte gesammelt im gegateten Block direkt danach. Wer hier
   eine Eigenschaft ergänzt, die der Desktop anders braucht, ergänzt dort
   den Desktop-Wert - fehlt er, fällt es sofort in der Desktop-Ansicht auf
   statt still im selten sichtbaren erzwungenen Modus. */
html.mobile-nav-open,
body.mobile-nav-open {
  height: 100vh;
  height: 100dvh;
}

/* Die untere Leiste geht nahtlos in die Systemleiste des Handys darunter
   über: gleiche Farbe wie der Seitenhintergrund, den Chrome dort zeigt
   (im dunklen Modus auch die feste Farbe der installierten App aus
   manifest.json), und nur oben eine Trennlinie zum Inhalt. */
.site-header {
  position: fixed;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  background: var(--page-bg-top);
  border-width: 1px 0 0;
}

.header-top {
  display: flex;
  position: relative;
}

.header-start {
  display: contents;
}

/* Eigene Kachel oben am Bildschirmrand: Logo, Titel und Untertitel stehen
   fixiert über dem Seiteninhalt, getrennt von der unteren Aktionsleiste, in
   einer kompakten, festen Zeile. */
.brand {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  gap: 12px;
  justify-content: flex-start;
  padding: max(10px, env(safe-area-inset-top, 10px)) 16px 10px;
  background: var(--header-bg-solid);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Die Logo-Leiste füllt hier die ganze obere Fensterkante. Eine außen
   liegende Outline läge an drei Seiten außerhalb des Fensters und wäre nur
   an der Unterkante zu sehen (WCAG 2.4.7); deshalb liegt sie innen, auf der
   deckenden Fläche der Leiste. Der Desktop-Wert steht im gegateten Block. */
.brand:focus-visible {
  outline-offset: -2px;
}

.brand-text strong {
  font-size: 0.96rem;
  line-height: 1.25;
}

.brand-text span {
  font-size: 0.74rem;
  line-height: 1.3;
}

.brand img {
  width: 38px;
  height: 38px;
  padding: 2px;
}

.site-header .header-actions {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Reihenfolge im reduzierten Modus: "Home" ganz links, dann Suchen und die
   übrigen Schnellzugriffe in Dokumentreihenfolge. */
.header-actions .quick-link-start {
  order: -1;
}

.site-header .header-actions a.tab-item,
.site-header .header-actions button.tab-item {
  width: auto;
  min-height: 0;
  padding: 6px 2px 5px;
}

.header-actions .tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 44px;
  gap: 3px;
  padding: 6px 2px 5px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: none;
  box-sizing: border-box;
  white-space: normal;
  font-weight: normal;
}

.tab-item-icon {
  width: clamp(16px, 5.5vw, 22px);
  height: clamp(16px, 5.5vw, 22px);
  flex-shrink: 0;
}

.tab-item-label {
  font-size: clamp(8px, 2.4vw, 10px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.header-actions a.tab-item.is-active,
body.thomaschristl-mobile-search-open .mobile-search-toggle {
  background: var(--accent-soft);
  color: var(--accent-solid);
}

/* Hover und Fokus legen --accent-soft-strong unter einen Schnellzugriff;
   --muted erreicht darauf nur 4.3:1, die Akzentfarbe 6.8:1 (WCAG 1.4.3). */
.header-actions a.tab-item:hover,
.header-actions a.tab-item:focus-visible {
  color: var(--accent-solid);
}

.header-actions-theme-toggle,
.language-switch {
  display: none;
}

/* Der Login-Link fehlt in der mobilen Aktionsleiste bewusst; eigene
   Mobil-Stile für ihn wären unerreichbar. */
.header-actions a.login-cta-link {
  display: none;
}

.header-search-form {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  right: 0;
  gap: 8px;
  padding: 8px;
  background: var(--menu-bg);
  border: 1px solid var(--line);
  border-radius: var(--thomaschristl-nav-radius-md);
  box-shadow: var(--shadow);
  z-index: 5;
}

body.thomaschristl-mobile-search-open .header-search-form {
  display: flex;
}

.header-search-form .cir-search {
  flex: 1;
  min-width: 0;
}

.mobile-search-cancel {
  flex-shrink: 0;
  align-items: center;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--accent-solid);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 0 2px;
}

body.thomaschristl-mobile-search-open .mobile-search-cancel {
  display: inline-flex;
}

.site-nav {
  position: fixed;
  top: var(--thomaschristl-brand-bar-height, 64px);
  left: 0;
  right: 0;
  bottom: var(--thomaschristl-header-height, 110px);
  z-index: 19;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--header-bg-solid);
  opacity: 0;
  transform: translateY(16px);
  overscroll-behavior: contain;
  padding: 0 16px;
  pointer-events: none;
  visibility: hidden;
}

.site-nav.open {
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
  padding: 16px 16px max(16px, env(safe-area-inset-bottom, 16px));
  pointer-events: auto;
  visibility: visible;
}

.site-nav-slider {
  display: none;
}

.site-nav-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.site-nav a {
  width: 100%;
  background: var(--accent-soft);
}

.has-dropdown {
  display: block;
  width: 100%;
}

.has-dropdown::after {
  display: none;
}

.nav-item {
  width: 100%;
}

.nav-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
}

.nav-link {
  width: 100%;
  min-height: 42px;
}

.dropdown-toggle,
.submenu-toggle {
  display: inline-flex;
}

.nav-chevron {
  display: none;
}

.has-dropdown.open > .nav-item-row .dropdown-toggle {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

/* Untermenüs öffnen im reduzierten Modus nicht als Akkordeon in der Liste
   (das schob den Rest des Menüs weit nach unten weg), sondern als eigene
   volle "Seite" (iOS-artiges Push-Navigation-Muster): fixiert genau über dem
   Menü-Bereich, per Transform von rechts eingeschoben. Die Kopfzeile
   (Zurück-Button + Titel, .mobile-panel-header) fügt nav-toggle.js
   (setupMobileNavPanels) in jedes .dropdown-menu/.submenu-panel ein, der
   ursprüngliche Inhalt (Mega-Menu-Spalten bzw. flache Linkliste) steckt in
   .mobile-panel-body. Auf dem Desktop macht "display: contents" diesen
   Wrapper für das Spalten-Layout transparent (siehe Desktop-Block unten). */
.dropdown-menu,
.submenu-panel {
  display: flex;
  flex-direction: column;
  inset: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  background: var(--header-bg-solid);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
}

.site-nav.thomaschristl-panel-open {
  overflow: hidden;
}

.site-nav.thomaschristl-panel-open > .site-nav-toolbar,
.site-nav.thomaschristl-panel-open > a,
.site-nav.thomaschristl-panel-open > .nav-item:not(.has-dropdown.open),
.nav-item.has-dropdown.open > .nav-item-row {
  display: none;
}

.dropdown-menu.thomaschristl-panel-open > .mobile-panel-body {
  overflow: hidden;
}

.nav-item.has-dropdown.open > .dropdown-menu,
.dropdown-item.has-submenu.open > .submenu-panel {
  display: flex;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.mobile-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 5px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.mobile-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-solid);
  cursor: pointer;
}

.mobile-panel-title:active {
  opacity: 0.8;
}

.mobile-panel-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-contrast);
}

.mobile-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 4px 14px 4px 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--menu-control-bg);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

.mobile-panel-back-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

.mobile-panel-back:active .mobile-panel-back-icon-wrap {
  transform: scale(0.88);
}

.mobile-panel-back-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.mobile-panel-back-label {
  white-space: nowrap;
}

.mobile-panel-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px max(16px, env(safe-area-inset-bottom, 16px)) 16px;
}

.dropdown-menu a {
  margin-top: 6px;
  background: var(--accent-soft);
}

.dropdown-item-row {
  margin-top: 6px;
}

.dropdown-item-row > a {
  margin-top: 0;
}

.dropdown-item > a,
.menu-direct-link {
  display: inline-flex;
  width: 100%;
}

.submenu-panel a {
  margin-top: 6px;
  background: var(--accent-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav {
    transition: opacity 0.3s ease,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.3s;
  }

  .site-nav.open {
    transition: opacity 0.35s ease 0.05s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }

  .dropdown-menu,
  .submenu-panel {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.32s;
  }

  .nav-item.has-dropdown.open > .dropdown-menu,
  .dropdown-item.has-submenu.open > .submenu-panel {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }

  .mobile-panel-title {
    transition: opacity 0.15s ease;
  }

  .mobile-panel-back-icon-wrap {
    transition: transform 0.2s ease;
  }
}

/* Desktop-Navigation: gilt nur ab 861px und nur, solange nav-toggle.js den
   Mobilmodus nicht erzwingt. :where() lässt die Spezifität jedes Selektors
   unverändert, damit dieser Block allein durch seine Position nach dem
   Mobil-Block gewinnt.

   Die Kopfzeile ist hier eine Glasleiste, bündig am oberen Fensterrand
   (AP2-51, E1: top 0, kein Radius, volle Breite): halbtransparenter Grund,
   Haarlinie, Glas-Schatten mit Glanzkante und backdrop-filter. Der Filter
   steht nur in diesem Block, weil er im reduzierten Modus zweierlei kosten
   würde: Rechenzeit auf dem Handy (E-11) und den Bezugsrahmen der dort
   fixierten Logo-Leiste und des Menüs, die sich dann an der Kopfzeile statt
   am Fenster ausrichten würden. */
@media (min-width: 861px) {
  :where(body:not(.thomaschristl-nav-force-mobile)) .site-header {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    padding: 10px 16px 8px;
    background: var(--header-bg);
    border-width: 1px;
    border-color: var(--glass-hairline);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .header-top {
    display: grid;
    position: static;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .header-start {
    display: flex;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .brand {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    gap: 14px;
    justify-content: normal;
    padding: 0;
    background: none;
    border-bottom: 0;
    box-shadow: none;
  }

  /* Um die Logo-Kachel des Desktops ist Platz: Outline außen, wie bei den
     übrigen Links der Kopfzeile. */
  :where(body:not(.thomaschristl-nav-force-mobile)) .brand:focus-visible {
    outline-offset: 2px;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .brand img {
    width: 50px;
    height: 50px;
    padding: 3px;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .brand-text strong {
    font-size: inherit;
    line-height: inherit;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .brand-text span {
    font-size: 0.92rem;
    line-height: inherit;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .site-header .header-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: auto;
    overflow: visible;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .header-actions .tab-item,
  :where(body:not(.thomaschristl-nav-force-mobile)) .site-nav-toolbar,
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-toggle,
  :where(body:not(.thomaschristl-nav-force-mobile)) .submenu-toggle,
  :where(body:not(.thomaschristl-nav-force-mobile)) .mobile-panel-header {
    display: none;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .header-actions-theme-toggle,
  :where(body:not(.thomaschristl-nav-force-mobile)) .header-actions a.login-cta-link {
    display: flex;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .language-switch,
  :where(body:not(.thomaschristl-nav-force-mobile)) .nav-chevron {
    display: inline-flex;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .header-search-form {
    display: inline-flex;
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    gap: normal;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .header-search-form .cir-search {
    flex: 0 1 auto;
    min-width: auto;
    width: 260px;
  }

  /* header-actions--compact/--hide-search setzt nav-toggle.js, wenn die
     Desktop-Kopfzeile knapp wird; im Mobilmodus gelten sie nicht. */
  :where(body:not(.thomaschristl-nav-force-mobile)) .header-actions.header-actions--compact .header-search-form {
    flex-basis: 170px;
    max-width: 170px;
    overflow: hidden;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .header-actions.header-actions--compact .header-search-form .cir-search {
    transform: scale(0.56);
    transform-origin: left center;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .header-actions.header-actions--hide-search .header-search-form {
    display: none;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .site-nav {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    flex-direction: row;
    overflow: visible;
    background: none;
    opacity: 1;
    transform: none;
    overscroll-behavior: auto;
    margin-top: 14px;
    padding: 12px 0 0;
    pointer-events: auto;
    visibility: visible;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .site-nav-slider {
    display: block;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .site-nav a {
    width: auto;
    background: none;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .has-dropdown {
    display: flex;
    width: auto;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .has-dropdown::after {
    display: block;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .nav-item {
    width: auto;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .nav-item,
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item {
    position: relative;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .nav-item-row {
    display: flex;
    grid-template-columns: none;
    gap: normal;
    width: auto;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .nav-link {
    width: auto;
    min-height: auto;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-toggle {
    margin-left: 4px;
  }

  /* Glas-Panels: Haarlinie, großer Glas-Schatten mit Glanzkante und die
     stärkere Unschärfe. Die Kopfzeile trägt selbst einen backdrop-filter;
     ein Panel sieht darum nur, was innerhalb der Kopfzeile hinter ihm liegt.
     Lesbar bleibt es durch --menu-bg (98 % deckend), nicht durch den Filter. */
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-menu,
  :where(body:not(.thomaschristl-nav-force-mobile)) .submenu-panel {
    display: block;
    flex-direction: row;
    inset: auto;
    min-width: auto;
    padding: 10px;
    background: var(--menu-bg);
    border: 1px solid var(--glass-hairline);
    box-shadow: var(--glass-shadow-lg), inset 0 1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-menu {
    top: calc(100% + 8px);
    left: 0;
    width: 290px;
    border-radius: var(--thomaschristl-nav-radius-lg);
  }

  /* The last menu items sit at the right edge; a left-aligned dropdown there runs past the
     viewport (even while hidden) and adds a horizontal scrollbar on narrower desktops. The two
     items that are always last are aligned statically; for every other item nav-toggle.js measures
     and sets thomaschristl-dropdown-align-end (for a visitor "SaaS" is the last item, and its
     panel ran 13px past a 1024px window). */
  :where(body:not(.thomaschristl-nav-force-mobile)) .restricted-nav-item > .dropdown-menu,
  :where(body:not(.thomaschristl-nav-force-mobile)) .auth-only-nav-item > .dropdown-menu,
  :where(body:not(.thomaschristl-nav-force-mobile)) .thomaschristl-dropdown-align-end > .dropdown-menu {
    right: 0;
    left: auto;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .submenu-panel {
    top: -10px;
    left: calc(100% + 10px);
    width: 340px;
    min-width: 280px;
    max-width: 420px;
    border-radius: var(--thomaschristl-nav-radius-md);
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .mega-menu {
    width: fit-content;
    max-width: calc(100vw - 32px);
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .mega-menu-scroll,
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-menu-scroll {
    max-height: var(--dropdown-available-height, min(78vh, 640px));
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .mega-menu-scroll {
    overflow-x: visible;
  }

  /* Mega-Menü als Raster: je .mega-menu-column eine Spalte in Inhaltsbreite
     (heute eine je Menü, das Soll-Bild sieht bis zu drei vor), ohne leere
     Spuren für fehlende Spalten. Jede Spalte ist selbst ein Raster, dessen
     Zeilen oben beginnen: Überschrift und Links stehen dadurch in allen
     Spalten auf gleicher Höhe, ohne Ausgleichsabstände per margin-top. */
  :where(body:not(.thomaschristl-nav-force-mobile)) .mega-menu-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: start;
    column-gap: 20px;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .mega-menu-column {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .mega-menu-columns .menu-direct-link {
    white-space: nowrap;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .mega-menu-column:not(:first-child) {
    border-left: 1px solid var(--line);
    padding-left: 18px;
  }

  /* Öffnen per :hover und :focus-within. Escape schließt ein so geöffnetes
     Dropdown (Konzept top-navigation E-17, AP2-51 D1): nav-toggle.js setzt
     dann thomaschristl-dropdown-dismissed am .has-dropdown, und beide
     Öffnungsregeln greifen nicht mehr, obwohl der Fokus auf dem
     Top-Level-Link im selben Eintrag liegt. Die Klasse entfällt, sobald
     Zeiger oder Fokus den Eintrag verlassen oder der Zeiger neu eintritt. */
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item.has-submenu:hover > .submenu-panel,
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item.has-submenu:focus-within > .submenu-panel,
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item.has-submenu.open > .submenu-panel,
  :where(body:not(.thomaschristl-nav-force-mobile)) .has-dropdown:not(.thomaschristl-dropdown-dismissed):hover .dropdown-menu,
  :where(body:not(.thomaschristl-nav-force-mobile)) .has-dropdown:not(.thomaschristl-dropdown-dismissed):focus-within .dropdown-menu,
  :where(body:not(.thomaschristl-nav-force-mobile)) .has-dropdown.open .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .mobile-panel-body {
    display: contents;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-menu a,
  :where(body:not(.thomaschristl-nav-force-mobile)) .submenu-panel a {
    margin-top: 0;
    background: none;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item-row {
    margin-top: 0;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item > a {
    display: block;
    width: auto;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .menu-direct-link {
    width: auto;
  }
}

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  :where(body:not(.thomaschristl-nav-force-mobile)) .site-nav {
    transition: none;
  }

  /* Einblenden mit opacity, transform und filter (Konzept top-navigation
     5.3). Auch der Unschärfe-Startwert steht nur hier: Bei "reduce" ist ein
     Panel entweder verborgen oder sofort scharf da. */
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-menu,
  :where(body:not(.thomaschristl-nav-force-mobile)) .submenu-panel {
    filter: blur(6px);
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.28s ease,
                visibility 0s linear 0.28s;
  }

  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item.has-submenu:hover > .submenu-panel,
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item.has-submenu:focus-within > .submenu-panel,
  :where(body:not(.thomaschristl-nav-force-mobile)) .dropdown-item.has-submenu.open > .submenu-panel,
  :where(body:not(.thomaschristl-nav-force-mobile)) .has-dropdown:not(.thomaschristl-dropdown-dismissed):hover .dropdown-menu,
  :where(body:not(.thomaschristl-nav-force-mobile)) .has-dropdown:not(.thomaschristl-dropdown-dismissed):focus-within .dropdown-menu,
  :where(body:not(.thomaschristl-nav-force-mobile)) .has-dropdown.open .dropdown-menu {
    filter: none;
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.28s ease,
                visibility 0s linear 0s;
  }
}