/* Kopie von S:\Claude\DOTOG-Assets\01_Markenkit\04_Web-Design\dotog-web-tokens.css, Stand 06.10.2026. Nur dort ändern, dann neu kopieren. */
/* DOTOG Webseite: Marken-Tokens (Website-Markenkit Welle 1, Stand 02.10.2026)
   Eine Wahrheit für dotog.app: Farben, Schrift, Kartenrezept, Leuchten, Hover, Bewegung, Wolken.
   Herkunft je Wert: WEB-DESIGN.md im selben Ordner, Abschnitt „Herkunft je Wert“.
   Quellen und wer gewinnt (Frank 02.10.2026):
   - Farben und Schrift: DOTOG-Assets/01_Markenkit/01_Foundations/tokens.css
   - Kartenfläche, Knopf, Buddy-Bildkante: App-Mockup Welle 1.25.10 (.d-card dunkel)
   - Bewegung und Hover: index.html auf Commit 71fd595 samt assets/css/dotog-motion.css (gleicher Commit)
   Einzige Wertänderung gegenüber der Startseite: Gold rgba(241,196,15,…) wird Marken-Gold rgba(255,200,87,…).
   Schriftdateien (@font-face) bindet die jeweilige Seite selbst ein, weil die Pfade je Ort verschieden sind. */

:root{
  /* ---------- Farben: Foundations tokens.css (Zeilen 35 bis 61) ---------- */
  --night-950:#06080F;
  --night-900:#0B1020;
  --night-850:#0F1530;
  --night-800:#131A2E;
  --night-700:#1C2440;
  --mint-300:#8BE9CE;
  --mint-400:#5DE0BE;
  --mint-500:#2BB897;
  --gold-300:#FFE19A;
  --gold-400:#FFC857;
  --gold-500:#E0A52E;
  --coral-400:#FF8A7A;
  --star-100:#FFFFFF;
  --star-200:#ECF1FF;
  --star-300:#C9D2EE;
  --star-400:#9BA6CC;
  --star-500:#6B7AA8;
  --blau-wiederholung:#1CB0F6;     /* Startseite: Wiederholungen, kein Puls */
  --cursor-mint:#9be8d3;           /* Startseite: Schreibmaschinen-Cursor und Akzentwort */

  /* ---------- Rollen (Namen der Startseite, Werte aus den Foundations) ---------- */
  --bg-base:var(--night-900);
  --mint:var(--mint-400);
  --mint-klein:var(--mint-300);    /* kleine Mint-Schrift über den Wolken (Regel 7, 17), Frank 06.10.2026 */
  --gold:var(--gold-400);
  --gold-dim:var(--gold-500);
  --coral:var(--coral-400);
  --tertiary:var(--blau-wiederholung);
  --fg-1:var(--star-100);
  --fg-2:var(--star-200);
  --fg-3:var(--star-400);
  --fg-4:var(--star-500);          /* nur deaktiviert, kein Lesetext (Kontrast unter 4,5:1) */
  --fg-on-mint:var(--night-900);
  --fg-on-gold:var(--night-900);
  --gold-verlauf:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  --line:rgba(201,210,238,0.08);
  --line-mint:rgba(93,224,190,0.32);
  --glass:#c9d2ee0a;               /* Kartenfläche des Mockups ersetzt das alte Weiß 4 Prozent */

  /* ---------- Schrift: Foundations tokens.css (Zeilen 124 bis 152), Mono-Gewicht und Hero von der Startseite ---------- */
  --font-display:"Poppins","Inter",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Poppins","Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --mono-gewicht:700;
  --t-display-xl:800 64px/1.04 var(--font-display);
  --t-display-l:800 48px/1.06 var(--font-display);
  --t-display-m:800 36px/1.08 var(--font-display);
  --t-h1:700 32px/1.12 var(--font-display);
  --t-h2:700 24px/1.18 var(--font-display);
  --t-h3:600 20px/1.25 var(--font-display);
  --t-h4:600 18px/1.30 var(--font-display);
  --t-body-lg:400 18px/1.55 var(--font-body);
  --t-body:400 16px/1.55 var(--font-body);
  --t-body-sm:400 14px/1.50 var(--font-body);
  --t-caption:400 12px/1.45 var(--font-body);
  --t-button-lg:700 16px/1.20 var(--font-display);
  --t-button:700 14px/1.20 var(--font-display);
  --track-tight:-0.02em;
  --t-hero-h1:900 clamp(31px,7.4vw,64px)/0.96 var(--font-display);
  --hero-h1-laufweite:-1px;
  --eyebrow-groesse:13px;
  --eyebrow-gewicht:700;
  --eyebrow-abstand:2.4px;
  --eyebrow-punkt:6px;
  --cursor-breite:3px;
  --cursor-leuchten:0 0 12px rgba(93,224,190,0.6);
  --akzent-leuchten:0 0 24px rgba(93,224,190,0.35);

  /* ---------- Radien ---------- */
  --radius-karte:20px;             /* Mockup --radius, Frank 02.10. Entscheidung 11 */
  --radius-kachel:12px;            /* kleine Kacheln */
  --radius-knopf:14px;             /* Mockup --action-radius */
  --radius-pill:999px;

  /* ---------- Kartenrezept dunkel: Mockup .d-card unter [data-theme=dark] ---------- */
  --karte-flaeche:linear-gradient(to bottom,#ffffff0f,transparent 8%),#c9d2ee0a;
  --karte-rand:#c9d2ee14;
  --karte-kante:#ffffff24;
  --karte-schatten:0 5px 12px #0000004d,inset 0 1px 0 #ffffff24;
  --karte-schatten-aussen:0 5px 12px #0000004d;  /* Ruheschatten für Karten mit Hover-Schatten: ohne Innenlicht, damit Chrome den Übergang überblendet; Lichtkante bleibt über den Rand */
  --karte-flaeche-deckend:linear-gradient(to bottom,#ffffff0f,transparent 8%),linear-gradient(#c9d2ee0a,#c9d2ee0a),var(--night-900);  /* Hover über Nachbarn */

  /* ---------- Knopf: Mockup --action-* ---------- */
  --knopf-flaeche:linear-gradient(165deg,#83ead0 0%,#60dec0 35%,#36c5a6 72%,#2bb897 100%);
  --knopf-schrift:#103c32;
  --knopf-schatten:inset 0 1.5px 1px #effffbc7,inset 0 -2px 2px #11785f59,0 3px 0 #1d775f,0 5px 9px #071e2238;
  --knopf-schatten-flach:inset 0 1.5px 1px #effffbc7,inset 0 -2px 2px #11785f59;  /* aktive Sprache im Fuß */
  --knopf-schatten-gedrueckt:inset 0 1px 2px #11634e66,inset 0 -1px 1px #dffff54d,0 1px 0 #1d775f,0 2px 4px #071e2230;

  /* ---------- Leuchten und Schatten: Foundations (Glow ist die Höhen-Sprache) ---------- */
  --glow-mint-sm:0 0 0 1px var(--line-mint),0 0 12px rgba(93,224,190,0.28);
  --glow-mint-md:0 0 0 1px var(--line-mint),0 0 28px rgba(93,224,190,0.40),0 8px 32px rgba(0,0,0,0.5);
  --glow-mint-lg:0 0 0 1px rgba(93,224,190,0.5),0 0 60px rgba(93,224,190,0.55),0 16px 48px rgba(0,0,0,0.6);
  --glow-gold:0 0 0 1px rgba(255,200,87,0.32),0 0 24px rgba(255,200,87,0.34);
  --glow-coral:0 0 0 1px rgba(255,138,122,0.32),0 0 24px rgba(255,138,122,0.32);

  /* ---------- Buddy ---------- */
  --buddy-maske:linear-gradient(to bottom,#000 0%,#000 85%,#000b 91%,transparent 100%);  /* Mockup Bildkante */
  --karte-bild-maske:linear-gradient(to bottom,#000 0%,#000 66%,#000b 76%,transparent 100%);  /* Bildbereich der Web-Karten (Bild samt Hintergrund), einzige Maske dieser Karten; 10 Prozentpunkte weicher als die Buddy-Maske (Frank 02.10.: 20 % weicher, danach 50 % zurück) */
  --buddy-schatten-hero:drop-shadow(0 30px 40px rgba(0,0,0,0.5));   /* Skill bluebuddys-design, Web-Hero */
  --buddy-schatten-karte:drop-shadow(0 14px 18px rgba(0,0,0,0.55)); /* Startseite .uc-card .cover img */
  --buddy-schatten-buehne:drop-shadow(0 14px 18px rgba(0,0,0,0.6)); /* Startseite .avatar-buddy */
  /* Schattenraum (Frank 05.10.2026: „transparenter Rahmen“ um die Buddys). Schatten (filter) und Maske am selben Bild:
     Chrome malt den Schatten und schneidet ihn mit der Maske an der Bildbox gerade ab. Das Bild bekommt innen Platz für
     den Schatten (padding oben und seitlich, Lage per Gegen-Rand gleich, Inhalt pixelgleich). Die Maske deckt den Platz
     oben voll (erste Lage, 50 % reicht, solange der Auslauf unter der Bildmitte beginnt) und läuft unten wie bisher aus
     (zweite Lage auf der Inhaltsfläche, seitlich wiederholt). Wie in der App endet der Schein vor dem Rand der Bildfläche.
     Werte: gemessene Reichweite des Schattens plus Reserve (BERICHT-POLISH-W3.md). */
  --schattenraum-buehne:40px;   /* --buddy-schatten-buehne, gemessen 39 px */
  --schattenraum-avatar:16px;   /* Heute-Avatar drop-shadow(0 4px 6px), gemessen 14 px */
  --schattenraum-karte:56px;    /* Ratgeber-Bildkarte drop-shadow(0 18px 24px), gemessen 52 px */
  --schattenraum-mini:6px;      /* Spieler-Ansicht drop-shadow(0 -0.5px 0.5px) und (0 2px 2px), Podest und Kartenbild */
  --buddy-maske-raum:linear-gradient(#000 0 0) 0 0/100% 50% no-repeat border-box,var(--buddy-maske) 0 0/100% 100% repeat-x content-box border-box;
  --karte-bild-maske-raum:linear-gradient(#000 0 0) 0 0/100% 50% no-repeat border-box,var(--karte-bild-maske) 0 0/100% 100% repeat-x content-box border-box;
  --disc-blau:linear-gradient(135deg,#5BA0FF,#3080DD);
  --disc-rand:rgba(93,224,190,0.55);
  --gold-rand-stark:rgba(255,200,87,0.6);
  --disc-leuchten:0 0 32px rgba(93,224,190,0.4),0 8px 16px rgba(0,0,0,0.4);
  --disc-gold-leuchten:0 0 32px rgba(255,200,87,0.5),0 8px 16px rgba(0,0,0,0.4);
  --cover-licht:radial-gradient(circle at 50% 100%,rgba(93,224,190,0.18),transparent 60%);
  --cover-tiefe:inset 0 -20px 40px rgba(13,16,35,0.6);

  /* ---------- Chips und Pillen (Startseite .spec-pill, .uc-card .tag, .chip-a, .chip-b) ---------- */
  --pill-flaeche:rgba(93,224,190,0.08);
  --tag-flaeche:rgba(93,224,190,0.10);
  --tag-rand:rgba(93,224,190,0.35);
  --chip-flaeche:rgba(11,16,32,0.78);
  --chip-rand:rgba(93,224,190,0.25);
  --chip-schatten:0 12px 32px rgba(0,0,0,0.5);
  --chip-gold-schatten:0 8px 24px rgba(255,200,87,0.5),0 0 22px rgba(255,200,87,0.35);

  /* ---------- Bedienung ---------- */
  --fokus-ring:2px solid var(--mint-400);
  --fokus-abstand:3px;
  --tap-min:44px;

  /* ---------- Hover und Leuchten der Startseite (index.html 71fd595 plus dotog-motion.css 71fd595) ---------- */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --dm-scale-lg:1.3;
  --dm-scale-sm:1.1;
  --dm-scale-touch:1.04;
  --dm-glow:1.2;
  --dm-glow-gold:2;
  --dm-mint:93 224 190;
  --dm-gold:255 200 87;
  --dm-coral:255 122 107;
  --dm-page:var(--bg-base);        /* deckender Grund, wenn eine vergrößerte Karte über Nachbarn liegt */

  --bild-dauer:240ms;
  --bild-hover-transform:translateY(-10px) scale(1.02);
  --bild-hover-rand:rgba(93,224,190,0.55);
  --bild-hover-schatten:0 30px 60px rgba(13,16,35,0.6),0 0 50px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));
  --bild-glanz:linear-gradient(105deg,transparent 35%,rgba(93,224,190,0.15) 50%,transparent 65%);
  --bild-glanz-dauer:500ms;

  --nutzen-dauer:280ms;
  --nutzen-cover-licht:radial-gradient(circle at 50% 100%,rgba(93,224,190,0.22),transparent 65%);
  --nutzen-cover-tiefe:inset 0 -30px 50px rgba(13,16,35,0.65);
  --nutzen-boden-licht:radial-gradient(ellipse,rgba(93,224,190,0.5),transparent 70%);
  --nutzen-hover-transform:translateY(-6px);
  --nutzen-hover-rand:rgba(93,224,190,0.55);
  --nutzen-hover-schatten:0 18px 40px rgba(0,0,0,0.5),0 0 36px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));

  --belohnung-dauer:240ms;
  --belohnung-rand:rgba(255,200,87,0.32);
  --belohnung-hover-transform:scale(1.04);   /* wird auf der Startseite von der laufenden Schwebe-Animation verdrängt */
  --belohnung-hover-scale:var(--dm-scale-sm);
  --belohnung-hover-rand:rgba(255,200,87,0.95);
  --belohnung-hover-schatten:0 8px 22px rgb(var(--dm-gold) / calc(.32 * var(--dm-glow)));
  --belohnung-flaeche:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.16) 50%,transparent 65%),linear-gradient(180deg,rgba(255,200,87,0.05),rgba(255,200,87,0.02));
  --belohnung-glanz:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.18) 50%,transparent 65%);
  --belohnung-glanz-dauer:700ms;
  --belohnung-symbol-hover:scale(1.1);
  --belohnung-symbol-flaeche:rgba(255,200,87,0.12);
  --belohnung-symbol-rand:rgba(255,200,87,0.4);
  --bereit-flaeche:radial-gradient(circle at 30% 30%,var(--star-100),var(--gold-400));
  --bereit-leuchten:0 0 10px rgba(255,200,87,0.7);
  --einloesbar-rand:rgba(255,200,87,0.9);
  --einloesbar-schatten:0 0 0 1px rgba(255,200,87,0.45),0 16px 38px rgba(255,200,87,0.24);

  --schritt-dauer:280ms;
  --schritt-hover-scale:var(--dm-scale-lg);
  --schritt-hover-schatten:0 30px 70px rgb(0 0 0 / .6),0 0 44px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow))),inset 0 1px 0 rgba(255,255,255,0.05);

  --kachel-dauer:220ms;
  --chat-rand:rgba(93,224,190,0.18);
  --kachel-hover-transform:translateY(-2px);
  --kachel-hover-scale:var(--dm-scale-sm);
  --chat-hover-rand:rgba(93,224,190,0.5);
  --chat-hover-schatten:0 12px 32px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));
  --kal-rand:rgba(255,200,87,0.22);
  --kal-hover-rand:rgb(var(--dm-gold) / .8);
  --kal-hover-schatten:0 14px 40px rgb(var(--dm-gold) / calc(.16 * var(--dm-glow-gold))),0 0 18px rgb(var(--dm-gold) / calc(.08 * var(--dm-glow-gold)));

  --faq-dauer:240ms;
  --faq-rand-offen:rgba(93,224,190,0.5);
  --faq-flaeche-offen:rgba(93,224,190,0.04);
  --faq-hover-flaeche:linear-gradient(rgb(var(--dm-mint) / .04),rgb(var(--dm-mint) / .04)),var(--bg-base);
  --faq-hover-translate:0 -2px;
  --faq-hover-scale:var(--dm-scale-sm);
  --faq-hover-rand:rgb(var(--dm-mint) / .5);
  --faq-hover-schatten:0 12px 32px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));

  --knopf-dauer:240ms;
  --knopf-hover-transform:translateY(-2px);
  --knopf-hover-filter:brightness(1.08);
  --knopf-pfeil-hover:translateX(4px);
  --knopf-druck:translateY(0) scale(0.98);

  --orange:#ff9633;                /* Sprint-Schrift, Startseite .sprint-pre */
  --orange-rand:rgba(255,140,40,0.65);
  --familie-licht:radial-gradient(120% 90% at 0% 100%,rgb(var(--dm-coral) / .09),transparent 62%);
  --zahl-rand:rgba(255,200,87,0.25);
  --video-rand:rgba(93,224,190,0.32);
  --video-leuchten:0 30px 90px rgba(0,0,0,0.6),0 0 60px rgba(93,224,190,0.18);
  --kopf-flaeche:rgba(11,16,32,0.72);
  --kopf-rand:rgba(93,224,190,0.12);
  --sprache-rand:rgba(93,224,190,0.55);
  --sprache-leuchten:0 0 10px rgba(93,224,190,0.22);
  --fuss-sprache-rand:rgb(var(--dm-mint) / .26);
  --fuss-sprache-hover-rand:rgb(var(--dm-mint) / .6);
  --fuss-sprache-hover-schatten:0 8px 22px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));
  --fuss-sprache-hover:0 -1px;

  /* ---------- Bewegungs-Zuweisungen der Startseite (Name, Dauer, Kurve, Versatz) ---------- */
  --anim-eyebrow-punkt:glowPulse 1.6s ease-in-out infinite;
  --anim-bild-1:floaty 5.2s ease-in-out 0ms infinite;
  --anim-bild-2:floaty 4.6s ease-in-out 280ms infinite;
  --anim-bild-3:floaty 5.8s ease-in-out 560ms infinite;
  --anim-hero-buddy:floaty 5.5s ease-in-out infinite;
  --anim-nutzen:floaty 4.4s ease-in-out infinite;
  --anim-familie-1:floaty 3.6s ease-in-out 200ms infinite;
  --anim-familie-2:floaty 3.6s ease-in-out 400ms infinite;
  --anim-familie-3:floaty 3.6s ease-in-out 600ms infinite;
  --anim-chip-1:floaty 4.6s ease-in-out infinite;
  --anim-chip-2:floaty 4.6s ease-in-out 0.6s infinite;
  --anim-chip-3:floaty 4.6s ease-in-out 1.2s infinite;
  --anim-belohnung-1:rewardFloat 4.8s ease-in-out 0s infinite,rewardSweep 5.4s linear 0s infinite;
  --anim-belohnung-2:rewardFloat 4.8s ease-in-out 0.4s infinite,rewardSweep 5.4s linear 0.4s infinite;
  --anim-belohnung-3:rewardFloat 4.8s ease-in-out 0.8s infinite,rewardSweep 5.4s linear 0.8s infinite;
  --anim-belohnung-4:rewardFloat 4.8s ease-in-out 1.2s infinite,rewardSweep 5.4s linear 1.2s infinite;
  --anim-wackeln-1:cardWiggle 4.6s ease-in-out 0s infinite;
  --anim-wackeln-2:cardWiggle 4.6s ease-in-out 1s infinite;
  --anim-wackeln-3:cardWiggle 4.6s ease-in-out 2s infinite;
  --anim-disc:glowPulseDisc 2.5s ease-in-out infinite;
  --anim-disc-gold:glowPulseGold 2.5s ease-in-out infinite;
  --anim-orange:pulseOrange 2.5s ease-in-out infinite;
  --anim-orange-text:pulseOrangeText 2.5s ease-in-out infinite;
  --anim-mint:pulseMint 2.4s ease-in-out infinite;
  --anim-bereit:pulseReady 2.4s ease-in-out infinite;
  --anim-cursor:twBlink 0.62s steps(1) infinite;
  --anim-caret:twCaret 0.62s steps(1) infinite;
  --anim-wort:revealWord 500ms var(--ease) forwards;
  --anim-einblenden:fadeIn 600ms ease 1500ms forwards;
  --anim-blase:bubbleIn 600ms var(--ease) backwards;
  --anim-tippen:typeBounce 1.2s ease-in-out infinite;
  --anim-funkeln:sparkle 1.6s ease-in-out infinite;
  --anim-marke:brandPulse 4s ease-in-out infinite;
  --anim-sprache:langPulse 1.4s ease-in-out 0.8s 10;
  --anim-orb-a:orbDriftA 24s ease-in-out infinite;
  --anim-orb-b:orbDriftB 32s ease-in-out infinite reverse;
  --anim-orb-c:orbDriftC 28s ease-in-out infinite;
  --anim-podest:dotog-podium-float 4s ease-in-out infinite;
  --anim-krone:dotog-crown-float 4s ease-in-out infinite;
  --anim-video:floaty 5.5s ease-in-out infinite;

  /* ---------- Wolken (Muster Minntera minntera-grund.liquid Zeilen 77 bis 81 und 110 bis 112, Farben der Startseiten-Orbs) ---------- */
  --wolke-1:rgba(27,116,96,0.35);
  --wolke-2:rgba(93,224,190,0.22);
  --wolke-3:rgba(255,200,87,0.18);
  --wolke-groesse:70vmax;
  --wolke-weich:blur(55px);
  --orb-weich:blur(80px);
  --anim-wolke-1:wolkeA 32s ease-in-out infinite;
  --anim-wolke-2:wolkeB 24s ease-in-out infinite;
  --anim-wolke-3:wolkeC 28s ease-in-out infinite;
  /* ---------- Abschnitte der Startseite (Frank 03.10.2026: „96 px überall“) ---------- */
  --abschnitt-abstand:96px;
}

/* ---------- Wolken: fest hinter der ganzen Seite ---------- */
.wolken{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.wolke{position:absolute;width:var(--wolke-groesse);height:var(--wolke-groesse);border-radius:50%;filter:var(--wolke-weich);opacity:0.95;will-change:transform;}
.wolke.w1{top:-8vmax;left:-6vmax;background:var(--wolke-1);animation:var(--anim-wolke-1);}
.wolke.w2{top:18vmax;right:-8vmax;background:var(--wolke-2);animation:var(--anim-wolke-2);}
.wolke.w3{bottom:-12vmax;left:22vmax;background:var(--wolke-3);animation:var(--anim-wolke-3);}
/* Abschnitte der Startseite: gleicher Abstand, je Abschnitt die Hälfte oben und unten. Bis 768 px gelten die Handy-Abstände der Seite. */
@media (min-width:769px){.pain,.solution,.buddychat,.rewards,.kalender,.usecase,.faq,.guardband,.waitlist{padding-block:calc(var(--abschnitt-abstand) / 2);}}
/* Schreibmaschine: Ist eine Überschrift fertig getippt, bleibt sie sichtbar, auch wenn der Browser sie danach übersetzt und Zeichen ersetzt. */
.tw-fertig .tw-c{opacity:1;}

/* Sinus-Drift als reine Keyframes: Ausschlag und Wachsen wie Minntera mnWolken (ax, ay, s) */
@keyframes wolkeA{0%,50%,100%{transform:translate(0,0) scale(1);}25%{transform:translate(38vmax,16vmax) scale(1.22);}75%{transform:translate(-38vmax,-16vmax) scale(1.22);}}
@keyframes wolkeB{0%,50%,100%{transform:translate(0,0) scale(1);}25%{transform:translate(-36vmax,18vmax) scale(1.25);}75%{transform:translate(36vmax,-18vmax) scale(1.25);}}
@keyframes wolkeC{0%,50%,100%{transform:translate(0,0) scale(1);}25%{transform:translate(34vmax,-22vmax) scale(1.28);}75%{transform:translate(-34vmax,22vmax) scale(1.28);}}

/* ---------- Keyframes der Startseite, wörtlich aus index.html 71fd595 (Zeile in Klammern) ---------- */
/* floaty (1679) */
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
/* rewardFloat (1680) */
@keyframes rewardFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
/* rewardSweep (1681) */
@keyframes rewardSweep{0%{background-position:220% 0;}100%{background-position:-220% 0;}}
/* cardWiggle (769) */
@keyframes cardWiggle{
  0%,100%{transform:rotate(0deg);}
  25%{transform:rotate(-1.4deg);}
  75%{transform:rotate(1.4deg);}
}
/* glowPulse (1684) */
@keyframes glowPulse{0%,100%{opacity:1;box-shadow:0 0 8px var(--mint);}50%{opacity:0.5;box-shadow:0 0 16px var(--mint);}}
/* glowPulseDisc (1685) */
@keyframes glowPulseDisc{
  0%,100%{box-shadow:0 0 32px rgba(93,224,190,0.4),0 8px 16px rgba(0,0,0,0.4);}
  50%{box-shadow:0 0 56px rgba(93,224,190,0.7),0 8px 16px rgba(0,0,0,0.4);}
}
/* glowPulseGold (1689), Gold auf Marken-Gold umgestellt */
@keyframes glowPulseGold{
  0%,100%{box-shadow:0 0 32px rgba(255,200,87,0.5),0 8px 16px rgba(0,0,0,0.4);}
  50%{box-shadow:0 0 56px rgba(255,200,87,0.8),0 8px 16px rgba(0,0,0,0.4);}
}
/* pulseOrange (935) */
@keyframes pulseOrange{0%,100%{box-shadow:0 0 14px rgba(255,140,40,0.18);}50%{box-shadow:0 0 24px rgba(255,140,40,0.42);}}
/* pulseMint (936) */
@keyframes pulseMint{0%,100%{box-shadow:0 0 14px rgba(93,224,190,0.35);}50%{box-shadow:0 0 26px rgba(93,224,190,0.65);}}
/* pulseOrangeText (967) */
@keyframes pulseOrangeText{0%,100%{opacity:0.75;text-shadow:none;}50%{opacity:1;text-shadow:0 0 10px rgba(255,150,40,0.6);}}
/* pulseReady (1024) */
@keyframes pulseReady{0%,100%{box-shadow:0 0 12px rgba(93,224,190,0.2);}50%{box-shadow:0 0 22px rgba(93,224,190,0.5);}}
/* bubbleIn (1186) */
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* typeBounce (1187) */
@keyframes typeBounce{0%,80%,100%{transform:translateY(0);opacity:0.5;}40%{transform:translateY(-5px);opacity:1;}}
/* twBlink (482) */
@keyframes twBlink{0%,100%{opacity:0.9;}50%{opacity:0;}}
/* twCaret (483) */
@keyframes twCaret{0%,100%{border-right-color:currentColor;}50%{border-right-color:transparent;}}
/* brandPulse (1693) */
@keyframes brandPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
/* orbDriftA, orbDriftB, orbDriftC (1694 bis 1696) */
@keyframes orbDriftA{0%,100%{translate:0 0;}50%{translate:80px 60px;}}
@keyframes orbDriftB{0%,100%{translate:0 0;}50%{translate:-60px 80px;}}
@keyframes orbDriftC{0%,100%{translate:0 0;}50%{translate:50px -40px;}}
/* revealWord (1698) */
@keyframes revealWord{to{opacity:1;transform:translateY(0);}}
/* fadeIn (1699) */
@keyframes fadeIn{to{opacity:1;}}
/* sparkle (1703), Gold auf Marken-Gold umgestellt */
@keyframes sparkle{0%,100%{transform:scale(1);box-shadow:0 0 12px rgba(255,200,87,0.7);}50%{transform:scale(1.15);box-shadow:0 0 20px rgba(255,200,87,1);}}
/* langPulse (1858) */
@keyframes langPulse{0%,100%{box-shadow:0 0 10px rgba(93,224,190,0.22);}50%{box-shadow:0 0 20px rgba(93,224,190,0.65);border-color:#5DE0BE;}}

/* moveAlong (1702) */
@keyframes moveAlong{0%{left:0;}100%{left:100%;}}

/* ---------- Keyframe der Scroll-Einblendung, wörtlich aus assets/css/dotog-motion.css 71fd595 (101) ---------- */
@keyframes dmZoomIn{from{scale:.9;}to{scale:1;}}

/* ---------- Keyframes der Spieler-Ansicht, wörtlich aus assets/css/dotog-guide.css 71fd595 (238, 239) ---------- */
@keyframes dotog-podium-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes dotog-crown-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- Schmale Fenster mit Maus: weniger Vergrößerung (dotog-motion.css 71fd595, 21 bis 22) ---------- */
@media (max-width:1023px){:root{--dm-scale-lg:1.1;}}
@media (max-width:640px){:root{--dm-scale-lg:1.04;--dm-scale-sm:1.04;}}

/* ---------- Weniger Bewegung: alles aus, auch Hover-Verschiebung; Leuchten bleibt ---------- */
@media (prefers-reduced-motion:reduce){
  :root{
    --bild-hover-transform:none;--nutzen-hover-transform:none;--belohnung-hover-transform:none;
    --kachel-hover-transform:none;--knopf-hover-transform:none;--knopf-pfeil-hover:none;--knopf-druck:none;
    --belohnung-symbol-hover:none;--faq-hover-translate:0 0;--fuss-sprache-hover:0 0;
    --dm-scale-lg:1;--dm-scale-sm:1;--dm-scale-touch:1;
  }
  *,*::before,*::after{animation:none !important;transition:none !important;}
}
/* Gleiche Regeln als Schalter (Klasse am html-Element), etwa für den Knopf „Weniger Bewegung“ im Markenkit */
:root.weniger-bewegung{
  --bild-hover-transform:none;--nutzen-hover-transform:none;--belohnung-hover-transform:none;
  --kachel-hover-transform:none;--knopf-hover-transform:none;--knopf-pfeil-hover:none;--knopf-druck:none;
  --belohnung-symbol-hover:none;--faq-hover-translate:0 0;--fuss-sprache-hover:0 0;
  --dm-scale-lg:1;--dm-scale-sm:1;--dm-scale-touch:1;
}
.weniger-bewegung *,.weniger-bewegung *::before,.weniger-bewegung *::after{animation:none !important;transition:none !important;}