/* ==========================================================
   STIL-DATEI: hier änderst du Farben, Schriften und Größen.
   Alles andere in der Seite richtet sich nach diesen Werten.
   ========================================================== */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin-600-italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}

:root{
  /* Farben */
  --papier:#EDEAE3;        /* Hintergrund */
  --tinte:#141A22;         /* Text, privilegierte Gruppe */
  --rot:#C41E1E;           /* benachteiligte Gruppe */
  --grau:#5A616B;          /* Nebentext */
  --grau-dunkel:#3A424D;
  --linie:#B8B3A6;         /* Umrisse, Raster */

  /* Schriften */
  --schlagzeile:'Archivo',system-ui,sans-serif;
  --text:'Newsreader',Georgia,serif;
  --schlagzeile-breite:62%;   /* 62% = schmalste Stufe, 100% = normal */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 18px/1.55 var(--text)}
a{color:inherit}

/* ---------- Website (nicht die Abbildungen) ---------- */
.seite{max-width:680px;margin:0 auto;padding:0 20px 80px}
.kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:4px solid var(--tinte);padding:10px 0 8px;margin-top:24px}
.kopfzeile b{font:900 22px/1 var(--schlagzeile);font-stretch:var(--schlagzeile-breite)}
.kopfzeile span{font:italic 400 15px var(--text);color:var(--grau-dunkel)}
.vorwort{font:900 clamp(44px,12vw,76px)/.9 var(--schlagzeile);font-stretch:var(--schlagzeile-breite);margin:28px 0 16px}
.vorwort em{font-style:normal;color:var(--rot)}
.lead{font-size:20px;color:var(--grau-dunkel);margin:0 0 40px}
.abb-block{margin:0 0 56px}
.schalter{display:flex;gap:8px;margin:0 0 12px}
.schalter button{font:600 15px var(--text);padding:6px 16px;border:1px solid var(--tinte);background:transparent;color:var(--tinte);cursor:pointer;border-radius:0}
.schalter button[aria-pressed=true]{background:var(--tinte);color:var(--papier)}
.schalter button:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
.fuss-seite{border-top:1px solid var(--tinte);margin-top:60px;padding-top:12px;font-size:15px;color:var(--grau-dunkel)}

/* ---------- Abbildung ----------
   Alle Maße in cqw (Prozent der Abbildungsbreite). Dadurch sieht
   die Abbildung auf der Seite und im Instagram-Bild gleich aus. */
.abb{container-type:inline-size;background:var(--papier);color:var(--tinte);width:100%}
.abb .innen{padding:5.5cqw;display:flex;flex-direction:column;height:100%;min-height:100%}
.abb .kopf{display:flex;justify-content:space-between;align-items:baseline;border-top:.9cqw solid var(--tinte);padding-top:1.6cqw}
.abb .kopf b{font:900 4.4cqw/1 var(--schlagzeile);font-stretch:var(--schlagzeile-breite)}
.abb .kopf i{font:italic 400 3.6cqw var(--text)}
.abb .titel{font:900 12.5cqw/.88 var(--schlagzeile);font-stretch:var(--schlagzeile-breite);margin:3cqw 0 1.5cqw;letter-spacing:-.005em}
.abb .titel em{font-style:normal;color:var(--rot)}
.abb .unter{font:400 4cqw/1.3 var(--text);color:var(--grau-dunkel);margin:0 0 2cqw}
.abb .bloecke{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3.5cqw;padding:.5cqw 0}
.abb .fuss{font:italic 400 3cqw/1.3 var(--text);color:var(--grau-dunkel);border-top:.25cqw solid var(--tinte);padding-top:1.5cqw;margin-top:2cqw}
.abb .einschr{font:400 2.8cqw/1.3 var(--text);color:var(--grau-dunkel);margin-top:1cqw}

/* Block: Punktstrahl */
.strahl{position:relative;height:25.5cqw}
.strahl .achse{position:absolute;left:0;right:0;top:11.5cqw;border-top:.3cqw solid var(--tinte)}
.strahl .skala{position:absolute;left:0;top:10.5cqw;height:2cqw;width:100%;background:repeating-linear-gradient(90deg,var(--tinte) 0 .25cqw,transparent .25cqw 10%)}
.strahl .luecke{position:absolute;top:11cqw;height:1.4cqw;background:repeating-linear-gradient(135deg,var(--rot) 0 .8cqw,transparent .8cqw 1.6cqw)}
.strahl .punkt{position:absolute;top:8.8cqw;width:5.4cqw;height:5.4cqw;margin-left:-2.7cqw;border-radius:50%;background:var(--tinte)}
.strahl .punkt.rot{background:var(--rot)}
.strahl .wert{position:absolute;top:0;transform:translateX(-50%);font:900 8cqw/1 var(--schlagzeile);font-stretch:var(--schlagzeile-breite);white-space:nowrap}
.strahl .wert.rot{color:var(--rot)}
.strahl .name{position:absolute;top:16.5cqw;transform:translateX(-50%);font:italic 400 3.6cqw var(--text);white-space:nowrap}
.strahl .ende{position:absolute;top:22.5cqw;font:400 3cqw var(--text);color:var(--grau)}

/* Block: Raster mit 100 Personen */
.raster-frage{font:400 4cqw/1.3 var(--text);border-top:.25cqw solid var(--tinte);padding-top:1.6cqw;margin:0 0 2cqw}
.raster-paar{display:grid;grid-template-columns:1fr 1fr;gap:6cqw;padding:0 17cqw}
.raster{display:grid;grid-template-columns:repeat(10,1fr);gap:.9cqw}
.raster i{aspect-ratio:1;border-radius:50%;border:.25cqw solid var(--linie)}
.raster i.voll{background:var(--tinte);border-color:var(--tinte)}
.raster i.voll.rot{background:var(--rot);border-color:var(--rot)}
.raster-zahl{font:900 8cqw/1 var(--schlagzeile);font-stretch:var(--schlagzeile-breite);margin-top:1.5cqw}
.raster-zahl.rot{color:var(--rot)}
.raster-zahl small{font:italic 400 3.6cqw var(--text);color:var(--tinte);margin-left:1cqw}
.raster-name{font:italic 400 3.3cqw/1.25 var(--text)}

/* Block: Linien */
.linien svg{width:100%;height:auto;display:block;overflow:visible}
.linien text{font-family:var(--text)}
.linien .zahl{font-family:var(--schlagzeile);font-weight:900;font-stretch:var(--schlagzeile-breite)}

/* ---------- Export-Ansicht (abbildung.html) ---------- */
body.export{margin:0;background:var(--papier)}
body.export .abb{width:1080px}
body.export.f-4x5 .abb{height:1350px}
body.export.f-1x1 .abb{height:1080px}
body.export.f-9x16 .abb{height:1920px}
body.export.f-9x16 .abb .innen{padding:7cqw 6cqw 9cqw}