/* =========================================================
   RESET Landingpage
   Kommentare auf Deutsch, Marketingtexte auf Englisch.
   Farben zentral als CSS-Variablen definiert.
   ========================================================= */

:root {
  --color-bg: #07090d;
  --color-bg-soft: #10131a;
  --color-surface: #141821;
  --color-light: #f3f4ef;
  --color-white: #ffffff;
  --color-text: #111319;
  --color-text-light: #f7f8fb;
  --color-muted: #6c7280;
  --color-muted-light: #aab1bd;
  --color-line: rgba(17, 19, 25, 0.13);
  --color-line-dark: rgba(255, 255, 255, 0.12);
  --color-accent: #c8ff38;
  --color-accent-dark: #97c512;
  --color-watermelon: #ff4f6d;
  --color-watermelon-soft: #ff9aaa;
  --color-watermelon-green: #bff36a;
  --color-ice: #b7eeff;
  --color-berry: #744dff;
  --color-berry-soft: #ae8cff;
  --color-blue: #35a7ff;

  --font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1180px;
  --radius-small: 14px;
  --radius-medium: 24px;
  --radius-large: 36px;
  --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.14);
  --transition: 220ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }
img, svg { max-width: 100%; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  padding: 10px 14px;
  color: #000;
  background: var(--color-accent);
  border-radius: 999px;
  transform: translateY(-180%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(calc(100% - 36px), var(--container));
  margin: 0 auto;
}

.section { padding: 96px 0; }
.section-shell { position: relative; overflow: hidden; }
.section-light { background: var(--color-light); }
.section-dark { color: var(--color-text-light); background: var(--color-bg); }

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  color: var(--color-white);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
}
.brand-mark {
  width: 18px;
  height: 18px;
  display: inline-block;
  border: 5px solid currentColor;
  border-right-color: var(--color-accent);
  border-radius: 50%;
  transform: rotate(-35deg);
}
.desktop-nav { display: none; gap: 30px; }
.desktop-nav a { color: var(--color-muted-light); font-size: 0.9rem; transition: color var(--transition); }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--color-white); }

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 750;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-link:focus-visible, summary:focus-visible, input:focus-visible, .flavor-card:focus-visible, .radio-choice:focus-within {
  outline: 3px solid rgba(200, 255, 56, 0.55);
  outline-offset: 3px;
}
.button-small { min-height: 42px; padding: 0 16px; font-size: 0.86rem; }
.button-primary { color: #0a0c0f; background: var(--color-accent); }
.button-primary:hover { background: #d5ff67; }
.button-ghost { color: var(--color-white); border-color: var(--color-line-dark); background: rgba(255,255,255,0.04); }
.button-ghost-dark { color: var(--color-text); border-color: var(--color-line); background: transparent; }
.button-full { width: 100%; }

.hero {
  min-height: 850px;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background:
    radial-gradient(circle at 70% 30%, rgba(53, 167, 255, 0.12), transparent 34%),
    linear-gradient(145deg, #07090d 0%, #0a0d13 52%, #101722 100%);
}
.hero-grid { display: grid; padding-top: 120px; padding-bottom: 70px; gap: 54px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-muted-light);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.status-dot { width: 7px; height: 7px; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 0 5px rgba(200,255,56,0.12); }
.hero h1 {
  max-width: 780px;
  margin: 22px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(3.55rem, 14vw, 7.8rem);
  line-height: 0.86;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}
.hero h1 span { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.82); }
.hero-subtitle { max-width: 560px; margin: 0 0 12px; font-size: clamp(1.2rem, 3vw, 1.75rem); line-height: 1.25; }
.hero-description { max-width: 570px; margin: 0; color: var(--color-muted-light); font-size: 1rem; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 34px; }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--color-white); font-weight: 700; }
.text-link span { transition: transform var(--transition); }
.text-link:hover span { transform: translateY(4px); }
.text-link-dark { color: var(--color-text); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.hero-notes span { padding: 8px 11px; color: var(--color-muted-light); border: 1px solid var(--color-line-dark); border-radius: 999px; font-size: 0.76rem; }

.hero-visual { position: relative; z-index: 1; }
.product-stage {
  position: relative;
  min-height: 450px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.product-stage::before {
  content: "";
  position: absolute;
  width: min(90vw, 450px);
  aspect-ratio: 1;
  z-index: -2;
  background: radial-gradient(circle, rgba(255,79,109,0.24), rgba(53,167,255,0.09) 42%, transparent 70%);
  filter: blur(4px);
}
.product-stick {
  position: relative;
  width: 126px;
  height: 390px;
  transform: rotate(15deg);
  filter: drop-shadow(0 32px 35px rgba(0,0,0,0.45));
  animation: float 6s ease-in-out infinite;
}
.product-cap, .product-body, .product-base { position: absolute; left: 0; width: 100%; }
.product-cap {
  top: 0;
  height: 88px;
  border-radius: 38px 38px 18px 18px;
  background: linear-gradient(135deg, #fafafa, #bfc8ce 65%, #fff);
  box-shadow: inset -8px -10px 18px rgba(0,0,0,0.18), inset 8px 8px 15px rgba(255,255,255,0.85);
}
.product-cap::after { content:""; position:absolute; left:12%; bottom:8px; width:76%; height:3px; background:rgba(0,0,0,0.15); border-radius:9px; }
.product-body {
  top: 74px;
  height: 250px;
  padding: 40px 18px;
  color: #fff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 18%),
    linear-gradient(160deg, var(--color-watermelon-soft), var(--color-watermelon) 45%, #a7174a 100%);
  box-shadow: inset 8px 0 14px rgba(255,255,255,0.18), inset -10px 0 18px rgba(68,0,23,0.25);
}
.product-body::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent); transform:translateX(-60%); }
.product-logo { display:block; font-family:var(--font-display); font-size:1.3rem; letter-spacing:0.12em; writing-mode:vertical-rl; transform:rotate(180deg); }
.product-flavor { position:absolute; right:18px; bottom:28px; font-size:0.53rem; letter-spacing:0.14em; writing-mode:vertical-rl; transform:rotate(180deg); }
.product-line { position:absolute; left:16px; bottom:24px; width:45px; height:5px; border-radius:5px; background:var(--color-watermelon-green); }
.product-base {
  bottom: 0;
  height: 78px;
  border-radius: 15px 15px 35px 35px;
  background: linear-gradient(135deg, #f6f7f8, #b9c2c8 60%, #fff);
  box-shadow: inset -8px -10px 18px rgba(0,0,0,0.17), inset 8px 8px 15px rgba(255,255,255,0.85);
}
.orbit { position:absolute; border:1px solid rgba(255,255,255,0.13); border-radius:50%; }
.orbit-one { width:380px; height:190px; transform:rotate(-15deg); }
.orbit-two { width:260px; height:430px; transform:rotate(38deg); }
.ice-shard { position:absolute; background:linear-gradient(145deg, rgba(183,238,255,0.85), rgba(255,255,255,0.06)); clip-path:polygon(50% 0, 100% 100%, 0 76%); filter:drop-shadow(0 10px 12px rgba(53,167,255,0.2)); }
.shard-one { width:70px; height:90px; left:8%; top:16%; transform:rotate(-34deg); }
.shard-two { width:45px; height:65px; right:8%; top:34%; transform:rotate(45deg); }
.shard-three { width:58px; height:75px; right:18%; bottom:8%; transform:rotate(82deg); }
.flavor-badge {
  position:absolute;
  right:0;
  bottom:10%;
  display:grid;
  min-width:190px;
  padding:16px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:18px;
  background:rgba(13,16,22,0.72);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
}
.flavor-badge span { color:var(--color-watermelon-green); font-size:0.66rem; letter-spacing:0.12em; }
.flavor-badge strong { margin-top:5px; font-size:0.94rem; }
.flavor-badge small { color:var(--color-muted-light); font-size:0.74rem; }
.concept-caption { margin:6px 0 0; color:#777f8c; text-align:center; font-size:0.7rem; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.18; }
.hero-glow-one { width:300px; height:300px; right:-80px; top:100px; background:var(--color-watermelon); }
.hero-glow-two { width:250px; height:250px; left:-100px; bottom:-100px; background:var(--color-blue); }

.ticker { overflow:hidden; padding:15px 0; color:#0b0d11; background:var(--color-accent); }
.ticker-track { display:flex; width:max-content; align-items:center; gap:22px; animation:ticker 28s linear infinite; font-weight:850; font-size:0.78rem; letter-spacing:0.13em; white-space:nowrap; }
.ticker-track i { width:5px; height:5px; background:#0b0d11; border-radius:50%; }

.section-heading { max-width:800px; margin-bottom:52px; }
.section-kicker { display:inline-block; margin-bottom:16px; color:#737a84; font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; }
.section-heading h2, .benefits-copy h2, .waitlist-copy h2 {
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:clamp(2.5rem, 8vw, 5.5rem);
  line-height:0.96;
  letter-spacing:-0.055em;
  text-transform:uppercase;
}
.section-heading p, .benefits-copy > p, .waitlist-copy > p { max-width:650px; margin:0; color:var(--color-muted); font-size:1.05rem; }
.section-heading-dark p { color:var(--color-muted-light); }

.scenario-grid { display:grid; gap:16px; }
.scenario-card { min-height:260px; display:flex; flex-direction:column; padding:24px; border:1px solid var(--color-line); border-radius:var(--radius-medium); background:rgba(255,255,255,0.58); transition:transform var(--transition), background var(--transition); }
.scenario-card:hover { transform:translateY(-5px); background:#fff; }
.scenario-number { color:#9298a0; font-size:0.7rem; letter-spacing:0.12em; }
.scenario-icon { width:54px; height:54px; display:grid; place-items:center; margin:36px 0 34px; border:1px solid var(--color-line); border-radius:50%; font-size:1.4rem; }
.scenario-card h3 { margin:auto 0 8px; font-size:1.15rem; }
.scenario-card p { margin:0; color:var(--color-muted); font-size:0.9rem; }

.steps-grid { list-style:none; display:grid; gap:16px; padding:0; margin:0; }
.step-card { position:relative; min-height:360px; padding:24px; overflow:hidden; border:1px solid var(--color-line-dark); border-radius:var(--radius-medium); background:linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)); }
.step-number { color:var(--color-accent); font-size:0.7rem; letter-spacing:0.12em; }
.step-card h3 { margin:0 0 8px; font-size:1.2rem; }
.step-card p { margin:0; color:var(--color-muted-light); font-size:0.88rem; }
.step-visual { height:205px; display:grid; place-items:center; }
.step-open span:first-child { width:44px; height:116px; border-radius:16px 16px 12px 12px; background:linear-gradient(var(--color-watermelon-soft), var(--color-watermelon)); transform:translate(12px,18px) rotate(10deg); }
.step-open span:last-child { width:48px; height:54px; margin-left:-45px; border-radius:18px; background:#e9edf0; transform:translate(-14px,-54px) rotate(-10deg); }
.step-hold span { width:48px; height:152px; border-radius:18px; background:linear-gradient(var(--color-berry-soft), var(--color-berry)); transform:rotate(78deg); box-shadow:0 0 0 34px rgba(255,255,255,0.035); }
.step-breathe { position:relative; }
.step-breathe span { position:absolute; width:95px; height:40px; border-top:2px solid var(--color-ice); border-radius:50%; }
.step-breathe span:nth-child(1){ transform:translate(-25px,-38px) rotate(12deg); }
.step-breathe span:nth-child(2){ transform:translate(8px,0) rotate(-8deg); }
.step-breathe span:nth-child(3){ transform:translate(-20px,38px) rotate(7deg); }
.step-reset span { width:120px; height:120px; display:grid; place-items:center; color:#0b0d11; background:var(--color-accent); border-radius:50%; font-family:var(--font-display); font-size:3rem; box-shadow:0 0 0 24px rgba(200,255,56,0.08), 0 0 0 48px rgba(200,255,56,0.035); }

.section-benefits { background:#dce9ec; }
.benefits-grid { display:grid; gap:54px; }
.benefits-copy { align-self:start; }
.benefits-copy > p { margin-bottom:28px; }
.benefit-list { border-top:1px solid var(--color-line); }
.benefit-item { display:grid; grid-template-columns:46px 1fr; gap:12px; padding:22px 0; border-bottom:1px solid var(--color-line); }
.benefit-item > span { color:#7a838b; font-size:0.72rem; }
.benefit-item div { display:grid; gap:3px; }
.benefit-item strong { font-size:1.03rem; }
.benefit-item small { color:#5d6770; font-size:0.86rem; }

.flavor-section { background:#f7f7f4; }
.flavor-grid { display:grid; gap:18px; }
.flavor-card { position:relative; min-height:560px; display:flex; flex-direction:column; padding:24px; overflow:hidden; border:2px solid transparent; border-radius:var(--radius-large); cursor:pointer; text-align:left; box-shadow:none; transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.flavor-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.flavor-card.is-selected { border-color:#12151a; }
.flavor-card-watermelon { background:linear-gradient(145deg, #ffccd5 0%, #ff667f 44%, #a9e764 100%); }
.flavor-card-berry { color:#fff; background:linear-gradient(145deg, #c6b6ff 0%, #6845e8 45%, #165dc9 100%); }
.flavor-card-top { display:flex; justify-content:space-between; align-items:center; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; }
.selection-indicator { padding:7px 10px; border:1px solid currentColor; border-radius:999px; font-weight:800; letter-spacing:0.04em; }
.flavor-art { position:relative; flex:1; min-height:330px; display:grid; place-items:center; }
.fruit-sphere { position:absolute; border-radius:50%; filter:blur(0.2px); box-shadow:inset 14px 14px 24px rgba(255,255,255,0.25), inset -15px -15px 30px rgba(0,0,0,0.14); }
.flavor-art-watermelon .sphere-one { width:190px; height:190px; background:#ff365c; }
.flavor-art-watermelon .sphere-two { width:95px; height:95px; left:10%; bottom:16%; background:#c6f568; }
.flavor-art-watermelon .sphere-three { width:58px; height:58px; right:14%; top:18%; background:#c9f4ff; }
.flavor-art-berry .sphere-one { width:185px; height:185px; background:#281661; }
.flavor-art-berry .sphere-two { width:100px; height:100px; left:9%; bottom:13%; background:#7d35da; }
.flavor-art-berry .sphere-three { width:62px; height:62px; right:12%; top:17%; background:#bdecff; }
.mini-stick { position:relative; z-index:2; width:82px; height:280px; display:grid; place-items:center; border-radius:28px; background:linear-gradient(90deg,#f7fafb,#bcc4ca 48%,#fff); transform:rotate(16deg); box-shadow:0 30px 40px rgba(26,22,38,0.28); }
.mini-stick::before { content:""; position:absolute; top:54px; left:8px; right:8px; bottom:56px; border-radius:13px; background:rgba(15,17,22,0.92); }
.mini-stick i { position:relative; z-index:1; color:#fff; font-style:normal; font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.15em; writing-mode:vertical-rl; transform:rotate(180deg); }
.flavor-card-copy { display:grid; gap:8px; }
.flavor-card-copy strong { font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3.2rem); line-height:1; letter-spacing:-0.045em; text-transform:uppercase; }
.flavor-card-copy small { max-width:430px; font-size:0.9rem; opacity:0.78; }
.future-flavors { margin:24px 0 0; color:var(--color-muted); text-align:center; font-size:0.9rem; }
.future-flavors span { color:var(--color-text); font-weight:700; }

.waitlist-section { color:#fff; background:linear-gradient(145deg,#0b0e14,#121927 65%,#172334); }
.waitlist-grid { display:grid; gap:42px; }
.eyebrow-light { color:#aab4c1; }
.waitlist-copy > p { color:#aab4c1; }
.development-note { display:flex; gap:16px; align-items:center; margin-top:34px; padding-top:25px; border-top:1px solid var(--color-line-dark); }
.tester-avatars { display:flex; min-width:95px; }
.tester-avatars span { width:38px; height:38px; display:grid; place-items:center; margin-left:-8px; color:#0b0d11; background:var(--color-accent); border:3px solid #111824; border-radius:50%; font-weight:900; }
.tester-avatars span:first-child { margin-left:0; }
.development-note p { margin:0; color:#aab4c1; font-size:0.82rem; }
.development-note strong { color:#fff; }
.form-card { padding:24px; color:var(--color-text); background:#f7f8f4; border-radius:var(--radius-medium); box-shadow:0 30px 80px rgba(0,0,0,0.28); }
.form-field { display:grid; gap:9px; margin:0 0 22px; padding:0; border:0; }
.form-field label, .form-field legend { padding:0; font-size:0.82rem; font-weight:800; }
.form-field input[type="email"] { width:100%; min-height:54px; padding:0 16px; color:var(--color-text); background:#fff; border:1px solid #ccd0d4; border-radius:12px; }
.form-field input[type="email"]::placeholder { color:#9aa0aa; }
.form-field input[type="email"].is-invalid { border-color:#d83252; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.choice-grid-two { grid-template-columns:1fr; }
.radio-choice { position:relative; display:grid; place-items:center; min-height:48px; padding:8px 10px; cursor:pointer; border:1px solid #d5d8db; border-radius:11px; background:#fff; font-size:0.78rem; font-weight:700; text-align:center; transition:border-color var(--transition), background var(--transition); }
.radio-choice:hover, .radio-choice.is-active { border-color:#15181d; background:#e9f9bd; }
.radio-choice input { position:absolute; opacity:0; pointer-events:none; }
.consent-check { display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; margin:4px 0 4px; color:#626973; cursor:pointer; font-size:0.74rem; }
.consent-check input { width:17px; height:17px; margin:1px 0 0; accent-color:#11141a; }
.field-error { min-height:16px; color:#c52243; font-size:0.72rem; }
.form-footnote { margin:12px 0 0; color:#858b94; text-align:center; font-size:0.68rem; }
.success-message { min-height:480px; place-content:center; text-align:center; }
.success-message:not([hidden]) { display:grid; }
.success-icon { width:68px; height:68px; display:grid; place-items:center; margin:0 auto 18px; color:#0b0d11; background:var(--color-accent); border-radius:50%; font-size:1.5rem; font-weight:900; }
.success-message h3 { margin:0 0 8px; font-family:var(--font-display); font-size:2rem; text-transform:uppercase; }
.success-message p { margin:0 0 26px; color:var(--color-muted); }
.text-button, .footer-button { padding:0; border:0; cursor:pointer; color:inherit; background:none; text-decoration:underline; text-underline-offset:4px; }

.faq-grid { display:grid; gap:34px; }
.faq-heading { margin:0; }
.accordion { border-top:1px solid var(--color-line); }
details { border-bottom:1px solid var(--color-line); }
summary { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:22px 0; cursor:pointer; font-weight:800; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary span { font-size:1.3rem; transition:transform var(--transition); }
details[open] summary span { transform:rotate(45deg); }
details p { max-width:720px; margin:-5px 0 24px; color:var(--color-muted); font-size:0.92rem; }

.site-footer { padding:64px 0 24px; color:#f7f8fb; background:#06080b; }
.footer-top { display:grid; gap:44px; }
.brand-footer { margin-bottom:16px; }
.footer-top > div > p { max-width:310px; margin:0; color:#8f97a3; font-size:0.86rem; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.footer-links > div { display:grid; align-content:start; gap:9px; }
.footer-links strong { margin-bottom:7px; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; }
.footer-links a, .footer-button { color:#939ba7; font-size:0.82rem; text-align:left; text-decoration:none; }
.footer-links a:hover, .footer-button:hover { color:#fff; }
.footer-bottom { display:flex; flex-direction:column; gap:8px; margin-top:48px; padding-top:20px; border-top:1px solid var(--color-line-dark); color:#737b86; font-size:0.72rem; }
.footer-bottom p { margin:0; }

.cookie-banner {
  position:fixed;
  right:16px;
  bottom:16px;
  left:16px;
  z-index:100;
  display:grid;
  gap:16px;
  max-width:880px;
  margin:0 auto;
  padding:18px;
  color:var(--color-text);
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,0.28);
}
.cookie-banner[hidden] { display:none; }
.cookie-banner strong { display:block; margin-bottom:4px; }
.cookie-banner p { margin:0; color:var(--color-muted); font-size:0.78rem; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:8px; }
.toast { position:fixed; left:50%; bottom:20px; z-index:120; width:min(calc(100% - 32px),420px); padding:14px 18px; color:#fff; background:#171b22; border:1px solid var(--color-line-dark); border-radius:12px; text-align:center; transform:translateX(-50%); box-shadow:var(--shadow-soft); font-size:0.82rem; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity 700ms ease, transform 700ms ease; transition-delay:var(--delay,0ms); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

@keyframes float { 0%,100%{transform:rotate(15deg) translateY(0)} 50%{transform:rotate(12deg) translateY(-16px)} }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (min-width: 700px) {
  .container { width:min(calc(100% - 64px), var(--container)); }
  .section { padding:124px 0; }
  .hero { min-height:900px; }
  .hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(340px,0.75fr); align-items:center; gap:30px; }
  .hero-actions { flex-direction:row; align-items:center; }
  .scenario-grid, .steps-grid { grid-template-columns:repeat(2,1fr); }
  .flavor-grid { grid-template-columns:1fr 1fr; }
  .choice-grid-two { grid-template-columns:1fr 1fr; }
  .form-card { padding:34px; }
  .footer-top { grid-template-columns:1.2fr 1fr; }
  .footer-bottom { flex-direction:row; justify-content:space-between; }
  .cookie-banner { grid-template-columns:1fr auto; align-items:center; }
}

@media (min-width: 980px) {
  .desktop-nav { display:flex; }
  .scenario-grid, .steps-grid { grid-template-columns:repeat(4,1fr); }
  .benefits-grid { grid-template-columns:0.85fr 1.15fr; gap:110px; }
  .benefits-copy { position:sticky; top:90px; }
  .waitlist-grid { grid-template-columns:0.9fr 1.1fr; align-items:center; gap:90px; }
  .faq-grid { grid-template-columns:0.8fr 1.2fr; gap:110px; }
  .faq-heading { position:sticky; top:100px; align-self:start; }
}

@media (max-width: 480px) {
  .site-header .button-small { display:none; }
  .hero h1 { font-size:3.3rem; }
  .product-stage { min-height:400px; }
  .product-stick { width:106px; height:340px; }
  .product-cap { height:76px; }
  .product-body { top:64px; height:222px; }
  .product-base { height:66px; }
  .flavor-badge { right:2px; bottom:4%; min-width:170px; }
  .choice-grid { grid-template-columns:1fr 1fr; }
  .flavor-card { min-height:500px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* =========================================================
   RESET v2 – echte Kampagnenbilder
   Die folgenden Regeln ersetzen die ursprünglichen CSS-Mock-ups.
   ========================================================= */

.hero {
  background:
    linear-gradient(90deg, rgba(7, 9, 13, 0.98) 0%, rgba(7, 9, 13, 0.92) 42%, rgba(7, 9, 13, 0.52) 72%, rgba(7, 9, 13, 0.72) 100%),
    url("assets/hero-background.webp") center bottom / cover no-repeat,
    #07090d;
}

.hero-image-shell {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: clamp(24px, 4vw, 42px);
  overflow: hidden;
  background: #080b10;
  box-shadow: 0 42px 100px rgba(0, 0, 0, 0.5);
  isolation: isolate;
}

.hero-image-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,0.10), transparent 30%, transparent 70%, rgba(53,167,255,0.08));
}

.hero-product-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  animation: hero-breathe 8s ease-in-out infinite;
}

.hero-image-shell .flavor-badge {
  right: 18px;
  bottom: 18px;
  z-index: 2;
}

.concept-caption {
  margin: 14px 0 0;
  color: var(--color-muted-light);
  font-size: 0.72rem;
  text-align: center;
}

@keyframes hero-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}

.how-layout {
  display: grid;
  gap: 28px;
  align-items: center;
}

.how-image-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-large);
  background: #080b10;
  box-shadow: 0 30px 90px rgba(0,0,0,0.32);
}

.how-image-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.steps-list {
  list-style: none;
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-line-dark);
}

.steps-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line-dark);
}

.steps-list > li > span {
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.steps-list h3 { margin: 0 0 5px; font-size: 1rem; }
.steps-list p { margin: 0; color: var(--color-muted-light); font-size: 0.86rem; }

.campaign-section {
  color: var(--color-text-light);
  background: #07090d;
}

.campaign-grid {
  display: grid;
  gap: 18px;
}

.campaign-card,
.packaging-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: #10131a;
  box-shadow: 0 24px 70px rgba(0,0,0,0.22);
}

.campaign-card img,
.packaging-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.campaign-card:hover img,
.packaging-card:hover img { transform: scale(1.035); }

.campaign-card { min-height: 360px; }
.campaign-card img { aspect-ratio: 1 / 1; }

.campaign-card figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 16px;
  background: rgba(7,9,13,0.66);
  backdrop-filter: blur(14px);
}

.campaign-card figcaption span {
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.campaign-card figcaption strong { font-size: 0.95rem; }

.flavor-section { background: #eef0ec; }
.flavor-card {
  min-height: 0;
  padding: 16px;
  gap: 16px;
  background: #fff;
  color: var(--color-text);
}
.flavor-card-watermelon,
.flavor-card-berry { background: #fff; color: var(--color-text); }
.flavor-card.is-selected { border-color: var(--color-accent-dark); box-shadow: 0 24px 70px rgba(18,22,30,0.13); }
.flavor-card-top { padding: 2px 4px 0; }
.flavor-image-wrap {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius-medium) - 6px);
  background: #080b10;
}
.flavor-image-wrap img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  transition: transform 650ms ease;
}
.flavor-card:hover .flavor-image-wrap img { transform: scale(1.035); }
.flavor-card-copy { padding: 0 6px 8px; }
.flavor-card-copy strong { font-size: clamp(1.65rem, 4vw, 2.7rem); }
.selection-indicator { color: #111; background: rgba(200,255,56,0.65); border-color: transparent; }

.packaging-section { background: #f3f4ef; }
.packaging-grid { display: grid; gap: 18px; }
.packaging-card { background: #0a0d12; }
.packaging-card img { aspect-ratio: 1 / 1; }
.packaging-card figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 9px 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  background: rgba(7,9,13,0.62);
  backdrop-filter: blur(12px);
  font-size: 0.76rem;
  font-weight: 800;
}

@media (min-width: 700px) {
  .how-layout { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 50px; }
  .campaign-grid { grid-template-columns: 1.25fr .75fr; }
  .campaign-card-wide { grid-row: span 2; }
  .campaign-card-wide img { height: 100%; aspect-ratio: auto; }
  .packaging-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(430px, .86fr); gap: 54px; }
  .hero-visual { transform: translateY(18px); }
}

@media (max-width: 699px) {
  .hero { background-position: 62% bottom; }
  .hero-image-shell .flavor-badge { position: static; margin: -4px 14px 14px; }
  .campaign-card { min-height: 0; }
}

/* =========================================================
   RESET v3 – integrierter Hero und stärkere Conversion-CTAs
   ========================================================= */

.site-header {
  position: fixed;
  background: linear-gradient(180deg, rgba(7,9,13,.88), rgba(7,9,13,.56));
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.header-cta {
  color: #0a0c0f;
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 10px 30px rgba(200,255,56,.18);
}
.header-cta:hover { background:#d7ff70; box-shadow:0 14px 38px rgba(200,255,56,.27); }

.hero {
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(7,9,13,.98) 0%, rgba(7,9,13,.91) 38%, rgba(7,9,13,.45) 70%, rgba(7,9,13,.70) 100%),
    url("assets/hero-background.webp") center bottom / cover no-repeat,
    #07090d;
}

.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:32%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(7,9,13,.22));
}

.hero-grid { position:relative; z-index:1; }

.button-hero-cta {
  min-height: 62px;
  padding-inline: 28px;
  gap: 28px;
  font-size: 1rem;
  box-shadow: 0 18px 46px rgba(200,255,56,.18);
}
.button-hero-cta span:last-child { font-size:1.25rem; transition:transform var(--transition); }
.button-hero-cta:hover span:last-child { transform:translateX(5px); }
.hero-cta-note { margin:12px 0 0; color:rgba(255,255,255,.62); font-size:.76rem; }

.hero-product-stage {
  position: relative;
  min-height: clamp(520px, 67vw, 720px);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.hero-product-stage::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:7%;
  width:min(70%, 390px);
  height:44px;
  z-index:-1;
  border-radius:50%;
  transform:translateX(-50%);
  background:rgba(40,165,255,.30);
  filter:blur(24px);
}

.hero-product-glow {
  position:absolute;
  width:min(86%, 490px);
  aspect-ratio:1;
  z-index:-2;
  border-radius:50%;
  background:radial-gradient(circle, rgba(53,167,255,.18), rgba(255,79,109,.06) 42%, transparent 70%);
  filter:blur(14px);
}

.hero-product-image {
  width:auto;
  height:min(72vh, 690px);
  max-height:690px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.50)) drop-shadow(0 0 18px rgba(71,171,255,.18));
  will-change:transform;
  animation:hero-float 7s ease-in-out infinite;
}

.hero-product-stage .flavor-badge {
  right:0;
  bottom:11%;
  z-index:3;
}

@keyframes hero-float {
  0%,100% { transform:translate3d(0,0,0) rotate(0deg); }
  50% { transform:translate3d(0,-11px,0) rotate(.35deg); }
}

@media (min-width:980px) {
  .hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(430px,.78fr); }
  .hero-product-image { height:min(76vh, 720px); }
}

@media (max-width:699px) {
  .site-header { background:rgba(7,9,13,.86); }
  .header-inner { min-height:72px; }
  .hero-grid { padding-top:112px; }
  .hero-product-stage { min-height:520px; }
  .hero-product-image { height:520px; max-width:74vw; }
  .hero-product-stage .flavor-badge { right:2%; bottom:6%; }
  .button-hero-cta { width:100%; justify-content:space-between; }
}

@media (max-width:480px) {
  .site-header .button-small { display:inline-flex; min-height:38px; padding:0 12px; font-size:.73rem; }
  .brand { font-size:.86rem; }
  .brand-mark { width:16px; height:16px; border-width:4px; }
  .hero-product-stage { min-height:470px; }
  .hero-product-image { height:470px; }
  .hero-product-stage .flavor-badge { position:absolute; margin:0; min-width:150px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-image { animation:none; }
}


/* =========================================================
   Sprachumschalter (Version 4)
   ========================================================= */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(8,11,16,.5);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.language-button {
  min-width: 44px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  color: rgba(255,255,255,.68);
  background: transparent;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 800;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}
.language-button:hover { color:#fff; background:rgba(255,255,255,.08); }
.language-button.is-active {
  color:#0a0c0f;
  background:var(--color-accent);
  box-shadow:0 7px 20px rgba(200,255,56,.18);
}
.language-button:focus-visible {
  outline:3px solid rgba(200,255,56,.55);
  outline-offset:3px;
}
.language-button span { line-height:1; }

@media (max-width: 699px) {
  .header-inner { gap:10px; }
  .header-actions { gap:7px; }
  .language-switcher { padding:2px; }
  .language-button { min-width:38px; height:32px; padding:0 7px; }
  .language-button span { display:none; }
  .header-cta { padding-inline:13px; font-size:.78rem; }
}

@media (max-width: 390px) {
  .brand { font-size:.88rem; gap:7px; }
  .brand-mark { width:16px; height:16px; }
  .header-cta { min-height:38px; padding-inline:11px; }
}

/* =========================================================
   RESET v5 – Conversion, Timeline und Mobile-Finishing
   ========================================================= */

/* Stärkerer, aber ruhiger Glassmorphism-Header */
.site-header {
  background: linear-gradient(180deg, rgba(7, 9, 13, .78), rgba(7, 9, 13, .46));
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .16);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  transition: background 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.site-header.is-scrolled {
  background: rgba(7, 9, 13, .84);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 12px 44px rgba(0, 0, 0, .28);
}
.header-inner { transition: min-height 260ms ease; }
.site-header.is-scrolled .header-inner { min-height: 68px; }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  border-radius: 3px;
  background: var(--color-accent);
  transition: right 220ms ease;
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after { right: 0; }
.language-switcher {
  padding: 3px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
}
.language-button { border-radius: 999px; transition: background 180ms ease, transform 180ms ease; }
.language-button:hover { transform: translateY(-1px); }

/* Microinteractions */
.button { position: relative; overflow: hidden; }
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.38) 48%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 650ms ease;
  pointer-events: none;
}
.button:hover::after { transform: translateX(130%); }
.flavor-card { will-change: transform; transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease; }
.flavor-card:hover { transform: translateY(-6px); }
.flavor-card.selection-pulse { animation: selectionPulse 480ms ease; }
@keyframes selectionPulse {
  0% { transform: scale(1); }
  45% { transform: scale(.985); }
  100% { transform: scale(1); }
}
.status-dot, .sticky-status-dot { animation: statusPulse 2.2s ease-in-out infinite; }
@keyframes statusPulse { 50% { box-shadow: 0 0 0 9px rgba(200,255,56,0); } }

/* Entwicklungs-Timeline */
.development-section {
  color: var(--color-text-light);
  background:
    radial-gradient(circle at 15% 20%, rgba(116,77,255,.14), transparent 30%),
    radial-gradient(circle at 85% 70%, rgba(53,167,255,.12), transparent 32%),
    #0a0d12;
}
.development-timeline {
  display: grid;
  gap: 14px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}
.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}
.timeline-step:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.timeline-step.is-active {
  border-color: rgba(200,255,56,.42);
  background: linear-gradient(135deg, rgba(200,255,56,.10), rgba(255,255,255,.035));
}
.timeline-marker {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: var(--color-muted-light);
  font-size: .72rem;
  font-weight: 850;
}
.is-complete .timeline-marker,
.is-active .timeline-marker { color: #0a0c0f; border-color: var(--color-accent); background: var(--color-accent); }
.timeline-step small { color: var(--color-accent); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.timeline-step h3 { margin: 5px 0 8px; font-size: 1.12rem; }
.timeline-step p { margin: 0; color: var(--color-muted-light); font-size: .9rem; }

/* Sichtbare Synchronisierung der Sortenauswahl */
.selected-flavor-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(17,19,25,.10);
  border-radius: 14px;
  background: rgba(116,77,255,.055);
  font-size: .82rem;
}
.selected-flavor-summary strong { margin-left: auto; }
.selected-flavor-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-watermelon); box-shadow: 0 0 0 5px rgba(255,79,109,.10); transition: background 220ms ease; }
.selected-flavor-summary.is-berry .selected-flavor-dot { background: var(--color-berry); box-shadow: 0 0 0 5px rgba(116,77,255,.10); }

/* Sticky Conversion Bar */
.sticky-conversion-bar {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 780px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 16px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(11,14,20,.82);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  transition: transform 340ms cubic-bezier(.2,.75,.25,1), opacity 240ms ease;
}
.sticky-conversion-bar.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sticky-conversion-copy { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; }
.sticky-conversion-copy > span:last-child { min-width: 0; display: grid; }
.sticky-conversion-copy strong { font-size: .86rem; }
.sticky-conversion-copy small { overflow: hidden; color: var(--color-muted-light); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.sticky-status-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 5px rgba(200,255,56,.12); }
.sticky-conversion-button { min-height: 44px; flex: 0 0 auto; }
.sticky-conversion-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  color: rgba(255,255,255,.65);
  background: transparent;
  cursor: pointer;
}
.sticky-conversion-close:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Mobile-Optimierung */
@media (max-width: 979px) {
  .header-inner { min-height: 72px; gap: 10px; }
  .header-actions { gap: 8px; }
  .language-button { padding-inline: 8px; }
  .language-button span { display: none; }
  .header-cta { min-height: 40px; padding-inline: 13px; }
  .hero { min-height: auto; }
  .hero-grid { padding-top: 108px; }
}
@media (max-width: 699px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 74px 0; }
  .brand { font-size: .9rem; }
  .brand-mark { width: 16px; height: 16px; border-width: 4px; }
  .hero-grid { gap: 22px; padding-bottom: 50px; }
  .hero-copy { text-align: left; }
  .hero h1 { margin-top: 18px; font-size: clamp(3.05rem, 17vw, 5rem); }
  .hero-subtitle { font-size: 1.18rem; }
  .hero-actions { width: 100%; }
  .button-hero-cta { width: 100%; justify-content: space-between; }
  .hero-product-stage { min-height: 500px; }
  .hero-product-image { max-height: 480px; }
  .flavor-badge { right: 0; bottom: 22px; }
  .scenario-grid, .flavor-grid, .packaging-grid { gap: 14px; }
  .flavor-card { padding: 12px; border-radius: 22px; }
  .form-card { padding: 22px 16px; border-radius: 24px; }
  .choice-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .radio-choice { min-height: 48px; padding: 10px; }
  .timeline-step { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .timeline-marker { width: 36px; height: 36px; }
  .sticky-conversion-bar { gap: 9px; padding: 8px 8px 8px 12px; border-radius: 18px; }
  .sticky-conversion-copy small { max-width: 130px; }
  .sticky-conversion-button { min-height: 42px; padding-inline: 14px; font-size: .78rem; }
  .sticky-conversion-close { display: none; }
  body { padding-bottom: 76px; }
}
@media (max-width: 430px) {
  .header-cta { font-size: .75rem; padding-inline: 11px; }
  .sticky-conversion-copy strong { font-size: .78rem; }
  .sticky-conversion-copy small { max-width: 95px; }
  .sticky-conversion-button span { display: none; }
}
@media (min-width: 900px) {
  .development-timeline { grid-template-columns: repeat(4, 1fr); }
  .timeline-step { grid-template-columns: 1fr; align-content: start; min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot, .sticky-status-dot { animation: none; }
  .button::after { display: none; }
  .flavor-card:hover, .timeline-step:hover { transform: none; }
}


/* RESET v6 – Rechtliche Seiten */
.legal-page{min-height:100vh;color:var(--color-text-light);background:var(--color-bg)}
.legal-page a{text-decoration-thickness:1px;text-underline-offset:3px}
.legal-header{border-bottom:1px solid var(--color-line-dark);background:rgba(7,9,13,.92)}
.legal-header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.legal-back-link{color:var(--color-muted-light);font-size:.9rem}
.legal-back-link:hover,.legal-back-link:focus-visible{color:var(--color-white)}
.legal-main{padding:72px 0 100px}
.legal-document{max-width:860px}
.legal-kicker{margin:0 0 14px;color:var(--color-accent);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.legal-document h1{margin:0;font-family:var(--font-display);font-size:clamp(2.8rem,9vw,5.8rem);line-height:.95;letter-spacing:-.055em;text-transform:uppercase}
.legal-updated{margin:18px 0 54px;color:var(--color-muted-light)}
.legal-document section{padding:30px 0;border-top:1px solid var(--color-line-dark)}
.legal-document h2{margin:0 0 15px;color:var(--color-white);font-size:clamp(1.15rem,3vw,1.5rem);line-height:1.25}
.legal-document p{margin:0 0 14px;color:#c7ccd5;line-height:1.75}
.legal-document p:last-child{margin-bottom:0}
.legal-document a{color:var(--color-accent);text-decoration:underline}
.legal-placeholder{color:#ffd166;font-weight:800;overflow-wrap:anywhere}
.legal-notice{margin:0 0 42px;padding:22px;border:1px solid rgba(255,209,102,.35);border-radius:18px;background:rgba(255,209,102,.07)}
.legal-notice strong{color:#ffd166}.legal-notice p{margin:8px 0 0;color:#d9dde5}
.legal-footer{padding:28px 0;border-top:1px solid var(--color-line-dark);color:var(--color-muted-light)}
.legal-footer-inner{display:flex;justify-content:space-between;gap:24px;font-size:.82rem}
.legal-footer nav{display:flex;flex-wrap:wrap;gap:18px}
.legal-footer a:hover,.legal-footer a:focus-visible,.legal-footer a[aria-current=page]{color:var(--color-white)}
.consent-check a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:620px){.legal-header-inner,.legal-footer-inner{align-items:flex-start;flex-direction:column}.legal-header-inner{min-height:auto;padding-block:22px}.legal-main{padding:52px 0 72px}.legal-updated{margin-bottom:38px}.legal-document section{padding:25px 0}}


/* RESET v6 – produktionsfähige Warteliste */
.honeypot-field{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
#waitlist-submit:disabled{cursor:wait;opacity:.72;transform:none}
.form-footnote a{text-decoration:underline;text-underline-offset:2px}