/* Gemeinsames Aussehen für Spiegeltest und Validierung */
:root{--paper:#F3F4F1;--card:#FFFFFF;--ink:#15181C;--muted:#5A6067;--rule:#D8DBD4;--accent:#B3261E;--band:#15181C;--band-ink:#EEF0EC;--band-muted:#A5ACB3;
  --hoch:#B3261E;--mittel:#9A5A00;--niedrig:#3B5873;--sauber:#2C6A3D;
  --f-display:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;--f-body:"Source Serif 4",Georgia,serif;--f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--paper:#111315;--card:#1A1D20;--ink:#E7E9E5;--muted:#9BA2A9;--rule:#2D3136;--accent:#F07A6F;--band:#0B0C0E;
  --hoch:#F07A6F;--mittel:#E3A85C;--niedrig:#93B3CF;--sauber:#7FC692;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--f-body)}
a{color:var(--accent)}
p{margin:0}
[hidden]{display:none!important}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wide{max-width:1120px;margin:0 auto}
.band{background:var(--band);color:var(--band-ink)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:38px;line-height:.8;letter-spacing:-.015em;padding-block:2px 7px}.logo-g{color:#EEF0EC}.logo-p{color:#F07A6F;font-style:italic;margin-left:.07em}
.topnav{display:flex;gap:22px;font:600 15px var(--f-display);letter-spacing:.03em}
.topnav a{color:var(--band-ink);text-decoration:none;padding-block:10px}
.topnav a:hover{color:#F07A6F}
.topnav .sprachwahl{border-left:1px solid #3A3F45;padding-left:18px}
.kopf{padding-block:16px 48px;display:flex;flex-direction:column;gap:18px;max-width:52em}
.kopf h1{font-weight:600;font-size:clamp(34px,6vw,52px);line-height:1.05;margin:0}
.kopf .lede{font-size:clamp(17px,2vw,19px);color:#DDE1DC}
.hinweis-en{font:13px/1.5 var(--f-mono);color:var(--band-muted);max-width:60ch}
main .wide{padding-block:28px 48px;display:flex;flex-direction:column;gap:28px}
h2.label{font:700 13px var(--f-display);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0}
.urteilbox{background:var(--card);border:1px solid var(--rule);border-left:5px solid var(--c,var(--rule));border-radius:8px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.urteilbox p{min-height:3.1em} /* Ergebnistext kommt nach dem Laden: Platz freihalten */
@media (max-width:760px){.urteilbox p{min-height:7.8em}}
.urteilbox b.gross{font:700 clamp(20px,3vw,26px)/1.2 var(--f-display)}
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.karten{grid-template-columns:1fr}}
.karte{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.karte .wert{font:700 38px/1 var(--f-display)}
.karte .was{font:600 15px var(--f-display)}
.karte p{font-size:15px;color:var(--muted)}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--rule);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:600 12px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td.mono{font-family:var(--f-mono);font-size:13px;white-space:nowrap}
.text{display:flex;flex-direction:column;gap:12px;max-width:68ch}
.text ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.meta{font:13px var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
footer{border-top:1px solid var(--rule)}
footer .wide{padding-block:18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:14px var(--f-display);color:var(--muted)}
footer nav{display:flex;gap:16px}
@media (max-width:760px){.topbar{padding-block:14px}.logo{font-size:28px}.topnav{gap:14px;font-size:14px}.topnav .sprachwahl{padding-left:12px}.kopf{padding-block:4px 36px}}
@media (max-width:380px){.topnav a[href="./#grenzen"]{display:none}}