:root{
  --papier:#F2F4F6; --blatt:#FFFFFF; --senke:#E7EBEF;
  --linie:#D8DEE4; --linie2:#BCC6CF;
  --tinte:#10161C; --tinte2:#54626E; --tinte3:#8593A0;
  --nom:#2a78d6; --real:#eb6834; --nom-w:#2a78d614; --real-w:#eb683414;
  --display:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --text:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --papier:#11161B; --blatt:#181E25; --senke:#0D1216;
    --linie:#252D35; --linie2:#3A454F;
    --tinte:#E9EEF3; --tinte2:#98A6B3; --tinte3:#6B7885;
    --nom:#3987e5; --real:#d95926; --nom-w:#3987e520; --real-w:#d9592620;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--papier); color:var(--tinte); font-family:var(--text);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased}
.wrap{max-width:1000px; margin:0 auto; padding-inline:18px; padding-block:0 60px}
a{color:var(--tinte)}

header.kopf{border-bottom:2px solid var(--tinte); padding-block:26px 14px}
.marke{font-family:var(--display); font-size:clamp(28px,5.4vw,42px); font-weight:600;
  letter-spacing:-.02em; line-height:1; margin:0}
.marke a{text-decoration:none; color:inherit}
.marke span{color:var(--tinte3); font-weight:400}
.claim{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--tinte2);
  margin:9px 0 0; text-transform:uppercase}
nav{display:flex; flex-wrap:wrap; gap:4px 22px; border-bottom:1px solid var(--linie);
  padding-block:11px; margin-bottom:30px}
nav a{font-size:13.5px; font-weight:500; color:var(--tinte2); text-decoration:none;
  padding:2px 0; border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{color:var(--tinte); border-bottom-color:var(--nom)}
nav a.jetzt{color:var(--tinte); border-bottom-color:var(--tinte)}

/* Aufmacher + Artikelkopf */
.auf,.stueck-voll{background:var(--blatt); border:1px solid var(--linie); border-radius:3px;
  padding:24px}
.stueck-voll{padding:28px 30px 30px}
.rubrik{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--real); margin:0}
.rubrik a{color:inherit; text-decoration:none}
h1{font-family:var(--display); font-size:clamp(27px,4.6vw,40px); font-weight:600; line-height:1.12;
  letter-spacing:-.015em; margin:8px 0 0; text-wrap:balance; max-width:22ch}
h1 a{color:inherit; text-decoration:none}
.rubtitel{max-width:none; margin-bottom:6px}
.antwort{font-family:var(--display); font-style:italic; font-size:19.5px; color:var(--tinte2);
  margin:12px 0 0; line-height:1.45; max-width:58ch}
.kennreihe{display:flex; flex-wrap:wrap; margin-top:18px; border-top:1px solid var(--linie)}
.kenn{flex:1 1 130px; padding:12px 16px 12px 0}
.kenn .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinte3)}
.kenn .v{font-family:var(--display); font-size:25px; font-weight:600; line-height:1.15;
  margin-top:3px; font-variant-numeric:tabular-nums; white-space:nowrap}

/* Fliesstext im Artikel */
.stueck-voll p{max-width:66ch; color:var(--tinte2)}
.stueck-voll p b{color:var(--tinte); font-weight:600}
.stueck-voll h2{font-family:var(--display); font-size:25px; font-weight:600; margin:34px 0 0;
  letter-spacing:-.01em; text-wrap:balance}
.stueck-voll h3{font-family:var(--display); font-size:20px; font-weight:600; margin:26px 0 0}
.stueck-voll ul{max-width:66ch; color:var(--tinte2); padding-left:20px}
.stueck-voll li{margin-bottom:5px}
.quellzeile{margin-top:34px; border-top:1px solid var(--linie); padding-top:14px;
  font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--tinte3)}
.quellzeile b{color:var(--tinte2); font-weight:500}

/* Listen von Stuecken */
h2.rub{font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.01em;
  margin:44px 0 0; padding-bottom:8px; border-bottom:1px solid var(--linie);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px}
h2.rub a{text-decoration:none; color:inherit}
h2.rub em{font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinte3); font-weight:400}
.liste{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px;
  margin-top:14px}
.stueck{background:var(--blatt); border:1px solid var(--linie); border-radius:3px;
  padding:16px 16px 15px; display:flex; flex-direction:column; gap:7px}
.stueck h3{font-family:var(--display); font-size:19px; font-weight:600; line-height:1.25; margin:0}
.stueck h3 a{color:inherit; text-decoration:none}
.stueck h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.stueck p{margin:0; font-size:14px; color:var(--tinte2); line-height:1.5}
.zeile{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px}
.zahl{font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--tinte);
  background:var(--nom-w); padding:2px 7px; border-radius:3px; font-variant-numeric:tabular-nums}
.zahl:empty{display:none}
.stand{font-family:var(--mono); font-size:10.5px; color:var(--tinte3)}
.leer{color:var(--tinte3); font-style:italic}

/* Weiterlesen */
.weiterlesen{margin-top:34px}
.weiterlesen h2{font-family:var(--display); font-size:22px; font-weight:600; margin:0 0 12px}
.wgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.weiter{display:block; background:var(--blatt); border:1px solid var(--linie); border-radius:3px;
  padding:14px 16px; text-decoration:none}
.weiter:hover{border-color:var(--linie2)}
.wr{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinte3)}
.wt{display:block; font-family:var(--display); font-size:18px; font-weight:600; margin-top:4px;
  color:var(--tinte)}

footer{margin-top:44px; border-top:1px solid var(--linie); padding-top:18px;
  display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13px; color:var(--tinte3)}
footer a{color:var(--tinte2); text-decoration:none}
footer a:hover{text-decoration:underline}
footer .rechts{margin-left:auto}
@media (max-width:760px){ .auf,.stueck-voll{padding:18px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Quellen unter dem Stück */
.quellen{margin-top:38px; border-top:1px solid var(--linie); padding-top:16px}
.quellen h2{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinte3); font-weight:400; margin:0 0 10px}
.qliste{list-style:none; margin:0; padding:0; max-width:66ch}
.qliste li{font-size:13.5px; color:var(--tinte2); line-height:1.55; margin-bottom:5px;
  padding-left:14px; text-indent:-14px}
.qliste li::before{content:"·"; margin-right:8px; color:var(--tinte3)}
.qliste a{color:var(--tinte2); text-decoration:none; border-bottom:1px solid var(--linie2);
  font-family:var(--mono); font-size:12.5px}
.qliste a:hover{color:var(--tinte); border-bottom-color:var(--tinte)}
.qmethode{font-size:13.5px; color:var(--tinte2); max-width:66ch; margin:10px 0 0}
.qstand{font-family:var(--mono); font-size:11.5px; color:var(--tinte3); margin:12px 0 0}
.qstand a{color:var(--tinte3)}