/* Gemeinsames Layout der Ratgeber-/SEO-Seiten (Grill-Entscheid 2026-07-26, Punkt 6:
   Privat-Zielgruppe kommt ueber Suche, nicht ueber die Startseite).
   Gleiche Palette/Typo wie die Landing, Hell/Dunkel automatisch, kein CDN (DSGVO).
   Lesespalte statt Marketing-Raster: diese Seiten werden GELESEN, nicht gescrollt. */
:root{
  --bg:#fff; --fg:#161616; --muted:#6f6f6f; --soft:#f4f4f4; --line:#d0d0d0;
  --blue:#0057e7; --blue-fg:#fff; --maxw:44rem;
  --font:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#161616; --fg:#f4f4f4; --muted:#a8a8a8; --soft:#262626; --line:#454545;
         --blue:#4d8bff; --blue-fg:#08152e; }
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

header{ padding:1.25rem 0; }
.head-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.brand{ display:inline-flex; align-items:center; font-size:1.15rem; font-weight:600;
  letter-spacing:-.01em; color:var(--blue); }
.brand img{ display:block; margin-right:.55rem; }
.back{ font-size:.9rem; white-space:nowrap; }

nav.crumbs{ font-family:var(--mono); font-size:.78rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; margin:0 0 1rem; }
nav.crumbs a{ color:var(--muted); }
nav.crumbs a:hover{ color:var(--blue); }

main{ padding:.5rem 0 3rem; }
h1{ font-size:clamp(1.9rem,4.4vw,2.6rem); font-weight:600; letter-spacing:-.025em;
  line-height:1.14; margin:0 0 1rem; }
h2{ font-size:1.35rem; font-weight:600; letter-spacing:-.01em; margin:2.5rem 0 .6rem; }
h3{ font-size:1.08rem; font-weight:600; margin:1.6rem 0 .4rem; }
p,ul,ol{ margin:0 0 1rem; }
ul,ol{ padding-left:1.3rem; }
li{ margin:.35rem 0; }
.lead{ font-size:1.2rem; color:var(--muted); margin:0 0 2rem; }
.muted{ color:var(--muted); }
.mono{ font-family:var(--mono); font-size:.92rem; }

/* Antwort-Kasten: die Kurzantwort steht oben — Suchende wollen sie sofort. */
.answer{ background:var(--soft); border-left:3px solid var(--blue); padding:1rem 1.25rem;
  margin:0 0 2rem; }
.answer p:last-child{ margin-bottom:0; }

.steps{ list-style:none; padding:0; counter-reset:step; }
.steps li{ position:relative; padding-left:2.6rem; margin:1.1rem 0; counter-increment:step; }
.steps li::before{ content:counter(step); position:absolute; left:0; top:.1rem;
  font-family:var(--mono); font-size:.85rem; color:var(--blue-fg); background:var(--blue);
  width:1.7rem; height:1.7rem; display:flex; align-items:center; justify-content:center; }
.steps b{ display:block; }

.note{ font-size:.9rem; color:var(--muted); }
.warnbox{ border:1px solid var(--line); padding:1rem 1.25rem; margin:1.5rem 0; }
.warnbox p:last-child{ margin-bottom:0; }

.faq details{ border-top:1px solid var(--line); padding:.9rem 0; }
.faq details summary{ cursor:pointer; font-weight:600; list-style:none; }
.faq details summary::-webkit-details-marker{ display:none; }
.faq details summary::after{ content:"+"; float:right; color:var(--blue); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--muted); margin:.7rem 0 0; }

/* CTA-Block am Artikelende — ein Angebot, kein Banner-Gewitter. */
.cta{ background:var(--soft); padding:1.75rem 1.5rem; margin:2.5rem 0 0; }
.cta h2{ margin:0 0 .5rem; font-size:1.2rem; }
.cta p{ margin:0 0 1.1rem; color:var(--muted); }
.btn{ display:inline-flex; align-items:center; gap:.75rem; background:var(--blue);
  color:var(--blue-fg); padding:.8rem 1.15rem; font-weight:500; font-size:1rem; }
.btn:hover{ filter:brightness(1.08); text-decoration:none; }

.more{ margin-top:2.5rem; }
.more ul{ list-style:none; padding:0; }
.more li{ margin:.5rem 0; }

.stamp{ font-size:.85rem; color:var(--muted); margin-top:2.5rem; }
footer{ border-top:1px solid var(--soft); padding:1.5rem 0 2.5rem; color:var(--muted); font-size:.85rem; }
footer a{ color:var(--fg); }

/* Ratgeber-Uebersicht */
.cards{ display:grid; gap:1rem; margin:1.5rem 0 0; }
.cards a.card{ display:block; border:1px solid var(--line); padding:1.15rem 1.25rem; color:var(--fg); }
.cards a.card:hover{ border-color:var(--blue); text-decoration:none; }
.cards a.card b{ display:block; color:var(--blue); font-size:1.05rem; margin-bottom:.2rem; }
.cards a.card span{ color:var(--muted); font-size:.95rem; }