/*
 * SubnetMagic – Subnetting Trainer — „Stadtblatt"-Skin
 * Design-Sprache der Reboot-Vibe-Learning-Familie (siehe DESIGN.md):
 * Papier, Tinte, Georgia-Serif, Petrol-Akzent, Stempelrot für Zustände.
 * Zwei Themes: hell (Default) + dunkel — Umschaltung via data-theme auf <html>,
 * ohne Wahl folgt prefers-color-scheme (theme.js setzt das Attribut vorm Paint).
 */

/* ================= DESIGN TOKENS ================= */
:root {
    color-scheme: light;

    --bg-page: #FDFBF7;      /* Papier */
    --bg-card: #FFFFFF;      /* Karten */
    --bg-surface: #F5F2EC;   /* Panels, Tabellenköpfe, Controls */
    --bg-inset: #F5F2EC;     /* Inputs, Code-Chips */
    --border-color: #948A7F;
    --border-strong: #756F68;

    --text-main: #1A1918;    /* Tinte */
    --text-muted: #5C5852;

    --brand: #1B4958;        /* Petrol-Füllung (Buttons, aktive Zustände) */
    --brand-strong: #143844;
    --brand-ink: #1B4958;    /* Petrol als Text/Icon/Rahmen */
    --brand-soft: #DCE8EC;
    --brand-tint: #F0F6F8;

    --stamp: #8B2626;        /* Stempelrot-Füllung */
    --stamp-ink: #8B2626;    /* Stempelrot als Text */
    --stamp-soft: #F5E4E4;

    --success: #116B35;
    --success-soft: #E3EFE7;
    --error: #8B2626;        /* falsch = Stempelrot (Druckfarbe) */
    --error-soft: #F5E4E4;
    --warning: #9A4A08;
    --warning-soft: #F7ECDD;
    --gold: #8A6208;
    --gold-soft: #F7EFD8;

    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    --transition-speed: 0.15s;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --radius-card: 10px;
    --radius-control: 8px;
    --radius-chip: 4px;
    --shadow-card: 0 1px 3px rgba(26, 25, 24, 0.06);
    --shadow-raised: 0 10px 30px rgba(26, 25, 24, 0.14);
}

/* Dunkles Token-Set — bewusst zweimal notiert (Media-Query + data-theme),
   CSS kann Deklarationsblöcke nicht wiederverwenden. Beide synchron halten! */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg-page: #171614;
        --bg-card: #201D1A;
        --bg-surface: #282522;
        --bg-inset: #141210;
        --border-color: #756F67;
        --border-strong: #817A72;
        --text-main: #F0EDE6;
        --text-muted: #B0A99D;
        --brand: #2A5F74;
        --brand-strong: #1B4958;
        --brand-ink: #8EAFC0;
        --brand-soft: #1E3540;
        --brand-tint: #1A2A31;
        --stamp: #9A3B2E;
        --stamp-ink: #DE8B76;
        --stamp-soft: #3A211C;
        --success: #78C08E;
        --success-soft: #1E2E23;
        --error: #DE8B76;
        --error-soft: #3A211C;
        --warning: #D9A05B;
        --warning-soft: #33291C;
        --gold: #D9B44A;
        --gold-soft: #332B15;
        --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
        --shadow-raised: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-page: #171614;
    --bg-card: #201D1A;
    --bg-surface: #282522;
    --bg-inset: #141210;
    --border-color: #756F67;
    --border-strong: #817A72;
    --text-main: #F0EDE6;
    --text-muted: #B0A99D;
    --brand: #2A5F74;
    --brand-strong: #1B4958;
    --brand-ink: #8EAFC0;
    --brand-soft: #1E3540;
    --brand-tint: #1A2A31;
    --stamp: #9A3B2E;
    --stamp-ink: #DE8B76;
    --stamp-soft: #3A211C;
    --success: #78C08E;
    --success-soft: #1E2E23;
    --error: #DE8B76;
    --error-soft: #3A211C;
    --warning: #D9A05B;
    --warning-soft: #33291C;
    --gold: #D9B44A;
    --gold-soft: #332B15;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-raised: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ================= FONTS (self-hosted) =================
   Einzige Webfont: JetBrains Mono für IPs/Masken/Rechenwege (Kern-Content).
   Serif/Sans kommen als Systemfonts (Georgia/system-ui) — wie REBOOT AI Literacy. */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* ================= BASIC RESET & LAYOUT ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Nur für Screenreader sichtbar (visually-hidden) — z.B. aria-live-Feedback */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    background-color: var(--bg-page);
    color: var(--text-main);
    font-family: var(--font-sans);
    min-height: 100vh;
    min-height: 100dvh; /* iOS Safari: ohne Sprung beim Ein-/Ausblenden der Adressleiste */
    overflow-x: hidden;
    overscroll-behavior-y: contain; /* kein versehentliches Pull-to-Refresh */
    -webkit-tap-highlight-color: transparent; /* kein graues Tap-Blitzen auf iOS */
}

code, .mono {
    font-family: var(--font-mono);
    background-color: var(--bg-inset);
    padding: 2px 6px;
    border-radius: var(--radius-chip);
    color: var(--text-main);
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
}

/* Zahlen-Anzeigen mit fester Ziffernbreite -> kein Zappeln beim Hochzählen */
.badge-val, .stat-value, .timer, .score, .streak-count,
.bit-stat-val, #bin-timer, #cidr-timer, #bin-score, #cidr-score,
.final-score-display .score-val {
    font-variant-numeric: tabular-nums;
}

.hidden {
    display: none !important;
}

.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ================= APP HEADER (Masthead) ================= */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 2px solid var(--text-main); /* Zeitungs-Trennlinie */
    margin-bottom: 30px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    color: var(--brand-ink);
    display: inline-flex;
    animation: logoIntro 0.5s var(--ease-out) both;
}

.logo-icon .svg-icon {
    width: 1.9rem;
    height: 1.9rem;
    /* App-Zeichen ist eine Füll-Form, kein Strich-Icon — .svg-icon setzt
       fill:none/stroke:currentColor, was hier explizit gedreht werden muss
       (CSS schlägt das Inline-Präsentationsattribut des <svg>). */
    fill: currentColor;
    stroke: none;
}

@keyframes logoIntro {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.logo-text h1 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.logo-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* NAVIGATION — Druckbogen-Tabs: aktive Seite trägt die Petrol-Unterkante */
.app-nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--radius-control);
    font-weight: 600;
    font-size: 0.95rem;
    /* WCAG 2.5.5: mind. 44px Touch-Target (Audit P2) */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color var(--transition-speed) var(--ease-out), background-color var(--transition-speed) var(--ease-out), box-shadow var(--transition-speed) var(--ease-out);
}

.nav-link:hover {
    color: var(--text-main);
    background: var(--bg-surface);
}

.nav-link.active {
    color: var(--text-main);
    background: var(--bg-surface);
    box-shadow: inset 0 -2px 0 var(--brand-ink);
}

/* SETTINGS / STATS BADGES */
.header-settings {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 8px 14px;
    border-radius: var(--radius-control);
    font-size: 0.9rem;
}

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

.badge-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--brand-ink);
}

/* THEME TOGGLE (hell/dunkel) */
.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    color: var(--text-muted);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--transition-speed) var(--ease-out), border-color var(--transition-speed) var(--ease-out), background-color var(--transition-speed) var(--ease-out);
}

.theme-toggle:hover {
    color: var(--text-main);
    border-color: var(--border-strong);
}

.theme-toggle .svg-icon {
    width: 1.15rem;
    height: 1.15rem;
}

/* Icon-Wechsel: hell zeigt Mond (wechselt zu dunkel), dunkel zeigt Sonne */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline-flex; }
:root[data-theme="dark"] .theme-icon-sun { display: inline-flex; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-sun { display: inline-flex; }
    :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}

/* SOUND SLIDER */
.sound-control {
    display: flex;
    align-items: center;
}

.switch-container {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 44px;
    cursor: pointer;
}

.switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    bottom: 6px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    color: var(--text-muted);
}

.switch-slider::before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-strong);
    transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    border-radius: 50%;
    z-index: 2;
}

.switch-container input:checked + .switch-slider {
    background-color: var(--brand-soft);
    border-color: var(--brand-ink);
}

.switch-container input:checked + .switch-slider::before {
    transform: translateX(24px);
    background-color: var(--brand);
    border-color: var(--brand);
}

.sound-icon-on, .sound-icon-off {
    font-size: 0.9rem;
    user-select: none;
    z-index: 1;
}

.sound-icon-on {
    margin-left: 2px;
}
.sound-icon-off {
    margin-right: 2px;
}

/* ================= COMMON CARDS ================= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-speed) ease;
}

.card:hover {
    border-color: var(--border-strong);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-header h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
}

.card-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.card-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* BUTTONS */
.btn {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 24px;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-speed) var(--ease-out), border-color var(--transition-speed) var(--ease-out), color var(--transition-speed) var(--ease-out), transform var(--transition-speed) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #FDFBF7;
}

.btn-primary:hover {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
}

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

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-surface);
    border-color: var(--text-muted);
}

.btn-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Aktiver Umschalt-Button (z.B. Tabellen-Modus Normal/Test) */
.btn.active {
    border-color: var(--brand-ink);
    color: var(--brand-ink);
    background: var(--brand-tint);
}

.btn-large {
    padding: 16px 36px;
    font-size: 1.1rem;
}

/* Historische Klasse (JS setzt sie für den "Nächste Frage"-Zustand) —
   im Print-Skin ohne Glanz-Effekt, nur die Primärfarbe zählt. */
.glow-btn {
    position: relative;
}

/* ================= GRID SYSTEM ================= */
.grid-2col {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    align-items: start;
}

/* ================= JOURNEY HOME + FIRST STAGE ================= */
.journey-home {
    margin-bottom: 42px;
}

/* Der Erststart ist eine eigene, ruhige Oberfläche. Lokale Testwerte und die
   volle Navigation treten zurück, bis der Nutzer seinen Einstieg gewählt hat. */
.journey-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
    gap: clamp(34px, 7vw, 88px);
    align-items: center;
    min-height: min(650px, calc(100dvh - 170px));
    padding: clamp(28px, 6vw, 76px) clamp(0px, 3vw, 42px);
}

.journey-welcome h2 {
    max-width: 12ch;
    margin-bottom: 18px;
    font-family: var(--font-serif);
    font-size: clamp(2.65rem, 7vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.journey-welcome-lead,
.journey-welcome-promise {
    max-width: 58ch;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.55;
}

.journey-welcome-actions {
    display: grid;
    gap: 10px;
    align-content: center;
}

.journey-welcome-actions .btn {
    width: 100%;
    min-height: 52px;
}

.journey-welcome-actions > p {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
}

.btn-text {
    min-height: 44px;
    padding: 8px 12px;
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 4px;
}

.btn-text:hover {
    color: var(--text-main);
    text-decoration-color: currentColor;
}

.journey-welcome-active .journey-earned-stat,
.journey-welcome-active .sound-control,
.journey-welcome-active .app-nav,
.journey-welcome-active .app-footer-info {
    display: none;
}

.journey-welcome-active .header-settings {
    margin-left: auto;
}

.placement-workspace {
    width: min(100%, 820px);
    min-height: min(650px, calc(100dvh - 180px));
    margin: 0 auto 36px;
    padding: clamp(20px, 4vw, 42px) 0;
}

.placement-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: clamp(30px, 6vw, 58px);
}

.placement-head > div {
    display: grid;
    gap: 8px;
    width: min(100%, 330px);
}

#placement-progress-label,
.placement-group {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.placement-body > h2 {
    margin-bottom: 10px;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: -0.025em;
}

#placement-intro {
    max-width: 62ch;
    margin-bottom: 30px;
    color: var(--text-muted);
    line-height: 1.55;
}

.placement-question,
.placement-feedback,
.placement-result {
    padding-top: 24px;
    border-top: 1px solid var(--border-strong);
}

.placement-question h3,
.placement-feedback h3,
.placement-result h3 {
    margin: 8px 0 14px;
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.placement-question-text,
.placement-feedback p,
.placement-result > p {
    max-width: 62ch;
    line-height: 1.6;
}

#placement-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 26px;
}

#placement-form label {
    grid-column: 1 / -1;
    font-weight: 700;
}

#placement-answer {
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--bg-inset);
    color: var(--text-main);
    font: 1rem var(--font-mono);
}

.placement-feedback {
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
}

.placement-feedback.is-correct {
    border-color: var(--success);
    background: var(--success-soft);
}

.placement-feedback.is-incorrect {
    border-color: var(--warning);
    background: var(--warning-soft);
}

.placement-feedback .btn,
.placement-result .btn {
    margin-top: 22px;
}

.placement-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.placement-result-actions .btn {
    margin-top: 0;
}

.placement-result-details {
    margin-top: 12px;
}

.placement-result-details > summary,
.placement-solution > summary {
    min-height: 44px;
    cursor: pointer;
    font-weight: 700;
}

.placement-solution {
    margin-top: 16px;
}

.placement-result ul {
    margin: 24px 0 8px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--border-color);
}

.placement-result li {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.placement-result li strong {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: right;
}

.placement-result li strong.is-passed {
    color: var(--success);
}

.placement-active .journey-earned-stat,
.placement-active .sound-control,
.placement-active .app-nav,
.placement-active .app-footer-info {
    display: none;
}

.journey-microtask {
    max-width: 760px;
}

.journey-micro-meta {
    display: grid;
    gap: 9px;
    margin-bottom: 32px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* Aufgaben-Kontext: steht in jedem Teilschritt sichtbar (Split-Attention-Fix). */
.journey-micro-context {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--bg-card);
}

.journey-micro-context-label {
    margin: 0 0 4px;
    color: var(--text-muted);
    font: 0.75rem var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.journey-micro-context .journey-question-prompt {
    margin: 0;
}

/* Bereits bestätigte Teilschritte — der Lernende muss sie nicht behalten. */
.journey-micro-solved {
    margin-bottom: 20px;
    padding: 10px 14px;
    border-left: 3px solid var(--brand-ink);
    background: var(--brand-tint);
    border-radius: var(--radius-control);
}

.journey-micro-solved-title {
    margin: 0 0 6px;
    color: var(--text-muted);
    font: 0.75rem var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.journey-micro-solved ol {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.journey-micro-solved li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.9rem;
}

.journey-micro-solved-value {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-main);
}

.journey-micro-concept {
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.journey-micro-concept > summary {
    cursor: pointer;
    padding: 8px 0;
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.journey-micro-concept[open] > summary {
    margin-bottom: 12px;
}

.journey-microtask > h3 {
    max-width: 28ch;
    margin-bottom: 26px;
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 4vw, 2.5rem);
    line-height: 1.15;
    text-wrap: balance;
}

.journey-micro-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.journey-micro-option {
    min-height: 58px;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    font: 700 1.05rem var(--font-mono);
    transition: background-color var(--transition-speed) var(--ease-out), border-color var(--transition-speed) var(--ease-out), transform var(--transition-speed) var(--ease-out);
}

.journey-micro-option:hover:not(:disabled) {
    border-color: var(--brand-ink);
    background: var(--brand-tint);
}

.journey-micro-option:active:not(:disabled) {
    transform: translateY(1px);
}

.journey-micro-option:disabled {
    cursor: default;
    opacity: 0.55;
}

.journey-microtask .journey-hint-button {
    margin-top: 8px;
}

.journey-microtask .journey-answer-result {
    margin-top: 22px;
}

.journey-micro-complete details {
    margin: 20px 0;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}

.journey-micro-complete summary {
    min-height: 44px;
    padding: 12px 0;
    cursor: pointer;
    font-weight: 700;
}

.journey-action-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.65fr);
    gap: 32px;
    align-items: end;
    padding: 30px 0 28px;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-color);
}

.journey-action-panel.is-newcomer {
    min-height: min(620px, calc(100dvh - 190px));
    align-items: center;
    padding: clamp(38px, 7vw, 88px) clamp(0px, 3vw, 44px);
    border-top: 0;
}

.journey-kicker {
    margin-bottom: 12px;
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.journey-action-panel.is-newcomer .journey-action-copy h2 {
    max-width: 13ch;
    font-size: clamp(2.5rem, 6vw, 4.8rem);
    line-height: 0.98;
}

.journey-action-panel.is-newcomer .journey-action-copy > #journey-next-copy {
    max-width: 52ch;
    margin-top: 18px;
    font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.journey-newcomer-guide {
    margin-top: clamp(28px, 5vw, 46px);
}

.journey-guide-title {
    margin-bottom: 12px;
    font-weight: 700;
}

.journey-newcomer-guide ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--border-color);
}

.journey-newcomer-guide li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding: 14px;
    background: var(--bg-card);
}

.journey-newcomer-guide li > span {
    grid-row: 1 / 3;
    align-self: start;
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-weight: 700;
}

.journey-newcomer-guide li small {
    color: var(--text-muted);
    line-height: 1.35;
}

.journey-action-panel.is-newcomer .journey-primary-actions {
    grid-template-columns: 1fr;
    align-self: center;
}

.journey-action-panel.is-newcomer .journey-primary-actions .btn {
    grid-column: auto;
    min-height: 52px;
}

.journey-action-panel.is-newcomer #journey-free-practice-btn {
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}

.journey-first-use .journey-earned-stat {
    display: none;
}

.journey-action-copy h2,
.journey-map h3,
.journey-workspace-body h2,
.journey-tools-heading h2 {
    font-family: var(--font-serif);
    text-wrap: balance;
}

.journey-action-copy h2 {
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -0.025em;
}

.journey-action-copy > p,
.journey-map-heading p,
.journey-tools-heading p,
.journey-learning-goal {
    max-width: 70ch;
    color: var(--text-muted);
    line-height: 1.55;
}

.journey-tool-actions {
    padding: 1rem 0;
}

.journey-primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.journey-primary-actions .btn:first-child {
    grid-column: 1 / -1;
}

.journey-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.journey-progress-track {
    width: min(100%, 420px);
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-chip);
    background: var(--bg-surface);
}

.journey-progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--brand);
    transition: width 300ms var(--ease-out);
}

#journey-progress-label,
#journey-step-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.journey-map {
    margin-top: 1rem;
    padding-block: .25rem;
    border-block: 1px solid var(--border-color);
}

.journey-map-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin: 0;
    padding: 1rem 0;
    cursor: pointer;
    list-style: none;
}

.journey-map-heading::-webkit-details-marker { display: none; }

.journey-map-heading::after {
    content: '+';
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--brand-ink);
    font: 700 1.2rem var(--font-mono);
}

.journey-map[open] .journey-map-heading::after { content: '−'; }

.journey-map h3 {
    font-size: 1.35rem;
}

.journey-stage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
}

.journey-stage {
    border-top: 1px solid var(--border-color);
}

.journey-stage-disclosure > summary {
    list-style: none;
}

.journey-stage-disclosure > summary::-webkit-details-marker {
    display: none;
}

.journey-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding: 10px 0;
    cursor: pointer;
}

.journey-stage-head::after {
    content: '+';
    order: 2;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 1.1rem;
}

.journey-stage-disclosure[open] .journey-stage-head::after {
    content: '−';
}

.journey-stage-head:hover strong,
.journey-stage-head:focus-visible strong {
    color: var(--brand-ink);
}

.journey-stage-head > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.journey-stage-index {
    min-width: 2ch;
    font-family: var(--font-mono);
    color: var(--brand-ink);
    font-variant-numeric: tabular-nums;
}

.journey-stage-badge {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: var(--radius-chip);
    background: var(--brand-tint);
    color: var(--brand-ink);
    font-size: 0.75rem;
    font-weight: 700;
}

.journey-stage.is-preview {
    color: var(--text-muted);
}

.journey-stage.is-preview .journey-stage-badge {
    background: var(--bg-surface);
    color: var(--text-muted);
}

.journey-stage.is-locked {
    color: var(--text-muted);
}

.journey-stage.is-locked .journey-stage-badge {
    background: var(--bg-surface);
    color: var(--text-muted);
}

.journey-stage.is-locked .journey-stage-head {
    cursor: default;
}

.journey-stage-disclosure > p {
    max-width: 72ch;
    margin: 6px 0 0 34px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.journey-stage-disclosure[open] > p {
    animation: journeyReveal 180ms var(--ease-out) both;
}

@keyframes journeyReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.journey-intro-address {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
    font-family: var(--font-mono);
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 700;
}

.journey-intro-address span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.journey-intro-address small {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
}

.journey-lesson-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0 34px;
}

.journey-lesson-link {
    min-width: 210px;
    padding: 10px 12px;
    text-align: left;
    color: var(--text-main);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    cursor: pointer;
}

.journey-lesson-link:hover:not(:disabled),
.journey-lesson-link:focus-visible {
    border-color: var(--brand);
}

.journey-lesson-link:disabled {
    opacity: 0.7;
    cursor: default;
}

.journey-lesson-link span,
.journey-lesson-link small {
    display: block;
}

.journey-lesson-link small {
    margin-top: 3px;
    color: var(--text-muted);
}

.journey-status {
    min-height: 1.4em;
    margin-top: 12px;
    color: var(--text-muted);
}

.journey-status-error {
    color: var(--error);
}

.journey-workspace {
    max-width: 900px;
    margin: 0 auto 42px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.journey-workspace-head {
    display: grid;
    grid-template-columns: auto minmax(200px, 1fr);
    gap: 24px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.journey-workspace-progress {
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr);
    gap: 12px;
    align-items: center;
}

.journey-workspace-progress .journey-progress-track {
    width: 100%;
}

.journey-workspace-body {
    padding: clamp(24px, 5vw, 48px);
}

.journey-workspace-body h2 {
    margin-bottom: 8px;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
}

/* Tages-Session, Fehlerbuch und Transfer-Labs bleiben auf der Startseite kompakt. */
.learning-home-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--brand);
    background: var(--bg-card);
}

.learning-home-card h3,
.learning-home-card p {
    margin: 0;
}

.learning-home-card h3 {
    margin-block: .3rem .45rem;
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.learning-compact-panel {
    margin: 1rem 0;
    border-block: 1px solid var(--border-color);
}

.learning-compact-panel > summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    cursor: pointer;
    font-weight: 700;
}

.learning-compact-panel > summary strong {
    color: var(--brand-ink);
    font-size: .85rem;
}

.learning-compact-content {
    display: grid;
    gap: .75rem;
    padding: 0 0 1rem;
}

.errorbook-row,
.learning-lab-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.errorbook-row span,
.learning-lab-row small {
    display: block;
    margin-top: .2rem;
    color: var(--text-muted);
    font-size: .82rem;
}

.learning-lab-row {
    width: 100%;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.learning-lab-row:hover,
.learning-lab-row:focus-visible {
    border-color: var(--brand-ink);
}

.learning-workspace {
    max-width: 760px;
    min-height: 58vh;
    margin: 0 auto;
}

.learning-workspace-head {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.learning-workspace-head > div {
    display: grid;
    gap: .45rem;
}

.learning-workspace-body {
    padding: clamp(1.25rem, 4vw, 2.5rem) 0;
}

.learning-workspace-body > h2 {
    margin: .35rem 0 1.5rem;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1;
}

.learning-task,
.learning-feedback,
.learning-summary,
.learning-bridge {
    padding: clamp(1rem, 4vw, 1.75rem);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.learning-task h3,
.learning-feedback h3 {
    margin: .35rem 0 1rem;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
}

.learning-task-label {
    margin: 0;
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.learning-question-text,
.learning-scenario,
.learning-lab-prompt {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.learning-task form {
    display: grid;
    gap: 1rem;
}

.learning-task input[type="text"] {
    width: 100%;
    min-height: 3.25rem;
    padding: .8rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-inset);
    color: var(--text-main);
    font: 1rem var(--font-mono);
}

.learning-options {
    display: grid;
    gap: .65rem;
}

.learning-options label {
    position: relative;
    cursor: pointer;
}

.learning-options input {
    position: absolute;
    opacity: 0;
}

.learning-options span {
    display: block;
    min-height: 3.25rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-inset);
}

.learning-options input:checked + span,
.learning-options input:focus-visible + span {
    border-color: var(--brand-ink);
    outline: 2px solid color-mix(in srgb, var(--brand-ink) 35%, transparent);
}

.learning-task-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: .75rem;
}

.learning-hint {
    margin: 0;
    padding: .8rem;
    border-left: 4px solid var(--warning);
    background: var(--bg-surface);
}

.learning-feedback.is-correct { border-left: 5px solid var(--success); }
.learning-feedback.is-wrong { border-left: 5px solid var(--error); }

.learning-feedback details {
    margin: 1rem 0;
}

.learning-summary dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin: 0 0 1.25rem;
}

.learning-summary dl div {
    padding: .8rem;
    border: 1px solid var(--border-color);
}

.learning-summary dt {
    color: var(--text-muted);
    font-size: .75rem;
}

.learning-summary dd {
    margin: .25rem 0 0;
    font: 700 1.5rem var(--font-mono);
}

.learning-active .app-nav,
.learning-active .header-settings,
.learning-active .app-footer-info {
    display: none;
}

@media (max-width: 600px) {
    .learning-home-card,
    .errorbook-row,
    .learning-lab-row,
    .learning-workspace-head {
        grid-template-columns: 1fr;
    }

    .learning-home-card .btn,
    .errorbook-row .btn {
        width: 100%;
    }

    .learning-workspace-head {
        gap: .8rem;
    }

    .learning-workspace {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }

    .learning-task-actions,
    .learning-summary dl {
        grid-template-columns: 1fr;
    }
}

.journey-learning-goal {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-color);
}

.journey-step-content {
    max-width: 72ch;
    padding-top: 26px;
    font-size: 1rem;
    line-height: 1.65;
}

.journey-step-content code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.journey-concept-lead {
    margin: 0 0 14px;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Falls eine andere Navigation künftig scrollIntoView nutzt, bleibt die
   Konzeptüberschrift auch in iOS-Webviews unterhalb von Statusleiste/Notch. */
.journey-concept {
    scroll-margin-top: max(5.5rem, calc(env(safe-area-inset-top) + 1.5rem));
}

.journey-concept-page-label {
    margin: 0 0 10px;
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* AP6: gedämpfter Meta-Hinweis auf den optionalen Vertiefungs-Seiten. */
.journey-concept-optional-note {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 0.9em;
}

.journey-concept-core-done {
    margin: 18px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--success);
    border-radius: var(--radius-control);
    background: var(--success-soft);
    color: var(--text-main);
    font-size: 0.92rem;
}

.journey-replay-section + .journey-replay-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
}

.journey-replay-page + .journey-replay-page {
    margin-top: 28px;
}

.journey-ip-card {
    display: grid;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
}

.journey-ip-card small,
.journey-ipv4-octets small,
.journey-prefix-split small {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
}

.journey-ip-card > span {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* Der Einstieg trennt L3-Wegentscheidung, L2-Zustellung und ARP sichtbar.
   Die Karten bleiben absichtlich kurz, damit die Weiter-Aktion auf einem
   Smartphone ohne Scrollen oberhalb der festen Tab-Bar liegt. */
.journey-path-choice,
.journey-address-roles,
.journey-next-hop-choice,
.journey-arp-map {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.journey-path-choice > div,
.journey-address-roles > div,
.journey-next-hop-choice > div,
.journey-arp-map > div {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
}

.journey-path-choice small,
.journey-address-roles small,
.journey-next-hop-choice small,
.journey-arp-map small,
.journey-address-roles span {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
}

.journey-path-choice strong,
.journey-address-roles strong,
.journey-next-hop-choice strong,
.journey-arp-map strong {
    font-size: 0.94rem;
    line-height: 1.3;
}

.journey-address-roles > div:first-child,
.journey-next-hop-choice > div:first-child,
.journey-arp-map > div:first-child {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-ink);
}

.journey-ip-card code {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    font-weight: 700;
}

.journey-ipv4-octets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 22px 0;
    font-family: var(--font-mono);
    text-align: center;
}

.journey-ipv4-octets span,
.journey-prefix-split span {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
}

.journey-ipv4-octets strong {
    font-size: 1.05rem;
}

.journey-prefix-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 8px;
    margin: 22px 0;
    font-family: var(--font-mono);
}

.journey-prefix-split .is-network {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-ink);
}

.journey-prefix-split strong {
    font-size: 1.35rem;
}

.journey-bit-weights {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    margin: 22px 0;
    font-family: var(--font-mono);
    font-size: clamp(0.65rem, 2.4vw, 0.82rem);
    text-align: center;
}

.journey-bit-weights span {
    min-width: 0;
    padding: 9px 2px;
    border-radius: var(--radius-chip);
    background: var(--bg-surface);
}

.journey-bit-weights .is-on {
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-weight: 700;
}

.journey-bit-example,
.journey-equation,
.journey-formula {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.journey-bit-example span,
.journey-equation span,
.journey-formula span,
.journey-formula strong {
    padding: 8px 10px;
    border-radius: var(--radius-chip);
    background: var(--bg-surface);
}

.journey-bit-example .journey-active-bits,
.journey-formula strong {
    background: var(--brand-soft);
    color: var(--brand-ink);
}

.journey-table-scroll {
    max-width: 100%;
    margin: 22px 0;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    -webkit-overflow-scrolling: touch;
}

.journey-table-scroll:focus-visible {
    outline: 3px solid var(--brand-ink);
    outline-offset: 3px;
}

.journey-table-scroll .theory-table {
    min-width: 560px;
    margin: 0;
}

.journey-vlsm-chain {
    margin: 22px 0;
    border-top: 1px solid var(--border-color);
}

.journey-vlsm-chain > div {
    display: grid;
    grid-template-columns: minmax(150px, 0.65fr) minmax(270px, 1.35fr);
    gap: 18px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.journey-vlsm-chain code {
    color: var(--brand-ink);
    font-variant-numeric: tabular-nums;
}

.journey-rule,
.journey-hint {
    margin: 22px 0;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--brand-tint);
    color: var(--text-main);
}

.journey-hint {
    white-space: pre-line;
}

.journey-step-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
}

.journey-checkpoint-count {
    margin-bottom: 20px;
    color: var(--text-muted);
}

.journey-question-prompt {
    margin-bottom: 22px;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
}

.journey-answer-form label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}

.journey-answer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.journey-answer-row input {
    min-width: 0;
    padding: 12px 14px;
    color: var(--text-main);
    background: var(--bg-inset);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    font-family: var(--font-mono);
    font-size: 1rem;
}

.journey-hint-button {
    margin-top: 12px;
    min-height: 44px;
    padding: 10px 0;
    color: var(--brand-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
    font-weight: 700;
    text-underline-offset: 3px;
}

.journey-hint-button:disabled {
    color: var(--text-muted);
    cursor: default;
}

.journey-answer-result {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
}

.journey-answer-result.is-correct {
    border-color: var(--success);
}

.journey-answer-result.is-wrong {
    border-color: var(--error);
}

.journey-answer-result h3 {
    margin-bottom: 8px;
    color: var(--text-main);
}

.journey-solution {
    margin: 16px 0 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.journey-tools {
    padding-top: 20px;
    border-top: 1px solid var(--border-strong);
}

.journey-tools-heading {
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 22px;
    list-style: none;
    cursor: pointer;
}

.journey-tools-heading::-webkit-details-marker {
    display: none;
}

.journey-tools-heading::after {
    content: 'Werkzeuge öffnen +';
    justify-self: end;
    align-self: center;
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
}

.journey-tools[open] .journey-tools-heading::after {
    content: 'Werkzeuge schließen −';
}

.journey-tools:not([open]) .journey-tools-heading {
    margin-bottom: 0;
}

.journey-tools-heading h2 {
    font-size: 1.5rem;
}

.retrieval-check {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px 24px;
    margin-top: 24px;
}

.retrieval-check h3 {
    margin-top: 4px;
    font-family: var(--font-serif);
}

.retrieval-options {
    display: flex;
    gap: 8px;
}

.retrieval-result {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-main);
}

@media (max-width: 760px) {
    .journey-welcome {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: auto;
        padding: 24px 6px 34px;
    }
    .journey-welcome h2 {
        max-width: 10ch;
        margin-bottom: 14px;
        font-size: clamp(2.45rem, 13vw, 4rem);
    }
    .journey-welcome-promise {
        font-size: 1rem;
    }
    .journey-welcome-actions {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    .placement-workspace {
        min-height: auto;
        padding: 14px 4px 30px;
    }
    .placement-head {
        display: grid;
        gap: 14px;
        margin-bottom: 34px;
    }
    .placement-head > div {
        width: 100%;
    }
    #placement-form {
        grid-template-columns: 1fr;
    }
    #placement-form label {
        grid-column: auto;
    }
    .placement-result li {
        display: grid;
        gap: 4px;
    }
    .placement-result li strong {
        text-align: left;
    }
    .journey-micro-options {
        grid-template-columns: 1fr 1fr;
    }
    .journey-microtask > h3 {
        margin-bottom: 20px;
    }
    .journey-action-panel,
    .journey-map-heading,
    .journey-tools-heading,
    .journey-workspace-head,
    .journey-workspace-progress,
    .retrieval-check {
        grid-template-columns: 1fr;
    }
    .journey-workspace-head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding: 10px 14px;
    }
    .journey-workspace-head #journey-back-btn {
        min-height: 44px;
        padding: 8px 12px;
    }
    .journey-workspace-progress {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    .journey-workspace-body {
        padding: 20px 18px 28px;
    }
    .journey-tools {
        padding-top: 16px;
    }
    .journey-tools-heading {
        gap: 8px;
    }
    .journey-tools-heading p {
        margin: 0;
    }
    .journey-tools-heading::after {
        justify-self: start;
    }
    .journey-primary-actions {
        grid-template-columns: minmax(0, 1fr);
    }
    .journey-primary-actions .btn:first-child {
        grid-column: auto;
    }
    .journey-action-panel.is-newcomer {
        min-height: auto;
        padding: 20px 0 24px;
    }
    .journey-action-panel.is-newcomer .journey-action-copy h2 {
        max-width: 11ch;
    }
    .journey-newcomer-guide ol {
        grid-template-columns: 1fr;
    }
    .journey-newcomer-guide {
        margin-top: 20px;
    }
    .journey-guide-title {
        margin-bottom: 8px;
    }
    .journey-newcomer-guide li {
        padding: 10px 12px;
    }
    .journey-stage-disclosure > p,
    .journey-lesson-links {
        margin-left: 0;
    }
    /* Im mobilen Fokusmodus nennt die Kopfleiste bereits Schritt und Thema.
       Lektionsname und Lernziel bleiben für Screenreader erhalten, werden aber
       nicht als zweite lange Einleitung vor jedem einzelnen Schritt wiederholt. */
    .journey-workspace-body > h2,
    .journey-learning-goal {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .journey-step-content {
        padding-top: 4px;
        font-size: 0.94rem;
        line-height: 1.42;
    }
    .journey-step-content p {
        margin: 0 0 12px;
    }
    .journey-concept-lead {
        margin-bottom: 8px;
        font-size: 1.1rem;
        line-height: 1.28;
    }
    .journey-concept-page-label {
        margin-bottom: 6px;
    }
    .journey-path-choice,
    .journey-address-roles,
    .journey-next-hop-choice,
    .journey-arp-map {
        margin: 9px 0;
        gap: 6px;
    }
    .journey-path-choice > div,
    .journey-address-roles > div,
    .journey-next-hop-choice > div,
    .journey-arp-map > div {
        padding: 7px 9px;
    }
    .journey-ipv4-octets,
    .journey-prefix-split,
    .journey-bit-weights,
    .journey-bit-example,
    .journey-equation,
    .journey-formula,
    .journey-rule,
    .journey-hint {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .journey-ipv4-octets span,
    .journey-prefix-split span {
        padding: 8px 5px;
    }
    .journey-prefix-split small {
        overflow-wrap: anywhere;
    }
    .journey-bit-example span,
    .journey-equation span,
    .journey-formula span,
    .journey-formula strong {
        padding: 6px 8px;
    }
    .journey-rule,
    .journey-hint {
        padding: 10px 12px;
    }
    .journey-step-actions {
        margin-top: 10px;
    }
    .journey-step-actions .btn-primary {
        width: 100%;
    }
    /* Die Aktion bleibt im Dokumentfluss, damit weder Lerntext noch die feste
       Bottom-Navigation überdeckt werden. */
    .journey-concept > .journey-step-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        margin-top: 18px;
    }
    .journey-concept > .journey-step-actions .btn-primary {
        width: auto;
    }
    .journey-concept > .journey-step-actions .btn-primary:only-child {
        grid-column: 1 / -1;
    }
    /* AP6: Die Nebenaktion (Vertiefung lesen bzw. Vertiefung beenden)
       bekommt eine eigene volle Zeile unter dem Primärbutton — sonst
       verdrängt das 2-Spalten-Grid die Hauptaktion nach unten. */
    .journey-concept > .journey-step-actions .btn-secondary {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .journey-intro-address {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 12px;
    }
    .journey-intro-address span {
        overflow-wrap: anywhere;
    }
    .journey-lesson-link {
        width: 100%;
    }
    .journey-answer-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .journey-vlsm-chain > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    .journey-solution .theory-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .retrieval-options {
        flex-wrap: wrap;
    }
}

@media (max-width: 1024px) {
    .grid-2col {
        /* minmax(0,1fr) statt 1fr: verhindert, dass breite Kinder (Visualizer,
           Tabellen) die Spalte über die Viewport-Breite hinaus aufblähen */
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================= SECTION: LERNEN (THEORY) ================= */
.slide-progress-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    height: 8px;
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 24px;
}

.slide-progress-bar {
    background: var(--brand);
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

.slide-wrapper {
    min-height: 250px;
}

.slide-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-main);
    text-wrap: balance;
}

.slide-content {
    font-size: 1.02rem;
    color: var(--text-main);
    line-height: 1.6;
    max-width: 72ch;
}

.slide-content p {
    margin-bottom: 16px;
}

.theory-callout {
    background: var(--brand-tint);
    border: 1px solid var(--brand-soft);
    padding: 14px 18px;
    border-radius: var(--radius-card);
    margin: 20px 0;
    font-size: 0.95rem;
}

.theory-callout.info {
    background: var(--warning-soft);
    border-color: var(--warning);
}

.theory-callout.success {
    background: var(--success-soft);
    border-color: var(--success);
}

.theory-list {
    margin-left: 20px;
    margin-bottom: 20px;
}

.theory-list li {
    margin-bottom: 8px;
}

.formula-box {
    background: var(--bg-inset);
    border: 1px dashed var(--border-strong);
    padding: 16px;
    border-radius: var(--radius-control);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    color: var(--text-main);
    margin: 16px 0;
}

.theory-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 0.9rem;
}

.theory-table th, .theory-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.theory-table th {
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg-surface);
}

.theory-table tbody tr.highlight-row {
    background: var(--brand-tint);
    color: var(--text-main);
}

.slide-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* SANDBOX / VISUALIZER */
.sandbox-inputs {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 24px;
}

@media (max-width: 580px) {
    .sandbox-inputs {
        grid-template-columns: 1fr;
    }
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.input-group input {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: var(--radius-control);
    font-family: var(--font-mono);
    font-size: 1rem;
    width: 100%;
    transition: border-color var(--transition-speed) var(--ease-out), box-shadow var(--transition-speed) var(--ease-out);
}

.input-group input:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.cidr-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cidr-input-wrapper .slash {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 1.1rem;
}

.cidr-input-wrapper input {
    padding-left: 28px;
}

/* VISUALIZATION */
.sandbox-visualization {
    margin-top: 20px;
}

.sandbox-error {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-control);
    background: var(--error-soft);
    border: 1px solid var(--error);
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.4;
}

.vis-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 20px;
}

.vis-card h4 {
    font-size: 1.02rem;
    margin-bottom: 16px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

/* Octet Box layout */
.octet-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.octet-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    padding: 10px;
    text-align: center;
    position: relative;
    transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.octet-box.active-octet {
    background: var(--brand-soft);
    border-color: var(--brand-ink);
}

.octet-num {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
    font-family: var(--font-mono);
}

.octet-ip-val {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
}

.octet-mask-val {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--brand-ink);
    margin-top: 4px;
    border-top: 1px dashed var(--border-color);
    padding-top: 4px;
}

.active-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #FDFBF7;
    font-size: 0.6rem;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: var(--radius-chip);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Steps */
.vis-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vis-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.step-badge {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: var(--radius-chip);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.step-text {
    font-size: 0.92rem;
    color: var(--text-main);
    line-height: 1.5;
}

.step-text strong {
    color: var(--text-main);
}

.math-expr {
    font-family: var(--font-mono);
    background: var(--bg-inset);
    padding: 1px 4px;
    border-radius: var(--radius-chip);
    color: var(--text-main);
}

/* Multiples Chain */
.multiples-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
    font-family: var(--font-mono);
}

.multiple-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: var(--radius-chip);
    font-size: 0.85rem;
}

.multiple-item.net-boundary {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
    font-weight: 700;
}

.multiple-item.next-boundary {
    background: var(--brand-soft);
    border-color: var(--brand-ink);
    color: var(--brand-ink);
    font-weight: 700;
}

.arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Result table in visualizer */
.result-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
}

.result-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.result-table td code {
    font-size: 1rem;
    font-weight: 700;
}

.result-table td small {
    color: var(--text-muted);
}

/* ================= SECTION: PRACTICE (TRAINING) ================= */
/* Frage-Karte auf Desktop zentriert begrenzen (Audit P1): ohne max-width
   lief die Karte auf breiten Screens ~1360px breit und wirkte leer. */
.practice-workspace {
    max-width: 720px;
    margin: 0 auto;
}

.practice-controls-bar {
    margin-bottom: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    overflow: clip;
}

.practice-controls-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    padding: 4px 24px 18px;
}

.practice-disclosure-summary {
    min-height: 52px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-main);
}

.practice-disclosure-summary small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.practice-disclosure-summary:focus-visible,
.srs-panel-header:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: -4px;
}

.practice-disclosure > summary::after {
    content: '+';
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-muted);
}

.practice-disclosure[open] > summary::after {
    content: '−';
}

@media (max-width: 768px) {
    .practice-controls-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .practice-controls-bar,
    .srs-panel {
        margin-bottom: 12px;
    }

    .practice-disclosure-summary,
    .srs-panel-header {
        min-height: 48px;
        padding: 10px 14px;
        gap: 8px;
    }

    .srs-panel-heading {
        font-size: 1rem;
    }
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.control-group label,
.control-group .control-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.custom-select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    padding: 12px;
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-size: 1rem;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition-speed);
}

.custom-select:focus {
    border-color: var(--brand-ink);
}

.diff-btn-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: var(--bg-card);
    padding: 4px;
    border-radius: var(--radius-control);
    border: 1px solid var(--border-color);
}

.diff-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color var(--transition-speed) var(--ease-out), color var(--transition-speed) var(--ease-out);
}

.diff-btn.active {
    background: var(--brand);
    color: #FDFBF7;
}

.diff-title {
    font-size: 0.85rem;
    font-weight: 700;
}

.diff-desc {
    font-size: 0.65rem;
    opacity: 0.85;
}

/* QUESTION CARD */
.question-card {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

/* Fragetyp als Mono-CAPS-Chip (Familien-Duktus) statt Farbbalken */
.question-tag {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-ink);
    background: var(--brand-tint);
    border: 1px solid var(--brand-ink);
    border-radius: var(--radius-chip);
    padding: 4px 10px;
}

.streak-badge-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--stamp-soft);
    border: 1px solid var(--stamp-ink);
    padding: 5px 12px;
    border-radius: var(--radius-chip);
}

.streak-fire {
    display: inline-flex;
    color: var(--stamp-ink);
}

/* Streak-Stufen (JS setzt lvl-Klassen statt Inline-Farben) */
.streak-fire.lvl-2 { color: var(--warning); }
.streak-fire.lvl-3 { color: var(--stamp-ink); }

.streak-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.streak-count {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
    color: var(--stamp-ink);
}

.question-content {
    margin-bottom: 24px;
}

.question-text {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--text-main);
    text-align: center;
}

.question-text strong {
    color: var(--text-main);
    font-family: var(--font-mono);
    background: var(--bg-inset);
    padding: 2px 10px;
    border-radius: var(--radius-chip);
    border: 1px solid var(--border-color);
    display: inline-block;
    margin: 4px 0;
    font-size: 0.95em;
}

/* Options Grid */
/* minmax(0, 1fr): Lange Antworten dürfen die Spalten nicht über die Karte
   hinaus aufblähen (sonst wurden IPv6-Antworten rechts abgeschnitten). */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.options-grid.options-grid--stacked {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 580px) {
    .options-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Seitlich 40px frei: Die Tasten-Nummer oben links überdeckt nie die Antwort. */
.option-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    padding: 18px 40px;
    min-width: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    transition: background-color var(--transition-speed) var(--ease-out), border-color var(--transition-speed) var(--ease-out), transform var(--transition-speed) var(--ease-out);
    text-align: center;
    position: relative;
}

.option-btn .mono {
    background: transparent;
    padding: 0;
    overflow-wrap: anywhere;
}

/* Lange IPv6-Adressen in Frage, Lösungsweg und Korrektur umbrechen statt
   über den Kartenrand zu laufen (vor allem am Handy). */
.question-text code,
.question-text .mono,
.solution-text code,
.solution-text .mono,
.answer-correct-hint .mono {
    overflow-wrap: anywhere;
}

.option-btn:hover:not(:disabled) {
    background: var(--brand-tint);
    border-color: var(--brand-ink);
}

.option-btn:active {
    transform: scale(0.98);
}

/* Während des Antwort-Feedbacks sind die Buttons disabled (statt pointer-events)
   — correct/incorrect-Farben bleiben durch !important sichtbar, hier nur Cursor */
.option-btn:disabled,
.bin-option-btn:disabled {
    cursor: not-allowed;
}

/* Feedback states — Druckfarbe: Fläche + Rahmen + Tinte, kein Glow */
.option-btn.correct {
    background: var(--success-soft) !important;
    border-color: var(--success) !important;
    color: var(--text-main) !important;
}

.option-btn.incorrect {
    background: var(--error-soft) !important;
    border-color: var(--error) !important;
    color: var(--text-main) !important;
    animation: wiggle 0.4s ease;
}

.option-btn.correct-hint {
    border-color: var(--success) !important;
    background: var(--success-soft) !important;
}

/* K11 Lern-Treppe: freie Texteingabe ab Box 3 (im options-grid volle Breite) */
.options-grid .answer-input-row,
.options-grid .answer-correct-hint {
    grid-column: 1 / -1;
}

.answer-input-row {
    display: flex;
    gap: 12px;
}

.answer-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: var(--radius-control);
    font-family: var(--font-mono);
    font-size: 16px; /* P0-5b: >=16px verhindert den iOS-Auto-Zoom beim Fokussieren */
    transition: border-color var(--transition-speed) var(--ease-out), box-shadow var(--transition-speed) var(--ease-out);
}

.answer-input:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.answer-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.answer-input.correct {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px var(--success-soft) !important;
}

.answer-input.incorrect {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px var(--error-soft) !important;
    animation: wiggle 0.4s ease;
}

.answer-correct-hint {
    color: var(--success);
    font-size: 0.95rem;
}

/* K11: Schwierigkeits-Regler im SRS-Modus = automatisch (Box-gesteuert) */
.diff-auto-note {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-chip);
    padding: 2px 6px;
    margin-left: 6px;
    vertical-align: middle;
}

.diff-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Tip area */
.question-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.tip-box {
    display: flex;
    gap: 12px;
    background: var(--warning-soft);
    border: 1px solid var(--warning);
    padding: 16px;
    border-radius: var(--radius-control);
    width: 100%;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: fadeIn 0.3s ease;
}

.tip-icon {
    color: var(--warning);
    display: inline-flex;
}

.tip-text {
    color: var(--text-main);
}

.tip-text strong {
    color: var(--text-main);
}

.hint-step + .hint-step {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.diagnostic-feedback {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--warning);
    border-radius: var(--radius-control);
    color: var(--text-main);
    background: var(--warning-soft);
    line-height: 1.5;
}

/* ================= SPEEDRUN MODUS ================= */
.speedrun-hero-card {
    text-align: center;
    max-width: 600px;
    margin: 40px auto;
    padding: 40px;
}

.speedrun-hero-icon {
    color: var(--brand-ink);
    margin-bottom: 20px;
}

.speedrun-hero-card h2 {
    font-family: var(--font-serif);
    font-size: 1.9rem;
    margin-bottom: 16px;
    font-weight: 700;
}

.speedrun-hero-card p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.speedrun-rules {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    margin-bottom: 36px;
    background: var(--bg-surface);
    padding: 20px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-color);
}

.speedrun-readiness {
    margin: -12px 0 24px !important;
    padding: 12px 14px;
    border: 1px solid var(--warning);
    border-radius: var(--radius-control);
    background: var(--warning-soft);
    font-size: 0.9rem !important;
}

.speedrun-readiness.is-ready {
    border-color: var(--success);
    background: var(--success-soft);
}

.rule-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Echte Sequenz -> Nummern erlaubt (Spielregeln 1-2-3) */
.rule-num {
    background: var(--brand);
    color: #FDFBF7;
    font-family: var(--font-mono);
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rule-txt {
    font-size: 0.95rem;
    color: var(--text-main);
}

/* Active Game Stats */
.speedrun-status-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 24px;
}

.speedrun-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 12px 30px;
    border-radius: var(--radius-card);
    min-width: 150px;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    font-family: var(--font-mono);
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: 800;
}

.stat-value.timer {
    color: var(--brand-ink);
}

/* Letzte 10 Sekunden: Stempelrot (JS toggelt .timer-critical statt Inline-Farbe) */
.stat-value.timer.timer-critical {
    color: var(--stamp-ink);
}

.stat-value.score {
    color: var(--success);
}

.question-tag.speedrun-tag {
    color: var(--stamp-ink);
    background: var(--stamp-soft);
    border-color: var(--stamp-ink);
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(26, 25, 24, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: fadeIn 0.2s ease;
}

.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    padding: 40px;
    text-align: center;
    width: 90%;
    max-width: 450px;
    box-shadow: var(--shadow-raised);
    animation: scaleUp 0.25s var(--ease-out);
}

.modal-icon {
    color: var(--gold);
    margin-bottom: 16px;
}

.modal-card h3 {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.final-score-display {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: var(--radius-card);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.score-val {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--success);
}

.modal-card p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.new-hs-badge {
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 4px 12px;
    border-radius: var(--radius-chip);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-block;
    margin-bottom: 10px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ================= SECTION: CHEATSHEET ================= */
/* Zwei gestapelte Spalten im Wissens-Tab (vorher als Inline-Style dupliziert) */
.cheatsheet-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Kompakte Schaltflächen, z.B. der Umschalter Normal/Lücken-Test */
.btn-compact {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-height: auto;
}

.table-mode-controls {
    display: flex;
    gap: 6px;
}

.bit-explorer-card {
    margin-top: 24px;
}

.cheatsheet-table-container {
    overflow-x: auto;
    margin-top: 24px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-color);
}

.cheatsheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    text-align: left;
}

.cheatsheet-table th, .cheatsheet-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.cheatsheet-table th {
    background: var(--bg-surface);
    color: var(--text-muted);
    font-weight: 600;
    font-family: var(--font-sans);
}

.cheatsheet-table tbody tr:hover {
    background: var(--bg-surface);
}

.cheatsheet-table tr.table-section-head td {
    background: var(--bg-surface);
    font-weight: 700;
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 18px;
    border-top: 1px solid var(--border-color);
}

.cheatsheet-table tr.magic-row td {
    background: var(--brand-soft);
    color: var(--text-main);
}

.cheatsheet-table tr.deactivated {
    opacity: 0.4;
}

/* Tabellen-Lücken-Test: Eingabefeld (vorher Inline-Styles in app.js) */
.table-test-input {
    width: 100%;
    max-width: 110px;
    font-size: 16px;
    padding: 4px 6px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-chip);
    background: var(--bg-inset);
    color: var(--text-main);
    font-family: var(--font-mono);
    text-align: center;
    outline: none;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.table-test-input.correct {
    border-color: var(--success);
    color: var(--success);
    background: var(--success-soft);
}

.table-test-input.incorrect {
    border-color: var(--error);
    color: var(--error);
    background: var(--error-soft);
}

.table-test-feedback {
    margin: 16px 0 0;
    padding: 14px;
    border-left: 3px solid var(--border-strong);
    background: var(--bg-surface);
    line-height: 1.55;
}

.table-test-feedback.is-correct {
    border-left-color: var(--success);
    background: var(--success-soft);
}

.table-test-feedback.is-incorrect {
    border-left-color: var(--error);
    background: var(--error-soft);
}

/* ================= FOOTER ================= */
.app-footer-info {
    text-align: center;
    padding: 30px 0;
    margin-top: auto;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--border-color);
}

/* ================= ANIMATIONS & EFFECTS ================= */
@keyframes pulse-fast {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.pulse-fast {
    animation: pulse-fast 0.6s infinite ease-in-out;
}

@keyframes wiggle {
    0% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.pulse-animation {
    animation: pulse-fast 1s infinite ease-in-out;
}

/* ================= ACCORDION STYLES ================= */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color var(--transition-speed) var(--ease-out);
}

.accordion-item.active {
    border-color: var(--brand-ink);
}

.accordion-trigger {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 16px 20px;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-sans);
    transition: color var(--transition-speed);
}

.accordion-trigger:hover {
    color: var(--brand-ink);
}

.accordion-icon {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform var(--transition-speed);
}

/* Chevron-Größe per Klasse statt Inline-Style (CSP-Disziplin, WP6) —
   Bestands-Icons tragen dasselbe Maß noch inline, neue nicht mehr. */
.accordion-icon .svg-icon {
    width: 0.9em;
    height: 0.9em;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--brand-ink);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
    padding: 0 20px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
    padding-bottom: 20px;
    transition: max-height 0.3s ease-in-out;
}

.accordion-content ul, .accordion-content ol {
    margin-left: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.accordion-content li {
    margin-bottom: 6px;
}

/* ================= ACHIEVEMENT TOAST ================= */
.achievement-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-card);
    border: 1px solid var(--gold);
    border-radius: var(--radius-card);
    padding: 14px 20px;
    box-shadow: var(--shadow-raised);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toastEnter 0.35s var(--ease-out);
    transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
    max-width: 340px;
}
.achievement-toast.hide {
    opacity: 0;
    transform: translateY(30px);
}
.toast-header {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.toast-trophy {
    color: var(--gold);
    display: inline-flex;
}
.toast-title-container {
    display: flex;
    flex-direction: column;
}
.toast-label {
    font-size: 0.68rem;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
}
.toast-name {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 2px 0 0 0;
}
@keyframes toastEnter {
    0% { transform: translateY(24px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ================= ACHIEVEMENTS IN CHEATSHEET ================= */
.achievements-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.achievement-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 10px 14px;
    transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), opacity 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}
.achievement-item.locked {
    opacity: 0.45;
    filter: grayscale(1);
}
.achievement-item.unlocked {
    border-color: var(--gold);
    background: var(--gold-soft);
    opacity: 1;
    filter: none;
}
.ach-icon {
    font-size: 1.6rem;
}
.ach-details h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}
.achievement-item.unlocked .ach-details h5 {
    color: var(--gold);
}
.ach-details p {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ================= BINARY TRAINER MINIGAME ================= */
.binary-trainer-card {
    margin-top: 0px;
}
.binary-trainer-workspace {
    margin-top: 14px;
}
.binary-game-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}
.game-score-badge, .game-timer-badge {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: var(--radius-chip);
    font-size: 0.82rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.game-score-badge strong {
    color: var(--success);
}
.game-timer-badge strong {
    color: var(--brand-ink);
}
.binary-question-display {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 16px;
    text-align: center;
    margin-bottom: 14px;
}
#bin-question-label,
#cidr-question-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}
#bin-question-value,
#cidr-question-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 2px;
    font-family: var(--font-mono);
}
.bin-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
/* Endstand der Minispiele (app.js) */
.game-finished {
    font-size: 1.1rem;
    color: var(--success);
}
.bin-option-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    padding: 10px;
    border-radius: var(--radius-control);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-speed) var(--ease-out), border-color var(--transition-speed) var(--ease-out), transform var(--transition-speed) var(--ease-out);
    text-align: center;
    position: relative;
    min-width: 0;
    overflow-wrap: anywhere;
}
.bin-option-btn:hover:not(:disabled) {
    background: var(--brand-tint);
    border-color: var(--brand-ink);
}
.bin-option-btn.correct {
    background: var(--success-soft) !important;
    border-color: var(--success) !important;
    color: var(--text-main) !important;
}
.bin-option-btn.incorrect {
    background: var(--error-soft) !important;
    border-color: var(--error) !important;
    color: var(--text-main) !important;
}

/* ================= SOLUTION BOX ================= */
.solution-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    width: 100%;
    margin-top: 20px;
    animation: fadeIn 0.3s ease;
    text-align: left;
}
.solution-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.solution-icon {
    color: var(--brand-ink);
    display: inline-flex;
}
.solution-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-ink);
    margin: 0;
}
.solution-text {
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.6;
}
.solution-text p {
    margin-bottom: 8px;
}
.solution-text p:last-child {
    margin-bottom: 0;
}

/* ================= GRAPHICAL SUBNET BLOCK / RULER ================= */
.subnet-bar-title {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 6px;
    text-align: left;
    text-transform: uppercase;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}
/* Hinweis "(Lupe)" im Ruler-Titel (theory.js) */
.ruler-zoom-note {
    font-size: 0.75rem;
    color: var(--brand-ink);
}

.subnet-bar-container {
    margin: 32px 0 24px 0;
    background: var(--bg-inset);
    border: 1px solid var(--border-color);
    height: 32px;
    border-radius: var(--radius-chip);
    position: relative;
    display: flex;
    overflow: visible;
}
.subnet-block-item {
    height: 100%;
    border-right: 1px dashed var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    position: relative;
    transition: background-color 0.3s;
}
.subnet-block-item:last-child {
    border-right: none;
}
.subnet-block-item.active-block {
    background: var(--brand-soft);
    color: var(--text-main);
    font-weight: 700;
}
.subnet-block-label-start {
    position: absolute;
    bottom: -18px;
    left: 2px;
    font-size: 0.62rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.subnet-block-label-end {
    position: absolute;
    bottom: -18px;
    right: 2px;
    font-size: 0.62rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.subnet-bar-pin {
    position: absolute;
    top: -12px;
    width: 2px;
    height: 48px;
    background: var(--stamp);
    z-index: 10;
    pointer-events: none;
    transition: left 0.8s var(--ease-out); /* Glide smooth to new IP position */
}
.subnet-bar-pin::before {
    content: '▼';
    position: absolute;
    top: -14px;
    left: -5px;
    font-size: 0.7rem;
    color: var(--stamp);
}
.subnet-bar-pin-label {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--stamp);
    color: #FDFBF7;
    font-size: 0.62rem;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 1px 4px;
    border-radius: var(--radius-chip);
    white-space: nowrap;
}

/* ================= SECTION LOAD ANIMATION ================= */
.app-section {
    animation: slideUpFade 0.35s var(--ease-out);
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ================= KEYBOARD BADGES ================= */
.kbd-badge {
    position: absolute;
    top: 6px;
    left: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--radius-chip);
    user-select: none;
    pointer-events: none;
}
.option-btn .kbd-badge {
    top: 8px;
    left: 8px;
}
.bin-option-btn .kbd-badge {
    top: 4px;
    left: 4px;
}

/* ================= POLISH & ACCESSIBILITY ================= */
.svg-icon {
    width: 1.2em;
    height: 1.2em;
    stroke: currentColor;
    fill: none;
    vertical-align: middle;
    display: inline-block;
    transition: transform var(--transition-speed) var(--ease-out), stroke var(--transition-speed) ease;
}

/* Custom focus ring for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 2px;
}

.app-footer-info a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
}

/* Specific focus resets to ensure visual clarity */
.switch-container input:focus-visible + .switch-slider {
    outline: 2px solid var(--brand-ink);
    outline-offset: 4px;
}

/* Placeholder Contrast (>= 4.5:1 in beiden Themes) */
::placeholder {
    color: var(--text-muted);
    opacity: 1; /* Override default opacity */
}

/* ================= MOBILE RESPONSIVE (iPhone / Smartphones) ================= */

/* Safe area insets for notch devices (iPhone X+) */
@supports (padding: env(safe-area-inset-top)) {
    .app-wrapper {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Header nicht unter Notch / Dynamic Island schieben (PWA-Modus) */
    .app-header {
        padding-top: max(20px, env(safe-area-inset-top));
    }

    /* In installierten iOS-PWAs bleibt die Statusleiste beim Scrollen über dem
       Dokument. Eine feste Hintergrundfläche verhindert Text unter den Icons. */
    @media (display-mode: standalone) {
        body::before {
            content: '';
            position: fixed;
            z-index: 100;
            top: 0;
            right: 0;
            left: 0;
            height: env(safe-area-inset-top);
            background: var(--bg-page);
            pointer-events: none;
        }
    }
}

@media (max-width: 600px) {
    @supports (padding: env(safe-area-inset-top)) {
        .app-header {
            padding-top: max(12px, env(safe-area-inset-top));
        }
    }
}

/* Tablets and small desktops: Navigation in eine eigene Zeile. Mit DE/EN,
   Erfolgsanzeigen, Feedback, Design und Ton braucht die einzeilige Kopfzeile
   rund 1170 px; darunter lief die Seite seitlich über (z. B. 1024 px). */
@media (max-width: 1240px) {
    .app-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 0;
    }

    .app-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        padding: 8px 0 0 0;
        border-top: 1px solid var(--border-color);
    }

    .header-settings {
        gap: 8px;
    }

    .stat-badge {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
}

/* Phones */
@media (max-width: 600px) {
    .app-wrapper {
        padding: 0 12px;
    }

    .app-header {
        margin-bottom: 16px;
        padding: 12px 0;
    }

    /* Stack logo and settings vertically */
    .header-logo {
        gap: 8px;
    }

    .logo-text h1 {
        font-size: 1.15rem;
    }

    .logo-sub {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    .logo-icon .svg-icon {
        width: 1.4rem;
        height: 1.4rem;
    }

    /* Nav wird als fixe Bottom-Tab-Bar weiter unten definiert (BOTTOM TAB BAR) */

    /* Cards */
    .card {
        padding: 16px;
    }

    /* Slide content */
    .slide-title {
        font-size: 1.2rem;
    }

    .slide-content {
        font-size: 0.95rem;
    }

    .slide-navigation {
        gap: 8px;
    }

    .slide-navigation .btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    /* Practice controls */
    .diff-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    /* Answer buttons – single column, taller touch targets */
    .options-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px;
    }

    .option-btn {
        padding: 14px 16px;
        font-size: 1rem;
        min-height: 48px; /* iOS minimum tap target */
    }

    /* Speedrun */
    .speedrun-hero-card {
        padding: 24px 16px;
        margin: 20px auto;
    }

    .speedrun-hero-card h2 {
        font-size: 1.4rem;
    }

    .speedrun-hero-icon svg {
        width: 60px !important;
        height: 60px !important;
    }

    .speedrun-status-bar {
        flex-direction: row;
        gap: 12px;
    }

    .speedrun-stat {
        min-width: 0;
        flex: 1 1 0;
        padding: 10px 12px;
    }

    /* Cheatsheet table */
    .cheatsheet-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cheatsheet-table {
        font-size: 0.78rem;
        min-width: 480px;
    }

    /* Binary trainer */
    .bin-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Modal */
    .modal-card {
        margin: 16px;
        padding: 24px 16px;
    }

    /* Sandbox */
    .octet-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Sandbox inputs */
    .sandbox-inputs {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .app-footer-info {
        font-size: 0.78rem;
        padding: 12px 0;
    }

    /* Accordion */
    .accordion-trigger {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    /* Achievements */
    .achievements-list {
        gap: 10px;
    }

    .achievement-item {
        padding: 12px;
    }

    /* Solution box */
    .solution-box {
        font-size: 0.88rem;
    }

    /* Question text */
    .question-text {
        font-size: 1rem;
    }

    /* Keyboard badges hidden on mobile (no physical keyboard) */
    .kbd-badge {
        display: none;
    }

    /* Button sizing */
    .btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

    .btn-large {
        padding: 14px 28px;
        font-size: 1rem;
    }
}

/* Very small phones (iPhone SE / 320px) */
@media (max-width: 380px) {
    .app-wrapper {
        padding: 0 8px;
    }

    .logo-text h1 {
        font-size: 1rem;
    }

    .nav-link {
        padding: 7px 10px;
        font-size: 0.75rem;
    }

    .stat-badge {
        padding: 4px 8px;
        font-size: 0.72rem;
    }

    .badge-label {
        display: none;
    }

    .card {
        padding: 12px;
    }

    .option-btn {
        font-size: 0.9rem;
    }
}

/* ================= INTERACTIVE BIT-EXPLORER ================= */
.bit-bar-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 20px;
    margin-bottom: 24px;
}

.bit-toggle-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.octet-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.octet-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-align: center;
}

.octet-bits-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.bit-box {
    padding: 0;
    aspect-ratio: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-chip);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}

.bit-box:focus-visible {
    outline: 3px solid var(--brand-ink);
    outline-offset: 2px;
}

.bit-box:hover {
    border-color: var(--border-strong);
}

/* Farbcode: Netz-Bits = Grün, Host-Bits = Petrol */
.bit-box.net-bit {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}
.bit-box.net-bit:hover {
    border-color: var(--success);
}

.bit-box.host-bit {
    background: var(--brand-tint);
    border-color: var(--brand-soft);
    color: var(--brand-ink);
}
.bit-box.host-bit:hover {
    border-color: var(--brand-ink);
}

/* Bitstats Grid */
.bit-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.bit-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 16px;
    text-align: center;
    transition: border-color 200ms var(--ease-out);
}

.bit-stat-card.success-border {
    border-color: var(--success);
    background: var(--success-soft);
}
.bit-stat-card.info-border {
    border-color: var(--brand-ink);
    background: var(--brand-tint);
}
.bit-stat-card.accent-border {
    border-color: var(--stamp-ink);
    background: var(--stamp-soft);
}

.bit-stat-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    font-family: var(--font-mono);
    margin-bottom: 4px;
}

.bit-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}

.bit-explanation-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.bit-explanation-box strong {
    color: var(--text-main);
}

/* Highlight-Chips in Erklärungen — Druckfarben:
   aktives Oktett = Petrol, Magic Number = Stempelrot, Netz-Bits = Grün */
.active-octet-highlight {
    background: var(--brand-soft);
    border: 1px solid var(--brand-ink);
    color: var(--brand-ink) !important;
    padding: 1px 6px;
    border-radius: var(--radius-chip);
    font-weight: 700;
    font-family: var(--font-mono);
    display: inline-block;
}

.magic-number-highlight {
    background: var(--stamp-soft);
    border: 1px solid var(--stamp-ink);
    color: var(--stamp-ink) !important;
    padding: 1px 6px;
    border-radius: var(--radius-chip);
    font-weight: 700;
    font-family: var(--font-mono);
    display: inline-block;
}

.network-bits-highlight {
    background: var(--success-soft);
    border: 1px solid var(--success);
    color: var(--success) !important;
    padding: 1px 6px;
    border-radius: var(--radius-chip);
    font-weight: 700;
    font-family: var(--font-mono);
    display: inline-block;
}

@media (max-width: 768px) {
    .bit-toggle-bar {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .octet-group {
        display: grid;
        grid-template-columns: 80px 1fr;
        align-items: center;
        gap: 8px;
    }
    .octet-label {
        text-align: left;
    }
    .bit-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .bit-stats-grid {
        grid-template-columns: 1fr;
    }
    .octet-group {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .octet-label {
        text-align: center;
        margin-bottom: 4px;
    }
}

/* Active Press simulated keyboard feedback class */
.btn:active, .btn.active-press,
.option-btn:active, .option-btn.active-press,
.bin-option-btn:active, .bin-option-btn.active-press,
.nav-link:active, .nav-link.active-press,
.diff-btn:active, .diff-btn.active-press,
.accordion-trigger:active, .accordion-trigger.active-press {
    transform: scale(0.98) !important;
    transition: transform 80ms var(--ease-out) !important;
}

/* Respect user prefers-reduced-motion (A11y requirements) */
@media (prefers-reduced-motion: reduce) {
    /* Nur Bewegung/Animation neutralisieren — NICHT transform/filter global
       (Audit P2: transform:none auf * bricht Layout-relevante Transforms). */
    * {
        animation-delay: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }

    .logo-icon {
        animation: none !important;
    }

    .btn:active, .btn.active-press,
    .option-btn:active, .option-btn.active-press,
    .bin-option-btn:active, .bin-option-btn.active-press,
    .nav-link:active, .nav-link.active-press,
    .diff-btn:active, .diff-btn.active-press,
    .accordion-trigger:active, .accordion-trigger.active-press {
        transform: none !important;
    }
}

/* ================= SRS / SPACED REPETITION PANEL ================= */
.srs-panel {
    margin-bottom: 24px;
    padding: 0;
    overflow: clip;
}

@media (max-width: 480px) {
    /* Eine 60-Sekunden-Aufgabe darf auf einem 320px-Gerät nicht schon beim
       Start hinter der festen Tab-Bar verschwinden. Regeln bleiben sichtbar,
       die doppelte Werbeeinleitung und das große Schmuckicon entfallen. */
    .speedrun-hero-card {
        margin: 0 auto;
        padding: 14px 12px;
    }

    .speedrun-hero-icon,
    .speedrun-hero-card > p:not(.speedrun-readiness) {
        display: none;
    }

    .speedrun-hero-card h2 {
        margin-bottom: 10px;
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .speedrun-rules {
        gap: 6px;
        margin-bottom: 10px;
        padding: 8px 10px;
    }

    .rule-item {
        gap: 8px;
    }

    .rule-num {
        width: 24px;
        height: 24px;
    }

    .rule-txt {
        font-size: 0.82rem;
        line-height: 1.25;
    }

    .speedrun-readiness {
        margin: 0 0 10px !important;
        padding: 8px 10px;
        font-size: 0.8rem !important;
        line-height: 1.3;
    }

    .speedrun-status-bar {
        gap: 8px;
        margin-bottom: 10px;
    }

    .speedrun-stat {
        padding: 7px 8px;
        border-radius: var(--radius-control);
    }

    .stat-label {
        font-size: 0.62rem;
    }

    .stat-value {
        font-size: 1.35rem;
    }
}

.srs-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    padding: 12px 24px;
    flex-wrap: nowrap;
    cursor: pointer;
}

.srs-panel-heading {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
}

.srs-panel-content {
    padding: 0 24px 20px;
}

.srs-panel-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    max-width: 60ch;
    line-height: 1.4;
}

.srs-due-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: var(--radius-chip);
    color: var(--warning);
    background: var(--warning-soft);
    border: 1px solid var(--warning);
    white-space: nowrap;
}

.srs-due-badge.all-clear {
    color: var(--success);
    background: var(--success-soft);
    border-color: var(--success);
}

.srs-mastery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.legal-page-card {
    max-width: 72ch;
    margin: 0 auto;
}

.srs-next-action {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--brand);
    background: var(--brand-soft);
    color: var(--text-main);
    font-size: 0.84rem;
    line-height: 1.5;
}

.srs-skill {
    padding: 10px 12px;
    border-radius: var(--radius-control);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-speed) var(--ease-out),
                background var(--transition-speed) var(--ease-out);
    cursor: default;
}

.srs-skill.is-due {
    border-color: var(--warning);
    background: var(--warning-soft);
}

.srs-skill.is-mastered {
    border-color: var(--success);
    background: var(--success-soft);
}

.srs-skill-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.srs-skill-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    flex: 1 1 auto; /* schiebt Accuracy + Status nach rechts */
}

/* K12c: Trefferquote direkt in der Kachel (mobil sichtbar, nicht nur im Tooltip) */
.srs-skill-acc {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.srs-skill.is-weak .srs-skill-acc {
    color: var(--error);
    font-weight: 700;
}

.srs-skill-status {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.srs-skill.is-due .srs-skill-status {
    color: var(--warning);
}

.srs-pips {
    display: flex;
    gap: 4px;
}

.srs-pip {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    transition: background var(--transition-speed) var(--ease-out);
}

.srs-skill.is-due .srs-pip,
.srs-skill.is-mastered .srs-pip {
    border-color: transparent;
}

.srs-pip.filled {
    background: var(--brand);
    border-color: var(--brand);
}

.srs-skill.is-mastered .srs-pip.filled {
    background: var(--success);
    border-color: var(--success);
}

@media (max-width: 600px) {
    .srs-panel-content {
        padding: 0 14px 14px;
    }

    .srs-mastery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================= MOTION POLISH (Content-Transitions) ================= */
html {
    scroll-behavior: smooth;
}

/* Tab-Wechsel: Sektion gleitet sanft rein (re-triggert bei display:none -> block) */
.app-section:not(.hidden) {
    animation: sectionIn 0.3s var(--ease-out) both;
}

@keyframes sectionIn {
    /* Kein transformierter Tab-Container: Ein transformierter Vorfahr macht
       mobile `position: fixed`-Aktionen relativ zum langen Dokument statt zum
       Viewport. Die ruhige Überblendung erhält den Zustandswechsel ohne diese
       fehlerhafte neue Bezugsebene. */
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Neue Frage: Text & Titel faden beim Laden ein (JS toggelt .q-enter) */
.question-text.q-enter,
.question-tag.q-enter {
    animation: questionIn 0.35s var(--ease-out) both;
}

@keyframes questionIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Antwortoptionen: gestaffeltes Auftauchen (Buttons werden je Frage neu erzeugt) */
.options-grid .option-btn {
    animation: optionIn 0.35s var(--ease-out) both;
}
.options-grid .option-btn:nth-child(1) { animation-delay: 0.03s; }
.options-grid .option-btn:nth-child(2) { animation-delay: 0.08s; }
.options-grid .option-btn:nth-child(3) { animation-delay: 0.13s; }
.options-grid .option-btn:nth-child(4) { animation-delay: 0.18s; }

@keyframes optionIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Richtige Antwort: kurzer "Pop" als Belohnungs-Feedback */
.option-btn.correct {
    animation: correctPop 0.35s var(--ease-out);
}

@keyframes correctPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* SRS-Skill-Karten: sanft gestaffelt rein beim Öffnen des Trainings */
.srs-skill {
    animation: questionIn 0.35s var(--ease-out) both;
}

/* Reduced-Motion: Content-Transitions ebenfalls deaktivieren */
@media (prefers-reduced-motion: reduce) {
    .app-section:not(.hidden),
    .question-text.q-enter,
    .question-tag.q-enter,
    .options-grid .option-btn,
    .option-btn.correct,
    .srs-skill,
    .logo-icon {
        animation: none !important;
    }
}

/* ================= iPHONE / TOUCH OPTIMIERUNG ================= */

/* Schnelle Taps: kein 300ms-Delay, kein Doppeltipp-Zoom auf Buttons */
.btn, .option-btn, .bin-option-btn, .nav-link, .diff-btn,
.accordion-trigger, .bit-box, .switch-container, .theme-toggle, a, button,
input[type="checkbox"], select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Touch-Geräte (iPhone): :hover-Styles "kleben" nach dem Tippen.
   Deshalb hier neutralisieren, damit Buttons nach dem Antippen nicht
   im Hover-Zustand hängen bleiben. */
@media (hover: none) {
    .option-btn:hover {
        background: var(--bg-card);
        border-color: var(--border-strong);
    }
    .btn-primary:hover {
        background: var(--brand);
        border-color: var(--brand);
    }
    .btn-secondary:hover:not(:disabled) {
        background: var(--bg-card);
        border-color: var(--border-strong);
    }
    .nav-link:hover {
        background: transparent;
        color: var(--text-muted);
    }
    .nav-link.active:hover {
        background: var(--bg-surface);
        color: var(--text-main);
    }
    .card:hover {
        border-color: var(--border-color);
    }
    .bin-option-btn:hover:not(:disabled) {
        background: var(--bg-card);
        border-color: var(--border-strong);
    }
    /* Die :active-Press-Rückmeldung bleibt erhalten und liefert das Tap-Feedback. */
}

/* ================= MOBILE: BOTTOM TAB BAR (Daumen-Zone) ================= */
/* Desktop: Icons & Kurzlabel aus -> Text-Tabs wie gehabt */
.nav-icon { display: none; }
.nav-text-short { display: none; }

@media (max-width: 600px) {
    /* Nav als fixe iOS-artige Tab-Bar an den unteren Bildschirmrand */
    .app-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        order: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        gap: 2px;
        overflow: hidden;
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        background: var(--bg-card);
        padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
        box-shadow: 0 -1px 3px rgba(26, 25, 24, 0.06);
    }

    .nav-link {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 50px;
        padding: 6px 2px;
        border-radius: var(--radius-control);
        font-size: 0.66rem;
        font-weight: 600;
        white-space: nowrap;
        text-align: center;
    }

    .nav-link.active,
    .nav-link.active:hover {
        background: var(--brand-soft);
        color: var(--text-main);
        box-shadow: none;
    }

    .nav-icon {
        display: block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Langes Label kürzen, Kurzform zeigen */
    .nav-text-short { display: inline; }
    .nav-link[data-tab="tab-cheatsheet"] .nav-text { display: none; }

    /* Platz schaffen, damit die fixe Bar keinen Inhalt verdeckt */
    .app-wrapper {
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }
    .app-footer-info {
        margin-bottom: 4px;
    }

    /* Die feste Tab-Bar darf nie den Weiter-Button einer Lernseite überdecken.
       Das zusätzliche Ende schafft echten Scrollraum, wenn eine Seite auf einem
       sehr kleinen Gerät minimal höher als der sichtbare Bereich ist. */
    .journey-workspace-body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
}

/* ================= MOBILE: GRÖSSERE BIT-EXPLORER TOUCH-TARGETS ================= */
@media (max-width: 480px) {
    /* Octet-Block soll volle Kartenbreite nutzen (justify-items:center ließ
       den Bit-Container vorher auf Inhaltsbreite schrumpfen) */
    .octet-group {
        justify-items: stretch;
    }
    .octet-bits-container {
        width: 100%;
        gap: 5px;
    }
    .octet-label {
        text-align: center;
    }
    .bit-box {
        aspect-ratio: auto;
        height: 44px;          /* echtes Tap-Target trotz 8 Spalten */
        font-size: 0.72rem;
    }
}

/* ================= MOBILE: SANDBOX-VISUALIZER OVERFLOW-FIX ================= */
/* Ruler-Blöcke konnten wegen min-width:auto nicht unter ihren Text schrumpfen
   -> Flex-Row sprengte die Breite und dehnte den ganzen Visualizer (440px). */
@media (max-width: 600px) {
    .subnet-block-item {
        min-width: 0;
    }
    .subnet-block-item.active-block {
        overflow: visible;
        white-space: nowrap;
    }
    .octet-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .multiples-flow {
        flex-wrap: wrap;
    }
    /* Ergebnis-Tabelle STAPELN statt seitlich scrollen: jede Zeile wird eine
       kleine Karte mit Label -> Wert -> Erklärung untereinander. */
    .result-table,
    .result-table tbody,
    .result-table tr,
    .result-table td {
        display: block;
        width: 100%;
    }
    .result-table { overflow: visible; }
    .result-table tr {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-control);
        padding: 8px 10px;
        margin-bottom: 10px;
        background: var(--bg-card);
    }
    .result-table td {
        border-bottom: none;
        padding: 2px 0;
    }
    .result-table td:first-child {
        color: var(--text-muted);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-family: var(--font-mono);
    }
    .result-table td code {
        font-size: 0.95rem;
        word-break: break-all;
    }
    .result-table td small {
        display: block;
        margin-top: 2px;
        line-height: 1.4;
        white-space: normal;
    }
    .sandbox-visualization {
        max-width: 100%;
    }
}

/* ================= MOBILE-FIX-PASS 2 (Audit-Befunde) ================= */
@media (max-width: 600px) {
    /* (2) Speedrun-Status-Bar: Stats schrumpfbar statt 150px-min -> kein Overflow */
    .speedrun-stat {
        min-width: 0;
        flex: 1 1 0;
        padding: 12px 8px;
    }

    /* (3+8) Theorie-Tabellen IM AKKORDEON stapeln (Stadt-Analogie + binäres UND) */
    .accordion-content .theory-table,
    .accordion-content .theory-table tbody,
    .accordion-content .theory-table tr,
    .accordion-content .theory-table td {
        display: block;
        width: 100%;
    }
    /* Kopfzeile bleibt für Screenreader erhalten. Visuell werden die Tabellen
       weiter als kompakte Karten gestapelt. */
    .accordion-content .theory-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .accordion-content .theory-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-control);
        padding: 8px 10px;
        background: var(--bg-card);
    }
    .accordion-content .theory-table td {
        border: none;
        padding: 3px 0;
        word-break: break-word;
    }
    .accordion-content .theory-table td:first-child {
        font-weight: 700;
        color: var(--text-main);
    }

    /* (6) 5-Spalten-Theorie-Tabelle in den Lern-Slides: gekapselt scrollbar
       (echte Vergleichsmatrix, Stapeln unübersichtlich) */
    .slide-content .theory-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.74rem;
        white-space: nowrap;
    }
    .slide-content .theory-table th,
    .slide-content .theory-table td { padding: 8px 10px; }

    /* VLSM-Lösungstabelle in der Solution-Box: gekapselt scrollen statt die
       Seite horizontal aufzusprengen (6 Spalten passen nie in 375px). */
    .solution-text .theory-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* (4) Achievement-Toast über die Bottom-Bar heben (verdeckte sie sonst) */
    .achievement-toast {
        bottom: calc(74px + env(safe-area-inset-bottom) + 12px);
        left: 12px;
        right: 12px;
        max-width: none;
    }

    /* (7) Header-Stats entlasten: Labels weg, nur Icon + Zahl; Umbruch erlauben */
    .header-settings { flex-wrap: wrap; justify-content: flex-end; }
    .badge-label { display: none; }

    /* (9) Cheatsheet-Referenztabelle: kompakter, damit weniger Seitwärts-Scroll */
    .cheatsheet-table { min-width: 430px; font-size: 0.74rem; }
    .cheatsheet-table th,
    .cheatsheet-table td { padding: 8px 8px; }

    /* (Visualizer) Pin-/Block-Labels kleiner + horizontalen Spill kappen */
    .sandbox-visualization { overflow-x: clip; }
    .subnet-bar-pin-label { font-size: 0.58rem; padding: 1px 3px; }
    .subnet-block-item.active-block { font-size: 0.6rem; }
    .subnet-block-label-start,
    .subnet-block-label-end { font-size: 0.55rem; }

    /* (Politur) Fokus-Modus Dropdown: Luft zum nativen Pfeil */
    .custom-select { text-overflow: ellipsis; padding-right: 36px; }
}

/* (5) Schwierigkeits-Buttons stapeln: 3 untereinander, Titel + Klasse nebeneinander */
@media (max-width: 480px) {
    .diff-btn-group {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .diff-btn {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        min-height: 48px;
        text-align: left;
    }
    .diff-desc { font-size: 0.72rem; }

    /* SRS-Grid auf sehr schmalen Screens 1-spaltig für mehr Luft */
}
@media (max-width: 380px) {
    .srs-mastery-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Zugangs-Vorhang (PIN-Gate) — siehe gate.js. CSP-konform (self).
   Gleiche Design-Sprache wie die App: Papierkarte, Petrol-Button.
   ============================================================ */
html.gate-pending body { display: none !important; }

#pin-gate {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: var(--bg-page);
    font-family: var(--font-sans);
}
#pin-gate-form {
    width: 100%;
    max-width: 340px;
    display: grid;
    gap: 0.75rem;
    padding: 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}
.pin-gate-kicker {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-ink);
}
.pin-gate-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main);
}
.pin-gate-hint { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
#pin-gate-input {
    height: 3rem;
    border-radius: var(--radius-control);
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 1.1rem;
    font-family: var(--font-mono);
    text-align: center;
    letter-spacing: 0.2em;
    padding: 0 1rem;
    outline: none;
}
#pin-gate-input:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-soft); }
.pin-gate-error { margin: 0; min-height: 1.1rem; font-size: 0.85rem; font-weight: 600; color: var(--error); }
.pin-gate-btn {
    height: 3rem;
    border: 1px solid var(--brand);
    border-radius: var(--radius-control);
    background: var(--brand);
    color: #FDFBF7;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.pin-gate-btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

/* === Lernstand-Verwaltung (P0-2: Export/Import/Reset) === */
.lernstand-controls {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-strong);
}
.lernstand-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.lernstand-controls-row .btn {
    font-size: 0.9rem;
    padding: 6px 14px;
}
.btn-danger {
    background: var(--stamp);
    color: #FDFBF7;
    border: 1px solid var(--stamp);
}
.btn-danger:hover { background: var(--error); border-color: var(--error); }
.lernstand-status {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--success);
    min-height: 1.2em;
}
.lernstand-status.lernstand-status-error {
    color: var(--error);
}
/* Inline-Bestätigungs-Dialog für Reset (kein browser confirm()) */
.reset-confirm-dialog {
    margin-top: 10px;
    padding: 12px;
    background: var(--error-soft);
    border: 1px solid var(--error);
    border-radius: var(--radius-control);
}
.reset-confirm-dialog.hidden { display: none; }
.reset-confirm-title {
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-main);
}
.reset-confirm-hint {
    font-size: 0.82rem;
    margin: 0 0 10px 0;
    color: var(--text-muted);
}
.reset-confirm-actions {
    display: flex;
    gap: 8px;
}
.reset-confirm-actions .btn { font-size: 0.85rem; padding: 5px 12px; }

@media (max-width: 480px) {
    .placement-workspace {
        padding-top: 6px;
    }

    .placement-head {
        gap: 8px;
        margin-bottom: 12px;
    }

    .placement-body > h2 {
        margin-bottom: 6px;
        font-size: 1.55rem;
    }

    #placement-intro {
        margin-bottom: 12px;
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .placement-question,
    .placement-result {
        padding-top: 12px;
    }

    .placement-question h3,
    .placement-feedback h3,
    .placement-result h3 {
        margin: 6px 0 8px;
        font-size: 1.25rem;
    }

    .placement-question-text,
    .placement-feedback p,
    .placement-result > p {
        font-size: 0.92rem;
        line-height: 1.4;
    }

    #placement-form {
        gap: 7px;
        margin-top: 12px;
    }

    #placement-answer {
        min-height: 48px;
    }

    .placement-result-actions {
        display: grid;
        grid-template-columns: 1fr;
        margin: 12px 0;
    }
}

/* ================= FEEDBACK (Testphase, ohne Backend) =================
   Ein Dialog, viele Einstiege: Kopfzeile, Fußzeile, unter jeder Aufgabe und
   nach einer abgeschlossenen Lektion. Ruhig wie der Rest der App. */
.header-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--bg-card);
    color: var(--text-muted);
    font: 600 0.85rem var(--font-sans);
    cursor: pointer;
    transition: color var(--transition-speed) var(--ease-out), border-color var(--transition-speed) var(--ease-out);
}

.header-feedback-btn:hover {
    color: var(--text-main);
    border-color: var(--border-strong);
}

.header-feedback-btn .svg-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.footer-link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.workspace-feedback {
    margin-top: 18px;
    text-align: right;
}

.workspace-feedback .btn-text {
    font-size: 0.85rem;
}

.feedback-invite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.feedback-dialog {
    /* Der globale Reset setzt margin: 0 — ohne auto klebt der Dialog links. */
    margin: auto;
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: var(--shadow-raised);
}

.feedback-dialog::backdrop {
    background: rgba(26, 25, 24, 0.55);
}

.feedback-form {
    display: grid;
    gap: 14px;
    padding: clamp(18px, 4vw, 28px);
}

.feedback-form h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
}

.feedback-intro,
.feedback-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.feedback-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
}

.feedback-topics legend {
    width: 100%;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.feedback-optional {
    color: var(--text-muted);
    font-weight: 400;
}

.feedback-topics label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
    font-size: 0.88rem;
    cursor: pointer;
}

.feedback-topics label:has(input:checked) {
    border-color: var(--brand-ink);
    background: var(--brand-soft);
}

.feedback-message-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.feedback-message {
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--bg-inset);
    color: var(--text-main);
    font: 1rem/1.5 var(--font-sans);
    resize: vertical;
}

.feedback-screenshot {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.feedback-screenshot-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    font-size: 0.85rem;
}

.feedback-screenshot-name {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.feedback-context {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
}

.feedback-context-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.feedback-context-preview {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.feedback-technical {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 0.85rem;
    cursor: pointer;
}

.feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feedback-actions a.btn {
    text-decoration: none;
}

.feedback-status {
    min-height: 1.2em;
    font-size: 0.88rem;
    color: var(--success);
}

.feedback-status.is-error {
    color: var(--error);
}

.license-text {
    max-height: 340px;
    overflow: auto;
    margin: 8px 0 20px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    background: var(--bg-inset);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

@media (max-width: 600px) {
    .header-feedback-btn {
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .header-feedback-text {
        display: none;
    }

    .workspace-feedback {
        text-align: left;
    }

    .feedback-actions .btn {
        flex: 1 1 100%;
    }

    .feedback-topics {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .feedback-topics legend {
        grid-column: 1 / -1;
    }

    .feedback-topics label {
        padding: 0 10px;
        font-size: 0.82rem;
    }
}

/* ================= STORE-APP: TÄGLICHE ERINNERUNG =================
   Nur in der Capacitor-App sichtbar (native-shell.js entfernt hidden). */
.native-reminder {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.native-reminder[hidden] {
    display: none;
}

.native-reminder-title {
    font-weight: 600;
}

.native-reminder-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.native-reminder-toggle,
.native-reminder-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.native-reminder-time input {
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--bg-inset);
    color: var(--text-main);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.native-reminder-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Language controls stay reachable in the welcome screen and native shell. */
.language-switch { display: inline-flex; flex-shrink: 0; gap: 2px; }
.language-switch button { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.language-switch button[aria-pressed="true"] { background: var(--brand); color: #FDFBF7; }
.language-switch button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.learning-active .header-settings { display: flex; }
.learning-active .header-settings > :not(.language-switch):not(#language-status) { display: none; }

/* Auf schmalen Handys passen Wortmarke, DE/EN und zwei Symbolknöpfe nicht in
   eine Zeile. In Willkommen und Kenntnis-Check bleibt die Kopfzeile deshalb
   einzeilig: Die Wortmarke wird nur visuell ausgeblendet (Screenreader lesen
   sie weiter), damit Eingabefeld und Prüfen-Knopf ohne Scrollen sichtbar sind. */
@media (max-width: 379px) {
    .journey-welcome-active .logo-text,
    .placement-active .logo-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}