/* Konsole · Liquid Glass (25.10.2026, Tim: "Setze es um auf der ganzen Konsole"). Vorlage: Prototyp ux-konzept/prototyp/konsole-wow.html
   (Apple-Haltung: Kapseln, diagonale Lichtkante, getoentes Glas, flache Hauptknoepfe, Federn) und die Galerie liquidglassdesign.com
   (Dashboard: kraeftiges Blau und Orange, Light-Mode: Pastell, Farbkreis).
   Wird als LETZTES Stylesheet nach k-neu.css und k-system.css geladen (layouts/Rahmen.astro, layouts/Layout.astro). Nur Aussehen, keine
   Markup-Aenderung: belegt die Tokens aus k-neu.css neu und setzt die gemeinsamen Bausteine (Leiste, Karte, Knopf, Reiter, Eingabe).
   Hintergrund: ein Linearverlauf statt Farbkugeln. Dunkel arbeitet mit Schwarz. Ohne Skript, ohne Fremdaufruf. */

/* ---------- Radien: ineinander gedacht (Fenster 22, Karte 18, Feld 14, Knopf Kapsel; wie die Apps, app-glas.css) ---------- */
:root {
  --kn-r-fenster: 22px; --kn-r-karte: 18px; --kn-r-knopf: 14px;
  /* Lichtkante: oben links hell, unten rechts schwach (Liquid Glass) */
  --kl-kante: inset 1.5px 1.5px 0 rgba(255, 255, 255, .85), inset -1px -1px 0 rgba(255, 255, 255, .45), inset 0 0 0 .5px var(--k-linie);
  --kl-feder: var(--kn-feder, cubic-bezier(.2, .9, .3, 1));
  --kl-verlauf: linear-gradient(125deg, #FFD3B8 0%, #FFEBDD 20%, #D9E4FF 38%, #AFC6FF 52%, #E1D3FF 68%, #FFD0B4 84%, #FFB88E 100%);
  --kl-unschaerfe: blur(24px) saturate(1.9);
}
html[data-k-modus="dunkel"] {
  --k-papier: #000000; --k-flaeche: #101218; --k-flaeche-2: #171A21; --k-flaeche-3: #1F232B;
  --kn-glas: rgba(255, 255, 255, .07); --kn-glas-dicht: rgba(255, 255, 255, .09); --kn-glas-voll: rgba(24, 27, 34, .96);
  --kn-fuell: rgba(255, 255, 255, .07); --kn-fuell-2: rgba(255, 255, 255, .11); --kn-fuell-3: rgba(255, 255, 255, .18);
  --kl-kante: inset 1.5px 1.5px 0 rgba(255, 255, 255, .38), inset -1px -1px 0 rgba(255, 255, 255, .13), inset 0 0 0 .5px var(--k-linie);
  --kl-verlauf: linear-gradient(125deg, #000000 0%, #061438 22%, #0E2C8A 38%, #050B22 52%, #000000 62%, #4A1C06 80%, #B04A12 90%, #1A0A02 100%);
  --kn-schatten: 0 8px 28px rgba(0, 0, 0, .5);
}

/* ---------- Akzent neutral (Graphit wie die Apps; Orange bleibt dem Logo). Kundenfarben (body.marke-kunde) gehen vor ---------- */
body:not(.marke-kunde) {
  --k-akzent: #3D4757; --k-akzent-hover: #2F3846; --k-akzent-gedrueckt: #252C38;
  --k-akzent-weich: #E6EAF0; --k-akzent-text: #3D4757; --k-auf-akzent: #FFFFFF;
}
html[data-k-modus="dunkel"] body:not(.marke-kunde) {
  --k-akzent: #E4E8EF; --k-akzent-hover: #F2F4F8; --k-akzent-gedrueckt: #CBD1DB;
  --k-akzent-weich: #2A3140; --k-akzent-text: #E4E8EF; --k-auf-akzent: #14191F;
}
/* 07.11.2026: Diagrammfarben dunkel (k-grund.css hat nur Hellwerte); Reihe 1 auf --k-flaeche (#101218) 6,98, Reihe 2 15,23, Vorperiode 5,31 */
html[data-k-modus="dunkel"] { --k-diagramm-reihe-1: #E8844A; --k-diagramm-reihe-2: #E4E8EF; --k-diagramm-vorperiode: #8C999D; --k-diagramm-flaeche: #3A2A22; --k-diagramm-raster: #2B323B; }

/* Bereichsfarben (27.10.2026): "Heute" neutral statt Orange; Flaeche (weich) und Schrift (text) der Bereiche bekommen Dunkelwerte,
   vorher blieben sie im Dunkelmodus helle Pastellflaechen. Gerechnet: Schrift auf weich dunkel 8,0 bis 10,6 : 1, hell Heute 7,8 : 1 */
:root { --k-bereich-heute: #C7D0D3; --k-bereich-heute-weich: #E6EAF0; --k-bereich-heute-text: #3D4757; }
html[data-k-modus="dunkel"] {
  --k-bereich-heute-weich: #2A3140; --k-bereich-heute-text: #E4E8EF;
  --k-bereich-verkaufen-weich: #16302A; --k-bereich-verkaufen-text: #7FE0B5;
  --k-bereich-kunden-weich: #25213F; --k-bereich-kunden-text: #BDB1FF;
  --k-bereich-website-weich: #14303F; --k-bereich-website-text: #8FD3F5;
  --k-bereich-team-weich: #332A12; --k-bereich-team-text: #F2C75A;
}

/* Eigene Akzent-Namen einzelner Seiten folgen demselben Token (sonst blieben dort Orange-Reste); Kundenfarben gehen weiter vor */
body:not(.marke-kunde) {
  --akzent: var(--k-akzent); --akzent-weich: var(--k-akzent-weich); --akzent-text: var(--k-akzent-text);
  --ae-akzent: var(--k-akzent); --ae-auf-akzent: var(--k-auf-akzent); --ae-akzent-text-hell: var(--k-akzent-text); --ae-akzent-text-dunkel: var(--k-akzent-text);
  --bq-akzent: var(--k-akzent); --el-akzent: var(--k-akzent);
  --v-akzent: var(--k-akzent); --v-akzent-weich: var(--k-akzent-weich); --v-akzent-text: var(--k-akzent-text); --v-auf-akzent: var(--k-auf-akzent);
  --ed-akzent: var(--k-akzent); --ed-akzent-hell: var(--k-akzent-weich);
}
body:not(.marke-kunde) .kd { --kd-akzent: var(--k-akzent); --kd-akzent-weich: var(--k-akzent-weich); --kd-akzent-text: var(--k-akzent-text); }
body:not(.marke-kunde) .kn-face { --kn: var(--k-akzent); --kn-weich: var(--k-akzent-weich); }

/* ---------- Hintergrund: ein wandernder Verlauf, keine Kugeln ---------- */
html, body { background: var(--k-papier); }
.k-tapete { translate: none; transition: none; background: var(--kl-verlauf); background-size: 320% 320%; animation: kl-band 36s ease-in-out infinite alternate; }
.k-tapete i { display: none; }
@keyframes kl-band { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
html[data-k-grund="ruhig"] .k-tapete { opacity: .6; animation: none; }

/* ---------- Glas mit diagonaler Lichtkante ---------- */
.k-leiste, .karte, .k-befehl, .k-konto-menue, .k-neu-menue, .k-waehler-liste, :where(.k-rahmen) :where(.kachel, .kpi, .kennzahl, .panel) {
  -webkit-backdrop-filter: var(--kl-unschaerfe); backdrop-filter: var(--kl-unschaerfe);
  box-shadow: var(--kl-kante), var(--kn-schatten);
}
html[data-k-modus="dunkel"] .karte { box-shadow: var(--kl-kante), 0 8px 28px rgba(0, 0, 0, .5); }
.k-leiste { border-radius: var(--kn-r-fenster); }
.k-suche, .kn-zeitsegment, .kn-darstellung { box-shadow: var(--kl-kante); }

/* ---------- Seitenleiste: Auswahl als getoentes Glas ---------- */
.k-punkt[data-aktiv=ja], .marke-kunde .k-punkt[data-aktiv=ja] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--k-akzent) 34%, transparent), color-mix(in srgb, var(--k-akzent) 17%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .5px rgba(255, 255, 255, .32), 0 6px 16px color-mix(in srgb, var(--k-akzent) 20%, transparent);
}
.k-unter[aria-current], .marke-kunde .k-unter[aria-current] { background: color-mix(in srgb, var(--k-akzent) 14%, transparent); }
.k-punkt, .k-bereich > .k-bereich-kopf { border-radius: 14px; }
.k-unter { border-radius: 12px; }

/* ---------- Knoepfe: Kapseln; der Hauptknopf ist flach getoent (wie Apples "prominent") ---------- */
.knopf { border-radius: 999px; padding-inline: 18px; box-shadow: var(--kl-kante), 0 2px 8px rgba(20, 30, 60, .07); transition: transform .55s var(--kl-feder), box-shadow .2s, background .2s; }
.knopf:hover { box-shadow: var(--kl-kante), 0 6px 16px rgba(20, 30, 60, .13); }
.knopf:active { transform: scale(.96); }
.knopf.primaer, .knopf.akzent {
  background: var(--k-akzent); color: var(--k-auf-akzent); font-weight: 600; letter-spacing: -.005em;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .55), 0 6px 18px color-mix(in srgb, var(--k-akzent) 32%, transparent);
}
.knopf.primaer:hover, .knopf.akzent:hover { background: var(--k-akzent-hover); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .55), 0 8px 22px color-mix(in srgb, var(--k-akzent) 40%, transparent); }
.knopf.primaer:active, .knopf.akzent:active { background: var(--k-akzent-gedrueckt); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .4), 0 2px 8px color-mix(in srgb, var(--k-akzent) 30%, transparent); }
.knopf-rund { border-radius: 999px; }

/* ---------- Segmente und Reiter: Kapsel mit Glaslinse als Auswahl ---------- */
.kn-zeitsegment { border-radius: 999px; padding: 3px; }
.kn-zeitsegment a { border-radius: 999px; transition: background .2s, color .2s, box-shadow .2s; }
.kn-zeitsegment a[aria-current] { background: var(--kn-glas-voll); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgba(20, 30, 60, .16), inset 0 0 0 .5px var(--kn-rand); }
html[data-k-modus="dunkel"] .kn-zeitsegment a[aria-current] { background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 14px rgba(0, 0, 0, .5); }
:is(.statusreiter, .rb-reiter, .untermenue-flach, .reiter) a, .kn-unterreiter a { border-radius: 999px; }
.chip, .pille { border-radius: 999px; }

/* ---------- Eingaben ---------- */
html[data-k-modus="dunkel"] :where(input, select, textarea).feld { background: var(--kn-fuell-2); }
:where(input, select, textarea).feld { border-radius: var(--kn-r-knopf); }
:where(input, select).feld:not([type="checkbox"], [type="radio"]) { border-radius: 999px; padding-inline: 16px; }
.k-suche { border-radius: 999px; }

/* ---------- Anmeldung und Zugang ---------- */
.k-zugang .zugang { border-radius: 38px; background: var(--kn-glas); box-shadow: var(--kl-kante), 0 40px 100px rgba(10, 20, 60, .28); -webkit-backdrop-filter: blur(44px) saturate(1.9); backdrop-filter: blur(44px) saturate(1.9); }
html[data-k-modus="dunkel"] .k-zugang .zugang { box-shadow: var(--kl-kante), 0 40px 100px rgba(0, 0, 0, .7); }
.k-zugang .zugang-flaeche { background: transparent; }
.k-zugang .zugang-karte :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select) { height: 52px; border-radius: 26px; padding-inline: 22px; }
.k-zugang .zugang-karte .knopf { height: 52px; border-radius: 999px; font-size: 17px; font-weight: 600; }
.k-zugang .zugang-bereiche > div { border-radius: 20px; box-shadow: var(--kl-kante); }

/* ---------- Gelaender: weniger Bewegung, weniger Transparenz, mehr Kontrast, kein Blur ---------- */
@media (prefers-reduced-motion: reduce) { .k-tapete { animation: none; background-position: 35% 50%; } .knopf { transition: none; } }
@media (prefers-reduced-transparency: reduce) {
  .k-leiste, .karte, .k-befehl, .k-konto-menue, .k-neu-menue, .k-waehler-liste, .k-zugang .zugang { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kn-glas-voll); }
}
@media (prefers-contrast: more) {
  .k-leiste, .karte, .k-zugang .zugang { background: var(--k-flaeche); box-shadow: inset 0 0 0 1px var(--k-text); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .k-leiste, .karte, .k-befehl, .k-zugang .zugang { background: var(--kn-glas-voll); }
}
/* Kundenfarbe im Dunkelmodus (UX-Umbau 03.11.2026): als Schrift (Verweise, aktive Woerter) zu dunkel auf dunklem Glas, gemessen
   3,7 bis 3,9 zu 1 bei #0E5C4F. Die Schriftfassung wird aus der Kundenfarbe aufgehellt; Flaechen und Knoepfe behalten die Farbe. */
html[data-k-modus="dunkel"] body.marke-kunde { --k-akzent-text: color-mix(in srgb, var(--k-akzent) 42%, #FFFFFF); --akzent-text: var(--k-akzent-text); --v-akzent-text: var(--k-akzent-text);
  /* Toenung dazu passend dunkel: helle Schrift auf heller Toenung ergab 1,25 zu 1 bei Pillen mit Akzent */
  --k-akzent-weich: color-mix(in srgb, var(--k-akzent) 38%, #12161E); --akzent-weich: var(--k-akzent-weich); --v-akzent-weich: var(--k-akzent-weich); }