/* ═══════════════════════════════════════════════════════════════════
   Vemo Reclaim — Landing Page
   100% Vemo-DNA. Bestehende Klassen erweitert mit landing-spezifischen.
   ═══════════════════════════════════════════════════════════════════ */

/* <picture> als Layout-Transparent */
picture {
  display: contents;
}

/* ── ROOT TOKENS ───────────────────────────────────────────────── */
:root {
  --land-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --land-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --land-easing-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --land-max: 1200px;
  --land-pad: clamp(20px, 4vw, 28px);
}

/* ── BASE ──────────────────────────────────────────────────────── */
.vs-landing {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--white, #fff);
  color: var(--dark, #282f47);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* clip, nicht hidden: hidden macht die Landing zum Scroll-Container, in dem kein sticky klebt (wie body in style.css) */
}

.vs-landing * { box-sizing: border-box; }

/* ── NAV (Sticky + Blur) ──────────────────────────────────────── */
.vs-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  padding: 14px var(--land-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  margin: 0;
  transition: box-shadow 0.3s var(--land-easing);
}
.vs-nav.is-scrolled {
  box-shadow: 0 2px 16px rgba(40, 47, 71, 0.06);
}

/* ── SECTIONS BASE ─────────────────────────────────────────────── */
.vs-section {
  padding: clamp(64px, 10vw, 120px) var(--land-pad);
  position: relative;
}
.vs-section-inner {
  max-width: var(--land-max);
  margin: 0 auto;
}

.vs-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Kein Dunkelgrün (Cyrill 27.09.2026): das Markengrün ist die Pille, die Schrift ist Navy. */
  color: var(--dark, #282f47);
  background: rgba(126, 217, 87, 0.10);
  border: 1px solid rgba(126, 217, 87, 0.22);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 18px;
}

.vs-h2 {
  font-size: clamp(1.85rem, 4.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--dark, #282f47);
  margin: 0 0 14px;
}
.vs-h2 em {
  font-style: normal;
  color: var(--green-500, #7ed957);
  font-weight: 700;
}
.vs-h2 .dot { color: var(--green-500, #7ed957); }

.vs-lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--grey-600, #475569);
  max-width: 580px;
  margin: 0 0 36px;
}

/* ── HERO ──────────────────────────────────────────────────────── */
.vs-hero {
  position: relative;
  /* eine Bildschirmhoehe wie bei fora (Cyrill 03.09.), Inhalt mittig; das Kleben regelt landing-v2.css */
  min-height: calc(100svh - 64px);
  display: grid;
  align-items: center;
  /* oben kompakt (Cyrill 02.07.: «Text und Handy dürfen früher starten») */
  padding: clamp(16px, 2.5vw, 32px) var(--land-pad) clamp(72px, 10vw, 120px);
  overflow: clip;
  background:
    radial-gradient(ellipse 70% 50% at 85% 5%, rgba(126, 217, 87, 0.04), transparent 65%),
    radial-gradient(ellipse 50% 40% at 5% 95%, rgba(126, 217, 87, 0.02), transparent 65%);
}
.vs-hero-inner {
  max-width: var(--land-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 880px) {
  .vs-hero-inner { grid-template-columns: 1fr; gap: 48px; }
}

.vs-hero-text {
  max-width: 580px;
  position: relative;
  z-index: 3; /* ueber der Handy-Buehne: auf dem Handy sinkt das Handy hinter den Text */
  animation: vsHeroFadeUp 0.9s var(--land-easing) both;
}
.vs-hero h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  color: var(--dark, #282f47);
  /* Descender (g, p, q) gegen overflow-clip schützen */
  padding-bottom: 0.06em;
}
.vs-hero h1 em {
  font-style: normal;
  color: var(--green-500, #7ed957);
  font-weight: 700;
}
.vs-hero h1 .dot { color: var(--green-500, #7ed957); }

.vs-hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--grey-600, #475569);
  margin: 0 0 32px;
  max-width: 540px;
}
.vs-hero-sub strong {
  color: var(--dark, #282f47);
  font-weight: 600;
}

.vs-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

/* ── App-Store-Badges unter den Hero-Knoepfen ────────────────────────────
   Die Knopfreihe darueber hat 28 Abstand nach unten; die Badges sitzen mit
   16 darunter, damit sie als eigene Zeile lesbar bleiben und nicht an den
   Knoepfen kleben. Hoehe 44 — gross genug zum Antippen auf dem Handy
   (Apple und Google verlangen fuer ihre Badges eine Mindesthoehe von 40).  */
/* SCHLANKER (Cyrill 25.07.: „das Ganze muss schlanker aussehen").
   Vorher: Knoepfe 54 hoch, Badges 44 — zwei Zeilen mit unterschiedlichem
   Gewicht, das wirkte klobig und ungleich aufgeteilt. Jetzt beide 44 bzw. 40,
   enger beieinander: der Block ist rund ein Viertel flacher, ohne dass am
   Text darueber irgendetwas geaendert wurde.                               */
.vs-hero-text .vs-hero-cta-row { margin-bottom: 14px; gap: 24px; }
.vs-hero-text .vs-pill-cta { padding: 11px 22px; font-size: 15px; }

/* ── „Wie funktioniert's?" als Textlink statt als zweiter Knopf ──────────
   WARUM (Cyrill 25.07.: „die Darstellung ist ueberladen und unfoermig"):
   Der Knopf war weiss mit Schatten und abgerundeter Kante — und genau so
   sehen auch die zwei Store-Badges darunter aus. Drei fast identische helle
   Flaechen standen uebereinander und stritten um denselben Blick; keine
   Groessenaenderung loest das, weil das Problem die WIEDERHOLUNG der Form
   ist, nicht ihr Mass. Jetzt hat jede Ebene ihre eigene Form: gefuellter
   Knopf (handeln), Textlink (nachlesen), Badges (App holen). Die weisse
   Kachel-Optik gehoert damit allein den Badges.                           */
.vs-hero-text .vs-hero-link {
  display: inline-flex; align-items: center;
  /* `align-self` ist hier PFLICHT, nicht Kosmetik: die Knopfreihe streckt
     ihre Kinder auf Knopfhoehe (Flex-Standard `stretch`). Der Text bleibt
     dann zwar mittig, der Unterstrich klebt aber am unteren Elementrand und
     schwebt sichtbar unter der Schrift. `center` laesst das Element genau so
     hoch werden wie sein Inhalt — der Strich sitzt am Text, wo er hingehoert. */
  align-self: center;
  font-size: 15px; font-weight: 600;
  /* Ohne eigenen Zeilenabstand erbt der Link die 1.7 des Hero-Fliesstextes:
     das Element wird 28 hoch, die Schrift ist 15 — der Unterstrich schwebt
     dann rund 10 unter der Grundlinie und wirkt wie ein verirrter Strich.  */
  line-height: 1.25;
  /* KEINE eigene Farbe, keine Themen-Variable: der Link erbt die Farbe
     seiner Zeile. Die traegt im Hellmodus kraeftiges Navy (15,23,42) und im
     Dunkelmodus Hellgrau (241,245,249) — beides schon richtig, ohne dass
     hier irgendetwas doppelt gepflegt wird. Der Versuch mit
     `var(--dark, …)` fiel im Dunkelmodus auf den Rueckfallwert zurueck und
     hinterliess dunkle Schrift auf dunklem Grund. Geerbte Farbe kann das
     nicht passieren, und der Unterstrich folgt ueber `currentColor` mit.  */
  color: inherit; text-decoration: none;
  padding-bottom: 3px;
  /* Die Linie wird aus der SCHRIFTFARBE gemischt, nicht fest eingetragen.
     Ein fester Navy-Wert war im Dunkelmodus unsichtbar (Kontrast 1.03:1) —
     der Link sah dort aus wie gewoehnlicher Fliesstext. Mit `currentColor`
     folgt die Linie jeder Farbe, die der Text annimmt: Hellmodus,
     Dunkelmodus, Hover-Gruen und jedes spaetere Thema, ohne eine einzige
     zusaetzliche Regel. Die erste Zeile ist der Rueckfall fuer Browser
     ohne `color-mix` — sie zeichnet die Linie dann etwas kraeftiger,
     aber nie unsichtbar.                                                 */
  border-bottom: 1.5px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 28%, transparent);
  transition: border-color .22s ease, color .22s ease;
}
.vs-hero-text .vs-hero-link:hover {
  /* Nur die Textfarbe wechseln — die Linie zieht automatisch mit, weil sie
     aus `currentColor` gemischt wird. */
  color: var(--green-500);
  border-bottom-color: color-mix(in srgb, currentColor 55%, transparent);
}
/* Die Badge-Farben stehen als Variablen hier statt fest im SVG: eine
   weisse Kachel ist im Dunkelmodus die hellste Flaeche der ganzen Seite und
   schreit lauter als der gruene Handlungsknopf. Apple und Google geben ihre
   Badges ausdruecklich in hell UND dunkel frei — welche Fassung gilt,
   entscheidet der Untergrund, und den kennt das Thema. Eine Stelle pro
   Thema, kein Sonderfall im Markup.                                       */
.vs-hero-stores {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 28px;
  --store-flaeche: #fff;
  --store-schrift: #0F172A;
  --store-leise:   #7C8AA0;
  --store-kante:   rgba(15, 23, 42, .06);
}
body.dark-mode .vs-hero-stores {
  --store-flaeche: #10182C;
  --store-schrift: #fff;
  --store-leise:   rgba(255, 255, 255, .62);
  --store-kante:   rgba(255, 255, 255, .16);
}
.vs-store {
  display: inline-flex; height: 40px;
  border-radius: 8px; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, opacity .22s ease;
  box-shadow: 0 2px 10px rgba(15,30,60,.09), 0 0 0 1px var(--store-kante);
}
.vs-store svg { height: 100%; width: auto; display: block; }
.vs-store:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,30,60,.14), 0 0 0 1px var(--store-kante); }
.vs-store:active { transform: translateY(0); }
/* Solange kein Ziel eingetragen ist, bleibt der Zeiger neutral — der Badge
   sieht sonst klickbar aus und fuehrt ins Leere. */
.vs-store[href="#"] { cursor: default; }

@media (max-width: 760px) {
  .vs-hero-stores { gap: 8px; margin: 0 0 24px; }
  .vs-store { height: 36px; }
  .vs-hero-text .vs-pill-cta { padding: 10px 18px; font-size: 14.5px; }
  .vs-hero-text .vs-hero-link { font-size: 14.5px; }
}

/* Pill-CTA Premium (Vemo-Signatur) */
.vs-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--green-500, #7ed957);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(126, 217, 87, 0.30);
  transition: all 0.3s var(--land-easing-snap);
  position: relative;
  overflow: hidden;
}
.vs-pill-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25), transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--land-easing);
}
.vs-pill-cta:hover {
  transform: translateY(-1px);
  background: var(--green-500);
  box-shadow: 0 6px 18px rgba(126, 217, 87, 0.40);
}
.vs-pill-cta:hover::before { transform: translateX(100%); }
.vs-pill-cta:active { transform: translateY(0); }
.vs-pill-cta svg { transition: transform 0.3s var(--land-easing); }
.vs-pill-cta:hover svg { transform: translateX(3px); }

/* «Wie funktioniert's?» = Apple-Liquid-Glass (Cyrill 02.07.): Blur aufs
   Blueprint-Raster dahinter, randlos, feines Glas-Highlight oben */
.vs-pill-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 23px;
  background: rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  color: var(--dark, #282f47);
  border: none;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 12px 30px -14px rgba(15, 30, 60, 0.30),
    0 3px 10px -4px rgba(15, 30, 60, 0.12);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--land-easing-snap);
}
.vs-pill-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.75);
  color: var(--green-500);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 16px 34px -14px rgba(15, 30, 60, 0.34),
    0 4px 12px -4px rgba(15, 30, 60, 0.14);
}

@keyframes vsHeroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── HERO DEMO (Police-Pop-Sequenz mit Live-Geld zurück) ──────────── */
.vs-hero-demo {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-width: 320px;
  margin: 0 auto;
  animation: vsHeroFadeUp 1s 0.15s var(--land-easing) both;
}
.vs-demo-stage {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--grey-200, #e2e8f0);
  border-radius: 28px;
  box-shadow:
    0 32px 80px -24px rgba(40, 47, 71, 0.18),
    0 12px 32px -12px rgba(126, 217, 87, 0.18);
  overflow: hidden;
  padding: 22px 22px 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 460px;
}

/* Police-Card die rein-fliegt */

/* AI-Pulse zentriert */
@keyframes vsAiPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Findings-List */

/* Score-Reveal */

/* Demo-Replay-Button */

/* Loading-Phase */

/* Policen-Liste */

/* Foot-Hinweis */

/* ── PERKS-GRID ────────────────────────────────────────────────── */
.vs-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 880px) { .vs-perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vs-perks { grid-template-columns: 1fr; } }

.vs-perk {
  background: #fff;
  border: 1px solid var(--grey-200, #e2e8f0);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.35s var(--land-easing);
}
.vs-perk:hover {
  border-color: var(--green-300, #a8e270);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -12px rgba(126, 217, 87, 0.22);
}
.vs-perk-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--green-50, #f3fce9) 0%, rgba(126, 217, 87, 0.10) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.vs-perk h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dark, #282f47);
  margin: 0;
}
.vs-perk p {
  font-size: 0.92rem;
  color: var(--grey-600, #475569);
  line-height: 1.55;
  margin: 0;
}

/* ── HOW FOOT (Hinweis bei Wie-funktioniert's) ─────────────────── */

/* ───────────────────────────────────────────────────────────────────
   HERO DEMO v4 — Browser-Window mit klickbaren Tabs (Web-Plattform)
   ─────────────────────────────────────────────────────────────────── */

.vs-hero-demo {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-width: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  animation: vsHeroFadeUp 1s 0.15s var(--land-easing) both;
}

/* ─────────────────────────────────────────────────────────
   HERO-MOCKUP — Vemo Reclaim (Premium-Refresh, v46)
   Anti-Layout-Shift: feste Höhe via min-height auf .vs-browser.
   Brand-Grün max 5% Fläche: Auszahlen-Btn, ▲, ✓, „3"-Badge.
   ───────────────────────────────────────────────────────── */

/* App-Header — clean, neutral, ohne Live-Pill */

/* App-Body — feste Mindesthöhe verhindert jeglichen Phasen-Shift */

/* ── Phase 1: Such-Overlay ──────────────────────────────────────── */
@keyframes vsSearchRing {
  0% { transform: scale(0.92); opacity: 0.55; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes vsSearchDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Provider-Suche-Liste */
@keyframes vsSearchProvIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vsSearchSpin { to { transform: rotate(360deg); } }

/* Hero-KPI-Block — Wallet-Card-Stil */

/* Header-Row: Period-Toggle + Trend-Pill */

/* Hero-Number */

/* Action-Row */

/* Section-Head „Deine Policen 3" */

/* Policen-Liste — Stack mit absoluter Skel-Overlay (kein Shift) */

/* Policen-Listen-Wrapper sichert Höhe (3 Cards × 64px + 2×8px gap = ~208px) */

/* Skeleton-Bars (gleiche Höhe wie Cards für Anti-Shift) */
@keyframes vsSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Lücken-Hinweis (subtil orange, keine Pille mit grossem Pill-Background) */
@keyframes vsGapPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* Mobile-Adjustments */

/* ── STAT-BAR ──────────────────────────────────────────────────── */

/* ── HOW-IT-WORKS ──────────────────────────────────────────────── */

/* ── LIVE-SCORE-DEMO ───────────────────────────────────────────── */

/* Ring stabilisieren: feste Position, nicht in Layout-Flow zappelnd */

/* ── COMPARE ───────────────────────────────────────────────────── */

/* ── USE-CASES TABS ────────────────────────────────────────────── */
.vs-tabs-bar {
  display: inline-flex;
  background: var(--grey-100, #f1f5f9);
  border-radius: 100px;
  padding: 6px;
  position: relative;
  margin: 0 0 36px;
  gap: 4px;
  flex-wrap: wrap;
}
.vs-tab-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--grey-600, #475569);
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s var(--land-easing-snap);
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.vs-tab-btn:hover { color: var(--dark, #282f47); }
.vs-tab-btn.is-active {
  background: #fff;
  color: var(--dark, #282f47);
  box-shadow: 0 2px 10px rgba(40, 47, 71, 0.08);
}

/* Alle drei Tabs liegen im SELBEN Grid-Feld gestapelt -> der Panel-Container
   ist IMMER so hoch wie der grösste Tab. Ein Tab-Wechsel schaltet nur noch die
   Sichtbarkeit (Crossfade), nie die Höhe -> nichts springt mehr, egal wie viel
   Inhalt ein Szenario hat (Cyrill 02.07.: "springt alles rum beim Szenario-
   Wechsel"). Inaktive Tabs bleiben per visibility im Fluss, damit ihre Höhe
   weiter mitzählt (das alte display:none/contents war der Sprung-Grund). */
.vs-tab-panels {
  position: relative;
  display: grid;
}
.vs-tab-content {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--land-easing), visibility 0s linear 0.35s;
  pointer-events: none;
}
.vs-tab-content.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--land-easing), visibility 0s;
  pointer-events: auto;
}
@media (max-width: 880px) { .vs-tab-content { grid-template-columns: 1fr; } }
.vs-tab-text h3 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--dark, #282f47);
}
.vs-tab-text h3 em {
  font-style: normal;
  color: var(--green-500, #7ed957);
}
.vs-tab-text p {
  font-size: 1rem;
  color: var(--grey-600, #475569);
  margin: 0 0 24px;
  line-height: 1.6;
}
.vs-tab-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vs-tab-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--dark-700, #454d68);
}
.vs-tab-bullets li svg {
  color: var(--green-500);
  flex-shrink: 0;
}

/* Chat-Demo */
.vs-chat-demo {
  background: linear-gradient(160deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--grey-200, #e2e8f0);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 50px -16px rgba(40, 47, 71, 0.14);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
}
.vs-chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 88%;
  /* Ruhezustand: unsichtbar (opacity/transform ändern die Höhe NICHT -> Tab
     bleibt stabil). Die Stagger-Animation läuft erst, wenn der Tab AKTIV
     wird (Klasse .is-in per JS) — nicht schon beim Laden aller gestapelten
     Tabs (Cyrill 02.07.: "Animation soll erst losgehen, wenn man den Tab
     auswählt", eine Nachricht nach der anderen, frisch bei jedem Wechsel). */
  opacity: 0;
  transform: translateY(8px);
}
.vs-chat-msg.is-in { animation: vsChatIn 0.5s var(--land-easing) forwards; }
.vs-chat-msg.is-user {
  margin-left: auto;
  flex-direction: row-reverse;
}
.vs-chat-msg.is-in:nth-child(1) { animation-delay: 0.05s; }
.vs-chat-msg.is-in:nth-child(2) { animation-delay: 0.45s; }
.vs-chat-msg.is-in:nth-child(3) { animation-delay: 0.95s; }
.vs-chat-msg.is-in:nth-child(4) { animation-delay: 1.45s; }

@keyframes vsChatIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Reduced Motion: Nachrichten sofort da, kein Stagger */
@media (prefers-reduced-motion: reduce) {
  .vs-chat-msg { opacity: 1; transform: none; }
  .vs-chat-msg.is-in { animation: none; }
}

.vs-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--green-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.vs-chat-bubble {
  background: var(--grey-100, #f1f5f9);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 12px 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--dark, #282f47);
}
.vs-chat-msg.is-user .vs-chat-bubble {
  background: var(--green-500);
  color: #fff;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
}
.vs-chat-bubble strong { font-weight: 700; }

@keyframes vsTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── PRICING-TEASER ────────────────────────────────────────────── */
.vs-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 1080px) { .vs-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .vs-pricing-grid { grid-template-columns: 1fr; } }

/* ── TESTIMONIALS ──────────────────────────────────────────────── */
.vs-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
@media (max-width: 880px) { .vs-testimonials { grid-template-columns: 1fr; } }

/* ── LOGO-WALL ─────────────────────────────────────────────────── */

/* ── FAQ ───────────────────────────────────────────────────────── */
.vs-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 36px;
  max-width: 760px;
}
.vs-faq details {
  background: #fff;
  border: 1px solid var(--grey-200, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s var(--land-easing);
}
.vs-faq details:hover { border-color: var(--green-300, #a8e270); }
.vs-faq details[open] {
  border-color: var(--green-500, #7ed957);
  box-shadow: 0 8px 24px -8px rgba(126, 217, 87, 0.20);
}
.vs-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark, #282f47);
  user-select: none;
}
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary svg {
  color: var(--green-500);
  transition: transform 0.3s var(--land-easing);
  flex-shrink: 0;
}
.vs-faq details[open] summary svg { transform: rotate(180deg); }
.vs-faq-body {
  padding: 0 22px 18px;
  font-size: 0.95rem;
  color: var(--grey-600, #475569);
  line-height: 1.6;
}

/* ── FINAL-CTA ─────────────────────────────────────────────────── */
.vs-final-cta {
  background: linear-gradient(135deg, var(--dark, #282f47) 0%, var(--dark-700, #454d68) 100%);
  color: #fff;
  border-radius: 28px;
  padding: clamp(48px, 8vw, 80px) clamp(28px, 5vw, 60px);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.vs-final-cta::before, .vs-final-cta::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.vs-final-cta::before {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(126, 217, 87, 0.40), rgba(126, 217, 87, 0) 70%);
  top: -180px;
  right: -120px;
}
.vs-final-cta::after {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(126, 217, 87, 0.20), rgba(126, 217, 87, 0) 70%);
  bottom: -160px;
  left: -120px;
}
.vs-final-cta-inner { position: relative; z-index: 1; }
.vs-final-cta .vs-eyebrow {
  background: rgba(126, 217, 87, 0.20);
  border-color: rgba(126, 217, 87, 0.40);
  color: var(--green-300, #a8e270);
}
.vs-final-cta h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: #fff;
}
.vs-final-cta h2 em {
  font-style: normal;
  color: var(--green-300, #a8e270);
}
.vs-final-cta h2 .dot { color: var(--green-300, #a8e270); }
.vs-final-cta p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.55;
}
.vs-final-cta .vs-pill-cta {
  font-size: 1.1rem;
  padding: 18px 32px;
}

/* ── TRUST-GRID ────────────────────────────────────────────────── */

/* ── FOOTER (1:1 wie app.vemo.ch) ─────────────────────────────── */
.vs-lp-footer {
  background: var(--dark, #282f47);
  color: rgba(255, 255, 255, 0.65);
  padding: 0;
  margin-top: 0;
}
.vs-lp-footer-inner {
  max-width: var(--land-max);
  margin: 0 auto;
  padding: 60px var(--land-pad) 40px;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 48px;
}
@media (max-width: 880px) {
  .vs-lp-footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px var(--land-pad) 30px;
  }
}

/* Brand-Block */
.vs-lp-footer-brand { max-width: 360px; }
.vs-lp-footer-logo {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}
.vs-lp-footer-logo .dot { color: var(--green-500, #7ed957); }
.vs-lp-footer-brand p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin: 0 0 18px;
}
.vs-lp-footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.vs-lp-footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.25s var(--land-easing-snap);
}
.vs-lp-footer-social a:hover {
  background: var(--green-500, #7ed957);
  color: #fff;
  transform: translateY(-2px);
}
.vs-lp-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 100px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

/* Cols */
.vs-lp-footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 760px) {
  .vs-lp-footer-links { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 380px) {
  .vs-lp-footer-links { grid-template-columns: 1fr; }
}
.vs-lp-footer-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.vs-lp-footer-link {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 5px 0;
  transition: color 0.2s var(--land-easing-snap);
}
.vs-lp-footer-link:hover { color: var(--green-300, #a8e270); }

/* Bottom */
.vs-lp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px var(--land-pad);
}
.vs-lp-footer-bottom-inner {
  max-width: var(--land-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.50);
}
.vs-lp-footer-bottom-inner p { margin: 0; }
.vs-lp-footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.vs-lp-footer-legal a {
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none;
  transition: color 0.2s var(--land-easing-snap);
}
.vs-lp-footer-legal a:hover { color: var(--green-300, #a8e270); }
@media (max-width: 580px) {
  .vs-lp-footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ── STICKY MOBILE BOTTOM-CTA ──────────────────────────────────── */
.vs-mobile-bar {
  display: none;
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  padding: 12px 14px 12px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 90;
  box-shadow: 0 18px 48px -12px rgba(40, 47, 71, 0.20);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateY(120%);
  transition: transform 0.4s var(--land-easing);
}
.vs-mobile-bar.is-visible { transform: translateY(0); }
.vs-mobile-bar-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.2;
}
.vs-mobile-bar-text small {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--grey-500);
  margin-top: 2px;
}
.vs-mobile-bar .vs-pill-cta {
  padding: 10px 18px;
  font-size: 0.88rem;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .vs-mobile-bar { display: flex; }
}

/* ── REDUCED MOTION ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── TINY UTILITIES ────────────────────────────────────────────── */
.vs-section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.vs-section-head .vs-lead { margin-left: auto; margin-right: auto; }
.vs-section-head-left { text-align: left; }

/* Section-Backgrounds */

/* Dark Premium Section — für visuellen Hell-Dunkel-Rhythmus + Geld zurück-Rechner */

/* Geld zurück-Rechner Cards in Dark-Section */

/* ───────────────────────────────────────────────────────────────────
   TEAM-SEKTION: EINE Regel-Quelle (02.09.2026).
   Vorher lagen vier Bloecke uebereinander (Basis, «11. Dark-Mode + Mobile»,
   «5. Team-Cards 2 Spalten», «v11 aus home.css» mit 162 !important): jede
   Aenderung an der Basis war tot, weil der letzte Block gewann (gemessen
   02.09.: Rolle blieb Dunkelgruen, Foto 340 breit in 280 breiter Karte).
   Jetzt: kein !important, kein zweiter Block. Schrift: Poppins erbt von body;
   Name 600 wie die Namen der Bewertungen, Rolle in #7ED957 ohne Versalien
   (die App kennt keine), EIN Gruen auf der ganzen Karte.
   ─────────────────────────────────────────────────────────────────── */
.lp-team {
  padding: clamp(64px, 10vw, 120px) var(--land-pad);
  background: var(--white, #fff);
}
.lp-team .vs-section-inner {
  max-width: var(--land-max);
  margin: 0 auto;
}
.lp-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.lp-team-card {
  background: var(--grey-50, #f8fafc);
  border: 1px solid var(--grey-100, #f1f5f9);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1);
}
.lp-team-card:hover {
  box-shadow: 0 14px 32px -10px rgba(15, 23, 42, 0.20);
  transform: translateY(-4px);
}
/* Vier Bilder im gleichen Quadrat (Cyrill 02.09.: «Bilder ungleich, oben freier Raum»).
   Die Portraits tragen oben 11 bis 15 % Luft ueber dem Haar (800x800 bzw. 1755x1544,
   gemessen). Das Bild ist 9 % hoeher als sein Quadrat und um dieses Mass nach oben
   geschoben: bei allen vier bleibt 2 bis 6 % Luft ueber dem Haar, keines wird angeschnitten
   (15 % schnitt Diego und Arianis das Haar ab, Sichtprobe 02.09.). */
.lp-team-photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--grey-100, #f1f5f9);
  position: relative;
}
.team-img-crossfade {
  position: absolute;
  inset: 0;
}
.team-img-crossfade img {
  position: absolute;
  left: 0;
  top: -9%;
  width: 100%;
  height: 109%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(35%) contrast(1.02);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, filter 0.4s ease;
}
.lp-team-card:hover .team-img-crossfade img {
  transform: scale(1.04);
  filter: grayscale(0%) contrast(1);
}
.team-img-light { opacity: 1; }
.team-img-dark { opacity: 0; }
body.dark-mode .team-img-light { opacity: 0; }
body.dark-mode .team-img-dark { opacity: 1; }
.lp-team-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(126, 217, 87, 0.10) 0%, transparent 60%);
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 2;
}
.lp-team-card:hover .lp-team-photo-overlay { opacity: 0; }
.lp-team-info { padding: 20px; }
.lp-team-info h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--dark, #282f47);
}
.lp-team-role {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #7ED957;
  margin-bottom: 10px;
}
.lp-team-desc {
  font-size: 0.85rem;
  color: var(--grey-500, #64748b);
  line-height: 1.5;
  margin: 0 0 12px;
}
.lp-team-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-team-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(126, 217, 87, 0.14);
  border: 1px solid rgba(126, 217, 87, 0.35);
  color: var(--dark, #282f47);
}
.lp-team-exp {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--grey-400, #94a3b8);
}
.lp-team-more {
  display: block;
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #7ED957;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lp-team-card:hover .lp-team-more {
  opacity: 1;
  transform: translateY(0);
}
body.dark-mode .lp-team-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lp-team-info h3 { color: #fff; }
body.dark-mode .lp-team-desc { color: rgba(255, 255, 255, 0.65); }
body.dark-mode .lp-team-badge {
  background: rgba(126, 217, 87, 0.12);
  border-color: #334155;
  color: #b5e88b;
}
body.dark-mode .lp-team-exp { color: rgba(255, 255, 255, 0.45); }
body.dark-mode .lp-team-photo { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 1080px) {
  .lp-team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  .lp-team-grid { gap: 12px; margin-top: 28px; }
  .lp-team-card { border-radius: 14px; }
  .lp-team-info { padding: 14px; }
  .lp-team-info h3 {
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lp-team-role { font-size: 0.72rem; margin-bottom: 6px; }
  .lp-team-desc {
    font-size: 0.75rem;
    line-height: 1.45;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lp-team-meta { display: none; }
  .lp-team-more { font-size: 0.75rem; opacity: 1; transform: none; }
}

/* ── TEAM-MODAL — sauber display:none default, kein Flackern ───── */
.team-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 110000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.team-modal-overlay.is-open {
  display: flex;
}
.team-modal {
  background: #fff;
  border-radius: 20px;
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.30);
  animation: vsTeamModalIn 0.25s ease-out;
}
@keyframes vsTeamModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.team-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: none;
  background: var(--grey-100, #f1f5f9);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--dark, #282f47);
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-modal-close:hover {
  background: var(--grey-200, #e2e8f0);
  transform: rotate(90deg);
}
.team-modal-content {
  display: grid;
  grid-template-columns: 420px 1fr;
}
.team-modal-photo {
  position: relative;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  min-height: 500px;
  background: var(--grey-100, #f1f5f9);
}
.team-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.team-modal-body { padding: 40px 36px; }
.team-modal-body h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dark, #282f47);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.team-modal-role {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green-500);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 16px;
}
.team-modal-section { margin-bottom: 22px; }
.team-modal-section h4 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grey-400, #94a3b8);
  margin: 0 0 8px;
}
.team-modal-section p {
  font-size: 0.92rem;
  color: var(--dark-600, #5a6280);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
}
.team-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.team-modal-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--green-50, #f3fce9);
  color: var(--green-500);
  border: 1px solid var(--green-200, #cbf0a3);
}

@media (max-width: 760px) {
  .team-modal-content { grid-template-columns: 1fr; }
  .team-modal-photo { min-height: 280px; border-radius: 20px 20px 0 0; }
  .team-modal-body { padding: 28px 24px; }
}

/* ───────────────────────────────────────────────────────────────────
   PUBLIC HEADER (1:1 von app.vemo.ch)
   ─────────────────────────────────────────────────────────────────── */
.public-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 40px;
  height: 64px;
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.public-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}
.public-logo .logo {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--dark, #282f47);
  letter-spacing: -0.01em;
}
.public-logo .logo .dot {
  color: var(--green-500, #7ed957);
  font-weight: 700;
  margin-left: -0.05em;
}
.public-logo .logo-sub {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--grey-500, #64748b);
  letter-spacing: 0;
}

.public-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  flex: 1;
  justify-content: center;
}
.public-nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  height: 36px;
  white-space: nowrap;
  position: relative;
}
.public-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--green-500, #7ed957);
  border-radius: 2px;
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.public-nav-link:hover::after,
.public-nav-link.active::after {
  width: 60%;
  left: 20%;
}
.public-nav-link:hover { color: #1e293b; }

.public-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* nav-cta + Button-Rundungen — wie app.vemo.ch */
.public-header-actions .btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  font-size: 0.85rem !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.public-header-actions .btn-primary.nav-cta {
  background: var(--green-500, #7ed957);
  color: #fff;
  border-color: var(--green-500, #7ed957);
}
.public-header-actions .btn-primary.nav-cta:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 16px rgba(126, 217, 87, 0.30);
  background: var(--green-500);
  border-color: var(--green-500);
}
.public-header-actions .btn-outline {
  background: transparent;
  color: var(--dark, #282f47);
  border: 1.5px solid var(--grey-300, #cbd5e1);
}
.public-header-actions .btn-outline:hover {
  border-color: var(--green-500, #7ed957);
  color: var(--green-500);
  transform: translateY(-1px);
}

.public-mobile-menu {
  display: none;
  background: none;
  border: none;
  color: var(--dark, #282f47);
  padding: 4px;
  cursor: pointer;
}
.hamburger-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
}
.hamburger-icon span {
  display: block;
  height: 2px;
  background: var(--dark, #282f47);
  border-radius: 2px;
  transition: transform 0.25s ease;
}

/* Mobile Header */
@media (max-width: 768px) {
  .public-header {
    padding: 0 16px;
    height: 60px;
    flex-wrap: wrap;
  }
  .public-nav { display: none; order: 10; flex-basis: 100%; flex-direction: column; padding: 14px 0 8px; gap: 2px; border-top: 1px solid rgba(0, 0, 0, 0.06); height: auto; }
  .public-nav-link { padding: 10px 14px; height: auto; }
  .public-nav-link::after { display: none; }
  .public-header.nav-open { height: auto; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); max-height: 80vh; overflow-y: auto; }
  .public-header.nav-open .public-nav { display: flex; animation: vsNavSlideDown 0.18s ease-out; }
  @keyframes vsNavSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .public-mobile-menu { display: block; margin-left: auto; }
  .public-header-actions { display: none; }
  .public-header.nav-open .public-header-actions {
    display: flex; flex-basis: 100%; order: 11; padding: 10px 0 8px; gap: 8px; border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  .public-header.nav-open .public-header-actions .btn {
    flex: 1; justify-content: center;
  }
  html.menu-open { overflow: hidden; } /* Wurzel-overflow sperrt den Viewport, ohne body zum Scroll-Container zu machen */
}

/* alte vs-nav-Klassen ausblenden — sie sind durch .public-header ersetzt */
.vs-landing > .vs-nav { display: none !important; }

/* ───────────────────────────────────────────────────────────────────
   GOOGLE-REVIEW TESTIMONIALS (1:1 von app.vemo.ch)
   ─────────────────────────────────────────────────────────────────── */
.lp-testimonials {
  padding: clamp(64px, 10vw, 120px) var(--land-pad);
  background: var(--grey-50, #f8fafc);
}
.lp-testimonials .vs-section-inner {
  max-width: var(--land-max);
  margin: 0 auto;
}
.lp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 980px) { .lp-testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lp-testimonials-grid { grid-template-columns: 1fr; } }

.lp-testimonial-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--grey-200, #e2e8f0);
  border-radius: 16px;
  padding: 22px;
  transition: transform 0.35s var(--land-easing), box-shadow 0.35s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .lp-testimonial-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.10);
    border-color: var(--green-300, #a8e270);
  }
}
.lp-testimonial-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.lp-testimonial-card-header > div:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-testimonial-card-header strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dark, #282f47);
  letter-spacing: -0.01em;
}
.lp-testimonial-card-header span {
  font-size: 0.78rem;
  color: #f59e0b;
  letter-spacing: 1px;
}
.lp-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  background: var(--grey-100, #f1f5f9);
}
.lp-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-google-icon {
  flex-shrink: 0;
}
.lp-testimonial-card-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--grey-600, #475569);
}
.lp-testimonial-card-text p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Testimonials: Show-All Toggle (1:1 wie app.vemo.ch) ──────────── */
.lp-testimonial-hidden { display: none; }
.lp-testimonials-grid.show-all .lp-testimonial-hidden { display: block; }
.lp-testimonials-more .btn {
  cursor: pointer;
}

/* ── HERO-SCHICHTEN: die Farbnebel setzt hero-phone-3d.js (.rph3d-bg-shape), den Scroll schreibt
   scroll-takt.js; die Lichter (.hero-stars) sind seit 03.09.2026 weg (Cyrill: keine Punkte). ── */
.vs-hero-inner { position: relative; z-index: 1; }

/* Cyrill 2026-05-09: Sun/Moon Drehung-Animation für Dark-Mode-Toggle */
.public-darkmode-toggle {
  position: relative;
  width: 32px;
  height: 32px;
}
.public-darkmode-toggle .icon-sun,
.public-darkmode-toggle .icon-moon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  display: block !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.public-darkmode-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.public-darkmode-toggle .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
  pointer-events: none;
}
body.dark-mode .public-darkmode-toggle .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0);
  pointer-events: none;
}
body.dark-mode .public-darkmode-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  pointer-events: auto;
}
/* ============================================================
   DARK-MODE FIXES für Reclaim Landing-Page
   Cyrill 2026-05-11: Phase D — Reclaim Landing hat keine Dark-Mode-Coverage
   ============================================================ */

/* === Sections === */
body.dark-mode .vs-section,
body.dark-mode .vs-landing {
  background: #0f1218;
}

/* === Headlines / Text in Sections === */
/* Im dunklen Thema dieselbe deckende helle Pille mit Navy (style.css `--pille-grund`): Markengruen .12/.22 malte auf Nachtblau
   #315438 (Gegner R13, «Schritt 1», «Schritt 2 von 4»). */
body.dark-mode .vs-eyebrow {
  background: var(--pille-grund);
  border-color: var(--pille-grund);
  color: var(--dark, #282f47);
}
body.dark-mode .vs-section h2,
body.dark-mode .vs-section h3 {
  color: #fff;
}
body.dark-mode .vs-lead {
  color: rgba(255,255,255,0.65);
}

/* === Hero Demo Browser-Card === */

/* === Policy / Stat Rows in Demo === */

/* === Stats Strip === */

/* === How-it-works Step-Cards === */

/* === FAQ === */
body.dark-mode .vs-faq details {
  background: #1a2137;
  border-color: rgba(255,255,255,0.10);
}
body.dark-mode .vs-faq details:hover {
  border-color: var(--green-500);
}
body.dark-mode .vs-faq summary {
  color: #fff;
}
body.dark-mode .vs-faq-body {
  color: rgba(255,255,255,0.75);
}

/* === Nav-CTA — Liquid Glass auf dunklem Grund === */
body.dark-mode .vs-pill-cta-ghost {
  background: rgba(255,255,255,0.13);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 30px -14px rgba(0,0,0,0.6);
}
body.dark-mode .vs-pill-cta-ghost:hover {
  background: rgba(255,255,255,0.19);
  color: #fff;
}

/* === Reclaim-eigener Footer (.vs-lp-footer) === */
body.dark-mode .vs-lp-footer {
  background: #0f1218;
  border-top-color: rgba(255,255,255,0.06);
}
body.dark-mode .vs-lp-footer h4 {
  color: #fff;
}
body.dark-mode .vs-lp-footer-link,
body.dark-mode .vs-lp-footer-brand p {
  color: rgba(255,255,255,0.60);
}
body.dark-mode .vs-lp-footer-link:hover {
  color: var(--green-400, #a8e270);
}
body.dark-mode .vs-lp-footer-social a {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
}
body.dark-mode .vs-lp-footer-bottom {
  border-top-color: rgba(255,255,255,0.06);
}
body.dark-mode .vs-lp-footer-bottom p,
body.dark-mode .vs-lp-footer-legal a {
  color: rgba(255,255,255,0.45);
}

/* ===== Reclaim Dark-Mode — Inner App-Card Components (Patch v2) ===== */

/* KPI-Card (Geld zurück · 2026 → CHF 412) hatte background-image-gradient */

/* KPI Action Buttons */

/* Policy Cards (Hausrat, KTG, Zusatz) */

/* Policies header */

/* ===== Reclaim Dark-Mode — vs-perk Feature Cards (Patch v3) ===== */
body.dark-mode .vs-perk {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark-mode .vs-perk:hover {
  border-color: var(--green-500) !important;
  box-shadow: 0 18px 40px -12px rgba(126, 217, 87, 0.15) !important;
}
body.dark-mode .vs-perk h3 {
  color: #fff !important;
}
body.dark-mode .vs-perk p {
  color: rgba(255,255,255,0.65) !important;
}
body.dark-mode .vs-perk-icon {
  background: linear-gradient(135deg, rgba(126,217,87,0.15) 0%, rgba(126,217,87,0.08) 100%);
}

/* Use-Cases Tabs (Auto wechseln / Hausrat / Schadensfall) */

/* Sun/Moon Animation v2 — same as home.css */
.public-darkmode-toggle .icon-sun,
.public-darkmode-toggle .icon-moon {
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.public-darkmode-toggle .icon-moon {
  transform: rotate(-180deg) scale(0.3) !important;
  opacity: 0 !important;
}
body.dark-mode .public-darkmode-toggle .icon-sun {
  transform: rotate(180deg) scale(0.3) !important;
  opacity: 0 !important;
}
body.dark-mode .public-darkmode-toggle .icon-moon {
  transform: rotate(0deg) scale(1) !important;
  opacity: 1 !important;
}
.public-darkmode-toggle .icon-sun {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}

/* Use-Cases Tab Buttons + Chat-Demo */
body.dark-mode .vs-tab-btn {
  color: rgba(255,255,255,0.6);
}
body.dark-mode .vs-tab-btn:hover {
  color: rgba(255,255,255,0.95);
}
body.dark-mode .vs-tab-btn.is-active {
  background: rgba(126,217,87,0.15) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3) !important;
}
body.dark-mode .vs-chat-demo {
  background: linear-gradient(160deg, #1a2137 0%, #111729 100%) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark-mode .vs-chat-msg {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.88);
}
body.dark-mode .vs-chat-msg.is-user {
  color: #fff;
}

/* Mobile-Bar Fixes (Cyrill 2026-05-11) */
body.dark-mode .vs-mobile-bar {
  background: rgba(26, 33, 55, 0.94) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.50) !important;
}
body.dark-mode .vs-mobile-bar-text {
  color: #fff;
}
body.dark-mode .vs-mobile-bar-text small {
  color: rgba(255,255,255,0.65);
}

/* Padding-Bottom auf Mobile damit Mobile-Bar Content nicht verdeckt.
   NUR .vs-landing — 'body' stand hier auch drin und machte JEDE App-Route
   90px höher als den Viewport (Seite rausschiebbar, leerer grauer Raum
   unten, Inhalte hinter Sticky-Headern — Cyrill 2026-06-11). */
@media (max-width: 767px) {
  .vs-landing {
    padding-bottom: 90px;
  }
}

/* ============================================================
   PHASE 0 — vs-app-onboarding (Counter + Skelett-Policen)
   ============================================================ */

@keyframes vsOnbRowIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vsOnbShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes vsOnbPillIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Wenn die Onboarding-Phase vorbei ist (is-onboarding entfernt),
   den is-searching-Overlay langsam einblenden — vs-app-search z-index 10,
   vs-app-onboarding z-index 11. Wenn beide unsichtbar (opacity:0) ist
   das Dashboard sichtbar. */

/* DAS HERO-HANDY (rcm-phone-*, rcm-float-*, rcm-ios-host) STEHT NICHT MEHR HIER (09.10.2026): sein Stil liegt in
   hero-handy.css, weil das Geraet auch auf Seiten steht, die diese Datei nicht laden duerfen (Startseite). Jede Seite
   mit dem Geraet laedt hero-handy.css NACH dieser Datei. Wand: app/tests/hero-handy-aus-einer-quelle.test.mjs. */

/* ════════════════════════════════════════════════════════════════════
   CYRILL 2026-05-12 — RECLAIM MOBILE-FIXES
   Hero / Phone-Mockup / Hover-off / Hero-Orb zentriert
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO MOBILE — Handy ZUERST wie bei VIAC (Cyrill 02.07.),
   Text folgt darunter ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .vs-hero {
    padding: 12px 18px 56px;
  }
  .vs-hero-inner {
    gap: 8px;
  }
  .vs-hero-demo {
    order: -1;
  }
  .vs-hero-text {
    max-width: 100%;
  }
  .vs-hero h1 {
    font-size: clamp(1.95rem, 8vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
  }
  .vs-hero-sub {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 100%;
  }
  .vs-hero-cta-row {
    gap: 10px;
    margin-bottom: 22px;
    flex-direction: column;
    align-items: stretch;
  }
  .vs-hero-cta-row .vs-pill-cta {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.98rem;
  }
  /* Der Textlink bleibt ein Link — auf Knopfbreite gestreckt saehe er
     wieder wie ein zweiter Knopf aus, genau das soll er nicht.
     ABER: die Reihe steht hier als SPALTE, und in einer Spalte richtet
     `align-self` waagrecht aus statt senkrecht. Das `center` aus der
     Grundregel schiebt den Link damit in die Mitte, waehrend Titel, Text
     und Badges linksbuendig stehen — eine Linie zu viel. Also zurueck an
     den linken Rand, wo der ganze uebrige Hero-Text auch beginnt.       */
  .vs-hero-cta-row .vs-hero-link { align-self: flex-start; }
}

/* ── 3. PHONE-MOCKUP — kompakt zuoberst auf Mobile (VIAC-Stil) ──── */



/* ── 4. SECTION-PADDINGS MOBILE ───────────────────────────────── */
@media (max-width: 760px) {
  .vs-section {
    padding: 48px 18px;
  }
  .vs-final-cta-inner {
    padding: 32px 22px !important;
  }
  .vs-final-cta h2 {
    font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important;
    line-height: 1.18 !important;
  }
}

/* ── 5. STICKY MOBILE BAR — mehr Atem nach unten ─────────────── */
@media (max-width: 760px) {
  .vs-mobile-bar {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 11px 12px 11px 16px;
  }
}

/* ── 5b. HEADER: nur position:relative auf Button erzwingen ──────
   Damit das SVG (inset:0; margin:auto) IM Button bleibt statt
   im Header zu zentrieren. Alles andere (Größe, Padding) wie Hauptseite. */
.public-header .public-darkmode-toggle {
  position: relative !important;
}

/* ── 5b-mobile: Order so dass Sonne rechts neben Burger steht ── */
@media (max-width: 768px) {
  .public-header .public-logo { order: 1 !important; }
  .public-header .public-nav { order: 10 !important; }
  .public-header .public-header-actions { order: 11 !important; }
  .public-header .public-darkmode-toggle {
    order: 90 !important;
    margin-left: auto !important;
    margin-right: 4px !important;
  }
  .public-header .public-mobile-menu {
    order: 91 !important;
    margin-left: 0 !important;
  }
}

/* ── 5c. PHONE-MOCKUP INHALTE: Schriften kleiner damit nichts ────
   abgeschnitten wird (Hausrat..., Krankentaggeld...) ─────────── */


/* ── 6. HOVER GLOBAL DEAKTIVIEREN AUF TOUCH-GERÄTEN ───────────── */
@media (hover: none) {
  /* Tap-Highlights weg */
  a, button { -webkit-tap-highlight-color: transparent; }

  /* Alle Reclaim-Hover-Effekte stoppen — kein hängen-bleiben nach Touch */
  .vs-nav-links a:not(.vs-nav-cta):hover,
  .vs-nav-cta:hover,
  .vs-pill-cta:hover,
  .vs-pill-cta-ghost:hover,
  .vs-demo-replay:hover,
  .vs-perk:hover,
  .vs-app-more:hover,
  .vs-app-btn-primary:hover,
  .vs-app-btn-secondary:hover,
  .vs-how-card:hover,
  .vs-chip:hover,
  .vs-price-card:hover,
  .vs-price-cta:hover,
  .vs-testimonial:hover,
  .vs-logo-cell:hover,
  .vs-faq details:hover,
  .vs-trust-block:hover,
  .vs-lp-footer-legal a:hover,
  .vs-lp-footer-nav-col a:hover,
  .vs-lp-footer-social a:hover,
  .lp-team-card:hover,
  .lp-testimonial-card:hover,
  .public-nav-link:hover,
  .public-header-actions .btn-primary:hover,
  .public-header-actions .btn-secondary:hover,
  .team-modal-close:hover {
    transform: none !important;
    box-shadow: inherit;
  }

  /* Hover-Spotlights/Sweeps zurücksetzen */
  .vs-pill-cta:hover::before { transform: translateX(-100%) !important; }
  .vs-pill-cta:hover svg { transform: none !important; }

  /* Team-Photo: kein Zoom/Overlay-Trigger via :hover */
  .lp-team-card:hover .lp-team-photo img { transform: none !important; }
  .lp-team-card:hover .lp-team-photo-overlay { opacity: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   CYRILL 2026-05-12 v8 — RECLAIM-REWORK (mehrere Bereiche)
   ════════════════════════════════════════════════════════════════════ */

/* ── 7. HERO MOBILE — mehr Atem oben (Text war zu nah am Header) ── */
@media (max-width: 760px) {
  .vs-hero {
    padding: 48px 18px 64px;
  }
  .vs-hero-inner {
    gap: 40px;
  }
  .vs-hero h1 {
    margin-bottom: 18px;
  }
}

/* ── 8. PHONE-MOCKUP FRAME — dünne Bezel auch im 2D-Fallback ── */



/* ── 9. USE-CASES "Drei Situationen" — Dark-Mode Chat-Bubble + Mobile ── */
body.dark-mode .vs-chat-msg {
  background: transparent !important;
}
body.dark-mode .vs-chat-msg.is-user {
  background: transparent !important;
}
body.dark-mode .vs-chat-bubble {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .vs-chat-msg.is-user .vs-chat-bubble {
  background: var(--green-500) !important;
  color: #fff !important;
  border: 1px solid var(--green-500) !important;
}

@media (max-width: 760px) {
  .vs-tab-text h3 {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
  }
  .vs-tab-text p {
    font-size: 0.95rem !important;
  }
  .vs-chat-demo {
    padding: 16px !important;
    min-height: auto !important;
    border-radius: 18px !important;
  }
  .vs-chat-bubble {
    font-size: 0.85rem !important;
    padding: 10px 13px !important;
    line-height: 1.4 !important;
  }
  .vs-chat-msg {
    max-width: 92% !important;
    gap: 8px !important;
  }
  .vs-chat-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.78rem !important;
  }
  .vs-tabs-bar {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    padding: 5px !important;
    gap: 4px !important;
    margin-bottom: 28px !important;
  }
  .vs-tab-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    font-size: 0.92rem !important;
    border-radius: 12px !important;
    white-space: normal !important;
  }
  .vs-tab-btn.is-active {
    box-shadow: 0 1px 4px rgba(40, 47, 71, 0.10) !important;
  }
}

/* ── 10. REZENSIONEN Mobile-Padding (geht bis Rand) ───────────── */
@media (max-width: 760px) {
  .lp-testimonials {
    padding: 56px 18px !important;
  }
  .lp-testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 28px !important;
  }
  .lp-testimonial-card {
    padding: 18px !important;
    border-radius: 14px !important;
  }
  .lp-testimonial-card-text {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }
}

body.dark-mode .lp-testimonial-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .lp-testimonial-card-text,
body.dark-mode .lp-testimonial-card-text p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ════════════════════════════════════════════════════════════════════
   CYRILL 2026-05-12 v9 — RECLAIM MOBILE-POLISH (Typo-Hierarchie,
   Touch-Targets, Section-Paddings, Cards, Final-CTA)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* — TYPO-HIERARCHIE einheitlich (Hero > Section > Eyebrow) — */
  .vs-hero h1 {
    font-size: clamp(2.1rem, 8.5vw, 2.8rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
  .vs-h2,
  .vs-section h2,
  .lp-testimonials-head h2 {
    font-size: 1.65rem !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 12px !important;
  }
  .vs-final-cta h2 {
    font-size: 1.8rem !important;
    line-height: 1.15 !important;
  }
  .vs-lead,
  .vs-hero-sub {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    margin: 0 0 22px !important;
  }
  .vs-eyebrow {
    font-size: 0.72rem !important;
    padding: 5px 11px !important;
    margin: 0 0 14px !important;
    letter-spacing: 0.10em !important;
  }

  /* — SECTION-PADDING vereinheitlichen — */
  .vs-section,
  .lp-testimonials,
  .lp-team {
    padding: 56px 20px !important;
  }

  /* — TOUCH-TARGETS minimum 44px — */
  .vs-faq summary {
    padding: 20px !important;
    min-height: 44px !important;
    font-size: 0.95rem !important;
  }
  .vs-faq-body {
    padding: 0 20px 20px !important;
    font-size: 0.9rem !important;
  }
  /* — STICKY-BAR sicherer Bottom-Spacer — */
  .vs-landing { padding-bottom: 118px !important; }

  /* — STATS bei 390px besser — */

  /* — COMPARE-Cards klar differenziert — */

  /* — PRICING auf Mobile: kein verschobener Featured-Offset — */

  /* — FINAL-CTA: Button full-width — */
  .vs-final-cta { border-radius: 22px !important; }
  .vs-final-cta-inner { padding: 40px 24px !important; }
  .vs-final-cta p {
    font-size: 1rem !important;
    margin: 0 auto 26px !important;
  }
  .vs-final-cta .vs-pill-cta {
    width: 100% !important;
    justify-content: center !important;
    font-size: 1rem !important;
    padding: 16px 24px !important;
  }

  /* — HOW-STEP: kleiner damit kein Konflikt mit H3 — */

  /* — LOGO-CELLS atmen lassen — */

  /* — PERKS schmäleres Rhythmus — */
  .vs-perk {
    padding: 22px 20px !important;
    border-radius: 18px !important;
    gap: 8px !important;
  }
  .vs-perk h3 { font-size: 1.05rem !important; }
  .vs-perk p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  .vs-perk-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  /* — TRUST-Block — */

  /* — TESTIMONIALS gleiche Card-Sprache — */
}

@media (max-width: 420px) {
  /* — STATS bei iPhone SE & small: single column — */
}

/* ── 3. "Klick deine Versicherungen"-Section Mobile — Icons kleiner,
        kompakteres Layout, weniger leerer Raum ───────────────────── */
@media (max-width: 760px) {
  .vs-livescore-side h3,
  .vs-section-head-left h2 {
    text-align: left !important;
  }
}

/* ── 4. USE-CASES Tab-Chat-Demo besser sichtbar auf Mobile ────────── */
@media (max-width: 760px) {
  .vs-tab-content {
    display: none !important;
  }
  .vs-tab-content.is-active {
    display: block !important;
    animation: fadeInUp 0.4s var(--land-easing) both;
  }
  .vs-tab-panels {
    margin-top: 4px !important;
  }
  .vs-tab-text {
    margin-bottom: 18px !important;
  }
  .vs-chat-demo {
    background: var(--grey-50, #f8fafc) !important;
    border: 1px solid var(--grey-200, #e2e8f0) !important;
  }
  body.dark-mode .vs-chat-demo {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}