/* ========================================================================== 
   HALBLEITER.ORG – V5 global shell
   --------------------------------------------------------------------------
   This file owns ONLY the global frame: body, header, navigation, search,
   common content width and footer. Page/content styling remains separate.
   No selectors from the former V7 shell are used.
   ========================================================================== */

:root {
  --site-ink:#09234d;
  --site-muted:#70849e;
  --site-blue:#0867d8;
  --site-blue-hover:#005bbf;
  --site-line:#dce7f2;
  --site-bg:#f4f8fb;
  --site-white:#fff;
  --site-shadow:0 12px 35px rgba(19,61,105,.08);
  --site-max:1480px;
  --site-header-h:118px;
}

html { scroll-behavior:smooth; }
body.site-body {
  margin:0;
  min-height:100vh;
  color:var(--site-ink);
  background:linear-gradient(180deg,#eef8ff 0,#f7fbfe 34rem,#f4f8fb 100%);
  font-family:Roboto,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body.site-body *, body.site-body *::before, body.site-body *::after { box-sizing:border-box; }
body.site-body a { text-decoration:none; }
body.site-body .sr-only {
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* Header ------------------------------------------------------------------ */
.site-header {
  min-height:var(--site-header-h);
  padding:0 max(24px,calc((100vw - var(--site-max))/2));
  display:grid;
  grid-template-columns:auto minmax(280px,420px);
  grid-template-rows:72px 46px;
  align-items:center;
  column-gap:2rem;
  row-gap:0;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid rgba(9,35,77,.08);
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(12px);
}

.site-brand { grid-column:1;grid-row:1; }
.site-search { grid-column:2;grid-row:1;justify-self:end;max-width:420px; }
.site-navigation {
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  align-self:stretch;
  border-top:1px solid rgba(9,35,77,.06);
}

.site-brand,.site-footer__brand {
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--site-ink)!important;
  min-width:max-content;
}
.site-brand__icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  color:var(--site-blue);
  border:2px solid var(--site-blue);
  border-radius:7px;
  font:700 1.25rem/1 system-ui,sans-serif;
}
.site-brand__text strong,.site-footer__brand strong { display:block;font-size:1.08rem;letter-spacing:.01em; }
.site-brand__text small,.site-footer__brand small { display:block;color:#90a0b4;font-size:.65rem;line-height:1.25; }

.site-menu-toggle {
  display:none;
  width:44px;
  height:44px;
  border:0;
  padding:10px;
  background:transparent;
  cursor:pointer;
}
.site-menu-toggle > span:not(.sr-only) {
  display:block;
  width:22px;
  height:2px;
  margin:4px auto;
  border-radius:2px;
  background:var(--site-ink);
  transition:transform .18s,opacity .18s;
}
.site-menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.site-menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity:0; }
.site-menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* Search ------------------------------------------------------------------ */
.site-search {
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  background:#fff;
  border:1px solid #cad8e6;
  border-radius:9px;
}
.site-search input[type="search"] {
  min-width:0;
  width:100%;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:.72rem .85rem!important;
  margin:0!important;
  color:var(--site-ink)!important;
  font:inherit!important;
}
.site-search > button {
  align-self:stretch;
  border:0;
  background:transparent;
  color:var(--site-blue);
  padding:0 .9rem;
  cursor:pointer;
  font-size:1.25rem;
}
.site-search #suggest {
  position:absolute;
  z-index:1200;
  top:calc(100% + 6px);
  left:0;
  right:0;
}

/* Navigation -------------------------------------------------------------- */
.site-navigation { min-width:0; }
.site-navigation ul { list-style:none;margin:0;padding:0; }
.site-navigation__list { display:flex;justify-content:flex-start;align-items:center;gap:.45rem;height:46px; }
.site-navigation__item { position:relative;min-width:0; }
.site-navigation__row { display:flex;align-items:center;min-width:0; }
.site-navigation__link,.site-navigation__group-label {
  display:block;
  padding:.72rem .38rem;
  color:var(--site-ink)!important;
  font-size:.84rem;
  font-weight:650;
  line-height:1.2;
  white-space:nowrap;
}
.site-navigation__group-label { cursor:default; }
.site-navigation__item.is-current > .site-navigation__row > .site-navigation__link { color:var(--site-blue)!important; }
.site-navigation__link:hover,.site-navigation__link:focus-visible { color:var(--site-blue)!important; }

.site-navigation__submenu-toggle {
  width:24px;
  height:30px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  cursor:pointer;
}
.site-navigation__submenu-toggle span {
  width:7px;
  height:7px;
  border-right:1.5px solid #74869a;
  border-bottom:1.5px solid #74869a;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .16s;
}
.site-navigation__item.is-open > .site-navigation__row > .site-navigation__submenu-toggle span { transform:rotate(225deg) translate(-1px,-1px); }

.site-navigation__submenu {
  display:none;
  min-width:260px;
  padding:.55rem;
  background:#fff;
  border:1px solid var(--site-line);
  border-radius:11px;
  box-shadow:var(--site-shadow);
}
.site-navigation__submenu .site-navigation__row { border-radius:7px; }
.site-navigation__submenu .site-navigation__link,
.site-navigation__submenu .site-navigation__group-label {
  flex:1 1 auto;
  padding:.58rem .65rem;
  white-space:normal;
  font-size:.82rem;
  font-weight:600;
}
.site-navigation__submenu .site-navigation__row:hover { background:#f4f9fd; }

/* Desktop: einheitliche Hierarchie fuer Kapitelgruppen, Bereiche und Kapitel.
   Alle Text-Ebenen bleiben gleich gross; nur Gewicht und Einzug variieren. */
@media (min-width:1100px) {
  .site-navigation__submenu--root {
    position:absolute;
    top:100%; /* Ohne Hover-Luecke zum Hauptmenue. */
    left:0;
    width:min(380px, calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    max-height:min(72vh,680px);
    padding:.45rem .55rem .65rem;
    overflow-x:hidden;
    overflow-y:auto;
    border-top:3px solid var(--site-blue);
  }

  /* Dropdowns der beiden letzten Hauptpunkte am rechten Rand ausrichten. */
  .site-navigation__list > .site-navigation__item:nth-last-child(-n+2) > .site-navigation__submenu--root {
    left:auto;
    right:0;
  }

  .site-navigation__item:hover > .site-navigation__submenu--root,
  .site-navigation__item:focus-within > .site-navigation__submenu--root,
  .site-navigation__item.is-open > .site-navigation__submenu--root { display:block; }

  .site-navigation__submenu--root > .site-navigation__item + .site-navigation__item {
    border-top:1px solid #edf2f6;
  }

  /* Direkte Eintraege und Abschnittstitel der ersten Dropdown-Ebene. */
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__row > .site-navigation__link,
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__row > .site-navigation__group-label,
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__link {
    color:#274766!important;
    font-size:.84rem;
    font-weight:700;
    line-height:1.35;
  }
  .site-navigation__submenu--root > .site-navigation__group > .site-navigation__row > .site-navigation__group-label {
    color:#405b74!important;
    font-size:.84rem;
    font-weight:750;
    letter-spacing:.02em;
    text-transform:uppercase;
  }

  /* Untermenues liegen innerhalb des Dropdowns statt daneben. */
  .site-navigation__submenu--root .site-navigation__submenu {
    position:static;
    min-width:0;
    margin:.15rem 0 .35rem .45rem;
    padding:.1rem 0 .2rem .65rem;
    border:0;
    border-left:2px solid #dce8f2;
    border-radius:0;
    box-shadow:none;
    background:#f8fbfe;
  }

  /* Gleich grosse Schrift in allen verschachtelten Ebenen, keine blauen
     oder grossgeschriebenen Zwischenueberschriften. */
  .site-navigation__submenu--root .site-navigation__submenu .site-navigation__link,
  .site-navigation__submenu--root .site-navigation__submenu .site-navigation__group-label {
    min-width:0;
    padding:.58rem .45rem;
    color:#425d75!important;
    font-size:.84rem;
    font-weight:600;
    line-height:1.35;
    letter-spacing:normal;
    text-transform:none;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .site-navigation__submenu--root .site-navigation__submenu .site-navigation__group > .site-navigation__row > .site-navigation__group-label {
    color:#425d75!important;
    font-size:.84rem;
    font-weight:650;
    letter-spacing:normal;
    text-transform:none;
  }

  .site-navigation__submenu .site-navigation__item.is-open > .site-navigation__submenu { display:block; }
  .site-navigation__submenu .site-navigation__item:not(.is-open) > .site-navigation__submenu { display:none; }

  /* Ausrichtung der Pfeile innerhalb der waagerechten Desktop-Leiste. */
  .site-navigation__submenu-toggle { transform:translateX(-5px); }
}

/* Common content frame ---------------------------------------------------- */
.site-content { width:100%; }
.site-main {
  width:min(var(--site-max),calc(100% - 36px));
  margin:0 auto;
  min-width:0;
  padding-bottom:2.2rem;
}
.page-info .site-main { padding-top:1.4rem; }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  width:100%;
  margin:0!important;
  padding:0!important;
  background:#071a32!important;
  color:#a9bbca!important;
  visibility:visible!important;
  opacity:1!important;
}
.site-footer__inner {
  width:min(var(--site-max),calc(100% - 36px));
  min-height:150px;
  margin:0 auto;
  padding:2.4rem 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:2rem;
}
.site-footer__brand { color:#fff!important; }
.site-footer__brand .site-brand__icon { border-color:#69aaf0;color:#69aaf0; }
.site-footer__nav { display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap; }
.site-footer__nav a { color:#c7d5df!important;font-size:.8rem; }
.site-footer__nav a:hover { color:#fff!important; }
.site-footer__meta { display:grid;justify-items:end;gap:.2rem;font-size:.72rem;color:#8299ad; }

/* Spenden / Werbepause --------------------------------------------------- */
.site-footer__donation {
  grid-column:1 / -1;
  width:100%;
  padding-top:1.35rem;
  border-top:1px solid rgba(255,255,255,.11);
}
.spende-footer {
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,320px) auto;
  align-items:center;
  gap:1rem 1.25rem;
  color:#a9bbca;
  font-size:.78rem;
  line-height:1.45;
}
.spende-footer__text {
  min-width:0;
}
.spende-footer__text strong {
  color:#fff;
  font-weight:700;
}
.spende-footer__bar {
  position:relative;
  display:block;
  width:100%;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.13);
}
.spende-footer__fill {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#69aaf0;
}
.spende-footer__button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.45rem .8rem;
  border:1px solid rgba(105,170,240,.6);
  border-radius:7px;
  color:#dcecff!important;
  font-size:.76rem;
  font-weight:700;
  white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s;
}
.spende-footer__button:hover,
.spende-footer__button:focus-visible {
  background:rgba(105,170,240,.12);
  border-color:#69aaf0;
  color:#fff!important;
}
.spende-footer--erreicht {
  grid-template-columns:1fr;
  text-align:center;
}
.spende-footer--erreicht .spende-footer__text {
  color:#cfe2f1;
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width:1099px) {
  :root { --site-header-h:68px; }
  .site-header {
    min-height:var(--site-header-h);
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:68px;
    gap:.6rem;
    padding:0 18px;
  }
  .site-brand { grid-column:1;grid-row:1; }
  .site-brand__text strong { font-size:.95rem; }
  .site-brand__text small { display:none; }
  .site-brand__icon { width:30px;height:30px; }
  .site-menu-toggle { display:block;grid-column:2;grid-row:1; }
  .site-header > .site-search { display:none; }

  .site-navigation {
    display:none;
    grid-column:auto;
    grid-row:auto;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    max-height:calc(100vh - var(--site-header-h));
    overflow:auto;
    background:#fff;
    border-top:1px solid var(--site-line);
    box-shadow:0 18px 30px rgba(9,35,77,.12);
  }
  .site-navigation.is-open { display:block; }

  /* Das bestehende Header-Suchformular wird von main.js auf Mobilgeraeten
     hierher verschoben. So bleiben #eingabe und #suggest identisch mit
     der Desktop-Suche und FlexSearch muss nur einmal verdrahtet werden. */
  .site-navigation > .site-search {
    display:flex;
    width:calc(100% - 36px);
    max-width:none;
    margin:.8rem 18px .15rem;
    position:relative;
    flex:none;
  }
  .site-navigation > .site-search input[type="search"] {
    min-height:42px;
  }
  .site-navigation > .site-search #suggest {
    z-index:1300;
  }

  .site-navigation__list { display:block;padding:.65rem 18px 1.2rem; }
  .site-navigation__item { width:100%; }
  .site-navigation__row { border-bottom:1px solid #edf2f6; }
  .site-navigation__link,.site-navigation__group-label { flex:1 1 auto;padding:.9rem .25rem;font-size:.94rem; }
  .site-navigation__submenu-toggle { width:44px;height:44px;flex-basis:44px; }

  .site-navigation__submenu,
  .site-navigation__submenu--root {
    position:static;
    min-width:0;
    width:100%;
    margin:0;
    padding:.25rem 0 .45rem .75rem;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#f8fbfd;
  }
  .site-navigation__item.is-open > .site-navigation__submenu { display:block; }
  .site-navigation__item:not(.is-open) > .site-navigation__submenu { display:none; }
  .site-navigation__submenu .site-navigation__row { border-bottom:1px solid #e9f0f5; }
  .site-navigation__submenu .site-navigation__link,
  .site-navigation__submenu .site-navigation__group-label { font-size:.84rem;padding:.72rem .4rem; }

  .site-main { width:min(100% - 20px,var(--site-max)); }
  .page-home .site-main,.page-area .site-main,.page-chapter .site-main { width:100%; }

  .site-footer__inner { grid-template-columns:1fr;text-align:center;padding:2rem 0; }
  .site-footer__brand { justify-self:center; }
  .site-footer__nav { justify-content:center; }
  .site-footer__meta { justify-items:center; }
  .site-footer__donation { padding-top:1.2rem; }
  .spende-footer {
    grid-template-columns:1fr;
    justify-items:center;
    gap:.75rem;
    text-align:center;
  }
  .spende-footer__bar { width:min(100%,420px); }
  .spende-footer__button { min-width:110px; }
}

@media (max-width:420px) {
  .site-navigation > .site-search { width:calc(100% - 24px);margin-left:12px;margin-right:12px; }
  .site-navigation__list { padding-left:12px;padding-right:12px; }
  .site-footer__inner { width:calc(100% - 28px); }
}

/* ========================================================================== 
   Mobile Navigation – Scroll-Lock (Desktop-Regeln oben zusammengefasst)
   ========================================================================== */

@media (max-width:1099px) {
  html.site-menu-open,
  body.site-menu-open {
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  /* Die Scroll-Sperre hebt auf manchen mobilen Browsern die Sticky-Position
     des Headers auf. Das Menue haengt an ihm und landet sonst ausserhalb
     des sichtbaren Bereichs. */
  body.site-menu-open {
    padding-top:var(--site-header-h);
  }
  body.site-menu-open .site-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
  }
  .site-navigation {
    max-height:calc(100dvh - var(--site-header-h));
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
  .site-navigation__submenu--root {
    margin:.15rem 0 .6rem;
    padding:.25rem 0 .4rem .7rem;
    border-left:3px solid #c9e2f6;
    background:#f3f8fc;
  }
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__row > .site-navigation__link,
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__row > .site-navigation__group-label {
    font-weight:700;
    color:#274766!important;
  }
  .site-navigation__submenu .site-navigation__submenu {
    margin:0 0 .35rem .55rem;
    padding:.15rem 0 .25rem .7rem;
    border-left:2px solid #d9e7f2;
    background:#fff;
  }
  .site-navigation__submenu .site-navigation__submenu .site-navigation__link,
  .site-navigation__submenu .site-navigation__submenu .site-navigation__group-label {
    font-size:.8rem;
    color:#5b7187!important;
  }
  .site-navigation__group > .site-navigation__row > .site-navigation__group-label {
    color:#0867d8!important;
    font-size:.71rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
}

/* ========================================================================== 
   V5 navigation refinement – mobile height + deterministic accordion state
   ========================================================================== */
@media (max-width:1099px) {
  /* Desktop setzt fuer die horizontale Navigation eine feste Zeilenhoehe.
     Mobil muss die Liste wieder mit ihrem gesamten Inhalt wachsen. */
  .site-navigation__list {
    height:auto;
    min-height:0;
  }

  .site-navigation.is-open {
    height:auto;
  }
}

/* ========================================================================== 
   V5 navigation alignment – mobile nested levels
   ========================================================================== */

/* Mobile/Tablet: jede Menuezeile behaelt dieselbe volle Breite. Die visuelle
   Hierarchie entsteht nur noch durch Texteinzug – nicht dadurch, dass ganze
   Untermenues immer weiter nach rechts geschoben werden. Dadurch stehen alle
   Chevron-Buttons auf derselben X-Position und tiefe Ebenen koennen nicht mehr
   aus dem Viewport herauswachsen. */
@media (max-width:1099px) {
  .site-navigation__submenu-toggle {
    transform:none;
  }

  .site-navigation__submenu,
  .site-navigation__submenu--root,
  .site-navigation__submenu .site-navigation__submenu {
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    border-left:0;
  }

  .site-navigation__submenu--root {
    margin:.15rem 0 .55rem;
    background:#f3f8fc;
  }

  .site-navigation__submenu .site-navigation__submenu {
    margin:0 0 .25rem;
    background:#fff;
  }

  .site-navigation__submenu .site-navigation__item,
  .site-navigation__submenu .site-navigation__row {
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .site-navigation__row {
    position:relative;
  }

  .site-navigation__submenu-toggle {
    flex:0 0 44px;
    width:44px;
    height:44px;
    margin:0;
  }

  .site-navigation__link,
  .site-navigation__group-label {
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* Ebene 1 unter einem Hauptmenuepunkt */
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__row > .site-navigation__link,
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__row > .site-navigation__group-label {
    padding-left:1rem;
  }

  /* Ebene 2 */
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__submenu > .site-navigation__item > .site-navigation__row > .site-navigation__link,
  .site-navigation__submenu--root > .site-navigation__item > .site-navigation__submenu > .site-navigation__item > .site-navigation__row > .site-navigation__group-label {
    padding-left:2rem;
  }

  /* Ebene 3 und tiefer: Einzug begrenzen, damit Text lesbar bleibt. */
  .site-navigation__submenu--root .site-navigation__submenu .site-navigation__submenu .site-navigation__link,
  .site-navigation__submenu--root .site-navigation__submenu .site-navigation__submenu .site-navigation__group-label {
    padding-left:3rem;
  }

  /* Der Pfeil bleibt auf jeder Ebene am selben rechten Rasterpunkt. */
  .site-navigation__item.has-children > .site-navigation__row > .site-navigation__submenu-toggle {
    margin-left:auto;
  }
}


/* ========================================================================== 
   Nachschlagen – "Statistiken" auf derselben Ebene wie Lexikon/Akronyme
   ========================================================================== */
@media (max-width:1099px) {
  .site-navigation__submenu--root > .site-navigation__statistics > .site-navigation__row > .site-navigation__link {
    padding-left:.4rem;
  }
}

/* Mobiles Suchfeld: Abstand zum Header und sichere Breite im Menue. */
@media (max-width:1099px) {
  .site-navigation {
    padding-top:12px;
  }

  .site-navigation > .site-search,
  .site-navigation > .site-navigation__mobile-search {
    width:calc(100% - 40px);
    min-width:0;
    max-width:none;
    position:relative;
    left:20px;
    margin:0 0 .7rem;
    box-sizing:border-box;
    justify-self:auto;
  }

  .site-navigation > .site-search input[type="search"] {
    flex:1 1 0;
    width:0;
    min-width:0;
  }
}


/* Sprachwahl neben der Suche: wandert mit #suchformular ins mobile Menue.
   Der Link liegt bewusst im Formular, da main.js dieses Element verschiebt. */
.site-search > .site-search__language {
  position:absolute;
  top:50%;
  left:-52px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:42px;
  padding:0;
  border:1px solid #cad8e6;
  border-radius:8px;
  background:#fff;
  color:#345b7b;
  font:800 .78rem/1 Roboto,Inter,system-ui,sans-serif;
  letter-spacing:.025em;
  white-space:nowrap;
  text-decoration:none;
}
.site-search > .site-search__language:hover,
.site-search > .site-search__language:focus-visible {
  color:#0867d8;
  background:#eef7fe;
  border-color:#9fc7e9;
}
.site-search > .site-search__language:focus-visible {
  outline:2px solid #0867d8;
  outline-offset:2px;
}

@media (max-width:1099px) {
  /* Genuegend Platz links fuer die Sprache, rechts 20px Aussenabstand.
     Ueberschreibt die aeltere 20px-Positionierung der mobilen Suche. */
  .site-navigation > .site-search {
    left:70px;
    width:calc(100% - 90px);
    margin:0 20px .7rem 0;
  }
}
@media (max-width:420px) {
  .site-navigation > .site-search {
    left:64px;
    width:calc(100% - 76px);
    margin:0 12px .7rem 0;
  }
}