/* Flix Website
   Tokens 1:1 aus der App uebernommen (tailwind.config.js + docs/04-design-system.md).
   Dark Mode ist der einzige Mode, genau wie in der App. */

/* ---------- Schrift, selbst gehostet (kein Google-Fonts-Abruf, DSGVO) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("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: 100 900;
  font-display: swap;
  src: url("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;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #0b0b14;
  --surface: #16161f;
  --surface-2: #1f1f2e;
  --border: #2a2a3c;

  --primary: #7c3aed;
  --primary-hot: #ec4899;
  --accent: #38bdf8;

  --text: #f4f4f8;
  --text-dim: #a0a0b8;
  --text-faint: #6b6b80;

  --success: #34d399;
  --danger: #f87171;
  --warning: #fbbf24;
  --flix: #ffd60a;

  --grad: linear-gradient(135deg, var(--primary) 0%, var(--primary-hot) 100%);

  /* Radius laut Design-System */
  --r-card: 24px;
  --r-button: 16px;
  --r-input: 14px;
  --r-sheet: 28px;
  --r-pill: 999px;

  /* Spacing-Skala, nur diese Werte */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px;

  --shell: 1120px;
  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Typo-Rollen ---------- */
.display {
  font-weight: 800;
  font-size: clamp(2.6rem, 7.6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.h2 {
  font-weight: 800;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h3 { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.lead { font-size: clamp(17px, 2vw, 19px); line-height: 1.55; color: var(--text-dim); }
.caption { font-size: 13px; line-height: 1.45; font-weight: 500; }
.faint { color: var(--text-faint); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s4); }
section { padding-block: clamp(56px, 9vw, 104px); }

/* ---------- Chip, die Eyebrow-Form dieser Marke ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}
.chip--on {
  color: var(--text);
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad) border-box;
  border: 1.5px solid transparent;
}
.chip svg { width: 14px; height: 14px; flex: none; }

/* ---------- Knoepfe, exakt nach Design-System ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding-inline: var(--s6);
  border-radius: var(--r-button);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.16s var(--ease), opacity 0.16s var(--ease), background-color 0.16s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--grad { background-image: var(--grad); color: #fff; }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn--ghost:hover { background: var(--surface); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- Kopfzeile ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 11, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.top[data-scrolled="true"] { border-bottom-color: var(--border); }
.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
}
.brand svg { width: 22px; height: 22px; }
.top nav { display: flex; align-items: center; gap: var(--s5); }
.top nav a { color: var(--text-dim); text-decoration: none; font-size: 15px; font-weight: 500; }
.top nav a:hover { color: var(--text); }
@media (max-width: 640px) { .top nav a.is-optional { display: none; } }

/* ---------- Hero ---------- */
/* overflow-x: clip haelt den Lichtschein drin, ohne einen Scrollbereich zu erzeugen.
   overflow: hidden waere hier falsch, das wuerde sticky-Elemente mitnehmen. */
.hero { position: relative; padding-top: clamp(40px, 7vw, 72px); overflow-x: clip; }
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto 28%;
  height: 620px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124, 58, 237, 0.32), rgba(236, 72, 153, 0.13) 45%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}
.hero__in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 900px) { .hero__in { grid-template-columns: 1fr 360px; } }
.hero__copy > * + * { margin-top: var(--s5); }
.hero__copy .lead { max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__note { color: var(--text-faint); font-size: 13px; }

/* Auftritt beim Laden */
.rise { opacity: 0; transform: translateY(14px); animation: rise 0.62s var(--ease) forwards; }
.rise:nth-child(1) { animation-delay: 0.02s; }
.rise:nth-child(2) { animation-delay: 0.1s; }
.rise:nth-child(3) { animation-delay: 0.18s; }
.rise:nth-child(4) { animation-delay: 0.26s; }
.rise:nth-child(5) { animation-delay: 0.34s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; animation: none; } }

/* ---------- Der Deck, das Herzstueck ---------- */
.deck {
  /* 86vw statt 78vw, damit auf dem Handy drei Interessen-Pillen in eine Zeile passen */
  --w: min(320px, 86vw);
  width: var(--w);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--s6);
}
.deck__area {
  position: relative;
  width: var(--w);
  aspect-ratio: 2 / 3;
  touch-action: none;
}

.pcard {
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transition: transform 0.42s var(--ease), filter 0.42s var(--ease), opacity 0.3s linear;
}
/* Skaliert wird ab der Unterkante, damit die hinteren Karten unten als Streifen
   herausschauen statt hinter der obersten zu verschwinden. */
.pcard[data-pos="0"] { cursor: grab; z-index: 3; transform: translate(0px, 0px) rotate(0deg) scale(1); }
.pcard[data-pos="0"]:active { cursor: grabbing; }
.pcard[data-pos="1"] { z-index: 2; transform-origin: 50% 100%; transform: translateY(13px) scale(0.945); }
.pcard[data-pos="2"] { z-index: 1; transform-origin: 50% 100%; transform: translateY(26px) scale(0.89); }
.pcard[data-pos="1"], .pcard[data-pos="2"] { filter: brightness(0.68) saturate(0.85); }
.pcard[data-pos="3"] { z-index: 0; opacity: 0; transform-origin: 50% 100%; transform: translateY(26px) scale(0.89); }
.pcard.is-dragging { transition: none; }
.pcard.is-gone { opacity: 0; }
.stamp { transition: opacity 0.14s linear; }

/* Gradient-Kachel als Fotoersatz, so wie die App es ohne Foto macht */
.pcard__tile { position: absolute; inset: 0; }
.pcard__tile span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(110px, 44%, 168px);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.22);
}
.pcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 38%, rgba(11, 11, 20, 0.9) 100%);
}

/* Foto-Anzeige oben, 2,5 px hoch wie in der App */
.pcard__bars { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; }
.pcard__bars i { flex: 1; height: 2.5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.35); }
.pcard__bars i.on { background: #fff; }

.pcard__foot { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.pcard__name { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* In der App px-3, hier 10 px. Die Website-Karte ist schmaler als der Screen,
     bei 12 px kippt die dritte Interessen-Pille in eine zweite Zeile. */
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.mini--shared { background: var(--primary); border-color: rgba(255, 255, 255, 0.25); }

/* Plaketten YES, NOPE, FLIX. Dunkle Vorderseite, farbige Kontur, versetzte Rueckseite. */
.stamp {
  position: absolute;
  padding: 7px 15px;
  border-radius: 12px;
  border: 3px solid currentColor;
  background: rgba(11, 11, 20, 0.72);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.stamp::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  border: 3px solid currentColor;
  opacity: 0.35;
  transform: translate(4px, 4px);
  z-index: -1;
}
.stamp--yes { left: 16px; top: 19%; color: var(--success); transform: rotate(-14deg); box-shadow: 0 10px 26px rgba(52, 211, 153, 0.28); }
.stamp--nope { right: 16px; top: 19%; color: var(--danger); transform: rotate(14deg); box-shadow: 0 10px 26px rgba(248, 113, 113, 0.28); }
.stamp--flix { left: 50%; top: 25%; color: var(--flix); transform: translateX(-50%) rotate(-6deg); box-shadow: 0 10px 26px rgba(255, 214, 10, 0.26); }

/* Aktionsleiste */
.acts { display: flex; align-items: center; justify-content: center; gap: var(--s5); }
.act {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.16s var(--ease), background-color 0.16s var(--ease);
}
.act:hover { background: var(--surface-2); }
.act:active { transform: scale(0.92); }
.act svg { width: 24px; height: 24px; }
.act--flix { width: 62px; height: 62px; }
.act--flix svg { width: 26px; height: 26px; filter: drop-shadow(0 0 10px rgba(255, 214, 10, 0.45)); }
.deck__hint { color: var(--text-faint); font-size: 13px; text-align: center; }

/* ---------- Abschnittskopf ---------- */
.head { max-width: 620px; }
.head > * + * { margin-top: var(--s4); }

/* ---------- Feature-Karten ---------- */
.grid {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s8);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4); } }

.card {
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.card__demo {
  border-radius: var(--r-input);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: var(--s4);
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   Duo-Karte und Sprachraum, nachgebaut nach der App

   Massgeblich sind src/features/duo/DuoDiscoverView.tsx und app/rooms/[roomId].tsx
   im Projekt "Dating App". Wenn sich dort etwas aendert, gehoert es hier nachgezogen.
   Alle Werte unten stehen so oder als Tailwind-Klasse in diesen beiden Dateien.
   ========================================================================== */

.shows { display: grid; gap: var(--s4); margin-top: var(--s4); }

.card--show { gap: var(--s6); }
@media (min-width: 860px) {
  .card--show {
    display: grid;
    grid-template-columns: 340px 1fr;
    align-items: center;
    gap: var(--s12);
    padding: var(--s8);
  }
  .card--flip { grid-template-columns: 1fr 340px; }
  .card--flip .show__mock { order: 2; }
}

/* Der Rahmen steht fuer den App-Hintergrund. Innen liegen die Bauteile genau so
   uebereinander wie auf dem Screen. */
.show__mock {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.show__text > * + * { margin-top: var(--s4); }
.show__text p { color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.show__note { color: var(--text-faint); font-size: 13px; }

/* ---------------------------------------------------------------- Duo-Karte */

.duocard {
  margin: var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
/* Die 3 px zwischen den Haelften sind in der App der durchscheinende Hintergrund. */
.duocard__halves { display: grid; gap: 3px; background: var(--bg); }

.duohalf {
  position: relative;
  display: block;
  width: 100%;
  height: 175px;
  padding: 0;
  border: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}
.duohalf__init {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.24);
}

/* Foto-Anzeige. Lage und Farben wie im Solo-Deck, Hoehe 2,5 px. */
.duohalf__bars { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; }
.duohalf__bars i { flex: 1; height: 2.5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.35); }
.duohalf__bars i.on { background: #fff; }

/* Info-Knopf. top-6, damit er unter der Foto-Anzeige sitzt. */
.duohalf__info {
  position: absolute;
  right: 12px;
  top: 24px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
}

/* Drei Stopps statt zwei. Ein linearer Verlauf liest sich als Kante quer durchs Foto. */
.duohalf__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent 0%, rgba(11, 11, 20, 0.22) 55%, rgba(11, 11, 20, 0.88) 100%);
}
.duohalf__dim {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 20, 0.55);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.duohalf[data-dim="1"] .duohalf__dim { opacity: 1; }

.duohalf__foot {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.duohalf__name { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }

.duopill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  white-space: nowrap;
}
.duopill svg { width: 12px; height: 12px; flex: none; }
.duopill--tap { background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.8); font-weight: 500; }
.duopill--pick { background: var(--primary); color: #fff; font-weight: 600; display: none; }
.duohalf[aria-pressed="true"] .duopill--tap { display: none; }
.duohalf[aria-pressed="true"] .duopill--pick { display: inline-flex; }

.duocard__bar { padding: var(--s3); display: grid; gap: 6px; }
.duocard__names { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.duocard__hint { font-size: 13px; font-weight: 600; color: var(--accent); }
.duocard[data-picked="1"] .duocard__hint { display: none; }
.duocard__meta { font-size: 13px; color: var(--text-dim); }
.duocard__tags { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: 2px; }
.tagmicro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

/* -------------------------------------------------------------- Sprachraum */

.roomcard { display: grid; }

.roomcard__top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: var(--s2) var(--s3);
}
/* In der App traegt der Titelblock flex-1 und der Name numberOfLines={1}. */
.roomcard__top > div { flex: 1; min-width: 0; }
.roomcard__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roomcard__count { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.roomcard__code {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
.roomcard__code svg { width: 18px; height: 18px; flex: none; }

.roomcard__people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  padding: var(--s4);
}
.person { width: 68px; display: grid; justify-items: center; gap: 4px; }
.person__name { font-size: 11px; font-weight: 500; color: var(--text); }
.person__role { font-size: 11px; font-weight: 600; color: var(--accent); }

/* Ring 3 px breit, 3 px Abstand zum Bild, also 60 + 12 = 72 px aussen. */
.ring { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.ava {
  width: 60px;
  height: 60px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.ring::before, .ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  border: 3px solid #00e676;
  opacity: 0;
  pointer-events: none;
}
.ring::after { box-shadow: 0 0 10px rgba(0, 230, 118, 0.9); }
.person.is-speaking .ring::after { opacity: 1; }
.person.is-speaking .ring::before { animation: halo 950ms ease-out infinite; }
@keyframes halo {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 0; transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .person.is-speaking .ring::before { animation: none; opacity: 0.28; transform: scale(1.12); }
}

/* Gruen oben rechts heisst verbunden, grau unten rechts heisst selbst stummgeschaltet. */
.dot-on, .dot-mute { position: absolute; border-radius: var(--r-pill); border: 2px solid var(--bg); }
.dot-on { top: 4px; right: 4px; width: 16px; height: 16px; background: var(--success); }
/* 24 px Kreis mit 2 px Rand in Hintergrundfarbe, darin das Mikro-Symbol in 13 px.
   Grau heisst selbst stummgeschaltet. Vom Host stummgeschaltet waere derselbe Kreis
   in --danger mit weissem Symbol, dann muss --badge-bg mitgeaendert werden. */
.dot-mute {
  --badge-bg: var(--surface-2);
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
/* Abweichung von der App, mit Absicht. Dort sind es 13 px, aber das ist eine
   gehintete Schrift-Glyphe von Ionicons. Als SVG verschmiert dieselbe Zeichnung
   bei 13 px zu einem Fleck, gemessen im Canvas. 16 px liest sich als Mikrofon
   mit Strich und passt noch in den 24er Kreis. */
.dot-mute svg { width: 16px; height: 16px; color: var(--text-dim); }

.roomcard__mic {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  border-top: 1px solid var(--border);
  padding: var(--s3) var(--s4);
}
.roomcard__status { display: inline-flex; align-items: center; gap: var(--s2); font-size: 11px; color: var(--text-dim); }
.roomcard__status i { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--success); flex: none; }
.micpill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.micpill svg { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* Demo: Blitz */
.bolt-demo { display: flex; align-items: center; gap: var(--s4); width: 100%; }
.bolt-demo svg { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 0 14px rgba(255, 214, 10, 0.4)); }

/* ---------- Sicherheit ---------- */
.safety { border-top: 1px solid var(--border); }
.safety__list { margin-top: var(--s8); display: grid; gap: var(--s6); }
@media (min-width: 720px) { .safety__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--s12); } }
.safety__item { display: flex; gap: var(--s4); align-items: flex-start; }
.safety__item svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--accent); }
.safety__item strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.safety__item p { color: var(--text-dim); font-size: 15px; line-height: 1.6; }

/* ---------- Schlusszeile ---------- */
.close { text-align: center; }
.close .h2 { max-width: 15ch; margin-inline: auto; }
.close .hero__cta { justify-content: center; }
.close > * + * { margin-top: var(--s5); }

/* ---------- Fusszeile ---------- */
.foot { border-top: 1px solid var(--border); padding-block: var(--s8) var(--s12); }
.foot__in { display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: space-between; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s6); }
.foot nav a { color: var(--text-dim); text-decoration: none; font-size: 15px; }
.foot nav a:hover { color: var(--text); }
.foot__legal { color: var(--text-faint); font-size: 13px; }

/* ---------- Unterseiten ---------- */
.doc { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 9vw, 96px); }
/* 680 statt 720 und 16 px statt 15 px, damit die Zeilen der langen Rechtstexte
   bei rund 75 Zeichen bleiben statt bei 90. */
.doc__in { max-width: 680px; }
.doc h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.05; margin-top: var(--s6); }
.doc h2 {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-top: var(--s12);
  margin-bottom: var(--s4);
  padding-top: var(--s6);
  border-top: 1px solid var(--border);
}
.doc h3 { font-weight: 600; font-size: 17px; margin-top: var(--s6); margin-bottom: var(--s2); }
.doc p, .doc li { color: var(--text-dim); font-size: 16px; line-height: 1.7; }
.doc p + p { margin-top: var(--s3); }
.doc ul { margin-top: var(--s3); display: grid; gap: var(--s2); }
.doc ul li { padding-left: var(--s5); position: relative; }
.doc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--primary);
}
.doc dl { margin-top: var(--s4); display: grid; gap: var(--s4); }
.doc dt { font-size: 13px; font-weight: 500; color: var(--text-faint); }
.doc dd { margin: 2px 0 0; font-size: 15px; color: var(--text); }
.doc__back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); text-decoration: none; font-size: 15px; }
.doc__back:hover { color: var(--text); }
.doc__back svg { width: 18px; height: 18px; }
.doc__meta { margin-top: var(--s6); color: var(--text-faint); font-size: 13px; }

/* Hinweiskarte, gleiche Form wie der Platzhalter-Hinweis in der App */
.notice {
  border-radius: var(--r-card);
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: var(--surface);
  padding: var(--s4);
  margin-top: var(--s6);
}
.notice p { color: var(--warning); font-size: 13px; font-weight: 600; line-height: 1.5; }

/* Support-Fragen */
.qa { margin-top: var(--s8); display: grid; gap: var(--s3); }
.qa details {
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--s5) var(--s6);
}
.qa summary {
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  color: var(--text);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa details p { margin-top: var(--s3); color: var(--text-dim); font-size: 15px; line-height: 1.65; }

/* ---------- Hilfsklassen statt style-Attribute, damit eine strenge CSP haelt ---------- */
.sprite { position: absolute; }
.ic-white { color: #fff; }
.ic-flix { color: var(--flix); }
.ic-yes { color: var(--success); }
.duo-a { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.duo-b { background: linear-gradient(200deg, #ec4899, #7c3aed); }
.close__lead { max-width: 46ch; margin-inline: auto; }

/* Gradient-Kacheln der Deck-Karten, Fotoersatz wie in der App */
.t1 { background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%); }
.t2 { background: linear-gradient(160deg, #ec4899 0%, #7c3aed 100%); }
.t3 { background: linear-gradient(115deg, #9333ea 0%, #ec4899 55%, #7c3aed 100%); }
.t4 { background: linear-gradient(200deg, #7c3aed 0%, #db2777 100%); }
.t5 { background: linear-gradient(145deg, #ec4899 0%, #8b5cf6 100%); }

.contact {
  margin-top: var(--s8);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
}