/* ============================================================
   byteland site-chrome: Haupt-Navigation (1:1 von der Startseite)
   Eingebunden von Werkstatt- und Copilot-Seiten; die Startseite
   behaelt ihre Inline-Kopie. Aenderungen hier UND dort pflegen!
   ============================================================ */

/* NAV */
  .nav{
    position:sticky;top:0;z-index:50;
    background:#232428; /* opak: identischer Farbeindruck unabhaengig vom Seitenhintergrund */
    border-bottom:1px solid transparent;
    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
.nav.scrolled{
    background:#0e0e0f;
    border-bottom-color:rgba(255,255,255,.10);
    box-shadow:0 10px 30px rgba(0,0,0,.32);
  }
.nav .nav-progress{
    position:absolute;left:0;bottom:-1px;height:2px;width:0;z-index:3;
    background:linear-gradient(90deg,var(--red),#e0474c);
    box-shadow:0 0 8px rgba(176,31,36,.65);
    transition:width .12s linear;
  }
.nav .container{display:flex;align-items:center;gap:18px;min-height:78px;flex-wrap:wrap}
.nav .brand{display:flex;align-items:center;line-height:0;flex:none;overflow:hidden}
.nav.auto-brand .brand{width:auto;opacity:1}
.nav.auto-brand.show-brand .brand{width:auto;opacity:1}
.nav .brandmark{display:block;height:50px;width:201px;background:center/contain no-repeat url("/werkstatt-logo.png");flex:none}
.nav nav{position:relative;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav .nav-ind{
    position:absolute;bottom:4px;left:0;width:0;height:2px;border-radius:2px;
    background:var(--red);box-shadow:0 0 10px rgba(176,31,36,.7);
    opacity:0;pointer-events:none;
    transition:left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  }
.nav-spacer{flex:1 1 0;min-width:0}
.nav.auto-brand .nav-spacer-r{transition:flex-grow .45s ease, margin-left .45s ease}
.nav.auto-brand.show-brand .nav-spacer-r{flex-grow:0;margin-left:-18px}
.nav nav a{
    position:relative;z-index:1;
    color:#d6d8dc;font-size:.92rem;font-weight:500;padding:7px 8px;border-radius:8px;
    transition:color .2s ease, background .2s ease;
  }
.nav nav a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.nav nav a.active{color:#fff}
/* Werkstatt-Link: Schraubenschluessel-Icon (wie im Werkstatt-Teaser der Praxis-Sektion) */
  .nav nav a{display:inline-flex;align-items:center;gap:5px}
.nav nav a svg{width:14px;height:14px;flex:none}
/* Roter Trennstrich vor der Werkstatt: markiert den Uebergang vom One-Pager zur Unterseite
     (gleiche Designsprache wie der Divider in der Werkstatt-Kopfzeile) */
  .nav nav .nav-div{flex:none;width:2px;height:16px;background:var(--red);border-radius:2px;margin:0 5px}
/* Burger-Menue (mobil, ohne JS) */
  .nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.burger{display:none}
@media (max-width:1139px){
.nav .container{flex-wrap:nowrap;gap:10px;justify-content:flex-end}
.nav .brand{display:none}
.nav-spacer{display:none}
.nav .nav-ind{display:none}
.nav nav .nav-div{display:none}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
      width:46px;height:40px;flex:none;cursor:pointer;border-radius:9px;
      border:0;background:var(--red)}
.burger span{display:block;width:24px;height:3px;margin:0 auto;border-radius:2px;
      background:#fff;transition:transform .28s ease, opacity .2s ease}
.nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
      background:#1a1a1c;border-top:1px solid rgba(255,255,255,.08);
      box-shadow:0 18px 34px rgba(0,0,0,.45);
      max-height:0;overflow:hidden;transition:max-height .32s ease}
.nav nav a{width:100%;padding:14px 22px;border-radius:0;font-size:1rem;
      border-top:1px solid rgba(255,255,255,.05)}
.nav nav a.active{color:#fff;box-shadow:inset 3px 0 0 var(--red)}
.nav-toggle:checked ~ nav{max-height:80vh;overflow:auto}
.nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){
.nav .nav-ind{transition:opacity .2s ease}
}

/* Ergaenzungen fuer Unterseiten */
.nav .container{max-width:1080px}
.nav .brand{margin-left:8px} /* Logo symmetrisch zum 11px-Innenpolster des letzten Menuepunkts einruecken; Aktiv-Strich endet an der Kastenkante */
.nav nav a{text-decoration:none}
.nav .nav-spacer-r{display:none} /* rechter Platzhalter komplett raus: sonst erzeugt der Flex-gap 18px Versatz zur Fluchtlinie */
.nav nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--red)}


/* ---- Lesefeld-Schalter (hell/dunkel nur fuer den Inhaltskasten; Nav/Footer/Hintergrund bleiben) ---- */
.wlayout{position:relative;color:var(--ink)}
main .sheet{position:relative;color:var(--ink)} /* Kasten setzt seine Textfarbe selbst (Erbschaft vom Body wuerde beim Panel-Umschalten falsch bleiben) */
.panel-toggle{position:absolute;top:14px;right:16px;width:50px;height:24px;border-radius:99px;border:1px solid var(--line);background:var(--soft);cursor:pointer;padding:2px;display:inline-flex;align-items:center;z-index:5;transition:background .15s ease}
.panel-toggle svg{position:absolute;width:12px;height:12px;color:var(--muted);top:5px}
.panel-toggle .pt-moon{left:6px}
.panel-toggle .pt-sun{right:6px}
.panel-toggle .pt-knob{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--red);transition:transform .18s ease;transform:translateX(0);z-index:1}
html.panel-light .panel-toggle .pt-knob{transform:translateX(26px)}
.panel-toggle:hover{border-color:var(--red)}

/* Panel-Farbwelten: Variablen nur im Kasten-Teilbaum ueberschreiben */
html.panel-light .wlayout, html.panel-light main .sheet{
  background:#eae7df; /* warmes Beige als Kastenflaeche - gedaempft gegen das dunkle Umfeld */
  --bg:#f6f4ec; --soft:#efece3; --paper:#eae7df; --ink:#23221e; --ink-soft:#37352f;
  --muted:#5f5c52; --line:#d9d5c8; --red:#b01f24; --red-dark:#8f181c;
  --ok:#1c7c3c; --ok-soft:#e8f5ec; --warn:#b06f00; --warn-soft:#fff8ec;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.06);
  --shadow-sheet:0 1px 2px rgba(0,0,0,.04), 0 14px 38px rgba(0,0,0,.05);
}
html.panel-dark .wlayout, html.panel-dark main .sheet{
  --bg:#1d1e23; --soft:#26272d; --paper:#141519; --ink:#e8e9ec; --ink-soft:#c9ccd2;
  --muted:#9298a2; --line:#2e3037; --red:#e0474d; --red-dark:#f06a6f;
  --ok:#5fbf7f; --ok-soft:#1c2a20; --warn:#e0a94f; --warn-soft:#2a2418;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.4);
  --shadow-sheet:0 1px 2px rgba(0,0,0,.3), 0 14px 38px rgba(0,0,0,.35);
}