/* =============================================================================
   DELTA METRON — site.css  (oeffentliche Seiten: index, impressum, datenschutz)
   ─────────────────────────────────────────────────────────────────────────
   Braucht tokens.css und shared.css davor. Die oeffentlichen Seiten sind nur
   Ocean (data-theme="dark" + data-variant="blue", fest im HTML). Hier steht nur,
   was es in der App nicht gibt — keine eigenen Farben, keine zweite Machart
   eines Bauteils (Register 0b/0c). Neubau 06.10.2026 nach Mockup v71.
============================================================================= */

/* ── Grundlage ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
    margin: 0;
    font-family: var(--f-main);
    font-size: var(--fs-sl-md);
    font-weight: var(--fw-normal);
    line-height: 1.6;
    color: var(--t1);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, textarea, kbd { font: inherit; }
/* Tastatur-Fokus: Ring fuer Knoepfe und Links. Textfelder nimmt shared.css aus
   (.set-input:focus-visible — Fokus ueber den Rahmen, Register 5.1c). */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--t1) 35%, transparent); outline-offset: 2px; }
.s-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--main-padding); }
[hidden] { display: none !important; }

/* ── Schrift: App-Skala (Register 1) + zwei Anzeige-Stufen NUR hier ─────── */
.s-d1 { margin: 0; font-size: clamp(44px, 5.4vw, 72px); line-height: 1.02; font-weight: var(--fw-semibold); letter-spacing: -0.035em; }
.s-d2 { margin: 0; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-wrap: balance; }
.s-hl { color: var(--brand-acc); }
.s-lead { margin: 0; font-size: var(--fs-sl-bd); line-height: 1.6; color: var(--t2); }
.s-small { margin: 0; font-size: var(--fs-sl-sm); line-height: 1.5; color: var(--t3); }
.s-small a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }

/* ── Knopf-Groesse fuer Finger (nur hier, Register 4.0a) ────────────────── */
.dm-main.s-lg, .dm-act.s-lg { height: 48px; padding: 0 var(--sp-sl-lg); font-size: var(--fs-sl-md); }
.s-short { display: none; }

/* ── Pillen: Flaeche statt Rahmen, eckig (Register 3.3) ───────────────── */
.s-pill { display: inline-flex; align-items: center; gap: var(--sp-sl-sm); height: 26px; padding: 0 var(--sp-sl-sm); border-radius: var(--r-sl-inner); background: var(--neutral-bg); color: var(--t2); font-size: var(--fs-sl-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.s-live { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
.s-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp-sl-sm); border-radius: var(--r-sl-inner); background: var(--neutral-bg); color: var(--t2); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.s-tag.is-gold { background: var(--today-bg); color: var(--today); }

/* ── Glas (Token --glass-*, wie Chartkarte, Steuerleiste, Schnellzugriff) ── */
.s-glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: 0 0 0 1px var(--glass-edge); }
/* Licht hinter Glas, Machart wie .sa-glow: weiche Flecken in den Modellfarben,
   nach aussen per Maske ausgeblendet — keine harte Kante. */
.s-glow { position: absolute; z-index: -1; inset: -10% 0; pointer-events: none;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 85%);
            mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 85%); }
.s-glow i { position: absolute; top: 20%; width: 34%; height: 60%; border-radius: 50%; filter: blur(72px); }
.s-glow i:nth-child(1) { left: 6%;  background: color-mix(in srgb, var(--dmkc-dcf) 34%, transparent); }
.s-glow i:nth-child(2) { left: 33%; background: color-mix(in srgb, var(--dmkc-grw) 30%, transparent); }
.s-glow i:nth-child(3) { left: 60%; background: color-mix(in srgb, var(--dmkc-ev)  30%, transparent); }

/* ── Leiste: klebt oben, durchsichtig bis gescrollt wird ────────────────── */
.s-top { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; transition: background .2s, border-color .2s; }
.s-top.is-scrolled { background: var(--bg); border-bottom-color: var(--bdr); }
.s-nav { display: flex; align-items: center; gap: var(--sp-sl-sm); height: 64px; }
.s-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; font-size: var(--fs-sl-bd); font-weight: var(--fw-semibold); white-space: nowrap; }
.s-brand img { width: 30px; height: 30px; }
.s-navlink { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--sp-sl-md); border-radius: var(--r-sl-control); color: var(--t2); font-size: var(--fs-sl-md); font-weight: var(--fw-medium); }
.s-navlink:hover { color: var(--t1); background: var(--sel-hover); }
.s-vsep { width: 1px; height: 24px; background: var(--bdr); margin: 0 var(--sp-sl-sm); }

/* ── Hero: linksbuendig, Zaehler rechts ─────────────────────────────────── */
.s-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-sl-lg) 48px; align-items: start; padding-top: 88px; }
.s-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sl-lg); }
.s-sub { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--t2); }
.s-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: var(--sp-sl-sm); }
.s-cta .s-small { max-width: 540px; font-size: 13px; }   /* DE und EN beide 2 Zeilen — der Sprachwechsel laesst die Seite nicht springen */
.s-count { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 4px; }
.s-count-n { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.s-count-n b { font-size: 72px; font-weight: var(--fw-semibold); letter-spacing: -.04em; }
.s-count-n span { font-size: 20px; color: var(--t2); }
.s-count-l { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--t2); }
.s-count .s-bar { width: 160px; }
body[data-seats-unknown] .s-count, body[data-seats-unknown] .s-seats { display: none; }
/* Fuellstand: gruen > 50 frei, gelb 21–50, rot <= 20 (rot = Fuellstand, nicht
   „negativ“ — bewusste Ausnahme, Register 0c). */
.s-bar { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--t1) 8%, transparent); overflow: hidden; }
.s-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--pos); transition: width .6s, background .3s; }
[data-lvl="mid"] .s-bar i { background: var(--today); }
[data-lvl="low"] .s-bar i { background: var(--neg); }

/* ── Trailer: dezentes Fenster (Bildflaeche + Leiste), Kinomodus ─────── */
.s-film { padding-top: 64px; }
/* Ganz sichtbar auch auf kleinen Bildschirmen (MacBook): das Fenster wird nie
   hoeher als der sichtbare Bereich unter der Leiste — Bild 16:9 + Bedienleiste
   (~72px) + Seitenleiste (64px) + Luft (32px). Ist es dadurch schmaler als die
   Inhaltsbreite, steht es mittig. */
.s-film-stage { max-width: calc((100vh - 168px) * 16 / 9); max-width: calc((100dvh - 168px) * 16 / 9); margin: 0 auto;
    position: relative; overflow: hidden; border-radius: 12px; background: var(--bg);
    box-shadow: inset 0 0 0 1px var(--bdr), 0 30px 90px rgba(0,0,0,.55), 0 0 120px color-mix(in srgb, var(--brand-acc) 12%, transparent); }
.s-film-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--bdr); pointer-events: none; z-index: 2; }   /* EIN Rahmen ueber allem */
.s-screen { position: relative; aspect-ratio: 16 / 9; background: #000; }
/* Gleich dezenter Rand, egal ob das Bild am Rand hell oder dunkel ist: eine
   leise Innenkante dunkelt die aeussersten Pixel ab (wie beim Standbild). */
.s-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 28px rgba(0,0,0,.45); }
.s-screen video, .s-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.s-still { transition: opacity .6s ease; pointer-events: none; }   /* Standbild: vor dem Start und nach dem Film */
.s-still.is-off { opacity: 0; }
.s-track i.is-count { transition: width 10s linear; }   /* 10 s Standbild: die Leiste laeuft einmal durch */
/* Leiste im Fenster unter dem Bild: dunkel, Bedienelemente weiss wie in
   einem Videoplayer (bewusste Ausnahme von --t1/--t2, Register 0c). */
.s-player { padding: 4px 16px 6px; background: #000; border-top: 1px solid var(--bdr-soft); }
/* Kinomodus: dasselbe Fenster gross in der Mitte, Seite verdeckt — kein
   Browser-Vollbild. Der Platz in der Seite bleibt reserviert (min-height). */
.s-cine-bg { position: fixed; inset: 0; z-index: 55; background: var(--bg); }   /* deckend: von der Seite ist dahinter nichts zu sehen */
.s-film-stage.is-cine { position: fixed; z-index: 56; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; margin: 0;
    width: min(92vw, calc((92vh - 64px) * 16 / 9)); }
.s-prog { position: relative; display: flex; height: 14px; align-items: center; cursor: pointer; touch-action: none; }
.s-prog.is-wait { cursor: progress; }   /* Springen erst, wenn die Datei ganz geladen ist */   /* Ziehen ohne Seiten-Scroll */
.s-track { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); transition: height .12s; }
.s-prog:hover .s-track, .s-prog.is-drag .s-track { height: 5px; }
.s-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--brand-acc); }
.s-knob { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--brand-acc); pointer-events: none; transform: scale(0); transition: transform .12s; }
.s-prog:hover .s-knob, .s-prog.is-drag .s-knob { transform: scale(1); }
.s-ctl { display: flex; align-items: center; gap: 2px; height: 40px; }
.s-ico { width: 36px; height: 36px; border: 0; border-radius: var(--r-sl-control); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.s-ico:hover { background: rgba(255,255,255,.12); }
.s-ico svg { width: 20px; height: 20px; }
/* Lautstaerke wie bei YouTube: Regler faehrt beim Darueberfahren neben dem
   Lautsprecher aus. Weisser Fuellstand (--v), Rest halbtransparent. Auf
   Touch-Geraeten aus — dort regelt das Geraet die Lautstaerke (iOS laesst
   sie per Skript ohnehin nicht setzen). */
.s-volwrap { display: inline-flex; align-items: center; }
.s-vol { -webkit-appearance: none; appearance: none; width: 0; height: 36px; margin: 0; padding: 0; opacity: 0; background: transparent; cursor: pointer;
    transition: width .2s ease, opacity .2s ease, margin .2s ease; }
.s-volwrap:hover .s-vol, .s-vol:focus-visible, .s-vol.is-drag { width: 72px; margin: 0 8px 0 2px; opacity: 1; }
.s-vol::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #fff var(--v, 100%), rgba(255,255,255,.25) var(--v, 100%)); }
.s-vol::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #fff var(--v, 100%), rgba(255,255,255,.25) var(--v, 100%)); }
.s-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 0; }
.s-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
@media (pointer: coarse) { .s-vol { display: none; } }
.s-time { margin-left: 6px; font-size: 13px; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.s-yt { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: auto; padding: 0 10px; border-radius: var(--r-sl-control); color: rgba(255,255,255,.85); font-size: 13px; }
.s-yt:hover { background: rgba(255,255,255,.12); color: #fff; }
.s-yt .yt-play { fill: #000; transition: fill .15s; }   /* in Ruhe: Dreieck in Leistenfarbe */
.s-yt svg { transition: color .15s; }
.s-yt:hover svg { color: #FF0000; }                   /* beim Darueberfahren: YouTube-Rot … */
.s-yt:hover .yt-play { fill: #fff; }                  /* … mit weissem Dreieck, wie im Fuss */
.s-yt svg { width: 20px; height: 20px; }

/* ── Zahlen-Band: Haarlinie oben und unten, dazwischen keine ────────────── */
.s-facts-band { margin-top: 72px; }
.s-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--sp-sl-lg) 0; border-top: 1px solid var(--bdr-soft); border-bottom: 1px solid var(--bdr-soft); }
.s-fact { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.s-fact b { font-size: 40px; font-weight: var(--fw-semibold); letter-spacing: -.02em; line-height: 1.1; }
.s-fact span { font-size: 15px; font-weight: var(--fw-medium); color: var(--t2); }

/* ── Abschnitte: Kopf linksbuendig an der Inhaltskante ──────────────────── */
.s-sec { padding-top: 144px; margin-top: 144px; }
.s-sec.is-first { margin-top: 0; padding-top: 120px; }
.s-sec.is-line { position: relative; }
.s-sec.is-line::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--bdr); }
.s-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sl-md); margin-bottom: 48px; }
.s-head .s-lead { max-width: 720px; }
.s-src { margin-top: var(--sp-sl-md); }

/* ── Karten mit App-Ausschnitt (Register 0c „Karten mit Ausschnitt“) ────── */
.s-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sl-lg); }
.s-bento.is-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.s-w2 { grid-column: span 2; }
.is-six .s-c2 { grid-column: span 2; } .is-six .s-c3 { grid-column: span 3; } .is-six .s-c4 { grid-column: span 4; }
.s-tool { position: relative; display: flex; flex-direction: column; gap: var(--sp-sl-md); height: 400px; padding: var(--sp-sl-lg) var(--sp-sl-lg) 0; border-radius: var(--r-sl-card); overflow: hidden; }
.s-tool.is-row1 { height: 360px; }
.s-tool-h { display: flex; align-items: center; gap: 12px; min-height: 40px; padding-right: 72px; }
.s-tool-h h3 { margin: 0; font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.2; }
.s-ic { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-acc) 18%, transparent); color: var(--brand-acc); }
.s-ic svg { width: 20px; height: 20px; }
.s-keys { position: absolute; top: 34px; right: var(--sp-sl-lg); display: flex; gap: 4px; }
/* Bildflaeche: das Bild beginnt eingerueckt und laeuft rechts und unten aus
   der Karte. Ein Massstab fuer alle Ausschnitte: 60 % der App-Groesse. */
.s-peek { flex: 1; position: relative; margin-right: calc(-1 * var(--sp-sl-lg)); overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 70%, transparent), linear-gradient(to bottom, #000 55%, transparent); -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, #000 70%, transparent), linear-gradient(to bottom, #000 55%, transparent); mask-composite: intersect; }
.s-shot { position: absolute; left: 0; top: 0; display: block; max-width: none; height: auto; zoom: var(--zt, .6); }
.s-shot.is-win { zoom: var(--zw, .54); }   /* Suchfenster: Fenster, keine Karte — passt so ganz in die kleine Karte */
/* Passt der Inhalt ganz hinein: linksbuendig, vertikal mittig, nichts ausblenden. */
.s-peek.is-full { -webkit-mask-image: none; mask-image: none; }
.s-peek.is-full .s-shot, .s-peek.is-center .s-shot { top: 50%; transform: translateY(-50%); }
.s-peek.is-center:not(.is-full) { -webkit-mask-image: linear-gradient(to right, #000 75%, transparent); mask-image: linear-gradient(to right, #000 75%, transparent); }
.s-peek.is-fitw { -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }

/* ── Logo-Kreise um die Karten (Plaetze berechnet in site.js) ───────────── */
#aktien { position: relative; }
.s-bubs { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; }
.s-bub { position: absolute; transform: translate(-50%, -50%); animation: s-drift var(--dur) ease-in-out infinite alternate; }
.s-bub-fx { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--surf-2); box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: opacity .8s ease; }
.s-bub-fx.is-out { opacity: 0; }
.s-bub-fx > .dm-logo-wrap { width: 100% !important; height: 100% !important; }
.s-bub-fx > img { width: 64%; height: 64%; object-fit: contain; }
.s-bub-fx > img.dm-logo-applied { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.s-bub-fb { font-size: 11px; font-weight: var(--fw-semibold); color: var(--t1); }
@keyframes s-drift { to { translate: var(--dx) var(--dy); } }

/* ── Drei Modelle: drei Arten nebeneinander, kein Umschalter ────────────── */
.s-types { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sl-lg); }
.s-type { display: flex; flex-direction: column; gap: 20px; padding: var(--sp-sl-lg); border-radius: var(--r-sl-card); }
.s-type-h { display: flex; flex-direction: column; gap: 2px; }
.s-type-h b { font-size: 18px; font-weight: var(--fw-semibold); }
.s-type-h span { font-size: 13px; color: var(--t3); }
.s-type ul { margin: 0; padding: 0; list-style: none; }
.s-type li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--bdr-soft); }
.s-type li i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--mc); }
.s-type li b { min-width: 120px; font-size: var(--fs-sl-md); font-weight: var(--fw-semibold); color: var(--mc); }
.s-type li span { font-size: var(--fs-sl-md); color: var(--t2); }
.s-type .is-p1 { --mc: var(--dmkc-dcf); } .s-type .is-p2 { --mc: var(--dmkc-grw); } .s-type .is-p3 { --mc: var(--dmkc-ev); }
.s-facts-list { display: flex; flex-wrap: wrap; gap: var(--sp-sl-sm) 40px; margin: 40px 0 0; padding: 0; list-style: none; color: var(--t2); font-size: var(--fs-sl-md); }
.s-facts-list li { display: inline-flex; align-items: center; gap: var(--sp-sl-sm); }
.s-facts-list svg, .s-checks svg { width: 16px; height: 16px; flex: none; color: var(--brand-acc); }

/* ── Preise: beide Karten teilen EIN Zeilenraster (subgrid) ─────────────── */
.s-prices { margin-top: 120px; background: var(--bg-alt); }
.s-prices > .s-wrap { padding-top: 120px; padding-bottom: 120px; }
.s-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sl-lg); max-width: 1064px; }
.s-found { position: relative; isolation: isolate; }
.s-plan { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: var(--r-sl-card); background: var(--card); box-shadow: 0 0 0 1px var(--bdr); }
.s-plan.s-glass { height: 100%; background: var(--glass-bg); box-shadow: 0 0 0 1px var(--glass-edge); }
.s-ptitle h3 { margin: 0; font-size: 22px; font-weight: var(--fw-semibold); }
.s-ptitle p { margin: 4px 0 0; font-size: var(--fs-sl-md); color: var(--t2); }
.s-amt { display: flex; align-items: baseline; gap: 10px; }
.s-amt b { font-size: 44px; font-weight: var(--fw-semibold); letter-spacing: -.02em; line-height: 1; }
.s-amt span { font-size: var(--fs-sl-md); color: var(--t2); }
.s-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.s-checks li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sl-md); }
.s-checks li.is-first { font-weight: var(--fw-semibold); }
.s-rule { margin: 0; font-size: var(--fs-sl-sm); color: var(--t3); }
.s-plan .dm-main, .s-plan .dm-act { width: 100%; }
/* Glasknopf in der Founding-Karte: dasselbe Glas wie die Karte, tuerkis getoent */
.s-plan .dm-main.is-glass { background: color-mix(in srgb, var(--brand-acc) 22%, var(--glass-bg)); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-acc) 45%, transparent); color: var(--t1); }
.s-plan .dm-main.is-glass:hover { background: color-mix(in srgb, var(--brand-acc) 34%, var(--glass-bg)); }
.s-vat { margin-top: var(--sp-sl-lg); }
@media (min-width: 761px) {
    .s-plans { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .s-found { display: grid; grid-row: span 7; grid-template-rows: subgrid; }
    .s-plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 20px; }
    .s-plan .s-tag { grid-row: 1; justify-self: start; } .s-ptitle { grid-row: 2; } .s-amt { grid-row: 3; }
    .s-seats { grid-row: 4; align-self: center; } .s-plan .s-checks { grid-row: 5; } .s-rule { grid-row: 6; }
    .s-plan > .dm-main, .s-plan > .dm-act { grid-row: 7; align-self: end; }
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.s-faq-sec { padding-top: 120px; }
.s-faq { max-width: 800px; border-top: 1px solid var(--bdr-soft); }
.s-faq details { border-bottom: 1px solid var(--bdr-soft); }
.s-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sl-md); min-height: 64px; cursor: pointer; font-size: 16px; font-weight: var(--fw-semibold); list-style: none; -webkit-user-select: none; user-select: none; }   /* schnelles Auf/Zu markiert keinen Text */
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary svg { flex: none; width: 16px; height: 16px; color: var(--t2); transition: transform .2s; }
.s-faq details[open] summary svg { transform: rotate(180deg); }
.s-faq details p { margin: 0; padding-bottom: var(--sp-sl-lg); color: var(--t2); }
.s-faq details p + p { margin-top: calc(-1 * var(--sp-sl-sm)); }   /* Absaetze einer Antwort enger als Antwort zu Frage */

/* ── Anmeldefenster: Fensterstandard (Register 2.6), Felder aus shared.css ─ */
.s-dlg { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: var(--sp-sl-md); background: rgba(0,0,0,.60); }
.s-dlg.is-open { display: flex; }
.s-box { position: relative; display: flex; flex-direction: column; gap: var(--sp-sl-md); width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; padding: 32px; border-radius: var(--r-sl-card); background: var(--bg); box-shadow: 0 0 0 1px var(--bdr), 0 24px 64px rgba(0,0,0,.6); }
.s-box h3 { margin: 0; font-size: 22px; font-weight: var(--fw-semibold); }
/* Formular: Abstaende wie im Fenster selbst — Titel, Text, Felder, Knopf mit Luft */
.s-form { display: flex; flex-direction: column; gap: 20px; }
.s-form h3 { padding-right: 96px; }                     /* Platz fuer „Schliessen“ */
.s-form .s-lead { margin-top: -8px; }                    /* Text gehoert zum Titel */
.s-form .dm-main { margin-top: var(--sp-sl-sm); }
.s-box .s-lead { font-size: 15px; }
.s-box .set-field { margin-bottom: 0; }
.s-box .set-input:-webkit-autofill, .s-box .set-input:-webkit-autofill:hover, .s-box .set-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; }   /* Fenster ist --bg, nicht --card */
.s-box .set-input[aria-invalid="true"] { border-color: var(--neg); }
.s-opt { margin-left: 4px; font-weight: var(--fw-normal); color: var(--t3); }
.s-box .dm-main { width: 100%; }
.s-x { position: absolute; top: 12px; right: 12px; }
.s-err { margin: 0; font-size: var(--fs-sl-sm); color: var(--neg); }
.s-err:empty { display: none; }
.s-done { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.s-done-ck { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--pos-bg); color: var(--pos); }
.s-done-ck svg { width: 24px; height: 24px; }
.s-done-n { font-size: 56px; font-weight: var(--fw-semibold); letter-spacing: -.03em; line-height: 1; }

/* ── Fuss: shared.css; hier nur Lage ────────────────────────────────────── */
.s-footer { margin-top: 144px; }
.s-footer .dm-brand-logo { width: 34px; height: 34px; }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .s-types { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .s-bento, .s-bento.is-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-w2, .is-six .s-c4 { grid-column: span 2; }
    .is-six .s-c2, .is-six .s-c3 { grid-column: span 1; }
}

/* ── Handy ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    :root { --main-padding: 16px; }
    .s-nav { height: 56px; }
    .s-navlink, .s-vsep { display: none; }
    .s-nav .dm-main .s-long { display: none; }
    .s-nav .dm-main .s-short { display: inline; }
    .s-hero { padding-top: 48px; grid-template-columns: minmax(0, 1fr); }
    /* Handy: Reihenfolge Pille · Ueberschrift · Satz · Knopf · Zaehler · Hinweis —
       der Zaehler steht dort, wo man sich entscheidet (unter dem Knopf). Die
       Huellen werden aufgeloest (display: contents), damit alles in EINER
       Spalte sortiert werden kann. */
    .s-hero-copy, .s-cta { display: contents; }
    .s-hero .s-pill { order: 1; justify-self: start; }
    .s-hero .s-d1 { order: 2; }
    .s-hero .s-sub { order: 3; }
    .s-cta .dm-main { order: 4; }
    .s-count { order: 5; flex-direction: row; align-items: baseline; gap: var(--sp-sl-sm); padding: 0; margin-top: -8px; }
    .s-cta .s-small { order: 6; margin-top: -12px; }
    .s-count-n b { font-size: 32px; }
    .s-count-n span { font-size: 15px; }
    .s-count .s-bar { display: none; }
    .s-sub { font-size: 16px; }
    .s-cta { align-items: stretch; width: 100%; }
    .s-cta .dm-main { width: 100%; }
    .s-cta .s-small { min-height: calc(3 * 1.5em); }   /* schmal: Platz fuer 3 Zeilen reserviert, gleiche Hoehe in DE und EN */
    .s-film { padding-top: 40px; }
    .s-yt span { display: none; }
    .s-player { padding: 2px 8px 4px; }
    .s-film-stage.is-cine { width: calc(100vw - 16px); }
    .s-facts-band { margin-top: 48px; }
    .s-facts { gap: var(--sp-sl-sm); }
    .s-fact b { font-size: 22px; white-space: nowrap; }
    .s-fact span { font-size: 12px; white-space: nowrap; }
    .s-sec { padding-top: 96px; margin-top: 96px; }
    .s-sec.is-first { margin-top: 0; padding-top: 72px; }
    .s-bento, .s-bento.is-six { grid-template-columns: minmax(0, 1fr); }
    .s-w2, .is-six .s-c2, .is-six .s-c3, .is-six .s-c4 { grid-column: auto; }
    .s-keys { display: none; }
    .s-tool-h { padding-right: 0; }
    .s-tool, .s-tool.is-row1 { height: 350px; }
    .s-shot { --zt: .5; }
    .s-shot.is-win { --zw: .5; }
    /* Handy: Bilder oben links, rechts und unten weich ausgeblendet */
    .s-peek.is-full .s-shot, .s-peek.is-center .s-shot { top: 0; transform: none; }
    .s-peek.is-full, .s-peek.is-center:not(.is-full) {
        -webkit-mask-image: linear-gradient(to right, #000 80%, transparent), linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-composite: source-in;
                mask-image: linear-gradient(to right, #000 80%, transparent), linear-gradient(to bottom, #000 70%, transparent); mask-composite: intersect; }
    /* Zeitreihen: das Neueste steht rechts — dort verankern, links ausblenden */
    .s-peek.is-full.is-newest .s-shot { left: auto; right: var(--sp-sl-lg); }
    .s-peek.is-full.is-newest {
        -webkit-mask-image: linear-gradient(to left, #000 80%, transparent), linear-gradient(to bottom, #000 85%, transparent);
                mask-image: linear-gradient(to left, #000 80%, transparent), linear-gradient(to bottom, #000 85%, transparent); }
    .s-facts-list { flex-direction: column; align-items: flex-start; gap: 12px; }
    .s-facts-list li { align-items: flex-start; }
    .s-facts-list svg { margin-top: 3px; }
    .s-prices { margin-top: 96px; }
    .s-prices > .s-wrap { padding-top: 72px; padding-bottom: 72px; }
    .s-plans { grid-template-columns: minmax(0, 1fr); }
    .s-found { order: -1; }
    .s-plan { padding: var(--sp-sl-lg); }
    .s-faq-sec { padding-top: 96px; }
    .s-footer { margin-top: 96px; }
}

/* ── Wer Bewegung reduziert, sieht Standbilder ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .s-bub { animation: none; }
    .s-bub-fx, .s-bar i { transition: none; }
}

/* ── Rechtstexte (Impressum, Datenschutz) ───────────────────────────────── */
.s-legal { max-width: 760px; padding-top: 72px; }
.s-legal h1 { margin: 0 0 var(--sp-sl-xl); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; font-weight: var(--fw-semibold); letter-spacing: -0.02em; }
.s-legal h1 + p { margin-top: calc(-1 * var(--sp-sl-lg)); }
.s-legal h1:not(:first-child) { margin-top: 96px; }
.s-legal h2 { margin: var(--sp-sl-xl) 0 var(--sp-sl-sm); font-size: var(--fs-sl-lg); line-height: 1.3; font-weight: var(--fw-semibold); }
.s-legal p, .s-legal li { margin: 0 0 var(--sp-sl-sm); color: var(--t2); font-size: var(--fs-sl-bd); line-height: 1.7; }
.s-legal ul { margin: 0 0 var(--sp-sl-md); padding-left: 20px; }
.s-legal a { color: var(--t1); text-decoration: underline; text-underline-offset: 2px; }
.s-legal strong { color: var(--t1); font-weight: var(--fw-semibold); }
.s-legal code { font: inherit; color: var(--t1); }