/* Gemeinsames Stylesheet für die Unterseiten. Tokens entsprechen DESIGN.md und index.html. */
@font-face{
  font-family:"Schibsted Grotesk";
  src:url("fonts/schibsted-grotesk.ttf") format("truetype-variations"),url("fonts/schibsted-grotesk.ttf") format("truetype");
  font-weight:400 900;
  font-display:swap;
}
:root{
  --forest:#1F3A2F;
  --tint:#EDF2EE;
  --ink:#16211D;
  --muted:#56625C;
  --line:#D6DED9;
  --white:#FFFFFF;
  --orange:#D9772B;
  --orange-press:#EB9150;
  --selection:#F4D9C2;
  --font:"Schibsted Grotesk","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --t-xs:.8125rem;--t-s:.9375rem;--t-base:1.0625rem;--t-l:1.25rem;--t-h3:1.375rem;
  --t-2xl:clamp(1.875rem,1.35rem + 2.1vw,2.625rem);
  --gutter:clamp(16px,4vw,40px);
  --radius:10px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--forest);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink)}
a,button,label,summary{-webkit-tap-highlight-color:transparent}
::selection{background:var(--selection);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:750;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-h3);letter-spacing:-.01em;line-height:1.25}
p,ul,ol{margin:0;max-width:65ch}
ul,ol{padding-left:1.2rem}

.wrap{max-width:46rem;margin-inline:auto;padding-inline:var(--gutter)}
.top{border-bottom:1px solid var(--line)}
.top .wrap{max-width:72rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;color:var(--ink)}
.brand b{font-weight:750;letter-spacing:.26em;font-size:.875rem}
.brand span{font-size:var(--t-xs);color:var(--muted)}
.back{font-size:var(--t-s);font-weight:600}

main{padding-block:clamp(2.5rem,7vw,4.5rem) clamp(3rem,8vw,5.5rem)}
.doc{display:flex;flex-direction:column;gap:2rem}
.doc > header{display:flex;flex-direction:column;gap:.75rem}
.lead{font-size:var(--t-l);line-height:1.5;color:var(--muted)}
.block{display:flex;flex-direction:column;gap:.6rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.block p,.block li{color:var(--muted)}
.block strong{color:var(--ink)}
.facts{margin:0;display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:.4rem 1.5rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0}

/* Platzhalter für Texte, die noch fehlen (vor Livegang ersetzen) */
.todo{background:var(--tint);border:1px dashed var(--muted);border-radius:var(--radius);padding:1rem 1.15rem;color:var(--ink);font-size:var(--t-s)}
.todo b{display:block;margin-bottom:.25rem}

/* Schritte (wie die Rail auf der Startseite, vertikal) */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.75rem;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:1.125rem;top:1.125rem;bottom:1.125rem;width:2px;background:var(--line)}
.steps > li{counter-increment:s;position:relative;padding-left:3.5rem;display:flex;flex-direction:column;gap:.4rem}
.steps > li::before{content:counter(s);position:absolute;left:0;top:0;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--forest);color:var(--white);display:grid;place-items:center;font-weight:750;box-shadow:0 0 0 6px var(--white)}
.steps p{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.25rem;padding:.85rem 1.5rem;border-radius:999px;border:0;background:var(--orange);color:var(--ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(22,33,29,.18);transition:background-color .15s ease}
.btn:hover{background:var(--orange-press);color:var(--ink)}
.embed{height:36rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
@media (max-width:600px){.embed{height:32rem}}

.foot{border-top:1px solid var(--line);padding-block:2rem 2.75rem}
.foot .wrap{max-width:72rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;font-size:var(--t-s);color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot .strong{color:var(--ink);font-weight:650}

@media (max-width:600px){.facts{grid-template-columns:minmax(0,1fr);gap:.1rem}.facts dd{margin-bottom:.6rem}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}