/* Buchungsfeld im Dialer (29./30.09.2026) — Vertrag 5.3, Entwurf 3.1.
   Termin/Rueckruf ersetzt die Ergebnisliste: die Knoepfe gehen, das Feld nimmt ihren Platz —
   die Karte waechst nicht (glass und modern haben eine feste Hoehe ohne Scrollen). */
#dialer-outcome-section.buchung-aktiv > :not(#buchung):not(#buchung-kopf):not(#dialer-note):not(style) { display: none !important; }
#buchung[hidden], #buchung-kopf[hidden], #buchung-sonder[hidden], #buchung-ics[hidden], #buchung-gesperrt[hidden], #kal-rueckweg[hidden], .kal-streifen[hidden] { display: none !important; }

#buchung-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg,#fde047,#f59e0b); color: #5a3702; font-size: 13.5px; font-weight: 800; }
/* Die Schrift des Rueckruf-Kopfs ist dunkler (hell) bzw. heller (dunkel) als --green-text (07.10.2026): mit --green-text
   stand sie bei 4,85:1 bzw. 4,89:1 — knapp ueber der Grenze. Am Handy liegt der Kopf seit der festen Leiste direkt
   ueber dem offenen Blatt, und dessen Schatten drueckte ihn auf 4,32:1 („ändern" im Dunkeln 4,24:1; gemessen im Bild,
   pruef-lesbar.js am zusammengefuehrten Stand). Jetzt 5,9:1 bzw. 8,0:1 ohne Schatten. In Liquid Glass traegt die Sitzung
   auch im Dunkelmodus den hellen Satz (glass.css, Abschnitt 26 (1)) — dort gilt der helle Wert. */
#buchung-kopf.rueckruf { background: var(--green-bg); color: var(--bu-kopf-gruen, #086b4e); }
body.dark #buchung-kopf.rueckruf { --bu-kopf-gruen: #34d399; }
body.dark #page-dialer.skin-glass #buchung-kopf.rueckruf { --bu-kopf-gruen: #086b4e; }
#buchung-kopf button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 32px; }

#buchung { margin-top: 8px; padding: 10px 12px; border: 1.5px solid var(--border2); border-radius: var(--radius-sm); background: var(--bg2); }
#buchung.unvollstaendig { border-color: #eab308; box-shadow: 0 0 0 2px rgba(234,179,8,.25); }
#buchung-titel { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; display: block; }
/* Kopfzeile des Blatts: Titel links, der Ausgang rechts (02.10.2026, dialer.js buchungAusgang). Den Knopf
   gibt es nur am Handy, wo das Feld ein Blatt UEBER der Seite ist; am PC steht das Feld im Fluss, und „ändern"
   im Kopf darueber ist zu sehen. */
#buchung-oben { display: flex; align-items: center; gap: 10px; }
#buchung-oben #buchung-titel { flex: 1 1 auto; min-width: 0; }
#buchung-zu { display: none; }
#buchung.blatt #buchung-oben { margin: -6px -4px 4px 0; }
#buchung.blatt #buchung-oben #buchung-titel { margin-bottom: 0; }
#buchung.blatt #buchung-zu { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 88px; min-height: 44px; padding: 0 16px;
  border-radius: 22px; border: 1.5px solid var(--border2); background: var(--bg); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
#buchung.blatt #buchung-zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bu-reihe { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 6px; }
.bu-wahl { min-height: 34px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--border2); background: var(--bg); color: var(--text);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
.bu-wahl.heute { border-style: dashed; }
.bu-wahl.an { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bu-wahl:disabled { opacity: .4; cursor: not-allowed; }
.bu-wahl:focus-visible, #buchung input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#buchung input[type="date"], #buchung input[type="time"] { min-height: 34px; padding: 4px 8px; border: 1.5px solid var(--border2); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text); box-sizing: border-box; }
/* „Ohne Eintrag zählt der Termin 5 🔥 statt 250." (13.10.2026) — ein ruhiger Satz ueber der Statuszeile, nur solange
   „Termin" gewaehlt ist und kein Eintrag steht. Farbe wie die uebrigen Saetze des Feldes (--text2). */
#buchung-flammen { font-size: 12.5px; line-height: 1.4; color: var(--text2); margin: 0 0 4px; }
#buchung-flammen[hidden] { display: none; }
#buchung-status { font-size: 12.5px; font-weight: 700; color: var(--green-text); min-height: 18px; }
#buchung-status.fehler { color: var(--kal-warn, #b45309); }   /* --amber hat auf Weiss 3,2:1 (kalender.css) */
#buchung-status button, #kal-rueckweg button { border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; padding: 0 2px; min-height: 28px; }
body.dark #buchung-status button, body.dark #kal-rueckweg button { color: #cfe0ff; }
#buchung-ics { font-size: 12px; color: var(--text2); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
#buchung-ics .bu-link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 28px; }
body.dark #buchung-ics .bu-link { color: #cfe0ff; }
/* Die Wege „In meinen Kalender übernehmen" (14.10.2026, Paket outlook): der Verweis klappt sie auf (Pfeil als ::after,
   nicht unterstrichen; innerText des Knopfs bleibt der Satz), darunter vier Knoepfe in voller Breite — Wort und Unterzeile,
   gebaut wie die Tag-Knoepfe (.bu-wahl), aber mit eigener Klasse: .bu-wahl traegt die Auswahl-Logik des Feldes. */
#buchung-ics-laden::after { content: '▾'; display: inline-block; margin-left: 4px; text-decoration: none; }
#buchung-ics-laden[aria-expanded="true"]::after { content: '▴'; }
#buchung-ics-wege { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
#buchung-ics-wege[hidden] { display: none !important; }
.bu-weg { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 34px; padding: 4px 10px; border-radius: 8px;
  border: 1.5px solid var(--border2); background: var(--bg); color: var(--text); font-family: inherit; text-align: left; cursor: pointer; }
.bu-weg-wort { font-size: 12.5px; font-weight: 700; }
.bu-weg-satz { font-size: 12px; font-weight: 400; color: var(--text2); line-height: 1.3; }
.bu-weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Was immer mitgeht und wohin (17.10.2026) — unter den Wegen, ruhig wie ihre Unterzeilen. */
.bu-wege-satz { font-size: 12px; color: var(--text2); line-height: 1.35; }
#buchung-gesperrt { font-size: 12.5px; color: var(--kal-warn, #b45309); padding: 6px 0; }
/* Der Satz zur Erinnerung steht im BLATT (Handy, 05.10.2026): dort ist die Erinnerungskarte ein schmaler Streifen
   ohne ihn. Am PC steht er in der vollen Karte der Seitenleiste (der Streifen dort hat ihn nicht) und im Kalender-Blatt;
   das Feld im Fluss bleibt so hoch wie bisher. */
#buchung-satz { display: none; }
#buchung.blatt #buchung-satz { display: block; font-size: 12px; color: var(--text2); margin-top: 2px; }
/* Im Blatt am Handy sind „Noch einmal" und „Rückgängig" Fingerziele: 44 px hoch (05.10.2026). */
#buchung.blatt #buchung-status button { min-height: 44px; padding: 0 6px; }
#kal-rueckweg { font-size: 12.5px; color: var(--text2); padding: 4px 2px; }
/* Nur die Statuszeile („Termin … entfernt · Rückgängig"), nachdem ein anderes Ergebnis die Buchung
   zurueckgenommen hat — sonst stuende der Rueckgaengig-Knopf im verborgenen Feld (Gutachten 30.09.). */
#buchung.nur-status { padding: 4px 10px; border-style: dashed; border-color: var(--border2); box-shadow: none; }
#buchung.nur-status > :not(#buchung-status) { display: none !important; }

/* Liquid Glass: das Feld ist auch am PC DECKEND (02.10.2026, Vorschlagsliste Punkt 10, Apple V3).
   Es las --bg2 — in glass durchscheinend (hell .66, dunkel .07): der Verlauf der Sitzung schimmerte
   durch die Tag-Knoepfe (zwei Stellen derselben Flaeche 32 bzw. 84 Farbstufen auseinander),
   „Eingetragen" stand bei 4,3:1, „Nicht gespeichert" bei 4,0:1 (pruef-lesbar.js). Weiss in BEIDEN
   Modi: die Sitzung in glass ist auch im Dunkelmodus hell (glass.css, Abschnitt 26 (1)) — ein dunkles
   Feld waere dort der Fremdkoerper, der das Blatt am Handy im Dunkeln bis zum 02.10. war. */
#page-dialer.skin-glass #buchung { background: #ffffff; }
/* Die Verweise (Rueckgaengig, Noch einmal, .ics) sind im Dunkelmodus hellblau — fuer das dunkle Feld
   in Klassik und Modern. Auf dem weissen Feld der glass-Sitzung tragen sie die Tinte (--accent). */
body.dark #page-dialer.skin-glass #buchung-status button,
body.dark #page-dialer.skin-glass #kal-rueckweg button,
body.dark #page-dialer.skin-glass #buchung-ics .bu-link { color: var(--accent); }

/* Handy: das Feld wird ein Blatt ueber der unteren Leiste, Titel mit dem Namen, 16 px Schrift
   (sonst zoomt das iPhone beim Antippen). Nach „Eingetragen" schliesst es sich. */
@media (max-width: 768px) {
  #buchung.blatt { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 260; margin: 0;
    border-radius: 16px 16px 0 0; max-height: 70vh; overflow-y: auto; box-shadow: 0 -6px 24px rgba(0,0,0,.18); padding: 14px 14px 10px; }
  #buchung.blatt .bu-reihe { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #buchung.blatt .bu-wahl, #buchung.blatt input { font-size: 16px; min-height: 40px; flex-shrink: 0; }
  /* Im Design glass ist #page-dialer ein eigener Stapelkontext, und der Fuss mit dem Datum steht mit
     z-index 1 DARUEBER (sonst waere er dort unsichtbar, styles.css). Das Blatt hat zwar z-index 260,
     aber nur innerhalb von #page-dialer: bei 360×740 lag der Fuss auf der Uhrzeit-Reihe
     (Demo 30.09.2026, elementFromPoint = footer, B1). Solange das Blatt offen ist, tritt er zurueck. */
  body:has(#buchung.blatt) footer { visibility: hidden; }
  /* Im Design glass bekommt jedes Kind der Karte position:relative + z-index:1 (glass.css, Glanzschicht).
     Damit ist der Ergebnis-Bereich ein eigener Stapel, und die Reihe „Zurück / Weiter" (spaeter im DOM,
     gleicher z-index) liegt UEBER dem Blatt: bei 390×844 verdeckte sie die Tag-Knoepfe beim Termin und die
     Uhrzeiten beim Rueckruf (gemessen 01.10.2026, elementFromPoint = #dialer-back-btn / #dialer-next-btn;
     der Pruefer B1 mass nur den ERSTEN Uhrzeit-Knopf). Solange das Blatt offen ist, steht der Bereich
     eine Stufe hoeher. */
  #page-dialer.skin-glass .card > #dialer-outcome-section:has(#buchung.blatt) { z-index: 2; }
  /* … und das Blatt ist DECKEND (01.10.2026). Im Design glass war es durchscheinend — hell
     rgba(255,255,255,.66), dunkel rgba(255,255,255,.07), also fast durchsichtig: die Reihe „Zurück /
     Weiter" und die Notiz dahinter schimmerten durch die Tag-Knoepfe. Ein Blatt, das ueber der Seite
     liegt, traegt dieselbe Flaeche wie in modern und klassik. Als feste Farbe, nicht ueber --bg2: glass
     belegt --bg2 selbst mit dem durchscheinenden Wert (glass.css), die Variable loest sich hier also
     wieder durchsichtig auf (nachgemessen). Die Werte sind die von --bg2 in styles.css.
     Seit 02.10.2026 auch im Dunkelmodus weiss (vorher #12293f): das Blatt liegt in der Sitzung, und die
     traegt in glass jetzt auch dunkel den hellen Variablensatz (glass.css, Abschnitt 26 (1)) — dunkle
     Tinte auf dunklem Blatt waere der naechste Fehler. */
  #page-dialer.skin-glass #buchung.blatt { background: #ffffff; }
}

/* ── HANDY-FEINSCHLIFF (08.10.2026, Welle 2) — eigener Block am Ende; Begruendung am gleichnamigen Block in
   styles.css. Im Blatt sind Tag, Uhrzeit und die zwei Felder 44 px hoch (vorher 40), „ändern" 44×44 (46×32),
   die Verweise unter dem Status („Als Kalenderdatei", „Rückgängig") 44 px. Die Reihen laufen weiter quer
   (Wisch-Reihen) — das Blatt waechst je Reihe um 4 px. */
@media (max-width: 768px) {
  #buchung.blatt .bu-wahl, #buchung.blatt input { min-height: 44px; min-width: 44px; }   /* die Stunden „08" … waren 36 breit */
  #buchung-kopf #buchung-aendern { min-height: 44px; min-width: 44px; }   /* #buchung-kopf button (32 px) wiegt sonst schwerer */
  #buchung.blatt #buchung-ics .bu-link, #kal-rueckweg button { min-height: 44px; }
  /* Der Haken „Telefonnummer mitgeben" erbte von der Regel darueber 44×44 px — ein leeres Quadrat neben seinem Wort
     (gesehen 14.10.2026, Bild 390×844). Das Fingerziel ist jetzt die ganze Zeile (44 px), der Haken selbst 20 px. */
  #buchung.blatt #buchung-ics label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
  #buchung.blatt #buchung-ics input[type="checkbox"] { min-width: 0; min-height: 0; width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
  /* Die Wege im Blatt sind Blatt-Eintraege: 48 px hoch, 16 px Wort (14.10.2026, Paket outlook). */
  #buchung.blatt .bu-weg { min-height: 48px; padding: 6px 12px; justify-content: center; }
  #buchung.blatt .bu-weg-wort { font-size: 16px; }
  #buchung.blatt .bu-weg-satz { font-size: 13px; }
}