/* Foyer.
   ----------------------------------------------------------------------
   Bild: ein dunkler Saal mit drei Lichtquellen. Der Hintergrund liegt fest
   hinter der Oberfläche und wird zu den Rändern hin heller, der Inhalt
   scrollt darüber. Flächen sind durchscheinend statt gefüllt, damit das
   Licht durchkommt.

   Schrift: Archivo als variable Schrift. Überschriften und Zahlen laufen
   breit und schwer (wdth 115, wght 700), Fließtext normal. Release-Namen
   in JetBrains Mono, weil sie technisches Material sind.

   Akzent: ein Lichtstrahl von Türkis über Violett und Rosé nach Bernstein.
   Er erscheint nur an wenigen Stellen, sonst verliert er seine Wirkung.

   Zwei Schemata aus einer Datei. Dunkel ist der Saal, hell ist das Foyer bei
   Tag: Licht durch Glas, dieselben drei Quellen, nur als zarte Tönung auf
   Weiß statt als Schein im Dunkeln. Das helle Schema ist keine Umkehrung des
   dunklen; Kontraste und Sättigungen sind eigens gesetzt, weil ein Ton, der
   auf Schwarz leuchtet, auf Weiß nur blass wirkt.

   Alles Farbige steht als Merkmal in :root. Wer etwas hinzufügt, nimmt ein
   Merkmal und keinen festen Wert, sonst fehlt es im anderen Schema.

   Bauteil Nummer eins bleibt die Zustandszeile (.row) mit dem Quadrat
   links (.mark). Sie trägt Detailseite, Fehlbestand, Kalender und Anträge.
   ---------------------------------------------------------------------- */

@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-stretch: 62.5% 125%;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --ink:        #07080b;
    --ink-2:      #0a0c11;
    --veil:       rgba(255, 255, 255, .035);
    --veil-2:     rgba(255, 255, 255, .06);
    --veil-3:     rgba(255, 255, 255, .09);
    --line:       rgba(255, 255, 255, .08);
    --line-soft:  rgba(255, 255, 255, .045);

    --text:        #e9edf4;
    --text-strong: #ffffff;
    --muted:       #9aa5b6;
    --dim:         #626d7e;

    --beam-1: #38d6c4;
    --beam-2: #9b74f2;
    --beam-3: #ff5f8f;
    --beam-4: #ffab53;
    --beam:   linear-gradient(100deg, var(--beam-1), var(--beam-2) 38%, var(--beam-3) 68%, var(--beam-4));
    --on-beam: #08090c;

    --ok:   #38d6c4;
    --ok-flaeche: #15756b;   /* Flaeche beim Beruehren; dunkler als --ok, damit weisse Schrift lesbar bleibt */
    --warn: #ffab53;
    --err:  #ff5f8f;

    /* Die drei Lichtquellen und der Grundverlauf dahinter. */
    --glow-teal:   rgba(56, 214, 196, .26);
    --glow-violet: rgba(155, 116, 242, .24);
    --glow-amber:  rgba(255, 171, 83, .17);
    --glow-rose:   rgba(255, 95, 143, .10);
    --sheet: linear-gradient(165deg, #0d1017 0%, var(--ink) 55%, #05060a 100%);
    --grain: .035;

    --bar-bg:    rgba(10, 12, 17, .72);
    --track:     rgba(0, 0, 0, .55);
    --scene-fade: linear-gradient(90deg, rgba(7,8,11,.94) 18%, rgba(7,8,11,.55) 62%, rgba(7,8,11,.75));
    --mark-have: #8b96a8;
    --shine-ok:   0 0 10px rgba(56, 214, 196, .45);
    --shine-beam: 0 0 10px rgba(155, 116, 242, .4);
    --rail-bg: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    --lift: none;

    --ring:      rgba(56, 214, 196, .45);
    --tint-ok:   rgba(56, 214, 196, .06);
    --tint-warn: rgba(255, 171, 83, .06);
    --tint-err:  rgba(255, 95, 143, .06);
    --edge-ok:   rgba(56, 214, 196, .3);
    --edge-warn: rgba(255, 171, 83, .3);
    --edge-err:  rgba(255, 95, 143, .3);

    --sans: 'Archivo', system-ui, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

    --gutter: 1.75rem;
    --rail:   244px;
    --topbar: 56px;
    --radius: 14px;
}

/* Hell. Eigene Werte statt einer Umkehrung: die Akzenttöne sind tiefer
   gesättigt, damit sie auf Weiß tragen, und die Körnung entfällt, weil sie
   auf hellem Grund schmutzig wirkt. */
[data-theme="light"] {
    --ink:        #f2f4f8;
    --ink-2:      #ffffff;
    --veil:       rgba(17, 24, 38, .035);
    --veil-2:     rgba(17, 24, 38, .06);
    --veil-3:     rgba(17, 24, 38, .09);
    --line:       rgba(17, 24, 38, .11);
    --line-soft:  rgba(17, 24, 38, .06);

    --text:        #141a25;
    --text-strong: #000000;
    --muted:       #56606f;
    --dim:         #8a93a1;

    --beam-1: #0fb3a3;
    --beam-2: #7a52e8;
    --beam-3: #e82f6c;
    --beam-4: #de8415;
    --on-beam: #ffffff;

    --ok:   #0d9a8c;
    --ok-flaeche: #0a7a6e;   /* dunkler als --ok: weisse Schrift muss lesbar bleiben */
    --warn: #c26f0c;
    --err:  #d62960;

    --glow-teal:   rgba(15, 179, 163, .16);
    --glow-violet: rgba(122, 82, 232, .14);
    --glow-amber:  rgba(222, 132, 21, .13);
    --glow-rose:   rgba(232, 47, 108, .07);
    --sheet: linear-gradient(165deg, #ffffff 0%, #f3f5f9 55%, #e8ebf1 100%);
    --grain: 0;

    --bar-bg:    rgba(255, 255, 255, .8);
    --track:     rgba(17, 24, 38, .1);
    --scene-fade: linear-gradient(90deg, rgba(248,249,252,.95) 18%, rgba(248,249,252,.6) 62%, rgba(248,249,252,.8));
    --mark-have: #b3bac6;
    --shine-ok:   none;
    --shine-beam: none;
    --rail-bg: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
    --lift: 0 1px 2px rgba(17, 24, 38, .05);

    --ring:      rgba(15, 179, 163, .55);
    --tint-ok:   rgba(15, 179, 163, .1);
    --tint-warn: rgba(222, 132, 21, .1);
    --tint-err:  rgba(232, 47, 108, .09);
    --edge-ok:   rgba(15, 179, 163, .38);
    --edge-warn: rgba(222, 132, 21, .38);
    --edge-err:  rgba(232, 47, 108, .35);
}

/* Ohne ausdrückliche Wahl entscheidet das Betriebssystem. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
        --ink:        #f2f4f8;
        --ink-2:      #ffffff;
        --veil:       rgba(17, 24, 38, .035);
        --veil-2:     rgba(17, 24, 38, .06);
        --veil-3:     rgba(17, 24, 38, .09);
        --line:       rgba(17, 24, 38, .11);
        --line-soft:  rgba(17, 24, 38, .06);
        --text:        #141a25;
        --text-strong: #000000;
        --muted:       #56606f;
        --dim:         #8a93a1;
        --beam-1: #0fb3a3;
        --beam-2: #7a52e8;
        --beam-3: #e82f6c;
        --beam-4: #de8415;
        --on-beam: #ffffff;
        --ok:   #0d9a8c;
        --ok-flaeche: #0a7a6e;
        --warn: #c26f0c;
        --err:  #d62960;
        --glow-teal:   rgba(15, 179, 163, .16);
        --glow-violet: rgba(122, 82, 232, .14);
        --glow-amber:  rgba(222, 132, 21, .13);
        --glow-rose:   rgba(232, 47, 108, .07);
        --sheet: linear-gradient(165deg, #ffffff 0%, #f3f5f9 55%, #e8ebf1 100%);
        --grain: 0;
        --bar-bg:    rgba(255, 255, 255, .8);
        --track:     rgba(17, 24, 38, .1);
        --scene-fade: linear-gradient(90deg, rgba(248,249,252,.95) 18%, rgba(248,249,252,.6) 62%, rgba(248,249,252,.8));
        --mark-have: #b3bac6;
        --shine-ok:   none;
        --shine-beam: none;
        --rail-bg: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
        --lift: 0 1px 2px rgba(17, 24, 38, .05);
        --ring:      rgba(15, 179, 163, .55);
        --tint-ok:   rgba(15, 179, 163, .1);
        --tint-warn: rgba(222, 132, 21, .1);
        --tint-err:  rgba(232, 47, 108, .09);
        --edge-ok:   rgba(15, 179, 163, .38);
        --edge-warn: rgba(222, 132, 21, .38);
        --edge-err:  rgba(232, 47, 108, .35);
    }
}

* { box-sizing: border-box; }
html { color-scheme: dark light; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Die drei Lichtquellen. Fest im Ansichtsfenster, damit sie beim Scrollen
   stehenbleiben und der Inhalt darüber hinwegzieht. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(820px 560px at 90% -8%,  var(--glow-teal),   transparent 60%),
        radial-gradient(720px 660px at -10% 28%, var(--glow-violet), transparent 58%),
        radial-gradient(960px 520px at 42% 112%, var(--glow-amber),  transparent 60%),
        radial-gradient(620px 420px at 62% 44%,  var(--glow-rose),   transparent 65%),
        var(--sheet);
    pointer-events: none;
}

/* Die Farbe des Titels über die ganze Seite, wie bei Plex.
 *
 * Sie ersetzt die drei festen Lichtquellen, statt sich dazuzulegen — nebeneinander
 * ergäbe das einen Farbbrei. Der Guss sitzt oben und ist bei knapp der halben
 * Höhe verschwunden: dort steht der Titel, und weiter unten soll gelesen
 * werden, nicht geschaut.
 *
 * Die Klasse setzt das Skript erst, wenn es eine Farbe gerechnet hat. Ohne sie
 * bleibt alles beim Alten — die Berechnung darf scheitern.
 */
body.gefaerbt::before {
    background:
        radial-gradient(1250px 720px at 50% -14%, rgba(var(--titelfarbe), .42), transparent 62%),
        radial-gradient(900px 620px at 88% -6%,  rgba(var(--titelfarbe), .24), transparent 58%),
        linear-gradient(180deg, rgba(var(--titelfarbe), .15) 0%, transparent 48%),
        var(--sheet);
}

/* Im hellen Thema deckt dieselbe Farbe stärker und wirkt schnell grell.
   Dieselben Verläufe, nur zurückhaltender. Die Auswahl folgt dem Muster der
   Farbvariablen weiter oben: ausdrückliche Wahl, sonst das Betriebssystem. */
[data-theme="light"] body.gefaerbt::before {
    background:
        radial-gradient(1250px 720px at 50% -14%, rgba(var(--titelfarbe), .32), transparent 62%),
        radial-gradient(900px 620px at 88% -6%,  rgba(var(--titelfarbe), .19), transparent 58%),
        linear-gradient(180deg, rgba(var(--titelfarbe), .12) 0%, transparent 48%),
        var(--sheet);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) body.gefaerbt::before {
        background:
            radial-gradient(1250px 720px at 50% -14%, rgba(var(--titelfarbe), .32), transparent 62%),
            radial-gradient(900px 620px at 88% -6%,  rgba(var(--titelfarbe), .19), transparent 58%),
            linear-gradient(180deg, rgba(var(--titelfarbe), .12) 0%, transparent 48%),
            var(--sheet);
    }
}

/* Eine sehr feine Körnung nimmt den Verläufen das Bandartige. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: var(--grain);
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

[x-cloak] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text-strong); }
:focus-visible { outline: 2px solid var(--beam-1); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; display: block; }

.display {
    font-stretch: 115%;
    font-weight: 700;
    letter-spacing: -.015em;
}

/* Grundgerüst ----------------------------------------------------------- */

.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }

.rail {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0 1rem;
    background: var(--rail-bg);
    border-right: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

/* Der Schriftzug steht für sich. Wo er nicht passt, weil die Instanz einen
   eigenen Namen trägt, greift .brand mit Bildmarke und Text. */
.brand__logo { width: 100%; max-width: 176px; height: auto; }

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-stretch: 115%;
    font-weight: 700;
    font-size: 1.22rem;
    letter-spacing: -.02em;
}
.brand span {
    background: var(--beam);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand__mark { width: 26px; height: 26px; flex: none; object-fit: contain; }

.rail__brand { padding: .15rem var(--gutter) 1.6rem; }

.rail__group {
    padding: 0 var(--gutter);
    margin: 1.5rem 0 .4rem;
    font-size: .655rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 500;
}

.rail__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1px .7rem;
    padding: .32rem calc(var(--gutter) - .7rem);
    border-radius: 10px;
    color: var(--muted);
    font-size: .9rem;
}
.rail__link:hover { background: var(--veil); color: var(--text); }
.rail__link[aria-current="page"] { background: var(--veil-2); color: var(--text-strong); }
.rail__link[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: -.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--beam);
}
.rail__link .ico { flex: none; opacity: .75; }
.rail__link[aria-current="page"] .ico { opacity: 1; }

.rail__count {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 500;
    padding: .05rem .42rem;
    border-radius: 999px;
    background: var(--veil-3);
    color: var(--muted);
}
.rail__count--alert { background: var(--tint-err); color: var(--err); }

.rail__foot {
    margin-top: auto;
    padding: .9rem var(--gutter) 0;
    border-top: 1px solid var(--line-soft);
    font-size: .78rem;
    color: var(--dim);
    line-height: 1.7;
}
.rail__foot a { color: var(--muted); }
.rail__foot a:hover { color: var(--beam-1); }

.ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Kopfleiste ------------------------------------------------------------ */

.canvas { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--topbar);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--line);
    background: var(--bar-bg);
    backdrop-filter: blur(16px);
}
.topbar__where { font-size: .82rem; color: var(--dim); letter-spacing: .02em; }
.topbar__where strong { color: var(--text); font-weight: 500; }

.search { margin-left: auto; position: relative; }
.search input {
    width: 230px;
    background: var(--veil);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font: inherit;
    font-size: .84rem;
    padding: .34rem .9rem .34rem 2.1rem;
    transition: width .2s ease, border-color .2s ease;
}
.search input:focus { width: 300px; border-color: var(--ring); outline: none; }
.search input::placeholder { color: var(--dim); }
.search .ico { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); opacity: .5; }

.pulse {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--muted);
    padding: .25rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--veil);
}
.pulse__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--beam-1); flex: none; }
@media (prefers-reduced-motion: no-preference) {
    .pulse__dot { animation: puls 1.6s ease-in-out infinite; }
    @keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
}

.who {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-left: 1rem;
    border-left: 1px solid var(--line);
    font-size: .82rem;
}
.who__mark {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--beam);
    color: var(--on-beam);
    font-size: .72rem; font-weight: 700; font-stretch: 112%;
    flex: none;
}
.who__name { line-height: 1.25; }
.who__role { color: var(--dim); font-size: .72rem; }

.main { padding: 1.75rem 2rem 5rem; max-width: 1600px; width: 100%; }

/* Seitenkopf ------------------------------------------------------------ */

.head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.head h1 { margin: 0; font-size: 1.55rem; font-stretch: 115%; font-weight: 700; letter-spacing: -.025em; }
.head__count { color: var(--dim); font-size: .84rem; }
.head__tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.eyebrow {
    font-size: .655rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 500;
    margin: 1.3rem 0 .45rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

/* Kopfzeile der Übersicht -----------------------------------------------
   Bewusst ohne Kasten: die Zeile soll frei über der Seite stehen, wie eine
   Ansage im Foyer, und nicht wie ein weiteres Bedienfeld aussehen. */

.hero { text-align: center; padding: 2.5rem 1rem 3rem; }

.hero__lead {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 500;
    margin-bottom: .9rem;
}

.hero__line {
    margin: 0;
    font-stretch: 118%;
    font-weight: 700;
    font-size: clamp(1.75rem, 4.1vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.hero__line + .hero__line { margin-top: .1em; }

/* Nur die zweite Zeile trägt den Lichtstrahl. Beide zusammen wären zu viel,
   und der Kontrast zwischen ruhig und farbig ist genau der Reiz. */
.hero__line--beam {
    /* Waagerecht statt schräg: bei einer kurzen, hohen Zeile liefe der letzte
       Farbstopp sonst über die Ecke hinaus und das Bernstein fiele weg. */
    background: linear-gradient(90deg, var(--beam-1), var(--beam-2) 32%, var(--beam-3) 64%, var(--beam-4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Kennzahlen ------------------------------------------------------------ */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.tile {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--veil);
    box-shadow: var(--lift);
    padding: .62rem .85rem .72rem;
}
.tile__label { font-size: .655rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.tile__value { font-size: 1.55rem; font-stretch: 115%; font-weight: 700; line-height: 1.15; margin-top: .35rem; letter-spacing: -.03em; }
.tile__value--beam { background: var(--beam); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile__foot { font-size: .74rem; color: var(--dim); margin-top: .1rem; }

/* Zustandszeile: das zentrale Bauteil ----------------------------------- */

/* Zeilenlisten stehen auf einer eigenen Flaeche, statt frei auf dem
   Untergrund zu schweben. Die Trennlinien liegen dann innerhalb der Karte und
   das Auge hat eine Kante, an der die Liste anfaengt und aufhoert. */
.rows {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--veil);
    padding: 0 .7rem;
}

.row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .38rem .7rem;
    margin: 0 -.7rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 8px;
}
/* Die letzte Zeile braucht keinen Strich: die Kante der Karte ist schon da. */
.rows > .row:last-child { border-bottom: 0; }
.row:hover { background: var(--veil); }
.row--dim { opacity: .45; }

.mark {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
    border: 1px solid var(--dim);
    background: transparent;
}
.mark--complete    { background: var(--beam-1); border-color: var(--beam-1); box-shadow: var(--shine-ok); }
.mark--upgradable  { background: var(--mark-have); border-color: var(--mark-have); }
.mark--missing     { border-color: var(--muted); }
.mark--unaired     { border-style: dashed; border-color: var(--dim); }
.mark--downloading {
    border-color: transparent;
    background: linear-gradient(to top, var(--beam-2) var(--fill, 50%), var(--veil-2) var(--fill, 50%));
    box-shadow: var(--shine-beam);
}

.row__num { font-family: var(--mono); font-size: .74rem; color: var(--dim); width: 26px; flex: none; }
.row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__title .sub { color: var(--muted); }
.row__meta { color: var(--muted); font-size: .8rem; flex: none; white-space: nowrap; }
.row__size { width: 74px; text-align: right; color: var(--dim); font-size: .8rem; flex: none; white-space: nowrap; }
.row__when { width: 98px; text-align: right; color: var(--dim); font-size: .8rem; flex: none; white-space: nowrap; }
.row__actions { display: flex; gap: .35rem; flex: none; }
.row__art { width: 34px; flex: none; }
.row__art img, .row__art div {
    width: 34px; height: 50px; object-fit: cover;
    background: var(--veil-2); border: 1px solid var(--line); border-radius: 4px;
}

.release { font-family: var(--mono); font-size: .74rem; color: var(--dim); letter-spacing: -.01em; }

.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; font-size: .74rem; color: var(--dim); }
.legend .mark { vertical-align: -1px; margin-right: .45rem; }

/* Fortschritt ----------------------------------------------------------- */

.bar { display: block; height: 4px; border-radius: 999px; background: var(--veil-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--beam); transition: width .5s ease; }

@media (prefers-reduced-motion: no-preference) {
    .bar--live span {
        background: linear-gradient(100deg, var(--beam-1), var(--beam-2), var(--beam-3), var(--beam-2), var(--beam-1));
        background-size: 260% 100%;
        animation: strahl 3.4s linear infinite;
    }
    @keyframes strahl { from { background-position: 0 0; } to { background-position: 260% 0; } }
}

/* Tabellen -------------------------------------------------------------- */

.list { width: 100%; border-collapse: collapse; }
.list thead th {
    text-align: left;
    font-size: .655rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 500;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--line);
}
.list tbody td { padding: .58rem .7rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.list tbody tr:hover { background: var(--veil); }
.list__num { text-align: right; color: var(--muted); }
.list .mark { margin-right: .6rem; vertical-align: 1px; }

/* Poster ---------------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 1.25rem; }

.card__art {
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    background: var(--veil-2);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}
.card:hover .card__art { transform: translateY(-3px); border-color: var(--ring); }
/* Das Bild liegt ueber dem Titeltext. Laedt es nicht, wird es entfernt und
   der Text bleibt stehen: kein kaputtes Bildsymbol, keine leere Flaeche. */
.card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__empty {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--dim); font-size: .76rem; text-align: center; padding: .6rem;
}
/* Dasselbe beim Poster: der Titel im leeren Rahmen ist der Rueckfall. */
.card__empty--erwartet { display: none; }

/* Eingeblendet wird nur, was auch einen onload-Behandler traegt. Als Regel auf
   .card__art img war sie zu weit gefasst: dieselbe Flaeche gibt es im Bestand,
   auf der Uebersicht und beim Zuordnen, und dort blieb jedes Poster auf
   Deckkraft null stehen, weil ihm niemand die Klasse gab. */
.bild--einblenden { opacity: 0; transition: opacity .25s ease; }
.bild--einblenden.da { opacity: 1; }

.card__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--track); }
/* Der Lichtstrahl bleibt dem Unfertigen vorbehalten. Waere jede vollstaendige
   Karte bunt unterstrichen, verlaere der Akzent seine Bedeutung. */
.card__bar span { display: block; height: 100%; background: var(--beam); }
.card__bar--done span { background: var(--beam-1); opacity: .55; }
.card__badge {
    position: absolute; top: .45rem; right: .45rem;
    background: var(--bar-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .66rem; padding: .08rem .45rem; color: var(--muted);
    backdrop-filter: blur(6px);
}
.card__title {
    font-size: .85rem; margin-top: .55rem; line-height: 1.35; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__sub { font-size: .74rem; color: var(--dim); }

/* Ein waagerechter Posterstreifen für die Übersicht. */
.strip { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.strip .card { width: 122px; flex: none; }

/* Detailkopf ------------------------------------------------------------ */

.detail {
    position: relative;
    display: flex;
    gap: 1.75rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background:
        radial-gradient(520px 240px at 100% 0%, rgba(155, 116, 242, .12), transparent 70%),
        var(--veil);
    flex-wrap: wrap;
}

/* Die Farbe aus dem Poster, sobald das Skript sie gerechnet hat. Sie faerbt
   nur den Untergrund und die Kante — der Text bleibt in den Farben des Themas,
   sonst waere seine Lesbarkeit vom Zufall des Posters abhaengig.
   Ohne die Klasse bleibt alles wie zuvor: die Berechnung darf scheitern. */
.detail--gefaerbt {
    border-color: rgba(var(--titelfarbe), .38);
    background:
        radial-gradient(560px 260px at 100% 0%, rgba(var(--titelfarbe), .26), transparent 72%),
        radial-gradient(420px 300px at 0% 100%, rgba(var(--titelfarbe), .13), transparent 70%),
        var(--veil);
}
.detail--gefaerbt .detail__scene { opacity: .22; }

/* Das Szenenbild des Titels als Untergrund. Stark abgedunkelt und nach links
   ausgeblendet, damit der Text darauf lesbar bleibt. */
.detail__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center 22%;
    opacity: .3;
    mask-image: linear-gradient(100deg, transparent 12%, #000 62%);
    -webkit-mask-image: linear-gradient(100deg, transparent 12%, #000 62%);
}
.detail__scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scene-fade);
}
.detail__art, .detail__body, .detail__actions { position: relative; z-index: 1; }
.detail__art { width: 168px; flex: none; }
.detail__body { flex: 1; min-width: 260px; }
.detail__title { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.detail__title h1 { margin: 0; font-size: 1.9rem; font-stretch: 115%; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.detail__title .year { color: var(--dim); font-size: 1.05rem; }
.detail__text { color: var(--muted); margin: .7rem 0 1rem; max-width: 66ch; font-size: .9rem; }

/* Bewertung: die Zahl gross, der Rest klein. «7,8» sagt alles, «/10» und die
   Stimmenzahl nur, wenn jemand genauer hinsieht. */
/* Mehrere Bewertungen nebeneinander. Die Quelle steht davor, weil «6,2» ohne
   sie nichts sagt: IMDb und Kritik meinen selten dasselbe. */
.wertung { display: inline-flex; align-items: baseline; gap: .2rem; margin-right: .7rem; }
.wertung__quelle {
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--dim); font-weight: 600; margin-right: .1rem;
}
.wertung__zahl { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--warn); }
.wertung__max { font-size: .78rem; color: var(--dim); }

.detail__mannschaft {
    display: flex; flex-wrap: wrap; gap: .2rem 1.2rem;
    margin-top: .8rem; font-size: .8rem; color: var(--text);
}
.detail__mannschaft .dim { margin-right: .3rem; }

/* Besetzung: Bild, Name, Rolle. Waagerecht scrollbar statt umbrechend — zehn
   Namen sollen eine Zeile bleiben und nicht die halbe Seite belegen. */
.besetzung { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; }
.besetzung__person { width: 92px; flex: none; text-align: center; }

/* Im Kopf des Titels kleiner: dort steht sie neben Beschreibung und
   Schaltflaechen und darf den Kasten nicht sprengen. */
.besetzung--kopf { gap: .6rem; margin: .9rem 0 .2rem; }
.besetzung--kopf .besetzung__person { width: 66px; }
.besetzung--kopf .besetzung__bild { width: 66px; height: 66px; }
.besetzung--kopf .besetzung__initialen { font-size: 1.2rem; }
.besetzung--kopf .besetzung__name { font-size: .7rem; }
.besetzung--kopf .besetzung__rolle { font-size: .64rem; }

.besetzung__bild {
    position: relative; width: 92px; height: 92px; margin-bottom: .35rem;
    border-radius: 50%; overflow: hidden; background: var(--veil-2);
    border: 1px solid var(--line);
}
.besetzung__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Der Anfangsbuchstabe ist der Rueckfall, nicht der Vorlauf: wo ein Bild
   erwartet wird, bleibt er verborgen. Sonst blitzte er bei jedem Laden erst
   auf und wuerde dann ueberdeckt — das sah nach Fehler aus, wo keiner war.
   Erscheint er doch, ist das Bild wirklich nicht gekommen. */
.besetzung__bild--erwartet .besetzung__initialen { display: none; }

/* Das Bild blendet sich ein, statt zu springen. */

.besetzung__initialen {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 1.6rem; font-weight: 700; color: var(--dim);
}
.besetzung__name { font-size: .76rem; font-weight: 600; line-height: 1.2; }
.besetzung__rolle { font-size: .7rem; color: var(--dim); line-height: 1.2; margin-top: .1rem; }
.detail__chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.detail__actions { display: flex; flex-direction: column; gap: .45rem; flex: none; }

.seasons { display: flex; gap: .3rem; margin-bottom: .8rem; flex-wrap: wrap; align-items: center; }
.seasons a {
    padding: .3rem .8rem;
    font-size: .82rem;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 999px;
}
.seasons a:hover { background: var(--veil); color: var(--text); }
.seasons a[aria-current="true"] { background: var(--veil-2); border-color: var(--line); color: var(--text-strong); }
.seasons__note { margin-left: auto; font-size: .78rem; color: var(--dim); }

/* Kleinteile ------------------------------------------------------------ */

.chip {
    display: inline-block;
    padding: .1rem .5rem;
    font-family: var(--mono);
    font-size: .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    white-space: nowrap;
    background: var(--veil);
}
.chip--beam { border-color: var(--edge-ok); color: var(--beam-1); }
.chip--ok   { border-color: var(--edge-ok); color: var(--ok); }
.chip--warn { border-color: var(--edge-warn); color: var(--warn); }
.chip--err  { border-color: var(--edge-err); color: var(--err); }

.muted { color: var(--muted); }
.dim   { color: var(--dim); }

.btn {
    display: inline-block;
    background: var(--veil);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    padding: .32rem .9rem;
    cursor: pointer;
    line-height: 1.5;
    transition: border-color .18s ease, background .18s ease;
}
/* Beim Berühren deutlich, nicht nur eine Spur heller: wer den Zeiger über einer
   Schaltfläche hat, soll das ohne Hinsehen merken. Grün für alles, was etwas
   auslöst; Rot bleibt dem vorbehalten, was etwas wegwirft. */
.btn:hover {
    border-color: transparent;
    background: var(--ok-flaeche);
    color: #fff;
}
.btn:disabled:hover { background: var(--veil); border-color: var(--line); color: var(--dim); }
.btn:disabled { color: var(--dim); cursor: not-allowed; }
.btn--primary { background: var(--beam); border-color: transparent; color: var(--on-beam); font-weight: 600; }
.btn--primary:hover { filter: brightness(1.12); }
.btn--small { font-size: .76rem; padding: .16rem .65rem; }

/* Wer etwas unwiderruflich wegwirft, soll den Knopf vorher als solchen
   erkennen. Zurückhaltend im Ruhezustand, deutlich beim Berühren. */
/* ===== Nachweise ======================================================= */
.nachweis {
    display: flex; align-items: center; gap: .9rem;
    padding: .8rem 1rem; margin-bottom: .6rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--veil);
    max-width: 780px;
}
/* Das fremde Zeichen bleibt klein — kleiner als das eigene in der
   Seitenleiste, wie es die Nutzungsbedingungen von TMDB verlangen. */
.nachweis img { height: 19px; width: auto; flex: none; }
.nachweis__text { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.nachweis__text strong { color: var(--text); }

/* Fusszeile der Uebersicht: der Verweis auf die Nachweise, dort wo jeder
   zuerst hinsieht. Zurueckhaltend gesetzt — er soll auffindbar sein, nicht
   die Seite anfuehren. */
.uebersicht__fuss {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    margin-top: 2.4rem; padding-top: .8rem;
    border-top: 1px solid var(--line-soft);
    font-size: .78rem;
}
.uebersicht__fuss a { color: var(--muted); }
.uebersicht__fuss a:hover { color: var(--text); }

.rail__ueber { text-decoration: none; }
.rail__ueber:hover { color: var(--text); }

/* ===== Staffelauswahl ================================================== */
.blende {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 2rem 1rem;
}
.blende[hidden] { display: none; }

.wahl {
    width: 100%; max-width: 760px; max-height: 86vh;
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--ink);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
    overflow: hidden;
}
.wahl__kopf { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); }
.wahl__kopf img { width: 74px; border-radius: 8px; flex: none; align-self: flex-start; }
.wahl__titel { font-size: 1.25rem; font-weight: 700; font-stretch: 112%; margin: 0 0 .15rem; }
.wahl__quelle { font-size: .76rem; color: var(--dim); }
.wahl__schnell { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }

/* Die Liste scrollt, Kopf und Fuss bleiben stehen — bei zwoelf Staffeln
   verschwaende der Bestaetigen-Knopf sonst aus dem Bild. Eingeklappt braucht
   eine Staffelzeile rund 40 Pixel, zwoelf passen also ohne Scrollen. */
.wahl__liste { overflow-y: auto; padding: .5rem 1.2rem; flex: 1; }

.staffel { border-bottom: 1px solid var(--line-soft); }
.staffel:last-child { border-bottom: 0; }
.staffel__kopf { display: flex; align-items: center; gap: .7rem; padding: .55rem .2rem; cursor: pointer; }
.staffel__kopf:hover { background: var(--veil); border-radius: 8px; }
.staffel__name { font-weight: 600; font-size: .95rem; }
.staffel__zahl { font-size: .78rem; color: var(--dim); margin-left: auto; }
.staffel__pfeil { color: var(--dim); font-size: .7rem; width: 1rem; transition: transform .15s ease; }
.staffel--offen .staffel__pfeil { transform: rotate(90deg); }

.folgen { display: none; padding: 0 0 .5rem 2.4rem; }
.staffel--offen .folgen { display: block; }
.folge { display: flex; align-items: center; gap: .6rem; padding: .22rem .2rem; font-size: .82rem; }
.folge:hover { background: var(--veil); border-radius: 6px; }
.folge__nr { color: var(--dim); font-variant-numeric: tabular-nums; width: 3.4rem; flex: none; }
.folge__titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folge__datum { color: var(--dim); font-size: .74rem; white-space: nowrap; }
.folge--kommt .folge__titel { color: var(--muted); }
/* Vorhandene lassen sich nicht ankreuzen: sie noch einmal zu holen ist genau
   das, was niemand will. */
.folge--da { opacity: .55; }

.wahl__fuss {
    display: flex; align-items: center; gap: .8rem;
    padding: .9rem 1.2rem; border-top: 1px solid var(--line); background: var(--veil);
}
.wahl__bilanz { font-size: .84rem; }

input[type="checkbox"].haken {
    width: 15px; height: 15px; accent-color: var(--beam-1); flex: none; cursor: pointer;
}

/* ===== Kalender als Posterraster ======================================= */
/* Nur belegte Tage, dicht gepackt. Ein Wochenraster mit leeren Zellen kostete
   drei Viertel der Flaeche fuer nichts: bei achtundzwanzig Tagen und sechs
   Terminen standen zweiundzwanzig Kaesten leer herum. Ohne die Wochenstruktur
   traegt jede Zelle ihren Wochentag selbst. */
.kal__raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    margin-bottom: 1.3rem;
}

/* Ein halbes Jahr am Stueck ist eine Bilderwand ohne Orientierung. Die
   Monatsueberschrift kostet eine Zeile und sagt, wie viel dort ansteht. */
.kal__monat { display: flex; align-items: baseline; gap: .6rem; }
.kal__monat .dim { letter-spacing: 0; text-transform: none; font-size: .72rem; }

.kal__tag {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--veil);
    aspect-ratio: 2 / 3;
}
.kal__tag--heute { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }

/* Gewechselt wird ueber opacity, nicht ueber die Bildquelle: das laeuft auf
   der Grafikkarte und flackert nicht. */
.kal__bild { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.kal__bild.an { opacity: 1; pointer-events: auto; }
.kal__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kal__ohne { position: absolute; inset: 0; background: var(--veil-2); }
.kal__bild::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 34%,
                                        rgba(0,0,0,.05) 52%, rgba(0,0,0,.88) 100%);
}
.kal__link { position: absolute; inset: 0; z-index: 2; }

/* Vormerken sitzt unten links, gegenueber den Blaetterpunkten. Als Flaeche
   ueber dem ganzen Poster waere es zu leicht versehentlich getroffen. */
.kal__vormerken, .kal__vorgemerkt {
    position: absolute; inset: auto auto .32rem .45rem; z-index: 5;
    width: auto; height: auto;
    border: 0; border-radius: 5px; cursor: pointer;
    padding: .12rem .4rem;
    font: inherit; font-size: .64rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    background: rgba(255, 255, 255, .92); color: #08090c;
}
.kal__vormerken:hover { background: #fff; }
.kal__vorgemerkt {
    background: var(--ok-flaeche); color: #fff; text-decoration: none; cursor: default;
}
.kal__vormerken:disabled { opacity: .7; cursor: default; }

.kal__datum {
    position: absolute; top: .4rem; left: .45rem; z-index: 3; pointer-events: none;
    font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.kal__heute { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

.kal__unten { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: .45rem .5rem .5rem; pointer-events: none; }
.kal__titel { color: #fff; font-size: .76rem; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.kal__sub { display: block; font-size: .68rem; font-weight: 400; opacity: .85; }
.kal__art {
    display: inline-block; margin-bottom: .25rem;
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    padding: .08rem .35rem; border-radius: 4px; color: #08090c;
}
.kal__art--kino  { background: var(--beam-4); }
.kal__art--heim  { background: var(--beam-2); color: #fff; }
.kal__art--da    { background: var(--beam-1); }
.kal__art--kommt { background: var(--muted); color: #fff; }
.kal__art--laedt { background: var(--beam-1); }
.kal__art--fehlt { background: var(--err); color: #fff; }

/* Was nicht mitgeschickt wurde, wird wenigstens gezaehlt: eine stumme
   Kuerzung waere schlimmer als ein kleiner Hinweis. */
.kal__mehr {
    position: absolute; z-index: 4; top: .4rem; right: .45rem;
    font-size: .62rem; font-weight: 600; color: #fff;
    background: rgba(0,0,0,.5); border-radius: 4px; padding: .05rem .28rem;
}
.kal__punkte { position: absolute; z-index: 4; bottom: .32rem; right: .45rem; display: flex; gap: .2rem; }
.kal__punkte i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; }
.kal__punkte i.an { background: #fff; }
.kal__pfeil {
    position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
    width: 22px; height: 34px; border: 0; border-radius: 6px;
    background: rgba(0,0,0,.42); color: #fff; cursor: pointer;
    opacity: 0; transition: opacity .15s ease; font-size: .85rem; line-height: 1;
}
.kal__tag:hover .kal__pfeil, .kal__pfeil:focus-visible { opacity: 1; }
.kal__pfeil--links  { left: .3rem; }
.kal__pfeil--rechts { right: .3rem; }

/* Die Punkte in der Legende sind dieselben Farben wie die Kennzeichen. */
.legend .kal__punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; vertical-align: 0; }
.kal__punkt--da    { background: var(--beam-1); }
.kal__punkt--fehlt { background: var(--err); }
.kal__punkt--kommt { background: var(--muted); }
.kal__punkt--kino  { background: var(--beam-4); }
.kal__punkt--heim  { background: var(--beam-2); }

@media (prefers-reduced-motion: reduce) { .kal__bild { transition: none; } }

/* Aufgaben als Kacheln, nach Zweck gruppiert. Als Tabelle war die Liste zwar
   dicht, aber man musste sie lesen statt sie zu ueberfliegen. */
.auftraege {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: .7rem;
    margin-bottom: 1.6rem;
}
.auftrag {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--veil);
    padding: .8rem .9rem .7rem;
    display: flex;
    flex-direction: column;
    transition: border-color .12s ease, transform .12s ease;
}
.auftrag:hover { border-color: var(--veil-3); transform: translateY(-1px); }
.auftrag--laeuft { border-color: var(--edge-ok); background: var(--veil-2); }
.auftrag__kopf { display: flex; align-items: baseline; gap: .5rem; }
.auftrag__titel {
    font-weight: 600; font-stretch: 108%; font-size: .93rem;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auftrag__takt {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--dim); white-space: nowrap;
}
/* Von Hand heisst: hier passiert nichts, wenn niemand drueckt. */
.auftrag__takt--hand { color: var(--warn); letter-spacing: .06em; }
.auftrag__name { font-size: .7rem; color: var(--dim); }
.auftrag__fuss {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-top: .55rem;
}
.auftrag__zeit { font-size: .74rem; color: var(--dim); }

/* Angaben aus der Datei: eingeklappt, weil sie nur selten gebraucht werden,
   aber vollstaendig, wenn jemand nachsieht. */
.medien { margin: -.15rem 0 .5rem 1.6rem; font-size: .78rem; }
.medien > summary {
    cursor: pointer; color: var(--dim); padding: .18rem 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.medien > summary:hover { color: var(--text); }
.medien__liste {
    display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem;
    margin: .4rem 0 .2rem; padding: .6rem .8rem;
    border-left: 2px solid var(--line); background: var(--veil); border-radius: 0 8px 8px 0;
}
.medien__liste dt { color: var(--dim); }
.medien__liste dd { margin: 0; }

.btn--danger { border-color: var(--edge-err); color: var(--err); }
/* Steht nach .btn:hover, damit die eigene Farbe gewinnt. */
.btn--danger:hover { background: var(--err); border-color: transparent; color: #fff; }

.field {
    background: var(--veil);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font: inherit;
    font-size: .86rem;
    padding: .34rem .7rem;
}
.field:focus { border-color: var(--ring); outline: none; }
.field::placeholder { color: var(--dim); }

.toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--veil); }
.toggle a { padding: .3rem .9rem; font-size: .8rem; color: var(--muted); }
.toggle a:hover { color: var(--text); }
.toggle a[aria-current="true"] { background: var(--veil-3); color: var(--text-strong); }

.filters { display: flex; gap: .55rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; }

.empty {
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.empty strong { display: block; color: var(--text); font-weight: 500; margin-bottom: .35rem; font-size: 1.05rem; font-stretch: 110%; }

.note {
    border: 1px solid var(--edge-warn);
    border-left-width: 3px;
    border-radius: 10px;
    background: var(--tint-warn);
    padding: .7rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .87rem;
}
.note--err { border-color: var(--edge-err); background: var(--tint-err); }
.note--ok  { border-color: var(--edge-ok); background: var(--tint-ok); }

/* Einstellungen ---------------------------------------------------------- */

.subnav {
    display: flex; gap: .3rem; flex-wrap: wrap;
    margin: -.5rem 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line-soft);
}
.subnav a {
    padding: .3rem .85rem; font-size: .84rem; color: var(--muted);
    border: 1px solid transparent; border-radius: 999px;
}
.subnav a:hover { background: var(--veil); color: var(--text); }
.subnav a[aria-current="true"] { background: var(--veil-2); border-color: var(--line); color: var(--text-strong); }

/* Eine Tafel fasst ein Formular zusammen. Mehrere Tafeln untereinander
   ergeben eine Liste bearbeitbarer Einträge, ohne dass es Reiter braucht. */
.tafel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--veil);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
    max-width: 940px;
}

/* Die Begrenzung auf 940px haelt Formulare auf lesbarer Zeilenlaenge. Wo eine
   Tafel neben Kacheln steht, die die volle Breite nutzen, faellt sie dagegen
   als zu schmal auf — dort hebt dieser Zusatz sie auf. */
.tafel--breit { max-width: none; }

/* Ein Bericht ist zum Lesen und Kopieren da, nicht zum Seitwaertsscrollen.
   Ohne Breitenangabe nimmt ein textarea seine Standardspaltenzahl, also rund
   180 Pixel — und der Rest der Tafel bleibt leer. */
.bericht {
    width: 100%;
    display: block;
    resize: vertical;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.tafel__kopf {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding-bottom: .9rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--line-soft);
}
.tafel__kopf strong { font-stretch: 112%; font-size: 1.02rem; font-weight: 600; }
.tafel__fuss {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    margin-top: 1.4rem; padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}
.tafel__zeile { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.tafel .eyebrow:first-child { margin-top: 0; }

.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .85rem 1.1rem; }
.feld { display: flex; flex-direction: column; gap: .25rem; }
.feld label {
    font-size: .655rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--dim); font-weight: 500;
}
.feld .field { width: 100%; }
.feld__hinweis { font-size: .76rem; color: var(--dim); line-height: 1.45; }

.pruefung { font-size: .82rem; color: var(--muted); }
.pruefung--ok  { color: var(--ok); }
.pruefung--err { color: var(--err); }

/* Qualitaeten als dichte Schalterreihe: eine Liste mit dreissig Kaestchen
   waere unuebersichtlich, eine Kachelreihe liest sich in einem Blick. */
.qualitaeten { display: flex; flex-wrap: wrap; gap: .4rem; }
.qualitaet {
    border: 1px solid var(--line); border-radius: 999px;
    padding: .18rem .7rem; font-size: .78rem; font-family: var(--mono);
    color: var(--dim); cursor: pointer; background: var(--veil);
}
.qualitaet:hover { color: var(--text); }
.qualitaet input { position: absolute; opacity: 0; pointer-events: none; }
.qualitaet--on,
.qualitaet:has(input:checked) { border-color: var(--ring); color: var(--beam-1); background: var(--tint-ok); }
.qualitaet:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

select.field { appearance: none; padding-right: 1.9rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: .7rem; }
.choices--flat { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.choice {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--veil);
    cursor: pointer;
    font-size: .86rem;
}
.choice:hover { border-color: var(--veil-3); }
.choice--on,
.choice:has(input:checked) { border-color: var(--ring); background: var(--veil-2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
/* Das Feld ist unsichtbar, bleibt aber mit der Tastatur erreichbar. Ohne
   diese Regel bekaeme man beim Durchtabben keine Rueckmeldung. */
.choice:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.choice strong { display: block; font-weight: 500; }
.choice .dim { font-size: .76rem; }

/* Kleine Vorschau des jeweiligen Schemas: Fläche, Lichtschein, Textzeilen. */
.choice__probe {
    width: 42px; height: 30px; border-radius: 6px; flex: none;
    border: 1px solid var(--line);
    position: relative; overflow: hidden;
}
.choice__probe::after {
    content: ''; position: absolute; left: 6px; right: 14px; top: 9px; height: 3px;
    border-radius: 2px; background: currentColor; opacity: .55;
}
.choice__probe--dark  { background: radial-gradient(30px 20px at 90% 0%, rgba(56,214,196,.5), transparent 70%), #0a0c11; color: #e9edf4; }
.choice__probe--light { background: radial-gradient(30px 20px at 90% 0%, rgba(15,179,163,.35), transparent 70%), #f6f7fa; color: #141a25; }
.choice__probe--auto  { background: linear-gradient(105deg, #0a0c11 0 50%, #f6f7fa 50% 100%); color: #8a93a1; }

.switch {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--veil);
    cursor: pointer;
    font-size: .86rem;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch strong { display: block; font-weight: 500; }
.switch .dim { font-size: .76rem; }
.switch__track {
    width: 40px; height: 22px; border-radius: 999px; flex: none;
    background: var(--veil-3); border: 1px solid var(--line);
    position: relative; transition: background .2s ease;
}
.switch__knob {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--muted);
    transition: transform .2s ease, background .2s ease;
}
.switch input:checked + .switch__track { background: var(--beam); border-color: transparent; }
.switch input:checked + .switch__track .switch__knob { transform: translateX(18px); background: var(--on-beam); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Anmeldung ------------------------------------------------------------- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
         position: relative; overflow: hidden; }

/* Der Bandverlauf des Logos als Hintergrund: eine grosse Scheibe, die sich in
   achtundvierzig Sekunden einmal dreht. Bewegt wird ausschliesslich transform
   — das laeuft auf der Grafikkarte und kostet auf einem Telefon keine
   spuerbare Batterie. Andere Eigenschaften zwaengen den Browser bei jedem
   Einzelbild zum Neuzeichnen. */
.login__grund { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.login__grund span {
    position: absolute; inset: -60%;
    background: conic-gradient(from 0deg,
        var(--beam-1), var(--beam-2), var(--beam-3), var(--beam-4), var(--beam-1));
    filter: blur(120px);
    opacity: .42;
    animation: bandverlauf 48s linear infinite;
    will-change: transform;
}
@keyframes bandverlauf { to { transform: rotate(360deg); } }

/* Wer im Betriebssystem weniger Bewegung verlangt hat, bekommt sie nicht. Das
   ist keine Hoeflichkeit: fuer manche Menschen ist der Unterschied der
   zwischen benutzbar und uebel. */
@media (prefers-reduced-motion: reduce) {
    .login__grund span { animation: none; }
}

.login__box {
    width: 100%;
    max-width: 372px;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 2rem;
    /* Ruecklage fuer Browser ohne color-mix: ohne sie fiele die ganze
       Kurzschreibweise aus und der Kasten haette gar keine Flaeche. */
    background: var(--ink);
    background:
        radial-gradient(420px 200px at 100% 0%, rgba(56, 214, 196, .1), transparent 70%),
        color-mix(in srgb, var(--ink) 92%, transparent);
    /* Ueber dem Verlauf braucht der Kasten eine eigene Flaeche und eine Kante,
       an der das Auge ihn festmacht. Vorher lag er auf --veil mit dreieinhalb
       Prozent Deckkraft und ohne Schatten — er verschwamm mit dem Hintergrund. */
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .5);
}
.login__box .brand { justify-content: center; margin-bottom: .3rem; font-size: 1.5rem; }
.login__logo { width: 100%; max-width: 250px; margin: 0 auto .35rem; }

/* Der Schriftzug ist weiß gesetzt und braucht deshalb eine zweite Fassung
   für das helle Schema. Umgeschaltet wird über dieselbe Weiche wie die
   Farbmerkmale. */
.logo--light { display: none; }
[data-theme="light"] .logo--dark  { display: none; }
[data-theme="light"] .logo--light { display: block; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .logo--dark  { display: none; }
    :root:not([data-theme="dark"]):not([data-theme="light"]) .logo--light { display: block; }
}
.login__sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.9rem; }
/* Nicht --dim: das ergab im hellen Thema einen Kontrast von 2,8 und im
   dunklen 3,7, beides unter dem Lesbarkeitsminimum von 4,5 — und bei
   gesperrten Versalien in 10 Pixel Groesse faellt es doppelt ins Gewicht.
   --text-strong ist weiss im dunklen und schwarz im hellen Thema und kommt
   in beiden ueber 19. */
.login__box label {
    display: block;
    font-size: .655rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-strong); font-weight: 600; margin: 1rem 0 .35rem;
}
.login__box .field { width: 100%; padding: .55rem .8rem; }
.login__box .btn { width: 100%; margin-top: 1.6rem; padding: .55rem; }

/* Trenner zwischen den beiden Anmeldewegen: zwei Linien, die das Wort in der
   Mitte aussparen. */
.login__oder {
    display: flex; align-items: center; gap: .8rem;
    margin: 1.5rem 0 .2rem;
    font-size: .74rem; color: var(--dim);
    text-transform: uppercase; letter-spacing: .16em;
}
.login__oder::before, .login__oder::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
}
.login__plex {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    margin-top: .9rem !important;
}
.login__plex .ico { width: 15px; height: 15px; fill: currentColor; stroke: none; }

/* Kalender -------------------------------------------------------------- */

.day { margin-bottom: 1.75rem; }
.day__label {
    font-size: .78rem;
    color: var(--dim);
    padding-bottom: .4rem;
    margin-bottom: .1rem;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    gap: .7rem;
    align-items: baseline;
}
.day__label strong { font-weight: 600; font-stretch: 112%; color: var(--text); font-size: .92rem; }
.day--today .day__label strong {
    background: var(--beam);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (max-width: 1000px) {
    .shell { grid-template-columns: 1fr; }
    .rail { position: static; height: auto; }
    .main { padding: 1.25rem; }
    .topbar { padding: 0 1.25rem; }
    .search input { width: 150px; }
    .search input:focus { width: 180px; }
    .detail__art { width: 120px; }
}

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

/* Assistent --------------------------------------------------------------- */

.subnav--schritte a { display: flex; align-items: center; gap: .5rem; }
.subnav__zahl {
    width: 18px; height: 18px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: .68rem; font-weight: 600;
    background: var(--veil-2); color: var(--dim);
}
.subnav--schritte a[aria-current="true"] .subnav__zahl { background: var(--beam); color: var(--on-beam); }

.befund { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }
.befund__leiste { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Der Rat steht unter der Meldung und nicht daneben: er ist oft zwei Zeilen
   lang und genau die Stelle, die gelesen werden soll. */
.befund__rat {
    display: block; margin-top: .35rem;
    padding-left: .75rem; border-left: 2px solid var(--edge-warn);
    color: var(--muted); font-size: .85rem; line-height: 1.5;
}
.befund .row__title strong { display: block; font-weight: 600; }
.befund .row__title .dim { display: block; font-size: .86rem; line-height: 1.5; }

.aufruf { margin-bottom: .8rem; }
.aufruf__kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .8rem; }
.aufruf__kopf .release { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aufruf__rumpf {
    margin: .4rem 0 0;
    padding: .6rem .8rem;
    background: var(--veil); border: 1px solid var(--line-soft); border-radius: 8px;
    font-family: var(--mono); font-size: .74rem; line-height: 1.6;
    white-space: pre-wrap; word-break: break-word;
    max-height: 11rem; overflow-y: auto;
    color: var(--muted);
}

/* Zuordnen ---------------------------------------------------------------- */

/* Die Vorschlagskarten sind eine Auswahl, keine Übersicht: sie brauchen mehr
   Text als eine Bestandskarte und einen sichtbaren Knopf. */
.card--gewaehlt { outline: 2px solid var(--edge-ok); outline-offset: 2px; }
.card__text {
    margin: .35rem 0 .6rem;
    font-size: .8rem; line-height: 1.5; color: var(--muted);
}
.card__body .btn--small { width: 100%; }

/* Abgelehnte Releases bleiben lesbar, treten aber zurück: sie sind eine
   Erklärung, keine Empfehlung. */
.zeile--abgelehnt { opacity: .62; }
.zeile--abgelehnt:hover { opacity: 1; }

/* ===== Handyansicht ====================================================
   Eine eigene Ordnung, kein zusammengeschobener Schreibtisch: Poster
   fuehren, Text tritt zurueck, gescrollt wird waagerecht in Reihen. Auf 412
   Pixeln erkennt man ein Bild in einem Bruchteil der Zeit, die ein Titel zum
   Lesen braucht.

   Die Klassen hier kommen ausschliesslich in templates/handy/ vor. Deshalb
   braucht es keine Medienabfrage — die Schreibtischseiten benutzen sie nie.
   ===================================================================== */

body.handy { background: var(--ink); }
body.handy::before, body.handy::after { display: none; }

.h { min-height: 100vh; }
.h__inhalt { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }

/* Der Kopf schwebt ueber dem Titelbild und wird beim Scrollen fest. */
.h__kopf {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: .7rem;
    padding: calc(.7rem + env(safe-area-inset-top, 0px)) .9rem .7rem;
    background: linear-gradient(180deg, rgba(0,0,0,.5), transparent);
}
.h__kopf img { height: 22px; width: auto; }
.h__kopf a { display: flex; color: #fff; }
.h__kopf .ico { width: 21px; height: 21px; }
.h__kopf__rechts { margin-left: auto; display: flex; gap: .9rem; align-items: center; }
.avatar--sm { width: 26px; height: 26px; font-size: .62rem; }

/* --- Titelbild --------------------------------------------------------- */
.held, .dtl__held { position: relative; margin-top: -3.6rem; }
.held img, .dtl__held img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.held::after, .dtl__held::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 30%,
                                rgba(0,0,0,.15) 55%, var(--ink) 99%);
}
.held__text { position: absolute; left: 0; right: 0; bottom: .6rem; z-index: 2; padding: 0 1rem; }
.held__titel {
    font-size: 1.6rem; font-weight: 800; font-stretch: 112%; line-height: 1.1;
    color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.held__chips { display: flex; gap: .45rem; flex-wrap: wrap; margin: .45rem 0 .7rem; }
.held__chips span { font-size: .68rem; color: rgba(255,255,255,.85); }
.held__chips span + span::before { content: '·'; margin-right: .45rem; opacity: .6; }
.held__knoepfe { display: flex; gap: .5rem; }
.held__knoepfe .btn { flex: 1; min-height: 42px; }

/* --- Reihen ------------------------------------------------------------ */
.reihe { margin-top: 1.4rem; }
.reihe__kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 0 1rem .5rem;
}
.reihe__kopf h2 { margin: 0; font-size: .95rem; font-weight: 700; font-stretch: 108%; }
.reihe__kopf a { font-size: .72rem; color: var(--dim); text-decoration: none; }

/* Fangpunkte: der Daumen wischt, und die Reihe bleibt an einem Poster stehen
   statt irgendwo dazwischen. */
.reihe__band {
    display: flex; gap: .55rem; overflow-x: auto; padding: 0 1rem .2rem;
    scroll-snap-type: x mandatory; scrollbar-width: none;
}
.reihe__band::-webkit-scrollbar { display: none; }

.kachel { flex: none; width: 104px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.kachel__bild {
    position: relative; border-radius: 8px; overflow: hidden;
    background: var(--veil-2); aspect-ratio: 2/3;
}
.kachel__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kachel__leer {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 1.6rem; font-weight: 700; color: var(--dim);
}
.kachel__titel {
    font-size: .72rem; font-weight: 600; line-height: 1.25; margin-top: .35rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kachel__sub { font-size: .66rem; color: var(--dim); line-height: 1.25; }
.kachel--rund { width: 74px; }
.kachel--rund .kachel__bild { border-radius: 50%; aspect-ratio: 1/1; }

/* Kennzeichen auf dem Poster statt daneben — bei 104 Pixeln ist neben dem
   Bild kein Platz, an dem es noch lesbar waere. */
.kachel__art {
    position: absolute; top: .3rem; left: .3rem; z-index: 2;
    font-size: .55rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .1rem .3rem; border-radius: 4px; color: #08090c;
}
.kachel__art--kino  { background: var(--beam-4); }
.kachel__art--heim  { background: var(--beam-2); color: #fff; }
.kachel__art--serie { background: var(--beam-1); }
.kachel__art--da    { background: var(--beam-1); }
.kachel__art--laedt { background: var(--beam-2); color: #fff; }
.kachel__art--fehlt { background: var(--err); color: #fff; }

.kachel__plus {
    position: absolute; right: .3rem; bottom: .3rem; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; border: 0;
    background: rgba(0,0,0,.55); color: #fff; font-size: 1.05rem; line-height: 1;
    display: grid; place-items: center; cursor: pointer;
}
.kachel__plus--fertig { background: var(--ok-flaeche); }

/* --- Raster und Streifen ----------------------------------------------- */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding: 0 1rem; }
.raster .kachel { width: auto; }

.streifen { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem 1rem .8rem; scrollbar-width: none; }
.streifen::-webkit-scrollbar { display: none; }
.streifen a, .streifen button {
    flex: none; border: 1px solid var(--line); background: var(--veil);
    color: var(--text); border-radius: 999px; padding: .35rem .8rem;
    font: inherit; font-size: .76rem; cursor: pointer; min-height: 34px;
    display: flex; align-items: center; text-decoration: none;
}
.streifen a.an, .streifen button.an { background: var(--text); color: var(--ink); border-color: transparent; }

.monatkopf { padding: 1.4rem 1rem .3rem; font-size: 1.05rem; font-weight: 800; font-stretch: 110%; }
.tagkopf { padding: 1rem 1rem .45rem; font-size: .8rem; font-weight: 600; color: var(--muted); }

.mehrladen { display: flex; align-items: center; gap: .8rem; justify-content: center; padding: 1.2rem 1rem 0; }

/* --- Detailseite -------------------------------------------------------- */
.dtl__unten { position: relative; z-index: 2; margin-top: -4.5rem; padding: 0 1rem; }
.dtl__zeile { display: flex; gap: .8rem; align-items: flex-end; }
.dtl__poster { width: 84px; border-radius: 8px; flex: none; box-shadow: 0 10px 26px -12px rgba(0,0,0,.8); }
.dtl__titel { font-size: 1.25rem; font-weight: 800; font-stretch: 110%; line-height: 1.15; }
.dtl__meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; margin-top: .3rem; }
.dtl__wert { font-size: .74rem; color: var(--dim); }
.dtl__wert b { color: var(--warn); font-size: .86rem; }

.dtl__haupt { display: flex; gap: .5rem; margin: .9rem 0 .2rem; }
.dtl__haupt .btn { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* Fuenf Schaltflaechen untereinander waeren ein Drittel des Bildschirms. */
.dtl__mehr { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 0 .2rem; scrollbar-width: none; }
.dtl__mehr::-webkit-scrollbar { display: none; }
.dtl__mehr a, .dtl__mehr button {
    flex: none; display: flex; flex-direction: column; align-items: center; gap: .2rem;
    min-width: 64px; min-height: 54px; padding: .4rem .3rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--veil);
    color: var(--muted); font: inherit; font-size: .6rem; cursor: pointer; text-decoration: none;
}
.dtl__mehr .ico { width: 18px; height: 18px; }

.dtl__text { font-size: .84rem; color: var(--muted); line-height: 1.55; margin: .9rem 0 0; }
.dtl__text--kurz { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dtl__mehrtext {
    background: none; border: 0; color: var(--beam-1); font: inherit; font-size: .78rem;
    padding: .4rem 0; cursor: pointer;
}

.dtl__datei {
    display: flex; align-items: center; gap: .6rem; margin: 0 1rem .5rem;
    padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--veil);
}
.dtl__datei .mark { flex: none; }
.dtl__datei div { min-width: 0; }
.dtl__datei strong { display: block; font-size: .8rem; font-weight: 600;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtl__datei span { font-size: .72rem; color: var(--dim); }

/* --- Mehr --------------------------------------------------------------- */
.mehrliste { display: flex; flex-direction: column; }
.mehrliste a {
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem 1rem; min-height: 50px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text); text-decoration: none; font-size: .9rem;
}
.mehrliste a:first-child { border-top: 1px solid var(--line-soft); }
.mehrliste .ico { width: 19px; height: 19px; color: var(--dim); }

/* --- Leiste unten ------------------------------------------------------- */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--ink) 92%, transparent);
    background: var(--ink);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .5rem .2rem .45rem; min-height: 54px;
    font-size: .6rem; color: var(--dim); text-decoration: none;
}
.tabbar a .ico { width: 21px; height: 21px; }
.tabbar a[aria-current="page"] { color: var(--text); }

/* Die Staffelauswahl faehrt von unten herein und fuellt den Schirm. */
body.handy .blende { padding: 0; place-items: end stretch; }
body.handy .wahl { max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
body.handy .wahl__fuss { padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
body.handy .wahl__fuss .btn { min-height: 44px; }
body.handy input[type="checkbox"].haken { width: 20px; height: 20px; }

/* Die Suche faehrt bei Bedarf unter der Kopfzeile hervor: ein festes Feld
   dort haette ein Drittel der Breite gekostet, und gesucht wird selten. */
.h__suchknopf { background: none; border: 0; padding: 0; color: #fff; cursor: pointer; display: flex; }
.h__suche {
    position: sticky; top: 3.4rem; z-index: 29;
    display: flex; gap: .5rem; padding: 0 .9rem .7rem;
    background: var(--ink);
}
.h__suche[hidden] { display: none; }
.h__suche input { flex: 1; min-height: 40px; }