/* =============================================================================
   Goetheanum CI – ds-nav: globale Kopfzeile + klappbares Schubladen-Menü
   -----------------------------------------------------------------------------
   Eine Navigation für alle Seiten, gespeist aus tools.json. Setzt tokens.css
   und base.css voraus. Markup erzeugt nav.js; hier nur das Aussehen.
   Akkordeon = native <details>/<summary> (klappbar, zugänglich, ohne Skript).
   ============================================================================= */

/* Die globale Navigation trägt immer die Hausschrift – unabhängig von der
   Body-Schrift der Gastseite (sonst erbt sie z. B. Helvetica). */
.dsnav,.dsnav-sub,.dsnav-drawer,.dsnav-onpage{font-family:var(--font)}

/* Scrollbalken-Platz immer reservieren: sonst springt die zentrierte Navigation
   zwischen kurzen und langen Seiten um die Balkenbreite nach rechts. */
html{scrollbar-gutter:stable}

.dsnav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
.dsnav .bar{display:flex;align-items:center;gap:var(--s4);height:var(--header-h);
  max-width:var(--ds-maxw);margin:0 auto;padding:0 26px}

/* Wortmarke = das echte Goetheanum-Lockup (aus dem Logo-Generator), immer zurück zur Übersicht */
.dsnav .brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;flex:0 0 auto}
.dsnav .brand .lockup{height:34px;width:auto;display:block}
.dsnav .brand .mk{width:24px;height:24px;border-radius:6px;display:block}
.dsnav .brand .wm{font-family:var(--font);font-weight:var(--w-text);font-size:24px;line-height:1;color:#8a9097;letter-spacing:.005em}

/* „← Übersicht" – nur in der Generator-Variante sichtbar */
.dsnav .back{display:none;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;text-decoration:none}
.dsnav.is-werkzeug .back{display:inline-flex}
.dsnav .back:hover{color:var(--gold-deep)}

/* Primär-Welten */
.dsnav .worlds{display:flex;gap:22px;margin-left:auto}
.dsnav .worlds a,.dsnav .worlds button{font:inherit;font-size:13.5px;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:0;text-decoration:none}
.dsnav .worlds a:hover,.dsnav .worlds button:hover{color:var(--gold-deep)}

/* ☰ Burger – nur das Icon, keine Pille, kein Wort */
.dsnav .all{margin-left:22px;display:inline-flex;align-items:center;gap:6px;font:inherit;
  color:var(--ink);background:none;border:0;padding:4px;cursor:pointer;line-height:1}
.dsnav .all .ic{font-size:23px;line-height:1}
.dsnav .all:hover{color:var(--gold-deep)}
.dsnav .all .idot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--gold)}

@media(max-width:720px){
  .dsnav .worlds{display:none}
  .dsnav .all{margin-left:auto}
}

/* --- Schublade ------------------------------------------------------------- */
.dsnav-backdrop{position:fixed;inset:0;background:rgba(20,24,28,.32);opacity:0;visibility:hidden;
  transition:opacity .18s,visibility .18s;z-index:45}
.dsnav-backdrop.open{opacity:1;visibility:visible}

.dsnav-drawer{position:fixed;top:0;right:0;z-index:46;width:min(420px,100%);height:100vh;
  background:var(--paper);border-left:1px solid var(--line);box-shadow:var(--shadow-card);
  transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column}
.dsnav-drawer.open{transform:none}

.dsnav-drawer .dhead{display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;height:var(--header-h);border-bottom:1px solid var(--line);flex:0 0 auto}
.dsnav-drawer .dhead .t{font-weight:var(--w-strong);font-size:15px}
.dsnav-drawer .close{font:inherit;font-size:22px;line-height:1;color:var(--muted);background:none;border:0;cursor:pointer;padding:4px}
.dsnav-drawer .close:hover{color:var(--ink)}

.dsnav-drawer .body{overflow:auto;padding:var(--s2) 0 var(--s8)}

/* Die vier meistgenutzten – prominent ganz oben in der Schublade */
.dsnav-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 22px var(--s2)}
.dsnav-quick a{display:block;border:1px solid var(--line);border-radius:var(--r-card);padding:14px;
  text-decoration:none;color:var(--ink);background:var(--soft);transition:border-color .15s,transform .15s,box-shadow .15s}
.dsnav-quick a:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow-card)}
.dsnav-quick .qt{display:block;font-weight:var(--w-strong);font-size:15px}
.dsnav-quick .qd{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.35}

/* Toast für den unsichtbaren Intern-Schalter */
.dsnav-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:8px 16px;border-radius:var(--r-pill);font-size:13px;opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s;z-index:60}
.dsnav-toast.show{opacity:1;visibility:visible}

.dsnav-group{border-bottom:1px solid var(--line-soft)}
.dsnav-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) 22px;font-weight:var(--w-strong);font-size:14.5px}
.dsnav-group>summary::-webkit-details-marker{display:none}
.dsnav-group>summary .arr{color:var(--muted);font-weight:var(--w-text);transition:transform .15s}
.dsnav-group[open]>summary .arr{transform:rotate(90deg)}
.dsnav-group>summary .intro{display:block;color:var(--muted);font-weight:var(--w-text);font-size:12px;margin-top:3px;max-width:42ch}

.dsnav-link{display:flex;align-items:baseline;gap:10px;padding:9px 22px;text-decoration:none;color:var(--ink)}
.dsnav-link:hover{background:var(--soft)}
.dsnav-link .tt{font-size:14px}
.dsnav-link .dd{color:var(--muted);font-size:12px;margin-top:2px;line-height:1.4}
.dsnav-link .txt{display:flex;flex-direction:column}

/* Status-Punkt */
.dsnav-link .st{width:8px;height:8px;border-radius:var(--r-pill);background:var(--muted);flex:0 0 auto;margin-top:7px}
.dsnav-link .st.live{background:#3f7d46}
.dsnav-link .st.beta{background:var(--blue)}
.dsnav-link .st.entwurf{background:var(--gold-deep)}
.dsnav-link .st.geparkt{background:#c2c7cc}

.dsnav-drawer .foot{padding:var(--s4) 22px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;flex:0 0 auto}
.dsnav-drawer .foot a{color:var(--gold-deep);text-decoration:none}

/* --- Unterleiste einer Welt (zweite Ebene, z. B. Schrift) ------------------- */
/* Klebt direkt unter der Kopfzeile. Links: der Weltname (Deutlich), rechts die
   Geschwisterseiten. Aktiv = Gold mit feinem Gold-Strich – ruhig, kein Pillen-
   Lärm (die Gold/Weiss-Pillen bleiben den Werkzeug-Steuerungen vorbehalten). */
.dsnav-sub{position:sticky;top:var(--header-h);z-index:39;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
.dsnav-sub .bar{display:flex;align-items:center;gap:var(--s4);height:44px;
  max-width:var(--ds-maxw);margin:0 auto;padding:0 26px}
.dsnav-sub .sec{flex:0 0 auto;font-weight:var(--w-deutlich);font-size:14px;color:var(--ink)}
.dsnav-sub .lnks{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.dsnav-sub .lnks::-webkit-scrollbar{display:none}
.dsnav-sub .slnk{position:relative;flex:0 0 auto;font-size:13.5px;color:var(--muted);
  text-decoration:none;padding:11px 0;white-space:nowrap;transition:color .15s}
.dsnav-sub .slnk:hover{color:var(--gold-deep)}
.dsnav-sub .slnk.is-active{color:var(--gold-deep)}
.dsnav-sub .slnk.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold-deep);border-radius:2px}

@media(max-width:560px){
  .dsnav-sub .sec{display:none}
  .dsnav-sub .bar{gap:0}
}

/* --- Auf dieser Seite (dritte Ebene) --------------------------------------- */
/* Sprungziele der aktuellen Seite, klebt unter der Welt-Unterleiste. Leiser als
   die zweite Ebene (kleiner, ohne Weltname); aktiv läuft per Scroll-Spy mit. */
.dsnav-onpage{position:sticky;top:calc(var(--header-h) + 44px);z-index:38;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line-soft)}
.dsnav-onpage .bar{display:flex;align-items:center;height:38px;
  max-width:var(--ds-maxw);margin:0 auto;padding:0 26px}
.dsnav-onpage .lnks{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.dsnav-onpage .lnks::-webkit-scrollbar{display:none}
.dsnav-onpage .olnk{position:relative;flex:0 0 auto;font-size:12.5px;color:var(--muted);
  text-decoration:none;padding:9px 0;white-space:nowrap;transition:color .15s}
.dsnav-onpage .olnk:hover{color:var(--gold-deep)}
.dsnav-onpage .olnk.is-active{color:var(--gold-deep)}
.dsnav-onpage .olnk.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);border-radius:2px}