/* Zeichen liegt als eigene Datei bot-zeichen.svg vor: die CSP der Seite erlaubt
   img-src nur 'self', ein data:-URI in mask-image wird verworfen (live gemessen).
/* Chat im Glas 20.09.2026: der Chat zieht zurueck in die Tafel "Verfuegbarkeit pruefen".
   Drei Fassungen, Schalter ?chat=A|B|C. Dunkles Glas wie die Tafel (data-ptf="5"),
   Schrift hell, Radius 0 (Regel 26), Schriften aus stil.css.

   Gemeinsame Werte -- ein Material, drei Anordnungen:
     Glas    rgba(45,41,37,.88), blur 40px, saturate .7, brightness 1.06
     Kante   innen 1px rgba(246,242,234,.16), aussen 1px rgba(20,17,15,.35)
     Schrift #F6F2EA, leise rgba(246,242,234,.62) */
html[data-chat]{--cg-glas:rgba(45,41,37,.88);--cg-schrift:#F6F2EA;--cg-leise:rgba(246,242,234,.64);
  --cg-kante:rgba(246,242,234,.16);--cg-zug:cubic-bezier(.32,.72,0,1)}

/* ---- Gemeinsames Glas ---- */
html[data-chat] .gc-fenster{background:var(--cg-glas);color:var(--cg-schrift);
  -webkit-backdrop-filter:blur(40px) saturate(.7) brightness(1.06);backdrop-filter:blur(40px) saturate(.7) brightness(1.06);
  box-shadow:inset 0 0 0 1px var(--cg-kante),0 30px 70px -28px rgba(20,17,15,.6)}
html[data-chat] .gc-kopf{background:transparent;border-bottom:1px solid var(--cg-kante);color:var(--cg-schrift);height:58px}
html[data-chat] .gc-titel{color:var(--cg-schrift)}
html[data-chat] .gc-verlauf{padding:24px 26px 12px}
/* Antwort des Hauses: helleres Glas auf dunklem Glas, damit der Text traegt */
html[data-chat] .gc-perle{background:rgba(246,242,234,.10);color:var(--cg-schrift);
  box-shadow:inset 0 0 0 1px rgba(246,242,234,.12)}
/* Gast: die Tinte der Seite, wie der Buchungsbalken */
html[data-chat] .gc-perle.gast{background:rgba(246,242,234,.86);color:#26221E;box-shadow:none}
html[data-chat] .gc-eingabe{border-top:1px solid var(--cg-kante)}
html[data-chat] .gc-feld{background:rgba(246,242,234,.08);border:1px solid var(--cg-kante)}
html[data-chat] .gc-feld textarea{color:var(--cg-schrift)}
html[data-chat] .gc-feld textarea::placeholder{color:var(--cg-leise)}
html[data-chat] .gc-senden{color:var(--cg-leise)}
html[data-chat] .gc-senden.bereit{background:rgba(246,242,234,.9);color:#26221E}
html[data-chat] .gc-fuss{color:rgba(246,242,234,.72)}
html[data-chat] .gc-tippt span{background:rgba(246,242,234,.8)}
html[data-chat] .gc-tippt span:nth-child(2){background:rgba(246,242,234,.55)}
html[data-chat] .gc-tippt span:nth-child(3){background:rgba(246,242,234,.35)}
/* Das Angebot im Chat (Preis) -- dieselbe Tafel-Typografie wie im Kalender */
html[data-chat] .gc-angebot{border-top-color:var(--cg-kante)}
html[data-chat] .gc-angebot .gc-preis,html[data-chat] .gc-angebot a{color:var(--cg-schrift)}
html[data-chat] .gc-angebot .gc-leise{color:var(--cg-leise)}

/* =====================================================================
   A "Spalte" -- der Chat ist die rechte Spalte DER Tafel.
   Ein Fenster, zwei Haelften, dazwischen eine Haarlinie: Kalender links,
   Gespraech rechts. Nichts schwebt, nichts ueberdeckt.
   ===================================================================== */
html[data-chat="A"] .gbt-tafel{width:min(1320px,calc(100vw - 48px))}
/* Kalender und Belegung enden VOR der Chatspalte, sonst liegen sie darunter */
html[data-chat="A"] .gbt-tafel .gbt-kopf,
html[data-chat="A"] .gbt-tafel .gbt-rumpf,
html[data-chat="A"] .gbt-tafel .gbt-fuss{padding-right:404px}
html[data-chat="A"] .gc-fenster{position:absolute;right:0;top:0;bottom:0;width:380px;height:auto;
  border-left:1px solid var(--cg-kante);box-shadow:none;background:rgba(246,242,234,.05);
  -webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;transform:none;pointer-events:auto}
html[data-chat="A"] .gc-fenster .gc-kopf{padding-left:24px}
html[data-chat="A"] .gc-kachel{display:none}

/* =====================================================================
   B "Schublade" -- der Chat faehrt von der Unterkante der Tafel herauf,
   ueber den Kalender, wie eine zweite Glasscheibe. Zu sehen ist immer
   eine Zeile: "Frag uns, wir antworten sofort."
   ===================================================================== */
html[data-chat="B"] .gc-fenster{position:absolute;left:0;right:0;bottom:0;width:auto;
  height:min(62%,420px);transform:translateY(calc(100% - 58px));opacity:1;pointer-events:auto;
  border-top:1px solid var(--cg-kante);transition:transform 420ms var(--cg-zug)}
html[data-chat="B"] .gc-fenster.cg-auf{transform:translateY(0)}
html[data-chat="B"] .gc-kopf{cursor:pointer;justify-content:space-between}
html[data-chat="B"] .gc-kachel{display:none}

/* =====================================================================
   C "Beistellglas" -- gewaehlt am 20.09.2026.
   Der Chat wird aus der Tafel heraus gerufen: Zeichen im Kopf UND neben dem
   grossen Knopf unten. Erst dann ruecken Kalender und Glas nebeneinander.

   Drei Breiten, drei Antworten (gemessen, nicht geraten):
     ab 1200 px  Kalender und Glas NEBENEINANDER, die Tafel wird schmaler
     810-1199    zu eng fuer beides -- das Glas legt sich UEBER die Tafel,
                 der Kopf der Tafel bleibt sichtbar (man weiss, wo man ist)
     unter 810   Vollbild-Glas, wie das Chatfenster am Handy ohnehin
   ===================================================================== */
/* Das Zeichen: dasselbe Bild wie an der Klebeleiste, und genauso angebaut --
   ein dunkles Feld rechts am Knopf, davor eine Haarlinie (Michael 20.09.2026,
   Abbildung 2). Kein zweites Wort "Fragen": entweder Chat oder Verfuegbarkeit.
   Radius 0 (Regel 26). */
.cg-knopfpaar{display:inline-flex;align-items:stretch}
@media (max-width:809px){   /* am Handy ist der Knopf so breit wie die Tafel -- das Paar auch */
  .cg-knopfpaar{display:flex;width:100%}
  .cg-knopfpaar .gbt-knopf{flex:1 1 auto}
  .cg-ruf{padding:0 18px}
}
.cg-knopfpaar .gbt-knopf{margin:0}
/* Ein durchgehend beiges Feld: Knopf und Zeichen teilen sich den Grund, getrennt nur
   durch einen feinen Strich. Bot braun wie die Schrift, Augen beige -- klein, nicht
   in Originalgroesse (Michael 20.09.2026: "nicht so Riesenaugen"). */
.cg-ruf{display:inline-flex;align-items:center;justify-content:center;background:#F1ECE3;color:#35302B;
  border:0;border-left:1px solid rgba(53,48,43,.28);padding:0 20px;cursor:pointer;
  transition:background-color 150ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.cg-ruf svg{width:20px;height:20px;display:block}
.cg-ruf .cg-wort{display:none}
/* Die Augen stehen in chat.js fest auf #3D3733 und waeren auf dem braunen Bot unsichtbar.
   Sie bekommen die Farbe des Feldes und werden kleiner: 1,8 x 2,4 statt 2,3 x 3,2 Einheiten. */
.cg-ruf svg rect{fill:#F1ECE3 !important;width:1.8px;height:2.4px;y:10.8px}
.cg-ruf svg rect:nth-of-type(1){x:7.6px}
.cg-ruf svg rect:nth-of-type(2){x:14.7px}
/* Der Grund bleibt IMMER derselbe wie beim Knopf (Michael 20.09.2026) -- weder beim
   Darueberfahren noch im offenen Zustand wechselt er. Zu sehen ist der Zustand am
   Zeichen selbst: es wird beim Zeigen etwas kraeftiger. */
@media(hover:hover){.cg-ruf:hover{background:#F1ECE3;color:#1F1B18}}
.cg-ruf:active{transform:scale(.97)}
.cg-ruf[aria-expanded="true"]{background:#F1ECE3;color:#1F1B18}
/* Im Kopf der Tafel reicht das Zeichen allein -- kein Kasten, keine Kante */
/* Tafel und Glas nebeneinander -- nur wenn der Chat gerufen wurde */
@media (min-width:1480px){
  /* Michael 20.09.2026: "Zieh dann den Kalender und die Belegung nicht zusammen."
     Die Tafel bleibt also unveraendert -- volle Breite, Belegung rechts neben dem
     Kalender. Das Chatglas legt sich darueber, es schiebt nichts. */
  html[data-chat="C"] .gc-fenster{position:fixed;z-index:9992;width:360px;
    top:var(--cg-top,10vh);height:var(--cg-hoehe,70vh);left:var(--cg-links,auto);right:auto;
    opacity:0;transform:translateX(-12px);pointer-events:none;
    transition:opacity 240ms ease,transform 320ms cubic-bezier(.32,.72,0,1)}
  html[data-chat="C"] .gc-fenster.offen{opacity:1;transform:none;pointer-events:auto}
  /* nebeneinander: die Tafel RUECKT nach links (nur transform, kein Umbruch),
     ihre Breite und ihr Satz bleiben unveraendert */
  html[data-lage="neben"][data-chat="C"].cg-offen .gbt-tafel.da{transform:translate(-50%,-50%) translateX(-188px)}
  html[data-lage="neben"][data-chat="C"] .gbt-tafel{transition:transform 320ms cubic-bezier(.32,.72,0,1)}
}
/* Tablet und schmaler Desktop (810-1479): kein Vollbild und kein Zusammenziehen.
   Das Chatglas bleibt eine 360-px-Scheibe und legt sich ueber die rechte Haelfte der
   Tafel. So haelt das Nebeneinander so lange wie moeglich, und der Kalender behaelt
   seine originale Anordnung.
   Grundlage: eigene Messung (Tafel 1040 + 16 Fuge + Chat 360 + 2x24 Rand = 1464 px)
   und die Recherche ueber ChatGPT (20.09.2026): Intercom 20 px Rand, Zendesk 16 px,
   HiJiffy Vollbild nur optional; ein gemeinsamer Anbieter-Breakpoint ist nicht belegt,
   empfohlen wird Nebeneinander erst ab ~1480 px, darunter eine 360-px-Scheibe,
   Bottom-Sheet erst unter 768 px. */
@media (min-width:810px) and (max-width:1479px){
  html[data-chat="C"] .gc-fenster{position:fixed;z-index:9992;width:360px;
    left:var(--cg-links-tablet,auto);right:auto;
    top:calc(var(--cg-top,10vh) + 40px);height:calc(var(--cg-hoehe,70vh) - 80px);
    opacity:0;transform:translateY(12px);pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(246,242,234,.24),0 44px 90px -26px rgba(16,13,11,.78);
    transition:opacity 240ms ease,transform 320ms cubic-bezier(.32,.72,0,1)}
  html[data-chat="C"] .gc-fenster.offen{opacity:1;transform:none;pointer-events:auto}
  html[data-chat="C"].cg-offen .gbt-tafel.da{filter:brightness(.88) saturate(.95)}
  html[data-chat="C"] .gbt-tafel{transition:filter 280ms ease}
}
html[data-chat="C"] .gc-kachel{display:none}

/* =====================================================================
   LAGE: nebeneinander oder ueberlappt (Michael 20.09.2026: "schoen richtig
   ueberlappt, damit man die Ebenen sieht"). Schalter ?lage=neben|ueber.
   Ueberlappt heisst hier: das Chatglas liegt 104 px ueber der Kalenderkante,
   oben und unten um 40 px eingerueckt, mit eigener Lichtkante und tiefem
   Schatten. Der Kalender tritt zurueck (dunkler, minimal kleiner) -- sonst
   sehen zwei gleich helle Glaeser wie ein Blatt aus.
   ===================================================================== */
@media (min-width:1480px){
  html[data-lage="ueber"][data-chat="C"] .gc-fenster{
    top:calc(var(--cg-top,10vh) + 40px);height:calc(var(--cg-hoehe,70vh) - 80px);
    box-shadow:inset 0 0 0 1px rgba(246,242,234,.24),0 44px 90px -26px rgba(16,13,11,.78),0 8px 22px -12px rgba(16,13,11,.5)}
  html[data-lage="ueber"][data-chat="C"].cg-offen .gbt-tafel.da{filter:brightness(.88) saturate(.95)}
  html[data-lage="ueber"][data-chat="C"] .gbt-tafel{transition:filter 280ms ease}
}
/* Tablet: dieselbe Idee, nur andersherum gestapelt -- das Glas sitzt tiefer und
   rechts versetzt, die Kopfzeile und die linke Kante der Tafel bleiben sichtbar. */
@media (min-width:810px) and (max-width:1199px){
  html[data-chat="C"].cg-offen .gbt-tafel.da{filter:brightness(.88) saturate(.95)}
  html[data-chat="C"] .gc-fenster{
    box-shadow:inset 0 0 0 1px rgba(246,242,234,.24),0 44px 90px -26px rgba(16,13,11,.78)}
}

/* Handy: KEIN Vollbild mehr. Das Glas kommt als Blatt von unten und laesst die
   Kopfzeile des Kalenders frei -- man sieht, worueber man spricht, und die Ebenen
   bleiben lesbar (Michael 20.09.2026: "kleiner, pass ihn an").
   Alles eine Stufe kleiner: Kopf 46 statt 58, Text 15 statt 17, Polster 12/14. */
@media (max-width:809px){
  html[data-chat] .gc-fenster{position:fixed;left:8px;right:8px;top:auto;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    width:auto;height:min(68vh,520px);transform:translateY(16px);
    /* Auf dem dunklen Kalender war das Glas kaum zu sehen -- am Handy deshalb dichter
       und mit heller Oberkante (gemessen: Blatt und Tafel waren fast gleich hell). */
    box-shadow:inset 0 1px 0 rgba(246,242,234,.34),inset 0 0 0 1px rgba(246,242,234,.16),
      0 -22px 60px -16px rgba(16,13,11,.9);
    background:rgba(34,30,27,.94);
    -webkit-backdrop-filter:blur(40px) saturate(.7) brightness(1.06);backdrop-filter:blur(40px) saturate(.7) brightness(1.06)}
  html[data-chat] .gc-fenster.offen{transform:none}
  html[data-chat] .gc-kopf{height:46px;padding:0 16px}
  html[data-chat] .gc-kopf svg{width:20px;height:20px}
  html[data-chat] .gc-titel{font-size:10px;letter-spacing:.2em}
  html[data-chat] .gc-verlauf{padding:16px 16px 8px;gap:10px}
  html[data-chat] .gc-perle{font-size:15px;line-height:1.5;padding:11px 14px;max-width:88%}
  html[data-chat] .gc-perle.gast{padding:10px 14px}
  html[data-chat] .gc-eingabe{padding:8px 16px 10px}
  html[data-chat] .gc-fuss{padding:0 16px 10px;font-size:8.5px;line-height:1.6}
  html[data-eingabe="E1"] .gc-feld textarea,html[data-eingabe="E3"] .gc-feld textarea{font-size:15px;line-height:22px;padding:10px 14px}
  html[data-eingabe="E1"] .gc-senden{width:48px}
  html[data-eingabe="E3"] .gc-senden{width:40px;height:40px}
  html[data-eingabe="E2"] .gc-feld textarea{font-size:11px;padding:10px 0}
  /* Zeitspanne als zwei beschriftete Zeilen statt einer langen Zeile */
  .gbt-zusammen{display:flex;flex-direction:column;gap:0;width:100%;text-align:left}
  .cg-dat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:10px 0;border-top:1px solid rgba(246,242,234,.18)}
  .cg-dat:last-child{border-bottom:1px solid rgba(246,242,234,.18)}
  .cg-dat-l{font-family:Inter,system-ui,sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(246,242,234,.68)}
  .cg-dat-w{font-family:"DM Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.06em;color:#F6F2EA;white-space:nowrap}
  /* Der Kalender bleibt oben sichtbar und tritt zurueck */
  html[data-chat="C"].cg-offen .gbt-tafel.da{filter:brightness(.82) saturate(.95)}
}

  font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.18em}

/* =====================================================================
   TEXTEINGABE, drei Fassungen (Michael 20.09.2026: "dass sie aussieht wie
   der Kalender und die Verfuegbarkeit"). Schalter ?eingabe=E1|E2|E3.
   ===================================================================== */
/* E1 "Knopfpaar" -- wie "Verfuegbarkeit pruefen" samt Anbau: beiges Feld,
   rechts das dunkle Quadrat mit dem Pfeil. */
html[data-eingabe="E1"] .gc-feld{background:#F1ECE3;border:0;padding:0;align-items:stretch}
html[data-eingabe="E1"] .gc-feld textarea{color:#35302B;padding:14px 18px;font-size:16px;line-height:24px}
html[data-eingabe="E1"] .gc-feld textarea::placeholder{color:rgba(53,48,43,.55)}
html[data-eingabe="E1"] .gc-senden{width:56px;height:auto;background:#35302B;color:#F1ECE3;
  border-left:1px solid rgba(53,48,43,.22)}
html[data-eingabe="E1"] .gc-senden.bereit{background:#35302B;color:#F1ECE3}

/* E2 "Kalenderzeile" -- kein Kasten. Haarlinie wie ueber der Datumszeile,
   Beschriftung in DM Mono wie "BELEGUNG", der Pfeil wie der Monatspfeil. */
html[data-eingabe="E2"] .gc-eingabe{padding-top:0}
html[data-eingabe="E2"] .gc-feld{background:transparent;border:0;border-top:1px solid rgba(246,242,234,.22);
  padding:6px 0 0;align-items:center}
html[data-eingabe="E2"] .gc-feld textarea{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#F6F2EA;padding:14px 0;line-height:20px}
html[data-eingabe="E2"] .gc-feld textarea::placeholder{color:rgba(246,242,234,.55);text-transform:uppercase}
html[data-eingabe="E2"] .gc-senden{width:34px;height:34px;background:transparent;color:#F6F2EA}
html[data-eingabe="E2"] .gc-senden svg{width:24px;height:24px}
html[data-eingabe="E2"] .gc-senden.bereit{background:transparent;color:#F6F2EA}

/* E3 "Belegungsfeld" -- der Rahmen der Zaehler: 1 px Linie, der Pfeil sitzt
   in einem eigenen Quadrat daneben, genau wie Plus und Minus. */
html[data-eingabe="E3"] .gc-feld{background:transparent;border:1px solid rgba(246,242,234,.38);padding:0 0 0 16px;
  align-items:center;gap:12px}
html[data-eingabe="E3"] .gc-feld textarea{color:#F6F2EA;padding:12px 0;font-size:16px;line-height:24px}
html[data-eingabe="E3"] .gc-senden{width:44px;height:44px;margin:-1px -1px -1px 0;
  border:1px solid rgba(246,242,234,.38);background:transparent;color:#F6F2EA}
html[data-eingabe="E3"] .gc-senden.bereit{background:rgba(246,242,234,.9);color:#26221E}

  font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.18em}

/* =====================================================================
   SCHRIFT IN DER EINGABE (Aufbau bleibt E1). Schalter ?schrift=S1|S2|S3.
   S1 Serif  -- Abhaya Libre 17, die Fliesstextschrift der Seite
   S2 Mono   -- DM Mono 12, Versalien, gesperrt: die Sprache des Kalenders
   S3 Grotesk-- Inter 14, leicht gesperrt, Satzform: die Sprache der Beschriftungen
   ===================================================================== */
html[data-schrift="S1"][data-eingabe="E1"] .gc-feld textarea{font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif;
  font-size:17px;line-height:25px;letter-spacing:0;text-transform:none}
html[data-schrift="S2"][data-eingabe="E1"] .gc-feld textarea{font-family:"DM Mono",ui-monospace,monospace;
  font-weight:500;font-size:12px;line-height:22px;letter-spacing:.14em;text-transform:uppercase}
html[data-schrift="S2"][data-eingabe="E1"] .gc-feld textarea::placeholder{text-transform:uppercase}
html[data-schrift="S3"][data-eingabe="E1"] .gc-feld textarea{font-family:Inter,system-ui,sans-serif;
  font-weight:400;font-size:14px;line-height:22px;letter-spacing:.02em;text-transform:none}


/* Der Pflichthinweis stand 43 px eingerueckt (chat.css), die Eingabe daneben 26 px --
   die drei Zeilen standen also weder unter dem Feld noch auf einer Kante. Jetzt teilen
   sich Eingabe, Hinweis und Datenschutz-Link EINE senkrechte Linie
   (Michael 20.09.2026, Abbildung 2). */
html[data-chat] .gc-fuss{padding-left:26px;padding-right:26px}
@media (max-width:809px){ html[data-chat] .gc-fuss{padding-left:16px;padding-right:16px} }

/* =====================================================================
   Der Chat-Knopf faehrt auch in die KLEBELEISTE unten ein (Michael 20.09.2026,
   Abbildung 1): dieselbe Leiste, ein Haarstrich, dann das Zeichen -- keine
   schwebende Kachel mehr.
   ===================================================================== */
.buchbar .cg-bar{display:flex;align-items:center;justify-content:center;background:transparent;border:0;
  color:#F6F2EA;padding:0 26px;cursor:pointer;transition:background-color 150ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.buchbar .cg-bar svg{width:20px;height:20px;display:block}
.buchbar .cg-bar svg rect{fill:#3D3733 !important;width:1.8px;height:2.4px;y:10.8px}
.buchbar .cg-bar svg rect:nth-of-type(1){x:7.6px}
.buchbar .cg-bar svg rect:nth-of-type(2){x:14.7px}
@media(hover:hover){.buchbar .cg-bar:hover{background:rgba(246,242,234,.10)}}
.buchbar .cg-bar:active{transform:scale(.97)}
.buchbar .cg-bar[aria-expanded="true"]{background:rgba(246,242,234,.16)}
html[data-chat] .gc-kachel{display:none !important}

/* Chat OHNE offenen Kalender: klassisch unten rechts, gleiches Glas */
@media (min-width:810px){
  html[data-chat="C"]:not(.cg-tafel) .gc-fenster{position:fixed;left:auto;right:24px;
    top:auto;bottom:96px;width:380px;height:min(560px,calc(100vh - 180px))}
}
@media (max-width:809px){
  html[data-chat="C"]:not(.cg-tafel) .gc-fenster{bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
}

/* =====================================================================
   WEISSES GLAS (Michael 20.09.2026): dieselbe Anordnung, heller Werkstoff.
   Schalter ?glasfarbe=hell. Papierweiss statt Tinte, Schrift in Tinte,
   Kanten dunkel statt hell -- der Kalender darunter bleibt dunkel, das Glas
   hebt sich dadurch ab.
   ===================================================================== */
/* Werte aus dem Original-Chatfenster (chat.css) -- nur als Glas: Grund Papier statt
   Vollton, feine dunkle Kante, weicher Schatten. Wie der Kiesel im Klarglas. */
/* Dichter und mit glasigerem Rand (Michael 20.09.2026): 88 statt 72 Prozent Deckung,
   oben eine helle Lichtkante, unten eine dunklere -- so sieht man die Dicke der Scheibe. */
html[data-glasfarbe="hell"] .gc-fenster{background:rgba(243,238,231,.78);color:#211F1E;
  -webkit-backdrop-filter:blur(30px) saturate(1.08) brightness(1.05);backdrop-filter:blur(30px) saturate(1.08) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(53,48,43,.14),0 0 0 1px rgba(53,48,43,.14),
    0 44px 90px -28px rgba(16,13,11,.5),0 6px 18px -10px rgba(16,13,11,.28)}
html[data-glasfarbe="hell"] .gc-kopf{background:transparent;border-bottom:1px solid rgba(58,52,47,.14);color:#211F1E}
/* Das Zeichen im Kopf wird als MASKE gezeichnet, nicht als gefuellte Form: die Augen sind
   dann echte Loecher und zeigen exakt den Hintergrund, statt eine geratene Farbe zu tragen
   (Michael 20.09.2026: "gleiche Farbe wie der Hintergrund"). Dazu kleiner: 20 statt 24 px,
   Augen 1,6 x 2,2 Einheiten. */
html[data-chat] .gc-kopf > svg{display:none}   /* nur das Bot-Zeichen, NICHT das Kreuz im Knopf */
html[data-chat] .gc-kopf::before{content:"";flex:0 0 auto;width:24px;height:24px;background:currentColor;
  -webkit-mask:url("bot-zeichen.svg") center/contain no-repeat;
  mask:url("bot-zeichen.svg") center/contain no-repeat}
html[data-glasfarbe="hell"] .gc-zu{color:#3D3733}
@media(hover:hover){html[data-glasfarbe="hell"] .gc-zu:hover{color:#211F1E}}
html[data-glasfarbe="hell"] .gc-titel{color:#211F1E}
/* Blasen wie im Original: Haus hell, Gast in der Tinte des Hauses */
html[data-glasfarbe="hell"] .gc-perle{background:rgba(239,235,228,.86);color:#211F1E;
  box-shadow:0 1px 0 rgba(58,52,47,.08)}
html[data-glasfarbe="hell"] .gc-perle.gast{background:#3D3733;color:#F6F2EA;box-shadow:none}
html[data-glasfarbe="hell"] .gc-eingabe{border-top-color:rgba(58,52,47,.14)}
/* Eingabefeld und Antwortblase in EINER Farbe -- ruhiger (Michael 20.09.2026) */
html[data-glasfarbe="hell"][data-eingabe="E1"] .gc-feld{background:rgba(239,235,228,.86)}
html[data-glasfarbe="hell"][data-eingabe="E1"] .gc-feld textarea{color:#211F1E}
html[data-glasfarbe="hell"][data-eingabe="E1"] .gc-feld textarea::placeholder{color:rgba(33,31,30,.5)}
html[data-glasfarbe="hell"][data-eingabe="E1"] .gc-senden{background:#3D3733;color:#F6F2EA;border-left-color:rgba(58,52,47,.18)}
html[data-glasfarbe="hell"] .gc-fuss{color:rgba(58,52,47,.78)}
html[data-glasfarbe="hell"] .gc-tippt span{background:#8a8177}
/* Auf dem hellen Glas darf der Kalender darunter NICHT abdunkeln -- sonst kippt der Kontrast */
html[data-glasfarbe="hell"][data-chat="C"].cg-offen .gbt-tafel.da{filter:brightness(.96) saturate(.98)}


/* =====================================================================
   KALENDER IN WEISSEM GLAS (Michael 20.09.2026) -- derselbe Werkstoff wie das
   helle Chatglas: Papier 72 %, Unschaerfe 36, helle Innenkante plus feine
   dunkle Aussenkante. Schalter ?tafel=hell. Dreht die dunklen Regeln von
   data-ptf="5" um, ohne sie anzufassen.
   ===================================================================== */
html[data-tafel="hell"] body[data-ptf="5"] .gbt-tafel{
  background:rgba(243,238,231,.72) !important;color:#211F1E;
  -webkit-backdrop-filter:blur(36px) saturate(1.05) brightness(1.06) !important;
  backdrop-filter:blur(36px) saturate(1.05) brightness(1.06) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(53,48,43,.12),
    0 40px 90px -30px rgba(16,13,11,.45) !important}
html[data-tafel="hell"] body[data-ptf="5"] .gbt-tafel{--pt-schrift:#211F1E;--pt-zweit:#6E6862;--pt-aus:rgba(33,31,30,.3)}
html[data-tafel="hell"] body[data-ptf="5"] .gbt-kopf h2,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-kalname,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-zeile > span,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-zu,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-kalkopf button,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-gitter button{color:#211F1E}
html[data-tafel="hell"] body[data-ptf="5"] .gbt-gitter span,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-kopfzeile,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-zusammen,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-kindname{color:#6E6862}
html[data-tafel="hell"] body[data-ptf="5"] .gbt-gitter button[disabled]{color:rgba(33,31,30,.28)}
html[data-tafel="hell"] body[data-ptf="5"] .gbt-kopfzeile,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-zeile,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-fuss{border-color:rgba(58,52,47,.18)}
/* Auswahl: die gewaehlten Tage sind jetzt die DUNKELSTE Stelle im Gitter */
html[data-tafel="hell"] body[data-ptf="5"] .gbt-gitter button.gbt-rand{background:#3D3733;color:#F6F2EA}
html[data-tafel="hell"] body[data-ptf="5"] .gbt-gitter button.gbt-drin{background:rgba(58,52,47,.14);color:#211F1E}
html[data-tafel="hell"] body[data-ptf="5"] .gbt-zaehler button,
html[data-tafel="hell"] body[data-ptf="5"] .gbt-zeile select{border-color:rgba(58,52,47,.38);color:#211F1E}
html[data-tafel="hell"] body[data-ptf="5"] .gbt-zaehler .gbt-wert{color:#211F1E}
/* Hauptknopf dreht sich mit: dunkel auf hellem Glas, und der Chat-Anbau ebenso */
html[data-tafel="hell"] body[data-ptf="5"] .gbt-knopf{background:#3D3733;color:#F6F2EA;border-color:#3D3733}
html[data-tafel="hell"] .cg-ruf{background:#3D3733;color:#F1ECE3;border-left-color:rgba(246,242,234,.28)}
html[data-tafel="hell"] .cg-ruf svg rect{fill:#3D3733 !important}
@media(hover:hover){html[data-tafel="hell"] .cg-ruf:hover{background:#4a433d;color:#F1ECE3}
  html[data-tafel="hell"] .cg-ruf:hover svg rect{fill:#4a433d !important}}
/* Datumszeilen am Handy */
html[data-tafel="hell"] .cg-dat{border-color:rgba(58,52,47,.18)}
html[data-tafel="hell"] .cg-dat-l{color:rgba(33,31,30,.6)}
html[data-tafel="hell"] .cg-dat-w{color:#211F1E}
/* Auf hellem Kalender tritt er beim Chat nur sanft zurueck */
html[data-tafel="hell"][data-chat="C"].cg-offen .gbt-tafel.da{filter:brightness(.97) saturate(.99)}


/* =====================================================================
   DREI RICHTUNGEN "grosszuegiger und teurer" (Michael 20.09.2026).
   Recherche ueber ChatGPT am 20.09.2026 (Aman/Six Senses/Belmond/Bvlgari/Apple):
   Blasen weglassen, Textspalte 44-56 Zeichen, Innenabstaende 32-48 px,
   Zeilenabstand 1,45-1,5, Trennlinien 1 px bei 12-18 % statt Rahmen,
   Zeitstempel in Mono 10-11 px, keine huepfenden Punkte.
   Schalter ?luxus=L1|L2|L3 (ohne Angabe: die bisherige Fassung).
   ===================================================================== */

/* ---- L1 "Ruhe" -- nichts als Text auf Glas, 440 px, Haus ohne Blase ---- */
@media (min-width:810px){
  html[data-luxus="L1"][data-chat="C"] .gc-fenster{width:440px}
  html[data-luxus="L1"][data-chat="C"]:not(.cg-tafel) .gc-fenster{width:440px}
}
html[data-luxus="L1"] .gc-verlauf{padding:34px 34px 14px;gap:22px}
html[data-luxus="L1"] .gc-perle{background:transparent;box-shadow:none;padding:0;max-width:44ch;
  font-size:19px;line-height:1.55}
html[data-luxus="L1"] .gc-perle.gast{background:transparent;color:#211F1E;padding:0;text-align:right;
  border-right:2px solid #3D3733;padding-right:16px}
html[data-luxus="L1"] .gc-perle:not(.gast)+.gc-perle.gast,
html[data-luxus="L1"] .gc-perle.gast+.gc-perle:not(.gast){margin-top:6px}
html[data-luxus="L1"] .gc-kopf{height:76px;padding:0 34px;border-bottom-color:rgba(58,52,47,.12)}
html[data-luxus="L1"] .gc-titel{font-size:10.5px;letter-spacing:.3em}
html[data-luxus="L1"] .gc-eingabe{padding:16px 34px 18px;border-top-color:rgba(58,52,47,.12)}
html[data-luxus="L1"] .gc-fuss{padding:0 34px 18px}
html[data-luxus="L1"] .gc-feld{background:transparent;border-bottom:1px solid rgba(58,52,47,.3)}
html[data-luxus="L1"] .gc-feld textarea{padding:14px 0}
html[data-luxus="L1"] .gc-senden{background:transparent;color:#3D3733;border:0;width:48px}

/* ---- L2 "Gastgeber" -- 520 px, Haus ohne Blase, Gast als getoente Flaeche ---- */
@media (min-width:810px){
  html[data-luxus="L2"][data-chat="C"] .gc-fenster{width:520px}
  html[data-luxus="L2"][data-chat="C"]:not(.cg-tafel) .gc-fenster{width:520px}
}
html[data-luxus="L2"] .gc-kopf{height:96px;padding:0 40px;border-bottom-color:rgba(58,52,47,.14)}
html[data-luxus="L2"] .gc-kopf svg{width:30px;height:30px}
html[data-luxus="L2"] .gc-titel{font-size:11px;letter-spacing:.3em}
html[data-luxus="L2"] .gc-verlauf{padding:34px 40px 16px;gap:12px}
html[data-luxus="L2"] .gc-perle{background:transparent;box-shadow:none;padding:0;max-width:46ch;
  font-size:21px;line-height:1.48}
/* Beide Seiten gleich gross -- 18 px (Michael 20.09.2026: "Text beide gleich gross") */
html[data-luxus="L2"] .gc-perle{font-size:18px;line-height:1.55}
html[data-luxus="L2"] .gc-perle:not(.gast){max-width:52ch}
html[data-luxus="L2"] .gc-perle.gast{background:rgba(58,52,47,.10);color:#211F1E;padding:16px 20px;max-width:82%}
html[data-luxus="L2"] .gc-perle.gast+.gc-perle:not(.gast),
html[data-luxus="L2"] .gc-perle:not(.gast)+.gc-perle.gast{margin-top:16px}
html[data-luxus="L2"] .gc-eingabe{padding:16px 40px 20px}
html[data-luxus="L2"] .gc-fuss{padding:0 40px 20px}
/* Schrift senkrecht mittig, oben und unten gleich viel Luft (Michael 20.09.2026).
   Das Sendefeld bleibt ueber die ganze Hoehe. */
html[data-luxus="L2"] .gc-feld{min-height:60px;border:1px solid rgba(58,52,47,.28);background:transparent;
  align-items:center}
html[data-luxus="L2"] .gc-feld textarea{padding:12px 20px;align-self:center}
html[data-luxus="L2"] .gc-senden{align-self:stretch}
html[data-luxus="L2"] .gc-senden{background:transparent;color:#3D3733;border-left:1px solid rgba(58,52,47,.18);width:60px}

/* ---- L3 "Buchungsdialog" -- 560 px, Raster aus Linien, Stand des Aufenthalts ---- */
@media (min-width:810px){
  html[data-luxus="L3"][data-chat="C"] .gc-fenster{width:560px}
  html[data-luxus="L3"][data-chat="C"]:not(.cg-tafel) .gc-fenster{width:560px}
}
html[data-luxus="L3"] .gc-kopf{height:76px;padding:0 44px;border-bottom-color:rgba(58,52,47,.18)}
html[data-luxus="L3"] .gc-kopf svg{display:none}
html[data-luxus="L3"] .gc-titel{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-size:26px;letter-spacing:0;
  text-transform:none;color:#211F1E}
html[data-luxus="L3"] .gc-verlauf{padding:30px 44px 16px;gap:26px}
html[data-luxus="L3"] .gc-perle{background:transparent;box-shadow:none;padding:0;max-width:50ch;
  font-size:20px;line-height:1.5}
html[data-luxus="L3"] .gc-perle.gast{background:transparent;color:#6E6862;padding:0;text-align:left;
  font-family:"DM Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.8}
html[data-luxus="L3"] .gc-perle.gast::before{content:"Ihre Frage";display:block;font-size:9.5px;letter-spacing:.24em;
  color:rgba(33,31,30,.45);margin-bottom:6px}
html[data-luxus="L3"] .gc-perle:not(.gast)+.gc-perle.gast{border-top:1px solid rgba(58,52,47,.18);padding-top:26px}
html[data-luxus="L3"] .gc-eingabe{padding:18px 44px 22px;border-top-color:rgba(58,52,47,.18)}
html[data-luxus="L3"] .gc-fuss{padding:0 44px 22px}
html[data-luxus="L3"] .gc-feld{min-height:56px;background:rgba(239,235,228,.7)}
html[data-luxus="L3"] .gc-feld textarea{padding:16px 20px}
html[data-luxus="L3"] .gc-senden{width:48px;height:auto;background:#3D3733;color:#F6F2EA}


/* Schliessen-Kreuz kleiner, damit es sich einordnet (Michael 20.09.2026) */
html[data-chat] .gc-zu svg{width:13px;height:13px}
html[data-chat] .gc-zu{padding:8px}

/* Pflichthinweis in ZWEI Zeilen statt drei; er darf die ganze Breite nutzen
   (Michael 20.09.2026). Die Zeilen kommen aus chat.js mit \n -- deshalb den
   Zeilenumbruch freigeben und selbst setzen. */
html[data-chat] .gc-fuss{white-space:normal}
html[data-chat] .gc-fuss .gc-dslink{margin-left:.5em}

@media (max-width:809px){   /* am Handy sonst drei Zeilen */
  html[data-chat] .gc-fuss{font-size:8px;letter-spacing:.1em}
}

/* Proportionen im Kopf (Michael 20.09.2026): Zeichen 24, Wortmarke 12,5, Kreuz 15 px.
   Das Zeichen ist neu gezeichnet -- runde Augen, kleiner Mund, weiche Ecken; die Augen
   und der Mund sind Loecher und zeigen den Hintergrund. */
html[data-chat] .gc-titel{font-size:12.5px;letter-spacing:.3em}
html[data-chat] .gc-kopf{gap:14px}
html[data-chat] .gc-zu svg{width:15px;height:15px}

/* Dasselbe Zeichen auf den Knoepfen: Maske statt gefuellter Form */
.cg-ruf svg,.buchbar .cg-bar svg{display:none}
.cg-ruf::before,.buchbar .cg-bar::before{content:"";display:block;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("bot-zeichen.svg") center/contain no-repeat;
  mask:url("bot-zeichen.svg") center/contain no-repeat}

/* Am Handy zwei Zeilen: der lange Satz passt dort nicht in eine Zeile */
@media (max-width:809px){
  html[data-chat] .gc-fuss{font-size:8.5px;letter-spacing:.12em}
}

/* =====================================================================
   Feinschliff der Breiten (Michael 20.09.2026: "perfekt responsive,
   luxurioes, elegant, grosszuegig"). Gemessen an 16 Breiten von 1920 bis 320.
   Der Kalender soll NEBEN dem Glas immer sichtbar bleiben -- darum haengt die
   Breite des Glases an der Breite der Tafel, nicht an einer festen Zahl.
   ===================================================================== */
@media (min-width:810px){
  html[data-luxus="L2"][data-chat="C"] .gc-fenster{width:var(--cg-soll,520px)}
  html[data-luxus="L2"][data-chat="C"]:not(.cg-tafel) .gc-fenster{width:var(--cg-soll,520px)}
  /* Klickflaeche des Kreuzes auf 44 px, das Zeichen bleibt 15 px */
  html[data-chat] .gc-zu{width:44px;height:44px;margin-right:-10px}
}
/* Breite Blaetter am Tablet: die Textspalte bleibt schmal, der Rest ist Luft */
@media (max-width:809px){
  html[data-chat] .gc-verlauf > *{max-width:min(100%,52ch)}
  html[data-chat] .gc-perle.gast{margin-left:auto}
  html[data-chat] .gc-zu{width:44px;height:44px;margin-right:-8px}
}

/* Schmales Glas (unter 440 px): der Pflichthinweis wuerde dreizeilig -- eine Stufe
   kleiner, dann bleiben es zwei Zeilen (gemessen an 834, 810, 390, 360 und 320 px). */
html[data-chat] .gc-fenster[data-schmal] .gc-fuss{font-size:8px;letter-spacing:.08em}

/* Die Schalter der Probe stoeren am Handy die Ansicht -- dort nach oben, klein */
@media (max-width:809px){
      }

/* Der Name GEBHARD ist die Wortmarke -- also Oswald 300 mit 0,42 em Laufweite und
   Ausgleich, nie Inter (Markenregel, siehe ~/.claude/marke-gebhard). */
html[data-chat] .gc-titel{font-family:Oswald,Impact,sans-serif;font-weight:300;font-size:14px;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:#211F1E}
@media (max-width:809px){ html[data-chat] .gc-titel{font-size:12px} }


/* =====================================================================
   HANDY: KALENDER IN WEISSEM GLAS, GROSSZUEGIG (Michael 20.09.2026)
   "Der Chatbot ist auch weiss, schau dass die vernuenftig uebereinander liegen.
   Raeum die Typografie des Kalenders auf, grosszuegiger, unten das Datum wirkt
   getrennt." Zwei helle Scheiben duerfen nicht gleich hell uebereinanderliegen
   (Apple: nie helles Glas auf helles Glas): der Chat ist dichter und wirft einen
   Schatten nach oben, der Kalender tritt beim offenen Chat zurueck.
   ===================================================================== */
@media (max-width:1023px){
  /* Ebenen: Kalender = Grund, Chat = Blatt davor */
  html[data-chat] .gc-fenster{z-index:10000}   /* die Tafel steht auf 9991 -- das Blatt muss davor */
  html[data-tafel="hell"][data-chat="C"].cg-offen .gbt-tafel.da{filter:brightness(.9) saturate(.95)}
  html[data-glasfarbe="hell"][data-chat] .gc-fenster{background:rgba(246,243,238,.86);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(53,48,43,.16),
      0 -18px 48px -12px rgba(16,13,11,.42),0 -2px 10px -4px rgba(16,13,11,.2)}

  /* Kopf und Rumpf: mehr Luft, ruhigere Schrift */
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopf{padding-top:28px;padding-bottom:16px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopf h2{font-size:22px;line-height:28px;letter-spacing:-.005em}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-rumpf{padding-bottom:26px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kalkopf{margin-bottom:12px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopfzeile{margin-bottom:8px;padding-bottom:10px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-satz{gap:22px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-zeile{margin-top:12px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-zeile > span{font-size:16px}

  /* Datum unten: zwei Zeilen mit Luft, Beschriftung leise, Wert ruhig und gross genug */
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-fuss{gap:20px;margin-top:26px;padding-top:6px}
  .gbt-zusammen{width:100%}
  .cg-dat{align-items:center;gap:20px;padding:17px 0;border-top:1px solid rgba(58,52,47,.14)}
  .cg-dat:last-child{border-bottom:1px solid rgba(58,52,47,.14)}
  .cg-dat-l{font-size:10.5px;letter-spacing:.18em;line-height:1}
  .cg-dat-w{font-size:15px;letter-spacing:.04em;font-weight:400;line-height:1}
  html[data-tafel="hell"] .cg-dat-l{color:rgba(33,31,30,.58)}
  html[data-tafel="hell"] .cg-dat-w{color:#211F1E}
  /* Platzhalter brach in zwei Zeilen um und war abgeschnitten */
  html[data-eingabe="E1"] .gc-feld textarea::placeholder{font-size:11px;letter-spacing:.14em;line-height:22px;white-space:nowrap}
  /* Keine doppelte Linie: die Datumszeilen bringen ihre eigene mit */
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-fuss:has(.cg-dat){border-top:0;padding-top:0}
  /* Knopf mit dem Chat-Zeichen: mehr Abstand nach oben */
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-knopf{min-height:52px;height:52px}
}

/* Der Chat-Teil im Balken bleibt Glas wie der Balken -- die helle Kalenderfassung darf ihn
   nicht in einen dunklen Vollton drehen (Michael 20.09.2026: dunkler Klotz rechts im Balken) */
html[data-tafel="hell"] .buchbar .cg-bar{background:transparent;color:#F6F2EA;border-left-color:transparent}
@media(hover:hover){html[data-tafel="hell"] .buchbar .cg-bar:hover{background:rgba(246,242,234,.10);color:#F6F2EA}
  html[data-tafel="hell"] .buchbar .cg-bar:hover svg rect{fill:#3D3733 !important}}

/* Handy: Kopf des Chats (Michael 20.09.2026): zuerst groesser, dann "15 % kleiner und in einer
   vertikalen Linie". Zeichen 27, Schriftzug 14,5 px, X 24. Die linke Kante des Zeichens liegt
   auf der Textkante darunter (48 px), die rechte Kante des X auf der rechten Kante des
   Eingabefelds (342 px): Fenster 8 px Rand + 40 px Innenabstand, das X-Feld ist 44 px gross,
   sein Zeichen 24 -- darum rechts 30 statt 40. */
@media (max-width:1023px){
  html[data-chat] .gc-kopf{height:56px;padding:0 28px 0 40px;gap:14px}
  html[data-chat] .gc-kopf::before{width:27px;height:27px}
  html[data-chat] .gc-titel{font-size:14.5px;letter-spacing:.42em}
  html[data-chat] .gc-zu{width:44px;height:44px;margin:0;padding:0;display:grid;place-items:center}
  html[data-chat] .gc-zu svg{width:20.4px;height:20.4px}   /* 15 % kleiner als 24 (Michael 20.09.2026) */
}


/* =====================================================================
   KALENDER-GLAS, ZWEITE FASSUNG (Michael 20.09.2026): "cool, modern, Glaseffekt innen und
   aussen". Aussen: Scheibe mit Lichtkante oben, Schattenkante unten, diagonalem Glanz und
   satterer Unschaerfe. Innen: jedes Feld ist eine eigene duenne Glasplatte (Auswahlfelder,
   Datumsblock, Knopf), Trennlinien als Rille mit heller Unterkante.
   Hoehe: auf hohen Geraeten mehr Luft ZWISCHEN den Zeilen, weniger Rand oben und unten.
   Knopf und Zeichen enden auf denselben Kanten wie Gitter und Datumsblock (eine senkrechte
   Linie links und rechts).
   ===================================================================== */
@media (max-width:1023px){
  /* --- Ausrichtung: nichts ragt ueber die Spalte hinaus --- */
  .cg-knopfpaar{width:100%;min-width:0}
  .cg-knopfpaar .gbt-knopf{min-width:0;padding:0 12px;white-space:nowrap}
  .cg-knopfpaar .cg-ruf-fuss{flex:0 0 56px;padding:0;min-width:0}

  /* --- Aussen: die Scheibe --- */
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-tafel[data-form]{
    background:
      radial-gradient(130% 55% at 18% 0%, rgba(255,255,255,.82), rgba(255,255,255,0) 62%),
      linear-gradient(160deg, rgba(255,255,255,.78) 0%, rgba(246,242,235,.68) 46%, rgba(236,230,221,.74) 100%) !important;   /* Deckung +0,15 bis +0,18: etwas weniger transparent (Michael 20.09.2026) */
    -webkit-backdrop-filter:blur(34px) saturate(1.45) brightness(1.05) !important;
    backdrop-filter:blur(34px) saturate(1.45) brightness(1.05) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),            /* Lichtkante oben */
      inset 1px 0 0 rgba(255,255,255,.5),
      inset 0 -1px 0 rgba(53,48,43,.12),              /* Schattenkante unten */
      inset 0 0 0 1px rgba(255,255,255,.28),
      0 0 0 1px rgba(53,48,43,.13),
      0 36px 80px -28px rgba(16,13,11,.5),
      0 8px 22px -12px rgba(16,13,11,.3) !important}

  /* --- Innen: Rillen statt Striche --- */
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-kopfzeile,
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-zeile{
    border-color:rgba(53,48,43,.13);box-shadow:0 1px 0 rgba(255,255,255,.7)}

  /* Zaehler und Auswahlfelder: duenne Glasplatten */
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-zaehler button,
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-zeile select{
    background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.28));
    border:1px solid rgba(53,48,43,.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(16,13,11,.08);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-zaehler button[disabled]{
    background:rgba(255,255,255,.18);box-shadow:none;border-color:rgba(53,48,43,.10)}

  /* Gewaehlter Zeitraum: Rand dunkles Glas, Zwischentage helle Milchplatte */
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-gitter button.gbt-rand{
    background:linear-gradient(180deg,#4a433d,#35302B);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px -2px rgba(16,13,11,.4)}
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-gitter button.gbt-drin{
    background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(53,48,43,.08)}

  /* Datumsblock: eine eingelassene Milchglasplatte, Kanten = Spaltenkanten */
  html[data-tafel="hell"] .gbt-zusammen{
    background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.22));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 1px rgba(53,48,43,.10);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  html[data-tafel="hell"] .cg-dat{padding-left:12px;padding-right:12px;gap:10px;border-color:rgba(53,48,43,.10)}
  html[data-tafel="hell"] .cg-dat-l{font-size:10px;letter-spacing:.14em}
  html[data-tafel="hell"] .cg-dat-w{font-size:13px;letter-spacing:.02em}
  html[data-tafel="hell"] .cg-dat:first-child{border-top:0}
  html[data-tafel="hell"] .cg-dat:last-child{border-bottom:0}

  /* Knopf und Zeichen: dunkles Glas, oben ein Lichtstrich */
  html[data-tafel="hell"] body[data-ptf="5"] .gbt-knopf,
  html[data-tafel="hell"] .cg-ruf-fuss{
    background:linear-gradient(180deg, rgba(78,70,64,.97), rgba(53,48,43,.97)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -12px rgba(16,13,11,.55)}
  html[data-tafel="hell"] .cg-ruf-fuss{border-left:1px solid rgba(246,242,234,.22)}

  /* Das Chatblatt bekommt denselben Glanz */
  html[data-glasfarbe="hell"][data-chat] .gc-fenster{
    background:
      radial-gradient(130% 40% at 18% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
      rgba(246,243,238,.86)}
}

/* Hohe Geraete: mehr Luft zwischen den Zeilen, weniger Rand oben und unten */
@media (max-width:1023px) and (min-height:760px){
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopf{padding-top:22px;padding-bottom:14px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-rumpf{padding-bottom:20px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-satz{gap:26px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-zeile{margin-top:16px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kalkopf{margin-bottom:16px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-fuss{margin-top:32px;gap:22px}
  .cg-dat{padding-top:19px;padding-bottom:19px}
}
@media (max-width:1023px) and (min-height:900px){
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-satz{gap:32px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-zeile{margin-top:20px}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-fuss{margin-top:38px}
}

/* X im Kalender: 15 % kleiner (16 -> 13,6 px); die Tippflaeche bleibt gross (Michael 20.09.2026) */
.gbt-zu{position:relative}
.gbt-zu svg{width:13.6px !important;height:13.6px !important}
.gbt-zu::after{content:"";position:absolute;inset:-15px}


/* =====================================================================
   BEGRUESSUNG IM KOPF (Michael 20.09.2026, Storyboard von ChatGPT): EIN Bot-Zeichen, groesser
   als vorher, dazu GEBHARD und das X -- Schriftzug und X bewegen sich nicht. Beim Oeffnen
   kommt das Zeichen von links herein (drei feine Spuren), sagt mit drei Strahlen ueber der
   Antenne kurz Hallo, wippt einmal und liegt still. Gesamt 1,5 s, nur Tinte. Danach alle
   26 s ein Mini-Impuls (chat-glas.js). Kein Text in der Animation.
   Zeichen = ::before (Maske, chat-glas.css), Strahlen = .gc-kopf::after, Spuren = .gc-titel::before.
   ===================================================================== */
html[data-chat] .gc-kopf{position:relative;--ik:34px;--pl:40px;--kh:96px}
html[data-chat] .gc-kopf::before{width:var(--ik);height:var(--ik);transform-origin:22% 88%}
html[data-chat] .gc-titel{font-size:17px}
@media (max-width:1023px){
  html[data-chat] .gc-kopf{--ik:36px;--pl:40px;--kh:64px;height:64px;gap:18px}
  html[data-chat] .gc-kopf::before{width:var(--ik);height:var(--ik)}
  html[data-chat] .gc-titel{font-size:18px}
}
html[data-chat] .gc-kopf::after,html[data-chat] .gc-titel::before{content:"";position:absolute;pointer-events:none;
  background-repeat:no-repeat;background-size:100% 100%;opacity:0}
/* Strahlen: mittig ueber der Antenne */
html[data-chat] .gc-kopf::after{width:36px;height:16px;
  left:calc(var(--pl) + var(--ik) / 2 - 18px);top:calc((var(--kh) - var(--ik)) / 2 - 14px);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2016'%20fill='none'%20stroke='%23211F1E'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M18%202v4M9.5%205.2l2.6%203M26.5%205.2l-2.6%203'/%3E%3C/svg%3E");transform-origin:50% 100%}
/* Spuren: links vom Zeichen, mittig */
html[data-chat] .gc-titel::before{width:34px;height:20px;
  left:calc(var(--pl) - 38px);top:calc(var(--kh) / 2 - 10px);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2034%2020'%20fill='none'%20stroke='%23211F1E'%20stroke-width='1.4'%20stroke-linecap='round'%3E%3Cpath%20d='M12%204h20'%20opacity='.5'/%3E%3Cpath%20d='M3%2010h29'/%3E%3Cpath%20d='M14%2016h18'%20opacity='.5'/%3E%3C/svg%3E");transform-origin:100% 50%}

/* Die Bewegungen des Zeichens stehen seit 20.09.2026 in bot-anim.css / bot-anim.js. */

/* Handy: das Chatblatt so breit wie die Bilder (Michael 20.09.2026) -- gleiche Kanten wie
   Balken und Kalender (--satz-links/-rechts, sonst 20 px). Der Innenabstand sinkt von 40 auf 28,
   damit Text, Zeichen und X auf derselben Linie bleiben wie zuvor (x=48). */
@media (max-width:1023px){
  html[data-chat] .gc-fenster{left:var(--satz-links,20px);right:var(--satz-rechts,20px)}
  html[data-chat] .gc-kopf{padding:0 16px 0 28px}
  html[data-luxus="L2"] .gc-verlauf{padding-left:28px;padding-right:28px}
  html[data-luxus="L2"] .gc-eingabe{padding-left:28px;padding-right:28px}
  html[data-chat] .gc-fuss{padding-left:28px;padding-right:28px}
  html[data-chat] .gc-kopf{--pl:28px}
}

/* Handy: Buchungsbalken groesser (Michael 20.09.2026): erst +25 % (70 px), "eine Spur zu gross",
   darum +15 %: Hoehe 56 -> 64 px, Schrift 10,5 -> 12 px, Chat-Zeichen 20 -> 23 px. Das
   Chatblatt ohne Kalender sitzt darueber (64 -> 72 px). */
@media (max-width:1023px){
  .klebeleiste .buchbar{height:64px}
  .klebeleiste .buchbar>*{font-size:12px}
  .buchbar .cg-bar{padding:0 30px}
  .buchbar .cg-bar::before{width:23px;height:23px}
  html[data-chat="C"]:not(.cg-tafel) .gc-fenster{bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
}


/* Handy, Tafel: Daten eintippen (Michael 20.09.2026). Der Block sitzt neben dem Text von buchen.js;
   dieser Text ist hier ausgeblendet. Schrift 16 px, sonst zoomt das iPhone beim Antippen.
   Weniger durchsichtig: Deckung nochmal +0,13 (Glas bleibt an Lichtkante, Unschaerfe und Farbschein erkennbar). */
@media (max-width:1023px){
  .gbt-fuss .gbt-zusammen{display:none}
  .cg-datblock{width:100%;
    background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.45),0 0 0 1px rgba(53,48,43,.12);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .cg-datblock .cg-dat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;min-height:56px;cursor:text;
    border-top:1px solid rgba(53,48,43,.10)}
  .cg-datblock .cg-dat:first-child{border-top:0}
  .cg-dat-in{flex:1 1 auto;min-width:0;width:100%;text-align:right;background:transparent;border:0;border-radius:0;outline:0;
    font:400 16px/24px "DM Mono",ui-monospace,monospace;letter-spacing:.06em;color:#211F1E;padding:8px 0;-webkit-appearance:none;appearance:none}
  .cg-dat-in::placeholder{color:rgba(33,31,30,.34);letter-spacing:.06em}
  .cg-datblock .cg-dat:focus-within{background:rgba(255,255,255,.55);box-shadow:inset 2px 0 0 #3D3733}
  .cg-dat-in[aria-invalid="true"]{color:#8C5A3C}
  .cg-datblock .cg-dat:has(.cg-dat-in[aria-invalid="true"]){box-shadow:inset 2px 0 0 #8C5A3C}
  /* Tastatur offen: auf den sichtbaren Bereich begrenzen, oben festmachen, scrollbar */
  .gbt-tafel.cg-kb{top:calc(var(--cg-vvt,0px) + 8px) !important;transform:translateX(-50%) !important;
    max-height:calc(var(--cg-vvh,100dvh) - 16px) !important;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}


/* =====================================================================
   KALENDER-TAFEL IM SWISS-GRID (Michael 20.09.2026, Vorschau ?swiss=1)
   Design Read: Buchungstafel am Handy fuer Gaeste eines Boutiquehotels, ruhige Swiss-Sprache
   (DESIGN_VARIANCE 3, MOTION 3, DENSITY 3), Milchglas bleibt, alles auf EINEM Raster.
   Raster: 7 Spalten = die 7 Tage der Woche, Spaltenbreite --sz (aus der Fensterbreite, 36 bis 52 px),
   Rand rechts und links gleich; senkrechter Takt 8 px (Zeilen 48 = 6 Einheiten).
   Jede Zeile haengt an denselben sieben Spalten:
     Kalender          7 Spalten, Tage 1 Spalte breit
     Zimmer/Erw./Kind  Beschriftung Spalte 1 bis 4, Zaehler Spalte 5 bis 7 (- Zahl +, je 1 Spalte)
     Kind-Alter        Beschriftung Spalte 1 bis 4, Auswahl Spalte 5 bis 7
     Anreise/Abreise   Beschriftung Spalte 1 bis 3, Datum Spalte 4 bis 7, rechtsbuendig
     Knopf             Spalte 1 bis 6, Chat-Zeichen Spalte 7
   Linien nur an drei Stellen (unter Kopf, ueber Belegung, ueber Datum); sonst traegt Luft. */
@media (max-width:1023px){
  html[data-swiss] .gbt-tafel[data-form="schmal"]{
    --sz:clamp(36px, calc((100vw - 100px) / 7), 52px);
    --zelle:var(--sz) !important;
    --rz:48px;                       /* Zeilenhoehe = 6 Einheiten zu 8 px */
    --linie:rgba(53,48,43,.14);
    --leise:rgba(33,31,30,.56)}
  /* Rand: 7 Spalten mittig, links und rechts gleich */
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kopf,
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-rumpf{
    padding-left:calc((100% - 7 * var(--sz)) / 2);padding-right:calc((100% - 7 * var(--sz)) / 2)}

  /* Kopf: Titel Spalte 1 bis 6, X Spalte 7; Linie darunter */
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kopf{
    display:grid;grid-template-columns:repeat(7,var(--sz));align-items:center;padding-top:32px;padding-bottom:0;min-height:72px;
    border-bottom:0}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kopf h2{grid-column:1 / span 6;margin:0;
    font:500 11px/16px "DM Mono",ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-zu{grid-column:7;justify-self:end;margin-right:0}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-rumpf{padding-bottom:32px}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-rumpf::before{content:"";display:block;height:1px;background:var(--linie);
    box-shadow:0 1px 0 rgba(255,255,255,.7);margin-bottom:8px}

  /* Monatszeile: Pfeil Spalte 1, Name Spalte 2 bis 6, Pfeil Spalte 7 */
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kalkopf{display:grid;grid-template-columns:repeat(7,var(--sz));
    align-items:center;width:auto;min-height:var(--rz);margin:0}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kalkopf button:first-child{grid-column:1;justify-self:start}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kalkopf button:last-child{grid-column:7;justify-self:end}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kalname{grid-column:2 / span 5;text-align:center;
    font:400 12px/16px "DM Mono",ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase}
  /* Wochentage und Tage: eine Spalte je Tag, Tage breit statt quadratisch */
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-gitter{display:grid;grid-template-columns:repeat(7,var(--sz));row-gap:0;width:auto}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-gitter span{height:24px;line-height:24px;font:400 10px/24px "DM Mono",ui-monospace,monospace;
    letter-spacing:.16em;color:var(--leise);text-align:center}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-gitter button{width:var(--sz);height:40px;font:300 17px/40px "DM Mono",ui-monospace,monospace;
    padding:0;letter-spacing:0}

  /* Belegung: Ueberschrift, dann Zeilen auf dem Raster; keine Linien zwischen den Zeilen */
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-satz{gap:0;display:block}
  html[data-swiss] .gbt-tafel[data-form="schmal"] [data-bel]{margin-top:40px;padding-top:0;border-top:0}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kopfzeile{display:block;border:0;box-shadow:none;margin:0;padding:0 0 8px;
    font:400 10px/16px "DM Mono",ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--leise)}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-zeile{display:grid;grid-template-columns:repeat(7,var(--sz));align-items:center;
    min-height:var(--rz);margin:0;padding:0;border:0;box-shadow:none;gap:0}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-zeile > span:first-child{grid-column:1 / span 4;
    font:400 13px/16px "DM Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#211F1E}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-zeile > .gbt-kindname{font-size:11px;letter-spacing:.14em;color:var(--leise)}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-zaehler{grid-column:5 / span 3;display:grid;grid-template-columns:repeat(3,var(--sz));
    align-items:center;justify-items:center;gap:0;margin:0}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-zaehler button{width:var(--sz);height:var(--sz);min-width:0;padding:0}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-zaehler .gbt-wert{width:var(--sz);min-width:0;text-align:center;
    font:400 16px/24px "DM Mono",ui-monospace,monospace}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-zeile select{grid-column:5 / span 3;width:calc(3 * var(--sz));height:var(--sz);flex:none;
    font:400 14px/1 "DM Mono",ui-monospace,monospace}

  /* Fuss: Datum auf dem Raster, Knopf Spalte 1 bis 6 + Zeichen Spalte 7 */
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-fuss{display:block;margin-top:40px;padding:0;border:0}
  html[data-swiss] .cg-datblock{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);width:calc(7 * var(--sz));margin:0 0 32px}
  html[data-swiss] .cg-datblock .cg-dat{display:grid;grid-template-columns:repeat(7,var(--sz));align-items:center;
    min-height:var(--rz);padding:0;gap:0;border:0;box-shadow:none}
  html[data-swiss] .cg-datblock .cg-dat + .cg-dat{border-top:1px solid var(--linie)}
  html[data-swiss] .cg-datblock .cg-dat-l{grid-column:1 / span 3;font:400 10px/16px "DM Mono",ui-monospace,monospace;letter-spacing:.24em;
    text-transform:uppercase;color:var(--leise)}
  html[data-swiss] .cg-datblock .cg-dat-in{grid-column:4 / span 4;text-align:right;padding:0;font:400 16px/24px "DM Mono",ui-monospace,monospace;letter-spacing:.04em}
  html[data-swiss] .cg-datblock .cg-dat:focus-within{background:rgba(255,255,255,.4);box-shadow:none}
  html[data-swiss] .cg-knopfpaar{display:grid;grid-template-columns:repeat(7,var(--sz));width:calc(7 * var(--sz));height:56px}
  html[data-swiss] .cg-knopfpaar .gbt-knopf{grid-column:1 / span 6;width:auto;height:56px;min-height:56px;padding:0}
  html[data-swiss] .cg-knopfpaar .cg-ruf-fuss{grid-column:7;width:var(--sz);flex:none;height:56px;padding:0}
}
@media (max-width:1023px) and (min-height:900px){
  html[data-swiss] .gbt-tafel[data-form="schmal"]{--rz:56px}
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-gitter button{height:44px;line-height:44px}
}

/* Datumsblock leichter (Michael 20.09.2026: "viel zu maechtig"): keine Platte mehr, nur zwei Haarlinien
   und eine feine Trennlinie; Zeilen 48 statt 56 px; Datum in Light. Die Schrift bleibt 16 px, sonst zoomt das iPhone. */
@media (max-width:1023px){
  .cg-datblock{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    border-top:1px solid rgba(53,48,43,.14);border-bottom:1px solid rgba(53,48,43,.14)}
  .cg-datblock .cg-dat{min-height:48px;padding:0;border-top:1px solid rgba(53,48,43,.10)}
  .cg-datblock .cg-dat:first-child{border-top:0}
  .cg-datblock .cg-dat-l{font-size:10px;letter-spacing:.22em;color:rgba(33,31,30,.5)}
  .cg-dat-in{font-weight:300;letter-spacing:.03em;color:#3D3733;padding:0}
  .cg-datblock .cg-dat:focus-within{background:rgba(255,255,255,.4);box-shadow:none}
}

/* Michael 20.09.2026: Titel und X etwas groesser; am Handy bleibt die Belegung zu, bis Anreise und
   Abreise gewaehlt sind (buchen.js setzt .auf), die Kopfzeile "Belegung" oeffnet sie auch von Hand.
   Zeile sonst wie vorher: .gbt-belrumpf ist ausserhalb "schmal" durchsichtig (display:contents). */
body .gbt-tafel[data-form] .gbt-kopf h2{font-size:17px !important;line-height:22px !important;letter-spacing:.2em}
.gbt-zu svg{width:20px !important;height:20px !important}
.gbt-zu::after{inset:-14px}
.gbt-belrumpf{display:contents}
.gbt-tafel[data-form="schmal"] .gbt-belrumpf{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows 320ms cubic-bezier(.23,1,.32,1),opacity 220ms ease}
.gbt-tafel[data-form="schmal"] .gbt-belrumpf > div{min-height:0;overflow:hidden}
.gbt-tafel[data-form="schmal"] [data-bel].auf .gbt-belrumpf{grid-template-rows:1fr;opacity:1}
.gbt-tafel[data-form="schmal"] .gbt-belrumpf > div > .gbt-zeile:first-child{margin-top:0}
.gbt-tafel[data-form="schmal"] [data-bel]:not(.auf){margin-top:-14px}
.gbt-tafel[data-form="schmal"] [data-bel] .gbt-kopfzeile{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.gbt-tafel[data-form="schmal"] [data-bel] .gbt-kopfzeile::after{content:"+";font-size:16px;line-height:1;letter-spacing:0;transition:transform 200ms ease}
.gbt-tafel[data-form="schmal"] [data-bel].auf .gbt-kopfzeile::after{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.gbt-tafel[data-form="schmal"] .gbt-belrumpf,.gbt-kopfzeile::after{transition:none}}
.gbt-tafel[data-form="schmal"] .gbt-belrumpf > div{margin:0 -14px;padding:0 14px}

/* Tablet 810-1023 px: die schmale Tafel bleibt schmal und steht mittig, statt sich auf 900 px zu strecken. */
@media (min-width:810px) and (max-width:1023px){
  .gbt-tafel[data-form="schmal"]{max-width:560px}
}

/* Swiss-Grid, Feinschliff (Michael 20.09.2026): Titel passt in Spalte 1-6, X sitzt auf Spalte 7;
   "BELEGUNG +" mit dem Pluszeichen an der rechten Rasterkante. */
html[data-swiss] body .gbt-tafel[data-form="schmal"] .gbt-kopf h2{font-size:16px !important;letter-spacing:.14em;
  min-width:0;white-space:nowrap;width:auto;max-width:100%}
html[data-swiss] .gbt-tafel[data-form="schmal"] [data-bel] .gbt-kopfzeile{display:flex;justify-content:space-between;align-items:center;
  min-height:var(--rz);padding:0;cursor:pointer}
html[data-swiss] .gbt-tafel[data-form="schmal"] [data-bel]{margin-top:16px}
html[data-swiss] .gbt-tafel[data-form="schmal"] [data-bel] .gbt-kopfzeile::after{font-size:22px;font-weight:300}
html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-kopf{gap:0}

/* Chat-Eingabe: "FRAGEN SIE UNS ETWAS" brach in eine zweite, abgeschnittene Zeile (Michael 20.09.2026).
   Eine Zeile, Schrift so klein, dass der Satz in die Breite passt; sonst Auslassungspunkte. */
html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea{font-size:10px !important;letter-spacing:.12em !important;line-height:24px !important}
html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea::placeholder{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

/* =====================================================================
   BREAKPOINTS DER TAFEL (Michael 20.09.2026): hell nur am Handy (bis 809 px, data-tafel="hell"),
   dunkel auf Tablet (810-1023) und Desktop (ab 1024). Tablet = schmale Tafel im Swiss-Grid, dunkel;
   Desktop = zwei Monate + Belegung, Fuss auf dem Raster: Anreise | Abreise | Knopf.
   ===================================================================== */
/* Handy und Tablet dunkel: die Swiss-Regeln oben sind fuer helles Glas gerechnet, hier die dunklen Farben */
@media (max-width:1023px){
  html[data-tafel="dunkel"] .gbt-tafel[data-form="schmal"]{--linie:rgba(246,242,234,.2);--leise:rgba(246,242,234,.62)}
  html[data-tafel="dunkel"] .gbt-tafel[data-form="schmal"] .gbt-rumpf::before{box-shadow:none}
  html[data-tafel="dunkel"] .gbt-tafel[data-form="schmal"] .gbt-zeile > span:first-child{color:#F6F2EA}
  html[data-tafel="dunkel"] .gbt-tafel[data-form="schmal"] .gbt-zeile > .gbt-kindname{color:var(--leise)}
  html[data-tafel="dunkel"] .cg-datblock{border-color:var(--linie,rgba(246,242,234,.2))}
  html[data-tafel="dunkel"] .cg-datblock .cg-dat{border-top-color:rgba(246,242,234,.2)}
  html[data-tafel="dunkel"] .cg-datblock .cg-dat-l{color:rgba(246,242,234,.62)}
  html[data-tafel="dunkel"] .cg-dat-in{color:#F6F2EA}
  html[data-tafel="dunkel"] .cg-dat-in::placeholder{color:rgba(246,242,234,.4)}
  html[data-tafel="dunkel"] .cg-datblock .cg-dat:focus-within{background:rgba(246,242,234,.08)}
  html[data-tafel="dunkel"] .gbt-tafel[data-form="schmal"] [data-bel] .gbt-kopfzeile{color:var(--leise)}
}
/* Desktop: Fuss auf dem Raster, ohne weisse Felder */
@media (min-width:1024px){
  .gbt-fuss .gbt-zusammen{display:none}
  .gbt-fuss{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;column-gap:32px;align-items:end}
  .cg-datblock{display:contents}
  .cg-datblock .cg-dat{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0 0 10px;border:0;
    border-bottom:1px solid rgba(246,242,234,.28);cursor:text}
  .cg-datblock .cg-dat-l{font:400 10px/16px "DM Mono",ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,242,234,.62)}
  .cg-dat-in{background:transparent;border:0;border-radius:0;outline:0;padding:0;width:100%;text-align:left;
    font:300 22px/32px "DM Mono",ui-monospace,monospace;letter-spacing:.04em;color:#F6F2EA;-webkit-appearance:none;appearance:none}
  .cg-dat-in::placeholder{color:rgba(246,242,234,.38)}
  .cg-datblock .cg-dat:focus-within{border-bottom-color:#F6F2EA}
  .cg-dat-in[aria-invalid="true"]{color:#E0A98A}
  .gbt-fuss .cg-knopfpaar{grid-column:3}
}

/* Tablet 810-1023 px: Klebeleiste mit Datum | Verfuegbarkeit pruefen | Chat-Zeichen als ein Balken, mittig
   und so breit wie sein Inhalt. Vorher schob left:50% + right:57px (Chat) den Balken aus dem Bild (Michael 20.09.2026). */
@media (min-width:810px) and (max-width:1023px){
  .klebeleiste,body.mit-chat .klebeleiste{left:0;right:0;margin-left:auto;margin-right:auto;width:max-content;max-width:calc(100vw - 48px);transform:none}
  .klebeleiste .buchbar .buchtext{padding:20px 34px}
  .klebeleiste .buchbar .cg-bar{padding:0 26px}
}

/* Knopfpaar: "Verfuegbarkeit" und Chat-Zeichen gleich hoch (Michael 20.09.2026: das Zeichen stand 4 px tiefer).
   Beide 56 px, gemeinsame Ober- und Unterkante. */
@media (max-width:1023px){
  html .gbt-tafel .cg-knopfpaar{height:56px;align-items:stretch}
  html body[data-ptf] .gbt-tafel[data-form] .cg-knopfpaar .gbt-knopf,html body[data-ptf] .gbt-tafel[data-form] .cg-knopfpaar .cg-ruf-fuss{height:56px;min-height:56px;box-sizing:border-box}
}

/* Datumsfelder kleiner (Michael 20.09.2026: "Schrift zu gross"). Tablet 14 px, Desktop 16 px; am Handy bleibt 16 px,
   weil iOS unter 16 px beim Antippen zoomt. Groesser = weniger Laufweite (apple-design). */
@media (min-width:810px) and (max-width:1023px){
  html[data-swiss] .cg-datblock .cg-dat-in{font-size:14px !important;line-height:24px !important;letter-spacing:.04em}
}
@media (min-width:1024px){
  .cg-dat-in{font:400 15px/24px "DM Mono",ui-monospace,monospace !important;letter-spacing:.04em !important}
}

/* ---------- Chatfenster, wenn die Tastatur offen ist (Handy) ----------
   Michael 24.09.2026. Die Werte setzt chat-glas.js aus visualViewport.
   --cg-tastatur = Hoehe der Tastatur, --cg-sicht = sichtbare Fensterhoehe.
   Das Blatt endet damit ueber der Tastatur und wird nur so hoch wie das,
   was man wirklich sieht. Der Verlauf steht oben, das Eingabefeld unten. */
@media (max-width:809px){
  html.cg-tastatur[data-chat] .gc-fenster{
    bottom: calc(var(--cg-tastatur, 0px) + 8px);
    height: min(calc(var(--cg-sicht, 100dvh) - 16px), 520px);
    max-height: calc(var(--cg-sicht, 100dvh) - 16px);
  }
  /* Der Verlauf nimmt den Rest, das Eingabefeld bleibt unten stehen.
     Ohne shrink-Sperre schiebt ein langer Verlauf das Feld hinaus. */
  html.cg-tastatur[data-chat] .gc-fenster{ display:flex; flex-direction:column; }
  html.cg-tastatur[data-chat] .gc-verlauf{ flex:1 1 auto; min-height:0; overflow-y:auto; }
  html.cg-tastatur[data-chat] .gc-eingabe{ flex:0 0 auto; }
}

/* ---------- Kalendertafel, wenn die Tastatur offen ist (Handy) ----------
   Michael 24.09.2026: "Chatbot und Kalenderbelegung sollen sich immer dem
   Geraet des Benutzers anpassen, damit es einfach zu benutzen ist."
   Gemessen ohne diese Regel bei 390 x 844 und 336 px Tastatur: die Tafel
   endete bei 744, die Tastatur begann bei 508 -- die unteren 236 px samt
   Knopf lagen dahinter. Jetzt gilt dieselbe Rechnung wie beim Chatfenster:
   Oberkante 8 px unter dem sichtbaren Rand, Unterkante ueber der Tastatur,
   der Inhalt scrollt. */
@media (max-width:809px){
  html.cg-tastatur .gbt-tafel{
    /* Die Tafel steht sonst mittig ueber transform. Mit gesetztem bottom
       zieht die Verschiebung sie aus dem Bild (gemessen: Oberkante -238).
       Darum hier beides abschalten und von unten her rechnen. */
    top: auto !important; transform: none !important;
    bottom: calc(var(--cg-tastatur, 0px) + 8px) !important;
    max-height: calc(var(--cg-sicht, 100dvh) - 16px) !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  /* Der Knopf bleibt sichtbar, auch wenn der Kalender darueber scrollt. */
  html.cg-tastatur .gbt-tafel .gbt-fuss{ position: sticky; bottom: 0;
    background: inherit; padding-bottom: 8px; }
}

/* ---------- Kalender und Linien auf EINER senkrechten Kante (breite Form) ----------
   Michael 24.09.2026: "Schliesse die Linien rechts mit oben im Kalender
   vertikal ab, Swiss Grid."
   Gemessen: in der schmalen Form endeten Raster und Linien gleich (Delta 0).
   In der breiten Form lief die Datumslinie 19 bis 23 px weiter nach rechts
   als die Spalte "So".
   Der Versuch, das Raster auf 100 % der Spalte zu ziehen, machte es
   SCHMALER statt breiter (430 statt 544) -- die Spalte ist nicht der
   Elternrahmen des Rasters. Darum andersherum: die Linien enden dort, wo
   das Raster endet. Die Breite misst chat-glas.js und schreibt sie als
   --cg-kalbreite an die Tafel. */
@media (min-width:1024px){
  html[data-swiss] .gbt-tafel[data-form="breit"] .cg-dat{
    max-width: var(--cg-kalbreite, none)}
}