/* =====================================================================
   STARTUP ELEVATOR · Design-Kit (Standalone)
   Reines CSS, keine Abhängigkeiten. Portiert aus Leifs Macaly/TanStack-
   Landingpage (elevator.css + Inline-Styles der TSX-Komponenten).
   Mobile-first · Breakpoints 601 px (Tablet) und 901 px (Desktop-Nav).
   Einbindung: <body class="se-page"> + elevator.css (+ elevator.js im <head>)
   Übersicht und Herkunft der Klassen: DESIGN-PORT.md
   ===================================================================== */

/* ---------- 1 · Schrift: Geist (Fallback für Nicht-Apple-Geräte) ---------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/geist-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: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/geist-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;
}

/* ---------- 2 · Tokens ---------- */
:root {
  /* Farben laut Designsystem.md */
  --se-black: #000000;        /* Text, Primär-Buttons, Show-Flächen */
  --se-white: #FFFFFF;        /* Hintergrund */
  --se-green: #34C759;        /* Signal: Live, Freigabe, Schalter (Schrift darauf schwarz) */
  --se-green-dark: #248A3D;   /* Links und grüner Text auf Weiß */
  --se-fill: #F2F2F7;         /* Grau 6: Flächen, Karten, Footer */
  --se-text-2: #6E6E73;       /* Sekundärtext */
  --se-line: #E5E5EA;         /* Trennlinien, Listen-Zwischenraum */
  --se-dark-3: #2C2C2E;       /* Kacheln auf Schwarz, Hover Schwarz */
  --se-ink-3: #3A3A3C;        /* Fließtext auf Grau, Trenner auf Schwarz */
  --se-border: #D1D1D6;       /* Rahmen Knöpfe, Burger, Footer-Linie */
  /* zusätzlich in den TSX verwendet (nicht in Designsystem.md, aber Original) */
  --se-dark-1: #1C1C1E;       /* dunkle Listenzeilen, Chips, Call-Fläche */
  --se-dark-2: #242426;       /* ELEVATOR-Leiste im Call */
  --se-gray-1: #8E8E93;       /* Icons, Chevrons, Zeitstempel */
  --se-gray-2: #AEAEB2;       /* Sekundärtext auf Schwarz */
  --se-gray-3: #C7C7CC;       /* Türkanten, helle Chevrons */
  --se-green-hover: #2FB850;  /* Hover grüner Button */
  --se-row-hover: #F9F9FB;    /* Hover Listenzeile */

  /* Schrift */
  --se-font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Geist', 'Helvetica Neue', sans-serif;
  --se-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Geist', 'Helvetica Neue', sans-serif;
  --se-tracking-display: -0.035em;
  /* Headline-Stufen 96 / 60 / 36 / 22 px, fließend ab 375 px */
  --se-fs-h1: clamp(36px, 5.6vw + 18px, 96px);
  --se-fs-h2: clamp(28px, 3.6vw + 14px, 60px);
  --se-fs-h3: clamp(26px, 1.6vw + 20px, 36px);
  --se-fs-h4: clamp(20px, 0.5vw + 18px, 22px);
  --se-fs-mega: clamp(44px, 8.4vw + 16px, 128px);
  /* Text-Stufen 21 / 17 / 15 px */
  --se-fs-lead: clamp(19px, 0.4vw + 17.5px, 21px);
  --se-fs-body: 17px;
  --se-fs-small: 15px;
  --se-fs-caption: 13px;

  /* Radien: Buttons ganz rund, Karten 24–36 px, Icons 22 % */
  --se-r-pill: 999px;
  --se-r-xl: 40px;
  --se-r-lg: 36px;
  --se-r-md: 32px;
  --se-r-card: 28px;
  --se-r-sm: 24px;
  --se-r-group: 20px;
  --se-r-control: 12px;

  /* Schatten */
  --se-shadow-lift: 0 24px 48px rgba(0, 0, 0, .10);
  --se-shadow-card: 0 20px 60px rgba(0, 0, 0, .06);
  --se-shadow-menu: 0 24px 40px rgba(0, 0, 0, .12);
  --se-shadow-thumb: 0 3px 8px rgba(0, 0, 0, .25);
  --se-shadow-seg: 0 3px 8px rgba(0, 0, 0, .12);
  --se-shadow-notice: 0 10px 30px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
  --se-glow: 0 0 0 6px rgba(52, 199, 89, .25);
  --se-ring-active: 0 0 0 3px #34C759, 0 20px 40px rgba(52, 199, 89, .18);

  /* Bewegung */
  --se-ease: cubic-bezier(.2, .8, .2, 1);
  --se-spring: cubic-bezier(.2, .9, .25, 1.12);

  /* Layout */
  --se-gutter: 20px;
  --se-max: 1200px;
  --se-section-y: clamp(56px, 8vw + 20px, 120px);
  --se-input-bg: #F2F2F7;
}
@media (min-width: 601px) { :root { --se-gutter: 24px; } }

/* ---------- 3 · Basis (per :where ohne Spezifität) ---------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
.se-page {
  margin: 0;
  background: var(--se-white);
  color: var(--se-black);
  font-family: var(--se-font-text);
  font-size: var(--se-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
:where(.se-page) *, :where(.se-page) *::before, :where(.se-page) *::after { box-sizing: border-box; }
:where(.se-page) :is(h1, h2, h3, h4, p, figure, ol, ul, dl, blockquote) { margin: 0; }
:where(.se-page) :is(h1, h2, h3, h4) { font-weight: 700; }
:where(.se-page) a { color: var(--se-green-dark); }
:where(.se-page) a:hover { color: var(--se-black); }
:where(.se-page) :is(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--se-green); outline-offset: 3px; }
:where(.se-page) svg { flex: none; }
:where(.se-page) summary { list-style: none; cursor: pointer; }
:where(.se-page) summary::-webkit-details-marker { display: none; }
.se-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.se-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 4 · Typografie ---------- */
.d { font-family: var(--se-font-display); letter-spacing: var(--se-tracking-display); }
.h1, .h2, .h3, .mega { font-family: var(--se-font-display); font-weight: 700; letter-spacing: var(--se-tracking-display); }
.h1 { font-size: var(--se-fs-h1); line-height: 1.02; }
.h2 { font-size: var(--se-fs-h2); line-height: 1.05; }
.h3 { font-size: var(--se-fs-h3); line-height: 1.08; }
.h4 { font-size: var(--se-fs-h4); font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.mega { font-size: var(--se-fs-mega); line-height: .95; }
.title-sub { display: block; color: var(--se-text-2); }   /* zweite, graue Headline-Zeile (Video) */
.lead { font-size: var(--se-fs-lead); line-height: 1.5; letter-spacing: -0.01em; color: var(--se-text-2); max-width: 34em; }
.text { font-size: var(--se-fs-body); line-height: 1.55; }
.small { font-size: var(--se-fs-small); line-height: 1.5; color: var(--se-text-2); }
.caption { font-size: 14px; line-height: 1.45; color: var(--se-text-2); }
.mw-8 { max-width: 8ch; } .mw-9 { max-width: 9ch; } .mw-10 { max-width: 10ch; } .mw-11 { max-width: 11ch; }
.mw-12 { max-width: 12ch; } .mw-13 { max-width: 13ch; } .mw-14 { max-width: 14ch; } .mw-15 { max-width: 15ch; }

/* Kicker: PRESS START, GET ACCESS, ROUND 1 … */
.kicker { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--se-green-dark); }
.kicker--sm { font-size: 14px; }
.kicker--wide { letter-spacing: .08em; }
/* Eyebrow aus dem Video: „ETAGE 1“, „DAS PROBLEM“, optional mit grünem Punkt */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--se-text-2); }
.eyebrow--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--se-green); flex: none; }
.list-label { margin-left: 18px; font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--se-text-2); }

/* ---------- 5 · Layout ---------- */
.container { width: min(100% - 2 * var(--se-gutter), var(--se-max)); margin-inline: auto; }
.section { padding-block: var(--se-section-y); }
.section--tight-top { padding-top: clamp(24px, 3vw, 40px); }
.section--tight-bottom { padding-bottom: clamp(24px, 3vw, 40px); }
.section--fill { background: var(--se-fill); --se-input-bg: #FFFFFF; }
.section--dark { background: var(--se-black); color: var(--se-white); }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack--sm { gap: 16px; }
.stack--lg { gap: clamp(32px, 4vw, 48px); }
.stack--start { align-items: flex-start; }
.section-head { display: flex; flex-direction: column; gap: 16px; }
.section-head--split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
/* zwei flexible Spalten, die auf schmalen Geräten stapeln */
.split { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.split--center { align-items: center; }
.split--top { align-items: flex-start; }
.split__wide { flex: 999 1 520px; min-width: 0; }
.split__narrow { flex: 1 1 300px; min-width: 0; }
.split__half { flex: 1 1 360px; min-width: 0; }
/* Kartenreihen: Spaltenbreite über Modifikator */
.cards { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }
.cards > * { flex: 1 1 var(--se-card-min, 260px); min-width: 0; }
.cards--sm { --se-card-min: 200px; }
.cards--md { --se-card-min: 230px; }
.cards--lg { --se-card-min: 280px; gap: 20px; }
.cards--xl { --se-card-min: 420px; gap: 24px; }

/* ---------- 6 · Header / Glas / Navigation / Burger ---------- */
.site-header { position: sticky; top: 0; z-index: 20; }
.site-header__bar { position: relative; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.glass { background: rgba(255, 255, 255, .76); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, .96); } }
.site-nav { width: min(100% - 2 * var(--se-gutter), var(--se-max)); margin-inline: auto; padding-block: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.brand { display: flex; align-items: center; min-height: 48px; margin-right: auto; color: var(--se-black); }
.logo { display: block; width: 120.3px; height: 38px; flex: none; }
.nav-links { display: none; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.nav-actions { display: none; align-items: center; gap: 18px; }
.nav { display: inline-flex; align-items: center; min-height: 44px; color: var(--se-ink-3); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav:hover { color: var(--se-black); }
.nav[aria-current="page"] { color: var(--se-black); font-weight: 650; }
.burger { width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--se-black); border: 1px solid var(--se-border); border-radius: 14px; cursor: pointer; flex: none; }
.burger svg { width: 22px; height: 22px; }
.burger line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: inline; }
.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--se-white); border-bottom: 1px solid rgba(0, 0, 0, .08); box-shadow: var(--se-shadow-menu); padding: 8px 24px 20px; display: flex; flex-direction: column; }
.mobile-menu[hidden] { display: none; }
.mobile-menu .nav { display: flex; justify-content: space-between; min-height: 52px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--se-black); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.mobile-menu .nav:last-child { border-bottom: 0; }
.mobile-menu .nav[aria-current="page"] { color: var(--se-green-dark); }
.mobile-menu .nav[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--se-green); flex: none; }
/* Fahrt-Fortschritt: grüne Linie unter der Navigation */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--se-green); transform-origin: 0 50%; transform: scaleX(0); }
@media (min-width: 901px) {
  .nav-links, .nav-actions { display: flex; }
  .burger, .mobile-menu { display: none; }
}

/* ---------- 7 · Buttons, Links ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; max-width: 100%; padding: 0 26px; border-radius: var(--se-r-pill); border: none; font-family: inherit; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .25s var(--se-ease), background-color .2s ease, color .2s ease; }
.pill:active { transform: scale(.96); }
.pill-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.pill-block { width: 100%; }
.pill-black { background: var(--se-black); color: var(--se-white); }
.pill-black:hover { background: var(--se-dark-3); color: var(--se-white); }
.pill-green { background: var(--se-green); color: var(--se-black); }
.pill-green:hover { background: var(--se-green-hover); color: var(--se-black); }
.pill-gray { background: var(--se-fill); color: var(--se-black); }
.pill-gray:hover { background: var(--se-line); color: var(--se-black); }
.pill-white { background: var(--se-white); color: var(--se-black); }
.pill-white:hover { background: var(--se-line); color: var(--se-black); }
.pill:is([disabled], [aria-disabled="true"]) { background: var(--se-line); color: var(--se-text-2); cursor: not-allowed; transform: none; }
.pill[aria-busy="true"] { cursor: progress; }
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--se-green-dark); font-weight: 600; font-size: 17px; text-decoration: none; }
.more:hover { color: var(--se-black); }
.flink { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--se-ink-3); text-decoration: none; font-size: 14px; }
.flink:hover { color: var(--se-black); }

/* ---------- 8 · Icons (Inline-SVG, Farbe per CSS) ---------- */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--thin { stroke-width: 1.6; }
.ico-check { width: 24px; height: 24px; overflow: visible; }
.ico-check circle { fill: var(--se-green); }
.ico-check path { fill: none; stroke: var(--se-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ico-check--ink path { stroke: var(--se-black); }
.ico-check--off circle { fill: transparent; stroke: var(--se-border); stroke-width: 1.5; }
.ico-check--off path { display: none; }
.ico-x { width: 24px; height: 24px; }
.ico-x circle { fill: var(--se-line); }
.ico-x path { fill: none; stroke: var(--se-text-2); stroke-width: 2; stroke-linecap: round; }
.ico-alert { width: 22px; height: 22px; }
.ico-alert circle:first-child { fill: var(--se-black); }
.ico-alert path { fill: none; stroke: var(--se-white); stroke-width: 2.6; stroke-linecap: round; }
.ico-alert circle + path + circle { fill: var(--se-white); }
.ico-chev { width: 8px; height: 14px; color: var(--se-gray-1); }
.ico-chev path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.more .ico-chev { color: inherit; }
.ico-chev--light { color: var(--se-gray-3); }
.chev { transition: transform .25s var(--se-ease); }
details[open] > summary .chev { transform: rotate(90deg); }
/* Icon-Kacheln (Radius ≈ 22 %) */
.icon-tile { width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--se-black); color: var(--se-white); }
.icon-tile .ico { width: 27px; height: 27px; }
.icon-tile--lg { width: 56px; height: 56px; border-radius: 13px; }
.icon-tile--lg .ico { width: 35px; height: 35px; }
.icon-tile--sm { width: 32px; height: 32px; border-radius: 8px; }
.icon-tile--sm .ico { width: 20px; height: 20px; }
.icon-tile--md { width: 38px; height: 38px; border-radius: 9px; }
.icon-tile--md .ico { width: 23px; height: 23px; }
.icon-tile--green { background: var(--se-green); color: var(--se-black); }
/* Monogramm aus dem App-Icon (A-Bein wird V-Bein, Diagonale grün) */
.mark { width: 63%; height: 63%; fill: none; stroke: currentColor; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 9 · Punkte, Tags, Chips, LIVE ---------- */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--se-green); display: inline-block; flex: none; }
.dot--sm { width: 6px; height: 6px; }
.dot--md { width: 7px; height: 7px; }
.dot--lg { width: 9px; height: 9px; }
.dot--black { background: var(--se-black); }
.tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border-radius: var(--se-r-pill); background: var(--se-fill); color: var(--se-black); font-size: 14px; font-weight: 600; line-height: 1.2; }
.tag--dark { background: var(--se-dark-1); color: var(--se-green); }
.tag--white { background: var(--se-white); color: var(--se-green-dark); }
.tag--live { background: var(--se-green); color: var(--se-black); font-weight: 700; }
.tag--sm { padding: 6px 12px; font-size: 13px; }
.signal { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--se-green); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--se-dark-1); color: var(--se-white); border-radius: var(--se-r-pill); padding: 9px 16px; font-size: 15px; font-weight: 600; }

/* ---------- 10 · Ticker / Laufband ---------- */
.ticker-bar { background: var(--se-black); color: var(--se-white); overflow: hidden; }
.ticker { display: flex; width: max-content; animation: se-ticker 40s linear infinite; }
.ticker__group { display: flex; align-items: center; gap: 28px; padding: 11px 28px 11px 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }

/* ---------- 11 · Hero mit Aufzug ---------- */
.hero { position: relative; overflow: hidden; }
.hero__inner { width: min(100% - 2 * var(--se-gutter), var(--se-max)); margin-inline: auto; padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px); display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.hero__copy { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 4px; }
.hero__note { font-size: var(--se-fs-small); color: var(--se-text-2); }
/* Aufzug-Panel */
.elevator { flex: 1 1 340px; width: 100%; max-width: 420px; background: var(--se-fill); border-radius: 32px; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.elevator__display { background: var(--se-black); border-radius: 26px; height: 124px; padding: 0 22px; display: flex; align-items: center; gap: 20px; overflow: hidden; }
.elevator__arrow { display: inline-flex; color: var(--se-green); }
.elevator__arrow .ico { width: 34px; height: 34px; stroke-width: 2.4; }
.elevator__window { height: 124px; overflow: hidden; flex: 1; }
.elevator__roll { display: flex; flex-direction: column; transform: translateY(calc(var(--floor, 0) * -124px)); }
.elevator__floor { height: 124px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.elevator__num { font-family: var(--se-font-display); letter-spacing: var(--se-tracking-display); font-weight: 700; font-size: 52px; line-height: 1; color: var(--se-white); font-variant-numeric: tabular-nums; }
.elevator__label { font-size: 15px; font-weight: 600; color: var(--se-green); }
.elevator__buttons { display: flex; flex-direction: column; gap: 4px; padding: 0 6px; }
.elevator__stop { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.elevator__stop-label { font-size: 17px; font-weight: 500; color: var(--se-text-2); transition: color .35s ease; }
.floorbtn[aria-pressed="true"] + .elevator__stop-label { color: var(--se-black); }
@media (min-width: 601px) {
  .elevator { border-radius: var(--se-r-xl); padding: 22px; }
  .elevator__display { padding: 0 26px; }
}
/* Etagen-Knöpfe EG / 1 / 2 / 3 / 4 */
.floorbtn { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 1px solid var(--se-border); background: var(--se-white); color: var(--se-black); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .35s ease, box-shadow .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2, .9, .25, 1.2); }
.floorbtn:active { transform: scale(.9); }
.floorbtn[aria-pressed="true"], .floorbtn.is-active { background: var(--se-green); box-shadow: var(--se-glow); }
/* Variante auf Schwarz (Video-Karte 8): grüne Ringe */
.floor-row { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.floorbtn--dark { width: 44px; height: 44px; background: transparent; color: var(--se-white); border: 2px solid var(--se-green); font-size: 15px; cursor: default; }
.floorbtn--dark.is-active { color: var(--se-black); }
/* Aufzugtüren (nur erster Besuch, Klasse .se-doors auf <html> setzt elevator.js) */
.doors { display: none; position: absolute; inset: 0; z-index: 5; pointer-events: none; --se-door-logo: min(380px, 84vw); }
.se-doors .doors { display: block; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: var(--se-fill); }
.door-l { left: 0; border-right: 1px solid var(--se-gray-3); animation: se-door-l 1.7s cubic-bezier(.65, 0, .15, 1) forwards; }
.door-r { left: 50%; border-left: 1px solid var(--se-gray-3); animation: se-door-r 1.7s cubic-bezier(.65, 0, .15, 1) forwards; }
.door__logo { position: absolute; top: 50%; width: var(--se-door-logo); height: auto; aspect-ratio: 684 / 216; transform: translateY(-50%); color: var(--se-black); }
.door-l .door__logo { left: calc(100% - var(--se-door-logo) / 2); }
.door-r .door__logo { left: calc(var(--se-door-logo) / -2); }
.hero-in { animation: se-hero-in .9s cubic-bezier(.2, .9, .25, 1) both; }
.elevator.hero-in { animation-delay: .15s; }
.se-doors .hero__copy.hero-in { animation-delay: 1.1s; }
.se-doors .elevator.hero-in { animation-delay: 1.3s; }

/* ---------- 12 · Karten ---------- */
.card { min-width: 0; border-radius: var(--se-r-card); padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; background: var(--se-white); color: var(--se-black); }
@media (min-width: 601px) { .card { border-radius: var(--se-r-lg); padding: clamp(32px, 3.6vw, 44px); } }
.card--sm { border-radius: var(--se-r-card); padding: 28px 24px 32px; gap: 12px; }
.card--md { border-radius: var(--se-r-card); padding: 24px; gap: 24px; }
@media (min-width: 601px) {
  .card--sm { border-radius: var(--se-r-card); padding: 28px 24px 32px; }
  .card--md { border-radius: var(--se-r-md); padding: 32px; }
}
.card--fill { background: var(--se-fill); --se-input-bg: #FFFFFF; }
.card--dark { background: var(--se-black); color: var(--se-white); }
.card--green { background: var(--se-green); color: var(--se-black); }
.card--outline { background: transparent; border: 1px solid var(--se-line); }
.card--elevated { background: var(--se-white); border: 1px solid var(--se-line); box-shadow: var(--se-shadow-card); }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card__title { margin-top: 8px; }
.card__text { font-size: 16px; line-height: 1.55; color: var(--se-text-2); }
.card__text--lg { font-size: clamp(17px, .3vw + 16px, 18px); max-width: 30em; color: var(--se-ink-3); }
.card--dark .card__text { color: var(--se-gray-2); }
.card--green .card__text, .card--green .kicker { color: var(--se-black); }
/* Player-Karten: Titel unten */
.card--player { min-height: 320px; }
.card--player .card__title { margin-top: auto; }
@media (min-width: 601px) { .card--player { min-height: 400px; } }
.lift { transition: transform .4s var(--se-spring), box-shadow .4s ease; }
@media (hover: hover) { .lift:hover { transform: translateY(-6px); box-shadow: var(--se-shadow-lift); } }

/* Etagen-Liste (Startseite) */
.fcard { transition: box-shadow .45s ease, transform .45s var(--se-spring), background-color .45s ease; }
.floor-card { background: var(--se-white); border-radius: var(--se-r-card); padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 14px; }
.floor-card.is-active { box-shadow: var(--se-ring-active); transform: translateY(-6px); }
.floor-num { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; background: var(--se-fill); color: var(--se-black); transition: background-color .35s ease; }
.floor-card.is-active .floor-num { background: var(--se-green); }
.floor-card__title { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.floor-card__text { font-size: 15px; line-height: 1.5; color: var(--se-text-2); }

/* Zahlenkarten „Braucht € ???.??? / Gibt ab ?? %“ */
.num-card { background: var(--se-fill); min-height: 220px; justify-content: space-between; }
@media (min-width: 601px) { .num-card { min-height: 300px; } }
.num-card__value { font-family: var(--se-font-display); letter-spacing: var(--se-tracking-display); font-weight: 700; font-size: clamp(44px, 2vw + 36px, 56px); line-height: 1; color: var(--se-green-dark); }
.num-card__value--text { font-size: clamp(36px, 1.4vw + 30px, 44px); }
.num-card__body { display: flex; flex-direction: column; gap: 8px; }
.num-card__title { font-size: clamp(19px, .4vw + 17.5px, 21px); font-weight: 650; }

/* ---------- 13 · Gruppierte Liste (wie iOS-Einstellungen) ---------- */
.list-group { list-style: none; margin: 0; padding: 0; border-radius: var(--se-r-group); overflow: hidden; display: flex; flex-direction: column; gap: 1px; background: var(--se-line); border: 1px solid var(--se-line); }
.row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 18px; text-decoration: none; color: var(--se-black); background: var(--se-white); }
a.row:hover { background: var(--se-row-hover); color: var(--se-black); }
.row--top { align-items: flex-start; padding: 16px 18px; font-size: 17px; line-height: 1.45; }
.row--tall { min-height: 68px; padding: 10px 16px; }
.row--compact { min-height: 48px; }
.row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row__title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.row__title--strong { font-weight: 600; letter-spacing: 0; }
.row__title--sm { font-size: 15px; }
.row__sub { font-size: 14px; line-height: 1.4; color: var(--se-text-2); }
.row__end { margin-left: auto; }
.list-group--dark { background: var(--se-ink-3); border: 0; }
.list-group--dark .row { background: var(--se-dark-1); color: var(--se-white); }
.list-group--dark .row__sub { color: var(--se-gray-2); }
.list-group--dark .switch { --se-switch-off: #3A3A3C; }
.list-group--platforms .row { min-height: 64px; padding: 0 20px; justify-content: space-between; font-size: 18px; font-weight: 600; }
/* einfache Häkchen-Liste (ohne Gruppe) */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; font-size: clamp(17px, .3vw + 16px, 18px); line-height: 1.45; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }

/* ---------- 14 · Schalter, Segment-Control, Mitteilung ---------- */
.switch { position: relative; display: inline-flex; align-items: center; width: 55px; height: 44px; flex: none; cursor: pointer; }
.switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch__track { width: 51px; height: 31px; border-radius: var(--se-r-pill); padding: 2px; display: flex; background: var(--se-switch-off, #E5E5EA); transition: background-color .25s ease; }
.switch__thumb { width: 27px; height: 27px; border-radius: 50%; background: var(--se-white); box-shadow: var(--se-shadow-thumb); transition: transform .25s var(--se-spring); }
.switch__input:checked + .switch__track { background: var(--se-green); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(20px); }
.switch__input:focus-visible + .switch__track { outline: 3px solid var(--se-green); outline-offset: 3px; }
/* Segment-Control (Radio-Gruppe ohne JS) */
.segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--se-r-control); background: var(--se-line); max-width: 100%; }
.segment--block { display: flex; width: 100%; }
.segment__option { position: relative; flex: 1 1 auto; min-width: 0; }
.segment__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment__label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--se-black); white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease; }
@media (min-width: 601px) { .segment__label { padding: 10px 20px; } }
.segment__label--static { min-height: 0; }
.segment__input:checked + .segment__label, .segment__label.is-active { background: var(--se-white); box-shadow: var(--se-shadow-seg); }
.segment__input:focus-visible + .segment__label { outline: 3px solid var(--se-green); outline-offset: 2px; }
/* Mitteilung (iOS-Notification) */
.notice { background: rgba(255, 255, 255, .92); border-radius: 22px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--se-shadow-notice); color: var(--se-black); }
.notice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notice__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.notice__title { min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 650; }
.notice__time { font-size: 13px; color: var(--se-gray-1); white-space: nowrap; }
.notice__text { font-size: 15px; line-height: 1.35; color: var(--se-dark-1); }
.n1 { animation: se-notif .75s var(--se-spring) .3s both; }
.n2 { animation: se-notif .75s var(--se-spring) 1.1s both; }
.n3 { animation: se-notif .75s var(--se-spring) 1.9s both; }
.n4 { animation: se-notif .75s var(--se-spring) 2.7s both; }

/* ---------- 15 · Formular (neu, im Original nicht vorhanden) ---------- */
.form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { padding: 0 0 0 4px; font-size: 15px; font-weight: 600; color: var(--se-black); }
legend.field__label { margin-bottom: 8px; }
.input { appearance: none; -webkit-appearance: none; width: 100%; min-height: 50px; padding: 0 22px; border-radius: var(--se-r-pill); border: 1px solid transparent; background: var(--se-input-bg); color: var(--se-black); font-family: inherit; font-size: 17px; line-height: 1.2; transition: border-color .2s ease, background-color .2s ease; }
.input::placeholder { color: var(--se-text-2); opacity: 1; }
.input:hover { border-color: var(--se-border); }
.input:focus { outline: none; background: var(--se-white); border-color: var(--se-border); }
.input:focus-visible { outline: 3px solid var(--se-green); outline-offset: 2px; }
.select { padding-right: 48px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1.5 1.5L7 6.5l5.5-5' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 22px center; background-size: 14px 8px; }
.field__hint { padding-left: 4px; font-size: 14px; line-height: 1.4; color: var(--se-text-2); }
.field__msg { display: none; align-items: flex-start; gap: 8px; padding-left: 4px; font-size: 14px; line-height: 1.4; font-weight: 600; }
/* Fehler: Schwarz mit Ausrufezeichen (die Palette hat kein Rot, s. DESIGN-PORT.md) */
.field__msg--error { color: var(--se-black); }
.field__msg--ok { color: var(--se-green-dark); }
.field__msg .ico-check, .field__msg .ico-alert { width: 20px; height: 20px; }
.field--error .field__msg--error, .field--success .field__msg--ok { display: flex; }
.field:has(.input:user-invalid) .field__msg--error { display: flex; }
.field--error .input, .input[aria-invalid="true"] { border: 2px solid var(--se-black); padding-inline: 21px; }
/* :user-invalid / :has getrennt, damit ältere Browser nicht die ganze Regel verwerfen */
.input:user-invalid { border: 2px solid var(--se-black); padding-inline: 21px; }
.field--success .input { border: 2px solid var(--se-green); padding-inline: 21px; }
.field--error .segment { box-shadow: 0 0 0 2px var(--se-black); }
/* Checkbox (rund wie im Video) */
.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--se-ink-3); cursor: pointer; }
.checkbox__input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; margin: 0; border-radius: 50%; border: 1.5px solid var(--se-border); background: var(--se-white); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.checkbox__input:checked { border-color: var(--se-green); background: var(--se-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.6' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.checkbox__input:focus-visible { outline: 3px solid var(--se-green); outline-offset: 2px; }
.checkbox__input[aria-invalid="true"], .field--error .checkbox__input { border: 2px solid var(--se-black); }
.checkbox__input:user-invalid { border: 2px solid var(--se-black); }
.checkbox a { color: var(--se-green-dark); }
/* Formular auf Schwarz */
.form--dark .field__label { color: var(--se-white); }
.form--dark .input { background: var(--se-dark-1); color: var(--se-white); border-color: var(--se-ink-3); }
.form--dark .input:focus { background: var(--se-dark-3); }
.form--dark .input::placeholder, .form--dark .field__hint { color: var(--se-gray-2); }
.form--dark .segment { background: var(--se-dark-3); }
.form--dark .segment__label { color: var(--se-white); }
.form--dark .segment__input:checked + .segment__label { background: var(--se-white); color: var(--se-black); }
.form--dark .checkbox { color: var(--se-gray-2); }
.form--dark .checkbox a { color: var(--se-green); }
.form--dark .field__msg--error { color: var(--se-white); }
.form--dark .field--error .input { border-color: var(--se-white); }

/* ---------- 16 · Pitch-Day-Szene (Livestream-Mock) ---------- */
.call { margin: 0; min-width: 0; flex: 1.3 1 500px; background: var(--se-dark-1); color: var(--se-white); border-radius: var(--se-r-card); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.call__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 6px; }
.call__round { font-size: 14px; font-weight: 600; color: var(--se-gray-2); }
.se-call-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.se-call-tile { min-width: 0; min-height: 88px; background: var(--se-dark-3); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--se-gray-1); }
.se-call-tile .ico { width: 26px; height: 26px; }
.se-call-tile__name { font-size: 11px; font-weight: 600; color: var(--se-gray-2); }
.se-call-elevator { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--se-dark-2); border: 1px solid var(--se-ink-3); border-radius: 12px; padding: 10px 12px; }
.se-call-elevator__name { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.se-call-elevator__text { font-size: 12px; color: var(--se-gray-2); }
.se-call-elevator__live { width: 100%; font-size: 12px; font-weight: 600; color: var(--se-green); }
.se-call-stage { grid-column: 1 / -1; position: relative; min-width: 0; min-height: 210px; background: var(--se-dark-3); border-radius: 16px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.se-call-stage__name { font-size: 14px; font-weight: 600; text-align: center; padding: 0 8px; }
.se-call-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--se-ink-3); border: 3px solid var(--se-green); display: inline-flex; align-items: center; justify-content: center; color: var(--se-white); }
.se-call-avatar .ico { width: 34px; height: 34px; }
.eq-bars { position: absolute; left: 18px; bottom: 16px; display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq-bars--lg { position: static; gap: 4px; height: 36px; }
.eq-bars > span { width: 4px; height: 100%; border-radius: 2px; background: var(--se-green); }
.eq-bars--lg > span { width: 6px; border-radius: 3px; }
.se-call-watchers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.se-call-watch { min-width: 0; min-height: 44px; background: var(--se-dark-3); border-radius: 8px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--se-gray-1); }
.se-call-watch .ico { width: 16px; height: 16px; }
.se-call-watch__n::after { content: attr(data-n); font-size: 9px; font-weight: 600; color: var(--se-gray-1); }
.se-call-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--se-ink-3); border-radius: var(--se-r-group); overflow: hidden; }
.se-call-stat { background: var(--se-dark-3); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.se-call-stat__label { font-size: 13px; color: var(--se-gray-2); }
.se-call-stat__value { font-family: var(--se-font-display); letter-spacing: var(--se-tracking-display); font-size: 16px; font-weight: 700; color: var(--se-green); }
@media (min-width: 601px) {
  .call { border-radius: var(--se-r-lg); padding: 16px; }
  .se-call-tile { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--se-r-group); gap: 8px; }
  .se-call-tile .ico { width: 34px; height: 34px; }
  .se-call-tile__name { font-size: 13px; }
  .se-call-elevator { flex-wrap: wrap; gap: 10px; border-radius: 16px; padding: 12px 16px; }
  .se-call-elevator__name { font-size: 15px; }
  .se-call-elevator__text { font-size: 14px; }
  .se-call-elevator__live { width: auto; margin-left: auto; font-size: 13px; }
  .se-call-stage { aspect-ratio: 16 / 7; min-height: 0; border-radius: var(--se-r-sm); gap: 14px; }
  .se-call-stage__name { font-size: 15px; }
  .se-call-avatar { width: 88px; height: 88px; }
  .se-call-avatar .ico { width: 46px; height: 46px; }
  .se-call-watchers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .se-call-watch { min-height: 52px; border-radius: 10px; padding: 6px 4px; }
  .se-call-watch .ico { width: 22px; height: 22px; }
  .se-call-watch__n::after { font-size: 11px; }
  .se-call-stat { padding: 14px 16px; }
  .se-call-stat__value { font-size: 22px; }
}

/* ---------- 17 · Mitgliedschaft / Preis ---------- */
.price-card { flex: 1 1 340px; width: 100%; max-width: 440px; min-width: 0; background: var(--se-white); border: 1px solid var(--se-line); border-radius: var(--se-r-card); padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--se-shadow-card); }
.price-card--dark { max-width: 460px; background: var(--se-black); color: var(--se-white); border: 0; box-shadow: none; gap: 20px; }
@media (min-width: 601px) {
  .price-card { border-radius: var(--se-r-lg); padding: 40px; }
  .price-card--dark { border-radius: var(--se-r-xl); padding: 40px 36px; }
}
.price-card__head { display: flex; align-items: center; gap: 12px; }
.price-card--dark .kicker { color: var(--se-green); }
.price__amount { font-family: var(--se-font-display); letter-spacing: var(--se-tracking-display); font-weight: 700; font-size: clamp(56px, 4vw + 36px, 76px); line-height: 1; }
.price-card--dark .price__amount { font-size: clamp(60px, 4vw + 40px, 84px); }
.price__per { font-size: 19px; color: var(--se-text-2); }
.price-card--dark .price__per, .price-card--dark .price-card__note { color: var(--se-gray-2); }
.price-card__note { font-size: 14px; color: var(--se-text-2); }
/* Insert Coin */
.coin-slot { position: relative; width: 40px; height: 48px; display: inline-flex; justify-content: center; flex: none; }
.coin { position: absolute; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--se-green); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18); animation: se-coin 2.8s cubic-bezier(.55, 0, .8, .3) infinite; }
.coin-slot__slot { position: absolute; bottom: 4px; width: 34px; height: 8px; border-radius: var(--se-r-pill); background: var(--se-black); }
.price-card--dark .coin-slot__slot { background: var(--se-white); }

/* ---------- 18 · Ablauf: Schacht und Status-Karten ---------- */
.shaft { position: relative; }
.shaft__line, .shaft-fill { position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--se-line); }
.shaft-fill { background: var(--se-green); }
.shaft__steps { list-style: none; margin: 0; padding: 0; position: relative; }
.shaft__step { position: relative; padding: 0 0 56px 68px; display: flex; flex-direction: column; gap: 16px; }
.shaft__step:last-child { padding-bottom: 0; }
.shaft__num { position: absolute; left: 0; top: -4px; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--se-white); border: 1px solid var(--se-border); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.shaft__num--active { background: var(--se-green); box-shadow: var(--se-glow); }
.shaft__text { font-size: 17px; line-height: 1.55; max-width: 36em; color: var(--se-ink-3); }
@media (min-width: 601px) {
  .shaft__line, .shaft-fill { left: 29px; }
  .shaft__step { padding: 0 0 88px 88px; }
  .shaft__num { top: -8px; width: 60px; height: 60px; font-size: 18px; }
  .shaft__text { font-size: 19px; }
}
.status-card { background: var(--se-fill); color: var(--se-black); border-radius: var(--se-r-card); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.status-card--dark { background: var(--se-black); color: var(--se-white); }
.status-card__head { display: flex; align-items: center; gap: 10px; }
.status-card__head svg { width: 26px; height: 26px; }
.status-card__state { font-size: 15px; font-weight: 600; color: var(--se-text-2); }
.status-card--dark .status-card__state { color: var(--se-gray-2); }
.status-card__title { font-size: 18px; font-weight: 650; line-height: 1.35; }
.status-card__list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--se-ink-3); }
.status-card__note { font-size: 14px; color: var(--se-text-2); }
.spinner { width: 26px; height: 26px; }
.pill .spinner { width: 20px; height: 20px; }
.spinner rect { fill: var(--se-ink-3); }
.track { height: 6px; border-radius: var(--se-r-pill); background: var(--se-line); overflow: hidden; }
.track--thin { height: 4px; }
.track__bar { display: block; height: 100%; width: 60%; border-radius: var(--se-r-pill); background: var(--se-black); }
.track__bar--green { background: var(--se-green); }

/* ---------- 19 · FAQ-Akkordeon ---------- */
.faq__item { background: var(--se-white); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 12px 20px; font-size: 17px; font-weight: 500; }
.faq__a { padding: 0 20px 20px; font-size: 16px; line-height: 1.55; color: var(--se-ink-3); max-width: 44em; }
.faq-cat { font-size: 26px; padding-top: 14px; }

/* ---------- 20 · Rechtstexte ---------- */
.legal-toc { flex: 1 1 260px; max-width: 320px; }
.legal { flex: 999 1 560px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; }
.legal__section { display: flex; flex-direction: column; gap: 12px; padding: 28px 0; border-top: 1px solid var(--se-line); }
.legal__title { font-family: var(--se-font-display); letter-spacing: var(--se-tracking-display); font-size: 26px; font-weight: 700; }
.legal__section p { font-size: 17px; line-height: 1.65; color: var(--se-ink-3); }

/* ---------- 21 · Dunkle Abschlusssektion „PRESS START“ ---------- */
.cta { padding-block: 24px 72px; }
@media (min-width: 901px) { .cta { padding-block: 40px 120px; } }
.cta__box { position: relative; overflow: hidden; background: var(--se-black); color: var(--se-white); border-radius: var(--se-r-md); padding: 72px 24px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
@media (min-width: 601px) { .cta__box { border-radius: var(--se-r-xl); padding: 104px 32px; } }
.cta__box .kicker { color: var(--se-green); letter-spacing: .08em; }
.cta__text { font-size: var(--se-fs-lead); line-height: 1.5; color: var(--se-gray-2); max-width: 30em; }
.cta__box .pill { margin-top: 8px; }

/* Kontext Schwarz: Texte und Kicker */
.section--dark .lead { color: var(--se-gray-2); }
.section--dark .kicker, .card--dark .kicker, .section--dark .eyebrow { color: var(--se-green); }
.section--dark .small { color: var(--se-gray-1); }
.section--dark .text { color: var(--se-gray-2); max-width: 30em; }
.section--dark .title-sub, .card--dark .title-sub { color: var(--se-gray-1); }

/* ---------- 22 · Footer (Marke + drei Spalten) ---------- */
.site-footer { background: var(--se-fill); color: var(--se-ink-3); }
.site-footer__inner { width: min(100% - 2 * var(--se-gutter), var(--se-max)); margin-inline: auto; padding-block: 56px 32px; display: flex; flex-direction: column; gap: 40px; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; }
.site-footer__brand { flex: 1 1 260px; max-width: 360px; display: flex; flex-direction: column; gap: 18px; color: var(--se-black); }
.site-footer__brand p { font-size: 15px; line-height: 1.55; color: var(--se-text-2); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.site-footer__col { display: flex; flex-direction: column; gap: 2px; }
.site-footer__heading { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--se-black); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--se-border); padding-top: 20px; font-size: 13px; color: var(--se-text-2); }
.site-footer__bottom .flink { font-size: 13px; }
.site-footer__bottom .ico { width: 14px; height: 14px; stroke-width: 2.4; }
@media (min-width: 601px) {
  .site-footer__inner { padding-block: 64px 36px; }
  .site-footer__nav { display: flex; flex-wrap: wrap; gap: 32px 64px; }
}

/* ---------- 23 · Animationen ---------- */
@keyframes se-notif { 0% { opacity: 0; transform: translateY(-28px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes se-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes se-spin { to { transform: rotate(360deg); } }
@keyframes se-bar { 0% { width: 8%; } 100% { width: 92%; } }
@keyframes se-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes se-door-l { 0%, 35% { transform: translateX(0); } 100% { transform: translateX(-102%); } }
@keyframes se-door-r { 0%, 35% { transform: translateX(0); } 100% { transform: translateX(102%); } }
@keyframes se-hero-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes se-ring { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .6); } 100% { box-shadow: 0 0 0 22px rgba(52, 199, 89, 0); } }
@keyframes se-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes se-coin { 0% { transform: translateY(-44px); opacity: 0; } 12% { opacity: 1; } 55% { transform: translateY(4px); opacity: 1; } 68%, 100% { transform: translateY(4px); opacity: 0; } }
@keyframes se-grow-x { to { transform: scaleX(1); } }
@keyframes se-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes se-pop { from { opacity: 0; transform: translateY(-22px) scale(.94); } to { opacity: 1; transform: none; } }
.pulse { animation: se-pulse 1.6s ease-in-out infinite; }
.blink { animation: se-pulse 1.3s ease-in-out infinite; }
.spin { animation: se-spin 1s steps(8) infinite; }
.bar { animation: se-bar 3s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
.ring { animation: se-ring 1.5s ease-out infinite; }
.eq { animation: se-eq .9s ease-in-out infinite; transform-origin: 50% 100%; }
.eq:nth-child(2) { animation-delay: .2s; } .eq:nth-child(3) { animation-delay: .4s; }
.eq:nth-child(4) { animation-delay: .1s; } .eq:nth-child(5) { animation-delay: .3s; }
.roll { transition: transform .75s var(--se-spring); }
@supports (animation-timeline: scroll()) {
  .progress { animation: se-grow-x linear both; animation-timeline: scroll(root); }
  .shaft-fill { transform-origin: 50% 0; animation: se-grow-y linear both; animation-timeline: view(); animation-range: entry 30% exit 70%; }
  .pop { animation: se-pop linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; }
}

/* „Bewegung reduzieren“: alles steht, Türen und Fortschrittslinie entfallen */
@media (prefers-reduced-motion: reduce) {
  .pulse, .blink, .spin, .bar, .ring, .eq, .coin, .ticker, .hero-in, .door-l, .door-r,
  .n1, .n2, .n3, .n4, .progress, .shaft-fill, .pop { animation: none; }
  .doors, .se-doors .doors, .progress { display: none; }
  .pill, .roll, .floorbtn, .fcard, .lift, .chev, .switch__track, .switch__thumb, .segment__label, .input, .checkbox__input, .elevator__stop-label, .floor-num { transition: none; }
  .floor-card.is-active { transform: none; }
  .ticker-bar { overflow-x: auto; }
}

/* Skip-Link sichtbar bei Tastatur-Fokus (Barrierefreiheit, Fund Seiten-Agent 06.10.) */
.se-sr:focus-visible{position:fixed!important;left:16px;top:16px;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;padding:12px 18px;background:#000000;color:#FFFFFF;border-radius:999px;z-index:1000;font-weight:600;text-decoration:none}