/* Runde — Website mit drei Stimmungen, gesetzt als data-mood auf <html>:
   - Locker (Standard): neutrales Design, hell oder dunkel – folgt dem System oder dem Schalter (data-theme)
   - Wild: Neon auf Nachtviolett
   - Spicy: Glut auf Fast-Schwarz
   Kontraste stehen jeweils am Token. */
:root {
  color-scheme: light;
  --bg: #F5F5F7;
  --bg-image: none;
  --surface: #FFFFFF;
  --text: #1D1D1F;
  --text-2: #6E6E73;          /* 4.66:1 auf --bg */
  --line: rgba(0, 0, 0, 0.1);
  --accent: #C2255C;          /* Fläche für Buttons */
  --on-accent: #FFFFFF;       /* 5.66:1 auf --accent */
  --accent-text: #C2255C;     /* 5.19:1 auf --bg */
  --glass: rgba(245, 245, 247, 0.72);
  --device: #1D1D1F;
  --hero-gradient: linear-gradient(100deg, #F06595, #9775FA 30%, #4DABF7 55%, #20C9B7 75%, #FF922B);
  /* Logo und Punkte um das Gerät: Ring aus sechs Farben, Mitte, Hintergrundverlauf */
  --dot-1: #F06595; --dot-2: #9775FA; --dot-3: #20C9B7; --dot-4: #FF922B; --dot-5: #FF6B6B; --dot-6: #4DABF7;
  --logo-bg-1: #3A1A5C; --logo-bg-2: #140A24; --logo-core: #FFFFFF;
  --heading-font: var(--display);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
}
/* Locker dunkel: Systemeinstellung, solange der Schalter nichts anderes sagt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0612;
    --surface: #1A1224;
    --text: #F5F5F7;
    --text-2: #A1A1A6;        /* 7.78:1 auf --bg */
    --line: rgba(255, 255, 255, 0.12);
    --accent-text: #FF6B9D;   /* 7.48:1 auf --bg */
    --glass: rgba(11, 6, 18, 0.7);
    --device: #2A2233;
  }
}
/* Locker dunkel per Schalter */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0612;
  --surface: #1A1224;
  --text: #F5F5F7;
  --text-2: #A1A1A6;
  --line: rgba(255, 255, 255, 0.12);
  --accent-text: #FF6B9D;
  --glass: rgba(11, 6, 18, 0.7);
  --device: #2A2233;
}

/* Wild: Neon. Steht nach den Hell/Dunkel-Regeln und gewinnt deshalb. */
:root[data-mood="wild"] {
  color-scheme: dark;
  --bg: #140A2E;
  --bg-image:
    radial-gradient(45% 35% at 88% 6%, rgba(255, 46, 147, .38), transparent 70%),
    radial-gradient(40% 35% at 6% 38%, rgba(61, 245, 255, .2), transparent 70%),
    radial-gradient(50% 40% at 60% 96%, rgba(198, 255, 61, .14), transparent 70%);
  --surface: #22124A;
  --text: #FFFFFF;            /* 18.87:1 */
  --text-2: #C9B8F0;          /* 10.42:1 auf --bg, 9.25:1 auf --surface */
  --line: rgba(201, 184, 240, 0.22);
  --accent: #FF2E93;
  --on-accent: #140A2E;       /* 5.45:1 – Weiß hätte nur 3.46:1 */
  --accent-text: #FF5CAD;     /* 6.64:1 auf --bg */
  --glass: rgba(20, 10, 46, 0.66);
  --device: #2B1760;
  --hero-gradient: linear-gradient(100deg, #FF2E93, #B14DFF 35%, #3DF5FF 70%, #C6FF3D);
  --dot-1: #FF2E93; --dot-2: #B14DFF; --dot-3: #3DF5FF; --dot-4: #C6FF3D; --dot-5: #FF5CAD; --dot-6: #4D7CFF;
  --logo-bg-1: #3B1D7A; --logo-bg-2: #0D0620; --logo-core: #FFFFFF;
  --heading-font: var(--round);
}

/* Spicy: Glut */
:root[data-mood="spicy"] {
  color-scheme: dark;
  --bg: #1A0807;
  --bg-image:
    radial-gradient(60% 45% at 82% 0%, rgba(255, 90, 31, .36), transparent 70%),
    radial-gradient(45% 40% at 0% 55%, rgba(255, 176, 32, .16), transparent 70%),
    radial-gradient(60% 40% at 50% 108%, rgba(180, 35, 24, .4), transparent 70%);
  --surface: #2E0F0B;
  --text: #FFF4EC;            /* 17.94:1 */
  --text-2: #E8B9A6;          /* 11.02:1 auf --bg, 10.02:1 auf --surface */
  --line: rgba(232, 185, 166, 0.2);
  --accent: #FF5A1F;
  --on-accent: #1A0807;       /* 6.23:1 – Weiß hätte nur 3.12:1 */
  --accent-text: #FF7A45;     /* 7.51:1 auf --bg */
  --glass: rgba(26, 8, 7, 0.68);
  --device: #3A130E;
  --hero-gradient: linear-gradient(100deg, #FFD43B, #FFB020 25%, #FF5A1F 60%, #E03131);
  --dot-1: #FFD43B; --dot-2: #FFB020; --dot-3: #FF7A45; --dot-4: #FF5A1F; --dot-5: #E03131; --dot-6: #FF922B;
  --logo-bg-1: #5A1610; --logo-bg-2: #120403; --logo-core: #FFF4EC;
  --heading-font: var(--round);
}

/* Stimmungswechsel weich überblenden, außer bei „Bewegung reduzieren“ */
@media (prefers-reduced-motion: no-preference) {
  .brand svg circle, .orbit i { transition: fill .5s ease, background-color .5s ease, box-shadow .5s ease; }
  body, .nav, .btn, .levels, .promises, .card, .seg button, .level-card, .theme-toggle, .steps li::before {
    transition: background-color .5s ease, color .5s ease, box-shadow .5s ease, --band .5s ease;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-image), var(--bg); color: var(--text); font: 17px/1.47 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--surface); color: var(--text); padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter); }

/* Navigation: einzige Glasfläche der Seite */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav-in { display: flex; align-items: center; gap: 24px; min-height: 52px; padding-top: env(safe-area-inset-top, 0px); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-family: var(--round); font-weight: 800; font-size: 19px; }
.brand svg { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.logo-bg-1 { stop-color: var(--logo-bg-1); }
.logo-bg-2 { stop-color: var(--logo-bg-2); }
.logo-glow { stop-color: var(--dot-1); }
.logo-core { fill: var(--logo-core); }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.theme-toggle {
  width: 44px; height: 44px; margin-right: -6px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: var(--text); cursor: pointer;
}
.theme-toggle:hover { background: var(--line); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-toggle .moon { display: none; }
.theme-toggle[aria-pressed="true"] .sun { display: none; }
.theme-toggle[aria-pressed="true"] .moon { display: block; }
.nav nav a { color: var(--text); text-decoration: none; font-size: 14px; opacity: .85; padding: 12px 0; }
.nav nav a:hover { opacity: 1; }
@media (max-width: 640px) { .nav nav { display: none; } .theme-toggle { margin-left: auto; } .nav-in { gap: 8px; } }
/* Schmale Handys: der längere Name „NochEineRunde“ braucht Platz neben Schalter und Knopf */
.theme-toggle { flex: none; }
@media (max-width: 420px) { .brand { font-size: 17px; } .btn-sm { padding: 0 12px; } .theme-toggle { width: 40px; } }
@media (max-width: 350px) { .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; font-size: 17px;
  transition: filter .2s, transform .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.98); }
.btn-sm { min-height: 34px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.btn-lg { min-height: 56px; padding: 0 32px; font-size: 19px; }
.btn-quiet { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1.5px currentColor; }

.eyebrow { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--accent-text); }
h1, h2, h3 { font-family: var(--heading-font); margin: 0; }
h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
.sub { color: var(--text-2); font-size: clamp(17px, 2vw, 21px); max-width: 640px; margin: 16px 0 0; }

/* Hero */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .hero-in { grid-template-columns: 1fr; text-align: center; } .cta { justify-content: center; } .lede { margin-inline: auto; } }
h1 { font-size: clamp(52px, 9vw, 104px); line-height: .98; letter-spacing: -0.035em; font-weight: 800; }
.ring-word { font-family: var(--round); background: var(--hero-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-contrast: more) { .ring-word { background: none; color: var(--accent-text); } }
.lede { font-size: clamp(19px, 2.2vw, 23px); color: var(--text-2); max-width: 520px; margin: 22px 0 30px; line-height: 1.4; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sub + .cta { margin-top: 32px; }

.device-stage { position: relative; display: grid; justify-items: center; padding: 30px 0; }
.device {
  position: relative; z-index: 1; width: min(372px, 86vw); aspect-ratio: 9 / 19.5;
  border-radius: 52px; padding: 11px; background: var(--device);
  box-shadow: 0 40px 80px -20px rgba(40, 10, 60, .45), inset 0 0 0 1.5px rgba(255,255,255,.08);
}
/* Die App wird immer in iPhone-Breite (350 px) gezeichnet und in den Rahmen skaliert (site.js setzt --s und
   die Höhe), damit sie auch im kleineren Gerät auf Handys ohne Scrollen und ohne Abschneiden passt. */
.device iframe {
  position: absolute; top: 11px; left: 11px; width: 350px; height: calc(100% - 22px); border: 0; display: block;
  border-radius: calc(42px / var(--s, 1)); background: var(--bg);
  transform: scale(var(--s, 1)); transform-origin: 0 0;
}

/* Signatur: der Ring aus dem App-Icon umkreist das Gerät */
.orbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; animation: spin 80s linear infinite; }
.orbit i {
  position: absolute; width: clamp(28px, 4vw, 44px); aspect-ratio: 1; border-radius: 50%; background: var(--c);
  transform: rotate(var(--a)) translateY(calc(-1 * min(300px, 62vw))) ;
  box-shadow: 0 10px 30px -6px var(--c);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } html { scroll-behavior: auto; } }

/* Abschnitte */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 900px) { .games { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .games { grid-template-columns: 1fr; } }
.game {
  background: var(--c); color: #fff; border-radius: 28px; padding: 26px; min-height: 280px;
  display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
}
.games.collapsed .game:nth-child(n+10) { display: none; }
.games-more { display: flex; justify-content: center; margin-top: 28px; }
.games-more .btn { gap: 8px; cursor: pointer; font: inherit; font-weight: 600; border: 0; }
.games-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.games-more [aria-expanded="true"] svg { transform: rotate(180deg); }
.game::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.1); }
.game h3 { font-family: var(--round); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.game p { margin: 0; font-size: 16px; line-height: 1.4; }
.game blockquote {
  margin: auto 0 0; padding: 16px 18px; border-radius: 18px; background: rgba(0,0,0,.2);
  font-family: var(--round); font-weight: 700; font-size: 18px; line-height: 1.3;
}

/* Farbbänder (Stufen, Versprechen) blenden oben und unten weich in den Seitenhintergrund über,
   statt mit einer harten Kante durch die Farbverläufe von Wild und Spicy zu schneiden.
   Verläufe selbst lassen sich nicht überblenden – deshalb läuft die Bandfarbe über die registrierte
   Eigenschaft --band, sonst springt das Band beim Stimmungswechsel sofort um, während Seite und Text noch blenden. */
@property --band { syntax: "<color>"; inherits: false; initial-value: transparent; }
.levels, .promises {
  --band: var(--surface);
  background: linear-gradient(180deg, transparent, var(--band) clamp(48px, 9vw, 120px), var(--band) calc(100% - clamp(48px, 9vw, 120px)), transparent);
}
.levels-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 800px) { .levels-in { grid-template-columns: 1fr; } }
.level-picker { display: grid; gap: 18px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(118,118,128,.16); border-radius: 14px; padding: 4px; }
.seg button {
  font: inherit; font-weight: 600; font-size: clamp(15px, 1.6vw, 18px); min-height: 48px; padding: 0 6px;
  border: 0; border-radius: 11px; background: transparent; color: var(--text-2); cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px -6px var(--accent); }
.level-card {
  background: var(--accent); color: var(--on-accent); border-radius: 24px; padding: 22px 24px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.level-card .label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.level-card p { margin: 0; font-family: var(--round); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; }
.level-note { margin: 0; color: var(--text-2); font-size: 15px; }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 24px; } }
.steps li { counter-increment: s; display: grid; gap: 8px; }
.steps li::before {
  content: counter(s); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-family: var(--round); font-weight: 800; font-size: 20px; margin-bottom: 6px;
}
.steps strong { font-size: 21px; }
.steps span { color: var(--text-2); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 800px) { .trio { grid-template-columns: 1fr; } }
.trio h3 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; font-weight: 700; }
.trio p { color: var(--text-2); margin: 8px 0 0; }
.responsible { margin: 48px 0 0; padding-top: 24px; border-top: 0.5px solid var(--line); color: var(--text-2); font-size: 15px; }

.install { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .install { grid-template-columns: 1fr; } }
.install-cards { display: grid; gap: 16px; }
.card { background: var(--surface); border-radius: 22px; padding: 24px 26px; }
.card h3 { font-size: 19px; }
.card ol { margin: 10px 0 0; padding-left: 1.2em; color: var(--text-2); }
.card b { color: var(--text); }

.faq { max-width: 760px; }
.faq h2 { margin-bottom: 24px; }
details { border-bottom: 0.5px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 600; font-size: 19px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; color: var(--accent-text); }
details[open] summary::after { content: "–"; }
details p { margin: 0 0 20px; color: var(--text-2); max-width: 640px; }

.final { padding: clamp(72px, 10vw, 140px) 0; text-align: center; }
.final h2 { font-size: clamp(44px, 8vw, 88px); letter-spacing: -0.035em; margin-bottom: 28px; }

.foot { border-top: 0.5px solid var(--line); padding: 26px 0 calc(26px + env(safe-area-inset-bottom, 0px)); color: var(--text-2); font-size: 13px; }
.foot-in { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }