/* BizCal-Bündel bc/bundle-1.css - NICHT bearbeiten, erzeugt von tools/bizcal-modular/buendeln.mjs aus 22 Modulen (Liste in termin-app.html) */
/* ==== bc/css/core/core-01.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 1 */

  /* SYSTEM-LEISTEN (v665, Harun 28.08.): "Die untere Zeile ist immer hell."
     Die Navigationsleiste unten und die Bildlaufbalken zeichnet das BETRIEBS-
     SYSTEM, nicht die Seite - es richtet sich nach color-scheme. Fehlt die
     Angabe, nimmt es immer 'hell' an, egal wie dunkel die Seite ist. Genau das
     war der Fall: Die Angabe stand nirgends.
     Sie gehoert an :root und muss mit data-theme mitwandern, weil die App
     ihren eigenen Umschalter hat - die Vorliebe des Geraets allein reicht
     nicht. */
  :root, :root[data-theme="light"]{
    color-scheme: light;
    --bg:#f7f7f6; --card:#ffffff; --ink:#1d1d1f; --muted:#6e6e73; --line:#e6e6e4;   /* v1413 (Harun): kein Beige mehr - Richtung Weiss */
    --accent:#0FA79E; --accent-ink:#fff; --warn:#b45309; --ok:#16a34a; --rot:#c0392b;
    --accent-hauch:rgba(15,167,158,.13);   /* v1159: gewaehlte Zeile in der Struktur-Auswahl */
    /* v594: kraeftiges Gruen fuer Rand und Schrift - --ok ist fuer Haekchen
       und Statuspunkte gedacht und als Kontur zu blass. */
    --ok-stark:#15803d;
    /* v638: Vollflaechen-Farben der Teilnahme-Schalter - je Theme kraeftig,
       nicht neon (Betreiber 28.08.). */
    --evz-gruen:#15803d; --evz-rot:#b02a1e;
    --nav:#ffffff; --chip:#f0f0ef;   /* v1414 (Harun): Flaechen ohne Text hellgrau, kein Beige */
    /* v556: Bahn des AUSGESCHALTETEN Schalters. Eigener Wert je Modus,
       weil ein Grauton beides nicht schafft: im Hellen braucht es Schwarz,
       im Dunklen Weiss. Gerechnet auf 3:1 gegen --card - der Wert, ab dem
       ein Bedienelement als solches erkennbar ist. */
    --sw-aus:rgba(0,0,0,.46); --sw-aus-rand:rgba(0,0,0,.58);
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#0f1115; --card:#1b202a; --ink:#e8eaf0; --muted:#9aa3b2; --line:#2c3240;
    --accent:#8B5CF6; --accent-ink:#fff; --warn:#fbbf24; --ok:#34d399; --rot:#f87171;
    --accent-hauch:rgba(139,92,246,.20);   /* v1159 */
    --ok-stark:#22c55e;   /* v594: satter als --ok, damit die Kontur im Dunkeln traegt */
    --evz-gruen:#16a34a; --evz-rot:#dc2626;   /* v638: satte Vollflaechen statt Neon */
    --nav:#141821; --chip:#1d222c;
    --sw-aus:rgba(255,255,255,.34); --sw-aus-rand:rgba(255,255,255,.46);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  /* v445 (User 22.08.): ALLES ECKIG. Eine Regel plaettet jeden Radius -
     Karten, Knoepfe, Balken, Felder, Modals; kuenftige Elemente sind damit
     von selbst eckig. Ausgenommen bleibt nur, was rund SEIN MUSS: die
     Auswahl-Kreise, Avatare und die Punkt-Anzeige im Blatt. */
  *,*::before,*::after{border-radius:0 !important}
  .kreis,.kreis span,.pd-punkte i,.tsz-punkt,.strsel-s,
  img[class*="avatar"],[class*="avatar"] img,.av,.avatar,
  /* v567 (Harun 25.08.): "Profilbild bei Einstellungen immer noch nicht rund."
     Das Bild traegt id="avatarPrev" und KEINE Klasse - die Liste darueber
     greift nur auf Klassen, also blieb es eckig. Sein Inline-border-radius
     half nicht: die Kanten-Regel oben hat !important und schlaegt damit jede
     normale Deklaration, auch eine inline gesetzte.
     img[id*="vatar"] fasst avatarPrev und pAvatar zugleich und trifft bewusst
     nur BILDER - avatarBtn/avatarWeg daneben sind Knoepfe und bleiben eckig.
     Wortgleich auch in buchung.html und termine.html, damit ein Profilbild
     ueberall dieselbe Form hat. */
  img[id*="vatar"],
  .rund,.rund *{border-radius:50% !important}
  /* v550 (Rueckmeldung Harun 25.08.): SCHALTER bleiben rund. Die Kanten-Regel
     hatte auch sie eckig gemacht - ein Schiebeschalter mit Ecken sieht aus wie
     ein defektes Eingabefeld. Ein Schalter ist kein Knopf und keine Flaeche:
     seine Form SAGT, dass etwas hin- und hergleitet. Gilt fuer die Bahn und
     den Knauf. */
  .switch .sl{border-radius:99px !important}
  /* v753: Der Reise-Klon des FAB (fabReise) war QUADRATISCH - die globale
     Kanten-Regel (!important) schlaegt jede Inline-Rundung. Gleiche Ausnahme
     wie der echte Knopf. */
  #fabReise{border-radius:50% !important}
  .switch .sl:before{border-radius:50% !important}
  /* v447 (User 22.08.): Was man ANTIPPT, bekommt 3 px zurueck - gerade so
     viel, dass die Ecke nicht sticht, ohne die kantige Linie aufzugeben.
     Flaechen (Karten, Balken, Modals) bleiben scharfkantig. */
  button,.btn,.chipbtn,.kal-ic,input,select,textarea,
  .ty-in,.ag-chip,.typ-umriss,.knopf-grau,a.btn,#pdMenuPop button,
  .tsz-sw,.pd-akt-reihe > a,
  /* v450 (User 22.08.): Eigene/Team-Umschalter und StructureSelect sind
     ebenso zum Antippen da - Rahmen, Zeilen, Suchfeld und Kaestchen. Der
     Stufen-Kreis (.strsel-s) bleibt rund, er steht fuer eine Person. */
  .seg,.seg button,.strsel-trigger,.strsel-panel,.strsel-presets button,
  .strsel-row,.strsel-res,.strsel-search,.strsel-cb{border-radius:3px !important}
  /* v448 (User 22.08.): Kontakt-Aktionen NEBENEINANDER - Anrufen, WhatsApp,
     E-Mail, Webseite als gleich breite Kacheln statt gestapelter Zeilen. */
  .pd-akt-reihe{display:flex;gap:8px;margin-top:12px}
  .pd-akt-reihe > a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:5px;background:var(--card);
    padding:12px 6px;color:var(--ink);text-decoration:none;font-weight:800;
    font-size:.62rem;letter-spacing:.04em;text-align:center}
  .pd-akt-reihe > a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
    font-family:'Inter',-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  /* v879 (User, iPhone): Die SEITE selbst darf weder scrollen noch zoomen -
     die App hat ihre eigenen Scroll-Flaechen (.view und die Blaetter).
     Jedes Seiten-Scrollen war ein Versehen, und jeder Zoom verschob die
     schwebende Fussleiste. touch-action:manipulation nimmt zusaetzlich den
     Doppeltipp-Zoom, overscroll-behavior das Gummiband am Rand. */
  /* v881: touch-action:manipulation ist hier RAUS - es verbietet dem
     Browser Pinch und Doppeltipp, schnitt aber die App-eigenen Wisch- und
     Zoom-Gesten mit ab (User: "alle Swipes deaktiviert"). Das Seiten-
     Scrollen bleibt gesperrt, gezoomt wird ueber das Viewport-Kennzeichen
     und die gesture-Abweisung verhindert. */
  html,body{overflow:hidden;overscroll-behavior:none;
    -webkit-text-size-adjust:100%;text-size-adjust:100%}
  /* v1018 (Betreiber 08.09.): "Wenn wir eine App entwickeln, dann darf nichts
     markierbar sein." NICHTS heisst nichts: ein langer Druck bedient die
     Flaeche - er zieht einen Termin, oeffnet ein Menue -, er waehlt keinen
     Text aus. Bisher galt das nur fuer Terminbalken und Monatszellen, und
     ueberall sonst sprang die Markier-Lupe des Systems auf.
     Ausgenommen: Eingabefelder (dort MUSS man markieren koennen) und die
     wenigen Stellen, die ausdruecklich zum Kopieren da sind - die tragen
     spaeter im Blatt user-select:all und stechen diese Regel. */
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,select,[contenteditable]{
    -webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
  /* v880 (User, iPhone: "Footer immer noch nicht korrekt"): Der leere
     Streifen unter den Symbolen kam aus env(safe-area-inset-bottom). In
     Safari meldet das nicht nur den Home-Indikator (34px), sondern die
     ganze untere Browser-Zone - die Leiste stand dadurch weit ueber dem
     Rand und wanderte beim Scrollen mit. --sab deckelt den Wert auf den
     echten Indikator-Bereich; die Leiste sitzt damit unten, ohne dass der
     Indikator ueber den Symbolen liegt. */
  :root{--sabMess:env(safe-area-inset-bottom,0px);
    /* v885 (GEMESSEN am iPhone): Im Browser meldet die Sicherheitszone 0
       und die Leiste sitzt perfekt (LUFT 0px). NUR in der installierten
       App meldet iOS volle 34px - die schoben die Symbole nach oben,
       waehrend Android mit ~24px auskommt. Deckel daher 20px. */
    --sab:calc(min(env(safe-area-inset-bottom,0px),20px) * var(--sabAn,1))}   /* v881 */
  /* v878 (User, iPhone): Die Fussleiste sass zu hoch und wackelte. fixed
     bottom:0 meint den LAYOUT-Viewport - der ist auf dem iPhone groesser
     oder kleiner als das, was man sieht. --vvUnten (JS, visualViewport)
     misst den Unterschied, Nav und Flaeche haengen daran. */
  .view{position:fixed;inset:0 0 calc(56px + var(--sab,0px) + var(--vvUnten,0px)) 0;overflow-y:auto;display:none;
    padding-top:env(safe-area-inset-top,0px)}   /* iPhone: iOS-Uhr nicht ueber dem Kopf (v186) */
  /* Tab-Wechsel fühlt sich nach App an: Inhalt gleitet sanft herein */
  @keyframes viewAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .view.on{display:block;animation:viewAuf .22s ease}
  :root.geraet-tablet-breit #view-buchen.bk-nativ9 #buchenTray9{display:none}   /* v1753 (Harun bn1): steht im direkten Modus oben in der TV-Spalte (#tvHeute9) */
  #view-buchen.on:not(.bk-nativ9){animation:none}   /* iframe nicht mitanimieren (Flackern) - v1749 (Harun bn1): direkter Modus (BuchenKern) animiert wie die anderen Reiter */
  /* Druck-Feedback auf allen Bedienelementen */
  button:active{transform:scale(.97)}
  nav button:active{transform:none}
  /* ── Touch-Feedback (nativ, R90): die Press-Engine setzt .gedrueckt auf ALLES
     Antippbare — auch Div-Tappables (Terminblöcke, Chips, Listenzeilen), die
     kein :active-Scale haben. Kurzer Anlauf + Bewegungs-Abbruch passieren im JS. ── */
  .gedrueckt{filter:brightness(1.16);transition:filter .05s ease}
  html[data-theme="light"] .gedrueckt{filter:brightness(.93)}
  .chipbtn.gedrueckt,.srow.gedrueckt,.dr-punkt.gedrueckt{transform:scale(.97)}
  .wp-ev.gedrueckt,.tl-ev.gedrueckt,.ad-chip.gedrueckt{filter:brightness(1.28)}
  html[data-theme="light"] .wp-ev.gedrueckt,html[data-theme="light"] .tl-ev.gedrueckt,
  html[data-theme="light"] .ad-chip.gedrueckt{filter:brightness(.88)}
  .wp-ev.dragging.gedrueckt{filter:none}
  /* Lade-Puls: erscheint nur, wenn ein Tipp länger als 150 ms aufs Netz wartet */
  #ladePuls{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;
    transform:translateX(-50%) scale(.8);opacity:0;z-index:600;background:var(--card);
    border:1px solid var(--line);border-radius:9999px;padding:7px 9px;pointer-events:none;
    transition:opacity .15s,transform .15s;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  #ladePuls.on{opacity:1;transform:translateX(-50%) scale(1)}
  #ladePuls i{display:block;width:16px;height:16px;border:2.5px solid var(--line);
    border-top-color:var(--accent);border-radius:50%;animation:lpd 1s linear infinite}
  @keyframes lpd{to{transform:rotate(360deg)}}
  /* ── Vollbild-Termineditor (BC2, R93): X | FERTIG, farbiger Kalender-Kopf,
     Zeilen-Karten — ersetzt das kleine Privat-Modal ── */
  .edit-sheet{position:fixed;inset:0;z-index:380;background:var(--bg);display:flex;flex-direction:column;animation:esAuf .22s ease}
  /* v1407/v1411 (Harun): Wisch auf der Zettel-Seite = naechster/voriger Zettel. v1411: NUR die Titelkarte zieht ab (ein Klon liegt ueber
     der Karte), darunter steht sofort der naechste Text, der Rest der Seite bleibt stehen */
  #aufgSheet .es-body.ag-seite{position:relative}
  #aufgSheet .ag-kopfkarte.ag-klon9{position:absolute;z-index:6;margin:0;pointer-events:none;transform-origin:left top;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .34s cubic-bezier(.32,.72,.35,1),opacity .3s}
  #aufgSheet .ag-kopfkarte.ag-klon9.weg{transform:translate(-30%, -14%) rotate(-9deg);opacity:0}   /* v1413 (Harun): zieht nach oben links ab; zurueck = dieselbe Bahn rueckwaerts */
  #aufgSheet .ag-kopfkarte.ag-klon9.folgt{transition:none}   /* v1414: waehrend der Finger fuehrt, keine Uebergaenge */
  #aufgSheet .ag-kopfkarte.ag-klon9.deck{transition:none;z-index:5;box-shadow:none}   /* v1414: die aktuelle Karte bleibt liegen, bis die vorige sie ueberdeckt */
  #aufgSheet .ag-kopfkarte.ag-klon9.rein{z-index:7}
  .ag-stand9{font-weight:500;color:var(--muted);font-size:.85em}
  @keyframes esAuf{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* ==== bc/css/modules/termin/termin-01.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 2 */

  /* v529: Die UPLYNE-Zurueck-Leiste schwebt bei safe-area+2px und ist ~24px
     hoch - bei nur 10px Abstand lag der Schliessen-Knopf des Editors genau
     darunter und war nicht antippbar (gleiche Ursache wie im Termin-Blatt,
     Fund 24.08. ueber eine Testerin mit iPhone). Deshalb 30px wie dort. */
  /* v915: zurueck auf die 30px von v529. Die Erhoehung auf 46px (v912) war
     eine Fehldiagnose - die Tastatur fehlte nicht wegen der schwebenden
     UPLYNE-Leiste, sondern weil sich Safari auf dem Geraet verhakt hatte
     (nach einem Neustart lief alles). Der Abstand bleibt also so knapp wie
     noetig, damit oben kein Platz verschenkt wird. */
  /* v1028 (Betreiber): Die Kopfschrift richtet sich nach der Helligkeit der
     gewaehlten Farbe. Die Palette enthaelt sehr helle Toene (Beige, Pastell) -
     darauf war die weisse Schrift unlesbar. --esInk kommt aus esKopfFarbe. */
  .es-kopf{display:flex;align-items:center;gap:10px;background:#77777d;color:var(--esInk,#fff);
    padding:calc(env(safe-area-inset-top,0px) + 30px) 12px 8px}
  .es-kopf button{background:none;border:none;color:var(--esInk,#fff);font-weight:800;cursor:pointer;font-size:.95rem;padding:6px}
  .es-kopf .x{font-size:1.6rem;line-height:1;padding:0 8px 2px}
  .es-kalender{padding:0 16px 12px;background:#77777d;color:#fff;font-weight:700;font-size:.95rem}
  .es-kalender small{display:block;font-weight:500;font-size:.7rem;opacity:.85;margin-top:2px}
  .es-body{flex:1;overflow-y:auto;padding:12px 12px calc(24px + env(safe-area-inset-bottom,0px))}
  .es-zeile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
  /* BC2-OPTIK 1:1 (User 14.08., Screenshots): farbiger Kopf mit Kalender-
     wahl, WEISSER Titel/Zeit-Block, darunter weisse KARTEN auf grauem Grund */
  .es-kopf{background:var(--esKopf, #8B5CF6)}
  .es-kal-wahl{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
  .es-kal-wahl select{appearance:none;-webkit-appearance:none;background:transparent;border:none;
    color:#fff;font-weight:800;font-size:1.05rem;font-family:inherit;max-width:100%;padding:4px 0}
  .es-kal-wahl select:focus{outline:none}
  /* v1040: Auswahl-Pfeil wie der Name in der Kopfschrift-Farbe - er ist der
     einzige Hinweis, dass die Kalenderzeile antippbar ist, und darf auf hellen
     Terminfarben nicht verschwinden. */
  .es-kal-wahl .pf{color:var(--esInk,#fff);font-size:.8rem;opacity:.9;pointer-events:none}
  .es-kal-wahl select option{color:#111}
  .edit-sheet .es-body{background:var(--bg);padding:0 0 28px}
  /* v440: BC2-Optik - Titel liegt flach auf dem Seitengrund */
  .es-blockA{background:transparent;padding:0 16px;margin-bottom:12px}
  .es-titelz{border-bottom:2px solid var(--line);padding:20px 0 16px}
  .es-titelz:has(.es-fehlt9){border-bottom-color:#E5484D}   /* Harun 12.10.: Titel Pflicht */
  .es-titelz input.es-fehlt9::placeholder{color:#E5484D}
  .es-titelz input{border:none;background:transparent;font-size:1.4rem;font-weight:500;
    color:var(--ink);width:100%;font-family:inherit}
  .es-vb{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
    padding:9px 0;cursor:pointer}
  .es-vb .l{display:flex;flex-direction:column;font-size:.66rem;letter-spacing:.06em;color:var(--muted)}
  .es-vb .l b{font-size:1.06rem;font-weight:600;color:var(--ink);margin-top:2px}
  .es-vb .z{font-size:1.35rem;font-weight:500;color:var(--ink)}
  .es-hid{position:absolute;top:0;bottom:0;left:0;width:62%;opacity:0}
  .es-hid.zr{left:auto;right:0;width:38%}
  .es-gmt{display:flex;align-items:center;justify-content:space-between;
    border-top:2px solid var(--line);padding:14px 0 16px;color:var(--muted);font-size:.9rem}
  .es-gmt .gz{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
  /* v433: mehr Luft zwischen den Karten (Vorbild Google-Kalender, User 22.08.) */
  .edit-sheet .es-zeile{background:var(--card);border:none;border-radius:10px;margin:0 10px 14px;
    padding:15px 14px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  /* v440: KEINE Linie zwischen VON und BIS (BC2 trennt nur die Bloecke) -
     dafuer mehr Luft zwischen den beiden Zeilen */
  .edit-sheet .es-vb + .es-vb{margin-top:12px}
  .edit-sheet .es-zeile > label{font-size:.68rem;letter-spacing:.08em;color:var(--muted)}
  .edit-sheet .es-zeile select{border:none;background:transparent;color:var(--ink);
    font-size:1rem;font-family:inherit;width:100%;padding:5px 0 0}
  .edit-sheet .es-zeile input[type=text]{border:none;background:transparent;color:var(--ink);
    font-size:1rem;font-family:inherit;width:100%;padding:2px 0}
  .edit-sheet #esNotiz{background:transparent !important;border:none !important;
    padding:2px 0 !important;width:100%;color:var(--ink);font-family:inherit;font-size:1rem;resize:vertical}
  .es-hinweis{font-size:.72rem;color:var(--muted);line-height:1.5;padding:2px 16px}
  /* Editor-Feinschliff (14.08.): keine Fokus-Rahmen, feine Kopf-Schrift,
     BC2-Neutraltoene im Light Mode, Teilnehmer-Vorschlagsliste */
  .edit-sheet input:focus,.edit-sheet textarea:focus,.edit-sheet select:focus{outline:none;box-shadow:none}
  .es-kopf2 select{font-weight:500;letter-spacing:.01em}
  .es-kopf button{font-weight:600}
  :root[data-theme="light"] .edit-sheet .es-body{background:#f2f2f2}
  :root[data-theme="light"] .edit-sheet .es-zeile{background:#fff}
  :root[data-theme="light"] .es-blockA{background:transparent}
  :root[data-theme="light"] .es-bandB{background:transparent}
  :root[data-theme="light"] .es-titelz input{background:transparent}
  #esTeilnEingabe{border:none;background:transparent;color:var(--ink);font-size:1rem;
    font-family:inherit;width:100%;padding:2px 0}
  #esTeilnVorschlag{position:absolute;left:8px;right:8px;top:100%;z-index:30;background:var(--card);
    border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.18);
    max-height:220px;overflow-y:auto;padding:4px}
  #esTeilnVorschlag button{display:block;width:100%;text-align:left;border:none;background:none;
    color:var(--ink);font-family:inherit;font-size:.95rem;padding:9px 10px;border-radius:8px;cursor:pointer}
  #esTeilnVorschlag button:hover{background:var(--chip)}
  /* Kalender-Auswahl-Blatt (BC2, 14.08.) */
  /* v1040 (Betreiber-Fund 08.09.): Der Kalendername trug hartes Weiss, der
     Kopf ringsum aber die Kontrastschrift --esInk (v1028). Auf den hellen
     Terminfarben der Palette (Gelb, Gruen) war die Zeile damit unlesbar und
     wirkte wie abgeschaltet. GRUND: Die Kalenderwahl muss sichtbar bleiben,
     egal welche Farbe der Termin traegt. */
  #esKalName{color:var(--esInk,#fff);font-weight:500;font-size:1.05rem;letter-spacing:.01em;
    max-width:72vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
  .eskm-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:8px}
  .eskm-tabs button{flex:1;background:none;border:none;color:var(--muted);font-family:inherit;
    font-weight:700;font-size:.86rem;padding:10px 4px;cursor:pointer;border-bottom:2px solid transparent}
  .eskm-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
  .eskm-zeile{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;
    color:var(--ink);font-family:inherit;font-size:1rem;text-align:left;padding:11px 6px;
    border-bottom:1px solid var(--line);cursor:pointer}
  .eskm-zeile .q{width:26px;height:26px;border-radius:5px;flex:0 0 auto}
  .eskm-zeile.on{font-weight:800}
  /* BC2-Feinschliff (14.08.): zweizeiliger Kopf, graues Zeitband, Kreis-Radio,
     kantige Karten ohne Schatten und ohne Auswahl-Pfeile, Deko-Symbole */
  .es-kopf2{background:var(--esKopf, #8B5CF6);color:var(--esInk,#fff);padding:0 16px 12px;display:flex;align-items:center;flex-wrap:wrap}   /* v1028 */
  .es-kopf2 .es-kopf-sub{display:block;width:100%;font-size:.68rem;opacity:.8;margin-top:2px}
  .es-kopf2 .es-kal-wahl{max-width:100%}
  .es-kopf2 select{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:72vw;
    flex:0 1 auto;width:auto}
  .es-kopf2 .es-kal-wahl{flex:0 1 auto}
  .ic-btn{background:none;border:none;color:var(--muted);opacity:.8;padding:4px;cursor:pointer;flex:0 0 auto;display:flex}
  .es-kopf .mic{display:flex;align-items:center}
  .es-kopf .mic.an{color:#ffdf6b}
  .es-blockA{margin-bottom:0;padding:0 16px}
  .es-titelz{border-bottom:none;display:flex;align-items:center;gap:10px}
  /* v440: BC2-Optik - kein Grau-Band mehr, VON/BIS flach auf dem Grund */
  .es-bandB{background:transparent;padding:2px 16px 0;margin-bottom:14px}
  .dek{color:var(--muted);opacity:.75;flex:0 0 auto}
  .kreis{position:relative;display:inline-flex;width:23px;height:23px;flex:0 0 auto;cursor:pointer}
  .kreis input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
  .kreis span{width:23px;height:23px;border-radius:50%;border:2px solid var(--muted);box-sizing:border-box}
  .kreis input:checked + span{border-color:var(--accent);background:radial-gradient(circle at center, var(--accent) 0 44%, transparent 46%)}
  .edit-sheet .es-zeile{border-radius:6px;margin:0 8px 12px;box-shadow:none}
  .edit-sheet .es-zeile select{appearance:none;-webkit-appearance:none}
  .es-ortz{display:flex;align-items:center;gap:12px}
  .es-ortz input{flex:1}
  .es-erz{display:flex;align-items:center;gap:12px;position:relative;color:var(--muted)}
  .es-erz #esErinTxt{font-size:1rem}
  .es-erz #esErinTxt.aktiv{color:var(--ink)}
  .es-cover{position:absolute;inset:0;opacity:0;width:100%;height:100%}
  .es-teiln{display:flex;align-items:center;gap:12px;cursor:pointer}
  .es-teiln .ph{flex:1;font-size:1rem;color:var(--muted)}
  .es-teiln .ph.aktiv{color:var(--ink)}
  /* v440: Schalter-Zeilen (Zeit blocken, Template) - Kreis HART rechts,
     senkrecht mittig, gleiche Groesse wie "Ganztaegig" (User 22.08., die
     Inline-Variante kam auf dem Geraet zweimal nicht an). */
  .es-schalterz{display:flex !important;align-items:center !important;gap:10px}
  .es-schalterz > b{flex:1 1 auto;font-size:.95rem;font-weight:700}
  .es-schalterz .kreis{flex:0 0 auto;margin-left:auto}
  .es-vorlagez{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 8px}
  .es-vorlagez > span{flex:1 1 auto}
  .es-vorlagez b{font-size:.95rem;font-weight:700;display:block}
  .es-vorlagez small{font-size:.78rem;color:var(--muted)}
  .es-zeile label{font-size:.68rem;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:5px}
  .es-zeile input,.es-zeile select{background:var(--chip);border:1px solid var(--line);border-radius:9px;
    color:var(--ink);font-family:inherit;font-size:.95rem;padding:10px 11px}
  .es-vonbis{display:flex;gap:8px}
  .es-vonbis input{flex:1;min-width:0}
  #esTitel{width:100%;font-size:1.22rem;border:none;background:transparent;padding:12px 0}   /* v912: groessere Trefferflaeche */
  #esTitel:focus{outline:none}
  /* Buchen-Reiter: die AEUSSERE Flaeche scrollt NICHT (overflow:hidden) und der
     Rahmen ist exakt bildschirmhoch. Vorher konnte der Browser beim Antippen die
     aeussere Flaeche verschieben, um den Rahmen „in den Blick" zu holen — das war
     der Sprung um gut 100 px (identischer Inhalt, nur andere Scrollposition). */
  #view-buchen{overflow:hidden}
  #view-buchen iframe{width:100%;height:100%;border:none;display:block}
  /* v1746 (Harun bn1): Buchen OHNE iframe - BuchenKern (buchen-kern.js) im Schattenbaum #buchenKern9. Das iframe bleibt als
     Rueckfall (Modul laedt nicht / Fehler beim Aufbau / ts_buchen_iframe='1' / Folgeseiten wie das Buchungsformular). */
  #buchenKern9{display:none;width:100%;height:100%}
  #view-buchen.bk-nativ9 #buchenKern9{display:block}
  #view-buchen.bk-nativ9 #buchenFrame{display:none}
  /* Harun 14.10./15.10. (Firmen-Tab): Reiterleiste "Buchen | Auswertung" - EINE Leiste (#firmaReiter9) fest UNTEN direkt
     ueber der Fussleiste. v1915 (Harun: Pillen-/Kastenstil weg): zwei durchgehende Reiter je 50 % ueber die volle Breite,
     schlichter Text ohne Rahmen; aktiv = var(--ink) (hell im Dunkelmodus) mit Akzent-Unterstrich (var(--accent), wie der
     aktive Fussleisten-Reiter) ueber die volle Reiterbreite, der beim Wechsel 200 ms gleitet (.fr-strich9, data-akt am
     Element, gesetzt in firmenTabPflegen9); inaktiv = var(--muted). Grund wie die Fussleiste (Milchglas var(--nav)),
     oben die Linie wie ueber der Fussleiste. Zeile 44 px; ist sie sichtbar (body.firma-reiter-an9), enden
     #view-buchen/#view-analyse darueber. */
  .firma-reiter9{position:fixed;left:0;right:0;z-index:99;box-sizing:border-box;height:44px;
    bottom:calc(56px + var(--sab,0px) + var(--vvUnten,0px));
    background:color-mix(in srgb, color-mix(in srgb, var(--chip) 70%, var(--nav)) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line)}   /* rw1 (Harun 15.10.): leicht von der Fussleiste abgesetzt - hell grau-weiss, dunkel etwas heller als die Leiste (var(--chip) in var(--nav)) */
  .firma-seg9{position:relative;display:flex;width:100%;height:100%;margin:0;padding:0;border:0;background:none}
  .firma-seg9 button{flex:1 1 0;min-width:0;height:100%;margin:0;padding:0 8px;border:0;border-radius:0 !important;background:none !important;
    box-shadow:none !important;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:color .2s}
  .firma-seg9 button.on{color:var(--ink);font-weight:700}
  .fr-strich9{position:absolute;left:0;bottom:0;width:50%;height:2px;background:var(--accent);pointer-events:none;
    transform:translateX(0);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
  .firma-reiter9[data-akt="analyse"] .fr-strich9{transform:translateX(100%)}
  @media (prefers-reduced-motion:reduce){ .fr-strich9{transition:none} }
  html:not(.geraet-buch) body.firma-reiter-an9:not(.todo-tippt) #view-buchen,
  html:not(.geraet-buch) body.firma-reiter-an9:not(.todo-tippt) #view-analyse{bottom:calc(56px + var(--sab,0px) + var(--vvUnten,0px))}   /* ein14: keine Leiste mehr ueber der Fussleiste */
  /* Handy: Leiste und Fussleiste wirken als EINE Flaeche - die Linie/der Schatten der Fussleiste wandern an die Oberkante der Leiste */
  html:not(.geraet-tablet-breit) .firma-reiter9{box-shadow:0 -0.5px 0 var(--line), 0 -6px 24px rgba(0,0,0,.06)}
  /* Tastatur offen (Fussleiste faehrt weg, aufgaben-04.css): Leiste faehrt mit */
  body.todo-tippt .firma-reiter9{display:none !important}
  /* dk1 (Harun 17.10.: "die untere Leiste Buchen | Auswertung nimmt am Desktop Platz weg, unten angeschnittene Inhalte sind nicht
     sichtbar"): PC/Tablet quer (layout-tablet-breit.css, Fussleiste = Seitenleiste links) - die Reiter stehen als flacher
     Umschalter OBEN in der Kopfzeile, linksbuendig an der Inhaltskante der offenen Seite (Lage: firmaReiterLage9, basis.js);
     die untere Leiste entfaellt, #view-buchen/#view-analyse reichen wieder bis ganz unten. In der Auswertung ersetzt der
     Umschalter den Titel "Auswertung" (Platz bleibt, nur unsichtbar). Handy/Tablet hoch unveraendert unten. */
  :root.geraet-tablet-breit .firma-reiter9{left:var(--fr-links9, calc(var(--lb-rail,72px) + 24px));right:auto;top:10px;bottom:auto;height:36px;width:auto;
    padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:60}
  :root.geraet-tablet-breit .firma-seg9{width:auto;gap:22px}
  :root.geraet-tablet-breit .firma-seg9 button{flex:0 0 auto;padding:0;font-size:1.02rem;letter-spacing:-.01em}
  :root.geraet-tablet-breit .fr-strich9{display:none}   /* gleitender Strich rechnet mit 50 % - oben je Reiter eigener Strich */
  :root.geraet-tablet-breit .firma-seg9 button.on{box-shadow:inset 0 -2px 0 var(--accent) !important}
  :root.geraet-tablet-breit:not(.geraet-buch) body.firma-reiter-an9 #view-buchen, :root.geraet-tablet-breit:not(.geraet-buch) body.firma-reiter-an9 #view-analyse{
    bottom:0}
  :root.geraet-tablet-breit body.firma-reiter-an9 #view-analyse #anaTitelFirma9{visibility:hidden}
  /* v1917 (Harun 15.10.): Drei-Punkte-Menue (#buBurger9/#anaBurger9) zeigt nur AUSNAHMEN - ohne Recht auf die Buchungsregeln
     (#buchRegelnBox.hide, gesetzt in start.js/konto.js) waere es leer, dann gibt es den Knopf gar nicht */
  /* bu1 (Harun 17.10.): Knopf nur, wenn das Menue mindestens einen Eintrag hat (body.seit-voll9 aus seitAusnMalen9: Ausnahmen-Recht oder TV-Block) */
  body:not(.seit-voll9) #buBurger9, body:not(.seit-voll9) #anaBurger9,
  body.privat-modus9 #buBurger9, body.privat-modus9 #anaBurger9{display:none !important}
  /* ein9 (Harun 17.10.): die Faecher-Leiste aus ein7 ist entfernt. Am Desktop klappen "Buchen" und "Auswertung" direkt UNTER "PKM" in
     der linken Leiste auf, solange PKM offen ist (body.firma-reiter-an9): die vorhandenen Zustandstraeger #tab-buchen/#tab-analyse
     (.reiter-flag9, aktiv = .on in Akzentfarbe) werden eingerueckt und kleiner gezeigt; sonst zugeklappt. Kein Platz extra.
     Unten am Handy tragen die Reiter dieselben Symbole (Buchen = drei Balken, Auswertung = Saeulen) links neben dem Wort. */
  .firma-seg9 button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .firma-seg9 .fr-ic9{display:block;width:18px;height:18px;flex:0 0 auto}
  :root.geraet-tablet-breit nav > *{order:5}
  :root.geraet-tablet-breit nav > #tab-firma9{order:1}
  :root.geraet-tablet-breit nav > #tab-buchen{order:2}
  :root.geraet-tablet-breit nav > #tab-analyse{order:3}
  /* ein14 (Harun 18.10.): Unterzeilen unter PKM entfernt - Umschalter "Buchen | Auswertung" steht oben (Block ein14 unten) */
  /* Buch-Modus (Faltgeraet, layout-flex.css): Buchen und Auswertung stehen nebeneinander - Reiter dort ueberfluessig, Titel bleibt */
  html.geraet-buch .firma-seg9{display:none !important}
  html.geraet-buch .firma-reiter9{display:none !important}
  .t-act{display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap}
/* ein14 (Harun 18.10.: "eine Leiste unten"): "Buchen | Auswertung" als flacher Zweier-Umschalter OBEN links an Stelle des Seitentitels
   (Handy und Desktop gleich; Desktop-Lage misst firmaReiterLage9), Stil wie die Umschalter der Auswertung (Symbol + Wort). Die zusaetzliche
   untere Leiste am Handy und die Unterzeilen unter PKM am Desktop entfallen. Burger rechts bleibt. */
html:not(.geraet-buch) .firma-reiter9{top:calc(10px + env(safe-area-inset-top,0px));bottom:auto;left:12px;right:auto;height:36px;width:auto;padding:0;
  background:none;border:0;box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:60}
html:root.geraet-tablet-breit:not(.geraet-buch) .firma-reiter9{left:var(--fr-links9, calc(var(--lb-rail,72px) + 24px));top:10px}
html .firma-seg9,html:root.geraet-tablet-breit .firma-seg9{width:auto;height:100%;gap:2px;padding:2px;box-sizing:border-box;border-radius:10px;background:var(--chip);border:1px solid var(--line)}
html .firma-seg9 button,html:root.geraet-tablet-breit .firma-seg9 button{flex:0 0 auto;height:100%;padding:0 12px;border-radius:8px !important;font-size:.8rem;font-weight:700;letter-spacing:0;
  color:var(--muted);box-shadow:none !important;gap:6px}
html .firma-seg9 button.on,html:root.geraet-tablet-breit .firma-seg9 button.on{color:var(--accent);background:var(--card) !important;box-shadow:0 1px 4px rgba(0,0,0,.14) !important}
html .firma-seg9 .fr-ic9{width:16px;height:16px}
html .fr-strich9{display:none !important}
body.firma-reiter-an9 #view-analyse #anaTitelFirma9{visibility:hidden}

/* ein17 (Harun 18.10.: "draufgeklatscht", auf Buchen ueber dem Logo): "Buchen | Auswertung" als Text-Reiter IN der Kopfzeile -
   Symbol + Wort gross wie ein Seitentitel, aktiv hell mit feiner Akzent-Unterstreichung, inaktiv gedaempft, kein Kasten. Auf beiden
   Seiten gleich; Buchen rueckt seinen Inhalt (BizCal-Marke + Version) unter die Kopfzeile, keine Ueberlappung. Desktop gleich. */
html:not(.geraet-buch) .firma-reiter9{top:calc(8px + env(safe-area-inset-top,0px));height:40px;left:16px}
html:root.geraet-tablet-breit:not(.geraet-buch) .firma-reiter9{top:8px}
html .firma-seg9,html:root.geraet-tablet-breit .firma-seg9{gap:22px;padding:0;border:0;background:none;border-radius:0}
html .firma-seg9 button,html:root.geraet-tablet-breit .firma-seg9 button{padding:0 0 1px;height:100%;border-radius:0 !important;background:none !important;
  font-size:1.12rem;font-weight:800;letter-spacing:-.01em;color:var(--muted);box-shadow:none !important;gap:7px}
html .firma-seg9 button.on,html:root.geraet-tablet-breit .firma-seg9 button.on{color:var(--ink);background:none !important;box-shadow:inset 0 -2px 0 var(--accent) !important}
html .firma-seg9 .fr-ic9{width:19px;height:19px}
html:not(.geraet-buch) body.firma-reiter-an9:not(.todo-tippt) #view-buchen #buchenKern9{padding-top:46px;box-sizing:border-box}
/* ein18 (Harun 18.10.): Reiter weniger dominant - kleinere, leichtere Schrift, inaktiv gedaempfter */
html .firma-seg9 button,html:root.geraet-tablet-breit .firma-seg9 button{font-size:1rem;font-weight:700;gap:6px}   /* vorher 1.12rem/800 */
html .firma-seg9 button:not(.on){color:color-mix(in srgb,var(--muted) 75%,transparent)}
html .firma-seg9 .fr-ic9{width:17px;height:17px}

/* ein19 (Harun 18.10.): fester Kopf = Reiter + Burger in EINEM Container (bleibt beim Wechsel stehen), oben mehr Luft; Strich gleitet */
html:not(.geraet-buch) .firma-reiter9{top:calc(16px + env(safe-area-inset-top,0px));left:8px;right:8px;display:flex;align-items:center;justify-content:space-between}
html:not(.geraet-buch) .firma-reiter9.hide{display:none}
html:root.geraet-tablet-breit:not(.geraet-buch) .firma-reiter9{top:12px;right:auto}
.fr-burger9{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink);margin-right:-6px}
:root.geraet-tablet-breit .fr-burger9{display:none}
body:not(.seit-voll9) .fr-burger9,body.privat-modus9 .fr-burger9{visibility:hidden}
body.firma-reiter-an9 #anaBurger9,body.firma-reiter-an9 #buBurger9{visibility:hidden !important}
html .firma-seg9 button.on,html:root.geraet-tablet-breit .firma-seg9 button.on{box-shadow:none !important}
html .firma-seg9 .fr-strich9{display:block !important;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:transform .25s cubic-bezier(.2,.7,.2,1),width .25s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){ html .firma-seg9 .fr-strich9{transition:none} }
:root:not(.geraet-tablet-breit) #view-analyse .ana-bar .ana-bar-zeile{height:66px !important;padding-bottom:0}
html:not(.geraet-buch) body.firma-reiter-an9:not(.todo-tippt) #view-buchen #buchenKern9{padding-top:58px}
/* hig73 (Harun 19.10.: Zurueck-Pfeil der Folgeseite "Datum & Uhrzeit" halb unter "Buchen | Auswertung"): der Rahmen (#buchenFrame -
   Folgeseite bzw. iframe-Rueckfall) beginnt wie #buchenKern9 UNTER dem festen Kopf (Reiter: top 16px + Statusleiste, 40px hoch).
   Die Statusleiste zaehlt hier mit, weil env() im Rahmen selbst 0 ist. */
html:not(.geraet-buch) body.firma-reiter-an9:not(.todo-tippt) #view-buchen #buchenFrame{margin-top:calc(58px + env(safe-area-inset-top,0px));height:calc(100% - 58px - env(safe-area-inset-top,0px))}
#view-buchen,#view-analyse{overflow-x:hidden}
/* ein20 (Harun 18.10.): Akzent-Strich naeher am Wort, Chips weiter nach unten */
html .firma-seg9 .fr-strich9{bottom:6px}
:root:not(.geraet-tablet-breit) #view-analyse .ana-bar .ana-bar-zeile{height:76px !important}
/* ein26: Fokus-Rahmen der Reiter nur bei Tastaturbedienung */
html .firma-seg9 button:focus{outline:none}
html .firma-seg9 button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px !important}
/* ein29 (Harun 18.10.): Fokus-Rahmen an Leiste und Reiter nur bei echter Tastatur-Navigation (html.tast9, basis.js) - sonst nie,
   auch wenn der Browser nach einem Klick + Tastendruck :focus-visible meldet */
html:not(.tast9) nav button:focus,html:not(.tast9) nav button:focus-visible,
html:not(.tast9) .firma-seg9 button:focus,html:not(.tast9) .firma-seg9 button:focus-visible{outline:none !important;box-shadow:none !important}
html.tast9 nav button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}

/* ==== bc/css/core/core-02.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 3 */

  .chipbtn{border:none;background:var(--chip);border-radius:7px;padding:4px 9px;font-size:.7rem;cursor:pointer;color:var(--muted);font-weight:600}
  .chipbtn.blau{color:var(--accent)}
  .chipbtn.rot{color:var(--rot)}
  .chipbtn.gruen{color:var(--ok)}
  /* v1162 (Betreiber 13.09.): "Reaktivieren sollte als eigenstaendiger Knopf
     da sein" - nicht als blasser Chip zwischen den anderen. */
  .chipbtn.fest,.chipbtn.gruen.fest{background:var(--ok);color:#fff;padding:7px 14px;font-size:.76rem;font-weight:700}
  :root[data-theme="dark"] .chipbtn.fest,:root[data-theme="dark"] .chipbtn.gruen.fest{color:#0f1115}
  .chipbtn.ghost{margin-left:auto;background:none}
  .verlauf{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
  .vl-item{position:relative;padding:0 0 12px 22px;font-size:.78rem}
  .vl-item::before{content:'';position:absolute;left:5px;top:15px;bottom:-1px;width:2px;background:var(--line)}
  .vl-item:last-child{padding-bottom:0}
  .vl-item:last-child::before{display:none}
  .vl-dot{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%}
  .vl-zeit{color:var(--muted);font-size:.7rem;margin-top:1px}
  .sekt{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 2px 4px}
  #splash{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .35s}
  #splash.weg{opacity:0;pointer-events:none}
  #splash img{width:76px;height:76px;display:block}
  #splash b{font-size:1.5rem;color:var(--ink)}
  /* Betreiber 12.09.2026: Wo BizCal steht, soll darunter immer
     "Business Kalender" ausgeschrieben stehen - der Kurzname allein sagt
     beim ersten Kontakt nicht, worum es geht. */
  #splash .marke-block{display:flex;flex-direction:column;align-items:center;gap:2px}
  .marke-lang{font-size:.82rem;font-weight:500;letter-spacing:.06em;color:var(--muted,#777)}
  /* ── WORTMARKE BizCal ──────────────────────────────────────────────────
     EINE Fassung fuer alle Seiten. Wer sie aendert, aendert sie ueberall -
     sonst laufen die Seiten wieder auseinander wie vor dem 10.09.2026:
     einmal gesperrtes BIZCAL im Startvorhang, einmal Versalien mit Verlauf
     auf der Startseite, einmal zweifarbig gemischt in der Terminbuchung.
     GEMISCHTE SCHREIBUNG, nicht Versalien: das grosse C trennt die beiden
     Worthaelften und macht den Namen auf einen Blick lesbar. Enge Laufweite
     statt gesperrt - gesperrte Versalien wirken wie eine Behoerdenschrift.
     "Cal" traegt den Hausverlauf; das nimmt die Zweiteilung des Zeichens
     auf (die 3 als B, die 0 als C). */
  .wortmarke{font-weight:800;letter-spacing:-.025em;white-space:nowrap}
  /* "Biz" duenner als "Cal" - der Gewichtssprung trennt die Worthaelften
     zusaetzlich zur Farbe. Bewusst 400 und nicht 300: In der Fusszeile der
     Buchungsseite steht die Marke sehr klein, dort bricht ein 300er weg. */
  .wortmarke>span:first-child{font-weight:400}
  .wortmarke>span+span{background:linear-gradient(100deg,#8B5CF6 10%,#0FA79E 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent}

  #splash .ring{width:26px;height:26px;border-radius:50%;border:3px solid var(--chip);border-top-color:var(--accent);animation:spl .9s linear infinite}
  @keyframes spl{to{transform:rotate(360deg)}}
  .wrap{max-width:560px;margin:0 auto;padding:20px 16px 34px}
  h1{font-size:1.35rem;font-weight:800;margin:8px 2px 18px;letter-spacing:-.01em}
  /* Karten: weich statt kastig — im Hellen trägt der Schatten, die Linie tritt zurück */
  .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px;
    box-shadow:0 1px 2px rgba(35,30,15,.04), 0 10px 28px rgba(35,30,15,.05)}
  :root[data-theme="light"] .card{border-color:rgba(120,110,80,.12)}
  :root[data-theme="dark"] .card{box-shadow:none}
  .msg{text-align:center;color:var(--muted);padding:26px 8px;font-size:.9rem}
  /* Termin-Karten */
  .t-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .t-datum{font-weight:800;font-size:.95rem}
  .t-zeit{color:var(--muted);font-size:.85rem}
  .t-titel{font-size:.9rem;margin:6px 0 2px;font-weight:600}
  .t-sub{color:var(--muted);font-size:.8rem}
  .chip{display:inline-block;font-size:.68rem;font-weight:700;border-radius:99px;padding:3px 9px;margin-left:auto}
  .chip.gruen{background:rgba(22,163,74,.12);color:var(--ok)}
  .chip.gelb{background:rgba(180,83,9,.12);color:var(--warn)}
  .chip.grau{background:var(--chip);color:var(--muted)}
  .t-actions{display:flex;gap:10px;margin-top:12px}
  .btn{flex:1;border:none;border-radius:10px;padding:11px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit}
  /* Aktionsknoepfe tragen die Akzentfarbe des Modus (hell Cyan, dunkel Lila) -
     nicht mehr Gruen (User 19.08.) */
  .btn.gruen{background:var(--accent);color:var(--accent-ink)}
  .btn.rot{background:transparent;color:var(--rot);border:1px solid var(--rot)}
  .btn.mini{flex:0 0 auto;font-size:.75rem;padding:7px 12px}
  .btn[disabled]{opacity:.5;cursor:wait}
  .link-absagen{font-size:.75rem;color:var(--muted);background:none;border:none;cursor:pointer;
    text-decoration:underline;padding:0;margin-top:10px;font-family:inherit}
/* ==== bc/css/modules/einstellungen/einstellungen-01.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 4 */

  /* Einstellungen */
  .set-row{display:flex;align-items:center;gap:12px;padding:6px 2px}
  /* v1617 (Harun es2, Desktop-Fund): min-width:0 - ohne das durfte der Flex-Text
     nie schmaler werden als sein Inhalt, ein breites Firmenlogo (firmaKopf9,
     bis 210px) drueckte den Teamnamen dann ueber den Kartenrand hinaus (zuletzt
     als abgeschnittenes Wort sichtbar, "Unternehmensgrupp" ohne e). Jetzt bricht
     der Name sauber um, statt zu ueberlaufen. */
  .set-row .tx{flex:1;min-width:0}
  .set-row .tx b{display:block;font-size:.92rem;overflow-wrap:anywhere}
  .set-row .tx span{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
  .switch{position:relative;width:48px;height:28px;flex:0 0 auto}
  .switch input{opacity:0;width:0;height:0}
  /* v556 (Harun 25.08.): Der AUSGESCHALTETE Schalter war im Dunkelmodus kaum
     zu sehen - --chip liegt dort dicht am Hintergrund, man erkannte nur den
     weissen Knauf und nicht, dass es ueberhaupt ein Schalter ist.
     Halbdurchsichtiges Grau statt --chip: es hebt sich in BEIDEN Modi ab
     (im Hellen dunkler als der Grund, im Dunklen heller), ohne dass es zwei
     getrennte Farbwerte braucht. Der feine Rand zeichnet die Bahn zusaetzlich
     nach. */
  .switch .sl{position:absolute;inset:0;background:var(--sw-aus);
    border:1px solid var(--sw-aus-rand);box-sizing:border-box;
    border-radius:99px;cursor:pointer;transition:.2s}
  .switch .sl:before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;
    background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .switch input:checked + .sl{background:var(--accent);border-color:var(--accent)}
  .switch input:checked + .sl:before{transform:translateX(20px)}
  .switch input:disabled + .sl{opacity:.4;cursor:not-allowed}
  /* Dashboard (Elemente aus dem Termin-Dashboard) */
  .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .kpi-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:12px 4px;text-align:center}
  .kpi-card .wert{font-size:1.7rem;font-weight:800}
  .kpi-card .lbl{font-size:.68rem;color:var(--muted);margin-top:2px}
  .kpi-card.heute-k{border-color:var(--accent)}
  /* Kacheln reagieren: PC per Hover, Handy per Druck — dezent, aber spuerbar */
  .kpi-card,#view-analyse .ind-card{transition:transform .16s cubic-bezier(.2,.7,.3,1),
    box-shadow .16s,border-color .16s}
  @media (hover:hover){
    #view-analyse .ind-card:hover,#kpiVereinbart .kpi-card:hover{
      transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.09);border-color:var(--accent)}
  }
  #view-analyse .ind-card:active,#kpiVereinbart .kpi-card:active{transform:scale(.97)}
  /* Gruppen-Chips + Zeitraum/Struktur-Knoepfe: kleines Anheben */
  @media (hover:hover){
    .ana-filter button:hover{transform:translateY(-1px)}
    .tfbtn:hover{border-color:var(--accent)}
  }
  .ana-filter button:active,.tfbtn:active{transform:scale(.97)}
  .tfbtn{transition:transform .14s,border-color .14s}
/* ==== bc/css/modules/kalender/kalender-01.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 5 */

  /* Teamkalender (TimeTree-Prinzip: Monat mit Termin-Balken in den Zellen) */
  .kalbox{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 8px;
    box-shadow:0 1px 2px rgba(35,30,15,.04), 0 10px 28px rgba(35,30,15,.05)}
  :root[data-theme="light"] .kalbox{border-color:rgba(120,110,80,.12)}
  :root[data-theme="dark"] .kalbox{box-shadow:none}
  .kal-head{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0 10px}
  .kal-head .nav{width:32px;height:32px;border-radius:50%;border:none;background:var(--chip);color:var(--ink);
    font-size:1.05rem;cursor:pointer;font-family:inherit}
  /* v218: die Ueberschrift ist der Weg eine Stufe heraus (Monat -> Jahr -> Jahre) */
  .kal-head .monat{font-weight:800;font-size:.92rem;min-width:130px;text-align:center;
    cursor:pointer;user-select:none;transition:transform .12s ease}
  .kal-head .monat:active{transform:scale(.96)}
  /* v219: Zeitraum und Jahreszahl sind getrennte Ziele - beide grosszuegig
     antippbar, ohne dass die Zeile optisch auseinanderfaellt */
  .kal-head .kh-a,.kal-head .kh-j{padding:2px 3px;border-radius:6px;
    transition:background-color .15s ease}
  .kal-head .kh-a:active,.kal-head .kh-j:active{background:var(--chip)}
  /* Jahres-Auswahl */
  .jw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .jw-grid button{border:1px solid var(--line);background:var(--chip);color:var(--ink);
    font-family:inherit;font-size:.92rem;font-weight:700;padding:14px 0;border-radius:11px;
    cursor:pointer;font-variant-numeric:tabular-nums;transition:transform .12s ease}
  .jw-grid button:active{transform:scale(.95)}
  .jw-grid button.on{background:var(--accent);color:#fff;border-color:transparent}
  /* v222: laufendes Jahr - derselbe getoente Grund wie beim laufenden Monat */
  .jw-grid button.heu{border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 13%, var(--chip))}
  .jw-nav{border:none;background:var(--chip);color:var(--ink);font-family:inherit;
    width:34px;height:34px;border-radius:9px;font-size:1.1rem;cursor:pointer;line-height:1}
  .kal-wd{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;padding-top:5px}   /* v790: Luft unter Eigene/Team */
  /* v790 (User, BC2): Grossbuchstaben, duenner - wirkt wie eine stille Beschriftung */
  .kal-wd div{font-size:.64rem;color:var(--muted);text-align:center;font-weight:400;
    text-transform:uppercase;letter-spacing:.07em}
  /* Konto loeschen: bewusst KLEIN und unscheinbar unten links (kein Menuepunkt),
     damit niemand versehentlich klickt — Rot erst beim Draufgehen */
  #kontoWeg{display:block;margin:22px 0 6px;padding:6px 2px;background:none;border:none;
    font-family:inherit;font-size:.72rem;color:var(--muted);opacity:.75;cursor:pointer;text-align:left}
  #kontoWeg:hover{color:var(--rot);opacity:1;text-decoration:underline}
  /* Legenden-Fusszeile der Analyse (Vorbild Termin-Dashboard legendFooter) */
  #legFuss{margin:14px 0 4px;border-top:1px solid var(--line)}
  #legFussKopf{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
    background:none;border:none;padding:11px 2px;font:700 .76rem inherit;color:var(--muted);cursor:pointer}
  #legFussKopf:hover{color:var(--ink)}
  #legFussInhalt{font-size:.72rem;line-height:1.5;color:var(--muted);overflow:hidden;
    transition:max-height .28s ease,opacity .2s;max-height:1200px;opacity:1;padding-bottom:8px}
  #legFussInhalt.zu{max-height:0;opacity:0;padding-bottom:0}
  #legFussInhalt b{color:var(--ink)}
  #legFussInhalt .lz{padding:7px 0;border-top:1px solid var(--line)}
  #legFussInhalt .lz:first-child{border-top:none}
/* ==== bc/css/modules/analyse/analyse-01.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 6 */


  /* Analyse kompakt: soll auf einem iPhone 15 ohne Scrollen passen (User 11.08.) */
  #view-analyse .sect{margin:12px 0 6px;font-size:.95rem}
  #view-analyse .kpi-card{padding:9px 6px}
  #view-analyse .kpi-card .zahl{font-size:1.45rem}
  #view-analyse .chartbox{height:auto;display:flex;flex-direction:column}
  #view-analyse .chartbox canvas{flex:0 0 auto}   /* Harun 14.10.: Hoehe aus dem Seitenverhaeltnis (Chart aspectRatio 3), keine feste Pixelhoehe */
  /* v713 (Harun 30.08.): "Mach die Buttons links kleiner, die sollen nicht
     den ganzen freien Platz einnehmen."
     Vorher ein Raster aus zwei gleich breiten Spalten - jeder Chip wurde auf
     die halbe Flaeche gezogen, egal wie kurz sein Wort war. Jetzt umbrechende
     Reihe: Jeder Chip ist so breit wie sein Text, mehrere passen
     nebeneinander. */
  /* v1195: sechs Chips in EINER Reihe, gleich breit (seit v1213 ganz oben) */
  #view-analyse .ana-filter{display:flex;flex-wrap:nowrap;gap:4px;overflow:visible;
    align-items:stretch;justify-content:stretch}
  #view-analyse .ana-filter button{flex:1 1 0;min-width:0;padding:6px 2px;font-size:.64rem;
    white-space:nowrap;text-align:center;line-height:1.2;max-width:none;height:auto;overflow:hidden;text-overflow:ellipsis}
  /* Indikatoren im GLEICHEN Kachel-Format wie die Terminvereinbarungen oben:
     4 nebeneinander, Symbol klein, Wert gross, Unterschrift entfaellt am Handy —
     das spart vertikal viel Platz fuer den Graphen (User-Ansage 11.08.). */
  /* Indikatoren EXAKT wie die KPI-Kacheln: zwei Zeilen (kleine Ueberschrift oben,
     darunter Symbol + Wert nebeneinander) -> gleiche Hoehe. Vorher drei Zeilen
     und dadurch sichtbar groesser (User-Fund 11.08.). */
  #view-analyse .ind-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  /* v1644 (Harun: "D4YS Fokus in der mobilen Version nicht anzeigen - da reicht das Widget"): Burger-Eintrag nur am PC (breit) */
  :root:not(.geraet-tablet-breit) #kalDrawer .dr-punkt[data-ansicht="d4ys"]{display:none}
  /* v1775 (Harun d4y): D4YS nur noch als Widget - Knopf in der Ansichtsleiste und Burger-Eintrag ueberall aus (Schalter D4YS_KALENDER9) */
  #kalDrawer .dr-punkt[data-ansicht="d4ys"], #kalSegDesktop button[data-ansicht="d4ys"]{display:none!important}
  /* v1633: Team-Sicht mit zwei Kacheln - je halbe Breite, darunter eine kleine Zusatzzeile */
  #view-analyse .ind-grid.ind-zwei9{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* kz1 (Harun 16.10.): Handy - Momentum/TV im selben 4er-Raster wie "Aktuelle Terminvereinbarungen" (.kpi-grid), gleiche Breite;
     zwei leere Platzhalter-Kacheln fuellen die Reihe (nicht klickbar). Am PC (breit) bleibt es bei zwei grossen Kacheln. */
  :root:not(.geraet-tablet-breit) #view-analyse .ind-grid.ind-zwei9{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  :root.geraet-tablet-breit #view-analyse .ind-leer9{display:none}
  #view-analyse .ind-leer9{pointer-events:none;cursor:default}
  #view-analyse .ind-leer9:hover,#view-analyse .ind-leer9:active{transform:none}
  /* v1639 (Harun: "Optik wie vorher, nur breiter"): keine Zusatzzeile mehr in der Kachel - die Einzelheiten stehen im Fenster beim Antippen */
  #view-analyse .ind-card .ind-sub9{display:none}
  /* v1899 (Harun 14.10.): Zeitstempel der letzten Ladung rechts in "Aktuelle Kennzahlen" - klein, grau, wie im alten Termin-Dashboard */
  /* am2 (Harun 16.10.): eigene Zeile direkt unter dem Trenner der Terminart-Knoepfe, ueber "Aktuelle Terminvereinbarungen" */
  #anaStand9{display:block;margin:6px 0 0;text-align:right;font-size:.65rem;font-weight:500;letter-spacing:0;color:var(--muted);white-space:nowrap;min-height:1em}
  #anaStand9:empty{display:none}
  /* am2: "Aktuelle Terminvereinbarungen" / "Aktuelle Kennzahlen" zuklappbar wie "Verlauf" (Kopf .ana-vk, kalender-07.css) */
  #view-analyse #anaVereinbart9 .ana-vk-pfeil,#view-analyse #anaKennzahlen9 .ana-vk-pfeil{transform:rotate(180deg)}
  #view-analyse.ana-ver-zu9 #anaVereinbart9 .ana-vk-pfeil,#view-analyse.ana-kenn-zu9 #anaKennzahlen9 .ana-vk-pfeil{transform:none}
  #view-analyse.ana-ver-zu9 #kpiVereinbart,#view-analyse.ana-kenn-zu9 #anaKennzahlen9 .ind-grid{display:none!important}
  /* Gleiche Breite darf nichts abschneiden (User 13.08.): Schrift skaliert mit
     der Kachelbreite, Werte brechen nie mit "..." ab. */
  /* v1220 (Fund 15.09., Momentum "+7..." abgeschnitten): EINE Regel je Teil.
     Vorher standen .lbl und .wert doppelt da - die spaetere feste font-size
     ueberschrieb die clamp(), und ein ellipsis auf dem Wert widersprach der
     Regel vom 13.08. direkt darueber.
     Schrift, Symbol und Abstand haengen jetzt per Container-Einheit (cqi) an
     der KACHELBREITE (container-type auf der Kachel); die vw-Zeile davor ist
     der Rueckfall fuer WebViews ohne Container-Einheiten. Die Obergrenzen sind
     die bisherigen Werte (1.08rem / 22px / 7px) - breite Kacheln sehen aus
     wie vorher. Reicht die Breite selbst mit kleinstem Symbol nicht, rutscht
     das Symbol UEBER den Wert (flex-wrap) - abgeschnitten wird nie. */
  #view-analyse .ind-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:12px 4px;text-align:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center;
    container-type:inline-size;min-width:0}
  #view-analyse .ind-card .lbl{display:block;font-weight:700;letter-spacing:.04em;white-space:normal;
    text-transform:uppercase;color:var(--muted);margin:0 0 3px;line-height:1.1;
    font-size:clamp(.46rem,2.1vw,.58rem);font-size:clamp(.46rem,11.5cqi,.58rem)}
  #view-analyse .ind-card .wert{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    row-gap:2px;column-gap:clamp(3px,1.15vw,7px);column-gap:clamp(3px,6.2cqi,7px);
    font-weight:700;line-height:1.15;min-width:0;overflow:visible;
    font-size:clamp(.8rem,3.5vw,1.08rem);font-size:clamp(.8rem,19cqi,1.08rem)}
  #view-analyse .ind-card .wert > span:last-child{flex:0 0 auto;white-space:nowrap;overflow:visible}
  #view-analyse .ind-card .em{display:inline-flex;flex:0 0 auto}
  #view-analyse .ind-card .em svg{display:block;
    width:clamp(14px,3.7vw,22px);height:clamp(14px,3.7vw,22px);
    width:clamp(14px,20cqi,22px);height:clamp(14px,20cqi,22px)}
  /* TV-Block traegt Text statt einer Zahl — dafuer kleiner setzen */
  /* v1220: Der TV-Text darf umbrechen. flex-basis ~ Breite von "12.09.2026":
     erst wenn neben dem Symbol weniger Platz bleibt, steht das Symbol darueber
     (vorher lief das Datum am Handy aus der Kachel). */
  #view-analyse .ind-card #tvWert{flex:1 1 5.6em;min-width:0;font-size:.68rem;font-weight:700;letter-spacing:-.01em;
    white-space:normal;overflow:visible;line-height:1.2}
  /* v1639: in der breiten Zweier-Reihe hat das Datum Platz - gleiche Groesse und Anordnung wie der Momentum-Wert */
  #view-analyse .ind-zwei9 .ind-card #tvWert{flex:0 0 auto;font-size:inherit;white-space:nowrap;line-height:1.15}
  /* v1906 (Harun 14.10.): Wert jetzt kurz ("Heute 20:54", Zahl darunter in tvSub) - darf zwischen Tag und Zeit nicht
     umbrechen (geschuetztes Leerzeichen), "kein TV Block" aber an Wortgrenzen statt ueber den Kachelrand zu laufen */
  #view-analyse .ind-zwei9 .ind-card #tvWert{flex:0 1 auto;min-width:0;white-space:normal;overflow-wrap:normal}
  #view-analyse .ind-zwei9 .ind-card .wert > #tvWert:last-child{white-space:normal}
  #view-analyse .ind-card #tvSub{display:block;margin-top:2px;font-size:.66rem;font-weight:500;line-height:1.2;color:var(--muted);white-space:nowrap}

  /* Keine Fortschritts-Leiste (User 11.08.): den Zustand traegt allein das
     SYMBOL — gebrochenes/verbundenes/ganzes Herz bzw. ein, zwei, drei Blitze. */

  /* Trenner zwischen Terminvereinbarungen und Indikatoren */
  #anaKopf .ana-block + .ana-block{border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
  @media (min-width:820px){
    #anaKopf .ana-block + .ana-block{border-top:none;border-left:1px solid var(--line);
      padding-top:0;margin-top:0;padding-left:18px}
  }
  /* Kopfbereich: Handy untereinander, ab Tablet nebeneinander */
  #anaKopf{display:flex;flex-direction:column;gap:2px}
  @media (min-width:820px){
    #anaKopf{flex-direction:row;gap:18px;align-items:flex-start}
    #anaKopf .ana-block{flex:1 1 0;min-width:0}
  }
  /* Desktop: Platz nutzen — Indikatoren in einer Reihe, Graph hoeher */
  @media (min-width:700px){
    #view-analyse .ind-grid{grid-template-columns:repeat(4,1fr)}
    /* Analyse darf die Breite nutzen — auf iPad mini und PC war sie unnoetig schmal */
    #view-analyse .wrap{max-width:900px}
  }
  @media (min-width:1100px){
    #view-analyse .wrap{max-width:1180px}
    #view-analyse .kpi-card .zahl{font-size:1.9rem}
  }
  /* v890 (User): Am Laptop/PC ist im Monat viel Platz - die Handy-Groessen
     wirken dort verloren. Ab 900px wachsen Termin-Zeilen, Tageszahl,
     Wochentage und KW-Kennung mit; die Zellen sind dort ohnehin doppelt so
     hoch, es passen also weiterhin alle Zeilen hinein. */
  @media (min-width:900px){
    /* v892 (User: "zu klein"): kraeftiger als der erste Versuch - die Zellen
       sind am PC ueber 180px hoch und tragen zwei bis drei Zeilen. */
    /* v896 (FEHLER GEFUNDEN): Die Textzeilen-Regel stand HIER - also VOR
       ihrer Basisregel weiter unten. Bei gleicher Spezifitaet gewinnt die
       spaetere, also blieb der Text bei .64rem, waehrend Zeilenhoehe und
       Tageszahl (deren Basis davor steht) sehr wohl wuchsen. Die Regel
       steht jetzt unten neben ihrer Basis. */
    .kz .nr{font-size:1.08rem}   /* v897: mit dem Text zurueck */
    .kal-wd div{font-size:1rem}
    .kz-kw{font-size:.8rem}
    .kz .balken{min-height:4px}
  }
  @media (min-width:1400px){
    .kz .nr{font-size:1.2rem}   /* v897 */
    .kal-wd div{font-size:1.1rem}
    .kz-kw{font-size:.86rem}
  }
  /* Harun 14.10. ("Platz horizontal besser nutzen, dann vertikal hoeher"): am Handy randlos bis an den Bildschirmrand */
  @media (max-width:699px){
    #view-analyse .chartbox{margin-left:-16px;margin-right:-16px;border-radius:0;border-left:0;border-right:0;padding:8px 4px 6px}
  }
  /* v1908 (Harun 15.10.): PC-Detail-Spalte rechts neben "Aktuelle Terminvereinbarungen"/"Aktuelle Kennzahlen" (#anaDetail9,
     Inhalt anaDetailMalen9). Nur am PC (geraet-tablet-breit, Grid aus layout-tablet-breit.css) und mit Schalter
     ERF_DETAIL_SPALTE9 (Klasse erf-spalte9). Handy/Tablet: unsichtbar, Kacheln oeffnen weiter das Modal.
     Hoehe = Kachelblock links: die Spalte streckt sich ueber beide Grid-Zeilen, ihr Inhalt liegt absolut darin
     (zaehlt fuer die Zeilenhoehe nicht mit) und scrollt innen. */
  #anaDetail9{display:none}
  :root.geraet-tablet-breit #view-analyse.erf-spalte9 #anaDetail9{display:block;grid-column:2 / -1;grid-row:1 / span 2;align-self:stretch;
    position:relative;min-height:0;border-left:1px solid var(--line)}
  #anaDetail9 .ad9-rahmen{position:absolute;inset:0 0 0 18px;display:flex;flex-direction:column;min-height:0}
  #anaDetail9 .ad9-kopf{display:flex;align-items:baseline;gap:12px;flex:0 0 auto}
  #anaDetail9 .ad9-kopf .sect{margin-top:2px;min-width:0}
  #anaDetail9 .ad9-link{margin-left:auto;background:none;border:0;padding:0;font:inherit;font-size:.72rem;font-weight:700;color:var(--accent);cursor:pointer;white-space:nowrap}
  #anaDetail9 .ad9-sub{flex:0 0 auto;font-size:.72rem;color:var(--muted);margin:-2px 0 8px}
  #anaDetail9 .ad9-inhalt{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
  #anaDetail9 .ad9-inhalt .m-karte:last-child{margin-bottom:0 !important}
  /* aktive Kachel dezent wie die "heute"-Kachel (.kpi-card.heute-k: Rand in Akzentfarbe) */
  :root.geraet-tablet-breit #view-analyse.erf-spalte9 .ind-card.ad9-an{border-color:var(--accent)}
  /* v1908: in der Spalte ist wenig Hoehe - Kopfzahl (m-hero) einzeilig neben dem Symbol, Karten etwas enger */
  #anaDetail9 .m-hero{display:flex;align-items:center;gap:10px;margin:0 0 10px;text-align:left}
  #anaDetail9 .m-hero .em{line-height:1;display:inline-flex}
  #anaDetail9 .m-hero .em svg{width:30px;height:30px}
  #anaDetail9 .m-hero .zahl{font-size:1.45rem}
  #anaDetail9 .m-hero .lbl{margin-top:0}
  #anaDetail9 .m-karte{padding:8px 10px}
  #anaDetail9 .ad9-inhalt > .sub{font-size:.8rem;color:var(--muted);padding:2px 0}   /* "Keine TV-Blocks gefunden." leise wie die Untertitel */
  /* v1910 (Harun 15.10.): am PC (geraet-tablet-breit) stehen Momentum und TV-Block GROSS und ausgeschrieben in der Kachel
     (#momPc9/#tvPc9, gefuellt von anaKachelPc9) - keine eigene Spalte/Liste. Groessen wie die Nachbarn: Wert wie
     .kpi-card .wert (1.7rem/800), Zusatzzeilen wie die Fenster-Zeilen (.74rem, grau). Handy: .ind-pc9 unsichtbar. */
  #view-analyse .ind-pc9{display:none}
  :root.geraet-tablet-breit #view-analyse #anaKennzahlen9 .ind-card{justify-content:flex-start;padding:12px 14px}
  :root.geraet-tablet-breit #view-analyse #anaKennzahlen9 .ind-card .lbl{font-size:.62rem;margin-bottom:4px}
  :root.geraet-tablet-breit #view-analyse #anaKennzahlen9 .ind-card .wert{font-size:1.7rem;font-weight:800;column-gap:8px}
  :root.geraet-tablet-breit #view-analyse #anaKennzahlen9 .ind-card .em svg{width:26px;height:26px}
  :root.geraet-tablet-breit #view-analyse #anaKennzahlen9 .ind-card #tvSub{display:none}
  :root.geraet-tablet-breit #view-analyse #anaKennzahlen9 .ind-pc9{display:block;min-width:0;margin-top:6px}
  #view-analyse .ind-pc9 .kpc9-zeile{font-size:.74rem;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
  #view-analyse .ind-pc9 .kpc9-zeile b{color:var(--ink);font-weight:800}
  #view-analyse .ind-pc9 .kpc9-pfeil{padding:0 2px}
  #view-analyse .ind-pc9 .kpc9-liste{margin-top:8px;padding-top:6px;border-top:1px solid var(--line);text-align:left}
  #view-analyse .ind-pc9 .tvz9{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:.72rem;line-height:1.55;white-space:nowrap}
  #view-analyse .ind-pc9 .tvz9-zeit{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
  #view-analyse .ind-pc9 .tvz9-art{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
  #view-analyse .ind-pc9 .tvz9-n{flex:0 0 auto;margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
  #view-analyse .ind-pc9 .tvz9-w{flex:0 0 auto;min-width:64px;text-align:right;color:var(--muted)}
  #view-analyse .ind-pc9 .tvz9-w.an{color:var(--accent);font-weight:700}
  /* rw1 (Harun 15.10.): Momentum-Fenster wieder wie vor dem Design-Audit v1933 (Karten Vergangenheit VS Zukunft, Kopf-Beschriftung
     in Versalien) - die .mz9-Zeilen und die Versalien-Ausnahme fuer .m-hero .lbl sind entfallen. */

  /* rw1: Zeile 2 der Auswertung = ZWEI Sektionen nebeneinander. Links die Terminart-Knoepfe (#anaFilter, hoeher, schmal,
     zweizeilig "Erst"/"VK"), rechts direkt daneben die Struktur-Auswahl (#strselHost.ana-struktur9). Jede Sektion hat eigene
     Regeln, nichts teilt sich Klassen. Hoehe der Zeile 50 statt 42 px (Knoepfe 44 px). */
  /* rw1b (Harun 15.10.): Zeile 2 wieder genau wie im Kalender (.kal-zeile2: 42 px, unten 6 px) - Knoepfe 36 px wie der Struktur-Knopf dort */
  #view-analyse .ana-bar .ana-zeile2{height:42px;align-items:stretch;gap:8px;padding:0 10px 6px}
  #view-analyse .ana-bar .ana-filter{flex:0 0 auto;display:flex;gap:3px;align-items:stretch;overflow:visible;margin:0;padding:0}
  #view-analyse .ana-bar .ana-filter button{flex:0 0 auto;width:41px;min-width:0;height:auto;padding:0 2px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:1px;font-size:.66rem;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:clip}
  #view-analyse .ana-bar .ana-filter button span{display:block}
  /* rw1b (Harun 15.10.): Struktur-Knopf RECHTSBUENDIG wie im Kalender (#strselKal margin-left:auto, Knopf 36 px = .kal-zeile2 #strselKal
     .strsel-trigger, rechts 10 px Einzug wie .kal-strsel - gemessen 15.10.: Kalender 290/54/80x36, hier gleich); links davor die duenne
     Trennlinie wie im Auswahlmenue vor dem Filter-Symbol (.strsel-trenn: 1 px, var(--border-glass), 10 px Abstand zum Symbol; Hoehe =
     Filter-Symbol minus 2x4 px: Handy/Touch 38-8 = 30 px, PC 32-8 = 24 px - dieselbe Weiche wie structure-select.js) */
  /* Platz: zuerst geben die Terminart-Knoepfe nach (41 -> min. 34 px), der Struktur-Knopf behaelt seine natuerliche Breite (max. 55 %, dann …) */
  #view-analyse .ana-bar .ana-filter{flex:0 1 auto;min-width:0}
  #view-analyse .ana-bar .ana-filter button{flex:0 1 41px;min-width:34px}
  #view-analyse .ana-bar .ana-struktur9{flex:0 0 auto;max-width:55%;margin-left:auto;padding-right:10px;display:flex;align-items:center;justify-content:flex-end;position:relative}
  #view-analyse .ana-bar .ana-struktur9::before{content:"";flex:0 0 1px;width:1px;height:24px;margin:0 10px 0 0;background:var(--border-glass,#2a2e33)}
  @media (max-width:700px), (pointer:coarse){ #view-analyse .ana-bar .ana-struktur9::before{height:30px} }
  body:not(.stil-klassisch) #view-analyse .ana-bar .ana-struktur9 .strsel-trigger{border-radius:3px !important}   /* wie im Kalender (core-01) */
  #view-analyse .ana-bar .ana-struktur9 .strsel-trigger{height:36px;box-sizing:border-box;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #view-analyse .ana-bar .ana-struktur9:empty{display:none}

  /* hig69: Fenster-Rahmen, Lage, Kopfreihe, Leiste (.kv9-fix) und Umschalter (.kv9-sicht) aller Auswertungs-Fenster -> fenster-system.css (fw9) */
  /* aw1 (Harun 16.10.: "Modale viel zu hoch, man scrollt ins Leere"): v1947 (feste Hoehe) zurueck - die Hoehe FOLGT dem Inhalt
     (height:auto) bis zur verfuegbaren Hoehe (Bildschirm minus Rand/Safe-Area), erst dann scrollt der Kasten innen. Oben angeschlagen,
     kein Leerraum unten, kein zweiter Scrollbalken (nur .modalbox scrollt). Umschalten in der Terminliste gleitet (kpiSichtSetzen9). */
  /* am1 (Harun 16.10.): ALLE Auswertungs-Fenster MITTIG, hoechstens 70 % der Bildschirmhoehe (Safe-Area abgezogen), Rand oben/unten
     bleibt sichtbar; darunter folgt die Hoehe weiter dem Inhalt (aw1), erst dann scrollt der Kasten innen. Handy und PC gleich. */
  #anaOverlay[data-art9]:not([data-art9=""]){align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 8px calc(10px + env(safe-area-inset-bottom,0px))}
  #anaOverlay[data-art9]:not([data-art9=""]) .modalbox{box-sizing:border-box;height:auto;min-height:0;
    max-height:calc(70vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    max-height:calc(70dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
  /* am1: Blaetter-Pfeile (.m-nav, core-03) AUSSERHALB der Karte, senkrecht mittig - am Handy bekommt das Fenster dafuer seitlich Platz */
  /* am2 (Harun 16.10.): Trefferflaeche 48 x 64 px (Zeichen bleibt klein), Fenster bekommt dafuer 40 px Rand je Seite */
  #anaOverlay[data-art9]:not([data-art9=""]).nav9{padding-left:40px;padding-right:40px}
  #anaOverlay[data-art9]:not([data-art9=""]) .m-nav.links{left:max(0px, calc(50vw - (var(--mb-mw) / 2) - 52px))}
  #anaOverlay[data-art9]:not([data-art9=""]) .m-nav.rechts{right:max(0px, calc(50vw - (var(--mb-mw) / 2) - 52px))}
  .kv9-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;padding:0}   /* kv1 */
  .kv9-hero{flex:1 1 auto;display:flex;align-items:baseline;justify-content:flex-start;gap:6px;min-width:0}
  .kv9-wort{font-size:1.06rem;font-weight:800}
  .kv9-zahl{font-size:1.6rem;font-weight:900;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
  .kv9-lbl{font-size:.88rem;font-weight:600;color:var(--muted)}
  .kv9-balken{display:flex;height:30px;border-radius:8px;overflow:hidden;background:var(--chip);margin:0 0 6px}
  .kv9-balken > div{display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.3)}
  .kv9-balken > div.kl{font-size:.62rem;letter-spacing:0;min-width:0}   /* kv1: kleine Abschnitte kleinere Schrift, Kuerzel + Zahl bleiben */
  /* rw1b (Harun 15.10.): Umschalter wieder wie v1916 - Zeile "vereinbart von:" links, rechts zwei kleine Symbol-Knoepfe (an = Akzent, aus = gedaempft) */
  .kv9-listen{display:block}
  .kv9-l{min-width:0;display:none}   /* aw1: nur die gewaehlte Liste zaehlt zur Hoehe (vorher Rasterzelle = hoehere Liste -> Leerraum) */
  .kv9-l.an{display:block}
  #anaOverlay .kv9-karte{margin-bottom:8px;padding:8px 10px}
  #anaOverlay .kv9-karte:last-child{margin-bottom:0}
  #anaOverlay .kv9-karte .kv9-team{margin:0 0 4px;font-size:.84rem}
  .kv9-wer{font-size:.92rem}
  .kv9-det{margin:0 0 6px 6px;border-left:2px solid var(--line);padding-left:8px}
  .kv9-von{display:block;font-size:.68rem;color:var(--muted);line-height:1.2}
  .kv9-z{display:flex;gap:6px;align-items:baseline;padding:3px 0;font-size:.78rem;min-width:0}
  .kv9-ein{color:var(--muted);font-variant-numeric:tabular-nums;min-width:40px;flex:0 0 auto}
  .kv9-art{font-weight:800;min-width:26px;flex:0 0 auto}
  .kv9-kd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kv9-gr{color:var(--muted)}
  .kv9-wann{color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}

  /* rw1: Fenster "TV-Blocks" als Spielstand (tvInhalt9) - ruhige Flaechen wie die Momentum-Karten (.m-karte), VS-Abzeichen gleich */
  .tvs9-status{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 12px}
  .tvs9-em{line-height:0}
  .tvs9-wort{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;line-height:1}
  .tvs9-zl{font-size:.76rem;color:var(--muted);margin-top:3px}
  .tvs9-tafeln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:4px}
  .tvs9-tafel{text-align:center;padding:9px 6px}
  .tvs9-tl{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
  .tvs9-tz{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
  .tvs9-tz small{font-size:.8rem;font-weight:700;color:var(--muted)}
  .tvs9-sekt{font-size:.8rem;font-weight:800;margin:14px 0 6px;letter-spacing:.02em}
  .tvs9-runde{margin-bottom:12px}
  .tvs9-rkopf{display:flex;align-items:baseline;gap:8px;margin:0 2px 5px;font-size:.78rem;min-width:0}
  .tvs9-rnr{font-weight:800;flex:0 0 auto}
  .tvs9-rzeit{color:var(--muted);font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tvs9-rw{margin-left:auto;flex:0 0 auto;font-weight:700;color:var(--muted)}
  .tvs9-runde.gew .tvs9-rw{color:var(--accent)}
  .tvs9-duell{display:flex;gap:10px;text-align:center;position:relative}
  .tvs9-seite{flex:1;padding:9px 8px}
  .tvs9-sl{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:2px}
  .tvs9-sz{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
  .tvs9-sz.an{color:var(--accent)}
  .tvs9-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:30px;height:30px;border-radius:50%;
    background:var(--card);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;font-style:italic}
  .tvs9-art{font-size:.7rem;color:var(--muted);margin:4px 2px 0}
  .tvs9-wer{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:.74rem;margin:5px 2px 0;color:var(--muted)}
  .tvs9-wer b{color:var(--ink)}
  .tvs9-alt .tvz9{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:.76rem;line-height:1.7;white-space:nowrap;border-top:1px solid var(--line)}
  .tvs9-alt .tvz9:first-child{border-top:0}
  .tvs9-alt .tvz9-zeit{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
  .tvs9-alt .tvz9-art{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
  .tvs9-alt .tvz9-n{flex:0 0 auto;margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
  .tvs9-alt .tvz9-w{flex:0 0 auto;min-width:72px;text-align:right;color:var(--muted)}
  .tvs9-alt .tvz9-w.an{color:var(--accent);font-weight:700}

  /* am1 (Harun 16.10., Karten mo1 + mt2, Vorlage platform/app/prototyp-kennzahlen.html): Kacheln + Fenster Momentum / TV-Block */
  #view-analyse .ind-card .em.tacho9 svg{width:46px;height:auto;margin:0}
  :root.geraet-tablet-breit #view-analyse #anaKennzahlen9 .ind-card .em.tacho9 svg{width:min(100%,190px);height:auto}
  /* am2 (Harun 16.10.: "Tacho viel zu klein"): Tacho fuellt die Momentum-Kachel, Wert darunter */
  #view-analyse #indMom9.mom9-gross .wert{flex-direction:column;flex-wrap:nowrap;row-gap:0}
  #view-analyse #indMom9.mom9-gross .em.tacho9{display:block;width:100%;line-height:0}
  #view-analyse #indMom9.mom9-gross .em.tacho9 svg{width:min(92%,170px);height:auto;margin:0 auto}
  #view-analyse #indMom9.mom9-gross #momWert{font-size:clamp(1.1rem,15cqi,1.6rem);font-weight:900;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
  /* am2 (Harun 16.10.): TV-Kachel - "16 [Termin]  14 [Person]" gross in der Leistungsfarbe, darunter klein Tag · Uhrzeit */
  #view-analyse #indTv9 #tvWert{display:flex;flex-direction:column;align-items:center;gap:6px}
  #view-analyse #indTv9 .em:empty{display:none}
  #view-analyse #indTv9 #tvSub{display:none}
  /* am3 (Harun 16.10.): Momentum-Wert im Tacho -> leeres #momWert weg; TV-Kachel = Skala + "16 [T] . 10 [L]" + Tag */
  #view-analyse #indMom9.mom9-imtacho #momWert:empty{display:none}
  #view-analyse #indMom9.mom9-imtacho .em.tacho9 svg{width:min(96%,190px)}
  .tvk9-sk{display:block;width:min(100%,180px);height:auto;margin:2px auto 0}
  .tvk9-p{color:var(--muted);font-weight:700}   /* am2: Tag/Leute stehen jetzt in der Kachel selbst (#tvWert) */
  .tvk9-z{display:flex;align-items:center;justify-content:center;gap:clamp(6px,5cqi,10px);color:var(--ink)}
  .tvk9-g{display:inline-flex;align-items:center;gap:3px}
  .tvk9-g b{font-size:clamp(1.2rem,14cqi,1.6rem);font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
  .tvk9-g svg{width:clamp(16px,11cqi,20px);height:auto;color:var(--muted)}
  .tvk9-d{font-size:clamp(.62rem,7cqi,.74rem);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  #view-analyse .ind-card #tvSub .tv9-laeuft{color:var(--accent);font-weight:700}
  /* am4 (Harun 16.10.: "halbe Hoehe, so gross wie die Kacheln oben"): Handy - Momentum/TV genau so hoch wie .kpi-card
     ("Aktuelle Terminvereinbarungen"); Inhalt EINE Zeile: Mini-Tacho + Wert bzw. Mini-Skala + "16 · 10" */
  #view-analyse #indMom9.mom9-mini .wert{flex-direction:row;flex-wrap:nowrap;column-gap:clamp(4px,4cqi,8px)}
  #view-analyse #indMom9.mom9-mini .em.tacho9{display:inline-flex;width:auto;line-height:0}
  #view-analyse #indMom9.mom9-mini .em.tacho9 svg{width:clamp(38px,30cqi,54px);height:auto;margin:0}
  #view-analyse #indMom9.mom9-mini #momWert{font-size:clamp(1rem,13cqi,1.4rem);font-weight:900;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
  #view-analyse #indTv9 #tvWert{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:clamp(4px,4cqi,8px)}
  #view-analyse #indTv9 .tvk9-sk.tvk9-mini{width:clamp(34px,30cqi,58px);margin:0;flex:0 0 auto}
  #view-analyse #indTv9 .tvk9-z{gap:clamp(3px,3cqi,6px)}
  #view-analyse #indTv9 .tvk9-g b{font-size:clamp(1rem,13cqi,1.4rem)}
  #view-analyse #indTv9 .tvk9-g svg{width:clamp(13px,9cqi,16px)}
  #view-analyse #indTv9.tv9-laeuft-k{border-color:var(--accent)}
  /* kz1: schmale Viertel-Kachel - Tacho/Skala ueber dem Wert gestapelt */
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .wert,:root:not(.kz9-alt) #view-analyse #indTv9 #tvWert{flex-direction:column;align-items:center;justify-content:center;gap:2px}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .wert{row-gap:2px}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .em.tacho9 svg{width:52px}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini #momWert{font-size:1.1rem;font-weight:800;white-space:nowrap}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-sk.tvk9-mini{width:40px}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g b{font-size:.95rem}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g svg{width:11px}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-z{gap:2px}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card{box-sizing:border-box;height:var(--kpiH9,73px);padding:5px 4px;overflow:hidden;justify-content:center}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card .lbl{margin-bottom:4px}
  /* kz2 (Harun 16.10.): Handy - Kennzahlen-Kacheln wie die Terminvereinbarungs-Kacheln: Zahl gross oben (1.7rem/800), Wort klein darunter;
     Momentum: kleiner Trend-Pfeil oben rechts; TV: Zahl + kleines Stufen-Symbol. Filterleiste: Chips gleichmaessig ueber die Breite. */
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card{position:relative;align-items:center}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card .wert{order:1;font-size:1.7rem;font-weight:800;line-height:1.1;flex-wrap:nowrap;column-gap:3px}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card .lbl{order:2;margin:2px 0 0;font-size:.68rem;font-weight:400;letter-spacing:0;text-transform:none}
  :root:not(.kz9-alt) #view-analyse #indTv9 #tvWert{flex-direction:row;font-size:1.7rem}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g{gap:4px}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g b{font-size:1.7rem;font-weight:800}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g svg{width:18px;height:18px}
  /* kz4 (Harun 16.10.): Handy - nur 3 breite Kacheln (Momentum, TV-Block, 1 Platzhalter). Label klein mittig oben; darunter eine Zeile:
     Tacho / Stufen-Symbol LINKS, Wert RECHTS, beide mittig. Hoehe bleibt die der Terminvereinbarungs-Kacheln (--kpiH9, 73 px). */
  :root:not(.kz9-alt) #view-analyse .ind-grid.ind-zwei9{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root:not(.kz9-alt) #view-analyse .ind-leer9:nth-of-type(4){display:none}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card{padding:4px 6px;justify-content:space-evenly}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card .lbl{order:1;margin:0;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card .wert{order:2;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;column-gap:4px;line-height:1}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .wert{flex-direction:row;align-items:center;justify-content:space-between;gap:4px}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .em.tacho9 svg{width:40px}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini #momWert{font-size:1.05rem;font-weight:800;text-align:right}
  :root:not(.kz9-alt) #view-analyse #indTv9 #tvWert{flex:1 1 auto;width:100%}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-z{width:100%}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g{width:100%;flex-direction:row-reverse;justify-content:space-between;align-items:center}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g svg{width:24px;height:24px}
  /* kz5 (Harun 16.10.): Kennzahl-Kacheln ca. 25 % hoeher (92 px), Tacho/Symbol links groesser, Wert rechts gross, 12 px Innenrand. */
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card{height:92px;padding:8px 10px 6px;justify-content:flex-start;gap:0}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card .wert{flex:1 1 auto;width:100%;min-height:0}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .em.tacho9 svg{width:50px;height:auto}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini #momWert{font-size:1.2rem}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g svg{width:30px;height:30px}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g b{font-size:1.45rem}
  :root:not(.kz9-alt) #view-analyse .ind-leer9:nth-of-type(3){min-height:92px}
  /* kz6 (Harun 17.10.: "% kleiner, unterhalb vom Tacho; Ueberschrift kleiner, duenner"): Label 10 px/400/gedaempft; Momentum = Tacho mittig, Wert darunter mittig 0.95rem; TV bleibt Symbol links + Zahl rechts. */
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card{padding:7px 8px 5px}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card .lbl{font-size:10px;font-weight:400;letter-spacing:.02em;color:var(--muted);height:12px;line-height:12px}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .wert{flex-direction:column;justify-content:center;align-items:center;gap:2px;overflow:hidden}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .em.tacho9{display:flex;justify-content:center}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .em.tacho9 svg{width:46px}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini #momWert{font-size:.9rem;font-weight:700;text-align:center;white-space:nowrap;max-width:100%}
  :root:not(.kz9-alt) #view-analyse #indTv9 .wert{align-items:center}
  /* kz7 (Harun 17.10.: "Innen-/Aussenabstand minimieren, das Visuelle in den Boxen maximieren"): Innenrand 4/5 px, Label 10 px ganz oben;
     Momentum-Tacho so breit wie die Kachel (~104 px, Nadel/Striche skalieren mit), Wert direkt darunter ohne Luecke 1.15rem;
     TV: Stufen-Symbol 40 px + Zahl 2.2rem zusammen mittig. Hoehe 92 px / 3 Spalten bleiben. */
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card{padding:4px 5px}
  :root:not(.kz9-alt) #view-analyse #anaKennzahlen9 .ind-card .lbl{height:10px;line-height:10px;margin:0}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .wert{gap:0;justify-content:flex-end}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .em.tacho9{width:100%;justify-content:center}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini .em.tacho9 svg{width:104px;max-width:100%;height:auto;margin:-4px 0 -1px}
  :root:not(.kz9-alt) #view-analyse #indMom9.mom9-mini #momWert{font-size:1.15rem;font-weight:800;line-height:1}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g{justify-content:center;gap:6px}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g svg{width:40px;height:40px;flex:0 0 auto}
  :root:not(.kz9-alt) #view-analyse #indTv9 .tvk9-g b{font-size:2.2rem;line-height:1}
  /* hz1 (Harun 17.10.): dritte Kachel "Aktivitaet" (Herz, renderGp in core/start.js) statt Platzhalter - Handy 3 Spalten / 92 px wie
     Momentum/TV (Regeln oben gelten fuer alle #anaKennzahlen9 .ind-card); am PC (breit) drei grosse Kacheln statt zwei.
     Herz-Umriss links, rechts "64 %" gross + "14/22" klein; Fuellung gleitet beim Malen von unten hoch (clipPath-Rechteck). */
  /* hz1b (Harun 17.10.): am PC/Tablet breit dieselben drei Kacheln wie am Handy (Momentum, TV-Block, Herz; eine Reihe, 3 gleiche
     Spalten, 92 px) - die Handy-Regeln oben gelten seit hz1b fuer ALLE Geraete (Praefix :root:not(.kz9-alt) = immer wahr, gleiche
     Spezifitaet wie vorher :root:not(.geraet-tablet-breit)). Die ausgeschriebene PC-Fassung (.ind-pc9, grosse Kacheln rechts) entfaellt;
     die Kennzahlen stehen direkt UNTER "Aktuelle Terminvereinbarungen" in derselben Spalte (ersetzt v1910-Regel in layout-tablet-breit.css). */
  :root.geraet-tablet-breit #view-analyse #anaKopf #anaKennzahlen9{grid-column:1;grid-row:2;border-left:none;padding-left:0;
    border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
  :root.geraet-tablet-breit #view-analyse #anaKopf #anaKennzahlen9 .ind-pc9{display:none}
  #view-analyse #anaKennzahlen9 #indGp9 #gpIndWert{display:flex;flex:1 1 auto;width:100%;min-height:0;align-items:center;justify-content:center;font-size:inherit;line-height:1}
  #view-analyse #indGp9 .gp9-k{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:2px;min-width:0}
  #view-analyse #indGp9 .gp9-kh{flex:0 0 auto;line-height:0}
  #view-analyse #indGp9 .gp9-kh svg{width:40px;height:40px;display:block}
  #view-analyse #indGp9 .gp9-kz{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
  #view-analyse #indGp9 .gp9-kz > b{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
  #view-analyse #indGp9 .gp9-kz > span{font-size:12px;font-weight:600;color:var(--muted);margin-top:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
  #view-analyse #indGp9.ad9-an{border-color:var(--accent)}
  .gp9-fuell{transform-box:fill-box;transform-origin:50% 100%;animation:gp9Fuell .7s cubic-bezier(.2,.7,.3,1)}
  @keyframes gp9Fuell{from{transform:scaleY(0)}}
  @media (prefers-reduced-motion: reduce){ .gp9-fuell,.gp9-halo,.gp9-fk,.gp9-flamme{animation:none!important} }
  /* mz1: Schein ab 90 %, Flammen-Umriss bei 100 % */
  .gp9-halo{transform-box:fill-box;transform-origin:50% 50%;animation:gp9Puls 3.2s ease-in-out infinite}
  .gp9-fk{animation:gp9Funke 2.4s ease-in-out infinite}
  .gp9-flamme{transform-box:fill-box;transform-origin:50% 100%;animation:gp9Flamme 2.6s ease-in-out infinite}
  @keyframes gp9Puls{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
  @keyframes gp9Funke{0%,100%{opacity:.25}50%{opacity:1}}
  @keyframes gp9Flamme{0%,100%{opacity:.85;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.03)}}
  .gp9-m{display:flex;flex-direction:column;align-items:center;gap:4px}
  .gp9-m svg{width:96px;height:96px;display:block}
  .gp9-m b{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
  .gp9-satz{font-size:.86rem;margin-top:6px;color:var(--ink)}
  .gp9-fen{font-size:.74rem;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
  #view-analyse .ana-bar .ana-filter{flex:1 1 0;min-width:0}
  #view-analyse .ana-bar .ana-filter button{flex:1 1 0;width:auto;min-width:0}
  #view-analyse .ana-bar .ana-zeile2{gap:10px}   /* kz2: Abstand Chip-Trennlinie = Trennlinie-Struktur-Knopf (10 px) */
  #view-analyse .ana-bar .ana-struktur9{margin-left:0}
  /* Momentum-Fenster */
  .mom9-tacho{display:flex;flex-direction:column;align-items:center;margin:0 0 18px}
  .mom9-tacho .tw{font-size:2.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
  .mom9-duell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:8px;position:relative}
  .mom9-box{background:var(--chip);border:1px solid var(--line);border-radius:12px;padding:16px 8px;text-align:center;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-width:0;font:inherit;color:inherit;transition:border-color .15s}
  .mom9-box[aria-expanded="true"]{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
  .mom9-box .bt{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.94rem;font-weight:800}
  .mom9-box .bd{font-size:.8rem;font-weight:400;color:var(--muted)}
  .mom9-box .bd span{display:block}
  .mom9-box .bz{font-size:2.5rem;font-weight:900;letter-spacing:-.03em;line-height:1;margin-top:10px;color:var(--ink);font-variant-numeric:tabular-nums}
  .mom9-box .bn{font-size:.8rem;color:var(--muted)}
  /* am2 (Harun 16.10.): VS als Spiel-Abzeichen - Kreis halb rot/halb gruen, ueberlappt beide Boxen in der Mitte (Hoehe der grossen Zahl) */
  .mom9-duell .vs{position:absolute;left:50%;top:112px;transform:translate(-50%,-50%) rotate(-8deg);z-index:2;pointer-events:none;
    width:50px;height:50px;border-radius:50% !important;display:flex;align-items:center;justify-content:center;
    background:var(--ink);border:3px solid var(--card);
    box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ink) 35%,transparent),0 3px 10px rgba(0,0,0,.28);color:var(--card);font-size:1.02rem;font-weight:900;font-style:italic;letter-spacing:.02em}
  /* am3 (Harun 16.10.: "zu bunt"): VS neutral - Tinten-Kreis, Schrift in Kartenfarbe, feiner Ring; bleibt schraeg und ueberlappend */
  .mom9-auf{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows .28s ease}
  .mom9-auf.offen{grid-template-rows:1fr}
  .mom9-auf > span{overflow:hidden;min-height:0;display:block}
  .mom9-auf .bx{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .mom9-saeulen,.mom9-tage{display:grid;gap:0 3px}
  .mom9-saeulen{align-items:end}
  .mom9-sp{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:124px;min-width:0}
  .mom9-sn{font-size:.8rem;font-weight:800;margin-bottom:4px;color:var(--ink);font-variant-numeric:tabular-nums}
  .mom9-sb{display:block;width:76%;max-width:30px;border-radius:5px 5px 2px 2px}
  .mom9-tage{padding-top:6px;border-top:1px solid var(--line)}
  .mom9-tage > span{display:block;text-align:center;font-size:.74rem;font-weight:700;color:var(--muted);line-height:1.2;min-width:0;white-space:nowrap}
  .mom9-tage > span small{display:block;font-weight:400;font-size:.74rem}
  .mom9-tage > span.heute{color:var(--ink);font-weight:800;letter-spacing:-.02em}
  /* TV-Block-Fenster */
  .tv9-kopf{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 0 16px}
  .tv9-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 14%,transparent)}
  .tv9-ic.kalt{color:#64748B;background:color-mix(in srgb,#64748B 14%,transparent)}
  .tv9-z{font-size:3.2rem;font-weight:900;letter-spacing:-.03em;line-height:1;margin-top:10px;color:var(--accent);font-variant-numeric:tabular-nums}
  /* am2 (Harun 16.10.: "viel zu wild"): ruhiger Kopf - Tag · Uhrzeit, darunter "16 [Symbol]  14 [Symbol]" in der Leistungsfarbe */
  .tvh9-z{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:12px}
  .tvh9-g{display:inline-flex;align-items:center;gap:6px}
  .tvh9-g b{font-size:3rem;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
  .tvh9-g svg{width:30px;height:30px}
  .tvh9-l{display:flex;justify-content:center;gap:28px;margin-top:4px;font-size:.74rem;color:var(--muted)}
  .tvh9-l span{min-width:78px;text-align:center}
  /* am5 (Anzeigetafel .tvt9) entfernt mit tv9 (Harun 17.10.) */
  .tv9-hb{margin:0 0 6px}
  .tv9-sekt{font-size:.74rem;font-weight:700;color:var(--muted);margin:18px 2px 4px}
  /* tv6 (Harun 16.10.): Stufen-Symbol (Diamant/Feuer/Funke/Eis) statt Farbpunkt; am3: "geschaetzt"-Stil entfernt */
  .tv9-pkt{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px}
  .tv9-st{display:inline-flex;align-items:center;justify-content:center;line-height:0}
  .tvk9-d .tv9-st{vertical-align:-2px;margin-right:4px}
  .tv9-stufe{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.92rem}
  .tv9-stufe b{font-weight:800}
  .tv9-stufe span{font-size:.78rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
  .tv9-leg span{display:inline-flex;align-items:center;gap:3px;margin-right:8px;color:var(--ink)}
  .tv9-zeile .zd b small{font-size:.86rem;font-weight:400;color:var(--muted)}
  .tv9-zeile .zw{display:flex;gap:14px;align-items:center}
  .tv9-zeile .zw > span{display:inline-flex;align-items:center;gap:3px;font-size:1rem;font-weight:800;color:var(--ink)}
  .tv9-zeile .zw svg{color:var(--muted)}
  .tv9-dw{margin-top:14px;text-align:center}
  .tv9-dk{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px;background:none;border:0;font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer}
  .tv9-dk svg{transition:transform .2s}
  .tv9-dk[aria-expanded="true"] svg{transform:rotate(180deg)}
  .tv9-dx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;text-align:left}
  .tv9-dx.offen{grid-template-rows:1fr}
  .tv9-dx > div{overflow:hidden;min-height:0}
  .tv9-dx-in{padding:4px 2px 4px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
  .tv9-dx-in p{margin:0 0 8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .tv9-dx-in ul{list-style:none;margin:0 0 8px;padding:0}
  .tv9-dx-in li{padding:5px 0;border-bottom:1px solid var(--line)}
  .tv9-dx-in li b{color:var(--ink);font-weight:700}
  .tv9-t{font-size:.94rem;font-weight:800;margin-top:4px}
  .tv9-d{font-size:.8rem;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
  .tv9-stat{font-size:.72rem;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
  .tv9-chip{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px}
  .tv9-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
  .tv9-liste > li{border-bottom:1px solid var(--line)}
  .tv9-zeile{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 2px;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
  .tv9-zeile .zd{flex:1 1 auto;min-width:0}
  .tv9-zeile .zd b{display:block;font-size:1rem;font-weight:700}
  .tv9-zeile .zd small{display:block;font-size:.74rem;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tv9-mess{display:block;height:4px;border-radius:2px;background:var(--line);margin-top:7px;max-width:150px;overflow:hidden}
  .tv9-mess > span{display:block;height:100%;border-radius:2px;background:var(--accent)}
  .tv9-zeile .zw{text-align:right;white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
  .tv9-zeile .zw b{font-size:1.4rem;font-weight:900;letter-spacing:-.02em;color:var(--accent)}
  .tv9-zeile .zw i{font-style:normal;font-size:.8rem;font-weight:600;color:var(--muted);margin-left:4px}
  .tv9-zeile .pf{flex:none;color:var(--muted);line-height:0;transition:transform .2s}
  .tv9-zeile[aria-expanded="true"] .pf{transform:rotate(180deg)}
  .tv9-det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
  .tv9-det.offen{grid-template-rows:1fr}
  .tv9-det > div{overflow:hidden;min-height:0}
  .tv9-det .det-in{padding:0 2px 16px}
  .tv9-det .det-zeile{font-size:.94rem;font-weight:700;margin:0 0 10px;color:var(--ink);text-align:left}
  .tv9-det .det-zeile span{font-weight:400;color:var(--muted);font-size:.86rem}
  .tv9-kb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tv9-kbox{min-height:60px;background:var(--chip);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;font:inherit;color:inherit;
    display:flex;flex-direction:column;justify-content:center;gap:2px}
  button.tv9-kbox{cursor:pointer}
  .tv9-kbox small{display:flex;align-items:center;gap:5px;font-size:.8rem;font-weight:800}
  .tv9-kbox b{font-size:1.06rem;font-weight:800;margin-top:2px}
  .tv9-kbox.kb-mit small{color:#2e9e5e}   /* am2: Flaeche neutral (--chip), nur Ueberschrift farbig - weniger Farben */
  .tv9-kbox.kb-ohne small{color:#E0115F}
  .tv9-kbox.kb-mit[aria-pressed="true"]{border-color:#50C878}
  .tv9-kbox.kb-ohne[aria-pressed="true"]{border-color:#E0115F}   /* tv6: Namen "Keine vereinbart" */
  .tv9-namen[data-n="ohne"] h4{color:#E0115F}
  .tv9-namen{margin-top:14px;text-align:left}
  .tv9-namen[hidden]{display:none}
  .tv9-namen h4{margin:0 0 4px;font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#2e9e5e}
  .tv9-namen ul{list-style:none;margin:0;padding:0}
  .tv9-namen li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.94rem}
  .tv9-namen li:last-child{border-bottom:0}
  .tv9-namen li span{color:var(--muted);font-variant-numeric:tabular-nums}
  .tv9-regel{font-size:.7rem;color:var(--muted);text-align:center;margin-top:12px}
  :root[data-theme="dark"] .tv9-kbox.kb-mit small,:root[data-theme="dark"] .tv9-namen h4{color:#50C878}
  @media (prefers-reduced-motion: reduce){ .mom9-auf,.tv9-det,.tv9-zeile .pf,.tv9-dx,.tv9-dk svg{transition:none} }

/* hig69: Umschalter (Segmented Control) -> fenster-system.css (.fw9-seg) */

/* tv9 (Harun 17.10., Vorlage platform/app/prototyp-tvblock-3.html): TV-Block-Ergiebigkeit. Kachel = grosse Batterie links,
   rechts "16 T" + "Ø 1,1"; Fenster = Bloecke als Akkordeon (analyse.js tvInhalt9/tbHero9). Farben der Stufen wie die App
   (#E0115F | #FFBF00 | #A3D977 | #50C878). Selektoren mit #anaKennzahlen9, damit die aelteren kz/am-Regeln nicht greifen. */
#view-analyse #anaKennzahlen9 #indTv9 #tvWert{display:flex;flex:1 1 auto;width:100%;min-height:0;align-items:center;justify-content:center;font-size:inherit;line-height:1}
#view-analyse #anaKennzahlen9 #indTv9 .tb9-k{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:2px;min-width:0}
#view-analyse #anaKennzahlen9 #indTv9 .tb9-kb{flex:0 0 auto;line-height:0}
#view-analyse #anaKennzahlen9 #indTv9 .tb9-kb svg{width:32px;height:58px;display:block}
#view-analyse #anaKennzahlen9 #indTv9 .tb9-kz{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
#view-analyse #anaKennzahlen9 #indTv9 .tb9-kz b{font-size:2.05rem;font-weight:800;letter-spacing:-.03em;line-height:.95;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
#view-analyse #anaKennzahlen9 #indTv9 .tb9-kz b small{font-size:1.05rem;font-weight:800;margin-left:2px;letter-spacing:0}
#view-analyse #anaKennzahlen9 #indTv9 .tb9-kz span{font-size:12px;font-weight:600;color:var(--muted);margin-top:5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tb9{text-align:left}
.tb9-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tb9-l > li{border-bottom:1px solid var(--line)}
.tb9-l.neu{border-top-color:transparent;transition:border-color .25s ease}
.tb9-l.neu > li{border-bottom-color:transparent;transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.tb9-l.neu.klein{border-top-color:var(--line)}
.tb9-l.neu.klein > li{border-bottom-color:var(--line)}
/* neuester Block nur hervorgehoben, solange er zugeklappt ist */
.tb9-l.neu.klein > li.neu{background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:inset 3px 0 0 var(--accent);border-radius:4px 12px 12px 4px}
.tb9-l.neu.klein > li.neu .tb9-zeile{padding-left:12px;padding-right:8px}
.tb9-zeile{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 2px;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.tb9-zeile .zd{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600}
.tb9-zeile .zd .lt{color:var(--accent)}
.tb9-zeile .zw{white-space:nowrap;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.tb9-zeile .zb{flex:none;line-height:0}
.tb9-zeile .zb svg{width:12px;height:21px;display:block}
.tb9-zeile .pf{flex:none;color:var(--muted);line-height:0;transition:transform .25s ease}
.tb9-zeile[aria-expanded="true"] .pf{transform:rotate(180deg)}
.tb9-chip{display:table;margin:3px 0 0;white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
.tb9-det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.tb9-det.offen{grid-template-rows:1fr}
.tb9-det > div{overflow:hidden;min-height:0}
.tb9-in{padding:6px 2px 18px}
.tb9-fb{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:22px 2px 6px}
.tb9-hero{display:flex;flex-direction:column;align-items:center;text-align:center;font-variant-numeric:tabular-nums}
.tb9-hart{font-size:13px;font-weight:800;margin-bottom:2px}
.tb9-htag{font-size:12px;color:var(--muted);font-weight:500}
.tb9-htag.lt{color:var(--accent);font-weight:700}
.tb9-ausl{font-size:11px;color:var(--muted);opacity:.8;margin-top:2px}
.tb9-thermo{width:100%;max-width:340px;margin:12px auto 0}
.tb9-bat{position:relative;height:26px}
.tb9-bat span{position:absolute;top:3px;transform:translateX(-50%);line-height:0;opacity:.35;transition:opacity .2s}
.tb9-bat span.an{opacity:1}
.tb9-bat svg{width:28px;height:16px;display:block}
.tb9-bahn{position:relative;height:14px;border-radius:99px;margin-top:4px}
/* weicher Verlauf ohne Zonenkanten; rechts der Markierung blass (~35 %) */
.tb9-z,.tb9-f{position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,#E0115F 0%,#E0115F 8%,#FFBF00 37.5%,#A3D977 62.5%,#50C878 90%,#50C878 100%)}
.tb9-z{opacity:.35}
.tb9-mark{position:absolute;top:50%;width:20px;height:20px;border-radius:50% !important;background:var(--card);border:3px solid var(--ink);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.tb9-sk{position:relative;height:16px;margin-top:6px;font-size:11px;font-weight:700;color:var(--muted)}
.tb9-sk span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.tb9-sk span:first-child{transform:none}
.tb9-sk em{font-style:normal;font-size:9px;font-weight:800;color:var(--muted);background:var(--chip);border:1px solid var(--line);border-radius:5px;padding:0 3px;margin-left:3px;vertical-align:1px}
.tb9-zz{display:flex;align-items:stretch;justify-content:center;margin-top:14px}
.tb9-zz > div{display:flex;flex-direction:column;align-items:center;min-width:96px;padding:0 18px}
.tb9-zz > div + div{border-left:1px solid var(--line)}
.tb9-zz b{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.tb9-zz > div + div b{font-weight:500}
.tb9-zz span{font-size:12px;font-weight:600;color:var(--muted);margin-top:4px}
.tb9-best{font-size:11px;color:var(--muted);margin-top:4px}
.tb9-avg{font-size:13px;font-weight:600;color:var(--muted);margin-top:6px}
/* hig69: Kachel-Paar (.tb9-duo/.tb9-box, Kopf/Zahl/Einheit/Pfeil, Aufklappen) -> fenster-system.css (.fw9-paar/.fw9-kachel); hier nur noch Verhalten */
.tb9-box.b-offen{cursor:default}
.tb9-chev{display:inline-flex;color:var(--muted);line-height:0;transition:transform .25s ease}
.tb9-nach{height:24px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 13%,transparent);border-radius:99px;padding:0 10px;margin:0;font:inherit;font-size:11px;font-weight:700;line-height:22px;color:var(--accent);cursor:pointer;white-space:nowrap}
/* Strukturauswahl-Knopf unsichtbar (die Auswahl oeffnet ueber "+ Nachtragen"), bleibt als Anker fuer das Popup am PC */
.tb9-sel{position:absolute;left:50%;bottom:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.tb9-namen{border-top:1px solid var(--line);margin-top:6px;padding:2px 0 4px}
.tb9-namen ul{list-style:none;margin:0;padding:0}
.tb9-namen li{display:flex;align-items:baseline;gap:4px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;min-width:0}
.tb9-namen li:last-child{border-bottom:0}
.tb9-namen li em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tb9-namen li i{flex:1 1 auto;min-width:6px;border-bottom:1px dotted color-mix(in srgb,var(--muted) 55%,transparent);transform:translateY(-3px)}
.tb9-namen li span{color:var(--muted);font-weight:700;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.tb9-namen .leer{font-size:13px;color:var(--muted);padding:6px 0}
.tb9-namen .gk9{font-size:11px;color:var(--muted);margin:10px 0 0;line-height:1.2}
.tb9-namen .gk9:first-child{margin-top:6px}
@media (prefers-reduced-motion: reduce){ .tb9-det,.tb9-auf,.tb9-chev,.tb9-zeile .pf,.tb9-l.neu > li{transition:none} }
/* ein1 (Harun 17.10.2026, Vorlage platform/app/prototyp-herz.html): Grafiken der Kennzahl-Kacheln (bc/js/modules/analyse/kachelgrafik.js).
   Raster wie im Prototyp: Mitte 72 px = Icon-Box 44 px (unten buendig) + 1 px + Zahlenzeile 18 px -> Momentum- und TV-Zahl auf einer Grundlinie.
   Herz-Kachel behaelt ihr Layout (links Herz, rechts %, darunter "14/22"). Animationen laufen per Web Animations (JS) nur ueber
   transform/opacity auf eigenen Ebenen; hier nur Ruhezustand, Schloss-Ruetteln und reduzierte Bewegung. */
/* Hell-Thema (der Prototyp ist nur dunkel): helle Rinne, Nadel dunkel statt weiss, leeres Herz grau */
:root{--kg9-rinne:#E2E5EB;--kg9-res:#F5D3DF;--kg9-leer:rgba(0,0,0,.06);--kg9-nadel1:#5E6673;--kg9-nadel2:#434A55;--kg9-wind:#5E6673}
:root[data-theme="dark"]{--kg9-rinne:#161A22;--kg9-res:#3A1626;--kg9-leer:rgba(255,255,255,.11);--kg9-nadel1:#EEF2F5;--kg9-nadel2:#C7D1D8;--kg9-wind:#fff}
/* ein1b (Harun 17.10.): Momentum = Tacho oben mittig (seitlich Abstand zum Rand, dickerer Balken), Zahl mittig im Bogen, unten mehr Luft.
   TV-Block wie die Aktivitaets-Kachel: links grosse Batterie, rechts "25 T" gross und darunter "Ø 1,7" klein. */
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 .wert{position:relative;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:1px;row-gap:1px;overflow:visible;font-size:16px}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 .wert > .em{display:flex;width:100%;height:30px;align-items:flex-end;justify-content:center;line-height:0;margin:0;position:static;flex:0 0 auto}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 #momWert{display:flex;height:18px;width:auto;align-items:flex-end;justify-content:center;position:relative;z-index:1;flex:0 0 auto;
  font-weight:700;letter-spacing:-.3px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;max-width:none}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indTv9.kg9 .wert{position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px;column-gap:6px;overflow:visible;font-size:16px}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indTv9.kg9 .wert > .em{display:block;width:auto;height:auto;line-height:0;margin:0;position:relative;flex:0 0 auto}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indTv9.kg9 #tvWert{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:auto;width:auto;flex:0 0 auto;text-align:left;line-height:1;max-width:none}
#view-analyse #indMom9.kg9 .kg9-w{display:inline-flex;align-items:baseline;white-space:nowrap;font:inherit;color:inherit;letter-spacing:inherit;line-height:1}
#view-analyse #indMom9.kg9 .pc{font-size:.72em;font-weight:600;margin-left:.12em;letter-spacing:0}
/* ein1d: wie #kMom .gbig im Prototyp - 0,9-fach, Mittelpunkt 48 px unter der Oberkante (20-Grad-Reserve) */
.kg9-mom{transform:translateY(-23px) scale(.82);transform-origin:51px 64px;position:absolute;left:50%;top:0;margin-left:-51px;width:102px;height:76px;pointer-events:none;display:block}
.kg9-l{position:absolute;left:0;top:0;display:block;overflow:visible}
.kg9-lg{position:absolute;left:-10px;top:-10px;width:122px;height:140px;display:block}   /* ein1j: Platz fuer den Minus-Bogen bis senkrecht unten (Kreisunterkante y 113) */
.kg9-lg > span,.kg9-glw > span,.kg9-pu > span{position:absolute;left:0;top:0;width:122px;height:140px;display:block}
.kg9-shw{width:102px;height:76px}
.kg9-rot{transform-origin:51px 64px}
/* Groessen gegen die allgemeine Regel "#view-analyse .ind-card .em svg" (Symbolgroesse 14-26 px) absichern */
#view-analyse #anaKennzahlen9 #indMom9 .em svg.kg9-l{display:block;width:102px;height:76px}
#view-analyse #anaKennzahlen9 #indTv9 .em svg.kg9-l{display:block;width:26.3px;height:36.5px}
.kg9-wind{opacity:0}
/* Gedeckelt: Knopf = Zahl (exakt mittig wie ungedeckelt, symmetrisches Polster) + Schloss mittig darueber; Trefferflaeche >= 32 px ohne Verschiebung */
#view-analyse #indMom9.kg9 .kg9-dk{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;position:relative;display:inline-flex;align-items:baseline;
  padding:20px 8px 6px;margin:-20px -8px -6px;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;line-height:1}
#view-analyse #indMom9.kg9 .kg9-dk:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
.kg9-lk{position:absolute;left:50%;top:5px;margin-left:-8px;width:16px;height:15px;display:block;transform-origin:8px 10px}
.kg9-lk svg{position:relative;display:block;overflow:visible;transform:scale(.8);transform-origin:50% 100%}   /* ein1g: kleiner, frei vom dickeren Bogen */
.kg9-lkh{position:absolute;left:-4px;top:-3px;width:24px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,110,0,.55),rgba(255,110,0,0));opacity:0;pointer-events:none}
/* Genau 9 Termine: Ruetteln in zwei Schueben je 2,2 s (~0,08 s Takt, +-1,5 px / +-4 Grad), Anschwellen bis 1,08, Hauch Hitzeschein */
.kg9-lk9{animation:kg9Lk 2.2s linear infinite}
.kg9-lk9 .kg9-lkh{animation:kg9Lkh 2.2s ease-in-out infinite}
@keyframes kg9Lk{0%{transform:none}3.6%{transform:translate(1.2px,-.6px) rotate(3deg) scale(1.03)}7.3%{transform:translate(-1.4px,.5px) rotate(-4deg) scale(1.05)}10.9%{transform:translate(.8px,.9px) rotate(2deg) scale(1.06)}14.5%{transform:translate(-.6px,-1.2px) rotate(-3deg) scale(1.08)}18.2%{transform:translate(1.5px,.3px) rotate(4deg) scale(1.07)}21.8%{transform:translate(-1.2px,.8px) rotate(-2deg) scale(1.08)}25.5%{transform:translate(.4px,-1px) rotate(3.5deg) scale(1.06)}29%{transform:translate(-1.5px,-.2px) rotate(-4deg) scale(1.04)}32.7%{transform:none}
  47%{transform:none}50.5%{transform:translate(-1px,.7px) rotate(-3deg) scale(1.04)}54%{transform:translate(1.4px,-.4px) rotate(4deg) scale(1.07)}57.6%{transform:translate(-.7px,-1.1px) rotate(-2.5deg) scale(1.08)}61.3%{transform:translate(1.1px,1px) rotate(3deg) scale(1.08)}65%{transform:translate(-1.5px,.2px) rotate(-4deg) scale(1.06)}68.5%{transform:translate(.6px,-.8px) rotate(2deg) scale(1.03)}72%{transform:none}100%{transform:none}}
@keyframes kg9Lkh{0%,100%{opacity:0}20%,62%{opacity:1}40%,85%{opacity:.35}}
.kg9-pop{position:fixed;z-index:3000;max-width:200px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.35);text-align:left}
/* Herz: Rahmen 50 px, sichtbares Herz ca. 36 px; belegt in der Kachel 40 px wie bisher */
#view-analyse #indGp9 .gp9-kh .kg9-hz{position:relative;display:block;width:50px;height:50px;margin:-5px;transform-origin:50% 50%}
#view-analyse #indGp9 .gp9-k{flex:0 0 auto;transform-origin:50% 50%}
#view-analyse #indMom9.kg9 .wert,#view-analyse #indTv9.kg9 .wert{transform-origin:50% 50%}
.kg9-hz > svg.kg9-l{width:50px;height:50px}
.kg9-hzc{width:50px;height:50px;overflow:hidden}
.kg9-hzc > span.kg9-l{width:50px;height:50px}
.kg9-hzw,.kg9-hzg{position:absolute;top:0;display:block}
.kg9-fl{position:absolute;left:0;top:0;width:50px;height:50px;max-width:none;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;transition:none}
.kg9-stern{position:absolute;display:block;transform:scale(0);opacity:0;pointer-events:none}
/* TV-Block: Batterie 26,3 x 36,5 px, Text "16 T · Ø 1,4" 11 px */
.kg9-bat{position:absolute;left:0;top:0;display:block;width:26.3px;height:36.5px;transform-origin:0 0}
.kg9-bat .kg9-l{width:26.3px;height:36.5px}
.kg9-sg{width:26.3px;height:36.5px}
.kg9-hell{opacity:0}
.kg9-lad{position:absolute;left:1.98px;top:4.47px;width:22.33px;height:30.52px;border-radius:6.45px;box-shadow:0 0 4px rgba(160,220,80,.55);opacity:0;pointer-events:none}
/* Werte rechts: gross wie "44 %" der Aktivitaets-Kachel, darunter klein wie "19/43" */
.kg9-tvk{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap;font-variant-numeric:tabular-nums}
.kg9-tvk b{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.kg9-tvk span{font-size:12px;font-weight:600;color:var(--muted);margin-top:4px;line-height:1}
.kg9-tvk span:only-child{margin-top:0}
.mom9-deckel{margin:-10px 0 14px;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.35}
@media (prefers-reduced-motion: reduce){ .kg9-lk9,.kg9-lk9 .kg9-lkh{animation:none} }

/* ein1f (Harun 17.10.): zwei Kacheln - links Aktivitaet, rechts Momentum; Titel kleiner, Kachel 100 px, Grafiken groesser.
   Momentum: Tacho (mit Zahl im Bogen) links, rechts zweizeilig "Ausblick:" / "32 Termine". Groesse passt kg9Passen an. */
#view-analyse #anaKennzahlen9 #indGp9{order:-1}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9,:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indGp9{height:100px}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9 .lbl,:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indGp9 .lbl{font-size:9px;height:9px;line-height:9px}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 .wert{display:grid;grid-template-columns:82px auto;grid-template-rows:22px 20px;column-gap:8px;row-gap:1px;align-content:start;justify-content:center;align-items:end;box-sizing:border-box;transform-origin:50% 50%}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 .wert > .em{grid-column:1;grid-row:1;position:relative;width:82px;height:22px}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 #momWert{grid-column:1;grid-row:2;justify-self:center;height:20px}
.kg9-aus{grid-column:2;grid-row:1 / 3;align-self:center;display:flex;flex-direction:column;align-items:flex-start;text-align:left;white-space:nowrap;margin-top:20px}   /* Textmitte = Kachelmitte (Rasterfeld liegt 10 px hoeher) */
.kg9-aus .kg9-aus2{margin-top:3px}
.kg9-aus span{font-size:10.5px;font-weight:500;color:var(--muted);line-height:1.2}
.kg9-aus b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* ein10 (Harun 18.10.): Momentum-Kachel - rechts gross die Prozentzahl (Typo wie "47 %" der Aktivitaet, Groesse via kg9Passen),
   "Ausblick/Rueckblick" entfaellt; Schloss (gedeckelt) in der MITTE des Tachos, wo vorher die Zahl stand. Band dicker (KG9M). */
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 #momWert{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:start;height:auto;margin-top:6px;
  font-weight:800;letter-spacing:-.02em;line-height:1}
#view-analyse #indMom9.kg9 #momWert .pc{font-size:1em;font-weight:800;margin-left:.22em;letter-spacing:-.02em}
#view-analyse #indMom9.kg9 .em > .kg9-dk{position:absolute;left:50%;top:15px;width:40px;height:30px;margin:0 0 0 -20px;padding:0;border:0;background:none;
  cursor:pointer;pointer-events:auto;z-index:2;-webkit-tap-highlight-color:transparent;line-height:0}
#view-analyse #indMom9.kg9 .em > .kg9-dk .kg9-lk{top:9px}
#view-analyse #indMom9.kg9 .em > .kg9-dk .kg9-lk svg{transform:scale(1.05)}
#view-analyse #indMom9.kg9 .em > .kg9-dk:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
/* ein10 (Harun 18.10.): "Aktualisiert HH:MM Uhr" oben in der Zeile der Terminart-Knoepfe, rechtsbuendig direkt vor der Struktur-Auswahl
   (zweizeilig, klein, grau) - die eigene Zeile darunter entfaellt */
#view-analyse .ana-bar .ana-zeile2 #anaStand9{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;flex:0 0 auto;margin:0 0 0 auto;
  font-size:.6rem;line-height:1.3;font-weight:500;color:var(--muted);white-space:nowrap;text-align:right;min-height:0}
#view-analyse .ana-bar .ana-zeile2 #anaStand9:empty{display:none}
#view-analyse .ana-bar .ana-zeile2 #anaStand9:not(:empty) + .ana-struktur9{margin-left:0}
/* ein11 (Harun 18.10.): beide Kennzahl-Kacheln 60 % / 40 % - links die Grafik (Herz bzw. Tacho) waagerecht und senkrecht mittig,
   rechts die Zahlen mittig. Groesse der Grafik setzt kg9Passen (Tacho-Feld = Sichtflaeche 98 x 74 x --kg9s inkl. Minus-Reserve). */
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 .wert{display:grid;grid-template-columns:60% 40%;grid-template-rows:minmax(0,1fr);
  align-items:center;justify-items:center;column-gap:0;row-gap:0;width:100%;align-self:stretch;flex:1 1 auto;min-height:0;padding:0;transform:none}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 .wert > .em{grid-column:1;grid-row:1;position:relative;display:block;width:78px;height:59px;margin:0;line-height:0}
:root:not(.kz9-alt) #view-analyse #anaKennzahlen9 #indMom9.kg9 #momWert{grid-column:2;grid-row:1;align-self:center;justify-self:center;margin:0;height:auto;font-size:1.3rem}
#view-analyse #indMom9.kg9 .em > .kg9-mom{left:0;top:0;margin:0;transform-origin:0 0;transform:scale(var(--kg9s,.8)) translate(-2px,-15px)}
#view-analyse #indMom9.kg9 .em > .kg9-dk{left:calc(49px * var(--kg9s,.8));top:calc(49px * var(--kg9s,.8));width:34px;height:28px;margin:0;transform:translate(-50%,-92%)}
#view-analyse #indMom9.kg9 .em > .kg9-dk .kg9-lk{top:10px}
#view-analyse #anaKennzahlen9 #indGp9 #gpIndWert{align-self:stretch;min-height:0}
#view-analyse #indGp9 #gpIndWert > .gp9-k{display:grid;grid-template-columns:60% 40%;align-items:center;justify-items:center;width:100%;height:100%;gap:0;padding:0;transform:none!important}
#view-analyse #indGp9 .gp9-k .gp9-kz{align-items:center;text-align:center}

/* ==== bc/css/modules/kalender/kalender-02.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 7 */

  .kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .kal-grid.kal-lade{opacity:.45;transition:opacity .25s}   /* Monat noch nicht geladen: gedimmt statt fälschlich leer */
  .kz{min-height:56px;border-radius:8px;padding:2px 2px 3px;background:transparent;border:1px solid transparent;touch-action:manipulation;
    cursor:pointer;display:flex;flex-direction:column;gap:1px;font-family:inherit;position:relative;text-align:left}   /* v790: gap 2->1 (BC2-Dichte) */
  .kz:disabled{cursor:default}
  /* v163: ALLE Tage des Monats gleich - Tinte, duenn; nur .aus ist blass,
     nur .heute ist dick (Regeln weiter unten) */
  /* v337: line-height 1.4 -> 1.15 - dieselbe Schriftgroesse, aber die Zeile
     traegt keine ueberfluessige Luft mehr ueber und unter der Zahl. */
  .kz .nr{font-size:.74rem;font-weight:500;color:var(--ink);text-align:center;line-height:1.15}   /* v790: Zahl leicht groesser (BC2) */
  /* v790 (User): KW unten links in der Ecke - oben neben der Zahl biss sie
     sich mit den Ganztags-Baendern. Sie liegt VOR den Balken (z-index) und
     traegt einen hauchduennen Karten-Schleier, damit sie auch auf einem
     farbigen Termin bis 24 Uhr lesbar bleibt. */
  /* v894 (User): KW und "+n" sitzen absolut am Zellenboden - im Text-Modus
     lief die letzte Terminzeile mitten durch sie hindurch. Die Zelle haelt
     dort jetzt eine Zeile frei und schneidet sauber ab. */
  /* v902 (User: "die Hoehe vom KW muss frei bleiben"): padding allein
     genuegt NICHT - der Innenabstand haelt ueberlaufenden Inhalt nicht auf,
     der lief einfach hinein und legte sich auf KW und "+n". Die Zeilen
     sitzen jetzt in einer eigenen Liste, die auf die verbleibende Hoehe
     begrenzt ist und sauber abschneidet. */
  .kz .txt-liste{flex:1;min-height:0;overflow:hidden;display:flex;
    flex-direction:column;gap:1px}
  .kz.txtzelle{padding-bottom:16px;overflow:hidden}
  @media (min-width:900px){ .kz.txtzelle{padding-bottom:22px} }
  @media (min-width:1400px){ .kz.txtzelle{padding-bottom:26px} }
  .kz-kw{position:absolute;left:2px;bottom:1px;z-index:6;font-size:.5rem;font-weight:600;
    color:var(--muted);line-height:1;font-style:normal;letter-spacing:.02em;
    padding:0 2px;background:color-mix(in srgb, var(--card) 82%, transparent)}
  /* Heute (User 13.08. Nacht): kein Neon mehr - die Zelle ist nur LEICHT
     anders getoent als der Rest, die Zahl fett (Dark Mode: weiss). */
  /* v338: EIN Ton fuer die Heute-Zelle. Vorher stand der dunkle Wert in der
     Basis-Regel und der helle nur unter html[data-theme="light"] - steht das
     Geraet auf "System", traegt das html-Element gar kein data-theme, und der
     HELLE Modus bekam die DUNKLEN Werte: weisser Schleier, weisser Saum.
     Deshalb das vollstaendige Muster - Basis hell, Dunkel per Media-Abfrage
     UND per data-theme. */
  :root{--heute-ton:#23262d}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--heute-ton:#fff} }
  :root[data-theme="dark"]{--heute-ton:#fff}
  /* v807 (User): Heute-GRUND - hell weiter getoent, dunkel SCHWARZ statt
     Grau: die 9%-Toenung soff die Typfarben ab, Schwarz laesst sie
     knallen und hebt sich vom Kartengrund genauso ab. */
  :root{--heute-grund:color-mix(in srgb, var(--heute-ton) 9%, var(--card))}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--heute-grund:#000} }
  :root[data-theme="dark"]{--heute-grund:#000}
  /* v338: margin-top bleibt unangetastet - sonst faellt das Ausweichen unter
     einem Ganztags-Band (.hat-gz1) fuer HEUTE weg und die Zahl sitzt hoeher als
     an allen anderen Tagen. Der Reset stammt aus der Zeit, als die Heute-Zahl
     noch ein Kreis war. */
  .kz.heute .nr{font-weight:900;width:auto;height:auto;background:none;color:var(--heute-ton);
    margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center}
  /* v161 (User 15.08.): UNUEBERSEHBAR - Dark klar heller, Light klar dunkler */
  .kz.heute{background:var(--heute-grund) !important;   /* v807: Token, s. oben */
    border-color:color-mix(in srgb, var(--heute-ton) 65%, transparent) !important}
  .kz.sel{border-color:var(--accent);background:var(--chip)}
  /* Gruppen-Verlaeufe: BEIDE Themes dunkel-glaenzend (User 13.08.: Pastell
     im Kalender zurueckgedreht - Pastell lebt nur auf der Buchungsseite) */
  :root{--gv-beratung:linear-gradient(135deg,#062A66,#2B5FC4);
    --gv-rekrutierung:linear-gradient(135deg,#5C1128,#B23A57);
    --gv-qualitaet:linear-gradient(135deg,#6E5414,#C4A238);
    /* v506 (User 23.08.): zentrale Veranstaltung, der man ZUGESAGT hat -
       Gold im selben Stil wie die drei Gruppen-Verlaeufe */
    /* v824 (User): weicher - der helle Endton #C4A238 machte den Verlauf
       hart und stach auf weissem Grund; #A8842F traegt weissen Text. */
    --gv-zentral:linear-gradient(135deg,#6E5414,#A8842F)}
/* ==== bc/css/modules/mitteilungen/mitteilungen-01.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 8 */

  /* Ankuendigung/Einladung: sie ist ein HINWEIS, kein gebuchter Termin -
     deshalb nur ein zarter Rahmen, kaum Flaeche. Erst die Zusage fuellt ihn
     (User 23.08.: "umrandet finde ich gut, aber deutlich transparenter"). */
  /* Zaehler an der Glocke - klein, randlos, nie mehr als "99+" */
  #pfGlocke i{position:absolute;top:-1px;right:-2px;min-width:16px;height:16px;padding:0 4px;   /* v1411 (Harun): dieselbe Form wie an den Tabs */
    box-sizing:border-box;border-radius:99px !important;background:var(--rot);color:#fff;font-style:normal;
    font-size:.58rem;font-weight:800;line-height:16px;text-align:center;letter-spacing:0}
  /* Reiter im Postfach-Blatt: waagerecht scrollbar, damit auch fuenf Stueck
     auf ein schmales Handy passen */
  .pf-reiter{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;margin:0 0 4px;flex:0 0 auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pf-reiter::-webkit-scrollbar{display:none}
  .pf-reiter button{flex:0 0 auto;background:var(--chip);border:none;border-radius:999px;
    padding:7px 13px;color:var(--muted);font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
  .pf-reiter button.an{background:var(--accent);color:#fff}
  .pf-leer{text-align:center;color:var(--muted);font-size:.82rem;padding:26px 0}
  /* Postfach-Zeile: ruhig, ein Punkt links markiert Ungelesenes */
  .pf-z{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);cursor:default}
  .pf-z:last-child{border-bottom:none}
  .pf-z.klick{cursor:pointer}
  .pf-p{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:6px}
  .pf-p.alt{background:var(--line)}
  .pf-t{flex:1;min-width:0}
  .pf-t b{display:block;font-size:.86rem;font-weight:700;line-height:1.35}
  .pf-t span{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
  /* v544: Vorschau des Nachrichtentexts - zwei Zeilen, dann Auslassung. Der
     Text WAR die ganze Zeit da (Feld 'text'), stand aber nirgends. */
  .pf-t .pf-vor{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:.78rem;color:var(--ink);opacity:.75;margin-top:3px;line-height:1.4}
  /* v544: Volltext einer Nachricht ohne Sprungziel */
  .pf-voll{white-space:pre-line;font-size:.85rem;line-height:1.55}
  /* v522 (User): "Mitte aus beiden Welten" - die Einladung war kaum sichtbar
     (42 % Deckung), die Angebots-Kachel dagegen kraeftig. Jetzt: klarer Rand,
     volle Schrift, leichte Tonflaeche (kommt inline als Typ-Farbe mit Alpha). */
  .kz .balken.hinweis, .wp-ev.hinweis{border:1.5px solid currentColor;opacity:.85;box-shadow:none}
  .kz .balken{height:13px;border-radius:4px;font-size:.56rem;font-weight:800;color:#fff;
    display:flex;align-items:center;justify-content:center;overflow:hidden;letter-spacing:.02em}
  /* v838 (User): "+n" gleichgestaltet wie die KW - unten RECHTS, gleiche
     Hoehe, gleiche Schrift, gleicher Karten-Schleier */
  .kz .mehr{position:absolute;right:2px;bottom:1px;z-index:6;font-size:.5rem;font-weight:600;
    color:var(--muted);line-height:1;padding:0 2px;
    background:color-mix(in srgb, var(--card) 82%, transparent)}
  .kz .phase{position:absolute;top:1px;right:2px;font-size:.5rem;font-weight:800;padding:0 3px;
    border-radius:4px;color:#fff}
  .kal-legende{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
  .kal-legende span{font-size:.62rem;color:var(--muted);display:flex;align-items:center;gap:4px}
  .kal-legende i{width:9px;height:9px;border-radius:3px;display:inline-block}
  /* Tagesliste unter dem Kalender */
  .tagpanel{margin-top:10px}
  .tagpanel h4{font-size:.82rem;margin:0 0 8px}
  .tagpanel .t{border-left:3px solid var(--line);padding:6px 10px;margin-bottom:8px;
    background:var(--chip);border-radius:0 8px 8px 0;font-size:.82rem}
  .tagpanel .t span{color:var(--muted);font-size:.74rem}
  .sect{font-size:.95rem;font-weight:800;margin:24px 2px 10px}
  /* Verfügbarkeits-Zeilen (Mo–So) */
  .zt-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.8rem}
  .zt-row .zt-tag{width:28px;font-weight:800}
  .zt-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
  .zt-row input[type=time]{background:var(--chip);border:1px solid var(--line);color:var(--ink);
    border-radius:8px;padding:5px 6px;font-family:inherit;font-size:.76rem}
  input[type=time]{min-width:118px;font-size:.85rem}
/* ==== bc/css/modules/einstellungen/einstellungen-02.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 9 */

  .zt-row .bisl{color:var(--muted);font-size:.72rem}
  .zt-row.aus input[type=time]{opacity:.35}
  .ty-row{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:.78rem}
  .ty-row .ty-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .ty-in,.ty-row input[type=number]{background:var(--chip);border:1px solid var(--line);color:var(--ink);
    border-radius:8px;padding:6px 7px;font-family:inherit;font-size:.76rem}
  .ty-row input[type=number]{width:52px}
  .ty-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}
  /* Einstellungs-Liste (iOS-Stil) + Typ-Editor */
  .set-sekt{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
    color:var(--muted);margin:18px 8px 7px}
  .set-sekt:first-of-type{margin-top:12px}
  /* Icon-Kacheln (iOS-Prinzip): farbige Mini-Kachel je Eintrag — sofortige
     Wiedererkennung, Farbton via --ic, Fläche 14 % davon (hell wie dunkel ok) */
  .srow{display:flex;align-items:center;gap:12px}
  .srow .ic{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;
    justify-content:center;background:color-mix(in srgb, var(--ic) 14%, transparent);color:var(--ic)}
  .srow .lbl{flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* Eigenes Dropdown (statt Browser-Select): App-Optik, Typ-Farbpunkte, Gruppen */
  .dd{position:relative}
  .dd-btn{width:100%;display:flex;align-items:center;gap:8px;background:var(--chip);border:1px solid var(--line);
    border-radius:10px;color:var(--ink);font-family:inherit;font-size:.86rem;padding:10px 12px;cursor:pointer;text-align:left}
  .dd-btn .tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dd-btn .pf{color:var(--muted);font-size:.66rem;flex:0 0 auto}
  .dd .pkt{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
  .dd-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;background:var(--card);
    border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18);
    max-height:264px;overflow:auto;padding:6px}
  .dd-sekt{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    font-weight:700;padding:8px 10px 4px}
  .dd-opt{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;border-radius:9px;
    color:var(--ink);font-family:inherit;font-size:.86rem;padding:9px 10px;cursor:pointer;text-align:left}
  .dd-opt:hover,.dd-opt.akt{background:var(--chip)}
  /* Unterseiten: große Titel-Kachel (aus dem Menü geklont) + ruhigere Karten */
  #setTitel{display:flex;align-items:center;gap:12px}
  .ic-titel{width:38px !important;height:38px !important;border-radius:11px !important}
  .ic-titel svg{width:20px;height:20px}
  /* (Harun es-neu9, A9): Symbol im Kopf ALLER Unterseiten war ohne Kachel, oben angesetzt (display:block) und zu klein - jetzt Kachel wie im
     Menue (--ic), Symbol mittig, Kachel senkrecht mittig zum Titel; eine Groesse fuer alle Unterseiten (34 px, Symbol 20 px) */
  #view-set .ic-titel{width:34px !important;height:34px !important;flex:0 0 34px;display:inline-flex;align-items:center;justify-content:center;align-self:center;border-radius:6px !important;background:var(--ic);color:#fff;margin:0}
  :root[data-theme="dark"] #view-set .ic-titel{color:#15171c}
  #view-set .ic-titel svg{width:20px !important;height:20px !important;display:block}
  #setSub .card{padding:16px 16px 14px;margin-bottom:14px}
  #setSub .card .set-row .tx b{font-size:.98rem;letter-spacing:-.01em}
  #setSub .card .set-row .tx span{line-height:1.45}
  #setSub .btn.mini{border-radius:10px;font-weight:700}
  #setSub .ty-in{border-radius:10px}
  /* v1615/v1616 (Harun-Wunsch, es1-Korrektur): Unterseite als ECHTES Vollbild,
     nur Handy/schmal (:not(.geraet-tablet-breit) - Desktop zweispaltig bleibt
     wie es ist). v1616-Fund (Harun es1): wenn das Vollbild nur WAEHREND des
     Schiebens gilt und danach in den normalen Fluss unterhalb des Kopfs
     zurueckfaellt, "springt" am Ende der Animation alles um - DESHALB gilt
     die Vollbild-Positionierung jetzt IMMER, solange #setSub offen ist
     (:not(.hide)), nicht nur uebergangsweise; .set-rein/.set-raus haengen nur
     noch die Schiebe-ANIMATION (Transform) dran, OHNE die Positionierung
     selbst zu aendern - kein Bruch mehr an Start/Ende. Deckt dabei auch den
     gemeinsamen Kopf ab (top:0 inkl. Safe-Area) und traegt dafuer ihren
     EIGENEN Kopf (#setSubKopf) - der gemeinsame Kopf der Liste (#setTitel/
     #setZurueckBtn) wird am Handy dadurch gar nicht mehr angefasst (siehe
     renderSubSofort9/setSubKopfSchmal9). */
  :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setSub:not(.hide){
    position:fixed;inset:0 0 calc(56px + var(--sab,0px) + var(--vvUnten,0px)) 0;
    padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 34px;
    overflow-y:auto;background:var(--bg);box-sizing:border-box;
    z-index:140;will-change:transform}
  :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setSub.set-rein{animation:setSchiebRein9 .26s ease-out both}
  :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setSub.set-raus{animation:setSchiebRaus9 .26s ease-out both}
  @keyframes setSchiebRein9{from{transform:translateX(100%)}to{transform:translateX(0)}}
  @keyframes setSchiebRaus9{from{transform:translateX(0)}to{transform:translateX(100%)}}
  @media (prefers-reduced-motion:reduce){
    :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setSub.set-rein,
    :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setSub.set-raus{animation:none}
  }
  /* v1616: eigener Kopf der Unterseite - nur Handy/schmal sichtbar; am
     Desktop bleibt der gemeinsame Kopf (#setTitel) zustaendig, hier leer. */
  #setSubKopf{display:none}
  :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setSubKopf{display:flex;align-items:center;gap:10px;margin:0 0 16px}
  :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) .set-sub-back{
    background:none;border:none;color:var(--ink);padding:4px;margin:-4px 6px -4px -4px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
  :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setSubTitel{display:flex;align-items:center;gap:10px;margin:0;min-width:0}
  :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setZurueckBtn{display:none !important}
  /* Harun 10.10.: am Desktop ab der zweiten Ebene immer ein Weg zurueck (layout-tablet-breit.css blendet ihn sonst aus) */
  :root.geraet-tablet-breit #view-set #setSub.tief9 #setZurueckBtn{display:inline-block !important}   /* ersetzt durch #setSubKopf (v1616); !important noetig gegen inline style="display:block" */
  /* Zeilen der Einstellungen-Hauptliste nicht mehr neu einlaufen lassen -
     weder beim Betreten des Reiters noch beim Zurueckkehren aus einer
     Unterseite (Harun-Wunsch: "muessen statisch sein"). */
  :root:not(.geraet-tablet-breit):not(.geraet-tablet-hoch) #setHome .set-list > *{animation:none}
  .set-list{padding:2px 10px}
  .srow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    background:none;border:none;border-top:1px solid var(--line);padding:13px 4px;
    font-family:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
  .srow:first-child{border-top:none}
  .srow .chev{color:var(--muted);font-size:1.05rem}
  /* v1742 (Harun ei6): Einstellungen - ruhige Symbole und leichte Rundung. Die Kanten-Regel v445
     ("ALLES ECKIG", border-radius:0 !important) gilt ausserhalb weiter; hier wird sie GEZIELT nur im
     Einstellungs-Container #view-set ueberschrieben (deshalb !important). Farben gedeckt, Linie 1.75. */
  :root{--sic-teal:#3F857F;--sic-blau:#4C6A96;--sic-violett:#6A5F98;--sic-bern:#9A7840;--sic-gruen:#4F8259;
    --sic-schiefer:#5F6976;--sic-rose:#9C5A64;--sic-indigo:#575E92;--sic-gold:#86744A}
  :root[data-theme="dark"]{--sic-teal:#7FB5AF;--sic-blau:#8EA6CC;--sic-violett:#A69BD0;--sic-bern:#CDAE78;--sic-gruen:#8DBA95;
    --sic-schiefer:#A3ACB8;--sic-rose:#D0959E;--sic-indigo:#979DCB;--sic-gold:#BFAE84}
  #view-set .card{border-radius:6px !important}
  #view-set #firmaLogo{border-radius:6px !important}
  /* v1754 (Harun ei9: "voll ausgefuellte Symbole wie bei Samsung, aber nicht rund"): Kachel flaechig in der gedeckten
     Farbe, Zeichen weiss; im Dunkelmodus sind die --sic-Farben hell -> Zeichen dunkel (besser lesbar). 6 px wie bisher. */
  #view-set .srow .ic,#view-set .set-row > .ic{border-radius:6px !important;background:var(--ic);color:#fff;border:0}
  :root[data-theme="dark"] #view-set .srow .ic,:root[data-theme="dark"] #view-set .set-row > .ic{color:#15171c}
  #view-set .set-row > .ic{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
  #view-set .unter9 .ic,#view-set .warm-unter9 .ic{width:26px !important;height:26px !important}
  /* v1761 (Harun ic): EIN Stil - gefuellte Glyphen, gleiche optische Groesse (18er-Box ~ 15 px Zeichen in 30-px-Kachel); Marken (WhatsApp/Telegram) immer weiss */
  #view-set .srow .ic svg,#view-set .set-row > .ic svg{width:18px;height:18px;display:block}
  #view-set .unter9 .ic svg,#view-set .warm-unter9 .ic svg{width:16px;height:16px}
  :root[data-theme="dark"] #view-set .ic:is([style*="25D366"],[style*="2AABEE"]){color:#fff !important}
  /* v1754 (ei9): EIN Einrueck-Muster fuer Unteroptionen - eingerueckt wie ein Tab, feine Linie links;
     .folgt9 = haengt am Schalter der Kopfzeile (.kopf9) derselben Karte: aus = ausgegraut */
  /* v1759 (Harun bn: "diese Winkel sehen katastrophal aus - dann mach es nicht"): KEINE Baum-Linie, keine Winkel, keine Querstriche mehr.
     Unteroptionen (.unter9, .warm-unter9) sind nur sauber eingerueckt, mit kleineren Kacheln (26 px, s. oben). */
  /* v1761 (Harun ic: "Mit den Linien sah es besser aus"): erste Fassung zurueck - schlichte durchgehende Linie links, ohne Winkel/Querstriche */
  #view-set :is(.unter9,.warm-unter9){margin:2px 0 6px 20px;padding-left:12px;border-left:2px solid var(--line)}
  #view-set .card:has(> .kopf9 input[type=checkbox]:not(:checked)) > .unter9.folgt9{opacity:.45;pointer-events:none}
  #view-set .card:has(#briefAn:not(:checked)) #briefUnter9,#view-set .card:has(#abendAn:not(:checked)) #abendUnter9{opacity:.45;pointer-events:none}
  #view-set .srow .lbl small{display:block;font-weight:500;font-size:.74rem;color:var(--muted);white-space:normal}
  /* v1759 (Harun bn): EINE Feldbreite fuer Werte rechts (Uhrzeiten, Dienst, "Jetzt zeigen") */
  #view-set .wert9f{width:120px !important;flex:0 0 auto !important;margin-left:auto;box-sizing:border-box}
  #view-set :is(#remAdd,#typRemAdd)[disabled]{opacity:.45;cursor:default}
  #view-set .warm-unter9 .tx b{color:var(--ink)}   /* v1759 (Harun bn): Unteroptionen ueberall gleich (vorher nur Warm-up grau) */
  /* v1777 (Harun es2): Benachrichtigungen neu - NUR Betreiber (Klasse .es-neu9 an #sub-erinnerung, gesetzt in esNeu9Malen bei window.__BETR9).
     Eine Zeilenart wie .srow (30-px-Kachel, Titel + einzeiliger Untertitel), 4 px, Unteroptionen gleiten (gleit9), Stepper - 18:00 +,
     Chips fuer "Erinnern vor Terminen". Ohne die Klasse bleiben .k9/.stp9/#remChips9 unsichtbar -> alte Seite unveraendert. */
  #sub-erinnerung:not(.es-neu9) :is(.k9,.stp9,#remChips9){display:none !important}
  #view-set .es-neu9 .l9{display:none !important}
  #view-set .es-neu9 .card{border-radius:4px !important}
  #view-set .es-neu9 .set-row{padding:9px 2px;margin-bottom:0 !important}
  #view-set .es-neu9 .set-row > .ic{border-radius:4px !important}
  #view-set .es-neu9 .set-row .tx{flex:1;min-width:0}
  #view-set .es-neu9 .set-row .tx b{display:block;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #view-set .es-neu9 .set-row .tx > span{display:block;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #view-set .es-neu9 :is(.unter9,.warm-unter9){margin:0 0 4px 14px;padding-left:12px;border-left:2px solid var(--line);opacity:1 !important;pointer-events:auto !important}
  /* v1778 (Harun es3: "Funktionen beibehalten"): eigene Zeiten ("+ Eigene" oeffnet die alte Eingabezeile #remEigZeile9),
     Extra-Erinnerungen je Terminart bleiben sichtbar; nur "Fuer alle Termine" + #remListe (.l9) weichen den Chips */
  #view-set .es-neu9 #remEigZeile9[hidden]{display:none !important}   /* v1783 (Harun es6): gleitet per hidden statt Klasse */
  #view-set .es-neu9 #remEigZeile9{gap:6px;padding:2px 0 8px}
  #view-set .es-neu9 #remEigZeile9 :is(input,select){border-radius:4px}
  #view-set .es-neu9 .chip9.eig9{border-style:dashed;color:var(--muted)}
  #view-set .es-neu9 #remUnter9.eig-offen9 .chip9.eig9{border-style:solid;color:var(--ink)}
  /* v1779 (Harun es4): Schalter "Anrufen"/"Nachricht" wieder sichtbar (keine Funktion streichen); nur die alte Dienst-Auswahl weicht dem Segment */
  #view-set .es-neu9 :is(#warmDienstZeile9,#warmMsgListe9){display:none !important}
  /* v1778 (Harun es3): Warm-up "Nachricht per" - Segment WhatsApp | SMS | Telegram (setzt das vorhandene #warmMsg9) */
  #view-set .es-neu9 #warmSegZeile9{flex-wrap:wrap}
  #view-set .es-neu9 .seg9{display:flex;flex:1 0 100%;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:4px 0 2px}
  #view-set .es-neu9 .seg9 button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;border:0;border-left:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:.78rem;padding:7px 4px;cursor:pointer}
  #view-set .es-neu9 .seg9 button:first-child{border-left:0}
  #view-set .es-neu9 .seg9 button.on{background:var(--sic-teal);color:#fff}
  :root[data-theme="dark"] #view-set .es-neu9 .seg9 button.on{color:#15171c}
  #view-set .es-neu9 #gbInline9 .card{margin-bottom:12px}
  #view-set .es-neu9 #remChips9{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 8px}   /* v1778 (Harun es3): umbrechen statt seitlich scrollen - "+ Eigene" immer sichtbar */
  #view-set #sub-erinnerung .set-row .tx b > span{display:inline;font:inherit;color:inherit;margin:0;padding:0}   /* Titel-Spans (l9/k9) erben den Titelstil - auch in der alten Fassung */
  #view-set .es-neu9 .hinw9{font-size:.76rem;color:var(--muted);padding:0 2px 6px 38px}
  #view-set .es-neu9 .chip9{border:1px solid var(--line);background:none;color:var(--ink);border-radius:4px;padding:5px 8px;font:inherit;font-size:.76rem;white-space:nowrap;flex:0 0 auto;cursor:pointer}
  #view-set .es-neu9 .chip9.on{background:var(--sic-teal);border-color:var(--sic-teal);color:#fff}
  :root[data-theme="dark"] #view-set .es-neu9 .chip9.on{color:#15171c}
  #view-set .es-neu9 .set-row:has(.stp9){gap:8px}
  #view-set .es-neu9 .stp9{order:1;width:30px;height:30px;flex:0 0 auto;border:0;border-radius:4px;background:var(--chip);color:var(--ink);font:inherit;font-size:1.05rem;line-height:1;cursor:pointer;padding:0}
  #view-set .es-neu9 .stp9[data-d="-30"]{margin-left:auto}
  #view-set .es-neu9 .stp9[data-d="30"]{order:3}
  #view-set .es-neu9 .set-row:has(.stp9) input[type=time]{order:2;width:58px !important;min-width:0 !important;max-width:58px;flex:0 0 58px !important;margin-left:0 !important;padding:4px 0;border:0;background:none;text-align:center;font-weight:600;color:var(--ink)}
  #view-set .es-neu9 .set-row:has(.stp9) input[type=time]::-webkit-calendar-picker-indicator{display:none}
  /* v1782 (Harun es5): "Je Terminart abweichend" - Ausnahmen im Zeilenstil (Punkt + Name links, Wert rechts, ×), "+ Terminart hinzufuegen"
     klappt #typRemForm9 auf; "+ Eigene" + Eingabezeilen ohne graues Rohfeld; "Nachricht per" als Wert rechts + Liste darunter */
  #view-set .es-neu9 #typRemUnter9{margin:0 0 4px 14px;padding-left:12px;border-left:2px solid var(--line)}
  /* v1783 (Harun es6): #typRemForm9 gleitet per hidden (gleit9) statt Klasse typ-offen9 */
  #view-set .es-neu9 #typRemListe{display:block !important;margin:0 !important}
  #view-set .es-neu9 .tr-zeile9{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:.86rem}
  #view-set .es-neu9 .tr-zeile9 .pk9{width:8px;height:8px;border-radius:50% !important;flex:0 0 auto}
  #view-set .es-neu9 .tr-zeile9 .nm9{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
  #view-set .es-neu9 .tr-zeile9 .wt9{color:var(--muted);font-size:.8rem;white-space:nowrap}
  #view-set .es-neu9 .tr-zeile9 .weg9{border:0;background:none;color:var(--muted);font:inherit;font-size:1rem;line-height:1;padding:2px 4px;cursor:pointer;border-radius:4px}
  #view-set .es-neu9 .neu9{display:block;margin:6px 0 4px auto;border:0;background:none;color:var(--sic-teal);font:inherit;font-size:.8rem;font-weight:600;padding:4px 2px;cursor:pointer}
  #view-set .es-neu9 #typRemForm9{padding:4px 0 6px}
  #view-set .es-neu9 #typRemForm9 .dd{margin:0 0 6px !important}
  #view-set .es-neu9 #typRemForm9 .dd-btn{border-radius:4px !important;background:none !important;border:1px solid var(--line) !important;height:32px;font-size:.82rem}
  #view-set .es-neu9 :is(#typRemForm9,#remEigZeile9) .set-row,#view-set .es-neu9 #remEigZeile9{display:flex;align-items:center;gap:6px;padding:2px 0}
  #view-set .es-neu9 :is(#typRemForm9,#remEigZeile9) :is(input,select){border:1px solid var(--line);background:none;color:var(--ink);border-radius:4px;height:32px;padding:0 8px;font:inherit;font-size:.82rem;box-sizing:border-box}
  #view-set .es-neu9 :is(#typRemAdd,#remAdd){margin-left:auto;background:var(--sic-teal) !important;color:#fff !important;border-radius:4px;height:32px;padding:0 12px}
  :root[data-theme="dark"] #view-set .es-neu9 :is(#typRemAdd,#remAdd){color:#15171c !important}
  #view-set .es-neu9 :is(#typRemAdd,#remAdd)[disabled]{background:var(--chip) !important;color:var(--muted) !important}
  #view-set .es-neu9 .chip9.eig9{border-style:solid;border-color:transparent;color:var(--sic-teal);font-weight:600}
  #view-set .es-neu9 #remUnter9.eig-offen9 .chip9.eig9{border-color:var(--sic-teal);color:var(--sic-teal)}
  #view-set .es-neu9 .wahl9{margin-left:auto;display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--ink);font:inherit;font-size:.84rem;font-weight:600;padding:4px 2px;cursor:pointer}
  #view-set .es-neu9 .wahl9 svg{width:16px;height:16px}
  #view-set .es-neu9 .ms-liste9:not([hidden]){display:block;margin:0 0 6px 38px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
  #view-set .es-neu9 .ms-liste9 button{display:flex;align-items:center;gap:8px;width:100%;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:.84rem;padding:8px 10px;cursor:pointer;text-align:left}
  #view-set .es-neu9 .ms-liste9 button:first-child{border-top:0}
  #view-set .es-neu9 .ms-liste9 button svg{width:16px;height:16px;flex:0 0 auto}
  #view-set .es-neu9 .ms-liste9 button .hk9{margin-left:auto;color:var(--sic-teal);font-weight:700;visibility:hidden}
  #view-set .es-neu9 .ms-liste9 button.on .hk9{visibility:visible}
  /* v1783 (Harun es6: "endlich vereinheitlichen"): EIN Baukasten - Schalter-Zeile / Wert-Zeile / Chip-Zeile / Hinzufuegen-Zeile.
     Ganze Zeile antippbar (Klick-Logik im es-neu9-Block unten), Akzent = var(--accent) (hell Teal, dunkel Lila), Auswahl ohne Kasten. */
  #view-set .es-neu9 .set-row:has(> label.switch),#view-set .es-neu9 :is(#warmSegZeile9,.zt9,.tr-zeile9,#typRemNeu9){cursor:pointer;-webkit-tap-highlight-color:transparent}
  #view-set .es-neu9 .wahl9{font-weight:500;color:var(--muted);pointer-events:none}
  #view-set .es-neu9 .ms-liste9:not([hidden]){margin:0 0 4px;border:0;border-radius:0}
  #view-set .es-neu9 .ms-liste9 button{gap:12px;border:0;padding:7px 2px 7px 42px;font-size:.86rem;font-weight:600}
  #view-set .es-neu9 .ms-liste9 button svg{width:18px;height:18px}
  #view-set .es-neu9 .ms-liste9 button .hk9{color:var(--accent)}
  #view-set .es-neu9 .chip9{border-color:var(--line);color:var(--ink);font-weight:500}
  #view-set .es-neu9 .chip9.on{background:var(--accent) !important;border-color:var(--accent) !important;color:var(--accent-ink) !important;font-weight:600}
  #view-set .es-neu9 .chip9.eig9,#view-set .es-neu9 #remUnter9.eig-offen9 .chip9.eig9{border:1px solid var(--line);border-style:solid;color:var(--ink);font-weight:500}
  #view-set .es-neu9 #remUnter9.eig-offen9 .chip9.eig9{border-color:var(--accent)}
  #view-set .es-neu9 #typRemForm9[hidden]{display:none !important}
  #view-set .es-neu9 :is(#typRemAdd,#remAdd){background:var(--accent) !important;color:var(--accent-ink) !important}
  :root[data-theme="dark"] #view-set .es-neu9 :is(#typRemAdd,#remAdd){color:var(--accent-ink) !important}
  #view-set .es-neu9 .zt9 :is(.stp9){display:none}
  #view-set .es-neu9 .zt9 input[type=time]{pointer-events:none;color:var(--muted) !important;font-weight:500 !important;text-align:right !important;margin-left:auto !important}
  /* v1795 (Harun es2a: "Dunkle Schrift statt grau und etwas groesser"): Uhrzeit-Wert dunkel wie der Zeilentitel, etwas groesser - sonst unveraendert */
  #view-set .es-neu9 .zt9 input[type=time]{color:var(--ink) !important;font-weight:600 !important;font-size:1rem !important}
  #view-set .es-neu9 .zp9{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:2px 2px 8px 42px}
  #view-set .es-neu9 .zp9 .stp9{order:0;margin:0 !important}
  #view-set .es-neu9 .zp9 .zw9{border:0;background:none;color:var(--ink);font:inherit;font-size:.9rem;font-weight:600;min-width:58px;text-align:center;padding:4px 0;cursor:pointer}
  #view-set .es-neu9 .tr-zeile9{border-bottom:0;padding:9px 2px;gap:12px}
  #view-set .es-neu9 .tr-zeile9 .wt9{margin-left:auto}
  #view-set .es-neu9 #typRemNeu9{display:flex;width:100%;margin:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;padding:9px 2px;gap:12px}
  #view-set .es-neu9 #typRemNeu9 > .ic{--ic:var(--accent)}
  #view-set .es-neu9 #typRemForm9{padding:2px 2px 8px 42px}
  #view-set .es-neu9 #typRemKn9{display:flex;justify-content:flex-end;gap:8px;padding:6px 0 0}
  #view-set .es-neu9 #typRemWeg9{border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:.82rem;border-radius:4px;height:32px;padding:0 12px;cursor:pointer}
  #view-set .es-neu9 #typRemKn9 #typRemAdd{margin-left:0}
  /* v1785 (Harun es7: "Warum sind alle Menues offen?"): Ursache - .zp9{display:flex} schlug das hidden-Attribut, der Stepper stand
     dauerhaft offen. EINE Regel: in der neuen Fassung ist hidden immer zu (Klappen gleiten per gleit9 auf). */
  #sub-erinnerung.es-neu9 [hidden]{display:none !important}
  /* v1785 (Harun es7): Einheit Minuten/Stunden/Tage als drei Chips im Seitenstil statt nativer Auswahlliste (Quelle bleibt das select) */
  #sub-erinnerung.es-neu9 :is(#typRemEinheit,#remEinheit){display:none !important}
  #sub-erinnerung:not(.es-neu9) .ein9{display:none !important}
  #view-set .es-neu9 .ein9{display:flex;gap:5px;flex:0 0 auto}
  #view-set .es-neu9 .ein9 .chip9{padding:5px 7px}
  #view-set .es-neu9 :is(#typRemForm9,#remEigZeile9) .set-row,#view-set .es-neu9 #remEigZeile9{flex-wrap:wrap}
  #view-set .es-neu9 :is(#typRemVal,#remNeu){width:52px !important;flex:0 0 52px}
  /* v1785 (Harun es7): Dienst nicht installiert (nur App, Erkennung ueber BizCalStand.apps) - ausgegraut */
  #view-set .es-neu9 .ms-liste9 button[disabled]{opacity:.45;cursor:default}
  #view-set .es-neu9 .ms-liste9 button .ni9{font-size:.74rem;font-weight:500;color:var(--muted);margin-left:auto}
  #sub-geburtstage .k9{display:none !important}   /* v1785 (Harun es7): alte Fassung zeigt weiter "Anrufen und WhatsApp" */
  /* v1789 (Harun es8: "Ich brauche nicht links und rechts noch mal das Symbol ... nicht dieses graue Menue"): "Nachricht per" ohne Kachel links,
     eingerueckt wie die Unterzeilen; rechts das Marken-Logo in kleiner Markenkachel (mittig) + Name; Liste schlicht, Logo in Markenfarbe */
  #view-set .es-neu9 :is(#warmSegZeile9,#gbSegZeile9) > .tx{padding-left:0}
  #view-set .es-neu9 .ms-liste9 button{padding-left:2px}   /* Liste beginnt buendig mit "Nachricht per" (keine Kachel mehr davor) */
  #view-set .es-neu9 .wahl9{gap:8px}
  #view-set .es-neu9 .wahl9 .lg9{width:26px;height:26px;flex:0 0 26px;border-radius:6px;background:var(--lg);color:#fff;display:flex;align-items:center;justify-content:center}
  #view-set .es-neu9 .wahl9 .lg9 svg{width:16px;height:16px;display:block}
  #view-set .es-neu9 .ms-liste9 button > svg{color:var(--lg, var(--ink))}
  #view-set .es-neu9 .ms-liste9 button[aria-selected="true"]{background:none}
  /* (Harun es12: "Das WhatsApp-Logo soll auch abgerundete Kanten haben, so wie andere Logos"): die globale ECKIG-Regel (Z. 126, !important)
     machte die Markenkachel eckig - gleiche 4 px wie die Symbol-Kacheln .set-row > .ic.
     Grundsatzregel Auswahl-Listen: nicht gewaehlt = Logo UND Text 50 % Deckkraft (wie nicht aktivierbarer Kontakt aus ContactCoach),
     gewaehlt = voll + Haken. Nicht installiert faellt unter dieselbe Regel (kein doppeltes Abblenden). */
  #view-set .es-neu9 .wahl9 .lg9{border-radius:4px !important}
  #view-set .es-neu9 .ms-liste9 button:not(.on) > :not(.hk9){opacity:.5}
  #view-set .es-neu9 .ms-liste9 button[disabled]{opacity:1}
  /* (Harun es9: "18 Uhr muss prominenter sein ... die Buttons fressen zu viel Sichtbarkeit"): Uhrzeit-Wert als Wert-Chip im Akzent
     (hell Teal, dunkel Lila; Hauch-Grund wie gewaehlte Zeilen), fett, Ziffern gleich breit - gilt fuer ALLE Uhrzeit-Zeilen (.zt9: Warm-up,
     Morgens, Abends; Geburtstage hat keine). Knopf-Zeilen "Anrufen"/"Nachricht" leicht (.leicht9): ohne Kachel, flacher, normale Schrift. */
  /* v1794 (Harun es2: "die 18 sieht jetzt richtig scheisse aus ... die Icons fuer Anrufen und Nachricht waren gut ... vorgegebene Nachricht als
     Menuepunkt extrem scheisse"): Chip und leichte Knopf-Zeilen ZURUECKGENOMMEN (Stand v1790). Zeile "Vorgegebene Nachricht" ausgeblendet,
     Funktion bleibt (Standard an), Darstellung wird erst nach Rueckfrage neu gebaut. Regeln: docs/EINSTELLUNGEN_DESIGN.md */
  /* (Harun es14 / Wahl es2g): #warmVorlZeile9 ist wieder sichtbar - jetzt als Schalter-Zeile "Vorlage" mit Kachel (Baukasten 2.1), darunter "Vorlage lesen" */
  /* (Harun es14: "Vor einem Termin waere ja eine Gruppe ... nur durch einen Teiler getrennt"): #warmKarte9 steckt in der neuen Fassung IN #esKarteVor9
     (esReihe9) hinter dem Teiler #vorTrenn9 - eigene Kartenoptik dort aus, sonst Karte in Karte */
  /* (Harun es17): Erklaer-Untertitel nur noch bei den Hauptzeilen Morgens, Abends, Termin-Warm-up (.es-sub9) - alle anderen weg */
  #view-set #sub-erinnerung.es-neu9 .set-row > .tx > span:not(.es-sub9){display:none !important}
  /* (Harun es-neu9, A7): To-Do-Symbol (Strich-SVG der Fussleiste) in der Kachel weiss wie die gefuellten Symbole */
  #view-set .set-row > .ic svg[fill="none"]{fill:none}
  #view-set .es-neu9 #esKarteVor9 > #warmKarte9{background:none;border:0;border-radius:0 !important;box-shadow:none;padding:0;margin:0}
  /* (Harun es10, v1802: "abends nicht angewaehlt ... wird komplett angezeigt und nicht ausgegraut"): Grundsatzregel erweitert - alles, was AUS
     oder nicht gewaehlt ist, steht auf 50 % (Kachel + Text). Der eigene Schalter bleibt voll sichtbar; Unterzeilen unter einem ausgeschalteten
     Kopf ebenfalls 50 %. Alles bleibt antippbar (nur Deckkraft, keine pointer-events). Gesetzt je Blatt-Element (kein Verschachteln = kein 25 %). */
  #view-set .es-neu9 .set-row:not([aria-disabled]):has(> label.switch input:not(:checked)) > :not(label.switch){opacity:.5}
  #view-set .es-neu9 .set-row:has(> label.switch input:not(:checked)) + :is(.unter9,.warm-unter9,#typRemUnter9) :is(.set-row,.tr-zeile9,.ms-liste9 > button,.zp9,.vorl-voll9,.ein9) > *{opacity:.5}
  #view-set .es-neu9 .chip9:not(.on){opacity:.5}
  /* (Harun es10, v1802: "Ueberblick am Tag oder Termin-Warm-Up sollen groesser geschrieben werden ... Erklaerungen brauchen wir nicht"):
     Abschnitts-Ueberschriften als echte Titel (16 px / 700, normale Schreibung, Text-Farbe), Zusatz .set-notiz entfaellt */
  #view-set .es-neu9 .set-sekt{font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin:26px 4px 8px}
  #view-set .es-neu9 > .set-sekt:first-child{margin-top:8px}
  #view-set .es-neu9 .set-sekt .set-notiz{display:none}
  #view-set .es-neu9 #warmKarte9{margin-top:-4px}
  /* (Harun es11 Variante B / es2e, v1802): Wert-Zeilen .wz9 ("Erinnern", je Terminart, "Vorlage") - Wert grau rechts, einzeilig; Liste in der Zeile */
  #view-set .es-neu9 .wz9{cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* (Harun es27: "Entschlacken"): eine Zeile je Entscheidung, hoechstens Zeile + Aufklappen. Ausgeblendet (nur neue Fassung): Unterbloecke, deren Inhalt
     in die Hauptzeile bzw. in "Knoepfe auf den Karten" gewandert ist; "Terminart hinzufuegen" (alle Terminarten stehen schon in der Liste). */
  #sub-erinnerung.es-neu9 :is(#remKopf9,#briefUnter9,#abendUnter9,#warmUnter9,#warmDienst9,#gbUnter9,#gbHeuteUnter9,#typRemNeu9,#typRemZeile9 > label.switch){display:none !important}
  #sub-erinnerung.es-neu9 :is(#remUnter9,#typRemUnter9){margin:0 !important;padding:0 !important;border:0 !important}
  #sub-erinnerung.es-neu9 #baKlappe9{margin:0 0 4px 14px;padding-left:12px;border-left:2px solid var(--line)}   /* (Harun ba1): wie #gbQuellen9 */
  #sub-erinnerung.es-neu9 #gbQuellen9{margin:0 0 4px 14px;padding-left:12px;border-left:2px solid var(--line)}
  /* (Harun es28: "Das sieht viel zu kompliziert aus ... komplett rausnehmen. In Zukunft ... bei der Erstellung des Termins direkt ein. Diesen Gedanken
     erst mal parken."): "Zusaetzlich je Terminart" samt Liste entfaellt in der neuen Fassung - gespeicherte typ_stunden bleiben am Server und wirken weiter. */
  #sub-erinnerung.es-neu9 :is(#typRemZeile9,#typRemUnter9){display:none !important}
  /* (Harun es29: "Natuerlich einheitliche Groessen!"): EINE Kachelgroesse in der neuen Fassung - auch in Unterbloecken 30 x 30 / Symbol 18
     (vorher .unter9/.warm-unter9 = 26 px, z. B. "Standard-Erinnerung" in #remUnter9 kleiner als "Morgens"). Kopf .ic-titel bleibt 34 px (Doku 2.3). */
  #view-set .es-neu9 :is(.unter9,.warm-unter9) .ic{width:30px !important;height:30px !important}
  #view-set .es-neu9 :is(.unter9,.warm-unter9) .ic svg{width:18px;height:18px}
  #view-set .es-neu9 .zs9{cursor:pointer;-webkit-tap-highlight-color:transparent}
  #view-set .es-neu9 .zs9 > .wt9{margin-left:auto;flex:0 0 auto;color:var(--muted);font-size:.86rem;font-weight:500;white-space:nowrap;padding-right:10px}
  #view-set .es-neu9 .zs9 > .tx{flex:1 1 auto}
  #view-set .es-neu9 #warmMsgZeile9{cursor:pointer}
  #view-set .es-neu9 #warmMsgZeile9 > .wahl9{padding-right:10px}
  #view-set .es-neu9 #warmMsgZeile9 > .wahl9 + label.switch{margin-left:0 !important}
  #view-set .es-neu9 .wz9 .wt9{margin-left:auto;flex:0 1 auto;min-width:0;max-width:62%;color:var(--muted);font-size:.86rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
  #view-set .es-neu9 .wz9 > .tx{flex:0 0 auto}
  #view-set .es-neu9 #remChips9.ms-liste9:not([hidden]){display:block;padding:0;margin:0 0 4px}
  #view-set .es-neu9 :is(#remChips9,.tr-liste9) button{padding-left:40px}
  #view-set .es-neu9 .ms-liste9 button .x9{margin-left:auto;color:var(--muted);font-weight:500;font-size:.8rem}
  #view-set .es-neu9 .ms-liste9 button .x9 + .hk9{margin-left:10px}
  #view-set .es-neu9 .ms-liste9 button.eig9{color:var(--accent)}
  #view-set .es-neu9 .ms-liste9 button.eig9:not(.on) > *{opacity:1}   /* Handlung, keine Option: nicht abblenden */
  #view-set .es-neu9 .vorl-voll9{white-space:pre-wrap;font-size:.84rem;line-height:1.45;color:var(--ink);padding:0 2px 10px}
  /* (Harun es-neu9, es20): Knopf "Anrufen"/"Nachricht" samt Unterzeilen haengen unter "Karte in Heute" (gleiche Linie wie .unter9); Karte aus = zu */
  #view-set .es-neu9 .warm-heute-unter9{margin:0 0 4px 14px;padding-left:12px;border-left:2px solid var(--line)}
  /* (Harun es20): Mehrfachwahl-Listen ("Erinnern", je Terminart) - Kaestchen links (abgerundetes Quadrat, 4 px), Haken rechts entfaellt dort */
  #view-set .es-neu9 .kb9{width:18px;height:18px;flex:0 0 18px;box-sizing:border-box;border:1.5px solid var(--muted);border-radius:4px !important;display:inline-flex;align-items:center;justify-content:center;color:transparent}
  #view-set .es-neu9 .ms-liste9 button.on .kb9{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  #view-set .es-neu9 .kb9 svg{display:block}
  #view-set .es-neu9 :is(#remChips9,.tr-liste9) .hk9{display:none}
  /* (Harun es33: "Push und Karte getrennt waehlbar"): Warm-up am Vortag ohne eigenen Hauptschalter - Wert rechts = Uhrzeit + Stand ("18:00 · Push · Karte" / "Aus"),
     Antippen klappt Uhrzeit, Push und Karte in Heute auf (#warmKlappe9, Linie wie .unter9). "Knoepfe auf den Karten" entfaellt hier (Knopf "⋯" auf den Karten in Heute). */
  #sub-erinnerung.es-neu9 #warmKopf9 > label.switch{display:none !important}
  #view-set .es-neu9 #warmKopf9 > #warmSum9{padding-right:0}
  #sub-erinnerung.es-neu9 :is(#esSekKn9,#esKarteKn9){display:none !important}
  #view-set .es-neu9 .zp9.zk9{display:block;padding:0;margin:0 0 4px 14px;padding-left:12px;border-left:2px solid var(--line)}
  #view-set .es-neu9 .zp9.zk9 > .zpi9{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:2px 2px 6px}
  #view-set .es-neu9 #gbHeuteZeile9 > .tx{flex:0 0 auto}
  /* vf3 (Harun, Prototyp Verfuegbarkeit v3, freigegeben): Zeitfeld "Start hh:mm" | "Ende hh:mm" - volle Breite von Kachel-links bis Schalter-rechts,
     36 px, 1 px var(--line), 4 px Ecken, 8 px Abstand; Antippen oeffnet die App-Uhr (TSPicker.zeit). "+ Zeitraum" = gestrichelte Leerzeile gleicher Hoehe,
     "Auf alle aktiven Tage uebernehmen" = sekundaerer Akzent-Knopf volle Breite, 16 px Abstand. Gleiches Feld fuer die Uhrzeit in Benachrichtigungen (.zp9 .zw9). */
  #sub-zeiten.vf-neu9 > :not(#vfSeite9){display:none !important}
  #sub-zeiten:has(#buchRegelnBox.hide) #vfAusn9{display:none !important}
  :is(#vfSeite9,#sub-aufgplan) [hidden]{display:none !important}
  #view-set .es-neu9 .vf-tag9{display:flex;flex-direction:column;gap:8px;padding:4px 2px 14px}
  #view-set .es-neu9 .vfiv9{display:flex;gap:8px}
  #view-set .es-neu9 .vfzf9{flex:1 1 0;min-width:0;position:relative;display:flex}
  #view-set .es-neu9 :is(.vfzk9,.vfneu9,.vfkopie9,.zp9 .zw9){height:36px;border-radius:4px !important;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
  #view-set .es-neu9 :is(.vfzk9,.zp9 .zw9){flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;border:1px solid var(--line);background:none;color:var(--ink)}
  #view-set .es-neu9 :is(.vfzk9,.zp9 .zw9) small{font-size:.75rem;font-weight:500;color:var(--muted)}
  #view-set .es-neu9 :is(.vfzk9,.zp9 .zw9) b{font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums}
  #view-set .es-neu9 .vfweg9{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:none;color:var(--muted);font:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:0;border-radius:999px !important;opacity:.75}
  #view-set .es-neu9 .vfneu9{width:100%;margin:0;border:1px dashed color-mix(in srgb, var(--muted) 55%, transparent);background:none;color:var(--muted);font-size:.84rem;font-weight:600;padding:0}
  /* vf4 (Harun: "mach doch lieber die Zahl neben dem Toggle klickbar und oeffnet dann den TSPicker ... bei von-bis loesen wir das mit 2 Boxen" ·
     "die alte Bedienung, wo man direkt was reintippen konnte, bei Verfuegbarkeit effektiver"): Zeit-Box .zbox9 - EIN Baustein fuer Verfuegbarkeit und
     Benachrichtigungen. 32 px, Rand 1 px var(--line), 4 px Ecken, Uhrzeit 600 + kleines Uhr-Symbol. Handy: Antippen = App-Uhr (TSPicker.zeit).
     Rechner (hover + feiner Zeiger): Uhrzeit direkt eintippen (.zin9), Uhr-Symbol (.zuhr9) oeffnet die App-Uhr; ungueltig -> alter Wert + roter Rand. */
  #view-set .es-neu9 .zbox9{display:inline-flex;align-items:center;justify-content:space-between;gap:4px;width:80px;height:32px;box-sizing:border-box;padding:0 5px 0 9px;margin:0;border:1px solid var(--line);border-radius:4px !important;background:none;color:var(--ink);font:inherit;font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:0 0 auto;vertical-align:middle}
  #view-set .es-neu9 .zbox9 > b{font-weight:600}
  #view-set .es-neu9 .zbox9 svg{width:13px;height:13px;color:var(--muted);flex:0 0 auto;display:block}
  #view-set .es-neu9 .zbox9:focus-within{border-color:var(--accent)}
  #view-set .es-neu9 .zbox9.zfehl9{border-color:#e5484d}
  #view-set .es-neu9 .zin9{width:5.2ch;flex:0 0 auto;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;font-variant-numeric:tabular-nums;padding:2px 0;margin:0;outline:none;cursor:text;border-radius:3px !important}
  #view-set .es-neu9 .zuhr9{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;border:0;background:none;color:var(--muted);padding:0;cursor:pointer;border-radius:4px !important}
  #view-set .es-neu9 .zuhr9:hover svg{color:var(--ink)}
  #view-set .es-neu9 .set-row:has(> label.switch input:not(:checked)) .zbox9{pointer-events:none}
  /* vf4: Verfuegbarkeit - Tageszeile = Kachel · Tag · Box – Box · Schalter; weitere Zeitraeume als Zeile darunter (Boxen buendig, × in der Schalter-Spalte);
     "+ Zeitraum" / "Auf alle Tage" ruhig: am Rechner in der Zeile beim Ueberfahren, am Handy nach Tipp auf den Tag darunter */
  #view-set .es-neu9 .vf-zeile9 > .tx + *{margin-left:auto}
  #view-set .es-neu9 .vf-zeile9 :is(.vf-lang9,.vf-kurz9){font-style:normal}
  #view-set .es-neu9 .vf-zeile9 .vf-kurz9{display:none}
  @media (max-width:520px){ #view-set .es-neu9 .vf-zeile9 .vf-lang9{display:none} #view-set .es-neu9 .vf-zeile9 .vf-kurz9{display:inline} }   /* Handy: "Mo" wie die alte Seite, damit Box – Box + Schalter passen */
  #view-set .es-neu9 .vf-paar9{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  #view-set .es-neu9 .vf-st9{color:var(--muted);font-size:.8rem;font-weight:500}
  #view-set .es-neu9 .vf-zr9{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:0 2px 8px}
  #view-set .es-neu9 .vf-slot9{width:48px;flex:0 0 48px;display:flex;justify-content:center}
  #view-set .es-neu9 .vf-slot9 .vfweg9{position:static;transform:none}
  #view-set .es-neu9 .vf-tagb9:has(> .set-row input[data-tagan9]:not(:checked)) .vf-zr9 > *{opacity:.5;pointer-events:none}
  /* vf5 (Harun: "Bei Aus die Boxen komplett ausblenden – bei An erstmal Dropdown anzeigen mit ‚+ Zeitraum' und ‚Auf alle aktiven Tage uebernehmen',
     aber zweizeilig, groesserer Text!"): Tag aus -> Boxen, weitere Zeitraeume und × weg (Zeile selbst 50 % wie jede Aus-Zeile);
     Tag an / Tipp auf den Tag -> Klappe darunter mit zwei Zeilen volle Breite, Schrift 15 px wie die Zeilen (Handy und PC gleich, kein Ueberfahren) */
  #view-set .es-neu9 .vf-tagb9:has(> .set-row input[data-tagan9]:not(:checked)) :is(.vf-paar9,.vf-mehr9){display:none}
  #view-set .es-neu9 .vf-tagb9:has(> .set-row input[data-tagan9]:not(:checked)) .vf-zeile9 > label.switch{margin-left:auto}   /* Schalter bleibt rechts */
  #view-set .es-neu9 .vf-akt9{display:flex;flex-direction:column;gap:8px;padding:2px 2px 12px}
  #view-set .es-neu9 .vf-lk9{display:block;width:100%;height:40px;box-sizing:border-box;margin:0;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:15px;font-weight:600;padding:0 14px;cursor:pointer;border-radius:4px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent}
  /* fz1 (Harun 15.10.): Fokuszeiten (Aufgaben planen) - Zeile = Kachel · Wochentage als Chips (.chip9) · Box – Box (.vf-paar9) · × (.vf-slot9);
     am Handy rutschen die Boxen in die zweite Zeile. Nicht gewaehlte Tage 50 % (Grundsatzregel). "+ Fokuszeit" wie "+ Zeitraum" (.vf-lk9). */
  #view-set .es-neu9 .fz-zeile9{flex-wrap:wrap;row-gap:8px}
  #view-set .es-neu9 .fz-tage9{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0}
  #view-set .es-neu9 .fz-tage9 .chip9{min-width:34px;text-align:center}
  #view-set .es-neu9 .fz-tage9 .chip9:not(.on){opacity:.5}
  #view-set .es-neu9 .fz-zeile9 > .vf-paar9{margin-left:auto}
  #view-set .es-neu9 .fz-neu9{padding:6px 2px 10px}
  #view-set .es-neu9 .vf-lk9[data-kopie9]{border-color:color-mix(in srgb, var(--accent) 35%, var(--line));background:color-mix(in srgb, var(--accent) 12%, var(--card));color:var(--accent);font-weight:700}
  /* vf4: Benachrichtigungen - Uhrzeit ist die Box rechts in der Zeile (Morgen-Briefing, Abend-Vorschau, Warm-up am Vortag); keine Uhrzeit-Klappe mehr */
  #sub-erinnerung.es-neu9 :is(.zp9[data-zpf9="briefUm"],.zp9[data-zpf9="abendUm"],#warmKlappe9 > .zpi9){display:none !important}
  #view-set #sub-erinnerung.es-neu9 :is(#esMorgen9,#esAbend9) > .wt9,#view-set #sub-erinnerung.es-neu9 #warmSum9{display:flex;align-items:center;gap:8px;padding-right:12px}
  #view-set #sub-erinnerung.es-neu9 #warmSum9{padding-right:0}
  #view-set .es-neu9 .vfkopie9{width:100%;margin:8px 0 0;border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));background:color-mix(in srgb, var(--accent) 12%, var(--card));color:var(--accent);font-size:.84rem;font-weight:700;padding:0}
  #view-set .es-neu9 .zs9[data-tag9] > .tx{flex:0 0 auto}
  #view-set .es-neu9 .zs9[data-tag9] > .wt9{flex:1 1 auto;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis}
  #view-set .es-neu9 .vf-bis9{margin-left:auto;color:var(--muted);font-size:.8rem;font-weight:500;white-space:nowrap;padding-right:10px}
  #view-set .es-neu9 #vfKarteAusn9 > .set-row{cursor:pointer;-webkit-tap-highlight-color:transparent}
  #view-set .es-neu9 .vf-status9{display:flex;align-items:center;gap:10px;padding:0 4px;font-size:.74rem;color:var(--muted)}
  /* kb1 (Harun 10.10., Kalender & Buchungen, EINSTELLUNGEN_DESIGN.md 1d): neue Fassung NUR Betreiber (.kb9 + .es-neu9 per kbModus9).
     Ohne .kb9 bleibt jede Seite wie bisher (.kb-neu9 aus); mit .kb9 ist die alte Fassung (.kb-alt9) aus. Abschnitt "Unternehmen" gilt fuer alle. */
  .set-sekt .unt-name9{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}   /* kb1 (Harun 10.10.: "nebeneinander ... PKM ohne Unternehmensgruppe"): eine Zeile "Unternehmen – PKM" */
  .set-sekt .unt-name9:not(:empty)::before{content:" \2013  "}
  #view-set :not(.kb9) > .kb-neu9{display:none !important}
  #view-set .kb9 .kb-alt9{display:none !important}
  #view-set .kb9 [hidden]{display:none !important}
  #view-set .kb9 > .kb-neu9 > .set-sekt:first-child{margin-top:8px}
  /* Regel a: EINE Statuszeile, grau, einzeilig mit Auslassung */
  #view-set .kb9 .kb-status9{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 2px 6px}
  #view-set .kb9 .kb-weg-text9,#view-set .kb9 .kb-weg-feld9,#view-set .kb9 .fi{display:none !important}
  /* Baukasten-Zeile als Knopf / Beschriftung (ganze Zeile antippbar) */
  #view-set .kb9 .kb-z9{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;border:0;background:none;color:var(--ink);font:inherit;text-align:left;padding:9px 2px;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #view-set .kb9 .kb-z9 > .tx{flex:1 1 auto;min-width:0}
  #view-set .kb9 .kb-z9 > .wt9{margin-left:auto;flex:0 1 auto;min-width:0;max-width:55%;color:var(--muted);font-size:.86rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
  #view-set .kb9 .kb-z9 > .chev{color:var(--muted);font-size:1.05rem;flex:0 0 auto}
  #view-set .kb9 .kb-z9 > label.switch{margin-left:auto;flex:0 0 auto}
  #view-set .kb9 .kb-z9.kb-aus9 > :not(.chev){opacity:.5}
  #view-set .kb9 .kb-z9[aria-busy="true"]{cursor:default}
  /* Regel d: "+ Termintyp" / "+ Veranstaltung" als gestrichelte Leerzeile (wie "+ Zeitraum") */
  #view-set .kb9 .kb-neu-z9{display:block;width:100%;height:40px;box-sizing:border-box;margin:6px 0 4px;border:none;border-radius:4px !important;background:var(--accent);color:#fff;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* Regel b: EIN Akzent-Knopf je Block (primaer), Zerstoerendes als rote Text-Zeile zuletzt, Nebenhandlungen ruhig umrandet */
  #view-set .kb9 .kb-prim9{display:block;width:100%;height:40px;box-sizing:border-box;margin:8px 0 4px;border:0;border-radius:4px !important;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
  #view-set .kb9 .kb-prim9[disabled]{opacity:.5;cursor:default}
  #view-set .kb9 .kb-weg9{display:block;width:100%;box-sizing:border-box;margin:2px 0 0;padding:10px 2px;border:0;border-top:1px solid var(--line);border-radius:0 !important;background:none;color:var(--rot);font:inherit;font-size:.9rem;font-weight:600;text-align:left;cursor:pointer}
  #view-set .kb9.kb9 :is(#typLinks,#vaLinks) .btn.mini{background:none !important;border:1px solid var(--line);border-radius:4px !important;color:var(--ink) !important;font-weight:600}
  #view-set .kb9 :is(#typLinks,#vaLinks) .btn.mini[disabled]{color:var(--muted) !important}
  #view-set .kb9 :is(#typLinks,#vaLinks) .set-row{padding:7px 2px !important}
  /* Regel c: Formulare (Veranstaltung, eigener Termintyp) - Name Box volle Breite, Werte als Box rechts, Einfachwahl in der Zeile */
  #view-set .kb9 .kb-fkopf9{font-size:.9rem;font-weight:700;padding:12px 2px 8px;border-top:1px solid var(--line);margin-top:6px}
  #view-set .kb9 .kb-box9{height:32px;box-sizing:border-box;border:1px solid var(--line);border-radius:4px !important;background:none;color:var(--ink);font:inherit;font-size:.88rem;font-weight:600;padding:0 9px;margin:0;outline:none}
  #view-set .kb9 .kb-box9:focus{border-color:var(--accent)}
  #view-set .kb9 .kb-box9[type=number]{width:80px;text-align:right;-moz-appearance:textfield;appearance:textfield}
  #view-set .kb9 .kb-box9[type=number]::-webkit-inner-spin-button,#view-set .kb9 .kb-box9[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  /* Profil (Mein Buero/Online-Meeting): Speichern als kb-box9-Knopf, ruhig/umrandet statt gefuellt - gesperrt bis geaendert (konto.start.js) */
  #view-set .kb9 button.kb-box9{cursor:pointer;font-weight:700;padding:0 14px}
  #view-set .kb9 button.kb-box9[disabled]{opacity:.5;cursor:default}
  #view-set .kb9 .kb-voll9{display:block;width:100%;height:40px;font-size:.92rem;margin:0 0 6px}
  /* va2: Ort = Textbox rechts, Beschreibung = Feld volle Breite unter ihrer Zeile (wie "Beschreibung fuer den Kunden") */
  #view-set .kb9 .kb-ort9{width:min(220px,48vw);text-align:left}
  #view-set .kb9 .kb-text9{display:block;width:100%;height:auto;min-height:84px;padding:8px 9px;margin:0 0 8px;resize:vertical;font-weight:500;line-height:1.45}
  #view-set .kb9 .kb-boxw9{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
  #view-set .kb9 .kb-boxw9 small{color:var(--muted);font-size:.8rem;font-weight:500}
  #view-set .kb9 .kb-swatch9{margin-left:auto;width:30px;height:22px;border-radius:4px !important;flex:0 0 auto;border:1px solid var(--line)}
  #view-set .kb9 .kb-pal9:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px 10px 44px}
  #view-set .kb9 .kb-pal9 button{width:28px;height:28px;flex:0 0 auto;padding:0;border:1px solid var(--line) !important;border-radius:4px !important;cursor:pointer}
  #view-set .kb9 .kb-form9 .ms-liste9 button{padding-left:44px}
  #view-set .kb9 .kb-fuss9{display:flex;justify-content:flex-end;min-height:18px;padding:2px}
  #view-set .kb9 .kb-gesp9{font-size:.74rem;color:var(--muted)}
  /* Termintyp-Editor (fe-row aus feZeile): Abschnitte wie .set-sekt, Zeile = Beschriftung links / Box rechts, Schalter statt Kaestchen */
  #view-set #sub-typedit.kb9 .typstep > .sekt{font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);padding:22px 2px 6px}
  #view-set #sub-typedit.kb9 .typstep:first-of-type > .sekt{padding-top:6px}
  #view-set #sub-typedit.kb9 .fe-duo{display:block;border-top:0}
  #view-set #sub-typedit.kb9 .fe-duo .fe-row label{flex-direction:row;align-items:center;gap:10px}
  #view-set #sub-typedit.kb9 .fe-row{border-top:0;padding:7px 2px}
  /* kb1 Nachzug: Kachel vor jeder Feldzeile - Mass wie .kb-z9 im Veranstaltungs-Editor (30 px, 4 px, Abstand 12 px, Zeile 9 px) */
  #view-set #sub-typedit.kb9 .fe-row:has(> label > .kb-ic9){padding:9px 2px}
  #view-set #sub-typedit.kb9 .fe-row label > .kb-ic9{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:4px !important;background:var(--ic);color:#fff;border:0;margin-right:2px}
  :root[data-theme="dark"] #view-set #sub-typedit.kb9 .fe-row label > .kb-ic9{color:#15171c}
  #view-set #sub-typedit.kb9 .fe-row label > .kb-ic9 svg{width:18px;height:18px;display:block}
  #view-set #sub-typedit:not(.kb9) .kb-ic9{display:none}
  #view-set #sub-typedit.kb9 .fe-row label{font-size:.9rem;font-weight:600}
  #view-set #sub-typedit.kb9 .fe-row :is(input[type=text],input[type=number],textarea){background:none;border:1px solid var(--line);border-radius:4px !important;color:var(--ink);font-weight:600}
  #view-set #sub-typedit.kb9 .fe-row :is(input[type=number]){height:32px;box-sizing:border-box;text-align:right}
  #view-set #sub-typedit.kb9 .fe-unit input[type=number],#view-set #sub-typedit.kb9 .fe-duo .fe-unit input[type=number]{width:104px}
  #view-set #sub-typedit.kb9 .fe-duo .fe-unit{width:auto}
  #view-set #sub-typedit.kb9 .kb-name9 > label > .fe-lab{display:none !important}
  #view-set #sub-typedit.kb9 .fe-row label > .fe-lab{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  #view-set #sub-typedit.kb9 .fe-row label > input[type=number]{width:104px;flex:0 0 auto}
  #view-set .kb9 #rowMsk + .srow{border-top:0 !important}
  #view-set #sub-typedit.kb9 .kb-name9 input[type=text]{height:40px;margin-top:0;font-size:.92rem}
  #view-set #sub-typedit.kb9 .fe-row input[type=checkbox]{-webkit-appearance:none;appearance:none;width:44px;height:26px;flex:0 0 auto;margin:0;border-radius:999px !important;background:color-mix(in srgb, var(--muted) 45%, transparent);position:relative;cursor:pointer;transition:background .2s}
  #view-set #sub-typedit.kb9 .fe-row input[type=checkbox]::before{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50% !important;background:#fff;transition:transform .2s}
  #view-set #sub-typedit.kb9 .fe-row input[type=checkbox]:checked{background:var(--accent)}
  #view-set #sub-typedit.kb9 .fe-row input[type=checkbox]:checked::before{transform:translateX(18px)}
  #view-set #sub-typedit.kb9 .kb-farbe9 input[data-f],#view-set #sub-typedit.kb9 .kb-farbe9 .fv-probe{display:none !important}
  #view-set #sub-typedit.kb9 .kb-farbe9 input[type=color]{width:30px !important;height:22px !important;padding:0 !important;border-radius:4px !important}
  #view-set #sub-typedit.kb9 .kb-farbe9 > label{cursor:pointer}
  #view-set #sub-typedit.kb9 .kb-pal9:not([hidden]){display:flex !important;flex-wrap:wrap !important;gap:8px !important;padding:8px 0 2px}
  #view-set #sub-typedit.kb9 .kb-pal9 button{border-radius:4px !important}
  #view-set #sub-typedit.kb9 #typFelderBox > .set-row{flex-direction:column;align-items:stretch;gap:6px}
  #view-set #sub-typedit.kb9 #typEditSpeichern{order:-1;margin:8px 0 0 !important;height:40px;border-radius:4px !important;font-size:.9rem}
  #view-set #sub-typedit.kb9 #typEditStatus{text-align:right}
  /* kb2 (Harun 10.10.): Vorschau-Karte oben im Termintyp-Editor - Masse aus buchen-kern.css (#booking-links .card-horizontal:
     Radius 12, Polster 10/30/10/10, Abstand 10, Bild 54 px mit -8 px Rand, Titel .9rem/800, Dauer .78rem/600 75 %), Farbe wie die
     Veranstaltungs-Karte der Buchen-Seite (Rand 1 px Artfarbe, Verlauf 135deg 22 % -> 6 %). Eingaben randlos = sehen aus wie der Text. */
  #view-set #sub-typedit.kb9 .kb-vk9{padding:4px 0 6px}
  /* kb2b: Vorschau ganz unten, nur ansehen - Ueberschrift wie die Abschnitte (.typstep > .sekt) */
  #view-set #sub-typedit.kb9 .kb-vsekt9{font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);padding:22px 2px 8px}
  #view-set #sub-typedit.kb9 .kb-vbild9{cursor:default}
  /* va2d: i-Knopf (Erklaerung) - ruhig, 20 px Kreis */
  .kb-info9{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50% !important;border:1.5px solid var(--muted);color:var(--muted);font:700 .66rem Inter,system-ui,sans-serif;vertical-align:middle}
  .kb-info9:hover{color:var(--accent);border-color:var(--accent)}
  /* va2e (Harun 11.10.: "wir haben hier das i verschoben"): i bleibt in der Zeile neben der Beschriftung, kein Umbruch darunter; gleiche Groesse wie die i-Spalte (15 px) */
  .kb-form9 .tx:has(.kb-info9){display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
  .kb-form9 .kb-info9{width:15px;height:15px;font-size:.58rem;border-width:1px;opacity:.55;margin-left:0}
  .kb-form9 .kb-info9:hover{opacity:1}
  /* kb3 (Harun 10.10.): "So sieht es aus" - drei Schritte, je Vorschau oben + Felder darunter, als zusammenhaengender Weg */
  #view-set #sub-typedit.kb9 .kb-st9{position:relative;padding:0 0 18px 34px}
  #view-set #sub-typedit.kb9 .kb-st9:not(:last-child)::before{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:2px;background:var(--line);border-radius:2px}
  #view-set #sub-typedit.kb9 .kb-stk9{display:flex;align-items:center;gap:10px;margin:0 0 10px -34px;min-height:24px}
  #view-set #sub-typedit.kb9 .kb-stk9 i{width:24px;height:24px;flex:0 0 auto;border-radius:50% !important;background:var(--vk,var(--accent));color:#fff;font-style:normal;font-size:.76rem;font-weight:800;display:flex;align-items:center;justify-content:center}
  #view-set #sub-typedit.kb9 .kb-stk9 b{font-size:.92rem;font-weight:700;color:var(--ink)}
  #view-set #sub-typedit.kb9 .kb-stv9{padding:12px;border-radius:10px !important;background:color-mix(in srgb, var(--ink) 4%, transparent);margin:0 0 6px}
  #view-set #sub-typedit.kb9 .kb-stf9 > .fe-row{padding-left:0;padding-right:0}
  #view-set #sub-typedit.kb9 .kb-vk9 .kb-vkarte9{margin:0}
  #view-set #sub-typedit.kb9 .kb-vph9{background:color-mix(in srgb, var(--accent) 16%, transparent);border-radius:3px !important;padding:0 3px}
  #view-set #sub-typedit.kb9 .kb-vkal9{display:flex;align-items:flex-start;gap:10px}
  #view-set #sub-typedit.kb9 .kb-vkz9{flex:0 0 auto;font-size:.72rem;font-weight:600;color:var(--muted);padding-top:6px;width:36px}
  #view-set #sub-typedit.kb9 .kb-vkb9{flex:1 1 auto;min-width:0;border-left:3px solid var(--vk);background:color-mix(in srgb, var(--vk) 20%, transparent);border-radius:4px !important;padding:6px 9px}
  #view-set #sub-typedit.kb9 .kb-vkb9 b{display:block;font-size:.84rem;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #view-set #sub-typedit.kb9 .kb-vkb9 small{display:block;font-size:.72rem;color:var(--muted);margin-top:1px}
  #view-set #sub-typedit.kb9 .kb-vpf9{font-weight:800;color:var(--vk)}
  #view-set #sub-typedit.kb9 .kb-vnotiz9{border-radius:8px !important;background:var(--card,var(--bg));border:1px solid var(--line);padding:10px 12px}
  #view-set #sub-typedit.kb9 .kb-vnk9{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  #view-set #sub-typedit.kb9 .kb-vnt9{font-size:.82rem;line-height:1.45;color:var(--ink)}
  #view-set #sub-typedit.kb9 .kb-vnt9.leer9{color:var(--muted)}
  /* kb3: Praefix nach Regel 1d c - Bezeichnung links, kleine Box rechts (vorher Bezeichnung rechts, Box darunter) */
  #view-set #sub-typedit.kb9 .fe-row.kb-pfx9{display:flex;align-items:center;justify-content:space-between;gap:10px}
  #view-set #sub-typedit.kb9 .fe-row.kb-pfx9 > label{flex:1 1 auto;display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left}
  #view-set #sub-typedit.kb9 .fe-row.kb-pfx9 #typPraefix{width:72px !important;height:32px;box-sizing:border-box;text-align:center;background:none;border:1px solid var(--line);border-radius:4px !important;color:var(--ink);font-weight:700}
  /* fp2 Paket 2: Abschnitt "Im Kalender" (Prototyp termintyp-calendly.html) - Kuerzel / Titel als Chip-Feld / Beschreibung */
  #view-set #sub-typedit.kb9 .ph-box,#view-set #sub-typedit.kb9 .kb-src9{display:none !important}
  #view-set #sub-typedit.kb9 .kb-ksekt9{font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);padding:22px 2px 6px}
  #view-set #sub-typedit.kb9 .fe-row.kb-kz9 > label{display:flex;flex-direction:row;align-items:center;gap:10px;justify-content:flex-start;text-align:left;margin:0}
  #view-set #sub-typedit.kb9 .fe-row.kb-kz9.kb-pfx9{display:flex;align-items:center}
  #view-set #sub-typedit.kb9 .kb-lab9{flex:0 1 auto;min-width:0;display:block;line-height:1.25}
  #view-set #sub-typedit.kb9 .kb-zhin9{display:block;font-size:.74rem;font-weight:500;color:var(--muted);margin-top:1px}
  #view-set #sub-typedit.kb9 .kb-i15{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50% !important;border:1px solid var(--muted);color:var(--muted);font:700 .58rem Inter,system-ui,sans-serif;opacity:.55}
  #view-set #sub-typedit.kb9 .kb-i15:hover{opacity:1;color:var(--accent);border-color:var(--accent)}
  #view-set #sub-typedit.kb9 .kb-pfx9 #typPraefix{text-transform:uppercase;font-weight:800;margin-left:auto}
  #view-set #sub-typedit.kb9 .kb-phk9n{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;margin-left:auto;padding:4px 9px;border-radius:4px !important;border:none;height:30px;font-size:.78rem;font-weight:600;color:#fff;background:var(--accent);white-space:nowrap}
  #view-set #sub-typedit.kb9 .kb-tt9{padding-bottom:4px}
  #view-set #sub-typedit.kb9 .kb-tfeld9,#view-set #sub-typedit.kb9 .kb-nbox9,#view-set #sub-typedit.kb9 .kb-kz9 > .kb-phm9{margin:8px 0 0 42px}
  #view-set #sub-typedit.kb9 .kb-tfeld9{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:44px;box-sizing:border-box;border:1px solid var(--line);border-radius:4px !important;padding:6px 8px;cursor:text}
  #view-set #sub-typedit.kb9 .kb-tfeld9:focus-within{border-color:var(--accent)}
  #view-set #sub-typedit.kb9 .kb-toks9{display:contents}
  #view-set #sub-typedit.kb9 .kb-tpfx9{display:inline-flex;align-items:center;color:#fff;font-weight:800;font-size:.78rem;border-radius:4px !important;padding:3px 7px;letter-spacing:.03em}
  #view-set #sub-typedit.kb9 .kb-tpfx9[hidden]{display:none}
  #view-set #sub-typedit.kb9 .kb-tok9{display:inline-flex;align-items:center;gap:4px;background:var(--accent);color:#fff;border-radius:4px !important;padding:3px 7px;font-size:.82rem;font-weight:700;user-select:none}
  #view-set #sub-typedit.kb9 .kb-tok9 button{all:unset;cursor:pointer;opacity:.8;font-size:.8rem;color:#fff}
  #view-set #sub-typedit.kb9 .kb-tok9.txt{background:none;color:var(--ink);padding:3px 0;font-weight:600}
  #view-set #sub-typedit.kb9 .fe-row .kb-ttxt9{flex:1 1 90px;min-width:90px;border:0 !important;background:none;outline:none;padding:3px 0;height:auto;font:inherit;font-size:.86rem;color:var(--ink)}
  #view-set #sub-typedit.kb9 .kb-nbox9{position:relative}
  #view-set #sub-typedit.kb9 .kb-nbox9 textarea{display:block;width:100%;box-sizing:border-box;padding-bottom:40px;margin:0}
  #view-set #sub-typedit.kb9 .kb-nbox9 .kb-phk9n{position:absolute;right:8px;bottom:10px}
  #view-set #sub-typedit.kb9 .kb-phm9:not([hidden]){display:block;padding:4px 0 2px}
  #view-set #sub-typedit.kb9 .kb-phk9{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted)}
  #view-set #sub-typedit.kb9 .kb-phg9{font-size:.72rem;font-weight:600;color:var(--muted);margin:8px 0 4px}
  #view-set #sub-typedit.kb9 .kb-phc9{display:flex;flex-wrap:wrap;gap:6px}
  /* fp2 Paket 4: Kunde & Daten - feste Angaben als Umschalter Aus | An | Pflicht, Fragen an den Kunden mit Aufklappen in der Zeile */
  #view-set #sub-typedit.kb9 .kb-kd9 .kb-z9,#view-set #sub-typedit.kb9 .kb-fr9 .kb-z9{cursor:default}
  #view-set #sub-typedit.kb9 :is(.kb-kd9,.kb-fr9) .seg{margin-left:auto;flex:0 0 auto}
  #view-set #sub-typedit.kb9 .kb-frk9{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;color:var(--ink);padding:16px 2px 4px}
  #view-set #sub-typedit.kb9 .kb-fr9 button.kb-frz9{cursor:pointer}
  #view-set #sub-typedit.kb9 .kb-frz9[aria-expanded="true"] > .chev{transform:rotate(90deg)}
  #view-set #sub-typedit.kb9 .kb-frfest9 > .wt9{font-size:.78rem}
  #view-set #sub-typedit.kb9 .kb-frauf9{margin:0 0 8px 42px;padding:4px 0 2px}
  #view-set #sub-typedit.kb9 .kb-frart9{flex-wrap:wrap;row-gap:6px}
  #view-set #sub-typedit.kb9 .kb-frart9 .seg{max-width:100%}
  @media (max-width:600px){#view-set #sub-typedit.kb9 .kb-frart9 .seg{display:flex;width:100%}#view-set #sub-typedit.kb9 .kb-frart9 .seg button{flex:1 1 auto;padding:7px 4px;min-width:0}}
  #view-set #sub-typedit.kb9 .kb-fropt9{display:flex;align-items:center;gap:8px;margin:0 0 6px}
  #view-set #sub-typedit.kb9 .kb-fropt9 .kb-box9{flex:1 1 auto;min-width:0}
  #view-set #sub-typedit.kb9 .kb-fropt9 button{all:unset;cursor:pointer;color:var(--muted);font-size:1.1rem;padding:0 6px}
  #view-set #sub-typedit.kb9 .kb-phc9 button{all:unset;box-sizing:border-box;cursor:pointer;padding:4px 9px;border-radius:4px !important;border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--ink)}
  #view-set #sub-typedit.kb9 .kb-phc9 button:hover{border-color:var(--accent);color:var(--accent)}
  /* fp2 Paket 2b (Prototyp entwuerfe/termintyp-calendly.html v4): Abschnitte zum Aufklappen (.sek/.sek-k/.sek-i), einer offen */
  #view-set #sub-typedit.kb9 .sek{background:var(--card);border:1px solid var(--line);border-radius:10px !important;margin:0 0 10px;overflow:hidden}
  #view-set #sub-typedit.kb9 .sek-k{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #view-set #sub-typedit.kb9 :is(.sek-k,.kb-zr9) > .ic{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:4px !important;background:var(--ic);color:#fff}
  :root[data-theme="dark"] #view-set #sub-typedit.kb9 :is(.sek-k,.kb-zr9) > .ic{color:#15171c}
  #view-set #sub-typedit.kb9 :is(.sek-k,.kb-zr9) > .ic svg{width:18px;height:18px;display:block}
  #view-set #sub-typedit.kb9 .sek-k > .tx{flex:1 1 auto;min-width:0}
  #view-set #sub-typedit.kb9 .sek-k b{display:block;font-size:.98rem;font-weight:700;color:var(--ink)}
  #view-set #sub-typedit.kb9 .sek-k small{display:block;font-size:.8rem;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  #view-set #sub-typedit.kb9 .sek-k > .chev{flex:0 0 auto;color:var(--muted);transition:transform .2s}
  #view-set #sub-typedit.kb9 .sek.auf > .sek-k > .chev{transform:rotate(180deg)}
  #view-set #sub-typedit.kb9 .sek-i{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
  #view-set #sub-typedit.kb9 .sek.auf > .sek-i{grid-template-rows:1fr}
  #view-set #sub-typedit.kb9 .sek-i > div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .25s}
  #view-set #sub-typedit.kb9 .sek.auf > .sek-i > div{visibility:visible;transition:visibility 0s}
  #view-set #sub-typedit.kb9 .sek.sofort9 :is(.sek-i,.sek-i > div,.chev){transition:none !important}
  #view-set #sub-typedit.kb9 .sek-in{padding:2px 14px 14px;border-top:1px solid var(--line)}
  #view-set #sub-typedit.kb9 .sek-in > .typstep > .sekt{display:none}
  /* Zeile .z: Kachel · Titel · i (feste Spalte) · Wert 116 px */
  #view-set #sub-typedit.kb9 .fe-row.kb-zr9{display:flex;align-items:center;gap:12px;padding:10px 0 !important;border-top:0}
  #view-set #sub-typedit.kb9 .kb-zr9 > .tx{flex:1 1 auto;min-width:0;font-size:.9rem;font-weight:600;line-height:1.25;color:var(--ink);overflow-wrap:break-word}
  #view-set #sub-typedit.kb9 .kb-zr9 > .kb-i15{margin:0 4px 0 0}
  #view-set #sub-typedit.kb9 .kb-i15.kb-i0{visibility:hidden}
  #view-set #sub-typedit.kb9 .kb-zr9 > .wert{width:116px;flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center}
  #view-set #sub-typedit.kb9 .kb-zr9 .fe-unit{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;height:32px;box-sizing:border-box;border:1px solid var(--line);border-radius:4px !important;padding:0 8px}
  #view-set #sub-typedit.kb9 .kb-zr9 .fe-unit:focus-within{border-color:var(--accent)}
  #view-set #sub-typedit.kb9 .kb-zr9 .fe-unit input[type=number]{flex:1 1 auto;min-width:0;width:auto !important;height:30px;border:0 !important;padding:0 !important;margin:0;background:none;outline:none;text-align:right;font-size:.9rem;font-weight:700}
  #view-set #sub-typedit.kb9 .kb-zr9 .fe-unit .u{position:static;color:var(--muted);font-size:.74rem;flex:0 0 auto}
  #view-set #sub-typedit.kb9 .kb-zr9 .kurz{display:none}
  @media (max-width:480px){#view-set #sub-typedit.kb9 .kb-zr9 > .wert{width:98px}#view-set #sub-typedit.kb9 .kb-zr9 .lang{display:none}#view-set #sub-typedit.kb9 .kb-zr9 .kurz{display:inline}}
  /* Grunddaten: Gruppen mit kleiner Ueberschrift + i */
  #view-set #sub-typedit.kb9 .kb-gr9{padding:12px 0;border-bottom:1px solid var(--line)}
  #view-set #sub-typedit.kb9 .kb-grk9{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
  #view-set #sub-typedit.kb9 .kb-grk9 > .kb-i15{text-transform:none;letter-spacing:0}
  #view-set #sub-typedit.kb9 .kb-kopfz9{display:flex;align-items:center;gap:12px}
  #view-set #sub-typedit.kb9 .kb-zbild9{all:unset;box-sizing:border-box;position:relative;overflow:hidden;width:54px;height:54px;flex:0 0 auto;border-radius:6px !important;cursor:pointer;display:flex;align-items:center;justify-content:center}
  #view-set #sub-typedit.kb9 .kb-zbild9 img{width:100%;height:100%;object-fit:cover;display:block}
  #view-set #sub-typedit.kb9 .kb-zbild9::after{content:"Ändern";position:absolute;left:0;right:0;bottom:0;padding:1px 0;font-size:.58rem;font-weight:700;text-align:center;color:#fff;background:rgba(0,0,0,.45)}
  #view-set #sub-typedit.kb9 .kb-zbild9.leer9{border:1px dashed color-mix(in srgb, var(--muted) 60%, transparent);color:var(--muted);font-size:.66rem;font-weight:600;padding-bottom:12px}
  #view-set #sub-typedit.kb9 .kb-kopfz9 input[data-f="label"]{flex:1 1 auto;min-width:0;height:42px;box-sizing:border-box;margin:0;padding:0 10px;border:1px solid var(--line);border-radius:4px !important;background:none;color:var(--ink);font:inherit;font-size:.98rem;font-weight:700;outline:none}
  #view-set #sub-typedit.kb9 .kb-kopfz9 input[data-f="label"]:focus{border-color:var(--accent)}
  #view-set #sub-typedit.kb9 .kb-bildweg9{all:unset;cursor:pointer;display:block;margin:8px 0 0 66px;font-size:.78rem;font-weight:600;color:var(--rot)}
  #view-set #sub-typedit.kb9 .kb-farben9{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:2px 0}
  #view-set #sub-typedit.kb9 .kb-farben9 > :is(button,.kb-frei9){width:24px;height:24px;flex:0 0 auto;box-sizing:border-box;margin:0;padding:0;border:0 !important;border-radius:50% !important;cursor:pointer}
  #view-set #sub-typedit.kb9 .kb-farben9 > .on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
  #view-set #sub-typedit.kb9 .kb-frei9{position:relative;display:inline-block;background:conic-gradient(#e8462e,#f39c12,#e9b44a,#27ae60,#2e86de,#7c5cff,#c0398a,#e8462e)}
  #view-set #sub-typedit.kb9 .kb-frei9 input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
  #view-set #sub-typedit.kb9 .kb-dauer9{display:flex;flex-wrap:wrap;gap:6px}
  #view-set #sub-typedit.kb9 .kb-dauer9 > button{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 12px;border:1px solid var(--line);border-radius:4px !important;font-size:.84rem;font-weight:600;color:var(--ink);opacity:.5}
  #view-set #sub-typedit.kb9 .kb-dauer9 > button.on{opacity:1;border-color:var(--accent);color:var(--accent)}
  #view-set #sub-typedit.kb9 .kb-eig9{display:inline-flex;align-items:center;gap:6px;height:31px;box-sizing:border-box;padding:0 8px;border:1px solid var(--line);border-radius:4px !important;font-size:.84rem;font-weight:600;color:var(--ink);cursor:text}
  #view-set #sub-typedit.kb9 .kb-eig9.on{border-color:var(--ink)}   /* Harun 11.10.: "die lila Auswahl entspricht nicht unserem Design" */
  /* Dauer als normaler Umschalter (.seg) wie ueberall in den Einstellungen, Minuten-Zahl ohne "Min." in den Knoepfen; Eigene daneben als Box */
  #view-set #sub-typedit.kb9 .kb-dauer9{align-items:center;gap:10px}
  #view-set #sub-typedit.kb9 .kb-dseg9{display:inline-flex;flex:0 1 auto}
  #view-set #sub-typedit.kb9 .kb-dseg9 button{min-width:44px}
  #view-set #sub-typedit.kb9 .kb-eig9 input{width:42px;height:auto;margin:0;padding:0;border:0 !important;background:none;outline:none;color:var(--ink);font:inherit;font-size:.84rem;font-weight:700;text-align:right}
  #view-set #sub-typedit.kb9 .kb-eig9 small{color:var(--muted);font-size:.74rem;font-weight:500}
  #view-set #sub-typedit.kb9 .kb-gr9 textarea[data-f="beschreibung"]{display:block;width:100%;min-height:70px;box-sizing:border-box;margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:4px !important;background:none;color:var(--ink);font:inherit;font-size:.9rem;font-weight:500;resize:vertical;outline:none}
  #view-set #sub-typedit.kb9 .kb-gr9 textarea[data-f="beschreibung"]:focus{border-color:var(--accent)}
  /* Im Kalender: i in derselben Spalte vor dem Wert (116 px) */
  #view-set #sub-typedit.kb9 .sek .fe-row.kb-kz9{padding:10px 0}
  #view-set #sub-typedit.kb9 .sek .fe-row.kb-kz9 > label,#view-set #sub-typedit.kb9 .sek .fe-row.kb-pfx9{gap:12px}
  #view-set #sub-typedit.kb9 .sek .kb-kz9 .kb-lab9{flex:1 1 auto}
  #view-set #sub-typedit.kb9 .sek .kb-kz9 > label > .kb-i15{margin-right:4px}
  #view-set #sub-typedit.kb9 .sek .fe-row.kb-pfx9 #typPraefix{width:116px !important;margin-left:0}
  #view-set #sub-typedit.kb9 .sek .kb-tt9 .kb-phk9n{width:116px;justify-content:center;margin-left:0}
  #view-set #sub-typedit.kb9 .sek .kb-nv9 > label > .kb-i15{margin-right:132px}
  @media (max-width:480px){#view-set #sub-typedit.kb9 .sek .fe-row.kb-pfx9 #typPraefix,#view-set #sub-typedit.kb9 .sek .kb-tt9 .kb-phk9n{width:98px !important}#view-set #sub-typedit.kb9 .sek .kb-nv9 > label > .kb-i15{margin-right:114px}}
  /* Kunde & Daten: aufgeklappte Frage - "Pflicht" normal, nicht blass (Regel "Schalter aus = blass" gilt hier nicht) */
  #view-set #sub-typedit.kb9 .kb-frauf9 .set-row > .tx{opacity:1 !important}
  #view-set #sub-typedit.kb9 .kb-frauf9 .set-row > .tx b{color:var(--ink)}
  #view-set #sub-typedit.kb9 .kb-vbesch9[hidden]{display:none}
  #view-set #sub-typedit.kb9 .kb-vkarte9{display:flex;align-items:center;gap:10px;position:relative;box-sizing:border-box;width:100%;padding:10px 12px 10px 10px;border-radius:12px !important;border:1px solid var(--vk);background:linear-gradient(135deg, color-mix(in srgb, var(--vk) 22%, transparent), color-mix(in srgb, var(--vk) 6%, transparent));color:var(--ink)}
  #view-set #sub-typedit.kb9 .kb-vbild9{width:54px;height:54px;margin:-8px 0;flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
  #view-set #sub-typedit.kb9 .kb-vbild9[disabled]{cursor:default}
  #view-set #sub-typedit.kb9 .kb-vbild9 img{width:54px;height:54px;object-fit:contain;display:block}
  #view-set #sub-typedit.kb9 .kb-vbild9.leer9{margin:0;width:46px;height:46px;border:1px dashed color-mix(in srgb, var(--muted) 60%, transparent);border-radius:8px !important;color:var(--muted);font-size:.66rem;font-weight:600}
  #view-set #sub-typedit.kb9 .kb-vtext9{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  #view-set #sub-typedit.kb9 :is(.kb-vname9,.kb-vbesch9){display:block;width:100%;box-sizing:border-box;margin:0;padding:0;border:0 !important;border-radius:0 !important;background:none !important;color:inherit;font:inherit;outline:none;box-shadow:none}
  #view-set #sub-typedit.kb9 .kb-vname9{height:auto;font-size:.9rem;font-weight:800;line-height:1.2}
  #view-set #sub-typedit.kb9 .kb-vbesch9{resize:none;overflow:hidden;min-height:0;font-size:.74rem;font-weight:400;line-height:1.35;opacity:.75}
  #view-set #sub-typedit.kb9 :is(.kb-vname9,.kb-vbesch9)::placeholder{color:var(--muted);opacity:1}
  #view-set #sub-typedit.kb9 :is(.kb-vname9,.kb-vbesch9):focus{box-shadow:0 1px 0 var(--accent) !important}
  #view-set #sub-typedit.kb9 .kb-vrechts9{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  #view-set #sub-typedit.kb9 .kb-vdauer9{border:0;background:none;padding:2px 0;margin:0;color:inherit;font:inherit;font-size:.78rem;font-weight:600;opacity:.75;white-space:nowrap;cursor:pointer}
  #view-set #sub-typedit.kb9 .kb-vfarbe9{width:18px;height:18px;padding:0;margin:0;border:1px solid var(--line);border-radius:4px !important;cursor:pointer}
  #view-set #sub-typedit.kb9 .kb-vwahl9 button{width:auto;min-width:40px;padding:0 8px;background:none;color:var(--ink);font:inherit;font-size:.8rem;font-weight:600}
  #view-set #sub-typedit.kb9 .kb-vweg9{display:block;border:0;background:none;padding:6px 2px 0;margin:0;color:var(--rot);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
  /* kb2: Liste "Meine Termintypen" - Bild des Typs in der 30-px-Kachel */
  #view-set .kb9 .kb-z9.kb-mitbild9 > .ic{background:none;overflow:hidden}
  #view-set .kb9 .kb-z9 > .ic > .kb-bild9{width:30px;height:30px;object-fit:cover;display:block;border-radius:6px}
  /* (Harun 11.10.) Ketten-Kachel "Link kopieren" rechts je Termintyp - Kachel wie .set-row > .ic (30 px, 6 px, --sic-blau wie "Link kopieren" der Buchungsseite) */
  #view-set .kb9 .kb-tz9{display:flex;align-items:center;gap:10px}
  #view-set .kb9 .kb-tz9 > .kb-z9{flex:1 1 auto;min-width:0}
  #view-set .kb-lk9{display:none}
  /* Harun 11.10. (pmv3kom0qece): "nicht ausgefuellt, sondern nur den Link als Symbol" - Kette ohne Kachel */
  #view-set .kb9 .kb-lk9{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;padding:0;margin:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}
  #view-set .kb9 .kb-lk9:hover{color:var(--ink)}
  
  #view-set .tk-zeile9{display:flex;align-items:center;gap:10px}
  #view-set .tk-zeile9 > .tk{flex:1 1 auto;min-width:0}
  #view-set #sub-typedit.kb9 .kb-vbild9 img{border-radius:6px;object-fit:cover}
  #view-set #sub-typedit.kb9 #typLoeschen{order:2;width:100%;border:0 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;background:none;color:var(--rot) !important;text-align:left;padding:10px 2px;font-size:.9rem;font-weight:600}
  /* vf3 (Harun): Uhrzeit in Benachrichtigungen (Morgen-Briefing, Abend-Vorschau, Warm-up am Vortag) - EIN Feld "Uhrzeit hh:mm" statt Stepper − / + */
  #sub-erinnerung.es-neu9 .zp9 .stp9{display:none !important}
  #view-set #sub-erinnerung.es-neu9 .zp9:not(.zk9){justify-content:stretch;padding:2px 2px 10px}
  #view-set #sub-erinnerung.es-neu9 .zp9.zk9 > .zpi9{justify-content:stretch;padding:2px 2px 8px}
  #view-set #sub-erinnerung.es-neu9 .zp9 .zw9{min-width:0;padding:0 14px}
  /* vf3 (Harun): "Aufgaben planen" fuer alle - Wert-Zeile "Puffer vor Ende" mit Einfachwahl (Haken rechts), Liste buendig mit dem Titel */
  #view-set .es-neu9 #pufferListe9 button{padding-left:42px}
  /* (Harun es33): Knopf "⋯" oben rechts auf der Warm-up- und der Geburtstagskarte in Heute - ruhig, klein; oeffnet das Blatt "Knoepfe anpassen" */
  .anl9 .gk9 > .kn-mehr9{position:absolute;top:6px;right:6px;z-index:3;width:30px;height:26px;border:0;border-radius:4px !important;background:color-mix(in srgb, var(--gk, #fff) 70%, transparent);color:var(--gt, var(--ink));font:700 1rem/1 Inter,system-ui,sans-serif;letter-spacing:1px;padding:0 0 4px;cursor:pointer;opacity:.75;-webkit-tap-highlight-color:transparent}
  .anl9 .gk9 > .kn-mehr9:hover{opacity:1}
  /* Blatt "Knoepfe anpassen": dieselben Einstellungs-Zeilen wie unter Benachrichtigungen (Kachel 30 px / 4 px, Titel, Schalter rechts, 50 % aus, Dienst-Liste mit Haken rechts) */
  .knp9 .set-row{padding:9px 2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .knp9 .set-row > .ic{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:4px !important;background:var(--ic);color:#fff}
  :root[data-theme="dark"] .knp9 .set-row > .ic{color:#15171c}
  .knp9 .set-row > .ic svg{width:18px;height:18px;display:block}
  .knp9 .set-row .tx b{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .knp9 .set-row:has(> label.switch input:not(:checked)) > :not(label.switch){opacity:.5}
  .knp9 .wahl9{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:500;color:var(--muted);padding-right:10px}
  .knp9 .wahl9 .lg9{width:26px;height:26px;flex:0 0 26px;border-radius:4px !important;background:var(--lg);color:#fff;display:flex;align-items:center;justify-content:center}
  .knp9 .wahl9 .lg9 svg{width:16px;height:16px;display:block}
  .knp9 .wahl9 + label.switch{margin-left:0 !important}
  .knp9 .ms-liste9{margin:0 0 4px 14px;padding-left:12px;border-left:2px solid var(--line)}
  .knp9 .ms-liste9[hidden]{display:none !important}
  .knp9 .ms-liste9 button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:.86rem;font-weight:600;padding:7px 2px;cursor:pointer;text-align:left}
  .knp9 .ms-liste9 button > svg{width:18px;height:18px;flex:0 0 auto;color:var(--lg, var(--ink))}
  .knp9 .ms-liste9 button .hk9{margin-left:auto;color:var(--accent);font-weight:700;visibility:hidden}
  .knp9 .ms-liste9 button.on .hk9{visibility:visible}
  .knp9 .ms-liste9 button:not(.on) > :not(.hk9){opacity:.5}
  .knp9 .ms-liste9 button[disabled]{cursor:default}
  .knp9 .ms-liste9 button .ni9{font-size:.74rem;font-weight:500;color:var(--muted);margin-left:auto}
  /* v1754 (ei9): Suche */
  #view-set .set-such9{display:flex;align-items:center;gap:8px;background:var(--chip);border-radius:6px !important;padding:0 12px;height:40px;margin:0 0 14px;color:var(--muted);cursor:text}
  #view-set .set-such9 input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:.9rem;color:var(--ink);min-width:0;padding:0}
  #setHome.sucht9 > :not(.set-such9):not(#setSuchErg9){display:none !important}
  #view-set .such-pfad9{display:block;font-size:.72rem;font-weight:500;color:var(--muted);white-space:normal}
  #view-set .such-treffer9{animation:suchBlink9 1.6s ease-out}
  @keyframes suchBlink9{0%,45%{background:color-mix(in srgb, var(--accent) 18%, transparent)}100%{background:transparent}}
  #view-set .set-notiz{text-transform:none;letter-spacing:0;font-weight:600;font-size:.72rem;color:var(--muted);margin-left:6px}
  #view-set .set-kopfliste{margin-top:12px;border-top:1px solid var(--line);padding:0}
  #setSub .card.set-list{padding:2px 10px}
  /* leere Karte (alle Zeilen versteckt, z. B. Geraetekalender im Browser) gar nicht zeigen */
  /* 11.10. (Einstellungs-Umbau): neue Seiten nutzen .set-row statt .srow - leer = keine sichtbare Zeile beider Arten */
  #view-set .card.set-list:not(:has(> :is(.srow,.set-row):not(.hide))),#view-set .set-kopfliste:not(:has(> .srow:not(.hide))){display:none}
  /* v1747 (Harun ei6): Pro-Sperre, "kommt bald", grauer Wert rechts, kleine Zwischenzeile */
  #view-set .srow.pro-zu9 .ic,#view-set .srow.pro-zu9 .lbl,#view-set .srow.pro-zu9 .wert9,#view-set .srow.pro-zu9 .chev{opacity:.45}
  /* v1747 (Harun ei6, Runde 7): PRO-Siegel - EINE Klasse fuer die ganze App (.pro-siegel9, grau mit .zu).
     Ausnahme von der Kanten-Regel v445: 4 px, damit es als Siegel lesbar bleibt. */
  /* v1750 (Harun bn1, "das gleiche PRO-Siegel wie von Uplyne"): 1:1 .badge-pro aus original/shared/css/components.css
     (Uplyne/Linkhub, pkm.uplyne.app): Gold-Verlauf --color-pro, Schrift #1a1a2e fett, Pille, Schatten, Versalien -
     nur kleiner (11 px -> 10 px, Polster 3/10 -> 2/7), damit es hinter Zeilentiteln sitzt. Gleiche Werte: .tb-pro9 (buchen-kern.css). */
  .pro-siegel9{display:inline-flex;align-items:center;vertical-align:middle;margin-left:7px;height:16px;padding:2px 7px;box-sizing:border-box;
    font:700 .625rem/1 Inter,system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#1a1a2e;
    background:linear-gradient(135deg, #c5a04e 0%, #e8d48b 50%, #c5a04e 100%);border:0;box-shadow:0 1px 4px rgba(197,160,78,.3);
    border-radius:9999px !important;flex:0 0 auto;opacity:1}
  .pro-siegel9.zu{color:var(--muted);background:transparent;border:1px solid var(--line);box-shadow:none}
  /* pk1 (Harun 11.10.): Unternehmens-Abzeichen (Mandanten-Kurzform, z. B. PKM) - gleiche Form, Silber, damit es sich von BOOKING (gold) abhebt */
  .pro-siegel9.unt-siegel9{color:#1a1a2e;background:#C3C3C4;box-shadow:0 1px 4px rgba(0,0,0,.18)}   /* Harun 11.10.: Silber #C3C3C4, dunkle Schrift - hell auf dunklem Grund auch im Dark Mode sichtbar */
  /* Harun 11.10.: Booking-Abzeichen petrol statt gold, etwas kleinere Schrift (BOOKING bleibt ausgeschrieben) */
  .pro-siegel9.book-siegel9{color:#fff;background:linear-gradient(135deg, #0B8A82 0%, #13B8AD 50%, #0B8A82 100%);box-shadow:0 1px 4px rgba(15,167,158,.3);font-size:.56rem;letter-spacing:.03em}
  /* Harun 11.10.: Planungspaket TASKS - indigo */
  .pro-siegel9.tasks-siegel9{color:#fff;background:linear-gradient(135deg, #4F46E5 0%, #6E67F0 50%, #4F46E5 100%);box-shadow:0 1px 4px rgba(79,70,229,.3)}
  /* AI-Abzeichen (Gemini-Verlauf) - fuer kommende AI-Funktionen */
  .pro-siegel9.ai-siegel9{color:#fff;background:linear-gradient(135deg, #4285F4 0%, #9B72CB 55%, #D96570 100%);box-shadow:0 1px 4px rgba(155,114,203,.35)}
  .pro-siegel9.hide{display:none}
  /* pk2 ABZEICHEN-REGEL (Harun 18.10., ersetzt v1931 "nur Hinweis ohne Paket"): jede Einstellungs-Zeile, die ein Paket erfordert, zeigt das Abzeichen rechts.
     Paket vorhanden = gefuellt (Paketfarbe) mit kleinem Haken (.hat); Paket fehlt = ruhiger Umriss (.zu). Gesetzt zentral ueber siegelStand9() (basis.js). */
  #view-set .srow .lbl:has(.pro-siegel9){display:flex;align-items:center;gap:6px}
  #view-set .srow .lbl .pro-siegel9{margin-left:auto;font-size:.58rem;height:15px;padding:2px 7px}
  .pro-siegel9.hat::before{content:"";width:7px;height:7px;margin-right:3px;background:currentColor;flex:0 0 auto;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center/contain no-repeat}
  #view-set #setTitel{flex:0 1 auto !important}   /* Siegel direkt hinter der Ueberschrift */
  #view-set #setProSiegel9{margin-left:2px;height:18px;font-size:.6rem}
  #view-set #pfGlocke{margin-left:auto}   /* Glocke + Neu laden bleiben rechts, auch ohne Siegel */
  #view-set .srow.bald9{cursor:default}
  #view-set .srow.bald9 .ic,#view-set .srow.bald9 .lbl{opacity:.45}
  #view-set .wert9{margin-left:auto;color:var(--muted);font-size:.8rem;font-weight:500;flex:0 0 auto}
  #view-set .wert9:empty{display:none}
  #view-set .set-sekt-klein9{text-transform:none;letter-spacing:0;font-size:.72rem;margin:-4px 8px 6px}
  #sub-recht #kontoWeg{display:flex;margin:0;padding:14px 6px;font-size:.9rem;opacity:1;color:var(--rot);text-decoration:none}
  .srow .hint{color:var(--muted);font-size:.74rem;font-weight:500}
  .srow:disabled{opacity:.55;cursor:default}
  /* Organisation nur-Ansicht (ORG_EDITOR===false): gesperrte Felder sichtbar, aber deutlich ausgegraut */
  input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
  .srow .sub2{display:block;font-size:.72rem;color:var(--muted);font-weight:500;margin-top:1px}
  .fe-row{padding:8px 0;border-top:1px solid var(--line)}
  .fe-row:first-child{border-top:none}
  .fe-row label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;font-weight:600}
  .fe-row input[type=text],.fe-row input[type=number],.fe-row textarea{background:var(--chip);border:1px solid var(--line);
    color:var(--ink);border-radius:8px;padding:7px 9px;font-family:inherit;font-size:.8rem}
  .fe-row input[type=number]{width:76px;text-align:right;-moz-appearance:textfield;appearance:textfield}
  .fe-row input[type=number]::-webkit-inner-spin-button,
  .fe-row input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  /* Formular-Editor: Palette-Kacheln + Segment-Schalter (Breite Halb/Voll) */
  .fpal{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--chip);border:1px solid var(--line);
    border-radius:12px;padding:11px 12px;cursor:pointer;color:var(--ink)}
  .fpal b{font-size:.88rem}
  .fpal span{font-size:.7rem;color:var(--muted)}
  .fseg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;height:34px}
  .fseg button{flex:1;background:var(--card);color:var(--muted);border:none;font-size:.76rem;font-weight:600;cursor:pointer}
  .fseg button.an{background:var(--accent);color:#fff}
  /* Eigenschaften-Panel (tooltip-artig ueber dem gewaehlten Feld) */
  .fpanel{grid-column:1 / -1;border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);border-radius:14px;
    padding:12px 14px 14px;background:var(--card);box-shadow:0 10px 28px rgba(0,0,0,.16)}
  /* Im Seiten-Drawer braucht das Panel keinen eigenen Karten-Rahmen */
  #formDrawer .fpanel{border:none;box-shadow:none;padding:0;border-radius:0}
  .fpanel .flab{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:12px 0 5px}
  .fpanel input.ty-in,.fpanel select.ty-in{width:100%;box-sizing:border-box;height:40px;border-radius:10px;font-size:.9rem}
  .fpanel .fzeile{display:flex;align-items:center;justify-content:space-between;margin-top:13px;
    background:var(--chip);border-radius:11px;padding:9px 12px}
  /* Gewaehltes Feld auf dem Canvas: getoente Flaeche + gestrichelter Rahmen */
  .fvz.fv-an{outline:2px dashed var(--accent);outline-offset:3px;background:color-mix(in srgb, var(--accent) 8%, transparent)}
  /* Abschnitts-Balken im Editor — exakt die Optik der echten Buchungsmaske */
  .fsekt{grid-column:1 / -1;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);border-radius:9px;padding:8px 12px;margin-top:2px}
  .fvz .fvaus{position:absolute;top:2px;right:20px;font-size:.58rem;font-weight:700;color:var(--muted);
    border:1px solid var(--line);border-radius:6px;padding:1px 5px;letter-spacing:.04em}
  .fe-row input[type=text],.fe-row textarea{width:100%;margin-top:6px}
  .fe-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
  /* Zweispalter GERADE ausgerichtet: Beschriftung (inkl. i-Knopf) ist EINE Zeile
     mit fester Mindesthöhe, die Trennlinie läuft über die volle Breite — Felder
     beider Spalten sitzen dadurch immer auf gleicher Höhe */
  .fe-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;border-top:1px solid var(--line)}
  .sekt + .fe-duo{border-top:none}
  .fe-duo .fe-row{border-top:none}
  .fe-duo .fe-row label{flex-direction:column;align-items:flex-start;gap:5px}
  .fe-duo .fe-row .fe-lab{min-height:21px}
  .fe-row .fe-lab{display:inline-flex;align-items:center;min-width:0}
  .fe-duo .fe-row input[type=number]{width:100%;text-align:left}
  /* Einheit (Min./Std./Tage) steht ausgegraut IM Feld statt in der Beschriftung */
  .fe-unit{position:relative;display:inline-flex;align-items:center}
  .fe-unit input[type=number]{width:104px;padding-right:48px}
  .fe-unit .u{position:absolute;right:10px;color:var(--muted);font-size:.7rem;pointer-events:none}
  /* v768: waehlbare Einheit (Std./Tage) - steht IM Fluss neben der Zahl,
     nicht absolut darueber (v767 lag sie auf der Zahl, "6age"-Fund). */
  .fe-unit select.u-wahl{position:static;border:none;background:none;color:var(--muted);
    font-size:.7rem;font-family:inherit;cursor:pointer;padding:0 2px;pointer-events:auto}
  .fe-duo .fe-unit{width:100%}
  .fe-duo .fe-unit input[type=number]{width:100%}
  /* "Meine Einstellungen": Einheit steht DIREKT rechts neben der Zahl, nicht am
     Zeilenrand (User 19.08.) — dafuer darf die Einheit hier nicht die volle
     Spaltenbreite einnehmen. Der Ruecksetz-Knopf darf zweizeilig umbrechen. */
  #meinFensterBox .fe-unit input[type=number]{width:104px;text-align:left;padding-right:48px}
  #meinFensterBox .mf-hint{font-size:.78rem;color:var(--muted);line-height:1.45;padding:3px 0 8px}
  /* Eine ruhige Zeile je Wert: Beschriftung links, Feld rechts, gleiche Hoehe.
     Kein Zweispalter mehr - der riss Luecken, sobald eine Beschriftung umbrach
     (User 19.08.). Alles sitzt buendig an derselben linken/rechten Kante. */
  #meinFensterBox .set-row{padding:6px 0}
  #meinFensterBox .fe-row{padding:11px 0}
  #meinFensterBox .fe-row label{gap:14px}
  #meinFensterBox .fe-lab{flex:1 1 auto}
  #meinFensterBox .mf-sekt{padding:12px 0 2px;margin:0}
  #meinFensterBox .mf-kopf{align-items:flex-end;padding:0;margin:0}
  #meinFensterBox .mf-titel{flex:1 1 auto;font-size:.98rem;letter-spacing:-.01em;line-height:1.1}
  #meinFensterBox #meinDefaultBtn{align-self:flex-start;margin-top:-4px}
  /* Fest vorgegebener Wert: steht rechts wie ein Feld, ist aber keins */
  #meinFensterBox .mf-fest{font-size:.82rem;font-weight:600;color:var(--muted);padding-right:12px}
  /* Feine Unterzeile auf der Kachel - nennt den Zweck (Recherche, Basis) */
  /* Haengt UNTER dem Titel, verschiebt ihn nicht - wie auf der Buchungsseite */
  :is(#typKacheln,.va-kacheln9) .tk-unter{position:absolute;left:0;top:100%;margin-top:-1px;white-space:nowrap;
    font-size:.62rem;font-weight:400;letter-spacing:.05em;opacity:.6}
  /* v573: Gliederung innerhalb einer Karte - eine Zwischenzeile benennt die
     Untergruppe, ein feiner Strich trennt zwei Bloecke. Damit braucht
     Zusammengehoeriges keine eigene Karte mehr, nur weil es eine Ueberschrift
     haben soll. */
  .er-unter{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin:10px 0 0}
  .er-trenn{height:1px;background:var(--line);margin:14px 0 4px}
  /* Zugangsdaten-Felder: Beschriftung ueber dem Feld, damit lange Adressen
     die ganze Breite haben. */
  .id-feld{margin-bottom:10px}
  .id-lab{font-size:.62rem;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
  .id-feld input{width:100%;font-size:.8rem}
  /* PLATZHALTER-AUSWAHL (v559, Harun 25.08.: "Platzhalter einfuegen ist echt
     komisch geworden.")
     Vorher: sechzehn zweizeilige Kacheln in einer umbrechenden Reihe. Jede war
     anders breit, die Zeilen sprangen, und die Wolke schob das Feld, in das man
     gerade tippte, aus dem Bild.
     Jetzt: eine ruhige Liste - eine Zeile je Platzhalter, Name links, Erklaerung
     rechts, alles auf derselben Kante. Der Kasten ist in der Hoehe begrenzt und
     rollt in sich, damit das Textfeld stehen bleibt. */
  .ph-box{margin-top:8px}
  .ph-liste{display:block;margin-top:8px;max-height:236px;overflow-y:auto;
    background:var(--card);border:1px solid var(--line)}
  .ph-chip{display:flex;width:100%;align-items:baseline;gap:10px;background:none;border:0;
    border-top:1px solid var(--line);padding:8px 11px;cursor:pointer;
    font-family:inherit;color:var(--ink);text-align:left}
  .ph-chip:hover{background:var(--chip)}
  .ph-chip b{font-size:.74rem;font-weight:700;flex:0 0 auto}
  .ph-chip span{font-size:.68rem;color:var(--muted);flex:1 1 auto;min-width:0}
  /* Die Gruppenzeile bleibt beim Rollen oben stehen - sonst weiss man nach
     drei Zeilen nicht mehr, ob man bei Person oder bei Termin ist. */
  .ph-gruppe{position:sticky;top:0;z-index:1;background:var(--chip);
    font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);padding:5px 11px}
  /* Reiter der Termintyp-Detailseite: so breit wie eine ganze Karte */
  .typ-seg{width:100%;box-sizing:border-box;margin:0 0 12px}
  .typ-seg button{flex:1 1 0;text-align:center}

  #meinFensterBox #meinDefaultBtn{background:var(--chip);color:var(--ink);flex:0 0 auto;
    white-space:normal;line-height:1.18;text-align:center;padding:7px 11px}
  /* i-Knopf: kurze Erklärung für kompliziertere Felder */
  .fi{width:16px;height:16px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);
    background:none;font-size:.62rem;font-weight:700;line-height:1;cursor:pointer;padding:0;
    display:inline-flex;align-items:center;justify-content:center;margin-left:6px;font-family:inherit;flex:0 0 auto}
  /* Kalender-Kopf: Auswahl + Ansicht-Umschalter */
  .kal-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .seg{display:flex;background:var(--chip);border-radius:10px;padding:3px}
  .seg button{border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:.76rem;
    font-weight:700;padding:7px 13px;border-radius:8px;cursor:pointer}
  .seg button.on{background:var(--card);color:var(--ink)}
  /* v216: Themenfarbe - hell fuehrt Teal, dunkel Lila. Vorher stand das Lila
     fest im Code und blieb auch im hellen Modus stehen (User 16.08.). */
  /* v455 (User 22.08.): der GEWAEHLTE Knopf traegt eine deutlich sichtbare
     Flaeche - vorher lag var(--card) auf var(--chip), zwei fast gleiche
     Toene, und die Auswahl war kaum zu erkennen. */
  #segModus button.on{color:var(--accent);font-weight:800;
    background:color-mix(in srgb, var(--ink) 15%, var(--card)) !important}
  /* v179: Eigene aktiv = Privat-Gruen (gleiche Farbe wie private Termine) */
  #segModus button.on[data-m="mein"]{color:var(--privatgruen, #0B8043)}
  /* Harun 11.10.: "Verwaltungsmenue und Testumgebung in einer anderen Farbe, damit ich direkt unterscheide, was die Leute sehen
     und was nicht" - beide Bereiche (nur Admins / nur Betreiber) bernsteinfarben getoent */
  #setHome #verwSekt, #setHome #expSekt9{color:#B45309}
  #setHome #verwListe, #setHome #expListe9{background:color-mix(in srgb, #F59E0B 9%, var(--card));border-color:color-mix(in srgb, #F59E0B 38%, var(--line))}
  :root[data-theme="dark"] #setHome #verwSekt, :root[data-theme="dark"] #setHome #expSekt9{color:#F5B547}

  /* Harun 12.10.: "beim Profil sind der Link fuer Zoom und die Adressen viel zu kurz" - im Profil fuellen die Felder die Zeile
     (Feld in voller Breite unter der Beschriftung), statt der schmalen 220-px-Box des Termintyp-Editors */
  /* Harun 12.10. (Screenshot Private E-Mail): "das kann rechts stehen, einzeilig - bei Anschrift auch": Feld RECHTS neben der
     Beschriftung und nimmt den ganzen Rest der Zeile (bleibt lang genug fuer Link/Adresse) */
  #view-set #sub-profil.kb9 .kb-z9{flex-wrap:nowrap}
  #view-set #sub-profil.kb9 .kb-z9 > .tx{flex:0 0 auto}
  #view-set #sub-profil.kb9 .kb-z9 > .kb-boxw9{flex:1 1 auto;min-width:0;margin:0}
  #view-set #sub-profil.kb9 .kb-z9 .kb-box9{width:100%;max-width:none;box-sizing:border-box}
  /* Harun 12.10. (Screenshot Dienst-Auswahl "Kontrast"): aufgeklappte Liste der Auswahlfelder - der Browser malte die
     Optionen weiss mit heller Schrift. Optionen jetzt in Kartenfarbe + Schriftfarbe des Themas. */
  #view-set select.kb-box9 option{background:var(--card);color:var(--ink)}
  /* zz1 (Harun 15.10.): Heimat-Zeitzone - Suchfeld + Einfachwahl (Haken rechts). Lange Textliste: alle Eintraege voll lesbar,
     GMT-Versatz grau vor dem Haken; Liste buendig unter dem Suchfeld, nicht eingerueckt. */
  #view-set #sub-zeitzone .hz-liste9{display:block;margin:8px 0 0;max-height:60vh;overflow-y:auto}
  #view-set #sub-zeitzone .hz-liste9 button{padding:9px 2px}
  #view-set #sub-zeitzone .hz-liste9 button:not(.on) > :not(.hk9){opacity:1}
  #view-set #sub-zeitzone .hz-liste9 .hz-gmt9{margin-left:auto;color:var(--muted);font-weight:500;font-size:.8rem}
  #view-set #sub-zeitzone .hz-liste9 button .hk9{margin-left:10px;min-width:12px}
  #view-set #sub-zeitzone .hz-leer9{padding:10px 2px;color:var(--muted);font-size:.84rem}

/* ==== bc/css/modules/kalender/kalender-03.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 10 */

  .kal-legende span{cursor:pointer;user-select:none}
  .kal-legende span.aus{opacity:.35;text-decoration:line-through}
  /* Wochenansicht */
  .wo-tag{border-top:1px solid var(--line);padding:9px 4px}
  .wo-tag:first-child{border-top:none}
  .wo-kopf{font-size:.8rem;font-weight:800;margin-bottom:4px}
  .wo-kopf.heute{color:var(--accent)}
  .wo-t{display:flex;gap:8px;align-items:center;font-size:.82rem;padding:3px 0;min-width:0}
  .wo-t .pkt{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
  .wo-t .zeit{color:var(--muted);flex:0 0 auto;font-size:.76rem}
  .wo-t .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wo-leer{color:var(--muted);font-size:.72rem;padding:2px 0}
  /* Wochenplaner (7 Spalten × Zeitachse) */
  .wp-kopf{display:grid;grid-template-columns:20px repeat(7,1fr);gap:2px;margin-bottom:2px}
  .wp-kopf button{border:none;background:none;font-family:inherit;font-size:.62rem;font-weight:500;
    color:var(--muted);cursor:pointer;line-height:1.25;padding:2px 0;text-align:center;
    text-transform:uppercase;letter-spacing:.05em}   /* v794: GROSS wie im Monat */
  .wp-kopf button.heute{color:var(--accent)}
  /* v1059 (Betreiber): In der TAGESANSICHT traegt diese Zeile das volle Datum -
     "Mittwoch, 09.09.26", so notiert. Versalien sind fuer die kurzen Formen
     der Mehrtagesansicht gedacht ("MI 9."); ueber einem ganzen Datum wirken
     sie schwer und lesen sich schlechter. */
  .wp-kopf.ein-tag button{text-transform:none;letter-spacing:.02em;font-size:.72rem}
  /* v870 (User): Die Tageszeile ist AUCH bei 1 Tag da (v791 rueckgebaut) -
     sonst sass das Raster hoeher als bei 2+ Tagen; der Kopftitel sagt
     dafuer schlicht "Heute". */
  .wp-body{position:relative;display:grid;grid-template-columns:20px repeat(7,1fr);gap:2px}
  .wp-zeit{position:relative}
  /* v740 (Harun 01.09., Vorbild BC2): Die Stundenzahl haengt UNTER ihrer
     Linie statt mittig auf ihr. Damit ist 00 ganz oben lesbar (vorher lugte
     nur die untere Haelfte hervor) und die Schrift darf groesser sein, ohne
     mit der Linie zu kollidieren. */
  .wp-zeit small{position:absolute;left:0;font-size:.68rem;color:var(--muted)}
  .wp-spalte{position:relative;border-left:1px solid var(--line)}
  .wp-spalte.heute{background:rgba(255,255,255,.06)}
  html[data-theme="light"] .wp-spalte.heute{background:rgba(35,38,45,.06)}
  .wp-linie{position:absolute;left:0;right:0;border-top:1px solid var(--line);opacity:.45}
  /* Titel DURCHGESCHRIEBEN und linksbuendig (User 14.08.): kein Flex-Spalten-
     Umbruch mehr - der Text fliesst, der Vermittler haengt klein hinten dran */
  /* v791 (BC2-Runde Tag/Woche): kondensiert, leichter, flachere Zeilen;
     die Textfarbe rechnet kontrastInk aus der Balkenfarbe. */
  /* v793 (User, Direktvergleich): .56rem war unlesbar - BC2 faehrt ~13px.
     Kondensiert + grosszuegig = lesbar UND platzsparend. */
  /* v1260 (Betreiber: "setz das zurueck"): der Roboto-Versuch aus v1259 ist
     verworfen - wieder kondensiert, Gewicht 600, Minuten hochgestellt (wie bis
     v1258). Neu nur die Groesse: eine Stufe groesser (.78 -> .84rem), die
     hochgestellten Minuten deutlich groesser (.62 -> .76em, s. .wp-ev .mnt). */
  .wp-ev{position:absolute;left:1px;right:1px;border-radius:0;color:#fff;font-size:.84rem;font-weight:600;
    display:block;text-align:left;padding:1px 3px 0;line-height:1.12;cursor:pointer;overflow:hidden;
    font-family:'Barlow Condensed','Roboto Condensed','sans-serif-condensed','Arial Narrow',sans-serif;
    transition:opacity .25s ease}   /* v1617 (Harun tz1): volleinfarbig einblenden statt hart umspringen */
  .wp-ev .mnt{font-size:.76em;top:-.38em}   /* v1260: hochgestellte Minuten groesser */
  /* v791 (User-Idee): Minuten klein, ~20% heller, leicht hochgestellt */
  /* v792 (User): Minuten OBEN buendig wie ein Exponent, noch etwas kleiner.
     position:relative statt vertical-align - wirkt auch in den Flex-Zeilen
     des Monats. Dort schluckt Flex die Leerzeichen-Textknoten, deshalb
     traegt .mnt im Monat einen rechten Abstand als Luecke vor dem Titel. */
  .mnt{font-style:normal;font-size:.62em;opacity:.78;letter-spacing:-.01em;line-height:1;
    position:relative;top:-.45em}   /* v794: Oberkanten wirklich buendig (Woche/Tag) */
  .kz .balken.txt .mnt{margin-right:0;top:-.3em}
  .kz .balken.txt.aufg9{background:transparent !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink);padding:0 2px;font-weight:700;border-radius:0}   /* v1455 (Harun: "im Monat kein schwarzer Hintergrund, nur schwarze Schrift - wie Ganztags") */   /* v1414: Aufgaben-Strich im Monat */
  /* v838: die Stunde solide in Typfarbe, Abstand zur Titelzeile am Span */
  .kz .balken.txt .m-uhr{flex:0 0 auto;margin-right:3px}
  .wp-uhr{margin-right:3px;font-weight:700}
  /* v794: erste Zeile "Badge + Uhrzeit" bei Badge-Terminen */
  /* v795 (User): passt die Uhrzeit neben die Badge, steht sie daneben -
     sonst bricht sie darunter um (schmale Parallel-Spalten schnitten sie ab) */
  .wp-z1{display:flex;flex-wrap:wrap;align-items:center;gap:1px 4px;margin-bottom:1px}
  /* v797: Wasserfall-Textfenster der parallelen Text-Zeilen */
  .wp-ev .txf9{position:absolute;left:4px;right:2px;overflow:hidden;line-height:14px}
  /* v800: Sammel-Kachel fuer >=4 gleichzeitige Termine im Text-Modus */
  .wp-buendel{position:absolute;left:1px;right:1px;height:22px;z-index:8;cursor:pointer;
    display:flex;align-items:center;gap:4px;padding:0 6px;box-sizing:border-box;
    background:color-mix(in srgb, var(--ink) 9%, transparent);
    border-left:3px solid var(--muted);color:var(--ink);
    font-family:'Barlow Condensed','Roboto Condensed','sans-serif-condensed','Arial Narrow',sans-serif;
    font-size:.78rem;font-weight:600;overflow:hidden;white-space:nowrap}
  .wp-buendel .bnd-pf{font-size:.6rem;opacity:.7}
  /* v869: Agenda im BC2-Layout - Zeitkachel, Tages-Header, Aktionen */
  #ansichtAgenda{height:100%;overflow-y:auto;scrollbar-width:none}
  #ansichtAgenda::-webkit-scrollbar{display:none}
  #ansichtAgenda .ag-wrap{padding:2px 14px 28px}
  #ansichtAgenda .ag-tag{display:flex;align-items:baseline;gap:8px;margin:18px 0 4px;
    border-bottom:1px solid var(--line);padding-bottom:6px}
  #ansichtAgenda .ag-tag b{font-size:1.02rem;font-weight:800}
  .ag-aufg9{cursor:pointer}   /* v1420: Abstaende wie jede Agenda-Zeile (buendig mit 24H) */
  .ag-aufg9 .ad-hk{width:16px;height:16px;margin:0}
  #ansichtAgenda .ag-k.ag-k-aufg9{background:var(--ink);color:var(--bg);gap:2px}   /* v1415 */
  #ansichtAgenda .ag-k-aufg9 .ag-hak9{width:.95em;height:.95em}

  #ansichtAgenda .ag-tag span{font-size:.66rem;font-weight:600;color:var(--muted);
    letter-spacing:.06em}
  #ansichtAgenda .ag-zeile{display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer}
  #ansichtAgenda .ag-zeile.abges{opacity:.5;text-decoration:line-through}
  #ansichtAgenda .ag-k{width:48px;height:44px;flex:0 0 auto;display:flex;align-items:center;
    justify-content:center;font-weight:800;font-size:1.06rem;
    font-family:'Barlow Condensed','Roboto Condensed','sans-serif-condensed','Arial Narrow',sans-serif}
  #ansichtAgenda .ag-mit{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  #ansichtAgenda .ag-t{font-weight:700;font-size:.92rem;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  #ansichtAgenda .ag-u{color:var(--muted);font-size:.74rem;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  #ansichtAgenda .tp-akt{flex:0 0 auto;display:flex;gap:8px;align-items:center}
  #ansichtAgenda .ag-leer{color:var(--muted);text-align:center;padding:24px;font-size:.8rem}
  /* v878: wie die erste Fassung - NUR die neue Ansicht gleitet herein */
  .ans-rein-li{animation:ansReinLi9 .24s cubic-bezier(.2,.7,.3,1)}
  .ans-rein-re{animation:ansReinRe9 .24s cubic-bezier(.2,.7,.3,1)}
  @keyframes ansReinLi9{from{transform:translateX(-12%);opacity:.35}to{transform:none;opacity:1}}
  @keyframes ansReinRe9{from{transform:translateX(12%);opacity:.35}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion: reduce){ .ans-rein-li,.ans-rein-re{animation:none} }
  .wp-z1 .kl-badge.mini{margin-right:0}
  .kl-badge.frage{background:#565963;color:#d8dade}
  /* Tagesansicht (Zeitleiste) */
  .tl{position:relative;height:680px;margin-top:6px}
  .tl-stunde{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
  .tl-stunde small{position:absolute;top:-8px;left:0;font-size:.6rem;color:var(--muted);background:var(--card);padding-right:4px}
  .tl-ev{position:absolute;left:44px;right:6px;border-radius:0;color:#fff;padding:3px 8px;
    font-size:.72rem;font-weight:600;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.2)}
  .tl-ev small{display:block;font-weight:400;opacity:.85}
  /* Nächste Termine (unter Monat/Woche) */
  .nx{display:flex;gap:9px;align-items:center;font-size:.83rem;padding:8px 4px;border-top:1px solid var(--line)}
  .nx:first-child{border-top:none}
  .nx .pkt{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
  .nx .dat{color:var(--muted);flex:0 0 auto;font-size:.76rem;min-width:88px}
  .nx .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Analyse: Verlaufs-Graph + Modals */
  .chartbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;height:230px;position:relative}
  .kpi-card{cursor:pointer}
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:none;
    align-items:center;justify-content:center;padding:18px}
  .overlay.on{display:flex}
  :root{--mb-mw:430px}   /* v1618 (Harun ia1): Modal-Breite als Variable - die Blaetter-Pfeile (.m-nav) rechnen ihre Position
    daraus, damit sie bei breiteren Kaesten (Desktop) nicht mehr ins Kaestchen hineinragen (Beleg ia1_pfeile.png) */
  .modalbox{background:var(--card);border:1px solid var(--line);border-radius:16px;
    max-width:var(--mb-mw);width:100%;max-height:76vh;overflow-y:auto;padding:18px;position:relative}
  .modalbox h3{margin:0 0 4px;font-size:1rem;text-align:center}
  .modalbox .sub{font-size:.75rem;color:var(--muted);text-align:center;margin-bottom:12px}
  .modalbox .zu{position:absolute;top:8px;right:10px;border:none;background:none;color:var(--muted);
    font-size:1.3rem;cursor:pointer;font-family:inherit}
  /* Termin-Detail: Gruppen statt einer durchlaufenden Zeilenwand.
     Der Titel bekommt Platz, damit das Kreuz nicht auf der zweiten Zeile klebt. */
  #detTitel{padding:0 26px;line-height:1.35}
  .dt-h{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    font-weight:800;margin:15px 0 1px}
  .dt-h:first-child{margin-top:8px}
  .dt-r{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
    padding:7px 0;border-top:1px solid var(--line);font-size:.85rem}
  .dt-r .l{color:var(--muted);flex:0 0 auto}
  .dt-r .v{text-align:right;font-weight:700;min-width:0;overflow-wrap:anywhere}
  /* Lange Werte (Adresse, Antworten aus der Buchung) stehen UNTER dem Feldnamen -
     rechtsbuendig umgebrochen waren sie kaum lesbar. */
  .dt-r.lang{display:block}
  .dt-r.lang .l{display:block;font-size:.75rem;margin-bottom:2px}
  .dt-r.lang .v{text-align:left;font-weight:600;line-height:1.4}
  .dt-frei{padding:8px 0;border-top:1px solid var(--line);font-size:.85rem;
    line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
/* ==== bc/css/core/core-03.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 11 */

  /* Blaetter-Pfeile: FEST im Bildschirm, ausserhalb des scrollenden Kastens */
  /* v451 (User 22.08.): schmaler, nicht deckend, ohne Druck-Hervorhebung -
     die Pfeile sollen fuehren, nicht auffallen. Gewischt wird ohnehin. */
  .m-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;border:none;background:none;
    color:var(--ink);opacity:.45;width:48px;height:64px;cursor:pointer;font-size:1.5rem;
    font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0;
    -webkit-tap-highlight-color:transparent;transition:opacity .12s}
  .m-nav:hover{opacity:.75}
  /* am2 (Harun 16.10.: "Pfeile springen beim Druecken runter/hoch"): das globale button:active{transform:scale(.97)} (core-01) ersetzte
     translateY(-50%) -> Sprung. Position bleibt fest, Rueckmeldung nur ueber Deckkraft. Trefferflaeche 48 x 64 px (oben). */
  .m-nav:active,.m-nav:focus,.m-nav:focus-visible{transform:translateY(-50%)}
  .m-nav:active{opacity:.9}
  .m-nav.links{left:max(0px, calc(50vw - (var(--mb-mw) / 2) - 52px))}
  .m-nav.rechts{right:max(0px, calc(50vw - (var(--mb-mw) / 2) - 52px))}
  .m-gruppe{font-size:.78rem;font-weight:800;margin:12px 0 6px;color:var(--accent)}
  .m-zeile{display:flex;gap:8px;align-items:baseline;font-size:.83rem;padding:5px 0;border-top:1px solid var(--line)}
  .m-zeile .z{color:var(--muted);flex:0 0 auto;font-size:.76rem}
  .m-zeile .pkt{width:8px;height:8px;border-radius:3px;flex:0 0 auto;align-self:center}
  .m-wer{display:flex;justify-content:space-between;font-size:.85rem;padding:7px 2px;border-top:1px solid var(--line)}
  .m-wer b{font-weight:800}
  /* GP Aktivität (Original-Layout: zwei sichtbare Listen, grün/rot) */
  .gp-h{font-size:.8rem;margin:4px 0 8px;font-weight:800}
  .gp-h.gruen{color:#50C878} .gp-h.rot{color:#E0115F}
  .gp-h span{color:var(--muted);font-weight:600}
  .gp-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
  .gp-pill{background:var(--chip);border:1px solid var(--line);border-radius:9px;
    padding:4px 10px;font-size:.75rem;font-weight:600}
  .gp-pill b{font-weight:800;margin-left:4px;color:#50C878}
  .gp-mehr{background:none;border:1px dashed var(--line);color:var(--accent);border-radius:9px;
    padding:4px 10px;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit}
  /* Indikatoren-Reihe unten (Original: indicatorBox/kpi-glass — Emoji groß,
     Wert, Label klein in Versalien) */
  .ind-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ind-card{min-width:0}
  .ind-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:14px 6px;text-align:center;cursor:pointer}
  .ind-card .em{font-size:1.9rem;line-height:1.3}
  .ind-card .wert{font-size:1.02rem;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
  .ind-card .lbl{font-size:.62rem;color:var(--muted);margin-top:3px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em}
  /* Modal-Gamification (Original-Optik): großes Emoji + große Zahl im Kopf,
     farbige Balken/Listen, abgerundete Karten */
  .m-hero{text-align:center;margin:0 0 12px}
  .m-hero .em{font-size:2.7rem;line-height:1.25}
  .m-hero .zahl{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .m-hero .lbl{font-size:.62rem;color:var(--muted);margin-top:2px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em}
  .m-sekt{font-size:.8rem;font-weight:800;margin:14px 0 2px;letter-spacing:.02em}
  .m-karte{background:var(--chip);border:1px solid var(--line);border-radius:14px;padding:12px}
  .m-balken{margin:9px 0}
  .m-balken .bn{font-size:.75rem;font-weight:700;margin-bottom:3px}
  .m-balken .bb{height:10px;border-radius:5px}
/* ==== bc/css/modules/analyse/analyse-02.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 12 */

  /* Filter-Chips 1:1 wie die tag-buttons im Termin-Dashboard — kompakt, EINE
     Zeile (horizontal scrollbar), aktiv = dunkle Pille + 2px Rahmen + Schrift
     in der Kennfarbe, inaktiv = grau */
  .ana-filter{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:10px;
    justify-content:flex-start;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
  .ana-filter::-webkit-scrollbar{display:none}
  /* Gruppen-Chips: EINE ruhige Optik (User-Ansage 11.08. — die alte Mischung aus
     Goldrahmen und Fremdfarbe sah unruhig aus). Aktiv = zarte Fuellung in der
     Gruppenfarbe mit farbiger Schrift, inaktiv = neutral und gedaempft. */
  .ana-filter button{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--muted);
    border-radius:8px;padding:5px 11px;font-size:.68rem;font-weight:700;line-height:1.25;
    letter-spacing:.01em;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s}
  .ana-filter button:hover{border-color:var(--muted)}
  .ana-filter button.on{border-width:1px}
  /* Zeitraum-Dropdown (wie das Zeitfenster-Menü im Strukturbild) */
  /* Zeitraum-Knopf EXAKT wie die Struktur-Auswahl daneben: eckig (10px), gleiche
     Hoehe/Polsterung/Schrift — KEINE Pille (User-Ansage 11.08.) */
  .tfbtn{display:inline-flex;align-items:center;gap:7px;background:var(--chip);border:1px solid var(--line);
    color:var(--ink);border-radius:10px;padding:8px 12px;font:600 .85rem inherit;cursor:pointer;
    white-space:nowrap;min-height:37px;max-width:46vw;overflow:hidden}
  .tfbtn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tfbtn b{color:var(--accent);font-weight:600}
  .tfmenu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);
    border-radius:12px;min-width:180px;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.25);overflow:hidden;padding:5px}
  .tfmenu button{display:block;width:100%;text-align:left;border:none;background:none;color:var(--ink);
    font-family:inherit;font-size:.8rem;padding:9px 12px;border-radius:8px;cursor:pointer}
  .tfmenu button.active{background:var(--accent);color:var(--accent-ink)}
  :root[data-theme="dark"] .chartbox{background:var(--card)}
/* ==== bc/css/modules/analyse/analyse-03.css ==== */
/* BizCal-Modul · analyse-03 · ein2 (Harun 17.10.2026): Fenster Momentum / Partner-Aktivitaet / TV-Block-Ergiebigkeit im neuen Stil.
   Vorlage verbindlich: platform/app/prototyp-modale.html (mo3c, Stand tv12 + mo3). Steht NACH analyse-01.css und ueberschreibt die
   Grundregeln der Boxen (.tb9-*) - gilt im Fenster UND in der PC-Detail-Spalte (dieselben Inhalt-Funktionen).
   hig69: Fenster-Rahmen, Titel/Pfeile, Kacheln, Listen und Umschalter aller Auswertungs-Fenster stehen NUR in fenster-system.css (fw9). */
:root{--haar9:color-mix(in srgb,var(--line) 75%,transparent)}

/* hig69: Fenster-Rahmen (.f9), Kopf, Pfeile -> fenster-system.css (fw9) */

/* ---------- Gemeinsam: Hero, Boxen-Paar, Namenslisten (tv12-Feinschliff) ---------- */
.tb9-hero .tb9-htag{font-size:13px;font-weight:500}
.tb9-zz{margin-top:16px}
.tb9-zz > div{min-width:104px;padding:0 20px}
.tb9-zz > div + div{border-left-color:var(--haar9)}
.tb9-zz b{font-size:40px;font-weight:700;letter-spacing:-.035em}
.tb9-zz > div + div b{font-weight:400;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.tb9-zz span{font-size:12px;font-weight:500;margin-top:5px}
.tb9-avg{font-size:13px;font-weight:500;margin-top:8px}
/* Skala: duenne Bahn, weisser Punkt, liegende Batterien */
.tb9-thermo{max-width:320px;margin-top:16px}
.tb9-bat{height:24px}
.tb9-bat span{opacity:.32}
.tb9-bat span.an{opacity:1}
.tb9-bat svg{width:28px;height:19.5px;overflow:visible}
.tb9-bahn{height:8px;margin-top:6px}
.tb9-z{opacity:.22}
.tb9-mark{width:18px;height:18px;border:0;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.28)}
.tb9-sk{font-size:11px;font-weight:500;margin-top:7px}
.tb9-sk em{border:0;font-weight:600}
/* hig69: Kachel-Optik (.tb9-box/.tb9-duo) -> fenster-system.css (.fw9-kachel/.fw9-paar) */
.tb9-chev{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.tb9-namen{border-top-color:var(--haar9);margin-top:8px}
.tb9-namen li{padding:7px 0;border-bottom-color:var(--haar9);font-size:13px;font-weight:500}
.tb9-namen li i{border-bottom:1px dotted color-mix(in srgb,var(--muted) 35%,transparent)}
.tb9-namen li em{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.25}   /* volle Namen, notfalls zweizeilig */
.tb9-namen li span{font-weight:600}
.tb9-namen .gk9{font-weight:600;letter-spacing:.01em;margin:10px 0 0}
.tb9-nach{font-weight:600}

/* ---------- TV-Block: Zeilen, Akkordeon ---------- */
.tb9-l{border-top-color:var(--haar9)}
.tb9-l > li{border-bottom-color:var(--haar9)}
.tb9-l.neu.klein{border-top-color:var(--haar9)}
.tb9-l.neu.klein > li{border-bottom-color:var(--haar9)}
.tb9-l.neu.klein > li.neu{background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:none;border-radius:12px}
.tb9-l.neu.klein > li.neu .tb9-zeile{padding-left:12px;padding-right:10px}
.tb9-zeile{min-height:52px;padding:8px 4px;gap:12px}
.tb9-zeile .zd{font-size:15px;font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}
.tb9-zeile .zw{font-size:15px;font-weight:600;letter-spacing:-.01em}
.tb9-zeile .zb svg{width:16px;height:22px;overflow:visible}
.tb9-zeile .pf{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.tb9-zeile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}
.tb9-chip{border:0;background:var(--chip);border-radius:6px;padding:2px 6px;font-size:10px;font-weight:600;letter-spacing:.02em}
.tb9-fb{font-size:12px;font-weight:600;letter-spacing:.03em;margin:26px 4px 8px}

/* ---------- Momentum ---------- */
/* Reserve-Zone 38 Grad unter der Waagerechten (ein1c): Tacho 2,1-fach, Kasten so hoch, dass die Reserve nicht in die Boxen ragt */
.mom9f-tacho{position:relative;width:250px;height:156px;margin:-26px auto 0;line-height:0}
.mom9f-tacho.neg{height:196px}   /* ein1k: 30-Grad-Reserve (Unterkante (64 + 24,5) x 2,1 = 186 px) */
.mom9f-tacho.neg .mom9f-z{font-size:40px}   /* ein1j: Zahl frei vom Minus-Bogen */   /* ein1j: Minus bis senkrecht unten (Kreisunterkante 113 x 2,1 = 237 px) */
.mom9f-g{position:absolute;left:18px;top:0;width:102px;height:76px;transform:scale(2.1);transform-origin:0 0;pointer-events:none}
.mom9f-g .kg9-mom{left:0;top:0;margin-left:0;transform:none}   /* Kachel: 0,86-fach + hoeher (analyse-01); im Fenster skaliert .mom9f-g */
.mom9f-g svg.kg9-l{display:block}
.mom9f-z{position:absolute;left:0;right:0;top:96px;display:flex;justify-content:center;align-items:baseline;font-size:40px;font-weight:700;letter-spacing:-.6px;line-height:1;font-variant-numeric:tabular-nums}
.mom9f-z .kg9-w{display:inline-flex;align-items:baseline;white-space:nowrap}
.mom9f-z .pc{font-size:.72em;font-weight:600;margin-left:.1em;letter-spacing:0}
.mom9f-lk{position:absolute;left:50%;top:58px;width:16px;height:15px;transform:translateX(-50%) scale(2);transform-origin:50% 100%;line-height:0}
.mom9f-lk .kg9-lk{position:relative;left:auto;top:auto;margin:0}
.mom9f-deckel{font-size:13px;color:var(--muted);text-align:center;margin:2px 12px 0;line-height:1.35}
/* mom7c (Harun 21.10.2026): Handlungs-Pille (momZiele9) unter den Boxen; Ø duenn + kleiner als die Zahl.
   bewusste Ausnahme, Harun 21.10.2026: diese Pille ist RUND (App-Regel "ALLES ECKIG" gilt hier nicht) - nur .mom9f-badge, sonst nichts.
   Farbe = Akzent des Momentum: Rueckblick-Rosa (negativ) bzw. Ausblick-Gruen (ab 0 %), getoente Flaeche + Akzent-Text (AA, hell wie dunkel). */
.mom9f-ziel{margin:16px 12px 4px;display:flex;justify-content:center}
.mom9f-badge{--mb:#2e9e5e;--mt:color-mix(in srgb,#2e9e5e 62%,#000);display:inline-flex;flex-direction:column;align-items:center;gap:2px;max-width:100%;padding:10px 22px;border-radius:999px !important;border:1px solid color-mix(in srgb,var(--mb) 30%,transparent);background:color-mix(in srgb,var(--mb) 13%,var(--card));color:var(--mt);text-align:center;font-variant-numeric:tabular-nums}
.mom9f-badge.neg{--mb:#E0115F;--mt:color-mix(in srgb,#E0115F 70%,#000)}
.mom9f-badge b{display:block;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.mom9f-badge span{display:block;font-size:12px;font-weight:500;line-height:1.3;opacity:.82}
:root[data-theme="dark"] .mom9f-badge{--mb:#50C878;--mt:#7DDC9C;background:color-mix(in srgb,var(--mb) 16%,var(--card))}
:root[data-theme="dark"] .mom9f-badge.neg{--mb:#F25A8E;--mt:#FF8FB3}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mom9f-badge{--mb:#50C878;--mt:#7DDC9C;background:color-mix(in srgb,var(--mb) 16%,var(--card))}
  :root:not([data-theme="light"]) .mom9f-badge.neg{--mb:#F25A8E;--mt:#FF8FB3}
}
.mom9f-o{font-size:.58em;font-weight:300;letter-spacing:0;margin-right:.14em;vertical-align:.2em;color:var(--muted)}
/* hig69: Momentum-Kachelpaar (Rueckblick VS Ausblick) = Vorlage, jetzt .fw9-paar--vs/.fw9-kachel in fenster-system.css */
/* Saeulen je Tag (aufgeklappt): ruhig, Kopf rund, sanfter Verlauf */
.mom9f-sl{display:grid;gap:4px;border-top:1px solid var(--haar9);margin-top:8px;padding:10px 0 6px}
.mom9f-sl .sp{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:118px;min-width:0}
.mom9f-sl .sn{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px;font-variant-numeric:tabular-nums}
.mom9f-sl .sb{display:block;width:18px;max-width:80%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#F25A8E,#E0115F);opacity:.85}
.b-ja .mom9f-sl .sb{background:linear-gradient(180deg,#7DDC9C,#50C878);opacity:1}
.mom9f-sl .sl{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.15;text-align:center;white-space:nowrap}
.mom9f-sl .sl small{display:block;font-size:10px;font-variant-numeric:tabular-nums}
.mom9f-sl .sl.heute{color:var(--ink);font-weight:700}

/* ---------- Partner-Aktivitaet ---------- */
.gp9f{position:relative;display:block;width:150px;height:150px;margin:-40px auto 0}
.gp9f.fl{margin-top:-6px}
.gp9f-hz{position:absolute;left:0;top:0;display:block;width:150px;height:150px}
.gp9f-hz .kg9-hz{position:relative;display:block}
.gp9f-w{font-size:40px;font-weight:700;letter-spacing:-.6px;line-height:1;margin-top:-4px;color:var(--ink);font-variant-numeric:tabular-nums}
.gp9f-w .pc{font-size:.72em;font-weight:600;margin-left:.1em}
.tb9-hero .gp9-satz{font-size:14px;font-weight:500;margin-top:10px}
.tb9-hero .gp9-fen{font-size:13px;margin-top:4px}


/* ---------- ein3 (Harun 17.10.): TV-Block-Kachel raus, zwei Kennzahl-Kacheln gleich breit; TV-Bloecke im Verlauf ---------- */
#view-analyse #indTv9[hidden]{display:none!important}
#view-analyse #anaKennzahlen9 .ind-grid.ind-zwei9{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#view-analyse.ana-verlauf-zu #anaTvVerlauf9,#anaTvVerlauf9:empty{display:none!important}
.tvv9{margin:8px 0 4px}
.tvv9-kopf{display:flex;align-items:baseline;gap:6px;margin:4px 2px 4px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.tvv9-kopf small{font-size:11px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums;opacity:.8}
.tvv9-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--haar9)}
.tvv9-l > li{border-bottom:1px solid var(--haar9)}
.tvv9-l > li.tvv9-mehr{display:none}
.tvv9.alle .tvv9-l > li.tvv9-mehr{display:block}
.tvv9-z{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:6px 4px;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.tvv9-z:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tvv9-z.lt{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tvv9-d{flex:0 1 auto;min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tvv9-z.lt .tvv9-d b{color:var(--accent);font-weight:700}
.tvv9-z .tb9-chip{display:inline-block;margin:0;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tvv9-b{flex:none;margin-left:auto;line-height:0}
.tvv9-b svg{width:13px;height:18px;overflow:visible;display:block}
.tvv9-w{flex:none;font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tvv9-w b{color:var(--ink);font-weight:700;font-size:14px}
.tvv9-leer{font-size:13px;color:var(--muted);padding:8px 2px}
.tvv9-alle{display:block;margin:6px auto 0;min-height:44px;padding:0 14px;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
@media (max-width:380px){ .tvv9-z .tb9-chip{display:none} }

.tb9 .gp9-v[data-w="stufe"]{display:none}
.tb9.gp9-st .gp9-v[data-w="stufe"]{display:block}
.tb9.gp9-st .gp9-v[data-w="tage"]{display:none}
.mom9f-sl{gap:6px}
.mom9f-sl .sb{width:78%;max-width:40px;min-width:18px}

/* ---------- ein5 (Harun 17.10.: Desktop "viel Leerraum rechts"): Platzverteilung nach Inhaltsbreite (Container-Abfrage) ----------
   < 820 px Inhaltsbreite: alles untereinander (Handy, unveraendert).
   820-1099 px: Terminvereinbarungen | Kennzahlen nebeneinander; Verlauf voll breit, TV-Bloecke darunter.
   >= 1100 px: zusaetzlich Verlauf links (2/3, Graph niedriger) und TV-Bloecke rechts (1/3, scrollt in Graph-Hoehe, alle Bloecke).
   Ueberschreibt die Geraete-Regeln (analyse-01 Zeile "geraet-tablet-breit #anaKopf #anaKennzahlen9", layout-tablet-breit.css) daher mit !important. */
#view-analyse .wrap{container:anawrap / inline-size}
@container anawrap (min-width:820px){
  #view-analyse #anaKopf{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:24px!important;row-gap:0;align-items:start}
  #view-analyse #anaKopf #anaVereinbart9{grid-column:1!important;grid-row:1!important}
  #view-analyse #anaKopf #anaKennzahlen9{grid-column:2!important;grid-row:1!important;border-top:none!important;margin-top:0!important;padding-top:0!important;
    border-left:1px solid var(--line)!important;padding-left:24px!important}
}
@container anawrap (min-width:1100px){
  #view-analyse #anaKopf{grid-template-columns:minmax(0,4fr) minmax(0,3fr)!important}
  #anaVerlauf9{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:24px;align-items:start}
  #anaVerlauf9 > .ana-vkopf9{grid-column:1;grid-row:1}
  #anaVerlauf9 > .chartbox{grid-column:1;grid-row:2}
  #view-analyse #anaVerlauf9 .chartbox canvas{height:300px!important}
  /* TV-Bloecke: eigene Hoehe zaehlt nicht (contain:size) - die Spalte ist so hoch wie Ueberschrift + Graph und scrollt */
  #anaVerlauf9 > #anaTvVerlauf9{grid-column:2;grid-row:1 / span 2;align-self:stretch;contain:size;overflow-y:auto;overscroll-behavior:contain;margin:6px 0 0;
    border-left:1px solid var(--line);padding:0 2px 0 20px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  #anaTvVerlauf9 .tvv9-kopf{position:sticky;top:0;z-index:1;margin:0;padding:8px 2px 8px;background:var(--bg);font-size:1rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ink)}
  #anaTvVerlauf9 .tvv9-l > li.tvv9-mehr{display:block}
  #anaTvVerlauf9 .tvv9-alle{display:none}
}
/* Desktop: Verlauf ist dort immer offen (layout-tablet-breit.css) - TV-Bloecke dann ebenso zeigen */
:root.geraet-tablet-breit #view-analyse.ana-verlauf-zu #anaTvVerlauf9:not(:empty){display:block!important}
/* dk1 (Harun 17.10.): laufender TV-Block auf "Buchen" - Zeile "8 Termine | 6 Teilnehmer" unter dem Countdown (Farbe des Banners),
   aufgeklappt derselbe Block wie im TV-Fenster (tbHero9) auf ruhiger Kartenflaeche. Liegt im Licht-DOM (#tvBuDet9, slot="tvdet"),
   erscheint im Banner des Schattenbaums (buchen-kern.js/.css). Gleit-Muster wie .tb9-auf (grid-template-rows 0fr -> 1fr). */
.tvbd9{display:block;min-width:0;margin-top:4px;cursor:default}
.tvbd9-z{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:6px 0 0;border:0;background:none;color:inherit;
  font:inherit;font-size:.86rem;font-weight:600;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
.tvbd9-z:disabled{cursor:default;opacity:.75}
.tvbd9-z b{font-weight:800;font-size:1rem}
.tvbd9-t{display:flex;align-items:baseline;gap:10px;min-width:0}
.tvbd9-t i{align-self:stretch;width:1px;background:currentColor;opacity:.35}
.tvbd9-b{flex:none;line-height:0}
.tvbd9-b svg{width:14px;height:19px;overflow:visible;display:block}
.tvbd9-z .tb9-chev{margin-left:auto;display:inline-flex;transition:transform .25s ease}
.tvbd9-z[aria-expanded="true"] .tb9-chev{transform:rotate(180deg)}
.tvbd9-auf{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.tvbd9-auf.offen{grid-template-rows:1fr}
.tvbd9-auf > div{overflow:hidden;min-height:0}
.tvbd9-in{margin-top:10px;padding:14px 14px 12px;border-radius:12px;background:var(--card,#fff);color:var(--ink,#1d1d1f);text-align:left}
.tvbd9-in{max-height:max(220px, calc(100vh - 330px));overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}   /* Banner steht im festen Kopf der Buchungsseite - aufgeklappt nie hoeher als der Bildschirm, darunter bleiben Karten/Steuerung scrollbar */
.tvbd9-z .tb9-chev{color:inherit;opacity:.85}
.tvbd9-in .tb9-htag{display:none}   /* "laeuft seit" steht schon im Banner (Countdown) */
@media (prefers-reduced-motion:reduce){ .tvbd9-auf,.tvbd9-z .tb9-chev{transition:none} }
/* ev1 (Harun 17.10.2026): Klartext-Farbmarke der Terminart in den Tages-Fenstern (statt Kuerzel EV/IA/VK ...) -
   Schrift in der Farbe der Art, zarte Flaeche derselben Farbe, Ecken wie .tb9-chip; lange Namen mit Auslassung */
.art9{flex:0 0 auto;align-self:baseline;display:inline-block;max-width:9.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.7rem;font-weight:700;line-height:1.5;padding:0 6px;border-radius:6px;color:var(--art9,var(--muted));
  background:color-mix(in srgb, var(--art9,var(--muted)) 15%, transparent)}
.art9.ab{color:var(--muted);background:var(--chip);text-decoration:line-through}
/* ev1: Veranstaltung im Tages-Fenster - "Gastgeber: …", Gaeste-Zahl rechts, Gaesteliste eingerueckt */
.ev9-z{border-bottom:1px solid var(--line);padding-bottom:6px}
.ev9-gg{display:block;color:var(--muted);font-size:.76rem;margin-top:1px}
.ev9-n{flex:0 0 auto;font-size:.76rem;font-weight:700;color:var(--muted);white-space:nowrap}
.ev9-gl{list-style:none;margin:0 0 0 52px;padding:0}
.ev9-gl li{display:flex;gap:8px;align-items:baseline;padding:2px 0;font-size:.82rem;min-width:0}
.ev9-gl li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev9-gl li small{flex:0 0 auto;color:var(--muted);font-size:.72rem}


/* ein6 (Harun 17.10.): Teilnehmer ohne Leiter-Rechte - Platz 1-3 aufklappbar; bei verborgener Platzierung nur die Zahlen (nicht ausgegraut) */
.tvbd9-z:disabled{opacity:1}
.tvbd9-pod{margin-top:2px;padding-top:2px}

/* ---------- ein8 (Harun 17.10.): Fenster "Terminvereinbarung" - Kuerzel statt abgeschnittener Klartext-Marken, Zeilen zweizeilig,
   volle Namen, am Handy fast volle Breite (16 px Rand, Pfeile dort aus - Wischen blaettert), Umschalter nur Symbole im Kopf ---------- */
.art9.kz9{max-width:none;min-width:28px;text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.02em;padding:2px 6px;line-height:1.35}
.kv9-liste9{display:block}
.kv9-z2{padding:9px 2px 8px;border-bottom:1px solid var(--haar9,var(--line));min-width:0}
.kv9-z2:last-child{border-bottom:0}
.kv9-o{display:flex;align-items:flex-start;gap:8px;min-width:0}
.kv9-o .art9{flex:0 0 auto;margin-top:1px}
.kv9-ein2{flex:0 0 auto;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.5;min-width:36px}
.kv9-kd2{flex:1 1 auto;min-width:0;font-size:.9rem;font-weight:600;line-height:1.3;color:var(--ink);overflow-wrap:anywhere;white-space:normal}
.kv9-u{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:3px;padding-left:36px;font-size:.76rem;color:var(--muted);line-height:1.3}
.kv9-liste9 .kv9-u{padding-left:80px}
.kv9-det .kv9-u{padding-left:36px}
.kv9-von2{min-width:0;overflow-wrap:anywhere}
.kv9-von2 svg{vertical-align:-1px}
.kv9-wann2{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
#anaOverlay .kv9-karte .kv9-det{margin:0 0 6px 2px;padding-left:10px}
#anaOverlay .kv9-wer{padding:8px 2px 2px;font-weight:700}
/* ein10: Kopf-Pfeile (ein9), Symbol-Umschalter im Kopf (ein8) und Balken+Umschalter in einer Zeile entfallen - siehe Block ein10 unten */

/* hig69: ein10/ein13/ein21/ein23-Rahmen, Pfeil-/Titelreihe (.pf9o/.pf9z/.gpo9), Leiste (.kv9-fix) und Umschalter -> fenster-system.css */
#anaOverlay .kv9-balken > div{flex:0 0 auto;min-width:0;box-sizing:border-box;padding:0 2px}   /* nie breiter als der Anteil - Text passt oder wird Zahl/leer (kpiBalkenPassen9) */
#anaOverlay .kv9-balken > div + div{box-shadow:inset 1px 0 0 rgba(255,255,255,.35)}
#anaOverlay .tg9-karte{padding:8px 10px}
#anaOverlay .tg9-karte .kv9-team{margin:0 0 2px}
.tg9-ab{opacity:.6}
.tg9-ab .kv9-kd2,.tg9-ab .kv9-u{text-decoration:line-through}
.art9.kz9.ab{text-decoration:line-through}
.ev9-z2 .ev9-n{flex:0 0 auto;margin:2px 0 0 4px}
.ev9-z2 .ev9-gl{margin:6px 0 0 36px}
/* ein10: Kuerzel-Marken gleich breit (FT-B/FT-R sind laenger als VK) - Kunde und "von …" stehen in allen Zeilen auf einer Kante */
#anaOverlay .art9.kz9{min-width:40px;box-sizing:border-box}
#anaOverlay .kv9-u{padding-left:48px}
#anaOverlay .kv9-liste9 .kv9-u{padding-left:92px}
#anaOverlay .kv9-det .kv9-u{padding-left:48px}
#anaOverlay .ev9-z2 .ev9-gl{margin-left:48px}
/* ein10: dickeres Tacho-Band (KG9M) - Zahl im Fenster etwas kleiner und tiefer, damit sie frei vom Band bleibt */
.mom9f-z,.mom9f-tacho.neg .mom9f-z{font-size:33px;top:102px}
/* ein11: Band noch dicker (Innenradius 24) - Zahl im Fenster kleiner und tiefer, frei von Band und Nadel */
.mom9f-z,.mom9f-tacho.neg .mom9f-z{font-size:28px;top:106px}
/* hig69: ein11-Umschalter im Partner-Kachelpaar entfernt (Umschalter seit ein15 abgeschafft, toter Code) */
/* ein12 (Harun 18.10.): Terminzeilen (Terminvereinbarung + Tages-Fenster, anaZeile9) - Zeile 1 Terminart ausgeschrieben in ihrer Farbe,
   rechts dezent Eintragszeit bzw. Gaeste-Zahl; Zeile 2 "Kunde · von X mit Y" (bricht um, nie abgeschnitten), rechts Datum/Uhrzeit.
   Keine linke Spalte, kompakte Abstaende. */
.kz12{padding:7px 2px 6px;border-bottom:1px solid var(--haar9,var(--line));min-width:0}
.kz12:last-child{border-bottom:0}
.kz12-o{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.kz12-art{min-width:0;font-size:.72rem;font-weight:600;line-height:1.3;letter-spacing:.01em;color:var(--art9,var(--muted));overflow-wrap:anywhere}
:root[data-theme="dark"] .kz12-art{color:color-mix(in srgb,var(--art9,var(--muted)) 70%,#fff)}
.kz12-r1{flex:0 0 auto;font-size:.7rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.kz12-u{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:1px;min-width:0}
.kz12-txt{flex:1 1 auto;min-width:0;font-size:.86rem;line-height:1.32;overflow-wrap:anywhere}
.kz12-txt b{font-weight:600;color:var(--ink)}
.kz12-von{color:var(--muted);font-size:.8rem}
.kz12-wann{flex:0 0 auto;font-size:.76rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.kz12-ab .kz12-art,.kz12-ab .kz12-txt,.kz12-ab .kz12-wann{text-decoration:line-through;opacity:.6}
#anaOverlay .kz12-gl{margin:4px 0 0 10px}
#anaOverlay .kv9-karte .kv9-det{margin:0 0 4px 2px;padding-left:8px}
#anaOverlay .kv9-wer{padding:6px 2px 0}
.kz12-von{display:inline-block;max-width:100%}   /* "von …"/"mit …" bleiben als Einheit zusammen und rutschen als Ganzes in die naechste Zeile */
.kz12-sep{color:var(--muted)}   /* Trennpunkt ausserhalb der Einheit - bricht um, steht er am Zeilenende */
.kz12-ab .kz12-von{text-decoration:line-through}

/* ---------- ein13 (Harun 18.10.: "zu unuebersichtlich") ---------- */
/* Terminzeilen (anaZeile9): Zeile 1 Zeit-Spalte | Badge mit Langfassung | rechts Termin; Zeile 2 eingerueckt "Kunde · von … mit …" einzeilig */
.kz13{padding:7px 2px 6px;border-bottom:1px solid var(--haar9,var(--line));min-width:0}
.kz13:last-child{border-bottom:0}
.kz13-o{display:flex;align-items:center;gap:8px;min-width:0}
.kz13-l{flex:0 0 38px;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#anaOverlay .art9.kz13-b{flex:0 1 auto;max-width:none;min-width:0;white-space:normal;overflow:visible;font-size:.7rem;font-weight:700;line-height:1.35;padding:1px 7px}
.kz13-r{flex:0 0 auto;margin-left:auto;font-size:.76rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.kz13-u{display:flex;align-items:baseline;min-width:0;margin-top:3px;padding-left:46px;white-space:nowrap;font-size:.86rem;line-height:1.3}
.kz13-u b{flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--ink)}
.kz13-rest{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:.8rem;white-space:pre}
.kz13-ab .kz13-u,.kz13-ab .kz13-l,.kz13-ab .kz13-r{text-decoration:line-through;opacity:.6}
#anaOverlay .kz13-gl{margin:4px 0 0 46px}
/* X entfaellt in ALLEN Auswertungs-Fenstern (Schliessen: daneben tippen, Zurueck-Taste, Esc) */
#anaOverlay #anaBox .ana-kopf9 > .zu{display:none !important}
/* hig69: Titel-Pille (.ana-ot9), Partner-Umschalter oben (.gpo9) und Partner-Namenslisten -> fenster-system.css (.fw9-titel, .fw9-kliste) */

/* ---------- ein14 (Harun 18.10.: "zu unuebersichtlich") ---------- */
/* Ueberschriften schlanker (ohne "Aktuelle"), kleiner, weniger Abstand, keine Trennlinien zwischen den Bereichen (Chevron bleibt) */
#view-analyse h2.sect.ana-vk{font-size:.95rem !important;margin:2px 0 4px !important;letter-spacing:-.005em}
#view-analyse #anaKopf .ana-block + .ana-block{border-top:0 !important;padding-top:4px;margin-top:6px}
#view-analyse .ana-trenner9{display:none !important}
#view-analyse .ana-vkopf9{margin:8px 0 4px !important}
/* Zahlen-Kaestchen der Terminvereinbarungen niedriger */
#view-analyse #kpiVereinbart .kpi-card{padding:5px 4px 4px}
#view-analyse #kpiVereinbart .kpi-card .wert{font-size:1.35rem;line-height:1.1}
#view-analyse #kpiVereinbart .kpi-card .lbl{font-size:.68rem;margin-top:1px}
/* Verlauf: Legende unten weg (BF/PS stehen im Graph), Zeitraum-Text steht im Knopf */
#view-analyse #anaMarkerLegende{display:none !important}
#view-analyse #anaBereich{display:none !important}
#view-analyse .tfbtn .tf-zr9{font-weight:600;opacity:.75;white-space:nowrap}
#view-analyse .ana-stand9{margin:4px 0 0 !important}
#view-analyse #tfBtn2{max-width:none;padding-left:10px;padding-right:10px;gap:6px}
#view-analyse #tfBtn2 b{overflow:visible;text-overflow:clip;flex:0 0 auto}   /* ein14: "Monat · 1.10.–31.10." voll lesbar */


/* ---------- ein17 (Harun 18.10.) ---------- */
/* Einheitliche Raender: Chips-Zeile wie der Inhalt (Handy 16 px), Chips fuellen die Breite bis zum Struktur-Knopf */
:root:not(.geraet-tablet-breit) #view-analyse .ana-bar .ana-zeile2{padding-left:16px;padding-right:16px}
#view-analyse .ana-bar .ana-zeile2 .ana-filter{flex:1 1 auto;min-width:0}
#view-analyse .ana-bar .ana-zeile2 .ana-filter button{flex:1 1 0;width:auto;min-width:34px}
/* "Aktualisiert" direkt unter dem Trennstrich */
#view-analyse .ana-stand9{margin:3px 0 -2px !important}
#view-analyse .wrap > .ana-stand9:first-child{margin-top:3px !important}
/* Verlauf-Karte: gleiche Raender wie die anderen Bereiche (nicht mehr randlos), Kopf innen */
#view-analyse #anaVerlauf9 .chartbox{margin-left:0 !important;margin-right:0 !important;border:1px solid var(--line) !important;border-radius:16px;padding:6px 8px 6px;box-sizing:border-box}
body:not(.stil-klassisch) #view-analyse #anaVerlauf9 .chartbox{border-radius:3px}
#view-analyse .ana-vbk9{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;padding:0 2px 2px}
#view-analyse .ana-vbk9 .tfbtn{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;min-height:30px;max-width:none;gap:4px;color:var(--accent);font-size:.84rem}
#view-analyse .ana-vbk9 .tfbtn svg,#view-analyse .ana-vbk9 .tfbtn .tf-zr9{display:none}
#view-analyse .ana-vbk9 .tfbtn b{font-weight:700;color:var(--accent)}
#view-analyse .ana-vbk9 .tfmenu{left:0;right:auto;z-index:20}
#view-analyse .ana-vbz9{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#view-analyse #anaTvVerlauf9{margin-left:0;margin-right:0}
#view-analyse .wrap{padding-top:0 !important}   /* ein17: "Aktualisiert" direkt unter dem Trennstrich der Filterzeile */
#view-analyse #anaKennzahlen9 #indGp9 .lbl{position:relative;z-index:2}   /* ein17: Flammen (100 %) laufen unter dem Titel durch, der Titel bleibt lesbar */
/* ---------- ein18 (Harun 18.10.): kleinere Seitenraender am Handy (12 px ueberall), Struktur-Knopf buendig rechts, BF-Zyklus-Pfeil
   deutlicher, Bereiche gleichmaessig etwas luftiger ---------- */
:root:not(.geraet-tablet-breit) #view-analyse .wrap{padding-left:12px !important;padding-right:12px !important}
:root:not(.geraet-tablet-breit) #view-analyse .ana-bar .ana-zeile2{padding-left:12px;padding-right:12px}
:root:not(.geraet-tablet-breit) #view-analyse .ana-bar .ana-bar-zeile{padding-bottom:6px}   /* mehr Abstand Reiter -> Chips, in der Leistenfarbe */
#view-analyse .ana-bar .ana-zeile2 .ana-struktur9{padding-right:0 !important}
#view-analyse .ana-vbk9 .tfbtn span:last-child{opacity:1 !important;font-size:1.05em !important;color:var(--accent);margin-left:2px}
#view-analyse #anaKopf .ana-block + .ana-block{margin-top:16px !important}
#view-analyse #anaVerlauf9{margin-top:16px}
#view-analyse #anaTvVerlauf9{margin-top:14px}

/* ---------- ein19 (Harun 18.10.) ---------- */
:root:not(.geraet-tablet-breit) #view-analyse .wrap{padding-left:8px !important;padding-right:8px !important}
:root:not(.geraet-tablet-breit) #view-analyse .ana-bar .ana-zeile2{padding-left:8px;padding-right:8px}
/* Zeitraum-Auswahl als dezenter Knopf */
#view-analyse .ana-vbk9 .tfbtn{padding:3px 10px !important;min-height:28px;border-radius:8px;background:color-mix(in srgb,var(--accent) 9%,transparent) !important;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent) !important}
body:not(.stil-klassisch) #view-analyse .ana-vbk9 .tfbtn{border-radius:3px}
/* Verlauf-Karte: weniger Innenabstand, Graph nutzt mehr Flaeche */
#view-analyse #anaVerlauf9 .chartbox{padding:4px 4px 2px}
#view-analyse .ana-vbk9{padding:2px 4px 0}

/* ---------- ein21 (Harun 18.10.) ---------- */
/* Nach Teams: keine linke Zeit-Spalte */
.kz13-ol .kz13-u{padding-left:0}
/* Verlauf: Ladezustand beim Zeitraum-Wechsel (nur wenn noch keine Daten fuer den Zeitraum da sind) */
#view-analyse #anaVerlauf9 .chartbox.laedt9 canvas{opacity:.35;transition:opacity .15s}
#view-analyse #anaVerlauf9 .chartbox{position:relative}
#view-analyse #anaVerlauf9 .chartbox.laedt9::after{content:'lädt …';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.8rem;color:var(--muted)}

/* ---------- ein24 (Harun 18.10.): Terminarten als EIN Auswahl-Knopf links in der Filterzeile, Struktur-Knopf rechts ---------- */
#view-analyse .ana-bar .ana-zeile2 .ana-filter{display:none !important}
#view-analyse .ana-bar .ana-zeile2 .ana-art9{position:relative;flex:0 1 auto;min-width:0;display:flex;align-items:center}
#view-analyse .ana-art-btn9{height:36px;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--chip);color:var(--ink);font:inherit;font-size:.86rem;white-space:nowrap;cursor:pointer;max-width:100%;overflow:hidden}
body:not(.stil-klassisch) #view-analyse .ana-art-btn9{border-radius:3px}
#view-analyse .ana-art-btn9 .aa-l9{color:var(--muted);font-weight:500}
#view-analyse .ana-art-btn9 b{font-weight:700;color:var(--accent);overflow:hidden;text-overflow:ellipsis}
#view-analyse .ana-art-btn9 .aa-p9{color:var(--accent);font-size:.95em}
#view-analyse .ana-art-menu9{left:0;right:auto;top:calc(100% + 6px);min-width:200px;z-index:40}
#view-analyse .ana-art-menu9 button{display:flex;align-items:center;gap:9px;width:100%}
#view-analyse .ana-art-menu9 button.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink)}
#view-analyse .ana-art-menu9 .aa-d9{flex:0 0 auto;width:10px;height:10px;border-radius:50%;display:inline-block}
#view-analyse .ana-art-menu9 .aa-h9{margin-left:auto;color:var(--accent);font-weight:800}
#view-analyse .ana-bar .ana-zeile2{align-items:center}
#view-analyse .ana-bar .ana-zeile2{overflow:visible !important}   /* ein24: Menue der Terminarten darf herausragen */
#view-analyse .ana-bar .ana-zeile2 .ana-struktur9{margin-left:auto !important}

/* ---------- ein27 (Harun 18.10.) ---------- */
/* Desktop: Kopf (Reiter/Filterzeile) ohne graue Flaeche - Seitenhintergrund, Trennstrich bleibt */
:root.geraet-tablet-breit #view-analyse .ana-bar{background:var(--bg)}
/* TV-Bloecke: eigener Bereich, unabhaengig vom Verlauf; zugeklappt nur die Ueberschrift */
#view-analyse.ana-verlauf-zu #anaTvVerlauf9:not(:empty){display:block !important}
#view-analyse #anaTvVerlauf9 .tvv9-h9{display:flex;align-items:center;gap:6px;margin:8px 0 4px !important;cursor:pointer;-webkit-tap-highlight-color:transparent}
#view-analyse #anaTvVerlauf9 .tvv9-h9 small{font-size:.8rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
#view-analyse #anaTvVerlauf9 .tvv9-h9 .ana-vk-pfeil{transform:rotate(180deg)}
#view-analyse.ana-tv-zu9 #anaTvVerlauf9 .tvv9-h9 .ana-vk-pfeil{transform:none}
#view-analyse.ana-tv-zu9 #anaTvVerlauf9 .tvv9-inh{display:none}
@container anawrap (min-width:1100px){
  #anaVerlauf9 > #anaTvVerlauf9{align-self:start;contain:none;overflow:visible;margin:0}
  #anaTvVerlauf9 .tvv9-h9{position:static;background:none}
}
/* Fokus-Rahmen der Bereichs-Ueberschriften nur bei Tastaturbedienung */
#view-analyse h2.ana-vk:focus{outline:none}
#view-analyse h2.ana-vk:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* ein28 (Harun 18.10.): Terminarten-Knopf breiter, gewaehlte Arten als Pillen in den Chip-Farben */
#view-analyse .ana-bar .ana-zeile2 .ana-art9{flex:1 1 auto;max-width:72%;min-width:0}
#view-analyse .ana-art-btn9{width:100%;justify-content:flex-start;gap:7px}
#view-analyse .ana-art-btn9 .aa-l9{flex:0 0 auto}
#view-analyse .ana-art-btn9 .aa-pl9{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}
#view-analyse .ana-art-btn9 .aa-pi9{flex:0 0 auto;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font-size:.74rem;font-weight:700;
  color:#fff;background:var(--aa9,var(--muted));white-space:nowrap}
#view-analyse .ana-art-btn9 .aa-pi9[hidden]{display:none}
#view-analyse .ana-art-btn9 .aa-alle9{background:#fff;color:#1d1d1f;border:1px solid var(--line)}
#view-analyse .ana-art-btn9 .aa-mehr9{background:var(--chip);color:var(--ink);border:1px solid var(--line)}
#view-analyse .ana-art-btn9 .aa-p9{flex:0 0 auto;margin-left:auto}

/* ---------- ein29 (Harun 18.10., Desktop "genauso clean wie Buchen") ---------- */
/* Auswertung am Desktop im SELBEN Rahmen wie die Buchungsseite (layout-tablet-breit.css #kartenBereich): gleiche linke Kante wie
   die Reiter und der Buchen-Inhalt, gleiche Gesamtbreite, gleiche Spalten (Haupt | Seite) und Luecke. Die Masse spiegeln
   --bk-breite/--bk-seite/--bk-luecke der Buchungsseite (dort im Schattenbaum gesetzt, hier nicht erreichbar):
   unter 1400 px 860 | 300, Luecke clamp(20,3vw,40), mittig; ab 1400 px 1180 | 380, Luecke 32, linksbuendig 32 px neben der Leiste. */
:root.geraet-tablet-breit{--af-b9:860px;--af-s9:300px;--af-l9:clamp(20px,3vw,40px);--af-r9:8px;--af-ml9:auto}
@media (min-width:1400px){ :root.geraet-tablet-breit{--af-b9:1180px;--af-s9:380px;--af-l9:32px;--af-r9:32px;--af-ml9:32px} }
:root.geraet-tablet-breit{--af-w9:min(calc(100% - 2 * var(--af-r9)), calc(var(--af-b9) + var(--af-l9) + var(--af-s9)))}
@media (min-width:900px){
  /* Kopf: keine eigene Flaeche, kein Trennstrich (Buchen hat keinen) */
  :root.geraet-tablet-breit body #view-analyse .ana-bar{padding-left:0 !important;padding-right:0 !important;border-bottom:none !important;background:var(--bg) !important;box-shadow:none !important}
  :root.geraet-tablet-breit body #view-analyse .ana-bar > .ana-bar-zeile,
  :root.geraet-tablet-breit body #view-analyse .ana-bar > .ana-zeile2,
  :root.geraet-tablet-breit body #view-analyse > .wrap{
    box-sizing:border-box;width:var(--af-w9) !important;max-width:none !important;padding-left:0 !important;padding-right:0 !important;
    margin-left:var(--af-ml9) !important;margin-right:auto !important;
  }
  /* Raster wie Buchen: links die Hauptspalte, rechts die Seitenspalte (Trennlinie + 16 px wie #tvHeute9) */
  :root.geraet-tablet-breit body #view-analyse #anaKopf{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(240px,var(--af-s9)) !important;column-gap:var(--af-l9) !important;align-items:start}
  :root.geraet-tablet-breit body #view-analyse #anaKopf > #anaVereinbart9{grid-column:1 !important;grid-row:1 !important}
  :root.geraet-tablet-breit body #view-analyse #anaKopf > #anaKennzahlen9{grid-column:2 !important;grid-row:1 !important;border-top:none !important;margin-top:0 !important;padding-top:0 !important;
    border-left:1px solid var(--line) !important;padding-left:16px !important;align-self:stretch}
  :root.geraet-tablet-breit body #view-analyse #anaVerlauf9{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(240px,var(--af-s9)) !important;grid-template-rows:auto auto;column-gap:var(--af-l9) !important;align-items:start}
  :root.geraet-tablet-breit body #view-analyse #anaVerlauf9 > .ana-vkopf9{grid-column:1;grid-row:1}
  :root.geraet-tablet-breit body #view-analyse #anaVerlauf9 > .chartbox{grid-column:1;grid-row:2}
  :root.geraet-tablet-breit body #view-analyse #anaVerlauf9 > #anaTvVerlauf9{grid-column:2;grid-row:1 / span 2;align-self:stretch;contain:none;overflow:visible;margin:0 !important;
    border-left:1px solid var(--line);padding:0 0 0 16px}
}
@media (min-width:900px){
  /* Terminarten-Knopf endet an der Kante der Hauptspalte (wie die Kacheln darunter), Struktur steht rechts ueber der Seitenspalte */
  :root.geraet-tablet-breit body #view-analyse .ana-bar .ana-zeile2 .ana-art9{max-width:calc(100% - var(--af-s9) - var(--af-l9))}
}

/* ---------- nav2 (Harun 18.10., Desktop-Auswertung): keine schmale rechte Spalte mehr ---------- */
/* Oben Terminvereinbarungen | Kennzahlen ausgewogen nebeneinander (55/45 der Inhaltsbreite statt Kennzahlen in der 300/380-px-
   Seitenspalte), darunter in voller Breite der Verlauf und darunter die TV-Bloecke (gleiche Breite wie der Verlauf, nichts
   abgeschnitten). Linke Kante/Gesamtbreite unveraendert wie Buchen (ein29); Struktur-Knopf rechtsbuendig, "Aktualisiert" darunter rechts. */
@media (min-width:900px){
  :root.geraet-tablet-breit body #view-analyse #anaKopf{grid-template-columns:minmax(0,55fr) minmax(0,45fr) !important}
  :root.geraet-tablet-breit body #view-analyse #anaVerlauf9{grid-template-columns:minmax(0,1fr) !important;grid-template-rows:auto auto auto}
  :root.geraet-tablet-breit body #view-analyse #anaVerlauf9 > #anaTvVerlauf9{grid-column:1;grid-row:3;align-self:start;border-left:none;padding:0;margin:14px 0 0 !important;contain:none;overflow:visible}
  /* volle Breite: wieder die ersten 6 Zeilen + "Alle N anzeigen" (die Spalten-Sicht zeigte alle, weil sie scrollte) */
  :root.geraet-tablet-breit body #view-analyse #anaTvVerlauf9:not(.alle) .tvv9-l > li.tvv9-mehr{display:none}
  :root.geraet-tablet-breit body #view-analyse #anaTvVerlauf9 .tvv9-alle{display:block}
  /* Terminarten-Knopf endet an der Kante der linken Spalte (wie die Kacheln darunter) */
  :root.geraet-tablet-breit body #view-analyse .ana-bar .ana-zeile2 .ana-art9{max-width:calc((100% - var(--af-l9)) * .55)}
}

/* ---------- tv14 (Harun 18.10.): Terminleiste = EINE Karte (Vorlage prototyp-terminleiste.html, Variante N) ---------- */
/* vorgestern | gestern | heute exakt gleich breit, Balken mit Zahl (gemeinsame Skala, tlMalen9), vorgestern/gestern blasser, heute
   neutral kraeftiger; LIVE-Badge "letzte 3 h" kompakt im Kopf von heute (Spaltenbreite bleibt); unter heute "gestern bis jetzt: N"
   (Zahl in Akzentfarbe) und im Heute-Balken ein 1-px-Strich in Akzentfarbe ueber die volle Balkenhoehe. Akzent = --accent je Theme
   (dunkel Lila, hell Cyan), kein Verlauf. */
#view-analyse .ana-kz9{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#view-analyse .tl9-stand{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#kpiVereinbart.tl9{--tl9-leer:rgba(0,0,0,.06);--tl9-bar:rgba(0,0,0,.16);--tl9-bar-alt:rgba(0,0,0,.08);--tl9-soft:color-mix(in srgb,var(--accent) 20%,transparent);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-sizing:border-box}
:root[data-theme="dark"] #kpiVereinbart.tl9{--tl9-leer:rgba(255,255,255,.11);--tl9-bar:rgba(255,255,255,.24);--tl9-bar-alt:rgba(255,255,255,.12);--tl9-soft:color-mix(in srgb,var(--accent) 26%,transparent)}
#kpiVereinbart .tl9-z{position:relative;display:flex;flex-direction:column;min-width:0;cursor:pointer;outline:none;border-radius:8px;transition:transform .12s ease,opacity .12s;-webkit-tap-highlight-color:transparent}
/* Trennlinie in der Spaltenluecke (nicht als Innenabstand) - so sind alle drei Balken exakt gleich breit */
#kpiVereinbart .tl9-z + .tl9-z::before{content:"";position:absolute;left:-10.5px;top:0;bottom:0;width:1px;background:var(--line)}
#kpiVereinbart .tl9-z:active{transform:scale(.97);opacity:.75}
#kpiVereinbart .tl9-z:focus-visible{box-shadow:0 0 0 2px var(--tl9-soft)}
#kpiVereinbart .tl9-kopf{display:flex;align-items:center;justify-content:space-between;gap:4px;height:16px;min-width:0}
#kpiVereinbart .tl9-t{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;line-height:1;white-space:nowrap}
#kpiVereinbart .tl9-z.heute .tl9-t{color:var(--ink)}
#kpiVereinbart .tl9-bahn{position:relative;height:26px;border-radius:7px;background:var(--tl9-leer);margin-top:7px;overflow:hidden}
#kpiVereinbart .tl9-bar{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:7px;background:var(--tl9-bar-alt);transition:width .45s cubic-bezier(.2,.8,.2,1)}
#kpiVereinbart .tl9-z.heute .tl9-bar{background:var(--tl9-bar)}
#kpiVereinbart .tl9-n{position:absolute;top:0;bottom:0;left:6px;display:flex;align-items:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
#kpiVereinbart .tl9-z.heute .tl9-n{color:var(--ink)}
#kpiVereinbart .tl9-n.innen{left:8px}
#kpiVereinbart .tl9-strich{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);pointer-events:none;transition:left .45s cubic-bezier(.2,.8,.2,1)}
#kpiVereinbart .tl9-strich[hidden]{display:none}
#kpiVereinbart .tl9-unter{display:flex;gap:.28em;font-size:11px;color:var(--muted);margin-top:6px;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.2;min-width:0}
#kpiVereinbart .tl9-unter span{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* sehr grosse Zahl: Text kuerzt, die Zahl bleibt ganz */
#kpiVereinbart .tl9-unter b{flex:0 0 auto}
@media (max-width:519px){#kpiVereinbart .tl9-unter{font-size:10px;gap:.24em}}   /* Handy: "gestern bis jetzt: 123" passt in die gleich breite Spalte */
#kpiVereinbart .tl9-unter b{color:var(--accent);font-weight:700}
#kpiVereinbart .tl9-live{display:inline-flex;align-items:center;gap:3px;height:16px;padding:0 5px;border:0;border-radius:8px;flex:0 0 auto;cursor:pointer;
  background:var(--tl9-soft);color:var(--accent);font-family:inherit;font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
#kpiVereinbart .tl9-live i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto;animation:tl9Puls 2.4s ease-in-out infinite}
#kpiVereinbart .tl9-live small{font-size:9.5px;font-weight:500;letter-spacing:0;opacity:.85;display:none}
#kpiVereinbart .tl9-live.lang9 small{display:inline}
#kpiVereinbart .tl9-live.null{background:var(--chip);color:var(--muted)}
#kpiVereinbart .tl9-live.null i{background:var(--muted);opacity:.5;animation:none}
@keyframes tl9Puls{0%,100%{box-shadow:0 0 0 0 var(--tl9-soft);opacity:1}50%{box-shadow:0 0 0 4px transparent;opacity:.55}}
@media (prefers-reduced-motion:reduce){
  #kpiVereinbart .tl9-live i{animation:none}
  #kpiVereinbart .tl9-bar,#kpiVereinbart .tl9-strich,#kpiVereinbart .tl9-z{transition:none}
}
/* Rundung wie die Nachbarn: Karte 4 px wie die Kennzahlen-Kacheln (v1421), Balken eckig (v445 "alles eckig"), LIVE als Pille, Punkt rund */
body:not(.stil-klassisch) #kpiVereinbart.tl9{border-radius:4px !important}
#kpiVereinbart .tl9-live{border-radius:8px !important}
#kpiVereinbart .tl9-live i{border-radius:50% !important}
/* v2045 (Harun 18.10., "Kloetze sehen schwachsinnig aus"): grosse Zahl oben, darunter nur eine 4-px-Linie mit runden Enden; Strich "gestern bis jetzt" ragt etwas ueber die Linie */
#kpiVereinbart .tl9-bahn{height:4px;border-radius:2px !important;margin-top:36px;overflow:visible}
#kpiVereinbart .tl9-bar{border-radius:2px !important}
#kpiVereinbart .tl9-n,#kpiVereinbart .tl9-n.innen{left:0 !important;top:auto;bottom:calc(100% + 7px);font-size:22px;font-weight:800;line-height:1;letter-spacing:-.01em}
#kpiVereinbart .tl9-strich{top:-4px;bottom:-4px;border-radius:1px}
#kpiVereinbart .tl9-unter{margin-top:9px}
/* v2046 (Harun 18.10.): "Alle"-Pille folgt dem Theme - dunkel: hell mit dunkler Schrift, hell: dunkel mit heller Schrift */
#view-analyse .ana-art-btn9 .aa-alle9{background:var(--ink);color:var(--bg);border-color:transparent}
/* v2046: Terminleiste - Zahlen so gross wie "44 %" bei Aktivitaet, Linien deutlich sichtbar (vorher kaum erkennbar) */
#kpiVereinbart .tl9-n,#kpiVereinbart .tl9-n.innen{font-size:26px}
#kpiVereinbart .tl9-bahn{margin-top:40px}
#kpiVereinbart.tl9{--tl9-leer:color-mix(in srgb,var(--ink) 9%,transparent) !important;--tl9-bar-alt:color-mix(in srgb,var(--ink) 38%,transparent) !important;--tl9-bar:color-mix(in srgb,var(--ink) 80%,transparent) !important}
/* hig1 (Apple-Grau fuer Karten) am 18.10. zurueckgenommen - Harun: "das Graue gefaellt mir ueberhaupt nicht" */
/* hig3 (Harun 18.10., Wahl "Fast schwarz"): dunkel - Karten und Knoepfe der Auswertung kaum heller als der Grund (#0a0a0c), ohne Rand */
:root[data-theme="dark"] #view-analyse{--fs9-karte:#121215}
:root[data-theme="dark"] #view-analyse #kpiVereinbart,:root[data-theme="dark"] #view-analyse .ind-card,:root[data-theme="dark"] #view-analyse #anaVerlauf9 .chartbox,
:root[data-theme="dark"] #view-analyse .ana-art-btn9,:root[data-theme="dark"] #view-analyse #strselHost button,:root[data-theme="dark"] #view-analyse #tfBtn2{
  background:var(--fs9-karte) !important;border-color:transparent !important;box-shadow:none !important}
/* hig5 (Harun 18.10.): Live-Anzeige gruen (wie die Heute-Linie), Heute-ZAHL in Akzentfarbe hervorgehoben (nicht die Flaeche);
   "gestern bis jetzt" + Strich bleiben lila (Akzent) */
#kpiVereinbart{--tl9-live:#00b37a}
:root[data-theme="dark"] #kpiVereinbart{--tl9-live:#34d399}
#kpiVereinbart .tl9-live{background:color-mix(in srgb,var(--tl9-live) 18%,transparent) !important;color:var(--tl9-live) !important}
#kpiVereinbart .tl9-live i{background:var(--tl9-live) !important;animation-name:tl9PulsGruen !important}
@keyframes tl9PulsGruen{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tl9-live) 35%,transparent);opacity:1}50%{box-shadow:0 0 0 4px transparent;opacity:.55}}
#kpiVereinbart .tl9-live.null{background:var(--chip) !important;color:var(--muted) !important}
#kpiVereinbart .tl9-live.null i{background:var(--muted) !important;animation:none !important}
/* hig6 (Harun 18.10., "heute nicht in lila"): Heute-Zahl in Textfarbe, dafuer groesser */
#kpiVereinbart .tl9-z.heute .tl9-n{color:var(--ink) !important;font-size:32px !important}
/* hig7: zu viele Arten fuer die Breite -> nur Farbkaestchen (Name im title), keine "+N"-Pille */
#view-analyse .ana-art-btn9 .aa-pl9.aa-quad9{gap:4px}
#view-analyse .ana-art-btn9 .aa-pl9.aa-quad9 .aa-pi9{width:10px;height:18px;padding:0;border-radius:3px;font-size:0;line-height:0;overflow:hidden}
/* hig8 (Harun 18.10.): "Termine gelegt" klein und gedaempft hinter der Zahl */
#kpiVereinbart .tl9-n[data-einh9]::after{content:attr(data-einh9);margin-left:6px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted);align-self:flex-end;padding-bottom:3px}
/* hig10 (Harun 18.10.): Fokus auf Heute - Vorgestern/Gestern je 25 %, Heute 50 % der Breite; "Termine gelegt" wieder weg (unnoetiger Text) */
#kpiVereinbart.tl9{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) !important}
#kpiVereinbart .tl9-n[data-einh9]::after{content:none !important}
/* hig12 (Harun 18.10.): Heute-Balken nur halb so lang wie die Spalte (= gleich lang wie Vorgestern/Gestern, Balken wieder vergleichbar);
   alle drei Balken dicker (8 px) */
#kpiVereinbart .tl9-bahn{height:8px !important;border-radius:4px !important}
#kpiVereinbart .tl9-bar{border-radius:4px !important}
#kpiVereinbart .tl9-z.heute .tl9-bahn{width:calc(50% - 10px)}
/* hig14: heutige Termine nach Art in der rechten Haelfte der Heute-Spalte (auf Hoehe der Zahl) */
#kpiVereinbart .tl9-arten{position:absolute;left:calc(50% + 10px);right:0;top:30px;height:24px;display:flex;gap:2px;border-radius:6px;overflow:hidden}
#kpiVereinbart .tl9-arten[hidden]{display:none}
#kpiVereinbart .tl9-arten span{min-width:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
/* hig15: Heute nach Art als ruhige Liste statt Farbkloetze */
#kpiVereinbart .tl9-arten{top:24px !important;height:auto !important;display:flex !important;flex-direction:column;gap:3px !important;border-radius:0 !important;overflow:visible !important}
#kpiVereinbart .tl9-arten > div{display:flex;align-items:center;gap:7px;font-size:12px;line-height:16px;color:var(--muted);min-width:0}
#kpiVereinbart .tl9-arten > div i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
#kpiVereinbart .tl9-arten > div span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kpiVereinbart .tl9-arten > div b{flex:0 0 auto;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
#kpiVereinbart .tl9-arten > .mehr9{font-size:11px;padding-left:14px}
/* hig17 (Harun 18.10., "die Darstellung in Farben macht die ganze Aufmachung kaputt"): Heute nach Art ausgeblendet */
#kpiVereinbart .tl9-arten{display:none !important}
/* hig18: Partner aktiv heute - einfarbig, gleiche Typografie wie die Zahlen links */
#kpiVereinbart .tl9-partner{position:absolute;left:calc(50% + 10px);right:0;top:24px;display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:14px;min-width:0}
#kpiVereinbart .tl9-partner b{font-size:26px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#kpiVereinbart .tl9-partner span{font-size:11px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kpiVereinbart .tl9-partner small{font-size:11px;color:var(--muted);margin-top:4px;opacity:.75}
/* hig20 (Harun 18.10., Wahl "Frei lassen"): rechte Haelfte der Heute-Spalte bleibt leer */
#kpiVereinbart .tl9-partner{display:none !important}
/* hig21: Zuletzt gelegt + Top-3 heute - einfarbig, feine Trennlinie links */
#kpiVereinbart .tl9-rechts9{position:absolute;left:calc(50% + 10px);right:0;top:24px;bottom:0;border-left:1px solid var(--line);padding-left:14px;display:flex;flex-direction:column;gap:3px;min-width:0;font-size:12px;line-height:16px}
#kpiVereinbart .tl9-rechts9[hidden]{display:none}
#kpiVereinbart .tlr9-zul{display:flex;flex-direction:column;margin-bottom:5px}
#kpiVereinbart .tlr9-zul span:first-child{color:var(--ink);font-weight:600}
#kpiVereinbart .tlr9-zul span:last-child{color:var(--muted);font-size:11px}
#kpiVereinbart .tlr9-top{display:flex;justify-content:space-between;gap:8px;color:var(--muted);min-width:0}
#kpiVereinbart .tlr9-top span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kpiVereinbart .tlr9-top b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* hig22: Desktop - Terminarten als Schalter-Leiste direkt in der Zeile statt Auswahl-Knopf */
#view-analyse .ana-art-leiste9{display:none}
@media (min-width:1100px){
  #view-analyse .ana-bar .ana-zeile2 .ana-art9{display:none !important}
  #view-analyse .ana-art-leiste9{display:flex;flex:1 1 auto;min-width:0;flex-wrap:wrap;align-items:center;gap:6px}
  #view-analyse .ana-art-leiste9 button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
  #view-analyse .ana-art-leiste9 button i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:.55}
  #view-analyse .ana-art-leiste9 button:hover{color:var(--ink)}
  #view-analyse .ana-art-leiste9 button.an{background:var(--chip);color:var(--ink);border-color:transparent}
  #view-analyse .ana-art-leiste9 button.an i{opacity:1}
}
/* hig23 (Harun 18.10.: "aktualisiert reicht"): "Stand HH:MM" der Terminleiste entfaellt - "Aktualisiert" steht schon oben */
#view-analyse .tl9-stand{display:none !important}
/* hig24: Desktop - Struktur-Schnellwahl (ICH, NEU, RS, LV, ALLE) als Schalter links neben dem Struktur-Waehler, gleicher Stil wie die Terminarten-Schalter */
#view-analyse .ana-str-leiste9{display:none}
@media (min-width:1100px){
  #view-analyse .ana-str-leiste9{display:flex;flex:0 0 auto;align-items:center;gap:6px;margin:0 10px 0 16px}
  #view-analyse .ana-str-leiste9 button{height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.03em;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
  #view-analyse .ana-str-leiste9 button:hover{color:var(--ink)}
  #view-analyse .ana-str-leiste9 button.an{background:var(--chip);color:var(--ink);border-color:transparent}
}
/* hig27 (Harun 18.10.): Live oben rechts in der linken Haelfte (ueber dem Heute-Balken); Letzter Eintrag als EIN kompaktes Rechteck, einfarbig; Ranking-Liste im Fenster */
#kpiVereinbart .tl9-z.heute .tl9-kopf{width:calc(50% - 10px)}
#kpiVereinbart .tl9-rechts9{left:calc(50% + 10px);right:0;top:0;bottom:0;border-left:0;padding:6px 10px;gap:1px;justify-content:center;box-sizing:border-box;overflow:hidden;border-radius:9px;background:color-mix(in srgb,var(--ink) 5%,transparent);font-size:12px;line-height:15px}
#kpiVereinbart .tl9-rechts9 > span,#kpiVereinbart .tl9-rechts9 .tlr9-n{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kpiVereinbart .tlr9-k{color:var(--muted);font-size:10.5px}
#kpiVereinbart .tlr9-n{display:flex !important;align-items:baseline;gap:6px}
#kpiVereinbart .tlr9-n b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:700}
#kpiVereinbart .tlr9-n em{flex:0 0 auto;font-style:normal;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
#kpiVereinbart .tlr9-a{color:var(--ink)}
@media (max-width:519px){#kpiVereinbart .tl9-rechts9{left:calc(50% + 4px);padding:5px 7px;font-size:11px}#kpiVereinbart .tlr9-n{gap:4px}}
#anaOverlay .kv9-rang9 .rg9{display:inline-block;min-width:1.6em;font-style:normal;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
/* hig28: Letzte Eintraege - Name volle Breite links, Minuten rechts; Kopf klein */
#kpiVereinbart .tl9-rechts9{padding:6px 10px !important;gap:2px !important}
#kpiVereinbart .tlr9-k{margin-bottom:2px}
#kpiVereinbart .tlr9-n{justify-content:space-between;gap:8px !important}
#kpiVereinbart .tlr9-n b{font-weight:600 !important;font-size:12px}
/* hig30 (Harun 18.10.: "Man erkennt nichts!!! Mach es lieber leer - die gruene Pille wieder zurueck, aber groesser"):
   Rechteck "Letzte Eintraege" weg, Live-Pille wieder oben rechts an der Heute-Spalte (hig27-Breite zurueck), deutlich groesser;
   Klick = Insel (tlInsel9, analyse.js) wie Dynamic Island / Uhr */
#kpiVereinbart .tl9-rechts9{display:none !important}
#kpiVereinbart .tl9-z.heute .tl9-kopf{width:auto}
#kpiVereinbart .tl9-kopf{overflow:visible}
#kpiVereinbart .tl9-live{height:27px;padding:0 12px;gap:6px;font-size:13px;border-radius:13.5px !important;position:relative;z-index:1}
#kpiVereinbart .tl9-live i{width:7px;height:7px}
#kpiVereinbart .tl9-live small{font-size:12px}
#kpiVereinbart .tl9-live[aria-expanded="true"]{visibility:hidden}
@keyframes tl9PulsGruen{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tl9-live) 40%,transparent);opacity:1}50%{box-shadow:0 0 0 5px transparent;opacity:.55}}
.tl-insel9{--tl9-live:#00b37a;--tli9-ende:color-mix(in srgb,var(--tl9-live) 12%,#0b0d0c);position:fixed;z-index:9000;box-sizing:border-box;
  border-radius:20px;background:var(--tli9-start,var(--tli9-ende));color:#f2f5f3;outline:none;overflow:hidden;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tl9-live) 0%,transparent);
  transition:clip-path .3s cubic-bezier(.32,.72,0,1),-webkit-clip-path .3s cubic-bezier(.32,.72,0,1),background-color .22s ease,box-shadow .3s ease}
:root[data-theme="dark"] .tl-insel9{--tl9-live:#34d399;--tli9-ende:color-mix(in srgb,var(--tl9-live) 10%,#050606)}
.tl-insel9.auf9{background:var(--tli9-ende);box-shadow:0 0 0 1px color-mix(in srgb,var(--tl9-live) 30%,transparent),0 18px 40px rgba(0,0,0,.35)}
.tl-insel9.null{--tl9-live:#8a8f8c}
.tl-insel9 .tli9-k{display:flex;align-items:center;justify-content:space-between;gap:10px;height:27px;padding-left:16px}
.tl-insel9 .tli9-t{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .12s ease}
.tl-insel9 .tli9-p{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 12px;flex:0 0 auto;color:var(--tl9-live);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-insel9 .tli9-p i{width:7px;height:7px;border-radius:50%;background:var(--tl9-live);animation:tl9PulsGruen 2.4s ease-in-out infinite}
.tl-insel9.null .tli9-p i{animation:none;opacity:.6}
.tl-insel9 .tli9-p small{font-size:12px;font-weight:500;opacity:.85}
.tl-insel9 .tli9-l{list-style:none;margin:6px 0 0;padding:0 8px;max-height:calc(8 * 32px);overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .12s ease}
.tl-insel9 .tli9-l li{display:flex;align-items:center;justify-content:space-between;gap:12px;height:32px;padding:0 8px;border-top:1px solid rgba(255,255,255,.07);font-size:13px}
.tl-insel9 .tli9-l li:first-child{border-top:0}
.tl-insel9 .tli9-l li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:#fff}
.tl-insel9 .tli9-l li em{flex:0 0 auto;font-style:normal;font-size:12px;color:color-mix(in srgb,var(--tl9-live) 70%,#fff);font-variant-numeric:tabular-nums}
.tl-insel9 .tli9-l li.leer9{justify-content:center;color:rgba(255,255,255,.6);font-size:12.5px;height:44px}
.tl-insel9 .tli9-alle{display:block;margin:4px 0 0 auto;padding:8px 16px 12px;border:0;background:none;color:var(--tl9-live);font:inherit;font-size:12px;font-weight:600;cursor:pointer;opacity:0;transition:opacity .12s ease}
.tl-insel9 .tli9-alle:hover{text-decoration:underline}
.tl-insel9.auf9 .tli9-t,.tl-insel9.auf9 .tli9-l,.tl-insel9.auf9 .tli9-alle{opacity:1;transition:opacity .18s ease .14s}
.tl-insel9.ruhig9{transition:opacity .15s ease;opacity:0;background:var(--tli9-ende)}
.tl-insel9.ruhig9.auf9{opacity:1}
@media (prefers-reduced-motion:reduce){.tl-insel9{transition:opacity .15s ease}.tl-insel9 .tli9-p i{animation:none}}
.tl-insel9{border-radius:20px !important}
.tl-insel9 .tli9-p i{border-radius:50% !important}
/* hig32: Pille morpht zur Ueberschrift - gleitet von ihrem Platz nach links, "● N · 3 h" blendet aus, "Letzte 3 Stunden · N" ein */
.tl-insel9 .tli9-k{position:relative;display:block !important;height:27px;padding:0 !important}
.tl-insel9 .tli9-p{position:absolute !important;top:0;box-sizing:border-box;justify-content:flex-end;overflow:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tl-insel9.auf9 .tli9-p{transform:translateX(var(--tli9-dx,0px))}
.tl-insel9 .tli9-pa{display:inline-flex;align-items:center;gap:6px;transition:opacity .14s ease}
.tl-insel9.auf9 .tli9-pa{opacity:0}
.tl-insel9 .tli9-t{position:absolute;left:16px;top:0;line-height:27px;opacity:0 !important;transition:opacity .18s ease .12s !important;overflow:visible !important}
.tl-insel9.auf9 .tli9-t{opacity:1 !important}
@media (prefers-reduced-motion:reduce){.tl-insel9 .tli9-p{transition:none}}
/* hig34: "N Termine" in der Pille ausgeschrieben */
#kpiVereinbart .tl9-live .tl9-einh9{font-weight:600;white-space:pre}
/* hig35 (Harun 18.10.: "nicht wenn es zu ist, wenn es auf ist"): geschlossene Pille wieder nur die Zahl */
#kpiVereinbart .tl9-live .tl9-einh9{display:none}
/* hig36 (Harun 18.10.: "im hellen Modus ist die Insel noch dunkel"): heller Modus - Insel hell mit dunkler Schrift, gruener Hauch */
:root[data-theme="light"] .tl-insel9{--tli9-ende:color-mix(in srgb,var(--tl9-live) 7%,#ffffff);color:#1d1d1f}
:root[data-theme="light"] .tl-insel9.auf9{box-shadow:0 0 0 1px color-mix(in srgb,var(--tl9-live) 35%,transparent),0 14px 32px rgba(0,0,0,.14)}
:root[data-theme="light"] .tl-insel9 .tli9-t,:root[data-theme="light"] .tl-insel9 .tli9-l li span{color:#1d1d1f}
:root[data-theme="light"] .tl-insel9 .tli9-l li{border-top-color:rgba(0,0,0,.07)}
:root[data-theme="light"] .tl-insel9 .tli9-l li em{color:color-mix(in srgb,var(--tl9-live) 80%,#000)}
:root[data-theme="light"] .tl-insel9 .tli9-l li.leer9{color:rgba(0,0,0,.55)}
/* hig37 (Harun 18.10.: "Pille im Ursprung kleiner"): geschlossene Pille 21 px, Inhalt in der Insel gleich gross (nahtloses Morphen) */
#kpiVereinbart .tl9-live{height:21px;padding:0 9px;gap:5px;font-size:11.5px;border-radius:10.5px !important}
#kpiVereinbart .tl9-live i{width:6px;height:6px}
#kpiVereinbart .tl9-live small{font-size:10.5px}
.tl-insel9 .tli9-pa{font-size:11.5px;gap:5px}
.tl-insel9 .tli9-pa i{width:6px !important;height:6px !important}
.tl-insel9 .tli9-pa small{font-size:10.5px}
.tl-insel9 .tli9-p{height:21px;padding:0 9px}
.tl-insel9 .tli9-k{height:21px}
.tl-insel9 .tli9-t{line-height:21px}
/* hig38: Pille kann auch unten sitzen - gleitet dann hoch zur Ueberschrift (hig40: Heute-Pille entfallen, gilt fuer die Ranking-Ecke) */
.tl-insel9 .tli9-p{top:0}
.tl-insel9.auf9 .tli9-p{transform:translate(var(--tli9-dx,0px),var(--tli9-dy,0px))}
/* hig39 (Harun 18.10.: "Position der Modale fixieren - oben fest, unten bis ganz nach unten, danach scrollen"), hig40-Korrektur
   (Harun 18.10.): NUR Terminvereinbarung (kpi) und Tages-Termine (tag) - Partner-Aktivitaet, Momentum, TV bleiben mittig wie vorher.
   Fenster-Oberkante (.modalbox) fest bei 40 % der Seitenhoehe, die Pfeil-/Titel-Zeile (48 px + 10 px Abstand) steht darueber;
   das Fenster waechst nur nach unten bis zum Rand, dann scrollt der Inhalt im Fenster (Umschalter bleibt kleben). */
#anaOverlay:is([data-art9="kpi"],[data-art9="tag"]).on{align-items:flex-start !important;align-content:flex-start !important;
  padding-top:calc(max(66px, 30vh) - 58px) !important;padding-bottom:0 !important}
#anaOverlay:is([data-art9="kpi"],[data-art9="tag"]) .modalbox{max-height:calc(100dvh - max(66px, 30vh) - 5vh - env(safe-area-inset-bottom,0px)) !important;overflow-y:auto;overscroll-behavior:contain}
/* hig48 (Harun 19.10.): Oberkante 30 % statt 40 %, unten immer 5 % Abstand zum Rand */
/* ---------- hig41 (Harun 18.10.) ---------- */
/* Terminarten-Knopf am Handy/Tablet bis an den Struktur-Knopf (statt max. 72 % bzw. Spaltenkante); Desktop ab 1100 px = Schalter-Leiste (hig22) unveraendert */
@media (max-width:1099.98px){
  #view-analyse .ana-bar .ana-zeile2 .ana-art9,
  :root.geraet-tablet-breit body #view-analyse .ana-bar .ana-zeile2 .ana-art9{flex:1 1 auto;max-width:none !important}
}
/* Hochzaehlen ohne Wackeln */
#view-analyse #momWert,#view-analyse #indMom9 .wert,#kpiVereinbart .tl9-n{font-variant-numeric:tabular-nums}
/* Einlaufen: Tagesbalken wachsen von links; Herzschlag pocht um die Herzmitte */
#kpiVereinbart .tl9-bar{transform-origin:0 50%}
#view-analyse #indGp9 .gp9-kh{transform-origin:50% 50%;will-change:transform}
@media (prefers-reduced-motion:reduce){ #view-analyse #indGp9 .gp9-kh{will-change:auto} }
/* ---------- hig43 (Harun 18.10.: "Das Ranking passt gar nicht ins Bild. Es soll nach unten oeffnen und wirklich dynamisch sein,
   so wie bei Dynamic Island, so wie bei der Uhr") ----------
   Ranking-Ausloeser = Pille in der Bildsprache der Live-Pille (21 px, Radius, Schrift, Abstaende), neutral statt gruen:
   dunkel ink 10 % + weiss, hell ink 10 % + Anthrazit. Pokal-Glyph + Vorname des Tagesersten (+N). Rechtsbuendig wie Live,
   Unterkante auf "gestern bis jetzt" (tlRangLage9). Ersetzt die Ecke/das Podium-Icon von hig40-hig42. */
#kpiVereinbart.tl9{position:relative}
#kpiVereinbart .tl9-rang9{--tl9-rtext:#2b2b2e;position:absolute;display:inline-flex;align-items:center;gap:5px;height:21px;max-width:min(200px,calc(50% - 20px));
  padding:0 9px;margin:0;border:0;border-radius:10.5px !important;box-sizing:border-box;flex:0 0 auto;cursor:pointer;z-index:1;
  background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--tl9-rtext);font-family:inherit;font-size:11.5px;font-weight:700;line-height:1;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
:root[data-theme="dark"] #kpiVereinbart .tl9-rang9{--tl9-rtext:#fff}
#kpiVereinbart .tl9-rang9[hidden]{display:none}
#kpiVereinbart .tl9-rang9:active{transform:scale(.95)}
#kpiVereinbart .tl9-rang9:focus-visible{outline:2px solid color-mix(in srgb,var(--ink) 40%,transparent);outline-offset:1px}
#kpiVereinbart .tl9-rang9[aria-expanded="true"]{visibility:hidden}
#kpiVereinbart .tl9-rang9 svg,.tl-insel9.rang9 .tli9-pa svg{width:11px;height:11px;flex:0 0 auto;display:block}
#kpiVereinbart .tl9-rang9 .tl9-rn9,.tl-insel9.rang9 .tli9-pa .tl9-rn9{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kpiVereinbart .tl9-rang9 b,.tl-insel9.rang9 .tli9-pa b{flex:0 0 auto;font-weight:600;opacity:.65}
/* Insel neutral: --tl9-live = Anthrazit bzw. gedaempftes Weiss (die Mechanik mischt daraus Rand/Schatten), Grund hell/dunkel */
.tl-insel9.rang9{--tl9-live:#2b2b2e;--tl9-rtext:#2b2b2e;--tli9-ende:#f6f6f7;color:#2b2b2e}
:root[data-theme="dark"] .tl-insel9.rang9{--tl9-live:rgba(255,255,255,.85);--tl9-rtext:#fff;--tli9-ende:#141416;color:#f2f5f3}
.tl-insel9.rang9 .tli9-p{color:var(--tl9-rtext)}
.tl-insel9.rang9 .tli9-pa{min-width:0;font-weight:700}
.tl-insel9.rang9 .tli9-t,.tl-insel9.rang9 .tli9-l li span,.tl-insel9.rang9 .tli9-l li em{color:var(--tl9-rtext)}
.tl-insel9.rang9 .tli9-l{padding-bottom:6px}
.tl-insel9.rang9 .tli9-l li{gap:10px;justify-content:flex-start}
.tl-insel9.rang9 .tli9-l li .tli9-pl9{flex:0 0 30px;display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:12.5px;font-weight:700;opacity:.55;font-variant-numeric:tabular-nums}
.tl-insel9.rang9 .tli9-l li.erst9 .tli9-pl9{opacity:.95}
.tl-insel9.rang9 .tli9-l li .tli9-pl9 svg{width:11px;height:11px}
.tl-insel9.rang9 .tli9-l li span{flex:1 1 auto}
.tl-insel9.rang9 .tli9-l li em{margin-left:auto;font-size:13px;font-weight:700;opacity:.85}
:root:not([data-theme="dark"]) .tl-insel9.rang9 .tli9-l li{border-top-color:rgba(0,0,0,.07)}
/* Bewegung beider Inseln (WATCH_APP_SPEC 5.3 Dynamic Island): Aufgehen mit Feder (leichtes Ueberschwingen, clip-path + Pille),
   dazu federt die Insel um den Pillen-Ursprung (tlInselFeder9, WAAPI). Zeilen gestaffelt (35 ms, leicht von oben).
   Schliessen schneller, ohne Ueberschwingen. Nur clip-path/transform/opacity. */
.tl-insel9{transition:clip-path .44s cubic-bezier(.34,1.32,.64,1),-webkit-clip-path .44s cubic-bezier(.34,1.32,.64,1),background-color .22s ease,box-shadow .3s ease}
.tl-insel9 .tli9-p{transition:transform .44s cubic-bezier(.34,1.32,.64,1)}
.tl-insel9 .tli9-l{opacity:1 !important;transition:none !important}
.tl-insel9 .tli9-l li{opacity:0;transform:translateY(-5px);transition:opacity .2s ease,transform .32s cubic-bezier(.34,1.32,.64,1)}
.tl-insel9.auf9 .tli9-l li{opacity:1;transform:none;transition-delay:calc(150ms + var(--i9,0) * 35ms)}
.tl-insel9.zu9{transition:clip-path .24s cubic-bezier(.4,0,.2,1),-webkit-clip-path .24s cubic-bezier(.4,0,.2,1),background-color .18s ease,box-shadow .2s ease}
.tl-insel9.zu9 .tli9-p{transition:transform .24s cubic-bezier(.4,0,.2,1)}
.tl-insel9.zu9 .tli9-l li{transition:opacity .08s ease,transform .08s ease;transition-delay:0s}
.tl-insel9.zu9 .tli9-t{transition:opacity .08s ease !important}
.tl-insel9.zu9 .tli9-pa{transition:opacity .14s ease .08s}
.tl-insel9.ruhig9 .tli9-l li{transform:none;transition:opacity .15s ease;transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .tl-insel9,.tl-insel9.zu9{transition:opacity .15s ease}
  .tl-insel9 .tli9-p,.tl-insel9 .tli9-l li{transform:none !important;transition:opacity .15s ease !important}
  #kpiVereinbart .tl9-rang9{transition:none}#kpiVereinbart .tl9-rang9:active{transform:none}
}
#kpiVereinbart .tl9-rang9.eng9 b{display:none}
/* hig46 (Harun 19.10.): Live-Pille oben rechts und Pokal-Knopf unten rechts spiegelbildlich in den Ecken der Karte - gleicher Abstand
   zu rechtem und oberem bzw. unterem Rand (--tl9-eck). Karte ringsum gleich gepolstert, damit "gestern bis jetzt" auf der Knopf-Unterkante endet.
   Pokal-Knopf: quadratisch (Hoehe der Pille), nur Pokal, kein Name/keine Zahl. */
#kpiVereinbart.tl9{--tl9-eck:10px;position:relative;padding:var(--tl9-eck) !important}
#kpiVereinbart .tl9-live{position:absolute !important;top:0;right:0;margin:0 !important}   /* Bezug = Heute-Spalte; deren Oberkante/rechte Kante liegen genau --tl9-eck innerhalb der Karte */
#kpiVereinbart .tl9-rang9{right:var(--tl9-eck) !important;bottom:var(--tl9-eck) !important;width:21px !important;min-width:21px;max-width:21px !important;height:21px !important;padding:0 !important;gap:0 !important;justify-content:center;border-radius:6px !important}
#kpiVereinbart .tl9-rang9 .tl9-rn9,#kpiVereinbart .tl9-rang9 b{display:none !important}
#kpiVereinbart .tl9-rang9 svg{width:12px;height:12px}
/* hig47 (Harun 19.10.): Pokal-Knopf doppelt so gross (42x42); offene Ranking-Insel mit 5 px mehr Luft oben */
#kpiVereinbart .tl9-rang9{width:42px !important;min-width:42px;max-width:42px !important;height:42px !important;border-radius:10px !important}
#kpiVereinbart .tl9-rang9 svg{width:22px;height:22px}
.tl-insel9.rang9 .tli9-pa svg{width:22px;height:22px}
.tl-insel9.rang9 .tli9-t{top:5px}
.tl-insel9.rang9 .tli9-k{height:26px}
.tl-insel9.rang9 .tli9-l{margin-top:10px}
/* hig49 (Harun 19.10.: "zu klobig", Wahl "Pokal wippt"): keine Kachel mehr - nur der Pokal (weiss/anthrazit, 26 px) in der 42-px-Tippflaeche;
   alle 10 s ein kleines Huepfen mit kurzem Funkeln oben rechts. Bewegung reduziert: steht still. */
#kpiVereinbart .tl9-rang9{background:transparent !important;border:0 !important;box-shadow:none !important;overflow:visible !important}
#kpiVereinbart .tl9-rang9 svg{width:26px !important;height:26px !important;color:var(--tl9-rtext);fill:currentColor;transform-origin:50% 100%;animation:tl9Wipp 10s ease-in-out infinite}
#kpiVereinbart .tl9-rang9::after{content:"";position:absolute;right:6px;top:4px;width:7px;height:7px;pointer-events:none;opacity:0;
  background:var(--tl9-rtext);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tl9Funk 10s ease-in-out infinite}
@keyframes tl9Wipp{0%,88%,100%{transform:none}91%{transform:translateY(-4px) rotate(-6deg)}94%{transform:translateY(0) rotate(4deg)}96.5%{transform:translateY(-1.5px) rotate(-2deg)}}
@keyframes tl9Funk{0%,90%,100%{opacity:0;transform:scale(.3)}92.5%{opacity:1;transform:scale(1) rotate(20deg)}96%{opacity:0;transform:scale(.6) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){#kpiVereinbart .tl9-rang9 svg,#kpiVereinbart .tl9-rang9::after{animation:none}}
/* hig50 (Harun 19.10.): auch "Letzte 3 Stunden" mit 5 px mehr Luft oben (wie Ranking, hig47) */
.tl-insel9:not(.rang9) .tli9-t{top:5px}
.tl-insel9:not(.rang9) .tli9-k{height:26px}
.tl-insel9:not(.rang9) .tli9-l{margin-top:10px}
/* hig51 (Harun 19.10.): Spalten 22 % | 22 % | 56 % (Heute breiter); Heute-Balken bleibt so lang wie die anderen (22/56 der Spalte) */
#kpiVereinbart.tl9{grid-template-columns:minmax(0,22fr) minmax(0,22fr) minmax(0,56fr) !important}
#kpiVereinbart .tl9-z.heute .tl9-bahn{width:calc(100% * 22 / 56)}
/* hig52: Vorgestern/Gestern ohne Balken (Zahl bleibt - sie haengt an .tl9-bahn), darunter bei Gestern die Veraenderung zum Vortag */
#kpiVereinbart .tl9-z:not(.heute) .tl9-bahn{background:transparent !important}
#kpiVereinbart .tl9-z:not(.heute) .tl9-bar{display:none !important}
#kpiVereinbart .tl9-delta9{margin-top:9px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);line-height:1.2}
#kpiVereinbart .tl9-delta9.auf9{color:var(--ok)}
#kpiVereinbart .tl9-delta9.ab9{color:var(--rot)}
/* hig53 (Harun 19.10.): +/- unter Gestern wieder weg (zu unruhig); Heute-Balken deutlich laenger (Platz bis kurz vor den Pokal);
   Pokal ganz in die Ecke unten rechts: Glyph 5 px vom Rand (Tippflaeche 42 px, Glyph 26 px -> 8 px Innenluft -> -3 px) */
#kpiVereinbart .tl9-delta9{display:none !important}
#kpiVereinbart .tl9-z.heute .tl9-bahn{width:calc(100% - 44px) !important}
#kpiVereinbart .tl9-rang9{right:-3px !important;bottom:-3px !important}
/* hig55: Wochentag + Datum unter Vorgestern/Gestern - gedaempft, auf Hoehe von "gestern bis jetzt" */
#kpiVereinbart .tl9-datum9{margin-top:auto;padding-top:9px;font-size:11px;color:var(--muted);line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
/* hig56 (Harun 19.10.): Datum wieder weg (leer lassen); "gestern bis jetzt" naeher an den Balken, Karte unten niedriger, Pokal etwas hoeher */
#kpiVereinbart .tl9-datum9{display:none !important}
#kpiVereinbart .tl9-z.heute .tl9-unter{margin-top:4px !important}
#kpiVereinbart.tl9{padding-bottom:6px !important}
#kpiVereinbart .tl9-rang9{bottom:2px !important}
/* hig57 (Harun 19.10.): Spalten 23 % | 23 % | 54 %
 */
#kpiVereinbart.tl9{grid-template-columns:minmax(0,23fr) minmax(0,23fr) minmax(0,54fr) !important}
/* hig59 (Harun 19.10.: "Filter immer so breit wie noetig - bei Alle viel zu breit"): Terminarten-Knopf passt sich dem Inhalt an,
   waechst hoechstens bis an den Struktur-Knopf (dann greifen Kuerzel -> Farbkaestchen wie gehabt) */
#view-analyse .ana-bar .ana-zeile2 .ana-art9,
:root.geraet-tablet-breit body #view-analyse .ana-bar .ana-zeile2 .ana-art9{flex:0 1 auto !important;max-width:none !important;min-width:0}
#view-analyse .ana-art-btn9{width:auto !important;max-width:100%;min-width:0}
#view-analyse .ana-art-btn9 .aa-pl9{flex:0 1 auto !important;min-width:0}
#view-analyse .ana-art-btn9 .aa-p9{margin-left:4px !important}

/* ---------- hig60 (Harun 19.10.): weiche Uebergaenge ----------
   Heute-Balken waechst bei neuem Wert sichtbar (0,6 s ease-out), der Strich "gestern bis jetzt" gleitet mit - erst nach dem Einlaufen
   (.tl9-weich9 setzt anaEinlauf9), vorher keine Breiten-Transition (kein Doppelanimieren mit dem Einlaufen).
   Desktop-Schalterleisten: Geister-Markierung .lst9-gh gleitet vom alten zum neuen aktiven Knopf (anaLeisteGleit9). */
#kpiVereinbart:not(.tl9-weich9) .tl9-bar{transition:none}
#kpiVereinbart.tl9-weich9 .tl9-bar{transition:width .6s cubic-bezier(.22,.8,.3,1)}
#kpiVereinbart.tl9-weich9 .tl9-strich{transition:left .6s cubic-bezier(.22,.8,.3,1)}
#view-analyse .ana-art-leiste9,#view-analyse .ana-str-leiste9{position:relative}
#view-analyse .ana-art-leiste9 button,#view-analyse .ana-str-leiste9 button{position:relative}
#view-analyse .lst9-gh{position:absolute;pointer-events:none;box-sizing:border-box}
#view-analyse .ana-art-leiste9 button.gl9,#view-analyse .ana-str-leiste9 button.gl9{background:transparent !important;transition:none}
@media (prefers-reduced-motion: reduce){
  #kpiVereinbart.tl9-weich9 .tl9-bar,#kpiVereinbart.tl9-weich9 .tl9-strich{transition:none}
  #view-analyse .lst9-gh{display:none}
}
/* hig69: Listenraster hig61/hig63/hig64 + Vermittler-Streifen hig66 (.zk61*) -> fenster-system.css (.fw9-gruppe/.fw9-zeile/.fw9-streifen) */
/* ---------- hig62 (Harun 19.10.): Ziffern rollen (anaHoch9) - nur transform; alte Ziffer = ::before (kein Text) ---------- */
.rz9{display:inline-block !important;position:relative !important;overflow:hidden !important;vertical-align:top !important;margin:0 !important;padding:0 !important;
  font:inherit !important;color:inherit !important;letter-spacing:inherit !important;line-height:inherit !important;font-variant-numeric:tabular-nums}
.rz9i{display:inline-block !important;position:relative !important;margin:0 !important;padding:0 !important;font:inherit !important;color:inherit !important;letter-spacing:inherit !important;will-change:transform}
.rz9i::before{content:attr(data-a);position:absolute;left:0;right:0;bottom:100%;text-align:center}
#view-analyse .kg9-wn,#view-analyse .tl9-n{font-variant-numeric:tabular-nums}
/* hig62: Fuehrungswechsel - Funken am Pokal (tlJubel9) */
#kpiVereinbart .tl9-rang9 .tl9-funke9{position:absolute;width:7px;height:7px;pointer-events:none;opacity:0;background:var(--tl9-rtext);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
#kpiVereinbart .tl9-rang9 svg{backface-visibility:visible}
/* hig62: Heute-Balken - Tagesziel-Glanz (einmal, tlGlanz9) und feiner Ruhe-Schimmer alle ~6 s (nur transform) */
#kpiVereinbart .tl9-z.heute .tl9-bar{overflow:hidden}
#kpiVereinbart .tl9-z.heute .tl9-bar .tl9-glanz9{position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0,color-mix(in srgb,var(--accent) 45%,#fff) 50%,transparent 100%);opacity:.9}
#kpiVereinbart .tl9-z.heute .tl9-bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(100deg,transparent 0,color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.2)) 50%,transparent 100%);animation:tl9Schimmer9 6s ease-in-out infinite}
@keyframes tl9Schimmer9{0%,72%{transform:translateX(-110%)}92%,100%{transform:translateX(340%)}}
/* hig62: Verlauf - Live-Punkt Heute (anaHeutePunkt9) */
.ana-heute9{position:absolute;width:0;height:0;pointer-events:none;z-index:1;transition:opacity .2s ease}
.ana-heute9[hidden]{display:none}
.ana-heute9.weg9{opacity:0}
/* hig66 (Harun 19.10.: "schwarzes Quadrat mit grauem Kasten"): die globale Eckig-Regel (body:not(.stil-klassisch) ... border-radius) machte
   Punkt und Ring eckig, der Ring war eine gefuellte Flaeche -> Punkt + Ring jetzt fest rund, Ring nur als duenner Kreis in Linienfarbe */
.ana-heute9::before,.ana-heute9::after{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;box-sizing:border-box;border-radius:50% !important;box-shadow:none !important}
.ana-heute9::before{background:var(--hp9,var(--ink));opacity:.95}
.ana-heute9::after{background:transparent !important;border:1.5px solid var(--hp9,var(--ink));opacity:0;animation:anaHp9 2s ease-out infinite}
.ana-heute9.ruht9::after{animation-play-state:paused}
@keyframes anaHp9{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
/* hig62: TV-Bloecke - laufender Block: Batterie laedt sanft (Fuellung + Glanz pulsen ~1,8 s) */
#anaTvVerlauf9 .tvv9-z.lt .tvv9-b svg > rect[fill],#anaTvVerlauf9 .tvv9-z.lt .tvv9-b svg > g{animation:tvv9Lade9 1.8s ease-in-out infinite}
#anaTvVerlauf9 .tvv9-z.lt .tvv9-b svg > g{animation-name:tvv9Glanz9}
@keyframes tvv9Lade9{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes tvv9Glanz9{0%,100%{opacity:.25}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  #kpiVereinbart .tl9-z.heute .tl9-bar::after{animation:none;display:none}
  .ana-heute9::after{animation:none;display:none}
  #anaTvVerlauf9 .tvv9-z.lt .tvv9-b svg > rect[fill],#anaTvVerlauf9 .tvv9-z.lt .tvv9-b svg > g{animation:none}
}
/* ---------- hig62 (Harun 19.10.): EIN Abstand zwischen den Bereichen (--ana-abst9) - offen zwischen Inhalt (Karten-Unterkante) und
   naechster Ueberschrift UND zugeklappt zwischen den Ueberschriften. Alte Einzel-Abstaende (Inline-margins der Ueberschriften,
   #anaKennzahlen9 / #anaVerlauf9 / .tvv9 / .ana-vkopf9) neutralisiert. Desktop: Terminvereinbarungen|Kennzahlen nebeneinander, darunter
   Verlauf, darunter TV-Bloecke - gleiche Regel. ---------- */
#view-analyse{--ana-abst9:35px}
#view-analyse #anaKopf{row-gap:var(--ana-abst9)}
html:root:root body #view-analyse #anaKopf > .ana-block{margin-top:0 !important;padding-top:0 !important}
html:root:root body #view-analyse h2.ana-vk{margin-top:0 !important}
html:root:root body #view-analyse #anaVerlauf9{margin-top:var(--ana-abst9) !important}
#view-analyse #anaVerlauf9 .ana-vkopf9{margin-top:0 !important}
html:root:root body #view-analyse #anaVerlauf9 > #anaTvVerlauf9{margin-top:var(--ana-abst9) !important;margin-bottom:0 !important}
#view-analyse #anaTvVerlauf9 .tvv9-h9{margin-top:0 !important}
/* zugeklappt: kein Rest-Abstand unter der Ueberschrift - sonst waere der Abstand zur naechsten Ueberschrift groesser */
#view-analyse.ana-ver-zu9 #anaVereinbartKopf9,#view-analyse.ana-kenn-zu9 #anaKennzahlenKopf9,
#view-analyse.ana-verlauf-zu #anaVerlauf9 .ana-vkopf9,html:root:root body #view-analyse.ana-verlauf-zu .ana-vkopf9 > h2.ana-vk,#view-analyse.ana-tv-zu9 #anaTvVerlauf9 .tvv9-h9{margin-bottom:0 !important}
/* hig69: Rahmen hig67 + Momentum/Partner hig68 -> fenster-system.css (EIN Designsystem fuer alle Auswertungs-Fenster, Doku docs/FENSTER_DESIGNSYSTEM.md) */
/* ---------- hig75 (Harun 19.10.): Pokal in Gold + Ranking-Insel in Gold + ruhige Insel-Animation ----------
   Pokal: warmer Gold-Verlauf #F5C542 -> #C8941E mit dezentem Glanz. Das Pokal-SVG (TL_POKAL9, Klasse .tlp9-pk) bekommt den Verlauf als
   Hintergrund, die Form kommt aus einer Maske (gleicher Pfad) - so traegt jede Stelle (Knopf, Pille in der Insel, Platz 1) denselben Verlauf.
   Funken (::after / tl9-funke9) in Gold. Hell: leichter dunkler Schatten am Knopf fuer Kontur auf weissem Grund. */
.tl9-rang9,.tl-insel9.rang9{--tl9-gold-hell:#F5C542;--tl9-gold:#E0AE2E;--tl9-gold-tief:#C8941E}
#kpiVereinbart .tl9-rang9 svg.tlp9-pk,.tl-insel9.rang9 svg.tlp9-pk,.tl-drop9 svg.tlp9-pk{color:transparent !important;fill:transparent !important;
  background:linear-gradient(118deg,transparent 30%,rgba(255,250,225,.55) 44%,transparent 56%),linear-gradient(180deg,var(--tl9-gold-hell) 0%,var(--tl9-gold) 48%,var(--tl9-gold-tief) 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2.5h10a1 1 0 0 1 1 1V4h2.2a1 1 0 0 1 1 1v1.3a4.2 4.2 0 0 1-3.9 4.2A6 6 0 0 1 13 14.4V17h2.6a1 1 0 0 1 1 1v1.6H7.4V18a1 1 0 0 1 1-1H11v-2.6a6 6 0 0 1-4.3-3.9 4.2 4.2 0 0 1-3.9-4.2V5a1 1 0 0 1 1-1H6v-.5a1 1 0 0 1 1-1zM4.8 6v.3A2.2 2.2 0 0 0 6.2 8.4 6 6 0 0 1 6 7V6H4.8zm14.4 0H18v1a6 6 0 0 1-.2 1.4 2.2 2.2 0 0 0 1.4-2.1V6zM6.4 20.6h11.2a.9.9 0 0 1 0 1.8H6.4a.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2.5h10a1 1 0 0 1 1 1V4h2.2a1 1 0 0 1 1 1v1.3a4.2 4.2 0 0 1-3.9 4.2A6 6 0 0 1 13 14.4V17h2.6a1 1 0 0 1 1 1v1.6H7.4V18a1 1 0 0 1 1-1H11v-2.6a6 6 0 0 1-4.3-3.9 4.2 4.2 0 0 1-3.9-4.2V5a1 1 0 0 1 1-1H6v-.5a1 1 0 0 1 1-1zM4.8 6v.3A2.2 2.2 0 0 0 6.2 8.4 6 6 0 0 1 6 7V6H4.8zm14.4 0H18v1a6 6 0 0 1-.2 1.4 2.2 2.2 0 0 0 1.4-2.1V6zM6.4 20.6h11.2a.9.9 0 0 1 0 1.8H6.4a.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E") center/contain no-repeat}
#kpiVereinbart .tl9-rang9{--tl9-rtext:var(--tl9-gold);filter:drop-shadow(0 1px 1.5px rgba(120,80,0,.28))}
:root[data-theme="dark"] #kpiVereinbart .tl9-rang9{--tl9-rtext:var(--tl9-gold-hell);filter:drop-shadow(0 0 6px rgba(245,197,66,.22))}
/* Ranking-Insel in Gold - wie die Live-Insel ihr Gruen: Grund leicht gold getoent, Rand gold, Ueberschrift gold; Inhalt neutral lesbar */
.tl-insel9.rang9{--tl9-live:#C8941E;--tl9-rtext:#1d1d1f;--tli9-ende:color-mix(in srgb,#E0AE2E 9%,#ffffff);color:#1d1d1f}
:root[data-theme="dark"] .tl-insel9.rang9{--tl9-live:#F5C542;--tl9-rtext:#f4efe2;--tli9-ende:color-mix(in srgb,#E0AE2E 11%,#0b0b0a);color:#f4efe2}
.tl-insel9.rang9.auf9{box-shadow:0 0 0 1px color-mix(in srgb,var(--tl9-live) 38%,transparent),0 14px 32px rgba(0,0,0,.16)}
:root[data-theme="dark"] .tl-insel9.rang9.auf9{box-shadow:0 0 0 1px color-mix(in srgb,var(--tl9-live) 32%,transparent),0 18px 40px rgba(0,0,0,.4)}
.tl-insel9.rang9 .tli9-t{color:#9a6f12 !important}
:root[data-theme="dark"] .tl-insel9.rang9 .tli9-t{color:#F5C542 !important}
.tl-insel9.rang9 .tli9-l li{border-top-color:color-mix(in srgb,#C8941E 16%,transparent) !important}
.tl-insel9.rang9 .tli9-l li em{color:#9a6f12}
:root[data-theme="dark"] .tl-insel9.rang9 .tli9-l li em{color:#F5C542}
/* Ruhige Insel (wie Dynamic Island / Uhr, WATCH_APP_SPEC 5.3): EIN weicher Morph der Form (clip-path = Breite/Hoehe/Radius) ohne
   Ueberschwingen, Pille gleitet mit derselben Kurve; Liste blendet als Ganzes leicht verzoegert ein (kein Zeilen-Stagger, kein scale);
   Schliessen ruhig zurueck in die Pille (~300 ms). Weniger Bewegung: Regeln oben (nur Einblenden) bleiben. */
@media (prefers-reduced-motion:no-preference){
  .tl-insel9{transition:clip-path .42s cubic-bezier(.32,.72,0,1),-webkit-clip-path .42s cubic-bezier(.32,.72,0,1),background-color .42s cubic-bezier(.32,.72,0,1),box-shadow .42s ease}
  .tl-insel9 .tli9-p{transition:transform .42s cubic-bezier(.32,.72,0,1)}
  .tl-insel9 .tli9-l{opacity:0 !important;transition:opacity .1s ease !important}
  .tl-insel9.auf9 .tli9-l{opacity:1 !important;transition:opacity .26s ease .14s !important}
  .tl-insel9 .tli9-l li,.tl-insel9.auf9 .tli9-l li,.tl-insel9.zu9 .tli9-l li{opacity:1;transform:none;transition:none;transition-delay:0s}
  .tl-insel9 .tli9-t{transition:opacity .26s ease .14s !important}
  .tl-insel9.zu9{transition:clip-path .3s cubic-bezier(.32,.72,0,1),-webkit-clip-path .3s cubic-bezier(.32,.72,0,1),background-color .3s ease,box-shadow .2s ease}
  .tl-insel9.zu9 .tli9-p{transition:transform .3s cubic-bezier(.32,.72,0,1)}
  .tl-insel9.zu9 .tli9-t{transition:opacity .1s ease !important}
  .tl-insel9.zu9 .tli9-pa{transition:opacity .16s ease .1s}
}
/* hig76 (Harun 19.10.): Einheit "T" (= Termine) hinter jeder Zahl - gleiche Groesse, duenne Schrift. Live-Pille statt " · 3 h" nur "4T". */
#kpiVereinbart .tl9-live small,#kpiVereinbart .tl9-live.lang9 small,.tl-insel9 .tli9-p small,.tl-insel9 .tli9-pa small{display:inline !important;font-size:inherit !important;font-weight:300 !important;opacity:1 !important;margin-left:-2px}
#kpiVereinbart .tl9-n::after,#kpiVereinbart .tl9-n[data-einh9]::after{content:'T' !important;font-size:inherit !important;font-weight:300 !important;color:inherit !important;margin-left:1px !important;padding:0 !important;align-self:auto !important;letter-spacing:0 !important}
/* hig77 (Harun 19.10.: "Pokal springt beim Zuklappen"): gemessen - Insel-Pokal 22 px, echter 26 px und 2 px hoeher; am Ende verschwand
   der getoente Pillengrund schlagartig (echter Knopf ist frei, ohne Grund). Jetzt: gleiche Groesse/Lage, Grund+Rand blenden beim Zuklappen
   aus, sodass die Insel nahtlos in den echten Pokal uebergeht. */
.tl-insel9.rang9 .tli9-pa svg{width:26px !important;height:26px !important;margin:-1px 0 0 1px}
.tl-insel9.rang9.zu9{background-color:transparent !important;box-shadow:none !important;transition:clip-path .3s cubic-bezier(.32,.72,0,1),-webkit-clip-path .3s cubic-bezier(.32,.72,0,1),background-color .3s ease,box-shadow .2s ease !important}
/* hig78 (Harun 19.10.: "Pokal einfach ueberblenden, der bleibt einfach da"): der echte Pokal bleibt immer sichtbar (nicht mehr versteckt,
   solange die Insel offen ist); die Insel traegt KEINEN eigenen Pokal mehr. Oeffnen: Insel blendet ueber dem Pokal ein und waechst;
   Schliessen: Insel zieht sich zurueck und blendet aus - darunter steht der Pokal unveraendert. Kein Wechsel zweier Pokale = kein Sprung. */
#kpiVereinbart .tl9-rang9[aria-expanded="true"]{visibility:visible !important}
.tl-insel9.rang9 .tli9-pa{opacity:0 !important;visibility:hidden}
.tl-insel9.rang9{opacity:0}
.tl-insel9.rang9.auf9{opacity:1}
.tl-insel9.rang9.zu9{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .tl-insel9.rang9{transition:clip-path .42s cubic-bezier(.32,.72,0,1),-webkit-clip-path .42s cubic-bezier(.32,.72,0,1),background-color .42s cubic-bezier(.32,.72,0,1),box-shadow .42s ease,opacity .22s ease !important}
  .tl-insel9.rang9.zu9{transition:clip-path .3s cubic-bezier(.32,.72,0,1),-webkit-clip-path .3s cubic-bezier(.32,.72,0,1),background-color .3s ease,box-shadow .2s ease,opacity .3s ease !important}
}
/* hig82 (Harun 19.10.: "Warum ist der BF-Zyklus-Schalter so verschieden?"): hig3 setzte im Dunkelmodus #tfBtn2 auf Kartengrund ohne Rand -
   der getoente Chip verschwand (nur Text). Jetzt in beiden Modi derselbe Chip: Akzent-Hauch + Akzent-Rand (Farbe = Akzent des Modus). */
:root[data-theme="dark"] #view-analyse .ana-vbk9 #tfBtn2{background:color-mix(in srgb,var(--accent) 14%,var(--fs9-karte,#121215)) !important;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent) !important}
/* hig84 (Harun 19.10.): Ranking als Drop-down unter dem Pokal statt Insel - Optik wie die Menues der Auswertung (.tfmenu: Kartengrund,
   Rand --line, Rundung 12, Schatten), Bewegung mit der Fenster-Kurve --fw9-kurve: auf 260 ms (opacity + 8 px nach unten), zu 200 ms.
   Gold-Toene der Liste wie hig75 (Ueberschrift, Zahl, Trennlinien, Pokal bei Platz 1). */
.tl-drop9{position:fixed;z-index:9000;box-sizing:border-box;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);padding:5px;outline:none;overflow:hidden;
  --tl9-gold-hell:#F5C542;--tl9-gold:#E0AE2E;--tl9-gold-tief:#C8941E;--tld9-ton:#9a6f12;
  opacity:0;transform:translateY(-8px);transition:opacity .26s var(--fw9-kurve,cubic-bezier(.32,.72,0,1)),transform .26s var(--fw9-kurve,cubic-bezier(.32,.72,0,1))}
:root[data-theme="dark"] .tl-drop9{--tld9-ton:#F5C542}
.tl-drop9.oben9{transform:translateY(8px)}
.tl-drop9.auf9{opacity:1;transform:none}
.tl-drop9.zu9{opacity:0;transform:translateY(-8px);transition-duration:.2s}
.tl-drop9.oben9.zu9{transform:translateY(8px)}
.tl-drop9.ruhig9,.tl-drop9.ruhig9.zu9{transform:none;transition:opacity .15s ease}
@media (prefers-reduced-motion:reduce){.tl-drop9,.tl-drop9.oben9,.tl-drop9.zu9{transform:none;transition:opacity .15s ease}}
.tl-drop9 .tli9-k{padding:7px 10px 4px}
.tl-drop9 .tli9-t{display:block;font-size:12px;font-weight:700;color:var(--tld9-ton)}
.tl-drop9 .tli9-l{list-style:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain}
.tl-drop9 .tli9-l li{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-top:1px solid color-mix(in srgb,#C8941E 16%,transparent);font-size:13px}
.tl-drop9 .tli9-l li:first-child{border-top:0}
.tl-drop9 .tli9-l li span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.tl-drop9 .tli9-l li em{flex:0 0 auto;margin-left:auto;font-style:normal;font-size:13px;font-weight:700;color:var(--tld9-ton);font-variant-numeric:tabular-nums}
.tl-drop9 .tli9-l li.leer9{justify-content:center;color:var(--muted);font-size:12.5px;height:40px}
.tl-drop9 .tli9-l li .tli9-pl9{flex:0 0 30px;display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:12.5px;font-weight:700;opacity:.55;font-variant-numeric:tabular-nums}
.tl-drop9 .tli9-l li.erst9 .tli9-pl9{opacity:.95}
.tl-drop9 .tli9-l li .tli9-pl9 svg{width:11px;height:11px}
body:not(.stil-klassisch) .tl-drop9{border-radius:4px !important}   /* hig84: Rundung wie .tfmenu (aufgaben-02 Stil-Regel) */
/* hig85: Verlauf wischen/zoomen - senkrechtes Scrollen bleibt beim Browser, waagerecht und zwei Finger uebernimmt der Graph */
#anaChart{touch-action:pan-y;-webkit-tap-highlight-color:transparent}
#anaChart:focus{outline:none}
#anaChart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ana-laedt9{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:.72rem;color:var(--muted);pointer-events:none;z-index:2}
/* einmaliger Hinweis, 4 s anstelle der Legende (gleiche Zeile, keine Hoehenaenderung) */
.ana-wisch9{position:absolute;left:0;right:0;padding:6px 4px 2px;text-align:center;font-size:.66rem;color:var(--muted);pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .35s cubic-bezier(.32,.72,0,1),transform .35s cubic-bezier(.32,.72,0,1)}
.ana-wisch9.an9{opacity:1;transform:none}
#anaMarkerLegende{transition:opacity .3s cubic-bezier(.32,.72,0,1)}
#anaMarkerLegende.ana-leg-weg9{opacity:0}
@media (prefers-reduced-motion:reduce){.ana-wisch9,#anaMarkerLegende{transition:none;transform:none}}
/* hig90: Monat im Zeitraum-Menue abgesetzt (gehoert nicht zur Leiter) */
#view-analyse .tfmenu button.tf-abgesetzt9{margin-top:6px;border-top:1px solid var(--line) !important;padding-top:10px}

/* gp-sort (Harun 21.10.2026): Sortier-Knopf oben rechts im Fenster Partner-Aktivitaet, nur bei aufgeklappten Boxen; Listen gruppiert | flach */
.tb9-hero > .gp9-sort{align-self:stretch;width:100%;position:sticky;top:8px;height:0;z-index:4;display:flex;justify-content:flex-end;pointer-events:none;opacity:0;transition:opacity .2s}
.tb9-hero:has(.gp9-duo.offen) > .gp9-sort{opacity:1}
.tb9-hero:has(.gp9-duo.offen) > .gp9-sort button{pointer-events:auto}
/* bewusste Ausnahme, Harun 21.10.2026: rund (sonst gilt ALLES ECKIG) - nur dieser Knopf */
.gp9-sort button{margin-left:auto;margin-right:2px;width:34px;height:34px;padding:0;border-radius:50% !important;border:1px solid var(--line);background:var(--card,var(--bg));color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gp9-sort button:active{transform:scale(.94)}
.tb9 .gp9-flach{display:none}
.tb9.gp9-fl .gp9-grp{display:none}
.tb9.gp9-fl .gp9-flach{display:block}
@media (prefers-reduced-motion:reduce){.tb9-hero > .gp9-sort{transition:none}}

/* ==== bc/css/modules/analyse/fenster-system.css ==== */
/* 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}
}

/* ==== bc/css/modules/erfolge/erfolge.css ==== */
  /* er1 (v1926, Harun 15.10.): Ich-Seite "Erfolge" (#view-erfolge, bc/js/modules/erfolge/). Masse/Farben 1:1 aus dem Prototyp
     bizcal-erfolge (Variante A), Farben nur aus den App-Tokens (core-01). Kopf = .ana-bar wie die Auswertung. Handy zuerst, PC zweispaltig. */
  #view-erfolge .wrap{padding-top:4px}
  #view-erfolge .erf9-zr{display:flex;align-items:center;gap:2px;background:var(--chip);border-radius:4px;padding:3px;flex:0 0 auto}
  #view-erfolge .erf9-zr button{width:30px;height:30px;border:none;border-radius:4px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
  #view-erfolge .erf9-zr button:disabled{opacity:.3;cursor:default}
  #view-erfolge .erf9-zr span{font-size:.78rem;font-weight:700;padding:0 6px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
  #view-erfolge .erf9-bl{padding:16px 0;border-top:1px solid var(--line);min-width:0}
  #view-erfolge .wrap > .erf9-bl:first-child,#view-erfolge .erf9-spalte > .erf9-bl:first-child{border-top:none}
  #view-erfolge .erf9-sect{font-size:.95rem;font-weight:700;display:flex;align-items:baseline;gap:8px;margin:0 0 10px;letter-spacing:0}
  #view-erfolge .erf9-u{font-size:.68rem;font-weight:500;color:var(--muted)}
  #view-erfolge .erf9-hinweis{font-size:.7rem;color:var(--muted);margin:8px 0 0}
  #view-erfolge b,#view-erfolge .erf9-gross,#view-erfolge .erf9-serie-zahl{font-variant-numeric:tabular-nums}
  /* Ring + Serie */
  #view-erfolge .erf9-kopfreihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  #view-erfolge .erf9-ziel{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0;border-radius:4px}
  #view-erfolge .erf9-ziel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #view-erfolge .erf9-ring{position:relative;width:70px;height:70px;flex:0 0 auto}
  #view-erfolge .erf9-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
  #view-erfolge .erf9-ring circle:last-child{transition:stroke-dasharray .4s cubic-bezier(.2,.8,.2,1)}
  #view-erfolge .erf9-ring-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  #view-erfolge .erf9-ring-t b{font-size:1.05rem;font-weight:800;line-height:1.05;color:var(--ink)}
  #view-erfolge .erf9-ring-t span{font-size:.58rem;color:var(--muted)}
  #view-erfolge .erf9-ziel-txt{min-width:0}
  #view-erfolge .erf9-t1{font-size:.84rem;font-weight:700}
  #view-erfolge .erf9-t2{font-size:.72rem;color:var(--muted);margin-top:2px}
  #view-erfolge .erf9-serie{border-left:1px solid var(--line);padding-left:12px;min-width:0}
  /* v1931 Design-Audit: am schmalen Handy brach "Noch 20 bis Sonntag" / "0 Termine · 0 Aufgaben" in 2-3 Zeilen - Ring-Zeile volle Breite, Serie darunter */
  @media (max-width:430px){ #view-erfolge .erf9-kopfreihe{grid-template-columns:minmax(0,1fr);gap:14px}
    #view-erfolge .erf9-serie{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px} }
  #view-erfolge .erf9-serie-k{display:flex;align-items:baseline;gap:6px}
  #view-erfolge .erf9-serie-zahl{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;line-height:1}
  #view-erfolge .erf9-serie-lbl{font-size:.72rem;color:var(--muted)}
  #view-erfolge .erf9-punkte{display:flex;gap:3px;margin-top:8px}
  #view-erfolge .erf9-punkte i{flex:1 1 0;height:10px;border-radius:2px;background:var(--chip);max-width:14px}
  #view-erfolge .erf9-punkte i.an{background:var(--accent)}
  #view-erfolge .erf9-punkte i.frei{background:repeating-linear-gradient(45deg,var(--line),var(--line) 2px,transparent 2px,transparent 5px)}
  #view-erfolge .erf9-klapp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
  #view-erfolge .erf9-klapp.auf{grid-template-rows:1fr}
  #view-erfolge .erf9-klapp > div{overflow:hidden;min-height:0}
  #view-erfolge .erf9-zielwahl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:12px}
  #view-erfolge .erf9-zielwahl .erf9-u{margin-right:4px}
  #view-erfolge .erf9-zielwahl button{height:30px;padding:0 12px;border:none;border-radius:4px;background:var(--chip);color:var(--ink);font:600 .78rem Inter,system-ui,sans-serif;cursor:pointer}
  #view-erfolge .erf9-zielwahl button.on{background:var(--accent);color:var(--accent-ink)}
  /* Balken, Zahlenkopf */
  #view-erfolge .erf9-balken{height:10px;border-radius:4px;background:var(--chip);overflow:hidden;display:flex}
  #view-erfolge .erf9-balken i{display:block;height:100%;transition:width .3s}
  #view-erfolge .erf9-balken-ab{margin-top:10px}
  #view-erfolge .erf9-balken-d{height:6px;margin-top:5px}
  #view-erfolge .erf9-zahlkopf{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
  #view-erfolge .erf9-gross{font-size:1.7rem;font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--ink)}
  /* Auslastung: Tagessaeulen */
  #view-erfolge .erf9-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:96px}
  #view-erfolge .erf9-tag{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;cursor:pointer;border:none;background:none;padding:0;border-radius:4px;color:inherit;font:inherit;min-width:0}
  #view-erfolge .erf9-saeule{width:100%;max-width:30px;border-radius:3px;background:var(--chip);position:relative;overflow:hidden;flex:0 1 auto}
  #view-erfolge .erf9-saeule i{position:absolute;left:0;right:0;bottom:0;background:var(--accent);border-radius:3px 3px 0 0}
  #view-erfolge .erf9-tag.zuk .erf9-saeule i{background:color-mix(in srgb,var(--accent) 40%,var(--chip))}
  #view-erfolge .erf9-tag.frei .erf9-saeule{background:repeating-linear-gradient(45deg,var(--line),var(--line) 2px,transparent 2px,transparent 5px)}
  #view-erfolge .erf9-tag span{font-size:.62rem;color:var(--muted)}
  #view-erfolge .erf9-tag.heute span{color:var(--ink);font-weight:800}
  #view-erfolge .erf9-tag.sel .erf9-saeule{outline:2px solid var(--ink);outline-offset:1px}
  #view-erfolge .erf9-taginfo{font-size:.76rem;min-height:1.3em;margin:8px 0 0}
  /* Termine: Zahlenreihe + Quote */
  #view-erfolge .erf9-quote{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #view-erfolge .erf9-q{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:9px 6px;text-align:center;cursor:pointer;color:var(--ink);font:inherit}
  #view-erfolge .erf9-q.on{border-color:var(--accent)}
  #view-erfolge .erf9-w{font-size:1.5rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
  #view-erfolge .erf9-w.statt{color:var(--ok)} #view-erfolge .erf9-w.abges{color:var(--rot)} #view-erfolge .erf9-w.versch{color:var(--warn)}
  #view-erfolge .erf9-l{font-size:.66rem;color:var(--muted);margin-top:2px}
  #view-erfolge .erf9-quote-zeile{display:flex;align-items:center;gap:10px;margin-top:12px}
  #view-erfolge .erf9-quote-zeile .erf9-balken{flex:1 1 auto}
  #view-erfolge .erf9-quote-zeile b{font-size:.9rem;min-width:3em;text-align:right}
  #view-erfolge .erf9-liste{margin-top:10px;display:flex;flex-direction:column}
  #view-erfolge .erf9-liste-t{margin-bottom:2px}
  #view-erfolge .erf9-zeile{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:.8rem;min-width:0}
  #view-erfolge .erf9-liste-t + .erf9-zeile,#view-erfolge .erf9-liste > .erf9-zeile:first-child{border-top:none}
  #view-erfolge .erf9-leer{color:var(--muted)}
  #view-erfolge .erf9-wann{color:var(--muted);font-size:.72rem;flex:0 0 74px;font-variant-numeric:tabular-nums}
  #view-erfolge .erf9-was{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #view-erfolge .erf9-st{font-size:.66rem;font-weight:700;color:var(--muted);background:var(--chip);border-radius:4px;padding:1px 6px;flex:0 0 auto;white-space:nowrap}
  #view-erfolge .erf9-st.ok{color:var(--ok)} #view-erfolge .erf9-st.rot{color:var(--rot)} #view-erfolge .erf9-st.warn{color:var(--warn)}
  #view-erfolge .erf9-offen{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:8px 10px;border-left:3px solid var(--warn);background:var(--card);border-radius:0 4px 4px 0;font-size:.78rem}
  #view-erfolge .erf9-offen button{font:700 .74rem Inter,system-ui,sans-serif;color:var(--accent);white-space:nowrap;border:none;background:none;cursor:pointer;padding:4px 0}
  /* Vergleichszeile */
  #view-erfolge .erf9-vgl{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-top:6px}
  #view-erfolge .erf9-vgl b{color:var(--ink)}
  #view-erfolge .erf9-diff{margin-left:auto;font-weight:800;font-size:.86rem}
  #view-erfolge .erf9-diff.plus{color:var(--ok)} #view-erfolge .erf9-diff.minus{color:var(--rot)}
  /* Fokuszeit */
  #view-erfolge .erf9-fokus{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
  #view-erfolge .erf9-fokus div{flex:1 1 0;min-width:70px;border-radius:4px;padding:6px 8px;background:var(--chip);font-size:.68rem;color:var(--muted)}
  #view-erfolge .erf9-fokus div b{display:block;color:var(--ink);font-size:.74rem}
  #view-erfolge .erf9-fokus div.ja{box-shadow:inset 3px 0 0 var(--accent)}
  #view-erfolge .erf9-fokus div.teil{box-shadow:inset 3px 0 0 var(--warn)}
  #view-erfolge .erf9-fokus div.nein{box-shadow:inset 3px 0 0 var(--rot)}
  /* Meine Woche: der vorhandene Block #anaZeit9 (kalender-07.css .az-*) - hier ohne eigenen Kasten, Kopf wie die Nachbarn */
  #view-erfolge #anaZeit9 .az-titel{margin:0 0 10px;font-size:.95rem;font-weight:700}
  #view-erfolge #anaZeit9 .az-karte{border:none;background:none;padding:0}
  #view-erfolge #anaZeit9 .az-balken{border-radius:4px;height:12px}
  /* Fuer Vertriebsteams */
  #view-erfolge .erf9-vt-knopf{font:700 .95rem Inter,system-ui,sans-serif;color:var(--ink);display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;border:none;background:none;padding:0;cursor:pointer}
  #view-erfolge .erf9-vt-knopf .erf9-u{margin-left:auto;color:var(--accent);font-weight:700}
  #view-erfolge .erf9-vt-in{padding-top:12px}
  #view-erfolge .erf9-erg{display:flex;flex-direction:column;gap:9px;margin-top:4px}
  #view-erfolge .erf9-erg-k{display:flex;align-items:center;gap:8px;font-size:.8rem}
  #view-erfolge .erf9-erg-k span{flex:1 1 auto}
  #view-erfolge .erf9-erg-k b{min-width:1.6em;text-align:right}
  #view-erfolge .erf9-unter + .erf9-unter{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
  #view-erfolge .erf9-unter-t{font-size:.8rem;font-weight:700;margin-bottom:8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
  @media (prefers-reduced-motion:reduce){ #view-erfolge .erf9-klapp,#view-erfolge .erf9-ring circle:last-child{transition:none} }
  /* PC: zwei Spalten (Prototyp) */
  :root.geraet-tablet-breit #view-erfolge .wrap{max-width:1080px}
  :root.geraet-tablet-breit #view-erfolge .ana-bar{padding-left:max(0px, calc((100% - 1080px) / 2 + 6px));padding-right:max(0px, calc((100% - 1080px) / 2 + 6px))}
  :root.geraet-tablet-breit #view-erfolge .ana-bar > *{background:transparent}
  :root.geraet-tablet-breit #view-erfolge .erf9-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
  :root.geraet-tablet-breit #view-erfolge .erf9-spalte + .erf9-spalte{border-left:1px solid var(--line);padding-left:32px}
  :root.geraet-tablet-breit #view-erfolge .erf9-tage{height:120px}
  /* er2 (v1934, Harun 15.10.): schlanke Seite nach Wispr Flow - drei Elemente, passt ohne Scrollen (erfolge.js ERF_VOLL9=false).
     Die Wochenpfeile im Kopf entfallen (stehen jetzt dezent im Wochenziel). Farben nur aus den App-Tokens (core-01). */
  #view-erfolge .ana-bar .erf9-zr{display:none}
  #view-erfolge .erf9-schlank{display:flex;flex-direction:column}
  #view-erfolge .erf9-schlank .erf9-bl{padding:18px 0}
  #view-erfolge .erf9-schlank > .erf9-bl:first-child{border-top:none;padding-top:8px}
  #view-erfolge .erf9-serie2-k{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
  #view-erfolge .erf9-serie2 .erf9-serie-zahl{font-size:2.6rem;margin-right:8px}
  #view-erfolge .erf9-serie2 .erf9-serie-lbl{font-size:.86rem}
  #view-erfolge .erf9-serie2-r{text-align:right;display:flex;flex-direction:column;gap:2px}
  #view-erfolge .erf9-serie2-r b{font-size:.95rem;font-weight:700}
  #view-erfolge .erf9-heat{display:grid;grid-auto-flow:row;grid-template-columns:22px repeat(var(--n),minmax(0,1fr));gap:3px}
  #view-erfolge .erf9-heat i{display:block;font-style:normal}
  #view-erfolge .erf9-mk,#view-erfolge .erf9-wl{font-size:.58rem;color:var(--muted);line-height:14px;white-space:nowrap;overflow:visible}
  #view-erfolge .erf9-wl{align-self:center}
  #view-erfolge .erf9-c{aspect-ratio:1;border-radius:3px;background:var(--chip)}
  #view-erfolge .erf9-c.l1{background:color-mix(in srgb,var(--accent) 30%,var(--chip))}
  #view-erfolge .erf9-c.l2{background:color-mix(in srgb,var(--accent) 55%,var(--chip))}
  #view-erfolge .erf9-c.l3{background:color-mix(in srgb,var(--accent) 78%,var(--chip))}
  #view-erfolge .erf9-c.l4{background:var(--accent)}
  #view-erfolge .erf9-c.zuk{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
  #view-erfolge .erf9-c.frei{background:repeating-linear-gradient(45deg,var(--line),var(--line) 2px,transparent 2px,transparent 5px)}
  #view-erfolge .erf9-c.heute{box-shadow:0 0 0 1.5px var(--ink)}
  #view-erfolge .erf9-ziel2-z{display:flex;align-items:center;justify-content:space-between;gap:12px}
  #view-erfolge .erf9-ring2{width:44px;height:44px;flex:0 0 auto;transform:rotate(-90deg);display:block}
  #view-erfolge .erf9-ring2 circle:last-child{transition:stroke-dasharray .4s cubic-bezier(.2,.8,.2,1)}
  #view-erfolge .erf9-ziel2 .erf9-t1{font-size:.9rem;font-weight:500}
  #view-erfolge .erf9-ziel2 .erf9-t1 b{font-weight:800}
  #view-erfolge .erf9-wo{display:flex;align-items:center;gap:0;flex:0 0 auto}
  #view-erfolge .erf9-wo span{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 2px}
  #view-erfolge .erf9-pf{width:30px;height:30px;border:none;border-radius:4px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
  #view-erfolge .erf9-pf:disabled{opacity:.3;cursor:default}
  #view-erfolge .erf9-art .erf9-sect{margin-bottom:4px}
  #view-erfolge .erf9-art-z{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;font-size:.88rem}
  #view-erfolge .erf9-art-z + .erf9-art-z{border-top:1px solid var(--line)}
  #view-erfolge .erf9-art-z b{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
  /* er3 (Harun 15.10.): Gesamtzahlen unter dem Raster + kleiner Zusatz rechts in der Wochenliste */
  #view-erfolge .erf9-ges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  #view-erfolge .erf9-ges-f{display:flex;flex-direction:column;gap:1px;min-width:0}
  #view-erfolge .erf9-ges-f b{font-size:1.6rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
  #view-erfolge .erf9-ges-f span{font-size:.74rem;color:var(--muted)}
  #view-erfolge .erf9-art-w{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
  #view-erfolge .erf9-art-w small{font-size:.72rem;color:var(--muted);font-weight:500}
  #view-erfolge .erf9-art-z{padding:8px 0}
  :root.geraet-tablet-breit #view-erfolge .erf9-schlank{max-width:720px;margin:0 auto}
  :root.geraet-tablet-breit #view-erfolge .ana-bar{padding-left:max(0px, calc((100% - 720px) / 2 - 6px));padding-right:max(0px, calc((100% - 720px) / 2 - 6px))}
  @media (prefers-reduced-motion:reduce){ #view-erfolge .erf9-ring2 circle:last-child{transition:none} }

/* ==== bc/css/core/core-04.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 13 */

  /* Tages-Modal */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;
    align-items:center;justify-content:center;padding:20px}
  .overlay.on{display:flex}
  .modalbox{background:var(--card);border:1px solid var(--line);border-radius:16px;
    max-width:420px;width:100%;max-height:70vh;overflow-y:auto;padding:18px}
  .modalbox h3{margin:0 0 12px;font-size:1rem;text-align:center}
  .modalbox .t{border-top:1px solid var(--line);padding:9px 2px;font-size:.85rem}
  .modalbox .t span{color:var(--muted)}

  /* Bottom-Nav: schwebende App-Leiste mit Milchglas und Aktiv-Pille */
  /* v790: flacher (64->56) - .view-inset, ob-hinweis, undoBar und der
     Offline-Balken (JS) ziehen mit, sonst klafft unten ein Spalt */
  nav{position:fixed;left:0;right:0;bottom:var(--vvUnten,0px);height:calc(56px + var(--sab,0px));
    padding-bottom:var(--sab,0px);background:color-mix(in srgb, var(--nav) 86%, transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.06);
    display:flex;z-index:100}
  nav button{flex:1;border:none;background:none;color:var(--muted);cursor:pointer;font-family:inherit;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.66rem;font-weight:600;position:relative;
    transition:color .15s}
  nav button svg{width:20px;height:20px;transition:transform .18s cubic-bezier(.2,.7,.3,1)}   /* v790: ~10% kleiner */
  /* Lust auf Bedienung: am PC hebt sich das Symbol beim Draufkommen leicht,
     am Handy gibt es beim Druck eine kurze Rueckmeldung (User-Ansage 11.08.) */
  @media (hover:hover){
    nav button:hover{color:var(--ink)}
    nav button:hover svg{transform:translateY(-2px) scale(1.1)}
  }
  nav button:active svg{transform:translateY(0) scale(.92)}
  nav button.gedrueckt svg{transform:scale(.9)}
  nav button.on{color:var(--accent);font-weight:700}
  nav button.on svg{transform:translateY(-1px) scale(1.08)}
  /* nv2 (Harun 21.10.): neue Fussleisten-Symbole (Stil B) - 26 px, Leiste bleibt 56 px: Abstand Symbol/Text und Schrift etwas kleiner.
     Verlauf/Farbe der Flaechen steht inline in termin-app.html (url(#nv2g)). Aktiv-Wechsel: kurze Feder (.9 -> 1.08 -> 1). */
  nav button:has(svg.nv2){gap:0;font-size:.62rem}
  nav button svg.nv2{width:26px;height:26px;flex:none}
  nav button.on svg.nv2{transform:none;animation:nv2Feder .28s cubic-bezier(.34,1.56,.64,1)}
  @keyframes nv2Feder{0%{transform:scale(.9)}55%{transform:scale(1.08)}100%{transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){nav button.on svg.nv2{animation:none}}
  /* Harun 14.10. (Firmen-Tab): #tab-buchen/#tab-analyse sind nur noch Rechte-/Zustandstraeger - nie sichtbar (Handy-Leiste UND PC-Seitenleiste) */
  nav button.reiter-flag9{display:none !important}
  /* v790 (User): Aktiv-Strich raus - die Akzentfarbe allein zeigt den Tab */
  nav .badge{position:absolute;top:8px;left:calc(50% + 8px);min-width:16px;height:16px;border-radius:99px !important;   /* v1411/v1413 (Harun): klein und rund - wie an der Glocke */
    background:var(--rot);color:#fff;font-size:.58rem;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box}
  .hide{display:none !important}
  /* v1156: alles mit data-outlook erscheint nur, wenn der Mandant die Kopplung freigibt */
  body:not(.outlook-da) [data-outlook]{display:none !important}

  /* ── Apple-Feinschliff (HIG): Hairlines statt Rahmen, ruhige Typo, iOS-Listen,
        Sheets mit Blur, Segmented Control, gefüllte Felder, tiefes Dark ── */
  :root[data-theme="light"]{ --line:rgba(60,60,67,.14); --chip:#ebebea }
  /* Struktur-Picker (structure-select.js) an das App-Theme koppeln: das Modul
     liest eigene Variablen mit dunklen Fallbacks — hier aufs Theme gemappt */
  /* v1137: --text-muted gehoert dazu, sonst nimmt das Modul hier seinen
     eigenen Grauton (#8a9099) und der TV-Block einen anderen. */
  :root{--bg-glass:var(--chip);--surface:var(--card);--border-glass:var(--line);--text-primary:var(--ink);--text-muted:var(--muted)}
  :root[data-theme="dark"]{ --bg:#0a0a0c; --card:#1c1c21; --nav:#101013; --chip:#26262c;
    --line:rgba(255,255,255,.10); --muted:#98989f }
  h1{font-size:1.5rem;letter-spacing:-.02em}
  .card,.kalbox{border-radius:16px;border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04)}
  :root[data-theme="dark"] .card,:root[data-theme="dark"] .kalbox{box-shadow:none}
  .sekt{font-size:.66rem;letter-spacing:.07em;padding:14px 4px 6px}
  .sect{font-size:1.05rem;margin:26px 2px 10px;letter-spacing:-.01em}
  .srow{padding:14px 6px;min-height:46px}
  .kpi-card{border-radius:16px;border-color:var(--line)}
  .kpi-card .wert{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .btn{border-radius:12px}
  .chipbtn{border-radius:8px;padding:5px 10px;font-size:.72rem}
  .seg{border-radius:10px;padding:2px}
  .seg button{border-radius:8px;padding:7px 14px;transition:background .15s,color .15s}
  .seg button.on{box-shadow:0 1px 4px rgba(0,0,0,.14)}
  .ty-in,.ty-row input[type=number],.fe-row input[type=text],.fe-row input[type=number],
  .fe-row textarea,.zt-row input[type=time]{border-color:transparent;border-radius:10px}
  .ty-in:focus,.ty-row input:focus,.fe-row input:focus,.fe-row textarea:focus,
  .zt-row input[type=time]:focus{outline:none;border-color:var(--accent)}
  .overlay{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  @keyframes sheetAuf{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
  .overlay.on .modalbox{animation:sheetAuf .28s cubic-bezier(.32,.72,.35,1)}
  .modalbox{border-radius:20px;border-color:var(--line)}
  nav{border-top:none;box-shadow:0 -0.5px 0 var(--line), 0 -8px 24px rgba(0,0,0,.05)}
  .tagpanel .t{border-radius:0 10px 10px 0}
  .gp-pill{border-radius:10px}
  .tfbtn{border-color:var(--line)}
/* ==== bc/css/modules/kalender/kalender-04.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 14 */

  /* Kalender-Kopf: Strukturauswahl + Ansicht in EINER Zeile, gleiche Höhe (User-Markup) */
  .kal-top{flex-wrap:nowrap;align-items:stretch}
  .kal-top #strselKal{flex:1;min-width:0;overflow:hidden}
  .kal-top .seg{padding:3px}
  .kal-top .seg button{padding:0 13px;font-size:.72rem;display:flex;align-items:center}
  /* Tageszellen: 7 exakt gleich breite Spalten — Inhalt darf die Spalte nie dehnen */
  .kal-wd,.kal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .kz{min-width:0}
  /* Veranstaltungs-Balken: hohl mit farbigem Rand (buchbar, noch kein eigener Termin) */
  .kz .balken.ev{background:transparent;border:1.5px solid;font-weight:800}
  /* v1077: In der TEAM-Sicht gefuellt - dort ist der Umriss die falsche
     Auskunft, er spraeche ueber die eigene Teilnahme. */
  .kz .balken.ev.voll{border-color:transparent}
  /* Monatsnavigation linksbündig, damit der Schalter rechts Platz hat */
  .kal-head{justify-content:flex-start;gap:8px;padding-left:2px}
  .kal-head .monat{min-width:0;text-align:left}
  /* Kopf im BC2-Stil: Titel + Untertitel als reiner Text, keine Hintergrundbalken */
  .kal-titel{display:flex;flex-direction:column;gap:1px;min-width:0}
  .kal-titel .monat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kal-titel small{font-size:.68rem;color:var(--muted);font-weight:600}
  /* Zeile 2: Strukturauswahl ist MODULAR (fehlt sie, füllt der Umschalter die Zeile
     sauber) — und beide Bedienelemente sind exakt gleich hoch */
  /* Zeile 2: Strukturauswahl bekommt die BREITE (mehrere Namen brauchen Platz),
     der Tag/Woche/Monat-Umschalter bleibt kompakt rechts — nichts überschneidet */
  .kal-zeile2{display:flex;align-items:stretch;gap:8px;padding:0 10px 6px;height:42px;box-sizing:border-box}   /* v789: 48->42 */
  .kal-zeile2 #strselKal{flex:1 1 auto;min-width:0;overflow:hidden;display:flex;align-items:stretch}
  .kal-zeile2 #strselKal:empty{display:none}
  /* v212 (User 16.08.): die Auswahl fliegt von LINKS herein - von der Taste
     weg, die man gerade gedrueckt hat - ueber 40 % der Bildschirmbreite und mit
     leichtem Ueberschwingen am Ende. Bewusst NUR transform + opacity: die
     laufen auf der Grafikebene weiter, auch waehrend JS die Termine zeichnet.
     (Die fruehere max-width-Fassung ist genau daran haengengeblieben.) */
  .kal-zeile2 #strselKal{max-width:60vw;
    transition:opacity .18s ease, transform .34s cubic-bezier(.34,1.4,.5,1)}
  .kal-zeile2.nur-mein #strselKal{opacity:0;transform:translateX(-40vw);pointer-events:none;
    transition:opacity .14s ease, transform .24s cubic-bezier(.4,0,.7,.2)}
  .kal-zeile2:not(.nur-mein) #strselKal{opacity:1;transform:none}
  /* Der Flug darf die Zeile nicht seitlich aufziehen */
  .kal-zeile2{overflow:hidden}
  .thema-seg9 button{padding:7px 12px}
/* ==== bc/css/modules/aufgaben/aufgaben-01.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 15 */
   /* v1271 */

  /* v1269: "Mein Tag" - Tagesuebersicht (Betreiber: "viel schoener") */
  .mt9{max-width:520px !important;padding:0 !important;overflow:hidden auto}
  .mt9-kopf{padding:20px 20px 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--card)),var(--card));border-bottom:1px solid var(--line)}
  .mt9-gruss{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .mt9-datum{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;margin-top:4px;line-height:1.15}
  .mt9-kw{font-size:.78rem;color:var(--muted);margin-top:2px}
  .mt9-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .mt9-chip{font-size:.74rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--chip);color:var(--ink);border:none;font-family:inherit}
  .mt9-chip.warn{background:color-mix(in srgb,#F59E0B 22%,var(--card));color:var(--ink);cursor:pointer}
  .mt9-held{margin:14px 16px 4px;padding:14px;border-radius:14px;color:#fff;position:relative;overflow:hidden;cursor:pointer}
  .mt9-held small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.1em;opacity:.85}
  .mt9-held b{display:block;font-size:1.08rem;margin-top:4px;line-height:1.25}
  .mt9-held span{display:block;font-size:.8rem;opacity:.92;margin-top:3px}
  .mt9-held a{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:inherit}
  .mt9-liste{padding:6px 16px 4px}
  .mt9-z{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
  .mt9-z:last-child{border-bottom:none}
  .mt9-z.vorbei{opacity:.45}
  .mt9-k{flex:0 0 auto;width:48px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;
    font-family:'Barlow Condensed','Roboto Condensed','sans-serif-condensed','Arial Narrow',sans-serif}
  .mt9-k i{font-style:normal;font-size:.6em;position:relative;top:-.42em;margin-left:1px;opacity:.9}
  .mt9-k.ganz{font-size:.62rem;letter-spacing:.04em}
  .mt9-m{flex:1;min-width:0}
  .mt9-m b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mt9-m span{display:block;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .mt9-jetzt{display:flex;align-items:center;gap:8px;font-size:.66rem;font-weight:800;letter-spacing:.1em;color:var(--rot,#e82546);padding:6px 0}
  .mt9-jetzt::after{content:"";flex:1;height:1.5px;background:currentColor}
  .mt9-leer{padding:26px 20px;text-align:center;color:var(--muted);font-size:.9rem}
  .mt9-leer b{display:block;font-size:1.05rem;color:var(--ink);margin-bottom:4px}
  .mt9-fuss{display:flex;gap:10px;padding:12px 16px 16px}
  .mt9-fuss .btn{flex:1}
  /* v1508 (Harun f17: "huebscher, serioeser - Schriften wie der App-Standard"): weisses Blatt, keine Verlaeufe, Zeitspalte */
  .mt9{border-radius:6px !important;font-family:Inter,system-ui,sans-serif}
  .mt9-kopf{background:var(--card) !important;padding:20px 20px 16px !important}
  .mt9-gruss{font-size:.84rem !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;color:var(--muted) !important}
  .mt9-datum{font-size:1.45rem !important;font-weight:700 !important;letter-spacing:-.01em;margin-top:2px !important}
  .mt9-kzreihe{display:flex;gap:20px;margin-top:14px}
  .mt9-kz small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .mt9-kz b{display:block;font-size:1rem;font-weight:700;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
  .mt9-lab{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:14px 20px 4px}
  .mt9-liste{padding:2px 0 4px !important}
  .mt9-z{gap:14px !important;align-items:stretch !important;padding:10px 20px !important;border-bottom:0 !important}
  .mt9-z.naechst{background:color-mix(in srgb, var(--ink) 4%, var(--card))}
  .mt9-zeit{width:54px;flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
  .mt9-zeit b{display:block;font-size:.92rem;font-weight:700;color:var(--ink)}
  .mt9-zeit small{display:block;font-size:.76rem;color:var(--muted);margin-top:1px}
  .mt9-balken{width:3px;flex:0 0 auto;border-radius:2px}
  .mt9-m b{font-weight:600 !important;font-size:.95rem !important}
  .mt9-m em{display:block;font-style:normal;font-size:.76rem;font-weight:700;color:var(--accent);margin-top:4px}
  .mt9-z a[data-mt="nav"]{align-self:center;width:34px;height:34px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex:0 0 auto}
  .mt9-z a.mt9-akt{width:30px !important}
  .mt9-z a.mt9-akt svg{width:17px;height:17px}
  .mt9-jetzt{padding:4px 20px !important}
  .mt9-fuss{border-top:1px solid var(--line);padding:14px 20px 18px !important;margin-top:6px}
  /* v1268 (Betreiber: "oberhalb von Dienstag, wo die Buttons sind, den Hintergrund farblich absetzen") */
  /* v1272 (Betreiber: "Farbe passt nicht - oben weiss, der Canvas leicht cremefarben; im Dark Mode oben
     schwarz oder fast schwarz; keinen Strich bei der Trennung") */
  :root{--kopf-grund:#FFFFFF;--kal-canvas:#FFFFFF}   /* v1415 (Harun): kein Beige - weiss */
  :root[data-theme="dark"]{--kopf-grund:#08090B;--kal-canvas:transparent}
/* ==== bc/css/modules/kalender/kalender-05.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 16 */

  .kal-bar,.kal-zeile2{background:var(--kopf-grund)}
  .kal-flaeche{background:var(--kal-canvas)}
  @media (prefers-reduced-motion: reduce){
    .kal-zeile2 #strselKal{transition:opacity .12s linear}
    .kal-zeile2.nur-mein #strselKal{transform:none}
  }
  .kal-zeile2 #strselKal .strsel-trigger{height:36px;box-sizing:border-box;max-width:100%;
    overflow:hidden;text-overflow:ellipsis}
  .kal-zeile2 .seg{flex:0 0 auto;height:36px;box-sizing:border-box;padding:3px;display:flex}
  .kal-zeile2 .seg button{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    padding:0 11px;font-size:.7rem}
  /* Text-Modus im Monat: kein Box-Hintergrund — nur Stunde + Name in der Typ-Farbe */
  /* Feste Zeilenhöhe + kein Schrumpfen: Abstände sind bei 4 wie bei 9 Zeilen
     identisch, Zeilen laufen von oben nach unten (User-Ansage) */
  /* Monatstext IMMER linksbuendig; bei vollen Zellen schrumpft die Schrift
     stufenweise, statt links/rechts abgeschnitten zu werden (User 13.08.) */
  /* v801 (User): Schrumpf-Stufen RAUS - volle Teamzellen wurden kleiner als
     private. Die Groesse bleibt immer gleich; wer mehr hat, sieht "+n". */
  /* v789 (BC2-Vergleich 02.09.): kondensiert und leichter - pro Zelle passt
     spuerbar mehr Wort. Android bringt sans-serif-condensed nativ mit,
     Roboto Condensed kommt nicht-blockierend dazu, Arial Narrow deckt den
     Desktop. Dazu Fade am Zellrand statt Hartschnitt mitten im Buchstaben. */
  .kz .balken.txt{background:transparent;padding:0 2px;font-weight:500;text-align:left;justify-content:flex-start;
    border:none;flex:0 0 auto;height:12px;line-height:12px;overflow:hidden;white-space:nowrap;font-size:.64rem;
    font-family:'Barlow Condensed','Roboto Condensed','sans-serif-condensed','Arial Narrow',sans-serif;   /* v791: maximal kondensiert (OFL) */
    letter-spacing:0;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 7px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 7px),transparent)}
  /* v896 (User: "nicht die Zeilen, die TEXTE"): Diese Regeln muessen NACH
     der Basisregel darueber stehen - sonst gewinnt deren .64rem und nur die
     Zeilenhoehe waechst. Genau das war der Fehler in v890 bis v894. */
  @media (min-width:900px){
    /* v897 (User: "zu gross"): eine Stufe zurueck - etwa die Mitte zwischen
       dem Handy-Mass (.64rem) und dem Stand aus v896. */
    .kz .balken.txt{font-size:.84rem;height:19px;line-height:19px;letter-spacing:.01em}
  }
  @media (min-width:1400px){
    .kz .balken.txt{font-size:.92rem;height:21px;line-height:21px;letter-spacing:.01em}
  }
  /* Verschieben-Overlay: überdeckt Kopf + Auswahl-Zeile komplett (die braucht man
     in dem Moment nicht) — Abbrechen präsent als Text-Knopf, Löschen neutral */
  .drag-bar{position:absolute;top:0;left:0;right:0;height:90px;z-index:96;display:flex;align-items:center;gap:10px;
    padding:0 12px;background:color-mix(in srgb, var(--accent) 16%, var(--card));
    border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.25)}
  #dbZurueck{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;
    background:var(--card);color:var(--ink);font-family:inherit;font-size:.82rem;font-weight:700;
    padding:9px 13px;cursor:pointer;flex:0 0 auto}
  .kal-ic.ok{color:var(--ok)}
  /* Harun 08.10. (Wunsch: "die Leiste muss schoener sein, die Knoepfe besser zum Vorschein kommen, die Zeit groesser"): "Verschieben" klein
     darueber, Zeit und Datum gross; Abbrechen, Absagen und Bestaetigen als klare 40-px-Knoepfe (4 px Radius) */
  #dragBar .kal-titel .monat{font:700 .68rem Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  #dragBar #dbZeit{display:block;font:700 1.12rem/1.2 Inter,system-ui,sans-serif !important;font-size:1.12rem !important;color:var(--ink) !important;margin-top:2px;white-space:nowrap}
  #dragBar #dbZeit .db-datum9{display:block;font:600 .74rem/1.3 Inter,system-ui,sans-serif !important;color:var(--muted)}
  #dragBar #dbZurueck{border-radius:4px;height:40px;padding:0 12px}
  #dragBar #dbLoeschen,#dragBar #dbOk{width:42px;height:42px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
  #dragBar #dbLoeschen{border:1px solid color-mix(in srgb, var(--rot) 45%, transparent);color:var(--rot);background:var(--card)}
  #dragBar #dbOk{background:var(--accent);color:#fff;border:0}
  /* v446 (User 22.08.): Das Drei-Punkte-Menue ist ein DROPDOWN oben rechts,
     kein Modal - es gehoert zum Knopf, nicht in die Bildmitte. Eigenes CSS,
     eckig wie alles seit v445. */
  /* v478: direkt unter der Icon-Zeile, nicht unter dem ganzen Kopf */
  #pdMenuPop{position:absolute;top:52px;right:8px;z-index:20;
    min-width:238px;max-width:calc(100vw - 24px);background:var(--card);
    border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.34);
    padding:4px;display:none}
  #pdMenuPop.auf{display:block}
  /* v1669: Sortier-Menue - dieselbe Optik wie #pdMenuPop, EIN Aufdecken (oben -> unten, zu: unten -> oben) */
  #aufgSortPop9{position:fixed;z-index:60;min-width:238px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.34);padding:4px;
    clip-path:inset(0 0 100% 0);transition:clip-path .26s cubic-bezier(.2,.8,.2,1);pointer-events:none}
  #aufgSortPop9.auf{clip-path:inset(0 0 0 0);pointer-events:auto}
  #aufgSortPop9 button{display:block;width:100%;text-align:left;background:none;border:none;padding:13px 40px 13px 14px;color:var(--ink);font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;line-height:1.2;position:relative}
  #aufgSortPop9 button + button{border-top:1px solid var(--line)}
  #aufgSortPop9 button.on::after{content:'';position:absolute;right:16px;top:50%;width:6px;height:11px;border:solid var(--accent);border-width:0 2px 2px 0;transform:translateY(-65%) rotate(45deg)}
  #todoSortBtn.anders9{color:var(--accent)}
  /* v1671 (Harun so2): aktiv = Zeichen in Akzentfarbe, nie hinterlegt (kein Quadrat) - auch die Lupe */
  #todoSortBtn,#todoSuchBtn,#todoSortBtn:focus,#todoSuchBtn:focus,#todoSortBtn:hover,#todoSuchBtn:hover{background:none !important;box-shadow:none !important;outline:none !important;border-color:transparent !important}
  .sort-mini9{display:none;margin-left:auto;margin-right:2px;width:32px;height:32px;border:0;background:none;color:var(--muted);cursor:pointer;align-items:center;justify-content:center;padding:0}
  .sort-mini9.anders9{color:var(--accent)}
  :root.geraet-tablet-breit .sort-mini9{display:inline-flex}
  .todo-vs-kopf + .sort-mini9{margin-left:8px}
  :is(#view-termine #todoMine,#vsMine9) > .todo-sekt .sort-mini9{transform:translateY(-11px)}
  :root.geraet-tablet-breit #todoSortBtn{display:none !important}
/* ==== bc/css/modules/termin/termin-02.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 17 */

  #pdMenuPop button{display:block;width:100%;text-align:left;background:none;border:none;
    padding:13px 14px;color:var(--ink);font-family:inherit;font-size:.95rem;font-weight:600;
    cursor:pointer;line-height:1.2}
  #pdMenuPop button + button{border-top:1px solid var(--line)}
  #pdMenuPop button:active{background:var(--chip)}
  #pdMenuPop button.rot{color:var(--rot)}
  #pdMenuPop button.orange{color:#d97706;font-weight:700}   /* v1184: Verschieben */
  #pdMenuPop button.dunkelrot{background:#7b1113;color:#000;font-weight:700}   /* v1184: Endgueltig loeschen */
  /* v431: Bearbeiten-Modus IM Blatt (Geschaeftstermine). Gleiche Cards wie in
     der Ansicht - im Modus: Kopf zeigt Abbrechen/Speichern statt der Icons,
     die Zeit-Zeile ist antippbar, die Ort-Karte wird zum Eingabefeld, eine
     leere Ort-Karte erscheint erst im Modus. */
  #pdSheet #pdEditAb,#pdSheet #pdEditOk{display:none;background:none;border:1px solid rgba(255,255,255,.55);
    border-radius:9px;color:#fff;font-family:inherit;font-weight:800;font-size:.86rem;padding:7px 12px;cursor:pointer}
  #pdSheet.pd-edit #pdEditAb,#pdSheet.pd-edit #pdEditOk{display:inline-block}
  #pdSheet.pd-edit #pdZu,#pdSheet.pd-edit #pdEdit,#pdSheet.pd-edit #pdDel,
  #pdSheet.pd-edit #pdMove,#pdSheet.pd-edit #pdDup,#pdSheet.pd-edit #pdMenu{display:none}
  /* v651 (Betreiber): X und Pfeil raus aus dem Kopf - Absagen/Verschieben
     laufen ueber das Drei-Punkte-Menue und den Bearbeiten-Modus. Die
     Knoepfe bleiben unsichtbar im Blatt; ihre Handler bedienen das Menue. */
  #pdSheet #pdDel,#pdSheet #pdMove{display:none !important}
  #pdSheet .pd-leer{display:none}
  #pdSheet.pd-edit .pd-leer{display:block}
  #pdSheet #pdOrtEdit{display:none}
  #pdSheet.pd-edit #pdOrtAnzeige{display:none}
  #pdSheet.pd-edit #pdOrtEdit{display:block}
  #pdSheet.pd-edit #pdZeitTxt,#pdSheet.pd-edit #pdDatumTxt{cursor:pointer}
  /* v441: die beiden Knoepfe als eigene volle Zeile UNTER der Zeit - vorher
     quetschten sie sich rechts neben den Chip und brachen unschoen um. */
  #pdSheet #pdEditZeitAkt{display:none}
  #pdSheet.pd-edit #pdEditZeitAkt{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1 0 100%;margin-top:10px}
  #pdSheet #pdEditZeitAkt button{background:var(--chip);border:1px solid var(--line);border-radius:10px;
    padding:11px 10px;color:var(--ink);font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
  #pdSheet #pdEditZeitAkt #pdEditAbs{color:var(--rot);border-color:var(--rot)}
  /* Undo-Leiste: 10 Sekunden Zeit, ein Löschen zurückzuholen */
  #undoBar{position:fixed;left:14px;right:14px;bottom:calc(68px + env(safe-area-inset-bottom,0px));z-index:180;
    display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:11px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:.84rem}
  #undoBar button{margin-left:auto;border:none;background:none;color:var(--accent);font-family:inherit;
    font-size:.84rem;font-weight:800;cursor:pointer}
  /* FAB (BC2): schwebendes Plus unten rechts + expandierende Aktionen */
  /* GP-Kachel: eine Zeile, antippbar — die Namen stecken im Modal */
  .gp-karte{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    text-align:left;font-family:inherit;cursor:pointer;border:1px solid var(--line)}
  .gp-karte:hover{border-color:var(--accent)}
  .gp-karte-mehr{font-size:.72rem;color:var(--muted);font-weight:600;white-space:nowrap}
/* ==== bc/css/modules/kalender/kalender-06.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 18 */

  /* + Knopf dezenter (User: „zu fett") */
  /* FAB nach BC2 (User 22.08.): runde Icon-Kreise rechts, Text-Pille links.
     Das Plus DREHT sich zum X (45 Grad), die Eintraege gleiten in 0,3 s hoch. */
  /* v602: Kreis deutlich kleiner (52 -> 34 px), das Pluszeichen bleibt gross -
     der Knopf soll nicht die Ecke beherrschen. Die Drehung ist raus, sie
     wirkte unruhig; stattdessen nur ein leiser Farbwechsel. */
  /* v603: 42 statt 52 Pixel - rund ein Fuenftel schmaler, aber noch gut zu
     treffen (34 war zu klein). Das Pluszeichen bleibt gross, und die Drehung
     zum Kreuz ist zurueck: sie sagt, dass derselbe Knopf jetzt schliesst. */
  #kalFab{position:absolute;right:16px;bottom:18px;z-index:70;width:42px;height:42px;border-radius:50% !important;
    border:none;background:var(--accent);color:var(--accent-ink);font-size:1.8rem;font-weight:500;line-height:0;
    cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;
    padding:0;transition:transform .3s ease}
  #kalFab.offen{transform:rotate(45deg)}
  #fabMenu{position:absolute;right:16px;bottom:62px;z-index:70;display:flex;flex-direction:column;gap:6px;
    align-items:flex-end;visibility:hidden;pointer-events:none}
  #fabTypen{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
  #fabMenu.an{visibility:visible;pointer-events:auto}
  /* v602: Schmale ECKIGE Liste statt breiter Pillen (Betreiber 26.08.).
     Alle Eintraege gleich breit, damit sie als Liste lesbar sind. */
  .fab-akt{display:flex;align-items:center;gap:10px;border:none;cursor:pointer;font-family:inherit;
    background:#26282c;border-radius:8px !important;padding:9px 12px;overflow:hidden;width:210px;
    box-shadow:0 4px 12px rgba(0,0,0,.35);
    opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}
  html[data-theme="light"] .fab-akt{background:#3a3f4a}
  /* Farbmarke links - dieselbe Farbe wie die Terminart im Kalender */
  /* v603: Symbol in der Farbe der Terminart - schmal genug fuer die Liste,
     deutlicher als eine blosse Farbmarke. */
  .fab-akt .mk{width:22px;height:22px;flex:0 0 auto;color:var(--mk,#8a8a8a);
    display:flex;align-items:center;justify-content:center}
  .fab-akt .mk svg{width:19px;height:19px}
  .fab-akt.trenn{margin-bottom:4px}
  #fabMenu.an .fab-akt{opacity:1;transform:none}
  #fabMenu.an .fab-akt:nth-last-child(1){transition-delay:0s}
  #fabMenu.an .fab-akt:nth-last-child(2){transition-delay:.05s}
  #fabMenu.an .fab-akt:nth-last-child(3){transition-delay:.1s}
  .fab-akt span{background:none;padding:0;flex:1;text-align:left;
    font-size:.9rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Overlay hinter dem Menue: dunkelt den Kalender ab (hell: hellt auf) */
  #fabDim{position:absolute;inset:0;z-index:68;background:rgba(0,0,0,.55);opacity:0;
    pointer-events:none;transition:opacity .3s ease}
  #fabDim.an{opacity:1;pointer-events:auto}
  html[data-theme="light"] #fabDim{background:rgba(244,242,236,.65)}
  /* v602: Die Symbolkreise sind entfallen - die schmale Liste traegt links
     eine Farbmarke (--mk). Farben wie im Kalender, nicht zwei Welten. */
  /* Resize-Griffe (BC2): AUSSERHALB des Blocks, groß genug für den Daumen */
  /* v330: Pfeil im Griff - so sieht man ihm an, dass er sich schieben laesst.
     Er zeigt in die Richtung, in die der jeweilige Rand wandert: oben nach
     oben, unten nach unten. Gezeichnet als zwei Rahmenlinien, damit kein
     zusaetzliches Bild noetig ist. */
  .drag-griff{position:absolute;left:50%;transform:translateX(-50%);bottom:-26px;width:38px;height:22px;
    border-radius:7px;background:var(--accent);box-shadow:0 3px 8px rgba(0,0,0,.4);
    touch-action:none;cursor:ns-resize;z-index:6;
    display:flex;align-items:center;justify-content:center}
  .drag-griff.oben{bottom:auto;top:-26px}
  /* v1014: Nur die Griffe des GEISTES gehen mit ins Grau - an einem echten
     Termin bleiben sie in der App-Farbe. */
  .wp-ev.ghost .drag-griff,.tl-ev.ghost .drag-griff{
    background-color:color-mix(in srgb, var(--ink) 42%, var(--card))}
  /* Der Pfeil im Griff zeigt in die Richtung, in die der jeweilige Rand
     wandert - so sieht man dem Balken an, dass er sich schieben laesst.
     v331: nur noch EINE Regel, seit Termin und Geist dieselben Elemente
     benutzen. */
  .drag-griff{background-repeat:no-repeat;background-position:center;background-size:11px 7px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0h11L5.5 7z' fill='%23fff'/%3E%3C/svg%3E")}
  .drag-griff.oben{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M5.5 0L11 7H0z' fill='%23fff'/%3E%3C/svg%3E")}
  /* Aufgaben-Spalte in der 1-Tages-Ansicht (BC2) */
  .n-mit-aufg{display:flex;gap:0;height:100%;min-height:0}
  .n-mit-aufg .n-links{flex:1;min-width:0;overflow:hidden}
  .aufg-col{width:41%;max-width:190px;border-left:1px solid var(--line);padding:6px 8px;overflow-y:auto}
  .aufg-col h5{margin:2px 0 8px;font-size:.66rem;letter-spacing:.07em;color:var(--muted);font-weight:800}
  .aufg-eintrag{font-size:.76rem;padding:7px 6px;border-radius:9px;background:var(--chip);margin-bottom:7px;cursor:pointer}
  .aufg-eintrag small{display:block;color:var(--muted);font-size:.68rem}
  .aufg-leer{color:var(--muted);font-size:.76rem;text-align:center;padding:20px 4px}
  /* To-do-Liste im Aufgaben-Tab */
  /* v1197: Wechsel offen <-> erledigt faehrt nach unten aus dem Bild */
  #todoInhalt,#erlAgenda{transition:transform .28s ease,opacity .28s ease}
  .todo-raus{transform:translateY(60vh);opacity:0;pointer-events:none}
  /* v1199: waehrend des Wechsels liegt das AUSGEHENDE absolut ueber dem
     hereinkommenden - beide bewegen sich gleichzeitig, kein Nachrutschen */
  #todoBuehne{position:relative}
  /* v1301: TO-DO-UI nach der Festlegung vom 30.09. (docs/TODO_UI.md).
     Kopf: Titel der Liste, Lupe, Glocke, Burger. Leichte Zeilen mit Trennlinie,
     Stern rechts. Unten fest "Aufgabe hinzufuegen". Erledigt offen am Ende. */
  .todo-kopf{display:flex;flex-direction:column;align-items:stretch;gap:0}   /* v1394: zwei Zeilen wie der Kalender-Kopf (Titelzeile + Zeile 2) */
  .todo-kopf .tk-zeile2{display:flex;align-items:center;gap:8px}
  .todo-kopf .tk-zeile2 .kal-ic{width:40px;height:36px}
  .blatt-panel .bp-akt button.rot{color:#c62828}
  #todoAntworten{margin-top:10px}
  #view-termine .wrap{padding-bottom:120px}
/* gp1 (Harun 24.10.2026): kleines Schloss vor dem Titel privater Termine (schloss9 in core/farben.js) - in Monat, Woche/Tag,
   Ganztags-Zeile, Agenda und Tages-Fenster; Farbe = Schriftfarbe der Zeile (currentColor) */
.pv-schloss9{display:inline-block;width:.78em;height:.78em;margin:0 .22em 0 0;vertical-align:-.06em;flex:none;opacity:.9}

/* ==== bc/css/modules/aufgaben/aufgaben-02.css ==== */
/* BizCal-Modul · erzeugt von tools/bizcal-modular/trennen.mjs aus termin-app.html (v1818) · Stil-Block 1, Teil 19 */

  .todo-sekt{font-size:.66rem;letter-spacing:.07em;color:var(--muted);font-weight:800;margin:16px 2px 2px;display:flex;align-items:center;gap:7px}
  .todo-sekt.rot{color:var(--rot)}
  .todo-sekt i{margin-left:auto;font-style:normal;font-weight:700;font-size:.66rem;color:var(--muted);background:var(--chip);border-radius:99px !important;padding:1px 7px}
  .todo-liste{display:flex;flex-direction:column}
  .todo-leer{color:var(--muted);font-size:.82rem;padding:22px 4px;text-align:center}
  /* Die Zeile: zwei Ebenen - darunter die Gesten-Flaechen (Planen, Liste),
     darueber der verschiebbare Inhalt. */
  .tz{position:relative;overflow:hidden;border-bottom:1px solid var(--line);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .tz-inner{display:flex;align-items:flex-start;gap:10px;padding:11px 2px;background:var(--bg);position:relative;z-index:2;transition:transform .18s ease;touch-action:pan-y}
  .tz-check{flex:0 0 auto;width:22px;height:22px;border-radius:50% !important;border:2px solid var(--line);margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
  .tz-check.an{background:var(--accent);border-color:var(--accent)}
  .tz-check.an::after{content:'\2713';color:#fff;font-size:.78rem;font-weight:800}
  /* v1404 (Harun): Abhaken kraeftiger und ueberall gleich - Ring laeuft nach aussen, Haken springt herein, Titel streicht durch */
  .tz-check{position:relative}
  .tz-check.hakt{background:var(--accent);border-color:var(--accent);animation:vsPop .36s cubic-bezier(.34,1.56,.64,1)}
  .tz-check.hakt::after{content:'\2713';color:#fff;font-size:.78rem;font-weight:800;animation:hakRein .26s .06s cubic-bezier(.2,.9,.3,1.4) both}
  .hak-ring9{position:fixed;z-index:1200;border-radius:50% !important;border:2px solid var(--accent);pointer-events:none;animation:hakRing .55s ease-out forwards}   /* v1405 (Harun): Ring als freies Element - nichts schneidet ihn ab */
  .blatt-panel .vs-check{position:relative}
  .blatt-panel .vs-check.an::after{animation:hakRein .26s .06s cubic-bezier(.2,.9,.3,1.4) both}
  @keyframes hakRein{from{transform:scale(0) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
  @keyframes hakRing{0%{transform:scale(.7);opacity:.95}100%{transform:scale(2.3);opacity:0}}
  .tz.hakt .tz-tx b{text-decoration:line-through;opacity:.55;transition:opacity .3s}
  .tz.hakt .tz-check{background:var(--accent);border-color:var(--accent)}   /* v1411: Haken ueberlebt das Neuzeichnen (__hakOffen9) */
  .tz.hakt .tz-check::after{content:'\2713';color:#fff;font-size:.78rem;font-weight:800}
  .tz-tx{flex:1;min-width:0;cursor:pointer}
  .tz-flach{display:flex;flex:1;min-width:0;align-items:inherit;gap:inherit}   /* v1355: Kreis + Schrift als flache Ebene (wird in der Post-it-Optik an der Falz abgeschnitten) */
  .tz-tx b{display:block;font-weight:600;font-size:.92rem;line-height:1.35;word-break:break-word}
  .tz-meta{display:block;color:var(--muted);font-size:.71rem;margin-top:2px;line-height:1.35}
  .tz-meta .rot{color:var(--rot)}
  .tz-meta .li{color:var(--accent);font-weight:700}
  .tz-stern{flex:0 0 auto;background:none;border:0;color:var(--line);cursor:pointer;padding:0 2px;margin-top:0;display:flex}
  .tz-stern svg{width:21px;height:21px}
  .tz-stern.an{color:#E8A33D}
  .tz-stern.an svg{fill:#E8A33D}
  .tz.fertig .tz-tx b{text-decoration:line-through;color:var(--muted);font-weight:500}
  .tz.fertig{opacity:.6}
  .tz.wartet .tz-inner{opacity:.65}
  .tz.sel .tz-inner{background:color-mix(in srgb, var(--accent) 14%, var(--bg))}
  .tz-akt{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:6px;z-index:1;font-size:.76rem;font-weight:800;color:#fff;opacity:0}
  .tz-akt.links{left:0;right:0;justify-content:flex-start;padding-left:14px;background:var(--accent)}
  .tz-akt.rechts{left:0;right:0;justify-content:flex-end;padding-right:14px;background:#6b7280}
  .tz.w-rechts .tz-akt.links{opacity:1}
  /* v1751 (Harun zv1: "beim Ziehen wird der Text durchsichtig"): Ursache war tagesplanung-app.css "#todoMine .tz.zieht{opacity:.45}" -
     gedacht fuer das (seit v1681 ungenutzte) Ziehen in den Kalender, traf aber die Wisch-Klasse .zieht dieser Zeile. Beim Wischen bleibt die Zeile deckend. */
  #todoMine .tz.zieht,#vsMine9 .tz.zieht{opacity:1 !important}
  /* v1751 (Harun zv1): Rueckmeldung je Stufenwechsel auch ohne Vibration - Symbol und Wort springen kurz (Scale-Puls), darunter feine Stufen-Punkte */
  .tz-akt.links .akt-p.puls9 > svg,.tz-akt.links .akt-p.puls9 > span{animation:aktPuls9 .2s ease-out}
  @keyframes aktPuls9{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
  .tz-akt.links .akt-stufen9{display:flex;gap:2px;justify-content:center;margin-top:2px;line-height:0}
  .tz-akt.links .akt-stufen9 i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity .12s,transform .12s}
  .tz-akt.links .akt-stufen9 i.an{opacity:1;transform:scale(1.35)}
  /* v1769 (Harun zv2: "kostet das das Icon?"): "Naechster Montag" ist doppelt so breit wie die 46-px-Spalte - mittig lief das "N" links aus dem Bild.
     Nur bei dieser Stufe beginnt das Wort am linken Spaltenrand und laeuft nach rechts (dort ist bis zum Post-it Platz); das Symbol bleibt an seiner Stelle. */
  /* v1770 (Harun zv3: "Naechster Montag viel zu gross - zweizeilig, ohne Logo"): kein Symbol, zwei Zeilen "Naechster" / "Montag", mittig in der 46-px-Spalte,
     gleiche Schriftgroesse wie die anderen Stufen; Datum klein darunter bleibt (passt in die Zeilenhoehe, das Symbol faellt ja weg). */
  .tz-akt.links .akt-p.lang9 > span{white-space:normal;line-height:1.05}
  @media (prefers-reduced-motion: reduce){ .tz-akt.links .akt-p.puls9 > svg,.tz-akt.links .akt-p.puls9 > span{animation:none} }
  .tz.w-links .tz-akt.rechts{opacity:1}
  /* v1351: Loeschen auch in der Schlicht-Ansicht - ab 39 % der Breite wird aus "In Liste" "Loeschen" */
  .tz-akt .akt-l,.tz-akt .akt-x{display:flex;align-items:center;gap:6px}
  /* v1364: links nur Loeschen (immer sichtbar, rot ab der Raste); rechts Planen -> Wecker -> In Liste */
  .tz-akt .akt-l{display:none}
  .tz.liste .tz-akt .akt-l{display:flex}
  .tz.liste .tz-akt .akt-p,.tz.liste .tz-akt .akt-e{display:none}
  .tz.liste .tz-akt.links{background:color-mix(in srgb, var(--lf-tx, var(--accent)) 45%, #000)}
  .tz.rot .tz-akt .akt-x{display:flex}
  .tz.rot .tz-akt.rechts{background:var(--rot)}
  .tz.abzieh .tz-akt.rechts{opacity:1}
  /* v1356 Rueckgaengig im selben Grund-Element: die geloeschte Zeile bleibt (.geloescht), das Papier ist unsichtbar,
     der rechte Grund zeigt den Rueckgaengig-Knopf an der Stelle von "Loeschen"; nach 5,5 s klappt die Zeile ein */
  .tz-akt .akt-u{display:none;background:none;border:0;color:inherit;font:800 .76rem Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:8px 2px;cursor:pointer;pointer-events:auto}
  .tz.geloescht .tz-akt .akt-l,.tz.geloescht .tz-akt .akt-x,.tz.geloescht .tz-akt .akt-e{display:none}
  .tz.geloescht .tz-akt .akt-u{display:inline-flex}
  /* v1359: Statuswort links (Geloescht / Verschoben), Rueckgaengig rechts */
  .tz-akt .akt-w{display:none}
  .tz.geloescht .tz-akt .akt-w{display:block;margin-right:auto;font:600 .84rem Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none}
  .tz.geloescht .tz-akt.rechts{padding-left:16px}
  .tz.geloescht .tz-akt.rechts{opacity:1;pointer-events:auto}
  /* v1778 (Harun to1: "Rueckgaengig genau in der Zeile, wo die Aufgabe geloescht worden ist - im neuen Toast-Stil"): die geloeschte/verschobene
     Zeile zeigt wieder "Geloescht · RUECKGAENGIG" bzw. "Verschoben auf Mo., 12.10. · RUECKGAENGIG" - als Toast-Pille an Ort und Stelle (4 px Ecken),
     hell: dunkle Pille; dunkel: helle Pille mit dunkler Schrift (Kontrast). Nach RUECK_MS9 gleitet die Zeile zu (geloeschtZu9, .zu). */
  :is(#view-termine #todoMine,#todoMine,#vsMine9) .tz.geloescht > .tz-akt.rechts{visibility:visible;top:4px;bottom:4px;left:0;right:0;opacity:1 !important;display:flex;align-items:center;gap:14px;padding:0 4px 0 16px;background:#1f1f24 !important;color:#f4f4f6 !important;border-radius:4px !important;box-shadow:0 4px 14px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.06)}
  :is(#view-termine #todoMine,#todoMine,#vsMine9) .tz.geloescht > .tz-akt.rechts .akt-w{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;font:600 .86rem/1.3 Inter,system-ui,sans-serif}
  :is(#view-termine #todoMine,#todoMine,#vsMine9) .tz.geloescht > .tz-akt.rechts .akt-u{flex:0 0 auto;background:rgba(255,255,255,.08);color:var(--accent,#0FA79E) !important;font:800 .78rem Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:4px !important}
  :root[data-theme="dark"] :is(#view-termine #todoMine,#todoMine,#vsMine9) .tz.geloescht > .tz-akt.rechts{background:#f4f4f6 !important;color:#15161a !important;box-shadow:0 4px 14px rgba(0,0,0,.5)}
  :root[data-theme="dark"] :is(#view-termine #todoMine,#todoMine,#vsMine9) .tz.geloescht > .tz-akt.rechts .akt-u{background:rgba(0,0,0,.07);color:color-mix(in srgb, var(--accent,#0FA79E) 70%, #000) !important}
  .tz.geloescht .tz-akt.links{opacity:0}
  .tz.geloescht .tz-inner{visibility:hidden}
  .tz.geloescht{transition:height .3s cubic-bezier(.32,.72,.35,1),margin .3s cubic-bezier(.32,.72,.35,1),opacity .2s ease}
  .tz.geloescht.zu{opacity:0;height:0 !important;margin-bottom:calc(-1 * var(--zg, 8px)) !important;overflow:hidden}
  /* v1354 rechts zweite Station "Erinnern" (ab 39 % der Breite), wie links "Loeschen" */
  .tz-akt .akt-p,.tz-akt .akt-e{display:flex;align-items:center;gap:6px}
  /* v1357: Symbol ueber dem Wort - bei allen vier Stationen */
  .tz-akt .akt-l,.tz-akt .akt-x,.tz-akt .akt-p,.tz-akt .akt-e{flex-direction:column;gap:3px;font-size:.66rem;line-height:1.1;letter-spacing:.01em}
  :is(#todoMine,#vsMine9) .tz-akt.links{padding-left:2px !important;left:0 !important}   /* v1430 (Harun: "jetzt zu weit links, ragt aus dem Post-it"): buendig mit dem Post-it */   /* v1429 (Harun: "Morgen kann viel weiter links anfangen") */
  .tz-akt.links .akt-p{width:46px;flex:0 0 46px;align-items:center;text-align:center;white-space:nowrap;overflow:visible}   /* v1428 (Harun: "nimm die Mitte von Morgen, absolut"): feste Spalte, Symbol immer an derselben Stelle, laengere Woerter laufen mittig darueber hinaus */   /* v1426 (Harun: "Symbol faengt viel zu weit rechts an"): Symbol und Wort links buendig - das Symbol steht fest, egal wie lang das Wort ist */   /* v1423 (Harun): das Symbol steht immer an derselben Stelle, egal wie lang das Wort ist */
  .tz-akt .akt-p small{font-size:.58rem;font-weight:600;opacity:.75;letter-spacing:0}   /* v1383: Zieltag unter dem Wort */
  .tz-akt .akt-l svg,.tz-akt .akt-x svg,.tz-akt .akt-p svg,.tz-akt .akt-e svg{width:19px;height:19px}
  .tz-akt .akt-e,.tz.erin .tz-akt .akt-p{display:none}
  .tz.erin .tz-akt .akt-e{display:none}   /* v1377: Wecker-Station entfaellt */
  .tz.erin .tz-akt.links{background:color-mix(in srgb, var(--lf-tx, var(--accent)) 60%, #000)}
  .tz-knoepfe{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
  .todo-ja{background:var(--accent);color:#fff;border:none;border-radius:8px !important;padding:6px 12px;font-size:.76rem;font-weight:700;cursor:pointer}
  .todo-nein{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px !important;padding:6px 12px;font-size:.76rem;cursor:pointer}
  /* Antworten (Stattgefunden?, Gaesteliste, Zusagen) in derselben leichten Optik */
  #todoAntworten .todo-item{display:flex;align-items:flex-start;gap:10px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0 !important;padding:11px 2px}
  #todoAntworten .todo-tx{flex:1;min-width:0}
  #todoAntworten .todo-tx b{font-weight:600;font-size:.92rem}
  #todoAntworten .todo-tx small{display:block;color:var(--muted);font-size:.71rem;margin-top:2px}
  #todoAntworten .todo-check{flex:0 0 auto;width:22px;height:22px;border-radius:50% !important;border:2px solid var(--line);cursor:pointer;margin-top:1px}
  #todoAntworten .todo-desc{display:block;color:var(--muted);font-size:.78rem;margin-top:4px}
  /* Erledigt-Abschnitt am Ende jeder Liste - offen, ein Tipp klappt ein */
  .todo-erl-kopf{display:flex;align-items:center;gap:6px;margin:20px 2px 2px;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);cursor:pointer}
  .todo-erl-kopf i{margin-left:auto;font-style:normal;background:var(--chip);border-radius:99px !important;padding:1px 7px}
  /* Feste Eingabezeile ueber der Fussleiste */
  .todo-eingabe{position:fixed;left:0;right:0;z-index:35;bottom:calc(56px + var(--sab,0px) + var(--vvUnten,0px));background:var(--card);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 16px}
  .todo-eingabe .ts-plus{flex:0 0 auto;width:22px;height:22px;border-radius:50% !important;border:2px dashed var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;line-height:1}
  .todo-eingabe input,.todo-eingabe textarea{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font-family:inherit;font-size:.95rem;padding:6px 0}
  .todo-eingabe input:focus,.todo-eingabe textarea:focus{outline:none}
  /* v1558 (Harun z9: "zwei Zeilen - dann das Eingabefeld in die Hoehe, maximal drei Zeilen, morphen, nicht springen") */
  .todo-eingabe textarea#todoSchnellFeld{display:block;resize:none;overflow:hidden;line-height:1.35;height:calc(1.35em + 12px);box-sizing:border-box;transition:height .18s cubic-bezier(.3,.6,.5,1);overflow-wrap:break-word;word-break:normal;white-space:pre-wrap}
  /* v1482 (Harun s2: "im Text muss auch der Montag farblich hinterlegt werden, z. B. mit Grau"): Spiegel unter dem Feld, gleiche Schrift,
     Text unsichtbar - nur die erkannten Woerter tragen einen grauen Grund. Die Schrift kommt per JS vom Feld (Medienregeln aendern sie). */
  .todo-eingabe .te-feld9{flex:1;min-width:0;position:relative;display:flex}
  .todo-eingabe .te-feld9 input,.todo-eingabe .te-feld9 textarea{position:relative;z-index:1;width:100%}
  #teSpiegel9{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;white-space:pre-wrap;color:transparent;box-sizing:border-box}   /* v1495: ueber dem Feld - nur die Hinterlegungen fangen Tipps */
  #teSpiegel9 mark{pointer-events:auto;cursor:pointer}
  #teSpiegel9 mark.kont9{pointer-events:none;cursor:auto}   /* v1522: Kontakte grau, aber nicht ausschaltbar */
  #teSpiegel9 > span{display:block;width:100%;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}   /* v1558: bricht um wie das Feld */
  #teSpiegel9 mark{padding:1px 0 !important;margin:-1px 0 !important;-webkit-box-decoration-break:clone;box-decoration-break:clone}   /* v1558: mehrzeilig flacher, Zeilen beruehren sich nicht */
  #teSpiegel9 mark{color:transparent;background:color-mix(in srgb, var(--ink) 11%, transparent);border-radius:5px;padding:3px 0;margin:-3px 0;box-shadow:0 0 0 2px color-mix(in srgb, var(--ink) 11%, transparent);box-decoration-break:clone}
  /* v1495 (Harun x2: "das vorherige sah schoener aus"): wieder die graue Hinterlegung aus v1489 - die Akzent-Pille (v1492) ist raus */
  #teSpiegel9 mark.aus9{background:transparent;box-shadow:none;text-decoration:underline dashed color-mix(in srgb, var(--ink) 45%, transparent);text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-skip-ink:none}   /* v1488: ausgeschaltet */
  .todo-eingabe.hide{display:none !important}
  /* Suche + Mehrfachauswahl */
  /* v1403 (Harun): Suchfeld cleaner - eine ruhige Pille, Lupe links, X rechts, keine Raender */
  .todo-suche{display:flex;align-items:center;gap:8px;margin:10px 0 0;background:var(--chip);border-radius:14px !important;padding:2px 6px 2px 12px}
  .todo-suche::before{content:'';width:16px;height:16px;flex:0 0 auto;background:var(--muted);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") center/contain no-repeat}
  .todo-suche input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font-family:inherit;font-size:.95rem;padding:10px 0}
  .todo-suche input:focus{outline:none}
  .todo-suche button{flex:0 0 auto;width:34px;height:34px;background:none;border:0;border-radius:50% !important;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer}
  #todoSuchBtn.an{color:var(--accent)}
  .todo-auswahl{display:flex;align-items:center;gap:6px;margin:10px 0 0;padding:8px 10px;background:var(--chip);border-radius:10px !important;font-size:.8rem;font-weight:700}
  .todo-auswahl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}
  .todo-auswahl button{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:8px !important;color:var(--ink);font:700 .74rem Inter,system-ui,sans-serif;padding:6px 8px;cursor:pointer;white-space:nowrap}
  .todo-auswahl button.rot{color:var(--rot)}
  .todo-auswahl button.leise{background:none;border-color:transparent;color:var(--muted)}
  /* Navigation (Burger) wie im Kalender */
  #todoDim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90}
  #todoDrawer{position:fixed;top:0;right:0;bottom:0;width:250px;z-index:91;background:var(--card);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.3);padding:calc(16px + env(safe-area-inset-top,0px)) 14px 16px;transform:translateX(105%);transition:transform .22s ease;overflow-y:auto}
  #todoDrawer.auf{transform:none}
  #todoDrawer h5{margin:2px 0 6px;font-size:.64rem;letter-spacing:.08em;color:var(--muted);font-weight:800}
  #todoDrawer .dr-punkt{display:flex;align-items:center;gap:8px}
  #todoDrawer .dr-punkt.an{background:var(--chip);color:var(--accent)}
  #todoDrawer .dr-punkt i{margin-left:auto;font-style:normal;font-size:.72rem;font-weight:700;color:var(--muted);background:var(--chip);border-radius:99px !important;padding:1px 7px}
  #todoDrawer .dr-punkt i:empty{display:none}
  #todoDrawer .dr-punkt.neu{color:var(--accent)}
  #todoDrawer .dr-punkt svg{flex:0 0 auto}
  #todoDrawer .dr-punkt .dr-name .dr-sub{display:block;font-size:.66rem;font-weight:500;color:var(--muted);line-height:1.1;margin-top:1px}
  /* v1398 VORSCHAU: Sichten-Kacheln */
  /* v1400/v1402 (Harun): Menue FLACH - Start (hervorgehoben), FILTER-Block versetzt, BLAETTER mit Mappen; die Blaetter einer Mappe haengen an einem Strich. */
  #todoDrawer .dr-punkt.dr-start .dr-name{font-weight:800}
  #todoDrawer h5.dr-filter{margin:10px 0 2px 8px}
  #todoDrawer .dr-filterblock .dr-punkt{padding-left:8px}   /* v1454: eingerueckt am Strich wie die Blaetter einer Mappe */
  #todoDrawer .dr-kinder{border-left:2px solid var(--line);margin:0 0 2px 17px;padding-left:2px;overflow:hidden}
  #todoDrawer .dr-kinder.zu{max-height:0;margin-bottom:0}
  /* v1407 (Harun): die Blaetter einer Mappe gleiten von oben herein und nach oben hinaus (gruppeZu9 misst die echte Hoehe) */
  #todoDrawer .dr-kinder .dr-punkt{transition:transform .28s cubic-bezier(.32,.72,.35,1),opacity .24s}
  #todoDrawer .dr-kinder.zu .dr-punkt{transform:translateY(-10px);opacity:0}
  #todoDrawer .dr-kinder .dr-ein{padding-left:8px}
  #todoDrawer .dr-gruppe .dr-mappe-sym{display:inline-flex;flex:0 0 auto;color:var(--muted)}
  #todoDrawer .dr-gruppe .dr-chev{display:inline-flex;flex:0 0 auto;color:var(--muted);margin-left:2px}
  #todoDrawer .dr-gruppe .dr-chev svg{width:14px;height:14px}
  /* v1402/v1403 (Harun): die Start-Sonne ist EIN frei liegendes Element im Kopf; sie faehrt per transform zwischen zwei Ankern -
     dem Platz im Knopf oben links (mit "Zu Start") und dem Platz vor dem Titel "Start". Knopf-Layout und Sonne sind getrennt, nichts ruckt. */
  #todoStartBtn{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:44px;padding:0 10px 0 12px;color:var(--ink)}   /* v1404 (Harun): oben schwarz */
  #todoStartBtn .ts-platz{display:inline-block;width:20px;height:20px;flex:0 0 auto}
  #todoStartBtn .ts-text{font:600 .88rem Inter,system-ui,sans-serif;white-space:nowrap;max-width:130px;overflow:hidden;transition:opacity .22s,max-width .32s}
  .todo-kopf.auf-start #todoStartBtn{pointer-events:none}
  .todo-kopf.auf-start #todoStartBtn .ts-text{opacity:0;max-width:0}
  #todoSonne9{position:absolute;left:0;top:0;width:20px;height:20px;display:inline-flex;color:var(--ink);pointer-events:none;z-index:2;transition:transform .32s cubic-bezier(.4,0,.2,1),color .32s;will-change:transform;transform-origin:center}
  .todo-kopf.auf-start #todoSonne9{color:var(--lf-tx)}   /* v1404: vor dem Titel in der Ansichtsfarbe, oben schwarz */
  #todoSonne9.still{transition:none}
  #todoSonne9 svg{width:20px;height:20px}
  #todoTitel .tt-platz{display:inline-block;width:1.15em;height:1.15em;vertical-align:-2px;margin-right:8px}
  /* v1402/v1403 (Harun): das Blatt ist VOLLFLAECHIG (edge-to-edge am Handy) und traegt ueberall die hellere Papierfarbe;
     auf Start beginnt es etwas tiefer unter den Meldungen mit Oberkante und Schatten, oben behalten die Meldungen ihre Karten.
     Drei Kennungen im Selektor, damit die Farbe die spaetere Linien-Kurzschrift (background: ...) schlaegt. */
  #view-termine{--papier9:color-mix(in srgb, var(--card) 80%, var(--bg, #f7f7f6))}   /* v1413 (Harun): Papier Richtung Weiss */
  #view-termine #todoInhalt #todoMine,#view-termine #todoInhalt #todoLinien{background-color:var(--papier9);margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;background-origin:content-box}
  #view-termine #todoInhalt #todoLinien{min-height:60vh}   /* v1445: wird per linienEnde9() genau gesetzt */
  #view-termine #todoWrap{max-width:none !important}   /* v1467 (Harun, Idee mit Bild: Fold aufgeklappt - Aufgaben vollflaechig, bis es eine eigene Tablet-/Fold-Ansicht gibt) */
  #view-termine #todoWrap{padding-bottom:0 !important}   /* v1450 (Harun r1, Bild: grauer Streifen ohne Linien unter dem letzten Zettel): das 150-px-Polster fuer Eingabe/Leiste traegt jetzt die Linienflaeche (linienEnde9) */
  /* v1404 (Harun): Luft unter der Oberkante - Innenabstand 24 px (Start 28 px); durch background-origin content-box beginnt das
     Linienraster erst darunter, die Zeilen sitzen weiter auf den Linien. Die Kante faehrt beim Wechsel. */
  #view-termine #todoInhalt #todoMine{box-shadow:0 -6px 12px -8px rgba(0,0,0,.14);padding-top:calc(var(--zg, 4px) / 2);transition:margin-top .3s cubic-bezier(.32,.72,.35,1),padding-top .3s cubic-bezier(.32,.72,.35,1),border-radius .3s,box-shadow .3s}
  #view-termine.ansicht-start #todoInhalt #todoMine{margin-top:68px;padding-top:calc(var(--zg, 4px) / 2 + 10px);   /* v1422 (Harun): Abstand zu den Anfragen doppelt, Blattkante 10 px hoeher ueber der Ueberschrift */border-radius:18px 18px 0 0;box-shadow:0 -6px 12px -8px rgba(0,0,0,.14)}   /* v1405 (Harun): nur Schatten, keine Kante */
  /* v1410 (Harun): der aufgeklappte Modus (Tablet/Fold: Spalte links, Blatt, Eingabezeile, Vorschlaege) ist ZURUECKGESTELLT - die Regeln von v1404/v1408/v1409 sind raus, es gilt wieder die normale mittige Spalte. */
  /* v1404 (Harun): Drop-up der Tages-Zettel im Stil des Tages-Popups des Kalenders */
  .drop-up.kal9{border-radius:8px !important;box-shadow:0 14px 40px rgba(0,0,0,.35);padding:10px 12px;min-width:240px;max-width:min(384px,88vw)}
  .drop-up.kal9 .tp-zeile{font-size:.82rem;padding:6px 0}   /* v1419 (Harun): Schrift wie im Kalender */
  .drop-up.kal9 .tp-zeile .tz-check{width:18px !important;height:18px !important}
  .drop-up.kal9 button.tp-zu{padding:6px 12px !important;font-size:.76rem !important}
  .drop-up.kal9 .tp-zeile{cursor:default}
  .drop-up.kal9 .tp-zu-reihe9{display:flex;justify-content:flex-end;margin-top:8px}
  .drop-up.kal9 .tp-zu-reihe9 button.tp-zu{margin:0 !important;background:color-mix(in srgb, var(--accent) 12%, transparent) !important;color:var(--accent) !important;border:0 !important;padding:8px 10px 8px 14px !important;font-weight:700 !important;font-size:.84rem !important;gap:6px !important;align-items:center}   /* v1423 */
  .drop-up.kal9 button.tp-zu{display:inline-flex;width:auto;justify-content:center;gap:6px;background:var(--accent);color:var(--accent-ink,#fff);border-radius:8px !important;margin-top:8px;padding:8px 14px;font-weight:700;font-size:.82rem}
  /* v1403 (Harun): Drop-up mit den Zetteln eines Tages (Kalender-Balken) */
  .drop-up .du-aufg{min-width:230px;max-width:320px}
  .drop-up .du-kopf{font-size:.78rem;font-weight:800;color:var(--muted);padding:4px 6px 6px}
  .drop-up h4{margin:0 0 6px;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}   /* v1411 (Harun): jedes Halbmodal traegt eine Ueberschrift */
  /* v1415 (Harun): Faelligkeit/Erinnerung - Symbol links, Text, Wert rechts; Pillen fuer kurze Abstaende */
  .drop-up button.du-z{display:flex;align-items:center;gap:14px}
  .drop-up .du-sym{position:relative;flex:0 0 26px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
  .drop-up .du-sym svg{width:22px;height:22px}
  .drop-up .du-plus{position:absolute;top:-7px;right:-9px;font-style:normal;font-size:.56rem;font-weight:800;color:var(--accent);background:var(--card);border-radius:99px !important;padding:0 3px;line-height:1.4}
  .drop-up .du-tx{flex:1;min-width:0;text-align:left}
  /* v1528: Spiegel fuer die graue Hinterlegung beim Bearbeiten des Titels */
  .ag-kopfkarte .ag-kopfzeile{position:relative}
  #agTitel{position:relative;z-index:1;background:transparent !important}
  #agSpiegel9{position:absolute;z-index:0;pointer-events:none;color:transparent;white-space:pre-wrap;overflow-wrap:break-word;overflow:hidden;margin:0;border:0}
  #agSpiegel9 mark{color:transparent;background:color-mix(in srgb, var(--ink) 11%, transparent);border-radius:5px;box-shadow:0 0 0 2px color-mix(in srgb, var(--ink) 11%, transparent);box-decoration-break:clone;-webkit-box-decoration-break:clone}
  #agTitel.ag-durch9{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted);transition:color .2s}   /* v1423 */
  .ag-ende9{position:absolute;z-index:4;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--card);box-shadow:0 6px 18px rgba(0,0,0,.12);border-radius:4px !important;padding:24px}   /* v1431 Ende des Stapels */
  .ag-ende9 .ae-tx{font-size:1.15rem;font-weight:700;color:var(--ink)}
  .ag-ende9 small{font-size:.8rem;color:var(--muted);margin-bottom:8px}
  .ag-ende9 button{display:inline-flex;align-items:center;gap:8px;width:220px;justify-content:center;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:4px !important;padding:11px 14px;font:600 .92rem Inter,system-ui,sans-serif;cursor:pointer}
  #aufgSheet .ag-startzeile9{flex:0 0 auto;display:flex;align-items:center;padding:14px 0 0 10px;background:var(--bg)}   /* v1437 (Harun: "muss an derselben Stelle sein wie in der Liste") - gemessen: Text links 48 px, Mitte 34 px */   /* v1435 */
  #aufgSheet .ag-startzeile9 button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--ink);font:600 .88rem Inter,system-ui,sans-serif;height:44px;padding:0 10px 0 12px;cursor:pointer}
  .ag-ende9.neu9{justify-content:flex-start;align-items:stretch;padding:22px 22px 18px}   /* v1434: neuer Zettel direkt im Stapel */
  .ag-ende9 .ae-titel{width:100%;border:0;background:transparent;resize:none;font:700 1.35rem/1.25 Inter,system-ui,sans-serif;color:var(--ink);outline:none;padding:0}
  .ag-ende9 .ae-hinweis{font-size:.8rem;color:var(--muted);margin-top:6px}
  .ag-blatt9{position:absolute;z-index:6;box-sizing:border-box;background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.14);border-radius:4px !important;pointer-events:none}
  .start-geist9{position:absolute;z-index:6;pointer-events:none;transform-origin:left top;white-space:nowrap;line-height:1.2}
  /* td1 (Harun 23.10.: "Aufgabe hinzufuegen steht zuerst zu weit oben ueber Ueberfaellige Aufgaben und springt dann runter"): viewAuf (core) schiebt die
     ganze Ansicht per transform - solange das laeuft, ist #view-termine der Bezugsrahmen der FESTEN Eingabe (#todoEingabe, Band, Vorschlaege) und sie
     steht um die Leiste (56 px) zu hoch, bis die Animation endet. Hier blendet die Ansicht nur ein (opacity erzeugt keinen Bezugsrahmen); das leichte
     Hochgleiten macht nur der Inhalt (nicht der Kopf: Sonne und Kastenhoehe messen ihn, v1623). Am PC (tablet-breit) bleibt viewAuf aus (layout-tablet-breit.css, pc1). */
  @keyframes viewAufTodo9{from{opacity:0}to{opacity:1}}
  @keyframes viewAufTodoHub9{from{transform:translateY(10px)}to{transform:none}}
  :root:not(.geraet-tablet-breit) #view-termine.on{animation:viewAufTodo9 .22s ease}
  :root:not(.geraet-tablet-breit) #view-termine.on :is(#todoInhalt > #todoAntworten, #todoInhalt > #todoMine, #todoInhalt > #todoLinien){animation:viewAufTodoHub9 .22s ease}
  .tz-akt .du-sym{position:relative;display:inline-flex;align-items:center;justify-content:center}
  .tz-akt .du-sym svg{width:20px;height:20px}
  .tz-akt .du-plus{position:absolute;top:-6px;right:-10px;font-style:normal;font-size:.55rem;font-weight:800;line-height:1.3}
  .drop-up .du-wert{flex:0 0 auto;color:var(--muted);font-size:.86rem}
  .drop-up button.du-z.an .du-tx,.drop-up button.du-z.an .du-sym{color:var(--accent)}
  .drop-up .du-pillen{display:flex;gap:8px;margin:0;padding:12px 0;flex-wrap:wrap;border-bottom:1px solid var(--line)}   /* v1441 (Harun: "unsauber"): Pillen-Reihe im selben Takt wie die Zeilen - Luft oben/unten, eigener Strich */
  .drop-up button.du-pille{flex:1 1 0;width:auto;min-width:64px;justify-content:center;border:1px solid var(--line) !important;border-radius:99px !important;padding:9px 6px !important;font-size:.86rem;font-weight:600;color:var(--ink);min-height:0 !important}
  /* ================================================================
     v1412 STIL AUS EINEM GUSS (Harun, Runde 7) - DIE LISTE der Angleichungen To Do <-> Kalender.
     Alles in diesem Block gilt NUR ohne body.stil-klassisch. Einstellungen > "Klassischer Stil" = An stellt jede Zeile zurueck.
     1 Segment-Schalter (Thema, Toene, Tag/Woche/Monat, Typ) in Pillenform - wie die To-Do-Pillen (Vorschlaege, Suche)
     2 Mittige Modale (Rueckfragen, Waehler) mit derselben Rundung (22 px) wie die Halbmodale von unten
     3 Abschnitts-Ueberschriften des Kalenders (Tages-Popup, Kalender-Liste, Agenda-Tag) in der To-Do-Schrift: .8rem, 600,
       ohne Sperrung und ohne Grossbuchstaben (JS: stilKlassisch9 entscheidet ueber toUpperCase)
     4 Zeilen der Kalender-Popups in der Zeilen-Schrift der To-Do-Halbmodale (.9rem)
     5 Chips im Kalender (ganztaegig, Zettel-Balken) mit 6 px Rundung wie die Zettel-Zeilen
     6 (v1413 zurueckgenommen - Harun: "die Farbe der Notiz fehlt": die Zettel-Seite behaelt die Blattfarbe)
     ================================================================ */
  body:not(.stil-klassisch) .seg{border-radius:4px !important}   /* v1421: ohne !important verlor die Regel gegen die globale Eckig-Regel (v445) */
  body:not(.stil-klassisch) .seg button{border-radius:4px !important}   /* v1419: Eigene/Team-Termine und alle Schalter einheitlich */
  body:not(.stil-klassisch) .modalbox:not(.lm){border-radius:4px !important}
  /* v1420 (Harun: "einige gar nicht, einige zu stark gerundet"): 4 px auch hier */
  body:not(.stil-klassisch) .kz,body:not(.stil-klassisch) .dr-punkt,body:not(.stil-klassisch) .tp-plus,body:not(.stil-klassisch) .btn,body:not(.stil-klassisch) .todo-ja,body:not(.stil-klassisch) .todo-nein,body:not(.stil-klassisch) .ty-in,body:not(.stil-klassisch) .lm,body:not(.stil-klassisch) .lm .lm-name input,body:not(.stil-klassisch) .todo-eingabe,body:not(.stil-klassisch) .ad-chip,body:not(.stil-klassisch) .ag-k,body:not(.stil-klassisch) .pkt{border-radius:4px !important}
  /* v1421 (Harun: "ich brauche einheitlich eine Rundung"): 4 px auch Suchfeld, Knoepfe der Eingabezeile, Analyse-Karten und -Pillen, Struktur-Wahl */
  body:not(.stil-klassisch) .todo-suche,body:not(.stil-klassisch) .todo-eingabe .te-icons button,body:not(.stil-klassisch) #view-analyse .kpi-card,body:not(.stil-klassisch) #view-analyse .ind-card,body:not(.stil-klassisch) #view-analyse .az-karte,body:not(.stil-klassisch) #view-analyse .ana-filter button,body:not(.stil-klassisch) #view-analyse .tfbtn,body:not(.stil-klassisch) #view-analyse .tfmenu,body:not(.stil-klassisch) #strselHost button{border-radius:4px !important}
  /* v1421 (Harun: "einheitlich eine Rundung"): alle eckigen Flaechen mit eigenem Radius (8-12 px) auf 4 px. Bewusst NICHT: Pillen
     (Vorschlaege, du-pille), Punkte/Zaehler, Griffe der Halbmodale, Schalter, die Halbmodale und Drop-ups von unten selbst (p2). */
  body:not(.stil-klassisch) .ic-titel,body:not(.stil-klassisch) .todo-auswahl,body:not(.stil-klassisch) .todo-auswahl button,body:not(.stil-klassisch) .drop-up button.du-zu,body:not(.stil-klassisch) .overlay[data-ovk="eswdh"] .modalbox button,body:not(.stil-klassisch) .blatt-panel .bp-akt button,body:not(.stil-klassisch) .lm .bp-akt button,body:not(.stil-klassisch) .blatt-panel .bp-akt button.voll,body:not(.stil-klassisch) .blatt-panel .bp-raster button,body:not(.stil-klassisch) .blatt-panel .bp-zeit input,body:not(.stil-klassisch) .blatt-panel input.ty-in,body:not(.stil-klassisch) .ag-kopfzeile,body:not(.stil-klassisch) .ag-block,body:not(.stil-klassisch) .ag-schritt.hebt,body:not(.stil-klassisch) .ag-dauer button,body:not(.stil-klassisch) .tz,body:not(.stil-klassisch) .tz-akt,body:not(.stil-klassisch) #todoAntworten .todo-item,body:not(.stil-klassisch) .bp-symbole button,body:not(.stil-klassisch) .lm .lm-sel,body:not(.stil-klassisch) .lm .bp-akt .gm-reihe .gm-stift,body:not(.stil-klassisch) .lm .lm-name input,body:not(.stil-klassisch) .lm .lm-auf,body:not(.stil-klassisch) .lm .lm-fuss .voll,body:not(.stil-klassisch) .drop-up .du-zeit input,body:not(.stil-klassisch) .ag-kopfkarte,body:not(.stil-klassisch) .ag-schritt .st-undo,body:not(.stil-klassisch) .ag-fuss button,body:not(.stil-klassisch) #todoDrawer .dr-ic,body:not(.stil-klassisch) .bp-akt button.wahl .wk,body:not(.stil-klassisch) .todo-erl-kopf,body:not(.stil-klassisch) .strsel-row,body:not(.stil-klassisch) .strsel-res,body:not(.stil-klassisch) .strsel-search{border-radius:4px !important}
  body:not(.stil-klassisch) .tp-kopf{letter-spacing:0;text-transform:none}   /* v1419: Groesse wie klassisch */
  body:not(.stil-klassisch) #ansichtAgenda .ag-tag b{font-size:.95rem;font-weight:700}
  body:not(.stil-klassisch) #ansichtAgenda .ag-tag span{font-size:.74rem;letter-spacing:0;font-weight:600}
  body:not(.stil-klassisch) .tp-zeile{font-size:.9rem}
  body:not(.stil-klassisch) .ad-chip{border-radius:0 !important}   /* v1423 (Harun): im Kalender ohne Rundung wie die Termine, sonst wirkt es durchmischt */
  .ad-chip{font-family:'Barlow Condensed','Roboto Condensed','sans-serif-condensed','Arial Narrow',sans-serif;font-weight:600;font-size:.84rem;line-height:15px;letter-spacing:.01em}   /* v1423: eine Schrift mit den Terminen; v1424 (Harun: "viel zu klein"): Groesse wie die Termin-Titel (.84rem) */
  /* v1415 Stil-Plan (Harun-Go p1, p2 mit 6 px, p3, p4, p5; p6 NEIN - die Terminansicht bleibt, nur Schrift):
     p1 eine Listenzeile: Titel 1rem/600, Unterzeile .8rem in Agenda, Tages-Popup und Kalender-Liste */
  /* v1419 (Harun): Schriftgroessen der Popups/Agenda bleiben wie im klassischen Stil (p1-Schriftregeln entfernt) */
  /* p2 eine Rundung: 6 px fuer Karten in Kalender und To Do (Halbmodale bleiben rund) */
  body:not(.stil-klassisch) #tagPop,body:not(.stil-klassisch) .drop-up.kal9,body:not(.stil-klassisch) #aufgSheet .ag-kopfkarte,body:not(.stil-klassisch) #aufgSheet .ag-block,body:not(.stil-klassisch) .todo-item,body:not(.stil-klassisch) .drop-up.kal9 button.tp-zu{border-radius:4px !important}   /* v1419 (Harun): 4 px, fast rechteckig */
  /* p3 eine Ueberschrift: .8rem, halbfett, ohne Grossbuchstaben */
  body:not(.stil-klassisch) #view-termine .todo-sekt{font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none}
  /* p4 eine Flaechenfarbe: Grund hellgrau, Karten weiss - kein gruener Hauch hinter dem To Do */
  body:not(.stil-klassisch) #view-termine{--lf-bg:var(--bg)}
  /* p5 ein Symbolsatz: Kopf-Symbole 22 px, eine Strichstaerke */
  body:not(.stil-klassisch) .kal-ic > svg{width:22px;height:22px;stroke-width:1.9}
  .drop-up .du-aufgz{display:flex;gap:8px;align-items:baseline;padding:7px 6px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink)}
  .drop-up .du-aufgzeit{flex:0 0 auto;color:var(--muted);font-variant-numeric:tabular-nums;min-width:38px;font-size:.82rem}
  .drop-up .du-aufgtx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drop-up .du-stern{color:#E0A24A;flex:0 0 auto}
  .drop-up button.du-zu{justify-content:center;background:var(--accent);color:#fff;border-radius:10px !important;margin-top:6px;font-weight:700}
  .todo-vorschlaege{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(56px + var(--sab,0px) + var(--vvUnten,0px) + 12px + 68px);z-index:34;display:flex;align-items:center;gap:8px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px !important;padding:10px 18px 10px 14px;font:600 .9rem Inter,system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.16);cursor:pointer}
  .todo-vorschlaege svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
  .todo-vorschlaege.hide{display:none}
  /* v1570: Kalenderschrift "Rund" - nur die Familie wechselt (Groessen bleiben, damit das Zoomen unveraendert reagiert); Android hat Roboto eingebaut */
  body.ksr9 .wp-ev,body.ksr9 .tl-ev,body.ksr9 .wp-buendel,body.ksr9 .ad-chip,body.ksr9 .kz .balken,body.ksr9 .wp-ev *,body.ksr9 .tl-ev *{font-family:'Roboto','Google Sans',Inter,system-ui,sans-serif !important;letter-spacing:0 !important}   /* v1576: Rund = Alt + runde Schrift */
  body.ksr9 .wp-ev,body.ksr9 .wp-buendel{font-size:.76rem}   /* v1579 (Harun s7: "bei Rund sind die Eintraege in der Woche etwas zu gross"): .84 -> .76 */
  /* v1621 (Harun s11: "Monat mit Jahr im Kopf immer in der Groesse von Schmal, in beiden Schriftmodi"): gezielt #kalMonat (nicht
     die ganze .monat-Klasse, die auch "Verschieben" und "Analyse" betitelt) - die ID schlaegt dank hoeherer Spezifitaet auch die
     body.ks9-Regel darueber, die nur fuer den Zustand "Schmal" galt. */
  #kalMonat{font-size:1.2rem !important}
  .mk-liste9{display:flex;flex-direction:column;gap:6px;margin:0 0 6px}   /* v1433 einheitliche Meldungs-Karten */
  .mk9{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:4px !important;padding:9px 10px 9px 12px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .mk9 .mk-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .mk9 .mk-tx b{font-size:.92rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mk9 .mk-tx small{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mk9 .mk-tx small.mk-meta9,.ka9 .ka-buehne9 .mk9 .mk-tx small.mk-meta9{display:block;margin-top:2px !important}   /* v1547: Eckdaten untereinander */
  .mk9 .mk-kn{display:flex;gap:6px;flex:0 0 auto}
  .mk9 .mk-kn button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:4px !important;padding:6px 10px;font:600 .76rem Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
  .mk9 .mk-kn button.ja{background:var(--accent);border-color:var(--accent);color:#fff}
  /* v1438 (Harun: "sieht schrecklich aus"): Karteikasten-Optik aus v1437 wieder entfernt - Alternativen auf der Pruefseite */
  #todoAntworten.ka-an9 > #ergWrap,#todoAntworten.ka-an9 > #gastAufgWrap,#todoAntworten.ka-an9 > #todoAnfragenWrap,#todoAntworten.ka-an9 > #todoZusagen,#todoAntworten.ka-an9 > #buchAnf9{display:none !important}   /* v1440: nur noch Quelle */
  .ka9{margin:0 0 10px;scroll-margin-top:120px}
  /* v1660: Anlass-Karte (wie prototyp-anlaesse-4, gk-Form): Clipart ueber der Kante, rote Frage-Linie, Fusszeile.
     Dunkel: Weg 2 "weiches Licht" - Weiss bleibt Weiss, nur gedaempft (kein Entfernen/Umkehren). */
  .anl9{margin:0 0 12px;padding-top:62px;transition:opacity .35s ease}
  .anl9.anl-aus9{padding-top:0}
  .anl9 .anl-zeile9{display:flex;align-items:center;gap:8px;font:500 .78rem Inter,sans-serif;color:var(--muted);padding:2px 2px}
  .anl9 .anl-zeile9 span{flex:1}
  .anl9 .anl-zeile9 button{height:30px;padding:0 10px;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 .76rem Inter,sans-serif;cursor:pointer}
  .anl9 .gk9{position:relative;--gk:#FAF5EA;--gl:#9C7A3C;--gt:#1d1d1f;color:var(--gt);filter:drop-shadow(0 1px 1px rgba(0,0,0,.07)) drop-shadow(0 8px 16px rgba(0,0,0,.10))}
  html[data-theme="dark"] .anl9 .gk9{--gk:#1E2433;--gl:#C9D3E6;--gt:#F1F4FA}
  .anl9 .gk9 img{position:absolute;top:-49px;right:8%;   /* v1666 (Harun): 8 % nach links */ width:122px;height:130px;   /* v1665 (Harun): 10 % kleiner, 5 % rechts, 5 % hoeher */ object-fit:contain;object-position:bottom;z-index:1;pointer-events:none}