/* Ratgeber: Übersicht + Artikel. Basis: base.css (Tokens, Nav, Footer).
   Eigenständig hier: Lesetypografie, Artikelliste, Antwortblock, Autorenbox. */

/* ---------- 1. Übersichtsseite: Beitragsliste ---------- */
.rlist{border-top:2px solid var(--ink);margin-top:8px}
.rlist .ri{border-bottom:2px solid var(--ink);position:relative}
.rlist .ri > a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 26px;
  padding:26px 0;align-items:start;position:relative;z-index:1;color:var(--ink)}
.rlist .rd{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  font-variant-numeric:tabular-nums;padding-top:10px;white-space:nowrap}
.rlist .rd b{color:var(--blue);margin-right:8px}
.rlist h2{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.5rem,4.2vw,3rem);line-height:.98;letter-spacing:.004em;
  overflow-wrap:break-word;hyphens:none;
  text-shadow:0 0 4px var(--bg),0 0 4px var(--bg)}
.rlist .rx{grid-column:2;color:var(--ink-2);font-size:.98rem;max-width:60ch;margin-top:10px}
.rlist .rm{grid-column:2;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-top:14px}
/* Fuellfarbe ist --btn-blue, NICHT --blue: im Dunkelmodus ist --blue (#2e8bff) so hell,
   dass weisser Text darauf nur 3,36:1 erreicht. Mit --btn-blue sind es 6,13:1. */
.rlist .ri::after{
  content:"";position:absolute;inset:0;background:var(--btn-blue);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease}
.rlist .ri:hover::after,.rlist .ri:focus-within::after{transform:scaleY(1)}
.rlist .ri:hover > a,.rlist .ri:focus-within > a{color:#fff}
.rlist .ri:hover .rd,.rlist .ri:hover .rx,.rlist .ri:hover .rm,
.rlist .ri:focus-within .rd,.rlist .ri:focus-within .rx,.rlist .ri:focus-within .rm{color:#fff}
.rlist .ri:hover .rd b,.rlist .ri:focus-within .rd b{color:#fff}
.rlist .ri:hover h2,.rlist .ri:focus-within h2{text-shadow:none}
@media (max-width:640px){
  .rlist .ri > a{grid-template-columns:minmax(0,1fr);gap:0;padding:22px 0}
  .rlist .rd{padding-top:0;margin-bottom:10px}
  .rlist .rx,.rlist .rm{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .rlist .ri::after{transition:none}
}

/* ---------- 2. Artikelkopf ---------- */
/* Abstand oben wie .phero: der Kopf liegt fest ueber dem Inhalt (position:fixed),
   ein kleinerer Wert schiebt Meta-Zeile und H1 unter Logo und Navigation. */
.ahero{padding:clamp(148px,20vh,210px) 0 26px;position:relative}
.ahero .meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.ahero .meta b{color:var(--blue);font-weight:400}
.ahero h1{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(2.1rem,7vw,5.2rem);line-height:.92;letter-spacing:-.004em;
  overflow-wrap:break-word;hyphens:none;max-width:17ch;
  text-shadow:0 0 4px var(--bg),0 0 4px var(--bg)}
.ahero h1 .cut{color:var(--blue)}
.ahero .stand{margin-top:22px;font-size:.86rem;color:var(--ink-3)}

/* ---------- 3. Antwortblock (die Kurzantwort ganz oben) ---------- */
.answer{
  border-left:6px solid var(--blue);background:var(--bg-2);
  padding:24px 26px;margin:0 0 42px;max-width:64ch}
.answer p{font-size:1.12rem;line-height:1.6;margin:0}
.answer .al{
  display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px}

/* ---------- 4. Fließtext ---------- */
.art{max-width:68ch}
.art > * + *{margin-top:1.15em}
.art p{color:var(--ink-2);font-size:1.05rem;line-height:1.72}
.art h2{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.5rem);line-height:1;letter-spacing:.004em;
  margin-top:2.2em;color:var(--ink);
  text-shadow:0 0 4px var(--bg),0 0 4px var(--bg)}
.art h2::before{content:"/ ";color:var(--blue)}
.art h3{font-size:1.12rem;letter-spacing:.01em;margin-top:1.9em;color:var(--ink)}
.art ul,.art ol{padding-left:1.1em;color:var(--ink-2);font-size:1.05rem;line-height:1.7}
.art li + li{margin-top:.5em}
.art li::marker{color:var(--blue)}
.art strong{color:var(--ink);font-weight:600}
.art a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.art a:hover{color:var(--ink)}
.art figure,.art blockquote{margin:0}

/* ---------- 5. Preistabelle im Artikel ---------- */
.ptab{width:100%;border-collapse:collapse;margin-top:1.4em;font-size:.98rem}
.ptab caption{text-align:left;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:12px}
.ptab th,.ptab td{border-bottom:1px solid var(--line);padding:13px 12px 13px 0;text-align:left;
  vertical-align:top}
.ptab thead th{border-bottom:2px solid var(--ink);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.ptab td:last-child,.ptab th:last-child{padding-right:0}
.ptab td{color:var(--ink-2)}
.ptab td:first-child{color:var(--ink);font-weight:600}
.ptab .num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Die Zeilenbeschriftung fuer die Mobil-Ansicht steht als ECHTES Element im td, nicht als
   ::before-Inhalt. CSS-generierter Text wird von Screenreadern nicht zuverlaessig vorgelesen,
   und die Kartenansicht nimmt der Tabelle unten ohnehin ihre Rollen. */
.ptab .lbl{display:none}
@media (max-width:560px){
  .ptab,.ptab thead,.ptab tbody,.ptab tr,.ptab th,.ptab td{display:block}
  .ptab thead{display:none}
  .ptab tr{border-bottom:2px solid var(--ink);padding:14px 0}
  .ptab td{border:0;padding:2px 0}
  .ptab .lbl{display:inline;color:var(--ink-3);font-size:.86rem}
  .ptab td:first-child .lbl{display:none}
}

/* ---------- 6. Quellenblock ---------- */
.quellen{margin-top:3em;border-top:2px solid var(--ink);padding-top:20px;max-width:68ch}
/* Kleine Abschnittslabels (Quellen, Haeufige Fragen): gemeinsame Regel, nicht inline */
.quellen h2,.afaq h2{font-family:"Space Grotesk",system-ui,sans-serif;text-transform:uppercase;
  font-size:13px;letter-spacing:.16em;color:var(--ink-3);margin:0 0 14px}
.quellen h2::before,.afaq h2::before{content:""}
.quellen ol{padding-left:1.2em;font-size:.88rem;color:var(--ink-3);line-height:1.6}
.quellen li + li{margin-top:.55em}
.quellen a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;overflow-wrap:break-word}
.quellen a:hover{color:var(--blue)}

/* ---------- 7. Autorenbox ---------- */
.autor{
  margin-top:3.2em;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 28px;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:26px 0;max-width:68ch;align-items:center;gap:0 26px}
/* QUADRATISCHES Bildfeld, mittig, KEIN Streifen ueber die volle Hoehe.
   Grund: Das Foto ist ein Brustbild im Querformat. In einem hochkanten Feld bleibt
   entweder Leerraum (sieht nach Fehler aus) oder man beschneidet so stark, dass die
   Person zu nah wirkt. Im Quadrat fuellt sie das Feld, ohne aufdringlich zu werden. */
.autor .apic{
  width:180px;height:180px;flex:none;background:var(--bg-2);display:block;overflow:hidden;
  border:2px solid var(--line)}
.autor .apic img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.autor .atxt{padding:0;align-self:center}
.autor .al{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);
  display:block;margin-bottom:10px}
.autor h2{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:1.5rem;line-height:1;margin:0 0 12px;color:var(--ink)}
.autor h2::before{content:""}
.autor p{color:var(--ink-2);font-size:.98rem;line-height:1.65;margin:0}
.autor .alinks{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 20px;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase}
.autor .alinks a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--blue);
  padding:14px 0 8px;display:inline-block;min-height:44px}
.autor .alinks a:hover{color:var(--blue)}
@media (max-width:640px){
  .autor{grid-template-columns:minmax(0,1fr)}
  .autor .apic{width:150px;height:150px}
  .autor .atxt{padding:18px 0 0}
}

/* ---------- 8. Artikel-Abschluss: nächster Beitrag ---------- */
.nextup{margin-top:2.4em;max-width:68ch}
.nextup .nl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:10px}
.nextup a{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:1.35rem;
  line-height:1.05;color:var(--ink);display:inline-block;border-bottom:3px solid var(--blue);
  padding:12px 0 8px;min-height:44px}
.nextup a:hover{color:var(--blue)}

/* ---------- 9. FAQ im Artikel (details/summary, ohne JS sichtbar) ---------- */
.afaq{margin-top:2.6em;max-width:68ch}
.afaq details{border-top:1px solid var(--line)}
.afaq details:last-of-type{border-bottom:1px solid var(--line)}
.afaq summary{
  cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-weight:600;color:var(--ink);font-size:1.02rem}
.afaq summary::-webkit-details-marker{display:none}
.afaq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.afaq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.afaq summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.afaq .fa{padding:0 0 20px;color:var(--ink-2);line-height:1.7;font-size:1.02rem}
@media (prefers-reduced-motion:reduce){.afaq summary::after{transition:none}}

/* ---------- 10. Streifen auf der Startseite ---------- */
.rteaser .rt-head{
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--ink);padding-bottom:14px}
.rteaser .rt-head h2{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,2.6rem);line-height:.95;margin:0;
  text-shadow:0 0 4px var(--bg),0 0 4px var(--bg)}
.rteaser .rt-head .all{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:2px solid var(--blue);padding:15px 0 8px;display:inline-block;
  min-height:44px}
.rteaser .rt-head .all:hover{color:var(--blue)}
.rteaser ul{list-style:none;padding:0;margin:0}
.rteaser li{border-bottom:1px solid var(--line)}
.rteaser li a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:baseline;
  padding:16px 0;color:var(--ink);transition:padding-left .25s}
.rteaser li a:hover{padding-left:10px;color:var(--blue)}
.rteaser .d{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.rteaser .t{font-size:1.05rem;overflow-wrap:break-word}
.rteaser .ar{color:var(--blue)}
@media (max-width:560px){
  .rteaser li a{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:14px 0}
  .rteaser .d{grid-column:1/-1;order:-1;margin-bottom:2px}
  .rteaser li a:hover{padding-left:0}
}
@media (prefers-reduced-motion:reduce){.rteaser li a{transition:none}}