/* Tafel "Verfügbarkeit prüfen": Kalender und Belegung.
   Werte 1:1 aus dem Framer-Bauteil GebhardVerfuegbarkeitsbalken.tsx
   (ausgabe/schriften-selbst/neu, Stand 13.09.2026), das seinerseits den
   freigegebenen Entwurf entwuerfe/startseite/haus.html (.tafel) nachbaut.
   Radius 0 überall (Regel 26). */

/* Eigene Namen gbt-rand/gbt-drin: .rand gibt es in stil.css schon (Seitenspalte), am Handy
   wurden die gewaehlten Tage dadurch riesig (gemessen 15.09.2026 bei 390 px). */

/* Datum in der Klebeleiste ist ein Knopf, sieht aber aus wie vorher */
.buchbar button.datum{background:none;border:0;color:inherit;cursor:pointer;margin:0}
.buchbar button.datum:focus-visible,.buchbar .buchtext:focus-visible{outline:2px solid currentColor;outline-offset:-4px}

.gbt-schleier{position:fixed;inset:0;z-index:9990;background:rgba(38,34,30,.42);opacity:0;
  transition:opacity 200ms cubic-bezier(.32,.72,0,1);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.gbt-schleier.da{opacity:1;transition:opacity 280ms cubic-bezier(.32,.72,0,1)}
.gbt-tafel{position:fixed;z-index:9991;left:50%;top:50%;
  transform:translate(-50%,-50%) translateY(8px) scale(.97);
  opacity:0;transition:opacity 200ms cubic-bezier(.32,.72,0,1),transform 200ms cubic-bezier(.32,.72,0,1);
  width:min(1040px,calc(100vw - 48px));max-height:min(88vh,900px);
  background:#F3EEE7;border-radius:0;
  box-shadow:0 40px 100px -30px rgba(38,34,30,.5),0 8px 24px -10px rgba(38,34,30,.25);
  display:flex;flex-direction:column;font-family:'Abhaya Libre',Georgia,serif;color:#3D3733}
.gbt-tafel.da{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1);
  transition:opacity 280ms cubic-bezier(.32,.72,0,1),transform 280ms cubic-bezier(.32,.72,0,1)}
.gbt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:72px 72px 40px;flex:0 0 auto}
.gbt-kopf h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:28px;line-height:1.2;margin:0;letter-spacing:-.005em}
.gbt-zu{background:none;border:0;padding:0;cursor:pointer;color:#3D3733;line-height:0}
.gbt-zu svg{width:18px;height:18px}
.gbt-rumpf{padding:0 72px 72px;overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.gbt-satz{display:grid;grid-template-columns:1fr 320px;gap:72px;align-items:start}
.gbt-zweimonate{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.gbt-kalkopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;min-height:28px}
.gbt-kalkopf button{background:none;border:0;border-radius:0;cursor:pointer;font-size:18px;line-height:1;color:#3D3733;padding:4px 8px}
.gbt-kalkopf button[disabled]{opacity:.25;pointer-events:none}
.gbt-kalname{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px}
.gbt-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.gbt-gitter span{font-family:'DM Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:#6E6862;text-align:center;padding-bottom:6px}
.gbt-gitter button{aspect-ratio:1;border:0;border-radius:0;background:none;cursor:pointer;font-family:'DM Mono',ui-monospace,monospace;font-size:15px;color:#3D3733;padding:0}
.gbt-gitter button[disabled]{color:#DDD5C9;pointer-events:none}
.gbt-gitter button.gbt-rand{background:#3A342F;color:#F1ECE3}
.gbt-gitter button.gbt-drin{background:#DDD0BD} /* Michael 15.09.2026: B1, etwas brauner (vorher #E7E0D5) */
.gbt-kopfzeile{font-family:'DM Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6E6862;
  padding-bottom:6px;margin-bottom:24px;border-bottom:1px solid #DDD5C9;display:block}
.gbt-zeile{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px}
.gbt-zeile > span{font-size:16px;color:#3D3733}
.gbt-kopfzeile + .gbt-zeile{margin-top:0}
.gbt-zaehler{display:flex;align-items:center;gap:14px}
.gbt-zaehler button{width:36px;height:36px;border:1px solid #3D3733;border-radius:0;background:none;color:#3D3733;cursor:pointer;
  font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
@media(hover:hover){.gbt-zaehler button:not([disabled]):hover{background:#3D3733;color:#F6F2EA}}
.gbt-zaehler button[disabled]{opacity:.3;pointer-events:none}
.gbt-zaehler .gbt-wert{font-family:'DM Mono',ui-monospace,monospace;font-size:15px;min-width:28px;text-align:center;color:#3D3733}
.gbt-zeile select{font-family:'DM Mono',ui-monospace,monospace;font-size:14px;color:#3D3733;background:none;border:1px solid #DDD5C9;border-radius:0;padding:6px 8px}
.gbt-zeile > .gbt-kindname{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;color:#6E6862}
.gbt-fuss{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid #DDD5C9}
.gbt-zusammen{font-size:16px;color:#6B635F}
.gbt-knopf{display:inline-flex;align-items:center;justify-content:center;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid #3D3733;border-radius:0;padding:16px 32px;background:#3D3733;color:#F6F2EA;
  cursor:pointer;text-decoration:none;white-space:nowrap;flex:0 0 auto}
@media(hover:hover){.gbt-knopf:hover{background:#4a433d}}
.gbt-knopf,.gbt-zaehler button,.gbt-gitter button,.gbt-zu{transition:transform 160ms cubic-bezier(0.23,1,0.32,1),background-color 150ms ease,color 150ms ease}
.gbt-knopf:active{transform:scale(.97)}
.gbt-zaehler button:active:not([disabled]){transform:scale(.94)}
.gbt-gitter button:active:not([disabled]){transform:scale(.92)}
.gbt-zu:active{transform:scale(.9)}
@media(hover:hover) and (pointer:fine){.gbt-gitter button:not([disabled]):not(.gbt-rand):not(.gbt-drin):hover{background:#E7E0D5}}
@media (max-width:760px){
  .gbt-tafel{width:calc(100vw - 32px)}
  .gbt-kopf{padding:40px 32px 24px}
  .gbt-kopf h2{font-size:25px}
  .gbt-rumpf{padding:0 32px 40px}
  .gbt-satz{grid-template-columns:1fr;gap:40px}
  .gbt-zweimonate{grid-template-columns:1fr}
  .gbt-fuss{display:block}
  .gbt-zusammen{display:block;margin-bottom:24px}
  .gbt-knopf{display:flex;width:100%;box-sizing:border-box}
}
@media (prefers-reduced-motion: reduce){
  .gbt-tafel{transform:translate(-50%,-50%) !important;transition:opacity 200ms ease !important}
  .gbt-schleier{transition:opacity 200ms ease !important}
  .gbt-knopf:active,.gbt-zaehler button:active,.gbt-gitter button:active,.gbt-zu:active{transform:none}
}

/* hidden muss gegen display:flex gewinnen */
.gbt-tafel[hidden],.gbt-schleier[hidden]{display:none}

/* Angleich an Framer (gemessen 15.09.2026 im Chrome, 1440 px): die Seite erbt
   line-height 1.66 vom body, Framer steht auf normal -- die Tafel war dadurch 12 px hoeher.
   Pfeile und Plus/Minus laufen bei Framer in der Browser-Grundschrift sans-serif. */
.gbt-tafel{line-height:normal}
.gbt-kalkopf button,.gbt-zaehler button,.gbt-zu{font-family:sans-serif}

/* ---- Klebeleiste: Einblenden nach Emil Kowalski (Werte aus GebhardVerfuegbarkeitsbalken.tsx) ----
   Heben (transform + opacity, 300 ms), danach von rechts nach links aufdecken (clip-path, 460 ms,
   300 ms versetzt). Nur transform, opacity und clip-path: nichts davon loest Layout aus.
   Die Schrift wird nie skaliert, sie steht am endgueltigen Platz und wird nur freigelegt.
   Gehen ist schneller als Kommen (200 ms, ohne Versatz): das System reagiert nur noch. */
.klebeleiste{transform:translateX(-50%) translateY(130%);opacity:0;
  clip-path:inset(0 0 0 calc(100% - 64px));pointer-events:none;
  transition:transform 200ms cubic-bezier(0.23,1,0.32,1),opacity 200ms cubic-bezier(0.23,1,0.32,1),clip-path 200ms cubic-bezier(0.23,1,0.32,1);
  will-change:transform,opacity,clip-path}
.klebeleiste.da{transform:translateX(-50%) translateY(0);opacity:1;clip-path:inset(0 0 0 0);pointer-events:auto;
  transition:transform 300ms cubic-bezier(0.23,1,0.32,1),opacity 300ms cubic-bezier(0.23,1,0.32,1),clip-path 460ms cubic-bezier(0.23,1,0.32,1) 300ms}
.buchbar .buchtext{transition:background-color 150ms ease,transform 160ms cubic-bezier(0.23,1,0.32,1)}
.buchbar .buchtext:active,.buchbar button.datum:active{transform:scale(.97)}
@media (max-width:809px){
  .klebeleiste{transform:translateY(130%)}
  .klebeleiste.da{transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  /* weniger Bewegung heisst nicht keine Rueckmeldung: die Deckkraft bleibt */
  .klebeleiste,.klebeleiste.da{transform:translateX(-50%);clip-path:none;transition:opacity 200ms ease}
  .buchbar .buchtext:active,.buchbar button.datum:active{transform:none}
}
@media (prefers-reduced-motion: reduce) and (max-width:809px){
  .klebeleiste,.klebeleiste.da{transform:none}
}

/* Michael 15.09.2026: das Alter-Feld steht auf denselben Kanten wie Minus und Plus darueber.
   Zaehler = 36 + 14 + 28 + 14 + 36 = 128 px, gleiche Hoehe 36 px. */
.gbt-zeile select{width:128px;height:36px;box-sizing:border-box;flex:0 0 128px}
/* Eigener Fokusrahmen statt des runden, farbigen Browser-Rings: rechtwinklig (Regel 26), in Tinte */
.gbt-tafel button:focus-visible,.gbt-tafel select:focus-visible,.gbt-tafel a:focus-visible{outline:1px solid #3D3733;outline-offset:2px}
.gbt-tafel button:focus:not(:focus-visible),.gbt-tafel select:focus:not(:focus-visible){outline:none}

/* Die Tafel selbst haelt den Fokus nach Mausbedienung -- ohne sichtbaren Rahmen. Kein Orange, nirgends. */
.gbt-tafel:focus{outline:none}
.gbt-tafel button,.gbt-tafel select,.gbt-tafel a{-webkit-tap-highlight-color:transparent}

/* Michael 15.09.2026: Ziffern Z1 -- DM Mono 300 statt 400 (Tage und Zaehlerwerte). */
.gbt-gitter button,.gbt-zaehler .gbt-wert{font-weight:300}

/* ---- Ausbalanciert nach dem Original (entwuerfe/startseite/haus.html .tafel), Michael 15.09.2026 ----
   Ziffern 14 px wie im Original, Zaehlerwert passend dazu. Die Belegung ist hoechstens 300 px breit
   (Original) und gibt bis 240 nach, BEVOR der Kalender schrumpft. Monatsnamen brechen nie um. */
.gbt-gitter button{font-size:14px}
.gbt-zaehler .gbt-wert{font-size:14px}
.gbt-kalname{white-space:nowrap}
/* Belegung gibt zuerst nach: sie ist 300 px, solange der Kalender 620 px behaelt, sonst bis 240 */
.gbt-satz{grid-template-columns:minmax(0,1fr) clamp(240px,calc(100% - 620px),300px);gap:clamp(48px,5vw,72px)}
/* mittel: zwei Monate ueber die ganze Breite, Belegung darunter und kompakt */
.gbt-tafel[data-form="mittel"] .gbt-kopf{padding:48px 48px 32px}
.gbt-tafel[data-form="mittel"] .gbt-rumpf{padding:0 48px 48px}
.gbt-tafel[data-form="mittel"] .gbt-satz{grid-template-columns:minmax(0,1fr);gap:40px}
.gbt-tafel[data-form="mittel"] .gbt-zweimonate{gap:40px}
.gbt-tafel[data-form="mittel"] [data-bel]{max-width:360px}
/* schmal: ein Monat, Belegung darunter (Werte aus dem Handy-Block oben) */
.gbt-tafel[data-form="schmal"] .gbt-satz{grid-template-columns:minmax(0,1fr);gap:40px}
.gbt-tafel[data-form="schmal"] [data-bel]{max-width:none}
/* Gemessen 15.09.2026 ueber zehn Breiten: bei 700 px stapelte der Handy-Block die zwei Monate
   (Tagesfeld 80 px), bei 600 und 1000 px wurden die Tage riesig. Deshalb: mittel immer zweispaltig
   und hoechstens 640 px breit, schmal hoechstens 360 px -- die Tagesfelder bleiben zwischen 30 und 46 px. */
.gbt-tafel[data-form="mittel"] .gbt-zweimonate{grid-template-columns:1fr 1fr;max-width:640px}
.gbt-tafel[data-form="schmal"] [data-kal],.gbt-tafel[data-form="schmal"] [data-bel]{max-width:360px}

/* ==== Mathematische Anordnung, Michael 15.09.2026 ("ich moechte eine mathematische Anordnung") ====
   Einheit 8 px, Zwischenschritt 4 px. Aus buchen.js kommen drei Masse:
     --p      Innenrand der Tafel (64 / 48 / 24)
     --zelle  Tagesfeld = Plus/Minus = Hoehe einer Belegungszeile (40 / 36 / 32)
     --g      Abstand zwischen den Spalten (48 / 32)
   Ein Monat ist genau 7 Zellen breit, die Belegung genau so breit wie ein Monat.
   Schriftstufen: 10 / 12 / 14 / 16 / 20 / 25 px, Zeilenhoehen 16 / 16 / 20 / 24 / 24 / 32. */
.gbt-tafel{--p:64px;--zelle:40px;--g:48px}
.gbt-tafel[data-form] .gbt-kopf{padding:var(--p) var(--p) 32px;align-items:center}
.gbt-tafel[data-form] .gbt-rumpf{padding:0 var(--p) var(--p)}
.gbt-tafel[data-form] .gbt-kopf h2{font-size:25px;line-height:32px}
.gbt-zu svg{width:16px;height:16px}

.gbt-tafel[data-form] .gbt-satz{grid-template-columns:max-content calc(7 * var(--zelle));gap:var(--g);justify-content:space-between}
.gbt-tafel[data-form] .gbt-zweimonate{grid-template-columns:repeat(2,max-content);gap:var(--g);max-width:none}
.gbt-tafel[data-form="mittel"] .gbt-satz,.gbt-tafel[data-form="schmal"] .gbt-satz{grid-template-columns:max-content;gap:40px;justify-content:start}
.gbt-tafel[data-form="schmal"] .gbt-zweimonate{grid-template-columns:max-content}
.gbt-tafel[data-form] [data-kal],.gbt-tafel[data-form] [data-bel]{max-width:none}
.gbt-tafel[data-form] [data-bel]{width:calc(7 * var(--zelle))}

.gbt-kalkopf{width:calc(7 * var(--zelle));min-height:32px;margin-bottom:16px}
.gbt-kalkopf button{width:var(--zelle);height:32px;padding:0;display:flex;align-items:center;justify-content:center}
.gbt-kalname{font-size:20px;line-height:24px}
.gbt-gitter{grid-template-columns:repeat(7,var(--zelle));gap:0}
.gbt-gitter span{height:24px;line-height:16px;padding:0;font-size:10px}
.gbt-gitter button{width:var(--zelle);height:var(--zelle);aspect-ratio:auto;font-size:14px;line-height:20px}

.gbt-kopfzeile{font-size:10px;line-height:16px;padding-bottom:8px;margin-bottom:16px}
.gbt-zeile{margin-top:16px;min-height:var(--zelle);gap:16px}
.gbt-kopfzeile + .gbt-zeile{margin-top:0}
.gbt-zeile > span{font-size:16px;line-height:24px}
.gbt-zeile > .gbt-kindname{font-size:12px;line-height:16px}
.gbt-zaehler{gap:8px}
.gbt-zaehler button{width:var(--zelle);height:var(--zelle)}
.gbt-zaehler .gbt-wert{min-width:var(--zelle);font-size:14px;line-height:20px}
/* Alter-Feld exakt so breit wie Minus + Wert + Plus: 3 Zellen + 2 x 8 px */
.gbt-zeile select{width:calc(3 * var(--zelle) + 16px);height:var(--zelle);flex:0 0 auto}

.gbt-fuss{margin-top:48px;padding-top:24px}
.gbt-zusammen{font-size:16px;line-height:24px}
.gbt-knopf{height:48px;padding:0 32px;font-size:12px;line-height:16px}
@media (max-width:760px){.gbt-knopf{width:100%}}

/* ---- Buchungsformular: Felder oeffnen die Tafel, kein Browser-Kalender (Michael 15.09.2026) ----
   Aussehen wie die bisherigen Eingabefelder: Inter 14 px, Linie unten, Radius 0.
   "Ohne Umrahmung": kein Fokusrahmen. Nur das Feld, in das man klickt, wird beige hinterlegt.
   Das Beige ragt 12 px ueber die Textkante hinaus, damit der Text auf der Kante der Beschriftung bleibt. */
.buchform .feldknopf{display:block;width:calc(100% + 24px);margin:0 -12px;padding:8px 12px;min-height:40px;
  border:0;border-bottom:1px solid #3A342F;border-radius:0;background:transparent;color:#3A342F;
  font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:24px;text-align:left;cursor:pointer;
  transition:background-color 150ms ease}
.buchform input[type="text"]{width:calc(100% + 24px);margin:0 -12px;padding:8px 12px;transition:background-color 150ms ease}
.buchform .feldknopf:focus,.buchform .feldknopf:focus-visible,.buchform input:focus,.buchform input:focus-visible{outline:none}
.buchform .feldknopf.aktiv,.buchform .feldknopf:focus-visible,.buchform input[type="text"]:focus{background:#E7E0D5}
@media (hover:hover) and (pointer:fine){.buchform .feldknopf:hover{background:#EDE7DD}}

/* ---- Zimmeranzahl in der Belegung (Michael 16.09.2026, Entwurf A) ----
   Die Zimmerzeile zaehlt wie Erwachsene und Kinder und ist durch eine feine Linie
   vom ersten Zimmerblock getrennt. Ueberschriften erscheinen erst ab zwei Zimmern. */
.gbt-zimmerzeile{border-bottom:1px solid #DDD5C9;padding-bottom:16px}
.gbt-blockkopf{font-family:'DM Mono',ui-monospace,monospace;font-size:10px;line-height:16px;letter-spacing:.14em;
  text-transform:uppercase;color:#6E6862;margin:24px 0 8px}