/* ==========================================================================
   Fundstellen — Stil
   --------------------------------------------------------------------------
   Farben, Schrift und Kontrastwerte stammen aus dem Child-Theme von
   schalk-ip.de und sind dort begruendet und gemessen. Sie werden hier
   uebernommen, damit beide Auftritte dieselbe Sprache sprechen.
   ========================================================================== */

@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/schrift/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/schrift/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('/schrift/roboto-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('/schrift/roboto-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy-900:#001255; --navy-700:#303D71; --navy-600:#434E7C; --navy-500:#565F87;
  --navy-450:#6C7393; --navy-300:#A3A4B3; --navy-200:#BFBEC3;
  --sand-50:#F7F4EF; --sand-100:#EFE9DF; --sand-200:#E5E0D9; --sand-400:#CECBCC;

  --c-bg:var(--sand-100);
  --c-surface:var(--sand-50);
  --c-surface-muted:var(--sand-200);
  --c-border:var(--sand-400);
  --c-border-card:#A7A8B6;
  --c-border-strong:var(--navy-450);
  --c-text:var(--navy-900);
  --c-text-muted:var(--navy-600);
  --c-link:var(--navy-700);
  --c-akzent:#1560C1;
  --c-focus:var(--navy-900);
  --c-focus-hell:var(--sand-100);
  --c-fuss-bg:var(--navy-900);
  --c-fuss-text:var(--sand-100);
  --c-fuss-muted:var(--navy-200);
  --c-fuss-akzent:#74AFFB;
  --c-schatten:rgba(0,18,85,.12);

  --schrift:'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Zwei Groessen, absichtlich getrennt:
     --kopfhoehe  gibt der Kopfzeile ihre Mindesthoehe -- ein Entwurfswert.
     --kopfrand   ist der Abstand, den klebende Trenner und Sprungziele von
                  oben halten muessen. Ohne JavaScript ist er derselbe Wert.

     Sie duerfen nicht dieselbe Variable sein. Der Messwert flosse sonst in
     die Mindesthoehe zurueck, die Kopfzeile waere beim naechsten Umbruch um
     ihren Rahmen hoeher, das naechste Messen legte wieder einen drauf --
     die Leiste wuechse Pixel um Pixel nach unten. Genau so ist es passiert. */
  --kopfhoehe:4.25rem;
  --kopfrand:var(--kopfhoehe);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-980:#0A0A0C; --k-940:#111114; --k-800:#232329; --k-700:#2F2F37;
    --k-600:#3E3E48; --k-400:#71717D; --k-200:#C4C4CD; --k-100:#E6E6EB; --k-000:#FFFFFF;
    --c-bg:var(--k-980); --c-surface:var(--k-940); --c-surface-muted:var(--k-800);
    --c-border:var(--k-700); --c-border-card:var(--k-600); --c-border-strong:var(--k-400);
    --c-text:var(--k-000); --c-text-muted:var(--k-200); --c-link:var(--k-100);
    --c-akzent:#74AFFB; --c-focus:var(--k-000); --c-focus-hell:var(--k-000);
    --c-fuss-bg:var(--k-940); --c-fuss-text:var(--k-000); --c-fuss-muted:var(--k-200);
    --c-schatten:rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --k-980:#0A0A0C; --k-940:#111114; --k-800:#232329; --k-700:#2F2F37;
  --k-600:#3E3E48; --k-400:#71717D; --k-200:#C4C4CD; --k-100:#E6E6EB; --k-000:#FFFFFF;
  --c-bg:var(--k-980); --c-surface:var(--k-940); --c-surface-muted:var(--k-800);
  --c-border:var(--k-700); --c-border-card:var(--k-600); --c-border-strong:var(--k-400);
  --c-text:var(--k-000); --c-text-muted:var(--k-200); --c-link:var(--k-100);
  --c-akzent:#74AFFB; --c-focus:var(--k-000); --c-focus-hell:var(--k-000);
  --c-fuss-bg:var(--k-940); --c-fuss-text:var(--k-000); --c-fuss-muted:var(--k-200);
  --c-schatten:rgba(0,0,0,.55);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--schrift);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-link); }
a:hover, a:focus, a:active { color: var(--c-akzent); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.springen {
  position: absolute; left: .5rem; top: -3rem; z-index: 20;
  background: var(--c-surface); color: var(--c-text);
  padding: .5rem .9rem; border: 1px solid var(--c-border-card);
  transition: top .15s;
}
.springen:focus { top: .5rem; }

/* --- Kopf ---------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 10;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border-card);
}
.kopf-innen {
  max-width: 68rem; margin: 0 auto; min-height: var(--kopfhoehe);
  padding: .7rem clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 1.75rem);
  flex-wrap: wrap;
}
.marke { display: inline-flex; color: var(--c-text); flex: 0 0 auto; }
.marke:hover, .marke:focus { color: var(--c-akzent); }
.wortmarke { display: block; width: 9.5rem; height: auto; }

.umschalter { display: flex; gap: .25rem; flex: 0 0 auto; }
.wechsel {
  display: inline-block; padding: .35rem .75rem; text-decoration: none;
  color: var(--c-text-muted); border: 1px solid transparent; border-radius: 2px;
  font-size: .92rem;
}
.wechsel:hover { border-color: var(--c-border-card); color: var(--c-akzent); }
.wechsel.an {
  color: var(--c-text); border-color: var(--c-border-card);
  background: var(--c-surface); font-weight: 500;
}

.suchfeld { flex: 1 1 12rem; min-width: 10rem; }
#suche {
  width: 100%; font: inherit; font-size: .95rem; padding: .45rem .7rem;
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: 2px;
}
#suche::placeholder { color: var(--c-text-muted); opacity: .8; }

.schema {
  flex: 0 0 auto; font: inherit; font-size: 1.1rem; line-height: 1;
  padding: .4rem .55rem; cursor: pointer; border-radius: 2px;
  color: var(--c-text-muted); background: var(--c-surface);
  border: 1px solid var(--c-border-card);
}
.schema:hover { color: var(--c-akzent); border-color: var(--c-akzent); }

/* --- Inhalt -------------------------------------------------------------- */
.inhalt {
  max-width: 68rem; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem;
}
.einleitung { max-width: 46rem; display: flex; flex-direction: column; gap: .5rem; }
.einleitung h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 300;
  letter-spacing: -.015em; margin: 0; text-wrap: balance;
}
.einleitung p { margin: 0; color: var(--c-text-muted); }
.einleitung .legende { font-size: .88rem; }

.werkzeuge {
  margin: 2rem 0 1rem; display: flex; flex-direction: column; gap: .75rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--c-border-card);
}
.sprungleiste { display: flex; flex-wrap: wrap; gap: .15rem; }
.sprungleiste a {
  display: inline-block; min-width: 1.8rem; text-align: center;
  padding: .25rem .35rem; text-decoration: none; font-size: .88rem;
  color: var(--c-text-muted); border: 1px solid transparent; border-radius: 2px;
}
.sprungleiste a:hover { border-color: var(--c-border-card); color: var(--c-akzent); }

/* Ein Sprungziel, dessen Abschnitt der Filter gerade ausblendet, fuehrt
   ins Leere: der Klick tut sichtbar nichts. Solche Ziele werden abgeblendet
   und aus der Tastaturreihenfolge genommen, statt den Leser raten zu lassen. */
.sprungleiste a.ohne-ziel, .bereichsleiste a.ohne-ziel {
  opacity: .3; pointer-events: none;
}

.bereichsleiste { display: flex; flex-wrap: wrap; gap: .4rem; }
.bereichsleiste a {
  text-decoration: none; font-size: .88rem; padding: .3rem .6rem;
  color: var(--c-text-muted); border: 1px solid var(--c-border-card); border-radius: 2px;
}
.bereichsleiste a span { color: var(--c-text-muted); opacity: .75; margin-left: .3rem; }
.bereichsleiste a:hover { color: var(--c-akzent); border-color: var(--c-akzent); }

.filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.filter select {
  font: inherit; font-size: .9rem; padding: .35rem .5rem; border-radius: 2px;
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); max-width: 100%;
}
.knopfgruppe { display: flex; gap: .3rem; flex-wrap: wrap; }
.knopf {
  font: inherit; font-size: .85rem; padding: .3rem .65rem; cursor: pointer;
  border-radius: 2px; color: var(--c-text-muted); background: var(--c-surface);
  border: 1px solid var(--c-border-card);
}
.knopf:hover { color: var(--c-akzent); border-color: var(--c-akzent); }
.knopf[aria-pressed="true"] {
  color: var(--c-text); border-color: var(--c-border-strong);
  background: var(--c-surface-muted); font-weight: 500;
}
.zaehler { margin: 0 0 0 auto; font-size: .85rem; color: var(--c-text-muted); }

/* --- Listen -------------------------------------------------------------- */
.abschnitt { margin-top: 1.5rem; }
.trenner {
  position: sticky; top: var(--kopfrand); z-index: 5; margin: 0;
  background: var(--c-bg); padding: .5rem 0 .35rem;
  border-bottom: 1px solid var(--c-border-card);
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-muted);
}
.liste { list-style: none; margin: 0; padding: 0; }
/* Zwischenueberschrift einer Sachgruppe. Sie steht in derselben Liste wie
   die Eintraege und traegt deshalb kein eigenes Raster. */
.sachgruppe {
  margin-top: 1.4rem; padding: .3rem .25rem;
  border-bottom: 1px solid var(--c-border-card);
  font-size: .74rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-text-muted);
}
.sachgruppe:first-child { margin-top: .4rem; }
.sachgruppe.aus { display: none; }
/* Bei aktiver Suche stehen die Treffer hier, nach Rang geordnet. Die
   Abschnitte darunter sind dann leer und blenden sich selbst aus --
   Buchstabentrenner und Sachbereiche haben in einem Suchergebnis nichts
   zu suchen. */
.treffer { margin-top: 1.5rem; }
.treffer[hidden] { display: none; }

.eintrag {
  display: grid;
  grid-template-columns: minmax(5.5rem, 8.5rem) 1fr auto;
  gap: .35rem 1rem; align-items: baseline;
  padding: .7rem .25rem; border-bottom: 1px solid var(--c-border);
}
.eintrag:hover { background: var(--c-surface); }
.eintrag:target {
  background: var(--c-surface);
  outline: 2px solid var(--c-akzent); outline-offset: 2px;
}

/* Sprungziele liegen sonst unter der klebenden Kopfzeile und dem ebenso
   klebenden Trenner. Der Abstand haelt beide frei -- sichtbar wird das
   erst beim Klick auf "geltende Fassung", der mitten in die Liste
   springt. */
.eintrag { scroll-margin-top: calc(var(--kopfrand) + 3.2rem); }
.trenner { scroll-margin-top: var(--kopfrand); }
.abk { font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.liste.nummeriert .eintrag {
  grid-template-columns: 4.2rem minmax(5rem, 8.5rem) 1fr auto;
}
.nummer {
  font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 500;
  color: var(--c-text); white-space: nowrap; letter-spacing: .01em;
}
.nummer-beispiel { font-variant-numeric: tabular-nums; color: var(--c-text); }
.trenner .bereichsziffer {
  display: inline-block; min-width: 1.4rem; margin-right: .5rem;
  color: var(--c-text); font-variant-numeric: tabular-nums;
}
.trenner .spanne {
  margin-left: .6rem; letter-spacing: 0; text-transform: none;
  font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums;
}
.abk.ohne { color: var(--c-text-muted); font-weight: 400; }
.text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.titel { overflow-wrap: anywhere; }
.fundstelle { text-decoration-thickness: 1px; text-underline-offset: .15em; }
.herkunft {
  align-self: flex-start; font-size: .72rem; color: var(--c-text-muted);
  border: 1px solid var(--c-border); border-radius: 2px; padding: 0 .3rem;
}
.merkmale { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.kennzeichen {
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .05rem .35rem; border-radius: 2px;
  color: var(--c-text); background: var(--c-surface-muted);
  border: 1px solid var(--c-border-card);
}
.notiz { font-size: .85rem; color: var(--c-text-muted); }
.anker {
  text-decoration: none; color: var(--c-text-muted); opacity: 0;
  font-size: .9rem; padding: 0 .25rem;
}
.eintrag:hover .anker, .anker:focus { opacity: 1; }
/* Ohne Hover -- auf dem Telefon -- waere der Direktlink dauerhaft
   unsichtbar. Gerade dort wird er gebraucht: er ist der Weg, eine
   Fundstelle weiterzugeben. */
@media (hover: none) {
  .anker { opacity: .5; }
}

/* --- Treffer aus dem anderen Bereich ------------------------------------- */
.fremdtreffer {
  margin-top: 1.25rem; padding: .9rem 1rem;
  background: var(--c-surface); border: 1px solid var(--c-border-card);
}
.fremdtreffer h2 {
  margin: 0 0 .5rem; font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted);
}
.fremdtreffer ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .4rem; }
.fremdtreffer .abk { display: inline-block; min-width: 5.5rem; }
.fremdtreffer li { font-size: .92rem; }
.fremdtreffer .herkunft { margin-left: .5rem; }

/* Gebuehrenpositionen. Wer eine Nummer eingibt, will genau eine Auskunft --
   der Block steht deshalb ueber der Liste, nicht darunter. */
.gebuehren {
  margin-top: 1.25rem; padding: .9rem 1rem;
  background: var(--c-surface); border: 1px solid var(--c-border-card);
}
.gebuehren[hidden] { display: none; }
.gebuehren h2 {
  margin: 0 0 .5rem; font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted);
}
.gebuehren ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .6rem; }
.gebuehren li { display: grid; grid-template-columns: 6rem 1fr auto; gap: .2rem .9rem; }
.gebuehren li.bereich {
  display: block; margin: .6rem 0 .1rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .02em; color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border); padding-bottom: .15rem;
}
.gebuehren li.bereich:first-child { margin-top: 0; }
.gebuehren .ermaessigt {
  list-style: none; margin: .25rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .1rem;
  font-size: .8rem; color: var(--c-text-muted);
}
.gebuehren .ermaessigt .satz {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--c-text); font-weight: 600;
}
.gebuehren .kode {
  display: block; font-size: .78rem; font-weight: 400;
  color: var(--c-text-muted); font-variant-numeric: tabular-nums;
}
.gebuehren .kostennr {
  font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap;
}
.gebuehren .was { min-width: 0; overflow-wrap: anywhere; font-size: .92rem; }
.gebuehren .woher { display: block; font-size: .8rem; color: var(--c-text-muted); }
.gebuehren .betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gebuehren .stand { margin: .7rem 0 0; font-size: .8rem; color: var(--c-text-muted); }
@media (max-width: 40rem) {
  .gebuehren li { grid-template-columns: 1fr auto; }
  .gebuehren .was { grid-column: 1 / -1; }
}

.leer {
  margin-top: 2rem; color: var(--c-text-muted);
  display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
}
.leer[hidden] { display: none; }
.leer p { margin: 0; }
.fremdtreffer .lage { margin: 0; color: var(--c-text-muted); font-size: .9rem; }
.fremdtreffer .mehr {
  margin: .6rem 0 0; font-size: .85rem; color: var(--c-text-muted);
}
.eintrag.aus, .abschnitt.aus, .karten.aus, .hinweiszeile.aus { display: none; }

/* --- Startseite ---------------------------------------------------------- */
.karten {
  margin-top: 2rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.karte {
  display: flex; flex-direction: column; gap: .35rem; text-decoration: none;
  padding: 1.25rem; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border-card);
  box-shadow: 0 1px 2px var(--c-schatten);
}
.karte:hover { border-color: var(--c-akzent); color: var(--c-text); }
.karte h2 { margin: 0; font-size: 1.15rem; font-weight: 500; }
.karte p { margin: 0; color: var(--c-text-muted); font-size: .92rem; }
.karte .zahl { font-variant-numeric: tabular-nums; }
.hinweiszeile { margin-top: 1.5rem; color: var(--c-text-muted); font-size: .9rem; }

/* --- Fuss ---------------------------------------------------------------- */
.fuss { margin-top: 3rem; background: var(--c-fuss-bg); color: var(--c-fuss-text); }
.fuss-innen {
  max-width: 68rem; margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem);
  display: flex; flex-direction: column; gap: .5rem;
}
.fuss-haupt { margin: 0; max-width: 46rem; }
.fuss-klein { margin: 0; font-size: .85rem; color: var(--c-fuss-muted); }
.fuss a { color: var(--c-fuss-akzent); }
.fuss a:hover, .fuss a:focus { color: var(--c-fuss-text); }
.fuss :focus-visible { outline-color: var(--c-focus-hell); }

@media (max-width: 52rem) {
  /* Die Kopfzeile bricht hier um und wird hoeher. Der Wert ist ein
     Schaetzwert fuer den Fall ohne JavaScript; liegt es vor, misst
     bestand.js die Hoehe und ueberschreibt ihn. */
  :root { --kopfhoehe: 6.5rem; }
}

@media (max-width: 40rem) {
  .eintrag, .liste.nummeriert .eintrag { grid-template-columns: 1fr auto; }
  .abk { grid-column: 1 / -1; }
  .nummer { grid-column: 1 / -1; }
  .trenner .spanne { display: none; }
  .zaehler { margin-left: 0; }

  /* Klebender Kopf plus klebender Trenner nahmen auf einem Telefon rund
     ein Viertel der Hoehe dauerhaft weg. Der Kopf wird deshalb hier
     schmaler: kleinere Wortmarke, engerer Umschalter, weniger Polster.
     Nichts verschwindet -- es wird nur dichter gesetzt. */
  :root { --kopfhoehe: 5.6rem; }
  .kopf-innen { padding: .45rem 1rem; gap: .5rem .75rem; }
  .wortmarke { width: 7rem; }
  .wechsel { padding: .3rem .5rem; font-size: .85rem; }
  .suchfeld { flex: 1 1 100%; order: 3; }
  .schema { order: 2; }
  .trenner { padding: .4rem 0 .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}