/* BizCal-Modul · fenster-system · hig69 (Harun 19.10.2026: "Du musst an festen Regeln arbeiten. Regeln bzw. Klassen zusammenfassen.
   Designvorlage ist Momentum - mit den Rundungen.")
   EIN Designsystem fuer ALLE Auswertungs-Fenster (#anaOverlay): Terminvereinbarung (kpi), Tages-Termine (tag), Momentum (mom),
   Partner-Aktivitaet (gp), TV-Block (tv). Doku: docs/FENSTER_DESIGNSYSTEM.md.
   REGEL: Neue/geaenderte Fenster NUR ueber fw9-Klassen. Optik-Aenderung = Token (oben) oder Systemklasse aendern, NIE ein einzelnes Fenster.
   Ersetzt die verstreuten Fenster-Regeln hig61-hig68 (analyse-03.css) und die alten Rahmen-/Pfeil-/Umschalter-Regeln (.f9, .pf9o, .pf9z,
   .gpo9, .kv9-fix, .kv9-sicht, .zk61*, .tb9-box/-duo, .gp9-duo-Listen). tb9-* bleiben nur als JS-Haken (Klick/Aufklappen, tbKlick9/tbNamen9).
   Wurzel: anaArt9 (analyse.js) setzt am Overlay .fw9 + Lage (.fw9--oben | .fw9--mitte), modalNav die Kopfreihe (.fw9--pfeile | .fw9--solo).
   Rundungen brauchen !important wegen der globalen Eckig-Regel v445 (core-01.css).
   hig70: Overlay-Regeln gelten fuer #anaOverlay UND jedes .fw9-ov (gleiche Spezifitaet ueber :is()) - die Buchen-Seite laedt DIESE Datei
   in ihren Schattenbaum (buchen-kern.js mount) und haengt ihre Dialoge als .fw9-ov an (bkFenster9). Keine zweite Kopie. */

/* ================= 1) Tokens ================= */
:root{
  /* Radien */
  --fw9-r-box:22px; --fw9-r-kachel:16px; --fw9-r-pille:20px; --fw9-r-seg:9px; --fw9-r-segknopf:7px; --fw9-r-streifen:6px; --fw9-r-vs:8px;
  /* Abstaende */
  --fw9-pad:18px; --fw9-pad-unten:20px; --fw9-abst-titel:10px; --fw9-abst-gruppe:20px; --fw9-luecke-paar:10px;
  /* Breiten + Lage */
  --fw9-breite-oben:560px; --fw9-breite-mitte:400px; --fw9-oben:max(66px, 30vh); --fw9-unten:5vh;
  /* Material, Rand, Schatten */
  --fw9-mat:color-mix(in srgb,var(--card) 72%,transparent); --fw9-rand:rgba(0,0,0,.08); --fw9-dim:rgba(0,0,0,.28);
  --fw9-schatten:0 10px 40px rgba(0,0,0,.18); --fw9-schatten-knopf:0 2px 8px rgba(0,0,0,.08); --fw9-knopf:#fff;
  --fw9-unschaerfe:blur(20px) saturate(1.6);
  /* Toene gut / schlecht / neutral (Kachel-Kopf in Tonfarbe, aufgeklappt leicht getoente Flaeche) */
  --fw9-gut:#50C878; --fw9-gut-text:#2e9e5e; --fw9-schlecht:#E0115F; --fw9-neutral:var(--ink);
  --fw9-flaeche:color-mix(in srgb,var(--ink) 4.5%,var(--card));
  --fw9-flaeche-gut:color-mix(in srgb,var(--fw9-gut) 9%,var(--card)); --fw9-flaeche-schlecht:color-mix(in srgb,var(--fw9-schlecht) 8%,var(--card));
  --fw9-flaeche-neutral:color-mix(in srgb,var(--ink) 7%,var(--card));
  /* Schriftgroessen */
  --fw9-fs-titel:15px; --fw9-fs-titel-eng:13.5px; --fw9-fs-kopf:17.5px; --fw9-fs-zeile:14.5px; --fw9-fs-wert:13.5px; --fw9-fs-klein:12.5px;
  --fw9-fs-kachel-kopf:13px; --fw9-fs-kachel-zahl:32px;
  /* Bewegung (iOS-Kurve, hig60/hig66) */
  --fw9-kurve:cubic-bezier(.32,.72,0,1); --fw9-dauer:.25s;
  /* hig70: Auswahl-Liste (gewaehlte Zeile) */
  --fw9-r-zeile:12px; --fw9-flaeche-an:color-mix(in srgb,var(--accent) 10%,transparent);
}
:root[data-theme="dark"]{--fw9-rand:rgba(255,255,255,.12);--fw9-dim:rgba(0,0,0,.45);--fw9-schatten:0 14px 48px rgba(0,0,0,.55);
  --fw9-knopf:color-mix(in srgb,#fff 20%,var(--card));--fw9-gut-text:#50C878}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--fw9-gut-text:#50C878} }
@media (min-width:700px){ :root{--fw9-breite-mitte:420px} }

/* ================= 2) Overlay (Hintergrund, Lage, Kopfreihe) ================= */
/* Hintergrund abgedunkelt + unscharf, weich ein-/ausblenden (das Inline-background:transparent im Markup wird bewusst ueberstimmt) */
:is(#anaOverlay,.fw9-ov).fw9{transition:opacity .24s ease,display .24s allow-discrete,overlay .24s allow-discrete;opacity:0;
  --fw9-seite:8px;padding-left:var(--fw9-seite) !important;padding-right:var(--fw9-seite) !important}
:is(#anaOverlay,.fw9-ov).fw9.on{opacity:1;background:var(--fw9-dim) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@starting-style{ :is(#anaOverlay,.fw9-ov).fw9.on{opacity:0} }
:is(#anaOverlay,.fw9-ov).fw9.fw9--oben{--fw9-seite:16px}
@media (min-width:700px){ :is(#anaOverlay,.fw9-ov).fw9:is(.fw9--oben,.fw9--mitte){--fw9-seite:max(16px, calc(50vw - 280px))} }
/* kein Kopf und kein X im Fenster - bei keinem Fenster (Schliessen: daneben tippen, Zurueck-Taste, Esc) */
:is(#anaOverlay,.fw9-ov).fw9 .ana-kopf9,:is(#anaOverlay,.fw9-ov).fw9 #anaSub{display:none !important}
/* Lage oben (kpi, tag): Oberkante bei 30 %, waechst nach unten bis 5 % ueber dem Rand, dann scrollt der Inhalt */
:is(#anaOverlay,.fw9-ov).fw9.fw9--oben.on{align-items:flex-start !important;align-content:flex-start !important;
  padding-top:calc(var(--fw9-oben) - 58px) !important;padding-bottom:0 !important}
:is(#anaOverlay,.fw9-ov).fw9.fw9--oben .fw9-box{--fw9-breite:var(--fw9-breite-oben);
  max-height:calc(100dvh - var(--fw9-oben) - var(--fw9-unten) - env(safe-area-inset-bottom,0px)) !important}
/* Lage mittig (mom, gp, tv) */
:is(#anaOverlay,.fw9-ov).fw9.fw9--mitte .fw9-box{--fw9-breite:var(--fw9-breite-mitte);max-height:calc(100dvh - 130px - env(safe-area-inset-bottom,0px))}
/* Kopfreihe mit Pfeilen: Zeile 1 = Pfeil | Titel | Pfeil, Zeile 2 = Fenster */
:is(#anaOverlay,.fw9-ov).fw9.fw9--pfeile.on{flex-wrap:wrap;align-content:center;justify-content:space-between;row-gap:var(--fw9-abst-titel)}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-box{order:2}
:is(#anaOverlay,.fw9-ov).fw9.fw9--pfeile .fw9-box{flex:0 0 100%}
/* Kopfreihe ohne Pfeile: Titel-Pille allein, mittig ueber dem Fenster */
:is(#anaOverlay,.fw9-ov).fw9.fw9--solo.on{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;row-gap:var(--fw9-abst-titel)}
:is(#anaOverlay,.fw9-ov).fw9.fw9--solo .fw9-box{flex:0 1 auto}

/* ================= 3) Fenster (.fw9-box) ================= */
:is(#anaOverlay,.fw9-ov).fw9 .fw9-box{position:relative;box-sizing:border-box;width:100%;max-width:var(--fw9-breite,var(--fw9-breite-mitte));height:auto;min-height:0;
  margin-left:auto;margin-right:auto;padding:var(--fw9-pad) var(--fw9-pad) var(--fw9-pad-unten);
  border-radius:var(--fw9-r-box) !important;background:var(--card);border:.5px solid var(--fw9-rand);box-shadow:var(--fw9-schatten);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* steht oben eine Leiste (Umschalter), klebt sie buendig an der Oberkante */
:is(#anaOverlay,.fw9-ov).fw9 .fw9-box:has(> #anaInhalt > .fw9-leiste:first-child){padding-top:0}
@media (max-width:699px){ :is(#anaOverlay,.fw9-ov).fw9.fw9--oben .fw9-box{max-width:none} }

/* ================= 4) Titel-Pille (.fw9-titel) + Pfeil-Knoepfe (.fw9-nav) ================= */
:is(#anaOverlay,.fw9-ov).fw9 .fw9-titel{display:none}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-titel:not(:empty){order:1;display:flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;max-width:calc(100% - 112px);
  box-sizing:border-box;height:40px;margin:4px 8px;padding:0 16px;border-radius:var(--fw9-r-pille) !important;
  background:var(--fw9-mat);-webkit-backdrop-filter:var(--fw9-unschaerfe);backdrop-filter:var(--fw9-unschaerfe);
  border:.5px solid var(--fw9-rand);box-shadow:var(--fw9-schatten-knopf);color:var(--ink);
  font-size:var(--fw9-fs-titel-eng);font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:fw9Titel .22s ease-out}
/* hig74: Ton-Variante - mit --fw9-ton (am Overlay) traegt die Pille die Farbe der Terminart; ohne Variable unveraendert */
:is(#anaOverlay,.fw9-ov).fw9[style*="--fw9-ton"] .fw9-titel:not(:empty){color:color-mix(in srgb,var(--fw9-ton) 78%,var(--ink));
  background:color-mix(in srgb,var(--fw9-ton) 16%,var(--card));border-color:color-mix(in srgb,var(--fw9-ton) 45%,transparent)}
:is(#anaOverlay,.fw9-ov).fw9.fw9--solo .fw9-titel:not(:empty){max-width:calc(100% - 32px);margin-left:0;margin-right:0;font-size:var(--fw9-fs-titel)}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-titel .kv9-hero{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-titel .kv9-wort,:is(#anaOverlay,.fw9-ov).fw9 .fw9-titel .kv9-lbl{font-size:var(--fw9-fs-titel);font-weight:500;color:var(--ink)}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-titel .kv9-zahl{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
@keyframes fw9Titel{from{opacity:0;transform:translateY(-4px)}}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav,:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav:active,:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav:focus,:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav:focus-visible{position:static;order:1;transform:none;left:auto;right:auto;top:auto}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:4px;padding:0;opacity:1;font-size:0;line-height:1;color:var(--ink);
  border-radius:50% !important;background:var(--fw9-mat);-webkit-backdrop-filter:var(--fw9-unschaerfe);backdrop-filter:var(--fw9-unschaerfe);
  border:.5px solid var(--fw9-rand);box-shadow:var(--fw9-schatten-knopf)}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav::before{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:var(--fw9-chev) center/contain no-repeat;mask:var(--fw9-chev) center/contain no-repeat}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav.links{--fw9-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E");order:0}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav.rechts{--fw9-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E")}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav:disabled{opacity:.4;cursor:default}
/* fehlender Pfeil = unsichtbarer Platzhalter, damit der Titel exakt mittig bleibt */
:is(#anaOverlay,.fw9-ov).fw9 .fw9-nav.hide{display:flex !important;visibility:hidden}
:is(#anaOverlay,.fw9-ov).fw9.fw9--solo .fw9-nav{display:none !important}

/* ================= 5) Leiste (.fw9-leiste) + Segmented Control (.fw9-seg) ================= */
:is(#anaOverlay,.fw9-ov).fw9 .fw9-leiste{position:sticky;top:0;z-index:3;background:var(--card);margin:0 calc(-1 * var(--fw9-pad)) 8px;padding:12px var(--fw9-pad) 8px;
  border-bottom:1px solid var(--haar9);box-shadow:0 .5px 0 var(--fw9-rand)}
:is(#anaOverlay,.fw9-ov).fw9 .fw9-leiste--luft > .fw9-seg{margin-top:8px}
:is(#anaOverlay,.fw9-ov) .fw9-seg{position:relative;isolation:isolate;display:flex;align-items:center;gap:0;width:100%;box-sizing:border-box;margin:0;padding:2px;border:0;text-align:left;
  border-radius:var(--fw9-r-seg) !important;background:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:none}
:is(#anaOverlay,.fw9-ov) .fw9-seg > button{position:relative;z-index:1;flex:1 1 0;min-width:0;height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 4px;
  border:0;border-radius:var(--fw9-r-segknopf) !important;background:none !important;box-shadow:none !important;color:var(--muted);
  font:inherit;font-size:.78rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .2s ease}
:is(#anaOverlay,.fw9-ov) .fw9-seg > button.on{color:var(--ink);font-weight:600}
:is(#anaOverlay,.fw9-ov) .fw9-seg > button svg{flex:0 0 auto;width:15px;height:15px}
:is(#anaOverlay,.fw9-ov) .fw9-seg > button span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* gleitender Knopf: EIN Indikator (::before), translateX ueber :has(.on) - 2 oder 3 Knoepfe */
:is(#anaOverlay,.fw9-ov) .fw9-seg::before{content:'';position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / 2);
  border-radius:var(--fw9-r-segknopf) !important;background:var(--fw9-knopf);
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04),0 0 0 .5px rgba(0,0,0,.04);transition:transform var(--fw9-dauer) var(--fw9-kurve)}
:is(#anaOverlay,.fw9-ov) .fw9-seg:has(> button:nth-child(3))::before{width:calc((100% - 4px) / 3)}
:is(#anaOverlay,.fw9-ov) .fw9-seg:has(> button:nth-child(2).on)::before{transform:translateX(100%)}
:is(#anaOverlay,.fw9-ov) .fw9-seg:has(> button:nth-child(3).on)::before{transform:translateX(200%)}
@supports not selector(:has(a)){
  :is(#anaOverlay,.fw9-ov) .fw9-seg::before{display:none}
  :is(#anaOverlay,.fw9-ov) .fw9-seg > button.on{background:var(--fw9-knopf) !important;box-shadow:0 3px 8px rgba(0,0,0,.12) !important}
}

/* ================= 6) Liste (.fw9-liste / .fw9-gruppe / .fw9-zeile) - Raster Zeit | Art | Kunde | rechts ================= */
:is(#anaOverlay,.fw9-ov) .fw9-gruppe{margin:0;padding:0;background:none;border:0}
:is(#anaOverlay,.fw9-ov) .fw9-gruppe + .fw9-gruppe{margin-top:var(--fw9-abst-gruppe)}
:is(#anaOverlay,.fw9-ov) .fw9-gruppe-kopf{font-size:var(--fw9-fs-kopf);font-weight:700;line-height:1.25;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em}
/* Vermittler-Streifen: dezent ueber die volle Breite, Name fett, Anzahl als kleine Zahl-Pille */
:is(#anaOverlay,.fw9-ov) .fw9-streifen{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 2px;padding:6px 8px;border-radius:var(--fw9-r-streifen) !important;
  background:color-mix(in srgb,var(--ink) 6%,transparent);font-size:var(--fw9-fs-zeile);font-weight:700;color:var(--ink)}
:is(#anaOverlay,.fw9-ov) .fw9-gruppe-kopf + .fw9-streifen{margin-top:4px}
:is(#anaOverlay,.fw9-ov) .fw9-streifen span{min-width:0;overflow-wrap:anywhere}
:is(#anaOverlay,.fw9-ov) .fw9-streifen b{flex:0 0 auto;min-width:22px;box-sizing:border-box;padding:1px 7px;border-radius:999px !important;text-align:center;font-size:12px;font-weight:700;line-height:1.5;
  color:var(--ink);background:color-mix(in srgb,var(--ink) 11%,transparent);font-variant-numeric:tabular-nums}
:is(#anaOverlay,.fw9-ov) .fw9-zeile{display:grid;grid-template-columns:40px 24px minmax(0,1fr) auto;column-gap:6px;row-gap:1px;align-items:baseline;padding:5px 0;min-width:0;border:0;background:none}
:is(#anaOverlay,.fw9-ov) .fw9-z-zeit{grid-column:1;grid-row:1;font-size:13.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#anaOverlay,.fw9-ov) .fw9-z-art{grid-column:2;grid-row:1;font-size:var(--fw9-fs-klein);line-height:inherit;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  color:color-mix(in srgb,var(--art9,var(--muted)) 84%,var(--ink));background:none;border:0;padding:0}
:is(#anaOverlay,.fw9-ov) .fw9-z-kunde{grid-column:3;grid-row:1;min-width:0;font-size:var(--fw9-fs-zeile);line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
:is(#anaOverlay,.fw9-ov) .fw9-z-rechts{grid-column:4;grid-row:1;font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
:is(#anaOverlay,.fw9-ov) .fw9-z-rechts2{grid-column:4;grid-row:2;font-size:12px;line-height:1.3;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
:is(#anaOverlay,.fw9-ov) .fw9-z-unter{grid-column:3;grid-row:2;min-width:0;font-size:var(--fw9-fs-klein);font-style:italic;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
:is(#anaOverlay,.fw9-ov) .fw9-zeile:not(:has(.fw9-z-rechts2)) .fw9-z-unter{grid-column:3 / 5}
:is(#anaOverlay,.fw9-ov) .fw9-z-nach{grid-column:3 / 5;min-width:0}
:is(#anaOverlay,.fw9-ov) .fw9-z-gaeste{list-style:none;margin:3px 0 0;padding:0}
:is(#anaOverlay,.fw9-ov) .fw9-z-gaeste li{display:flex;gap:8px;align-items:baseline;padding:1px 0;font-size:var(--fw9-fs-klein);color:var(--ink);min-width:0}
:is(#anaOverlay,.fw9-ov) .fw9-z-gaeste li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#anaOverlay,.fw9-ov) .fw9-z-gaeste li small{flex:0 0 auto;color:var(--muted);font-size:11.5px}
:is(#anaOverlay,.fw9-ov) .fw9-z-flag{font-style:normal;color:var(--muted)}
:is(#anaOverlay,.fw9-ov) .fw9-zeile--ab > *{text-decoration:line-through;opacity:.55}
:is(#anaOverlay,.fw9-ov) .fw9-zeile--ab .fw9-z-art,:is(#anaOverlay,.fw9-ov) .fw9-zeile--ab .fw9-z-rechts2{color:var(--muted)}
:is(#anaOverlay,.fw9-ov) .fw9-zeile--rang .fw9-z-zeit{color:var(--muted);font-weight:700}
:is(#anaOverlay,.fw9-ov) .fw9-zeile--rang .fw9-z-kunde{font-weight:600}
:is(#anaOverlay,.fw9-ov) .fw9-zeile--rang .fw9-z-rechts b{font-size:var(--fw9-fs-zeile);font-weight:700;color:var(--ink)}
/* hig75: .fw9-zeitgruppe - mehrere Zeilen mit derselben Uhrzeit (Tages-Fenster "Nach Uhrzeit", anaZeitGruppen9): die Zeit steht EINMAL
   links (erste Zeile), die Termine untereinander rechts daneben im selben Raster; etwas Luft um die Gruppe, innen enger */
:is(#anaOverlay,.fw9-ov) .fw9-zeitgruppe{padding:3px 0}
:is(#anaOverlay,.fw9-ov) .fw9-zeitgruppe > .fw9-zeile{padding:3px 0}
:is(#anaOverlay,.fw9-ov) .fw9-zeitgruppe > .fw9-zeile + .fw9-zeile .fw9-z-zeit{visibility:hidden}

/* ================= 7) Kacheln (.fw9-paar / .fw9-kachel) - Vorlage Momentum Rueckblick/Ausblick ================= */
/* gilt ueberall, wo die Kachel steht (Fenster, PC-Detail-Spalte, TV-Banner) - EINE Optik */
.fw9-paar{width:100%;margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fw9-luecke-paar);align-items:start}
.fw9-paar--vs{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:6px;margin-top:18px}
.fw9-vs{align-self:start;margin-top:44px;width:26px;height:26px;border-radius:var(--fw9-r-vs) !important;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.fw9-kachel{display:grid;justify-items:center;align-items:center;row-gap:1px;min-width:0;box-sizing:border-box;padding:10px 8px 4px;text-align:center;cursor:pointer;
  font:inherit;color:inherit;border:0;border-radius:var(--fw9-r-kachel) !important;background:var(--fw9-flaeche);
  transition:background-color var(--fw9-dauer) var(--fw9-kurve)}
.fw9-kachel > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw9-kachel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fw9-kachel-kopf{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:18px;font-size:var(--fw9-fs-kachel-kopf);font-weight:600;line-height:18px}
.fw9-kachel-kopf svg{width:15px;height:15px;flex:none}
.fw9-kachel-kopf--lang{font-size:11px;letter-spacing:-.01em}
.fw9-kachel--gut .fw9-kachel-kopf{color:var(--fw9-gut-text)}
.fw9-kachel--schlecht .fw9-kachel-kopf{color:var(--fw9-schlecht)}
.fw9-kachel--neutral .fw9-kachel-kopf{color:var(--fw9-neutral)}
.fw9-kachel-unter{font-size:11px;line-height:16px;color:var(--muted);font-variant-numeric:tabular-nums}
.fw9-kachel-zahl{font-size:var(--fw9-fs-kachel-zahl);font-weight:700;letter-spacing:-.03em;line-height:34px;color:var(--ink);font-variant-numeric:tabular-nums}
.fw9-kachel-einheit{font-size:12px;font-weight:400;line-height:16px;color:var(--muted)}
.fw9-kachel-pfeil{display:flex;align-items:center;justify-content:center;gap:6px;height:22px;position:relative;overflow:visible}
.fw9-kachel-pfeil .tb9-chev{transition:transform var(--fw9-dauer) var(--fw9-kurve)}
.fw9-paar.offen .fw9-kachel-pfeil .tb9-chev{transform:rotate(180deg)}
/* aufgeklappt: leicht getoent (gut gruen, schlecht rosa, neutral grau), Inhalt gleitet (grid-template-rows, hig66) */
.fw9-paar.offen .fw9-kachel--gut{background:var(--fw9-flaeche-gut)}
.fw9-paar.offen .fw9-kachel--schlecht{background:var(--fw9-flaeche-schlecht)}
.fw9-paar.offen .fw9-kachel--neutral{background:var(--fw9-flaeche-neutral)}
.fw9-kachel-auf{justify-self:stretch;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--fw9-dauer) var(--fw9-kurve);text-align:left}
.fw9-paar.offen .fw9-kachel-auf{grid-template-rows:1fr}
.fw9-kachel-auf > div{overflow:hidden;min-height:0}

/* ================= 8) Liste in der Kachel (.fw9-kliste) - Name links, Wert rechts, Zwischenkopf, keine Linien ================= */
.fw9-kliste{border-top:0;margin-top:4px;padding:0 0 4px}
.fw9-kliste ul{list-style:none;margin:0;padding:0}
.fw9-kliste li{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:0;text-align:left;min-width:0;
  font-size:var(--fw9-fs-zeile);line-height:1.3;font-weight:400;color:var(--ink)}
.fw9-kliste li em{font-style:normal;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
.fw9-kliste li i{display:none}
.fw9-kliste .fw9-wert{flex:0 0 auto;white-space:nowrap;font-size:var(--fw9-fs-wert);font-weight:600;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums}
.fw9-kliste .fw9-wert--schlecht{display:inline-flex;align-items:center;color:color-mix(in srgb,var(--fw9-schlecht) 72%,var(--ink))}
:root[data-theme="dark"] .fw9-kliste .fw9-wert--schlecht{color:color-mix(in srgb,var(--fw9-schlecht) 62%,#fff)}
.fw9-kliste .fw9-kliste-kopf{font-size:var(--fw9-fs-kopf);font-weight:700;line-height:1.25;letter-spacing:-.01em;text-transform:none;opacity:1;color:var(--ink);text-align:left;margin:var(--fw9-abst-gruppe) 0 4px}
.fw9-kliste .fw9-kliste-kopf:first-child{margin-top:8px}
/* Zwischenkopf mit Spaltenkopf rechts (z. B. "Termine" / "Letzter Termin"): einzeilig, links und rechts auf derselben Grundlinie */
.fw9-kliste .fw9-kliste-kopf--spalte{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.fw9-kliste .fw9-kliste-kopf--spalte > span:first-child{min-width:0}
.fw9-kliste .fw9-spalte{flex:0 0 auto;white-space:nowrap;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;text-align:right;color:var(--muted)}
.fw9-kliste .fw9-leer{font-size:var(--fw9-fs-zeile);color:var(--muted);padding:6px 0;text-align:left}

/* ================= 10) Buehne + Auswahl-Liste (hig70, TV-Fenster) ================= */
/* .fw9-buehne: Bereich, dessen Inhalt per Tipp auf eine Zeile wechselt - fw9Wechsel (fenster.js) blendet ueber und laesst die Hoehe gleiten
   (Dauer/Kurve = --fw9-dauer/--fw9-kurve). .fw9-wahl: Liste waehlbarer Zeilen, die gezeigte traegt .an (getoent, aria-current). */
.fw9-buehne{position:relative}
.fw9-wahl{list-style:none;margin:0;padding:0}
.fw9-wahl > li{transition:background-color var(--fw9-dauer) var(--fw9-kurve)}
.fw9-wahl > li.an{border-radius:var(--fw9-r-zeile) !important;background:var(--fw9-flaeche-an);border-bottom-color:transparent !important}
.fw9-wahl > li:has(+ li.an){border-bottom-color:transparent !important}
.fw9-wahl > li > button{padding-left:12px;padding-right:10px}

/* ================= 11) Dialog-Inhalt (hig70, Buchen-Dialoge .fw9-ov) ================= */
/* Fenster bleibt im Wirt (Schattenbaum, position:fixed relativ zur Buchen-Flaeche) */
.fw9-ov.fw9.fw9--mitte .fw9-box{max-height:calc(100% - 110px)}
.fw9-ov.fw9{-webkit-tap-highlight-color:transparent}
/* getoentes, rundes Feld statt Kasten mit Rand (Fakten-Zeilen, Ranking) */
:is(#anaOverlay,.fw9-ov) .fw9-feld{border:0 !important;border-radius:var(--fw9-r-kachel) !important;background:var(--fw9-flaeche);padding:2px 14px}
:is(#anaOverlay,.fw9-ov) .fw9-feld > *{border-top:0 !important}
:is(#anaOverlay,.fw9-ov) .fw9-feld > * + *{border-top:.5px solid var(--fw9-rand) !important}
/* stehende Kachel (nur Anzeige, nicht antippbar) */
:is(#anaOverlay,.fw9-ov) .fw9-kachel--still{cursor:default;border:0 !important;background:var(--fw9-flaeche);padding:12px 6px 10px}

/* ================= 12) Info-Text + Knoepfe (hig71, Buchen-Dialoge .fw9-ov) ================= */
/* Text aus der Terminart-Beschreibung (buchen-kern.js fw9Text): Absatz, Abschnittskopf, echte Liste, Hinweis-Kasten */
:is(#anaOverlay,.fw9-ov) .fw9-text{margin:0 0 8px;font-size:.92rem;line-height:1.5}
:is(#anaOverlay,.fw9-ov) .fw9-abschnitt{margin:14px 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
:is(#anaOverlay,.fw9-ov) .fw9-inhalt > .fw9-abschnitt:first-child{margin-top:0}
:is(#anaOverlay,.fw9-ov) .fw9-punkte{list-style:none;margin:0 0 8px;padding:0}
:is(#anaOverlay,.fw9-ov) .fw9-punkte > li{position:relative;padding-left:16px;font-size:.92rem;line-height:1.45}
:is(#anaOverlay,.fw9-ov) .fw9-punkte > li + li{margin-top:6px}
:is(#anaOverlay,.fw9-ov) .fw9-punkte > li::before{content:"";position:absolute;left:3px;top:.55em;width:6px;height:6px;border-radius:50% !important;background:var(--art9,var(--accent))}
:is(#anaOverlay,.fw9-ov) .fw9-hinweis{margin:14px 0 8px;padding:2px 14px 8px;border-radius:var(--fw9-r-kachel) !important;background:color-mix(in srgb,var(--fw9-schlecht) 5%,var(--card))}
:is(#anaOverlay,.fw9-ov) .fw9-hinweis > .fw9-abschnitt{margin-top:10px}
:is(#anaOverlay,.fw9-ov) .fw9-hinweis > :last-child{margin-bottom:0}
:is(#anaOverlay,.fw9-ov) .fw9-inhalt + .fw9-feld{margin-top:14px}
/* Fakten-Zeile im Feld: Bezeichnung gedaempft | Wert */
:is(#anaOverlay,.fw9-ov) .fw9-fakt{display:flex;gap:8px;font-size:.85rem;padding:7px 0}
:is(#anaOverlay,.fw9-ov) .fw9-fakt > span{opacity:.55;flex:0 0 92px}
:is(#anaOverlay,.fw9-ov) .fw9-fakt > b{font-weight:600}
/* Systemknopf (Entscheidungs-Fenster): abgerundet 12, volle/halbe Breite, Primaer gefuellt in Akzent, Sekundaer getoent */
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopfreihe{display:flex;gap:8px;margin-top:18px;justify-content:stretch}
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopf{flex:1 1 0;min-height:44px;padding:0 14px;border:0 !important;border-radius:12px !important;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter var(--fw9-dauer) var(--fw9-kurve),transform .12s}
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopf:active{transform:scale(.98)}
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopf--primaer{background:var(--accent);color:#fff}
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopf--zweit{background:color-mix(in srgb,var(--ink) 8%,var(--card));color:var(--ink)}
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopf--gefahr{color:var(--fw9-schlecht)}
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:480px){:is(#anaOverlay,.fw9-ov) .fw9-knopfreihe{flex-wrap:wrap}:is(#anaOverlay,.fw9-ov) .fw9-knopf{flex:1 1 100%}}

/* ================= 13) App-Dialoge (sm5, Harun 24.10.) ================= */
/* fw9Ov9 (fenster.js) macht aus einem ovNeu-Overlay ein Systemfenster: .fw9-ov.fw9 + Lage, Titel-Pille, Kasten .fw9-box.
   Erste Nutzer: Suche und Gehe-zu-Datum aus dem Kalender-Seitenmenue. */
/* Lage oben + Titel allein (Suche: Fenster waechst nach unten, das Eingabefeld springt beim Tippen nicht) */
:is(#anaOverlay,.fw9-ov).fw9.fw9--oben.fw9--solo.on{justify-content:flex-start;align-items:center !important}
/* Eingabefeld im Fenster: getoent, rund, ohne Rand (wie .fw9-feld) */
:is(#anaOverlay,.fw9-ov) .fw9-eingabe{display:block;width:100%;box-sizing:border-box;min-height:44px;margin:0;padding:0 14px;border:0 !important;
  border-radius:12px !important;background:var(--fw9-flaeche);color:var(--ink);font:inherit;font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
:is(#anaOverlay,.fw9-ov) .fw9-eingabe:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
:is(#anaOverlay,.fw9-ov) .fw9-eingabe::placeholder{color:var(--muted)}
:is(#anaOverlay,.fw9-ov) .fw9-eingabe::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
:root[data-theme="dark"] :is(#anaOverlay,.fw9-ov) .fw9-eingabe{color-scheme:dark}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(#anaOverlay,.fw9-ov) .fw9-eingabe{color-scheme:dark} }
/* Treffer-Liste: Zeilen im getoenten Feld, Haarlinie dazwischen (.fw9-feld), Hinweis gedaempft */
:is(#anaOverlay,.fw9-ov) .fw9-treffer{margin-top:12px}
:is(#anaOverlay,.fw9-ov) .fw9-treffer > .fw9-feld > *{display:flex;gap:8px;align-items:baseline;padding:10px 0;cursor:pointer;font-size:var(--fw9-fs-zeile);min-width:0}
:is(#anaOverlay,.fw9-ov) .fw9-treffer-leer{padding:4px 2px;font-size:var(--fw9-fs-klein);color:var(--muted)}
/* gk3 (24.10.2026): Knopfreihe/Knopf-Paar gelten auch im Einrichtungs-Fenster #wkAlt9 (Frage "Termine auch übernehmen?") */
/* sm7 (Harun 24.10.): Knopf-Paar - zwei Knoepfe IMMER nebeneinander je halb (links Abbrechen, rechts Hauptaktion), auch am Handy */
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopfreihe.fw9-knoepfe-paar{flex-wrap:nowrap}
:is(#anaOverlay,.fw9-ov,#wkAlt9) .fw9-knopfreihe.fw9-knoepfe-paar > .fw9-knopf{flex:1 1 0;min-width:0}

/* ================= 9) Weniger Bewegung ================= */
@media (prefers-reduced-motion:reduce){
  :is(#anaOverlay,.fw9-ov).fw9{transition:none}
  :is(#anaOverlay,.fw9-ov).fw9 .fw9-titel{animation:none}
  :is(#anaOverlay,.fw9-ov) .fw9-seg::before,:is(#anaOverlay,.fw9-ov) .fw9-seg > button{transition:none}
  .fw9-kachel,.fw9-kachel-auf,.fw9-kachel-pfeil .tb9-chev{transition:none}
  .fw9-wahl > li{transition:none}
  .fw9-knopf{transition:none}
}