/* =========================================================================
   Joel Sidler — Home
   Ergänzt css/style.css. Layout, dazu zwei Blöcke, die es nur hier gibt:
   die Drei-Akt-Grafik »Mein Weg« (.weg, Abschnitt 2) und die
   Schwerpunkte-Karten (.tafeln, Abschnitt 3). Beide bleiben seitenlokal —
   keiner von beiden wandert ins Fundament, solange er auf genau einer Seite
   steht.
   Der Hero selbst (.hero, .hero__media, .hero__inner) ist eine
   Komponente aus style.css (Abschnitt 4.13)
   und wird hier nicht neu definiert.
   ========================================================================= */

/* ---------- 1. Hero — Layout-Detail, das style.css offen lässt ------------ */


/* Grid-Items bekommen ohne min-inline-size: 0 eine automatische
   Mindestbreite in Höhe ihres min-content — zur Sicherheit gegen die
   langen Wörter im h1 (»UNTERSTÜTZEN«) auf schmalen Viewports. */
.hero__inner > * {
  min-inline-size: 0;
}

/* v14: ein Satz unter dem Slogan. order 3, weil .hero__inner den h1 per
   order ans Ende setzt — ohne stünde der Satz darüber. */
.hero--start .hero__lead {
  order: 3;
  color: var(--white);
  font-size: var(--step-1);
  max-inline-size: 48ch;
}

/* ---------- 2. Mein Weg — Kartenreise »Vom Ort zur Idee« -------------------
   Ersetzt die Drei-Akt-Grafik auf der Schiene. Dieselben drei Akte, dieselben
   Stationen, neue Inszenierung: links (auf dem Telefon oben) bleibt eine
   Karte stehen, rechts laufen die Akte an ihr vorbei, und die Karte zoomt
   mit jedem Akt eine Ebene heraus — Affoltern am Albis, Knonaueramt,
   Kanton Zürich.

   ZWEI FASSUNGEN, und das ist der Kern dieses Abschnitts:

     kompakt   Was hier in Abschnitt 2 steht. Karte oben, Akte darunter,
               normale Höhen, kein Kleben, kein Zoom. Das sieht jeder
               Browser ohne Scroll-Timelines und jeder, der weniger Bewegung
               eingestellt hat. Die Karte steht dann auf der Kantonsansicht
               mit hervorgehobenem Bezirk — dem Endbild der Reise.
     Reise     Abschnitt 2b. Erst dort werden die Akte bildschirmhoch, erst
               dort klebt die Bühne, erst dort zoomt die Karte. Die grossen
               Höhen stehen bewusst NICHT hier: eine Sektion, die vier
               Bildschirme hoch ist, aber nichts animiert, wäre nur lang.

   Die Karte selbst ist Beiwerk (aria-hidden im Markup) — alles, was sie
   zeigt, steht daneben als Text. Kartengrundlage: OpenStreetMap, ODbL,
   siehe Kommentar in index.html und Impressum.
   ------------------------------------------------------------------------ */

.weg__intro { margin-block-end: var(--space-l); }
.weg__intro h2 { max-inline-size: 24ch; }

.weg {
  --marke-y: 0.8rem;
  position: relative;
  display: grid;
  gap: var(--space-l);
  margin-block-end: var(--space-m);
}

/* ---- Die Bühne mit der Karte ----
   Ohne Grund und ohne Unterkante: die Karte schwebt frei auf der Seite.
   Ein weisser Grund mit Linie las sich auf dem Telefon als Block, der den
   Text hart abschnitt. Dass der Text dort nicht durch die Karte läuft,
   regelt jetzt die Reise-Fassung (Abschnitt 2b, akt-aufloesen). */

/* Quadratisches Kartenfenster. Vorher hatte es das Seitenverhältnis der
   Kantons-Bounding-Box, also hochkant — darin verhungerte die querliegende
   Schweiz auf halber Höhe. Im Quadrat füllt der Kanton die Höhe und die
   Schweiz die Breite, beide bis auf 6 % Rand.
   Breitengetrieben (inline-size: 100%, Höhe aus aspect-ratio), damit das
   Fenster nie breiter wird als seine Spalte. Kein overflow: visible: die
   Karte ist ein Kartenfenster, und unter dem Zoom malte sie sonst über die
   Seite hinaus und zog eine waagrechte Bildlaufleiste auf. */
.karte {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
}

/* Kartenebenen. Alle Striche mit vector-effect: non-scaling-stroke — sonst
   würde eine 4.5-fach gezoomte Grenze zum Balken. */
.karte__schweiz, .karte__kanton, .karte__bezirk {
  vector-effect: non-scaling-stroke;
}
.karte__schweiz, .karte__kanton, .karte__bezirk {
  fill: var(--cyan-soft);
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linejoin: round;
}
/* Der Ort: ein Punkt, kein Umriss. Die Gruppe darum skaliert gegen den
   Zoom (siehe Abschnitt 2b), der Punkt bleibt darum auf jeder Stufe gleich
   gross. */
.karte__marke { fill: var(--blue-deep); stroke: var(--paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Der Pulsring gehört zur Bewegung und existiert nur in der Reise-Fassung. */
.karte__puls { display: none; }

/* ---- Die Akte an der senkrechten Spur ---- */

.weg__akte {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  /* v12: Platz für die nummerierte Marke (--marke) plus Abstand. */
  --marke: 2rem;
  padding-inline-start: calc(var(--marke) + var(--space-m));
  display: grid; gap: var(--space-l);
  counter-reset: akt;
}
/* Die Spur: graue Linie durch die Mitte der Marken. In der Reise-Fassung
   läuft sie genau von der ersten zur letzten Marke und bekommt eine cyane
   Füllung (::after), die mit dem Scrollen wächst. */
.weg__akte::before {
  content: "";
  position: absolute;
  inset-block: var(--marke-y) 0;
  inset-inline-start: calc(var(--marke) / 2 - 1px);
  inline-size: 2px;
  background: var(--line);
}

.akt { position: relative; }

/* Die Marke: ein nummeriertes Quadrat (01, 02, 03) auf der Spur, auf Höhe
   der ersten Textzeile. Die Nummer kommt aus einem CSS-Zähler. */
/* Die Akte liegen eine Ebene über der Spur: die Linie (::before/::after
   der Liste) wird nach den Akten gezeichnet und läge sonst über den
   Marken. */
.akt { counter-increment: akt; z-index: 1; }
.weg__akte::before, .weg__akte::after { z-index: 0; }
.akt::before {
  content: counter(akt, decimal-leading-zero);
  position: absolute;
  inset-block-start: calc(var(--marke-y) - var(--marke) / 2);
  inset-inline-start: calc((var(--marke) + var(--space-m)) * -1);
  inline-size: var(--marke); block-size: var(--marke);
  display: grid; place-items: center;
  background: var(--blue-deep); color: var(--white);
  border: 2px solid var(--blue-deep);
  outline: 4px solid var(--paper);
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
}

.akt__ort {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--blue-deep);
  hyphens: auto; overflow-wrap: break-word;
}
.akt__text {
  color: var(--ink-mute);
  margin-block-start: 0.4em;
}
/* Die globale Regel gibt jedem p die Satzbreite --measure. Im Akt bestimmt
   die Spalte die Breite, nicht der Text. */
.akt p { max-inline-size: none; }

.akt__stationen {
  list-style: none; margin: var(--space-s) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-s);
}
/* Chip: die konkrete Station als kleiner Beleg unter dem Akt. Kante statt
   Fläche — die Akte tragen die Farbe, die Stationen sind die Fussnote. */
.akt__station {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  padding: 0.35em 0.7em;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.weg__ziel {
  /* Das Ziel ist ein p und erbt sonst die globale Satzbreite --measure. */
  max-inline-size: none;
  /* #weg hat keinen Bodenabstand (Abschnitt 6), der Knopf trägt ihn selbst. */
  margin-block-end: var(--space-l);
}

/* Ab 820 px steht die Karte neben den Akten statt über ihnen. */
@media (min-width: 820px) {
  .weg {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  /* Die Karte bekommt die halbe Breite statt 0.85 Teile: quadratisch
     ist sie höher als vorher, und die Akte brauchen keine 1.15. */
  .karte { max-block-size: 68vh; }
  .weg__ziel { display: flex; justify-content: flex-end; }
}

/* ---------- 2b. Die Reise — Karte, Kleben, Zoom ----------------------------
   Hier erst wird aus dem kompakten Abschnitt die Reise. Alles in diesem
   Block — auch die Layout-Teile — steht in @supports UND in
   prefers-reduced-motion: no-preference. Das ist Absicht und keine
   Schlamperei: die bildschirmhohen Akte und die klebende Bühne existieren
   nur, um den Zoom zu tragen. Wo der Zoom nicht läuft, wären sie bloss ein
   Abschnitt, durch den man vier Bildschirme lang scrollt, ohne dass etwas
   passiert. Ohne Scroll-Timelines und bei reduzierter Bewegung bleibt darum
   die kompakte Fassung aus Abschnitt 2 stehen.

   DIE DREI EBENEN, an den Scrollfortschritt gekoppelt:

     0–14 %    Knonaueramt. Der Bezirk formatfüllend, Affoltern am Albis
               als Punkt darauf, ein ruhiger Puls darum.
     14–44 %   Fahrt hinaus. Das Knonaueramt blendet weg, der Kanton auf.
     44–56 %   Kanton Zürich.
     56–86 %   Fahrt hinaus. Der Kanton blendet weg, das Land auf.
     86–100 %  Schweiz.

   Die Fahrten haben je 30 % der Strecke, die Plateaus 14/12/14. Vorher
   waren es 20 % Fahrt auf 20 % Plateau — das war zu hastig, die Karte
   sprang eher um, als dass sie fuhr.

   DIE PLATEAUS SIND DER PUNKT, nicht Bequemlichkeit beim Schreiben der
   Keyframes. Eine durchlaufende Fahrt trifft jede Stufe nur für einen
   Augenblick — wer bei »Kanton Zürich« ankommt, sieht dann schon wieder
   etwas dazwischen. Jede Stufe hat darum ein Fünftel der Strecke, auf dem
   sich gar nichts bewegt, und die liegen dort, wo der zugehörige Akt in
   der Fenstermitte steht (bei contain 0 %, 50 % und 100 %). Wer die
   Zeitpunkte verschiebt, verschiebt beide Listen mit: karte-zoomen und
   ort-gegenhalten teilen sie sich.

   Der dritte Akt bekommt bewusst KEINE eigene Kartenebene: der Sitz der
   Arclumina AG ist hier nicht hinterlegt, und Erfinden ist bei einem
   Lebenslauf keine gestalterische Freiheit. Stattdessen tritt die Karte
   zurück (sie blendet auf ein Drittel ab), und der Akt übernimmt allein.
   Das ist auch die stärkere Lesart: die ersten zwei Schritte sind Orte, der
   dritte ist ein Entscheid.

   TIMELINE: benannte View-Timeline --reise auf .weg, Bereich »contain«.
   contain ist bei einem Element, das höher ist als das Fenster, genau die
   Strecke, auf der es das Fenster vollständig füllt — also exakt die Zeit,
   in der die Bühne klebt. entry/exit wären hier falsch: die liegen vor und
   nach dem Kleben.

   Die Akte takten sich dagegen jeder für sich über view() — jeder Akt weiss
   selbst, wo er im Fenster steht, und blendet auf, wenn er in die Lesezone
   kommt. Das ist robuster, als drei feste Abschnitte einer gemeinsamen
   Timeline zuzuteilen, und hält auf jeder Fensterhöhe.
   -------------------------------------------------------------------------- */

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

    /* v13: Akte 62vh statt 78vh — die Reise bleibt, die Strecke bis zum
       Knopf »Mehr über mich« wird um gut einen halben Bildschirm kürzer. */
    .weg { view-timeline-name: --reise; --akt-h: 62vh; --akt-letzt: 44vh; }

    /* Die Bühne klebt unter der Navigationsleiste. */
    .weg__buehne {
      position: sticky;
      inset-block-start: calc(var(--kopf-h) + var(--space-s));
      z-index: 1;
    }

    /* Jeder Akt bekommt eine Bildschirmhöhe und steht mittig darin: so ist
       immer genau einer in der Lesezone, und die Karte hat Strecke zum
       Zoomen. */
    .akt {
      min-block-size: var(--akt-h);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* Der letzte Akt ist kürzer: unter ihm folgt nur noch der Knopf, und
       eine halbe Akthöhe Leerraum davor war der grösste Scrollweg der
       Startseite. Die Spur endet darum eine halbe --akt-letzt vor dem Ende. */
    .akt:last-child { min-block-size: var(--akt-letzt); }
    /* Die Marke rutscht mit dem Text in die Mitte des hohen Kastens. */
    .akt::before { inset-block-start: calc(50% - var(--marke) / 2); }

    /* Die Spur läuft genau von Marke 01 bis Marke 03, nicht darüber
       hinaus ins Leere: die Marken sitzen in der Mitte bildschirmhoher Akte
       (--akt-h), also je eine halbe Akthöhe vom oberen und unteren Rand der
       Liste. Ein Akt, dessen Inhalt höher wird, verschiebt das leicht. */
    .weg__akte::before { inset-block: calc(var(--akt-h) / 2) calc(var(--akt-letzt) / 2); }

    /* ---- Die Karte ---- */

    /* Weiche Fensterkante. Während der Fahrt ist die nächste Ebene grösser
       als das Kartenfenster, und das SVG schnitt ihre Fläche als hartes
       Quadrat ab — ein hellblauer Block, wo die Bühne keinen mehr hat. Die
       Maske blendet die äusseren 6 % aus — aber NUR WÄHREND DER FAHRT. Auf
       den Plateaus füllen die Ebenen das Fenster bis auf 2 % und würden
       von einer festen Blende angeschnitten (so war es zuerst: der
       Bezirk verblasste oben und unten). karte-rand zieht die Maske darum
       auf den Plateaus auf 130 % auf, ihr Verlauf liegt dann ausserhalb
       des Fensters und wirkt nicht. */
    .karte {
      mask-image:
        linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
        linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
      mask-composite: intersect;
      mask-position: center;
      mask-repeat: no-repeat;
      animation-name: karte-rand;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --reise;
      animation-range: contain 0% contain 100%;
    }
    @keyframes karte-rand {
      0%,  14%, 44%, 56%, 86%, 100% { mask-size: 130% 100%, 100% 130%; }
      22%, 38%, 64%, 80%            { mask-size: 100% 100%, 100% 100%; }
    }

    .karte__zoom {
      will-change: transform;
      transform-box: view-box;
      transform-origin: 0 0;
      animation-name: karte-zoomen;
      /* Beidseitig weich (ease-in-out), nicht var(--ease): das ist eine
         Ease-out-Kurve und riss die Fahrt vom Plateau weg los. Die Fahrt
         beginnt und endet im Stillstand, also muss sie beides weich tun.
         ACHTUNG: ort-gegenhalten fährt dieselbe Kurve und dieselben
         Zeitpunkte — sonst driftet der Punkt mitten in der Fahrt. */
      animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
      animation-fill-mode: both;
      animation-timeline: --reise;
      animation-range: contain 0% contain 100%;
    }
    @keyframes karte-zoomen {
      /* Jede Ebene füllt das Fenster bis auf 2 % Rand — auf den Plateaus
         blendet die Fensterkante nichts aus (karte-rand), der Platz gehört
         also den Formen. Werte aus getBBox(): Mitte der Box auf 500/500,
         längste Seite auf 960 Einheiten. */
      0%, 14%   { transform: translate(-62.5px, -2209.8px) scale(2.7858); }
      /* Der Kanton steht etwas tiefer als geometrisch mittig: seine Masse
         liegt im breiten Norden, der schmale Süden zieht den optischen
         Schwerpunkt nach oben. 10 Einheiten nach unten gleichen das aus,
         mehr lässt der knappe Rand nicht zu (daher 950 statt 960). */
      44%, 56%  { transform: translate(123.1px, 34.8px) scale(0.7538); }
      86%, 100% { transform: translate(528.3px, 224.4px) scale(0.1327); }
    }

    /* EINE UMRUNDUNG ZUR ZEIT. Jede Stufe hat genau ein Gebiet um den
       Punkt, das vorherige ist dann weg: Knonaueramt, dann Kanton, dann
       Land. Sie lösen sich während der Fahrt gegenseitig ab, und genau in
       diesem Moment sind beide halb da — das ist das Bild vom Kreis, der
       grösser wird. Drei gestapelte Umrisse gleichzeitig wären wieder eine
       Karte mit Ebenen, und die Frage »wo bin ich gerade« beantwortet sich
       dann nicht mehr von selbst.

       JE EIN DURCHGEHENDER VERLAUF ÜBER DIE GANZE STRECKE, nicht zwei
       kurze Animationen pro Element. Der Kanton hatte hier eine Zeit lang
       »auf« und »ab« als zwei Einträge mit eigenen Bereichen — und war
       dadurch von Anfang an sichtbar: bei animation-fill-mode: both hält
       auch die zweite Animation ausserhalb ihres Bereichs ihren
       Startwert (opacity: 1), und die spätere gewinnt. Zwei Animationen
       auf derselben Eigenschaft überschreiben sich, sie addieren sich
       nicht. Ein Keyframe-Satz mit Halteplateaus löst das ohne Sonderfall.

       Die Zeitpunkte spiegeln sich: erste Ablösung 12–46 %, zweite
       56–90 %. Beide Übergänge sehen damit gleich aus.

       Die Blenden sind absichtlich LÄNGER als die Fahrt (20–40 % bzw.
       60–80 %) und laufen ins Plateau hinein nach: die neue Umrundung
       kommt noch an, während die Karte schon steht. Kurze Blenden genau
       auf der Fahrt lasen sich als Schnitt mitten in der Bewegung — zwei
       Ereignisse gleichzeitig. So ist es eine durchgehende Bewegung mit
       einem ruhigen Ausklang.

       DIE WELLE AUS AFFOLTERN. Kanton und Land blenden nicht nur auf, sie
       breiten sich als Kreis vom Ortspunkt aus (clip-path: circle) — das
       Bild vom Kreis, der grösser wird, wörtlich genommen, und das Echo des
       Pulses. Die Welle fährt dieselbe Kurve und dieselben Zeitpunkte wie
       karte-zoomen; die Blende darüber macht die Kreiskante weich.
       Koordinaten: bei SVG-Elementen ist die Referenzbox die fill-box, der
       Mittelpunkt steht darum relativ zur Bounding Box des Pfads
       (Ort 150.6/980.6 minus bbox-Ursprung). Der Endradius ist die grösste
       Distanz vom Ort zum Umriss, ausgemessen per getPointAtLength, plus
       etwas Rand für den Strich. Wer die Pfade austauscht, misst neu. */
    .karte__bezirk, .karte__kanton, .karte__schweiz {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --reise;
      animation-range: contain 0% contain 100%;
    }
    .karte__bezirk  { animation-name: ebene-knonaueramt; }
    .karte__kanton  { animation-name: ebene-kanton, welle-kanton; }
    .karte__schweiz { animation-name: ebene-schweiz, welle-schweiz; }
    .karte__kanton, .karte__schweiz {
      animation-timing-function: linear, cubic-bezier(0.65, 0, 0.35, 1);
    }
    @keyframes welle-kanton {
      0%, 14%   { clip-path: circle(0px at 150.6px 980.3px); }
      44%, 100% { clip-path: circle(1080px at 150.6px 980.3px); }
    }
    @keyframes welle-schweiz {
      0%, 56%   { clip-path: circle(0px at 3979.6px 1249.6px); }
      86%, 100% { clip-path: circle(4820px at 3979.6px 1249.6px); }
    }
    @keyframes ebene-knonaueramt {
      0%,  12%  { opacity: 1; }
      42%, 100% { opacity: 0; }
    }
    @keyframes ebene-kanton {
      0%,  18%  { opacity: 0; }
      46%, 58%  { opacity: 1; }
      88%, 100% { opacity: 0; }
    }
    @keyframes ebene-schweiz {
      0%,  56%  { opacity: 0; }
      90%, 100% { opacity: 1; }
    }

    /* Gegenskalierung des Ortspunkts. Ohne sie wäre der Punkt auf der
       ersten Stufe ein Fleck und auf der Landesansicht unsichtbar: er
       sitzt ja im selben Koordinatensystem wie die Grenzen. Die Werte sind
       die Kehrwerte der drei Zoomstufen, zu denselben Zeitpunkten wie
       karte-zoomen — wer die eine Liste verschiebt, verschiebt die andere
       mit. */
    .karte__ort {
      transform-box: fill-box;
      transform-origin: center;
      animation-name: ort-gegenhalten;
      animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
      animation-fill-mode: both;
      animation-timeline: --reise;
      animation-range: contain 0% contain 100%;
    }
    @keyframes ort-gegenhalten {
      0%, 14%   { scale: 0.359; }
      44%, 56%  { scale: 1.327; }
      86%, 100% { scale: 7.533; }
    }

    /* Der Puls auf Affoltern: zeitgesteuert, nicht scrollgesteuert. Er ist
       kein Schritt der Reise, sondern das Zeichen »hier fängt sie an«.
       transform-box: fill-box, damit die Mitte des Kreises der Drehpunkt
       ist und nicht die Ecke des Koordinatensystems. */
    .karte__puls {
      display: block;
      fill: none;
      stroke: var(--cyan);
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
      transform-box: fill-box;
      transform-origin: center;
      animation: karte-puls 3.2s var(--ease) infinite;
    }
    @keyframes karte-puls {
      0%        { opacity: 0.7; scale: 1; }
      70%, 100% { opacity: 0;   scale: 3.4; }
    }

    /* ---- Die Spur und die Akte ---- */

    /* Die cyane Füllung wächst über der grauen Spur mit dem Fortschritt. */
    .weg__akte::after {
      content: "";
      position: absolute;
      inset-block: calc(var(--akt-h) / 2) calc(var(--akt-letzt) / 2);
      inset-inline-start: calc(var(--marke) / 2 - 1px);
      inline-size: 2px;
      background: var(--cyan);
      transform-origin: center top;
      animation-name: spur-fuellen;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --reise;
      animation-range: contain 0% contain 100%;
    }
    @keyframes spur-fuellen {
      from { scale: 1 0; }
      to   { scale: 1 1; }
    }

    /* Fokus: der Akt in der Lesezone steht gross und kontrastreich, die
       anderen treten zurück. Jeder Akt taktet sich über seine eigene
       view()-Timeline — er ist in der Lesezone, wenn er in der Fenstermitte
       steht, und das gilt auf jeder Fensterhöhe. Die gedimmten Akte sind
       nie die, die man gerade liest: sie stehen am oberen oder unteren
       Rand, und Scrollen stellt sie voll her.

       v13: gedimmt wird der INHALT des Akts, nicht der Akt. Lag die
       Deckkraft auf .akt, wurde auch die Marke (::before) durchsichtig, und
       die Spur schien durch das Quadrat hindurch. Die Marke bleibt so immer
       deckend und die Linie läuft sauber um sie herum. Die Kinder takten
       über die benannte Timeline ihres Akts. Das Verkleinern ist weg. */
    .akt { view-timeline-name: --akt; }
    .akt > * {
      animation-name: akt-fokus;
      animation-timing-function: var(--ease-out);
      animation-fill-mode: both;
      animation-timeline: --akt;
      animation-range: cover 8% cover 92%;
    }
    @keyframes akt-fokus {
      0%       { opacity: 0.32; }
      36%, 64% { opacity: 1; }
      100%     { opacity: 0.32; }
    }
    /* Die Marke schaltet mit: leer (weiss, graue Kante, graue Ziffer),
       solange der Akt noch kommt; gefüllt mit Cyan-Ring in der Lesezone;
       gefüllt ohne Ring danach. Die dritte bleibt aktiv — sie ist das
       Jetzt. */
    .akt::before {
      animation-name: marke-erledigen;
      animation-timing-function: var(--ease-out);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 8% cover 92%;
    }
    .akt--jetzt::before { animation-name: marke-jetzt; }
    @keyframes marke-erledigen {
      0%       { background-color: var(--paper); color: var(--ink-mute); border-color: var(--line); box-shadow: 0 0 0 0 var(--cyan); }
      36%, 64% { background-color: var(--blue-deep); color: var(--white); border-color: var(--blue-deep); box-shadow: 0 0 0 7px var(--cyan); }
      100%     { background-color: var(--blue-deep); color: var(--white); border-color: var(--blue-deep); box-shadow: 0 0 0 0 var(--cyan); }
    }
    @keyframes marke-jetzt {
      0%        { background-color: var(--paper); color: var(--ink-mute); border-color: var(--line); box-shadow: 0 0 0 0 var(--cyan); }
      36%, 100% { background-color: var(--blue-deep); color: var(--white); border-color: var(--blue-deep); box-shadow: 0 0 0 7px var(--cyan); }
    }

    /* ---- Telefon: Karte über den Akten statt daneben ----
       Auf dem Desktop stehen Karte und Akte nebeneinander, und die Plateaus
       treffen die Akte von selbst. Auf dem Telefon steht die Bühne ÜBER den
       Akten und klebt dort — mit voller Breite nahm sie das halbe Fenster,
       die Akte liefen unter ihr durch, und der Zoom lief am Text vorbei:
       die Fahrt hinaus fand statt, während gar kein Akt zu sehen war.

       Darum hier drei Dinge, die zusammengehören:
         1. Die Karte wird kleiner (--karte-m) und steht mittig.
         2. Jeder Akt ist genau so hoch wie der Streifen UNTER der Bühne.
            Dann füllt Akt 1 den Streifen, wenn die Bühne zu kleben beginnt,
            Akt 3, wenn die Strecke endet — und Akt 2 liegt exakt bei 50 %.
            Das sind die Plateaus aus karte-zoomen, ohne neue Keyframes.
         3. Die Timeline zählt erst ab der Klebekante (view-timeline-inset),
            nicht ab der Fensteroberkante. Sonst begänne die Strecke, bevor
            die Bühne steht.
       svh statt vh: der Streifen soll auch bei eingeblendeter
       Browserleiste ganz sichtbar sein.

       DER TEXT LÖST SICH VOR DER KARTE AUF. Die Bühne hat keinen Grund
       mehr (Abschnitt 2), der Text liefe sonst durch die Karte. Jede Zeile
       und jeder Chip hat darum eine eigene Timeline auf den Streifen unter
       der Bühne und ist genau dann weg, wenn die eigene Oberkante die Karte
       erreicht — pro Element und nicht pro Akt, weil die Akte verschieden
       hoch sind. akt-fokus ist hier aus: eine Deckkraft-Regel reicht.
       Spur und Marken fallen weg: ohne Grund liefe die senkrechte Linie
       hinter der Karte bis zur Navigation hoch. Den Fortschritt zeigt auf
       dem Telefon die Karte selbst. */
    @media (max-width: 819px) {
      .weg {
        --karte-m: min(40svh, 100vw - 2 * var(--gutter));
        --kleben: calc(var(--kopf-h) + var(--space-s));
        --buehne-unten: calc(var(--kleben) + var(--karte-m));
        view-timeline-inset: var(--kleben) 0;
        gap: 0;
      }
      .karte {
        inline-size: var(--karte-m);
        max-inline-size: 100%;
        margin-inline: auto;
        animation-name: karte-rand, karte-weiten;
        animation-timing-function: linear, cubic-bezier(0.65, 0, 0.35, 1);
      }
      /* Die Schweiz liegt quer und hat im quadratischen Fenster nur dessen
         Breite — auf dem Telefon oft deutlich weniger als die Spalte. Auf
         der letzten Fahrt wird das Fenster darum bis zur Spaltenbreite
         breiter (höchstens das 1.5-Fache), und die Schweiz wächst mit.
         Die negativen Ränder halten die Bühne dabei auf --karte-m Höhe:
         nichts darunter verschiebt sich, und --buehne-unten stimmt weiter.
         Oben und unten ragt nur leeres, durchsichtiges Fenster über; die
         Schweiz selbst ist 0.62 × Breite hoch und passt bis zum 1.5-Fachen
         in die Bühne. Gleiche Kurve und Zeitpunkte wie karte-zoomen. */
      @keyframes karte-weiten {
        0%, 56% { inline-size: var(--karte-m); margin-block: 0; }
        86%, 100% {
          inline-size: min(100%, var(--karte-m) * 1.5);
          margin-block: calc((var(--karte-m) - min(100%, var(--karte-m) * 1.5)) / 2);
        }
      }
      .weg__akte { gap: 0; padding-inline-start: 0; }
      .weg__akte::before, .weg__akte::after, .akt::before { display: none; }
      /* :last-child mit, sonst gewänne die kürzere Desktop-Höhe von oben. */
      .akt, .akt:last-child { min-block-size: calc(100svh - var(--buehne-unten)); }
      .akt__stationen { animation: none; }
      .akt__ort, .akt__text, .akt__station {
        animation: akt-aufloesen linear both;
        animation-timeline: view(block var(--buehne-unten) 0);
        /* Feste 2rem vor der Karte, kein Anteil der Strecke: der Streifen
           ist je nach Telefon verschieden hoch, und ein Prozentwert liess
           auf kurzen Schirmen den Titel des hohen zweiten Akts schon auf
           seinem Plateau verwischen. */
        animation-range: contain calc(100% - 2rem) contain 100%;
      }
      @keyframes akt-aufloesen {
        from { opacity: 1; translate: 0 0; filter: blur(0); }
        to   { opacity: 0; translate: 0 -0.5rem; filter: blur(4px); }
      }
    }
  }
}

/* ---------- 3. Meine Schwerpunkte — drei ruhige Karten --------------------
   Drei gleich breite Karten nebeneinander, ohne Hover-Abhängigkeit und ohne
   Auf- und Zuklappen. Seit v16 trägt die Karte nur noch Thema und
   Zuspitzung; Haltung und »Mehr erfahren« sind raus.
   Belege gibt es auf der Startseite keine mehr — .tafel__zahl (bis 4rem),
   .tafel__fakt und die Quellenangabe in .tafel__fuss sind ersatzlos
   entfernt, die Zahlen stehen nur noch auf /themen in .nachweis. Die
   Karte ist dadurch ruhiger; der gewonnene Platz geht in Weissraum und
   Schriftgrad, nicht in neuen Inhalt.

   .tafeln statt .cards-grid, damit kein alter Selektor (auch nicht mehr
   vorhandener JS-Module) versehentlich wieder greift. .card kommt aus
   style.css (Abschnitt 4.3) für Grund, Kante und Innenabstand. Die Karte ist
   hier ein li statt eines a, weil sie mehr als nur einen Link enthält;
   a.card:hover aus style.css greift deshalb nicht und wird unten für .tafel
   nachgebaut.
   ----------------------------------------------------------------------- */

.schwerpunkte__intro { max-inline-size: var(--measure); margin-block-end: var(--space-l); }

.tafeln {
  list-style: none;
  padding: 0;
  margin-block-end: var(--space-l);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

/* Cyan-Balken oben, dieselbe Sprache wie die Stimmen-Karte (.quote,
   style.css 4.4). Seit v12 alle drei Karten gleich — die Themen
   unterscheiden sich im Inhalt, nicht in der Farbe. */
.tafel {
  --akzent: var(--cyan);
  position: relative; /* Anker für den gestreckten Link (.tafel__link::after) */
  border-inline-start: 1px solid var(--line);
  border-block-start: 6px solid var(--akzent);
}

/* Der Themenname ist die Überschrift und steht über einer Haarlinie —
   dieselben drei Wörter wie auf /themen. */
.tafel__titel {
  font-size: var(--step-2); line-height: 1.15;
  padding-block-end: var(--space-s);
  border-block-end: 1px solid var(--line);
}
/* Die Zuspitzung darunter, dunkelblau und eine Stufe kleiner. */
.tafel__claim {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); line-height: 1.2;
  color: var(--blue-deep);
}
/* Der Titel liest sich als Überschrift, nicht als blauer Link — die
   Fläche macht schon die ganze Karte klickbar. */
.tafel__link { color: inherit; text-decoration: none; }
.tafel__link::after { content: ""; position: absolute; inset: 0; }
/* Der Ring sitzt auf der ganzen Karte, nicht auf dem Link selbst: ein Ring
   um die unsichtbare Linkzeile fiele kaum auf. */
.tafel__link:focus-visible { outline: none; }
.tafel:has(.tafel__link:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Die globale Regel gibt jedem p die Satzbreite --measure. In der Karte
   bestimmt die Spalte die Breite, nicht der Text. */
.tafel p { max-inline-size: none; }

/* Rückmeldung beim Überfahren: der Titel färbt sich, die Karte bleibt
   stehen. Seit v16 trägt die Karte keine »Mehr erfahren«-Zeile mehr, die
   bisher diese Rolle hatte (Joel: »Mehr erfahren« überall raus). */
.tafel__titel { transition: color 0.2s var(--ease); }
.tafel:hover .tafel__titel,
.tafel:has(.tafel__link:focus-visible) .tafel__titel { color: var(--magenta-dark); }

/* ---------- 3.1 Ab 900 px — drei Spalten -----------------------------------
   Die drei Karten stehen nebeneinander. Damit Titel und Zuspitzung über
   alle drei Karten auf derselben Linie stehen, bekommt jede Karte per
   Subgrid Zugriff auf zwei gemeinsame Zeilenspuren der äusseren Liste:
   .tafeln definiert sie (eine pro Kind-Element, zwei Kinder je Karte),
   jede .tafel spannt sie mit grid-row: span 2 auf und übernimmt sie als
   eigenes Zeilenraster. So
   richtet sich jede Zeile an der höchsten ihrer drei Ausprägungen aus, ohne
   dass irgendwo eine Höhe geraten werden müsste. */
@media (min-width: 900px) {
  .tafeln {
    /* minmax(0, 1fr) statt 1fr: die Vorgabe 1fr ist minmax(auto, 1fr), und
       auto laesst eine Spalte wachsen, sobald ihr laengstes Wort breiter ist
       als der gleiche Anteil — »Grundkompetenzen« machte die erste Karte
       rund 30 px breiter als die beiden anderen. Die 0-Untergrenze bindet
       die Spalte an den Anteil, nicht an ihren Inhalt. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    column-gap: var(--space-m);
  }
  .tafel {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--space-s);
  }
}

/* ---------- 4. Stimmen -------------------------------------------
   Sektion, Karte und Raster sind Komponenten in style.css (4.4),
   weil dieselben Bausteine auch auf /unterstuetzen stehen. Hier bleibt
   nichts übrig, was nur die Home betrifft.
   -------------------------------------------------------------------------- */

/* ---------- 5. Schluss-Band ----------------------------------------------
   Seit v16 in style.css (4.9): auf allen Seiten gleich gesetzt. */

/* ---------- 6. Nahtstellen — kein doppeltes --space-xl ---------------------
   .section bringt padding-block: var(--space-xl) oben UND unten mit. Zwischen
   Mein Weg und Schwerpunkte stünden sonst zwei volle Polster; #weg verzichtet
   auf seinen Bodenabstand, der Knopf »Mehr über mich« trägt --space-l. */
#weg {
  padding-block-end: 0;
}