/* ==========================================================================
   L24-RUHE (3.11.2026) - die letzte Schicht: ein Grund, eine Form

   Max am 3.11.2026 zu vier Bildern der App:
   1. Das karierte Hintergrundraster ("Mathebuch-Stil") muss weg, fuer immer.
      Statt Lichtflecken, Karo und Schraegstreifen: EINE ruhige Flaeche.
   2. Gleiche Elemente ueberall gleich: Umschalter, Reiter, Pillen, Karten und
      Knoepfe mit demselben Radius, demselben Rand, derselben Hoehe.

   Wie das gebaut ist: Die App hat mehrere Stil-Schichten uebereinander
   (platin*.css aus den Boards, l24-v2/v26, l24-look, l24-stil). Jede brachte
   eigene Radien mit (7, 9, 10, 12, 14, 20, 999 px). Diese Datei laedt als
   LETZTE und setzt die Form aus wenigen Tokens. Wer eine Ecke aendern will,
   aendert das Token hier, nicht die Seite.

   Geladen nach l24-stil.css: index.html, mobil.html, l24.css, platin-seite.css.
   Gegenprobe: app/tests/ruhe.test.mjs (kein Raster, keine Streifen, Tokens).
   ========================================================================== */

:root {
  /* Flaechen */
  --l24-grund: #F3F4F6;          /* Seitengrund, einfarbig */
  --l24-flaeche: #FFFFFF;        /* Karten, Knoepfe, Felder */
  --l24-flaeche-2: #ECEEF1;      /* Schiene von Umschaltern und Reitern */
  --l24-rand: #E1E3E7;           /* der eine Rand */
  --l24-rand-stark: #C9CDD3;     /* Rand bei Hover */
  --l24-text: #17181B;
  --l24-text-2: #4B4F57;         /* Nebentext, 7,9:1 auf Weiss */

  /* Form */
  --l24-r-karte: 22px;           /* Karten, Kacheln, Dialoge (Nov. 2026: runder wie HHV/ClosingHub) */
  --l24-r-kontrolle: 14px;       /* Knoepfe, Felder, Schienen */
  --l24-r-innen: 11px;           /* Eintrag in einer Schiene (14 minus 3 Innenabstand) */
  --l24-r-pille: 999px;          /* Pillen und Marken: ganz rund */
  --l24-h-kontrolle: 36px;
  --l24-h-innen: 30px;
  --l24-h-pille: 24px;
  --l24-schatten-karte: 0 1px 2px rgba(23, 24, 27, .04), 0 4px 16px -8px rgba(23, 24, 27, .10);
  --l24-schatten-kontrolle: 0 1px 2px rgba(23, 24, 27, .05);
}
@media (max-width: 700px) {
  :root { --l24-h-kontrolle: 44px; --l24-h-innen: 36px; }
}

/* ── 1. Grund: einfarbig auf jeder Seite ─────────────────────────────────── */
html:not(.im-rahmen), html:not(.im-rahmen) body, html body .shell-top, html body #app.app, html body .app, html body #gespraech,
html:not(.im-rahmen) body.seite, html:not(.im-rahmen) body.seite.dim {
  background: var(--l24-grund) !important;
}
html.im-rahmen, html.im-rahmen body, html.im-rahmen body.seite.dim { background: transparent !important; }
html body :is(.shell-top, .seite, .app, #app)::before { background-image: none !important; }

/* ── 2. Karten: weiss, ein Rand, eine Ecke ───────────────────────────────── */
html body :is(.karte, .l24-card):not(.l24-kachel):not(.sup-kpi):not(.sd-kpi):not(#fragenHinweis):not(:is(.zb-kpis, .kpis, .dr-kpis, .plan-kpis, .sup-kpis, .sd-kpis, .an-kpis, .prod-kpis, .raster-3, .l24-kpi-grid) > *) {
  background: var(--l24-flaeche) !important;
  border: 1px solid var(--l24-rand) !important;
  border-radius: var(--l24-r-karte) !important;
  box-shadow: var(--l24-schatten-karte) !important;
}
html body :is(.l24-kpi-grid > .l24-kpi, .sup-kpis > .sup-kpi, .sd-kpis > .sd-kpi, .an-kpis > .karte, .raster-3 > section.karte, .prod-kpis > *, .zb-kpis > *, .kpis > *, .dr-kpis > *, .plan-kpis > *, .pf-lk, .l24-kachel) {
  border-radius: var(--l24-r-karte) !important;
}
html body :is(#sidebar.d-leiste, .d-haupt) {
  background: var(--l24-flaeche) !important; border: 1px solid var(--l24-rand) !important;
  box-shadow: var(--l24-schatten-karte) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Spezifitaet: ":not(#_)" hebt jede Regel hier ueber die Seitenregeln
   (eine Id zaehlt mehr als jede Klassenkette), ohne die Seiten anzufassen. */

/* ── 3. Knoepfe: eine Hoehe, eine Ecke, ein Rand ─────────────────────────── */
html body :is(.knopf, .l24-btn):not(.ico):not(.rund):not(.pf-lk):not(.l24-tab):not(.side-btn):not(.size-opt):not(#_) {
  min-height: var(--l24-h-kontrolle) !important; border-radius: var(--l24-r-kontrolle) !important;
}
html body :is(.knopf.klein, .l24-btn.sm):not(.ico):not(.side-btn):not(.size-opt):not(#_) { min-height: 32px !important; }
@media (max-width: 700px) {
  html body :is(.knopf.klein, .l24-btn.sm):not(.ico):not(.side-btn):not(.size-opt):not(#_) { min-height: 40px !important; }
}
html body :is(.knopf.sek, .l24-btn:not(.primary):not(.dark):not(.danger):not(.on):not(.l24-tab):not(.pf-lk):not(.side-btn):not(.size-opt)):not(#_) {
  background: var(--l24-flaeche) !important; border: 1px solid var(--l24-rand) !important; box-shadow: var(--l24-schatten-kontrolle) !important;
}
@media (hover: hover) {
  html body :is(.knopf.sek, .l24-btn:not(.primary):not(.dark):not(.danger):not(.on):not(.l24-tab):not(.pf-lk):not(.side-btn):not(.size-opt)):not(#_):hover {
    background: #F7F8F9 !important; border-color: var(--l24-rand-stark) !important;
  }
}
html body :is(.knopf.prim, .l24-btn.primary, .l24-btn.dark):not(#_) { border: 1px solid transparent !important; }
html body :is(.l24-btn.ico, .knopf.ico):not(#_) { border-radius: var(--l24-r-kontrolle) !important; }

/* ── 4. Umschalter und Reiter: eine Schiene ──────────────────────────────── */
html body :is(.segment, .l24-tabs, .sides:not(.sides-maxi), .manual-size, .prow.pfilter, .tabgrid.prow, .hk-wahl, .sz-wahl, .st .pillen, .qk-monate):not(#_) {
  padding: 3px !important; gap: 2px !important; border-radius: var(--l24-r-kontrolle) !important;
  background: var(--l24-flaeche-2) !important; border: 1px solid var(--l24-rand) !important; box-shadow: none !important;
}
/* Eintraege in der Schiene */
html body :is(.segment > span, .segment > button, .segment > a, .l24-tabs > .l24-tab, .l24-tabs > button, .sides > .side-btn, .manual-size > .size-opt, .hk-wahl > button, .sz-wahl > button, .st .pillen > button, .qk-monate > button):not(.l24-gleiter):not(#_) {
  min-height: var(--l24-h-innen) !important; height: var(--l24-h-innen) !important; border-radius: var(--l24-r-innen) !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--l24-text-2) !important;
}
/* Der gewaehlte Eintrag: weiss gehoben (mit Gleiter liest l24-animation.js genau dieses Aussehen ab).
   .on und aria-checked gehoeren dazu (Nov. 2026): Lampen-Studio, Lichtbox, Kleinanzeigen und
   Retouren markieren so, und ohne sie war die Wahl in der Schiene nur an etwas dunklerer
   Schrift zu erkennen, weil die Regel oben jeden Schatten und jede Flaeche abraeumt. */
html body :is(.segment, .l24-tabs, .manual-size, .hk-wahl, .sz-wahl, .st .pillen, .qk-monate) > :is(.an, .hk-an, .active, .on, [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"]):not(.l24-gleiter):not(#_):not(#__) {
  background: var(--l24-flaeche) !important; color: var(--l24-text) !important;
  box-shadow: 0 1px 2px rgba(23, 24, 27, .08), 0 0 0 1px rgba(23, 24, 27, .05) !important;
}
html body .mit-gleiter > :is([aria-pressed="true"], .an, .active, .on, [aria-selected="true"], [aria-checked="true"]):not(.l24-gleiter):not(#_):not(#__):not(#___) {
  background: transparent !important; box-shadow: none !important;
}
/* Front/Back im Druckplan: erledigt heisst gruen, in derselben Form */
html body .sides > .side-btn.on:not(#_):not(#__) {
  background: color-mix(in srgb, #22C55E 15%, #fff) !important; color: #146236 !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #22C55E 30%, transparent) !important;
}
@media (hover: hover) {
  html body :is(.sides > .side-btn, .manual-size > .size-opt, .l24-tabs > .l24-tab):not(.on):not(.active):not(#_):not(#__):hover { color: var(--l24-text) !important; background: rgba(255, 255, 255, .6) !important; }
}

/* ── 5. Pillen und Marken: dieselbe Ecke wie innen ───────────────────────── */
html body :is(.pille, .l24-tag, .chip, .l24-pill, .gr-pille):not(.pf-lk):not(#_) {
  min-height: var(--l24-h-pille) !important; border-radius: var(--l24-r-pille) !important;
}

/* ── 6. Felder ───────────────────────────────────────────────────────────── */
html body :is(.feld, .l24-input, .l24-select, .l24-search, .such-feld, .ms-feld) {
  border-radius: var(--l24-r-kontrolle) !important; border: 1px solid var(--l24-rand) !important; background: var(--l24-flaeche) !important;
}
@media (max-width: 700px) {
  html body :is(.l24-input, .l24-select, input.feld, select.feld) { min-height: var(--l24-h-kontrolle); font-size: 16px; }
}

/* ── 7. Menues, Dialoge, Seitenblatt ─────────────────────────────────────── */
html body :is(.l24-modal, .pf-vollbild > .l24-card, .ship-card, .modal-box) { border-radius: var(--l24-r-karte) !important; }
html body :is(.pf-sortmenue, .tb-user-menu, .tb-bell-menu, .menue, .pop) { border-radius: var(--l24-r-kontrolle) !important; background: var(--l24-flaeche) !important; }

/* Postfach: Liste, Fallansicht und Fragen-Karten sind ebenfalls Karten */
html body :is(.pf-split > .l24-split-list, .pf-split > .pf-detail, .fg-karte) {
  background: var(--l24-flaeche) !important; border: 1px solid var(--l24-rand) !important;
  border-radius: var(--l24-r-karte) !important; box-shadow: var(--l24-schatten-karte) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ── 8. Seiteneigene Bausteine auf dieselben Tokens (Messung 3.11.2026) ──
   Gefunden mit einer Formen-Pruefung ueber alle Seiten: Knoepfe mit 17 bis
   23 px Ecke, Pillen mit 0/12/14 px, Kacheln mit 20/24 px. */
/* Reiter ausserhalb einer Schiene (Postfach-Band) */
html body .l24-tab:not(#_) { border-radius: var(--l24-r-innen) !important; }
/* Knoepfe */
html body :is(.ka-bandknopf, .l24d-knopf:not(.l24d-nackt), .heuteknopf, .sw-knopf, .l24-lgf, select.feld, .kal select, .pf-kachel):not(#_) {
  border-radius: var(--l24-r-kontrolle) !important;
}
/* Pillen */
html body :is(.mp-rpille, .f-pille, .pille-ruhig, .wb-pille, .td-pillen > *, .auf-pillen > *):not(#_) { border-radius: var(--l24-r-pille) !important; }
/* Kacheln und Kalender-Tage */
html body :is(.an-kpi, .sp-kachel, .gen-kachel, .ent-z):not(#_) { border-radius: var(--l24-r-karte) !important; }
html body :is(.tag, .qk-tag):is(button):not(#_) { border-radius: var(--l24-r-kontrolle) !important; }
html body :is(.auf-wahlzeile, .wi-suche):not(#_) { border-radius: var(--l24-r-kontrolle) !important; }

/* ── 9. Handy (375 px): Tippflaechen und knappe Kontraste (Messung 3.11.2026) ──
   Gemessen auf allen Seiten bei 375 px: Knoepfe, Felder und Aufklapper unter
   32 px Hoehe, Haken mit 22 px. Ziel 40 px (Haken 28 px), ohne die Form zu
   aendern. Kontrast: vier Pillen knapp unter 4,5:1, jetzt dunklere Schrift. */
@media (max-width: 700px) {
  html body :is(.pf-kachel, .pf-akte, .sw-knopf, .mehr, .ls-mehr, .qk-link, .ao-link, .td-prio, .l24d-knopf, button.meta-ls, .auf-wahl, summary):not(#_) {
    min-height: 40px !important; display: inline-flex; align-items: center;
  }
  html body summary:not(#_) { display: flex; }
  html body :is(.l24-search, .such-feld, .feld, .ms-feld) input:not(#_), html body :is(.akte-suche, .fa-suche, .kom-suche) input:not(#_) { min-height: 36px; }
  html body :is(input[type="checkbox"], .haken, .qa-haken, .t-check, .cb):not(#_) { min-width: 28px; min-height: 28px; }
  html body .cr-copy:not(#_) { min-width: 36px; min-height: 36px; }
  html body .bal .seg:not(#_) { min-height: 32px; }
  html body .l24-tabs > .l24-tab:not(#_) { min-width: 40px; flex-shrink: 0; }
}
html body :is(.pille.rot, .l24-tag.red, .l24-tag.rot):not(#_) { color: #9F1239 !important; }
html body :is(.pille-ruhig, .diff.plus):not(#_) { color: #0F5130 !important; }
/* Seiten fuer den Rechner, falls doch am Handy geoeffnet: nichts ueber den Rand */
@media (max-width: 700px) {
  html body :is(.pf-band, .pf-bandteil, .pf-lagekacheln):not(#_) { flex-wrap: wrap !important; max-width: 100%; min-width: 0; }
  html body .pf-band .l24-tabs:not(#_) { display: flex; max-width: 100%; overflow-x: auto; }
  html body .pf-split:not(#_) { flex-direction: column; }
  html body .pf-split > *:not(#_) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  html body .pf-lagekacheln:not(#_) { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; width: 100%; }
  html body .q4h-ust-form > *:not(#_) { min-width: 0; max-width: 100%; }
  /* Hinweiskarte mit Zeichen, Text und Knopf in einer Reihe: der Knopf rutscht unter den Text */
  html body .karte:has(> .symq):has(> .knopf):not(#_) { flex-wrap: wrap; }
  html body .karte:has(> .symq) > div:not(#_) { flex: 1 1 0; min-width: 0; }
  html body .karte:has(> .symq) > .knopf:not(#_) { margin-left: 48px; white-space: normal; }
  html body .karte :is(.kkopf, .kfuss, .knoepfe):not(#_) { flex-wrap: wrap; }
}

/* ── 10. Handy-App (mobil.html, #app): dieselben Tokens ─────────────────────
   Gemessen in Heute, Postfach, Produktion, To-Do, Aufgaben, Mehr: Karten mit
   20/24 px, Knoepfe mit 22/24 px, Marken mit 11 bis 14 px. Jetzt wie am Rechner. */
html body #app :is(.b-karte, .b-insel, .lampe, .auf, .gruppe, .fall, .ent-z, .kachel, .lgf):not(#_) { border-radius: var(--l24-r-karte) !important; }
html body #app :is(.hk-seite, .b-knopf, .hk, .b-symq, .ent-ic):not(#_) { border-radius: var(--l24-r-kontrolle) !important; }
html body #app :is(.marke, .dringend, .alt, .frist, .pers, .repro, .prod, .b-pille, .ent-zahl, .auf > span, .lampe span[class]):not(.fall-ava):not(.b-symq):not(#_) {
  border-radius: var(--l24-r-pille) !important;
}

/* Umschalter als ganz runde Pille, wie "Tag | Woche | Monat" bei HHV (Max, Nov. 2026: "Ich will es
   runder haben ... viel schoener als dieses harte, kantige"). */
html body :is(.segment, .l24-tabs, .hk-wahl, .sz-wahl, .st .pillen, .qk-monate):not(#_) { border-radius: 999px !important; }
html body :is(.segment, .l24-tabs, .hk-wahl, .sz-wahl, .st .pillen, .qk-monate) > :is(span, button, a, .l24-tab):not(.l24-gleiter):not(#_) { border-radius: 999px !important; }
html body .l24-gleiter { border-radius: 999px !important; }
html body :is(.knopf, .l24-btn):not(.ico):not(.rund):not(#_):not(#__) { border-radius: 999px !important; }
/* Produktbild in der Produktion bleibt eine Kachel, kein Kreis (Pillen-Radius traf .lb mit). */
html body .lampe .lb:not(#_):not(#__) { border-radius: 14px !important; overflow: hidden; }