/* ==========================================================================
   Lernportal – Cyber-HUD-Theme
   Dunkles, futuristisches Design: Glas-Panels, Neon-Akzente, dezente
   Animationen. Alle Farben zentral als Variablen; JS-Views nutzen dieselben
   Variablen (--panel-2, --sel-bg, --ok-bg, --err-bg) statt Hex-Werten.
   ========================================================================== */

:root {
    --bg: #070b14;
    --bg-2: #0b1120;
    --panel: rgba(15, 23, 42, 0.72);
    --panel-2: rgba(23, 33, 56, 0.85);
    --text: #dbe4f3;
    --muted: #8b98ad;
    --primary: #38e1ff;          /* Neon-Cyan */
    --primary-dark: #19b8d6;
    --accent: #a78bfa;           /* Violett */
    --border: rgba(120, 150, 200, 0.22);
    --border-glow: rgba(56, 225, 255, 0.35);
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --sel-bg: rgba(56, 225, 255, 0.12);
    --ok-bg: rgba(52, 211, 153, 0.14);
    --err-bg: rgba(248, 113, 113, 0.14);
    /* Gegenstueck zu --ok-bg/--err-bg fuer die Zwischenstufe „fast" (18.08.2026),
       abgeleitet aus --warning mit derselben Deckkraft wie die beiden anderen. */
    --warn-bg: rgba(251, 191, 36, 0.14);
    --radius: 12px;
    --glow: 0 0 24px rgba(56, 225, 255, 0.18);
    --font-head: "Segoe UI", system-ui, sans-serif;
    --font-mono: Consolas, "Cascadia Mono", monospace;
    /* Fach-Farbcodierung (IT-Design): jedes Fach hat eine feste Akzentfarbe.
       Vollstaendig belegt seit 13.08.2026: vorher hatten nur drei der sechs Faecher
       eine eigene Farbe, die anderen fielen auf Cyan zurueck und sahen gleich aus.
       In der Kachelübersicht ist Farbe das schnellste Erkennungsmerkmal. */
    --fach-dt: #38e1ff;      /* Digitaltechnik: Neon-Cyan */
    --fach-wiso: #fbbf24;    /* WiSo: Bernstein */
    --fach-ihk: #a78bfa;     /* IHK-AP1: Violett */
    --fach-netz: #2dd4bf;    /* Netzwerktechnik: Türkis */
    --fach-hardware: #fb923c;/* Hardware-Technik: Orange */
    --fach-windows: #60a5fa; /* Windows-Administration: Blau */
}

/* Zuordnung Fach-Slug auf Akzentfarbe. Global, weil Übersicht UND Fachseite sie
   brauchen; vorher stand sie im Inline-Style des Dashboards und war dort gefangen. */
.fach--digitaltechnik  { --fach: var(--fach-dt); }
.fach--wiso            { --fach: var(--fach-wiso); }
.fach--ihk-ap1         { --fach: var(--fach-ihk); }
.fach--netzwerktechnik { --fach: var(--fach-netz); }
.fach--hardware        { --fach: var(--fach-hardware); }
.fach--windows         { --fach: var(--fach-windows); }

* { box-sizing: border-box; }

html { scrollbar-color: #24344f var(--bg); }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

/* Inhalte nur visuell ausblenden: Anders als display:none bleibt der Text für
   Screenreader erreichbar. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- HUD-Hintergrund: Gitternetz + Farbnebel ------------------------------ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60rem 40rem at 85% -10%, rgba(56, 225, 255, 0.10), transparent 60%),
        radial-gradient(50rem 35rem at -10% 110%, rgba(167, 139, 250, 0.10), transparent 60%),
        linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(120, 150, 200, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 150, 200, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 100%);
    pointer-events: none;
}

/* --- Topbar --------------------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(7, 11, 20, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(56, 225, 255, 0.12);
    padding: 0.7rem 1.5rem;
}

.topbar .brand {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.topbar .brand::before {
    content: ">_";
    font-family: var(--font-mono);
    font-weight: 700;
    margin-right: 0.5rem;
    color: var(--primary);
    -webkit-text-fill-color: var(--primary);
    animation: pulse 2.4s ease-in-out infinite;
}

.topbar nav a {
    position: relative;
    margin: 0 0.75rem;
    padding: 0.3rem 0.1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    transition: color 0.2s ease;
}
.topbar nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: right 0.25s ease;
}
.topbar nav a:hover { color: var(--primary); }
.topbar nav a:hover::after { right: 0; }

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.link-button {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.25rem 0.9rem;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.link-button:hover { border-color: var(--border-glow); box-shadow: var(--glow); }

/* Eigener Einstieg für den unbegrenzten Rechentrainer. Bewusst ruhiger als das
   goldene Tagesrunden-Band: dauerhaft sichtbar, aber keine tägliche Hauptaktion. */
/* Rechentrainer-Zeile auf der Übersicht (25.08.2026). Ersetzt vier vollbreite
   Bänder durch eine Zeile; die Bandgestaltung darunter bleibt, weil die Fachseiten
   sie weiter verwenden. Mindesthöhe 2.75rem wie bei .melden-btn — auch diese Ziele
   müssen am Telefon treffbar sein. */
.trainer-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
}
.trainer-leiste-titel {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.75;
    margin-right: 0.15rem;
}
.trainer-pille {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: var(--radius);
    background: rgba(45, 212, 191, 0.055);
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.25;
    transition: border-color 0.22s ease, background 0.22s ease;
}
.trainer-pille:hover,
.trainer-pille:focus-visible {
    border-color: rgba(45, 212, 191, 0.6);
    background: rgba(45, 212, 191, 0.09);
}

.rechentrainer-band {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.9rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: var(--radius);
    background: rgba(45, 212, 191, 0.055);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.rechentrainer-band:hover,
.rechentrainer-band:focus-visible {
    border-color: rgba(45, 212, 191, 0.6);
    background: rgba(45, 212, 191, 0.09);
}
.rechentrainer-band-text { min-width: 0; overflow-wrap: anywhere; }
.rechentrainer-band-text b { color: var(--fach-netz); margin-right: 0.35rem; }
.rechentrainer-band-cta { margin-left: auto; color: var(--primary); font-size: 0.9rem; white-space: nowrap; }
.rechentrainer-band--fach { margin-bottom: 1.2rem; }

/* --- Layout & Typografie -------------------------------------------------- */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 4rem;
}

h1, h2, h3 { font-family: var(--font-head); color: #f1f6ff; line-height: 1.25; }
h1 {
    font-size: 1.9rem;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, #f1f6ff 30%, var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; letter-spacing: 0.02em; }

.subtitle { color: var(--muted); margin-top: -0.5rem; }

a { color: var(--primary); }

/* --- Karten (Glas-Panels) -------------------------------------------------- */
.card {
    position: relative;
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.4rem;
    animation: rise 0.45s ease both;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.card::before {
    content: "";
    position: absolute;
    top: 0; left: 1rem; right: 1rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
}
.card:hover { border-color: rgba(120, 150, 200, 0.4); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }

.card a.card-link { display: block; text-decoration: none; color: inherit; }

/* --- Themenblock-Listen ----------------------------------------------------- */
.themenblock-list, .aufgabe-list { list-style: none; padding: 0; }

/* Aktion "Skript 1:1 als Prüfung schreiben", je Skript einmal.
   Bewusst leiser als a.primary-btn: Der gefüllte Verlaufsknopf gehört der Klausur
   und kommt einmal je Karte vor — dieser hier 24-mal. Deshalb Umriss-Pille in der
   Sprache des restlichen Designs (999px, keine Unterstreichung) und derselbe
   Hover-Effekt wie bei .themenblock-list li: Rahmen leuchtet, Schein an. */
/* --- Zuordnungsaufgaben: anklickbare Auswahl -------------------------------------
   Markup kommt aus /assets/js/zuordnung.js, das alle drei Ansichten bedient.
   Die Legende trägt die Nummern, die auf den Knöpfen stehen — sie ist der
   Auswahlkasten des Prüfungsbogens. */
.zuordnung-legende {
    margin: 0 0 0.9rem;
    padding: 0.6rem 1rem 0.6rem 2.2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    font-size: 0.9rem;
}
.zuordnung-legende li { margin: 0.15rem 0; }
.zuordnung-legende li::marker { color: var(--primary); font-weight: 700; }

.zuordnung-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
}
.zuordnung-zeile:last-child { border-bottom: none; }
.zuordnung-links { flex: 1 1 12rem; }

.zuordnung-knoepfe { display: flex; gap: 0.35rem; flex: none; }
.zuordnung-knopf {
    min-width: 2.4rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.zuordnung-knopf:hover { border-color: var(--border-glow); color: var(--primary); }
.zuordnung-knopf:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Der gewaehlte Zustand haengt an aria-pressed, nicht nur an einer Klasse: So koennen
   Anzeige und vorgelesener Zustand nicht auseinanderlaufen. */
.zuordnung-knopf[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #04222b;
    font-weight: 700;
}

/* Rueckfall ohne Auswahlliste: dasselbe Feld wie bei Lueckentexten. */
.zuordnung-feld {
    display: block;
    width: 100%;
    margin: 0.2rem 0 0.7rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .zuordnung-knopf { transition: none; }
}

/* Fach-Symbol (Inline-SVG aus partials/fach-symbole.php). Farbe und Schein GLOBAL,
   nur die Groesse bleibt der jeweiligen Ansicht ueberlassen — vorher stand beides
   doppelt in zwei Inline-Bloecken. Genau diese Doppelung hat am 13.08. zweimal Schaden
   angerichtet (dreifach kopierte Lueckenfeld-Regeln, verlorene Skriptzeilen-Regeln beim
   Ersetzen einer Ansicht). Gemeinsames gehoert an eine Stelle. */
.fach-icon {
    flex: none;
    color: var(--fach, var(--primary));
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fach, var(--primary)) 55%, transparent));
}

/* Aufklappbare Skriptzeile auf der Fachseite.
   REGRESSION AUS f10207a, hier behoben: Diese Regeln standen im Inline-Stil des alten
   Dashboards. Beim Umbau auf Kacheln wurde dashboard.php ersetzt, die Zeilen zogen auf
   die Fachseite um — und verloren dabei ihr Aussehen. Sie standen danach als
   unformatierte Browser-Vorgabe da: eine Aufzaehlung mit winzigem Dreieck, an der
   niemand erkennt, dass sie sich oeffnet. Deshalb GLOBAL und nicht wieder inline.

   Gegenueber der alten Fassung ergaenzt: ein Hover- und Fokuszustand. Der fehlte, und
   genau er ist das Signal "hier kann man klicken" — ein statisches Dreieck allein
   traegt diese Aussage nicht. */
.skript-details {
    margin: 0.6rem 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.skript-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--panel-2);
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.skript-details > summary::-webkit-details-marker { display: none; }
.skript-details > summary::before {
    content: '▾';
    flex: none;
    display: inline-block;
    width: 1.1em;
    font-size: 1.05em;
    text-align: center;
    transition: transform 0.15s;
    color: var(--fach, var(--primary));
}
.skript-details:not([open]) > summary::before { transform: rotate(-90deg); }
.skript-details .skript-title { flex: 1; }
.skript-details .skript-count {
    flex: none;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    white-space: nowrap;
}

/* Der Hover-Zustand ist die eigentliche Verbesserung: Rahmen und Hintergrund heben
   sich, der Titel nimmt die Fachfarbe an, das Dreieck wandert leicht. Damit liest
   sich die Zeile beim Darueberfahren unmissverstaendlich als Schalter. */
.skript-details:hover,
.skript-details:focus-within { border-color: var(--fach, var(--border-glow)); }
.skript-details > summary:hover,
.skript-details > summary:focus-visible {
    background: var(--sel-bg);
    color: var(--fach, var(--primary));
    outline: none;
}
.skript-details > summary:hover::before { transform: translateX(2px); }
.skript-details:not([open]) > summary:hover::before { transform: rotate(-90deg) translateY(-2px); }
.skript-details > summary:focus-visible { box-shadow: inset 0 0 0 2px var(--fach, var(--primary)); }
.skript-details[open] > summary { border-bottom: 1px solid var(--border); }
.skript-details .themenblock-list { margin: 0; padding: 0.5rem 1rem; }

@media (prefers-reduced-motion: reduce) {
    .skript-details, .skript-details > summary, .skript-details > summary::before { transition: none; }
    .skript-details > summary:hover::before { transform: none; }
    .skript-details:not([open]) > summary:hover::before { transform: rotate(-90deg); }
}

.skript-pruefung-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0.9rem;
    padding: 0.36rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, background 0.22s ease;
}
.skript-pruefung-btn:hover,
.skript-pruefung-btn:focus-visible {
    border-color: var(--border-glow);
    box-shadow: var(--glow);
    background: var(--sel-bg);
    color: var(--primary);
    text-decoration: none;
}

/* Umschalter zwischen den beiden Aufgabenformen des Uebungsmodus. Der aktive
   Zustand haengt an aria-pressed, nicht an einer zusaetzlichen Klasse: So sind
   Anzeige und Screenreader-Zustand nicht getrennt pflegbar und koennen nicht
   auseinanderlaufen. */
.form-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
}

.form-wahl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, background 0.22s ease;
}

.form-wahl-btn:hover,
.form-wahl-btn:focus-visible {
    border-color: var(--border-glow);
    color: var(--primary);
    background: var(--sel-bg);
}

.form-wahl-btn[aria-pressed="true"] {
    border-color: var(--border-glow);
    box-shadow: var(--glow);
    background: var(--sel-bg);
    color: var(--primary);
    font-weight: 600;
}

.form-wahl-zahl {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--panel-2);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* Lernwege eines Themenblocks: fruehere Textzeile mit vier Links, die praktisch
   niemand als Navigation erkannt hat. Jetzt Flaechen mit Stueckzahlen - was es
   gibt, ist damit VOR dem Klick sichtbar. */
.lernwege {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 1.6rem;
}

.lernweg {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel-2);
    color: var(--text);
    text-decoration: none;
    line-height: 1.25;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.lernweg:hover,
.lernweg:focus-visible {
    border-color: var(--border-glow);
    box-shadow: var(--glow);
    transform: translateY(-1px);
    text-decoration: none;
}

.lernweg[aria-current="page"] {
    border-color: var(--border-glow);
    background: var(--sel-bg);
    font-weight: 600;
}

.lernweg-zahl {
    color: var(--muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* Weiterweg am Ende des Lernmodus zu den handelnden Aufgaben desselben
   Themenblocks. Absichtlich mit denselben .lernweg-Pillen wie die Navigation oben:
   Wer sie dort schon einmal gesehen hat, erkennt sie hier wieder. */
.weiterweg {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
}

.weiterweg h3 {
    margin: 0 0 0.4rem;
}

.weiterweg-liste {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Auf schmalen Anzeigen untereinander, damit der Erklaersatz nicht in eine
   zwei Zeichen breite Spalte gedraengt wird. */
.weiterweg-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.7rem;
}

.weiterweg-tut {
    color: var(--muted);
    font-size: 0.92rem;
}

.themenblock-list li {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.7rem;
    background: var(--panel-2);
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.themenblock-list li:hover {
    border-color: var(--border-glow);
    box-shadow: var(--glow);
    transform: translateX(4px);
}

.themenblock-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.2rem;
    text-decoration: none;
    color: var(--text);
}
.themenblock-list li a::before {
    content: "›";
    color: var(--primary);
    font-weight: 700;
    margin-right: 0.35rem;
}
.themenblock-list li a:hover { color: var(--primary); }

.badge {
    display: inline-block;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--sel-bg);
    border: 1px solid var(--border-glow);
    color: var(--primary);
    /* KEIN nowrap (Audit 16.08.2026): Am Telefon wurden 98 von 110 Themenblock-
       Plaketten hart abgeschnitten — und Lückentexte und Konsolenaufgaben standen
       IMMER im unsichtbaren Teil, also genau die Lernformen, die niemand fand.
       Eine umbrechende Plakette ist weniger hübsch als eine einzeilige, aber eine
       abgeschnittene ist Desinformation. */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* --- Formulare -------------------------------------------------------------- */
form.stacked label {
    display: block;
    font-weight: 600;
    margin: 1rem 0 0.3rem;
    color: #eef3fc;
    letter-spacing: 0.02em;
}

form.stacked input[type=text],
form.stacked input[type=email],
form.stacked input[type=password],
form.stacked textarea,
form.stacked select,
.answer-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: rgba(7, 11, 20, 0.6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
form.stacked input:focus, form.stacked textarea:focus,
form.stacked select:focus, .answer-input:focus {
    outline: none;
    border-color: var(--border-glow);
    box-shadow: var(--glow);
}
form.stacked select option { background: var(--bg-2); }

form.stacked textarea { min-height: 5rem; resize: vertical; }

/* --- Buttons ----------------------------------------------------------------- */
button.primary, a.primary-btn {
    display: inline-block;
    background: linear-gradient(115deg, var(--primary-dark), var(--primary) 55%, var(--accent));
    background-size: 160% 100%;
    color: #04121c;
    border: none;
    padding: 0.68rem 1.5rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
    margin-top: 1rem;
    transition: background-position 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
button.primary:hover, a.primary-btn:hover {
    background-position: 90% 0;
    box-shadow: 0 0 26px rgba(56, 225, 255, 0.35);
    transform: translateY(-1px);
}
button.primary:active, a.primary-btn:active { transform: translateY(0); }

button.secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.62rem 1.3rem;
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
    margin-top: 1rem;
    margin-left: 0.5rem;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
button.secondary:hover { border-color: var(--border-glow); color: var(--primary); box-shadow: var(--glow); }

button:disabled { opacity: 0.75; cursor: default; }

/* --- Fehler & Feedback -------------------------------------------------------- */
.error-box {
    background: var(--err-bg);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: var(--danger);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.feedback-correct { color: var(--success); font-weight: 700; text-shadow: 0 0 14px rgba(52, 211, 153, 0.35); }
.feedback-partial { color: var(--warning); font-weight: 700; }
.feedback-incorrect { color: var(--danger); font-weight: 700; }

.luecke-uebung-text { line-height: 2.2; }

/* Lueckenfelder in Uebung, Wiederholung UND Pruefung - eine Regel fuer alle drei.
   Vorher: `width: clamp(8rem, 18vw, 14rem)`, also mindestens 128 Pixel fuer eine
   Antwort wie "TCP", dazu line-height 2.8. Drei solcher Kaesten sprengten den Satz
   ueber mehrere Zeilen und liessen den Lueckentext auseinanderfallen.

   EINHEITLICH SCHMAL, NICHT NACH ANTWORTLAENGE BEMESSEN: Ein Feld, das genau so breit
   ist wie die Loesung, verraet deren Laenge - ein Hinweis, den es auf Papier nicht gibt.
   Alle Felder starten deshalb gleich breit.

   `field-sizing: content` laesst das Feld beim Tippen mitwachsen, wo der Browser es
   kennt (Chrome/Edge ab 123). Wo nicht, bleibt es bei der Startbreite und scrollt
   intern - also genau das bisherige Verhalten, nur schmaler. Kein JavaScript in drei
   Ansichten noetig. */
.luecke-uebung-input,
.luecke-input {
    display: inline-block;
    vertical-align: baseline;
    width: 9ch;
    min-width: 7ch;
    max-width: 100%;
    field-sizing: content;
    margin: 0 0.15rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
}
.luecke-uebung-input:focus,
.luecke-input:focus { outline: none; border-color: var(--border-glow); box-shadow: var(--glow); }
.luecke-uebung-input.is-correct { border-color: var(--success); }
.luecke-uebung-input.is-incorrect { border-color: var(--danger); }
.luecke-erwartet { color: var(--danger); font-size: 0.9rem; white-space: nowrap; }

/* Das Feld erinnert durch Schrift und Kontrast an eine Eingabeaufforderung, ohne
   eine echte Konsole nachzuspielen. So bleibt die Befehlswahl der Lerngegenstand. */
.konsolen-label {
    margin: 0 0 0.35rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.konsolen-situation { margin-top: 0; font-size: 1.05rem; }
.konsolen-aufgabe { margin: 0 0 1.4rem; font-size: 1.1rem; font-weight: 650; }
.konsolen-eingabe-label { display: block; margin-bottom: 0.45rem; font-weight: 600; }

.konsolen-eingabe-zeile {
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid rgba(93, 230, 177, 0.5);
    border-radius: 8px;
    background: #03080b;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.75);
    color: #b7f7ce;
    font-family: var(--font-mono);
    font-size: 1rem;
    overflow: hidden;
}

.konsolen-eingabe-zeile:focus-within {
    border-color: var(--success);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.75), 0 0 16px rgba(52, 211, 153, 0.2);
}

.konsolen-prompt { flex: 0 0 auto; padding: 0.8rem 0 0.8rem 0.95rem; font-weight: 700; }
.konsolen-eingabe {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.8rem 0.95rem 0.8rem 0.45rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}
.konsolen-eingabe:disabled { color: var(--muted); }
.konsolen-hinweis { margin: 0.55rem 0 1rem; }
.konsolen-feedback { margin-top: 1rem; }
.konsolen-ausgabe { margin: 1rem 0; }
.konsolen-ausgabe pre {
    max-width: 100%;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(3, 8, 11, 0.96);
    color: #d8f7e2;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre;
}

/* --- Inhaltsblöcke (Zusammenfassung) ------------------------------------------ */
.content-block { margin-bottom: 1.25rem; }

.content-block.definition_box, .content-block.example_box {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    padding: 1rem 1.2rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: inset 0 0 30px rgba(56, 225, 255, 0.04);
}
.content-block.example_box { border-left-color: var(--accent); }

.content-block.definition_box .caption, .content-block.example_box .caption {
    font-weight: 700;
    display: block;
    margin-bottom: 0.35rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--primary);
}
.content-block.example_box .caption { color: var(--accent); }

.content-block.situation { font-style: italic; color: var(--muted); }

/* LEHRTEXT ZUM NACHSCHLAGEN IM LERNMODUS (26.08.2026).
   57 Multiple-Choice-Fragen im Fach Windows fragen ausdruecklich "laut Text";
   der Lehrtext stand aber nur auf der Zusammenfassungsseite. Zugeklappt, damit
   die Antwort nicht daneben steht - aufklappbar, damit der Verweis nicht ins
   Leere zeigt. Uebernimmt bewusst die Optik von .skript-details, damit das
   Dreieck im Portal ueberall dasselbe bedeutet. */
.lehrtext-nachschlag {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color 0.15s;
}
.lehrtext-nachschlag > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--panel-2);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s, color 0.15s;
}
.lehrtext-nachschlag > summary::-webkit-details-marker { display: none; }
.lehrtext-nachschlag > summary::before {
    content: '▾';
    flex: none;
    display: inline-block;
    width: 1.1em;
    font-size: 1.05em;
    text-align: center;
    transition: transform 0.15s;
    color: var(--fach, var(--primary));
}
.lehrtext-nachschlag:not([open]) > summary::before { transform: rotate(-90deg); }
.lehrtext-nachschlag:hover,
.lehrtext-nachschlag:focus-within { border-color: var(--fach, var(--border-glow)); }
.lehrtext-nachschlag > summary:hover,
.lehrtext-nachschlag > summary:focus-visible {
    background: var(--sel-bg);
    color: var(--fach, var(--primary));
    outline: none;
}
.lehrtext-nachschlag > summary:focus-visible { box-shadow: inset 0 0 0 2px var(--fach, var(--primary)); }
.lehrtext-nachschlag[open] > summary { border-bottom: 1px solid var(--border); }
/* Die Karte drinnen bringt ihren eigenen Rahmen mit - hier waere er doppelt. */
.lehrtext-nachschlag > .card {
    border: 0;
    border-radius: 0;
    margin: 0;
    max-height: 26rem;
    overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
    .lehrtext-nachschlag,
    .lehrtext-nachschlag > summary,
    .lehrtext-nachschlag > summary::before { transition: none; }
}
.content-block.leitfrage {
    font-weight: 700;
    font-size: 1.08rem;
    color: #f1f6ff;
    padding-left: 0.9rem;
    border-left: 3px solid var(--accent);
}
.content-block.lernziel::before { content: "▸ "; color: var(--primary); }

/* --- Karteikarten --------------------------------------------------------------- */
.flashcard {
    position: relative;
    background: linear-gradient(160deg, rgba(23, 33, 56, 0.9), rgba(13, 19, 34, 0.9));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    font-size: 1.18rem;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.flashcard:hover {
    transform: perspective(900px) rotateX(2deg) translateY(-3px);
    border-color: var(--border-glow);
    box-shadow: var(--glow);
}
.flashcard .hint {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- Prüfung ---------------------------------------------------------------------- */
.timer {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary);
    text-shadow: 0 0 16px rgba(56, 225, 255, 0.45);
}
.timer--warnung { color: var(--warning); }
.timer--dringend { color: var(--danger); }

/* Dauerhafter Hinweisstreifen im Prüfungsbogen. Er bleibt im normalen
   Dokumentfluss, damit er beim Scrollen nicht den Bogen verdeckt. */
.pruefung-warnung {
    margin: 1rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 700;
}
.pruefung-warnung--warnung {
    background: color-mix(in srgb, var(--panel-2) 78%, var(--warning) 22%);
    border-left-color: var(--warning);
}
.pruefung-warnung--dringend {
    background: var(--err-bg);
    border-left-color: var(--danger);
}

.progress-list { list-style: none; padding: 0; }
.progress-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }

/* --- MC-Optionen (Lernmodus, JS-generiert) ------------------------------------------ */
.mc-option { transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.mc-option[aria-disabled="true"] { cursor: default !important; opacity: 0.75; }

/* DAS URTEILSZEICHEN DARF KEINE TEXTBREITE KOSTEN.
   Gemessen am 17.08.2026 bei 375 px: Als "✓ " noch vor dem Optionstext im Textfluss
   stand, wuchs die Option beim Antworten von 50 auf 78 px — die zwei Zeichen zwangen
   den Text in eine zweite Zeile. Der Bogen sprang damit genau in dem Moment nach
   unten, in dem der Lernende die Rueckmeldung darunter lesen wollte. Jetzt sitzt das
   Zeichen im ohnehin leeren rechten Innenrand: gleiche Hoehe vor und nach der Antwort. */
.mc-option { position: relative; }
.mc-option .urteil-zeichen {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}
.mc-option:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--border-glow) !important; box-shadow: var(--glow); }

/* --- Technische Tokens (Hex/Binär, via et()-Helper) ------------------------------------ */
code, code.tech {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: rgba(56, 225, 255, 0.08);
    border: 1px solid rgba(56, 225, 255, 0.18);
    border-radius: 5px;
    padding: 0.05em 0.4em;
    color: #9ceeff;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Diagramme (Inline-SVG) ----------------------------------------------------------- */
.diagram {
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    background: rgba(7, 11, 20, 0.55);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 340px;
    color: #cfe6ff; /* SVGs zeichnen mit currentColor */
}
.diagram svg { display: block; max-width: 100%; height: auto; }
.diagram figcaption {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.35;
}

/* --- Animationen ------------------------------------------------------------------------ */
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Gestaffeltes Einblenden der ersten Karten */
.card:nth-of-type(2) { animation-delay: 0.06s; }
.card:nth-of-type(3) { animation-delay: 0.12s; }
.card:nth-of-type(4) { animation-delay: 0.18s; }

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

/* --- Scrollbar (WebKit) ------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #24344f; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #2f4568; }

/* ==========================================================================
   FX-Paket (071426): A Schaltkreis · B Tilt · C Flip-Karten · D Terminal ·
   E Fortschritts-HUD · F 3D-Chip
   ========================================================================== */

/* --- A: Schaltkreis-Canvas (Dashboard + Login) --- */
#fx-circuit {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.55;
    pointer-events: none;
}

/* --- B: 3D-Tilt-Karten --- */
[data-tilt] { position: relative; will-change: transform; }
[data-tilt].tilt-ready { transition: transform 0.15s ease-out; }
[data-tilt] .tilt-shine {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(56, 225, 255, 0.10), transparent 55%);
    transition: opacity 0.25s ease;
}
[data-tilt]:hover .tilt-shine { opacity: 1; }

/* --- C: 3D-Flip-Karteikarten --- */
.flip-stage { perspective: 1100px; margin-bottom: 1rem; }
/* RASTER STATT ABSOLUTER POSITIONIERUNG (Audit 16.08.2026): Vorher lagen beide
   Kartenseiten mit position:absolute in einer Karte fester Hoehe — die Karte konnte
   nicht wachsen. Am Telefon (375 px) standen 500 von 1038 Antworttexten sichtbar
   AUSSERHALB der Karte, 291 davon ueber den Navigationsknoepfen: Ein Tipp auf
   "Zurueck" traf den ueberlaufenden Text und drehte die Karte um. Im Raster teilen
   sich beide Seiten dieselbe Zelle (grid-area 1/1), die hoehere bestimmt die
   Kartenhoehe, der Flip ueber rotateY bleibt unveraendert. min-height bleibt als
   Untergrenze, damit kurze Karten nicht zu Briefmarken schrumpfen. */
.flip-card {
    position: relative;
    display: grid;
    min-height: 14rem;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.4, 0.1, 0.2, 1);
    cursor: pointer;
}
.flip-card.flipped { transform: rotateY(180deg); }
.flip-card.no-anim { transition: none; }
.flip-face {
    grid-area: 1 / 1;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 2rem;
    text-align: center;
    font-size: 1.18rem;
}
.flip-face.front { background: linear-gradient(160deg, rgba(23, 33, 56, 0.95), rgba(13, 19, 34, 0.95)); }
.flip-face.back {
    transform: rotateY(180deg);
    background: linear-gradient(160deg, rgba(19, 40, 46, 0.95), rgba(13, 19, 34, 0.95));
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}
.flip-card:hover .flip-face { border-color: var(--border-glow); box-shadow: var(--glow); }
.flip-card:hover .flip-face.back { border-color: color-mix(in srgb, var(--success) 60%, var(--border)); }
.flip-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}
.flip-face.back .flip-label { color: var(--success); }
.flip-face .hint {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- D: Terminal-Auswertung --- */
.term {
    background: rgba(4, 7, 12, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.term-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--border);
    background: rgba(11, 16, 27, 0.9);
}
.term-head i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.term-head i:nth-child(1) { background: #ff5f57; }
.term-head i:nth-child(2) { background: #febc2e; }
.term-head i:nth-child(3) { background: #28c840; }
.term-head .term-title { margin-left: 0.6rem; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; }
.term-body { padding: 1rem 1.1rem; min-height: 9rem; }
.term-body .line { white-space: pre-wrap; min-height: 1.4em; }
.term-body .line.p { color: var(--primary); }
.term-body .line.ok { color: var(--success); font-weight: 700; }
.term-body .line.warn { color: var(--warning); }
.term-body .line.err { color: var(--danger); font-weight: 700; }
.term-skip {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border-radius: 6px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    margin-bottom: 1.4rem;
}
.term-skip:hover { color: var(--primary); border-color: var(--primary); }

/* --- E: Fortschritts-HUD --- */
.hud-card { padding: 1.2rem 1.4rem; }
.hud { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }
.hud-ring { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.hud-ring svg { transform: rotate(-90deg); display: block; }
.hud-ring .track { fill: none; stroke: rgba(23, 33, 56, 0.9); stroke-width: 9; }
.hud-ring .bar {
    fill: none;
    stroke: url(#hud-grad);
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.25, 1, 0.4, 1);
}
.hud-ring .mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hud-ring .pct {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgba(56, 225, 255, 0.4);
}
.hud-ring .lbl { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.hud-stats { flex: 1; display: flex; flex-direction: column; gap: 0.7rem; min-width: 230px; }
.xp-row { display: flex; align-items: center; gap: 0.7rem; }
.xp-row .k { width: 130px; color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-bar { flex: 1; height: 8px; background: rgba(23, 33, 56, 0.9); border-radius: 999px; overflow: hidden; }
.xp-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary));
    transition: width 1.2s cubic-bezier(0.25, 1, 0.4, 1);
}
.xp-bar.fach--digitaltechnik i { background: linear-gradient(90deg, #1898b8, var(--fach-dt)); }
.xp-bar.fach--wiso i { background: linear-gradient(90deg, #d99a0b, var(--fach-wiso)); }
.xp-bar.fach--ihk-ap1 i { background: linear-gradient(90deg, #7c5cd6, var(--fach-ihk)); }
.xp-row .val {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    width: 3.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.streak {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--warning);
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.08);
    border-radius: 999px;
    padding: 0.22rem 0.8rem;
    width: fit-content;
}

/* --- F: 3D-Chip (Login) --- */
.chip-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    perspective: 800px;
    margin-top: 2.5rem;
    position: relative;
}
.chip3d {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: chip-spin 10s linear infinite;
}
.chip-stage:hover .chip3d { animation-play-state: paused; }
@keyframes chip-spin {
    from { transform: rotateX(58deg) rotateZ(0deg); }
    to   { transform: rotateX(58deg) rotateZ(360deg); }
}
.chip-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(145deg, #182238, #0d1424);
    border: 1px solid rgba(56, 225, 255, 0.55);
    box-shadow: 0 0 24px rgba(56, 225, 255, 0.25), inset 0 0 18px rgba(56, 225, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.chip-face.top { transform: translateZ(12px); }
.chip-face.bottom { transform: translateZ(-12px); }
.chip3d .pin { position: absolute; width: 6px; height: 22px; background: linear-gradient(180deg, #3a465e, #202a40); border-radius: 2px; }
.chip3d .pin.n { top: -18px; }
.chip3d .pin.s { bottom: -18px; }
.chip3d .pin.w { left: -18px; width: 22px; height: 6px; }
.chip3d .pin.e { right: -18px; width: 22px; height: 6px; }
.chip-glow {
    position: absolute;
    width: 170px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(56, 225, 255, 0.20), transparent 70%);
    transform: translateY(80px);
    filter: blur(4px);
}

/* Reduzierte Bewegung: Chip statisch statt rotierend */
@media (prefers-reduced-motion: reduce) {
    .chip3d { transform: rotateX(58deg) rotateZ(30deg); }
}

/* --- KI-Chat-Widget --------------------------------------------------------------- */
.ki-chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80; }

.ki-chat-toggle {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 1px solid var(--border-glow);
    background: linear-gradient(135deg, var(--primary-dark), var(--accent));
    box-shadow: var(--glow);
    cursor: pointer;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.ki-chat-toggle:hover { transform: scale(1.06); }

/* OHNE DIESE ZEILE IST DAS PANEL UNSCHLIESSBAR (gefunden 16.08.2026 bei der
   375-px-Messung): chat.js steuert die Sichtbarkeit ueber das hidden-Attribut,
   aber dessen Browser-Regel (display:none) ist eine UA-Regel — das display:flex
   der Klasse unten GEWINNT dagegen immer. Folge: Das Panel stand seit dem 15.07.
   auf jeder Seite offen, verdeckte am Telefon Karteikarte und Knoepfe, und der
   Schliessen-Knopf setzte ein Attribut ohne jede Wirkung. */
.ki-chat-panel[hidden] { display: none; }

.ki-chat-panel {
    position: absolute;
    right: 0;
    bottom: 3.9rem;
    width: min(360px, 90vw);
    max-height: min(520px, 70vh);
    display: flex;
    flex-direction: column;
    background: var(--panel-2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.ki-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.9rem;
    background: rgba(7, 11, 20, 0.6);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 700;
    color: #eef3fc;
}

.ki-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ki-chat-msg {
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-wrap;
    max-width: 90%;
}
.ki-chat-msg-assistant { background: var(--sel-bg); border: 1px solid var(--border-glow); align-self: flex-start; }
.ki-chat-msg-user { background: rgba(120, 150, 200, 0.12); border: 1px solid var(--border); align-self: flex-end; }
.ki-chat-msg-error { background: var(--err-bg); border: 1px solid rgba(248, 113, 113, 0.4); color: var(--danger); }

.ki-chat-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.7rem;
    border-top: 1px solid var(--border);
    background: rgba(7, 11, 20, 0.5);
}
.ki-chat-form textarea {
    flex: 1;
    resize: none;
    min-height: 2.4rem;
    max-height: 6rem;
    padding: 0.5rem 0.65rem;
    background: rgba(7, 11, 20, 0.6);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
}
.ki-chat-form textarea:focus { outline: none; border-color: var(--border-glow); box-shadow: var(--glow); }
.ki-chat-form button.primary { margin: 0; padding: 0.5rem 1rem; }

@media (max-width: 480px) {
    .ki-chat-panel { position: fixed; right: 0.6rem; left: 0.6rem; bottom: 4.4rem; width: auto; }
}

/* Reihenfolge-Trainer: reine Antipp-Bedienung, grosse Ziele fuer schmale Displays. */
.reihenfolge-trainer { max-width: 860px; }
.reihenfolge-label { margin: 0.9rem 0 0.2rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.reihenfolge-situation, .reihenfolge-aufgabe { font-size: 1.05rem; line-height: 1.55; }
.reihenfolge-aufgabe { font-weight: 700; }
.reihenfolge-schritte { display: grid; gap: 0.65rem; margin: 1.1rem 0 0.65rem; }
.reihenfolge-schritt { display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem; padding: 0.65rem 0.8rem; border: 2px solid var(--border); border-radius: 0.75rem; background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer; }
.reihenfolge-schritt:hover, .reihenfolge-schritt:focus-visible { border-color: var(--primary); }
.reihenfolge-schritt.ist-gewaehlt { border-color: var(--primary); background: var(--sel-bg); }
.reihenfolge-schritt.ist-richtig { border-color: var(--success); background: var(--ok-bg); }
.reihenfolge-schritt.ist-falsch { border-color: var(--danger); background: var(--err-bg); }
.reihenfolge-nummer { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--bg); font-weight: 800; }
.reihenfolge-schritt.ist-gewaehlt .reihenfolge-nummer { background: var(--primary); color: #fff; }
.reihenfolge-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.reihenfolge-feedback { margin-top: 1rem; }
.reihenfolge-feedback ol { padding-left: 1.5rem; }
.reihenfolge-feedback li { margin-bottom: 0.35rem; }

/* Klickpfad: stilisiertes Windows-Fenster ohne Bildmaterial. Alle interaktiven
   Zeilen bleiben auch auf schmalen Telefonen mindestens 44 px hoch. */
body.klickpfad-seite { width: 100vw; overflow-x: clip; }
.klickpfad-trainer { width: 100%; max-width: 860px; min-width: 0; overflow: hidden; }
.klickpfad-label { margin: 0.9rem 0 0.2rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.klickpfad-situation, .klickpfad-aufgabe { margin-top: 0.2rem; font-size: 1.05rem; line-height: 1.55; overflow-wrap: anywhere; }
.klickpfad-aufgabe { font-weight: 700; }
.klickpfad-aufgabenstand { margin-top: 0; }
.klickpfad-fortschritt { display: grid; gap: 0.35rem; margin: 1rem 0 0.7rem; min-width: 0; }
.klickpfad-pfad { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.klickpfad-fenster { width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 0.85rem; background: var(--panel-2); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.klickpfad-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.9rem; padding: 0.65rem 0.85rem; background: color-mix(in srgb, var(--panel-2) 72%, var(--primary) 28%); border-bottom: 1px solid var(--border); font-weight: 800; overflow-wrap: anywhere; }
.klickpfad-fensterpunkte { display: flex; flex: 0 0 auto; gap: 0.3rem; }
.klickpfad-fensterpunkte i { display: block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--muted); opacity: 0.75; }
.klickpfad-hinweis { margin: 0; padding: 0.8rem 0.85rem; border-bottom: 1px solid var(--border); color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.klickpfad-elemente { display: grid; gap: 0.55rem; padding: 0.75rem; min-width: 0; }
.klickpfad-element { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; min-width: 0; min-height: 3rem; padding: 0.7rem 0.8rem; border: 2px solid var(--border); border-radius: 0.65rem; background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; line-height: 1.35; text-align: left; cursor: pointer; }
.klickpfad-element span { min-width: 0; overflow-wrap: anywhere; }
.klickpfad-element b { flex: 0 0 auto; font-size: 1.25rem; }
.klickpfad-element:hover, .klickpfad-element:focus-visible { border-color: var(--primary); }
.klickpfad-element.ist-falsch { border-color: var(--danger); background: var(--err-bg); }
.klickpfad-element.ist-richtig { border-color: var(--success); background: var(--ok-bg); }
.klickpfad-element:disabled { cursor: default; opacity: 0.86; }
.klickpfad-schrittfeedback { padding: 0 0.85rem 0.8rem; overflow-wrap: anywhere; }
.klickpfad-schrittfeedback:empty { display: none; }
.klickpfad-schrittfeedback p { margin: 0; }
.klickpfad-ergebnis { margin-top: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.klickpfad-ergebnis[hidden], .klickpfad-weiter[hidden] { display: none; }
.klickpfad-weiter { margin-top: 0.8rem; min-height: 2.75rem; font-size: 1rem; }

/* --- Lernkasten (Leitner-Stufen auf der Statistikseite, 23.08.2026) ----------------
   Ein Raster statt eines Diagramms: Name, Schiene, Zahl, Abstand. Bei 375 px rutscht
   der Abstandstext in eine eigene Zeile, statt die Schiene zu zerquetschen. */
.lernkasten { display: grid; gap: 0.5rem; margin: 0.9rem 0; }
.kasten-stufe { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 3rem; grid-template-areas: "name schiene zahl" ". abstand abstand"; align-items: center; gap: 0.15rem 0.6rem; }
.kasten-name { grid-area: name; font-size: 0.82rem; font-weight: 700; color: var(--text); }
.kasten-schiene { grid-area: schiene; display: block; min-width: 0; height: 0.7rem; border-radius: 999px; background: rgba(120, 150, 200, 0.18); overflow: hidden; }
.kasten-schiene i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.kasten-zahl { grid-area: zahl; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.kasten-abstand { grid-area: abstand; font-size: 0.72rem; color: var(--muted); }
/* Eine leere Stufe wird leiser, aber NICHT ausgeblendet: Dass Stufe 5 leer ist, ist
   die eigentliche Aussage für jemanden, der noch am Anfang steht. */
.kasten-stufe.ist-leer .kasten-name, .kasten-stufe.ist-leer .kasten-zahl { color: var(--muted); font-weight: 600; }

@media (max-width: 420px) {
    .kasten-stufe { grid-template-columns: 3.9rem minmax(0, 1fr) 2.4rem; }
    .kasten-name { font-size: 0.76rem; }
}

/* --- Terminal-Sitzung (achte Lernform, 23.08.2026) ---------------------------------
   Bewusst wie ein Terminal und nicht wie ein Formular: schwarzer Grund, Festbreiten-
   schrift, das Protokoll bleibt stehen. `font-size: 16px` im Eingabefeld ist Pflicht
   und keine Geschmacksfrage — darunter zoomt iOS beim Fokus hinein und der Nutzer
   sieht seine eigene Eingabe nicht mehr (derselbe Grund wie im Rechentrainer). */
.sitzung-trainer { width: 100%; max-width: 860px; min-width: 0; overflow: hidden; }
.sitzung-titel { margin: 0.2rem 0 0; font-size: 1.15rem; line-height: 1.4; overflow-wrap: anywhere; }
.sitzung-label { margin: 0.9rem 0 0.2rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sitzung-situation, .sitzung-auftrag { margin-top: 0.2rem; font-size: 1.05rem; line-height: 1.55; overflow-wrap: anywhere; }
.sitzung-auftrag { font-weight: 700; }
.sitzung-stand { margin-top: 0; }
.sitzung-fortschritt { display: grid; gap: 0.35rem; margin: 1rem 0 0.7rem; min-width: 0; }
.sitzung-ziel { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.sitzung-terminal { width: 100%; min-width: 0; max-height: 26rem; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); border-radius: 0.85rem; background: #05070c; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
/* DAS PROTOKOLL SCROLLT SEITWAERTS, ES BRICHT NICHT UM (23.08.2026).
   Vorher stand hier `white-space: pre-wrap` mit `overflow-wrap: anywhere`. Auf
   dem Telefon (375 px) passen rund 40 Zeichen in eine Zeile — eine Zeile der
   Windows-Wegtabelle ist 75 Zeichen lang. Sie brach also um, und damit standen
   die Spalten nicht mehr untereinander: Netzwerkziel, Maske, Gateway und Metrik
   liessen sich nicht mehr zuordnen, die Tabelle war unlesbar. Ein Terminal
   bricht auch nicht um, es scrollt. Genau das tut das Protokoll jetzt. */
.sitzung-protokoll { margin: 0; padding: 0.85rem 0.85rem 0; min-width: 0; color: var(--text); font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.5; white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; }
.sitzung-protokoll:empty { padding: 0; }
.sitzung-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem 0.85rem; min-width: 0; }
.sitzung-prompt { flex: 0 0 auto; color: var(--primary); font-family: var(--font-mono); font-size: 0.92rem; overflow-wrap: anywhere; }
.sitzung-eingabe { flex: 1 1 12rem; min-width: 0; max-width: 100%; padding: 0.55rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 16px; }
.sitzung-eingabe:focus-visible { border-color: var(--primary); outline: none; }
.sitzung-eingabe:disabled { opacity: 0.7; }
.sitzung-senden { flex: 0 0 auto; min-height: 2.6rem; }
/* ERKLAERUNGEN BEHALTEN IHRE ABSAETZE.
   Die langen Erklaertexte im Inhalt sind mit Leerzeilen gegliedert („ERSTENS …
   ZWEITENS …", Aufzaehlungen mit •). Bis zum 23.08.2026 landeten sie in einem
   <p> mit white-space: normal — die Leerzeilen fielen ersatzlos weg, und aus
   einer gegliederten Begruendung wurde eine Textwand: 1203 px Hoehe auf einem
   375 px breiten Telefon, ohne einen einzigen Absatz. Gefunden hat das nur der
   Browser; der Selbsttest liest HTML und sieht keine Umbrueche.
   pre-line ist hier richtig und pre falsch: Zeilenumbrueche bleiben, aber der
   Text bricht weiter am Rand um, statt seitwaerts zu scrollen. */
.erklaerungstext { white-space: pre-line; }
.sitzung-rueckmeldung { margin: 0.9rem 0 0; padding: 0.7rem 0.8rem; border-left: 3px solid var(--border); border-radius: 0.4rem; line-height: 1.5; overflow-wrap: anywhere; }
.sitzung-rueckmeldung.ist-richtig { border-color: var(--success); background: var(--ok-bg); }
.sitzung-rueckmeldung.ist-fast { border-color: var(--warning); background: var(--warn-bg); }
.sitzung-rueckmeldung.ist-zu-frueh { border-color: var(--accent); background: var(--sel-bg); }
.sitzung-rueckmeldung.ist-falsch, .sitzung-rueckmeldung.ist-fehler { border-color: var(--danger); background: var(--err-bg); }
.sitzung-ergebnis { margin-top: 1rem; padding: 0.8rem; border-radius: 0.6rem; line-height: 1.55; overflow-wrap: anywhere; }
.sitzung-ergebnis.ist-richtig { background: var(--ok-bg); }
.sitzung-ergebnis.ist-fast { background: var(--warn-bg); }
.sitzung-ergebnis h3 { margin: 0 0 0.4rem; }
.sitzung-ergebnis p { margin: 0; }
.sitzung-rueckmeldung[hidden], .sitzung-ergebnis[hidden], .sitzung-weiter[hidden] { display: none; }
.sitzung-weiter { margin-top: 0.8rem; min-height: 2.75rem; font-size: 1rem; }

@media (max-width: 560px) {
    .reihenfolge-schritt { min-height: 3.6rem; }
    .reihenfolge-aktionen > button { flex: 1 1 8rem; }
    .klickpfad-trainer { padding: 0.85rem; }
    .klickpfad-elemente { padding: 0.6rem; }
    .klickpfad-element { min-height: 3.25rem; padding: 0.7rem; }
    .sitzung-trainer { padding: 0.85rem; }
    .sitzung-terminal { max-height: 20rem; }
    .sitzung-protokoll { font-size: 0.85rem; padding: 0.6rem 0.6rem 0; }
    .sitzung-zeile { padding: 0.55rem 0.6rem 0.7rem; }
    /* Der Sendeknopf darf am Telefon eine eigene Zeile bekommen, statt das
       Eingabefeld auf Briefmarkenbreite zu quetschen. */
    .sitzung-eingabe { flex: 1 1 100%; }
    .sitzung-senden { flex: 1 1 100%; }
}

/* --- Handy-Durchgang (Audit 16.08.2026) ---------------------------------------------
   Die Klasse lernt ueberwiegend am Telefon; gemessen wurde bei 375 px Fensterbreite.
   Gemeinsame Ursache fast aller Funde: Masse und Farben standen je Element neu statt
   in einer gemeinsamen Klasse, und niemand hat die Seiten je bei 375 px gegengeprueft. */

/* Vorher nur im <style>-Block des Dashboards definiert — die Tagesrunde benutzt
   dieselbe Klasse und bekam einen ungestalteten 21-px-Systemknopf. */
.sekundaer-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    color: var(--text);
    text-decoration: none;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.sekundaer-btn:hover { border-color: var(--border-glow); }

/* Warnung, wenn die Anmeldung abgelaufen ist (assets/js/sitzung.js). Sie muss AUFFAELLIG
   und dauerhaft sichtbar sein: Sie erscheint genau dann, wenn im Textfeld eine
   halbfertige Antwort steht, die beim naechsten Klick verloren gehen wuerde. Unten
   angeheftet statt oben, damit sie auch bei langen Seiten ohne Scrollen im Bild ist. */
.sitzung-warnung {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    padding: 0.85rem 1.1rem;
    background: var(--err-bg, #3a1a13);
    border-top: 2px solid var(--danger);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}
.sitzung-warnung a { color: var(--primary); font-weight: 600; }

/* Der einzige Rueckkanal der Klasse: vorher 27 px hoch (kleinstes Antippziel neben
   der Filter-Auswahlbox). Bewusst weiter zurueckhaltend gestaltet (opacity), aber
   gross genug fuer einen Daumen. */
.melden-btn {
    background: none;
    border: 1px solid var(--border);
    color: inherit;
    border-radius: 6px;
    padding: 0.55rem 0.9rem;
    min-height: 2.75rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0.7;
}
.melden-btn:hover, .melden-btn:focus-visible { opacity: 1; border-color: var(--border-glow); }

/* Meldegruende (seit 24.08.2026). Vorher war das Formular einfeldrig und als
   „(optional)" beschriftet — vier von fuenf Meldungen kamen dadurch leer an.
   Die Knoepfe uebernehmen die Mindestgroesse von .melden-btn: Der Rueckkanal der
   Klasse muss am Telefon treffbar bleiben (Audit 16.08.2026). */
.melden-frage {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.melden-gruende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.melden-grund {
    background: none;
    border: 1px solid var(--border);
    color: inherit;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    min-height: 2.75rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}
.melden-grund:hover, .melden-grund:focus-visible { border-color: var(--border-glow); }
.melden-grund.gewaehlt {
    border-color: var(--accent, var(--border-glow));
    box-shadow: inset 0 0 0 1px var(--accent, var(--border-glow));
    font-weight: 600;
}
.melden-text.pflicht { border-color: var(--accent, var(--border-glow)); }
.melden-send[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Tastatur-Hinweise ("Leertaste", "Pfeiltasten") auf Geraeten ohne Mauszeiger
   ausblenden: Dort gibt es die Tasten nicht, und der Text kostete 55 der 224 px
   Kartenhoehe. hover:none trifft Telefone und Tablets, nicht den Desktop. */
@media (hover: none) {
    .nur-tastatur { display: none; }
}

@media (max-width: 700px) {
    /* Die Lernwege-Leiste brach in vier Reihen um (178 px) und schob die erste
       Frage unter die Falz. Einzeilig und seitlich wischbar: Alle Wege bleiben
       erreichbar, und die Aufgabe beginnt im ersten Bildschirm. */
    .lernwege {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.4rem;
        margin-bottom: 1rem;
    }
    .lernweg { flex: 0 0 auto; white-space: nowrap; }

    /* 1.9 rem Ueberschrift plus Untertitel drueckten die Aufgabe zusaetzlich nach
       unten — am Telefon traegt die Ueberschrift keine Navigation, sie darf klein sein. */
    h1 { font-size: 1.35rem; }

    /* Themenblock-Zeile: Titel und Plakette nebeneinander quetschten den Titel auf
       bis zu acht Zeilen. Untereinander hat jede Angabe die volle Breite. */
    .themenblock-list li a { flex-direction: column; align-items: flex-start; gap: 0.45rem; }

    /* Die Topbar stand mit Marke, Navigation und Nutzerzeile in EINER Zeile und
       machte die Seite 520 px breit — jede Seite begann seitlich scrollbar.
       Umbruch erlaubt; die Navigation wischt seitlich statt zu ueberlaufen. */
    .topbar { flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.6rem 1rem; }
    .topbar nav {
        order: 3;
        flex: 1 1 100%;
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        white-space: nowrap;
    }
    .topbar nav a:first-child { margin-left: 0; }
}

/* --- Handelnd üben (02.09.2026) ---------------------------------------------------
   Eine Zeile auf der Übersicht, eine Seite /handeln, direkte Links auf der Fachseite
   und ein Trenner in der Lernwege-Zeile. Gemeinsame Farbe für alles, was man TUT:
   das Grün des Erfolgs, damit die Gruppe auf jeder Seite wiedererkennbar ist. */
.handeln-pille {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(74, 222, 128, 0.32);
    border-radius: var(--radius);
    background: rgba(74, 222, 128, 0.06);
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.25;
    transition: border-color 0.22s ease, background 0.22s ease;
}
.handeln-pille b { color: var(--success); font-weight: 700; }
.handeln-pille:hover,
.handeln-pille:focus-visible {
    border-color: rgba(74, 222, 128, 0.7);
    background: rgba(74, 222, 128, 0.11);
}
.handeln-pille-alle { border-style: dashed; }

.handeln-summen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.7rem;
    margin: 0 0 1.1rem;
}
.handeln-summe {
    border: 1px solid rgba(74, 222, 128, 0.28);
    border-radius: var(--radius);
    background: rgba(74, 222, 128, 0.05);
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.handeln-summe b { font-size: 1.5rem; color: var(--success); line-height: 1.1; }
.handeln-summe span { font-weight: 600; }
.handeln-summe small { opacity: 0.7; line-height: 1.35; }
.handeln-summe.leer { opacity: 0.45; }

.handeln-fach h2 a { color: var(--text); text-decoration: none; }
.handeln-fach h2 a:hover { color: var(--primary); }
.handeln-liste { list-style: none; margin: 0; padding: 0; }
.handeln-skript {
    margin: 0.7rem 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.65;
}
.handeln-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.9rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
}
.handeln-block-titel { color: var(--text); text-decoration: none; }
.handeln-block-titel:hover { color: var(--primary); }
.handeln-links { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Direkte Links unter jedem Themenblock der Fachseite. Die Regel für
   `.themenblock-list li a` (Flex-Zeile mit „›") gilt hier ausdrücklich NICHT. */
.tb-handeln {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1.2rem 0.75rem 2.2rem;
    margin-top: -0.35rem;
}
.tb-handeln-titel { font-size: 0.78rem; font-weight: 600; opacity: 0.7; margin-right: 0.15rem; }
.themenblock-list li .tb-handeln a,
.tb-handeln-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(74, 222, 128, 0.32);
    border-radius: 999px;
    background: rgba(74, 222, 128, 0.06);
    color: var(--text);
    font-size: 0.8rem;
    text-decoration: none;
    transition: border-color 0.22s ease, background 0.22s ease;
}
.themenblock-list li .tb-handeln a::before { content: none; margin: 0; }
.themenblock-list li .tb-handeln a:hover,
.tb-handeln-link:hover,
.tb-handeln-link:focus-visible {
    color: var(--text);
    border-color: rgba(74, 222, 128, 0.7);
    background: rgba(74, 222, 128, 0.12);
}
.tb-handeln-link b { color: var(--success); }

/* Lernwege-Zeile: Trenner und Farbe der handelnden Wege. */
.lernwege-trenner {
    align-self: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-left: 0.35rem;
}
.lernweg-handelnd { border-color: rgba(74, 222, 128, 0.35); }
.lernweg-handelnd:hover,
.lernweg-handelnd:focus-visible { border-color: rgba(74, 222, 128, 0.75); }
.lernweg-handelnd .lernweg-zahl { color: var(--success); }

/* --- Klickbare Netzpläne (02.09.2026) ---------------------------------------------
   Ein Klickpfad-Schritt kann eine Diagrams-Szene mitbringen; die Geräte darin sind
   Schaltflächen. Zustände wie bei den Listenelementen: klickbar, richtig, falsch. */
.diagram-netz { max-width: 100%; }
.klickpfad-grafik { padding: 0.5rem 0.6rem 0; border-bottom: 1px solid var(--border); }
.klickpfad-grafik[hidden] { display: none; }
.klickpfad-grafik .diagram { margin: 0 0 0.5rem; padding: 0.4rem 0.4rem 0.2rem; border: 0; background: transparent; }
.klickpfad-grafik .diagram figcaption { display: none; }
.klickpfad-elemente.mit-grafik { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.klickpfad-elemente.mit-grafik .klickpfad-element { min-height: 2.6rem; padding: 0.5rem 0.7rem; font-size: 0.92rem; }
.netz-treffer { stroke: none !important; }
.netz-verbindung .netz-treffer { fill: none !important; stroke: transparent !important; }
.netz-knoten.ist-klickbar { cursor: pointer; outline: none; }
.netz-knoten.ist-klickbar text { pointer-events: none; }
.netz-knoten.ist-klickbar:hover rect:not(.netz-treffer),
.netz-knoten.ist-klickbar:hover circle,
.netz-knoten.ist-klickbar:hover ellipse,
.netz-knoten.ist-klickbar:hover line:not(.netz-treffer),
.netz-knoten.ist-klickbar:focus-visible rect:not(.netz-treffer),
.netz-knoten.ist-klickbar:focus-visible circle,
.netz-knoten.ist-klickbar:focus-visible ellipse,
.netz-knoten.ist-klickbar:focus-visible line:not(.netz-treffer) { stroke: var(--primary); stroke-width: 3; }
.netz-knoten.ist-klickbar:hover .netz-treffer,
.netz-knoten.ist-klickbar:focus-visible .netz-treffer { fill: rgba(56, 225, 255, 0.10); }
.netz-verbindung.ist-klickbar:hover .netz-treffer,
.netz-verbindung.ist-klickbar:focus-visible .netz-treffer { stroke: rgba(56, 225, 255, 0.18) !important; }
.netz-knoten.ist-richtig rect:not(.netz-treffer), .netz-knoten.ist-richtig circle, .netz-knoten.ist-richtig ellipse,
.netz-knoten.ist-richtig line:not(.netz-treffer) { stroke: var(--success); stroke-width: 3; }
.netz-knoten.ist-richtig .netz-treffer { fill: rgba(52, 211, 153, 0.14); }
.netz-verbindung.ist-richtig .netz-treffer { stroke: rgba(52, 211, 153, 0.22) !important; }
.netz-knoten.ist-richtig text { fill: var(--success); }
.netz-knoten.ist-falsch rect:not(.netz-treffer), .netz-knoten.ist-falsch circle, .netz-knoten.ist-falsch ellipse,
.netz-knoten.ist-falsch line:not(.netz-treffer) { stroke: var(--danger); stroke-dasharray: 4 3; }
.netz-knoten.ist-falsch .netz-treffer { fill: rgba(248, 113, 113, 0.10); }
.netz-verbindung.ist-falsch .netz-treffer { stroke: rgba(248, 113, 113, 0.18) !important; }
.netz-knoten.ist-falsch text { fill: var(--danger); opacity: 0.85; }

/* --- Terminal mit Systemgesicht (02.09.2026) --------------------------------------
   Kopfzeile wie ein echtes Terminalfenster: drei Punkte, der Rechner, das System.
   Farben je System, damit Windows, Linux (SSH), PowerShell und IOS auf einen Blick
   unterscheidbar sind — und der SSH-Sprung sichtbar wird. */
.sitzung-kopf { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); font-family: var(--font-mono); font-size: 0.8rem; color: rgba(255, 255, 255, 0.78); min-width: 0; }
.sitzung-kopf-punkte { display: flex; flex: 0 0 auto; gap: 0.3rem; }
.sitzung-kopf-punkte i { display: block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff5f57; }
.sitzung-kopf-punkte i:nth-child(2) { background: #febc2e; }
.sitzung-kopf-punkte i:nth-child(3) { background: #28c840; }
.sitzung-kopf-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.sitzung-kopf-system { flex: 0 0 auto; padding: 0.1rem 0.55rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.7rem; opacity: 0.85; white-space: nowrap; }
.sitzung-terminal.system-windows { background: #0c0c0c; }
.sitzung-terminal.system-windows .sitzung-protokoll, .sitzung-terminal.system-windows .sitzung-prompt { color: #cccccc; }
.sitzung-terminal.system-windows .sitzung-kopf-system { color: #9cdcfe; }
.sitzung-terminal.system-powershell { background: #012456; }
.sitzung-terminal.system-powershell .sitzung-protokoll, .sitzung-terminal.system-powershell .sitzung-prompt { color: #eeedf0; }
.sitzung-terminal.system-powershell .sitzung-kopf-system { color: #ffd866; }
.sitzung-terminal.system-linux { background: #1c1b22; }
.sitzung-terminal.system-linux .sitzung-protokoll { color: #e6e6e6; }
.sitzung-terminal.system-linux .sitzung-prompt { color: #8ae234; }
.sitzung-terminal.system-linux .sitzung-kopf-system { color: #8ae234; }
.sitzung-terminal.system-ios { background: #0b1220; }
.sitzung-terminal.system-ios .sitzung-protokoll { color: #d8dee9; }
.sitzung-terminal.system-ios .sitzung-prompt { color: #fbbf24; }
.sitzung-terminal.system-ios .sitzung-kopf-system { color: #fbbf24; }
.sitzung-terminal .sitzung-eingabe { background: rgba(0, 0, 0, 0.35); color: inherit; border-color: rgba(255, 255, 255, 0.14); }
.sitzung-terminal.system-linux .sitzung-eingabe { color: #e6e6e6; }
.sitzung-terminal.system-ios .sitzung-eingabe { color: #d8dee9; }
.sitzung-terminal.system-windows .sitzung-eingabe, .sitzung-terminal.system-powershell .sitzung-eingabe { color: #f2f2f2; }

/* Konsolen-Trainer: Linux-Prompt in Grün statt Windows-Weiß. */
.konsolen-prompt.ist-linux { color: #8ae234; }

/* Fusszeile mit Rechtsseiten (05.09.2026) — erscheint erst nach Freigabe durch die Verwaltung. */
.fusszeile {
    max-width: 1100px;
    margin: 2rem auto 1.5rem;
    padding: 0.8rem 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--muted);
}
.fusszeile a { color: var(--muted); }
.fusszeile a:hover { color: var(--text); }

/* Rechtsseiten: ruhige Textspalte. */
.recht h2 { font-size: 1.1rem; margin: 1.4rem 0 0.4rem; }
.recht h3 { font-size: 1rem; margin: 1rem 0 0.3rem; }
.recht p, .recht li { line-height: 1.55; }

/* Navigationslinks nicht umbrechen: „Mein Bereich" stand sonst auf zwei Zeilen (05.09.2026). */
.topbar nav a { white-space: nowrap; }