/* Farbtokens kommen aus gemeinsam/theme.css (als /static/css/theme.css
   ausgeliefert, in includes/kopf.html VOR dieser Datei verlinkt). Hier nur
   Regeln, keine Palette — damit Operator und Stand-Seite des Druck-Clients
   dieselben Farben tragen. */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--schrift);
    color: var(--farbe-text);
    background: var(--farbe-bg);
}
/* ===================== Gerüst (Satelliten-Muster) =====================
   base.html: includes/kopf.html (head) → includes/menu.html (Leiste +
   mobile Kopfzeile) → <main> → includes/fuss.html. Die Leiste ist ab
   900 px fest links, darunter eine Schublade — ohne JavaScript über
   #menue-toggle (Checkbox) und :checked ~ Geschwister. */
:root { --leiste-breite: 230px; --leiste-bg: var(--farbe-kopf); --leiste-bg-dunkel: #0b1220; }
body { display: flex; flex-direction: column; min-height: 100vh; }
/* min-width: 0 — sonst wächst <main> als Flex-Kind mit einer breiten Tabelle
   mit und der Scroll-Container kann nicht greifen. */
main { padding: 1.5rem; max-width: 1400px; width: 100%; min-width: 0; margin: 0 auto; flex: 1 0 auto; }
h1.seitentitel { margin: 0 0 1.2rem 0; font-size: 1.5rem; font-weight: 700; }
/* Feste Breite statt `width: auto`: als Flex-Kind mit `auto` wächst <main>
   in Chrome mit einer breiten Tabelle mit, und der Scroll-Container greift nicht. */
body.mit-leiste main, body.mit-leiste footer.fuss { margin-left: var(--leiste-breite); width: calc(100% - var(--leiste-breite)); }

.menue-toggle { position: absolute; left: -9999px; }
header.kopfzeile { display: none; }
.menue-schleier { display: none; }

aside.seitenleiste {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--leiste-breite);
    background: var(--leiste-bg);
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 20;
    font-size: 0.92rem;
}
aside.seitenleiste .marke {
    padding: 1rem 1.1rem 0.8rem;
    background: var(--leiste-bg-dunkel);
}
aside.seitenleiste .marke a { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
aside.seitenleiste .marke small { display: block; color: #9aa4b2; font-size: 0.78rem; margin-top: 0.2rem; }
aside.seitenleiste nav { flex: 1 0 auto; padding: 0.5rem 0 0.8rem; }
aside.seitenleiste .gruppe-titel {
    margin: 0.9rem 1.1rem 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9aa4b2;
}
aside.seitenleiste nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    color: #e5e7eb;
    text-decoration: none;
    min-height: 44px;
    border-left: 3px solid transparent;
}
aside.seitenleiste nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
aside.seitenleiste nav a.aktiv {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    border-left-color: var(--farbe-primaer);
}
aside.seitenleiste nav a .icon { width: 1.4rem; text-align: center; flex: 0 0 auto; }
aside.seitenleiste .leiste-fuss {
    padding: 0.8rem 1.1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    color: #9aa4b2;
}
aside.seitenleiste .leiste-fuss strong { color: #fff; }
/* P2 (Drehbuch 8.4): Link zur eigenen Passwortaenderung, neben "Angemeldet als". */
aside.seitenleiste .leiste-passwort-link {
    color: #9aa4b2;
    display: inline-block;
    margin-top: 0.3rem;
}
aside.seitenleiste .leiste-passwort-link:hover { color: #fff; }
aside.seitenleiste .sprachwahl { display: flex; gap: 0.3rem; margin: 0.6rem 0; }
aside.seitenleiste .sprachwahl a {
    color: #9aa4b2;
    text-decoration: none;
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
aside.seitenleiste .sprachwahl a:hover { color: #fff; }
aside.seitenleiste .sprachwahl a.aktiv { color: #fff; background: rgba(255, 255, 255, 0.16); font-weight: 600; }
aside.seitenleiste form.abmelden { margin: 0; }
aside.seitenleiste form.abmelden button {
    width: 100%;
    background: transparent;
    color: #e5e7eb;
    border-color: #4b5563;
}
aside.seitenleiste form.abmelden button:hover { background: rgba(255, 255, 255, 0.08); }

/* Login: keine Leiste, nur die Sprachwahl klein oben rechts */
nav.sprachwahl-klein {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
}
nav.sprachwahl-klein a { color: var(--farbe-gedaempft); text-decoration: none; padding: 0.2rem 0.5rem; border-radius: 4px; }
nav.sprachwahl-klein a.aktiv { color: var(--farbe-text); background: #e5e7eb; font-weight: 600; }

footer.fuss {
    padding: 0.8rem 1.5rem;
    font-size: 0.78rem;
    color: var(--farbe-gedaempft);
    text-align: center;
}
footer.fuss a { color: var(--farbe-gedaempft); }
h2 { margin-top: 0; font-size: 1.05rem; text-transform: uppercase;
     letter-spacing: 0.05em; color: var(--farbe-gedaempft); }
section.karte {
    background: var(--farbe-karte);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 0.55rem 0.6rem; text-align: left; border-bottom: 1px solid var(--farbe-rahmen); }
th { font-weight: 600; color: var(--farbe-gedaempft); background: #fafbfc; }
/* Kategorien-Matrizen (Standort & Design, Deko-Bibliothek): die Kategorie-Spalten
   tragen ihre Beschriftung senkrecht, damit zwölf Häkchen-Spalten bei 1280 px
   ohne Seitwärtsscrollen passen; wird es doch enger, scrollt nur die Tabelle. */
.tabelle-scroll { overflow-x: auto; }
table.matrix th, table.matrix td { padding-left: 0.3rem; padding-right: 0.3rem; }
table.matrix th.kat { vertical-align: bottom; text-align: center; padding: 0.5rem 0.15rem; }
table.matrix th.kat span {
    display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
    white-space: nowrap; font-size: 0.82rem; line-height: 1.1;
}
tr:last-child td { border-bottom: none; }
.leer { color: var(--farbe-gedaempft); font-style: italic; padding: 0.6rem 0; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Befund Volodymyr 01.10.2026: „● OFFLINE" nie zwischen Punkt und Text
       umbrechen, Punkt auf der Zeilenmitte. */
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
}
.badge-offen      { background: #fef3c7; color: #92400e; }
.badge-bezahlt    { background: #dbeafe; color: #1e3a8a; }
.badge-druckend   { background: #e0f2fe; color: #075985; }
.badge-fertig     { background: #dcfce7; color: #166534; }
.badge-ausgegeben { background: #e5e7eb; color: #374151; }
.badge-storniert  { background: #fee2e2; color: #991b1b; }
.badge-wartet     { background: #fef9c3; color: #854d0e; }
.badge-fehler     { background: #fee2e2; color: #991b1b; }
/* I1 (Bezahl-Modus zahlung_am_stand): wartet aufs Kassieren am Stand. */
.badge-wartet_auf_kasse { background: #fde68a; color: #78350f; }

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    padding: 0.4rem 0.85rem;
    border-radius: 5px;
    border: 1px solid transparent;
    background: var(--farbe-primaer);
    color: var(--farbe-primaer-text);
    font-size: 0.85rem;
    font-weight: 500;
}
button:hover { filter: brightness(1.08); }
button.sekundaer { background: #fff; color: var(--farbe-text); border-color: var(--farbe-rahmen); }
button.gefahr { background: var(--farbe-fehler); }
button.erfolg { background: var(--farbe-erfolg); }
button.warnung { background: var(--farbe-warnung); }
/* Dieselben Varianten für `.btn` — vor allem `<summary class="btn …">`
   (Bearbeiten, Passwort, Stornieren): bis 30.09.2026 blieben die blau,
   obwohl „sekundaer"/„gefahr" dranstand (Befund Volodymyr). */
.btn.sekundaer { background: #fff; color: var(--farbe-text); border-color: var(--farbe-rahmen); }
.btn.gefahr { background: var(--farbe-fehler); color: #fff; }
.btn.erfolg { background: var(--farbe-erfolg); color: #fff; }
.btn.warnung { background: var(--farbe-warnung); color: #fff; }

form.inline { display: inline; margin: 0; }
form.inline + form.inline { margin-left: 0.3rem; }

/* Notstopp (24.09.2026): ganz oben im Dashboard, fuer beide Rollen —
   auffaellig, aber ruhig genug, um daneben Bestellungen zu bearbeiten. */
.notstopp-block {
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}
.notstopp-block.notstopp-aktiv { background: #fee2e2; border-color: #fecaca; }
.notstopp-text { color: #991b1b; font-size: 0.95rem; margin-bottom: 0.6rem; }
.notstopp-hinweis { font-size: 0.8rem; color: var(--farbe-gedaempft); margin-top: 0.5rem; }
.notstopp-form { margin: 0; }
.notstopp-knopf { font-size: 1rem; font-weight: 700; padding: 0.7rem 1.4rem; min-height: 48px; width: auto; }
@media (max-width: 720px) {
    .notstopp-knopf { width: 100%; }
}
.formular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    /* Volle Kartenbreite (Befund Volodymyr 30.09.2026): mit 600 px standen
       die Felder als schmaler Streifen links in einer breiten Karte, und
       längere Beschriftungen brachen um, sodass die Felder nebeneinander
       nicht mehr auf einer Höhe lagen. */
}
.formular-grid > * { min-width: 0; }
.formular-grid input:not([type=checkbox]):not([type=radio]),
.formular-grid select,
.formular-grid textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; }
.fehler-formular { display: flex; gap: 0.3rem; align-items: center; }
.fehler-formular input[type=text] {
    font: inherit;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 4px;
    min-width: 14rem;
}

.meldung-fehler {
    background: #fee2e2; color: #991b1b;
    padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem;
}

/* ===================== Schritt-Karten (Z8b) =====================
   Anleitungs-Karten mit nummerierten Schritten, z. B.
   /operator/zahlungen — je Anbieter eine Karte, die der Betreiber
   von oben nach unten durchgeht. */
.status-zeile {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin: 0.6rem 0 1rem 0;
}
.status-nicht_eingerichtet { background: #f3f4f6; color: #374151; }
.status-nicht_geprueft     { background: #fef9c3; color: #854d0e; }
.status-bereit             { background: #dcfce7; color: #166534; }
.status-fehler             { background: #fee2e2; color: #991b1b; }
.status-inaktiv            { background: #e5e7eb; color: #374151; }

ol.schritte {
    list-style: none;
    counter-reset: schritt;
    padding: 0;
    margin: 1rem 0 0 0;
}
ol.schritte > li {
    counter-increment: schritt;
    position: relative;
    padding: 0.9rem 1rem 1rem 3.1rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 8px;
    margin-bottom: 0.9rem;
    background: #fafbfc;
}
ol.schritte > li::before {
    content: counter(schritt);
    position: absolute;
    left: 0.85rem;
    top: 0.85rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--farbe-primaer);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}
ol.schritte h3 { margin: 0 0 0.5rem 0; font-size: 1rem; }

.feld-block { margin-bottom: 1rem; }
.feld-block:last-child { margin-bottom: 0; }
.feld-titel { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.feld-block input[type=text],
.feld-block input[type=password] {
    display: block;
    width: 100%;
    max-width: 30rem;
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 5px;
}
.feld-hilfe { color: var(--farbe-gedaempft); font-size: 0.82rem; margin: 0.3rem 0 0 0; }

.umgebung-wahl { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.umgebung-wahl label {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex: 1 1 14rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    font-weight: normal;
}
.umgebung-wahl input[type=radio] { flex: 0 0 auto; margin-top: 0.2rem; }
.umgebung-wahl .feld-hilfe { margin-top: 0.15rem; }

.webhook-zeile { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
.webhook-zeile input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.88rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 5px;
}
.webhook-zeile button { flex: 0 0 auto; }

ul.ereignis-liste { list-style: none; padding: 0; margin: 0.5rem 0 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
ul.ereignis-liste li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 5px;
    padding: 0.35rem 0.6rem;
}
ul.ereignis-liste code { font-size: 0.82rem; word-break: break-all; }

.pruef-zeile { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.6rem; }
.pruef-ergebnis { color: var(--farbe-gedaempft); font-size: 0.9rem; }

.video-platzhalter {
    border: 2px dashed var(--farbe-rahmen);
    border-radius: 8px;
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--farbe-gedaempft);
    margin-top: 0.8rem;
}

.druck-zeile { font-size: 0.85rem; color: var(--farbe-gedaempft); }
.druck-zeile + .druck-zeile { margin-top: 0.2rem; }
.versuche { color: var(--farbe-gedaempft); font-size: 0.78rem; margin-left: 0.4rem; }
details { margin-top: 0.4rem; }
/* Ein Knopf, der ein Formular aufklappt (`<summary class="btn">`), steht in
   einer Knopfreihe neben gewöhnlichen Knöpfen — ohne das rutschte er um den
   Abstand oben tiefer als seine Nachbarn (Befund Volodymyr 30.09.2026). */
details:has(> summary.btn) { margin-top: 0; }
details > summary { cursor: pointer; color: var(--farbe-primaer); font-size: 0.85rem; }

/* ===================== Mobil (<= 720px) =====================
   Zwei Tabellen-Muster stehen zur Wahl, siehe docs/erledigt/Operator-Dashboard-Mobil.md:
   .tabelle-karten  -> jede Zeile wird zur Karte (Dashboard, Mitarbeiter)
   .tabelle-scroll  -> Tabelle bleibt Tabelle, nur sie scrollt seitlich
                       (Deko/Design: Kategorien-Matrizen, Kartenumbruch
                       wäre dort unübersichtlich) */
@media (max-width: 720px) {
    main { padding: 0.85rem; }

    /* Touch-Ziele: Knöpfe, Text-/Passwortfelder mindestens 44px hoch.
       Checkboxen/Radios bleiben nativ klein, das ist dort erwartbar. */
    button, .btn,
    input:not([type=checkbox]):not([type=radio]),
    select {
        min-height: 44px;
    }
    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea {
        font: inherit;
        font-size: 16px; /* unter 16 px zoomt iOS beim Fokus */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    textarea { min-height: 88px; }
    .formular-grid { grid-template-columns: 1fr; }
    .fehler-formular { flex-wrap: wrap; }
    .fehler-formular input[type=text] { min-width: 0; flex: 1 1 10rem; }

    /* Schritt-Karten (Z8b): einspaltig, Knoepfe volle Breite, kein
       horizontales Scrollen — siehe docs/erledigt/Operator-Dashboard-Mobil.md. */
    ol.schritte > li { padding: 0.8rem 0.8rem 0.9rem 2.6rem; }
    ol.schritte > li::before { left: 0.6rem; top: 0.75rem; width: 1.5rem; height: 1.5rem; font-size: 0.82rem; }
    .feld-block input[type=text],
    .feld-block input[type=password] { max-width: none; }
    .umgebung-wahl { flex-direction: column; }
    .webhook-zeile { flex-direction: column; align-items: stretch; }
    .webhook-zeile button { width: 100%; }
    ul.ereignis-liste li { flex-direction: column; align-items: stretch; }
    ul.ereignis-liste button { width: 100%; }
    .pruef-zeile { flex-direction: column; align-items: stretch; }
    .pruef-zeile form { width: 100%; }
    .pruef-zeile button { width: 100%; }
    .druck-zeile a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 0.3rem;
    }

    /* Muster a) Karten-Umbruch */
    .tabelle-karten table, .tabelle-karten thead,
    .tabelle-karten tbody, .tabelle-karten tr, .tabelle-karten td {
        display: block;
        width: 100%;
    }
    .tabelle-karten thead { display: none; }
    .tabelle-karten tr {
        border: 1px solid var(--farbe-rahmen);
        border-radius: 8px;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    .tabelle-karten td {
        border: none;
        padding: 0.4rem 0;
    }
    .tabelle-karten td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--farbe-gedaempft);
        margin-bottom: 0.15rem;
    }

    /* Muster b) Seitlich scrollender Container, erste Spalte fixiert */
    .tabelle-scroll {
        overflow-x: auto;
        margin: 0 -0.2rem;
        padding: 0 0.2rem;
    }
    .tabelle-scroll table { width: auto; min-width: 100%; }
    /* `first-of-type` statt `first-child`: steht in einer Zeile ein
       verstecktes Feld vor der ersten Zelle, waere `first-child` nicht
       das <td> und die Spalte bliebe unfixiert. */
    .tabelle-scroll th:first-of-type,
    .tabelle-scroll td:first-of-type {
        position: sticky;
        left: 0;
        background: var(--farbe-karte);
        z-index: 1;
    }
    .tabelle-scroll thead th:first-of-type { background: #fafbfc; }
}
    

/* ===================== Leiste als Schublade (< 900px) ===================== */
@media (max-width: 899px) {
    body.mit-leiste main, body.mit-leiste footer.fuss { margin-left: 0; width: 100%; }
    header.kopfzeile {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        background: var(--leiste-bg);
        color: #fff;
        padding: 0 0.6rem;
        min-height: 52px;
        position: sticky;
        top: 0;
        z-index: 15;
    }
    header.kopfzeile .menue-knopf {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
        cursor: pointer;
        border-radius: 6px;
    }
    header.kopfzeile .menue-knopf:hover { background: rgba(255, 255, 255, 0.1); }
    header.kopfzeile .kopfzeile-titel { font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    h1.seitentitel { display: none; }

    aside.seitenleiste {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
        width: min(var(--leiste-breite), 85vw);
        z-index: 30;
    }
    aside.seitenleiste .schliessen {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        float: right;
        margin: -0.5rem -0.6rem 0 0;
        font-size: 1.3rem;
        color: #9aa4b2;
    }
    .menue-schleier {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 25;
        cursor: pointer;
    }
    .menue-toggle:checked ~ aside.seitenleiste { transform: translateX(0); }
    .menue-toggle:checked ~ .menue-schleier { display: block; }
}
@media (min-width: 900px) {
    aside.seitenleiste .schliessen { display: none; }
}

/* Der Scroll-Container gilt in jeder Breite — zwischen 721 und 899 px
   (Tablet) lief die Deko-Matrix sonst aus dem Bild, weil die Regel nur im
   Handy-Block stand. */
.tabelle-scroll { overflow-x: auto; }

/* Schmalere Zellen in den Kategorien-Matrizen (Deko, Design): bei 1280 px
   Fensterbreite (Seitenleiste + Rand) blieben sonst zu wenig Platz, sodass
   die Deko-Bibliothek schon auf einem normalen Laptop seitlich scrollte
   (WK5 #53982). Weniger Innenabstand je Spalte reicht, um alle Kategorien
   ohne Scrollen zu zeigen. */
.tabelle-scroll th, .tabelle-scroll td { padding-left: 0.35rem; padding-right: 0.35rem; }
.tabelle-scroll .badge { padding-left: 0.4rem; padding-right: 0.4rem; }
.tabelle-scroll td:last-of-type button { padding-left: 0.55rem; padding-right: 0.55rem; }

/* Aktions-Spalte: Knöpfe nebeneinander, aber umbrechbar.
   Vorher stand `white-space: nowrap` an der Zelle — damit war ihre
   kleinstmögliche Breite immer die Summe *aller* Knöpfe. In einer
   geänderten Zeile kommt zu „Speichern" und dem Papierkorb noch
   „Zurücksetzen" dazu; im Deutschen ist das Wort so lang, dass die
   Kategorienspalten der Deko-Bibliothek bei 1280 px nicht mehr passten
   und Köpfe abgeschnitten wurden (WK5 #53982). Ohne `nowrap` zählt nur
   noch der breiteste einzelne Knopf; die Knöpfe stehen weiterhin
   nebeneinander, solange der Platz reicht, und nur die eine geänderte
   Zeile bricht zweizeilig um. */
td.zeilen-aktionen { white-space: normal; }
/* Erste Reihe („Speichern" und Papierkorb) bleibt immer beisammen … */
td.zeilen-aktionen .aktionen-erste-reihe { white-space: nowrap; }
/* … „Zurücksetzen" steht darunter und zählt für die Spaltenbreite
   nur für sich allein. */
td.zeilen-aktionen form.inline { display: block; margin: 0.3rem 0 0; }

/* Breite Matrizen (Deko, Design): Aktions-Spalte rechts fixiert, damit
   „Speichern" ohne Seitwärts-Scrollen erreichbar bleibt; der Schatten
   deutet an, dass links davon noch Spalten liegen. */
.tabelle-scroll th:last-of-type,
.tabelle-scroll td:last-of-type {
    position: sticky;
    right: 0;
    background: var(--farbe-karte);
    z-index: 1;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.25);
}
.tabelle-scroll thead th:last-of-type { background: #fafbfc; }

/* ===================== Sprungmarken (lange Seiten) =====================
   includes/sprungmarken.html: Chip-Zeile unter der Seitenüberschrift mit
   Ankern auf die Abschnitte (Zahlungen, Abrechnung, Deko, Betreiberprofil).
   Reine Anker, kein JavaScript. `scroll-margin-top` sorgt dafür, dass die
   klebende Kopfzeile (< 900 px, 52 px hoch) den Abschnittstitel nach dem
   Sprung nicht verdeckt. */
nav.sprungmarken {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin: -0.4rem 0 1.2rem 0;
    font-size: 0.82rem;
}
nav.sprungmarken .sprungmarken-titel { color: var(--farbe-gedaempft); margin-right: 0.2rem; }
nav.sprungmarken a {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius);
    background: var(--farbe-karte);
    color: var(--farbe-gedaempft);
    text-decoration: none;
    white-space: nowrap;
}
nav.sprungmarken a:hover,
nav.sprungmarken a:focus-visible {
    color: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    outline: none;
}
section.karte[id], h3[id], tr[id] { scroll-margin-top: 1rem; }
p.nach-oben { text-align: right; margin: 0 0 1rem 0; font-size: 0.82rem; }
p.nach-oben a { color: var(--farbe-gedaempft); text-decoration: none; }
p.nach-oben a:hover { color: var(--farbe-primaer); }
@media (max-width: 899px) {
    nav.sprungmarken { margin-top: 0; }
    nav.sprungmarken a, p.nach-oben a { min-height: 44px; }
    p.nach-oben a { display: inline-flex; align-items: center; padding: 0 0.5rem; }
    /* Klebende Kopfzeile (52 px) plus Luft. */
    section.karte[id], h3[id], tr[id] { scroll-margin-top: 4.5rem; }
}

/* ===================== Zahlungsarten (OpenCart-Muster, 04.09.2026) =====
   /operator/zahlungen: eine Zeile je Anbieter mit Status, Umgebung,
   Aktiv-Schalter und Weg in die Einstellungen; die Unterseite
   /operator/zahlungen/<anbieter> trägt die Schritt-Karte (Z8b). */
.meldung-erfolg {
    background: #dcfce7; color: #166534;
    padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem;
}
.meldung-warnung {
    background: #fef3c7; color: #92400e;
    padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem;
}
.beschreibung { color: var(--farbe-gedaempft); font-size: 0.85rem; }
.beschreibung-inline {
    color: var(--farbe-gedaempft); font-size: 0.8rem; font-weight: normal;
    text-transform: none; letter-spacing: 0; margin: 0 0.4rem;
}
.status-detail { margin-top: 0.25rem; }
.zahlungsarten td { vertical-align: top; }
.zahlungsarten td strong { font-size: 1rem; }
.zahlungsarten a.btn { white-space: nowrap; }
.zahlungsarten button[disabled] { opacity: 0.55; cursor: not-allowed; }
p.zurueck-link { margin: 0 0 1rem 0; font-size: 0.9rem; }
p.zurueck-link a { color: var(--farbe-gedaempft); text-decoration: none; }
p.zurueck-link a:hover { color: var(--farbe-primaer); }
.karte-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.karte-summary::-webkit-details-marker { display: none; }
.karte-summary::before { content: "▸"; color: var(--farbe-gedaempft); font-size: 0.9rem; }
details[open] > .karte-summary::before { content: "▾"; }
.karte-summary h2 { margin: 0; }
.unterueberschrift {
    margin: 1.2rem 0 0.4rem 0; font-size: 0.9rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--farbe-gedaempft);
}
.zustand-felder { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.9rem; margin-bottom: 0.8rem; }
@media (max-width: 720px) {
    .zahlungsarten form.inline, .zahlungsarten form.inline button, .zahlungsarten a.btn { width: 100%; }
    p.zurueck-link a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ===================== Protokoll des Stand-PCs (Support-Plan S1.6) ===================== */
.protokoll .beschreibung { color: var(--farbe-gedaempft); margin-top: 0; }
.protokoll-gemeldet { margin: 0.4rem 0 0.8rem; }
.protokoll-gemeldet.still {
    background: #fee2e2; color: #991b1b;
    padding: 0.6rem 0.8rem; border-radius: 6px;
}
.protokoll-filter, .protokoll-kennungen {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin: 0 0 0.8rem;
}
.protokoll .chip {
    display: inline-flex; align-items: center;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 999px;
    color: var(--farbe-gedaempft);
    font-size: 0.85rem;
    text-decoration: none;
}
/* Fund 5: Name des Zugangsschluessels beschriftet den Knopf, die Kennung
   steht kleiner dahinter — sie bleibt lesbar, draengt sich aber nicht vor. */
.protokoll .chip-kennung {
    margin-left: 0.4rem; font-size: 0.75rem; opacity: 0.7;
    font-family: ui-monospace, Consolas, monospace;
}
.protokoll .chip:hover, .protokoll .chip:focus { color: var(--farbe-primaer); border-color: var(--farbe-primaer); }
.protokoll .chip.aktiv { background: var(--farbe-text); color: var(--farbe-primaer-text); border-color: var(--farbe-text); }
.protokoll-zeit { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.protokoll-text { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; word-break: break-word; }
/* Je Kennung: Knopf + „zuletzt gemeldet" + Archivieren, alle in einer Reihe
   (23.09.2026: alte Installationen aus der Auswahl nehmen, S1.6). */
.protokoll-kennung-zeile {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    padding: 0.3rem 0.5rem 0.3rem 0.3rem;
    border: 1px solid var(--farbe-rahmen); border-radius: 999px;
}
.protokoll-kennung-zeile .inline { margin: 0; }
.protokoll-kennung-gemeldet { color: var(--farbe-gedaempft); font-size: 0.78rem; white-space: nowrap; }
.protokoll-archiv-hinweis { color: var(--farbe-gedaempft); font-size: 0.82rem; margin: -0.3rem 0 0.8rem; }
.protokoll-archiv-knopf { font-size: 0.78rem; padding: 0.25rem 0.6rem; }
/* Scroll-Container mit fester Hoehe: bei sehr vielen Zeilen bleibt die Karte
   handlich und die Kopfzeile sichtbar (23.09.2026). Am Handy greift darin
   weiter das Karten-Layout von `.tabelle-karten` — `thead` ist dann
   ausgeblendet, `position: sticky` also folgenlos, das Scrollen selbst
   bleibt unveraendert moeglich. */
.protokoll-tabelle-scroll { max-height: 60vh; overflow-y: auto; border: 1px solid var(--farbe-rahmen); border-radius: 8px; }
.protokoll-tabelle-scroll table { margin: 0; }
.protokoll-tabelle-scroll thead th { position: sticky; top: 0; z-index: 1; }
@media (max-width: 720px) {
    .protokoll .chip { min-height: 44px; }
}

/* ===================== Design (T2, docs/erledigt/Design-Editor.md) =============
   /operator/design: Saison-Kacheln mit Farbprobe und die Kurzfassung des
   eigenen Designs. /operator/design/eigenes: Miniaturen, Farbfelder,
   Dateiliste und die Vorschau im <iframe>. */

/* ---- Uebersicht: Kurzstand des eigenen Designs ---- */
ul.eigenes-stand {
    list-style: none; margin: 0.8rem 0 1rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
}
ul.eigenes-stand li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
ul.eigenes-stand .wort { color: var(--farbe-gedaempft); }

/* ---- Uebersicht: Saison-Kacheln mit Farbprobe ---- */
.saison-kacheln { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.saison-kacheln form.saison-kachel { margin: 0; }
.saison-kacheln button {
    flex-direction: column; align-items: stretch; gap: 0.45rem;
    padding: 0.7rem 0.9rem; min-width: 10.5rem;
}
.saison-kacheln .saison-name { font-size: 1rem; }
.saison-kacheln .saison-aktiv { font-size: 0.8rem; }
/* Drei Streifen: Grundflaeche | Saisonfarbe | Schrift. Die Werte kommen
   aus app/static/themes/<key>.css und stehen als Inline-style am <i>. */
.farbprobe {
    display: flex; height: 14px; border-radius: 4px; overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.18);
}
.farbprobe i { flex: 1 1 0; display: block; }

/* ---- Miniaturen (Logo, Hintergrund) ----
   Schachbrett aus zwei gekreuzten Verlaeufen, damit man einem PNG ansieht,
   wo es durchsichtig ist — sonst wirkt ein transparentes Logo auf weissem
   Grund schlicht weiss. */
.miniatur {
    display: inline-flex; align-items: center; justify-content: center;
    max-width: 160px; min-width: 120px; min-height: 90px;
    margin: 0 0 1rem; padding: 0.4rem;
    border: 1px solid var(--farbe-rahmen); border-radius: 8px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%),
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.miniatur img { max-width: 100%; max-height: 140px; display: block; }
.miniatur.leer-bild { color: var(--farbe-gedaempft); font-size: 0.82rem; text-align: center; }

/* ---- Farbfelder: Waehler und Textfeld nebeneinander ---- */
.farbzeile { display: flex; gap: 0.5rem; align-items: center; max-width: 30rem; }
.farbzeile input[type=color] {
    flex: 0 0 auto; width: 48px; height: 44px; padding: 2px;
    border: 1px solid var(--farbe-rahmen); border-radius: 5px;
    background: #fff; cursor: pointer;
}
.farbzeile input[type=text] {
    flex: 1 1 auto; min-width: 0;
    font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--farbe-rahmen); border-radius: 5px;
}

/* Zweites Formular einer Karte ("… entfernen") steht abgesetzt darunter. */
form.entfernen-form { margin-top: 0.8rem; }

/* ---- Variablen- und Dateiliste ---- */
.variablen-tabelle td { vertical-align: top; font-size: 0.86rem; }
.variablen-tabelle code { white-space: nowrap; }
input.url-feld {
    width: 100%; min-width: 0; box-sizing: border-box;
    font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--farbe-rahmen); border-radius: 5px;
    background: #fff;
}

/* ---- Vorschau im <iframe> ---- */
.vorschau-schalter { display: flex; gap: 0.5rem; margin: 0.8rem 0; flex-wrap: wrap; }
.vorschau-schalter button.aktiv {
    background: var(--farbe-primaer); color: var(--farbe-primaer-text);
    border-color: var(--farbe-primaer);
}
.vorschau-rahmen { overflow-x: auto; }
.vorschau-rahmen iframe {
    display: block; width: 430px; max-width: 100%; height: 700px;
    border: 1px solid var(--farbe-rahmen); border-radius: 8px;
    background: #fff;
}

@media (max-width: 720px) {
    .saison-kacheln { flex-direction: column; }
    .saison-kacheln form.saison-kachel, .saison-kacheln button { width: 100%; }
    .miniatur { max-width: 100%; }
    .farbzeile { max-width: none; }
    .farbzeile input[type=color] { min-height: 44px; }
    .vorschau-schalter button { flex: 1 1 8rem; }
    /* Volle Breite im Kartenumbruch: das URL-Feld soll sich markieren
       lassen, ohne dass die Zeile seitlich wegrutscht. */
    input.url-feld { font-size: 16px; }
}

/* Video-Anleitungen (includes/video_hilfe.html, app/videos.py) */
.video-hilfe { padding-block: 0.7rem; }
.video-hilfe details { margin: 0; }
.video-hilfe details + details { margin-top: 0.5rem; }
.video-hilfe .karte-summary { color: var(--farbe-text); font-size: 0.95rem; align-items: baseline; }
.video-hilfe-kopf { flex: 1; min-width: 0; }
.video-hilfe-dauer { color: var(--farbe-gedaempft); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.video-rahmen {
    margin-top: 0.8rem; aspect-ratio: 16 / 10; max-width: 720px; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
    border: 2px dashed var(--farbe-rahmen); border-radius: 8px; padding: 1rem; text-align: center;
}
.video-rahmen.laeuft { border: 0; padding: 0; background: #000; }
.video-rahmen iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.video-hinweis { margin: 0; max-width: 46ch; font-size: 0.82rem; color: var(--farbe-gedaempft); }
.video-link { margin: 0.4rem 0 0 0; font-size: 0.85rem; }

/* ===================== Tintenanzeige (22.09.2026) =====================
   /operator/drucker, Spalte „Gerät / Tinte", und die Tintenwarnung im
   Dashboard-Block. Vier kleine senkrechte Balken in den Tintenfarben aus
   gemeinsam/theme.css (--farbe-tinte-*); Schwellen setzt der Server
   (drucker_service.TINTE_WARNUNG_PROZENT / TINTE_KRITISCH_PROZENT) als
   Klassen tinte-warnung / tinte-kritisch. */
.tinte { display: flex; gap: 0.6rem; align-items: flex-end; }
.tinte-farbe {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 0.7rem; color: var(--farbe-gedaempft); white-space: nowrap;
}
.tinte-balken {
    display: block; position: relative; overflow: hidden;
    width: 14px; height: 32px;
    border: 1px solid var(--farbe-rahmen); border-radius: 3px;
    background: var(--farbe-bg);
}
.tinte-fuellung {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--tinte-farbe, var(--farbe-gedaempft));
}
.tinte-cyan { --tinte-farbe: var(--farbe-tinte-cyan); }
.tinte-magenta { --tinte-farbe: var(--farbe-tinte-magenta); }
.tinte-yellow { --tinte-farbe: var(--farbe-tinte-yellow); }
.tinte-black { --tinte-farbe: var(--farbe-tinte-black); }
.tinte-warnung .tinte-balken { border-color: var(--farbe-warnung); box-shadow: 0 0 0 2px #fef3c7; }
.tinte-kritisch .tinte-balken { border-color: var(--farbe-fehler); box-shadow: 0 0 0 2px #fee2e2; }
.tinte-warnung .tinte-prozent { color: var(--farbe-warnung); font-weight: 600; }
.tinte-kritisch .tinte-prozent { color: var(--farbe-fehler); font-weight: 600; }
.tinte-hinweis { margin-top: 4px; font-size: 0.8rem; font-weight: 600; }
.tinte-hinweis-warnung { color: var(--farbe-warnung); }
.tinte-hinweis-kritisch { color: var(--farbe-fehler); }
/* Gerätefehler aus <Errors> (PaperOut …): rot und fett, wie eine Störung. */
.geraet-fehler { margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: var(--farbe-fehler); }

/* Datenschutz (22.09.2026, app/templates/datenschutz.html): Suchzeile,
   Auskunftsliste und die zwei Spalten „wird gelöscht / bleibt“ der
   Löschkarte. Am Handy stapeln sich Spalten und Suchzeile. */
.datenschutz-suche { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.datenschutz-suche label { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; }
.datenschutz-suche input { width: 100%; box-sizing: border-box; font: inherit; }
.datenschutz-liste { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.5rem 0 0; }
.datenschutz-liste dt { font-weight: 600; }
.datenschutz-liste dd { margin: 0; }
.datenschutz-loeschen { border-color: #fca5a5; }
.datenschutz-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.datenschutz-spalten ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.datenschutz-spalten li { margin-bottom: 0.3rem; }
@media (max-width: 720px) {
    .datenschutz-liste { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .datenschutz-liste dd { margin-bottom: 0.5rem; }
    .datenschutz-spalten { grid-template-columns: 1fr; }
}

/* O1 (Plan Oberflaechen-nach-Rollen, 24.09.2026): Betriebsampel — fünf Chips
   in einer Flex-Reihe, am Handy umbrechend statt abgeschnitten. Farben wie
   die Badges/Warnbänder im Rest des Dashboards (kein neues Palettesystem). */
.ampel-reihe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ampel-chip {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.8rem; border-radius: 8px; font-size: 0.85rem;
    border: 1px solid var(--farbe-rahmen); text-decoration: none;
    color: inherit; line-height: 1.3;
}
a.ampel-chip:hover { border-color: var(--farbe-primaer); }
.ampel-chip-gruen   { background: #f0fdf4; }
.ampel-chip-gelb    { background: #fffbeb; }
.ampel-chip-rot     { background: #fef2f2; }
.ampel-chip-neutral { background: #f3f4f6; }
.ampel-punkt { font-size: 1rem; line-height: 1; }
.ampel-chip-gruen .ampel-punkt   { color: #166534; }
.ampel-chip-gelb .ampel-punkt    { color: #92400e; }
.ampel-chip-rot .ampel-punkt     { color: #991b1b; }
.ampel-chip-neutral .ampel-punkt { color: #6b7280; }

/* O2: "Heute in Zahlen" — Kennzahlen in einer umbrechenden Reihe, jede mit
   Zahl darüber und Beschriftung darunter (dasselbe Muster wie die
   Abrechnungs-Kennzahlenkarte, nur kompakter für die Startseite). */
.heute-zahlen { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; }
.heute-zahlen-posten { display: flex; flex-direction: column; gap: 0.1rem; min-width: 6rem; }
.heute-zahlen-wert { font-size: 1.4rem; font-weight: 700; }
.heute-zahlen-label { font-size: 0.8rem; color: var(--farbe-gedaempft); }
.heute-zahlen-posten a { color: inherit; text-decoration: none; }
.heute-zahlen-posten a:hover { color: var(--farbe-primaer); }

/* O4: verdichteter Drucker-Block — nur Störungen; sonst eine Zeile. */
.drucker-ruhig { color: var(--farbe-gedaempft); font-size: 0.9rem; }

/* Keks-Vorschau V1 (25.09.2026): der Bereich steht am Ende der Bearbeitungs-
   Klappe, direkt ueber dem roten "Deaktivieren"-Knopf der Produktzeile —
   Trennlinien und Abstand, damit "Foto entfernen" nicht daran klebt. */
.keks-block {
    margin: 0.9rem 0 1.1rem;
    padding: 0.8rem 0 0.9rem;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

/* Drucker: abgeschaltete Geraete eingeklappt (Befund Volodymyr 01.10.2026) */
.drucker-abgeschaltet { margin-top: 1rem; }
.drucker-abgeschaltet > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; color: var(--farbe-gedaempft); }
/* Menü-Zähler offener Aufträge und Hinweis „Neue Bestellung" (Befund Volodymyr 01.10.2026) */
.nav-badge { margin-left: auto; min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--farbe-primaer); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.4rem; text-align: center; }
.nav-badge[hidden] { display: none; }
.operator-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; max-width: calc(100vw - 2rem); }
.operator-toast { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 8px; background: #1f2937; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.operator-toast a { color: #fff; font-weight: 600; }
.operator-toast-zu { background: transparent; border: 0; color: #fff; padding: 0.2rem 0.4rem; min-height: 0; cursor: pointer; }
/* Wunsch Volodymyr 01.10.2026: Tagesabschluss mit Zeitraum-Umschalter und
   einfachem Balkendiagramm (nur HTML/CSS, keine Bibliothek). */
.zeitraum-umschalter { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.btn.zeitraum-aktiv { background: var(--farbe-text); color: #fff; border-color: var(--farbe-text); }
.zeitraum-balken { display: flex; align-items: flex-end; gap: 2px; height: 9rem; margin-bottom: 1rem; }
.zeitraum-balken-spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.zeitraum-balken-flaeche { flex: 1 1 auto; display: flex; align-items: flex-end; }
.zeitraum-balken-fuell { width: 100%; background: var(--farbe-text); min-height: 1px; border-radius: 2px 2px 0 0; }
.zeitraum-balken-label { font-size: 0.65rem; text-align: center; color: var(--farbe-gedaempft); }
/* Prüfung 01.10.2026: am Handy liefen 31 Tageszahlen zu „0102030405…" zusammen —
   dort nur jeden fünften Tag beschriften (Tabelle darunter hat alle). */
@media (max-width: 640px) {
    .zeitraum-balken.viele .zeitraum-balken-spalte:not(:nth-child(5n+1)) .zeitraum-balken-label { visibility: hidden; }
}

/* ---- Event-Vorlagen (/operator/design) und Rohling-Katalog (/operator/produkte) ---- */
.vorlage-wahl, .rohling-wahl {
    display: grid; gap: 0.6rem; margin: 1rem 0;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.vorlage-kachel, .rohling-kachel {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.7rem 0.8rem; border: 1px solid var(--farbe-rahmen); border-radius: 8px;
    background: #fff; cursor: pointer; font-weight: normal;
}
.vorlage-kachel:has(input:checked), .rohling-kachel:has(input:checked) {
    border-color: var(--farbe-primaer); box-shadow: 0 0 0 2px var(--farbe-primaer);
}
.vorlage-kachel input, .rohling-kachel input { margin-top: 0.25rem; width: auto; }
.vorlage-kachel > span, .rohling-kachel > span { display: flex; flex-direction: column; gap: 0.2rem; }
.rohling-kachel img, .rohling-kachel .rohling-leer {
    width: 64px; height: 64px; flex: none; border-radius: 6px; object-fit: cover; background: #eee;
}
.vorlage-felder { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.8rem; }
.vorlage-felder label { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; }
.vorlage-liste li { margin-bottom: 0.7rem; }
.vorlage-liste ul { margin-top: 0.3rem; }
.vorlage-warnung { color: var(--farbe-warnung); }
.vorlage-knoepfe { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* Demo-Instanz (config.DEMO): Band oben im Dashboard, siehe includes/demo_band.html.
   Umbruch statt Breite: bei 390 px stehen Text und Knoepfe untereinander. */
.demo-band {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
    background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc;
    border-radius: 6px; padding: 0.6rem 0.9rem; margin-bottom: 1rem;
    font-size: 0.9rem;
}
.demo-band p { margin: 0; }
.demo-band-text { flex: 1 1 18rem; min-width: 0; }
.demo-band-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.demo-band-aktionen form { margin: 0; }
.demo-band-hinweis { flex: 1 1 100%; font-weight: 600; }
/* Zugang der Demo auf der Login-Seite */
.demo-zugang {
    background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc;
    border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem;
}
.demo-zugang p { margin: 0 0 0.5rem 0; }
.demo-zugang code { background: #fff; padding: 0.1rem 0.35rem; border-radius: 4px; }
.demo-zugang form { margin: 0.6rem 0 0 0; }