/* ══════════════════════════════════════════════════════════════════════
   Mainsicht — KI-SICHTBARKEIT (GEO)
   Die technische Unterseite. Dunkel, damit sie sich von der hellen
   Startseite absetzt und an die KI-Leiste dort anschliesst (#0d0d11 ist
   dieselbe Farbe wie .leiste und .fenster in styles.css).

   Nur neue Klassen. styles.css wird nicht angefasst — was hier steht,
   ergaenzt oder korrigiert nur fuer diese eine Seite.

   Kein Kasten, kein Chip, kein Knopf, kein Verlauf, kein Schatten.
   Getrennt wird mit Haarlinien. Der Farbknall steht an genau vier
   Stellen: das Zeichen im Kopf, die Zero-Click-Zahl, der GEO-Balken
   in der Skala, der Pfeil im Aufruf.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --nacht:#0d0d11;      /* wie .leiste und .fenster in styles.css */
  --ki-lese:#c9c6c0;    /* Fliesstext auf Nacht */
  --ki-still:#8f8f99;   /* Mono, Belege, Quellen */
  --ki-haar:rgba(242,239,233,.15);   /* die Trennlinie */
  --ki-haar-fein:rgba(242,239,233,.08);
  --ki-breit:1240px;
}

body.nacht{
  background:var(--nacht);
  color:var(--bone);
}
ol{margin:0;padding:0;list-style:none}
code{
  font-family:Mono,monospace;
  font-size:.88em;
  letter-spacing:.01em;
  color:var(--bone);
  /* kein Rahmen, kein Grund — ein Chip waere ein Kasten */
}

/* Zwischen Zahl und Prozentzeichen gehoert ein schmaler Abstand.
   U+202F hat in Schibsted keine Breite, deshalb wird der Abstand
   gesetzt statt getippt — nur bei den gross gesetzten Zahlen noetig,
   in Mono steht das Zeichen richtig. */
.pz{font-style:normal;margin-left:.16em}

/* ── Grundraster: eine Spalte, wie ueberall 1240 px und --rand ── */
.geo{
  padding:calc(var(--rand) * 1.1) var(--rand) clamp(3rem,9vh,5.5rem);
}
.geo > *{max-width:var(--ki-breit);margin-inline:auto}

/* ══════════════ DER KOPF ══════════════
   Aufbau wie index.html, nur ist die Marke hier der Rueckweg.  */

.geo__kopf{
  max-width:var(--ki-breit);
  margin:0 auto clamp(3.4rem,13vh,7rem);
}
.geo__kopf .kopf__ort{color:var(--ki-still)}
.geo__heim{
  text-decoration:none;
  color:inherit;
}
.geo__heim b{border-bottom:2px solid transparent;padding-bottom:.04em}
.geo__heim:hover b,
.geo__heim:focus-visible b{border-bottom-color:currentColor}
.geo__heim:focus-visible{outline:2px solid currentColor;outline-offset:.35em}

/* ══════════════ AUFTAKT ══════════════ */

/* Der Auftaktfilm sitzt direkt unter der Überschrift. .geo__auftakt brachte
   bisher den großen Abstand nach unten mit, .kino bringt einen nach oben —
   zusammen stünde dort ein Loch. Also beide zurücknehmen. */
.geo__auftakt{margin-bottom:0}
.kino--auftakt{margin-top:0;padding-top:clamp(.8rem,2.4vh,1.4rem)}
.geo__titel{
  margin:.5em 0 0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(2.4rem,9.4vw,7.4rem);
  line-height:.88;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.geo__unter{
  margin-top:clamp(1.4rem,5vh,2.6rem);
  max-width:44ch;
  font-size:clamp(1rem,2.5vw,1.45rem);
  line-height:1.34;
  color:var(--ki-lese);
  text-wrap:pretty;
}

/* ══════════════ DIE STUECKE ══════════════ */

.stueck{
  padding-top:clamp(2.4rem,8vh,4.4rem);
  margin-bottom:clamp(4rem,15vh,8.5rem);
  border-top:1px solid var(--ki-haar);
}
.dach{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.5vw,.72rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ki-still);
}
.stueck__titel{
  margin:.55em 0 0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.55rem,5.4vw,3.9rem);
  line-height:.96;
  letter-spacing:-.042em;
  max-width:22ch;
  text-wrap:balance;
}
.lese{
  margin-top:clamp(1.2rem,4vh,2.2rem);
  max-width:60ch;
  font-size:clamp(.95rem,2.2vw,1.15rem);
  line-height:1.55;
  color:var(--ki-lese);
  text-wrap:pretty;
}
.quelle{
  margin-top:1.5em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.5vw,.7rem);
  letter-spacing:.13em;
  line-height:1.85;
  color:var(--ki-still);
  max-width:52ch;
}
.quelle--breit{max-width:78ch;margin-top:clamp(2rem,6vh,3.2rem)}
.quelle code{color:var(--ki-still);font-size:1em;letter-spacing:.06em}

/* ══════════════ 01 · ZERO-CLICK ══════════════
   Die Zahl gross, der Zusatz darunter, die Quelle sichtbar. Farbknall 2/4. */

.zero__zahl{
  margin-top:clamp(2.2rem,8vh,4.4rem);
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(4rem,20vw,15rem);
  line-height:.82;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
.zahl--knall{color:var(--knall)}
.zero__was{
  margin-top:.5em;
  max-width:24ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.25rem,4vw,2.7rem);
  line-height:1.06;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.zero__was + .quelle{margin-top:1.9em}

/* ══════════════ 02 · DIE ANTWORT ══════════════
   Woertlich zitiert, deshalb gross gesetzt und nicht zerlegt.  */

.antwort{
  margin-top:clamp(1.8rem,6vh,3.2rem);
  max-width:34ch;
  font-family:Schibsted,sans-serif;
  font-weight:400;
  font-size:clamp(1.2rem,3.4vw,2.35rem);
  line-height:1.2;
  letter-spacing:-.024em;
  text-wrap:pretty;
}

/* ══════════════════════════════════════════════════════════════════════
   03 · DIE SKALA
   Waagerechte Skala von 0 bis 25 %. Balkenbreite = Gewicht:
   --g traegt das Gewicht in Prozent, die Breite ist --g / 25 * 100 %,
   also --g * 4 %. Der 10-%-Balken endet damit exakt auf dem 10er-Strich.
   Reines CSS, keine Bibliothek, kein Bild.
   Kopfzeile, Saeulenraster und Balkenzeilen benutzen dasselbe Raster —
   deshalb stehen die Spalten in --spalten und nicht dreimal einzeln.
   ══════════════════════════════════════════════════════════════════════ */

.skala{
  position:relative;
  margin-top:clamp(2.4rem,8vh,4.4rem);
  --spalten:minmax(0,1fr) minmax(0,2.2fr) 4.6rem;
  --luecke:clamp(.9rem,2.6vw,2.2rem);
}

/* das Raster liegt hinter den Balken und laeuft durch alle Zeilen */
.skala__raster{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:var(--spalten);
  column-gap:var(--luecke);
  pointer-events:none;
  z-index:0;
}
.skala__saeulen{grid-column:2;position:relative}
.skala__saeulen i{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--t);
  width:1px;
  background:var(--ki-haar-fein);
}

/* die Achse: sechs Marken, 0 bis 25 % */
.skala__kopf{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:var(--spalten);
  column-gap:var(--luecke);
}
.skala__achse{
  grid-column:2;
  position:relative;
  height:1.7em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.68rem);
  letter-spacing:.12em;
  color:var(--ki-still);
}
.skala__tick{
  position:absolute;
  left:var(--t);
  bottom:0;
  width:1px;
  height:.5em;
  background:var(--ki-haar);
}
.skala__tick b{
  position:absolute;
  bottom:.9em;
  left:0;
  font-weight:400;
  white-space:nowrap;
  transform:translateX(-50%);
  font-variant-numeric:tabular-nums;
}
/* die Randmarken duerfen die Spalte nicht verlassen */
.skala__tick:first-child b{transform:none}
.skala__tick:last-child b{transform:translateX(-100%)}

/* die Zeilen */
.gewichte{position:relative;z-index:1}
.gw{
  display:grid;
  grid-template-columns:var(--spalten);
  column-gap:var(--luecke);
  row-gap:.55em;
  align-items:center;
  padding:clamp(.8rem,2.4vh,1.3rem) 0;
  border-top:1px solid var(--ki-haar);
}
.gw__name{
  grid-column:1;grid-row:1;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(.95rem,2.4vw,1.45rem);
  letter-spacing:-.026em;
  line-height:1.1;
}
.gw__spur{
  grid-column:2;grid-row:1;
  position:relative;
  display:block;
  height:clamp(.55rem,1.7vw,.8rem);
}
.gw__balken{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:calc(var(--g) * 4%);
  background:var(--bone);
  transform-origin:0 50%;
}
.gw__zahl{
  grid-column:3;grid-row:1;
  text-align:right;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(.95rem,2.4vw,1.45rem);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.gw__warum{
  grid-column:1 / -1;grid-row:2;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.68rem);
  letter-spacing:.1em;
  line-height:1.7;
  color:var(--ki-still);
}
.gw__warum code{color:var(--bone);font-size:1em;letter-spacing:.06em}

/* Farbknall 3/4: von acht Balken traegt genau einer Farbe — der, um den
   es auf dieser Seite geht. */
.gw--geo .gw__balken{background:var(--knall)}

.skala__summe{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-top:.95em;
  border-top:1px solid var(--ki-haar);
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.5vw,.7rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ki-still);
}
.skala__summe-zahl{font-variant-numeric:tabular-nums;color:var(--bone)}

@media (max-width:720px){
  .skala{--spalten:minmax(0,1fr) 4.2rem}
  .skala__achse{grid-column:1}
  .skala__saeulen{grid-column:1}
  .gw__name{grid-column:1 / -1;grid-row:1}
  .gw__spur{grid-column:1;grid-row:2}
  .gw__zahl{grid-column:2;grid-row:2}
  .gw__warum{grid-row:3}
}

/* ══════════════════════════════════════════════════════════════════════
   04 · DIE BAUTEILE
   Behauptung oben, Beleg darunter. Zwei Spalten auf breiten Schirmen,
   getrennt durch eine Haarlinie — kein Kasten, kein Raster aus Karten.
   ══════════════════════════════════════════════════════════════════════ */

.teile{
  margin-top:clamp(2.4rem,8vh,4.4rem);
  counter-reset:teil;
}
.teil{
  counter-increment:teil;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.75em clamp(1.4rem,4vw,3.4rem);
  padding:clamp(1.3rem,3.6vh,2.1rem) 0;
  border-top:1px solid var(--ki-haar);
}
.teil__was{
  grid-column:1;
  margin:0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.05rem,2.7vw,1.6rem);
  line-height:1.12;
  letter-spacing:-.028em;
  text-wrap:balance;
}
.teil__was::before{
  content:counter(teil,decimal-leading-zero);
  display:block;
  margin-bottom:.7em;
  font-family:Mono,monospace;
  font-weight:400;
  font-size:clamp(0.7rem,1.5vw,.7rem);
  letter-spacing:.24em;
  color:var(--ki-still);
}
.teil__wie{
  margin:0;
  font-size:clamp(.92rem,2.1vw,1.08rem);
  line-height:1.55;
  color:var(--ki-lese);
  text-wrap:pretty;
}
.teil__beleg{
  margin:0;
  padding-top:.85em;
  border-top:1px solid var(--ki-haar-fein);
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.68rem);
  letter-spacing:.1em;
  line-height:1.85;
  color:var(--ki-still);
}
.teil__beleg code{color:var(--bone);font-size:1em;letter-spacing:.06em}

@media (min-width:900px){
  .teil{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .teil__was{grid-row:1 / span 2}
  .teil__wie{grid-column:2;grid-row:1}
  .teil__beleg{grid-column:2;grid-row:2}
}

/* ── die Luecke: benannt, nicht weggeschrieben ── */
.luecke{
  margin-top:clamp(2.2rem,7vh,3.6rem);
  padding-top:1.1em;
  border-top:1px solid var(--ki-haar);
  max-width:70ch;
  font-size:clamp(.9rem,2vw,1.02rem);
  line-height:1.6;
  color:var(--ki-lese);
  text-wrap:pretty;
}
.luecke__marke{
  display:inline-block;
  margin-right:.8em;
  font-family:Mono,monospace;
  font-size:max(.72rem, .72em);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--bone);
  border-bottom:1px solid var(--ki-haar);
  padding-bottom:.15em;
}

/* ══════════════════════════════════════════════════════════════════════
   05 · DIE FUNDE
   Zahl links, Satz rechts, n und Zeitraum darunter. Bei jeder Zahl,
   ohne Ausnahme — so verlangt es die Quelle.
   ══════════════════════════════════════════════════════════════════════ */

.funde{margin-top:clamp(2.4rem,8vh,4.4rem)}
.fund{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.5em clamp(1.4rem,4vw,3.4rem);
  padding:clamp(1.3rem,3.6vh,2.1rem) 0;
  border-top:1px solid var(--ki-haar);
}
.fund__zahl{
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(2.4rem,8.4vw,5.6rem);
  line-height:.88;
  letter-spacing:-.05em;
  white-space:nowrap;
  /* bewusst KEIN tabular-nums: die Werte stehen nicht in einer Spalte
     untereinander, und die Ziffernbreite reisst das Komma auseinander. */
}
.fund__satz{
  font-size:clamp(.95rem,2.2vw,1.18rem);
  line-height:1.45;
  color:var(--ki-lese);
  text-wrap:pretty;
}
.fund__n{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.68rem);
  letter-spacing:.13em;
  line-height:1.8;
  color:var(--ki-still);
  font-variant-numeric:tabular-nums;
}

@media (min-width:900px){
  .fund{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr)}
  .fund__zahl{grid-row:1 / span 2;align-self:start}
  .fund__satz{grid-column:2;grid-row:1}
  .fund__n{grid-column:2;grid-row:2;margin-top:.4em}
}

/* ══════════════ DER AUFRUF ══════════════
   .tat wie auf der Startseite, nur auf Nacht. Farbknall 4/4: der Pfeil. */

.stueck--tat{margin-bottom:0}
.geo__tat{margin-top:clamp(2rem,7vh,3.6rem)}
.geo__tat .pfeil{color:var(--knall)}
.geo__tat .tat__klein{color:var(--ki-still)}

/* ══════════════ DER FUSS ══════════════
   .fuss aus styles.css rechnet mit Tinte auf Papier — auf Nacht muessen
   Linie, Schrift und Verweise umgedreht werden. */

.geo__fuss{
  border-top-color:var(--ki-haar);
  color:var(--ki-still);
}
.geo__fuss a,
.geo__fuss .fuss__wo a{border-bottom-color:rgba(242,239,233,.28)}
.geo__fuss a:hover{border-bottom-color:var(--bone);color:var(--bone)}
.geo__fuss a:focus-visible{outline:2px solid var(--bone);outline-offset:.25em}

/* ══════════════════════════════════════════════════════════════════════
   BEWEGUNG
   Grundzustand ist die fertige Seite: die Balken stehen auf voller
   Laenge, jeder Text ist voll deckend. Bewegung ist die Zugabe.
   Deckkraft ist spaetestens bei 45 % der Strecke voll — wer mittendrin
   stehen bleibt, liest nie eine halbe Farbe.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    @keyframes ki-ein{
      from{opacity:0;transform:translateY(1.6rem)}
      45%{opacity:1}
      to{opacity:1;transform:none}
    }
    .stueck__titel,
    .zero__zahl,
    .antwort,
    .fund__zahl{
      animation:ki-ein linear both;
      animation-timeline:view();
      animation-range:entry 12% cover 28%;
    }

    /* die Balken wachsen aus der Achse heraus, einer nach dem anderen */
    @keyframes ki-balken{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .gw__balken{
      animation:ki-balken linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
  }
}

/* ══════════════ SCHMAL ══════════════ */

@media (max-width:560px){
  .geo__titel{font-size:clamp(2.1rem,11vw,3.4rem)}
  .luecke__marke{display:block;margin:0 0 .7em}
}

/* ══════════════════════════════════════════════════════════════════════
   Diese Seite steht auf dunklem Grund. Der Kopf muss seine Farben
   umdrehen, sonst steht die Navigation mit 1:1 Kontrast da.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --kopf-leise:#a3a0aa;
  --kopf-tinte:#f2efe9;
}


/* Der Auftakt-Handgriff (styles.css) auf dem Nachtgrund dieser Seite:
   --knall-text (6,1:1 auf Papier) waere hier zu dunkel. */
.geo .auftakt__tat a{color:var(--knall-hell)}
.geo .auftakt__tat i{color:#8b8892}