/* Struktano-Selbsttest — Fassung „dunkel" nach der Design-Übergabe vom 14.08.2026.
   Tokens: Design-System Kontor 26, übernommen aus struktano-website.
   Schriften lokal (css/fonts.css), keine externen Hosts. */

/* ---------- Tokens ---------- */

:root{
--lime-500:#CCFF00;--lime-600:#B8E600;--lime-700:#8FB400;--lime-100:#EDFFA8;
--violet-900:#241063;--violet-800:#3B14A8;--violet-700:#5A19E6;--violet-200:#C9BCF2;
--paper-0:#FBFAF6;--paper-50:#F5F3ED;--paper-100:#EAE7DC;--paper-200:#DAD6C9;
--ink-900:#12110D;--ink-700:#3A382F;--ink-500:#57544A;--ink-300:#8C887A;

--signal:var(--lime-500);--signal-shade:var(--lime-700);--signal-ink:var(--ink-900);
--deep:var(--violet-800);--deep-shade:var(--violet-900);--deep-ink:var(--paper-50);--deep-muted:var(--violet-200);
--surface-paper:var(--paper-50);--surface-paper-raised:var(--paper-0);--surface-deep:var(--deep);

--font-display:"Archivo Black","Archivo",system-ui,sans-serif;
--font-text:"Public Sans",system-ui,sans-serif;

--text-2xs:0.875rem;--text-xs:1rem;--text-sm:1.125rem;--text-base:1.1875rem;--text-lead:1.375rem;
--lh-display:1.05;--lh-heading:1.12;--lh-body:1.55;--lh-lead:1.42;
--track-kicker:0.16em;--track-display:-0.02em;
--weight-regular:400;--weight-medium:500;--weight-bold:700;

--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;

--measure:34ch;--measure-lead:42ch;

--border-hair:1px;--border-solid:2px;--border-heavy:3px;
--radius-0:0px;
--frame-band:14px;
--slant-height:clamp(56px,9vw,131px);

/* Überschriften-Abweichungen der Übergabe (wegen 380px) */
--titel-gross:clamp(2rem,8.5vw,3.75rem);
--titel-frage:clamp(1.625rem,5vw,2.5rem);
--titel-feld:clamp(1.25rem,4.2vw,1.625rem);
--titel-spiegel:clamp(1.375rem,4.6vw,1.75rem);
}

/* ---------- Grund ---------- */

*,*::before,*::after{box-sizing:border-box;transition:none}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-deep);color:var(--paper-50);font-family:var(--font-text);font-size:var(--text-base);line-height:var(--lh-body);font-weight:var(--weight-regular);text-wrap:pretty;-webkit-font-smoothing:antialiased}
p{margin:0}
a{color:var(--signal);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
a:hover{color:var(--paper-50);text-decoration-thickness:6px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--border-heavy) solid var(--paper-50);outline-offset:3px}
.hell a:focus-visible,.hell button:focus-visible{outline-color:var(--ink-900)}
::selection{background:var(--signal);color:var(--signal-ink)}
button{font:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:var(--ink-300)}

/* ---------- Seitengerüst ---------- */

.rahmen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--surface-deep)}
.band{height:var(--frame-band);background:var(--signal);flex:0 0 auto}
.inhalt{flex:1 1 auto;display:flex;flex-direction:column}
.spalte{display:flex;flex-direction:column;gap:var(--space-6);width:100%;max-width:640px;padding:var(--space-5) clamp(18px,5vw,112px) var(--space-8)}
.spalte--kopfteil{padding-bottom:var(--space-6);flex:0 0 auto}

.kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.kopf .wortmarke{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--paper-50)}
.kopf .beiwort{font-family:var(--font-text);font-size:var(--text-2xs);font-weight:var(--weight-bold);letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--deep-muted)}

/* ---------- Fortschrittsanzeige ---------- */

.fortschritt{display:flex;justify-content:space-between;gap:8px}
.fortschritt .station{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.fortschritt .name{font-size:var(--text-2xs);font-weight:var(--weight-bold);line-height:1.2;white-space:nowrap;color:var(--deep-muted)}
.fortschritt .station.laeuft .name{color:var(--signal)}
.fortschritt .station.erledigt .name{color:var(--paper-50)}
.fortschritt .zellen{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.fortschritt .zelle{height:6px;background:var(--violet-700)}
.fortschritt .zelle.voll{background:var(--signal)}

/* ---------- Text ---------- */

.titel{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--titel-gross);line-height:var(--lh-display);letter-spacing:var(--track-display);color:var(--paper-50);text-wrap:pretty}
.titel--frage{font-size:var(--titel-frage);line-height:var(--lh-heading)}
.untertitel{font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--paper-100)}
.absatz{font-size:var(--text-base);line-height:var(--lh-body);color:var(--paper-50);max-width:var(--measure-lead);text-wrap:pretty}
.hilfetext{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--paper-100);max-width:var(--measure-lead);text-wrap:pretty}
.frageblock{display:flex;flex-direction:column;gap:var(--space-5)}
.gruppe{display:flex;flex-direction:column;gap:var(--space-4)}
.gruppe--eng{gap:var(--space-3)}

.kickerzeile{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.kickerzeile .strich{width:28px;height:3px;background:var(--signal);flex:0 0 auto}
.kickerzeile .wort{font-family:var(--font-text);font-size:var(--text-2xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--track-kicker);line-height:1.2;color:var(--signal)}
.hell .kickerzeile .wort{color:var(--ink-500)}

.warum{margin:0;border-top:var(--border-hair) solid var(--violet-700);padding-top:var(--space-4);font-size:var(--text-sm);line-height:var(--lh-body);color:var(--paper-100);max-width:var(--measure-lead);text-wrap:pretty}
.warum b{color:var(--paper-50);font-weight:var(--weight-bold)}

/* ---------- Kasten und KI-Marke ---------- */

.kasten{background:var(--violet-900);border:var(--border-hair) solid var(--violet-700);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--measure-lead)}
.kasten--beispiel{padding:var(--space-4) var(--space-5)}
.kasten .kastentext{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--paper-100);text-wrap:pretty}
.kasten .beispieltext{font-size:var(--text-sm);line-height:var(--lh-lead);color:var(--paper-50);text-wrap:pretty}
.kasten .beispieltext .vorwort{font-size:var(--text-2xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--track-kicker)}

.marke{display:flex;flex-direction:column;gap:var(--space-2)}
.marke .strich{width:28px;height:3px;background:var(--signal);display:block}
.marke .satz{font-size:var(--text-2xs);line-height:1.5;color:var(--paper-100)}

/* ---------- Antwortflächen ---------- */

.kacheln{display:flex;flex-direction:column;gap:var(--space-4)}
.kacheln--flach{gap:10px}
.kachel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-items:center;width:100%;min-height:88px;text-align:left;background:var(--violet-900);color:var(--paper-50);border:var(--border-solid) solid var(--paper-50);border-radius:var(--radius-0);padding:var(--space-5);cursor:pointer;box-shadow:5px 5px 0 var(--signal);transform:translate(0,0);font-family:var(--font-text);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:var(--lh-lead)}
.kachel:hover{box-shadow:3px 3px 0 var(--signal);transform:translate(2px,2px)}
.kachel:active{box-shadow:0 0 0 var(--signal);transform:translate(5px,5px)}
.kachel.gewaehlt{background:var(--signal);color:var(--signal-ink);border-color:var(--ink-900);box-shadow:3px 3px 0 var(--signal);transform:translate(2px,2px)}
.kachel.gewaehlt:active{box-shadow:0 0 0 var(--signal);transform:translate(5px,5px)}
.kacheln--flach .kachel{min-height:56px;padding:14px 18px}

/* ---------- Knöpfe ---------- */

.knopf{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-text);font-weight:var(--weight-bold);line-height:1;letter-spacing:0.005em;border-radius:var(--radius-0);text-decoration:none;cursor:pointer;background:var(--signal);color:var(--signal-ink);border:var(--border-solid) solid var(--paper-50);font-size:var(--text-sm);padding:20px 30px;box-shadow:6px 6px 0 var(--paper-50);transform:translate(0,0)}
.knopf:hover{box-shadow:3px 3px 0 var(--paper-50);transform:translate(3px,3px)}
.knopf:active{box-shadow:0 0 0 var(--paper-50);transform:translate(6px,6px)}
.hell .knopf{border-color:var(--ink-900);box-shadow:6px 6px 0 var(--ink-900)}
.hell .knopf:hover{box-shadow:3px 3px 0 var(--ink-900);transform:translate(3px,3px)}
.hell .knopf:active{box-shadow:0 0 0 var(--ink-900);transform:translate(6px,6px)}

.knopf--sekundaer,.knopf--sekundaer:hover,.knopf--sekundaer:active{background:transparent;color:var(--paper-50);border:none;box-shadow:none;transform:none;font-size:var(--text-xs);padding:16px 2px;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--signal)}
.knopf--sekundaer:hover{text-decoration-thickness:6px;text-decoration-color:var(--signal)}
.hell .knopf--sekundaer{color:var(--ink-900)}
.knopf--klein{font-size:var(--text-2xs)}

.knopfzeile{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.knopfspalte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}

.zurueckzeile{display:flex}
.zurueckzeile--linie{border-top:var(--border-hair) solid var(--violet-700);padding-top:var(--space-2)}

/* ---------- Felder ---------- */

.feldblock{display:flex;flex-direction:column;gap:var(--space-3)}
.feldfrage{font-family:var(--font-display);font-weight:400;font-size:var(--titel-feld);line-height:var(--lh-heading);letter-spacing:var(--track-display);color:var(--paper-50)}
.feldwort{font-size:var(--text-2xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--track-kicker);color:var(--paper-50)}
.feld{width:100%;min-height:60px;background:var(--paper-0);color:var(--ink-900);border:var(--border-solid) solid var(--ink-900);border-radius:var(--radius-0);box-shadow:4px 4px 0 var(--violet-900);padding:var(--space-4);font-family:var(--font-text);font-size:var(--text-base);line-height:var(--lh-lead)}
textarea.feld{line-height:var(--lh-body);resize:vertical}
.feld--fehler{border:var(--border-heavy) solid var(--signal)}

.streifen{margin:0;background:var(--signal);color:var(--signal-ink);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);line-height:var(--lh-lead);font-weight:var(--weight-medium)}

.hakenzeile{display:flex;align-items:flex-start;gap:var(--space-4);cursor:pointer}
.hakenzeile .hakentext{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--paper-50);max-width:var(--measure-lead);text-wrap:pretty}

/* ---------- Der Spiegel ---------- */

.schraege{display:block;width:100%;height:var(--slant-height)}
.hell{background:var(--surface-paper);color:var(--ink-700)}
.spiegeltext{margin:0;font-size:var(--titel-spiegel);line-height:var(--lh-lead);color:var(--ink-900);max-width:var(--measure);text-wrap:pretty}
.spiegelmarke{display:flex;flex-direction:column;gap:var(--space-3);border-top:var(--border-hair) solid var(--paper-200);padding-top:var(--space-5)}
.spiegelmarke .strich{width:28px;height:3px;background:var(--signal);display:block}
.spiegelmarke .satz{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--ink-500);max-width:var(--measure-lead);text-wrap:pretty}

/* ---------- Rechts-Fußzeile (18.08.) ---------- */
/* „Impressum · Datenschutz" auf jedem Bildschirm, leise wie das Wort
   „Selbsttest" oben rechts. Ziele: die Rechtsseiten der HAUPTSEITE, keine
   eigenen Rechtsseiten in diesem Repo (zwei Textstände würden auseinander-
   laufen). Die Basis-Adresse setzt js über KONFIG.rechtsBasis. Nie Limette. */

.fusszeile{margin-top:auto;padding-top:var(--space-6);display:flex;align-items:baseline;gap:var(--space-3)}
.fusszeile a{font-size:var(--text-2xs);line-height:1.4;color:var(--deep-muted);text-decoration:none}
.fusszeile a:hover,.fusszeile a:focus-visible{color:var(--paper-50);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.fusszeile span{color:var(--violet-700);font-size:var(--text-2xs)}

/* ---------- Die Einwilligung (Nachtrag 18.08. abends) ---------- */
/* EIN Pflichtfeld, es sieht aus wie die Eingabezeilen darüber und gehört
   sichtbar zu ihnen. Das Zwei-Felder-Modell samt Nachfrage-Kasten ist
   gestrichen. */

.einwilligungen{display:flex;flex-direction:column}
.einwilligungen__pflicht{display:flex;flex-direction:column;gap:var(--space-3)}
.haken2{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:32px;height:32px;margin:0;border-radius:var(--radius-0);cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:14px 14px}
/* Gesetzt: ein 14px-Limettenquadrat, kein Häkchen-Glyph, kein SVG. */
.haken2:checked{background-image:linear-gradient(var(--signal),var(--signal))}
.haken2--pflicht{background-color:var(--paper-0);border:var(--border-solid) solid var(--ink-900);box-shadow:4px 4px 0 var(--violet-900)}
.haken2--fehler{border:var(--border-heavy) solid var(--signal)}
.haken2:focus-visible{outline:var(--border-heavy) solid var(--ink-900);outline-offset:3px}

/* ---------- Sichtbarkeit ---------- */

.bildschirm{display:none}
.bildschirm.aktiv{display:flex}
.weg{display:none !important}