/* --------------------------------------------------------------------------
   Geist (SIL Open Font License 1.1, siehe assets/fonts/GEIST-LICENSE.txt)
   Selbst gehostet - kein Google-Fonts-CDN, damit keine Daten abfließen
   und die Content-Security-Policy bei 'self' bleiben kann.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Variable.woff2") format("woff2-variations"),
         url("../fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   HostR Closed Beta - Landingpage
   Design abgeleitet vom Messe-Aufsteller (whatsnext.png):
   Blauschwarzer Raum, blauer Nebel, roter Lichtstrahl, Cyan-Raster,
   rote Eckklammern als wiederkehrendes Motiv.
   Mobile first - das Desktop-Layout ist der Nebenfall.
   ========================================================================== */

:root {
    /* Farben direkt aus dem Aufsteller entnommen */
    --space-950: #05070c;
    --space-900: #090d16;
    --space-800: #0e1526;
    --space-700: #16203a;
    --nebula-700: #202d57;
    --nebula-500: #27529e;
    --cyan-400: #479ad1;
    --cyan-300: #6fd3e8;
    --red-500: #e53a46;
    --red-600: #c81f2d;
    --white: #fbfbfb;
    --muted: #9a9aa6;
    --muted-dim: #6b6b78;

    --line: rgba(71, 154, 209, 0.22);
    --line-strong: rgba(71, 154, 209, 0.45);

    --radius: 12px;
    --radius-sm: 8px;
    --tap: 3.25rem;

    --shell-max: 27rem;

    --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background-color: var(--space-900);
    color: var(--white);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Hintergrundebenen
   -------------------------------------------------------------------------- */

.starfield,
.grid-lines,
.beam {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Nebel: blauer Wolkenbauch unten, roter Schimmer in der Mitte */
.starfield {
    background:
        radial-gradient(60% 38% at 50% 58%, rgba(229, 58, 70, 0.16) 0%, rgba(229, 58, 70, 0) 70%),
        radial-gradient(85% 55% at 22% 72%, rgba(32, 45, 87, 0.85) 0%, rgba(32, 45, 87, 0) 72%),
        radial-gradient(75% 50% at 82% 62%, rgba(39, 82, 158, 0.55) 0%, rgba(39, 82, 158, 0) 70%),
        radial-gradient(120% 70% at 50% 108%, rgba(39, 82, 158, 0.5) 0%, rgba(9, 13, 22, 0) 65%),
        linear-gradient(180deg, var(--space-950) 0%, var(--space-900) 45%, #0b1220 100%);
}

/* Technisches Raster wie in den Bannerecken */
.grid-lines {
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem;
    background-position: -1px -1px;
    -webkit-mask-image:
        radial-gradient(70% 45% at 0% 0%, #000 0%, transparent 70%),
        radial-gradient(60% 35% at 100% 12%, #000 0%, transparent 70%),
        radial-gradient(70% 30% at 100% 95%, #000 0%, transparent 70%);
    mask-image:
        radial-gradient(70% 45% at 0% 0%, #000 0%, transparent 70%),
        radial-gradient(60% 35% at 100% 12%, #000 0%, transparent 70%),
        radial-gradient(70% 30% at 100% 95%, #000 0%, transparent 70%);
    opacity: 0.8;
}

/* Roter Lichtstrahl in der Bildmitte.

   Standardmaessig aus. Er ergibt nur dort Sinn, wo er in die Luecke zwischen
   zwei Spalten faellt - also auf der Landingpage ab 64rem. Ueberall sonst
   liegt die Seite einspaltig und mittig, dann liefe er durch die Inhalte.
   Die Stimmung des Aufstellers traegt an diesen Stellen der rote Schimmer
   im Nebel (.starfield). */
.beam {
    display: none;
    background:
        linear-gradient(180deg, transparent 18%, rgba(229, 58, 70, 0.9) 42%, rgba(255, 210, 205, 0.95) 50%, rgba(229, 58, 70, 0.9) 58%, transparent 82%);
    width: 2px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    filter: blur(1px);
    opacity: 0.75;
}

.beam::after {
    content: "";
    position: absolute;
    top: 22%;
    left: 50%;
    width: 18rem;
    height: 56%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(229, 58, 70, 0.3) 0%, rgba(229, 58, 70, 0) 72%);
    filter: blur(14px);
}

/* --------------------------------------------------------------------------
   Grundgerüst
   -------------------------------------------------------------------------- */

.shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) 1.25rem 2rem;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.shell-narrow {
    max-width: 24rem;
    justify-content: center;
}

.shell-wide {
    max-width: 68rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Rote Eckklammern - das Leitmotiv des Aufstellers */
.brackets {
    --bracket-thickness: 2px;
    --bracket-length: 1.25rem;
    --bracket-color: var(--red-500);
    background-image:
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color));
    background-size:
        var(--bracket-length) var(--bracket-thickness), var(--bracket-thickness) var(--bracket-length),
        var(--bracket-length) var(--bracket-thickness), var(--bracket-thickness) var(--bracket-length),
        var(--bracket-length) var(--bracket-thickness), var(--bracket-thickness) var(--bracket-length),
        var(--bracket-length) var(--bracket-thickness), var(--bracket-thickness) var(--bracket-length);
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Wortmarke
   -------------------------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    align-self: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    /* Breite Wortmarke: ueber die Hoehe steuern, Breite folgt dem Verhaeltnis */
    height: 1.5rem;
    width: auto;
}

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

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding-top: 1.75rem;
}

.hero-title {
    margin: 0.75rem 0 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.25rem, 19vw, 5.5rem);
    line-height: 0.86;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
}

.hero-title .line-1 {
    color: var(--white);
}

.hero-title .line-2 {
    color: var(--red-500);
    text-shadow: 0 0 2.5rem rgba(229, 58, 70, 0.55);
}

.hero-claim {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
}

.hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.hero-pills li {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-pills li:not(:last-child)::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red-500);
}

/* Badge mit Eckklammern wie "CLOSED BETA" auf dem Aufsteller */
.badge {
    margin-top: 0.5rem;
    padding: 0.85rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    --bracket-thickness: 2px;
    --bracket-length: 1.25rem;
    --bracket-color: var(--red-500);
    background-image:
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color));
    background-size:
        var(--bracket-length) var(--bracket-thickness), var(--bracket-thickness) var(--bracket-length),
        var(--bracket-length) var(--bracket-thickness), var(--bracket-thickness) var(--bracket-length),
        var(--bracket-length) var(--bracket-thickness), var(--bracket-thickness) var(--bracket-length),
        var(--bracket-length) var(--bracket-thickness), var(--bracket-thickness) var(--bracket-length);
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
    background-repeat: no-repeat;
}

.badge-main {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.badge-sub {
    font-size: 0.8125rem;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Zäsur zwischen Hero und Anmeldung

   Der Hero endet mit "CLOSED BETA". Ohne sichtbaren Schnitt läuft er in das
   Formular hinein - die Linie setzt den Punkt und benennt zugleich, was folgt.
   -------------------------------------------------------------------------- */

.section-break {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0.75rem 0 -0.25rem;
}

.section-break-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong));
}

.section-break-line:last-child {
    background: linear-gradient(90deg, var(--line-strong), transparent);
}

.section-break-cue {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */

.card {
    position: relative;
    background: linear-gradient(180deg, rgba(14, 21, 38, 0.92) 0%, rgba(9, 13, 22, 0.92) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    backdrop-filter: blur(6px);
}

/* Die Anmeldekarte ist das Ziel der Seite und darf sich vordrängeln:
   hellerer Grund, roter Rahmenton, roter Balken an der Oberkante. */
.card-signup {
    background: linear-gradient(180deg, rgba(22, 32, 58, 0.96) 0%, rgba(12, 18, 32, 0.96) 100%);
    border-color: rgba(229, 58, 70, 0.38);
    box-shadow:
        0 0 0 1px rgba(229, 58, 70, 0.08),
        0 1.5rem 3rem rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.card-signup::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--red-600), var(--red-500), var(--cyan-400));
}

.card-kicker {
    margin: 0 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red-500);
}

.card-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.card-title-lead {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.card-lead {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* Hervorgehobener Hinweis in der Anmeldekarte - soll nicht im Fliesstext
   untergehen, aber der Überschrift auch nicht die Schau stehlen. */
.card-highlight {
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.875rem;
    background: rgba(71, 154, 209, 0.1);
    border-left: 3px solid var(--cyan-400);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--white);
    font-size: 0.875rem;
    line-height: 1.5;
}

.card-highlight strong {
    color: var(--cyan-300);
}

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */

.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.field label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(251, 251, 251, 0.82);
}

input[type="email"],
input[type="text"],
input[type="password"],
textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 0.875rem 1rem;
    /* Bewusst heller als die Karte: ein dunkles Feld auf dunklem Grund wird
       sonst gar nicht als Eingabefeld wahrgenommen. */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--white);
    /* 16px verhindert das automatische Zoomen auf iOS */
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-dim);
}

input:focus,
textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--red-500);
    box-shadow: 0 0 0 3px rgba(229, 58, 70, 0.22);
}

input[aria-invalid="true"] {
    border-color: var(--red-500);
}

/* Honeypot */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

/* Eigene Checkbox - die Systemvariante ist auf dunklem Grund ein weißer Block */
.field-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.125rem 0 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--space-800);
    border: 2px solid var(--line-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.field-check input[type="checkbox"]:checked {
    background-color: var(--red-500);
    border-color: var(--red-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.875rem;
}

.field-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--cyan-300);
    outline-offset: 2px;
}

.field-check label {
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--muted);
}

.form-note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-dim);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0.875rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
    width: 100%;
    background: linear-gradient(180deg, var(--red-500) 0%, var(--red-600) 100%);
    color: var(--white);
    box-shadow: 0 0.5rem 1.5rem rgba(229, 58, 70, 0.3);
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-ghost {
    width: 100%;
    background: transparent;
    border-color: var(--line-strong);
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
}

.btn-sm {
    width: auto;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cyan-300);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------------------- */

.alert {
    margin: 0 0 1rem;
    padding: 0.875rem 1rem;
    background: rgba(229, 58, 70, 0.12);
    border: 1px solid rgba(229, 58, 70, 0.5);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.alert p,
.alert ul {
    margin: 0;
}

.alert p + p {
    margin-top: 0.5rem;
}

/* Sonst erscheinen Links im Browserblau und fallen aus dem Farbklang */
.alert a {
    color: var(--red-500);
}

.alert-ok a {
    color: var(--cyan-300);
}

.alert ul {
    padding-left: 1.125rem;
}

/* --------------------------------------------------------------------------
   USP-Liste
   -------------------------------------------------------------------------- */

.usp {
    padding: 0 0.25rem;
}

.usp-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-dim);
    text-align: center;
}

.usp-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.usp-list li {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 0 0.75rem 0.875rem;
    border-left: 2px solid var(--line-strong);
}

.usp-key {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--white);
}

.usp-value {
    font-size: 0.8125rem;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Umfrage
   -------------------------------------------------------------------------- */

.survey-head {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.progress-track {
    height: 3px;
    background: rgba(71, 154, 209, 0.18);
    border-radius: 2px;
    overflow: hidden;
}

/* Breitenstufen in 5-Prozent-Schritten. Ohne diese Klassen bräuchten die
   Balken ein style-Attribut - und das verbietet die Content-Security-Policy. */
.bar-0 { width: 0%; }
.bar-5 { width: 5%; }
.bar-10 { width: 10%; }
.bar-15 { width: 15%; }
.bar-20 { width: 20%; }
.bar-25 { width: 25%; }
.bar-30 { width: 30%; }
.bar-35 { width: 35%; }
.bar-40 { width: 40%; }
.bar-45 { width: 45%; }
.bar-50 { width: 50%; }
.bar-55 { width: 55%; }
.bar-60 { width: 60%; }
.bar-65 { width: 65%; }
.bar-70 { width: 70%; }
.bar-75 { width: 75%; }
.bar-80 { width: 80%; }
.bar-85 { width: 85%; }
.bar-90 { width: 90%; }
.bar-95 { width: 95%; }
.bar-100 { width: 100%; }

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--red-600), var(--red-500));
    border-radius: 2px;
    transition: width 0.25s ease;
}

.card-question {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.question-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.015em;
}

.question-hint {
    margin: 0.375rem 0 1.125rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.options {
    margin: 0.5rem 0 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 0.625rem;
}

.option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: var(--tap);
    padding: 0.875rem 1rem;
    background: var(--space-800);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.option-box {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* Mehrfachauswahl bekommt ein Quadrat statt eines Kreises */
.option:has(input[type="checkbox"]) .option-box {
    border-radius: 4px;
}

.option-label {
    font-size: 0.9375rem;
    line-height: 1.4;
}

.option:has(input:checked) {
    border-color: var(--red-500);
    background: linear-gradient(180deg, rgba(229, 58, 70, 0.16) 0%, rgba(229, 58, 70, 0.06) 100%);
}

.option:has(input:checked) .option-box {
    border-color: var(--red-500);
    background:
        radial-gradient(50% 50% at 50% 50%, var(--white) 0 38%, transparent 42%),
        var(--red-500);
}

/* Mehrfachauswahl bekommt einen Haken - denselben wie die Einwilligung */
.option:has(input[type="checkbox"]:checked) .option-box {
    background-color: var(--red-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8125rem;
}

.option:has(input:focus-visible) {
    outline: 2px solid var(--cyan-300);
    outline-offset: 2px;
}

/* Eingabefeld, das zur Option "Anderes" gehört */
.other-field {
    margin: -0.125rem 0 0.125rem;
    /* Auf dem Handy nur leicht einrücken, sonst bleibt zu wenig Feldbreite. */
    padding-left: 1rem;
    /* In der zweispaltigen Ansicht über die volle Breite, sonst klebt das
       Feld in einer Spalte und verliert den Bezug zur Option darüber. */
    grid-column: 1 / -1;
}

.other-field input {
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

.back-link {
    align-self: flex-start;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--muted);
    text-decoration: none;
}

.back-link:hover {
    color: var(--white);
}

/* --------------------------------------------------------------------------
   Abschluss
   -------------------------------------------------------------------------- */

.card-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.badge-done {
    margin-top: 0;
    --bracket-color: var(--cyan-400);
}

.done-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.done-lead {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--white);
}

.done-note,
.done-outro {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.next-participant {
    width: 100%;
    margin-top: 0.5rem;
}

.done-note-ok {
    color: var(--cyan-300);
}

.done-steps {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
    text-align: left;
    width: 100%;
}

.done-steps li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--muted);
}

.step-num {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--red-500);
    border-radius: 50%;
    color: var(--red-500);
    font-size: 0.75rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.page-footer {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 1rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

/* Wortmarke in der Fusszeile - nur auf der Landingpage, wo oben bewusst
   kein Logo steht. Die anderen Seiten tragen sie in der Kopfzeile. */
.footer-logo {
    display: block;
    height: 1.75rem;
    width: auto;
    margin-bottom: 0.625rem;
}

.powered {
    margin: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

.powered strong {
    color: var(--muted);
}

.legal-links {
    display: flex;
    gap: 1.25rem;
}

.legal-links a {
    font-size: 0.75rem;
    color: var(--muted-dim);
    text-decoration: none;
}

.legal-links a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* Störungsseite: eigene Klassen statt style-Attributen, damit sie auch
   unter der strengen Content-Security-Policy formatiert erscheint. */
.page-error .shell {
    justify-content: center;
    min-height: 100svh;
}

.error-detail {
    margin: 1.5rem 0 0;
    padding: 0.75rem;
    border: 1px solid var(--red-500);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.8125rem;
    text-align: left;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Auswertung (admin.php)
   -------------------------------------------------------------------------- */

.page-admin .starfield,
.page-admin .grid-lines,
.page-admin .beam {
    display: none;
}

.page-admin {
    background: var(--space-900);
}

.admin-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.admin-actions {
    display: flex;
    gap: 0.5rem;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.stat {
    padding: 1rem;
    background: var(--space-800);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.dist-title {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
}

.dist-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted-dim);
}

.dist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.375rem;
}

.dist li {
    display: grid;
    grid-template-columns: minmax(7rem, 14rem) 1fr 2.5rem;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.dist-label {
    color: var(--muted);
}

.dist-track {
    height: 0.5rem;
    background: rgba(71, 154, 209, 0.14);
    border-radius: 4px;
    overflow: hidden;
}

.dist-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--nebula-500), var(--cyan-400));
    border-radius: 4px;
}

.dist-n {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--white);
}

/* Betriebsstatus: vier Einstellungen, die nur der Server beantworten kann. */
.admin-status {
    margin: 0 0 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
}

.status-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--white);
}

.status-table {
    width: 100%;
    border-collapse: collapse;
}

.status-table td {
    padding: 0.55rem 0;
    border-top: 1px solid var(--line);
    vertical-align: top;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted);
}

.status-table tr:first-child td {
    border-top: 0;
}

.status-mark {
    width: 1.6rem;
    padding-right: 0.5rem !important;
    font-weight: 700;
}

.status-ok {
    color: var(--cyan-400);
}

.status-warn {
    color: var(--red-500);
}

.status-ist {
    color: var(--white);
}

.status-hint {
    font-size: 0.8rem;
    color: var(--muted-dim);
}

/* Merksatz zur Einwilligung ueber der Anmeldeliste. */
.admin-note {
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--red-500);
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--muted);
}

.admin-note strong {
    color: var(--white);
}

.admin-foot {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-dim);
    text-align: center;
}

.admin-foot a {
    color: var(--muted);
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.data-table th,
.data-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.data-table th {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.data-table .nowrap {
    white-space: nowrap;
}

/* Löschen: zurückhaltend, bis man darauf zielt - die Aktion ist endgültig */
.btn-delete {
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted-dim);
    font-family: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.btn-delete:hover,
.btn-delete:focus-visible {
    background: rgba(229, 58, 70, 0.12);
    border-color: var(--red-500);
    color: var(--red-500);
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.alert-ok {
    background: rgba(71, 154, 209, 0.12);
    border-color: rgba(71, 154, 209, 0.5);
}

.tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.tag-ok {
    background: rgba(71, 154, 209, 0.18);
    color: var(--cyan-300);
}

.tag-wait {
    background: rgba(229, 58, 70, 0.16);
    color: var(--red-500);
}

.tag-off {
    background: rgba(154, 154, 166, 0.18);
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Größere Viewports - das Mobile-Layout bleibt die Basis
   -------------------------------------------------------------------------- */

/* --- Tablet: mehr Breite, zweispaltige Nutzenliste ---------------------- */

@media (min-width: 48rem) {
    :root {
        --shell-max: 36rem;
    }

    .shell {
        padding: calc(env(safe-area-inset-top, 0px) + 3rem) 2rem 3rem;
        gap: 2.25rem;
    }

    .hero-title {
        font-size: 6rem;
    }

    .hero-claim {
        font-size: 1rem;
    }

    .hero-pills {
        font-size: 0.8125rem;
    }

    .card {
        padding: 2.25rem 2rem;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .question-title {
        font-size: 1.75rem;
    }

    .other-field {
        padding-left: 2.125rem;
    }

    /* Antwortoptionen nebeneinander, sobald zwei Spalten sinnvoll passen */
    .options {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: 0.75rem;
    }

    .usp-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1.5rem;
    }

    .actions {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }

    .actions .btn {
        width: auto;
        min-width: 11rem;
    }

    .btn-primary {
        width: auto;
        align-self: flex-start;
        min-width: 14rem;
    }

    .form-note {
        text-align: left;
    }

    .stat-row {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* --- Desktop: Landingpage zweispaltig, Formular neben der Headline ------- */

@media (min-width: 64rem) {
    :root {
        /* Breit genug für zwei Antwortspalten samt Kartenpolster */
        --shell-max: 42rem;
    }

    .page-landing .shell {
        max-width: 72rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 2rem 4.5rem;
        /* Knapp gehalten, damit Nutzenliste und Fusszeile auf einem
           Notebook mit 1200 Pixeln Hoehe vollstaendig sichtbar bleiben. */
        padding-top: calc(env(safe-area-inset-top, 0px) + 2.5rem);
        padding-bottom: 1.5rem;
    }

    /* Die Headline steht links, das Formular rechts - der rote Lichtstrahl
       aus dem Hintergrund läuft genau dazwischen durch. */
    .page-landing .hero {
        align-items: flex-start;
        text-align: left;
        padding-top: 0;
    }

    .page-landing .hero-title {
        font-size: clamp(5.5rem, 8vw, 7.5rem);
    }

    /* Headline links, Karte rechts, Nutzenliste über beide Spalten.
       Die Marke steht in der Fusszeile: oben soll die Headline allein wirken,
       und mitten in der linken Spalte wirkte sie wie ein Nachgedanke. */
    .page-landing .hero {
        grid-column: 1;
    }

    .page-landing #signup {
        grid-column: 2;
    }

    .page-landing .usp {
        grid-column: 1 / -1;
    }

    /* Nebeneinander trennen schon die Spalten - die Zäsur wäre doppelt. */
    .page-landing .section-break {
        display: none;
    }

    /* Ab hier zweispaltig: der Strahl trifft die Lücke zwischen den Spalten -
       die einzige Stelle, an der er nichts überdeckt. */
    .page-landing .beam {
        display: block;
    }

    .card-title-lead {
        font-size: 2rem;
    }

    .page-landing .usp {
        padding-top: 0.75rem;
        border-top: 1px solid var(--line);
    }

    .usp-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .usp-title {
        text-align: left;
    }

    /* Umfrage und Abschluss bleiben eine zentrierte Spalte, nur größer */
    .page-survey .shell,
    .page-done .shell,
    .page-confirm .shell {
        justify-content: center;
        min-height: calc(100svh - 8rem);
    }

    .question-title {
        font-size: 1.875rem;
    }

    .done-title {
        font-size: 2.75rem;
    }

    .shell-wide {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* --- Große Bildschirme: nur noch Typografie, keine neue Breite ---------- */

@media (min-width: 90rem) {
    .page-landing .shell {
        max-width: 78rem;
        gap: 3.5rem 6rem;
    }

    .hero-claim {
        font-size: 1.125rem;
        letter-spacing: 0.2em;
    }
}

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