/* =========================================================================
   Wetter Ultra — Website
   Design: Apple-typisch, Milchglas, 3D-Parallax, abgerundet, hell & dunkel
   ========================================================================= */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Markenfarben aus der App */
  --blue:    #2196F3;
  --cyan:    #00BCD4;
  --green:   #4CAF50;
  --orange:  #FF9800;
  --red:     #F44336;
  --pink:    #E91E63;
  --purple:  #9C27B0;

  /* Flächen (hell) */
  --bg:            #F7FBFF;
  --bg-deep:       #EAF4FE;
  --surface:       rgba(255, 255, 255, 0.62);
  --surface-solid: #FFFFFF;
  --surface-hi:    rgba(255, 255, 255, 0.86);
  --stroke:        rgba(255, 255, 255, 0.75);
  --stroke-soft:   rgba(9, 30, 66, 0.08);

  /* Text */
  --ink:      #0B1521;
  --ink-2:    #3C4A5A;
  --ink-3:    #6B7A8C;

  /* Schatten */
  --shadow-s: 0 1px 2px rgba(9, 30, 66, .06), 0 4px 14px rgba(9, 30, 66, .06);
  --shadow-m: 0 2px 6px rgba(9, 30, 66, .06), 0 14px 40px rgba(9, 30, 66, .10);
  --shadow-l: 0 4px 12px rgba(9, 30, 66, .08), 0 30px 80px rgba(9, 30, 66, .16);
  --shadow-xl:0 8px 24px rgba(9, 30, 66, .10), 0 50px 120px rgba(9, 30, 66, .22);

  /* Radien */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-full: 999px;

  /* Raster */
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 40px);
  --nav-h: 62px;

  /* Bewegung */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --blob-a: 0.55;
  --blob-b: 0.42;
  color-scheme: light;

  /* Mischwert für den stufenlosen Tag→Nacht-Verlauf: 0 = Tag, 1 = Nacht.
     Wird beim Scrollen vom Skript gesetzt (siehe @supports weiter unten). */
  --dark: 0;
  --dark-ink: 0;
}

/* -------- Stufenloser Übergang zwischen Tag und Nacht --------------------
   Die Farben werden nicht umgeschaltet, sondern anteilig gemischt. Dadurch
   läuft die Seite beim Scrollen weich von hell nach dunkel, statt an einer
   Stelle umzuspringen.

   Bewusst in @supports gekapselt: Browser ohne color-mix() bekommen weiterhin
   das harte Umschalten über [data-theme] – das funktioniert überall. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    /* Endwerte für Tag (l) und Nacht (d) */
    --l-bg: #F7FBFF;                        --d-bg: #070B11;
    --l-bg-deep: #EAF4FE;                   --d-bg-deep: #0C1219;
    --l-surface: rgba(255,255,255,.62);     --d-surface: rgba(255,255,255,.055);
    --l-surface-solid: #FFFFFF;             --d-surface-solid: #12181F;
    --l-surface-hi: rgba(255,255,255,.86);  --d-surface-hi: rgba(255,255,255,.10);
    --l-stroke: rgba(255,255,255,.75);      --d-stroke: rgba(255,255,255,.12);
    --l-stroke-soft: rgba(9,30,66,.08);     --d-stroke-soft: rgba(255,255,255,.08);
    --l-ink: #0B1521;                       --d-ink: #F2F6FA;
    --l-ink-2: #3C4A5A;                     --d-ink-2: #B4C0CD;
    --l-ink-3: #6B7A8C;                     --d-ink-3: #8494A4;

    --mix: calc(var(--dark) * 100%);
  }

  /* Selektor bewusst mit `html` davor: `:root[data-blend]` allein hätte
     dieselbe Spezifität wie `:root[data-theme="dark"]`, und weil die
     Nacht-Regeln weiter unten stehen, würden sie ab der Mitte gewinnen –
     der Verlauf würde dann auf halber Strecke hart umspringen.
     `html:root[data-blend]` liegt eine Stufe höher und gewinnt immer. */
  html:root[data-blend] {
    --bg:            color-mix(in srgb, var(--d-bg) var(--mix), var(--l-bg));
    --bg-deep:       color-mix(in srgb, var(--d-bg-deep) var(--mix), var(--l-bg-deep));
    --surface:       color-mix(in srgb, var(--d-surface) var(--mix), var(--l-surface));
    --surface-solid: color-mix(in srgb, var(--d-surface-solid) var(--mix), var(--l-surface-solid));
    --surface-hi:    color-mix(in srgb, var(--d-surface-hi) var(--mix), var(--l-surface-hi));
    --stroke:        color-mix(in srgb, var(--d-stroke) var(--mix), var(--l-stroke));
    --stroke-soft:   color-mix(in srgb, var(--d-stroke-soft) var(--mix), var(--l-stroke-soft));
    /* Textfarben laufen auf einer EIGENEN, viel steileren Kurve (--dark-ink).
       Grund: Liefen sie synchron mit dem Hintergrund, wären bei halbem
       Fortschritt beide mittelgrau – der Text wäre für einen Moment praktisch
       unlesbar. So bleibt der Hintergrund weich, während die Schrift zügig
       durch den kritischen Bereich wechselt. */
    --mix-ink: calc(var(--dark-ink) * 100%);
    --ink:           color-mix(in srgb, var(--d-ink) var(--mix-ink), var(--l-ink));
    --ink-2:         color-mix(in srgb, var(--d-ink-2) var(--mix-ink), var(--l-ink-2));
    --ink-3:         color-mix(in srgb, var(--d-ink-3) var(--mix-ink), var(--l-ink-3));

    --blob-a: calc(0.55 - 0.21 * var(--dark));
    --blob-b: calc(0.42 - 0.16 * var(--dark));
  }

  /* Beim gemischten Verlauf übernimmt das Scrollen die Animation – eine
     zusätzliche CSS-Transition würde nur hinterherhinken. */
  :root[data-blend] body,
  :root[data-blend] .bg-field,
  :root[data-blend] .glass, :root[data-blend] .glass-hi,
  :root[data-blend] .float-card, :root[data-blend] .ai-stage,
  :root[data-blend] .privacy, :root[data-blend] .plan, :root[data-blend] .cta,
  :root[data-blend] .fcard, :root[data-blend] .device-card, :root[data-blend] .chip,
  :root[data-blend] .pill, :root[data-blend] .btn--ghost, :root[data-blend] .stat,
  :root[data-blend] .faq details, :root[data-blend] .review,
  :root[data-blend] .rating-badge, :root[data-blend] .stats,
  :root[data-blend] .nav.is-stuck, :root[data-blend] .footer,
  :root[data-blend] .cookie__inner, :root[data-blend] .facts,
  :root[data-blend] .midcta, :root[data-blend] .longform__box,
  :root[data-blend] .blob {
    transition: none;
  }
}

:root[data-theme="dark"],
html.dark {
  --bg:            #070B11;
  --bg-deep:       #0C1219;
  --surface:       rgba(255, 255, 255, 0.055);
  --surface-solid: #12181F;
  --surface-hi:    rgba(255, 255, 255, 0.10);
  --stroke:        rgba(255, 255, 255, 0.12);
  --stroke-soft:   rgba(255, 255, 255, 0.08);

  --ink:   #F2F6FA;
  --ink-2: #B4C0CD;
  --ink-3: #8494A4;

  --shadow-s: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34);
  --shadow-m: 0 2px 6px rgba(0,0,0,.42), 0 14px 40px rgba(0,0,0,.46);
  --shadow-l: 0 4px 12px rgba(0,0,0,.46), 0 30px 80px rgba(0,0,0,.56);
  --shadow-xl:0 8px 24px rgba(0,0,0,.5), 0 50px 120px rgba(0,0,0,.62);

  --blob-a: 0.34;
  --blob-b: 0.26;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #070B11;
    --bg-deep:       #0C1219;
    --surface:       rgba(255, 255, 255, 0.055);
    --surface-solid: #12181F;
    --surface-hi:    rgba(255, 255, 255, 0.10);
    --stroke:        rgba(255, 255, 255, 0.12);
    --stroke-soft:   rgba(255, 255, 255, 0.08);
    --ink:   #F2F6FA;
    --ink-2: #B4C0CD;
    --ink-3: #8494A4;
    --shadow-s: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34);
    --shadow-m: 0 2px 6px rgba(0,0,0,.42), 0 14px 40px rgba(0,0,0,.46);
    --shadow-l: 0 4px 12px rgba(0,0,0,.46), 0 30px 80px rgba(0,0,0,.56);
    --shadow-xl:0 8px 24px rgba(0,0,0,.5), 0 50px 120px rgba(0,0,0,.62);
    --blob-a: 0.34;
    --blob-b: 0.26;
    color-scheme: dark;
  }
}

/* ---------- 2. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
  -webkit-text-size-adjust: 100%;
  /* `clip` statt `hidden`: verhindert seitliches Scrollen durch dekorative
     Überstände, bricht aber – anders als `hidden` – nicht `position: sticky`
     der Navigation. */
  overflow-x: clip;
}

/* Weicher Tag-/Nacht-Wechsel beim Scrollen.
   Bewusst OHNE `color`: Textfarben werden vererbt, und eine Transition auf
   `color` würde dazu führen, dass geerbte Farben (Überschriften, Absätze)
   der direkt gesetzten Farbe hinterherlaufen – das sieht während des
   Umschaltens fehlerhaft aus. Text springt daher sofort um, Flächen,
   Ränder und Schatten blenden weich über. */
body,
.bg-field,
.glass, .glass-hi, .float-card, .ai-stage, .privacy, .plan, .cta, .fcard,
.device-card, .chip, .pill, .btn--ghost, .stat, .faq details, .review,
.rating-badge, .stats, .nav.is-stuck, .footer, .cookie__inner, .facts {
  transition: background-color .8s var(--ease-soft),
              border-color .8s var(--ease-soft),
              box-shadow .8s var(--ease-soft);
}
.blob { transition: opacity 1.1s var(--ease-soft); }

@media (prefers-reduced-motion: reduce) {
  body, .bg-field, .blob { transition: none; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.1vw, 3.6rem); letter-spacing: -0.042em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.036em; }
h3 { font-size: clamp(1.22rem, 2.1vw, 1.6rem); letter-spacing: -0.026em; }

p { margin: 0; text-wrap: pretty; }

::selection { background: color-mix(in srgb, var(--blue) 26%, transparent); }

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}

.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;
}

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  padding: 12px 20px; border-radius: var(--r-full);
  background: var(--blue); color: #fff; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 14px; }

/* ---------- 3. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { position: relative; }

/* Jeder Abschnitt polstert oben UND unten – zwischen zwei Abschnitten
   summiert sich das also. Bei 148 px waren das fast 300 px Leerraum,
   spürbar zu viel. */
.section {
  padding-block: clamp(58px, 7.5vw, 98px);
}
.section--tight { padding-block: clamp(40px, 5vw, 66px); }

/* Abschnitte, die inhaltlich zusammengehören, rücken enger zusammen:
   Kennzahlen an den Hero, Bewertungen ans Kennzahlenband, der
   Volltext an die FAQ und der Abschluss-CTA an das Video. */
#bewertungen { padding-top: clamp(34px, 4vw, 54px); }
#ai { padding-top: clamp(44px, 5.5vw, 72px); }
#ueberblick { padding-top: clamp(10px, 1.5vw, 20px); }
#faq { padding-bottom: clamp(34px, 4vw, 52px); }
#laden { padding-top: clamp(44px, 5.5vw, 72px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 20px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.lead {
  font-size: clamp(1.06rem, 1.7vw, 1.32rem);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 62ch;
}

.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .lead { margin-top: 20px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head--center .eyebrow::before { display: none; }

/* ---------- 4. Hintergrund-Ebenen (3D-Parallax) ---------- */
.bg-field {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-deep) 0%, var(--bg) 62%);
}

/* Radiale Verläufe sind bereits weich – ein kleiner Blur genügt und spart
   erheblich GPU-Last, weil die Ebenen sonst riesig gerastert werden müssen.
   Kein `contain: paint`/`strict` hier: das würde die Weichzeichnung an der
   Elementkante abschneiden und einen sichtbaren harten Kreisrand erzeugen. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.blob--1 { width: 44vw; height: 44vw; top: -12vw;  left: -8vw;
  background: radial-gradient(circle, var(--blue) 0%, transparent 68%);  opacity: var(--blob-a); }
.blob--2 { width: 38vw; height: 38vw; top: 8vw;    right: -10vw;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 68%);  opacity: var(--blob-a); }
.blob--3 { width: 36vw; height: 36vw; top: 82vh;   left: 4vw;
  background: radial-gradient(circle, var(--green) 0%, transparent 70%); opacity: var(--blob-b); }
.blob--4 { width: 34vw; height: 34vw; top: 168vh;  right: 2vw;
  background: radial-gradient(circle, var(--orange) 0%, transparent 70%);opacity: var(--blob-b); }
.blob--5 { width: 38vw; height: 38vw; top: 258vh;  left: -6vw;
  background: radial-gradient(circle, var(--purple) 0%, transparent 72%);opacity: var(--blob-b); }

.grain {
  position: absolute; inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 5. Milchglas ---------- */
.glass {
  background: var(--surface);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-m);
}
.glass-hi {
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid var(--stroke);
}

/* ---------- 6. Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease-soft), box-shadow .35s var(--ease-soft),
              border-color .35s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom-color: var(--stroke-soft);
}

.nav__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; gap: 14px;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: var(--shadow-s); }
.brand span { font-size: 1.02rem; }

.nav__links {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
  font-size: .93rem;
}
.nav__links a {
  padding: 8px 13px; border-radius: var(--r-full);
  color: var(--ink-2); font-weight: 520;
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--ink); background: var(--surface-hi); }

.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: 10px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun  { display: none; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }

  /* Ohne die Navigationslinks fehlt auch deren `margin-left: auto` – und ohne
     das klebte der Laden-Knopf direkt an der Wortmarke statt am rechten Rand
     (gemessen: 100 px Leerraum dahinter). */
  .nav__actions { margin-left: auto; }

  /* Der Knopf trug die Maße der großen Schaltflächen: 58 px hoch in einer
     62 px hohen Leiste, also randlos von oben bis unten. In der Kopfleiste
     darf er kleiner sein – 40 px lassen die Leiste atmen und bleiben
     bequem zu treffen. */
  .nav__actions .btn {
    padding: 10px 20px;
    font-size: .92rem;
  }
}

/* ---------- 7. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px;
  border-radius: var(--r-full);
  font-size: 1rem; font-weight: 600; letter-spacing: -.015em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px) scale(1.017); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary {
  background: linear-gradient(135deg, #111 0%, #262b31 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.2), 0 14px 40px rgba(0,0,0,.18);
}
:root[data-theme="dark"] .btn--primary { background: linear-gradient(135deg, #fff 0%, #dfe6ee 100%); color: #0B1521; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary { background: linear-gradient(135deg, #fff 0%, #dfe6ee 100%); color: #0B1521; }
}
.btn--primary:hover { box-shadow: 0 6px 20px rgba(0,0,0,.24), 0 22px 60px rgba(0,0,0,.24); }
.btn--primary svg { width: 20px; height: 20px; }

.btn--ghost {
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-color: var(--stroke);
  color: var(--ink);
  box-shadow: var(--shadow-s);
}
.btn--ghost:hover { box-shadow: var(--shadow-m); }

.btn--lg { padding: 18px 34px; font-size: 1.06rem; }
.btn--sm { padding: 12px 22px; font-size: .93rem; }

/* ---------- 7b. Store-Buttons (App Store & Google Play) ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.stores--center { justify-content: center; margin-top: 32px; }

.btn-store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: 15px;
  background: #000; color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 18px 46px rgba(0,0,0,.2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
:root[data-theme="dark"] .btn-store { background: #fff; color: #000; border-color: rgba(0,0,0,.12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-store { background: #fff; color: #000; border-color: rgba(0,0,0,.12); }
}
.btn-store:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 22px rgba(0,0,0,.26), 0 28px 70px rgba(0,0,0,.28);
}
.btn-store .store-ico { width: 25px; height: 25px; flex: none; }
.btn-store .store-txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.btn-store .store-small { font-size: .64rem; letter-spacing: .03em; opacity: .82; }
.btn-store .store-big { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(38px, 5vw, 64px);
  padding-bottom: clamp(56px, 8vw, 96px);
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

.hero__copy { position: relative; z-index: 2; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--r-full);
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
  font-size: .87rem; font-weight: 560; color: var(--ink-2);
  margin-bottom: 26px;
}
.pill__dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff; font-size: .7rem;
}

.hero h1 { margin-bottom: 24px; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--blue) 0%, var(--cyan) 46%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero__sub { font-size: clamp(1.06rem, 1.65vw, 1.28rem); color: var(--ink-2); max-width: 54ch; }

.hero__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 34px;
}

/* Sterne und Testphase direkt unter dem Download-Button */
.hero__proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 20px;
  font-size: .92rem; color: var(--ink-2);
}
/* Auf schmalen Bildschirmen ist der ganze Hero zentriert. Seit die Sterne
   bei der Gesamtangabe weg sind, stand diese Zeile sonst als einzige links. */
@media (max-width: 980px) {
  .hero__proof { justify-content: center; text-align: center; }
}
.hero__proof strong { color: var(--ink); font-weight: 650; }
/* Die Testphase steht immer in einer eigenen Zeile – so entsteht beim
   Umbruch kein hängendes Trennzeichen. */
.hero__proof-trial {
  flex-basis: 100%;
  color: var(--green); font-weight: 600;
}

/* Zweispaltiges Raster statt loser Zeile: bleibt auch bei sechs Punkten
   ruhig und bricht auf schmalen Bildschirmen sauber auf eine Spalte um. */
.hero__meta {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 10px 26px;
  font-size: .88rem; color: var(--ink-2);
}
.hero__meta li { display: flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 15px; height: 15px; color: var(--green); flex: none; }

/* Bühne mit gestapelten Ebenen.

   WICHTIG – nicht `transform-style: preserve-3d` setzen:
   Damit sortiert der Browser die Kindelemente nach ihrer Lage im Raum statt
   nach z-index. Sobald das Gerät beim Überfahren mit der Maus gekippt wird,
   schneidet sich der flache Lichtschein dahinter mit der gekippten
   Geräteebene – sichtbar als harte helle Diagonale quer über dem Display.
   Für den Effekt wird preserve-3d gar nicht gebraucht: Der Parallax
   verschiebt nur in der Fläche, und die Neigung bringt ihre eigene
   perspective() mit. */
.hero__stage {
  position: relative;
  display: grid; place-items: center;
  min-height: 540px;
}

/* Kein globales will-change: translate3d befördert die Ebene ohnehin, und bei
   vielen Elementen würde will-change den Compositor unnötig belasten.
   Das Skript schreibt --px/--py, nicht transform – so lassen sich Parallax
   und Einblend-Animation auf demselben Element kombinieren. */
.layer {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.hero__glow {
  position: absolute; width: min(118%, 100%); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 34%, transparent) 0%, transparent 64%);
  filter: blur(48px);
  z-index: 0;
}

.float-card {
  position: absolute;
  padding: 13px 17px;
  border-radius: 19px;
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-l);
  z-index: 3;
  animation: bob 7s var(--ease-soft) infinite;
}
.float-card__label { font-size: .7rem; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.float-card__value { font-size: 1.28rem; font-weight: 700; letter-spacing: -.03em; margin-top: 2px; display: flex; align-items: center; gap: 7px; }
.float-card__value svg { width: 19px; height: 19px; }

.fc--rain  { top: 10%; left: -4%; animation-delay: -1.2s; }
.fc--rain .float-card__value { color: var(--blue); }
.fc--uv    { top: 38%; right: -7%; animation-delay: -3.4s; }
.fc--uv .float-card__value { color: var(--orange); }
.fc--ai    { bottom: 14%; left: -8%; animation-delay: -2.2s; max-width: 225px; }
.fc--wind  { bottom: 2%; right: -4%; animation-delay: -5s; }
.fc--wind .float-card__value { color: var(--green); }

.fc--ai .ai-mini {
  display: flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 650;
  margin-bottom: 5px;
}
.fc--ai .ai-mini span {
  background: linear-gradient(90deg, var(--orange), var(--pink), var(--purple), var(--blue), var(--cyan), var(--green));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fc--ai p { font-size: .89rem; font-weight: 560; line-height: 1.4; }

/* Tippschreib-Effekt in der AI-Karte.
   Die Karte darf beim Wechsel der Sätze nicht in der Höhe springen – sonst
   zappelt der ganze Hero. Deshalb steht hier eine feste Mindesthöhe von drei
   Zeilen; der längste Satz braucht nicht mehr. */
.ai-type {
  min-height: calc(3em * 1.4);
  margin: 0;
}
.ai-type__caret {
  display: none;
  width: 2px; height: .95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--purple), var(--blue));
}
/* Der Balken erscheint erst, wenn das Skript wirklich tippt. Ohne JavaScript
   steht der erste Satz einfach als Text da – dann wäre ein blinkender
   Cursor irritierend. */
.ai-type.is-typing .ai-type__caret {
  display: inline-block;
  animation: caret-blink 1s steps(1, end) infinite;
}
@keyframes caret-blink {
  0%, 49%   { opacity: 1 }
  50%, 100% { opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .ai-type.is-typing .ai-type__caret { animation: none; opacity: 1; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-11px) }
}

/* ---------- 9. Geräte-Rahmen ---------- */
.device {
  position: relative; z-index: 2;
  width: min(288px, 74vw);
  padding: 5px;                 /* schmaler Gehäuserand, wie bei aktuellen iPhones */
  /* Radius als eigene Größe, damit er mit der Breite mitwandert: Ein echtes
     iPhone hat etwa ein Sechstel der Breite als Eckenradius. Fest 48 px sahen
     auf dem schmalen Handy-Layout aus wie ein Stück Seife. */
  --r: 48px;
  border-radius: var(--r);
  background: linear-gradient(155deg, #4a4f57 0%, #16191d 26%, #0d1013 60%, #3a3f47 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    var(--shadow-xl);
}
.device__screen {
  position: relative;
  border-radius: calc(var(--r) - 5px);
  overflow: hidden;
  background: #000;
  aspect-ratio: 720 / 1565;
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Die Dynamic Island wächst mit dem Gerät mit – über dieselbe Größe wie der
   Eckenradius. Vorher waren Höhe und Abstand fest auf 22 und 11 px, was auf
   dem schmalen Handy-Layout viel zu wuchtig aussah: Auf einem 188 px breiten
   Gerät nahm sie anteilig zwei Drittel mehr Platz ein als auf dem Desktop.
   Die Faktoren sind so gewählt, dass die Desktop-Maße erhalten bleiben. */
.device__island {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--r) * 0.23);
  width: 30%;
  height: calc(var(--r) * 0.46);
  border-radius: var(--r-full);
  background: #000; z-index: 2;
}


/* Apple Watch */
.watch {
  position: relative;
  width: min(196px, 52vw);
  padding: 5px;
  border-radius: 50px;
  background: linear-gradient(150deg, #6a6f78 0%, #262a30 30%, #14171b 62%, #4d525a 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--shadow-l);
}
.watch::after {
  content: ""; position: absolute; right: -3px; top: 30%;
  width: 5px; height: 40px; border-radius: 3px;
  background: linear-gradient(90deg, #3b4048, #7a808a);
}
.watch__screen {
  border-radius: 45px; overflow: hidden; background: #000;
  aspect-ratio: 416 / 496;
}
.watch__screen img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 10. Kennzahlen-Band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--stroke-soft);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-m);
}
.stat {
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  padding: 26px 20px;
  text-align: center;
}
.stat__num {
  /* Feste Ziffernbreite: sonst springt die Zahl beim Hochzählen in der Breite */
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 3.1vw, 2.5rem); font-weight: 700; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1.1;
}
.stat--g .stat__num { background: linear-gradient(135deg, var(--green), var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.stat--o .stat__num { background: linear-gradient(135deg, var(--orange), var(--pink)); -webkit-background-clip: text; background-clip: text; }
.stat--p .stat__num { background: linear-gradient(135deg, var(--purple), var(--blue)); -webkit-background-clip: text; background-clip: text; }
.stat__label { font-size: .84rem; color: var(--ink-3); margin-top: 6px; font-weight: 520; }

/* ---------- 11. KI-Abschnitt ---------- */
.ai-hero { text-align: center; }
.ai-wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 700; letter-spacing: -.038em;
}
.ai-wordmark .rainbow {
  background: linear-gradient(96deg, var(--orange) 0%, var(--pink) 20%, var(--purple) 38%,
              var(--blue) 58%, var(--cyan) 76%, var(--green) 90%, var(--orange) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: rainbow-pan 9s linear infinite;
}
@keyframes rainbow-pan { to { background-position: 220% 0; } }
.ai-wordmark .spark { font-size: .82em; filter: drop-shadow(0 2px 8px rgba(233,30,99,.4)); }

.ai-sub {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 620; letter-spacing: -.026em;
  color: var(--ink-2);
  margin-bottom: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-switch__thumb { background: rgba(255,255,255,.14); }
}

.ai-stage {
  position: relative;
  margin: 44px auto 0;
  max-width: 720px;
  padding: clamp(28px, 4.4vw, 46px);
  border-radius: var(--r-xl);
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-l);
  overflow: hidden;
  transition: box-shadow .5s var(--ease);
}
.ai-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  opacity: .1;
  background: linear-gradient(120deg, var(--blue), var(--cyan), var(--green));
  transition: opacity .5s var(--ease-soft), background .5s var(--ease-soft);
}
.ai-stage[data-mode="spicy"]::before {
  background: linear-gradient(120deg, var(--pink), var(--purple), var(--red));
  opacity: .14;
}
.ai-stage > * { position: relative; z-index: 1; }

.ai-stage__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 640;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--stroke);
  color: var(--ink-2);
  margin-bottom: 22px;
}
.ai-quote {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 620; letter-spacing: -.03em; line-height: 1.3;
  /* Feste Mindesthöhe: Die Sätze sind unterschiedlich lang. Ohne sie würde
     die Karte bei jedem Wechsel in der Höhe springen. */
  min-height: 3.9em;
  display: flex; align-items: center; justify-content: center;
}
.ai-quote__line { text-wrap: balance; }
.ai-stage__foot { font-size: .88rem; color: var(--ink-3); margin-top: 20px; }


/* ---------- 11b. Video (Zwei-Klick-Lösung) ---------- */
.video {
  position: relative;
  max-width: 940px; margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-xl);
}
.video__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.video__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  border: 0; cursor: pointer;
  font: inherit; color: #fff;
  background: radial-gradient(60% 60% at 50% 50%, rgba(6,10,16,.62) 0%, rgba(6,10,16,.38) 100%);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
  transition: background .4s var(--ease);
}
.video:hover .video__poster { transform: scale(1.035); }
.video:hover .video__play { background: radial-gradient(60% 60% at 50% 50%, rgba(6,10,16,.68) 0%, rgba(6,10,16,.46) 100%); }

.video__play-icon {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 18px;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 10px 34px rgba(0,0,0,.34);
  transition: transform .4s var(--ease), background .3s;
}
.video__play-icon svg { width: 34px; height: 34px; margin-left: 4px; }
.video:hover .video__play-icon { transform: scale(1.08); background: rgba(255,255,255,.26); }

.video__play-text { font-size: 1.08rem; font-weight: 640; letter-spacing: -.02em; }
.video__play-hint { font-size: .82rem; opacity: .8; }

/* Zustand „noch kein Video hinterlegt“ */
.video.is-soon { cursor: default; }
.video.is-soon .video__play { cursor: default; }
.video.is-soon .video__play-icon { opacity: .55; }
.video.is-soon:hover .video__poster { transform: none; }
.video.is-soon:hover .video__play-icon { transform: none; background: rgba(255,255,255,.16); }

.video.is-playing { background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 12. Feature-Zeilen ---------- */
.frow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}
.frow--flip .frow__media { order: -1; }

.frow__media {
  display: grid; place-items: center;
  position: relative;
  perspective: 1300px;
}

.frow__list { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.frow__list li { display: flex; gap: 13px; align-items: flex-start; color: var(--ink-2); }
.frow__list strong { color: var(--ink); font-weight: 620; }
.tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}
.tick svg { width: 13px; height: 13px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.chip {
  padding: 8px 15px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  font-size: .87rem; font-weight: 550; color: var(--ink-2);
  box-shadow: var(--shadow-s);
}

/* Zwei gestaffelte Geräte.

   Beide liegen in derselben Rasterzelle und werden nur per transform
   auseinandergeschoben – dadurch bleiben sie exakt gleich groß proportioniert
   (720:1565 über .device__screen) und lassen sich weich tauschen.

   Zwei Fallen, die hier schon zugeschlagen haben:
   (a) Die Maus-Neigung darf `transform` NICHT überschreiben. Sie kommt über
       --tx/--ty herein und wird unten selbst angehängt. Schrieb das Skript
       direkt in `transform`, verschwand beim Überfahren die Versetzung und die
       zwei Geräte sprangen übereinander bzw. aus dem Abschnitt heraus.
   (b) `padding` am Container ist Pflicht: Ohne Luft ringsum schneidet der
       Spaltenrand die versetzten Geräte an.
   (c) Der Parallax (--px/--py) sitzt am CONTAINER, nicht an den Geräten –
       die tragen den langen Übergang für den Platztausch und würden den
       Scroll-Versatz sonst verschleppt nachziehen. Deshalb steht in den
       Regeln unten kein `translate3d(var(--px)…)`: Custom Properties erben,
       der Versatz käme sonst doppelt an. */
.frow__media--pair {
  position: relative;
  display: grid;
  place-items: center;
  /* Senkrecht viel Luft: Im Bogen der Wischbewegung wandert das vordere
     Gerät rund 70 px nach oben und das hintere ebenso weit nach unten.
     Waagerecht reicht weniger, weil die Geräte dort aneinander vorbei
     und nicht über den Rand hinaus laufen. */
  padding: clamp(56px, 6vw, 84px) clamp(16px, 3vw, 40px);
}
/* Der Platztausch hängt am Scrollstand: --s läuft von 0 (Ruhelage) bis 1
   (getauscht) und wird vom Skript gesetzt.

   Die beiden Geräte wischen aneinander vorbei – das eine von links nach
   rechts, das andere umgekehrt. Damit sie sich in der Mitte nicht exakt
   überdecken (dann sähe es aus, als würde eines verschwinden), läuft das
   vordere über einen leicht höheren, das hintere über einen leicht tieferen
   Bogen. Der Bogen ist eine Parabel: 4·s·(1−s) ist an beiden Enden 0 und in
   der Mitte 1 – reines calc(), ohne sin().

   Bewusst OHNE transform-Übergang: Hier wird interpoliert statt umgeschaltet,
   die Bewegung entsteht durch das Scrollen selbst. */
.frow__media--pair {
  --s: 0;
  --si: calc(1 - var(--s));
  --bogen: calc(4 * var(--s) * var(--si));
}
.frow__media--pair .device {
  grid-area: 1 / 1;
  width: min(250px, 56vw);
  --r: 42px;
}

/* Hinteres Gerät: von links nach rechts, über den tieferen Bogen. */
.frow__media--pair .device--back {
  z-index: 1;
  opacity: calc(.9 + .1 * var(--s));
  transform:
    translate(calc(-34% + 68% * var(--s)), calc(-3% + 10% * var(--bogen)))
    rotate(calc(-4deg + 8deg * var(--s)))
    scale(calc(.93 + .07 * var(--s)));
}

/* Vorderes Gerät: gegenläufig, über den höheren Bogen. */
.frow__media--pair .device--front {
  z-index: 2;
  opacity: calc(.9 + .1 * var(--si));
  transform:
    translate(calc(34% - 68% * var(--s)), calc(-3% - 10% * var(--bogen)))
    rotate(calc(4deg - 8deg * var(--s)))
    scale(calc(1 - .07 * var(--s)));
}

/* Der Stapel kippt in der Mitte der Bewegung. Dort stehen die Geräte durch
   den Bogen deutlich versetzt – der Wechsel fällt nicht auf. */
.frow__media--pair.is-swapped .device--back  { z-index: 2; }
.frow__media--pair.is-swapped .device--front { z-index: 1; }

@media (max-width: 620px) {
  .frow__media--pair { padding-inline: clamp(14px, 5vw, 30px); }
  .frow__media--pair .device { width: min(178px, 47vw); --r: 30px; }
  .frow__media--pair .device--back {
    transform:
      translate(calc(-30% + 60% * var(--s)), calc(-3% + 9% * var(--bogen)))
      rotate(calc(-4deg + 8deg * var(--s)))
      scale(calc(.93 + .07 * var(--s)));
  }
  .frow__media--pair .device--front {
    transform:
      translate(calc(30% - 60% * var(--s)), calc(-3% - 9% * var(--bogen)))
      rotate(calc(4deg - 8deg * var(--s)))
      scale(calc(1 - .07 * var(--s)));
  }
}

/* Ohne Bewegungswunsch bleiben die Geräte in der Ruhelage stehen. */
@media (prefers-reduced-motion: reduce) {
  .frow__media--pair { --s: 0 !important; }
}

/* Einzelne Geräte mit Maus-Neigung (Hero, Widgets): dieselbe Zusammensetzung,
   damit der Parallax-Versatz beim Überfahren nicht verloren geht.
   Bewusst über die Elternklasse eingegrenzt statt mit :not() – ein
   `:not(.frow__media--pair .device)` hätte eine höhere Spezifität als die
   Paar-Regeln oben und sie damit ausgehebelt. */
.hero__stage .device[data-tilt],
.frow__media:not(.frow__media--pair) .device[data-tilt] {
  transform:
    translate3d(var(--px, 0px), var(--py, 0px), 0)
    perspective(1300px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform .18s ease-out;
}

/* Schwebende Beschriftungen neben Geräten */
.tagfloat {
  position: absolute; z-index: 4;
  padding: 10px 15px; border-radius: 15px;
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-l);
  font-size: .85rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.tagfloat svg { width: 16px; height: 16px; }

/* ---------- 13. Geräte-Übersicht ---------- */
.devices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 18px;
}
.device-card {
  padding: 30px 26px; border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.device-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.device-card__icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 17px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 32%, transparent);
}
.device-card:nth-child(2) .device-card__icon { background: linear-gradient(135deg, var(--cyan), var(--green)); box-shadow: 0 6px 18px color-mix(in srgb, var(--cyan) 32%, transparent); }
.device-card:nth-child(3) .device-card__icon { background: linear-gradient(135deg, var(--green), var(--orange)); box-shadow: 0 6px 18px color-mix(in srgb, var(--green) 32%, transparent); }
.device-card:nth-child(4) .device-card__icon { background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 6px 18px color-mix(in srgb, var(--purple) 32%, transparent); }
.device-card__icon svg { width: 24px; height: 24px; }
.device-card h3 { margin-bottom: 9px; font-size: 1.14rem; }
.device-card p { font-size: .94rem; color: var(--ink-3); }

.watch-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(16px, 3vw, 34px);
  perspective: 1300px;
}
/* Rotation liegt auf .watch, die Parallax-Verschiebung auf dem .layer-Wrapper –
   sonst würde das Skript die Fächerung überschreiben. */
.watch-row > .layer:nth-child(1) .watch { transform: rotate(-6deg) translateY(14px); }
.watch-row > .layer:nth-child(3) .watch { transform: rotate(6deg)  translateY(14px); }

/* ---------- 13b. Faktenzeile ---------- */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 26px 0 0;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--stroke-soft);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
}
.fact { background: var(--surface); }
/* Fünf Kacheln in zwei Spalten lassen die letzte allein links stehen.
   Sie bekommt deshalb die ganze Breite. */
.facts > .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fact {
  background: var(--surface);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  padding: 18px 16px; text-align: center;
}
.fact dt {
  font-size: .72rem; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.fact dd { margin: 5px 0 0; font-size: 1rem; font-weight: 620; letter-spacing: -.02em; }

/* ---------- 14. Datenschutz ---------- */
.privacy {
  position: relative;
  padding: clamp(40px, 6vw, 76px);
  border-radius: var(--r-xl);
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-l);
  overflow: hidden;
  text-align: center;
}
.privacy::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 50% 0%, color-mix(in srgb, var(--green) 20%, transparent), transparent 70%);
}
.privacy > * { position: relative; }
.privacy__shield {
  width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 26px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #fff;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--green) 36%, transparent);
}
.privacy__shield svg { width: 34px; height: 34px; }
.privacy__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-top: 40px;
}
.privacy__item {
  padding: 22px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--stroke);
}
.privacy__item strong { display: block; font-size: 1.04rem; margin-bottom: 5px; }
.privacy__item span { font-size: .89rem; color: var(--ink-3); }

/* ---------- 15. Feature-Raster ---------- */
.fgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}
.fcard {
  padding: 28px; border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.fcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fcard__ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.fcard__ico svg { width: 20px; height: 20px; }
.fcard h3 { font-size: 1.08rem; }
.fcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fcard li {
  font-size: .945rem; color: var(--ink-2);
  padding-left: 20px; position: relative;
}
.fcard li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .35;
}

.i-blue   { background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.i-purple { background: linear-gradient(135deg, var(--purple), var(--pink)); }
.i-green  { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.i-orange { background: linear-gradient(135deg, var(--orange), var(--red)); }
.i-cyan   { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.i-pink   { background: linear-gradient(135deg, var(--pink), var(--orange)); }

/* ---------- 15b. Bewertungen ---------- */
.rating-badge {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-m);
}
.rating-badge__stars { color: #FFB300; font-size: 1.06rem; letter-spacing: .06em; }
.rating-badge__value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.rating-badge__meta { font-size: .88rem; color: var(--ink-3); }

.rating-verify {
  display: inline-block; margin-top: 6px;
  color: var(--blue); font-weight: 560;
  text-decoration: underline; text-underline-offset: 3px;
}
.rating-verify:hover { color: var(--cyan); }

/* Das Karussell ist ein echter Scroll-Bereich: Es läuft von selbst weiter –
   auch wenn die Maus darauf liegt – und lässt sich zusätzlich mit Finger,
   Trackpad oder gedrückter Maustaste durchziehen. Das Weiterlaufen übernimmt
   das Skript (Abschnitt 8), damit sich beides nicht in die Quere kommt. */
/* ---------- Bewertungskarten: Quelle, Verifiziert-Haken, TikTok ---------- */
.review__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}

/* Kleine Herkunftsmarke oben rechts auf jeder Karte */
.review__source {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--stroke-soft);
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-3);
  white-space: nowrap; flex: none;
}
.review__source svg { width: 13px; height: 13px; flex: none; }
.review__source--apple svg { color: var(--ink-2); }
.review__source--tiktok svg { color: var(--ink-2); }

/* Grüner Haken: kennzeichnet eine echte Bewertung aus dem jeweiligen Store */
.review__check {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green); color: #fff;
  flex: none;
}
.review__check svg { width: 9px; height: 9px; }

/* Kurze Bewertungen ohne Titel wirken sonst verloren */
.review__text--lead {
  font-size: 1.08rem; font-weight: 560; color: var(--ink);
  line-height: 1.45;
}

/* TikTok-Karte: breiter, damit der Wortwechsel Platz hat */
.review--tiktok { width: min(430px, 86vw); }
.review--tiktok .review__head { justify-content: flex-start; }

.tiktok__thread { display: grid; gap: 10px; flex: 1; }
.tiktok__msg {
  margin: 0; padding: 11px 15px;
  border-radius: 16px;
  display: grid; gap: 3px;
  font-size: .93rem; line-height: 1.5;
}
.tiktok__who { font-size: .74rem; font-weight: 650; color: var(--ink-3); }

.tiktok__msg--q {
  background: var(--surface);
  border: 1px solid var(--stroke-soft);
  border-bottom-left-radius: 5px;
  margin-right: 14%;
  color: var(--ink-2);
}
.tiktok__msg--a {
  margin-left: 14%;
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--green) 20%, transparent),
              color-mix(in srgb, var(--cyan) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  color: var(--ink);
  font-weight: 520;
}

@media (max-width: 560px) {
  .tiktok__msg--q { margin-right: 0; }
  .tiktok__msg--a { margin-left: 0; }
}

.marquee {
  position: relative;
  margin-top: clamp(34px, 5vw, 56px);
  padding-block: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.marquee.is-dragging .review { cursor: grabbing; }

.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; gap: 18px; padding-right: 18px; }

.review {
  flex: 0 0 auto;
  width: min(330px, 78vw);
  margin: 0;
  padding: 26px 26px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }

.review__stars { color: #FFB300; font-size: .95rem; letter-spacing: .1em; }
.review__title {
  margin: 0 0 9px; font-size: 1.04rem; font-weight: 650; letter-spacing: -.02em;
  line-height: 1.3;
}
.review__text {
  font-size: .95rem; color: var(--ink-2); line-height: 1.55;
  flex: 1;
}
.review__author {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--stroke-soft);
  font-size: .87rem; font-weight: 560; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee__track { animation: none; }
}

/* ---------- 16. Preise ---------- */
.pricing {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px; max-width: 880px; margin-inline: auto;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.6vw, 40px);
  border-radius: var(--r-xl);
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  backdrop-filter: blur(32px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-m);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.plan--featured {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  box-shadow: var(--shadow-l), 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent);
}
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #fff; font-size: .78rem; font-weight: 650; white-space: nowrap;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--green) 40%, transparent);
}
.plan h3 { font-size: 1.28rem; margin-bottom: 6px; }
.plan__desc { font-size: .93rem; color: var(--ink-3); }
/* Ohne Preisangabe: der Nutzen steht groß, der Preis kommt aus dem Store. */
.plan__headline { margin: 24px 0 6px; }
.plan__big {
  display: block;
  font-size: clamp(1.85rem, 4.2vw, 2.5rem);
  font-weight: 700; letter-spacing: -.042em; line-height: 1.05;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.plan:not(.plan--featured) .plan__big {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  -webkit-background-clip: text; background-clip: text;
}
.plan__sub { display: block; font-size: 1rem; color: var(--ink-2); font-weight: 540; margin-top: 4px; }
.plan__note { font-size: .87rem; color: var(--ink-3); font-weight: 540; }
.plan ul { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.plan__spacer { flex: 1; }
.plan__stores { display: flex; gap: 10px; margin-top: 28px; }
.plan__stores .btn { flex: 1; }

.price-foot {
  text-align: center; font-size: .87rem; color: var(--ink-3);
  max-width: 640px; margin: 34px auto 0; line-height: 1.6;
}

/* Gemeinsamer Funktionsumfang über beiden Preiskarten */
.plan-shared {
  max-width: 880px; margin: 0 auto clamp(20px, 2.6vw, 28px);
  padding: clamp(20px, 2.6vw, 26px) clamp(22px, 3vw, 30px);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
}
.plan-shared > strong {
  display: block; margin-bottom: 14px;
  font-size: .96rem; font-weight: 650; letter-spacing: -.015em;
}
.plan-shared ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 10px 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.plan-shared li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .94rem; color: var(--ink-2);
}

/* ---------- 17. FAQ ---------- */
.faq { max-width: 840px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  border-radius: var(--r-md);
  background: var(--surface);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), background .3s;
}
.faq details[open] { box-shadow: var(--shadow-m); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 21px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-size: 1.03rem; font-weight: 600; letter-spacing: -.018em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  border-radius: 2px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .34s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .faq__body { padding: 0 26px 24px; color: var(--ink-2); font-size: .98rem; line-height: 1.62; }
.faq .faq__body p + p { margin-top: 12px; }

/* ---------- 17b. Volltext-Überblick ---------- */
.longform { max-width: 860px; margin-inline: auto; }

.longform__box {
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.longform__summary {
  list-style: none; cursor: pointer;
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.longform__summary::-webkit-details-marker { display: none; }
.longform__summary strong {
  display: block; font-size: 1.06rem; font-weight: 650; letter-spacing: -.02em;
}
.longform__hint { display: block; font-size: .88rem; color: var(--ink-3); margin-top: 3px; }
.longform__summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  border-radius: 2px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .34s var(--ease);
}
.longform__box[open] .longform__summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.longform__body {
  padding: 4px 28px 30px;
  border-top: 1px solid var(--stroke-soft);
  margin-top: 4px;
}
.longform__body h3 {
  font-size: 1.08rem; margin: 26px 0 10px;
}
.longform__body p { font-size: .97rem; color: var(--ink-2); line-height: 1.68; }
.longform__body p + p { margin-top: 12px; }
.longform__body ul {
  margin: 12px 0; padding-left: 20px; display: grid; gap: 10px;
}
.longform__body li { font-size: .97rem; color: var(--ink-2); line-height: 1.62; }
.longform__body strong { color: var(--ink); font-weight: 620; }

/* ---------- 17c. CTA in der Seitenmitte ---------- */
.midcta {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 22px 30px;
  padding: clamp(24px, 3.4vw, 34px) clamp(24px, 3.6vw, 40px);
  border-radius: var(--r-xl);
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-m);
}
.midcta__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.midcta__text strong { font-size: 1.2rem; font-weight: 660; letter-spacing: -.026em; }
.midcta__text span { font-size: .94rem; color: var(--ink-3); }
.midcta__stores { margin: 0; flex-wrap: wrap; }

@media (max-width: 720px) {
  .midcta { flex-direction: column; align-items: stretch; text-align: center; }
  .midcta__stores { justify-content: center; }
}

/* ---------- 18. Abschluss-CTA ---------- */
.cta {
  position: relative; overflow: hidden;
  padding: clamp(46px, 7vw, 92px) clamp(26px, 5vw, 70px);
  border-radius: var(--r-xl);
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-l);
  text-align: center;
  contain: paint;
}
.cta::before {
  content: ""; position: absolute; inset: -22%;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--blue) 26%, transparent),
    color-mix(in srgb, var(--cyan) 26%, transparent),
    color-mix(in srgb, var(--green) 22%, transparent),
    color-mix(in srgb, var(--orange) 20%, transparent),
    color-mix(in srgb, var(--pink) 22%, transparent),
    color-mix(in srgb, var(--blue) 26%, transparent));
  filter: blur(44px); opacity: .5;
  animation: spin 26s linear infinite;
  animation-play-state: paused;
}
.cta.is-in::before { animation-play-state: running; }
@keyframes spin { to { transform: rotate(1turn); } }
.cta > * { position: relative; }
.cta__icon {
  width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 26px;
  box-shadow: var(--shadow-l);
}
.cta .btn-appstore { margin-top: 32px; }
.cta__sub { margin-top: 18px; font-size: .9rem; color: var(--ink-3); }

/* ---------- 19. Footer ---------- */
.footer {
  margin-top: clamp(60px, 8vw, 110px);
  padding-block: 56px 40px;
  border-top: 1px solid var(--stroke-soft);
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.footer__grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px 30px;
}
.footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer__brand img { width: 34px; height: 34px; border-radius: 9px; }
.footer__brand strong { font-size: 1.06rem; letter-spacing: -.02em; }
.footer p { font-size: .92rem; color: var(--ink-3); max-width: 40ch; line-height: 1.6; }
.footer h4 {
  font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
}
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer ul a { font-size: .94rem; color: var(--ink-2); transition: color .2s; }
.footer ul a:hover { color: var(--blue); }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  width: 38px; height: 38px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--surface);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--stroke);
  color: var(--ink-2);
  transition: transform .3s var(--ease), color .25s, border-color .25s, box-shadow .3s var(--ease);
}
.social a:hover {
  transform: translateY(-3px);
  color: var(--ink);
  box-shadow: var(--shadow-m);
}
.social a svg { width: 18px; height: 18px; }

.footer__bottom {
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--stroke-soft);
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--ink-3);
}
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__logo { height: 17px; width: auto; opacity: .5; }
:root[data-theme="dark"] .footer__logo--light { display: none; }
:root:not([data-theme="dark"]) .footer__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .footer__logo--light { display: none; }
  :root:not([data-theme="light"]) .footer__logo--dark  { display: block; }
}

/* ---------- 20. Rechtstexte ---------- */
.legal { max-width: 780px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.legal h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: 44px 0 14px; }
.legal h3 { font-size: 1.1rem; margin: 26px 0 10px; }
.legal p, .legal li { color: var(--ink-2); font-size: 1rem; line-height: 1.68; }
.legal p + p { margin-top: 14px; }
.legal ul { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0; }
.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legal__meta { font-size: .9rem; color: var(--ink-3); margin-top: 8px; }
.legal .glass { padding: 26px 28px; border-radius: var(--r-md); margin: 22px 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--stroke-soft); vertical-align: top; }
.legal th { font-weight: 620; color: var(--ink); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: .93rem; color: var(--ink-3); margin-bottom: 30px; }
.back-link:hover { color: var(--blue); }

/* ---------- 20b. Cookie- und Datenschutzhinweis ---------- */
.cookie {
  position: fixed; z-index: 150;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.cookie[hidden] { display: none; }

/* Der Dialog liegt fest am unteren Rand und verdeckt dort rund 180 px.
   Am Seitenende lag darunter die Lizenzangabe zu Open-Meteo – anklickbar war
   sie dann nicht mehr. Solange der Dialog steht, bekommt die Seite deshalb
   unten Platz. Die Klasse setzt das Skript. */
html.hat-hinweis body { padding-bottom: 200px; }
@media (min-width: 621px) {
  html.hat-hinweis body { padding-bottom: 150px; }
}

.cookie__inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 16px;
  width: 100%; max-width: 720px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface-hi);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-xl);
  animation: cookie-in .6s var(--ease) both;
}
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.cookie.is-out .cookie__inner { animation: cookie-out .38s var(--ease-soft) both; }
@keyframes cookie-out {
  to { opacity: 0; transform: translateY(16px) scale(.98); }
}


.cookie__body { flex: 1; min-width: 0; }
.cookie__body strong { display: block; font-size: .97rem; letter-spacing: -.02em; margin-bottom: 3px; }
.cookie__body p { font-size: .85rem; color: var(--ink-3); line-height: 1.5; }
.cookie__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.cookie__ok { flex: none; white-space: nowrap; }

@media (max-width: 620px) {
  .cookie { left: 10px; right: 10px; bottom: 10px; }
  .cookie__inner { flex-wrap: wrap; gap: 12px; padding: 15px 16px; }
  .cookie__body { flex: 1 1 100%; order: 2; }
  .cookie__ok { order: 3; width: 100%; }
}

/* ---------- 21. Scroll-Reveal ---------- */
/* Bewusst ohne will-change: die Seite hat über 70 dieser Elemente – als
   dauerhaft befördert Ebenen würden sie den Compositor überlasten. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .78s var(--ease), transform .78s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Elemente, die gleichzeitig Parallax-Ebene sind: das Hochschieben übernimmt
   der Parallax, hier wird nur noch die Deckkraft animiert. Sonst würde die
   Transition auch den Parallax-Versatz mitanimieren und hinterherhinken. */
.reveal.layer { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + 26px), 0); }
.reveal.layer.is-in { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
.reveal.layer { transition: opacity .78s var(--ease), transform .78s var(--ease); }
.reveal.layer.is-in { transition: opacity .78s var(--ease); }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }

/* Gestaffelte Einblendung: Die Kinder eines Blocks kommen nacheinander statt
   alle auf einmal. Der Blick wandert dadurch die Liste entlang, statt von
   einem Schlag erschlagen zu werden.

   Umgesetzt rein über nth-child statt über eine Zählvariable pro Element –
   die Blöcke haben höchstens acht Kinder, und so bleibt das HTML sauber. */
.stagger > * {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1) { transition-delay: .04s }
.stagger.is-in > *:nth-child(2) { transition-delay: .13s }
.stagger.is-in > *:nth-child(3) { transition-delay: .22s }
.stagger.is-in > *:nth-child(4) { transition-delay: .31s }
.stagger.is-in > *:nth-child(5) { transition-delay: .40s }
.stagger.is-in > *:nth-child(6) { transition-delay: .49s }
.stagger.is-in > *:nth-child(7) { transition-delay: .58s }
.stagger.is-in > *:nth-child(8) { transition-delay: .67s }

/* Schnellere Fassung für die Uhren und die Merkmal-Kacheln – dort wirken
   lange Abstände zäh, weil die Elemente nebeneinander stehen. */
.stagger--schnell.is-in > *:nth-child(1) { transition-delay: .03s }
.stagger--schnell.is-in > *:nth-child(2) { transition-delay: .10s }
.stagger--schnell.is-in > *:nth-child(3) { transition-delay: .17s }
.stagger--schnell.is-in > *:nth-child(4) { transition-delay: .24s }
.stagger--schnell.is-in > *:nth-child(5) { transition-delay: .31s }
.stagger--schnell.is-in > *:nth-child(6) { transition-delay: .38s }

/* Die Uhren kommen zusätzlich aus einer leichten Verkleinerung – das gibt
   das kurze „Aufblitzen“, ohne dass etwas blinkt. */
.watch-row.stagger > * { transform: translateY(15px) scale(.92); }
.watch-row.stagger.is-in > * { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- 22. Responsiv ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero__copy { display: flex; flex-direction: column; align-items: center; }
  .hero__sub, .lead { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__meta { justify-content: center; text-align: left; }
  .hero__stage { min-height: 470px; margin-top: 20px; }
  .fc--rain { left: -2%; } .fc--ai { left: -2%; max-width: 200px; }
  .fc--uv { right: -2%; } .fc--wind { right: -2%; }
  .frow { grid-template-columns: minmax(0, 1fr); }
  .frow--flip .frow__media { order: 0; }
  .frow__copy { text-align: center; }
  .frow__list li { text-align: left; }
  .chip-row { justify-content: center; }
  .section-head { margin-inline: auto; text-align: center; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero__stage { min-height: 430px; }

  /* Schmalere Bühne: Geräte kleiner, Karten bündig am Rand –
     so bleibt die Staffelung sichtbar, ohne dass etwas abgeschnitten wird. */
  .device { width: min(228px, 62vw); --r: 38px; }

  .float-card { padding: 9px 12px; border-radius: 14px; }
  .float-card__label { font-size: .64rem; }
  .float-card__value { font-size: 1rem; }
  .float-card__value svg { width: 16px; height: 16px; }
  .fc--ai p { font-size: .76rem; }

  .fc--rain { top: 3%;  left: 0; }
  .fc--uv   { top: 31%; right: 0; }
  .fc--ai   { bottom: 13%; left: 0; max-width: 152px; }
  .fc--wind { bottom: 1%; right: 0; }

  /* Feste Höhe auch hier – sonst springt der Kasten bei jedem Satz und
     schiebt alles darunter mit. Vier Zeilen fassen den längsten Satz. */
  .ai-quote { min-height: 5.2em; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }

  /* Größere Trefferflächen fürs Antippen: Text bleibt gleich, aber die
     anklickbare Fläche wächst auf rund 40 px Höhe. */
  .footer ul { gap: 2px; }
  .footer ul a,
  .footer__bottom a,
  .legal .back-link { display: inline-block; padding-block: 10px; }
  .social a { width: 44px; height: 44px; }
  .stores { width: 100%; }
  .btn-store { flex: 1 1 100%; justify-content: center; }
  .hero__meta { grid-template-columns: minmax(0, max-content); gap: 9px; }
  .plan__stores { flex-direction: column; }
  .watch-row > .layer:nth-child(1) .watch,
  .watch-row > .layer:nth-child(3) .watch { transform: none; }
}

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

/* Fallback ohne backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .glass-hi, .float-card, .ai-stage, .privacy, .plan, .cta,
  .fcard, .device-card, .chip, .pill, .btn--ghost, .stat, .faq details {
    background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  }
}

/* ---------- 20. Einwilligung und Video-Ton ---------- */

/* Ablehnen und Zustimmen stehen gleichwertig nebeneinander. Ein
   Ablehnen-Knopf, der kleiner, blasser oder eine Ebene tiefer versteckt ist,
   ist der häufigste Abmahngrund bei Einwilligungsbannern. */
.cookie__actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
}
.cookie__actions .btn { flex: 1 1 auto; min-width: 148px; justify-content: center; }
.cookie__inner { align-items: flex-start; }

@media (max-width: 620px) {
  .cookie__actions .btn { flex: 1 1 100%; }
}

/* Ton-Umschalter über dem laufenden Video */
.video__sound {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: var(--r-full);
  background: rgba(10,14,20,.58);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #fff; font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,.36);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.video__sound:hover { background: rgba(10,14,20,.76); transform: translateY(-2px); }
.video__sound[hidden] { display: none; }
.video__sound svg { width: 18px; height: 18px; }
.video__sound .video__sound-on  { display: none; }
.video__sound.is-on .video__sound-off { display: none; }
.video__sound.is-on .video__sound-on  { display: block; }

.video.is-playing iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.video__consent {
  margin-top: 16px; text-align: center;
  font-size: .88rem; color: var(--ink-3);
}
.video__consent[hidden] { display: none; }

/* Knopf, der wie ein Link aussieht – für Aktionen im Fließtext */
.linkish {
  border: 0; background: none; padding: 0;
  font: inherit; color: var(--blue); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { text-decoration-thickness: 2px; }

/* ---------- 24. Handy: Platz sparen ----------
   Gemessen bei 375 × 812: Die Seite war 21.711 px lang, also fast 27
   Bildschirmhöhen. Der meiste verlorene Platz steckte nicht im Inhalt,
   sondern in Abständen und Polstern, die für den großen Bildschirm gedacht
   sind. Die Werte unten sind einzeln nachgemessen, nicht geschätzt. */
@media (max-width: 620px) {

  /* Abschnittsabstände: clamp() greift auf dem Handy immer den Kleinstwert,
     und der war mit 58 px für einen 375-px-Bildschirm zu groß. */
  .section { padding-block: 42px; }
  .section--tight { padding-block: 30px; }
  #bewertungen { padding-top: 28px; }
  #ai { padding-top: 34px; }
  #faq { padding-bottom: 26px; }
  #ueberblick { padding-top: 8px; padding-bottom: 30px; }

  /* Überschriftenblöcke: 235 px allein für Augenbraue + Titel + Vorspann */
  .section-head { margin-bottom: 26px; }
  .section-head .lead { margin-top: 12px; }

  /* Hero: die Store-Knöpfe standen untereinander und die Merkmalsliste
     einspaltig – zusammen 378 px für zwei Knöpfe und sechs Stichworte. */
  .btn-store { flex: 1 1 calc(50% - 6px); min-width: 0; padding-inline: 12px; }
  .btn-store .store-small { font-size: .58rem; }
  .btn-store .store-big { font-size: .92rem; }
  .hero__cta { margin-top: 24px; gap: 10px; }
  .hero__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px; margin-top: 20px; font-size: .82rem;
  }
  .hero__sub { margin-top: 14px; }

  /* Karten dichter setzen */
  .fcard { padding: 20px; }
  .fcard ul { gap: 7px; }
  .device-card { padding: 18px 16px; }
  .device-card h3 { margin-bottom: 5px; font-size: 1.05rem; }
  .device-card p { font-size: .86rem; }

  /* Vier Gerätekarten untereinander waren 908 px. Zweispaltig sind es 460. */
  .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .device-card__icon { width: 38px; height: 38px; margin-bottom: 12px; }

  /* 21 aufklappbare Fragen: jedes eingesparte Polster zählt hier 21-fach. */
  .faq summary { padding: 15px 18px; }
  .faq__body { padding: 0 18px 16px; }
  .faq { gap: 9px; }

  /* Merkmal-Plaketten liefen über fünf Zeilen um. Als eine Zeile zum Wischen
     brauchen sie ein Fünftel des Platzes – und laden zum Anfassen ein. */
  /* Waagerecht wischbare Reihe.
     Drei Dinge, die vorher störten:
     (a) scroll-snap liess die Reihe einrasten – beim freien Wischen fühlt
         sich das an, als würde man gebremst. Ist raus.
     (b) Der Schatten der Plaketten wurde vom Scrollrahmen oben und unten
         abgeschnitten. Deshalb jetzt Innenabstand statt nur seitlich.
     (c) Am Rand brach die Reihe hart ab. Eine Maske blendet sie stattdessen
         weich aus, damit sichtbar ist, dass es weitergeht. */
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -20px;
    padding: 7px 20px 11px;
    margin-top: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px,
                        #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px,
                        #000 calc(100% - 18px), transparent 100%);
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  /* Fußzeile: vier Blöcke untereinander waren 903 px. */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .footer__grid > *:first-child { grid-column: 1 / -1; }
  .footer { padding-top: 38px; padding-bottom: 28px; }
  .footer__bottom { margin-top: 26px; padding-top: 20px; font-size: .78rem; }

  /* Preise */
  .plan { padding: 24px 20px; }
  .plan-shared { padding: 20px; }
  .price-foot { margin-top: 22px; font-size: .82rem; }
  .pricing { gap: 14px; }

  /* Listenabstände in den Merkmalslisten */
  .frow__list { gap: 12px; margin-top: 22px; }
  .frow { gap: 26px; }
}

/* Ganz schmale Geräte (iPhone SE): die zwei Gerätekarten nebeneinander
   werden sonst zu eng für die Überschriften. */
@media (max-width: 360px) {
  .devices { grid-template-columns: minmax(0, 1fr); }
  .btn-store { flex: 1 1 100%; }
}

/* ---------- 25. Einwilligungsbanner auf dem Handy ----------
   Vorher 348 px hoch – 43 % des Bildschirms. Das verdeckt die halbe Seite
   und drückt auf die Zustimmungsrate, ohne rechtlich etwas zu verbessern.
   Gekürzt wurde der Text, nicht die Aussage: Wer, wozu, und beide Knöpfe
   gleichwertig – das bleibt vollständig. */
@media (max-width: 620px) {
  .cookie { left: 10px; right: 10px; bottom: 10px; }
  .cookie__inner { padding: 14px 15px; gap: 12px; border-radius: 18px; }
  .cookie__body strong { font-size: .92rem; }
  .cookie__body p { font-size: .8rem; line-height: 1.45; }
  .cookie__actions { margin-top: 12px; gap: 8px; }
  /* Nebeneinander statt untereinander – spart eine Knopfhöhe. */
  .cookie__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: .84rem; }
}

/* ---------- 26. Letzte Handy-Feinheiten ---------- */
@media (max-width: 620px) {
  /* Der gemeinsame Funktionsumfang über den Preiskarten stand einspaltig
     und brauchte 218 px für sechs kurze Zeilen. */
  .plan-shared ul {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .plan-shared li { font-size: .82rem; align-items: flex-start; }
  .price-foot { font-size: .8rem; line-height: 1.5; }
}

/* Tippflächen: mindestens 44 px, wie von Apple und den WCAG empfohlen.
   Reine Wortlinks mitten im Fließtext sind davon ausgenommen (WCAG 2.5.8
   „inline"), deshalb bleiben Open-Meteo und CC BY 4.0 im Text unverändert. */
.brand { min-height: 44px; align-items: center; }
.rating-verify { display: inline-block; padding-block: 11px; }
.linkish { padding-block: 10px; }

/* Die kleinen Knöpfe im Einwilligungsbanner und in den Preiskarten waren
   40 px hoch. Auf dem Handy sind 44 px die Untergrenze für eine sichere
   Tippfläche – gerade beim Ablehnen-Knopf darf es daran nicht scheitern. */
@media (max-width: 620px) {
  .btn--sm { min-height: 46px; }
  .linkish { padding-block: 11px; }
}

/* Banner noch etwas kompakter: Es soll informieren, nicht die Seite verdecken.
   Der Titel ist nur noch ein kurzes Wort, deshalb braucht er auch weniger
   Gewicht und weniger Abstand nach unten. */
.cookie__inner { max-width: 620px; }
.cookie__body strong { font-size: .92rem; margin-bottom: 5px; }
@media (max-width: 620px) {
  .cookie__inner { padding: 13px 14px; }
  .cookie__body strong { font-size: .88rem; margin-bottom: 3px; }
  .cookie__body p { font-size: .78rem; line-height: 1.42; }
  .cookie__actions { margin-top: 11px; }
}

/* Ausblenden des fertigen Satzes, bevor der nächste getippt wird.

   Hier bewusst NICHT --ease: Das ist eine easeOut-Kurve, die 80 % des Weges
   in den ersten Millisekunden zurücklegt. Beim Einblenden ist das genau
   richtig, beim Ausblenden sieht es aus, als würde der Text schlagartig
   verschwinden. ease-in-out verteilt die Bewegung gleichmäßig. */
.ai-quote__line {
  display: inline-block;
  transition: opacity .45s cubic-bezier(.45, 0, .55, 1),
              transform .45s cubic-bezier(.45, 0, .55, 1),
              filter .45s cubic-bezier(.45, 0, .55, 1);
  will-change: opacity, transform;
}
/* Der fertige Satz sinkt beim Ausblenden ein Stück ab und wird weich.
   Nur die Deckkraft zu ändern reichte optisch nicht: Bei einem kurzen Satz
   auf ruhigem Grund nimmt das Auge den Übergang kaum wahr und liest ihn als
   harten Schnitt. Mit Bewegung und Unschärfe ist er eindeutig eine
   Animation. */
.ai-quote.is-faded .ai-quote__line {
  opacity: 0;
  transform: translateY(9px);
  filter: blur(3px);
}
@media (prefers-reduced-motion: reduce) {
  .ai-quote__line { transition: none; }
  .ai-quote.is-faded .ai-quote__line { transform: none; filter: none; }
}

/* Die Uhren bekommen ebenfalls mehr Neigung – sie standen bisher ganz still. */
.watch-row .layer { transition: transform .18s ease-out; }

/* Tabelle in den Rechtstexten: auf dem Handy scrollbar statt gequetscht. */
.legal-table {
  width: 100%; border-collapse: collapse; margin: 18px 0 26px;
  font-size: .93rem;
}
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke);
}
.legal-table th { font-weight: 620; color: var(--ink); white-space: nowrap; }
.legal-table td { color: var(--ink-2); }
.legal-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 620px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { padding: 12px 0; border-bottom: 1px solid var(--stroke); }
  .legal-table td { border: 0; padding: 2px 0; }
}

/* ---------- 21. Zweisprachige Rechtstexte ----------
   Deutsch und Englisch stehen untereinander auf derselben Seite. Das ist bei
   Rechtstexten üblich und einfacher zu pflegen als zwei getrennte Seiten –
   eine Änderung, die nur in einer Sprache landet, fällt hier sofort auf.
   Oben springt man mit einem Klick zur jeweils anderen Fassung. */
.lang-switch {
  display: flex; gap: 8px; align-items: center;
  margin: 0 0 26px;
  font-size: .88rem;
}
.lang-switch__label { color: var(--ink-3); }
.lang-switch a {
  padding: 6px 13px; border-radius: var(--r-full);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--ink-2); font-weight: 600; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang-switch a:hover { background: var(--surface-hi); color: var(--ink); }
.lang-switch a[aria-current="true"] {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

/* Trenner zwischen den Sprachfassungen */
.lang-divider {
  margin: 54px 0 30px;
  border: 0; border-top: 1px solid var(--stroke);
  position: relative;
}
.lang-divider::after {
  content: attr(data-label);
  position: absolute; top: -.7em; left: 50%; transform: translateX(-50%);
  padding: 0 14px;
  background: var(--bg);
  color: var(--ink-3);
  font-size: .78rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
}

/* Pflichthinweis zur Herkunft der Bewertungen (§ 5b Abs. 3 UWG).
   Bewusst klein und sachlich – er soll auffindbar sein, nicht werben. */
.review-note {
  max-width: 62ch; margin: 14px auto 0;
  font-size: .82rem; line-height: 1.6; color: var(--ink-3);
}
.review-note strong { color: var(--ink-2); font-weight: 620; }

/* Grüne Plakette neben dem Banner-Titel.
   Ohne sie sah der Dialog aus wie jedes andere Cookie-Banner – also wie
   etwas, das man wegklickt. Der grüne Haken ist derselbe wie bei den
   verifizierten Bewertungen: dieselbe Bildsprache, gleiche Bedeutung.
   Der eigentliche Text bleibt unverändert. */
.cookie__badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px;
  padding: 3px 9px 3px 4px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--green) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
  color: color-mix(in srgb, var(--green) 78%, var(--ink));
  font-size: .72rem; font-weight: 650; letter-spacing: .01em;
  vertical-align: 2px;
  white-space: nowrap;
}
.cookie__badge .review__check { width: 14px; height: 14px; }
.cookie__badge .review__check svg { width: 8px; height: 8px; }

@media (max-width: 620px) {
  .cookie__badge { font-size: .68rem; margin-left: 6px; padding: 2px 8px 2px 3px; }
}