/* ------------------------------------------------------------------
   Probe: Milchglas fuer die Tafel "Verfuegbarkeit pruefen".
   Gehoert NICHT zur Landingpage, wird nicht ausgerollt.

   Michael 17.09.2026: "Bei dem Milchglaseffekt muss der Hintergrund klar
   bleiben." Also KEIN Schleier mehr -- der dunkle Vorhang hinter der Tafel
   faellt in jeder Fassung weg, die Seite bleibt so hell und so scharf, wie
   sie ist. Unscharf wird nur, was WIRKLICH hinter der Scheibe liegt; genau
   das ist der Milchglaseffekt. Der Schleier bleibt als unsichtbare Flaeche
   bestehen, weil ein Klick daneben die Tafel schliesst.

   Geaendert wird ausschliesslich der Hintergrund. Schrift, Groessen,
   Abstaende, Raster und Bedienung bleiben, wie sie freigegeben sind.
   Ausnahme sind die Negativfassungen: dort dreht sich die Schrift ins
   Helle, sonst waere ein dunkler Grund unlesbar.

   Vorbild ist der Glas-Kopf der Menueleiste (bewegung.css):
   rgba(243,238,231,.72) mit blur(24px) saturate(.7) brightness(1.06).
   ------------------------------------------------------------------ */

/* In jeder Glasfassung: der Grund bleibt unangetastet. */
body[data-ptf] .gbt-schleier{background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

  /* --- 1 Dunst: die Menueleiste 1:1 --- */
  body[data-ptf="1"] .gbt-tafel{background:rgba(243,238,231,.72);
    -webkit-backdrop-filter:blur(24px) saturate(.7) brightness(1.06);
    backdrop-filter:blur(24px) saturate(.7) brightness(1.06)}

  /* --- 2 Milch: dichter, das Foto bleibt als Schemen erkennbar --- */
  body[data-ptf="2"] .gbt-tafel{background:rgba(246,242,234,.85);
    -webkit-backdrop-filter:blur(30px) saturate(.7) brightness(1.06);
    backdrop-filter:blur(30px) saturate(.7) brightness(1.06)}

  /* --- 3 Dicht: fast weiss, nur noch ein Hauch Bewegung dahinter --- */
  body[data-ptf="3"] .gbt-tafel{background:rgba(246,242,234,.93);
    -webkit-backdrop-filter:blur(40px) saturate(.65) brightness(1.08);
    backdrop-filter:blur(40px) saturate(.65) brightness(1.08)}

  /* --- 5 Negativ: exakt das Glas des freigegebenen Buchungsbalkens --- */
  body[data-ptf="5"] .gbt-tafel{background:rgba(53,48,43,.84);
    -webkit-backdrop-filter:blur(30px) saturate(.65);backdrop-filter:blur(30px) saturate(.65)}

  /* --- 6 Negativ dicht: ruhiger, und der sicherste Wert beim Lesen --- */
  body[data-ptf="6"] .gbt-tafel{background:rgba(45,41,37,.92);
    -webkit-backdrop-filter:blur(40px) saturate(.6);backdrop-filter:blur(40px) saturate(.6)}
}
/* Ohne Milchglas-Unterstuetzung bleibt die volle Flaeche stehen. */

/* Ohne Schleier traegt der Rand der Tafel die ganze Abgrenzung. */
body[data-ptf="1"] .gbt-tafel,body[data-ptf="2"] .gbt-tafel,body[data-ptf="3"] .gbt-tafel{
  box-shadow:0 40px 100px -30px rgba(38,34,30,.45),0 0 0 1px rgba(61,55,51,.10),
             inset 0 1px 0 rgba(255,255,255,.5)}

/* ==================================================================
   NEGATIV: die Tafel im selben braunen Glas wie der Buchungsbalken.
   Gemessen gegen den HELLSTEN Grund, der dahinter stehen kann (dort wird
   dunkles Glas am hellsten und die Schrift am schwaechsten), ohne Schleier:
     5  Fliesstext 7.0 · Kleinschrift 4.9
     6  Fliesstext 10.1 · Kleinschrift 7.0        (AA verlangt 4.5)
   ================================================================== */
body[data-ptf="5"], body[data-ptf="6"]{
  --pt-schrift:#F6F2EA;            /* Fliesstext und Ziffern */
  --pt-zweit:#D2CBC1;              /* BELEGUNG, Wochentage, Zusammenfassung */
  --pt-aus:rgba(246,242,234,.34);  /* vergangene, nicht waehlbare Tage */
}

body[data-ptf="5"] .gbt-tafel,
body[data-ptf="6"] .gbt-tafel{color:var(--pt-schrift);
  box-shadow:0 40px 100px -30px rgba(20,17,15,.55),inset 0 1px 0 rgba(246,242,234,.16)}
body[data-ptf="5"] .gbt-zu,        body[data-ptf="6"] .gbt-zu,
body[data-ptf="5"] .gbt-kalkopf button, body[data-ptf="6"] .gbt-kalkopf button{color:var(--pt-schrift)}
body[data-ptf="5"] .gbt-gitter span,   body[data-ptf="6"] .gbt-gitter span,
body[data-ptf="5"] .gbt-kopfzeile,     body[data-ptf="6"] .gbt-kopfzeile,
body[data-ptf="5"] .gbt-zusammen,      body[data-ptf="6"] .gbt-zusammen,
body[data-ptf="5"] .gbt-kindname,      body[data-ptf="6"] .gbt-kindname{color:var(--pt-zweit)}
body[data-ptf="5"] .gbt-kopfzeile,     body[data-ptf="6"] .gbt-kopfzeile,
body[data-ptf="5"] .gbt-zeile,         body[data-ptf="6"] .gbt-zeile,
body[data-ptf="5"] .gbt-fuss,          body[data-ptf="6"] .gbt-fuss{border-color:rgba(246,242,234,.22)}

/* Diese drei tragen eine eigene Farbe und erben nicht vom Tafelrumpf. */
body[data-ptf="5"] .gbt-kopf h2,  body[data-ptf="6"] .gbt-kopf h2,
body[data-ptf="5"] .gbt-kalname,  body[data-ptf="6"] .gbt-kalname,
body[data-ptf="5"] .gbt-zeile > span, body[data-ptf="6"] .gbt-zeile > span{color:var(--pt-schrift)}
body[data-ptf="5"] .gbt-zeile > .gbt-kindname,
body[data-ptf="6"] .gbt-zeile > .gbt-kindname{color:var(--pt-zweit)}

/* Kalender: die gewaehlten Tage drehen sich mit, damit die Auswahl weiter
   die hellste Stelle im Gitter ist -- daran erkennt man sie, nicht an der Farbe. */
body[data-ptf="5"] .gbt-gitter button,        body[data-ptf="6"] .gbt-gitter button{color:var(--pt-schrift)}
body[data-ptf="5"] .gbt-gitter button[disabled],body[data-ptf="6"] .gbt-gitter button[disabled]{color:var(--pt-aus)}
body[data-ptf="5"] .gbt-gitter button.gbt-rand,body[data-ptf="6"] .gbt-gitter button.gbt-rand{background:#F1ECE3;color:#35302B}
body[data-ptf="5"] .gbt-gitter button.gbt-drin,body[data-ptf="6"] .gbt-gitter button.gbt-drin{background:rgba(246,242,234,.20);color:var(--pt-schrift)}

/* Zaehler und Auswahl: Kanten aus Licht statt aus Tinte */
body[data-ptf="5"] .gbt-zaehler button,body[data-ptf="6"] .gbt-zaehler button,
body[data-ptf="5"] .gbt-zeile select, body[data-ptf="6"] .gbt-zeile select{border-color:rgba(246,242,234,.55);color:var(--pt-schrift)}
body[data-ptf="5"] .gbt-zaehler .gbt-wert,body[data-ptf="6"] .gbt-zaehler .gbt-wert{color:var(--pt-schrift)}
/* Die Auswahlliste selbst zeichnet das Betriebssystem -- sie bleibt hell */
body[data-ptf="5"] .gbt-zeile select option,body[data-ptf="6"] .gbt-zeile select option{color:#3D3733;background:#F3EEE7}

/* Der Hauptknopf muss der hellste Fleck der Tafel bleiben: er dreht sich um. */
body[data-ptf="5"] .gbt-knopf,body[data-ptf="6"] .gbt-knopf{background:#F1ECE3;color:#35302B;border-color:#F1ECE3}
body[data-ptf="5"] .gbt-tafel button:focus-visible,body[data-ptf="6"] .gbt-tafel button:focus-visible,
body[data-ptf="5"] .gbt-tafel select:focus-visible,body[data-ptf="6"] .gbt-tafel select:focus-visible,
body[data-ptf="5"] .gbt-tafel a:focus-visible,body[data-ptf="6"] .gbt-tafel a:focus-visible{outline-color:#F6F2EA}

@media(hover:hover){
  body[data-ptf="5"] .gbt-knopf:hover,body[data-ptf="6"] .gbt-knopf:hover{background:#FFFFFF}
  body[data-ptf="5"] .gbt-zaehler button:not([disabled]):hover,
  body[data-ptf="6"] .gbt-zaehler button:not([disabled]):hover{background:#F6F2EA;color:#35302B}
}
@media(hover:hover) and (pointer:fine){
  body[data-ptf="5"] .gbt-gitter button:not([disabled]):not(.gbt-rand):not(.gbt-drin):hover,
  body[data-ptf="6"] .gbt-gitter button:not([disabled]):not(.gbt-rand):not(.gbt-drin):hover{background:rgba(246,242,234,.12)}
}

/* ---- nur die Probe selbst, nichts davon geht spaeter mit ---- */
.pt-umschalter{position:fixed;top:12px;left:12px;z-index:9999;
  display:flex;flex-direction:column;align-items:stretch;background:#3D3733}
.pt-umschalter button{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:0;background:transparent;
  color:rgba(246,242,234,.55);cursor:pointer;text-align:left}
.pt-umschalter button[aria-pressed="true"]{background:#4a433d;color:#F6F2EA}
.pt-merk{position:fixed;top:12px;right:12px;z-index:9999;margin:0;
  max-width:52vw;text-align:right;
  font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#F6F2EA;background:rgba(61,55,51,.9);padding:8px 14px}

/* ==================================================================
   Einwilligungsleiste (Cookies) im selben Glas.
   Michael 17.09.2026: "wie bei Framer, nur in diesem Glaslook."
   Sie folgt der gewaehlten Tafel-Fassung: helle Fassungen bekommen die
   helle Scheibe, die Negativfassungen die braune. Auch hier bleibt der
   Grund klar -- unscharf wird nur, was hinter der Leiste liegt.
   Schrift, Groessen und die gleich grossen Knoepfe bleiben unveraendert:
   Ablehnen darf nicht schwerer zu treffen sein als Zustimmen.
   ================================================================== */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body[data-ptf="1"] .gew,body[data-ptf="2"] .gew,body[data-ptf="3"] .gew{
    background:rgba(251,250,248,.82);border-top-color:rgba(61,55,51,.14);
    -webkit-backdrop-filter:blur(30px) saturate(.7) brightness(1.06);
    backdrop-filter:blur(30px) saturate(.7) brightness(1.06)}
  body[data-ptf="5"] .gew,body[data-ptf="6"] .gew{
    background:rgba(53,48,43,.86);border-top-color:rgba(246,242,234,.20);
    -webkit-backdrop-filter:blur(30px) saturate(.65);backdrop-filter:blur(30px) saturate(.65)}
}
/* Kehrseite der Leiste im Negativ */
body[data-ptf="5"] .gew,body[data-ptf="6"] .gew{color:#F6F2EA;
  box-shadow:0 -8px 32px rgba(20,17,15,.35)}
body[data-ptf="5"] .gew-text a,body[data-ptf="6"] .gew-text a{color:#F6F2EA}
body[data-ptf="5"] .gew-knopf,body[data-ptf="6"] .gew-knopf{
  border-color:rgba(246,242,234,.55);color:#F6F2EA;background:transparent}
body[data-ptf="5"] .gew-knopf.gew-ja,body[data-ptf="6"] .gew-knopf.gew-ja{
  background:#F1ECE3;border-color:#F1ECE3;color:#35302B}

/* ------------------------------------------------------------------
   Einwilligungsleiste, Typografie. Michael 17.09.2026: "Typo viel zu gross,
   kein Stil, wirklich haesslich." Die Leiste lief in 15 px Inter ueber die
   ganze Breite und wurde am Handy zu einem sechszeiligen Block, der lauter
   war als die Seite. Rechtstext bleibt vollstaendig, er tritt nur zurueck:
   eine Kleinzeile als Anlass, der Satz in 13 px, feste Satzbreite.
   Beide Knoepfe bleiben gleich gross und gleich auffaellig (WCAG 2.5.5,
   44 px) -- Ablehnen darf nicht schwerer zu treffen sein als Zustimmen.
   ------------------------------------------------------------------ */
body[data-ptf] .gew{padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
body[data-ptf] .gew-innen{max-width:1200px;gap:14px 28px;align-items:center}
body[data-ptf] .gew-text{font-size:13px;line-height:1.42;max-width:66ch;
  letter-spacing:.004em;opacity:.92}
body[data-ptf] .gew-text a{text-underline-offset:3px;text-decoration-thickness:1px}
body[data-ptf] .gew-knopf{font-size:10.5px;letter-spacing:.14em;
  min-height:44px;padding:0 20px}
body[data-ptf] .gew-widerruf{font-size:9.5px;min-height:36px;padding:0 12px}

@media (max-width:809px){
  /* Am Handy steht der Satz oben, die Knoepfe darunter nebeneinander --
     nicht untereinander, sonst wird die Leiste hoeher als der Inhalt. */
  body[data-ptf] .gew-innen{grid-template-columns:1fr;gap:12px}
  body[data-ptf] .gew-text{font-size:12.5px;line-height:1.4}
  body[data-ptf] .gew-knoepfe{gap:8px}
  body[data-ptf] .gew-knoepfe .gew-knopf{flex:1 1 0;padding:0 8px}
}

/* ---- Cookieleiste in Abhaya Libre (Michael 17.09.2026) ----
   Abhaya Libre ist die Serife des Fussbereichs. Sie laeuft groesser als
   Inter, deshalb steht sie hier auf 14 px statt 12,5 -- gemessen gleich
   hohe Zeile, nicht gleiche Zahl. Die Knoepfe bleiben DM Mono: sie sind
   Bedienung, nicht Text. */
body[data-cookie="abhaya"] .gew-text{font-family:"Abhaya Libre",Georgia,serif;
  font-size:13.5px;line-height:1.34;letter-spacing:.002em}
@media (max-width:809px){
  body[data-cookie="abhaya"] .gew-text{font-size:13.5px;line-height:1.32}
}

.pt-cookie{position:fixed;left:12px;bottom:12px;z-index:9999;
  display:flex;background:#3D3733}
.pt-cookie button{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:0;background:transparent;
  color:rgba(246,242,234,.55);cursor:pointer}
.pt-cookie button[aria-pressed="true"]{background:#4a433d;color:#F6F2EA}

/* ------------------------------------------------------------------
   Quellenzeile unter der Karte. Michael 17.09.2026: "warum ist die
   Schrift so nah". Ursache gemessen: .nachweis traegt margin-top:-40px
   und hebt damit den Abstand der Abschnittsspalte (40 px) wieder auf --
   gemessen blieben 4 px zwischen Knopf und Text. Der negative Wert stammt
   aus einer Zeit, als der Rahmen unten Luft hatte; die hat er nicht mehr.
   ------------------------------------------------------------------ */
body[data-ptf] .nachweis{margin-top:0}

/* ---- "Abhaya Libre duenner" (Michael 17.09.2026) ----
   Abhaya Libre liegt in diesem Projekt nur in 400 und 500 vor -- 400 IST
   schon der duennste Schnitt, ueber das Gewicht geht nichts mehr. Duenner
   wirken laesst sie sich nur ueber den Ton: helles Grau statt fast Weiss
   nimmt der Serife die Fettwirkung auf dunklem Grund. Wer wirklich einen
   duenneren Schnitt will, braucht eine andere Schrift -- Cormorant Garamond
   hat 300 und liegt hier ebenfalls (wie beim Menue am 10.09.2026). */
body[data-cookie="abhaya-leise"] .gew-text{font-family:"Abhaya Libre",Georgia,serif;
  font-weight:400;font-size:13.5px;line-height:1.34;letter-spacing:.002em;opacity:1;color:#CFC8BE}
body[data-cookie="cormorant"] .gew-text{font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:14.5px;line-height:1.28;letter-spacing:.006em;color:#E6E0D6}
@media (max-width:809px){
  body[data-cookie="abhaya-leise"] .gew-text{font-size:13.5px;line-height:1.32}
  body[data-cookie="cormorant"] .gew-text{font-size:14.5px;line-height:1.26}
}

/* ---- DM Mono (Michael 17.09.2026: "probier es auch mal mit DM Mono") ----
   Die technische Stimme des Hauses: Buchungsbalken, Kicker, Masszahlen.
   Ein Rechtshinweis passt dort hinein -- er ist Angabe, nicht Prosa.
   Monospace braucht kleine Grade und Luft zwischen den Zeilen, sonst wird
   der Block zur Mauer: 11,5 px, 1,55 Zeile, wenig Sperrung. Die Knoepfe
   stehen ohnehin in DM Mono -- Text und Bedienung sind dann eine Familie. */
body[data-cookie="mono"] .gew-text{font-family:"DM Mono",ui-monospace,monospace;
  font-weight:300;font-size:11.5px;line-height:1.55;letter-spacing:.02em;
  max-width:62ch;color:#E2DCD2}
@media (max-width:809px){
  body[data-cookie="mono"] .gew-text{font-size:11px;line-height:1.5}
}

/* ---- Bildunterschriften kleiner (Michael 17.09.2026: drei, vier Punkte) ----
   Sie teilten sich die Zeile mit .mikro, .rand dt und .nr -- alle 12 px.
   Hier faellt NUR die Bildunterschrift auf 9 px; die anderen Kleinzeilen
   bleiben, wo sie sind, sonst wandert die halbe Seite mit.
   Die Sperrung geht leicht zurueck: 0,14 em bei 9 px zieht die Versalien
   sonst weiter auseinander, als die Zeile breit ist. */
body[data-ptf] figcaption{font-size:9px;letter-spacing:.12em}
/* Kleinzeilen der Bloecke (FRUEHSTUECK, FREIRAUM, GEOEFFNET ...): im Stil der
   Bildunterschrift, nur etwas groesser (Michael 19.09.2026). Vorher 12 px --
   sie standen lauter als die Bildunterschriften daneben. */
body[data-ptf] .rand dt{font-size:10.5px;letter-spacing:.13em}

/* ------------------------------------------------------------------
   Fliesstext: enger und eine Spur duenner (Michael 17.09.2026).

   Zeilenabstand: 1,66 war fuer 17 px Abhaya reichlich -- der Satz zerfiel
   in Streifen. 1,52 bindet die Zeilen, ohne sie zu stapeln.

   "Duenner" geht NICHT ueber das Gewicht: Abhaya Libre liegt nur in 400
   und 500 vor, 400 ist der duennste Schnitt. Ueber die Farbe geht es auch
   nicht -- #6B635F steht bei Kontrast 5.09 auf der Cremeflaeche, eine Stufe
   heller (#746C67) faellt mit 4.46 schon durch. Wirklich duenner wird es
   nur mit einem Schnitt, den es gibt: Cormorant Garamond 300. Beides steht
   hier nebeneinander, gewaehlt wird per Schalter.
   ------------------------------------------------------------------ */
body[data-ptf] .lauf,
body[data-ptf] .kopf1 p,
body[data-ptf] .kopf2 p{line-height:1.52}

body[data-text="cormorant"] .lauf,
body[data-text="cormorant"] .kopf1 p,
body[data-text="cormorant"] .kopf2 p{font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:19px;line-height:1.46;letter-spacing:.004em}
@media (max-width:809px){
  body[data-text="cormorant"] .lauf,
  body[data-text="cormorant"] .kopf1 p,
  body[data-text="cormorant"] .kopf2 p{font-size:18.5px}
}

.pt-text{position:fixed;right:12px;bottom:12px;z-index:9999;display:flex;background:#3D3733}
.pt-text button{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:0;background:transparent;
  color:rgba(246,242,234,.55);cursor:pointer}
.pt-text button[aria-pressed="true"]{background:#4a433d;color:#F6F2EA}

/* ==================================================================
   Cookie-Tafel ueber dem Buchungsbalken (Michael 18.09.2026, Vorlage Framer).
   Statt einer Leiste ueber die ganze Fensterbreite steht sie als Tafel
   direkt ueber dem Balken: links und rechts buendig mit ihm, 12 px Luft
   dazwischen -- sie gehoert sichtbar zum Balken, klebt aber nicht an ihm.
   Breite und Hoehe des Balkens misst probe-cookie-lage.js, weil der Balken
   seine Breite aus dem Inhalt nimmt (Datum + Knopf) und CSS allein sie
   der Tafel nicht weitergeben kann.
   Glas, Schrift und die gleich grossen Knoepfe bleiben wie gewaehlt.
   ================================================================== */
body[data-ptf] .gew{
  left:50%;right:auto;bottom:var(--gew-unten,92px);
  width:var(--gew-breite,452px);max-width:calc(100vw - 32px);
  padding:22px 26px 24px;border-top:0;
  transform:translateX(-50%) translateY(10px);opacity:0;
  transition:transform .28s cubic-bezier(.23,1,.32,1),opacity .28s cubic-bezier(.23,1,.32,1)}
body[data-ptf] .gew[data-da]{transform:translateX(-50%) translateY(0);opacity:1}
body[data-ptf] .gew-innen{display:flex;flex-direction:column;align-items:stretch;gap:14px;max-width:none}
body[data-ptf] .gew-innen::before{content:"Cookies";display:block;
  font-family:"Abhaya Libre",Georgia,serif;font-size:14px;line-height:1;
  color:rgba(246,242,234,.62);margin-bottom:-2px}
body[data-ptf] .gew-text{max-width:none}
body[data-ptf] .gew-knoepfe{display:flex;gap:10px}
body[data-ptf] .gew-knoepfe .gew-knopf{flex:1 1 0;padding:0 10px}

@media (max-width:809px){
  /* Am Handy liegt der Balken ueber die ganze Breite am unteren Rand --
     die Tafel ebenso, 8 px darueber. */
  body[data-ptf] .gew{left:0;right:0;width:auto;max-width:none;
    bottom:var(--gew-unten,64px);transform:translateY(10px)}
  body[data-ptf] .gew[data-da]{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  body[data-ptf] .gew{transition:opacity .2s ease}
}

/* ---- Cookie-Tafel wie der Fliesstext, eine Spur kleiner (Michael 18.09.2026) ----
   Gemessen am Fliesstext (.lauf): Abhaya Libre 400, 17 px, Zeile 1,52,
   Sperrung normal, Kerning an. Die Tafel uebernimmt genau diese Werte,
   nur 15 px statt 17 -- vorher stand sie mit 1,34 Zeile und einer
   Zusatzsperrung eng und gedraengt, nicht wie derselbe Satz. */
body[data-cookie="abhaya-leise"] .gew-text,
body[data-cookie="abhaya"] .gew-text{font-size:15px;line-height:1.52;
  letter-spacing:normal;word-spacing:0;font-kerning:auto}
body[data-ptf] .gew-innen::before{font-size:15px;letter-spacing:normal}
@media (max-width:809px){
  body[data-cookie="abhaya-leise"] .gew-text,
  body[data-cookie="abhaya"] .gew-text{font-size:15px;line-height:1.5}
}

/* ---- "Datenschutz" wie der Satz, in dem es steht (Michael 18.09.2026) ----
   Der Link stand heller als der Text (#F6F2EA gegen #CFC8BE) und trug die
   Standard-Unterstreichung des Browsers -- zu dick fuer Abhaya in 15 px.
   Jetzt: gleiche Farbe wie der Satz, Unterstreichung in der Dicke, die die
   Schrift selbst vorgibt (from-font), mit etwas Abstand zur Grundlinie,
   damit sie die Unterlaengen nicht schneidet. */
body[data-ptf] .gew .gew-text a{color:inherit;
  text-decoration-line:underline;text-decoration-thickness:from-font;
  text-decoration-color:currentColor;text-underline-offset:.22em;text-decoration-skip-ink:auto}
body[data-ptf] .gew .gew-text a:hover{text-decoration-color:transparent}

/* ==================================================================
   Licht und Schatten auf der Tafel (Michael 18.09.2026): man soll sehen,
   dass die Tafel UEBER der Seite schwebt, und das Glas soll wie Glas
   einmal heller, einmal dunkler sein.
   Der Grund bleibt klar -- kein Schleier. Die Tiefe kommt nur aus der
   Tafel selbst: ein Schatten darunter, ein Lichtverlauf auf der Flaeche
   (oben links heller, unten rechts dunkler) und Kanten, an denen das
   Licht bricht. Der Verlauf liegt als zweite Hintergrundschicht UNTER
   der Schrift, er toent sie nicht.
   ================================================================== */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

  /* --- L1 Weich: sanfter Lichtverlauf, weicher Schatten in zwei Stufen --- */
  html[data-licht="L1"] body[data-ptf="5"] .gbt-tafel{
    background:linear-gradient(145deg,rgba(246,242,234,.11) 0%,rgba(246,242,234,0) 40%,
                               rgba(0,0,0,0) 60%,rgba(0,0,0,.16) 100%),rgba(53,48,43,.84);
    box-shadow:0 50px 120px -30px rgba(20,17,15,.60),0 18px 40px -20px rgba(20,17,15,.45),
               inset 0 1px 0 rgba(246,242,234,.22),inset 1px 0 0 rgba(246,242,234,.08),
               inset 0 -1px 0 rgba(0,0,0,.25)}

  /* --- L2 Kante: das Licht bricht deutlich an den Kanten -- oben und
         links eine helle Haarlinie, unten und rechts eine dunkle. --- */
  html[data-licht="L2"] body[data-ptf="5"] .gbt-tafel{
    background:linear-gradient(145deg,rgba(246,242,234,.13) 0%,rgba(246,242,234,0) 42%,
                               rgba(0,0,0,0) 58%,rgba(0,0,0,.20) 100%),rgba(53,48,43,.84);
    box-shadow:0 60px 140px -30px rgba(20,17,15,.65),0 20px 44px -18px rgba(20,17,15,.50),
               inset 0 1px 0 rgba(246,242,234,.34),inset 1px 0 0 rgba(246,242,234,.16),
               inset 0 -1px 0 rgba(0,0,0,.40),inset -1px 0 0 rgba(0,0,0,.28)}

  /* --- L3 Tief: der kraeftigste Abstand -- ein langer Schlagschatten
         und ein Verlauf, der oben fast hell wird. --- */
  html[data-licht="L3"] body[data-ptf="5"] .gbt-tafel{
    background:linear-gradient(160deg,rgba(246,242,234,.17) 0%,rgba(246,242,234,.03) 35%,
                               rgba(0,0,0,.04) 65%,rgba(0,0,0,.26) 100%),rgba(53,48,43,.84);
    box-shadow:0 80px 160px -30px rgba(15,12,10,.72),0 30px 60px -24px rgba(15,12,10,.55),
               0 2px 6px rgba(15,12,10,.25),
               inset 0 1px 0 rgba(246,242,234,.28),inset 0 -1px 0 rgba(0,0,0,.35)}
}

.pt-licht{position:fixed;right:12px;top:12px;z-index:9999;display:flex;flex-direction:column;background:#3D3733}
.pt-licht button{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 12px;border:0;background:transparent;color:rgba(246,242,234,.55);cursor:pointer;text-align:left}
.pt-licht button[aria-pressed="true"]{background:#4a433d;color:#F6F2EA}

/* Tafel mittig zwischen Menueleiste und Buchungsbalken (Werte aus probe-tafel-lage.js).
   Nur top und max-height -- die Einblendung (translate/scale) bleibt wie sie ist. */
body[data-ptf] .gbt-tafel{top:var(--tafel-mitte,50%);max-height:var(--tafel-max,min(88vh,900px))}

/* Mehr Schatten unter der Tafel (Michael 18.09.2026). Drei Stufen wie ein
   echter Schlagschatten: weit und weich (Abstand), mittel (Koerper) und
   eine enge Kontaktkante direkt darunter, damit die Tafel sichtbar ueber
   der Seite liegt. Lichtverlauf und Kanten von L1 bleiben. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-licht="L1"] body[data-ptf="5"] .gbt-tafel{
    /* "Doch etwas weniger Schatten" (Michael 18.09.2026): etwa halb zwischen
       dem alten L1 und der starken Fassung davor (80/.72, 34/.58, 6/.30) */
    box-shadow:0 64px 140px -30px rgba(15,12,10,.60),
               0 26px 54px -22px rgba(15,12,10,.46),
               0 4px 12px -4px rgba(15,12,10,.22),
               inset 0 1px 0 rgba(246,242,234,.22),inset 1px 0 0 rgba(246,242,234,.08),
               inset 0 -1px 0 rgba(0,0,0,.25)}
}

/* ==================================================================
   Cookie-Tafel in hellem Glas (Michael 18.09.2026: "Mach aus Abbildung
   eins eine helle Glasversion, so wie Abbildung zwei. Das Design von
   Abbildung eins beibehalten.") Gleiche Lage, Schrift, Groessen und
   gleich grosse Knoepfe -- nur die Scheibe wird hell wie die Framer-Leiste,
   die Schrift dunkel, und "Ja, gerne" wird der dunkle Knopf.
   Schalter: body[data-gew="hell"]. Ohne Attribut bleibt die dunkle Tafel.
   ================================================================== */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body[data-ptf][data-gew="hell"] .gew{
    background:rgba(246,243,238,.84);
    -webkit-backdrop-filter:blur(30px) saturate(.7) brightness(1.06);
    backdrop-filter:blur(30px) saturate(.7) brightness(1.06)}
}
/* Ohne Milchglas: volle Flaeche, sonst liest man das Foto durch den Text */
body[data-ptf][data-gew="hell"] .gew{background-color:rgba(246,243,238,.97);color:#35302B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 -8px 32px rgba(20,17,15,.18)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body[data-ptf][data-gew="hell"] .gew{background-color:rgba(246,243,238,.84)}
}
body[data-ptf][data-gew="hell"] .gew-innen::before{color:#6B635F}
body[data-ptf][data-gew="hell"][data-cookie] .gew-text{color:#4A433D}
body[data-ptf][data-gew="hell"] .gew .gew-text a{color:inherit}
body[data-ptf][data-gew="hell"] .gew-knopf{
  background:transparent;border-color:rgba(53,48,43,.72);color:#35302B}
body[data-ptf][data-gew="hell"] .gew-knopf.gew-ja{
  background:#35302B;border-color:#35302B;color:#F6F2EA}
body[data-ptf][data-gew="hell"] .gew-knopf:focus-visible{outline-color:#35302B}
/* Helle Tafel im Design der Framer-Leiste (Michael 18.09.2026: "Uebernimm das
   Design doch von Bild eins"): Knoepfe in Abhaya Libre, normal geschrieben statt
   Versal-Mono, hoeher und ruhiger; Rahmen 1 px in Tinte; feine Haarlinie um die
   Tafel; mehr Luft innen. Die Framer-Leiste hat drei Knoepfe -- "Cookies
   verwalten" kommt nicht dazu, weil es hier nichts zu verwalten gibt (nur Google). */
body[data-ptf][data-gew="hell"] .gew{padding:30px 32px 32px;
  outline:1px solid rgba(53,48,43,.10);outline-offset:-1px}
body[data-ptf][data-gew="hell"] .gew-innen{gap:16px}
body[data-ptf][data-gew="hell"] .gew-knoepfe{gap:12px;margin-top:4px}
body[data-ptf][data-gew="hell"] .gew-knopf{font-family:"Abhaya Libre",Georgia,serif;font-weight:400;
  font-size:16px;letter-spacing:.01em;text-transform:none;min-height:52px;
  border:1px solid #35302B}
body[data-ptf][data-gew="hell"] .gew-knopf:hover{opacity:1;background:rgba(53,48,43,.06)}
body[data-ptf][data-gew="hell"] .gew-knopf.gew-ja:hover{background:#4A433D}
@media (max-width:809px){
  body[data-ptf][data-gew="hell"] .gew{padding:22px 20px 24px}
  body[data-ptf][data-gew="hell"] .gew-knopf{min-height:48px;font-size:15px}
}

/* Cookie-Tafel ruhiger und grosszuegiger (Michael 18.09.2026). Ein Versuch
   mit 600 px Breite wurde verworfen ("sieht chaotisch aus") -- die Tafel
   bleibt so breit wie der Balken. Statt dessen: Schrift einen Punkt kleiner
   (15 -> 14 px), mehr Zeilenabstand, mehr Innenrand und mehr Luft zwischen
   Kleinzeile, Satz und Knoepfen. */
body[data-ptf] .gew{padding:30px 32px 32px}
body[data-ptf] .gew-innen{gap:20px}
body[data-ptf] .gew-innen::before{font-size:14px;margin-bottom:-6px}
body[data-cookie="abhaya-leise"] .gew-text,
body[data-cookie="abhaya"] .gew-text{font-size:14px;line-height:1.64}
body[data-ptf] .gew-knoepfe{gap:12px;margin-top:4px}
@media (max-width:809px){
  body[data-ptf] .gew{padding:24px 20px 24px}
  body[data-ptf] .gew-innen{gap:16px}
  body[data-cookie="abhaya-leise"] .gew-text,
  body[data-cookie="abhaya"] .gew-text{font-size:14px;line-height:1.6}
}

/* Tafel im Ton des Kiesels (Michael 18.09.2026: "Vorschauvariante, dass der
   Kalender die gleiche Farbe wie 'Alle elf Bergbahnen inklusive' hat").
   Kiesel: 92 % #35302B, 36 px Unschaerfe, Saettigung .65, kein Verlauf.
   Die Tafel hatte 84 % mit hellem Verlauf oben links (L1) -- darum wirkte
   sie heller und bunter. Schalter: body[data-tafelfarbe="kiesel"]. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body[data-tafelfarbe="kiesel"][data-ptf="5"] .gbt-tafel{
    background:rgba(53,48,43,.92);
    -webkit-backdrop-filter:blur(36px) saturate(.65);backdrop-filter:blur(36px) saturate(.65)}
}

/* Zwischentage in Beige/Ocker (Michael 18.09.2026: "Farben schoener, in einem
   Beige, Ocker die Zwischentage"). Bisher neutral-grau (20 % Weiss).
   Kontrast der Tagesziffer #F6F2EA gerechnet gegen den ungünstigsten Grund
   (weisses Foto hinter 92 % Glas): Beige 4.5, Ocker 4.9, Honig 4.9 -- alle
   halten AA. Schalter: body[data-zwischen]. */
body[data-ptf="5"][data-zwischen="beige"] .gbt-gitter button.gbt-drin{background:rgba(221,208,189,.32);color:#F6F2EA}
body[data-ptf="5"][data-zwischen="ocker"] .gbt-gitter button.gbt-drin{background:rgba(190,146,82,.45);color:#FBF6EE}
body[data-ptf="5"][data-zwischen="honig"] .gbt-gitter button.gbt-drin{background:rgba(214,178,120,.34);color:#FBF6EE}

/* ==================================================================
   KALENDER AM HANDY: ALLES IN EIN FENSTER (Michael 18.09.2026: "Ich
   moechte, dass das im Fenster Platz hat ... ein Monat, darunter die
   Belegung, dann von wann bis wann und Verfuegbarkeit pruefen ... zentriert,
   oben und unten gleich viel Abstand ... den braunen Knopf brauchen wir
   dann nicht, ich brauche nicht zwei Verfuegbarkeit-Knoepfe").
   Gemessen vorher bei 390 x 700: Inhalt 755 px hoch, sichtbar 616 --
   Monatsname und erste Woche waren weggescrollt.
   Jetzt: Titel kleiner, Tagesfeld 36 px, alles auf EINER mittigen Spalte
   (7 Tagesfelder breit), Abstaende halbiert, Knopf so breit wie die Spalte.
   ================================================================== */
body[data-ptf] .gbt-tafel[data-form="schmal"]{--p:20px;--zelle:36px !important}   /* buchen.js setzt --zelle inline (40) -- !important schlaegt das */
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopf,
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-rumpf{
  padding-left:max(20px, calc((100% - 7 * var(--zelle)) / 2));
  padding-right:max(20px, calc((100% - 7 * var(--zelle)) / 2))}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopf{padding-top:20px;padding-bottom:12px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopf h2{font-size:20px;line-height:26px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-rumpf{padding-bottom:22px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-satz{gap:18px;justify-content:center}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kalkopf{margin-bottom:6px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-gitter span{height:20px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopfzeile{margin-bottom:4px;padding-bottom:6px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-zeile{margin-top:6px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-zeile > span{font-size:15px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-fuss{display:flex;flex-direction:column;align-items:stretch;
  gap:12px;margin-top:18px;padding-top:14px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-zusammen{text-align:center;font-size:14px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-knopf{width:100%;justify-content:center;text-align:center}

/* Ist die Tafel offen, gibt es nur EINEN Verfuegbarkeit-Knopf: der braune
   Balken und das Cookie-Kaestchen treten zurueck. */
body:has(.gbt-tafel.da) .klebeleiste{opacity:0;pointer-events:none;transition:opacity .2s ease}
@media (max-width:809px){
  body:has(.gbt-tafel.da) .gew-widerruf{display:none}
}
/* Cookie-Knopf im Fussbereich (Handy): eine Textzeile wie die Fusslinks */
body .gew-widerruf.gew-widerruf-fuss{position:static;display:inline-block;margin:0;padding:0;min-height:0;
  border:0;background:none;box-shadow:none;font:inherit;color:inherit;text-decoration:none;
  cursor:pointer;justify-self:center;
  text-transform:none;letter-spacing:normal}
/* Am Handy steht die Tafel mitten im GANZEN Fenster -- der Balken ist bei
   offener Tafel weg, es gibt nichts mehr, zwischen dem sie stehen muesste.
   16 px Luft oben und unten, gemessen gegen die sichtbare Hoehe (dvh). */
body[data-ptf] .gbt-tafel[data-form="schmal"]{top:50%;max-height:calc(100dvh - 32px)}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-satz{gap:14px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-fuss{margin-top:14px;padding-top:12px;gap:10px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-knopf{min-height:44px;height:44px}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-rumpf{padding-bottom:18px}
@media (max-height:700px){
  body[data-ptf] .gbt-tafel[data-form="schmal"]{--zelle:34px !important}
  body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopf{padding-top:16px;padding-bottom:8px}
}

/* Handy: Buchungsbalken und Bewertungen auf die Kante der Seite
   (Michael 18.09.2026: "rechts und links rein, zentriert ... eleganter").
   Der Balken lief von Kante zu Kante (0 px), der Text der Seite steht bei
   20 px -- jetzt steht auch der Balken auf 20 px und schwebt 12 px ueber
   dem Rand. Die Cookie-Tafel darueber folgt derselben Breite. */
@media (max-width:809px){
  .klebeleiste{left:20px;right:20px;bottom:calc(12px + env(safe-area-inset-bottom))}
  body[data-ptf] .gew{left:20px;right:20px;width:auto}
  /* Bewertungen: links stand der Text an der Kante, rechts blieb viel Luft.
     Mittig gesetzt stehen beide Spalten gleich weit von ihrem Rand. */
  .bewertungen{gap:36px 16px}
  .bewertungen .bw{align-items:center;text-align:center}
  .bewertungen .bwzahl span{margin-left:6px}
}

/* ==================================================================
   HANDY, RUNDE 2 (Michael 18.09.2026: "eleganter, grosszuegiger ... unter
   der Grafik fast kein Abstand, dann so grosse Abstaende ... rechts und
   links gleich viel Abstand").
   Ein Mass fuer alle Abstaende der Tafel: --luft waechst mit der Fenster-
   hoehe (12 px bei 664, 24 px ab ~820), damit die Tafel auf kleinen
   Handys passt und auf grossen grosszuegig wird. Vorher: 14 px unter dem
   Kalender, aber 10 + 12 + 44 px um den Knopf -- ungleich.
   ================================================================== */
body[data-ptf] .gbt-tafel[data-form="schmal"]{--luft:clamp(12px, calc((100dvh - 600px) / 9), 24px)}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-kopf{padding-top:calc(var(--luft) + 8px);padding-bottom:var(--luft)}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-satz{gap:calc(var(--luft) + 4px)}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-fuss{margin-top:calc(var(--luft) + 4px);padding-top:var(--luft);gap:var(--luft)}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-fuss > *{margin:0}
body[data-ptf] .gbt-tafel[data-form="schmal"] .gbt-rumpf{padding-bottom:calc(var(--luft) + 8px)}

@media (max-width:809px){
  /* Buchungsformular: gleich weit eingerueckt wie der Text der Inklusive-
     Punkte darueber (32 px), links UND rechts -- vorher stand es auf der
     Seitenkante, die Punkte darueber nicht. */
  .buchform{margin-left:32px;margin-right:32px}
  /* Bewertungen: linksbuendig, aber der Block als Ganzes mittig -- vom
     ersten Wort links bis zum Rand gleich weit wie vom letzten Wort rechts */
  .bewertungen{grid-template-columns:repeat(2,max-content);justify-content:center;gap:36px 44px;padding-bottom:40px}
  .bewertungen .bw{align-items:flex-start;text-align:left}
}
/* Handy: Balken und Cookie-Tafel auf den Satzspiegel (Werte aus probe-cookie-lage.js) */
@media (max-width:809px){
  .klebeleiste{left:var(--satz-links,20px);right:var(--satz-rechts,20px)}
  /* Michael 20.09.2026: Balken ueber die ganze Bildbreite, "Verfuegbarkeit pruefen" in der
     optischen Mitte des GANZEN Balkens; das Chat-Zeichen liegt rechts darueber, nimmt keinen Platz. */
  body.mit-chat .klebeleiste{right:var(--satz-rechts,20px)}
  .klebeleiste .buchbar{position:relative}
  .klebeleiste .buchbar .buchtext{padding:20px 0}
  .klebeleiste .buchbar>.trenn:nth-of-type(2){display:none}
  .klebeleiste .buchbar .cg-bar{position:absolute;right:0;top:0;bottom:0}
  body[data-ptf] .gew{left:var(--satz-links,20px);right:var(--satz-rechts,20px)}
}