/* =====================================================================
   style.css – Globales Design-System (Light/Dark) + Modal-CSS
   Lernplattform Flusi Universe
   ===================================================================== */

:root {
    --ink: #1e2a38;
    --ink-soft: #51606f;
    --ink-mute: #8493a3;
    --paper: #f5f8fc;
    --card: #ffffff;
    --rand: #e6ecf4;
    --rand-stark: #d3dde9;

    --akzent: #e07b1a;
    --akzent-dunkel: #c25e10;
    --akzent-soft: #fcefdf;
    --himmel: #f0a44a;
    --erfolg: #16a34a;
    --erfolg-soft: #dcfce7;
    --warnung: #d97706;
    --warnung-soft: #fef3c7;
    --gefahr: #dc2626;
    --gefahr-soft: #fee2e2;

    --schatten: 0 1px 2px rgba(30, 42, 56, .04);
    --schatten-mittel: 0 2px 8px rgba(30, 42, 56, .07);
    --schatten-gross: 0 12px 32px rgba(30, 42, 56, .10);

    --radius: 14px;
    --radius-klein: 9px;
    --radius-gross: 20px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --overlay-bg: rgba(15, 23, 42, .55);
}

[data-theme="dark"] {
    --ink: #e8edf2;
    --ink-soft: #b4bfca;
    --ink-mute: #7e8b98;
    --paper: #0f1620;
    --card: #18222f;
    --rand: #2a3744;
    --rand-stark: #3a4856;

    --akzent: #f0922e;
    --akzent-dunkel: #f4ab59;
    --akzent-soft: #3a2410;
    --himmel: #f3a850;
    --erfolg: #22c55e;
    --erfolg-soft: #14361f;
    --warnung: #f59e0b;
    --warnung-soft: #3a2c0d;
    --gefahr: #ef4444;
    --gefahr-soft: #3a1518;

    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .4);
    --schatten-mittel: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .3);
    --schatten-gross: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 8px 10px -6px rgba(0, 0, 0, .4);

    --overlay-bg: rgba(10, 9, 8, 0.88);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    transition: background .25s ease, color .25s ease;
}

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

h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: 1.8rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 650; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }

code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    background: var(--paper);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: .1em .4em;
    font-size: .9em;
}

/* ---------- Layout-Container ---------- */
.container {
    width: min(1100px, 92vw);
    margin: 0 auto;
    padding: 2rem 0;
}

.container-schmal { width: min(560px, 92vw); }

/* ---------- Karten ---------- */
.karte {
    background: var(--card);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.5rem;
}

.karte-titel { font-size: 1.1rem; font-weight: 650; margin-bottom: 1rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    padding: .7rem 1.2rem;
    border-radius: var(--radius-klein);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primär {
    background: var(--akzent);
    color: #fff;
    box-shadow: var(--schatten);
}
.btn-primär:hover { background: var(--akzent-dunkel); color: #fff; }

.btn-sekundär {
    background: var(--card);
    color: var(--ink);
    border-color: var(--rand-stark);
}
.btn-sekundär:hover { background: var(--paper); }

.btn-gefahr {
    background: var(--gefahr);
    color: #fff;
}
.btn-gefahr:hover { filter: brightness(1.08); color: #fff; }

.btn-erfolg { background: var(--erfolg); color: #fff; }
.btn-erfolg:hover { filter: brightness(1.08); color: #fff; }

.btn-klein { padding: .45rem .8rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Formular ---------- */
label.feld { display: block; margin-bottom: 1rem; }
.feld-text { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--ink-soft); }

input[type="text"], input[type="password"], input[type="number"],
input[type="email"], textarea, select {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    padding: .65rem .8rem;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px var(--akzent-soft);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }

/* Auswahl-Pfeil für Selects (statt nativem Browser-Pfeil) */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a97a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 15px;
    padding-right: 2.4rem;
    cursor: pointer;
}

/* Datei-Auswahl-Feld an das Design anpassen */
input[type="file"] {
    width: 100%;
    font-family: inherit;
    font-size: .9rem;
    color: var(--ink-soft);
    background: var(--card);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    padding: .45rem .55rem;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rand-stark);
    border-radius: 7px;
    padding: .45rem .85rem;
    margin-right: .8rem;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
input[type="file"]::file-selector-button:hover {
    background: var(--akzent-soft);
    border-color: var(--akzent);
    color: var(--akzent-dunkel);
}
input[type="file"]:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px var(--akzent-soft);
}

/* ---------- Badges / Status ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 650;
    padding: .25rem .6rem;
    border-radius: 999px;
}
.badge-neu { background: var(--akzent-soft); color: var(--akzent-dunkel); }
.badge-bearbeitung { background: var(--warnung-soft); color: var(--warnung); }
.badge-bestanden { background: var(--erfolg-soft); color: var(--erfolg); }
.badge-gesperrt { background: var(--gefahr-soft); color: var(--gefahr); }
.badge-pruefung { background: var(--akzent-soft); color: var(--akzent-dunkel); }

/* ---------- Fortschrittsbalken ---------- */
.fortschritt {
    height: 10px;
    background: var(--rand);
    border-radius: 999px;
    overflow: hidden;
}
.fortschritt > span {
    display: block;
    height: 100%;
    background: var(--akzent);
    border-radius: 999px;
    transition: width .4s ease;
}

/* ---------- Meldungen ---------- */
.meldung {
    border-radius: var(--radius-klein);
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    font-size: .92rem;
    border: 1px solid transparent;
}
.meldung-erfolg { background: var(--erfolg-soft); color: var(--erfolg); border-color: color-mix(in srgb, var(--erfolg) 30%, transparent); }
.meldung-fehler { background: var(--gefahr-soft); color: var(--gefahr); border-color: color-mix(in srgb, var(--gefahr) 30%, transparent); }
.meldung-info { background: var(--akzent-soft); color: var(--akzent-dunkel); border-color: color-mix(in srgb, var(--akzent) 30%, transparent); }

/* ---------- Schalter (Toggle-Switch) ---------- */
.switch { position: relative; display: inline-block; width: 54px; height: 30px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--rand-stark); border-radius: 999px; transition: background .2s;
}
.switch-slider::before {
    content: ""; position: absolute; height: 24px; width: 24px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .switch-slider { background: var(--erfolg); }
.switch input:checked + .switch-slider::before { transform: translateX(24px); }
.switch input:focus-visible + .switch-slider { box-shadow: 0 0 0 3px var(--akzent-soft); }

/* ---------- Download-Status-Karte (Dashboard) ---------- */
.download-karte {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    border-left: 5px solid var(--rand-stark);
    transition: border-color .2s;
}
.download-karte.an { border-left-color: var(--erfolg); }
.download-karte.aus { border-left-color: var(--gefahr); }
.download-karte .dk-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper); color: var(--ink-mute);
}
.download-karte.an .dk-icon { background: var(--erfolg-soft); color: var(--erfolg); }
.download-karte.aus .dk-icon { background: var(--gefahr-soft); color: var(--gefahr); }
.download-karte .dk-icon svg { width: 26px; height: 26px; }
.download-karte .dk-text { flex: 1; min-width: 0; }
.download-karte .dk-titel { font-weight: 700; font-size: 1.05rem; }

/* ---------- Theme-Toggle ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-klein);
    border: 1px solid var(--rand-stark);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    transition: background .15s;
}
.theme-toggle:hover { background: var(--paper); }
.theme-toggle .icon-sonne { display: none; }
.theme-toggle .icon-mond { display: block; }
[data-theme="dark"] .theme-toggle .icon-sonne { display: block; }
[data-theme="dark"] .theme-toggle .icon-mond { display: none; }

/* ---------- Utility ---------- */
.reihe { display: flex; gap: 1rem; align-items: center; }
.reihe-zwischen { justify-content: space-between; }
.reihe-wrap { flex-wrap: wrap; }
.stapel { display: flex; flex-direction: column; gap: 1rem; }
.text-mute { color: var(--ink-mute); }
.pw-anzeige { font-family: ui-monospace, monospace; letter-spacing: .04em; }
.pw-toggle { background: none; border: none; color: var(--akzent); cursor: pointer; font-size: .82rem; font-weight: 600; padding: 0 .2rem; }
.pw-toggle:hover { text-decoration: underline; }
.text-klein { font-size: .85rem; }
.text-mitte { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.gitter { display: grid; gap: 1.25rem; }
.gitter-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gitter-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* =====================================================================
   Lightbox – große Bildvorschau (Infografiken anklickbar)
   ===================================================================== */
img.info-vorschau { cursor: zoom-in; transition: filter .12s; }
img.info-vorschau:hover { filter: brightness(1.05); }
.info-vorschau-pdf { cursor: pointer; text-decoration: none; }
.info-vorschau-pdf:hover { filter: brightness(1.03); }

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 9, 8, .88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 3000;
    cursor: zoom-out;
    backdrop-filter: blur(2px);
}
.lightbox.offen { display: flex; }
.lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    cursor: default;
}
.lightbox-zu {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s;
}
.lightbox-zu:hover { background: rgba(255, 255, 255, .32); }

/* =====================================================================
   Modal / Bestätigungsdialog (global, damit auf allen Seiten verfügbar)
   ===================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
    opacity: 0;
    transition: opacity .15s ease;
}
.modal-overlay.offen { display: flex; opacity: 1; }

.modal-box {
    background: var(--card);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-gross);
    width: min(420px, 100%);
    padding: 1.75rem;
    transform: translateY(8px) scale(.98);
    transition: transform .15s ease;
}
.modal-overlay.offen .modal-box { transform: translateY(0) scale(1); }

.modal-box h3 { margin-bottom: .5rem; }
.modal-box p { color: var(--ink-soft); margin-bottom: 1.5rem; }
.modal-aktionen { display: flex; gap: .75rem; justify-content: flex-end; }

@media (max-width: 520px) {
    .modal-aktionen { flex-direction: column-reverse; }
    .modal-aktionen .btn { width: 100%; }
}