/* =====================================================================
   ViewVault – „Lichtspiel“

   Grundgedanke: Die Seite ist ein dunkler Saal. Das Hellste sind die
   Plakate und die eigenen Zahlen. Alles Bedienbare tritt zurück.
   Rot kommt höchstens dreimal pro Bildschirm vor.
   ===================================================================== */

/* --- Schriften -------------------------------------------------------
   Lokal eingebunden, nicht von Googles Servern: Ein Aufruf dorthin
   überträgt die IP-Adresse jedes Besuchers an Google. Anleitung zum
   Herunterladen steht in SCHRIFTEN.txt. Fehlen die Dateien, greift
   automatisch die Rückfallkette in --schrift-ui / --schrift-lese.     */

@font-face {
    font-family: 'Archivo Narrow';
    src: url('fonts/archivo-narrow-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Archivo Narrow';
    src: url('fonts/archivo-narrow-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Archivo Narrow';
    src: url('fonts/archivo-narrow-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Newsreader';
    src: url('fonts/newsreader-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Newsreader';
    src: url('fonts/newsreader-400-italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}

:root {
    /* Warmes Dunkel statt kaltem Anthrazit */
    --grund:      #16110E;
    --gehoben:    #1E1815;
    --linie:      #2E2622;
    --linie-hell: #3D332D;

    /* Projektorlicht statt Bildschirmweiß */
    --licht:      #F3EBE1;
    --lese-farbe: #DED3C8;
    --gedimmt:    #9E9187;
    --leise:      #6B6059;

    /* Vorhang und Notausgang – sparsam */
    --rot:        #A63A32;
    --rot-hell:   #C4564C;

    --spalte:     64rem;
    --textmass:   34rem;

    --schrift-ui:   'Archivo Narrow', 'Arial Narrow', system-ui, sans-serif;
    --schrift-lese: 'Newsreader', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--licht);
    font-family: var(--schrift-ui);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--rot-hell); outline-offset: 2px; }

/* --- Kopf- und Fußleiste --------------------------------------------- */

.kopf {
    display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap;
    max-width: var(--spalte); margin-inline: auto;
    padding: 1.1rem 1.6rem;
    border-bottom: 1px solid var(--linie);
}

.marke { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; }
.marke span { color: var(--rot-hell); }

.kopf nav { display: flex; gap: 1.4rem; flex: 1; }
.kopf nav a {
    font-size: .95rem; color: var(--gedimmt); text-decoration: none;
    padding-bottom: .35rem; border-bottom: 2px solid transparent;
}
.kopf nav a:hover { color: var(--licht); }
.kopf nav a.aktiv { color: var(--licht); border-bottom-color: var(--rot); }

.konto { display: flex; align-items: baseline; gap: .9rem; font-size: .9rem; color: var(--leise); }
.konto a { text-decoration: none; color: var(--gedimmt); }
.konto a:hover { color: var(--licht); }

main { max-width: var(--spalte); margin-inline: auto; padding: 2.5rem 1.6rem 5rem; }

.fussleiste {
    max-width: var(--spalte); margin-inline: auto;
    padding: 2rem 1.6rem 3rem; border-top: 1px solid var(--linie);
    color: var(--leise); font-size: .8rem;
}

/* --- Überschriften ---------------------------------------------------- */

h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700;
     letter-spacing: -.015em; line-height: 1.15; margin: 0 0 1.4rem; }

h2.abschnitt, main h2 {
    font-size: .95rem; font-weight: 600; color: var(--gedimmt);
    margin: 2.6rem 0 1.1rem; padding-bottom: .6rem;
    border-bottom: 1px solid var(--linie);
}

/* --- Fließtext -------------------------------------------------------- */

.lese {
    font-family: var(--schrift-lese);
    font-size: 1.05rem; line-height: 1.65;
    max-width: var(--textmass); color: var(--lese-farbe);
}

.hinweis { color: var(--gedimmt); }
.fehler  { color: var(--rot-hell); }

/* --- Die Bilanz (Startseite) ------------------------------------------ */

.bilanz {
    font-size: clamp(1.5rem, 4.4vw, 2.6rem);
    line-height: 1.3; font-weight: 400; color: var(--leise);
    max-width: 26ch; margin: 0 0 4rem; text-wrap: balance;
}
.bilanz b {
    font-weight: 700; color: var(--licht);
    font-variant-numeric: lining-nums tabular-nums;
}
.bilanz .schnitt { color: var(--rot-hell); }

/* --- Plakatwand ------------------------------------------------------- */

.wand, .raster {
    display: grid; gap: 1.6rem 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    list-style: none; padding: 0; margin: 0;
}

.plakat {
    display: block; position: relative; text-decoration: none;
    aspect-ratio: 2/3; border-radius: 2px; overflow: hidden;
    background: var(--gehoben);
    box-shadow: 0 0 0 1px rgba(255,235,210,.07), 0 14px 34px -18px rgba(0,0,0,.9);
}
.plakat img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fehlt das Poster, trägt die Fläche selbst den Titel */
.plakat .ersatz {
    position: absolute; inset: 0; display: grid; align-content: end;
    padding: .6rem; font-size: .82rem; font-weight: 600; line-height: 1.2;
    color: var(--gedimmt);
    background: radial-gradient(ellipse at 30% 18%, #2A211C, #17110E 78%);
}

.unter { margin-top: .45rem; font-size: .8rem; color: var(--leise);
         font-variant-numeric: tabular-nums; }
.unter .name { color: var(--licht); font-weight: 600; font-size: .85rem;
               display: block; line-height: 1.25; }
.unter .sterne { color: var(--licht); letter-spacing: .04em; }

/* --- Filmseite -------------------------------------------------------- */

.zurueck { font-size: .9rem; color: var(--gedimmt); text-decoration: none;
           display: inline-block; margin-bottom: 2rem; }
.zurueck:hover { color: var(--licht); }

.filmkopf { display: flex; gap: 2.6rem; flex-wrap: wrap; align-items: flex-start; }

/* Das Plakat liegt in einem schwachen Lichtkegel – der einzige Effekt
   auf der ganzen Seite. */
.lichtkegel { position: relative; flex: 0 0 210px; }
.lichtkegel::before {
    content: ""; position: absolute; inset: -22% -30% -30%;
    background: radial-gradient(ellipse at 50% 35%, rgba(255,226,190,.16), transparent 68%);
    pointer-events: none;
}
.lichtkegel .plakat { width: 210px; }

.filmkopf .angaben { flex: 1; min-width: 17rem; }
.filmkopf h1 { margin-bottom: .5rem; font-size: clamp(1.7rem, 4vw, 2.3rem); }

.jahrzeile, .regiezeile { color: var(--gedimmt); font-size: .95rem; margin: 0 0 .25rem; }
.jahrzeile { font-variant-numeric: tabular-nums; }
.regiezeile { margin-bottom: 1.4rem; }

.genres { display: flex; gap: .4rem; flex-wrap: wrap; list-style: none;
          padding: 0; margin: 0 0 1.5rem; }
.genres li { font-size: .78rem; color: var(--gedimmt);
             border: 1px solid var(--linie-hell); border-radius: 99px; padding: .1rem .7rem; }

/* Trennung durch Haarlinien, nicht durch Kästen */
.bereiche {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
    margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--linie);
}
@media (max-width: 46rem) { .bereiche { grid-template-columns: 1fr; gap: 2.5rem; } }
.bereiche h2 { margin-top: 0; }

/* --- Bedienelemente --------------------------------------------------- */

.knopf {
    display: inline-block; font: inherit; font-size: .92rem; font-weight: 500;
    padding: .5rem 1.1rem; border-radius: 3px; cursor: pointer;
    background: var(--rot); border: 1px solid var(--rot); color: #FCF3EA;
    text-decoration: none;
}
.knopf:hover { background: var(--rot-hell); border-color: var(--rot-hell); }
.knopf.leise { background: transparent; border-color: var(--linie-hell); color: var(--licht); }
.knopf.leise:hover { border-color: var(--gedimmt); background: transparent; }
.knopf.klein { padding: .3rem .8rem; font-size: .85rem; }

.als-link {
    background: none; border: 0; padding: 0; font: inherit; font-size: .85rem;
    color: var(--leise); text-decoration: underline; cursor: pointer;
}
.als-link:hover { color: var(--rot-hell); }

.inline { display: inline; }

input[type=text], input[type=email], input[type=password],
input[type=search], input[type=date], select, textarea {
    width: 100%; background: var(--gehoben); color: var(--licht);
    border: 1px solid var(--linie); border-radius: 3px;
    padding: .55rem .7rem; font: inherit;
}
textarea { font-family: var(--schrift-lese); line-height: 1.6;
           min-height: 7rem; resize: vertical; }

label { display: block; font-size: .85rem; color: var(--gedimmt); margin: 1.1rem 0 .3rem; }
label.zeile { display: flex; align-items: center; gap: .5rem; color: var(--licht); }
label.zeile input { width: auto; }

::placeholder { color: var(--leise); }

/* --- Sternewahl -------------------------------------------------------- */

.wertung { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.sternewahl {
    display: inline-flex; gap: .2rem; font-size: 1.85rem; line-height: 1;
    cursor: pointer; user-select: none;
}
.sternewahl .stern { position: relative; color: var(--leise); }

/* Die gefüllte Hälfte liegt als beschnittene Kopie über dem Grundstern */
.sternewahl .stern .fuell {
    position: absolute; left: 0; top: 0;
    width: 0; overflow: hidden; white-space: nowrap; color: var(--licht);
}

.wertzahl { font-size: .95rem; color: var(--gedimmt); font-variant-numeric: tabular-nums; }
.sterne { color: var(--licht); letter-spacing: .04em; }

/* --- Eigene Sehtermine --------------------------------------------------- */

.sehtermine { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.sehtermine li {
    display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
    padding: .6rem 0; border-top: 1px solid var(--linie);
    font-size: .88rem; color: var(--gedimmt); font-variant-numeric: tabular-nums;
}
.wieder { color: var(--rot-hell); }

/* --- Tagebuchliste -------------------------------------------------------- */

.tagebuch { list-style: none; padding: 0; margin: 0; }
.tagebuch li {
    display: flex; gap: 1.2rem; align-items: flex-start;
    padding: 1.4rem 0; border-bottom: 1px solid var(--linie);
}
.tagebuch .plakat { width: 58px; flex: 0 0 58px; }
.tagebuch .plakat .ersatz { font-size: 0; }
.tagebuch .kopfzeile { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.tagebuch .name { font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.tagebuch .jahr { color: var(--leise); font-size: .85rem; font-variant-numeric: tabular-nums; }
.tagebuch .zeile { color: var(--leise); font-size: .82rem; margin-top: .15rem;
                   font-variant-numeric: tabular-nums; }
.tagebuch .zitat { margin: .5rem 0 0; font-size: .95rem; }

/* --- Meldungen, Formularseiten, Leerzustände ------------------------------ */

.meldung {
    padding: .7rem 1rem; border-radius: 3px; margin: 0 0 2rem;
    background: var(--gehoben); border-left: 3px solid var(--linie-hell);
}
.meldung.ok     { border-left-color: var(--gedimmt); }
.meldung.fehler { border-left-color: var(--rot); color: var(--licht); }

.fehlerliste {
    margin: 0 0 1.4rem; padding: .8rem 1rem .8rem 2.2rem;
    background: var(--gehoben); border-left: 3px solid var(--rot);
}

.schmal { max-width: 24rem; }

.leer {
    border: 1px dashed var(--linie-hell); border-radius: 3px;
    padding: 2.5rem 1.5rem; text-align: center; color: var(--gedimmt);
}

.suchzeile { display: flex; gap: .5rem; margin-bottom: 1.8rem; max-width: 34rem; }
.suchzeile input { flex: 1; }

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

/* --- Rechtstexte und Fußzeilen-Links -------------------------------- */

.fusslinks { display: flex; gap: 1.2rem; margin-bottom: .8rem; }
.fusslinks a { color: var(--gedimmt); text-decoration: none; }
.fusslinks a:hover { color: var(--licht); }
.fussleiste p { margin: 0; }

.rechtstext { max-width: 42rem; }
.rechtstext p, .rechtstext li {
    font-family: var(--schrift-lese);
    font-size: 1rem; line-height: 1.7; color: var(--lese-farbe);
}
.rechtstext h2 {
    font-family: var(--schrift-ui);
    font-size: 1rem; font-weight: 600; color: var(--licht);
    margin: 2.4rem 0 .8rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--linie);
}
.rechtstext code {
    font-size: .9em; background: var(--gehoben);
    padding: .1rem .35rem; border-radius: 3px; color: var(--licht);
}
.rechtstext strong { color: var(--licht); }

/* --- Listen ----------------------------------------------------------- */

.listenuebersicht { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.listenuebersicht li { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.listenuebersicht .name { font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.listenuebersicht .zeile { color: var(--leise); font-size: .82rem; margin-top: .15rem;
                           font-variant-numeric: tabular-nums; }

.listenchips { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none;
               padding: 0; margin: 0 0 1.4rem; }
.listenchips li a {
    display: inline-block; font-size: .85rem; text-decoration: none; color: var(--licht);
    border: 1px solid var(--linie-hell); border-radius: 99px; padding: .25rem .85rem;
}
.listenchips li a:hover { border-color: var(--gedimmt); }

.zulisteform { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; max-width: 30rem; }
.zulisteform select { flex: 1; min-width: 12rem; }

/* --- Spoilerschutz ------------------------------------------------------ */

.spoiler summary { cursor: pointer; color: var(--rot-hell); font-size: .85rem; margin-top: .4rem; }
.spoiler[open] summary { color: var(--leise); }

.listenband { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.listenband h2 { margin-top: 0; }

/* Für Bildschirmleser vorhanden, sichtbar nicht */
.visuell-weg {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Profilbilder ------------------------------------------------------ */

.avatar {
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--gehoben);
}

/* Platzhalter mit Initiale, wenn kein Bild hinterlegt ist */
.avatar-leer {
    display: inline-grid;
    place-items: center;
    color: var(--gedimmt);
    font-weight: 600;
    line-height: 1;
    border: 1px solid var(--linie-hell);
}

.avatar-winzig { width: 24px; height: 24px; font-size: .7rem; }
.avatar-klein  { width: 44px; height: 44px; font-size: 1rem; }
.avatar-gross  { width: 96px; height: 96px; font-size: 2.2rem; }

.konto-link {
    display: inline-flex; align-items: center; gap: .5rem;
    text-decoration: none;
}

.profilkopf {
    display: flex; align-items: center; gap: 1.4rem;
    flex-wrap: wrap; margin-bottom: 1.4rem;
}
.profilkopf h1 { margin-bottom: .2rem; }

.bildzeile {
    display: flex; align-items: flex-start; gap: 1.6rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.bildzeile > div { flex: 1; min-width: 16rem; }

/* Dateiauswahl an das übrige Aussehen angleichen */
input[type=file] {
    width: 100%; font: inherit; font-size: .9rem; color: var(--gedimmt);
    background: var(--gehoben); border: 1px solid var(--linie);
    border-radius: 3px; padding: .45rem .6rem;
}
input[type=file]::file-selector-button {
    font: inherit; font-size: .85rem; cursor: pointer; margin-right: .8rem;
    background: transparent; color: var(--licht);
    border: 1px solid var(--linie-hell); border-radius: 3px;
    padding: .25rem .8rem;
}
input[type=file]::file-selector-button:hover { border-color: var(--gedimmt); }

/* =====================================================================
   Filmseite – erweiterte Bereiche
   ===================================================================== */

.tagline {
    font-family: var(--schrift-lese);
    font-style: italic;
    color: var(--gedimmt);
    margin: 0 0 .8rem;
    font-size: 1.05rem;
}

.kopfknoepfe { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; }

.abschnittsblock {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--linie);
}
.abschnittsblock > h2 { margin-top: 0; }

.abschnittskopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.abschnittskopf h2 { margin: 0 0 1.1rem; border: 0; padding: 0; flex: 1; }

.umschalter { display: flex; gap: 1rem; font-size: .85rem; }
.umschalter a { color: var(--leise); text-decoration: none; }
.umschalter a:hover { color: var(--licht); }
.umschalter a.aktiv { color: var(--licht); }

/* --- Bilanzband: Schnitt, Verteilung, Reichweite ---------------------- */

.bilanzband {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "wert verteilung"
        "wert achse"
        "reichweite reichweite";
    gap: .2rem 2.5rem;
    align-items: end;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--linie);
}

.grosswert { grid-area: wert; }
.grosswert .zahl {
    display: block;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: lining-nums tabular-nums;
}
.grosswert .was {
    display: block;
    font-size: .8rem;
    color: var(--leise);
    margin-top: .35rem;
    max-width: 11rem;
}

/* Verteilung der Wertungen – zehn Säulen, eine je halbem Stern */
.verteilung {
    grid-area: verteilung;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 54px;
}
.verteilung .saeule {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 8px;
}
.verteilung .balken {
    width: 100%;
    background: var(--rot);
    border-radius: 1px;
    min-height: 2px;
}

.verteilung-achse {
    grid-area: achse;
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--leise);
    margin-top: .35rem;
    letter-spacing: .04em;
}

.reichweite {
    grid-area: reichweite;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    list-style: none;
    padding: 1.4rem 0 0;
    margin: 1.2rem 0 0;
    border-top: 1px solid var(--linie);
    font-size: .85rem;
    color: var(--leise);
}
.reichweite b {
    color: var(--licht);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.reichweite .fremd { margin-left: auto; }

@media (max-width: 34rem) {
    .bilanzband {
        grid-template-columns: 1fr;
        grid-template-areas: "wert" "verteilung" "achse" "reichweite";
        gap: 1.2rem 0;
    }
    .reichweite .fremd { margin-left: 0; }
}

/* --- Rezensionen anderer ---------------------------------------------- */

.rezensionen { list-style: none; padding: 0; margin: 0; }
.rezensionen li {
    display: flex;
    gap: 1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--linie);
}
.rezensionen .inhalt { flex: 1; min-width: 0; }
.rezensionen .kopfzeile {
    display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
    margin-bottom: .2rem;
}
.rezensionen .wer { font-weight: 600; text-decoration: none; }
.rezensionen .wann { color: var(--leise); font-size: .8rem; margin-left: auto; }
.rezensionen .zitat { margin: .4rem 0 0; }

.zustimmung { margin-top: .7rem; }

.like {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 0; padding: 0;
    font: inherit; font-size: .82rem;
    color: var(--leise); cursor: pointer;
    font-variant-numeric: tabular-nums;
}
button.like:hover { color: var(--rot-hell); }
.like.an { color: var(--rot-hell); }

/* --- Besetzung --------------------------------------------------------- */

.besetzung {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 1.4rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.besetzung li { min-width: 0; }
.besetzung img, .besetzung .ohne-bild {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    background: var(--gehoben);
    margin-bottom: .5rem;
}
.besetzung .ohne-bild {
    display: grid; place-items: center;
    color: var(--leise); font-size: 1.4rem; font-weight: 600;
    border: 1px solid var(--linie-hell);
}
.besetzung .wer {
    display: block; font-size: .85rem; font-weight: 600; line-height: 1.25;
}
.besetzung .rolle {
    display: block; font-size: .78rem; color: var(--leise); line-height: 1.3;
    margin-top: .1rem;
}

/* --- Streaming-Anbieter ------------------------------------------------ */

.anbieterzeile {
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.anbieterzeile .art {
    font-size: .8rem; color: var(--leise);
    width: 4.5rem; flex-shrink: 0;
}
.anbieterzeile ul {
    display: flex; gap: .5rem; flex-wrap: wrap;
    list-style: none; padding: 0; margin: 0;
}
.anbieterzeile img {
    width: 38px; height: 38px; border-radius: 8px; display: block;
}
.anbieterzeile span:not(.art) {
    font-size: .85rem; border: 1px solid var(--linie-hell);
    border-radius: 4px; padding: .3rem .6rem;
}

.quelle { font-size: .78rem; color: var(--leise); margin: 1.2rem 0 0; }
.quelle a { color: var(--gedimmt); }

/* --- Angabenliste ------------------------------------------------------ */

.angabenliste {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 2rem;
    margin: 0;
    font-size: .9rem;
}
.angabenliste dt { color: var(--leise); }
.angabenliste dd { margin: 0; }

@media (max-width: 30rem) {
    .angabenliste { grid-template-columns: 1fr; gap: .1rem; }
    .angabenliste dd { margin-bottom: .7rem; }
}

/* --- Hinweis zur Sichtbarkeit bei der Registrierung -------------------- */

.sichtbarkeitshinweis {
    margin-top: 1.6rem;
    padding: 1rem 1.1rem;
    background: var(--gehoben);
    border-left: 3px solid var(--linie-hell);
    border-radius: 3px;
}
.sichtbarkeitshinweis p:first-child { margin-top: 0; font-size: .9rem; }
.sichtbarkeitshinweis label { margin-top: .8rem; }

/* =====================================================================
   Leute, Folgen, Aktivitäten
   ===================================================================== */

/* --- Profil-Adresse im Konto ------------------------------------------ */

.linkzeile {
    display: flex; align-items: center; gap: .7rem;
    flex-wrap: wrap; margin: .6rem 0 1.2rem;
}
.linkzeile a {
    font-size: .9rem; color: var(--licht);
    background: var(--gehoben); border: 1px solid var(--linie);
    border-radius: 3px; padding: .45rem .7rem;
    word-break: break-all;
}

/* --- Profilkopf mit Folgen-Knopf -------------------------------------- */

.profilkopf { align-items: flex-start; }
.profilkopf > div:not(.folgeknopf) { flex: 1; min-width: 12rem; }
.folgeknopf { margin-left: auto; }

.folgezahlen {
    display: flex; gap: 1.4rem;
    margin: .6rem 0 0; font-size: .85rem; color: var(--leise);
}
.folgezahlen a { color: var(--leise); text-decoration: none; }
.folgezahlen a:hover { color: var(--licht); }
.folgezahlen b {
    color: var(--licht); font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.umschalter.gross { font-size: .95rem; margin-bottom: 1.6rem; }
.umschalter.gross a { padding-bottom: .35rem; border-bottom: 2px solid transparent; }
.umschalter.gross a.aktiv { border-bottom-color: var(--rot); }

/* --- Personenliste ----------------------------------------------------- */

.personen { list-style: none; padding: 0; margin: 0; }
.personen li {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 0; border-bottom: 1px solid var(--linie);
}
.personen .wer { flex: 1; min-width: 0; }
.personen .name {
    display: block; font-weight: 600; text-decoration: none; line-height: 1.3;
}
.personen .kennung {
    font-size: .8rem; color: var(--leise); margin-right: .8rem;
}

/* --- Aktivitäten-Übersicht --------------------------------------------- */

.aktivitaeten { list-style: none; padding: 0; margin: 0; }
.aktivitaeten li {
    display: flex; gap: 1.1rem; align-items: flex-start;
    padding: 1.2rem 0; border-bottom: 1px solid var(--linie);
}
.aktivitaeten .plakat { width: 52px; flex: 0 0 52px; }
.aktivitaeten .inhalt { flex: 1; min-width: 0; }

.aktivitaeten .kopfzeile {
    display: flex; align-items: center; gap: .6rem;
    flex-wrap: wrap; margin-bottom: .3rem;
}
.aktivitaeten .person {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; color: var(--gedimmt); text-decoration: none;
}
.aktivitaeten .person:hover { color: var(--licht); }
.aktivitaeten .wann {
    margin-left: auto; font-size: .78rem; color: var(--leise);
    font-variant-numeric: tabular-nums;
}

.aktivitaeten .was {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.aktivitaeten .filmtitel {
    font-size: 1.02rem; font-weight: 600; text-decoration: none;
}
.aktivitaeten .jahr {
    font-size: .8rem; color: var(--leise);
    font-variant-numeric: tabular-nums;
}
.aktivitaeten .zitat { margin: .45rem 0 0; font-size: .92rem; }

/* =====================================================================
   Entdecken, Personen, Watchlist-Würfel
   ===================================================================== */

/* Herkunftsmarke an einer Überschrift */
.woher {
    display: inline-block;
    font-size: .75rem; font-weight: 400; color: var(--leise);
    border: 1px solid var(--linie-hell); border-radius: 99px;
    padding: .05rem .6rem;
    margin-left: .5rem;
    vertical-align: middle;
    position: relative; top: -1px;
}

/* --- Plakatzeile ------------------------------------------------------
   Eine Reihe zum Entlangschauen statt eines Rasters zum Durcharbeiten.
   Scrollt seitlich; die Plakate behalten ihre Breite und schrumpfen
   nicht. */

.plakatzeile {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0 0 .8rem;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Rand nach außen ziehen, damit die Zeile am Bildschirmrand
       ausläuft statt abrupt abzuschneiden */
    margin-inline: -1.6rem;
    padding-inline: 1.6rem;
    scrollbar-width: thin;
    scrollbar-color: var(--linie-hell) transparent;
}
.plakatzeile li {
    flex: 0 0 124px;
    width: 124px;
    scroll-snap-align: start;
}

.plakatzeile::-webkit-scrollbar { height: 8px; }
.plakatzeile::-webkit-scrollbar-track { background: transparent; }
.plakatzeile::-webkit-scrollbar-thumb {
    background: var(--linie-hell);
    border-radius: 99px;
}

/* --- Biografie auf der Personenseite ----------------------------------- */

.biografie { margin: 1.6rem 0 0; }
.biografie summary {
    cursor: pointer; font-size: .9rem; color: var(--gedimmt);
}
.biografie summary:hover { color: var(--licht); }
.biografie[open] summary { color: var(--leise); margin-bottom: .8rem; }

/* Bild auf der Personenseite ist kein Kreis, sondern ein Porträt */
.profilkopf img.avatar-gross:not([src*="avatare"]) {
    border-radius: 4px;
    width: 110px; height: 165px;
}

/* --- Watchlist --------------------------------------------------------- */

.watchlistleiste {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: -.4rem 0 1.4rem;
}

.umschalter.sortierung {
    gap: 1.1rem; flex-wrap: wrap; font-size: .82rem;
    padding-bottom: .9rem; margin-bottom: 1.8rem;
    border-bottom: 1px solid var(--linie);
}

.wuerfelergebnis {
    display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start;
    padding: 1.6rem; margin-bottom: 2.4rem;
    background: var(--gehoben);
    border-radius: 4px;
}
.wuerfelergebnis .plakat { width: 130px; flex: 0 0 130px; }
.wuerfelergebnis > div { flex: 1; min-width: 15rem; }
.wuerfelergebnis .vorschlag {
    font-size: .8rem; color: var(--leise); margin: 0 0 .2rem;
}
.wuerfelergebnis .filmtitel {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em;
    margin: 0 0 .3rem; line-height: 1.15;
}
.wuerfelergebnis .filmtitel a { text-decoration: none; }

/* =====================================================================
   Vorspann

   Ein Filmprojektor, der anläuft: Die Lampe flackert an, der Lichtkegel
   klappt auf, Staub steht im Strahl, das Startband zählt herunter,
   ein Aufblitz - und dann steht der Name auf der Leinwand.

   Ablauf (2,6 Sekunden):
     0,00 s  Lampe flackert
     0,20 s  Lichtkegel öffnet sich, Staub wird sichtbar
     0,65 s  Startband mit Countdown 3 - 2 - 1
     1,85 s  Aufblitz
     2,00 s  Name und Unterzeile
     2,35 s  Blende

   Reines CSS: Der Vorspann verschwindet auch dann, wenn JavaScript
   nicht läuft. Das Skript räumt ihn nur auf und erlaubt das
   Überspringen.
   ===================================================================== */

.vorspann {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    background: var(--grund);
    overflow: hidden;
    animation:
        vorspann-flackern .55s steps(1, end) both,
        vorspann-aus 2.6s steps(1, end) forwards;
}

/* --- Lichtkegel -------------------------------------------------------- */

.vorspann-licht {
    position: absolute;
    top: -12%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    margin-left: -75vmax;
    clip-path: polygon(49.2% 0, 50.8% 0, 88% 100%, 12% 100%);
    background: linear-gradient(
        to bottom,
        rgba(255, 236, 208, .34) 0%,
        rgba(255, 224, 186, .13) 24%,
        rgba(255, 216, 172, .04) 54%,
        transparent 80%
    );
    /* Weiche Kanten - ohne den Weichzeichner sieht der Strahl aus wie
       eine graue Fläche statt wie Licht in staubiger Luft. */
    filter: blur(22px);
    transform: scaleX(0);
    transform-origin: 50% 0;
    animation: vorspann-licht 2.6s cubic-bezier(.16, .84, .28, 1) forwards;
}

/* Die Lampe selbst - ein heller Fleck am Ursprung */
.vorspann-licht::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 130px;
    height: 46px;
    margin-left: -65px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 238, 214, .5), transparent 70%);
    filter: blur(6px);
}

/* --- Filmmaterial im Hintergrund ---------------------------------------
   Drei Ebenen, die den Eindruck laufenden Films erzeugen: die
   Perforation an den Rändern, Kratzer auf dem Material und das Korn
   über allem. Jede für sich ist kaum zu bemerken - zusammen wirkt das
   Bild nicht mehr wie eine Webseite, sondern wie etwas Projiziertes. */

/* Perforation: das Lochmuster, das seitlich am Filmstreifen läuft */
.vorspann-perfo {
    position: absolute;
    top: -40px;
    bottom: -40px;
    width: 30px;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='56'%3E%3Crect x='7' y='10' width='16' height='22' rx='4' fill='%23F3EBE1' fill-opacity='0.16'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    /* steps(): Film läuft ruckweise durch den Projektor, nicht
       gleitend. 24 Stufen entsprechen 24 Bildern je Sekunde. */
    /* Keine Endlosschleife: "visibility: hidden" hält Animationen
       nicht an. Ein unsichtbares Element, das ewig weiterrechnet,
       kostet Akku ohne jeden Nutzen. Drei Durchläufe decken die
       2,6 Sekunden ab. */
    animation:
        perfo-laufen 1s steps(24, end) 3,
        perfo-an 2.6s ease-out forwards;
}
.vorspann-perfo.links  { left: 0; }
.vorspann-perfo.rechts { right: 0; }

@keyframes perfo-laufen {
    0%   { background-position-y: 0; }
    100% { background-position-y: 56px; }
}

@keyframes perfo-an {
    0%, 6%  { opacity: 0; }
    20%     { opacity: 1; }
    82%     { opacity: 1; }
    100%    { opacity: 0; }
}

/* Kratzer: dünne Linien, die kurz aufblitzen und seitlich springen.
   Echte Kratzer bleiben nie lange an derselben Stelle. */
.vorspann-kratzer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.vorspann-kratzer span {
    position: absolute;
    top: -10%;
    height: 120%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 244, 228, .5) 18%,
        rgba(255, 244, 228, .22) 55%,
        transparent
    );
    opacity: 0;
}
.vorspann-kratzer span:nth-child(1) { animation: kratzer-1 2.6s linear forwards; }
.vorspann-kratzer span:nth-child(2) { animation: kratzer-2 2.6s linear forwards; }
.vorspann-kratzer span:nth-child(3) { animation: kratzer-3 2.6s linear forwards; width: 2px; }

@keyframes kratzer-1 {
    0%, 14%  { opacity: 0; left: 31%; }
    16%      { opacity: .7; }
    21%      { opacity: .7; left: 31%; }
    22%      { opacity: 0;  left: 47%; }
    48%      { opacity: 0;  left: 47%; }
    50%      { opacity: .5; }
    54%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes kratzer-2 {
    0%, 33%  { opacity: 0; left: 68%; }
    35%      { opacity: .45; }
    39%      { opacity: .45; }
    40%      { opacity: 0; left: 22%; }
    71%      { opacity: 0; left: 22%; }
    73%      { opacity: .6; }
    77%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes kratzer-3 {
    0%, 60%  { opacity: 0; left: 55%; }
    62%      { opacity: .3; }
    65%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Korn: feines Rauschen, das bei jedem Bild neu steht. Der Versatz
   springt in Stufen - gleitend sähe es aus wie wanderndes Muster,
   nicht wie Korn. */
.vorspann-korn {
    position: absolute;
    inset: -50%;
    pointer-events: none;
    opacity: 0;
    /* feColorMatrix entsättigt das Rauschen: feTurbulence erzeugt
       farbiges Rauschen, und bunte Sprenkel sehen nach Bildstörung aus,
       nicht nach Filmkorn. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
    animation:
        korn-springen .6s steps(8, end) 5,
        korn-an 2.6s ease-out forwards;
}

@keyframes korn-springen {
    0%   { transform: translate(0, 0); }
    12%  { transform: translate(-3%, 2%); }
    25%  { transform: translate(2%, -4%); }
    37%  { transform: translate(-5%, -2%); }
    50%  { transform: translate(4%, 3%); }
    62%  { transform: translate(-2%, 5%); }
    75%  { transform: translate(5%, -3%); }
    87%  { transform: translate(-4%, 1%); }
    100% { transform: translate(0, 0); }
}

@keyframes korn-an {
    0%      { opacity: 0; }
    14%     { opacity: .75; }
    84%     { opacity: .75; }
    100%    { opacity: 0; }
}

/* --- Staub im Strahl ---------------------------------------------------
   Zwölf Körnchen, die langsam durchs Licht treiben. Jedes bekommt über
   nth-child eine eigene Position, Größe und Geschwindigkeit - sonst
   bewegen sich alle im Gleichschritt, und das sieht nach Maschine aus
   statt nach Luft. */

.vorspann-staub {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    animation: vorspann-staub-an 2.6s ease-out forwards;
}
.vorspann-staub span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(255, 238, 214, .75);
    animation: staub-treiben linear 1;
}

.vorspann-staub span:nth-child(1)  { left: 44%; top: 30%; width: 2px; height: 2px; animation-duration: 3.1s;  animation-delay: -0.4s; }
.vorspann-staub span:nth-child(2)  { left: 52%; top: 55%; width: 3px; height: 3px; animation-duration: 3.5s;  animation-delay: -1.2s; }
.vorspann-staub span:nth-child(3)  { left: 47%; top: 72%; width: 2px; height: 2px; animation-duration: 2.9s;  animation-delay: -2.0s; }
.vorspann-staub span:nth-child(4)  { left: 55%; top: 40%; width: 2px; height: 2px; animation-duration: 3.4s; animation-delay: -0.8s; }
.vorspann-staub span:nth-child(5)  { left: 41%; top: 62%; width: 3px; height: 3px; animation-duration: 3.0s;  animation-delay: -2.4s; }
.vorspann-staub span:nth-child(6)  { left: 58%; top: 78%; width: 2px; height: 2px; animation-duration: 3.6s; animation-delay: -1.6s; }
.vorspann-staub span:nth-child(7)  { left: 49%; top: 22%; width: 2px; height: 2px; animation-duration: 3.2s;animation-delay: -2.8s; }
.vorspann-staub span:nth-child(8)  { left: 62%; top: 66%; width: 2px; height: 2px; animation-duration: 3.3s; animation-delay: -1.0s; }
.vorspann-staub span:nth-child(9)  { left: 38%; top: 84%; width: 3px; height: 3px; animation-duration: 2.8s;animation-delay: -3.2s; }
.vorspann-staub span:nth-child(10) { left: 53%; top: 34%; width: 2px; height: 2px; animation-duration: 3.1s;animation-delay: -0.6s; }
.vorspann-staub span:nth-child(11) { left: 45%; top: 50%; width: 2px; height: 2px; animation-duration: 3.5s; animation-delay: -3.6s; }
.vorspann-staub span:nth-child(12) { left: 60%; top: 46%; width: 2px; height: 2px; animation-duration: 2.9s;animation-delay: -1.4s; }

/* --- Startband mit Countdown ------------------------------------------- */

.vorspann-band {
    position: absolute;
    width: 220px;
    height: 220px;
    opacity: 0;
    animation: vorspann-band 2.6s linear forwards;
}

.band-kreis {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(243, 235, 225, .5);
    border-radius: 50%;
    overflow: hidden;
}

/* Der umlaufende Sektor - das Erkennungszeichen eines Startbands */
.band-zeiger {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg,
        rgba(255, 236, 208, .16) 0deg 88deg,
        transparent 88deg 360deg
    );
    animation: band-drehen .62s linear 2;
    animation-delay: .65s;
    opacity: 0;
}

/* Fadenkreuz aus zwei Linien */
.band-kreuz::before,
.band-kreuz::after {
    content: "";
    position: absolute;
    background: rgba(243, 235, 225, .32);
}
.band-kreuz::before { left: 50%; top: -28%; width: 1px; height: 156%; margin-left: -.5px; }
.band-kreuz::after  { top: 50%; left: -28%; height: 1px; width: 156%; margin-top: -.5px; }

.band-zahlen {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.band-zahlen span {
    grid-area: 1 / 1;
    font-family: var(--schrift-ui);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--licht);
    opacity: 0;
    animation: band-zahl 2.6s linear forwards;
}
.band-zahlen span:nth-child(1) { animation-delay: 0s; }
.band-zahlen span:nth-child(2) { animation-delay: .4s; }
.band-zahlen span:nth-child(3) { animation-delay: .8s; }

/* --- Aufblitz ----------------------------------------------------------- */

.vorspann-blitz {
    position: absolute;
    inset: 0;
    /* Kein reines Weiß und keine volle Deckkraft: Ein vollflächiger
       heller Blitz auf dunklem Grund ist ein starker Reiz. Warm und
       halbdurchsichtig wirkt er wie ein Lichtwechsel, nicht wie ein
       Stroboskop. */
    background: rgba(255, 238, 214, .5);
    opacity: 0;
    pointer-events: none;
    animation: vorspann-blitz 2.6s linear forwards;
}

/* --- Name --------------------------------------------------------------- */

.vorspann-marke {
    position: relative;
    margin: 0;
    font-family: var(--schrift-ui);
    font-size: clamp(2.2rem, 9vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--licht);
    text-shadow: 0 0 38px rgba(255, 226, 190, .3);
    opacity: 0;
    animation: vorspann-marke 2.6s ease-out forwards;
}
.vorspann-marke span { color: var(--rot-hell); }

.vorspann-unterzeile {
    position: absolute;
    margin: 0;
    transform: translateY(3.4rem);
    font-family: var(--schrift-lese);
    font-size: .95rem;
    letter-spacing: .14em;
    color: var(--gedimmt);
    opacity: 0;
    animation: vorspann-unterzeile 2.6s ease-out forwards;
}

/* =====================================================================
   Bewegungsabläufe
   ===================================================================== */

/* Eine Projektorlampe geht nicht gleichmäßig an.
   Bewusst nur zwei Helligkeitswechsel über eine halbe Sekunde: Mehr
   als drei Wechsel pro Sekunde gelten als Auslöserisiko für
   lichtempfindliche Epilepsie. Der Eindruck bleibt derselbe. */
@keyframes vorspann-flackern {
    0%   { background: #0a0806; }
    22%  { background: #221a15; }
    48%  { background: #100c0a; }
    100% { background: var(--grund); }
}

@keyframes vorspann-licht {
    0%   { transform: scaleX(0);    opacity: 0; }
    8%   { transform: scaleX(0);    opacity: 0; }
    12%  { opacity: 1; }
    27%  { transform: scaleX(1);    opacity: 1; }
    88%  { transform: scaleX(1);    opacity: 1; }
    100% { transform: scaleX(1.04); opacity: 0; }
}

@keyframes vorspann-staub-an {
    0%, 10% { opacity: 0; }
    30%     { opacity: .85; }
    88%     { opacity: .85; }
    100%    { opacity: 0; }
}

/* Die Körnchen treiben nach oben und zur Seite, wie Staub in Zugluft */
/* Kürzere Dauer, kürzerer Weg: Die Körnchen bewegen sich gleich
   langsam, sind aber sicher fertig, bevor der Vorspann endet. */
@keyframes staub-treiben {
    0%   { transform: translate(0, 0);        opacity: .2; }
    25%  { opacity: .8; }
    50%  { transform: translate(7px, -15px);  opacity: .45; }
    75%  { opacity: .75; }
    100% { transform: translate(-3px, -31px); opacity: .2; }
}

@keyframes vorspann-band {
    0%, 22%  { opacity: 0; transform: scale(.92); }
    27%      { opacity: 1; transform: scale(1); }
    68%      { opacity: 1; transform: scale(1); }
    71%      { opacity: 0; transform: scale(1.06); }
    100%     { opacity: 0; }
}

@keyframes band-drehen {
    0%   { transform: rotate(0deg);   opacity: 1; }
    100% { transform: rotate(360deg); opacity: 1; }
}

/* Jede Zahl steht 0,4 Sekunden, dann springt die nächste ein */
@keyframes band-zahl {
    0%, 24%  { opacity: 0; transform: scale(1.35); }
    27%      { opacity: 1; transform: scale(1); }
    37%      { opacity: 1; transform: scale(1); }
    40%      { opacity: 0; transform: scale(.9); }
    100%     { opacity: 0; }
}

@keyframes vorspann-blitz {
    0%, 69%  { opacity: 0; }
    73%      { opacity: 1; }
    82%      { opacity: 0; }
    100%     { opacity: 0; }
}

@keyframes vorspann-marke {
    0%, 73%  { opacity: 0; transform: scale(.96); letter-spacing: .05em; }
    82%      { opacity: 1; transform: scale(1);   letter-spacing: -.03em; }
    90%      { opacity: 1; }
    100%     { opacity: 0; transform: scale(1.02); }
}

@keyframes vorspann-unterzeile {
    0%, 80%  { opacity: 0; transform: translateY(3.9rem); }
    88%      { opacity: 1; transform: translateY(3.4rem); }
    92%      { opacity: 1; }
    100%     { opacity: 0; transform: translateY(3.4rem); }
}

/* Am Ende aus dem Weg: unsichtbar und nicht anklickbar. Greift auch
   dann, wenn das Aufräum-Skript nicht läuft. */
@keyframes vorspann-aus {
    0%, 99%  { visibility: visible; pointer-events: auto; }
    100%     { visibility: hidden;  pointer-events: none; }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt keinen Vorspann.
   Für Menschen mit vestibulären Beschwerden sind aufziehende Flächen
   und Blitze kein Effekt, sondern ein Grund, die Seite zu schließen. */
@media (prefers-reduced-motion: reduce) {
    .vorspann { display: none; }
}

/* --- Importfortschritt -------------------------------------------------- */

.fortschritt { margin: 2rem 0; max-width: 34rem; }
.fortschritt .balken {
    height: 6px;
    background: var(--gehoben);
    border-radius: 99px;
    overflow: hidden;
}
.fortschritt .balken > div {
    height: 100%;
    width: 0;
    background: var(--rot);
    border-radius: 99px;
    transition: width .3s ease-out;
}
.fortschritt .stand {
    margin: .7rem 0 0;
    font-size: .85rem;
    color: var(--gedimmt);
    font-variant-numeric: tabular-nums;
}

.fehlliste {
    list-style: none; padding: 0; margin: 1rem 0 0;
    columns: 2; column-gap: 2rem;
    font-size: .9rem;
}
.fehlliste li {
    padding: .3rem 0;
    break-inside: avoid;
    color: var(--gedimmt);
}
.fehlliste a { color: var(--licht); text-decoration: none; }
.fehlliste a:hover { text-decoration: underline; }
.fehlliste .jahr { font-variant-numeric: tabular-nums; }

@media (max-width: 34rem) { .fehlliste { columns: 1; } }

/* --- Prüftabelle (Fehlersuche beim Import) ------------------------------ */

.pruefung {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin-bottom: 2rem;
    font-variant-numeric: tabular-nums;
}
.pruefung th,
.pruefung td {
    text-align: left;
    padding: .45rem .7rem .45rem 0;
    border-bottom: 1px solid var(--linie);
}
.pruefung th {
    color: var(--gedimmt);
    font-weight: 600;
    white-space: nowrap;
}
.pruefung td { color: var(--licht); }