/* pr-professor.de · Gestaltungsraster
   Farben und Schriften nach Bauplan Abschnitt 04.
   Eine Datei für die ganze Seite. Änderungen hier wirken überall. */

:root{
  --ground:#F6F8F4;
  --surface:#FFFFFF;
  --surface-2:#ECF0E9;
  --ink:#141D18;
  --muted:#55645C;
  --line:#D6DED3;
  --green:#1D5A41;
  --green-soft:#E3EDE6;
  --rust:#9A4526;
  --rust-soft:#F6E9E3;
  --amber:#7E6112;
  --amber-soft:#F7EEDA;

  --display:Constantia,"Palatino Linotype","Iowan Old Style",Palatino,Georgia,serif;
  --ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono","Liberation Mono",monospace;

  --shell:940px;
  --text:70ch;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C120F;
    --surface:#141C18;
    --surface-2:#1B2520;
    --ink:#E7EEE9;
    --muted:#9AAAA1;
    --line:#26332C;
    --green:#7BC4A1;
    --green-soft:#12241B;
    --rust:#E09270;
    --rust-soft:#2A1710;
    --amber:#D9B45E;
    --amber-soft:#26200E;
  }
}

:root[data-theme="dark"]{
  --ground:#0C120F;
  --surface:#141C18;
  --surface-2:#1B2520;
  --ink:#E7EEE9;
  --muted:#9AAAA1;
  --line:#26332C;
  --green:#7BC4A1;
  --green-soft:#12241B;
  --rust:#E09270;
  --rust-soft:#2A1710;
  --amber:#D9B45E;
  --amber-soft:#26200E;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px;}

/* ---------- Sprungmarke ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--green);color:var(--ground);
  font-weight:600;padding:12px 20px;
}
.skip:focus{left:0;}

/* ---------- Kopf ---------- */
header.top{border-bottom:1px solid var(--line);background:var(--surface);}
.top-inner{
  display:flex;align-items:baseline;justify-content:space-between;gap:22px;
  max-width:var(--shell);margin:0 auto;padding:16px 24px;flex-wrap:wrap;
}
.marke{
  font-family:var(--display);font-size:19px;color:var(--ink);
  text-decoration:none;white-space:nowrap;
}
.marke b{color:var(--green);font-weight:400;}
.top nav{display:flex;gap:20px;flex-wrap:wrap;}
.top nav a{
  font-size:15px;color:var(--muted);text-decoration:none;
}
.top nav a:hover,.top nav a[aria-current]{color:var(--green);text-decoration:underline;}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;margin:0;text-wrap:balance;}
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.08;}
h2{font-size:clamp(23px,3vw,31px);line-height:1.18;margin-top:52px;}
h3{font-size:20px;line-height:1.3;margin-top:32px;}

p{margin:0 0 18px;max-width:var(--text);}
a{color:var(--green);}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;}

main{padding:44px 0 80px;display:block;}

/* Antwortsatz: der Satz, den KI-Systeme herauslösen */
p.antwort{font-size:18.5px;}
p.antwort b{font-weight:650;}

/* Prüfzeile unter der H1 */
.pruefzeile{
  font-family:var(--mono);font-size:12.5px;line-height:1.6;
  color:var(--muted);margin:14px 0 34px;max-width:none;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.pruefzeile a{color:var(--muted);}

ul.liste,ol.liste{margin:0 0 18px;padding-left:22px;max-width:var(--text);display:flex;flex-direction:column;gap:9px;}
ul.liste li::marker,ol.liste li::marker{color:var(--green);}
ul.liste li,ol.liste li{color:var(--ink);}

/* ---------- Bilder ---------- */
figure{margin:34px 0;max-width:none;}
figure img{
  width:100%;height:auto;display:block;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
}
figcaption{
  font-size:14px;color:var(--muted);margin-top:10px;max-width:var(--text);
}
figcaption b{color:var(--ink);font-weight:600;}

/* ---------- Tabellen ---------- */
.tabelle{overflow-x:auto;border:1px solid var(--line);border-radius:3px;background:var(--surface);margin:0 0 22px;}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px;}
th,td{text-align:left;padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;}
thead th{
  border-top:none;background:var(--surface-2);font-family:var(--mono);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:400;
}
td.nr{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);font-family:var(--mono);font-size:13px;}

/* ---------- Kästen ---------- */
.hinweis{
  background:var(--green-soft);border-left:3px solid var(--green);
  border-radius:0 3px 3px 0;padding:18px 20px;margin:0 0 22px;
}
.hinweis p:last-child{margin-bottom:0;}

.warnung{
  background:var(--amber-soft);border-left:3px solid var(--amber);
  border-radius:0 3px 3px 0;padding:18px 20px;margin:0 0 22px;
}
.warnung p:last-child{margin-bottom:0;}

/* Vorher/Nachher */
.fehler{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;margin:0 0 22px;
}
.fehler > div{background:var(--surface);padding:16px 18px;}
.fehler .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:7px;
}
.fehler .vorher .k{color:var(--rust);}
.fehler .nachher .k{color:var(--green);}
.fehler p{margin:0;font-size:15.5px;}

pre{
  font-family:var(--mono);font-size:13px;line-height:1.65;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
  padding:16px 18px;overflow-x:auto;margin:0 0 22px;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;
}
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);border-radius:2px;padding:1px 5px;}

/* Platzhalter für die Werkzeuge aus Etappe 2 */
.werkzeug-platz{
  border:1px dashed var(--line);border-radius:3px;background:var(--surface-2);
  padding:26px 22px;margin:0 0 22px;text-align:center;color:var(--muted);
}
.werkzeug-platz b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px;font-family:var(--display);font-weight:400;}
.werkzeug-platz p{margin:0 auto;max-width:52ch;font-size:15px;}

/* Sichtbare Lücke in den Rechtstexten. Muss vor dem Livegang gefüllt werden. */
.fill{
  display:inline-block;font-size:14.5px;
  color:var(--amber);background:var(--amber-soft);
  border:1px dashed var(--amber);border-radius:2px;padding:2px 9px;
}

/* ---------- Weiterlesen ---------- */
.weiterlesen{
  margin-top:56px;padding-top:26px;border-top:1px solid var(--line);
}
.weiterlesen h2{font-size:19px;margin:0 0 16px;}
.weiterlesen ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.weiterlesen a{font-weight:600;text-decoration:none;}
.weiterlesen a:hover{text-decoration:underline;}
.weiterlesen span{display:block;color:var(--muted);font-size:15px;}

/* ---------- Fuß ---------- */
footer{
  border-top:1px solid var(--line);background:var(--surface);
  padding:38px 0 30px;font-size:15px;
}
.fuss-inner{
  max-width:var(--shell);margin:0 auto;padding:0 24px;
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
footer nav{display:flex;gap:18px;flex-wrap:wrap;}
footer a{color:var(--muted);text-decoration:none;}
footer a:hover{color:var(--green);text-decoration:underline;}
.fuss-marke{color:var(--muted);}

/* ---------- Druck ---------- */
@media print{
  header.top,.weiterlesen,footer nav{display:none;}
  body{background:#fff;color:#000;font-size:11pt;}
  a{color:#000;text-decoration:underline;}
  figure{break-inside:avoid;}
}

@media (max-width:640px){
  body{font-size:16.5px;}
  .fehler{grid-template-columns:1fr;}
  h2{margin-top:40px;}
}


/* --- Nachtrag: Tabellen laufen auf schmalen Geraeten nicht mehr ueber --- */
.tabelle-halter{
  overflow-x:auto;margin:26px 0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.tabelle-halter .tabelle{margin:0;min-width:34em;}
.tabelle-halter::after{
  content:"";display:block;
}

/* --- Sprungmenue am Seitenanfang --- */
.sprungmenue{
  margin:26px 0 34px;padding:16px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
}
.sprungmenue h2{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:700;
}
.sprungmenue ol{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:6px 20px;
}
.sprungmenue li{margin:0;}
.sprungmenue a{
  font-size:15px;text-decoration:none;
  border-bottom:1px solid transparent;
}
.sprungmenue a:hover{border-bottom-color:currentColor;}

/* --- kleiner Rechtsstandhinweis --- */
.hinweis-klein{
  font-size:14px;color:var(--muted);
  border-left:2px solid var(--line);padding-left:12px;margin:18px 0 26px;
}

/* --- Downloadliste --- */
.downloads{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px;}
.downloads li{
  border:1px solid var(--line);border-radius:4px;padding:14px 16px;
  background:var(--surface);
}
.downloads a{font-weight:600;text-decoration:none;}
.downloads a:hover{text-decoration:underline;}
.downloads span{display:block;font-size:15px;color:var(--muted);margin-top:3px;}
.downloads em{font-style:normal;font-size:13.5px;color:var(--muted);}

@media (max-width:640px){
  .sprungmenue ol{flex-direction:column;gap:8px;}
  .tabelle-halter .tabelle{min-width:30em;}
}

@media print{
  .sprungmenue{display:none;}
  .tabelle-halter{overflow:visible;}
  .tabelle-halter .tabelle{min-width:0;}
}

/* ================= Werkzeug: Pressemitteilungs-Prüfer ================= */
.werkzeug{
  margin:30px 0;padding:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
}
.werkzeug-titel{
  display:block;font-weight:700;font-size:17px;margin-bottom:4px;color:var(--ink);
}
.werkzeug-hilfe{font-size:14.5px;color:var(--muted);margin:0 0 12px;max-width:none;}
.werkzeug textarea{
  width:100%;box-sizing:border-box;
  font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink);background:var(--ground);
  border:1px solid var(--line);border-radius:4px;padding:12px 14px;resize:vertical;
}
.werkzeug textarea:focus{outline:2px solid var(--green);outline-offset:1px;}
.werkzeug-zaehler{font-size:13.5px;color:var(--muted);margin:8px 0 14px;max-width:none;}
.werkzeug-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:0;max-width:none;}
.knopf,.knopf-leise{
  font:600 15px/1 inherit;font-family:inherit;
  padding:12px 20px;border-radius:4px;cursor:pointer;border:1px solid var(--green);
}
.knopf{background:var(--green);color:var(--ground);}
.knopf:hover{filter:brightness(1.08);}
.knopf-leise{background:transparent;color:var(--green);}
.knopf-leise:hover{background:var(--surface-2);}
.knopf:focus-visible,.knopf-leise:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.werkzeug-ergebnis{margin:26px 0 34px;}
.werkzeug-ergebnis:focus{outline:none;}
.pm-kopf{padding:16px 18px;border-radius:5px;border:1px solid var(--line);margin-bottom:18px;}
.pm-kopf p{margin:0;max-width:none;}
.pm-kopf .pm-klein{font-size:13.5px;color:var(--muted);margin-top:6px;}
.pm-kopf.pm-gut{background:var(--green-soft,var(--surface-2));border-color:var(--green);}
.pm-kopf.pm-hinweis{background:var(--amber-soft);border-color:var(--amber);}
.pm-kopf.pm-fehler{background:var(--rust-soft,var(--surface-2));border-color:var(--rust,#9A4526);}

.pm-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.pm-liste li{
  display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
  padding:13px 16px;border:1px solid var(--line);border-radius:4px;background:var(--surface);
}
.pm-liste li p{margin:4px 0 0;font-size:15px;max-width:none;}
.pm-liste li em{
  font-style:normal;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-left:8px;
}
.pm-marke{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:15px;color:var(--ground);
}
.pm-liste li.pm-gut .pm-marke{background:var(--green);}
.pm-liste li.pm-hinweis .pm-marke{background:var(--amber);}
.pm-liste li.pm-fehler .pm-marke{background:var(--rust,#9A4526);}
.pm-liste li.pm-gut{opacity:.82;}
.pm-fund{
  font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--ground);border-left:2px solid var(--line);
  padding:8px 12px;margin-top:8px !important;border-radius:0 3px 3px 0;
  color:var(--muted);overflow-wrap:anywhere;
}

@media (max-width:640px){
  .werkzeug{padding:16px;}
  .werkzeug-knoepfe{flex-direction:column;}
  .knopf,.knopf-leise{width:100%;}
}

@media print{
  .werkzeug,.werkzeug-knoepfe,#pm-ohne-js{display:none;}
  .werkzeug-ergebnis{display:block !important;}
  .pm-liste li{break-inside:avoid;border:1px solid #999;}
  .pm-liste li.pm-gut{opacity:1;}
  .pm-marke{background:none !important;color:#000;border:1px solid #000;}
}


/* ================= Brotkrumen ================= */
.krumen{border-bottom:1px solid var(--line);background:var(--surface);}
.krumen ol{
  max-width:var(--shell);margin:0 auto;padding:9px 24px;
  list-style:none;display:flex;flex-wrap:wrap;gap:0 6px;
  font-size:14px;color:var(--muted);
}
.krumen li{display:flex;align-items:center;gap:6px;}
.krumen li+li::before{content:"\203A";color:var(--line);}
.krumen a{color:var(--muted);text-decoration:none;}
.krumen a:hover{color:var(--green);text-decoration:underline;}
.krumen li[aria-current]{color:var(--ink);}

/* ================= Einstiegskarten ================= */
.karten{
  list-style:none;margin:26px 0 30px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
}
.karte{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:4px;padding:20px 22px;margin:0;
}
.karte h3{margin:0 0 8px;font-size:18px;line-height:1.3;}
.karte h3 a{text-decoration:none;}
.karte h3 a::after{content:"";position:absolute;inset:0;}
.karte p{margin:0;font-size:15.5px;color:var(--muted);max-width:none;}
.karte .karte-fuss{margin-top:10px;font-size:14px;color:var(--muted);}
.karte:hover{border-color:var(--green);}
.karte:focus-within{outline:2px solid var(--green);outline-offset:2px;}

@media (min-width:900px){
  .karten{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
}
@media (max-width:640px){
  .krumen ol{padding:8px 18px;font-size:13.5px;}
  .karte{padding:16px 18px;}
}
@media print{
  .krumen{display:none;}
  .karte{border:1px solid #999;break-inside:avoid;}
  .karte h3 a::after{display:none;}
}


/* ================= Sprungziele und Anker ================= */
h2[id],h3[id],[id]{scroll-margin-top:24px;}
.sprung-anker{
  color:var(--muted);text-decoration:none;font-weight:400;
  opacity:0;margin-left:.35em;font-size:.72em;vertical-align:middle;
}
h2:hover .sprung-anker,.sprung-anker:focus{opacity:1;}
.sprung-anker:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}
@media print{
  .sprung-anker{display:none;}
}


/* ================= Mobil: Navigation, Tabellen, Klickflaechen ================= */
.tabelle-hinweis{
  display:none;font-size:13px;color:var(--muted);margin:6px 0 0;max-width:none;
}

@media (max-width:640px){
  /* Navigation bleibt in einer Zeile und laesst sich schieben */
  header.top nav{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0;padding:0;max-width:100%;
  }
  header.top nav::-webkit-scrollbar{display:none;}
  header.top nav ul,header.top nav{
    display:flex;flex-wrap:nowrap;gap:4px;white-space:nowrap;
  }
  header.top nav a{scroll-snap-align:start;}

  /* Tabellen werden zu Bloecken, die Spaltennamen stehen ueber dem Wert */
  .tabelle-halter{overflow-x:visible;}
  .tabelle-halter .tabelle{min-width:0;}
  .tabelle thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle td{display:block;width:auto;}
  .tabelle tr{
    border:1px solid var(--line);border-radius:4px;
    padding:12px 14px;margin-bottom:12px;background:var(--surface);
  }
  .tabelle td{border:0;padding:5px 0;}
  .tabelle td+td{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;}
  .tabelle td::before{
    content:attr(data-label);display:block;
    font-size:12px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);margin-bottom:2px;
  }
  .tabelle td:not([data-label])::before{content:none;}

  /* Klickflaechen auf mindestens 44 Pixel */
  header.top nav a{
    display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  }
  .weiterlesen a,.downloads a,.krumen a{
    display:inline-block;min-height:44px;line-height:44px;
  }
  .weiterlesen span,.downloads span,.downloads em{line-height:1.5;}
}

@media print{
  .tabelle-hinweis{display:none;}
}


/* ================= Autorenhinweis am Seitenende ================= */
.hinweis-autor{
  margin:40px 0 0;padding:16px 18px;
  border:1px solid var(--line);border-radius:4px;background:var(--surface);
}
.hinweis-autor p{margin:0;font-size:15px;color:var(--muted);max-width:none;}
.hinweis-autor a{color:var(--green);}

@media print{
  .hinweis-autor{border:0;padding:0;background:none;}
}

/* ================= Suche ================= */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.kopf-suche{display:flex;gap:6px;align-items:center;}
.kopf-suche input{
  font:inherit;font-size:14.5px;color:var(--ink);background:var(--ground);
  border:1px solid var(--line);border-radius:3px;padding:7px 10px;width:150px;
}
.kopf-suche input:focus{outline:2px solid var(--green);outline-offset:1px;}
.kopf-suche button{
  font:inherit;font-size:14.5px;color:var(--green);background:transparent;
  border:1px solid var(--line);border-radius:3px;padding:7px 12px;cursor:pointer;
}
.kopf-suche button:hover{border-color:var(--green);}

.suche-form{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  margin:26px 0 30px;padding:18px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
}
.suche-form label{flex:1 0 100%;font-weight:600;font-size:16px;}
.suche-form input{
  flex:1 1 260px;font:inherit;font-size:16px;color:var(--ink);background:var(--ground);
  border:1px solid var(--line);border-radius:4px;padding:11px 13px;
}
.suche-form input:focus{outline:2px solid var(--green);outline-offset:1px;}

.treffer{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.treffer li{
  border-left:2px solid var(--line);padding:2px 0 2px 14px;
}
.treffer li:hover{border-left-color:var(--green);}
.treffer li>a{font-weight:600;font-size:17px;text-decoration:none;}
.treffer li>a:hover{text-decoration:underline;}
.treffer p{margin:3px 0 0;font-size:15px;color:var(--muted);max-width:none;}
.treffer .treffer-weg{font-size:13px;}
mark{background:var(--amber-soft);color:var(--ink);padding:0 2px;border-radius:2px;}

#suche-register h3{margin-top:26px;}

@media (max-width:640px){
  .kopf-suche input{width:100%;min-width:0;}
  .kopf-suche{flex:1 1 100%;margin-top:8px;}
  .suche-form{padding:14px 16px;}
}
@media print{
  .kopf-suche,.suche-form{display:none;}
}

/* ================= Lange Adressen brechen um ================= */
main a,.krumen a,.treffer a{overflow-wrap:anywhere;}
main p,main li,main dd{overflow-wrap:break-word;}

@media (max-width:640px){
  header.top,header.top .top-inner{max-width:100%;overflow-x:clip;}
  body{overflow-x:clip;}
}


/* ================= Kopfbereich: eine Zeile, ruhig ================= */
.top-inner{align-items:center;gap:20px;flex-wrap:nowrap;}
.top-inner .marke{flex:0 0 auto;}
.top-inner nav{flex:1 1 auto;justify-content:flex-end;}
.kopf-suche{flex:0 0 auto;}
.kopf-suche input{
  width:112px;padding:6px 10px;font-size:14px;
  border-radius:999px;background:var(--ground);
  transition:width .16s ease;
}
.kopf-suche input:focus{width:186px;}
@media (prefers-reduced-motion:reduce){
  .kopf-suche input{transition:none;}
}

/* Der Sprunganker bleibt unsichtbar, bis man die Überschrift berührt */
.sprung-anker{
  opacity:0;font-size:.6em;color:var(--line);margin-left:.4em;
  text-decoration:none;font-weight:400;
}
h2:hover>.sprung-anker{opacity:1;color:var(--muted);}
.sprung-anker:focus-visible{opacity:1;color:var(--green);}
h2.ohne-anker>.sprung-anker{display:none;}

@media (max-width:900px){
  .top-inner{flex-wrap:wrap;}
  .top-inner nav{order:3;flex:1 1 100%;justify-content:flex-start;}
  .kopf-suche input{width:132px;}
}
@media (max-width:640px){
  .kopf-suche{flex:0 0 auto;margin-top:0;}
  .kopf-suche input{width:104px;}
  .kopf-suche input:focus{width:152px;}
}


/* ================= Bilder dienen dem Text, nicht umgekehrt ================= */
figure img{
  max-height:340px;width:100%;object-fit:cover;object-position:50% 35%;
  border:1px solid var(--line);border-radius:6px;
}
figcaption{
  font-family:var(--ui);font-size:14px;color:var(--muted);
  padding-top:8px;border-top:1px solid var(--line);margin-top:8px;max-width:var(--text);
}
figure.grafik{margin:32px 0;}
figure.grafik svg{width:100%;height:auto;display:block;}
figure.grafik img{max-height:none;border:0;}

@media (min-width:900px){
  figure.beiseite{float:right;width:300px;margin:4px 0 20px 28px;}
  figure.beiseite img{max-height:220px;}
  figure.beiseite figcaption{max-width:none;}
}

/* ================= Hero ================= */
.hero{margin:8px 0 26px;}
.hero h1{margin:0 0 10px;}
.hero .antwort{margin-bottom:0;}
.hero-bild{margin:0;}
.hero-bild img{
  max-height:300px;object-position:50% 20%;
  border:1px solid var(--line);border-radius:6px;
}
@media (min-width:800px){
  .hero{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;}
  .hero-bild img{max-height:210px;}
}

/* ================= Schnellstart ================= */
.schnellstart{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  margin:0 0 14px;
}
.ss-karte{
  display:flex;flex-direction:column;gap:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:15px 17px;text-decoration:none;color:var(--ink);
}
.ss-karte:hover{border-color:var(--green);background:var(--green-soft);}
.ss-karte:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.ss-zeit{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.ss-titel{font-weight:600;font-size:17px;line-height:1.25;}
.ss-sub{font-size:14.5px;color:var(--muted);line-height:1.4;}

.pruefstand{
  font-family:var(--mono);font-size:13px;color:var(--muted);
  margin:0 0 30px;max-width:none;
}

@media (max-width:520px){
  .schnellstart{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ss-karte{padding:12px 13px;}
  .ss-sub{display:none;}
}
@media print{
  .schnellstart,.pruefstand{display:none;}
  .hero{display:block;}
}

/* ================= Nachrichtenwert-Check ================= */
.nw-block{margin:0 0 34px;}
.nw-block h2{margin-top:0;}
.nw-unter{font-size:15px;color:var(--muted);margin:0 0 14px;max-width:var(--text);}
.nw-kasten{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;
  padding:26px 28px 24px;min-height:250px;overflow:hidden;
}
.nw-kasten::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line);
}
.nw-kasten:has(.nw-green)::before{background:var(--green);}
.nw-kasten:has(.nw-amber)::before{background:var(--amber);}
.nw-kasten:has(.nw-rust)::before{background:var(--rust);}

.nw-kopf{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.nw-balken{display:flex;gap:5px;}
.nw-strich{width:22px;height:4px;border-radius:2px;background:var(--line);}
.nw-strich.voll{background:var(--green);}
.nw-strich.jetzt{background:var(--ink);}
.nw-zaehler{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0;max-width:none;}

.nw-frage{
  font-family:var(--display);font-size:22px;line-height:1.3;
  margin:0 0 8px;color:var(--ink);
}
.nw-frage:focus{outline:none;}
.nw-hilfe{font-size:15px;color:var(--muted);margin:0 0 20px;max-width:var(--text);}

.nw-wahl{display:flex;gap:12px;margin:0 0 12px;}
.nw-knopf{
  font-family:var(--ui);font-size:17px;min-height:44px;padding:10px 30px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;cursor:pointer;flex:0 0 auto;
}
.nw-wahl .nw-knopf{flex:1 1 0;max-width:180px;}
.nw-knopf:hover{background:var(--green-soft);border-color:var(--green);}
.nw-knopf:focus-visible,.nw-leise:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.nw-neben{margin:0;max-width:none;}
.nw-leise{
  font-family:var(--ui);font-size:14.5px;color:var(--muted);
  background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;
}
.nw-leise+.nw-leise{margin-left:18px;}

.nw-ergebnis{border-radius:8px;padding:18px 20px;margin:0 0 22px;}
.nw-ergebnis.nw-green{background:var(--green-soft);border:1px solid var(--green);}
.nw-ergebnis.nw-amber{background:var(--amber-soft);border:1px solid var(--amber);}
.nw-ergebnis.nw-rust{background:var(--rust-soft);border:1px solid var(--rust);}
.nw-punkte{font-family:var(--mono);font-size:13px;color:var(--muted);margin:0 0 4px;max-width:none;}
.nw-titel{font-family:var(--display);font-size:23px;margin:0 0 6px;}
.nw-titel:focus{outline:none;}
.nw-ergebnis p{max-width:var(--text);margin:0 0 8px;}
.nw-cta{margin:12px 0 0 !important;display:flex;flex-wrap:wrap;gap:10px;}
.nw-weiter{
  display:inline-block;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:9px 16px;text-decoration:none;font-size:15px;min-height:44px;
  line-height:26px;
}
.nw-weiter:hover{border-color:var(--green);}

.nw-offen-titel{font-size:17px;margin:0 0 12px;}
.nw-offen{list-style:none;counter-reset:nw;margin:0 0 20px;padding:0;display:grid;gap:12px;}
.nw-offen li{
  counter-increment:nw;border-left:2px solid var(--rust);padding:2px 0 2px 14px;
}
.nw-offen li.nw-unklar{border-left-color:var(--amber);}
.nw-offen li b{font-size:16px;}
.nw-offen li p{margin:3px 0 0;font-size:15px;color:var(--muted);max-width:var(--text);}
.nw-aktionen{margin:0;max-width:none;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.nw-echo{font-size:14px;color:var(--green);}

.nw-statisch-fuss{font-size:15px;color:var(--muted);max-width:var(--text);}

@media (max-width:520px){
  .nw-kasten{padding:20px 18px;}
  .nw-wahl{flex-direction:column;}
  .nw-wahl .nw-knopf{max-width:none;}
  .nw-frage{font-size:19px;}
}
@media (prefers-reduced-motion:no-preference){
  .nw-frage,.nw-hilfe,.nw-wahl{animation:nw-auf .12s ease-out;}
  @keyframes nw-auf{from{opacity:.4}to{opacity:1}}
}
@media print{
  .nw-kopf,.nw-wahl,.nw-neben,.nw-aktionen,.nw-cta,.nw-statisch,.nw-statisch-fuss{display:none;}
  .nw-kasten{border:0;padding:0;min-height:0;}
  .nw-kasten::before{display:none;}
  .nw-ergebnis{border:1px solid #999;background:none;}
}

/* ================= Beschriftete Grafiken ================= */
.grafik-svg{width:100%;height:auto;display:block;}
.grafik-svg .s-text{font-family:var(--ui);font-size:15px;fill:var(--ink);}
.grafik-svg .s-fett{font-weight:600;}
.grafik-svg .s-klein{font-family:var(--ui);font-size:13px;fill:var(--muted);}
.grafik-svg .s-mono{font-family:var(--mono);font-size:13px;fill:var(--ink);}
.grafik-svg .s-kapitel{
  font-family:var(--ui);font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}
.grafik-svg .s-rust{fill:var(--rust);}
.grafik-svg .s-green{fill:var(--green);}
.grafik-svg .f-flaeche{fill:var(--surface);stroke:var(--line);stroke-width:1.25;}
.grafik-svg .f-hell{fill:var(--green-soft);stroke:var(--green);stroke-width:1.25;}
.grafik-svg .f-warn{fill:var(--rust-soft);stroke:var(--rust);stroke-width:1.25;}
.grafik-svg .f-linie{stroke:var(--line);stroke-width:1.25;}
.grafik-svg .f-zeile{stroke:var(--line);stroke-width:1;opacity:.8;}
.grafik-svg .f-fuehrung{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3;}
.grafik-svg .f-pfeil{stroke:var(--muted);stroke-width:1.25;stroke-linecap:round;}
.grafik-svg .f-spitze{fill:var(--muted);}
.grafik-svg a text{fill:var(--green);text-decoration:underline;}
.grafik-svg a:focus-visible text{outline:2px solid var(--green);}


/* Beispielmeldungen ueber dem Textfeld */
.werkzeug-proben{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:0 0 10px;max-width:none;font-size:14.5px;color:var(--muted);
}
.werkzeug-proben button{padding:7px 14px;font-size:14.5px;min-height:0;}
@media print{.werkzeug-proben{display:none;}}


/* ================= Illustrationen: begrenzen statt beschneiden ================= */
figure.aufmacher,figure.beiseite{max-width:510px;}
figure.aufmacher img,figure.beiseite img{
  max-height:none;object-fit:fill;height:auto;
}
figure.beiseite{max-width:420px;}

@media (min-width:900px){
  figure.beiseite{float:right;width:300px;max-width:300px;margin:4px 0 20px 28px;}
  figure.beiseite figcaption{max-width:none;font-size:13.5px;}
}
@media (max-width:899px){
  figure.beiseite{float:none;margin:26px 0;}
}
@media print{
  figure.beiseite{float:none;max-width:100%;}
}

/* ================= Portrait auf der Ueber-Seite =================
   Das Foto ist freigestellt und quadratisch. Es wird als Kreis gezeigt,
   damit der weisse Hintergrund nicht als Kasten auf dem Seitengrund steht.
   Die allgemeine Bildregel weiter oben schneidet auf 340 Pixel zu, das
   muss hier ausdruecklich abgeschaltet werden. */
figure.portrait{margin:4px 0 26px;max-width:230px;}
figure.portrait img{
  max-height:none;object-fit:fill;height:auto;
  border-radius:50%;background:var(--surface);
}
figure.portrait figcaption{
  border-top:0;padding-top:10px;margin-top:0;max-width:none;font-size:13.5px;
}

@media (min-width:900px){
  figure.portrait{float:right;width:230px;margin:0 0 20px 32px;}
}
@media (max-width:899px){
  figure.portrait{float:none;margin:22px 0;}
}

/* ================= Fragenuebersicht /faq/ ================= */
.fragen-quelle{
  font-size:14px;color:var(--muted);margin:-8px 0 24px;max-width:var(--text);
}
.fragen-quelle a{color:var(--green);}

/* Der Weg von einem Kapitel zur gesammelten Uebersicht */
.fragen-mehr{
  margin:28px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;max-width:var(--text);
}
.fragen-mehr a{color:var(--green);}

@media print{
  .fragen-mehr{display:none;}
}


/* ================= Kopfbild ueber der Ueberschrift =================
   Ein breites Band im Verhaeltnis 3:1, das jede Inhaltsseite eroeffnet.
   Anders als die Bilder im Text darf es einen ganzen Raum zeigen: auf
   dieser Breite waere leerer Papiergrund eine oede Flaeche. Die allgemeine
   Bildregel schneidet auf 340 Pixel zu, das muss hier abgeschaltet werden,
   sonst verliert das Band oben und unten seine Luft. */
figure.kopfband{margin:0 0 30px;max-width:none;}
figure.kopfband img{
  width:100%;height:auto;display:block;
  max-height:none;object-fit:fill;
  border:1px solid var(--line);border-radius:6px;
}
main > .shell > figure.kopfband + h1{margin-top:0;}

@media (max-width:600px){
  figure.kopfband{margin-bottom:22px;}
}


/* ================= Verweisbild neben "Weiterlesen" =================
   Die Hauptfigur steht links und weist nach rechts auf die Liste. Das Bild
   traegt keine Aussage, die im Text fehlen wuerde - es ist eine Geste. Auf
   schmalen Fenstern steht es deshalb ueber der Liste und wird kleiner, statt
   die Verweise zusammenzuquetschen.

   Die allgemeine Bildregel schneidet auf 340 Pixel zu, das muss weg, sonst
   wird die Figur angeschnitten. Der duenne Rahmen bleibt dagegen: Der
   cremefarbene Bildgrund setzt sich vom Seitengrund ohnehin als Rechteck ab,
   ohne Rahmen sieht das nach versehentlichem Fleck aus statt nach Bild. */
.weiterlesen .wl-innen{
  display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;
}
.weiterlesen .wl-bild{margin:0;max-width:none;}
.weiterlesen .wl-bild img{
  width:100%;height:auto;display:block;
  max-height:none;object-fit:fill;
  border:1px solid var(--line);border-radius:6px;
}

@media (max-width:719px){
  .weiterlesen .wl-innen{grid-template-columns:1fr;gap:18px;}
  .weiterlesen .wl-bild{max-width:260px;}
}


/* ================= Quellenangabe direkt am Fakt =================
   Steht unter dem Absatz, dessen Zahl sie belegt, und nennt Quelle,
   Stichprobe und Erhebungszeitraum. Bewusst klein und ruhig: Der Beleg soll
   nachpruefbar sein, nicht wichtig aussehen. Der gruene Strich links bindet
   ihn optisch an den Absatz darueber, damit klar ist, wozu er gehoert. */
.beleg{
  font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--muted);
  border-left:2px solid var(--green);padding:2px 0 2px 12px;
  margin:-10px 0 22px;max-width:var(--text);
}
.beleg a{color:var(--green);}

@media print{
  .beleg{border-left-color:#999;color:#444;}
}


/* ================= Die Grenze einer Aussage =================
   Geschwister von .beleg und bewusst gleich gebaut. Der gruene Strich sagt
   "hier ist die Quelle", der bernsteinfarbene sagt "hier hoert die Regel
   auf". Zusammen sind sie das, was ein Nachschlagewerk von einer Anleitung
   unterscheidet: Es sagt nicht nur, was zu tun ist, sondern wann nicht. */
.ausnahme{
  font-size:15px;line-height:1.6;color:var(--ink);
  border-left:3px solid var(--amber);background:var(--amber-soft);
  border-radius:0 3px 3px 0;padding:12px 16px;
  margin:0 0 22px;max-width:var(--text);
}
.ausnahme b{color:var(--ink);}

@media print{
  .ausnahme{background:none;border-left-color:#999;}
}