/* fida-player.com – Startseite.
   Farben wie App-Symbol und TV-App: fast schwarzer Grund, Violett als Akzent.
   Schrift: Inter, selbst gehostet unter assets/fonts/ (Lizenz: OFL.txt) – es wird nichts von Dritten geladen. */

/* Eine Variable-Datei je Schriftraum deckt alle Stärken ab. Geladen wird nur, was die Seite braucht:
   Latein immer, „Latein erweitert“ z. B. für Türkisch, Griechisch nur auf /el/. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("/assets/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("/assets/fonts/inter-greek.woff2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Ersatzschrift mit Inter-Maßen: Beim Nachladen der Schrift springt der Text nicht. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    size-adjust: 107.12%;
    ascent-override: 90.2%;
    descent-override: 22.48%;
    line-gap-override: 0%;
}

:root {
    /* Helles Farbsystem: weißes, ganz leicht violettes Papier, dunkle Tinte, Violett nur als Akzent.
       Geräte, die kleinen Szenen und die Abschluss-Karte bleiben dunkel (siehe „Dunkle Inseln“ unten). */
    --bg: #fbf9ff;
    --bg-soft: #f4f0fd;
    --panel: rgba(255, 255, 255, 0.72);
    --panel-strong: rgba(255, 255, 255, 0.94);
    --line: rgba(76, 29, 149, 0.1);
    --line-strong: rgba(76, 29, 149, 0.18);
    --text: #1b1433;
    --muted: #433d66;
    --faint: #5a5478;
    --shade: rgba(76, 29, 149, 0.06);
    --violet-50: #ede9fe;
    --violet-300: #c4b5fd;
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    --violet-900: #4c1d95;
    --pink: #e879f9;
    --ok: #059669;
    --danger: #dc2626;
    --radius: 20px;
    --radius-sm: 12px;
    --shadow-glow: 0 30px 80px -30px rgba(124, 58, 237, 0.45);
    --shadow-card: 0 1px 0 #fff inset, 0 18px 44px -28px rgba(76, 29, 149, 0.35);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

/* Dunkle Inseln auf der hellen Seite: Fernseher, Handys, die kleinen Szenen, Abschluss-Karte und der Sprachhinweis.
   Darin gelten wieder die hellen Schriftfarben. */
.tv, .phone, .fx, .cta, .lang-suggest {
    --text: #f6f4fc;
    --muted: #d9d4ef;
    --faint: #b3acd2;
    --line: rgba(196, 181, 253, 0.14);
    --line-strong: rgba(196, 181, 253, 0.26);
    --panel: rgba(196, 181, 253, 0.07);
    --panel-strong: rgba(196, 181, 253, 0.12);
    color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 450 16px/1.65 var(--font);
    font-optical-sizing: auto;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
/* Wo es „clip“ gibt, sperrt html das seitliche Verschieben und der Body beschneidet nur. Mit „hidden“ am Body allein würde
   der Body zum Scroll-Container, sobald das Menü die Seite sperrt (html.menu-open): Er nähme die Kopfzeile (sticky) mit,
   und das Menü läge außerhalb des Bildes, sobald man gescrollt hat. Ältere Browser behalten das bisherige Verhalten. */
@supports (overflow: clip) {
    html { overflow-x: hidden; }
    body { overflow-x: clip; }
}

::selection { background: rgba(139, 92, 246, 0.28); color: var(--text); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 650; }
code, .mono { font-family: var(--mono); }

:focus-visible {
    outline: 2px solid var(--violet-600);
    outline-offset: 3px;
    border-radius: 8px;
}

.container { width: min(1200px, 100% - 40px); margin-inline: auto; }
.container-narrow { width: min(820px, 100% - 40px); }

/* Farbverlauf in der Schrift, der langsam durchläuft. Bei 200 % Breite ist die Verschiebung um 200 % genau
   eine volle Periode – der Verlauf endet in derselben Farbe, mit der er beginnt, also ohne Sprung. */
.grad {
    background: linear-gradient(90deg, #7c3aed, #9333ea 30%, #c026d3 62%, #8b5cf6 85%, #7c3aed);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero .grad { animation: shine 10s linear infinite; }
@keyframes shine {
    to { background-position: 200% 0; }
}

.ico { width: 20px; height: 20px; flex: none; }

/* Wörter mit Bindestrich, die in Überschriften nicht getrennt werden sollen. */
.nb { white-space: nowrap; }

/* Seitenwechsel (Sprache, Impressum, Datenschutz) blenden weich über, statt hart umzuschalten. Browser ohne Unterstützung
   laden wie bisher. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
}

/* Kein graues Aufblitzen beim Antippen – die Knöpfe haben eigene Rückmeldung. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------- Hintergrund */

.aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.aurora::after {
    /* Feines Raster, zur Mitte hin sichtbar. */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(76, 29, 149, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 29, 149, 0.055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 20%, transparent 75%);
}
.aurora::before {
    /* Feines Rauschen wie bei Film: nimmt den Verläufen das Plastikhafte und verhindert sichtbare Farbstufen. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .15 0 0 0 0 .6 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.05;
}
/* Lichtflächen: Farbverlauf statt Weichzeichner (der kostet vor allem auf Handys viel). --bc ist die Farbe; als
   registrierte Eigenschaft lässt sie sich beim Stimmungswechsel weich überblenden. Die Bewegung beim Scrollen setzt das Skript direkt. */
@property --bc { syntax: "<color>"; initial-value: #ddd6fe; inherits: false; }
.aurora span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--bc), color-mix(in srgb, var(--bc) 50%, transparent) 50%, transparent);
    opacity: 0.8;
    animation: drift 22s ease-in-out infinite alternate;
    transition: --bc 1.8s ease;
    will-change: transform;
}

/* Lichtfleck, der dem Mauszeiger folgt (nur mit Maus; das Skript verschiebt ihn nur, mehr nicht). */
.spot {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    width: 900px;
    height: 900px;
    margin: -450px 0 0 -450px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s;
    background: radial-gradient(closest-side, rgba(167, 139, 250, 0.2), transparent);
    will-change: transform;
}
.spot.is-on { opacity: 1; }
.aurora span:nth-child(1) { --bc: #ddd6fe; width: 900px; height: 900px; left: -300px; top: -380px; }
.aurora span:nth-child(2) { --bc: #f3e8ff; width: 780px; height: 780px; right: -260px; top: -280px; opacity: 1; animation-delay: -8s; }
.aurora span:nth-child(3) { --bc: #ede9fe; width: 700px; height: 700px; left: 36%; top: 50%; opacity: 0.9; animation-delay: -14s; }
.aurora span:nth-child(4) { --bc: #fae8ff; width: 820px; height: 820px; right: 0; bottom: -420px; opacity: 0.85; animation-delay: -4s; }

/* Stimmungen: je Abschnitt eine andere Mischung aus Violett, Orchidee und Pflaume. Die Regeln enden auf eine Klasse (.b1 …),
   nie auf „span“: Sonst würde jeder Wechsel die Stile aller span-Elemente der Seite ungültig machen. */
html[data-mood="orchid"] .aurora .b1 { --bc: #e9d5ff; }
html[data-mood="orchid"] .aurora .b2 { --bc: #f5d0fe; }
html[data-mood="orchid"] .aurora .b3 { --bc: #ddd6fe; }
html[data-mood="orchid"] .aurora .b4 { --bc: #f3e8ff; }
html[data-mood="glow"] .aurora .b1 { --bc: #ddd6fe; }
html[data-mood="glow"] .aurora .b2 { --bc: #fae8ff; }
html[data-mood="glow"] .aurora .b3 { --bc: #ede9fe; }
html[data-mood="glow"] .aurora .b4 { --bc: #fce7f3; }
html[data-mood="plum"] .aurora .b1 { --bc: #f3e8ff; }
html[data-mood="plum"] .aurora .b2 { --bc: #e9d5ff; }
html[data-mood="plum"] .aurora .b3 { --bc: #fae8ff; }
html[data-mood="plum"] .aurora .b4 { --bc: #ddd6fe; }

@keyframes drift {
    to { transform: translate3d(60px, 40px, 0) scale(1.08); }
}
@media (hover: none) {
    .aurora span { animation: none; }
}

/* ---------------------------------------------------------------- Knöpfe */

.btn {
    --bg-btn: var(--panel-strong);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--bg-btn);
    color: var(--text);
    font: 600 15px/1.2 var(--font);
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: transform 0.4s var(--spring), box-shadow 0.3s var(--ease), background 0.25s var(--ease), border-color 0.25s;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(124, 58, 237, 0.4); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn .ico { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.btn:hover .ico:last-child:not(:first-child) { transform: translateX(3px); }

.btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { box-shadow: 0 16px 44px -10px rgba(139, 92, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-primary::before {
    /* Lichtreflex, der beim Darüberfahren einmal über den Knopf läuft. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform 0.8s var(--ease);
}
.btn-primary:hover::before { transform: translateX(130%); }

.btn-ghost { background: rgba(255, 255, 255, 0.8); box-shadow: 0 8px 24px -16px rgba(76, 29, 149, 0.4); }
.btn-ghost:hover { background: #fff; }

.btn-lg { padding: 16px 26px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-disabled { opacity: 0.5; cursor: default; }
.btn-disabled:hover { transform: none; }

/* ---------------------------------------------------------------- Kopfzeile */

/* Dünner Lesefortschritt ganz oben (Breite setzt das Skript über --p). */
.progress { position: fixed; inset: 0 0 auto; z-index: 80; height: 3px; pointer-events: none; }
.progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--violet-500), var(--pink));
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.8);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* Die Kopfzeile schwebt als helle Glas-Pille – von Anfang an mit Fläche, damit die Schrift nie auf dem bunten
   Hintergrund liegt. Beim Scrollen wird sie dichter und bekommt mehr Schatten. */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: 12px;
}
.nav-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    height: 64px;
    padding: 0 10px 0 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 10px 34px -20px rgba(76, 29, 149, 0.4), inset 0 1px 0 #fff;
    transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.nav.is-scrolled .nav-inner, .nav.is-open .nav-inner {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 54px -24px rgba(76, 29, 149, 0.5), inset 0 1px 0 #fff;
}

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; font-size: 18px; letter-spacing: -0.02em; }
.brand img { border-radius: 9px; box-shadow: 0 6px 20px -6px rgba(139, 92, 246, 0.7); }

.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
    padding: 9px 15px;
    border-radius: 999px;
    color: var(--text);
    font-size: 15.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--violet-700); background: rgba(124, 58, 237, 0.08); }
/* Der Abschnitt, in dem man gerade ist (setzt das Skript). */
.nav-links a.is-active { color: var(--violet-700); background: rgba(124, 58, 237, 0.14); }

/* Nur im Handy-Menü sichtbar (siehe unten). */
.nav-toggle, .nav-sheet-cta { display: none; }

/* Sprachauswahl (ein <details>, klappt ohne JavaScript auf) */
.lang { position: relative; }
.lang summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0.02em;
    list-style: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--text); background: var(--shade); }
.lang summary .ico { width: 17px; height: 17px; }
.lang ul {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 172px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 50px -14px rgba(76, 29, 149, 0.4);
}
.lang a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--text); font-size: 15px; font-weight: 500; }
.lang a:hover { color: var(--text); background: var(--shade); }
.lang a[aria-current] { color: var(--text); font-weight: 650; }

/* Hinweis „Diese Seite gibt es auch auf …“ (nur per JavaScript, passend zur Browsersprache) */
.lang-suggest {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 7px 7px 7px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(27, 20, 51, 0.96);
    box-shadow: 0 18px 50px -14px rgba(27, 20, 51, 0.6);
    font-size: 15px;
    transform: translateX(-50%);
}
.lang-suggest a { color: var(--text); font-weight: 600; }
.lang-suggest button {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.lang-suggest button:hover { color: var(--text); }

/* ---------------------------------------------------------------- Hero */

.hero { padding: clamp(28px, 5vw, 72px) 0 clamp(56px, 8vw, 110px); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--violet-700);
    font-size: 14px;
    font-weight: 600;
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--ok);
    opacity: 0;
    animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

h1, h2, h3 { margin: 0; letter-spacing: -0.018em; word-spacing: 0.04em; line-height: 1.1; text-wrap: balance; }
p, li { text-wrap: pretty; }

h1 {
    margin-top: 22px;
    font-size: clamp(42px, 5.8vw, 76px);
    font-weight: 760;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

/* Längere Überschriften (Französisch, Italienisch, Griechisch) etwas kleiner, damit die Knöpfe im ersten Bild bleiben. */
:lang(fr) h1, :lang(it) h1 { font-size: clamp(40px, 5.2vw, 66px); }
:lang(el) h1 { font-size: clamp(34px, 4.5vw, 58px); }

.lead {
    margin: 24px 0 0;
    max-width: 560px;
    color: var(--muted);
    font-size: clamp(17px, 1.6vw, 19px);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 14px;
}
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .ico { width: 16px; height: 16px; color: var(--ok); }

.hero-visual { position: relative; isolation: isolate; perspective: 1600px; }
.hero-visual::before {
    /* Bühnenlicht hinter dem Fernseher. */
    content: "";
    position: absolute;
    inset: -14% -10% -20%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(167, 139, 250, 0.3), rgba(167, 139, 250, 0) 72%);
}

/* Sofort beim Laden – nicht erst per JavaScript, damit der erste Blick nie leer ist.
   Die Teile des Textes kommen nacheinander, dann der Fernseher. */
.hero-copy > * { animation: fade-up 0.9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.07s; }
.hero-copy > :nth-child(3) { animation-delay: 0.14s; }
.hero-copy > :nth-child(4) { animation-delay: 0.21s; }
.hero-copy > :nth-child(5) { animation-delay: 0.28s; }
.hero-visual { animation: fade-up 1.1s var(--ease) 0.18s both; }

/* ---------------------------------------------------------------- Fernseher-Rahmen */

.tv {
    position: relative;
    padding: 1.1%;
    border-radius: 18px;
    background: linear-gradient(160deg, #22222e, #0c0c12 45%, #15151d);
    border: 1px solid var(--line-strong);
    box-shadow: 0 50px 110px -40px rgba(40, 20, 90, 0.6), var(--shadow-glow);
}
.tv::before {
    /* Lichtkante oben. */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
/* --px/--py (-1 … 1) setzt das Skript aus der Mausposition: Der Fernseher neigt sich leicht zum Zeiger. */
.tv-hero {
    transform: rotateY(-8deg) rotateX(4deg);   /* das Skript neigt ihn zusätzlich zur Maus */
    will-change: transform;
    /* Beim Weiterscrollen: Der Fernseher kippt nach hinten, wird kleiner und löst sich auf – die Teile davor
       (Handy, Karten) laufen schneller nach oben als er selbst. So entsteht Tiefe. */
}
.hero-copy { will-change: transform, opacity; }

.tv-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 11px;
    background: #09090f;
    container-type: inline-size;
}
.tv-screen > img { width: 100%; height: 100%; object-fit: cover; }

.float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line-strong);
    box-shadow: 0 22px 50px -22px rgba(76, 29, 149, 0.5), inset 0 1px 0 #fff;
    animation: bob 6s ease-in-out infinite;
}
.float-card b { display: block; font-size: 14px; line-height: 1.3; }
.float-card small { color: var(--muted); font-size: 13px; }
.float-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
    color: #fff;
}
.float-ico .ico { width: 19px; height: 19px; }
.float-a { left: -26px; bottom: 14%; }
.float-b { right: -18px; top: -22px; animation-delay: -3s; }

@keyframes bob {
    50% { transform: translateY(-10px); }
}

/* ---------------------------------------------------------------- App-Nachbau
   Alle Maße in cqw, damit der Nachbau mit dem Rahmen skaliert wie ein echtes Bildschirmfoto. */

.ui {
    position: absolute;
    inset: 0;
    display: grid;
    color: #f4f4f8;
    font-size: 1.5cqw;
    line-height: 1.3;
    text-align: left;
    user-select: none;
}
.ui-live, .ui-movies { grid-template-columns: 27% 1fr; }

.ui-side {
    display: flex;
    flex-direction: column;
    gap: 0.45cqw;
    padding: 2.6cqw 1.4cqw;
    background: #0e0e17;
}
.ui-brand { display: flex; align-items: center; gap: 0.9cqw; margin: 0 0.8cqw 1.6cqw; font-size: 1.9cqw; }
.ui-brand img { width: 2.6cqw; height: 2.6cqw; }
.ui-group {
    display: flex;
    justify-content: space-between;
    padding: 0.85cqw 1.1cqw;
    border-radius: 0.8cqw;
    color: #9a9ab2;
    font-size: 1.45cqw;
}
.ui-group i { font-style: normal; font-size: 1.15cqw; opacity: 0.8; }
.ui-group.is-on { background: rgba(109, 40, 217, 0.55); color: #fff; }

.ui-main { display: flex; flex-direction: column; gap: 0.8cqw; padding: 2.6cqw 3cqw; overflow: hidden; }
.ui-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.8cqw; }
.ui-head b { font-size: 2.4cqw; }
.ui-head span { color: #9a9ab2; font-size: 1.6cqw; }

.ui-row {
    display: flex;
    align-items: center;
    gap: 1.4cqw;
    padding: 1.05cqw 1.3cqw;
    border-radius: 1cqw;
    background: #14141f;
    font-size: 1.75cqw;
}
.ui-row.is-focus {
    background: #6d28d9;
    box-shadow: 0 0 0 0.2cqw #a78bfa, 0 1cqw 3cqw -1cqw rgba(139, 92, 246, 0.9);
    transform: scale(1.02);
}
.ui-no { width: 3.4cqw; color: #9a9ab2; font-variant-numeric: tabular-nums; }
.ui-row.is-focus .ui-no { color: #ede9fe; }
.ui-logo {
    display: grid;
    place-items: center;
    width: 4.2cqw;
    height: 3cqw;
    border-radius: 0.6cqw;
    background: color-mix(in srgb, var(--c) 30%, #1d1d2b);
    color: color-mix(in srgb, var(--c) 40%, #fff);
    font-size: 1.15cqw;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.ui-name { flex: 1; font-weight: 600; }
.ui-badge { padding: 0.15cqw 0.6cqw; border-radius: 0.4cqw; background: rgba(255, 255, 255, 0.2); font-size: 1.05cqw; font-weight: 700; opacity: 0; }
.ui-row.is-focus .ui-badge { opacity: 1; }

/* Der Fokus wandert von Sender zu Sender, als säße jemand mit der Fernbedienung davor. Jede Zeile hat ihren
   Zeitabschnitt (--i). Ohne Animation (reduzierte Bewegung) bleibt einfach die Zeile mit .is-focus markiert. */
@media (prefers-reduced-motion: no-preference) {
    .ui-live .ui-row, .ui-live .ui-no, .ui-live .ui-badge {
        animation-duration: 12.8s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: calc(var(--i, 0) * 1.6s);
        animation-fill-mode: backwards;
    }
    .ui-live .ui-row { animation-name: row-focus; }
    .ui-live .ui-no { animation-name: row-no; }
    .ui-live .ui-badge { animation-name: row-badge; }
    .m-row { animation: row-focus-m 9.6s ease-in-out infinite backwards; animation-delay: calc(var(--i, 0) * 1.6s); }
}
@keyframes row-focus {
    0%, 12.5%, 100% { background: #14141f; box-shadow: 0 0 0 0 rgba(167, 139, 250, 0), 0 0 0 0 rgba(139, 92, 246, 0); transform: none; }
    2.5%, 10% { background: #6d28d9; box-shadow: 0 0 0 0.2cqw #a78bfa, 0 1cqw 3cqw -1cqw rgba(139, 92, 246, 0.9); transform: scale(1.02); }
}
@keyframes row-no {
    0%, 12.5%, 100% { color: #9a9ab2; }
    2.5%, 10% { color: #ede9fe; }
}
@keyframes row-badge {
    0%, 12.5%, 100% { opacity: 0; }
    2.5%, 10% { opacity: 1; }
}
@keyframes row-focus-m {
    0%, 16.67%, 100% { background: #14141f; box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
    3%, 13.6% { background: #6d28d9; box-shadow: 0 0 0 0.5cqw #a78bfa; }
}

.ui-posters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.3cqw;
}
.ui-poster {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 2 / 3;
    padding: 0.9cqw;
    border-radius: 0.9cqw;
    overflow: hidden;
    font-size: 1.15cqw;
    background: var(--p);
}
.ui-poster::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}
.ui-poster b { position: relative; z-index: 1; line-height: 1.15; }
.ui-poster.is-focus { box-shadow: 0 0 0 0.25cqw #a78bfa, 0 1.2cqw 3cqw -1cqw rgba(139, 92, 246, 0.9); transform: scale(1.05); z-index: 2; }
.ui-rating {
    position: absolute;
    top: 0.7cqw;
    left: 0.7cqw;
    z-index: 1;
    padding: 0.1cqw 0.5cqw;
    border-radius: 0.4cqw;
    background: rgba(0, 0, 0, 0.6);
    color: #ffd54f;
    font-size: 0.95cqw;
    font-weight: 700;
}
.p1  { --p: radial-gradient(circle at 70% 25%, #fbbf24 0 8%, transparent 9%), linear-gradient(180deg, #1e1b4b, #7c2d12); }
.p2  { --p: radial-gradient(ellipse at 50% 110%, #065f46 0 45%, transparent 46%), linear-gradient(180deg, #a7f3d0, #0f766e); }
.p3  { --p: radial-gradient(circle at 30% 30%, #fff 0 1.5%, transparent 2%), radial-gradient(circle at 65% 20%, #fff 0 1%, transparent 1.5%), linear-gradient(160deg, #312e81, #0f172a 60%, #581c87); }
.p4  { --p: linear-gradient(90deg, transparent 45%, rgba(186, 230, 253, 0.8) 50%, transparent 55%), linear-gradient(180deg, #0c4a6e, #020617); }
.p5  { --p: radial-gradient(circle at 50% 38%, #e5e7eb 0 12%, transparent 13%), linear-gradient(180deg, #44403c, #0c0a09); }
.p6  { --p: linear-gradient(180deg, #fde68a 0 35%, #38bdf8 35% 60%, #0369a1 60%); }
.p7  { --p: radial-gradient(circle at 38% 45%, #f472b6 0 14%, transparent 15%), radial-gradient(circle at 62% 45%, #fb923c 0 14%, transparent 15%), linear-gradient(180deg, #3b0764, #1e1b4b); }
.p8  { --p: repeating-linear-gradient(90deg, #111827 0 12%, #374151 12% 14%), linear-gradient(#000, #000); }
.p9  { --p: radial-gradient(circle at 50% 30%, #f59e0b 0 20%, transparent 21%), linear-gradient(180deg, #92400e, #451a03); }
.p10 { --p: radial-gradient(circle at 30% 80%, #fcd34d 0 3%, transparent 4%), radial-gradient(circle at 60% 75%, #f87171 0 3%, transparent 4%), linear-gradient(180deg, #172554, #020617); }

/* Player mit Auswahl-Dialog */
.ui-player { display: block; }
.ui-scene {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1e1b4b 0%, #9d174d 55%, #f59e0b 100%);
}
.ui-scene .sun { position: absolute; left: 58%; top: 42%; width: 18cqw; height: 18cqw; border-radius: 50%; background: radial-gradient(circle, #fde68a, #f97316 70%); }
.ui-scene .hill { position: absolute; left: -10%; right: -10%; border-radius: 50% 50% 0 0; }
.ui-scene .h1 { bottom: -12%; height: 45%; background: #4c1d95; }
.ui-scene .h2 { bottom: -22%; height: 42%; left: 30%; background: #2e1065; }
.ui-scene .h3 { bottom: -30%; height: 40%; right: 40%; background: #1e1b4b; }
.ui-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }
.ui-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.6cqw 3cqw;
    border-radius: 1.8cqw;
    background: #14141f;
    box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.6);
}
.ui-dialog-title { font-size: 2.3cqw; }
.ui-dialog small { color: #9a9ab2; font-size: 1.2cqw; margin-top: 0.3cqw; }
.ui-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; width: 100%; margin: 2cqw 0; }
.ui-cols > div { display: flex; flex-direction: column; gap: 0.6cqw; }
.ui-cols i { font-style: normal; font-weight: 800; font-size: 1.1cqw; color: #a78bfa; letter-spacing: 0.06em; margin: 0 0 0.3cqw 0.4cqw; }
.ui-opt { padding: 0.9cqw 1.3cqw; border-radius: 1cqw; background: #1d1d2b; font-size: 1.35cqw; }
.ui-opt.is-sel { background: rgba(109, 40, 217, 0.55); font-weight: 700; }
.ui-opt.is-focus { background: #8b5cf6; box-shadow: 0 0 0 0.2cqw #a78bfa; }
.ui-play { padding: 0.9cqw 2.2cqw; border-radius: 1cqw; background: #8b5cf6; box-shadow: 0 0 0 0.2cqw #a78bfa; font-size: 1.4cqw; font-weight: 700; }

/* Playlist hinzufügen */
.ui-add { grid-template-columns: 0.9fr 1.1fr; gap: 3cqw; padding: 3.4cqw 4cqw; background: #09090f; }
.ui-add-left, .ui-add-right { display: flex; flex-direction: column; gap: 0.8cqw; }
.ui-add-left { align-items: flex-start; }
.ui-add-title { font-size: 2.6cqw; }
.ui-add small { color: #9a9ab2; font-size: 1.3cqw; }
.ui-add i { margin-top: 0.8cqw; font-style: normal; font-weight: 700; font-size: 1.05cqw; color: #9a9ab2; letter-spacing: 0.05em; }
.ui-mono { font-family: var(--mono); font-size: 1.7cqw; color: #a78bfa; }
.ui-qr {
    width: 17cqw;
    margin-top: 1cqw;
    padding: 1cqw;
    border-radius: 1cqw;
    background: #fff;
}
.ui-qr svg { display: block; width: 100%; height: auto; }
.ui-add-right { justify-content: center; }
.ui-add-right i { margin-top: 0; }
.ui-field {
    display: flex;
    flex-direction: column;
    padding: 1cqw 1.4cqw;
    border-radius: 1cqw;
    background: #1d1d2b;
    font-size: 1.45cqw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-field small { font-size: 1cqw; color: #9a9ab2; }
.ui-field.is-focus { box-shadow: 0 0 0 0.22cqw #a78bfa; }
.ui-add-right .ui-play { align-self: flex-start; margin-top: 0.6cqw; }

/* ---------------------------------------------------------------- Leiste */

.strip { padding: 0 0 clamp(40px, 6vw, 80px); }
.strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-card);
}
.strip-grid > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 24px 12px; text-align: center; }
.strip-grid > div + div { border-left: 1px solid var(--line); }
.strip-grid b {
    background: linear-gradient(180deg, #2a1c52 25%, #6d28d9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 780;
    letter-spacing: -0.025em;
}
.strip-grid span { color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- Abschnitte */

.section { padding: clamp(60px, 8vw, 104px) 0; position: relative; }
/* Der Abschluss schließt direkt an die FAQ an, ohne doppelten Abstand. */
main > .section:last-child { padding-top: 0; }
.section-tint {
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(167, 139, 250, 0.11), transparent 72%),
        linear-gradient(180deg, transparent, rgba(167, 139, 250, 0.05) 35%, rgba(167, 139, 250, 0.035) 65%, transparent);
    /* Die Trennlinie läuft zu den Seiten hin aus – die Abschnitte gehen ineinander über statt hart anzustoßen. */
    border-block: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.22), transparent) 1;
}

.section-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--violet-600);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.section-head h2, .check h2, .cta h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 750; letter-spacing: -0.026em; }
.section-head p { margin: 18px auto 0; max-width: 640px; color: var(--muted); font-size: 18px; }

/* ---------------------------------------------------------------- Funktionen */

/* Bento-Raster: sechs Spalten, die Karten spannen 2, 3 oder 4 davon. Jede Karte hat unten eine kleine Szene (.fx),
   die zeigt, was der Text beschreibt – alles in CSS gezeichnet, ohne Bilddateien. */
.features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.feature {
    position: relative;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.64));
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.feature.f-3 { grid-column: span 3; }
.feature.f-4 { grid-column: span 4; flex-direction: row; align-items: stretch; gap: clamp(24px, 3vw, 44px); }
.feature.f-4 .feature-body { flex: 1 1 46%; }
.feature.f-4 .fx { flex: 1 1 54%; margin: 0; }
.feature:hover { transform: translateY(-4px); }
.feature-body > * { position: relative; }
.feature h3 { margin: 20px 0 8px; font-size: 20px; }
.feature p { margin: 0; color: var(--muted); font-size: 16px; }

/* Lichtkante unter dem Mauszeiger (--mx/--my setzt das Skript) – für alle Flächen gleich. */
@property --mx { syntax: "<length-percentage>"; initial-value: 50%; inherits: false; }
@property --my { syntax: "<length-percentage>"; initial-value: 0%; inherits: false; }
:is(.feature, .detail, .dl, .steps li, .strip-grid, .check, .install) { position: relative; }
:is(.feature, .detail, .dl, .steps li, .strip-grid, .check, .install)::before,
:is(.feature, .detail, .dl, .steps li, .strip-grid, .check, .install)::after { --mx: inherit; --my: inherit; }
:is(.feature, .detail, .dl, .steps li, .strip-grid, .check, .install)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx) var(--my), rgba(139, 92, 246, 0.13), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
:is(.feature, .detail, .dl, .steps li, .strip-grid, .check, .install)::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(124, 58, 237, 0.55), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
:is(.feature, .detail, .dl, .steps li, .strip-grid, .check, .install):hover::before,
:is(.feature, .detail, .dl, .steps li, .strip-grid, .check, .install):hover::after { opacity: 1; }
:is(.detail, .dl, .steps li, .strip-grid, .check, .install) > * { position: relative; }

/* ---- Szenen in den Karten */

.fx {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    margin-top: auto;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    border-color: rgba(196, 181, 253, 0.12);
    background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, 0.3), transparent 62%), #17102b;
    overflow: hidden;
    user-select: none;
}
.fx .ico { width: 20px; height: 20px; }

/* Live-TV: Senderliste, in der der Fokus wandert */
.fx-list { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
.fx-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #14141f;
    font-size: 13.5px;
    font-weight: 600;
}
.fx-row.is-on { background: #6d28d9; box-shadow: 0 0 0 1.5px #a78bfa, 0 8px 22px -8px rgba(139, 92, 246, 0.9); }
.fx-no { width: 28px; color: #9a9ab2; font-size: 12px; font-variant-numeric: tabular-nums; }
.fx-row.is-on .fx-no { color: #ede9fe; }
.fx-logo {
    display: grid;
    place-items: center;
    width: 32px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c) 30%, #1d1d2b);
    color: color-mix(in srgb, var(--c) 40%, #fff);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.fx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-tag { padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.2); font-size: 10.5px; font-weight: 700; }

/* Filme: drei Poster als Fächer, das mittlere mit „Weiterschauen“-Balken */
.fx-posters { gap: 0; }
.fx-poster {
    position: relative;
    width: 64px;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    background: var(--p);
    box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.85);
    transition: transform 0.6s var(--ease);
}
.fx-poster:nth-child(1) { transform: rotate(-9deg) translateX(16px); }
.fx-poster:nth-child(2) { z-index: 2; transform: translateY(-8px); width: 72px; }
.fx-poster:nth-child(3) { transform: rotate(9deg) translateX(-16px); }
.feature:hover .fx-poster:nth-child(1) { transform: rotate(-14deg) translateX(-2px); }
.feature:hover .fx-poster:nth-child(2) { transform: translateY(-16px) scale(1.04); }
.feature:hover .fx-poster:nth-child(3) { transform: rotate(14deg) translateX(2px); }
.fx-poster.has-resume::after {
    content: "";
    position: absolute;
    inset: auto 7px 7px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c4b5fd 62%, rgba(255, 255, 255, 0.3) 62%);
}

/* Zwei Player: Der aktive wechselt hin und her */
.fx-players { gap: 12px; }
.fx-pill {
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 8px 22px -8px rgba(139, 92, 246, 0.9);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
}
.fx-pill.is-b { background: #1d1d2b; box-shadow: none; color: #9a9ab2; }
.fx-swap { color: var(--violet-300); }
.fx-swap .ico { width: 22px; height: 22px; }

/* Sprache: Auswahl wandert durch die Tonspuren */
.fx-chips { flex-wrap: wrap; gap: 8px; }
.fx-chips span {
    padding: 8px 14px;
    border-radius: 999px;
    background: #1d1d2b;
    color: #9a9ab2;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.fx-chips .is-on { background: rgba(109, 40, 217, 0.75); box-shadow: inset 0 0 0 1px #a78bfa; color: #fff; }
.fx-chips .fx-51 { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }

/* Playlist vom Handy: Punkte laufen vom Handy zum QR-Code */
.fx-transfer { gap: 14px; }
.fx-dev {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 10px 26px -10px rgba(139, 92, 246, 0.9);
    color: #fff;
}
.fx-beam { display: flex; gap: 7px; }
.fx-beam i { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; opacity: 0.25; }
.fx-qr { width: 58px; padding: 4px; border-radius: 9px; background: #fff; }
.fx-qr svg { display: block; width: 100%; height: auto; }

/* Datenschutz: Schild mit pulsierenden Ringen */
.fx-shield {
    position: relative;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.08) 70%);
    color: #ddd6fe;
}
.fx-shield .ico { width: 30px; height: 30px; }
.fx-shield::before, .fx-shield::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(167, 139, 250, 0.55);
    border-radius: 50%;
    opacity: 0;
}

/* Schnellmenü: OK lange drücken, die Ziele leuchten der Reihe nach auf */
.fx-quick { gap: 12px; }
.fx-orb {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: #14141f;
    color: #9a9ab2;
}
.fx-ok {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-inline: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 10px 28px -8px rgba(139, 92, 246, 0.95);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.fx-ok::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(196, 181, 253, 0.7);
    border-radius: 50%;
    opacity: 0;
}

/* Familienfreundlich: Schalter blendet Inhalte aus */
.fx-family { gap: 14px; }
.fx-bars { display: grid; flex: 1; gap: 8px; max-width: 150px; }
.fx-bars i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.fx-bars i:nth-child(2) { width: 70%; }
.fx-bars i:nth-child(3) { width: 45%; }
.fx-age { padding: 4px 9px; border-radius: 7px; background: rgba(248, 113, 113, 0.16); color: #fca5a5; font-size: 12px; font-weight: 800; }
.fx-switch { position: relative; width: 46px; height: 26px; border-radius: 999px; background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 6px 18px -6px rgba(139, 92, 246, 0.9); }
.fx-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translateX(20px); }

/* Für jedes Netz: Regler zwischen „schneller Start“ und „schwaches WLAN“ */
.fx-slider { flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; padding-inline: 26px; }
.fx-track { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); container-type: inline-size; }
.fx-fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #e879f9); transform: scaleX(0.62); transform-origin: 0 50%; }
.fx-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    transform: translateX(62cqw);
    border: 3px solid #8b5cf6;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.8);
}
.fx-ticks { display: flex; justify-content: space-between; }
.fx-ticks i { width: 2px; height: 7px; border-radius: 1px; background: rgba(255, 255, 255, 0.2); }

/* Bewegung: nur, wenn der Besucher sie nicht abgeschaltet hat. Ohne sie zeigen die Szenen einen ruhigen Standbild-Zustand. */
@media (prefers-reduced-motion: no-preference) {
    .fx-list .fx-row { animation: fx-focus 6.4s ease-in-out infinite backwards; animation-delay: calc(var(--i, 0) * 1.6s); }
    .fx-pill { animation: pill-on 6s ease-in-out infinite; }
    .fx-pill.is-b { animation-delay: -3s; }
    .fx-chip { animation: chip-on 6s ease-in-out infinite backwards; animation-delay: calc(var(--i, 0) * 2s); }
    .fx-dot { animation: beam 1.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.16s); }
    .fx-shield::before { animation: ring 3.2s ease-out infinite; }
    .fx-shield::after { animation: ring 3.2s ease-out 1.6s infinite; }
    .fx-quick .fx-orb { animation: orb-on 6s ease-in-out infinite backwards; animation-delay: calc(var(--i, 0) * 1.5s); }
    .fx-ok::after { animation: hold 3s ease-out infinite; }
    .fx-switch { animation: switch-bg 5s ease-in-out infinite; }
    .fx-switch::after { animation: switch-knob 5s ease-in-out infinite; }
    .fx-bar2 { animation: bar-hide 5s ease-in-out infinite; }
    .fx-fill { animation: slider-fill 7s ease-in-out infinite alternate; }
    .fx-knob { animation: slider-knob 7s ease-in-out infinite alternate; }
}
@keyframes fx-focus {
    0%, 25%, 100% { background: #14141f; box-shadow: 0 0 0 0 rgba(167, 139, 250, 0), 0 0 0 0 rgba(139, 92, 246, 0); }
    4%, 21% { background: #6d28d9; box-shadow: 0 0 0 1.5px #a78bfa, 0 8px 22px -8px rgba(139, 92, 246, 0.9); }
}
@keyframes pill-on {
    0%, 42% { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; box-shadow: 0 8px 22px -8px rgba(139, 92, 246, 0.9); }
    50%, 92% { background: #1d1d2b; color: #9a9ab2; box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
    100% { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; box-shadow: 0 8px 22px -8px rgba(139, 92, 246, 0.9); }
}
@keyframes chip-on {
    0%, 33.3%, 100% { background: #1d1d2b; color: #9a9ab2; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0); }
    4%, 29% { background: rgba(109, 40, 217, 0.75); color: #fff; box-shadow: inset 0 0 0 1px #a78bfa; }
}
@keyframes beam {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    45% { opacity: 1; transform: scale(1.2); }
}
@keyframes ring {
    0% { transform: scale(0.8); opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}
@keyframes orb-on {
    0%, 25%, 100% { background: #14141f; color: #9a9ab2; border-color: rgba(255, 255, 255, 0.14); transform: none; }
    4%, 21% { background: rgba(109, 40, 217, 0.7); color: #fff; border-color: #a78bfa; transform: translateY(-3px); }
}
@keyframes hold {
    0% { transform: scale(0.8); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
}
@keyframes switch-bg {
    0%, 40% { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
    50%, 90% { background: #2a2a3a; box-shadow: none; }
    100% { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
}
@keyframes switch-knob {
    0%, 40% { transform: translateX(20px); }
    50%, 90% { transform: translateX(0); }
    100% { transform: translateX(20px); }
}
@keyframes bar-hide {
    0%, 40% { opacity: 1; }
    50%, 90% { opacity: 0.15; }
    100% { opacity: 1; }
}
@keyframes slider-fill { from { transform: scaleX(0.14); } to { transform: scaleX(0.86); } }
/* Der Regler-Knopf läuft über transform; 1cqw = 1 % der Reglerbreite (Container-Einheit). */
@keyframes slider-knob { from { transform: translateX(14cqw); } to { transform: translateX(86cqw); } }
.feature-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.07));
    border: 1px solid rgba(124, 58, 237, 0.26);
    color: var(--violet-700);
}
.feature-ico .ico { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- Reiter */

.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 36px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
}
.tabs [role="tab"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: 600 15px/1.2 var(--font);
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s;
}
.tabs [role="tab"] .ico { width: 17px; height: 17px; }
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] {
    background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
    color: #fff;
    box-shadow: 0 8px 24px -10px rgba(139, 92, 246, 0.9);
}
/* Ohne JavaScript: Reiter ausblenden, alle Inhalte untereinander zeigen. */
[data-tabs]:not(.is-tabbed) > .tabs { display: none; }
[data-tabs]:not(.is-tabbed) .view + .view { margin-top: 48px; }

.view[hidden] { display: none !important; }
.is-tabbed .view { animation: fade-up 0.5s var(--ease); }
@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
}

/* ---------------------------------------------------------------- Ansicht */

 .gallery .view { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }

/* ---- Bühne wie auf Produktseiten von Handys: Der Abschnitt bleibt beim Scrollen stehen, die Geräte wechseln,
   drehen und überblenden sich im Takt des Scrollens. Das Skript schaltet das nur ein, wenn Platz und Bewegung
   erlaubt sind (sonst bleiben die Reiter). Je Ansicht setzt es --vo (Deckkraft), --vy, --vs und --vd (-1 … 1, Abstand
   zur Mitte). Die Laufstrecke ist so hoch wie die Ansichten viel Scrollweg brauchen. */
/* Unsichtbare Schritte der Bühne sind seitlich versetzt – am Bildschirmrand abschneiden, damit die Seite nicht breiter wird.
   (clip statt hidden: So bleibt das Festpinnen möglich.) */
#ansicht { overflow-x: clip; }
.gallery.is-story { height: calc(100vh + (var(--n, 4) - 1) * 88vh); height: calc(100svh + (var(--n, 4) - 1) * 88svh); }
.is-story > .tabs { display: none; }
.is-story .story-pin {
    position: sticky;
    top: 0;
    display: grid;
    align-items: center;
    height: 100vh;
    height: 100svh;
    padding: 86px 0 74px;
    box-sizing: border-box;
    counter-reset: step;
}
.is-story .story-pin::before {
    content: "";
    position: absolute;
    inset: 6% -8%;
    z-index: -1;
    background: radial-gradient(ellipse 48% 52% at 33% 50%, rgba(167, 139, 250, 0.2), transparent 72%);
    pointer-events: none;
}
.is-story .story-pin > .view {
    grid-area: 1 / 1;
    counter-increment: step;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
    will-change: transform, opacity;
}
.is-story .story-pin > .view[data-active] { pointer-events: auto; }
.is-story .view + .view { margin-top: 0; }
.is-story .view .tv, .is-story .view-copy, .is-story .phone-stage .phone { will-change: transform; }
.is-story .view-copy::before {
    content: "0" counter(step);
    display: block;
    margin-bottom: 14px;
    color: var(--violet-600);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.story-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px -16px rgba(76, 29, 149, 0.5);
    translate: -50% 0;
}
.story-dots button {
    position: relative;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.25);
    cursor: pointer;
    transition: width 0.45s var(--ease), background 0.3s;
}
.story-dots button::after { content: ""; position: absolute; inset: -9px -3px; }
.story-dots button[aria-current="true"] { width: 30px; background: linear-gradient(90deg, var(--violet-600), #c026d3); }
.story-label { margin-left: 8px; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.view-copy h3 { font-size: clamp(24px, 2.6vw, 32px); }
.view-copy p { margin: 14px 0 0; color: var(--muted); font-size: 17px; }

/* ---------------------------------------------------------------- Handy-Nachbau
   Wie beim Fernseher: alle Maße in cqw, damit der Inhalt mit dem Rahmen skaliert. */

.phone {
    position: relative;
    flex: 0 1 230px;
    min-width: 0;
    padding: 8px;
    border-radius: 34px;
    background: linear-gradient(160deg, #22222e, #0c0c12 45%, #15151d);
    border: 1px solid var(--line-strong);
    box-shadow: 0 44px 90px -36px rgba(40, 20, 90, 0.6), var(--shadow-glow);
}
.phone-screen {
    position: relative;
    aspect-ratio: 9 / 18.5;
    overflow: hidden;
    border-radius: 27px;
    background: #09090f;
    container-type: inline-size;
}
.phone-screen::after {
    /* Kameraloch. */
    content: "";
    position: absolute;
    top: 2.6cqw;
    left: 50%;
    z-index: 3;
    width: 4.2cqw;
    height: 4.2cqw;
    margin-left: -2.1cqw;
    border-radius: 50%;
    background: #000;
}
.phone-stage { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 3vw, 34px); }
.phone-stage .phone:nth-child(2) { margin-top: 36px; }

.ui-m {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    color: #f4f4f8;
    font-size: 4cqw;
    line-height: 1.3;
    text-align: left;
    user-select: none;
}
.m-video { position: relative; flex: 0 0 33%; overflow: hidden; }
.m-video .ui-scene .sun { width: 22cqw; height: 22cqw; }
.m-title {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    padding: 9cqw 4.5cqw 6cqw;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}
.m-title b { font-size: 4.8cqw; }
.m-title span { color: #cfcfe0; font-size: 3.2cqw; }

.m-sheet {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2cqw;
    margin-top: -4cqw;
    padding: 3.2cqw 3.4cqw 0;
    overflow: hidden;
    border-radius: 5cqw 5cqw 0 0;
    background: #0e0e17;
}
.m-chips { display: flex; gap: 2cqw; overflow: hidden; white-space: nowrap; }
.m-chips-pad { padding: 2cqw 3.4cqw 1cqw; }
.m-chips span { padding: 1.3cqw 3cqw; border-radius: 999px; background: #1d1d2b; color: #9a9ab2; font-size: 3.3cqw; }
.m-chips .is-on { background: rgba(109, 40, 217, 0.75); color: #fff; }

.m-row { display: flex; align-items: center; gap: 3cqw; padding: 2cqw 3cqw; border-radius: 3cqw; background: #14141f; font-size: 3.8cqw; }
.m-row.is-on { background: #6d28d9; box-shadow: 0 0 0 0.5cqw #a78bfa; }
.m-row .ui-no { width: 7cqw; font-size: 3.2cqw; }
.m-row .ui-logo { width: 10cqw; height: 6.8cqw; border-radius: 1.5cqw; font-size: 2.6cqw; }

.m-top { display: flex; align-items: center; gap: 3cqw; padding: 10cqw 4cqw 2cqw; }
.m-top b { font-size: 5.6cqw; }
.m-search { flex: 1; padding: 2cqw 3.4cqw; border-radius: 999px; background: #1d1d2b; color: #9a9ab2; font-size: 3.4cqw; }
.m-posters { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 2.6cqw; padding: 2cqw 4cqw 0; overflow: hidden; }
.m-posters .ui-poster { padding: 2cqw; border-radius: 2.4cqw; font-size: 3cqw; }
.m-posters .ui-rating { top: 1.4cqw; left: 1.4cqw; padding: 0.2cqw 1.2cqw; border-radius: 1cqw; font-size: 2.5cqw; }

.m-nav { display: flex; justify-content: space-around; padding: 2.6cqw 1cqw 3.6cqw; border-top: 1px solid rgba(255, 255, 255, 0.07); background: #14141f; }
.m-nav span { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; color: #9a9ab2; font-size: 2.7cqw; }
.m-nav .is-on { color: #fff; }
.m-nav .is-on .ico { color: #c4b5fd; }
.m-nav .ico { width: 5.6cqw; height: 5.6cqw; }

/* Handy vor dem Fernseher im Kopfbereich */
.phone-hero {
    position: absolute;
    right: -3%;
    bottom: -12%;
    z-index: 3;
    width: 25%;
    min-width: 128px;
    padding: 6px;
    border-radius: 26px;
    rotate: 5deg;
    animation: bob 7s ease-in-out infinite;
    animation-delay: -1.5s;
}
.phone-hero .phone-screen { border-radius: 20px; }

/* ---------------------------------------------------------------- Im Detail */

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0 0 56px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.steps li {
    display: flex;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-card);
}
.steps li > span {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
    font-weight: 800;
    box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.9);
}
.steps h3 { font-size: 17px; margin-top: 2px; }
.steps p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.detail {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.64));
    box-shadow: var(--shadow-card);
}
.detail h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; }
.ico-inline { width: 26px; height: 26px; color: var(--violet-600); }
.detail p { margin: 14px 0 18px; color: var(--muted); }
.detail ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.detail li { position: relative; padding-left: 30px; font-size: 15px; color: #2e2650; }
.detail li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat,
        linear-gradient(135deg, var(--violet-500), var(--violet-700));
}

/* ---------------------------------------------------------------- Download */

.downloads { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
.dl {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.68));
    box-shadow: var(--shadow-card);
}
.dl-main {
    border-color: rgba(124, 58, 237, 0.4);
    background:
        radial-gradient(500px 240px at 100% 0%, rgba(167, 139, 250, 0.2), transparent 70%),
        linear-gradient(180deg, #fff, rgba(250, 245, 255, 0.9));
    box-shadow: 0 30px 70px -34px rgba(124, 58, 237, 0.55), 0 1px 0 #fff inset;
}
/* Feste Lichtkante an der empfohlenen Karte (ein umlaufender Streifen müsste jedes Bild neu gezeichnet werden). */
.dl-main::after {
    background: conic-gradient(from 200deg, transparent 0 50%, rgba(196, 181, 253, 0.95) 76%, #e879f9 88%, transparent 97%);
    opacity: 1;
}
.dl-badge {
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--violet-400), var(--pink));
    color: #1a0b2e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.dl h3 { font-size: clamp(22px, 2.4vw, 28px); }
.dl-sub { margin: 10px 0 18px; color: var(--muted); }
.dl-devices { display: grid; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; flex: 1; }
.dl-devices li { position: relative; padding-left: 22px; font-size: 15px; }
.dl-devices li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--violet-500);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16);
}
.dl-meta { margin: 12px 0 0; color: var(--faint); font-size: 14px; text-align: center; }

.downloads-mobile { max-width: 620px; margin: 20px auto 0; }
.dl-badge-alt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #38bdf8, var(--violet-400));
}
.dl-badge-alt .ico { width: 14px; height: 14px; }

/* Amazon Appstore: Abzeichen (Kopfbereich, Download-Karte) und Hinweiskarte über den APK-Downloads. */
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: #0f0a1f;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 28px -14px rgba(15, 10, 31, 0.7);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(76, 29, 149, 0.8); }
.store-badge:focus-visible { outline: 3px solid var(--violet-400); outline-offset: 3px; }
.store-badge-ico { width: 30px; height: 30px; color: #ff9900; }
.store-badge-text { display: grid; line-height: 1.15; text-align: left; }
.store-badge-text small { font-size: 12px; font-weight: 500; opacity: 0.85; }
.store-badge-text b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.store-badge-lg { padding: 14px 28px 14px 22px; }
.store-badge-lg .store-badge-ico { width: 38px; height: 38px; }
.store-badge-lg .store-badge-text b { font-size: 25px; }
.store-badge-sm { padding: 7px 16px 7px 12px; border-radius: 12px; }
.store-badge-sm .store-badge-ico { width: 24px; height: 24px; }
.store-badge-sm .store-badge-text b { font-size: 16px; }
/* Echtes Abzeichen von Amazon (assets/badges/): unverändert und ohne eigenen Rahmen zeigen. */
.store-badge-img { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.store-badge-img:hover { box-shadow: none; }
.store-badge-img img { display: block; width: auto; height: 56px; }
.store-badge-img.store-badge-sm img { height: 44px; }
.store-badge-img.store-badge-lg img { height: 64px; }

.hero-store { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; color: var(--muted); font-size: 14px; }

.store-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 20px;
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 42px);
    border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 24px;
    background:
        radial-gradient(460px 200px at 0% 0%, rgba(255, 153, 0, 0.12), transparent 70%),
        radial-gradient(500px 240px at 100% 0%, rgba(167, 139, 250, 0.2), transparent 70%),
        linear-gradient(180deg, #fff, rgba(250, 245, 255, 0.9));
    box-shadow: 0 30px 70px -34px rgba(124, 58, 237, 0.55), 0 1px 0 #fff inset;
}
.store-card h3 { font-size: clamp(22px, 2.4vw, 28px); }
.store-card p { margin: 8px 0 0; color: var(--muted); }
.store-card .store-card-sub { margin-top: 4px; color: var(--violet-700); font-weight: 600; }
.store-card .store-card-other { color: var(--faint); font-size: 14px; }
.store-card-cta { flex: none; }

.install-lead { margin: 0 0 18px; color: var(--muted); }
.install-lead a { color: var(--violet-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(109, 40, 217, 0.4); }
.install-lead a:hover { color: var(--violet-900); text-decoration-color: currentColor; }

@media (max-width: 720px) {
    .store-card { flex-direction: column; align-items: stretch; gap: 22px; padding: 24px 22px; }
    .store-card-cta .store-badge { width: 100%; justify-content: center; }
    .store-card-cta .store-badge-img { justify-content: flex-start; }
}

.shortlink { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.shortlink small { color: var(--muted); font-size: 14px; }
.shortlink-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 8px 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.05);
}
.shortlink code { flex: 1; font-size: 17px; color: var(--violet-700); overflow-wrap: anywhere; }
.copy {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--panel-strong);
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.copy:hover { background: rgba(139, 92, 246, 0.14); }
.copy .ico { width: 17px; height: 17px; }
.copy.is-done { background: rgba(16, 185, 129, 0.14); color: var(--ok); border-color: rgba(16, 185, 129, 0.4); }

.install {
    margin-top: 28px;
    padding: clamp(26px, 3.4vw, 44px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--panel);
}
.install-title { margin-bottom: 22px; font-size: 24px; text-align: center; }
.install .tabs { margin-bottom: 28px; }
.guide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.guide li {
    position: relative;
    padding: 4px 0 4px 48px;
    counter-increment: step;
    color: #2e2650;
}
.guide li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--violet-700);
    font-weight: 800;
    font-size: 14px;
}
.guide small { display: block; margin-top: 4px; color: var(--faint); font-size: 14px; }
.guide code, .install-note code { padding: 2px 8px; border-radius: 7px; background: rgba(139, 92, 246, 0.12); color: var(--violet-700); font-size: 0.95em; }
.install-note { margin: 26px 0 0; color: var(--faint); font-size: 14px; text-align: center; }

/* ---------------------------------------------------------------- Gerät prüfen */

.check {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(28px, 4.5vw, 56px);
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    background:
        radial-gradient(600px 300px at 0% 100%, rgba(167, 139, 250, 0.16), transparent 70%),
        linear-gradient(180deg, #fff, rgba(250, 245, 255, 0.85));
    box-shadow: var(--shadow-card);
}
.check p { margin: 16px 0 0; color: var(--muted); }
.check-form label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.check-row { display: flex; gap: 10px; }
.check-row input {
    flex: 1;
    min-width: 0;
    padding: 15px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font: 500 17px/1.2 var(--mono);
    letter-spacing: 0.04em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.check-row input::placeholder { color: var(--faint); }
.check-row input:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2); }
.check-row .btn { border-radius: 14px; }

.result {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid;
    font-size: 15px;
}
.result .mono { font-size: 13px; opacity: 0.85; }
.result-ok { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.35); color: #047857; }
.result-err { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #b91c1c; }

/* ---------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 12px; }
.faq details {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    transition: border-color 0.3s, background 0.3s;
}
.faq details[open] { border-color: rgba(124, 58, 237, 0.3); background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-card); }
.faq details:hover:not([open]) { border-color: var(--line-strong); background: var(--panel-strong); }
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq summary {
    position: relative;
    padding: 20px 60px 20px 24px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    background:
        linear-gradient(var(--violet-600), var(--violet-600)) center / 10px 2px no-repeat,
        linear-gradient(var(--violet-600), var(--violet-600)) center / 2px 10px no-repeat,
        rgba(139, 92, 246, 0.14);
    transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--muted); }

/* ---------------------------------------------------------------- Abschluss & Fuß */

.cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(44px, 7vw, 88px) 24px;
    border-radius: 32px;
    text-align: center;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.4);
    box-shadow: 0 40px 90px -40px rgba(76, 29, 149, 0.7);
    background:
        radial-gradient(760px 340px at 50% 0%, rgba(196, 181, 253, 0.5), transparent 70%),
        linear-gradient(165deg, #4a2a9c 0%, #301670 52%, #1f1049 100%);
}
.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from 200deg, transparent 0 50%, rgba(196, 181, 253, 0.9) 75%, #e879f9 86%, transparent 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 0%, transparent 75%);
    pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta img { border-radius: 18px; box-shadow: 0 20px 60px -10px rgba(139, 92, 246, 0.9); }
.cta h2 { margin-top: 26px; }
.cta p { max-width: 34em; margin: 16px 0 32px; color: #f4f1ff; font-size: clamp(17px, 2vw, 20px); font-weight: 500; }

.footer { padding: 40px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.footer-mark {
    margin: clamp(28px, 5vw, 56px) 0 0;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(52px, 15.5vw, 230px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.12;
    margin-bottom: -0.2em;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.footer p { flex: 1; margin: 0; color: var(--muted); font-size: 15px; min-width: 240px; }
.footer .brand { font-size: 16px; }
.footer .brand img { border-radius: 7px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--faint); font-size: 15px; }
.footer-links a { color: var(--muted); font-weight: 550; transition: color 0.2s; }
.footer-links a:hover { color: var(--violet-700); }
.footer-guides { flex: 1 1 100%; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- Download-Leiste (nur Handy) */

/* Hängt am unteren Rand, sobald der Kopfbereich verlassen ist – und verschwindet wieder, wo es ohnehin um den Download geht. */
.dock { display: none; }

/* ---------------------------------------------------------------- Impressum & Datenschutz */

.legal-page .lang { margin-left: auto; }
.legal-back { color: var(--text); font-size: 15px; font-weight: 600; }
.legal-back:hover { color: var(--text); }

.legal { padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); }
.legal h1 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -0.035em; }
.legal .legal-stand { margin: 0 0 clamp(28px, 4vw, 44px); color: var(--faint); font-size: 14px; }
.legal .legal-note {
    margin: 0 0 28px;
    padding: 12px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    font-size: 14px;
}
.legal h2 { margin: 44px 0 12px; font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.legal h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.legal p, .legal li { color: var(--muted); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 0 0 6px; }
.legal b, .legal strong { color: var(--text); }
.legal a { color: var(--violet-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(109, 40, 217, 0.4); }
.legal a:hover { color: var(--violet-900); text-decoration-color: currentColor; }
.legal address { margin: 0 0 14px; color: var(--text); font-style: normal; line-height: 1.7; }
.legal .legal-card {
    margin: 0 0 20px;
    padding: 18px 22px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
}
.legal .legal-card > :last-child { margin-bottom: 0; }
.legal .legal-todo { color: var(--danger); font-weight: 650; }
.legal-toc { margin: 0 0 8px; padding: 0; list-style: none; columns: 2 280px; column-gap: 32px; }
.legal-toc li { margin: 0 0 6px; break-inside: avoid; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Einblenden */

/* Das Skript setzt Deckkraft, Lage und Größe direkt aus der Lage des Elements im Bild: Es steigt beim Hochscrollen
   nach und nach auf und beim Zurückscrollen wieder hinab – nichts springt. Nur was gerade im Bild ist, bekommt eine
   eigene Ebene (spart Speicher, hält das Scrollen flüssig). */
.reveal.is-live { will-change: transform, opacity; }

/* Einleitungstexte füllen sich Wort für Wort mit Licht, während man daran vorbeiscrollt: Die Deckkraft jedes Wortes
   setzt das Skript (nur für die Wörter, die sich gerade ändern). Der Startwert steht hier, damit auch Wörter, die das Skript
   noch nicht erreicht hat, gleich gedämpft sind – statt hell zu stehen und erst an der Füllfront abzudunkeln. */
.fill .w { opacity: 0.55; }

/* ---------------------------------------------------------------- Kleinere Bildschirme */

@media (max-width: 1080px) {
    .features { grid-template-columns: repeat(2, 1fr); }
    .feature, .feature.f-3 { grid-column: span 1; }
    .feature.f-4 { grid-column: span 2; }
    /* Die letzte Karte teilt sich die Zeile mit der vorletzten. */
    .feature.f-4:nth-child(9) { grid-column: span 1; flex-direction: column; align-items: stretch; }
    .feature.f-4:nth-child(9) .fx { flex: none; margin-top: auto; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .nav-links a { padding: 8px 10px; }
}

/* Zwischen Handy-Menü und breiter Leiste ist es eng (Griechisch, Französisch, Italienisch): etwas kompakter. */
@media (min-width: 921px) and (max-width: 1180px) {
    .nav-inner { gap: 10px; padding-left: 16px; }
    .nav-links { gap: 0; }
    .nav-links a { padding: 8px 8px; font-size: 14.5px; }
    .nav-cta { padding: 9px 13px; }
    .brand { font-size: 17px; }
}

@media (max-width: 920px) {
    .is-story .story-pin { padding: 84px 0 70px; }
    .is-story .view-copy::before { margin-bottom: 8px; }
    .dock {
        position: fixed;
        inset: auto 16px calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 55;
        display: block;
        transform: translateY(calc(100% + 40px));
        transition: transform 0.5s var(--ease);
    }
    .dock.is-on { transform: none; }
    .dock .btn { box-shadow: 0 18px 44px -10px rgba(139, 92, 246, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.1); }
    .has-dock .lang-suggest { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { text-align: center; }
    .hero-copy .lead { margin-inline: auto; }
    .hero-actions, .hero-meta { justify-content: center; }
    .tv-hero { transform: none; }
    .hero-visual:hover .tv-hero { transform: none; }
    .float-a { left: 8px; bottom: -26px; }
    .float-b { right: 8px; top: -26px; }

    .gallery .view { grid-template-columns: 1fr; }
    .view-copy { text-align: center; }
    .downloads, .details, .check { grid-template-columns: 1fr; }
    .guide { grid-template-columns: 1fr; }

    /* Auf dem Handy ist die Pille fast deckend, ohne Weichzeichner (der kostet beim Scrollen Leistung). */
    .nav-inner, .nav.is-scrolled .nav-inner, .nav.is-open .nav-inner {
        height: 60px;
        padding: 0 8px 0 16px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .lang { margin-left: auto; }

    /* Das Menü: ein großes weißes Blatt unter der Kopfzeile, davor die abgedunkelte Seite. Es ist immer im Baum und
       wird nur ein- und ausgeblendet, damit es weich auf- und zugeht. */
    .nav::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(27, 20, 51, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s var(--ease);
    }
    .nav.is-open::before { opacity: 1; pointer-events: auto; }
    html.menu-open { overflow: hidden; }

    .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
        padding: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--line-strong);
        border-radius: 30px;
        background: #fff;
        box-shadow: 0 44px 90px -26px rgba(40, 20, 90, 0.6);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-14px) scale(0.97);
        transform-origin: 70% 0;
        pointer-events: none;
        transition: opacity 0.25s var(--ease), transform 0.45s var(--ease), visibility 0s 0.45s;
    }
    .nav.is-open .nav-links {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
    }
    .nav-links a:not(.nav-sheet-cta) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 18px;
        border-radius: 18px;
        font-size: 21px;
        font-weight: 650;
        letter-spacing: -0.015em;
    }
    .nav-links a:not(.nav-sheet-cta)::after {
        content: "";
        width: 20px;
        height: 20px;
        flex: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform 0.3s var(--spring);
    }
    .nav-links a:not(.nav-sheet-cta):hover::after, .nav-links a:not(.nav-sheet-cta):active::after { transform: translateX(4px); }
    .nav-links a:active { background: rgba(124, 58, 237, 0.12); }
    .nav-links a.nav-sheet-cta {
        display: flex;
        margin-top: 8px;
        padding: 17px 26px;
        font-size: 17px;
        color: #fff;
        background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
    }
    .nav-links a.nav-sheet-cta:hover { color: #fff; }
    .nav.is-open .nav-links > * { animation: sheet-in 0.55s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 70ms); }
    .nav-links > :nth-child(2) { --i: 1; }
    .nav-links > :nth-child(3) { --i: 2; }
    .nav-links > :nth-child(4) { --i: 3; }
    .nav-links > :nth-child(5) { --i: 4; }
    .nav-links > :nth-child(6) { --i: 5; }

    /* Der Knopf: dunkle Scheibe mit weißen Strichen – so gut zu sehen wie nichts sonst in der Kopfzeile. */
    .nav-toggle {
        display: grid;
        place-content: center;
        gap: 6px;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--text);
        box-shadow: 0 10px 22px -10px rgba(27, 20, 51, 0.7);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.3s var(--ease), transform 0.3s var(--spring);
    }
    .nav-toggle:active { transform: scale(0.9); }
    .nav-toggle span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform 0.45s var(--spring); }
    .nav.is-open .nav-toggle { background: var(--violet-600); }
    .nav.is-open .nav-toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
    .nav.is-open .nav-toggle span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
}

@keyframes sheet-in {
    from { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 640px) {
    /* Download-Karten: Die Knöpfe durften nicht umbrechen und machten die Karte auf schmalen Handys breiter als den Rest
       (6 px bei 360 px). Jetzt umbrechen sie bei Bedarf, und die Karten dürfen auf Spaltenbreite schrumpfen. */
    .downloads > *, .downloads-mobile > * { min-width: 0; }
    .dl .btn { white-space: normal; text-align: center; line-height: 1.25; }
    .dl { padding: 26px 22px; }
    .is-story .phone-stage .phone:nth-child(2) { display: none; }
    .is-story .phone-stage .phone:nth-child(1) { flex-basis: 168px; }
    .story-label { display: none; }
    .container { width: calc(100% - 32px); }
    .nav-inner { gap: 12px; }
    .nav-cta { display: none; }
    .legal-back { display: none; }
    .features, .steps { grid-template-columns: 1fr; }
    .feature, .feature.f-3, .feature.f-4 { grid-column: auto; }
    .feature.f-4 { flex-direction: column; align-items: stretch; }
    .feature.f-4 .fx { flex: none; margin-top: auto; }
    .strip-grid { grid-template-columns: repeat(2, 1fr); }
    .strip-grid > div:nth-child(3) { border-left: 0; }
    .strip-grid > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .hero-actions .btn { flex: 1 1 100%; }
    .float-card { display: none; }
    .phone-hero { display: none; }
    .phone-stage .phone:nth-child(2) { margin-top: 20px; }
    .tabs { border-radius: 20px; }
    .tabs [role="tab"] { flex: 1 1 100%; justify-content: center; }
    .check-row { flex-direction: column; }
    .faq summary { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- Während des Scrollens */

/* Solange gescrollt wird, ruhen die Dauer-Animationen (Verlauf in der Schrift, Szenen in den Karten, Fokus in den
   Nachbauten): Das Zeichnen gehört dann allein dem Scrollen. Danach laufen sie ohne Sprung weiter.
   WICHTIG: Rechts in jeder Regel steht nur eine Klasse – nie „*“ oder ein Tag. Sonst muss der Browser beim Umschalten der
   Klasse die Stile der ganzen Seite neu berechnen, und das passiert bei jedem Scrollbeginn. */
html.is-scrolling .grad,
html.is-scrolling .fx-row, html.is-scrolling .fx-pill, html.is-scrolling .fx-chip, html.is-scrolling .fx-dot,
html.is-scrolling .fx-orb, html.is-scrolling .fx-ok, html.is-scrolling .fx-shield, html.is-scrolling .fx-switch,
html.is-scrolling .fx-bar2, html.is-scrolling .fx-fill, html.is-scrolling .fx-knob,
html.is-scrolling .fx-shield::before, html.is-scrolling .fx-shield::after, html.is-scrolling .fx-ok::after, html.is-scrolling .fx-switch::after,
html.is-scrolling .ui-row, html.is-scrolling .ui-no, html.is-scrolling .ui-badge, html.is-scrolling .m-row { animation-play-state: paused; }

/* ---------------------------------------------------------------- Schlanker Modus */

/* Das Skript setzt html.is-lite, wenn das Scrollen auf dem Gerät über längere Zeit zu langsam ist (siehe checkSpeed in
   index.php). Dann entfällt, was am meisten Rechenleistung kostet – der Inhalt bleibt derselbe. Hier dürfen die Regeln
   breit sein: Sie greifen höchstens einmal. */
html.is-lite .nav-inner { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.97); }
html.is-lite .aurora span, html.is-lite .grad, html.is-lite .float-card, html.is-lite .phone-hero,
html.is-lite .fx, html.is-lite .fx *, html.is-lite .ui-row, html.is-lite .ui-no, html.is-lite .ui-badge, html.is-lite .m-row,
html.is-lite .fx-shield::before, html.is-lite .fx-shield::after, html.is-lite .fx-ok::after, html.is-lite .pulse::after { animation: none !important; }
html.is-lite .tv, html.is-lite .phone { box-shadow: 0 24px 44px -26px rgba(40, 20, 90, 0.55); }
html.is-lite .feature, html.is-lite .detail, html.is-lite .dl, html.is-lite .steps li, html.is-lite .faq details { box-shadow: none; }

/* ---------------------------------------------------------------- Anleitungen und Gerätekarten (lib/guides.php, Startseite) */

.g-hero { padding: clamp(24px, 4vw, 56px) 0 clamp(12px, 2vw, 24px); }
.g-hero .grad { animation: shine 10s linear infinite; }
.g-crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--faint); font-size: 14px; }
.g-crumbs li + li::before { content: "›"; margin-right: 10px; color: var(--violet-400); }
.g-crumbs a { color: var(--violet-700); font-weight: 600; }
.g-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-hero h1 { margin-top: 0; font-size: clamp(34px, 5vw, 58px); }
:lang(fr) .g-hero h1, :lang(it) .g-hero h1 { font-size: clamp(32px, 4.6vw, 52px); }
:lang(el) .g-hero h1 { font-size: clamp(30px, 4.2vw, 48px); }
.g-hero .lead { max-width: 680px; }
.g-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.g-tabs a {
    display: inline-flex;
    padding: 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--panel-strong);
    color: var(--text);
    font-size: 14.5px;
    font-weight: 600;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.g-tabs a:hover { border-color: rgba(124, 58, 237, 0.45); color: var(--violet-700); }
.g-tabs a[aria-current="page"] { border-color: var(--violet-600); background: var(--violet-600); color: #fff; }

.g-body { padding: 0 0 clamp(20px, 3vw, 36px); }
.g-body section { scroll-margin-top: 96px; }
.g-body h2 { margin: clamp(34px, 5vw, 54px) 0 14px; font-size: clamp(24px, 3vw, 32px); font-weight: 750; letter-spacing: -0.022em; line-height: 1.15; }
.g-body h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.g-body p, .g-body li { color: var(--muted); font-size: 17px; }
.g-body p { margin: 0 0 16px; }
.g-body b, .g-body strong { color: var(--text); }
.g-body a { color: var(--violet-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(109, 40, 217, 0.4); }
.g-body a:hover { color: var(--violet-900); text-decoration-color: currentColor; }
.g-body code { padding: 2px 8px; border-radius: 7px; background: rgba(139, 92, 246, 0.12); color: var(--violet-700); font-size: 0.95em; }
.g-list { margin: 0 0 18px; padding-left: 22px; }
.g-list li { margin: 0 0 8px; }
.guide.g-steps { grid-template-columns: 1fr; gap: 16px; margin: 6px 0 20px; }
.g-steps li { font-size: 17px; }
.g-note {
    margin: 18px 0 20px;
    padding: 16px 20px;
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-left: 4px solid var(--violet-500);
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.07);
    color: var(--text);
    font-size: 16px;
}
.g-body .g-note { color: var(--text); font-size: 16px; }
.g-code {
    margin: 0 0 20px;
    padding: 16px 18px;
    overflow-x: auto;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: #1b1433;
    color: #ede9fe;
    font: 14px/1.65 var(--mono);
}
.g-body .g-code code { padding: 0; background: none; color: inherit; font-size: inherit; }
.g-updated { margin: clamp(34px, 5vw, 52px) 0 0; color: var(--faint); font-size: 14px; }
.g-body .g-updated { color: var(--faint); font-size: 14px; }

.g-faq { padding: 0 0 clamp(36px, 5vw, 64px); }
.g-faq h2 { margin: clamp(28px, 4vw, 44px) 0 18px; font-size: clamp(24px, 3vw, 32px); font-weight: 750; letter-spacing: -0.022em; }
.g-faq .faq a { color: var(--violet-700); text-decoration: underline; text-underline-offset: 3px; }
.g-related-section { padding-top: clamp(24px, 3vw, 40px); }
.g-related-title { margin: 0 0 22px; font-size: clamp(24px, 3vw, 32px); font-weight: 750; letter-spacing: -0.022em; text-align: center; }

.g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.g-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel-strong);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.g-card:hover { transform: translateY(-3px); border-color: rgba(124, 58, 237, 0.35); box-shadow: var(--shadow-glow); }
.g-card-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(139, 92, 246, 0.12); color: var(--violet-700); }
.g-card h3 { font-size: 19px; line-height: 1.2; }
.g-card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.g-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--violet-700); font-size: 15px; font-weight: 650; }
.g-more .ico { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.g-card:hover .g-more .ico { transform: translateX(3px); }

@media (max-width: 640px) {
    .g-body p, .g-body li, .g-steps li { font-size: 16.5px; }
}
html.is-lite .g-card { box-shadow: none; }

/* Hinweis auf die Nutzungsbedingungen unter den Downloads */
.dl-legal { max-width: 760px; margin-left: auto; margin-right: auto; }
.dl-legal a { color: var(--violet-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(109, 40, 217, 0.4); }
.dl-legal a:hover { color: var(--violet-900); text-decoration-color: currentColor; }