/* ============================================================================
   PROJEKT OKTOPUS — Design-System "oktopus.css"  (Nacht-Build 2026-07-03)
   ----------------------------------------------------------------------------
   EIN System fuer beide Deploy-Targets (all-inkl static + portale-vercel).
   Farbwerte 1:1 aus dem Live-Crawl extrahiert (crawl/home.html):
     Hero-Gradient linear-gradient(95deg,#281954 0%,#6A2086 24%,#221440 62%…)
     Gold #FBC201 · Gold-Soft #DBB241 · Orange #FEAA3A · Success #2ABB61
   Fonts: Figtree (Body) + Montserrat (Display) — lokal via fonts.css,
   KEINE Google-Fonts-Links (Abmahnrisiko).
   Mobile-first. Alle Animationen respektieren prefers-reduced-motion.
   Einbindung pro Seite:
     <link rel="stylesheet" href="assets/css/fonts.css">
     <link rel="stylesheet" href="assets/css/oktopus.css">
     <script src="assets/js/oktopus.js" defer></script>
   ============================================================================ */

/* ============ 1. TOKENS ============ */
:root {
  /* --- Farbe: Cosmic-Dark / Magic-Brand --- */
  --ok-purple-deep:   #221440;  /* rgb(34,20,64)  Basis-Hintergrund       */
  --ok-purple:        #281954;  /* rgb(40,25,84)  Gradient-Start          */
  --ok-magenta:       #6A2086;  /* rgb(106,32,134) Gradient-Glow          */
  --ok-gold:          #FBC201;  /* rgb(251,194,1)  Brand-Akzent/CTA       */
  --ok-gold-soft:     #DBB241;  /* rgb(219,178,65) Border/edler Goldton   */
  --ok-orange:        #FEAA3A;  /* rgb(254,170,58) Portal-Glow            */
  --ok-white:         #FFFFFF;
  --ok-black:         #000000;  /* Footer-Flaeche                          */
  --ok-ink:           #221440;  /* Text AUF Gold (Highlight/CTA solid)     */
  --ok-success:       #2ABB61;  /* Erfolg (Opt-in, Login-Unlock)           */
  --ok-error:         #FF6B6B;  /* Fehlermeldung (Login/Formular)          */
  --ok-text:          var(--ok-white);
  --ok-text-dim:      rgba(255,255,255,.78);
  --ok-text-faint:    rgba(255,255,255,.55);
  --ok-violet-light:  #CE93E8;  /* helles Violett auf Dunkel (ersetzt #70297D, das nur auf Weiss funktionierte) */

  /* --- Flaechen / Verlaeufe --- */
  --ok-gradient-hero: linear-gradient(95deg, var(--ok-purple) 0%, var(--ok-magenta) 24%, var(--ok-purple-deep) 62%, var(--ok-purple-deep) 100%);
  --ok-gradient-gold: linear-gradient(100deg, var(--ok-gold) 0%, var(--ok-orange) 100%);
  --ok-surface:       rgba(255,255,255,.05);   /* Card auf Dunkel */
  --ok-surface-line:  rgba(251,194,1,.35);     /* Card-/Input-Rand */
  --ok-gradient-card:    linear-gradient(160deg, #2E1C63 0%, #221440 55%, #3A1A5E 100%);  /* dunkle Karten-Flaeche */
  --ok-gradient-section: linear-gradient(180deg, #1B0F38 0%, #221440 45%, #2A1550 100%);  /* dunkle Sektions-Flaeche (Ex-Weisszonen) */
  --ok-glow-media:       drop-shadow(0 0 18px rgba(254,170,58,.28));                      /* sanfter Glow fuer Charakter-Illustrationen */

  /* --- Typografie --- */
  --ok-font-body:    'Figtree', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ok-font-display: 'Montserrat', 'Futura', 'Trebuchet MS', system-ui, sans-serif;
  --ok-text-xs:   0.75rem;
  --ok-text-sm:   0.875rem;
  --ok-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --ok-text-md:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --ok-text-lg:   clamp(1.3rem, 1.15rem + 0.8vw, 1.75rem);
  --ok-text-xl:   clamp(1.6rem, 1.35rem + 1.3vw, 2.375rem);
  --ok-text-2xl:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --ok-text-3xl:  clamp(2.2rem, 1.7rem + 2.8vw, 3.75rem);
  --ok-leading-tight: 1.2;
  --ok-leading:       1.65;
  --ok-tracking:      3px;    /* Eyebrow/Buttons wie Original (letter-spacing:3px) */
  --ok-tracking-sm:   2px;

  /* --- Spacing (4px-Raster) --- */
  --ok-space-1:  .25rem;
  --ok-space-2:  .5rem;
  --ok-space-3:  .75rem;
  --ok-space-4:  1rem;
  --ok-space-6:  1.5rem;
  --ok-space-8:  2rem;
  --ok-space-12: 3rem;
  --ok-space-16: 4rem;
  --ok-space-24: 6rem;
  --ok-content-w:   720px;   /* Text-Spalte wie Original             */
  --ok-content-w-lg: 980px;  /* breite Sektionen (Portal-Grid etc.)  */

  /* --- Form / Radius / Schatten --- */
  --ok-radius:     5px;      /* Buttons wie Original (border-radius:5px) */
  --ok-radius-lg:  12px;
  --ok-shadow-glow:      0 0 24px rgba(251,194,1,.35);
  --ok-shadow-glow-soft: 0 0 40px rgba(254,170,58,.25);
  --ok-shadow-card:      0 10px 40px rgba(0,0,0,.45);

  /* --- Motion --- */
  --ok-ease:       cubic-bezier(.22,.61,.36,1);
  --ok-ease-pop:   cubic-bezier(.34,1.56,.64,1);
  --ok-dur-fast:   .25s;
  --ok-dur:        .6s;
  --ok-dur-slow:   1s;
}

/* ============ 2. BASE / RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ok-purple-deep);
  background-image: var(--ok-gradient-hero);
  color: var(--ok-text);
  font-family: var(--ok-font-body);
  font-size: var(--ok-text-base);
  line-height: var(--ok-leading);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ok-gold); }
a:hover { color: var(--ok-orange); }
:focus-visible {
  outline: 2px solid var(--ok-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--ok-gold); color: var(--ok-ink); }

/* ============ 3. LAYOUT ============ */
.ok-section { padding: var(--ok-space-12) var(--ok-space-6); }
.ok-section--tight { padding-block: var(--ok-space-8); }
.ok-section--roomy { padding-block: var(--ok-space-16); }
.ok-container { max-width: var(--ok-content-w); margin-inline: auto; }
.ok-container--wide { max-width: var(--ok-content-w-lg); margin-inline: auto; }
.ok-center { text-align: center; }
.ok-stack > * + * { margin-top: var(--ok-space-6); }

/* Nur mobil / nur desktop (Ersatz fuer Thrive-Breakpoint-Duplikate) */
.ok-mobile-only { display: block; }
.ok-desktop-only { display: none; }
@media (min-width: 768px) {
  .ok-mobile-only { display: none; }
  .ok-desktop-only { display: block; }
}

/* ============ 4. TYPO-KOMPONENTEN ============ */
.ok-eyebrow {                        /* "– TRUST THE MAGIC –" */
  font-family: var(--ok-font-display);
  font-size: var(--ok-text-md);
  font-weight: 600;
  letter-spacing: var(--ok-tracking);
  text-transform: uppercase;
  color: var(--ok-gold);
  margin: 0 0 var(--ok-space-2);
}
.ok-kicker {                         /* "DAS KINDERBUCH FUER ERWACHSENE" */
  font-family: var(--ok-font-display);
  font-size: var(--ok-text-sm);
  font-weight: 600;
  letter-spacing: var(--ok-tracking-sm);
  text-transform: uppercase;
  color: var(--ok-white);
  margin: 0 0 var(--ok-space-6);
}
.ok-h1 {
  font-family: var(--ok-font-display);
  font-size: var(--ok-text-xl);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ok-white);
  margin: 0 0 var(--ok-space-4);
}
.ok-h2 {
  font-family: var(--ok-font-display);
  font-size: var(--ok-text-lg);
  font-weight: 700;
  line-height: var(--ok-leading-tight);
  color: var(--ok-gold);
  margin: 0 0 var(--ok-space-4);
}
.ok-h3 {
  font-family: var(--ok-font-display);
  font-size: var(--ok-text-md);
  font-weight: 700;
  letter-spacing: var(--ok-tracking-sm);
  text-transform: uppercase;
  color: var(--ok-gold);
  margin: 0 0 var(--ok-space-4);
}
.ok-highlight {                      /* Gold-Marker "Deiner wahren Bestimmung" */
  background: var(--ok-gold);
  color: var(--ok-ink);
  padding: 0 .35em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ok-gold { color: var(--ok-gold); }
.ok-underline {                      /* goldene Unterstreichung "ersten Schritt" */
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ok-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.ok-lead { font-size: var(--ok-text-md); }
.ok-small { font-size: var(--ok-text-sm); color: var(--ok-text-dim); }
.ok-divider {                        /* feine Trennlinie unterm Hero */
  border: 0;
  height: 1px;
  width: min(360px, 70%);
  margin: var(--ok-space-8) auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.ok-step-num {                       /* grosse "1." / "2." Ziffern */
  font-family: var(--ok-font-display);
  font-size: var(--ok-text-3xl);
  font-weight: 300;
  line-height: 1;
  color: var(--ok-white);
}
.ok-step-num--gold { color: var(--ok-gold); }

/* ============ 5. BUTTONS ============ */
.ok-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: var(--ok-space-3) var(--ok-space-8);
  border-radius: var(--ok-radius);
  font-family: var(--ok-font-display);
  font-size: var(--ok-text-sm);
  font-weight: 600;
  letter-spacing: var(--ok-tracking-sm);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--ok-dur-fast) var(--ok-ease-pop),
              box-shadow var(--ok-dur-fast) var(--ok-ease),
              background-color var(--ok-dur-fast) var(--ok-ease),
              color var(--ok-dur-fast) var(--ok-ease);
  will-change: transform;
}
.ok-btn:active { transform: scale(.97); }
.ok-btn--gold {                      /* Original-CTA: transparent, Gold-Rand, weisser Text */
  background: rgba(0,0,0,.15);
  border-color: var(--ok-gold);
  color: var(--ok-white);
}
.ok-btn--gold:hover {
  background: rgba(251,194,1,.12);
  box-shadow: var(--ok-shadow-glow);
  color: var(--ok-white);
  transform: translateY(-2px);
}
.ok-btn--solid {                     /* volle Gold-Flaeche (Formular-Submit, Login) */
  background: var(--ok-gradient-gold);
  border-color: var(--ok-gold);
  color: var(--ok-ink);
  font-weight: 700;
}
.ok-btn--solid:hover {
  box-shadow: var(--ok-shadow-glow);
  color: var(--ok-ink);
  transform: translateY(-2px);
}
.ok-btn--block { display: flex; width: 100%; }
.ok-btn .ok-btn-icon { flex: 0 0 auto; width: 1.2em; height: 1.2em; }

/* ============ 6. CARDS ============ */
.ok-card {
  background: var(--ok-surface);
  border: 1px solid var(--ok-surface-line);
  border-radius: var(--ok-radius-lg);
  padding: var(--ok-space-8) var(--ok-space-6);
  box-shadow: var(--ok-shadow-card);
  backdrop-filter: blur(4px);
}
.ok-card--portal {                   /* Portal-Kachel (magic-page, Portal-Login) */
  text-align: center;
  transition: transform var(--ok-dur-fast) var(--ok-ease-pop),
              box-shadow var(--ok-dur-fast) var(--ok-ease),
              border-color var(--ok-dur-fast) var(--ok-ease);
}
.ok-card--portal:hover {
  transform: translateY(-4px);
  border-color: var(--ok-gold);
  box-shadow: var(--ok-shadow-glow-soft);
}
.ok-card--locked { position: relative; }
.ok-card--locked::after {            /* Schloss-Indikator */
  content: '🗝';
  position: absolute;
  top: var(--ok-space-3);
  right: var(--ok-space-3);
  font-size: 1.1rem;
  opacity: .8;
}

/* ============ 7. VIDEO-COVER (Vimeo-Facade, ersetzt Thrive-Lazy-Wrapper) ==== */
.ok-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ok-radius-lg);
  overflow: hidden;
  background: var(--ok-black) center / cover no-repeat;
  border: 1px solid var(--ok-surface-line);
  box-shadow: var(--ok-shadow-card);
}
.ok-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ok-video-play {                     /* Play-Facade-Button (JS ersetzt ihn durch iframe) */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: rgba(34,20,64,.35);
  border: 0;
  cursor: pointer;
  transition: background var(--ok-dur-fast) var(--ok-ease);
}
.ok-video-play:hover { background: rgba(34,20,64,.15); }
.ok-video-play::before {             /* pulsierender Gold-Kreis */
  content: '';
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--ok-gradient-gold);
  box-shadow: var(--ok-shadow-glow);
  animation: ok-pulse 2.4s var(--ok-ease) infinite;
}
.ok-video-play::after {              /* Play-Dreieck */
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent var(--ok-ink);
  transform: translateX(4px);
}

/* ============ 8. FORMULARE ============ */
.ok-form { display: grid; gap: var(--ok-space-4); }
.ok-label {
  font-size: var(--ok-text-sm);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ok-text-dim);
}
.ok-input {
  width: 100%;
  min-height: 52px;
  padding: var(--ok-space-3) var(--ok-space-4);
  border-radius: var(--ok-radius);
  border: 1px solid var(--ok-surface-line);
  background: rgba(0,0,0,.25);
  color: var(--ok-white);
  font-family: var(--ok-font-body);
  font-size: var(--ok-text-base);
  transition: border-color var(--ok-dur-fast) var(--ok-ease),
              box-shadow var(--ok-dur-fast) var(--ok-ease);
}
.ok-input::placeholder { color: var(--ok-text-faint); }
.ok-input:focus {
  outline: none;
  border-color: var(--ok-gold);
  box-shadow: 0 0 0 3px rgba(251,194,1,.25);
}
.ok-form-error { color: var(--ok-error); font-size: var(--ok-text-sm); margin: 0; }
.ok-form-success { color: var(--ok-success); font-size: var(--ok-text-sm); margin: 0; }
.ok-hp {                             /* Honeypot — visuell weg, fuer Bots da */
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============ 9. FOOTER ============ */
.ok-footer {
  /* Oberer Teil (Logo, Divider, Empowered-Pill) TRANSPARENT -> erbt nahtlos den
     Seitenhintergrund, kein harter Cut. Kein horizontales Padding, damit der
     schwarze Abschluss (.ok-footer-base) randlos über die volle Breite geht. */
  background: transparent;
  padding: var(--ok-space-16) 0 0;
  text-align: center;
}
.ok-footer-logo { width: min(280px, 58%); margin: 0 auto var(--ok-space-4); }
/* "Schöner Seitenabschluss" — Sternchen-Divider mit Gold-Linien */
.ok-footer-divider {
  display: flex; align-items: center; justify-content: center; gap: var(--ok-space-4);
  width: min(440px, 88%); margin: var(--ok-space-4) auto var(--ok-space-8);
}
.ok-footer-divider::before, .ok-footer-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.45));
}
.ok-footer-divider::after { transform: scaleX(-1); }
.ok-fd-orn { color: var(--ok-gold); letter-spacing: .35em; font-size: .8rem; opacity: .85; white-space: nowrap; }
/* Empowered-by-Magnificus — Standard-Seitenende (wie andere Projekte) */
.ok-empowered { text-align: center; margin: 0 auto; }
.ok-empowered-pill {
  display: inline-block; position: relative;
  background: linear-gradient(180deg, rgba(106,32,134,.42) 0%, rgba(40,25,84,.20) 100%);
  border-radius: 60px 60px 0 0; padding: .95rem 2.8rem .55rem;
}
.ok-empowered-label {
  font-family: var(--ok-font-display); font-size: 9px; letter-spacing: .45em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  display: block; margin-bottom: .4rem;
}
.ok-empowered-logo {
  width: clamp(120px, 26vw, 170px); height: auto; display: block; margin: 0 auto;
  mix-blend-mode: lighten; opacity: .9;
}
/* Gold-Linie (Übergang zum schwarzen Abschluss) */
.ok-footer-goldline {
  height: 3px; margin-top: var(--ok-space-4);
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.3) 20%, rgba(201,168,76,.5) 50%, rgba(201,168,76,.3) 80%, transparent);
}
/* Schwarzer Abschluss: Social + Legal (+ Disclaimer) */
.ok-footer-base { background: #030108; padding: var(--ok-space-12) var(--ok-space-6); }
.ok-footer-social {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--ok-space-4) var(--ok-space-8); margin-bottom: var(--ok-space-6);
}
.ok-footer-social a {
  color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .2em;
  font-size: var(--ok-text-xs); text-decoration: none; font-family: var(--ok-font-display);
  display: inline-block; padding: 8px 6px;   /* grösseres Tap-Ziel auf Mobil */
}
.ok-footer-social a:hover { color: var(--ok-gold); }
.ok-footer-legal { color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: 1px; text-align: center; margin: 0; }
.ok-footer-legal a { color: rgba(255,255,255,.6); text-decoration: none; }
.ok-footer-legal a:hover { color: var(--ok-gold); }
.ok-footer-disclaimer {
  max-width: var(--ok-content-w-lg);
  margin: var(--ok-space-8) auto 0;
  font-size: var(--ok-text-xs);
  line-height: 1.8;
  color: var(--ok-text-faint);
}
.ok-footer-disclaimer h3 {
  font-size: var(--ok-text-xs);
  font-weight: 700;
  color: var(--ok-text-dim);
  margin: 0 0 var(--ok-space-4);
}
.ok-footer-disclaimer p { margin: 0 0 var(--ok-space-4); }

/* ============ 10. SCROLL-ANIMATIONEN ============ */
/* Basis: Element traegt .anim + Variante; oktopus.js setzt .is-inview.
   OHNE JS (oder mit reduced motion) bleibt alles sichtbar — kein Content-Verlust. */
@keyframes ok-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(251,194,1,.45); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(251,194,1,0); }
}
@keyframes ok-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes ok-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(254,170,58,.4)); }
  50%      { filter: drop-shadow(0 0 22px rgba(254,170,58,.9)); }
}

.js .anim { opacity: 0; transition: opacity var(--ok-dur) var(--ok-ease), transform var(--ok-dur) var(--ok-ease); }
.js .anim--fade     { }
.js .anim--up       { transform: translateY(36px); }
.js .anim--down     { transform: translateY(-36px); }
.js .anim--left     { transform: translateX(-48px); }
.js .anim--right    { transform: translateX(48px); }
.js .anim--scale    { transform: scale(.85); }
.js .anim--open     { transform: scaleY(.6) translateY(24px); transform-origin: bottom center; }
.js .anim.is-inview { opacity: 1; transform: none; }

/* Kontinuierliche Micro-Motion (startet erst wenn sichtbar) */
.js .anim--pulse.is-inview { animation: ok-pulse 2.6s var(--ok-ease) infinite; }
.js .anim--float.is-inview { animation: ok-float 4.5s ease-in-out infinite; }
.js .anim--glow.is-inview  { animation: ok-glow 3.2s ease-in-out infinite; }

/* Oktopus-Schwimmen: sanftes Schweben + leichtes Kippen, wie unter Wasser.
   animation-delay lässt erst die Scale-Einblendung fertig laufen. */
@keyframes ok-swim {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-12px) rotate(-1.6deg); }
  50%  { transform: translateY(-4px) rotate(0.4deg); }
  75%  { transform: translateY(-14px) rotate(1.8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.js .anim--swim.is-inview { animation: ok-swim 6.5s ease-in-out .9s infinite; will-change: transform; }

/* Stagger-Delays */
.js .anim-d1 { transition-delay: .12s; }
.js .anim-d2 { transition-delay: .24s; }
.js .anim-d3 { transition-delay: .36s; }
.js .anim-d4 { transition-delay: .48s; }

/* ============ 11. V5 DESKTOP-OVERHAUL — SHARED ADDITIV ============
   NUR NEUE NAMEN — bestehende Klassen/Tokens bleiben unberuehrt.
   V5-Spacing-Scale + wiederverwendbare Komponenten (Choice-Cards, XL-CTA,
   Footer-Lesbarkeits-Modifier). Auch fuer magic-page & Co. gedacht. */
:root {
  --ok-sp-1: 8px;
  --ok-sp-2: 16px;
  --ok-sp-3: 24px;
  --ok-sp-4: 40px;
  --ok-sp-5: 64px;
  --ok-sp-6: 96px;
  --ok-sp-7: 128px;
  --ok-sp-8: 160px;
}

/* Primary-CTA in Desktop-Groesse (zusaetzlich zu .ok-btn--gold/--solid) */
.ok-btn--xl {
  min-height: 56px;
  padding: var(--ok-space-3) var(--ok-sp-3);
  font-size: var(--ok-text-base);
  letter-spacing: 1px;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .ok-btn--xl { min-height: 60px; }
}

/* Zwei gleichwertige Wahl-Pfade: nummerierte Karten, identische Struktur
   (Badge → Text → Visual → CTA), Desktop nebeneinander */
.ok-choice-grid { display: grid; gap: var(--ok-sp-4); text-align: left; }
@media (min-width: 1024px) {
  .ok-choice-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.ok-choice-card {
  display: flex;
  flex-direction: column;
  gap: var(--ok-sp-3);
  background: var(--ok-gradient-card);
  border: 1px solid var(--ok-surface-line);
  border-radius: var(--ok-radius-lg);
  padding: var(--ok-sp-4) var(--ok-sp-3);
  box-shadow: var(--ok-shadow-card);
  transition: border-color var(--ok-dur-fast) var(--ok-ease),
              box-shadow var(--ok-dur-fast) var(--ok-ease);
}
.ok-choice-card:hover { border-color: var(--ok-gold); box-shadow: var(--ok-shadow-glow-soft); }
@media (min-width: 1024px) { .ok-choice-card { padding: var(--ok-sp-4); } }
.ok-choice-head { display: flex; align-items: center; gap: var(--ok-sp-3); }
.ok-choice-head > p { margin: 0; }
.ok-choice-num {                     /* Ziffern-Badge, kombiniert mit .ok-step-num */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--ok-gold-soft);
  background: rgba(251,194,1,.06);
  font-size: var(--ok-text-xl);
}
.ok-choice-visual { margin-inline: auto; }
.ok-choice-cta { margin-top: auto; text-align: center; }
.ok-choice-cta .ok-btn { width: 100%; }

/* Footer-Lesbarkeit als Modifier (Basisklassen unangetastet) */
.ok-footer-disclaimer--v5 {
  font-size: var(--ok-text-sm);
  line-height: 1.75;
  max-width: 70ch;
  color: rgba(255,255,255,.66);
}
.ok-footer-links--v5 a {
  display: inline-block;
  padding: var(--ok-space-2);
}

/* ============ 12. V5 PAGE-BLOCK: rebuild/all-inkl/index.html (Startseite) ============
   Gilt NUR fuer body.ok-home — page-spezifischer markierter Block. */
.ok-home h1, .ok-home h2, .ok-home h3 { text-wrap: balance; }
.ok-home .ok-container > p,
.ok-home .ok-container--wide > p { max-width: 62ch; margin-inline: auto; }
.ok-home .ok-section { padding: var(--ok-sp-5) var(--ok-space-6); }
.ok-home .ok-divider { margin-block: var(--ok-sp-3); }
.ok-home-mermaid { width: 110px; margin: 0 auto var(--ok-sp-3); filter: var(--ok-glow-media); }
.ok-home-sparkle { position: absolute; right: 0; top: 32%; width: 48px; height: auto; }
.ok-home-arrow { position: absolute; right: -8%; top: 8px; width: 56px; height: auto; }

@media (min-width: 1024px) {
  .ok-home .ok-section { padding-block: var(--ok-sp-6); }
  .ok-home .ok-hero { padding-block: var(--ok-sp-6) var(--ok-sp-2); }   /* Totraum unter Headline schliessen */
  .ok-home .ok-welcome { padding-block: var(--ok-sp-2) var(--ok-sp-6); }
  .ok-home .ok-journey { padding-bottom: var(--ok-sp-7); }
  .ok-home-mermaid { width: 150px; }
  .ok-home-sparkle { right: 12%; top: auto; bottom: 10px; }             /* Sparkle ankert am Ende des Gold-Highlights */
  .ok-home .ok-journey .ok-container--wide { max-width: 1120px; }

  /* Trust-Sektion: Portal links, Text rechts — Magazin-Komposition */
  .ok-home .ok-trust .ok-container {
    display: grid;
    grid-template-columns: 220px 1fr;
    column-gap: var(--ok-sp-5);
    align-items: center;
    max-width: 860px;
    text-align: left;
  }
  .ok-home .ok-trust .ok-container > img { grid-row: 1 / span 3; width: 190px; margin: 0 auto; }
  .ok-home .ok-trust .ok-container > p { margin-inline: 0; }
  .ok-home-arrow {                                                      /* Pfeil ankert inline am Spiel-Start-Link */
    position: static;
    display: inline-block;
    width: 48px;
    margin-left: var(--ok-sp-2);
    vertical-align: middle;
  }
}

/* ============ 14. V5 SHARED ADDITIV — CRITTER-MOTION (Tiere leben) ============
   Tier-Illustrationen kommen beim Ins-Bild-Scrollen mit Charakter rein
   (Scale 0.7 → 1 mit Overshoot + Dreh-Neigung) und schweben danach dezent
   weiter. NUR NEUE NAMEN; laeuft ueber die bestehende .anim/.is-inview-Mechanik
   und damit automatisch im reduced-motion-Kill-Switch (letzte Sektion). */
@keyframes ok-critter-in-l {
  0%   { opacity: 0; transform: scale(.7) rotate(-6deg); }
  70%  { opacity: 1; transform: scale(1.06) rotate(1.8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes ok-critter-in-r {
  0%   { opacity: 0; transform: scale(.7) rotate(6deg); }
  70%  { opacity: 1; transform: scale(1.06) rotate(-1.8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes ok-critter-idle {              /* Dauer-Schwebe wie ok-swim, in klein */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-8px) rotate(-1.1deg); }
  65%      { transform: translateY(-3px) rotate(1.2deg); }
}
.js .anim--critter { transition: none; transform: scale(.7); will-change: transform; }
.js .anim--critter.is-inview {
  opacity: 1;
  transform: none;
  animation: ok-critter-in-l .9s var(--ok-ease-pop) both,
             ok-critter-idle 7s ease-in-out 1.2s infinite;
}
.js .anim--critter.anim--critter-r.is-inview { animation-name: ok-critter-in-r, ok-critter-idle; }
/* Organisch versetzte Dauer-Schwebe — Nachbar-Tiere nie synchron */
.js .anim--critter.ok-drift-2.is-inview { animation-delay: 0s, 1.7s; animation-duration: .9s, 7.8s; }
.js .anim--critter.ok-drift-3.is-inview { animation-delay: 0s, 2.3s; animation-duration: .9s, 6.4s; }

/* ============ 15. V5 PAGE-BLOCK: rebuild/all-inkl/magic-page.html ============
   Gilt NUR fuer body.ok-magic — page-spezifischer markierter Block.
   Rhythmus wie die neue Startseite (--ok-sp-5 mobil / --ok-sp-6 Desktop),
   12 Portal-Karten als EIN Muster, Unlock-Merker-Styles (JS setzt Klassen). */
.ok-magic h1, .ok-magic h2, .ok-magic h3 { text-wrap: balance; }
.ok-magic .mp-hero { padding: var(--ok-sp-5) var(--ok-space-6) var(--ok-sp-4); }
.ok-magic .mp-band { padding: var(--ok-sp-5) var(--ok-space-6); }
.ok-magic .mp-main .ok-section { padding-block: var(--ok-sp-5); }
.ok-magic .mp-hero-sub { margin-bottom: var(--ok-sp-4); }
.ok-magic .mp-card { position: relative; }
.ok-magic .mp-card-media {
  transition: transform var(--ok-dur-fast) var(--ok-ease-pop),
              filter var(--ok-dur-fast) var(--ok-ease);
}
@media (hover: hover) {
  .ok-magic .mp-card:hover .mp-card-media {
    transform: scale(1.06);
    filter: drop-shadow(0 0 20px rgba(254,170,58,.45));
  }
}

/* Unlock-Merker: Cookie/localStorage "oktopus_portals" bzw. ?demo=… (oktopus.js) */
.ok-magic .mp-card.is-unlocked {
  border-color: var(--ok-gold);
  box-shadow: 0 0 0 1px rgba(251,194,1,.30), var(--ok-shadow-glow-soft);
}
.ok-magic .mp-card.is-unlocked .mp-card-media img {
  filter: drop-shadow(0 0 26px rgba(251,194,1,.55));
}
.ok-magic .mp-unlock-badge {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ok-gradient-gold);
  border: 2px solid var(--ok-purple-deep);
  color: var(--ok-ink);
  box-shadow: var(--ok-shadow-glow);
  z-index: 1;
}
.ok-magic .mp-unlock-badge svg { width: 22px; height: 22px; }

@media (min-width: 1024px) {
  .ok-magic .mp-hero { padding: var(--ok-sp-6) var(--ok-space-6) var(--ok-sp-4); }
  .ok-magic .mp-band { padding-block: var(--ok-sp-6); }
  .ok-magic .mp-main .ok-section { padding-block: var(--ok-sp-6); }
  .ok-magic .mp-info { margin-top: var(--ok-sp-5); }
  .ok-magic .mp-brand { gap: var(--ok-sp-4); }

  /* 12 Portal-Karten: EIN Muster (Tier oben → Titel → Text → CTA buendig unten),
     Zweispalter (6 Reihen) im Startseiten-Rhythmus */
  .ok-magic .mp-portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ok-sp-4);
    align-items: stretch;
    margin-top: var(--ok-sp-5);
  }
  .ok-magic .mp-portal-grid .mp-card {
    display: flex;
    flex-direction: column;
    gap: var(--ok-sp-3);
    margin-top: 0;
    padding: var(--ok-sp-4) var(--ok-sp-3) var(--ok-sp-3);
  }
  .ok-magic .mp-portal-grid .mp-card-media img { width: min(230px, 62%); }
  .ok-magic .mp-portal-grid .mp-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
  }
  .ok-magic .mp-portal-grid .mp-card-body p { margin-bottom: var(--ok-sp-3); }
  .ok-magic .mp-portal-grid .mp-card-body .ok-btn { margin-top: auto; width: 100%; }
}

/* ============ 16. V6 MOTION- + OZEAN-PASS — SHARED ADDITIV ============
   NUR NEUE NAMEN + .ok-v6-Gate (oktopus.js setzt <html class="ok-v6"> NUR wenn
   prefers-reduced-motion NICHT aktiv ist). Ohne Gate: exakt der alte V5-Look.
   Inhalt: tiefere Richtungs-Reveals, Tap-Press-Glow, Bläschen-Ebene,
   Licht-Kaustik im Hero, Ozean-Sound-Toggle. */

/* --- 16a. Tiefere Reveals (spuerbare Tiefe: mehr Weg + leichte Scale/Rotate) --- */
.js.ok-v6 .anim {
  transition-duration: .9s;
  transition-timing-function: var(--ok-ease);
}
.js.ok-v6 .anim--up    { transform: translateY(56px) scale(.985); }
.js.ok-v6 .anim--down  { transform: translateY(-56px) scale(.985); }
.js.ok-v6 .anim--left  { transform: translateX(-64px) rotate(-.7deg); }
.js.ok-v6 .anim--right { transform: translateX(64px) rotate(.7deg); }
.js.ok-v6 .anim--scale { transform: scale(.8) rotate(-1.4deg); }
.js.ok-v6 .anim--open  { transform: scaleY(.55) translateY(32px); }
/* Grosse Karten/Bilder: kommen mit Rotate-Ausgleich rein (edel, kein Rummel) */
.js.ok-v6 .ok-choice-card.anim,
.js.ok-v6 .mp-card.anim        { transform: translateY(64px) rotate(.8deg) scale(.97); }
.js.ok-v6 .ok-choice-visual.anim { transform: translateY(48px) rotate(-1deg) scale(.94); }
/* Reset NACH den neuen Startzustaenden (gleiche Spezifitaet → Reihenfolge zaehlt) */
.js.ok-v6 .anim.is-inview { opacity: 1; transform: none; }

/* --- 16b. Tap-/Press-Feedback (CTAs, Portal-Karten) --- */
.ok-v6 .ok-btn:active {
  transform: scale(.97);
  box-shadow: var(--ok-shadow-glow);
}
.ok-v6 .ok-card--portal:active,
.ok-v6 .ok-choice-card:active,
.ok-v6 .mp-card:active {
  transform: scale(.97);
  box-shadow: var(--ok-shadow-glow-soft);
  transition: transform var(--ok-dur-fast) var(--ok-ease-pop),
              box-shadow var(--ok-dur-fast) var(--ok-ease);
}

/* --- 16c. Aufsteigende Blaeschen (fixed Layer, GPU-transform only) --- */
.ok-bubbles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.ok-bubble {
  position: absolute;
  bottom: -6vh;
  left: var(--bx, 50%);
  width: var(--bs, 12px);
  height: var(--bs, 12px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
              rgba(255,255,255,.38),
              rgba(255,255,255,.10) 55%,
              rgba(255,255,255,0) 72%);
  box-shadow: inset 0 0 6px rgba(255,255,255,.16);
  opacity: 0;
  animation: ok-bubble-rise var(--bd, 16s) linear var(--bdel, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes ok-bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
  8%   { opacity: var(--bo, .32); }
  55%  { transform: translate3d(calc(var(--bwx, 24px) * .4), -60vh, 0) scale(.96); }
  88%  { opacity: var(--bo, .32); }
  100% { transform: translate3d(var(--bwx, 24px), -112vh, 0) scale(1.08); opacity: 0; }
}

/* --- 16d. Licht-Kaustik im Hero (2 driftende Gradient-Ebenen) --- */
.ok-v6 .ok-hero,
.ok-v6 .mp-hero { position: relative; overflow: hidden; }
.ok-v6 .ok-hero::before,
.ok-v6 .ok-hero::after,
.ok-v6 .mp-hero::before,
.ok-v6 .mp-hero::after {
  content: '';
  position: absolute;
  inset: -35%;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
}
.ok-v6 .ok-hero::before,
.ok-v6 .mp-hero::before {
  background:
    radial-gradient(44% 34% at 26% 28%, rgba(254,170,58,.11), transparent 70%),
    radial-gradient(38% 30% at 80% 70%, rgba(251,194,1,.07), transparent 70%);
  animation: ok-caustic-drift 26s ease-in-out infinite alternate;
}
.ok-v6 .ok-hero::after,
.ok-v6 .mp-hero::after {
  background:
    radial-gradient(50% 40% at 70% 34%, rgba(206,147,232,.10), transparent 70%),
    radial-gradient(36% 28% at 22% 74%, rgba(106,32,134,.16), transparent 70%);
  animation: ok-caustic-drift 34s ease-in-out infinite alternate-reverse;
}
@keyframes ok-caustic-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.14); }
}

/* --- 16e. Ozean-Sound-Toggle (Muschel/Welle, fixed unten rechts) --- */
.ok-ocean-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ok-surface-line);
  background: rgba(34,20,64,.78);
  backdrop-filter: blur(6px);
  color: var(--ok-gold);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  transition: transform var(--ok-dur-fast) var(--ok-ease-pop),
              box-shadow var(--ok-dur-fast) var(--ok-ease),
              border-color var(--ok-dur-fast) var(--ok-ease);
}
.ok-ocean-toggle:hover {
  border-color: var(--ok-gold);
  box-shadow: var(--ok-shadow-glow);
  transform: translateY(-2px);
}
.ok-ocean-toggle:active { transform: scale(.94); }
.ok-ocean-toggle svg { width: 26px; height: 26px; display: block; }
.ok-ocean-toggle[aria-pressed="true"] {
  background: var(--ok-gradient-gold);
  border-color: var(--ok-gold);
  color: var(--ok-ink);
  box-shadow: var(--ok-shadow-glow);
}
@media (max-width: 480px) {
  .ok-ocean-toggle { width: 46px; height: 46px; right: 12px; bottom: 12px; }
  .ok-ocean-toggle svg { width: 22px; height: 22px; }
}

/* ============ 17. V7 GAMIFICATION — SHARED ADDITIV (2026-07-04) ============
   NUR NEUE NAMEN (ok-cr7-*, okp-*, ok-pop-*, ok-bubble--gold).
   Feature 1: Tier-Persoenlichkeiten — pro Tier EIGENE Keyframes (in + idle),
              Amplitude skaliert ueber --pk (Klick-Reaktion setzt --pk hoch
              und startet die Animation neu — oktopus.js).
   Feature 2: Magic Map (Journey-Karte, ersetzt die alte Fortschritts-Pille).
   Feature 3: Sternenstaub-Chip mit Count-up.
   Feature 4: Bubble-Pop + goldene Stern-Blase.
   Performance: ausschliesslich transform/opacity. Reduced-Motion wird vom
   HARD-OFF-Block (Sektion 13) + JS-Gates vollstaendig abgedeckt. */

/* --- 17a. Tier-Keyframes: Drift (Seepferdchen) — aufrechtes Wippen --- */
@keyframes ok-cr7-drift-in {
  0%   { opacity: 0; transform: translateY(calc(46px * var(--pk,1))) rotate(calc(-5deg * var(--pk,1))) scale(.82); }
  55%  { opacity: 1; transform: translateY(calc(-10px * var(--pk,1))) rotate(calc(3deg * var(--pk,1))) scale(1.04); }
  80%  { transform: translateY(4px) rotate(-1.5deg) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-drift-idle {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-9px) rotate(1.6deg); }
}
/* --- Wahrbiss (Hai) — gleitet horizontal rein, schnelle Wende --- */
@keyframes ok-cr7-wahrbiss-in {
  0%   { opacity: 0; transform: translateX(calc(-110px * var(--pk,1))) rotate(-4deg); }
  60%  { opacity: 1; transform: translateX(calc(16px * var(--pk,1))) rotate(2.6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-wahrbiss-idle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  45%      { transform: translateX(-9px) rotate(-1.4deg); }
  72%      { transform: translateX(5px) rotate(.9deg); }
}
/* --- Elissa (Qualle) — pulsiert (Scale-Atmen), driftet nach oben --- */
@keyframes ok-cr7-elissa-in {
  0%   { opacity: 0; transform: translateY(calc(36px * var(--pk,1))) scale(.62, .78); }
  55%  { opacity: 1; transform: translateY(-7px) scale(1.08, .94); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-elissa-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-8px) scale(1.05, .95); }
  70%      { transform: translateY(-3px) scale(.985, 1.02); }
}
/* --- Glissa (Qualle) — eigener, langsamerer Puls-Rhythmus --- */
@keyframes ok-cr7-glissa-in {
  0%   { opacity: 0; transform: translateY(calc(42px * var(--pk,1))) scale(.7, .85) rotate(3deg); }
  60%  { opacity: 1; transform: translateY(-9px) scale(1.06, .93) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-glissa-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-11px) scale(1.04, .96); }
  75%      { transform: translateY(-2px) scale(.985, 1.02); }
}
/* --- Corin (Muschel) — schaukelt und glitzert (Scale-Schimmer) --- */
@keyframes ok-cr7-corin-in {
  0%   { opacity: 0; transform: rotate(calc(-11deg * var(--pk,1))) scale(.8); }
  45%  { opacity: 1; transform: rotate(calc(6deg * var(--pk,1))) scale(1.05); }
  70%  { transform: rotate(-3deg) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-corin-idle {
  0%, 100% { transform: rotate(-1.6deg) scale(1); }
  25%      { transform: rotate(0deg) scale(1.02); }
  50%      { transform: rotate(1.6deg) scale(1); }
}
/* --- Krabi (Krebs) — krabbelt SEITWAERTS in kleinen Schritten rein --- */
@keyframes ok-cr7-krabi-in {
  0%   { opacity: 0; transform: translateX(calc(96px * var(--pk,1))); }
  70%  { opacity: 1; transform: translateX(calc(-10px * var(--pk,1))); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-krabi-idle {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-8px); }
  60%      { transform: translateX(5px); }
}
/* --- Puffel (Kugelfisch) — plustert auf (Overshoot 1.15), beruhigt sich --- */
@keyframes ok-cr7-puffel-in {
  0%   { opacity: 0; transform: scale(.6); }
  55%  { opacity: 1; transform: scale(calc(1 + .15 * var(--pk,1))); }
  78%  { transform: scale(.965); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-puffel-idle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
/* --- Flap (Rochen) — gleitet in weiter S-Kurve rein --- */
@keyframes ok-cr7-flap-in {
  0%   { opacity: 0; transform: translate(calc(-95px * var(--pk,1)), calc(-20px * var(--pk,1))) rotate(-5deg); }
  35%  { opacity: 1; transform: translate(-42px, 15px) rotate(3deg); }
  70%  { transform: translate(12px, -9px) rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-flap-idle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(9px, -7px) rotate(1.6deg); }
  66%      { transform: translate(-7px, 5px) rotate(-1.4deg); }
}
/* --- Luma — glimmt sanft auf --- */
@keyframes ok-cr7-luma-in {
  0%   { opacity: 0; transform: scale(calc(1 - .1 * var(--pk,1))); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-luma-idle {
  0%, 100% { opacity: 1; transform: translateY(0) scale(1); }
  50%      { opacity: .88; transform: translateY(-6px) scale(1.02); }
}
/* --- Sir Octopus — Tentakel-Winken (Rotations-Wackeln, Pivot oben) --- */
@keyframes ok-cr7-octo-in {
  0%   { opacity: 0; transform: rotate(calc(-8deg * var(--pk,1))) scale(.85); }
  30%  { opacity: 1; transform: rotate(calc(5deg * var(--pk,1))); }
  55%  { transform: rotate(-3.5deg); }
  78%  { transform: rotate(2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-octo-idle {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-2.2deg); }
  60%      { transform: rotate(1.8deg); }
}
/* --- Nora (P11) — Schimmern (Opacity-Flackern) --- */
@keyframes ok-cr7-nora-in {
  0%   { opacity: 0; transform: scale(.9) rotate(calc(-2deg * var(--pk,1))); }
  40%  { opacity: .7; }
  58%  { opacity: .45; transform: scale(.98) rotate(1deg); }
  80%  { opacity: .92; }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-nora-idle {
  0%, 100% { opacity: 1; transform: translateY(0); }
  45%      { opacity: .9; transform: translateY(-5px); }
  55%      { opacity: 1; transform: translateY(-4px); }
}
/* --- Neptun (P12) — Schimmern, eigene tiefe Welle --- */
@keyframes ok-cr7-neptun-in {
  0%   { opacity: 0; transform: translateY(calc(26px * var(--pk,1))) scale(.92); }
  35%  { opacity: .55; }
  52%  { opacity: .35; transform: translateY(4px) scale(1.01); }
  70%  { opacity: .85; }
  100% { opacity: 1; transform: none; }
}
@keyframes ok-cr7-neptun-idle {
  0%, 100% { opacity: 1; transform: scale(1) translateY(0); }
  50%      { opacity: .9; transform: scale(1.025) translateY(-4px); }
}

/* --- 17a-Zuweisung: pro Tier EIGENE animation-Namen (schlagen -r/ok-drift-*) --- */
.js .anim--critter.anim--critter-drift.is-inview    { animation: ok-cr7-drift-in .95s var(--ok-ease-pop) both, ok-cr7-drift-idle 6.2s ease-in-out 1.1s infinite; }
.js .anim--critter.anim--critter-wahrbiss.is-inview { animation: ok-cr7-wahrbiss-in .85s var(--ok-ease) both, ok-cr7-wahrbiss-idle 7.4s ease-in-out 1s infinite; }
.js .anim--critter.anim--critter-elissa.is-inview   { animation: ok-cr7-elissa-in 1s var(--ok-ease-pop) both, ok-cr7-elissa-idle 5.6s ease-in-out 1.2s infinite; }
.js .anim--critter.anim--critter-glissa.is-inview   { animation: ok-cr7-glissa-in 1.1s var(--ok-ease-pop) both, ok-cr7-glissa-idle 7.8s ease-in-out 1.5s infinite; }
.js .anim--critter.anim--critter-corin.is-inview    { animation: ok-cr7-corin-in .9s var(--ok-ease-pop) both, ok-cr7-corin-idle 6.8s ease-in-out 1.3s infinite; transform-origin: 50% 85%; }
.js .anim--critter.anim--critter-krabi.is-inview    { animation: ok-cr7-krabi-in .9s steps(9, end) both, ok-cr7-krabi-idle 6.5s steps(14, end) 1.6s infinite; }
.js .anim--critter.anim--critter-puffel.is-inview   { animation: ok-cr7-puffel-in .95s var(--ok-ease-pop) both, ok-cr7-puffel-idle 4.8s ease-in-out 1.1s infinite; }
.js .anim--critter.anim--critter-flap.is-inview     { animation: ok-cr7-flap-in 1.2s var(--ok-ease) both, ok-cr7-flap-idle 9s ease-in-out 1.4s infinite; }
.js .anim--critter.anim--critter-luma.is-inview     { animation: ok-cr7-luma-in 1.4s ease-out both, ok-cr7-luma-idle 6s ease-in-out 1.6s infinite; }
.js .anim--critter.anim--critter-octo.is-inview     { animation: ok-cr7-octo-in 1.05s var(--ok-ease-pop) both, ok-cr7-octo-idle 7.5s ease-in-out 1.2s infinite; transform-origin: 50% 22%; }
.js .anim--critter.anim--critter-nora.is-inview     { animation: ok-cr7-nora-in 1.2s ease-out both, ok-cr7-nora-idle 6.8s ease-in-out 1.7s infinite; }
.js .anim--critter.anim--critter-neptun.is-inview   { animation: ok-cr7-neptun-in 1.3s ease-out both, ok-cr7-neptun-idle 9s ease-in-out 1.8s infinite; }

/* --- 17b. MAGIC MAP (Journey-Karte, oktopus.js baut das Markup) --- */
.okp-map { width: min(1050px, 100%); margin: 0 auto var(--ok-sp-4); }
.okp-map-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 18px; margin-bottom: var(--ok-space-6);
}
.okp-progress-label {
  font-family: var(--ok-font-display); font-size: var(--ok-text-sm);
  font-weight: 600; letter-spacing: var(--ok-tracking-sm);
  color: var(--ok-gold); white-space: nowrap;
}
.okp-map-board { position: relative; aspect-ratio: 1000 / 420; }
@media (max-width: 640px) { .okp-map-board { aspect-ratio: 4 / 3; } }
.okp-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.okp-path-glow { fill: none; stroke: rgba(251,194,1,.16); stroke-width: 10; stroke-linecap: round; }
.okp-path-gold { fill: none; stroke: url(#okp-gold-grad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; opacity: .95; }
.okp-node {
  position: absolute; left: var(--nx); top: var(--ny);
  width: clamp(40px, 5.6vw, 62px);
  transform: translate(-50%, -56%);
  text-decoration: none;
  z-index: 1;
}
.okp-node-arch {
  display: block; position: relative; width: 100%; aspect-ratio: 20 / 24;
  border-radius: 999px 999px 10px 10px;
  border: 2px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
  overflow: hidden;
  transition: transform var(--ok-dur-fast) var(--ok-ease-pop);
}
@media (hover: hover) { .okp-node:hover .okp-node-arch { transform: translateY(-3px); } }
.okp-node.is-open .okp-node-arch {
  border-color: var(--ok-gold);
  background: radial-gradient(130% 95% at 50% 100%, rgba(251,194,1,.32), rgba(106,32,134,.30) 58%, rgba(34,20,64,.45));
  box-shadow: 0 0 16px rgba(251,194,1,.55), inset 0 0 10px rgba(251,194,1,.22);
}
.okp-node-critter {
  position: absolute; left: 50%; bottom: -4%;
  width: 88%; height: auto;
  transform: translateX(-50%) translateY(16%);
}
.okp-node-critter--wide { width: 185%; max-width: none; bottom: 2%; }
.okp-node.is-open .okp-node-critter { animation: okp-peek 5.2s ease-in-out infinite; }
@keyframes okp-peek {
  0%, 100% { transform: translateX(-50%) translateY(16%); }
  50%      { transform: translateX(-50%) translateY(5%); }
}
.okp-node-check {
  position: absolute; right: -7px; bottom: -5px; z-index: 2;
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--ok-gradient-gold);
  border: 1.5px solid var(--ok-purple-deep);
  color: var(--ok-ink);
}
.okp-node-check svg { width: 12px; height: 12px; }
.okp-node-num {
  position: absolute; top: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  font-family: var(--ok-font-display); font-size: .62rem; font-weight: 600;
  color: var(--ok-text-faint);
}
.okp-node.is-open .okp-node-num { color: var(--ok-gold); }
/* gesperrt: Nebel + Schloss-Rune */
.okp-node.is-locked .okp-node-arch {
  border-color: rgba(255,255,255,.14);
  background: rgba(18,10,40,.55);
}
.okp-node.is-locked .okp-node-arch::before {
  content: ''; position: absolute; inset: -35%;
  background: radial-gradient(62% 52% at 50% 62%, rgba(208,214,238,.30), transparent 70%);
  animation: okp-mist 7s ease-in-out infinite alternate;
}
@keyframes okp-mist {
  from { transform: translateX(-9%); opacity: .65; }
  to   { transform: translateX(9%);  opacity: 1; }
}
.okp-node-lock {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(226,220,250,.55);
}
.okp-node-lock svg { width: 42%; height: auto; }
/* naechstes Portal: pulsierender Gold-Ring als Call-to-Action */
.okp-node.is-next .okp-node-arch { border-color: var(--ok-gold-soft); }
.okp-node.is-next::before {
  content: ''; position: absolute; inset: -7px -7px -3px;
  border: 2px solid var(--ok-gold);
  border-radius: 999px 999px 13px 13px;
  animation: okp-next-pulse 1.9s ease-out infinite;
  pointer-events: none;
}
@keyframes okp-next-pulse {
  0%   { transform: scale(1); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* --- 17c. Sternenstaub-Chip --- */
.okp-dust-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .35em .95em;
  border: 1px solid rgba(251,194,1,.4);
  border-radius: 999px;
  background: rgba(251,194,1,.08);
  font-family: var(--ok-font-display); font-size: var(--ok-text-sm);
  font-weight: 600; letter-spacing: 1px; color: var(--ok-gold);
  white-space: nowrap;
}
.okp-dust-chip svg { width: 1em; height: 1em; flex: 0 0 auto; }
@media (max-width: 430px) {
  .okp-dust-chip { font-size: .72rem; letter-spacing: .5px; padding: .35em .75em; }
}
.okp-dust-chip.is-ticking { animation: okp-chip-tick .9s var(--ok-ease-pop); }
@keyframes okp-chip-tick {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.okp-dust-chip.is-ticking::after {
  content: '✦'; position: absolute; top: -4px; right: 6px;
  color: var(--ok-gold); font-size: .8em;
  animation: okp-chip-spark .9s ease-out both;
  pointer-events: none;
}
@keyframes okp-chip-spark {
  0%   { opacity: 0; transform: translateY(4px) scale(.6); }
  35%  { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-14px) scale(.7); }
}

/* --- 17d. Bubble-Pop + goldene Stern-Blase --- */
.ok-v6 .ok-bubble { pointer-events: auto; cursor: pointer; }
.ok-v6 .ok-bubble::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.ok-bubble--gold {
  background: radial-gradient(circle at 32% 30%,
              rgba(255,241,186,.95),
              rgba(251,194,1,.55) 55%,
              rgba(251,194,1,0) 78%);
  box-shadow: 0 0 12px rgba(251,194,1,.85), inset 0 0 6px rgba(255,255,255,.5);
}
.ok-bubble--gold::after {
  content: '✦'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: calc(var(--bs, 14px) * .5);
  color: #FFF3C4; line-height: 1;
}
.ok-pop-burst { position: absolute; width: 0; height: 0; pointer-events: none; }
.ok-pop-ring {
  position: absolute; left: 0; top: 0;
  width: var(--pr, 22px); height: var(--pr, 22px);
  margin: calc(var(--pr, 22px) / -2) 0 0 calc(var(--pr, 22px) / -2);
  border: 1.5px solid rgba(255,255,255,.75); border-radius: 50%;
  animation: ok-pop-ring .4s ease-out both;
}
.ok-pop-burst--gold .ok-pop-ring { border-color: var(--ok-gold); }
@keyframes ok-pop-ring {
  0%   { opacity: .9; transform: scale(.6); }
  100% { opacity: 0; transform: scale(2); }
}
.ok-pop-shard {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px;
  border-radius: 50%; background: rgba(255,255,255,.85);
  animation: ok-pop-shard .55s ease-out both;
}
.ok-pop-burst--gold .ok-pop-shard { background: var(--ok-gold); }
@keyframes ok-pop-shard {
  0%   { opacity: .95; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx, 20px), var(--sy, -20px)) scale(.35); }
}

/* ============ 13. REDUCED MOTION — HARD OFF ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .anim { opacity: 1 !important; transform: none !important; }
}