/* Konsole neu, Welle 1 (18.10.2026): Gestaltungssystem nach der verbindlichen Testseite (admin/konsole-neu-2026-10-18).
   Helles Liquid Glass ueber einem lebendigen Hintergrund, Kundenfarbe, Dunkelmodus, persoenliche Ansicht.
   Wird als LETZTES Stylesheet geladen (Rahmen.astro) und belegt die drei bestehenden Tokensysteme neu
   (--k-* aus k-grund.css, --kb-* folgen daraus, alte Namen aus plattform.css). Ohne Skript bleibt alles sichtbar. */

:root {
  /* 19.10.2026: Zahlen, Zeiten und Betraege der alten Seiten standen in Geist Mono (Schreibmaschinenoptik); im neuen System Inter */
  --mono: 'Inter', system-ui, sans-serif;
  color-scheme: light;
  /* Grundfarben */
  --k-papier: #EAF0F6; --k-flaeche: #FFFFFF; --k-flaeche-2: #F4F6F9; --k-flaeche-3: #E8EDF3;
  --k-linie: rgba(15, 23, 32, .11); --k-feldrand: #858E9B;
  --k-tinte: #14191F; --k-text: #14191F; --k-text-leise: #42464D; --k-text-3: #50555C; /* 04.11.2026: vorher #4B4F57 / #5E636B, auf hellem Glas ueber Blau 3,0 bis 4,5 zu 1 gemessen (41-ausbau) */
  /* Akzent hnvr.me; Kundenfarbe ueberschreibt unten */
  --k-akzent: #FF7120; --k-akzent-hover: #FF8A45; --k-akzent-gedrueckt: #E8620F;
  --k-akzent-weich: #FFE6D6; --k-akzent-text: #A24716; --k-auf-akzent: #1A1714;
  /* Zustaende */
  --k-erfolg: #17692F; --k-erfolg-weich: #E2F4E7; --k-warnung: #7A5200; --k-warnung-weich: #FFF2CC;
  --k-fehler: #B42318; --k-fehler-weich: #FDE7E5; --k-fehler-hover: #9A1E14; --k-fehler-gedrueckt: #82190F;
  --k-info: #1D5FB8; --k-info-weich: #E4EEFC; --k-live: #1F8A4F;
  /* Seitenleiste: helles Glas statt dunkler Leiste */
  --k-leiste-grund: transparent; --k-leiste-hover: rgba(15, 23, 32, .05); --k-leiste-aktiv: rgba(255, 255, 255, .95);
  --k-leiste-linie: rgba(15, 23, 32, .09); --k-leiste-text: #14191F; --k-leiste-leise: #4B4F57;
  /* Glas */
  --kn-glas: rgba(255, 255, 255, .55); --kn-glas-dicht: rgba(255, 255, 255, .78); --kn-glas-voll: rgba(255, 255, 255, .94);
  --kn-rand: rgba(15, 23, 32, .09);
  --kn-kante: rgba(255, 255, 255, .85); --kn-fuell: rgba(15, 23, 32, .045); --kn-fuell-2: rgba(15, 23, 32, .08); --kn-fuell-3: rgba(15, 23, 32, .13);
  --kn-schatten: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 18px rgba(20, 30, 60, .08), 0 1px 2px rgba(20, 30, 60, .06);
  --kn-schatten-hoch: 0 14px 40px rgba(20, 30, 60, .18), 0 2px 6px rgba(20, 30, 60, .08);
  --kn-unschaerfe: blur(24px) saturate(1.7);
  /* Radien und Bewegung */
  --k-radius-1: 8px; --k-radius-2: 10px; --k-radius-3: 12px; --k-radius-4: 18px; --k-radius-5: 999px;
  --kn-r-fenster: 22px; --kn-r-karte: 18px; --kn-r-knopf: 12px;
  --kn-feder: linear(0, .009, .035 2.1%, .141 4.4%, .281 6.7%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.058 22.3%, 1.064 24.7%, 1.055 27.6%, 1.014 34.6%, .998 40%, .993 45%, 1.001 60%, 1);
  /* Hintergrund (lebendig: k-neu.js setzt t1/t2/t4 nach Tageszeit und Lage) */
  --kn-t1: #8FB8FF; --kn-t2: #C7B3FF; --kn-t3: #FFB27F; --kn-t4: #7FE0D0;
  /* Alte Namen (plattform.css) auf die neuen Werte */
  --papier: var(--k-papier); --flaeche: var(--k-flaeche); --flaeche2: var(--k-flaeche-2); --linie: var(--k-linie);
  --tinte: var(--k-tinte); --text2: var(--k-text-leise); --text3: var(--k-text-3);
  --akzent: var(--k-akzent); --akzent-weich: var(--k-akzent-weich); --akzent-text: var(--k-akzent-text);
  --gut: var(--k-erfolg); --gut-weich: var(--k-erfolg-weich); --warn: var(--k-warnung); --warn-weich: var(--k-warnung-weich);
  --fehler: var(--k-fehler); --fehler-weich: var(--k-fehler-weich);
  --leiste: var(--k-tinte); --leiste-flaeche: color-mix(in srgb, var(--k-tinte) 84%, var(--k-papier)); --leiste-hover: color-mix(in srgb, var(--k-tinte) 90%, var(--k-papier));
  /* alte Pakete: --leiste/--leiste-flaeche sind Tintenflaechen mit --leiste-text (Papier) darauf; die neue Leiste nutzt --k-leiste-* */
  --leiste-linie: var(--k-leiste-linie); --leiste-text: var(--k-papier); --leiste-leise: color-mix(in srgb, var(--k-papier) 72%, var(--k-tinte));
  /* alte Pakete nutzen --leiste-text/-leise als Schrift auf --tinte (die alte Leiste war dunkel); die neue Leiste hat --k-leiste-* */
  --radius: var(--kn-r-karte); --radius-klein: var(--k-radius-2); --schatten: var(--kn-schatten);
}

/* Kundenfarbe (Stylesheet /api/konsole/marke/<kunde>.css setzt --marke-*): die ganze Konsole folgt ihr */
body.marke-kunde {
  --k-akzent: var(--marke-akzent); --k-akzent-hover: var(--marke-akzent); --k-akzent-gedrueckt: var(--marke-akzent);
  --k-akzent-weich: var(--marke-weich); --k-akzent-text: var(--marke-text); --k-auf-akzent: var(--marke-auf-akzent);
  --kn-t3: var(--marke-weich);
  /* alte Namen hier neu setzen: an :root ausgewertet blieben sie Orange, waehrend --k-auf-akzent der Kundenfarbe folgt */
  --akzent: var(--marke-akzent); --akzent-weich: var(--marke-weich); --akzent-text: var(--marke-text);
}

/* Dunkelmodus (persoenlich, Cookie k_darstellung) */
html[data-k-modus="dunkel"] {
  color-scheme: dark;
  --k-papier: #0D1015; --k-flaeche: #1E222A; --k-flaeche-2: #252A33; --k-flaeche-3: #2E3440;
  --k-linie: rgba(255, 255, 255, .11); --k-feldrand: #7C8594;
  --k-tinte: #ECEEF2; --k-text: #ECEEF2; --k-text-leise: #E3E6EB; --k-text-3: #E3E6EB; /* 04.11.2026: --k-text-3 vorher #C5CAD2 (4,2 bis 4,4 zu 1 an Zaehlern). 03.11.2026: vorher #B9BEC7 / #A6ACB6, auf blauem Glas 3,0 bis 4,5 zu 1 gemessen */
  --k-akzent-weich: #3A2A20; --k-akzent-text: #FFB27F;
  --k-erfolg: #6BD98A; --k-erfolg-weich: #17301F; --k-warnung: #F2C75A; --k-warnung-weich: #332A12;
  --k-fehler: #FF9C93; --k-fehler-weich: #3A1C1A; --k-info: #8DBBFF; --k-info-weich: #172840; --k-live: #6BD98A;
  --k-leiste-hover: rgba(255, 255, 255, .06); --k-leiste-aktiv: rgba(255, 255, 255, .12);
  --k-leiste-linie: rgba(255, 255, 255, .09); --k-leiste-text: #ECEEF2; --k-leiste-leise: #B9BEC7;
  --kn-glas: rgba(30, 34, 42, .55); --kn-glas-dicht: rgba(30, 34, 42, .82); --kn-glas-voll: rgba(34, 38, 47, .97);
  --kn-rand: rgba(255, 255, 255, .09);
  --kn-kante: rgba(255, 255, 255, .09); --kn-fuell: rgba(255, 255, 255, .06); --kn-fuell-2: rgba(255, 255, 255, .10); --kn-fuell-3: rgba(255, 255, 255, .17);
  --kn-schatten: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 6px 22px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
  --kn-schatten-hoch: 0 16px 44px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --kn-t1: #1E3A6B; --kn-t2: #3A2D66; --kn-t3: #5A3418; --kn-t4: #124A44;
}
html[data-k-modus="dunkel"] body.marke-kunde { --k-akzent-weich: var(--marke-weich-dunkel, #3A2A20); --k-akzent-text: var(--marke-text-dunkel, #FFB27F); --akzent-weich: var(--marke-weich-dunkel, #3A2A20); --akzent-text: var(--marke-text-dunkel, #FFB27F); --kn-t3: var(--marke-weich-dunkel, #5A3418); }
html[data-k-modus="dunkel"] ::selection { background: #5A3418; color: #ECEEF2; }

/* ---------- Hintergrund ---------- */
html, body { background: var(--k-papier); color: var(--k-text); }
.k-tapete { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; translate: calc(var(--kn-px, 0) * 18px) calc(var(--kn-py, 0) * 18px); transition: translate 1.2s cubic-bezier(.2, .8, .2, 1); }
.k-tapete i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; transition: background 2s ease; }
.k-tapete i:nth-child(1) { width: 60vmax; height: 44vmax; left: -12vmax; top: -14vmax; background: var(--kn-t1); animation: kn-treiben 26s ease-in-out infinite alternate; }
.k-tapete i:nth-child(2) { width: 48vmax; height: 40vmax; right: -10vmax; top: 6vmax; background: var(--kn-t2); animation: kn-treiben 32s ease-in-out -8s infinite alternate-reverse; }
.k-tapete i:nth-child(3) { width: 50vmax; height: 36vmax; left: 22vmax; bottom: -18vmax; background: var(--kn-t3); animation: kn-treiben 28s ease-in-out -4s infinite alternate; }
.k-tapete i:nth-child(4) { width: 30vmax; height: 26vmax; left: 4vmax; bottom: 0; background: var(--kn-t4); opacity: .45; animation: kn-treiben 36s ease-in-out -12s infinite alternate-reverse; }
@keyframes kn-treiben { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(6vmax, 4vmax) scale(1.12); } }
html[data-k-modus="dunkel"] .k-tapete i { opacity: .55; }
html[data-k-grund="ruhig"] .k-tapete { opacity: .35; }
html[data-k-grund="weiss"] .k-tapete { display: none; }
html[data-k-grund="weiss"] body { background: #F2F4F7; }
html[data-k-modus="dunkel"][data-k-grund="weiss"] body { background: #14171C; }

/* ---------- Gerust ---------- */
.k-rahmen { position: relative; z-index: 1; background: transparent; gap: 8px; padding: 8px; }
.k-rahmen > .haupt { background: transparent; }
.k-leiste {
  background: var(--kn-glas); -webkit-backdrop-filter: var(--kn-unschaerfe); backdrop-filter: var(--kn-unschaerfe);
  border-radius: var(--kn-r-fenster); box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--k-linie), var(--kn-schatten);
  color: var(--k-leiste-text); border: 0;
}
.k-leiste a, .k-leiste summary { color: var(--k-leiste-text); }
.k-waehler > summary { border: 0; background: var(--kn-fuell); border-radius: 14px; transition: background .2s; }
.k-waehler > summary:hover { background: var(--kn-fuell-2); }
.k-waehler-name { font-weight: 650; }
.k-arbeitsbereich, .k-waehler-unter, .k-gruppe { color: var(--k-leiste-leise); }
.k-waehler-liste { background: var(--kn-glas-voll); border: 0; box-shadow: var(--kn-schatten-hoch); border-radius: 14px; }
.k-waehler-liste a { border-radius: 10px; color: var(--k-text); }
.k-waehler-liste a:hover { background: var(--kn-fuell); }
.k-waehler-liste a[aria-current=page] { background: var(--k-akzent-weich); color: var(--k-akzent-text); }
.k-zeichen { border-radius: 10px; }
.k-teammodus { background: var(--kn-fuell); color: var(--k-leiste-text); border-radius: 12px; }
.k-teammodus:hover { background: var(--kn-fuell-2); }
.k-punkt, .k-bereich > .k-bereich-kopf {
  min-height: 38px; padding: 8px 10px; border-radius: 12px; color: var(--k-leiste-text);
  transition: background .18s, color .18s, transform .45s var(--kn-feder);
}
.k-punkt:hover, .k-bereich > .k-bereich-kopf:hover { background: var(--k-leiste-hover); }
.k-punkt:active { transform: scale(.98); }
.k-punkt[data-aktiv=ja], .marke-kunde .k-punkt[data-aktiv=ja] {
  background: var(--k-leiste-aktiv); color: var(--k-leiste-text);
  box-shadow: inset 0 1px 0 var(--kn-kante), 0 2px 10px rgba(20, 30, 60, .08);
}
.k-punkt[data-aktiv=ja] > .sym, .marke-kunde .k-punkt[data-aktiv=ja] > .sym { color: var(--k-akzent-text); }
.k-bereich > .k-bereich-kopf[data-aktiv=ja] { background: transparent; box-shadow: none; }
.k-punkt .sym { color: var(--k-leiste-leise); }
.k-zaehler { background: var(--k-akzent); color: var(--k-auf-akzent); border-radius: 999px; font-weight: 700; }
.k-unter { min-height: 32px; padding: 6px 10px 6px 40px; border-radius: 10px; color: var(--k-leiste-leise); position: relative; }
.k-unter:hover { background: var(--k-leiste-hover); color: var(--k-leiste-text); }
.k-unter[aria-current], .marke-kunde .k-unter[aria-current] { background: var(--kn-fuell); color: var(--k-leiste-text); font-weight: 600; box-shadow: none; }
.k-unter-punkt { background: var(--kn-fuell-3); }
.k-unter[aria-current] .k-unter-punkt { background: var(--k-akzent); transform: scale(1.3); }
.k-unten { border-top: 1px solid var(--k-leiste-linie); }
.k-symbol, .k-konto-knopf { border-radius: 12px; color: var(--k-leiste-text); }
.k-symbol:hover, .k-konto-knopf:hover { background: var(--k-leiste-hover); }
.k-konto-knopf { background: var(--kn-fuell-2); }
.k-konto-menue, .k-neu-menue { background: var(--kn-glas-voll); box-shadow: var(--kn-schatten-hoch); border: 0; border-radius: 14px; color: var(--k-text); }
.k-branding { color: var(--k-leiste-leise); }
.k-hinweis { color: var(--k-leiste-leise); }

/* Navigation nach der Testseite: sichtbare Gruppen, Unterpunkte unter dem aktiven Punkt, Apps & Module, App-Store */
.kn-nav { display: flex; flex-direction: column; gap: 2px; }
.kn-block { display: flex; flex-direction: column; gap: 1px; }
.kn-block + .kn-block { margin-top: 10px; }
.kn-gruppe { display: flex; align-items: center; gap: 7px; margin: 4px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-leiste-leise); }
.kn-gruppe-farbe { width: 7px; height: 7px; border-radius: 50%; background: var(--k-akzent); flex: none; }
.kn-block[data-bereich="verkaufen"] .kn-gruppe-farbe { background: #2FB36B; }
.kn-block[data-bereich="kunden"] .kn-gruppe-farbe { background: #8C6CF0; }
.kn-block[data-bereich="website"] .kn-gruppe-farbe { background: #3B9BEA; }
.kn-block[data-bereich="apps"] .kn-gruppe-farbe { background: #F262B5; }
.kn-block[data-bereich="team"] .kn-gruppe-farbe { background: var(--k-akzent); }
.kn-block[data-bereich="plattform"] .kn-gruppe-farbe { background: #7A8594; } /* Leitstand Plattform, Zielbild v16 (20.10.2026) */
@keyframes kn-auf { from { opacity: 0; transform: translateY(-4px); } }
.kn-nav .k-unter { padding: 6px 10px 6px 18px; min-height: 30px; font-size: 13px; }
.kn-nav .k-unter-punkt { position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; }
.kn-store { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 10px; border-radius: 14px; color: var(--k-leiste-text); text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--k-akzent) 16%, transparent), rgba(140, 108, 240, .14) 55%, rgba(59, 155, 234, .14)); box-shadow: inset 0 0 0 1px var(--kn-kante); transition: transform .45s var(--kn-feder), box-shadow .2s; }
.kn-store:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--kn-kante), 0 6px 16px rgba(20, 30, 60, .1); }
.kn-store[aria-current] { box-shadow: inset 0 0 0 2px var(--k-akzent); }
.kn-store-zeichen { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(145deg, var(--k-akzent-hover), #F262B5 60%, #8C6CF0); color: #fff; flex: none; }
.kn-store-text { display: flex; flex-direction: column; min-width: 0; }
.kn-store-name { font-weight: 650; font-size: 13px; }
.kn-store-unter { font-size: 11.5px; color: var(--k-leiste-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kopfleiste */
.k-kopf {
  background: var(--kn-glas); -webkit-backdrop-filter: var(--kn-unschaerfe); backdrop-filter: var(--kn-unschaerfe);
  border-radius: var(--kn-r-fenster); box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--k-linie), var(--kn-schatten);
  border: 0; margin-bottom: 8px; top: 0;
}
.k-glied { color: var(--k-text-leise); border-radius: 8px; }
.k-glied[aria-current=page] { color: var(--k-text); font-weight: 650; }
.k-suche { background: var(--kn-fuell-2); border: 0; border-radius: 999px; }
.k-suche-feld { background: transparent; color: var(--k-text); }
.k-demo { background: var(--kn-fuell-2); color: var(--k-text-leise); border-radius: 999px; border: 0; }
.k-bereichsort { background: var(--kn-fuell); color: var(--k-text-leise); border-radius: 999px; border: 0; }
.k-neu-knopf { background: linear-gradient(180deg, var(--k-akzent-hover), var(--k-akzent)); color: var(--k-auf-akzent); border-radius: 12px; border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 14px color-mix(in srgb, var(--k-akzent) 35%, transparent); }
.k-glocke { border-radius: 12px; }
.kn-darstellung { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--kn-fuell); }
.kn-darstellung button { border: 0; background: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--k-text-leise); cursor: pointer; transition: background .2s, color .2s; }
.kn-darstellung button:hover { background: var(--kn-fuell-2); color: var(--k-text); }
.kn-darstellung button[aria-pressed=true] { background: var(--kn-glas-voll); color: var(--k-akzent-text); box-shadow: 0 1px 3px rgba(20, 30, 60, .14); }
/* Kopfleiste nach Vorlage v16 (19.10.2026): breite Suche mit Tastenhinweis, Ansicht mit Beschriftung, Postfach mit Zahl;
   der Arbeitsort (Projekt/Leitstand) steht schon im Kundenkopf der Leiste und entfaellt hier */
.k-bereichsort { display: none; }
.k-suche { position: relative; width: clamp(240px, 30vw, 400px); height: 38px; padding: 0 8px 0 14px; gap: 10px; color: var(--k-text-3); box-shadow: inset 0 0 0 .5px var(--kn-rand); }
.k-suche:focus-within { background: var(--kn-glas-voll); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-akzent) 40%, transparent); }
.k-suche .k-suche-feld { flex: 1; min-width: 0; font-size: 14px; }
.k-suche .k-suche-feld::placeholder { color: var(--k-text-leise); opacity: 1; }
.k-suche .k-suche-absenden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.kn-taste { flex: none; padding: 2px 7px; border-radius: 7px; background: var(--kn-glas-voll); color: var(--k-text-leise); font: 600 11.5px/1.5 var(--k-schrift-text, inherit); box-shadow: inset 0 0 0 .5px var(--kn-rand), 0 1px 0 var(--kn-rand); }
.k-demo { padding: 4px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.kn-darstellung button[data-kn-ansicht] { width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px 0 11px; font: 600 13px/1 var(--k-schrift-text, inherit); }
.kn-darstellung button[data-kn-ansicht][aria-pressed=true] .kn-ansicht-aus, .kn-darstellung button[data-kn-ansicht]:not([aria-pressed=true]) .kn-ansicht-ein { display: none; }
.k-pfad { flex: 0 1 auto; min-width: 0; max-width: 460px; }
/* Ab drei Gliedern entfaellt die Gruppe (Verkaufen, Kunden ...): die Leiste zeigt sie schon, der Platz geht an Bereich und Titel */
.k-pfad li:first-child:has(> .k-glied-text):not(:nth-last-child(-n+2)) { display: none; }
.k-kopf > .luecke { flex: 1 1 0; min-width: 8px; }
.k-pfad ol { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
/* 19.10.2026 abends: vorher flex: none fuer alle Glieder ausser dem letzten; lange Pfade (Rechnungen > Zahlungseingaenge > ...)
   liefen dann ueber die 360 px hinaus unter den Demo-Chip. Jetzt kuerzt zuerst die Gruppe, dann die Mitte, zuletzt der Titel. */
.k-pfad li { min-width: 0; flex: 0 1 auto; }
.k-pfad li:first-child:not(:last-child) { flex-shrink: 6; }
.k-pfad li:not(:first-child):not(:last-child) { flex-shrink: 3; }
.k-pfad .k-glied-pfeil { flex: none; }
.k-pfad .k-glied { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.k-suche { flex: 1 4 260px; width: auto; min-width: 150px; max-width: 400px; }
/* Strg K oeffnet das Befehlsfeld; der Hinweis steht in der Suche, ein eigenes Symbol braucht es nicht */
.k-kopf .k-schnellzugriff { display: none; }
/* Neu in der Kopfleiste nur als Symbol; die Seiten nennen ihre Hauptaktion selbst im Seitenkopf */
.k-kopf .k-neu-knopf { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 12px; }
.k-kopf .k-neu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Zeitraum als Segment im Seitenkopf (Vorlage v16) */
.kn-zeitsegment { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--kn-fuell); box-shadow: inset 0 0 0 .5px var(--kn-rand); }
.kn-zeitsegment a { padding: 8px 14px; border-radius: 10px; color: var(--k-text-leise); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.kn-zeitsegment a:hover { color: var(--k-text); background: var(--kn-fuell-2); }
.kn-zeitsegment a[aria-current] { background: var(--kn-glas-voll); color: var(--k-text); box-shadow: 0 1px 3px rgba(20,30,60,.12), inset 0 0 0 .5px var(--kn-rand); }
.kn-zeit-mehr > summary.knopf { padding-left: 12px; padding-right: 10px; gap: 4px; }
@media (max-width: 640px) { .kn-zeitsegment a { padding: 7px 10px; font-size: 13px; } }

/* Seitenleiste nach Vorlage v16: Kundenkopf ohne Bereichszeile, dichtere Punkte, untere Leiste nur mit Symbolen */
.k-arbeitsbereich { display: none; }
.k-waehler > summary { padding: 7px 10px; gap: 12px; }
.k-zeichen { width: 40px; height: 40px; border-radius: 12px; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(20,30,60,.14); }
.k-waehler-name { font-size: 16px; letter-spacing: -.01em; }
.k-waehler-unter { font-size: 12px; }
/* Der Leitstand steht im Website-Waehler (Arbeitsbereich); die eigene Pille kostete Platz in der Leiste */
.k-teammodus { display: none; }
.k-punkt, .k-bereich > .k-bereich-kopf { height: 28px; min-height: 28px; padding: 0 10px; gap: 11px; font-size: 14.5px; }
/* Uebersicht der Leiste (Tim 19.10.2026): Kopf (Website-Waehler) und untere Leiste stehen fest, nur die Navigation dazwischen
   rollt, falls ein aufgeklapptes Untermenue mehr Platz braucht; bei 900 px Fensterhoehe passen alle Punkte ohne Rollen */
@media (min-width: 901px) {
  .k-leiste { overflow: hidden; }
  .k-klapp { flex: 1 1 auto; min-height: 0; }
  .kn-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 1px; scrollbar-width: thin; }
}
/* App-Store als normaler Punkt der Leiste (eine Zeile, gleiche Hoehe wie die Punkte) */
.kn-store { min-height: 28px; padding-top: 3px; padding-bottom: 3px; }
.kn-store .kn-store-unter { display: none; }
/* Abstand zwischen Gruppen nur ueber den Gruppenkopf (vorher doppelt: Block 10 px + Kopf 8 px) */
.kn-nav > .kn-block + .kn-block { margin-top: 0; }
.kn-nav > .kn-store { margin-top: 6px; }
.kn-store .kn-store-zeichen { width: 22px; height: 22px; border-radius: 7px; }
.k-punkt > .sym { width: 18px; height: 18px; }
.kn-gruppe { margin: 7px 10px 1px; }
.kn-block:first-child .kn-gruppe { margin-top: 4px; }
.k-favoriten .k-unter { padding-left: 30px; }
.k-unten .k-service-text { display: none; }
.k-unten .k-werkzeuge { gap: 6px; }
/* Unterer Teil kompakt: Konto, Symbole und "Bereitgestellt von hnvr.me" (bleibt immer sichtbar) */
.k-leiste .k-unten { padding-top: 6px; }
.k-unten .k-werkzeuge > :is(.k-symbol, .k-konto > summary) { width: 34px; height: 34px; min-height: 34px; }
.k-unten .k-branding { margin-top: 6px; }
.k-unten .k-einklappen { margin-left: auto; }
.k-kopf > * { min-width: 0; }
.k-kopf > :is(.k-symbol, .k-neu, .kn-darstellung, .k-stern-form, .k-demo) { flex: none; }
.k-kopf > .k-pfad { min-width: 72px; }
.k-kopf { column-gap: 8px; padding-left: 22px; padding-right: 18px; }
@media (max-width: 1360px) { .kn-ansicht-text { display: none; } .kn-darstellung button[data-kn-ansicht] { width: 34px; padding: 0; justify-content: center; } }
@media (max-width: 1100px) { .kn-taste, .kn-ansicht-text { display: none; } .kn-darstellung button[data-kn-ansicht] { width: 34px; padding: 0; justify-content: center; } .k-suche { min-width: 150px; } }

/* Seitenkopf */
.seitenkopf { background: transparent; border: 0; }
.seitenkopf h1 { font-size: 30px; font-weight: 750; letter-spacing: -.03em; color: var(--k-text); }
.seitenkopf .unter { color: var(--k-text-leise); }
/* Titel und Bedienung in einer Zeile (Vorlage v16); erst wenn der Platz nicht reicht, rutschen die Aktionen darunter */
.seitenkopf { align-items: center; }
.seitenkopf-text { flex: 1 1 260px; min-width: 0; }
.seitenkopf .aktionen { flex: 0 1 auto; justify-content: flex-end; align-items: center; }
.seitenkopf .aktionen [data-kn-dash-anpassen] { order: 2; }
.seitenkopf .aktionen .ks-menue { order: 3; }
/* Bereichsreiter und flaches Untermenue stehen immer in eigener Zeile unter Titel und Aktionen */
.seitenkopf > :is(.bereichsreiter, .untermenue-flach) { order: 10; }
.seitenkopf > .kn-unterreiter { order: 9; flex: 1 1 auto; min-width: 0; }
/* Stehen Unterpunkte und Bereichsreiter beide da, teilen sie sich eine Zeile: Unterpunkte links, Bereichsreiter rechts (vorher drei
   Reiterzeilen uebereinander, z. B. Bestellungen) */
.seitenkopf:has(> .kn-unterreiter) > .bereichsreiter { order: 9; margin-left: auto; margin-right: 0; }
.kn-unterreiter { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 2px 0 -4px; }
.kn-unterreiter::-webkit-scrollbar { display: none; }
.kn-unterreiter a { flex: none; padding: 8px 14px; border-radius: 12px; color: var(--k-text-leise); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.kn-unterreiter a:hover { background: var(--kn-fuell); color: var(--k-text); }
.kn-unterreiter a[aria-current] { background: var(--kn-glas-voll); color: var(--k-text); box-shadow: 0 1px 3px rgba(20,30,60,.12), inset 0 0 0 .5px var(--kn-rand); }
.seitenkopf:has(> :is(.bereichsreiter, .untermenue-flach))::after { content: ""; flex-basis: 100%; order: 8; height: 0; }
.seitenkopf:has(> .kn-unterreiter)::after { content: ""; flex-basis: 100%; order: 8; height: 0; }
.untermenue-flach a { border-radius: 999px; background: var(--kn-fuell); color: var(--k-text); border: 0; }
.untermenue-flach a[aria-current] { background: var(--k-text); color: var(--k-flaeche); }

/* ---------- Grundbausteine ---------- */
.karte {
  background: var(--kn-glas-dicht); -webkit-backdrop-filter: var(--kn-unschaerfe); backdrop-filter: var(--kn-unschaerfe);
  border: 0; border-radius: var(--kn-r-karte);
  box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--k-linie), 0 4px 18px rgba(20, 30, 60, .07);
  color: var(--k-text);
}
html[data-k-modus="dunkel"] .karte { box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--k-linie), 0 6px 22px rgba(0, 0, 0, .35); }
.karte-kopf { border-color: var(--k-linie); }
.knopf {
  border-radius: var(--kn-r-knopf); border: 0; background: var(--kn-glas-voll); color: var(--k-text);
  box-shadow: inset 0 0 0 1px var(--k-linie), 0 1px 2px rgba(20, 30, 60, .06);
  transition: transform .45s var(--kn-feder), box-shadow .2s, background .2s;
}
.knopf:hover { box-shadow: inset 0 0 0 1px var(--kn-fuell-3), 0 4px 12px rgba(20, 30, 60, .1); }
.knopf:active { transform: scale(.96); }
.knopf.primaer, .knopf.akzent {
  background: linear-gradient(180deg, var(--k-akzent-hover), var(--k-akzent)); color: var(--k-auf-akzent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 4px 14px color-mix(in srgb, var(--k-akzent) 35%, transparent);
}
.knopf.primaer:hover, .knopf.akzent:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px color-mix(in srgb, var(--k-akzent) 45%, transparent); }
.knopf-rund { border-radius: 999px; }
:where(input, select, textarea).feld { background: var(--k-flaeche); color: var(--k-text); border: 1px solid var(--k-linie); border-radius: var(--kn-r-knopf); }
:where(input, select, textarea).feld:hover { border-color: var(--k-feldrand); }
.chip { border-radius: 999px; background: var(--kn-fuell); color: var(--k-text); border: 0; }
.pille { border-radius: 999px; }
.meldung { border-radius: 14px; border: 0; }
.meldung.ok { background: var(--k-erfolg-weich); color: var(--k-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-erfolg) 30%, transparent); }
.meldung.fehler { background: var(--k-fehler-weich); color: var(--k-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-fehler) 35%, transparent); }
.leise { color: var(--k-text-leise); }
.sehr-leise { color: var(--k-text-3); }
:where(.tabelle, table) :where(th) { color: var(--k-text-leise); }
:where(.tabelle, table) tbody tr:hover { background: var(--kn-fuell); }
.liste-zeile:hover { background: var(--kn-fuell); }
.k-befehl { background: var(--kn-glas-dicht); -webkit-backdrop-filter: var(--kn-unschaerfe); backdrop-filter: var(--kn-unschaerfe); border: 0; border-radius: 24px; box-shadow: var(--kn-schatten-hoch); color: var(--k-text); }
.k-befehl::backdrop { background: rgba(10, 15, 30, .2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.k-befehl-eintrag[aria-selected=true], .k-befehl-eintrag:focus { background: var(--k-akzent); color: var(--k-auf-akzent); }
.seitenabschluss { color: var(--k-text-3); }

/* Filter- und Statusleisten aller Seiten als Segment (Testseite v16): ruhige Fuellung, aktiv in Textfarbe auf Grundfarbe.
   Ersetzt die festen Flaechen der alten Pakete (plattform.css: #E2E8E9 und --tinte/--leiste-text), die im Dunkelmodus hell auf hell standen. */
:is(.statusreiter, .rb-reiter, .untermenue-flach, .reiter) a { background: var(--kn-fuell); color: var(--k-text-leise); border-radius: 999px; }
:is(.statusreiter, .rb-reiter, .untermenue-flach, .reiter) a:hover { background: var(--kn-fuell-2); color: var(--k-text); }
:is(.statusreiter, .rb-reiter, .untermenue-flach, .reiter) a:is([aria-current="page"], [aria-current="true"]) { background: var(--k-text); color: var(--k-papier); }
.chip:is([aria-pressed="true"], [aria-current="page"], [aria-current="true"], .aktiv) { background: var(--k-text); color: var(--k-papier); }

/* Alte Bausteine mit --k-tinte als Flaeche und --k-leiste-text als Schrift (die alte Leiste war dunkel): Schrift = Papier */
:is(.kd-segchip, .kp-chip, .pf-chip)[aria-current], .kp-kasten.kp-an, .pf-blase.pf-raus, .aa-filter a[aria-current=page] { color: var(--k-papier); }
.konto-avatar { background: var(--kn-fuell-3); color: var(--k-text); }

/* Messrunde 3 (18.10.): restliche feste Paare der alten Pakete */
.k-leiste .k-symbol[aria-current] { color: var(--k-akzent-text); }
.k-leiste .k-symbol[aria-current] .k-service-text { color: var(--k-leiste-text); }
/* Schrift auf Akzentflaechen der alten Pakete (dort var(--tinte) auf var(--akzent); --tinte wird im Dunkelmodus hell) */
:is(.ks-zahl, .seitennavigation .knopf-rund.dunkel, .ab-plan.hervor .pille, .ab-zeichen.dunkel, .mail-schritte li.jetzt .mail-schritt-zahl,
  .mk-schritte li.aktiv .mk-schritt-nr, .mk-mini-knopf, .mk-symbol[aria-current='page'] .mk-symbol-zeichen, .mk-el-knopfbild, .kundenmarke-zeichen,
  .wechsler-liste a[aria-current='page'], .nav-punkt[data-aktiv='ja'], .aufgabe-symbol, .ansicht-zeichen, .zugang-punkte li:nth-child(2) .zugang-zeichen,
  .ma-knoten.mitte, .bl-ablauf li::before, .bl-schritte li.aktiv .bl-schritt-nr, .bl-avatar-zeichen, .cms2-symbol, .rb-balken-symbol,
  .st-pille[aria-current='true'], .st-geraete a[aria-current='page'], .rb-mini-knopf.primaer, .rb-ansicht-streifen, .rd-schritt.jetzt .rd-schritt-nr,
  .km-marke, .st-vorschau [data-km-zahl]::after, .td-leiste-punkt[aria-current='true'] .td-leiste-symbol) { color: var(--k-auf-akzent); }
/* Fest weisse Schrift auf --tinte/--k-tinte (die Tinte wird im Dunkelmodus hell): Schrift = Papier */
:is(.ap-band, .ka-chip[aria-current='true'], .ka-haken.ka-an, .ka-avatar:not(.ka-team), .kb-zieh-tipp, .kb-chip[aria-current='true'], .wm-chip[aria-current='page'],
  .wm-schritt.fertig .wm-schritt-zeichen, .ks-pille[aria-current='true'], .kst-tag, .lt-pille[aria-current], .kv-band, .kv-band a,
  .bl-schritte li.aktiv, .bl-chips a[aria-current]) { color: var(--k-papier); }
.suchfenster-fuss { background: var(--kn-fuell); }
.mk-strich { color: var(--k-text-3); }

/* Seiten mit eigenen Flaechen (alte Pakete) bekommen Glas statt Weiss */
:where(.k-rahmen) :where(.kachel, .kpi, .kennzahl, .panel) { border-radius: var(--kn-r-karte); }

/* ---------- Dashboard-Baukasten (W2): 12-Spalten-Raster, Groessen s/m/h/l/xl, Anpassen ---------- */
.kn-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kn-w { grid-column: span 6; min-width: 0; position: relative; }
.kn-w[data-gr="s"] { grid-column: span 3; }
.kn-w[data-gr="m"] { grid-column: span 4; }
.kn-w[data-gr="h"] { grid-column: span 6; }
.kn-w[data-gr="l"] { grid-column: span 8; }
.kn-w[data-gr="xl"] { grid-column: 1 / -1; }
@media (max-width: 1180px) { .kn-w[data-gr="s"] { grid-column: span 6; } .kn-w[data-gr="m"], .kn-w[data-gr="h"] { grid-column: span 6; } .kn-w[data-gr="l"] { grid-column: 1 / -1; } }
@media (max-width: 760px) { .kn-dash { gap: 12px; } .kn-w, .kn-w[data-gr] { grid-column: 1 / -1; } }
.kn-w > :is(section, nav, div):not(.kn-w-werkzeug) { height: 100%; }
.kn-dash[data-anpassen] .kn-w { outline: 2px dashed color-mix(in srgb, var(--k-akzent) 55%, transparent); outline-offset: 4px; border-radius: var(--kn-r-karte); cursor: grab; }
.kn-dash[data-anpassen] .kn-w > :not(.kn-w-werkzeug) { pointer-events: none; }
.kn-w.kn-zieht { opacity: .45; }
.kn-w-werkzeug { display: none; position: absolute; top: -12px; right: 8px; z-index: 3; gap: 4px; }
.kn-dash[data-anpassen] .kn-w-werkzeug { display: flex; }
.kn-w-werkzeug button { min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--kn-glas-voll); color: var(--k-text); box-shadow: var(--kn-schatten); font: 600 12px/1 var(--k-schrift-text); cursor: pointer; }
.kn-w-werkzeug button:hover, .kn-w-werkzeug button:focus-visible { background: var(--k-text); color: var(--k-papier); }
.kn-w-griff { cursor: grab; }
.kn-dash-aus[hidden] { display: none; }
.kn-dash-aus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--k-text-leise); }

/* Lage: grosser Satz aus echten Daten */
.kn-lage { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--kn-r-karte); background: linear-gradient(135deg, color-mix(in srgb, var(--k-akzent) 16%, var(--kn-glas-dicht)), var(--kn-glas-dicht)); box-shadow: var(--kn-schatten); }
.kn-lage-ort { margin: 0; font: 600 12px/16px var(--k-schrift-text); letter-spacing: .04em; text-transform: uppercase; color: var(--k-text-leise); }
.kn-lage-satz { margin: 0; font: 600 26px/1.2 var(--k-schrift-titel, inherit); letter-spacing: -.4px; color: var(--k-text); text-wrap: balance; }
.kn-lage-zusatz { margin: 0; color: var(--k-text-leise); }
.kn-lage-zusatz a { color: var(--k-akzent-text); }
@media (prefers-reduced-motion: no-preference) { .kn-dash .kn-w { animation: kn-auf .38s var(--kn-feder, ease) both; } .kn-dash .kn-w:nth-child(2) { animation-delay: 40ms; } .kn-dash .kn-w:nth-child(3) { animation-delay: 80ms; } .kn-dash .kn-w:nth-child(n+4) { animation-delay: 120ms; } }

/* ---------- Ablauf-Stufen (Verkaufen u. a.): jede Stufe ein Reiter mit Zahl, als Fortschrittsband ---------- */
.kn-stufen { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; padding: 6px; border-radius: 18px; background: var(--kn-glas); box-shadow: var(--kn-schatten); width: fit-content; max-width: 100%; }
.kn-stufen a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; color: var(--k-text-leise); text-decoration: none; font: 600 13px/1 var(--k-schrift-text); }
.kn-stufen a:hover { background: var(--kn-fuell); color: var(--k-text); }
.kn-stufen a[aria-current="page"] { background: var(--k-text); color: var(--k-papier); }
.kn-stufe-zahl { min-width: 22px; padding: 3px 7px; border-radius: 999px; background: var(--kn-fuell-2); color: inherit; text-align: center; font-variant-numeric: tabular-nums; }
.kn-stufen a[aria-current="page"] .kn-stufe-zahl { background: color-mix(in srgb, var(--k-papier) 22%, transparent); }
.kn-stufen a[data-stufe="versenden"]:not([aria-current]):not([data-leer]) .kn-stufe-zahl, .kn-stufen a[data-stufe="zahlung"]:not([aria-current]):not([data-leer]) .kn-stufe-zahl { background: var(--k-akzent); color: var(--k-auf-akzent); }
ul.kn-korb-gruppe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* ---------- Arbeitskorb (Neudenken der Ablaeufe): Faelle links, geoeffneter Fall rechts ---------- */
.kn-korb { display: grid; grid-template-columns: minmax(260px, min(38%, 420px)) minmax(0, 1fr); gap: 20px; align-items: start; } /* 03.11.2026: bei schmalem Inhalt blieb dem Fall 211 px */
.kn-korb-liste { display: grid; gap: 18px; }
.kn-korb-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kn-korb-gruppe-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 12px/16px var(--k-schrift-text); letter-spacing: .04em; text-transform: uppercase; color: var(--k-text-leise); }
.kn-korb-zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--kn-fuell-2); color: var(--k-text); letter-spacing: 0; }
.kn-korb-leer { display: flex; gap: 10px; align-items: center; padding: 18px; border-radius: var(--kn-r-karte); background: var(--kn-glas-dicht); color: var(--k-text); }
.kn-fall-zeile { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--kn-glas); color: var(--k-text); text-decoration: none; box-shadow: var(--kn-schatten); transition: background-color .15s, transform .2s var(--kn-feder, ease); }
.kn-fall-zeile:hover { background: var(--kn-glas-dicht); transform: translateX(2px); }
.kn-fall-zeile[aria-current="true"] { background: var(--kn-glas-voll); box-shadow: inset 3px 0 0 var(--k-akzent), var(--kn-schatten-hoch); }
.kn-fall-sym { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--kn-fuell-2); color: var(--k-text); }
.kn-fall-zeile[data-art="bestellung"] .kn-fall-sym { background: color-mix(in srgb, #2FB36B 22%, transparent); }
.kn-fall-zeile[data-art="buchung"] .kn-fall-sym { background: color-mix(in srgb, #3B9BEA 22%, transparent); }
.kn-fall-zeile[data-art="rechnung"] .kn-fall-sym { background: color-mix(in srgb, #F2C75A 30%, transparent); }
.kn-fall-zeile[data-art="anfrage"] .kn-fall-sym, .kn-fall-zeile[data-art="mitglieder"] .kn-fall-sym { background: color-mix(in srgb, #8C6CF0 22%, transparent); }
.kn-fall-text { display: grid; gap: 2px; min-width: 0; }
.kn-fall-titel { font: 600 14px/19px var(--k-schrift-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-fall-unter { font-size: 12px; color: var(--k-text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-fall-schritt { font: 600 12px/1 var(--k-schrift-text); padding: 6px 10px; border-radius: 999px; background: var(--kn-fuell-2); color: var(--k-text); white-space: nowrap; }
.kn-fall-schritt.faellig { background: var(--k-akzent); color: var(--k-auf-akzent); }
.kn-fall { position: sticky; top: 84px; display: grid; gap: 16px; padding: 24px; border-radius: 24px; background: var(--kn-glas-dicht); -webkit-backdrop-filter: var(--kn-unschaerfe); backdrop-filter: var(--kn-unschaerfe); box-shadow: var(--kn-schatten-hoch); min-height: 320px; }
.kn-fall-hinweis { display: grid; place-items: center; gap: 12px; text-align: center; padding: 48px 24px; color: var(--k-text-leise); }
.kn-fall-hinweis strong { color: var(--k-text); }
.kn-fall-zurueck { display: none; align-items: center; gap: 4px; color: var(--k-akzent-text); text-decoration: none; font-weight: 600; }
.kn-fall-kopf { display: grid; min-width: 0; }
.kn-fall-art { margin: 0; font: 600 12px/16px var(--k-schrift-text); letter-spacing: .04em; text-transform: uppercase; color: var(--k-text-leise); }
.kn-fall-name { margin: 2px 0 0; font: 600 24px/1.2 var(--k-schrift-titel, inherit); letter-spacing: -.3px; color: var(--k-text); }
.kn-fall-zeile2 { margin: 4px 0 0; color: var(--k-text-leise); }
.kn-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; counter-reset: s; }
.kn-schritte li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--kn-fuell); color: var(--k-text-leise); }
.kn-schritte li.erledigt { color: var(--k-text); }
.kn-schritte li.jetzt { background: color-mix(in srgb, var(--k-akzent) 14%, var(--kn-fuell)); color: var(--k-text); box-shadow: inset 0 0 0 1.5px var(--k-akzent); }
.kn-schritt-punkt { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--k-schrift-text); background: var(--kn-fuell-3); color: var(--k-text); }
.kn-schritte li.erledigt .kn-schritt-punkt { background: var(--k-erfolg); color: var(--k-papier); }
.kn-schritte li.jetzt .kn-schritt-punkt { background: var(--k-akzent); color: var(--k-auf-akzent); }
.kn-schritt-text { display: grid; gap: 1px; min-width: 0; }
.kn-schritt-text span { font-size: 12px; color: var(--k-text-leise); }
.kn-fall-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kn-fall-block { padding: 14px 16px; border-radius: 16px; background: var(--kn-fuell); display: grid; gap: 6px; align-content: start; }
.kn-fall-block h3, .kn-naechster h3 { margin: 0 0 4px; font: 600 13px/18px var(--k-schrift-text); color: var(--k-text); }
.kn-artikel { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kn-artikel li, .kn-summe { display: flex; justify-content: space-between; gap: 12px; }
.kn-summe { margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--k-linie); }
.kn-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kn-pillen { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; }
.kn-naechster { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--k-akzent) 9%, var(--kn-glas-voll)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-akzent) 35%, transparent); }
.kn-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.kn-naechster-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kn-notiz { display: flex; gap: 8px; }
.kn-notiz input { flex: 1; min-width: 0; }
.kn-fall-mehr { margin: 0; }
.kn-angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--kn-fuell); }
.kn-angaben dt { color: var(--k-text-leise); }
.kn-angaben dd { margin: 0; color: var(--k-text); }
.kn-gross { font: 600 24px/1.2 var(--k-schrift-titel, inherit); margin: 0; }
.kn-erledigt { display: flex; }
.kn-weniger summary { cursor: pointer; color: var(--k-text-leise); font-weight: 600; padding: 6px 0; }
.kn-weniger[open] summary { color: var(--k-text); }
.kn-anwesend { display: flex; align-items: flex-end; gap: 10px; }
.kn-feld-klein { display: grid; gap: 4px; width: 110px; }
.kn-naechster textarea { width: 100%; }
.kn-fall-mehr a { display: inline-flex; align-items: center; gap: 6px; color: var(--k-akzent-text); font-weight: 600; text-decoration: none; }
@media (max-width: 980px) { .kn-korb { grid-template-columns: minmax(0, 1fr); } .kn-fall { position: static; } .kn-korb.mit-fall .kn-korb-liste { display: none; } .kn-korb:not(.mit-fall) .kn-fall { display: none; } .kn-fall-zurueck { display: inline-flex; } }
@media (max-width: 640px) { .kn-fall { padding: 18px; } .kn-schritte { grid-auto-flow: row; } .kn-fall-raster { grid-template-columns: 1fr; } .kn-notiz { flex-direction: column; } }

/* ---------- Startseite nach Vorlage v16: Ihr Tag, Tagesband, Zu erledigen, Zuletzt, Kennzahlen, Abkuerzungen ---------- */
.kn-tag { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 28px; border-radius: 22px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--k-akzent) 14%, var(--kn-glas-dicht)), var(--kn-glas-dicht) 60%); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--kn-rand), 0 4px 18px rgba(20,30,60,.08); }
.kn-tag-text { min-width: 0; }
.kn-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k-text-3); }
.kn-tag-satz { margin: 0; font-size: clamp(20px, 1.9vw, 25px); font-weight: 650; line-height: 1.28; letter-spacing: -.02em; color: var(--k-text); }
.kn-tag-satz em { font-style: normal; color: var(--k-akzent-text); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--k-akzent) 26%, transparent) 62%); padding: 0 2px; border-radius: 3px; }
.kn-tag-zusatz { margin: 10px 0 0; color: var(--k-text-leise); }
.kn-band { position: relative; height: 150px; }
.kn-band-linie { position: absolute; left: 0; right: 0; top: 64px; height: 4px; border-radius: 4px; background: var(--kn-fuell-2); }
.kn-band-vergangen { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--k-akzent); }
.kn-band-jetzt { position: absolute; top: 50%; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; border-radius: 50%; background: var(--k-akzent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--k-akzent) 25%, transparent), 0 0 0 2px var(--kn-glas-voll) inset; }
.kn-band-skala { position: absolute; left: 0; right: 0; top: 82px; display: flex; justify-content: space-between; font-size: 11px; color: var(--k-text-3); font-variant-numeric: tabular-nums; }
.kn-band-e { position: absolute; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; max-width: 150px; text-align: center; font-size: 12px; color: var(--k-text); }
.kn-band-e b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kn-band-e span { color: var(--k-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.kn-band-e.oben { top: 6px; }
.kn-band-e.unten { top: 98px; }
.kn-band-e::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #3B9BEA; box-shadow: 0 0 0 3px var(--kn-glas-voll); }
.kn-band-e.oben::after { top: 53px; }
.kn-band-e.unten::after { top: -40px; }
.kn-band-e.vorbei { opacity: .62; }
.kn-band-e.vorbei::after { background: var(--k-erfolg); }
.kn-band-leer { position: absolute; left: 0; right: 0; top: 100px; margin: 0; text-align: center; color: var(--k-text-3); }
.kn-band-e.p0, .kn-band-jetzt.p0 { left: 0%; } .kn-band-vergangen.p0 { width: 0%; }
.kn-band-e.p8, .kn-band-jetzt.p8 { left: 8.333%; } .kn-band-vergangen.p8 { width: 8.333%; }
.kn-band-e.p17, .kn-band-jetzt.p17 { left: 16.667%; } .kn-band-vergangen.p17 { width: 16.667%; }
.kn-band-e.p25, .kn-band-jetzt.p25 { left: 25%; } .kn-band-vergangen.p25 { width: 25%; }
.kn-band-e.p33, .kn-band-jetzt.p33 { left: 33.333%; } .kn-band-vergangen.p33 { width: 33.333%; }
.kn-band-e.p42, .kn-band-jetzt.p42 { left: 41.667%; } .kn-band-vergangen.p42 { width: 41.667%; }
.kn-band-e.p50, .kn-band-jetzt.p50 { left: 50%; } .kn-band-vergangen.p50 { width: 50%; }
.kn-band-e.p58, .kn-band-jetzt.p58 { left: 58.333%; } .kn-band-vergangen.p58 { width: 58.333%; }
.kn-band-e.p67, .kn-band-jetzt.p67 { left: 66.667%; } .kn-band-vergangen.p67 { width: 66.667%; }
.kn-band-e.p75, .kn-band-jetzt.p75 { left: 75%; } .kn-band-vergangen.p75 { width: 75%; }
.kn-band-e.p83, .kn-band-jetzt.p83 { left: 83.333%; } .kn-band-vergangen.p83 { width: 83.333%; }
.kn-band-e.p92, .kn-band-jetzt.p92 { left: 91.667%; } .kn-band-vergangen.p92 { width: 91.667%; }
.kn-band-e.p100, .kn-band-jetzt.p100 { left: 100%; } .kn-band-vergangen.p100 { width: 100%; }

.kn-band-e.p0 { transform: none; }
.kn-band-e.p100 { transform: translateX(-100%); }
.kn-karte-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kn-karte-kopf h2 { margin: 0; font-size: 16px; font-weight: 650; }
.kn-karte-kopf > :last-child { margin-left: auto; }
.kn-karte-kopf a.pille { text-decoration: none; }
.kn-mehr { display: inline-flex; align-items: center; gap: 4px; color: var(--k-akzent-text); font-weight: 600; text-decoration: none; }
.karte.kn-todo, .karte.kn-zuletzt { padding: 20px; }
.kn-todo-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kn-todo-kachel { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--kn-fuell); color: var(--k-text); text-decoration: none; transition: transform .45s var(--kn-feder, ease), background .2s; }
.kn-todo-kachel:hover { transform: translateY(-2px); background: var(--kn-fuell-2); }
.kn-todo-kachel b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kn-todo-kachel span { font-weight: 650; }
.kn-todo-kachel small { color: var(--k-text-leise); font-size: 12px; }
.kn-todo-kachel[data-null] b { color: var(--k-erfolg); }
.kn-zuletzt-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.kn-zuletzt-liste li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--k-linie); }
.kn-zuletzt-liste li:first-child { border-top: 0; }
.kn-zuletzt-sym { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--kn-fuell-2); color: var(--k-text-leise); }
.kn-zuletzt-sym.verkaufen { background: color-mix(in srgb, #2FB36B 18%, transparent); color: var(--k-erfolg); }
.kn-zuletzt-sym.kunden { background: color-mix(in srgb, #8C6CF0 18%, transparent); color: var(--k-text); }
.kn-zuletzt-liste a { display: grid; gap: 1px; color: var(--k-text); text-decoration: none; min-width: 0; }
.kn-zuletzt-liste a b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-zuletzt-liste a small { color: var(--k-text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-zuletzt-wann { font-size: 12px; color: var(--k-text-3); white-space: nowrap; }
.kn-w[data-w="kennzahlen"] .kz-reihe { gap: 12px; }
.kn-w[data-w="kennzahlen"] .kz { padding: 18px 20px; border: 0; border-radius: 18px; background: var(--kn-glas-dicht); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--kn-rand), 0 4px 18px rgba(20,30,60,.08); transition: transform .45s var(--kn-feder, ease); }
.kn-w[data-w="kennzahlen"] .kz:hover { transform: translateY(-2px); }
.kn-w[data-w="kennzahlen"] .kz-ziel { color: var(--k-text-leise); font-weight: 600; font-size: 12.5px; }
.kn-w[data-w="kennzahlen"] .kz-wert { font-size: 28px; font-weight: 750; letter-spacing: -.025em; color: var(--k-text); font-variant-numeric: tabular-nums; }
.kn-w[data-w="kennzahlen"] .kz-mini-linie { stroke: var(--k-akzent); }
.kn-w[data-w="schnell"] .ks-schnell-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.kn-w[data-w="schnell"] .ks-schnell-kachel { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; border-radius: 16px; background: var(--kn-fuell); color: var(--k-text); font-weight: 600; font-size: 12.5px; text-align: center; text-decoration: none; transition: transform .45s var(--kn-feder, ease), background .2s; }
.kn-w[data-w="schnell"] .ks-schnell-kachel:hover { transform: translateY(-2px); background: var(--kn-fuell-2); }
.kn-w[data-w="schnell"] .ks-schnell-kachel .sym { width: 38px; height: 38px; padding: 9px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #3B9BEA, #2a7fd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(20,30,60,.16); }
.kn-w[data-w="schnell"] li:nth-child(5n+1) .sym { background: linear-gradient(145deg, var(--k-akzent-hover), var(--k-akzent)); }
.kn-w[data-w="schnell"] li:nth-child(5n+3) .sym { background: linear-gradient(145deg, #2FB36B, #23935a); }
.kn-w[data-w="schnell"] li:nth-child(5n+4) .sym { background: linear-gradient(145deg, #8C6CF0, #7152d8); }
.kn-w[data-w="schnell"] li:nth-child(5n+5) .sym { background: linear-gradient(145deg, #F262B5, #d94b9c); }
@media (max-width: 1100px) { .kn-tag { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .kn-todo-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kn-band { display: none; } .kn-tag { padding: 20px; } }

/* Persoenliche Ansicht "Einfach": Kennzahlen und Diagramme weg, Lage, Abkuerzungen und Listen bleiben */
html[data-k-ansicht="einfach"] :where(.kennzahlen, .k-kennzahlen, .kpi-reihe, .diagramm-karte, .k-diagramm, [data-k-einfach-weg]) { display: none !important; }

/* Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .k-tapete, .k-tapete i { animation: none; transition: none; translate: none; }
}

/* Modul-Uebersicht: Verzeichnis aller Aufgaben zugeklappt, bis gesucht wird */
.kw-aufklapp > summary { width: fit-content; cursor: pointer; list-style: none; }
.kw-aufklapp > summary::-webkit-details-marker { display: none; }
.kw-aufklapp[open] > summary { margin-bottom: 14px; }

/* Seitenwechsel spuerbar (19.10.2026): Ladebalken oben, solange der Server rechnet (k-neu.js setzt aria-busy), und eine kurze
   Ueberblendung des Inhalts; Leiste und Kopfleiste bleiben dabei stehen */
html[aria-busy="true"] body::after { content: ""; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 3px; transform-origin: left;
  background: linear-gradient(90deg, var(--k-akzent), color-mix(in srgb, var(--k-akzent) 55%, #fff)); animation: kn-laden 1.4s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes kn-laden { from { transform: scaleX(.05); } to { transform: scaleX(.85); } }
.k-leiste { view-transition-name: k-leiste; }
.k-kopf { view-transition-name: k-kopf; }
::view-transition-old(root) { animation: kn-raus .14s ease-in both; }
::view-transition-new(root) { animation: kn-rein .22s cubic-bezier(.2,.7,.2,1) both; }
@keyframes kn-raus { to { opacity: 0; } }
@keyframes kn-rein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { html[aria-busy="true"] body::after { animation: none; transform: scaleX(.6); } }

/* ---------- Bereich neu (19.10.2026, BEREICHE.md): Jetzt zu tun, Kennzahlen, Listenkarte ---------- */
.b-jetzt { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; }
.b-jetzt-kachel { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: var(--k-text);
  background: var(--kn-glas-dicht); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--kn-rand), 0 4px 18px rgba(20,30,60,.08); transition: transform .45s var(--kn-feder, ease), box-shadow .2s; }
.b-jetzt-kachel:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--kn-rand), 0 10px 28px rgba(20,30,60,.12); }
.b-jetzt-sym { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--k-akzent); color: var(--k-auf-akzent); }
/* Standardton (BJetzt ton="akzent"): Grundregel .b-jetzt-sym gilt; eigene Regel, damit die Klasse nicht ohne Regel steht */
.b-jetzt-kachel.ton-akzent .b-jetzt-sym { background: var(--k-akzent); color: var(--k-auf-akzent); }
.b-jetzt-kachel.ton-warn .b-jetzt-sym { background: var(--k-warnung-weich); color: var(--k-warnung); }
.b-jetzt-kachel.ton-info .b-jetzt-sym { background: var(--k-info-weich); color: var(--k-text); }
.b-jetzt-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.b-jetzt-zeile { font-weight: 650; font-size: 15px; }
.b-jetzt-zeile b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-right: 4px; font-variant-numeric: tabular-nums; }
.b-jetzt-text small { color: var(--k-text-leise); font-size: 12.5px; }
.b-jetzt-pfeil { color: var(--k-text-3); transition: transform .3s var(--kn-feder, ease); }
.b-jetzt-kachel:hover .b-jetzt-pfeil { transform: translateX(3px); color: var(--k-text); }
.b-jetzt-leer { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border-radius: 18px; background: var(--kn-fuell); color: var(--k-text-leise); font-weight: 600; }
.b-jetzt-leer .sym { color: var(--k-erfolg); }
.b-kpis { margin: 0 0 16px; }
.b-kpis-kopf { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.b-kpis-kopf .kn-mehr { margin-left: auto; }
.kn-zeitsegment.b-zeit a { padding: 6px 12px; font-size: 13px; }
.b-kpi-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.b-kpi { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: var(--k-text); background: var(--kn-glas-dicht);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); box-shadow: inset 0 1px 0 var(--kn-kante), inset 0 0 0 .5px var(--kn-rand), 0 4px 18px rgba(20,30,60,.08); }
a.b-kpi { transition: transform .45s var(--kn-feder, ease); }
a.b-kpi:hover { transform: translateY(-2px); }
.b-kpi-label { color: var(--k-text-leise); font-weight: 600; font-size: 12.5px; }
.b-kpi-wert { font-size: 26px; font-weight: 750; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.b-kpi-fuss { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12px; }
.b-kpi-trend { font-weight: 700; color: var(--k-erfolg); }
.b-kpi-trend.runter { color: var(--k-fehler); }
.b-kpi-rest { color: var(--k-text-3); }
/* 19.10.2026 abends: auf dem Handy zu zweit statt vier volle Zeilen (vorher je Bereich in b-produkte.css und b-kunden.css) */
@media (max-width: 600px) { .b-kpi-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .b-kpi { padding: 12px 14px; } .b-kpi-wert { font-size: 21px; overflow-wrap: anywhere; } }
.b-kpis-hinweis { margin: 8px 2px 0; color: var(--k-text-leise); font-size: 13px; }
/* Listenkarte: oben Status und Suche/Filter in einer Zeile, darunter Werkzeuge der Liste und die Liste */
.karte.b-liste { display: block; padding: 16px 18px 6px; }
.karte.b-liste.buendig { padding: 0; overflow: hidden; }
.b-kpi-wert.klein { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.b-liste-titel { margin: 0 0 10px; font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.b-liste-zahl { padding: 2px 8px; border-radius: 999px; background: var(--kn-fuell-2); color: var(--k-text-leise); font-size: 12px; font-weight: 700; }
.b-liste .filterblock { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; min-height: 0; }
.b-liste .filterblock > .statusreiter { flex: none; margin: 0; }
.b-liste .filterblock > .filterzeile { flex: 1 1 360px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; min-height: 0; height: auto; }
.b-liste .filterzeile > .filtersuche { flex: 1 1 220px; min-width: 0; }
.b-liste .listenwerkzeug { margin: 0 0 8px; }
.b-liste .liste { margin-left: -18px; margin-right: -18px; border-radius: 0; box-shadow: none; background: transparent; }
@media (max-width: 760px) { .karte.b-liste { padding: 12px 12px 4px; } .b-liste .liste { margin-left: -12px; margin-right: -12px; } }
/* Auswahlleiste erst mit einer gewaehlten Zeile (liste.js setzt data-leer); ohne Skript bleibt sie sichtbar */
.b-liste form[data-auswahl][data-leer] { display: none; }
/* Markierung "Neu" an Bestellungen der letzten 24 Stunden: kleine Akzent-Pille statt grauem Block */
.u2-neu { display: inline-flex; width: fit-content; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--k-akzent-weich); color: var(--k-akzent-text); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }
/* Echter Code bleibt in Festbreitenschrift */
:where(code, pre, kbd, samp, .code) { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }

/* Konsole neu (19.10.2026): mitrechnende Zusammenfassung in Anlege-Formularen (k-formsumme.js) */
.b-summe:not([hidden]) { display: grid; gap: 12px; }
.b-summe-kunde { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.b-summe-liste { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--k-linie); display: grid; gap: 8px; }
.b-summe-liste li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.b-summe-liste li.neu { animation: kn-rein .18s ease-out; }
.b-summe-liste li.leer { color: var(--k-text-leise); }
.b-summe-gesamt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--k-linie); }
.b-summe-gesamt strong { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .b-summe-liste li.neu { animation: none; } }
@media (min-width: 1101px) { form[data-k-summe-form] > aside { position: sticky; top: 96px; align-self: start; } }

/* 19.10.2026 abends: "Naechster Schritt" auf Detailseiten (BSchritt.astro), vorher nur in b-buchungen.css */
.karte.b-schritt { display: flex; flex-direction: row; align-items: center; text-align: start; gap: 16px; padding: 16px 18px; margin: 0 0 16px; }
.b-schritt-sym { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--k-akzent); color: var(--k-auf-akzent); }
.b-schritt-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.b-schritt-text h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.b-schritt-text p { margin: 0; color: var(--k-text-leise); font-size: 13.5px; }
.b-schritt-text .b-schritt-art { color: var(--k-text-3); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.b-schritt > .knopf { flex: none; }
@media (max-width: 760px) { .karte.b-schritt { flex-wrap: wrap; align-items: flex-start; } .b-schritt > .knopf { width: 100%; justify-content: center; } }

/* 19.10.2026 spaet: social.css und redaktion.css dunkelfaehig (vorher in DUNKEL_FOLGT, Social-Seiten fielen auf hell zurueck).
   Kanalfarben dunkel: helle Kanalfarbe auf dunkler, leicht getoenter Flaeche; feste helle Flaechen auf Konsolenflaechen. */
html[data-k-modus="dunkel"] .kn-insta { --kn: #F08A7E; --kn-weich: #3A2522; }
html[data-k-modus="dunkel"] .kn-face { --kn: #FF9A5C; --kn-weich: #3A2A20; }
html[data-k-modus="dunkel"] .kn-linked { --kn: #8DB5E0; --kn-weich: #1F2C3A; }
html[data-k-modus="dunkel"] .kn-google { --kn: #E0BE5A; --kn-weich: #352D18; }
html[data-k-modus="dunkel"] .kn-sonst { --kn: #B5C0C3; --kn-weich: #2A3134; }
html[data-k-modus="dunkel"] .kn-mail { --kn: #B9A2EA; --kn-weich: #2C2540; }
html[data-k-modus="dunkel"] .kn-blog { --kn: #7FCFA9; --kn-weich: #1D3229; }
html[data-k-modus="dunkel"] .kn-plan { --kn: #E5B455; --kn-weich: #352B16; }
html[data-k-modus="dunkel"] :is(.so-kachel-flaeche, .sv-bild) { background: var(--k-flaeche-2); }
html[data-k-modus="dunkel"] .sv-ueber { background: #4A2620; color: var(--k-text); text-decoration-color: #FF9A8A; }
html[data-k-modus="dunkel"] .sv-zahl.ueber, html[data-k-modus="dunkel"] .so-pruefpunkt.fehlt > .sym { color: #FF9A8A; }
html[data-k-modus="dunkel"] .so-pruefpunkt.bereit > .sym { color: #7FCFA9; }
html[data-k-modus="dunkel"] .rd-kal-tag.aus-monat { background: var(--k-flaeche-2); }
html[data-k-modus="dunkel"] :is(.rd-kal-tag, .rd-woche-tag).luecke-tag { background: repeating-linear-gradient(135deg, var(--k-flaeche) 0 8px, var(--k-flaeche-2) 8px 16px); }

/* 19.10.2026 spaet: Gefahr-Knopf aus k-bausteine.css (weisse Schrift auf Fehlerfarbe, dunkel 2,01) wie .knopf.gefahr im neuen System */
.k-knopf.k-gefahr { color: var(--k-fehler); background: var(--k-fehler-weich); border-color: transparent; }
.k-knopf.k-gefahr:hover, .k-knopf.k-gefahr:active { color: var(--k-fehler); background: color-mix(in srgb, var(--k-fehler) 18%, var(--k-fehler-weich)); border-color: transparent; }
/* Ausloeser im Ablauf (auto.css): Unterzeilen hingen an --dunkel-text (fest hell), auf heller Tinte im Dunkelmodus 1,92 */
html[data-k-modus="dunkel"] .ab-ausloeser :is(.ab-marke, .ab-unter) { color: color-mix(in srgb, var(--k-papier) 78%, var(--k-tinte)); }
/* 19.10.2026 spaet: Text der Stufen-Reiter (Abwickeln, Anfragen) als eigene Spanne; Hintergruende aus kontakte.css dunkel lesbar */
.kn-stufe-text { white-space: nowrap; }
html[data-k-modus="dunkel"] :is(.feld-anzeige, .spalten-liste) { background: var(--k-flaeche-2); color: var(--k-text); }

/* 23.10.2026: Leiste eingeklappt mit der neuen Navigation (kn-*). Vorher kannte nur das alte Markup die Regeln: Gruppentitel liefen
   aus der Leiste, die Spalte war 108 px breit in 72 px Rahmen, der Name am Rand wurde abgeschnitten, bei vielen Punkten ragte die
   Navigation ueber das Konto. Jetzt: nur Symbole, je Gruppe ein Farbpunkt als Trenner, die Navigation scrollt in der Leiste,
   der Name steht als title am Punkt (k-shell.js setzt ihn beim Einklappen). */
@media (min-width: 901px) {
  .k-leiste-zu .k-leiste { overflow: visible; align-items: center; }
  .k-leiste-zu .k-klapp { width: 100%; min-width: 0; min-height: 0; flex: 1 1 0; align-items: center; overflow: visible; }
  .k-leiste-zu .kn-nav { width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; align-items: center; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  .k-leiste-zu .kn-nav::-webkit-scrollbar { display: none; }
  .k-leiste-zu .kn-block { width: 100%; align-items: center; }
  .k-leiste-zu .kn-gruppe { font-size: 0; line-height: 0; margin: 6px 0 2px; gap: 0; justify-content: center; width: 100%; }
  .k-leiste-zu .kn-block:first-child .kn-gruppe { margin-top: 2px; }
  .k-leiste-zu .kn-nav .k-punkt { min-height: 36px; width: 40px; padding: 0; justify-content: center; flex: none; }
  .k-leiste-zu .kn-nav .k-punkt-text, .k-leiste-zu .k-punkt > .k-tasten-hinweis { display: none; }
  .k-leiste-zu .kn-store { width: 40px; min-height: 36px; padding: 0; justify-content: center; flex: none; }
  .k-leiste-zu .kn-store .kn-store-text { display: none; }
  .k-leiste-zu .k-waehler { width: 56px; }
  .k-leiste-zu .k-waehler > summary { width: 56px; justify-content: center; }
  .k-leiste-zu .k-unten, .k-leiste-zu .k-werkzeuge { align-items: center; flex: none; }
}
/* 23.10.2026: Auswahlen im Seitenkopf (Zeitraum, Mehr, Neu) liegen ueber dem folgenden Inhalt. Der Seitenkopf bekommt durch die
   Einblend-Animation (transform bleibt stehen) einen eigenen Stapel; ohne z-index malten spaetere Karten mit Hintergrundunschaerfe darueber. */
.seitenkopf:has(details[open]) { position: relative; z-index: 30; }
/* 23.10.2026: Menues der Leiste (Konto, Website-Waehler) ragen ueber den Inhalt; die Leiste liegt dann ueber ihm. */
.k-leiste:has(details[open]), .k-leiste-zu .k-leiste { z-index: 50; }

/* 23.10.2026: Ladeanzeige (k-laden.js). Balken oben auch beim normalen Seitenwechsel, dazu ein Feld unten mit Ring und Text. */
html[data-k-laedt="ja"]:not([aria-busy="true"]) body::after { content: ""; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 3px; transform-origin: left;
  background: linear-gradient(90deg, var(--k-akzent), color-mix(in srgb, var(--k-akzent) 55%, #fff)); animation: kn-laden 8s cubic-bezier(.2,.7,.2,1) forwards; }
.k-lade { position: fixed; z-index: 9998; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px);
  padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--kn-glas-voll); color: var(--k-text); box-shadow: var(--kn-schatten-hoch); border: 1px solid var(--kn-rand);
  font: 500 13px/18px var(--k-schrift-text, system-ui); -webkit-backdrop-filter: var(--kn-unschaerfe); backdrop-filter: var(--kn-unschaerfe); pointer-events: none; }
.k-lade[hidden] { display: none; }
.k-lade-ring { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--kn-fuell-3); border-top-color: var(--k-akzent); }
.k-lade-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .k-lade:not([hidden]) { animation: kn-lade-rein .2s cubic-bezier(.2,.7,.2,1) both; }
  .k-lade-ring { animation: k-drehen .8s linear infinite; }
}
@keyframes kn-lade-rein { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { html[data-k-laedt="ja"]:not([aria-busy="true"]) body::after { animation: none; transform: scaleX(.6); } }
.k-lade.mit-hilfe { right: 88px; }
@media (max-width: 900px) { .k-lade { bottom: 76px; right: 16px; } .k-lade.mit-hilfe { right: 80px; } }

/* 23.10.2026: Hilfe-Fenster unten rechts (k-hilfe.js, komponenten/HilfeChat.astro): Chat mit dem hnvr.me Team und Ticket eroeffnen */
.k-hilfe { position: fixed; z-index: 9990; right: 22px; bottom: 22px; }
.k-hilfe-knopf { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--k-akzent) 82%, #fff), var(--k-akzent)); color: var(--k-auf-akzent);
  box-shadow: var(--kn-schatten-hoch); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.k-hilfe-knopf:hover { transform: translateY(-2px); }
.k-hilfe-knopf:focus-visible { outline: 2.5px solid color-mix(in srgb, var(--k-akzent) 70%, var(--k-text)); outline-offset: 3px; }
.k-hilfe.offen .k-hilfe-knopf { background: var(--kn-glas-voll); color: var(--k-text); box-shadow: var(--kn-schatten-hoch), 0 0 0 1px var(--kn-rand); }
.k-hilfe-punkt { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--k-fehler); box-shadow: 0 0 0 2px var(--k-papier); }
.k-hilfe-fenster { position: absolute; right: 0; bottom: 66px; width: min(380px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--kn-glas-voll); color: var(--k-text); border: 1px solid var(--kn-rand); box-shadow: var(--kn-schatten-hoch); -webkit-backdrop-filter: var(--kn-unschaerfe); backdrop-filter: var(--kn-unschaerfe); }
.k-hilfe-fenster[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .k-hilfe-fenster:not([hidden]) { animation: kn-lade-rein .2s cubic-bezier(.2,.7,.2,1) both; } }
.k-hilfe-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 10px 18px; }
.k-hilfe-kopf h2 { margin: 0; font: 650 16px/22px var(--k-schrift-text, system-ui); }
.k-hilfe-kopf p { margin: 2px 0 0; color: var(--k-text-leise); font-size: 13px; line-height: 18px; }
.k-hilfe-zu { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 12px; background: transparent; color: var(--k-text-leise); cursor: pointer; }
.k-hilfe-zu:hover { background: var(--kn-fuell-2); color: var(--k-text); }
.k-hilfe-reiter { display: flex; gap: 2px; margin: 0 14px 8px; padding: 3px; border-radius: 14px; background: var(--kn-fuell); }
.k-hilfe-reiter button { flex: 1; min-height: 38px; border: 0; border-radius: 11px; background: transparent; color: var(--k-text-leise); font: 600 13px/18px var(--k-schrift-text, system-ui); cursor: pointer; }
.k-hilfe-reiter button[aria-selected="true"] { background: var(--k-text); color: var(--k-papier); }
.k-hilfe-flaeche { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 4px 14px 14px; overflow-y: auto; }
.k-hilfe-flaeche[hidden] { display: none; }
.k-chat-verlauf { display: flex; flex-direction: column; gap: 8px; min-height: 140px; max-height: 300px; overflow-y: auto; padding: 4px 2px; scroll-behavior: smooth; }
.k-chat-leer { margin: auto; padding: 8px 14px; text-align: center; color: var(--k-text-leise); font-size: 13px; line-height: 19px; }
.k-chat-nachricht { display: flex; flex-direction: column; gap: 2px; max-width: 86%; }
.k-chat-nachricht.ich { align-self: flex-end; align-items: flex-end; }
.k-chat-nachricht.team { align-self: flex-start; }
.k-chat-text { margin: 0; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 20px; }
.k-chat-nachricht.ich .k-chat-text { background: var(--k-akzent); color: var(--k-auf-akzent); border-bottom-right-radius: 6px; }
.k-chat-nachricht.team .k-chat-text { background: var(--kn-fuell-2); color: var(--k-text); border-bottom-left-radius: 6px; }
.k-chat-zeit { color: var(--k-text-leise); font-size: 11.5px; line-height: 16px; padding: 0 4px; }
.k-chat-stand { margin: 0; min-height: 16px; color: var(--k-text-leise); font-size: 12px; line-height: 16px; }
/* 25.10.2026: Support-Assistent im Hilfe-Fenster (support/): Team-Status, Assistent-Nachrichten, Schreibanzeige */
.k-chat-team { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 2px; color: var(--k-text-leise); font-size: 12px; line-height: 16px; }
.k-chat-team::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k-text-leise); }
.k-chat-team.online::before { background: var(--k-erfolg); }
.k-chat-nachricht.assistent .k-chat-zeit { font-style: normal; }
.k-chat-tippt .k-chat-text { color: var(--k-text-leise); }
@media (prefers-reduced-motion: no-preference) {
  .k-chat-nachricht.neu { animation: kn-lade-rein .22s cubic-bezier(.2,.7,.2,1) both; }
  .k-chat-tippt .k-chat-text { animation: k-chat-puls 1.2s ease-in-out infinite; }
  @keyframes k-chat-puls { 50% { opacity: .55; } }
}
.k-chat-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.k-chat-form textarea, .k-chat-form input[type=text] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--k-feldrand); border-radius: 14px; background: var(--kn-fuell-2); color: var(--k-text); font: 400 14px/20px var(--k-schrift-text, system-ui); resize: vertical; min-height: 44px; }
.k-chat-form .knopf { align-self: flex-end; min-height: 44px; }
.k-chat-form .feld { display: flex; flex-direction: column; gap: 6px; }
.k-chat-form label { font-size: 13px; font-weight: 600; }
.k-hilfe-hinweis { margin: 0; color: var(--k-text-leise); font-size: 13px; line-height: 19px; }
.k-hilfe-fuss { margin: 0; font-size: 13px; text-align: center; color: var(--k-text-leise); }
@media (max-width: 900px) {
  .k-hilfe { right: 16px; bottom: 76px; }
  .k-hilfe-fenster { position: fixed; left: 12px; right: 12px; bottom: 140px; width: auto; max-height: calc(100vh - 170px); }
}

/* 24.10.2026: Sofort-Speichern (k-inline.js): Drehkreis beim Senden, Haken danach, Hinweis unten Mitte */
form[data-inline].k-ink-speichert { opacity: .72; }
form[data-inline]::after { content: ""; display: inline-block; flex: none; width: 0; height: 18px; margin-left: 0; vertical-align: middle; }
form[data-inline].k-ink-speichert::after { width: 18px; margin-left: 8px; border-radius: 50%; border: 2.5px solid var(--kn-fuell-3); border-top-color: var(--k-akzent); }
form[data-inline].k-ink-ok::after { content: "\2713"; width: 18px; margin-left: 8px; color: var(--k-erfolg, #1F7A4D); font-weight: 700; line-height: 18px; text-align: center; }
@media (prefers-reduced-motion: no-preference) { form[data-inline].k-ink-speichert::after { animation: k-drehen .8s linear infinite; } }
.k-ink-hinweis { position: fixed; z-index: 9997; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: min(92vw, 560px); padding: 10px 14px 10px 16px; border-radius: 16px;
  background: var(--k-text); color: var(--k-papier); box-shadow: var(--kn-schatten-hoch); font: 500 13.5px/19px var(--k-schrift-text, system-ui); }
.k-ink-hinweis[hidden] { display: none; }
.k-ink-hinweis.fehler { background: var(--k-fehler-weich, #F9EBE8); color: var(--k-fehler, #A63F36); border: 1px solid var(--k-fehler, #A63F36); }
.k-ink-extra { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k-ink-extra code { padding: 2px 8px; border-radius: 8px; background: rgba(127, 127, 127, .25); font-size: 12.5px; overflow-wrap: anywhere; }
.k-ink-zu { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; line-height: 28px; cursor: pointer; }
.k-ink-zu:hover { background: rgba(127, 127, 127, .25); }
@media (prefers-reduced-motion: no-preference) { .k-ink-hinweis:not([hidden]) { animation: kn-lade-rein-mitte .2s cubic-bezier(.2,.7,.2,1) both; } }
@keyframes kn-lade-rein-mitte { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 900px) { .k-ink-hinweis { bottom: 80px; } }

/* Haertung gegen harte Inhalte (Layout-Pruefung 27.10.2026): Rasterkinder und Flex-Kinder duerfen unter ihre Inhaltsbreite schrumpfen, lange Woerter brechen um.
   Alles mit :where (Spezifitaet 0): jede Seitenregel mit eigener min-width oder eigenem Umbruch gewinnt weiterhin. */
:where(.haupt > main, .haupt > .seitenkopf) { overflow-wrap: anywhere; }
:where(.haupt > main, .haupt > .seitenkopf) :where(table, td, th, pre, code, input, textarea, select) { overflow-wrap: break-word; }
:where(.haupt > main, .haupt > .seitenkopf) :where(button, .knopf, .pille, [role="tab"], .nk-werkzeug-pillen a, .nk-werkzeug-segment a) { overflow-wrap: normal; }
:where(.haupt > main, .haupt > .seitenkopf) :where(div, section, article, li, form, details) { min-width: 0; }
/* Statuspillen sind einzeilig; ein langer Text wird mit Auslassungspunkten gekuerzt statt in die Nachbarspalte zu laufen */
:where(.haupt > main, .haupt > .seitenkopf) .pille:not(summary) { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Logik-Layoutpruefung (28.10.2026): Mittelteil ist eine scrollende Flex-Spalte; Kinder mit overflow hidden (Karten, Listenkarten) durften darin
   auf Hoehe 51 px schrumpfen und schnitten ihren Inhalt ab, statt dass der Mittelteil scrollt. Flaechen behalten ihre Inhaltshoehe (Specificity 0:
   eigene flex-Regeln einer Seite, z. B. Editorflaechen, gewinnen weiterhin). */
:where(body:not(.editor-modus) .haupt > main) > :where(*) { flex-shrink: 0; }
/* Logik-Layoutpruefung (28.10.2026): gleichrangige Kartenpaare in einer Zeile (Statistik, Redaktion unten, Projektuebersicht, Kampagnenansicht) hatten durch
   align-items: start ungleiche Hoehen (bis 120 px Differenz). Sie strecken sich jetzt auf die hoechste Karte der Zeile; Seitenleisten von Editoren bleiben oben. */
.kst-raster, .rd-unten, .la-zwei, .zweispaltig { align-items: stretch; }
.k-weitere { display: inline-block; margin-top: 6px; font-size: .9em; }