/* =====================================================================
   Planetenstand — gemeinsames Aussehen der Inhaltsseiten.
   Bewusst schlank: keine Bibliothek, keine Fremdquellen, damit die
   Seiten schnell laden. Ladezeit ist ein Rankingfaktor.
   ================================================================== */

@font-face{font-family:"EB Garamond";
  src:url("fonts/EBGaramond-Variable.ttf") format("truetype");
  font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";
  src:url("fonts/IBMPlexSans-Variable.ttf") format("truetype");
  font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";
  src:url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight:400;font-display:swap}

:root{
  --gold:#e3bd7f; --gold-dim:#9a8158; --ink:#e8e6e1; --dim:#9c9a94;
  --line:rgba(227,189,127,.20); --bg:#0a0b0f; --flaeche:#101218;
  --serif:"EB Garamond",Georgia,"Palatino Linotype",serif;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Cascadia Mono",monospace;
  --breite:720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}

/* ---------- Kopf ---------- */
.kopf{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  background:rgba(10,11,15,.88);backdrop-filter:blur(14px)}
.kopf .innen{max-width:1080px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:26px}
.marke{font-family:var(--serif);font-size:17px;letter-spacing:.34em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.kopf nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.kopf nav a{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--dim);transition:color .16s}
.kopf nav a:hover,.kopf nav a[aria-current]{color:var(--gold)}

/* ---------- Textspalte ---------- */
main{max-width:var(--breite);margin:0 auto;padding:0 24px 90px}
.weit{max-width:1080px;margin:0 auto;padding:0 24px}

h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5.4vw,46px);
  line-height:1.18;letter-spacing:.01em;margin:56px 0 18px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3.6vw,30px);
  line-height:1.3;margin:56px 0 14px;padding-top:8px}
h3{font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dim);font-weight:400;margin:36px 0 10px}
p{margin:0 0 20px}
a{color:var(--gold)}
strong{color:#fff;font-weight:600}
.vorspann{font-family:var(--serif);font-size:clamp(19px,2.6vw,22px);
  line-height:1.6;color:rgba(232,230,225,.92);margin-bottom:34px}
.regel{height:1px;background:linear-gradient(90deg,var(--gold),transparent);
  border:0;margin:0 0 34px}

ul,ol{margin:0 0 20px;padding-left:22px}
li{margin-bottom:9px}
li::marker{color:var(--gold-dim)}

/* ---------- Tabellen ---------- */
.tabelle{width:100%;overflow-x:auto;margin:0 0 26px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid rgba(227,189,127,.13)}
th{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dim);font-weight:400;white-space:nowrap}
td.zahl,th.zahl{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap}
tbody tr:hover{background:rgba(227,189,127,.04)}

/* ---------- Merkkasten ---------- */
.merk{border-left:2px solid var(--gold-dim);padding:2px 0 2px 20px;
  margin:0 0 26px;color:rgba(232,230,225,.86)}
.merk p:last-child{margin-bottom:0}

/* ---------- Handlungsaufforderung ---------- */
.tat{display:block;border:1px solid var(--line);border-radius:3px;
  padding:26px 28px;margin:40px 0;text-decoration:none;color:var(--ink);
  background:linear-gradient(160deg,rgba(227,189,127,.06),transparent 60%);
  transition:border-color .18s}
.tat:hover{border-color:var(--gold)}
.tat .titel{font-family:var(--serif);font-size:22px;display:block;margin-bottom:7px}
.tat .text{font-size:14.5px;color:var(--dim);display:block}
.tat .pfeil{color:var(--gold);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;display:inline-block;margin-top:14px}

/* ---------- Karten ---------- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin:0 0 34px}
.karte{border:1px solid var(--line);border-radius:3px;padding:22px 24px;
  text-decoration:none;color:var(--ink);transition:border-color .18s,background .18s}
a.karte:hover{border-color:var(--gold);background:rgba(227,189,127,.05)}
.karte h3{margin-top:0}
.karte p{font-size:14.5px;color:var(--dim);margin-bottom:0}

/* ---------- Fragen und Antworten ---------- */
details{border-bottom:1px solid rgba(227,189,127,.13);padding:16px 0}
summary{cursor:pointer;font-size:17px;color:var(--ink);list-style:none;
  display:flex;align-items:flex-start;gap:12px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--gold);font-family:var(--mono);
  flex:none;transition:transform .18s}
details[open] summary::before{content:"−"}
details p{margin:14px 0 0 26px;color:rgba(232,230,225,.84);font-size:15.5px}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--line);margin-top:70px}
.fuss .innen{max-width:1080px;margin:0 auto;padding:34px 24px 60px;
  display:flex;gap:30px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.fuss a{color:var(--dim);text-decoration:none;margin-right:18px}
.fuss a:hover{color:var(--gold)}
.fuss .rechts{margin-left:auto;font-family:var(--mono);font-size:11px;
  color:#5c5a56;letter-spacing:.08em}

@media (max-width:640px){
  body{font-size:16px}
  /* Ohne flex-wrap bleibt die Navigation trotz width:100% in derselben
     Zeile wie die Marke und schiebt den Kopf über den Rand — bei 360 px
     Gerätebreite sichtbar. */
  .kopf .innen{padding:12px 18px;gap:10px 14px;flex-wrap:wrap}
  .kopf nav{gap:14px;width:100%;margin-left:0}
  main{padding:0 18px 60px}
  h1{margin-top:36px}
}