/* ============================================================
   MVO-Doku · Kopfzeile — EINE Fassung für alle Seiten
   ============================================================
   Warum es diese Datei gibt: Kopf- und Fußzeile waren auf Landingpage,
   Wissen und den Rechtsseiten getrennt gepflegt und dreimal
   auseinandergelaufen — mal fehlte das Schild, mal die halbe
   Navigation, mal der Dunkelmodus. Wer diese Datei einbindet, kann
   nicht mehr abweichen.

   Die Werte sind WÖRTLICH aus landingpage.html übernommen (04.09.2026),
   damit dort nichts anders aussieht als vorher. `.ls-mond` hat bewusst
   keine Grundregel: Im hellen Modus ist der Mond sichtbar, weil er das
   ANGEBOT zeigt (auf dunkel umschalten), nicht den Zustand.

   Braucht ausserdem die Farbtoken aus /wissen/token.css und die
   Schriften aus /schriften/schriften.css.
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0}
.topbar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--anthrazit);border-bottom:1px solid var(--line-dark)}
/* Bringt die Breite SELBST mit: Auf den Rechtsseiten ist .wrap nur
   760 px breit (richtig fuer langen Fliesstext) — ohne diese Zeile
   ruecke die Kopfzeile dort ein und stuende nicht dort, wo sie auf der
   Landingpage steht. */
.topbar .wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,40px);display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--on-dark); font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:.01em;text-transform:uppercase}
.logo .mark{width:28px;height:28px;background:var(--signal);border-radius:6px;display:grid;place-items:center}
.logo .mark svg{display:block}
/* Schutz gegen die allgemeinen Verweis-Regeln der einbindenden Seite.
   wissen.css setzt a{border-bottom:1px solid currentColor} — richtig fuer
   Verweise im Fliesstext, aber es traf auch Logo und Navigation: In der
   Kopfzeile stand ein unterstrichenes „MVO-DOKU“ und darunter
   unterstrichene Menuepunkte. .topbar a wiegt (0,1,1) gegen a mit (0,0,1)
   und gewinnt damit unabhaengig von der Ladereihenfolge. */
.topbar a{border-bottom:none}
.topnav{display:flex;gap:1.6rem;align-items:center}
.topnav a{color:var(--on-dark-soft);text-decoration:none;font-weight:500;font-size:.95rem}
.topnav a:hover{color:var(--on-dark)}
.topnav a.btn-signal{color:oklch(15% .02 252)}
.lichtschalter{display:inline-grid;place-items:center;width:34px;height:34px; border-radius:999px;border:1.5px solid var(--line-dark);background:transparent; color:var(--on-dark-soft);cursor:pointer;flex:none; transition:color .15s var(--ease),border-color .15s var(--ease)}
.lichtschalter:hover{color:var(--on-dark);border-color:var(--on-dark-soft)}
.lichtschalter svg{grid-area:1/1}
.ls-sonne{display:none}
:root[data-theme="dark"] .ls-sonne{display:block}
:root[data-theme="dark"] .ls-mond{display:none}
.btn{display:inline-block;font-weight:600;font-size:1.02rem;border-radius:999px; padding:.78rem 1.6rem;text-decoration:none;cursor:pointer;border:none; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-signal{background:var(--signal);color:oklch(15% 0.02 252)}
.btn-signal:hover{background:oklch(73% .19 45)}
.btn-outline-dark{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 2px var(--line-dark)}
.btn-outline-dark:hover{box-shadow:inset 0 0 0 2px var(--on-dark-soft)}
.btn-sm{padding:.5rem 1.1rem;font-size:.9rem}

/* Der Schalter folgt der SYSTEM-Einstellung, solange nicht von Hand
   gewählt wurde. Reihenfolge wie überall: erst System, dann Schalter. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ls-sonne{display:block}
  :root:not([data-theme="light"]) .ls-mond{display:none}
}

/* Schmale Schirme: Die Textverweise verschwinden, die Knöpfe bleiben.
   Genau so macht es die Landingpage. */
/* Sehr schmale Schirme: Logo + zwei Knöpfe passen sonst nicht nebeneinander.
   Gemessen bei 375 px: 350 px nötig, 335 px vorhanden — die Seite rutschte
   seitwärts. Beide Knöpfe bleiben, sie werden nur schmaler. */
@media (max-width:520px){
  .topnav{gap:.55rem}
  .topnav .btn-sm{padding:.45rem .75rem;font-size:.82rem}
  .logo{font-size:1.25rem}
  .logo .mark{width:24px;height:24px}
}
@media (max-width:940px){
  .topnav a:not(.btn){display:none}
}

/* ---------- Fusszeile ----------
   Aus demselben Grund hier und nicht je Seite: Sie war dreimal getrennt
   gepflegt, auf den Rechtsseiten sogar hell statt dunkel. */
footer{background:var(--anthrazit);color:var(--on-dark-soft);padding:36px 0;
  font-size:.85rem;margin-top:4rem}
footer .wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,40px);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:var(--on-dark-soft);border-bottom:1px solid transparent}
footer a:hover{color:var(--on-dark);border-bottom-color:var(--signal)}