/* TradeHub – Fristen (viewFristen) — v4.771; Neuaufbau v4.777, 08.09.2026
   - Markup: /views/fristen.view.html   - Logik: /js/fristen.js   - Rechnung: fristen_lib.php
   Aufbau nach Peters freigegebenem Mockup „Vorschlag 1" (Artefakt vom 08.09.2026): drei klickbare Kennzahlkacheln
   (Überfällig / Heute fällig / Diese Woche) mit weichem Schimmer in der Kachelfarbe, Gruppenköpfe farbig nach
   Dringlichkeit mit Zahl-Pille, Bereichspille je Zeile, rechts drei Karten (Monat + Legende, Tagesauszug,
   Erinnerung), die zusammen wie die Liste bis an den unteren Rand reichen — der Kalender nimmt die Resthöhe.
   Peters Regeln: keine farbigen Ränder (Zustand nur über Schimmer und Punkt), nichts kursiv, hell UND dunkel in
   EINER Datei, Bewegung nur als kurzes Anheben — und die hängt am Schalter Mein Konto → Bewegungen.
   Die Knöpfe „Aktualisieren"/„Eigene Frist" stehen in der Kopfleiste (#topActions, index.html). */

/* Marken auf dem Container, damit auch das Fenster (Geschwister der Seite) sie erbt.
   Symbolflächen hell kräftiger als in CBAM (#e9f2fb → #d6e8f8 usw.): Peter, 08.09.2026 — „im hellen Modus sieht man
   den Rand des Symbols nicht mehr". Verhältnis Fläche zu Karte jetzt ≈ 1,25:1 statt ≈ 1,1:1. */
#viewFristen{--cbBlau:#2a87c8;--cbBlauD:#185fa5;
  --cbGrund:#f4f5f6;--cbKarte:#fff;--cbKarte2:#f6f8fb;--cbLinie:#e5e7eb;--cbLinie2:#eef0f3;
  --cbInk:#111827;--cbMut:#5f6b76;--cbSoft:#4b5563;--cbDatum:#1b6ea8;
  --cbGruen:#16a34a;--cbGruenT:#d3efe0;--cbGruenI:#0f8a4f;--cbBlauT:#d6e8f8;--cbBlauI:#1b6ea8;
  --cbAmberT:#fbe4bd;--cbAmberI:#b45309;--cbPillB:#e9f2fb;--cbPillBt:#185fa5;--cbPillA:#fef3c7;--cbPillAt:#b45309;
  --cbPillG:#e8ecf1;--cbPillGt:#334155;--cbSpur:#e5e7eb;--cbMarker:#4b5563;
  --cbSchatten:0 1px 2px rgba(17,24,39,.04),0 8px 24px -18px rgba(17,24,39,.25);
  --frSchattenHoch:0 2px 4px rgba(17,24,39,.05),0 14px 28px -16px rgba(17,24,39,.35);
  --frViolT:#e4dcf8;--frViolI:#6d4fc2;--frRotT:#fadada;--frRotI:#b91c1c;
  --frPillR:#fee2e2;--frPillRt:#b91c1c;--frPillOk:#e6f6ee;--frPillOkt:#0b6f40;--frPillV:#efe9fb;--frPillVt:#5b3fb0;
  --frHeute:#185fa5;--frSegTx:#5f6b76;
  --frToneRot:185,28,28;--frToneBlau:27,110,168;--frToneAmber:180,83,9}
html[data-theme=dark] #viewFristen{--cbBlau:#63b8ea;--cbBlauD:#2a87c8;
  --cbGrund:var(--sbPage,#0a1a2b);--cbKarte:var(--sbCard,#0f2338);--cbKarte2:#152a44;--cbLinie:var(--sbLine,rgba(255,255,255,.10));--cbLinie2:var(--sbLineSoft,rgba(255,255,255,.06));
  --cbInk:var(--sbInk,#e9eff7);--cbMut:#8fa4bd;--cbSoft:#c3d0de;--cbDatum:#7cc0ee;
  --cbGruen:#3fbf7f;--cbGruenT:rgba(78,207,146,.16);--cbGruenI:#4ecf92;--cbBlauT:rgba(77,163,232,.18);--cbBlauI:#5db0f0;
  --cbAmberT:rgba(245,158,11,.16);--cbAmberI:#f2ab63;--cbPillB:rgba(77,163,232,.16);--cbPillBt:#8cc7f3;--cbPillA:rgba(245,158,11,.18);--cbPillAt:#f2c27a;
  --cbPillG:rgba(255,255,255,.08);--cbPillGt:#c3d0de;--cbSpur:rgba(255,255,255,.10);--cbMarker:#c3d0de;
  --cbSchatten:0 1px 2px rgba(0,0,0,.25),0 10px 30px -20px rgba(0,0,0,.6);
  --frSchattenHoch:0 2px 4px rgba(0,0,0,.3),0 16px 32px -16px rgba(0,0,0,.7);
  --frViolT:rgba(139,110,230,.18);--frViolI:#b7a4f0;--frRotT:rgba(239,68,68,.16);--frRotI:#ff8a8a;
  --frPillR:rgba(239,68,68,.16);--frPillRt:#ff8a8a;--frPillOk:rgba(34,197,94,.16);--frPillOkt:#5ad98a;--frPillV:rgba(139,110,230,.18);--frPillVt:#c4b5f5;
  --frHeute:#1f6fae;--frSegTx:#b3c2d4;   /* Weiß auf #2a87c8 nur 3,9:1, auf #1f6fae 5,3:1 (wie die Chips) */
  --frToneRot:255,138,138;--frToneBlau:93,176,240;--frToneAmber:242,171,99}

/* switchViews() zeigt die Ansicht mit display:flex!important — Spalte, eigenes Scrollen.
   v4.778: flex:1 1 auto — die Ansicht füllt #viewsWrap immer ganz. Vorher war sie inhaltshoch (flex 0 1 auto): bei wenigen
   Zeilen (Kachel „Heute fällig") endeten beide Spalten mitten auf der Seite (Peter, 08.09.2026: „ich will, dass die bis runter
   gehen"); auf dem Prüfstand fiel es nicht auf, weil der Inhalt dort zufällig die Fensterhöhe traf. */
#viewFristen{flex:1 1 auto;min-height:0;flex-direction:column;width:100%;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:0!important;color:var(--cbInk)}
/* v4.779: Beim Ansichtswechsel mit eingeschalteter Bewegung stehen alte und neue Ansicht bis zu 260 ms übereinander in der
   flex-Spalte #viewsWrap; die neue (flex:1, min-height:0) wird dabei gequetscht und zeigte kurz ihren Rollbalken — die Kacheln
   rutschten danach nach rechts (Peter, 08.09.2026). Solange die Ansicht einläuft, gibt es keinen Rollbalken. */
#viewFristen.view-enter{overflow-y:hidden!important}
#viewFristen > *{flex-shrink:0}
#viewFristen > .frSeite{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:2px 2px 14px}
#viewFristen .frSeite > *{flex-shrink:0}
#viewFristen .frSeite > .frZwei{flex:1 1 auto;min-height:440px}

/* ── Kopf ── */
.frKopf{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.frKopf > div:first-child{flex:1;min-width:0}

/* ── Filterchips + Zeitfenster ── */
.frChips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 14px}
.frChip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--cbLinie);background:var(--cbKarte);font:inherit;font-size:13px;font-weight:600;color:var(--cbSoft);cursor:pointer;transition:background-color .15s ease}
.frChip:hover{background:var(--cbKarte2)}
.frChip.on,.frChip.on:hover{background:var(--cbBlauD);color:#fff;border-color:transparent}
html[data-theme=dark] .frChip.on,html[data-theme=dark] .frChip.on:hover{background:#1f6fae}   /* Kontrast weiß 5,3:1 (auf --cbBlauD nur 3,9:1) */
.frChip i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.frChip .n{font-size:11.5px;font-weight:700;opacity:.75;font-variant-numeric:tabular-nums}
.frChips .cbSeg{margin-left:auto}
#viewFristen .cbSeg button{color:var(--frSegTx)}   /* #6b7280 kam hell nur auf 4,2:1 */

/* ── Kennzahlkacheln: klickbar (Fokus auf eine Gruppe), Schimmer in der Kachelfarbe, Punkt bei aktivem Fokus ── */
.frKpis{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-bottom:14px}
.frKpi{grid-column:span 4;position:relative;text-align:left;border:1px solid var(--cbLinie);border-radius:12px;padding:11px 44px 11px 20px;display:flex;gap:16px;align-items:flex-start;box-shadow:var(--cbSchatten);min-width:0;cursor:pointer;color:inherit;font:inherit;
  --frTone:var(--frToneBlau);
  background:radial-gradient(900px 420px at 10% 0%,rgba(var(--frTone),.14),transparent 60%),var(--cbKarte);
  transition:transform .15s ease,box-shadow .15s ease}
.frKpi:hover{transform:translateY(-2px);box-shadow:var(--frSchattenHoch)}
.frKpi:focus-visible{outline:2px solid var(--cbBlau);outline-offset:2px}
.frKpi.rot{--frTone:var(--frToneRot)} .frKpi.amber{--frTone:var(--frToneAmber)}
.frKpi.on{background:radial-gradient(900px 420px at 10% 0%,rgba(var(--frTone),.28),transparent 62%),var(--cbKarte)}
.frKpi .frKreis{width:52px;height:52px}
.frKpi .frKreis svg{width:26px;height:26px}
.frKpi .txt{min-width:0}
.frKpi .t{font-size:15px;font-weight:600;color:var(--cbSoft);line-height:1.25;display:flex;align-items:center;gap:8px}
.frKpi .t i{display:none;width:8px;height:8px;border-radius:50%;background:rgb(var(--frTone));flex:0 0 auto}
.frKpi.on .t i{display:inline-block}
.frKpi .v{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:2px 0 3px;color:var(--cbInk);font-variant-numeric:tabular-nums;white-space:nowrap}
.frKpi .s{font-size:12.5px;color:var(--cbMut);line-height:1.35;min-height:2.7em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.frKpi .frPf{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.frKpi.on .frPf{color:rgb(var(--frTone))}

/* ── Zwei Spalten: links die Liste, rechts drei Karten ── */
.frZwei{display:grid;grid-template-columns:minmax(0,8fr) minmax(380px,4fr);gap:16px;align-items:stretch;min-height:0}
.frCard{display:flex;flex-direction:column;min-height:0;min-width:0}
.frListeCard{min-height:0}
.frListe{flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:6px}
.frListeFuss{flex:0 0 auto;border-top:1px solid var(--cbLinie2);padding:9px 20px;font-size:12px;color:var(--cbMut);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.frListeFuss b{color:var(--cbSoft);font-weight:600}
.frRechts{display:flex;flex-direction:column;gap:11px;min-height:0;min-width:0;overflow:auto}
.frRechts > .frCard{flex:0 0 auto}
/* Der Kalender nimmt die Resthöhe, damit die rechte Spalte wie die Liste bis unten reicht (Peter: „der Platz wird komplett
   ausgenutzt"); er schrumpft nur bis zur Mindesthöhe der Tageskästchen — kein min-height:0, sonst wird er zerdrückt. */
.frRechts > .frMonatKarte{flex:1 1 auto;display:flex;flex-direction:column}

/* Gruppenkopf: farbig nach Dringlichkeit, Zahl als Pille */
.frGruppe{position:sticky;top:0;z-index:1;background:var(--cbKarte);padding:14px 20px 6px;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--cbInk);display:flex;align-items:center;gap:9px}
.frGruppe svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.frGruppe .z{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;background:var(--cbPillG);color:var(--cbPillGt);font-variant-numeric:tabular-nums}
.frGruppe.rot{color:var(--frRotI)} .frGruppe.rot .z{background:var(--frPillR);color:var(--frPillRt)}
.frGruppe.blau{color:var(--cbDatum)} .frGruppe.blau .z{background:var(--cbPillB);color:var(--cbPillBt)}
.frGruppe.amber{color:var(--cbAmberI)} .frGruppe.amber .z{background:var(--cbPillA);color:var(--cbPillAt)}
.frGruppe .hin{font-weight:500;color:var(--cbMut);font-size:12.5px;letter-spacing:0}
.frGruppe .frLink{margin-left:auto;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--cbDatum);cursor:pointer;padding:0}
.frGruppe .frLink:hover{text-decoration:underline}

/* Zeile: Datum · Symbol · Text (mit Bereichspille) · Fälligkeit · Pfeil */
.frZeile{display:grid;grid-template-columns:56px 40px minmax(0,1fr) 150px 20px;gap:14px;align-items:center;width:100%;padding:10px 20px;border:0;border-top:1px solid var(--cbLinie2);background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .15s ease}
.frZeile:hover,.frZeile:focus-visible{background:var(--cbKarte2);outline:none}
.frDat{text-align:center;line-height:1.1}
.frDat b{display:block;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--cbInk)}
.frDat span{font-size:11px;color:var(--cbMut);font-weight:600;letter-spacing:.04em}
.frDat.rot b{color:var(--frRotI)} .frDat.blau b{color:var(--cbDatum)} .frDat.amber b{color:var(--cbAmberI)}
.frKreis{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}   /* rund — Peters Entscheidung 08.09.2026 */
.frKreis svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.frKreis.blau{background:var(--cbBlauT);color:var(--cbBlauI)}
.frKreis.amber{background:var(--cbAmberT);color:var(--cbAmberI)}
.frKreis.gruen{background:var(--cbGruenT);color:var(--cbGruenI)}
.frKreis.rot{background:var(--frRotT);color:var(--frRotI)}
.frKreis.viol{background:var(--frViolT);color:var(--frViolI)}
.frKreis.grau{background:var(--cbPillG);color:var(--cbPillGt)}
.frTxt{min-width:0}
.frTxt .tt{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cbInk)}
.frTxt .ss{display:flex;align-items:center;gap:8px;min-width:0;margin-top:3px}
.frTxt .frSub{font-size:12.5px;color:var(--cbMut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}   /* eigene Klasse — „.ss span" träfe auch die Bereichspille */
/* Bereichspille — NIE kursiv (Peter, 08.09.2026) */
.frTag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;font-style:normal;white-space:nowrap;flex:0 0 auto;letter-spacing:.01em}
.frTag.b{background:var(--cbPillB);color:var(--cbPillBt)} .frTag.a{background:var(--cbPillA);color:var(--cbPillAt)} .frTag.ok{background:var(--frPillOk);color:var(--frPillOkt)}
.frTag.v{background:var(--frPillV);color:var(--frPillVt)} .frTag.g{background:var(--cbPillG);color:var(--cbPillGt)}
.frPi{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;justify-self:start}
.frPi i{width:7px;height:7px;border-radius:50%;background:currentColor}
.frPi.b{background:var(--cbPillB);color:var(--cbPillBt)}
.frPi.a{background:var(--cbPillA);color:var(--cbPillAt)}
.frPi.g{background:var(--cbPillG);color:var(--cbPillGt)}
.frPi.r{background:var(--frPillR);color:var(--frPillRt)}
.frPi.ok{background:var(--frPillOk);color:var(--frPillOkt)}
.frPf{color:var(--cbMut);width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.frLeer{padding:44px 20px;color:var(--cbMut);text-align:center;font-size:14px}

/* ── Rechts 1: Monat (füllt die Resthöhe) + Legende ── */
.frMonat{flex:1 1 auto;display:flex;flex-direction:column;padding:10px 16px 4px}
.frMonatKopf{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15px;margin-bottom:8px;color:var(--cbInk)}
.frMonatKopf button{border:0;background:transparent;color:var(--cbMut);cursor:pointer;padding:4px;border-radius:8px;display:flex}
.frMonatKopf button:hover{background:var(--cbKarte2);color:var(--cbInk)}
.frMonatKopf svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.frRaster{flex:1 1 auto;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto;grid-auto-rows:minmax(27px,1fr);gap:4px;font-size:12.5px;text-align:center}
.frRaster .wt{color:var(--cbMut);font-size:11px;font-weight:700;padding-bottom:2px}
/* Dezenter NEUTRALER Rahmen um jeden Tag (Peter: „damit das nicht so leer aussieht") — Linienfarbe, nie eine Zustandsfarbe.
   Überfahren: kurzes weiches Anheben mit blauem Schimmer („wertiger und flüssiger"); jeder Tag des Monats ist wählbar. */
.frRaster .tg{height:auto;min-height:27px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--cbSoft);font-variant-numeric:tabular-nums;border:1px solid var(--cbLinie);background:transparent;font:inherit;padding:0;cursor:pointer;position:relative;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.frRaster .tg:not(.leer):not(.heute):hover,.frRaster .tg:not(.leer):not(.heute):focus-visible{outline:none;color:var(--cbDatum);border-color:transparent;transform:translateY(-2px) scale(1.06);z-index:1;
  background:radial-gradient(64px 44px at 50% 0%,rgba(var(--frToneBlau),.22),transparent 72%),var(--cbKarte2);
  box-shadow:0 8px 18px -10px rgba(var(--frToneBlau),.55),0 2px 6px rgba(17,24,39,.08)}
.frRaster .tg.leer{opacity:.35;cursor:default}
.frRaster .tg.wahl{background:var(--cbBlauT);color:var(--cbBlauI);font-weight:800}
.frRaster .tg.heute,.frRaster .tg.heute.wahl{background:var(--frHeute);border-color:var(--frHeute);color:#fff;font-weight:800}
.frRaster .tg.heute:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 20px -10px rgba(var(--frToneBlau),.7)}
.frRaster .p{display:flex;gap:2px;height:4px}
.frRaster .p i{width:4px;height:4px;border-radius:50%;background:var(--cbAmberI)}
.frRaster .p i.b{background:var(--cbBlauI)}
.frRaster .p i.g{background:var(--cbGruenI)}
.frRaster .p i.v{background:var(--frViolI)}
.frRaster .p i.x{background:var(--cbPillGt)}
.frRaster .p i.r{background:var(--frRotI)}
.frRaster .tg.heute .p i{background:#fff}
.frLegende{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 16px 9px;font-size:11.5px;color:var(--cbMut)}
.frLegende span{display:inline-flex;align-items:center;gap:6px}
.frLegende i{width:8px;height:8px;border-radius:50%}

/* ── Rechts 2: Tagesauszug (Klick auf einen Kalendertag füllt ihn; Vorgabe heute) ── */
.frTagKopf{display:flex;align-items:center;gap:10px;padding:12px 16px 6px}
.frTagKopf .t{font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--cbInk)}
.frTagKopf .hin{font-weight:500;color:var(--cbMut);font-size:12.5px}
.frTagKopf .z{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;background:var(--cbPillG);color:var(--cbPillGt);font-variant-numeric:tabular-nums}
.frTagKopf .z.rot{background:var(--frPillR);color:var(--frPillRt)} .frTagKopf .z.blau{background:var(--cbPillB);color:var(--cbPillBt)} .frTagKopf .z.amber{background:var(--cbPillA);color:var(--cbPillAt)}
.frTagZeile{display:grid;grid-template-columns:32px minmax(0,1fr) 20px;gap:12px;align-items:center;width:100%;padding:8px 16px;border:0;border-top:1px solid var(--cbLinie2);background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .15s ease}
.frTagZeile:hover,.frTagZeile:focus-visible{background:var(--cbKarte2);outline:none}
.frTagZeile .frKreis{width:32px;height:32px}
.frTagZeile .frKreis svg{width:17px;height:17px}
.frTagZeile .tt{font-size:13.5px}
.frTagZeile .frSub{font-size:12px}
.frTagFuss{padding:6px 16px 10px;border-top:1px solid var(--cbLinie2)}
.frTagFuss button{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--cbDatum);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:4px}
.frTagFuss button:hover{text-decoration:underline}
.frTagFuss svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.frTagLeer{padding:12px 16px 14px;color:var(--cbMut);font-size:13px;border-top:1px solid var(--cbLinie2)}

/* ── Rechts 3: Erinnerung per Mail (Schalter, wählbarer Vorlauf, Adresse) ── */
.frErinnerung{padding:11px 16px 11px}
.frErinnerung .t{font-weight:800;font-size:15px;margin-bottom:4px;color:var(--cbInk);letter-spacing:-.01em}
.frErinnerung .s{font-size:12px;color:var(--cbMut);line-height:1.4}
.frErinnZeile{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.frErinnZeile .ctl{height:34px;font-size:13px;min-width:0}
.frErinnZeile .frMail{flex:1 1 170px}
.frErinnZeile .frVorlauf{width:auto;padding-right:26px}
.frLbl{font-size:12.5px;color:var(--cbMut);font-weight:600}
.frSchalter{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--cbInk);cursor:pointer;padding:0;min-width:64px}
.frSchalter i{width:36px;height:20px;border-radius:999px;background:var(--cbPillG);position:relative;flex:0 0 auto;transition:background .15s}
.frSchalter i::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.frSchalter[aria-checked=true] i{background:var(--cbGruen)}
.frSchalter[aria-checked=true] i::after{left:18px}
.frKlein{height:34px;padding:0 12px;font-size:13px}
.frErinnHinweis{font-size:12.5px;margin-top:6px;color:var(--cbMut);line-height:1.45}
.frErinnHinweis:empty{display:none}
.frErinnHinweis.warn{color:var(--frRotI)}
.frErinnHinweis.ok{color:var(--cbGruenI)}

/* Bewegung: „Bewegung reduzieren" ohne Schalter „An" → keine Übergänge, kein Anheben; der Zustand (Farbe, Schimmer) bleibt sichtbar.
   Schalter „Aus" schaltet ebenso ab. */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="an"]) .frRaster .tg,html:not([data-motion="an"]) .frKpi,html:not([data-motion="an"]) .frZeile,html:not([data-motion="an"]) .frTagZeile,html:not([data-motion="an"]) .frChip{transition:none}
  html:not([data-motion="an"]) .frRaster .tg:hover,html:not([data-motion="an"]) .frKpi:hover{transform:none}
  html:not([data-motion="an"]) .frSchalter i,html:not([data-motion="an"]) .frSchalter i::after{transition:none}
}
html[data-motion="aus"] .frRaster .tg,html[data-motion="aus"] .frKpi,html[data-motion="aus"] .frZeile,html[data-motion="aus"] .frTagZeile,html[data-motion="aus"] .frChip{transition:none}
html[data-motion="aus"] .frRaster .tg:hover,html[data-motion="aus"] .frKpi:hover{transform:none}
html[data-motion="aus"] .frSchalter i,html[data-motion="aus"] .frSchalter i::after{transition:none}

/* ── Fenster „Eigene Frist" ── */
.frDlg{width:min(560px,94vw)}
#mFrist [hidden]{display:none!important}   /* die Knopfregel der App setzt display und schlüge hidden sonst */
.frDlgBody{padding:0 22px 6px}
.frDlg .fg{grid-template-columns:1fr 1fr}
.frDlg .frVoll{grid-column:1/-1}
.frDlg textarea.ctl{min-height:74px;resize:vertical}
.frCheck{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;margin-top:4px}
.frCheck input{width:16px;height:16px}
.frDlgHinweis{font-size:12.5px;color:var(--frRotI,#b91c1c);margin-top:8px;min-height:1.2em}

@media (max-width:1440px){
  .frZeile,.frGruppe{padding-left:16px;padding-right:16px}
  .frZwei{grid-template-columns:minmax(0,7fr) minmax(340px,5fr)}
  .frZeile{grid-template-columns:52px 36px minmax(0,1fr) 150px 18px;gap:12px}
  .frKreis{width:36px;height:36px}
  .frKpi .t{font-size:14px} .frKpi .frKreis{width:48px;height:48px} .frKpi .v{font-size:28px}
}
@media (max-height:940px){
  /* Laptop (MacBook 900 px, Windows 768 px hoch): Kacheln eine Zeile, Kalender enger, Erinnerung ohne Erklärzeile —
     damit die rechte Spalte auch dort ohne Scrollen bis unten reicht (Kontrolletti 06.09.2026: 68 px bei 1366×768) */
  .frKopf{margin-bottom:8px} .frChips{margin-bottom:10px} .frKpis{margin-bottom:10px}
  .frKpi{padding:9px 44px 9px 18px} .frKpi .s{-webkit-line-clamp:1;min-height:1.35em} .frKpi .frKreis{width:46px;height:46px} .frKpi .v{font-size:26px}
  #viewFristen .frSeite > .frZwei{min-height:400px} .frRechts{gap:10px}
  .frRaster{grid-auto-rows:minmax(25px,1fr);gap:3px} .frRaster .tg{min-height:25px}
  .frMonat{padding:8px 16px 2px} .frMonatKopf{margin-bottom:6px}
  .frLegende{padding:3px 16px 6px}
  .frTagKopf{padding:10px 16px 5px} .frTagFuss{padding:5px 16px 8px}
  .frErinnerung{padding:10px 16px 10px} .frErinnerung .s{display:none} .frErinnerung .t{margin-bottom:2px}
}
@media (max-width:1100px){
  .frZwei{grid-template-columns:1fr}
  #viewFristen .frSeite > .frZwei{min-height:0}
  .frRechts{overflow:visible}
  .frListe{max-height:60vh}
  .frKpi{grid-column:span 12}
}