/* =====================================================================
   BizCal – Tablet HOCHFORMAT (Stufe F: Fold aufgeklappt, kleines Tablet hochkant)
   Konzept: docs/TABLET_FOLD_KONZEPT.md (Abschnitt "Einbau Hochformat (Runde r68)")

   AKTIVIERUNG – NUR ueber die Klasse html.geraet-tablet-hoch.
   Sie setzt ausschliesslich layout-flex.js (window.GeraetLayout9): automatisch
   ab 600 px Breite (unter 900 px, ohne Flex-Modus) oder erzwungen ueber den
   Umschalter / ?geraet=tablet-hoch. Diese Datei und layout-tablet-hoch.js
   setzen die Klasse NIE selbst. Deshalb steht hier kein @media – jede Regel
   haengt an html.geraet-tablet-hoch; ohne die Klasse wirkt nichts.
   Handy (geraet-handy, < 600 px) bleibt dadurch zu 100 % unveraendert.

   Hausstil: keine neuen Farben (nur vorhandene Tokens), Ecken 4 px,
   keine Karteikarten-Optik, nichts springt.
   ===================================================================== */

/* ---------- Grundmasse ---------- */
html.geraet-tablet-hoch{
  --th-nav: calc(56px + var(--sab,0px) + var(--vvUnten,0px));   /* gleiche Rechnung wie .view / nav */
  --th-blaetter: 240px;                                         /* Blaetter-Spalte To Do */
  --th-liste: 300px;                                            /* Gruppen-Spalte Einstellungen */
}

/* ---------- Buchen: Huelle begrenzen, iframe-Logik unberuehrt ---------- */
html.geraet-tablet-hoch #view-buchen iframe{max-width:720px;margin:0 auto}

/* =====================================================================
   TO DO – zwei Spalten: links Blaetter (der vorhandene #todoDrawer, fest
   eingeblendet), rechts die Aufgaben des gewaehlten Blatts.
   ===================================================================== */
html.geraet-tablet-hoch #todoDrawer{
  left:0;right:auto;top:0;bottom:var(--th-nav);width:var(--th-blaetter);
  transform:none !important;transition:none;box-shadow:none;
  border-left:0;border-right:1px solid var(--line);z-index:36;
  padding:calc(12px + env(safe-area-inset-top,0px)) 10px 16px;
}
html.geraet-tablet-hoch #todoDrawer .dr-punkt{min-height:44px}          /* groessere Tippflaechen */
html.geraet-tablet-hoch #todoDim{display:none !important}               /* kein Schleier – die Spalte ist immer da */
html.geraet-tablet-hoch #todoMenuBtn{display:none}                      /* Burger entfaellt, die Blaetter stehen links */
html.geraet-tablet-hoch #view-termine #todoWrap{margin-left:var(--th-blaetter)}
html.geraet-tablet-hoch #view-termine .todo-suche{margin-left:var(--th-blaetter)}
html.geraet-tablet-hoch .todo-eingabe{left:calc(var(--th-blaetter) + 16px)}
html.geraet-tablet-hoch .todo-band{left:var(--th-blaetter)}

/* Start: links der Tag (Heute faellig), rechts die Kaesten Nachfragen/Anfragen
   untereinander – dieselben Kaesten, nur anders angeordnet. Erst ab 540 px
   Inhaltsbreite (Container-Abfrage; Fold offen ~840 px ja, 768-px-Tablet nein),
   darunter bleibt die Reihenfolge wie am Handy (Kaesten oben, Liste darunter). */
html.geraet-tablet-hoch #view-termine #todoWrap{container-type:inline-size;container-name:th-todo}
@container th-todo (min-width: 540px){
  html.geraet-tablet-hoch #view-termine.ansicht-start #todoInhalt{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,38%);
    grid-template-rows:auto auto 1fr;column-gap:16px;align-items:start;
  }
  html.geraet-tablet-hoch #view-termine.ansicht-start #todoAntworten{grid-column:2;grid-row:1 / span 3;min-width:0;margin-top:12px}
  html.geraet-tablet-hoch #view-termine.ansicht-start #todoMine{grid-column:1;grid-row:1;min-width:0}
  html.geraet-tablet-hoch #view-termine.ansicht-start #todoVorschlaege{grid-column:1;grid-row:2}
  html.geraet-tablet-hoch #view-termine.ansicht-start #todoLinien{grid-column:1;grid-row:3;align-self:stretch}
  /* leere Antworten-Spalte nimmt keinen Platz weg */
  html.geraet-tablet-hoch #view-termine.ansicht-start #todoInhalt:has(#todoAntworten.ka-leer9){grid-template-columns:minmax(0,1fr)}
  html.geraet-tablet-hoch #view-termine.ansicht-start #todoInhalt:has(#todoAntworten.ka-leer9) #todoAntworten{display:none}
}

/* =====================================================================
   EINSTELLUNGEN – zwei Spalten
   Ohne offene Unterseite: die Gruppen in zwei Spalten nebeneinander.
   Mit offener Unterseite: links die Gruppen (schmal, eigene Rolle),
   rechts der Inhalt – wie System-Einstellungen am Tablet.
   ===================================================================== */
/* es1 (Harun 16.10.): oberste Ebene einspaltig (Grundgeruest 560 px mittig) - zweispaltig erst mit offener Unterseite */
html.geraet-tablet-hoch #view-set > .wrap:has(#setSub:not(.hide)){max-width:none;padding-left:24px;padding-right:24px}

html.geraet-tablet-hoch #view-set > .wrap:has(#setSub:not(.hide)){
  display:grid;grid-template-columns:var(--th-liste) minmax(0,1fr);column-gap:20px;align-items:start;
}
html.geraet-tablet-hoch #view-set > .wrap:has(#setSub:not(.hide)) > :first-child{grid-column:1 / -1}
html.geraet-tablet-hoch #view-set > .wrap:has(#setSub:not(.hide)) > #setHome.hide{
  display:block !important;column-count:1;grid-column:1;grid-row:2;
  position:sticky;top:0;max-height:calc(100dvh - var(--th-nav) - 90px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
}
html.geraet-tablet-hoch #view-set > .wrap:has(#setSub:not(.hide)) > #setSub{grid-column:2;grid-row:2;min-width:0}
/* In der schmalen Liste: Kopfkarte und "Konto loeschen" weglassen, Zeilen kompakter */
html.geraet-tablet-hoch #view-set > .wrap:has(#setSub:not(.hide)) #setHome > .card:first-child,
html.geraet-tablet-hoch #view-set > .wrap:has(#setSub:not(.hide)) #setHome > #kontoWeg{display:none}
/* gewaehlte Zeile (setzt TabletHoch: .th-an) – vorhandener Akzent-Hauch, keine neue Farbe */
html.geraet-tablet-hoch #setHome .srow.th-an{background:var(--chip);border-radius:4px}
/* "< Einstellungen" bleibt: schliesst die Unterseite, die Liste wird wieder zweispaltig */

/* =====================================================================
   HALBMODALE von unten: bleiben Halbmodal, aber hoechstens 560 px breit,
   mittig. (left/right 0 + Breite + margin auto – KEIN transform, weil
   Einblenden, Ziehen und Schliessen mit transform arbeiten.)
   ===================================================================== */
html.geraet-tablet-hoch .blatt-panel,
html.geraet-tablet-hoch .drop-up:not(.kal9){
  max-width:560px !important;margin-left:auto !important;margin-right:auto !important;
}
html.geraet-tablet-hoch .overlay[data-ovk="eswdh"] .modalbox{max-width:560px !important;margin-left:auto;margin-right:auto}

/* =====================================================================
   VOLLBILD-MASKEN (.edit-sheet: Termin, Aufgabe, Veranstaltung, Kalender-
   Sichtbarkeit): mittiges Fenster 640 px, Hintergrund abgedunkelt.
   Der Schleier ist ein Schatten; ::before faengt Tipps daneben ab
   (sie landen auf der Maske selbst und loesen nichts dahinter aus).
   ===================================================================== */
html.geraet-tablet-hoch .edit-sheet{
  left:0;right:0;top:calc(24px + env(safe-area-inset-top,0px));bottom:24px;
  width:min(640px, calc(100% - 32px));margin:0 auto;
  border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35), 0 12px 40px rgba(0,0,0,.25);
}
html.geraet-tablet-hoch .edit-sheet::before{content:'';position:fixed;inset:-100vmax;z-index:-1}
/* Aufgabe aus dem To Do: deckt nur die Aufgaben-Spalte, die Blaetter und die
   Leiste unten bleiben sichtbar (Reiterwechsel schliesst die Aufgabe, s. JS). So stimmt auch der Morph (Zettel hebt an derselben Stelle ab). */
html.geraet-tablet-hoch body:has(#view-termine.on) #aufgSheet{
  top:0;bottom:var(--th-nav);left:var(--th-blaetter);right:0;width:auto;margin:0;border-radius:0;
  box-shadow:-1px 0 0 var(--line);
}
html.geraet-tablet-hoch body:has(#view-termine.on) #aufgSheet::before{display:none}

/* Rueckgaengig-Hinweis / Toasts unten: hoechstens 480 px, mittig */
html.geraet-tablet-hoch #undoBar,
html.geraet-tablet-hoch #esHinweis9{max-width:480px;margin-left:auto !important;margin-right:auto !important}

/* ---------- Kalender ----------
   Vorgabe "5 Tage" setzt layout-tablet-hoch.js beim ersten Oeffnen.
   Drei-Striche-Menue: groessere Tippflaechen. */
html.geraet-tablet-hoch #kalDrawer .dr-punkt{min-height:44px}
/* zugeklappte Seitenleisten werfen keinen Schatten an den rechten Rand */
html.geraet-tablet-hoch #kalDrawer:not(.auf){box-shadow:none}