/* ============================================================
   WISSEN — Aussehen der Erklärseiten
   ============================================================
   Die Farbtoken stehen in token.css und sind aus der Landingpage
   geschnitten. Hier steht NUR, was eine Lese-Seite braucht.

   Unterschied zur Landingpage mit Absicht: Dort sind die
   Überschriften Plakat (bis 3,2rem, VERSALIEN). Hier wird
   gelesen, nicht überflogen — also ruhigere Größen, eine feste
   Zeilenbreite um 68 Zeichen und mehr Luft zwischen den
   Absätzen. Gleiche Farben, gleiche Schriften, anderer Takt.
   ============================================================ */

@import url("/wissen/token.css");

/* ---------- Ein eigener Ton fuers Kleingedruckte ----------
   Gemessen am 04.09.2026: --ink-faint liegt hell bei 3,99:1. Das reicht
   fuer Zierrat, nicht fuer Text, der gelesen werden soll (Grenze 4,5:1).
   Deshalb hier ein eigener Ton — in allen vier Ebenen, sonst kippt er
   beim Umschalten. Reihenfolge wie in der Landingpage: hell, System-
   dunkel, Schalter-dunkel, Schalter-hell zuletzt. */
:root{ --ink-leise:oklch(50% 0.016 252) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ink-leise:oklch(70% 0.016 252) }
}
:root[data-theme="dark"]{ --ink-leise:oklch(70% 0.016 252) }
:root[data-theme="light"]{ --ink-leise:oklch(50% 0.016 252) }
@supports not (color: oklch(50% 0 0)){
  :root{ --ink-leise:#606b76 }
  :root[data-theme="dark"]{ --ink-leise:#a4aeb8 }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Barlow",system-ui,sans-serif;
  font-size:17px;line-height:1.68;
  background:var(--sheet);color:var(--ink);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
@media (max-width:720px){
  .topnav .nur-breit{display:none}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ls-sonne{display:block}
  :root:not([data-theme="light"]) .ls-mond{display:none}
}

/* ---------- Der Lesebereich ----------
   68 Zeichen ist die Breite, bei der das Auge die nächste Zeile
   noch ohne Suchen findet. Alles, was breiter sein darf (Bilder,
   Tabellen, Kästen), tritt mit .breit aus der Spalte heraus. */
main{padding:0 0 5rem}
.lese{max-width:68ch;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.lese > * + *{margin-top:1.15rem}
.breit{max-width:940px;margin-left:auto;margin-right:auto}

/* ---------- Kopf des Beitrags ---------- */
.beitragskopf{background:var(--anthrazit);color:var(--on-dark);
  padding:clamp(2.4rem,6vw,4rem) 0 clamp(2rem,5vw,3.2rem);
  border-bottom:1px solid var(--line-dark)}
.beitragskopf .lese > * + *{margin-top:1rem}
.krume{font-family:"Fragment Mono",monospace;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--on-dark-soft)}
.krume a{color:var(--on-dark-soft);text-decoration:none;border-bottom:1px solid transparent}
.krume a:hover{color:var(--on-dark);border-bottom-color:var(--signal)}
h1{font-family:"Barlow Condensed",sans-serif;font-weight:800;
  font-size:clamp(2.1rem,5.2vw,3.3rem);line-height:1.04;text-wrap:balance;
  color:var(--on-dark)}
.vorspann{font-size:1.12rem;color:var(--on-dark-soft);max-width:60ch}
.stand{font-family:"Fragment Mono",monospace;font-size:.72rem;color:var(--on-dark-soft);
  border-top:1px solid var(--line-dark);padding-top:.9rem;margin-top:1.6rem !important}

/* ---------- Die kurze Antwort ----------
   Steht ganz oben, vor allem anderen. Wer nur diese drei Sätze
   liest, soll trotzdem richtig liegen. */
.kurz{background:var(--signal-bg);border-left:4px solid var(--signal);
  border-radius:0 var(--r) var(--r) 0;padding:1.4rem 1.6rem;margin:2.4rem auto 0}
.kurz h2{font-family:"Barlow Condensed",sans-serif;font-size:1.15rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--signal-deep);
  margin-bottom:.6rem;border:0;padding:0}
.kurz p + p{margin-top:.7rem}
.kurz strong{color:var(--ink)}

/* ---------- Inhaltsverzeichnis ---------- */
.inhalt{border:1px solid var(--line);border-radius:var(--r);
  background:var(--sheet-2);padding:1.2rem 1.5rem;margin-top:2.4rem}
.inhalt h2{font-family:"Fragment Mono",monospace;font-size:.72rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-leise);
  margin-bottom:.7rem;border:0;padding:0}
.inhalt ol{list-style:none;counter-reset:iv;display:grid;gap:.4rem}
.inhalt li{counter-increment:iv;display:flex;gap:.7rem;font-size:.98rem}
.inhalt li::before{content:counter(iv,decimal-leading-zero);
  font-family:"Fragment Mono",monospace;font-size:.75rem;color:var(--signal-deep);
  padding-top:.2rem;flex:none}
.inhalt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.inhalt a:hover{border-bottom-color:var(--signal)}

/* ---------- Fließtext ---------- */
h2{font-family:"Barlow Condensed",sans-serif;font-weight:800;
  font-size:clamp(1.55rem,3.2vw,2.1rem);line-height:1.1;text-wrap:balance;
  color:var(--ink);margin-top:3.2rem !important;padding-top:1.4rem;
  border-top:2px solid var(--line)}
h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.25rem;line-height:1.2;color:var(--ink);margin-top:2rem !important}
p{color:var(--ink-soft)}
p strong,li strong{color:var(--ink);font-weight:600}
a{color:var(--signal-deep);text-decoration:none;border-bottom:1px solid currentColor}
a:hover{color:var(--signal)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:3px}

ul.liste,ol.liste{padding-left:0;list-style:none;display:grid;gap:.6rem}
ul.liste li{position:relative;padding-left:1.5rem;color:var(--ink-soft)}
ul.liste li::before{content:"";position:absolute;left:.25rem;top:.72em;
  width:6px;height:6px;border-radius:2px;background:var(--signal)}
ol.liste{counter-reset:n}
ol.liste li{counter-increment:n;position:relative;padding-left:2rem;color:var(--ink-soft)}
ol.liste li::before{content:counter(n);position:absolute;left:0;top:0;
  font-family:"Fragment Mono",monospace;font-size:.8rem;color:var(--signal-deep)}

/* ---------- Fundstelle ----------
   Die Stelle im Rechtstext, auf die sich ein Absatz stützt.
   Bewusst technisch gesetzt: Es ist eine Angabe, kein Schmuck. */
.fundstelle{display:inline-block;font-family:"Fragment Mono",monospace;
  font-size:.72rem;color:var(--ink-leise);border:1px solid var(--line);
  border-radius:4px;padding:.1rem .45rem;white-space:nowrap}

/* ---------- Merkkasten ---------- */
.merk{border:1px solid var(--line);border-left:4px solid var(--blue);
  background:var(--blue-bg);border-radius:0 var(--r) var(--r) 0;
  padding:1.2rem 1.4rem;margin-top:1.8rem !important}
.merk .titel{font-family:"Barlow Condensed",sans-serif;font-weight:800;
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--blue);margin-bottom:.4rem}
.merk p{color:var(--ink)}
.merk.achtung{border-left-color:var(--risk);background:var(--risk-bg)}
.merk.achtung .titel{color:var(--risk)}

/* ---------- Tabelle ---------- */
.tabellenrahmen{overflow-x:auto;margin-top:1.8rem !important;
  border:1px solid var(--line);border-radius:var(--r);background:var(--sheet-2)}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:460px}
th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{font-family:"Fragment Mono",monospace;font-size:.7rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-leise);
  background:var(--sheet)}
tbody tr:last-child td{border-bottom:0}
td strong{color:var(--ink)}

/* ---------- Bild ---------- */
figure{margin-top:2.4rem !important}
figure img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line)}
figcaption{font-family:"Fragment Mono",monospace;font-size:.72rem;
  color:var(--ink-leise);margin-top:.6rem}

/* ---------- Prüfmarken ----------
   Solange <body class="pruefmodus"> gesetzt ist, wird jede Aussage
   markiert, die der Fachmann gegenlesen muss. Klasse am body
   entfernen = alle Marken verschwinden, der Text bleibt. */
.p{border-bottom:2px dotted transparent}
.pruefmodus .p{border-bottom-color:var(--warn);background:var(--warn-bg)}
.pruefmodus .p::after{content:"?";font-family:"Fragment Mono",monospace;
  font-size:.62rem;vertical-align:super;color:var(--warn);margin-left:.1em}
/* Gegengelesen: gruen statt gelb, Haken statt Fragezeichen.
   Ohne diese Unterscheidung waere der Pruefmodus nach dem ersten
   Durchgang wertlos — man saehe nur noch, WELCHE Saetze Rechtsaussagen
   sind, nicht mehr, welche davon noch offen sind. Die Marke bleibt also
   stehen und wechselt nur die Farbe. */
.pruefmodus .p.geprueft{border-bottom-color:var(--ok);background:var(--ok-bg)}
.pruefmodus .p.geprueft::after{content:"\2713";color:var(--ok)}

.pruefhinweis{display:none}
.pruefmodus .pruefhinweis{display:block;background:var(--warn-bg);
  border:1px dashed var(--warn);border-radius:var(--r);padding:1rem 1.2rem;
  margin-top:2.4rem !important;font-size:.92rem;color:var(--ink)}
.pruefhinweis b{color:var(--warn)}
.pruefmodus .pruefhinweis.fertig{background:var(--ok-bg);border-color:var(--ok)}
.pruefhinweis.fertig b{color:var(--ok)}

/* ---------- Abschluss: der eine ruhige Satz ---------- */
.abschluss{background:var(--anthrazit-2);color:var(--on-dark);border-radius:var(--r);
  padding:1.8rem 1.8rem;margin-top:3.2rem !important}
.abschluss .titel{font-family:"Barlow Condensed",sans-serif;font-weight:800;
  font-size:1.4rem;color:var(--on-dark);margin-bottom:.5rem}
.abschluss p{color:var(--on-dark-soft)}
.abschluss .btn{margin-top:1.2rem}

/* ---------- Weiterlesen ---------- */
.weiter{margin-top:3.2rem !important}
.weiter h2{margin-top:0 !important}
.karten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:1.4rem}
.karte{display:block;border:1px solid var(--line);border-radius:var(--r);
  background:var(--sheet-2);padding:1.2rem 1.3rem;text-decoration:none;
  transition:border-color .15s var(--ease),transform .15s var(--ease)}
.karte:hover{border-color:var(--signal);transform:translateY(-2px)}
.karte .k-titel{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.15rem;color:var(--ink);line-height:1.15}
.karte .k-text{font-size:.9rem;color:var(--ink-soft);margin-top:.4rem}

/* ---------- Haftungshinweis ---------- */
.haftung{font-size:.85rem;color:var(--ink-leise);border-top:1px solid var(--line);
  padding-top:1.2rem;margin-top:3.2rem !important}

/* ---------- Übersichtsseite ---------- */
.uebersicht{display:grid;gap:1.2rem;margin-top:2.4rem}
.eintrag{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--sheet-2);
  padding:1.4rem 1.6rem;text-decoration:none;
  transition:border-color .15s var(--ease),transform .15s var(--ease)}
.eintrag:hover{border-color:var(--signal);transform:translateY(-2px)}
.eintrag .nr{font-family:"Fragment Mono",monospace;font-size:.8rem;
  color:var(--signal-deep);padding-top:.35rem}
.eintrag .e-titel{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;
  font-size:1.4rem;line-height:1.1;color:var(--ink)}
.eintrag .e-frage{display:block;font-family:"Fragment Mono",monospace;font-size:.74rem;
  color:var(--ink-leise);margin-top:.5rem}
.eintrag .e-text{display:block;color:var(--ink-soft);margin-top:.5rem;font-size:.98rem}