@font-face{font-family:"Imbue";src:url(/assets/fonts/imbue-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Radio Canada";src:url(/assets/fonts/radio-canada-latin-wght-normal.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Radio Canada";src:url(/assets/fonts/radio-canada-latin-wght-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

:root{
  --nacht:#1c2140;--nacht-2:#2a2f55;--pflaume:#5a3d5c;--bernstein:#c4873a;--bernstein-dunkel:#8a5a1c;
  --nebel:#f2f0f4;--papier:#fbfaf8;--tinte:#24232b;--grau:#5b5966;--linie:#ddd8e0;--rosa:#efe4ea;
  --serif:"Imbue",Georgia,"Times New Roman",serif;--sans:"Radio Canada",system-ui,-apple-system,"Segoe UI",sans-serif;
  --breit:1180px;--text:41rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.075rem/1.7 var(--sans)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--bernstein-dunkel);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--pflaume)}
h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.08;color:var(--nacht);letter-spacing:.005em}
h1{font-size:clamp(2.5rem,6vw,4.1rem);margin:.2em 0 .3em}
h2{font-size:clamp(1.75rem,3.4vw,2.3rem);margin:2.1em 0 .45em}
h3{font-size:1.45rem;margin:1.6em 0 .3em}
p,ul,ol,table{margin:0 0 1.1em}
.sz-weg{position:absolute;left:-999px}
.sz-weg:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:9}
.sz-huelle{max-width:var(--breit);margin:0 auto;padding:0 1.25rem}

/* Dämmerungsstreifen + Kopf */
.sz-daemmer{height:6px;background:linear-gradient(90deg,var(--nacht) 0 40%,var(--pflaume) 70%,var(--bernstein))}
.sz-kopf{border-bottom:1px solid var(--linie);background:var(--papier)}
.sz-kopf .sz-huelle{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:84px;flex-wrap:wrap}
.sz-marke{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--nacht)}
.sz-marke svg{width:44px;height:44px}
.sz-marke b{display:block;font:560 1.6rem/1 var(--serif)}
.sz-marke small{display:block;font-size:.8rem;color:var(--grau);margin-top:.2rem;letter-spacing:.02em}
.sz-navi ul{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1.35rem;margin:0;padding:0}
.sz-navi a{text-decoration:none;color:var(--tinte);font-size:.97rem;padding:.35rem 0;border-bottom:2px solid transparent}
.sz-navi a:hover,.sz-navi a[aria-current]{border-color:var(--bernstein);color:var(--nacht)}

/* Startseite */
.sz-auftakt{background:radial-gradient(ellipse at 78% 50%,var(--nacht-2),var(--nacht) 62%);color:#e9e6f0}
.sz-auftakt .sz-huelle{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;padding-top:4rem;padding-bottom:4rem}
.sz-auftakt h1{color:#fff}
.sz-auftakt p{font-size:1.18rem;max-width:34rem;color:#d8d4e3}
.sz-auftakt a{color:#f1c98f}
.sz-knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.sz-knopf{display:inline-block;padding:.7rem 1.2rem;border-radius:999px;background:var(--bernstein);color:var(--nacht)!important;text-decoration:none;font-weight:600}
.sz-knopf.leise{background:transparent;border:1px solid #8c87a8;color:#efeaf7!important}
.sz-knopf:hover{filter:brightness(1.08)}
.sz-pendel svg{width:100%;max-width:440px;margin-left:auto}
.sz-abschnitt{padding:4rem 0}
.sz-abschnitt.getoent{background:var(--nebel)}
.sz-abschnitt>.sz-huelle>h2:first-child{margin-top:0}
.sz-vorspann{max-width:44rem;color:var(--grau);font-size:1.08rem}
.sz-phasen{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:ph;position:relative}
.sz-phasen::before{content:"";position:absolute;left:0;right:0;top:1.35rem;border-top:2px dotted var(--pflaume);opacity:.5}
.sz-phasen li{position:relative;padding:3.4rem 1.2rem 0 0;counter-increment:ph}
.sz-phasen li::before{content:counter(ph);position:absolute;top:0;left:0;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--papier);border:2px solid var(--pflaume);display:grid;place-items:center;font:600 1.2rem var(--serif);color:var(--pflaume)}
.sz-phasen b{display:block;font:560 1.35rem/1.2 var(--serif);color:var(--nacht);margin-bottom:.3rem}
.sz-phasen span{color:var(--grau);font-size:.98rem}
.sz-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}
.sz-rubrik{border-top:3px solid var(--nacht);padding-top:1.1rem}
.sz-rubrik:nth-child(2){border-color:var(--pflaume)}
.sz-rubrik:nth-child(3){border-color:var(--bernstein)}
.sz-rubrik h3{margin-top:0}
.sz-rubrik ul{list-style:none;padding:0;margin:.8rem 0 0}
.sz-rubrik li{border-bottom:1px solid var(--linie)}
.sz-rubrik li a{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;text-decoration:none;color:var(--tinte)}
.sz-rubrik li a:hover{color:var(--pflaume)}
.sz-rubrik li em{font-style:normal;font-size:.82rem;color:var(--grau);white-space:nowrap}
.sz-gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem}
.sz-gegenueber>div{background:var(--papier);border-radius:14px;padding:1.5rem 1.6rem}
.sz-gegenueber h3{margin-top:0;font-size:1.35rem}
.sz-gegenueber ul{padding-left:1.15rem;margin:0}
.sz-gegenueber li{margin-bottom:.45rem}
.sz-zweispalt{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:start}
.sz-notruf{background:var(--rosa);border-radius:14px;padding:1.5rem 1.6rem}
.sz-notruf h3{margin-top:0}
.sz-notruf p:last-child{margin:0}
.sz-partner{border-left:3px solid var(--bernstein);padding:.2rem 0 .2rem 1.2rem;color:var(--grau)}

/* Seitenblatt */
.sz-pfad{font-size:.88rem;color:var(--grau);padding-top:1.6rem}
.sz-pfad ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;padding:0;margin:0}
.sz-pfad li+li::before{content:"›";margin-right:.3rem;color:var(--bernstein)}
.sz-pfad a{color:var(--grau)}
.sz-blatt{display:grid;grid-template-columns:minmax(0,var(--text)) 16rem;gap:3.5rem;justify-content:space-between;padding-bottom:3rem}
.sz-meta{font-size:.9rem;color:var(--grau);display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-bottom:1.3rem}
.sz-lead{font-size:1.22rem;line-height:1.6;font-style:italic;color:#3c3a46;margin-bottom:1.8rem}
.sz-befund{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;padding:.3rem .8rem;border-radius:999px;background:var(--nebel);color:var(--nacht);margin-bottom:1rem}
.sz-befund i{width:.7rem;height:.7rem;border-radius:50%;background:var(--bernstein)}
.sz-befund.gut i{background:#4b7a5a}.sz-befund.wenig i{background:#b0605a}
.sz-text ul,.sz-text ol{padding-left:1.3rem}
.sz-text li{margin-bottom:.45rem}
.sz-text figure,.sz-bildkopf{margin:1.8rem 0}
.sz-text figure img,.sz-bildkopf img{border-radius:10px;width:100%;max-height:520px;object-fit:cover}
figcaption{font-size:.85rem;color:var(--grau);margin-top:.5rem}
.sz-grafik{background:var(--nebel);border-radius:14px;padding:1.3rem;margin:1.8rem 0}
.sz-grafik svg{width:100%;margin:0 auto}
.sz-merke,.sz-achtung{border-radius:0 12px 12px 0;padding:1rem 1.25rem;margin:1.6rem 0}
.sz-merke{background:#f6efe3;border-left:4px solid var(--bernstein)}
.sz-achtung{background:var(--rosa);border-left:4px solid var(--pflaume)}
.sz-merke p,.sz-achtung p{margin:0}
.sz-text table{width:100%;border-collapse:collapse;font-size:.96rem;display:block;overflow-x:auto}
.sz-text th,.sz-text td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--linie);vertical-align:top}
.sz-text th{font-family:var(--serif);font-size:1.1rem;color:var(--nacht);border-bottom:2px solid var(--nacht)}
.sz-seite{position:sticky;top:1.2rem;align-self:start;font-size:.93rem;margin-top:2rem}
.sz-seite h2{font-size:1.25rem;margin:0 0 .6rem}
.sz-seite ol{padding-left:1.2rem;margin:0 0 1.6rem;color:var(--grau)}
.sz-seite li{margin-bottom:.35rem}
.sz-seite a{color:var(--tinte);text-decoration:none}
.sz-seite a:hover{color:var(--pflaume);text-decoration:underline}
.sz-seitenkasten{background:var(--nebel);border-radius:12px;padding:1rem 1.1rem}
.sz-seitenkasten p{margin:0 0 .5rem}
.sz-quellen{border-top:1px solid var(--linie);margin-top:2.5rem;padding-top:1rem;font-size:.93rem}
.sz-quellen h2{font-size:1.3rem;margin:0 0 .4rem}
.sz-quellen ul{padding-left:1.1rem}
.sz-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.5rem 0 0}
.sz-blaettern a{display:block;padding:1rem 1.1rem;border:1px solid var(--linie);border-radius:12px;text-decoration:none;color:var(--tinte)}
.sz-blaettern a:hover{border-color:var(--pflaume)}
.sz-blaettern small{display:block;color:var(--grau);font-size:.8rem}
.sz-blaettern .weiter{text-align:right}
.sz-verwandt{background:var(--nebel);padding:3rem 0}
.sz-verwandt h2{margin-top:0}
.sz-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.sz-karte{background:var(--papier);border-radius:14px;padding:1.2rem 1.25rem;text-decoration:none;color:var(--tinte);display:flex;flex-direction:column;gap:.4rem;border:1px solid transparent}
.sz-karte:hover{border-color:var(--pflaume)}
.sz-karte b{font:560 1.3rem/1.15 var(--serif);color:var(--nacht)}
.sz-karte span{font-size:.93rem;color:var(--grau)}
.sz-liste{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1rem}
.sz-liste a{display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start;text-decoration:none;color:var(--tinte);padding:1rem 0;border-bottom:1px solid var(--linie)}
.sz-liste .nr{width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid var(--pflaume);display:grid;place-items:center;font:600 1.1rem var(--serif);color:var(--pflaume)}
.sz-liste b{font:560 1.35rem/1.2 var(--serif);color:var(--nacht);display:block}
.sz-liste span{color:var(--grau);font-size:.95rem}
.sz-glossar dt{font:560 1.35rem var(--serif);color:var(--nacht);margin-top:1.4rem}
.sz-glossar dd{margin:.2rem 0 0}

/* Fuß */
.sz-fuss{background:var(--nacht);color:#cfcbe0;font-size:.93rem;padding:3rem 0 2rem}
.sz-fuss .sz-huelle{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.sz-fuss b{color:#fff;font:560 1.3rem var(--serif);display:block;margin-bottom:.5rem}
.sz-fuss ul{list-style:none;padding:0;margin:0}
.sz-fuss li{margin-bottom:.35rem}
.sz-fuss a{color:#efd9b5;text-decoration:none}
.sz-fuss a:hover{text-decoration:underline}
.sz-fuss .unten{grid-column:1/-1;border-top:1px solid #3b4170;padding-top:1.2rem;font-size:.85rem;color:#a9a4c0}

@media (max-width:980px){
  .sz-blatt{grid-template-columns:minmax(0,1fr);gap:0}
  .sz-blatt>article{min-width:0}
  .sz-seite{position:static;margin-top:1.5rem}
  .sz-seite .sz-inhalt{display:none}
  .sz-auftakt .sz-huelle,.sz-zweispalt{grid-template-columns:1fr}
  .sz-pendel svg{max-width:300px;margin:0 auto}
  .sz-drei,.sz-karten{grid-template-columns:1fr 1fr}
  .sz-phasen{grid-template-columns:1fr 1fr;row-gap:1.8rem}
  .sz-phasen::before{display:none}
}
@media (max-width:640px){
  body{font-size:1.02rem}
  .sz-huelle{padding:0 1rem}
  .sz-kopf .sz-huelle{padding-top:.8rem;padding-bottom:.8rem}
  .sz-navi ul{gap:.1rem 1rem}
  .sz-drei,.sz-karten,.sz-gegenueber,.sz-blaettern,.sz-phasen,.sz-fuss .sz-huelle{grid-template-columns:1fr}
  .sz-auftakt .sz-huelle{padding-top:2.5rem;padding-bottom:2.5rem}
  .sz-abschnitt{padding:2.8rem 0}
  .sz-blaettern .weiter{text-align:left}
}