/* Chat Tower Companion -- pages/entry.css
 * P6-Kette Glied 6/8 (web-241, style.css-Schnitt II). Reine Verschiebung aus
 * web/public/style.css (Muster web-240 base.css/components.css) -- KEINE
 * Regel-Aenderung durch den Umzug selbst (Design-Lock-Aenderungen dieses
 * Tickets sind separat markiert, s. web-241-Ticket "## Notes").
 *
 * Scope: Landing (/), Play-Now-Entry-Funnel (ui-263), die Gast/Twitch-
 * Kollisions-Wahl-Seite (web-200, /auth/twitch/resolve) sowie ein winziger
 * 320px-Sweep-Rest (ui-401, nur .hero-title) -- alle drei sind Teil desselben
 * vor-Dashboard Login-/Entry-Funnels, deshalb eine gemeinsame Datei statt
 * drei Ein-Zeiler-Dateien (Dev-Schnitt).
 *
 * Kaskaden-Reihenfolge (siehe layout.js-Kommentar fuer die volle Kette):
 * tokens.css -> base.css -> components.css -> pages/{entry,help,collection,
 * build,admin,highscore,changelog,achievements,techtree,profile,dashboard,
 * shared-mobile,glossar}.css. Diese Datei muss VOR pages/dashboard.css laden
 * (.entry max-width-Override in einem spaeteren Dashboard-Mobile-Block
 * braucht die hier definierte Basisregel zuerst, s. web-241-Ticket). */


/* ===== Landing ===== */

.landing { text-align: center; padding: 3em 1em; }
.hero-title {
  font-size: 3em;
  margin: 0 0 0.3em;
  letter-spacing: -0.02em;
  color: var(--text);
  text-shadow: 0 0 20px rgba(56, 225, 255, 0.3);
  white-space: nowrap; /* ui-670 AK2: "Hexa Tower" bleibt einzeilig (Google-Markenpruefung vergleicht die Ueberschrift woertlich) */
}
.hero-accent {
  color: var(--magenta);
  text-shadow: 0 0 20px rgba(255, 69, 181, 0.6);
}
.hero-tagline {
  font-size: 1.1em;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 2em;
  line-height: 1.5;
}
.hero-cta {
  display: inline-block;
  background: var(--cyan);
  color: var(--bg);
  padding: 0.8em 2em;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 0 24px rgba(56, 225, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.hero-cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(56, 225, 255, 0.6);
}

/* ===== Play-Now-Entry (ui-263) ===== */

.entry {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* ui-675: umgezogen aus pages/dashboard.css (ui-263/ui-673) -- .entry
   rendert nur auf dieser Seite (landing.js), "besitzt" hier den vollen
   Wortstamm (Fall 4 wie .choice/.landing), kein Kaskaden-Lock mit einer
   anderen Datei mehr. */
@media (max-width: 480px) {
  .entry { max-width: 100%; }
}

/* Primär: "Jetzt spielen" — gefüllt cyan (Funnel-Aktion) */
.cta-primary {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: 0.02em;
  background: var(--cyan);
  color: var(--bg);
  padding: 0.9em 2em;
  min-height: 52px;
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(56, 225, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(56, 225, 255, 0.6);
}
.cta-primary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.cta-primary:active { transform: translateY(0); }
.cta-primary[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
  box-shadow: 0 0 18px rgba(56, 225, 255, 0.3);
}
.cta-primary[disabled] { cursor: not-allowed; }

/* ui-603: .spinner war bare, einziger Konsument views/landing.js (im
   .cta-primary-Button) -- unter .cta-primary gescoped. */
.cta-primary .spinner {
  display: none;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 2px solid rgba(6, 8, 15, 0.35);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: ct-entry-spin 0.7s linear infinite;
}
.cta-primary[aria-busy="true"] .spinner { display: inline-block; }
@keyframes ct-entry-spin { to { transform: rotate(360deg); } }

/* Ehrlichkeits-Microcopy (Session-Loss) direkt unter dem Primär-CTA */
.cta-note {
  margin: 0.7em 0 0;
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--text-dim);
}

/* Trenner */
.cta-or {
  display: flex;
  align-items: center;
  gap: 0.8em;
  color: var(--muted);
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.4em 0;
}
.cta-or::before, .cta-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Sekundär: "Login mit Twitch" — ghost/outline, klar sichtbar */
.cta-secondary {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
  padding: 0.75em 1.6em;
  min-height: 48px;
  border-radius: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cta-secondary:hover {
  border-color: var(--twitch);
  color: #fff;
  background: rgba(145, 70, 255, 0.10);
}
.cta-secondary:focus-visible {
  outline: 2px solid var(--twitch);
  outline-offset: 3px;
}
/* ui-675: .tw-glyph-Basis (width/height/fill) ist nach components.css
   umgezogen -- echter Zweitkonsument dashboard.js (Gast-Banner) ausserhalb
   von .cta-secondary. Der lokale Hover-Override bleibt hier (2-Compound,
   bereits sicher gescoped). */
.cta-secondary:hover .tw-glyph { fill: #b98bff; }

/* ui-669 (DL-1/DL-2): Discord-Sekundär-Button — derselbe .cta-secondary-
   Rahmen-Baustein wie Twitch, nur Logo in Markenfarbe + Blurple-Hover-Ton.
   Zwischen Twitch und Google (DL-1-Reihenfolge). */
.cta-secondary.cta-discord { margin-top: 0.6em; }
.cta-secondary.cta-discord:hover { border-color: var(--discord-blurple); color: #fff; background: rgba(88, 101, 242, 0.12); }
.cta-secondary.cta-discord:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ent-d-glyph { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: var(--discord-blurple); }

/* ui-669 AK2b (Fifty 25.09. "Google bitte in die selbe Farbe gerade
   ziehen"): Google-Sekundär-Button im selben Rahmen-Stil wie Twitch/Discord
   (ehemals eine dunkle Marken-Füllung, web-348 AK8/DL-5) — Basis
   .cta-secondary liefert Rahmen/Text bereits, hier nur noch Hover/Fokus. */
.cta-secondary.cta-google { margin-top: 0.6em; }
.cta-secondary.cta-google:hover { border-color: var(--text-dim); color: #fff; background: rgba(255, 255, 255, 0.05); }
.cta-secondary.cta-google:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ent-g-glyph { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

.cta-hint {
  margin: 0.55em 0 0;
  font-size: 0.82em;
  color: var(--muted);
  line-height: 1.4;
}
.cta-hint b { color: var(--magenta); font-weight: 600; }

/* web-226 (DL-4): leise dritte Zeile — Passkey-Login, nur sichtbar wenn
   dieses Gerät (localStorage) einen Passkey kennt. Bewusst kein Button-Look
   (kein drittes gleichrangiges CTA neben Primär/Sekundär) — reiner
   Text-Link-Stil, Muster aus dem abgenommenen Prototyp
   (.claude/sprint/prototypes/web-226.html). [hidden] explizit erzwungen,
   weil display:block unten sonst die native [hidden]-UA-Regel schlägt
   (gleiche Spezifität, Autor-Regel gewinnt). */
.entry-quiet {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 1em 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--cyan);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-quiet[hidden] { display: none; }
/* web-226 must-fix (Review 2026-08-06, DL-7): der :hover-Regel-Vorgänger
   setzte die Literalfarbe #7aeaff ohne Token. Rest-Farbe ist bereits
   var(--cyan) (s.o.) — ein Hover-auf-var(--cyan) wäre ein reiner No-op, also
   gestrichen statt mit demselben Token neu geschrieben (beide Optionen laut
   Review gleichwertig, "streichen" vermeidet eine tote No-op-Regel). */

/* Status/Fehler-Region */
.entry-status {
  min-height: 1.4em;
  margin: 1.1em 0 0;
  font-size: 0.9em;
  line-height: 1.4;
}
.entry-status.err { color: var(--red); }
.entry-status.ok { color: var(--green); }
.entry-status .retry {
  margin-left: 0.5em;
  color: var(--cyan);
  text-decoration: underline;
  cursor: pointer;
}

/* ui-609 (Design-Lock DL-1, Variante A) -- ruhige Rechtszeile unter dem
   GESAMTEN Einstiegs-Block, 1:1 aus dem Prototyp (.claude/sprint/prototypes/
   ui-609.html) uebernommen. Gleicher Ton wie .cta-note/.cta-hint (caption,
   muted), Links cyan ohne Unterstrich (Hover unterstrichen). max-width:420px
   deckt sich mit .entry selbst (s.o.) -- .entry ist ein Flex-Column-
   Container mit align-items:stretch, die Kappung + margin:auto haelt die
   Zeile mittig, falls .entry je schmaler als 420px ausfaellt. */
.entry-legal {
  margin: 14px auto 0;
  max-width: 420px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.55;
}
.entry-legal a { color: var(--cyan); text-decoration: none; }
.entry-legal a:hover { text-decoration: underline; }

.hero-info {
  max-width: 600px;
  margin: 3em auto 0;
  text-align: left;
  padding: 1.5em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.hero-info { margin-top: 2em; }
.hero-info h2 { color: var(--cyan); margin-top: 0; }
.hero-info ul { margin: 0; padding-left: 1.3em; line-height: 1.7; }
.hero-info li { color: var(--text); }
.hero-info .info-lead { line-height: 1.6; margin: 0 0 1em; color: var(--text); }
.hero-info .info-lead strong { color: var(--magenta); }
.hero-info .info-bullets { margin: 0; padding-left: 1.3em; line-height: 1.7; }
.hero-info .info-bullets em { color: var(--yellow); font-style: normal; }
.hero-info .info-foot {
  margin: 1.2em 0 0;
  padding-top: 1em;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.9em;
}

/* ui-214 Breakpoint-Kanon (480/768/1100 kanonisch, 600 bewusste
   Phablet-Zwischenstufe) -- volle Doku in pages/shared-mobile.css. */
@media (max-width: 600px) {
  .hero-title { font-size: 2em; }
}

/* =====================================================================
   web-200: Kollisions-Wahl-Screen (Gast → Twitch, bestehender Account).
   Prototyp: .claude/sprint/prototypes/web-200.html — Layout/Klassennamen
   1:1 übernommen, Farbwerte durch Companion-Tokens ersetzt.
   Farb-Rollen strikt (Design-Lock): Cyan = sicher/primär, Rot = Gefahr,
   --twitch NUR als Titel-/Karten-Akzent (nicht auf Aktions-Buttons).
===================================================================== */
/* ui-603: .choice ist Seiten-Root (collision-choice.js/name-choice.js), kein
   Vorfahre moeglich -- als voller Klassenname registriert statt gescoped
   (Begruendung css-namespaces.mjs). .ch-head/.ch-title/.ch-sub sind direkte
   Kinder, unter .choice gescoped (2 Compounds, strukturell kollisionssicher,
   unabhaengig von .choice's eigener Registrierung). */
.choice {
  /* ui-665 AK10: war min(760px, 96vw) — bei <=600px (.site-main padding:1em,
     shared-mobile.css) ist 96vw (374,4px @390px) breiter als der tatsächlich
     übrige Innenraum (360px). margin:auto verteilt den Überstand bei
     über-eingeschränktem Platz NICHT symmetrisch (CSS-Spec, LTR: linker Rand
     gewinnt auf 0, rechter absorbiert negativ) — sichtbar als 15px/0,6px-
     Schiefstand (Review-Fund web-348). 100% (statt 96vw) ist relativ zur
     .site-main-Content-Box selbst -- kann sie nie überschreiten, Desktop
     bleibt pixelgleich (.site-main max-width:980px liegt weit über 760px). */
  width: min(760px, 100%);
  margin: 2.5em auto 5em;
}
.choice .ch-head { text-align: center; margin-bottom: 1.6em; }
.choice .ch-title { font-size: 1.7em; margin: 0 0 .35em; letter-spacing: -.01em; }
.ch-title b { color: var(--twitch); }
.choice .ch-sub { color: var(--muted); margin: 0; line-height: 1.5; }

.choice .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-bottom: 1.6em; }
.choice .pcard { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 1.1em 1.2em; }
.choice .pcard.existing { border-color: rgba(56, 225, 255, .42); }
.choice .pcard.guest { border-color: rgba(145, 70, 255, .42); }
.choice .pc-role { font-size: .75em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .25em; }
.choice .pcard.existing .pc-role { color: var(--cyan); }
.choice .pcard.guest .pc-role { color: #b98bff; }
.choice .pc-name { font-size: 1.15em; font-weight: 700; margin-bottom: .7em; overflow-wrap: anywhere; }
.choice .pc-stats { display: grid; grid-template-columns: auto 1fr; gap: .3em .8em; font-size: .9em; }
.choice .pc-stats dt { color: var(--muted); margin: 0; }
.choice .pc-stats dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.choice .pc-stats dd .hx { color: var(--magenta); }
.choice .pc-stats dd.big { font-weight: 700; }

.choice .actions { display: flex; flex-direction: column; gap: .8em; align-items: center; }
.choice .btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  border-radius: 6px; padding: .85em 1.6em; min-height: 50px; width: min(460px, 100%);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.choice .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.choice .btn-primary { background: var(--cyan); color: var(--bg); box-shadow: 0 0 22px rgba(56, 225, 255, .35); }
.choice .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(56, 225, 255, .55); }
.choice .btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.choice .btn-cancel { background: transparent; color: var(--muted); font-weight: 600; min-height: auto; padding: .4em; text-decoration: underline; }
.choice .btn-cancel:hover { color: var(--text); }
.choice .btn-cancel:disabled { opacity: .6; cursor: default; }

/* Danger-Zone: zweistufig */
.choice .danger {
  width: min(460px, 100%); border: 1px solid rgba(255, 77, 110, .42); border-radius: 8px;
  background: rgba(255, 77, 110, .06); padding: .9em 1em; text-align: center;
}
.choice .danger-trigger {
  background: transparent; color: var(--red); border: 1px solid rgba(255, 77, 110, .45);
  font-weight: 600; width: 100%; min-height: 46px; border-radius: 6px; cursor: pointer;
  font: inherit; padding: .6em;
}
.choice .danger-trigger:hover { background: rgba(255, 77, 110, .10); }
.choice .danger-trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.choice .danger-confirm { display: none; margin-top: .2em; }
.choice .danger.open .danger-trigger { display: none; }
.choice .danger.open .danger-confirm { display: block; }
.choice .danger-warn { color: var(--red); font-size: .9em; line-height: 1.5; margin: 0 0 .7em; }
.choice .danger-warn b { color: #ff8fa3; }
.choice .btn-danger {
  background: var(--red); color: #1a0007; font-weight: 800; width: 100%; min-height: 48px;
  border-radius: 6px; border: 0; cursor: pointer; font: inherit;
}
.choice .btn-danger:hover { filter: brightness(1.08); }
.choice .btn-danger:disabled { opacity: .6; cursor: default; filter: none; }
.choice .btn-danger:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.choice .danger-back {
  background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit;
  text-decoration: underline; margin-top: .5em; font-size: .85em;
}
.choice .danger-back:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }

.choice .out { margin-top: 1.2em; text-align: center; color: var(--text-dim); font-size: .9em; min-height: 1.3em; }

@media (max-width: 560px) {
  .choice .cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   web-348: Namenswahl-Seite (AK3-AK6, DL-3) — teilt sich .choice/.ch-head/
   .btn-primary/.btn-cancel mit der Kollisions-Wahl-Seite oben (web-200),
   NUR das Eingabefeld + seine Zustaende sind neu. 1:1 aus dem abgenommenen
   Prototyp (.claude/sprint/prototypes/web-347-google-login.html Fläche 2).
   Klassen tragen den registrierten 'ent-'-Praefix (css-namespaces.mjs) —
   `.chip` (ohne Praefix) kollidierte mit dem bereits bestehenden geteilten
   `.chip`-Baustein in components.css (Profil-Chips, andere Bauart: Span
   statt Button, kein Touch-Ziel) -> `.ent-name-chip` statt Wiederverwendung. */
.ent-name-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 1.1em 1.2em;
}
.ent-name-label {
  display: block;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45em;
}
.ent-name-row { display: flex; gap: 0.6em; align-items: stretch; }
.ent-name-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* kein iOS-Zoom, DL-3 */
  font-weight: 700;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0.7em 0.8em;
  min-height: 48px;
  outline: none;
  transition: border-color 0.15s;
}
.ent-name-input:focus { border-color: var(--cyan); }
.ent-name-input.ok { border-color: var(--green); }
.ent-name-input.bad { border-color: var(--red); }
.ent-name-count {
  align-self: center;
  font-size: 0.8em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ent-name-state {
  min-height: 1.5em;
  margin: 0.55em 0 0;
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--text-dim);
}
.ent-name-state.ok { color: var(--green); }
.ent-name-state.bad { color: var(--red); }
.ent-name-sugg { display: flex; flex-wrap: wrap; gap: 0.45em; margin: 0.5em 0 0; }
.ent-name-sugg[hidden] { display: none; }
.ent-name-sugg span { font-size: 0.8em; color: var(--muted); align-self: center; }
.ent-name-chip {
  appearance: none;
  font: inherit;
  font-size: 0.85em;
  padding: 0.45em 0.8em;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.ent-name-chip:hover { border-color: var(--cyan); color: var(--cyan); }
.ent-name-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ent-name-rules {
  margin: 0.9em 0 0;
  padding: 0.7em 0 0;
  border-top: 1px dashed var(--line);
  font-size: 0.82em;
  line-height: 1.55;
  color: var(--muted);
}

/* =====================================================================
   ui-401: 320px-Sweep — horizontale Overflows der iPhone-SE-Klasse
   (Messlauf 2026-08-04: Headless-Chrome, iPhone-UA via --user-agent-Flag,
   320x568/dsf2/mobile:true; Befunde + Vorher/Nachher-Tabelle im Ticket).

   Drei Befunde, drei getrennte Fixes:
   - .achievement-grid: minmax(300px,1fr)-Floor → min(300px,100%)
     (pages/achievements.css, s. Kommentar dort).
   - .app-botnav: nur SYMPTOM (fixed left/right:0 spannte den vom Hero-
     Overflow expandierten Layout-Viewport ab) — Haertung minmax(0,1fr)
     im ui-389-Block, kausaler Fix ist der Hero-Block HIER.
   - .hero-title: die Landing-Headline unten.

   POSITION AM DATEIENDE: die ≤374px-Stufe muss die 2em-Stufe des
   generischen ≤600px-Blocks oben in dieser Datei per Source-Order schlagen
   (gleiche Spezifitaet 0,1,0). */

/* Landing-Hero: die 2em/1.35em-Stufen stammen aus dem 320px-Sweep (ui-401)
   fuer die damalige, laengere Zeile „Chat Tower Companion" (dort per &nbsp;
   erzwungen). ui-670 kuerzt den Text auf „Hexa Tower" (echtes Leerzeichen +
   `white-space: nowrap` an .hero-title statt `&nbsp;`, Google-
   Markenpruefung) -- die kuerzere Zeile braucht die Stufen fuer sich
   genommen nicht mehr zum Overflow-Schutz, sie bleiben aber unveraendert
   stehen (Lock: Groessen bleiben "wie heute", ui-670 aendert nur die
   Woerter). ≥375px weiterhin byte-identisch. */
@media (max-width: 374px) {
  .hero-title { font-size: 1.35em; }
}

/* =====================================================================
   web-283: Referral-Landing (Geworbenen-Sicht) — .rf-invite-hero/.rf-check/
   .rf-privacy/.rf-welcome 1:1 aus dem Fifty-abgenommenen Prototyp
   (.claude/sprint/prototypes/ui-576-referral.html, Geworbenen-Sicht,
   Design-Lock 2026-09-02) übernommen, nur die absoluten px-Werte des
   Standalone-Mockups auf die em-Konvention DIESER Datei umgerechnet (kein
   eigenes :root im echten Cascade nötig — tokens.css liefert --green/--gold/
   --cyan/--border/--muted/--text bereits, s. dortige Definition).
   Konsumenten: views/landing.js (Pre-Account-Hero, AK2, ersetzt
   .hero-title/.hero-tagline wenn ?ref=<code> auflöst) UND
   views/referral-landing.js referralProgressPage() (Post-Account-
   Fortschritt/Qualifiziert-Banner, AK3/AK4) — beide rendern dieselbe
   referralInviteSection(), daher EIN CSS-Block für beide. Kein eigenes
   .hero-title-Overflow-Risiko wie der 320px-Sweep-Block direkt darüber:
   .rf-invite-hero h1 nutzt kein `white-space: nowrap`, der Text wickelt
   bei schmalen Viewports natürlich um. ===================================================================== */
.rf-invite-hero { text-align: center; padding: 0.5em 0 0.9em; }
.rf-invite-hero h1 { font-size: 1.6em; color: var(--text); margin: 0 0 0.25em; }
.rf-invite-hero .sub { color: var(--muted); font-size: 0.9em; }
.rf-check {
  display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6em 0.8em; margin: 0.55em auto 0; max-width: 480px;
  background: rgba(255, 255, 255, 0.02);
}
.rf-check.ok { border-color: rgba(94, 255, 138, 0.5); }
.rf-check .st { flex: 0 0 22px; text-align: center; }
.rf-check.ok .st { color: var(--green); }
.rf-check .lbl { font-size: 0.92em; color: var(--text); }
.rf-check .lbl small { display: block; color: var(--muted); font-size: 0.82em; }
.rf-check .prog { margin-left: auto; font-size: 0.85em; color: var(--muted); white-space: nowrap; }
.rf-privacy {
  font-size: 0.8em; color: var(--muted); margin: 0.7em auto 0; max-width: 480px; text-align: center;
}
.rf-welcome {
  border: 1px solid var(--cyan); border-radius: 10px;
  padding: 0.7em 0.9em; margin: 0.8em auto 0; max-width: 480px;
  background: rgba(56, 225, 255, 0.07); color: var(--text); font-size: 0.92em;
  text-align: center;
}
.rf-welcome svg { vertical-align: -2px; }
.rf-continue { text-align: center; margin-top: 1.5em; }