/* AUS EINEM GUSS (Max, Nov. 2026: "Pruefe die ganze App auf Gleichheiten bzw. Ungleichheiten
   und loese das Problem! Die App aus einem Guss"). Auf jeder Seite geladen, nach den Schriften.

   EIN KACHEL-REZEPT fuer jede Zahlenkachel der App, egal aus welcher Zeit sie stammt:
   - eine Farbe nach Bedeutung (--f hell, --ft tief): gut gruen, schlecht rot, Achtung gelb,
     Info blau, neutral grau; data-farbe gewinnt, wo es gesetzt ist;
   - dasselbe Licht von oben (8 % oben, 17 % unten), keine Lichtflecken, keine Ecken-Leuchten;
   - Radius 22, innen eine weisse Lichtkante und ein Haarrand in der Kachelfarbe;
   - Zahl in der tiefen Farbe; gewaehlt = Ring in der tiefen Farbe.
   Hoechstens vier Kacheln nebeneinander (Regel fuer alle Apps), siehe die Seiten selbst. */
html body :is(.gut, .good, .an-gut, .zb-gut):is(.karte, .l24-kpi, .ka-kachel, .kp-kachel, .sz-k):not(#_):not(#_) { --f: var(--k-gruen); --ft: var(--k-gruen-tief); }
html body :is(.schlecht, .bad):is(.karte, .l24-kpi, .ka-kachel, .kp-kachel, .sz-k):not(#_):not(#_) { --f: var(--k-rot); --ft: var(--k-rot-tief); }
html body :is(.achtung, .warn):is(.karte, .l24-kpi, .ka-kachel, .kp-kachel, .sz-k):not(#_):not(#_) { --f: var(--k-gelb); --ft: var(--k-gelb-tief); }
html body :is(.info):is(.karte, .l24-kpi):not(#_):not(#_) { --f: var(--k-blau); --ft: var(--k-blau-tief); }
html body :is(.neutral, .an-neutral, .zb-neutral):is(.karte, .l24-kpi):not(#_):not(#_) { --f: var(--k-blau); --ft: var(--k-blau-tief); } /* neutral = blau (Ampel, Nov. 2026) */

html body :is(.l24-symk[data-farbe], .l24-kpi, .ka-kachel, .kp-kachel, .karte.an-kpi, .karte.at-kpi, .karte.zb-kpi, .karte.mp-kachel, .karte.nz-kachel, .sz-k):not(#_):not(#_):not(#_) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--f, var(--k-blau)) 8%, white), color-mix(in srgb, var(--f, var(--k-blau)) 17%, white)) !important;
  border: 0 !important; border-radius: 22px !important;
  box-shadow: inset 0 1px 0 white, inset 0 0 0 1px color-mix(in srgb, var(--f, var(--k-blau)) 18%, transparent), 0 1px 2px color-mix(in srgb, var(--k-grau-tief) 8%, transparent) !important;
}
html body :is(.l24-kpi, .karte.an-kpi, .karte.zb-kpi):not(#_):not(#_)::before { background-image: none !important; filter: none !important; }
html body :is(.l24-symk[data-farbe], .l24-kpi, .ka-kachel, .kp-kachel, .karte.an-kpi, .karte.at-kpi, .karte.zb-kpi, .karte.mp-kachel, .karte.nz-kachel, .sz-k):is(.an, .active, [aria-pressed="true"], [aria-selected="true"]):not(#_):not(#_):not(#_) {
  box-shadow: inset 0 1px 0 white, 0 0 0 2.5px var(--ft, var(--k-blau-tief)) !important;
}
@media (hover: hover) {
  html body :is(.l24-symk[data-farbe], .l24-kpi.is-link, .karte.an-kpi, .karte.at-kpi.klick, button.sz-k):hover:not(#_):not(#_):not(#_) { transform: translateY(-2px); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
}

/* data-farbe gilt ueberall, nicht nur wo l24-stil.css geladen ist. */
html body [data-farbe="rot"]:not(#_):not(#_):not(#_)     { --f: var(--k-rot);     --ft: var(--k-rot-tief); }
html body [data-farbe="gelb"]:not(#_):not(#_):not(#_)    { --f: var(--k-gelb);    --ft: var(--k-gelb-tief); }
html body [data-farbe="blau"]:not(#_):not(#_):not(#_)    { --f: var(--k-blau);    --ft: var(--k-blau-tief); }
html body [data-farbe="gruen"]:not(#_):not(#_):not(#_)   { --f: var(--k-gruen);   --ft: var(--k-gruen-tief); }
html body [data-farbe="violett"]:not(#_):not(#_):not(#_) { --f: var(--k-blau); --ft: var(--k-blau-tief); }
html body [data-farbe="grau"]:not(#_):not(#_):not(#_)    { --f: var(--k-blau); --ft: var(--k-blau-tief); }
html body [data-verlauf] { cursor: pointer; }

/* Symbolbilder in Zahlenkacheln weg: sie brachten den alten Leuchtfleck zurueck (Max: "einheitlich"). */
html body .zb-kpi .l24-symk-bild:not(#_), html body .zb-kpi.l24-symk[data-sym]:not(#_)::after { display: none !important; }
html body .zb-kpi.l24-symk[data-sym]:not(#_):not(#_) { padding-right: 22px !important; }

/* Benachrichtigungen schlank (Max, Nov. 2026: "Warum muss die Benachrichtigung alles fett sein?
   Kann es ein bisschen lean clean sein?"): Titel normal, nur Ungelesenes halbfett, eine Zeile
   Titel mit Auslassung, Unterzeile leise. */
html body .bell-item .bi-t:not(#_):not(#_) { font-size: 14px !important; font-weight: 450 !important; line-height: 1.35; color: color-mix(in srgb, #111214 75%, white); }
html body .bell-item.neu .bi-t:not(#_):not(#_) { font-weight: 500 !important; color: #111214; }

html body .bell-item .bi-s:not(#_):not(#_) { font-size: 12.5px !important; color: var(--k-grau-tief); opacity: .85; }
html body .bell-item .bi-zeit:not(#_):not(#_) { font-weight: 450 !important; }

/* AMPEL UEBERALL (Max, 5.11.2026: "Grau ist keine Farbe", "warum alles lila"): Gruen gut, Gelb aufpassen,
   Rot schlecht, Blau neutral. Neutrale Marken (Logs, Laeufe, Notizen) sind blau statt grau. */
html body .l24-tag.grau:not(#_):not(#_) { background: color-mix(in srgb, var(--k-blau) 14%, white); color: var(--k-blau-tief); }
/* Pillen ohne Farbe waren grau ("Grau ist keine Farbe", Max, Nov. 2026): neutral heisst blau. */
html body .pille:not(.rot):not(.gelb):not(.gruen):not(.fertig):not(.blau):not(.laeuft):not(.warn):not(.gut):not(.schlecht):not(.orange):not(.violett):not(#_):not(#_),
html body .pille.grau:not(#_):not(#_), html body .pille.blau:not(#_):not(#_) {
  background: color-mix(in srgb, var(--k-blau) 14%, white) !important; color: var(--k-blau-tief) !important; border-color: transparent !important;
}

/* Erklaertexte hinter "Details" (assets/l24-kurz.js, 6. Nov. 2026): klein, blau, ohne Rand. */
html body details.l24-kurz { margin: 6px 0 0; }
html body details.l24-kurz > summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--k-blau-tief); padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--k-blau) 10%, white); }
html body details.l24-kurz > summary::-webkit-details-marker { display: none; }
html body details.l24-kurz[open] > summary { margin-bottom: 6px; }
html body details.l24-kurz > :not(summary) { font-size: 13px !important; line-height: 1.5; }

/* ══ FARBIGES GLAS (Max, 6. Nov. 2026: "das ist alles einfarbiger Pastell-Muell! ... alles verbessern
   auf den Liquid-Colored-Glass-Stil") ══════════════════════════════════════════════════════════════
   EIN Rezept fuer jede Farbkachel der App, Rechner und Handy:
   - kraeftiger Verlauf in der Kachelfarbe (30 % oben links bis 48 % unten rechts) statt 8 bis 17 %;
   - ueberall dasselbe Licht: ein weisser Glanz oben links, eine helle Lichtkante oben;
   - ein farbiger Schein nach unten statt eines grauen Schattens, leichter Weichzeichner dahinter;
   - Zahl in der tiefen Farbe, Beschriftung dunkel genug fuer den kraeftigeren Grund.
   Die Farbe kommt weiter aus --f/--ft (Ampel). Dieser Block steht am Ende und gilt vor den alten. */
html body :is(
  .l24-symk[data-farbe], .l24-kpi, .ka-kachel, .kp-kachel, .karte.an-kpi, .karte.at-kpi, .karte.zb-kpi, .karte.mp-kachel, .karte.nz-kachel, .sz-k,
  .hm-stat, #zahlenKarte > .zeile, #kiKarte > .zeile, .pl-k, .pf-scrollteil > .pf-ctx > .row, .g-ctx .r, .lage .lage-zahl,
  #heute .kachel, .kk-topf-leg > div, .zb-kpis > .karte, .zb-ki-k, .pf-kachel, .l24-kachel
):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(150deg, color-mix(in srgb, var(--f, var(--k-blau)) 30%, white) 0%, color-mix(in srgb, var(--f, var(--k-blau)) 48%, white) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--f, var(--k-blau)) 34%, white) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -14px 26px -20px color-mix(in srgb, var(--ft, var(--k-blau-tief)) 55%, transparent),
    0 12px 28px -18px color-mix(in srgb, var(--f, var(--k-blau)) 85%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
}
/* Beschriftungen auf dem kraeftigeren Glas: dunkel in der Kachelfarbe statt grau. */
html body :is(.hm-stat .hm-lab, .hm-stat .hm-sub, #zahlenKarte > .zeile .s, #kiKarte > .zeile .s, .pl-k .pl-t, .pf-ctx > .row .k, .g-ctx .k, .lage .lage-zahl .n, .lage .lage-zahl .u, #heute .kachel .k, #heute .kachel .n, .kk-topf-leg span, .zb-kpis > .karte .leise):not(#_):not(#_):not(#_):not(#_) {
  color: color-mix(in srgb, var(--ft, var(--k-blau-tief)) 78%, #111) !important;
}
/* Gewaehlt: Ring in der tiefen Farbe, Glas bleibt. */
html body :is(.pl-k.an, .pl-k[aria-pressed="true"], .l24-kpi.an, .sz-k.an):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 2.5px var(--ft, var(--k-blau-tief)), 0 12px 28px -18px color-mix(in srgb, var(--f, var(--k-blau)) 85%, transparent) !important;
}
/* Balken-Segmente (Guthaben-Topf und aehnliche) und Vergleichspillen ebenfalls als Glas. */
html body .kk-topf > i:not(#_):not(#_) { background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%), linear-gradient(150deg, color-mix(in srgb, var(--s) 42%, white), color-mix(in srgb, var(--s) 62%, white)) !important; color: color-mix(in srgb, var(--s) 55%, #111) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
html body .kk-topf > i.gut { --s: var(--k-gruen); } html body .kk-topf > i.weg { --s: var(--k-gelb); } html body .kk-topf > i.kauf { --s: var(--k-blau); }
html body :is(.hm-vgl, .hz-vgl):is(.auf, .ab):not(#_):not(#_) { box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
html body :is(.hm-vgl, .hz-vgl).auf:not(#_):not(#_) { background: color-mix(in srgb, var(--k-gruen) 26%, white) !important; }
html body :is(.hm-vgl, .hz-vgl).ab:not(#_):not(#_) { background: color-mix(in srgb, var(--k-rot) 22%, white) !important; }
html body .lage .lage-zahl .w:not(#_):not(#_):not(#_) { color: var(--ft, var(--k-blau-tief)) !important; }
/* Handy-Kacheln faerben ueber ihre Klasse: dieselben Ampelfarben als --f, damit das Glas stimmt. */
html body #heute .kachel:is(.gut, .hoch):not(#_):not(#_) { --f: var(--k-gruen); --ft: var(--k-gruen-tief); }
html body #heute .kachel:is(.warn, .tief):not(#_):not(#_) { --f: var(--k-gelb); --ft: var(--k-gelb-tief); }
html body #heute .kachel.schlecht:not(#_):not(#_) { --f: var(--k-rot); --ft: var(--k-rot-tief); }
html body #heute .kachel:is(.blau, .grau):not(#_):not(#_) { --f: var(--k-blau); --ft: var(--k-blau-tief); }
/* Gewaehlte Produktions-Kachel war dunkel mit weisser Schrift; auf Glas Schrift in der tiefen Farbe. */
html body .pl-k :is(.pl-n, .pl-t):not(#_):not(#_):not(#_):not(#_) { color: var(--ft, var(--k-blau-tief)) !important; }

/* Druckplan-Kacheln (Max, 6. Nov. 2026: "dass man nicht dreimal eine blaue Farbe hat"): nur die gewaehlte
   Kachel ist farbiges Glas, die anderen weisses Glas mit dunkler Schrift. */
html body .pl-k:not(.an):not([aria-pressed="true"]):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  background: radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--tinte, #111) 1%, white) 0%, color-mix(in srgb, var(--tinte, #111) 4%, white) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--tinte, #111) 9%, white) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px -20px color-mix(in srgb, var(--tinte, #111) 40%, transparent) !important;
}
html body .pl-k:not(.an):not([aria-pressed="true"]) :is(.pl-n, .pl-t):not(#_):not(#_):not(#_):not(#_):not(#_) { color: var(--tinte, #111) !important; }
html body .pl-k:not(.an):not([aria-pressed="true"]) .pl-t:not(#_):not(#_):not(#_):not(#_):not(#_) { color: color-mix(in srgb, var(--tinte, #111) 65%, white) !important; }

/* KEIN SEITLICHES WISCHEN (Max, 9. Nov. 2026: "Warum kann ich hier nach rechts quasi swipen auf der Seite?
   Das darf natuerlich nicht passieren. Pruefe und behebe die Probleme auf allen Seiten"). Anlass: im
   Fall-Archiv war ein Ergebnis-Satz als Pille gesetzt (Pillen brechen nie um, platin.css), 264 px breiter als
   die Karte, die ganze Seite liess sich nach rechts schieben. Die Ursachen werden einzeln behoben (gemessen auf
   allen Seiten in drei Breiten; im Tor prueft tools/seiten-pruefung/pruefe.mjs das als UEBERBREITE). Dies ist das Netz darunter: was trotzdem ueber den
   Rand ragt, wird abgeschnitten statt die Seite breiter zu machen. clip statt hidden: kein eigener Rollbereich,
   klebende Kopfzeilen (position: sticky) bleiben heil. Seitlich rollende Leisten haben ihren eigenen Rollbereich. */
html, body { overflow-x: clip; }
/* Die Ursachen am Handy (Messung 9. Nov. 2026, alle Seiten bei 390 px): Seitenkopf und Knopfreihe brachen nie um,
   die Knoepfe schossen bis zu 168 px ueber den Rand (Kleinanzeigen, Kleinanzeigen-Plan, Logs, Produktion,
   Reproduktionen, Mein Tag). Dazu der Kopf eines Kommentars, der Kopf der Q4-Kachel und die KI-Zeile auf Mein Tag
   mit fester Spaltenbreite. Unter 700 px duerfen sie umbrechen und werden nie breiter als ihr Platz. */
@media (max-width: 700px) {
  html body :is(.skopf, .skopf .aktionen, .l24-page-hd, .l24-page-hd .hd-actions, .kom-beitrag, .q4h-kopf):not(#_):not(#_):not(#_) {
    flex-wrap: wrap !important; max-width: 100%; min-width: 0;
  }
  html body .l24-page-hd .hd-actions:not(#_):not(#_):not(#_) { flex: 1 1 100%; }
  html body #kiKarte .zeile.zr:not(#_):not(#_):not(#_) { grid-template-columns: minmax(0, 1fr) !important; }
  html body #kiKarte .zeile.zr .zwert:not(#_):not(#_):not(#_) { flex-wrap: wrap; min-width: 0; }
  /* Nachmessung live: "rund 189,46 €" in grosser Schrift ist breiter als die Kachel (166 px). Darf umbrechen. */
  html body #kiRest:not(#_):not(#_):not(#_) { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
  /* Druckplan: vier Kacheln passen nicht nebeneinander, am Handy zwei mal zwei. */
  html body .pl-gruppe:not(#_):not(#_):not(#_) { flex-wrap: wrap !important; }
  html body .pl-gruppe > .pl-k:not(#_):not(#_):not(#_) { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }
}

/* ZAEHLER MITTIG (Max, 9. Nov. 2026: "Warum ist hier 1018 nicht zentriert?"). Eine spaetere Regel machte aus
   .zaehler ein display: block, die Zahl sass oben (1 px oben, 7 px unten). Jetzt in beide Richtungen mittig. */
/* Dazu optisch: Ziffern haben keine Unterlaengen, die Schrift haelt unten aber Platz dafuer frei. Gemessen sassen die
   Ziffern 1 px zu hoch (5 px oben, 7,1 px unten); 0,16 em Polster oben gleicht das aus. */
html body .zaehler:not(#_):not(#_) { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; vertical-align: middle; padding-top: .16em !important; padding-bottom: 0 !important; }