/* =====================================================================
   VeBIS 2.0 – Layout-Baukasten
   Ein Stylesheet für alle Seiten. Farben, Schrift und Abstände stehen
   oben als Variablen und werden nur dort geändert.
   ===================================================================== */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
	/* Grundfarben: verzinktes Blech, Graphit, Stahlblau, Signalgelb */
	--zink: #e9eef0;
	--zink-tief: #d6dee2;
	--blatt: #ffffff;
	--graphit: #1f2a30;
	--graphit-weich: #4b5a62;
	--linie: #c9d3d8;
	--linie-kartei: #9fb2bd;
	--kartei-kopf: #f4f7f9;
	--linie-leise: #e2e8eb;
	--stahl: #1e5a7a;
	--stahl-hell: #e3eef4;
	--stahl-tief: #154560;
	--signal: #f2b705;
	--signal-hell: #fdf3d0;
	--gut: #2e7d4f;
	--gut-hell: #e2f1e8;
	--auf-gut: #ffffff;
	--warn: #9a5b00;
	--warn-hell: #fbecd6;
	--fehler: #b3261e;
	--fehler-hell: #f9e1df;
	--rail: #1f2a30;
	--rail-text: #c8d4da;
	--rail-aktiv: #ffffff;
	--auf-stahl: #ffffff;
	--auf-signal: #1f2a30;

	--schrift: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--groesse-klein: 0.8125rem;   /* 13 px */
	--groesse-text: 0.9375rem;    /* 15 px */
	--groesse-gross: 1.125rem;    /* 18 px */
	--groesse-titel: 1.5rem;      /* 24 px */
	--groesse-zahl: 2rem;         /* 32 px */

	--r-klein: 4px;
	--r-mittel: 6px;
	--abstand: 1rem;
	--rail-breite: 15rem;
	--fokus: 0 0 0 3px color-mix(in srgb, var(--stahl) 40%, transparent);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--zink: #161d21;
		--zink-tief: #20292e;
		--blatt: #1c2429;
		--graphit: #e4eaed;
		--graphit-weich: #9fb0b8;
		--linie: #34424a;
		--linie-kartei: #4a5b64;
		--kartei-kopf: #222c31;
		--linie-leise: #283238;
		--stahl: #6fb2d6;
		--stahl-hell: #1c3542;
		--stahl-tief: #9fcbe3;
		--signal: #f2b705;
		--signal-hell: #3a3011;
		--gut: #6cc28f;
		--gut-hell: #18342a;
		--auf-gut: #0f2219;
		--warn: #e6a64a;
		--warn-hell: #3a2c14;
		--fehler: #f08a83;
		--fehler-hell: #3d1d1b;
		--rail: #0f1417;
		--rail-text: #9fb0b8;
		--auf-stahl: #0f1417;
		color-scheme: dark;
	}
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--schrift);
	font-size: var(--groesse-text);
	line-height: 1.5;
	color: var(--graphit);
	background: var(--zink);
	font-variant-numeric: tabular-nums;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 600; }
h1 { font-size: var(--groesse-titel); letter-spacing: -0.01em; }
h2 { font-size: var(--groesse-gross); }
h3 { font-size: var(--groesse-text); }
p { margin: 0 0 0.75em; max-width: 72ch; }
a { color: var(--stahl); text-underline-offset: 2px; }
a:hover { color: var(--stahl-tief); }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r-klein); }
.leise { color: var(--graphit-weich); }
.klein { font-size: var(--groesse-klein); }
.zahl { text-align: right; white-space: nowrap; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Grundgerüst: Menüleiste links, Kopfzeile, Inhalt ---------- */
.geruest { display: grid; grid-template-columns: var(--rail-breite) 1fr; min-height: 100vh; }

.rail {
	background: var(--rail);
	color: var(--rail-text);
	padding: 1.25rem 0.75rem;
	position: sticky; top: 0; height: 100vh; overflow-y: auto;
	display: flex; flex-direction: column; gap: 1.5rem;
}
.marke-logo { display: flex; align-items: baseline; gap: 0.5rem; padding: 0 0.5rem; color: var(--rail-aktiv); text-decoration: none; }
.marke-logo b { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; }
.marke-logo span { font-size: var(--groesse-klein); color: var(--rail-text); }
.rail nav ul { list-style: none; margin: 0; padding: 0; }
.rail nav h2 { font-size: var(--groesse-klein); font-weight: 500; color: var(--graphit-weich); margin: 1rem 0.5rem 0.25rem; }
.rail nav a {
	display: block; padding: 0.4rem 0.5rem 0.4rem 0.75rem; border-radius: var(--r-klein);
	color: var(--rail-text); text-decoration: none; border-left: 3px solid transparent;
}
.rail nav a:hover { color: var(--rail-aktiv); background: rgb(255 255 255 / 0.06); }
.rail nav a[aria-current="page"] { color: var(--rail-aktiv); border-left-color: var(--signal); background: rgb(255 255 255 / 0.08); }
.rail nav a.bald { opacity: 0.5; pointer-events: none; }
.rail-fuss { margin-top: auto; font-size: var(--groesse-klein); padding: 0 0.5rem; }
.rail-fuss form { margin: 0.5rem 0 0; }
.rail-fuss button { background: none; border: 0; color: var(--rail-text); padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

.hauptbereich { min-width: 0; display: flex; flex-direction: column; }
.kopf {
	display: flex; align-items: center; gap: 1rem;
	padding: 0.75rem 1.5rem; background: var(--blatt); border-bottom: 1px solid var(--linie);
	position: sticky; top: 0; z-index: 5;
}
.suche { flex: 1; max-width: 32rem; position: relative; }
.suche input[type="search"] { width: 100%; padding-left: 2.25rem; }
.suche svg { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--graphit-weich); }
.kopf-benutzer { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font-size: var(--groesse-klein); color: var(--graphit-weich); }
.umgebung { background: var(--signal); color: var(--auf-signal); font-weight: 600; font-size: var(--groesse-klein); padding: 0.125rem 0.5rem; border-radius: var(--r-klein); }

.inhalt { padding: 1.25rem 1.5rem; max-width: none; width: 100%; min-width: 0; }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; }
.seitenkopf h1 { margin: 0; }
.seitenkopf p { margin: 0.25rem 0 0; color: var(--graphit-weich); }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Mobile Navigation (ohne JavaScript, per <details>) */
.menue-schalter { display: none; }

/* ---------- Flächen ---------- */
.flaeche { background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r-mittel); margin-bottom: 1.25rem; }
.flaeche > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--linie-leise); }
.flaeche > header h2 { margin: 0; font-size: var(--groesse-text); }
.flaeche-inhalt { padding: 1rem; }
.spalten { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.spalten > .flaeche { margin-bottom: 0; }

/* ---------- Ablauf-Leiste (Kennzeichen des Cockpits) ---------- */
.ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r-mittel); overflow: hidden; margin-bottom: 1.25rem; counter-reset: schritt; }
.ablauf a {
	position: relative; display: flex; flex-direction: column; gap: 0.125rem;
	padding: 0.875rem 1.5rem 0.875rem 1rem; color: inherit; text-decoration: none;
	border-right: 1px solid var(--linie-leise); counter-increment: schritt;
}
.ablauf a:last-child { border-right: 0; }
.ablauf a::after { /* Pfeilspitze zum nächsten Schritt */
	content: ""; position: absolute; right: -6px; top: 50%; width: 11px; height: 11px; z-index: 1;
	background: var(--blatt); border-top: 1px solid var(--linie); border-right: 1px solid var(--linie);
	transform: translateY(-50%) rotate(45deg);
}
.ablauf a:last-child::after { display: none; }
.ablauf a:hover { background: var(--stahl-hell); }
.ablauf a:hover::after { background: var(--stahl-hell); }
.ablauf .schritt { font-size: var(--groesse-klein); color: var(--graphit-weich); }
.ablauf .schritt::before { content: counter(schritt) ". "; }
.ablauf .anzahl { font-size: var(--groesse-zahl); font-weight: 600; line-height: 1.1; }
.ablauf .hinweis { font-size: var(--groesse-klein); color: var(--graphit-weich); }
.ablauf a.dringend { box-shadow: inset 0 3px 0 var(--signal); }
.ablauf a.leer .anzahl { color: var(--graphit-weich); font-weight: 400; }

/* ---------- Tabellen ---------- */
.tabelle-rahmen { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: var(--groesse-klein); }
.tabelle th, .tabelle td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--linie-leise); vertical-align: top; }
.tabelle thead th { position: sticky; top: 0; background: var(--blatt); font-weight: 500; color: var(--graphit-weich); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle tbody tr:hover { background: var(--stahl-hell); }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; }
.tabelle a.zeilenlink { font-weight: 500; text-decoration: none; }
.tabelle a.zeilenlink:hover { text-decoration: underline; }
.tabelle .leer td { text-align: center; color: var(--graphit-weich); padding: 2rem; }

/* ---------- Status-Etiketten ---------- */
.etikett { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 999px; font-size: var(--groesse-klein); font-weight: 500; white-space: nowrap; background: var(--zink-tief); color: var(--graphit); }
.etikett.gut { background: var(--gut-hell); color: var(--gut); }
.etikett.offen { background: var(--stahl-hell); color: var(--stahl-tief); }
.etikett.warn { background: var(--warn-hell); color: var(--warn); }
.etikett.fehler { background: var(--fehler-hell); color: var(--fehler); }
.etikett.signal { background: var(--signal-hell); color: var(--graphit); box-shadow: inset 3px 0 0 var(--signal); border-radius: var(--r-klein); }

/* Kleine Häkchen-Reihe für Arbeitsschritte (AB, BE, LS …) */
.schritte { display: inline-flex; gap: 3px; }
.schritte span { min-width: 1.875rem; text-align: center; font-size: 0.6875rem; font-weight: 500; padding: 0.125rem 0.3125rem; border-radius: 4px; background: transparent; color: var(--graphit-weich); border: 1px dashed var(--linie); opacity: 0.65; }
.schritte span.ja { background: var(--gut); color: var(--auf-gut); border: 1px solid var(--gut); font-weight: 700; opacity: 1; }

/* ---------- Knöpfe ---------- */
.knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
	min-height: 2.5rem; padding: 0.5rem 1rem; border-radius: var(--r-klein);
	font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
	border: 1px solid var(--stahl); background: var(--stahl); color: var(--auf-stahl);
}
.knopf:hover { background: var(--stahl-tief); border-color: var(--stahl-tief); color: var(--auf-stahl); }
.knopf.zweit { background: var(--blatt); color: var(--stahl); }
.knopf.zweit:hover { background: var(--stahl-hell); color: var(--stahl-tief); }
.knopf.gefahr { background: var(--blatt); color: var(--fehler); border-color: var(--fehler); }
.knopf.gefahr:hover { background: var(--fehler-hell); }
.knopf.klein { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: var(--groesse-klein); }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 1rem; max-width: 44rem; }
.formular-raster { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.feld { display: flex; flex-direction: column; gap: 0.25rem; }
.feld label, .feld .bezeichnung { font-size: var(--groesse-klein); font-weight: 500; }
.feld .hilfe { font-size: var(--groesse-klein); color: var(--graphit-weich); }
input[type="text"], input[type="search"], input[type="password"], input[type="date"], input[type="number"], input[type="email"], select, textarea {
	font: inherit; color: inherit; background: var(--blatt);
	border: 1px solid var(--linie); border-radius: var(--r-klein);
	padding: 0.5rem 0.625rem; min-height: 2.5rem; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--stahl); }
.feld.fehlerhaft input, .feld.fehlerhaft select { border-color: var(--fehler); }
.auswahl { display: flex; align-items: center; gap: 0.5rem; }
.auswahl input { width: 1.125rem; height: 1.125rem; accent-color: var(--stahl); }
.formular-fuss { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; }

/* ---------- Meldungen ---------- */
.meldung { padding: 0.75rem 1rem; border-radius: var(--r-mittel); margin-bottom: 1rem; border-left: 4px solid; background: var(--blatt); }
.meldung.erfolg { border-color: var(--gut); background: var(--gut-hell); }
.meldung.fehler { border-color: var(--fehler); background: var(--fehler-hell); }
.meldung.hinweis { border-color: var(--signal); background: var(--signal-hell); }
.meldung ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* ---------- Reiter (z. B. Auftragsseite) ---------- */
.reiter { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; overflow-x: auto; }
.reiter a { padding: 0.5rem 0.875rem; text-decoration: none; color: var(--graphit-weich); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter a[aria-current="page"] { color: var(--graphit); border-bottom-color: var(--stahl); font-weight: 500; }

/* ---------- Angaben-Liste (Feld: Wert) ---------- */
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 0.375rem 1.25rem; margin: 0; }
.angaben dt { color: var(--graphit-weich); font-size: var(--groesse-klein); padding-top: 0.125rem; }
.angaben dd { margin: 0; }

/* ---------- Verlauf (Arbeitsschritte mit Datum) ---------- */
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { display: grid; grid-template-columns: 1.25rem 1fr auto; gap: 0.5rem; padding: 0.375rem 0; border-bottom: 1px dashed var(--linie-leise); align-items: baseline; }
.verlauf li:last-child { border-bottom: 0; }
.verlauf .punkt { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 2px solid var(--linie); margin-top: 0.3rem; }
.verlauf li.erledigt .punkt { background: var(--gut); border-color: var(--gut); }
.verlauf li.naechster .punkt { border-color: var(--signal); background: var(--signal); }

/* ---------- Anmeldeseite ---------- */
.anmeldung-seite { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--rail); }
.anmeldung { width: min(100%, 24rem); background: var(--blatt); border-radius: var(--r-mittel); padding: 2rem; border-top: 4px solid var(--signal); }
.anmeldung h1 { font-size: 1.75rem; margin-bottom: 0.125rem; }
.anmeldung .untertitel { color: var(--graphit-weich); margin-bottom: 1.5rem; }
.anmeldung .knopf { width: 100%; }

/* ---------- Fehlerseiten ---------- */
.fehlerseite { max-width: 36rem; margin: 15vh auto; padding: 0 1.5rem; }
.fehlerseite pre { white-space: pre-wrap; font-size: 0.75rem; background: var(--blatt); padding: 1rem; border: 1px solid var(--linie); overflow-x: auto; }

/* ---------- Klein: Tablet & Handy ---------- */
@media (max-width: 900px) {
	.geruest { grid-template-columns: 1fr; }
	.rail { position: static; height: auto; padding: 0; gap: 0; }
	.rail-kopf { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; }
	.menue-schalter { display: block; }
	.menue-schalter summary { list-style: none; cursor: pointer; color: var(--rail-aktiv); padding: 0.25rem 0.5rem; border: 1px solid rgb(255 255 255 / 0.25); border-radius: var(--r-klein); }
	.menue-schalter summary::-webkit-details-marker { display: none; }
	.rail-menue { display: none; padding: 0 0.75rem 1rem; }
	.menue-schalter[open] ~ .rail-menue, .rail:has(.menue-schalter[open]) .rail-menue { display: block; }
	.kopf { padding: 0.625rem 1rem; position: static; }
	.kopf-benutzer .name { display: none; }
	.inhalt { padding: 1rem; }
}
@media (min-width: 901px) {
	.rail-kopf .menue-schalter { display: none; }
	.rail-menue { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
}

/* Tabellen werden auf dem Handy zu Karten: jede Zelle trägt ihre Spaltenüberschrift in data-label */
@media (max-width: 720px) {
	table.tabelle.karten thead { display: none; }
	table.tabelle.karten, .tabelle.karten tbody, .tabelle.karten tr, .tabelle.karten td { display: block; width: 100%; }
	.tabelle.karten tr { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--linie); }
	.tabelle.karten td { border: 0; padding: 0.125rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
	.tabelle.karten td::before { content: attr(data-label); color: var(--graphit-weich); text-align: left; }
	.tabelle.karten td.titel { font-size: var(--groesse-text); font-weight: 500; text-align: left; }
	.tabelle.karten td.titel::before { content: none; }
	.ablauf { grid-template-columns: 1fr; }
	.ablauf a::after { display: none; }
	.ablauf a { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; border-right: 0; border-bottom: 1px solid var(--linie-leise); padding: 0.625rem 0.875rem; }
	.ablauf a:last-child { border-bottom: 0; }
	.ablauf .schritt { flex: 1; font-size: var(--groesse-text); color: var(--graphit); }
	.ablauf .anzahl { font-size: 1.5rem; }
	.ablauf .hinweis { flex-basis: 100%; }
	.ablauf a.dringend { box-shadow: inset 3px 0 0 var(--signal); }
	.angaben { grid-template-columns: 1fr; gap: 0 0; }
	.angaben dd { margin-bottom: 0.5rem; }
}

/* ---------- Druck ---------- */
#druckbereich { display: none; }
.knopf-reihe { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
@media print {
	body.druckt > *:not(#druckbereich) { display: none !important; }
	body.druckt #druckbereich { display: block; }
	#druckbereich h1 { font-size: 13pt; margin: 0 0 8pt; }
	#druckbereich table { width: 100%; border-collapse: collapse; font-size: 10pt; }
	#druckbereich th, #druckbereich td { border-bottom: 0.5pt solid #999; padding: 4pt 6pt; text-align: left; vertical-align: top; }
	#druckbereich th { border-bottom: 1pt solid #000; font-weight: 700; }
	#druckbereich .zahl { text-align: right; }
	#druckbereich tfoot td { border-top: 1pt solid #000; border-bottom: 0; font-weight: 700; }
	#druckbereich .leise { color: #444; }
	.rail, .kopf, .aktionen, .reiter, .formular-fuss, .kartei-symbol, .we-symbol, .leiste-schalter { display: none !important; }
	.geruest { display: block; }
	body { background: #fff; color: #000; font-size: 10pt; }
	.flaeche { border: 0; }
	.inhalt { padding: 0; max-width: none; }
	a { color: #000; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}
.rail-link { color: inherit; }
.rail-version { margin-top: 0.75rem; }
.notizen { white-space: pre-wrap; font-family: inherit; margin: 0; }
.rail-fuss { border-top: 1px solid rgb(255 255 255 / 0.1); padding-top: 0.75rem; }

/* ---------- Filterleiste (Listen) ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; padding: 0.75rem 1rem; border-bottom: 1px solid var(--linie-leise); }
.filter .feld { min-width: 9rem; }
.filter .feld.breit { flex: 1; min-width: 14rem; }
.filter select, .filter input { min-height: 2.25rem; padding-block: 0.375rem; }
.treffer { padding: 0.5rem 1rem; font-size: var(--groesse-klein); color: var(--graphit-weich); border-bottom: 1px solid var(--linie-leise); }

/* Umschalter mit wenigen festen Möglichkeiten (z. B. Bereich: Alle / RC Ost / AZ1) */
.umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--r-klein); overflow: hidden; }
.umschalter button { font: inherit; font-size: var(--groesse-klein); padding: 0.4rem 0.75rem; min-height: 2.25rem; background: var(--blatt); color: var(--graphit); border: 0; border-right: 1px solid var(--linie); cursor: pointer; }
.umschalter button:last-child { border-right: 0; }
.umschalter button[aria-pressed="true"] { background: var(--stahl); color: var(--auf-stahl); }

/* Bereichs-Kennung neben der Auftragsnummer */
.bereich { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 0 0.3rem; border-radius: 3px; margin-left: 0.375rem; vertical-align: 0.1em; border: 1px solid var(--linie); color: var(--graphit-weich); }
.bereich.az1 { border-color: var(--stahl); color: var(--stahl); }

/* Fortschritt gegenüber Soll */
.fortschritt { height: 0.5rem; background: var(--zink-tief); border-radius: 999px; overflow: hidden; margin: 0.5rem 0 0.25rem; }
.fortschritt span { display: block; height: 100%; background: var(--stahl); border-radius: inherit; }
.kennzahl { font-size: var(--groesse-gross); font-weight: 600; }

/* Ablagefeld für Dokumente */
.ablage { border: 2px dashed var(--linie); border-radius: var(--r-mittel); padding: 1.25rem; text-align: center; color: var(--graphit-weich); }

/* Auftragskopf */
.auftragskopf { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.auftragskopf h1 { margin: 0; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; }
.zweispaltig > * { min-width: 0; }
@media (max-width: 1100px) { .zweispaltig { grid-template-columns: 1fr; } }
.summe td { font-weight: 600; border-top: 1px solid var(--linie); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.stapel { display: flex; flex-direction: column; gap: 1.25rem; }
.stapel > .flaeche { margin-bottom: 0; }
.einrichtung { max-width: 52rem; margin: 0 auto; }

/* ---------- Ergänzungen 0.3: Umschalter als Links, Blättern, Ankreuzfeld im Filter, Bericht ---------- */
.umschalter a { font-size: var(--groesse-klein); padding: 0.4rem 0.75rem; min-height: 2.25rem; display: inline-flex; align-items: center; background: var(--blatt); color: var(--graphit); border-right: 1px solid var(--linie); text-decoration: none; }
.umschalter a:last-child { border-right: 0; }
.umschalter a[aria-pressed="true"] { background: var(--stahl); color: var(--auf-stahl); }
.ankreuzen { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--groesse-klein); min-height: 2.25rem; }
.blaettern { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--linie-leise); }
.vorformatiert { white-space: pre-line; }
.bericht-ok { color: var(--gut); font-weight: 500; }
.bericht-fehler { color: var(--fehler); font-weight: 500; }
.tabelle tr.abweichung td { background: var(--fehler-hell); }

/* ---------- Ausführung: Druckstufe | Dichtheitsklasse | Folie ---------- */
.ausfuehrung { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); border-bottom: 1px solid var(--linie-leise); }
.ausfuehrung-gruppe { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem 1rem; border-right: 1px solid var(--linie-leise); }
.ausfuehrung-gruppe:last-child { border-right: 0; }
.ausfuehrung-gruppe .bezeichnung { font-size: var(--groesse-klein); font-weight: 600; }
.ausfuehrung-gruppe .schritte span { min-width: 2rem; font-size: var(--groesse-klein); padding: 0.125rem 0.375rem; }
@media (max-width: 40rem) { .ausfuehrung-gruppe { border-right: 0; border-bottom: 1px solid var(--linie-leise); } .ausfuehrung-gruppe:last-child { border-bottom: 0; } }

/* Fortschrittsbalken ohne Inline-Stil (Content-Security-Policy) */
progress.fortschritt-balken { display: block; width: 100%; height: 0.5rem; margin: 0.5rem 0 0.25rem; border: 0; border-radius: 999px; background: var(--zink-tief); overflow: hidden; appearance: none; }
progress.fortschritt-balken::-webkit-progress-bar { background: var(--zink-tief); border-radius: 999px; }
progress.fortschritt-balken::-webkit-progress-value { background: var(--stahl); border-radius: 999px; }
progress.fortschritt-balken::-moz-progress-bar { background: var(--stahl); border-radius: 999px; }

/* ---------- Planung: Monatskalender ---------- */
.flaeche.heute { box-shadow: inset 4px 0 0 var(--signal); }
.kalender { display: grid; grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr)); }
.kalender-kw { display: flex; align-items: flex-start; justify-content: center; padding: 0.375rem 0.25rem; font-size: var(--groesse-klein); font-weight: 600; color: var(--graphit-weich); background: var(--zink); border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie-leise); text-decoration: none; }
a.kalender-kw:hover { background: var(--stahl-hell); color: var(--stahl-tief); }
.kalender-kw-kopf { border-right: 1px solid var(--linie); }
.kalender-kopf { padding: 0.5rem; font-size: var(--groesse-klein); font-weight: 600; text-align: center; border-bottom: 1px solid var(--linie); }
.kalender-tag { display: flex; flex-direction: column; gap: 0.125rem; min-height: 5.5rem; padding: 0.375rem 0.5rem; border-right: 1px solid var(--linie-leise); border-bottom: 1px solid var(--linie-leise); color: var(--graphit); text-decoration: none; }
.kalender-tag.sonntag { border-right: 0; }
a.kalender-tag:hover { background: var(--stahl-hell); }
.kalender-tag.leer, .kalender-tag.wochenende { background: var(--zink); }
.kalender-tag.heute { box-shadow: inset 0 3px 0 var(--signal); }
.kalender-tag .datum { font-weight: 600; }
.kalender-zahl { font-weight: 500; }
@media (max-width: 40rem) { .kalender-tag { min-height: 4rem; padding: 0.25rem; font-size: 0.75rem; } .kalender-tag .klein { display: none; } }
.balken-zelle { display: flex; align-items: center; gap: 0.5rem; min-width: 8rem; }
.balken-zelle progress { flex: 1; margin: 0; }
.tabelle tr.zukunft td { color: var(--graphit-weich); }
.seitenkopf form.aktionen { align-items: center; }
.seitenkopf form.aktionen select { width: auto; min-width: 7rem; }

/* ---------- Planung: Gruppen der Tagesplanung, je Gruppe eine feste Farbe ---------- */
.gruppe-polen { --gruppe: #c98a00; }
.gruppe-stadtbote { --gruppe: #1e5a7a; }
.gruppe-direkt { --gruppe: #2e7d4f; }
.gruppe-direkt_az1 { --gruppe: #5a9e6f; }
.gruppe-abholer { --gruppe: #7b4fa0; }
.gruppe-paket { --gruppe: #c4561d; }
.gruppe-extern { --gruppe: #8a6d52; }
.gruppe-reservierung { --gruppe: #7d8a91; }
.gruppe-spedition_az1 { --gruppe: #0f7c8c; }
.gruppe-stueckgut { --gruppe: #a33a5b; }
.gruppe-sonstige { --gruppe: #a0a8ad; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gruppe-stadtbote { --gruppe: #5aa3cc; }
	:root:not([data-theme="light"]) .gruppe-abholer { --gruppe: #a885cc; }
}

.gruppen-leiste { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.25rem; }
.gruppen-leiste a { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.625rem 0.3rem 0.3rem; border-radius: 999px; background: var(--blatt); border: 1px solid var(--linie); color: var(--graphit); text-decoration: none; font-size: var(--groesse-klein); }
.gruppen-leiste a:hover { border-color: var(--gruppe); }
.gruppen-leiste .nr { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--gruppe); color: #fff; font-weight: 600; font-size: 0.75rem; }
.gruppen-leiste .anzahl { font-weight: 600; }
.gruppen-leiste a.leer { opacity: 0.55; }

.flaeche.gruppe { border-top: 4px solid var(--gruppe); }
.flaeche.gruppe h2 { display: flex; align-items: center; gap: 0.5rem; }
.flaeche.gruppe h2 .nr { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--gruppe); color: #fff; font-size: 0.875rem; }
.gruppe-punkt { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--gruppe); margin: 0 0.25rem 0 0.125rem; vertical-align: baseline; }

.wochenraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; align-items: start; }
.tageskarte h2 a { color: inherit; text-decoration: none; }
.tageskarte h2 a:hover { text-decoration: underline; }
.gruppen-liste { list-style: none; margin: 0; padding: 0.5rem 0.75rem 0.75rem; }
.gruppen-liste > li { border-left: 4px solid var(--gruppe); padding: 0.25rem 0 0.25rem 0.5rem; margin-bottom: 0.375rem; }
.gruppen-liste > li > a { display: flex; gap: 0.375rem; align-items: center; color: var(--graphit); text-decoration: none; font-weight: 500; font-size: var(--groesse-klein); }
.gruppen-liste > li > a .gruppe-punkt { display: none; }
.gruppen-liste > li > a .anzahl { margin-left: auto; font-weight: 600; }
.gruppen-liste ul { list-style: none; margin: 0.125rem 0 0; padding: 0; color: var(--graphit-weich); }

.kalender-gruppen { display: flex; flex-wrap: wrap; gap: 0.1875rem; }
.kalender-marke { display: inline-flex; gap: 0.125rem; align-items: baseline; padding: 0 0.3rem; border-radius: 3px; background: var(--gruppe); color: #fff; font-size: 0.6875rem; line-height: 1.4; }
.kalender-marke b { font-weight: 600; }
.kalender-marke b::before { content: "·"; margin-right: 0.125rem; font-weight: 400; }
@media (max-width: 720px) { .tabelle.karten td:empty { display: none; } }
.dateiliste { columns: 2 20rem; margin: 0.5rem 0 0; padding-left: 1.25rem; }
.tabelle tfoot tr.summe td { background: var(--zink); border-top: 2px solid var(--gruppe, var(--linie)); }
.legende { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; max-width: none; }
.kopier-ablage { position: fixed; left: -10000px; top: 0; }
.gruppen-liste .nr-link { font-variant-numeric: tabular-nums; font-weight: 500; margin-right: 0.25rem; }
.ohne-umbruch { white-space: nowrap; }
.gruppen-liste ul li { padding-left: 2.6em; text-indent: -2.6em; }
.wochen-summe { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--linie-leise); text-align: right; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lieferant-kurz { display: inline-block; min-width: 1.1rem; text-align: center; font-size: 0.6875rem; font-weight: 600; text-indent: 0; border: 1px solid var(--linie); border-radius: 3px; color: var(--stahl); background: var(--blatt); margin-right: 0.125rem; }
.gruppen-liste .bauteile { display: table; margin: 0.1875rem 0 0.0625rem; padding: 0.0625rem 0.4375rem; border-radius: 3px; background: var(--stahl-hell); color: var(--stahl-tief); font-size: 0.75rem; font-style: italic; line-height: 1.4; text-indent: 0; }
.gruppen-liste ul li { padding-top: 0.1875rem; padding-bottom: 0.1875rem; border-bottom: 1px solid var(--linie-leise); }
.gruppen-liste ul li:last-child { border-bottom: 0; }

/* Anwesende Mitarbeiter als blaue Kürzel (M | S) */
.anwesend { display: inline-flex; align-items: center; gap: 0.1875rem; vertical-align: middle; }
.mitarbeiter-kurz { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border-radius: 4px; background: var(--stahl); color: var(--auf-stahl); font-size: 0.6875rem; font-weight: 600; line-height: 1; }
.anwesend .trenner { color: var(--graphit-weich); font-size: 0.75rem; }
.kalender-tag .anwesend { margin-top: auto; }
.wochen-summe { margin: 0.375rem 0 0.25rem; padding: 0.3125rem 0.5rem; border-top: 2px solid var(--gruppe, var(--linie)); background: var(--zink); background: color-mix(in srgb, var(--gruppe, #888) 10%, var(--blatt)); border-radius: 0 0 4px 4px; }

/* ---------- Formulare (Auftrag anlegen/bearbeiten) ---------- */
input:not([type]), input[type="time"] { font: inherit; width: 100%; min-height: 2.5rem; padding: 0.5rem 0.625rem; border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--blatt); color: var(--graphit); }
input:not([type]):focus-visible, input[type="time"]:focus-visible { border-color: var(--stahl); }
.formular-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.875rem 1rem; align-items: start; }
.formular-raster .breit { grid-column: 1 / -1; }
.formular-raster > div > .feld { width: 100%; }
.feld .fehlertext { color: var(--fehler); }
.feld.fehlerhaft input, .feld.fehlerhaft select { border-color: var(--fehler); }
.haken-reihe { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.umschalter-radio { display: flex; gap: 1rem; min-height: 2.5rem; align-items: center; }
.umschalter-radio label { display: inline-flex; gap: 0.375rem; align-items: center; }
fieldset.ausfuehrung-gruppe { margin: 0; border: 0; border-right: 1px solid var(--linie-leise); min-width: 0; }
fieldset.ausfuehrung-gruppe legend { padding: 0; margin-bottom: 0.25rem; }
fieldset.ausfuehrung-gruppe .ankreuzen { display: flex; min-height: 1.75rem; }
.auftragsformular[data-bereich="rc_ost"] .nur-az1, .auftragsformular[data-bereich="az1"] .nur-rc { display: none; }
.auftragsformular[data-art="auftragseingang"] .ohne-ae, .auftragsformular:not([data-art="auftragseingang"]) .nur-ae { display: none; }
.hinweis-ae { margin: 0; padding: 0.5rem 0.75rem; border-left: 4px solid var(--signal); background: var(--signal-hell); font-size: var(--groesse-klein); }
/* AZ1-Aufträge farbig hinterlegt, damit sie nicht mit RC Ost verwechselt werden */
.auftragsformular[data-bereich="az1"] .flaeche { background: color-mix(in srgb, var(--stahl) 16%, var(--blatt)); border-color: var(--stahl); box-shadow: inset 4px 0 0 var(--stahl); }
.auftragsformular[data-bereich="az1"] .flaeche > header { background: var(--stahl); border-bottom-color: var(--stahl); border-radius: var(--r-mittel) var(--r-mittel) 0 0; }
.auftragsformular[data-bereich="az1"] .flaeche > header h2 { color: var(--blatt); }
.auftragsformular[data-bereich="az1"] .flaeche > header h2::after { content: " · AZ1"; }
.auftragsformular .flaeche { margin-bottom: 1rem; }
.formular-fuss { position: sticky; bottom: 0; background: var(--grund, var(--zink)); padding: 0.75rem 0; z-index: 2; }
.gefahrenzone { border-top: 4px solid var(--fehler); margin-top: 2rem; }
.verlauf li.schritt-zeile { align-items: center; }
.verlauf li.schritt-zeile form { margin: 0; }
.weitere-schritte { margin-top: 0.5rem; }
.aenderungen { margin: 0; padding-left: 1rem; }
.aenderungen .alt { text-decoration: line-through; color: var(--graphit-weich); }
.feld.haken-reihe { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.5rem; }

/* Ausführung auf der Auftragsseite: gewählte Werte kräftig, nicht gewählte zurückgenommen */
.ausfuehrung-gruppe .schritte { gap: 0.3125rem; }
.ausfuehrung-gruppe .schritte span { min-width: 2.25rem; height: 1.875rem; display: inline-grid; place-items: center; padding: 0 0.5rem; font-size: 0.875rem; font-weight: 500; border-radius: 6px; background: transparent; color: var(--graphit-weich); border: 1px dashed var(--linie); opacity: 0.7; }
.ausfuehrung-gruppe .schritte span.ja { background: var(--gut); color: var(--auf-gut); border: 1px solid var(--gut); font-weight: 700; opacity: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.tabelle tfoot.ertrag td { background: var(--zink); }
.tabelle tfoot.ertrag tr:first-child td { border-top: 2px solid var(--linie); }
.tabelle tfoot.ertrag tr.rohertrag td { font-weight: 700; font-size: 1.0625rem; background: var(--gut-hell); color: var(--gut); border-top: 1px solid var(--gut); }
.tabelle tfoot.ertrag tr.rohertrag.negativ td { background: var(--fehler-hell); color: var(--fehler); border-top-color: var(--fehler); }

/* Planung: Datum direkt im Kalender wählen */
.datum-sprung { display: flex; gap: 0.5rem; align-items: center; }
.datum-sprung input[type="date"] { width: auto; min-height: 2.5rem; border-color: var(--stahl); color: var(--stahl); font-weight: 500; cursor: pointer; }
.datum-sprung [hidden] { display: none; }

/* Stammdaten: Zusammenführen und Eingabetabellen */
.vergleich-wahl { display: block; cursor: pointer; border: 2px solid var(--linie-leise); }
.vergleich-wahl header h2 { display: flex; gap: 0.5rem; align-items: center; }
.vergleich-wahl .bleibt-etikett { visibility: hidden; background: var(--gut); color: var(--auf-gut); }
.vergleich-wahl:has(input:checked) { border-color: var(--gut); }
.vergleich-wahl:has(input:checked) .bleibt-etikett { visibility: visible; }
.eingabe-tabelle td { padding: 0.25rem 0.375rem; }
.eingabe-tabelle input { width: 100%; min-width: 8rem; }

.liste-nummern { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.probebetrieb { cursor: help; }

.auswahl-tabelle .schmal { width: 5rem; min-width: 0; text-align: right; }
.auswahl-tabelle tr.ausgeblendet input:not([type="checkbox"]) { color: var(--graphit-weich); text-decoration: line-through; }
.auswahl-tabelle td.fehlerhaft input { border-color: var(--fehler); }
.auswahl-tabelle .neu-zeile td { background: var(--zink); }

/* Notizen */
.notiz { background: var(--blatt); border: 1px solid var(--linie-leise); border-left: 4px solid var(--linie); border-radius: var(--r-klein); padding: 0.625rem 0.875rem; }
.notiz-gut { border-left-color: var(--gut); }
.notiz-warn { border-left-color: var(--warn); }
.notiz-fehler { border-left-color: var(--fehler); }
.notiz-erledigt { opacity: 0.65; }
.notiz header { display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; align-items: center; margin-bottom: 0.25rem; }
.notiz-datum { font-weight: 600; }
.notiz-aktionen { margin-left: auto; display: inline-flex; gap: 0.375rem; }
.notiz-aktionen form { display: inline; }
.notiz p { margin: 0; }
.notizen-kompakt .notiz { padding: 0.5rem 0.625rem; font-size: var(--groesse-klein); }
.notiz-aufklapp summary { cursor: pointer; color: var(--stahl); font-weight: 500; }
.notiz-aufklapp[open] summary { margin-bottom: 0.75rem; }
.notiz-zahl { white-space: nowrap; margin-left: auto; margin-right: 0.375rem; font-size: 0.75rem; font-weight: 600; text-decoration: none; padding: 0.0625rem 0.375rem; border-radius: 3px; background: var(--stahl-hell); color: var(--stahl-tief); }
.notiz-zahl.problem { background: var(--fehler-hell); color: var(--fehler); }
.umschalter .zaehler { display: inline-block; min-width: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--signal); color: var(--graphit); font-size: 0.75rem; text-align: center; }

/* Anwesenheit */
.legende { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; }
.kal-muster { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 2px; border: 1px solid var(--linie); vertical-align: middle; margin-right: 0.25rem; }
.kal-muster.kal-da, .kal-tabelle td.kal-da { background: var(--blatt); }
.kal-muster.kal-weg, .kal-tabelle td.kal-weg { background: var(--fehler-hell); }
.kal-muster.feiertag, .kal-tabelle td.feiertag { background: var(--signal-hell); }
.kal-muster.wochenende, .kal-tabelle .wochenende { background: var(--zink); }
.kal-tabelle { border-collapse: collapse; width: 100%; font-size: 0.75rem; table-layout: fixed; }
.kal-tabelle th, .kal-tabelle td { border: 1px solid var(--linie-leise); text-align: center; padding: 0; height: 1.875rem; }
.kal-tabelle thead th { font-weight: 500; padding: 0.125rem 0; line-height: 1.2; }
.kal-tabelle thead th.heute { box-shadow: inset 0 -3px 0 var(--stahl); }
.kal-tabelle tbody th { text-align: left; padding: 0 0.5rem; width: 7rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-tabelle thead th:first-child { width: 7rem; }
.kal-tabelle td button { width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--fehler); font-weight: 700; padding: 0; }
.kal-tabelle td button:hover { box-shadow: inset 0 0 0 2px var(--stahl); }
.kal-tabelle td.kal-weg { color: var(--fehler); font-weight: 700; }
.kal-tabelle td.feiertag { color: var(--graphit-weich); font-weight: 600; }
.kal-monat .tabelle-rahmen { overflow-x: auto; }
.kal-monat .kal-tabelle { min-width: 44rem; }
.feiertag-etikett { background: var(--signal-hell); color: var(--graphit); box-shadow: inset 3px 0 0 var(--signal); }
.kalender-tag.feiertag { background: var(--signal-hell); }

/* Dokumente */
.dokument-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.dokument-feld { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem 1rem; border-right: 1px solid var(--linie-leise); align-items: flex-start; }
.dokument-feld:last-child { border-right: 0; }
.dokument-feld.vorhanden .dokument-kopf strong { color: var(--gut); }
.dokument-hochladen { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.25rem; align-items: flex-start; max-width: 100%; }
.dokument-hochladen input[type="file"] { font-size: var(--groesse-klein); max-width: 100%; }
.dok-marken { display: inline-flex; gap: 2px; }
.dok-marken a { font-size: 0.6875rem; font-weight: 700; padding: 0.0625rem 0.3rem; border-radius: 3px; background: var(--stahl-hell); color: var(--stahl-tief); text-decoration: none; }
.inline-form { display: inline-flex; gap: 0.25rem; align-items: center; }
.hochladen-frei { border-top: 1px solid var(--linie-leise); background: var(--zink); }
.jahr-wahl { width: auto; min-height: 0; padding: 0.125rem 0.375rem; font-size: var(--groesse-klein); }

/* Arbeitsablauf: Trennzeile je Liefertermin */
.tag-trenner th { background: var(--stahl); color: var(--auf-stahl); text-align: left; font-weight: 600; font-size: 0.9375rem; padding: 0.625rem 0.875rem; border: 0; }
.tag-gruppe + .tag-gruppe .tag-trenner th { border-top: 0.875rem solid var(--blatt); }
.tag-trenner .tag-titel { display: inline-flex; gap: 0.375rem; align-items: baseline; }
.tag-trenner .tag-wochentag { font-weight: 700; }
.tag-trenner .tag-hinweis { margin-left: 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.125rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.2); }
.tag-trenner .tag-anzahl { float: right; font-size: 0.8125rem; font-weight: 600; padding: 0.125rem 0.625rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.tag-trenner.vergangen th { box-shadow: inset 6px 0 0 var(--fehler); }
.tag-trenner.vergangen .tag-hinweis { background: var(--fehler); color: #fff; }
.tag-trenner.heute th { background: var(--gut); color: var(--auf-gut); }
.tag-trenner.heute .tag-hinweis, .tag-trenner.heute .tag-anzahl { background: rgba(0, 0, 0, 0.12); }
@media (max-width: 720px) { .tabelle.karten .tag-trenner, .tabelle.karten .tag-trenner th { display: block; } }
.spalte-erledigt { width: 1%; white-space: nowrap; text-align: right; }

/* Arbeitsablauf: Zahl offener Aufträge je Liste als farbiger Kreis */
.reiter-zahl { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; margin-left: 0.25rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--stahl); vertical-align: middle; }
.reiter-zahl.liste-be { background: #c98a00; }
.reiter-zahl.liste-ab { background: #2e7d4f; }
.reiter-zahl.liste-ab_pl { background: #7b4fa0; }
.reiter-zahl.liste-ls { background: #1e5a7a; }
.reiter-zahl.liste-fak { background: #c4561d; }
.reiter-zahl.liste-re { background: #b3261e; }
.reiter-zahl.null { background: var(--zink); color: var(--graphit-weich); }

/* Planung Tagesansicht: Notizen oben, zum Aufklappen */
.notizen-tag > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none; }
.notizen-tag > summary::-webkit-details-marker { display: none; }
.notizen-tag > summary::before { content: '▸'; color: var(--stahl); font-size: 0.875rem; transition: transform 0.15s; }
.notizen-tag[open] > summary::before { transform: rotate(90deg); }
.notizen-tag[open] > summary { border-bottom: 1px solid var(--linie-leise); }
.notizen-titel { font-weight: 600; }
.notizen-vorschau { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notizen-auf { margin-left: auto; color: var(--stahl); font-weight: 500; }
.notizen-tag[open] .notizen-vorschau, .notizen-tag[open] .notizen-auf { display: none; }
.notiz-neu-rahmen { border-top: 1px dashed var(--linie); padding-top: 0.75rem; }
.notiz-neu-rahmen h3 { margin: 0 0 0.5rem; }

/* Planung Woche: Kopf jedes Tages als kräftiger Balken */
.tageskarte > header { background: var(--stahl); color: var(--auf-stahl); border-bottom: 0; border-radius: var(--r-mittel) var(--r-mittel) 0 0; padding: 0.625rem 0.875rem; }
.tageskarte > header h2 a { display: flex; flex-direction: column; line-height: 1.15; color: inherit; }
.tageskarte .karte-wochentag { font-size: 1rem; font-weight: 700; }
.tageskarte .karte-datum { margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 500; opacity: 0.85; }
.tageskarte > header .mitarbeiter-kurz { background: var(--blatt); color: var(--stahl); }
.tageskarte > header .anwesend .trenner { color: var(--auf-stahl); opacity: 0.7; }
.tageskarte > header .notiz-zahl { background: rgba(255, 255, 255, 0.2); color: var(--auf-stahl); }
.tageskarte > header .notiz-zahl.problem { background: var(--fehler); color: #fff; }
.tageskarte > header .feiertag-etikett { background: var(--signal); color: var(--graphit); box-shadow: none; }
.tageskarte.heute > header { background: var(--gut); color: var(--auf-gut); }
.tageskarte.heute > header .mitarbeiter-kurz { color: var(--gut); }
.tageskarte.feiertag > header { background: var(--graphit-weich); }

/* Planung Woche: Tagesnotiz als farbiges N (rot = Problem/offene Erinnerung, gelb = mittel, grün = sonst) */
.notiz-icon { flex-shrink: 0; display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; margin-left: auto; margin-right: 0.375rem; border-radius: 4px; font-size: 0.75rem; font-weight: 800; text-decoration: none; color: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
.notiz-icon.rot { background: #c62828; }
.notiz-icon.gelb { background: #f2b705; color: #2b2b2b; }
.notiz-icon.gruen { background: #2e9d5a; }

/* Planung Woche: Überschrift je Lieferart deutlich absetzen */
.gruppen-liste > li > a { margin: -0.25rem 0 0.25rem -0.5rem; padding: 0.375rem 0.5rem; background: color-mix(in srgb, var(--gruppe) 16%, var(--blatt)); color: var(--graphit); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.01em; border-bottom: 2px solid var(--gruppe); }
.gruppen-liste > li > a .anzahl { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.3rem; border-radius: 999px; background: var(--gruppe); color: #fff; font-size: 0.75rem; }
.gruppen-liste > li { margin-bottom: 0.875rem; }
.gruppen-liste > li:last-child { margin-bottom: 0; }

/* Karte der Lieferorte */
.karte-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .karte-raster { grid-template-columns: 1fr; } }
.tourkarte { height: 70vh; min-height: 24rem; border-radius: var(--r-mittel) var(--r-mittel) 0 0; }
.karte-hinweis { margin: 0; padding: 0.375rem 0.75rem; }
.tour-marker { display: grid !important; place-items: center; background: var(--stahl); color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.tour-popup { font-size: 0.8125rem; line-height: 1.45; }
.tour-popup-titel { display: block; font-weight: 700; margin-bottom: 0.25rem; }

/* Tourenplanung */
.nur-druck { display: none; }
.tourliste { list-style: none; margin: 0; padding: 0.5rem 1rem 1rem; }
.tourliste > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; padding: 0.5rem 0.625rem; border: 1px solid var(--linie-leise); border-radius: var(--r-klein); margin-bottom: 0.375rem; background: var(--blatt); }
.tourliste > li.tour-kopf { background: var(--stahl); color: var(--auf-stahl); border-color: var(--stahl); margin-top: 0.875rem; font-weight: 600; }
.tourliste > li.tour-kopf:first-child { margin-top: 0; }
.tourliste > li.tour-kopf.zu-voll { background: var(--fehler); border-color: var(--fehler); }
.tour-titel { font-weight: 700; }
.tour-summe { font-size: var(--groesse-klein); font-weight: 500; opacity: 0.9; }
.tour-trenner [data-trenner-weg] { margin-left: auto; }
.tour-trenner[draggable="true"] { cursor: grab; }
.tour-auftrag[draggable="true"] { cursor: grab; }
.tour-auftrag.neu { box-shadow: inset 4px 0 0 var(--signal); }
.tourliste > li.zieht { opacity: 0.45; outline: 2px dashed var(--stahl); }
.greifer { color: var(--graphit-weich); letter-spacing: -0.1em; }
.tour-nr { font-weight: 700; background: var(--signal-hell); padding: 0.0625rem 0.375rem; border-radius: 3px; text-decoration: none; }
.tour-kunde { flex: 1 1 14rem; min-width: 0; }
.tour-plz { font-variant-numeric: tabular-nums; color: var(--graphit-weich); }
.tour-wert { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.tour-stueck { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--stahl); font-weight: 700; font-size: 0.8125rem; }
.tour-bauteile { flex-basis: 100%; margin-left: 1.75rem; font-size: 0.75rem; font-style: italic; color: var(--stahl-tief); }
.tour-knoepfe { display: inline-flex; gap: 0.25rem; }
.tour-fuss { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
@media print {
	.nicht-drucken, .tour-erledigt, .seitenkopf, .seitenkopf + p, p.klein:first-child { display: none !important; }
	.nur-druck { display: block; }
	.tourliste > li { break-inside: avoid; border-color: #999; }
	.tourliste > li.tour-kopf { background: #eee !important; color: #000 !important; border-color: #000; }
	.tour-nr { background: #ff0 !important; }
}

.tourliste > li.tour-auftrag { display: grid; grid-template-columns: 1.25rem 5rem minmax(0, 1fr) 3.5rem 5rem 5rem 2rem auto; align-items: center; gap: 0.25rem 0.75rem; }
.tourliste > li.tour-auftrag .tour-bauteile { grid-column: 3 / 8; grid-row: 2; margin-left: 0; }
.tourliste > li.tour-auftrag .tour-knoepfe { grid-column: 8; grid-row: 1; }
.tour-nr { justify-self: start; }
@media (max-width: 720px) { .tourliste > li.tour-auftrag { grid-template-columns: 1.25rem 4.5rem minmax(0, 1fr) auto; } .tour-plz, .tour-wert { display: none; } .tourliste > li.tour-auftrag .tour-knoepfe { grid-column: 4; } .tourliste > li.tour-auftrag .tour-bauteile { grid-column: 3 / 5; } }
@media print { .tourliste > li.tour-auftrag { grid-template-columns: 5rem minmax(0, 1fr) 3.5rem 5rem 5rem 2rem; } .tourliste > li.tour-auftrag .tour-bauteile { grid-column: 2 / 7; } }

/* Tourenplanung mit Karte nebeneinander; Farbe je Tour (Karte und Liste) */
.tour-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 1fr); gap: 1.25rem; align-items: start; }
.tour-raster .karte-flaeche { position: sticky; top: 1rem; }
.tour-raster .tourkarte { height: calc(100vh - 9rem); min-height: 26rem; }
@media (max-width: 1100px) { .tour-raster { grid-template-columns: 1fr; } .tour-raster .karte-flaeche { position: static; } .tour-raster .tourkarte { height: 55vh; } }
.tour-raster .tourliste > li.tour-auftrag { grid-template-columns: 1.25rem 4.25rem minmax(0, 1fr) 4.5rem 2rem auto; }
.tour-raster .tourliste > li.tour-auftrag .tour-bauteile { grid-column: 3 / 6; }
.tour-raster .tourliste > li.tour-auftrag .tour-knoepfe { grid-column: 6; }
@media print { .tour-raster { display: block; } .tour-raster .tourliste > li.tour-auftrag { grid-template-columns: 4.25rem minmax(0, 1fr) 4.5rem 2rem; } .tour-raster .tourliste > li.tour-auftrag .tour-bauteile { grid-column: 2 / 5; } }
[data-farbe="1"] { --tour: #1e5a7a; } [data-farbe="2"] { --tour: #c4561d; } [data-farbe="3"] { --tour: #2e7d4f; }
[data-farbe="4"] { --tour: #7b4fa0; } [data-farbe="5"] { --tour: #b3261e; } [data-farbe="6"] { --tour: #a07a00; }
.tourliste > li.tour-auftrag[data-farbe] { box-shadow: inset 5px 0 0 var(--tour); }
.tourliste > li.tour-kopf[data-farbe] { background: var(--tour); border-color: var(--tour); }
.tourliste > li.tour-kopf.zu-voll[data-farbe] { background: var(--fehler); border-color: var(--fehler); }
.tour-marker.farbe-1 { background: #1e5a7a; } .tour-marker.farbe-2 { background: #c4561d; } .tour-marker.farbe-3 { background: #2e7d4f; }
.tour-marker.farbe-4 { background: #7b4fa0; } .tour-marker.farbe-5 { background: #b3261e; } .tour-marker.farbe-6 { background: #a07a00; }
.tour-marker.hervor { transform-origin: center bottom; outline: 3px solid #f2b705; z-index: 1000 !important; }
.tourliste > li.blinkt { outline: 3px solid var(--signal); }

.tour-raster { grid-template-columns: minmax(0, 1fr) minmax(26rem, 1fr); }
.tour-raster .tourliste { padding: 0.5rem 0.625rem 0.75rem; }
.tour-raster .tourliste > li { padding: 0.375rem 0.5rem; gap: 0.125rem 0.5rem; margin-bottom: 0.25rem; }
.tour-raster .tourliste > li.tour-auftrag { grid-template-columns: 0.875rem 3.75rem minmax(0, 1fr) 4rem 1.875rem 1.75rem; column-gap: 0.625rem; }
.tour-raster .tourliste > li.tour-auftrag .tour-bauteile { grid-column: 3 / 6; }
.tour-raster .tourliste > li.tour-auftrag .tour-knoepfe { grid-column: 6; grid-row: 1 / span 2; flex-direction: column; gap: 0.125rem; }
.tour-raster .tour-knoepfe .knopf.klein { min-height: 1.375rem; padding: 0 0.375rem; font-size: 0.75rem; }
.tour-kunde b { font-weight: 600; }
.tour-unterzeile { display: block; font-size: 0.75rem; color: var(--graphit-weich); }
.tour-raster .tour-summe { display: block; }

/* Ganze Fensterbreite nutzen: Wochenansicht immer fünf (bzw. sieben) Spalten nebeneinander, solange Platz ist */
@media (min-width: 1100px) { .wochenraster { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.tour-raster .tourkarte { height: calc(100vh - 8rem); }

/* Planung Woche: Summenzeile über der Woche */
.wochensumme { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0; margin: -0.25rem 0 1rem; padding: 0.625rem 1rem; background: var(--blatt); border: 1px solid var(--linie); border-left: 5px solid var(--stahl); border-radius: var(--r-mittel); font-size: 0.9375rem; }
.ws-teil { padding: 0 1rem; border-left: 1px solid var(--linie); }
.ws-teil:first-child { padding-left: 0; border-left: 0; }
.ws-name { color: var(--graphit-weich); }
.ws-gesamt b { font-size: 1.0625rem; }
.ws-aufteilung { color: var(--graphit-weich); font-size: var(--groesse-klein); margin-left: 0.25rem; }

/* Planung Monat: Gesamt-m² diskret oben rechts in der Tageskachel */
.kalender-tag { position: relative; overflow: hidden; min-width: 0; }
.kalender-tag .tag-m2 { position: absolute; top: 0.5rem; right: 0.625rem; font-size: 0.75rem; color: var(--graphit-weich); font-variant-numeric: tabular-nums; }

/* Kunden: Jahresreiter, Alphabetregister, Buchstabenzeilen */
.jahr-reiter { margin-bottom: 1rem; }
.kunden-werkzeug { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--linie-leise); }
.kunden-suche { display: flex; gap: 0.5rem; flex: 1 1 20rem; max-width: 36rem; }
.kunden-suche input { flex: 1; }
.treffer-zahl { margin-left: auto; }
.alphabet { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--linie-leise); position: sticky; top: 0; background: var(--blatt); z-index: 2; }
.alphabet a, .alphabet span { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: var(--r-klein); font-weight: 600; text-decoration: none; }
.alphabet a { background: var(--stahl-hell); color: var(--stahl-tief); }
.alphabet a:hover { background: var(--stahl); color: var(--auf-stahl); }
.alphabet span { color: var(--linie); }
.buchstabe-zeile th { text-align: left; font-size: 1.25rem; font-weight: 700; padding: 0.75rem 0.75rem 0.375rem; border-bottom: 2px solid var(--graphit); background: var(--blatt); scroll-margin-top: 3.5rem; }
.kunde-auftraege td, .kunde-auftraege th { white-space: nowrap; }
.kunde-auftraege td.klein { white-space: normal; min-width: 8rem; }
.kunde-auftraege tr.archiviert td { color: var(--graphit-weich); }
.bv-tabelle tr.archiviert td, .karten tr.archiviert td { color: var(--graphit-weich); }
.fehler-text { color: var(--fehler); }

/* Ausführung in Tabellen: Druckstufe | Dichtheitsklasse | Folie */
.ausf { display: inline-flex; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; font-size: .9em; font-weight: 600; line-height: 1.6; }
.ausf > span { display: inline-flex; text-align: center; padding: 0; min-width: 1.8em; justify-content: center; }
.ausf > span:nth-child(1), .ausf > span:nth-child(2) { min-width: 2.4em; }
.ausf > span > i { font-style: normal; padding: 0 .3em; min-width: 1.8em; text-align: center; white-space: nowrap; }
.ausf > span > i + i { border-left: 1px dashed var(--linie); }
.ausf > span.leer { padding: 0 .3em; }
.ausf > span + span { border-left: 1px solid var(--linie); }
.ausf > span:nth-child(1) { background: var(--stahl-hell); }
.ausf > span:nth-child(2) { background: var(--gut-hell); }
.ausf > span:nth-child(3) { background: var(--signal-hell); }
.ausf > span.leer { background: transparent; color: var(--graphit-weich); font-weight: 400; }

/* Druck der Tourenplanung: eigene Spalten ohne Greifer und Knöpfe (muss nach den Bildschirm-Regeln stehen) */
@media print {
	.tour-raster .tourliste > li.tour-auftrag { grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem 2.25rem; column-gap: 0.75rem; }
	.tour-raster .tourliste > li.tour-auftrag .tour-nr { grid-column: 1; grid-row: 1; }
	.tour-raster .tourliste > li.tour-auftrag .tour-kunde { grid-column: 2; grid-row: 1; }
	.tour-raster .tourliste > li.tour-auftrag .tour-wert { grid-column: 3; grid-row: 1; }
	.tour-raster .tourliste > li.tour-auftrag .tour-stueck { grid-column: 4; grid-row: 1; }
	.tour-raster .tourliste > li.tour-auftrag .tour-bauteile { grid-column: 2 / 5; grid-row: 2; }
}
.tour-stueck { justify-self: center; width: 1.75rem; }

/* Arbeitsablauf Lieferscheine: Information und Haken „fg“ */
.rot-hinweis { display: block; color: var(--fehler); font-weight: 600; font-size: var(--groesse-klein); }
.spalte-erledigt form { display: inline-flex; align-items: center; gap: 0.5rem; }
.fg-haken { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--groesse-klein); font-weight: 600; cursor: pointer; white-space: nowrap; }

/* Lieferscheine: Zwischenüberschrift je Lieferart innerhalb eines Tages */
.lieferart-zeile th { background: var(--stahl-hell); color: var(--stahl-tief); text-align: left; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; padding: 0.375rem 0.875rem; border-top: 2px solid var(--stahl); border-bottom: 1px solid var(--linie); }
.lieferart-zeile .lieferart-anzahl { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 999px; background: var(--stahl); color: var(--auf-stahl); font-size: 0.6875rem; }
.tag-trenner + .lieferart-zeile th { border-top: 0; }

/* Archiv: Bemerkungen mit Zeilenumbrüchen, angenehme Breite */
.archiv-bemerkung { white-space: pre-line; min-width: 16rem; max-width: 36rem; font-size: var(--groesse-klein); }

/* Aufträge: Schnelllink „bearbeiten“ in der ersten Spalte */
.spalte-bearbeiten { width: 1%; padding-right: 0 !important; }
.schnell-bearbeiten { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-klein); border: 1px solid var(--linie); background: var(--blatt); color: var(--stahl); text-decoration: none; font-size: 0.95rem; line-height: 1; }
.schnell-bearbeiten:hover, .schnell-bearbeiten:focus-visible { background: var(--stahl); border-color: var(--stahl); color: var(--auf-stahl); }

/* Aufträge: „L“ in Dok. = Lagerware ohne Bestellnummer */
.dok-marken .dok-lager { font-size: 0.6875rem; font-weight: 700; padding: 0.0625rem 0.35rem; border-radius: 3px; background: var(--signal-hell); color: var(--graphit); border: 1px solid var(--signal); }

/* Stadtbote bestellen: Tour-Überschriften in den Tourfarben, schmale Eingaben */
.stadtbote-tabelle .stb-tour th { background: var(--tour, var(--stahl)); color: #fff; text-align: left; font-weight: 700; padding: 0.5rem 0.875rem; }
.stadtbote-tabelle tbody + tbody .stb-tour th { border-top: 0.75rem solid var(--blatt); }
.stadtbote-tabelle .stb-tour-summe { margin-left: 0.5rem; font-weight: 500; font-size: var(--groesse-klein); opacity: 0.9; }
.stadtbote-tabelle select { min-width: 7.5rem; }
.stadtbote-tabelle .stb-ablade { width: 4.5rem; text-align: center; }
.stadtbote-tabelle tr:target td { background: var(--signal-hell); }

@media print {
	.stadtbote-tabelle .stb-tour th { background: #eee !important; color: #000 !important; border-top: 2px solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.stadtbote-tabelle td { padding: 0.25rem 0.5rem; }
	.stadtbote-tabelle tbody { break-inside: avoid; }
	.stb-druck-titel { margin: 0 0 0.5rem; font-size: 1.1rem; }
	.stadtbote-tabelle .nur-druck { display: inline; font-weight: 600; }
}

/* Tourenplanung: Übersicht der kommenden Stadtbote-Tage */
.touren-uebersicht .tu-wochentag { font-weight: 700; }
.touren-uebersicht tr.heute td { background: var(--gut-hell); }

/* Wochen-/Tagesansicht: LKW-Symbol = Auftrag ist in der Tourenplanung eingeplant */
.lkw-symbol { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.25rem; color: var(--stahl); text-decoration: none; }
.lkw-symbol svg path, .lkw-symbol svg circle { fill: currentColor; stroke: var(--blatt); stroke-width: 0.6; }
.lkw-symbol:hover { color: var(--stahl-tief); }
@media print { .lkw-symbol { color: #000; } }

/* Lieferscheine: LS-Nr. bei Spedition */
.ls-nr-feld { width: 8.5rem; padding: 0.25rem 0.5rem; font-size: var(--groesse-klein); }

/* Lieferadresse aus der AB */
.lieferadresse { display: block; white-space: pre-line; }
.label-zusatz { font-weight: 400; color: var(--graphit-weich); }
.lieferadresse-quelle { display: block; margin-top: 0.125rem; }
.lieferadresse-lesen { margin-top: 0.375rem; }
.stb-lieferadresse { display: block; white-space: pre-line; font-size: 0.75rem; color: var(--graphit-weich); margin-top: 0.125rem; }
@media print { .stb-lieferadresse { color: #000; } }

/* Auftrag anlegen/bearbeiten: feste maximale Breite */
.formular-seite { max-width: 42rem; }

/* Auftragsseite: Trennlinie zwischen Kunden- und Lieferangaben in einer Kachel */
.angaben dt.angaben-trenner, .angaben dd.angaben-trenner { border-top: 1px solid var(--linie-leise); padding-top: 0.625rem; margin-top: 0.375rem; }
.zweispaltig .spalten { margin-bottom: 1.25rem; }
.ausfuehrung-gruppe .schritte { flex-wrap: wrap; }
.ausfuehrung-gruppe { min-width: 0; }

/* Auftragsseite: Bemerkungen in „Mengen und Ausführung“ */
.bemerkung-block { border-top: 1px solid var(--linie-leise); }
.bemerkung-titel { margin: 0 0 0.375rem; font-size: var(--groesse-klein); font-weight: 600; }

/* Einblendungen (Auftragskartei, PDF) */
dialog.einblendung { padding: 0; border: 1px solid var(--linie); border-radius: var(--r-mittel); background: var(--blatt); color: inherit; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); }
dialog.einblendung::backdrop { background: rgba(20, 28, 33, 0.55); }
dialog.einblendung-kartei { width: 50rem; }
dialog.einblendung-pdf { width: min(64rem, calc(100vw - 2rem)); height: calc(100vh - 2rem); }
.einblendung-leiste { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--linie-leise); background: var(--blatt); }
.einblendung-titel { font-weight: 700; margin-right: auto; }
.einblendung-knoepfe { display: inline-flex; gap: 0.375rem; }
.einblendung-inhalt { overflow: auto; }
dialog.einblendung-pdf .einblendung-inhalt { height: calc(100% - 3rem); overflow: hidden; }
/* nur der Rahmen mit dem PDF – der Dialog hat dieselbe Klasse und darf geschlossen nicht sichtbar bleiben */
iframe.einblendung-pdf { width: 100%; height: 100%; border: 0; display: block; }
dialog.einblendung:not([open]) { display: none; }
.einblendung-laden { padding: 1.5rem; }
body.einblendung-offen { overflow: hidden; }
body.fenster { background: var(--blatt); }
.fenster-inhalt { max-width: 52rem; margin: 0 auto; }

/* Kartei-Symbol hinter der Auftragsnummer */
.kartei-symbol { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.3rem; color: var(--stahl); text-decoration: none; opacity: 0.75; }
.kartei-symbol:hover, .kartei-symbol:focus-visible { opacity: 1; color: var(--stahl-tief); }
.kartei-symbol svg rect, .kartei-symbol svg path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* Auftragskartei im Stil des bisherigen VeBIS: Felder mit Linien abgetrennt */
.kartei { padding: 0.625rem; }
.kartei-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; margin-bottom: 0.5rem; }
.einblendung-knoepfe .kartei-aktionen { margin: 0; }
.kartei-tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--groesse-klein); }
.kartei-tab col.kt-l { width: 17%; }
.kartei-tab th, .kartei-tab td { border: 1px solid var(--linie-kartei); padding: 0.25rem 0.45rem; vertical-align: top; overflow-wrap: anywhere; }
.kartei-tab th { background: var(--stahl-hell); color: var(--stahl-tief); font-weight: 600; text-align: left; }
.kartei-tab.kt-anschluss { margin-top: -1px; }
.kartei-tab .kt-kopf { background: var(--kartei-kopf); color: var(--graphit-weich); font-size: 0.6875rem; font-weight: 600; text-align: center; padding: 0.15rem 0.25rem; }
.kartei-tab .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.kartei-tab .kt-nr { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }
.kartei-tab .etikett { margin-left: 0.3rem; }
.kartei-tab .kt-roh { background: var(--gut-hell); color: var(--gut); font-weight: 600; }
.kartei-tab .kt-roh.negativ { background: var(--fehler-hell); color: var(--fehler); }
.kartei-tab.kt-schritte td { text-align: center; font-weight: 600; padding: 0.15rem 0.1rem; }
.kartei-tab .kt-ja { background: var(--gut); color: var(--auf-gut); }
.kartei-tab .kt-nein { color: var(--graphit-weich); font-weight: 400; }
.kartei-tab .dok-marken a { font-size: 0.6875rem; }
.kartei-tab .ausf { font-size: 0.8rem; }

/* Tour-Archiv: Frachtkosten eintragen */
.fracht-form { display: inline-flex; gap: 0.375rem; align-items: center; justify-content: flex-end; }
.fracht-feld { width: 6.5rem; text-align: right; padding: 0.25rem 0.5rem; }
.rechnung-feld { width: 8.5rem; padding: 0.25rem 0.5rem; font-variant-numeric: tabular-nums; }
.stb-speichern { width: 1%; white-space: nowrap; }
.stadtbote-tabelle .nur-druck { display: none; }
@media print { .stadtbote-tabelle .nur-druck { display: inline; } }

/* Frachtanteil berechnen (eigenes Fenster) */
.fenster-inhalt { padding: 0.75rem; }
.fa-kopf h1 { font-size: 1.2rem; margin: 0 0 0.25rem; }
.fa-kopf p { margin: 0 0 0.75rem; }
.fa-tour { margin-bottom: 1rem; border-left: 5px solid var(--tour, var(--stahl)); }
.fa-tour-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; }
.fa-tour-kopf h2 { margin: 0; font-size: 1rem; }
.fa-gesamt { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.fa-gesamt input { width: 7rem; text-align: right; font-weight: 700; }
.fa-tabelle input.fa-zahl { width: 5.5rem; text-align: right; padding: 0.125rem 0.375rem; font-variant-numeric: tabular-nums; }
.fa-tabelle .fa-mit { width: 2rem; text-align: center; }
.fa-tabelle tr.fa-aus td { color: var(--graphit-weich); text-decoration: line-through; }
.fa-tabelle .fa-vorhanden { display: block; }
.fa-fuss { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0.75rem; }
.fa-tabelle { table-layout: auto; }
.fa-tabelle .fa-anteil { white-space: nowrap; }
.fa-tabelle th, .fa-tabelle td { overflow-wrap: normal; }
.fa-tabelle td:nth-child(2) { white-space: nowrap; }
.fa-tabelle input.fa-zahl { width: 4.75rem; }

/* Rechnungskontrolle Stadtbote */
.rechnung-tab { max-width: 46rem; }
.rechnung-tab tr.klickbar { cursor: pointer; }
.rechnung-tab tr.klickbar:hover td { background: var(--stahl-hell); }
.rechnung-tab tr.markiert td { background: var(--gut-hell); }
.rechnung-tab tr.markiert td:first-child { box-shadow: inset 4px 0 0 var(--gut); }
.rechnung-tab tfoot th { text-align: right; }
.rechnung-kopf .filter { border-bottom: 0; }
.rechnung-tab .kt-nr { font-size: inherit; font-variant-numeric: tabular-nums; }
tr.rechnung-erledigt td { color: var(--graphit-weich); }

/* Rechnungskontrollen: aufklappbare Jahre */
.rechnung-jahr > summary { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.625rem 1rem; cursor: pointer; list-style: none; }
.rechnung-jahr > summary::-webkit-details-marker { display: none; }
.rechnung-jahr > summary::before { content: "▸"; color: var(--stahl); transition: transform 0.15s; }
.rechnung-jahr[open] > summary::before { transform: rotate(90deg); }
.rechnung-jahr[open] > summary { border-bottom: 1px solid var(--linie-leise); }
.rj-jahr { font-weight: 700; font-size: 1.05rem; }
.rechnung-tab td[data-kopieren] { position: relative; }
.rechnung-tab td.kopiert::after { content: "kopiert"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); font-size: 0.6875rem; font-weight: 600; color: var(--auf-gut); background: var(--gut); padding: 0 0.375rem; border-radius: 3px; }
/* Tourenplanung: entfernte Aufträge */
.tourliste .tour-aufnehmen { display: none; }
.tour-entfernt .tour-aufnehmen { display: inline-flex; }
.tour-entfernt [data-hoch], .tour-entfernt [data-runter], .tour-entfernt .tour-entfernen { display: none; }
.tour-entfernt .greifer { visibility: hidden; }
.tour-entfernt-bereich { margin-top: 1rem; padding: 0 0.625rem 0.625rem; }
.tour-entfernt-bereich h3 { font-size: 0.875rem; margin: 0 0 0.5rem; color: var(--text-leise, inherit); }
.tour-entfernt .tour-auftrag { opacity: 0.6; border-left-color: var(--linie, #ccc); }
.tour-entfernt-bereich[hidden] { display: none; }
.tour-raster .tourliste.tour-entfernt > li.tour-auftrag { grid-template-columns: 0.875rem 3.75rem minmax(0, 1fr) 4rem 1.875rem auto; }
.tour-raster .tour-entfernt > li.tour-auftrag .tour-knoepfe { flex-direction: row; }

/* Seitenleiste ein-/ausblenden; ausgeblendet steht der Inhalt kompakter in der Mitte */
.leiste-schalter { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: none; padding: 0; background: none; border: 1px solid var(--linie); border-radius: var(--r-klein); color: var(--graphit-weich); cursor: pointer; }
.leiste-schalter:hover { color: inherit; border-color: var(--graphit-weich); }
.leiste-schalter[aria-pressed="true"] { color: inherit; }
.leiste-schalter svg { width: 1.125rem; height: 1.125rem; }
.kopf-marke { display: none; align-items: baseline; gap: 0.375rem; text-decoration: none; color: inherit; white-space: nowrap; }
.kopf-marke b { font-weight: 600; font-size: 1.0625rem; }
.kopf-marke span { font-size: var(--groesse-klein); color: var(--graphit-weich); }
@media (min-width: 901px) {
	body.leiste-zu .geruest { grid-template-columns: 1fr; }
	body.leiste-zu .rail { display: none; }
	body.leiste-zu .kopf-marke { display: inline-flex; }
	body.leiste-zu .inhalt { max-width: 88rem; margin-inline: auto; }
}
@media (max-width: 900px) { .leiste-schalter { display: none; } }

/* Wareneingang-Symbol in der Liste „Lieferscheine“: grün mit WE-Nr., rot ohne */
.we-symbol { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.3rem; text-decoration: none; }
.we-symbol svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.we-symbol.we-ok { color: var(--gut); }
.we-symbol.we-fehlt { color: var(--fehler); }
a.we-symbol:hover svg, a.we-symbol:focus-visible svg { filter: brightness(0.8); }
dialog.einblendung-we { width: 30rem; }
.we-formular { padding: 1rem; }
.we-formular .we-auftrag { margin: 0 0 0.75rem; }
.we-formular .formular-fuss { margin-top: 1rem; display: flex; gap: 0.5rem; }

/* Interne Notizen im Cockpit: gelbe Kacheln unter den Aufgaben; Bestätigungen grün */
.nachrichten { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.75rem; margin: -0.25rem 0 1.25rem; }
.nachricht-kachel { background: var(--signal-hell); border: 1px solid color-mix(in srgb, var(--signal) 55%, var(--linie)); border-left: 4px solid var(--signal); border-radius: var(--r-mittel); padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; }
.nachricht-kachel header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.nachricht-kachel h2 { margin: 0; font-size: var(--groesse-text); }
.nachricht-kachel p { margin: 0; }
.nachricht-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.nachricht-knoepfe { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: auto; padding-top: 0.375rem; }
.nachricht-knoepfe form { margin: 0; }
.nachricht-kachel.bestaetigung { background: var(--gut-hell); border-color: color-mix(in srgb, var(--gut) 45%, var(--linie)); border-left-color: var(--gut); }
.nachricht-formular { max-width: 46rem; }

/* Sollzahlen */
.soll-vorjahr { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; padding: 0.875rem 1rem; border-bottom: 1px solid var(--linie-leise); background: var(--stahl-hell); border-radius: var(--r-mittel) var(--r-mittel) 0 0; }
.soll-vorjahr-quelle { font-weight: 600; padding: 0.45rem 0; }
.soll-tabelle .soll-feld { text-align: right; font-variant-numeric: tabular-nums; }
.soll-tabelle .soll-kurz { width: 4.5rem; }
.soll-tabelle .soll-mittel { width: 7rem; }
.soll-tabelle .soll-lang { width: 9rem; }
.soll-tabelle .soll-feld.fehlerhaft { border-color: var(--fehler); box-shadow: 0 0 0 2px var(--fehler-hell); }
.soll-tabelle tfoot th { font-variant-numeric: tabular-nums; }
.az1-kennzahlen { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; }
/* Frachtkosten-Statistik */
.fracht-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); gap: 0 1.25rem; align-items: start; }
@media (max-width: 1000px) { .fracht-raster { grid-template-columns: 1fr; } }
.fracht-tab th { font-weight: 600; text-align: left; white-space: nowrap; }
.fracht-trenner td { padding: 0.25rem; background: var(--zink); }
.fracht-erg.pos { background: var(--gut-hell); color: var(--gut); }
.fracht-erg.neg { background: var(--fehler-hell); color: var(--fehler); }
.fracht-erg.null { background: var(--signal-hell); }
.fracht-details > summary { display: flex; align-items: baseline; gap: 1rem; padding: 0.75rem 1rem; cursor: pointer; }
.fracht-details > summary h2 { margin: 0; font-size: var(--groesse-text); display: inline; }
.fracht-wochen .mitte, .fracht-wochen th.mitte { text-align: center; }
.fracht-wochen td, .fracht-wochen th { font-variant-numeric: tabular-nums; }

/* m²-Kontrolle */
.mengen-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.monats-leiste { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.monats-leiste a { padding: 0.25rem 0.55rem; border-radius: var(--r-klein); text-decoration: none; color: var(--graphit); border: 1px solid transparent; }
.monats-leiste a:hover { background: var(--stahl-hell); }
.monats-leiste a[aria-current="page"] { background: var(--stahl); color: var(--auf-stahl); }
.mengen-stand { margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid var(--linie-leise); color: var(--graphit-weich); }
.mengen-gruen { color: var(--gut); }
.mengen-rot { color: var(--fehler); }
.mengen-tabelle tr.markiert td { background: var(--signal-hell); }
.mengen-tabelle tr.mengen-zeile { cursor: pointer; }
.mengen-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin: 0; justify-content: flex-end; }
.mengen-form label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--groesse-klein); }
.mengen-eingabe { width: 5.5rem; text-align: right; padding: 0.25rem 0.4rem; }
.mengen-aendern td { background: var(--stahl-hell); }
.mengen-aktion { white-space: nowrap; text-align: right; }
.mengen-form input.mengen-eingabe { width: 6rem; min-width: 0; flex: none; }
.mengen-stand { max-width: none; }

/* Rechnungskontrolle Einkauf */
.rko-werkzeug { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; padding: 0.875rem 1rem; border-bottom: 1px solid var(--linie-leise); }
.rko-werkzeug input[type="search"] { width: 15rem; }
.rko-stand { margin: 0; padding: 0.5rem 1rem; max-width: none; color: var(--graphit-weich); border-bottom: 1px solid var(--linie-leise); }
.rko-nr { white-space: nowrap; letter-spacing: 0.04em; }
.nr4 { font-weight: 800; font-size: 1.05em; }
.rko-we { font-weight: 700; font-size: 0.8rem; }
.rko-we.rot { color: var(--fehler); }
.rko-we.grau { color: var(--graphit-weich); }
.rko-lief { display: inline-block; min-width: 2.6rem; text-align: center; padding: 0 0.3rem; border-radius: 3px; font-size: 0.8rem; background: var(--zink); }
.rko-lief.strecke { background: var(--fehler); color: #fff; }
.rko-ek { font-weight: 700; font-variant-numeric: tabular-nums; }
.rko-ek.rot { color: var(--fehler); }
.rko-ek.gruen { color: var(--gut); }
.rko-akt { white-space: nowrap; text-align: right; }
.rko-akt form { display: inline; margin: 0; }
.rko-akt .knopf { margin-left: 0.25rem; }
.rko-akt .knopf[disabled] { opacity: 0.4; cursor: not-allowed; }
.rko-tabelle tr.markiert td { background: var(--signal-hell); }
.rko-tabelle tr.rko-zeile { cursor: pointer; }
.rko-monat th { background: var(--signal-hell); text-align: left; }
.kopiert-knopf { background: var(--gut-hell); color: var(--gut); }

/* Tagesansicht: Status anklickbar */
.status-zelle { white-space: nowrap; }
.status-form { display: inline; margin: 0; }
.status-knopf { font: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1.4; padding: 0.05rem 0.5rem; border-radius: 999px; cursor: pointer; border: 1px solid; margin-right: 0.25rem; }
.status-knopf.erledigt { background: var(--gut-hell); color: var(--gut); border-color: color-mix(in srgb, var(--gut) 40%, transparent); }
.status-knopf.offen { background: var(--blatt); color: var(--graphit-weich); border-color: var(--linie); border-style: dashed; }
.status-knopf:hover { filter: brightness(0.95); box-shadow: var(--fokus); }
@media print { .status-knopf { border: 0; padding: 0; background: none; } }

/* Konditionen */
.kond-werkzeug { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; padding: 0.875rem 1rem; border-bottom: 1px solid var(--linie-leise); }
.kond-werkzeug input[type="search"] { width: 20rem; }
.kond-code { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-decoration: none; font-weight: 600; }
.kond-gueltig { color: var(--gut); }
.kond-abgelaufen { color: var(--fehler); }
.kond-ohne_blatt { color: var(--graphit-weich); }
a.kond-code:hover { text-decoration: underline; }
.kond-eigen { color: var(--stahl); font-size: 0.7rem; margin-left: 0.2rem; vertical-align: super; }
.kond-liste { padding: 0 0 0.5rem; }
.kond-kopf, .kond-kunde > summary { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1.3fr) minmax(12rem, 2fr) 9rem 9.5rem; gap: 0.75rem; align-items: center; padding: 0.5rem 1rem; }
.kond-kopf { font-size: var(--groesse-klein); font-weight: 600; color: var(--graphit-weich); border-bottom: 1px solid var(--linie); }
.kond-buchstabe { margin: 0; padding: 0.75rem 1rem 0.25rem; font-size: 1.1rem; border-bottom: 2px solid var(--graphit); }
.kond-kunde { border-bottom: 1px solid var(--linie-leise); }
.kond-kunde > summary { cursor: pointer; list-style: none; }
.kond-kunde > summary::-webkit-details-marker { display: none; }
.kond-kunde > summary .kond-name::before { content: "▸ "; color: var(--graphit-weich); }
.kond-kunde[open] > summary .kond-name::before { content: "▾ "; }
.kond-kunde > summary:hover { background: var(--stahl-hell); }
.kond-kunde.gesperrt .kond-name { color: var(--fehler); font-weight: 600; }
.kond-name { font-weight: 600; }
.kond-inhalt { background: var(--kartei-kopf); padding: 0.5rem 1rem 0.75rem; }
.kond-links { margin: 0.5rem 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.kond-auswahl { margin: 0; }
.kond-wahl { margin-right: 0.625rem; vertical-align: middle; }
.kond-alle { font-weight: 400; display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; }
.kond-archiv-zelle form { display: inline-flex; align-items: center; }
.kond-inhalt .tabelle tr.kond-standard > td { background: var(--signal-hell); border-bottom: 2px solid var(--signal); }
.kond-inhalt .tabelle tr.kond-standard > td:first-child { box-shadow: inset 4px 0 0 var(--signal); }
tr.kond-weg { opacity: 0.35; transition: opacity 0.3s; }
.kond-leer { padding: 1rem; }
.kond-matrix th, .kond-matrix td { text-align: center; }
.kond-matrix tbody th { text-align: left; white-space: nowrap; }
.kond-eingabe { width: 9rem; text-align: center; }
.kond-fuss { padding: 0.5rem 1rem; margin: 0; max-width: none; }
.kond-gruppe th { background: var(--kartei-kopf); text-align: left; }
.kond-abweichung td { background: var(--signal-hell); }
.kond-formular-gruppe { margin: 0; padding: 0.75rem 1rem 0; font-size: var(--groesse-text); border-top: 1px solid var(--linie-leise); }
.kond-formular-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem 1rem; }
.kond-eingabe-einheit { display: flex; align-items: center; gap: 0.4rem; }
.kond-eingabe-einheit input { width: 8rem; text-align: right; }
.inline-form { display: inline; margin-left: 0.5rem; }
@media (max-width: 800px) { .kond-kopf { display: none; } .kond-kunde > summary { grid-template-columns: 1fr; gap: 0.15rem; } }

/* Konditionsblatt kompakt: Gruppen nebeneinander, eine Zeile je Position */
.kond-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.75rem 1.25rem; padding: 0.75rem 1rem 1rem; align-items: start; }
.kond-mini { width: 100%; border-collapse: collapse; font-size: var(--groesse-klein); white-space: nowrap; }
.kond-mini th, .kond-mini td { padding: 0.18rem 0.4rem; border-bottom: 1px solid var(--linie-leise); line-height: 1.35; }
.kond-mini thead th { background: var(--kartei-kopf); text-align: left; font-weight: 700; border-bottom: 1px solid var(--linie); }
.kond-mini thead th.zahl { text-align: right; font-weight: 600; }
.kond-mini td.zahl { font-variant-numeric: tabular-nums; }
.kond-mini td.leise { font-size: 0.7rem; }
.kond-raster-form { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
.kond-gruppe-form { border: 1px solid var(--linie); border-radius: var(--r-klein); margin: 0; padding: 0.25rem 0.5rem 0.4rem; min-width: 0; }
.kond-gruppe-form legend { font-weight: 700; padding: 0 0.3rem; font-size: var(--groesse-klein); }
.kond-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 2.6rem; align-items: center; gap: 0.4rem; padding: 0.1rem 0; white-space: nowrap; }
.kond-zeile-name { overflow: hidden; text-overflow: ellipsis; }
.kond-zeile-name .leise { font-size: 0.7rem; }
.kond-zeile input[type="text"] { padding: 0.15rem 0.35rem; text-align: right; font-size: var(--groesse-klein); min-height: 0; height: 1.75rem; }
.kond-zeile.fehlerhaft input { border-color: var(--fehler); box-shadow: 0 0 0 2px var(--fehler-hell); }
@media print { .kond-raster { grid-template-columns: repeat(2, 1fr); padding: 0; } }
.kond-raster.vergleich { grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); }
.kond-raster > table { min-width: 0; }
.kond-archiv-zelle { text-align: right; white-space: nowrap; }
.kond-archiv-zelle form { margin: 0; }
.kond-inhalt .tabelle td, .kond-inhalt .tabelle th { white-space: nowrap; }
.tu-offen { color: var(--warn); }
/* Externe Wochenübersicht (Białogard) – ohne Seitenleiste und Kopfzeile */
body.extern { background: var(--zink); }
.extern-inhalt { max-width: 96rem; margin: 0 auto; }
.extern-inhalt .seitenkopf h1 { font-size: 1.35rem; }
.extern-pl { color: var(--graphit-weich); font-style: italic; }
p.extern-pl { margin: 0.15rem 0 0.25rem; }
.extern-gruppe { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.extern-gruppe .extern-pl { font-weight: 400; font-size: var(--groesse-klein); }
.extern-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .extern-raster { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }
.extern-link { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.extern-link input { flex: 1; min-width: 20rem; font-family: ui-monospace, monospace; font-size: var(--groesse-klein); }
.art-strecke { margin-top: 0.35rem; }

/* Benutzer › Check: erfasste Aufträge */
.check-zeitraum { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.75rem 1rem; }
.check-zeitraum .feld { margin: 0; }
.check-tabelle td { vertical-align: top; }
.check-bemerkung { white-space: pre-line; min-width: 14rem; max-width: 22rem; }
.roer { font-weight: 600; white-space: nowrap; }
.roer-rot { background: var(--fehler-hell); color: var(--fehler); }
.roer-gelb { background: var(--signal-hell); color: var(--warn); }
.roer-gruen { background: var(--gut-hell); color: var(--gut); }
.roer-gruen-voll { background: var(--gut); color: var(--auf-gut); }

/* Lieferterminvorschau */
.lt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.lt-kopf input[type="search"] { width: 16rem; }
.lt-schalter { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--r-mittel); overflow: hidden; background: var(--blatt); }
.lt-schalter a { padding: 0.375rem 0.8rem; font-size: var(--groesse-klein); border-right: 1px solid var(--linie); color: var(--graphit); text-decoration: none; }
.lt-schalter a:last-child { border-right: 0; }
.lt-schalter a.aktiv { background: var(--stahl); color: var(--auf-stahl); font-weight: 600; }
.lt-rechts { margin-left: auto; }
.link-knopf { background: none; border: 0; padding: 0; color: var(--stahl); text-decoration: underline; cursor: pointer; font: inherit; }
.lt-rahmen { background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r-mittel); overflow: hidden; }
.lt-tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--groesse-klein); }
.lt-spaltenkopf th { text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--graphit-weich); padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--linie); }
.lt-tab td { padding: 0.25rem 0.6rem; border-bottom: 1px solid var(--linie-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-tab .zahl { text-align: right; }
.lt-tab tr:hover td { background: var(--kartei-kopf); }
.lt-gruppe > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0.6rem; background: var(--kartei-kopf); border-bottom: 1px solid var(--linie); cursor: pointer; font-weight: 600; }
.lt-gruppe:not([open]) > summary { border-bottom-color: var(--linie-leise); }
.lt-unter { font-weight: 400; color: var(--graphit-weich); font-size: var(--groesse-klein); margin-left: 0.6rem; }
.lt-summe { font-weight: 400; font-size: var(--groesse-klein); color: var(--graphit-weich); white-space: nowrap; }
.lt-nr a[data-kartei] { font-weight: 600; }
.lt-nr .etikett { margin-left: 0.25rem; }
.lt-ueber { color: var(--fehler); font-weight: 600; }
.lt-tab col.c-termin { width: 6.5rem; } .lt-tab col.c-nr { width: 10rem; } .lt-tab col.c-kunde { width: 17%; } .lt-tab col.c-ort { width: 9.5rem; }
.lt-tab col.c-abruf { width: 11%; } .lt-tab col.c-menge { width: 5.5rem; } .lt-tab col.c-stk { width: 4.5rem; } .lt-tab col.c-la { width: 11rem; } .lt-tab col.c-vol { width: 5.5rem; }
@media print { .lt-kopf, .alphabet { display: none; } .lt-gruppe > summary { background: #eee; } }
/* Lieferterminvorschau: Kopfzeilen farbig absetzen */
.lt-nach-datum .lt-gruppe > summary { background: color-mix(in srgb, var(--stahl) 20%, var(--blatt)); box-shadow: inset 4px 0 0 var(--stahl); border-top: 1px solid color-mix(in srgb, var(--stahl) 30%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--stahl) 30%, transparent); color: var(--stahl-tief); }
.lt-nach-datum .lt-gruppe.lt-alt > summary { background: var(--kartei-kopf); box-shadow: inset 4px 0 0 var(--fehler); color: var(--graphit); border-color: var(--linie-leise); font-weight: 500; }
.lt-gruppe[open] > summary { background: var(--stahl); color: var(--auf-stahl); box-shadow: none; border-color: var(--stahl); }
.lt-gruppe[open] > summary .lt-unter, .lt-gruppe[open] > summary .lt-summe { color: color-mix(in srgb, var(--auf-stahl) 85%, transparent); }
.lt-nach-datum .lt-gruppe[open] > summary { background: color-mix(in srgb, var(--stahl) 20%, var(--blatt)); color: var(--stahl-tief); box-shadow: inset 4px 0 0 var(--stahl); border-color: color-mix(in srgb, var(--stahl) 30%, transparent); }
.lt-nach-datum .lt-gruppe[open] > summary .lt-unter, .lt-nach-datum .lt-gruppe[open] > summary .lt-summe { color: var(--stahl-tief); }
.lt-nach-datum .lt-gruppe.lt-alt[open] > summary { background: var(--fehler-hell); box-shadow: inset 4px 0 0 var(--fehler); color: var(--graphit); font-weight: 600; }
/* Lieferterminvorschau: mehrere Termine einer Gruppe als Blöcke */
.lt-tag + .lt-tag .lt-tag-kopf td { border-top: 6px solid var(--blatt); }
.lt-tag-kopf td { background: color-mix(in srgb, var(--stahl) 12%, var(--blatt)); box-shadow: inset 4px 0 0 var(--stahl); color: var(--stahl-tief); padding: 0.3rem 0.6rem; border-bottom: 1px solid color-mix(in srgb, var(--stahl) 25%, transparent); }
.lt-tag-kopf .lt-summe { float: right; }
.lt-tag-alt .lt-tag-kopf td { background: var(--fehler-hell); box-shadow: inset 4px 0 0 var(--fehler); color: var(--graphit); }
.lt-tag td:first-child { padding-left: 1rem; }

/* Auftragsliste im Stil des bisherigen VeBIS: blaue Kopfzeile, senkrechte Linien, abwechselnd hell/hellblau, Erledigt als Häkchen-Spalten */
.auftragsliste th, .auftragsliste td { border-right: 1px solid var(--linie-leise); }
.auftragsliste th:last-child, .auftragsliste td:last-child { border-right: 0; }
.auftragsliste thead th { background: var(--stahl); color: var(--auf-stahl); text-align: center; font-weight: 600; padding: 0.45rem 0.4rem; border-right: 1px solid color-mix(in srgb, var(--stahl) 65%, #fff); border-bottom: 0; }
.auftragsliste thead th.zahl { text-align: center; }
.auftragsliste thead th.st-kopf { font-size: 0.6875rem; padding: 0.45rem 0.1rem; width: 2rem; }
.auftragsliste td.st { text-align: center; color: var(--gut); font-weight: 700; padding-left: 0; padding-right: 0; width: 2rem; }
.auftragsliste tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--stahl) 8%, var(--blatt)); }
.auftragsliste tbody tr:hover td { background: var(--signal-hell); }
.auftragsliste td.st-nein, .auftragsliste tbody tr:nth-child(even) td.st-nein { background: color-mix(in srgb, var(--zink-tief) 55%, transparent); }
@media (max-width: 720px) {
	.auftragsliste td { border-right: 0; }
	.auftragsliste td.st { display: inline-flex; width: auto; gap: 0.25rem; padding: 0.125rem 0.5rem 0.125rem 0; }
	.auftragsliste td.st:empty { display: none; }
	.auftragsliste td.st::before { content: attr(data-label); }
	.auftragsliste td.st-nein { display: none; }
}
@media print { .auftragsliste thead th { background: #ddd; color: #000; } }
/* Cockpit: Auftragseingänge */
.ae-kachel > header { box-shadow: inset 4px 0 0 var(--signal); }
.ae-tabelle td, .ae-tabelle th { padding-top: 0.3rem; padding-bottom: 0.3rem; }

/* Aufgaben: Häkchen-Spalte (z. B. AB/PL bei „Auftragsbestätigungen an Kunde“) */
.tabelle .spalte-haken { text-align: center; width: 4rem; }
.tabelle td.spalte-haken { color: var(--gut); font-weight: 700; font-size: 1rem; }
@media (max-width: 720px) { .tabelle.karten td.spalte-haken { text-align: right; width: auto; } }

/* Wochenansicht: Schnelllink zur Tourenplanung bei „Auslieferung mit Stadtboten“ */
.gruppe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: -0.25rem 0 0.25rem -0.5rem; padding: 0.375rem 0.5rem; background: color-mix(in srgb, var(--gruppe) 16%, var(--blatt)); border-bottom: 2px solid var(--gruppe); }
.gruppe-kopf > a:first-child { display: flex; gap: 0.375rem; align-items: center; color: var(--graphit); text-decoration: none; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.01em; }
.gruppe-kopf > a:first-child .gruppe-punkt { display: none; }
.touren-link { display: inline-flex; align-items: center; gap: 0.25rem; flex: none; padding: 0.0625rem 0.4rem; border: 1px solid var(--gruppe); border-radius: 3px; color: var(--gruppe); font-size: 0.6875rem; font-weight: 600; text-decoration: none; background: var(--blatt); }
.touren-link svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.touren-link:hover { background: var(--gruppe); color: #fff; }
@media print { .touren-link { display: none; } }

/* Auftrag anlegen/bearbeiten: „Angelegt am“ oben rechts in der Kopfzeile */
.angelegt-feld { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.angelegt-feld label { font-size: var(--groesse-klein); font-weight: 500; color: var(--graphit-weich); }
.angelegt-feld input { width: auto; }
.angelegt-feld.fehlerhaft input { border-color: var(--fehler); }

/* Update: frühere Änderungsnotizen eingeklappt und begrenzt */
.notizen-frueher { max-height: 24rem; overflow: auto; }

/* Wochenansicht: Werktage ab heute neben dem Wochentag */
.werktage { font-weight: 400; font-size: 0.8125rem; opacity: 0.85; }
.tageskarte > header { flex-wrap: wrap; row-gap: 0.375rem; }
.tageskarte > header h2 { min-width: 0; }
.tageskarte .karte-datum { white-space: nowrap; }
.tageskarte > header .anwesend { flex-wrap: wrap; row-gap: 0.25rem; max-width: 100%; }

/* Einblendung eines Bildes (z. B. Fahrzeuge in Planung & Logistik) */
dialog.einblendung-bild { width: fit-content; }
dialog.einblendung-bild .einblendung-inhalt { overflow: auto; }
.bild-gross { display: block; max-width: min(56rem, calc(100vw - 2rem)); max-height: calc(100vh - 6rem); width: auto; height: auto; background: #fff; }

/* Ähnliche Namen: Knöpfe nebeneinander */
.aehnlich-knoepfe { white-space: nowrap; }
.aehnlich-knoepfe form { display: inline; margin-left: 0.375rem; }

/* Konditionen: ganzen Kunden archivieren */
.kond-kunde-archiv { text-align: right; }
.kond-kunde-archiv form { margin: 0; display: inline; }
.kond-kunde.kond-weg { opacity: 0.35; transition: opacity 0.3s; }
.kond-weg-hinweis { margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid var(--linie-leise); }

/* Dokumente: „Ordner ansehen“ unten in der Kachel Bestand */
.ordner-ansehen { border-top: 1px solid var(--linie-leise); }
.ordner-ansehen h3 { margin: 0; padding: 0.75rem 1rem 0; font-weight: 600; }

/* Dokumente: Standardkonditionen je Quartal */
.sk-kopf { flex-wrap: wrap; }
.sk-hinweis { margin: 0.75rem 1rem 0; padding: 0.5rem 0.75rem; border-left: 4px solid var(--signal); background: var(--signal-hell); font-size: var(--groesse-klein); }
.sk-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.625rem; padding: 0.75rem 1rem 1rem; }
.sk-karte { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.625rem 0.75rem; border: 1px solid var(--linie); border-radius: var(--r-mittel); background: var(--blatt); color: var(--graphit); text-decoration: none; }
a.sk-karte:hover { border-color: var(--stahl); background: var(--stahl-hell); }
.sk-karte .bst { font-size: 1.5rem; font-weight: 700; color: var(--stahl); line-height: 1; }
.sk-karte .nm { font-weight: 600; font-size: var(--groesse-klein); }
.sk-karte .info { font-size: 0.75rem; color: var(--graphit-weich); }
.sk-karte.fehlt { border-style: dashed; opacity: 0.7; }
.sk-weitere { margin: 0; padding: 0.5rem 1rem; border-top: 1px solid var(--linie-leise); font-size: var(--groesse-klein); }
.sk-weitere a { margin-right: 0.75rem; }
.sk-archiv > summary { padding: 0.6rem 1rem; cursor: pointer; font-weight: 600; font-size: var(--groesse-klein); border-top: 1px solid var(--linie-leise); }
.sk-mitte { text-align: center; }
.sk-hoch { border-top: 1px solid var(--linie-leise); background: var(--kartei-kopf); }
.sk-karte.veraltet { border-color: var(--signal); background: var(--signal-hell); }

/* Auftrag: Bemerkungen als Verlauf (Datum · Kürzel · Text) */
.bem-feld .bezeichnung { font-size: var(--groesse-klein); font-weight: 500; }
.bem-verlauf { border: 1px solid var(--linie); border-radius: var(--r-mittel); background: var(--kartei-kopf); max-height: 22rem; overflow: auto; }
.bem-eintrag { display: grid; grid-template-columns: 6.25rem 3.5rem 1fr auto; gap: 0.5rem; align-items: start; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--linie-leise); font-size: 0.875rem; }
.bem-eintrag:last-child { border-bottom: 0; }
.bem-datum { color: var(--graphit-weich); font-variant-numeric: tabular-nums; }
.bem-kuerzel { font-weight: 700; color: var(--stahl); }
.bem-text { white-space: pre-line; }
.bem-geaendert { font-size: 0.75rem; }
.bem-alt { padding: 0.45rem 0.75rem; font-size: 0.875rem; border-bottom: 1px dashed var(--linie); }
.bem-alt .bem-text { color: var(--graphit-weich); display: block; margin-top: 0.2rem; }
.bem-alt-kopf { display: flex; gap: 0.5rem; align-items: baseline; }
.bem-alt-kopf .bem-aendern { margin-left: auto; }
.bem-aendern { font-size: 0.75rem; white-space: nowrap; }
.bem-verlauf textarea { width: 100%; margin-top: 0.25rem; }
.bem-neu-label { margin-top: 0.75rem; font-size: var(--groesse-klein); font-weight: 500; }
.bem-stempel { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 3px; background: var(--stahl-hell); color: var(--stahl-tief); font-size: 0.75rem; font-weight: 600; }
@media (max-width: 40rem) { .bem-eintrag { grid-template-columns: auto auto 1fr; } .bem-eintrag .bem-inhalt { grid-column: 1 / -1; } }
.bem-verlauf [hidden] { display: none !important; }

/* Auftragsliste: Tabellenkopf bleibt beim Scrollen unter der Kopfzeile stehen */
@media (min-width: 721px) {
	.tabelle-rahmen.kopf-fix { overflow: visible; }
	.kopf-fix .tabelle thead th { position: sticky; top: var(--kopf-h, 4.1rem); z-index: 3; }
}

/* Auftragsliste: Lieferart bei Streckengeschäft rot */
.auftragsliste td.lieferart-strecke { color: var(--fehler); font-weight: 600; }

/* Konditionen: Preisblock hinzufügen */
.kond-neuer-block { border-top: 1px solid var(--linie-leise); }
.kond-neuer-block > summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; color: var(--stahl); }
.nb-tabelle input, .nb-tabelle select { width: 100%; }
.nb-tabelle td { padding: 0.25rem 0.4rem; }
.bestand-titel { margin: 0; padding: 0.75rem 1rem 0.25rem; font-weight: 600; border-top: 1px solid var(--linie-leise); }
.prot-jahr > summary { padding: 0.75rem 1rem; cursor: pointer; }
.prot-monat { border-top: 1px solid var(--linie-leise); }
.prot-monat > summary { padding: 0.6rem 1rem 0.6rem 1.75rem; cursor: pointer; font-weight: 600; }
.prot-tage .titel a { text-decoration: none; white-space: nowrap; }
.prot-tage tr.prot-offen > td { background: var(--zink); font-weight: 600; }
.prot-eintraege > td { padding: 0 0 0.75rem 1.5rem; background: var(--zink); }
.prot-liste { background: var(--blatt); }
.prot-liste td, .prot-liste th { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.prot-stunde { margin-right: 0.5rem; }
.prot-stunde > summary { padding: 0.45rem 0.5rem; cursor: pointer; font-weight: 600; }
.prot-liste .prot-aktion { white-space: nowrap; }
.prot-liste td:first-child { width: 5.5rem; }
.lkw-symbol.lkw-bestellt { color: var(--fehler); }
.lkw-symbol.lkw-ausgeliefert { color: var(--gut); }
@media print { .lkw-symbol.lkw-bestellt, .lkw-symbol.lkw-ausgeliefert { color: #000; } }
.ls-bauteile { max-width: 11rem; }
/* Aufgabenlisten: lange Markierungstexte umbrechen statt die Spalte Auftrag zu verbreitern */
.ablauf-liste td.titel { max-width: 13rem; min-width: 11rem; }
.ablauf-liste td.titel .etikett.signal { white-space: normal; }