/* ============================================================
   kachel-anim.css — Spielfarben und Animationen der Spiel-Logos.
   Genutzt von der Startseite (Kacheln, Hover / .spielt) und von den
   Daily-Spielseiten (große Logo-Bühne, js/logo-buehne.js).
   Ausgelöst wird jede Animation über .kachel:is(:hover, :focus-visible, .spielt).
   Die Inline-SVG-Ebenen dazu stehen in js/kachel-anim.js.
   ============================================================ */

/* Spielfarben: jede Kachel leuchtet in der Farbe ihres Spiels.
   --fade  = Glow/Rand im Dunkelmodus
   --linie = Rand im Tagmodus, --tint = Kartenhintergrund im Tagmodus (siehe theme.css)
   Die Logos selbst sind passend eingefärbt (assets/ und assets/light/, Skript kachel-farben.py). */
.kachel[data-spiel="geocabulary"]      { --fade: #60A5FA; --linie: #2563EB; --tint: #EFF6FF; }
.kachel[data-spiel="flagulary"]        { --fade: #F87171; --linie: #DC2626; --tint: #FEF2F2; }
.kachel[data-spiel^="capture-the-map"] { --fade: #FBBF24; --linie: #D97706; --tint: #FFFBEB; }
.kachel[data-spiel="geofill"]          { --fade: #4ADE80; --linie: #16A34A; --tint: #F0FDF4; }
.kachel[data-spiel="higher-or-lower"]  { --fade: #E879F9; --linie: #C026D3; --tint: #FDF4FF; }
.kachel[data-spiel="flagguessr"]       { --fade: #2DD4BF; --linie: #0D9488; --tint: #F0FDFA; }
.kachel[data-spiel="as-the-crow-flies"]{ --fade: #C9966B; --linie: #8B5A2B; --tint: #FAF5EF; }
.kachel[data-spiel^="borderline"]      { --fade: #F87171; --linie: #DC2626; --tint: #FEF2F2; }

/* ---------- Hover-Animationen der Kachelbilder ---------- */
.kachel-anim {
  position: relative;
  display: block;
  width: 50cqi;
  max-width: 128px;
  aspect-ratio: 1;
  flex: none;
}
/* Bild füllt die Animationsfläche genau aus (auch in der Daily-Reihe), ohne Zeilen-Lücke darunter —
   sonst sitzt die animierte Ebene im Dunkelmodus ein paar Pixel versetzt */
.kachel .kachel-anim .kachel-bild { width: 100%; max-width: none; vertical-align: top; }
.anim-ebene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Handy (kein Hover): js/hub.js setzt .spielt — Dailys bei der ersten Bewegung, Fundamentals
   beim Reinscrollen, je einmal pro Besuch; danach blendet die Kachel sanft zurück zum Logo.
   Alle Hover-Animationen dauern gleich lang: --anim-dauer. Jede Bewegung läuft über die
   volle Dauer, die Phasen stecken in den Prozent-Angaben der Keyframes. */
.kachel { --anim-dauer: 1.5s; }

/* Capture the Map: Deutschland in Gold, wehende Fahne fällt auf Berlin -> Impulse, die Ringe tauchen wieder auf
   (Ebene erzeugt von daten/skripte/ctm-logo.py) */
.anim-ctm { --a-ring: #ffffff; --a-puls: #b45309; }   /* dunkler Bernstein: hebt sich vom Gold des Landes ab */
:root[data-theme="light"] .anim-ctm { --a-ring: #8a5a00; --a-puls: var(--linie, #D97706); }
.anim-ctm .a-stange { stroke: #f6f3ff; stroke-width: 4.4; stroke-linecap: round; }
.anim-ctm .a-ringe circle { stroke: var(--a-ring); }
.anim-ctm .a-fuss { fill: #ffc83d; stroke: #5a3a00; stroke-width: 2; }
.anim-ctm .a-schatten { fill: rgba(0, 0, 0, 0.35); transform-box: fill-box; transform-origin: center; }
:root[data-theme="light"] .anim-ctm .a-schatten { fill: rgba(60, 45, 20, 0.25); }
.kachel:is(:hover, :focus-visible, .spielt) .anim-ctm .a-ringe { animation: a-ctm-ringe var(--anim-dauer) linear both; }
@keyframes a-ctm-ringe {
  0%, 30% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
.a-puls {
  fill: none;
  stroke: var(--a-puls);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.kachel:is(:hover, :focus-visible, .spielt) .anim-ctm .a-fahne    { animation: a-fallen   var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-ctm .a-schatten { animation: a-schatten var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-ctm .a-puls-1   { animation: a-puls-1   var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-ctm .a-puls-2   { animation: a-puls-2   var(--anim-dauer) linear both; }

@keyframes a-fallen {
  0%   { transform: translateY(-170px); opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .7, 1); }
  6%   { opacity: 1; }
  26%  { transform: translateY(0); animation-timing-function: ease-out; }
  33%  { transform: translateY(-14px); animation-timing-function: ease-in; }
  40%  { transform: translateY(0); animation-timing-function: ease-out; }
  45%  { transform: translateY(-3px); animation-timing-function: ease-in; }
  50%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes a-schatten {
  0%   { transform: scale(0.2); opacity: 0; }
  26%  { transform: scale(1.15); opacity: 1; }
  33%  { transform: scale(0.8); }
  50%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes a-puls-1 {
  0%, 26% { transform: scale(1); opacity: 0; stroke-width: 4; animation-timing-function: ease-out; }
  27%  { opacity: 0.95; }
  86%, 100% { transform: scale(9); opacity: 0; stroke-width: 0.8; }
}
@keyframes a-puls-2 {
  0%, 38% { transform: scale(1); opacity: 0; stroke-width: 4; animation-timing-function: ease-out; }
  39%  { opacity: 0.95; }
  98%, 100% { transform: scale(9); opacity: 0; stroke-width: 0.8; }
}

/* Borderline: Lichtpunkt fährt die Grenze ab (0–80 %), dann hüpft das Fragezeichen mit kleinem Impuls */
.anim-borderline { --a-bl-spur: #fef2f2; --a-bl-grund: #1e1b34; --a-puls: var(--fade, #F87171); }
:root[data-theme="light"] .anim-borderline { --a-bl-spur: var(--linie, #DC2626); --a-bl-grund: #ffffff; --a-puls: var(--linie, #DC2626); }
.anim-borderline .a-bl-spur {
  fill: none; stroke: var(--a-bl-spur); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 14 86; stroke-dashoffset: 0; opacity: 0;
  filter: drop-shadow(0 0 5px var(--fade, #F87171));
}
.anim-borderline .a-bl-frage { transform-box: fill-box; transform-origin: center; opacity: 0; }
.anim-borderline .a-bl-kreis { fill: var(--a-bl-grund); stroke: var(--linie, #DC2626); stroke-width: 5; }
.anim-borderline .a-bl-text { font-family: var(--font-display); font-weight: 700; font-size: 50px; fill: var(--linie, #DC2626); }
:root:not([data-theme="light"]) .anim-borderline .a-bl-kreis { stroke: var(--fade, #F87171); }
:root:not([data-theme="light"]) .anim-borderline .a-bl-text { fill: var(--fade, #F87171); }
.kachel:is(:hover, :focus-visible, .spielt) .anim-borderline .a-bl-spur  { animation: a-bl-spur  var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-borderline .a-bl-frage { animation: a-bl-frage var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-borderline .a-bl-puls  { animation: a-bl-puls  var(--anim-dauer) linear both; }
@keyframes a-bl-spur {
  0%   { stroke-dashoffset: 0; opacity: 0; animation-timing-function: ease-in-out; }
  6%   { opacity: 1; }
  74%  { stroke-dashoffset: -100; opacity: 1; }
  82%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes a-bl-frage {
  0%, 70% { transform: scale(1); opacity: 1; }
  78%  { transform: scale(1.28) rotate(-10deg); }
  86%  { transform: scale(0.92) rotate(6deg); }
  93%, 100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes a-bl-puls {
  0%, 72% { transform: scale(1); opacity: 0; stroke-width: 4; animation-timing-function: ease-out; }
  73%  { opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; stroke-width: 0.8; }
}

/* GeoFill: Saugball wird gedrückt, Tropfen fällt, Kongo füllt sich von der Aufprallstelle aus */
.anim-geofill { --a-glas: #f3f1ff; --a-kongo-rand: #fff1a8; --a-puls: var(--fade, #4ADE80); }
:root[data-theme="light"] .anim-geofill { --a-glas: #1a1730; --a-kongo-rand: #1a1730; --a-puls: var(--linie, #16A34A); }
.anim-geofill .a-gf-kongo { fill: url(#a-gf-gelb); stroke: var(--a-kongo-rand); stroke-width: 1.2; stroke-linejoin: round; }
.anim-geofill .a-gf-glas { fill: rgba(255, 255, 255, 0.18); stroke: var(--a-glas); stroke-width: 2.4; stroke-linejoin: round; }
.anim-geofill .a-gf-tropfen { fill: url(#a-gf-gelb); stroke: #e09a12; stroke-width: 1.2; }
.anim-geofill .a-gf-welle,
.anim-geofill .a-gf-fluessig,
.anim-geofill .a-gf-ball { transform-box: fill-box; }
.anim-geofill .a-gf-welle { transform-origin: center; }
.anim-geofill .a-gf-fluessig { transform-origin: center bottom; }
.anim-geofill .a-gf-ball { transform-origin: center bottom; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-geofill .a-gf-ball     { animation: a-gf-druecken var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-geofill .a-gf-fluessig { animation: a-gf-leeren   var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-geofill .a-gf-tropfen  { animation: a-gf-tropfen  var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-geofill .a-gf-welle    { animation: a-gf-fuellen  var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-geofill .a-gf-puls     { animation: a-puls-1      var(--anim-dauer) linear both; }

@keyframes a-gf-druecken {
  0%   { transform: scaleY(1); animation-timing-function: ease-in; }
  12%  { transform: scaleY(0.72) scaleX(1.08); animation-timing-function: ease-out; }
  30%, 100% { transform: scaleY(1); }
}
@keyframes a-gf-leeren {
  0%, 8% { transform: scaleY(1); animation-timing-function: ease-in-out; }
  24%, 100% { transform: scaleY(0.6); }
}
@keyframes a-gf-tropfen {
  0%, 8% { transform: translate(206px, 186.2px) scale(0.3); opacity: 0; animation-timing-function: ease-out; }
  14%  { transform: translate(206px, 194.2px) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  26%  { transform: translate(206px, 218.2px) scale(0.9, 1.1); opacity: 1; }
  28%, 100% { transform: translate(206px, 222.2px) scale(1.4, 0.4); opacity: 0; }
}
@keyframes a-gf-fuellen {
  0%, 26% { transform: scale(0); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  86%, 100% { transform: scale(1); }
}

/* Higher or Lower: grüner Pfeil auf die USA -> USA fliegt oben links raus -> Ägypten rückt nach
   links unten -> Japan fliegt oben rechts herein -> Pfeile tauchen rechts von Ägypten wieder auf */
.anim-hol { --a-puls: var(--fade, #E879F9); --a-hol-c: #E879F9; }
:root[data-theme="light"] .anim-hol { --a-puls: var(--linie, #C026D3); }
.anim-hol .a-glow { fill: none; stroke-linejoin: round; }
.anim-hol .a-hol-glow { stroke: var(--a-hol-c); }
.anim-hol .a-hol-flaeche { fill: url(#a-hol-innen); }
.anim-hol .a-hol-umriss { fill: none; stroke: url(#a-hol-rand); stroke-linejoin: round; }
.anim-hol .a-hol-pfeilform { stroke: var(--a-pfeilrand); stroke-width: 2; stroke-linejoin: round; }
.anim-hol .r0 { stop-color: #f6c9fc; } .anim-hol .r1 { stop-color: #E879F9; } .anim-hol .r2 { stop-color: #a855b5; }
.anim-hol .i0 { stop-color: #E879F9; stop-opacity: 0.18; } .anim-hol .i1 { stop-color: #E879F9; stop-opacity: 0.05; }
:root[data-theme="light"] .anim-hol .a-glow { display: none; }
:root[data-theme="light"] .anim-hol .r0,
:root[data-theme="light"] .anim-hol .r1,
:root[data-theme="light"] .anim-hol .r2 { stop-color: #C026D3; }
:root[data-theme="light"] .anim-hol .i0 { stop-opacity: 0.34; }
:root[data-theme="light"] .anim-hol .i1 { stop-opacity: 0.12; }
:root[data-theme="light"] .anim-hol .a-hol-pfeilform { stroke: #1a1730; }
.anim-hol .a-hol-treffer { opacity: 0; transform-box: fill-box; transform-origin: center bottom; }
.anim-hol .a-hol-japan { opacity: 0; }
.anim-hol .a-hol-usa-flug,
.anim-hol .a-hol-pfeile { transform-box: fill-box; transform-origin: center; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-hol .a-hol-pfeile   { animation: a-hol-pfeile   var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-hol .a-hol-treffer  { animation: a-hol-treffer  var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-hol .a-hol-puls     { animation: a-hol-puls     var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-hol .a-hol-usa-flug { animation: a-hol-usa      var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-hol .a-hol-aegypten { animation: a-hol-aegypten var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-hol .a-hol-japan    { animation: a-hol-japan    var(--anim-dauer) linear both; }

@keyframes a-hol-pfeile {
  0%   { opacity: 1; transform: none; animation-timing-function: ease-in; }
  12%  { opacity: 0; transform: translateY(14px); }
  /* … unsichtbar, bis Japan gelandet ist, dann tauchen die Pfeile rechts von Ägypten wieder auf */
  82%  { opacity: 0; transform: translate(196px, 0) scale(0.4); animation-timing-function: ease-out; }
  92%  { opacity: 1; transform: translate(196px, 0) scale(1.1); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translate(196px, 0) scale(1); }
}
@keyframes a-hol-treffer {
  0%, 6% { opacity: 0; transform: scale(0); animation-timing-function: ease-out; }
  16%  { opacity: 1; transform: scale(1.18); animation-timing-function: ease-in-out; }
  22%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes a-hol-puls {
  0%, 15% { transform: scale(1); opacity: 0; stroke-width: 4; animation-timing-function: ease-out; }
  16%  { opacity: 0.95; }
  40%, 100% { transform: scale(9); opacity: 0; stroke-width: 0.8; }
}
@keyframes a-hol-usa {
  0%, 28% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  48%  { transform: translate(-440px, -70px) rotate(-12deg); opacity: 1; }
  49%, 100% { transform: translate(-440px, -70px) rotate(-12deg); opacity: 0; }
}
@keyframes a-hol-aegypten {
  0%, 38% { transform: none; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  64%, 100% { transform: translate(-178px, 6px); }
}
@keyframes a-hol-japan {
  0%, 48% { transform: translate(280px, -230px) rotate(-14deg); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  52%  { opacity: 1; }
  74%  { transform: translate(-6px, 5px) rotate(1deg); opacity: 1; animation-timing-function: ease-in-out; }
  82%, 100% { transform: none; opacity: 1; }
}

/* kraehe:anfang (erzeugt von daten/skripte/kraehe-logo.py — dort ändern) */
/* As The Crow Flies: Krähe startet in Brasília und fliegt die Route entlang bis über Mali,
   die gepunktete Linie zieht sich hinter ihr her (Maske) und läuft danach weiter bis Moskau,
   wo ein Impuls aufleuchtet. Keyframes aus der echten Kurve berechnet. */
.kachel-anim.anim-crow { width: 80cqi; max-width: 200px; aspect-ratio: 400 / 262; }
/* Borderline (Türkei) ist ebenfalls im Querformat 400 × 290 */
.kachel-anim.anim-borderline { width: 80cqi; max-width: 190px; aspect-ratio: 400 / 290; }
.anim-borderline .kachel-bild { aspect-ratio: 400 / 290; }
.anim-crow .kachel-bild { aspect-ratio: 400 / 262; }
.anim-crow { --a-cr-rand: url(#a-cr-gold); --a-cr-fuell: #2b2340; --a-cr-innen: #e7c9a5; --a-puls: var(--fade, #C9966B); }
:root[data-theme="light"] .anim-crow { --a-cr-rand: #8B5A2B; --a-cr-fuell: #3d2b1f; --a-cr-innen: #d9b58c; --a-puls: var(--linie, #8B5A2B); }
.anim-crow .a-cr-k { fill: var(--a-cr-fuell); stroke: var(--a-cr-rand); stroke-width: 5.45; stroke-linejoin: round; }
.anim-crow .a-cr-l { fill: none; stroke: var(--a-cr-innen); stroke-opacity: .55; stroke-width: 2.05; stroke-linecap: round; }
.anim-crow .a-cr-g { fill: none; stroke: #C9966B; stroke-linejoin: round; }
.anim-crow .a-cr-g1 { stroke-width: 40.91; stroke-opacity: 0.05; }
.anim-crow .a-cr-g2 { stroke-width: 27.27; stroke-opacity: 0.08; }
.anim-crow .a-cr-g3 { stroke-width: 15.91; stroke-opacity: 0.13; }
.anim-crow .a-cr-g4 { stroke-width: 7.95; stroke-opacity: 0.22; }
:root[data-theme="light"] .anim-crow .a-cr-g { stroke-opacity: 0; }
:root[data-theme="light"] .anim-crow .a-cr-g4 { stroke: #8B5A2B; stroke-width: 9; stroke-opacity: 0.1; }
.anim-crow .a-cr-zug { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.anim-crow .a-cr-flug { transform-box: view-box; transform-origin: 182px 218px; }
.anim-crow .a-cr-fluegel { transform-box: fill-box; transform-origin: 80% 100%; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-crow .a-cr-flug    { animation: a-cr-flug    var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-crow .a-cr-zug     { animation: a-cr-linie   var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-crow .a-cr-fluegel { animation: a-cr-schlag  var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-crow .a-cr-puls    { animation: a-cr-puls    var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-crow .a-cr-ziel    { animation: a-cr-ziel    var(--anim-dauer) linear both; }
@keyframes a-cr-flug {
  0% { opacity: 0; }
  0.0% { transform: translate(-57.9px, 48.3px) rotate(11.9deg) scale(0.550); }
  4.0% { transform: translate(-57.1px, 47.8px) rotate(11.7deg) scale(0.556); }
  8.0% { transform: translate(-54.8px, 46.2px) rotate(11.3deg) scale(0.572); }
  12.0% { transform: translate(-51.1px, 43.6px) rotate(10.7deg) scale(0.599); }
  16.0% { transform: translate(-46.3px, 40.1px) rotate(9.8deg) scale(0.635); }
  20.0% { transform: translate(-40.5px, 35.8px) rotate(8.8deg) scale(0.677); }
  24.0% { transform: translate(-34.2px, 31.0px) rotate(7.6deg) scale(0.725); }
  28.0% { transform: translate(-27.7px, 25.7px) rotate(6.3deg) scale(0.775); }
  32.0% { transform: translate(-21.3px, 20.2px) rotate(4.9deg) scale(0.825); }
  36.0% { transform: translate(-15.3px, 14.9px) rotate(3.6deg) scale(0.873); }
  40.0% { transform: translate(-10.1px, 10.0px) rotate(2.4deg) scale(0.915); }
  44.0% { transform: translate(-5.8px, 5.9px) rotate(1.4deg) scale(0.951); }
  48.0% { transform: translate(-2.6px, 2.7px) rotate(0.6deg) scale(0.978); }
  52.0% { transform: translate(-0.7px, 0.7px) rotate(0.2deg) scale(0.994); }
  56.0% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.000); }
  6% { opacity: 1; }
  68% { transform: translate(0, -3px) rotate(0deg) scale(1.03); opacity: 1; }
  80%, 100% { transform: none; opacity: 1; }
}
@keyframes a-cr-linie {
  0.0% { stroke-dashoffset: 1.000; }
  4.0% { stroke-dashoffset: 0.994; }
  8.0% { stroke-dashoffset: 0.975; }
  12.0% { stroke-dashoffset: 0.944; }
  16.0% { stroke-dashoffset: 0.903; }
  20.0% { stroke-dashoffset: 0.855; }
  24.0% { stroke-dashoffset: 0.800; }
  28.0% { stroke-dashoffset: 0.743; }
  32.0% { stroke-dashoffset: 0.686; }
  36.0% { stroke-dashoffset: 0.632; }
  40.0% { stroke-dashoffset: 0.583; }
  44.0% { stroke-dashoffset: 0.543; }
  48.0% { stroke-dashoffset: 0.512; }
  52.0% { stroke-dashoffset: 0.493; }
  56.0% { stroke-dashoffset: 0.486; }
  59.0% { stroke-dashoffset: 0.338; }
  62.0% { stroke-dashoffset: 0.216; }
  65.0% { stroke-dashoffset: 0.122; }
  68.0% { stroke-dashoffset: 0.054; }
  71.0% { stroke-dashoffset: 0.014; }
  74.0% { stroke-dashoffset: 0.000; }
  100% { stroke-dashoffset: 0; }
}
@keyframes a-cr-schlag {
  0.0%, 14.0%, 28.0%, 42.0%, 56.0%, 100% { transform: scaleY(1); animation-timing-function: ease-in-out; }
  7.0%, 21.0%, 35.0%, 49.0% { transform: scaleY(0.35); animation-timing-function: ease-in-out; }
}
@keyframes a-cr-puls {
  0%, 2% { transform: scale(1); opacity: 0; stroke-width: 4; animation-timing-function: ease-out; }
  3%   { opacity: 0.95; }
  42%, 100% { transform: scale(9); opacity: 0; stroke-width: 0.8; }
}
@keyframes a-cr-ziel {
  0%, 73% { transform: scale(1); opacity: 0; stroke-width: 4; animation-timing-function: ease-out; }
  74% { opacity: 0.95; }
  100% { transform: scale(7); opacity: 0; stroke-width: 0.8; }
}
/* kraehe:ende */

/* Geocabulary: Fähnchen fallen von links nach rechts auf die Hauptstädte.
   Jedes fällt 1/3 der Gesamtdauer lang; die Starts verteilen sich nach der x-Position (--x, 0…1)
   über die ersten 2/3 — so endet das letzte genau mit --anim-dauer. */
.anim-geocabulary { --a-gc-stange: #f3f1ff; --a-puls: var(--fade, #60A5FA); }
:root[data-theme="light"] .anim-geocabulary { --a-gc-stange: #1a1730; --a-puls: var(--linie, #2563EB); }
.anim-geocabulary .a-gc-puls { fill: none; stroke: var(--a-puls); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-geocabulary .a-gc-pin {
  animation: a-gc-fallen calc(var(--anim-dauer) / 3) linear calc(var(--anim-dauer) * 2 / 3 * var(--x)) both;
}
.kachel:is(:hover, :focus-visible, .spielt) .anim-geocabulary .a-gc-puls {
  animation: a-gc-puls calc(var(--anim-dauer) / 3) linear calc(var(--anim-dauer) * 2 / 3 * var(--x)) both;
}
/* Mini-Impuls genau beim Aufsetzen (55 % des Falls) */
@keyframes a-gc-puls {
  0%, 54% { transform: scale(1); opacity: 0; stroke-width: 1.4; animation-timing-function: ease-out; }
  55%  { opacity: 0.9; }
  100% { transform: scale(5); opacity: 0; stroke-width: 0.3; }
}
@keyframes a-gc-fallen {
  0%   { transform: translateY(-110px); opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .7, 1); }
  12%  { opacity: 1; }
  55%  { transform: translateY(0); animation-timing-function: ease-out; }
  70%  { transform: translateY(-6px); animation-timing-function: ease-in; }
  85%  { transform: translateY(0); animation-timing-function: ease-out; }
  93%  { transform: translateY(-1.5px); animation-timing-function: ease-in; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Flagulary: Drache wird größer, bewegt sich, blitzt auf und kehrt zurück; Glanz über die Flagge (ohne Impuls) */
.anim-flagulary { --a-fl-strich: #ffffff; --a-fl-blitz: rgba(255, 255, 255, 0.95); --a-puls: var(--fade, #F87171); }
:root[data-theme="light"] .anim-flagulary { --a-fl-strich: #1a1730; --a-fl-blitz: rgba(220, 38, 38, 0.75); --a-puls: var(--linie, #DC2626); }
.anim-flagulary .a-fl-linie { fill: rgba(255, 255, 255, 0.06); stroke: var(--a-fl-strich); stroke-width: 2.2; stroke-linejoin: round; }
.anim-flagulary .a-fl-glow { fill: none; stroke: var(--a-fl-strich); stroke-width: 9; stroke-opacity: 0.07; stroke-linejoin: round; }
.anim-flagulary .a-fl-bewegung { transform-box: fill-box; transform-origin: center; }
.anim-flagulary .a-fl-glanz { opacity: 0; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-flagulary .a-fl-bewegung { animation: a-fl-drache var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-flagulary .a-fl-blitz    { animation: a-fl-blitz  var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-flagulary .a-fl-glanz    { animation: a-fl-glanz  var(--anim-dauer) linear both; }
@keyframes a-fl-drache {
  0%   { transform: none; animation-timing-function: cubic-bezier(.3, 0, .2, 1.4); }
  26%  { transform: scale(1.24) rotate(-5deg); animation-timing-function: ease-in-out; }
  38%  { transform: scale(1.2) rotate(4deg); animation-timing-function: ease-in-out; }
  50%  { transform: scale(1.22) rotate(-2deg); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  76%  { transform: scale(0.97) rotate(0); animation-timing-function: ease-out; }
  88%, 100% { transform: none; }
}
@keyframes a-fl-blitz {
  0%, 18% { filter: drop-shadow(0 0 0 transparent); animation-timing-function: ease-out; }
  28%  { filter: drop-shadow(0 0 3px var(--a-fl-blitz)) drop-shadow(0 0 10px var(--a-fl-blitz)); animation-timing-function: ease-in; }
  60%, 100% { filter: drop-shadow(0 0 0 transparent); }
}
@keyframes a-fl-glanz {
  0%, 18% { transform: translateX(0) skewX(-18deg); opacity: 0; animation-timing-function: ease-in-out; }
  22%  { opacity: 1; }
  66%  { opacity: 1; }
  70%, 100% { transform: translateX(460px) skewX(-18deg); opacity: 0; }
}

/* FlagGuessr: Lupe wandert erst nach unten rechts, dann auf den Stern links, und deckt, wo sie ist, die echte Flagge
   (1,6-fach vergrößert) auf. Weg und Vergrößerung sind vorberechnet (daten/skripte/kachel-flagguessr.py). */
.kachel-anim.anim-flagguessr { width: 66cqi; max-width: 170px; aspect-ratio: 336 / 262; }
.anim-flagguessr .kachel-bild { aspect-ratio: 336 / 262; }
.anim-flagguessr { --a-fg-griff: #0F766E; --a-fg-schatten: rgba(0, 0, 0, 0.45); }
:root[data-theme="light"] .anim-flagguessr { --a-fg-griff: #134E4A; --a-fg-schatten: rgba(60, 45, 20, 0.22); }
.anim-flagguessr .fgr0 { stop-color: #5EEAD4; } .anim-flagguessr .fgr1 { stop-color: #2DD4BF; }
:root[data-theme="light"] .anim-flagguessr .fgr0 { stop-color: #0D9488; }
:root[data-theme="light"] .anim-flagguessr .fgr1 { stop-color: #0F766E; }
:root[data-theme="light"] .anim-flagguessr .a-glow { display: none; }
.anim-flagguessr .a-fg-griff { stroke: var(--a-fg-griff); }
.anim-flagguessr .a-fg-schatten { stroke: var(--a-fg-schatten); }
.anim-flagguessr .a-fg-lupe,
.anim-flagguessr .a-fg-loch,
.anim-flagguessr .a-fg-inhalt { transform-box: view-box; transform-origin: 0 0; }
.anim-flagguessr .a-fg-inhalt { transform: translate(-122.4px, -116.7px) scale(1.6); }
.kachel:is(:hover, :focus-visible, .spielt) .anim-flagguessr .a-fg-lupe,
.kachel:is(:hover, :focus-visible, .spielt) .anim-flagguessr .a-fg-loch   { animation: a-fg-lupe   var(--anim-dauer) linear both; }
.kachel:is(:hover, :focus-visible, .spielt) .anim-flagguessr .a-fg-inhalt { animation: a-fg-inhalt var(--anim-dauer) linear both; }
@keyframes a-fg-lupe {
  0.0% { transform: translate(0.0px, 0.0px); }
  2.2% { transform: translate(0.1px, 0.1px); }
  4.4% { transform: translate(0.6px, 0.4px); }
  6.7% { transform: translate(2.1px, 1.5px); }
  8.9% { transform: translate(5.0px, 3.5px); }
  11.1% { transform: translate(9.8px, 6.8px); }
  13.3% { transform: translate(17.0px, 11.7px); }
  15.6% { transform: translate(27.0px, 18.6px); }
  17.8% { transform: translate(40.3px, 27.7px); }
  20.0% { transform: translate(54.2px, 37.3px); }
  22.2% { transform: translate(64.9px, 44.6px); }
  24.4% { transform: translate(72.5px, 49.9px); }
  26.7% { transform: translate(77.8px, 53.5px); }
  28.9% { transform: translate(81.0px, 55.7px); }
  31.1% { transform: translate(82.8px, 56.9px); }
  33.3% { transform: translate(83.5px, 57.4px); }
  35.6% { transform: translate(83.6px, 57.5px); }
  37.8% { transform: translate(83.5px, 57.4px); }
  40.0% { transform: translate(82.9px, 56.6px); }
  42.2% { transform: translate(81.0px, 54.1px); }
  44.4% { transform: translate(77.2px, 49.0px); }
  46.7% { transform: translate(70.6px, 40.4px); }
  48.9% { transform: translate(60.7px, 27.3px); }
  51.1% { transform: translate(46.7px, 8.9px); }
  53.3% { transform: translate(29.7px, -13.5px); }
  55.6% { transform: translate(16.6px, -30.8px); }
  57.8% { transform: translate(7.4px, -42.9px); }
  60.0% { transform: translate(1.5px, -50.8px); }
  62.2% { transform: translate(-1.9px, -55.3px); }
  64.4% { transform: translate(-3.5px, -57.4px); }
  66.7% { transform: translate(-4.0px, -58.0px); }
  68.9% { transform: translate(-4.0px, -58.0px); }
  71.1% { transform: translate(-4.3px, -57.8px); }
  73.3% { transform: translate(-5.5px, -56.8px); }
  75.6% { transform: translate(-8.3px, -54.7px); }
  77.8% { transform: translate(-13.4px, -50.8px); }
  80.0% { transform: translate(-21.3px, -44.6px); }
  82.2% { transform: translate(-32.8px, -35.7px); }
  84.4% { transform: translate(-48.3px, -23.7px); }
  86.7% { transform: translate(-62.3px, -12.9px); }
  88.9% { transform: translate(-72.3px, -5.1px); }
  91.1% { transform: translate(-79.0px, 0.1px); }
  93.3% { transform: translate(-83.0px, 3.2px); }
  95.6% { transform: translate(-85.1px, 4.8px); }
  97.8% { transform: translate(-85.9px, 5.4px); }
  100.0% { transform: translate(-86.0px, 5.5px); }
}
@keyframes a-fg-inhalt {
  0.0% { transform: translate(-122.4px, -116.7px) scale(1.6); }
  2.2% { transform: translate(-122.4px, -116.7px) scale(1.6); }
  4.4% { transform: translate(-122.8px, -117.0px) scale(1.6); }
  6.7% { transform: translate(-123.7px, -117.6px) scale(1.6); }
  8.9% { transform: translate(-125.4px, -118.8px) scale(1.6); }
  11.1% { transform: translate(-128.3px, -120.8px) scale(1.6); }
  13.3% { transform: translate(-132.6px, -123.7px) scale(1.6); }
  15.6% { transform: translate(-138.6px, -127.8px) scale(1.6); }
  17.8% { transform: translate(-146.6px, -133.3px) scale(1.6); }
  20.0% { transform: translate(-154.9px, -139.1px) scale(1.6); }
  22.2% { transform: translate(-161.3px, -143.5px) scale(1.6); }
  24.4% { transform: translate(-165.9px, -146.6px) scale(1.6); }
  26.7% { transform: translate(-169.1px, -148.8px) scale(1.6); }
  28.9% { transform: translate(-171.0px, -150.1px) scale(1.6); }
  31.1% { transform: translate(-172.1px, -150.9px) scale(1.6); }
  33.3% { transform: translate(-172.5px, -151.1px) scale(1.6); }
  35.6% { transform: translate(-172.6px, -151.2px) scale(1.6); }
  37.8% { transform: translate(-172.5px, -151.2px) scale(1.6); }
  40.0% { transform: translate(-172.1px, -150.7px) scale(1.6); }
  42.2% { transform: translate(-171.0px, -149.2px) scale(1.6); }
  44.4% { transform: translate(-168.7px, -146.1px) scale(1.6); }
  46.7% { transform: translate(-164.8px, -140.9px) scale(1.6); }
  48.9% { transform: translate(-158.8px, -133.1px) scale(1.6); }
  51.1% { transform: translate(-150.4px, -122.0px) scale(1.6); }
  53.3% { transform: translate(-140.2px, -108.6px) scale(1.6); }
  55.6% { transform: translate(-132.4px, -98.2px) scale(1.6); }
  57.8% { transform: translate(-126.9px, -90.9px) scale(1.6); }
  60.0% { transform: translate(-123.3px, -86.2px) scale(1.6); }
  62.2% { transform: translate(-121.2px, -83.5px) scale(1.6); }
  64.4% { transform: translate(-120.3px, -82.3px) scale(1.6); }
  66.7% { transform: translate(-120.0px, -81.9px) scale(1.6); }
  68.9% { transform: translate(-120.0px, -81.9px) scale(1.6); }
  71.1% { transform: translate(-119.8px, -82.0px) scale(1.6); }
  73.3% { transform: translate(-119.1px, -82.6px) scale(1.6); }
  75.6% { transform: translate(-117.4px, -83.9px) scale(1.6); }
  77.8% { transform: translate(-114.4px, -86.2px) scale(1.6); }
  80.0% { transform: translate(-109.6px, -89.9px) scale(1.6); }
  82.2% { transform: translate(-102.7px, -95.3px) scale(1.6); }
  84.4% { transform: translate(-93.4px, -102.5px) scale(1.6); }
  86.7% { transform: translate(-85.0px, -109.0px) scale(1.6); }
  88.9% { transform: translate(-79.0px, -113.6px) scale(1.6); }
  91.1% { transform: translate(-75.0px, -116.7px) scale(1.6); }
  93.3% { transform: translate(-72.6px, -118.6px) scale(1.6); }
  95.6% { transform: translate(-71.3px, -119.6px) scale(1.6); }
  97.8% { transform: translate(-70.9px, -119.9px) scale(1.6); }
  100.0% { transform: translate(-70.8px, -120.0px) scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .kachel:is(:hover, :focus-visible, .spielt) .kachel-anim * { animation: none !important; }
}