/* ############################################################
   KOPIE — NICHT HIER EDITIEREN.

   Original: design/tokens.css. Der Rumpf dieser Datei ab Zeile 21
   ist eine byte-identische Kopie davon. Sie muss existieren, weil
   ein Grav-Theme ein in sich geschlossenes Verzeichnis ist: Die
   Instanz bekommt nur `marketing/theme/` nach
   `user/themes/aufwind/` kopiert und sieht `design/` nie.

   Änderungen gehören nach design/tokens.css und werden von dort
   hierher kopiert:
     cp design/tokens.css marketing/theme/css/tokens.css
   (danach diesen Kopf-Kommentar wieder voranstellen).
   Prüfen:
     diff <(tail -n +21 marketing/theme/css/tokens.css) design/tokens.css

   Seitenspezifisches Layout steht in css/aufwind.css, nicht hier.
   Lokale Hexwerte sind ein Review-Blocker (design-system.md §13).
   ############################################################ */

/* ============================================================
   AUFWIND — Design-Token & Basiskomponenten
   Scheinemeister / Licensemaster · v3.1 · 2026-08-30
   Spezifikation: design/design-system.md (einzige Quelle der Wahrheit)
   Referenz-Seite: design/prototypes/marketing.html
   Lebender Styleguide: design/prototypes/styleguide.html

   v3.0 ersetzt „Sommerwind" v2.0 (verworfen: schwarze Kasten-
   Outlines) und „Rückenwind" v1.0 (verworfen: Pastell-Klinik).
   Das Rezept bleibt: Weiß, Luft, Ton-in-Ton, blau statt grün.

   v3.1 (30.08.2026) verschiebt die Palette. v3.0 hatte sieben
   Flächenwerte hexgenau von der Referenz-App übernommen; alle
   sieben Familien tragen jetzt eigene Werte (dE2000 7,0–8,3
   gegen den alten Wert, Cloud 4,5). Kante und Tint sind
   mitgewandert. Begründung und Nachrechnung: design-system.md
   §2 „Warum die Palette verschoben wurde". NICHT zurückdrehen.

   1. Reines Weiß, viel Luft. Sektionen wechseln Weiß/Cloud,
      ein blaues Band pro Seite. Kein Cream, kein Pastell-Grund.
   2. Tiefe = TON-IN-TON-Unterkante (dunklere Stufe derselben
      Farbe). Keine schwarzen Outlines, keine box-shadows.
   3. Karten tragen 2-px-Ränder in --border, Radius 16/24.
   4. Text ist Charcoal oder Muted. Weißer Text nur auf
      Sky/Edge-Flächen NIE als kleiner Text — auf Farbflächen
      steht Text in Charcoal (4,3–8,4:1). Grün heißt „richtig",
      Herz-Rot heißt „Leben/Fehler" — Farben haben Bedeutung.

   ACHTUNG — ZWEITE KOPIE IN DER APP:
   app/apps/web/src/app/tokens.css ist eine wortgleiche Kopie dieser
   Datei. Sie muss existieren, weil der Docker-Build `design/`
   nicht in den Kontext bekommt (Kontext ist app/). Jede Änderung
   hier anschließend hinüberkopieren:
     cp design/tokens.css app/apps/web/src/app/tokens.css
   (der Kopf-Kommentar der Kopie bleibt erhalten). Läuft das
   auseinander, hat die App still ein anderes Designsystem als
   die Prototypen.

   Einbindung (jede Seite) — Schriften SELBST ausliefern, nicht von
   Google laden (design-system.md §3; LG Muenchen I, 3 O 17493/20):
   <link rel="preload" as="font" type="font/woff2" crossorigin href="…/fonts/fredoka-latin.woff2">
   <link rel="preload" as="font" type="font/woff2" crossorigin href="…/fonts/nunito-latin.woff2">
   <link rel="stylesheet" href="…/fonts.css">      <-- VOR tokens.css
   <link rel="stylesheet" href="…/design/tokens.css">
   ============================================================ */

:root{
  /* Grund & Text */
  --white:   #FFFFFF;   /* Canvas */
  --cloud:   #EFF9FE;   /* Wechsel-Sektion */
  --border:  #E5E5E5;   /* Kartenränder, Leisten-Hairlines */
  --text:    #3C3C3C;   /* Headlines & Body — 11:1 auf Weiß */
  --muted:   #767676;   /* Sekundärtext auf Weiß — 4,54:1 (#777 hatte nur 4,48:1, axe 09.10.2026) */
  --muted-2: #6F6F6F;   /* Sekundärtext auf Cloud — 4,7:1 */
  --faint:   #AFAFAF;   /* Gesperrt, Platzhalter (nie Fließtext) */

  /* Farbfamilien: Fläche + dunklere Druck-Kante + heller Tint */
  --sky:     #02B4E0; --sky-edge:   #049CC4; --sky-tint:   #E1F6FC;  /* Marke, Fortschritt */
  --sun:     #FFE000; --sun-edge:   #E3BF00; --sun-tint:   #F9F4C5;  /* CTA, Belohnung */
  --orange:  #EDA000; --orange-edge:#CF8F02; --orange-tint:#FCEAD6;  /* Serie/Streak */
  --grass:   #2BCE57; --grass-edge: #18A542; --grass-tint: #E1FDE2;  /* NUR richtig/bestanden */
  --lilac:   #AF90FF; --lilac-edge: #9278E7; --lilac-tint: #EEEAFF;  /* Liga, Spezial */
  --heart:   #FD4A69;                        --heart-tint: #FEE3E7;  /* Leben, Fehler */

  /* Fachbild-Töne (nur INNERHALB gerahmter Frage-Bilder, siehe design-system.md §2) */
  --night:   #12263C;   /* Nachtszenen (Lichterführung) */
  --night-2: #2E4460;   /* Nacht-Silhouetten */
  --see-gruen: #00A650; --see-gruen-fuss: #007A3B;  /* Steuerbord-Tonne, Grünlicht */
  --see-rot:   #EE3124; --see-rot-fuss:   #B32317;  /* Backbord-Tonne, Rotlicht */

  /* Text-taugliche Ableitungen (gemessen) */
  --link:    #0F74BC;   /* Links: 4,95:1 auf Weiß, 4,7:1 auf Cloud */
  --error:   #D22F2F;   /* Fehlertext NUR auf Weiß: 5,0:1 */

  /* Data-Viz (Sechs-Punkte-Check PASS, DESIGN.md §8) */
  --viz-blue:  #2E7CD6; /* Serie 1 — immer „Du" */
  --viz-amber: #B98514; /* Serie 2 — Vergleich */
  --viz-ramp-2: #8FCBF5; /* Sequenzielle Ramp, Stufe 2 (Stufe 1 = --sky-tint) */
  --viz-ramp-4: #0D4E8C; /* Sequenzielle Ramp, Stufe 4 (Stufe 3 = --viz-blue) */

  /* Schrift */
  --display: "Fredoka", sans-serif;
  --body:    "Nunito", sans-serif;

  /* Raum (4px-Basis) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --wrap: 1120px;

  /* Radius & Kanten */
  --r-sm: 12px; --r: 16px; --r-lg: 24px; --r-pill: 999px;
  --edge: 4px;              /* Druck-Kante Buttons */
  --edge-lg: 6px;           /* Druck-Kante Pfad-Nodes */

  /* Motion */
  --ease: cubic-bezier(.2,.8,.3,1);
  --t-micro: .15s;
  --t-reveal: .5s;
}

/* ---------- Reset & Grundfläche ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);font-size:17px;line-height:1.6;font-weight:600;
  color:var(--text);background:var(--white);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sun-tint);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section-cloud{background:var(--cloud)}
.section-cloud .t-muted,.section-cloud .t-lead{color:var(--muted-2)}
.section-sky{background:var(--sky)}   /* Band: max. 1× pro Seite, Text darauf Charcoal */
@media(max-width:720px){
  .wrap{padding:0 20px}
  .section{padding:56px 0}
}

/* ---------- Typografie ---------- */
.t-hero,.t-display,.t-h2,.t-h3,.t-h4,.t-card{font-family:var(--display);color:var(--text)}
.t-hero   {font-weight:600;font-size:clamp(40px,5.2vw,62px);line-height:1.12;letter-spacing:-.01em}
.t-display{font-weight:600;font-size:clamp(32px,4.4vw,50px);line-height:1.14;letter-spacing:-.01em}
.t-h2     {font-weight:600;font-size:clamp(28px,3.8vw,40px);line-height:1.18}
.t-h3     {font-weight:600;font-size:22px;line-height:1.3}
.t-h4     {font-weight:600;font-size:19px;line-height:1.3}
.t-card   {font-weight:600;font-size:17px;line-height:1.35}
.t-lead   {font-size:19px;line-height:1.6;color:var(--muted);max-width:32em}
.t-muted  {color:var(--muted)}
.t-small  {font-size:15px;line-height:1.6}
.t-caption{font-size:13.5px;font-weight:700;line-height:1.5;color:var(--muted)}
.kicker{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--link);display:block;margin-bottom:10px;
}
b,strong{font-weight:800}
/* Swoosh: blauer Schwung unter dem Schlüsselwort — der Marker der Marke */
.swoosh{position:relative;display:inline-block}
.swoosh svg{position:absolute;left:0;right:0;bottom:-6px;width:100%;height:14px}

/* ---------- Buttons: Ton-in-Ton-Druckkante ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:17px;line-height:1;
  color:var(--text);background:var(--sun);
  border:none;border-bottom:var(--edge) solid var(--sun-edge);
  border-radius:var(--r);padding:15px 30px;cursor:pointer;text-decoration:none;
  white-space:nowrap;transition:filter var(--t-micro) var(--ease);
}
.btn:hover{filter:brightness(1.04);text-decoration:none}
.btn:active{transform:translateY(3px);border-bottom-width:1px}
.btn-sky{background:var(--sky);border-bottom-color:var(--sky-edge)}
.btn-2{background:var(--white);color:var(--link);border:2px solid var(--border);border-bottom-width:var(--edge)}
.btn-2:hover{background:var(--cloud)}
.btn-text{background:none;border:none;color:var(--link);padding:6px 4px;font-family:var(--body);font-weight:800;font-size:15px}
.btn-sm{font-size:15px;padding:10px 20px}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--border);border-bottom-color:#D4D4D4;color:var(--faint);pointer-events:none;
}
/* Fokus-Ring: volle Link-Farbe, KEIN Alpha. Die frühere Fassung
   (:where(…) mit rgba(15,116,188,.5)) mischte auf Weiß zu #87BADE und
   kam damit auf 2,08:1 — WCAG 2.2 SC 1.4.11 verlangt 3:1. --link deckend
   ergibt 4,95:1 auf Weiß und 4,63:1 auf Cloud.
   Auch das :where() ist raus: es gab der Regel Spezifität 0, jede
   Komponentenregel mit einer Klasse stach sie aus. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--link);outline-offset:2px;
}

/* ---------- Tags & Status-Badges ---------- */
.tag{ /* neutrale Info-Pill (Hero-Sticker, Meta) */
  display:inline-flex;align-items:center;gap:8px;background:var(--white);
  border:2px solid var(--border);border-radius:var(--r-pill);padding:8px 16px;
  font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--text);
}
.badge{
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);
  padding:7px 16px;font-size:14px;font-weight:800;color:var(--text);
}
.badge i{width:9px;height:9px;border-radius:50%;font-style:normal;flex:none}
.badge-ok  {background:var(--grass-tint)}  .badge-ok i{background:var(--grass)}
.badge-hint{background:var(--sun-tint)}    .badge-hint i{background:var(--sun);border:1px solid var(--sun-edge)}
.badge-warn{background:var(--heart-tint)}  .badge-warn i{background:var(--heart)}
.badge-liga{background:var(--lilac-tint)}  .badge-liga i{background:var(--lilac)}

/* ---------- Karten ---------- */
.card{
  background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);
  padding:30px;
}
.card-tint{border:none;border-radius:var(--r-lg);padding:30px}
.card-tint.is-sky   {background:var(--sky-tint)}
.card-tint.is-sun   {background:var(--sun-tint)}
.card-tint.is-grass {background:var(--grass-tint)}
.card-tint.is-lilac {background:var(--lilac-tint)}
.card-tint.is-orange{background:var(--orange-tint)}
.ico{ /* Icon-Kachel — Radius aus dem Token-Satz (§5) */
  width:56px;height:56px;border-radius:var(--r);display:grid;place-items:center;
  font-size:26px;font-style:normal;flex:none;
}

/* ---------- Schein-Leiste (Duolingo-Sprachleiste) ---------- */
.lb{border-top:2px solid var(--border);border-bottom:2px solid var(--border)}
.lb-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  overflow-x:auto;scrollbar-width:none;
}
.lb-inner::-webkit-scrollbar{display:none}
.lb-item{
  display:inline-flex;align-items:center;gap:9px;padding:17px 12px;
  font-weight:800;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;transition:color var(--t-micro) var(--ease);
}
.lb-item:hover{color:var(--text);text-decoration:none}
.lb-item span{font-size:17px;letter-spacing:0}
.lb-item.more{color:var(--link)}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14.5px;font-weight:800}
.input{
  width:100%;font-family:var(--body);font-weight:600;font-size:16px;color:var(--text);
  background:var(--white);border:2px solid var(--border);border-radius:var(--r);
  padding:13px 16px;transition:border-color var(--t-micro) var(--ease);
}
.input::placeholder{color:var(--faint)}
.input:focus{border-color:var(--sky);outline:3px solid var(--sky-tint);outline-offset:0}
/* Der Tint-Halo bleibt die Maus-Geste; für die Tastatur trägt derselbe
   Ring die Link-Farbe — sonst wäre der einzige Fokus-Beleg im Formular
   ein Sky-Tint-Rand mit 1,1:1 (SC 1.4.11). */
.input:focus-visible{outline-color:var(--link)}
.field .error{font-size:14px;font-weight:700;color:var(--error)}
.field.has-error .input{border-color:var(--heart)}

/* ---------- Lernweg (Pfad) ---------- */
.path{display:flex;flex-direction:column;align-items:flex-start}
.path .row{display:flex;align-items:center;gap:16px}
.pnode{
  width:74px;height:68px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;border-bottom:var(--edge-lg) solid;flex:none;color:var(--white);
}
.pnode.done{background:var(--sky);border-color:var(--sky-edge)}
/* Tint-Halo (§5.3) als outline — box-shadow ist per §1.2/§11 verboten.
   Glyph auf Sun steht in Charcoal (weiß fällt mit 1,4:1 durch), genau wie .week i.today */
.pnode.now{background:var(--sun);border-color:var(--sun-edge);color:var(--text);outline:8px solid var(--sun-tint)}
.pnode.locked{background:var(--border);border-color:#D4D4D4;color:var(--faint)}
.path .lbl{font-weight:800;font-size:15.5px}
.path .lbl small{display:block;font-weight:700;color:var(--muted);font-size:13px}
.path .gap{width:6px;height:26px;border-radius:var(--r-pill);background:var(--border);margin:6px 0 6px 34px}

/* ---------- Gamification ---------- */
/* Serie (Streak): Flamme + Zähler + Wochenpunkte */
.streak{display:flex;align-items:center;gap:16px}
.streak .flame{
  width:56px;height:56px;border-radius:50%;background:var(--orange-tint);
  display:grid;place-items:center;font-size:26px;flex:none;
}
.streak b{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.1;display:block}
.streak span{font-size:13.5px;font-weight:700;color:var(--muted)}
.week{display:flex;gap:8px}
.week i{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-style:normal;font-weight:800;
  background:var(--border);color:var(--faint);
}
.week i.done{background:var(--orange);color:var(--white)}
.week i.today{background:var(--sun);color:var(--text);outline:4px solid var(--sun-tint)}

/* XP-Balken */
.xp{display:flex;align-items:center;gap:12px}
.xp .bar{flex:1;height:14px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.xp .bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--sky);transition:width .9s var(--ease)}
.xp .val{font-family:var(--display);font-weight:600;font-size:15px;white-space:nowrap}

/* Herzen (Leben) */
.hearts{display:inline-flex;gap:6px;font-size:22px}
.hearts i{font-style:normal}
.hearts i.lost{filter:grayscale(1);opacity:.35}

/* Tagesziel-Karte (Quest) */
.quest{display:flex;align-items:center;gap:16px;padding:16px 18px;border:2px solid var(--border);border-radius:var(--r-lg);background:var(--white)}
.quest .ico{width:48px;height:48px;border-radius:14px;font-size:22px}
.quest .q-body{flex:1}
.quest .q-body b{font-size:15.5px;font-weight:800;display:block;margin-bottom:6px}
.quest .bar{height:12px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.quest .bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--sun)}
.quest .reward{flex:none;font-size:22px}
.quest.done{border-color:var(--grass);background:var(--grass-tint)}
.quest.done .bar{background:rgba(255,255,255,.7)} .quest.done .bar i{background:var(--grass)}

/* Abzeichen (Erfolge) */
.achv{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;width:110px}
.achv .medal{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:32px;
  border-bottom:var(--edge) solid;
}
.achv b{font-size:13.5px;font-weight:800;line-height:1.3}
.achv small{font-size:12px;font-weight:700;color:var(--muted)}
.achv.locked .medal{background:var(--border)!important;border-color:#D4D4D4!important;filter:grayscale(1);opacity:.6}
.achv.locked b{color:var(--faint)}

/* Liga / Bestenliste */
.league{display:flex;flex-direction:column;gap:8px}
.league .lrow{
  display:flex;align-items:center;gap:14px;padding:10px 16px;
  border-radius:var(--r);font-weight:800;font-size:15px;
}
.league .lrow.me{background:var(--sky-tint)}
.league .rank{width:24px;text-align:center;font-family:var(--display);font-weight:600;color:var(--muted)}
.league .avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:800;flex:none;
}
.league .xp-val{margin-left:auto;color:var(--muted);font-weight:800;font-size:14px}
.league .up{color:var(--grass-edge)} .league .down{color:var(--error)}

/* Combo-Toast („3 richtig in Folge") */
.combo{
  display:inline-flex;align-items:center;gap:10px;background:var(--sun);
  border-bottom:var(--edge) solid var(--sun-edge);border-radius:var(--r-pill);
  padding:10px 20px;font-family:var(--display);font-weight:600;font-size:16px;
}

/* Auflösungs-Pop: Anticipation-los als Feedback-Snap, mit Overshoot+Settle */
@keyframes okPop{0%{transform:scale(.92)}55%{transform:scale(1.05)}80%{transform:scale(.98)}100%{transform:scale(1)}}
.answer.correct,.img-answer.correct{animation:okPop .45s cubic-bezier(.34,1.56,.64,1)}

/* Level-Up / Bestanden-Karte */
.levelup{
  position:relative;overflow:hidden;text-align:center;border:2px solid var(--border);
  border-radius:var(--r-lg);background:var(--white);padding:36px 30px;
}
.levelup .confetti i{
  position:absolute;width:10px;height:10px;border-radius:3px;font-style:normal;
  opacity:0;animation:confettiFly .85s cubic-bezier(.2,.8,.3,1) forwards;
}
.levelup .confetti i:nth-child(2){animation-delay:.06s}
.levelup .confetti i:nth-child(3){animation-delay:.12s}
.levelup .confetti i:nth-child(4){animation-delay:.18s}
.levelup .confetti i:nth-child(5){animation-delay:.24s}
.levelup .confetti i:nth-child(6){animation-delay:.3s}
@keyframes confettiFly{
  0%{transform:translateY(56px) scale(.4) rotate(0deg);opacity:0}
  16%{opacity:1}
  55%{transform:translateY(-14px) scale(1.12) rotate(24deg);opacity:1}
  100%{transform:translateY(30px) scale(.9) rotate(50deg);opacity:0}
}
.levelup .big{font-size:52px;line-height:1;margin-bottom:10px}
.levelup h3{font-family:var(--display);font-weight:600;font-size:22px}
.levelup p{font-size:15px;color:var(--muted);margin:8px 0 18px}

/* ---------- Quiz ---------- */
.quiz-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.quiz-top .bar{flex:1;height:14px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.quiz-top .bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--grass)}
.answers{display:flex;flex-direction:column;gap:12px}
.answer{
  display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;
  font-family:var(--body);color:var(--text);
  background:var(--white);border:2px solid var(--border);border-bottom-width:var(--edge);
  border-radius:var(--r);font-weight:700;font-size:16px;text-align:left;width:100%;
}
.answer:disabled{color:var(--text)} /* UA-GrayText verhindern — Zustand zeigen Rand & Fläche */
.answer:hover{background:var(--cloud)}
.answer:active{transform:translateY(2px);border-bottom-width:2px}
.answer .key{
  width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  border:2px solid var(--border);font-size:13px;font-weight:800;color:var(--muted);flex:none;
}
.answer.selected{border-color:var(--sky);background:var(--sky-tint)}
.answer.selected .key{border-color:var(--sky);color:var(--link)}
.answer.correct{border-color:var(--grass);background:var(--grass-tint)}
.answer.correct .key{border-color:var(--grass);background:var(--grass);color:var(--white)}
.answer.wrong{border-color:var(--heart);background:var(--heart-tint)}
.answer.wrong .key{border-color:var(--heart);background:var(--heart);color:var(--white)}
.feedback{
  display:flex;align-items:center;gap:12px;border-radius:var(--r-lg);padding:14px 18px;
  font-weight:800;font-size:15.5px;
}
.feedback.good{background:var(--grass-tint)}
.feedback.bad{background:var(--heart-tint)}

/* ---------- Fortschritt & Readiness ---------- */
.progress{height:14px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--sky);transition:width .9s var(--ease)}
.ring{
  --val:82;--size:200px;
  width:var(--size);height:var(--size);border-radius:50%;position:relative;flex:none;
  background:conic-gradient(var(--sky) calc(var(--val)*1%), var(--sky-tint) 0);
}
.ring::before{content:"";position:absolute;inset:calc(var(--size)*.09);border-radius:50%;background:var(--white)}
.ring>div{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring b{font-family:var(--display);font-weight:600;font-size:calc(var(--size)*.24);line-height:1;display:block;color:var(--text)}
.ring span{font-size:13.5px;font-weight:800;color:var(--muted)}

/* ---------- Maskottchen ----------
   Die Möwe ist seit 29.08.2026 kein Inline-SVG mehr, sondern produzierte
   Grafik: design/assets/charaktere/*.png (freigestellt, auf die Palette
   quantisiert). Die früheren .m-*-Füllregeln sind mit den verworfenen
   Designrichtungen entfallen — Farben stecken jetzt in den Assets selbst.
   Bemaßung und Bewegung stehen bei der jeweiligen Seite. */

/* ---------- Navigation & Footer ---------- */
.navbar{
  position:sticky;top:0;z-index:50;background:var(--white);
  border-bottom:2px solid transparent;transition:border-color var(--t-micro) var(--ease);
}
/* Kein backdrop-filter: bricht den Launch-Preview-Renderer (schwarze Boxen) */
.navbar.is-scrolled{border-bottom-color:var(--border)}
.navbar .bar{display:flex;align-items:center;gap:28px;max-width:var(--wrap);margin:0 auto;padding:14px 24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:22px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand svg{width:38px;height:38px}
.navbar nav{display:flex;gap:24px;margin-left:auto;font-weight:800;font-size:15px;overflow-x:auto;scrollbar-width:none}
.navbar nav::-webkit-scrollbar{display:none}
.navbar nav a{color:var(--muted);white-space:nowrap}
.navbar nav a:hover,.navbar nav a.is-active{color:var(--text);text-decoration:none}
@media(max-width:700px){.navbar nav{display:none}.navbar .bar .btn{margin-left:auto}}
.footer-big{background:var(--cloud);padding:44px 0;font-size:14.5px;font-weight:700;color:var(--muted-2)}
.footer-big a{color:var(--muted-2)}
.footer-big a:hover{color:var(--text)}

/* ---------- Motion ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);transition-delay:var(--d,0s)}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}