/* Mitarbeiter-Dashboard. Farben wie die Website (theme.json: grund, karte, linie, marke, fuss). */
:root {
	--grund: #f5f5f7;
	--karte: #fff;
	--schrift: #2c2c2e;
	--leise: #6e6e73;
	--linie: #dcdcdf;
	--marke: #0060aa;
	--marke-dunkel: #004a85;
	--marke-hell: #e8f1f9;
	--fuss: #08243a;
	--ok: #1d7a3a;
	--ok-hell: #e7f4ea;
	--hinweis: #8a5a00;
	--hinweis-hell: #fdf3dc;
	--fehler: #b3261e;
	--fehler-hell: #fbe9e7;
	--geplant: #6b4fbb;
	--rund: 10px;
	color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--schrift); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--marke); }
a:hover { color: var(--marke-dunkel); }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
pre { white-space: pre-wrap; word-break: break-word; margin: .5rem 0; }
:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }

/* Rahmen: Navigation links, Inhalt rechts */
body.mit-navigation { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.seitenleiste { background: var(--fuss); color: #d6dee5; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1rem .6rem 1.1rem; }
.marke { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.marke span { font-weight: 400; color: #a1acb4; }
.marke img { display: block; height: auto; }
a.marke:hover { color: #fff; }
.navigation { display: flex; flex-direction: column; flex: 1; padding: 0 .65rem .75rem; }
.suche label { display: flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .07); border-radius: 8px; padding: 0 .55rem; margin: .4rem 0 .6rem; color: #8fa0ad; }
.suche input { background: transparent; border: 0; color: #fff; padding: .5rem 0; }
.suche input::placeholder { color: #8fa0ad; }
.suche input:focus { box-shadow: none; }
.suche label:focus-within { background: rgba(255, 255, 255, .12); outline: 2px solid #68b7f3; }
.nav-gruppe { display: flex; flex-direction: column; gap: 1px; margin-bottom: .5rem; }
.nav-titel { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #7d8e9b; margin: .6rem .6rem .25rem; font-weight: 600; }
.nav-gruppe a { display: flex; align-items: center; gap: .65rem; padding: .48rem .6rem; border-radius: 8px; color: #d6dee5; text-decoration: none; font-size: .93rem; }
.nav-gruppe a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-gruppe a[aria-current] { background: rgba(104, 183, 243, .16); color: #fff; }
.nav-gruppe a[aria-current] .symbol { color: #68b7f3; }
.nav-gruppe .symbol { flex: none; color: #9fb0bd; }
.nav-gruppe .zahl { margin-left: auto; background: #68b7f3; color: var(--fuss); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; font-weight: 700; line-height: 1.5; }
.ich { margin-top: auto; display: flex; align-items: center; gap: .3rem; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: .7rem; }
.ich a { flex: 1; display: flex; align-items: center; gap: .55rem; color: #d6dee5; text-decoration: none; padding: .35rem .45rem; border-radius: 8px; min-width: 0; font-size: .9rem; }
.ich a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich a:hover, .ich a[aria-current] { background: rgba(255, 255, 255, .07); color: #fff; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2c4a63; color: #fff; font-size: .72rem; font-weight: 700; }
.ich form { margin: 0; }
.abmelden { background: none; border: 0; color: #9fb0bd; padding: .4rem; border-radius: 8px; cursor: pointer; display: grid; }
.abmelden:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.menue-knopf { display: none; }
.kopf-schlicht { background: var(--fuss); padding: .9rem 1.5rem; }

/* Inhalt */
.inhalt { width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.75rem 2rem 4rem; }
.inhalt-breit { max-width: none; }
.schlicht .inhalt { padding-top: 3rem; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.25rem 1.4rem; margin-bottom: 1rem; }
.raster > .karte { margin-bottom: 0; }
.karte.breit { grid-column: 1 / -1; }
.karte.schmal { max-width: 440px; margin: 0 auto; }
.karte.mittel { max-width: 720px; }
.karte.hervor { border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-hell); }
.gedaempft { opacity: .6; }
.untertitel { margin: -.5rem 0 1.25rem; color: var(--leise); }
.zurueck { margin: 0 0 .5rem; }
.zurueck a { text-decoration: none; }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.umbruch { white-space: pre-wrap; overflow-wrap: anywhere; }
.mitte { text-align: center; }
.aktionen { margin: 0 0 1rem; }
.leer { color: var(--leise); padding: 2rem 0; }

/* Reiter */
.reiter, .filter-reiter { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--linie); margin: 0 0 1.25rem; }
.reiter a, .filter-reiter a { padding: .55rem .9rem; text-decoration: none; color: var(--leise); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter a[aria-current], .filter-reiter a[aria-current] { color: var(--schrift); border-bottom-color: var(--marke); font-weight: 600; }

/* Formulare */
.formular { display: grid; gap: .9rem; margin: 0; }
.formular label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
.formular label > .leise { font-weight: 400; }
.formular.zeile, .zeile { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.formular.zeile label, .zeile label { flex: 1 1 160px; }
.formular label.haken { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; }
label.haken span.leise { display: block; }
.auswahl label.haken strong { font-weight: 600; }
.auswahl label.haken { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; }
.auswahl label.haken > span { grid-column: 2; }
input, select, textarea { font: inherit; font-weight: 400; color: inherit; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: .55rem .7rem; width: 100%; min-width: 0; }
input[type="checkbox"], input[type="radio"] { width: auto; margin: .2rem 0 0; accent-color: var(--marke); }
input:focus, select:focus, textarea:focus { border-color: var(--marke); outline: none; box-shadow: 0 0 0 3px var(--marke-hell); }
input.kurz { max-width: 8rem; }
input[disabled] { background: var(--grund); color: var(--leise); }
textarea { resize: vertical; }
.code-feld { font-size: 1.4rem; letter-spacing: .3em; text-align: center; max-width: 12rem; }
fieldset.auswahl { border: 1px solid var(--linie); border-radius: 8px; padding: .75rem 1rem 1rem; margin: 0; display: grid; gap: .6rem; }
fieldset.auswahl legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
form.inline { display: inline; }

/* Knöpfe */
.knopf, button { font: inherit; cursor: pointer; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--marke); color: #fff; border: 1px solid var(--marke); border-radius: 8px; padding: .55rem 1.1rem; font-weight: 600; text-decoration: none; justify-self: start; }
.knopf:hover { background: var(--marke-dunkel); color: #fff; }
.knopf.leise { background: #fff; color: var(--marke); border-color: var(--linie); }
.knopf.leise:hover { border-color: var(--marke); background: var(--marke-hell); }
.knopf.gefahr { background: #fff; color: var(--fehler); border-color: #e6b8b4; }
.knopf.gefahr:hover { background: var(--fehler-hell); }
button.leise:not(.knopf) { background: none; border: 0; color: var(--marke); padding: .3rem .4rem; }
.chip { display: inline-block; background: var(--marke-hell); color: var(--marke-dunkel); border: 1px solid transparent; border-radius: 999px; padding: .15rem .6rem; font-size: .82rem; margin: 0 0 .3rem; white-space: nowrap; }
button.chip:hover { border-color: var(--marke); }

/* Meldungen und Status */
.meldung { border-radius: 8px; padding: .7rem 1rem; margin: 0 0 1rem; background: var(--ok-hell); color: var(--ok); }
.meldung-hinweis { background: var(--hinweis-hell); color: var(--hinweis); }
.meldung-fehler { background: var(--fehler-hell); color: var(--fehler); }
.meldung a { color: inherit; font-weight: 600; }
.status { display: inline-block; border-radius: 999px; padding: .05rem .55rem; font-size: .78rem; font-weight: 600; background: var(--grund); color: var(--leise); border: 1px solid var(--linie); white-space: nowrap; }
.status-angefragt, .status-eingeladen, .status-wartet { background: var(--hinweis-hell); color: var(--hinweis); border-color: transparent; }
.status-bestaetigt, .status-aktiv, .status-gesendet { background: var(--ok-hell); color: var(--ok); border-color: transparent; }
.status-abgelehnt, .status-abgesagt, .status-gesperrt, .status-fehler { background: var(--fehler-hell); color: var(--fehler); border-color: transparent; }
.status-hinweis { background: var(--marke-hell); color: var(--marke-dunkel); border-color: transparent; }
.marke-geplant { color: var(--geplant); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); margin-bottom: 1rem; }
.karte .tabelle-huelle { border: 0; border-radius: 0; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600; background: #fafafb; }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
.tabelle tbody tr:hover { background: #fafbfd; }
.matrix th[scope="row"] { font-weight: 400; min-width: 260px; }
.matrix tr.gruppe th { background: var(--grund); font-weight: 700; font-size: .85rem; }
.matrix tr.geplant th[scope="row"] { color: var(--leise); }
.matrix .rolle { min-width: 120px; text-transform: none; letter-spacing: 0; }
.matrix .rolle-titel { font-weight: 700; padding: .3rem .4rem; font-size: .85rem; }
.matrix textarea { font-size: .8rem; min-width: 140px; }
.matrix td input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }

/* Daten und Listen */
.daten { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.daten dt { color: var(--leise); }
.daten dd { margin: 0; }
.liste-schlicht { list-style: none; margin: 0 0 1rem; padding: 0; }
.liste-schlicht li { padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.liste-schlicht li:last-child { border-bottom: 0; }
.verlauf { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.verlauf li { padding: .35rem 0; border-bottom: 1px dashed var(--linie); }
.verlauf details { display: inline; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.codes code { font-size: 1.05rem; background: var(--grund); padding: .3rem .6rem; border-radius: 6px; display: block; text-align: center; }
.geheim { font-size: 1rem; letter-spacing: .08em; word-break: break-all; }
.qr { text-align: center; margin: 1rem 0; }
.qr img { border: 1px solid var(--linie); border-radius: 8px; padding: 8px; background: #fff; }
.schritte { display: flex; gap: .5rem; font-size: .8rem; color: var(--leise); margin: 0 0 1rem; }
.schritte span { padding: .15rem .5rem; border-radius: 999px; background: var(--grund); }
.schritte span[aria-current] { background: var(--marke); color: #fff; }
.schrittliste { padding-left: 1.2rem; }
.link-zeile { display: flex; gap: .5rem; }
.mailtext { background: var(--grund); padding: .75rem; border-radius: 6px; }
.sprechzeiten { border-collapse: collapse; width: 100%; }
.sprechzeiten thead th { font-size: .75rem; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 0 1rem .3rem 0; }
.sprechzeiten tbody th, .sprechzeiten tfoot th { text-align: left; font-weight: 600; padding: .3rem 1rem .3rem 0; width: 7rem; }
.sprechzeiten td { padding: .3rem 1rem .3rem 0; white-space: nowrap; }
.sprechzeiten .zahl { text-align: right; padding-right: 0; }
.sprechzeiten tfoot th, .sprechzeiten tfoot td { border-top: 1px solid var(--linie); padding-top: .5rem; }
.sprechzeiten tr.frei-tag th { color: var(--leise); font-weight: 500; }
.sprechzeiten .fenster { display: inline-flex; align-items: center; gap: .35rem; }
.sprechzeiten input[type="time"] { width: 6.6rem; padding-left: .5rem; padding-right: .35rem; }
.person-wahl { margin-bottom: 1rem; }
.person-wahl select { max-width: 20rem; }
.freie-tage { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 .5rem; align-items: baseline; }
.freie-tage dt { font-weight: 600; font-size: .88rem; white-space: nowrap; }
.freie-tage dd { margin: 0; }
.freie-tage .chip { margin: 0 .15rem .25rem 0; }
.abwesenheiten li { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }

/* Startseite */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kachel { display: block; border: 1px solid var(--linie); border-radius: 8px; padding: .9rem 1rem; text-decoration: none; color: var(--schrift); }
.kachel strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.kachel span { display: block; font-size: .8rem; color: var(--hinweis); }
.kachel:hover { border-color: var(--marke); color: var(--schrift); }
.kachel-aktiv { background: var(--marke-hell); border-color: transparent; }
.kachel-hinweis { background: var(--hinweis-hell); border-color: transparent; }
.kachel-fehler { background: var(--fehler-hell); border-color: transparent; }
.liste-termine { list-style: none; padding: 0; margin: 0; }
.liste-termine li { padding: .55rem 0; border-top: 1px solid var(--linie); }
.liste-termine a { text-decoration: none; color: var(--schrift); }
.liste-termine .wann { font-weight: 600; color: var(--marke-dunkel); margin-right: .4rem; }

details summary { cursor: pointer; color: var(--marke); }

@media (max-width: 900px) {
	body.mit-navigation { display: block; }
	.seitenleiste { position: sticky; height: auto; z-index: 10; }
	.leiste-kopf { padding: .7rem 1rem; }
	.menue-knopf { display: inline-block; background: none; color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; padding: .3rem .7rem; font: inherit; }
	.navigation { display: none; max-height: calc(100vh - 56px); overflow-y: auto; }
	.menue-offen .navigation { display: flex; }
	.inhalt { padding: 1.25rem 1rem 3rem; }
	.raster { grid-template-columns: 1fr; }
	.daten { grid-template-columns: 1fr; gap: 0; }
	.daten dd { margin-bottom: .5rem; }
	.codes { grid-template-columns: 1fr; }
	.tabelle th, .tabelle td { padding: .5rem .6rem; }
}
}

@media print {
	.seitenleiste, .knopf, form, .schritte { display: none !important; }
	body.mit-navigation { display: block; }
	body { background: #fff; }
	.karte { border: 0; }
}

/* Seiten mit rechter Seitenleiste: links der Gegenstand, rechts was man damit tut (keine Dialogfenster) */
.kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1.25rem; }
.kopfzeile h1 { margin: 0; }
.kopfzeile .untertitel { margin: .3rem 0 0; flex-basis: 100%; }
.kopfzeile .aktionen { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.mit-leiste { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.mit-leiste > .haupt > .karte:last-child { margin-bottom: 0; }
.leiste { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.leiste > .karte { margin: 0; }
.leiste h2 { font-size: 1rem; }
.karte > h2:first-child, .karte > .kartenkopf:first-child { margin-top: 0; }
.kartenkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
.kartenkopf h2 { margin: 0; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: 1rem 0; }
.gross { font-size: 1.35rem; font-weight: 700; line-height: 1.3; color: var(--schrift); }
.knopf.voll { width: 100%; justify-self: stretch; }
.knopf.wirklich, .knopf.gefahr.wirklich { background: var(--fehler); border-color: var(--fehler); color: #fff; }
button.leise.wirklich { color: var(--fehler); font-weight: 700; }
.aufklappen > summary { list-style: none; color: var(--marke); font-weight: 600; padding: .3rem 0; }
.aufklappen > summary::-webkit-details-marker { display: none; }
.aufklappen > summary::before { content: '+ '; }
.aufklappen[open] > summary::before { content: '– '; }
.aufklappen.gefahr > summary { color: var(--fehler); }
.aufklappen > .formular, .aufklappen > div { margin-top: .6rem; }
tr[data-href] { cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--marke); color: #fff; }
.alter { font-size: .78rem; color: var(--leise); }
.alter.ueberfaellig { color: var(--hinweis); font-weight: 600; }
.leise-kasten { background: var(--grund); border-radius: 8px; padding: .75rem 1rem; }
.rollen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rollen-liste a { display: block; padding: .6rem .8rem; border-radius: 8px; text-decoration: none; color: var(--schrift); border: 1px solid transparent; }
.rollen-liste a:hover { background: var(--grund); }
.rollen-liste a[aria-current] { background: var(--marke-hell); border-color: var(--marke); }
.rollen-liste .leise { display: block; font-size: .8rem; }
.rechte-gruppe { border-top: 1px solid var(--linie); padding: .8rem 0 .2rem; }
.rechte-gruppe h3 { margin: 0 0 .5rem; font-size: .9rem; }
.rechte-gruppe label.haken { margin-bottom: .45rem; }
.titel-feld.titel-feld { font-size: 1.3rem; font-weight: 700; border-color: transparent; padding-left: .3rem; margin-left: -.3rem; }
.titel-feld:hover { border-color: var(--linie); }
@media (max-width: 960px) {
	.mit-leiste { grid-template-columns: minmax(0, 1fr); }
	.leiste { position: static; }
}
.raster-eng { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0; }
details.karte > summary { font-weight: 600; color: var(--schrift); }
details.karte[open] > summary { margin-bottom: .75rem; }
.mit-leiste-links { grid-template-columns: 300px minmax(0, 1fr); }
.mit-leiste-links .leiste { position: static; }
.matrix th[scope="col"] { font-size: .72rem; }
.matrix td { padding: .4rem .6rem; }
@media (max-width: 960px) { .mit-leiste-links { grid-template-columns: 1fr; } }
.freie-zeiten { display: grid; gap: .35rem; }
.freie-zeiten .tag { display: inline-block; min-width: 5.6rem; color: var(--leise); }
.freie-zeiten .chip { margin: 0 0 .2rem; }

/* Konfigurator */
.einleitung { max-width: 75ch; color: var(--leise); margin: -.25rem 0 1.25rem; }
.konfig-standard { grid-template-columns: minmax(0, 1fr) 340px; }
.konfig-standard .wt-konfigurator { min-height: 600px; }
.darstellung label.haken > span { display: block; }
.vorschau { border-top: 1px solid var(--linie); padding-top: .6rem; }
.vorschau-liste { list-style: decimal; padding-left: 1.2rem; margin: .3rem 0; font-size: .88rem; }
.vorschau-liste li { padding: .3rem 0; border-bottom: 1px dashed var(--linie); }
.vorschau-liste li { display: list-item; }
.vorschau-liste li > span:first-child { display: inline; }
.vorschau-liste li > span:last-child { float: right; font-variant-numeric: tabular-nums; margin-left: .5rem; }
.vorschau-liste small { display: block; color: var(--leise); font-size: .78rem; clear: both; }
.vorschau-summe { display: flex; justify-content: space-between; margin: .5rem 0 0; }
.kunde-gewaehlt { margin: 0; }
.kunde-suche { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
.treffer { list-style: none; margin: .3rem 0 0; padding: 0; border: 1px solid var(--linie); border-radius: 8px; max-height: 220px; overflow: auto; }
.treffer li { border-bottom: 1px solid var(--linie); }
.treffer li:last-child { border-bottom: 0; }
.treffer button { width: 100%; text-align: left; background: #fff; border: 0; padding: .45rem .7rem; font: inherit; cursor: pointer; }
.treffer button:hover { background: var(--marke-hell); }
.treffer li.leise { padding: .5rem .7rem; }
.vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.vorlage button { width: 100%; height: 100%; text-align: left; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: .75rem .9rem; font: inherit; cursor: pointer; display: grid; gap: .4rem; align-content: start; }
.vorlage button:hover { border-color: var(--marke); background: #fafcfe; }
.kette { display: flex; flex-wrap: wrap; gap: 3px; }
.glied { font-size: .68rem; font-weight: 700; padding: .05rem .35rem; border-radius: 4px; background: var(--marke-hell); color: var(--marke-dunkel); }
.glied.extern { background: #fff; color: var(--leise); border: 1px dashed #b5b5ba; }
.anlage-kopf { align-items: center; }
.titel-zeile { flex: 1; min-width: 260px; }
.anlage-kopf .titel-feld { font-size: 1.6rem; width: 100%; }
.speicherstand { margin: 0; font-size: .82rem; color: var(--ok); }
.speicherstand.offen { color: var(--leise); }
.speicherstand.fehler { color: var(--fehler); }
.anlage-raster { grid-template-columns: minmax(0, 1fr) 380px; }
.schema-karte { padding-bottom: .5rem; }
.einfuegen { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .6rem; }
.einfuegen .chip { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .78rem; }
.einfuegen .chip:hover { border-color: var(--marke); }
.schema-rolle { overflow-x: auto; }
/* Zeichnung im Stil des Website-Konfigurators (anlage-zeichnung.js mit assets/anwendungen/zeichnung.css des Themes) */
.zk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.zk-flaeche { --schriftart: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: linear-gradient(#fbfbfc, #f1f2f4); border: 1px solid var(--linie); border-radius: 8px; padding: .4rem; }
.zk-svg { display: block; width: 100%; height: auto; max-height: 72vh; min-width: 640px; }
.zk-kopie { opacity: .3; pointer-events: none; }
.zk-treffer { fill: transparent; stroke: transparent; stroke-width: 2.5; cursor: pointer; }
.zk-treffer:hover { fill: rgb(0 96 170 / .04); stroke: rgb(0 96 170 / .35); stroke-dasharray: 7 5; }
.zk-treffer.is-gewaehlt { fill: rgb(0 96 170 / .06); stroke: var(--marke); stroke-dasharray: 7 5; }
.zk-marke { cursor: pointer; }
.zk-marke:focus { outline: none; }
.zk-kreis { fill: var(--fuss); stroke: #fff; stroke-width: 2; }
.zk-marke:hover .zk-kreis, .zk-marke:focus-visible .zk-kreis { fill: var(--marke); }
.zk-marke.is-gewaehlt .zk-kreis { fill: var(--marke); stroke: #fff; }
.zk-marke.is-fehler .zk-kreis { fill: var(--fehler); }
.anlage-hinweise { background: var(--fehler-hell); border: 1px solid #f0c4bf; border-radius: 8px; padding: .55rem .8rem; margin: 0 0 .7rem; font-size: .86rem; }
.anlage-hinweise p { margin: 0 0 .2rem; }
.anlage-hinweise ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: .2rem; }
.anlage-hinweise button { font: inherit; font-weight: 600; padding: 0; }
.nr-marke.fehler { background: var(--fehler); }
.einfuegen .chip[disabled] { opacity: .45; cursor: not-allowed; border-color: transparent; }
.einfuegen-hinweis { flex-basis: 100%; }
.zk-zahl { fill: #fff; font-weight: 700; font-family: var(--schriftart); pointer-events: none; }
.zk-strasse { fill: var(--schrift); font-weight: 650; font-family: var(--schriftart); cursor: pointer; }
.zk-strasse.is-gewaehlt { fill: var(--marke); }
.zk-zusatz { fill: var(--leise); font-weight: 400; }
.zk-leer { fill: var(--leise); font-family: var(--schriftart); }
.zk-kasten { fill: #3a434d; font-weight: 600; font-family: var(--schriftart); }
.zk-oese { fill: #f4f5f7; stroke: #2c333b; stroke-width: 1; }
.strassen { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: -.2rem 0 .6rem; }
.strassen .chip { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .78rem; }
.strassen .chip:hover { border-color: var(--marke); }
.strassen .chip[aria-pressed="true"] { background: var(--marke); color: #fff; }
.strassen-hilfe { flex-basis: 100%; }
.strasse-kopf th { background: var(--marke-hell); font-size: .82rem; padding: .35rem .6rem; text-align: left; }
.stueckliste td.betrag small.je { display: block; color: var(--leise); font-size: .72rem; font-weight: 400; }
.stationen-kurz { list-style: none; padding: 0; margin: .2rem 0 0; display: grid; gap: .1rem; }
.stationen-kurz button { font: inherit; font-size: .88rem; text-align: left; padding: .2rem 0; }
.schema-svg { display: block; height: 250px; min-width: 100%; }
.schema-svg .boden { stroke: var(--linie); stroke-width: 2; }
.schema-svg .gut { stroke: var(--marke); stroke-width: 2.5; fill: none; }
.schema-svg .gehaeuse { fill: #fff; stroke: var(--fuss); stroke-width: 2; }
.schema-svg .teil, .schema-svg .spule { fill: #fff; stroke: var(--fuss); stroke-width: 2; }
.schema-svg .spule { fill: #e9eef3; }
.schema-svg .nabe { fill: var(--fuss); }
.schema-svg .gelenk { fill: var(--fuss); }
.schema-svg .arm, .schema-svg .stuetze { stroke: var(--fuss); stroke-width: 3; stroke-linecap: round; }
.schema-svg .stuetze { stroke-width: 2; stroke: #8a96a3; }
.schema-svg .schiene { stroke: #8a96a3; stroke-width: 4; stroke-linecap: round; }
.schema-svg .riemen { fill: none; stroke: #8a96a3; stroke-width: 3; }
.schema-svg .strahl { stroke: #e0742a; stroke-width: 1.5; stroke-dasharray: 3 3; }
.schema-svg .bildschirm { fill: #dbe7f2; stroke: var(--fuss); stroke-width: 1; }
.schema-svg .fremd { fill: rgba(245, 245, 247, .85); stroke: #9a9aa0; stroke-width: 1.5; stroke-dasharray: 6 4; }
.schema-svg .fremd-text { font-size: 13px; fill: #6e6e73; text-anchor: middle; }
.schema-svg .kurz { font-size: 15px; font-weight: 700; fill: var(--fuss); text-anchor: middle; }
.schema-svg .rahmen { fill: transparent; stroke: transparent; stroke-width: 2; }
.schema-svg .station { cursor: pointer; }
.schema-svg .station:hover .rahmen { fill: #f5f8fb; }
.schema-svg .station:focus { outline: none; }
.schema-svg .station:focus-visible .rahmen { stroke: var(--marke); stroke-dasharray: 4 3; }
.schema-svg .station.aktiv .rahmen { fill: var(--marke-hell); stroke: var(--marke); }
.schema-svg .marke { fill: var(--fuss); }
.schema-svg .station.aktiv .marke { fill: var(--marke); }
.schema-svg .station.extern .marke { fill: #9a9aa0; }
.schema-svg .marke-nr { font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; }
.schema-svg .titel { font-size: 12.5px; fill: var(--schrift); text-anchor: middle; }
.stueckliste { width: 100%; border-collapse: collapse; font-size: .9rem; }
.stueckliste th, .stueckliste td { padding: .3rem .4rem; text-align: left; vertical-align: middle; }
.stueckliste thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); border-bottom: 1px solid var(--linie); }
.stueckliste .menge { width: 4.5rem; }
.stueckliste .einheit { width: 5.5rem; }
.stueckliste .preis { width: 8rem; }
.stueckliste .betrag { width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stueckliste .weg { width: 2rem; text-align: center; }
.stueckliste input, .stueckliste select { padding: .3rem .45rem; border-color: transparent; background: transparent; border-radius: 6px; }
.stueckliste input:hover, .stueckliste select:hover { border-color: var(--linie); background: #fff; }
.stueckliste input:focus, .stueckliste select:focus { background: #fff; }
.stueckliste .preis input, .stueckliste .menge input { text-align: right; font-variant-numeric: tabular-nums; }
.stueckliste input::placeholder { color: var(--schrift); opacity: .85; }
.stueckliste .preis input::placeholder { color: var(--leise); }
.stueckliste input.fehlt { border-color: #e9c46a; background: var(--hinweis-hell); }
.stueckliste input.fehlt::placeholder { color: var(--hinweis); }
.stueckliste input.frei:placeholder-shown { border-color: var(--linie); }
.stueckliste .nr { display: block; font-size: .75rem; color: var(--leise); padding-left: .5rem; font-family: ui-monospace, Menlo, monospace; }
.stueckliste .gruppe-kopf th, .stueckliste .gruppe-kopf td { padding-top: .8rem; border-top: 1px solid var(--linie); font-weight: 600; }
.stueckliste tbody.aktiv { background: #f8fbfe; }
.gruppe-knopf { background: none; border: 0; font: inherit; font-weight: 600; padding: 0; cursor: pointer; color: var(--schrift); }
.gruppe-knopf:hover { color: var(--marke); }
.nr-marke { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--fuss); color: #fff; font-size: .72rem; margin-right: .3rem; }
tbody.aktiv .nr-marke { background: var(--marke); }
.leer-zeile { padding-left: 2.2rem !important; }
.leistung-dazu { padding-top: .5rem !important; }
.leistung-dazu .chip { border: 1px solid transparent; font: inherit; font-size: .78rem; cursor: pointer; }
.stueckliste tfoot th, .stueckliste tfoot td { border-top: 2px solid var(--fuss); padding-top: .6rem; font-size: 1rem; }
.leisten-reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); margin: -.4rem -.2rem 1rem; }
.leisten-reiter button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .3rem; font: inherit; color: var(--leise); cursor: pointer; margin-bottom: -1px; }
.leisten-reiter button[aria-selected="true"] { color: var(--schrift); font-weight: 600; border-bottom-color: var(--marke); }
.feld-titel { font-weight: 600; font-size: .9rem; margin: 0 0 .3rem; }
.teile-kurz { list-style: none; padding: 0; margin: 0 0 .3rem; font-size: .88rem; }
.teile-kurz li { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px dashed var(--linie); }
.katalog .filter { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0; }
.katalog .filter .chip { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .75rem; }
.treffer-liste { list-style: none; margin: 0 0 .4rem; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--linie); border-radius: 8px; }
.treffer-liste li { border-bottom: 1px solid var(--linie); }
.treffer-liste li:last-child { border-bottom: 0; }
.treffer-liste button { display: flex; justify-content: space-between; gap: .6rem; width: 100%; text-align: left; background: #fff; border: 0; padding: .45rem .6rem; font: inherit; font-size: .85rem; cursor: pointer; }
.treffer-liste button:hover { background: var(--marke-hell); }
.treffer-liste .preis { white-space: nowrap; font-variant-numeric: tabular-nums; }
.knopfzeile .knopf { flex: 1; }
.gefahr-text { color: var(--fehler) !important; }
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 1100px) { .anlage-raster, .konfig-standard { grid-template-columns: minmax(0, 1fr); } }
.stueckliste-huelle { overflow-x: auto; }
@media (max-width: 700px) {
	.stueckliste { min-width: 560px; }
	.einfuegen .chip { font-size: .72rem; }
	.anlage-kopf .titel-feld { font-size: 1.25rem; }
}
.daten dd code { overflow-wrap: anywhere; }
.kunde-suche .leise { font-weight: 400; }
.anlage-kopf .titel-feld { background: transparent; }
.anlage-kopf .titel-feld:focus { background: #fff; }
.mit-leiste > .leiste { min-width: 0; }
.stueckliste select.variante { display: block; width: auto; max-width: 100%; font-size: .78rem; color: var(--leise); margin-top: .1rem; }
.rueckgaengig { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); background: var(--fuss); color: #fff; padding: .6rem .9rem; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2); z-index: 20; font-size: .9rem; display: flex; gap: .8rem; align-items: center; }
.rueckgaengig button { background: none; border: 0; color: #68b7f3; font: inherit; font-weight: 700; cursor: pointer; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.zweispaltig .aktionen-zeile { margin: 0; }
.zweispaltig .liste-schlicht { margin: 0; }
.zweispaltig .liste-schlicht li { padding: .3rem 0; }
@media (max-width: 700px) { .zweispaltig { grid-template-columns: 1fr; } }
/* Versteckte Beschriftungen (.vh) sind absolut positioniert; ohne positionierten Vorfahren zählten sie zur Seitenbreite */
.stueckliste-huelle, .schema-rolle, .tabelle-huelle, .karte { position: relative; }
.vorlage img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--grund); border-radius: 6px; }
.vorbild img { width: 100%; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); }
.stueckliste input.proforma::placeholder { font-style: italic; color: #6b4fbb; }
.stueckliste .pf { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b4fbb; }
.treffer-liste i, .teile-kurz i { color: #6b4fbb; }

/* Kalender ---------------------------------------------------------------------------------------------------------- */
.kalender-kopf { align-items: center; }
.monate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.monat { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: .7rem .75rem .6rem; }
.monat-aktuell { background: var(--marke-hell); border-color: #b9d3ea; }
.monat-aktuell .monat-titel { color: var(--marke-dunkel); }
.monat-titel { margin: 0 0 .35rem .2rem; font-weight: 700; font-size: .92rem; }
.monat table { width: 100%; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; }
.monat th { font-size: .66rem; font-weight: 600; color: var(--leise); text-transform: uppercase; padding: .1rem 0; }
.monat td { text-align: center; padding: 0; height: 2rem; vertical-align: top; }
.monat td a { display: block; position: relative; margin: 0 1px; border-radius: 6px; padding: .2rem 0 .55rem; color: var(--schrift); text-decoration: none; font-size: .8rem; font-variant-numeric: tabular-nums; }
.monat td a:hover { background: var(--marke-hell); box-shadow: inset 0 0 0 1px #b9d3ea; }
.monat td.we a { background: rgb(28 36 60 / .06); color: var(--leise); }
.monat td.feiertag a { background: rgb(179 38 30 / .11); color: #b3261e; }
.monat td.heute a { background: var(--marke); color: #fff; font-weight: 700; }
.monat tr.gewaehlt td a { background: #cfe1f2; }
.monat tr.gewaehlt td:first-child a { border-radius: 6px 0 0 6px; }
.monat tr.gewaehlt td.heute a { background: var(--marke); }
.punkte { position: absolute; left: 0; right: 0; bottom: .15rem; display: flex; justify-content: center; gap: 2px; }
.punkte i { width: 5px; height: 5px; border-radius: 50%; }
.punkte .fest { background: var(--marke); }
.punkte .offen { background: #e0742a; }
.heute .punkte .fest { background: #fff; }
.kalender-raster { grid-template-columns: minmax(0, 1fr) 360px; }
.woche-karte { padding: .9rem 1rem 1rem; }
.woche-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.blaettern { display: flex; align-items: center; gap: .35rem; }
.blaettern h2 { margin: 0 0 0 .4rem; font-size: 1.1rem; }
.symbol-knopf { padding: .35rem .45rem; }
.klein-knopf { padding: .35rem .8rem; }
.tabelle td > .klein-knopf { margin-block: -.4rem; }
.person-wahl select { padding: .4rem .6rem; }
.legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--leise); margin-bottom: .6rem; }
.legende i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-right: .2rem; }
.l-fest { background: var(--marke); }
.l-offen { background: #fdf0e6; border: 1.5px dashed #e0742a; }
.l-buchbar { background: #e6f4ea; border: 1px solid #b7dfc3; }
.l-belegt { background: repeating-linear-gradient(135deg, #e7e9ec 0 4px, #f4f5f7 4px 8px); border: 1px solid #d2d6db; }
.woche { --viertel: 13px; --spalten: 5; }
.woche.tage-7 { --spalten: 7; }
.woche-kopf { display: grid; grid-template-columns: 3.2rem repeat(var(--spalten), minmax(0, 1fr)); border-bottom: 1px solid var(--linie); padding-bottom: .35rem; }
.woche-kopf span { font-size: .8rem; color: var(--leise); text-align: center; line-height: 1.25; }
.woche-kopf strong { color: var(--schrift); font-size: 1rem; }
.woche-kopf .heute strong { background: var(--marke); color: #fff; border-radius: 999px; padding: 0 .35rem; }
.woche-kopf small { display: block; color: #b3261e; font-size: .68rem; }
.woche-koerper { display: grid; grid-template-columns: 3.2rem repeat(var(--spalten), minmax(0, 1fr)); max-height: 640px; overflow-y: auto; }
.woche-koerper > div { display: grid; grid-template-rows: inherit; position: relative; }
.uhr span { font-size: .7rem; color: var(--leise); text-align: right; padding-right: .4rem; transform: translateY(-.45rem); }
.tag { grid-template-columns: repeat(12, minmax(0, 1fr)); border-left: 1px solid var(--linie); }
.tag.we { background: #f3f3f6; }
.tag.feiertag { background: #fbeeed; }
.woche-kopf .we { background: #f3f3f6; border-radius: 6px 6px 0 0; }
.woche-kopf .feiertag { background: #fbeeed; border-radius: 6px 6px 0 0; }
.tag .linie { grid-column: 1 / -1; border-top: 1px solid #eef0f2; }
.tag > * { grid-column: 1 / -1; min-height: 0; }
.tag .hinten { margin: 0 2px; border-radius: 4px; font-size: .68rem; color: var(--leise); padding: .1rem .3rem; overflow: hidden; }
.tag .sprechzeit { background: #e6f4ea; border-left: 3px solid #7cc392; }
.tag .belegt { background: repeating-linear-gradient(135deg, #e7e9ec 0 4px, #f4f5f7 4px 8px); border: 1px solid #d2d6db; margin: 0 6px; }
.tag .abwesend { background: rgba(138, 150, 163, .18); border: 1px solid #c6ccd2; margin: 0 2px; }
.ereignis { position: relative; z-index: 1; margin: 1px 2px; border-radius: 6px; padding: .2rem .35rem; text-decoration: none; overflow: hidden; font-size: .72rem; line-height: 1.25; color: #fff; background: var(--marke); box-shadow: 0 1px 2px rgba(8, 36, 58, .18); }
.ereignis strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ereignis span { display: block; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ereignis:hover { filter: brightness(1.07); color: #fff; }
.ereignis.offen { background: #fdf0e6; color: #8a3f0c; border: 1.5px dashed #e0742a; box-shadow: none; }
.ereignis.offen:hover { color: #8a3f0c; }
.ereignis.gewaehlt { outline: 3px solid #f2b705; outline-offset: 1px; z-index: 2; }
.ereignis.fest.p1 { background: #0060aa; } .ereignis.fest.p2 { background: #1d7a3a; } .ereignis.fest.p3 { background: #6b4fbb; }
.ereignis.fest.p4 { background: #b05a00; } .ereignis.fest.p5 { background: #00788a; } .ereignis.fest.p0 { background: #08243a; }
.tag .jetzt { border-top: 2px solid #d93025; z-index: 3; position: relative; pointer-events: none; }
.tag.heute { background: #fbfdff; }
.zahl-gross { font-size: 1.3rem; font-weight: 700; color: var(--marke); }
.anfrage-liste { list-style: none; margin: 0; padding: 0; }
.anfrage-liste li { border-top: 1px solid var(--linie); }
.anfrage-liste li:first-child { border-top: 0; }
.anfrage-liste a { display: grid; gap: .1rem; padding: .55rem .2rem; text-decoration: none; color: var(--schrift); border-radius: 6px; }
.anfrage-liste a:hover { background: var(--grund); }
.anfrage-liste .wann { font-size: .78rem; font-weight: 600; color: var(--marke-dunkel); }
.termin-detail h2 { margin: .1rem 0 .2rem; font-size: 1.2rem; }
.termin-detail .kartenkopf { margin-bottom: 0; }
.termin-detail .kartenkopf p { margin: 0; }
.gross-zeit { font-size: 1.05rem; font-weight: 600; margin: 0 0 .2rem; }
.schliessen { font-size: 1.5rem; line-height: 1; text-decoration: none; color: var(--leise); padding: 0 .2rem; }
.schliessen:hover { color: var(--schrift); }
.kontakt-kurz { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .7rem; margin: .6rem 0; }
.kontakt-kurz dt { color: var(--leise); }
.kontakt-kurz dd { margin: 0; overflow-wrap: anywhere; }
.anliegen { background: var(--grund); border-radius: 8px; padding: .55rem .7rem; margin: 0; }
.formular.kompakt { gap: .6rem; }
.formular.kompakt .zeile label { flex: 1 1 120px; }
@media (max-width: 1200px) { .monate { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .kalender-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .monate { grid-template-columns: minmax(0, 1fr); } .monat:not(.monat-aktuell) { display: none; } .woche { --viertel: 11px; } .woche-koerper, .woche-kopf { min-width: 520px; } .woche { overflow-x: auto; } }

.z1{grid-row-start:1}
.z2{grid-row-start:2}
.z3{grid-row-start:3}
.z4{grid-row-start:4}
.z5{grid-row-start:5}
.z6{grid-row-start:6}
.z7{grid-row-start:7}
.z8{grid-row-start:8}
.z9{grid-row-start:9}
.z10{grid-row-start:10}
.z11{grid-row-start:11}
.z12{grid-row-start:12}
.z13{grid-row-start:13}
.z14{grid-row-start:14}
.z15{grid-row-start:15}
.z16{grid-row-start:16}
.z17{grid-row-start:17}
.z18{grid-row-start:18}
.z19{grid-row-start:19}
.z20{grid-row-start:20}
.z21{grid-row-start:21}
.z22{grid-row-start:22}
.z23{grid-row-start:23}
.z24{grid-row-start:24}
.z25{grid-row-start:25}
.z26{grid-row-start:26}
.z27{grid-row-start:27}
.z28{grid-row-start:28}
.z29{grid-row-start:29}
.z30{grid-row-start:30}
.z31{grid-row-start:31}
.z32{grid-row-start:32}
.z33{grid-row-start:33}
.z34{grid-row-start:34}
.z35{grid-row-start:35}
.z36{grid-row-start:36}
.z37{grid-row-start:37}
.z38{grid-row-start:38}
.z39{grid-row-start:39}
.z40{grid-row-start:40}
.z41{grid-row-start:41}
.z42{grid-row-start:42}
.z43{grid-row-start:43}
.z44{grid-row-start:44}
.z45{grid-row-start:45}
.z46{grid-row-start:46}
.z47{grid-row-start:47}
.z48{grid-row-start:48}
.z49{grid-row-start:49}
.z50{grid-row-start:50}
.z51{grid-row-start:51}
.z52{grid-row-start:52}
.z53{grid-row-start:53}
.z54{grid-row-start:54}
.z55{grid-row-start:55}
.z56{grid-row-start:56}
.z57{grid-row-start:57}
.z58{grid-row-start:58}
.z59{grid-row-start:59}
.z60{grid-row-start:60}
.z61{grid-row-start:61}
.z62{grid-row-start:62}
.z63{grid-row-start:63}
.z64{grid-row-start:64}
.z65{grid-row-start:65}
.z66{grid-row-start:66}
.z67{grid-row-start:67}
.z68{grid-row-start:68}
.z69{grid-row-start:69}
.z70{grid-row-start:70}
.z71{grid-row-start:71}
.z72{grid-row-start:72}
.z73{grid-row-start:73}
.z74{grid-row-start:74}
.z75{grid-row-start:75}
.z76{grid-row-start:76}
.z77{grid-row-start:77}
.z78{grid-row-start:78}
.z79{grid-row-start:79}
.z80{grid-row-start:80}
.z81{grid-row-start:81}
.z82{grid-row-start:82}
.z83{grid-row-start:83}
.z84{grid-row-start:84}
.z85{grid-row-start:85}
.z86{grid-row-start:86}
.z87{grid-row-start:87}
.z88{grid-row-start:88}
.z89{grid-row-start:89}
.z90{grid-row-start:90}
.z91{grid-row-start:91}
.z92{grid-row-start:92}
.z93{grid-row-start:93}
.z94{grid-row-start:94}
.z95{grid-row-start:95}
.z96{grid-row-start:96}
.d1{grid-row-end:span 1}
.d2{grid-row-end:span 2}
.d3{grid-row-end:span 3}
.d4{grid-row-end:span 4}
.d5{grid-row-end:span 5}
.d6{grid-row-end:span 6}
.d7{grid-row-end:span 7}
.d8{grid-row-end:span 8}
.d9{grid-row-end:span 9}
.d10{grid-row-end:span 10}
.d11{grid-row-end:span 11}
.d12{grid-row-end:span 12}
.d13{grid-row-end:span 13}
.d14{grid-row-end:span 14}
.d15{grid-row-end:span 15}
.d16{grid-row-end:span 16}
.d17{grid-row-end:span 17}
.d18{grid-row-end:span 18}
.d19{grid-row-end:span 19}
.d20{grid-row-end:span 20}
.d21{grid-row-end:span 21}
.d22{grid-row-end:span 22}
.d23{grid-row-end:span 23}
.d24{grid-row-end:span 24}
.d25{grid-row-end:span 25}
.d26{grid-row-end:span 26}
.d27{grid-row-end:span 27}
.d28{grid-row-end:span 28}
.d29{grid-row-end:span 29}
.d30{grid-row-end:span 30}
.d31{grid-row-end:span 31}
.d32{grid-row-end:span 32}
.d33{grid-row-end:span 33}
.d34{grid-row-end:span 34}
.d35{grid-row-end:span 35}
.d36{grid-row-end:span 36}
.d37{grid-row-end:span 37}
.d38{grid-row-end:span 38}
.d39{grid-row-end:span 39}
.d40{grid-row-end:span 40}
.d41{grid-row-end:span 41}
.d42{grid-row-end:span 42}
.d43{grid-row-end:span 43}
.d44{grid-row-end:span 44}
.d45{grid-row-end:span 45}
.d46{grid-row-end:span 46}
.d47{grid-row-end:span 47}
.d48{grid-row-end:span 48}
.d49{grid-row-end:span 49}
.d50{grid-row-end:span 50}
.d51{grid-row-end:span 51}
.d52{grid-row-end:span 52}
.d53{grid-row-end:span 53}
.d54{grid-row-end:span 54}
.d55{grid-row-end:span 55}
.d56{grid-row-end:span 56}
.d57{grid-row-end:span 57}
.d58{grid-row-end:span 58}
.d59{grid-row-end:span 59}
.d60{grid-row-end:span 60}
.d61{grid-row-end:span 61}
.d62{grid-row-end:span 62}
.d63{grid-row-end:span 63}
.d64{grid-row-end:span 64}
.d65{grid-row-end:span 65}
.d66{grid-row-end:span 66}
.d67{grid-row-end:span 67}
.d68{grid-row-end:span 68}
.d69{grid-row-end:span 69}
.d70{grid-row-end:span 70}
.d71{grid-row-end:span 71}
.d72{grid-row-end:span 72}
.d73{grid-row-end:span 73}
.d74{grid-row-end:span 74}
.d75{grid-row-end:span 75}
.d76{grid-row-end:span 76}
.d77{grid-row-end:span 77}
.d78{grid-row-end:span 78}
.d79{grid-row-end:span 79}
.d80{grid-row-end:span 80}
.d81{grid-row-end:span 81}
.d82{grid-row-end:span 82}
.d83{grid-row-end:span 83}
.d84{grid-row-end:span 84}
.d85{grid-row-end:span 85}
.d86{grid-row-end:span 86}
.d87{grid-row-end:span 87}
.d88{grid-row-end:span 88}
.d89{grid-row-end:span 89}
.d90{grid-row-end:span 90}
.d91{grid-row-end:span 91}
.d92{grid-row-end:span 92}
.d93{grid-row-end:span 93}
.d94{grid-row-end:span 94}
.d95{grid-row-end:span 95}
.d96{grid-row-end:span 96}
.zeilen-8{grid-template-rows:repeat(8,var(--viertel))}
.zeilen-12{grid-template-rows:repeat(12,var(--viertel))}
.zeilen-16{grid-template-rows:repeat(16,var(--viertel))}
.zeilen-20{grid-template-rows:repeat(20,var(--viertel))}
.zeilen-24{grid-template-rows:repeat(24,var(--viertel))}
.zeilen-28{grid-template-rows:repeat(28,var(--viertel))}
.zeilen-32{grid-template-rows:repeat(32,var(--viertel))}
.zeilen-36{grid-template-rows:repeat(36,var(--viertel))}
.zeilen-40{grid-template-rows:repeat(40,var(--viertel))}
.zeilen-44{grid-template-rows:repeat(44,var(--viertel))}
.zeilen-48{grid-template-rows:repeat(48,var(--viertel))}
.zeilen-52{grid-template-rows:repeat(52,var(--viertel))}
.zeilen-56{grid-template-rows:repeat(56,var(--viertel))}
.zeilen-60{grid-template-rows:repeat(60,var(--viertel))}
.zeilen-64{grid-template-rows:repeat(64,var(--viertel))}
.zeilen-68{grid-template-rows:repeat(68,var(--viertel))}
.zeilen-72{grid-template-rows:repeat(72,var(--viertel))}
.zeilen-76{grid-template-rows:repeat(76,var(--viertel))}
.zeilen-80{grid-template-rows:repeat(80,var(--viertel))}
.zeilen-84{grid-template-rows:repeat(84,var(--viertel))}
.zeilen-88{grid-template-rows:repeat(88,var(--viertel))}
.zeilen-92{grid-template-rows:repeat(92,var(--viertel))}
.zeilen-96{grid-template-rows:repeat(96,var(--viertel))}
.tag .s1-1{grid-column:1 / span 12}
.tag .s1-2{grid-column:1 / span 6}
.tag .s2-2{grid-column:7 / span 6}
.tag .s1-3{grid-column:1 / span 4}
.tag .s2-3{grid-column:5 / span 4}
.tag .s3-3{grid-column:9 / span 4}
.tag .s1-4{grid-column:1 / span 3}
.tag .s2-4{grid-column:4 / span 3}
.tag .s3-4{grid-column:7 / span 3}
.tag .s4-4{grid-column:10 / span 3}
/* auch das Dokument selbst: zwischen zwei Seiten bleibt die Leiste dunkel statt kurz weiß */
html { background: var(--grund); }
html.mit-navigation, body.mit-navigation { background: linear-gradient(90deg, var(--fuss) 0 252px, var(--grund) 252px); }
body.laedt main.inhalt { opacity: .6; transition: opacity .15s; cursor: progress; }
.woche { --viertel: 17px; }
.woche-koerper { max-height: 760px; padding-top: .6rem; }
.tag .frei { position: relative; z-index: 1; margin: 1px 3px; border: 1.5px dashed #2e9e57; background: rgba(230, 244, 234, .9); color: #1d7a3a; border-radius: 6px; font: inherit; font-size: .7rem; font-weight: 600; cursor: pointer; text-align: left; padding: .1rem .3rem; }
.tag .frei:hover, .tag .frei[aria-pressed="true"] { background: #2e9e57; color: #fff; border-style: solid; }
.l-frei { border: 1.5px dashed #2e9e57; background: rgba(230, 244, 234, .9); }
@media (max-width: 900px) { html.mit-navigation, body.mit-navigation { background: var(--grund); } }
.tag-gruppe h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin: 1.2rem 0 .4rem; }
.termin-liste { list-style: none; margin: 0; padding: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); }
.termin-liste li + li { border-top: 1px solid var(--linie); }
.termin-liste a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 10rem 11rem; gap: 1rem; align-items: center; padding: .7rem 1rem; text-decoration: none; color: var(--schrift); }
.termin-liste a:hover { background: #fafbfd; }
.termin-liste .zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.termin-liste .zustand { text-align: right; }
@media (max-width: 760px) { .termin-liste a { grid-template-columns: 6rem minmax(0, 1fr); } .termin-liste .person, .termin-liste .zustand { grid-column: 2; text-align: left; } }

/* CRM ----------------------------------------------------------------------------------------------------------------- */
.suchfeld label { display: flex; align-items: center; gap: .4rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 0 .6rem; color: var(--leise); min-width: 260px; }
.suchfeld input { border: 0; padding: .5rem 0; }
.suchfeld input:focus { box-shadow: none; }
.suchfeld label:focus-within { border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-hell); }
.gross-suche label { max-width: 640px; padding: .2rem .8rem; font-size: 1.05rem; margin-bottom: 1rem; }
.neu-erfassen { margin-bottom: 1rem; }
.neu-erfassen > summary { font-weight: 600; }
.neu-erfassen[open] > summary { margin-bottom: .8rem; }
.postfach { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.postfach.mit-detail { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); }
.eingang { list-style: none; margin: 0; padding: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.eingang li + li { border-top: 1px solid var(--linie); }
.eingang a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; padding: .7rem .9rem; text-decoration: none; color: var(--schrift); }
.eingang a:hover { background: #fafbfd; }
.eingang a[aria-current] { background: var(--marke-hell); box-shadow: inset 3px 0 0 var(--marke); }
.eingang .wer { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eingang .ungelesen .wer::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--marke); margin-right: .4rem; vertical-align: 1px; }
.eingang .wann { font-size: .78rem; color: var(--leise); white-space: nowrap; }
.eingang .was { grid-column: 1 / -1; color: var(--leise); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eingang .marken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .15rem; }
.quelle { font-size: .7rem; font-weight: 600; padding: .05rem .45rem; border-radius: 4px; background: var(--grund); color: var(--leise); }
.q-konfigurator { background: #efeafb; color: #5b3fa8; } .q-termin { background: #e6f4ea; color: #1d7a3a; } .q-kontaktformular { background: var(--marke-hell); color: var(--marke-dunkel); }
.status.s-neu { background: var(--marke-hell); color: var(--marke-dunkel); border-color: transparent; }
.status.s-in_bearbeitung { background: var(--hinweis-hell); color: var(--hinweis); border-color: transparent; }
.status.s-wartet { background: #f1f1f4; color: #55555c; border-color: transparent; }
.status.s-angebot { background: #efeafb; color: #5b3fa8; border-color: transparent; }
.status.s-gewonnen { background: var(--ok-hell); color: var(--ok); border-color: transparent; }
.status.s-verloren, .status.s-spam { background: var(--fehler-hell); color: var(--fehler); border-color: transparent; }
.kuerzel { font-size: .68rem; font-weight: 700; background: var(--fuss); color: #fff; border-radius: 999px; padding: .05rem .4rem; }
.anfrage-detail { position: sticky; top: 1rem; margin: 0; }
.anfrage-detail h2 { margin: .1rem 0 .7rem; font-size: 1.25rem; }
.anfrage-detail h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin: 1.1rem 0 .4rem; }
.anfrage-detail .kartenkopf p { margin: 0; }
.status-leiste { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; width: fit-content; max-width: 100%; }
.status-leiste form { display: contents; }
.segment { background: #fff; border: 0; border-right: 1px solid var(--linie); padding: .35rem .65rem; font: inherit; font-size: .8rem; cursor: pointer; color: var(--leise); }
.status-leiste form:last-child .segment { border-right: 0; }
.segment:hover { background: var(--grund); color: var(--schrift); }
.segment[aria-pressed="true"] { background: var(--marke); color: #fff; font-weight: 600; }
.segment.s-gewonnen[aria-pressed="true"] { background: var(--ok); } .segment.s-verloren[aria-pressed="true"], .segment.s-spam[aria-pressed="true"] { background: var(--fehler); }
.detail-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.2rem; }
.detail-raster p { margin: 0 0 .4rem; }
.nachricht { background: var(--grund); border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0; line-height: 1.55; }
.bezug { margin: .3rem 0 .8rem; }
.anfrage-aktionen { display: grid; gap: .55rem; border-top: 1px solid var(--linie); padding-top: .8rem; margin-top: .8rem; }
.anfrage-aktionen > form, .anfrage-aktionen > p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.anfrage-aktionen .chip { border: 1px solid transparent; font: inherit; font-size: .78rem; cursor: pointer; }
.inline-feld { display: inline-flex !important; align-items: center; gap: .4rem; font-weight: 400 !important; }
.inline-feld select { width: auto; padding: .3rem .5rem; }
.notiz-feld { margin-top: .8rem; gap: .4rem; }
.notiz-feld .zeile { justify-content: flex-end; }
.notiz-feld .zeile label { flex: 0 0 auto; }
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--linie); }
.zeitleiste li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: .7rem; padding: .35rem 0; }
.zeitleiste .punkt { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #9aa3ad; margin-top: .25rem; position: relative; }
.zeitleiste .a-eingang .punkt { border-color: var(--marke); background: var(--marke); }
.zeitleiste .a-anruf .punkt, .zeitleiste .a-mail .punkt { border-color: var(--ok); }
.zeitleiste .a-status .punkt { border-color: #6b4fbb; }
.zeitleiste p { margin: 0; }
.zeitleiste .kopf { color: var(--leise); }
.kunden-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kunden-zahlen .kachel { background: var(--karte); }
.kunden-zahlen .kachel strong { font-size: 1.3rem; }
.tabelle .rechts, .stueckliste .rechts { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle.kompakt th, .tabelle.kompakt td { padding: .45rem .5rem; }
.such-liste a { display: flex; flex-direction: column; gap: .1rem; grid-template-columns: none; }
@media (max-width: 1000px) { .postfach.mit-detail { grid-template-columns: minmax(0, 1fr); } .anfrage-detail { position: static; } .kunden-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Auswertung wie der Leistungsbericht der Search Console. Farbe je Kennzahl: dataviz-Referenzpalette, Plätze 1–4 in
   fester Reihenfolge (validiert). Schrift auf der Kartenfläche nach Kontrast: weiß auf Blau (Stufe 500), sonst dunkel. */
.k-anfragen { --m: #2a78d6; --m-flaeche: #256abf; --m-tinte: #fff; }
.k-besucher { --m: #eb6834; --m-flaeche: #eb6834; --m-tinte: #0b0b0b; }
.k-conversion { --m: #1baf7a; --m-flaeche: #1baf7a; --m-tinte: #0b0b0b; }
.k-gewonnen { --m: #eda100; --m-flaeche: #eda100; --m-tinte: #0b0b0b; }
.filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.25rem 0 1rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .85rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--schrift); font-size: .88rem; text-decoration: none; cursor: pointer; list-style: none; }
.filter-chip::-webkit-details-marker { display: none; }
summary.filter-chip::after { content: "▾"; color: var(--leise); font-size: .8em; margin-left: .15rem; }
.filter-chip.gesetzt { background: var(--marke-hell); border-color: transparent; color: var(--marke-dunkel); }
.filter-chip.gesetzt span[aria-hidden] { font-size: 1.15em; line-height: 1; margin-left: .1rem; }
.filter-chip:hover, .zeitraum-wahl[open] summary { border-color: var(--marke); }
.zeitraum-wahl { position: relative; }
.wahl-liste { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 12rem; margin: 0; padding: .3rem 0; list-style: none; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.wahl-liste a { display: block; position: relative; padding: .45rem .9rem .45rem 2.1rem; color: var(--schrift); text-decoration: none; }
.wahl-liste a:hover { background: #f2f2f4; }
.wahl-liste a[aria-current] { font-weight: 600; }
.wahl-liste a[aria-current]::before { content: "✓"; position: absolute; left: .85rem; font-weight: 700; }
.inhalt .wahl-liste a:hover, .inhalt a.filter-chip:hover, .inhalt .leistung-tabelle a:hover { text-decoration: none; }

.kennzahl-wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.1rem; }
.kennzahl { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; padding: .75rem .9rem .8rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); color: var(--leise); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.kennzahl:hover { border-color: var(--m); }
.kennzahl[aria-pressed="true"] { background: var(--m-flaeche); border-color: var(--m-flaeche); color: var(--m-tinte); }
.kennzahl:disabled { cursor: default; opacity: .65; border-style: dashed; }
.kennzahl:disabled:hover { border-color: var(--linie); }
.kennzahl:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.kennzahl-name { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; }
.kennzahl-haken { position: relative; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 3px; }
.kennzahl[aria-pressed="true"] .kennzahl-haken::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kennzahl-wert { font-size: 1.75rem; line-height: 1.15; font-weight: 600; }
.kennzahl:not([aria-pressed="true"]) .kennzahl-wert { color: var(--schrift); }
.kennzahl-zusatz { font-size: .78rem; }

.verlauf { position: relative; min-height: 260px; border-radius: 6px; }
.verlauf:focus-visible { outline: 2px solid var(--marke); outline-offset: 4px; }
.verlauf-svg { display: block; max-width: 100%; height: auto; }
.vl-raster { stroke: #e1e0d9; stroke-width: 1; }
.vl-grund { stroke: #c3c2b7; stroke-width: 1; }
.vl-achse { font-size: 11px; fill: var(--leise); font-variant-numeric: tabular-nums; }
.vl-linie { fill: none; stroke: var(--m); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vl-name { font-size: 12px; fill: var(--schrift); }
.vl-kreuz { stroke: #898781; stroke-width: 1; }
.vl-punkt { fill: var(--m); stroke: #fff; stroke-width: 2; }
.verlauf-tipp { position: absolute; top: 8px; z-index: 5; display: grid; grid-template-columns: 14px auto auto; gap: .2rem .5rem; align-items: center; padding: .5rem .75rem; background: var(--karte); border: 1px solid rgba(11,11,11,.1); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: .82rem; white-space: nowrap; pointer-events: none; }
.verlauf-tipp[hidden] { display: none; }
.tipp-kopf { grid-column: 1 / -1; color: var(--leise); margin-bottom: .1rem; }
.tipp-zeile { display: contents; }
.tipp-zeile strong { text-align: right; font-variant-numeric: tabular-nums; }
.tipp-zeile span { color: var(--leise); }
.tipp-schluessel { display: block; height: 3px; border-radius: 2px; background: var(--m); }
.verlauf-hinweis { margin: .35rem 0 0; min-height: 1.2em; }

.tab-reiter { flex-wrap: nowrap; margin: -.4rem 0 0; overflow-x: auto; scrollbar-width: none; }
.tab-reiter button { flex: none; padding: .6rem .9rem; margin-bottom: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--leise); font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.tab-reiter button[aria-selected="true"] { color: var(--marke); border-bottom-color: var(--marke); }
.tab-reiter button:focus-visible { outline: 2px solid var(--marke); outline-offset: -2px; }
.leistung-tabelle .sortieren { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.leistung-tabelle th[aria-sort] { color: var(--schrift); }
.leistung-tabelle td:first-child { overflow-wrap: anywhere; }
.leistung-tabelle .zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.leistung-tabelle tr.klickbar { cursor: pointer; }
.leistung-tabelle tr.klickbar:hover td { background: #f6f7f9; }
.leistung-tabelle a { color: var(--schrift); text-decoration: none; }
.leistung-tabelle tr.klickbar:hover a { color: var(--marke); }
.blaettern-leiste { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem .9rem; margin-top: .6rem; }
.blaettern-leiste label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }
.blaettern-leiste select { width: auto; margin: 0; padding: .2rem .4rem; }
.blaettern-leiste .symbol-knopf { min-width: 2rem; }
.trichter-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.5rem; align-items: center; margin-bottom: .6rem; }
@media (max-width: 800px) { .kennzahl-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kennzahl-wert { font-size: 1.4rem; } .trichter-zeile { grid-template-columns: minmax(0, 1fr); } .blaettern-leiste .nur-breit { display: none; } }
.balken { display: block; height: 6px; background: #f0f2f4; border-radius: 3px; margin-top: .25rem; }
.balken i { display: block; height: 100%; background: #2a78d6; border-radius: 3px; }
.trichter { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.trichter li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 6.5rem; align-items: center; gap: .6rem; }
.trichter .balken { height: 18px; margin: 0; }
.trichter .wert { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.trichter small { color: var(--leise); font-weight: 400; }
.balken .w0{width:0%}
.balken .w1{width:5%}
.balken .w2{width:10%}
.balken .w3{width:15%}
.balken .w4{width:20%}
.balken .w5{width:25%}
.balken .w6{width:30%}
.balken .w7{width:35%}
.balken .w8{width:40%}
.balken .w9{width:45%}
.balken .w10{width:50%}
.balken .w11{width:55%}
.balken .w12{width:60%}
.balken .w13{width:65%}
.balken .w14{width:70%}
.balken .w15{width:75%}
.balken .w16{width:80%}
.balken .w17{width:85%}
.balken .w18{width:90%}
.balken .w19{width:95%}
.balken .w20{width:100%}
/* Kopfzeile: Titel und Aktionen in einer Zeile, Untertitel darunter */
.kopfzeile > h1 { order: 1; }
.kopfzeile > .aktionen, .kopfzeile > .segmente, .kopfzeile > form { order: 2; margin-left: auto; }
.kopfzeile > .untertitel { order: 3; }
/* Links in der Anwendung ohne Unterstreichung, beim Zeigen mit */
.inhalt a { text-decoration: none; }
.inhalt a:hover { text-decoration: underline; }
.inhalt a.knopf:hover, .inhalt a.kachel:hover, .inhalt .eingang a:hover, .inhalt .termin-liste a:hover, .inhalt .anfrage-liste a:hover, .inhalt .ereignis:hover, .inhalt .nav-gruppe a:hover, .inhalt .vorlage a:hover, .inhalt .monat a:hover, .inhalt .rollen-liste a:hover, .inhalt .segmente a:hover, .inhalt .filter-reiter a:hover, .inhalt .reiter a:hover { text-decoration: none; }

/* Konto */
.eigenschaften { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.25rem; margin: 0 0 1rem; }
.eigenschaften dt { color: var(--leise); font-size: .88rem; }
.eigenschaften dd { margin: 0; }
.formular.schmal { max-width: 26rem; }
.spalten-liste { columns: 2 16rem; column-gap: 1.5rem; padding-left: 1.1rem; }
.geraete li { padding: .45rem 0; }

/* Vorschau der Vorlagen: Zeichnung der Website, ohne Nummern */
.vorlage-bild, .vorbild-bild { display: block; aspect-ratio: 16 / 9; background: #f6f7f9; border-radius: 6px; overflow: hidden; }
.vorlage-bild svg, .vorbild-bild svg { display: block; width: 100%; height: 100%; }
.vorlage-bild .ag-marken, .vorbild-bild .ag-marken { display: none; }

/* Anlagen-Editor: Bedienfeld über der Zeichnung auf voller Breite, Inhalt in Spalten (statt rechter Leiste) */
.bedienfeld { padding-top: .6rem; }
.bedienfeld .leisten-reiter { justify-content: flex-start; margin: 0 0 .9rem; }
.bedienfeld .leisten-reiter button { flex: 0 0 auto; padding: .5rem 1rem; }
.spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem 1.6rem; align-items: start; }
.spalten > .spalte { min-width: 0; }
.spalten .knopfzeile { flex-wrap: wrap; align-items: center; }
.bedienfeld .treffer-liste { max-height: 220px; }
.bedienfeld .vorschau-liste { max-height: 300px; overflow: auto; }
.notiz-feld { display: grid; gap: .3rem; margin-top: .8rem; font-weight: 600; }
@media (max-width: 1100px) { .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .spalten > .breit-spalte { grid-column: 1 / -1; } }
@media (max-width: 700px) { .spalten { grid-template-columns: minmax(0, 1fr); } }

.stueckliste select.tausch { width: 100%; font-weight: 500; margin-bottom: .2rem; }
.stueckliste input.unter-tausch { font-size: .8rem; color: var(--leise); }
.stueckliste input.unter-tausch:placeholder-shown { border-color: transparent; background: transparent; }
.stueckliste input.unter-tausch:focus { border-color: var(--linie); background: #fff; }
.spalten .knopfzeile .knopf { white-space: nowrap; }

/* Anordnen per Ziehen */
.zk-marke, .zk-treffer { touch-action: none; }
.zk-marke { cursor: grab; }
.zk-svg.zieht, .zk-svg.zieht .zk-marke, .zk-svg.zieht .zk-treffer { cursor: grabbing; }
.zk-svg.zieht .zk-treffer:hover { fill: transparent; stroke: transparent; }
.zk-ziel { stroke: var(--marke); stroke-linecap: round; }
.zk-ziel.nein { stroke: var(--fehler); stroke-dasharray: 6 5; }
.zk-ziel-text { fill: var(--fehler); font-family: system-ui, sans-serif; font-weight: 600; }

/* Schritte im Konfigurator: erst konfigurieren, dann das Angebot in eigener Ansicht; daneben die Entwürfe */
.titel-etikett { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin-bottom: .1rem; }
.schritte-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; }
.schritte { display: inline-flex; background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; padding: 3px; }
.schritte button { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; border-radius: 999px; padding: .45rem 1rem; font: inherit; font-weight: 600; color: var(--leise); cursor: pointer; }
.schritte button[aria-current="step"] { background: var(--marke); color: #fff; }
.schritt-nr { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgb(0 0 0 / .08); font-size: .75rem; }
.schritte button[aria-current="step"] .schritt-nr { background: rgb(255 255 255 / .25); }
.schritte-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; }
.schritte-aktionen form { margin: 0; }
.bedienfeld-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .8rem; }
.bedienfeld-kopf h2 { margin: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.bedienfeld-kopf h2 .leise { font-weight: 400; }
.angebot-ansicht .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
.angebot-ansicht .vorschau-liste { max-height: none; }
/* Vorschau der Positionen: Nummer, Text, Betrag in festen Spalten, auch bei langen Namen */
.vorschau-liste { list-style: none; padding-left: 0; counter-reset: pos; }
.vorschau-liste li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: baseline; counter-increment: pos; }
.vorschau-liste li::before { content: counter(pos) "."; color: var(--leise); font-variant-numeric: tabular-nums; }
.vorschau-liste li > span:first-child { display: block; }
.vorschau-liste li > span:last-child { float: none; margin: 0; white-space: nowrap; text-align: right; }

/* Komponenten: technische Daten als Tabelle mit Eingabefeldern, Stundensätze */
.tech-daten { width: 100%; border-collapse: collapse; }
.tech-daten th { text-align: left; font-size: .75rem; color: var(--leise); font-weight: 600; padding: 0 .4rem .3rem 0; }
.tech-daten th.rechts { text-align: right; }
.tech-daten td { padding: .15rem .4rem .15rem 0; }
.tech-daten input { width: 100%; }
.tech-daten input.rechts { text-align: right; }
.saetze { max-width: 46rem; margin-bottom: .6rem; }
.tabelle tr.aktiv td { background: var(--marke-hell); }
.stueckliste .marge { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--leise); font-size: .85rem; }
.stueckliste td.ek input { color: var(--leise); }
.marge-klein { color: var(--ok); }
.teile-kurz li { flex-wrap: wrap; }
.technik { flex-basis: 100%; margin: .15rem 0 .3rem; font-size: .82rem; }
.technik summary { color: var(--marke); cursor: pointer; }
.technik-zeilen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .25rem; margin: .35rem 0; }
.technik-zeilen input { font-size: .82rem; padding: .3rem .45rem; }
.kalkulation { background: var(--grund); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem; }
.kalkulation .eigenschaften { margin: 0; }

/* Korrespondenz mit dem Kunden */
.mail-schreiben { margin-bottom: .8rem; }
.mail-schreiben > summary { list-style: none; display: inline-flex; cursor: pointer; }
.mail-schreiben > summary::-webkit-details-marker { display: none; }
.mail-schreiben[open] > summary { margin-bottom: .6rem; }
.korrespondenz { list-style: none; margin: 0; padding: 0; }
.korrespondenz > li { border-bottom: 1px solid var(--linie); }
.korrespondenz summary { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .5rem; align-items: start; padding: .5rem 0; cursor: pointer; list-style: none; }
.korrespondenz summary::-webkit-details-marker { display: none; }
.korrespondenz .richtung { font-weight: 700; text-align: center; border-radius: 6px; line-height: 1.6rem; }
.korrespondenz .mail-ein .richtung { background: var(--ok-hell); color: var(--ok); }
.korrespondenz .mail-aus .richtung { background: var(--marke-hell); color: var(--marke); }
.korrespondenz .mail-hinweis .richtung { background: var(--hinweis-hell); color: var(--hinweis); }
.mail-kopf { display: grid; }
.korrespondenz .mailtext { margin: 0 0 .6rem 2.1rem; }
.datenblatt-zeichnung { position: absolute; left: -30000px; top: 0; width: 1600px; }
.datenblatt-knopf { margin-bottom: .8rem; }
.stueckliste td.fest { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: .6rem; }
.stueckliste tr.stunden .einheit { text-align: center; }

/* Seitenwechsel ohne Aufblitzen (Moritz 2026-11-09: „die seitenleiste links wird immer noch weiß“): der Browser hält
   beim Wechsel das alte Bild, bis die neue Seite steht (Safari 18.2+, Chrome 126+); die Leiste bleibt dabei stehen,
   nur der Inhalt blendet kurz über */
@view-transition { navigation: auto; }
.seitenleiste { view-transition-name: seitenleiste; }
::view-transition-old(seitenleiste), ::view-transition-new(seitenleiste) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }