/* Seitliche Navigation (Desktop ab 1200px) fuer alle Seiten mit Standard-Header.
   Zugehoerig: /assets/js/nav-seitlich.js (Weissumschaltung ueber dunklen Flaechen, Back-to-top).
   Unter 1200px bleibt die Kopfleiste mit Burger unveraendert. */
#header .logo .logo-bild, #header .logo .logo-weiss, #header .pfeil-weiss { display: none; }
.btt-weiss { position: fixed; z-index: 901; display: flex; align-items: center; justify-content: center; background: #fff; color: #2563eb; font-weight: 700; line-height: 1; pointer-events: none; clip-path: inset(0 0 100% 0); opacity: 0; }
/* Desktop ab 1200px: feste Seitenleiste links (Logo, Menue), Kontakt-Button fix oben rechts. */
@media (min-width: 1200px) {
  body { --side-w: 232px; }
  /* height:0 haelt offsetHeight bei 0, damit script.js beim Anker-Scroll auf den 80px-Fallback faellt */
  body #header {
    position: fixed; top: 0; left: 0; right: auto; width: var(--side-w); height: 0; padding: 0;
    background: transparent; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: none !important; transition: none; z-index: 1000;
  }
  body #header .container { display: block; max-width: none; margin: 0; padding: 1.75rem 1.5rem 0; }
  body #header .logo { display: inline-block; font-size: 1.35rem; line-height: 1.2; }
  body #header .logo .logo-bild { display: block; width: 120px; height: auto; }
  body #header .logo .logo-text { display: none; }
  body #header nav { margin-top: clamp(3rem, 24vh, 15rem); }
  body #header .burger { display: none; }
  body #header .nav-links {
    position: static; transform: none; visibility: visible; height: auto; width: 100%; padding: 0;
    background: transparent; overflow: visible;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px;
  }
  body #header .nav-links > li { margin: 0; width: fit-content; max-width: none; }
  body #header .nav-links > li > a:not(.btn-primary) {
    display: inline-block; font-size: 1rem; font-weight: 500; line-height: 1.4; padding: 0.15rem 0;
    text-align: left; color: #0f172a;
  }
  body #header .nav-links > li > a:not(.btn-primary):hover { color: #2563eb; }
  body #header .nav-links > li > a.btn-primary { margin: 0; }
  body #header .nav-links .has-dropdown { display: flex; align-items: center; gap: 0.15rem; flex-wrap: nowrap; justify-content: flex-start; }
  body #header .nav-links .has-dropdown > a { margin-left: 0; flex: 0 1 auto; }
  body #header .nav-toggle { width: 28px; min-height: 28px; height: 28px; color: #0f172a; }
  body #header .nav-toggle:hover { color: #2563eb; }
  body #header .nav-toggle svg { width: 14px; height: 14px; transform: rotate(-90deg); }
  body #header .nav-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
  /* Kontakt: fix oben rechts, ohne Leiste dahinter */
  body #header .nav-links > li:last-child { position: fixed; top: 1.25rem; right: 1.5rem; width: auto; z-index: 1001; }
  /* Untermenues als Flyout rechts neben dem Punkt (script.js setzt .is-open und aria-expanded) */
  body #header .nav-dropdown,
  body #header .nav-dropdown-wide {
    position: absolute; top: -0.6rem; left: calc(100% + 0.5rem); right: auto; bottom: auto;
    min-width: 270px; margin: 0; display: flex; flex-direction: column; gap: 0.1rem;
    transform: translateX(-6px) !important;
  }
  body #header .nav-dropdown-wide { display: grid; grid-template-columns: 1fr 1fr; min-width: 480px; }
  body #header .has-dropdown.is-open > .nav-dropdown,
  body #header .has-dropdown.is-open > .nav-dropdown-wide { transform: none !important; }
  body #header .nav-dropdown::before { top: 0; bottom: 0; left: -1.25rem; right: auto; width: 1.25rem; height: auto; }
  body #header .nav-dropdown a { color: #0f172a; font-size: 0.9rem; }
  body #header .nav-dropdown a[aria-current="page"] { color: #2563eb; }

  /* Inhalt rechts neben der Leiste: der Body wird um die Leistenbreite eingerueckt, dadurch bleiben alle
     Container (auch direkt in main, mit eigenem Padding oder max-width) im verbleibenden Bereich zentriert.
     Vollbreite Flaechen (Sektionen, Footer) ziehen ihren Hintergrund per negativem Rand wieder bis zum
     linken Bildschirmrand und schieben den Inhalt per Padding zurueck. */
  body { padding-left: var(--side-w); }
  body main > section:not(.container):not(.tool-text-panel):not(.next-tool),
  body > footer {
    margin-left: calc(-1 * var(--side-w)); padding-left: var(--side-w) !important;
  }

  /* Ueber dunklen/farbigen Flaechen wird alles weiss, was darin liegt. nav-seitlich.js setzt
     --nav-verlauf(-hover) (Baender der Flaechen im Viewport) und die Clip-Pfade der weissen Kopien. */
  body #header .logo { position: relative; }
  body #header .logo .logo-weiss { display: block; position: absolute; left: 0; top: 0; width: 120px; height: auto; filter: brightness(0) invert(1); clip-path: inset(0 0 100% 0); pointer-events: none; }
  body #header .nav-links > li:not(:last-child) > a:not(.btn-primary) {
    background: var(--nav-verlauf, linear-gradient(to bottom, #0f172a, #0f172a)) fixed;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  body #header .nav-links > li:not(:last-child) > a:not(.btn-primary):hover {
    background-image: var(--nav-verlauf-hover, linear-gradient(to bottom, #2563eb, #2563eb));
  }
  body #header .nav-toggle { position: relative; }
  body #header .pfeil-dunkel, body #header .pfeil-weiss { display: flex; align-items: center; justify-content: center; }
  body #header .pfeil-weiss { position: absolute; inset: 0; color: #fff; clip-path: inset(0 0 100% 0); pointer-events: none; }
  body .bg-blobs { display: none; }
  body #header, body #header.scrolled, body.header-hidden #header, body #header .container, body #header nav, body #header .nav-links, body #header .nav-links > li:last-child { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body #header .nav-links > li:last-child > a { box-shadow: 0 0 0 2px #f4f4f2 !important; }
}