/* Ergänzungen des Digitalen Kompasses zum gemeinsamen GIMA-Stylesheet.
   style.css bleibt unverändert, damit Korrekturen am gemeinsamen Aussehen
   weiterhin aus den Schwesterprojekten übernommen werden können. */

/* ── Zeichnungen ─────────────────────────────────────────────────────────── */
.bild { width: 100%; height: 100%; display: block; }

/* ── Modulkacheln auf der Startseite ─────────────────────────────────────── */
.modul-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.1rem;
}
.modul-karte {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.3rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.modul-karte:hover {
    border-color: var(--gima-orange);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}
.modul-kopf { display: flex; align-items: flex-start; gap: .9rem; }
.modul-symbol {
    flex: 0 0 46px; width: 46px; height: 46px;
    color: var(--gima-orange);
}
.modul-karte h3 { margin: 0 0 .15rem; font-size: 1.08rem; }
.modul-untertitel { margin: 0; color: var(--text-muted); font-size: .87rem; line-height: 1.4; }
.modul-fuss {
    margin-top: auto; padding-top: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.modul-meta { color: var(--text-subtle); font-size: .8rem; }

/* Fortschrittsbalken */
.balken { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 1rem 0 .4rem; }
.balken > span { display: block; height: 100%; background: var(--gima-orange); border-radius: 4px; transition: width .3s; }
.balken.gut > span { background: var(--success); }

/* Standkennzeichnung */
.stand { display: inline-block; padding: .18rem .6rem; border-radius: 20px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.stand-offen      { background: #edeff1; color: #5c6670; }
.stand-begonnen   { background: #e3f0fa; color: #1f6ea8; }
.stand-bestanden  { background: #e4f6ea; color: #1e8449; }
.stand-faellig    { background: #fdeee0; color: #b8621a; }
[data-theme="dark"] .stand-offen     { background: #34383d; color: #b6bec6; }
[data-theme="dark"] .stand-begonnen  { background: #1d3a4f; color: #7fc0ee; }
[data-theme="dark"] .stand-bestanden { background: #1d3f2c; color: #74d69a; }
[data-theme="dark"] .stand-faellig   { background: #4a3418; color: #f0b072; }

/* ── Ringdiagramm der Gesamtquote ────────────────────────────────────────── */
.quote-box { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.ring { position: relative; width: 116px; height: 116px; flex: 0 0 116px; }
.ring svg { transform: rotate(-90deg); }
.ring .spur { stroke: var(--surface-2); }
.ring .wert { stroke: var(--gima-orange); stroke-linecap: round; transition: stroke-dashoffset .6s; }
.ring.voll .wert { stroke: var(--success); }
.ring-text {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem;
}
.ring-text small { font-weight: 500; font-size: .68rem; color: var(--text-muted); }

/* ── Erklärfilm ──────────────────────────────────────────────────────────── */
.film-buehne {
    position: relative;
    background: linear-gradient(160deg, #2b2f36 0%, #1b1e23 100%);
    color: #f2f4f6;
    border-radius: 12px;
    padding: 2.4rem 2rem;
    min-height: 380px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    overflow: hidden;
}
.film-szene { display: none; max-width: 640px; }
.film-szene.aktiv { display: block; animation: einblenden .5s ease-out; }
@keyframes einblenden { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.film-symbol { width: 108px; height: 108px; margin: 0 auto 1.4rem; color: var(--gima-orange-light); }
.film-szene.aktiv .film-symbol { animation: pulsieren 3.4s ease-in-out infinite; }
@keyframes pulsieren { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.film-szene h2 { margin: 0 0 .8rem; font-size: 1.5rem; color: #fff; }
.film-szene p { margin: 0; font-size: 1.06rem; line-height: 1.65; color: #d7dbe0; }
.film-zaehler { position: absolute; top: 1rem; right: 1.2rem; font-size: .8rem; color: #98a0a8; }
.film-fortschritt { display: flex; gap: 5px; margin-top: 1rem; }
.film-fortschritt span {
    flex: 1; height: 4px; border-radius: 3px; background: var(--surface-2); cursor: pointer;
}
.film-fortschritt span.erledigt { background: var(--gima-orange); }
.film-steuerung { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.film-steuerung .abstand { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
    .film-szene.aktiv, .film-szene.aktiv .film-symbol { animation: none; }
}

/* ── Lektionstext ────────────────────────────────────────────────────────── */
.lektion-text { font-size: 1.02rem; line-height: 1.75; max-width: 62rem; }
.lektion-text h3 { margin: 1.8rem 0 .6rem; font-size: 1.1rem; color: var(--gima-orange); }
.lektion-text ul, .lektion-text ol { padding-left: 1.4rem; }
.lektion-text li { margin-bottom: .45rem; }
.lektion-text code {
    background: var(--surface-2); padding: .1rem .35rem; border-radius: 4px;
    font-size: .92em; word-break: break-all;
}
.lektion-text kbd {
    background: var(--surface-2); border: 1px solid var(--border);
    border-bottom-width: 2px; border-radius: 4px; padding: .05rem .4rem; font-size: .88em;
}
.lektion-text .merksatz {
    border-left: 4px solid var(--gima-orange);
    background: var(--surface-2);
    padding: .9rem 1.1rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0;
}
.kernaussage {
    background: var(--surface-2); border-radius: 8px; padding: .9rem 1.1rem;
    margin-bottom: 1.4rem; font-weight: 500;
}
.lektion-nav { display: flex; gap: .6rem; align-items: center; margin-top: 2rem; flex-wrap: wrap; }
.lektion-nav .abstand { margin-left: auto; }

/* Kapitelliste am Rand */
.kapitel-liste { list-style: none; padding: 0; margin: 0; }
.kapitel-liste li { margin-bottom: .25rem; }
.kapitel-liste a {
    display: flex; gap: .55rem; align-items: baseline;
    padding: .45rem .6rem; border-radius: 6px; text-decoration: none; color: var(--text);
    font-size: .92rem;
}
.kapitel-liste a:hover { background: var(--surface-2); }
.kapitel-liste a.aktiv { background: var(--surface-2); font-weight: 600; color: var(--gima-orange); }
.kapitel-liste .nr { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.kapitel-liste .erledigt-haken { color: var(--success); }

/* ── Test ────────────────────────────────────────────────────────────────── */
.frage-karte { border: 1px solid var(--border); border-radius: 10px; padding: 1.3rem; margin-bottom: 1rem; }
.frage-karte.falsch { border-color: var(--danger); }
.frage-kopf { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .9rem; }
.frage-nr {
    flex: 0 0 auto; background: var(--gima-orange); color: #fff; border-radius: 50%;
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 700;
}
.frage-text { font-weight: 600; }
.frage-hinweis { color: var(--text-subtle); font-size: .8rem; margin: -.5rem 0 .8rem 2.3rem; }
.antwort-liste { list-style: none; padding: 0; margin: 0 0 0 2.3rem; }
.antwort-liste li { margin-bottom: .45rem; }
.antwort-liste label {
    display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
    padding: .5rem .7rem; border: 1px solid var(--border-subtle); border-radius: 7px;
}
.antwort-liste label:hover { background: var(--surface-2); }
.antwort-liste input { margin-top: .2rem; }
.antwort-liste li.richtig label { border-color: var(--success); background: rgba(39, 174, 96, .08); }
.antwort-liste li.gewaehlt-falsch label { border-color: var(--danger); background: rgba(231, 76, 60, .08); }
.erklaerung {
    margin: .8rem 0 0 2.3rem; padding: .7rem .95rem; border-radius: 7px;
    background: var(--surface-2); font-size: .93rem;
}

/* Ergebnis */
.ergebnis-box { text-align: center; padding: 2rem 1rem; }
.ergebnis-zahl { font-size: 3.2rem; font-weight: 700; line-height: 1; }
.ergebnis-box.bestanden .ergebnis-zahl { color: var(--success); }
.ergebnis-box.durchgefallen .ergebnis-zahl { color: var(--danger); }
.ergebnis-symbol { width: 84px; height: 84px; margin: 0 auto 1rem; }
.ergebnis-box.bestanden .ergebnis-symbol { color: var(--success); }
.ergebnis-box.durchgefallen .ergebnis-symbol { color: var(--danger); }

/* ── Teilnahmebestätigung ────────────────────────────────────────────────── */
.nachweis {
    max-width: 780px; margin: 0 auto; background: #fff; color: #333;
    border: 2px solid var(--gima-orange); border-radius: 4px; padding: 3rem 3.4rem;
}
.nachweis h1 { text-align: center; font-size: 1.7rem; margin: 0 0 .3rem; color: var(--gima-orange); }
.nachweis .unterzeile { text-align: center; color: #777; margin: 0 0 2.4rem; }
.nachweis .name { text-align: center; font-size: 1.6rem; font-weight: 700; margin: 1.6rem 0; }
.nachweis .modulzeile { text-align: center; font-size: 1.15rem; margin-bottom: 2rem; }
.nachweis-tabelle { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.nachweis-tabelle td { padding: .5rem 0; border-bottom: 1px solid #eee; font-size: .95rem; }
.nachweis-tabelle td:first-child { color: #777; width: 45%; }
.nachweis-fuss { margin-top: 2.6rem; font-size: .8rem; color: #888; text-align: center; line-height: 1.6; }
.nachweis-logo { display: block; height: 42px; margin: 0 auto 1.6rem; }

@media print {
    .sidebar, .mobile-topbar, .site-footer, .kein-druck, .dev-banner-box { display: none !important; }
    .app-main, .container { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .nachweis { border-width: 2px; padding: 2rem; }
    body { background: #fff; }
}

/* ── Auswertungsmatrix ───────────────────────────────────────────────────── */
.matrix { border-collapse: collapse; width: 100%; font-size: .9rem; }
.matrix th, .matrix td { padding: .55rem .7rem; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.matrix th.modul-spalte { font-size: .8rem; font-weight: 600; vertical-align: bottom; }
.matrix td.zelle { text-align: center; }
.matrix tbody tr:hover { background: var(--surface-2); }
.punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.punkt-offen { background: #b9c0c7; }
.punkt-begonnen { background: var(--info); }
.punkt-bestanden { background: var(--success); }
.punkt-faellig { background: var(--warning); }

.legende { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .84rem; color: var(--text-muted); margin-top: .9rem; }
.legende span { display: inline-flex; align-items: center; gap: .4rem; }