/* medienbewusst.de — V2.3
   ================================================================================
   GESTALTUNGSRICHTUNG B — NACHSCHLAGEWERK  (entschieden 2026-09-07)

   Die Seite gibt sich als Werk zu erkennen, nicht als Auftritt. Das ist keine
   Kosmetik, sondern folgt dem Inhaltsmodell: Plattformprofile, Spieleprofile und
   KI-Dienste sind Datensätze mit immer denselben Feldern, nicht Artikel. Also
   wird die Seite wie ein Nachschlagewerk gebaut und nicht wie ein Magazin.

   Woran man das erkennt:
     · Das Menü ist ein nummeriertes REGISTER, kein Kachelband.
     · Links steht eine MARGINALIENSPALTE - dort, wo im Fachbuch die Randnotiz
       steht: Einordnung, Prüfdatum, Herkunft.
     · Zählbares steht in TABELLEN, nicht in Kacheln.
     · Alles Zählbare läuft in Monospace, damit Ziffern untereinander stehen.
     · KEINE gleichförmigen Kachelraster. Genau daran war die vorherige Fassung
       als Vorlage erkennbar.

   Schriften: Archivo für Überschriften (kräftige Grotesk mit Eigencharakter),
   Inter für Fließtext, Roboto Mono für Ziffern und Marginalien. Alle selbst
   ausgeliefert, kein Abruf bei Dritten.
   ================================================================================

   FARBSYSTEM — vier Register, jedes mit genau einer Aufgabe:

       #f08800  Orange   MARKE       Registernummern, Akzentkanten, Marginalien
       #23527a  Blau     INTERAKTION Links, Knöpfe, aktive Zustände
       #4a7440  Grün     POSITIV     nur "Medien sinnvoll nutzen"
       #a8321e  Rot      AKUT        nur Soforthilfe und akute Seiten

   Warum Blau für Interaktion: Das Marken-Orange hat auf Weiß nur 2,55 Kontrast
   und kann keinen Text tragen. Vorher musste dafür ein abgedunkeltes Orange her,
   das bräunlich wirkte. Jetzt darf #f08800 in voller Leuchtkraft stehen, weil es
   nie Text ist. #23527a liegt bei H 208°, das Schiefergrau der Wortmarke bei
   H 202° - dieselbe Familie, nur gesättigt. Zu Orange 174°, praktisch komplementär.

   Warum Grün: Spec Kap. 4.7 verlangt, dass Medienbewusst keine reine Risiko- und
   Angstplattform wird. #4a7440 liegt bei H 108° (74° vom Orange) und trägt Text
   selbst - deshalb genügt EIN Grünton statt zweier.

   ⚠️ --marke ist SCHMUCKFARBE (2,55) und darf niemals Text tragen. Dafür --inter.
   ⚠️ Alle Textfarben sind gegen ALLE hier verwendeten Flächen gerechnet, nicht nur
   gegen Weiß - dort fällt der Kontrast um rund 0,8 Punkte. Wer eine neue Fläche
   einführt, rechnet nach. Schwächster Wert im System: 4,68.
   ================================================================================ */

/* --------------------------------------------------------------- Schriften */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/schrift/inter-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/schrift/inter-700.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/schrift/inter-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    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:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/schrift/inter-700-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    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:Archivo;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/schrift/archivo-700.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/schrift/archivo-700-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    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:Mono;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/schrift/roboto-mono-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Mono;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/schrift/roboto-mono-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    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}

/* ------------------------------------------------------------------- Basis */

:root{
  --tinte:#2c3a44;
  --tinte-leise:#5b6772;
  --papier:#ffffff;
  --papier-leise:#f6f7f8;
  --linie:#dfe4e8;
  --marke:#f08800;   --marke-hell:#fdeed8;
  /* Orange als SCHRIFT - nur für Mikrobeschriftungen (Registernummern,
     Marginalien-Überschriften, Schrittziffern), nie für Links oder Knöpfe.
     #f08800 hat auf Weiß nur 2,55; #9e5600 erreicht auf allen hellen Flächen
     mindestens 4,78. Auf der dunklen Fläche des aktiven Registereintrags trägt
     dagegen das volle #f08800 mit 4,58 - dort leuchtet die Marke. */
  --marke-schrift:#9e5600;
  /* Marken-Orange auf dunkler Fläche: #f08800 erreicht auf dem Interaktionsblau
     nur 3,21. Aufgehellt auf #fbc37a sind es 5,15. */
  --marke-auf-dunkel:#fbc37a;
  --inter:#23527a;   --inter-dunkel:#17395a;  --inter-hell:#e8eff5;
  --positiv:#4a7440; --positiv-hell:#eef4ec;
  --akut:#a8321e;    --akut-hell:#fdf2f0;     --akut-rand:#f0d9d3;
  --hinweis:#8a6100; --hinweis-hell:#fdf8ec;

  --breite:min(100% - 2rem, 46rem);
  --breite-weit:min(100% - 2.5rem, 72rem);
  /* Seitenränder als Innenabstand, nie als Außenabstand: eine Kurzschreibweise
     `margin: a b` an anderer Stelle kann `margin-inline: auto` stillschweigend
     zurückstellen und den Baustein an den linken Rand ziehen. */
  --rand:max(1rem, calc(50% - 23rem));
  --rand-weit:max(1.25rem, calc(50% - 36rem));
  --marginalie:11rem;
}

/* ⚠️ Seitenränder halten über `padding-inline`. Deshalb NIE `padding: a b` oder
   `margin: a b` auf einem Element, das einen Seitenrand trägt - stattdessen
   `padding-block:` bzw. `margin-block:`. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font:400 1.0625rem/1.62 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-feature-settings:"cv05" 1;
  color:var(--tinte);
  background:var(--papier);
  overflow-wrap:break-word;
}

.sprungmarke{position:absolute;left:-9999px;background:var(--inter);color:#fff;
  padding:.75rem 1rem;z-index:100}
.sprungmarke:focus{left:0;top:0}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------------------- Kopf */

/* Doppellinie unter dem Kopf: das Zeichen eines Titelblatts, nicht einer
   Werkzeugleiste. */
.kopf{border-bottom:3px double var(--tinte)}

.balken{
  padding-inline:var(--rand-weit); padding-block:1.15rem .95rem;
  display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;
}
.marke{display:inline-block;line-height:0}
.marke img{width:200px;max-width:100%;height:auto}
@media(max-width:34rem){.marke img{width:168px}}

.suchfeld{display:flex;border:2px solid var(--inter);flex:0 1 22rem;min-width:14rem}
.suchfeld input{border:0;padding:.55rem .8rem;font:inherit;font-size:.95rem;
  min-width:0;flex:1;outline:0;background:var(--papier);color:var(--tinte)}
.suchfeld input::placeholder{color:var(--tinte-leise)}
.suchfeld button{border:0;background:var(--inter);color:#fff;cursor:pointer;
  font:700 .9rem Inter,sans-serif;padding-inline:1.05rem}
.suchfeld button:hover{background:var(--inter-dunkel)}
.suchfeld-gross{max-width:34rem;margin-bottom:2rem}

/* Register: die Navigation gibt sich als Inhaltsverzeichnis zu erkennen. */
.register{padding-inline:var(--rand-weit);border-bottom:1px solid var(--linie)}
.register ol{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0}
.register li{border-right:1px solid var(--linie)}
.register li:last-child{border-right:0}
.register a{display:block;padding:.7rem 1.05rem;text-decoration:none;
  font-size:.925rem;color:var(--tinte-leise);line-height:1.35}
.register .nr{display:block;font:400 .72rem/1 Mono,ui-monospace,monospace;
  color:var(--marke-schrift);margin-bottom:.2rem;letter-spacing:.03em}
.register a:hover{background:var(--marke-hell);color:var(--tinte)}
.register a[aria-current]{background:var(--inter);color:#fff}
.register a[aria-current] .nr{color:var(--marke-auf-dunkel)}

/* Mobiles Klappmenue (08.10.2026). Schalter nur mobil; ohne Haken bleibt das
   Register zu. Kein JavaScript - das Kontrollkaestchen traegt den Zustand. */
.menue-schalter{position:absolute;opacity:0;pointer-events:none}
.menue-knopf{display:none}
@media(max-width:52rem){
  .menue-knopf{display:flex;align-items:center;gap:.65rem;cursor:pointer;
    padding-block:.7rem;padding-inline:var(--rand-weit);border-bottom:1px solid var(--linie);
    font-weight:700;color:var(--tinte)}
  .menue-zeichen,.menue-zeichen::before,.menue-zeichen::after{display:block;width:1.15rem;height:2px;
    background:var(--tinte);border-radius:1px}
  .menue-zeichen{position:relative}
  .menue-zeichen::before,.menue-zeichen::after{content:"";position:absolute;left:0}
  .menue-zeichen::before{top:-6px}.menue-zeichen::after{top:6px}
  .menue-hier{margin-left:auto;font-weight:400;font-size:.875rem;color:var(--tinte-leise)}
  .menue-schalter:focus-visible+.menue-knopf{outline:2px solid var(--inter);outline-offset:-2px}
  .menue-schalter:not(:checked)~.register{display:none}
  .menue-schalter:checked+.menue-knopf .menue-zeichen{background:transparent}
  .menue-schalter:checked+.menue-knopf .menue-zeichen::before{top:0;transform:rotate(45deg)}
  .menue-schalter:checked+.menue-knopf .menue-zeichen::after{top:0;transform:rotate(-45deg)}
  .register ol{display:grid;grid-template-columns:1fr 1fr}
  .register li{border-right:0;border-bottom:1px solid var(--linie)}
  .register a{display:flex;align-items:baseline;gap:.5rem;padding-block:.6rem;padding-inline:.25rem}
  .register .nr{display:inline;margin-bottom:0}
}

/* Soforthilfe-Band: findbar auf jeder Seite, im Ton ruhig. */
.soforthilfe-band{display:block;background:var(--akut-hell);color:var(--akut);
  border-bottom:1px solid var(--akut-rand);text-decoration:none;
  font-size:.925rem;padding-block:.55rem;padding-inline:var(--rand-weit)}
.soforthilfe-band strong{text-decoration:underline}

/* ------------------------------------------------------------- Satzspiegel */

main{width:100%;margin:0 0 3rem}
main>*{padding-inline:var(--rand)}
main.weit>*{padding-inline:var(--rand-weit)}

/* Abschnitt mit Marginalienspalte - das Rückgrat der Richtung B. */
.abschnitt{
  display:grid;grid-template-columns:var(--marginalie) 1fr;gap:2.1rem;
  padding-block:2rem;border-bottom:1px solid var(--linie);align-items:start;
}
@media(max-width:56rem){
  .abschnitt{grid-template-columns:1fr;gap:.7rem}
}
.marginalie{font:400 .8125rem/1.6 Mono,ui-monospace,monospace;
  color:var(--tinte-leise);padding-top:.35rem}
.marginalie b{display:block;color:var(--marke-schrift);font-weight:400;margin-bottom:.3rem}

h1{font:700 clamp(1.75rem,1.1rem+2.1vw,2.85rem)/1.1 Archivo,system-ui,sans-serif;
  letter-spacing:-.03em;margin:0 0 .7rem;color:var(--tinte);text-wrap:balance}
h2{font:700 1.375rem/1.25 Archivo,system-ui,sans-serif;letter-spacing:-.02em;
  margin:0 0 .8rem;color:var(--tinte)}
h3{font:700 1.075rem/1.3 Archivo,system-ui,sans-serif;margin:1.6rem 0 .4rem}
h2[id],h3[id],h4[id]{scroll-margin-top:1.5rem}
/* Abschnittsueberschriften im Inhalt deutlicher (Thomas, 08.10.2026: „die
   Ueberschriften der Abschnitte muessen deutlicher werden“): groesser, mehr Luft
   davor und ein kurzer Markenbalken als Anker fuers Auge. --marke nur als
   Schmuck, nie als Textfarbe (Kontrast 2,55). */
main h2{font-size:clamp(1.5rem,1.25rem + .6vw,1.8rem);line-height:1.2;margin-top:2.6rem}
main h2::before{content:"";display:block;width:2.75rem;height:4px;border-radius:2px;
  background:var(--marke);margin-bottom:.6rem}
main h3{font-size:1.2rem;color:var(--tinte);margin-top:1.9rem}

p,ul,ol{margin:0 0 1.05rem}
a{color:var(--inter)}
.untertitel{font-size:1.15rem;color:var(--tinte-leise);margin-bottom:.9rem}
.kurzfassung{font-size:1.1rem;line-height:1.55;max-width:66ch}
.einstieg-text{max-width:64ch;color:var(--tinte-leise);margin-bottom:1.3rem}

/* Titelblock der Startseite */
.titelblock{padding-block:2.6rem 1.9rem;border-bottom:1px solid var(--linie)}
.titelblock h1{max-width:21ch}
.titelblock p{margin:0;max-width:66ch;font-size:1.09rem;color:var(--tinte-leise)}

/* Kennzahlen: Monospace, damit Ziffern untereinander stehen. Die Werte kommen
   aus der Datenbank, nicht aus dem Template - sonst veralten sie still. */
.kennzahlen{display:flex;gap:2.3rem;flex-wrap:wrap;margin-top:1.6rem;
  font:400 .8125rem/1.4 Mono,ui-monospace,monospace;color:var(--tinte-leise)}
.kennzahlen b{display:block;font:400 1.4rem/1.1 Mono,ui-monospace,monospace;
  color:var(--tinte);margin-bottom:.15rem}

/* Brotkrumen */
.brotkrumen{padding-inline:var(--rand-weit);margin-block:.9rem 0;
  font:400 .8125rem/1.5 Mono,ui-monospace,monospace}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.brotkrumen li+li::before{content:"/ ";color:var(--tinte-leise)}
.brotkrumen a{color:var(--tinte-leise)}
.brotkrumen [aria-current]{color:var(--tinte)}

/* --------------------------------------------------------- Eintragslisten */
/* Keine Kacheln: zweispaltige Liste mit Trennlinien, wie Stichworte im Werk. */

.eintraege{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem;margin:0;padding:0;list-style:none}
@media(max-width:52rem){.eintraege{grid-template-columns:1fr}}
.eintrag{border-top:1px solid var(--linie);padding-block:.8rem;margin:0}
.eintrag a{text-decoration:none;font:700 1.05rem/1.35 Inter,sans-serif;color:var(--inter)}
.eintrag a:hover{text-decoration:underline;text-underline-offset:2px}
.eintrag-unter{display:block;margin-top:.15rem;color:var(--tinte-leise);
  font-size:.9375rem;line-height:1.5}
/* Nummerierte Aufzaehlung in der Eintragsliste - gleiche Ziffernsprache
   wie im Register und in den Schrittfolgen. */
.tipp-nr{font:400 .8125rem Mono,ui-monospace,monospace;color:var(--marke-schrift);
  margin-right:.5rem}

/* Werktabelle */
.werktabelle{border-collapse:collapse;width:100%;max-width:52rem}
.werktabelle th{text-align:left;font:400 .75rem/1.4 Mono,ui-monospace,monospace;
  color:var(--tinte-leise);text-transform:uppercase;letter-spacing:.06em;
  padding:0 .9rem .55rem 0;border-bottom:2px solid var(--tinte)}
.werktabelle td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--linie);
  font-size:.975rem;vertical-align:top}
.werktabelle td:first-child{font:400 .925rem Mono,ui-monospace,monospace;
  color:var(--tinte);white-space:nowrap}
.werktabelle a{color:var(--inter);font-weight:700;text-decoration:none}
.werktabelle a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ Akut */
/* Ausgefüllter Block, unmissverständlich - der Warnkasten des Handbuchs. */

.akutblock{background:var(--akut);color:#fff;padding:1.5rem 1.7rem}
.akutblock h2{color:#fff}
.akutblock p{margin:0 0 .9rem;max-width:64ch;font-size:1rem;line-height:1.55}
.akutschritte{display:flex;flex-wrap:wrap;gap:0;margin:0 0 1.05rem;padding:0;
  list-style:none;font:400 .8125rem/1.5 Mono,ui-monospace,monospace}
.akutschritte li{padding:.25rem .95rem .25rem 0}
.akutschritte li::before{content:"\2192  "}
.akutblock .knopf{background:#fff;color:var(--akut)}
.akutblock .knopf:hover{background:var(--akut-hell)}

.notfall{border-left:4px solid var(--akut);background:var(--akut-hell);
  padding:1rem 1.15rem;margin:0 0 1.8rem}
.notfall-titel{font-weight:700;color:var(--akut);margin-bottom:.4rem}
.notfall ul{list-style:none;padding:0;margin:0}
.notfall li+li{margin-top:.3rem}

/* --------------------------------------------------------------- Positiv */

.positiv-block{background:var(--positiv-hell);border-left:5px solid var(--positiv);
  padding:1.4rem 1.6rem}
.positiv-block>*{max-width:64ch}
.positiv-block h2{margin-top:0;color:var(--positiv)}
.positiv-block .knopf{background:var(--positiv)}
.positiv-block .knopf:hover{background:#3a5c33}
.positiv-tat{margin-bottom:0}

/* -------------------------------------------------------------- Bausteine */

.knopf{display:inline-block;padding:.65rem 1.25rem;background:var(--inter);
  color:#fff;text-decoration:none;font-weight:700;font-size:.95rem}
.knopf:hover{background:var(--inter-dunkel)}
.knopf-still{background:transparent;color:var(--inter);border:2px solid var(--linie)}
.knopf-akut{background:var(--akut)}

/* Begriffsliste: Begriff und Erklärung bleiben nebeneinander. */
.begriffe{margin:0;display:grid;grid-template-columns:13rem 1fr}
@media(max-width:52rem){.begriffe{grid-template-columns:1fr}}
.begriffe dt{font:700 .975rem/1.4 Inter,sans-serif;border-top:1px solid var(--linie);
  padding:.8rem 1.3rem .8rem 0;align-self:start}
.begriffe dd{margin:0;color:var(--tinte-leise);font-size:.9375rem;line-height:1.5;
  border-top:1px solid var(--linie);padding-block:.8rem}
@media(max-width:52rem){
  .begriffe dd{border-top:0;padding-top:0;padding-bottom:.8rem}
}

.hinweis{border-left:4px solid var(--marke);background:var(--papier-leise);
  padding:1rem 1.15rem;margin:1.4rem 0}
.hinweis p:last-child{margin-bottom:0}
.hinweis-titel{font-weight:700}
.hinweis-warnung{border-left-color:var(--hinweis);background:var(--hinweis-hell)}
.hinweis-akut{border-left-color:var(--akut);background:var(--akut-hell)}

.schritte{counter-reset:schritt;list-style:none;padding:0}
.schritte>li{counter-increment:schritt;position:relative;padding:0 0 1rem 2.6rem;margin:0}
.schritte>li::before{content:counter(schritt,decimal-leading-zero);
  position:absolute;left:0;top:.1rem;font:400 .875rem/1 Mono,ui-monospace,monospace;
  color:var(--marke-schrift)}
.schritt-titel{font-weight:700;margin-bottom:.15rem}

.tabelle-rollt{overflow-x:auto;margin:1.4rem 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--linie)}
th{background:var(--papier-leise);font-weight:700}

figure{margin:1.4rem 0}
/* Aufmacherabbildung: volle Spaltenbreite, klare Kante statt Schlagschatten -
   im Nachschlagewerk ist das eine Abbildung, kein Aufmacherbild. */
.aufmacher{margin:1.2rem 0 1.6rem}
.aufmacher img{width:100%;border:1px solid var(--linie)}
figure img{max-width:100%;height:auto;display:block}
figcaption{font:400 .8125rem/1.5 Mono,ui-monospace,monospace;
  color:var(--tinte-leise);margin-top:.4rem}

.faq details{border-bottom:1px solid var(--linie);padding-block:.8rem}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin:.55rem 0 0}

.werkzeug-karte{border:1px solid var(--linie);border-left:4px solid var(--inter);
  padding:1.15rem 1.3rem;margin:1.6rem 0;background:var(--papier-leise)}
.werkzeug-name{font-weight:700;font-size:1.05rem;margin-bottom:.25rem}

.quellen{margin-top:2.2rem;font-size:.9375rem}
.quellen h2{font-size:1.05rem}
.quellen ul{list-style:none;padding:0}
.quellen li{padding-block:.4rem;border-bottom:1px solid var(--linie)}

.pruefstand{margin-top:1.8rem;padding-top:.8rem;border-top:1px solid var(--linie);
  font:400 .8125rem/1.5 Mono,ui-monospace,monospace;color:var(--tinte-leise)}

.verwandt{margin-top:2.4rem}
.kartenliste{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem}
@media(max-width:52rem){.kartenliste{grid-template-columns:1fr}}
.kartenliste li{border-top:1px solid var(--linie);padding-block:.75rem}
.kartenliste a{font-weight:700;text-decoration:none}
.kartenliste a:hover{text-decoration:underline}
.karte-unter{display:block;margin-top:.15rem;font-size:.9375rem;color:var(--tinte-leise)}

.alterswahl{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.alterswahl a{display:inline-block;padding:.6rem 1.1rem;text-decoration:none;
  border:2px solid var(--linie);color:var(--tinte);font-weight:700;font-size:.95rem}
.alterswahl a:hover{border-color:var(--inter);background:var(--inter);color:#fff}

.trefferzahl{font:400 .8125rem/1.5 Mono,ui-monospace,monospace;color:var(--tinte-leise)}

/* --------------------------------------------------------------- Akutseiten */

body.akut .register{display:none}

/* -------------------------------------------------------------------- Fuß */

.fuss{border-top:3px double var(--tinte);padding-block:1.6rem 2.6rem;margin-top:2.5rem}
.fuss nav,.fuss-satz{padding-inline:var(--rand-weit)}
.fuss ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding:0;margin:0 0 .9rem}
.fuss a{color:var(--tinte-leise);font-size:.925rem}
.fuss-satz{color:var(--tinte-leise);margin-block:0;
  font:400 .8125rem/1.6 Mono,ui-monospace,monospace}

/* ------------------------------------------------------------------ Fokus */

:where(a,button,input,summary,details):focus-visible{
  outline:3px solid var(--inter);outline-offset:2px}

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

/* ------------------------------------------------------------------ Werkzeuge */
/* Der Handy-Fuehrerschein ist die staerkste Einzelseite (1.932 Klicks). Er wird
   auf dem Handy ausgefuellt, oft von einem Kind - deshalb grosse Trefferflaechen
   und kein Layout, das bei 320 Pixeln zerfaellt. */
/* ⚠️ KEIN max-width hier. Dieses Element ist direktes Kind von `main` und traegt
   damit den Seitenrand als Innenabstand (`main>*{padding-inline:var(--rand)}`).
   Bei `box-sizing:border-box` zieht `max-width` diesen Rand mit ab: aus
   `max-width:38rem` wurden bei einem 1100px breiten Fenster 608px minus zweimal
   182px, also 244px Textbreite - die Einleitung stand als schmale Spalte neben
   viel Leerraum, waehrend alles andere die volle Breite nutzte. Der Container ist
   ohnehin auf 46rem begrenzt (`--rand`), das ist eine gute Zeilenlaenge.
   Gemessen im Bild, nicht im Quelltext - im Quelltext sah die Regel richtig aus. */
.werkzeug-einleitung{font-size:1.05rem;color:var(--tinte-leise)}
.werkzeug-formular{display:flex;flex-direction:column;gap:1.75rem;margin-block-start:2rem}
.frage{border:0;border-inline-start:3px solid var(--linie);padding:0 0 0 1.1rem;margin:0}
.frage legend{font-weight:700;padding:0;margin-block-end:.7rem;line-height:1.35}
.frage-nr{display:inline-block;min-width:1.6rem;color:var(--marke-schrift);
  font-family:"Roboto Mono",ui-monospace,monospace;font-size:.85em}
.antwort{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .7rem;
  border:1px solid var(--linie);border-radius:4px;margin-block-end:.4rem;cursor:pointer;
  line-height:1.4}
.antwort:hover{background:var(--inter-hell);border-color:var(--inter)}
.antwort input{margin-block-start:.25rem;flex:none;width:1.1rem;height:1.1rem;
  accent-color:var(--inter)}
.antwort:focus-within{outline:2px solid var(--inter);outline-offset:1px}
.knopf-gross{align-self:flex-start;background:var(--inter);color:#fff;border:0;
  border-radius:4px;padding:.75rem 1.6rem;font:inherit;font-weight:700;cursor:pointer}
.knopf-gross:hover{background:var(--inter-dunkel)}
.werkzeug-fussnote{font-size:.85rem;color:var(--tinte-leise);max-width:34rem;margin:0}

/* ---- Ergebnis ---- */
.urkunde{border:2px solid var(--linie);border-radius:6px;padding:1.75rem 1.5rem;
  text-align:center;margin-block:1.5rem}
.urkunde-bestanden-mit-auszeichnung,.urkunde-bestanden{border-color:var(--positiv);
  background:var(--positiv-hell)}
.urkunde-fast{border-color:var(--hinweis);background:var(--hinweis-hell)}
.urkunde-nochmal{border-color:var(--linie);background:var(--papier-leise)}
.urkunde-punkte{font-size:1.4rem;margin:0 0 .6rem}
.urkunde-punkte strong{font-family:"Roboto Mono",ui-monospace,monospace;font-size:1.8rem}
.urkunde-text{margin:0 auto;max-width:34rem}
/* Der Vorname ist das Stueck, wegen dem die Urkunde aufgehaengt wird - deshalb
   steht er gross und nicht in der Fusszeile. Freiwillig: fehlt er, entfaellt das
   Element ganz und der Abstand entsteht nicht. */
/* ── Alterseinordnung eines Werks ─────────────────────────────────────────────
   Zwei Felder nebeneinander, auf schmalen Bildschirmen untereinander. Die
   Trennung ist die Aussage: links das Gesetz, rechts die Fachleute. Deshalb
   KEIN gemeinsamer Rahmen um beide Werte - wer sie in einer Zeile liest, hält
   sie für dasselbe.
   ⚠️ Kein `padding`/`margin` in Kurzschreibweise auf `.einordnung` - der
   Seitenrand haengt an `main > *` und wuerde still zurueckgesetzt. */
.einordnung{border:1px solid var(--linie);border-radius:8px;
  padding-block:1.1rem;padding-inline:1.2rem;margin-block:1.6rem;
  background:var(--papier-leise)}
.einordnung-werk{font-family:Archivo,Inter,sans-serif;font-weight:700;
  font-size:1.05rem;margin:0 0 .9rem}
.einordnung-art{font-family:"Roboto Mono",ui-monospace,monospace;font-weight:400;
  font-size:.75rem;color:var(--tinte-leise);letter-spacing:.06em;
  text-transform:uppercase;margin-inline-start:.4rem}
.einordnung-paar{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(max-width:38rem){.einordnung-paar{grid-template-columns:1fr}}
.einordnung-teil{background:var(--papier);border-radius:6px;
  padding-block:.85rem;padding-inline:.95rem;
  border-inline-start:4px solid var(--linie)}
.einordnung-recht{border-inline-start-color:var(--inter)}
.einordnung-paed.ampel-gruen{border-inline-start-color:var(--positiv)}
.einordnung-paed.ampel-gelb{border-inline-start-color:var(--hinweis)}
.einordnung-paed.ampel-rot{border-inline-start-color:var(--akut)}
.einordnung-quelle{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinte-leise);margin:0 0 .3rem}
.einordnung-wert{font-family:Archivo,Inter,sans-serif;font-weight:700;
  font-size:1.1rem;line-height:1.25;margin:0}
.einordnung-leer{color:var(--tinte-leise);font-weight:400}
.einordnung-bei,.einordnung-was{font-size:.8rem;color:var(--tinte-leise);
  margin:.35rem 0 0}
.einordnung-meint{font-size:.9rem;margin:.5rem 0 0}
.einordnung-schluss{margin:1rem 0 0}
.einordnung-stand{font-size:.78rem;color:var(--tinte-leise);margin:.7rem 0 0}
@media print{
  .einordnung{border:2px solid #000;page-break-inside:avoid;break-inside:avoid;
    background:none}
  .einordnung-teil{border-inline-start-color:#000;background:none}
}

.urkunde-name{font-family:Archivo,Inter,sans-serif;font-weight:700;
  font-size:1.6rem;line-height:1.2;margin-block:1.1rem 0}
.urkunde-fuss{font-size:.8rem;color:var(--tinte-leise);margin-block-start:1.2rem;
  letter-spacing:.04em}

/* Namensfeld im Fragebogen. Kein Pflichtfeld und optisch zurueckgenommen, damit
   es nicht wie eine Anmeldung wirkt - genau der Verdacht, den die Seite mit
   "kostenlos, ohne Anmeldung" ausraeumt. */
.frage-name input{width:100%;max-width:18rem;font:inherit;padding:.55rem .7rem;
  border:1px solid var(--linie);border-radius:6px;background:var(--papier);
  color:var(--tinte)}
.frage-hinweis{font-size:.85rem;color:var(--tinte-leise);margin-block:.5rem 0}
/* Nur fuer Vorleseprogramme: das sichtbare Label steckt im Platzhalter, die
   Beschriftung braucht es trotzdem. `display:none` waere hier falsch - dann
   liest es niemand vor. */
.nur-schirm{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.erklaerung{border-inline-start:3px solid var(--linie);padding-inline-start:1.1rem;
  margin-block-end:1.4rem}
.erklaerung.richtig{border-color:var(--positiv)}
.erklaerung.falsch{border-color:var(--akut)}
.erklaerung h3{font-size:1rem;margin:0 0 .35rem;line-height:1.35}
.loesung{font-weight:700;margin:0 0 .35rem}
.erklaerung.falsch .loesung{color:var(--akut)}
.knopf-still{background:transparent;color:var(--inter);border:1px solid var(--linie)}
@media print{
  .nur-druck-aus,.kopf,.fuss,#erklaerungen,.erklaerung,.frage-name{display:none}
  .urkunde{border-width:3px;page-break-inside:avoid}
  /* Sparmodus vieler Drucker verschluckt hellen Text - der Name muss stehen. */
  .urkunde-name{color:#000}
}

/* Themenbereiche einer Themenwelt.
   Die Auflistung kommt aus der Datenbank (inhalt_hubinhalt): vorher standen die
   Bereiche als toter Text im Hub-Koerper, und 198 von 208 Seiten waren Waisen.
   Kein padding/margin in Kurzschreibweise - die Seitenraender halten ueber
   `main > *` und wuerden hier still zurueckgesetzt (siehe pruefe_stylesheet.sh). */
.hubinhalt{margin-top:2.8rem}
.themenbereich{margin-top:1.8rem}
.themenbereich h3{margin-bottom:.35rem;padding-bottom:.4rem;font-size:1.25rem;
  color:var(--tinte);border-bottom:2px solid var(--tinte)}
/* Keine doppelte Linie unter der Bereichsueberschrift: die erste Karte jeder
   Spalte braucht ihren oberen Strich nicht (Hinweis Thomas 08.10.2026). */
.themenbereich .kartenliste li:nth-child(-n+2){border-top:0}
@media(max-width:52rem){.themenbereich .kartenliste li:nth-child(2){border-top:1px solid var(--linie)}}
.in-arbeit{text-transform:none;letter-spacing:0;font-weight:400;font-size:.875rem;
  color:var(--tinte-leise);opacity:.75}

/* ── Soforthilfe-Navigator ───────────────────────────────────────────────────
   Farben ausschliesslich aus den Token oben, damit die Kontraste gemessen
   bleiben. Kein padding/margin in Kurzschreibweise auf den Bloecken - die
   Seitenraender halten ueber `main > *` (siehe pruefe_stylesheet.sh).
   Der farbige Akzentrand laeuft gerade aus, biegt also nicht in die Rundung
   (sonst entsteht der 3D-Effekt). */

/* Notruf. Steht ganz oben und muss ohne Lesen auffallen. */
.notruf{background:var(--akut-hell);border:1px solid var(--akut-rand);
  border-left:5px solid var(--akut);border-radius:0 6px 6px 0;
  padding-block:.9rem;padding-inline:1.1rem;margin-block:1.4rem}
.notruf p{margin-block:.2rem;color:var(--tinte)}
.notruf strong{color:var(--akut)}

/* Einstufung: eine Marke und ein Satz. Die Farbe kommt aus der Dringlichkeit. */
.einstufung{border:1px solid var(--linie);border-left:5px solid var(--tinte-leise);
  border-radius:0 6px 6px 0;background:var(--papier-leise);
  padding-block:.9rem;padding-inline:1.1rem;margin-block:1.6rem}
.einstufung p{margin-block:.25rem}
.einstufung-marke{font-size:.8125rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
.einstufung-sofort{border-left-color:var(--akut);background:var(--akut-hell)}
.einstufung-sofort .einstufung-marke{color:var(--akut)}
.einstufung-heute{border-left-color:var(--hinweis);background:var(--hinweis-hell)}
.einstufung-heute .einstufung-marke{color:var(--hinweis)}
.einstufung-zeitnah{border-left-color:var(--inter);background:var(--inter-hell)}
.einstufung-zeitnah .einstufung-marke{color:var(--inter)}
.einstufung-ruhig{border-left-color:var(--positiv);background:var(--positiv-hell)}
.einstufung-ruhig .einstufung-marke{color:var(--positiv)}

/* Die Schritte. Die Ziffer ist der Inhalt: sie sagt, was zuerst kommt. */
.handlungsschritte{list-style:none;padding:0;counter-reset:schritt}
.handlungsschritte > li{counter-increment:schritt;position:relative;
  padding-left:2.9rem;padding-block:.9rem;border-top:1px solid var(--linie)}
.handlungsschritte > li::before{content:counter(schritt);position:absolute;left:0;top:.95rem;
  width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;
  background:var(--inter);color:var(--papier);font-weight:700;font-size:.9375rem;
  font-variant-numeric:tabular-nums}
.handlungsschritte h3{margin-block:0 .3rem;font-size:1.0625rem}
.handlungsschritte p{margin:0}

.hilfeliste{list-style:none;padding:0}
.hilfeliste li{border-top:1px solid var(--linie);padding-block:.7rem}
.hilfeliste b{display:block;color:var(--akut)}

.navigator-angaben{font-size:.9375rem;color:var(--tinte-leise);margin-block:.4rem 1.2rem}
.frage-hilfe{font-size:.9375rem;color:var(--tinte-leise);margin-block:.2rem .6rem}
.frage-freiwillig{font-size:.8125rem;font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--tinte-leise)}

/* Zwei zusaetzliche Toenungen fuer Hinweise, die nur der Navigator nutzt. */
.hinweis-recht{background:var(--inter-hell);border-color:var(--inter)}
.hinweis-alter{background:var(--papier-leise);border-color:var(--tinte-leise)}

/* ── Archiv ──────────────────────────────────────────────────────────────────
   Der Hinweis steht bewusst oben und deutlich, aber nicht alarmierend: er sagt
   „das ist alt", nicht „das ist falsch". Grauton statt Warnfarbe. */
.archivhinweis{background:var(--papier-leise);border-left:4px solid var(--tinte-leise);
  border-radius:0 6px 6px 0;font-size:.9375rem;line-height:1.5;color:var(--tinte-leise);
  padding-block:.7rem;padding-inline:1rem;margin-block:0 1.3rem}
.archivhinweis b{color:var(--tinte);text-transform:uppercase;font-size:.75rem;
  letter-spacing:.09em}
.archivhinweis a{color:var(--inter)}

.jahrliste{list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.6rem}
.jahrliste a{display:block;border:1px solid var(--linie);border-radius:6px;
  padding-block:.7rem;padding-inline:.9rem;text-decoration:none;color:var(--tinte)}
.jahrliste a:hover{border-color:var(--inter);background:var(--inter-hell)}
.jahrliste b{display:block;font-size:1.25rem;font-variant-numeric:tabular-nums}
.jahr-anzahl{font-size:.875rem;color:var(--tinte-leise)}

.jahrwechsel{display:flex;gap:1.2rem;flex-wrap:wrap;border-top:1px solid var(--linie);
  padding-block:1rem 0;margin-block:1.6rem 0}
.archivverweis{font-size:.9375rem;color:var(--tinte-leise);border-top:1px solid var(--linie);
  padding-block:.9rem 0;margin-block:1.6rem 0}

/* ── Checkliste und Anwendungsbeispiel ───────────────────────────────────────
   Die zwei Bausteine, die einen Ratgeber von einem Aufsatz unterscheiden.

   Handy zuerst: die Kaestchen sind 1,15rem gross und stehen mit `align-items:
   flex-start` oben am Text, damit sie bei zwei- und dreizeiligen Punkten nicht in
   die Mitte rutschen. `gap` statt Aussenabstaenden, weil das auf schmalen
   Bildschirmen nicht kollabiert.

   Kein padding/margin in Kurzschreibweise auf dem Block selbst: er ist direktes
   Kind von `<article>`, aber `main > *` legt den Seitenrand auf `<article>` -
   siehe die Falle in pruefe_stylesheet.sh [1] und [5]. */
.checkliste{border:1px solid var(--linie);border-radius:8px;background:var(--papier);
  padding-block:1.2rem;padding-inline:1.3rem;margin-block:2rem}
.checkliste h3{margin-block:0 .5rem;font-size:1.125rem;letter-spacing:-.01em}
.checkliste-einleitung{font-size:.9375rem;color:var(--tinte-leise);margin-block:0 1rem}
.checkliste ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;
  gap:.85rem}
.checkliste li{display:flex;align-items:flex-start;gap:.7rem;line-height:1.5}
.haken{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.15rem;border-radius:4px;
  border:2px solid var(--inter);background:var(--papier)}
.checkliste-dazu{display:block;font-size:.9375rem;color:var(--tinte-leise);
  margin-top:.15rem}
.checkliste-drucken{margin-block:1.2rem 0}

/* ── „Das Wichtigste in Kürze" ────────────────────────────────────────────
   Steht ganz oben und muss sich vom Fliesstext abheben, ohne wie ein
   Warnhinweis zu wirken. Deshalb Markenfarbe als Akzent, aber ruhige Flaeche.

   ⚠️ Der Akzentrand laeuft gerade aus: `border-radius:0 6px 6px 0`. Ein
   farbiger Rand, der in die Rundung biegt, erzeugt einen 3D-Effekt - gilt
   projektuebergreifend fuer alle Akzentkaesten. */
.kernaussagen{border-left:4px solid var(--marke);border-radius:0 6px 6px 0;
  background:var(--marke-hell);padding:.95rem 1.15rem;margin-block:1.4rem 1.8rem}
.kernaussagen-titel{font-size:.75rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--marke-schrift);margin-block:0 .5rem}
.kernaussagen ul{margin:0;padding-left:1.15rem}
.kernaussagen li{margin-bottom:.4rem;line-height:1.5}
.kernaussagen li:last-child{margin-bottom:0}

/* ── Redaktioneller Stand ────────────────────────────────────────────────
   Unauffaellig, aber nicht versteckt: Das ist ein Vertrauenssignal und kein
   Kleingedrucktes. Steht nach den Quellen, weil es sich auf sie bezieht. */
.stand{margin-top:2rem;padding-top:1.1rem;border-top:2px solid var(--tinte);
  font-size:.9375rem}
.stand h2{font-size:1.05rem;margin-block:0 .6rem}
.stand dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0}
.stand dl>div{display:contents}
.stand dt{color:var(--tinte-leise);font-size:.875rem}
.stand dd{margin:0}
.stand-dazu{margin-block:.9rem 0;color:var(--tinte-leise);font-size:.875rem;
  line-height:1.55}
@media (max-width:30rem){
  .stand dl{grid-template-columns:1fr;gap:0}
  .stand dt{margin-top:.5rem}
}

.beispiel{border-left:4px solid var(--positiv);border-radius:0 6px 6px 0;
  background:var(--positiv-hell);padding-block:.9rem;padding-inline:1.1rem;
  margin-block:1.6rem}
.beispiel-marke{font-size:.75rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--positiv);margin-block:0 .35rem}
.beispiel-lage{margin-block:0 .5rem}
.beispiel-folge{margin-block:0;font-weight:500}

@media print{
  /* Eine Checkliste soll man mitnehmen koennen: auf Papier bleibt sie zusammen,
     bekommt kein Kastenraster und die Kaestchen bleiben sichtbar (Randfarbe
     statt Fuellung, sonst verschluckt sie der Sparmodus vieler Drucker). */
  .checkliste{border:2px solid #000;page-break-inside:avoid;break-inside:avoid}
  .haken{border-color:#000}
  .beispiel{border-left-color:#000;background:none;page-break-inside:avoid}
  .verwandt,.hubinhalt,.suchfeld,.brotkrumen,.soforthilfe-band,.archivverweis{display:none}
}

/* ── Tabellen auf schmalen Bildschirmen stapeln ──────────────────────────────
   Eine dreispaltige Tabelle ist auf 390 Pixeln keine Tabelle mehr, sondern ein
   Gedrängel: „5 bis 7" bricht auf zwei Zeilen um. Der Rollbehaelter half nicht,
   weil `table{width:100%}` gar kein Ueberlaufen zulaesst.

   Unter 34rem wird daraus eine Liste beschrifteter Bloecke. Die Beschriftung
   kommt aus `data-spalte`, das der Renderer an jede Zelle schreibt - so steht
   sie da, wo sie hingehoert, statt einmal oben ausserhalb des Blickfelds. */
@media (max-width:34rem){
  .tabelle-rollt table,.tabelle-rollt thead,.tabelle-rollt tbody,
  .tabelle-rollt tr,.tabelle-rollt td{display:block;width:auto}
  .tabelle-rollt thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .tabelle-rollt tr{border:1px solid var(--linie);border-radius:6px;
    padding-block:.2rem;padding-inline:.8rem;margin-block:0 .7rem}
  .tabelle-rollt td{border:0;padding-block:.5rem;padding-inline:0}
  .tabelle-rollt td+td{border-top:1px solid var(--linie)}
  .tabelle-rollt td[data-spalte]::before{content:attr(data-spalte);display:block;
    font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--tinte-leise);margin-bottom:.15rem}
}

/* ── Inhaltsverzeichnis ──────────────────────────────────────────────────────
   Klare Linkliste mit Abstand und Trennern, nicht eng gestapelt: ein
   Verzeichnis, dessen Zeilen wie Ueberschriften aneinanderkleben, liest niemand.
   Auf dem Handy eine Spalte, ab 40rem zwei - damit es dort nicht den halben
   ersten Bildschirm frisst. */
.toc{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding-block:.9rem;margin-block:1.6rem}
.toc-titel{font-size:.6875rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinte-leise);margin-block:0 .5rem}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc li+li{border-top:1px solid var(--linie)}
.toc a{display:block;padding-block:.55rem;text-decoration:none;color:var(--inter);
  line-height:1.4}
.toc a::before{content:counter(toc,decimal-leading-zero);display:inline-block;
  min-width:2rem;color:var(--marke-schrift);font-variant-numeric:tabular-nums;
  font-size:.875rem}
.toc a:hover{text-decoration:underline}
@media(min-width:40rem){
  .toc ol{columns:2;column-gap:2.2rem}
  .toc li+li{border-top:0}
  .toc li{break-inside:avoid}
  .toc a{padding-block:.35rem}
}
@media print{.toc{display:none}}
.zitat-quelle{margin-top:.4rem;font-size:.875rem;color:var(--tinte-leise);font-style:normal}
.zitat-quelle::before{content:"— "}

/* ── Sinnbilder ──────────────────────────────────────────────────────────────
   Sie liegen optisch auf der Grundlinie des Textes und faerben sich mit
   (`currentColor` im SVG). Kein eigener Abstand nach unten, sonst verrutschen
   Zeilen mit und ohne Sinnbild gegeneinander. */
.sinnbild{vertical-align:-.18em;flex:0 0 auto}
/* Im Hinweiskasten steht das Zeichen oben links, nicht im Text - deshalb der
   Kasten als Gitter mit einer schmalen ersten Spalte. */
.hinweis,.notruf{display:grid;grid-template-columns:auto 1fr;gap:0 .7rem;
  align-items:start}
.hinweis-zeichen{grid-row:1/span 9;padding-top:.1rem}
.hinweis>b,.hinweis>p,.notruf>p{grid-column:2}
.hinweis-info .hinweis-zeichen{color:var(--inter)}
.hinweis-warnung .hinweis-zeichen{color:var(--hinweis)}
.hinweis-akut .hinweis-zeichen,.notruf .hinweis-zeichen{color:var(--akut)}
.hinweis-recht .hinweis-zeichen{color:var(--inter)}
.checkliste h3 .sinnbild{color:var(--inter)}
.beispiel-marke .sinnbild{vertical-align:-.22em}
.archivhinweis b .sinnbild{vertical-align:-.2em}

/* ── Steckbriefe: Plattform, Spiel, KI-Dienst, Gerät ─────────────────────────
   Die Altersangabe steht oben und getrennt, weil sie der Grund des Besuchs ist
   ("ab welchem alter" ist bei jedem Dienst die stärkste Anfrage: WhatsApp
   1.400/Monat, Minecraft 1.100). Und weil drei verschiedene Dinge nicht in eine
   Tabellenzeile gehören: die verbindliche USK-Kennzeichnung, das vertragliche
   Mindestalter des Anbieters und die pädagogische Einordnung.

   Der Akzentrand läuft an der Akzentseite gerade aus (`border-radius:0 6px 6px 0`)
   - biegt er in die Rundung, entsteht der 3D-Eindruck, den das Haus nicht will. */
.profil-alter{background:var(--inter-hell);border-left:4px solid var(--inter);
  border-radius:0 6px 6px 0;padding-block:.9rem 1rem;padding-inline:1.1rem;
  margin-block:1.4rem}
.profil-alter h2{margin-block:0 .6rem;font-size:1.0625rem}
.profil-alter-liste{margin:0}
.profil-alter-liste>div{padding-block:.5rem}
.profil-alter-liste>div+div{border-top:1px solid #cddbe6}
.profil-alter-liste dt{font-size:.6875rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--inter-dunkel);margin-block:0 .1rem}
.profil-alter-liste dd{margin:0}
/* Die Erläuterung ist der wichtige Teil - eine Zahl ohne sie wird falsch
   verstanden. Deshalb keine winzige Fussnotenschrift. */
.profil-alter-dazu{display:block;font-size:.9375rem;line-height:1.5;
  color:var(--tinte);margin-top:.15rem}

.steckbrief{margin-block:2rem}
.steckbrief h3{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-leise);margin-block:1.5rem .3rem}
.steckbrief-stand{font-size:.875rem;color:var(--tinte-leise);margin-block:0}
.steckbrief-tabelle{font-size:.9375rem}
/* Die Beschriftung links, der Wert rechts - und die Beschriftung schmal halten,
   damit der Wert nicht in eine Rinne gedrängt wird. */
.steckbrief-tabelle th[scope=row]{width:42%;background:transparent;
  font-weight:400;color:var(--tinte-leise);vertical-align:top}
.steckbrief-tabelle td{vertical-align:top}
.steckbrief-offen{background:var(--papier-leise);border-left:4px solid var(--tinte-leise);
  border-radius:0 6px 6px 0;font-size:.9375rem;line-height:1.55;
  padding-block:.7rem;padding-inline:1rem;margin-block:1.6rem 0}

@media (max-width:34rem){
  /* Auf schmalen Bildschirmen wird auch die Beschriftungsspalte zum Block -
     die allgemeine Regel fasst nur `td`, und ein `th[scope=row]` bliebe als
     Tabellenzelle stehen und würde die Zeile zerreissen. */
  .steckbrief-tabelle th[scope=row]{display:block;width:auto;border:0;
    padding-block:.5rem .05rem;padding-inline:0;font-size:.6875rem;
    letter-spacing:.08em;text-transform:uppercase}
  .steckbrief-tabelle td{border:0;padding-block:0 .5rem}
  /* Sonst stünde die Beschriftung zweimal da: einmal als Zeilenkopf und
     einmal aus `data-spalte`. */
  .steckbrief-tabelle td[data-spalte]::before{content:none}
  .profil-alter{padding-inline:.9rem}
}
/* Die Prämisse unter den Altersangaben: ohne sie liest man jede Staffelung als
   Schutz. Etwas kleiner als der Rest des Kastens, aber nicht kleingedruckt. */
.profil-alter-praemisse{font-size:.9375rem;line-height:1.5;color:var(--tinte);
  border-top:1px solid #cddbe6;padding-block:.6rem 0;margin-block:.6rem 0}

/* 404-Seite (05.10.2026): Text und Suche links, Bild rechts; mobil untereinander */
.fehler-kopf{display:grid;grid-template-columns:1fr 26rem;gap:2rem;align-items:center;margin-bottom:1.5rem}
.fehler-lead{font-size:1.1rem}
.fehler-bild{width:100%;height:auto;border-radius:.4rem}
@media(max-width:52rem){.fehler-kopf{grid-template-columns:1fr}.fehler-bild{order:-1}}