/* mediapolicylab.de – Dossier-Layout */
@font-face{font-family:"Familjen Grotesk";src:url("/assets/fonts/familjen-grotesk.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Roboto Serif";src:url("/assets/fonts/roboto-serif.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Serif";src:url("/assets/fonts/roboto-serif-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("/assets/fonts/martian-mono.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --grund:#f4f4ef;
  --blatt:#ffffff;
  --tinte:#15171c;
  --grau:#5b5f68;
  --linie:#d6d6cd;
  --link:#0b5cad;
  --link-dunkel:#073d75;
  --signal:#e2432a;
  --lime:#c8e64a;
  --lime-hell:#eef7c8;
  --sans:"Familjen Grotesk",system-ui,sans-serif;
  --serif:"Roboto Serif",Georgia,serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --breite:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 1.0625rem/1.68 var(--serif);font-variation-settings:"wdth" 96,"opsz" 16}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--link-dunkel);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--sans);line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.2vw,3.6rem);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:700;margin-top:2em}
h3{font-size:1.2rem;font-weight:600;margin-top:1.6em}
p{margin:0 0 1.1em}
.skip{position:absolute;left:-999px;top:0;background:var(--tinte);color:#fff;padding:.5em 1em;z-index:9}
.skip:focus{left:8px}

/* Kopf */
[data-part="top"]{background:var(--blatt);border-bottom:1px solid var(--tinte)}
[data-part="top"] > div{max-width:var(--breite);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wm{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinte)}
.wm svg{width:38px;height:38px}
.wm b{font:600 .95rem/1 var(--mono);letter-spacing:-.02em}
.wm small{display:block;font:400 .72rem/1.3 var(--sans);color:var(--grau);margin-top:3px;letter-spacing:.02em}
[data-part="nav"] ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
[data-part="nav"] li + li::before{content:"/";color:var(--linie);padding:0 .55em;font-family:var(--mono);font-size:.8rem}
[data-part="nav"] a{font:500 .98rem var(--sans);color:var(--tinte);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
[data-part="nav"] a:hover,[data-part="nav"] a[aria-current]{border-bottom-color:var(--signal)}
.ticker{background:var(--tinte);color:#e9e9e2;font:400 .7rem/1 var(--mono);letter-spacing:.04em}
.ticker > div{max-width:var(--breite);margin:0 auto;padding:7px 20px;display:flex;gap:22px;overflow:hidden;white-space:nowrap}
.ticker span::before{content:"";display:inline-block;width:7px;height:7px;background:var(--lime);margin-right:7px;vertical-align:1px}

/* Rahmen */
main{display:block}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 20px}
.crumbs{font:400 .78rem var(--mono);color:var(--grau);padding:22px 0 0;letter-spacing:-.01em}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3em}
.crumbs li + li::before{content:"→ ";color:var(--signal)}
.crumbs a{color:var(--grau)}

/* Startseite */
.lage{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:56px 0 48px;border-bottom:1px solid var(--linie)}
.lage h1{font-size:clamp(2.2rem,5.6vw,4.1rem)}
.lage h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--lime) 62%)}
.lage p.intro{font-size:1.18rem;max-width:36em;color:#2c2f36}
.lage figure{margin:0;background:var(--blatt);border:1px solid var(--tinte);padding:16px}
.lage figcaption{font:400 .72rem/1.5 var(--mono);color:var(--grau);margin-top:10px}
.kn{font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:14px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-block;font:600 .95rem var(--sans);padding:11px 18px;border:1.5px solid var(--tinte);color:var(--tinte);text-decoration:none;background:var(--blatt)}
.btn:hover{background:var(--tinte);color:#fff}
.btn[data-v="voll"]{background:var(--tinte);color:#fff}
.btn[data-v="voll"]:hover{background:var(--link-dunkel);border-color:var(--link-dunkel)}

.sektion{padding:52px 0;border-bottom:1px solid var(--linie)}
.sektion > header{display:grid;grid-template-columns:200px 1fr;gap:28px;margin-bottom:26px}
.sektion > header h2{margin:0}
.sektion > header p{margin:.5em 0 0;color:var(--grau);max-width:44em}
.sektion > header .kn{margin:6px 0 0}

.index{border-top:2px solid var(--tinte)}
.index a.zeile{display:grid;grid-template-columns:70px 1fr 170px;gap:18px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--tinte)}
.index a.zeile:hover{background:var(--lime-hell)}
.index .nr{font:600 .78rem var(--mono);color:var(--signal)}
.index .t{font:600 1.18rem/1.25 var(--sans)}
.index .t span{display:block;font:400 .95rem/1.5 var(--serif);color:var(--grau);margin-top:4px}
.index .m{font:400 .72rem var(--mono);color:var(--grau);text-align:right}

.zeitachse{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:2px solid var(--tinte)}
.zeitachse li{padding:14px 14px 18px 0;border-right:1px dashed var(--linie);position:relative}
.zeitachse li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--lime);border:2px solid var(--tinte);border-radius:50%}
.zeitachse b{display:block;font:600 1.3rem var(--sans);margin:6px 0 4px}
.zeitachse span{font-size:.92rem;line-height:1.45;display:block;padding-right:6px}
.zeitachse small{display:block;font:400 .68rem var(--mono);color:var(--grau);margin-top:6px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.split figure{margin:0}
.split figcaption,.bild figcaption{font:400 .72rem/1.55 var(--mono);color:var(--grau);margin-top:8px}
.thesen{counter-reset:th;list-style:none;margin:0;padding:0}
.thesen li{counter-increment:th;padding:10px 0 10px 52px;border-bottom:1px solid var(--linie);position:relative;font-size:1rem}
.thesen li::before{content:counter(th,decimal-leading-zero);position:absolute;left:0;top:10px;font:600 .9rem var(--mono);color:var(--link)}

.begriffe{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--tinte);background:var(--blatt)}
.begriffe div{padding:20px;border-right:1px solid var(--linie)}
.begriffe div:last-child{border-right:0}
.begriffe dt{font:600 1.05rem var(--sans);margin-bottom:6px}
.begriffe dd{margin:0;font-size:.95rem;line-height:1.55}
.fragen details{border-bottom:1px solid var(--linie);padding:14px 0}
.fragen summary{font:600 1.08rem var(--sans);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.fragen summary::after{content:"+";font-family:var(--mono);color:var(--signal)}
.fragen details[open] summary::after{content:"–"}
.fragen details p{margin:10px 0 0;max-width:48em}
.partner{margin-top:22px;padding:14px 18px;background:var(--blatt);border:1px solid var(--linie);font-size:.95rem}

/* Dossier-Artikel */
.dossier{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;padding:30px 0 56px}
.dossier aside.kopf{position:sticky;top:18px;align-self:start;font:400 .74rem/1.5 var(--mono);color:var(--grau);border-top:2px solid var(--tinte);padding-top:12px}
.kopf dl{margin:0}
.kopf dt{text-transform:uppercase;letter-spacing:.06em;font-size:.64rem;color:var(--signal);margin-top:12px}
.kopf dd{margin:2px 0 0;color:var(--tinte)}
.kopf ul{list-style:none;margin:4px 0 0;padding:0}
.kopf ul li{display:inline-block;background:var(--lime-hell);border:1px solid #d7e59a;padding:1px 6px;margin:0 4px 4px 0;color:var(--tinte)}
.text{max-width:720px}
.text h1{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:.35em}
.text .lede{font-size:1.2rem;line-height:1.6;color:#2c2f36;border-left:4px solid var(--lime);padding-left:18px;margin:18px 0 28px}
.text ul,.text ol{padding-left:1.3em;margin:0 0 1.2em}
.text li{margin-bottom:.4em}
.text blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--link);font-style:italic;color:#2c2f36}
.bild{margin:26px 0}
.bild img{border:1px solid var(--tinte)}
.schema{margin:26px 0;background:var(--blatt);border:1px solid var(--tinte);padding:18px}
.schema figcaption{font:400 .72rem/1.5 var(--mono);color:var(--grau);margin-top:10px}
.befund{background:var(--tinte);color:#f1f1ea;padding:20px 22px;margin:0 0 30px}
.befund b{font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lime);display:block;margin-bottom:8px}
.befund ul{margin:0;padding-left:1.1em}
.befund li{margin-bottom:.35em;font-size:.98rem}
.kasten{border:1.5px solid var(--tinte);background:var(--blatt);padding:18px 22px;margin:28px 0}
.kasten > strong:first-child{display:block;font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--link);margin-bottom:8px}
.kasten[data-art="frage"]{border-style:dashed}
.kasten[data-art="frage"] > strong:first-child{color:var(--signal)}
.kasten p:last-child,.kasten ul:last-child{margin-bottom:0}
.tab{width:100%;border-collapse:collapse;margin:22px 0;font-size:.94rem;background:var(--blatt)}
.tab th,.tab td{border:1px solid var(--linie);padding:8px 10px;text-align:left;vertical-align:top}
.tab th{font:600 .82rem var(--sans);background:#ebebe3}
.tabwrap{overflow-x:auto}
.quellen{margin-top:36px;padding-top:14px;border-top:1px solid var(--tinte);font-size:.92rem}
.quellen h2{font-size:1rem;margin:0 0 8px;font-family:var(--mono);font-weight:600;letter-spacing:.02em}
.quellen ul{padding-left:1.1em}
.blaettern{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.blaettern a{display:block;border:1px solid var(--tinte);padding:12px 14px;text-decoration:none;color:var(--tinte);background:var(--blatt)}
.blaettern a:hover{background:var(--lime-hell)}
.blaettern small{display:block;font:400 .68rem var(--mono);color:var(--grau);margin-bottom:4px}
.blaettern a[rel="next"]{text-align:right}
.blaettern b{font:600 1rem/1.3 var(--sans)}
.verwandt{margin-top:40px}
.verwandt h2{font-size:1.1rem;margin:0 0 12px}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.karten a{display:block;padding:14px;background:var(--blatt);border-top:3px solid var(--link);text-decoration:none;color:var(--tinte);box-shadow:0 1px 0 var(--linie)}
.karten a:hover{border-top-color:var(--signal)}
.karten small{font:400 .68rem var(--mono);color:var(--signal)}
.karten b{display:block;font:600 1rem/1.3 var(--sans);margin-top:4px}

/* Hubs & Einfachseiten */
.hubkopf{padding:34px 0 20px;max-width:780px}
.hubkopf p{font-size:1.15rem;color:#2c2f36}
.schlicht{max-width:760px;padding:10px 0 60px}
.schlicht h1{font-size:clamp(1.9rem,4vw,2.8rem)}

/* Fuß */
[data-part="foot"]{background:var(--tinte);color:#d9d9d0;margin-top:0;font-size:.92rem}
[data-part="foot"] > div{max-width:var(--breite);margin:0 auto;padding:40px 20px 26px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
[data-part="foot"] a{color:#fff}
[data-part="foot"] h2{font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin:0 0 10px}
[data-part="foot"] ul{list-style:none;margin:0;padding:0}
[data-part="foot"] li{margin-bottom:6px}
[data-part="foot"] .rand{grid-column:1/-1;border-top:1px solid #3a3d44;padding-top:16px;font:400 .7rem var(--mono);color:#a3a39a;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .lage,.split{grid-template-columns:1fr;gap:28px}
  .sektion > header{grid-template-columns:1fr;gap:6px}
  .dossier{grid-template-columns:1fr;gap:18px}
  .dossier aside.kopf{position:static;order:2}
  .kopf dl{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .zeitachse{grid-template-columns:repeat(2,1fr)}
  .zeitachse li{border-bottom:1px dashed var(--linie)}
  .begriffe{grid-template-columns:1fr}
  .begriffe div{border-right:0;border-bottom:1px solid var(--linie)}
  .karten{grid-template-columns:1fr}
  [data-part="foot"] > div{grid-template-columns:1fr}
  .index a.zeile{grid-template-columns:52px 1fr}
  .index .m{display:none}
}
@media (max-width:520px){
  body{font-size:1rem}
  .wrap,[data-part="top"] > div,.ticker > div{padding-left:16px;padding-right:16px}
  .blaettern{grid-template-columns:1fr}
  .blaettern a[rel="next"]{text-align:left}
  [data-part="nav"] a{font-size:.92rem}
  [data-part="nav"] ul{gap:4px 18px}
  [data-part="nav"] li + li::before{display:none}
}
@media print{.ticker,[data-part="nav"],.blaettern,.verwandt,[data-part="foot"]{display:none}}