/* Herstellerunterlagen — Startseite (FB-2026-016)
 *
 * Kopfband mit Bild und Logo, Bestand je Baustein, Arbeitsvorrat.
 * Baut auf app.css und liste.css auf (Tokens --akzent, --gut, --warn, --schlecht …).
 * Bewegung nur als Antwort auf Hover und Fokus; keine Einflug- oder Daueranimation,
 * damit Feedback-Bildschirmfotos (html2canvas) die Seite so zeigen, wie sie ist.
 */

:root {
    --st-band-grund: #f7ecd9;
    --st-band-grund-0: rgba(247, 236, 217, 0);
    --st-bild-schleier: rgba(36, 29, 19, 0);
    --st-balken-grund: rgba(161, 98, 7, .18);
    --st-fehlt: #e7e2da;
    --st-fehlt-strich: rgba(90, 107, 124, .28);
}
html.dark, [data-theme="dark"] {
    --st-band-grund: #241d13;
    --st-band-grund-0: rgba(36, 29, 19, 0);
    --st-bild-schleier: rgba(36, 29, 19, .32);
    --st-balken-grund: rgba(227, 169, 60, .2);
    --st-fehlt: #2a323c;
    --st-fehlt-strich: rgba(154, 169, 184, .22);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not(.light) {
        --st-band-grund: #241d13;
        --st-band-grund-0: rgba(36, 29, 19, 0);
        --st-bild-schleier: rgba(36, 29, 19, .32);
        --st-balken-grund: rgba(227, 169, 60, .2);
        --st-fehlt: #2a323c;
        --st-fehlt-strich: rgba(154, 169, 184, .22);
    }
}

/* Start darf breiter sein als die übrigen Ansichten. Der Seitenkopf (Überschrift „Start“)
   bleibt für Vorleseprogramme erhalten, sichtbar übernimmt das Kopfband. */
.inhalt:has(#start:not([hidden])) { max-width: 1480px; }
#start > .ansicht-kopf {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#start-neu { display: none; }

/* ── Kopfband ──────────────────────────────────────────────────────── */
.st-band {
    position: relative; overflow: hidden;
    min-height: 190px; margin-bottom: 12px;
    background: var(--st-band-grund);
    border: 1px solid var(--rand); border-radius: var(--radius);
}
/* Bild als Hintergrund, Verlauf als eigene Schicht: so zeigt auch das Feedback-Bildschirmfoto
   (html2canvas 1.4.1 — ohne object-fit, mask-image, filter, color-mix) die Seite richtig. */
.st-band-bild {
    position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
    background: url('/herstellerdoku/img/start-kopf.webp') 50% 42% / cover no-repeat;
}
.st-band-schleier {
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, var(--st-band-grund) 0, var(--st-band-grund) 38%, var(--st-band-grund-0) 68%),
        linear-gradient(var(--st-bild-schleier), var(--st-bild-schleier));
}
.st-band-inhalt {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    max-width: min(660px, 56%); padding: 14px 22px;
}
.st-band-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st-logo {
    display: inline-flex; padding: 6px 10px; border-radius: 8px;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.st-logo img { display: block; height: 30px; width: auto; }
.st-band-titel {
    font: 600 .78rem/1.2 'Open Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase;
    color: var(--akzent-text);
}
.st-kern {
    margin: 4px 0 0; font: 700 1.3rem/1.15 'Montserrat', sans-serif; color: var(--text);
}
.st-kern-zahl { font-size: 2.3rem; color: var(--akzent-text); margin-right: 2px; }
.st-kern-balken {
    display: block; width: 100%; max-width: 420px; height: 8px; margin-top: 4px;
    background: var(--st-balken-grund); border-radius: 999px; overflow: hidden;
}
.st-kern-balken > span { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.st-kern-regel { margin: 2px 0 0; font-size: .84rem; color: var(--text-leise); }
.st-band-knoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.st-stand { font-size: .78rem; color: var(--text-leise); }

/* ── Raster unter dem Band ─────────────────────────────────────────── */
.st-raster {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 14px; align-items: start; margin-bottom: 16px;
}
.st-block {
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
    padding: 12px 14px 10px;
}
.st-block h2 { margin: 0 0 6px; font-size: 1.02rem; }
.st-block-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ── Bestand je Baustein: gestapelte Balken ────────────────────────── */
.st-block-sub { font-size: .78rem; color: var(--text-leise); }
.st-seg.st-seg-kopf { padding-top: 0; padding-bottom: 2px; }
.st-seg-kopf .st-l { text-align: right; font-size: .74rem; color: var(--text-leise); white-space: nowrap; }
.st-l::before {
    content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px;
    border-radius: 3px; vertical-align: -1px;
}
.st-l-ok::before { background: var(--gut); }
.st-l-offen::before { background: var(--warn); }
.st-l-fehlt::before { background: var(--st-fehlt); box-shadow: inset 0 0 0 1px var(--st-fehlt-strich); }

.st-segliste { list-style: none; margin: 0; padding: 0; }
.st-seg {
    display: grid; grid-template-columns: 150px minmax(0, 1fr) 74px 82px 58px 18px;
    align-items: center; gap: 10px; padding: 2px 6px; border-radius: 8px;
    color: var(--text); text-decoration: none; transition: background-color .15s ease;
}
.st-seg:hover { background: var(--hover); }
.st-seg-name { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-stapel {
    display: flex; height: 14px; border-radius: 4px; overflow: hidden;
    background: var(--st-fehlt);
}
.st-stapel > span { display: block; height: 100%; }
.st-ok { background: var(--gut); }
.st-offen { background: var(--warn); }
.st-fehlt {
    background: repeating-linear-gradient(135deg, transparent 0 5px, var(--st-fehlt-strich) 5px 6px);
}
.st-n { text-align: right; font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--text-leise); }
.st-n-ok { color: var(--text); font-weight: 600; }
.st-pfeil {
    display: inline-flex; color: var(--text-leise); opacity: .55;
    transition: transform .15s ease, opacity .15s ease;
}
.st-seg:hover .st-pfeil, .st-seg:focus-visible .st-pfeil,
.st-vz:hover .st-pfeil, .st-vz:focus-visible .st-pfeil { opacity: 1; transform: translateX(2px); }
.st-bestand .fussnote { margin-top: 6px; }

/* ── Arbeitsvorrat ─────────────────────────────────────────────────── */
.st-vzliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.st-vz {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) 18px; align-items: center; gap: 10px;
    padding: 5px 6px; border-radius: 8px; color: var(--text); text-decoration: none;
    transition: background-color .15s ease;
}
a.st-vz:hover { background: var(--hover); }
.st-vz-zahl {
    justify-self: start; min-width: 34px; padding: 1px 8px; border-radius: 999px; text-align: center;
    font: 700 .86rem/1.5 'Montserrat', sans-serif; font-variant-numeric: tabular-nums;
}
.st-vz-null .st-vz-zahl { color: var(--text-leise); background: var(--grund); border: 1px solid var(--rand); }
.st-vz-offen .st-vz-zahl { color: var(--akzent-text); background: var(--akzent-hell); border: 1px solid var(--akzent); }
.st-vz-problem .st-vz-zahl { color: #fff; background: var(--schlecht); border: 1px solid var(--schlecht); }
html.dark .st-vz-problem .st-vz-zahl, [data-theme="dark"] .st-vz-problem .st-vz-zahl { color: #1a0d0d; }
.st-vz-text { display: flex; flex-direction: column; min-width: 0; }
.st-vz-titel { font-size: .9rem; font-weight: 600; }
.st-vz-null .st-vz-titel { font-weight: 400; color: var(--text-leise); }
.st-vz-hinweis { font-size: .78rem; color: var(--text-leise); line-height: 1.35; }
div.st-vz { grid-template-columns: 52px minmax(0, 1fr); }

.st-rand {
    margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rand);
    font-size: .78rem; color: var(--text-leise); line-height: 1.45;
}
.st-rand + .st-rand { margin-top: 4px; padding-top: 0; border-top: none; }
.st-rand-label { display: block; font-weight: 600; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }

/* ── Unten: Meldungen, Vorschläge, Sammelfreigabe ──────────────────── */
.st-unten:focus { outline: none; }
.st-unten:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: var(--radius); }
.st-leer { margin: 4px 0 0; font-size: .86rem; color: var(--text-leise); }

/* Ladezustand ohne Daueranimation */
.st-skelett { display: grid; gap: 14px; }
.st-skelett > div, .st-skelett-zeile > div { border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--rand); }
.st-skelett-zeile { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }

/* ── Schmalere Fenster ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .st-raster { grid-template-columns: minmax(0, 1fr); }
    .st-band-inhalt { max-width: min(560px, 62%); }
}
@media (max-width: 760px) {
    .st-band-bild { position: relative; display: block; width: 100%; height: 120px; }
    .st-band-schleier { inset: 0 0 auto 0; height: 120px;
        background: linear-gradient(to bottom, var(--st-band-grund-0) 50%, var(--st-band-grund)),
                    linear-gradient(var(--st-bild-schleier), var(--st-bild-schleier)); }
    .st-band-inhalt { max-width: none; padding: 0 16px 16px; }
    .st-seg { grid-template-columns: 96px minmax(0, 1fr) 30px 30px 30px; gap: 6px; }
    .st-seg .st-pfeil, .st-seg-kopf > span:last-child { display: none; }
    .st-seg-kopf .st-l { font-size: 0; }
    .st-seg-kopf .st-l::before { margin-right: 0; }
    .st-skelett-zeile { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .st-seg, .st-vz, .st-pfeil { transition: none; }
    .st-seg:hover .st-pfeil, .st-seg:focus-visible .st-pfeil,
    .st-vz:hover .st-pfeil, .st-vz:focus-visible .st-pfeil { transform: none; }
}