/* Schlichtes Grundlayout. F-14: zuerst mobil, dann breiter. */

:root {
    --grund: #f7f7f5;
    --flaeche: #ffffff;
    --text: #1c1c1a;
    --gedaempft: #5f5f58;
    --rand: #dcdcd6;
    --akzent: #2f6f4f;
    /* Verweise: eigene Farbe statt Browser-Blau und -Lila — das war auf dem
       dunklen Grund kaum zu lesen. Kontrast zum Grund über 7:1. */
    --verweis: #1a5c9e;
    --verweis-hover: #0f3f70;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #17181a;
        --flaeche: #1f2124;
        --text: #ececea;
        --gedaempft: #a3a39c;
        --rand: #34363a;
        --akzent: #6fbf95;
        --verweis: #8ab4f8;
        --verweis-hover: #c2d8fc;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.huelle {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

h1 { font-size: 1.5rem; margin: 0 0 .75rem; }

/* Besuchte Verweise behalten die Farbe: Ein Dashboard schlägt man täglich
   dieselben Seiten auf, ein Farbwechsel sagt da nichts. */
a {
    color: var(--verweis);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: .18em;
}

a:hover {
    color: var(--verweis-hover);
    text-decoration-color: currentColor;
}

.hinweis {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-left: 3px solid var(--akzent);
    border-radius: .4rem;
    padding: .8rem 1rem;
}

code {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: .25rem;
    padding: .05rem .3rem;
    font-size: .9em;
}

/* Tabellen müssen auf dem Telefon lesbar bleiben: quer scrollen statt
   die Seite zu sprengen (F-14). */
.tabelle-huelle { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--rand); text-align: left; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td.zahl, td.datum { white-space: nowrap; }

/* Mehrere kleine Formulare in einer Tabellenzelle, untereinander. Die Zelle
   selbst bleibt eine Zelle — als Flexbox verlöre die Zeile ihre Linie. */
.zellaktionen { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.zellaktionen form { margin: 0; }
td .zellaktionen form + form { margin-left: 0; }

/* --- Kopfleiste (nur für angemeldete Benutzer) --------------------------- */

.kopfleiste {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}

.kopfleiste-inhalt {
    display: flex;
    align-items: center;
    gap: .5rem 1.25rem;
    flex-wrap: wrap;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.marke {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.01em;
}

/* Hauptmenü: Gruppen als Aufklappmenüs (<details>), ohne Skript bedienbar. */
.navigation { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; flex: 1 1 auto; }

.menuepunkt {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .7rem;
    border-radius: .4rem;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.menuepunkt::-webkit-details-marker { display: none; }
summary.menuepunkt::after {
    content: "";
    width: .4rem;
    height: .4rem;
    margin-left: .15rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-.12rem) rotate(45deg);
    opacity: .6;
}
.menue[open] > summary.menuepunkt::after { transform: translateY(.08rem) rotate(-135deg); }
.menuepunkt:hover,
.menue[open] > .menuepunkt { background: var(--grund); color: var(--text); }
.menuepunkt.hier { color: var(--akzent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); border-radius: .4rem .4rem 0 0; }

.menue { position: relative; }
.menue-liste {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 30;
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    padding: .35rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: .55rem;
    box-shadow: 0 10px 30px rgb(0 0 0 / .18);
}
.menue-liste a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .45rem .7rem;
    border-radius: .35rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.menue-liste a:hover,
.menue-liste a:focus-visible { background: var(--grund); color: var(--verweis); }

/* Schmal: Menüs klappen in die Seite statt darüber. */
@media (max-width: 720px) {
    /* Zwei Spalten statt sechs Zeilen; ein offenes Menü nimmt die volle Breite. */
    .navigation { order: 3; flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .menue[open] { grid-column: 1 / -1; padding-bottom: .3rem; }
    /* Jede zweite Datumsangabe entfällt, sonst stoßen sie aneinander. */
    .saeulen-x .nur-breit { visibility: hidden; }
    .menue-liste { position: static; box-shadow: none; margin-top: .2rem; min-width: 0; }
    .kopfleiste { position: static; }
}

.abmelden { display: flex; align-items: center; gap: .6rem; margin: 0; }
.benutzername { color: var(--text); font-size: .9rem; text-decoration: none; }
.benutzername:hover { color: var(--text); text-decoration: underline; }

/* --- Meldungen ----------------------------------------------------------- */

.meldung {
    border: 1px solid var(--rand);
    border-left: 3px solid var(--akzent);
    border-radius: .4rem;
    padding: .8rem 1rem;
    background: var(--flaeche);
}

.meldung.fehler { border-left-color: #b3261e; }
.meldung.warnung { border-left-color: #b8860b; }

@media (prefers-color-scheme: dark) {
    .meldung.fehler { border-left-color: #f2b8b5; }
    .meldung.warnung { border-left-color: #d9a441; }
}

/* --- Formulare ----------------------------------------------------------- */

.anmeldung { max-width: 22rem; margin: 3rem auto 0; }

.formular { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; }

.formular label {
    font-size: .85rem;
    color: var(--gedaempft);
    margin-top: .6rem;
}

.formular input {
    font: inherit;
    padding: .5rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    background: var(--flaeche);
    color: var(--text);
}

.formular input:focus-visible,
.knopf:focus-visible,
.knopf-flach:focus-visible,
a:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

.knopf {
    font: inherit;
    margin-top: 1.2rem;
    padding: .55rem 1rem;
    border: 1px solid var(--akzent);
    border-radius: .3rem;
    background: var(--akzent);
    color: var(--flaeche);
    cursor: pointer;
}

.knopf-flach {
    font: inherit;
    font-size: .9rem;
    padding: .3rem .7rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

a.knopf { display: inline-block; text-decoration: none; }
a.knopf:hover { color: var(--flaeche); }
a.knopf-flach:hover { color: var(--verweis); border-color: var(--verweis); }

h2 { font-size: 1.15rem; margin-top: 2rem; }
h3 { font-size: 1rem; margin-top: 1.5rem; }

/* --- Stammdaten ---------------------------------------------------------- */

.seitenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.seitenkopf h1,
.seitenkopf h2 { margin: 0; }
.seitenkopf form .knopf { margin-top: 0; }

/* Mehrere Knöpfe mit je eigenem Formular nebeneinander. */
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.knopfreihe form { margin: 0; }
.knopfreihe .knopf { margin-top: 0; }


.zaehler {
    display: inline-block;
    min-width: 1.15rem;
    margin-left: .25rem;
    padding: 0 .3rem;
    border-radius: .6rem;
    background: var(--akzent);
    color: var(--flaeche);
    font-size: .72rem;
    line-height: 1.2rem;
    text-align: center;
    vertical-align: text-top;
}

/* Formulare */

.formular select,
.formular textarea {
    font: inherit;
    padding: .5rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    background: var(--flaeche);
    color: var(--text);
}

.formular.breit { max-width: 34rem; }

/* Kleine Anfügeformulare stehen nebeneinander statt untereinander. */
.formular.zeile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .4rem .9rem;
    align-items: end;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--rand);
    border-radius: .4rem;
    background: var(--flaeche);
}

/* Ein Feld: Beschriftung, Eingabe, darunter Hinweis und Fehler. Die
   Eingaben stehen so auf einer Höhe, auch wenn nur manche einen Hinweis
   haben. Außerhalb der Zeilenformulare ist der Block unsichtbar. */
.feld { display: contents; }
.formular.zeile { align-items: start; }
.formular.zeile .feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.formular.zeile .feld .feldhinweis { order: 3; }
.formular.zeile .feld .feldfehler { order: 4; }
.formular.zeile label { margin-top: 0; }
/* Auf Höhe der Eingaben: eine Beschriftungszeile tiefer. */
.formular.zeile .knopf,
.formular.zeile .kasten { margin-top: 1.62rem; align-self: start; }

.feldfehler {
    color: #b3261e;
    font-size: .85rem;
}

.feldhinweis {
    color: var(--gedaempft);
    font-size: .82rem;
    line-height: 1.4;
}

.feldhinweis.breit { max-width: 44rem; margin: .3rem 0 1rem; }

@media (prefers-color-scheme: dark) {
    .feldfehler { color: #f2b8b5; }
}

.kasten {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--text);
}

.kasten input { width: auto; }

/* Ein Rezept auf der Produktseite (F-79) */

.rezept {
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--flaeche);
    padding: .5rem 1rem 1rem;
    margin: 1rem 0;
}

.rezept h3 { margin-top: .5rem; }

/* Zustände in Tabellen */

tr.stillgelegt td { color: var(--gedaempft); }

.warnend {
    color: #9c3a2c;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .warnend { color: #e08a76; }
}

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

.zuordnen { display: inline-flex; gap: .35rem; align-items: center; }
.zuordnen select,
.zuordnen input { font: inherit; padding: .25rem; border: 1px solid var(--rand); border-radius: .25rem;
                  background: var(--flaeche); color: var(--text); color-scheme: light dark; }

.knopf-flach.leise { color: var(--gedaempft); border-color: transparent; }

.gefahr { margin-top: 2.5rem; }

.schrittfolge { max-width: 44rem; padding-left: 1.2rem; }
.schrittfolge li { margin: .4rem 0; }

/* --- Aktualisierungsseite ------------------------------------------------ */

.dateiliste { max-width: 40rem; padding-left: 1.2rem; }
.dateiliste li { margin: .25rem 0; }
.dateiliste.warnend code { color: inherit; }

.befehl {
    max-width: 44rem;
    padding: .8rem 1rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-left: 3px solid var(--rand);
    border-radius: .3rem;
    overflow-x: auto;
    font-size: .88rem;
    line-height: 1.7;
}

/* --- Auswertung ---------------------------------------------------------- */

.zeitraumwahl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.2rem 0;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--rand);
}

.zeitknoepfe { display: flex; gap: .3rem; flex-wrap: wrap; }

.zeitknopf {
    padding: .3rem .7rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
}

.zeitknopf:hover { color: var(--verweis); border-color: var(--verweis); }

.zeitknopf.hier,
.zeitknopf.hier:hover { background: var(--akzent); border-color: var(--akzent); color: var(--flaeche); }

.zeitform { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: .88rem; }
.zeitform label { color: var(--gedaempft); }
.zeitform input {
    font: inherit; padding: .25rem .4rem;
    border: 1px solid var(--rand); border-radius: .25rem;
    background: var(--flaeche); color: var(--text);
}

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    /* Trennlinien rechts und unten an jeder Kachel; was am Rand übersteht,
       schneidet overflow ab. Ein leerer Platz in der letzten Zeile bleibt
       so Fläche statt grauer Kachel. */
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: .4rem;
    overflow: hidden;
    margin: 1.2rem 0;
}

.kennzahlen > div { padding: .8rem .9rem; box-shadow: 1px 0 0 var(--rand), 0 1px 0 var(--rand); }
.kennzahlen dt { font-size: .8rem; color: var(--gedaempft); margin-bottom: .2rem; }
.kennzahlen dd {
    margin: 0;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.vergleich { font-size: .8rem; color: var(--gedaempft); margin-left: .25rem; }

.ampel {
    display: inline-block;
    width: .7rem; height: .7rem;
    border-radius: 50%;
    vertical-align: middle;
}

.ampel.gruen { background: #2f6f4f; }
.ampel.gelb  { background: #b8860b; }
.ampel.rot   { background: #9c3a2c; }

@media (prefers-color-scheme: dark) {
    .ampel.gruen { background: #6fbf95; }
    .ampel.gelb  { background: #d9a441; }
    .ampel.rot   { background: #e08a76; }
}

.kopfknoepfe { display: flex; gap: .4rem; }

/* --- Störungen, Prüfliste, Datenqualität (A6, A9) ----------------------- */

.ampel.grau { background: #8b8b84; }

@media (prefers-color-scheme: dark) {
    .ampel.grau { background: #6b6d72; }
}

/* Filterzeile über einer Liste: dieselbe Optik wie die Zeitraumwahl, damit
   sich beide nicht wie zwei verschiedene Bedienkonzepte anfühlen. */
.filterzeile {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 1.2rem 0;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--rand);
}

.filterzeile label { display: block; font-size: .8rem; color: var(--gedaempft); }
.filterzeile select {
    font: inherit; padding: .25rem .4rem;
    border: 1px solid var(--rand); border-radius: .25rem;
    background: var(--flaeche); color: var(--text);
}

.filterknoepfe { display: flex; gap: .3rem; flex-wrap: wrap; margin: 1rem 0; }

/* Mehrere Formulare je Zeile — sie sollen untereinander stehen, nicht in
   einer Zeile zerfließen, sobald eine Notiz dazukommt. */
td.aktionen { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
td.aktionen input[type="text"] {
    font: inherit; padding: .25rem .4rem; min-width: 12rem;
    border: 1px solid var(--rand); border-radius: .25rem;
    background: var(--flaeche); color: var(--text);
}

/* Schwere als linker Balken statt als Flächenfarbe: die Tabelle bleibt
   lesbar, die Dringlichkeit trotzdem sichtbar. */
tr.stoerung-kritisch td:first-child,
tr.befund-fehler td:first-child { box-shadow: inset .2rem 0 0 #9c3a2c; }

tr.stoerung-warnung td:first-child,
tr.befund-warnung td:first-child { box-shadow: inset .2rem 0 0 #b8860b; }

@media (prefers-color-scheme: dark) {
    tr.stoerung-kritisch td:first-child,
    tr.befund-fehler td:first-child { box-shadow: inset .2rem 0 0 #e08a76; }

    tr.stoerung-warnung td:first-child,
    tr.befund-warnung td:first-child { box-shadow: inset .2rem 0 0 #d9a441; }
}

tfoot th, tfoot td {
    border-top: 2px solid var(--rand);
    font-weight: 600;
}

/* --- Alarmregeln (A16) --------------------------------------------------- */

/* Eine Gruppe von Kästchen im Formular — der Automatenfilter. Ohne Rahmen
   ließe sich nicht erkennen, wo die Auswahl beginnt und wo sie endet. */
.feldgruppe {
    margin: 1rem 0 0;
    padding: .8rem .9rem 1rem;
    border: 1px solid var(--rand);
    border-radius: .4rem;
}

.feldgruppe legend { padding: 0 .3rem; font-size: .85rem; color: var(--gedaempft); }

.kastenliste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .2rem .8rem;
    margin-top: .6rem;
}

.kastenliste .kasten { margin: 0; }

/* --- Zwei-Faktor-Anmeldung (A10) ----------------------------------------- */

/* Das Geheimnis wird abgetippt. Umbruch an jeder Stelle, damit die Zeile auf
   dem Telefon nicht aus dem Bild läuft, und feste Zeichenbreite, damit sich
   0 und O unterscheiden lassen. */
.geheimnis {
    display: inline-block;
    max-width: 100%;
    padding: .4rem .6rem;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: .3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

/* Ein neuer Briefing-Token: ein Feld zum Markieren und Kopieren, so breit
   wie nötig — 64 Zeichen am Stück. */
.token-feld { width: 100%; max-width: 44rem; font-size: .9rem; color: var(--text); }
.neuer-token { margin: 1rem 0 1.5rem; }
.neuer-token label { display: block; margin-bottom: .3rem; color: var(--gedaempft); font-size: .85rem; }
.neuer-token .befehl { white-space: pre-wrap; overflow-wrap: anywhere; }

.anleitung { max-width: 44rem; padding-left: 1.2rem; }
.anleitung li { margin-bottom: 1.1rem; }

/* Gruppenüberschrift in einer Tabelle — der Lieferant im Bestellvorschlag,
   danach wird bestellt (F-77). */
tr.gruppenzeile th {
    text-align: left;
    padding-top: 1rem;
    color: var(--gedaempft);
    font-size: .85rem;
    border-bottom: 1px solid var(--rand);
}

/* --- Druckansicht (F-77) -------------------------------------------------- */

/*
 * Gedacht für die Bestellliste: ausdrucken und zum Großhändler mitnehmen.
 * Sie funktioniert auf jeder Seite, aber dort ist sie gemeint.
 *
 * Der Grundsatz: Alles verschwindet, was man auf Papier nicht anklicken kann.
 * Navigation, Knöpfe, Filter und Formulare sind auf einem Ausdruck nur
 * Tinte — was bleibt, sind die Zahlen und die Überschrift, die sagt, wovon
 * sie stammen.
 */
@media print {
    /* Papier ist weiß, und Umkehrung frisst Toner. Für den Druck gilt
       deshalb immer die helle Palette, unabhängig vom Gerät. */
    :root {
        --grund: #ffffff;
        --flaeche: #ffffff;
        --text: #000000;
        --gedaempft: #444444;
        --rand: #999999;
        --akzent: #000000;
        --verweis: #000000;
        --verweis-hover: #000000;
    }

    body { background: #fff; color: #000; font-size: 10pt; }

    .kopfleiste,
    .zeitraumwahl,
    .filterzeile,
    .filterknoepfe,
    .kopfknoepfe,
    .abmelden,
    .knopf,
    .knopf-flach,
    form,
    td.aktionen,
    th:empty {
        display: none !important;
    }

    .huelle { max-width: none; padding: 0; }

    /* Ohne Rollbereich: Was quer nicht passt, gehört umbrochen und nicht
       abgeschnitten — auf Papier lässt sich nichts scrollen. */
    .tabelle-huelle { overflow: visible; border: 0; }

    table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
    th, td { border: 1px solid #999; padding: .2rem .35rem; }

    /* Bei mehrseitigen Listen wiederholt sich die Kopfzeile. Ohne das weiß
       man auf Seite zwei nicht mehr, welche Spalte welche ist. */
    thead { display: table-header-group; }
    tr, .kennzahlen > div { break-inside: avoid; }

    /* Der Lieferant im Bestellvorschlag — er darf nicht allein am Seitenende
       stehen, sonst steht die Überschrift ohne ihre Zeilen. */
    tr.gruppenzeile th { break-after: avoid; font-weight: 700; }

    .kennzahlen { break-inside: avoid; }

    /* Hinweise, die zum Verständnis der Zahlen gehören, bleiben. Reine
       Bedienhinweise stehen in Formularen und sind damit ohnehin weg. */
    .feldhinweis { color: #444; font-size: 8.5pt; }

    .meldung { border: 1px solid #999; padding: .3rem .5rem; }

    /* Die Ampel ist eine Farbfläche; im Schwarzweißdruck wäre sie ein Punkt
       ohne Aussage. Der title-Text steht im Markup und genügt am Bildschirm. */
    .ampel { display: none; }

    a { color: #000; text-decoration: none; }

    /* Ein Ausdruck ohne Datum ist in zwei Wochen wertlos. */
    main.huelle::after {
        content: "Automaten-Dashboard · gedruckt am " attr(data-gedruckt);
        display: block;
        margin-top: 1.5rem;
        padding-top: .4rem;
        border-top: 1px solid #999;
        font-size: 8pt;
        color: #444;
    }
}

/* F-31: Eine Stunde ohne Verkauf ist eine Aussage und keine Lücke — sie
   bleibt in der Tabelle, tritt aber zurück. */
tr.gedaempfte-zeile td { color: var(--gedaempft); }

/* F-31: Wochentag-und-Stunde-Raster. Die Fläche trägt den Wert, nicht eine
   Zahl — 168 Zellen mit Beträgen liest niemand. Der genaue Wert steht im
   title-Attribut und in den beiden Tabellen darüber. */
.raster {
    border-collapse: separate;
    border-spacing: 1px;
    font-size: .7rem;
    width: 100%;
}

.raster th {
    color: var(--gedaempft);
    font-weight: 500;
    padding: 0 .15rem;
    text-align: center;
    white-space: nowrap;
}

.raster th[scope="row"] { text-align: right; padding-right: .4rem; }

.raster td {
    /* Der Anteil am stärksten Feld, von 0 bis 1, in zehn Stufen. */
    background: rgb(from var(--akzent) r g b / var(--anteil, 0));
    border-radius: 2px;
    height: 1.25rem;
    min-width: .9rem;
    padding: 0;
}

/* Ohne Unterstützung für relative Farben bleibt der Akzent flächig; die
   Abstufung geht dann über die Deckkraft. */
@supports not (background: rgb(from red r g b / 50%)) {
    .raster td, .rasterlegende span { background: var(--akzent); opacity: var(--anteil, 1); }
}

.raster td.leer { background: var(--rand); opacity: .35; }

.stufe-1  { --anteil: .1; }  .stufe-2 { --anteil: .2; }  .stufe-3 { --anteil: .3; }
.stufe-4  { --anteil: .4; }  .stufe-5 { --anteil: .5; }  .stufe-6 { --anteil: .6; }
.stufe-7  { --anteil: .7; }  .stufe-8 { --anteil: .8; }  .stufe-9 { --anteil: .9; }
.stufe-10 { --anteil: 1; }

.rasterlegende {
    align-items: center;
    color: var(--gedaempft);
    display: flex;
    font-size: .75rem;
    gap: .4rem;
    margin: .5rem 0 0;
}

.rasterlegende span {
    background: rgb(from var(--akzent) r g b / var(--anteil, 1));
    border-radius: 2px;
    display: inline-block;
    height: .75rem;
    width: 1.5rem;
}

/* --- Diagramme ----------------------------------------------------------- */

/*
 * Die Farben der Datenreihen, fest in dieser Reihenfolge vergeben (nie nach
 * Rang): auf Farbfehlsichtigkeit geprüft, für hell und dunkel getrennt
 * abgestuft. Gelb und Rosa sind auf Weiß kontrastarm — deshalb steht jeder
 * Wert auch als Text in der Legende und in der Tabelle darunter.
 */
:root {
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --serie-3: #1baf7a;
    --serie-4: #eda100;
    --serie-5: #e87ba4;
    --serie-6: #008300;
    --serie-andere: #9a9a93;
    --raster: #ebebe6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --serie-1: #3987e5;
        --serie-2: #d95926;
        --serie-3: #199e70;
        --serie-4: #c98500;
        --serie-5: #d55181;
        --serie-6: #008300;
        --serie-andere: #6b6d72;
        --raster: #2a2c30;
    }
}

/* Raster aus Karten: zwei nebeneinander, auf dem Telefon untereinander. */
.diagramme {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
    gap: 1rem;
    margin: 1.2rem 0;
}

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: .5rem;
    padding: .9rem 1rem .8rem;
    min-width: 0;
}

.karte.breit { grid-column: 1 / -1; }

.karte > h2,
.karte > h3 { margin: 0 0 .15rem; font-size: 1rem; }

.karte-unterzeile { margin: 0 0 .6rem; color: var(--gedaempft); font-size: .82rem; }

.karte-leer { color: var(--gedaempft); font-size: .9rem; margin: .6rem 0; }

/* Auf dem Bildschirm unsichtbar, für Vorleseprogramme da. */
.unsichtbar {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.diagramm { margin: 0; }

/* Säulen über die Zeit: links die Achse, rechts die Fläche, darunter die Tage. */
.saeulendiagramm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 11rem auto;
    column-gap: .5rem;
    margin-top: 1.4rem;
}

.saeulen-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Die Beschriftung sitzt mittig auf ihrer Linie. */
    margin: -.45rem 0;
    color: var(--gedaempft);
    font-size: .72rem;
    line-height: .9rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.saeulen-flaeche {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--rand);
    /* Haarfeine Rasterlinien in so vielen Stufen, wie die Achse hat. */
    background-image: repeating-linear-gradient(to bottom, var(--raster) 0 1px, transparent 1px 100%);
}
.saeulen-flaeche.raster-1 { background-size: 100% 100%; }
.saeulen-flaeche.raster-2 { background-size: 100% 50%; }
.saeulen-flaeche.raster-3 { background-size: 100% 33.333%; }
.saeulen-flaeche.raster-4 { background-size: 100% 25%; }
.saeulen-flaeche.raster-5 { background-size: 100% 20%; }

/* Eine Spalte je Tag; die ganze Spalte ist Trefferfläche, nicht nur die Säule. */
.saeulen-spalte {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    outline: none;
}
.saeulen-spalte:hover,
.saeulen-spalte:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); }

.saeule {
    position: relative;
    width: 70%;
    max-width: 24px;
    min-width: 2px;
    border-radius: 4px 4px 0 0;
}

.saeulen-wert {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: .15rem;
    font-size: .75rem;
    white-space: nowrap;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Ein Tag ohne Meldung: keine Null, sondern eine Lücke mit Markierung. */
.ohne-meldung {
    width: 40%;
    max-width: 10px;
    height: 2px;
    margin-bottom: 3px;
    background: var(--serie-andere);
    border-radius: 1px;
}

.saeulen-x {
    grid-column: 2;
    display: flex;
    padding-top: .3rem;
    color: var(--gedaempft);
    font-size: .72rem;
}
.saeulen-x span { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; white-space: nowrap; }

/* Waagerechte Balken: Name, Spur, Wert. */
.balkendiagramm { list-style: none; margin: 0; padding: 0; }

.balkenzeile {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .28rem .3rem;
    border-radius: .3rem;
    color: var(--text);
    text-decoration: none;
    font-size: .88rem;
    outline: none;
}
a.balkenzeile:hover,
.balkenzeile:focus-visible { background: var(--grund); }
a.balkenzeile:hover .balken-name,
a.balkenzeile:focus-visible .balken-name { color: var(--verweis); text-decoration: underline; }

.balken-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken-spur { display: block; border-left: 1px solid var(--rand); }
.balken { display: block; height: 14px; min-width: 2px; border-radius: 0 4px 4px 0; }
.balken.b-0 { min-width: 0; }
.balken-wert { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 5.5rem; }

/* Anteile über die volle Breite; 2 px Abstand zwischen den Teilen. */
.anteilsbalken { display: flex; gap: 2px; height: 18px; margin-top: .3rem; }
.anteilsbalken > span { flex: 0 1 auto; min-width: 2px; height: 100%; }
.anteilsbalken > span:first-child { border-radius: 4px 0 0 4px; }
.anteilsbalken > span:last-child { border-radius: 0 4px 4px 0; }
.anteilsbalken > span:only-child { border-radius: 4px; }

/* Flächen der Reihen (HTML-Marken) */
.saeule.serie-1, .balken.serie-1, .anteilsbalken .serie-1 { background: var(--serie-1); }
.anteilsbalken .serie-2 { background: var(--serie-2); }
.anteilsbalken .serie-3 { background: var(--serie-3); }
.anteilsbalken .serie-4 { background: var(--serie-4); }
.anteilsbalken .serie-5 { background: var(--serie-5); }
.anteilsbalken .serie-6 { background: var(--serie-6); }

/* Ring (SVG) */
svg.diagramm { display: block; height: auto; }
.diagramm text { font-family: inherit; }
.diagramm .serie-1 { fill: var(--serie-1); }
.diagramm .serie-2 { fill: var(--serie-2); }
.diagramm .serie-3 { fill: var(--serie-3); }
.diagramm .serie-4 { fill: var(--serie-4); }
.diagramm .serie-5 { fill: var(--serie-5); }
.diagramm .serie-6 { fill: var(--serie-6); }
.diagramm .andere  { fill: var(--serie-andere); }
.diagramm .serie-1-strich { stroke: var(--serie-1); }
.diagramm .andere-strich  { stroke: var(--serie-andere); }

/* 2 px Abstand zwischen den Ringteilen, in der Farbe der Karte. */
.diagramm .ring-teil { stroke: var(--flaeche); stroke-width: 2; stroke-linejoin: round; }
.diagramm .ring-mitte { fill: var(--text); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.diagramm .datenpunkt { outline: none; }
.diagramm.ring .datenpunkt:hover path,
.diagramm.ring .datenpunkt:focus-visible path { opacity: .8; }

/* Der Ring neben seiner Legende; schmal untereinander. */
.ring-mit-legende {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.ring-mit-legende svg.diagramm { flex: 0 0 9.5rem; width: 9.5rem; }
.ring-mit-legende .legende { flex: 1 1 12rem; }

.legende {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .86rem;
}

.legende li {
    display: grid;
    grid-template-columns: .75rem minmax(0, 1fr) auto 3.6rem;
    align-items: center;
    gap: .5rem;
    padding: .2rem 0;
    border-bottom: 1px solid var(--raster);
}

.legende li:last-child { border-bottom: 0; }

.legende .farbe { width: .75rem; height: .75rem; border-radius: 2px; }
.legende .farbe.serie-1 { background: var(--serie-1); }
.legende .farbe.serie-2 { background: var(--serie-2); }
.legende .farbe.serie-3 { background: var(--serie-3); }
.legende .farbe.serie-4 { background: var(--serie-4); }
.legende .farbe.serie-5 { background: var(--serie-5); }
.legende .farbe.serie-6 { background: var(--serie-6); }
.legende .farbe.andere  { background: var(--serie-andere); }

.legende-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legende-wert,
.legende-anteil { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legende-anteil { color: var(--gedaempft); }

/* Unter einem Anteilsbalken: die Teile nebeneinander. */
.legende.waagerecht { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin-top: .5rem; }
.legende.waagerecht li { grid-template-columns: .75rem auto auto auto; border: 0; }

svg.diagramm.anteile { margin-top: .3rem; }

/* Längen in ganzen Prozent (Diagramm::prozentKlasse). Als Klassen, weil
   die Content-Security-Policy keine style-Attribute zulässt. */
.b-0{width:0%} .b-1{width:1%} .b-2{width:2%} .b-3{width:3%} .b-4{width:4%} .b-5{width:5%} .b-6{width:6%} .b-7{width:7%} .b-8{width:8%} .b-9{width:9%}
.b-10{width:10%} .b-11{width:11%} .b-12{width:12%} .b-13{width:13%} .b-14{width:14%} .b-15{width:15%} .b-16{width:16%} .b-17{width:17%} .b-18{width:18%} .b-19{width:19%}
.b-20{width:20%} .b-21{width:21%} .b-22{width:22%} .b-23{width:23%} .b-24{width:24%} .b-25{width:25%} .b-26{width:26%} .b-27{width:27%} .b-28{width:28%} .b-29{width:29%}
.b-30{width:30%} .b-31{width:31%} .b-32{width:32%} .b-33{width:33%} .b-34{width:34%} .b-35{width:35%} .b-36{width:36%} .b-37{width:37%} .b-38{width:38%} .b-39{width:39%}
.b-40{width:40%} .b-41{width:41%} .b-42{width:42%} .b-43{width:43%} .b-44{width:44%} .b-45{width:45%} .b-46{width:46%} .b-47{width:47%} .b-48{width:48%} .b-49{width:49%}
.b-50{width:50%} .b-51{width:51%} .b-52{width:52%} .b-53{width:53%} .b-54{width:54%} .b-55{width:55%} .b-56{width:56%} .b-57{width:57%} .b-58{width:58%} .b-59{width:59%}
.b-60{width:60%} .b-61{width:61%} .b-62{width:62%} .b-63{width:63%} .b-64{width:64%} .b-65{width:65%} .b-66{width:66%} .b-67{width:67%} .b-68{width:68%} .b-69{width:69%}
.b-70{width:70%} .b-71{width:71%} .b-72{width:72%} .b-73{width:73%} .b-74{width:74%} .b-75{width:75%} .b-76{width:76%} .b-77{width:77%} .b-78{width:78%} .b-79{width:79%}
.b-80{width:80%} .b-81{width:81%} .b-82{width:82%} .b-83{width:83%} .b-84{width:84%} .b-85{width:85%} .b-86{width:86%} .b-87{width:87%} .b-88{width:88%} .b-89{width:89%}
.b-90{width:90%} .b-91{width:91%} .b-92{width:92%} .b-93{width:93%} .b-94{width:94%} .b-95{width:95%} .b-96{width:96%} .b-97{width:97%} .b-98{width:98%} .b-99{width:99%}
.b-100{width:100%}
.h-0{height:0%} .h-1{height:1%} .h-2{height:2%} .h-3{height:3%} .h-4{height:4%} .h-5{height:5%} .h-6{height:6%} .h-7{height:7%} .h-8{height:8%} .h-9{height:9%}
.h-10{height:10%} .h-11{height:11%} .h-12{height:12%} .h-13{height:13%} .h-14{height:14%} .h-15{height:15%} .h-16{height:16%} .h-17{height:17%} .h-18{height:18%} .h-19{height:19%}
.h-20{height:20%} .h-21{height:21%} .h-22{height:22%} .h-23{height:23%} .h-24{height:24%} .h-25{height:25%} .h-26{height:26%} .h-27{height:27%} .h-28{height:28%} .h-29{height:29%}
.h-30{height:30%} .h-31{height:31%} .h-32{height:32%} .h-33{height:33%} .h-34{height:34%} .h-35{height:35%} .h-36{height:36%} .h-37{height:37%} .h-38{height:38%} .h-39{height:39%}
.h-40{height:40%} .h-41{height:41%} .h-42{height:42%} .h-43{height:43%} .h-44{height:44%} .h-45{height:45%} .h-46{height:46%} .h-47{height:47%} .h-48{height:48%} .h-49{height:49%}
.h-50{height:50%} .h-51{height:51%} .h-52{height:52%} .h-53{height:53%} .h-54{height:54%} .h-55{height:55%} .h-56{height:56%} .h-57{height:57%} .h-58{height:58%} .h-59{height:59%}
.h-60{height:60%} .h-61{height:61%} .h-62{height:62%} .h-63{height:63%} .h-64{height:64%} .h-65{height:65%} .h-66{height:66%} .h-67{height:67%} .h-68{height:68%} .h-69{height:69%}
.h-70{height:70%} .h-71{height:71%} .h-72{height:72%} .h-73{height:73%} .h-74{height:74%} .h-75{height:75%} .h-76{height:76%} .h-77{height:77%} .h-78{height:78%} .h-79{height:79%}
.h-80{height:80%} .h-81{height:81%} .h-82{height:82%} .h-83{height:83%} .h-84{height:84%} .h-85{height:85%} .h-86{height:86%} .h-87{height:87%} .h-88{height:88%} .h-89{height:89%}
.h-90{height:90%} .h-91{height:91%} .h-92{height:92%} .h-93{height:93%} .h-94{height:94%} .h-95{height:95%} .h-96{height:96%} .h-97{height:97%} .h-98{height:98%} .h-99{height:99%}
.h-100{height:100%}

/* Die Zahlen zum Diagramm: eingeklappt, für alle, die sie brauchen. */
.tabellenansicht { margin-top: .5rem; font-size: .88rem; }
.tabellenansicht > summary { color: var(--verweis); cursor: pointer; width: max-content; max-width: 100%; }
.tabellenansicht > summary:hover { color: var(--verweis-hover); }
.tabellenansicht table { margin-top: .4rem; }
.tabellenansicht th, .tabellenansicht td { padding: .25rem .5rem; }

@media print {
    .tabellenansicht { display: none; }
    .karte { break-inside: avoid; border-color: #999; }
}

/* --- Suche, Tour, Packliste, Benutzer ----------------------------------- */

/* Das hidden-Attribut gewinnt immer — auch gegen display aus einer Regel
   für Tabellenzellen. ort.js und tour.js blenden darüber ein und aus. */
[hidden] { display: none !important; }

.nur-vorleser {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gedaempft { color: var(--gedaempft); }
.unterzeile { display: block; font-size: .85rem; }

.kopfsuche { margin: 0; }
.kopfsuche input,
.suchzeile input {
    font: inherit;
    font-size: .9rem;
    padding: .35rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    background: var(--flaeche);
    color: var(--text);
    width: 11rem;
}
.suchzeile { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; }
.suchzeile input { width: 100%; max-width: 28rem; font-size: 1rem; }
.suchzeile .knopf { margin-top: 0; }
.trefferliste { list-style: none; padding: 0; margin: .3rem 0 1rem; }
.trefferliste li { padding: .35rem 0; border-bottom: 1px solid var(--rand); }
.trefferliste li .gedaempft { margin-left: .5rem; font-size: .9rem; }
.trefferliste li.stillgelegt a { color: var(--gedaempft); }

/* Passt die Navigation nicht mit Suche und Abmelden in eine Zeile, rutschen
   die beiden zusammen nach rechts in die nächste. */
@media (min-width: 721px) {
    .kopfsuche { margin-left: auto; }
}

@media (max-width: 720px) {
    .kopfsuche { order: 2; flex: 1 1 8rem; }
    .kopfsuche input { width: 100%; }
}

.feld-aktionen { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin: .3rem 0 .8rem; }

/* Tour: auf dem Telefon mit dem Daumen zu treffen. */
.tourliste td { vertical-align: top; }
.tourliste input[type="checkbox"] { width: 1.3rem; height: 1.3rem; }
.tour-ziel { font-weight: 600; display: inline-block; padding: .2rem 0; }
.tourliste tr.erledigt td { background: color-mix(in srgb, var(--akzent) 8%, transparent); }

.tourformular { display: flex; flex-direction: column; gap: .4rem; max-width: 40rem; }
.tourformular .feld { display: flex; flex-direction: column; gap: .2rem; }
.tourformular label { font-size: .85rem; color: var(--gedaempft); }
.tourformular input:not([type="checkbox"]),
.tourformular textarea {
    font: inherit;
    font-size: 1.05rem;
    padding: .55rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    background: var(--flaeche);
    color: var(--text);
}
.tourformular .kasten { margin-top: .2rem; }

.tourzeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem .8rem;
    margin: 0 0 .6rem;
    padding: .5rem .7rem .7rem;
    border: 1px solid var(--rand);
    border-radius: .4rem;
    background: var(--flaeche);
}
/* Ein fieldset ist sonst mindestens so breit wie sein Inhalt (min-content)
   und schiebt die Seite auf dem Telefon seitlich über den Rand. */
.tourzeile { min-width: 0; }
.tourzeile .feld { min-width: 0; }
.tourzeile input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.tourzeile legend { padding: 0 .3rem; max-width: 100%; white-space: normal; }
.tourzeile .kasten,
.tourzeile-voll { grid-column: 1 / -1; margin: 0; }
.tourzeile .kasten { display: flex; gap: .5rem; align-items: center; font-size: .95rem; color: var(--text); }
.tourzeile .kasten input { width: 1.25rem; height: 1.25rem; }
.packmenge small { display: block; color: var(--gedaempft); white-space: nowrap; }

.knopf-gross { font-size: 1.1rem; padding: .8rem 1.2rem; width: 100%; max-width: 40rem; }

.packliste-automat { break-inside: avoid; margin-bottom: 1rem; }
.packliste-automat h3 { margin-bottom: .2rem; }

details.aufklapp > summary { list-style: none; display: inline-block; }
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp[open] { padding: .3rem 0; }
.warnknopf { background: #9c3a2c; border-color: #9c3a2c; }

@media print {
    .kopfsuche, .feld-aktionen, .tourliste input[type="checkbox"] { display: none !important; }
}

/* --- Kundenseite (QR-Code) und Rückmeldungen ------------------------------ */

.kundenseite { background: var(--grund); }
.kunde-kopf {
    padding: .8rem 1rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}
.kunde-marke { font-weight: 700; }
.kunde-inhalt { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 2rem; }
.kunde-inhalt h1 { font-size: 1.5rem; margin: .8rem 0 .2rem; }
.kunde-inhalt h2 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; }
.kunde-fuss {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    gap: 1.2rem;
    font-size: .9rem;
    border-top: 1px solid var(--rand);
}

.kunde-wahl { display: flex; flex-direction: column; gap: .7rem; margin: 1.2rem 0; }
.kunde-knopf {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--rand);
    border-left: 4px solid var(--akzent);
    border-radius: .5rem;
    background: var(--flaeche);
    color: var(--text);
    text-decoration: none;
}
.kunde-knopf:hover, .kunde-knopf:focus-visible { border-color: var(--akzent); }
.kunde-knopf strong { display: block; font-size: 1.1rem; }
.kunde-knopf span { display: block; color: var(--gedaempft); font-size: .92rem; margin-top: .15rem; }

.kunde-formular { display: flex; flex-direction: column; gap: .5rem; }
.kunde-formular .feld { display: flex; flex-direction: column; gap: .2rem; }
.kunde-formular label { font-size: .95rem; }
.kunde-formular input:not([type="checkbox"]):not([type="radio"]),
.kunde-formular select,
.kunde-formular textarea,
.kunde-code input {
    font: inherit;
    font-size: 1.05rem;
    padding: .6rem .65rem;
    border: 1px solid var(--rand);
    border-radius: .35rem;
    background: var(--flaeche);
    color: var(--text);
    width: 100%;
}
.kunde-kasten { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; margin: .4rem 0; }
.kunde-kasten input { width: 1.3rem; height: 1.3rem; flex: none; margin-top: .1rem; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.sterne { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.sterne legend { margin-bottom: .3rem; }
.kunde-code { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; }
.kunde-code .knopf { align-self: flex-start; }
.vorgangsnummer { font-size: 1.8rem; font-weight: 700; letter-spacing: .08em; margin: .3rem 0 1rem; }

/* Das Fangfeld für Programme: unsichtbar, aber nicht display:none — manche
   Bots überspringen ausgeblendete Felder gezielt. */
.fangfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.reiter { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.reiter a {
    padding: .35rem .8rem;
    border: 1px solid var(--rand);
    border-radius: 1rem;
    text-decoration: none;
    color: var(--text);
    font-size: .92rem;
}
.reiter a.hier { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }

dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 1rem 0; }
dl.angaben dt { color: var(--gedaempft); }
dl.angaben dd { margin: 0; }
.kundentext { white-space: normal; overflow-wrap: anywhere; }
.iban { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; }
@media (max-width: 720px) {
    dl.angaben { grid-template-columns: 1fr; }
    dl.angaben dd { margin-bottom: .4rem; }
}

table.kategorien input:not([type="checkbox"]),
table.kategorien select {
    font: inherit;
    font-size: .92rem;
    padding: .3rem .45rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    background: var(--flaeche);
    color: var(--text);
    min-width: 9rem;
}

.qr-vorschau { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; margin: .8rem 0 1.2rem; }
.qr-vorschau svg { width: 9rem; height: auto; border: 1px solid var(--rand); }

.aufkleberbogen { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.aufkleber {
    border: 1px dashed var(--rand);
    border-radius: .5rem;
    padding: .8rem;
    text-align: center;
    background: #fff;
    color: #000;
    break-inside: avoid;
}
.aufkleber svg { width: 100%; max-width: 11rem; height: auto; }
.aufkleber p { margin: .2rem 0; }
.aufkleber-titel { font-weight: 700; font-size: 1.15rem; }
.aufkleber-nummer { font-weight: 600; }
.aufkleber-adresse { font-size: .75rem; overflow-wrap: anywhere; }

@media print {
    .aufkleberbogen { grid-template-columns: repeat(3, 1fr); gap: 6mm; }
    .aufkleber { border: 1px dashed #999; }
}

/* --- Rückmeldungen, Schritte 2 und 3 ------------------------------------- */

/* „+1" auf der Kundenseite: Wunsch links, Knopf rechts, groß genug für den Daumen. */
.kunde-wuensche { list-style: none; padding: 0; margin: .6rem 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.kunde-wuensche li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .55rem .6rem .55rem .9rem;
    border: 1px solid var(--rand);
    border-radius: .5rem;
    background: var(--flaeche);
}
.kunde-wuensche li > span { overflow-wrap: anywhere; }
.kunde-wuensche li > span .gedaempft { display: block; font-size: .88rem; }
.kunde-wuensche form { margin: 0; flex: none; }
.kunde-wuensche .knopf { min-width: 3.2rem; min-height: 2.75rem; font-weight: 700; }
.kunde-formular input[type="file"] { font: inherit; font-size: .95rem; max-width: 100%; }

.kundenfoto img {
    display: block;
    max-width: min(100%, 32rem);
    max-height: 28rem;
    height: auto;
    border: 1px solid var(--rand);
    border-radius: .35rem;
}

table.zahlungen tr.passt td { background: color-mix(in srgb, var(--akzent) 9%, transparent); }

/* position: relative hält die unsichtbaren Beschriftungen (.nur-vorleser) im
   scrollenden Tabellenrahmen — sonst verbreitern sie auf dem Telefon die Seite. */
.wunschentscheidung { position: relative; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; }
.wunschentscheidung select,
.wunschentscheidung input {
    font: inherit;
    font-size: .9rem;
    padding: .25rem .4rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    background: var(--flaeche);
    color: var(--text);
}
.wunschentscheidung input { width: 10rem; max-width: 100%; }

table.monatstabelle th, table.monatstabelle td { white-space: nowrap; }
table.monatstabelle td.zahl, table.monatstabelle th.zahl { min-width: 2.2rem; }
table.monatstabelle tfoot th, table.monatstabelle tfoot td { border-top: 2px solid var(--rand); }

.tour-kunden { display: block; margin-top: .15rem; }
.tour-kundenmeldungen { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.tour-kundenmeldungen li { padding: .45rem 0; border-bottom: 1px solid var(--rand); }
.tour-kundenmeldungen li:last-child { border-bottom: 0; }