/* =========================================================================
   tokens.css · Furkan Dag · Bewerbung elunic · Entwurf F „Mitspielen“
   -------------------------------------------------------------------------
   Gemeinsame Grundlage für die Seite (index.html) und die vier Spiele
   (games/anruf|einwand|erklaer|agent .js/.css).

   Regeln für die Spiele
   - Eigene Klassen IMMER mit Präfix g-<id>- (g-anruf-, g-einwand-, g-erklaer-, g-agent-),
     eigene @keyframes ebenfalls mit diesem Präfix.
   - Farben, Abstände, Radien, Schatten, Schriftgrößen, Dauern NUR über die Variablen unten.
   - Die Bausteine unten (.btn, .card, .choice, .chip, .pill, .progress, .bubble, .av,
     .eyebrow, .icon, .sr-only) dürfen direkt benutzt werden. Nicht umdefinieren.
   - Text nie in --c-blue (#0090D4); Blau nur für Flächen, Balken, Punkte, Fokus.
   - Fließtext ≥ 16 px (--fs-md), nichts unter 13 px (--fs-xs).
   - Bewegung über --dur-1/2/3: unter prefers-reduced-motion werden sie automatisch ~0.

   FARBEN
     --c-petrol #004566   Akzenttext, dunkle Flächen, Primärknopf
     --c-blue   #0090D4   NUR Akzent/Fläche (Balken, Punkte, Fokusring), nie Text
     --c-sky    #6CCBF7   Akzent auf dunklem Grund
     --c-lav    #A48EB6   Verlaufsende, Deko
     --c-violet #CA91FF   Deko auf dunklem Grund
     --c-ink    #222328   dunkle Fläche und Haupttext
     --c-deep   #00293D   dunkelster Petrolton
     --c-bg     #F8F8F8   Seitenhintergrund
   TEXT
     --tx-1 #222328 · --tx-2 #45505A · --tx-3 #5A6570 (alle ≥ 4,5:1 auf Weiß und #F8F8F8)
     --tx-petrol #004566 · --tx-violet #5A3E78 (auf --sf-violet)
     auf Dunkel: --tx-inv #FFFFFF · --tx-inv-2 #D7E7EF · --tx-inv-3 #B4CFDC
   FLÄCHEN UND LINIEN
     --sf-card #FFFFFF · --sf-sunken #F2F5F7 · --sf-tint #E2F2FA (Text petrol) · --sf-violet #F1EAF8
     --line #E4E9ED · --line-strong #C8D3DA · --line-inv rgba(255,255,255,.22)
   RÜCKMELDUNG (Text-Farbe ≥ 4,5:1 auf der eigenen Fläche; *-fill nur für Flächen/Icons)
     richtig: --ok #17694A · --ok-bg #E3F4EC · --ok-fill #2BA36D
     falsch:  --no #B42B43 · --no-bg #FBE7EA · --no-fill #E0475F
     Hinweis: --hint #7A5200 · --hint-bg #FFF3D6
   VERLÄUFE
     --grad-brand     135°, #0090D4 → #004566 → #A48EB6 (Avatar, kleine Flächen)
     --grad-hero      dunkler Petrol-Hintergrund mit Lichtflecken (Hero)
     --grad-text-inv  Schriftverlauf für dunklen Grund (#79D3FF → #B5B8FF → #D7A6FF)
     --grad-bar       Fortschritt (#0090D4 → #A48EB6)
   RADIEN
     --r-xl 32px (große Karten) · --r-lg 24px · --r-md 18px · --r-sm 12px · --r-xs 8px · --r-pill 999px
   SCHATTEN
     --sh-card (weiche Karte auf Hell) · --sh-soft (kleine Elemente) · --sh-pop (Karte auf Dunkel)
   ABSTÄNDE
     --sp-1 4 · --sp-2 8 · --sp-3 12 · --sp-4 16 · --sp-5 24 · --sp-6 32 · --sp-7 48 · --sp-8 64 · --sp-9 96 (px)
   SCHRIFT
     --font (Catamaran) · Gewichte --fw-reg 400 · --fw-med 500 · --fw-semi 600 · --fw-bold 700 · --fw-black 800
     Größen: --fs-xs 13px (Minimum, nur Labels) · --fs-sm 14.5px · --fs-md 16px (Fließtext-Minimum)
             --fs-base 17px · --fs-lg 19px · --fs-xl 22px · --fs-2xl 28px
             --fs-3xl clamp(32px…46px) · --fs-4xl clamp(38px…60px)
     Zeilenhöhe: --lh-tight 1.04 · --lh-snug 1.28 · --lh-body 1.5
   BEWEGUNG
     --ease (sanft auslaufend) · --ease-spring (leicht federnd) · --dur-1 .16s · --dur-2 .3s · --dur-3 .6s
     @keyframes t-fade-up · t-fade · t-pop · t-shake (je einmalig, nie endlos)
   LAYOUT
     --wrap 1180px · --gutter 32px (Handy 16px) · --tap 48px (Mindestgröße Tippfläche)
     --game-min-h 560px (Handy 600px): Mindesthöhe der Spielfläche (inkl. Innenabstand)
     --stage-pad 32px (Handy 16px): Innenabstand der Spielfläche; Spielinhalt füllt
       mindestens calc(var(--game-min-h) - 2 * var(--stage-pad))
   FOKUS
     --focus-c #0090D4 (auf Hell) · --focus-c-inv #6CCBF7 (auf Dunkel); :focus-visible ist global gesetzt

   BAUSTEINE
     .btn            Pillen-Knopf, ≥ 48 px hoch. Varianten: --primary (petrol) · --light (weiß, für Dunkel)
                     · --ghost (Umriss auf Hell) · --ghost-inv (Umriss auf Dunkel) · --ok · --no
                     Größen: --sm (44 px) · --lg (56 px) · --block (volle Breite). Icons: <svg class="icon">
     .card           weiße Karte, großer Radius, weicher Schatten. --flat (Linie statt Schatten)
                     · --sunken (grau) · --tint (hellblau) · --dark (#222328, heller Text)
     .choice         große Antwort-Kachel (Button, links bündig). Zustände: aria-pressed="true" | .is-selected,
                     .is-right, .is-wrong, [disabled]. Optional <span class="choice-k">A</span> als Kennbuchstabe.
     .chip           kleine Auswahl-Pille (Button). Aktiv: aria-pressed="true" | aria-selected="true" | .is-on.
                     --inv für dunklen Grund.
     .pill           Status-Etikett, nicht klickbar. Varianten: --info · --ok · --no · --hint · --violet · --inv
                     · --dot (Punkt davor)
     .progress       Fortschrittsbalken: <div class="progress" style="--p:.5"><i></i></div> (--p von 0 bis 1);
                     role="progressbar" + aria-valuenow setzt das Spiel. --inv für dunklen Grund.
     .bubble         Sprechblase (links, grau). .bubble--right (rechts, petrol, weißer Text).
                     Optional <span class="bubble-who">Furkan</span> als Absenderzeile.
     .av             runder Avatar mit Initialen im Markenverlauf. --lg 56 px · --xl 88 px
     .eyebrow        kleine Überzeile in Großbuchstaben. --inv für dunklen Grund.
     .icon           Linien-Icon 20 px (inline SVG, stroke=currentColor)
     .sr-only        nur für Screenreader sichtbar
   ========================================================================= */

:root{
  /* Farben */
  --c-petrol:#004566;
  --c-blue:#0090D4;
  --c-sky:#6CCBF7;
  --c-lav:#A48EB6;
  --c-violet:#CA91FF;
  --c-ink:#222328;
  --c-deep:#00293D;
  --c-bg:#F8F8F8;
  --c-white:#FFFFFF;

  /* Text */
  --tx-1:#222328;
  --tx-2:#45505A;
  --tx-3:#5A6570;
  --tx-petrol:#004566;
  --tx-violet:#5A3E78;
  --tx-inv:#FFFFFF;
  --tx-inv-2:#D7E7EF;
  --tx-inv-3:#B4CFDC;

  /* Flächen und Linien */
  --sf-card:#FFFFFF;
  --sf-sunken:#F2F5F7;
  --sf-tint:#E2F2FA;
  --sf-violet:#F1EAF8;
  --line:#E4E9ED;
  --line-strong:#C8D3DA;
  --line-inv:rgba(255,255,255,.22);

  /* Rückmeldung */
  --ok:#17694A;  --ok-bg:#E3F4EC;  --ok-fill:#2BA36D;
  --no:#B42B43;  --no-bg:#FBE7EA;  --no-fill:#E0475F;
  --hint:#7A5200; --hint-bg:#FFF3D6;

  /* Verläufe */
  --grad-brand:linear-gradient(135deg,#0090D4 0%,#004566 58%,#A48EB6 100%);
  --grad-hero:
    radial-gradient(48% 62% at 6% 14%, rgba(0,144,212,.40), transparent 70%),
    radial-gradient(36% 52% at 98% 92%, rgba(202,145,255,.18), transparent 70%),
    radial-gradient(40% 50% at 64% 0%, rgba(164,142,182,.16), transparent 70%),
    linear-gradient(162deg,#00263A 0%,#00344D 48%,#004566 100%);
  --grad-text-inv:linear-gradient(92deg,#79D3FF 0%,#B5B8FF 55%,#D7A6FF 100%);
  --grad-bar:linear-gradient(90deg,#0090D4 0%,#4F86C6 55%,#A48EB6 100%);

  /* Radien */
  --r-xl:32px; --r-lg:24px; --r-md:18px; --r-sm:12px; --r-xs:8px; --r-pill:999px;

  /* Schatten */
  --sh-card:0 -10px 40px -10px rgba(0,0,0,.10), 0 24px 48px -28px rgba(0,41,61,.28);
  --sh-soft:0 10px 28px -18px rgba(0,41,61,.40);
  --sh-pop:0 30px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.35);

  /* Abstände */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* Schrift */
  --font:Catamaran,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;
  --fs-xs:13px; --fs-sm:14.5px; --fs-md:16px; --fs-base:17px; --fs-lg:19px;
  --fs-xl:22px; --fs-2xl:28px;
  --fs-3xl:clamp(32px,3.4vw,46px);
  --fs-4xl:clamp(38px,4.2vw,60px);
  --lh-tight:1.04; --lh-snug:1.28; --lh-body:1.5;

  /* Bewegung */
  --ease:cubic-bezier(.165,.84,.44,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-1:.16s; --dur-2:.3s; --dur-3:.6s;

  /* Layout */
  --wrap:1180px; --gutter:32px; --tap:48px;
  --game-min-h:560px; --stage-pad:32px;

  /* Fokus */
  --focus-c:#0090D4; --focus-c-inv:#6CCBF7;
}
@media (max-width:760px){
  :root{ --gutter:16px; --game-min-h:600px; --stage-pad:16px; --fs-base:16px; --fs-lg:17.5px; }
}
@media (prefers-reduced-motion:reduce){
  :root{ --dur-1:1ms; --dur-2:1ms; --dur-3:1ms; }
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--tx-1);background:var(--c-bg);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus-c);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}

/* ---------- Gemeinsame Animationen (einmalig) ---------- */
@keyframes t-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes t-fade{from{opacity:0}to{opacity:1}}
@keyframes t-pop{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1)}}
@keyframes t-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* ---------- Hilfen ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:block;font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-petrol);line-height:1.3}
.eyebrow--inv{color:#8FD3F5}

/* ---------- .btn ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:3px 22px 0;border-radius:var(--r-pill);border:1.5px solid transparent;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.1;text-decoration:none;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
  transition:transform var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.btn .icon{margin-top:-3px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn--primary{background:var(--c-petrol);color:var(--tx-inv)}
.btn--primary:hover{background:#00374F;box-shadow:var(--sh-soft)}
.btn--light{background:var(--c-white);color:var(--tx-petrol)}
.btn--light:hover{box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.btn--ghost{background:var(--c-white);border-color:var(--line-strong);color:var(--tx-petrol)}
.btn--ghost:hover{border-color:var(--c-petrol)}
.btn--ghost-inv{background:transparent;border-color:rgba(255,255,255,.42);color:var(--tx-inv)}
.btn--ghost-inv:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn--ghost-inv:focus-visible,.btn--light:focus-visible{outline-color:var(--focus-c-inv)}
.btn--ok{background:var(--ok);color:var(--tx-inv)}
.btn--no{background:var(--no);color:var(--tx-inv)}
.btn--sm{min-height:44px;padding:2px 16px 0;font-size:15px}
.btn--lg{min-height:56px;padding:3px 28px 0;font-size:var(--fs-base)}
.btn--block{display:flex;width:100%}

/* ---------- .card ---------- */
.card{background:var(--sf-card);border-radius:var(--r-xl);box-shadow:var(--sh-card);padding:var(--sp-6)}
.card--flat{box-shadow:none;border:1px solid var(--line)}
.card--sunken{box-shadow:none;background:var(--sf-sunken)}
.card--tint{box-shadow:none;background:var(--sf-tint);color:var(--tx-petrol)}
.card--dark{background:var(--c-ink);color:var(--tx-inv);box-shadow:none}
@media (max-width:760px){ .card{padding:var(--sp-5) 20px;border-radius:var(--r-lg)} }

/* ---------- .choice (Antwort-Kachel) ---------- */
.choice{appearance:none;display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:56px;padding:12px 18px 10px;border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:var(--sf-card);color:var(--tx-1);font-size:var(--fs-md);font-weight:var(--fw-semi);line-height:1.35;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.choice:hover{border-color:var(--c-petrol);box-shadow:var(--sh-soft)}
.choice:active{transform:scale(.99)}
.choice-k{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sf-sunken);color:var(--tx-petrol);font-size:14px;font-weight:var(--fw-black);padding-top:2px}
.choice[aria-pressed="true"],.choice.is-selected{border-color:var(--c-petrol);background:var(--sf-tint)}
.choice[aria-pressed="true"] .choice-k,.choice.is-selected .choice-k{background:var(--c-petrol);color:var(--tx-inv)}
.choice.is-right{border-color:var(--ok-fill);background:var(--ok-bg);color:var(--tx-1)}
.choice.is-right .choice-k{background:var(--ok);color:var(--tx-inv)}
.choice.is-wrong{border-color:var(--no-fill);background:var(--no-bg);color:var(--tx-1);animation:t-shake .36s var(--ease) 1}
.choice.is-wrong .choice-k{background:var(--no);color:var(--tx-inv)}
.choice[disabled]{cursor:default;box-shadow:none;transform:none}
.choice[disabled]:not(.is-right):not(.is-wrong):not(.is-selected){opacity:.55}

/* ---------- .chip (kleine Auswahl) ---------- */
.chip{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:2px 16px 0;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:var(--sf-card);color:var(--tx-petrol);font-size:15px;font-weight:var(--fw-bold);line-height:1.1;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.chip:hover{border-color:var(--c-petrol)}
.chip[aria-pressed="true"],.chip[aria-selected="true"],.chip.is-on{background:var(--c-petrol);border-color:var(--c-petrol);color:var(--tx-inv)}
.chip--inv{background:rgba(255,255,255,.06);border-color:var(--line-inv);color:var(--tx-inv)}
.chip--inv[aria-pressed="true"],.chip--inv[aria-selected="true"],.chip--inv.is-on{background:var(--c-white);border-color:var(--c-white);color:var(--tx-petrol)}
.chip--inv:focus-visible{outline-color:var(--focus-c-inv)}

/* ---------- .pill (Status-Etikett) ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 3px;border-radius:var(--r-pill);background:var(--sf-sunken);color:var(--tx-2);font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.04em;line-height:1.2;white-space:nowrap}
.pill--info{background:var(--sf-tint);color:var(--tx-petrol)}
.pill--ok{background:var(--ok-bg);color:var(--ok)}
.pill--no{background:var(--no-bg);color:var(--no)}
.pill--hint{background:var(--hint-bg);color:var(--hint)}
.pill--violet{background:var(--sf-violet);color:var(--tx-violet)}
.pill--inv{background:rgba(255,255,255,.1);color:var(--tx-inv);box-shadow:inset 0 0 0 1px var(--line-inv)}
.pill--dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;margin-top:-2px}

/* ---------- .progress ---------- */
.progress{position:relative;height:8px;border-radius:var(--r-pill);background:#E6ECF0;overflow:hidden}
.progress > i{display:block;height:100%;width:calc(var(--p,0) * 100%);border-radius:inherit;background:var(--grad-bar);transition:width var(--dur-3) var(--ease)}
.progress--inv{background:rgba(255,255,255,.14)}

/* ---------- .bubble (Sprechblase) ---------- */
.bubble{max-width:86%;width:fit-content;padding:11px 16px 9px;border-radius:18px 18px 18px 5px;background:var(--sf-sunken);color:var(--tx-1);font-size:var(--fs-md);line-height:1.42;animation:t-fade-up var(--dur-2) var(--ease) both}
.bubble--right{margin-left:auto;border-radius:18px 18px 5px 18px;background:var(--c-petrol);color:var(--tx-inv)}
.bubble-who{display:block;font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-bottom:2px}
.bubble--right .bubble-who{color:var(--tx-inv-3)}

/* ---------- .av (Avatar) ---------- */
.av{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--grad-brand);color:#fff;font-size:13px;font-weight:var(--fw-black);letter-spacing:.02em;line-height:1;padding-top:2px}
.av--lg{width:56px;height:56px;font-size:19px}
.av--xl{width:88px;height:88px;font-size:28px}