/* =========================================================================
   Joel Sidler — Seiten-CSS: Themen (Kompass)
   Gilt für themen.html. Traegt ausschliesslich den politischen Kompass in
   der Intro-Sektion — Netz, Flaeche, Achsen und die Karte, die beim
   Ueberfahren eines Werts aus seinem Datenpunkt aufgeht — sowie die
   Kompass-Leiste direkt danach, vor dem ersten Themenblock.
   Die Themenbloecke liegen in css/pages/themen.css.
   Rund statt hartkantig, bewusst: die Karte lebt von der Pillenform.
   ========================================================================= */

/* ---------- Politischer Kompass (themen.html) ------------------------------ */

.kompass-intro { --r: clamp(5.5rem, 28vw, 8rem); display: grid; gap: var(--space-l); align-items: center; }

.kompass {
  --pille: 999px;
  inline-size: 100%;
  max-inline-size: 30rem;
  margin: 0 auto;
}

/* Grundzustand (Telefon, Touch): Grafik oben, darunter die acht Werte als
   kompakte Klappzeilen — Name, Balken und Wert immer sichtbar, die
   Begruendung klappt auf. Gebaut mit <details>/<summary>, das funktioniert
   ohne JavaScript. Die Karte steht als Geschwister NEBEN dem <details>:
   mobil schaltet [open] sie ein, auf dem Desktop traegt dieselbe Karte das
   Pop-up und der Zustand des <details> spielt keine Rolle. */
.kompass__feld {
  position: relative;
  padding-block-start: calc(var(--r) * 2 + var(--space-m));
}

.kompass__netz,
.kompass__flaeche {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: calc(var(--r) * 2);
  max-inline-size: none;
  translate: -50% 0;
  overflow: visible;
}
.kompass__netz polygon,
.kompass__netz line {
  fill: none;
  stroke: var(--line);
  vector-effect: non-scaling-stroke;
}
.kompass__netz polygon:not(.kompass__rand) { stroke-dasharray: 2 4; }
.kompass__netz .kompass__rand { stroke: var(--ink-mute); stroke-opacity: 0.3; }

.kompass__verlauf-a { stop-color: var(--cyan); }
.kompass__verlauf-b { stop-color: var(--blue-deep); }
.kompass__flaeche polygon {
  fill: url(#kompass-verlauf);
  fill-opacity: 0.4;
  stroke: var(--blue-deep);
  stroke-width: 2;
  stroke-linejoin: round;
}

.kompass__achsen { display: grid; gap: 0; }
/* --px/--py ist die Lage des Datenpunkts, gemessen ab der Mitte der Grafik. */
.kompass__achse {
  --winkel: calc(var(--achse) * 45deg);
  --px: calc(sin(var(--winkel)) * var(--r) * var(--wert) / 100);
  --py: calc(-1 * cos(var(--winkel)) * var(--r) * var(--wert) / 100);
}
.kompass__punkt { display: none; }

/* Telefon und Touch: die Grafik zeigt ihre acht Punkte samt Wert und ist
   antippbar. Ein Tipp auf einen Punkt klappt die passende Zeile darunter auf
   (js/main.js); die offene Zeile faerbt ihren Punkt ein. Alle Details sind
   per name="kompass" exklusiv — es ist immer hoechstens eine offen. */
@media not ((min-width: 1000px) and (hover: hover)) {
  .kompass__punkt {
    display: block;
    position: absolute;
    inset-block-start: var(--r);          /* Netzmitte: das Netz steht oben, 2r hoch */
    inset-inline-start: 50%;
    z-index: 1;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border: 2px solid var(--blue-deep);
    border-radius: 50%;
    background: var(--white);
    translate: calc(var(--px) - 50%) calc(var(--py) - 50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: scale 0.3s var(--ease-spring), background-color 0.2s var(--ease);
  }
  /* Trefferflaeche rund 34 px — die engsten Nachbarn (42/39) liegen etwa so weit auseinander. */
  .kompass__punkt::before { content: ""; position: absolute; inset: -0.75rem; border-radius: 50%; }
  /* Der Wert steht als Pille aussen neben dem Punkt, auf der Achse nach aussen
     geschoben. Die Zahl kommt ueber einen Zaehler aus --wert, damit sie nicht
     doppelt im Markup gepflegt werden muss. */
  .kompass__punkt::after {
    counter-reset: wert var(--wert);
    content: counter(wert);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    background: var(--blue-deep);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    translate:
      calc(sin(var(--winkel)) * 1.35rem - 50%)
      calc(-1 * cos(var(--winkel)) * 1.35rem - 50%);
    transition: background-color 0.2s var(--ease);
  }
  /* Offene Zeile und ihr Punkt gehoeren sichtbar zusammen: beide cyan, der
     Punkt liegt ueber seinen Nachbarn. Kam der Tipp vom Punkt (.is-gewaehlt,
     js/main.js), rueckt die Zeile zuoberst direkt unter die Grafik — Punkt und
     Text stehen dann in einem Blick. Tippt man in der Liste, bleibt die Zeile
     wo sie ist, sonst spraenge sie unter dem Finger weg. */
  .kompass__achse:has(.kompass__falt[open]) .kompass__punkt { z-index: 2; scale: 1.35; background: var(--cyan); }
  .kompass__achse:has(.kompass__falt[open]) .kompass__punkt::after { background: var(--cyan); }
  .kompass__achse:has(.kompass__falt[open]) {
    box-shadow: inset 3px 0 var(--cyan);
    background: color-mix(in srgb, var(--cyan) 7%, transparent);
  }
  .kompass__achse:has(.kompass__falt[open]) :is(.kompass__knopf, .kompass__text) { padding-inline: var(--space-s); }
  .kompass__achse:has(.kompass__falt[open]) .kompass__wert { background: var(--cyan); }
  .kompass__achse.is-gewaehlt { order: -1; }
}
.kompass__achse { border-block-end: 1px solid var(--line); }
/* Linie oben an der Liste, nicht an der ersten Zeile: die gewaehlte Zeile rueckt per order nach oben. */
.kompass__achsen { border-block-start: 1px solid var(--line); }

.kompass__falt { display: block; }

.kompass__knopf {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem var(--space-s);
  inline-size: 100%;
  padding-block: var(--space-s);
  cursor: pointer;
  list-style: none;           /* Standard-Dreieck weg, der Pfeil steht im Markup */
}
.kompass__knopf::-webkit-details-marker { display: none; }

/* Pfeil statt Dreieck: dreht sich beim Aufklappen. Rein dekorativ, den
   Zustand meldet <details> selbst. */
.kompass__pfeil {
  inline-size: 0.45em; block-size: 0.45em;
  border-inline-end: 2px solid var(--blue-deep);
  border-block-end: 2px solid var(--blue-deep);
  rotate: 45deg;
  translate: 0 -0.12em;
  transition: rotate 0.2s var(--ease);
}
.kompass__falt[open] .kompass__pfeil { rotate: -135deg; translate: 0 0.12em; }
.kompass__knopf::after {
  content: "";
  grid-column: 1 / -1;
  block-size: 4px;
  border-radius: var(--pille);
  background:
    linear-gradient(var(--cyan) 0 0) no-repeat 0 0 / calc(var(--wert) * 1%) 100%,
    var(--line);
}
.kompass__name {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.25;
}
.kompass__wert {
  display: inline-block;
  min-inline-size: 2.6em;
  padding: 0.25em 0.65em;
  border-radius: var(--pille);
  background: var(--blue-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-align: center;
}

.kompass__insel { display: none; }
.kompass__falt[open] + .kompass__insel { display: block; }
/* Aufgeklappt steht nur der Text in der Zeile — Name, Wert und Balken sind
   schon im <summary> zu sehen. */
.kompass__kopf { display: none; }
.kompass__text {
  padding-block-end: var(--space-m);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* Mit Maus und genug Breite: klein rechts neben dem Text, Namen rundherum.
   Faehrt man ueber einen Wert, waechst aus seinem Punkt im Netz die Karte
   mit Name, Wert und Begruendung. */
@media (min-width: 1000px) and (hover: hover) {
  /* Die Spalte haengt am Radius: waechst er, wachsen die Randbeschriftungen
     mit — sonst liefe »Restriktive Migrationspolitik« aus dem Rahmen. */
  /* Die Textspalte ist fest und schmal, die Grafik nimmt den Rest. Vorher war
     es umgekehrt (Text 1fr, Grafik 35.5rem fest) — dann sass der Kreismittel-
     punkt so weit rechts, dass nach Osten nur rund 280 px blieben. Die Karten
     poppen neu in die Richtung ihres Punktes auf und brauchen diesen Raum:
     mit 19rem Textspalte rueckt der Mittelpunkt nach links und es sind rund
     390 px. */
  .kompass-intro {
    --r: 9.25rem;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  }
  .kompass { max-inline-size: none; }

  .kompass__feld {
    block-size: calc(var(--r) * 2 + 8.5rem);
    padding: 0;
  }
  .kompass__netz,
  .kompass__flaeche { inset-block-start: 50%; translate: -50% -50%; }

  .kompass__achsen { display: block; border: 0; }
  .kompass__achse,
  .kompass__achse:first-child { border: 0; }
  .kompass__pfeil { display: none; }

  /* <li> bleibt statisch: seine Kinder beziehen sich auf .kompass__feld, darum
     liegen alle acht Karten im selben Raster — Hover schlaegt trotzdem aufs <li> durch.
     --px/--py ist die Lage des Datenpunkts, gemessen ab der Mitte der Grafik. */
  .kompass__punkt {
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 0.65rem;
    block-size: 0.65rem;
    border: 2px solid var(--blue-deep);
    border-radius: 50%;
    background: var(--white);
    translate: calc(var(--px) - 50%) calc(var(--py) - 50%);
    transition: scale 0.4s var(--ease-spring), background-color 0.2s var(--ease),
                opacity 0.2s var(--ease);
  }
  /* Der Punkt ist klein — die Trefferflaeche darf grosszuegiger sein. */
  .kompass__punkt::before { content: ""; position: absolute; inset: -0.7rem; border-radius: 50%; }

  /* Ruhesignal: vor dem ersten Hover verriet nichts, dass an den Punkten etwas
     zu holen ist. Jeder Punkt traegt darum einen leisen Cyan-Halo.

     Der Halo ist der RUHEZUSTAND, keine Vorfuehrung: er steht auch ohne
     Scroll-Timelines und bei reduzierter Bewegung sofort da. Das ist der
     ganze Punkt — ein Signal, das nach zwei Sekunden Scrollen weg ist, ist
     fuer eine dauerhaft vorhandene Moeglichkeit kein Signal.

     Die erste Fassung (22.09.2026) liess ihn aufblenden und wieder
     verschwinden. Das war falsch gedacht: eine Scroll-Animation laeuft nicht
     ab, sie wird vom Scrollbalken durchgezogen. Wer zur Grafik scrollt und
     dort stehenbleibt — also genau das tut, was man vor einem Smartspider
     tut — fror mitten im Verlauf ein und sah acht halbtransparente Ringe
     stehen. Ein Verlauf, der auf null zurueckgeht, vertraegt das Durchziehen
     nicht; einer, der auf seinem Ruhezustand endet, schon.

     Ring statt Flaeche, damit der Punkt nie verdeckt wird. */
  .kompass__punkt::after {
    content: "";
    position: absolute;
    inset: -0.4rem;
    border: 1.5px solid var(--cyan);
    border-radius: 50%;
    opacity: 0.45;
    pointer-events: none;
    transition: inset 0.2s var(--ease), border-color 0.2s var(--ease),
                border-width 0.2s var(--ease);
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* Die Zeitachse ist das Feld, nicht der Punkt. Ein Punkt ist rund 10 px
         gross — seine eigene entry-Phase ist genau 10 px lang, der ganze Puls
         waere in einem Frame vorbei. Das Feld ist rund 450 px hoch und traegt
         die Achse darum als benannte Timeline, wie .weg in home.css. */
      .kompass__feld { view-timeline-name: --kompass; }

      /* Langschreibweise, keine animation-Kurzform: die Kurzform setzt
         animation-duration auf ihren Anfangswert zurueck, und bei
         scroll-getriebenen Animationen muss der "auto" bleiben — sonst fuellt
         die Animation ihren Bereich nicht. Gilt im ganzen Projekt. */
      .kompass__punkt::after {
        animation-name: kompass-punkt-puls;
        animation-timing-function: var(--ease-out);
        animation-fill-mode: both;
        animation-timeline: --kompass;
      }

      /* Acht leicht versetzte Bereiche statt eines gemeinsamen Delays: ein
         Delay wird auf einer Scroll-Timeline als Anteil der eigenen Laufzeit
         interpretiert, nicht als Wallclock-Zeit, und waere darum kaum
         steuerbar. Versetzte animation-range-Werte sind deterministisch —
         dasselbe Mittel wie bei .akt__ort in home.css.

         Gerechnet in cover, nicht in entry: die Flaeche darunter zieht bis
         cover 45 % auf, und das Ruhesignal soll danach kommen, nicht waehrend
         die Grafik noch entsteht. Ab cover 33 % steht das Feld ganz im Bild,
         ab cover 67 % faengt es an zu gehen — der Puls liegt dazwischen. */
      .kompass__achse:nth-child(1) .kompass__punkt::after { animation-range: cover 42% cover 53%; }
      .kompass__achse:nth-child(2) .kompass__punkt::after { animation-range: cover 44% cover 55%; }
      .kompass__achse:nth-child(3) .kompass__punkt::after { animation-range: cover 46% cover 57%; }
      .kompass__achse:nth-child(4) .kompass__punkt::after { animation-range: cover 48% cover 59%; }
      .kompass__achse:nth-child(5) .kompass__punkt::after { animation-range: cover 50% cover 61%; }
      .kompass__achse:nth-child(6) .kompass__punkt::after { animation-range: cover 52% cover 63%; }
      .kompass__achse:nth-child(7) .kompass__punkt::after { animation-range: cover 54% cover 65%; }
      .kompass__achse:nth-child(8) .kompass__punkt::after { animation-range: cover 56% cover 67%; }
      /* Endet auf dem Ruhezustand (opacity 0.45, scale 1), nicht auf null.
         Dadurch ist Durchziehen unkritisch: wo der Leser auch stehenbleibt,
         der Zwischenstand liegt zwischen "noch nicht da" und "da". */
      @keyframes kompass-punkt-puls {
        from { opacity: 0;    scale: 0.5; }
        to   { opacity: 0.45; scale: 1; }
      }
    }
  }

  .kompass__knopf {
    --abstand: calc(var(--r) + 0.6rem);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: block;
    inline-size: max-content;
    max-inline-size: 7.5rem;
    padding: 0;
    text-align: var(--ausrichtung, center);
    translate:
      calc(sin(var(--winkel)) * var(--abstand) + var(--ax))
      calc(-1 * cos(var(--winkel)) * var(--abstand) + var(--ay));
    /* Hier fuehrt Hover, nicht Klick — der Zeiger soll nichts anderes versprechen. */
    cursor: default;
    transition: opacity 0.2s var(--ease);
  }
  .kompass__knopf::after { content: none; }
  /* balance bricht am Leerzeichen statt an der weichen Trennstelle (»Finanz-/politik«) */
  .kompass__name {
    display: block;
    margin-block-end: 0.3rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-mute);
    text-wrap: balance;
    transition: color 0.2s var(--ease);
  }
  .kompass__wert {
    font-size: 0.85rem;
    transition: scale 0.4s var(--ease-spring), background-color 0.2s var(--ease);
  }

  /* Beschriftung wegfuehrend vom Netz: --ax/--ay verschieben sie um die eigene Groesse. */
  /* --ax/--ay verschieben Beschriftung UND Karte um die eigene Groesse vom
     Netz weg. --ursprung-* ist die Kante, die dabei zum Netz zeigt: die Karte
     klappt von dort auf, nicht aus ihrer eigenen Mitte. Beides haengt an
     derselben Himmelsrichtung und gehoert darum in dieselbe Zeile. */
  .kompass__achse:nth-child(1) { --ax: -50%;  --ay: -100%; --ursprung-x: center; --ursprung-y: bottom; }
  .kompass__achse:nth-child(2) { --ax: 0%;    --ay: -100%; --ursprung-x: left;   --ursprung-y: bottom; --ausrichtung: start; }
  .kompass__achse:nth-child(3) { --ax: 0%;    --ay: -50%;  --ursprung-x: left;   --ursprung-y: center; --ausrichtung: start; }
  .kompass__achse:nth-child(4) { --ax: 0%;    --ay: 0%;    --ursprung-x: left;   --ursprung-y: top;    --ausrichtung: start; }
  .kompass__achse:nth-child(5) { --ax: -50%;  --ay: 0%;    --ursprung-x: center; --ursprung-y: top; }
  .kompass__achse:nth-child(6) { --ax: -100%; --ay: 0%;    --ursprung-x: right;  --ursprung-y: top;    --ausrichtung: end; }
  .kompass__achse:nth-child(7) { --ax: -100%; --ay: -50%;  --ursprung-x: right;  --ursprung-y: center; --ausrichtung: end; }
  .kompass__achse:nth-child(8) { --ax: -100%; --ay: -100%; --ursprung-x: right;  --ursprung-y: bottom; --ausrichtung: end; }
  .kompass__achse:is(:nth-child(1), :nth-child(5)) .kompass__knopf { max-inline-size: 9rem; }
  /* Ost und West stehen quer zum Radius: bei r = 9.25rem bleibt sonst zu
     wenig Rand zur Spaltenkante. */
  .kompass__achse:is(:nth-child(3), :nth-child(7)) .kompass__knopf { max-inline-size: 7rem; }
  /* Aus demselben Grund ruecken die Ost- und die Westkarte naeher an die
     Mitte als die uebrigen sechs. Sie stehen quer zum Radius und haben darum
     am wenigsten Raum bis zur Spaltenkante: mit dem vollen Abstand liefen sie
     bei 1000 px aus dem Satzspiegel. Sie ueberdecken dafuer den aeusseren
     Rand des Netzes auf ihrer Seite — die Richtung bleibt eindeutig, und ein
     beschnittener Text waere der schlechtere Handel. */
  .kompass__achse:is(:nth-child(3), :nth-child(7)) .kompass__insel {
    --abstand-karte: calc(var(--r) * 0.7);
  }
  /* Nord und Sued wachsen senkrecht aus dem Netz — schmal wurden sie so hoch,
     dass die Nordkarte in den Hero ragte. Seitlich haben sie Platz, also breit
     statt hoch. Was dann noch ueber den Fensterrand ginge, schiebt js/main.js
     per --shift-y zurueck. */
  .kompass__achse:is(:nth-child(1), :nth-child(5)) .kompass__insel { inline-size: 26rem; }

  /* Beide Selektoren, damit ein auf dem Telefon geoeffnetes <details> hier
     nichts aendert: auf dem Desktop entscheidet Hover, nicht der Klappzustand. */
  .kompass__insel,
  .kompass__falt[open] + .kompass__insel { display: block; }
  /* Die Karte poppt in die Richtung auf, in die ihr Punkt zeigt — wie die
     Zeiger einer Uhr. Norden oben, Osten rechts, Suedwesten unten links.

     Vorgeschichte: sie wuchs aus dem Datenpunkt heraus und landete mittig
     ueber dem Netz. Der Auftraggeber wollte sie aus der Mitte heraus haben,
     und die Rechnung gab ihm recht — die Karte ist fast so breit wie der
     Kreis, mittig verdeckte sie den halben Spider samt der Flaeche, die man
     beim Lesen eigentlich ansehen will.

     Gerechnet wie bei den Beschriftungen, mit denselben Variablen: --winkel
     ist die Achsenrichtung, --abstand-karte der Radius bis zur Kartenkante,
     und --ax/--ay verschieben die Karte um ihre eigene Groesse vom Netz weg
     (0%/-50%/-100% je nach Himmelsrichtung, stehen schon weiter unten am
     .kompass__achse). Dadurch waechst sie immer nach aussen und nie ueber den
     Kreis zurueck.

     Die Karte landet genau dort, wo im Ruhezustand die Beschriftung steht —
     die Beschriftung blendet beim Hovern darum weg. Sie sagt ohnehin
     dasselbe: Name und Wert stehen im Kartenkopf.

     Breite ueber clamp: bei 1000 px Viewport bleibt nach Osten am wenigsten
     Raum. Die Werte sind so gewaehlt, dass die Ostkarte dort im Seitenrand
     endet statt beschnitten zu werden. */
  .kompass__insel {
    --abstand-karte: calc(var(--r) + 1rem);
    position: absolute;
    z-index: 3;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: clamp(10.5rem, 15vw, 14rem);
    padding: 0.9rem 1.1rem 1rem;
    background: var(--blue-deep);
    color: var(--white);
    border-radius: 1.4rem;
    translate:
      calc(sin(var(--winkel)) * var(--abstand-karte) + var(--ax))
      calc(-1 * cos(var(--winkel)) * var(--abstand-karte) + var(--ay) + var(--shift-y, 0px));
    opacity: 0;
    scale: 0.9;
    /* Der Ursprung liegt auf der Seite, die zum Netz zeigt: die Karte klappt
       aus ihrem Punkt heraus, nicht aus ihrer eigenen Mitte. */
    transform-origin: var(--ursprung-x, center) var(--ursprung-y, center);
    pointer-events: none;   /* sonst faengt die unsichtbare Karte den Hover der Werte ab */
    transition: opacity 0.16s var(--ease), scale 0.24s var(--ease);
  }

  .kompass__insel > * {
    opacity: 0;
    filter: blur(6px);
    transition: opacity 0.12s linear, filter 0.12s linear;
  }

  .kompass__kopf {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0 var(--space-s);
    max-inline-size: none;
    font-family: var(--font-display);
  }
  .kompass__kopf span { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
  .kompass__kopf b {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .kompass__kopf::after {
    content: "";
    grid-column: 1 / -1;
    block-size: 4px;
    margin-block-start: 0.55rem;
    border-radius: var(--pille);
    background:
      linear-gradient(var(--white) 0 0) no-repeat 0 0 / calc(var(--wert) * 1%) 100%,
      color-mix(in srgb, var(--white) 25%, transparent);
  }
  .kompass__text {
    margin-block-start: 0.7rem;
    padding-block-end: 0;
    max-inline-size: none;
    font-size: 0.86rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--white) 82%, transparent);
  }

  /* Offen per Maus oder per Tastatur. :focus-visible statt :focus-within: ein
     Mausklick fokussiert das <summary> in Chrome, die Karte bliebe sonst offen stehen. */
  .kompass__achse:is(:hover, :has(.kompass__knopf:focus-visible)) .kompass__insel {
    z-index: 4;
    opacity: 1;
    scale: 1;
    transition: opacity 0.18s var(--ease), scale 0.4s var(--ease-spring);
  }
  /* Die Beschriftung weicht der Karte — sie steht an derselben Stelle und
     sagt dasselbe. */
  .kompass__achse:is(:hover, :has(.kompass__knopf:focus-visible)) .kompass__knopf {
    opacity: 0;
  }
  .kompass__achse:is(:hover, :has(.kompass__knopf:focus-visible)) .kompass__insel > * {
    opacity: 1;
    filter: blur(0);
    transition: opacity 0.3s var(--ease) 0.14s, filter 0.35s var(--ease) 0.14s;
  }
  .kompass__achse:is(:hover, :has(.kompass__knopf:focus-visible)) .kompass__punkt {
    scale: 1.5;
    background: var(--cyan);
  }
  /* Der Halo zieht beim Ueberfahren an. Bewusst ueber inset, border-color und
     border-width statt ueber opacity: opacity und scale gehoeren der
     Einblend-Animation, und eine laufende Animation mit fill-mode: both
     schlaegt jede normale Deklaration im Kaskadenrang — eine Hover-Regel auf
     opacity waere wirkungslos und der Fehler schwer zu finden. */
  .kompass__achse:is(:hover, :has(.kompass__knopf:focus-visible)) .kompass__punkt::after {
    inset: -0.62rem;
    border-color: var(--blue-deep);
    border-width: 2px;
  }
  .kompass__achsen:has(.kompass__achse:hover, .kompass__knopf:focus-visible)
    .kompass__achse:not(:hover):not(:has(.kompass__knopf:focus-visible))
    :is(.kompass__knopf, .kompass__punkt) { opacity: 0.3; }
}

/* Eine einzige Geste: die Flaeche waechst aus der Mitte, wenn die Grafik ins
   Bild kommt. Bewusst nicht mehr — Joel hat die Vorfuehrungen auf den
   Spurenplaenen als ueberladen streichen lassen (CHANGELOG 2026-09-21). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kompass__flaeche {
      animation: kompass-aufziehen var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes kompass-aufziehen { from { scale: 0; opacity: 0; } }
  }
}