:root {
  --grund: #f4f6f8; --flaeche: #fff; --text: #1a202c; --leise: #5a6472; --linie: #d9dee5;
  --akzent: #1f5f8b; --akzent-hell: #e6f0f7; --erfolg: #2f7d4f; --fehler: #b4322d; --hinweis: #8a6d1d;
  --radius: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--grund); color: var(--text); }
a { color: var(--akzent); }

.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
        padding: .8rem clamp(1rem, 4vw, 2.5rem); background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.menue { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; }
.menue a { text-decoration: none; }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--akzent); font: inherit; cursor: pointer; width: auto; margin: 0; }

.inhalt { max-width: 1080px; margin: 1.5rem auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
/* Eingang und Katalog tragen sechs Spalten – auf 1080px wird die letzte
   abgeschnitten. Sie duerfen den Bildschirm nutzen, soweit er da ist. */
.inhalt.weit { max-width: 1560px; }
.fuss { text-align: center; color: var(--leise); font-size: .8rem; padding: 2rem 1rem; }
h1 { font-size: 1.5rem; margin: 0 0 .8rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.karte.schmal { max-width: 440px; margin-inline: auto; }
.karte.hervorgehoben { border-color: var(--akzent); background: var(--akzent-hell); }

label { display: block; margin: .8rem 0 .25rem; font-weight: 600; font-size: .9rem; }
input, select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: 7px; font: inherit; background: #fff; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
button { margin-top: 1rem; padding: .6rem 1rem; border: 0; border-radius: 7px; background: var(--akzent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; width: 100%; }
.klein { font-size: .82rem; color: var(--leise); }
.linkfeld { font-family: ui-monospace, monospace; font-size: .85rem; }

.meldung { padding: .6rem .9rem; border-radius: 7px; margin: 0 auto 1rem; max-width: 1080px; border-left: 4px solid; background: var(--flaeche); }
.meldung.erfolg { border-color: var(--erfolg); }
.meldung.fehler { border-color: var(--fehler); }
.meldung.hinweis { border-color: var(--hinweis); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.kachel { display: block; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.2rem; color: var(--text); text-decoration: none; }
a.kachel:hover { border-color: var(--akzent); }
.kachel span { font-size: .78rem; color: var(--leise); }
.kachel.folgt { opacity: .65; }

.marke-rolle { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .8rem; background: var(--akzent-hell); color: var(--akzent); }
.marke-rolle.admin { background: #f3e8ff; color: #6b3fa0; }
.marke-rolle.leitung { background: #fdf2e0; color: #8a5a12; }
.marke-test { display: inline-block; padding: .05rem .45rem; border-radius: 99px; font-size: .72rem; background: #eceff3; color: var(--leise); }

.tabelle { width: 100%; border-collapse: collapse; }
.karte:has(> .tabelle) { overflow-x: auto; }
.tabelle th, .tabelle td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle th { font-size: .8rem; color: var(--leise); font-weight: 600; }
.tabelle tr.inaktiv td { color: var(--leise); }
.aktionen { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.aktionen form { margin: 0; }
.klein-knopf { margin: 0; width: auto; padding: .3rem .6rem; font-size: .8rem; background: #eef2f6; color: var(--text); font-weight: 500; }
.klein-knopf.gefahr { background: #fbe9e8; color: var(--fehler); }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; align-items: end; }
.haken { display: flex; align-items: center; gap: .5rem; padding-top: 1.6rem; }
.haken input { width: auto; }
.haken label { margin: 0; }

/* --- Gebietssuche --------------------------------------------------------- */
.suchzeile { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }
.suchzeile .feld { flex: 1 1 280px; }
.suchzeile button { width: auto; margin: 0; }
.status { display: inline-block; padding: .05rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 600; background: #eceff3; color: var(--leise); white-space: nowrap; }
.status.laeuft { background: var(--akzent-hell); color: var(--akzent); }
.status.fertig { background: #e3f3e8; color: var(--erfolg); }
.status.abgebrochen { background: #fdf2e0; color: #8a5a12; }
.status.fehler { background: #fbe9e8; color: var(--fehler); }
.stand-kopf { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.trichter { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .9rem 0 .2rem; }
.trichter div { min-width: 90px; }
.trichter dt { font-size: .75rem; color: var(--leise); }
.trichter dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#stand form { margin-top: .8rem; }
.kennzahlen { margin-bottom: 1.2rem; }
.kennzahlen h2 { font-size: 1.8rem; margin: 0; font-variant-numeric: tabular-nums; }
.kennzahlen p { margin: 0; }
.ergebnisse td { font-size: .9rem; }
/* Feste Spaltenbreiten: ohne sie richtet sich die Tabelle nach dem laengsten
   Produktnamen und waechst ueber den Rand hinaus. So bricht der Text um,
   statt die Tabelle zu sprengen. */
.ergebnisse { table-layout: fixed; }
.ergebnisse td, .ergebnisse th { overflow-wrap: anywhere; }
.sp-betrieb { width: 20%; }
.sp-ort { width: 13%; }
.sp-ware { width: 15%; }
.sp-beleg { width: 17%; }
.sp-status { width: 14%; }
.sp-rm { width: 21%; }
.gekappt { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--linie); }
.stufe { display: inline-block; padding: .05rem .5rem; border-radius: 6px; font-size: .82rem; background: #eef2f6; }

/* --- Rueckmeldungen ------------------------------------------------------- */
.rm-spalte { min-width: 210px; }
.ergebnisse .rm-spalte { min-width: 0; }   /* unter table-layout: fixed regelt die colgroup */
.rm { font-size: .85rem; }
.rm p { margin: 0 0 .25rem; }
.rm-knoepfe { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.rm-knoepfe form { margin: 0; }
.rm-passt { background: #e3f3e8; color: var(--erfolg); }
.rm-falsch { background: #fbe9e8; color: var(--fehler); }
.rm-hoch { background: var(--akzent-hell); color: var(--akzent); }
.rm-speichern { background: var(--akzent); color: #fff; }
.rm-stand { font-weight: 600; }
.rm-stand.passt { color: var(--erfolg); }
.rm-stand.falsch { color: var(--fehler); }
.rm-stand.hochstufen { color: var(--akzent); }
.rm-ok { color: var(--erfolg); font-weight: 500; }
.rm-offen { background: #f8fafc; border: 1px solid var(--linie); border-radius: 8px; padding: .5rem .6rem; }
.rm-offen label { margin: .45rem 0 .15rem; font-size: .8rem; }
.rm-titel { font-weight: 700; }
textarea { width: 100%; padding: .45rem .6rem; border: 1px solid var(--linie); border-radius: 7px; font: inherit; resize: vertical; }
.klein-auswahl { padding: .25rem .4rem; font-size: .82rem; width: auto; }
.arbeitsstatus { display: flex; align-items: center; gap: .3rem; margin: 0; }
.status-verworfen { color: var(--leise); }
.status-relevant, .status-probe_genommen { color: var(--erfolg); font-weight: 600; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.erlaeuterung { margin: -.4rem 0 1.2rem; }

/* --- Eingang & Katalog ----------------------------------------------------- */
.eingang-kopf p { margin: 0; }
.eingang-kopf a { margin-left: .3rem; }
tr.verschoben td { background: #f1f8f3; color: var(--leise); font-size: .9rem; }
tr.gruppenkopf th { background: #eef2f6; color: var(--text); font-size: .9rem; padding-top: .6rem; }
.marke-korrigiert { display: inline-block; padding: 0 .4rem; border-radius: 99px; font-size: .7rem; background: #fdf2e0; color: #8a5a12; }
.hinweis-offen { color: var(--hinweis); }
/* Ortsangabe: auswaertige Postleitzahl und Ortsteil bleiben lesbar, ohne der
   Warengruppe die Aufmerksamkeit zu nehmen – beides ist Einordnung, kein Alarm. */
.auswaerts { display: inline-block; padding: 0 .4rem; border-radius: 99px; font-size: .7rem; background: #eceef1; color: #4a5260; }
.ortsteil { color: var(--leise); }
/* Mehrfachauftritte: gebuendelte Unterdomains und der vorsichtige Verweis auf
   gleichnamige Betriebe – beides Nebeninformation, nie lauter als der Name. */
.weitere { margin-top: .25rem; font-size: .72rem; color: var(--leise); }
.weitere summary { cursor: pointer; }
.weitere ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.namensgleich { margin-top: .25rem; color: var(--leise); }
.filter { padding-bottom: .8rem; }
.filter-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 .9rem; }
.filter-raster .feld-breit { grid-column: span 2; }
@media (max-width: 480px) { .filter-raster .feld-breit { grid-column: auto; } }
.haken-zeile { border: 0; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: center; }
.haken-inline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 500; }
.haken-inline input { width: auto; }
.trenner { width: 1px; height: 1.2rem; background: var(--linie); }
.filter-knoepfe { display: flex; gap: 1rem; align-items: center; margin-top: .6rem; }
.seiten { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; }

/* --- Probenahme ------------------------------------------------------------ */
.knopf-link { display: inline-block; padding: .5rem .9rem; border-radius: 7px; background: var(--akzent); color: #fff; text-decoration: none; font-weight: 600; }
.probe-knopf { display: inline-block; margin-top: .35rem; text-decoration: none; }
.warnkasten { background: #fff4e5; border: 1px solid #f0b35b; border-left: 5px solid #e08a00; border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.2rem; }
.probe-kopf { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.probe-kopf h2 { margin: 0; }
.probe-aktionen { margin: .6rem 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.kennzeichnung th { width: 28%; color: var(--leise); font-weight: 600; font-size: .85rem; vertical-align: top; }
.kennzeichnung td { white-space: pre-wrap; }
.kennzeichnung tr.leer td { color: #a0671a; font-style: italic; }
h3 { font-size: 1rem; margin: 1.1rem 0 .5rem; }
.abbilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.abbild { display: block; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; text-decoration: none; background: #fff; }
.abbild img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; }
.abbild span { display: block; padding: .3rem .5rem; }
.aufklapp { margin-top: .9rem; }
.aufklapp summary { cursor: pointer; font-weight: 600; color: var(--akzent); }
.anschreiben { font-family: ui-monospace, monospace; font-size: .82rem; margin-top: .5rem; }
.mono { font-family: ui-monospace, monospace; word-break: break-all; }

/* --- Fristen & Wiedervorlage ----------------------------------------------
   Stand-Farben mit dem dataviz-Palettenpruefer getestet (alle Paare, Protan/
   Deutan/Tritan >= 8, Normalsicht >= 15, Kontrast >= 3:1). Farbe nie allein:
   jeder Stand hat Symbol UND Wort; ausgeblieben zusaetzlich schraffiert. */
:root { --st-offen: #1f6fb2; --st-bald: #c07a00; --st-ueber: #b0302a; --st-eingang: #1a9a7a;
        --st-erledigt: #9aa3ad; --st-aus: #4a5260; --st-farbe: var(--st-offen); }
.st-offen { --st-farbe: var(--st-offen); }
.st-bald { --st-farbe: var(--st-bald); }
.st-ueber { --st-farbe: var(--st-ueber); }
.st-eingang { --st-farbe: var(--st-eingang); }
.st-erledigt { --st-farbe: var(--st-erledigt); }
.st-aus { --st-farbe: var(--st-aus); }

.stand { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.sym, .ev-punkt { display: inline-grid; place-items: center; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%;
       background: var(--st-farbe); color: #fff; font-size: .72rem; line-height: 1; font-weight: 700; }
.st-erledigt .sym, .ev-punkt.st-erledigt { color: var(--text); }
.st-aus .sym, .ev-punkt.st-aus { border-radius: 3px; }
.st-bald .sym, .ev-punkt.st-bald, .st-ueber .sym, .ev-punkt.st-ueber { border-radius: 4px; }

.zaehler { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 99px; background: var(--st-ueber);
           color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }
.fristen-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .6rem 1rem; }
.fristen-kopf h1 { margin-bottom: .1rem; }
.fristen-werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.knopf-link-leise { display: inline-block; text-decoration: none; border-radius: 7px; }
.schalter-form { margin: 0; }
.schalter { display: inline-flex; align-items: center; gap: .5rem; width: auto; margin: 0; padding: .3rem .7rem; font-size: .82rem;
            font-weight: 500; background: #eef2f6; color: var(--text); }
.schalter-bahn { position: relative; width: 2.1rem; height: 1.15rem; border-radius: 99px; background: #b9c1ca; transition: background .15s; }
.schalter-knopf { position: absolute; top: .15rem; left: .15rem; width: .85rem; height: .85rem; border-radius: 50%; background: #fff; transition: left .15s; }
.schalter.an .schalter-bahn { background: var(--st-eingang); }
.schalter.an .schalter-knopf { left: 1.1rem; }

.reiter { display: flex; gap: .3rem; margin: 1rem 0 1.1rem; border-bottom: 1px solid var(--linie); overflow-x: auto; }
.reiter a { padding: .5rem .9rem; text-decoration: none; color: var(--leise); border-bottom: 3px solid transparent; white-space: nowrap; }
.reiter a.aktiv { color: var(--text); font-weight: 600; border-bottom-color: var(--akzent); }

.frist-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.frist-kachel { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; align-items: center;
                padding: .9rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--st-farbe);
                border-radius: var(--radius); color: var(--text); text-decoration: none; }
.frist-kachel .sym { grid-row: span 2; width: 1.9rem; height: 1.9rem; font-size: 1rem; }
.frist-kachel strong { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.frist-kachel > span:last-child { font-size: .82rem; color: var(--leise); }
.frist-kachel.null { border-left-color: var(--linie); }
.frist-kachel.null .sym { background: #d5dbe2; color: var(--leise); }
.frist-kachel:hover { border-color: var(--st-farbe); }

.frist-gruppe { margin-bottom: 1.6rem; }
.frist-gruppe > h2 { margin-bottom: .1rem; }
.frist-gruppe > p { margin: 0 0 .6rem; }
.frist-karte { background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--st-farbe);
               border-radius: var(--radius); padding: .8rem 1.1rem; margin: .6rem 0; overflow-x: auto; }
.frist-karte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: flex-start; }
.frist-karte-kopf h3 { margin: 0; }
.frist-karte-kopf p { margin: 0; }
.frist-datum { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.frist-datum strong { font-variant-numeric: tabular-nums; }
.proben-liste td { padding: .35rem .5rem; }
.mono-kurz { font-family: ui-monospace, monospace; font-size: .85rem; white-space: nowrap; }
.stand-knoepfe { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.stand-knoepfe form, .sammel { margin: 0; }
.sammel { margin-top: .5rem; text-align: right; }
.leer-hinweis p { margin: 0; }

.datum-form { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.datum-form input[type=date] { width: auto; }
.wv-aktionen { margin-top: .6rem; }
.wv-aktionen > .datum-form { margin: .4rem 0; }
.wiedervorlage { border-left: 5px solid var(--akzent); scroll-margin-top: 1rem; }
.verlauf { list-style: none; padding: 0; margin: .5rem 0 0; }
.verlauf li { padding: .35rem 0; border-bottom: 1px solid var(--linie); font-size: .9rem; }

.legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; padding: 0; margin: .4rem 0 .9rem; font-size: .8rem; color: var(--leise); }
.legende li { display: inline-flex; align-items: center; gap: .3rem; }
.lg-balken { display: inline-block; width: 1.4rem; height: .55rem; border-radius: 3px; background: var(--st-farbe); }
.lg-balken.st-aus { background: repeating-linear-gradient(45deg, var(--st-aus) 0 2px, #fff 2px 5px); border: 1px solid var(--st-aus); }
.lg-heute { display: inline-block; width: 2px; height: .95rem; background: var(--text); }
.ev-bestellt { --st-farbe: #6b7684; }

/* Monatskalender */
.kalender-kopf { display: flex; align-items: center; gap: .7rem; }
.kalender-kopf h2 { margin: 0; min-width: 9rem; text-align: center; }
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.kal-wt { background: #eef2f6; padding: .3rem .5rem; font-size: .75rem; font-weight: 600; color: var(--leise); }
.kal-tag { background: var(--flaeche); min-height: 6.4rem; padding: .3rem .35rem .4rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.kal-tag.we { background: #fafbfc; }
.kal-tag.fremd { background: #f3f5f7; }
.kal-tag.fremd .kal-nr, .kal-tag.fremd .ev { opacity: .55; }
.kal-nr { font-size: .78rem; color: var(--leise); }
.kal-tag.heute { box-shadow: inset 0 0 0 2px var(--akzent); }
.kal-tag.heute .kal-nr strong { color: #fff; background: var(--akzent); border-radius: 99px; padding: 0 .35rem; }
.kal-nr em { margin-left: .3rem; font-style: normal; font-size: .7rem; color: var(--akzent); font-weight: 600; }
.ev { display: flex; align-items: flex-start; gap: .3rem; padding: .15rem .3rem; border-radius: 5px; font-size: .74rem; line-height: 1.25;
      color: var(--text); text-decoration: none; background: #f4f6f8; border-left: 3px solid var(--st-farbe); min-width: 0; }
.ev:hover { background: var(--akzent-hell); }
.ev .ev-punkt { width: .95rem; height: .95rem; font-size: .6rem; margin-top: .05rem; }
.ev-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
@media (min-width: 761px) { .kal-nr { font-size: 0; } .kal-nr strong, .kal-nr em { font-size: .8rem; } .kal-nr em { font-size: .7rem; } }
@media (max-width: 760px) {
  .kalender { grid-template-columns: 1fr; }
  .kal-wt, .kal-tag:not(.hat), .kal-tag.fremd { display: none; }
  .kal-tag { min-height: 0; padding: .5rem .6rem; }
  .kal-tag.heute { display: flex; }
  .ev { font-size: .85rem; }
}

/* Zeitstrahl und Monatsbalken (SVG – Farben nur hier, Positionen im Markup) */
.zs-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 1rem; }
.zs-kopf p { margin: 0; }
.zs-filter { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: 0; }
.zs-filter .haken-inline { margin: 0; font-weight: 400; font-size: .85rem; }
.zs-rahmen { overflow-x: auto; }
.zeitstrahl { display: block; width: 100%; min-width: 760px; height: auto; font-family: inherit; }
.monatsbalken { display: block; width: 100%; min-width: 520px; height: auto; font-family: inherit; }
.zs-monat { stroke: #aeb7c2; stroke-width: 1; }
.zs-monat-text { font-size: 11px; font-weight: 600; fill: var(--leise); }
.zs-raster { stroke: #e7ebf0; stroke-width: 1; }
.zs-achse { font-size: 11px; fill: var(--leise); font-variant-numeric: tabular-nums; }
.zs-grundlinie { stroke: #c3cad3; stroke-width: 1; }
.zs-trenner { stroke: var(--linie); stroke-width: 1; }
.zs-gruppe { font-size: 13px; font-weight: 700; fill: var(--text); }
.zs-gruppe-zusatz { font-size: 11px; fill: var(--leise); }
.zs-trefferflaeche { fill: transparent; }
.zs-zeile:hover .zs-trefferflaeche, .zs-zeile:focus .zs-trefferflaeche { fill: #eef4f9; }
.zs-label { font-size: 12px; fill: var(--text); font-family: ui-monospace, monospace; }
.zs-stand { font-size: 11px; fill: var(--leise); }
.zs-balken { fill: var(--st-farbe); stroke: #fff; stroke-width: 2; paint-order: stroke; }
.st-aus .zs-balken { stroke: var(--st-aus); stroke-width: 1; }
.st-erledigt .zs-balken { fill: #c4cad1; }
.zs-verlaengerung { stroke: var(--st-ueber); stroke-width: 1; }
.zs-frist { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.zs-eingang { fill: var(--st-eingang); stroke: #fff; stroke-width: 2; }
.st-erledigt .zs-eingang { fill: #7d8791; }
.zs-eingang-haken { font-size: 9px; font-weight: 700; fill: #fff; pointer-events: none; }
.zs-kreuz { font-size: 12px; font-weight: 700; fill: var(--st-aus); }
.zs-heute { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; }
.zs-heute-marke { fill: var(--text); }
.zs-heute-text { font-size: 10px; font-weight: 700; fill: #fff; }
.mb-raster { stroke: #e7ebf0; stroke-width: 1; }
.mb-basis { stroke: #aeb7c2; stroke-width: 1; }
.mb-treffer { fill: transparent; }
.mb-saeule:hover .mb-treffer { fill: #eef4f9; }
.mb-balken { fill: var(--akzent); }
.mb-wert { font-size: 12px; font-weight: 600; fill: var(--text); font-variant-numeric: tabular-nums; }

.stand-knoepfe .klein-knopf { white-space: nowrap; }
@media (max-width: 640px) {
  .frist-karte { overflow-x: visible; padding-inline: .8rem; }
  .proben-liste, .proben-liste tbody, .proben-liste td { display: block; }
  .proben-liste thead { display: none; }
  .proben-liste tr { display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; align-items: center;
                     padding: .55rem 0; border-bottom: 1px solid var(--linie); }
  .proben-liste td { border: 0; padding: 0; }
  .proben-liste td:nth-child(n+3) { grid-column: 1 / -1; }
  .stand-knoepfe { justify-content: flex-start; }
  .sammel { text-align: left; }
}

@media print {
  .kopf, .fuss, .reiter, .fristen-werkzeuge, .stand-knoepfe, .sammel, .zs-filter, .wv-aktionen form, .datum-form button { display: none !important; }
  body { background: #fff; }
  .karte, .frist-karte, .frist-kachel { break-inside: avoid; border-color: #999; }
  .zeitstrahl, .monatsbalken { min-width: 0; }
}

/* Sammelkorb (Probe nehmen) */
.korb-schritte { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .45rem; }
.korb-schritte li::marker { color: var(--leise); font-weight: 600; }
.korb-ablage { border: 2px dashed var(--linie); border-radius: var(--radius); padding: .9rem 1rem; background: var(--grund); transition: border-color .15s, background .15s; }
.korb-ablage.aktiv { border-color: var(--akzent); background: var(--akzent-hell); }
.korb-ablage p { margin: 0 0 .5rem; }
.korb-ablage-text { font-size: .95rem; }
.korb-eingabe { display: flex; gap: .5rem; align-items: center; }
.korb-eingabe input[type=text] { flex: 1; min-width: 0; }
.korb-eingabe .klein-knopf { flex: none; padding: .55rem .9rem; }
.korb-hinweis { margin: .6rem 0 0; min-height: 1.2em; }
.korb-hinweis .klein-knopf, #zwischenablage-stand .klein-knopf { margin-right: .3rem; }
.korb-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; }
.korb-kopf h2 .klein { font-weight: 400; }
.korb-meldung { margin: 0 0 .5rem; font-size: .88rem; font-weight: 500; }
.korb-meldung.erfolg { color: var(--erfolg); }
.korb-meldung.fehler { color: var(--fehler); }
.korb-meldung.hinweis { color: var(--hinweis); }
.korb-produkt { max-width: 34rem; }
.korb-titel { display: block; }
.korb-titel.leise { color: var(--leise); font-style: italic; font-size: .88rem; }
.korb-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34rem; }
.marke-fremd { display: table; margin-top: .25rem; padding: 0 .45rem; border-radius: 99px; font-size: .72rem; background: #fdf2e0; color: #8a5a12; }
.korb-nummer { min-width: 13rem; }
.korb-nummer .nummer-feld { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.nr-stand { display: block; min-height: 1.1em; }
.nr-mangel { color: var(--fehler); }
.korb-entfernen { padding: .3rem .55rem; }
.korb-fuss { margin-top: .8rem; }
.korb-fuss .klein-knopf { margin-right: .4rem; }
.korb-starten { max-width: 22rem; }
.korb-leer { color: var(--leise); margin: .3rem 0 0; }
.korb-verwerfen { margin-top: .4rem; text-align: right; }
.korb-offen { margin: 0; padding-left: 1.1rem; }
@media (max-width: 640px) {
  .korb-tabelle thead { display: none; }
  .korb-tabelle tr { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .2rem .5rem; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
  .korb-tabelle td { border: 0; padding: 0; }
  .korb-tabelle { display: block; }
  .korb-tabelle tbody { display: block; }
  .korb-tabelle td.korb-nummer { grid-column: 2 / 4; min-width: 0; }
  .korb-tabelle td:last-child { grid-column: 3; grid-row: 1; }
  .korb-url { max-width: 100%; }
  .korb-starten { max-width: none; }
}

/* Bestellweg im Katalog */
.weg { display: inline-block; padding: 0 .4rem; border-radius: 99px; font-size: .72rem; background: #eceff3; color: var(--leise); }
.weg-versand { background: #e3f2ea; color: #26623f; }
.weg-lieferdienst, .weg-abholung { background: #fdf2e0; color: #8a5a12; }
.weg-unklar { background: #e8eef5; color: #2c5578; }
.vorschlag { display: inline-block; font-size: .72rem; color: var(--leise); border-bottom: 1px dotted var(--linie); cursor: help; }

/* Punktzahl der Einstufung. Bewusst zurueckhaltend gefaerbt: die Zahl ordnet
   ein, sie urteilt nicht – die Stufe daneben traegt die Aussage. */
.guete { display: inline-block; padding: 0 .4rem; border-radius: 99px; font-size: .72rem;
         background: #eceff3; color: var(--leise); cursor: help; }
.guete-hoch { background: #e3f2ea; color: #26623f; }
.guete-mittel { background: #eef4ea; color: #4a6b3a; }
.guete-niedrig { background: #fdf2e0; color: #8a5a12; }
.guete-sehr-niedrig { background: #f6eaea; color: #8a3030; }

/* Suche: Feld in der Kopfzeile, Suchzeile auf Such- und Eingangsseite */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.kopf-suche { margin: 0; }
.kopf-suche input { width: 13rem; padding: .3rem .6rem; font-size: .88rem; }
@media (max-width: 640px) { .kopf-suche, .kopf-suche input { width: 100%; } }
.suchzeile { display: flex; gap: .6rem; align-items: stretch; }
.suchzeile input { flex: 1; min-width: 0; }
.suchzeile button { margin: 0; width: auto; }
.eingang-suche { padding-block: .4rem .9rem; }
.eingang-suche label { margin-top: .4rem; }