/*
 * LAB36 Pulse - Basis-Stylesheet (docs/07-design-ux.md).
 *
 * Vanilla CSS mit Custom Properties, semantische Klassennamen, kein
 * Utility-Framework, kein Build-Step. Mobile First, Basisbreite 320 px.
 *
 * Bewusst NICHT: lila/indigo, Gradient-Buttons, Karten-Raster mit grossen
 * Drop-Shadows, Tailwind-Graustufen. Kein generischer KI-Look.
 */

/* === Schriften (lokal, docs/12 §3.9 - kein Google-CDN) ==================== */

/* Baloo 2 und Karla als Variable Fonts (SIL Open Font License). */
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/baloo2-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/karla-var.woff2') format('woff2');
}

/* === Tokens ================================================================ */

:root {
    /* Farbwelt aus dem Kunden-Prototyp (docs/12 §3.9). */
    --color-bg: #0f3324;          /* Dunkelgruen, Grundflaeche */
    --color-surface: #143e2c;
    --color-text: #f4f7f2;        /* Paper */
    --color-muted: rgba(244, 247, 242, 0.6);
    --color-accent: #c6f135;      /* Lime, primaere Aktionen (dunkler Text!) */
    --color-highlight: #ff7a3d;   /* Orange, Zweitakzent */
    --color-error: #ff8a70;

    --color-line: rgba(244, 247, 242, 0.18);

    --font-sans: 'Karla', system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-display: 'Baloo 2', var(--font-sans);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius: 14px;
    --measure: 34rem;        /* Lesebreite */
    --content-max: 60rem;

    --transition: 160ms ease-out;
}

/* === Reset (minimal) ======================================================= */

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

html {
    /* Kein Zoom-Sprung beim Drehen auf iOS. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
    font-family: var(--font-display);
    font-weight: 800;
}

p {
    margin: 0;
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
}

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

/* === Skip-Link ============================================================= */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background: var(--color-highlight);
    color: var(--color-bg);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    top: var(--space-2);
}

/* === Header ================================================================ */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Auf sehr schmalen Screens darf die Nav-Gruppe umbrechen, statt dass
       Marke und Einladen-Pille sich gegenseitig zerquetschen. */
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);

    padding: var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

/* Der Punkt vor dem Namen: ein Knoten im Netz, der leise pulsiert. */
.site-header__mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0 rgb(198 241 53 / 45%);
    animation: node-pulse 3.2s ease-out infinite;
}

.site-header__name {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@keyframes node-pulse {
    0%   { box-shadow: 0 0 0 0 rgb(198 241 53 / 45%); }
    70%  { box-shadow: 0 0 0 9px rgb(198 241 53 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(198 241 53 / 0%); }
}

/* Rechte Seite der Kopfzeile: Einladen-Link + Sprachumschalter. */
.site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Einladen jederzeit erreichbar (nur angemeldet sichtbar), als dezente Pille. */
.site-header__invite {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition);
}

.site-header__invite:hover {
    border-color: var(--color-accent);
    color: var(--color-highlight);
}

/* === Sprachumschalter ====================================================== */

.lang-switch {
    display: flex;
    gap: var(--space-1);
}

.lang-switch__item {
    /* 44 px Touch-Ziel (docs/07). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;

    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--color-muted);

    transition: color var(--transition);
}

.lang-switch__item:hover {
    color: var(--color-text);
}

.lang-switch__item.is-active {
    color: var(--color-accent);
}

/* === Layout ================================================================ */

.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--space-16);
}

.site-footer {
    padding: var(--space-6) var(--space-4);
    border-top: 1px solid var(--color-line);
}

.site-footer__text {
    max-width: var(--content-max);
    margin: 0 auto;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

/* KI-Uebersetzungs-Hinweis (nur bei Sprache FR eingeblendet). */
.site-footer__note {
    margin-top: var(--space-2);
    font-size: 0.75rem;
}

/* === Buttons =============================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* Mindestens 44 px hoch (docs/07). */
    min-height: 48px;
    padding: var(--space-3) var(--space-6);

    border: 2px solid transparent;
    /* Pillen-Form wie im Kunden-Prototyp (docs/12 §3.9). */
    border-radius: 999px;

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;

    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition),
                filter var(--transition);
}

.button__arrow {
    transition: transform var(--transition);
}

.button:hover .button__arrow {
    transform: translateX(3px);
}

.button--ghost:hover .button__arrow {
    transform: translateX(-3px);
}

.button--primary {
    background: var(--color-accent);
    /* Lime braucht dunklen Text (Kontrast). */
    color: var(--color-bg);
    border-color: var(--color-accent);
}

.button--primary:hover {
    filter: brightness(1.08);
}

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

.button--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-line);
}

.button--ghost:hover {
    border-color: var(--color-muted);
}

/* === Auth-Seiten (Startseite = Anmeldung, Code-Eingabe) ==================== */

.auth {
    max-width: 26rem;
    margin: 0 auto;
    padding-block: var(--space-8) var(--space-12);
}

.auth__headline {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.auth__lead {
    color: var(--color-muted);
    font-size: 1rem;
    margin-bottom: var(--space-8);
}

.auth__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* === Formulare ============================================================= */

.form {
    display: grid;
    gap: var(--space-6);
}

.field {
    display: grid;
    gap: var(--space-2);
}

.field__label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.field__label--sub {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted);
}

.field__input {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);

    background: var(--color-surface);
    color: var(--color-text);
    border: 2px solid var(--color-line);
    border-radius: var(--radius);

    font-family: inherit;
    font-size: 1rem;

    transition: border-color var(--transition);
}

/* 16px verhindert den Auto-Zoom von iOS Safari beim Fokus. */
.field__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.field__input::placeholder {
    color: rgba(244, 247, 242, 0.4);
}

.field__input--error {
    border-color: var(--color-error);
}

/* Code-Eingabe: gross, gesperrt, mittig - der Code ist der Held des Screens. */
.field__input--code {
    font-size: 1.75rem;
    letter-spacing: 0.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-inline: var(--space-2);
}

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

.field__error {
    font-size: 0.8125rem;
    color: var(--color-error);
    font-weight: 600;
}

.fieldset {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: 0;
}

.form__hint {
    font-size: 0.8125rem;
    color: var(--color-muted);
    text-align: center;
}

/* Auswahl (Sprache, Kanal) */
.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.choice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    cursor: pointer;
}

.choice--block {
    display: flex;
    min-height: 48px;
}

.choice input {
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
}

.choice__label {
    font-size: 0.9375rem;
}

.button--block {
    width: 100%;
}

/* Textlinks, die wie Buttons funktionieren (Resend, Adresse wechseln). */
.link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;

    background: none;
    border: none;
    cursor: pointer;

    color: var(--color-highlight);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-button:hover {
    color: var(--color-text);
}

/* === Startscreen (angemeldet) ============================================= */

.startscreen {
    max-width: 30rem;
    margin: 0 auto;
    padding-block: var(--space-8) var(--space-12);
    text-align: center;
}

.startscreen__count {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: var(--space-6) 0 var(--space-8);
}

.startscreen__count--none {
    color: var(--color-muted);
    font-weight: 700;
}

.startscreen__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ghost-Buttons statt Textlinks: etwas mehr Luft dazwischen. */
    gap: var(--space-3);
    margin-top: var(--space-12);
}

.startscreen__logout { margin: 0; }

/* === Erfolgsmeldung (Einladung verschickt) ================================ */

.profile__ok {
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: rgba(198, 241, 53, 0.12);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
    color: var(--color-highlight);
    font-weight: 600;
}

/* === PWA-Installationshinweis ============================================= */

.install-banner {
    position: fixed;
    left: 50%;
    bottom: var(--space-4);
    transform: translateX(-50%);
    z-index: 20;
    width: calc(100% - var(--space-8));
    max-width: 30rem;

    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);

    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgb(0 0 0 / 45%);
}

.install-banner[hidden] { display: none; }

.install-banner__text { flex: 1; font-size: 0.875rem; }
.install-banner__text strong { color: var(--color-highlight); }

.install-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.install-banner__close {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1.25rem;
    line-height: 1;
    padding: var(--space-2);
    cursor: pointer;
}

.install-banner__close:hover { color: var(--color-text); }

.button--sm {
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    font-size: 0.9rem;
}

/* === Frage-Screen ========================================================= */

.qscreen {
    max-width: 34rem;
    margin: 0 auto;
    padding-block: var(--space-6) var(--space-12);
}

.qscreen__progress {
    height: 4px;
    background: var(--color-surface);
    border-radius: 999px;
    overflow: hidden;
}

.qscreen__progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-highlight);
    transition: width var(--transition);
}

/* Fuellstand in 10-Prozent-Stufen als Klasse (CSP verbietet Inline-Styles). */
.qscreen__progress-bar--w0  { width: 0; }
.qscreen__progress-bar--w1  { width: 10%; }
.qscreen__progress-bar--w2  { width: 20%; }
.qscreen__progress-bar--w3  { width: 30%; }
.qscreen__progress-bar--w4  { width: 40%; }
.qscreen__progress-bar--w5  { width: 50%; }
.qscreen__progress-bar--w6  { width: 60%; }
.qscreen__progress-bar--w7  { width: 70%; }
.qscreen__progress-bar--w8  { width: 80%; }
.qscreen__progress-bar--w9  { width: 90%; }
.qscreen__progress-bar--w10 { width: 100%; }

.qscreen__step {
    margin: var(--space-3) 0 var(--space-6);
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.qscreen__question {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.qscreen__help {
    color: var(--color-muted);
    margin-bottom: var(--space-6);
}

.qscreen__error {
    color: var(--color-error);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.qscreen__form { margin-top: var(--space-6); }

/* Hoehe kommt aus dem rows-Attribut der jeweiligen Verwendung; ein pauschales
   min-height wuerde rows aushebeln. Untergrenze bleibt .field__input (48px). */
.qscreen__textarea { resize: vertical; }

/* Optionales Bemerkungsfeld (pro Frage vom Admin freigeschaltet). */
.qscreen__remark { margin-top: var(--space-6); }

.qscreen__remark-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.qscreen__remark .qscreen__textarea { min-height: 4.5rem; }

.qscreen__actions { margin-top: var(--space-8); }

.qscreen__skip {
    margin-top: var(--space-4);
    text-align: center;
}

/* === Design-Gewaender pro Frage ===========================================
   Jede Frage darf ueber design_template ein Theme tragen (Questions::
   DESIGN_TEMPLATES). Die Themes ueberschreiben die Farb-Custom-Properties auf
   dem .qscreen-Container; die bestehenden .qscreen*/.qchoice*/.qscale*-Regeln
   erben sie. 'default' bleibt ohne Sonderregel. CSP-konform: nur Klassen. */

/* nurana: Teal/Petrol-Welt von nurana.ch (Primary #0597a7, Aqua #5ec0c4). */
.qscreen--nurana {
    --color-accent: #0597a7;
    --color-highlight: #5ec0c4;
    --color-surface: #0e1a1d;
    --color-line: #1c3a40;
    padding-inline: var(--space-4);
    border-radius: calc(var(--radius) * 3);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(5, 151, 167, 0.20), transparent 60%),
        var(--color-bg);
}

.qscreen--nurana .qscreen__question { color: #d3f0f2; }
.qscreen--nurana .qchoice:has(input:checked) { background: #0c2429; }
.qscreen--nurana .qscale__step:has(input:checked) .qscale__num { color: #04222a; }

/* neon: energiegeladen, warmer Orange-Schimmer (LAB36 Orange). */
.qscreen--neon {
    --color-surface: #1c130d;
    --color-line: #3a2417;
    padding-inline: var(--space-4);
    border-radius: calc(var(--radius) * 3);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 102, 51, 0.18), transparent 60%),
        var(--color-bg);
}

.qscreen--neon .qscreen__question {
    color: #ffd9c9;
    text-shadow: 0 0 24px rgba(255, 102, 51, 0.35);
}

/* calm: ruhig, Lime als Akzent statt Orange (LAB36 Lime). */
.qscreen--calm {
    --color-accent: #cef17b;
    --color-surface: #14160f;
    --color-line: #2b3220;
    padding-inline: var(--space-4);
    border-radius: calc(var(--radius) * 3);
    background:
        linear-gradient(180deg, rgba(206, 241, 123, 0.08), transparent 40%),
        var(--color-bg);
}

.qscreen--calm .qchoice:has(input:checked) { background: #1c220f; }
.qscreen--calm .qscale__step:has(input:checked) .qscale__num { color: #16200a; }

/* focus: reduziert, ohne Fortschrittsanzeige, zentriert - eine Frage im Raum. */
.qscreen--focus {
    --color-surface: #17171c;
    --color-line: #33333d;
    max-width: 28rem;
}

.qscreen--focus .qscreen__progress,
.qscreen--focus .qscreen__step { display: none; }

.qscreen--focus .qscreen__question {
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    text-align: center;
}

.qscreen--focus .qscreen__help { text-align: center; }

/* Auswahl (radio/checkbox) als grosse Touch-Ziele */
/* Antwort-Optionen als Pills (radio) bzw. Chips (checkbox), wie im
   Kunden-Prototyp (docs/12 §3.9). Der native Input bleibt fuer Screenreader
   und Formular-Submit im DOM, ist aber unsichtbar; der Zustand haengt am
   Label (:has). */
.qchoices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.qchoice {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 2px solid var(--color-line);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    transition: border-color var(--transition), background-color var(--transition),
                color var(--transition);
}

.qchoice:hover { border-color: var(--color-accent); }

.qchoice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Ausgewaehlt hervorheben: hat der enthaltene Input :checked */
.qchoice:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-bg);
}

.qchoice:has(input:focus-visible) {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
}

.qchoice__label { font-size: 0.9375rem; }

/* Chips (Mehrfachauswahl): eckiger, gefuellt statt invertiert. */
[data-qtype="checkbox"] .qchoice {
    border-radius: var(--radius);
    background: rgba(244, 247, 242, 0.04);
    font-weight: 500;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
}

[data-qtype="checkbox"] .qchoice:has(input:checked) {
    background: rgba(198, 241, 53, 0.16);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 700;
}

/* Skala */
.qscale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.qscale__step { cursor: pointer; }

.qscale__step input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}

.qscale__num {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-2);
    background: var(--color-surface);
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.qscale__step:has(input:checked) .qscale__num {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #1a0a03;
}

.qscale__step input:focus-visible + .qscale__num {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
}

.qscale__labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: 0.8125rem;
}

/* Skala als Schieberegler (Alternative zu den Kacheln, bei grossen Bereichen). */
.qslider { margin-top: var(--space-8); }

.qslider__value {
    display: block;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-4);
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}

.qslider__input {
    width: 100%;
    height: 1.75rem;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.qslider__input:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 4px;
}

.qslider .qscale__labels { margin-top: var(--space-3); }

.qslider__head {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.qslider__head .qslider__value { margin-bottom: 0; }

.qslider__unit {
    color: var(--color-muted);
    font-weight: 600;
    font-size: 1.125rem;
}

/* Doppel-Slider (range, docs/12): Von-Bis-Spanne mit zwei Reglern. */
.qrange { margin-top: var(--space-8); }

.qrange__value {
    display: block;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}

/* Eine Linie mit zwei Griffen (Kunden-Prototyp): beide Range-Inputs liegen
   absolut uebereinander; der Input selbst ist fuer Zeiger unsichtbar
   (pointer-events: none), nur die Griffe fangen Eingaben. Die Fuellung
   zwischen den Griffen setzt range-slider.js per element.style (CSSOM,
   faellt nicht unter die CSP-Sperre fuer Inline-Styles). */
.qrange__track {
    position: relative;
    height: 34px;
    display: flex;
    align-items: center;
}

.qrange__base,
.qrange__fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 999px;
}

.qrange__base {
    left: 0;
    right: 0;
    background: rgba(244, 247, 242, 0.16);
}

.qrange__fill {
    background: linear-gradient(90deg, var(--color-accent), var(--color-highlight));
}

.qrange__input {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.qrange__input::-webkit-slider-runnable-track { background: transparent; }

.qrange__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-text);
    border: 3px solid var(--color-surface);
    cursor: pointer;
    margin-top: 0;
}

.qrange__input::-moz-range-track { background: transparent; }

.qrange__input::-moz-range-thumb {
    pointer-events: all;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-text);
    border: 3px solid var(--color-surface);
    cursor: pointer;
}

.qrange__input:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 6px;
}

.qrange .qscale__labels { margin-top: var(--space-3); }

/* Freitextfeld einer "Sonstiges"-Option (docs/12). */
.qscreen__other { margin-top: var(--space-3); }

/* === Fragebogen-Seite (docs/12 §3): mehrere Fragen pro Screen ============= */
.qpage { max-width: 46rem; }

/* Vorschau-Frame im Admin: das User-Rendering ohne App-Huelle braucht
   eigenen Seitenabstand (sonst uebernimmt das die site-main-Huelle). */
.qframe { padding-inline: var(--space-4); }

/* Kontext-Badge ueber der Frage ("Zu: Inhalt"): gefuellt statt nur umrandet,
   damit der Bezug beim Ueberfliegen sofort auffaellt. Akzent traegt dunklen
   Text wie .button--primary (Kontrast). */
.qpage__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-bg);
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    margin-bottom: var(--space-4);
}

.qpage__intro { max-width: 36rem; }

/* Kontext-Badge in der Ueberpruefungs-Liste: kompakter als auf der Seite,
   steht in der Zeile vor dem Seitentitel. */
.qreview__tag {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    background: transparent;
    border-color: var(--color-line, rgba(255, 255, 255, 0.25));
    padding: 0.15rem 0.6rem;
    margin: 0 0.375rem 0 0;
    vertical-align: 0.1em;
}

/* Zwischentitel pro Thema auf der Vertiefungs-Seite: trennt die Frage-Bloecke
   der einzelnen angeklickten Themen sichtbar voneinander. */
.qtheme {
    margin: var(--space-12) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--color-accent);
}

/* Der erste Titel steht direkt unter dem Seiten-Intro und braucht den grossen
   Vorlauf nicht. */
.qtheme:first-of-type { margin-top: var(--space-6); }

.qblock { margin: var(--space-6) 0; }

.qblock__label {
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.35;
    margin: 0 0 var(--space-3);
}

/* Inline-Sub-Fragen einer Weiche (docs/12 §3.2): eingerueckt, mit Akzent. */
.qbranch {
    margin: var(--space-3) 0 var(--space-3) 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    border-left: 3px solid var(--color-accent);
}

.qbranch .qblock { margin: var(--space-3) 0; }

.qbranch .qblock__label { font-size: 0.9375rem; }

/* Segment-Fortschrittsleiste: ein Segment pro Seite plus Ueberpruefung. */
.qsegbar {
    display: flex;
    gap: 5px;
    margin-bottom: var(--space-3);
}

.qseg {
    height: 5px;
    flex: 1;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(244, 247, 242, 0.14);
}

.qseg--done {
    background: var(--color-accent);
    cursor: pointer;
}

.qseg--current { background: var(--color-text); }

/* Fusszeile der Seite: Zurueck links, Weiter rechts. */
.qpage__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

/* Steht nur ein Knopf in der Fusszeile (Abschluss-Screen), gehoert er in die
   Mitte - space-between haette nichts, wogegen es ihn schieben koennte. */
.qpage__footer--single { justify-content: center; }

/* Ueberpruefungs-Seite (docs/12 §3.7). */
.qreview { margin-top: var(--space-4); }

.qreview__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-line, rgba(255, 255, 255, 0.18));
}

.qreview__row:last-child { border-bottom: none; }

.qreview__text { flex: 1; }

.qreview__status {
    color: var(--color-muted);
    font-size: 0.875rem;
    margin-left: var(--space-2);
}

.qreview__status--open { color: var(--color-highlight, #ff7a3d); }

/* Abschluss-Screen: Haken im Verlauf (docs/12, Prototyp). */
.done__mark {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--space-4);
    background: linear-gradient(135deg, var(--color-accent), var(--color-highlight, #ff7a3d));
    color: var(--color-bg, #000);
}

/* === Matrix (2D-Quadrant, Eisenhower-Stil) ================================
   Der User tippt in das Feld und setzt einen Punkt. Die Skala bleibt
   unsichtbar; sichtbar sind nur die vier Ecken und optionale Achsen-Titel.
   Der Marker wird per JS ueber element.style positioniert (CSP-konform). */
.qmatrix { margin-top: var(--space-4); }

.qmatrix__hint {
    color: var(--color-muted);
    font-size: 0.8125rem;
    margin-bottom: var(--space-3);
}

.qmatrix__plot {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    background: var(--color-surface);
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
    cursor: crosshair;
    touch-action: none; /* Pointer nicht als Scroll werten (Mobile). */
    overflow: hidden;
}

.qmatrix__plot:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
}

/* Mittelkreuz */
.qmatrix__plot::before,
.qmatrix__plot::after {
    content: "";
    position: absolute;
    background: var(--color-line);
}
.qmatrix__plot::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.qmatrix__plot::after  { top: 50%; left: 0; right: 0; height: 1px; }

.qmatrix__corner {
    position: absolute;
    max-width: 45%;
    padding: var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-muted);
    pointer-events: none;
}
.qmatrix__corner--tl { top: 0; left: 0; text-align: left; }
.qmatrix__corner--tr { top: 0; right: 0; text-align: right; }
.qmatrix__corner--bl { bottom: 0; left: 0; text-align: left; }
.qmatrix__corner--br { bottom: 0; right: 0; text-align: right; }

.qmatrix__marker {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px; /* auf left/top zentrieren */
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-accent);
    pointer-events: none;
}

.qmatrix__axis {
    display: block;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.qmatrix__axis--y { margin-bottom: var(--space-2); }
.qmatrix__axis--x { margin-top: var(--space-2); }

/* === Medien-Eingabe (Foto/Audio) ========================================== */

.qmedia {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    background: var(--color-surface);
    border: 2px dashed var(--color-line);
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
}

.qmedia:hover { border-color: var(--color-muted); }

/* Der native File-Input: nur so breit wie sein Inhalt, zentriert im Kasten.
   Der Text daneben ist der gewaehlte Dateiname (native Rueckmeldung). */
.qmedia__file {
    align-self: center;
    max-width: 100%;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* Den "Datei auswaehlen"-Button an das Ghost-Button-Design angleichen.
   ::file-selector-button (mit -webkit-Fallback fuer aeltere iOS-Safari). */
.qmedia__file::-webkit-file-upload-button,
.qmedia__file::file-selector-button {
    margin-right: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.qmedia__file::-webkit-file-upload-button:hover,
.qmedia__file::file-selector-button:hover {
    border-color: var(--color-muted);
}

.qmedia__hint { color: var(--color-muted); font-size: 0.875rem; }

.qaudio {
    display: grid;
    gap: var(--space-4);
}

.qaudio__rec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.qaudio__time {
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-highlight);
}

.qaudio__preview { width: 100%; margin-top: var(--space-2); }
.qaudio__note { color: var(--color-muted); font-size: 0.8125rem; }

/* Aufnahme-/Stopp-Button mit typischen Symbolen (roter Kreis / rotes Quadrat). */
.qaudio__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.qaudio__btn-icon {
    width: 15px;
    height: 15px;
    flex: none;
    background: var(--color-error);
}

/* Ruhe: Aufnahme-Symbol (Kreis) sichtbar, Stopp-Symbol aus. */
.qaudio__btn-icon--record { border-radius: 50%; }
.qaudio__btn-icon--stop { border-radius: 2px; display: none; }

/* Aufnahme laeuft: Stopp-Symbol (Quadrat) sichtbar, Button rot, Puls. */
.qaudio__btn.is-recording { border-color: var(--color-error); color: var(--color-error); }
.qaudio__btn.is-recording .qaudio__btn-icon--record { display: none; }
.qaudio__btn.is-recording .qaudio__btn-icon--stop { display: inline-block; animation: qaudio-pulse 1.2s ease-in-out infinite; }

@keyframes qaudio-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* === Abschluss-Screen (docs/12 §3.7) ===================================== */

.done {
    max-width: 30rem;
    margin: 0 auto;
    padding-block: var(--space-8) var(--space-12);
}

/* === Hinweis-Seiten (404, Platzhalter) ===================================== */

.notice {
    padding-block: var(--space-8) var(--space-12);
}

.notice__code {
    color: var(--color-accent);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-4);
}

.notice__headline {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.notice__text {
    max-width: var(--measure);
    margin-bottom: var(--space-8);
    color: var(--color-muted);
}

/* === Ab Tablet ============================================================= */

@media (min-width: 48rem) {
    .site-header,
    .site-main,
    .site-footer__text {
        padding-inline: var(--space-8);
    }

    .site-main {
        padding-block: var(--space-12) var(--space-16);
    }
}

/* === Reduzierte Bewegung =================================================== */

/*
 * Animationen auf Fades reduzieren (docs/07). Nicht komplett abschalten:
 * Ein Zustandswechsel ohne jede Rueckmeldung ist auch nicht barrierefrei.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .button:hover .button__arrow,
    .button--ghost:hover .button__arrow {
        transform: none;
    }
}