/* Parole – Gestaltung
   Schrift trägt die Sprache: Italienisch steht in Bodoni Moda, Deutsch und Bedienung in Titillium Web.
   Farbe trägt Bedeutung: Blau = maschile, Rosa = femminile, Gelb = die Hauptaktion. */

@font-face { font-family: "Titillium Web"; font-weight: 400; font-display: swap; src: url("fonts/titillium-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-display: swap; src: url("fonts/titillium-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-display: swap; src: url("fonts/titillium-700.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 400 900; font-display: swap; src: url("fonts/bodoni-400-900.woff2") format("woff2"); }

:root {
    color-scheme: dark;
    --bg: #121831;
    --surface: #1b2345;
    --surface-2: #27315d;
    --line: #333e72;
    --text: #eef0fa;
    --muted: #a6aed3;
    --accent: #f4c430;
    --accent-press: #dcae1f;
    --on-accent: #171c33;
    --focus: #f4c430;
    --masc: #76baf2;
    --fem: #f48fb9;
    --ok: #5ccc9a;
    --ok-bg: rgba(92, 204, 154, .13);
    --almost: #f4c430;
    --almost-bg: rgba(244, 196, 48, .12);
    --bad: #ff8068;
    --bad-bg: rgba(255, 128, 104, .13);
    --prog-safe: #5ccc9a;
    --prog-learn: #2f7868;
    --track: #2b3563;
    --chart: #8b9bec;
    --chart-strong: #b4bffa;
    --accent-edge: #c2950f;

    --ui: "Titillium Web", "Segoe UI", system-ui, -apple-system, sans-serif;
    --italian: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
    --nav-h: 64px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --bg: #eef0f8; --surface: #ffffff; --surface-2: #e2e6f3; --line: #c8cee3;
        --text: #141a33; --muted: #535c84;
        --accent: #f4c430; --accent-press: #e2b21d; --on-accent: #171c33; --focus: #2443c0;
        --masc: #1a69ad; --fem: #bd2f76;
        --ok: #157650; --ok-bg: rgba(21, 118, 80, .1);
        --almost: #8a6400; --almost-bg: rgba(244, 196, 48, .22);
        --bad: #c0351e; --bad-bg: rgba(192, 53, 30, .09);
        --prog-safe: #1e9466; --prog-learn: #6fc3a3; --track: #dde1ef;
        --chart: #5063cf; --chart-strong: #2f3fa6;
        --accent-edge: #cfa210;
    }
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #eef0f8; --surface: #ffffff; --surface-2: #e2e6f3; --line: #c8cee3;
    --text: #141a33; --muted: #535c84;
    --accent: #f4c430; --accent-press: #e2b21d; --on-accent: #171c33; --focus: #2443c0;
    --masc: #1a69ad; --fem: #bd2f76;
    --ok: #157650; --ok-bg: rgba(21, 118, 80, .1);
    --almost: #8a6400; --almost-bg: rgba(244, 196, 48, .22);
    --bad: #c0351e; --bad-bg: rgba(192, 53, 30, .09);
    --prog-safe: #1e9466; --prog-learn: #6fc3a3; --track: #dde1ef;
    --chart: #5063cf; --chart-strong: #2f3fa6;
    --accent-edge: #cfa210;
}
/* Schwarz: echtes Schwarz als Grund, die Flächen sind Grafit. Die Farben leuchten etwas kräftiger
   als im dunklen Blau. Alles Weitere steht im Abschnitt „Schwarz“ am Ende der Datei. */
:root[data-theme="black"] {
    --bg: #000000; --surface: #17181d; --surface-2: #272931; --line: #363843;
    --text: #f5f5f8; --muted: #a9acbb;
    --on-accent: #14151a;
    --masc: #7cc2ff; --fem: #ff8fc1;
    --ok: #5fd8a4; --ok-bg: rgba(95, 216, 164, .15); --almost-bg: rgba(244, 196, 48, .14);
    --bad: #ff8a72; --bad-bg: rgba(255, 138, 114, .15);
    --prog-safe: #5fd8a4; --prog-learn: #2c8572; --track: #2b2d36;
    --chart: #8f9cff; --chart-strong: #c3caff;
    --lit: inset 0 1px 0 rgba(255, 255, 255, .08);
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 64%);
    --glow: rgba(244, 196, 48, .42);
}

/* ------------------------------------------------------------ Grundlage */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1.0625rem/1.5 var(--ui);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.icon { flex: none; }

.it {
    font-family: var(--italian);
    font-weight: 500;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 18;
    letter-spacing: .005em;
}
.art { color: var(--muted); }
.art--m { color: var(--masc); }
.art--f { color: var(--fem); }
.gen { font-size: .75rem; font-weight: 700; vertical-align: super; }
.gen--m { color: var(--masc); }
.gen--f { color: var(--fem); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -80px; z-index: 20; padding: 12px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------ Rahmen und Navigation */

.main {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(var(--nav-h) + var(--safe-b) + 32px);
}
.main--bare { padding-bottom: calc(24px + var(--safe-b)); }

.nav {
    position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--nav-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.nav__brand { display: none; }
.nav__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); text-decoration: none; font-size: .8125rem; font-weight: 600;
}
.nav__item.is-active { color: var(--text); }
/* Der aktive Bereich liegt auf einem gelben Kissen. Beim Seitenwechsel gleitet es zum neuen Bereich. */
.nav__ic { position: relative; display: grid; place-items: center; width: 60px; height: 32px; }
.nav__pill { position: absolute; inset: 0; border-radius: 16px; background: var(--accent); opacity: 0; transform: scale(.7); transition: transform .12s ease-out, opacity .08s; }
.nav__item.is-active .nav__pill { opacity: 1; transform: none; }
.nav__ic .icon { position: relative; }
.nav__item.is-active .nav__ic { color: var(--on-accent); }

@media (min-width: 960px) {
    .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
    .nav {
        position: sticky; top: 0; bottom: auto; height: 100vh;
        display: flex; flex-direction: column; gap: 4px;
        padding: 28px 16px; border-top: 0; border-right: 1px solid var(--line);
    }
    .nav__brand { display: block; padding: 0 12px 24px; font-size: 2.25rem; font-weight: 600; text-decoration: none; line-height: 1; }
    .nav__item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 12px; font-size: 1.0625rem; }
    .nav__item.is-active { background: var(--surface-2); }
    .nav__item.is-active::before { content: ""; position: absolute; top: 50%; left: -16px; width: 4px; height: 28px; margin: -14px 0 0; background: var(--accent); border-radius: 0 4px 4px 0; }
    .nav__ic { width: auto; height: auto; }
    .nav__item.is-active .nav__ic { color: inherit; }
    .nav__pill { display: none; }
    .main { padding: 44px 32px 64px; }
}

/* ------------------------------------------------------------ Überschriften */

.head { margin-bottom: 24px; }
.head h1 { font-size: 1.875rem; line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
/* Ein kurzer gelber Strich unter der Überschrift */
.head::after, .login__brand::after, .stage__task::before {
    content: ""; display: block; width: 44px; height: 6px; margin-top: 14px;
    border-radius: 3px; background: var(--accent);
}
.head__sub { margin-top: 6px; color: var(--muted); }
.back {
    display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -8px 0 4px -8px; padding: 0 10px 0 2px;
    color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9375rem; border-radius: 10px;
}
h2 { font-size: 1.1875rem; line-height: 1.25; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 8px; }
.section { margin-top: 40px; }
.section--first { margin-top: 0; }
.section + .form { margin-top: 36px; }
.rows + .hint, .words + .hint { margin-top: 12px; }
.lead { margin-bottom: 20px; }
.hint, .aside { color: var(--muted); font-size: .9375rem; }
.aside { margin-top: 28px; }
.stack { display: grid; gap: 10px; }

.hello { margin: 12px 0 28px; }
.hello__greet { font-size: clamp(2.125rem, 9.4vw, 3.5rem); line-height: 1.1; font-weight: 500; overflow-wrap: anywhere; }

/* Kennzahlen: drei weiche Kacheln */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 24px; }
.figures > div { min-width: 0; padding: 14px 10px 12px 14px; border-radius: 18px; background: var(--surface); }
.figures dd { display: flex; align-items: center; gap: 2px; font-size: 2rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.figures dt { color: var(--muted); font-size: .875rem; line-height: 1.3; margin-top: 2px; }
.figures .icon { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.figures .is-lit dd, .figures .is-almost dd { color: var(--almost); }
.figures .is-ok dd { color: var(--ok); }
.figures .is-bad dd { color: var(--bad); }

/* ------------------------------------------------------------ Schaltflächen */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 20px; border: 0; border-radius: 16px;
    background: var(--surface-2); color: var(--text);
    font-weight: 600; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; text-align: center;
    transition: transform .16s cubic-bezier(.3, 1.6, .5, 1);
}
.btn:active { transform: scale(.97); transition-duration: .05s; }
/* Die Hauptaktion sitzt wie eine Taste auf einer dunkleren Kante und lässt sich hineindrücken */
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-edge); }
.btn--primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-edge); }
.btn--quiet { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--danger { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); }
.btn--block { display: flex; width: 100%; }
.btn--big { min-height: 72px; flex-direction: column; gap: 2px; font-size: 1.25rem; font-weight: 700; }
.btn--big small { font-size: .875rem; font-weight: 600; opacity: .8; }
.btn--small { min-height: 44px; padding: 0 14px; font-size: .9375rem; border-radius: 14px; }
.toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.toolbar .btn--primary { grid-column: 1 / -1; }
@media (min-width: 600px) { .toolbar { display: flex; } .toolbar .btn--primary { min-width: 180px; } }

/* ------------------------------------------------------------ Formulare */

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span, .field > label > span { font-weight: 600; font-size: .9375rem; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.field small { color: var(--muted); font-size: .875rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field--narrow { grid-column: 1; }
.field-row:has(.field--narrow) { grid-template-columns: 132px 1fr; }

input[type="text"], input[type="password"], input[type="search"], select, textarea {
    width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
    font-size: 1.0625rem; line-height: 1.3;
    transition: border-color .15s, box-shadow .15s;
}
/* Felder, die selbst auf einer Fläche liegen, bekommen den Grundton */
details.more input, .users input, details.more select { background: var(--bg); }
input.it, textarea[lang="it"] { font-size: 1.1875rem; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
::placeholder { color: var(--muted); opacity: .75; font-family: var(--ui); font-weight: 400; letter-spacing: 0; }

.inline-form, .search { display: flex; gap: 8px; }
.inline-form { flex-wrap: wrap; }
.inline-form input, .search input { flex: 1 1 180px; }
.search { margin-bottom: 20px; }
.search .btn { flex: none; padding: 0 16px; }

.group legend { font-weight: 700; font-size: 1.0625rem; margin-bottom: 10px; padding: 0; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.check--all { margin-bottom: 4px; }
.group + .field { margin-top: 22px; }
.field > .btn { justify-self: start; margin-top: 4px; }
.voice-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; font-weight: 600; }
.voice-confirm[hidden] { display: none; }

.chips, .modes { display: grid; gap: 8px; }
@media (min-width: 600px) { .chips { grid-template-columns: 1fr 1fr; } }
.chip, .mode, .segment { position: relative; display: block; }
.chip input, .mode input, .segment input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.chip__body, .mode__body {
    display: grid; gap: 2px; min-height: 60px; padding: 10px 48px 10px 14px; align-content: center;
    border: 1.5px solid var(--line); border-radius: 16px; background: transparent;
    transition: border-color .15s, background-color .15s;
}
.chip__name, .mode__body strong { font-weight: 600; overflow-wrap: anywhere; }
.chip__meta, .mode__body span { color: var(--muted); font-size: .875rem; }
.chip__body::after, .mode__body::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
    border: 1.5px solid var(--line); border-radius: 6px;
}
.mode__body::after { border-radius: 50%; }
.chip input:checked + .chip__body, .mode input:checked + .mode__body { border-color: var(--accent); background: var(--surface); }
.chip input:checked + .chip__body::after {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171c33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.mode input:checked + .mode__body::after { border-color: var(--accent); background: radial-gradient(var(--accent) 0 5px, transparent 6px); }
.chip input:focus-visible + .chip__body, .mode input:focus-visible + .mode__body, .segment input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; border-radius: 12px; font-weight: 600; font-size: .9375rem; text-align: center; transition: background-color .18s, color .18s; }
.group .hint { margin-top: 8px; }

/* Weitergeben: wer die Liste schon hat */
.chip--has .chip__meta { color: var(--ok); }
.chip--part .chip__meta { color: var(--almost); }
.chip input:disabled { cursor: default; }
.chip--has .chip__body::after {
    border-color: var(--ok);
    background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171c33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.segment input:checked + span { background: var(--accent); color: var(--on-accent); }

.flash { animation: drop .2s ease-out; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border-left: 5px solid var(--ok); }
.flash--warn { border-left-color: var(--almost); }
.flash--bad { border-left-color: var(--bad); }

.tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--surface-2); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.tag--ok { color: var(--ok); }
.tag--warn { color: var(--almost); }
.tag--bad { color: var(--bad); }

.empty { padding: 20px 0 8px; }
.empty p { color: var(--muted); margin-bottom: 20px; max-width: 34em; }

/* ------------------------------------------------------------ Listen */

/* Zeilen zum Antippen sind einzelne Karten, Wortlisten liegen gemeinsam auf einer Fläche */
.rows { display: grid; gap: 10px; }
.words, .users { padding: 0 6px 0 16px; border-radius: 18px; background: var(--surface); }
.words > li + li, .users > li + li { border-top: 1px solid var(--line); }
.row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 68px; padding: 12px 14px 12px 16px;
    border-radius: 18px; background: var(--surface); text-decoration: none; color: inherit;
    transition: transform .16s cubic-bezier(.3, 1.6, .5, 1);
}
a.row:active { transform: scale(.98); transition-duration: .05s; }
.users .row { padding-left: 0; background: transparent; }
.row > .icon { color: var(--muted); order: 2; }
.row__main { display: grid; gap: 2px; flex: 1 1 0; min-width: 0; order: 1; }
.row__title { font-weight: 600; overflow-wrap: anywhere; }
.row__meta { color: var(--muted); font-size: .875rem; }
.row__go { order: 2; color: var(--muted); font-size: .9375rem; font-weight: 600; }
.row__meter { order: 3; flex: 0 0 100%; line-height: 0; padding-top: 4px; }
.row--static .row__main { flex: 1 1 100%; }
.row--static form, .row--static .btn { order: 2; }
.row--static { gap: 8px; padding-bottom: 14px; }
/* Etwas wartet auf dich: gelber Rand */
.row--alert { box-shadow: inset 0 0 0 2px var(--accent); }
.row--alert .row__go { color: var(--text); }
.after-list { margin-top: 12px; }
.word__count { text-align: right; line-height: 1.3; }
.share { display: grid; gap: 20px; }
.share h3 { margin-bottom: 0; }
.share__state { color: var(--muted); font-size: .9375rem; }
.share__state .tag { margin-right: 4px; }
.row__meter { padding-right: 2px; }

.meter { display: block; border-radius: 5px; overflow: hidden; }
.meter__track { fill: var(--track); }
.meter__safe { fill: var(--prog-safe); }
.meter__learn { fill: var(--prog-learn); }
.meter__gap { fill: var(--bg); }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0; color: var(--muted); font-size: .875rem; }
.legend .dot, .legend .swatch { margin-left: 10px; }
.legend .dot:first-child, .legend .swatch:first-child { margin-left: 0; }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--track); }
.swatch--safe { background: var(--prog-safe); }
.swatch--learn { background: var(--prog-learn); }
.swatch--new { background: var(--track); }

.word { display: flex; align-items: center; gap: 10px; }
.word__link { display: grid; gap: 0; flex: 1 1 0; min-width: 0; min-height: 64px; padding: 10px 0; align-content: center; text-decoration: none; color: inherit; }
.word__it { font-size: 1.375rem; line-height: 1.25; overflow-wrap: anywhere; }
.word__de { color: var(--muted); overflow-wrap: anywhere; }
.word__lesson { margin-left: 6px; padding: 0 7px; border-radius: 6px; background: var(--surface-2); font-size: .8125rem; white-space: nowrap; }
.word__count { color: var(--muted); font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.dot--new { box-shadow: inset 0 0 0 1.5px var(--muted); }
.dot--learn { box-shadow: inset 0 0 0 3px var(--prog-safe); }
.dot--safe { background: var(--prog-safe); }
.empty-filter { padding: 20px 0; color: var(--muted); }

.speak {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--muted);
    transition: transform .16s cubic-bezier(.3, 1.6, .5, 1);
}
.speak:active { background: var(--surface-2); color: var(--text); transform: scale(.86); transition-duration: .05s; }
.speak.is-unavailable { opacity: .35; }

details.more { margin-top: 32px; padding: 0 16px; border-radius: 18px; background: var(--surface); }
details.more > summary, .user summary { display: flex; align-items: center; gap: 12px; min-height: 56px; font-weight: 600; cursor: pointer; list-style: none; }
details.more > summary::-webkit-details-marker, .user summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; font-weight: 400; color: var(--muted); }
details.more[open] > summary::after { content: "–"; }
details.more > *:not(summary) { margin-bottom: 20px; }
details.more[open] { padding-bottom: 1px; }
.user summary .icon { color: var(--muted); transition: transform .15s; }
.user details[open] summary .icon { transform: rotate(90deg); }
.user details > form { margin: 4px 0 16px; }
.danger-zone { margin-top: 44px; }

.copybox, .code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.5; }
.code { padding: 14px; margin: 12px 0; border-radius: 12px; background: var(--surface); overflow-x: auto; white-space: pre; }
.copybox { margin-bottom: 10px; }
.prose { max-width: 38em; }
.prose p, .prose ul, .prose ol { margin-bottom: 12px; }
.prose ul, .prose ol, .steps { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol, .steps { list-style: decimal; }
.prose li, .steps li { margin-bottom: 4px; }
.prose h3 { margin-top: 24px; }
.steps { margin: 12px 0 20px; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); }

/* ------------------------------------------------------------ Importvorschau */

.imp-list { counter-reset: imp; }
.imp { padding: 12px 0 16px; border-top: 1px solid var(--line); }
.imp__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.imp__top .check { font-weight: 400; font-size: .9375rem; }
.imp__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.imp__grid > * { min-height: 48px; padding: 8px 10px; }
.imp__grid > :nth-child(1) { grid-column: span 2; }
.imp__grid > :nth-child(2) { grid-column: span 4; }
.imp__grid > :nth-child(3) { grid-column: span 6; }
.imp__grid > :nth-child(n+4) { grid-column: span 3; }
.imp__grid > :nth-child(n+6) { grid-column: span 2; }
.imp.is-off .imp__grid { opacity: .4; }
@media (min-width: 960px) {
    .main:has(.imp-list) { max-width: 1080px; }
    .imp__grid { grid-template-columns: 84px 1.3fr 1.6fr 132px 132px 1fr 1fr 76px; }
    .imp__grid > :nth-child(n) { grid-column: auto; }
}
.sticky-actions { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b)); padding: 12px 0; background: var(--bg); border-top: 1px solid var(--line); }
@media (min-width: 960px) { .sticky-actions { bottom: 0; } }

.imp-group { margin-bottom: 8px; }
.imp-group + .imp-group { margin-top: 28px; padding-top: 24px; border-top: 4px solid var(--line); }
.imp-group legend { font-weight: 700; font-size: 1.0625rem; margin-bottom: 10px; padding: 0; }
.imp-group__head { display: grid; gap: 8px; margin-bottom: 8px; }
@media (min-width: 600px) { .imp-group__head { grid-template-columns: 1fr 1fr; } }
.imp-group__head input { font-weight: 600; }

/* ------------------------------------------------------------ Seiten und Rangliste */

.word__page { margin-left: 6px; font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; }
.page-range { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.group legend em { font-style: normal; font-weight: 400; color: var(--muted); }
.form--tight { gap: 4px; margin-top: 20px; }
.rows--link { margin-bottom: 28px; }
.row--plain { min-height: 52px; }

.ranks { margin-bottom: 20px; }
.ranks { display: grid; gap: 10px; }
.rank { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 16px; border-radius: 18px; background: var(--surface); }
.rank.is-me { box-shadow: inset 0 0 0 2px var(--accent); }
.rank__pos { flex: none; width: 1.3em; font-family: var(--italian); font-variation-settings: "opsz" 18; font-size: 2.5rem; line-height: .95; font-weight: 600; text-align: center; color: var(--muted); font-variant-numeric: lining-nums; }
.rank.is-me .rank__pos { color: var(--text); }
.rank__body { flex: 1 1 0; min-width: 0; }
.rank__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rank__name { font-weight: 600; font-size: 1.125rem; overflow-wrap: anywhere; }
.rank__points { font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank__points small { font-size: .8125rem; font-weight: 400; color: var(--muted); }
.rank__bar { display: block; margin: 8px 0 6px; }
.rank__track { fill: var(--track); }
.rank__fill { fill: var(--chart); }
.rank.is-me .rank__fill { fill: var(--accent); }
.rank__facts { color: var(--muted); font-size: .875rem; }
.rank-note { margin: 4px 0 16px; }
.pdone__points { margin: -12px 0 24px; font-weight: 700; color: var(--almost); }

/* ------------------------------------------------------------ Anmeldung */

.login { max-width: 380px; margin: 9vh auto 0; }
.login__brand { font-size: clamp(3.5rem, 18vw, 5rem); line-height: 1; font-weight: 600; }
.login__brand::after { width: 72px; margin-top: 18px; }
.login__sub { margin: 16px 0 28px; color: var(--muted); }
.login__title { font-size: 1.5rem; margin: 20px 0 12px; }
.login p { margin-bottom: 12px; }
.narrow { max-width: 420px; margin: 12vh auto; padding: 0 20px; }

/* ------------------------------------------------------------ Statistik */

.bars { display: block; width: 100%; max-width: 560px; height: auto; overflow: visible; }
.bars__hit { fill: transparent; }
.bars__bar { fill: var(--chart); }
.bars__zero { fill: var(--track); }
.bars__col:hover .bars__bar, .bars__col.is-today .bars__bar { fill: var(--chart-strong); }
.bars__day { fill: var(--muted); font: 600 10px var(--ui); }
.bars__val { fill: var(--text); font: 700 11px var(--ui); }
.bars__col.is-today .bars__day { fill: var(--text); }

/* ------------------------------------------------------------ Übungsseite */

/* Die Übung füllt genau den Bildschirm. Die Seite selbst scrollt nicht und lässt sich
   nicht ziehen. Nur wenn ein Inhalt wirklich nicht passt, scrollt der Bereich unter der Leiste. */
html.fit, html.fit body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.fit .main--bare { padding: 0; max-width: none; }
.practice {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    max-width: 640px; margin: 0 auto;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 20px calc(16px + var(--safe-b));
    overflow: hidden;
}
.practice.has-vvh { height: var(--vvh); }
.pbar { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 -10px; }
.pbar__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.pbar__track { flex: 1; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
/* Der Balken wird nur verschoben, nicht in der Breite geändert. Das kostet kein neues Seitenlayout. */
.pbar__fill { width: 100%; height: 100%; border-radius: 6px; background: var(--accent); transform: translateX(-100%); transition: transform .5s linear; }
.pbar__info { min-width: 3.4em; text-align: right; color: var(--muted); font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbar__btn[aria-pressed="true"] .when-off, .pbar__btn[aria-pressed="false"] .when-on { display: none; }
.pbar__btn .when-on, .pbar__btn .when-off { display: inline-flex; }
.pnote { padding: 6px 0; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.pnote--warn { color: var(--almost); font-weight: 600; }
.ploading { margin: 28vh 0 0; text-align: center; color: var(--muted); }

.pbody, .pdone {
    flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none;
}
.pbody::-webkit-scrollbar, .pdone::-webkit-scrollbar { display: none; }
.pbody { display: flex; flex-direction: column; padding-bottom: 4px; }
.pbody > * { flex: none; }
.stage { padding: 3vh 0 12px; }
.stage__task { color: var(--muted); font-weight: 600; font-size: .9375rem; }
.stage__task::before { width: 40px; margin: 0 0 12px; }
.stage__prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 4px; min-height: 1.2em; font-size: clamp(2.1rem, 9.5vw, 3.25rem); line-height: 1.12; overflow-wrap: anywhere; }
.stage__prompt--de { font-size: clamp(1.75rem, 7.5vw, 2.5rem); font-weight: 700; }
.stage__prompt--listen { gap: 14px; margin: 16px 0 8px; }
.stage__meta { min-height: 1.5em; color: var(--muted); font-size: .9375rem; }

/* Artikel zum Antippen statt Tippen */
.arts { display: flex; gap: 6px; margin-top: 6px; }
.art-chip {
    flex: 1 1 0; min-width: 0; max-width: 84px; min-height: 40px; padding: 0 2px 2px;
    background: var(--surface); border: 1.5px solid var(--line); border-bottom-width: 3px; border-radius: 12px;
    font-size: 1.25rem; line-height: 1;
}
.art-chip.is-on { background: var(--surface-2); border-color: var(--text); }
.art-chip--m.is-on { border-color: var(--masc); color: var(--masc); }
.art-chip--f.is-on { border-color: var(--fem); color: var(--fem); }
.art-chip:disabled { cursor: default; opacity: .5; }
.art-chip.is-on:disabled { opacity: 1; }
.stage__detail { margin-top: 10px; }
.detail__de { font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.detail__extra { color: var(--muted); overflow-wrap: anywhere; }
.detail__extra .it { color: var(--text); font-size: 1.125em; }

.practice[data-kind="tap"] .answer { margin-top: auto; padding-top: 16px; }
/* Auf dem iPad sitzen die Antworten näher an der Frage statt ganz unten */
@media (min-width: 700px) and (min-height: 800px) { .practice[data-kind="tap"] .answer { margin-top: 40px; } .stage { padding-top: 6vh; } }

.opts { display: grid; gap: 10px; }
.opts--two { grid-template-columns: 1fr 1fr; }
@media (min-width: 600px) { .opts { grid-template-columns: 1fr 1fr; } }
.opt {
    display: grid; gap: 2px; align-content: center; min-height: 64px; padding: 10px 16px; text-align: left;
    position: relative;
    background: var(--surface); border: 1.5px solid var(--line); border-bottom-width: 4px; border-radius: 16px;
    font-size: 1.125rem; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere;
    transition: transform .12s ease-out;
}
.opt .it { font-size: 1.3125rem; font-weight: 500; }
.opt small { color: var(--muted); font-size: .875rem; font-weight: 400; }
.opt:active:not(:disabled) { transform: translateY(2px) scale(.985); }
.opt--m { border-left: 6px solid var(--masc); }
.opt--f { border-left: 6px solid var(--fem); }
.opt:disabled { cursor: default; color: var(--muted); }
.opt.is-ok { border-color: var(--ok); background: var(--ok-bg); color: var(--text); }
.opt.is-bad { border-color: var(--bad); background: var(--bad-bg); color: var(--text); }

.typing__field { position: relative; }
input.typing__input { min-height: 62px; padding: 12px 16px; border-width: 2px; border-radius: 16px; font-size: 1.375rem; }
input.typing__input.it { font-size: 1.5rem; }
/* Der gewählte Artikel steht vorn im Feld, getippt wird dahinter */
.typing__art { position: absolute; left: 18px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 1.5rem; pointer-events: none; }
/* Tippfehler: die Antwort liegt mit markierten Buchstaben über dem Feld */
.typing__marks { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 18px; overflow: hidden; white-space: pre; pointer-events: none; font-size: 1.375rem; }
.typing__marks.it { font-size: 1.5rem; }
.typing__input.is-marked { color: transparent; caret-color: transparent; }
.ch--bad, .ch--fix { display: inline-block; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.ch--bad { color: var(--bad); }
.ch--fix:not(.art) { color: var(--ok); }
.ch-gap { display: inline-block; width: 3px; height: 1em; margin: 0 2px; vertical-align: -.12em; border-radius: 2px; background: var(--bad); }
.is-almost ~ .typing__marks .ch--bad { color: var(--almost); }
.is-almost ~ .typing__marks .ch-gap { background: var(--almost); }
.typing__input.is-ok { border-color: var(--ok); background: var(--ok-bg); box-shadow: none; }
.typing__input.is-almost { border-color: var(--almost); background: var(--almost-bg); box-shadow: none; }
.typing__input.is-bad { border-color: var(--bad); background: var(--bad-bg); box-shadow: none; }
.keys { display: flex; gap: 6px; margin-top: 10px; }
.key { flex: 1; min-height: 46px; padding: 0; border: 0; border-radius: 12px; background: var(--surface-2); font-size: 1.25rem; font-weight: 600; }
.key:active { background: var(--line); }
.typing__actions { display: flex; gap: 10px; margin-top: 12px; }
.typing__actions .btn--primary { flex: 1; }
.typing__actions .btn--ghost { padding: 0 12px; }
.intro { margin-top: 8px; }

/* Das Urteil kommt als getönte Karte von unten herein */
.fb { margin-top: 14px; padding: 14px 16px 16px; border-radius: 20px; background: var(--surface); animation: fb-in .18s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes fb-in { from { opacity: 0; transform: translateY(14px); } 55% { opacity: 1; } }
.fb--ok { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); }
.fb--almost { background: color-mix(in srgb, var(--almost) 14%, var(--surface)); }
.fb--bad { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.fb__verdict { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.125rem; }
.fb--ok .fb__verdict { color: var(--ok); }
.fb--almost .fb__verdict { color: var(--almost); }
.fb--bad .fb__verdict { color: var(--bad); }
.fb__icon { display: none; }
.fb--ok .fb__icon--ok { display: inline-flex; color: var(--ok); }
.fb--almost .fb__icon--almost { display: inline-flex; color: var(--almost); }
.fb--bad .fb__icon--bad { display: inline-flex; color: var(--bad); }
.fb__speak { margin-left: auto; line-height: 0; }
.fb__speak .speak { width: 40px; height: 40px; margin: -8px -6px -8px 0; }
.fb--compact .fb__actions { margin-top: 10px; }
.fb--compact .fb__sol:empty { display: none; }
.fb__hint { color: var(--muted); font-size: .9375rem; }
.fb__it { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 6px; font-size: 1.75rem; line-height: 1.2; overflow-wrap: anywhere; }
.fb__sol .detail__de { font-size: 1.0625rem; font-weight: 400; }
.fb__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fb__actions .btn--primary { flex: 1 1 140px; }

/* Paare finden: links Italienisch, rechts Deutsch, je Zeile gleich hoch */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.pair {
    position: relative;
    display: flex; align-items: center; min-height: 56px; padding: 6px 12px; text-align: left;
    background: var(--surface); border: 1.5px solid var(--line); border-bottom-width: 4px; border-radius: 16px;
    font-size: 1rem; line-height: 1.2; font-weight: 600; overflow-wrap: anywhere;
}
.pair .it { font-size: 1.1875rem; font-weight: 500; }
.pair.is-sel { border-color: var(--accent); background: var(--surface-2); }
.pair.is-ok { border-color: var(--ok); background: var(--ok-bg); color: var(--muted); border-bottom-width: 1.5px; }
.pair.is-bad { border-color: var(--bad); background: var(--bad-bg); }
.pair:disabled { cursor: default; }

/* Wort zusammensetzen: oben die Antwortzeile, darunter die Stücke */
.build__line {
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 60px; padding: 6px 0 8px;
    border-bottom: 2px solid var(--line);
}
.build__line.is-ok { border-bottom-color: var(--ok); }
.build__line.is-bad { border-bottom-color: var(--bad); }
.build__bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.tile {
    min-width: 46px; min-height: 46px; padding: 4px 12px;
    background: var(--surface); border: 1.5px solid var(--line); border-bottom-width: 4px; border-radius: 12px;
    font: 500 1.3125rem/1.1 var(--italian); font-optical-sizing: none; font-variation-settings: "opsz" 18;
}
.build__bank .tile.is-used { visibility: hidden; }
.build__line.is-ok .tile { border-color: var(--ok); background: var(--ok-bg); }
.build__line.is-bad .tile { border-color: var(--bad); background: var(--bad-bg); }

.play { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-edge); transition: transform .16s cubic-bezier(.3, 1.6, .5, 1); }
.play:active { transform: scale(.93); transition-duration: .05s; }
.play .icon { width: 34px; height: 34px; fill: currentColor; }
.play--slow { width: auto; height: 48px; padding: 0 16px 0 12px; border-radius: 24px; background: var(--surface-2); color: var(--text); box-shadow: none; font: 600 .9375rem var(--ui); }
.play--slow .icon { width: 24px; height: 24px; fill: none; }

.pdone { padding-top: 6vh; }
/* Funken und Konfetti liegen über der Übung und nehmen keine Eingaben an */
.burst { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.burst__p { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; }
.burst__p--sq { border-radius: 2px; }
.pdone__word { font-size: clamp(3.25rem, 16vw, 5.5rem); line-height: 1; font-weight: 600; }
.pdone__lead { margin: 16px 0 24px; font-size: 1.125rem; }
.pdone h2 { margin-top: 8px; }
.pdone .words { margin-bottom: 28px; }
.pdone__saving { margin-bottom: 12px; color: var(--almost); font-weight: 600; }

/* Niedrige Bildschirme und offene Tastatur: enger setzen, damit nichts scrollen muss */
@media (max-height: 780px) {
    .stage { padding-top: 1.5vh; }
    .opts { gap: 8px; }
    .opt { min-height: 58px; }
    .pairs { gap: 6px 8px; }
    .pair { min-height: 50px; }
}
@media (max-height: 640px) {
    .stage { padding: 2px 0 8px; }
    .stage__task::before { display: none; }
    .stage__prompt { margin-top: 4px; font-size: clamp(1.75rem, 8vw, 2.5rem); }
    .stage__meta { min-height: 0; }
    input.typing__input { min-height: 52px; padding: 8px 16px; }
    .fb { margin-top: 10px; padding: 10px 14px 12px; }
    .fb__it { margin-top: 2px; font-size: 1.5rem; }
    .fb__actions { margin-top: 10px; }
    .fb__actions .btn { min-height: 48px; }
    .opt { min-height: 52px; }
    .pair { min-height: 46px; }
    .build__line { min-height: 52px; }
    .build__bank { margin-top: 8px; gap: 6px; }
    .tile { min-width: 42px; min-height: 42px; }
    .arts { margin-top: 2px; }
    .art-chip { min-height: 36px; }
    .fb { margin-top: 8px; padding: 8px 14px 10px; }
    .fb__verdict { font-size: 1rem; }
    .fb__actions { margin-top: 8px; }
}
@media (max-height: 600px) {
    .opts { gap: 6px; }
    .opt { min-height: 48px; padding: 6px 14px; }
}

/* ------------------------------------------------------------ Bewegung
   Kurze Rückmeldungen auf eine Eingabe. Es bewegen sich nur transform und opacity,
   das rechnet die Grafikkarte, ohne dass die Seite neu aufgebaut wird. */
@keyframes pop { 40% { transform: scale(1.06); } 75% { transform: scale(.985); } }
@keyframes pop-wide { 40% { transform: scale(1.02); } 75% { transform: scale(.995); } }
@keyframes shake { 15% { transform: translateX(-7px) rotate(-.6deg); } 40% { transform: translateX(6px) rotate(.5deg); } 65% { transform: translateX(-4px); } 85% { transform: translateX(2px); } }
@keyframes wobble { 25% { transform: rotate(-1.1deg); } 60% { transform: rotate(.9deg); } }
@keyframes tile-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } }
@keyframes ring { from { opacity: .9; transform: none; } to { opacity: 0; transform: scale(1.07, 1.4); } }
@keyframes mark-in { from { opacity: 0; transform: translateY(-7px) scale(1.35); } }
@keyframes big-in { from { opacity: 0; transform: scale(.6) rotate(-4deg); } 60% { transform: scale(1.06) rotate(1deg); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.opt.is-ok, .pair.is-ok, .build__line.is-ok .tile { animation: pop .26s ease-out; }
.typing__input.is-ok { animation: pop-wide .26s ease-out; }
.typing__input.is-almost { animation: wobble .3s ease-in-out; }
.opt.is-bad, .pair.is-bad, .typing__input.is-bad, .build__line.is-bad { animation: shake .32s ease-in-out; }
.build__line .tile { animation: tile-in .12s ease-out; }
.fb--ok .fb__icon--ok, .fb--almost .fb__icon--almost { animation: pop .3s ease-out .04s; }
.fb--bad .fb__icon--bad { animation: wobble .3s ease-in-out .04s; }
/* Ein Ring läuft von der richtigen Antwort nach außen */
.opt.is-ok::after, .pair.is-ok::after {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--ok);
    opacity: 0; pointer-events: none; animation: ring .38s ease-out;
}
.ch--bad, .ch--fix, .ch-gap { animation: mark-in .24s cubic-bezier(.2, 1.3, .4, 1) .06s backwards; }

/* Ende der Einheit: die Zeilen kommen nacheinander herein */
.pdone:not([hidden]) > * { animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; }
.pdone:not([hidden]) > .pdone__word { animation: big-in .5s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left center; }
.pdone:not([hidden]) > :nth-child(2) { animation-delay: .1s; }
.pdone:not([hidden]) > :nth-child(3) { animation-delay: .15s; }
.pdone:not([hidden]) > :nth-child(4) { animation-delay: .2s; }
.pdone:not([hidden]) > :nth-child(n+5) { animation-delay: .26s; }

/* Aufklappen, Balken und Diagramme */
details.more[open] > *:not(summary), .user details[open] > form { animation: rise .16s ease-out; }
.meter__safe, .meter__learn, .rank__fill { transform-box: fill-box; transform-origin: left center; animation: grow-x .35s cubic-bezier(.2, .8, .2, 1) backwards; }
.bars__bar { transform-box: fill-box; transform-origin: center bottom; animation: grow-y .35s cubic-bezier(.2, .8, .2, 1) backwards; }

@media (prefers-reduced-motion: no-preference) {
    /* Der Haken zeichnet sich selbst */
    .fb--ok .fb__icon--ok path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw .22s ease-out .04s forwards; }

    /* Seitenwechsel innerhalb eines Bereichs: die neue Seite gleitet kurz aus der Richtung herein,
       in die man sich bewegt (theme.js setzt data-dir). Ein Wechsel in der Leiste unten läuft ohne
       Übergang, damit er sofort reagiert. Die Zeiten sind knapp gehalten, weil die Seite während
       eines Übergangs keine Tipper annimmt. */
    @view-transition { navigation: auto; }
    .nav { view-transition-name: nav; }
    ::view-transition-group(*) { animation-duration: .12s; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .1s; }
    html[data-dir="fwd"] { --vt-x: 18px; --vt-y: 0px; }
    html[data-dir="back"] { --vt-x: -18px; --vt-y: 0px; }
    html[data-dir="up"] { --vt-x: 0px; --vt-y: 22px; }
    html[data-dir="down"] { --vt-x: 0px; --vt-y: -16px; }
    html[data-dir]::view-transition-old(root) { animation: vt-out .06s ease-in both; }
    html[data-dir]::view-transition-new(root) { animation: vt-in .12s ease-out both; }
    ::view-transition-new(nav):only-child { animation: nav-in .12s ease-out both; }
    ::view-transition-old(nav):only-child { animation: nav-out .08s ease-in both; }
}
@keyframes vt-out { to { opacity: 0; transform: translate(calc(var(--vt-x) * -.5), calc(var(--vt-y) * -.5)); } }
@keyframes vt-in { from { opacity: 0; transform: translate(var(--vt-x), var(--vt-y)); } }
@keyframes nav-in { from { transform: translateY(100%); } }
@keyframes nav-out { to { transform: translateY(100%); } }

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

/* ------------------------------------------------------------ Duell */

/* Warteraum und Countdown füllen die Übungsseite, bis es losgeht */
.lobby { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 0 12vh; }
.lobby__count { font-size: clamp(7rem, 42vw, 12rem); line-height: 1; font-weight: 600; color: var(--accent); font-variant-numeric: lining-nums; }
.lobby__title { font-size: 1.875rem; line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
.lobby__text { color: var(--muted); max-width: 30em; }
.lobby .stack { margin-top: 20px; }

/* Im Duell steht oben die Uhr, darunter der Stand beider Seiten */
.practice--duel .pbar__track { display: none; }
.practice--duel .pbar__info { flex: 1; min-width: 0; text-align: center; color: var(--text); font-size: 1.375rem; font-weight: 700; }
.versus { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; padding: 4px 0 6px; font-size: .875rem; font-weight: 600; }
.versus__name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.versus__track { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.versus__fill { display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--chart); transform: translateX(-100%); transition: transform .35s ease-out; }
.versus__fill--me { background: var(--accent); }
.versus__score { min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }

/* Hinweis auf eine Einladung, egal auf welcher Seite man gerade ist */
.toast {
    position: fixed; z-index: 15; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 520px; margin: 0 auto; padding: 14px 14px 14px 16px;
    border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent), 0 12px 32px rgba(0, 0, 0, .35);
    animation: drop .2s ease-out;
}
.toast__text { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.toast__text strong { font-weight: 600; overflow-wrap: anywhere; }
.toast__text span { color: var(--muted); font-size: .875rem; }
.toast__actions { display: flex; gap: 6px; margin-left: auto; }
@media (min-width: 960px) { .toast { left: auto; right: 24px; bottom: 24px; margin: 0; } }

/* ------------------------------------------------------------ Schwarz
   Der Grund bleibt echtes Schwarz. Oben auf jeder Seite liegt ein Lichtschein in den beiden
   Farben der Artikel, Blau und Rosa. Flächen und Tasten sind Grafit mit einer hellen Oberkante,
   und Gelb leuchtet dort, wo etwas zu tun ist. */

:root[data-theme="black"] body {
    background-image:
        radial-gradient(130% 440px at 0% -40px, rgba(92, 116, 255, .30), transparent 72%),
        radial-gradient(100% 380px at 100% -60px, rgba(255, 110, 170, .22), transparent 72%);
    background-repeat: no-repeat;
}

/* Flächen: von oben beleuchtet */
:root[data-theme="black"] :where(.figures > div, .row, .rank, .words, .users, .fb, .flash, .code, .segments) {
    background-image: var(--sheen);
    box-shadow: var(--lit);
}
:root[data-theme="black"] .users .row { background-image: none; box-shadow: none; }
/* Tasten ohne eigene Farbe */
:root[data-theme="black"] :where(.btn:not(.btn--primary, .btn--ghost, .btn--danger), .key, .play--slow) {
    background-image: var(--sheen);
    box-shadow: var(--lit);
}

/* Gelb leuchtet: Hauptaktion, aktiver Bereich, wartende Zeilen, eigener Platz in der Rangliste */
:root[data-theme="black"] .btn--primary { box-shadow: 0 4px 0 var(--accent-edge), 0 16px 34px -12px var(--glow); }
:root[data-theme="black"] .btn--primary:active { box-shadow: 0 1px 0 var(--accent-edge), 0 8px 20px -12px var(--glow); }
:root[data-theme="black"] .nav__pill { box-shadow: 0 0 22px -4px var(--glow); }
:root[data-theme="black"] .row--alert,
:root[data-theme="black"] .rank.is-me { box-shadow: inset 0 0 0 2px var(--accent), 0 0 30px -10px var(--glow); }
:root[data-theme="black"] .row__go { color: var(--accent); }

/* Der Strich unter der Überschrift zeigt die drei Farben der App: Gelb, Rosa, Blau */
:root[data-theme="black"] .head::after,
:root[data-theme="black"] .login__brand::after {
    width: 64px;
    background: linear-gradient(90deg, var(--accent) 0 46%, transparent 46% 52%, var(--fem) 52% 73%, transparent 73% 79%, var(--masc) 79% 100%);
}
:root[data-theme="black"] .login__brand::after { width: 96px; }

/* Die Artikel zum Antippen zeigen ihr Geschlecht schon vor der Wahl */
:root[data-theme="black"] .art-chip--m { color: var(--masc); }
:root[data-theme="black"] .art-chip--f { color: var(--fem); }

/* Kennzahlen mit Bedeutung tragen ihre Farbe auch in der Kachel */
:root[data-theme="black"] .figures .is-lit,
:root[data-theme="black"] .figures .is-almost { background-image: linear-gradient(155deg, rgba(244, 196, 48, .2), rgba(244, 196, 48, 0) 62%); }
:root[data-theme="black"] .figures .is-ok { background-image: linear-gradient(155deg, rgba(95, 216, 164, .2), rgba(95, 216, 164, 0) 62%); }
:root[data-theme="black"] .figures .is-bad { background-image: linear-gradient(155deg, rgba(255, 138, 114, .2), rgba(255, 138, 114, 0) 62%); }

/* Die Leiste unten lässt den Inhalt durchscheinen */
@media (max-width: 959px) {
    :root[data-theme="black"] .nav {
        background: rgba(13, 14, 17, .9);
        -webkit-backdrop-filter: blur(22px) saturate(1.5);
        backdrop-filter: blur(22px) saturate(1.5);
        border-top-color: rgba(255, 255, 255, .09);
    }
}