/* Ebene "alt" fuer plattform.css (erzeugt von bau/lagen-erzeugen.mjs, nicht bearbeiten) */
@layer alt {
/* hnvr.me Plattform · Rebrand (03.10.2026, Figma JkiPNR4yuZr9VdL50YPnkg, Seite 640:5369 "Rebrand", Screens "· Atelier OS" und
   "Control Studio"). Dunkle Seitenleiste und Kopfleiste (#172124), heller Arbeitsbereich mit Verlauf #EFF3F3 -> #E6EBEC -> #DCE4E5,
   weisse Karten mit Radius 16 und weichem Schatten, Ueberschriften Space Grotesk Medium, Text Inter, Zahlen Geist Mono, Kundenzeichen
   Staatliches. Schriften lokal, Symbole /symbole.svg (lucide-static, ISC).
   Gerechnete Kontraste (WCAG, gegen die naechste deckende Flaeche): Tinte #172124 auf Weiss 16,7 · text2 #4F5B5E auf Weiss 7,0, auf
   dem dunkelsten Verlauf #DCE4E5 5,4 · text3 #5A6669 auf Weiss 5,9, auf #DCE4E5 4,6 · Tinte auf Orange 5,97 · akzent-text #A83C05
   auf Weiss 6,3, auf akzent-weich 5,2, auf #DCE4E5 4,9 · gut #276E53 auf gut-weich 5,4 · warn #8A5A00 auf warn-weich 5,3 · fehler
   #A63F36 auf fehler-weich 5,3, auf #DCE4E5 4,8 (Figma #AB443B haette dort 4,49) · Leiste: #F3F7F7 auf #172124 15,2, #A2B0B3 auf #172124 7,3, auf #263438 5,8 · Orange auf #172124 6,0.
   Abweichung von Figma: Grau #677477 erreicht auf dem Verlauf nur 3,75 bis 4,33, Text steht deshalb in text2/text3. Orange als
   Schrift auf Hell steht in akzent-text (Orange auf Weiss 2,75). Kein weisser Text auf Orange. */
@font-face { font-family: 'Inter'; src: url('/konsole-dateien/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('/konsole-dateien/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('/konsole-dateien/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('/konsole-dateien/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('/konsole-dateien/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('/konsole-dateien/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('/konsole-dateien/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('/konsole-dateien/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('/konsole-dateien/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('/konsole-dateien/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: #EEF3F3; --flaeche: #FFFFFF; --linie: #DEE6E7; --tinte: #172124; --text2: #4F5B5E; --text3: #5A6669; --dunkel-text: #A2B0B3;
  --akzent: #FF7120; --akzent-weich: #FFE3D2; --akzent-text: #A83C05;
  --gut: #276E53; --gut-weich: #E9F4EE; --warn: #8A5A00; --warn-weich: #FBF2DE; --fehler: #A63F36; --fehler-weich: #F9EBE8; --fehler-punkt: #B84A40;
  --leiste: #172124; --leiste-flaeche: #263438; --leiste-hover: #1F2B2F; --leiste-linie: #364347; --leiste-text: #F3F7F7; --leiste-leise: #A2B0B3;
  --grund: linear-gradient(180deg, #EFF3F3 0%, #E6EBEC 60%, #DCE4E5 100%); --flaeche2: #F4F7F7;
  --schatten: 0 8px 32px rgba(23, 33, 36, 0.04), 0 0 0 1px rgba(23, 33, 36, 0.035);
  --radius: 16px; --radius-klein: 8px;
  --titel: '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;
  --zeichen: 'Staatliches', 'Space Grotesk', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #DCE4E5; }
/* Verlauf ueber die ganze Seitenhoehe (vorher fixed: endete in Ganzseiten-Aufnahmen nach einer Fensterhoehe) */
body { min-height: 100vh; background: #DCE4E5 var(--grund) no-repeat; color: var(--tinte); font: 14px/1.45 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: 500; letter-spacing: 0; line-height: 1.15; margin: 0; }
h1 { font-size: 46px; line-height: 1.15; letter-spacing: -0.039em; }
h2 { font-size: 22px; line-height: 27px; letter-spacing: -0.3px; }
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; }
body > .sr { top: 0; left: 0; } /* 27.10.2026: ohne Ankerpunkt lag das 1-px-Lesehilfe-Element hinter der Huelle und verlaengerte die Seite um 1 px */

/* 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; }
/* Logo (Abnahme 26.10.2026): Bildmarke und ".me" bleiben Original-Orange der Marke (marke/logo/README.txt, #FF7120), unabhaengig von Akzent und Modus */
.sym.pfeil { color: var(--logo-orange, #FF7120); }

/* ---------- Rahmen (Rebrand: Figma 644:15398 Startseite, 650:33851 S11, 667:59609 X1, 667:67490 Control Studio) ---------- */
.rahmen { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--leiste) 248px, transparent 248px); }
.leiste { background: var(--leiste); color: var(--leiste-text); padding: 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; min-height: 0; }
.kundenmarke { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 2px; color: var(--leiste-text); text-decoration: none; flex: none; border-radius: 12px; }
.kundenmarke-zeichen { width: 30px; height: 30px; border-radius: 9px; background: var(--akzent); color: var(--tinte); display: grid; place-items: center; font: 15px/1 var(--zeichen); flex: none; }
.kundenmarke-name { font: 700 15px/1.2 var(--wort); letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wechsler { margin-top: 18px; position: relative; flex: none; }
.wechsler summary { list-style: none; display: flex; align-items: center; gap: 10px; background: var(--leiste-flaeche); border-radius: 8px; padding: 10px 12px; cursor: pointer; color: var(--leiste-text); }
.wechsler summary::-webkit-details-marker { display: none; }
.wechsler summary:hover { background: #2C3B3F; }
.wechsler-zeichen { width: 28px; height: 28px; border-radius: 8px; background: var(--leiste); color: var(--leiste-text); display: grid; place-items: center; font: 600 13px/1 var(--text); flex: none; }
.wechsler-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wechsler-name { font: 600 13px/16px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wechsler-host { font: 400 10px/13px var(--text); color: var(--leiste-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wechsler summary .sym { color: var(--leiste-leise); }
.wechsler[open] summary .sym { transform: rotate(180deg); }
.wechsler-liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--leiste-flaeche); border: 1px solid var(--leiste-linie); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 16px 48px rgba(23, 33, 36, 0.22); }
.wechsler-liste a { padding: 7px 10px; border-radius: 6px; color: var(--leiste-text); text-decoration: none; font-size: 13px; }
.wechsler-liste a:hover { background: var(--leiste); }
.wechsler-liste a[aria-current='page'] { background: var(--akzent); color: var(--tinte); font-weight: 600; }
.wechsler-liste .wechsler-alle { border-top: 1px solid var(--leiste-linie); border-radius: 0 0 6px 6px; color: var(--leiste-leise); }

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

.haupt { display: flex; flex-direction: column; min-width: 0; }
/* Kopfleiste (Figma "Werkzeugleiste" 72 px): Pfad, Verbindungsstatus, Suche, Glocke */
.kopfleiste { display: flex; align-items: center; gap: 18px; padding: 0 32px; min-height: 72px; background: var(--leiste); color: var(--leiste-text); }
.kopf-pfad { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; max-width: 40%; }
.kopf-bereich { font: 500 11px/15px var(--text); letter-spacing: 0.5px; text-transform: uppercase; color: var(--leiste-leise); }
.kopf-seite { font: 400 12px/17px var(--text); color: var(--leiste-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.status { display: flex; align-items: center; gap: 7px; font-size: 11px; min-width: 0; }
.status-punkt { width: 6px; height: 6px; border-radius: 999px; background: #80C5A4; flex: none; }
.status-gut { color: #B2C9BF; font-weight: 500; }
.status-rest { color: var(--leiste-leise); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/16px var(--text); color: var(--akzent-text); text-decoration: none; align-self: flex-start; margin-bottom: 6px; }
.zurueck:hover { text-decoration: underline; }
.luecke { flex: 1 1 0; min-width: 0; }
.topsuche { display: flex; align-items: center; gap: 9px; width: 300px; height: 36px; padding: 0 8px 0 12px; background: var(--flaeche); border-radius: 8px; color: var(--text3); flex: none; }
.topsuche-text { font-size: 13px; white-space: nowrap; }
.kbd { background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 5px; padding: 1px 6px; font: 500 10px/14px var(--mono); color: var(--text2); }
.knopf-rund { width: 38px; height: 38px; border-radius: 8px; 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); }
.kopfleiste .knopf-rund.glocke { width: 32px; height: 32px; background: transparent; border-color: transparent; color: var(--leiste-text); }
/* Team (Control Studio): helle Kopfleiste */
.kopfleiste.hell { background: var(--flaeche); color: var(--tinte); border-bottom: 1px solid var(--linie); min-height: 64px; }
.kopfleiste.hell .kopf-seite { color: var(--tinte); }
.kopfleiste.hell .status-rest { color: var(--text3); }
.kopfleiste.hell .topsuche { background: var(--flaeche2); }
.kopfleiste.hell .knopf-rund.glocke { color: var(--tinte); }

.seitenkopf { display: flex; align-items: center; gap: 24px; padding: 32px 32px 0; flex-wrap: wrap; }
.seitenkopf-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 540px; }
.titel-akzent { color: var(--akzent-text); }
.ortszeile { font: 600 10px/14px var(--text); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text2); }
.titelzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seitenkopf .unter { color: var(--text2); font-size: 13px; line-height: 18px; max-width: 80ch; }
.aktionen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aktionen:empty { display: none; }

main.inhalt { padding: 24px 32px 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; flex: 1 0 auto; }
.seitenabschluss { display: flex; justify-content: space-between; gap: 16px; padding: 0 32px 24px; font: 400 10px/14px var(--text); color: var(--text2); }
.mehr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mehr-kopf { font: 500 11px/15px var(--text); color: var(--text2); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; font: 600 12px/15px var(--text); color: var(--tinte); text-decoration: none; white-space: nowrap; }
.chip .sym { color: var(--tinte); }
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(--leiste-text); }
/* Mehr-Leiste wie Figma 650:35770 (Wunsch produkte): Verweise in Regular, Pfeil in akzent-text (6,3 auf Weiss) */
.mehr .chip { font-weight: 400; }
.mehr a.chip .sym { color: var(--akzent-text); }

/* ---------- Knoepfe ---------- */
.knopf { font: 600 13px/17px var(--text); border-radius: var(--radius-klein); padding: 0 16px; min-height: 40px; 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); }
/* Hauptaktion wie im Rebrand: Orange mit Tinte (5,97). Dunkle Knoepfe gibt es dort nicht mehr; .dunkel bleibt fuer Sonderfaelle */
.knopf.primaer { background: var(--akzent); color: var(--tinte); border-color: var(--akzent); }
.knopf.primaer:hover { background: var(--k-akzent-hover, var(--akzent)); border-color: var(--k-akzent-hover, var(--akzent)); }
.knopf.dunkel { background: var(--tinte); color: var(--leiste-text); border-color: var(--tinte); }
.knopf.akzent { background: var(--akzent); color: var(--tinte); border-color: var(--akzent); }
.knopf.akzent:hover { background: var(--k-akzent-hover, var(--akzent)); border-color: var(--k-akzent-hover, 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: 0 12px; min-height: 32px; font-size: 12px; }
.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: 16px; min-width: 0; box-shadow: var(--schatten); }
.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 11px/15px var(--text); color: var(--text3); }
.link-pfeil { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/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: var(--schatten), inset 0 0 0 1px var(--linie); }
.karte-wert .spalte { gap: 4px; }
/* Kennzahl-Kachel als Container: der Wert richtet seine Schriftgroesse nach der Breite der Kachel (unten) */
.kpi { background: var(--flaeche); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--tinte); text-decoration: none; min-width: 0; box-shadow: var(--schatten); container-type: inline-size; }
a.kpi:hover { box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); }
.kpi-label { font: 400 11px/16px var(--text); color: var(--text3); }
/* Kennzahl (Befund 3 der Pruefung vom 29.09.2026): nie im Wort trennen. Der Wert bleibt einzeilig, wird in schmalen Kacheln
   stufenweise kleiner (Container-Abfrage auf die Kachel, Inhaltsbreite) und endet sonst mit Auslassung; die Seiten geben den
   vollen Text im title mit. Beschriftung und Zusatzzeile brechen an Wortgrenzen. */
.kpi-wert { font: 400 34px/40px var(--titel); letter-spacing: -1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@container (max-width: 240px) { .kpi-wert { font-size: 30px; line-height: 34px; } }
@container (max-width: 190px) { .kpi-wert { font-size: 24px; line-height: 30px; } }
@container (max-width: 150px) { .kpi-wert { font-size: 20px; line-height: 26px; } }
.kpi-zeile { display: flex; gap: 6px; align-items: center; font-size: 11px; line-height: 15px; color: var(--text3); flex-wrap: wrap; }
.trend { font: 500 11px/15px var(--text); 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: 20px; display: flex; flex-direction: column; gap: 14px; color: var(--leiste-text); text-decoration: none; min-width: 0; }
.aufgabe-kopf { display: flex; align-items: center; gap: 10px; font: 600 14px/19px var(--text); }
.aufgabe-symbol { width: 32px; height: 32px; border-radius: 8px; 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: 600 12px/16px var(--text); color: var(--leiste-text); }
a.aufgabe:hover .aufgabe-los { text-decoration: underline; }
.aufgabe.ruhig { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }
.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: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; font: 500 13px/17px 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: 400 30px/1.2 var(--titel); letter-spacing: -1px; }
.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: 48px; }
.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: 5px; padding: 3px 8px 3px 7px; border-radius: 5px; font: 500 11px/15px var(--text); white-space: nowrap; background: var(--papier); color: var(--text2); vertical-align: middle; }
.pille::before { content: ''; width: 5px; height: 5px; 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(--flaeche2); color: var(--text2); box-shadow: inset 0 0 0 1px var(--linie); }
.pille.ohne::before { display: none; }

/* ---------- Filterleiste ---------- */
.filterleiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reiter { display: flex; gap: 6px; padding: 0; border-radius: 0; background: transparent; flex-wrap: wrap; }
.reiter a { padding: 7px 10px; border-radius: 6px; font: 500 11px/16px var(--text); color: var(--text2); background: #E2E8E9; text-decoration: none; white-space: nowrap; }
.reiter a:hover { color: var(--tinte); }
.reiter .reiter-aus { padding: 7px 10px; border-radius: 6px; font: 500 11px/16px var(--text); color: var(--text3); background: #E2E8E9; cursor: not-allowed; white-space: nowrap; }
.reiter a[aria-current='page'] { background: var(--tinte); color: var(--leiste-text); font-weight: 600; }
.suchfeld-gross { display: flex; align-items: center; gap: 10px; width: 260px; height: 40px; padding: 0 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; color: var(--tinte); }
.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 13px/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: 13px; pointer-events: none; color: var(--tinte); }
.auswahlknopf select { field-sizing: content; appearance: none; -webkit-appearance: none; font: 600 12px/17px var(--text); color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px 10px 36px; width: auto; cursor: pointer; }

/* ---------- Tabellen im Stil des Prototyps ---------- */
.liste { background: var(--flaeche); border-radius: var(--radius); padding: 0; display: flex; flex-direction: column; min-width: 0; box-shadow: var(--schatten); overflow: hidden; }
.liste-zeile { display: grid; align-items: center; gap: 16px; padding: 10px 24px; border-bottom: 1px solid var(--linie); border-radius: 0; color: var(--tinte); text-decoration: none; min-height: 58px; }
.liste-zeile:last-child { border-bottom: 0; }
a.liste-zeile:hover { background: var(--flaeche2); }
.liste-kopf { min-height: 0; padding: 11px 24px; align-items: center; border-radius: 0; font: 500 10px/14px var(--text); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text3); background: var(--flaeche2); }
.liste-kopf:hover { background: var(--flaeche2); }
.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: 600 13px/17px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-unter { font: 400 11px/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: 12px; color: var(--text2); }
/* Aktuelle Seite wie im Rebrand: Orange mit Tinte */
.seitennavigation .knopf-rund.dunkel { background: var(--akzent); border-color: var(--akzent); color: var(--tinte); font: 600 13px/1 var(--text); }

/* 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(--k-text, var(--text3)); } /* 07.11.2026: --k-text statt --text3, Einheitenzeichen im Dunkelmodus 4,3 auf dem Feldglas (gemessen) */
.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: #F7F9F9; }
.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)}
/* Ueberschneidende Termine nebeneinander (Spuren aus buchung.mjs spuren(); S40 und A33, 29.09.2026), Klassen statt style */
.kal-termin.spuren-2, .kal-termin.spuren-3 { justify-self: start; min-width: 0; }
.kal-termin.spuren-2 { width: calc(50% - 6px); }
.kal-termin.spuren-2.spur-1 { margin-left: calc(50% + 2px); }
.kal-termin.spuren-3 { width: calc(33.3% - 5px); }
.kal-termin.spuren-3.spur-1 { margin-left: calc(33.3% + 1px); }
.kal-termin.spuren-3.spur-2 { margin-left: calc(66.6% + 1px); }
.kal-termin:is(.spuren-2, .spuren-3) { padding: 4px 5px; }
.kal-termin:is(.spuren-2, .spuren-3) i { overflow: hidden; text-overflow: ellipsis; }
.kal-termin.spuren-3 i { display: none; }
.kal-termin.spur-0 { margin-left: 0; }

/* Schublade rechts (S41) ueber abgedunkeltem Hintergrund */
.schleier { position: fixed; inset: 0; background: rgba(23, 33, 36, 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(23, 33, 36, 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 #C9D3D5; border-radius: 12px; background: #F7F9F9; 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); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.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 10px/14px var(--text); color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; padding: 11px 12px; border-bottom: 1px solid var(--linie); background: var(--flaeche2); }
.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: 12px; 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 11px/15px var(--text); color: var(--text2); }
.feld .hilfe { color: var(--text3); font-size: 12px; }
/* Datum und Uhrzeit (04.10.2026, Wunsch kontakte) wie die uebrigen Felder; vorher nur in Modul-Stylesheets (kontakte.css, umsatz.css …) */
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=search], input[type=number], input[type=password], input[type=date], input[type=time], select, textarea {
  font: 400 13px/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: transform 0.15s; }
.schalter input:checked { background: var(--akzent); }
.schalter input:checked::after { transform: translateX(18px); }
.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: var(--flaeche2); border: 1px solid var(--linie); box-shadow: none; }
.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; box-shadow: var(--schatten); }
a.kachel:hover { box-shadow: inset 0 0 0 1px var(--linie); }
.kachel .zahl { font: 400 34px/40px var(--titel); letter-spacing: -1px; }
.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: #F7F9F9; }
.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; background: none; }
  .leiste { position: static; height: auto; }
  .navigation { overflow: visible; }
  .seitenkopf, .seitenabschluss { padding-left: 16px; padding-right: 16px; }
  .seitenkopf { padding-top: 20px; }
  h1 { font-size: 32px; }
  .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; padding-left: 16px; padding-right: 16px; }
  .liste-kopf { padding-left: 16px; padding-right: 16px; }
  .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) · #A2B0B3 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: 30px; letter-spacing: -0.6px; }
.intern-marke { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; height: auto; padding: 4px 2px; }
.studio-zeile { font: 500 9px/12px var(--text); letter-spacing: 0.8px; text-transform: uppercase; color: var(--leiste-leise); padding-left: 2px; }
.intern-pille, .super-pille { background: var(--flaeche2); color: var(--text2); border: 1px solid var(--linie); border-radius: 5px; padding: 4px 8px; font: 600 10px/13px var(--text); letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; flex: none; }
.wechsler-zeichen.dunkel { background: var(--leiste); color: var(--leiste-text); }
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 { color: var(--leiste-text); }
.marke-kunde .wechsler-liste a[aria-current="page"] { background: var(--marke-akzent, var(--akzent)); color: var(--marke-auf-akzent, var(--tinte)); }
.marke-kunde .nav-punkt[data-aktiv="ja"] .nav-zaehler { color: var(--marke-auf-akzent, var(--tinte)); }

/* 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-info { background: var(--akzent-weich); }
.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; }
/* Gleiches fuer den Wochenkalender: .sr in Terminen mit Spuren liefen bei 390 px 152 px ueber die Seite (gemessen 03.10.2026) */
.kal-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: var(--k-akzent); } .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: #F7F9F9; }
.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(--k-akzent, var(--akzent)); color: var(--k-auf-akzent, 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); }
/* Stellen aus dem Projekt (editor/rendern.mjs, 04.10.2026): Bezeichnung (text2 auf --flaeche 6,5) ueber dem Wert */
.web-vorschau .w-stellen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.web-vorschau .w-stellen dt { font: 500 11px/16px var(--text); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text2); margin-top: 10px; }
.web-vorschau .w-stellen dt:first-child { margin-top: 0; }
.web-vorschau .w-stellen dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.web-vorschau .w-stelle-ziel { font-family: var(--mono); font-size: 13px; }
/* Abschnitt aus dem Projekt (Weg B): Kopfzeile mit Baustein und Bereich, Listen nummeriert. text2 auf --flaeche 6,5 */
.web-vorschau .w-projekt-kopf { margin: 0 0 8px; font: 600 11px/16px var(--text); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text2); }
.web-vorschau .w-projekt-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.web-vorschau .w-projekt-liste > li { display: grid; gap: 2px; }
.web-vorschau .w-projekt-unter { font: 500 11px/15px var(--text); 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: #F7F9F9; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.app-kachel .position-name { white-space: normal; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.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(--leiste); }
}

/* Medienablage (src/pages/konsole/w/[id]/medien.astro) */
.z-medien { grid-template-columns: minmax(0, 1fr) 130px 150px 90px 38px; }
/* 30.09.2026: schmale Liste (390 px) ohne Spalte der Breite 0 und ohne Ueberlauf: Dateiart und Verwendung entfallen
   (stehen in der Detailansicht), es bleiben Datei, Lizenz und Pfeil. Auswahlfelder in Karten nie breiter als das Feld. */
@media (max-width: 900px) {
  .z-medien { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .z-medien > .schmal-weg { display: none; }
}
.karte .feld > .auswahlknopf, .karte .feld > .auswahlknopf select { max-width: 100%; }

/* 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; }

/* Bilder aus Daten der Schnittstelle (komponenten/Bild.astro, 30.09.2026). Groesse und Form kommen aus der Klasse des
   Aufrufers (produkt-bild, position-bild, ...); width/height am <img> halten das Seitenverhaeltnis vor dem Laden fest. */
img.bild { display: block; object-fit: cover; background: var(--papier); flex: none; max-width: 100%; }
.bild-leer { display: grid; place-items: center; flex: none; background: var(--papier); color: var(--text2); }
.bild-voll { width: 100%; max-width: 480px; height: auto; border-radius: 10px; }
.bilder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bilder-raster .bild, .bilder-raster .bild-leer { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
.titelbild { width: 100%; height: auto; aspect-ratio: 4 / 1; border-radius: 12px; }
.termin-bild { width: 44px; height: 44px; border-radius: 8px; }
img.projekt-bild { width: 100%; }
.medien-bild { width: 56px; height: 56px; border-radius: 8px; }
.plan-bild { width: 100%; height: auto; aspect-ratio: 9 / 4; border-radius: 10px; }
.gutschein-bild { width: 32px; height: 32px; border-radius: 6px; }
.gutschein-bild.gross { width: 40px; height: 40px; border-radius: 8px; }
img.sv-foto { width: 100%; height: auto; max-height: 420px; border-radius: 8px; }
.bild-leer.sv-foto { background: transparent; color: inherit; }
img.so-kachel-bild { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 6px; }
.bild-leer.so-kachel-bild { background: transparent; color: inherit; }
.so-kal-bild { width: 20px; height: 20px; border-radius: 4px; }
img.mv-foto { width: 100%; height: auto; border-radius: 6px; }
.bild-leer.mv-foto { background: transparent; color: inherit; }
/* Startseite, Kachel "Neueste Bestellungen": Bild der ersten Position neben der Nummer (breitere erste Spalte) */
@media (min-width: 901px) { .z-neueste.mit-bild { grid-template-columns: 104px minmax(0, 1fr) 90px 100px 90px 38px; } }
.nr-bild { display: flex; align-items: center; gap: 8px; }
.mini-bild { width: 32px; height: 32px; border-radius: 6px; }
.sv-bild:has(> img.sv-foto) { padding: 0; background: transparent; }
/* Feste Seitenverhaeltnisse (bild.mjs VERHAELTNISSE, Bild.astro frei) */
img.q-1-1 { aspect-ratio: 1; } img.q-4-5 { aspect-ratio: 4 / 5; } img.q-3-4 { aspect-ratio: 3 / 4; } img.q-2-3 { aspect-ratio: 2 / 3; }
img.q-9-16 { aspect-ratio: 9 / 16; } img.q-5-4 { aspect-ratio: 5 / 4; } img.q-4-3 { aspect-ratio: 4 / 3; } img.q-3-2 { aspect-ratio: 3 / 2; }
img.q-16-9 { aspect-ratio: 16 / 9; } img.q-2-1 { aspect-ratio: 2 / 1; }
img.mv-foto { aspect-ratio: 28 / 15; }

/* ---------- Vollbild-Editor (Rebrand, Figma 667:8625 Kompakte Markenleiste 68 px, 667:8925 Arbeitsstatus 32 px) ----------
   Rahmen.astro mit editor: keine Seitenleiste, keine Kopfleiste, kein Seitenkopf; die Seite liefert Werkzeug (Slot
   editor-werkzeug) und Status (Slot editor-status). Kontraste: --leiste-text auf --leiste 15,2, auf --leiste-flaeche 12,0;
   --leiste-leise auf --leiste 7,3; Tinte auf Orange 5,97; --text2 auf Weiss 7,0. */
body.editor-modus .rahmen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: none; min-height: 100vh; }
.editorleiste { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; min-height: 68px; padding: 0 18px; background: var(--leiste); color: var(--leiste-text); min-width: 0; }
.editorleiste-marke { color: var(--leiste-text); text-decoration: none; display: inline-flex; align-items: center; flex: none; }
.editorleiste-marke .logo-wort { font: 700 26px/1 var(--wort); letter-spacing: -0.6px; color: var(--leiste-text); }
.editorleiste-trenner { width: 1px; height: 30px; background: var(--leiste-linie); flex: none; }
.editorleiste .wechsler.editorleiste-projekt { margin-top: 0; min-width: 0; flex: 0 1 200px; }
.editorleiste-projekt summary { background: transparent; padding: 4px 6px; }
.editorleiste-projekt .wechsler-liste { min-width: 220px; }
.editorleiste-zurueck { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 6px; border: 1px solid var(--leiste-linie); background: var(--leiste-flaeche); color: var(--leiste-text); font: 600 11px/1 var(--text); text-decoration: none; white-space: nowrap; flex: none; }
.editorleiste-zurueck:hover { border-color: var(--leiste-leise); }
.editorleiste-modus { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.editorleiste-titel { font: 400 20px/24px var(--titel); letter-spacing: 0; color: var(--leiste-text); white-space: nowrap; margin: 0; overflow: hidden; text-overflow: ellipsis; }
.editorleiste-unter { font: 400 10px/12px var(--text); color: var(--leiste-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editorleiste-werkzeug { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; row-gap: 6px; padding: 6px 0; min-width: 0; }
.editorleiste .knopf { min-height: 34px; border-radius: 6px; font-size: 11px; background: var(--leiste-flaeche); border-color: var(--leiste-linie); color: var(--leiste-text); }
.editorleiste .knopf.primaer, .editorleiste .knopf.akzent { background: var(--akzent); border-color: var(--akzent); color: var(--tinte); }
.editorleiste .knopf[aria-disabled='true'], .editorleiste .knopf:disabled { background: var(--leiste); color: var(--leiste-leise); }
.editorleiste-konto { display: flex; flex-direction: column; gap: 3px; font: 600 11px/13px var(--text); flex: none; }
.editorleiste-konto .konto-rolle { font: 400 10px/12px var(--text); color: var(--leiste-leise); }
.editorleiste .knopf-rund.klein { color: var(--leiste-leise); }
.editorleiste .knopf-rund.klein:hover { background: var(--leiste-flaeche); border-color: var(--leiste-linie); color: var(--leiste-text); }
main.inhalt.editor { padding: 0; gap: 0; }
main.inhalt.editor > .meldung { margin: 12px 18px 0; }
.statuszeile { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; min-height: 32px; padding: 0 20px; border-top: 1px solid var(--linie); background: var(--flaeche); font: 400 11px/15px var(--text); color: var(--text2); }
@media (max-width: 900px) {
  .editorleiste { position: static; flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .editorleiste-trenner, .editorleiste-unter, .editorleiste-konto { display: none; }
  .editorleiste-werkzeug { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

/* Gemeinsame Regeln, die vorher nur in Modul-Stylesheets standen (umsatz.css, marketing.css, inhalte.css) und auf Seiten ohne
   diese Datei fehlten (gemessen 03.10.2026: 11 Seiten mit Klassen ohne Regel; auf /sprachen und /suche hatten Balken die Breite 0) */
.kpi.kpi-warn .kpi-wert { color: var(--fehler); }
.kpi-wert.klein-wert { font-size: 28px; line-height: 38px; }
.balken { display: block; height: 10px; border-radius: 999px; background: var(--papier); overflow: hidden; }
.balken-fuell { display: block; height: 100%; border-radius: 999px; background: var(--akzent); width: 0; }
.balken-fuell.b1 { width: 10%; } .balken-fuell.b2 { width: 20%; } .balken-fuell.b3 { width: 30%; } .balken-fuell.b4 { width: 40%; } .balken-fuell.b5 { width: 50%; }
.balken-fuell.b6 { width: 60%; } .balken-fuell.b7 { width: 70%; } .balken-fuell.b8 { width: 80%; } .balken-fuell.b9 { width: 90%; } .balken-fuell.b10 { width: 100%; }
.daten.posten { grid-template-columns: minmax(0, 1fr) auto; }
.daten.posten dt { color: var(--tinte); font-size: 14px; }
.daten.posten dd { text-align: right; font: 400 13px/17px var(--mono); color: var(--text2); white-space: nowrap; }
.code-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); font: 500 13px/17px var(--mono); color: var(--tinte); white-space: nowrap; }

/* ---------- Gemeinsame Bausteine der Seitenmuster (P0, 04.10.2026, _pruefung/rebrand/aufbau-plan.md 4) ----------
   Komponenten in src/konsole/komponenten: Bereichsreiter, Kennzahlen, Filterleiste, Liste, DetailRaster, FormularLeiste;
   Anleitung fuer die Pakete in _pruefung/rebrand/P0-bausteine.md. Nur Farben aus den Variablen oben. Gerechnete Kontraste
   (WCAG, gegen die naechste deckende Flaeche): text2 #4F5B5E auf dem dunkelsten Verlauf #DCE4E5 5,4 (Bereichsreiter), Tinte
   auf #DCE4E5 13,0; text2 auf #E2E8E9 (Statusreiter) 5,67, --leiste-text auf Tinte 15,2; text3 #5A6669 auf Weiss 5,9
   (Kennzahl-Beschriftung, Zusatzzeilen), auf --flaeche2 5,5 (Listenkopf); akzent-text als Unterstrich (kein Text) auf #DCE4E5 4,9. */

/* Bereichsreiter unter dem Seitentitel (Rahmen reiter=, ersetzt die Mehr-Leiste) */
.bereichsreiter { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 22px; border-bottom: 1px solid #CDD6D8; margin-top: -4px; }
.bereichsreiter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 500 13px/17px var(--text); color: var(--text2); text-decoration: none; white-space: nowrap; }
.bereichsreiter a:hover { color: var(--tinte); border-bottom-color: #CDD6D8; }
.bereichsreiter a[aria-current] { color: var(--tinte); font-weight: 600; border-bottom-color: var(--akzent-text); }

/* Untermenue als Zeile ueber dem Inhalt: nur wenn die Leiste es ausblendet (unter 820 px Fensterhoehe, k-shell.css) */
.untermenue-flach { display: none; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
.untermenue-flach a { padding: 6px 10px; border-radius: 6px; background: #E2E8E9; color: var(--text2); font: 500 12px/16px var(--text); text-decoration: none; white-space: nowrap; }
.untermenue-flach a:hover { color: var(--tinte); }
.untermenue-flach a[aria-current] { background: var(--tinte); color: var(--leiste-text); font-weight: 600; }

/* Kennzahlen (Kennzahlen.astro art="band"; art="karten" nutzt .kpis/.kpi) */
.kennband { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 22px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kennband.k1 { grid-template-columns: minmax(0, 1fr); }
.kennband.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kennband.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kennband.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kenn { display: flex; flex-direction: column; gap: 6px; padding: 0 24px; border-left: 1px solid var(--linie); color: var(--tinte); text-decoration: none; min-width: 0; }
.kenn:first-child { border-left: 0; }
a.kenn:hover .kenn-wert { text-decoration: underline; }
.kenn-label { font: 400 11px/1.4 var(--text); color: var(--text3); }
.kenn-zeile { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.kenn-wert { font: 400 26px/1.2 var(--text); letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kenn-rest { font: 400 11px/1.4 var(--text); color: var(--text3); }

/* Filterleiste (Filterleiste.astro): Statusreiter, darunter Suche und hoechstens drei Filter */
.filterblock { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.statusreiter { display: flex; gap: 6px; flex-wrap: wrap; }
.statusreiter a { padding: 10px 12px; border-radius: 8px; font: 500 12px/16px var(--text); color: var(--text2); background: #E2E8E9; text-decoration: none; white-space: nowrap; }
.statusreiter a:hover { color: var(--tinte); }
.statusreiter a[aria-current='page'] { background: var(--tinte); color: var(--leiste-text); font-weight: 600; }
.filterzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.suchfeld-gross.filtersuche { flex: 1 1 280px; width: auto; min-width: 0; }

/* Liste (Liste.astro): .liste, .liste-kopf, .liste-zeile von oben; hoch = zweizeilige Zellen wie Figma 644:15702 */
.liste.hoch .liste-zeile:not(.liste-kopf) { min-height: 72px; }
.liste.hoch .liste-kopf { min-height: 40px; padding-top: 0; padding-bottom: 0; }
.liste-leer { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 24px; }
.zelle { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zelle > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zelle-haupt { font: 500 13px/1.4 var(--text); color: var(--tinte); }
.zelle-stark { font: 600 13px/1.3 var(--text); color: var(--tinte); }
.zelle-klein { font: 400 11px/1.4 var(--text); color: var(--text3); }
.zelle-datum { font: 400 12px/1.4 var(--text); color: var(--tinte); }
.zelle-summe { font: 500 13px/1.3 var(--text); color: var(--tinte); text-align: right; justify-self: end; white-space: nowrap; }
/* Spalten der Bestellliste (w/[id]/bestellungen.astro): Auswahl, Nr., Kunde, Datum/Art, Betrag, Zahlung, Status */
.z-bestellliste { grid-template-columns: 18px 96px minmax(0, 1fr) 120px 96px 112px 100px; }

/* Formularseite (FormularLeiste.astro): Karten hoechstens 720 px, rechts optional eine Zusammenfassung, Leiste unten */
.formular-raster { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 340px); gap: 20px; align-items: start; margin: 0; }
.formular-raster > .formularleiste { grid-column: 1 / -1; }
.formularleiste { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 24px; background: var(--flaeche); border-radius: var(--radius); box-shadow: 0 -6px 24px rgba(23, 33, 36, 0.08), 0 0 0 1px rgba(23, 33, 36, 0.035); }
.formularleiste-text { flex: 1 1 auto; font: 400 12px/16px var(--text); color: var(--text2); min-width: 0; }
.formularleiste-text:empty { display: none; }
.formularleiste-grund { flex: 1 1 100%; margin: 0; color: var(--text2); font: 400 13px/1.5 var(--text); }

@media (max-width: 1200px) {
  .kennband.k4, .kennband.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .kennband.k4 .kenn:nth-child(3), .kennband.k5 .kenn:nth-child(odd) { border-left: 0; }
  .z-bestellliste { grid-template-columns: 18px 84px minmax(0, 1fr) 110px 90px 104px 92px; gap: 12px; }
  .formular-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .bereichsreiter { gap: 0 16px; }
  .kennband, .kennband.k3, .kennband.k4, .kennband.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; padding: 18px 0; }
  .kenn { padding: 0 16px; }
  .kennband .kenn:nth-child(odd) { border-left: 0; }
  .liste-zeile.z-bestellliste { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; }
  .liste-zeile.z-bestellliste > :last-child { grid-column: 2 / -1; justify-self: start; }
  .liste-kopf.z-bestellliste > :last-child { display: none; }
  .formularleiste { padding: 12px 16px; }
}
@media (max-width: 520px) {
  .kennband, .kennband.k2, .kennband.k3, .kennband.k4, .kennband.k5 { grid-template-columns: minmax(0, 1fr); }
  .kennband .kenn { border-left: 0; }
}

/* Einstellungen-Hub (EinstellungenNav.astro, P0): Gruppen mit Ueberschrift; text3 auf Weiss 5,9 */
.einstellungen-gruppe { display: flex; flex-direction: column; gap: 0; }
.einstellungen-gruppe + .einstellungen-gruppe { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linie); }
/* Spezifitaet wie .einstellungen-nav span (sonst Schrift der Eintraege) */
.einstellungen-nav .einstellungen-gruppe-kopf { display: block; padding: 8px 10px 4px; font: 600 10px/14px var(--text); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); }
.einstellungen-nav .einstellungen-gruppe a { padding-top: 6px; padding-bottom: 6px; }
.einstellungen-nav a[aria-current] { background: var(--papier); font-weight: 600; }

/* Einstellungen-Hub als eigene Seite (w/[id]/einstellungen.astro, P0): Suche, Gruppen, Zeilen mit Titel, Satz und Pfeil.
   Kontraste: Tinte auf Weiss 16,7, auf --flaeche2 (Hover) 15,6; text2 auf Weiss 7,0, auf --flaeche2 6,5; Symbol Tinte auf --papier. */
.hub-suche { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.hub-suche .filtersuche { max-width: 520px; }
.hub-gruppe { gap: 8px; }
.hub-liste { display: flex; flex-direction: column; }
.hub-zeile { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 12px 10px; margin: 0 -10px; border-radius: 10px; color: var(--tinte); text-decoration: none; }
.hub-zeile + .hub-zeile { border-top: 1px solid var(--linie); }
.hub-symbol { width: 36px; height: 36px; border-radius: 10px; background: var(--papier); color: var(--tinte); display: grid; place-items: center; }
.hub-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-titel { display: flex; align-items: center; gap: 8px; font: 600 14px/18px var(--text); color: var(--tinte); }
.hub-satz { font: 400 12px/16px var(--text); color: var(--text2); }
.hub-pfeil { color: var(--text2); }
/* Unterpunkte eines Hub-Eintrags (darstellung.mjs Zusatz unter, z. B. DNS unter Domain & SEO, nur Team): eingerueckt */
.einstellungen-nav a.einstellungen-unter { padding-left: 38px; font-size: 13px; }
.einstellungen-nav a.einstellungen-unter .sym { width: 16px; height: 16px; }

/* ---------- Gemeinsame Hilfsklassen (04.10.2026, Wuensche der Pakete in _pruefung/rebrand/global-*.md) ----------
   Vorher lokal in rb-*.css; Kontraste gerechnet (WCAG, gegen die naechste deckende Flaeche): Tinte auf akzent-weich 14,2,
   text3 auf akzent-weich 4,85, Tinte auf --flaeche2 15,2, text2 auf --flaeche2 6,5. Bewegung nur mit den Token unten. */

/* Gewaehlte Listenzeile (Seitenpanel oder Bearbeiten offen, aria-current), Figma 644:15702: akzent-weich mit Orange-Kante */
.liste-zeile[aria-current] { background: var(--akzent-weich); box-shadow: inset 3px 0 0 var(--akzent); }
a.liste-zeile[aria-current]:hover, a.liste-zeile[aria-current]:focus-visible { background: var(--akzent-weich); }

/* Ganze Zeile klickbar, obwohl sie Formulare enthaelt (Lager, Kategorien, Produktbewertungen): der Ziel-Link a.rb-ziel spannt
   sich mit ::after ueber die Zeile; Knoepfe, Felder, Aufklapper und andere Links liegen darueber und bleiben bedienbar.
   Hover und Fokus wie a.liste-zeile. Markup: <div class="liste-zeile z-… rb-ganz"> … <a class="rb-ziel" href=…>Name</a> … </div> */
.liste-zeile.rb-ganz { position: relative; transition: background-color var(--dauer-kurz) var(--kurve); }
.liste-zeile.rb-ganz a.rb-ziel { color: var(--tinte); text-decoration: none; }
.liste-zeile.rb-ganz a.rb-ziel::after { content: ''; position: absolute; inset: 0; }
.liste-zeile.rb-ganz a.rb-ziel:focus-visible { outline: none; }
.liste-zeile.rb-ganz :is(form, button, input, select, textarea, details, summary, a:not(.rb-ziel)) { position: relative; z-index: 1; }
.liste-zeile.rb-ganz:hover, .liste-zeile.rb-ganz:focus-within { background: var(--flaeche2); }
.liste-zeile.rb-ganz[aria-current]:hover, .liste-zeile.rb-ganz[aria-current]:focus-within { background: var(--akzent-weich); }
.liste-zeile.rb-ganz:has(a.rb-ziel:focus-visible) { outline: 2px solid var(--tinte); outline-offset: -3px; }

/* Aufklapp-Zeile einer Liste (Bearbeiten in der Zeile ohne eigene Detailseite: CMS-Eintraege, Einsendungen, Kategorien):
   <details><summary class="liste-zeile z-…">…</summary>…</details>. Hover wie a.liste-zeile, Pfeil nach unten am Ende. */
.liste > details { border-bottom: 1px solid var(--linie); }
.liste > details:last-child { border-bottom: 0; }
details > summary.liste-zeile { border-bottom: 0; cursor: pointer; list-style: none; position: relative; transition: background-color var(--dauer-kurz) var(--kurve); }
details > summary.liste-zeile::-webkit-details-marker { display: none; }
details > summary.liste-zeile:hover, details > summary.liste-zeile:focus-visible, details[open] > summary.liste-zeile { background: var(--flaeche2); }
details > summary.liste-zeile:focus-visible { outline-offset: -3px; }
details > summary.liste-zeile::after { content: ''; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; border: solid var(--text2); border-width: 0 2px 2px 0; transform: translate(0, -75%) rotate(45deg); opacity: 0; transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); pointer-events: none; }
details > summary.liste-zeile:hover::after, details > summary.liste-zeile:focus-visible::after, details[open] > summary.liste-zeile::after { opacity: 1; }
details[open] > summary.liste-zeile::after { transform: translate(0, -25%) rotate(-135deg); }

/* Aufklapper mit Knopf-Optik (Zeilenaktionen mit Bestaetigung: Loeschen, Antworten): <details><summary class="knopf klein">.
   Hover und Fokus kommen von .knopf; offen bleibt der Knopf hervorgehoben. */
summary.knopf { list-style: none; cursor: pointer; width: max-content; }
summary.knopf::-webkit-details-marker { display: none; }
details[open] > summary.knopf:not(.primaer):not(.akzent) { background: var(--flaeche2); border-color: var(--tinte); }

/* Aufklapp-Formulare in Listenzeilen: jede Zeile ist durch das Einblenden eine eigene Ebene; die Zeile mit offenem Formular
   liegt ueber den folgenden Zeilen und Absaetzen, die Liste schneidet es nicht ab (Befund Paket buchungen) */
.liste-zeile:has(details[open]) { position: relative; z-index: 6; }
.liste:has(.liste-zeile details[open]) { overflow: visible; }
main.inhalt > :has(.liste-zeile details[open]), .stapel > :has(.liste-zeile details[open]) { position: relative; z-index: 6; }

/* Kennzahl als Text (Kennzahlen.astro klein, z. B. Name "zuletzt angelegt"): Inter 16/22, einzeilig mit Auslassung (title) */
.kpi-wert.klein, .kenn-wert.klein { font: 500 16px/22px var(--text); letter-spacing: 0; }

/* Vollbild-Editoren in der Seite (Ablauf-, E-Mail-Editor, Marketing-Plan): main.inhalt.editor hat keinen Innenabstand */
.editor-flaeche { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 28px; min-width: 0; }
@media (max-width: 640px) { .editor-flaeche { padding: 14px 16px 22px; } }

/* Einstellungsseiten schmal (einspaltig): erst die Karten der Seite, dann die Gruppenliste (sonst sehr lang vor dem Inhalt) */
@media (max-width: 900px) { .einstellungen > .einstellungen-nav { order: 2; } }

/* ---------- Bewegung und Rueckmeldung (P0, 04.10.2026, Tim: "Alles soll interaktiv sein und mit Mouseover und Animation
   aufgebaut sein") ----------
   Token: --dauer-kurz (Farbe), --dauer (Hub, Schatten), --dauer-lang (Einblenden), --kurve. Hover und Tastatur-Fokus sehen gleich
   aus (:hover, :focus-visible). Einblenden beim Laden NUR per CSS: Endzustand sichtbar (animation-fill-mode both, Ziel opacity 1,
   transform none); ohne Animation (prefers-reduced-motion, abgeschaltet) ist alles sofort da. Kein Skript. Farben im Hover nur aus
   den Variablen; gerechnet: Leiste --leiste-text auf --leiste-hover #1F2B2F 13,5; Tinte auf #F2651A (Knopf primaer im Hover) 5,2;
   Tinte auf --flaeche2 (Listenzeile im Hover) 15,2 (alle per Hover im Browser gemessen). Messwerkzeug per Hover im Browser: _pruefung/rebrand/p0/hover.mjs. */
:root { --dauer-kurz: 120ms; --dauer: 200ms; --dauer-lang: 320ms; --kurve: cubic-bezier(.2, .7, .2, 1); --schatten-hoch: 0 12px 32px rgba(23, 33, 36, 0.10), 0 0 0 1px rgba(23, 33, 36, 0.05); }

/* Menue: Hintergrund weich, Symbol leicht versetzt */
.nav-punkt, .wechsler summary, .wechsler-liste a { transition: background-color var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve); }
.nav-punkt > .sym, .nav-punkt > .nav-hnvr { transition: transform var(--dauer) var(--kurve); }
a.nav-punkt:hover > .sym, a.nav-punkt:focus-visible > .sym, a.nav-punkt:hover > .nav-hnvr, a.nav-punkt:focus-visible > .nav-hnvr, .nav-team > summary:hover > .sym:first-child { transform: translateX(2px); }
a.nav-punkt:focus-visible, .untermenue a:focus-visible { background: var(--leiste-hover); }
.nav-punkt[data-aktiv='ja']:focus-visible { background: var(--akzent); }
.untermenue a { transition: background-color var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve), transform var(--dauer) var(--kurve); }
.untermenue a:hover, .untermenue a:focus-visible { transform: translateX(3px); color: var(--leiste-text); }

/* Reiter: Bereichsreiter (Unterstrich), Statusreiter und alte Reiter (Farbe, leichter Hub) */
.bereichsreiter a { transition: color var(--dauer-kurz) var(--kurve), border-color var(--dauer) var(--kurve); }
.bereichsreiter a:focus-visible { color: var(--tinte); border-bottom-color: #CDD6D8; }
.bereichsreiter a[aria-current]:focus-visible { border-bottom-color: var(--akzent-text); }
.statusreiter a, .reiter a, .rb-reiter a, .untermenue-flach a { transition: background-color var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve), transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); }
.statusreiter a:hover, .statusreiter a:focus-visible, .reiter a:hover, .reiter a:focus-visible, .rb-reiter a:hover, .rb-reiter a:focus-visible, .untermenue-flach a:hover, .untermenue-flach a:focus-visible { color: var(--tinte); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(23, 33, 36, 0.08); }
.statusreiter a[aria-current='page']:hover, .reiter a[aria-current='page']:hover, .rb-reiter a[aria-current='page']:hover, .untermenue-flach a[aria-current]:hover,
.statusreiter a[aria-current='page']:focus-visible, .reiter a[aria-current='page']:focus-visible, .rb-reiter a[aria-current='page']:focus-visible, .untermenue-flach a[aria-current]:focus-visible { color: var(--leiste-text); }

/* Knoepfe: Farbe, leichter Hub, Schatten (deaktivierte bleiben ruhig) */
.knopf, .knopf-rund { transition: background-color var(--dauer-kurz) var(--kurve), border-color var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve), transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); }
.knopf:not([disabled]):not([aria-disabled='true']):hover, .knopf:not([disabled]):not([aria-disabled='true']):focus-visible,
a.knopf-rund:hover, button.knopf-rund:not([disabled]):hover, a.knopf-rund:focus-visible, button.knopf-rund:not([disabled]):focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 33, 36, 0.12); }
.knopf:not([disabled]):not([aria-disabled='true']):focus-visible { border-color: var(--tinte); }
.knopf.primaer:focus-visible, .knopf.akzent:focus-visible { background: var(--k-akzent-hover, var(--akzent)); border-color: var(--k-akzent-hover, var(--akzent)); }
.knopf:not([disabled]):not([aria-disabled='true']):active, a.knopf-rund:active, button.knopf-rund:active { transform: translateY(0); box-shadow: none; }
.kopfleiste .knopf-rund.glocke:hover, .konto .knopf-rund.klein:hover, .editorleiste .knopf-rund.klein:hover { box-shadow: none; }

/* Verlinkte Karten, Kennzahlen, Kacheln, Aufgaben: Hub und Schatten */
a.karte, a.kpi, a.kachel, a.aufgabe, a.rb-kpi, a.rb-kontakte, a.rb-umsatz, a.app-mini { transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); }
a.karte:hover, a.karte:focus-visible, a.kpi:hover, a.kpi:focus-visible, a.kachel:hover, a.kachel:focus-visible, a.aufgabe:hover, a.aufgabe:focus-visible,
a.rb-kpi:hover, a.rb-kpi:focus-visible, a.rb-kontakte:hover, a.rb-kontakte:focus-visible, a.rb-umsatz:hover, a.rb-umsatz:focus-visible, a.app-mini:hover, a.app-mini:focus-visible { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
a.kenn { border-radius: 10px; transition: background-color var(--dauer-kurz) var(--kurve); }
a.kenn:hover, a.kenn:focus-visible { background: var(--flaeche2); }

/* Listenzeilen: Hintergrund, Pfeil am Zeilenende erscheint (CSS-Pfeil, absolut positioniert, keine eigene Grid-Spalte) */
a.liste-zeile, a.rb-zb, a.rb-zeile, a.hub-zeile { position: relative; transition: background-color var(--dauer-kurz) var(--kurve); }
a.liste-zeile:focus-visible, a.rb-zb:focus-visible, a.rb-zeile:focus-visible, a.hub-zeile:hover, a.hub-zeile:focus-visible { background: var(--flaeche2); outline-offset: -3px; }
a.liste-zeile::after, a.rb-zb::after, a.rb-zeile::after { content: ''; position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; border: solid var(--text2); border-width: 2px 2px 0 0; transform: translate(-4px, -50%) rotate(45deg); opacity: 0; transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); pointer-events: none; }
a.liste-zeile:hover::after, a.liste-zeile:focus-visible::after, a.rb-zb:hover::after, a.rb-zb:focus-visible::after, a.rb-zeile:hover::after, a.rb-zeile:focus-visible::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
.hub-pfeil { transition: transform var(--dauer) var(--kurve), color var(--dauer-kurz) var(--kurve); }
a.hub-zeile:hover .hub-pfeil, a.hub-zeile:focus-visible .hub-pfeil { transform: translateX(3px); color: var(--tinte); }

/* Chips und Eingabefelder */
.chip { transition: border-color var(--dauer-kurz) var(--kurve), transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); }
a.chip:hover, a.chip:focus-visible { border-color: var(--tinte); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(23, 33, 36, 0.08); }
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=search], input[type=number], input[type=password], input[type=datetime-local], input[type=date], input[type=time], select, textarea, .suchfeld-gross, .topsuche { transition: border-color var(--dauer-kurz) var(--kurve), box-shadow var(--dauer) var(--kurve), outline-color var(--dauer) var(--kurve); }
input[type=text]:hover, input[type=email]:hover, input[type=url]:hover, input[type=tel]:hover, input[type=number]:hover, input[type=password]:hover, input[type=datetime-local]:hover, input[type=date]:hover, input[type=time]:hover, select:hover, textarea:hover, .suchfeld-gross:hover { border-color: #B9C4C6; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--tinte); box-shadow: 0 0 0 4px var(--akzent-weich); }

/* Einblenden beim Laden: Inhalt gestaffelt; Endzustand sichtbar */
@keyframes p0-einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes p0-blende { from { opacity: 0; } to { opacity: 1; } }
@keyframes p0-schublade { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes p0-klein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Die Einblend-Animationen sind NUR bei prefers-reduced-motion: no-preference deklariert (04.10.2026, Befund Paket buchungen:
   mit "weniger Bewegung" hatten Bloecke direkt nach domcontentloaded noch Deckkraft 0, weil die 0,01-ms-Animation mit
   fill-mode both bis zum ersten Bild den Anfangszustand zeigte). Ohne Bewegung gibt es also keine Animation und keinen
   Anfangszustand; der Ruhezustand ist sichtbar. */
/* 05.10.2026 (Welle 1A, Pruefbericht AUDIT-BEDIENUNG L6): Einblenden hoechstens 150 ms (--k-einblenden, k-grund.css) und ohne
   Verzoegerung oder Staffel; vorher bis 560 ms (240 ms Verzoegerung + 320 ms), der Inhalt war direkt nach load halb transparent. */
@media (prefers-reduced-motion: no-preference) {
.seitenkopf-text, .seitenkopf .aktionen, .bereichsreiter, .untermenue-flach { animation: p0-einblenden var(--k-einblenden, 150ms) var(--kurve) both; }
/* 27.10.2026: fill-mode backwards statt both: die Endtransformation blieb stehen und machte main > * zum Bezugsrahmen von position:fixed (Seitenpanels hingen an der Spalte) */
main.inhalt > * { animation: p0-einblenden var(--k-einblenden, 150ms) var(--kurve) backwards; }
main.inhalt.editor > * { animation: none; }
.kennband > .kenn, .kpis > .kpi, .liste > .liste-zeile:not(.liste-kopf), .hub-liste > .hub-zeile { animation: p0-blende var(--k-einblenden, 150ms) var(--kurve) both; }
/* Aufklappen: Untermenue, Wechsler-Liste; Dialoge und Schubladen mit eingeblendetem Hintergrund (Ebenen, keine Ladeanimation) */
.navigation .untermenue, .wechsler[open] .wechsler-liste, .nav-team[open] .untermenue, .k-waehler[open] .k-waehler-liste, .k-neu[open] .k-neu-menue, .k-konto[open] .k-konto-menue { animation: p0-klein var(--k-einblenden, 150ms) var(--kurve) both; }
.schleier, .rb-dialog-grund { animation: p0-blende var(--dauer) var(--kurve) both; }
.schublade { animation: p0-schublade var(--dauer-lang) var(--kurve) both; }
.rb-dialog, .rb-meldung { animation: p0-einblenden var(--k-einblenden, 150ms) var(--kurve) both; }
}

/* Weniger Bewegung: alles sofort im Endzustand (sichtbar), keine Uebergaenge. animation-name none faengt auch Einblendungen
   anderer Stylesheets ab (rb-module.css, rb-kontakte.css), die nicht in no-preference stehen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; animation-name: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* hnvr.me Apps je Website: "Aus der Website nehmen" unter der Kachel (pages/konsole/w/[id]/hnvr-apps.astro) */
.app-kachel-zusatz { display: flex; justify-content: flex-end; margin: 0; }

/* ---------- Zugang (03.10.2026): schlichter Rahmen layouts/Layout.astro fuer Anmelden, Einladung, Kein Zugang, Abmelden, 404 ----------
   Links Markenflaeche in den Farben der Seitenleiste, rechts die Karte auf dem Verlauf. Kontraste wie in der Leiste:
   #F3F7F7 auf #172124 15,2, #A2B0B3 auf #172124 7,3; Tinte auf Orange 5,97. */
.zugang { display: grid; grid-template-columns: minmax(360px, 520px) minmax(0, 1fr); min-height: 100vh; }
.zugang-marke { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 40px; padding: 40px 48px; background: var(--leiste); color: var(--leiste-text); overflow: hidden; }
.zugang-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; color: var(--leiste-text); align-self: flex-start; }
.zugang-logo .logo-wort { font-size: 30px; letter-spacing: -0.6px; color: var(--leiste-text); }
.zugang-zusatz { font: 500 10px/12px var(--text); letter-spacing: 0.8px; text-transform: uppercase; color: var(--leiste-leise); padding-left: 2px; }
.zugang-botschaft { display: flex; flex-direction: column; gap: 28px; margin: auto 0; }
.zugang-botschaft h2 { font: 500 38px/1.12 var(--titel); letter-spacing: -0.8px; color: var(--leiste-text); max-width: 400px; }
.zugang-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.zugang-punkte li { display: flex; align-items: flex-start; gap: 14px; }
.zugang-punkte li > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zugang-punkte strong { font: 600 14px/19px var(--text); color: var(--leiste-text); }
.zugang-punkte li > span:last-child > span { font: 400 13px/19px var(--text); color: var(--leiste-leise); }
.zugang-zeichen { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--leiste-flaeche); color: var(--leiste-text); box-shadow: 0 0 0 1px var(--leiste-linie); }
.zugang-punkte li:nth-child(2) .zugang-zeichen { background: var(--akzent); color: var(--tinte); box-shadow: none; }
.zugang-fuss { font: 400 12px/15px var(--mono); color: var(--leiste-leise); }
.zugang-flaeche { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 48px 32px; min-width: 0; }
.zugang-karte { width: 100%; max-width: 480px; padding: 32px; gap: 18px; }
.zugang-karte h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.6px; overflow-wrap: anywhere; }
.zugang-karte .adresse { overflow-wrap: anywhere; }
.zugang-karte .knopf { justify-content: center; }
.zugang-karte form.formular .knopf.primaer, .zugang-karte form.formular .knopf.dunkel { width: 100%; min-height: 44px; }
.zugang-links { display: flex; gap: 18px; font: 400 12px/17px var(--text); }
.zugang-links a { color: var(--text2); }
.zugang-links a:hover { color: var(--tinte); }
/* Register Anmelden / Konto anlegen auf der Anmeldeseite */
.zugang-register { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: #E9EEEF; }
.zugang-register a { display: grid; place-items: center; min-height: 36px; border-radius: 7px; font: 500 13px/17px var(--text); color: var(--text2); text-decoration: none; }
.zugang-register a:hover { color: var(--tinte); }
.zugang-register a[aria-current='page'] { background: var(--flaeche); color: var(--tinte); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 33, 36, 0.08); }
.zugang-trenner { display: flex; align-items: center; gap: 12px; font: 400 12px/17px var(--text); color: var(--text3); }
.zugang-trenner::before, .zugang-trenner::after { content: ''; flex: 1; height: 1px; background: var(--linie); }
@media (max-width: 900px) {
  .zugang { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .zugang-marke { position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
  .zugang-botschaft { display: none; }
  .zugang-fuss { display: none; }
  .zugang-flaeche { justify-content: flex-start; padding: 28px 16px 40px; }
  .zugang-karte { padding: 24px 20px; }
  .zugang-karte h1 { font-size: 28px; }
}

/* ---------- Listenmuster (04.10.2026, Zweig bau-listen): Liste.astro, Filterleiste.astro, ZeilenWahl.astro, ZeilenMenue.astro ----------
   Vorbild Website-Verwaltung (BEDIENMUSTER.md Kernmuster 2): Mehrfachauswahl mit Aktionsleiste, Spalten anpassen, gespeicherte
   Ansichten, Filter-Chips, Weitere Aktionen je Zeile. Gestaltung eigen. Masse aus Teil E nur, wo nichts festgelegt war:
   Kontrollkaestchen 16 px; Kopf 40 px und Zeilen 72 px kommen weiter aus .liste.hoch.
   Spaltenraster ohne style-Attribut (CSP): div.liste traegt je sichtbarer Spalte lr-<platz>-<breite> (setzt --lr<platz>),
   lr-0 = Auswahl 18 px, lr-9 = Menue 38 px (listen.mjs tabelle()). Zeilen mit .lr lesen die Variablen; nicht gesetzte
   Variablen sind leer (var(--x,)). Unter 900 px gilt die schmale Regel der Liste (zwei Spalten), Auswahl und Menue entfallen.
   Kontraste (WCAG, gegen die naechste deckende Flaeche, gerechnet): Tinte auf Weiss 16,7, auf --flaeche2 15,2, auf --papier 14,7;
   text2 auf Weiss 7,0, auf --flaeche2 6,5; text3 auf Weiss 5,9; fehler auf Weiss 6,2, auf --flaeche2 5,8; akzent-text auf Weiss 6,3. */
@media (min-width: 901px) {
  .liste .liste-zeile.lr { grid-template-columns: var(--lr0,) var(--lr1,) var(--lr2,) var(--lr3,) var(--lr4,) var(--lr5,) var(--lr6,) var(--lr7,) var(--lr8,) var(--lr9,); }
}
.lr-0 { --lr0: 18px; }
.lr-9 { --lr9: 38px; }
.lr-1-xs { --lr1: 64px; } .lr-1-s { --lr1: 96px; } .lr-1-sm { --lr1: 112px; } .lr-1-m { --lr1: 120px; } .lr-1-l { --lr1: 150px; } .lr-1-f { --lr1: minmax(0, 1fr); } .lr-1-f2 { --lr1: minmax(0, 1.6fr); }
.lr-2-xs { --lr2: 64px; } .lr-2-s { --lr2: 96px; } .lr-2-sm { --lr2: 112px; } .lr-2-m { --lr2: 120px; } .lr-2-l { --lr2: 150px; } .lr-2-f { --lr2: minmax(0, 1fr); } .lr-2-f2 { --lr2: minmax(0, 1.6fr); }
.lr-3-xs { --lr3: 64px; } .lr-3-s { --lr3: 96px; } .lr-3-sm { --lr3: 112px; } .lr-3-m { --lr3: 120px; } .lr-3-l { --lr3: 150px; } .lr-3-f { --lr3: minmax(0, 1fr); } .lr-3-f2 { --lr3: minmax(0, 1.6fr); }
.lr-4-xs { --lr4: 64px; } .lr-4-s { --lr4: 96px; } .lr-4-sm { --lr4: 112px; } .lr-4-m { --lr4: 120px; } .lr-4-l { --lr4: 150px; } .lr-4-f { --lr4: minmax(0, 1fr); } .lr-4-f2 { --lr4: minmax(0, 1.6fr); }
.lr-5-xs { --lr5: 64px; } .lr-5-s { --lr5: 96px; } .lr-5-sm { --lr5: 112px; } .lr-5-m { --lr5: 120px; } .lr-5-l { --lr5: 150px; } .lr-5-f { --lr5: minmax(0, 1fr); } .lr-5-f2 { --lr5: minmax(0, 1.6fr); }
.lr-6-xs { --lr6: 64px; } .lr-6-s { --lr6: 96px; } .lr-6-sm { --lr6: 112px; } .lr-6-m { --lr6: 120px; } .lr-6-l { --lr6: 150px; } .lr-6-f { --lr6: minmax(0, 1fr); } .lr-6-f2 { --lr6: minmax(0, 1.6fr); }
.lr-7-xs { --lr7: 64px; } .lr-7-s { --lr7: 96px; } .lr-7-sm { --lr7: 112px; } .lr-7-m { --lr7: 120px; } .lr-7-l { --lr7: 150px; } .lr-7-f { --lr7: minmax(0, 1fr); } .lr-7-f2 { --lr7: minmax(0, 1.6fr); }
.lr-8-xs { --lr8: 64px; } .lr-8-s { --lr8: 96px; } .lr-8-sm { --lr8: 112px; } .lr-8-m { --lr8: 120px; } .lr-8-l { --lr8: 150px; } .lr-8-f { --lr8: minmax(0, 1fr); } .lr-8-f2 { --lr8: minmax(0, 1.6fr); }
.lr-leer { display: block; }
@media (max-width: 900px) {
  .liste-zeile.lr > .lr-wahl, .liste-zeile.lr > .lr-leer, .liste-zeile.lr > .zeilenmenue { display: none; }
  .liste-zeile.z-bestellliste.lr > .bestell-status { grid-column: 2 / -1; justify-self: start; }
  .liste-kopf.z-bestellliste.lr > .bestell-status { display: none; }
}
.bestell-status { min-width: 0; }

/* Werkzeugzeile ueber der Liste: links gespeicherte Ansichten, rechts Spalten anpassen (je ein details-Menue) */
.listenwerkzeug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.werkzeugmenue { position: relative; }
.werkzeugmenue[open] > summary.knopf { background: var(--flaeche2); border-color: var(--tinte); }
.werkzeugmenue-feld { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(340px, calc(100vw - 32px)); background: var(--flaeche); border-radius: 12px; box-shadow: 0 12px 40px rgba(23, 33, 36, 0.16), 0 0 0 1px rgba(23, 33, 36, 0.06); padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--tinte); }
.werkzeugmenue-rechts .werkzeugmenue-feld { left: auto; right: 0; }
.werkzeug-titel { margin: 0; padding: 0; font: 600 11px/14px var(--text); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text3); }
.werkzeug-formular { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
.werkzeug-feld { display: flex; flex-direction: column; gap: 4px; width: 100%; font: 500 12px/16px var(--text); color: var(--text2); }
.werkzeug-feld input { width: 100%; font: 400 14px/20px var(--text); padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--radius-klein); color: var(--tinte); background: var(--flaeche); }
.werkzeug-knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spaltenwahl { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.spaltenwahl legend { margin-bottom: 4px; }
.spaltenwahl .kontrolle { font-size: 13px; }
.ansichtsliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ansicht-zeile { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--linie); }
.ansicht-zeile > a { flex: 1 1 auto; min-width: 0; padding: 8px 0; color: var(--tinte); font: 500 13px/18px var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ansicht-zeile > a:hover { text-decoration: underline; }
.ansicht-zeile > a[aria-current] { font-weight: 700; }
.ansicht-zeile > form { margin: 0; }

/* Aktionsleiste der Mehrfachauswahl: eigenes POST-Formular, Kontrollkaestchen der Zeilen gehoeren ueber form= dazu */
.auswahlleiste { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0; padding: 10px 16px; background: var(--flaeche); border-radius: var(--radius-klein); box-shadow: var(--schatten); color: var(--tinte); }
.auswahlleiste .kontrolle { font-size: 13px; }
.auswahl-zahl { font: 500 12px/16px var(--text); color: var(--text2); }
.auswahl-bestaetigen { color: var(--fehler); }
.lr-wahl { display: flex; align-items: center; }
.lr-kasten, .auswahlleiste input[type='checkbox'], .spaltenwahl input[type='checkbox'] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--tinte); cursor: pointer; }

/* Weitere Aktionen je Zeile (ZeilenMenue.astro): details mit dem runden ⋯-Knopf (.mehr-knopf), Menue rechts unter dem Knopf */
.zeilenmenue { position: relative; justify-self: end; }
.zeilenmenue > summary { list-style: none; cursor: pointer; }
.zeilenmenue > summary::-webkit-details-marker { display: none; }
.zeilenmenue > summary:hover, .zeilenmenue[open] > summary { background: var(--papier); color: var(--tinte); }
.zeilenmenue-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 240px; background: var(--flaeche); border-radius: 12px; box-shadow: 0 12px 40px rgba(23, 33, 36, 0.16), 0 0 0 1px rgba(23, 33, 36, 0.06); padding: 6px; display: flex; flex-direction: column; }
.zeilenmenue-punkt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-klein); background: transparent; color: var(--tinte); font: 500 13px/17px var(--text); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.zeilenmenue-punkt:hover, .zeilenmenue-punkt:focus-visible { background: var(--flaeche2); }
.zeilenmenue-punkt.gefahr { color: var(--fehler); }
.zeilenmenue-form { margin: 0; }

/* Filterleiste: weitere Filter hinter dem Knopf Filter, aktive Filter als Chips (Link ohne den Parameter) */
/* Das Feld haengt an der ganzen Filterzeile (rechtsbuendig), nicht am Knopf: steht der Knopf am rechten Rand, liefe es sonst
   ueber den Bildschirm (Aufnahme 1440 px, 04.10.2026) */
.filterblock .filterzeile { position: relative; }
.filterbereich { position: static; }
.filterbereich[open] > summary.knopf { background: var(--flaeche2); border-color: var(--tinte); }
.filterbereich-feld { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 260px; max-width: calc(100vw - 32px); background: var(--flaeche); border-radius: 12px; box-shadow: 0 12px 40px rgba(23, 33, 36, 0.16), 0 0 0 1px rgba(23, 33, 36, 0.06); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.filterbereich-zeile { display: flex; flex-direction: column; gap: 4px; font: 500 12px/16px var(--text); color: var(--text2); }
.filterchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filterchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px 6px 12px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte); font: 500 12px/16px var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterchip:hover { border-color: var(--tinte); }

/* Zweiter Faktor der Anmeldung (17.10.2026, pages/konsole/zweiter-schritt.astro): QR-Code der Einrichtung und Backup-Codes */
.zf-qr { width: 208px; max-width: 100%; margin: 4px 0 16px; padding: 8px; background: #FFFFFF; border: 1px solid var(--linie); border-radius: 8px; }
.zf-qr svg { display: block; width: 100%; height: auto; }
.zf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 8px 0 20px; padding-left: 24px; }
.zf-codes code { font: 500 16px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--tinte); }
@media (max-width: 420px) { .zf-codes { grid-template-columns: minmax(0, 1fr); } }

/* Konsole neu (26.10.2026): Huelle der Seiten Kunden, Kontakte, Mitglieder, Formulare; weitere Regeln in b-kunden-neu.css */
.nkk { display: grid; gap: 22px; min-width: 0; }

/* Konsole neu (26.10.2026): Huelle der Seiten Website, Inhalte, Medien, Apps; weitere Regeln in b-web-neu.css */
.nw-stapel { display: grid; gap: 22px; min-width: 0; }

/* Bereichsreiter kompakt (26.10.2026): Grundregeln der Auswahl; das Aussehen steht in k-huelle.css */
.bereichsreiter-auswahl { display: inline-block; }
.bereichsreiter-auswahl .bra-name { font-weight: 600; }
.bereichsreiter-auswahl .bra-zahl { font-size: 12px; }

/* Platzhalter an der Kante des Blaetterns (UX-Umbau 03.11.2026): haelt die Lage, ist aber kein Knopf */
.knopf-rund.nk-platz { visibility: hidden; }

/* Hinweiszeile ueber einer Liste (UX-Umbau 03.11.2026, KONSOLE-UX-KONZEPT.md 4.2): was wartet und NICHT schon als Filter-Pille dasteht,
   als eine ruhige Zeile mit Verweisen statt einer Lage-Karte mit denselben Zahlen */
.nk-wartet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; padding: 8px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; color: var(--k-text); background: var(--kn-fuell, rgba(255, 255, 255, .4)); }
.nk-wartet > .sym { color: var(--k-text-leise); margin-right: 4px; flex: none; }
.nk-wartet a { color: var(--k-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
/* Live-Punkt ueber einer Liste (Liste.astro, live.punkt) */
.k-liste-live { display: flex; justify-content: flex-end; margin: 0 0 6px; font: 500 12.5px/1.3 var(--k-schrift-text, inherit); color: var(--k-text-3, #50555C); }
.k-live[data-k-live-tippbar] { cursor: pointer; }

}