/* ============================================================
   FoxRide Landing Page (index.php)
   ------------------------------------------------------------
   Haupt-Landing-Page: behält das globale Site-Theme (hell/dunkel
   umschaltbar, Site-Nav/-Footer) und bringt eine eigene visuelle
   Sprache:
     - Modul-Auflistung als dunkles Signature-Band (schräge Kanten)
     - Boardcomputer-vs-iPhone Preis-Anker
     - Free-vs-Pro-Plans + FAQ-Accordion-Styling
   Plus die Gradient-Highlights auf den Headings.

   Alle Selektoren sind unter `.page-index` gescoped, damit die
   restlichen Site-Seiten unberührt bleiben. Es werden ausschließlich
   die globalen Theme-Tokens aus style.css genutzt; theme-abhängige
   Werte (Gradient bis Weiß o.ä.) werden per [data-theme] umgeschaltet.
   ============================================================ */

/* ---------- Theme-fähige Sub-Tokens ---------- */
.page-index {
    /* Heading-Gradient: hell = Brand-Blautöne (bleibt lesbar),
       dunkel = Akzent → Weiß (wie index2). */
    --i3-hl-gradient: linear-gradient(92deg, var(--primary-text) 0%, var(--primary) 70%, var(--primary-hover) 115%);
    /* Stat-Zahlen-Gradient (vertikal). */
    --i3-stat-gradient: linear-gradient(180deg, var(--text-primary) 0%, var(--primary) 135%);
    /* Pro-Card-Tint + dezenter Glow. */
    --i3-pro-tint: linear-gradient(170deg, rgba(var(--primary-rgb), 0.07) 0%, var(--card-bg) 55%);
    --i3-pro-glow: 0 0 0 1px rgba(var(--primary-rgb), 0.12), var(--shadow-lg);
    --i3-line-accent: rgba(var(--primary-rgb), 0.3);
    /* Frosted-Glass nur noch für die Badges (gleiche Sprache wie die Site-Nav). */
    --i3-glass-blur: blur(14px) saturate(140%);
    --i3-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .page-index,
.page-index[data-theme="dark"] {
    --i3-hl-gradient: linear-gradient(92deg, var(--primary) 0%, #8fdcff 55%, #ffffff 120%);
    --i3-stat-gradient: linear-gradient(180deg, #ffffff 0%, var(--primary) 130%);
    --i3-pro-tint: linear-gradient(170deg, rgba(var(--primary-rgb), 0.10) 0%, var(--card-bg) 55%);
    --i3-pro-glow: 0 0 0 1px rgba(var(--primary-rgb), 0.14), var(--shadow-xl), 0 0 56px rgba(var(--primary-rgb), 0.10);
    --i3-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ============================================================
   Site-Nav als Frosted-Glass (Glass-Effekt aus index2 .lp-nav).
   Wie die klassische Site-Nav: oben über dem Hero transparent, der
   Glass-Backdrop erscheint erst beim Scrollen (.scrolled). Die weißen
   Hero-Link-Farben kommen dann aus style.css (.page-home .nav:not(.scrolled)).
   Theme-aware: hell + dunkel.
   ============================================================ */
.page-index .nav.scrolled {
    background: rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .page-index .nav.scrolled {
    background: rgba(9, 13, 21, 0.66);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Gescrollt: Akzent-Rahmen + dezenter Glow (analog .lp-nav-scrolled) */
.page-index .nav.scrolled {
    border-color: var(--i3-line-accent);
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.12), 0 0 32px rgba(var(--primary-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .page-index .nav.scrolled {
    border-color: var(--i3-line-accent);
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.5), 0 0 32px rgba(var(--primary-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Hinweis: Im nicht-gescrollten Zustand ist die Nav transparent über dem
   Hero, die weißen Link-/Logo-Farben kommen aus style.css
   (.page-home .nav:not(.scrolled) ...). Kein Override nötig. */

/* ---------- Heading-Gradient-Highlight ---------- */
.page-index .i3-hl {
    /* background-image (nicht background-Shorthand): Shorthand würde background-clip
       auf border-box resetten, falls ein Minifier die Deklarationen umordnet */
    background-image: var(--i3-hl-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-index .i3-hl { color: var(--primary-text); }
}

/* ---------- Eyebrow-Label mit Tacho-Strich ---------- */
.page-index .i3-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-text);
}

[data-theme="dark"] .page-index .i3-label { color: var(--primary); }

.page-index .i3-label::before {
    content: '';
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    border-radius: 1px;
}

/* ---------- Checklist (Dashboards + Plans) ---------- */
.page-index .i3-checklist {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.page-index .i3-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.page-index .i3-checklist li svg {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 4px;
}

/* ============================================================
   Modul-Auflistung (#features) als Signature-Band, Look wie index2
   (diagonale Speedlines + Akzent-Glow). THEME-AWARE: hell im Light-Mode
   (fügt sich ins Theme ein), tiefes Navy nur im Dark-Mode.
   ============================================================ */
.page-index #features {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Light: heller Block mit dezentem Akzent-Wash am unteren Rand. */
    background: linear-gradient(180deg, var(--background-alt) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    /* Schräge Kanten oben/unten wie index2 .lp-dash, extra Padding,
       damit der Diagonal-Schnitt keinen Inhalt abschneidet. */
    clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
    /* Überlappt die vorige Section (why-foxride), sonst zeigt das Dreieck
       über der Schräge den Seiten-Hintergrund (sichtbare Lücke). */
    margin-top: -4vw;
    padding-top: calc(var(--space-3xl) + 4vw);
    padding-bottom: calc(var(--space-3xl) + 4vw);
}

/* Dark-Mode: tiefes Navy-Signature-Band + dunkle Token (Werte wie zuvor). */
[data-theme="dark"] .page-index #features {
    background: linear-gradient(180deg, #070a10 0%, #0a0e16 50%, #0d1320 100%);
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b0;
    --border: #35354a;
}

/* Diagonale Speedlines (wie index2 .lp-speedlines) */
.page-index #features::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        115deg,
        rgba(var(--primary-rgb), 0.05) 0px,
        rgba(var(--primary-rgb), 0.05) 1px,
        transparent 1px,
        transparent 110px
    );
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Weicher Akzent-Glow oben rechts (wie index2 .lp-mesh) */
.page-index #features::after {
    content: '';
    position: absolute;
    top: -180px;
    right: -120px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.12) 0%, transparent 65%);
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
}

/* ============================================================
   i3-Signature-Stil für ALLE Module der Auflistung.
   Struktur in der Basis-Regel, Akzentfarbe je Modul-Variante
   (gleiche Farben wie home.css .feature-showcase.module-*).
   Layout wechselt links/rechts über .reverse.
   ============================================================ */
.page-index .i3-dash-module {
    /* Default = Dashboards-Lila; pro Modul unten überschrieben. */
    --dash-accent: #9333EA;
    --dash-accent-rgb: 147, 51, 234;
    --dash-accent-dark: #7C22CE;     /* dunklere Stufe für Button-Verlauf */
    --i3-stat-gradient: linear-gradient(180deg, var(--text-primary) 0%, var(--dash-accent) 135%);
    position: relative;
    margin-bottom: 120px;
}

[data-theme="dark"] .page-index .i3-dash-module {
    --i3-stat-gradient: linear-gradient(180deg, #ffffff 0%, var(--dash-accent) 130%);
}

/* Akzentfarbe je Modul (Werte = home.css module-* Akzente) */
.page-index .i3-dash-module.module-health     { --dash-accent: #EF4444; --dash-accent-rgb: 239, 68, 68;  --dash-accent-dark: #DC2626; }
.page-index .i3-dash-module.module-dashboards { --dash-accent: #9333EA; --dash-accent-rgb: 147, 51, 234; --dash-accent-dark: #7C22CE; }
.page-index .i3-dash-module.module-sensors    { --dash-accent: #6366F1; --dash-accent-rgb: 99, 102, 241; --dash-accent-dark: #4F46E5; }
.page-index .i3-dash-module.module-routes     { --dash-accent: #10B981; --dash-accent-rgb: 16, 185, 129; --dash-accent-dark: #059669; }
.page-index .i3-dash-module.module-bikes      { --dash-accent: #EC4899; --dash-accent-rgb: 236, 72, 153; --dash-accent-dark: #DB2777; }
.page-index .i3-dash-module.module-ghost      { --dash-accent: #06B6D4; --dash-accent-rgb: 6, 182, 212; --dash-accent-dark: #0891B2; }

/* Akzent-Glow hinter dem Modul (analog .feature-showcase.module-*::before) */
.page-index .i3-dash-module::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    top: -300px;
    right: 10%;
    background: radial-gradient(circle, rgba(var(--dash-accent-rgb), 0.12) 0%, rgba(var(--dash-accent-rgb), 0.04) 40%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(50px);
}
/* Bei reverse den Glow auf die andere Seite spiegeln */
.page-index .i3-dash-module.reverse::before { right: auto; left: 10%; }

/* Layout links/rechts wechseln: rtl dreht die Grid-Spalten, Inhalt bleibt ltr */
.page-index .i3-dash-module.reverse .i3-dash-inner { direction: rtl; }
.page-index .i3-dash-module.reverse .i3-dash-inner > * { direction: ltr; }

/* Badge als Glass (wie Navbar), akzent-getönt für die Modul-Farbe */
.page-index .i3-dash-module .feature-badge {
    background: rgba(var(--dash-accent-rgb), 0.14);
    backdrop-filter: var(--i3-glass-blur);
    -webkit-backdrop-filter: var(--i3-glass-blur);
    border: 1px solid rgba(var(--dash-accent-rgb), 0.34);
    box-shadow: var(--i3-glass-inset);
    color: var(--dash-accent);
}

/* Feature-Liste (Titel + Beschreibung) mit Atemraum im i3-Copy-Block */
.page-index .i3-dash-module .feature-list { margin: 24px 0 30px; }
.page-index .i3-dash-module .feature-list li { margin-bottom: 28px; }
.page-index .i3-dash-module .feature-list li:last-child { margin-bottom: 0; }

/* Farbige Checkmarks (feature-check Badge) in Akzentfarbe */
.page-index .i3-dash-module .i3-checklist li { align-items: center; gap: 14px; }
.page-index .i3-dash-module .feature-check { background: var(--dash-accent); }

/* CTA-Button in Akzentfarbe, solid (kein Glass, wirkte zu „SaaS"). */
.page-index .i3-dash-module .btn-primary {
    background: linear-gradient(135deg, var(--dash-accent) 0%, var(--dash-accent-dark) 100%);
    box-shadow: 0 4px 16px rgba(var(--dash-accent-rgb), 0.3);
}
.page-index .i3-dash-module .btn-primary:hover {
    background: linear-gradient(135deg, var(--dash-accent-dark) 0%, var(--dash-accent-dark) 100%);
    box-shadow: 0 8px 24px rgba(var(--dash-accent-rgb), 0.4);
}

/* Stats-Akzentlinie + Phone-Glow in Akzentfarbe */
.page-index .i3-dash-module .i3-stat::before {
    background: var(--dash-accent);
    box-shadow: 0 0 16px rgba(var(--dash-accent-rgb), 0.7);
}
.page-index .i3-dash-module .i3-phone-front {
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.28))
            drop-shadow(0 0 48px rgba(var(--dash-accent-rgb), 0.22));
}

.page-index .i3-dash-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}

.page-index .i3-dash-copy .section-label,
.page-index .i3-dash-copy .i3-label { margin-bottom: 14px; }

.page-index .i3-dash-copy h2 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0 0 18px;
    text-wrap: balance;
}

.page-index .i3-dash-copy p {
    font-size: var(--font-size-lg);
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 520px;
}

.page-index .i3-dash-copy .btn { margin-top: 34px; }

/* Zwei überlappende Phones */
.page-index .i3-dash-visual {
    position: relative;
    display: flex;
    justify-content: center;
    /* Phone-Seitenverhältnis 456:910 (~2x Breite). Container muss die
       absolut positionierten Phones umschliessen, sonst ragen sie in den
       Modulabstand und kleben am Badge des naechsten Moduls. */
    min-height: clamp(500px, 48vw, 660px);
}

.page-index .i3-phone {
    position: absolute;
    width: clamp(230px, 21vw, 300px);
}

.page-index .i3-phone img,
.page-index .i3-phone picture {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
}

.page-index .i3-phone-back {
    top: 6%;
    left: 2%;
    transform: rotate(-8deg);
    opacity: 0.85;
    filter: saturate(0.9);
}

.page-index .i3-phone-front {
    top: 0;
    right: 4%;
    transform: rotate(5deg);
    z-index: 2;
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.28))
            drop-shadow(0 0 48px rgba(var(--primary-rgb), 0.22));
}

/* Schwebende Badge-Chips um die Phones (Look aus index.php .floating-card,
   Akzent = Modul-Farbe via --dash-accent). Reuse der float-Keyframes aus
   home.css. Nur Desktop, auf schmalen Screens ausgeblendet. */
.page-index .i3-dash-floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
.page-index .i3-dash-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow-md);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    animation: float 6s ease-in-out infinite;
}
.page-index .i3-dash-float:nth-child(2) { animation-delay: 2s; }
.page-index .i3-dash-float:nth-child(3) { animation-delay: 4s; }
.page-index .i3-dash-float-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(var(--dash-accent-rgb), 0.15);
    color: var(--dash-accent);
    flex-shrink: 0;
}
/* Positionen rund um die beiden überlappenden Phones. Offsets bleiben
   innerhalb der Visual-Box (kein negativer Außenrand), damit auch längere
   Labels nicht über den Viewport-Rand ragen. */
.page-index .i3-dash-float:nth-child(1) { top: 6%; left: 0; }
.page-index .i3-dash-float:nth-child(2) { top: 46%; right: 0; }
.page-index .i3-dash-float:nth-child(3) { bottom: 7%; left: 4%; }

/* Health: Watch sitzt unten links → Chips ausweichen (oben + rechts) */
.page-index .module-health .i3-dash-float:nth-child(1) { top: 2%; left: 0; right: auto; bottom: auto; }
.page-index .module-health .i3-dash-float:nth-child(2) { top: 32%; right: 0; left: auto; bottom: auto; }
.page-index .module-health .i3-dash-float:nth-child(3) { bottom: 12%; right: 0; left: auto; top: auto; }

@media (max-width: 1024px) {
    .page-index .i3-dash-floats { display: none; }
}

/* Health-Visual: Apple Watch statt zweitem Phone (überlappt unten links).
   Echtes Watch-Mockup mit Gehäuse-Rahmen + Digital Crown (analog
   .watch-bezel in home.css), nicht nur der nackte Screen. */
.page-index .i3-watch {
    position: absolute;
    left: 2%;
    bottom: 6%;
    width: clamp(118px, 12vw, 170px);
    z-index: 3;
    padding: clamp(8px, 1vw, 12px);
    background: linear-gradient(145deg, #2a2a2e 0%, #1a1a1e 100%);
    border-radius: 22% / 18%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: rotate(-6deg);
    filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.34))
            drop-shadow(0 0 30px rgba(var(--dash-accent-rgb), 0.30));
}
/* Digital Crown */
.page-index .i3-watch::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 32%;
    width: 5px;
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(90deg, #3a3a3e, #18181a);
}
.page-index .i3-watch img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16% / 13%;
}

/* Monumentale Stats */
.page-index .i3-dash-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 48px);
    margin: clamp(56px, 8vw, 104px) 0 0;
}

.page-index .i3-stat {
    text-align: center;
    padding: 28px 16px 8px;
    border-top: 1px solid var(--border);
    position: relative;
}

.page-index .i3-stat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.7);
}

.page-index .i3-stat dt {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    /* background-image statt -Shorthand: siehe .i3-hl (kein background-clip-Reset bei Reorder) */
    background-image: var(--i3-stat-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-index .i3-stat dt { color: var(--primary-text); }
}

.page-index .i3-stat dd {
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ============================================================
   2. Free vs. Pro (ersetzt Pricing)
   ============================================================ */
.page-index .i3-plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: clamp(16px, 2.5vw, 28px);
    align-items: stretch;
    margin-top: clamp(40px, 5vw, 64px);
}

.page-index .i3-plan-card {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    padding: clamp(28px, 3.5vw, 44px);
}

/* Pro-Card im klassischen Gold (identisch zu /licenses .pro-bundle-license) */
.page-index .i3-plan-card-pro {
    --pro-gold: #F59E0B;
    --pro-gold-dark: #D97706;
    border-color: var(--pro-gold);
    background: linear-gradient(170deg, rgba(245, 158, 11, 0.10) 0%, var(--card-bg) 55%);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.22), var(--shadow-lg);
}

.page-index .i3-plan-card-pro .i3-checklist li svg {
    color: var(--pro-gold);
}

/* Kleiner „ab X €"-Preishinweis neben dem Plan-Titel */
.page-index .i3-plan-from {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-left: 6px;
    white-space: nowrap;
}

.page-index .i3-plan-card-pro .i3-plan-from {
    color: var(--pro-gold);
}

.page-index .i3-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.page-index .i3-plan-head h3 {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.page-index .i3-plan-tag {
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--background-alt);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.page-index .i3-plan-tag-pro {
    border-color: transparent;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #2a1800;
}

/* Web-Lizenzen-Hinweis: eigene, zentrierte Card unter den drei Plan-Spalten */
.page-index .i3-plans-note-card {
    max-width: 760px;
    margin: clamp(22px, 3vw, 34px) auto 0;
    padding: 16px 22px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--i3-line-accent);
    background: rgba(var(--primary-rgb), 0.06);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: center;
}

.page-index .i3-plans-note-card svg {
    color: var(--primary);
    vertical-align: -2px;
    margin-right: 6px;
}

.page-index .i3-plans-note-card a {
    color: var(--primary-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 4px;
}

[data-theme="dark"] .page-index .i3-plans-note-card a { color: var(--primary); }

.page-index .i3-plans-cta {
    text-align: center;
    margin-top: clamp(36px, 5vw, 56px);
}

/* ============================================================
   3. FAQ-Accordion-Styling (HTML-Struktur identisch zu index.php,
      Steuerung über bestehendes app.js → .faq-item.open)
   ============================================================ */
.page-index .faq-grid {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin: clamp(40px, 5vw, 56px) auto 0;
}

.page-index .faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    overflow: hidden;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.page-index .faq-item.open {
    border-color: var(--i3-line-accent);
    box-shadow: 0 0 32px rgba(var(--primary-rgb), 0.08);
}

.page-index .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-primary);
}

.page-index .faq-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--i3-line-accent);
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    transition: transform var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
}

.page-index .faq-item.open .faq-icon {
    transform: rotate(45deg);
    background: var(--primary);
    color: #04212f;
}

.page-index .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-slow);
}

.page-index .faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}

.page-index .faq-answer-content {
    overflow: hidden;
    padding: 0 24px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.page-index .faq-item.open .faq-answer-content {
    padding-bottom: 22px;
}

.page-index .faq-more {
    text-align: center;
    margin-top: 36px;
}

/* ============================================================
   Preis-Anker (Boardcomputer vs. iPhone), Look aus index2 .lp-price,
   theme-aware über Site-Tokens. 3-Spalten-Grid mit Gewinner-Karte.
   ============================================================ */
.page-index .i3-price-grid {
    display: grid;
    grid-template-columns: 1fr auto 2fr;   /* Computer · VS · iPhone */
    gap: clamp(12px, 2vw, 24px);
    align-items: stretch;
    margin-top: clamp(40px, 5vw, 64px);
}

/* VS-Trenner zwischen den Karten (solid Akzent + Glow) */
.page-index .i3-price-vs {
    align-self: center;
    display: grid;
    place-items: center;
    width: clamp(46px, 5vw, 64px);
    height: clamp(46px, 5vw, 64px);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: var(--shadow-sm);
    color: #fff;
    font-size: clamp(0.85rem, 1.3vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 2;
}

.page-index .i3-price-card {
    position: relative;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    padding: clamp(24px, 3vw, 36px);
    overflow: hidden;
}

/* Verlierer-Karte: dezenter roter Ton, Preis gedimmt + durchgestrichen.
   Flex-Spalte, damit das Computer-Bild die (durch die Gewinner-Karte
   gestreckte) Höhe füllt und am unteren Rand sitzt. */
.page-index .i3-price-card-lose {
    display: flex;
    flex-direction: column;
    border-color: rgba(239, 68, 68, 0.22);
    background: var(--card-bg);
}
.page-index .i3-price-card-lose .i3-price-img {
    margin-top: auto;
    align-self: center;
}
.page-index .i3-price-card-lose .i3-price-amount {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.7);
    text-decoration-thickness: 3px;
}

.page-index .i3-price-card-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.page-index .i3-price-amount {
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.page-index .i3-price-amount-win {
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    /* background-image statt -Shorthand: siehe .i3-hl (kein background-clip-Reset bei Reorder) */
    background-image: var(--i3-stat-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-index .i3-price-amount-win { color: var(--primary-text); }
}

.page-index .i3-price-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.page-index .i3-price-img {
    display: block;
    width: 130px;
    height: auto;
    margin: 24px auto 0;   /* zentriert in der Card */
    opacity: 0.5;
    filter: grayscale(60%) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}

/* Gewinner-Karte: Tint + Akzent-Border + Glow. 2 Spalten: Screenshot | Body */
.page-index .i3-price-card-win {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 2.5vw, 40px);
    align-items: center;
    border-color: var(--i3-line-accent);
    background: var(--i3-pro-tint);
    box-shadow: var(--i3-pro-glow);
    overflow: visible;   /* rotierter Screenshot + Glow dürfen atmen */
}

/* Echter App-Screenshot als visueller Beweis fürs „brillante Display" */
.page-index .i3-price-win-media {
    align-self: center;
    flex-shrink: 0;
}
.page-index .i3-price-win-media .app-screen-pic,
.page-index .i3-price-win-media img {
    display: block;
    width: clamp(140px, 14vw, 196px);
    height: auto;
    border-radius: clamp(22px, 2vw, 30px);
    transform: rotate(-4deg);
    filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.30));
}

/* „statt bis zu 749 €", unterstreicht die Ersparnis unter dem 0-€-Preis */
.page-index .i3-price-was {
    margin: -8px 0 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.page-index .i3-price-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--primary);
    color: #04212f;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* ============================================================
   Schräge Section-Übergänge (untere Hälfte), Richtung alternierend.
   Jede Section schneidet ihre OBERE Kante schräg und überlappt per
   negativem margin-top die vorige Section → saubere Diagonale ohne
   Lücke. Tilt-Richtung wechselt A/B, damit nicht alles gleich kippt.
   (Der dunkle Modul-Band #features hat seine Schräge bereits separat.)
   ============================================================ */
.page-index .why-foxride,
.page-index .testimonials,
.page-index .pricing,
.page-index .faq,
.page-index .cta {
    --tilt: 4vw;
    position: relative;
    margin-top: calc(-1 * var(--tilt));
    padding-top: calc(var(--space-3xl) + var(--tilt));
}

/* Die why-foxride (grau) überlappt den Hero per margin-top: -tilt, ihr
   Schräg-Übergang läge sonst bei 100vh - tilt und ragte schon ungescrollt
   in den Hero. Hero um den Tilt-Betrag höher machen, damit der graue
   Bereich genau am Fold sitzt und erst beim Scrollen sichtbar wird.
   Nur >900px: darunter ist der Hero gestapelt + min-height:auto (home.css). */
@media (min-width: 901px) {
    .page-index .hero.hero-fullscreen {
        min-height: calc(100vh + 4vw);
    }
}

/* Opake Hintergründe für die Überlappung: der Preis-Anker überlappt den
   Hero (header/phone), faq ist sonst transparent. */
.page-index .why-foxride { background: var(--background-alt); }
.page-index .faq { background: var(--background); }

/* A = oben links tief → rechts hoch */
.page-index .testimonials,
.page-index .faq {
    clip-path: polygon(0 var(--tilt), 100% 0, 100% 100%, 0 100%);
}
/* B = oben rechts tief → links hoch (Gegenrichtung).
   cta nur OBEN schräg (Übergang von der FAQ), Unterkante gerade, sonst
   schneidet der Diagonal-Keil in den Footer und lässt ihn abgeschnitten
   wirken. */
.page-index .why-foxride,
.page-index .pricing,
.page-index .cta {
    clip-path: polygon(0 0, 100% var(--tilt), 100% 100%, 0 100%);
}

/* ============================================================
   Responsive
   ============================================================ */
/* Drei Plan-Karten (Free · Module · Pro): unter 980px gestapelt statt gequetscht */
@media (max-width: 980px) {
    .page-index .i3-plans-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .page-index .i3-dash-inner { grid-template-columns: 1fr; }
    .page-index .i3-dash-visual { min-height: 440px; margin-top: 8px; }
    .page-index .i3-dash-stats { grid-template-columns: 1fr; gap: 8px; }
    /* Preis-Anker: Computer · VS · iPhone untereinander */
    .page-index .i3-price-grid { grid-template-columns: 1fr; justify-items: center; }
    .page-index .i3-price-card { width: 100%; }
    /* Gewinner-Karte: Screenshot über dem Body stapeln, zentriert */
    .page-index .i3-price-card-win {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        transform: none;
    }
    .page-index .i3-price-win-media .app-screen-pic,
    .page-index .i3-price-win-media img { transform: none; }
    .page-index .i3-price-card-win .i3-checklist { text-align: left; }
}

@media (max-width: 640px) {
    /* Stärkere Schräge auf Mobile (wie der dunkle Modul-Band) */
    .page-index #features {
        clip-path: polygon(0 6vw, 100% 0, 100% calc(100% - 6vw), 0 100%);
        margin-top: -6vw;
    }
    .page-index .why-foxride,
    .page-index .testimonials,
    .page-index .pricing,
    .page-index .faq,
    .page-index .cta { --tilt: 6vw; }
}

@media (prefers-reduced-motion: reduce) {
    .page-index .faq-answer { transition: none; }
}