/* ═══════════════════════════════════════════════════════════════════════
   LOBOS FIGHT CHAMPIONSHIP — gemeinsame Basis für beide Richtungen
   Farben und Schriften aus den Generatoren der Master-PSDs.
   Maße und Timing nach CREAITIV Web / guide/01-apple-designsprache.md.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schriften ──────────────────────────────────────────────────────── */
@font-face{font-family:"Lobos FC";src:url("schriften/lobosfc.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
/* Fließtext und Labels: Geist. Schlicht, modern, neutral — sie tritt
   neben Lobos FC vollständig zurück. OFL, selbst gehostet. */
@font-face{font-family:"Geist";src:url("schriften/geist-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("schriften/geist-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("schriften/geist-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Westbury Claridge";src:url("schriften/westburyclaridge.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

/* ── Marken-Werte ───────────────────────────────────────────────────── */
:root{
  /* Farbe — Grundfläche schwarz, Grün und Gold sind Akzente, nie Flächen.
     Werte 1:1 aus _skripte/generiere-kv20.py (Master-PSDs). */
  --schwarz:      #070807;   /* kein #000, aber wirklich schwarz */
  --schwarz-2:    #0b0c0b;
  --graphit:      #101211;
  --weiss:        #fafaf9;   /* WEISS (250,250,249) */
  --grau:         #a6a9ac;   /* GRAU  (166,169,172) */
  --gruen:        #3a8456;   /* GRUEN (58,132,86) — große Grade */
  /* Warum diese zwei Stufen neben dem Hausgrün stehen:

     Das Hausgrün #3a8456 liegt bei Farbton 143° — das ist Smaragd, und
     im Kleinsatz auf Schwarz liest es sich als Mintgrün. Waldgrün liegt
     bei 110–130°. Diese Fassungen sind auf 121° gedreht, damit der
     minzige Ton weg ist.

     Und: dunkler geht auf Schwarz nicht. Jede Verdunkelung kostet
     Kontrast. #2b6440 wäre 2,87:1 gewesen — zu schwach für den
     Ortsnamen bei 23 px.

     ACHTUNG: 121° sind 22° neben dem Logogrün. Das ist eine bewusste
     Abweichung nur für den Bildschirm im Kleinsatz. Logo und Druck
     bleiben auf #3a8456, bis Dominic anders entscheidet.            */
  --gruen-satt:   #3d8f3f;   /* 121°, 4,97:1 — Ortsname, Text */
  --gruen-tief:   #245c28;   /* 122°, tief — nur Dekoration */
  --gruen-hell:   #60ba86;   /* GRUEN_HELL (96,186,134) — Kleintext, 7,91:1 */
  --gold:         #c9a65a;   /* GOLD  (201,166,90) */

  --linie:        rgba(250,250,249,.12);
  --linie-gold:   rgba(201,166,90,.38);

  /* Raum */
  --rand:       clamp(22px, 6vw, 120px);
  --sektion-py: clamp(104px, 12vw, 192px);
  --breite:     1260px;
  --breite-weit:1680px;

  /* Bewegung — zwei Kurven für alles */
  --e1: cubic-bezier(.22, 1, .36, 1);
  --e2: cubic-bezier(.16, 1, .3, 1);
  --reaktion: 240ms;      /* Klick, Hover: 100–400 ms */
  --einblendung: 1.1s;    /* Scroll-Einblendung: 1–1.4 s */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--schwarz);color:var(--weiss);
  font-family:"Geist",system-ui,-apple-system,sans-serif;font-weight:400;
  /* Gemessen an theperformancelab.ca: Fließtext 12–14 px auf 1,4–1,5,
     Gewicht 400, gedeckt grau. Nicht 17 px auf 1,6 — das war zu groß
     und zu locker. Leadtexte dort 24 px auf Zeilenhöhe 1,0. */
  font-size:clamp(13px,.18vw + 12px,15px);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ── Korn: pixelfein, statisch, scrollt mit dem Inhalt ──────────────
   Vier Dinge, alle nachgemessen:

   1. `screen` mit hoher Deckkraft war der Grund für den blassen Look —
      es hebt Schwarz an (Mittelwert 128 × .26 landet bei `#212121`).
   2. `overlay` allein zeigt in den Tiefen **nichts**: Streuung in einer
      schwarzen Fläche 0,47 von 255. Overlay skaliert mit dem Untergrund,
      und auf Schwarz gibt es nichts zu skalieren. Darum zusätzlich eine
      sehr leise Lage im normalen Modus.
   3. **Pixelfein.** Das PSD-Korn ist für 2160-px-Flächen gerechnet und
      wirkt am Bildschirm grob und weich. Hier steht darum weißes
      Rauschen, ein Wert je Bildpunkt, ohne Glättung — feiner geht es
      nicht, ein Pixel ist die Grenze.
   4. **`absolute`, nicht `fixed`.** Fixed heißt: das Korn steht auf dem
      Bildschirm und der Inhalt scrollt darunter durch — man sieht die
      Bewegung gegen das Korn. Absolut über die ganze Dokumenthöhe ist
      das Korn am Inhalt festgemacht und geht mit, wie eine Kornebene
      in der PSD.                                                       */
body{position:relative}
.korn{
  position:absolute;inset:0;z-index:65;pointer-events:none;
  opacity:.38;mix-blend-mode:overlay;
  background:url("elemente/korn-fein-256.png") 0 0/256px 256px repeat;
}
/* Die leise Lage für die Tiefen — normaler Modus, sehr geringe Deckkraft */
.korn::after{
  content:"";position:absolute;inset:0;
  mix-blend-mode:normal;opacity:.055;
  background:url("elemente/korn-fein-256.png") 0 0/256px 256px repeat;
}
/* Die Vignette bleibt am Bildschirm — sie ist ein Randeffekt des
   Bildfensters, keine Ebene im Dokument. */
.vignette{
  position:fixed;inset:0;z-index:64;pointer-events:none;opacity:.5;
  background:url("elemente/vignette.webp") center/100% 100% no-repeat;
}

/* ── Typografie ─────────────────────────────────────────────────────── */
/* Lobos FC: nur Versalien, keine Kerning-Tabelle — Tracking von Hand.
   Zeilenhöhe fällt mit wachsender Schrift (Apple-Messung).            */
.h1{
  font-family:"Lobos FC",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;
  /* Der PSD-Wert (−32/1000, Zeilenhöhe .82) stimmt für 2160-px-Flächen mit
     handgekerntem Satz. Am Bildschirm verschmelzen die Zeilen damit — Lobos FC
     hat keine Kerning-Tabelle und die Splitterkanten greifen ineinander.
     Darum hier weiter: Zeilen atmen, Buchstaben stehen einzeln. */
  /* Enger, wie im Stilblatt: H1 zweizeilig Grad 324, Leading 253 px
     = 0,78. Am Bildschirm .84 — knapp darüber, damit die
     Splitterkanten sich nicht berühren. */
  line-height:.84;letter-spacing:.004em;word-spacing:.05em;
  margin:0;color:var(--weiss);
}
.h2{
  font-family:"Lobos FC",Impact,sans-serif;text-transform:uppercase;
  line-height:.88;letter-spacing:.002em;word-spacing:.04em;margin:0;
}
.ort{
  font-family:"Westbury Claridge",Georgia,serif;text-transform:uppercase;
  letter-spacing:.1em;                       /* Master-PSD: +100/1000 */
  color:var(--gruen);margin:0;
}
.mikro{
  font-family:"Geist",system-ui,sans-serif;font-weight:500;text-transform:uppercase;
  font-size:clamp(10px,.14vw + 9px,12px);letter-spacing:.055em;
  color:var(--grau);margin:0;
}
.mikro--gold{color:var(--gold)}
.datum{
  font-family:"Lobos FC",Impact,sans-serif;letter-spacing:.014em;
  color:var(--gold);margin:0;
}
p{max-width:64ch;color:rgba(250,250,249,.72);margin:0}
/* Leadtext: groß, aber eng — der Sprung entsteht über die Zeilenhöhe */
.lead{font-size:clamp(18px,1.3vw + 11px,26px);line-height:1.16;
  letter-spacing:-.018em;color:rgba(250,250,249,.9);max-width:26ch}
/* Keine unterstrichenen Kleintexte — Verweise tragen über Farbe und Position. */
.mikro a{text-decoration:none;color:var(--grau);
  transition:color var(--reaktion) var(--e1)}
.mikro a:hover{color:var(--gold)}

/* ── Bausteine — scharfkantig, mit Haarlinien statt Kacheln ────────── */
.bahn{padding-block:var(--sektion-py)}
.inhalt{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto}
.inhalt--weit{width:min(100% - 2*var(--rand),var(--breite-weit));margin-inline:auto}
.hairline{height:1px;background:var(--linie);border:0;margin:0}
.hairline--gold{background:var(--linie-gold)}

.taste{
  display:inline-flex;align-items:center;gap:.7em;
  min-height:44px;padding:12px 22px;border:1px solid var(--gold);
  background:transparent;color:var(--gold);cursor:pointer;
  font-family:"Geist",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:13px;letter-spacing:.11em;border-radius:0;
  transition:background var(--reaktion) var(--e1),color var(--reaktion) var(--e1);
}
.taste:hover,.taste:focus-visible{background:var(--gold);color:var(--schwarz)}
.taste--voll{background:var(--gold);color:var(--schwarz)}
.taste--voll:hover,.taste--voll:focus-visible{background:var(--weiss);border-color:var(--weiss)}
.taste--still{border-color:var(--linie);color:var(--weiss)}
.taste--still:hover,.taste--still:focus-visible{background:var(--weiss);color:var(--schwarz);border-color:var(--weiss)}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}

/* ── Kopfzeile ──────────────────────────────────────────────────────── */
.kopf{
  position:fixed;inset:0 0 auto;z-index:50;height:76px;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--rand);
  background:linear-gradient(rgba(11,12,11,.86),rgba(11,12,11,0));
  backdrop-filter:blur(2px);
}
.kopf__marke{display:flex;align-items:center;gap:14px;opacity:0}
.kopf__marke img{height:40px;width:auto}
.kopf__marke span{font-family:"Geist",system-ui,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--weiss);line-height:1.3}
.kopf__rechts{display:flex;align-items:center;gap:10px;opacity:0}
.kopf__ikon{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--linie);color:var(--weiss);
  transition:border-color var(--reaktion) var(--e1),background var(--reaktion) var(--e1)}
.kopf__ikon:hover{border-color:var(--gold);background:rgba(201,166,90,.1)}
.kopf__ikon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.kopf.sichtbar .kopf__marke,.kopf.sichtbar .kopf__rechts{
  opacity:1;transition:opacity 700ms var(--e1)}

/* ── Intro: erst das Wappen, dann die Typo ─────────────────────────── */
/* Das Wappen startet groß in der Bildmitte und fährt auf seinen Platz
   im Satz. --dx/--dy/--s werden einmal per JS gemessen.               */
.wappen-intro{
  --dx:0px;--dy:0px;--s:1;
  transform-origin:center center;
  animation:wappen-fahrt 2400ms var(--e2) both;
}
@keyframes wappen-fahrt{
  0%   {transform:translate(var(--dx),var(--dy)) scale(var(--s));opacity:0;filter:blur(14px)}
  16%  {opacity:1;filter:blur(0)}
  46%  {transform:translate(var(--dx),var(--dy)) scale(var(--s))}
  100% {transform:none;opacity:1;filter:blur(0)}
}
/* Die Typo kommt nach dem Wappen. */
.spaet{opacity:0;transform:translateY(26px)}
.spaet.los{opacity:1;transform:none;
  transition:opacity 1s var(--e1),transform 1.1s var(--e2)}

/* ── Einblendung beim Scrollen ──────────────────────────────────────── */
.rein{opacity:0;transform:translateY(30px)}
.rein.da{opacity:1;transform:none;
  transition:opacity var(--einblendung) var(--e1),transform 1.2s var(--e2)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;
    transition-duration:1ms!important}
  .rein,.spaet{opacity:1;transform:none}
  .wappen-intro{animation:none}
  .laufband__spur{animation:none!important}
}

/* ── Prüf-Schalter (?alles): jede Einblendung sofort sichtbar ───────── */
.alles .rein,.alles .spaet{opacity:1!important;transform:none!important}
.alles .wappen-intro{animation:none!important}
.alles{scroll-behavior:auto!important}

/* ═══ RASTER — nahtlose Kacheln mit Haarlinien ════════════════════════
   Kein Kartenraster mit Abständen: die Zellen stoßen aneinander, die
   Trennung ist die Haarlinie selbst. Leere Zellen sind Gestaltung.
   ════════════════════════════════════════════════════════════════════ */
.raster{
  display:grid;grid-template-columns:repeat(12,1fr);
  border-top:1px solid var(--linie);border-left:1px solid var(--linie);
}
.raster > *{
  border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);
  min-width:0;position:relative;
}
.feld{padding:clamp(16px,1.5vw,26px)}
.feld--leer{padding:0}
.feld--bild{padding:0;overflow:hidden;background:var(--graphit)}
.feld--bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Kreuz-Marke auf dem Rasterpunkt — sitzt in der linken oberen Ecke der Zelle */
.kreuz::before,.kreuz::after{
  content:"";position:absolute;background:var(--linie-gold);z-index:3}
.kreuz::before{left:-6px;top:-1px;width:13px;height:1px}
.kreuz::after{left:-1px;top:-6px;width:1px;height:13px}

/* ═══ TYPE MIT TEXTUR ═════════════════════════════════════════════════
   Die Headline soll nicht durchgehend körnig sein, sondern nur ein paar
   Crunchflecken haben — wie eine Schablone, die nicht ganz deckt.

   `crunch.webp` ist dafür gebaut: aus `03 Texturen/Textur_Damage.jpg`,
   über Perzentile auf die dunkelsten 3,5 % reduziert, alles andere
   neutrales Grau. Auf soft-light gemischt setzt das nur Fehlstellen,
   ohne die Fläche der Buchstaben anzugreifen.
   ════════════════════════════════════════════════════════════════════ */
/* Zwei Masken übereinander, per `mask-composite: intersect`:

   1. `crunch-maske.webp` — deckend mit 2 % weichen Löchern aus
      `03 Texturen/Textur_Damage.jpg`: die groben Crunchflecken.
   2. `korn-maske.png` — deckend mit feiner Alpha-Schwankung
      (Mittel 214, Streuung 34): das Korn IN der Glyphe.

   Punkt 2 ist nötig, weil ein Blendmodus über weißer Schrift nichts
   ausrichtet: `overlay` gegen einen fast weißen Untergrund bleibt fast
   weiß — genauso wenig wie auf Schwarz. Über die Maske dagegen wird die
   Glyphe selbst körnig, ohne grau zu werden.                          */
@supports (mask-image:url("")) or (-webkit-mask-image:url("")){
  .rauh{
    -webkit-mask-image:url("elemente/korn-maske.png"),url("elemente/crunch-maske.webp");
            mask-image:url("elemente/korn-maske.png"),url("elemente/crunch-maske.webp");
    -webkit-mask-size:256px 256px,clamp(300px,38vw,620px) auto;
            mask-size:256px 256px,clamp(300px,38vw,620px) auto;
    -webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
}
.rauh--gold{color:var(--gold)}
.rauh--gruen{color:var(--gruen)}

/* ═══ BEWEGUNG — das Vokabular aus theperformancelab.ca ═══════════════
   Vier Griffe, alle selbst gebaut, keine Bibliothek:
   1. Zeilenmaske  — die Zeile fährt aus einer Maske hoch (dort
      `data-line-inner`, 27 Vorkommen — der Hauptgriff der Seite)
   2. Wisch        — clip-path von inset(0 100% 0 0) auf inset(0)
   3. Kreuz-Marke  — dreht sich langsam (dort `plus-spin-cw`)
   4. Scramble     — Zeichen würfeln kurz durch (dort `decoding-char`)
   ════════════════════════════════════════════════════════════════════ */
.mz{display:block;overflow:hidden;padding-bottom:.02em}
.mz > span{display:block;transform:translateY(114%);will-change:transform}
.mz.los > span{transform:none;transition:transform 1.15s var(--e2)}

.wisch{clip-path:inset(0 100% 0 0);will-change:clip-path}
.wisch.da{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--e2)}

.kreuzm{position:absolute;width:15px;height:15px;pointer-events:none;z-index:4;
  animation:kreuz-dreh 30s linear infinite}
.kreuzm::before,.kreuzm::after{content:"";position:absolute;background:var(--gold);
  opacity:.6}
.kreuzm::before{left:0;top:7px;width:15px;height:1px}
.kreuzm::after{left:7px;top:0;width:1px;height:15px}
@keyframes kreuz-dreh{to{transform:rotate(360deg)}}

/* Grüne, verbogene Grainfläche hinter Überschriften */
.gruenflaeche{position:absolute;z-index:-1;pointer-events:none;
  background:url("elemente/gruenflaeche.webp") center/100% 100% no-repeat;
  opacity:.5;mix-blend-mode:screen;filter:blur(14px)}

/* Doppelstrich Grün/Gold auf Steinwand, als senkrechte Marke.
   Mit Vignette rundum — ohne sie steht die Kachel als hartes Rechteck da
   und wirkt aufgeklebt. Der Verlauf nach außen lässt sie in die Fläche
   übergehen; dazu eine feine Kornlage, damit sie nicht flach wirkt. */
.doppelstrich{position:relative;overflow:hidden;
  background:url("elemente/streifen.webp") center/cover;opacity:.92}
.doppelstrich::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 50%,transparent 24%,rgba(7,8,7,.5) 66%,rgba(7,8,7,.94) 100%),
    linear-gradient(to bottom,rgba(7,8,7,.85),transparent 26%,transparent 74%,rgba(7,8,7,.85))}
.doppelstrich::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("elemente/korn-fein-256.png") 0 0/180px 180px repeat;
  mix-blend-mode:overlay;opacity:.5}

@media (prefers-reduced-motion:reduce){
  .mz > span{transform:none}
  .wisch{clip-path:none}
  .kreuzm{animation:none}
}
.alles .mz > span{transform:none!important}
.alles .wisch{clip-path:none!important}

/* ═══ TEXTUR IN JEDEM ABSCHNITT ═══════════════════════════════════════
   Die feste Lage am Body allein reicht nicht — sie liegt hinter allem
   und verschwindet, sobald ein Abschnitt einen eigenen Grund hat.
   Jeder Abschnitt bekommt darum seine eigene Wandtextur.
   ════════════════════════════════════════════════════════════════════ */
/* `isolation:isolate` schafft einen eigenen Stapelkontext — nötig, damit
   die z-index:-1-Lage im Abschnitt bleibt. Ohne eigene Grundfarbe mischt
   `overlay` dann aber gegen Durchsichtig statt gegen Schwarz, und die
   Textur schlägt als helles Wolkenband durch. Darum beides zusammen. */
.grund{position:relative;isolation:isolate;background-color:var(--schwarz)}
.grund::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* Flache Fassung: dieselbe Wand, Amplitude auf 30 % zurückgenommen.
     Die volle Textur bildete unter `overlay` helle Wolkenbänder. */
  background:url("elemente/wand-flach.jpg") 0 0/620px 620px repeat;
  opacity:.85;mix-blend-mode:overlay}
.grund--gruen::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 48% at 12% 18%,rgba(58,132,86,.16),transparent 72%)}
.grund--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(54% 42% at 86% 78%,rgba(201,166,90,.11),transparent 74%)}

/* ═══ STEMPEL — nachgebaut aus `05 Entwuerfe/Stempel` ═════════════════
   Die Vorlagen sind Kästen mit Haarlinien und Versalsatz. Als CSS
   gebaut statt als Bild: scharf in jeder Größe und änderbar.
   ════════════════════════════════════════════════════════════════════ */
.stempel{
  display:inline-grid;justify-items:center;gap:5px;
  border:1px solid var(--linie);padding:11px 18px 9px;
  background:rgba(7,8,7,.42);backdrop-filter:blur(2px)}
.stempel__zeile{font-family:"Lobos FC",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(13px,1vw,20px);line-height:1;letter-spacing:.01em;color:var(--weiss)}
.stempel__unter{font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grau);font-weight:500}
.stempel--doppel{box-shadow:inset 0 0 0 4px rgba(7,8,7,.9),inset 0 0 0 5px var(--linie-gold)}
.stempel--gruen{border-color:rgba(58,132,86,.6)}
.stempel--gruen .stempel__unter{color:var(--gruen-hell)}
.stempel--gold{border-color:var(--linie-gold)}
.stempel--gold .stempel__zeile{color:var(--gold)}

/* Zahlenstempel: große Zahl, Label darunter */
.stempel--zahl .stempel__zeile{font-size:clamp(24px,2.6vw,42px)}

/* Geteilter Stempel: Gold links, Text rechts */
.stempel-geteilt{display:inline-flex;align-items:stretch;border:1px solid var(--linie)}
.stempel-geteilt b{font-family:"Lobos FC",Impact,sans-serif;font-weight:400;
  background:var(--gold);color:var(--schwarz);padding:9px 12px;
  font-size:clamp(13px,1vw,18px);line-height:1;display:grid;place-items:center;
  letter-spacing:.01em}
.stempel-geteilt span{padding:9px 14px;display:grid;align-content:center;gap:3px}

/* Eckklammern statt Rahmen */
.klammern{position:relative;padding:16px 26px;display:inline-grid;gap:5px;justify-items:center}
.klammern::before,.klammern::after{content:"";position:absolute;width:16px;height:16px;
  border-color:var(--linie-gold);border-style:solid}
.klammern::before{left:0;top:0;border-width:1px 0 0 1px}
.klammern::after{right:0;bottom:0;border-width:0 1px 1px 0}

/* ═══ RUNDER TEXT IM KREIS ════════════════════════════════════════════
   Störer wie auf den Flächen: nur Text auf einer Kreisbahn, in Lobos FC.
   Der Text liegt als <textPath> auf einem Kreis, der Kreis selbst ist
   unsichtbar. Dreht sich sehr langsam.
   ════════════════════════════════════════════════════════════════════ */
.kreisstoerer{width:clamp(124px,14vw,216px);height:auto;overflow:visible;
  animation:kreis-dreh 46s linear infinite;pointer-events:none}
/* Grad und Laufweite so gewählt, dass die Zeile die Kreisbahn füllt
   (Umfang 2·PI·74 = 465 Einheiten) und sich dabei nicht überlappt. */
.kreisstoerer text{font-family:"Lobos FC",Impact,sans-serif;
  font-size:20px;fill:var(--gold);text-transform:uppercase}
.kreisstoerer--weiss text{fill:rgba(250,250,249,.62)}
/* --gruen-hell (#60ba86) liegt bei Farbton 152° und liest sich als
   Mintgrün. Das Siegel nimmt darum die Waldgrün-Stufe. */
.kreisstoerer--gruen text{fill:var(--gruen-tief)}
.kreisstoerer--rueck{animation-direction:reverse;animation-duration:58s}
@keyframes kreis-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kreisstoerer{animation:none}}

/* ═══ LEICHTE, DURCHSCHEINENDE KACHELN ═══════════════════════════════ */
.glas{background:rgba(250,250,249,.035);backdrop-filter:blur(3px)}
.glas--gruen{background:rgba(58,132,86,.09)}
.glas--gold{background:rgba(201,166,90,.07)}
.kornkachel{background:url("elemente/korn-fein.webp") 0 0/200px 200px repeat;
  opacity:.16;mix-blend-mode:screen}