/* ═══════════════════════════════════════════════════
   AnkaaOS Landing · Design-Tokens v2 (Leitstern-Iris)
   Quelle: max-leben/design/tokens.json
   ═══════════════════════════════════════════════════ */
:root {
  --acc: #7C6CF0;
  --acc-bright: #9B8DFF;
  --acc-deep: #5A4AD6;
  --acc-ink: #0D0A16;
  --bg: #08070D;
  --surface: #12101A;
  --border: rgba(255,255,255,0.09);
  --text-1: #F7F4EE;
  --text-2: #F2EFE9;
  --text-3: #A8A296;
  --text-4: #9B9589;
  --sage: #8FD6AE;
  --rose: #E58A8A;
  --radius-card: 22px;
  --radius-card-lg: 26px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Schriftwechsel 09.08.2026 (Max 03.08.: "komplett weg von jetziger Schriftart").
     IBM Plex Serif ersetzt Fraunces, IBM Plex Sans ersetzt Manrope — self-hosted in fonts/,
     weil die eigene CSP (font-src 'self') den Google-CDN ohnehin blockiert hat. */
  --font-display: 'IBM Plex Serif', Georgia, serif;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(124,108,240,0.32); }

/* ── Saubere Formen: keine Swash-/Discretionary-Ligaturen in Display-Text.
   Stammt aus der Fraunces-Zeit (WONK-Achse) und bleibt gültig — Plex Serif hat zwar keine
   Swashes, aber die Regel schadet nicht und schützt vor künftigen Schriftwechseln. ── */
h1, h2, .brand-name, .marquee-track,
.bento-title-lg, .bento-title-md, .pane-title,
.ring-label strong, .focus-time, .mini-timer-value,
.price-value, .point-n, .recovery-meta strong,
.cta-inner h2, .week-detail-title, .loop-tab-glyph {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "clig" 0, "calt" 0, "swsh" 0, "salt" 0;
}
a { color: var(--acc-bright); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--bg); box-shadow: 0 0 0 4px rgba(124,108,240,0.45); border-radius: 8px; }
.medical-inline { color: var(--text-3); font-size: 12px; line-height: 1.5; margin-top: 10px; }

/* ── Living background ─────────────────────────── */
.bg-aurora, .bg-stars, .bg-phase-wash, .bg-veil {
  position: fixed; pointer-events: none; z-index: 0;
}
.bg-aurora-1 {
  inset: -12%;
  background:
    radial-gradient(46% 40% at 24% 10%, rgba(124,108,240,0.40), transparent 70%),
    radial-gradient(42% 38% at 82% 26%, rgba(120,90,220,0.30), transparent 72%),
    radial-gradient(58% 48% at 60% 96%, rgba(60,80,190,0.26), transparent 70%);
  filter: blur(26px);
  animation: auroraDrift 36s ease-in-out infinite;
}
.bg-aurora-2 {
  inset: -20%;
  background:
    radial-gradient(36% 28% at 78% 72%, rgba(124,108,240,0.26), transparent 70%),
    radial-gradient(28% 24% at 14% 58%, rgba(150,110,255,0.20), transparent 72%);
  filter: blur(44px);
  animation: auroraDrift2 50s ease-in-out infinite;
}
.bg-stars {
  inset: 0; opacity: 0.6;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 44%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(196,188,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 62%, rgba(255,255,255,0.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 26%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 82%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 20% 72%, rgba(196,188,255,0.7) 50%, transparent 51%);
  background-size: 340px 340px;
  animation: twinkle 12s ease-in-out infinite;
}
.bg-phase-wash {
  inset: 0; opacity: 0; transition: opacity 2.5s ease, background 2.5s ease;
}
.bg-veil { inset: 0; background: linear-gradient(180deg, rgba(8,7,13,0.30), rgba(8,7,13,0.62)); }

@keyframes auroraDrift {
  0%, 100% { transform: translate3d(-4%,-2%,0) scale(1.05); }
  50% { transform: translate3d(4%,2%,0) scale(1.12); }
}
@keyframes auroraDrift2 {
  0%, 100% { transform: translate3d(3%,4%,0) scale(1.1) rotate(0deg); }
  50% { transform: translate3d(-3%,-3%,0) scale(1.18) rotate(8deg); }
}
@keyframes twinkle { 0%,100% { opacity: 0.5; } 50% { opacity: 0.85; } }
@keyframes pulseGlow { 0%,100% { opacity: 0.5; } 50% { opacity: 0.85; } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(-1.5deg); } }
@keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shimmer { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(240%); } }

.page { position: relative; z-index: 1; }

/* ── Shared ────────────────────────────────────── */
.section { max-width: 1200px; margin: 0 auto; padding: 100px 28px; }
.section-narrow { max-width: 860px; }
.section-center { text-align: center; }
.section-bordered { border-top: 1px solid rgba(255,255,255,0.06); max-width: none; background: linear-gradient(180deg, rgba(11,10,17,0.4), transparent); }
.section-bordered > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.section-sub { font-size: 16px; line-height: 1.65; color: var(--text-3); max-width: 58ch; margin-top: 16px; }
.section-sub-center { margin-left: auto; margin-right: auto; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 5.4vw, 70px); line-height: 1.02; }
h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; }
h1 em, h2 em { font-style: italic; color: var(--acc-bright); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--acc-bright); margin-bottom: 20px;
}
.eyebrow-center { justify-content: center; }
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc-bright); box-shadow: 0 0 8px var(--acc);
}
.sage { color: var(--sage); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px;
  font-weight: 800; font-size: 15px; text-decoration: none;
  padding: 14px 26px; border-radius: 999px; border: 0;
  transition: transform 0.15s ease, filter 0.15s ease, border-color 0.2s ease;
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--acc-bright), var(--acc));
  color: var(--acc-ink);
  box-shadow: 0 16px 40px -14px rgba(124,108,240,0.9);
}
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 5s 1.2s ease-in-out infinite;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-ghost {
  color: var(--text-2); border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02); font-weight: 600;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.32); }
.btn-small { padding: 9px 18px; min-height: 40px; font-size: 14px; background: linear-gradient(135deg, var(--acc-bright), var(--acc)); color: var(--acc-ink); box-shadow: 0 8px 20px -8px rgba(124,108,240,0.8); }
.btn-block { width: 100%; }

/* ── Reveal on scroll ──────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal[data-delay="1"] { transition-delay: 0.15s; }
.reveal[data-delay="2"] { transition-delay: 0.3s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Nav ───────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  background: rgba(9,8,13,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 66px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  width: 29px; height: 29px; border-radius: 9px;
  background: linear-gradient(150deg, var(--acc-bright), var(--acc));
  box-shadow: 0 6px 18px -4px rgba(124,108,240,0.6);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--acc-ink); font-size: 15px;
}
.brand-name { font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--text-1); }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; }
.nav-links a { color: var(--text-3); text-decoration: none; }
.nav-links a:hover { color: var(--text-2); }
.nav-actions { display: flex; align-items: center; gap: 14px; }

/* ── Mobil-Menue (18.08.2026, Kante nachgemessen 19.08.2026) ─────────────────
   Befund: `.nav-links { display: none }` blendete SIEBEN Links aus, ohne Ersatz.
   Es gab keinen Burger, kein Panel, nichts. Gemessen waren von neun Kopf-Links nur
   zwei erreichbar. Der Balken war also nicht nur optisch leer, er war funktional
   halbiert.
   Die Kante ist 1020px, nicht 760px: die Regel steht im Block `@media (max-width:
   1020px)` weiter unten. Hier stand zuerst "ab 760px" — headless gegengemessen war
   der Burger auch bei 900px noch der einzige Weg zu den Links. Die falsche Zahl war
   nicht bloss ein Kommentarfehler, sie war ins JS abgeschrieben worden und hat das
   Panel im Tablet-Band wieder zugeschlagen. Wer die Kante verschiebt, aendert sie
   NUR im Media-Query unten; das JS liest sie inzwischen aus dem CSS ab. */
.nav-burger {
  display: none;
  width: 44px; height: 44px;           /* Designsystem: Tippziele mindestens 44px */
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
}
.nav-burger-bar {
  width: 17px; height: 2px; border-radius: 2px;
  background: var(--text-2);
  transition: transform 0.22s var(--ease-out), opacity 0.22s var(--ease-out);
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 8px 22px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(9,8,13,0.92);
  backdrop-filter: blur(18px) saturate(1.2);
}
.nav-mobile a {
  min-height: 48px;                     /* bequem, nicht nur zulaessig */
  display: flex; align-items: center;
  color: var(--text-2); text-decoration: none;
  font-size: 16px; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:active { color: var(--acc-bright); }
.motion-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-3); font-size: 13px; font-weight: 700;
}
.motion-toggle:hover { color: var(--text-2); border-color: rgba(255,255,255,0.28); }
.motion-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 8px rgba(143,214,174,0.8); transition: background 0.2s ease, box-shadow 0.2s ease; }
.motion-toggle[aria-pressed="true"] .motion-dot { background: var(--text-4); box-shadow: none; }

/* ── Hero ──────────────────────────────────────── */
.hero {
  max-width: 1200px; margin: 0 auto;
  min-height: calc(100vh - 66px);
  padding: 48px 28px 72px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center;
}
.eyebrow#phaseChip {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(124,108,240,0.3);
  background: rgba(124,108,240,0.1);
  letter-spacing: 0.18em;
}
.hero-sub { font-size: 18px; line-height: 1.62; color: var(--text-3); max-width: 46ch; margin: 24px 0 34px; }
.hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-micro { margin-top: 28px; font-size: 13px; color: var(--text-4); }

.hero-visual { position: relative; display: flex; justify-content: center; }
.phone-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,108,240,0.24) 0%, transparent 64%);
  animation: pulseGlow 7s ease-in-out infinite;
}
.phone {
  position: relative; width: 392px; max-width: 92vw; border-radius: 56px; padding: 11px;
  background: linear-gradient(160deg, #26242f, #0f0e14);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 50px 90px -24px rgba(0,0,0,0.85);
  animation: floaty 9s ease-in-out infinite;
}
.phone::after {
  content: ""; position: absolute; top: 23px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: 15px; z-index: 3;
  background: #040309; border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}
.phone-screen {
  position: relative; border-radius: 45px; overflow: hidden;
  aspect-ratio: 390 / 844; background: #0b0a11;
  border: 1px solid rgba(255,255,255,0.05);
}
.phone-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.15s ease;
}
.phone-shot.is-active { opacity: 1; }
.ring { width: 100%; display: block; transform: rotate(-90deg); }
.ring-track, .ring-fill { fill: none; stroke-width: 9; }
.ring-track { stroke: rgba(255,255,255,0.07); }
.ring-fill {
  stroke: url(#ringGrad); stroke-linecap: round;
  stroke-dasharray: 364.4; stroke-dashoffset: 364.4;
  transition: stroke-dashoffset 1.1s var(--ease-out);
  filter: drop-shadow(0 0 6px rgba(124,108,240,0.55));
}
.ring-fill-sage { stroke: var(--sage); filter: drop-shadow(0 0 6px rgba(143,214,174,0.5)); }
.ring-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.ring-label strong { font-family: var(--font-display); font-size: 34px; font-weight: 500; color: var(--text-1); line-height: 1; }
.ring-label span { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); margin-top: 4px; }
.float-chip {
  position: absolute; z-index: 2;
  background: rgba(16,14,22,0.86); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 17px; padding: 12px 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
}
.float-chip-1 { top: 11%; right: -26px; animation: chipFloat 7s ease-in-out infinite; }
.float-chip-2 { bottom: 10%; left: -96px; animation: chipFloat 8s 1.2s ease-in-out infinite; }
.float-chip-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); }
.float-chip-eyebrow.accent { color: var(--acc-bright); }
.float-chip-value { font-size: 22px; font-weight: 800; }
.float-chip-value small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.float-chip-text { font-size: 14px; font-weight: 700; color: var(--text-2); }

/* ── Marquee ───────────────────────────────────── */
.marquee {
  border-block: 1px solid rgba(255,255,255,0.06); overflow: hidden; padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 52px; width: max-content;
  animation: marquee 34s linear infinite;
  font-family: var(--font-display); font-size: 17px; color: var(--text-4); white-space: nowrap;
}
.marquee-track i { color: rgba(124,108,240,0.7); font-style: normal; }

/* ── Loop (Der Tag) ────────────────────────────── */
.loop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; align-items: stretch; }
.loop-tabs { display: flex; flex-direction: column; gap: 12px; }
.loop-tab {
  position: relative; text-align: left;
  display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto auto;
  column-gap: 14px; padding: 16px 18px;
  background: rgba(18,16,26,0.55); border: 1px solid var(--border); border-radius: 18px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-out);
}
.loop-tab:hover { border-color: rgba(124,108,240,0.35); }
.loop-tab.is-active {
  background: linear-gradient(160deg, rgba(28,25,42,0.8), rgba(15,13,22,0.8));
  border-color: rgba(124,108,240,0.55);
  box-shadow: 0 14px 34px -14px rgba(124,108,240,0.35);
  transform: translateX(6px);
}
.loop-tab-glyph {
  grid-row: 1 / 4; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; color: var(--acc-bright);
  background: radial-gradient(circle at 35% 30%, rgba(124,108,240,0.3), #0c0b12);
  border: 1px solid rgba(124,108,240,0.5);
  box-shadow: 0 0 24px -6px rgba(124,108,240,0.7);
}
.loop-tab-time { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.loop-tab-title { font-size: 16px; font-weight: 700; color: var(--text-2); margin-top: 2px; }
.loop-tab-text { font-size: 13px; line-height: 1.5; color: var(--text-3); margin-top: 3px; }

.loop-preview {
  position: relative; overflow: hidden;
  border-radius: var(--radius-card-lg); border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(28,25,42,0.66), rgba(15,13,22,0.66));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 30px; min-height: 420px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.loop-pane { width: 100%; animation: paneIn 0.5s var(--ease-out); }
@keyframes paneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.pane-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc-bright); margin-bottom: 10px; }
.pane-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--text-1); margin-bottom: 18px; }
.pane-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 15px 17px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 13px;
}
.pane-card-glyph { color: var(--acc-bright); font-size: 17px; width: 22px; text-align: center; }
.pane-card-title { font-size: 14px; font-weight: 700; color: var(--text-2); }
.pane-card-sub { font-size: 12px; color: var(--text-4); }
.pane-card-chip { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--acc-bright); background: rgba(124,108,240,0.14); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pane-card-chip.sage-chip { color: var(--sage); background: rgba(143,214,174,0.12); }
.pane-list { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 20px; }
.pane-row {
  min-height: 60px; display: flex; align-items: center; gap: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pane-row > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }

.sleep-bars { display: flex; align-items: flex-end; gap: 7px; height: 90px; margin: 8px 0 16px; }
.sleep-bar {
  flex: 1; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--acc-bright), var(--acc-deep));
  opacity: 0.85; transform-origin: bottom;
  animation: barGrow 0.9s var(--ease-out) both;
}
.sleep-bar.deep { background: linear-gradient(180deg, #5A4AD6, #2d2560); }
.sleep-bar.rem { background: linear-gradient(180deg, #b9aaff, #7C6CF0); }
.sleep-bar.awake { background: rgba(255,255,255,0.14); }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sleep-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.sleep-legend b { color: var(--text-2); font-weight: 700; }

.focus-ring-wrap { display: flex; align-items: center; gap: 22px; }
.focus-ring-wrap .ring { width: 112px; flex: 0 0 112px; }
.focus-time { font-family: var(--font-display); font-size: 40px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.focus-label { font-size: 12px; color: var(--text-4); margin-top: 2px; }

/* ── Bento ─────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 92px; gap: 16px; margin-top: 56px; }
.bento-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(22,20,30,0.62), rgba(13,12,19,0.62));
  border: 1px solid var(--border); border-radius: var(--radius-card-lg);
  padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.bento-card p { font-size: 14px; line-height: 1.55; color: var(--text-3); margin-top: 10px; }
.bento-week { grid-area: 1 / 1 / 7 / 8; padding: 32px 34px; justify-content: flex-start; }
.bento-back { grid-area: 1 / 8 / 4 / 13; }
.bento-water { grid-area: 4 / 8 / 7 / 13; }
.bento-coach { grid-area: 7 / 8 / 11 / 13; justify-content: flex-start; }
.bento-gym { grid-area: 7 / 1 / 11 / 5; }
.bento-finance { grid-area: 7 / 5 / 11 / 8; }
.bento-content { position: relative; }
.bento-head { display: flex; align-items: center; gap: 12px; }
.bento-head h3 { font-size: 18px; font-weight: 700; color: var(--text-2); }
.bento-title-lg { font-family: var(--font-display); font-weight: 500; font-size: 27px; color: var(--text-1); }
.bento-title-md { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--text-1); }
.bento-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: rgba(124,108,240,0.16); border: 1px solid rgba(124,108,240,0.3);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--acc-bright); font-size: 17px;
}
.bento-icon-fill {
  background: linear-gradient(150deg, var(--acc-bright), var(--acc));
  color: var(--acc-ink); border: 0;
  box-shadow: 0 8px 22px -6px rgba(124,108,240,0.7);
}
.mini-cta {
  margin-top: 16px; align-self: flex-start;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(124,108,240,0.4); background: rgba(124,108,240,0.12);
  color: var(--acc-bright); font-weight: 800; font-size: 13px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mini-cta:hover { background: rgba(124,108,240,0.22); transform: translateY(-1px); }
.mini-timer { margin-top: 14px; display: flex; align-items: baseline; gap: 12px; }
.mini-timer[hidden] { display: none; }
.mini-timer-value { font-family: var(--font-display); font-size: 34px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.mini-timer-label { font-size: 12px; color: var(--text-4); }

.today-chip {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acc-ink); background: linear-gradient(135deg, var(--acc-bright), var(--acc));
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(124,108,240,0.8);
}
.week-viz { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; margin-top: 24px; }
.week-day {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 6px 9px; border-radius: 14px;
  background: rgba(255,255,255,0.02); border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}
.week-day:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); transform: translateY(-2px); }
.week-day.is-selected {
  background: rgba(124,108,240,0.1); border-color: rgba(124,108,240,0.55);
  box-shadow: 0 12px 26px -14px rgba(124,108,240,0.6);
}
.week-day-blocks { height: 132px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.week-day-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); }
.week-day.is-today .week-day-label { color: var(--acc-bright); }
.week-block {
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  animation: paneIn 0.6s var(--ease-out) both;
}
.week-block.morgen { background: rgba(255,176,112,0.16); border-color: rgba(255,176,112,0.22); }
.week-block.tag { background: rgba(124,108,240,0.18); border-color: rgba(124,108,240,0.3); }
.week-block.abend { background: rgba(180,120,255,0.16); border-color: rgba(180,120,255,0.24); }
.week-detail { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.07); min-height: 132px; }
.week-detail-title { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--text-1); margin-bottom: 12px; }
.week-detail-title span { color: var(--acc-bright); }
.week-detail-list { display: flex; flex-direction: column; gap: 8px; }
.week-detail-item {
  display: flex; align-items: center; gap: 11px;
  font-size: 13px; color: var(--text-3);
  animation: paneIn 0.45s var(--ease-out) both;
}
.week-detail-item b { color: var(--text-2); font-weight: 700; }
.week-detail-glyph {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.week-detail-glyph.morgen { color: #FFB070; background: rgba(255,176,112,0.12); }
.week-detail-glyph.tag { color: var(--acc-bright); background: rgba(124,108,240,0.14); }
.week-detail-glyph.abend { color: #C99BFF; background: rgba(180,120,255,0.13); }
.week-detail-chip { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--text-4); white-space: nowrap; }

.water { display: flex; gap: 9px; margin-top: 18px; }
.water-glass {
  width: 34px; height: 44px; border-radius: 7px 7px 11px 11px;
  border: 1.5px solid rgba(255,255,255,0.18); background: transparent;
  position: relative; overflow: hidden; transition: border-color 0.2s ease, transform 0.15s ease;
  padding: 0;
}
.water-glass:hover { transform: translateY(-2px); border-color: rgba(124,108,240,0.6); }
.water-glass::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 0%;
  background: linear-gradient(180deg, var(--acc-bright), var(--acc));
  transition: height 0.4s var(--ease-out);
}
.water-glass.is-full { border-color: rgba(124,108,240,0.7); }
.water-glass.is-full::after { height: 100%; }
.water-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 16px; overflow: hidden; }
.water-bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--acc-deep), var(--acc-bright)); transition: width 0.5s var(--ease-out); }
.water-label { font-size: 12px; color: var(--text-4); margin-top: 8px; }

.coach-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.coach-meta-item {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.bento-coach .chat { margin-top: 22px; }
.chat { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.chat-bubble { max-width: 84%; padding: 11px 16px; animation: paneIn 0.5s var(--ease-out); }
.chat-user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(124,108,240,0.3), rgba(124,108,240,0.14));
  border: 1px solid rgba(124,108,240,0.34); color: var(--text-2);
  border-radius: 17px 17px 4px 17px;
}
.chat-coach {
  align-self: flex-start;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #D7D2C8; border-radius: 17px 17px 17px 4px;
}
.chat-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 12px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 17px 17px 17px 4px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: typingDot 1.2s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.spark { width: 100%; margin-top: 16px; }
.spark-area { fill: url(#sparkFill); }
.spark-line { fill: none; stroke: var(--acc-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.is-visible .spark-line, .bento-card.is-visible .spark-line { animation: drawLine 1.6s var(--ease-out) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.spark-label { font-size: 12px; color: var(--text-4); margin-top: 10px; }
.spark-label strong { font-weight: 800; }

/* ── Recovery ──────────────────────────────────── */
.section-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.recovery-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.recovery-glow {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%);
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143,214,174,0.16), transparent 62%);
  animation: pulseGlow 8s ease-in-out infinite; pointer-events: none;
}
.recovery-ring-wrap { position: relative; width: 230px; }
.recovery-meta { display: flex; gap: 26px; }
.recovery-meta div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.recovery-meta span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.recovery-meta strong { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--text-1); }
.points { margin-top: 34px; }
.point { display: flex; gap: 16px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,0.08); align-items: baseline; }
.point-n { font-family: var(--font-display); font-size: 15px; color: var(--acc-bright); min-width: 28px; }
.point-title { font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 3px; }
.point-text { font-size: 14px; line-height: 1.55; color: var(--text-3); }

/* ── Plattformen ───────────────────────────────── */
.platforms { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 56px; }
.platform {
  min-width: 138px; flex: 1; max-width: 168px; padding: 26px 16px;
  background: linear-gradient(160deg, rgba(22,20,30,0.6), rgba(13,12,19,0.6));
  border: 1px solid var(--border); border-radius: 20px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.platform:hover { transform: translateY(-4px); border-color: rgba(124,108,240,0.4); }
.platform-glyph { color: var(--acc-bright); margin-bottom: 12px; }
.platform-glyph svg { width: 30px; height: 30px; display: block; }
.platform-name { font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.platform-tech { font-size: 12px; color: var(--text-4); }
.platform-note { font-size: 15px; line-height: 1.65; color: var(--text-3); max-width: 62ch; margin: 30px auto 0; }

/* ── Preise ────────────────────────────────────── */
.billing-toggle { display: inline-flex; gap: 6px; margin-top: 26px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.billing-btn {
  min-height: 40px; padding: 8px 18px; border-radius: 999px; border: 0;
  background: transparent; color: var(--text-3); font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.billing-btn.is-active { background: linear-gradient(135deg, var(--acc-bright), var(--acc)); color: var(--acc-ink); }
.billing-save { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; background: rgba(13,10,22,0.28); }
.billing-btn:not(.is-active) .billing-save { background: rgba(143,214,174,0.14); color: var(--sage); }
.founder {
  margin-top: 44px; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 20px;
  border-radius: var(--radius-card-lg);
  background: linear-gradient(120deg, rgba(124,108,240,0.16), rgba(124,108,240,0.04) 55%, rgba(143,214,174,0.05));
  border: 1px solid rgba(124,108,240,0.42);
  box-shadow: 0 26px 60px -26px rgba(124,108,240,0.45);
}
.founder-top { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.founder-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc-bright); }
.founder-text { flex: 1; min-width: 260px; }
.founder-title { margin-top: 6px; font-size: 17px; font-weight: 800; color: var(--text-1); }
.founder-sub { font-size: 13px; line-height: 1.55; color: var(--text-3); margin-top: 4px; max-width: 480px; }
.founder-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.founder-tier {
  padding: 16px 17px; border-radius: 17px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(8,7,13,0.52);
}
.founder-tier-best { border-color: rgba(143,214,174,0.42); background: rgba(143,214,174,0.05); }
.founder-tier-range { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-bright); }
.founder-tier-best .founder-tier-range { color: var(--sage); }
.founder-tier-main { margin-top: 7px; font-size: 14.5px; font-weight: 750; line-height: 1.35; color: var(--text-1); }
.founder-tier-main strong { color: var(--acc-bright); }
.founder-tier-best .founder-tier-main strong { color: var(--sage); }
.founder-tier-sub { margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--text-4); }
.price-note-inline {
  margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--sage);
  padding: 8px 12px; border-radius: 10px;
  background: rgba(143,214,174,0.08); border: 1px solid rgba(143,214,174,0.22);
}
.pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(22,20,30,0.62), rgba(13,12,19,0.62));
  border: 1px solid var(--border); border-radius: var(--radius-card-lg);
  padding: 28px 26px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.price-card:hover { transform: translateY(-4px); border-color: rgba(124,108,240,0.35); }
.price-card-hl { border-color: rgba(124,108,240,0.55); box-shadow: 0 22px 54px -20px rgba(124,108,240,0.45); }
.price-badge {
  position: absolute; top: -12px; right: 20px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acc-ink); background: linear-gradient(135deg, var(--acc-bright), var(--acc));
  padding: 5px 12px; border-radius: 999px; box-shadow: 0 8px 20px -6px rgba(124,108,240,0.8);
}
.price-name { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc-bright); }
.price-value { font-family: var(--font-display); font-size: 40px; font-weight: 500; color: var(--text-1); margin-top: 10px; }
.price-period { font-size: 12px; color: var(--text-4); margin-top: 2px; }
.price-desc { font-size: 14px; color: var(--text-3); margin-top: 14px; }
.price-card ul { list-style: none; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.price-card li { font-size: 13.5px; color: var(--text-2); padding-left: 22px; position: relative; }
.price-card li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--acc-bright); font-size: 11px; }
.pricing-note { text-align: center; font-size: 13px; color: var(--text-4); margin-top: 30px; }

/* ── FAQ ───────────────────────────────────────── */
.faq { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: rgba(18,16,26,0.55); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
  transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: rgba(124,108,240,0.4); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 18px 22px;
  font-size: 15px; font-weight: 700; color: var(--text-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--text-1); }
.faq-icon { color: var(--acc-bright); font-size: 20px; font-weight: 400; transition: transform 0.3s var(--ease-out); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; font-size: 14px; line-height: 1.65; color: var(--text-3); max-width: 62ch; }

/* ── CTA / Warteliste ──────────────────────────── */
.cta { position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.06); }
.cta-glow {
  position: absolute; left: 50%; bottom: -220px; transform: translateX(-50%);
  width: 760px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(124,108,240,0.26), transparent 68%);
  animation: pulseGlow 9s ease-in-out infinite; pointer-events: none;
}
.cta-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 110px 28px 120px; text-align: center; }
.cta-inner p { font-size: 16px; line-height: 1.6; color: var(--text-3); margin: 22px 0 36px; }
.cta-inner h2 em { font-style: normal; }
.waitlist { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.waitlist input {
  min-height: 52px; width: min(320px, 100%);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 0 22px;
  color: var(--text-1); font-family: inherit; font-size: 15px;
  transition: border-color 0.2s ease;
}
.waitlist input::placeholder { color: var(--text-4); }
.waitlist input:focus { outline: none; border-color: rgba(124,108,240,0.6); box-shadow: 0 0 0 4px rgba(124,108,240,0.18); }
.waitlist :disabled { cursor: wait; opacity: 0.62; }
.waitlist-success {
  margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--sage);
  animation: paneIn 0.6s var(--ease-out);
}
.waitlist-success.is-error { color: #e0917c; }
.cta-note { margin-top: 26px !important; font-size: 12px !important; color: var(--text-4) !important; }

/* ── Footer ────────────────────────────────────── */
.footer { border-top: 1px solid rgba(255,255,255,0.06); }
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 40px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.footer .brand-name { font-size: 19px; }
.footer-links { display: flex; gap: 24px; font-size: 13px; font-weight: 600; }
.footer-links a { color: var(--text-4); text-decoration: none; }
.footer-links a:hover { color: var(--text-3); }
.footer-note { font-size: 13px; color: var(--text-4); }

/* ── Motion gates ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important; transition-duration: 0.01ms !important;
}
html[data-motion="off"] .reveal { opacity: 1; transform: none; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 64px; gap: 64px; }
  .hero-copy { text-align: center; }
  .hero-sub, .hero-ctas { margin-left: auto; margin-right: auto; justify-content: center; }
  .loop-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; }
  .bento-week, .bento-back, .bento-water, .bento-coach, .bento-gym, .bento-finance {
    grid-area: auto; grid-column: span 6; grid-row: auto;
  }
  .bento-coach { justify-content: center; }
  .section-split { grid-template-columns: 1fr; gap: 48px; }
  .pricing { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-mobile[data-offen="true"] { display: flex; }
  /* Der Kopf-Knopf war 40px hoch und verletzte damit die eigene 44px-Regel. */
  .nav .btn-small { min-height: 44px; padding-block: 11px; }

  /* Im selben Messlauf (19.08.2026, headless bei 390px) fielen zwei weitere Stellen
     durch dieselbe 44px-Regel, die dieser Block gerade erst durchsetzt:
     die Abrechnungs-Umschalter mit 40px und die sechs Fusszeilen-Links mit 21px.
     Bei den Fusszeilen-Links ist die Zeile selbst nur 21px hoch — die Flaeche waechst
     ueber Innenabstand, nicht ueber Schriftgroesse, damit das Layout gleich bleibt.
     Der negative Aussenabstand haelt den Zeilenumbruch dort, wo er vorher war. */
  .billing-btn { min-height: 44px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
}
@media (max-width: 640px) {
  .hero-visual { width: 100%; min-width: 0; overflow: clip; }
  .phone { max-width: 100%; animation-name: chipFloat; }
  .section { padding: 72px 20px; }
  .pricing { grid-template-columns: 1fr; }
  .founder-tiers { grid-template-columns: 1fr; }
  .founder-top { flex-direction: column; align-items: flex-start; }
  .week-detail-chip { display: none; }
  .week-viz { grid-template-columns: repeat(7, minmax(42px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 3px; }
  .week-day { padding-inline: 4px; }
  .week-day-blocks { height: 104px; }
  .loop-preview { min-height: 0; padding: 24px 20px; }
  .pane-card-chip { display: none; }
  .focus-ring-wrap { gap: 14px; }
  .focus-ring-wrap .ring { width: 86px; flex-basis: 86px; }
  .focus-time { font-size: 32px; }
  .float-chip { display: none; }
  .recovery-meta { gap: 18px; }
  .loop-tab.is-active { transform: none; }
  /* Der Schalter bleibt auf dem Handy SICHTBAR (30.08.2026).
     Hier stand bis heute `display: none`. Gemessen bei 390x844: 41 laufende Animationen
     und kein Weg, sie anzuhalten - der einzige verbliebene Ausweg war die
     Systemeinstellung des Geraets. Das ist WCAG 2.2.2 (Pause, Stop, Hide) und faellt
     damit unter das BFSG, also unter "rechtlich wasserfest", nicht unter Geschmack.
     Er wird nur kleiner, nicht unsichtbar; die Trefferflaeche bleibt bei 44 Punkt. */
  .motion-toggle { padding: 8px 12px; font-size: 12px; min-height: 44px; }
  .motion-toggle .motion-label { display: none; }
  .footer-inner { align-items: flex-start; }
  .footer-links {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px 18px;
  }
  .footer-note { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sektionen aus dem Claude-Design "Ankaa Landing.dc.html" (09.08.2026)
   Ring · Haltung · Screens. Nutzt die bestehenden Tokens oben — kein zweites
   Farb-/Radius-System. Iris bleibt der einzige Akzent.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tagesziel-Ring ──
   Der statische Ring ist die Grundausstattung: er steht sofort, braucht kein JS und
   bleibt auf Mobil dauerhaft. Ab 820px ersetzt ihn nach Idle das WebGL-Element
   (<ankaa-ring>), damit three.js nie auf dem kritischen Pfad liegt. */
.ring3d-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* width:100% ist Pflicht, nicht Kosmetik: sobald der statische Ring durch das absolut
     positionierte <ankaa-ring> ersetzt wird, hat der Wrapper kein Kind mehr im Fluss und
     kollabiert sonst auf Breite 0 — der Ring wäre unsichtbar (gemessen 09.08.). */
  width: 100%;
  min-height: 460px;
}
.ring3d-wrap-lg { min-height: 520px; }
/* Der Ring fuellt sich auch auf dem Handy.
   ANLASS (Max 30.08.2026): "diese bewegenden kreiselemente die am laptop gut funktionieren
   sind in der app ansicht statisch also verwirrt das mit dem text". Er hat recht, und die
   Ursache stand schon im Kommentar am Seitenende: three.js wird bewusst erst ab 820px
   geladen, damit ein Handy keine 356 KB fuer eine Verzierung herunterlaedt. Diese
   Entscheidung bleibt richtig.
   Falsch war nur, dass die Copy daneben Bewegung VERSPRICHT: die Ueberschrift heisst
   "Ein Ring, der sich fuellt" und der erste Punkt "Er fuellt sich beim Tun". Wer das auf
   dem Handy liest, sieht einen Ring, der nichts tut.
   Loesung ohne ein einziges Kilobyte: Der Fuellstand wird als registrierte Eigenschaft
   gefuehrt und einmal von 0 auf seinen Zielwert animiert. Kein Skript, kein Abruf, keine
   Auswirkung auf die Ladezeit. Faellt der Browser auf die alte Syntax zurueck oder ist
   Bewegung abgeschaltet, steht der Ring wie bisher auf dem Zielwert - nie leer. */
@property --ring-fuellung {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 68%;
}

.ring3d-static {
  position: relative;
  width: min(400px, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  --ring-fuellung: 68%;
  background: conic-gradient(from 0deg, var(--acc) 0 var(--ring-fuellung), #1B1927 var(--ring-fuellung) 100%);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%);
  mask: radial-gradient(circle, transparent 57%, #000 58%);
  filter: drop-shadow(0 0 40px color-mix(in oklab, var(--acc) 34%, transparent));
}

@media (prefers-reduced-motion: no-preference) {
  .ring3d-static { animation: ring-fuellt-sich 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
}

/* Der App-eigene Schalter schlaegt die Systemeinstellung, wie ueberall sonst auf der Seite. */
html[data-motion="off"] .ring3d-static { animation: none; --ring-fuellung: 68%; }

@keyframes ring-fuellt-sich {
  from { --ring-fuellung: 0%; }
  to   { --ring-fuellung: 68%; }
}
.ring3d-stern {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 58px; line-height: 1; color: var(--text-1);
  text-shadow: 0 0 34px var(--acc-bright);
  pointer-events: none;
}
/* !important ist hier nötig, nicht Bequemlichkeit: ankaa-ring.js setzt in connectedCallback
   INLINE `this.style.position = 'relative'`. Inline schlägt Stylesheet — ohne !important sitzt
   das Element relativ im Fluss, wird nur halb so hoch wie sein Container und rutscht nach unten
   (gemessen: 261px statt 460px, 100px Versatz). Die Komponente kommt unverändert aus dem
   Design-Projekt, deshalb wird sie hier überstimmt statt gepatcht. */
.ring3d-wrap ankaa-ring {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ring3d-note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--text-4); }

/* ── Haltung: was Ankaa nicht tut ── */
.haltung-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 46px;
}
.haltung-card {
  position: relative; overflow: hidden;
  grid-column: span 5;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(160deg, rgba(22,20,30,0.62), rgba(13,12,19,0.62));
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  padding: 30px;
  backdrop-filter: blur(14px);
}
.haltung-card-lg {
  grid-column: span 7;
  background: linear-gradient(160deg, rgba(24,21,34,0.7), rgba(13,12,19,0.7));
  padding: 34px;
}
.haltung-n {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 15px;
}
.haltung-title { font-size: 21px; font-weight: 700; color: var(--text-2); margin-bottom: 12px; line-height: 1.24; }
.haltung-title-lg {
  font-family: var(--font-display); font-weight: 500;
  font-size: 30px; line-height: 1.12; color: var(--text-1); margin-bottom: 14px;
}
.haltung-text { font-size: 15.5px; line-height: 1.62; color: var(--text-3); max-width: 46ch; }
.haltung-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.haltung-chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border-radius: 13px; border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  font-size: 13px; font-weight: 600; color: var(--text-3);
}

/* ── Die App: drei Screens ── */
.screens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; align-items: start; margin-top: 50px; }
.screen-item { margin: 0; }
.screen-item-offset { padding-top: 34px; }
.screen-phone {
  position: relative; border-radius: 40px; padding: 9px;
  background: linear-gradient(160deg, #26242F, #0F0E14);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 44px 84px -30px rgba(0,0,0,0.85);
}
.screen-phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
.screen-name { margin-top: 22px; font-size: 15.5px; font-weight: 700; color: var(--text-2); }
.screen-text { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-3); }

@media (prefers-reduced-motion: no-preference) {
  .screen-item .screen-phone { animation: screenFloat 10s ease-in-out infinite; }
  .screen-item-offset .screen-phone { animation-duration: 11s; animation-delay: 1.4s; }
  .screen-item:last-child .screen-phone { animation-duration: 12s; animation-delay: 0.7s; }
  @keyframes screenFloat {
    0%, 100% { transform: translateY(0) rotate(-1.4deg); }
    50% { transform: translateY(-13px) rotate(-1.4deg); }
  }
}
[data-motion="off"] .screen-phone { animation: none !important; }

@media (max-width: 980px) {
  .haltung-card, .haltung-card-lg { grid-column: span 12; }
  .screens-grid { grid-template-columns: 1fr; gap: 40px; }
  .screen-item-offset { padding-top: 0; }
  .screen-item { max-width: 340px; margin-inline: auto; }
  .ring3d-wrap, .ring3d-wrap-lg { min-height: 380px; }
  .ring3d-stern { font-size: 46px; }
}

/* ── Trefferflaechen-Erweiterung auf 44px (WCAG 2.2 SC 2.5.8 / Brief 021) ── */
.btn-small,
.motion-toggle,
.billing-btn {
  position: relative;
}

.btn-small::after,
.motion-toggle::after,
.billing-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}



/* Icons sind seit dem 30.08.2026 Inline-SVG statt Schriftzeichen (☀ ✚ ◔ ◍ ◷ ↘ ☾ ◐ ✦).
   Grund: Die Zeichen kamen aus der jeweiligen Systemschrift und sahen auf jedem Geraet
   anders aus - auf dem Handy wie hingeworfene Symbole. Max hat sie als "Emojis" gemeldet;
   echte Emoji waren es nie, gemessen null Stueck in der sichtbaren Copy. SVG faerbt sich
   ueber currentColor mit und braucht keinen zusaetzlichen Abruf. */
.bento-icon svg, .loop-tab-glyph svg { display: block; }
.loop-tab-glyph { display: inline-flex; align-items: center; justify-content: center; }


/* Nur fuer Screenreader. Gebraucht seit dem 30.08.2026 fuer die Vergleichstabelle:
   dort war das Haekchen der GESAMTE Zellinhalt, waehrend die Nachbarzellen "nein" und
   "teils" ausschreiben. Assistive Technik las an den Ja-Stellen nichts oder "Haekchen",
   der Produktvergleich war damit fuer sie nicht auswertbar. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}