/* layout-tablet-breit.css - Breitformat (Tablet quer = Desktop), Stufe T aus docs/TABLET_FOLD_KONZEPT.md (Runde r68)
   ---------------------------------------------------------------------------------------------------------------
   AKTIV NUR unter html.geraet-tablet-breit. Die Klasse setzt allein layout-flex.js (GeraetLayout9): automatisch ab
   900 px Breite (ohne Flex-Modus) oder erzwungen ueber den Umschalter / ?geraet=tablet-breit. Diese Datei und
   layout-tablet-breit.js setzen die Klasse NIE selbst (eine Wahrheit, PFLICHT 6). Ohne Klasse greift hier NICHTS -
   Handy, Tablet hochkant und Flex bleiben exakt wie heute (Bildvergleich 390x844: pixelgleich).
   Hausstil: keine neuen Farben (nur Tokens der App), Ecken 4 px, keine Karteikarten-Optik, Hover nur bei Maus.
   Die Datei steht im <head> NACH dem App-<style>; gleiche Spezifitaet gewinnt deshalb hier. !important nur dort,
   wo die App selbst !important oder Inline-Stile setzt (vermerkt). */

:root.geraet-tablet-breit{
  --lb-rail:72px;                 /* Seitenleiste */
  --lb-blaetter:264px;            /* To Do: Blaetter-Spalte */
  --lb-begleit:360px;             /* EINE Breite fuer die GANZE Begleitspalte rechts: Terminkarte (#pdSheet), Aufgaben-Detail
                                      (#aufgSheet), Vorschlaege/Halbmodale, "Listen ansehen", die Planer-Spalte im Kalender-
                                      Reiter UND die Start-Spalte (Nachfragen/Anfragen) - ueberall dieselbe Breite, ein Name
                                      (pl9, Harun: "Start-Spalte und Terminkarten viel zu breit - so breit wie die Aufgaben-
                                      Spalte der Tagesplanung"). Deckt sich mit deren Breite (tagesplanung-app.css .tp9-leiste
                                      max-width); keine Steigerung mehr nach Fensterbreite (vorher 400/480/520 px, pl5). */
  --lb-pinw:var(--lb-blaetter);   /* v2150 (Harun): To-Do-Navigation rechts; angeheftet = Inhalt schrumpft um diese Breite, html.lb-lose (geloest) = 0 */
  --lb-text:760px;                /* hoechste Lesebreite fuer Listen/Texte */
}

:root.geraet-tablet-breit.lb-lose{--lb-pinw:0px}

/* ============ 1. Navigation: die <nav> wird zur Seitenleiste links ============ */
:root.geraet-tablet-breit nav{
  top:0;bottom:0;left:0;right:auto;width:var(--lb-rail);height:auto;
  flex-direction:column;justify-content:flex-start;gap:4px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 0 calc(12px + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);
  border-top:0;border-right:1px solid var(--line);
  box-shadow:none;
  background:var(--nav);-webkit-backdrop-filter:none;backdrop-filter:none;
}
:root.geraet-tablet-breit nav button{flex:0 0 60px;width:100%;gap:4px;font-size:.62rem;line-height:1.1;text-align:center;padding:0 4px;border-radius:4px}
:root.geraet-tablet-breit nav button.on svg{transform:none}
:root.geraet-tablet-breit nav .badge{top:6px}
/* Beim Tippen schiebt die App die Leiste aus dem Bild (Handy-Tastatur) - die Seitenleiste bleibt */
:root.geraet-tablet-breit body.todo-tippt nav{transform:none;pointer-events:auto}

/* ============ 2. Ansichten: rechts der Leiste, bis zum unteren Rand ============ */
:root.geraet-tablet-breit .view{inset:0 0 0 var(--lb-rail)}
:root.geraet-tablet-breit body.todo-tippt .view{inset:0 0 0 var(--lb-rail)}
/* v1618 (Harun pc1, "Reiterwechsel To Do <-> Kalender ist unsauber, springt"): die App laesst jede Ansicht beim
   Einblenden 10 px von unten einlaufen (.view.on{animation:viewAuf}, App-<style>) - am Handy ein feiner Uebergang,
   am Desktop mit der feststehenden Seitenleiste/Spalten wirkt der 10-px-Versatz jedes Mal wie ein Ruck. Aus. */
:root.geraet-tablet-breit .view.on{animation:none}
/* Undo-Hinweis und Einfuehrungs-Hinweis: unten links neben der Leiste */
:root.geraet-tablet-breit #undoBar{left:calc(var(--lb-rail) + 16px);right:auto;width:min(480px, calc(100vw - var(--lb-rail) - 32px));bottom:calc(16px + env(safe-area-inset-bottom,0px));border-radius:4px}
:root.geraet-tablet-breit .ob-hinweis{left:var(--lb-rail);bottom:env(safe-area-inset-bottom,0px)}

/* ============ 3. To Do: Blaetter | Aufgaben | Detail ============ */
/* 3a Blaetter-Spalte = der vorhandene Drawer, dauerhaft offen (Inhalt zeichnet layout-tablet-breit.js) */
/* v2150 (Harun): jetzt RECHTS wie die Kalender-Seitenleiste (#kalDrawer). Angeheftet (Standard) = dauerhaft offen neben dem Inhalt;
   geloest (html.lb-lose) = faehrt wie im Kalender (.22s ease, translateX) ueber den Inhalt, Burger #todoMenuBtn oeffnet. */
:root.geraet-tablet-breit #todoDrawer{
  left:auto;right:0;top:0;bottom:0;width:var(--lb-blaetter);z-index:30;box-sizing:border-box;
  transform:none;transition:none;box-shadow:none;border-left:1px solid var(--line);border-right:0;
  background:var(--card);
}
:root.geraet-tablet-breit.lb-lose body:not([data-tab="kalender"]) #todoDrawer{
  z-index:120;transform:translateX(105%);transition:transform .22s ease,visibility 0s .22s;visibility:hidden;
}
:root.geraet-tablet-breit.lb-lose body:not([data-tab="kalender"]) #todoDrawer.auf{transform:none;transition:transform .22s ease;box-shadow:-10px 0 30px rgba(0,0,0,.3);visibility:visible}
:root.geraet-tablet-breit.lb-lose body:not([data-tab="kalender"]) #todoDim:not(.hide){display:block !important;z-index:119;background:rgba(0,0,0,.12)}
@media (prefers-reduced-motion: reduce){ :root.geraet-tablet-breit.lb-lose body:not([data-tab="kalender"]) #todoDrawer,:root.geraet-tablet-breit.lb-pinanim body #view-termine{transition:none !important} }
:root.geraet-tablet-breit #todoDim{display:none !important}            /* App schaltet .hide - der Schleier wird nie gebraucht */
:root.geraet-tablet-breit #todoMenuBtn{display:none}                   /* Burger: angeheftet ist die Spalte ja immer da */
:root.geraet-tablet-breit.lb-lose body:not([data-tab="kalender"]) #todoMenuBtn{display:flex}   /* geloest: Burger oeffnet die Spalte (wie im Kalender) */
:root.geraet-tablet-breit #view-termine{left:var(--lb-rail)}
:root.geraet-tablet-breit body.todo-tippt #view-termine{left:var(--lb-rail)}
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #view-termine{right:var(--lb-pinw)}
:root.geraet-tablet-breit.lb-pinanim body:not([data-tab="kalender"]) #view-termine{transition:right .22s ease}
/* Pin-Zeile am Kopf der Spalte (nur Breitformat, nicht im Kalender-Reiter) */
#todoDrawer .dr-pinzeile{display:none}
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #todoDrawer .dr-pinzeile{display:flex}
#todoDrawer .dr-pin.an{color:var(--accent);background:var(--chip)}
:root.geraet-tablet-breit #view-termine .wrap{max-width:none}
/* Lesebreite: Kopf, Liste und Eingabe bleiben in einer ruhigen Spalte */
:root.geraet-tablet-breit #todoWrap > *{width:100%;max-width:var(--lb-text);margin-left:auto;margin-right:auto;box-sizing:border-box}
/* Eingabezeile + Band unten in der Mitte-Spalte */
:root.geraet-tablet-breit .todo-eingabe,
:root.geraet-tablet-breit body.todo-tippt .todo-eingabe{
  left:calc(var(--lb-rail) + 16px);right:calc(var(--lb-pinw) + 16px);
  bottom:calc(12px + var(--sab,0px));
  max-width:var(--lb-text);
  margin:0 auto;border-radius:4px !important;           /* App: 12px !important */
}
:root.geraet-tablet-breit .todo-band,
:root.geraet-tablet-breit body.todo-tippt .todo-band{left:var(--lb-rail);right:var(--lb-pinw);bottom:0}
:root.geraet-tablet-breit .todo-vorschlaege{left:var(--lb-rail);right:var(--lb-pinw);bottom:calc(12px + var(--sab,0px) + 68px)}

/* 3b Aufgaben-Detail (#aufgSheet).
   v1649 (Harun: "die zusaetzliche rechte Detail-Spalte morpht heraus und wirkt katastrophal - am PC wie am Handy"): im To-Do-Reiter
   KEIN Seitenfeld rechts mehr (die Liste rueckte dafuer zur Seite). Das Blatt oeffnet wie am Handy UEBER der Liste - es deckt die
   mittlere Spalte (rechts der Blaetter-Spalte bis zum Rand), der Morph der App (Zeile -> Karte, aufgOeffnen) laeuft dadurch wie am
   Handy fast an Ort und Stelle. Inhalt in der ruhigen Lesebreite der Liste. Im Kalender-Reiter deckt es weiter genau die
   Begleitspalte (Abschnitt 4) - dort ist das die Liste. */
:root.geraet-tablet-breit #aufgSheet{left:var(--lb-rail);right:var(--lb-pinw);top:0;bottom:0;width:auto}
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #aufgSheet > *{width:100%;max-width:var(--lb-text);margin-left:auto;margin-right:auto;box-sizing:border-box}
:root.geraet-tablet-breit #aufgSheet .ag-startzeile9{display:none}             /* "Zu Start gehen" steht schon links im Listenkopf */
/* v1649 (Harun): Untertitel "Filter" unter Wichtig/Geplant/... entfaellt am PC (markiert layout-tablet-breit.js, filterWortMarkieren) */
:root.geraet-tablet-breit #todoUnter.lb-filterwort{display:none}

/* 3c Start: links der Tag (Heute-Liste), rechts die Kaesten Nachfragen/Anfragen - dieselben Kaesten, nur nebeneinander.
   pl9 (Harun: "Start-Spalte viel zu breit - so breit wie die Aufgaben-Spalte der Tagesplanung"): die rechte Spalte ist
   KEINE eigene 42-%-Breite mehr, sondern genau --lb-begleit (dieselbe Breite wie ueberall rechts); die Gesamtbreite
   ergibt sich daraus (Lesebreite links + Spalt + Begleitspalte), kein eigener 1180-px-Wert mehr. */
/* v1654 (Harun, Thema Desktop: "sieht kacke aus" - bei mittlerer Fensterbreite war die linke Spalte nur ein Streifen): zweispaltige
   Start-Seite erst ab 1400 px Fensterbreite; darunter einspaltig wie am Handy (Eingabefeld wieder normal). */
@media (min-width:1400px){
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #view-termine.ansicht-start #todoWrap:has(#todoAntworten > .ka9:not(.hide), #todoAntworten > :not(.hide):not(:empty):not(.todo-sekt)) > *{max-width:calc(var(--lb-text) + 24px + var(--lb-begleit))}
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #view-termine.ansicht-start #todoInhalt:has(#todoAntworten > .ka9:not(.hide), #todoAntworten > :not(.hide):not(:empty):not(.todo-sekt)){
  display:grid;grid-template-columns:minmax(0,1fr) var(--lb-begleit);grid-template-rows:auto 1fr;column-gap:24px;align-items:start;
}
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #view-termine.ansicht-start #todoInhalt:has(#todoAntworten > .ka9:not(.hide), #todoAntworten > :not(.hide):not(:empty):not(.todo-sekt)) > #todoAntworten{
  grid-column:2;grid-row:1 / span 2;position:sticky;top:0;container-type:inline-size;
}
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #view-termine.ansicht-start #todoInhalt:has(#todoAntworten > .ka9:not(.hide), #todoAntworten > :not(.hide):not(:empty):not(.todo-sekt)) > :not(#todoAntworten){grid-column:1}
/* v1649 (Harun: "Aufgabe hinzufuegen nur in der Breite und unter Faellige Aufgaben, nicht ueber das Zwei-Spalten-Design"): steht die
   Start-Seite zweispaltig (Bedingung wie oben), sitzt das Eingabefeld unten genau unter der linken Spalte. Es ist fixiert (nicht im
   Raster), deshalb dieselbe Rechnung wie das Raster: Inhalt = min(Spaltenbreite - 2x16 px, Lesebreite + 24 px + Begleitspalte), mittig;
   links davon die Liste = Inhalt - 24 px - Begleitspalte. (Eine klassische Bildlaufleiste der Ansicht ist nicht eingerechnet.) */
:root.geraet-tablet-breit body:not([data-tab="kalender"]):has(#view-termine.ansicht-start #todoAntworten > .ka9:not(.hide), #view-termine.ansicht-start #todoAntworten > :not(.hide):not(:empty):not(.todo-sekt)) .todo-eingabe{
  left:calc(var(--lb-rail) + 16px + max(0px, (100vw - var(--lb-rail) - var(--lb-pinw) - 32px - var(--lb-text) - 24px - var(--lb-begleit)) / 2));
  right:auto;max-width:none;margin:0;
  width:calc(min(100vw - var(--lb-rail) - var(--lb-pinw) - 32px, var(--lb-text) + 24px + var(--lb-begleit)) - 24px - var(--lb-begleit));
}
/* v1668 (Harun dk2: "faellige Aufgaben komplett durchgezogen bis nach unten, so wie am Handy"): linke Spalte fuellt die Hoehe - die
   Linien-Flaeche unter der Liste streckt sich bis zum Eingabefeld (linienEnde9 setzt am Handy eine feste Hoehe, hier ueberschrieben). */
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #view-termine.ansicht-start #todoInhalt:has(#todoAntworten > .ka9:not(.hide), #todoAntworten > :not(.hide):not(:empty):not(.todo-sekt)){min-height:calc(100dvh - 150px);align-content:start}
:root.geraet-tablet-breit body:not([data-tab="kalender"]) #view-termine.ansicht-start #todoInhalt:has(#todoAntworten > .ka9:not(.hide), #todoAntworten > :not(.hide):not(:empty):not(.todo-sekt)) > #todoLinien{align-self:stretch;height:auto !important;min-height:calc(100dvh - 150px - var(--mine9h, 180px)) !important}
}   /* Ende v1654-Breitenbedingung */
@container (min-width:560px){
  :root.geraet-tablet-breit #todoAntworten{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-content:start}
  :root.geraet-tablet-breit #todoAntworten > :not(.ka9){grid-column:1 / -1}
}

/* ============ 4. PLANER (Kalender-Reiter): Kalender gross, rechts dauerhaft To Do (Entscheidung dk1 = A) ============ */
/* Die vorhandene To-Do-Ansicht (#view-termine) bleibt im Kalender-Reiter sichtbar und steht als Spalte rechts -
   dieselbe Liste, dieselben Kaesten, dasselbe Eingabefeld (keine zweite To-Do-Darstellung). body[data-tab] setzt zeige(). */
:root.geraet-tablet-breit body[data-tab="kalender"] #view-kalender{right:var(--lb-begleit)}
/* 4a Ansicht im Kopf statt Schieberegler (ia1, Harun: "Desktop hat soviel Platz - ein Schieberegler macht wenig
   Sinn, lieber verteilte Knoepfe wie Agenda/Tag/Woche"): #kalSegDesktop (termin-app.html) zeigen, #sliderZeile aus. */
:root.geraet-tablet-breit #sliderZeile{display:none !important}
:root.geraet-tablet-breit .kal-seg-desktop{display:flex}
/* v1628 (Harun): die Knoepfe sitzen unten auf der Kante der grauen Leiste (wie Reiter - der gewaehlte geht in die Kalenderflaeche
   ueber) und sind groesser: mehr Hoehe, groessere Schrift, gut klickbar */
/* v1631 (Harun pk1: "Die Ansicht-Knoepfe ... sollen unterhalb des Kalenderblatts sein"): die Reihe steht per flex-order UNTER
   #kalFlaeche (Elternteil .kal-voll ist flex column; #sliderZeile ist am PC aus) - die Reiter haengen an der Unterkante des
   Blatts, der gewaehlte geht oben in die Kalenderflaeche ueber. #kalFlaeche (flex:1) wird dadurch um die 46 px kleiner. */
:root.geraet-tablet-breit #kalSegDesktop{order:10;flex:0 0 auto;align-items:flex-start;height:46px;box-sizing:border-box;padding:0 8px !important;gap:2px;
  border-radius:0 !important;border-top:1px solid var(--line)}
:root.geraet-tablet-breit #kalSegDesktop button{height:38px;padding:0 20px;font-size:.92rem;font-weight:500;display:flex;align-items:center;
  border-radius:0 0 4px 4px !important;box-shadow:none !important}
:root.geraet-tablet-breit #kalSegDesktop button.on{margin-top:-1px;height:39px}   /* deckt die Trennlinie: Reiter haengt am Blatt */
:root.geraet-tablet-breit #kalSegDesktop button.on{font-weight:600}
/* v1638 (Harun): D4YS Fokus abgesetzt rechts - eigene Fokus-Ansicht, nicht zwischen Tag und Woche */
:root.geraet-tablet-breit #kalSegDesktop{width:100%}
:root.geraet-tablet-breit #kalSegDesktop button.d4ys-fokus9{margin-left:auto}
:root.geraet-tablet-breit #kalSegDesktop button:not(.on):hover{background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--ink)}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine{
  display:block;left:auto;right:0;width:var(--lb-begleit);animation:none;
  border-left:1px solid var(--line);
  background:var(--bg);                   /* Wunsch imuy3remd (Harun 07.10.): Hintergrund 1:1 wie im To-Do-Reiter (vorher pl5: var(--card)) */
}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .todo-kopf{background:var(--bg);box-shadow:0 -24px 0 0 var(--bg)}
/* pl5: Kopf der Spalte randlos wie der Kalender-Kopf links (die Lesebreiten-Regel 3 setzte ihm Rand auto = 0) */
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .todo-kopf{width:auto;margin-left:-16px;margin-right:-16px}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .wrap,
:root.geraet-tablet-breit body[data-tab="kalender"] #todoWrap > *{max-width:none}
:root.geraet-tablet-breit body[data-tab="kalender"] #todoDrawer{display:none}              /* Blaetter nur im To-Do-Reiter */
/* v1649 (Harun: "rechts neben dem Kalender nicht die ganze HEUTE-Seite, nur die Aufgabenliste des Tages"): die Kaesten Nachfragen/
   Anfragen (#todoAntworten) stehen im Kalender-Reiter nicht in der Spalte - es bleibt dieselbe Liste (faellige Aufgaben) mit dem
   Eingabefeld "Aufgabe hinzufuegen" unten. Im To-Do-Reiter (Start) unveraendert; keine zweite Darstellung. */
:root.geraet-tablet-breit body[data-tab="kalender"] #todoAntworten{display:none}
:root.geraet-tablet-breit body[data-tab="kalender"] #startKaesten9 .sk9:not([data-ziel="todoMine"]){display:none}   /* Kopf-Zaehler: nur "n Aufgaben" */
:root.geraet-tablet-breit body[data-tab="kalender"] #startKaesten9 .sk9[data-ziel="todoMine"]{border-left:0;padding-left:0}
:root.geraet-tablet-breit body[data-tab="kalender"] .todo-eingabe,
:root.geraet-tablet-breit body[data-tab="kalender"].todo-tippt .todo-eingabe{
  left:calc(100vw - var(--lb-begleit) + 12px);right:12px;max-width:none;margin:0;
}
:root.geraet-tablet-breit body[data-tab="kalender"] .todo-band,
:root.geraet-tablet-breit body[data-tab="kalender"].todo-tippt .todo-band,
:root.geraet-tablet-breit body[data-tab="kalender"] .todo-vorschlaege{left:calc(100vw - var(--lb-begleit));right:0}
/* Aufgaben-Detail deckt genau die To-Do-Spalte */
:root.geraet-tablet-breit body[data-tab="kalender"] #aufgSheet{left:auto;width:var(--lb-begleit);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.06)}
/* pl5: Terminkarte, Vorschlaege/Halbmodale und die Listen ("Listen ansehen") liegen 1:1 auf der Begleitspalte - gleiche Breite,
   gleiche Kante, ohne Schleier und ohne grossen Schatten: es wirkt wie ein Wechsel IN der Spalte, nicht wie ein Fenster darueber */
:root.geraet-tablet-breit body[data-tab="kalender"] #pdSheet{width:var(--lb-begleit);box-shadow:none}
:root.geraet-tablet-breit body[data-tab="kalender"] .blatt-panel,
:root.geraet-tablet-breit body[data-tab="kalender"] .blatt-panel.voll,
:root.geraet-tablet-breit body[data-tab="kalender"] .drop-up:not(.kal9),
:root.geraet-tablet-breit body[data-tab="kalender"] .drop-up.voll:not(.kal9){width:var(--lb-begleit) !important;box-shadow:none !important}   /* Abschnitt 5: !important */
/* v1747 (Harun dk10: "Vorschlaege lassen links noch Platz - so breit und dort wie die Heute-Spalte"): Aussenmass deckt sich bereits
   (beide right:0, Breite --lb-begleit = 392 px, Rand links 1 px). Versetzt war der INHALT: Seitenfeld 20 px Innenrand, die Spalte
   16 px (#todoWrap) - der Text sprang beim Oeffnen 4 px nach rechts. Jetzt derselbe Innenrand, Inhalt steht buendig auf der Spalte. */
:root.geraet-tablet-breit body[data-tab="kalender"] .blatt-panel,
:root.geraet-tablet-breit body[data-tab="kalender"] #ghostSheet{padding-left:16px !important;padding-right:16px !important}
:root.geraet-tablet-breit body[data-tab="kalender"] .blatt-dim{background:transparent}
:root.geraet-tablet-breit body[data-tab="kalender"] #todoDrawer.auf{
  display:block;left:auto;right:0;width:var(--lb-begleit);z-index:120;box-sizing:border-box;
  padding:calc(16px + env(safe-area-inset-top,0px)) 20px 24px;border-left:1px solid var(--line);border-right:0;
  animation:lbSeiteRein .2s cubic-bezier(.2,.8,.2,1);
}
:root.geraet-tablet-breit body[data-tab="kalender"] #todoDrawer.auf::before{
  content:'Listen';display:block;font:700 1.05rem Inter,system-ui,sans-serif;color:var(--ink);margin:4px 0 12px;
}
/* Zeilen sind mit der Maus greifbar (in den Kalender ziehen) */
@media (hover:hover) and (pointer:fine){
  :root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .tz .tz-tx{cursor:grab}
}
/* Eingeplante Aufgaben als Zeitbloecke im Raster (zeichnet layout-tablet-breit.js; nur Anzeige, die Daten bleiben die Frist der Aufgabe)
   v1754 (Harun ak1): Grundaussehen ohne Breitformat-Klasse - die Bloecke stehen auch am Handy (nur Anzeige, nicht ziehbar) */
:root .lb-block{
  position:absolute;left:2px;right:3px;z-index:4;box-sizing:border-box;overflow:hidden;cursor:pointer;
  background:var(--aufg-grund, color-mix(in srgb, var(--ink) 8%, var(--card)));color:var(--ink);
  border-left:3px solid var(--aufg-rand, color-mix(in srgb, var(--ink) 58%, transparent));border-radius:2px;
  padding:2px 6px;font:600 .74rem/1.2 Inter,system-ui,sans-serif;white-space:nowrap;text-overflow:ellipsis;
}
:root .lb-block small{display:block;font-weight:500;color:var(--muted);font-size:.68rem}
:root.geraet-tablet-breit .lb-block.zieht{opacity:.35}
:root.geraet-tablet-breit .lb-block.vorschau{background:var(--accent-hauch);outline:2px dashed var(--accent);outline-offset:-2px;border-left-color:var(--accent);pointer-events:none;z-index:6}
:root.geraet-tablet-breit .wp-spalte.lb-ziel{background-color:var(--accent-hauch)}
:root.geraet-tablet-breit .lb-geist{position:fixed;z-index:500;pointer-events:none;background:var(--card);color:var(--ink);border:1px solid var(--accent);border-radius:4px;
  padding:7px 11px;font:600 .82rem Inter,system-ui,sans-serif;box-shadow:0 8px 22px rgba(0,0,0,.2);transform:translate(14px,-50%);white-space:nowrap}
:root.geraet-tablet-breit .lb-geist small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}

/* 4c pl6 (Harun): Start-Kopf auf dem Desktop - Nachfragen, Anfragen und Heute stehen nebeneinander, Springen bringt nichts.
   Die Zaehler bleiben, aber als ruhige Zahlen direkt neben "Start" (nicht mehr als Knoepfe am rechten Rand). Handy unveraendert. */
:root.geraet-tablet-breit #view-termine .todo-kopf .tk-zeile2 > .kal-titel{order:-2;flex:0 1 auto}
:root.geraet-tablet-breit #startKaesten9{display:flex;order:-1;align-self:center;gap:0;margin-left:20px;min-width:0}
:root.geraet-tablet-breit #startKaesten9 .sk9{
  flex-direction:row;align-items:baseline;gap:5px;min-width:0;padding:0 12px;border:0;border-left:1px solid var(--line);
  background:transparent;cursor:default;pointer-events:none;line-height:1.2;
}
:root.geraet-tablet-breit #startKaesten9 .sk9:first-child{border-left:0;padding-left:0}
:root.geraet-tablet-breit #startKaesten9 .sk9 b{font-size:.95rem;font-weight:700;color:var(--ink)}
:root.geraet-tablet-breit #startKaesten9 .sk9 small{font-size:.74rem;font-weight:500;color:var(--muted)}
/* v1624 (Harun: "hier sind Fehler mit der Sonne"): in der schmalen Begleitspalte (Kalender-Reiter, 360 px) passen "Start", Datum und
   die drei Zaehler nicht nebeneinander - der Titel wurde bis auf die Sonne und ein "M..." (Datum) zusammengedrueckt. Dort steht jetzt
   NUR die Sonne (sie sagt "Start"), ohne Wort und Datum (v1626: Wort wieder da, siehe unten), auf einer Hoehe mit den Zaehlern und buendig mit der Kante der Kaesten darunter.
   Nur solange Zaehler da sind - ohne Zaehler bleibt der Titel wie gehabt. Breiter To-Do-Reiter unveraendert. */
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .tk-zeile2:has(#startKaesten9:not(:empty)) .kal-titel{flex:0 0 auto;padding-left:var(--lb-sonne-x, 8px)}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .tk-zeile2:has(#startKaesten9:not(:empty)) #todoUnter{display:none}
/* v1626 (Harun: "da steht aber nicht mehr Heute neben der Sonne"): Sonne UND Wort "HEUTE" stehen wieder da (ohne Datum), voll lesbar.
   Platz schaffen die Zaehler: in der Begleitspalte kompakter (kleinere Schrift, engere Abstaende) statt das Wort zu kuerzen.
   Reicht es trotzdem nicht (sehr lange Zahlen), rutschen die Zaehler in die Zeile darunter - das Wort wird nie abgeschnitten. */
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .tk-zeile2:has(#startKaesten9:not(:empty)){flex-wrap:wrap;row-gap:4px}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .tk-zeile2:has(#startKaesten9:not(:empty)) > span[style*="flex:1"]{display:none}   /* der Fueller (steht hinter den Zaehlern) wuerde sonst allein in eine zweite Zeile umbrechen und die Zeile 5 px anheben */
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .tk-zeile2:has(#startKaesten9:not(:empty)) #todoTitel{max-width:none;overflow:visible;text-overflow:clip}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .tk-zeile2:has(#startKaesten9:not(:empty)) #startKaesten9{margin-left:10px;flex:0 1 auto}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine #startKaesten9 .sk9{padding:0 5px;gap:2px}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine #startKaesten9 .sk9:first-child{padding-left:0}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine #startKaesten9 .sk9 b{font-size:.82rem}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine #startKaesten9 .sk9 small{font-size:.66rem}
/* pl6: Eigene/Team im Dunkelmodus - die Auswahl traegt eine sichtbare Flaeche und eine helle Schrift (vorher dunkles Gruen auf Dunkel) */
:root.geraet-tablet-breit[data-theme="dark"] #segModus button.on{background:color-mix(in srgb, var(--ink) 26%, var(--card)) !important;color:color-mix(in srgb, var(--privatgruen, #0B8043) 45%, #fff)}
:root.geraet-tablet-breit[data-theme="dark"] #segModus button.on:not([data-m="mein"]){color:var(--ink)}
/* pl6: "Ansicht & Anzeige" (#kalDrawer) - fest rechts am Fenster lag es UNTER der To-Do-Spalte, man sah nur den Schleier.
   Jetzt dockt es an der rechten Kante des Kalenders an; der Schleier deckt nur den Kalender. */
:root.geraet-tablet-breit body[data-tab="kalender"] #kalDrawer{right:var(--lb-begleit);border-left:1px solid var(--line);border-right:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.08)}
:root.geraet-tablet-breit body[data-tab="kalender"] #drawerDim{right:var(--lb-begleit);background:rgba(0,0,0,.12)}
:root.geraet-tablet-breit.lb-fokus body[data-tab="kalender"] #kalDrawer,
:root.geraet-tablet-breit.lb-fokus body[data-tab="kalender"] #drawerDim{right:0}

/* 4b Fokus (r70): To-Do-Spalte ausgeblendet, Kalender volle Breite. Umschalten ueber den Griff #lbGriff (JS) oder Alt+O. */
:root.geraet-tablet-breit body[data-tab="kalender"] #view-kalender{transition:right .22s cubic-bezier(.2,.8,.2,1)}
:root.geraet-tablet-breit.lb-fokus body[data-tab="kalender"] #view-kalender{right:0}
/* v1618 (Harun pc1, "beim Ein-/Ausklappen springt es"): kein hartes display:none mehr - die Spalte blendet
   SYNCHRON zur Kalender-Breite aus/ein (opacity, dieselben 220 ms). Vorher verschwand sie SOFORT (display:none im
   selben Frame), waehrend der Kalender erst in 220 ms nachwuchs: kurz eine leere Luecke beim Zuklappen bzw. beim
   Aufklappen stand die Spalte schon voll da, bevor der Kalender wieder schmaler wurde - beides sah wie ein Sprung aus. */
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine{transition:opacity .22s cubic-bezier(.2,.8,.2,1)}
:root.geraet-tablet-breit.lb-fokus body[data-tab="kalender"] #view-termine{opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  :root.geraet-tablet-breit body[data-tab="kalender"] #view-termine{transition:none}
}
/* Griff: schmale Kante an der Spaltengrenze, darin nur eine feine senkrechte Linie (kein Pfeil) */
#lbGriff{display:none}
:root.geraet-tablet-breit body[data-tab="kalender"] #lbGriff{
  display:flex;align-items:center;justify-content:center;position:fixed;z-index:60;top:50%;
  right:calc(var(--lb-begleit) - 7px);width:14px;height:72px;margin-top:-36px;padding:0;
  border:0;border-radius:4px;background:transparent;cursor:pointer;
  transition:right .22s cubic-bezier(.2,.8,.2,1),background .15s;
}
:root.geraet-tablet-breit body[data-tab="kalender"] #lbGriff::before{
  content:'';width:4px;height:40px;border-radius:4px;background:color-mix(in srgb, var(--ink) 22%, transparent);
}
:root.geraet-tablet-breit.lb-fokus body[data-tab="kalender"] #lbGriff{right:0;width:16px;background:var(--card);border:1px solid var(--line);border-right:0;border-radius:4px 0 0 4px}
:root.geraet-tablet-breit body[data-tab="kalender"] #lbGriff:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Aufgaben-Detail und Seitenfelder liegen darueber - der Griff verschwindet dann */
:root.geraet-tablet-breit body[data-tab="kalender"]:has(#aufgSheet:not(.hide), #pdSheet, .blatt-panel, .edit-sheet:not(.hide), #todoDrawer.auf, #ghostSheet) #lbGriff{display:none}   /* v1747 (Harun dk10): auch beim Buchungsmenue */
@media (hover:hover) and (pointer:fine){
  :root.geraet-tablet-breit body[data-tab="kalender"] #lbGriff:hover{background:var(--chip)}
  :root.geraet-tablet-breit body[data-tab="kalender"] #lbGriff:hover::before{background:color-mix(in srgb, var(--ink) 45%, transparent)}
}
@media (prefers-reduced-motion: reduce){
  :root.geraet-tablet-breit body[data-tab="kalender"] #view-kalender,
  :root.geraet-tablet-breit body[data-tab="kalender"] #lbGriff{transition:none}
}

/* ============ 5. Halbmodale werden Seitenfelder rechts ============ */
/* .blatt-panel (Planen, Auf Blatt, Blattmenue, Vorschlaege), Drop-ups (Faellig, Dauer, Erinnerung, Liste),
   Wiederholen-Waehler. Gleiche Huelle, nur rechts statt unten. Ziehen (Touch) bleibt harmlos. */
:root.geraet-tablet-breit .blatt-panel,
:root.geraet-tablet-breit .blatt-panel.voll,
:root.geraet-tablet-breit .drop-up:not(.kal9),
:root.geraet-tablet-breit .drop-up.voll:not(.kal9){
  left:auto !important;right:0 !important;top:0 !important;bottom:0 !important;   /* App: !important */
  width:var(--lb-begleit) !important;max-width:none !important;height:auto !important;max-height:none !important;
  border-radius:0 !important;border-left:1px solid var(--line) !important;
  padding-top:calc(16px + env(safe-area-inset-top,0px)) !important;
  box-shadow:-12px 0 32px rgba(0,0,0,.12) !important;
  animation:lbSeiteRein .24s cubic-bezier(.2,.8,.2,1) !important;
}
:root.geraet-tablet-breit .blatt-panel::before,
:root.geraet-tablet-breit .drop-up:not(.kal9)::before{visibility:hidden;height:4px}                 /* Griff braucht es am Rand nicht */
:root.geraet-tablet-breit .blatt-panel.zu9,
:root.geraet-tablet-breit .drop-up.zu9:not(.kal9){transform:translateX(110%) !important;animation:none !important}
:root.geraet-tablet-breit .overlay[data-ovk="eswdh"]{justify-content:flex-end;align-items:stretch}
:root.geraet-tablet-breit .overlay[data-ovk="eswdh"] .modalbox{width:var(--lb-begleit);max-width:none;max-height:none;height:100%;border-radius:0 !important;animation:lbSeiteRein .24s cubic-bezier(.2,.8,.2,1) !important}
/* Schleier leichter: der Inhalt links bleibt sichtbar; Klick daneben schliesst wie bisher */
:root.geraet-tablet-breit .blatt-dim,
:root.geraet-tablet-breit #dropDim9{background:rgba(0,0,0,.12)}
@keyframes lbSeiteRein{from{transform:translateX(100%)}to{transform:none}}

/* Terminkarte (#pdSheet, Inline-Stil inset:0) als Seitenfeld rechts */
:root.geraet-tablet-breit #pdSheet{left:auto !important;width:var(--lb-begleit);border-left:1px solid var(--line);box-shadow:-12px 0 32px rgba(0,0,0,.12)}   /* pl5: Breite = Begleitspalte */
:root.geraet-tablet-breit #pdSheet .pd-body{display:block}           /* App ab 1000px zweispaltig - im 440-px-Feld zu eng */
/* Geist-Halbmodal (Kalender, Langdruck auf freie Zeit) */
/* pl7 (Harun: "+ ... soll nicht ganz rechts unten erscheinen, sondern mittig"): mittiges Fenster ueber dem Inhalt (rechts der
   Leiste), Hoehe nach Inhalt; statt Hereinfahren von unten ein kurzes Einblenden. Handy unveraendert (Blatt von unten). */
/* v1747 (Harun dk10: "Buchungsmenue am PC wie Vorschlaege von rechts"): hebt pl7 (mittiges Fenster mit Schleier) auf - das Blatt ist
   ein Seitenfeld rechts in derselben Huelle wie .blatt-panel (Abschnitt 5): volle Hoehe, Breite --lb-begleit, faehrt mit lbSeiteRein
   herein und nach rechts hinaus. Kein Schleier: der Geist im Raster bleibt sichtbar und verschiebbar. Handy unveraendert (Drop-up). */
:root.geraet-tablet-breit #ghostSheet{
  top:0;bottom:0;left:auto;right:0;width:var(--lb-begleit);height:auto;max-height:none;
  margin:0;overflow-y:auto;box-sizing:border-box;padding:calc(16px + env(safe-area-inset-top,0px)) 20px 18px;
  border:0;border-left:1px solid var(--line);border-radius:0 !important;
  box-shadow:-12px 0 32px rgba(0,0,0,.12) !important;animation:lbSeiteRein .24s cubic-bezier(.2,.8,.2,1);
}
:root.geraet-tablet-breit body[data-tab="kalender"] #ghostSheet{box-shadow:none !important}   /* v1747 (Harun dk10): liegt 1:1 auf der Begleitspalte wie .blatt-panel */
:root.geraet-tablet-breit #ghostSheet.gs-zu{animation:lbSeiteRaus .2s ease-in forwards}
@keyframes lbSeiteRaus{from{transform:none}to{transform:translateX(100%)}}
:root.geraet-tablet-breit #ghostSheet .grip{display:none}   /* Griff gehoert zum Blatt von unten */
/* v1749 (Harun dk10: "Hier fehlen die Veranstaltungen, die muessen direkt drin sein - Vertriebstermine untereinander, die
   Veranstaltungen auch"): im Seitenfeld ist Platz in der Hoehe - die Veranstaltungen (.gs-mehr, am Handy erst nach dem Hochziehen)
   stehen sofort da, ohne Hinweiszeile; jede Reihe (.zle) wird eine Spalte, jeder Knopf eine eigene Zeile in voller Breite.
   Farben, Beschriftungen und Abschnitts-Ueberschriften (.gs-lab) bleiben die der App. Handy unveraendert. */
:root.geraet-tablet-breit #ghostSheet .gs-mehr{max-height:none;opacity:1;overflow:visible;padding-top:0}
:root.geraet-tablet-breit #ghostSheet .gs-mehr-hin{display:none}
:root.geraet-tablet-breit #ghostSheet .gs-mehr > .gs-lab{margin-top:8px}
:root.geraet-tablet-breit #ghostSheet .zle{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:14px}
:root.geraet-tablet-breit #ghostSheet .zle button{flex:0 0 auto;width:100%;min-height:48px;padding:8px 14px}
/* v1749 (Harun dk10): in voller Breite eine Zeile statt zwei - "Ersttermin Beratung", "TV-Block" (die Silben-Trennung war fuer die
   schmale Viererreihe am Handy) */
:root.geraet-tablet-breit #ghostSheet .zle button[data-k]{display:flex;align-items:center;justify-content:center;gap:5px}
:root.geraet-tablet-breit #ghostSheet .zle button .tk2{display:inline}
/* v1754 (Harun dk10: "Das muss man definitiv huebscher und schoener hinbekommen"): ruhig wie die Einstellungen - grauer Grund,
   je Abschnitt eine helle Karten-Gruppe (6 px, feine Trennlinien), je Buchungsart eine Listenzeile: links kleine Farbkachel mit
   Symbol (Farbe der Terminart, --tf), daneben Name zweizeilig, rechts die Dauer. "Termin anlegen" als Akzent-Knopf, Kopfzeile
   "Neuer Termin" mit Tag und Uhrzeit des Geists und dem X. Inhalte setzt layout-tablet-breit.js (gsPflegen, Klasse .lb-gs9). */
:root.geraet-tablet-breit #ghostSheet.lb-gs9{background:var(--bg)}
:root.geraet-tablet-breit #ghostSheet .lb-gs-kopf{display:flex;flex-direction:column;gap:2px;padding:2px 44px 14px 0;margin-bottom:4px;border-bottom:1px solid var(--line)}
:root.geraet-tablet-breit #ghostSheet .lb-gs-kopf b{font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.3}
:root.geraet-tablet-breit #ghostSheet .lb-gs-wann{font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
:root.geraet-tablet-breit #ghostSheet .lb-gs-wann:empty{display:none}
:root.geraet-tablet-breit #ghostSheet .gs-x{top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:32px;height:32px;border-radius:6px !important;background:transparent;color:var(--muted)}
:root.geraet-tablet-breit #ghostSheet .gs-lab{margin-top:20px;padding-bottom:8px}
:root.geraet-tablet-breit #ghostSheet .gs-mehr > .gs-lab{margin-top:20px}
:root.geraet-tablet-breit #ghostSheet .unten{margin-bottom:0}
/* v1774 (Harun dk11: "Termin anlegen genauso in dem Grau wie im Drop-up, erfinde nicht immer neue Sachen"): KEINE eigene Farbe
   mehr - Grund, Rand und Schrift kommen aus der EINEN Regel .knopf-grau (termin-app.html, Handy-Drop-up). Hier nur Hoehe/Symbol-Abstand. */
:root.geraet-tablet-breit #ghostSheet .unten button.knopf-grau{
  display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;height:44px;padding:0 14px;
  border-radius:6px !important;font-size:.92rem;font-weight:600;transition:filter .15s;
}
/* v1774 (Harun dk11: "mehr Abstaende, die Buttons genauso wie im Buchungsmenue mit Abstand"): keine zusammenklebende Gruppe mehr -
   jede Buchungsart ist eine eigene Kachel, untereinander mit 8 px Luft wie #booking-links (buchen-kern.css, gap 8px). */
:root.geraet-tablet-breit #ghostSheet .zle{flex-direction:column;gap:8px;margin-bottom:0;background:none;border:0;overflow:visible}
:root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile{
  display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px 10px 12px;text-align:left;flex:0 0 auto;
  background:var(--card) !important;color:var(--ink) !important;border:1px solid var(--line) !important;
  border-radius:6px !important;font-weight:400;transition:background .12s;
}
:root.geraet-tablet-breit #ghostSheet .lb-gs-ico{flex:0 0 32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:6px !important;background:var(--tf,#888);color:var(--tfink,#fff)}
/* v1758 (Harun dk10): Bild der Buchen-Kachel statt Farbkachel - freigestellt, ohne Grund, 40 px (Platz wie die Kachel + Luft) */
:root.geraet-tablet-breit #ghostSheet .lb-gs-bild{flex:0 0 40px;height:40px;display:flex;align-items:center;justify-content:center}
:root.geraet-tablet-breit #ghostSheet .lb-gs-bild img{width:40px;height:40px;object-fit:contain;display:block}
:root.geraet-tablet-breit #ghostSheet .lb-gs-ico{margin:0 4px}   /* v1758 (Harun dk10): Farbkachel 32 px mittig im 40-px-Platz - Namen aller Zeilen buendig */
:root.geraet-tablet-breit #ghostSheet .lb-gs-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
:root.geraet-tablet-breit #ghostSheet .lb-gs-o{font-size:.76rem;font-weight:500;color:var(--muted);line-height:1.25}
:root.geraet-tablet-breit #ghostSheet .lb-gs-u{font-size:.94rem;font-weight:650;color:var(--ink);line-height:1.25}
:root.geraet-tablet-breit #ghostSheet .lb-gs-dauer{flex:0 0 auto;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
:root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile:focus-visible,
:root.geraet-tablet-breit #ghostSheet .unten button.knopf-grau:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){
  :root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile:hover{background:color-mix(in srgb, var(--ink) 4%, var(--card)) !important}
  :root.geraet-tablet-breit #ghostSheet .unten button.knopf-grau:hover{filter:brightness(.94)}
  :root.geraet-tablet-breit #ghostSheet .gs-x:hover{background:var(--chip);color:var(--ink)}
}
/* v1759 (Harun bm1: "die Hintergrundfarben der Buchen-Kacheln"): Zeilen-Grund in den Farben der Buchen-Kacheln - Werte aus
   buchen-kern.css (.bg-beratung, .ft-card, .bg-teamaufbau, .bs-card, .infoabend-card; dunkel = deren Verlauf, hell = deren
   html[data-theme="light"]-Verlauf). Dezent: der Verlauf laeuft nach rechts aus statt nach unten. Der Kartentyp kommt aus
   BuchenKern.karte (data-karte, layout-tablet-breit.js). buchen-kern.css selbst wirkt nur im Schattenbaum der Buchen-Seite,
   deshalb stehen die Werte hier - bei Farbaenderung dort bitte mitziehen. */
:root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile[data-karte="beratung"]{background:linear-gradient(90deg, rgba(71,108,255,.35), rgba(71,108,255,0) 85%), var(--card) !important}
:root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile[data-karte="folge"]{background:linear-gradient(90deg, rgba(46,120,211,.4), rgba(21,132,168,0) 85%), var(--card) !important}
:root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile[data-karte="rekrutierung"]{background:linear-gradient(90deg, rgba(232,37,70,.35), rgba(232,37,70,0) 85%), var(--card) !important}
:root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile[data-karte="basis"]{background:linear-gradient(90deg, rgba(224,72,73,.4), rgba(217,106,75,0) 85%), var(--card) !important}
:root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile[data-karte="infoabend"]{background:linear-gradient(90deg, rgba(212,175,55,.35), rgba(212,175,55,0) 85%), var(--card) !important}
:root.geraet-tablet-breit[data-theme="light"] #ghostSheet .zle button.lb-gs-zeile[data-karte="beratung"]{background:linear-gradient(90deg, #b5c6ef, #e9eefb 70%, var(--card)) !important}
:root.geraet-tablet-breit[data-theme="light"] #ghostSheet .zle button.lb-gs-zeile[data-karte="folge"]{background:linear-gradient(90deg, #adcaea, #e7effa 70%, var(--card)) !important}
:root.geraet-tablet-breit[data-theme="light"] #ghostSheet .zle button.lb-gs-zeile[data-karte="rekrutierung"]{background:linear-gradient(90deg, #edb6c5, #fae9ee 70%, var(--card)) !important}
:root.geraet-tablet-breit[data-theme="light"] #ghostSheet .zle button.lb-gs-zeile[data-karte="basis"]{background:linear-gradient(90deg, #eeb8b6, #fae9e8 70%, var(--card)) !important}
:root.geraet-tablet-breit[data-theme="light"] #ghostSheet .zle button.lb-gs-zeile[data-karte="infoabend"]{background:linear-gradient(90deg, #ecd28e, color-mix(in srgb, #ecd28e 25%, var(--card)) 70%, var(--card)) !important}
@media (hover:hover) and (pointer:fine){   /* Hover auf farbigen Zeilen: nur leicht abdunkeln, der Verlauf bleibt */
  :root.geraet-tablet-breit #ghostSheet .zle button.lb-gs-zeile[data-karte]:not([data-karte=""]):hover{filter:brightness(.96)}
}@keyframes lbMitteRein{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes lbMitteRaus{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97)}}

/* Vollbild-Editoren (Termin, Veranstaltung, Kalender-Sichtbarkeit): mittiges Fenster 640 px */
:root.geraet-tablet-breit #editSheet,
:root.geraet-tablet-breit #evSheet,
:root.geraet-tablet-breit #kalSichtSheet{
  top:4vh;bottom:4vh;left:calc(var(--lb-rail) + (100vw - var(--lb-rail) - 640px) / 2);right:auto;width:640px;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.25);
}

/* Mittige Modale bleiben mittig; nur die Ecken nach Hausstil. --mb-mw (statt .modalbox direkt): die Blaetter-Pfeile
   (.m-nav in termin-app.html) rechnen ihre Position aus DERSELBEN Variable - vorher ragten sie bei 560 px breiten
   Kaesten ins Kaestchen hinein, weil ihre Formel noch von 430 px ausging (v1618 ia1, Beleg ia1_pfeile.png). */
:root.geraet-tablet-breit{--mb-mw:560px}

/* ============ 6. Buchen / Analyse / Einstellungen ============ */
/* Buchen (r71): das iframe nutzt die volle Breite. termine.html (Datum & Uhrzeit) bringt ab 1030 px schon ein eigenes
   Desktop-Raster mit (Info links, Kalender + Zeiten rechts) - die alte 720-px-Grenze zwang es in die Handy-Fassung. */
:root.geraet-tablet-breit #buchenFrame{display:block;width:100%;max-width:none;margin:0}
:root.geraet-tablet-breit body.tb-ebene9 #buBurger9{visibility:hidden}   /* pl6: offenes Seitenfeld im Rahmen (z. B. TV-Block starten) - der Menue-Knopf lag darueber */
/* ia1 (Harun: "Burger-Menue fehlt am Desktop - koennte z. B. unten rechts stehen, neue Eintraege muessen automatisch
   mitkommen"): der Menue-Knopf weicht einer kleinen, ruhigen Leiste unten rechts (#buchenTray9, Inhalt aus
   seitInhaltBuchen9 - dieselbe Quelle wie der Burger am Handy, siehe termin-app.html). */
:root.geraet-tablet-breit #buBurger9{display:none}
:root.geraet-tablet-breit #buchenTray9{
  display:block;position:fixed;right:20px;bottom:20px;z-index:20;min-width:200px;max-width:260px;
  background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.14);
  padding:8px;box-sizing:border-box;
}
:root.geraet-tablet-breit #buchenTray9:empty{display:none}
/* bu1 (Harun 17.10.: "das Burger-Menue darf auf der Buchungsseite nicht offen stehen"): auf einer Folgeseite (Datum & Uhrzeit eines
   Termintyps, Formular - #view-buchen.bk-folge9, buchenFolgeMerken9 in basis.js) keine Dauer-Leiste unten rechts; dort erscheint das
   Menue nur ueber den Burger-Knopf (Sichtbarkeit sonst wie ueberall: body.seit-voll9, termin-01.css). */
:root.geraet-tablet-breit #view-buchen.bk-folge9 #buchenTray9{display:none}
:root.geraet-tablet-breit #view-buchen.bk-folge9 #buBurger9{display:flex}
/* .dr-punkt/h5-Feinschliff fuer #buchenTray9 steht bewusst BEIM Original (#seitDrawer9 .dr-punkt, termin-app.html
   Haupt-<style>) - dieselbe Regel um den Selektor erweitert statt hier ein zweites Mal kopiert (PFLICHT 6). */
/* Innenleben der Buchungsseiten im iframe: nur html.breit9 - die Klasse und diese Datei haengt layout-tablet-breit.js
   beim Laden an das iframe-Dokument (gleiche Herkunft). Oeffentliche Buchungsseite und Handy bekommen sie nie. */
:root.breit9 #booking-links{max-width:940px;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:10px 12px}   /* terminbuchung.html: Karten zweispaltig statt 520-px-Saeule */
:root.breit9 #booking-links > :not(.card){grid-column:1 / -1}
/* ia1 (Harun: "Buchen-Knoepfe im selben Stil viel groesser, Bilder auch viel groesser"): dieselbe Karte
   (.card-horizontal), nur alle Masse spuerbar groesser - mehr Polster, groesseres Bild, groessere Schrift. */
:root.breit9 #booking-links .card-horizontal{padding:18px 36px 18px 18px;gap:16px}   /* v1757 (Harun): rechts nur noch Platz fuer das i - die Dauer steht im Fluss (buchen-kern.css) */
:root.breit9 #booking-links .card-horizontal .card-icon{width:78px;height:78px;margin:-14px 0}
:root.breit9 #booking-links .card-title{font-size:1.08rem !important}
:root.breit9 #booking-links .card-duration{font-size:.88rem;right:36px}
:root.breit9 #booking-links .card-horizontal .info-icon{width:20px !important;height:20px !important;font-size:.66rem !important}
:root.breit9 #tvZone{max-width:940px;margin-left:auto;margin-right:auto}
/* pl5 (Harun): zwei Spalten nach Familie - links Beratung (Ersttermin + Folgetermin untereinander), rechts Rekrutierung
   (Rekrutierung bzw. Warm-Up + Folgetermin Rekrutierung = basis). Ueberschriften als leise Abschnittstitel (wie MS To Do).
   Nur wenn BEIDE Familien Karten haben; sonst bleibt das Raster von oben. Alles andere (Strategie, Veranstaltungen) darunter. */
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"]){
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;
}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"])::before,
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"])::after{
  grid-row:1;align-self:end;padding:0 2px 2px;font:700 .7rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.55;
}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"])::before{content:'Beratung';grid-column:1}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"])::after{content:'Rekrutierung';grid-column:2}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"]) > *{grid-column:1 / -1}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"]) > [data-typ-key="erstberatung"]{grid-column:1;grid-row:2}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"]) > [data-typ-key="folgetermin"]{grid-column:1;grid-row:3}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"]) > :is([data-typ-key="rekrutierung"], [data-typ-key="vorabgespraech"]){grid-column:2;grid-row:2}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"]) > [data-typ-key="basis"]{grid-column:2;grid-row:3}
/* v1778 (Harun bk3, "Rekrutieru" abgeschnitten + "Ich finde dieses Doppelspaltsystem nicht gut. Wenn wir genug Platz fuer eine
   Doppelspalte haben, dann soll es wie beim Desktop sein: man sieht die rechte Spalte"): die pl5-Familienspalten (Beratung | Rekrutierung)
   sind abgeschaltet - die Kachelliste ist IMMER einspaltig (Grundreihenfolge, ohne Abschnittstitel). Breiter Platz geht an die
   Seitenspalte #tvHeute9 (rechts, ab 900 px), sonst steht deren Inhalt wie am Handy im Menue. Die pl5-Regeln darueber bleiben
   wirkungslos stehen (Rueckweg). */
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"]){grid-template-columns:minmax(0,1fr) !important}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"])::before,:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"])::after{display:none !important}
:root.breit9 #booking-links:has(> [data-typ-key="erstberatung"], > [data-typ-key="folgetermin"]):has(> [data-typ-key="rekrutierung"], > [data-typ-key="vorabgespraech"], > [data-typ-key="basis"]) > *{grid-column:1 / -1 !important;grid-row:auto !important}

/* pl5: Desktop (ab 1200 px Rahmenbreite) - links die Termin-Spalten, rechts eine ruhige Seitenspalte mit dem TV-Block
   (dieselbe #tvZone wie bisher, nur dauerhaft rechts statt darunter bzw. schwebend). Ohne TV-Inhalt bleibt es einspaltig. */
/* v1755 (Harun hs1, "Heute sperren muss an der Seitenleiste sein, nicht unten"): Schwelle 1200 -> 900 px. Die 1200 galten fuer
   die RAHMEN-Breite des iframes; im direkten Modus (Schattenbaum) misst die Abfrage das ganze Fenster in CSS-Pixeln - bei
   Windows-Skalierung (125/150 %) liegt ein 1441-px-Bildschirm darunter, die Spalte fiel unter die Kacheln. Jetzt ab 900 px
   (wie das TV-Seitenfeld) immer rechts; Spalten schmiegen sich an (Karten flexibel, Seitenspalte 240-300 px). */
@media (min-width:900px){
  /* v1759 (Harun bn1, "TV-Block starten mittig unten unter die Kacheln, nicht rechts"): die rechte Spalte traegt nur noch das
     Buchungsseite-Menue (#tvHeute9, Geschwister der Kacheln in #kartenBereich, siehe buchen-kern.js breit()). Die TV-Zone
     bleibt in der Kachel-Spalte und steht mittig darunter (Grundregel #tvZone max-width 940 / margin auto). Ohne #tvHeute9
     (iframe-Rueckfall) bleibt es einspaltig - TV ebenfalls unten mittig. Laufender Block: Steuerung wie bisher in der Kopfkarte. */
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)){
    display:grid;grid-template-columns:minmax(0,var(--bk-breite)) minmax(240px,var(--bk-seite));column-gap:var(--bk-luecke);justify-content:center;align-items:start;   /* v1776 (Harun bk2): Masse aus den gemeinsamen Variablen */
  }
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) > :not(#tvHeute9){grid-column:1;min-width:0}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)){--bk-inhalt-w:100%}   /* v1778 (Harun bk3): gemeinsame Inhaltsbreite (buchen-kern.css) = ganze Kachel-Spalte */
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links{max-width:none}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #tvZone{max-width:none;width:100%;box-sizing:border-box}
  /* bu1 (Harun 17.10.): ohne Rechte (keine AUSNAHMEN, kein TV-Block) ist die Spalte leer - dann gar keine rechte Spalte */
  :root.breit9 #kartenBereich > #tvHeute9:empty{display:none}
  :root.breit9 #kartenBereich > #tvHeute9{
    grid-column:2;grid-row:1 / span 9;align-self:start;position:sticky;top:24px;margin:40px 0 0;
    padding:14px 16px 16px;border-left:1px solid var(--line, rgba(127,127,127,.25));
  }
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #tvZone.seitlich{position:static !important;width:100% !important;max-width:none !important}
  /* v1776 (Harun bk2, "drei verschiedene Breiten von den Rechtecken"): EINE Inhaltsbreite fuer Banner, Auswahlfelder, Kacheln
     und TV-Steuerung - gleiche linke und rechte Kante (= Aussenkante der Kacheln, --bk-rand innerhalb der Kachel-Spalte).
     Der Banner steht im festen Kopf ausserhalb des Rasters; er bekommt rechnerisch dieselbe Spalte wie #kartenBereich
     (Spalte 1 = min(--bk-breite, Rest), Gruppe aus Spalte + Luecke + Seitenspalte mittig). Handy/Tablet unveraendert. */
  :root.breit9 #main-form:has(#kartenBereich > #tvHeute9:not(:empty)) .sticky > div > #statusZeile{
    box-sizing:border-box;align-self:flex-start;max-width:none !important;
    width:min(var(--bk-breite), calc(100% - var(--bk-seite) - var(--bk-luecke))) !important;
    margin-left:max(0px, calc((100% - var(--bk-breite) - var(--bk-seite) - var(--bk-luecke)) / 2)) !important;margin-right:0 !important;
    padding-left:0 !important;padding-right:0 !important}   /* v1778 (Harun bk3): Kante = Kachel-Spalte, kein Innenrand mehr */
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) .filters-and-tabs-wrapper{max-width:none}   /* v1778 (Harun bk3): Polster 0 aus buchen-kern.css (2-px-Rahmen entfallen) */
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) .filters-and-tabs-wrapper > div{max-width:none}   /* zusammen so breit wie die Kacheln, Luecke 16 px wie dort */
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #tvZone .tv-glas{max-width:none;margin-left:0;margin-right:0}   /* v1778 (Harun bk3) */
}
/* v1753 (Harun bn1): #tvHeute9 sieht aus wie die Desktop-Leiste #buchenTray9 (h5 + .dr-punkt); im Schattenbaum gelten die
   App-Regeln nicht, daher hier fuer diesen Platz */
:root.breit9 #tvHeute9 h5{margin:0 0 6px;font:700 .7rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
:root.breit9 #tvHeute9 .dr-punkt{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:12px 8px;border:1px solid var(--line, rgba(127,127,127,.25));
  background:transparent;color:inherit;font:600 .95rem Inter,system-ui,sans-serif;text-align:left;cursor:pointer;border-radius:4px !important}
:root.breit9 #tvHeute9 .dr-punkt svg{flex:0 0 auto;width:20px;height:20px}
:root.breit9 #tvHeute9 .dr-punkt small{display:block;font-size:.74rem;font-weight:500;opacity:.6}
:root.breit9 #tvHeute9 .dr-punkt[disabled]{opacity:.6;cursor:default}
/* v1753 (Harun bn1, "Buchen ist am PC nicht animiert"): die Ansichten selbst laufen am PC ohne viewAuf (pc1, Ruck) - die
   anderen Reiter blenden ihren INHALT ein (Kalender ansichtRein, Einstellungen zeileRein). Buchen (direkt) genauso. */
:root.geraet-tablet-breit #view-buchen.on.bk-nativ9 #buchenKern9{animation:ansichtRein .2s cubic-bezier(.2,.7,.3,1)}
/* v1763 (Harun tvb1): die pl7-Kopfkarte (Steuerung IN der Karte, nur Desktop) ist abgeloest - EINE Banner-Optik fuer Handy
   und PC steht jetzt in buchen-kern.css (#tvBanner.tvb10), die Steuerung liegt immer unten in #tvZone (nur Veranstalter).
   Geblieben ist nur das gemeinsame 940-px-Raster der Statuszeile. */
/* v1776 (Harun bk2): gemeinsame Inhaltsbreite der Buchen-Seite - Kachel-Spalte, Seitenspalte, Luecke, Kachel-Aussenkante */
:root.breit9{--bk-breite:860px;--bk-seite:300px;--bk-luecke:clamp(20px,3vw,40px);--bk-rand:12px}
:root.breit9 #main-form .sticky > div > #statusZeile{max-width:940px !important;padding-left:8px !important;padding-right:8px !important}   /* App: 760px !important, Polster per Inline-Stil; 8 px = Kante der Karten (#booking-links hat 0 8px) */
/* Auswahl "Gespraech von? / Wer macht es?" auf dem Raster der zwei Kartenspalten (links ueber Beratung, rechts ueber
   Rekrutierung) statt mittig; die Zeile "X - eigenstaendig" darunter ebenfalls linksbuendig. */
:root.breit9 #kartenBereich .filters-and-tabs-wrapper{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;max-width:940px;margin-left:auto;margin-right:auto;padding-left:8px !important;padding-right:8px !important}
:root.breit9 #kartenBereich .filters-and-tabs-wrapper > div{max-width:300px;width:100%}
:root.breit9 #kartenBereich .filters-and-tabs-wrapper label{text-align:left !important;padding-left:2px}
:root.breit9 #mitWemZeile{max-width:940px;justify-content:flex-start !important;text-align:left !important;padding:0 10px;box-sizing:border-box;font-weight:700 !important}
:root.breit9 #tvZone .tv-glas,:root.breit9 #tvZone .tv-strg,:root.breit9 #tvZone #tvStart{border-radius:4px}
@media (min-width:900px){
  :root.breit9 #tvSheet .tv-sheetcard{
    /* v1771 (Harun ss23, "Doppelmenue"): Breite = --lb-begleit (vorher fest 400 px). StructureSelect kommt als Seitenfeld
       mit genau dieser Variablen (structure-select.js .strsel-seite) und deckt das TV-Blatt jetzt vollstaendig ab -
       vorher schaute links ein 40-px-Streifen (TV/Ter/DA/WE) heraus. */
    left:auto;right:0;top:0;bottom:0;width:var(--lb-begleit,360px);max-height:none;box-sizing:border-box;border-radius:0;
    padding:calc(20px + env(safe-area-inset-top,0px)) 20px 24px;border-left:1px solid var(--tvline);box-shadow:-12px 0 32px rgba(0,0,0,.12);
    transform:none;animation:lbSeiteRein .24s cubic-bezier(.2,.8,.2,1);                 /* App: translateY per Inline-Stil */
    /* v1753 (Harun bn1, "TV-Block starten erscheint am PC einfach, kommt nicht von rechts"): transform:none stand mit
       !important - das schlaegt JEDE CSS-Animation, lbSeiteRein lief unsichtbar. Ohne !important gleitet es herein; das
       Hinausgleiten setzt zu() (buchen-kern.js) bei breit9 als translateX(100%). */
    border-radius:0 !important;
  }
  :root.breit9 #tvSheet .tv-griff9{display:none}
  :root.breit9 #tvSheet #tvGrab{cursor:default}
  :root.breit9 #tvSheet #tvGrab > div:first-child{display:none}                                     /* Griff braucht es am Rand nicht */
  :root.breit9 #tvSheet #tvGrab > div{text-align:left !important}
  :root.breit9 #tvSheet #tvDim{background:rgba(0,0,0,.12) !important}
  :root.breit9 #tvSheet .tv-chip,:root.breit9 #tvSheet #tvStart{border-radius:4px !important}
}
:root.breit9 .wrap{max-width:940px}                                                                          /* buchung.html */
:root.breit9 #liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px}
:root.breit9 #liste a.karte{margin-bottom:0}
:root.breit9 #brandZeile{right:64px !important}                                                            /* buchung.html: Marke nicht unter dem Menue-Knopf der App (Inline-Stil) */
/* Analyse (r71): Kopf (Titel + Filter-Pillen) und Inhalt auf DIESELBE Breite; ab 1700 px etwas breiter; Verlauf-Grafik
   auf hohen Bildschirmen hoeher. Die App-Regeln 700/820/1100 px (Raster der Kacheln) bleiben. */
:root.geraet-tablet-breit{--lb-ana:1180px}
@media (min-width:1700px){ :root.geraet-tablet-breit{--lb-ana:1320px} }
:root.geraet-tablet-breit #view-analyse .wrap{max-width:var(--lb-ana)}
:root.geraet-tablet-breit #view-analyse .ana-bar{
  padding-left:max(0px, calc((100% - var(--lb-ana)) / 2 + 6px));padding-right:max(0px, calc((100% - var(--lb-ana)) / 2 + 6px));
}
:root.geraet-tablet-breit #view-analyse .ana-bar > *{background:transparent}   /* eine Flaeche ueber die ganze Breite (die Zeilen trugen eigenen Grund) */
@media (min-height:900px){
  :root.geraet-tablet-breit #view-analyse .chartbox canvas{height:440px !important}   /* App: 380px !important ab 1100 px */
}
/* ia1 (Harun: "kein Seitenmenue noetig bei der Breite - alle Knoepfe wie frueher nebeneinander"): am Desktop ist
   genug Platz fuer ALLE Terminarten-Knoepfe gleichzeitig - die App-Regel, die bei "alle an" auf eine Sammel-Pille
   zusammenklappt (und ausgeschaltete Arten nur im Burger zeigt), gilt hier nicht; der Burger-Knopf entfaellt. */
:root.geraet-tablet-breit #anaBurger9{display:none}
:root.geraet-tablet-breit #anaAlle9{display:none !important}
:root.geraet-tablet-breit .ana-bar .ana-filter.alle9{display:flex !important}
:root.geraet-tablet-breit .ana-bar .ana-filter button:not(.on){display:inline-flex !important}
/* v1649 (Harun, Thema Ich: "Knoepfe viel zu breit und zu flach, zu weit auseinander; Texte auch inaktiv mittig"): am PC
   Terminart-Knoepfe in natuerlicher Breite, hoeher, enger zusammen, Text immer mittig */
:root.geraet-tablet-breit #view-analyse .ana-bar .ana-filter{gap:8px;justify-content:flex-start}
:root.geraet-tablet-breit #view-analyse .ana-bar .ana-filter button{flex:0 0 auto !important;width:auto;min-width:64px;height:auto;padding:0 14px !important;
  justify-content:center;align-items:center;text-align:center;font-size:.76rem}   /* rw1: zweizeilig wie am Handy (analyse-01.css), Hoehe aus der Zeile */
/* ia1: Verlauf (Graph) auf dem Laptop ueber die volle Breite der Analyse-Spalte */
:root.geraet-tablet-breit #view-analyse .chartbox{width:100%}
/* dk2 (Harun: "Aktuelle Kennzahlen direkt unter die Termin-Zahlen-Kacheln, 'Meine Woche' rutscht dafuer etwas nach
   links, rechts davon bleibt vorerst frei"): ersetzt NUR auf diesem Geraet die allgemeine Drei-Spalten-Reihe
   (App-<style>, #anaKopf ab 820px: drei .ana-block nebeneinander, je flex:1 1 0). Jetzt zwei Spalten: links
   Terminvereinbarungen + Kennzahlen UNTEREINANDER (eine Spalte), rechts daneben Meine Woche - die dritte,
   urspruenglich von "Meine Woche" belegte Spalte bleibt als Platzhalter leer (spaeter zu befuellen). */
:root.geraet-tablet-breit #view-analyse #anaKopf{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;row-gap:0;align-items:start;
}
:root.geraet-tablet-breit #view-analyse #anaVereinbart9{grid-column:1;grid-row:1}
/* Kennzahlen stehen jetzt UNTER den Terminvereinbarungen (Trennlinie oben statt links - die allgemeine
   ".ana-block + .ana-block"-Regel ab 820px setzt sonst border-left/padding-left, das passt hier nicht mehr) */
:root.geraet-tablet-breit #view-analyse #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;
}
/* v1910 (Harun 15.10.: freie Flaeche rechts nutzen): Kennzahlen rechts NEBEN den Terminvereinbarungen ueber die beiden
   freien Spalten, Trennlinie links wie die allgemeine ".ana-block + .ana-block"-Regel ab 820px. Kachel-Inhalt ausgeschrieben
   (analyse-01.css, .ind-pc9). "Meine Woche" (#anaZeit9) ist seit v1633 in der Team-Sicht ausgeblendet. */
:root.geraet-tablet-breit #view-analyse #anaKennzahlen9{
  grid-column:2 / -1;grid-row:1;border-top:none;padding-top:0;margin-top:0;border-left:1px solid var(--line);padding-left:18px;
}
:root.geraet-tablet-breit #view-analyse #anaZeit9{grid-column:2;grid-row:1 / span 2;border-left:1px solid var(--line);padding-left:18px}
/* Verlauf (Graph) ist auf dem Desktop immer ausgeklappt - die Zuklapp-Regel der App (#view-analyse.ana-verlauf-zu
   blendet chartbox/anaBereich/tfBtn2 mit !important aus) gilt hier nicht; der Pfeil bleibt klickbar (Merker fuer
   spaeter), zeigt auf diesem Geraet aber keine Wirkung mehr. */
/* ein26 (Harun 18.10.): aufgehoben - auch am Desktop klappt der Verlauf zu (Standard zu, ein25); vorher stand er immer offen,
   der Pfeil zeigte "zu" und der Zeitraum erschien doppelt neben der Ueberschrift. */

/* Einstellungen (r71): immer zweispaltig - links die Liste als ruhige Seitenleiste (dichter, ohne Pfeile, gewaehlte Zeile
   hinterlegt), rechts die Unterseite in Lesebreite. Ohne geoeffnete Unterseite steht rechts ein leiser Hinweis.
   es3 (Harun: "Firmenname immer noch abgeschnitten - linke Spalte breiter, auch nach links, da ist viel Platz"):
   340 -> 420 px; die Gesamtbreite waechst exakt um denselben Betrag (1180 -> 1260), die rechte Spalte bleibt gleich breit. */
/* es1 (Harun 16.10.: "Zweispaltenansicht erst, wenn ein Untermenue offen ist, nicht schon auf der obersten Ebene"): ohne offene Unterseite
   steht die Liste einspaltig wie am Handy (Breite des Grundgeruests, mittig, mit Pfeilen); erst mit offener Unterseite
   (:has(#setSub:not(.hide))) kommt die Zweispaltigkeit, und "< Einstellungen" fuehrt wieder auf die oberste Ebene. */
/* dk1 (Harun 17.10.: "Einstellungen am Desktop mittig zentriert - soll linksbuendig als Liste, beim Antippen rechts daneben die
   naechste Spalte, das war doch auch mal richtig"): Ursache war es1 (v1952, Commit 504ceb034) - das Raster galt nur noch mit
   offener Unterseite (:has(#setSub:not(.hide))), ohne Unterseite fiel .wrap auf das Handy-Grundgeruest zurueck
   (core-02.css: max-width 560px, margin 0 auto = mittig). Jetzt wieder IMMER Master-Detail wie bis v1951 (r71/es3), aber
   linksbuendig (v1956): links die Liste (420 px), rechts die Unterseite - ohne offene Unterseite bleibt rechts einfach leer.
   "< Einstellungen" (es1) bleibt und fuehrt auf die oberste Ebene. */
:root.geraet-tablet-breit #view-set .wrap{
  max-width:1260px;display:grid;grid-template-columns:420px minmax(0,1fr);column-gap:32px;align-items:start;
  margin-left:0;margin-right:auto;
}
:root.geraet-tablet-breit #view-set .wrap > :first-child{grid-column:1 / -1;box-sizing:border-box;width:100%}
:root.geraet-tablet-breit #view-set .wrap #setHome{
  display:block !important;grid-column:1;grid-row:2;position:sticky;top:0;max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:none;   /* App: .hide ist !important */
  padding-bottom:24px;
}
:root.geraet-tablet-breit #view-set .wrap #setSub{grid-column:2;grid-row:2;max-width:760px;min-width:0}
/* es3: der Hinweis "Waehlen Sie links einen Bereich" ist raus (Harun-Wunsch) - rechts bleibt ohne offene
   Unterseite einfach leer, wie links neben den Listen in To Do/Planer auch kein Hinweistext steht. */
:root.geraet-tablet-breit #view-set .wrap #setHome .srow{padding:10px 6px;min-height:40px}
:root.geraet-tablet-breit #view-set .wrap #setHome .srow .chev{display:none}
:root.geraet-tablet-breit #setHome .srow.lb-gewaehlt{background:var(--accent-hauch, var(--chip))}   /* geoeffnete Unterseite (JS) */

/* ============ 7. Maus: leichter Hintergrund beim Zeigen, sonst nichts ============ */
@media (hover:hover) and (pointer:fine){
  :root.geraet-tablet-breit nav button:hover{background:var(--chip)}
  :root.geraet-tablet-breit nav button:hover svg{transform:none}
  :root.geraet-tablet-breit #todoDrawer .dr-punkt:hover,
  :root.geraet-tablet-breit #todoDrawer .dr-gruppe:hover,
  :root.geraet-tablet-breit .lb-block:hover,
  :root.geraet-tablet-breit #view-termine .tz:hover .tz-inner,
  :root.geraet-tablet-breit #view-set .srow:hover,
  :root.geraet-tablet-breit #kalDrawer .dr-punkt:hover{background:var(--chip)}
}

/* v1682 (Harun so4: "Start rechts vom Kalender soll die gleiche Ansicht sein wie auf dem Handy - dann brauchen wir nicht zwei Versionen"):
   die Begleitspalte im Kalender-Reiter zeigt die Handy-Startseite 1:1 - Gelegenheiten, Nachfragen, Anfragen, faellige Aufgaben
   untereinander, die drei Zaehl-Kaesten wie am Handy, Filter + Suche oben im Kopf. Hebt v1649 (nur Aufgabenliste) auf. */
:root.geraet-tablet-breit body[data-tab="kalender"] #todoAntworten:not(.hide){display:block !important}   /* v1688: nur auf HEUTE (vorher ueberstimmte es .hide in Blatt-Ansichten) */
/* v1687 (Harun so6: "orientiere dich an der Breite von To Do"): Zaehler wieder als Textzeile wie im To-Do-Reiter (die Handy-Kaesten v1682
   sind zurueckgenommen); die Spalte ist im Kalender so breit, dass die Karten genau so breit sind wie rechts im To-Do-Reiter (360 + 2 x 16 Rand).
   EINE Variable: Spalte, Terminkarte, Aufgaben-Detail, Listen und Eingabe ziehen mit. */
:root.geraet-tablet-breit body[data-tab="kalender"]{--lb-begleit:392px}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine #todoSortBtn{display:inline-flex !important}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine .sort-mini9{display:none !important}
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine #startKaesten9 .sk9:not([data-ziel="todoMine"]){display:flex}   /* v1687: alle drei Zaehler wie im To-Do-Reiter */
:root.geraet-tablet-breit body[data-tab="kalender"] #view-termine #startKaesten9 .sk9[data-ziel="todoMine"]{border-left:1px solid var(--line);padding-left:5px}

/* ein9 (Harun 17.10., Screenshot 2000 px: "Inhalt nur mittig ~950 px, rechts schmale Spalte, viel Leerraum"): ab 1400 px nutzt die
   Buchungsseite die Breite - links buendig zur Navigation statt zentriert, Kachel-Spalte breiter mit Termintyp-Karten ZWEISPALTIG
   (natuerliche Reihenfolge, keine Familien-Titel), rechte Spalte buendig oben (nicht mehr 40 px tiefer). Laeuft ein Block, steht
   "TV-Block laeuft · Steuerung" oben in der rechten Spalte neben den Kacheln statt ganz unten. Handy/Tablet unveraendert. */
@media (min-width:1400px){
  :root.breit9{--bk-breite:1180px;--bk-seite:380px;--bk-luecke:32px}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)){justify-content:start;align-content:start;padding-left:24px;padding-right:24px;box-sizing:border-box}
  :root.breit9 #main-form:has(#kartenBereich > #tvHeute9:not(:empty)) .sticky > div > #statusZeile{margin-left:24px !important;
    width:min(var(--bk-breite), calc(100% - var(--bk-seite) - var(--bk-luecke) - 48px)) !important}
  :root.breit9 #kartenBereich > #tvHeute9{margin-top:0}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px 14px}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links > .card{grid-column:auto !important;grid-row:auto !important}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)):has(#tvZone .tvs10) > #tvZone{grid-column:2;grid-row:1;margin:0 0 12px;align-self:start}
  /* Kachel-Block ueber beide Zeilen, damit die rechte Spalte (Steuerung, darunter Ausnahmen) ohne Luecke stapelt */
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)):has(#tvZone .tvs10) > :not(#tvHeute9):not(#tvZone){grid-row:1 / span 2}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)):has(#tvZone .tvs10) > #tvHeute9{grid-row:2;top:24px}
  /* ein29 (Harun 18.10.): feste Paare statt natuerlicher Reihenfolge - Zeile 1 Infoabend | Strategiegespraech, Zeile 2 Ersttermin |
     Folgetermin Beratung, Zeile 3 Rekrutierung (bzw. Warm-Up) | Folgetermin Rekrutierung (basis), danach alle uebrigen wie bisher.
     Linke Karten stehen fest in Spalte 1, rechte in Spalte 2 - fehlt ein Partner, bleibt sein Platz frei und die naechste Zeile
     beginnt trotzdem links. Infoabend = Veranstaltungs-Karte ([data-weitere], buchen-kern.js) oder Termintyp infotag. Handy unveraendert. */
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links > .card{order:20 !important}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links > .card:is([data-weitere], [data-typ-key="infotag"]){order:1 !important;grid-column:1 !important}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links > .card[data-typ-key="strategie"]{order:2 !important;grid-column:2 !important}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links:not(:has(> .card:is([data-weitere], [data-typ-key="infotag"]))) > .card[data-typ-key="strategie"]{grid-column:1 !important}   /* ohne Infoabend steht das Strategiegespraech allein links */
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links > .card[data-typ-key="erstberatung"]{order:3 !important;grid-column:1 !important}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links > .card[data-typ-key="folgetermin"]{order:4 !important;grid-column:2 !important}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links > .card:is([data-typ-key="rekrutierung"], [data-typ-key="vorabgespraech"]){order:5 !important;grid-column:1 !important}
  :root.breit9 #kartenBereich:has(> #tvHeute9:not(:empty)) #booking-links > .card[data-typ-key="basis"]{order:6 !important;grid-column:2 !important}
}