/* hnvr.me Plattform nach dem Figma-Prototyp (Datei JkiPNR4yuZr9VdL50YPnkg, Seite 65:2 "Werkbank v2", Marke hnvr.me).
   Masse aus get_design_context (S00, S10, S11 ...). Schriften lokal: Staatliches (Titel, Kennzahlen), Inter (Text),
   Geist Mono (Zahlen, Kennzeichen), Space Grotesk (Wortmarke). Symbole: /symbole.svg (lucide-static, ISC).
   Gerechnete Kontraste (WCAG, gegen die naechste deckende Flaeche): Tinte auf Papier 15,2 · text2 #5C554A auf Papier 6,4,
   auf Weiss 7,3 · text3 #6E675B auf Papier 4,88, auf Weiss 5,6 · Tinte auf Orange 6,31 · akzent-text #A8420A auf Weiss 6,09,
   auf akzent-weich 4,98 · gut auf gut-weich 5,6 · warn auf warn-weich 5,0 · fehler auf fehler-weich 5,1 · #B9B2A5 auf Tinte 8,2.
   Abweichung vom Prototyp: Links und Texte in Orange (#FF7120) stehen hier in akzent-text #A8420A, weil Orange auf Weiss
   nur 2,75 erreicht. Die Wortmarke "hnvr.me" bleibt Orange (Logo, WCAG 1.4.3 Ausnahme). Kein weisser Text auf Orange. */
@font-face { font-family: 'Inter'; src: url('schrift/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('schrift/inter-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; src: url('schrift/space-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'Space Grotesk'; src: url('schrift/space-grotesk-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1E9F; }
@font-face { font-family: 'Staatliches'; src: url('schrift/staatliches-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Staatliches'; src: url('schrift/staatliches-latin-ext-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url('schrift/geist-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2318, U+25B2, U+25BC, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; src: url('schrift/geist-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2318, U+25B2, U+25BC, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; src: url('schrift/geist-mono-latin-ext-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1E9F; }
@font-face { font-family: 'Geist Mono'; src: url('schrift/geist-mono-latin-ext-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1E9F; }

:root {
  --papier: #F3EFE7; --flaeche: #FFFFFF; --linie: #E4DED2; --tinte: #1C1A17; --text2: #5C554A; --text3: #6E675B; --dunkel-text: #B9B2A5;
  --akzent: #FF7120; --akzent-weich: #FFE3D2; --akzent-text: #A8420A;
  --gut: #2F6F3E; --gut-weich: #DFF0E0; --warn: #8A5A00; --warn-weich: #F7EBCF; --fehler: #A83F24; --fehler-weich: #F6E1D8; --fehler-punkt: #B5472A;
  --radius: 16px; --radius-klein: 10px;
  --titel: 'Staatliches', 'Space Grotesk', system-ui, sans-serif; --text: 'Inter', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; --wort: 'Space Grotesk', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--papier); color: var(--tinte); font: 14px/1.4 var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--akzent-text); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--akzent-text); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 400; letter-spacing: 0; line-height: 1.15; margin: 0; }
h1 { font-size: 34px; line-height: 38px; }
h2 { font-size: 17px; line-height: 21px; }
h3 { font-size: 15px; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Symbole */
.sym { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.sym.voll { fill: currentColor; stroke: none; }
.sym.pfeil { color: var(--akzent); }

/* ---------- Rahmen ---------- */
.rahmen { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.leiste { border-right: 1px solid var(--linie); padding: 12px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; min-height: 0; }
.kundenmarke { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; color: var(--tinte); text-decoration: none; flex: none; }
.kundenmarke-zeichen { width: 30px; height: 30px; border-radius: 9px; background: var(--akzent); color: var(--tinte); display: grid; place-items: center; font: 15px/1 var(--titel); flex: none; }
.kundenmarke-name { font: 20px/1.2 var(--titel); letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wechsler { margin-top: 12px; position: relative; flex: none; }
.wechsler summary { list-style: none; display: flex; align-items: center; gap: 10px; background: var(--flaeche); border-radius: 12px; padding: 6px 10px; cursor: pointer; color: var(--tinte); }
.wechsler summary::-webkit-details-marker { display: none; }
.wechsler-zeichen { width: 32px; height: 32px; border-radius: 9px; background: var(--akzent-weich); color: var(--akzent-text); display: grid; place-items: center; font: 600 14px/1 var(--text); flex: none; }
.wechsler-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wechsler-name { font: 600 14px/17px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wechsler-host { font: 10px/13px var(--mono); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wechsler summary .sym { color: var(--text2); }
.wechsler[open] summary .sym { transform: rotate(180deg); }
.wechsler-liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 8px 24px rgba(28, 26, 23, 0.12); }
.wechsler-liste a { padding: 7px 10px; border-radius: 8px; color: var(--tinte); text-decoration: none; font-size: 13px; }
.wechsler-liste a:hover { background: var(--papier); }
.wechsler-liste a[aria-current='page'] { background: var(--akzent-weich); color: var(--akzent-text); font-weight: 600; }
.wechsler-liste .wechsler-alle { border-top: 1px solid var(--linie); border-radius: 0 0 8px 8px; color: var(--text2); }

.navigation { margin-top: 18px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; }
.nav-punkt { display: flex; align-items: center; gap: 12px; padding: 6px 12px; min-height: 30px; border-radius: 10px; color: var(--tinte); text-decoration: none; font: 500 14px/17px var(--text); flex: none; }
.nav-punkt .sym { color: var(--tinte); }
a.nav-punkt:hover { background: rgba(28, 26, 23, 0.05); }
.nav-punkt[data-aktiv='ja'] { background: var(--akzent); color: var(--tinte); }
.nav-punkt[aria-disabled='true'] { color: var(--text3); cursor: not-allowed; }
.nav-punkt[aria-disabled='true'] .sym { color: var(--text3); }
.nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-zaehler { margin-left: auto; background: var(--akzent-weich); color: var(--akzent-text); border-radius: 999px; padding: 1px 7px; font: 500 11px/14px var(--mono); }
.nav-punkt[data-aktiv='ja'] .nav-zaehler { background: var(--tinte); color: var(--papier); }
.nav-hnvr { width: 18px; height: 18px; border-radius: 5px; background: var(--tinte); color: var(--akzent); display: grid; place-items: center; flex: none; }
.nav-kopf { font: 500 10px/14px var(--mono); letter-spacing: 0.6px; text-transform: uppercase; color: var(--text3); padding: 6px 12px 2px; }
.untermenue { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 24px; flex: none; }
.untermenue span[aria-disabled='true'] { padding: 4px 8px 4px 10px; border-radius: 8px; color: var(--text3); font: 400 13px/16px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: not-allowed; }
.untermenue a { padding: 4px 8px 4px 10px; border-radius: 8px; color: var(--text2); text-decoration: none; font: 400 13px/16px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.untermenue a:hover { background: rgba(28, 26, 23, 0.05); }
.untermenue a[aria-current='page'] { background: var(--akzent-weich); color: var(--akzent-text); font-weight: 600; }
.trenner { height: 1px; background: var(--linie); flex: none; }
.nav-luecke { flex: 1 0 0; }
.navigation { scrollbar-width: thin; scrollbar-color: var(--linie) transparent; }
.konto { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px 8px; margin-top: 10px; flex: none; }
.konto-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--tinte); color: var(--papier); display: grid; place-items: center; font: 500 12px/1 var(--text); flex: none; }
.konto-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.konto-name { font: 500 13px/16px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.konto-rolle { font: 400 11px/13px var(--text); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.konto-ab { margin: 0; }
.bereitgestellt { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 12px; margin-top: 3px; flex: none; }
.bereitgestellt-text { font: 400 9px/1 var(--mono); letter-spacing: 0.54px; text-transform: uppercase; color: var(--text3); }
.logo { display: flex; align-items: center; gap: 1px; }
.logo-wort { font: 700 15px/1 var(--wort); letter-spacing: -0.3px; color: var(--tinte); }
.logo-me { color: var(--akzent); }

.haupt { display: flex; flex-direction: column; min-width: 0; }
.statuszeile { display: flex; align-items: center; gap: 10px; padding: 20px 32px 0; min-height: 58px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.status-punkt { width: 6px; height: 6px; border-radius: 999px; background: var(--gut); flex: none; }
.status-gut { color: var(--gut); font-weight: 500; margin-left: -2px; }
.status-rest { color: var(--text3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zurueck { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/17px var(--text); color: var(--akzent-text); text-decoration: none; }
.zurueck:hover { text-decoration: underline; }
.luecke { flex: 1 1 0; min-width: 0; }
.topsuche { display: flex; align-items: center; gap: 8px; width: 260px; height: 38px; padding: 0 6px 0 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; color: var(--text3); cursor: not-allowed; flex: none; }
.topsuche-text { font-size: 13px; white-space: nowrap; }
.kbd { background: var(--papier); border: 1px solid var(--linie); border-radius: 6px; padding: 2px 6px; font: 500 11px/14px var(--mono); color: var(--text2); }
.knopf-rund { width: 38px; height: 38px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); display: inline-grid; place-items: center; color: var(--tinte); cursor: pointer; flex: none; padding: 0; text-decoration: none; }
.knopf-rund.klein { width: 30px; height: 30px; border-color: transparent; background: transparent; color: var(--text2); }
.knopf-rund.klein:hover { background: var(--flaeche); border-color: var(--linie); }
.knopf-rund[aria-disabled='true'] { cursor: not-allowed; color: var(--text3); }
.knopf-rund.dunkel { background: var(--tinte); border-color: var(--tinte); color: var(--papier); font: 500 13px/1 var(--mono); }
.knopf-rund.mono { font: 500 13px/1 var(--mono); }

.seitenkopf { display: flex; align-items: flex-end; gap: 16px; padding: 18px 32px 0; flex-wrap: wrap; }
.seitenkopf-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.titelzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seitenkopf .unter { color: var(--text2); font-size: 14px; line-height: 17px; max-width: 80ch; }
.aktionen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aktionen:empty { display: none; }

main.inhalt { padding: 24px 32px 32px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mehr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mehr-kopf { font: 500 12px/15px var(--text); color: var(--text3); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 6px 12px; font: 500 12px/15px var(--text); color: var(--tinte); text-decoration: none; white-space: nowrap; }
.chip .sym { color: var(--akzent-text); }
a.chip:hover { border-color: var(--tinte); }
.chip[aria-disabled='true'] { color: var(--text3); cursor: not-allowed; }
.chip.aktiv { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }

/* ---------- Knoepfe ---------- */
.knopf { font: 500 14px/17px var(--text); border-radius: var(--radius-klein); padding: 10px 16px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.knopf:hover { border-color: var(--tinte); }
.knopf.primaer { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.knopf.akzent { background: var(--akzent); color: var(--tinte); border-color: var(--akzent); }
.knopf.gefahr { color: var(--fehler); }
.knopf.text { background: transparent; border-color: transparent; color: var(--akzent-text); padding-left: 8px; padding-right: 8px; }
.knopf.klein { padding: 6px 12px; font-size: 13px; }
.knopf[disabled], .knopf[aria-disabled='true'] { opacity: 1; color: var(--text3); background: var(--flaeche); border-color: var(--linie); cursor: not-allowed; }
.knopf[hidden] { display: none; }
form.inline { display: inline; margin: 0; }

/* ---------- Karten, Kennzahlen, Aufgaben ---------- */
.karte { background: var(--flaeche); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.karte-kopf h2 { display: flex; align-items: baseline; gap: 10px; }
.karte-kopf .anzahl { font: 400 12px/15px var(--mono); color: var(--text3); }
.link-pfeil { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/16px var(--text); color: var(--akzent-text); text-decoration: none; white-space: nowrap; }
.link-pfeil:hover { text-decoration: underline; }
.abschnitt { display: flex; align-items: center; gap: 10px; }
.abschnitt h2 { flex: 1; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.knopf-rund.glocke { flex: none; }
.kpis.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis.k1 { grid-template-columns: minmax(0, 1fr); }
a.karte { color: var(--tinte); text-decoration: none; }
a.karte:hover { box-shadow: inset 0 0 0 1px var(--linie); }
.karte-wert .spalte { gap: 4px; }
.kpi { background: var(--flaeche); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; color: var(--tinte); text-decoration: none; min-width: 0; }
a.kpi:hover { box-shadow: inset 0 0 0 1px var(--linie); }
.kpi-label { font: 500 11px/14px var(--mono); letter-spacing: 0.66px; text-transform: uppercase; color: var(--text3); }
.kpi-wert { font: 36px/38px var(--titel); }
.kpi-zeile { display: flex; gap: 8px; align-items: center; font-size: 12px; line-height: 15px; color: var(--text3); flex-wrap: wrap; }
.trend { font: 500 12px/16px var(--mono); color: var(--gut); }
.trend.runter { color: var(--fehler); }
.trend.neutral { color: var(--text2); }
.aufgaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aufgabe { background: var(--tinte); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; color: var(--papier); text-decoration: none; min-width: 0; }
.aufgabe-kopf { display: flex; align-items: center; gap: 10px; font: 600 16px/19px var(--text); }
.aufgabe-symbol { width: 28px; height: 28px; border-radius: 999px; background: var(--akzent); color: var(--tinte); display: grid; place-items: center; flex: none; }
.aufgabe-unter { font-size: 13px; line-height: 16px; color: var(--dunkel-text); }
.aufgabe-los { display: flex; align-items: center; gap: 6px; font: 500 13px/16px var(--text); color: var(--papier); }
a.aufgabe:hover .aufgabe-los { text-decoration: underline; }
.aufgabe.ruhig { background: var(--flaeche); color: var(--tinte); }
.aufgabe.ruhig .aufgabe-unter { color: var(--text3); }
.aufgabe.ruhig .aufgabe-los { color: var(--text2); }
.reihe2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.spalte.weit { gap: 20px; }
.hinweis { background: var(--akzent-weich); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; font: 500 13px/16px var(--text); color: var(--tinte); }
.hinweis .sym { color: var(--akzent-text); }
.hinweis p { flex: 1; }
.diagramm { width: 100%; height: 96px; display: block; }
.diagramm .flaeche { fill: var(--akzent); }
.diagramm .linie { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; }
.diagramm .punkt { fill: var(--akzent); stroke: var(--flaeche); stroke-width: 2; }
.achse { display: flex; justify-content: space-between; font: 400 11px/14px var(--mono); color: var(--text3); }
.karte-wert { display: flex; align-items: flex-end; gap: 10px; }
.karte-wert .gross { font: 30px/1.2 var(--titel); }
.termin { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.termin:last-child { border-bottom: 0; padding-bottom: 0; }
.termin-zeit { font: 500 13px/17px var(--mono); flex: none; width: 44px; }
.termin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.termin-titel { font: 500 14px/17px var(--text); }
.termin-unter { font-size: 12px; line-height: 15px; color: var(--text3); }
a.termin:hover .termin-titel { text-decoration: underline; }

/* ---------- Status-Pillen (Punkt + Text) ---------- */
.pille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 500 12px/15px var(--text); white-space: nowrap; background: var(--papier); color: var(--text2); vertical-align: middle; }
.pille::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.pille.gut { background: var(--gut-weich); color: var(--gut); }
.pille.warn { background: var(--warn-weich); color: var(--warn); }
.pille.akzent { background: var(--akzent-weich); color: var(--akzent-text); }
.pille.akzent::before { background: var(--akzent); }
.pille.fehler { background: var(--fehler-weich); color: var(--fehler); }
.pille.fehler::before { background: var(--fehler-punkt); }
.pille.grau { background: var(--papier); color: var(--text2); }
.pille.ohne::before { display: none; }

/* ---------- Filterleiste ---------- */
.filterleiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reiter { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--papier); }
.reiter a { padding: 7px 14px; border-radius: 9px; font: 500 13px/16px var(--text); color: var(--text2); text-decoration: none; white-space: nowrap; }
.reiter a:hover { color: var(--tinte); }
.reiter .reiter-aus { padding: 7px 14px; border-radius: 9px; font: 500 13px/16px var(--text); color: var(--text3); cursor: not-allowed; white-space: nowrap; }
.reiter a[aria-current='page'] { background: var(--flaeche); color: var(--tinte); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.suchfeld-gross { display: flex; align-items: center; gap: 8px; width: 260px; height: 40px; padding: 0 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; color: var(--text3); }
.suchfeld-gross:focus-within { outline: 3px solid var(--akzent-text); outline-offset: 2px; }
.nav-punkt .nav-hnvr .sym { color: var(--akzent); }
.suchfeld-gross input[type=search] { border: 0; border-radius: 0; padding: 0; height: 100%; font: 400 14px/17px var(--text); color: var(--tinte); background: transparent; width: 100%; min-width: 0; outline: none; }
.suchfeld-gross input::placeholder { color: var(--text3); }
.auswahlknopf { position: relative; display: inline-flex; align-items: center; }
.auswahlknopf .sym { position: absolute; left: 17px; pointer-events: none; color: var(--tinte); }
.auswahlknopf select { field-sizing: content; appearance: none; -webkit-appearance: none; font: 500 14px/17px var(--text); color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 16px 10px 41px; width: auto; cursor: pointer; }

/* ---------- Tabellen im Stil des Prototyps ---------- */
.liste { background: var(--flaeche); border-radius: var(--radius); padding: 4px 8px; display: flex; flex-direction: column; min-width: 0; }
.liste-zeile { display: grid; align-items: center; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--linie); border-radius: 10px; color: var(--tinte); text-decoration: none; min-height: 60px; }
.liste-zeile:last-child { border-bottom: 0; }
a.liste-zeile:hover { background: #FAF8F4; }
.liste-kopf { min-height: 0; padding: 10px 16px; align-items: center; border-radius: 0; font: 500 11px/14px var(--mono); letter-spacing: 0.66px; text-transform: uppercase; color: var(--text3); }
.liste-kopf:hover { background: transparent; }
.rechts { text-align: right; justify-self: end; }
.zelle-mono { font: 400 13px/17px var(--mono); color: var(--text2); white-space: nowrap; }
.zelle-nr { font: 500 13px/17px var(--mono); color: var(--tinte); white-space: nowrap; }
.zelle-betrag { font: 500 13px/17px var(--mono); color: var(--tinte); white-space: nowrap; text-align: right; justify-self: end; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--akzent-weich); color: var(--akzent-text); display: grid; place-items: center; font: 500 11px/1 var(--text); flex: none; }
.person-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.person-name { font: 500 14px/17px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-unter { font: 400 12px/15px var(--text); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mehr-knopf { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: var(--text2); justify-self: end; }
a.liste-zeile:hover .mehr-knopf { background: var(--papier); }
.kaestchen { width: 18px; height: 18px; border: 1px solid var(--linie); border-radius: 5px; background: var(--flaeche); display: block; }
.z-bestellungen { grid-template-columns: 18px 80px minmax(0, 1fr) 110px 60px 90px 110px 100px 90px 38px; }
.z-neueste { grid-template-columns: 80px minmax(0, 1fr) 90px 100px 90px 38px; }
.z-buchungen { grid-template-columns: 130px minmax(0, 1.2fr) minmax(0, 1fr) 70px 170px 110px 38px; }
.z-kontakte { grid-template-columns: 18px minmax(0, 1.4fr) minmax(0, 1fr) 150px 38px; }
.z-mitglieder { grid-template-columns: 18px minmax(0, 1fr) 110px 150px 120px 150px 38px; }
.z-blog { grid-template-columns: 64px minmax(0, 1fr) 150px 130px auto; }
.z-einsendung { grid-template-columns: 30px minmax(0, 1fr) 150px 90px; }
.beitrag-bild { width: 64px; height: 44px; border-radius: 8px; background: var(--akzent-weich); color: var(--akzent-text); display: grid; place-items: center; }
.suchfeld-gross.breit { width: 320px; }
.reiter.dunkel { padding: 0; align-self: flex-start; }
.reiter.dunkel a[aria-current='page'] { background: var(--tinte); color: var(--papier); border-radius: 999px; }
details.karte > summary { cursor: pointer; font: 17px/21px var(--titel); list-style-position: inside; }
details.einsendung { border-bottom: 1px solid var(--linie); }
details.einsendung:last-child { border-bottom: 0; }
details.einsendung > summary { list-style: none; cursor: pointer; border-bottom: 0; }
details.einsendung > summary::-webkit-details-marker { display: none; }
.auftrag-zeile { display: flex; align-items: center; gap: 12px; padding: 14px 0; list-style: none; cursor: pointer; }
.auftrag-zeile::-webkit-details-marker { display: none; }
.auftrag-inhalt { padding: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.einsendung-felder { padding: 4px 16px 18px 56px; }
.z-produkte { grid-template-columns: 18px minmax(0, 1fr) 100px 60px 120px 80px 38px; }
.produkt-bild { width: 38px; height: 38px; border-radius: 8px; background: var(--papier); color: var(--text2); display: grid; place-items: center; flex: none; }
.knapp { color: var(--fehler); }
.ansicht-umschalter { display: flex; gap: 4px; }
.ansicht-umschalter .knopf-rund { width: 34px; height: 34px; border-radius: 8px; border-color: transparent; background: transparent; color: var(--text2); }
.ansicht-umschalter .knopf-rund.aktiv { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); cursor: default; }
.schalter-anzeige { display: inline-block; width: 40px; height: 22px; border-radius: 999px; background: var(--linie); position: relative; vertical-align: middle; }
.schalter-anzeige::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: var(--flaeche); }
.schalter-anzeige.an { background: var(--akzent); }
.schalter-anzeige.an::after { left: 21px; }
.seitennavigation { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }

/* Detailseiten (S11 Bestellung, S41 Buchung, S21 Produkt) */
.positionen { display: flex; flex-direction: column; }
.position { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.position-bild { width: 48px; height: 48px; border-radius: 10px; background: var(--papier); color: var(--text2); display: grid; place-items: center; flex: none; }
.position-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.position-name { font: 500 15px/18px var(--text); }
.position-unter { font: 400 13px/16px var(--text); color: var(--text2); }
.position-menge { font: 400 12px/15px var(--mono); color: var(--text2); white-space: nowrap; }
.position-summe { font: 500 15px/18px var(--mono); white-space: nowrap; min-width: 72px; text-align: right; }
dl.summen { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 4px 0 0; font-size: 14px; line-height: 17px; }
dl.summen dt { color: var(--text2); }
dl.summen dd { margin: 0; font: 400 14px/17px var(--mono); text-align: right; }
dl.summen .gesamt { font: 15px/20px var(--titel); color: var(--tinte); text-transform: uppercase; margin-top: 4px; }
dl.summen dd.gesamt { font-size: 20px; }
ol.verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
ol.verlauf li { position: relative; padding-left: 24px; display: flex; flex-direction: column; gap: 2px; }
ol.verlauf li::before { content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 999px; background: var(--text2); }
ol.verlauf li.akzent::before { background: var(--akzent); }
ol.verlauf li.gut::before { background: var(--gut); }
.verlauf-titel { font: 500 15px/18px var(--text); }
.verlauf-unter { font: 400 12px/15px var(--mono); color: var(--text3); }
.reihe.notiz { flex-wrap: nowrap; margin-top: 4px; }
.reihe.notiz input { flex: 1; }
input:disabled, textarea:disabled, select:disabled { background: var(--papier); color: var(--text3); cursor: not-allowed; }
.person.gross { gap: 12px; }
.avatar.gross { width: 44px; height: 44px; font-size: 15px; }
.person.gross .person-name { font: 600 17px/21px var(--text); }
.aktionsliste { display: flex; flex-direction: column; gap: 2px; margin-top: -4px; }
.aktionszeile { display: flex; align-items: center; gap: 10px; padding: 9px 0; font: 500 15px/18px var(--text); color: var(--tinte); list-style: none; cursor: pointer; }
.aktionszeile .sym:last-child { margin-left: auto; color: var(--text3); }
.aktionszeile[aria-disabled='true'] { color: var(--text3); cursor: not-allowed; }
.aktionszeile.gefahr { color: var(--fehler); }
.aktionszeile::-webkit-details-marker { display: none; }
details.aktionszeile-auf[open] .aktionszeile .sym:last-child { transform: rotate(90deg); }
details.aktionszeile-auf form { padding: 6px 0 4px; }

.zweispaltig.schmal { grid-template-columns: minmax(0, 1fr) 360px; }
.feld-einheit { position: relative; display: block; }
.feld-einheit input { padding-right: 34px; }
.feld-einheit > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 400 13px/1 var(--mono); color: var(--text3); }
.label { font: 500 13px/16px var(--text); color: var(--text2); }
.lagerliste { display: flex; flex-direction: column; gap: 8px; }
.lagerzeile { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.lagerzeile form { margin-left: auto; flex-wrap: nowrap; }
.lagerzeile .zelle-mono { margin-left: auto; }
.schalter-reihe { gap: 24px; }
.schalter-text { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/17px var(--text); color: var(--tinte); }
.schalter-text.aus { color: var(--text3); }

/* Wochenkalender (S40): Raster aus halben Stunden zu 20 px, Platzierung nur ueber Klassen (CSP ohne style-Attribute) */
.kal-steuerung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kal-titel { font: 20px/24px var(--titel); margin-left: 4px; }
.segment { display: flex; gap: 2px; padding: 4px; border-radius: 12px; }
.segment > * { padding: 7px 14px; border-radius: 9px; font: 500 14px/17px var(--text); color: var(--text2); text-decoration: none; }
.segment [aria-current='page'] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.segment [aria-disabled='true'] { color: var(--text3); cursor: not-allowed; }
.kal { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); grid-template-rows: 48px repeat(20, 20px); background: var(--flaeche); border-radius: var(--radius); overflow: hidden; }
.kal-kopf { grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border-bottom: 1px solid var(--linie); font: 500 10px/1 var(--mono); letter-spacing: 0.6px; text-transform: uppercase; color: var(--text3); }
.kal-kopf b { font: 17px/1 var(--titel); color: var(--tinte); letter-spacing: 0; }
.kal-kopf.heute { color: var(--akzent-text); }
.kal-kopf.heute b { background: var(--tinte); color: var(--papier); border-radius: 999px; width: 28px; height: 28px; display: grid; place-items: center; font-size: 15px; }
.kal-spalte { grid-row: 2 / -1; border-left: 1px solid var(--linie); background: repeating-linear-gradient(to bottom, transparent 0 39px, var(--linie) 39px 40px); }
.kal-spalte.heute { background-color: #FAF8F4; }
.kal-zeit { grid-column: 1; font: 400 10px/1 var(--mono); color: var(--text3); text-align: right; padding: 4px 8px 0 0; }
.kal-termin { margin: 2px 4px; border-radius: 8px; border-left: 3px solid var(--text2); background: var(--papier); padding: 5px 8px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; text-decoration: none; color: var(--tinte); min-height: 0; }
.kal-termin:hover { box-shadow: inset 0 0 0 1px var(--linie); }
.kal-termin b { font: 600 12px/15px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-termin span { font: 400 11px/14px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-termin i { font: 400 10px/13px var(--mono); font-style: normal; white-space: nowrap; }
.kal-termin.bestaetigt { background: var(--akzent-weich); border-left-color: var(--akzent); color: var(--akzent-text); }
.kal-termin.wartet { background: var(--warn-weich); border-left-color: var(--warn); color: var(--warn); }
.kal-termin.abgesagt { background: var(--papier); border-left-color: var(--text3); color: var(--text3); text-decoration: line-through; }
.kal-termin.gewaehlt { box-shadow: 0 0 0 2px var(--tinte); }
.kal .r1{grid-row-start:2} .kal .r2{grid-row-start:3} .kal .r3{grid-row-start:4} .kal .r4{grid-row-start:5} .kal .r5{grid-row-start:6} .kal .r6{grid-row-start:7} .kal .r7{grid-row-start:8} .kal .r8{grid-row-start:9} .kal .r9{grid-row-start:10} .kal .r10{grid-row-start:11} .kal .r11{grid-row-start:12} .kal .r12{grid-row-start:13} .kal .r13{grid-row-start:14} .kal .r14{grid-row-start:15} .kal .r15{grid-row-start:16} .kal .r16{grid-row-start:17} .kal .r17{grid-row-start:18} .kal .r18{grid-row-start:19} .kal .r19{grid-row-start:20} .kal .r20{grid-row-start:21} .kal .r21{grid-row-start:22} .kal .r22{grid-row-start:23} .kal .r23{grid-row-start:24} .kal .r24{grid-row-start:25} .kal .r25{grid-row-start:26} .kal .r26{grid-row-start:27} .kal .r27{grid-row-start:28} .kal .r28{grid-row-start:29} .kal .r29{grid-row-start:30} .kal .r30{grid-row-start:31} .kal .r31{grid-row-start:32} .kal .r32{grid-row-start:33} .kal .r33{grid-row-start:34} .kal .r34{grid-row-start:35} .kal .r35{grid-row-start:36} .kal .r36{grid-row-start:37} .kal .r37{grid-row-start:38} .kal .r38{grid-row-start:39} .kal .r39{grid-row-start:40} .kal .r40{grid-row-start:41}
.kal .h1{grid-row-end:span 1} .kal .h2{grid-row-end:span 2} .kal .h3{grid-row-end:span 3} .kal .h4{grid-row-end:span 4} .kal .h5{grid-row-end:span 5} .kal .h6{grid-row-end:span 6} .kal .h7{grid-row-end:span 7} .kal .h8{grid-row-end:span 8} .kal .h9{grid-row-end:span 9} .kal .h10{grid-row-end:span 10} .kal .h11{grid-row-end:span 11} .kal .h12{grid-row-end:span 12} .kal .h13{grid-row-end:span 13} .kal .h14{grid-row-end:span 14} .kal .h15{grid-row-end:span 15} .kal .h16{grid-row-end:span 16} .kal .h17{grid-row-end:span 17} .kal .h18{grid-row-end:span 18} .kal .h19{grid-row-end:span 19} .kal .h20{grid-row-end:span 20} .kal .h21{grid-row-end:span 21} .kal .h22{grid-row-end:span 22} .kal .h23{grid-row-end:span 23} .kal .h24{grid-row-end:span 24}
.kal .t1{grid-column:2} .kal .t2{grid-column:3} .kal .t3{grid-column:4} .kal .t4{grid-column:5} .kal .t5{grid-column:6} .kal .t6{grid-column:7} .kal .t7{grid-column:8}
.kal.slots-8{grid-template-rows:48px repeat(8,20px)} .kal.slots-10{grid-template-rows:48px repeat(10,20px)} .kal.slots-12{grid-template-rows:48px repeat(12,20px)} .kal.slots-14{grid-template-rows:48px repeat(14,20px)} .kal.slots-16{grid-template-rows:48px repeat(16,20px)} .kal.slots-18{grid-template-rows:48px repeat(18,20px)} .kal.slots-20{grid-template-rows:48px repeat(20,20px)} .kal.slots-22{grid-template-rows:48px repeat(22,20px)} .kal.slots-24{grid-template-rows:48px repeat(24,20px)} .kal.slots-26{grid-template-rows:48px repeat(26,20px)} .kal.slots-28{grid-template-rows:48px repeat(28,20px)} .kal.slots-30{grid-template-rows:48px repeat(30,20px)} .kal.slots-32{grid-template-rows:48px repeat(32,20px)} .kal.slots-34{grid-template-rows:48px repeat(34,20px)} .kal.slots-36{grid-template-rows:48px repeat(36,20px)} .kal.slots-38{grid-template-rows:48px repeat(38,20px)} .kal.slots-40{grid-template-rows:48px repeat(40,20px)}

/* Schublade rechts (S41) ueber abgedunkeltem Hintergrund */
.schleier { position: fixed; inset: 0; background: rgba(28, 26, 23, 0.42); z-index: 30; }
.schublade { position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100vw); background: var(--flaeche); z-index: 31; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(28, 26, 23, 0.18); }
.schublade-kopf { display: flex; align-items: flex-start; gap: 16px; padding: 22px 26px 20px; border-bottom: 1px solid var(--linie); }
.schublade-kopf .spalte { flex: 1; gap: 6px; }
.schublade-kopf h2 { font-size: 22px; line-height: 26px; }
.schublade-kopf .knopf-rund { border-color: transparent; background: var(--papier); }
.schublade-inhalt { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 18px; }
.schublade-fuss { display: flex; align-items: center; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--linie); background: var(--papier); }
.teilnehmer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; border-bottom: 1px solid var(--linie); }
.avatar.klein { width: 28px; height: 28px; font-size: 10px; }
.avatar.gruen { background: var(--gut-weich); color: var(--gut); }
.stapel.eng { gap: 12px; }

/* Kartenraster (S43 Dienstleistungen, SA0 Apps, A2C Sammlungen) */
.kartenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.angebot { padding: 20px; gap: 14px; }
.angebot-kopf { display: flex; align-items: flex-start; gap: 12px; }
.angebot-kopf .position-bild { width: 44px; height: 44px; }
a.karte.angebot:hover { box-shadow: inset 0 0 0 1px var(--linie); }
.position-bild.akzent { background: var(--akzent-weich); color: var(--akzent-text); }
.chipwolke { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.gross { font-size: 14px; padding: 7px 14px; background: var(--papier); border-color: var(--papier); }
.chip.gross .mono { font-size: 11px; }
.kartenraster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.thema-zeichen { width: 36px; height: 36px; border-radius: 999px; background: var(--akzent-weich); color: var(--akzent-text); display: grid; place-items: center; }
ul.hilfe-liste { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--text2); font-size: 14px; line-height: 20px; }
a.aktionszeile { text-decoration: none; }
a.aktionszeile:hover { color: var(--akzent-text); }
.freie-plaetze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.freier-platz { border: 1px dashed #D2C8B6; border-radius: 12px; background: #FAF8F4; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.nav-hnvr.gross { width: 28px; height: 28px; border-radius: 7px; margin-bottom: 8px; }
.nav-hnvr .sym { color: var(--akzent); }
.angebot-preis .gross { font: 22px/26px var(--titel); }

/* Einstellungen (S80/S81) */
.einstellungen { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.einstellungen-nav { padding: 8px; gap: 0; }
.einstellungen-nav a, .einstellungen-nav span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font: 500 14px/18px var(--text); color: var(--tinte); text-decoration: none; }
.einstellungen-nav a:hover { background: var(--papier); }
.einstellungen-nav a[aria-current='page'] { background: var(--papier); font-weight: 600; }
.einstellungen-nav a.auftrag { color: var(--text2); }
.einstellungen-nav span[aria-disabled='true'] { color: var(--text3); cursor: not-allowed; }
.avatar.kopf { width: 44px; height: 44px; font-size: 15px; }
.domain { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.domain:last-child { border-bottom: 0; }
a.domain.verweis { color: var(--tinte); text-decoration: none; }
a.domain.verweis:hover .position-name { text-decoration: underline; }
a.domain.verweis > .sym:last-child { color: var(--text3); }
.pille .sym { margin-left: -2px; }
.domain-zeichen { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--linie); color: var(--text2); display: grid; place-items: center; flex: none; }
.domain-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.domain-name { font: 500 15px/18px var(--mono); overflow-wrap: anywhere; }
.domain-unter { font: 400 12px/15px var(--text); color: var(--text2); }

.feld-symbol { position: relative; display: block; }
.feld-symbol .sym { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text2); pointer-events: none; }
.feld-symbol input[type] { padding-left: 38px; }
.tabelle.zeiten input[type=text] { width: 92px; font-family: var(--mono); font-size: 13px; }
.tabelle.zeiten td { padding: 8px 12px; }

/* Klassische Tabelle (Detailseiten, Team) */
table.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font: 500 11px/14px var(--mono); color: var(--text3); text-transform: uppercase; letter-spacing: 0.66px; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .aktionen { text-align: right; white-space: nowrap; display: table-cell; }
.tabelle .betrag { text-align: right; white-space: nowrap; font: 500 13px var(--mono); }
.tabelle tr.summe td { font-weight: 700; }
.tabelle input.menge { width: 110px; }
.tabelle-huelle { overflow-x: auto; }

/* ---------- Meldungen ---------- */
.meldung { border-radius: 14px; padding: 14px 18px; font: 500 13px/17px var(--text); }
.meldung.ok { background: var(--gut-weich); color: var(--gut); }
.meldung.fehler { background: var(--fehler-weich); color: var(--fehler); }
.meldung.warn { background: var(--warn-weich); color: var(--warn); }

/* ---------- Formulare ---------- */
form.formular { display: flex; flex-direction: column; gap: 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld label, .feld .label { font: 500 13px/16px var(--text); color: var(--text2); }
.feld .hilfe { color: var(--text3); font-size: 12px; }
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=search], input[type=number], input[type=password], select, textarea {
  font: 400 14px/17px var(--text); color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 11px 12px; width: 100%;
}
textarea { min-height: 88px; resize: vertical; }
textarea.code { font: 13px/1.5 var(--mono); min-height: 180px; }
.reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.felder-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.felder-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; }
.schalter { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/17px var(--text); cursor: pointer; }
.schalter input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 999px; background: var(--linie); position: relative; margin: 0; cursor: pointer; flex: none; }
.schalter input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: var(--flaeche); transition: left 0.15s; }
.schalter input:checked { background: var(--akzent); }
.schalter input:checked::after { left: 21px; }
.schalter input:disabled { cursor: not-allowed; }
.kontrolle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

/* ---------- Leere Zustaende, Allgemeines ---------- */
.leer { text-align: center; color: var(--text2); padding: 28px 12px; }
.leise { color: var(--text2); font-size: 13px; }
.sehr-leise { color: var(--text3); font-size: 12px; }
details.aufklapp summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
details.aufklapp { border-bottom: 1px solid var(--linie); }
details.aufklapp:last-child { border-bottom: 0; }
details.aufklapp[open] { padding-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.karte .karte { background: #FAF8F4; border: 1px solid var(--linie); }
.stufen-tabelle select { width: auto; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.stapel { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.kachel { background: var(--flaeche); border-radius: var(--radius); padding: 20px 22px; text-decoration: none; color: var(--tinte); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
a.kachel:hover { box-shadow: inset 0 0 0 1px var(--linie); }
.kachel .zahl { font: 36px/38px var(--titel); }
.kachel h2 { font-size: 20px; }
.umbruch { white-space: pre-wrap; }
.suchfeld { max-width: 360px; }
select.auswahl-schmal { width: auto; }
ul.hilfe { margin: 0; padding-left: 18px; }
.daten { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 10px 12px; font-size: 14px; line-height: 17px; }
.daten dt { color: var(--text3); font-size: 12px; line-height: 17px; }
.daten dd { margin: 0; color: var(--tinte); min-width: 0; overflow-wrap: anywhere; }

/* Einmalige Anzeige von Einladungslink und Zugangscode */
.codefeld { font: 500 20px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.code-hinweis { border: 2px solid var(--akzent-text); background: var(--flaeche); color: var(--tinte); display: flex; flex-direction: column; gap: 12px; }
.code-hinweis .code { font: 500 22px/1.2 var(--mono); letter-spacing: 0.08em; user-select: all; }
.kopier-feld { display: flex; flex-direction: column; gap: 6px; }
.kopier-feld label { font-weight: 600; font-size: 13px; color: var(--tinte); }
.kopier-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kopier-zeile input { flex: 1 1 240px; min-width: 0; user-select: all; }
.kopier-zeile input.mono { font-size: 13px; }

/* Seiten ohne Anmeldung (Anmelden, Einladung, Kein Zugang) */
.anmelden { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 16px; }
.anmelden .karte { max-width: 640px; width: 100%; padding: 30px; gap: 16px; }
.anmelden h1 { font-size: 28px; line-height: 32px; }
.anmelden-marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); }
.anmelden-logo { display: flex; align-items: center; gap: 2px; background: var(--tinte); border-radius: 14px; padding: 14px 18px; }
.logo-wort.gross { font-size: 32px; letter-spacing: -0.64px; color: var(--akzent); }
.logo-me.hell { color: var(--papier); }
.anmelden-zusatz { font: 20px/1 var(--titel); text-transform: uppercase; }
.auswahlliste { display: flex; flex-direction: column; gap: 10px; }
.auswahlliste form { margin: 0; }
.auswahl-zeile { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); text-align: left; cursor: pointer; font: inherit; color: var(--tinte); }
.auswahl-zeile:hover { border-color: var(--tinte); background: #FAF8F4; }
.sym-rechts { margin-left: auto; color: var(--text2); }
.anmelden-fuss { font: 400 12px/15px var(--mono); color: var(--text3); }
.anmelden h1, .anmelden .adresse { overflow-wrap: anywhere; }
.marke { display: flex; align-items: center; gap: 1px; text-decoration: none; color: var(--tinte); font: 700 20px/1 var(--wort); letter-spacing: -0.4px; }
.marke .me { color: var(--akzent); }
fieldset.feld { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.feld legend { padding: 0; margin-bottom: 6px; }
.einladung-auswahl label { font-weight: 400; font-size: 14px; }
.einladung-auswahl { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; }
.einladung-auswahl select { width: auto; }
.demo-hinweis { font: 12px var(--mono); color: var(--warn); background: var(--warn-weich); border-radius: 999px; padding: 4px 10px; display: inline-block; align-self: flex-start; }

@media (max-width: 1200px) {
  .reihe2, .zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-bestellungen { grid-template-columns: 80px minmax(0, 1fr) 90px 110px 90px 38px; }
  .z-bestellungen .schmal-weg { display: none; }
}
@media (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; }
  .leiste { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linie); }
  .navigation { overflow: visible; }
  .statuszeile, .seitenkopf { padding-left: 16px; padding-right: 16px; }
  .topsuche { display: none; }
  main.inhalt { padding: 20px 16px 48px; }
  .felder-2, .felder-3, .aufgaben, .kpis { grid-template-columns: 1fr; }
  .z-bestellungen, .z-neueste { grid-template-columns: minmax(0, 1fr) 90px; }
  .z-bestellungen > :not(.person):not(.zelle-betrag), .z-neueste > :not(.person):not(.zelle-betrag) { display: none; }
  .liste-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .liste-zeile > .schmal-weg, .liste-zeile > .kaestchen, .liste-zeile > .mehr-knopf { display: none; }
  .einstellungen, .kartenraster.drei, .freie-plaetze, .reihe2, .zweispaltig, .zweispaltig.schmal { grid-template-columns: minmax(0, 1fr); }
  .reiter { flex-wrap: wrap; }
  .kal-huelle { overflow-x: auto; }
  .kal { min-width: 640px; }
  .suchfeld-gross, .suchfeld-gross.breit { width: 100%; }
  .seitenkopf .aktionen { width: 100%; }
  .liste-zeile .reihe { flex-wrap: wrap; justify-content: flex-end; }
  .auswahlknopf select { max-width: calc(100vw - 32px); }
  .haupt { overflow-x: clip; }
}
@media (max-width: 520px) { .einladung-auswahl { grid-template-columns: 1fr; } }
.kaestchen.aus { background: var(--papier); }
.auswahlknopf select:disabled { color: var(--text3); cursor: not-allowed; }
.auswahlknopf:has(select:disabled) .sym { color: var(--text3); }

/* ---------- Super-Admin-Konsole (29.09.2026, Figma 554:7159 X0 bis X9) ----------
   Gerechnete Kontraste (WCAG, gegen die naechste deckende Flaeche): Papier auf Tinte 15,2 (Banner, Pillen "Intern",
   "Super-Admin", dunkle Karte) · #B9B2A5 auf Tinte 8,2 · warn auf warn-weich 5,0 · fehler auf fehler-weich 5,1 ·
   akzent-text auf akzent-weich 4,98 · text2 auf Papier 6,4 · text3 auf Weiss 5,6. Kundenfarben kommen aus
   /api/konsole/marke/<kunde>.css (marke.mjs rechnet 4,5 fuer jede Schrift, Schrift auf Akzent nie Weiss). */
.intern-marke { justify-content: space-between; }
.logo-wort.gross-leiste { font-size: 22px; letter-spacing: -0.44px; }
.intern-pille, .super-pille { background: var(--tinte); color: var(--papier); border-radius: 999px; padding: 3px 10px; font: 500 12px/15px var(--text); white-space: nowrap; flex: none; }
.wechsler-zeichen.dunkel { background: var(--tinte); color: var(--papier); }
fieldset.nur-lesen { border: 0; padding: 0; margin: 0; min-width: 0; display: contents; }
.ansicht-banner { display: flex; align-items: center; gap: 14px; background: var(--tinte); color: var(--papier); padding: 12px 32px; position: sticky; top: 0; z-index: 30; flex-wrap: wrap; }
.ansicht-zeichen { width: 36px; height: 36px; border-radius: 10px; background: var(--akzent); color: var(--tinte); display: grid; place-items: center; flex: none; }
.ansicht-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.ansicht-text strong { font: 600 14px/18px var(--text); }
.ansicht-banner .ansicht-text span { color: var(--dunkel-text); font-size: 12px; line-height: 16px; }
.ansicht-info { display: flex; align-items: center; gap: 14px; background: var(--tinte); color: var(--papier); border-radius: var(--radius); padding: 14px 18px; }
.ansicht-info .ansicht-text span { color: var(--dunkel-text); font-size: 12px; line-height: 16px; }

/* Kundenmarke (X6): nur Seitenleiste, Zaehler und Kundenzeichen; Inhaltsflaechen bleiben hnvr.me */
.marke-kunde .kundenmarke-zeichen { background: var(--marke-akzent, var(--akzent)); color: var(--marke-auf-akzent, var(--tinte)); }
.marke-kunde .nav-punkt[data-aktiv="ja"] { background: var(--marke-akzent, var(--akzent)); color: var(--marke-auf-akzent, var(--tinte)); }
.marke-kunde .nav-punkt[data-aktiv="ja"] > .sym { color: var(--marke-auf-akzent, var(--tinte)); }
.marke-kunde .nav-zaehler, .marke-kunde .untermenue a[aria-current="page"], .marke-kunde .wechsler-zeichen, .marke-kunde .wechsler-liste a[aria-current="page"] { background: var(--marke-weich, var(--akzent-weich)); color: var(--marke-text, var(--akzent-text)); }
.marke-kunde .nav-punkt[data-aktiv="ja"] .nav-zaehler { background: var(--marke-auf-akzent, var(--tinte)); color: var(--marke-akzent, var(--papier)); }

/* Kacheln der Kunden-Startseite: Hinweise von hnvr.me (X7) */
.kunden-hinweise { display: flex; flex-direction: column; gap: 10px; }
.kunden-hinweis { display: flex; align-items: flex-start; gap: 12px; border-radius: 14px; padding: 14px 18px; background: var(--akzent-weich); color: var(--tinte); }
.kunden-hinweis > .sym { margin-top: 1px; color: var(--akzent-text); }
.kunden-hinweis-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kunden-hinweis-text strong { font: 600 14px/18px var(--text); }
.kunden-hinweis-text p { font-size: 13px; line-height: 18px; }
.kunden-hinweis.hinweis-wartung { background: var(--warn-weich); }
.kunden-hinweis.hinweis-wartung > .sym, .kunden-hinweis.hinweis-wartung strong { color: var(--warn); }
.kunden-hinweis.hinweis-wichtig { background: var(--fehler-weich); }
.kunden-hinweis.hinweis-wichtig > .sym, .kunden-hinweis.hinweis-wichtig strong { color: var(--fehler); }

/* Gemeinsame Bausteine der Team-Seiten */
.kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.zweispaltig.breit-rechts { grid-template-columns: minmax(0, 1fr) 380px; }
.zweispaltig.links-schmal { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.karte.eng { padding: 8px 20px; gap: 0; }
.hilfe-text { color: var(--text3); font-size: 12px; line-height: 16px; }
.umbruch-lang { overflow-wrap: anywhere; }
.achtung { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.achtung:last-child { border-bottom: 0; }
.achtung-zeichen { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--papier); color: var(--text2); }
.achtung-zeichen.warn { background: var(--warn-weich); color: var(--warn); }
.achtung-zeichen.fehler { background: var(--fehler-weich); color: var(--fehler); }
.achtung-zeichen.akzent { background: var(--akzent-weich); color: var(--akzent-text); }
.protokoll-zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.protokoll-zeile:last-child { border-bottom: 0; }
.dunkel-karte { background: var(--tinte); color: var(--papier); }
a.karte.dunkel-karte { color: var(--papier); }
.dunkel-karte p { color: var(--dunkel-text); font-size: 13px; line-height: 18px; }
.link-hell { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/17px var(--text); color: var(--papier); }

/* Dashboard-Baukasten (X3) und Menue (X5) */
.kachel-kopf, .kachel-zeile { display: grid; grid-template-columns: 32px minmax(0, 1fr) repeat(3, 36px) 72px; gap: 8px; align-items: center; }
.kachel-kopf h2 { grid-column: 1 / 3; }
.kachel-rolle { font: 500 11px/14px var(--mono); color: var(--text3); text-align: center; letter-spacing: 0.6px; }
.kachel-rolle.breit { text-align: right; }
.kachel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kachel-zeile { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.kachel-zeile:last-child { border-bottom: 0; }
.kachel-zeile.aus .position-name { color: var(--text2); }
.kachel-symbol { width: 32px; height: 32px; border-radius: 9px; background: var(--papier); color: var(--tinte); display: grid; place-items: center; }
.kachel-haken { display: grid; place-items: center; }
.kachel-haken input { width: 20px; height: 20px; accent-color: var(--tinte); margin: 0; cursor: pointer; }
.kachel-pfeile { display: flex; justify-content: flex-end; gap: 2px; }
.kachel-pfeile .knopf-rund[disabled] { color: var(--text3); cursor: not-allowed; background: transparent; border-color: transparent; }
.menue-zeile { grid-template-columns: 32px minmax(0, 1fr) 72px; }
.menue-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.menue-feld input[type=text] { padding: 7px 10px; }
.bereich-schalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.bereich-schalter .schalter { font-size: 14px; }
.zeile-aus td { color: var(--text2); }
.klein-pille { margin-left: 8px; font-size: 11px; padding: 1px 8px; }
.hinweis.neutral { background: var(--flaeche); }
.vorschau-flaeche { background: var(--papier); border: 1px solid var(--linie); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.vk { display: flex; align-items: center; gap: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; font: 500 13px/16px var(--text); color: var(--tinte); min-width: 0; }
.vk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk.hoch { min-height: 120px; align-items: flex-start; }
.vk-aufgaben { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.vk-reihe { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; }
.vk-reihe > .vk-spalte:only-child { grid-column: 1 / -1; }
.vk-spalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
ul.baustein-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 18px; color: var(--text2); }
ul.baustein-liste li { display: flex; gap: 8px; align-items: flex-start; }
ul.baustein-liste strong { color: var(--tinte); font-weight: 600; }
ul.baustein-liste .sym { margin-top: 2px; color: var(--tinte); }

/* Vorlagen (X4) */
.karte.vorlage { border: 2px solid transparent; }
.karte.vorlage.gewaehlt { border-color: var(--akzent-text); }
.vorlage-skizze { background: var(--papier); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.vs { height: 14px; border-radius: 4px; background: var(--flaeche); border: 1px solid var(--linie); grid-column: span 5; }
.vs.vs-breit { grid-column: span 3; height: 32px; }
.vs.vs-schmal { grid-column: span 2; height: 32px; }
.vs:first-child { background: var(--tinte); border-color: var(--tinte); }
.zuweisen-fuss { border-top: 1px solid var(--linie); padding-top: 14px; }
/* Unsichtbare Beschriftungen (.sr) in Tabellen bleiben im scrollenden Behaelter (sonst verbreitern sie die Seite) */
.tabelle-huelle { position: relative; }
.tabelle input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--tinte); }

/* Marke je Kunde (X6) */
.felder-kz { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
.farbwahl { display: flex; gap: 10px; flex-wrap: wrap; }
.farbe { width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--flaeche); box-shadow: 0 0 0 1px var(--linie); cursor: pointer; padding: 0; }
.farbe.gewaehlt { box-shadow: 0 0 0 2px var(--tinte); }
.farbe-1 { background: #0E5C4F; } .farbe-2 { background: #FF7120; } .farbe-3 { background: #3E4E8C; }
.farbe-4 { background: #7A2E4F; } .farbe-5 { background: #5A6B2A; } .farbe-6 { background: #1C1A17; }
.farbfeld { display: flex; align-items: center; gap: 10px; }
.farbe-aktuell { width: 22px; height: 22px; border-radius: 999px; background: var(--marke-akzent, var(--akzent)); flex: none; box-shadow: 0 0 0 1px var(--linie); }
.kontrast-liste { display: flex; flex-direction: column; }
.kontrast-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.kontrast-zeile:last-child { border-bottom: 0; }
.kontrast-zeile .domain-text { flex: 1; }
.mono-klein { font: 400 12px/15px var(--mono); color: var(--text2); }
.mini-konsole { display: grid; grid-template-columns: 180px minmax(0, 1fr); border: 1px solid var(--linie); border-radius: 14px; background: var(--papier); overflow: hidden; }
.mini-leiste { border-right: 1px solid var(--linie); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.mini-marke { display: flex; align-items: center; gap: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 8px; margin-bottom: 6px; min-width: 0; }
.mini-zeichen { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 12px/1 var(--titel); background: var(--marke-akzent, var(--akzent)); color: var(--marke-auf-akzent, var(--tinte)); flex: none; }
.mini-name { font: 15px/1.2 var(--titel); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-punkt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font: 500 13px/16px var(--text); color: var(--tinte); }
.mini-aktiv { background: var(--marke-akzent, var(--akzent)); color: var(--marke-auf-akzent, var(--tinte)); }
.mini-zaehler { margin-left: auto; border-radius: 999px; padding: 0 6px; font: 500 11px/14px var(--mono); background: var(--marke-weich, var(--akzent-weich)); color: var(--marke-text, var(--akzent-text)); }
.mini-inhalt { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--papier); }
.mini-titel { font: 20px/1.2 var(--titel); text-transform: uppercase; font-weight: 400; }
.mini-link { font: 500 13px/16px var(--text); color: var(--akzent-text); }

/* Hinweise (X7), Protokoll (X8), Ansicht (X9), Kunden (X1) */
.wahl-segment { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--papier); flex-wrap: wrap; align-self: flex-start; }
.wahl-segment label { position: relative; }
.wahl-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl-segment span { display: inline-block; padding: 7px 14px; border-radius: 9px; font: 500 13px/16px var(--text); color: var(--text2); cursor: pointer; }
.wahl-segment input:checked + span { background: var(--flaeche); color: var(--tinte); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.wahl-segment input:focus-visible + span { outline: 3px solid var(--akzent-text); outline-offset: 2px; }
.reichweite { display: flex; align-items: center; gap: 8px; background: var(--papier); border-radius: 10px; padding: 10px 14px; color: var(--text2); font-size: 13px; }
.klein-meldung { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; line-height: 16px; }
.rechte-liste { display: flex; flex-direction: column; }
ol.schritte { margin: 0; padding: 0; list-style: none; counter-reset: schritt; display: flex; flex-direction: column; gap: 14px; }
ol.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
ol.schritte li::before { content: counter(schritt); grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 999px; background: var(--akzent-weich); color: var(--akzent-text); display: grid; place-items: center; font: 500 12px/1 var(--mono); }
ol.schritte strong { font: 600 14px/18px var(--text); }
ol.schritte span { color: var(--text2); font-size: 12px; line-height: 16px; }

@media (max-width: 1200px) {
  .kpis.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zweispaltig.breit-rechts, .zweispaltig.links-schmal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ansicht-banner { padding: 12px 16px; }
  .kachel-kopf, .kachel-zeile { grid-template-columns: minmax(0, 1fr) repeat(3, 32px) 64px; gap: 6px; }
  .kachel-kopf h2 { grid-column: 1 / 2; }
  .kachel-symbol { display: none; }
  .menue-zeile { grid-template-columns: minmax(0, 1fr) 64px; }
  .bereich-schalter { grid-template-columns: minmax(0, 1fr); }
  .mini-konsole { grid-template-columns: minmax(0, 1fr); }
  .mini-leiste { border-right: 0; border-bottom: 1px solid var(--linie); }
  .protokoll-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .protokoll-zeile > .zelle-mono { grid-column: 1 / -1; }
  .achtung { flex-wrap: wrap; }
  .achtung .domain-text { flex-basis: calc(100% - 50px); }
}
@media (max-width: 520px) {
  .kpis.k5 { grid-template-columns: minmax(0, 1fr); }
  .felder-kz { grid-template-columns: minmax(0, 1fr); }
}

/* Platzhalter in Feldern der Konsole: text3 (5,6 auf Weiss) statt Browser-Grau */
input::placeholder, textarea::placeholder { color: var(--text3); opacity: 1; }
/* Datum mit Uhrzeit (Hinweise X7) wie die uebrigen Felder */
input[type=datetime-local] { font: 400 14px/17px var(--text); color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 10px 12px; width: 100%; min-width: 0; }
/* Gesperrte Formulare im Ansichtsmodus (fieldset.nur-lesen disabled): Knoepfe sichtbar deaktiviert */
.knopf:disabled, .knopf-rund:disabled { color: var(--text3); background: var(--flaeche); border-color: var(--linie); cursor: not-allowed; }
fieldset.nur-lesen :disabled { cursor: not-allowed; }
@media (max-width: 900px) { .kachel-rolle.breit { visibility: hidden; } }

/* Seiten der Website pflegen (src/pages/w/[id]/seiten.astro, eigener Editor) */
.z-seite { grid-template-columns: minmax(0, 1fr) 150px 210px 38px; }
.z-aenderung { grid-template-columns: minmax(0, 1fr) 110px 170px auto; }
.abschnitt-titel { margin-top: 12px; }
.befunde { margin: 6px 0 0; padding-left: 20px; }
.feldzeile { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.feldzeile:last-child { border-bottom: 0; }
.feldzeile > .reihe { align-items: flex-start; }
.feldzeile input[type="text"], .feldzeile input[type="number"], .feldzeile textarea { flex: 1 1 340px; min-width: 0; }
.feldzeile :disabled { background: var(--papier); color: var(--text2); cursor: not-allowed; }

/* Vorschau der Kunden-Website. Die Abschnitte bringen ihre Merkmale als data-Attribute mit (keine Inline-Stile,
   middleware.mjs erlaubt sie nicht); eigene Klassen mit Praefix w-, damit nichts von der Verwaltung durchschlaegt. */
.web-vorschau { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.web-vorschau > section { padding: 22px 26px; }
.web-vorschau > section[data-abstand="0"] { padding-top: 10px; }
.web-vorschau > section[data-grund="flaeche"] { background: #FAF8F4; }
.web-vorschau > section[data-grund="tinte"] { background: var(--tinte); color: var(--papier); }
.web-vorschau > section[data-grund="tinte"] a { color: #FFC9A6; }
.web-vorschau > section[data-herkunft="verwaltung"], .web-vorschau > section[data-herkunft="code"] { border-left: 3px solid var(--linie); }
.web-vorschau h1, .web-vorschau h2, .web-vorschau h3 { font-family: var(--wort); font-weight: 600; letter-spacing: -0.2px; }
.web-vorschau h1 { font-size: 28px; line-height: 32px; }
.web-vorschau h2 { font-size: 20px; line-height: 24px; }
.web-vorschau h3 { font-size: 15px; line-height: 19px; }
.web-vorschau p, .web-vorschau address { margin: 8px 0 0; font-style: normal; }
.web-vorschau .w-unterzeile { color: var(--text2); font-size: 15px; }
.web-vorschau > section[data-grund="tinte"] .w-unterzeile { color: var(--papier); }
.web-vorschau img { max-width: 100%; height: auto; border-radius: var(--radius-klein); margin-top: 12px; }
.web-vorschau figure { margin: 0; }
.web-vorschau .w-knopf { display: inline-block; margin-top: 4px; padding: 8px 14px; border-radius: 999px; background: var(--akzent); color: var(--tinte); text-decoration: none; font-weight: 500; }
.web-vorschau .w-bildtext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.web-vorschau .w-bildtext[data-seite="rechts"] figure { order: 2; }
.web-vorschau .w-kacheln { list-style: none; display: grid; gap: 14px; margin: 12px 0 0; padding: 0; }
.web-vorschau .w-kacheln[data-je-zeile="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.web-vorschau .w-kacheln[data-je-zeile="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-vorschau .w-kacheln[data-je-zeile="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.web-vorschau .w-kontaktwege, .web-vorschau .w-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.web-vorschau .w-leer { color: var(--text2); }
.web-vorschau .w-karte { height: 140px; margin-top: 12px; border-radius: var(--radius-klein); background: var(--papier); }
.web-vorschau .w-karte-hinweis { margin-top: 12px; padding: 14px; border: 1px dashed var(--linie); border-radius: var(--radius-klein); color: var(--text2); }
.web-vorschau .w-karte-hinweis p { margin: 0 0 8px; }
@media (max-width: 900px) {
  .web-vorschau .w-bildtext { grid-template-columns: minmax(0, 1fr); }
  .web-vorschau .w-kacheln[data-je-zeile="3"], .web-vorschau .w-kacheln[data-je-zeile="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* hnvr.me Apps (29.09.2026, apps.mjs): Kacheln der Kundenseite w/[id]/hnvr-apps, Kachel auf der Startseite,
   Zeile je Kunde auf /konsole/team/apps. Farben nur aus den Variablen oben (Kontraste dort gerechnet). */
.app-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.app-kachel { border: 1px solid var(--linie); border-radius: 12px; background: #FAF8F4; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.app-kachel .position-name { overflow-wrap: anywhere; }
.app-kachel-fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.app-kachel-fuss .knopf, .app-kachel-fuss form { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.app-preis { font: 500 13px/16px var(--mono); color: var(--tinte); }
.app-leiste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.app-mini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; color: var(--tinte); text-decoration: none; min-width: 0; }
.app-mini:hover { box-shadow: inset 0 0 0 1px var(--linie); }
.app-mini .nav-hnvr.gross { margin-bottom: 0; }
.app-zeile { border-bottom: 1px solid var(--linie); padding: 10px 0; }
.app-zeile:last-child { border-bottom: 0; }
.app-zeile-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-zeile-kopf .domain-text { min-width: 200px; }
.app-zeile details.aufklapp { border-bottom: 0; }
/* Vorher/jetzt einer Aenderung (E31) und Vergleich mit dem veroeffentlichten Stand (E32) */
.vergleich { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vergleich li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.vergleich li:last-child { border-bottom: 0; }
.vergleich-ort { font: 500 13px/17px var(--text); color: var(--text2); }
.vergleich-paar { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.vergleich-paar .sym { align-self: center; color: var(--text3); flex: none; }
.vergleich-paar.klein { font-size: 13px; margin: 2px 0 1px; }
.vergleich-paar .vorher { color: var(--text2); text-decoration: line-through; text-decoration-color: var(--text3); overflow-wrap: anywhere; }
.vergleich-paar .vorher.leer-wert { text-decoration: none; font-style: italic; color: var(--text3); }
.vergleich-paar .jetzt { color: var(--tinte); font-weight: 500; overflow-wrap: anywhere; }
.vergleich.wartet .jetzt { color: var(--warn); }
/* Ausbau Super-Admin (29.09.2026): Stand des Kunden (X2), Einladungskarte, Passwort-Hinweis, Vorlagen-Verwendung (X4),
   Bildlogo-Vorschau hell/dunkel (X6), Sitzungen (X8), Zuweisen als Entwurf (X4), Entwurf in der Ansicht (X9) */
a.pille { text-decoration: none; }
.reiter[role='status'] { display: inline-flex; align-self: flex-start; }
.reiter-stand { padding: 7px 14px; border-radius: 9px; font: 500 13px/16px var(--text); color: var(--text2); white-space: nowrap; }
.reiter-stand.an { background: var(--flaeche); color: var(--tinte); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.meldung.neutral { background: var(--papier); color: var(--text2); display: flex; gap: 8px; align-items: flex-start; }
.schritte-text { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
p.verwendet { margin: 0; }
.logo-proben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.logo-probe { border: 1px solid var(--linie); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.logo-probe.hell { background: var(--flaeche); }
.logo-probe.dunkel { background: var(--tinte); border-color: var(--tinte); }
.logo-probe.dunkel .mono-klein { color: var(--dunkel-text); }
.logo-probe img { height: 40px; max-width: 100%; object-fit: contain; }
.mini-logo { height: 24px; max-width: 100%; object-fit: contain; display: block; }
.sitzungen { display: flex; flex-direction: column; }
.sitzung-gruppe { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.sitzung-gruppe:last-child { border-bottom: 0; }
.sitzung-gruppe .domain { border-bottom: 0; padding: 10px 0; align-self: stretch; }
fieldset.zuweisen-ziel { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 12px 0 0; margin: 0; }
.entwurf-wahl { flex-basis: 100%; }
@media (max-width: 520px) { .logo-proben { grid-template-columns: minmax(0, 1fr); } }

/* Listenfelder eines Abschnitts (z. B. Kacheln) */
.listenfeld { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.listenfeld h4 { font: 500 14px/18px var(--text); margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; }
.listeneintrag { background: var(--papier); border-radius: var(--radius-klein); padding: 10px 14px; margin-bottom: 10px; }
.listeneintrag-kopf { justify-content: space-between; margin-bottom: 4px; }
.listeneintrag .feldzeile:last-child { border-bottom: 0; }

/* 29.09.2026 (Marketing-Paket, gemessen bei 390 px): .kpis.k2/.k3/.k4 schlugen die Regel .kpis der schmalen Ansicht (hoehere
   Spezifitaet), Kennzahlen blieben mehrspaltig und liefen ueber (Kontakte, Rechnungen, alle Seiten mit k2 bis k4). */
@media (max-width: 900px) { .kpis.k3, .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpis.k2, .kpis.k3, .kpis.k4 { grid-template-columns: minmax(0, 1fr); } }
/* Untermenue mit mehr als 8 Punkten (Rahmen.astro: Marketing wie S60 mit 10, Buchungen, Rechnungen) enger, damit die Leiste
   bei 900 px Hoehe ohne Scrollen passt */
.untermenue.dicht a, .untermenue.dicht span[aria-disabled='true'] { padding-top: 2px; padding-bottom: 2px; }
/* Hilfe bleibt sichtbar, wenn die Navigation scrollt (gemessen 29.09. bei 900 px Hoehe: Team-Leiste 125 bis 175 px zu hoch) */
@media (min-width: 901px) {
  .navigation > a.nav-punkt:last-child { position: sticky; bottom: 0; }
  .navigation > a.nav-punkt:last-child:not([data-aktiv='ja']) { background: var(--papier); }
}

/* Medienablage (src/pages/konsole/w/[id]/medien.astro) */
.z-medien { grid-template-columns: minmax(0, 1fr) 130px 150px 90px 38px; }

/* Bild in der Vorschau, solange die Dateien nicht ausgeliefert werden */
.web-vorschau .w-bild-platzhalter { margin: 12px 0 0; padding: 22px; border: 1px dashed var(--linie); border-radius: var(--radius-klein); background: var(--papier); display: flex; flex-direction: column; gap: 4px; }
.web-vorschau .w-bild-name { color: var(--tinte); font-weight: 500; }
.web-vorschau .w-bild-hinweis { color: var(--text2); font-size: 13px; }