/* ============================================================
   WIFI Technik-Plattform – modernes Design (v6)
   Indigo-Header, schwebende Karten, farbcodierte Module,
   Monospace als technische Signatur. Helle, kühle Flächen.
   ============================================================ */

:root {
    --bg:            #eef1f6;
    --surface:       #ffffff;
    --surface-2:     #f6f7fb;
    --ink:           #161a2b;
    --ink-2:         #2c3142;
    --muted:         #5e6678;
    --line:          #e4e8f0;

    --primary:       #4f46e5;
    --primary-dark:  #4338ca;
    --primary-soft:  #eef0ff;
    --primary-tint:  #e3e6ff;

    --danger:        #dc2f3a;
    --danger-soft:   #fdecee;
    /* Analog zu --ok-text: dunklerer Ton für Textkontexte (Fehlermeldungen, Chips),
       da --danger gegen --danger-soft nur 4.08:1 statt der geforderten 4.5:1 erreicht. */
    --danger-text:   #b3261e;
    --ok:            #0e9f6e;
    --ok-soft:       #e7f7f0;
    /* Dunkler als --ok: für Fließtext/Labels auf hellem Grund gedacht, da --ok als
       Textfarbe nur ~3:1 Kontrast erreicht (WCAG AA verlangt 4.5:1 für Text). --ok
       selbst bleibt für Hintergründe/Rahmen/Icon-Flächen, wo weniger Kontrast reicht. */
    --ok-text:       #0a7c56;

    /* Chip-/Pill-Farben: theme-sicher, für Kategorie-Badges u.ä. */
    --chip-gruen-bg:  #e7f7ee;
    --chip-gruen-fg:  #15803d;
    --chip-gruen-rand:#16a34a66;
    --chip-lila-bg:   #f1ecfd;
    --chip-lila-fg:   #6d28d9;
    --chip-lila-rand: #7c3aed66;
    --chip-amber-bg:  #fff5e6;
    --chip-amber-fg:  #96570d;
    --chip-amber-rand:#f2e0bd;
    --chip-grau-bg:   #eceef0;
    --chip-grau-fg:   #656b73;

    --kopf-grad:     linear-gradient(115deg, #2e2b8f 0%, #4f46e5 58%, #6366f1 100%);

    --radius:        14px;
    --radius-sm:     9px;
    --shadow-sm:     0 1px 2px rgba(20,25,45,.05), 0 2px 6px rgba(20,25,45,.05);
    --shadow-md:     0 8px 26px rgba(49,46,129,.14);

    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Aliase für ältere Inline-Stile */
    --gedaempft: var(--muted);
    --papier: var(--bg);
    --tinte: var(--ink);
    --flaeche: var(--surface);
    --linie: var(--line);
    --akzent: var(--primary);
    --akzent-dyn: var(--primary-dark);
    --akzent-hell: var(--primary-soft);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 5px; }

::selection { background: var(--primary-tint); }

/* ---------- Kopf (Indigo-Leiste) ---------- */
.kopf {
    background: var(--kopf-grad);
    box-shadow: 0 2px 14px rgba(46,43,143,.25);
    position: sticky;
    top: 0;
    z-index: 40;
}
.kopf-inhalt {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.7rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem 1rem;
    flex-wrap: wrap;
}
.kopf-zeile2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 100%;         /* erzwingt immer eine eigene, zweite Zeile */
    justify-content: flex-end;
}
.kopf-konto {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255,255,255,.22);
    flex: none;
}
.marke { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; flex: none; }
.marke-logo { display: inline-flex; width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.marke-logo svg { width: 30px; height: 30px; display: block; }

.marke:hover { text-decoration: none; }
.marke-text { font-weight: 650; letter-spacing: -0.01em; }

.kopf-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    flex-wrap: wrap;
}
.kopf-nav > a {
    color: rgba(255,255,255,.86);
    padding: 0.38rem 0.6rem;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
.kopf-nav > a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.kopf-nav .btn {
    background: #fff;
    color: var(--primary-dark);
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.kopf-nav .btn:hover { background: #f1f1ff; color: var(--primary-dark); }

.kopf-suche { margin: 0; position: relative; }
.kopf-suche input[type="search"] {
    padding: 0.42rem 0.7rem 0.42rem 2rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 9px;
    font-size: 0.88rem;
    font-family: inherit;
    background-color: rgba(255,255,255,.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.55rem center;
    background-size: 0.95rem;
    color: #fff;
    width: 11.5rem;            /* feste Breite -> kein Layout-Sprung beim Fokus */
    transition: background-color .18s, box-shadow .18s;
}
.kopf-suche input::placeholder { color: rgba(255,255,255,.75); }
.kopf-suche input[type="search"]:focus {
    outline: none;
    background-color: #fff;
    color: var(--ink);
    box-shadow: 0 0 0 2px rgba(255,255,255,.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2430' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
}
/* aktive Seite in der Navigation hervorheben */
.kopf-nav > a.aktiv { background: rgba(255,255,255,.22); color: #fff; font-weight: 600; }

/* ---------- Layout ---------- */
.inhalt { max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem 3.5rem; }
.fuss { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; color: var(--muted); font-size: 0.83rem; display: flex; flex-direction: column; gap: 0.7rem; }
.fuss-zeile1 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.8rem; }
.fuss-marke { font-weight: 700; color: var(--ink); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fuss-btn2 { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 7px; background: var(--surface-2); color: var(--muted); text-decoration: none; font-size: 0.8rem; font-weight: 500; border: 1px solid var(--line); transition: background .12s, color .12s, border-color .12s; }
.fuss-btn2:hover { background: var(--primary-soft, #eef0ff); color: var(--primary); border-color: var(--primary); text-decoration: none; }

.seiten-titel { font-size: 1.7rem; margin: 0 0 1.4rem; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: break-word; word-break: break-word; }
.gruppen-titel { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.7rem; font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid transparent;
    padding: 0.55rem 1.05rem;
    border-radius: 10px;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(79,70,229,.28);
    transition: transform .12s, box-shadow .15s, background .15s;
    line-height: 1.3;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,70,229,.34); }
.btn:active { transform: translateY(0); }
.btn-klein { padding: 0.36rem 0.75rem; font-size: 0.87rem; border-radius: 8px; }
.btn-rand {
    background: var(--surface); color: var(--primary-dark);
    border-color: var(--line); box-shadow: var(--shadow-sm);
}
.btn-rand:hover { background: var(--primary-soft); border-color: var(--primary-tint); color: var(--primary-dark); }
.btn-gefahr { background: var(--surface); color: var(--danger-text); border-color: #f0cfd2; box-shadow: none; }
.btn-gefahr:hover { background: var(--danger-soft); border-color: #e7b6bb; }

/* ---------- Werkzeugleiste / Filter ---------- */
.werkzeugleiste { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }
.werkzeugleiste input[type="search"], .werkzeugleiste select {
    padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px;
    font-size: 0.94rem; font-family: inherit; background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.werkzeugleiste input[type="search"] { flex: 1; min-width: 220px; }
.werkzeugleiste input[type="search"]:focus, .werkzeugleiste select:focus { border-color: var(--primary); }

/* ---------- Karten-Listen (Kurse/Module/Methoden/Tests) ---------- */
.kursliste { display: grid; gap: 0.85rem; }
@media (min-width: 720px) { .kursliste { grid-template-columns: repeat(2, 1fr); } }

.kurskarte {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kurskarte:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-tint); }
.kurskarte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.kurskarte h2 { font-size: 1.08rem; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.kurskarte-meta { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.suche-schnipsel { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.kurskarte p { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.93rem; }

.abzeichen-reihe { display: flex; gap: 0.4rem; margin-top: 0.8rem; flex-wrap: wrap; }
.abzeichen {
    font-size: 0.74rem; padding: 0.16rem 0.6rem; border-radius: 20px;
    background: var(--primary-soft); color: var(--primary-dark); font-weight: 600;
}
.abzeichen-standort { font-family: var(--mono); background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.abzeichen-zahl { font-family: var(--mono); background: var(--ok-soft); color: var(--ok-text); border: 1px solid #c7ecdc; }

.kurskarte-modul { border-left-width: 5px; border-left-style: solid; }
.modul-nr {
    display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
    background: var(--ink); color: #fff; padding: 0.12rem 0.5rem; border-radius: 6px;
    vertical-align: middle; margin-right: 0.2rem; letter-spacing: 0.02em;
}

/* ---------- Detailseite ---------- */
.zurueck { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.85rem; margin-bottom: 1rem; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.zurueck:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-tint, #f0f5ff); text-decoration: none; transform: translateX(-2px); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.85rem; margin-bottom: 0.9rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumb-trenner { color: var(--line); }
.dashboard-anpassen { position: relative; }
.dashboard-anpassen summary { list-style: none; cursor: pointer; }
.dashboard-anpassen summary::-webkit-details-marker { display: none; }
.dashboard-anpassen-form {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow-md); padding: 0.9rem 1rem; width: max-content; min-width: 15rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.detail-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.detail-kopf h1 { font-size: 1.7rem; margin: 0 0 0.4rem; font-weight: 700; letter-spacing: -0.02em; }
.detail-meta { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

.karte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-top: 1.1rem;
}
.karte > h3, .karte-inhalt > :first-child { margin-top: 0; }
.karte:not(details) { padding: 1.2rem 1.3rem; }
.karte h3 {
    margin: 0 0 0.9rem; font-size: 0.76rem; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--muted); font-weight: 700;
}

.backup-codes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem;
    margin: 1rem 0; padding: 1rem; background: var(--surface-2); border-radius: 10px;
}
.backup-codes-grid code { font-size: 1rem; text-align: center; padding: 0.4rem; background: var(--surface); border-radius: 6px; border: 1px solid var(--line); }

/* Aufklappbare Karten */
details.karte { padding: 0; }
details.karte > summary {
    list-style: none; cursor: pointer; padding: 0.9rem 1.3rem;
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 700; user-select: none; transition: color .15s;
}
details.karte > summary::-webkit-details-marker { display: none; }
details.karte > summary::before {
    content: ""; width: 0; height: 0;
    border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transition: transform .18s ease; flex: none;
}
details.karte[open] > summary::before { transform: rotate(90deg); }
details.karte > summary:hover { color: var(--primary); }
.anzahl, details.karte > summary .anzahl {
    font-family: var(--mono); background: var(--primary-soft); color: var(--primary-dark);
    border-radius: 20px; padding: 0 0.5rem; font-size: 0.72rem; letter-spacing: 0; font-weight: 700;
}
.seiten-titel .anzahl { font-size: 0.6em; vertical-align: middle; margin-left: .3rem; }
.karte-inhalt { padding: 0 1.3rem 1.2rem; }
.karte-kopf-statisch {
    padding: 0.9rem 1.3rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line);
}
.leer-text { color: var(--muted); margin: 0; }

.themen-text { line-height: 1.65; white-space: pre-line; }

.notiz { border-left: 3px solid var(--primary); padding: 0.55rem 0.95rem; margin-bottom: 0.85rem; background: var(--surface-2); border-radius: 0 8px 8px 0; }
.notiz-datum { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.notiz-text { margin: 0.25rem 0 0.45rem; white-space: pre-wrap; }

.dateiliste { list-style: none; margin: 0; padding: 0; }
.dateizeile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dateizeile:last-child { border-bottom: none; }

/* Sammlung (archiv.php): festes Spaltenraster statt Flex, damit Checkbox/Icon/Name bei jeder Zeile exakt untereinander stehen */
.dateiliste-sammlung .dateizeile {
    display: grid; grid-template-columns: 24px 42px 1fr auto;
    align-items: center; column-gap: 0.75rem; row-gap: 0.4rem;
}
.dz-zelle-cb { display: flex; align-items: center; justify-content: center; }
.dateiliste-sammlung .freigabe-box,
.dateiliste-sammlung .oeff-link-box { grid-column: 1 / -1; }
.datei-info { display: flex; flex-direction: column; min-width: 0; }
.datei-name { font-weight: 550; overflow-wrap: break-word; }
.datei-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.datei-aktionen { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ---------- Formulare ---------- */
.hinweis { color: var(--muted); font-size: 0.82rem; }
.formular { max-width: 660px; }
.formfeld { margin-bottom: 1.15rem; }
.formfeld label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.94rem; }
.formfeld .hinweis { margin-top: 0.3rem; }
.formfeld input[type="text"], .formfeld input[type="url"], .formfeld input[type="password"],
.formfeld input[type="number"], .formfeld input[type="file"], .formfeld select, .formfeld textarea {
    width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px;
    font-size: 0.97rem; font-family: inherit; background: var(--surface); color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.formfeld input:focus, .formfeld select:focus, .formfeld textarea:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none;
}
.formfeld textarea { resize: vertical; min-height: 92px; }
.form-aktionen { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.4rem; flex-wrap: wrap; }

.kontrollkaestchen { display: flex; flex-direction: column; gap: 0.5rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 0.9rem; }
.kk-zeile { display: flex; align-items: flex-start; gap: 0.55rem; font-weight: 400; margin: 0; cursor: pointer; }
.kk-zeile input[type="checkbox"] { margin-top: 0.25rem; width: auto; accent-color: var(--primary); }

.loeschen-form { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }

/* ---------- Meldungen ---------- */
.meldung { padding: 0.8rem 1.1rem; border-radius: 10px; margin-bottom: 1.3rem; font-size: 0.95rem; font-weight: 500; }
.meldung-ok { background: var(--ok-soft); color: #0a7c56; border: 1px solid #c7ecdc; }
.meldung-fehler { background: var(--danger-soft); color: var(--danger-text); border: 1px solid #f0cfd2; }
.meldung-warnung { background: var(--chip-amber-bg); color: var(--chip-amber-fg); border: 1px solid var(--chip-amber-rand); }

/* ---------- Bundesland-Zuordnung ---------- */
.bundesland-wahl { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.3rem; }
.bundesland-badges { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.3rem; }
.bundesland-badge {
    display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 0.12rem 0.5rem;
    border-radius: 999px; background: var(--primary-soft, #eef0ff); color: var(--primary);
}
.leer { text-align: center; color: var(--muted); padding: 2.8rem 1rem; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- Login ---------- */
.login-zentrum { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 240px); }
.login-rahmen {
    max-width: 380px; width: 100%; margin: 0 auto; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem;
    box-shadow: var(--shadow-md); border-top: 4px solid var(--primary);
}
.login-rahmen h1 { font-size: 1.3rem; margin: 0 0 1.3rem; }

/* ---------- Dashboard ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 0.85rem; margin-bottom: 1.6rem; }
.kennzahl {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.1rem; color: var(--ink);
    box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
    position: relative; overflow: hidden;
}
.kennzahl::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); opacity: .85; }
a.kennzahl:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.kennzahl-wert { font-size: 1.9rem; font-weight: 700; font-family: var(--mono); letter-spacing: -0.02em; }
.kennzahl-titel { font-size: 0.85rem; color: var(--muted); font-weight: 600; }

/* ---------- Protokoll ---------- */
.protokoll-liste { list-style: none; margin: 0; padding: 0; }
.protokoll-zeile { display: flex; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.protokoll-zeile:last-child { border-bottom: none; }
.protokoll-zeit { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; flex: none; width: 8.5rem; }
.protokoll-text { font-size: 0.94rem; }
.protokoll-details { display: block; color: var(--muted); font-size: 0.84rem; margin-top: 0.1rem; }
.blaettern { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; justify-content: center; }

/* ---------- Tests ---------- */
.status-pill { font-size: 0.72rem; padding: 0.14rem 0.6rem; border-radius: 20px; font-weight: 700; }
.status-entwurf { background: var(--chip-amber-bg); color: var(--chip-amber-fg); border: 1px solid var(--chip-amber-rand); }

.frage-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 0.85rem; }
.frage-block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.frage-nr { font-family: var(--mono); color: var(--primary-dark); font-weight: 700; }
.frage-hinweis { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.9rem; }
.antwort-option {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem;
    border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
    background: var(--surface-2); transition: border-color .12s, background .12s; font-size: 0.96rem;
}
.antwort-option:hover { border-color: var(--primary-tint); background: var(--primary-soft); }
.antwort-option input { width: auto; accent-color: var(--primary); transform: scale(1.25); }
.antwort-option.richtig { background: var(--ok-soft); border-color: #b6e6cf; }
.antwort-option.falsch-gewaehlt { background: var(--danger-soft); border-color: #f0cfd2; }

.ergebnis-gross { font-size: 2.8rem; font-weight: 800; font-family: var(--mono); letter-spacing: -0.03em; color: var(--primary-dark); }
.ergebnis-balken { background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; height: 14px; overflow: hidden; }
.ergebnis-fuellung { height: 100%; background: linear-gradient(90deg, var(--primary), #6366f1); border-radius: 20px; transition: width .4s ease; }

.antwort-edit { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.55rem; }
.antwort-edit input[type="text"] { flex: 1; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 0.95rem; background: var(--surface); }
.antwort-edit input[type="text"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.antwort-edit > label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.85rem; white-space: nowrap; color: var(--ok-text); margin: 0; cursor: pointer; }
.antwort-edit input[type="checkbox"] { width: auto; accent-color: var(--ok); transform: scale(1.2); }

/* ---------- Mobil ---------- */
@media (max-width: 560px) {
.detail-kopf, .kurskarte-kopf { flex-direction: column; align-items: flex-start; }
    .kurskarte-meta { white-space: normal; }
    .protokoll-zeile { flex-direction: column; gap: 0.15rem; }
    .protokoll-zeit { width: auto; }
    .seiten-titel { font-size: 1.4rem; }
    .inhalt { padding-top: 1.4rem; }
.link-zeile { flex-direction: column; }
.geg-zeile { grid-template-columns: auto 1fr; } .geg-kopf { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .schnellsuche-skelett { animation: none !important; background-position: 50% 50%; }
}

/* Test-Status-Plaketten */
.test-status { font-size: 0.72rem; padding: 0.16rem 0.62rem; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.test-aktiv { background: var(--ok-soft); color: var(--ok-text); border: 1px solid #c7ecdc; }
.test-inaktiv { background: var(--chip-amber-bg); color: var(--chip-amber-fg); border: 1px solid var(--chip-amber-rand); }

/* Mehrfach-Link-Editor im Kursformular */
.link-zeile { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.link-zeile input[type="text"] { flex: 1; }
.link-zeile input[type="url"] { flex: 1.4; }
.link-zeile input { padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 0.95rem; background: var(--surface); }
.link-zeile input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }


/* ---------- Gegenstände (Modul-Detail) ---------- */
.gegenstand-liste { list-style: none; margin: 0; padding: 0; }
.gegenstand { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.gegenstand:last-child { border-bottom: none; }
.gegenstand-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.gegenstand-name { font-weight: 600; }
.gegenstand-le { font-family: var(--mono); font-size: 0.76rem; color: var(--primary-dark); background: var(--primary-soft); border-radius: 20px; padding: 0.1rem 0.6rem; white-space: nowrap; flex: none; font-weight: 700; }
.gegenstand-ziele { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.gegenstand-summe { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 2px solid var(--line); font-weight: 700; font-family: var(--mono); text-align: right; }

/* ---------- Gegenstände-Editor (Modulformular) ---------- */
.geg-zeile { display: grid; grid-template-columns: auto 1.4fr 0.4fr 0.9fr 1.6fr; gap: 0.4rem; margin-bottom: 0.5rem; }
.geg-zeile input, .geg-zeile select { padding: 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 0.92rem; background: var(--surface); width: 100%; }
.geg-zeile input:focus, .geg-zeile select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.geg-kopf { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin-bottom: 0.25rem; }
.geg-kopf span { padding-left: 0.2rem; }


/* ---------- Gegenstand-Typ-Badges & Trainer & Material ---------- */
.geg-typ-badge { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: var(--primary); border-radius: 10px; padding: 0.08rem 0.45rem; margin-left: 0.4rem; vertical-align: middle; white-space: nowrap; }
.geg-typ-workshop { background: #0891b2; }
.geg-typ-pruefung { background: #b45309; }
.gegenstand-material { margin-top: 0.5rem; padding-left: 0.6rem; border-left: 2px solid var(--line); }
.material-zeile { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; font-size: 0.85rem; padding: 0.15rem 0; }
.material-akt { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 620px) {
.geg-zeile { grid-template-columns: auto 1fr 1fr; } .geg-kopf { display: none; }
.tabelle, .tabelle thead, .tabelle tbody, .tabelle tr, .tabelle td { display: block; }
    .tabelle thead { display: none; }
    .tabelle tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 0.6rem; padding: 0.3rem 0.5rem; }
    .tabelle td { border: 0; padding: 0.3rem 0.2rem; }
    .tab-aktionen { text-align: left; }
.geg-zeile .sortier-griff { display: none; }
.papierkorb-fab-text { display: none; }
    .papierkorb-fab { padding: .6rem; font-size: 1.1rem; }
}

/* ---------- Info-Tooltips (Mouse-over / Tap) ---------- */
.info-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); color: #fff; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 0.72rem; line-height: 1; cursor: help; position: relative; vertical-align: middle; margin-left: 0.35rem; user-select: none; flex: none; }
.info-tip:hover, .info-tip:focus { background: var(--primary); outline: none; }
.info-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--ink, #1f2430); color: #fff; padding: 0.55rem 0.7rem; border-radius: 8px; width: max-content; max-width: 250px; font-family: inherit; font-style: normal; font-weight: 400; font-size: 0.78rem; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,0.22); opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 60; pointer-events: none; }
.info-tip:hover::after, .info-tip:focus::after { opacity: 1; visibility: visible; }
.info-tip::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink, #1f2430); opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 60; }
.info-tip:hover::before, .info-tip:focus::before { opacity: 1; visibility: visible; }
@media (max-width: 600px) { .info-tip::after { max-width: 200px; left: auto; right: -4px; transform: none; } }

/* Variante, bei der der Tooltip unterhalb statt oberhalb erscheint (z. B. direkt unter dem
   Seitenkopf, wo "oben" mit der fixierten Menüleiste überlappen würde). */
.info-tip-unten::after { bottom: auto; top: calc(100% + 8px); }
.info-tip-unten::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom-color: var(--ink, #1f2430); }

/* ---------- Konto-Dropdown (oben rechts) ---------- */
.konto-menu { position: relative; }
.konto-menu summary { list-style: none; cursor: pointer; display: inline-block; }
.konto-menu summary::-webkit-details-marker { display: none; }
.konto-knopf {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: #fff; background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    padding: 0.4rem 0.7rem; border-radius: 10px;
    font-size: 0.9rem; font-weight: 600; transition: background .15s;
}
.konto-knopf:hover { background: rgba(255,255,255,.24); }
.konto-icon { flex: none; }
.konto-pfeil { font-size: 0.7rem; opacity: .85; transition: transform .15s; }
.konto-menu[open] .konto-pfeil { transform: rotate(180deg); }
.konto-popup {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.20);
    min-width: 190px; padding: 0.35rem; z-index: 60;
    display: flex; flex-direction: column;
}
.konto-popup a { color: var(--ink); padding: 0.55rem 0.7rem; border-radius: 7px; font-size: 0.9rem; }
.konto-popup a:hover { background: var(--bg); text-decoration: none; }
@media (max-width: 680px) { .konto-label { display: none; } }

/* ---------- Export-Menü (Lehrplan-Export im Technik Center) ---------- */
.export-menu { position: relative; display: inline-block; }
.export-menu summary { list-style: none; cursor: pointer; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-popup {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.20);
    min-width: 260px; padding: 0.35rem; z-index: 60;
    display: flex; flex-direction: column;
}
.export-popup a { color: var(--ink); padding: 0.55rem 0.7rem; border-radius: 7px; font-size: 0.88rem; text-decoration: none; }
.export-popup a:hover { background: var(--bg); }
.export-popup hr { border: none; border-top: 1px solid var(--line); margin: 0.3rem 0.2rem; width: calc(100% - 0.4rem); }

/* ---------- QR-Code & öffentlicher Link ---------- */
.qr-bereich { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.8rem; flex-wrap: wrap; }
.qr-bereich #qrcode { width: 150px; height: 150px; min-width: 150px; max-width: 150px; background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 10px; flex: none; box-sizing: content-box; overflow: hidden; }
.qr-bereich #qrcode svg { width: 150px !important; height: 150px !important; display: block; }
.schalter-gruppe { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.9rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.schalter-gruppe .kk-zeile { margin: 0; }

/* ---------- Logos ---------- */
.logo-edit { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 0.6rem; }
.logo-vorschau { width: 84px; height: 84px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.logo-vorschau img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo-platzhalter { font-size: 2rem; font-weight: 700; color: var(--muted); }
.logo-aktionen { display: flex; flex-direction: column; gap: 0.5rem; }
.logo-aktionen form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.konto-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; flex: none; background: #fff; padding: 1px; }
.kurs-logo-gross { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; padding: 3px; border: 1px solid var(--line); flex: none; }
.detail-titelzeile { display: flex; align-items: center; gap: 0.9rem; }
.kurs-logo-klein { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: #fff; padding: 1px; vertical-align: -5px; margin-right: 0.45rem; border: 1px solid var(--line); }

/* ---------- Favoriten ---------- */
.favoriten-raster { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fav-gruppe { margin: 1rem 0 0.5rem; font-size: 0.95rem; font-weight: 650; color: var(--ink-mute, #555); }
.fav-gruppe:first-child { margin-top: 0; }
.favorit-kachel { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 550; }
.favorit-kachel:hover { border-color: var(--primary); text-decoration: none; }
.favorit-btn.ist-favorit { border-color: #f0b429; color: var(--chip-amber-fg); background: var(--chip-amber-bg); }

/* ---------- Changelog ---------- */
.changelog { display: flex; flex-direction: column; gap: 1rem; }
.cl-eintrag { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; }
.cl-kopf { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.cl-version { font-weight: 700; font-size: 1.1rem; color: var(--primary); }
.cl-aktuell { font-size: 0.72rem; font-weight: 600; background: var(--chip-gruen-bg); color: var(--chip-gruen-fg); padding: 0.1rem 0.5rem; border-radius: 999px; }
.cl-datum { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
.cl-punkte { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.fuss-version a { color: inherit; text-decoration: underline; }

/* ---------- Datei-Archiv ---------- */
.archiv-suche { display: flex; gap: 0.5rem; align-items: center; }
.archiv-suche input[type="search"] { padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 9px; font-size: 0.9rem; min-width: 14rem; }
.archiv-kat { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; color: var(--ink); }
.archiv-kat:first-of-type { margin-top: 0.4rem; }

/* ---------- Archiv-Tabs ---------- */
.archiv-tabs { display: flex; gap: 0.4rem; margin: 0.2rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.archiv-tabs a { padding: 0.55rem 0.95rem; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.archiv-tabs a:hover { color: var(--ink); text-decoration: none; }
.archiv-tabs a.aktiv { color: var(--primary); border-bottom-color: var(--primary); }

/* ===== Wettbewerb (Kahoot-artiges Quiz) ===== */
.wb-hero { text-align: center; margin-bottom: 1.2rem; }
.wb-hero h1 { margin: 0 0 0.2rem; font-size: 1.6rem; }
.wb-hero p { margin: 0; color: var(--muted); }

/* Host-Ansicht */
.wb-host { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 760px) {
.wb-host { grid-template-columns: 1fr; }
/* iOS zoomt bei <16px beim Fokus – daher Eingaben auf 16px anheben */
    .formfeld input, .formfeld select, .formfeld textarea,
    input[type="search"], input[type="text"], input[type="url"],
    input[type="password"], input[type="number"], input[type="email"],
    select, textarea { font-size: 16px; }
    .inhalt { padding-left: 1rem; padding-right: 1rem; }
    .detail-kopf { gap: 0.6rem; }
    .archiv-suche input, .archiv-suche { width: 100%; box-sizing: border-box; }
    .form-aktionen .btn, .form-aktionen .btn-rand { flex: 1 1 auto; text-align: center; justify-content: center; }
}
.wb-join.wb-zu { opacity: 0.8; }
.wb-label { color: var(--muted); font-size: 0.9rem; }
.wb-code { font-family: var(--mono); font-size: 2.4rem; font-weight: 700; letter-spacing: 0.02em; color: var(--primary); word-break: break-all; line-height: 1.1; margin: 0.2rem 0 0.4rem; }
.wb-url { width: 100%; font-family: var(--mono); font-size: 0.78rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }

/* Rangliste */
.wb-liste { list-style: none; margin: 0; padding: 0; }
.wb-zeile { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 0.45rem; background: var(--surface); }
.wb-zeile.wb-top { border-color: var(--primary); }
.wb-zeile.wb-ich { outline: 2px solid #7c3aed; }
.wb-platz { font-size: 1.15rem; min-width: 2rem; text-align: center; font-weight: 700; }
.wb-name { flex: 1; font-weight: 600; word-break: break-word; }
.wb-punkte { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; }
.wb-score-gross { font-size: 3rem; font-weight: 800; color: #7c3aed; line-height: 1; }

/* ===== IT-Scribble (Zeichnen & Raten) ===== */
.scr-buehne { display: grid; grid-template-columns: 1fr minmax(240px, 320px); gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .scr-buehne { grid-template-columns: 1fr; } }
.scr-canvas {
    width: 100%; height: auto; aspect-ratio: 8 / 5; display: block;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    touch-action: none; cursor: crosshair;
}
.scr-timer { font-family: var(--mono); font-weight: 700; float: right; }
.scr-timer-kritisch { color: var(--danger, #dc2626); }
.scr-wortlaenge { text-align: center; font-family: var(--mono); font-size: 1.3rem; letter-spacing: 0.15em; margin-top: 0.6rem; color: var(--muted); }
.scr-wort-anzeige { text-align: center; font-size: 1.15rem; margin: 0.4rem 0 0.7rem; padding: 0.6rem; background: var(--primary-soft, #eef0ff); border-radius: 10px; }
.scr-werkzeuge { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.scr-farbe { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.scr-farbe:hover { border-color: var(--primary); }
.scr-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.scr-verlauf-liste { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.scr-verlauf-liste li { padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.scr-verlauf-liste li:last-child { border-bottom: none; }
.scr-verlauf-ok { color: var(--ok, #16a34a); font-weight: 600; }
.scr-verlauf-falsch { color: var(--muted); }

/* ===== Hangman (Galgenmännchen) ===== */
.hm-galgen { display: flex; justify-content: center; margin: 0.4rem 0; }
.hm-wort { text-align: center; font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.2em; font-weight: 700; margin: 0.5rem 0; word-break: break-all; }
.hm-buchstaben-anzeige { text-align: center; color: var(--muted); font-size: 0.85rem; }
.hm-buchstabe-ok { color: var(--ok, #16a34a); font-weight: 600; }
.hm-buchstabe-falsch { color: var(--danger, #dc2626); text-decoration: line-through; opacity: 0.75; }
.hm-ergebnis { text-align: center; font-weight: 700; padding: 0.6rem; border-radius: 10px; margin-top: 0.6rem; }
.hm-ergebnis-gewonnen { background: var(--ok-soft); color: #0a7c56; }
.hm-ergebnis-verloren { background: var(--danger-soft); color: var(--danger-text); }
.hm-tastatur { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 0.8rem; }

/* Onboarding-Tour */
.onb-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(15,17,26,0.55); }
.onb-spotlight {
    position: fixed; border-radius: 10px; box-shadow: 0 0 0 4000px rgba(15,17,26,0.55);
    background: transparent; pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
    border: 2px solid var(--primary);
}
.onb-box {
    position: fixed; width: 300px; max-width: calc(100vw - 2rem); background: var(--surface);
    border-radius: 12px; box-shadow: var(--shadow-md); padding: 1rem 1.1rem; z-index: 501;
}
.onb-titel { font-weight: 700; font-size: 1.02rem; margin-bottom: 0.35rem; }
.onb-text { font-size: 0.9rem; color: var(--muted); line-height: 1.45; margin-bottom: 0.8rem; }
.onb-fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.onb-fortschritt { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.onb-knoepfe { display: flex; gap: 0.4rem; }
@media (max-width: 640px) { .onb-box { width: calc(100vw - 2rem); } }
.hm-taste {
    width: 2.3rem; height: 2.3rem; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; font-size: 0.95rem;
}
.hm-taste:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.hm-taste:disabled { opacity: 0.35; cursor: default; }

/* ===== News-Ticker ===== */
.tk-join-karte { margin-bottom: 1rem; }
.tk-ticker-band {
    background: #1f2937; border-radius: 10px; overflow: hidden; white-space: nowrap;
    padding: 0.7rem 0; margin-bottom: 1rem;
}
.tk-lauftext { display: inline-block; color: #fff; font-weight: 600; font-size: 1.05rem; padding-left: 100%; will-change: transform; }
@keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.tk-karte { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; }
.tk-karte-ich { border-color: var(--primary); background: var(--primary-soft, #eef0ff); }
.tk-karte-text { font-size: 0.95rem; line-height: 1.35; margin-bottom: 0.4rem; word-break: break-word; }
.tk-karte-fuss { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--muted); }
.tk-loeschen { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 0.2rem; }
.tk-loeschen:hover { color: var(--danger, #dc2626); }

/* Frage-Lauf (Teilnehmer) */
.wb-fortschritt { color: var(--muted); font-size: 0.88rem; margin-bottom: 0.5rem; }
.wb-timerbar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; margin-bottom: 1rem; }
.wb-timerbar-fuell { height: 100%; width: 100%; background: linear-gradient(90deg, #16a34a, #f59e0b, #e11d48); }
.wb-frage { font-size: 1.3rem; font-weight: 650; margin-bottom: 0.9rem; }
.wb-antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 480px) { .wb-antworten { grid-template-columns: 1fr; } }
.wb-antwort { display: flex; align-items: center; gap: 0.6rem; padding: 1rem; border-radius: 12px; color: #fff; background: var(--ant); cursor: pointer; font-weight: 600; min-height: 64px; border: 3px solid transparent; transition: transform 0.05s; }
.wb-antwort:hover { filter: brightness(1.05); }
.wb-antwort:active { transform: scale(0.98); }
.wb-antwort input { width: 22px; height: 22px; accent-color: #fff; flex-shrink: 0; }
.wb-antwort:has(input:checked) { border-color: #fff; box-shadow: 0 0 0 3px var(--ant); }
.wb-senden { width: 100%; background: #1f2937; font-size: 1.05rem; }

/* ===== Favoriten-Stern in Listen + gesperrte Module ===== */
.kachel-wrap { position: relative; }
.kachel-stern { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 3; }
.fav-icon { background: rgba(255,255,255,0.85); border: 1px solid var(--line); border-radius: 50%; width: 34px; height: 34px; font-size: 1.15rem; line-height: 1; color: #b0b4bb; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.05s, color 0.1s; }
.fav-icon:hover { color: #f0b429; transform: scale(1.08); }
.fav-icon.ist-favorit { color: #f0b429; border-color: #f0b429; background: var(--chip-amber-bg); }

/* Technik-Center-Gruppen */
.tc-gruppe { font-size: 1.15rem; margin: 1.6rem 0 0.7rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--line); }
.tc-gruppe:first-of-type { margin-top: 0.5rem; }
.tc-gruppe .hinweis { font-weight: 400; }
.tc-gruppe-metall { color: var(--muted); }
.tc-gruppe-pvm { color: var(--muted); }

/* Gesperrte (Metall-)Module: sichtbar, aber nicht interaktiv */
.kurskarte-gesperrt { opacity: 0.6; cursor: default; filter: grayscale(0.4); position: relative; }
.kurskarte-gesperrt:hover { transform: none; box-shadow: none; }
.tc-sperr-pill { display: inline-block; margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted); background: var(--line); padding: 0.15rem 0.55rem; border-radius: 999px; }

/* PRO-Button im Footer – bewusst der einzige auffällige "Button" im Footer, alles andere sind schlichte Links */
.fuss-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border: none; border-radius: 7px; font-size: 0.78rem; font-weight: 600; background: var(--primary-soft, #eef0ff); color: var(--primary); text-decoration: none; transition: background .12s, color .12s; }
.fuss-btn:hover { background: var(--primary); color: #fff; text-decoration: none; }

/* Checkbox-Zeile (z. B. Login "Angemeldet bleiben") */
.check-zeile { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 500; }
.check-zeile input { width: 18px; height: 18px; }

/* Karten mit Stern-Overlay: rechts Platz reservieren, damit Kopf-Text (z. B. "geändert", Status) nicht unter den Stern rutscht */
.kachel-wrap .kurskarte-kopf { padding-right: 2.4rem; }

/* ===== Dashboard: farblich kategorisierte Kennzahlen + Wichtige Links ===== */
.kennzahl { border-top: 3px solid var(--line); }
.kennzahl.kz-lern   { border-top-color: #2563eb; }
.kennzahl.kz-kurs   { border-top-color: #0e9f6e; }
.kennzahl.kz-archiv { border-top-color: #d97706; }
.kennzahl.kz-lern .kennzahl-wert   { color: #2563eb; }
.kennzahl.kz-kurs .kennzahl-wert   { color: #0e9f6e; }
.kennzahl.kz-archiv .kennzahl-wert { color: #d97706; }
.kennzahl.kz-lern:hover   { border-color: #2563eb; }
.kennzahl.kz-kurs:hover   { border-color: #0e9f6e; }
.kennzahl.kz-archiv:hover { border-color: #d97706; }

.wlink-gruppen { display: flex; flex-direction: column; gap: 0.9rem; }
.wlink-gruppe { border-left: 3px solid var(--akz, var(--line)); padding-left: 0.75rem; }
.wlink-row { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.45rem 0.2rem; color: var(--ink); text-decoration: none; border-radius: 6px; }
.wlink-row:hover { background: var(--surface); }
.wlink-label { font-weight: 650; min-width: 160px; flex-shrink: 0; color: var(--akz, var(--ink)); }
.wlink-url { color: var(--muted); font-family: var(--mono); font-size: 0.85rem; word-break: break-all; flex: 1; }
.wlink-row:hover .wlink-url { color: var(--akz, var(--primary)); }
.wlink-pfeil { color: var(--muted); margin-left: auto; flex-shrink: 0; }
.wlink-note { font-size: 0.82rem; color: var(--muted); padding: 0.1rem 0.2rem 0.3rem 0.2rem; font-family: var(--mono); }
@media (max-width: 520px) {
    .wlink-row { flex-wrap: wrap; gap: 0.1rem 0.6rem; }
    .wlink-label { min-width: 0; }
}

/* Gültigkeitsanzeige öffentlicher Levelprüfungs-Links */
.oeff-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0; }
.gueltig { font-size: 0.82rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; }
.gueltig-ok { color: var(--ok-text); background: var(--ok-soft); }
.gueltig-ab { color: var(--danger-text); background: var(--danger-soft); }

/* Technik-Center-Gruppen farblich abgesetzt */
.tc-gruppe-fach { border-bottom-color: #2563eb; }
.tc-gruppe-spez { border-bottom-color: #0e9f6e; }
.tc-gruppe-abschluss { border-bottom-color: #7c3aed; }

/* Prüfungscode-Chip in der Levelprüfungs-Übersicht */
.code-chip { font-size: 0.82rem; background: var(--chip-amber-bg); color: var(--chip-amber-fg); padding: 0.12rem 0.6rem; border-radius: 999px; }
.code-chip strong { font-family: var(--mono); }

/* Wichtige Kontakte am Dashboard */
.kontakt-abschnitt { margin-bottom: 1.25rem; }
.kontakt-abschnitt-titel { font-size: 1rem; margin: 0 0 .5rem; opacity: .85; }
.kontakt-region-raster { display: flex; flex-direction: column; gap: .6rem; }
.kontakt-region-karte { border-left: 3px solid var(--akz, var(--line)); background: var(--surface); border-radius: 10px; margin-bottom: 0; }
.kontakt-region-karte summary { color: var(--akz, var(--ink)); font-weight: 600; }
.kontakt-karte { padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.kontakt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.kontakt-bez { font-weight: 700; }
.kontakt-person { color: var(--ink); margin-bottom: 0.2rem; }
.kontakt-zeile { font-size: 0.88rem; color: var(--muted); margin-top: 0.1rem; }
.kontakt-zeile a { color: inherit; }
.kontakt-zeile a:hover { color: var(--primary); }

/* Verwaltungs-Tabellen (Links/Kontakte) */
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--line); }
.tabelle td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.url-zelle { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); word-break: break-all; }
.tab-aktionen { white-space: nowrap; text-align: right; }
.farb-punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }


/* Aufklappbare Technik-Center-Gruppen */
.tc-details { margin-bottom: 0.4rem; }
summary.tc-gruppe { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.45rem; }
summary.tc-gruppe::-webkit-details-marker { display: none; }
summary.tc-gruppe::before { content: "\25B8"; color: var(--muted); font-size: 0.8rem; transition: transform .12s; }
details[open] > summary.tc-gruppe::before { transform: rotate(90deg); }
summary.tc-gruppe:hover { color: var(--primary); }

/* ===================== Dark Mode ===================== */
:root[data-theme="dark"] {
    --bg:            #11141b;
    --surface:       #1b1f2a;
    --surface-2:     #232838;
    --ink:           #e7e9f0;
    --ink-2:         #cdd2de;
    --muted:         #98a0b3;
    --line:          #2c3343;
    --primary:       #818cf8;
    --primary-dark:  #a5b4fc;
    --primary-soft:  #23273a;
    --primary-tint:  #2a2f48;
    --danger:        #f1707a;
    --danger-soft:   #3a2125;
    --danger-text:   #f1707a;
    --ok:            #34d399;
    --ok-soft:       #15302a;
    --ok-text:       #34d399;
    --chip-gruen-bg:  #16311f;
    --chip-gruen-fg:  #6ee7a3;
    --chip-gruen-rand:#2f6b47;
    --chip-lila-bg:   #2a2145;
    --chip-lila-fg:   #c4b3fb;
    --chip-lila-rand: #5b4b96;
    --chip-amber-bg:  #3a2c12;
    --chip-amber-fg:  #f2c675;
    --chip-amber-rand:#6b511f;
    --chip-grau-bg:   #262b38;
    --chip-grau-fg:   #b0b6c4;
    --shadow-sm:     0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.30);
    --shadow-md:     0 10px 30px rgba(0,0,0,.45);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #11141b;
        --surface:       #1b1f2a;
        --surface-2:     #232838;
        --ink:           #e7e9f0;
        --ink-2:         #cdd2de;
        --muted:         #98a0b3;
        --line:          #2c3343;
        --primary:       #818cf8;
        --primary-dark:  #a5b4fc;
        --primary-soft:  #23273a;
        --primary-tint:  #2a2f48;
        --danger:        #f1707a;
        --danger-soft:   #3a2125;
        --danger-text:   #f1707a;
        --ok:            #34d399;
        --ok-soft:       #15302a;
        --ok-text:       #34d399;
        --chip-gruen-bg:  #16311f;
        --chip-gruen-fg:  #6ee7a3;
        --chip-gruen-rand:#2f6b47;
        --chip-lila-bg:   #2a2145;
        --chip-lila-fg:   #c4b3fb;
        --chip-lila-rand: #5b4b96;
        --chip-amber-bg:  #3a2c12;
        --chip-amber-fg:  #f2c675;
        --chip-amber-rand:#6b511f;
        --chip-grau-bg:   #262b38;
        --chip-grau-fg:   #b0b6c4;
        --shadow-sm:     0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.30);
        --shadow-md:     0 10px 30px rgba(0,0,0,.45);
        color-scheme: dark;
    }
}
/* Theme-Umschalter */
.theme-btn { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 0.3rem 0.55rem; cursor: pointer; font-size: 0.95rem; line-height: 1; flex: none; }
.theme-btn:hover { border-color: var(--primary); color: var(--primary); }
.zahnrad-btn { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 0.3rem 0.55rem; line-height: 1; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.zahnrad-btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.zahnrad-btn[aria-current="page"] { border-color: var(--primary); background: var(--primary-tint, rgba(37,99,235,.1)); }

/* Bild in Prüfungsfragen */
.frage-bild { max-width: 100%; max-height: 360px; border: 1px solid var(--line); border-radius: 10px; margin: 0.2rem 0 0.6rem; display: block; }

/* Drag-and-drop-Sortierung */
.sortier-griff { cursor: grab; color: var(--muted); user-select: none; padding: 0 0.2rem; align-self: center; font-size: 1.05rem; line-height: 1; }
.sortier-griff:active { cursor: grabbing; }
.sortier-aktiv { opacity: 0.55; outline: 2px dashed var(--primary); border-radius: 8px; }
.frage-block .sortier-griff { position: absolute; top: 0.7rem; right: 0.7rem; }
.frage-block { position: relative; }


/* Sammelaktionen (Archiv) */
.sammel-bar { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; margin-bottom: 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.dateizeile .sammel-cb { width: 18px; height: 18px; flex: 0 0 auto; }
.check-zeile { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ===================== Mobile / Tablet ===================== */
.kopf-inhalt { position: relative; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 8px; }
.nav-toggle:hover { background: rgba(255,255,255,.12); }

@media (max-width: 860px) {
    .nav-toggle { display: inline-block; margin-left: auto; }
    .kopf-konto { margin-left: 0.3rem; }
    .kopf-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #2e2b8f;
        padding: 0.4rem 0.9rem 0.9rem;
        box-shadow: 0 12px 26px rgba(0,0,0,.28);
        border-radius: 0 0 14px 14px;
        display: none;
        z-index: 50;
    }
    .kopf-nav.offen { display: flex; }

    /* "Kiosk-Modus": Hangman/Scribble/Ticker-Host-Ansicht auf dem Handy ohne Beamer.
       Trainer braucht hier keine Seitennavigation/Kontomenü, nur den Spielstand –
       spart Bildschirmhöhe, damit Wort/Zeichenflaeche/Ticker ohne Scrollen sichtbar sind. */
    body.kiosk-modus .nav-toggle,
    body.kiosk-modus .zahnrad-btn,
    body.kiosk-modus .konto-label { display: none; }
    body.kiosk-modus .kopf-inhalt { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    body.kiosk-modus .inhalt { padding-top: 1rem; }
    .kopf-nav a { padding: 0.8rem 0.3rem; border-bottom: 1px solid rgba(255,255,255,.12); width: 100%; }
    .kopf-nav a:last-child { border-bottom: 0; }
    .kopf-suche { width: 100%; margin: 0.3rem 0 0.5rem; }
    .kopf-suche input { width: 100%; box-sizing: border-box; }
}

/* Tabellen auf kleinen Geräten horizontal scrollbar */
.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* Größere Touch-Flächen auf Touch-Geräten */
@media (pointer: coarse) {
    .btn, .btn-klein, .btn-rand, .fuss-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    .konto-popup a { padding-top: 0.7rem; padding-bottom: 0.7rem; }
    .sortier-griff { font-size: 1.3rem; padding: 0 0.4rem; }
}

/* Rechte-Vorlagen & Admin-Zeile im Konten-Editor */
.rechte-vorlagen { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
.rechte-vorlagen .hinweis { margin: 0 0.2rem 0 0; }
.kk-admin { border-bottom: 1px solid var(--line); padding-bottom: 0.55rem; margin-bottom: 0.2rem; }
.kk-zeile input[type="checkbox"]:disabled { opacity: 0.5; }
.kk-zeile input[type="checkbox"]:disabled + span { opacity: 0.6; }

/* Systemcheck */
.check-liste { list-style: none; margin: 0; padding: 0; }
.check-zeile-sc { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.check-zeile-sc:last-child { border-bottom: 0; }
.check-icon { flex: 0 0 1.6rem; height: 1.6rem; width: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 0.95rem; }
.check-ok .check-icon { background: var(--ok); }
.check-warn .check-icon { background: #d9a300; }
.check-fehler .check-icon { background: var(--danger); }
.check-text { display: flex; flex-direction: column; gap: 0.1rem; }
.check-text .hinweis { margin: 0; }

/* Bestanden-Abzeichen */
.bestanden-abzeichen { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem; padding: 0.4rem 0.9rem; border-radius: 999px; font-weight: 700; }
.bestanden-abzeichen .hinweis { margin: 0; font-weight: 400; }
.ist-bestanden { background: var(--ok-soft); color: #0a7c56; }
.ist-durchgefallen { background: var(--danger-soft); color: #b3261e; }
.abzeichen-ok { background: var(--ok-soft); color: #0a7c56; }
.abzeichen-fehler { background: var(--danger-soft); color: #b3261e; }

/* Einfach formatierter Text (Beschreibungen/Notizen) */
.formatiert { line-height: 1.55; }
.formatiert ul { margin: 0.3rem 0 0.3rem 1.2rem; padding: 0; }
.formatiert li { margin: 0.1rem 0; }
.formatiert a { word-break: break-word; }
.formatiert strong { font-weight: 700; }

/* Barrierefreiheit */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--surface); color: var(--ink); padding: 0.6rem 1rem; border-radius: 0 0 10px 0; border: 1px solid var(--line); font-weight: 600; }
.skip-link:focus { left: 0; }
/* Nur für Screenreader: visuell unsichtbar, aber im Accessibility-Tree vorhanden */
.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; }
main.inhalt:focus { outline: none; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Übungsmodus */
.ueb-optionen { display: flex; flex-direction: column; gap: 0.45rem; }
.ueb-option { text-align: left; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 0.95rem; }
.ueb-option:hover:not(:disabled) { border-color: var(--primary); }
.ueb-option:disabled { cursor: default; }
.ueb-gewaehlt { border-color: var(--primary); background: var(--primary-soft); }
.ueb-richtig { border-color: var(--ok); background: var(--ok-soft); color: #0a7c56; font-weight: 600; }
.ueb-falsch { border-color: var(--danger); background: var(--danger-soft); color: #b3261e; }
.ueb-feedback { margin-top: 0.7rem; padding: 0.6rem 0.85rem; border-radius: 10px; line-height: 1.5; }
.ueb-fb-ok { background: var(--ok-soft); color: #0a7c56; }
.ueb-fb-fehler { background: var(--danger-soft); color: #b3261e; }

/* Zuordnung-Editor */
.zuordnung-edit { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.zuordnung-edit input { flex: 1; }
.zuordnung-edit span { color: var(--muted); }
/* Zuordnung & Lückentext in der Prüfung */
.zuordnung-zeile { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.zuordnung-zeile .zo-links { flex: 1 1 180px; font-weight: 600; }
.zuordnung-zeile select { flex: 1 1 180px; }
.luecke-feld { display: inline-block; min-width: 90px; margin: 0 0.2rem; }

/* Zugriffssteuerung im Konten-Editor */
.zugang-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.zugang-name { display: flex; flex-direction: column; gap: 0.1rem; min-width: 200px; flex: 1; }
.zugang-name .hinweis { margin: 0; }
.zugang-optionen { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.zugang-opt { display: inline-flex; align-items: center; }
.zugang-opt input { position: absolute; opacity: 0; pointer-events: none; }
.zugang-opt span { display: inline-block; padding: 0.4rem 0.7rem; font-size: 0.85rem; cursor: pointer; border-left: 1px solid var(--line); white-space: nowrap; }
.zugang-opt:first-child span { border-left: 0; }
.zugang-opt input:checked + span { color: #fff; font-weight: 600; }
.zugang-opt input:disabled + span { opacity: 0.45; cursor: default; }
.zugang-trenner { margin: 0.7rem 0 0.2rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.abzeichen-gesperrt { background: var(--chip-grau-bg); color: var(--chip-grau-fg); }

/* Log-Center */
.log-filter-zeile { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.5rem; }
.log-filter-zeile .formfeld { margin: 0; min-width: 140px; }
.log-tabelle td { vertical-align: top; }
.log-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.log-ip { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85em; white-space: nowrap; }
.log-details { color: var(--muted); max-width: 360px; }
.log-tabelle tr.lvl-fehler  { background: rgba(220,38,38,0.06); }
.log-tabelle tr.lvl-warnung { background: rgba(217,119,6,0.07); }
.log-kat { font-size: 0.75rem; white-space: nowrap; }
.log-kat-login        { background: #16a34a; }
.log-kat-login_fehler { background: #d97706; }
.log-kat-logout       { background: #64748b; }
.log-kat-sicherheit   { background: #dc2626; }
.log-kat-fehler       { background: #dc2626; }
.log-kat-inhalt       { background: #2563eb; }
.log-kat-konto        { background: #7c3aed; }
.log-kat-sicherung    { background: #0e9f6e; }
.log-kat-system       { background: #475569; }

/* ---------- Log-Center: Diagramme ---------- */
.log-diagramme { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 860px) { .log-diagramme { grid-template-columns: 1fr; } }
.log-diagramm-karte .karte-inhalt { padding-top: 0.9rem; }
.log-balken-svg { width: 100%; height: auto; }
.log-balken-label { font-size: 6.5px; fill: var(--muted); }
.log-donut-svg { width: 150px; height: 150px; flex: none; }
.log-donut-mitte-zahl { font-size: 22px; font-weight: 700; fill: var(--ink); }
.log-donut-mitte-label { font-size: 8px; fill: var(--muted); }
.log-legende { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }
.log-legende-spalte { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0; }
.log-legende-punkt { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; vertical-align: middle; margin-right: 0.3rem; }

/* ---------- Sicherungen: zwei klar getrennte Bereiche ---------- */
.sich-abschnitt { border-radius: 14px; padding: 1.1rem 1.2rem 1.3rem; margin-bottom: 1.5rem; }
.sich-abschnitt-anlegen { background: var(--ok-soft); }
.sich-abschnitt-restore { background: var(--primary-soft, #eef0ff); }
.sich-abschnitt-titel { margin: 0 0 0.9rem; font-size: 1.15rem; }
.sich-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.sich-karte .karte-inhalt { display: flex; flex-direction: column; gap: 0.7rem; }
.sich-karte .karte-inhalt > *:last-child { margin-top: auto; }

/* Über-Seite */
.ueber-seite { max-width: 860px; margin: 0 auto; }
.ueber-held { text-align: center; padding: 1.5rem 1rem 0.5rem; }
.ueber-held-logo { font-size: 3rem; }
.ueber-held h1 { margin: 0.3rem 0 0.2rem; font-size: 2rem; }
.ueber-claim { color: var(--muted); font-size: 1.05rem; margin: 0 0 1rem; }
.ueber-inhalt h2.ueber-h2 { margin: 1.6rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--line); font-size: 1.25rem; }
.ueber-inhalt h3 { margin: 1rem 0 0.4rem; font-size: 1.02rem; }
.ueber-inhalt ul.ueber-liste { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; }
.ueber-inhalt ul.ueber-liste li { margin: 0.25rem 0; }
.ueber-inhalt hr { border: none; border-top: 1px solid var(--line); margin: 1.2rem 0; }

/* Easter Egg: Bit-Beisl PRO */
.fuss-pro { background: linear-gradient(90deg,#f59e0b,#db2777); color: #fff !important; }
.pro-seite { max-width: 980px; margin: 0 auto; }
.pro-held { text-align: center; padding: 1.5rem 1rem; }
.pro-badge { display: inline-block; background: #111; color: #ffd54a; font-weight: 700; letter-spacing: 0.05em;
    padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8rem; }
.pro-held h1 { font-size: 2.6rem; margin: 0.6rem 0 0.4rem; }
.pro-glanz { background: linear-gradient(90deg,#f59e0b,#db2777,#7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pro-claim { color: var(--muted); }
.pro-tarife { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1rem; margin: 1rem 0; }
.pro-karte { border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem; background: var(--karte-bg,#fff); display: flex; flex-direction: column; }
.pro-empfohlen { border: 2px solid #db2777; box-shadow: 0 10px 30px rgba(219,39,119,0.18); transform: translateY(-6px); }
.pro-galaxy { background: radial-gradient(circle at top right, rgba(124,58,237,0.12), transparent 60%); }
.pro-tarif-name { font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.pro-preis { font-size: 1.8rem; font-weight: 800; margin: 0.4rem 0; }
.pro-preis span { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.pro-tag { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.6rem; }
.pro-features { list-style: none; margin: 0 0 1rem; padding: 0; flex: 1; }
.pro-features li { margin: 0.4rem 0; }
.pro-features li.pro-klein { font-size: 0.75rem; color: var(--muted); }
.pro-knopf-wrap { text-align: center; min-height: 44px; }
.pro-kaufen { background: linear-gradient(90deg,#f59e0b,#db2777); }
.pro-fuss { text-align: center; margin-top: 1rem; }
.pro-popup { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.pro-popup-box { background: var(--karte-bg,#fff); border-radius: 16px; padding: 1.8rem 2rem; text-align: center; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.pro-popup-emoji { font-size: 2.6rem; }
.pro-popup-text { font-size: 1.15rem; font-weight: 600; margin: 0.6rem 0 1rem; }

/* Archiv-Verknüpfung auf der Kursseite */
.verkn-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.verkn-form select { min-width: 180px; flex: 1; }
.link-knopf { background: none; border: none; padding: 0; color: #dc2626; cursor: pointer; font: inherit; text-decoration: underline; }
.material-zeile form { display: inline; }

/* Öffentliche Datei-Freigabe (Link) */
.oeff-link-box { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); }
.oeff-link-feld { flex: 1; min-width: 200px; font-family: var(--mono, ui-monospace, monospace); font-size: 0.85rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.abzeichen-ok { background: #16a34a; color: #fff; }

/* Archiv v4.4: Dropzone, Vorschaubilder, Filter, Blättern */
.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:1.4rem; border:2px dashed var(--line); border-radius:12px; background:var(--surface); cursor:pointer; text-align:center; transition:border-color .15s, background .15s; }
.dropzone:hover { border-color:var(--akzent); }
.dropzone-aktiv { border-color:var(--akzent); background:color-mix(in srgb, var(--akzent) 10%, var(--surface)); }
.dropzone-text { font-weight:600; }
.dropzone-liste { word-break:break-all; }
.datei-thumb { flex:0 0 auto; width:42px; height:42px; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.datei-thumb img { width:100%; height:100%; object-fit:cover; }
.datei-thumb-icon { font-size:1.4rem; }
.datei-thumb-btn { padding:0; cursor:pointer; }
.link-btn {
    background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer;
    color:var(--primary); text-decoration:underline;
}
.link-btn:hover { color:var(--primary-dark); }

/* ---------- Datei-Vorschau-Modal (Archiv) ---------- */
.vorschau-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.vorschau-modal[hidden] { display: none !important; }
.vorschau-modal-hintergrund { position:absolute; inset:0; background:rgba(20,20,35,0.72); }
.vorschau-modal-rahmen {
    position:relative; background:var(--surface); border-radius:12px; width:100%; max-width:900px; height:85vh;
    display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.vorschau-modal-kopf { display:flex; align-items:center; justify-content:space-between; padding:0.7rem 1rem; border-bottom:1px solid var(--line); gap:0.8rem; }
.vorschau-modal-titel { font-weight:600; font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#vorschau-modal-frame { flex:1; width:100%; border:0; background:#525659; }
@media (max-width:720px) {
    .vorschau-modal { padding:0; }
    .vorschau-modal-rahmen { max-width:100%; height:100%; border-radius:0; }
}

.datei-typ-abzeichen { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:800; font-size:0.72rem; letter-spacing:0.02em; color:#fff; line-height:1; text-align:center; }
.typ-pdf    { background:#dc2626; }
.typ-word   { background:#2563eb; font-size:1.35rem; }
.typ-excel  { background:#0e9f6e; font-size:1.35rem; }
.typ-ppt    { background:#d9772b; font-size:1.35rem; }
.typ-txt    { background:#64748b; }
.typ-exe    { background:#1f2937; }
.typ-iso    { background:#7c3aed; }
.typ-script { background:#0e7490; }
.typ-zip    { background:#a16207; }
.typ-web    { background:#0891b2; font-size:1rem; }
.typ-sonstige { background:transparent; font-size:1.4rem; }
.verkn-zahl { color:var(--akzent); font-weight:600; text-decoration:none; }
a.verkn-zahl:hover { text-decoration:underline; }
.archiv-filter { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.4rem 0 1rem; }
.archiv-sortierung { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:0 0 1rem; }
.archiv-sortierung .hinweis { margin-right: .1rem; }
.kat-chip { padding:.25rem .7rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font-size:.85rem; }
.kat-chip:hover { border-color:var(--akzent); }
.kat-chip.aktiv { background:var(--akzent); color:#fff; border-color:var(--akzent); }
.freigabe-box { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--line); }
.freigabe-box[hidden] { display: none !important; }
.blaettern { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1rem 0; }

/* Prüfungs-Statistik */
.vert-grid { display:flex; align-items:flex-end; gap:.4rem; height:140px; margin:.6rem 0 .2rem; }
.vert-saeule { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.vert-balken { width:70%; min-height:2px; background:var(--akzent); border-radius:4px 4px 0 0; }
.vert-zahl { font-size:.75rem; font-weight:600; margin-top:.2rem; }
.vert-label { font-size:.7rem; color:var(--ink-leise,#888); }
.frage-stat-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.9rem; }
.frage-stat-kopf { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.frage-stat-text { font-weight:500; }
.frage-stat-quote { white-space:nowrap; }
.balken-spur { background:var(--line); border-radius:999px; height:9px; overflow:hidden; margin:.35rem 0 .2rem; }
.balken-fuell { height:100%; border-radius:999px; }
.balken-rot { background:#dc2626; }
.balken-gelb { background:#d97706; }
.balken-gruen { background:#16a34a; }

/* Suche-Hervorhebung + Fokus-Sichtbarkeit */
mark { background:#fde68a; color:inherit; padding:0 .12em; border-radius:3px; }
[data-theme="dark"] mark { background:#854d0e; color:#fff; }
.dropzone:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }
.kat-chip:focus-visible, .btn:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }

/* Archiv-Sammelaktionen */
.sammel-bar { flex-wrap:wrap; }
.sammel-feld { padding:.35rem .5rem; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); min-width:130px; }
.sammel-trenner { width:1px; align-self:stretch; background:var(--line); margin:0 .2rem; }

/* Pro-Popup: hidden-Attribut respektieren (sonst nicht schließbar) */
.pro-popup[hidden] { display: none !important; }
/* Theme-Button oben im Kopf */
.kopf .theme-btn { align-self: center; }

/* Favoriten: De-markieren direkt vom Dashboard */
.favorit-wrap { position: relative; max-width: 260px; }
.favorit-wrap .favorit-kachel { width: 100%; padding-right: 2.6rem; box-sizing: border-box; }
.favorit-wrap .favorit-kachel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.favorit-wrap .favorit-kachel img, .favorit-wrap .favorit-kachel .modul-nr { flex-shrink: 0; }
.favorit-wrap form { position: absolute; top: 50%; right: 6px; margin: 0; transform: translateY(-50%); }
.favorit-wrap .fav-icon { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; width: 26px; height: 26px; line-height: 1; cursor: pointer; color: #e0a400; font-size: 1rem; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.favorit-wrap .fav-icon:hover { background: var(--chip-amber-bg); }
[data-theme="dark"] .fav-icon { background: rgba(35,40,56,.9); }
[data-theme="dark"] .favorit-wrap .fav-icon:hover { background: var(--surface-2); }
[data-theme="dark"] .favorit-wrap .fav-icon { background: var(--surface); }

/* Einheitlicher Papierkorb – schwebender Button unten rechts */
.papierkorb-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 50;
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: 999px;
    padding: .55rem .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.18);
    text-decoration: none; font-weight: 600; font-size: .9rem;
}
.papierkorb-fab:hover { border-color: var(--akzent); color: var(--akzent); }


/* Skripten-Archiv */
.skript-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.skript-karte { display: flex; gap: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .8rem; }
.skript-bild { flex: 0 0 64px; width: 64px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.skript-bild img { width: 100%; height: 100%; object-fit: cover; }
.skript-bild-platzhalter { font-size: 1.8rem; opacity: .7; }
.skript-text { flex: 1; min-width: 0; }
.skript-titel { font-weight: 600; }
.skript-autor { font-size: .85rem; opacity: .75; margin-top: .1rem; }
.skript-beschr { font-size: .85rem; opacity: .85; margin: .35rem 0; }
.skript-aktionen { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }

/* Kurs-Kategorie: Offenes Kursbuch / Firmen-Intern-Training */
.kategorie-wahl { display: flex; gap: .7rem; flex-wrap: wrap; }
.kategorie-option { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 9px; padding: .55rem .9rem; cursor: pointer; font-weight: 600; }
.kategorie-option input { margin: 0; }
.kategorie-option-offen { border-color: var(--chip-gruen-rand); }
.kategorie-option-offen:has(input:checked) { background: var(--chip-gruen-bg); border-color: var(--chip-gruen-fg); color: var(--chip-gruen-fg); }
.kategorie-option-fit { border-color: var(--chip-lila-rand); }
.kategorie-option-fit:has(input:checked) { background: var(--chip-lila-bg); border-color: var(--chip-lila-fg); color: var(--chip-lila-fg); }

/* Kursübersicht: farbliche Kennzeichnung der Kategorie */
.kurskarte-offen { border-left-width: 4px; border-left-style: solid; border-left-color: #16a34a; }
.kurskarte-fit { border-left-width: 4px; border-left-style: solid; border-left-color: #7c3aed; }
.kat-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.kat-pill-offen { background: var(--chip-gruen-bg); color: var(--chip-gruen-fg); }
.kat-pill-fit { background: var(--chip-lila-bg); color: var(--chip-lila-fg); }

/* "Material teilen" als Button neben PDF-/ZIP-Export (statt eigener Karte weiter unten) */
.kurs-aktionen details.kurs-material-teilen { position: relative; }
.kurs-aktionen details.kurs-material-teilen summary { list-style: none; cursor: pointer; }
.kurs-aktionen details.kurs-material-teilen summary::-webkit-details-marker { display: none; }
.kurs-aktionen details.kurs-material-teilen.ist-frei summary { border-color: var(--ok); color: var(--ok-text); background: var(--ok-soft); }
.kurs-material-inhalt {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
    width: max-content; max-width: min(420px, calc(100vw - 2rem));
    margin-top: 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); box-shadow: var(--shadow-md);
}
@media (max-width: 640px) {
.kurs-material-inhalt { right: auto; left: 0; }
.toast-bereich { left: 1.1rem; right: 1.1rem; max-width: none; }
}

/* Einheitliche, reine Icon-Buttons für die Kurs-/Modul-Aktionen (Bearbeiten, Export, Teilen) */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px; flex: none;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink);
    font-size: 1.1rem; line-height: 1; cursor: pointer; text-decoration: none; user-select: none;
    transition: border-color .15s, color .15s, background .15s;
}
.btn-icon:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; background: var(--primary-soft); }

/* Schwebende Erfolgs-/Fehlermeldungen (Toast) nach Aktionen wie Speichern/Löschen */
.toast-bereich { position: fixed; top: 1.1rem; right: 1.1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; max-width: min(360px, calc(100vw - 2.2rem)); }
.toast {
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--ok);
    border-radius: 10px; padding: 0.7rem 2.2rem 0.7rem 0.9rem; box-shadow: var(--shadow-md); font-size: 0.92rem; line-height: 1.4;
    cursor: pointer; position: relative; animation: toast-rein .25s ease-out;
}
.toast::after { content: "✕"; position: absolute; top: 0.55rem; right: 0.7rem; font-size: 0.75rem; color: var(--muted); }
.toast-fehler { border-left-color: var(--danger); }
.toast-aus { animation: toast-raus .25s ease-in forwards; }
@keyframes toast-rein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-raus { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }


/* Upload-Fortschritt mit Zeitschätzung (Sammlung) */
.upload-fortschritt { margin-top: 0.8rem; }
.upload-balken-spur { background: var(--line); border-radius: 999px; height: 10px; overflow: hidden; }
.upload-balken { height: 100%; width: 0%; background: var(--primary); border-radius: 999px; transition: width .2s ease; }
.upload-status { margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted); }

/* ---------- Nachgezogene Klassen (Audit v2.3): vorher verwendet, aber nie definiert ---------- */
/* Kompakte Dateiliste (Dashboard „Zuletzt hochgeladen") */
.dateiliste.kompakt .dateizeile { padding: 0.35rem 0; font-size: 0.92rem; }
/* Horizontales Scrollen der Sammlung-Liste auf sehr schmalen Displays */
.dateiliste-wrap { overflow-x: auto; }
/* Lückentext-Absatz in der öffentlichen Prüfung */
.luecke-text { line-height: 2.2; }
/* Öffentlicher-Link-Block in der Prüfungs-Bearbeitung */
.oeffentlich-link { margin-top: 0.8rem; }
/* Ranglisten-Karte in der Wettbewerb-Host-Ansicht */
.wb-board { margin-top: 1rem; }
/* LE-Zahlenspalte im Gegenstands-Editor */
input.geg-le {
    text-align: center;
    /* Ohne die nativen Spinner-Pfeile: bei schmaler Spalte überlappten sie ab 2-3-stelligen
       Zahlen (z. B. "320") die Ziffern selbst. Der Wert bleibt per Tastatur/Copy-Paste änderbar. */
    -moz-appearance: textfield;
    appearance: textfield;
}
input.geg-le::-webkit-outer-spin-button,
input.geg-le::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Echtzeit-Schnellsuche (Menü) ---------- */
.schnellsuche-ergebnisse {
    position: absolute; top: calc(100% + 0.4rem); left: 0;
    width: 20rem; max-width: 90vw; max-height: 22rem; overflow-y: auto;
    background: var(--karte-bg, #fff); color: var(--text, #1f2937);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.22);
    z-index: 60; padding: 0.35rem;
}
.schnellsuche-eintrag {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.6rem; border-radius: 7px; text-decoration: none; color: inherit;
}
.schnellsuche-eintrag:hover, .schnellsuche-eintrag.aktiv { background: var(--zeile-hover, #f1f1ff); }
.schnellsuche-typ {
    flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    color: var(--primary); background: var(--primary-bg-soft, #eef0ff); padding: 0.15rem 0.45rem; border-radius: 999px;
}
.schnellsuche-titel { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schnellsuche-leer { padding: 0.6rem; font-size: 0.88rem; color: var(--muted); }
.schnellsuche-skelett {
    height: 2.1rem; margin: 0.25rem 0.1rem; border-radius: 7px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: skelett-schimmer 1.4s ease-in-out infinite;
}
@keyframes skelett-schimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.schnellsuche-alle {
    display: block; text-align: center; margin-top: 0.2rem; padding: 0.5rem;
    font-size: 0.86rem; font-weight: 600; color: var(--primary); text-decoration: none; border-radius: 7px;
}
.schnellsuche-alle:hover { background: var(--zeile-hover, #f1f1ff); }
@media (max-width: 720px) {
    .schnellsuche-ergebnisse { width: 100%; left: 0; right: 0; }
}

/* ---------- Druckansicht ---------- */
@media print {
    /* Navigation, Aktionen und alles rein Interaktive weg - nur der Inhalt bleibt */
    .kopf, .fuss, .papierkorb-fab, .skip-link, .zurueck, .werkzeugleiste,
    .btn, .btn-rand, .btn-klein, .btn-icon, .btn-gefahr, .form-aktionen,
    form:not(.druck-sichtbar), .archiv-filter, .archiv-sortierung, .kat-chip,
    .flash, .meldung, .info-symbol, .schnellsuche-ergebnisse, iframe,
    .qr-code, .abzeichen-reihe a[href^="mailto"] {
        display: none !important;
    }
    /* Aufklappbare Karten sollen beim Drucken immer offen sein, sonst fehlt der Inhalt */
    details { display: block !important; }
    details > summary { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .inhalt { max-width: 100%; padding: 0; margin: 0; }
    .karte, .kurskarte { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
    a { color: #000; text-decoration: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
    .seiten-titel { font-size: 18pt; }
    /* Seitenumbruch vor jedem groesseren Abschnitt vermeiden mitten im Inhalt */
    h1, h2, h3 { break-after: avoid; }
}