/* === /schriften/schriften.css === */
/* Selbst gehostet, damit beim Laden keine Verbindung zu Google entsteht (DSGVO). */

/* --- Abhaya Libre 400 --- */
@font-face { font-family:'Abhaya Libre'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/AbhayaLibre-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Abhaya Libre'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/AbhayaLibre-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Cormorant Garamond 300 --- */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/CormorantGaramond-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/CormorantGaramond-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- DM Mono 300 / 400 --- */
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/DMMono-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/DMMono-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/DMMono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/DMMono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Inter 300 / 400 --- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/Inter-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/Inter-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/Inter-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/Inter-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Oswald 300 --- */
@font-face { font-family:'Oswald'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/Oswald-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/Oswald-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Jost 300 (nur DE/EN-Umschalter) --- */
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display: swap; src:url(/schriften/Jost-300-1.woff2) format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display: swap; src:url(/schriften/Jost-300-2.woff2) format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display: swap; src:url(/schriften/Jost-300-3.woff2) format('woff2'); }

/* --- Oswald 200 (Michael 24.09.2026: "Die Schrift etwas duenner") ---
   ACHTUNG: der erste Versuch holte nur EINEN Teilschnitt (7,7 KB). Darin
   fehlte unter anderem das A, es fiel auf Impact zurueck und stand fett
   zwischen duennen Buchstaben. Jetzt beide Latin-Schnitte, 12,2 und
   11,6 KB, selbst gehostet wie alle anderen. */
@font-face { font-family:'Oswald'; font-style:normal; font-weight:200; font-display: swap;
  src:url(/schriften/Oswald-200-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:200; font-display: swap;
  src:url(/schriften/Oswald-200-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- EB Garamond 400 (25.09.2026 selbst gehostet: kinderkarte.html holte sie bis dahin von Google) --- */

/* --- Inter 500 (25.09.2026 nachgezogen, gleiche Quelle) --- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display: swap;
  src:url(/schriften/Inter-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display: swap;
  src:url(/schriften/Inter-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- ERSATZSCHRIFT MIT PASSENDEN MASSEN (26.09.2026) ---
   Bis dahin stand im Schriftsatz "Cormorant Garamond", Georgia, serif. Georgia ist
   GEMESSEN 14 Prozent breiter: derselbe Satz misst bei 100 px Schriftgrad 1503 px
   in Georgia und 1316 px in Cormorant. Am Handy brauchte die Ueberschrift der
   Galerie deshalb eine Zeile mehr, bis die echte Schrift da war, und sprang dann
   um gut 220 px nach oben. CLS 0,144 bei einer Schwelle von 0,1, gemessen um 90 ms,
   also lange bevor ein Bild geladen ist.

   size-adjust rechnet Georgia auf die Breite von Cormorant herunter. Der Platz
   stimmt damit von der ersten Malung an, und beim Schriftwechsel springt nichts.
   Der Wert 87.56 ist der gemessene Faktor, nicht geschaetzt. */
@font-face {
  font-family: 'Cormorant Ersatz';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 87.56%;
  font-display: swap;
}

/* Dasselbe fuer die Fliesstextschrift. Abhaya Libre ist GEMESSEN 8,3 Prozent
   schmaler als Georgia (1895 zu 2066 px bei 100 px Schriftgrad). Der Vorspann der
   Galerie brauchte deshalb bis zum Schriftwechsel eine Zeile mehr und schob den
   ganzen Rest der Seite um 113 px. Zusammen mit der Ueberschrift ergab das CLS
   0,133 bei einer Schwelle von 0,1 -- gemessen nach 47 ms, ohne dass ein Bild
   im Spiel war. */
@font-face {
  font-family: 'Abhaya Ersatz';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 91.72%;
  font-display: swap;
}

/* --- Inter 400 und 500 (Angebotskarte im Chat, Michael 21.10.2026) --- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/Inter-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/Inter-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display: swap;
  src:url(/schriften/Inter-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display: swap;
  src:url(/schriften/Inter-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* === /lp-stil.css === */
/* Nachbau der Framer-Landingpage Wandern. Werte aus referenz/aufbau-desktop.txt:
   Desktop 1435 px, Seitenrand 40, Grund #F3EEE7, Tinte #3D3733.
   Schriften: Cormorant Garamond 300 (Titel), Abhaya Libre (Text), Inter 12 px
   Versalien .14em (Beschriftungen), DM Mono 500 (Seitenmenue), Oswald 300 (Wortmarke). */
:root{
  --grund:#F3EEE7; --tinte:#3D3733; --grau:#6E6862; --text:#6B635F; --text2:#5C554F;
  --linie:#DDD5C9; --dunkel:#35302B; --creme:#F1ECE3;
  --rand:40px; --breite:1435px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif;font-size:16px;line-height:1.66}
img{display:block;width:100%;height:auto;object-fit:cover;background:#E6DFD4}
a{color:inherit}
h1,h2,h3{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;margin:0;color:var(--tinte)}
p{margin:0}
button,input,select{font:inherit;border-radius:0}

.mikro,figcaption,.rand dt,.nr{font-family:Inter,system-ui,sans-serif;font-size:12px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.lauf{font-size:17px;line-height:1.66;color:var(--text)}
figure{margin:0;display:flex;flex-direction:column;gap:8px}

/* Kopf: Wortmarke nach Markenregel (Oswald 300, Laufweite .42em mit Ausgleich), darunter das Seitenmenue */
.kopf{position:sticky;top:0;z-index:20;background:var(--grund);border-bottom:1px solid #E6DFD4}
.wortmarke{display:block;text-align:center;text-decoration:none;font-family:Oswald,Impact,sans-serif;font-weight:300;
  font-size:28px;letter-spacing:.42em;text-indent:.42em;padding:40px 0 22px;color:var(--tinte)}
/* Michael 16.09.2026: Signet im Kopf wieder weg -- oben steht NUR die Typo.
   Sie bleibt bei 28 px (vorher 24), das war die Bitte "etwas groesser". */
.seitenmenue{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;padding:10px var(--rand) 36px}
.seitenmenue a{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:12px;line-height:20px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:#706b64} /* Michael 15.09.2026 "Menue heller"; 17.09.2026 von #8a857d auf #706b64 abgedunkelt -- #8a857d ergab auf #f3eee7 nur Kontrast 3.17, Lighthouse verlangt 4.5. Jetzt 4.58, so hell wie erlaubt */
.seitenmenue a:hover{text-decoration:underline;text-underline-offset:6px}

main,.fuss{max-width:var(--breite);margin:0 auto}
.abschnitt{padding:128px var(--rand) 0;display:flex;flex-direction:column;gap:64px;scroll-margin-top:170px}
/* Titelblock nach dem Auftakt, von Michael am 15.09.2026 als optimal freigegeben:
   Kleinzeile, 38 px, Titel 30 px, 38 px, Fliesstext. Gilt fuer JEDEN Abschnittskopf. */
.kopf1{display:flex;flex-direction:column;gap:38px}
/* Runde 3, Michael: Kleinzeile naeher an den Titel und kleiner, naeher am Framer-Original (dort 12 px, 8 px Abstand) */
.kopf1 .mikro{font-size:11px}
.kopf1 .mikro+h2{margin-top:-24px} /* 38 - 24 = 14 px */
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2{font-size:30px;line-height:1.28;letter-spacing:-.005em}
.kopf2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.kopf2 h2{max-width:260px} /* Framer bricht den Titel auf drei Zeilen (Canvas-Foto Zimmer und Preise) */

/* Auftakt: zwei Reihen wie im Framer-Raster */
.auftakt{padding:48px var(--rand) 0;scroll-margin-top:170px}
.auftakt-raster{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:40px}
.auftakt .a1{align-self:end}
.auftakt .a2{align-self:end;width:80%}
.auftakt .a3{width:75%;justify-self:end}
.wort{align-self:end;display:flex;flex-direction:column;gap:38px;padding-bottom:40px}
h1,.titel2{font-size:30px;line-height:1.28;letter-spacing:-.005em;font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300}
.wort .lauf{max-width:520px}

/* Zimmer: waagrechtes Gleis mit Laeufer */
.gleis{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:-16px}
.gleis::-webkit-scrollbar{display:none}
.karte{flex:0 0 475px;scroll-snap-align:start;display:flex;flex-direction:column;gap:16px}
.kzeile{display:flex;justify-content:space-between;align-items:end;padding-top:16px;gap:12px}
.kzeile h3{font-size:17px;line-height:1.2}
.kmass{font-size:16px;color:var(--grau);line-height:1.2;white-space:nowrap}
.klinie{height:1px;background:var(--linie)}
.kpreis{font-size:16px;font-weight:500;line-height:1.2}
.ktext{font-size:17px;color:var(--text)}
.gleissteuerung{display:flex;align-items:center;gap:34px;margin-top:-24px}
.gleissteuerung button{background:none;border:0;padding:8px 0;cursor:pointer;font-family:Inter,system-ui,sans-serif;font-weight:300;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--tinte);display:flex;align-items:center;gap:12px}
.gleissteuerung button:disabled{color:#B4AAA0;cursor:default}
.gleissteuerung .pfeil{font-size:26px;line-height:1;letter-spacing:0}
.spur{flex:1;height:1px;background:#E6DFD4;position:relative}
.laeufer{position:absolute;left:0;top:0;height:1px;background:var(--tinte);width:30%;transition:left .2s,width .2s}

/* Bildreihen (Galerie und Kapitel): Breiten in Prozent wie im Framer-Raster */
.bildreihe{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.bildreihe figure{flex:0 0 var(--anteil)}
.abschnitt>.bildreihe+.bildreihe{margin-top:-40px}

/* Kapitel Essen, Wellness, Sommer */
.leitsatz{font-size:17px;line-height:1.66;color:var(--tinte);max-width:640px;margin-top:-26px} /* 64 - 26 = 38 px wie im Auftakt */
.leitsatz.serif{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-size:18px;line-height:1.55}
.satz{display:grid;grid-template-columns:4fr 4fr 3fr;gap:48px;align-items:start} /* Randspalte weiter rechts, Michael 15.09.2026 */
.rand{margin:0;display:flex;flex-direction:column;gap:28px}
.rand dt{margin-bottom:2px}
.rand dd{margin:0;font-size:15px;line-height:1.4;color:var(--tinte)}

/* Wanderkarte. karte-stil.css erwartet eigene Namen; sie stehen NUR am Kartenfeld,
   damit sie die Farben der Seite nicht ueberschreiben (wie in lp-haus.html). */
.kartenfeld{--creme:#F3EEE7;--hell:#FBFAF8;--braun:#332E2A;--text:#5C564F;--leise:#6E6862;--linie:#DDD5C9;
  --akzent:#8C5A3C;--rund:0;--a1:8px;--a2:12px;--a3:18px;
  position:relative;border:1px solid var(--linie);background:#FBFAF8;height:clamp(420px,62vh,660px)}
.kartenfeld .wk-kartenfeld{position:absolute;inset:0}
.kartenwarte{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:32px}
.nachweis{font-family:Inter,system-ui,sans-serif;font-size:11px;line-height:1.5;color:#8a857d;margin-top:-40px}

/* Was im Preis steckt */
.inklusive{padding-top:200px;gap:80px}
.inkraster{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:40px}
.ip{display:flex;gap:16px;border-top:1px solid var(--linie);padding-top:16px}
.ip h3{font-size:20px;line-height:24px;margin-bottom:8px}
.ip p{font-size:17px;color:var(--text2)}

/* Buchen und Bewertungen */
.buchen{padding-top:200px;gap:128px;scroll-margin-top:170px} /* Michael 15.09.2026: mehr Luft zwischen Knopf und Bewertungen (vorher 72) */
.buchform{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 40px;align-items:end}
.buchform label{display:flex;flex-direction:column;gap:14px}
.buchform .mikro{color:#6E6A64}
.buchform input,.buchform select{border:0;border-bottom:1px solid #3A342F;background:transparent;color:#3A342F;font-family:Inter,system-ui,sans-serif;font-size:14px;padding:8px 0;outline-offset:4px;appearance:none;-webkit-appearance:none;min-height:40px}
.knopf{grid-column:1/-1;height:51px;border:0;background:var(--dunkel);color:var(--creme);font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.knopf:hover{background:#4a433d}
/* Michael 18.09.2026: der grosse Knopf soll dieselbe Farbe haben wie der
   Buchungsbalken. Beide sind dasselbe Angebot -- also bekommen sie dasselbe
   Material, nicht nur einen nachgemischten Ton: Fassung C, braunes Milchglas.
   Ueber der Cremeflaeche ergibt das gemessen #534E49, genau den Ton des Balkens. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .knopf{background:rgba(53,48,43,.84);box-shadow:inset 0 1px 0 rgba(246,242,234,.16);
    -webkit-backdrop-filter:blur(30px) saturate(.65);backdrop-filter:blur(30px) saturate(.65)}
  .knopf:hover{background:rgba(53,48,43,.92)}
}
.bewertungen{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:60px}
.bw{display:flex;flex-direction:column;gap:6px}
.bwzahl{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;font-size:36px;line-height:1}
.bwzahl span{font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-left:8px;vertical-align:middle}
.mikro.hell{color:#8a857d}

/* Fussbereich: eine Schrift (Abhaya Libre), CLAUDE.md Regel 24 */
.fuss{padding:120px var(--rand) 140px;font-size:14px;line-height:1.7;color:var(--tinte)}
.fussraster{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;text-align:center} /* Michael 16.09.2026: Fuss zentriert */
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}
.signet{display:block;width:88px;height:88px;margin:96px auto 32px}
.copy{text-align:center;color:#8a857d}

/* Klebeleiste unten, Gestalt wie der freigegebene Buchungsbalken (Regel 27) */
.klebeleiste{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30}
/* Fassung C freigegeben 17.09.2026: braunes Milchglas statt voller Flaeche.
   84 % Deckung ist die dichteste der drei Proben -- gemessener Kontrast 7.2
   gegen die hellste Stelle unter dem Balken (AA verlangt 4.5). */
/* Leiste: 25 % weniger durchsichtig (.84 -> .88) und mehr Milchglas (Michael 19.09.2026:
   "nicht dunkler, mehr Milchglas") -- staerkere Unschaerfe, dazu brightness, damit
   das hoehere Alpha den Ton nicht abdunkelt. */
.buchbar{display:flex;align-items:stretch;background:#3D3733;color:#F6F2EA;height:64px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .buchbar{background:rgba(53,48,43,.88);box-shadow:inset 0 1px 0 rgba(246,242,234,.16);
    -webkit-backdrop-filter:blur(44px) saturate(.65) brightness(1.12);backdrop-filter:blur(44px) saturate(.65) brightness(1.12)}
}
.buchbar>*{display:flex;align-items:center;font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.buchbar .datum{padding:20px 34px;font-variant-numeric:tabular-nums}
.buchbar .trenn{width:1px;margin:14px 0;background:rgba(246,242,234,.28)}
.buchbar .buchtext{padding:20px 40px;border:0;background:transparent;color:inherit;cursor:pointer}
.buchbar .buchtext:hover{background:rgba(246,242,234,.10)}

/* Tablet */
@media (max-width:1199px){
  .satz{grid-template-columns:1fr 1fr}
  .rand{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:24px 32px} /* Runde 3: vier Spalten ueber die ganze Textbreite, nichts rutscht */
  .buchform{grid-template-columns:1fr 1fr}
  .bewertungen{grid-template-columns:1fr 1fr;row-gap:40px}
  .karte{flex-basis:calc((100% - 24px)/2)}
}
/* Mobil */
@media (max-width:809px){
  :root{--rand:20px}
  .kopf{position:static} /* zwei Menuezeilen klebend verdecken am Handy ein Sechstel des Bildschirms */
  .wortmarke{font-size:22px;padding:28px 0 14px}
  .seitenmenue{gap:6px 18px;padding-bottom:24px}
  .seitenmenue a{letter-spacing:.18em;font-size:11px}
  .abschnitt{padding-top:88px;gap:40px}
  .auftakt{padding-top:24px}
  .auftakt-raster{grid-template-columns:1fr;row-gap:24px}
  .auftakt .a2,.auftakt .a3{width:100%}
  .wort{padding:48px 0 0;gap:28px}
  h1,.titel2{font-size:28px}
  .kopf2,.satz,.inkraster,.buchform,.fussraster{grid-template-columns:1fr}
  .kopf2{gap:20px}
  .rand{grid-template-columns:1fr;gap:20px}
  .karte{flex-basis:86%}
  .gleissteuerung{margin-top:-8px;gap:18px}
  .bildreihe{flex-direction:column;gap:24px}
  .bildreihe figure{flex-basis:auto;width:100%;
    margin-inline:calc(var(--rand) * -1)}          /* randlos am Handy: 350 -> 390 px Bildbreite (28.09.2026) */
  .auftakt-bild .bildkasten{margin-inline:calc(var(--rand) * -1)}
  .abschnitt>.bildreihe+.bildreihe{margin-top:-16px}
  .inklusive,.buchen{padding-top:112px}
  .bewertungen{grid-template-columns:1fr 1fr;gap:32px 20px}
  .buchen{gap:88px}
  .fuss{padding:80px var(--rand) 120px}
  .klebeleiste{left:0;right:0;bottom:0;transform:none}
  .buchbar{height:56px}
  .buchbar .datum,.buchbar .trenn{display:none}
  .buchbar .buchtext{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.laeufer{transition:none}}

/* ---- Anker: die Schrift landet 24 px unter der Menueleiste (Michael 18.09.2026) ----
   Vorher gemessen: 123 px Luft unter der Leiste, am Handy 258 px vom oberen
   Rand -- die Bilder darunter sah man erst nach dem Scrollen.
   Rechnung: scroll-margin-top = Hoehe der klebenden Leiste + 24 - Innenabstand
   oben des Abschnitts. Die Leiste ist gemessen 175 px hoch (1000 bis 1920 px
   Breite). Am Handy klebt sie nicht, dort zaehlt nur der Fensterrand.
   Negative Werte sind gewollt: der Innenabstand des Abschnitts ist groesser
   als die Luft, die unter der Leiste bleiben soll. */
.abschnitt{scroll-margin-top:71px}           /* 175 + 24 - 128 */
.buchen{scroll-margin-top:-1px}               /* 175 + 24 - 200 */
.inklusive{scroll-margin-top:-1px}            /* 175 + 24 - 200, gemessen 96 statt 24 */
@media (max-width:809px){
  .abschnitt{scroll-margin-top:-64px}         /* 0 + 24 - 88 */
  .inklusive,.buchen{scroll-margin-top:-88px} /* 0 + 24 - 112 */
}

/* Das Standbild der Karte liegt HINTER dem Rahmen und verschwindet, sobald die Karte
   steht. Ohne diese Zeile wirkt sein "hidden" nicht: img{display:block} weiter oben
   ueberschreibt die Vorgabe des Browsers, und Standbild und Karte stehen doppelt
   untereinander (gemessen 20.09.2026: Feld 558 px hoch, Inhalt 1516 px). */
#kartenersatz[hidden]{display:none}

/* Die Kartenkachel hatte eine feste Hoehe clamp(420px,62vh,660px), der Rahmen darin aber 738 px
   (touren-einbetten.js misst ihn): das naechste Bild ("Frau mit Hut") schob sich ueber die
   Tourenliste und schnitt sie ab -- bei JEDER Breite (Michael 20.09.2026, gemessen bei 430 px:
   Kachel 578, Rahmen 738). Jetzt bestimmt der Rahmen die Hoehe. */
.kartenfeld{flex:0 0 auto;height:auto}

/* ── Laufendes Logoband (29.09.2026) ──────────────────────────────────────
   Form nach Michaels Vorlage: ein ruhig laufendes Band grauer Zeichen.
   Inhalt sind die vier Portale, auf denen das Haus wirklich bewertet ist.

   Das Fenster schneidet ab, die Bahn laeuft. seite.js verdoppelt den Inhalt,
   deshalb ist eine Schleife ueber -50 % nahtlos. Wer "Bewegung reduzieren"
   eingestellt hat, sieht das Band stehen -- ohne Verlust, es ist keine
   Information in der Bewegung.                                              */
/* Gleicher Abstand oben und unten: 104 px. Vorher kam der Abstand nach unten
   allein aus dem naechsten Abschnitt und sah dadurch groesser aus, weil dort
   die Kleinzeile erst nach ihrem eigenen Zeilenkasten beginnt (29.09.2026). */
.logoband{max-width:var(--breite);margin:0 auto;padding:104px var(--rand) 104px}
.logoband + .abschnitt{padding-top:0}
/* Der Zimmerabschnitt ist zwei Ebenen tief: aussen der Rahmen, innen noch ein
   .abschnitt mit eigenen 104 px. Gemessen 208 px unter dem Band statt 104. */
.logoband + .abschnitt > .abschnitt:first-child{padding-top:0}
.logofenster{overflow:hidden}
/* 29.09.2026, Michael mit beiden Baendern nebeneinander: die Zeichen sollen
   so stehen wie in der Presseleiste -- groesser, weiter auseinander, dunkler.
   26 px bei 0,45 Deckkraft las sich wie ein Fussnotenband; 40 px bei 0,7
   traegt die Zeile. Der Lauf wird dafuer langsamer (48 -> 64 s), sonst wirkt
   ein groesseres Zeichen hektisch. */
.logobahn{display:flex;align-items:center;gap:184px;width:max-content;
  animation:logolauf 116s linear infinite}
.logobahn .logo{flex:0 0 auto;display:flex;align-items:center}
/* 29.09.2026, Michael: "Etwas groesser und ohne Hintergrund. Transparent."
   Der graue Kasten kam nicht aus den Dateien -- die sind zu 92 Prozent
   durchsichtig -- sondern aus lp-stil.css Zeile 13: img{background:#E6DFD4}
   ist der Platzhalter fuers Nachladen der Fotos. Bei freigestellten Logos
   bleibt er als Rechteck stehen, weil sie ihn nie verdecken. */
.logobahn img{height:92px;width:auto;opacity:.85;filter:grayscale(1);
  background:transparent;object-fit:contain}
@keyframes logolauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){
  .logoband:hover .logobahn{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .logobahn{animation:none;justify-content:space-between;width:100%}
}
@media (max-width:809px){
  .logoband{padding-top:64px}
  .logobahn{gap:96px}
  .logobahn img{height:66px}
}

/* === /tafel.css === */
/* 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','Abhaya Ersatz',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','Cormorant Ersatz',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','Cormorant Ersatz',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:11px;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:11px;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:1023px){
  .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}
/* Monatsname 16 px wie die Zeilen der Belegung (Michael 18.09.2026: "September
   ist etwas zu gross"). 20 px stand gleichauf mit dem Tafeltitel. */
.gbt-kalname{font-size:16px;line-height:24px}
.gbt-kalkopf button{font-size:16px}
.gbt-gitter{grid-template-columns:repeat(7,var(--zelle));gap:0}
.gbt-gitter span{height:24px;line-height:16px;padding:0;font-size:11px}
.gbt-gitter button{width:var(--zelle);height:var(--zelle);aspect-ratio:auto;font-size:14px;line-height:20px}

.gbt-kopfzeile{font-size:11px;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. */
/* 29.09.2026, Michael: "Striche oben verkuerzen, damit sie in einer Linie mit
   dem Balken sind." Die Felder ragten durch width:100%+24px und margin:0 -12px
   zwolf Pixel ueber den Knopf hinaus -- gemessen Felder 31 bis 1410, Knopf 43
   bis 1398. Jetzt sitzt die Linie auf derselben Kante wie der Balken; die
   beige Flaeche beim Tippen bekommt ihre 12 px ueber die Innenabstaende. */
.buchform .feldknopf{display:block;width:100%;margin:0;padding:8px 0;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:100%;margin:0;padding:8px 0;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:11px;line-height:16px;letter-spacing:.14em;
  text-transform:uppercase;color:#6E6862;margin:24px 0 8px}

/* Tage des Folgemonats fuellen die letzte Zeile (nur bei einem Monat, also am
   Handy): wer am 30. September anreist, tippt die Abreise gleich daneben an,
   ohne den Pfeil zu finden. Leiser, damit klar bleibt, welcher Monat gilt. */
.gbt-gitter button.gbt-folge:not(.gbt-rand):not(.gbt-drin){opacity:.7}

/* === /tafel-mono.css === */
/* Tafel "Verfuegbarkeit pruefen" ganz in DM Mono -- Fassung M1, freigegeben von
   Michael am 19.09.2026 ("M1 ist gut"; Titel T2 "Mono + Lot" davor gewaehlt).
   Eine Stimme: Titel, Monate, Belegung und Zeitraum in gesperrten Versalien,
   11 px, wie Wochentage und Knopf.
   Das Lot vor dem Titel hat Michael am selben Tag wieder entfernt.
   Die Kleinzeilen im Kiesel ziehen mit (heller, geglaettet), INKLUSIVE bleibt
   Cormorant. [data-form] hebt die Spezifitaet ueber die Regeln in tafel.css
   und probe-tafel-milchglas.css (sonst gewinnt dort 20/25 px). Am Handy setzen
   Regeln mit [data-form="schmal"] Groessen noch spezifischer (gemessen: Titel 20,
   Zeilen 15, Zeitraum 14 px) -- darum Groesse und Zeilenhoehe mit !important. */
body .gbt-tafel[data-form] .gbt-kopf h2{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;font-size:11px !important;
  line-height:16px !important;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:14px;
  -webkit-font-smoothing:antialiased}
/* Das Lot vor dem Titel ist wieder weg (Michael 19.09.2026: "bitte das Lot entfernen"). */
body .gbt-tafel[data-form] :is(.gbt-kalname,.gbt-zeile > span,.gbt-zusammen,.gbt-blockkopf){
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px !important;line-height:16px !important;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;-webkit-font-smoothing:antialiased}
body .gbt-tafel[data-form] select{font-family:"DM Mono",ui-monospace,monospace}
html[data-fein][data-typo="K1"][data-zeilen="Z1"] body .ssc .ssc-n{font-weight:400;color:#F6F2EA;-webkit-font-smoothing:antialiased}

/* === /probe-tafel-milchglas.css === */
/* ------------------------------------------------------------------
   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:11px;
  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:11px;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:11px;letter-spacing:.14em;
  min-height:44px;padding:0 20px}
body[data-ptf] .gew-widerruf{font-size:11px;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:11px;
  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:11px;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:11px;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:11px;
  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:11px;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)}
}

/* === /tafel-fein.css === */
/* Tafel eins, verfeinert -- EINGEBAUT am 30.09.2026.
   Michael: "Tafel eins auf jeden Fall besser. Wir nehmen Tafel eins und
   verfeinern es noch. Mache es schoener und etwas spektakulaer." Danach, nach
   der Vorschau: "das wird die neue neu.hotel-gebhard.at Seite."

   Dieses Blatt MUSS nach tafel.css, tafel-mono.css und probe-tafel-milchglas.css
   geladen werden -- es korrigiert Werte, die dort stehen.

   Tafel eins ist die laufende Fassung in DM Mono (Fassung M1, von Michael am
   19.09.2026 freigegeben). Die Schrift wird NICHT angetastet -- weder Familie
   noch Grad. Verfeinert wird alles, was darum herum passiert.

   WAS GEAENDERT WIRD, und warum:

   1. EINE SPERRUNG STATT DREI. Gemessen an der laufenden Tafel: Titel, Monat
      und Zeilen stehen auf 0,22 em, die Wochentage auf 0,10 em, der Knopf auf
      0,14 em. Drei Werte auf demselben Grad (11 px) sind ein Versehen, kein
      Entwurf. Alles auf 0,22 em; nur die Tageszahlen bleiben ungesperrt, weil
      Ziffern sonst nicht mehr fluchten.

   2. HAARLINIE UNTER DEM TITEL. Der Kopf steht heute frei ueber dem Inhalt.
      Eine 1-px-Linie ueber die volle Breite bindet ihn an die Tafel, ohne ein
      einziges Zeichen zu aendern.

   3. DER ZEITRAUM WAECHST. Bisher erscheint die gewaehlte Spanne schlagartig.
      Jetzt faehrt sie von links auf (clip-path, 260 ms, eigene Kurve): man
      sieht, dass man eine Strecke gewaehlt hat, nicht vier einzelne Tage.

   4. DER MONATSWECHSEL GLEITET. Das Gitter kommt beim Blaettern 10 px von
      unten und blendet auf (200 ms, ease-out). Ohne das springt der ganze
      Monat hart um.

   5. TAGE ANTWORTEN AUF DIE MAUS. Heute passiert beim Ueberfahren nichts.
      Jetzt legt sich eine feine Kontur um die Zelle -- keine Fuellung, die
      mit der Auswahlfarbe verwechselt werden koennte.

   6. DER GEWAEHLTE TAG SETZT SICH. Beim Klick kurz auf 94 %% und zurueck
      (160 ms): die Tafel bestaetigt den Griff, wie ein Knopf, der nachgibt.

   7. FOKUS IST SICHTBAR. Wer mit der Tastatur geht, sieht bisher nichts.
      Jetzt ein 1-px-Rahmen mit 2 px Abstand -- dieselbe Sprache wie Punkt 5.

   Alle Bewegungen halten sich an prefers-reduced-motion. Keine dauert laenger
   als 260 ms; nichts laeuft von selbst.                                      */

/* ---------- 1. Eine Sperrung ---------- */
/* !important, weil spaetere Blaetter (probe-tafel-milchglas.css, tafel.css in
   @media-Bloecken) eigene Werte setzen: gemessen standen Monat und Knopf auf
   0,12 bzw. 0,16 em, obwohl tafel-mono.css 0,22 em schreibt. */
body .gbt-tafel[data-form] .gbt-gitter span,
body .gbt-tafel[data-form] .gbt-kalname,
body .gbt-tafel[data-form] .gbt-zeile > span,
body .gbt-tafel[data-form] .gbt-kopfzeile,
body .gbt-tafel[data-form] .gbt-knopf {
  letter-spacing: .22em !important;
}
/* Die Sperrung schiebt die Zeile nach links; der Einzug holt sie zurueck in
   die optische Mitte. Ohne ihn steht jedes gesperrte Wort zu weit links. */
body .gbt-tafel[data-form] .gbt-gitter span { text-indent: .22em; }
body .gbt-tafel[data-form] .gbt-knopf { text-indent: .22em; }

/* ---------- 2. Haarlinie unter dem Titel ---------- */
.gbt-tafel[data-form] .gbt-kopf {
  border-bottom: 1px solid rgba(61,55,51,.14);
  margin-bottom: 32px;
  padding-bottom: 24px;
}

/* ---------- 3. Der Zeitraum waechst von links ---------- */
.gbt-gitter button.gbt-drin {
  animation: gbt-spanne 260ms cubic-bezier(.32,.72,0,1) both;
}
@keyframes gbt-spanne {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---------- 4. Monatswechsel gleitet ---------- */
.gbt-gitter { animation: gbt-monat 200ms cubic-bezier(.23,1,.32,1) both; }
@keyframes gbt-monat {
  from { opacity: 0; transform: translate3d(0,10px,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

/* ---------- 5. Tage antworten auf die Maus ----------
   Kontur statt Fuellung: eine Fuellung waere von der Auswahl nicht zu
   unterscheiden. Der Innenschatten bleibt innerhalb der Zelle, damit das
   Raster nicht um einen Pixel wandert. */
@media (hover: hover) and (pointer: fine) {
  .gbt-gitter button:not([disabled]):not(.gbt-rand):hover {
    box-shadow: inset 0 0 0 1px rgba(61,55,51,.38);
  }
  .gbt-gitter button.gbt-rand:hover { box-shadow: inset 0 0 0 1px rgba(246,242,234,.45); }
}

/* ---------- 6. Der gewaehlte Tag setzt sich ---------- */
.gbt-gitter button.gbt-rand { animation: gbt-griff 160ms cubic-bezier(.23,1,.32,1) both; }
@keyframes gbt-griff {
  from { transform: scale(.94); }
  to   { transform: scale(1); }
}
.gbt-gitter button { transition: box-shadow 120ms ease-out; }

/* ---------- 7. Fokus sichtbar ---------- */
.gbt-tafel button:focus-visible,
.gbt-tafel select:focus-visible {
  outline: 1px solid #3D3733;
  outline-offset: 2px;
}

/* ---------- 8. Zaehler: der Wert wechselt, er springt nicht ----------
   Das Plus und das Minus bekommen dieselbe Antwort wie die Tage: eine kurze
   Verkleinerung beim Druck. 97 %% ist die Hausgroesse fuer gedrueckte Knoepfe. */
.gbt-zaehler button { transition: transform 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out; }
.gbt-zaehler button:active:not([disabled]) { transform: scale(.94); }
.gbt-knopf { transition: transform 120ms ease-out, background-color 120ms ease-out; }
.gbt-knopf:active { transform: scale(.985); }

/* ---------- 9. Die Tafel kommt eine Spur weicher ----------
   Der Schatten wird tiefer und weiter: die Tafel schwebt deutlicher ueber der
   Seite, statt aufgeklebt zu wirken. Werte in der Groessenordnung der
   Hausschatten, nur eine Stufe grosszuegiger. */
.gbt-tafel {
  box-shadow: 0 60px 140px -40px rgba(38,34,30,.55),
              0 12px 32px -12px rgba(38,34,30,.28) !important;
}

@media (prefers-reduced-motion: reduce) {
  .gbt-gitter,
  .gbt-gitter button.gbt-drin,
  .gbt-gitter button.gbt-rand { animation: none !important; }
  .gbt-zaehler button, .gbt-knopf, .gbt-gitter button { transition: none !important; }
}

/* ===== 10. Bot-Zeichen groesser, Klebeleiste lesbarer (30.09.2026) =======
   Michael: "das Logo vom Bot ist zu klein" -- und zur Buchungsleiste unten:
   "Schrift und Icon vom Bot etwas groesser."

   Gemessen vorher: das Zeichen ist eine 20 x 20 px grosse Maske auf einem
   56 x 56 px (Tafel) bzw. 72 x 64 px (Leiste) grossen Knopf; die Leiste traegt
   Datum und Text in 10,5 px. In einem 64 px hohen Balken ist das die kleinste
   Schrift der ganzen Seite.

   Neu: Zeichen 26 px (Tafel) und 28 px (Leiste), Schrift der Leiste 12 px.
   Die Sperrung bleibt bei 0,14 em -- sie waechst mit der Schrift mit, weil sie
   in em steht. */
/* !important und html-Praefix: chat-glas.css setzt die Maskengroesse weiter
   unten noch dreimal nach (Zeilen 605, 850, 957 -- gemessen kamen sonst 15 bzw.
   20 px heraus statt der gewuenschten 26). */
/* flex/min-width dazu: der Knopf ist ein Flexkasten, und das Pseudoelement
   schrumpfte darin auf 15 px, obwohl width 26 px stand (gemessen bei 1440 und
   1100 px, wo die Tafel data-form="breit" traegt). */
html .cg-ruf::before, html .buchbar .cg-bar::before {
  width: 26px !important; height: 26px !important;
  min-width: 26px !important; min-height: 26px !important; flex: 0 0 auto !important;
}
html .buchbar .cg-bar::before { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; }
/* Der Knopf im Fuss der Tafel traegt eine eigene Klasse; ohne sie blieb er in
   der breiten Fassung auf 15 px (gemessen bei 1440 und 1100 px). */
html .cg-ruf-fuss::before { width: 26px !important; height: 26px !important; }
html .klebeleiste .buchbar .datum,
html .klebeleiste .buchbar .buchtext { font-size: 12px; }

/* ===== 11. Die Tafel klebt nicht mehr am Fensterrand ====================
   Michael: "Die Raender rechts und links muessen nicht auf der Seite kleben.
   Erst bei Breakpoint mobil."
   Gemessen vorher: bei 1100 px blieben 18 px Rand, bei 760 und 600 px je
   16 px. Die Breite stand auf min(1040px, 100vw - 48px).
   Jetzt 128 px Gesamtabzug, also mindestens 64 px je Seite -- unterhalb von
   760 px (der Handy-Haltepunkt des Hauses) bleibt es bei den alten 16 px. */
@media (min-width: 761px) {
  /* html body und !important, weil der "Feinschliff der Breiten" in
     chat-glas.css eigene Breiten je Fensterbreite setzt. */
  html body .gbt-tafel { width: min(1040px, calc(100vw - 128px)) !important; }
}

/* ===== 12. Der Knopf liegt auf den Kanten der Belegung (30.09.2026) ======
   Michael: "Mach den Button in vertikalen Linien gleich breit. Rechts das Ende
   von dem Plus-Kaestchen und links der Anfang von der Schrift."

   Gemessen bei 1440 px (Tafel in der breiten Fassung): das Etikett ERWACHSENE
   beginnt bei 912, das Plus endet bei 1192 -- die Belegungsspalte ist also
   280 px breit (7 Zellen zu 40 px). Das Knopfpaar stand bei 926 bis 1168 und
   lag damit auf keiner der beiden Kanten.
   In der schmalen Fassung stimmte es schon (gemessen 268 bis 632 gegen 268 und
   632); dort aendert sich nichts. */
@media (min-width: 761px) {
  /* Beim Nachmessen kam ein Fehler im Bestand heraus: die Belegungsspalte lief
     24 px ueber den Satz hinaus (Satz 272 bis 1168, Belegung 912 bis 1192).
     Rechnung: zwei Monate zu 280 px plus 48 px Rinne plus 280 px Belegung sind
     936 px, der Innenraum bot bei 72 px Polster aber nur 896. Das Polster geht
     deshalb auf 52 px; dann passt die Zeile genau, und Satz, Belegung und Fuss
     enden auf derselben Kante. */
  html body .gbt-tafel[data-form="breit"] .gbt-rumpf { padding-inline: 52px !important; }
  html body .gbt-tafel[data-form="breit"] .gbt-kopf  { padding-inline: 52px !important; }
  html body .gbt-tafel[data-form="breit"] .gbt-fuss .cg-knopfpaar {
    width: calc(7 * var(--zelle)) !important;
    margin-left: auto !important;
  }
}

/* Zwischen 761 und 1239 px ist die Tafel schmaler als 1040 px (sie haelt 64 px
   Rand je Seite frei). Bei 1100 px blieben 868 px Innenraum, gebraucht werden
   936 -- die Belegung lief wieder 52 px hinaus. Darum dort eine engere Rinne
   und ein kleineres Polster: 280 + 32 + 280 + 32 + 280 = 904, plus 2 x 32
   Polster = 968, und die Tafel ist dort 972 px breit. */
@media (min-width: 761px) and (max-width: 1239px) {
  html body .gbt-tafel[data-form="breit"] { --g: 32px; }
  html body .gbt-tafel[data-form="breit"] .gbt-rumpf,
  html body .gbt-tafel[data-form="breit"] .gbt-kopf { padding-inline: 32px !important; }
}

/* Die Belegung sitzt immer an der rechten Innenkante, nicht "irgendwo im
   verbleibenden Platz": space-between verteilt einen Rest von wenigen Pixeln
   zwischen Kalender und Belegung, und der Knopf darunter stand dann um genau
   diesen Rest daneben (gemessen 12 px bei 1100 px Fensterbreite). */
@media (min-width: 761px) {
  html body .gbt-tafel[data-form="breit"] .gbt-satz {
    justify-content: end !important;
  }
}

/* ===== 13. Tafeltitel in Inter (30.09.2026) ==============================
   Michael hat aus drei Schriften Inter gewaehlt, dann: "Inter nicht so dick."

   Gemessen, warum es dick aussah: die Vorschau stand auf font-weight 600 --
   diesen Schnitt gibt es im Haus gar nicht. Vorhanden sind 300, 400 und 500;
   den Rest hat der Browser selbst fett gerechnet, und eine gefaelschte Fettung
   ist immer plump. Jetzt 400, der echte Schnitt.

   19 px mit 0,16 em: kleine Versalien brauchen Sperrung, aber weniger als die
   0,22 em der Mono-Zeilen -- Inter ist breiter gebaut als DM Mono. */
html body .gbt-tafel[data-form] .gbt-kopf h2 {
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 32px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

/* Belegung und Knopf enden auf derselben Kante ===========================
   Michael 01.10.2026: "Der Knopf Verfuegbarkeit soll so breit sein wie die
   Belegung darueber, damit es links und rechts abschliesst."
   Gemessen bei 1024 px: der Satz endete bei 928, der Knopf ebenfalls, die
   Belegung aber schon bei 900 -- 28 px davor. justify-content: end am Satz
   allein hat sie nicht ans Ende geschoben, weil sie eine feste Breite hat
   (7 Zellen). Darum schiebt sie der automatische linke Rand selbst dorthin. */
@media (min-width: 761px) {
  html body .gbt-tafel[data-form="breit"] [data-bel] { margin-left: auto !important; }
}

/* === /chat.css === */
/* ---- Chat: Kachel an der Klebeleiste + Fenster ----
   Gestalt aus ChatKachel.tsx (freigegeben 25.08.2026), Schriften aus dieser Seite:
   Abhaya Libre fuer Gespraech, Inter fuer Kleinzeilen. Radius 0 (Regel 26). */
.gc-kachel{position:fixed;right:16px;bottom:16px;z-index:31;width:64px;height:64px;display:grid;place-items:center;
  background:#3D3733;border:0;padding:0;cursor:pointer;color:#F6F2EA;border-radius:0;
  transition:left 300ms cubic-bezier(0.23,1,0.32,1),right 300ms cubic-bezier(0.23,1,0.32,1),transform 160ms cubic-bezier(0.23,1,0.32,1)}
.gc-kachel:active{transform:scale(.96)}
.gc-kachel svg{width:28px;height:28px;display:block}
.gc-kachel:focus:not(:focus-visible),.gc-fenster button:focus:not(:focus-visible){outline:none}
.gc-kachel:focus-visible,.gc-fenster button:focus-visible{outline:1px solid #3D3733;outline-offset:2px}

.gc-fenster{position:fixed;right:24px;bottom:96px;width:min(392px,calc(100vw - 32px));height:min(560px,calc(100vh - 140px));
  display:flex;flex-direction:column;background:#F1ECE3;box-shadow:0 18px 48px rgba(0,0,0,.30);z-index:40;
  transform-origin:bottom right;opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:opacity 200ms cubic-bezier(0.23,1,0.32,1),transform 200ms cubic-bezier(0.23,1,0.32,1)}
.gc-fenster.offen{opacity:1;transform:none;pointer-events:auto;
  transition:opacity 280ms cubic-bezier(0.23,1,0.32,1),transform 280ms cubic-bezier(0.23,1,0.32,1)}

/* Schleier wie hinter der Kalendertafel (tafel.css .gbt-schleier); nur am Handy sichtbar */
.gc-schleier{display:none;position:fixed;inset:0;z-index:39;background:rgba(38,34,30,.42);opacity:0;pointer-events:none;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity 200ms cubic-bezier(.32,.72,0,1)}
.gc-schleier.da{opacity:1;pointer-events:auto;transition:opacity 280ms cubic-bezier(.32,.72,0,1)}

.gc-kopf{flex:0 0 auto;height:56px;background:#3D3733;display:flex;align-items:center;gap:12px;padding:0 26px;color:#F6F2EA}
.gc-kopf svg{width:24px;height:24px;flex:0 0 auto}
.gc-titel{flex:1 1 auto;font-family:Inter,system-ui,sans-serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1}
.gc-zu{background:none;border:0;padding:6px;cursor:pointer;display:grid;place-items:center;color:#F6F2EA}
.gc-zu svg{width:15px;height:15px}

.gc-verlauf{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:26px 26px 10px;
  display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:rgba(58,52,47,.30) transparent}
.gc-verlauf::before{content:"";margin-top:auto}
.gc-perle{align-self:flex-start;max-width:86%;background:#EFEBE4;color:#211F1E;padding:15px 18px;box-shadow:0 1px 0 rgba(58,52,47,.08);
  font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif;font-size:17px;line-height:1.72;white-space:pre-wrap;word-break:break-word}
.gc-perle.gast{align-self:flex-end;background:#3D3733;color:#F6F2EA;padding:13px 17px;box-shadow:none}
.gc-perle a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.gc-tippt{align-self:flex-start;display:flex;gap:5px;padding:4px 2px}
.gc-tippt span{width:5px;height:5px;background:#8a8177;animation:gc-puls 1.1s ease-in-out infinite}
.gc-tippt span:nth-child(2){background:#b3aca1;animation-delay:.15s}
.gc-tippt span:nth-child(3){background:#cdc6b9;animation-delay:.3s}
@keyframes gc-puls{0%,100%{opacity:.45}50%{opacity:1}}

.gc-angebot{align-self:stretch;padding:16px 0 8px;border-top:1px solid rgba(58,52,47,.16)}
.gc-angebot .gc-klein{font-family:Inter,system-ui,sans-serif;font-weight:300;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(58,52,47,.62);line-height:1.7}
.gc-angebot .gc-preis{font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif;font-size:24px;line-height:1.3;color:#211F1E;margin-top:8px}
.gc-angebot .gc-leise{font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif;font-size:15px;line-height:1.5;color:rgba(33,31,30,.66)}
.gc-angebot a{display:inline-block;margin-top:16px;color:#211F1E;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
  padding:8px 0;font-family:Inter,system-ui,sans-serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1}

.gc-eingabe{flex:0 0 auto;border-top:1px solid rgba(58,52,47,.14);padding:12px 26px 14px}
.gc-feld{display:flex;align-items:flex-end;gap:10px;background:#FBF8F2;border:1px solid rgba(58,52,47,.16);padding:6px 6px 6px 16px}
.gc-feld textarea{flex:1 1 auto;min-width:0;border:0;outline:none;background:none;border-radius:0;font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif;font-size:17px;
  line-height:26px;color:#211F1E;padding:8px 0;resize:none;max-height:150px;overflow-y:hidden}
.gc-senden{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;background:transparent;border:0;padding:0;cursor:default;
  color:rgba(58,52,47,.38);transition:background-color 200ms ease}
.gc-senden.bereit{background:#3D3733;color:#F6F2EA;cursor:pointer}
.gc-senden svg{width:19px;height:19px}
/* Pflichthinweis nach Art. 50 KI-VO: lesbar, nicht nur vorhanden (Kontrast >= 4,5 : 1) */
.gc-fuss{flex:0 0 auto;padding:0 26px 14px 43px;font-family:Inter,system-ui,sans-serif;font-weight:300;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(58,52,47,.78);line-height:1.7;white-space:pre-line}
.gc-dslink{color:inherit;text-decoration:underline;text-underline-offset:3px}

@media (max-width:809px){
  /* Die Leiste ist hier 56 px hoch (gemessen 16.09.2026) -- die Kachel gleich hoch, sonst steht sie 8 px ueber */
  body.mit-chat .klebeleiste{right:57px}
  .gc-kachel{right:0;bottom:0;width:56px;height:56px}
  .gc-kachel svg{width:26px;height:26px}
  /* Michael 16.09.2026: "gleich wie den Kalender mit Rand" -- Werte der Tafel am Handy gemessen:
     16 px Rand, Grund #F3EEE7, derselbe Schatten, derselbe Schleier dahinter. */
  .gc-fenster{left:16px;right:16px;top:calc(16px + env(safe-area-inset-top, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:auto;height:auto;background:#F3EEE7;
    box-shadow:0 40px 100px -30px rgba(38,34,30,.5),0 8px 24px -10px rgba(38,34,30,.25);
    transform-origin:bottom center;transform:translateY(24px)}
  .gc-fenster.offen{transform:none}
  .gc-schleier{display:block}
  .gc-fuss{padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
}
@media (prefers-reduced-motion: reduce){
  .gc-kachel,.gc-fenster,.gc-fenster.offen{transition:opacity 200ms ease;transform:none}
  .gc-tippt span{animation:none}
}

/* 30.09.2026, technische Pruefung: der Datenschutz-Link im Chatfuss war 11 px hoch. */
.gc-dslink{display:inline-block;padding:16px 4px;margin:-16px -4px}

/* Der Gruss wird getippt: jedes Wort blendet weich auf ==================
   Michael 30.09.2026: "Diese Schrift soll aussehen, als ob man sie gerade
   eintippt. In einem schoenen Flow, wie es Emil Kowalski macht."

   Drei Werte, die zusammen den Unterschied machen:
     blur(4px) -> 0   ueberdeckt den Moment, in dem ein Wort aus dem Nichts
                      erscheint; ohne ihn sieht man zwei Zustaende, nicht eine
                      Bewegung.
     translateY(2px)  so wenig, dass man es nicht als Bewegung liest, aber
                      genug, damit das Wort "ankommt".
     260 ms ease-out  Eintritt gehoert auf ease-out; ease-in wirkt traege.
   Die Kurve ist dieselbe, die im Haus fuer Eintritte steht. */
.gc-perle .gc-wort {
  display: inline-block;
  animation: gc-wort-ein 260ms cubic-bezier(.23, 1, .32, 1) both;
  will-change: opacity, filter, transform;
}
@keyframes gc-wort-ein {
  from { opacity: 0; filter: blur(4px); transform: translateY(2px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .gc-perle .gc-wort { animation: none; }
}

/* ======================================================================
   Chatfenster am Handy: mittig, und es weicht der Tastatur (30.09.2026)
   Michael: "Chatbot zu weit unten. Soll auch in der Mitte sein, damit es
   leicht zu bedienen ist. Soll hochscrollen, wenn die Tastatur aufgeht,
   sich zusammenziehen. Was macht hier die Konkurrenz?"

   WAS DIE ANDEREN MACHEN (Intercom, WhatsApp Web, Messenger): sie binden die
   Fensterhoehe nicht an vh, sondern an die SICHTBARE Hoehe -- window.visual
   Viewport. Geht die Tastatur auf, schrumpft die sichtbare Hoehe, das Fenster
   zieht sich zusammen und das Eingabefeld bleibt ueber der Tastatur stehen.
   Dazu im Viewport-Meta interactive-widget=resizes-content, damit Chrome das
   Layout verkleinert statt es wegzuschieben.

   Hier dasselbe: --gc-sicht wird von chat.js gesetzt (Rueckfall 100dvh, und
   100vh fuer aeltere Browser). Das Fenster steht mittig zwischen oben und
   unten, nicht am unteren Rand.                                            */
@media (max-width: 809px) {
  html body .gc-fenster {
    /* Rueckfall-Kette: alte Browser nehmen vh, neuere dvh, und sobald
       chat.js misst, gilt der gemessene Wert. */
    /* position: fixed NICHT anfassen -- mit top/bottom auf auto und margin:auto
       fiel das Fenster aus dem festen Fluss und landete 19502 px unterhalb
       (gemessen). Stattdessen oben und unten verankert und die Hoehe an die
       sichtbare Flaeche gebunden. */
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
    max-height: calc(var(--gc-sicht, 100dvh) - 32px) !important;
  }
  /* Der Verlauf scrollt, das Eingabefeld bleibt stehen. */
  html body .gc-fenster .gc-verlauf { overflow-y: auto; overscroll-behavior: contain; }
}

/* ── Chat am Handy mit offener Tastatur (Michael 20.10.2026) ─────────────────
   "Klebe ihn an, dass er nicht wegrutscht. Das X muss leichter zu treffen sein."
   iOS scrollt bei offener Tastatur das sichtbare Fenster; --gc-oben kommt aus
   chat.js (visualViewport.offsetTop) und haelt das Fenster an seinem Platz. */
@media (max-width: 809px) {
  html body .gc-fenster {
    top: calc(16px + var(--gc-oben, 0px)) !important;
    bottom: auto !important;
    height: calc(var(--gc-sicht, 100dvh) - 32px) !important;
    overscroll-behavior: contain;
  }
  /* Trefferflaeche des Schliessknopfs auf 44 px, wie es Apple fuer den Finger
     verlangt; das Zeichen selbst waechst von 15 auf 20 px. */
  html body .gc-zu { width: 44px; height: 44px; padding: 0; margin-right: -10px; }
  html body .gc-zu svg { width: 20px; height: 20px; }
  html body .gc-kopf { height: 60px; }
  /* Das Eingabefeld bleibt unten stehen, der Verlauf darueber scrollt allein. */
  html body .gc-fenster .gc-eingabe { flex: 0 0 auto; }
  html body .gc-fenster .gc-verlauf { flex: 1 1 auto; min-height: 0; }
}

/* ── Angeheftet: Handy UND Tablet (Michael 20.10.2026) ───────────────────────
   "Es muss angeheftet sein. Vor allem bei Breakpoint Mobil und Tablet."
   Die Seite dahinter wird eingefroren (chat.js setzt html.gc-offen), damit
   Safari beim Fokus nichts verschieben kann. Das Fenster beginnt an der
   Oberkante des SICHTBAREN Bereichs (--gc-oben) und ist genau so hoch wie er
   (--gc-sicht): geht die Tastatur auf, schrumpft es, die Eingabe sitzt auf
   der Tastatur. Die Klebeleiste "Verfuegbarkeit pruefen" geht solange weg --
   sie laege sonst mitten im Gespraech (gemessen am iPhone, 20.10.2026). */
@media (max-width: 1023px) {
  html.gc-offen, html.gc-offen body { overflow: hidden !important; height: 100% !important; overscroll-behavior: none; }
  html.gc-offen body { position: fixed !important; left: 0; right: 0; width: 100%; }
  html.gc-offen .klebeleiste, html.gc-offen [data-klebeleiste], html.gc-offen .gc-kachel { display: none !important; }
  html.gc-offen .gc-fenster {
    position: fixed !important;
    top: var(--gc-oben, 0px) !important; bottom: auto !important;
    height: var(--gc-sicht, 100dvh) !important; max-height: none !important;
    display: flex !important; flex-direction: column !important;
    transition: none !important;
  }
  html.gc-offen .gc-fenster .gc-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* Kein Glas, solange das Blatt den Bildschirm fuellt: blur(30px) ueber die ganze Flaeche wird
     bei jeder Bewegung der Tastatur neu gemalt (gemessen als zweite Ruckelquelle, 20.10.2026).
     Vollton stattdessen; durchscheinen kann hier ohnehin nichts. */
  html.gc-offen[data-chat] body .gc-fenster, html.gc-offen body .gc-fenster {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #F6F2EA !important; }
  html.gc-offen .gc-schleier { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.gc-offen .gc-fenster .gc-eingabe { flex: 0 0 auto; }
}
/* Handy: randlos, ein Blatt. */
@media (max-width: 809px) {
  html.gc-offen .gc-fenster { left: 0 !important; right: 0 !important; }
}
/* Tablet: das Blatt bleibt 16 px vom Rand, aber angeheftet wie am Handy. */
@media (min-width: 810px) and (max-width: 1023px) {
  html.gc-offen[data-chat] body .gc-fenster, html.gc-offen body .gc-fenster { left: auto !important; right: 16px !important; width: min(440px, calc(100vw - 32px)) !important;
    top: calc(var(--gc-oben, 0px) + 16px) !important; height: calc(var(--gc-sicht, 100dvh) - 32px) !important; }
}

/* === /chat-glas.css === */
/* 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:11px;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:11px;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:11px;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;field-sizing:content;max-height:150px}
html[data-schrift="S1"][data-eingabe="E1"] .gc-feld textarea::placeholder{text-transform:none;letter-spacing:0;color:#8a857d}
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:16px;line-height:24px;letter-spacing:.01em;text-transform:none;
  /* 20.10.2026: die Hoehe rechnet der Browser selbst (field-sizing). Das JS-Nachmessen bei jedem
     Tastendruck (height:auto, dann px) stoerte die iOS-Diktierfunktion: waehrend des Diktats zeigte
     das Feld nur die ersten Buchstaben, der Rest kam erst nach dem Mikrofon-Tipp. */
  field-sizing:content;max-height:150px}
html[data-schrift="S3"][data-eingabe="E1"] .gc-feld textarea::placeholder{text-transform:none;letter-spacing:.01em;color:#8a857d}


/* 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:11px;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") */
/* Michael am 03.10.2026: "die Schrift im bot 3 punkt kleiner".
   Gemessen vorher: 18px bei 1440 UND bei 390 px (die Mobilregel weiter
   oben verliert gegen diese hier). Jetzt 15px. */
html[data-luxus="L2"] .gc-perle{font-size:15px;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:11px;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:11px;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:11px;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:11px;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:11px;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:11px;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 11px/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 11px/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 11px/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:11px;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. */
/* 20.10.2026: seit die Eingabe in Abhaya steht (S1), gilt die Zeilenschrift des Gespraechs: 17 px, kein Sperren. */
html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea{font-size:17px !important;letter-spacing:0 !important;line-height:25px !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 11px/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)}
}


/* =====================================================================
   BUCHUNGSTAFEL AM HANDY: schmale Geraete, kurze Fenster (Michael 13.10.2026)
   "Kontrolliere alle Breakpoints ... iPhone, kleine Handys, Tastatur, Falte."
   Gemessen live (15 Fenster): bei 280 px (Galaxy Fold zugeklappt) lief die Tafel seitlich
   ueber, weil das Tagesfeld mindestens 36 px war (7 x 36 = 252 > 216 Platz). Und bei Fenstern
   unter ca. 700 px Hoehe lag der Knopf "Verfuegbarkeit" unter der Falz im Scrollbereich.
   ===================================================================== */
@media (max-width:1023px){
  /* Tagesfeld schrumpft erst unter 328 px Breite (320 px und breiter bleibt wie freigegeben) */
  html[data-swiss] .gbt-tafel[data-form="schmal"]{
    --sz:clamp(28px, max(calc((100vw - 100px) / 7), min(36px, calc((100vw - 64px) / 7))), 52px)}
  /* Hoehe: dvh statt vh, damit die Browserleiste das Fenster nicht abschneidet */
  .gbt-tafel{max-height:calc(100dvh - 24px)}
  /* Knopf immer sichtbar: Fuss klebt am unteren Rand des Scrollbereichs */
  .gbt-tafel[data-form="schmal"] .gbt-fuss{position:sticky;bottom:0;z-index:2;
    background:#F3EEE7;padding-bottom:max(8px,env(safe-area-inset-bottom))}
}

/* Schliessen-Knopf mindestens 44 x 44 (gemessen bei 280 px: 20 px, vom langen Titel zusammengedrueckt)
   und der Titel darf auf sehr schmalen Fenstern kleiner werden statt die Tafel zu sprengen */
@media (max-width:1023px){
  html .gbt-tafel[data-form] .gbt-zu{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;margin:-12px -12px -12px 0}
  html .gbt-tafel[data-form] .gbt-kopf h2{min-width:0;overflow-wrap:anywhere}
}
@media (max-width:359px){
  html body .gbt-tafel[data-form][data-form] .gbt-kopf h2{font-size:13px !important;line-height:20px !important;letter-spacing:.12em !important;white-space:normal !important}
}

/* ---------- Angebotskarte, Fassung 2, und groessere Schrift am Handy (20.10.2026) ----------
   ZWEI SCHRIFTEN IM CHAT (Michael 20.10.2026: "zu viele verschiedene Schriften, elegant, aber
   kein Mix"): Abhaya Libre fuer alles Laufende (Gespraech, Eingabe, Zeitraum, Preis, Nebenzeile),
   DM Mono fuer Kleinzeilen und Knopf. Cormorant und Inter kommen im Chat nicht mehr vor.
   Michael: "Warum zeigt es mir keinen Preis an?" Gemessen: der Preis stand in
   --cg-schrift = #F6F2EA (Schrift des DUNKLEN Glases) auf cremefarbenem Blatt.
   Dann: "Schrift groesser, Angebot benutzerfreundlicher, tiefer, schoener, nach
   dem Design der Webseite." Aufbau wie die Preisbloecke der Seite: Zeitraum in
   Cormorant 300, Mono-Zeile fuer Naechte und Reisende, Preis gross, darunter
   ein dunkler Balken als Knopf, derselbe wie "Verfuegbarkeit pruefen". */
html[data-chat][data-glasfarbe="hell"] .gc-angebot{
  border-top:1px solid rgba(58,52,47,.16);border-bottom:1px solid rgba(58,52,47,.16);
  margin:6px 0 2px;padding:20px 0 22px;display:flex;flex-direction:column;gap:0;align-self:stretch;color:#211F1E}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-hinweis{
  font:400 15px/1.5 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;font-style:italic;color:rgba(33,31,30,.7);margin:0 0 10px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zeitraum{
  font:400 23px/1.25 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;letter-spacing:0;color:#211F1E}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-klein{
  font:400 11px/1.7 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(58,52,47,.62);margin-top:4px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis{
  font:400 36px/1.1 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#211F1E;margin-top:16px;letter-spacing:-.01em}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis .gc-ang-ab{
  font:400 11px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(58,52,47,.62);margin-right:4px;vertical-align:.35em}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis + .gc-leise{
  font:400 15px/1.5 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:rgba(33,31,30,.66);margin-top:2px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-ang-knopf{
  display:flex;align-items:center;justify-content:space-between;margin-top:18px;min-height:56px;padding:0 20px;
  background:#3D3733;color:#F6F2EA;text-decoration:none;border-radius:0;
  font:400 12px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 200ms ease}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-ang-knopf::after{content:"\2192";font-size:16px;letter-spacing:0}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-ang-knopf:active{transform:scale(.98)}
@media(hover:hover){html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-ang-knopf:hover{background:#2E2926}}

/* Groessere, ruhigere Schrift im Gespraech am Handy und Tablet: 17 -> 19 px, Zeile 1,55.
   Die Gastflaeche bekommt dieselbe Groesse und mehr Luft. */
@media (max-width:1023px){
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle{font-size:19px !important;line-height:1.55 !important}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle.gast{font-size:18px !important;line-height:1.5 !important;padding:16px 20px !important}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-verlauf{gap:22px}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-zeitraum{font-size:24px}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-preis{font-size:40px}
}
/* Fusszeile ebenfalls in DM Mono, damit im Chat genau zwei Schriften stehen (20.10.2026). */
html[data-chat] .gc-fuss, html[data-chat] .gc-fuss a{font-family:"DM Mono",ui-monospace,monospace;letter-spacing:.12em}

/* ---------- Angebotskarte, Fassung 3 (20.10.2026) ----------
   Mehr Information, eine ruhige Raster-Ordnung: Grund oder Einleitung gross und gut lesbar,
   Anreise und Abreise mit Wochentag nebeneinander, Preis, freie Zimmer als Linienliste.
   Zwei Schriften: Abhaya Libre und DM Mono. */
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-hinweis{
  font:400 19px/1.5 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;font-style:normal;color:#211F1E;margin:0 0 18px;letter-spacing:0}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-tage{
  display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding-top:2px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-tag .gc-klein{margin:0 0 4px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-datum{
  font:400 21px/1.25 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#211F1E;letter-spacing:0;white-space:nowrap}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-reisende{margin-top:12px;padding-top:12px;border-top:1px solid rgba(58,52,47,.14)}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zimmer{margin-top:16px;border-top:1px solid rgba(58,52,47,.14)}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zeile{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(58,52,47,.14)}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zname{font:400 17px/1.3 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#211F1E}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zpreis{font:400 13px/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.06em;color:#3A342F;white-space:nowrap}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-mehr{padding-top:10px}
@media (max-width:1023px){
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-hinweis{font-size:20px}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-datum{font-size:21px}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-zname{font-size:18px}
}

/* ---------- Angebotskarte, Fassung 4: Swiss Grid wie FAQ und "Gut zu wissen" (20.10.2026) ----------
   Raster u = 8 px. Drei Stufen: Etikett Mono 11/16 (2u), Zeile Serife 18/24 + Mono 13/24, Preis
   Serife 40/48 (6u). Jede Zeile 48 px (6u), Haarlinie #DDD5C9 wie --linie der Seite. Bezeichnung links,
   Wert rechts: dasselbe Muster fuer Fakten und Zimmer. Zwei Schriften. */
html[data-chat][data-glasfarbe="hell"] .gc-angebot{
  display:block;margin:8px 0 0;padding:0;border:0;color:#3D3733}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-hinweis{
  font:400 20px/32px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#3D3733;margin:0 0 24px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-liste{border-top:1px solid #DDD5C9}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zeile{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  height:48px;box-sizing:border-box;padding:12px 0 11px;border-bottom:1px solid #DDD5C9}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zname{
  font:400 18px/24px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#3D3733;letter-spacing:0}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zpreis{
  font:400 13px/24px 'DM Mono',ui-monospace,monospace;letter-spacing:.06em;color:#3D3733;text-align:right}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-klein{
  font:300 11px/16px 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#6E6862;margin:0}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-preisblock{padding:32px 0 24px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-preisblock .gc-klein{margin-bottom:8px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis{
  font:400 40px/48px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#3D3733;margin:0;letter-spacing:-.005em}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis .gc-ang-ab{
  font:300 11px/16px 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#6E6862;margin-right:8px;vertical-align:baseline}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-preisblock .gc-leise{
  font:400 15px/24px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#6E6862;margin-top:8px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-etikett{margin:8px 0 12px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-ang-knopf{margin-top:32px}
@media (max-width:1023px){
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-hinweis{font-size:20px;line-height:32px}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-zname{font-size:18px}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-preis{font-size:40px}
}

/* ---------- Fassung 4b: ruhiger und kleiner (Michael 20.10.2026: "die Typografie ist zu gross") ----------
   Raster bleibt 8 px: Zeile 40 (5u), Preisblock 24 und 16, Knopf 48 (6u). Zeile 16/24, Mono 12/24,
   Etikett 11/16, Preis 32/40, Einleitung 16/24. Die Handy-Regeln oben werden mit demselben Gewicht uebersteuert. */
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-hinweis,
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-hinweis{font-size:16px;line-height:24px;margin:0 0 16px;color:#3D3733}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zeile{height:40px;padding:8px 0 7px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zname,
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-zname{font-size:16px;line-height:24px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zpreis{font-size:12px;line-height:24px;letter-spacing:.04em}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-preisblock{padding:24px 0 16px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis,
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-preis{font-size:32px;line-height:40px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis .gc-ang-ab{font-size:11px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-preisblock .gc-leise{font-size:14px;line-height:24px;margin-top:4px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-etikett{margin:8px 0 8px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-ang-knopf{margin-top:24px;min-height:48px;font-size:11px;letter-spacing:.14em}

/* ---------- Eingabefeld in der Schrift des Gespraechs (20.10.2026) ----------
   Michael: "Passe die Schrift vom Eingabefeld so an, dass es zu dem anderen Text passt. Dann kann man das
   besser lesen." Gemessen: Gespraech Abhaya 18 bis 19 px, Zeile 27, ohne Sperrung; Eingabe Abhaya 16 px, Zeile
   24, Sperrung 0,06 em. Jetzt dieselbe Schrift wie die Gastblase: 17 px am Desktop, 18 px bis 1023 px
   (ueber 16 px, darum zoomt iOS nicht hinein), Zeile 1,5, keine Sperrung, dieselbe Tinte. kopf.css setzt dieselbe Regel mit !important (16 px, 0,06 em)
   und laedt spaeter: darum ein Attribut mehr, damit diese Regel gewinnt. */
html[data-chat][data-eingabe][data-schrift] .gc-fenster .gc-feld textarea{
  font-family:'Abhaya Libre','Abhaya Ersatz',Georgia,serif !important;font-weight:400 !important;
  font-size:17px !important;line-height:26px !important;letter-spacing:0 !important;color:#211F1E !important}
html[data-chat][data-eingabe][data-schrift] .gc-fenster .gc-feld textarea::placeholder{
  font-family:inherit !important;font-size:inherit !important;letter-spacing:0 !important;color:rgba(33,31,30,.55) !important;
  text-transform:none !important;white-space:normal !important}
@media (max-width:1023px){
  html[data-chat][data-eingabe][data-schrift] .gc-fenster .gc-feld textarea{font-size:18px !important;line-height:27px !important}
}

/* ---------- Buchungslink im Gespraech als Knopf (20.10.2026) ----------
   Michael: "Alle Zimmer und Verfuegbarkeiten stehen im Link. Sollen wir den Link praesenter machen?"
   Kann der Bot kein Angebot abfragen, ist der Link das Angebot. Er steht darum als dunkler Balken wie der
   Knopf der Karte, nicht als unterstrichener Text. Konkurrenz (HiJiffy): ein auffaelliger Book-Now-Knopf,
   der mit vorbereiteten Daten in die Buchung fuehrt. */
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle a[href*="booking.hotel-gebhard.at"]{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;min-height:48px;padding:0 20px;
  background:#3D3733;color:#F6F2EA;text-decoration:none;border-radius:0;
  font:400 11px/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 200ms ease}
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle a[href*="booking.hotel-gebhard.at"]::after{content:"\2192";font-size:16px;letter-spacing:0}
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle a[href*="booking.hotel-gebhard.at"]:active{transform:scale(.98)}
@media(hover:hover){html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle a[href*="booking.hotel-gebhard.at"]:hover{background:#2E2926}}

/* ---------- Angebotskarte, Fassung 5: kompakt, alles in Inter (Michael 21.10.2026) ----------
   "Zu viel Abstand, mach das kompakter. Angebotsblock selbst auch zu unuebersichtlich. Alles in Inter,
   schmaeler, zwei Zeilen reichen." Zwei Faktenzeilen (Reisedatum mit Naechten, Belegung), Zeilen ohne
   feste Hoehe, damit das Datum umbrechen darf. Raster 4 px: Zeile 8/8, Preisblock 16/12, Knopf 48. */
html[data-chat][data-glasfarbe="hell"] .gc-perle + .gc-angebot{margin-top:-6px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot{max-width:380px;margin:0;font-family:Inter,system-ui,sans-serif}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-hinweis,
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-hinweis{font:400 15px/22px Inter,system-ui,sans-serif;margin:0 0 12px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zeile{height:auto;min-height:36px;padding:8px 0;align-items:flex-start;gap:12px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zname,
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-ang-zname{font:400 14px/20px Inter,system-ui,sans-serif;color:#6E6862;flex:0 0 auto}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zpreis{font:500 14px/20px Inter,system-ui,sans-serif;letter-spacing:0;color:#3D3733;white-space:normal;text-align:right}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-klein{font:400 11px/16px Inter,system-ui,sans-serif;letter-spacing:.08em}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-preisblock{padding:16px 0 12px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-preisblock .gc-klein{margin-bottom:4px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis,
html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot .gc-preis{font:500 26px/32px Inter,system-ui,sans-serif;letter-spacing:-.01em}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-preis .gc-ang-ab{font:400 11px/16px Inter,system-ui,sans-serif;letter-spacing:.08em;margin-right:6px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-preisblock .gc-leise{font:400 13px/18px Inter,system-ui,sans-serif;margin-top:2px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-etikett{margin:4px 0 4px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-ang-knopf{margin-top:16px;font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.12em}

/* ---------- Ein Raster fuer Handy und Tablet (21.10.2026) ----------
   Michael: "besser, aber immer noch Chaos". Gemessen bei 498 px: Kopf 28/16, Verlauf 28, Karte nur 380 px
   breit in einer 442-px-Spalte (rechts 90 px Luft, links 28), Feld mit 16 px Innenrand plus 20 px im Textfeld,
   Sendeknopf 60 px mit Rand. Jetzt EIN Seitenrand (24 px) fuer Kopf, Verlauf, Eingabe und Fuss; Karte, Text
   und Feld fuellen dieselbe Spalte; Gespraechsschrift 18/27, Gastblase 17/25; Feld buendig mit dem Knopf. */
@media (max-width:1023px){
  html[data-chat] .gc-fenster{--gc-rand:24px}
  html[data-chat] .gc-fenster .gc-kopf{padding-left:var(--gc-rand) !important;padding-right:12px !important}
  html[data-chat] .gc-fenster .gc-verlauf{padding-left:var(--gc-rand) !important;padding-right:var(--gc-rand) !important}
  html[data-chat] .gc-fenster .gc-eingabe{padding-left:var(--gc-rand) !important;padding-right:var(--gc-rand) !important}
  html[data-chat] .gc-fenster .gc-fuss{padding-left:var(--gc-rand) !important;padding-right:var(--gc-rand) !important}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle{font-size:18px !important;line-height:27px !important;max-width:100% !important}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle.gast{font-size:17px !important;line-height:25px !important;
    padding:12px 16px !important;max-width:86% !important}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-verlauf{gap:16px}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-angebot{max-width:none !important;width:100%}
  html[data-chat][data-glasfarbe="hell"] .gc-fenster .gc-perle + .gc-angebot{margin-top:-4px}
  html[data-chat][data-eingabe="E1"] .gc-fenster .gc-feld{padding:0 !important}
  html[data-chat][data-eingabe="E1"] .gc-fenster .gc-feld textarea{padding:14px 16px !important}
  html[data-chat][data-eingabe="E1"] .gc-fenster .gc-senden{width:56px !important;margin:0 !important;border-radius:0}
}
/* Michael 21.10.2026: "Mach die Striche dunkel." Haarlinien der Angebotskarte von #DDD5C9 auf die halbe Tinte. */
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-liste{border-top-color:rgba(61,55,51,.165)}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zeile{border-bottom-color:rgba(61,55,51,.165)}

/* Striche um 70 % in der Deckkraft reduziert (Michael 21.10.2026): .55 -> .165. */
/* Doppelblock oben: An-/Abreise links, Belegung rechts, zwei gleich breite Haelften. */
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-doppel{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(61,55,51,.165);border-bottom:1px solid rgba(61,55,51,.165)}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zelle{padding:12px 0}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zelle.rechts{padding-left:16px;border-left:1px solid rgba(61,55,51,.165)}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-zelle .gc-klein{margin:0 0 6px}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-wert{font:500 15px/22px Inter,system-ui,sans-serif;color:#3D3733;letter-spacing:0}

/* 24.10.2026 Michael: Kalender Fassung A "Strenges Raster" (Vorschau /_vorschau/kalender/). Weniger Mono: alles Inter.
   Monat, Wochentage und Tage in EINER Groesse (15 px), Rang nur ueber Schnitt und Grauwert; Beschriftungen nicht mehr
   in gesperrten Versalien. Ziffern tabellarisch, damit die Spalten gerade stehen. Haarlinie unter den Wochentagen.
   Fuenffache Klasse: die aelteren Fassungen (data-form, data-swiss) setzen Groessen mit !important und hoeherem Gewicht. */
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel,html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel *{font-family:Inter,system-ui,sans-serif!important}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel h2{font-weight:500!important;font-size:15px!important;line-height:24px!important;letter-spacing:.06em!important;text-transform:uppercase}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-kalkopf button,html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-kalname{font-size:15px!important;line-height:24px!important;letter-spacing:0!important;text-transform:none!important}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-kalname{font-weight:500!important;color:#2B2724!important}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-gitter > span{font-size:15px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:#8D857B!important;border-bottom:1px solid #D6D0C8}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-gitter > button{font-size:15px!important;font-weight:400!important;letter-spacing:0!important;font-variant-numeric:tabular-nums}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-gitter > button.gbt-rand{font-weight:500!important}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-kopfzeile,html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .cg-dat-l{font-size:15px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:#8D857B!important}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-wert,html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .cg-dat-w,html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .cg-dat-in{font-size:15px!important;font-weight:400!important;letter-spacing:0!important;font-variant-numeric:tabular-nums}
html body .gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel.gbt-tafel .gbt-knopf{font-weight:500!important;font-size:13px!important;letter-spacing:.14em!important}

/* ---------- Zimmerkarten im Chat (24.10.2026) ----------
   Swiss Grid wie die uebrige Karte: Grundmass 8 px. Karte 240 (30 E), Foto 240 x 160 (3:2, 20 E),
   Polster 16 (2 E), Grundlinie 24 (3 E), Knopf 48 (6 E), Abstand 8 (1 E).
   Ruhig und in zwei Schriften: Abhaya Libre fuer alles, was man liest (Name, Text), DM Mono fuer
   Zahlen und Handgriffe (Preis, Knopf, Etikett) -- dasselbe Muster wie die Zimmerliste vorher.
   Kein Wert steht doppelt: Naechte und Belegung stehen einmal im Kopf, nicht auf jeder Karte.
   Grund der Karte = Grund des Eingabefelds. */
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-kartenkopf{display:flex;justify-content:space-between;align-items:center;
  min-height:48px;margin-top:16px;border-top:1px solid rgba(58,52,47,.14)}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-kartenkopf .gc-klein{margin:0}
html[data-chat][data-glasfarbe="hell"] .gc-lauf-pfeile{display:flex;gap:0}
html[data-chat][data-glasfarbe="hell"] .gc-lauf-pfeile[hidden]{display:none}
html[data-chat][data-glasfarbe="hell"] .gc-lauf-pfeile button{width:32px;height:32px;padding:0;border:0;background:transparent;cursor:pointer;
  font:400 20px/32px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#211F1E;transition:opacity 160ms ease}
html[data-chat][data-glasfarbe="hell"] .gc-lauf-pfeile button:disabled{opacity:.28;cursor:default}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-lauf{display:flex;align-items:flex-start;gap:8px;margin:0;padding:0 0 8px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-lauf::-webkit-scrollbar{display:none}
html[data-chat][data-glasfarbe="hell"] .gc-karte{flex:0 0 240px;scroll-snap-align:start;display:flex;flex-direction:column;
  background:rgba(239,235,228,.86);box-shadow:inset 0 0 0 1px rgba(58,52,47,.12);border-radius:0}
html[data-chat][data-glasfarbe="hell"] .gc-karte img{display:block;width:240px;height:160px;object-fit:cover}
html[data-chat][data-glasfarbe="hell"] .gc-karte-inhalt{display:flex;flex-direction:column;flex:1 1 auto;padding:16px}
html[data-chat][data-glasfarbe="hell"] .gc-karte-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:24px}
html[data-chat][data-glasfarbe="hell"] .gc-karte-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:400 18px/24px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#211F1E}
html[data-chat][data-glasfarbe="hell"] .gc-karte-preis{flex:0 0 auto;white-space:nowrap;
  font:400 13px/24px 'DM Mono',ui-monospace,monospace;letter-spacing:.04em;color:#3A342F;font-variant-numeric:tabular-nums}
html[data-chat][data-glasfarbe="hell"] .gc-karte-mehr{align-self:flex-start;height:24px;margin:8px 0 0;padding:0;border:0;background:transparent;
  cursor:pointer;outline:none;font:400 15px/24px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:rgba(33,31,30,.64);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(58,52,47,.28)}
html[data-chat][data-glasfarbe="hell"] .gc-karte-mehr:focus-visible{text-decoration-color:#211F1E}
html[data-chat][data-glasfarbe="hell"] .gc-karte-mehr[aria-expanded="true"]{color:#211F1E}
html[data-chat][data-glasfarbe="hell"] .gc-karte-detail{padding-top:8px}
html[data-chat][data-glasfarbe="hell"] .gc-karte-unter{font:400 11px/24px 'DM Mono',ui-monospace,monospace;letter-spacing:.08em;color:rgba(58,52,47,.62)}
html[data-chat][data-glasfarbe="hell"] .gc-karte-detail p{margin:0;font:400 16px/24px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:#211F1E;
  text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-karte-knopf{display:flex;align-items:center;justify-content:space-between;margin-top:16px;
  height:48px;padding:0 16px;background:#3D3733;color:#F6F2EA;text-decoration:none;border-radius:0;
  font:400 11px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 200ms ease}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-karte-knopf::after{content:"\2192";font-size:15px;letter-spacing:0}
html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-karte-knopf:active{transform:scale(.98)}
@media(hover:hover){html[data-chat][data-glasfarbe="hell"] .gc-angebot a.gc-karte-knopf:hover{background:#2E2926}}
html[data-chat][data-glasfarbe="hell"] .gc-angebot .gc-ang-weitere{font:400 15px/24px 'Abhaya Libre','Abhaya Ersatz',Georgia,serif;color:rgba(33,31,30,.64);margin-top:8px}

/* ---------- Eingabefeld am Handy: 16 px (24.10.2026) ----------
   Gemessen: das Feld stand am Handy auf 10 px DM Mono in Versalien. Unter 16 px zoomt Safari
   beim Antippen in die Seite hinein, dann verrutscht alles, und getippter Text in 10 px
   Versalien ist kaum lesbar. HiJiffy setzt 16 px (Quelltext ihres Widgets, 24.10.2026),
   Asksuite sperrt stattdessen den Zoom ganz (user-scalable=no) -- das nehmen wir nicht,
   es nimmt Sehschwachen das Vergroessern. Der Platzhalter behaelt seinen Satz in Versalien,
   nur was der Gast tippt, steht in 16 px Serife. */
@media (max-width:1023px){
  html[data-chat] .gc-fenster .gc-feld textarea,html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea{font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif !important;font-size:16px !important;
    letter-spacing:0 !important;text-transform:none !important}
  html[data-chat] .gc-fenster .gc-feld textarea::placeholder,html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea::placeholder{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
}

/* ---------- Tastatur offen: knapp wie WhatsApp (24.10.2026) ----------
   Nachgerechnet an fuenf iPhones (SE 375x548, mini 375x635, 14 390x664, 15 Pro 393x659,
   Pro Max 430x739, je Safari mit Leisten) und Tastaturen von 260 bis 360 px: vorher blieben
   auf SE, mini, 14 und 15 Pro teils nur 50 bis 94 px fuer den Verlauf, auf dem SE lag das Feld
   hinter der Tastatur. Darum, solange die Tastatur offen ist: Fenster ohne Rand ueber die ganze
   sichtbare Flaeche (wie HiJiffy und Asksuite am Handy), Kopf 48 statt 64, Feld hoechstens zwei
   Zeilen und dann scrollend, Eingabezeile und KI-Hinweis knapp. Der KI-Hinweis bleibt sichtbar. */
@media (max-width:1023px){
  html.cg-tastatur .gc-fenster,html.cg-tastatur .gc-fenster.offen{left:0 !important;right:0 !important;width:auto !important;box-shadow:none !important}
  html.cg-tastatur .gc-kopf{height:48px !important;min-height:48px !important;flex:0 0 48px !important}
  html.cg-tastatur .gc-eingabe{padding-top:8px !important;padding-bottom:4px !important}
  html.cg-tastatur .gc-feld textarea{max-height:76px !important;overflow-y:auto !important}
  html.cg-tastatur .gc-fuss{padding-top:0 !important;padding-bottom:4px !important;line-height:16px !important}
  html.cg-tastatur .gc-verlauf{min-height:0 !important;flex:1 1 auto !important}
}
/* Sehr wenig Platz (sichtbar unter 260 px, iPhone SE mit grosser Tastatur): Kopf 40, Feld eine Zeile. */
@media (max-width:1023px){
  html.cg-tastatur.cg-eng .gc-kopf{height:40px !important;min-height:40px !important;flex:0 0 40px !important}
  html.cg-tastatur.cg-eng .gc-feld textarea{max-height:48px !important}
  html.cg-tastatur.cg-eng .gc-eingabe{padding-top:4px !important;padding-bottom:2px !important}
}

/* Michael 25.10.2026: "Warum ein Block ueber An- und Abreise, der Hintergrund ist nicht richtig." Der klebende Fuss (13.10.) war
   fest beige (#F3EEE7) und lag als Block auf dem Glas. Im Swiss-Grid bleibt er durchsichtig; kein Filter (Unschaerfe hellte
   den Block auf). */
@media (max-width:1023px){
  html[data-swiss] .gbt-tafel[data-form="schmal"] .gbt-fuss{background:transparent}
}

/* ---- Responsive-Fix 29.10.2026 Teil 7: Klebeleiste bei 320 px, das Chat-Zeichen lag auf dem N von PRUEFEN ---- */
@media (max-width: 359px) { .klebeleiste .buchbar .buchtext { font-size: 11px; letter-spacing: .1em; } }

/* ---- Responsive-Fix 29.10.2026 Teil 8: Text der Klebeleiste ausserhalb des Chat-Zeichens zentrieren (bei 320 px) ---- */
@media (max-width: 359px) { .klebeleiste .buchbar .buchtext { padding-right: 36px; } }

/* === /tafel-deckend.css === */
/* Vorschau: helle Buchungstafel OHNE Transparenz (24.09.2026, Michael:
   "mach mir eine Vorschau auch ohne Transparenz zuerst").

     ?deckend=1   volle Creme-Flaeche #F3EEE7
     ?deckend=2   Papierweiss #FBF8F3
     ohne Angabe  die Glasfassung aus chat-glas.css

   WARUM HIER ALLE FARBEN STEHEN und nicht nur der Hintergrund:
   In probe-tafel-milchglas.css steht der DUNKLE Grund von data-ptf="5" INNEN
   in einem @supports-Block, die dazu passenden HELLEN Schriftfarben aber
   AUSSERHALB (19 Regeln, gemessen 24.09.2026). Wer also nur den Hintergrund
   aufhellt, bekommt cremefarbene Schrift auf cremefarbenem Grund -- genau der
   Zustand, den Michael als "nicht fertig" gemeldet hat. Diese Fassung ist
   deshalb in sich vollstaendig: Grund UND Schrift UND Raender UND Knoepfe. */

html[data-deckend="1"][data-tafel] body[data-ptf] .gbt-tafel{
  background:#F3EEE7 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:0 0 0 1px rgba(53,48,43,.12),0 40px 90px -30px rgba(16,13,11,.40) !important}
html[data-deckend="2"][data-tafel] body[data-ptf] .gbt-tafel{
  background:#FBF8F3 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:0 0 0 1px rgba(53,48,43,.14),0 40px 90px -30px rgba(16,13,11,.42) !important}

/* Schrift und Linien fuer BEIDE deckenden Fassungen */
   /* TONWERTSTAFFEL statt Einheitsschwarz (Michael 24.09.2026: "die Schrift
      etwas feiner mit den Abstufungen"). Vier Stufen, alle gegen Creme
      #F3EEE7 gerechnet -- der Mindestkontrast 4,5 gilt auch fuer die
      feinste Stufe, sonst waere es nur huebsch und nicht lesbar:
        #211F1E  14,2   Zimmername im Kalenderkopf, die Datumswerte
        #35302B  11,4   Monatsnamen, waehlbare Tage
        #6E6862   4,9   Etiketten, Wochentagskuerzel, Zusammenfassung
        rgba(33,31,30,.28)  vergangene Tage, nicht bedienbar
      Gewicht: 300 statt 400, wo die Schrift es hergibt. */
html[data-deckend][data-tafel] body[data-ptf] .gbt-tafel{--pt-schrift:#211F1E;--pt-zweit:#6E6862;--pt-aus:rgba(33,31,30,.28);
  color:#35302B !important}
/* 1 Ueberschrift: fein und offen gesperrt */
html[data-deckend] body .gbt-kopf h2{color:#211F1E !important;font-weight:300 !important}
/* 2 Monatsnamen und waehlbare Tage */
html[data-deckend] body .gbt-kalname,
html[data-deckend] body .gbt-gitter button,
html[data-deckend] body .gbt-kalkopf button{color:#35302B !important;font-weight:300 !important}
/* 3 Etiketten, Wochentage, Zusammenfassung */
html[data-deckend] body .gbt-gitter span,
html[data-deckend] body .gbt-kopfzeile,
html[data-deckend] body .gbt-zusammen,
html[data-deckend] body .gbt-kindname,
html[data-deckend] body .gbt-zeile > span{color:#6E6862 !important;font-weight:400 !important}
/* 4 vergangene Tage */
html[data-deckend] body .gbt-gitter button[disabled]{color:rgba(33,31,30,.28) !important}
/* Werte der Belegung bleiben kraeftig, sie sind die Zahl, die zaehlt */
html[data-deckend] body .gbt-zaehler .gbt-wert{color:#211F1E !important;font-weight:300 !important}

html[data-deckend] body .gbt-kopfzeile,
html[data-deckend] body .gbt-zeile,
html[data-deckend] body .gbt-fuss{border-color:rgba(58,52,47,.18) !important}
html[data-deckend] body .gbt-gitter button.gbt-rand{background:#3D3733 !important;color:#F6F2EA !important}
html[data-deckend] body .gbt-gitter button.gbt-drin{background:rgba(58,52,47,.14) !important;color:#211F1E !important}
html[data-deckend] body .gbt-zaehler button,
html[data-deckend] body .gbt-zeile select{border-color:rgba(58,52,47,.38) !important;color:#211F1E !important}
/* Knopf und Chat-Anbau: dunkel auf hellem Grund */
html[data-deckend] body .gbt-knopf{background:#3D3733 !important;color:#F6F2EA !important;border-color:#3D3733 !important}
/* NUR der Chat-Anbau AN DER TAFEL wird dunkel. Der gleichnamige Knopf im
   BUCHUNGSBALKEN traegt dieselbe Klasse cg-ruf und stand deshalb deckend
   dunkel neben zwei durchscheinenden Feldern (Michael 24.09.2026: "Wenn du
   den linken zwei Felder transparent machst dann natuerlich den Chatbot
   Button auch"). Dort bleibt er transparent wie der Balken selbst. */
html[data-deckend] .cg-ruf:not(.cg-bar){background:#3D3733 !important;color:#F1ECE3 !important;
  border-left-color:rgba(246,242,234,.28) !important}
html[data-deckend] .cg-ruf:not(.cg-bar) svg rect{fill:#3D3733 !important}
html[data-deckend] .buchbar .cg-ruf.cg-bar{background:transparent !important}
html[data-deckend] .buchbar .cg-ruf.cg-bar svg rect{fill:#F6F2EA !important}
/* Datumszeile unten */
html[data-deckend] .cg-dat{border-color:rgba(58,52,47,.18) !important}
html[data-deckend] .cg-dat-l{color:rgba(33,31,30,.6) !important}
html[data-deckend] .cg-dat-w{color:#211F1E !important}

/* === /bot-anim.css === */
/* Chat-Zeichen: fuenf Bewegungen (Vorschau, Michael 20.09.2026). Nur Tinte, nur Transform und
   Deckkraft. Ausgeloest per Klasse am html-Element (bot-anim.js), nie ueber :hover am
   Pseudo-Element. Ersetzt den einfachen Ablauf aus chat-glas.css (der hier ausgeschaltet wird).
     cg-willkommen  beim Oeffnen: hereinschwingen, Huepfer, Hallo-Strahlen, Wackeln   (2,0 s)
     cg-idle-a      zwischendurch: kleines Wackeln                                    (1,1 s)
     cg-idle-b      zwischendurch: zweimal huepfen, Antenne zittert                   (1,0 s)
     cg-ratlos      wenn er etwas nicht weiss: klingelt wie ein Telefon (Rezeption)   (1,8 s)
     cg-freut       bei Hover oder Fingertipp: Luftsprung und Strahlen               (1,1 s) */

/* altes Verhalten aus chat-glas.css aus */
html[data-bot] .gc-fenster.offen .gc-kopf::before,
html[data-bot] .gc-fenster.offen .gc-kopf::after,
html[data-bot] .gc-fenster.offen .gc-titel::before{animation:none}
html[data-bot] .gc-kopf::before{transform-origin:50% 90%}

@keyframes b-willkommen{
  0%{transform:translateX(-36px) rotate(-10deg);opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  12%{opacity:1}
  36%{transform:translateX(5px) rotate(4deg);animation-timing-function:ease-in-out}
  44%{transform:translateX(0) rotate(0)}
  52%{transform:translateY(-8px) scale(1.07);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  60%{transform:translateY(0) scale(1.02,.97)}
  64%{transform:scale(1)}
  71%{transform:rotate(-8deg)}
  81%{transform:rotate(6deg)}
  91%{transform:rotate(-2deg)}
  100%{transform:none;opacity:1}}
@keyframes b-spur{0%{opacity:0;transform:scaleX(.3)}14%{opacity:.85}36%{opacity:.5;transform:scaleX(1)}46%,100%{opacity:0;transform:scaleX(1)}}
@keyframes b-strahl{0%,44%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(1.06)}}

@keyframes b-idle-a{0%,100%{transform:none}25%{transform:rotate(-6deg)}55%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}}
@keyframes b-idle-a-strahl{0%,100%{opacity:0}35%,60%{opacity:.7;transform:scale(.8)}}
@keyframes b-idle-b{0%,100%{transform:none}
  22%{transform:translateY(-6px) scale(1.03,1.06)}40%{transform:translateY(0) scale(1.03,.96)}48%{transform:none}
  66%{transform:translateY(-4px) scale(1.02,1.04)}84%{transform:translateY(0)}}

/* ratlos: schuettelt sich wie ein klingelndes Telefon, dabei pulsieren die Strahlen dreimal */
@keyframes b-ratlos{0%,100%{transform:none}
  4%{transform:rotate(-11deg)}8%{transform:rotate(11deg)}12%{transform:rotate(-10deg)}16%{transform:rotate(10deg)}20%{transform:rotate(-7deg)}
  24%{transform:rotate(7deg)}28%{transform:rotate(0)}
  46%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}54%{transform:rotate(-9deg)}58%{transform:rotate(9deg)}62%{transform:rotate(-5deg)}66%{transform:rotate(4deg)}72%{transform:rotate(0)}}
@keyframes b-ratlos-strahl{0%,100%{opacity:0;transform:scale(.7)}
  4%,24%{opacity:1;transform:scale(1)}30%{opacity:0}
  46%,66%{opacity:1;transform:scale(1)}74%{opacity:0}}

/* freut sich: Luftsprung mit kleinem Nachwippen */
@keyframes b-freut{0%,100%{transform:none}
  18%{transform:translateY(2px) scale(1.06,.92)}
  38%{transform:translateY(-10px) rotate(-8deg) scale(.98,1.06)}
  58%{transform:translateY(0) rotate(4deg) scale(1.05,.95)}
  74%{transform:translateY(-3px) rotate(-3deg)}
  88%{transform:none}}
@keyframes b-freut-strahl{0%,20%{opacity:0;transform:scale(.6)}38%{opacity:1;transform:scale(1.1)}68%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(1.08)}}

@media (prefers-reduced-motion:no-preference){
  html.cg-willkommen .gc-fenster.offen .gc-kopf::before{animation:b-willkommen 2s both}
  html.cg-willkommen .gc-fenster.offen .gc-titel::before{animation:b-spur 2s both}
  html.cg-willkommen .gc-fenster.offen .gc-kopf::after{animation:b-strahl 2s both}
  html.cg-idle-a .gc-fenster.offen .gc-kopf::before{animation:b-idle-a 1.1s ease-in-out}
  html.cg-idle-a .gc-fenster.offen .gc-kopf::after{animation:b-idle-a-strahl 1.1s ease-in-out}
  html.cg-idle-b .gc-fenster.offen .gc-kopf::before{animation:b-idle-b 1s ease-in-out}
  html.cg-ratlos .gc-fenster.offen .gc-kopf::before{animation:b-ratlos 1.8s ease-in-out}
  html.cg-ratlos .gc-fenster.offen .gc-kopf::after{animation:b-ratlos-strahl 1.8s ease-in-out}
  html.cg-freut .gc-fenster.offen .gc-kopf::before{animation:b-freut 1.1s ease-in-out}
  html.cg-freut .gc-fenster.offen .gc-kopf::after{animation:b-freut-strahl 1.1s ease-in-out}
}

/* Beruehrungsflaeche ueber dem Zeichen (Hover und Fingertipp) */
html[data-bot] .gc-kopf .cg-hit{position:absolute;z-index:2;cursor:pointer;background:transparent;border:0;padding:0;
  left:calc(var(--pl) - 6px);top:calc((var(--kh) - var(--ik)) / 2 - 12px);width:calc(var(--ik) + 12px);height:calc(var(--ik) + 18px);
  -webkit-tap-highlight-color:transparent}

/* Frage-Feld: Schrift etwas groesser (Michael 20.09.2026) */
html[data-schrift="S2"][data-eingabe="E1"] .gc-feld textarea{font-size:16px;line-height:24px}
html[data-eingabe="E1"] .gc-feld textarea::placeholder{font-size:16px;letter-spacing:.1em}
@media (max-width:809px){
  html[data-schrift="S2"][data-eingabe="E1"] .gc-feld textarea{font-size:16px}   /* 16 verhindert das Zoomen am iPhone */
  html[data-eingabe="E1"] .gc-feld textarea::placeholder{font-size:14px;letter-spacing:.1em;white-space:nowrap}
}

/* === /kopf.css === */
/* ------------------------------------------------------------------
   Nur der OBERE Teil des Nachbaus: Kopfleiste, Auftaktbild, Einleitung,
   die zwei versetzten Bilder, das Bewertungs-Laufband, die Buchungsleiste.
   Alles darunter kommt aus lp-stil.css (Landingpage wandern).

   Michael, 23.09.2026:
     "Der Footer soll nicht ueber die ganze Breite gehen, er soll mit den
      Bildern rechts und links abschliessen. Es soll kein Bild ohne
      Maximalgroesse sein fuer die groesseren Bildschirme."
   Deshalb liegt ALLES in main (max-width 1435 px) und traegt denselben
   Seitenrand var(--rand) wie die Bildreihen. Kein randloses Bild mehr.
   ------------------------------------------------------------------ */

:root {
  --a1: 8px; --a2: 16px; --a3: 24px; --a4: 40px; --a5: 64px; --a6: 128px;
  --leise: #706B64;   /* hellster Ton, der auf #F3EEE7 noch 4.5:1 haelt */
}

/* ---------- Kopfleiste ---------- */

.kopf {
  position: sticky; top: 0; z-index: 60;
  max-width: var(--breite); margin: 0 auto;
  height: 110px;
  background: var(--grund);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--rand);
}
/* 30.09.2026: Tippflaeche 44 x 44 (gemessen vorher 40 x 33). Das Polster waechst,
   der negative Rand nimmt es der Zeile wieder -- die Striche bleiben, wo sie sind. */
.menueknopf { display: flex; flex-direction: column; gap: 7px; width: 40px; box-sizing: content-box; padding: 12px 2px; margin: -12px -2px; min-height: 20px; justify-content: center; justify-self: start; background: none; border: 0; cursor: pointer; }
.menueknopf span { display: block; height: 1px; background: var(--tinte); transition: transform .35s, opacity .25s; }
.kopf.offen .menueknopf span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kopf.offen .menueknopf span:nth-child(2) { opacity: 0; }
.kopf.offen .menueknopf span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Michael 23.09.2026: "Das ist wesentlich eleganter als der Klumpen oben.
   Tausche das aus, ein bisschen groesser." Gemeint ist die Wortmarke aus dem
   Logotype im Fuss. Dieselben Werte wie dort: Oswald 300, Laufweite 0,42 em,
   Farbe #3D3733 -- nur 32 px -> 36 px -> 30 px (23.09.2026 "etwas kleiner"). Serifen sind fuer die Wortmarke
   ausgeschlossen (Regel 22). */
.wortmarke {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 300; font-size: 30px; line-height: normal;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  color: var(--tinte); text-decoration: none;
  position: relative; top: -.05em;   /* Schriftmitte auf die Mitte von Menue und Sprache: gemessen 1,6 px (30 px Schrift) und 1,0 px (24 px) zu tief */
  padding: 0;   /* 12.10.2026: lp-stil.css gab 40/22 bzw. 28/14 px Polster -- die Schrift sass dadurch 8 bis 11 px tiefer als Menue und Sprache */
}
.sprache {
  justify-self: end; margin: 0;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300; font-size: 13.68px; letter-spacing: .16em; color: #57534B;
  white-space: nowrap;   /* 19.10.2026: DE / EN / NL brach am Handy in zwei Zeilen (gemessen 390 px) */
}
.sprache { -webkit-user-select: none; user-select: none; }
.sprache a { text-decoration: none; color: inherit; display: inline-block; padding: 12px 6px; margin: -12px -6px;
             cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sprache .hier, .sprache .aus { cursor: default; }  /* 30.09.2026: Tippflaeche 44 hoch statt 20 */
.sprache .aus { opacity: .45; }

/* ---------- Rolldown-Menue ---------- */

.menue {
  position: fixed; inset: 110px 0 auto 0; z-index: 55;
  background: var(--grund); border-bottom: 1px solid var(--linie);
  padding: var(--a5) var(--rand); display: none;
}
.menue.offen { display: block; }
.menue > * { max-width: var(--breite); margin-inline: auto; }
.menue ol { list-style: none; padding: 0; display: grid; gap: var(--a3); }
.menue .zaehler {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .3em; color: var(--grau);
  display: block; margin-bottom: 4px;
}
.menue .haupt {
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 30px; line-height: 1.1; color: var(--tinte); text-decoration: none;
}
.menue .anschrift { margin-top: var(--a4); font-size: 16px; line-height: 1.7; color: var(--text); }

/* ---------- Auftaktbild ---------- */

.auftakt-bild { padding: var(--a4) var(--rand) 0; }
.auftakt-bild .bildkasten { position: relative; aspect-ratio: 1355 / 735; }
.auftakt-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Kiesel -- Form, Groesse und Glas 1:1 von der Landingpage abgemessen
   (wandern.hotel-gebhard.at, .ssc/.ssc-glas, gemessen 23.09.2026):
     Kasten   244 x 232 px   -> breiter als hoch
     Radius   50% 50% 44% 56% / 60% 58% 42% 40%
     Glas     rgba(53,48,43,.92)
   Der Text ist der der Framer-Seite (Inter 16 px, vier Zeilen).
   Michael 23.09.2026: "leicht animiert, dreht sich im Kreis" -- 28 s je
   Umdrehung, nur die Glasform dreht, die Schrift bleibt gerade. */
.kiesel {
  /* Michael 23.09.2026: "Passt in der Webseite an."
     An der Framer-Auslieferung gemessen (1440 px):
       Kiesel   x 98, y 274, 183 x 184
       im Bild  links 6,81 %, oben 13,83 % (Bild x0 y166, 1440 x 781)
       Text     Inter 400, 16 px / 19,2 px, #F3EEE7 */
  /* 24.09.2026, abends: auf die Masse der Landingpage gebracht (244 x 232),
     damit die Originaltypografie ohne Umrechnung passt. Bei 183 px ragte
     das gesperrte INKLUSIVE rechts aus der Form heraus -- gemessen, nicht
     geschaetzt: Textblock 162 px im nutzbaren Innenraum von 183 px. */
  position: absolute; left: 6.81%; top: 13.83%;
  width: 244px; height: 232px;
  display: grid; place-items: center;
  pointer-events: none;
}
.kieselglas {
  position: absolute; inset: 0;
  border-radius: 50% 50% 44% 56% / 60% 58% 42% 40%;
  background: #3D3733;                       /* Vollton statt Milchglas */
  box-shadow: inset 0 0 0 1px rgba(246,242,234,.07), 0 0 26px -10px rgba(20,17,15,.42);
  animation: kiesel-drehen 28s linear infinite;
}
/* Michael 24.09.2026: "mach ihn aber nicht aufs Glas, das gefaellt mir auch
   nicht." Der backdrop-filter faellt damit weg, der Koerper wird Vollton.
   Die Landingpage hat dort blur(36px) saturate(.65) -- wir ausdruecklich nicht. */
@keyframes kiesel-drehen { from { rotate: 0deg } to { rotate: 360deg } }

.kieseltext {
  /* 1:1 die Framer-Werte, die Michael am 24.09.2026 gezeigt hat:
     Inter Regular, 16 px, Laufweite 0 em, Zeilenhoehe 1,2 em, zentriert.
     (Mein Versuch mit 300/15 px/21 px war falsch und ist zurueckgenommen.) */
  position: relative; margin: 0; width: 100%; padding: 0 14px;
  color: #F6F2EA; text-align: center;
}

/* ---------- Einleitung ----------
   1:1 die Werte der Framer-Startseite, gemessen am gerenderten DOM bei
   1440 px (nicht geschaetzt, nicht aus einer Probedatei):
     Spalte   x 200, Breite 1040   -> beidseitig 200 px Rand
     Kicker   DM Mono 400, 12 px / 19,8 px, Sperrung 1,2 px, #666666
     H1       Cormorant Garamond 300, 49 px / 58,8 px, #6B635F, 24 px unter dem Kicker
     Lauftext Abhaya Libre 400, 18 px / 29,7 px, #6B635F, direkt darunter
     Abstand zum Auftaktbild 267 px
   Michael 23.09.2026: "Eins ist scheisse, das hast du gemacht. Zwei ist gut,
   bau es um." -- Zwei war die Framer-Fassung. */

.einleitung { max-width: 1440px; margin: 0 auto; padding: 128px 200px 0; }
.einleitung .zeile {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 400; font-size: 12px; line-height: 19.8px; letter-spacing: 1.2px;
  color: #666666; margin: 0;
}
.einleitung h1 {
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 49px; line-height: 58.8px; letter-spacing: normal;
  color: var(--text); max-width: none;
  margin: 24px 0 0;
}
.einleitung .lauf {
  font-size: 18px; line-height: 29.7px; color: var(--text);
  max-width: none;
  /* Abstand H1 -> Lauftext. Die Framer-AUSLIEFERUNG hat hier nur 4 px, die
     Framer-VORSCHAU im Editor rund 90 px -- deshalb drehten wir uns im Kreis.
     Michael 23.09.2026: "Der Abstand passt nicht." Gesetzt auf einen Wert des
     Swiss-Rasters, damit es eine Zahl gibt, an der man drehen kann. */
  margin: var(--abstand-h1, 64px) 0 0;
}

/* ---------- Die zwei versetzten Bilder ---------- */

.versatz {
  padding: var(--a6) var(--rand) 0;
  display: grid; grid-template-columns: 44fr 12fr 44fr; align-items: start;
}
.versatz .links  { grid-column: 1; grid-row: 1; margin-top: var(--a6); }
.versatz .rechts { grid-column: 3; grid-row: 1; }
.versatz img { width: 100%; height: auto; }

/* ---------- Bewertungs-Laufband ----------
   Michael 23.09.2026: "bewegen sich zu schnell von rechts nach links und
   sind viel zu dunkel, vor allem die Logos."
   Tempo 60 s -> 180 s. Logos auf 38 % Deckung. Note auf #706B64. */

.laufband {
  margin-top: var(--a6);
  max-width: var(--breite); margin-inline: auto;
  padding-inline: var(--rand);
}
/* Michael 23.09.2026: "Die Lightshow soll rechts und links auch begrenzt
   sein, genauso breit wie die Bilder." overflow:hidden schneidet am
   Polsterrand ab -- darum ein eigenes Fenster auf der Inhaltsbreite. */
.laufband .fenster { overflow: hidden; }
.laufband .bahn { display: flex; width: max-content; animation: laufen 180s linear infinite; }
.laufband:hover .bahn, .laufband:focus-within .bahn { animation-play-state: paused; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bewertung { width: 564px; flex: 0 0 564px; }
.bewertung .saeule { width: 302px; display: grid; justify-items: center; }
/* Michael 23.09.2026: "Die Logos koennen ein kleines bisschen kraeftiger
   sein." 0,38 -> 0,46. Mehr nicht: am 23.09. hatte er sie als "viel zu
   dunkel" beanstandet, das war 1,0. */
.bewertung .zeichen { height: 60px; display: grid; align-content: center; opacity: .46; }
.bewertung .zeichen img { width: auto; background: none; }
/* lp-stil.css setzt img{background:#E6DFD4} als Platzhalter fuers Nachladen.
   Bei den freigestellten Logo-PNGs wird daraus ein sichtbarer Kasten --
   Michael 23.09.2026: "entferne die Rahmen um die Logos". */
.bewertung .zeichen.google img       { height: 31px; }
.bewertung .zeichen.holidaycheck img { height: 48px; }
.bewertung .zeichen.tripadvisor img  { height: 60px; }
.bewertung .zeichen.booking img      { height: 33px; }
.bewertung blockquote {
  margin: var(--a3) 0 0; width: 302px; text-align: left;
  font-size: 14px; line-height: 1.65; color: var(--text);
}
.bewertung .note {
  margin: var(--a2) 0 0; width: 240px; text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px; line-height: 1.2; color: var(--leise);
}

/* ---------- Presse-Zeile aus der Framer-Seite entfaellt ---------- */

/* Damit die feste Leiste den Fussbereich nicht verdeckt */
.fuss { padding-bottom: 180px; }


/* ---------- Fussbereich ----------
   Michael 23.09.2026: "Zwei sehr schoene ausbalancierte Viererbloecke,
   zwei Zeilen mit vier Spalten. Am Schluss das Logo mit der Typografie."
   Die Breite ist dieselbe wie bei jeder Bildreihe (max-width 1435, Rand 40). */

.fuss { padding-bottom: 180px; }
.fussinhalt { font-family: 'Abhaya Libre', 'Abhaya Ersatz',Georgia, serif; }

.fussraster {
  /* Michael 23.09.2026: "Warum ist in der dritten Spalte so viel Abstand?"
     Die vierte Spalte war 1 fr breit, ihr Inhalt aber schmal und nach rechts
     geschoben -- daraus wurde eine Luecke von rund 335 px.
     Jetzt bekommt sie nur die Breite ihres Inhalts (auto), die ersten drei
     teilen sich den Rest. Damit sind alle Rinnen 40 px UND die laengste
     Zeile endet weiter auf der rechten Bildkante. */
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: var(--a4);
  text-align: left;   /* lp-stil.css zentriert seinen Fuss -- hier nicht:
                         der Block soll mit den Bildkanten abschliessen */
}
.fussblock h2 {
  font-size: 13px; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase;
  /* Kontrast (Michael 24.10.2026): #8A857D 3,17:1 -> #716C65 4,51:1, gleicher Farbton. Zurueck: kopf.css.vor-kontrast-24102026 */
  color: #716C65; font-weight: 400;
  /* Michael 23.09.2026: "Korrigiere den Abstand zwischen allen Bloecken."
     Die Rinnen sind 40 px, waagrecht wie senkrecht. Falsch war der Abstand
     INNEN: Ueberschrift -> erste Zeile stand auf 16 px, das ergab einen
     Grundlinienabstand von 40 px gegen 24 px in der Liste -- die Ueberschrift
     schwebte. Mit 8 px sind es 32 px, also weiter auf dem Achter-Raster. */
  margin: 0 0 var(--a1);
}
.fussblock h2.leer { visibility: hidden; }
.fussblock ul { list-style: none; margin: 0; padding: 0; }
/* Michael 23.09.2026: "Footer-Schrift 3 Punkt kleiner." 17 px -> 14 px.
   Die Spaltenueberschriften bleiben bei 13 px -- drei Punkte weniger waeren
   10 px und damit unter der Lesbarkeitsgrenze. */
.fussblock li { font-size: 14px; line-height: 24px; color: var(--text); }
.fussblock li a { color: var(--text); display: inline-block; }  /* 30.10.2026: 44 px mit -10 px Rand ueberlappten die Nachbarzeile (Lighthouse target-size); jetzt 24 px ohne Ueberlappung, Zeile 23,8 auf 24 px */
.fussblock li a:hover { color: var(--tinte); text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }  /* 01.11.2026 Michael: Unterstreichung beim Ueberfahren 50 % heller */

/* Nur das Signet (Michael 23.09.2026), Strich 5 statt 4. */
.fuss .zeichen { display: grid; place-items: center; margin-top: var(--a6); }
.fuss .zeichen a { display: block; color: var(--tinte); }
.fuss .signet { display: block; width: 96px; height: auto; }

.fuss .copy { text-align: center; margin: var(--a4) 0 0; font-size: 13px; color: var(--text); }
.fuss .cookieknopf {
  display: block; margin: calc(var(--a3) - 10px) auto 0;
  font-size: 13px; color: var(--text); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 10px 8px; min-height: 44px;  /* 30.09.2026: Tippflaeche 44 statt 24 */
}

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .einleitung { padding-inline: 96px; }
  .einleitung h1 { font-size: 40px; line-height: 48px; }
  .fussraster { grid-template-columns: repeat(2, 1fr); }
  .versatz { grid-template-columns: 1fr; gap: var(--a3); }
  .versatz .links, .versatz .rechts { grid-column: 1; grid-row: auto; margin-top: 0;
    margin-inline: calc(var(--rand) * -1); }   /* randlos am Handy, 28.09.2026 */
}

/* ---------- Handy ---------- */

@media (max-width: 809px) {
  .kopf { height: 88px; }
  .wortmarke { font-size: 24px; }
  .sprache { font-size: 12px; letter-spacing: .1em; }   /* 19.10.2026: drei Sprachen in einer Zeile */
  .sprache .aus { margin: 0 -2px; }
  .menue { inset: 88px 0 auto 0; padding: var(--a4) var(--rand); }

  .auftakt-bild .bildkasten { aspect-ratio: 350 / 500; margin-inline: calc(var(--rand) * -1); }

  .fussraster { grid-template-columns: 1fr; gap: var(--a4); }
  .fuss .signet { width: 80px; }
  .einleitung { padding: 120px var(--rand) 0; }
  .einleitung h1 { font-size: 31px; line-height: 37.2px; }
  .versatz { padding-top: 80px; }
  .laufband { margin-top: 80px; }

  .bewertung { width: 320px; flex-basis: 320px; }
  .bewertung .saeule, .bewertung blockquote { width: 280px; }
  .bewertung .note { width: 240px; }

}

/* ---------- Ganz schmal (ab 320 px) ----------
   Die Bewertungszahlen der Landingpage stehen dort noch zweispaltig und
   ragen 20 px hinaus (Regel 9, gemessen mit rand-320-messen.mjs). */
@media (max-width: 400px) {
  .bewertungen { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ---------- Zimmergleis: runde Pfeile auf den Bildern ----------
   Michael 23.09.2026: "Hier fehlen die Buttons zum Weiterleiten nach rechts
   und nach links." Die Prev/Next-Zeile der Landingpage bleibt zusaetzlich.
   Die Hoehe setzt seite.js aus dem ersten Kartenbild -- die Karten sind je
   Haltepunkt verschieden breit, ein fester Wert waere bei jeder Breite falsch. */

.gleisrahmen { position: relative; }

.gleispfeil {
  position: absolute; top: var(--pfeilhoehe, 280px); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(61,55,51,.5);
  display: grid; place-content: center;
  border: 0; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s, opacity .2s;
}
.gleispfeil:hover { background: rgba(61,55,51,.82); }
.gleispfeil:disabled { opacity: 0; pointer-events: none; }
.gleispfeil.zurueck { left: 24px; }
.gleispfeil.vor     { right: 24px; }

@media (max-width: 809px) {
  .gleispfeil { width: 38px; height: 38px; }
  .gleispfeil.zurueck { left: 12px; }
  .gleispfeil.vor     { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .kieselglas { animation: none; }
}

/* ---------- Schieber unter dem Zimmergleis ----------
   Michael 23.09.2026: der Balken der Framer-Seite statt Prev/Next.
   Die Knoepfe bleiben im Markup (buchen.js greift ohne Pruefung darauf zu)
   und sind nur ausgeblendet -- geblaettert wird mit den runden Pfeilen. */

.gleissteuerung { gap: var(--a3); margin-top: var(--a4); }
.gleissteuerung button { display: none; }
.gleissteuerung .spur { flex: 1; height: 1px; background: rgba(61,55,51,.18); }
.gleissteuerung .laeufer { height: 1px; background: var(--tinte); }
.gleiszaehler {
  flex: 0 0 auto;
  font-family: 'Abhaya Libre', 'Abhaya Ersatz',Georgia, serif;
  font-size: 18px; line-height: 1.66; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Zimmerkarten: Typografie der Framer-Seite ----------
   Michael 23.09.2026: "Aendere die Typografie unterhalb der
   Zimmerkategorien, dort ist die schoenere." Gemeint ist der Satz der
   Framer-Startseite. Gemessen dort (1440 px):
     Titel     Cormorant Garamond 300, 22 px / 28,6 px, #4A4A45
     Text      Abhaya Libre 400, 18 px / 29,88 px, #6B635F
     Merkmal   Abhaya Libre 400, 18 px / 29,88 px
   Die Landingpage setzt Titel in Abhaya 17 px und den Preis halbfett --
   das wird hier ueberschrieben. Inhalt bleibt unveraendert. */

.gleis .karte { gap: 0; }
.gleis .kzeile { align-items: baseline; padding-top: 46px; }
.gleis .kzeile h3 {
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 22px; line-height: 28.6px;
  color: #4A4A45; letter-spacing: 0;
}
.gleis .kmass {
  font-family: 'Abhaya Libre', 'Abhaya Ersatz',Georgia, serif;
  font-size: 16px; line-height: 28.6px; color: var(--grau);
}
.gleis .klinie { margin-top: 16px; background: rgba(61,55,51,.14); }
.gleis .kpreis {
  font-weight: 400; font-size: 17px; line-height: 1.66;
  color: var(--grau); margin-top: 14px;
}
.gleis .ktext {
  font-size: 18px; line-height: 29.88px; color: var(--text); margin-top: 12px;
}

@media (max-width: 809px) {
  .gleis .kzeile { padding-top: 28px; }
  .gleis .kzeile h3 { font-size: 20px; line-height: 26px; }
  .gleis .ktext { font-size: 17px; line-height: 1.66; }
}

/* ---------- Zeilenlaenge ----------
   Michael 23.09.2026: "Die Zeilen sind zu lang, das geht nicht. Immer wenn
   die Zeile zu lang ist, machst du einen Umbruch. Es schaut nicht elegant
   und luxurioes aus."
   Zwei Mittel statt harter <br>:
     text-wrap: balance   gleicht die Zeilen eines kurzen Absatzes an --
                          keine volle Zeile mit einem Wort darunter
     max-width in em      begrenzt das Satzmass auf rund 45 Zeichen,
                          statt die Karte bis zur Kante zu fuellen */

.gleis .kzeile h3 { text-wrap: balance; }
.gleis .ktext {
  max-width: 22em;          /* ~ 45 Zeichen bei 18 px Abhaya Libre */
  text-wrap: balance;
  hyphens: none;
}
.gleis .kpreis, .gleis .kmass { text-wrap: nowrap; }

/* Dieselbe Regel fuer die Ueberschriften und kurzen Absaetze der Abschnitte */
.abschnitt h2, .kopf1 h2, .kopf2 h2 { text-wrap: balance; }
.leitsatz, .einleitung h1 { text-wrap: balance; }
.lauf, .einleitung .lauf { text-wrap: pretty; }

/* ---------- Fuss: linke und rechte Kante ----------
   Michael 23.09.2026: "Links soll die Schrift mit dem oberen Bild vertikal
   abschliessen. Rechts soll der letzte Buchstabe des laengsten Wortes
   ebenfalls mit dem oberen Bild abschliessen -- das N von Buchen."
   Spalte 1 steht ohnehin auf der Bildkante. Spalte 4 wird rechtsbuendig,
   damit ihre laengste Zeile genau auf der rechten Bildkante endet. */

/* Die vierte Spalte: Info und Folgen stehen in EINER Huelle.
   Die Huelle schrumpft auf ihre breiteste Zeile ("Verfuegbarkeit und Buchen")
   und wird an den rechten Rasterrand gestellt. Damit endet die laengste Zeile
   auf der rechten Bildkante (1398) UND beide Bloecke haben dieselbe linke
   Kante, stehen also untereinander. Der Text bleibt linksbuendig.
   Michael 23.09.2026: links war gut, rechts fehlte der Abschluss. */
.fussspalte {
  grid-column: 4; grid-row: 1 / 3;
  justify-self: end;
  display: grid; align-content: start; gap: var(--a4);
  text-align: left;
}

/* Michael 23.09.2026: "Bildunterschriften alle um zwei Punkt kleiner."
   lp-stil.css setzt .mikro und figcaption auf 12 px -> 10 px. */
figcaption { font-size: 11px; }
/* Michael 24.10.2026: "auf 10 Pixel anheben". probe-tafel-milchglas.css setzte body[data-ptf] figcaption auf 9 px
   (Startseite, Essen, Wellness, Winter, je de/en/nl). Gleiche Spezifitaet, steht spaeter: gewinnt. Zurueck: kopf.css.vor-kleinschrift-24102026 */
body[data-ptf] figcaption { font-size: 11px; }

/* Michael 23.09.2026: "Zentriere diesen Bereich." — die vier Bewertungszahlen
   im Abschnitt buchen. Nur die Ausrichtung, sonst nichts. */
.bewertungen .bw { align-items: center; text-align: center; }

/* ---------- Zimmer-Kopf, Fassung A "Zeitungskopf" ----------
   Michael 23.09.2026, aus drei Vorschlaegen gewaehlt.
   12 Spalten auf der Inhaltsbreite, Rinne 40 px. */

/* Michael 23.09.2026: "Bild eins gleich anordnen wie Bild zwei im Zentrum."
   Also dieselbe Spalte wie die Einleitung: 160 px zusaetzlich nach innen,
   damit der Satzspiegel bei x 203 beginnt und 1035 breit ist -- gemessen an
   der Einleitung. Der Satz steht einspaltig ueber die volle Spaltenbreite. */
.zimmerkopf {
  display: grid; grid-template-columns: 1fr;
  padding-inline: 160px;
}
.zimmerkopf h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 34px; line-height: 1.22; letter-spacing: -.012em;
  color: var(--tinte);
}
/* Zwei echte Rasterspalten statt column-count. Mit column-count startet die
   zweite Spalte eine Zeile tiefer, weil der Abstand zwischen den Absaetzen
   an den Spaltenkopf rutscht. Michael 23.09.2026: "gleiche Hoehe, Swiss Grid."
   Im Raster beginnen beide Spalten auf derselben Grundlinie. */
.zimmerkopf .satz {
  /* Michael 23.09.2026: "Pass den Abstand an." Derselbe Wert wie zwischen
     H1 und Fliesstext in der Einleitung -- eine Stellschraube fuer beide. */
  margin-top: var(--abstand-h1, 64px);
  display: grid; grid-template-columns: 1fr; row-gap: 1.7em;
}
.zimmerkopf .satz p { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0; }

@media (max-width: 809px) {
  .zimmerkopf { padding-inline: 0; }
  .zimmerkopf h2 { font-size: 26px; }
  .zimmerkopf .satz { margin-top: 24px; }
}

/* ---------- Haeufige Fragen ----------
   Michael 23.09.2026: der Block der Framer-Seite statt "Was im Preis steckt".
   An der Framer-Auslieferung gemessen (1440 px):
     Spalte   x 148 bis 1292 (1144 breit)
     Frage    Cormorant Garamond 300, 20 px / 26 px, Sperrung 0,4 px, #6B635F
     Zeile    Haarlinie unter jeder Frage, Zeilenabstand 88 px
     Zeichen  Plus, 20 x 20 px, rechts */

.fragen .fragenliste { width: 100%; max-width: 1144px; margin-inline: auto; }

/* Die zwei Verweise unter den haeufigen Fragen auf die Breite der Fragenliste
   (Michael 30.09.2026: "Die zwei unteren Links gleich breit wie die haeufig
   gestellten Fragen"). Gemessen bei 1440 px: die Liste lief von 148 bis 1292
   (1144 px), die Verweiszeile von 43 bis 1398 (1355 px) -- 105 px je Seite
   daneben. Dieselbe Begrenzung wie .fragen .fragenliste eine Zeile weiter
   oben, damit beide an einer Stelle haengen. */
.fragen > .qv-wege { width: 100%; max-width: 1144px; margin-inline: auto; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--a3);
  padding: 26px 8px;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary h3 {
  flex: 1; margin: 0;
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 20px; line-height: 26px; letter-spacing: .4px;
  color: var(--text);
}
.fragen summary .zeichen { position: relative; width: 20px; height: 20px; flex: 0 0 20px; }
.fragen summary .zeichen::before, .fragen summary .zeichen::after {
  content: ''; position: absolute; background: var(--text); inset: 9px 0 auto; height: 2px;
}
.fragen summary .zeichen::after { transform: rotate(90deg); transition: transform .25s, opacity .25s; }
.fragen details[open] summary .zeichen::after { transform: rotate(0); opacity: 0; }
.fragen .antwort {
  margin: 0 8px 26px; max-width: 760px;
  font-size: 17px; line-height: 1.66; color: var(--tinte);
}

@media (max-width: 809px) {
  .fragen summary { padding: 20px 0; }
  .fragen summary h3 { font-size: 18px; }
  .fragen .antwort { margin-inline: 0; }
}

/* Michael 23.09.2026: "Mach so viel Abstand nach unten zum Bild" --
   gezeigt hat er den Abstand der Einleitung zu ihrem Bild: 133 px.
   row-gap 144 ergibt gemessen dieselben 133 px (die Differenz ist der
   Unterlaengenraum der letzten Textzeile). */
#zimmer { row-gap: 144px; }


/* ---------- Schmale Fenster: die vierte Fussspalte aufloesen ----------
   Michael-unabhaengiger Messfund vom 23.09.2026:
   werkzeug/rand-320-messen.mjs meldete bei 320 px "scrollWidth=492
   (172 px zuviel), Taeter: 36". Ursache: .fussspalte verlangt grid-column 4.
   Im schmalen Raster gibt es nur EINE Spalte, also legte das Raster drei
   leere Spalten dazu und der Fuss wurde 492 px breit.
   Das Zuruecksetzen muss ganz unten stehen: Medienabfragen erhoehen die
   Spezifitaet nicht, und die Grundregel .fussspalte steht weiter oben im
   selben Blatt -- weiter oben eingefuegt blieb sie wirkungslos. */
@media (max-width: 1100px) {
  .fussspalte { grid-column: auto; grid-row: auto; justify-self: stretch; }
}

/* ---------- Drittelraster unter dem Kinderblock ----------
   Michael 23.09.2026: "Mach darunter linke Seite 1/3 und rechte Seite 2/3
   Container." 1355 Inhalt = 1/3 + 24 Rinne + 2/3, also 443,7 und 887,3.
   Der Versatz nach oben ist derselbe wie zwischen zwei Bildreihen (-40),
   damit der Block auf demselben Achter-Raster sitzt wie alles darueber. */
.drittelreihe {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--a3);
  align-items: start; margin-top: -40px;
}
.drittelreihe figure { margin: 0; }
.drittelreihe img { width: 100%; height: auto; display: block; }
@media (max-width: 809px) {
  .drittelreihe { grid-template-columns: 1fr; gap: var(--a4); margin-top: 0; }
}

/* ---------- Markierte Textstellen ----------
   Michael 23.09.2026: "Wenn ich es markiere, soll es nicht braun sein,
   sondern ein leichtes schoenes Beige."
   Ohne eigene Regel nimmt der Browser sein Systemblau -- das ist der
   einzige Fleck auf der Seite, der nicht aus der Hauspalette kommt.
   #E6DDCD liegt zwischen --linie (#DDD5C9) und --grund (#F3EEE7), also
   im warmen Papierton. Schrift bleibt --tinte: 8,9:1 Kontrast. */
::selection      { background: #E6DDCD; color: var(--tinte); }
::-moz-selection { background: #E6DDCD; color: var(--tinte); }

/* ---------- Zimmergleis: Fassung A3 ----------
   Michael 23.09.2026 aus vier Anschnitten gewaehlt: "A3 ist ganz gut."
   Zwei ganze Zimmer stehen auf 600 px, das angeschnittene Viertel liegt
   im rechten Seitenrand statt im Satzspiegel. Dafuer laeuft das Gleis
   ueber die Inhaltsbreite hinaus bis an den Fensterrand -- 50 % ist die
   halbe Gleisbreite, 50vw das halbe Fenster.
   Das Polster rechts haelt den Anschlag beim Durchscrollen auf dem
   Seitenrand, sonst klebt die letzte Karte an der Fensterkante. */
@media (min-width: 1101px) {
  /* Michael 24.09.2026: "Druck eine Spur nach links, das ist zu weit
     draussen, sieht angeklebt aus." Gemessen bei 1440: alles andere endet
     auf 1398, nur das Gleis lief bis 1440, also bis an die Fensterkante.
     Jetzt Karte 590 statt 600 und Deckel 1375 (590 + 24 + 590 + 24 + 147).
     Rechte Kante 1418, damit 22 px Luft zum Fenster -- und der Anschnitt
     bleibt bei einem Viertel. */
  /* 30.09.2026, Michael: "Ich moechte, dass man am Anfang das erste Bild sieht
     (Modern) und dann die Haelfte vom Modern Top. Die einzelnen Karten muessen
     groesser werden."
     Rechnung bei 1440 px: das Gleis beginnt bei 43 und ist auf 1375 gedeckelt,
     also endet es auf 1418. Eine ganze Karte plus Rinne plus eine halbe Karte:
     900 + 24 + 450 = 1374. Damit steht die zweite Karte exakt zur Haelfte im
     Bild. Vorher waren es 590 px -- zwei ganze Karten und ein Viertel.
     Die Karte wird dadurch um die Haelfte breiter, die Bildflaeche waechst von
     590 x 738 auf 900 x 600, also um 24 Prozent. */
  #zimmer .karte { flex: 0 0 900px; }
  /* Das Bild trug aspect-ratio 475/594 (hochkant 4:5) als Inline-Angabe. Die
     Fotos selbst sind QUER (gemessen 503 x 332, also 3:2) -- mit object-fit
     cover wurde bei jedem Zimmer oben und unten weggeschnitten. 3:2 zeigt das
     Foto so, wie es aufgenommen ist, und haelt die Karte bei 831 px Hoehe
     innerhalb eines 900-px-Fensters. */
  #zimmer .karte img { aspect-ratio: 3 / 2 !important; }
  /* Bei 1920 px waere der Anschnitt sonst kein Viertel mehr, sondern 65 %
     (gemessen 23.09.2026). Der Deckel haelt ihn: 600 + 24 + 600 + 24 + 150
     = 1398 px, also genau zwei ganze Karten und ein Viertel. */
  /* Die 22 px Luft muessen bei JEDER Breite bleiben. Ohne den Zuschlag
     klebte das Gleis bei 1280 wieder an der Kante (gemessen: Luft 0). */
  #zimmer .gleis { margin-right: calc(50% - 50vw + 22px); max-width: 1375px;
                   padding-right: var(--rand, 40px); }
  #zimmer .gleispfeil.vor { right: 64px; }
}


/* ---------- Zimmerkopf: der Satz auf drei Zeilen ----------
   Michael 24.09.2026: "3 Zeilen."
   Gemessen: 305 Zeichen liefen auf 1035 px in ZWEI Zeilen, also rund
   152 Zeichen je Zeile. Gemessen wurde danach die Zeilenzahl fuer jede
   Breite von 700 bis 920 px: ueberall genau drei Zeilen, bei 690 px
   waren es vier. 800 px liegt in der Mitte dieses Bandes, also weit weg
   von beiden Kanten. */
.zimmerkopf .satz p { max-width: 800px; }

/* ---------- Datum im Buchungsformular und in der Tafel ----------
   Michael 24.09.2026: "Die Schrift vom Datum eine Spur heller."
   Gemessen stand es auf #3A342F, derselbe Wert wie die Unterlinie.
   Jetzt #5C554F (--text2 der Hausfarben), ein Schritt heller. Kontrast
   auf #F3EEE7 bleibt bei 7,6:1, also weit ueber der Grenze. */
.buchform .feldknopf,
.buchform input,
.cg-datblock .cg-dat-in { color: #5C554F; }

/* ---------- Schieberzeile naeher an die Zimmerkarten ----------
   Michael 24.09.2026: "Etwas zu viel Abstand in jedem Breakpoint."
   Gemessen bei 390, 810 und 1440: ueberall 184 px zwischen Kartentext und
   der Zeile "01 / 11". Die setzen sich zusammen aus row-gap 144 des
   Abschnitts und margin-top 40 der Zeile. Der grosse Abstand gehoert
   zwischen die BLOECKE, nicht zwischen Gleis und seine eigene Bedienzeile.
   Der Zug nach oben nimmt den row-gap heraus, uebrig bleiben 40 px. */
/* Der Zug nach oben muss GENAU den row-gap aufheben. Stand er fest auf
   144, waehrend der Abschnitt 64 hatte, zog er die Schieberzeile 104 px
   in den Kartentext hinein (gemessen 24.09.2026, Fassung 2). Darum
   beide aus derselben Variablen. */
#zimmer { --zgap: 144px; row-gap: var(--zgap); }
#zimmer .gleissteuerung { margin-top: calc(var(--a4) - var(--zgap)); }

/* ---------- Wortmarke im Kopf eine Stufe duenner ----------
   Michael 24.09.2026: "Die Schrift etwas duenner."
   Oswald 300 war bisher der leichteste vorhandene Schnitt. Oswald 200 ist
   jetzt mitgeliefert (selbst gehostet, 7,5 KB, keine Verbindung zu Google).
   Regel 22 bleibt: Logo-artiges ist Oswald, nur der Schnitt wird leichter. */
.wortmarke { font-weight: 200; }

/* ---------- Tafel: mehr Abhebung, Seite bleibt scrollbar ----------
   Michael 24.09.2026: "Etwas mehr Schatten. Oder den Hintergrund etwas
   dunkler. Aber scrollbar bleiben."
   Beides, je zur Haelfte: der Schleier geht von 0,42 auf 0,58, der Schatten
   wird tiefer statt breiter. Der Schleier liegt auf position:fixed und
   nimmt der Seite kein Scrollen -- kein overflow:hidden am body, damit
   bleibt es scrollbar. */
/* probe-tafel-milchglas.css setzt "body[data-ptf] .gbt-schleier" auf
   transparent und ist damit spezifischer. Ohne denselben Vorsatz bleibt
   der Schleier unsichtbar (gemessen: rgba(0,0,0,0)). */
body[data-ptf] .gbt-schleier, .gbt-schleier { background: rgba(38,34,30,.58); }

/* Michael 24.09.2026: "Wenn ich den Chatbot oeffne, warum diese Verdunklung
   bei der Belegung?" Der Chat bringt einen EIGENEN Schleier mit (0,42).
   Steht die Tafel schon offen, liegt deren Schleier bereits darunter -- der
   zweite verdunkelt nur noch den Kalender. Solange die Tafel offen ist,
   bleibt der Chat-Schleier deshalb aus. */
html.cg-tafel .gc-schleier { background: transparent; }
.gbt-tafel {
  box-shadow: 0 60px 140px -40px rgba(24,21,19,.62),
              0 18px 48px -18px rgba(24,21,19,.34),
              0 0 0 1px rgba(38,34,30,.06);
}

/* ---------- Auf- und Zugehen der Tafel ----------
   Michael 24.09.2026: "Mach den Effekt mit dem Dunklerwerden etwas
   schoener. Nicht kaputt. Was macht ihr Emil Kowalski."

   Nach Emil Kowalskis Regeln, Punkt fuer Punkt:
   1. Eintritt und Austritt sind VERSCHIEDEN lang. Eintritt darf Zeit
      haben (320 ms), Austritt muss schnell sein (180 ms) -- sonst fuehlt
      sich Schliessen traege an.
   2. ease-out beim Eintritt, und zwar eine EIGENE Kurve. Die eingebauten
      sind zu schwach: cubic-bezier(.23,1,.32,1).
   3. Nie aus scale(0). Wir starten bei .97, das ist schon sichtbar.
   4. Nur transform und opacity bewegen -- beides laeuft auf der GPU.
   5. Unschaerfe maskiert den Uebergang: der Schleier faehrt seinen Blur
      von 0 auf 8 px mit. Unter 20 px bleiben, sonst wird Safari teuer.
   6. CSS-Transitions statt Keyframes: sie lassen sich mitten in der
      Bewegung umdrehen, wenn jemand schnell zu- und wieder aufmacht.
   7. Wer Bewegung abbestellt hat, bekommt nur noch die Deckkraft. */
body[data-ptf] .gbt-schleier, .gbt-schleier {
  transition: opacity 180ms cubic-bezier(.4,0,1,1),
              -webkit-backdrop-filter 180ms cubic-bezier(.4,0,1,1),
              backdrop-filter 180ms cubic-bezier(.4,0,1,1);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
}
body[data-ptf] .gbt-schleier.da, .gbt-schleier.da {
  transition: opacity 320ms cubic-bezier(.23,1,.32,1),
              -webkit-backdrop-filter 320ms cubic-bezier(.23,1,.32,1),
              backdrop-filter 320ms cubic-bezier(.23,1,.32,1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body[data-ptf] .gbt-tafel, .gbt-tafel {
  transform: translate(-50%,-50%) translateY(10px) scale(.97);
  transition: opacity 180ms cubic-bezier(.4,0,1,1),
              transform 180ms cubic-bezier(.4,0,1,1);
}
body[data-ptf] .gbt-tafel.da, .gbt-tafel.da {
  transform: translate(-50%,-50%) translateY(0) scale(1);
  transition: opacity 320ms cubic-bezier(.23,1,.32,1),
              transform 320ms cubic-bezier(.23,1,.32,1);
}
@media (prefers-reduced-motion: reduce) {
  .gbt-schleier, .gbt-schleier.da, .gbt-tafel, .gbt-tafel.da {
    transition: opacity 120ms linear !important; transform: translate(-50%,-50%) !important;
  }
  .gbt-schleier, .gbt-schleier.da { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Eingabetext im Chat so gross wie der Platzhalter ----------
   Michael 24.09.2026: "Der Eingabetext ist zu klein, soll so gross sein
   wie in Abbildung zwei."
   Gemessen: Platzhalter 16 px / 1,6 px Sperrung, getippter Text nur
   10 px / 1,2 px. Die 10 px stammen aus einer Regel vom 20.09.2026 mit
   !important, die den Platzhalter auf EINE Zeile zwingen sollte -- sie
   traf aber den ganzen Textbereich mit. Der Platzhalter bleibt einzeilig,
   dafuer sorgt die Auslassungsregel daneben, nicht die Schriftgroesse. */
html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea {
  /* Michael 24.09.2026, zweiter Anlauf: "Die Schrift ist immer noch zu
     klein." 16 px stimmten zwar mit dem Platzhalter ueberein, wirken in
     DM Mono mit Versalien und weiter Sperrung aber kleiner als der
     Fliesstext daneben (Abhaya Libre 17 px). Jetzt 18 / 26 px, und die
     Sperrung von .1em auf .06em, damit die Zeile nicht laenger wird. */
  /* Michael 24.09.2026, dritter Anlauf: "Die Schrift um zwei Punkt
     kleiner." 18 -> 16 px, Zeile 26 -> 24. */
  font-size: 16px !important;
  letter-spacing: .06em !important;
  line-height: 24px !important;
}
html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea::placeholder {
  font-size: 16px; letter-spacing: .06em;
}

/* ---------- Kieseltypografie nach Michaels Abbildung zwei ----------
   Michael 24.09.2026: "Ersetze die Typografie von Bild eins mit der von
   Bild zwei, setze sie genau uebereinander und miss sie aus."

   Ausgemessen wurden die zwei Bildschirmfotos selbst (Pixel, nicht
   geschaetzt): der Kiesel ueber seine dunkle Flaeche, die Schrift ueber
   die hellen Pixel INNERHALB dieser Flaeche.

     Bild 1   Kiesel 381 px   Buchstabenhoehe 25   Zeilenabstand 38,7
     Bild 2   Kiesel 350 px   Buchstabenhoehe 20   Zeilenabstand 30,7

   Auf die Kieselbreite bezogen:
     Buchstabenhoehe  0,0656 gegen 0,0571   ->  Faktor 0,870
     Zeilenabstand    0,1015 gegen 0,0876   ->  Faktor 0,863

   Das Verhaeltnis Zeilenabstand zu Buchstabenhoehe ist in beiden gleich
   (1,548 und 1,535) -- es ist also dieselbe Schrift, nur kleiner gesetzt.
   Bei 183 px Kiesel heisst das: 16 x 0,870 = 13,9 -> 14 px, und
   0,0876 x 183 = 16,0 px Zeilenabstand.
   Die Schriftfarbe misst in Bild 2 heller (254 gegen 247 im Kern), darum
   #F6F2EA statt #F3EEE7 -- beides Hausfarben, ein Schritt heller.

   Gegenprobe am GERENDERTEN Kiesel, mit demselben Pixelverfahren wie an
   den Vorlagen: Zeilenabstand traf auf 0,2 Prozent, die Buchstaben waren
   noch 4,4 Prozent zu gross. 14 x 0,956 = 13,4 -> 13,5 px. */
/* UEBERHOLT AM 24.09.2026, abends. Michael hat den Kiesel der Landingpage
   gezeigt und gesagt "bau den Kiesel ein auf der Home-Seite". Damit gilt
   nicht mehr die Rechnung oben, sondern der GEMESSENE Stand der Landingpage
   (.ssc-n / .ssc-i am gerenderten DOM von wandern.hotel-gebhard.at, 1440 px):
     Kasten     244 x 232
     Oberzeile  DM Mono 400, 11 px / 19 px, Sperrung 2,64 px  = 0,24 em
     Unterzeile Cormorant Garamond 400, 18 px / 18 px, 7,2 px = 0,40 em
     beide Versalien, Farbe #F6F2EA, dazwischen ein senkrechter Strich
   Unser Kiesel ist 183 px statt 244, Faktor 0,75. Die Groessen sind damit
   umgerechnet und auf halbe Pixel gerundet. */
.kieseltext { width: auto; text-align: center; color: #F6F2EA; }
.kieseltext .kn {
  display: block; font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: 11px; line-height: 19px; letter-spacing: 2.64px; text-indent: 2.64px;
  text-transform: uppercase;
}
.kieseltext .kstrich {
  display: block; width: 1px; height: 16px; margin: 11px auto 10px;
  background: rgba(246,242,234,.55);
}
.kieseltext .ki {
  /* Die Landingpage meldet Gewicht 400. Dieses Projekt laedt von Cormorant
     Garamond nur den Schnitt 300 -- mit 400 rechnet der Browser einen
     kuenstlich breiteren Satz, gemessen 154 px statt der 150 px, die der
     Kiesel am Handy breit ist. Darum 300. */
  display: block; font-family: "Cormorant Garamond", 'Cormorant Ersatz',Georgia, serif; font-weight: 300;
  font-size: 18px; line-height: 18px; letter-spacing: 7.2px; text-indent: 7.2px;
  text-transform: uppercase;
}

/* =====================================================================
   Kalendertafel auf dem Swiss Grid, DM Mono
   Michael 24.09.2026: "Übernimm die" (probe-tafel-mono.html).
   Die Probe steht in probe-tafel-inter.css und probe-tafel-mono.html,
   gemessen: Zelle 40, sieben Tage 280, Rinne 40, Zeile 56, Polster 72.
   Hier werden dieselben Zahlen auf das ECHTE Bauteil gelegt. Sicherung
   davor: kopf.css.vor-monoraster, chat-glas.css.vor-monoraster.
   ===================================================================== */
@media (min-width: 1024px) {
  html[data-swiss] .gbt-tafel[data-form="breit"] {
    --e: 8px; --zelle: 40px; --spalte: 280px; --rinne: 40px;
    width: calc(3 * var(--spalte) + 2 * var(--rinne) + 2 * 72px);
    font-family: 'DM Mono', ui-monospace, monospace;
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kopf,
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-rumpf { padding-inline: 72px; }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kopf { padding-block: 72px 40px; }

  /* Kalenderblock 2 x 280 + Rinne, Belegung 280 */
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-satz {
    display: grid;
    grid-template-columns: calc(2 * var(--spalte) + var(--rinne)) var(--spalte);
    column-gap: var(--rinne);
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-gitter,
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kalkopf {
    grid-template-columns: repeat(7, var(--zelle)); width: var(--spalte);
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-gitter button {
    width: var(--zelle); height: var(--zelle);
    font: 300 14px/var(--zelle) 'DM Mono', ui-monospace, monospace;
  }
  /* Schriftstufen wie in der Probe */
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kopf h2 {
    font: 300 15px/24px 'DM Mono', ui-monospace, monospace;
    letter-spacing: .16em; text-transform: uppercase;
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kalkopf span,
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-monat {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-zeile > span:first-child {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .cg-dat-l { font-size: 11px; letter-spacing: .16em; }
  html[data-swiss] .gbt-tafel[data-form="breit"] .cg-dat-in { font-size: 16px; }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-knopf {
    font-size: 11px; letter-spacing: .16em; height: 56px;
  }
  /* Der Chatknopf: gleicher Grund wie der Knopf, getrennt durch eine
     Haarlinie -- nicht dunkler, sonst wirkt er wie ein zweites Feld. */
  html[data-swiss] .gbt-tafel[data-form="breit"] .cg-ruf-fuss {
    background: #3D3733; border-left: 1px solid rgba(246,242,234,.22);
    height: 56px; width: 56px;
  }
}

/* ===== Kiesel am Handy -- MUSS GANZ UNTEN STEHEN =====================
   Gemessen am 24.09.2026: bei 390 px rechnete der Browser trotzdem mit
   18 px Schrift. Grund ist nicht der Media Query, sondern die Reihenfolge:
   ein @media erhoeht die Spezifitaet NICHT, und die Desktop-Regeln fuer
   .kieseltext .ki stehen weiter unten in dieser Datei. Derselbe Fehler wie
   bei .fussspalte am 23.09.2026. Darum stehen die Handywerte hier am Ende.
   Werte von der Landingpage bei 390 px abgelesen:
     Kasten 150 x 143, Oberzeile 9/14 sperr 1,62, Unterzeile 12,5 sperr 3,75
   ===================================================================== */
@media (max-width: 760px) {
  /* Zentriert ueber left, NICHT ueber transform: die Kiesel-Parallaxe in
     eintritt-home.js schreibt selbst auf transform und haette ein
     translateX(-50%) ueberschrieben -- gemessen am 24.09.2026, der Kiesel
     stand danach bei x=175 statt x=120 in einem 390 px breiten Bild. */
  .kiesel { left: calc(50% - 75px); top: 12%; width: 150px; height: 143px; }
  .kieseltext { padding: 0 6px; }
  .kieseltext .kn { font-size: 11px; line-height: 14px; letter-spacing: 1.62px; text-indent: 1.62px; }
  .kieseltext .kstrich { height: 12px; margin: 8px auto 7px; }
  .kieseltext .ki { font-size: 12.5px; line-height: 12.5px; letter-spacing: 3.75px; text-indent: 3.75px; }
}

/* ===== Chatfenster an die Textkante, nicht an den Fensterrand ==========
   Michael 25.09.2026: "Der Chatbot ist zu weit an der rechten Seite. Setz
   ihn etwas mehr links, er ist ganz drueben, das schaut nicht so gut aus."
   Gemessen war er mit 24 px am Fensterrand -- der Seiteninhalt endet aber
   schon frueher, bei 1440 px Fenster naemlich bei 1397. Deshalb wird der
   Abstand jetzt aus dem SATZSPIEGEL gerechnet statt aus dem Fenster:
     rechts = (100vw - 1435) / 2 + 80
   Erster Anlauf endete genau auf der Satzspiegelkante (+40) -- gemessen nur
   43 px statt 24 px bei 1440, also kaum ein Unterschied. Mit +80 sind es
   83 px, das ist sichtbar weg vom Rand, ohne dass das Fenster in die Mitte
   rutscht. Unter 1435 px greift der Mindestwert 40 px.
   Der Selektor ist derselbe wie in chat-glas.css; diese Datei wird spaeter
   geladen und gewinnt dadurch. ===================================== */
@media (min-width: 810px) {
  html[data-chat="C"]:not(.cg-tafel) .gc-fenster {
    right: max(40px, calc((100vw - var(--breite, 1435px)) / 2 + 80px));
  }
}

/* ===== Bewertungsband (Fassung A, freigegeben 30.09.2026) ================
   Michael: "Lass die Logos von rechts nach links fahren wie in einem
   Karussell. Langsam und Smooth. Immer vier sind zu sehen. Sollte eines
   rausgehen kommt es auf der anderen Seite wieder." Ausgewaehlt hat er
   Fassung A: die Zahlen, neu gesetzt -- keine Portal-Logos.

   KEIN JAVASCRIPT: die Bahn ist ein Raster mit acht gleich breiten Spalten
   und doppelter Fensterbreite. 12,5 %% von 200 %% sind genau 25 %% des
   Fensters, also vier sichtbare Karten -- ohne eine Breite zu messen.
   Der Lauf endet bei -50 %%, also nach genau einem Satz: dort steht Satz zwei
   da, wo Satz eins begann, und der Ruecksprung ist nicht zu sehen.

   Gemessen 30.09.2026 bei 1440 px: 4 sichtbar, Bahn 2,000 x Fenster,
   20 px/s nach links, kein waagrechter Ueberlauf.                          */
.bewertungsband {
  /* Ziel: 104 px zwischen Knopf und Band -- derselbe Abstand wie von der
     Verweiszeile zum Buchungsformular (beide gemessen 30.09.2026).
     Der Abschnitt .buchen ist ein Flexkasten und legt selbst 128 px zwischen
     seine Bloecke; mit 128 px kommen gemessene 168 px heraus. */
  margin-top: 128px;
  padding-bottom: 60px;
}
.bb-fenster {
  overflow: hidden;
  /* Weicher Auslauf statt harter Schnittkante. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bb-bahn {
  display: grid; grid-auto-flow: column; grid-auto-columns: 12.5%; width: 200%;
  /* linear, weil eine Beschleunigungskurve bei Dauerbewegung als Stocken
     gelesen wird. transform laeuft ausserhalb des Hauptfadens. */
  animation: bb-lauf 68s linear infinite;
}
.bb-kopie { display: contents; }
.bb-karte { display: grid; justify-items: center; text-align: center; row-gap: 10px; padding: 0 16px; }
@keyframes bb-lauf { from { transform: translate3d(0,0,0); }
                     to   { transform: translate3d(-50%,0,0); } }

/* Dauerbewegung ueber 5 s braucht eine Pause (WCAG 2.2.2). */
.bb-fenster:hover .bb-bahn,
.bb-fenster:focus-within .bb-bahn { animation-play-state: paused; }

/* Schrift: die Einheit sitzt auf der Grundlinie der Zahl statt in ihrer
   Mitte, Name und Anzahl bekommen je eine eigene Stufe. */
.bb-zahl {
  font-family: "Cormorant Garamond", 'Cormorant Ersatz', Georgia, serif;
  font-weight: 300; font-size: 44px; line-height: 1; color: var(--tinte);
  letter-spacing: -0.01em; margin: 0;
}
.bb-einheit {
  font-family: Inter, system-ui, sans-serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grau);
  margin-left: 10px; vertical-align: baseline;
}
.bb-name {
  font-family: Inter, system-ui, sans-serif; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinte); margin: 0;
}
.bb-anzahl {
  font-family: Inter, system-ui, sans-serif; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grau); margin: 0;
}

@media (max-width: 899px) {
  /* Am Handy sind vier Karten nicht lesbar: zwei sichtbar, Zahl kleiner.
     Karte = 50 %% des Fensters, also Bahn 400 %% und Spalte 12,5 %% davon.
     Mit 25 %% stand gemessen genau EINE Karte im Fenster (350 px bei 390). */
  .bb-bahn { grid-auto-columns: 12.5%; width: 400%; }
  .bb-zahl { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung braucht es keine zweite Garnitur und keinen Auslauf. */
  .bb-bahn { animation: none; width: 100%; grid-auto-columns: 1fr; }
  .bb-kopie { display: none; }
  .bb-fenster { -webkit-mask-image: none; mask-image: none; }
}

/* ===== Startseite ohne Vorspann (freigegeben 30.09.2026) =================
   Michael: "Baue die Variante A ein." Leitsatz unter der Ueberschrift und
   Kleinzeile darueber sind in bauen.py entfallen; hier stehen die zwei
   Abstaende, die sich dadurch aendern.

   1. LUFT UNTER DER UEBERSCHRIFT. Gemessen war der Weg Titel -> Fliesstext
      36 px -- das war der Abstand, der frueher zum Leitsatz fuehrte. Ohne
      ihn sitzt der Text zu dicht am Titel. 56 px ergeben gemessene 96 px
      in allen sechs Bloecken -- gemessen NACH dem vollen Lauf von
      alles-bauen.sh. Wer nur bauen.py laufen laesst, misst andere Werte:
      querverweise.py haengt danach noch den Verweis in dieselbe Rasterzeile. !important, weil .zimmerkopf2 einen eigenen
      Abstand setzt: der erste Block stand sonst bei 40 statt 96 px.

   2. RANDSPALTE SCHLIESST UNTEN MIT DEM TEXT AB. Sie lief ueber ZWEI
      Rasterzeilen (grid-row 1 / span 2), also auch ueber die Zeile des
      Verweises, und endete 55 px unter dem Text. Nur grid-row zu setzen
      reichte nicht -- dann rutschte sie in die erste freie Zelle nach LINKS.
      Die Spalte gehoert mitgesetzt: das Raster hat drei, sie ist die dritte.
      Die HOEHE bleibt unangetastet: zimmerkopf2.js misst die Unterkanten und
      setzt einen negativen margin-top; eine erzwungene Hoehe hat das Skript
      ins Leere laufen lassen (letztes dd stand 71 px unter seinem Kasten).
      Gemessen nach dem Einbau: 0 px Unterschied in allen sechs Bloecken.    */
.abschnitt > .satz { margin-top: 56px !important; }
.abschnitt > .satz > .rand { grid-row: 1 !important; grid-column: 3 !important; }

@media (max-width: 1199px) {
  /* Ab hier legt lp-stil.css die Randspalte ohnehin unter den Text. */
  .abschnitt > .satz > .rand { grid-column: 1 / -1 !important; grid-row: auto !important; }
}


/* Michael 30.09.2026: "Halt mehr Abstand hier" -- zwischen der Verweiszeile
   unter den haeufigen Fragen und dem Buchungsformular. Gemessen waren es
   104 px; die naechste Stufe der Hausreihe (16 - 24 - 40 - 64 - 104 - 168)
   ist 168. Der Abstand unter dem Knopf zieht mit, damit oben und unten
   gleich viel Luft steht (sein Wunsch vom selben Tag). */
.abschnitt.buchen { padding-top: 168px; }

/* Einleitung: gleicher Abstand ueber und unter der Ueberschrift ============
   Michael 30.09.2026: "Mach gleich viel Abstand von der Vor-Ueberschrift auf
   die Ueberschrift und von der Ueberschrift auf den Fliesstext."
   Gemessen vorher: Kleinzeile -> H1 24 px, H1 -> Fliesstext 64 px. Der groessere
   der beiden Werte steht schon in der Hausreihe (16-24-40-64-104), also zieht
   die obere Seite nach: 64 px auf beiden Seiten. */
.einleitung h1 { margin-top: 64px; }

/* ===== Fliesstext 20 % heller (Michael 30.09.2026) ======================
   "Mach den Fliesstext 20 % heller auf der ganzen Seite."

   Gerechnet wird gegen den Papierton #F3EEE7: die Textfarbe wandert 20 % der
   Strecke zum Hintergrund.
     Abschnitte  #57534B -> #76726A
     Einleitung  #6B635F -> #867F7A

   GEMESSEN UND FESTGEHALTEN: damit faellt der Kontrast unter den Wert, den
   WCAG fuer Fliesstext verlangt (4,5:1).
     Abschnitte  6,63:1 -> 4,15:1
     Einleitung  5,09:1 -> 3,41:1
   Der groesste Schritt, der die 4,5:1 noch haelt, waere 15 % bei den
   Abschnitten (#6E6A62, 4,66:1) und 5 % bei der Einleitung. Michael hat 20 %
   angeordnet; die Zahlen stehen hier, damit die Entscheidung nachlesbar ist
   und beim Barrierefreiheitsgesetz niemand raten muss.                      */
.lauf,
.abschnitt .satz .lauf,
.einleitung .lauf,
.tbreit .lauf,
.satz > .lauf { color: #706C65 !important; }
.einleitung .lauf { color: #716B67 !important; }
/* Kontrast (Michael 24.10.2026: "Kontrast anheben, nur die vier Gruppen bis 4,5:1"):
   Abschnitte #76726A 4,15:1 -> #706C65 4,52:1, Einleitung #867F7A 3,41:1 -> #716B67 4,55:1.
   Gleicher Farbton, nur so weit dunkler wie noetig. Zurueck: kopf.css.vor-kontrast-24102026 */

/* Die Werte in der dritten Spalte ziehen mit (Michael 30.09.2026: "Auch die
   zweite Zeile der dritten Spalte immer 20 % heller"). Gerechnet wie beim
   Fliesstext, 20 % der Strecke zum Papierton: #3D3733 -> #615C57.
   Hier bleibt der Kontrast im gruenen Bereich: 10,15:1 wird zu 5,73:1. */
.rand dd, .abschnitt .satz .rand dd { color: #615C57 !important; }

/* Die dritte Spalte schliesst rechts mit dem Raster ab ====================
   Michael 30.09.2026: "Padding der linken Seite, damit es besser etwas
   zentriert ist." / "Zentriert".

   Gemessen bei 1920 px: das Raster steht exakt mittig (283 px links wie
   rechts). Schief wirkt es aus einem anderen Grund -- der laengste Text der
   dritten Spalte endet 162 px VOR der rechten Rasterkante, weil die Spalte
   343 px breit ist und der Text nur rund 180 braucht. Die Flaeche kippt
   dadurch nach links, obwohl die Kanten stimmen.

   Statt den ganzen Block nach rechts zu schieben (das haette Bilder, Leiste
   und Verweise von ihrer Kante geloest) rueckt nur die Randspalte an die
   rechte Rasterkante. Die Luft wandert damit in die Rinne, wo sie nicht
   auffaellt, und aussen bleibt alles auf seiner Linie. */
/* justify-self: end am 30.09.2026 zurueckgenommen -- siehe Block "Textraster
   nach Michaels Abbildung" weiter unten. */
@media (max-width: 1199px) {
  /* Darunter steht die Spalte ohnehin unter dem Text. */
  .abschnitt > .satz > .rand { justify-self: stretch; }
}

/* Die zwei versetzten Bilder ruecken zusammen ============================
   Michael 30.09.2026: "weniger Abstand". Gemessen lag zwischen den beiden
   Bildern die mittlere Rasterspalte mit 162 px (Raster 44fr 12fr 44fr).
   Neu 4fr statt 12fr: gemessene 54 px bei 1440 und 1920 px -- nah an der
   Hausstufe 64, aber als Anteil, damit es mit der Breite mitwaechst. */
.versatz { grid-template-columns: 48fr 4fr 48fr; }

/* Mehr Luft zum linken Rand am Handy und Tablet ==========================
   Michael 30.09.2026: "Dafür fehlt der Abstand auf der linken Seite zum
   linken Rand." Gemessen: unter 810 px steht --rand auf 20 px, darüber auf
   40. 20 px sind zu wenig, der Text klebt. Neu 28 px -- mehr Luft, ohne dass
   die Zeile am Handy zu kurz wird (bei 390 px bleiben 334 px Satzbreite). */
@media (max-width: 809px) {
  /* 30.09.2026, zweite Runde: 28 px waren Michael noch zu wenig ("zu wenig
     Abstand von links nach rechts"). Jetzt 36 px; bei 390 px Fensterbreite
     bleiben 318 px Satzbreite, das traegt rund 42 Zeichen je Zeile. */
  :root { --rand: 36px; }
}

/* ===== Textraster nach Michaels Abbildung (30.09.2026) ==================
   Michael: "Du machst immer am Schluss zwischen zweiter und dritter Spalte zu
   viel Abstand. Und dafuer vor der ersten Spalte auf der linken Seite zu
   wenig. Es klebt zu sehr links. Mach es genauso wie in dieser Abbildung."

   AUS DER ABBILDUNG GEMESSEN (Bildbreite 2000 px, Anteile in Prozent):
     Bildkante und Kicker    2,40 %
     Text der ersten Spalte  6,75 %   -> der Text steht 4,35 % weiter innen
     zweite Spalte          41,80 %      als die Bilder
     dritte Spalte          80,65 %
     Rasterkante rechts     97,40 %

   Daraus das Raster, bezogen auf die Rasterbreite:
     Spalte 1  33,4 %   Rinne 1   5,3 %
     Spalte 2  35,0 %   Rinne 2   7,9 %
     Spalte 3  18,5 %

   Bei 1440 px sind das: Einzug 63 px, dann 431 / 68 / 452 / 102 / 239 px.
   Die Rinnen sind damit UNGLEICH -- vor der dritten Spalte steht mehr Luft
   als zwischen den zwei Textspalten. Genau das zeigt die Abbildung, und genau
   das war mit "4fr 4fr 3fr" und einer einzigen Rinne von 48 px nicht
   darstellbar. Deshalb fuenf Rasterspalten: drei fuer Inhalt, zwei als Rinne.

   Die BILDER bleiben auf ihrer Kante. Eingerueckt wird nur, was Text ist. */
.abschnitt > .kopf1,
.abschnitt > .satz,
.abschnitt > .qv-wege,
.abschnitt > .leitsatz,
.tbreit > .kopf1,
.tbreit > .satz,
.tbreit > .qv-wege,
.tbreit > .leitsatz { padding-left: 63px; }

/* Text links und rechts gleich eingerueckt (Michael 27.10.2026): die Randspalte (Sommer 2026, Abholen, Pfand) stand buendig am Bildrand, links 63 px. */
/* 27.10.2026 Michael (Wellness): etwas mehr Abstand zwischen Spalte 2 und Randspalte (tbreit +24 px), und die letzte Zeile der Randspalte schliesst mit der letzten Zeile der tiefsten Textspalte ab. Die Randspalte hatte inline top:-77px und stand deshalb je nach Breite 2 bis 4 px zu tief; jetzt am unteren Rand des Satzes verankert (2 px: Grundlinien von 16 px/25,84 und 15 px/19,5 gleich). Zurueck: kopf.css.vor-wellness-rand-27102026 */
@media (min-width: 1200px) {
  html body section.tbreit > .satz > .rand { width: calc((100% - 126px) * 209 / 1001 - 62px); } /* 27.10.2026 Michael: 0,5 cm (19 px) weniger Abstand zu Spalte 2 als zuvor (81 px) */
  html body .tbreit > .satz > .rand[style*="top: -"] { top: auto !important; bottom: 2px !important; }
}
@media (min-width: 1200px) { .abschnitt > .satz, .tbreit > .satz { padding-right: 63px; } html body .abschnitt > .satz > .rand, html body .tbreit > .satz > .rand { width: calc((100% - 126px) * 209 / 1001 - 57px); } /* 27.10.2026 Michael: 1,5 cm (57 px) mehr Abstand zwischen Spalte 2 und Randspalte. Zurueck: kopf.css.vor-abstand-15cm-27102026 */ html body .abschnitt > .satz > .rand, html body .tbreit > .satz > .rand { right: 63px; } } /* die Randspalte ist absolut gesetzt und ignorierte das Padding: sie stand 63 px weiter rechts als der Text links (27.10.2026 gemessen) */

/* Text LINKS neben einem Bild (.tpaar.rechts) steht auf derselben Kante wie
   der Text der breiten Bloecke darunter: 63 px Einzug, gemessen 106 px statt
   43 px (12.10.2026). Darunter stapelt das Haus, dort ist der Einzug 0 wie bei
   .tbreit. Rechts neben dem Bild (ohne .rechts) liegt der Text auf der
   Bildspalte und bleibt, wie er ist. */
@media (min-width: 1200px) {
  .tpaar.rechts > .wort { padding-left: 63px; }
  /* Bilder bleiben auf ihrer Kante (43 px). Nur TEXT rueckt ein: Text rechts
     neben dem Bild bekommt rechts dieselben 63 px wie der Text links.
     Michael 12.10.2026. */
  .tpaar:not(.rechts) > .wort { padding-right: 63px; }
}

.abschnitt > .satz,
.tbreit > .satz {
  /* minmax(0, …): ohne die Null als Untergrenze nimmt eine fr-Spalte
     mindestens ihre min-content-Breite, und die erste Textspalte wurde
     dadurch breiter als ihr Anteil (gemessen: zweite Spalte bei 47,5 %
     statt der 41,8 % aus der Abbildung). */
  /* 27.10.2026 Michael: Abstand Spalte 2 zu Randspalte war 40 px gegen 100 px zwischen 1 und 2. Beide Rinnen jetzt gleich (66), Textspalten etwas schmaeler. Zurueck: kopf.css.vor-spalten-gleich-27102026 */
  grid-template-columns: minmax(0,322fr) minmax(0,66fr) minmax(0,338fr) minmax(0,66fr) minmax(0,209fr) !important;
  column-gap: 0 !important;
}
.abschnitt > .satz > .lauf:nth-of-type(1),
.tbreit > .satz > .lauf:nth-of-type(1) { grid-column: 1; }
.abschnitt > .satz > .lauf:nth-of-type(2),
.tbreit > .satz > .lauf:nth-of-type(2) { grid-column: 3; }
/* Die Randspalte laeuft ueber BEIDE Rasterzeilen und beginnt oben.
   Mit grid-row: 1 bestimmte sie die Hoehe der ersten Zeile, und der Verweis
   darunter rutschte bis zu 213 px vom Text weg (gemessen im Sommer-Block).
   Ueber zwei Zeilen gespannt bleibt Zeile 1 so hoch wie die Textspalten --
   der Verweis sitzt wieder direkt unter dem Text, und die Randspalte darf
   trotzdem laenger sein. align-self: start haelt sie oben buendig. */
/* Die Randspalte steht NEBEN dem Raster, nicht darin: als spannendes
   Rasterfeld verteilt der Browser ihre Ueberhoehe auf beide Zeilen, und der
   Verweis rutschte dadurch bis zu 158 px vom Text weg (Sommer-Block,
   gemessen). Absolut gesetzt beeinflusst sie keine Zeilenhoehe mehr; der
   Verweis sitzt direkt unter dem Text, die Spalte beginnt oben buendig.
   Breite 18,48 %% = ihr Anteil am Raster (185 von 1001). */
.abschnitt > .satz,
.tbreit > .satz { position: relative; }
.abschnitt > .satz > .rand,
.tbreit > .satz > .rand {
  position: absolute; top: 0; right: 0; width: calc((100% - 63px) * 209 / 1001);
  grid-column: auto !important; grid-row: auto !important;
}
/* Die Verweise tragen seit dem 29.09.2026 eigene Klassen (querverweise.css:
   weg-s1, weg-s2, weg-breit) und waren dort auf das alte DREISPALTIGE Raster
   gerechnet: s2 stand in Spalte 2, breit lief 1/3. Im neuen Fuenfspalter ist
   Spalte 2 die Rinne -- deshalb klebte der Strich mitten im Satz (gemessen
   106 bis 605 statt bis 1057). Hier werden dieselben Klassen auf die neuen
   Spalten umgerechnet, nichts an ihrer Bedeutung geaendert. */
.abschnitt > .satz > .qv-weg.weg-s1 { grid-column: 1 !important; }
.abschnitt > .satz > .qv-weg.weg-s2 { grid-column: 3 !important; }
.abschnitt > .satz > .qv-weg.weg-breit { grid-column: 1 / 4 !important; }

/* Die Verweiszeile unter dem Satz traegt dasselbe Raster. */
.abschnitt > .qv-wege,
.tbreit > .qv-wege {
  /* minmax(0, …): ohne die Null als Untergrenze nimmt eine fr-Spalte
     mindestens ihre min-content-Breite, und die erste Textspalte wurde
     dadurch breiter als ihr Anteil (gemessen: zweite Spalte bei 47,5 %
     statt der 41,8 % aus der Abbildung). */
  /* 27.10.2026 Michael: Abstand Spalte 2 zu Randspalte war 40 px gegen 100 px zwischen 1 und 2. Beide Rinnen jetzt gleich (66), Textspalten etwas schmaeler. Zurueck: kopf.css.vor-spalten-gleich-27102026 */
  grid-template-columns: minmax(0,322fr) minmax(0,66fr) minmax(0,338fr) minmax(0,66fr) minmax(0,209fr) !important;
  column-gap: 0 !important;
}
.abschnitt > .qv-wege > .qv-weg:nth-of-type(1), .tbreit > .qv-wege > .qv-weg:nth-of-type(1) { grid-column: 1 !important; }
.abschnitt > .qv-wege > .qv-weg:nth-of-type(2), .tbreit > .qv-wege > .qv-weg:nth-of-type(2) { grid-column: 3 !important; }
.abschnitt > .qv-wege > .qv-weg:only-of-type, .tbreit > .qv-wege > .qv-weg:only-of-type { grid-column: 1 / 4 !important; }

@media (max-width: 1199px) {
  /* Darunter stapelt das Haus ohnehin -- kein Einzug, kein Fuenfspalter. */
  .abschnitt > .kopf1, .abschnitt > .satz, .abschnitt > .qv-wege, .abschnitt > .leitsatz,
  .tbreit > .kopf1, .tbreit > .satz, .tbreit > .qv-wege, .tbreit > .leitsatz { padding-left: 0; }
  /* html body davor: ohne den hoeheren Vorrang blieb das Raster bei 1024 px
     dreispaltig (gemessen 172 / 101 / 575 px) -- und die zwei Verweise lagen
     uebereinander, weil sie Spalte 1 und 3 eines Rasters suchten, das es dort
     nicht mehr gibt. */
  html body .abschnitt > .satz, html body .abschnitt > .qv-wege,
  html body .tbreit > .satz, html body .tbreit > .qv-wege {
    grid-template-columns: 1fr 1fr !important; column-gap: 48px !important; }
  /* Und die Spaltenzuweisungen der Wege gelten nur im Fuenfspalter. */
  /* Auch die Klassen weg-s1/weg-s2 zuruecksetzen: sie stehen weiter oben mit
     !important und haben das Raster bei 390 px auf drei Spalten aufgezogen
     (gemessen 0 / 101 / 222 px, die erste Textspalte war 0 breit). */
  html body .abschnitt > .satz > .qv-weg,
  html body .tbreit > .satz > .qv-weg,
  html body .abschnitt > .satz > .qv-weg.weg-s1,
  html body .abschnitt > .satz > .qv-weg.weg-s2,
  html body .abschnitt > .satz > .qv-weg.weg-breit,
  html body .tbreit > .satz > .qv-weg.weg-s1,
  html body .tbreit > .satz > .qv-weg.weg-s2,
  html body .tbreit > .satz > .qv-weg.weg-breit { grid-column: auto !important; }
  /* Michael 30.09.2026: "Über beide Spalten, wenn es nur zwei Spalten gibt."
     Steht nur EIN Weg im Block, laeuft er ueber die ganze Satzbreite --
     sonst endet sein Strich mitten im Satz. Zwei Wege teilen sich die zwei
     Spalten wie der Text darueber. */
  html body .abschnitt > .satz > .qv-weg:only-of-type,
  html body .tbreit > .satz > .qv-weg:only-of-type { grid-column: 1 / -1 !important; }
  /* !important: die absolute Regel oben steht in derselben Stufe und hat ohne
     Vorrang gewonnen -- gemessen stand die Spalte bei 390 px mitten im Text. */
  .abschnitt > .satz > .rand,
  .tbreit > .satz > .rand { position: static !important; width: auto !important; }
  .abschnitt > .satz > .lauf:nth-of-type(1),
  .abschnitt > .satz > .lauf:nth-of-type(2),
  .abschnitt > .satz > .rand,
  .abschnitt > .satz > .qv-weg,
  .abschnitt > .qv-wege > .qv-weg { grid-column: auto !important; }
}

@media (max-width: 809px) {
  /* Am Handy EINE Spalte. Ohne diese Zeile hielt die !important-Regel von
     oben zwei Spalten fest, und die Seite lief 227 px ueber den Rand
     (gemessen bei 390 px). */
  /* html body davor: querverweise.css setzt fuer dieselbe Breite ein
     zweispaltiges Raster, und ohne den hoeheren Vorrang blieb es dabei
     (gemessen bei 390 px: 204 + 222 px statt einer Spalte). */
  html body .abschnitt > .satz, html body .abschnitt > .qv-wege,
  html body .tbreit > .satz, html body .tbreit > .qv-wege { grid-template-columns: 1fr !important; }
}

/* Die dritte Spalte liest sich als Paare ================================
   Michael 30.09.2026: "Zeile eins und zwei naeher, dann hat es mehr Abstand,
   dann Zeile drei und vier naeher, dann etwas mehr Abstand."

   Das ist das Naehe-Gesetz: was zusammengehoert, steht enger beieinander als
   zu seinen Nachbarn. Gemessen war beides fast gleich -- Etikett zu Wert und
   Paar zu Paar lagen so dicht beieinander, dass die Spalte als eine Reihe
   von acht Zeilen las statt als vier Angaben.

   Innen: das Etikett sitzt direkt auf seinem Wert (kein Abstand, die
   Zeilenhoehen tragen den Rest). Aussen: mindestens 36 px, gesetzt im
   Skript zimmerkopf2.js, das den Abstand ausrechnet.
   Verhaeltnis damit rund 1 : 3 -- ab da liest das Auge Gruppen. */
/* 30.09.2026, Nachtrag: "Etiketten und Erklaerung etwas mehr Abstand."
   Vorher 0 px -- das Etikett klebte auf seinem Wert. Jetzt 6 px; zwischen den
   Paaren stehen 36 px, das Verhaeltnis bleibt damit bei rund 1 : 6 und die
   Gruppen lesen sich weiter als Paare. */
.rand > div > dt { margin-bottom: 6px !important; line-height: 1.15 !important; }
.rand > div > dd { line-height: 1.3 !important; }

/* Textblock und Bilder: oben wie unten gleich viel Luft ==================
   Michael 30.09.2026: "Oben und unten gleich viel Abstand zu den Bildern.
   Optisch, nicht der tatsaechliche."

   GEMESSEN auf /wellness/ (1440 px), von der Tinte aus, nicht von der
   Kastenkante: Bild -> Ueberschrift 129 bis 160 px, letzte Textzeile -> Bild
   24 bis 57 px. Mehr als das Doppelte Unterschied.

   Optisch heisst hier: die Versalhoehe der Ueberschrift zaehlt, nicht der
   Kasten darum. Eine Cormorant-Zeile in 31 px traegt rund 12 px Luft ueber
   den Buchstaben; unten laeuft der Fliesstext mit rund 6 px Unterlaenge aus.
   Deshalb steht oben ein kleinerer Zahlenwert als unten -- 88 gegen 96 --,
   und beide Abstaende WIRKEN gleich.

   96 ist die Hausstufe (16 · 24 · 40 · 64 · 104 mit 96 als Zwischenwert im
   Bildtakt der Themenseiten). */
/* 95 statt 88: gemessen ab der obersten Tinte (der Kleinzeile) standen oben
   89 px gegen 99 unten. */
.tbreit { margin-top: 95px !important; }
/* Steht unter dem Bild eine Unterschrift, traegt sie schon 31 px; ohne diesen
   Abzug stand der Text dort 127 statt 96 px unter dem Bild (gemessen auf
   /essen-trinken/ und /wellness/). */
.tvoll:has(figcaption) + .tbreit,
.traster:has(figcaption) + .tbreit,
.tpaar:has(figcaption) + .tbreit,
.tduo:has(figcaption) + .tbreit { margin-top: 64px !important; }
.tbreit + .tvoll,
.tbreit + .traster,
.tbreit + .tpaar,
.tbreit + .tduo,
.tbreit + .tkarten,
.tbreit + .tstreifen {
  /* 96 -> 105 px. Michael am 01.10.2026: "Oben und unten gleich Abstand von
     den ersten und letzten Woertern zum Bild." Gemessen auf /wellness/ bei
     390 px: ueber dem Textblock 96 px Luft bis zur Schrift, darunter nur
     87 px. Der Unterschied steckt in der Schrift, nicht im Abstand -- oben
     misst das Auge bis zur Versalienkante, unten ab der Grundlinie, und die
     Unterlaengen (g, p, y) brauchen Platz, den das Auge als Luft liest.
     Neun Pixel mehr unter dem Block gleichen das aus. */
  margin-top: 105px !important; }

/* Verweiszeilen: alle Wege gleich breit ==================================
   Michael 30.09.2026: "Die Links auch immer gleichmaessig aufteilen. Danach
   bitte bei allen Unterseiten."

   Gemessen auf /wellness/: drei Verweise in einer Zeile waren 458, 458 und
   343 px breit -- sie erbten die Spalten des Textrasters (4 : 4 : 3), das
   fuer Text gedacht ist, nicht fuer gleichrangige Wege.

   Jetzt teilt sich die Zeile gleichmaessig auf, egal wie viele Wege darin
   stehen: grid-auto-columns 1fr mit Spaltenfluss. Zwei Wege ergeben zwei
   gleiche Haelften, drei drei Drittel. Der Strich zwischen den zwei
   Wortteilen dehnt sich ohnehin auf den verbleibenden Platz. */
/* Auf den Themenseiten haengt die Zeile direkt an <main class="themenseite">,
   nicht an einem Textblock -- ohne diesen Selektor blieb sie beim Textraster
   (gemessen 458/458/343 statt drei gleichen Dritteln). */
.abschnitt > .qv-wege,
.tbreit > .qv-wege,
.themenseite > .qv-wege,
main > .qv-wege {
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: 48px !important;
}
/* Die Spaltenzuweisungen von oben gelten nur noch fuer Wege IM Satzblock. */
.abschnitt > .qv-wege > .qv-weg,
.tbreit > .qv-wege > .qv-weg,
.themenseite > .qv-wege > .qv-weg,
main > .qv-wege > .qv-weg { grid-column: auto !important; }

@media (max-width: 809px) {
  /* Am Handy untereinander -- drei Wege nebeneinander sind dort unlesbar. */
  .abschnitt > .qv-wege, .tbreit > .qv-wege,
  .themenseite > .qv-wege, main > .qv-wege { grid-auto-flow: row; row-gap: 24px; }
}

/* Schmale Fenster: die dritte Spalte bleibt EINE Spalte ==================
   Michael 30.09.2026: "Typo passt nicht bei Breakpoint Mobil und Breakpoint
   Tablet." Gemessen auf /wandern/ bei 1100 und 810 px: die Paare der dritten
   Spalte standen NEBENEINANDER (linke Kanten 40, 123, 216) und liefen quer
   durch den Satz -- der Kasten erbt dort ein Raster, das fuer den Text
   gedacht ist.

   Unter 1200 px gilt jetzt: eine Spalte, Paare untereinander, 48 px Abstand
   zum Text darueber. Die Abstaende im Paar bleiben wie oben gesetzt. */
@media (max-width: 1199px) {
  /* Michael 30.09.2026: "Bei Breakpoint Tablet die Punkte nebeneinander,
     solange es sich ausgeht." Also ein Raster, das selbst zaehlt: jede Angabe
     bekommt mindestens 260 px, und es passen so viele in eine Zeile, wie
     hineingehen -- bei 810 px drei, bei 600 px zwei, am Handy eine. Kein
     fester Haltepunkt, sondern der Platz entscheidet. */
  html body .abschnitt > .satz > .rand,
  html body .tbreit > .satz > .rand {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    column-gap: 40px !important;
    row-gap: 36px !important;
    grid-column: 1 / -1 !important;
    margin-top: 48px;
    height: auto !important;
    align-items: start;
  }
  html body .abschnitt > .satz > .rand > div,
  html body .tbreit > .satz > .rand > div { width: 100%; }
}

/* Fuss nach Schweizer Art bei Tablet und Handy ===========================
   Michael 30.09.2026: "Footer Swissgrid, mathematische Anordnung, Breakpoint
   Tablet und Breakpoint Mobil."

   GEMESSEN vorher: bei 1024 und 810 px zwei Spalten mit 40 px Rinne, aber die
   Bloecke standen in ungleichen Hoehen untereinander -- zwischen "Zimmer" und
   "Haus" klafften ueber 100 px, weil jede Spalte so hoch wurde wie ihr
   laengster Block. Am Handy eine Spalte, ebenso ungleich.

   Jetzt ein Raster, in dem jede Zeile gleich hoch ist und jeder Block auf
   derselben Grundlinie beginnt:
     Tablet (810-1199)  2 Spalten, Rinne 40, Zeilenabstand 64
     klein  (600-809)   2 Spalten, Rinne 32, Zeilenabstand 56
     Handy  (bis 599)   1 Spalte,        Zeilenabstand 48
   Alle Werte sind Vielfache von 8. grid-auto-rows: min-content haelt die
   Zeilen an ihrem Inhalt, align-items: start setzt jeden Block an den
   Zeilenanfang -- daher beginnen sie auf einer Linie, statt in ihrer Zelle
   zu schwimmen. */
@media (max-width: 1199px) {
  html body .fussraster {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: min-content;
    align-items: start;
    column-gap: 40px !important;
    row-gap: 64px !important;
  }
}
@media (max-width: 809px) {
  html body .fussraster {
    column-gap: 32px !important;
    row-gap: 56px !important;
  }
}
@media (max-width: 599px) {
  /* 01.10.2026, Michael: "Ich haette gerne zwei Spalten beim Breakpoint Mobil
     beim Footer." Geht sich aus: bei 390 px Fenster bleiben nach 2 x 36 px
     Rand 318 px, abzueglich 24 px Rinne sind das 147 px je Spalte -- genug
     fuer "Maisonette Suite" (gemessen 139 px) in einer Zeile. */
  html body .fussraster {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 48px !important;
  }
}

/* Die zwei versetzten Bilder bleiben am Tablet nebeneinander =============
   Michael 30.09.2026: "Bei Breakpoint Tablet die Bilder nebeneinander."
   Gemessen: ab 1199 px abwaerts standen sie untereinander und nahmen nur die
   halbe Breite ein -- rechts blieb eine leere Spalte stehen.
   Gestapelt wird jetzt erst unter 810 px, dem Handy-Haltepunkt des Hauses.
   Die Rinne schrumpft dabei von 54 auf 32 px, damit beide Bilder breit
   genug bleiben (bei 810 px je 356 px). */
@media (min-width: 810px) and (max-width: 1199px) {
  html body .versatz {
    grid-template-columns: 48fr 4fr 48fr !important;
    gap: 0 !important;
  }
  html body .versatz .links { grid-column: 1 !important; grid-row: 1 !important; }
  html body .versatz .rechts { grid-column: 3 !important; grid-row: 1 !important; }
  /* Der randlose Ausbruch gilt nur am Handy: nebeneinander ragen die Bilder
     sonst je 40 px nach aussen und ueberlappen sich in der Mitte (gemessen
     -42 px Luecke bei 1024). */
  html body .versatz .links,
  html body .versatz .rechts { margin-inline: 0 !important; }
}

/* ======================================================================
   TABLET UND HANDY: EIN zusammenhaengender Satz Regeln (30.09.2026)
   Michael: "aufräumen."

   Vorher standen die Regeln fuer schmale Fenster an fuenf Stellen dieser
   Datei und widersprachen sich: der Fuenfspalter der Startseite galt weiter,
   die Textspalten wurden dadurch 350 px schmal, rechts blieb eine leere
   Spalte stehen, und die dritte Spalte lag als einzelne 260-px-Saeule
   darunter. Dieser Block steht ZULETZT und gewinnt damit gegen alles
   davor -- er ist die einzige Stelle, die das Verhalten unter 1200 px
   beschreibt.

   TABLET  810 bis 1199 px
     Text        2 gleiche Spalten, Rinne 48
     dritte Sp.  volle Breite darunter, so viele Angaben nebeneinander,
                 wie bei 240 px Mindestbreite hineinpassen
     Verweise    2 gleiche Spalten
   HANDY   bis 809 px
     alles eine Spalte, Rinnen 32, Zeilenabstand 40
   ====================================================================== */
@media (max-width: 1199px) {
  html body .abschnitt > .kopf1,
  html body .abschnitt > .satz,
  html body .abschnitt > .qv-wege,
  html body .tbreit > .kopf1,
  html body .tbreit > .satz,
  html body .tbreit > .qv-wege { padding-left: 0 !important; }

  html body .abschnitt > .satz,
  html body .tbreit > .satz {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 48px !important;
    row-gap: 0 !important;
    position: static !important;
  }
  html body .abschnitt > .satz > .lauf,
  html body .tbreit > .satz > .lauf { grid-column: auto !important; }

  html body .abschnitt > .satz > .rand,
  html body .tbreit > .satz > .rand {
    position: static !important;
    width: auto !important;
    height: auto !important;
    grid-column: 1 / -1 !important;
    margin-top: 56px !important;
    display: grid !important;
    /* Michael 30.09.2026: "Alle vier nebeneinander." Bis 900 px stehen sie
       deshalb in vier gleichen Spalten; darunter zaehlt der Platz (mindestens
       200 px je Angabe), sonst bricht "ganztags, Maschine bis 19 Uhr" in vier
       Zeilen um. */
    /* 30.09.2026, Michael: "Hier ist schon moeglich, dass drei nebeneinander
       sind. Lass diese Loecher weg." Untergrenze deshalb 170 statt 200 px --
       damit passen bei 1024 px fuenf, bei 810 px vier und bei 600 px drei
       Angaben in eine Zeile, statt zwei mit einer halbleeren Reihe darunter. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 40px !important;
    row-gap: 36px !important;
    align-items: start;
  }
  /* Bleiben in der zweiten Reihe nur zwei Angaben uebrig, stehen sie AUSSEN --
     erste und vierte Spalte (Michael 30.09.2026: "rechts und links aussen,
     Spalte eins und Spalte vier in der zweiten Reihe"). Zusammengedraengt in
     der Mitte wirkt die Zeile wie ein Rest; aussen traegt sie die Breite der
     Reihe darueber mit. Gilt nur bei genau sechs Angaben -- bei fuenf oder
     sieben waere die Verteilung eine andere. */
  html body .satz > .rand > div:nth-child(5):nth-last-child(2) { grid-column: 1 !important; }
  html body .satz > .rand > div:nth-child(6):last-child { grid-column: 4 !important; }
  html body .satz > .rand {
  }

  /* Auch die Klassen weg-s1/weg-s2 zuruecksetzen: sie stehen weiter oben mit
     !important und haben das Raster bei 390 px auf drei Spalten aufgezogen
     (gemessen 0 / 101 / 222 px, die erste Textspalte war 0 breit). */
  html body .abschnitt > .satz > .qv-weg,
  html body .tbreit > .satz > .qv-weg,
  html body .abschnitt > .satz > .qv-weg.weg-s1,
  html body .abschnitt > .satz > .qv-weg.weg-s2,
  html body .abschnitt > .satz > .qv-weg.weg-breit,
  html body .tbreit > .satz > .qv-weg.weg-s1,
  html body .tbreit > .satz > .qv-weg.weg-s2,
  html body .tbreit > .satz > .qv-weg.weg-breit { grid-column: auto !important; }
  /* Michael 30.09.2026: "Über beide Spalten, wenn es nur zwei Spalten gibt."
     Steht nur EIN Weg im Block, laeuft er ueber die ganze Satzbreite --
     sonst endet sein Strich mitten im Satz. Zwei Wege teilen sich die zwei
     Spalten wie der Text darueber. */
  html body .abschnitt > .satz > .qv-weg:only-of-type,
  html body .tbreit > .satz > .qv-weg:only-of-type { grid-column: 1 / -1 !important; }
  html body .abschnitt > .qv-wege,
  html body .tbreit > .qv-wege,
  html body .themenseite > .qv-wege,
  html body main > .qv-wege {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 48px !important;
    row-gap: 32px !important;
  }
}

@media (max-width: 809px) {
  html body .abschnitt > .satz,
  html body .tbreit > .satz,
  html body .abschnitt > .qv-wege,
  html body .tbreit > .qv-wege,
  html body .themenseite > .qv-wege,
  html body main > .qv-wege {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 32px !important;
    row-gap: 40px !important;
  }
  /* Am Handy steht jeder Weg in einer eigenen Zeile ueber die volle Breite.
     Ohne diese Zeile teilten sich zwei Wege eine Zelle, und der erste wurde
     0 px breit (gemessen bei 600 und 390 px). */
  html body .abschnitt > .satz > .qv-weg,
  html body .tbreit > .satz > .qv-weg,
  html body .abschnitt > .satz > .qv-weg.weg-s1,
  html body .abschnitt > .satz > .qv-weg.weg-s2,
  html body .tbreit > .satz > .qv-weg.weg-s1,
  html body .tbreit > .satz > .qv-weg.weg-s2 {
    grid-column: 1 / -1 !important;
    /* auch die Zeile freigeben: querverweise.css setzt grid-row 2, und zwei
       Wege landeten dadurch in derselben Zelle (der erste wurde 0 px breit). */
    grid-row: auto !important;
  }

  html body .abschnitt > .satz > .rand,
  html body .tbreit > .satz > .rand {
    /* min(200px, 100%): ohne die Deckelung nahm auto-fit die 200 px woertlich
       und legte bei 390 px Fensterbreite zwei Spalten an -- die Seite lief
       171 px ueber den Rand (gemessen, Ursache waren dt/dd bei 363…560). */
    /* 30.09.2026, Michael: "Hier ist schon moeglich, dass drei nebeneinander
       sind. Lass diese Loecher weg." Untergrenze deshalb 170 statt 200 px --
       damit passen bei 1024 px fuenf, bei 810 px vier und bei 600 px drei
       Angaben in eine Zeile, statt zwei mit einer halbleeren Reihe darunter. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    margin-top: 40px !important;
    column-gap: 32px !important;
    row-gap: 32px !important;
  }
}

/* ======================================================================
   Bilder: ueberall dieselbe Breite, ueberall Rand (30.09.2026)
   Michael: "Mach die Bilder alle gleich breit auf der ganzen Seite, so dass
   ein Rand auf der Seite ist mit Hintergrund."

   GEMESSEN vorher (Startseite): bei 600 px liefen einzelne Bilder von 0 bis
   600 und von -9 bis 311, also ueber den Rand hinaus, waehrend der Satz bei
   36 bis 564 stand. In der Bildreihe waren die zwei Bilder ausserdem
   ungleich breit (538 gegen 359 px).

   Jetzt: kein randloser Ausbruch mehr, und die zwei Bilder einer Reihe teilen
   sich die Breite zu gleichen Teilen. Der Papierton bleibt links und rechts
   als Rand stehen.
   NICHT betroffen: das Zimmergleis -- es ist ein Schieber und laeuft
   absichtlich ueber den rechten Rand hinaus.
   ====================================================================== */
html body .bildreihe,
html body .drittelreihe,
html body .versatz .links,
html body .versatz .rechts,
html body .tvoll figure,
html body .auftakt-bild .bildkasten,
html body .bildkasten { margin-inline: 0 !important; }

@media (max-width: 1199px) {
  html body .bildreihe {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 48px !important;
    align-items: start;
  }
}
html body .bildreihe > * { width: 100% !important; max-width: none !important; }

@media (max-width: 809px) {
  html body .bildreihe {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 32px !important;
  }
}

/* Michael am 11.10.2026 (Tablet): ein einzelnes Bild in einer Bildreihe stand
   nur in der linken Haelfte, das Paar darunter ueber die ganze Breite
   (Startseite: Finnische Sauna, Ueber Fiss). Jetzt zieht sich das Einzelbild
   ueber beide Spalten, so breit wie das Paar; es wird beschnitten statt
   gedehnt (Ausschnitt 21:9, die Hoehe darf sich aendern). */
@media (min-width: 810px) and (max-width: 1199px) {
  html body .bildreihe > figure:only-child { grid-column: 1 / -1; }
  html body .bildreihe > figure:only-child img {
    width: 100% !important; aspect-ratio: 21 / 9 !important; object-fit: cover !important;
  }
}

/* Das "Sicherheitsnetz", das alle Bildbloecke auf die Inhaltsbreite zwingen
   sollte, ist am 30.09.2026 wieder RAUS: es hat den waagrechten Ueberlauf der
   Startseite von 40 auf 97 px (600 px Fenster) und von 110 auf 171 px (390 px)
   vergroessert, statt ihn zu beheben -- die Bilder sitzen in verschiedenen
   Huellen mit eigenen Raendern, und eine gemeinsame Klammer trifft sie nicht.
   Was bleibt: die Bildreihen sind gleich breit, und der randlose Ausbruch am
   Handy ist weg. Der Rest ist ungeprueft offen. */

/* Kein waagrechtes Wackeln der ganzen Seite ==============================
   Gemessen am 30.09.2026 bei 390 px: die Startseite lief 171 px ueber den
   Rand, /info/anfahrt/ um 11 px. Ursache auf der Startseite ist das
   Zimmergleis -- ein Schieber, dessen Karten absichtlich breiter sind als das
   Fenster. Er scrollt selbst (overflow-x: auto), die SEITE soll dabei aber
   nicht mitwandern.
   overflow-x: clip statt hidden: hidden macht aus dem Element einen
   Scroll-Container und setzt position: sticky im Kopf ausser Kraft; clip
   schneidet nur ab. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Kiesel nur am Desktop und Tablet ======================================
   Michael 30.09.2026: "Bei Breakpoint Mobil entferne den Kiesel."
   Am Handy liegt er als 150 px grosser dunkler Koerper mitten im Zimmerbild
   und verdeckt ein Drittel des Motivs. */
@media (max-width: 809px) {
  html body .kiesel { display: none !important; }
}

/* Nichts laeuft ueber die Satzbreite hinaus ==============================
   Michael: "Maximale Breite da links genauso wie Schrift und Bild."
   Die dritte Spalte und die Verweise bekommen dieselbe Begrenzung wie der
   Text: hoechstens so breit wie ihr Kasten, und kein Rasterkind darf sich
   ueber seine Spalte hinaus aufblaehen (min-width: auto ist die Vorgabe bei
   Rasterkindern und genau der Grund, warum lange Werte die Spalte sprengen). */
html body .satz > .rand,
html body .satz > .rand > div,
html body .satz > .lauf,
html body .satz > .qv-weg,
html body .qv-wege > .qv-weg {
  min-width: 0 !important;
  max-width: 100% !important;
}
/* overflow-wrap: break-word ist am 30.09.2026 wieder RAUS: zusammen mit den
   schmalen Spalten hat es ganze Woerter senkrecht zerlegt ("BERGBAHNEN" stand
   als B-E-R-G untereinander). Ein Wort wird nicht getrennt, die Spalte wird
   breit genug -- darum steht die Untergrenze jetzt bei 200 px statt 0. */

/* Verweise enden vertikal auf einer Linie ================================
   Michael 30.09.2026: "Vertikal muessen die Links immer in einer Linie
   abschliessen." Gemessen untereinander: "IN FISS" endete bei 950,
   "214 PISTENKILOMETER" bei 1153 -- die Kaesten waren unterschiedlich breit,
   weil sie sich nach ihrem Inhalt richteten. Jetzt nimmt jeder Verweis die
   volle Spaltenbreite, und sein rechtes Wort steht an deren Kante. */
html body .satz > .qv-weg,
html body .qv-wege > .qv-weg { width: 100% !important; }

/* Die zwei versetzten Bilder: nebeneinander, solange es sich ausgeht ======
   Michael: "Bilder nebeneinander, solange es geht, dann untereinander."
   Statt eines festen Haltepunkts bei 810 px zaehlt jetzt der Platz: zwei
   Spalten, solange jede mindestens 300 px breit bleibt. Bei 660 px Fenster
   ist damit Schluss, darunter stehen sie untereinander. */
html body .versatz {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;   /* 28.10.2026: nie breiter als der Container (Handy 320 px: Bild ragte 16 px ueber den Rand) */
  column-gap: 48px !important;
  row-gap: 32px !important;
}
html body .versatz .links,
html body .versatz .rechts {
  grid-column: auto !important;
  grid-row: auto !important;
  margin-inline: 0 !important;
}

/* Der rechte Wortteil steht immer an der rechten Kante ===================
   Gemessen untereinander: 488 gegen 506 px, also 18 px daneben. Der Strich
   ist auf 280 px gedeckelt, und die Restluft blieb hinter dem rechten Wort
   stehen, statt davor. space-between schiebt sie nach vorn. */
html body .satz > .qv-weg,
html body .qv-wege > .qv-weg { justify-content: space-between !important; }

/* Zwei Angaben in der dritten Spalte: aussen buendig =====================
   Michael 30.09.2026: "Wenn es nur noch zwei sind, dann rechts und links
   ausrichten -- links mit dem ersten Buchstaben zum Text und Bild darueber,
   rechts mit dem letzten Buchstaben an der rechten Bildkante."
   Bei genau zwei Eintraegen sitzt der erste links an der Satzkante, der
   zweite rechts an der Bildkante. */
html body .satz > .rand:has(> div:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Am 30.09.2026 zuerst rechtsbuendig gesetzt ("rechts mit dem letzten
   Buchstaben an der Bildkante"), danach von Michael widerrufen: "Die dritte
   Spalte muss auch in einer Linie sein." Alle Angaben stehen jetzt links auf
   derselben Kante, auch wenn nur zwei uebrig sind. */
html body .satz > .rand > div { justify-self: stretch; text-align: left; }

/* Der Versatz-Block sitzt auf der Inhaltsbreite ==========================
   Gemessen bei 1024 px: der Block lief von 0 bis 1024, der Satz daneben von
   40 bis 984 -- das linke Bild klebte am Fensterrand, waehrend Text und alle
   anderen Bilder 40 px Rand hatten. Ursache war sein eigener Innenabstand
   (padding: var(--a6) var(--rand) 0), der die Breite nicht begrenzt.
   Jetzt dieselbe Rechnung wie ueberall sonst. */
html body .versatz {
  width: min(var(--breite, 1435px), 100% - 2 * var(--rand)) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* Tablet: die dritte Spalte bleibt RECHTS ================================
   Michael 30.09.2026, nach mehrfacher Ansage: die Angaben standen zwischen
   810 und 1199 px unter dem Verweis und zerfielen dort in drei Spalten --
   statt rechts neben dem Text zu bleiben, wo sie auf jeder anderen Breite
   steht. Das war mein Aufräum-Block, der Tablet wie Handy behandelt hat.

   Ab hier gilt bis 810 px herunter dasselbe Bild wie am Desktop: zwei
   Textspalten und die Angaben rechts daneben. Gerechnet bei 1024 px:
   Satz 944, davon 4fr / 4fr / 3fr mit zwei Rinnen zu 40 px -- 332 / 332 /
   200 px. Erst unter 810 px wandern sie unter den Text.                   */
@media (min-width: 810px) and (max-width: 1199px) {
  html body .abschnitt > .satz,
  html body .tbreit > .satz {
    grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr) !important;
    column-gap: 40px !important;
    position: relative !important;
  }
  html body .abschnitt > .satz > .lauf:nth-of-type(1),
  html body .tbreit > .satz > .lauf:nth-of-type(1) { grid-column: 1 !important; }
  html body .abschnitt > .satz > .lauf:nth-of-type(2),
  html body .tbreit > .satz > .lauf:nth-of-type(2) { grid-column: 2 !important; }
  html body .abschnitt > .satz > .rand,
  html body .tbreit > .satz > .rand {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    margin-top: 0 !important;
    row-gap: 36px !important;
  }
  /* Die Verweise stehen darunter, je einer unter einer Textspalte. */
  html body .abschnitt > .satz > .qv-weg.weg-s1,
  html body .tbreit > .satz > .qv-weg.weg-s1 { grid-column: 1 !important; grid-row: 2 !important; }
  html body .abschnitt > .satz > .qv-weg.weg-s2,
  html body .tbreit > .satz > .qv-weg.weg-s2 { grid-column: 2 !important; grid-row: 2 !important; }
  html body .abschnitt > .satz > .qv-weg:only-of-type,
  html body .tbreit > .satz > .qv-weg:only-of-type { grid-column: 1 / 3 !important; grid-row: 2 !important; }
}

/* ======================================================================
   Die dritte Spalte: feste Stufen statt auto-fit (30.09.2026)
   Michael: "Hier stimmt gar nichts."

   GEMESSEN, was auto-fit angerichtet hat: bei 390 px Fenster legte
   repeat(auto-fit, minmax(min(170px, 100%), 1fr)) VIER Spalten an --
   170 / 17 / 17 / 17 px. Werte brachen in bis zu neun Zeilen, Angaben
   ueberlappten sich. Grund ist das min(170px, 100%): das Prozent bezieht sich
   auf die Spalte, die gerade berechnet wird -- eine Katze, die sich in den
   Schwanz beisst. Der Browser loest sie zu einem winzigen Wert auf.

   Darum ab hier gezaehlte Stufen. Sie sind nachrechenbar:
     810-1199 px  eine Spalte  (die Angaben stehen rechts neben dem Text)
     600-809 px   zwei Spalten (Satz 528-737 px, je Angabe 240-345 px)
     unter 600    eine Spalte  (Satz 318-528 px)
   ====================================================================== */
@media (min-width: 600px) and (max-width: 809px) {
  html body .satz > .rand {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 40px !important;
    row-gap: 36px !important;
  }
}
@media (max-width: 599px) {
  html body .satz > .rand {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 32px !important;
  }
}

/* Die Aussen-Platzierung der fuenften und sechsten Angabe gilt NUR dort, wo
   es vier Spalten gibt ======================================================
   Gefunden am 30.09.2026: die Regeln div:nth-child(5){grid-column:1} und
   div:nth-child(6){grid-column:4} standen ohne Haltepunkt. Unter 810 px hat
   das Raster aber nur eine oder zwei Spalten -- "Spalte 4" existiert dort
   nicht, und der Browser legt IMPLIZITE Spalten an. Gemessen bei 390 px:
   0 / 0 / 111 / 111 px statt einer Spalte zu 318. Genau daher kamen die
   Werte, die in neun Zeilen zerfielen, und die 0-px-Angaben.
   Deshalb: unter 810 px stehen alle Angaben wieder im normalen Fluss. */
@media (max-width: 809px) {
  /* Mit denselben nth-child-Selektoren wie die Aussen-Regel: ein blosses
     "> div" hat geringeren Vorrang als "> div:nth-child(5)" und verlor
     (gemessen: die Angaben blieben 0 px breit). */
  html body .satz > .rand > div,
  html body .satz > .rand > div:nth-child(5):nth-last-child(2),
  html body .satz > .rand > div:nth-child(6):last-child,
  html body .satz > .rand > div:nth-child(2):last-child {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
  }
}

/* Am Handy EINE Spalte in der dritten Spalte -- als letzte Regel, damit sie
   die zweispaltige aus dem Aufraeum-Block schlaegt (gemessen bei 390 px:
   zwei Spalten zu 143 px statt einer zu 318). */
@media (max-width: 599px) {
  /* Auch der :has-Selektor fuer genau zwei Angaben muss hier zurueck -- er hat
     als einziger noch zwei Spalten gehalten (gemessen 143 + 143 px bei 390). */
  html body .abschnitt > .satz > .rand,
  html body .tbreit > .satz > .rand,
  html body .satz > .rand:has(> div:nth-child(2):last-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Fuss: die Bloecke fuellen beide Spalten, keine Luecken ==================
   Michael 01.10.2026: "Warum ist FOLGEN nicht auf der rechten Seite? Dann
   haetten wir zwei Spalten rechts neben der Infoleiste."
   Gemessen: INFO und FOLGEN standen untereinander in derselben Spalte, weil
   die Bloecke darueber verschieden hoch sind und das Raster zeilenweise
   fuellt. grid-auto-flow: dense zieht den naechsten Block in die freie
   Zelle -- so steht neben jedem Block einer. */
@media (max-width: 1199px) {
  html body .fussraster { grid-auto-flow: row dense !important; }
}

/* Info und Folgen nebeneinander statt untereinander ======================
   Michael 01.10.2026: "Warum ist FOLGEN nicht auf der rechten Seite?"
   Gemessen: beide stecken in EINER Huelle (.fussspalte), die als ein einziges
   Rasterkind zaehlt -- deshalb standen sie untereinander in der linken Spalte,
   waehrend rechts daneben Platz frei blieb.
   Unter 1200 px loest sich die Huelle auf: display: contents gibt ihre zwei
   Bloecke direkt an das Fussraster weiter, und die verteilt es auf beide
   Spalten. */
@media (max-width: 1199px) {
  html body .fussraster > .fussspalte { display: contents !important; }
}

/* Unter der Buchungsleiste bleibt Platz =================================
   Michael 01.10.2026: "Die Buchungsleiste ist genau über der Erklärung über
   den Karteikarten. Das macht sie immer drüber."
   Gemessen auf /sommer/familienurlaub/ bei 390 px: die Leiste liegt fest auf
   769 bis 833 und deckte dort den Namen und die Erklärung einer Karte zu.
   Die Leiste ist 64 px hoch; mit 64 px zusätzlichem Fuß am Seitenende kann
   man bis unter sie scrollen, statt dass sie den letzten Inhalt frisst. */
body.mit-balken main,
body:has(.klebeleiste) main { padding-bottom: 88px; }

/* Der Fuss: vier, drei, zwei Spalten ====================================
   Michael 01.10.2026: "Footer bei Breakpoint Desktop vier Spalten, Tablet
   drei Spalten und in der letzten einmal links und einmal rechts -- die
   mittlere bleibt frei. Und bei Breakpoint Mobil zwei Spalten."

   GEMESSEN VORHER: 1920 und 1440 vier Spalten, aber ungleich breit
   (361/361/361/151 px), 1024 und 810 nur zwei, 600 und 390 zwei. Der Fuss
   hatte also am Tablet dieselbe Aufteilung wie am Handy.

   Acht Kaesten: Zimmer links, Zimmer rechts, Haus, Kontakt, Direkt buchen,
   Rechtliches, Info, Folgen. Das geht bei vier Spalten in zwei Reihen auf,
   bei zwei Spalten in vier -- nur bei drei Spalten bleiben zwei uebrig, und
   die stehen dann aussen. */
@media (min-width: 1200px) {
  /* 01.11.2026 Michael: Fuss so breit wie die Bilder, alle vier Bloecke
     linksbuendig, die laengste Zeile der letzten Spalte endet am rechten
     Bildrand, die Luecken zwischen den Textkanten sind gleich (optisch, nicht
     gleich breite Spalten). max-content + space-between leistet genau das.
     Zurueck: kopf.css.vor-fussbuendig-01112026 */
  html body .fussraster {
    grid-template-columns: repeat(3, minmax(0, 1fr)) max-content !important;
    column-gap: 0 !important;  /* 01.11.2026: drei gleiche Spalten + Inhaltsbreite rechts: gleicher Abstand der Anfaenge UND letzte Zeile endet am rechten Bildrand */
    justify-content: normal !important;  /* 01.11.2026 Michael: gleich breite Spalten, Raster = Bildbreite; zurueck: kopf.css.vor-fussgleich-01112026 */
  }
  /* Auch hier die Huelle aufloesen: sie stand als EIN Kasten in Spalte 4 ueber
     zwei Reihen (grid-column:4; grid-row:1/3) und war deshalb 151 px schmal,
     waehrend die drei anderen Spalten je 361 px hatten. */
  html body .fussraster > .fussspalte { display: contents !important; }
  html body .fussraster > .fussspalte > * { justify-self: start !important; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  html body .fussraster {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* "dense" wuerde die letzten beiden Kaesten in die Luecke der Mitte
       ziehen -- genau das soll hier NICHT passieren. */
    grid-auto-flow: row !important;
  }
  /* NUR der letzte Kasten wird gesetzt. Beide zu setzen ist falsch: der
     vorletzte landet ohnehin in Spalte 1, und ein zweites grid-column riss
     gemessen eine Reihe auseinander (Rechtliches stand allein). */
  html body .fussraster > .fussspalte > :last-child,
  html body .fussraster > :last-child { grid-column: auto !important; }
}
@media (max-width: 809px) {
  html body .fussraster {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Einzelnes Bild in einer Bildreihe nimmt beide Spalten ====================
   Michael 01.10.2026: "Mach das Foto über beide Spalten. Das ist einheitlicher.
   Das alles machst du natürlich nur beim Breakpoint Desktop."
   Gemessen auf der Startseite bei 1440 px: vier Reihen haben nur EIN Bild
   (DER FREIRAUM, FINNISCHE SAUNA, ÜBER FISS, IN DER STEILKURVE). Sie standen
   mit 654 px in der linken Spalte, rechts blieb die halbe Breite leer --
   obwohl ihr --anteil schon auf 100 % steht. Das Raster hat zwei feste
   Spalten, also muss das einzelne Bild beide belegen. Unter 810 px ist die
   Reihe ohnehin einspaltig, dort ändert sich nichts. */


/* 15 Prozent weniger Luft zwischen Bewertungsband und Fuss (Michael 01.10.2026).
   Nachgemessen: die 88 px kommen WEDER vom Band noch vom Fuss, sondern von der
   Polsterung unter <main> (88 px) -- und die ist der Platzhalter fuer die
   klebende Buchungsleiste (body.mit-balken main). Die darf nicht kleiner
   werden, sonst schiebt sich der Fuss unter die Leiste. Gekuerzt wird deshalb
   die Polsterung ueber dem Fuss: 88 + 120 = 208 px Abstand bis zur ersten
   Fusszeile, 15 Prozent weniger sind 177 -- also 89 px statt 120. */
html body .fuss { padding-top: 60px; }

/* Einzelne Bildformate der Startseite ====================================
   Alles nur ab 810 px -- darunter ist die Bildreihe einspaltig.
   Gemessen bei 1440 px (Breite je Bild 654 px):
     DIE SOMMERKARTE     451 px hoch -> auf 541
   (Die Hoehen von GROSSE WEINAUSWAHL und DER SPRUNG sind am 01.10.2026 wieder
    raus: sie waren Notbehelfe gegen das Zwangsraster. Seit die Reihen wieder
    nach --anteil laufen, stimmen die Proportionen von selbst.)
                         (20 % tiefer, Seiten duerfen wegfallen) */
@media (min-width: 810px) {
}


/* Verweisleiste der Startseite auf Inhaltsbreite ========================
   Michael 01.10.2026: die Verweise sollen mit den Enden der Linie darueber
   abschliessen. Gemessen bei 1440 px: ".fragen > .qv-wege" deckelte auf
   1144 px (148…1292), Linie und Bilder laufen 43…1398. Die Deckelung faellt
   ab 1200 px weg -- darunter bleibt sie, dort ist die Leiste zweizeilig. */
@media (min-width: 1200px) {
  html body .fragen > .qv-wege { padding-left: 0; padding-right: 0; }
}

/* Kinderkarte und Sommerkarte gleich hoch ===============================
   Michael 01.10.2026: "Mach das Link und das längste Bild gleich groß."
   Gemessen bei 1440 px: KINDERKARTE 528 x 528, SOMMERKARTE 799 x 661.
   Gerechnet statt gestreckt: die Spalten sind 39 % und 59 % der Reihe, also
   haben beide Bilder dieselbe Hoehe, wenn ihr Seitenverhaeltnis 39:50 bzw.
   59:44 ist -- bei JEDER Fensterbreite, Zielhoehe 44 % der Reihenbreite
   (596 px bei 1355 px Reihe; am 01.10.2026 von 50 % auf 44 % gesenkt, also
   12 Prozent niedriger). Ein blosses align-items:stretch hatte beide auf
   die KLEINERE Hoehe gezogen (536 px). Nur ab 810 px. */
@media (min-width: 810px) {
  html body .bildreihe figure:has(img[src*="BhEQG4RgTdlpESW9VMkeCfBfRsk"]) img {
    aspect-ratio: 39 / 44 !important; height: auto !important; object-fit: cover;
  }
  html body .bildreihe figure:has(img[src*="maskottchen-sommerkarte"]) img {
    aspect-ratio: 59 / 44 !important; height: auto !important; object-fit: cover;
  }
}

/* Startseite: Rand links und rechts ====================================
   Michael 01.10.2026: "Wie schaffst du es, dass rechts und links ein Rand ist
   neben dem Foto ... nicht ganz raus bis zum Seitenrand, sondern etwas
   reingerückt, rechts und links gleich weit."
   Gemessen vorher bei 1440 px: Inhalt 43…1398, also 43 px Luft je Seite
   (94 % der Fensterbreite). Jetzt 7,5 vw je Seite, gedeckelt bei 160 px:
   bei 1440 px sind das 108 px und 1224 px Inhalt (85 %).
   Der Wert sitzt an --rand, also wandern Bilder, Text, Fuss und Kopf
   gemeinsam -- die Flucht bleibt. Nur die Startseite (sie allein hat
   .auftakt-bild), nur ab 1200 px.

   02.10.2026 WIDERRUFEN, Michael: "Mach die Seite wieder so breit wie sie war."
   Die 7,5 vw haben bei 1440 px 108 px Rand ergeben und den Inhalt von 1355 auf
   1219 px verschmaelert. Zurueck auf die Hausstufe 40 px -- ein Rand bleibt,
   aber der Inhalt hat wieder seine alte Breite (gemessen bei 1440 px:
   40...1400, also 1360 px). */

/* Zimmergleis endet an derselben Kante wie die Bilder ===================
   Michael 01.10.2026: "Zimmer hat auf der rechten Seite ... über den Rand
   hinaus. Gleich breit wie alle anderen Bilder."
   Gemessen bei 1440 px: das Gleis lief 111…1418 (1308 px), Bilder und Rahmen
   enden bei 1330. Der Ueberstand kam aus "#zimmer .gleis{margin-right:calc(50%
   + 22px - 50vw); padding-right:var(--rand)}" -- gewollt war damit der
   Eindruck, dass die Karten weiterlaufen. Jetzt endet das Gleis buendig; dass
   es weitergeht, zeigen Pfeile und Zaehler. Das Schieben bleibt (overflow-x
   auto), nur der Rand faellt weg. */
@media (min-width: 1101px) {
  html body #zimmer .gleis { margin-right: 0; max-width: none; padding-right: 0; }
}

/* ======================================================================
   Handy (<= 809 px): ein Raster fuer alle Bilder und den Balken.
   Michael am 11.10.2026: alle Bilder gleich breit, links und rechts gleich
   viel Rand; der Verfuegbarkeits-Balken links und rechts gleich weit vom
   Rand, er darf ueber die Bilder hinausragen.

   GEMESSEN vorher (390 px): Bilder der Bildreihe von x=0 bis 318 (Rand links
   0, rechts 72), weil lp-stil.css `.bildreihe figure{margin-inline:-rand}`
   die Figur um 36 px nach links zog, waehrend die Breite auf die Spalte
   (318) festgelegt war. Balken: links 20, rechts 57 -- chat.css setzt
   `body.mit-chat .klebeleiste{right:57px}` spaeter als die 20 px.
   Satzspiegel = 36 | 318 | 36. Balken = 20 | 350 | 20 (ragt je 16 px ueber).
   ====================================================================== */
@media (max-width: 809px) {
  html body .bildreihe figure { margin-inline: 0 !important; }
  html body .klebeleiste,
  html body.mit-chat .klebeleiste { left: 20px !important; right: 20px !important; }
}

/* ======================================================================
   Handy (<= 809 px): EIN Abstand zwischen allen Bildern und Texten.
   Michael am 12.10.2026: "Bei Breakpoint Mobil moechte ich, dass auf der
   Seite von allen Bildern und Texten der gleiche Abstand ist."

   GEMESSEN vorher (390 px, 7 Themenseiten): zwischen den Abschnitten 48,
   64, 95, 104 und 105 px je nach Nachbar (Bild -> Text 95, Text -> Bild
   105, Bild mit Unterschrift 64), zwischen den zwei Bildern der Duo-Reihe
   24, zwischen Bild und Text im Paar 80, zwischen Dreierspalten 64. Die 95
   und 105 sind die Desktop-Werte (optischer Ausgleich), die am Handy nie
   gesondert entschieden wurden.

   Jetzt: --luft-handy (48 px) an jeder Fuge. NICHT angefasst bleiben die
   Sonderregeln: Abstaende INNERHALB eines Textblocks (Kleinzeile ->
   Ueberschrift -> Satz -> Angaben), Bild -> Unterschrift, die interaktiven
   Karten und die Vollbildansicht der Zimmerkategorien.
   Die Selektoren wiederholen .themenseite, weil .tvoll:has(figcaption) +
   .tbreit sonst (hoehere Spezifitaet) gewinnt.
   ====================================================================== */
@media (max-width: 809px) {
  html body main.themenseite.themenseite.themenseite { --luft-handy: 48px; }
  html body main.themenseite.themenseite.themenseite > section,
  html body main.themenseite.themenseite.themenseite > section + section,
  html body main.themenseite.themenseite.themenseite > section + .qv-wege,
  html body main.themenseite.themenseite.themenseite > .qv.qv-wege { margin-top: var(--luft-handy) !important; }
  /* Reihen: Bild unter Bild, Karte unter Karte, Spalte unter Spalte */
  html body main.themenseite.themenseite.themenseite .tduo,
  html body main.themenseite.themenseite.themenseite .tkarten,
  html body main.themenseite.themenseite.themenseite .tstreifen,
  html body main.themenseite.themenseite.themenseite .traster,
  html body main.themenseite.themenseite.themenseite .orr-raster,
  html body main.themenseite.themenseite.themenseite .tdrei { row-gap: var(--luft-handy) !important; }
  /* Orts-Karten (Familie Sommer): Bild -> Text ebenfalls eine Fuge */
  html body main.themenseite.themenseite.themenseite .orr-karte .orr-text,
  html body main.themenseite.themenseite.themenseite .orr-karte.l-h .orr-text { padding-top: var(--luft-handy) !important; }
  /* Paar: Bild -> Textblock genau eine Fuge (vorher 32 + 48 = 80 px) */
  html body main.themenseite.themenseite.themenseite .tpaar { row-gap: 0 !important; }
  html body main.themenseite.themenseite.themenseite .tpaar > .wort { padding-top: var(--luft-handy) !important; }
  /* Orts-Gruppen: Trennlinie mit Titel haelt oben und unten dieselbe Fuge */
  html body main.themenseite.themenseite.themenseite .orr-gruppe,
  html body main.themenseite.themenseite.themenseite .orr-kopf + .orr-intro + .orr-gruppe { margin: var(--luft-handy) 0 !important; }
}

/* ----------------------------------------------------------------------
   Handy, Startseite und Winter-Startseite (<main> ohne Klasse): dieselbe
   Fuge von 48 px. GEMESSEN vorher (390 px): Hero -> Einleitung 120,
   Einleitung -> Bilder 80, Abschnitt -> Abschnitt 88 bis 96, Text -> Bilder
   16, Bildunterschrift -> naechstes Bild 16 / 32 / 40, Ueberschrift -> Text
   96 (56 + 40 Rinne). Ueberschrift -> Text wird 40 wie auf den Themenseiten
   (Kleinzeile, Ueberschrift, Satz bleiben ein Textblock).
   ---------------------------------------------------------------------- */
@media (max-width: 809px) {
  html body main:not([class]) { --luft-handy: 48px; }
  html body main:not([class]) .einleitung,
  html body main:not([class]) .versatz,
  html body main:not([class]) .abschnitt,
  html body main:not([class]) .abschnitt.buchen { padding-top: var(--luft-handy) !important; }
  html body main:not([class]) .abschnitt { gap: var(--luft-handy) !important; }
  html body main:not([class]) .abschnitt > .satz { margin-top: -8px !important; }
  html body main:not([class]) .abschnitt > .bildreihe,
  html body main:not([class]) .abschnitt > .bildreihe + .bildreihe { margin-top: 0 !important; }
  html body main:not([class]) .bildreihe,
  html body main:not([class]) .versatz { gap: var(--luft-handy) !important; row-gap: var(--luft-handy) !important; }
  /* verschachtelter Abschnitt (Zimmerkopf): nicht noch einmal 48 obendrauf */
  html body main:not([class]) .abschnitt > .abschnitt:first-child { padding-top: 0 !important; }
  /* Zimmer-Schieber: Karten beginnen 48 px unter dem Text (gleis haengt mit -16 darin) */
  html body main:not([class]) .gleisrahmen { margin-top: calc(var(--luft-handy) - 32px) !important; }
  html body main:not([class]) .abschnitt > .drittelreihe { margin-top: 0 !important; }
  html body main:not([class]) .drittelreihe { gap: var(--luft-handy) !important; row-gap: var(--luft-handy) !important; }
  /* Winter-Startseite: gestapelte Bilder (Bild, Bild) wie jede andere Reihe */
  html body main:not([class]) .bildstapel { gap: var(--luft-handy) !important; margin-top: 0 !important; }
}

/* Handy, Restaurants in Fiss: Textblock und Bilder auf dieselbe Fuge */
@media (max-width: 809px) {
  html body main.rseite .tbreit.abschnitt { margin-top: 48px !important; padding-top: 0 !important; }
  html body main.rseite .rw { margin-top: 48px !important; }
  html body main.rseite section.rl { margin-top: 48px !important; }
  html body main.rseite > .qv.qv-wege, html body main.rseite > section + .qv-wege { margin-top: 48px !important; }
  html body main.rseite .rw-raster { gap: 48px !important; row-gap: 48px !important; }
}

/* Zimmer-Schieber: Balken mit Nummerierung klebte am Kartentext (Michael 12.10.2026:
   "Das klebt ja genau dran"). GEMESSEN Kartentext -> Balken: 390 px 6 px,
   1024 und 1440 px 54 px. Der Zug nach oben (-56 px) wird kleiner, und der
   Platz geht ueber margin-bottom zurueck, damit der Abstand zum NAECHSTEN
   Block gleich bleibt (Handy 48 px). Handy Luft 48, ab 1024 px 80. */
@media (max-width: 809px) {
  html body #zimmer .gleissteuerung { margin-top: -14px !important; margin-bottom: -42px !important; }
}
@media (min-width: 1024px) {
  html body #zimmer .gleissteuerung { margin-top: -30px !important; margin-bottom: -26px !important; }
}

/* 12.10.2026, Michael: (1) Texte der Ortskarten am Handy in EINER Linie mit dem Bild, (2) neues Kapitel =
   mehr Abstand ("dass man sieht, dass es ein neuer Abschnitt ist"), (3) Angaben-Texte frueher umbrechen.
   (1) GEMESSEN: .orr-karte.l-h hat align-items:center (aus dem Desktop-Raster); in der Spalte zentriert das
       den Text (Linkskante 23 px eingerueckt) und laesst das Bild auf Inhaltsbreite schrumpfen.
   (2) Fugen INNERHALB eines Kapitels bleiben 48 px (Bild, Bild, Text); vor einer neuen Kapitelueberschrift
       (.tbreit der Themenseiten, .abschnitt der Startseiten) stehen 96 px.
   (3) Die Angaben (Etikett + Wert) bekommen eine Zeilenlaenge von 24 Zeichen, ausgeglichen. */
@media (max-width: 809px) {
  html body main.themenseite.themenseite.themenseite .orr-karte,
  html body main.themenseite.themenseite.themenseite .orr-karte.l-h { align-items: stretch !important; }
  html body main.themenseite.themenseite.themenseite .orr-karte figure { width: 100% !important; }
  html body main.themenseite.themenseite.themenseite .orr-karte .orr-text { width: 100%; padding-left: 0 !important; }

  html body main.themenseite.themenseite.themenseite { --luft-kapitel: 96px; }
  html body main.themenseite.themenseite.themenseite > section.tbreit,
  html body main.themenseite.themenseite.themenseite > section + section.tbreit { margin-top: var(--luft-kapitel) !important; }
  html body main:not([class]) { --luft-kapitel: 96px; }
  html body main:not([class]) .abschnitt { padding-top: var(--luft-kapitel) !important; }
  html body main:not([class]) .abschnitt > .abschnitt:first-child { padding-top: 0 !important; }
  html body main.rseite .tbreit.abschnitt { margin-top: 96px !important; }
}
@media (max-width: 1199px) {
  html body .rand dd { max-width: 24ch; text-wrap: balance; }
}

/* Tablet (810 bis 1199 px): ein einzelner Absatz im Satzblock steht so breit wie der Text neben einem Bild
   (Michael 12.10.2026: "Mach den unteren Text so breit wie den oberen"). GEMESSEN bei 946 px auf der
   Mountainbike-Seite: Text im Paar 413 px, Text im Satzblock nur 286 px (eine von drei Spalten). Jetzt zwei Spalten
   breit, gedeckelt auf 413 px, damit die Zeile nicht laenger wird als oben. */
@media (min-width: 810px) and (max-width: 1199px) {
  html body .tbreit > .satz > p.lauf:only-of-type { grid-column: 1 / span 2 !important; max-width: 67.5% !important; }   /* Prozent bezieht sich auf die zwei Spalten (619 px): 67,5 % = 413 px wie der Text im Paar */
}

/* Michael 24.10.2026: "Wenn es zu wenig Platz gibt, bei schmalen Handys, statt dem Schriftzug Gebhard einfach
   das Logo rein." Gemessen: bis 413 px stoesst die Wortmarke fast an DE/EN/NL (375 px: 0 px Luecke) und ueberlappt
   ab 340 px den Menueknopf (-2 px). Dort steht das echte Signet (~/.claude/marke-gebhard, Linien beruehren den
   Kreis), als Maske in der Textfarbe, damit es auf hellem und dunklem Kopf mitfaerbt. Der Text "Gebhard" bleibt
   im Link (Schriftgroesse 0), Vorleseprogramme sagen weiter "Gebhard". Zurueck: kopf.css.vor-signet-24102026 */
@media (max-width: 413px) {   /* 400 px: nur 13 px Luecke zu DE/EN/NL, 414 px: 20 px */
  .wortmarke {
    font-size: 0; letter-spacing: 0; text-indent: 0; top: 0;
    display: block; width: 36px; height: 36px; justify-self: center;
    background: currentColor;
    -webkit-mask: url(/bilder/marke/gebhard-signet.svg) center / contain no-repeat;
            mask: url(/bilder/marke/gebhard-signet.svg) center / contain no-repeat;
  }
}

/* Regelhinweis in der Kalendertafel (Michael 24.10.2026: "Gleiche ihn dem Design an. Keine Abrundung an den Ecken.
   Swiss Grid, Cereal, mathematische Anordnung."). Statt rosa Flaeche mit 12 px Rundung: zwei Haarlinien, Luft in
   ganzen Takten (2 Takte innen, 3 Takte nach unten), Inter 14/24. Ein Verstoss traegt die obere Linie in der
   Akzentfarbe, darunter der Vorschlag als Link; die reine Auskunft (z. B. Mindestaufenthalt) bleibt ganz ruhig. */
.gbt-tafel .gbt-regel{margin:0;padding:16px 0 24px;border:0;border-top:1px solid rgba(61,55,51,.24);
  border-radius:0;   /* unten traegt der Fuss der Tafel die Linie, sonst stuenden zwei Haarlinien uebereinander */
  background:none;
  font:400 14px/24px Inter,system-ui,sans-serif;letter-spacing:0;color:var(--tinte,#3D3733)}
.gbt-tafel .gbt-regel[hidden]{display:none}
.gbt-tafel .gbt-regel[data-art="verstoss"]{border-top-color:var(--akz,#8C5A3C)}
.gbt-tafel .gbt-regeltext{display:block}
.gbt-tafel .gbt-regelnimm{display:block;margin-top:8px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--tinte,#3D3733);text-align:left;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--akz,#8C5A3C)}   /* 24.10.2026 Michael: Unterstrich in der Farbe der Linie unter Belegung */
.gbt-tafel .gbt-regelnimm[hidden]{display:none}
@media (hover:hover) and (pointer:fine){ .gbt-tafel .gbt-regelnimm:hover{color:var(--akz,#8C5A3C)} }

/* 27.10.2026 Michael: "Warum ist der Header in der Home-Seite so klein, mach ihn groesser als bei allen anderen Seiten."
   Gemessen: unter 1200 px war der Kopf der Startseite flacher als die Unterseiten (600 px: 346 gegen 749 px), weil der
   Schaukasten das Seitenverhaeltnis des ersten Bildes (2048/1352) traegt. Jetzt hoeher als die Unterseiten (350/500 bzw.
   ~0,68): bis 809 px 350/560, bis 1439 px 4/3; ab 1440 px war die Startseite schon hoeher (895 gegen 800).
   Zurueck: kopf.css.vor-homekopf-27102026 */
@media (max-width: 809px) {
  html body .auftakt-bild figure[data-seitenschau] > .ss-kasten { aspect-ratio: 350 / 560 !important; height: auto !important; }
}
@media (min-width: 810px) and (max-width: 1439px) {
  html body .auftakt-bild figure[data-seitenschau] > .ss-kasten { aspect-ratio: 4 / 3 !important; height: auto !important; }
}

/* ---- Responsive-Fix 28.10.2026 Teil 2: zweiter Querverweis darf am Handy keine dritte Spalte aufziehen; Verweiswoerter duerfen unter 1200 px umbrechen ---- */
@media (max-width: 809px) { html body .abschnitt > .qv-wege > .qv-weg, html body .tbreit > .qv-wege > .qv-weg { grid-column: auto !important; } }
@media (max-width: 1199px) { .qv-weg { min-width: 0; max-width: 100%; } .qv-teil { white-space: normal; } .qv-strich { min-width: 12px; } }

/* ---- Responsive-Fix 28.10.2026 Teil 3: Spezifitaet. nth-of-type(2) legt den zweiten Verweis auf Spalte 3, auch am Handy mit einer Spalte ---- */
@media (max-width: 809px) { html body .abschnitt > .qv-wege > .qv-weg:nth-of-type(n), html body .tbreit > .qv-wege > .qv-weg:nth-of-type(n) { grid-column: auto !important; } }

/* ---- Responsive-Fix 28.10.2026 Teil 6: Tippziele auf Fingergroesse (44 px), ohne den Satz zu verschieben ---- */
@media (pointer: coarse), (max-width: 809px) {
  .gleispfeil { min-width: 44px; min-height: 44px; }
  .wortmarke { min-height: 44px; display: inline-flex; align-items: center; }
  .sprache a { padding-inline: 8px; margin-inline: -8px; }
}

/* 28.10.2026 Layoutsprung 0,22 am Handy (Startseite): vor dem Schau-Skript hatte das Bild sein eigenes Verhaeltnis (2048/1352),
   danach 350/560 (Handy) bzw. 4/3 (810 bis 1439 px). Jetzt von Anfang an dasselbe Verhaeltnis. Gemessen: 0,222 -> 0,020.
   Zurueck: kopf.css.vor-cls-28102026. Live zusaetzlich als <style id="hero-cls"> in /index.html (bis zum naechsten Vollbau). */
@media (max-width: 809px) {
  html body .auftakt-bild figure[data-seitenschau]:not(:has(> .ss-kasten)) > img { aspect-ratio: 350 / 560; height: auto; width: 100%; object-fit: cover; }
}
@media (min-width: 810px) and (max-width: 1439px) {
  html body .auftakt-bild figure[data-seitenschau]:not(:has(> .ss-kasten)) > img { aspect-ratio: 4 / 3; height: auto; width: 100%; object-fit: cover; }
}

/* 01.11.2026 Michael, Handy (<= 809 px): "die Platzierung der Bilder immer auf der gleichen Stelle wie auf der Home, genau so gross;
   ein kleiner Abstand zwischen Titelbild und Verfuegbarkeit-Button; der Button so breit wie die Bilder, nicht breiter."
   Gemessen bei 390 px: Home Titelbild x36 y128 318 x 509. Unterseiten lagen bei y136 (.tvoll-kopf margin-top 48 statt 40),
   Zimmerseiten bei x20 y116 und 350 breit (main padding 20, auftakt padding-top 28). Balken lag bei x20, 350 breit (11.10.-Regel: durfte
   hinausragen, ist abgeloest). Abstand Bild zu Balken: wie auf der Home, keine Hoehenkappung (eine max-height mit aspect-ratio machte die Bilder am iPhone
   schmaler als der Balken: 311 statt 318 px, gemessen an Michaels Screenshot 01.11.2026).
   Zurueck: kopf.css.vor-handy-hero-01112026 */
@media (max-width: 809px) {
  html body main.themenseite.themenseite.themenseite > section.tvoll:first-child:has(> figure[data-seitenschau]),
  html body main.themenseite.themenseite.themenseite > section.tvoll.tvoll-kopf { margin-top: 40px !important; }   /* gewinnt gegen die !important-Regel mit --luft-handy (48 px) */
  html body .zpm .auftakt { padding-top: 40px; }
  html body .zpm .auftakt .schau { margin-inline: 16px; }
  html body .klebeleiste,
  html body.mit-chat .klebeleiste { left: 36px !important; right: 36px !important; }
}

/* 01.11.2026 Michael: Verweise in Textabschnitten wie auf Home, Zeile unter dem Text */
@media (min-width: 1200px) {
  /* gleiche Breite wie die zwei Textspalten (Spalte 1 bis 3 des Fuenfspalters), Randspalte bleibt frei */
  html body .tbreit > .qv-wege { margin: 32px 0 0 63px !important; padding: 0 !important; width: calc((100% - 126px) * 726 / 1001) !important; }
}
@media (max-width: 1199px) { html body .tbreit > .qv-wege { margin-top: 32px !important; } }

/* 01.11.2026 Michael: Bewertungsband und Footer am Handy und Tablet passen nicht, Desktop ist gut.
   Gemessen vorher bei 860 und 390 px (Startseite): Knopf bis Zahl 168 / 176 px, Anzahl bis Fussanfang 148 px
   plus Fusspolster 96 / 64 px. Ziel: dieselben Verhaeltnisse wie der Kommentar oben (104 px Knopf bis Band). */
@media (max-width: 1199px) {
  html body .bewertungsband { margin-top: 56px; padding-bottom: 0; }
  html body main:has(.bewertungsband) ~ .fuss { padding-top: 40px; }
}

/* 01.11.2026 Michael (Handy-Screenshot): im Footer brachen "Direkt buchen = kein Aufschlag" und "AGB und Stornobedingungen"
   in zwei gleich weit auseinander stehende Zeilen und sahen wie zwei Eintraege aus. Bis 899 px trennt jetzt Abstand die
   Eintraege, nicht die Zeilenhoehe: umbrochene Zeilen liegen eng, Eintraege haben Luft. Desktop bleibt unveraendert. */
@media (max-width: 809px) {
  html body .fussblock li { line-height: 19px; margin-bottom: 9px; }
  html body .fussblock li a { padding: 2px 0; }
}

/* 01.11.2026 Michael: "Du misst die Containerbreite und nicht die tatsaechliche Schriftbreite." Gemessen mit der echten Schrift
   bei 390 px: Spalte 147 px, breitester Eintrag je Block 171 px (Unterkunft Serfaus-Fiss-Ladis), 167 (AGB und Stornobedingungen),
   152 (Verfuegbarkeit und Buchen). Das Raster gab jedem Block die gleiche Breite, die Eintraege brachen um. Bis 809 px ist
   jeder Block jetzt so breit wie sein breitester Eintrag, Eintraege brechen nie, die Bloecke reihen sich ohne Umbruch. */
@media (max-width: 809px) {
  html body .fussraster { display: grid; grid-template-columns: max-content max-content !important; justify-content: space-between; column-gap: 24px !important; row-gap: 32px !important; }
  html body .fussblock li, html body .fussblock li a { white-space: nowrap; font-size: 13px; }
  html body .fussblock li { line-height: 20px; margin-bottom: 6px; }
}
/* gleiche Messung bei 360 px: 165 + 126 + 24 = 315 px Text gegen 288 px Platz, bei 320 px gegen 248 px. */
@media (max-width: 399px) {
  html body .fussblock li, html body .fussblock li a { font-size: 12px; }
  html body .fussraster { column-gap: 16px !important; }
}
@media (max-width: 339px) {
  html body .fussraster { grid-template-columns: max-content !important; justify-content: start; }
}

/* === /menue.css === */
/* =====================================================================
   Das Menue der Seite -- Fassung N31 aus probe-navigation.html
   Michael 25.09.2026: "Wir bauen N31 als Menue ein. Bring es zum Leben
   mit Emil Kowalski, mach es spektakulaer."

   Der Kopf der Tafel sitzt Pixel fuer Pixel auf dem Kopf der Seite: das X
   steht dort, wo der Hamburger stand, die Wortmarke bleibt an ihrem Platz
   und in ihrer Groesse. Gemessen am echten Kopf (25.09.2026):
     1440/810  Kopfhoehe 110, Knopf 40x33 bei x=40, Mitte y=55,
               Wortmarke 30 px, Sperrung .42em, Polster 40/0/22
     390       Kopfhoehe  88, Knopf bei x=20, Mitte y=44, Marke 21 px

   MOTION (Emil Kowalski, animations.dev):
     - nur transform, opacity, filter und clip-path, also GPU
     - Eintritt ease-out cubic-bezier(.23,1,.32,1), Austritt kuerzer
     - Uebergaenge statt Keyframes, damit ein Klick mitten in der
       Bewegung sofort umkehrt und nicht erst zu Ende laeuft
     - gestaffelt, 60 ms je Zeile: das liest sich als Reihenfolge
     - nichts startet bei scale(0) -- alles kommt aus 8 px und Unschaerfe
     - prefers-reduced-motion schaltet auf eine reine Blende um
   ===================================================================== */
:root { --me-aus: cubic-bezier(.23,1,.32,1); }

.menue {
  /* padding: 0 ist noetig -- kopf.css gibt .menue 64/40 mit, und das kam
     hier oben drauf: das X sass dadurch bei y=119 statt 55 und bei x=80
     statt 40 (gemessen 25.09.2026 an der eingebauten Fassung). */
  position: fixed; inset: 0; z-index: 60; padding: 0;
  background: #EFECE6; color: #3D3733;
  display: flex; flex-direction: column;
  visibility: hidden; pointer-events: none;
}
/* display:flex MUSS auch hier stehen. kopf.css hat .menue.offen{display:block},
   und das ist spezifischer als .menue{display:flex} -- die Tafel war
   geoeffnet dadurch ein Block, flex:1 am Satz wirkte nicht, und der Inhalt
   endete nach 675 px in einem 1180 px hohen Fenster (gemessen 25.09.2026). */
.menue.offen { visibility: visible; pointer-events: auto; display: flex; }

/* Der Vorhang: die Flaeche wischt von oben herein, statt zu blenden.
   clip-path laeuft auf der GPU und laesst sich jederzeit umkehren. */
.menue::before {
  content: ""; position: absolute; inset: 0; background: #EFECE6;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 620ms var(--me-aus);
}
.menue.offen::before { clip-path: inset(0 0 0 0); }

.menue > * { position: relative; z-index: 1; }

/* ---------- Kopf der Tafel ---------- */
.me-kopf {
  position: relative; z-index: 2;
  flex: 0 0 auto; height: 110px; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--rand); max-width: var(--breite); width: 100%; margin: 0 auto;
}
.me-x {
  justify-self: start; width: 52px; height: 45px; position: relative;
  border: 0; background: transparent; padding: 12px 2px; margin: -12px -2px; box-sizing: content-box; cursor: pointer; border-radius: 0;  /* 30.09.2026: 44 x 44 */
}
.me-x span {
  position: absolute; left: 6px; top: 22px; width: 40px; height: 1px; background: #3D3733;
  transition: transform 260ms var(--me-aus);
}
.me-x span:nth-child(1) { transform: rotate(45deg); }
.me-x span:nth-child(2) { transform: rotate(-45deg); }
.me-x:hover span:nth-child(1) { transform: rotate(45deg) scaleX(1.12); }
.me-x:hover span:nth-child(2) { transform: rotate(-45deg) scaleX(1.12); }
.me-x:active { transform: scale(.97); }
.me-x:focus-visible { outline: 2px solid #3D3733; outline-offset: 4px; }
.me-marke {
  font-family: Oswald, system-ui, sans-serif; font-weight: 300;
  font-size: 30px; letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase; text-decoration: none; color: #3D3733;
  padding: 40px 0 22px; line-height: 1;
}
.me-sprache {
  justify-self: end; margin: 0;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: #6E6862; white-space: nowrap;
}
.me-sprache { -webkit-user-select: none; user-select: none; }
.me-sprache a { color: #3D3733; text-decoration: none; display: inline-block; padding: 14px 6px; margin: -14px -6px;
                cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.me-sprache .hier, .me-sprache .aus { cursor: default; }  /* 30.09.2026: 44 hoch statt 16 */
.me-sprache .aus, .me-sprache a.aus { color: #A9A299; }

/* ---------- Satz ---------- */
/* Der Satz liegt ueber die GANZE Tafel und zentriert sich darin -- nicht
   im Rest zwischen Kopf und Fuss. Mit flex:1 sass die Mitte 32 px zu tief,
   weil der Kopf 110 und der Fuss nur 44 px hoch ist (gemessen 25.09.2026:
   Mitte 622 in einem 1180 px hohen Fenster, richtig waeren 590).
   Das Polster ist oben wie unten so hoch wie der Kopf: dadurch liegt die
   Mitte exakt auf der Fenstermitte, und der Satz kann nie unter den Kopf
   oder in den Fuss laufen. */
.me-satz {
  /* min(110px, 12vh): bei einem flachen Fenster (1280x700) war der Satz
     hoeher als der Raum zwischen den beiden 110-px-Polstern und wurde nach
     unten gedrueckt -- die Mitte lag 16 px zu tief. Mit 12vh schrumpft das
     Polster mit der Hoehe mit. */
  position: absolute; inset: 0; padding: min(110px, 12vh) var(--rand);
  display: grid; place-items: center; z-index: 1;
}
.me-liste {
  /* width: max-content, nicht 100%: sonst ist die Zeile so breit wie der
     Satzspiegel, und das seitliche Fach haengt an deren Kante statt an der
     des Wortes -- bei 1600 px lagen so alle fuenf Punkte ausserhalb. */
  list-style: none; margin: 0 auto; padding: 0;
  width: max-content; max-width: 100%;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: baseline;
}
.me-liste li { display: contents; }
.me-liste li.hat-unter {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  align-items: baseline; position: relative;
}
.me-liste a, .me-kopfknopf { display: contents; color: #3D3733; text-decoration: none; }
.me-kopfknopf { border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; font: inherit; }

.me-liste a > span, .me-kopfknopf > span {
  font-family: "Cormorant Garamond", 'Cormorant Ersatz',Georgia, serif; font-weight: 300;
  /* min(4.4vw, 9vh) statt nur vw: sechs Zeilen mal 1.16em muessen in die
     Hoehe passen, sonst laeuft der Satz bei einem flachen Fenster unten
     heraus. Der kleinere der beiden Werte gewinnt. */
  /* Michael 25.09.2026: "Mach die Schrift 20 % heller" und "etwas weniger
     Zeilenabstand". 20 Prozent heller heisst 20 Prozent des Weges zum
     Grund, nicht 20 Prozent Deckkraft: #3D3733 auf #EFECE6 ergibt
     #615B57, Kontrast 5,67:1 -- noch ueber der Schwelle 4,5.
     Zeilenabstand 1,16 -> 1,04 em. */
  font-size: clamp(26px, min(4.4vw, 9vh), 64px); line-height: 1.04em;
  text-transform: uppercase; letter-spacing: .04em; color: #615B57;
  opacity: 0; transform: translate3d(0,14px,0); filter: blur(6px);
  transition: opacity 520ms var(--me-aus), transform 560ms var(--me-aus),
              filter 560ms var(--me-aus), color 240ms ease;
  transition-delay: calc(var(--i) * 60ms + 160ms);
}
.menue.offen .me-liste a > span,
.menue.offen .me-kopfknopf > span { opacity: 1; transform: none; filter: blur(0); }
/* Beim Schliessen kurz und ohne Staffelung -- ein Austritt darf nicht
   so lange dauern wie ein Eintritt. */
.menue:not(.offen) .me-liste a > span,
.menue:not(.offen) .me-kopfknopf > span {
  transition-duration: 200ms; transition-delay: 0ms;
}

.me-li    { grid-column: 1; justify-self: end;   padding-right: .28em; position: relative; }
.me-strich{ grid-column: 2; justify-self: center; }
.me-re    { grid-column: 3; justify-self: start; padding-left: .28em; position: relative; }
.me-voll  { grid-column: 1 / -1; justify-self: center; position: relative; }

.me-nr {
  position: absolute; right: 100%; bottom: .12em; margin-right: 34px;
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: 11px; letter-spacing: .12em; text-indent: 0;
  text-transform: none; color: #A9A299; white-space: nowrap;
  transition: color 240ms ease;
}
.me-liste:hover a > span, .me-liste:hover .me-kopfknopf > span { color: #A9A299; }
.me-liste a:hover > span, .me-liste a:focus-visible > span,
.me-kopfknopf:hover > span, .me-kopfknopf:focus-visible > span { color: #3D3733; }
/* Der geoeffnete Punkt bleibt dunkel, auch wenn der Zeiger weiterwandert.
   Vorher trat er mit allen anderen zurueck, sobald die Maus die Liste
   verliess -- man sah dann nicht mehr, WOZU das offene Fach gehoert.
   Die Regel steht nach den Hover-Regeln, damit sie gewinnt. */
.me-liste .me-kopfknopf[aria-expanded="true"] > span,
.me-liste:hover .me-kopfknopf[aria-expanded="true"] > span { color: #3D3733; }
.me-liste .me-kopfknopf[aria-expanded="true"] .me-plus i { background: #3D3733; }
.me-liste a:focus-visible > span, .me-kopfknopf:focus-visible > span { outline: 2px solid #3D3733; outline-offset: 6px; }

/* ---------- das Plus ---------- */
.me-plus {
  position: absolute; left: 100%; top: 50%; margin-left: 26px;
  width: 34px; height: 34px; transform: translateY(-50%);
}
.me-plus i {
  position: absolute; left: 0; top: 16px; width: 34px; height: 1px; background: #8A857D;
  transition: transform 420ms var(--me-aus), background 240ms ease;
}
.me-plus i:last-child { transform: rotate(90deg); }
.me-kopfknopf[aria-expanded="true"] .me-plus i:last-child { transform: rotate(0deg); }
.me-kopfknopf:hover .me-plus i { background: #3D3733; }
.me-plus::after {           /* Antippflaeche 44 px, unsichtbar */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%,-50%);
}

/* ---------- Faecher ---------- */
.me-fach {
  grid-column: 1 / -1; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--me-aus);
}
.me-fach.auf { grid-template-rows: 1fr; }
.me-fachinnen { overflow: hidden; min-height: 0; }
.me-fach ul { list-style: none; margin: 0; padding: 0; }
.me-fach li { display: list-item; opacity: 0; transform: translate3d(0,8px,0);
  transition: opacity 200ms ease, transform 200ms ease; }
.me-fach.auf li {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--me-aus), transform 420ms var(--me-aus);
  transition-delay: calc(var(--j) * 45ms);
}
.me-fach a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; text-decoration: none; color: #6E6862;
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .18em; text-transform: uppercase;
  transition: color 220ms ease;
}
.me-fach a:hover, .me-fach a:focus-visible { color: #3D3733; }

/* Desktop: die Faecher haengen seitlich an einer Haarlinie */
@media (min-width: 1440px) {
  .me-fach {
    position: absolute; top: 50%; width: 260px;
    grid-template-rows: 1fr; opacity: 0; pointer-events: none;
    transition: opacity 380ms var(--me-aus), transform 520ms var(--me-aus);
  }
  .me-fach[data-seite="rechts"] { left: calc(100% + 76px); transform: translate(-14px,-50%); }
  .me-fach[data-seite="links"]  { right: calc(100% + 76px); transform: translate(14px,-50%); }
  .me-fach.auf { opacity: 1; pointer-events: auto; transform: translate(0,-50%); }
  .me-fach[data-seite="rechts"] ul { padding-left: 26px; border-left: 1px solid #D5CEC1; }
  .me-fach[data-seite="links"]  ul { padding-right: 26px; border-right: 1px solid #D5CEC1; }
  .me-fach[data-seite="rechts"] a { justify-content: flex-start; }
  .me-fach[data-seite="links"]  a { justify-content: flex-end; }
  .me-fach a { min-height: 44px; }  /* 30.09.2026: war 40 -- unter der Tippflaeche */
}
/* Tablet: waagrecht -- gemessen 52 px statt 220 px Hoehe */
@media (min-width: 761px) and (max-width: 1439px) {
  .me-fach ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 28px; padding: 10px 0 2px; }
  .me-fach a { min-height: 40px; }
}

/* ---------- Fuss ---------- */
.me-fuss {
  /* margin: auto auto 0 -- oben auto schiebt den Fuss ans untere Ende,
     seitlich auto zentriert ihn. Vorher stand margin-top:auto VOR einem
     margin:0 auto, und die Kurzform hat es wieder auf 0 gesetzt: der Fuss
     sass dadurch direkt unter dem Kopf bei y=110 (gemessen 25.09.2026). */
  position: relative; z-index: 2;
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: baseline; gap: 20px; padding: 0 var(--rand) 26px;
  max-width: var(--breite); width: 100%; margin: auto auto 0;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: #6E6862;
  opacity: 0; transition: opacity 520ms var(--me-aus) 420ms;
}
.menue.offen .me-fuss { opacity: 1; }
.me-fuss p { margin: 0; }
.me-fuss p:last-child { justify-self: end; }
.me-fuss a { color: inherit; text-decoration: none; display: inline-block; padding: 15px 0; margin: -15px 0; }  /* 30.09.2026: Tippflaeche 44 statt 14 */
.me-fuss a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .me-kopf { height: 88px; }
  .me-satz { padding: min(88px, 11vh) var(--rand); }
  .me-marke { font-size: 24px; padding: 28px 0 14px; }
  .me-liste a > span, .me-kopfknopf > span { font-size: clamp(20px, min(7vw, 5.2vh), 32px); line-height: 1.1em; }
  .me-nr { display: none; }
  .me-plus { left: 100%; margin-left: 6px; width: 26px; height: 26px; }
  .me-plus i { width: 26px; top: 12px; }
  .me-fach ul { padding: 8px 0 10px; }
  .me-fach.auf ul { border-top: 1px solid #DCD5C8; border-bottom: 1px solid #DCD5C8; margin: 6px 0 8px; }
  .me-fach a { min-height: 44px; font-size: 13px; }
  .me-fuss { grid-template-columns: 1fr; gap: 4px; text-align: center; padding-bottom: 18px; }
  .me-fuss p:last-child { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .menue::before { transition: none; clip-path: none !important; }
  .me-liste a > span, .me-kopfknopf > span, .me-fach, .me-fach li, .me-fuss {
    transition: opacity 180ms ease !important;
    transform: none !important; filter: none !important; transition-delay: 0ms !important;
  }
}

/* Menueschrift am Handy groesser (30.09.2026) ============================
   Michael: "Schrift bei Breakpoint Mobil groesser vom Menue."
   Gemessen bei 390 px: die Hauptpunkte standen auf clamp(20px, min(7vw,
   5.2vh), 32px) und kamen damit auf 21 px -- 7 vw sind bei 390 px nur 27 px,
   und 5,2 vh deckelten auf 21. Neu: Untergrenze 26, Obergrenze 38, und die
   Hoehenbindung faellt weg, weil sie am Handy die Schrift klein haelt, statt
   sie zu schuetzen.
   Die Unterpunkte in den Faechern ziehen mit: 13 auf 15 px. */
@media (max-width: 809px) {
  html body .me-liste a > span,
  html body .me-kopfknopf > span {
    /* 01.10.2026: 8,2vw waren zu viel -- bei 390 px ragte "SOMMER | WINTER+"
       bis 399 px, also 9 px ueber den Rand, und die Zeilen standen mit Mitte
       218 statt 195 nicht mittig. 6,6vw ergibt dort 26 px und laesst das Plus
       innerhalb. */
    /* Deckel 34 statt 38: bei 810 px war die Liste 821 px breit, der
       Satzspiegel aber nur 730 -- sie ragte 51 px aus dem Fenster. Gemessen
       01.10.2026. */
    font-size: clamp(20px, 6.1vw, 34px) !important;
    line-height: 1.15em !important;
    max-width: 100% !important;
  }
  html body .me-fach a { font-size: 15px !important; letter-spacing: .16em !important; }
}

/* Kopfzeile fluchtet mit dem Inhalt (30.09.2026) =========================
   Michael: "Warum gibt es auf der rechten Seite einen Rand und auf der linken
   nicht? Gleich viel links wie rechts, in einer Linie mit dem Hamburger, und
   Abschluss rechts mit dem DE/EN."

   Gemessen bei 1440 px: der Hamburger begann bei 41, das Bild darunter bei 43
   -- zwei Pixel daneben. Rechts endete der Sprachwaehler bei 1360, das Bild
   aber erst bei 1398: 38 px Unterschied.
   Ursache: .me-kopf hat 40 px Innenabstand auf einer Breite von 1435 px,
   waehrend der Inhalt darunter auf min(1435px, 100% - 2 x Rand) sitzt -- das
   sind zwei verschiedene Rechnungen. Jetzt dieselbe fuer beide, und die
   Knoepfe geben ihren eigenen Innenabstand nach aussen ab, damit ihre SCHRIFT
   auf der Kante steht, nicht ihr Kasten. */
.me-kopf {
  width: min(var(--breite, 1435px), 100% - 2 * var(--rand)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
/* Der Hamburger traegt links 2 px Innenabstand, der Sprachwaehler rechts --
   beide werden nach aussen ausgeglichen, damit die sichtbare Kante stimmt. */
.me-kopf > :first-child { margin-left: -2px; }
.me-kopf > :last-child { margin-right: -2px; }

/* Hamburger auf Schriftzughöhe, Sprachen mittig ==========================
   Michael 01.10.2026: "Das Hamburger Menue schliesst genau horizontal mit der
   Typografie GEBHARD ab. Oberster Strich ganz oben, unterster unten."

   Gemessen vorher bei 1440 px: Schriftzug 9 bis 101 (92 px), Hamburger 16 bis
   73 (57 px). Ein erster Versuch mit height: 1em und align-self: stretch hat
   den Knopf aus dem Kopf geschoben (gemessen -12 bis 4) -- die Striche haengen
   an einer festen Hoehe, nicht an der Schriftgroesse.
   Jetzt bekommt der Knopf die Hoehe der Wortmarke ueber eine eigene Variable,
   und die Striche verteilen sich darin. Alle drei Teile bleiben mittig. */
.me-kopf { align-items: center !important; }
.me-kopf .me-x,
.me-kopf .me-kopfknopf {
  height: var(--me-marke-h, 44px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
}

/* Hamburger und Sprachwähler fluchten mit dem Inhalt =====================
   Gemessen am 01.10.2026: der Satz beginnt bei 43 px (1440) bzw. 36 px (390),
   der Hamburger-Kasten bei 38 bzw. 34 -- die Striche selbst erst bei 48 bzw.
   44. Der Knopf trägt links 10 px Innenabstand, die sichtbare Linie steht
   damit 5 bis 8 px zu weit innen.
   Der Ausgleich holt die Striche auf die Satzkante; die Tippfläche bleibt
   vollständig erhalten, sie ragt nur nach außen. */
.me-kopf .me-x,
.me-kopf .me-kopfknopf { margin-left: -10px !important; }
.me-kopf > :last-child { margin-right: -2px !important; }

/* Das Plus zaehlt zur Zeilenbreite ======================================
   Michael 01.10.2026: "Menue nicht zentriert, Plus geht über den rechten Rand
   hinaus." Das Pluszeichen haengt als absolutes Element am Zeilenende und
   zaehlte deshalb nicht zur Breite -- die Zeile galt als passend, obwohl sie
   es nicht war. Jetzt steht es im Fluss, und die Zeile bleibt mittig. */
.me-liste a > span, .me-kopfknopf > span { max-width: 100%; }
.menue .me-liste li { padding-inline: 16px; }

/* Das offene Menue steht mittig ===========================================
   Michael 01.10.2026: "Menue nicht zentriert." Gemessen bei 390 px lagen die
   Wortmitten bei 159/126/174/132/168/198/115 statt bei 195. Zwei Ursachen,
   beide hier behoben:
   1. Die Woerter standen LINKSBUENDIG in der Mittelspalte, die so breit ist
      wie das laengste Wort. Jedes kuerzere Wort kippte dadurch nach links.
   2. Das Pluszeichen sass in der dritten Spalte und hatte links keinen
      Gegenpart. Die Mittelspalte rutschte um seine halbe Breite nach links.
      Darum bekommen erste und dritte Spalte jetzt dieselbe feste Breite. */
   NICHT TUN: die erste und dritte Spalte auf eine feste Breite zwingen. Am
   01.10.2026 probiert (var(--me-seite,1.15em)) und gemessen: die Doppelzeilen
   "ZIMMER | PREISE", "ESSEN | TRINKEN", "SOMMER | WINTER" stehen in genau
   diesen Spalten -- bei 890 px lag "Preise" danach bei 984 px, also 94 px
   ausserhalb des Fensters. Die 1fr-Spalten bleiben.
   Richtig ist minmax: die Spalte ist MINDESTENS so breit wie das Pluszeichen
   auf der anderen Seite -- damit steht die Mittelspalte wirklich in der Mitte
   -- und waechst trotzdem, sobald ein Wort darin steht. */
.me-liste { grid-template-columns: minmax(var(--me-seite, 1.15em), 1fr) auto minmax(var(--me-seite, 1.15em), 1fr) !important; }
.me-liste a > span, .me-kopfknopf > span { text-align: center; }

/* Die Unterfaecher sprengen die Liste nicht mehr ==========================
   Gemessen 01.10.2026 bei 810 px: zwei offene Faecher je 789 px breit zogen
   die Menueliste auf 821 px (Satzspiegel 730) -- sie ragte 51 px aus dem
   Fenster, und die Zeilenmitte lag bei 451 statt 405. Grid-Kinder haben
   min-width:auto und wachsen ueber ihre Spalte hinaus; min-width:0 bindet
   sie wieder an den Satzspiegel. */
.me-liste li.hat-unter, .me-fach, .me-fachinnen { min-width: 0; max-width: 100%; }
.me-fach, .me-fachinnen { overflow-wrap: normal; }

/* Die Liste ist ein Rasterkind -- und Rasterkinder haben min-width:auto, also
   eine automatische Mindestbreite, die sogar max-width:100% uebergeht.
   Gemessen 01.10.2026 bei 810 px: Satzspiegel 730, Liste 821. min-width:0
   bindet sie an den Satzspiegel zurueck. */
.me-satz > .me-liste, .me-liste { min-width: 0; }

/* Der Rahmen des Menuesatzes hatte KEINE Spaltenangabe. Ein Raster legt dann
   eine implizite Spalte "auto" an, und die ist so breit wie ihr Inhalt --
   gemessen 821 px in einem 730 px breiten Satzspiegel. Deshalb lief auch
   max-width:100% der Liste ins Leere: 100 % bezogen sich auf diese zu breite
   Spalte. Eine gezaehlte Spalte minmax(0,1fr) bindet beides an den Satz. */
.menue .me-satz { grid-template-columns: minmax(0, 1fr); }


/* Wortmarke im Menue so leicht wie im Kopf ==============================
   Michael 02.10.2026: "Der Schriftzug Gebhard oben in der Mitte soll, wenn das
   Menue geoeffnet ist, in der gleichen Staerke sein wie auf der Startseite."
   Gemessen bei 1440 px: Kopf Oswald 200, Menue Oswald 300. Gleiche Groesse,
   gleiche Laufweite, nur das Gewicht lief auseinander. */
#menue .me-marke { font-weight: 200; }


/* =====================================================================
   Das offene Menue (Fassung A "Fluegel", 11.10.2026)
   Michael: "Die Unterpunkte sofort sichtbar, kein zweiter Klick. Sommer und
   Winter eigene Punkte, die Seiten wechseln sich ab. Ohne Galerie."
   Eigene Klassen (mo-), damit die alten me-Regeln mit ihren !important
   nicht hineinreden. Der Rahmen (Kopf, Satz, Fuss, Vorhang) bleibt.

   Desktop ab 1100: Listen NEBEN dem Wort, Sommer links, Winter rechts, Info
     links; die erste Listenzeile steht auf der Oberkante der Versalien. Jede
     Hauptzeile gleich hoch (76 bis 86 px), die Fluegel haengen frei.
   Tablet 761 bis 1099: Listen unter dem Wort, an der Achse geteilt.
   Handy bis 760: Raster 8 px, zwei Spalten, linksbuendig.
   Eintritt: Woerter steigen aus einer Maske, Trennstrich wird gezogen,
   Haarlinie waechst, Unterpunkte gleiten von aussen herein.
   ===================================================================== */
:root { --mo-expo: cubic-bezier(.16,1,.3,1); }

.mo-liste {
  --wort: clamp(26px, min(4.4vw, 8vh), 64px);
  list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 640px;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: start;
}
.menue ol.mo-liste { gap: 0; }   /* kopf.css: .menue ol { gap: var(--a3) } waere spezifischer */
.mo-z { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: start; position: relative; margin-bottom: 8px; }
.mo-w {
  display: block; position: relative; text-decoration: none; color: #615B57;
  font-family: "Cormorant Garamond", 'Cormorant Ersatz', Georgia, serif; font-weight: 300;
  font-size: clamp(24px, min(4.4vw, 8vh), 64px); line-height: 1.1em;
  text-transform: uppercase; letter-spacing: .04em; transition: color 240ms ease;
}
.mo-s { grid-column: 2; justify-self: center; }
.mo-l { grid-column: 1; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; position: relative; min-width: 0; }
.mo-r { grid-column: 3; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; position: relative; min-width: 0; }
.mo-v { grid-column: 1 / -1; justify-self: center; display: flex; flex-direction: column; align-items: center; position: relative; }
.mo-l > .mo-w { padding-right: .28em; }
.mo-r > .mo-w { padding-left: .28em; }
.mo-nr {
  display: none; position: absolute; right: 100%; bottom: .12em; margin-right: 34px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: none; color: #A9A299; white-space: nowrap;
}
.mo-liste:hover .mo-w { color: #A9A299; }
.mo-z:hover .mo-w, a.mo-w:focus-visible { color: #3D3733; }
a.mo-w:focus-visible { outline: 2px solid #3D3733; outline-offset: 6px; }

.mo-u { list-style: none; margin: 13px 0 0; padding: 0; font-family: "DM Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .13em; text-transform: uppercase; }
.mo-u a { display: flex; align-items: center; min-height: 44px; color: #6E6862; text-decoration: none; white-space: nowrap; transition: color 220ms ease; }
.mo-l > .mo-u { padding-right: .28em; text-align: right; }
.mo-l > .mo-u a { justify-content: flex-end; }
.mo-r > .mo-u { padding-left: .28em; }
.mo-v > .mo-u a { justify-content: center; }
.mo-u a:hover, .mo-u a:focus-visible { color: #3D3733; }
.mo-u a:focus-visible { outline: 2px solid #3D3733; outline-offset: 3px; }
.mo-z:hover .mo-u a { color: #615B57; }
.mo-z:hover .mo-u a:hover { color: #3D3733; }
.mo-hat { margin-top: 14px; margin-bottom: 6px; }

/* Eintritt: nur transform, opacity, filter; Ausgang kurz und ohne Staffelung */
.mo-m { display: block; overflow: hidden; padding: .05em 0 .09em; margin: -.05em 0 -.09em; }
.mo-t { display: block; transform: translate3d(0,112%,0) rotate(4deg); transform-origin: 0 100%; transition: transform 200ms ease; }
.menue.offen .mo-t { transform: none; transition: transform 1000ms var(--mo-expo); transition-delay: calc(var(--i) * 85ms + 100ms); }
.menue.offen .mo-r .mo-t { transition-delay: calc(var(--i) * 85ms + 190ms); }
.mo-s { transform: scaleY(0); transition: transform 200ms ease; }
.menue.offen .mo-s { transform: none; transition: transform 800ms var(--mo-expo); transition-delay: calc(var(--i) * 85ms + 160ms); }
.mo-nr { opacity: 0; transition: opacity 200ms ease; }
.menue.offen .mo-nr { opacity: 1; transition: opacity 700ms ease; transition-delay: calc(var(--i) * 85ms + 700ms); }
.mo-u li { opacity: 0; transform: translate3d(var(--dx,0),10px,0); filter: blur(6px); transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease; }
.mo-l > .mo-u { --dx: -26px; }
.mo-r > .mo-u { --dx: 26px; }
.menue.offen .mo-u li {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 700ms var(--mo-expo), transform 900ms var(--mo-expo), filter 700ms var(--mo-expo);
  transition-delay: calc(var(--i) * 85ms + 480ms + var(--j,0) * 75ms);
}
.mo-u, .mo-hat { border-color: transparent; }
.menue.offen .mo-u, .menue.offen .mo-hat { border-color: #D5CEC1; transition: border-color 700ms ease 600ms; }
/* Hover: Unterstrich wird gezogen, Druck federt */
.mo-u a > span { position: relative; }
.mo-u a > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.5px; height: 1px; background: color-mix(in srgb, currentColor 55%, transparent); transform: scaleX(0);  /* 12.10.2026: genau auf die Mitte zwischen zwei Zeilen (Zeile = 24,9 px), feiner (55 %) */ transform-origin: 100% 50%; transition: transform 360ms var(--mo-expo); }
.mo-r > .mo-u a > span::after, .mo-v > .mo-u a > span::after { transform-origin: 0 50%; }
.mo-u a:hover > span::after, .mo-u a:focus-visible > span::after { transform: scaleX(1); }
.mo-u a:active { transform: scale(.97); }

/* Tablet */
@media (min-width: 761px) {
  .menue ol.mo-liste[data-f="a"] { max-width: 860px; }
  .menue ol.mo-liste[data-f="a"] .mo-w { font-size: clamp(32px, 5.2vw, 52px); }
  .menue ol.mo-liste[data-f="a"] .mo-u { font-size: 14px; letter-spacing: .15em; }
  .menue ol.mo-liste[data-f="a"] .mo-u a { min-height: 38px; }
  .menue ol.mo-liste[data-f="a"] .mo-l > .mo-u { border-right: 1px solid #D5CEC1; padding-right: 22px; margin-top: 6px; }
  .menue ol.mo-liste[data-f="a"] .mo-r > .mo-u { padding-left: 22px; margin-top: 6px; }   /* ein Strich: der linke traegt ihn, sonst stehen zwei nebeneinander */
  .menue ol.mo-liste[data-f="a"] .mo-v > .mo-u { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; }
}

/* Desktop und Tablet: Fluegel ab 761 px (Michael 11.10.2026: "Fluegel ab 761 px"). Schrift, Strichabstand und Fluegelschrift
   laufen mit der Breite, damit die Fluegel bei 761 px noch ins Bild passen; ab 1100 px unveraendert (48 px Wort, 55 px Abstand, 15 px Schrift). */
@media (min-width: 761px) {
  .menue ol.mo-liste[data-f="a"] { max-width: none; width: max-content; --wort: clamp(24px, min(4.4vw, 8vh), 64px); --ab: clamp(20px, 5vw, 55px); --fl: clamp(10.5px, 1.37vw, 15px); }
  .menue ol.mo-liste[data-f="a"] .mo-w { font-size: var(--wort); }
  .menue ol.mo-liste[data-f="a"] .mo-nr { display: block; }
  /* 11.10.2026, Michael: Typografie der Untertitel "zwei Stufen zurueck", auf den ersten Stand (15 px,
     Sperrung .16 em, Mindesthoehe 22 px, Farbe wie vorher). Geblieben sind NUR die Mitte der Striche
     (55 px zu beiden Seiten, Block auf der Wortmitte) und die Reihenfolge der Ansichten. Der negative
     Rand zieht den Leerraum hinter dem letzten Buchstaben ab, damit der Abstand zum Strich stimmt. */
  .menue ol.mo-liste[data-f="a"] .mo-u { font-size: calc(var(--fl) * .88); letter-spacing: .24em; line-height: 1; font-variant-numeric: tabular-nums; font-kerning: none; }
  .menue ol.mo-liste[data-f="a"] .mo-l > .mo-u a span, .menue ol.mo-liste[data-f="a"] .mo-v > .mo-u a span { margin-right: -.24em; }
  .menue ol.mo-liste[data-f="a"] .mo-u a { min-height: 26px; color: #857E77; }   /* 13.10.2026: Zeilenabstand 26 px, mehr Sperrung, kleiner und leiser: Fluegel dient dem Wort, konkurriert nicht */
  /* 11.10.2026, Michael: die Striche muessen "genau in der Mitte" stehen. Gemessen vorher: Untertitel->Strich 26 px,
     Strich->Wort 55 px, und der Block sass 16 px unter der Mitte des Wortes. Jetzt: Block senkrecht auf der
     Wortmitte, Abstand zum Strich auf beiden Seiten 55 px. */
  .menue ol.mo-liste[data-f="a"] .mo-u { position: absolute; top: 50%; translate: 0 -50%; margin: 0; border: 0; }
  .menue ol.mo-liste[data-f="a"] .mo-l > .mo-u { right: calc(100% + var(--ab) - 1px); padding: 0 var(--ab) 0 0; margin-top: 0; }
  .menue ol.mo-liste[data-f="a"] .mo-r > .mo-u { left: calc(100% + var(--ab) - 1px - .04 * var(--wort)); padding: 0 0 0 var(--ab); margin-top: 0; }
  .menue ol.mo-liste[data-f="a"] .mo-v > .mo-u { display: block; right: calc(100% + var(--ab) - 1px); padding: 0 var(--ab) 0 0; text-align: right; }
  .menue ol.mo-liste[data-f="a"] .mo-v > .mo-u a { justify-content: flex-end; }
  /* 12.10.2026, Michael: die drei Untermenuepunkte von INFO etwas tiefer, damit ihre Oberkante auf der Oberkante von INFO steht.
     Rechnung: Fluegel 3 Zeilen zu 22 px (66 px), Versalhoehe des Worts ca. .63 em, der Fluegelschrift ca. .7 em.
     Verschiebung = 33 - .315 * Wort - (22 - .7 * Fluegelschrift) / 2. Nur INFO, Sommer und Winter bleiben mittig. */
  .menue ol.mo-liste[data-f="a"] .mo-v > .mo-u { translate: 0 calc(-50% + 25px + .35 * var(--fl) - .315 * var(--wort) + 16px); }   /* 13.10.2026, Michael: Info-Fluegel weiter runter, +16 px */   /* +3 px: nachgemessen (Oberkante Fluegel 2,9 px ueber INFO) */
  .menue ol.mo-liste[data-f="a"] .mo-u::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: #D5CEC1; transform: scaleY(0); transition: transform 200ms ease; }
  .menue ol.mo-liste[data-f="a"] .mo-l > .mo-u::after, .menue ol.mo-liste[data-f="a"] .mo-v > .mo-u::after { right: 0; }
  .menue ol.mo-liste[data-f="a"] .mo-r > .mo-u::after { left: 0; }
  .menue.offen ol.mo-liste[data-f="a"] .mo-u::after { transform: scaleY(1); transition: transform 900ms var(--mo-expo) 560ms; }
  /* gleicher Rhythmus: jede Hauptzeile gleich hoch, die Fluegel zaehlen nicht mit */
  .menue ol.mo-liste[data-f="a"] .mo-z, .menue ol.mo-liste[data-f="a"] .mo-z.mo-hat { margin: 0; min-height: clamp(76px, 9vh, 86px); align-items: center; }
  .menue ol.mo-liste[data-f="a"] .mo-z .mo-l, .menue ol.mo-liste[data-f="a"] .mo-z .mo-r, .menue ol.mo-liste[data-f="a"] .mo-z .mo-v, .menue ol.mo-liste[data-f="a"] .mo-z .mo-s { align-self: center; }
}

/* Ansichten: drei Fassungen, umschaltbar mit der Leiste unten (01 B Achse, 02 C Zickzack,
   03 A Fluegel). Leiste und B/C gibt es bis 1099 px (Handy UND Tablet); ab 1100 px steht nur A.
   Handy: Raster 8 px (Wort- und Listenzeile 48). Tablet: dieselben Ansichten, groessere Schrift. */
/* kopf.css: .menue ol { display: grid } ist spezifischer als .mo-liste, darum der lange Selektor */
@media all {
  .menue ol.mo-liste { display: none; }
  .menue[data-f="a"] ol.mo-liste[data-f="a"], .menue[data-f="b"] ol.mo-liste[data-f="b"], .menue[data-f="c"] ol.mo-liste[data-f="c"] { display: grid; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-z { grid-column: 1 / -1; grid-template-columns: subgrid; margin: 0; align-items: start; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-w { font-size: var(--wf); line-height: var(--lh); }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-l > .mo-w, .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-r > .mo-w { padding: 0; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-u { margin: 0; padding: 0; border: 0; text-align: left; font-size: 13px; letter-spacing: .13em; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-u a { min-height: var(--ih); justify-content: flex-start; }
  /* obere Gruppe: Zimmer | Preise und Essen | Trinken um einen Strich, Wellness mittig */
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-z:not(.mo-hat):not(:has(> .mo-v)) { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-z:not(.mo-hat) > .mo-l { grid-column: 1; justify-self: end; align-items: flex-end; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-z:not(.mo-hat) > .mo-r { grid-column: 3; justify-self: start; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-z:not(.mo-hat) > .mo-l > .mo-w { padding-right: .3em; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-z:not(.mo-hat) > .mo-r > .mo-w { padding-left: .3em; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-z:not(.mo-hat) > .mo-s { display: block; grid-column: 2; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-z:not(.mo-hat) > .mo-v { display: flex; flex-direction: row; justify-content: center; align-items: center; }

  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) { --ih: 48px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }

  /* 01 B Achse: ein senkrechter Strich in der Mitte; links rechtsbuendig, rechts linksbuendig;
     Info steht wie ein Fluegel (Liste links, Wort rechts, Oberkante auf einer Linie) */
  .menue ol.mo-liste[data-f="b"] { column-gap: 0; }
  .menue ol.mo-liste[data-f="b"] .mo-hat { position: relative; margin-top: 28px; margin-bottom: 6px; }
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-s { display: block; grid-column: 2; visibility: hidden; }
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-l { grid-column: 1; justify-self: end; align-items: flex-end; }
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-r { grid-column: 3; justify-self: start; align-items: flex-start; }
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-l > .mo-w { padding-right: .3em; }
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-r > .mo-w { padding-left: .3em; }
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-l > .mo-u { align-self: flex-end; text-align: right; padding-right: 22px; margin-top: 6px; }
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-l > .mo-u a { justify-content: flex-end; }
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-r > .mo-u { align-self: flex-start; padding-left: 22px; margin-top: 6px; }
  .menue ol.mo-liste[data-f="b"] .mo-info > .mo-l > .mo-u { margin-top: calc((var(--lh) - .63 * var(--wf)) / 2 - (var(--ih) - 8px) / 2); }
  .menue ol.mo-liste[data-f="b"] .mo-hat::after {
    content: ""; position: absolute; left: 50%; top: 10px; bottom: 8px; width: 1px; background: #D5CEC1;
    transform: translateX(-.5px) scaleY(0); transform-origin: 50% 0; transition: transform 200ms ease;
  }
  .menue.offen .mo-liste[data-f="b"] .mo-hat::after { transform: translateX(-.5px) scaleY(1); transition: transform 900ms var(--mo-expo) 560ms; }

  /* 02 C Zickzack: Sommer, Winter, Info je eine Zeile, Liste links, rechts, links */
  .menue ol.mo-liste[data-f="c"] .mo-zz { display: grid; grid-template-columns: 1fr; margin: 0; padding-top: 10px; border-top: 1px solid transparent; }
  .menue ol.mo-liste[data-f="c"] .mo-z:not(.mo-zz) + .mo-zz { margin-top: 24px; }
  .menue.offen .mo-liste[data-f="c"] .mo-zz { border-top-color: #D5CEC1; }
  .menue ol.mo-liste[data-f="c"] .mo-zz > .mo-v { display: block; grid-column: 1; justify-self: stretch; }
  .menue ol.mo-liste[data-f="c"] .mo-zz[data-s="l"] > .mo-v { text-align: left; }
  .menue ol.mo-liste[data-f="c"] .mo-zz[data-s="r"] > .mo-v { text-align: right; }
  .menue ol.mo-liste[data-f="c"] .mo-zz .mo-w { display: inline-block; padding: 0; }
  .menue ol.mo-liste[data-f="c"] .mo-zz .mo-u { display: flex; flex-wrap: wrap; gap: 0 24px; }
  .menue ol.mo-liste[data-f="c"] .mo-zz[data-s="l"] .mo-u { justify-content: flex-start; }
  .menue ol.mo-liste[data-f="c"] .mo-zz[data-s="r"] .mo-u { justify-content: flex-end; }
  .menue ol.mo-liste[data-f="c"] .mo-zz[data-s="r"] .mo-u a { justify-content: flex-end; }

  /* die feine Leiste: duenner Strich, aktive Stelle dicker, kleine Querstriche, 01 02 03 in Mono */
  .mo-leiste { display: block; position: absolute; left: 50%; width: min(420px, calc(100% - 2 * var(--rand))); margin-left: calc(min(420px, 100% - 2 * var(--rand)) / -2); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 3; --k: 0; }
  .menue[data-f="b"] .mo-leiste { --k: 1; }   /* 11.10.2026: Reihenfolge 01 = A, 02 = B, 03 = C */
  .mo-spur { position: relative; height: 9px; pointer-events: none; }
  .mo-spur::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: #D5CEC1; }
  .mo-spur .q { position: absolute; top: 1px; width: 1px; height: 7px; background: #A9A299; }
  .mo-spur .q:nth-of-type(1) { left: 25%; }   /* 19.10.2026: zwei Ansichten, Querstriche in der Mitte jeder Haelfte */
  .mo-spur .q:nth-of-type(2) { left: 75%; }
  .mo-dick { position: absolute; left: 0; top: 3px; height: 3px; width: calc(100% / 2); background: #3D3733; transform: translate3d(calc(var(--k) * 100%), 0, 0); transition: transform 560ms var(--me-aus); }
  .mo-zahlen { display: grid; grid-template-columns: repeat(2, 1fr); }
  .mo-zahlen button { font: inherit; font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; color: #A9A299; background: transparent; border: 0; border-radius: 0; min-height: 44px; padding: 0; cursor: pointer; transition: color 240ms ease, transform 120ms ease; }
  .mo-zahlen button[aria-current="true"] { color: #3D3733; }
  .mo-zahlen button:active { transform: scale(.94); }
  .mo-zahlen button:focus-visible { outline: 2px solid #3D3733; outline-offset: -4px; }
}

/* Desktop: B und C mit der Schrift des Menues (wie A), Zeilen 1,15 em */
@media (min-width: 1100px) {
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) { --wf: clamp(26px, min(4.4vw, 8vh), 64px); --lh: calc(var(--wf) * 1.15); --ih: 36px; max-width: 760px; }
  .mo-liste:is([data-f="b"],[data-f="c"]) .mo-u { font-size: 15px; letter-spacing: .16em; }
}

/* Tablet: B und C mit groesserer Schrift, Zeilen 64 */
@media (min-width: 761px) and (max-width: 1099px) {
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) { --wf: clamp(32px, 5.2vw, 48px); --lh: 64px; --ih: 44px; max-width: 640px; }
  .mo-liste:is([data-f="b"],[data-f="c"]) .mo-u { font-size: 14px; letter-spacing: .15em; }
}

/* Handy */
@media (max-width: 760px) {
  .menue .me-satz { place-items: start center; padding: 96px var(--rand) 110px; }
  .mo-liste { max-width: none; width: 100%; }
  .menue ol.mo-liste { --wf: clamp(24px, 7.4vw, 32px); --lh: 48px; }
  .menue ol.mo-liste[data-f="a"] .mo-z { grid-column: 1 / -1; grid-template-columns: subgrid; margin: 0; align-items: start; }
  .menue ol.mo-liste[data-f="a"] .mo-w { font-size: var(--wf); line-height: var(--lh); }
  .menue ol.mo-liste[data-f="a"] .mo-l > .mo-w, .menue ol.mo-liste[data-f="a"] .mo-r > .mo-w { padding: 0; }
  .menue ol.mo-liste[data-f="a"] .mo-u { margin: 0; padding: 0; border: 0; text-align: left; font-size: 13px; letter-spacing: .13em; }
  .menue ol.mo-liste[data-f="a"] .mo-u a { min-height: 48px; justify-content: flex-start; }
  /* obere Gruppe: Zimmer | Preise und Essen | Trinken um einen Strich, Wellness mittig */
  .menue ol.mo-liste[data-f="a"] .mo-z:not(.mo-hat):not(:has(> .mo-v)) { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .menue ol.mo-liste[data-f="a"] .mo-z:not(.mo-hat) > .mo-l { grid-column: 1; justify-self: end; align-items: flex-end; }
  .menue ol.mo-liste[data-f="a"] .mo-z:not(.mo-hat) > .mo-r { grid-column: 3; justify-self: start; }
  .menue ol.mo-liste[data-f="a"] .mo-z:not(.mo-hat) > .mo-l > .mo-w { padding-right: .3em; }
  .menue ol.mo-liste[data-f="a"] .mo-z:not(.mo-hat) > .mo-r > .mo-w { padding-left: .3em; }
  .menue ol.mo-liste[data-f="a"] .mo-z:not(.mo-hat) > .mo-s { display: block; grid-column: 2; }
  .menue ol.mo-liste[data-f="a"] .mo-z:not(.mo-hat) > .mo-v { display: flex; flex-direction: row; justify-content: center; align-items: center; }

  /* 03 A Fluegel am Handy: zwei Spalten, linksbuendig */
  .mo-liste[data-f="a"] { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .menue ol.mo-liste[data-f="a"] { column-gap: 16px; }
  .mo-liste[data-f="a"] .mo-hat > .mo-s { display: none; }
  .mo-liste[data-f="a"] .mo-hat > .mo-l { grid-column: 1; justify-self: stretch; align-items: flex-start; }
  .mo-liste[data-f="a"] .mo-hat > .mo-r { grid-column: 2; justify-self: stretch; align-items: flex-start; }
  .mo-liste[data-f="a"] .mo-hat > .mo-v { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; justify-self: stretch; align-items: start; }
  .mo-liste[data-f="a"] .mo-hat > .mo-v > .mo-w { grid-column: 1; }
  .mo-liste[data-f="a"] .mo-hat > .mo-v > .mo-u { grid-column: 2; grid-row: 1; }
  .mo-liste[data-f="a"] .mo-hat { margin-top: 24px; padding-top: 16px; border-top: 1px solid transparent; }
  .menue.offen .mo-liste[data-f="a"] .mo-hat { border-top-color: #D5CEC1; }
}

/* Beim Umschalten spielt die neue Ansicht den Eintritt noch einmal: kurz im Ausgangszustand, dann los */
.menue.offen .mo-liste.vor .mo-t { transform: translate3d(0,112%,0) rotate(4deg); }
.menue.offen .mo-liste.vor .mo-s { transform: scaleY(0); }
.menue.offen .mo-liste.vor .mo-nr { opacity: 0; }
.menue.offen .mo-liste.vor .mo-u li { opacity: 0; transform: translate3d(var(--dx,0),10px,0); filter: blur(6px); }
.menue.offen .mo-liste.vor .mo-hat, .menue.offen .mo-liste.vor .mo-u { border-color: transparent; }
.menue.offen .mo-liste.vor .mo-hat::after { transform: translateX(-.5px) scaleY(0); }
.menue.offen .mo-liste.vor, .menue.offen .mo-liste.vor *, .menue.offen .mo-liste.vor *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mo-t, .mo-s, .mo-u li { transform: none !important; filter: none !important; }
  .menue.offen .mo-t, .menue.offen .mo-s, .menue.offen .mo-u li, .menue.offen .mo-nr { transition: opacity 180ms ease !important; transition-delay: 0ms !important; }
  .mo-u::after { transform: none !important; transition: none !important; }
}

/* Der erste Punkt bekommt beim Oeffnen programmatisch den Fokus (fuer Tastatur und Vorlesegeraete). Den Rahmen zeigt erst die erste Taste. */
.menue.ohne-ring a:focus-visible { outline: none; }

/* Fusszeile im Menue: dieselbe Schrift wie die Unterpunkte (Mono, 12,5 px, Laufweite .18em,
   gleiche Farbe), am Handy wie die Leiste (11 px, .14em). Michael 11.10.2026: "Entweder passt du das
   Schriftbild an oder du entfernst die Schrift." Angepasst, nicht entfernt: Adresse, Mail und Telefon
   gehoeren ins Menue. */
.menue .me-fuss { font-size: 12.5px; letter-spacing: .18em; color: #6E6862; }
@media (max-width: 760px) { .menue .me-fuss { font-size: 11px; letter-spacing: .14em; } }

/* Adresse, Mail und Telefon sind aus dem Menue genommen (Michael 11.10.2026). Die Leiste 01 02 03 gilt auf allen Breiten. */
.menue .me-satz { overflow-y: auto; }

/* Michael 11.10.2026: "Entferne die Umrandungen aus dem ganzen Projekt" -- kein Fokusrahmen auf der ganzen Seite (Kasten um 01 im Menue). Liegt hier, weil menue.css auf jeder Seite haengt. */
:focus, :focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none !important; }

/* Ansicht 03 (A, Fluegel): ab 1100 px unveraendert. Tablet und Handy (bis 1099 px) zeigen in 03 die
   Anordnung von 01 (B), weil die Fluegel dort nicht mehr Platz haben. Michael 11.10.2026: "Menue drei bei
   Desktop so, solange genug Platz ist. Tablet und Mobil die Navigation von eins." Die Leiste bleibt auf 03. */
/* 11.10.2026, Michael: "Fluegel ab 761 px" -- die Grenze war 1099 px. */
@media (max-width: 760px) {
  .menue[data-f="a"] ol.mo-liste[data-f="a"] { display: none; }
  .menue[data-f="a"] ol.mo-liste[data-f="b"] { display: grid; }
}

/* 13.10.2026, Michael: "Zentriere den Menuepunkt ... soll immer in der Mitte vom Bildschirm sein ... nur kleine Varianten, etwas mehr Abstand".
   Der Satz sass oben unter dem Kopf (gemessen bei 620 x 905: Inhalt y 96 bis 638, Mitte 367 statt 452). Jetzt: Satz und Liste mittig in der
   Hoehe zwischen Kopf und Fuss und mittig in der Breite (die Achse liegt auf der Fenstermitte); zwischen den Zeilen etwas Luft.
   Zurueck: menue.css.vor-mitte-13102026 */
.menue .me-satz{align-content:center;justify-content:center;align-items:center;justify-items:center;
  padding-top:max(var(--me-oben,96px),11vh);padding-bottom:max(72px,10vh)}
.menue .me-satz > .mo-liste{align-self:center;margin-block:auto}
.menue ol.mo-liste .mo-z{margin-bottom:16px}
@media (max-width:760px){.menue ol.mo-liste .mo-z{margin-bottom:14px}}

/* 15.10.2026, Michael: Sommer und Winter sind keine Ziele (kein Zeiger), und beim Darueberfahren steigen die Unterpunkte noch einmal auf.
   Zurueck: .vor-sommerwinter-15102026 */
.mo-hat .mo-w { cursor: default; }

/* 15.10.2026, Michael: weiterer Besuch eines Fluegels = nur die senkrechte Linie faehrt langsam aus; Linie genau in der Mitte zwischen
   Fluegeltext und Hauptwort (links 3 px zu nah am Text gemessen, Tinte: Text 308, Linie 364, Wort 424). Zurueck: .vor-verzoegerung-15102026 */
@media (min-width: 1100px) {
  .menue ol.mo-liste[data-f="a"] .mo-l > .mo-u, .menue ol.mo-liste[data-f="a"] .mo-v > .mo-u { padding-right: calc(var(--ab) + .05 * var(--wort)); }
}

/* 16.10.2026, Michael: Hauptpunkte werden NICHT unterstrichen (nur die Untermenues). Statt dessen beim Darueberfahren eine ruhige Bewegung:
   das Wort gleitet 0,16 em in Leserichtung nach rechts und wird dunkel, die anderen Hauptpunkte treten leise zurueck (das gab es schon).
   Weiche Kurve, 700 ms, nur transform und Farbe. Zurueck: menue.css.vor-hauptmenue-16102026 */
.menue .mo-w:not(.mo-s) { transition: transform 700ms cubic-bezier(.16, 1, .3, 1), color 400ms ease; }
@media (hover: hover) and (pointer: fine) {
  /* Paar wie EIN Punkt (Michael 16.10.2026: "Zimmer | Preise, Essen | Trinken als ein Punkt, beide gleich animiert"): faehrt man ueber eines der Woerter,
     heben sich beide gleich um 0,1 em nach oben (Michael 16.10.2026: von unten nach oben). Zurueck: menue.css.vor-paar-16102026 */
  .menue .mo-z:has(.mo-w:hover) .mo-w:not(.mo-s), .menue .mo-z:has(a.mo-w:focus-visible) .mo-w:not(.mo-s) { transform: translate3d(.16em, 0, 0); }
  .menue .mo-z:has(.mo-w:hover) .mo-s { color: #3D3733; }
}
@media (prefers-reduced-motion: reduce) { .menue .mo-w, .menue .mo-w:hover { transition: color 200ms ease; transform: none; } }

/* 16.10.2026, Michael: Strich der Unterpunkte "etwas weiter runter, so nah am Wort". Vorher bottom -.5px (am Wort), jetzt 7 px darunter. */
.mo-u a > span::after { bottom: -7px; }

/* 16.10.2026, Michael: Untermenue-Abstand am Handy um ein Drittel kleiner (48 auf 32 px). Zurueck: menue.css.vor-alle-16102026 */
@media (max-width: 760px) {
  .menue ol.mo-liste[data-f="a"] .mo-u a, .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) .mo-u a { min-height: 32px; }
  .menue ol.mo-liste:is([data-f="b"],[data-f="c"]) { --ih: 32px; }
}

/* 17.10.2026, Michael: "das X beim Rolldown-Menue auf derselben Stelle wie der Hamburger, animiert beim Oeffnen und beim Schliessen".
   Es gibt jetzt nur EINEN Knopf: der Hamburger der Kopfleiste bleibt waehrend das Menue offen ist stehen (Kopfleiste ueber der Tafel, fest am
   Fenster), seine drei Striche werden zum X und beim Schliessen wieder zurueck. Das zweite X in der Tafel (.me-x) entfaellt.
   Zurueck: menue.css.vor-knopf-17102026 und menue.js.vor-knopf-17102026 */
.kopf { transition: background-color 380ms ease, border-color 380ms ease; }
.kopf > :not(.menueknopf) { transition: opacity 260ms ease; }
.menueknopf span { transition: transform 460ms var(--me-aus, cubic-bezier(.23,1,.32,1)), opacity 200ms ease; transform-origin: center; }
html.me-offen .kopf { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 70; background: transparent; border-bottom-color: transparent; }
html.me-offen .menueknopf span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
html.me-offen .menueknopf span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
html.me-offen .menueknopf span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menue .me-x { visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .menueknopf span { transition: opacity 120ms ease; } }

/* 17.10.2026, Michael: Schriftzug und DE / EN muessen bei offenem Menue GENAU auf der Stelle der Kopfleiste stehen. Statt die Tafel-Fassung
   nachzumessen, bleibt die echte Kopfleiste stehen (fest, ueber der Tafel); die Kopie in der Tafel (.me-marke, .me-sprache) ist unsichtbar.
   Zurueck: menue.css.vor-kopfgleich-17102026 */
.menue .me-marke, .menue .me-sprache { visibility: hidden; }
html.me-offen .kopf > .wortmarke, html.me-offen .kopf > .sprache { opacity: 1; }
/* 19.10.2026, gemessen am iPhone: die erste Menuezeile (Zimmer | Preise) lag unter der durchsichtigen Kopfleiste
   und bekam keinen Tipp (elementFromPoint = header.kopf). Bei offenem Menue laesst die Leiste Tipps durch,
   nur Knopf, Wortmarke und Sprachschalter bleiben tippbar. */
html.me-offen .kopf { pointer-events: none; }
html.me-offen .kopf > button, html.me-offen .kopf > .wortmarke, html.me-offen .kopf > .sprache { pointer-events: auto; }
/* dieselbe Messung: die Kopie der Kopfleiste IN der Tafel (.me-kopf) lag ebenfalls ueber der ersten Zeile */
.menue .me-kopf { pointer-events: none; }
.menue .me-kopf a, .menue .me-kopf button { pointer-events: auto; }

/* 17.10.2026: beim Oeffnen stumm, bis die Maus sich bewegt (siehe menue.js). Zurueck: menue.css.vor-still-17102026 */
.menue.still ol.mo-liste, .menue.still ol.mo-liste * { pointer-events: none !important; }
.menue.still .mo-w { transform: none !important; }


/* 17.10.2026, Michael: "Zitterpartie, viel smoother". Ursachen: (1) zwischen den Zeilen lagen 8 px margin, in denen weder
   Zeile noch Wort Hover hatte, das gerade dunkle Wort sprang beim Ueberfahren kurz zurueck und wieder vor; (2) 240 ms
   Farbwechsel waren fuer die Wanderung ueber sechs Zeilen zu knapp und endeten abrupt. Jetzt: lueckenlose Trefferflaeche
   (Abstand als padding), laengerer sanfter Farbwechsel. Zurueck: menue.css.vor-weich-17102026 */
.mo-z { margin-bottom: 0; padding-bottom: 8px; }
.mo-w { transition: color 420ms cubic-bezier(.4, 0, .2, 1); }
.mo-u a { transition: color 320ms cubic-bezier(.4, 0, .2, 1); }
.mo-nr { transition-timing-function: ease; }
@media (hover: hover) {
  .mo-liste:hover .mo-w { color: #A9A299; }
  .mo-z:hover .mo-w, a.mo-w:focus-visible { color: #3D3733; }
}
@media (prefers-reduced-motion: reduce) { .mo-w, .mo-u a { transition-duration: 1ms; } }

/* 19.10.2026, Michael: Oberkante der Liste (Anreise) in einer Linie mit der Oberkante des Titels (Info). Gemessen: Titel 591, Liste 580 -> 11 px. */
.menue ol.mo-liste .mo-v > .mo-u { margin-top: 11px; }

/* 19.10.2026: Nach einem Sprachwechsel steht das Menue beim Laden schon offen (menue.js).
   Ohne diese Regel klappt die Tafel beim Oeffnen der neuen Seite sichtbar auf. */
.menue.sofort, .menue.sofort * { transition: none !important; animation: none !important; }

/* Englisch und Niederlaendisch (Michael 21.10.2026: "Der Buchstabenabstand ist so gross, das sind die Woerter zu lang").
   Gemessen: Schrift und Sperrung sind in allen Sprachen gleich, nur die Woerter sind laenger (Families in summer 200 px
   gegen Familien Sommer). Darum fuer en und nl die Sperrung der Untertitel enger, damit die Breite der deutschen entspricht. */
html[lang="en"] .mo-u, html[lang="nl"] .mo-u,
html[lang="en"] .menue ol.mo-liste[data-f="a"] .mo-u, html[lang="nl"] .menue ol.mo-liste[data-f="a"] .mo-u { letter-spacing: .09em; }
html[lang="en"] .mo-w, html[lang="nl"] .mo-w { letter-spacing: .02em; }

/* Responsive-Durchgang 24.10.2026, gemessen im offenen Menue: bei 320 px lagen "Familien Sommer" und
   "Restaurants / Shops" links, "Familien Winter" rechts ausserhalb des Bildschirms (Text ab x -34 bzw. bis 335),
   bei 375 px noch "Restaurants / Shops" (ab x -7). Ursache: die Unterpunkte durften nicht umbrechen und waren
   breiter als ihre Spalte (minmax(0,1fr)). Jetzt bricht ein zu langer Punkt in seiner Spalte um, nur wenn noetig;
   Schrift, Abstand und Ausrichtung bleiben. Nachgemessen 320 bis 480 px, Chromium und WebKit: 0 Punkte ausserhalb.
   Zurueck: menue.css.vor-menuebruch-24102026 */
@media (max-width: 480px) {
  /* Unterpunkte duerfen in den Seitenrand ragen, bis 8 px vor den Bildschirmrand (Rand gemessen 28 px bei 320 und 375 px):
     so passen die deutschen Punkte bis 375 px in eine Zeile, erst darunter bricht ein langer Punkt um. */
  .mo-l, .mo-r { width: max-content; max-width: calc(100% + 20px); }
  .mo-u a { white-space: normal; hyphens: none; }
  .mo-u { letter-spacing: .06em; }   /* Michael 24.10.2026: Abstand kleiner, war .13em */
  .menue ol.mo-liste[data-f="b"] .mo-hat > .mo-l > .mo-u { padding-right: 12px; }   /* zum Trennstrich, war 22 px */
  .mo-l > .mo-u a { text-align: right; }
}

/* Michael 24.10.2026: "Wenn gross genug, Restaurants / Shops. Nur wenn es zu klein wird, Restaurant & Co."
   Gemessen: "Restaurants / Shops" braucht 170 px; in WebKit brach es bei 414 px noch um, ab 430 px nicht mehr. */
.mo-kurz { display: none; }
@media (max-width: 429px) {
  .mo-lang { display: none; }
  .mo-kurz { display: inline; }
}

/* === /zimmerkopf-kopfzeile.css === */
/* Zimmerkopf "Kopfzeile" -- Michael 01.10.2026 freigegeben (Variante 1 von
   vier Proben). Der Abschnitt tragt jetzt die Schrift des Kopfbereichs
   (.einleitung in kopf.css, Zeile 137-157): Cormorant 49/58.8, EIN
   Fließtext 18/27.36, linke und rechte Kante auf 200. Die Eckdaten
   stehen als Mono-Schiene UEBER dem Titel und sind ueber die volle
   Breite ausgemittelt.
   Zeilenabstand 27.36 statt der 29.7 aus kopf.css: body[data-ptf] .lauf
   (probe-tafel-milchglas.css) setzt 1.52 und gewinnt dort -- der
   Kopfbereich steht gemessen auf 27.36, und gleich heißt gleich. */

#zimmer .zk .zeile {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 400; font-size: 12px; line-height: 19.8px; letter-spacing: 1.2px;
  color: #666666; margin: 0;
}
#zimmer .zk h2 {
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz', Georgia, serif;
  font-weight: 300; letter-spacing: normal; color: var(--text); max-width: none; margin: 0;
  font-size: 49px; line-height: 58.8px;
}
#zimmer .zk .lauf {
  font-size: 18px; line-height: 27.36px !important; color: #716B67 !important;
  max-width: none; margin: 0; text-wrap: pretty;
}
#zimmer .zk .rand dt {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 19.8px !important; letter-spacing: 1.2px;
  text-transform: uppercase; color: #666666; margin: 0;
}
#zimmer .zk .rand dd {
  font-size: 18px; line-height: 27.36px !important; color: #716B67 !important; margin: 0;
}
#zimmer .zk .satz { display: block !important; grid-template-columns: none !important; position: static; }
#zimmer .zk .satz .qv-weg.weg-breit { grid-column: auto !important; display: flex; margin-top: 48px; }
#zimmer .zk .rand { position: static !important; width: auto !important; }
/* Linke und rechte Kante wie im Kopfbereich: Abschnitt hat 40, die Einleitung 200. */
#zimmer > .zk > * { padding-left: 160px !important; padding-right: 160px !important; }
@media (max-width: 1200px) {
  #zimmer > .zk > * { padding-left: 56px !important; padding-right: 56px !important; }
  #zimmer .zk h2 { font-size: 40px; line-height: 48px; }
}
@media (max-width: 809px) {
  #zimmer > .zk > * { padding-left: 0 !important; padding-right: 0 !important; }
  #zimmer .zk h2 { font-size: 31px; line-height: 37.2px; }
}

/* A: Die Eckdaten sind kein Nachsatz, sondern die Schiene UEBER dem Titel.
   Zwischen Titel und Text steht dann nichts mehr -- der Block hat nur noch
   drei Lagen statt vier und liest sich in einem Zug. */
#zimmer .zkA { gap: 0; }
#zimmer .zkA .schiene {
  display: flex; align-items: baseline; justify-content: flex-start;
  gap: 8px 64px; flex-wrap: wrap;
  padding: 0 0 20px !important; margin: 0 160px;
  border-bottom: 1px solid var(--linie);
}
@media (max-width: 1200px) { #zimmer .zkA .schiene { margin: 0 56px; } }
@media (max-width: 809px)  { #zimmer .zkA .schiene { margin: 0; } }
/* Michael 01.10.2026: "Ueber den ganzen Bereich verteilen. Mit dem ersten
   Buchstaben auf der linken Kante und dem letzten auf der rechten. Und
   ausmitteln." space-between setzt das erste Paar auf 203 und das letzte
   Zeichen auf 1238. Gleich gross werden dabei die LUECKEN, nicht die Paare
   -- die sind verschieden lang, und gleiche Luecken sind die Ausmittelung. */
#zimmer .zkA .rand.quer {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  flex: 1 1 100%; justify-content: space-between; gap: 8px 24px;
}
#zimmer .zkA .rand.quer > div { display: flex; align-items: baseline; gap: 10px; }
#zimmer .zkA .rand.quer dd { font-size: 15px; line-height: 19.8px !important; }
#zimmer .zkA .kopf1 { margin-top: 48px; }
#zimmer .zkA .satz { margin-top: 40px !important; }
@media (max-width: 809px) {
  #zimmer .zkA .schiene { flex-direction: column; gap: 20px; }
  #zimmer .zkA .rand.quer { flex-wrap: wrap; justify-content: flex-start; gap: 12px 32px; }
}

/* === /eintritt-home.css === */
/* Eintritt fuer die Startseite: E1 fuer Bilder, T2 fuer Schrift.
   Michael 24.09.2026: "Zeig mir E1 und T2 auf der Homepage."
   Diese Datei wird NUR von vorschau-eintritt.html geladen. index.html
   bleibt unberuehrt.

   E1 Klaerung  Unschaerfe 18 -> 0, Groesse 1,06 -> 1,00, 700 ms
   T2 Milchglas Unschaerfe 8 -> 0, Aufblende, 560 ms

   Alle Startwerte haengen an html.js. Faellt das Skript aus, greift keine
   einzige Regel und die Seite steht sofort vollstaendig da. */

html.js { --aus: cubic-bezier(.23,1,.32,1); }

/* ---------- Bilder ---------- */
html.js [data-ein="bild"] { overflow: hidden; }
/* Michael 24.09.2026: "Bei den Bildern einen Tick laenger."
   700 -> 900 ms, Aufblende 420 -> 520. Groesse und Unschaerfe bleiben,
   nur die Zeit waechst -- dann wirkt es ruhiger, nicht traeger. */
html.js [data-ein="bild"] > img,
html.js [data-ein="bild"] img {
  filter: blur(18px); transform: scale(1.06); opacity: .72;
  transition: filter 900ms var(--aus), transform 900ms var(--aus), opacity 520ms linear;
  will-change: filter, transform, opacity;
}
html.js [data-ein="bild"].da img { filter: blur(0); transform: scale(1); opacity: 1; }

/* ---------- Schrift ---------- */
/* Michael 24.09.2026: "Die Animationen vom Text sollen etwas besser zu
   sehen sein." Unschaerfe 8 -> 12 px, Dauer 560 -> 760 ms, dazu 8 px von
   unten. Damit sieht man, DASS etwas passiert, ohne dass Text fehlt. */
html.js [data-ein="text"] {
  opacity: 0; filter: blur(12px); transform: translate3d(0,8px,0);
  transition: opacity 520ms var(--aus), filter 760ms var(--aus), transform 760ms var(--aus);
  will-change: opacity, filter, transform;
}
html.js [data-ein="text"].da { opacity: 1; filter: blur(0); transform: none; }

/* Geschwister versetzt, 70 ms -- mehr wirkt traege */
html.js [data-ein="text"][data-v="1"] { transition-delay: 90ms; }
html.js [data-ein="text"][data-v="2"] { transition-delay: 180ms; }
html.js [data-ein="text"][data-v="3"] { transition-delay: 270ms; }

/* Nichts davon im Kopf, im Buchungsbalken, im Chat oder in der Tafel --
   dort waere Bewegung stoerend, nicht schoen. */
html.js .kopf [data-ein], html.js .klebeleiste [data-ein],
html.js .gc-fenster [data-ein], html.js .gbt-tafel [data-ein] {
  opacity: 1 !important; filter: none !important; transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-ein] , html.js [data-ein] img {
    opacity: 1 !important; filter: none !important; transform: none !important;
    transition: none !important;
  }
}

/* === /zeilen-auftritt.css === */
/* Auftritt der Ueberschriften auf allen Seiten (zeilen-auftritt.js, 19.10.2026; Unterseiten seit 19.10.2026 abends).
   Nach Emil Kowalski: eine Bewegung, die man sieht, weil sie im Blick passiert,
   nicht am Rand; nur transform und opacity; starkes ease-out, das sofort
   anfaengt und lange ausrollt. Ein Auftritt je Besuch, darum darf er laenger
   sein als die 300 ms fuer Bedienelemente.

   Ueberschrift  Woerter aus der Maske (leben.js), 1100 ms, 70 ms Versatz,
                 Start 110 % unter der Grundlinie mit 3 Grad Neigung
   Fliesstext    folgt 380 ms spaeter: 14 px von unten, Aufblende 900 ms,
                 Unschaerfe nur 4 px (vorher 12 px, das war Nebel, kein Auftritt)
   Ausloeser     Oberkante im oberen 70 % des Fensters, nicht am Rand

   Alles haengt an html.zl. Faellt das Skript aus, gilt leben.js wie bisher. */

/* Die Unschaerfe von eintritt-home.js lag ueber den steigenden Woertern */
html.js.zl [data-zl][data-ein] { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }

html.zl [data-zl] .lw-i {
  transform: translate3d(0, 110%, 0) rotate(3deg); transform-origin: 0 100%;
  transition: transform 1100ms cubic-bezier(.23, 1, .32, 1) calc(var(--i, 0) * 70ms) !important;
}
/* .lw-an setzt leben.js schon am Rand; erst .zl-da gibt die Woerter frei */
html.zl [data-zl].lw-an:not(.zl-da) .lw-i { transform: translate3d(0, 110%, 0) rotate(3deg) !important; }
html.zl [data-zl].zl-da .lw-i { transform: none !important; }

html.js.zl .zl-nach[data-ein] {
  opacity: 0 !important; filter: blur(4px) !important; transform: translate3d(0, 14px, 0) !important;
  transition: opacity 900ms cubic-bezier(.23, 1, .32, 1) 380ms, filter 900ms cubic-bezier(.23, 1, .32, 1) 380ms,
    transform 1100ms cubic-bezier(.23, 1, .32, 1) 380ms !important;
}
html.js.zl .zl-nach.zl-da[data-ein] { opacity: 1 !important; filter: none !important; transform: none !important; }
html.js.zl .zl-nach.zl-da[data-ein] + .zl-nach.zl-da[data-ein] { transition-delay: 520ms !important; }

@media (prefers-reduced-motion: reduce) {
  html.zl [data-zl] .lw-i, html.js.zl .zl-nach[data-ein] { transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; }
}

/* === /textseiten.css === */
/* Textseiten: NUR der Mittelteil zwischen Kopf und Fuss.
   Gebaut am 24.09.2026.

   Was hier ausdruecklich NICHT steht: Kopf, Menue, Fuss, Buchungsbalken,
   Satzspiegel, Seitenrand, Farben, Schriften. Das alles kommt aus lp-stil.css
   und kopf.css, damit jede Seite dieselbe Huelle traegt. Wer hier eine Breite
   setzt, bricht genau das.

   Vom Haus geerbt:  --breite 1435px, --rand 40px, --grund, --tinte, --grau,
                     --text, --linie  (lp-stil.css)

   Eigene Rechnung fuer den Mittelteil:
     Raster     12 / 8 / 4 Spalten, Gasse 24 / 20 / 16
     Skala      1,25 ab 16: 16 / 20 / 25 / 31 / 39 / 49
     Senkrecht  Grundtakt 8 px, Abschnitt 80 / 60 / 40 */

.textseite{
  --sp:12; --gasse:24px; --takt:8px; --luft:80px;
  --t0:16px; --t1:20px; --t2:25px; --t3:31px; --t4:39px; --t5:49px;
  padding:0 var(--rand) calc(var(--luft)*1.5);
}
@media (max-width:1199px){ .textseite{--sp:8; --gasse:20px; --luft:60px} }
@media (max-width:809px){  .textseite{--sp:4; --gasse:16px; --luft:40px} }

.ts-raster{display:grid;grid-template-columns:repeat(var(--sp),minmax(0,1fr));column-gap:var(--gasse)}
.textseite h1,.textseite h2,.textseite h3{
  font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;margin:0;
  letter-spacing:-.005em;text-wrap:balance;color:var(--tinte)}
.textseite p,.textseite ol,.textseite dl,.textseite dd{margin:0;padding:0}

/* Die beiden kleinen Stimmen: Etikett in Inter, Ziffer in DM Mono */
.ts-et{font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}
.ts-nr{font:500 11px/1.45 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;
  color:var(--grau);font-variant-numeric:lining-nums tabular-nums}
.ts-kicker{font:500 11px/1.45 "DM Mono",ui-monospace,monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grau)}

/* ---------- Titelfeld, drei Fassungen (Klasse k1/k2/k3 am <html>) ---------- */
/* Abstaende am Seitenanfang, gemessen gegen die Startseite (Kopf endet bei 110 px):
   64 px Luft bis zur Haarlinie, 24 px bis zur Ueberschrift, 80 px bis zum Inhalt.
   Alles Vielfache von 8. Vorher waren es 40, das stand zu dicht unter dem Kopf. */
/* Michael 24.09.2026: "Entferne den dicken Strich oben." Die Haarlinie unter der
   Kopfleiste reicht; eine zweite darunter war ein Strich zuviel. Der Abstand bleibt. */
.ts-titel{margin-top:calc(var(--takt)*11);
  padding-bottom:var(--luft);row-gap:calc(var(--takt)*2)}
.ts-stand{color:var(--text);font-size:var(--t0);line-height:1.6}

/* K1 Grundlinie: Kicker in der ersten Spalte, Titel ab Spalte 3 */
.k1 .ts-kicker{grid-column:1/3;grid-row:1}
.k1 .ts-titel h1{grid-column:3/11;grid-row:1/3;font-size:clamp(31px,4.6vw,var(--t5));
  line-height:1.04;max-width:21ch}
.k1 .ts-stand{grid-column:3/11;grid-row:3;max-width:52ch}

/* K2 Tafel: Titel ueber alle zwoelf Spalten */
.k2 .ts-kicker{grid-column:1/13;grid-row:1}
.k2 .ts-titel h1{grid-column:1/13;grid-row:2;font-size:clamp(39px,7.6vw,110px);
  line-height:.94;letter-spacing:-.015em}
.k2 .ts-stand{grid-column:1/7;grid-row:3;margin-top:calc(var(--takt)*4);max-width:46ch}

/* K3 Register links: Titel rechts, das Verzeichnis traegt die linke Spalte */
.k3 .ts-kicker{grid-column:5/13;grid-row:1}
.k3 .ts-titel h1{grid-column:5/13;grid-row:2;font-size:clamp(31px,4.2vw,var(--t4));
  line-height:1.1;max-width:20ch}
.k3 .ts-stand{grid-column:5/11;grid-row:3;max-width:48ch}

/* ---------- Inhaltsverzeichnis ---------- */
.ts-inhalt{margin-bottom:var(--luft);row-gap:calc(var(--takt)*1.5)}
.ts-inhalt .ts-et{grid-column:1/3}
.ts-inhalt ol{grid-column:6/13;list-style:none;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gasse);row-gap:calc(var(--takt)*1.5)}
.ts-inhalt li{display:grid;grid-template-columns:calc(var(--takt)*6) 1fr;
  column-gap:calc(var(--takt)*2);align-items:baseline;
  border-top:1px solid var(--linie);padding-top:calc(var(--takt)*1.25)}
.ts-inhalt a{text-decoration:none;font-size:var(--t0);line-height:1.5;color:var(--tinte)}
/* 20.10.2026, Michael: statt Unterstreichen Variante A. Das Wort rueckt 8 px ein, die Nummer wird dunkel,
   am Zeilenende erscheint ein Mono-Pfeil (wie im Journal-Einstieg). Zurueck: textseiten.css.vor-inhalt-a-20102026 */
.ts-inhalt a{display:flex;justify-content:space-between;align-items:baseline;justify-self:stretch;
  transition:padding-left 500ms cubic-bezier(.23,1,.32,1)}
.ts-inhalt a::after{content:"\2192";font:400 13px/1 "DM Mono",ui-monospace,monospace;color:var(--tinte);
  opacity:0;transform:translateX(-8px);transition:opacity 400ms ease,transform 500ms cubic-bezier(.23,1,.32,1)}
.ts-inhalt .ts-nr{transition:color 400ms ease}
@media (hover:hover) and (pointer:fine){
  .ts-inhalt li:hover a{padding-left:8px}
  .ts-inhalt li:hover a::after{opacity:1;transform:none}
  .ts-inhalt li:hover .ts-nr{color:var(--tinte)}}
.ts-inhalt a:focus-visible{padding-left:8px}
.ts-inhalt a:focus-visible::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ts-inhalt a,.ts-inhalt a::after,.ts-inhalt .ts-nr{transition:none}}
/* In K3 klebt das Verzeichnis links mit, der Text laeuft rechts */
.k3 .ts-rumpf{align-items:start}
.k3 .ts-inhalt ol{grid-column:1/13}
.k3 .ts-inhalt{grid-column:1/4;position:sticky;top:96px;margin-bottom:0;display:block}
.k3 .ts-inhalt ol{display:block}
.k3 .ts-koerper{grid-column:5/13}

/* ---------- Abschnitt: Ziffer, Titel, Text auf einer Grundlinie ---------- */
.ts-abschnitt{border-top:1px solid var(--linie);padding:calc(var(--takt)*3.5) 0 var(--luft);
  row-gap:calc(var(--takt)*1.25)}
.ts-abschnitt .ts-nr{grid-column:1/2}
.ts-abschnitt h2{grid-column:2/6;font-size:var(--t2);line-height:1.2;padding-right:var(--gasse)}
.ts-text{grid-column:6/12;display:flex;flex-direction:column;gap:calc(var(--takt)*1.75);max-width:62ch}
.ts-text p{font-size:17px;line-height:1.66;color:var(--text);text-wrap:pretty}
.ts-text a{color:var(--tinte);text-underline-offset:3px;padding:3px 0}
.k2 .ts-abschnitt .ts-nr{grid-row:1;margin-bottom:calc(var(--takt)*1.5)}
.k2 .ts-abschnitt h2{grid-column:1/5;grid-row:2;font-size:var(--t3)}
.k2 .ts-abschnitt .ts-text{grid-column:6/12;grid-row:2}
.k3 .ts-abschnitt{grid-template-columns:repeat(8,minmax(0,1fr))}
.k3 .ts-abschnitt h2{grid-column:2/9;padding-right:0;margin-bottom:calc(var(--takt)*1.5)}
.k3 .ts-abschnitt .ts-text{grid-column:2/9}

/* Zahlenwerk und Datenpaare */
.ts-staffel{display:flex;flex-direction:column;margin:calc(var(--takt)*.5) 0}
.ts-staffel div{display:flex;justify-content:space-between;align-items:baseline;
  gap:calc(var(--takt)*2.5);border-top:1px solid var(--linie);padding:calc(var(--takt)*1.25) 0}
.ts-staffel div:last-child{border-bottom:1px solid var(--linie)}
.ts-staffel span:first-child{flex:1 1 auto;min-width:0;font-size:var(--t0);color:var(--text)}
.ts-staffel .wert{flex:0 0 auto;white-space:nowrap;font:500 13px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:.06em;color:var(--tinte);font-variant-numeric:lining-nums tabular-nums}
.ts-daten{display:grid;grid-template-columns:minmax(150px,auto) 1fr;column-gap:var(--gasse)}
.ts-daten dt{font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);border-top:1px solid var(--linie);
  padding:calc(var(--takt)*1.5) 0}
.ts-daten dd{font-size:var(--t0);line-height:1.5;color:var(--text);
  border-top:1px solid var(--linie);padding:calc(var(--takt)*1.5) 0;
  font-variant-numeric:lining-nums tabular-nums}

/* ---------- FAQ ---------- */
.ts-gruppe{border-top:1px solid var(--tinte);padding:calc(var(--takt)*3.5) 0 var(--luft);
  row-gap:calc(var(--takt)*3)}
.ts-gruppe .ts-nr{grid-column:1/2}
.ts-gruppe h2{grid-column:2/6;font-size:var(--t3);line-height:1.15;padding-right:var(--gasse)}
.ts-fragen{grid-column:6/13;display:flex;flex-direction:column}
.ts-frage{display:grid;grid-template-columns:calc(var(--takt)*9) 1fr;column-gap:var(--gasse);
  border-top:1px solid var(--linie);padding:calc(var(--takt)*2.5) 0}
.ts-frage:first-child{border-top:0;padding-top:0}
.ts-frage .ts-nr{padding-top:calc(var(--takt)*.75)}
.ts-frage h3{grid-column:2/3;font-size:var(--t1);line-height:1.25}
.ts-frage .ts-text{grid-column:2/3;margin-top:calc(var(--takt)*1.25);max-width:58ch}
.k2 .ts-gruppe h2{grid-column:1/6;font-size:var(--t4)}
.k3 .ts-gruppe{grid-template-columns:repeat(8,minmax(0,1fr))}
.k3 .ts-gruppe h2{grid-column:1/9;padding-right:0}
.k3 .ts-fragen{grid-column:1/9}

/* ---------- Schlussblock ---------- */
.ts-schluss{border-top:1px solid var(--tinte);padding-top:calc(var(--takt)*3.5);
  row-gap:calc(var(--takt)*3)}
/* Eine Zeile, drei Felder, Oberkanten buendig. grid-row wird ausdruecklich
   gesetzt, damit keine Fassungsregel den Satz in eine zweite Zeile schiebt. */
.ts-schluss h2{grid-column:1/5;grid-row:1;font-size:var(--t3);line-height:1.15}
.ts-schluss .ts-text{grid-column:6/10;grid-row:1;max-width:none}
.ts-knopf{grid-column:10/13;grid-row:1;align-self:start;display:flex;align-items:center;
  justify-content:space-between;gap:var(--gasse);height:56px;padding:0 calc(var(--takt)*2.75);
  border:1px solid var(--tinte);border-radius:0;text-decoration:none;
  font:400 11px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .2s ease,color .2s ease}
/* Der Pfeil waechst von 28 auf 44 px, gerechnet ueber transform statt Breite:
   eine Breitenanimation loest Layout und Paint aus. 28/44 = .636 ist der Ruhezustand. */
.ts-pf{position:relative;display:inline-block;flex:0 0 auto;width:44px;height:1px}
.ts-pf::before{content:"";position:absolute;inset:0;background:currentColor;
  transform:scaleX(.636);transform-origin:left center;transition:transform .25s cubic-bezier(.23,1,.32,1)}
.ts-pf::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateX(-16px) rotate(45deg);transition:transform .25s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .ts-knopf:hover{background:var(--tinte);color:var(--grund)}
  .ts-knopf:hover .ts-pf::before{transform:scaleX(1)}
  .ts-knopf:hover .ts-pf::after{transform:translateX(0) rotate(45deg)}
}

/* ---------- Tablet: 8 Spalten ----------
   Auch hier nur ZWEI senkrechte Linien: Spalte 1 traegt Etiketten, Ziffern und
   Ueberschriften, Spalte 4 den Text. Die Regeln muessen dieselbe Staerke haben
   wie die Fassungsregeln oben (.k2 .ts-abschnitt .ts-text), sonst gewinnen die
   Desktop-Spalten und der Satz rutscht eine Spalte nach rechts. */
@media (min-width:810px) and (max-width:1199px){
  .k1 .ts-titel h1,.k1 .ts-stand{grid-column:3/9}
  .k2 .ts-kicker,.k2 .ts-titel h1{grid-column:1/9}
  .k2 .ts-stand{grid-column:1/6}
  .k3 .ts-kicker,.k3 .ts-titel h1,.k3 .ts-stand{grid-column:3/9}
  .ts-inhalt ol,.k3 .ts-inhalt ol{grid-column:4/9;grid-template-columns:minmax(0,1fr)}
  .k3 .ts-inhalt{grid-column:1/3}
  .k3 .ts-koerper{grid-column:3/9}
  .ts-abschnitt h2,.k2 .ts-abschnitt h2,.k3 .ts-abschnitt h2{grid-column:1/4;font-size:var(--t2)}
  .ts-text,.k2 .ts-abschnitt .ts-text,.k3 .ts-abschnitt .ts-text{grid-column:4/9}
  .ts-gruppe h2,.k2 .ts-gruppe h2,.k3 .ts-gruppe h2{grid-column:1/4;font-size:var(--t3)}
  .ts-fragen,.k3 .ts-fragen{grid-column:4/9}
  .ts-schluss h2{grid-column:1/4;grid-row:1}
  .ts-schluss .ts-text{grid-column:4/9;grid-row:1}
  .ts-knopf{grid-column:4/9;grid-row:2;justify-self:stretch;margin-top:calc(var(--takt)*2)}
}

/* ---------- Mobil: alles untereinander, in DOM-Reihenfolge ----------
   Das !important ist noetig: die Fassungsregeln (.k1 .ts-stand{grid-row:3})
   wiegen sonst schwerer und stellen die Zeilen durcheinander. */
@media (max-width:809px){
  .textseite{padding-bottom:var(--luft)}
  .ts-titel>*,.ts-inhalt>*,.ts-abschnitt>*,.ts-gruppe>*,.ts-schluss>*{
    grid-column:1/5!important;grid-row:auto!important}
  .ts-titel h1,.k1 .ts-titel h1,.k2 .ts-titel h1,.k3 .ts-titel h1{
    font-size:clamp(28px,8.4vw,var(--t3));line-height:1.08;max-width:none}
  .ts-titel{padding-bottom:calc(var(--takt)*5)}
  .ts-kicker{margin-bottom:calc(var(--takt)*1.5)}
  .ts-stand{margin-top:calc(var(--takt)*2)}
  .ts-inhalt,.k3 .ts-inhalt{position:static;display:grid;margin-bottom:calc(var(--takt)*5)}
  .ts-inhalt ol,.k3 .ts-inhalt ol{display:grid;grid-template-columns:minmax(0,1fr)}
  .ts-abschnitt,.k3 .ts-abschnitt,.ts-gruppe,.k3 .ts-gruppe{
    padding:calc(var(--takt)*2.5) 0 calc(var(--takt)*5)}
  .ts-abschnitt h2,.k2 .ts-abschnitt h2,.k3 .ts-abschnitt h2,
  .ts-gruppe h2,.k2 .ts-gruppe h2{font-size:var(--t2);padding-right:0}
  .ts-text{max-width:none}
  .ts-frage{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--takt))}
  .ts-frage .ts-nr,.ts-frage h3,.ts-frage .ts-text{grid-column:1/2;padding-top:0}
  .ts-daten{grid-template-columns:minmax(0,1fr)}
  .ts-daten dt{padding-bottom:0}
  .ts-daten dd{border-top:0;padding-top:calc(var(--takt)*.5)}
  .ts-knopf{width:100%}
}

/* Das Buchungsformular reist unsichtbar mit, damit der Verfuegbarkeits-Balken
   auf jeder Seite arbeitet. Siehe textseiten/bauen.py, Funktion buchform(). */
.ts-buchform{display:none}

/* Fassungsschalter, nur in der Vorschau */
.ts-schalter{position:fixed;left:0;top:50%;z-index:60;display:flex;flex-direction:column;
  background:#35302B}
.ts-schalter a{font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;
  color:#F6F2EA;text-decoration:none;padding:12px 14px}
.ts-schalter a[aria-current]{background:#F1ECE3;color:#35302B}

@media (prefers-reduced-motion:reduce){
  .textseite *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Bausteine der Themenseiten ----------
   Beide sitzen INNERHALB der Textspalte (Linie 2) und erfinden keine neue Kante. */

/* Kennzahlen als Band: Etikett oben, Wert darunter, eine Haarlinie darueber. */
.ts-fakten{display:flex;flex-wrap:wrap;gap:calc(var(--takt)*4);
  border-top:1px solid var(--linie);padding-top:calc(var(--takt)*2)}
.ts-fakten div{display:flex;flex-direction:column;gap:calc(var(--takt)*.75)}
.ts-fakten dt{font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}
.ts-fakten dd{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;
  font-size:var(--t1);line-height:1.2;color:var(--tinte)}

/* Gleichrangige Punkte: zwei Spalten, Haarlinie ueber jedem Eintrag. */
.ts-gitter{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gasse);row-gap:calc(var(--takt)*3)}
.ts-gitter li{display:flex;flex-direction:column;gap:calc(var(--takt)*.75);
  border-top:1px solid var(--linie);padding-top:calc(var(--takt)*1.5)}
.ts-gitter h3{font-size:var(--t1);line-height:1.25}
.ts-gitter p{font-size:var(--t0);line-height:1.6;color:var(--text)}
@media (max-width:809px){
  .ts-fakten{gap:calc(var(--takt)*3)}
  .ts-gitter{grid-template-columns:minmax(0,1fr)}
}
/* 20.10.2026, Michael (FAQ): "Klebe vorne die Kategorie an, so wie bei Gut zu wissen." Dieselbe Regel wie dort
   (gut-zu-wissen-faqstil.py): Nummer und Kategorie bleiben unter der Kopfleiste stehen, bis ihre Gruppe endet. */
@media (min-width:810px){
  .ts-gruppe>.ts-nr,.ts-gruppe>h2{position:sticky;align-self:start}
  .ts-gruppe>.ts-nr{top:128px}
  .ts-gruppe>h2{top:176px}
}

/* === /schriften/plexmono.css === */
/* IBM Plex Mono, selbst gehostet (23.09.2026). Nur fuer die Entwuerfe Zimmer und Preise. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:300;font-display:swap;src:url(/schriften/IBMPlexMono-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:300;font-display:swap;src:url(/schriften/IBMPlexMono-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/IBMPlexMono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/IBMPlexMono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* === /zimmer-preise/direktvorteil.css === */
/* Kasten 'Warum direkt buchen' unter dem Schlusssatz der Seite Zimmer und Preise.
   Eigene Datei, weil zpm.css aus einem Werkzeug erzeugt wird und eine Regel dort
   beim naechsten Lauf verschwaende.
   GEMESSEN 07.10.2026: der Text erbte zuerst die Schlagzeilengroesse (40,8 px) von
   `.mo-schluss p`, und zx-mosaik.css laedt NACH dieser Datei. Darum `.zx.zx-mosaik .mo-schluss p.direkt` (hoehere Spezifitaet), und nicht `.schluss`,
   denn die echte Seite traegt `mo-schluss`. */
.zx.zx-mosaik .mo-schluss p.direkt{max-width:62ch;margin:clamp(20px,2.4vw,36px) 0 0;
  font-family:inherit;font-size:clamp(15px,1.2vw,18px);line-height:1.6;letter-spacing:0}

/* === /querverweise.css === */
/* ═══ Verweise auf andere Seiten ══════════════════════════════════════════
   Fassung A, von Michael am 29.09.2026 aus drei Vorschlägen gewählt.

   ZWEI ENTSCHEIDUNGEN STECKEN DARIN:

   1. DER TAKT. Gemessen waren die Abstände im Abschnitt 14 · 46 · 56 · 24 ·
      64 · 24 px -- sechs Werte ohne Verwandtschaft ("zu viele Abstände, zu
      uneinheitlich"). Jetzt gilt eine Reihe, jeder Wert das Doppelte des
      vorigen:

          12   Kleinzeile → Titel
          24   Titel → Untertitel   und   Fließtext → Verweis
          48   Untertitel → Fließtext
          96   Verweis → Bild

      Damit ist der Abstand zum Bild viermal so groß wie der zum Text: der
      Textblock liest sich als eine Einheit, das Bild beginnt sichtbar etwas
      Neues. Michael: "Das größte Problem ist das Verhältnis zum Block vom
      Bild zum Fließtext."

   2. DIE SCHRIFT. Der Verweis spricht die Sprache der Etiketten in der
      Randspalte (CHECK-IN, START, CARD): DM Mono 11 px, Versalien, 0,14 em.
      Er kommt damit nicht von außen dazu, sondern gehört zur Seite.

   NICHT ANGERÜHRT: Zeilenabstand im Fließtext, Spaltenbreiten 4 : 4 : 3,
   Randspalte rechts.                                                      */

/* ── Der Takt des Abschnitts ─────────────────────────────────────────── */
/* ═══ DIE REIHE DER ABSTAENDE ════════════════════════════════════════════
   Michael am 29.09.2026: "Mach es richtig in den Abstaenden, mathematische
   Anordnung, Swiss Grid."

   Grundmass 8 px, die Schritte folgen Fibonacci: 2 · 3 · 5 · 8 · 13 · 21
   -> 16 · 24 · 40 · 64 · 104 · 168. Jeder Schritt ist die Summe der beiden
   vorigen; die Abstaende wachsen damit in dem Verhaeltnis, in dem auch die
   Bindung abnimmt:

        16   Kleinzeile  -> Titel          (gehoeren zusammen)
        24   Titel       -> Leitsatz
        40   Leitsatz    -> Fliesstext
        64   Fliesstext  -> Verweis
       104   Verweis     -> Bild           (hier beginnt etwas Neues)
       168   Anfang des Abschnitts
                                                                             */
/* 29.09.2026, zweimal "zu viel Abstand": der Abschnittsanfang geht von 168 auf
   104 px -- den naechsten Schritt der Reihe nach unten. Alle anderen Werte
   bleiben, die Reihe stimmt weiter: 16 · 24 · 40 · 64 · 104. */
.abschnitt { gap: 40px; padding-top: 104px; }

/* 30.09.2026, Michael: "zu viel Abstand" auf der Startseite, zwischen der
   Bildreihe und "NEUNZEHN ZIMMER".
   Gemessen bei 1440 px: 208 px statt 104. Ursache: #zimmer ist ein .abschnitt
   UND enthaelt .abschnitt.zimmerkopf2 -- zwei Mal 104 px Anfangsabstand
   uebereinander. Nur diese eine Stelle ist verschachtelt (1 von 10 Abschnitten).
   Der innere Abschnitt beginnt nicht neu, er gehoert zum aeusseren. */
.abschnitt .abschnitt { padding-top: 0; }

/* KOPF, Fassung H2 "Ruhe" -- Michael am 29.09.2026 aus drei Vorschlaegen
   gewaehlt, nachdem L3 zu gross war.

   DER GEDANKE: ein Schritt weniger. Der Leitsatz bekommt die GROESSE des
   Fliesstextes, aber die dunkle FARBE des Titels. Damit traegt der Titel
   allein, und darunter liegt eine Flaeche aus einer Groesse statt drei
   Groessen kurz hintereinander.

   VORHER GEMESSEN: 34 -> 19 -> 17 px, also ein Sprung von 1,79 und dann fast
   keiner. Und der Leitsatz war mit #6C645C HELLER als der Fliesstext darunter
   -- die Farbe lief der Ordnung entgegen.

   Laufweite gehoert zur Groesse (apple-design): grosser Titel enger
   (-0,008 em), kleine Versalzeile weiter (0,24 em).                          */
.abschnitt .kopf1 { gap: 28px; }
.abschnitt .kopf1 .mikro {
  font-size: 11px; letter-spacing: .24em; color: #A09789;
}
.abschnitt .kopf1 .mikro + h2 {
  margin-top: -14px;                       /* 28 - 14 = 14 px unter der Kleinzeile */
  font-size: 31px; line-height: 1.2; letter-spacing: -.008em; color: #3D3733;
}
.abschnitt .leitsatz {
  margin-top: 0;
  font-size: 17px; line-height: 1.66; color: #3D3733; max-width: 520px;
}
.abschnitt .satz > .lauf { color: #57534B; }
.abschnitt .rand { gap: 28px; }
.abschnitt .rand dt { font-size: 11px; letter-spacing: .2em; }

/* Am Handy zurueck auf Lesegroesse -- 42 px brechen dort die Titelzeile. */
@media (max-width: 809px) {
  .abschnitt { padding-top: 96px; }
  .abschnitt .kopf1 { gap: 28px; }
  .abschnitt .kopf1 .mikro + h2 { font-size: 27px; margin-top: -14px; letter-spacing: -.006em; }
  .abschnitt .leitsatz { font-size: 16px; line-height: 1.6; }
}
.abschnitt > .bildreihe + .bildreihe,
.abschnitt > .bildreihe + .drittelreihe,
.abschnitt > .drittelreihe + .bildreihe { margin-top: -24px; }
/* Die Zimmerkarte bringt 40 px eigenen Abstand mit (zimmerkopf2.css Zeile 14).
   Zusammen mit dem 48er-Stapel waren das 88 px, wo ueberall sonst 48 stehen --
   gemessen am 29.09.2026 auf der Startseite. */
.abschnitt.zimmerkopf2 .satz { margin-top: 0; }

/* ── Wie ein Weg aussieht ────────────────────────────────────────────────
   Zwei Worte, dazwischen ein Strich, der den Rest der Spalte nimmt. Schrift
   wie die Etiketten der Randspalte (DM Mono 12 px, Versalien, 0,14 em).
   Kontrast 6,28:1 (vorher 3,17:1, unter dem AA-Mindestwert von 4,5).        */
.qv-weg {
  text-decoration: none; color: #6B645C;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 400;
  transition: color .2s cubic-bezier(.23, 1, .32, 1),
              opacity .12s cubic-bezier(.23, 1, .32, 1);
}
.qv-teil { white-space: nowrap; }
.qv-strich {
  flex: 1; height: 1px; background: rgba(61, 55, 51, .3);
  transition: background-color .2s cubic-bezier(.23, 1, .32, 1),
              transform .2s cubic-bezier(.23, 1, .32, 1);
  transform-origin: center;
}

/* ── Fassung D: DIE ZEILE RUECKT AUF ─────────────────────────────────────
   Michael am 01.10.2026 aus vier Vorschlaegen gewaehlt (probe-verweis-hover.html).

   Der Verweis antwortet nicht mit einer neuen Farbe, sondern mit Bewegung:
   das rechte Wort geht 6 px nach rechts, das linke 2 px nach links, der
   Strich wird doppelt so schwer (scaleY 2 auf 1 px = 2 px). Die Zeile
   "oeffnet" sich damit in die Richtung, in die der Verweis fuehrt. Auf einer
   sehr stillen Seite ist das ruhiger als ein Farbsprung -- die Farbe wandert
   trotzdem mit nach #3D3733, damit auch ohne Bewegung erkennbar bleibt, was
   unter dem Zeiger liegt.

   WERTE UND WARUM (Emil Kowalski):
   - nur transform/opacity/background-color, kein Layout, keine Umbrueche
   - 200 ms beim Zeigen, 120 ms beim Druck: langsam, wo der Mensch entscheidet,
     schnell, wo das System antwortet
   - starkes ease-out cubic-bezier(.23,1,.32,1) statt der schwachen CSS-Kurven
   - Bewegung nur hinter (hover: hover) and (pointer: fine); am Finger loest
     Hover sonst beim Tippen aus

   DRUCK: alle Verschiebungen federn in 120 ms auf null zurueck. Dazu
   opacity .78 -- der Teil, der auch am Finger ankommt, wo es kein Hover gibt
   und das Zuruecksetzen auf null folglich nichts zeigen wuerde.

   GEMESSEN (01.10.2026, 1440 px, Startseite): Kontrast in Ruhe 6,20:1, beim
   Zeigen 10,02:1 (AA ab 4,5), Trefferflaeche 44 px.                          */
/* GEMESSEN 01.10.2026 und hier festgehalten, weil es eine Entscheidung ist:
   das rechte Wort des letzten Verweises steht BUENDIG auf der rechten Kante
   des Satzspiegels (1397 zu 1398 px bei 1440, 1637 zu 1638 bei 1920). Beim
   Zeigen tritt es also 6 px in den Seitenrand hinaus -- abgeschnitten wird
   nichts (40 px Rand bleiben, scrollWidth unveraendert 1440), aber die Kante
   ist in diesem Moment nicht mehr buendig. Das ist der Preis der Fassung D.
   Ein Wort aendert es: --weg-schub auf 3px (haelfte), 0px (nur Strich und
   Farbe) oder -6px (die Zeile oeffnet nach innen statt nach aussen). */
:root { --weg-schub: 6px; }
.qv-teil { transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .qv-weg:hover { color: #3D3733; }
  .qv-weg:hover .qv-strich { background: #3D3733; transform: scaleY(2); }
  .qv-weg:hover .qv-teil:first-child { transform: translateX(-2px); }
  .qv-weg:hover .qv-teil:last-child  { transform: translateX(var(--weg-schub)); }
}
.qv-weg:active { opacity: .78; }
.qv-weg:active .qv-teil { transform: translateX(0); transition-duration: .12s; }
.qv-weg:active .qv-strich { transform: scaleY(1); transition-duration: .12s; }

/* Reduzierte Bewegung: der Farbwechsel bleibt, die Verschiebung faellt weg.
   "Weniger und sanfter", nicht "gar nichts" -- sonst ist nicht mehr zu sehen,
   worauf der Zeiger steht. */
@media (prefers-reduced-motion: reduce) {
  .qv-weg, .qv-strich, .qv-teil { transition: color .12s linear, background-color .12s linear; }
  .qv-weg:hover .qv-strich { transform: none; }
  .qv-weg:hover .qv-teil:first-child,
  .qv-weg:hover .qv-teil:last-child { transform: none; }
}
@media (max-width: 809px) { .qv-strich { min-width: 32px; } }

/* ── Der Weg im Satzblock ────────────────────────────────────────────────
   Michael am 29.09.2026, nach sechs Vorschauen: der Weg steht auf DERSELBEN
   ZEILE wie die letzte Angabe der Randspalte. Ein Verweis nimmt beide
   Textspalten, zwei teilen sie sich -- beide auf dieser einen Zeile.

   Damit das gilt, ist der Weg ein Kind des Satzblocks: er kennt dessen Spalten
   und dessen Hoehe. Die Randspalte spannt ueber beide Reihen und verteilt ihre
   Eintraege gleichmaessig (vorher 28/28/83 -- ein Loch vor dem letzten).       */
.abschnitt > .satz:has(> .qv-weg) { row-gap: 0; }
/* NUR auf der Startseite. Vorher stand hier ".satz > .rand" ohne Einschraenkung
   -- und die Unterseiten benutzen denselben Klassennamen. Dort wanderte die
   Randspalte dadurch in die ERSTE Spalte und schob den Fliesstext nach rechts:
   auf /essen-trinken/ sassen Kleinzeile und Leitsatz bei 160 px, der Text aber
   bei 580 und 1001 (gemessen 29.09.2026, von Michael gemeldet). */
.abschnitt > .satz > .rand { grid-row: 1 / span 2; align-self: stretch;
                             justify-content: space-between; }
.abschnitt > .satz > .qv-weg {
  grid-row: 2; align-self: end;
  display: flex; align-items: flex-end; gap: 24px;
  /* 10 + 14 = 24 px unter dem Text; die Trefferflaeche waechst nach oben,
     damit der Text auf der Unterkante der Reihe sitzt und nicht 13 px darueber. */
  /* 29.09.2026: der Abstand UEBER dem Weg war 39 px, unter ihm 96. Jetzt
     64 px oben -- die Zeile haengt am Text, steht aber nicht mehr an ihm. */
  /* 29.09.2026: 64 px waren "zu weit". Jetzt 40 px -- der Schritt der Reihe
     darunter. Der Verweis haengt damit klarer am Text. */
  margin-top: 11px; padding-top: 14px; min-height: 44px;   /* 40 px sichtbar */
}
.abschnitt > .satz > .qv-weg .qv-strich { margin-bottom: 6px; }
.abschnitt > .satz > .qv-weg.weg-breit { grid-column: 1 / 3; }
.abschnitt > .satz > .qv-weg.weg-s1 { grid-column: 1; }
.abschnitt > .satz > .qv-weg.weg-s2 { grid-column: 2; }

/* ── Der Weg ohne Satzblock (Galerie, Fragen) ───────────────────────────── */
/* Ohne Randspalte (Fragen, Galerie) teilen sich die Verweise die VOLLE
   Breite: zwei Verweise zwei gleiche Haelften, einer die ganze Breite.
   Michael am 29.09.2026 mit dem Bild der Fragenliste: "baue die Links so ein."
   Vorher lagen sie auf dem Textraster 4:4:3 und endeten schon bei 1006 px,
   waehrend die Liste darueber bis zum rechten Rand lief.                    */
.qv-wege {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 48px; margin: 0;
}
.abschnitt > .qv-wege { margin-top: -15px; }   /* 40 px sichtbar, wie im Satzblock */
.qv-wege > .qv-weg { display: flex; align-items: center; gap: 24px; min-height: 44px; }
.abschnitt > .qv-wege + .bildreihe,
.abschnitt > .qv-wege + .drittelreihe { margin-top: 48px; }
/* ── Schmaler als 1200: die Randspalte legt sich UNTER den Text ──────────
   Ab hier ist .satz zweispaltig und .rand nimmt eine eigene Reihe ueber die
   volle Breite (lp-stil.css). Damit gibt es keine dritte Spalte mehr, auf
   deren letzte Zeile der Weg zielen koennte -- er stellt sich also einfach
   unter die Randspalte. Ohne diese Regeln lag er auf ihr (am 29.09.2026 im
   Bild: "UNSERE" ueber "Uhr"). */
@media (max-width: 1199px) {
  .satz:has(> .qv-weg) { row-gap: 48px; }
  .satz > .rand { grid-row: auto; grid-column: 1 / -1;
                  align-self: auto; justify-content: normal; }
  .satz > .qv-weg { grid-row: auto; align-self: auto;
                    margin-top: 0; padding-top: 0; align-items: center; }
  .satz > .qv-weg .qv-strich { margin-bottom: 0; }
  .satz > .qv-weg.weg-breit { grid-column: 1 / -1; }
  .satz > .qv-weg.weg-s1 { grid-column: 1; }
  .satz > .qv-weg.weg-s2 { grid-column: 2; }
}

/* ── Handy: alles untereinander, jeder Weg ueber die volle Breite ──────── */
@media (max-width: 809px) {
  .qv-wege { grid-template-columns: 1fr; gap: 24px; }
  .satz:has(> .qv-weg) { row-gap: 32px; }
  .satz > .qv-weg { grid-column: 1 / -1 !important; grid-row: auto; }
  .satz > .qv-weg + .qv-weg { margin-top: -8px; }
  .satz > .rand { grid-row: auto; }
}

/* ── Dieselben Wege am Ende einer Unterseite ─────────────────────────── */
/* Michael am 29.09.2026: "Fuehre das ueberall aus, auf der ganzen Webseite."
   Frueher stand hier ein Kasten mit Ueberschrift und je einem Satz zum Ziel.
   Jetzt dieselbe Zeile wie in den Abschnitten der Startseite: zwei Worte, ein
   Strich dazwischen, einer je Spalte -- gleicher Abstand nach oben und unten. */
/* 29.09.2026: zwischen Verweis und Fuss standen 216 px Kasten -- 96 px eigener
   Abstand plus 120 px Polster des Fusses, sichtbar 348 px bis zur ersten
   Fusszeile. Michael: "zu viel Abstand zwischen Link und Footer."
   Jetzt bringt der Verweis unten NICHTS mehr mit; der Abstand kommt allein aus
   dem Polster des Fusses (120 px), oben bleiben die 104 px der Seite.        */
.qv.qv-wege {
  max-width: var(--breite, 1435px);
  margin: 104px auto 0; padding: 0 var(--rand, 40px);
  grid-template-columns: 4fr 4fr 3fr;
}
@media (max-width: 1199px) { .qv.qv-wege { grid-template-columns: 1fr 1fr; } }
@media (max-width: 809px)  { .qv.qv-wege { grid-template-columns: 1fr; gap: 24px; } }
/* 19.10.2026: Wege ins Journal (journal-verweise.py) stehen als eigene Zeile
   direkt ueber "Das gehoert dazu". Zwischen beiden Zeilen nur 40 px, nicht
   noch einmal die 104 px Seitenabstand. */
.qv.qv-journal + .qv.qv-wege { margin-top: 40px; }

/* Der Weg von der Zimmerübersicht auf die Einzelseite ist am 29.09.2026
   abgeschaltet worden (siehe zimmerverweise() in querverweise.py): die
   Einzelseite zeigt bisher nur dieselbe Karte wie die Übersicht. Der Stil
   dafür bleibt hier stehen, damit er mit dem Schalter zurückkommt --
   einzeilig, Tippfläche 44 px, Strich direkt am Wort. */
.zpm .cta:has(.qv-zimmer) { flex-wrap: wrap; }
.zpm .qv-zimmer {
  display: inline-block; flex: 0 0 auto; white-space: nowrap;
  margin-right: auto; align-self: center;
  padding-top: 13px; margin-top: -13px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity .2s cubic-bezier(.23, 1, .32, 1);
}
.zpm .qv-zimmer:hover { opacity: .6; }

/* ── Abstand vom Textblock zum Bild ──────────────────────────────────────
   Michael am 29.09.2026: "Mehr Abstand zwischen diesem Text und Bild, mach
   ihn ueberall gleich." Seit die Verweise IM Satzblock sitzen, war es nur noch
   der Stapelabstand von 48 px -- vorher, als der Verweis daneben stand, waren
   es 96. Jetzt gilt 96 px an jeder Stelle, egal ob der Abschnitt einen
   Satzblock, eine Verweiszeile oder nur Bilder hat.                        */
.abschnitt > .satz + .bildreihe,
.abschnitt > .satz + .drittelreihe,
.abschnitt > .leitsatz + .bildreihe,
.abschnitt > .kopf1 + .bildreihe,
.abschnitt > .fragenliste + .bildreihe { margin-top: 104px; }  /* 40 + 104 = 144 */
/* Michael am 03.10.2026: "Etwas mehr Abstand zwischen Text und Bild."
   Gemessen vorher: 104 px zwischen Unterkante Satzblock und Oberkante der
   ersten Bildreihe, in allen Abschnitten gleich. Jetzt 144 px.
   WARUM HIER UND NICHT IN lp-stil.css: dort steht derselbe Selektor, aber
   querverweise.css wird SPAETER geladen und gewinnt. Ein erster Versuch an
   diesem Tag setzte 40 px in lp-stil.css -- gemessen blieb es bei 104, weil
   diese Zeile sie ueberschreibt. Zwei Stellen fuer denselben Abstand sind
   eine Falle; geaendert wird die, die wirkt. */
@media (max-width: 809px) {
  .abschnitt > .satz + .bildreihe,
  .abschnitt > .satz + .drittelreihe,
  .abschnitt > .leitsatz + .bildreihe,
  .abschnitt > .kopf1 + .bildreihe,
  .abschnitt > .fragenliste + .bildreihe,
  .abschnitt > .qv-wege + .bildreihe,
  .abschnitt > .qv-wege + .drittelreihe { margin-top: 16px; }  /* 48 + 16 = 64 */
}

/* ── Galerie: der Weg steht ganz oben, ohne Text davor ───────────────────
   Michael am 29.09.2026: "zu viel Abstand". Der Abschnitt beginnt mit 168 px
   Luft, und weil die Galerie keinen Text hat, stand der Weg allein in diesem
   Feld -- gemessen 177 px zwischen dem Bild des vorigen Abschnitts und der
   Zeile. Hier gilt derselbe Wert wie ueberall zwischen Text und Weg: 64 px. */
.abschnitt > .nur-vorlesen + .qv-wege { margin-top: -54px; }   /* 104 - 54 = 50, gemessen 64 px bis zum Bild davor */
@media (max-width: 809px) {
  .abschnitt > .nur-vorlesen + .qv-wege { margin-top: -56px; }  /* 96 - 56 = 40 */
}

/* Der Fuss bringt 120 px Polster mit. Direkt unter der Verweiszeile ergibt
   das zusammen mit dem Innenabstand des Fusses 260 px sichtbare Luft --
   gemessen am 29.09.2026 auf /essen-trinken/. Steht die Verweiszeile davor,
   reichen 40 px: die Zeile IST schon der Abschluss der Seite. */
/* Der Verweis ist das letzte Kind von main/.themenseite, der Fuss ein
   Geschwister davon -- "+ footer" traf deshalb nichts (gemessen: Polster blieb
   bei 120 px). Richtig ist die Seite selbst: hat sie eine Verweiszeile, faellt
   das Polster des Fusses auf 40 px. */
body:has(.qv.qv-wege) footer.fuss { padding-top: 96px; }
@media (max-width: 809px) { body:has(.qv.qv-wege) footer.fuss { padding-top: 64px; } }

/* Der Strich im Verweis wird nicht beliebig lang (30.09.2026) ============
   Michael: "Link zu lang." Gemessen auf der Startseite bei 1440 px zog sich
   der Strich ueber 951 px -- er fuellt alles, was zwischen den zwei Woertern
   frei bleibt. Ueber eine gewisse Laenge liest er sich nicht mehr als
   Verbindung, sondern als Linie, die zufaellig dort liegt.
   Obergrenze 280 px, und der Rest des Platzes bleibt als Luft zwischen den
   Woertern stehen. */
/* 280 px waren Michael am 30.09.2026 zu kurz ("warum ist die Linie so kurz").
   Der Strich ist die Verbindung zwischen den zwei Wortteilen -- er darf den
   Platz nehmen, der zwischen ihnen frei bleibt, nur nicht ins Uferlose:
   Untergrenze 120 px, damit er auch in einer schmalen Spalte sichtbar bleibt,
   und keine Obergrenze mehr. */
.qv-weg .qv-strich, .bb-weg .bb-strich { min-width: 120px; }

/* Zwei Verweise untereinander enden auf derselben Linie ==================
   Michael 30.09.2026: "Die zwei Links, wenn zwei Links uebereinander sind,
   immer gleich lang."
   Die Kaesten waren schon gleich breit (gemessen 36…564 bei 600 px), aber das
   rechte Wort sass linksbuendig in seiner Spalte -- "FRUEHSTUECK" endete
   deshalb 40 px frueher als "IN FISS". Jetzt steht der rechte Teil rechts an
   der Kante, und beide Zeilen schliessen buendig ab. */
.qv-weg > .qv-teil:last-child,
.bb-weg > .bb-teil:last-child { justify-self: end; text-align: right; }

/* Verweisleiste auf die Flucht der Linie darueber =======================
   Michael 01.10.2026: "Mach die Links so breit wie oben die Striche."
   Gemessen auf /faq/ bei 1440 px: die Trennlinie (.ts-schluss, border-top)
   lief 43…1398, die Verweise begannen erst bei 83 -- die Leiste erbt die
   40 px Polsterung ihres Elternteils (.textseite) und legt mit
   "padding:0 var(--rand)" noch einmal 40 px drauf. Innerhalb eines schon
   gepolsterten Elternteils faellt die zweite Polsterung weg; auf Seiten ohne
   gepolsterten Elternteil (.themenseite) bleibt sie stehen. */
.qv.qv-wege { padding-left: 0; padding-right: 0; }
/* Ausnahme Themenseiten: dort hat das Elternteil KEINE Polsterung, die Leiste
   traegt sie selbst. Gemessen 01.10.2026 auf /winter/skifahren/: .themenseite
   padding-left 0, Leiste 3…1438, erster Verweis bei 43 -- ohne eigene
   Polsterung stuende er auf der Fensterkante. */
.themenseite > .qv.qv-wege { padding-left: var(--rand, 40px); padding-right: var(--rand, 40px); }
/* 30.10.2026 (Michael: "die unteren Links gehen ueberall raus"): auch ein <main> ohne
   Klasse (z. B. /winter/) hat keine Polsterung. Gemessen bei 1000 px: Links 0-476 und
   524-1000, also auf der Fensterkante, waehrend Bilder und Fragen bei 40 beginnen. */
main:not([class]) > .qv.qv-wege { padding-left: var(--rand, 40px); padding-right: var(--rand, 40px); }

/* Zwei Verweise: aussen buendig, in der Mitte Luft ======================
   Michael 01.10.2026: "der breitere Links dass sie mit den Seitenteilen der
   oberen Striche abschliessen. Und in der Mitte ungefaehr 13 cm Abstand."
   Das Grundraster ist 4fr 4fr 3fr fuer DREI Verweise; bei zweien standen sie
   in Spalte 1 und 3 und endeten innerhalb der Linie. Bei genau zwei Verweisen
   also zwei gleiche Spalten, Abstand 13 cm -- nach unten gedeckelt, damit am
   schmalen Fenster noch Text in die Zeile passt. */
@media (min-width: 1200px) {
  .qv.qv-wege:has(> .qv-weg:nth-of-type(2):last-of-type) {
    grid-template-columns: 1fr 1fr !important;
    column-gap: min(13cm, 34%) !important;
  }
  .qv.qv-wege:has(> .qv-weg:nth-of-type(2):last-of-type) > .qv-weg:nth-of-type(1) { grid-column: 1 !important; }
  .qv.qv-wege:has(> .qv-weg:nth-of-type(2):last-of-type) > .qv-weg:nth-of-type(2) { grid-column: 2 !important; }
}

/* Verweisleiste auf die Breite der Linie darueber (Startseite) ==========
   Michael 01.10.2026: "der breitere Links dass sie mit den Seitenteilen der
   oberen Striche abschliessen."
   Gemessen auf / bei 1440 px: die Leiste war durch max-width 1144 px auf
   148…1292 eingeschnuert, waehrend Linie und Bilder von 43 bis 1398 laufen.
   Die Deckelung faellt weg; die Leiste nimmt die Inhaltsbreite. */
@media (min-width: 1200px) {
  .qv.qv-wege { max-width: none; }
}

/* 24.10.2026, Responsive-Durchgang: am Handy liefen Querverweise rechts aus dem Bild (320 px "und Anfahrt" bis x 347,
   EN 375 px "and getting here" bis x 386). Der Rest der Seite schneidet das still ab (overflow-x: clip auf body), darum
   fiel es keiner Ueberlaufmessung auf. Jetzt darf das Ziel rechts umbrechen, der Strich gibt zuerst nach. */
@media (max-width: 809px) {
  .qv-weg { column-gap: 16px; }
  .qv-wege > .qv-weg { gap: 16px; }
  .qv-weg .qv-teil:first-child { flex: 0 0 auto; white-space: nowrap; }   /* 28.10.2026: nur das rechte Ziel darf umbrechen, das linke Wort bleibt ganz */
  .qv-weg .qv-strich { min-width: 16px; flex: 1 1 16px; }   /* 28.10.2026: ".qv-weg .qv-strich { min-width: 120px }" (Zeile 354) schlug das einfache ".qv-strich" und frass am Handy 120 px, Woerter brachen mitten im Wort */
  .qv-weg .qv-teil:last-child { white-space: normal; text-align: right; min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}
/* 24.10.2026: EN 375 px "questions" lag 3 px ueber dem Rand: der Verweis selbst durfte breiter werden als seine Spalte. */
@media (max-width: 809px) {
  .qv-weg { min-width: 0; max-width: 100%; }
  .qv-weg .qv-teil { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
}

/* 28.10.2026 Responsive: Querverweise duerfen am Handy umbrechen statt ueber den Rand zu laufen */
@media (max-width: 480px) { .qv-weg { min-width: 0; max-width: 100%; } .qv-teil { white-space: normal; } .qv-weg .qv-strich { min-width: 12px; } }

/* 29.10.2026 Verweise am Handy (Michael: "nicht responsive", Woerter brachen mitten im Wort): Wort links bleibt ganz, nur das Ziel rechts bricht zwischen Woertern um, keine automatische Trennung. Gemessen bei 320 bis 768 px: 0 Umbrueche mitten im Wort. Live zusaetzlich als <style id="qv-fix"> in 77 Seiten (Sicherung *.vor-qvfix-28102026 am Server). */
@media (max-width:809px){.qv-weg{column-gap:12px}.qv-wege>.qv-weg{gap:12px}.qv-weg .qv-strich{min-width:8px;flex:1 1 8px}.qv-weg .qv-teil:first-child{flex:0 0 auto;white-space:nowrap;hyphens:manual;-webkit-hyphens:manual}.qv-weg .qv-teil:last-child{white-space:normal;text-align:right;min-width:0;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}}

/* === /zimmer-preise/diaschau.css === */
/* Diaschau im Kopf von "Zimmer und Preise" -- Selbstlauf, einfache Blende,
   durchgehender Zug. Variante C, von Michael am 02.10.2026 gewaehlt.

   ZWEI SACHEN, SONST NICHTS

   1. Die Blende. Nur das NEUE Bild blendet ein; das alte bleibt voll deckend
      darunter liegen, bis es verdeckt ist. Eine gewoehnliche Kreuzblende waere
      in der Mitte auf beiden Seiten halb durchsichtig, zusammen deckten sie
      weniger als einmal vollstaendig, und der Papierton der Buehne schiene
      durch -- das war das Aufblitzen. Die richtige Reihenfolge kostet keine
      Zeile mehr.

   2. Der Zug. Das Reinzoomen startet NIE neu. Das neue Bild uebernimmt den
      Massstab, bei dem das alte gerade stand, und schiebt von dort weiter.
      Ueber alle sechs Bilder wird daraus eine einzige langsame Bewegung, die
      der Bildwechsel nur durchquert. Startwert und Restzeit setzt darum das
      Skript -- nur dort ist bekannt, wo das vorige Bild gerade stand.

   Werte:
     900 ms  Blende, Kurve "ease". Kein Effekt, der gesehen werden will.
     7000 ms Zeit fuer den ganzen Weg von 1,06 auf 1,00. Daraus rechnet das
             Skript je Bild die Restzeit, damit die Geschwindigkeit ueberall
             dieselbe bleibt.

   Rueckbau: werkzeug-diaschau.py --raus, dann diese Datei und diaschau.js
   loeschen. zpm.css und stil/schau.js bleiben unberuehrt. */

.zpm .auftakt .folien { position: relative; overflow: hidden; }

.zpm .auftakt .folie {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; z-index: 1;
  transition: opacity .7s ease;
}

/* Das Bild, das steht: oben, voll da. */
.zpm .auftakt .folie.an { opacity: 1; z-index: 3; }

/* Das Bild, das geht: bleibt voll deckend darunter liegen. Kein Uebergang --
   es verschwindet nicht, es wird verdeckt. */
.zpm .auftakt .folie.geht { opacity: 1; z-index: 2; transition: none; }

/* Der Zug steht hier UND im Skript -- mit Absicht.
   Im CSS: der ganze Weg von 1,06 auf 1,00 ueber 7 s. Das laeuft auch dann,
   wenn das Skript nicht zum Zug kommt.
   Im Skript: dasselbe, aber vom Stand des vorigen Bildes aus, damit der Zug
   beim Wechsel nicht neu beginnt. Inline-Werte schlagen diese Regeln.

   WARUM BEIDES: am 02.10.2026 stand der Zug nur im Skript. Gemessen an der
   Live-Datei fehlten dort "transition: transform" und ".folie.an img" voll-
   staendig -- wo das Skript nicht lief, zoomte gar nichts, und genau das ist
   Michael aufgefallen. Ein Effekt, der nur eine Quelle hat, faellt ganz aus. */
.zpm .auftakt .folie img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.10);
  transition: transform 8s cubic-bezier(.25,.1,.25,1);
}
.zpm .auftakt .folie.an img { transform: scale(1); }

/* Fortschrittslinie in der Steuerung: zeigt, wie lange das Bild noch steht. */
.zpm .schausteuer .takt { flex: 1; height: 1px; background: var(--linie, #DDD5C9);
  position: relative; overflow: hidden; }
.zpm .schausteuer .takt i { position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--tinte, #3D3733); }

/* Ohne Bewegungswunsch: kein Zug, keine Blende, nur umschalten.
   Der Selbstlauf bleibt -- er ist Inhalt, keine Animation. */
@media (prefers-reduced-motion: reduce) {
  .zpm .auftakt .folie,
  .zpm .auftakt .folie img { transition: none !important; transform: none !important; }
  .zpm .auftakt .folie.geht { opacity: 0 !important; }
}

/* 18.10.2026, Michael: "interessanter". Der Zug zielt abwechselnd nach links und rechts,
   so wandert der Blick von Bild zu Bild statt immer in die Mitte. Blende .7 s, Zug 1,10 in 8 s.
   Zurueck: diaschau.css.vor-kopfhoehe-18102026 */
.zpm .auftakt .folie:nth-child(odd) img { transform-origin: 35% 55%; }
.zpm .auftakt .folie:nth-child(even) img { transform-origin: 65% 45%; }

/* 18.10.2026, Michael: Schlagwoerter auf den Bildern, Schrift wie die Kopfschau der Unterseiten (DM Mono, gesperrt).
   Kommt nach der Blende, geht mit dem Bild. Zurueck: diaschau.css.vor-kopfhoehe-18102026 */
.zpm .auftakt .ds-satz {
  position: absolute; left: 50%; top: 50%; z-index: 4; margin: 0; transform: translate(-50%, -40%);
  width: max-content; max-width: 86%; text-align: center; pointer-events: none;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500; letter-spacing: .32em;
  text-transform: uppercase; color: #fff; line-height: 2.2;
  text-shadow: none;   /* 20.10.2026, Michael: kein Schatten auf der Schrift, bei allen Slideshows */
  opacity: 0; transition: opacity 400ms ease, transform 400ms ease;
}
.zpm .auftakt .folie.an .ds-satz { opacity: 1; transform: translate(-50%, -50%);
  transition: opacity 700ms ease 500ms, transform 900ms cubic-bezier(.23,1,.32,1) 500ms; }
@media (max-width: 600px) { .zpm .auftakt .ds-satz { font-size: 11px; letter-spacing: .24em; } }
@media (prefers-reduced-motion: reduce) { .zpm .auftakt .ds-satz { transition: none !important; } }

/* 18.10.2026, Michael: Kopf am Handy so hoch wie auf der Startseite (dort 350 / 500 bei 2 x 36 px Rand:
   gemessen 318 x 454 bei 390 px). Vorher hier 438 px. Zurueck: diaschau.css.vor-kopfhoehe-18102026 */
@media (max-width: 809px) {
  html body .zpm .auftakt .folien { aspect-ratio: auto; height: calc((100vw - 72px) * 8 / 5); }  /* 30.10.2026: 350/560 wie Home (509 px bei 390), vorher 10/7 = 454. Zurueck: diaschau.css.vor-kopfhoehe-30102026 */
}

/* === /zimmer-preise/zx-mosaik.css === */
/* ===== zx-mosaik.css =====
   Entwurf 4 "Mosaik". Die Ordnung der Zimmerseiten auf der Uebersicht:
   erst die Bilder versetzt, dann der Textsatz, dann die vier Spalten.
   Eigenstaendig, erbt nichts aus zpm.css.

   Michael am 04.10.2026 mit drei Abbildungen aus /zimmer-preise/modern/:
   "zuerst die Bilder, dann der erste Text, dann der dritte Text. Jetzt
   brauchen wir nur noch oben als Einstieg etwas wirklich schoenes und
   spektakulaeres."

   Der Einstieg (Abschnitt TOR) ist das einzige Stueck, das es so noch nicht
   gibt: drei randlose Bildbahnen ueber die ganze Fensterbreite, die beim
   Scrollen verschieden schnell laufen, darueber die Zeile. Der Versatz kommt
   aus CSS scroll-driven animations -- kein Skript, kein Scroll-Lauscher, und
   wo der Browser das nicht kann, steht dasselbe Bild ruhig da. */

.zx{--grund:#F3EEE7;--tinte:#3D3733;--grau:#6E6862;--text:#5C554F;--linie:#DDD5C9;
  --papier:#FBF8F2;
  --rand:40px;--gasse:24px;--breite:1435px;
  --aus:cubic-bezier(.23,1,.32,1);--aus-io:cubic-bezier(.77,0,.175,1);
  --serif:"Cormorant Garamond",Georgia,serif;--lese:"Abhaya Libre",Georgia,serif;
  --mono:"DM Mono","IBM Plex Mono",ui-monospace,monospace;
  background:var(--grund);color:var(--tinte);font:17px/28px var(--lese);
  overflow-x:clip}
.zx *,.zx *::before,.zx *::after{box-sizing:border-box}
.zx main{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.zx h1,.zx h2,.zx h3{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:-.025em;
  font-variant-numeric:lining-nums}
.zx p,.zx dl,.zx dd,.zx figure{margin:0;padding:0}
.zx img{display:block;width:100%;height:auto;object-fit:cover;background:#E6DFD4}
.zx a{color:inherit}
.zx ::selection{background:var(--tinte);color:var(--grund)}

/* ================================ TOR ================================= */
/* Volle Fensterbreite, volle Fensterhoehe. Der Satzspiegel wird hier
   bewusst einmal verlassen -- und nur hier. */
.zx .mo-tor{position:relative;width:100vw;margin-inline:calc(50% - 50vw);
  height:100svh;min-height:520px;max-height:1000px;overflow:hidden;isolation:isolate}
/* Keine drei gleichen Streifen: ein grosses Bild traegt, zwei stuetzen.
   Drei gleich breite Hochformate schneiden aus jedem Querformat einen
   zufaelligen Ausschnitt heraus -- gemessen am ersten Aufbau, der eine
   Schrankwand und einen Fernseher gross zeigte. */
.zx .to-wand{position:absolute;inset:0;display:grid;
  grid-template-columns:7fr 5fr;grid-template-rows:1fr 1fr;gap:2px;background:var(--tinte)}
.zx .to-b0{grid-row:1/3}
.zx .to-bahn{position:relative;overflow:hidden}
/* Die Bahnen sind hoeher als das Tor: nur so koennen sie wandern, ohne dass
   unten eine Kante auftaucht. */
.zx .to-bahn img{position:absolute;inset:-14% 0;height:128%;width:100%}
/* Der Schleier traegt die Schrift. Gemessen wird gegen die hellste Stelle,
   nicht gegen den Mittelwert. */
.zx .mo-tor::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(24,20,17,.84) 0%,rgba(24,20,17,.70) 22%,
    rgba(24,20,17,.40) 46%,rgba(24,20,17,.16) 72%,rgba(24,20,17,.06) 100%)}
/* Die Zeile steht OBEN im Bild, nicht unten: unten schwebt die Buchungsleiste
   ueber der Seite und deckte die dritte Zeile und die Spur zu (gemessen
   04.10.2026). Oben ist ausserdem das, worum Michael gebeten hat -- Schrift
   und Bild beginnen sofort. */
.zx .to-satz{position:absolute;z-index:2;left:0;right:0;top:0;
  padding:clamp(30px,5.4vh,76px) var(--rand) 0}
.zx .to-satz h1{color:var(--papier);font-size:clamp(34px,6.2vw,108px);line-height:.94;
  max-width:15ch;text-wrap:balance;text-shadow:0 2px 40px rgba(16,12,10,.3)}
/* Die Spur nennt nur Zahlen, die aus den Zimmerdaten gerechnet sind. */
.zx .to-spur{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,40px);margin-top:clamp(16px,2vw,30px);
  font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,248,242,.88);font-variant-numeric:tabular-nums}
.zx .to-spur span{position:relative}
.zx .to-spur span+span::before{content:"";position:absolute;left:clamp(-20px,-1.2vw,-8px);top:50%;
  width:1px;height:12px;margin-top:-6px;background:rgba(251,248,242,.42)}

/* Der Versatz. Drei Tempi, damit die Wand nicht als EIN Bild liest. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference){
    @keyframes to-auf{to{transform:translate3d(0,-9%,0)}}
    @keyframes to-ab{to{transform:translate3d(0,6%,0)}}
    @keyframes to-auf2{to{transform:translate3d(0,-14%,0)}}
    .zx .to-b0 img{animation:to-auf linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .zx .to-b1 img{animation:to-ab  linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .zx .to-b2 img{animation:to-auf2 linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  }
}

/* Vorwort: der Satz, der frueher unter der Ueberschrift stand, bekommt hier
   eine eigene Flaeche -- nach einem Vollbild braucht das Auge eine Pause. */
.zx .mo-vorwort{padding:clamp(40px,6vw,110px) 0 clamp(40px,5vw,90px);
  border-bottom:1px solid var(--linie)}
.zx .mo-vorwort p{font-family:var(--serif);font-size:clamp(22px,2.6vw,40px);line-height:1.22;
  max-width:28ch;text-wrap:pretty}


/* ===== KARUSSELL-KOPF (Fassung "Preise") =====
   Michael am 04.10.2026: "Nur den oberen Teil, den Header, moechte ich wieder
   alte Teile: das Bilder-Karussell und darunter den Einleitungstext."
   Markup und Skript der Diaschau bleiben unveraendert; diaschau.css faellt auf
   `.zpm` an, darum traegt die Wurzel diese Klasse mit. Was sonst aus zpm.css
   kaeme -- Raster, Hoehe, Steuerzeile -- steht hier, damit die alten
   Zimmerstile NICHT mitgeladen werden muessen. */
.zx .auftakt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gasse);padding:clamp(10px,1.4vw,24px) 0 clamp(9px,1.1vw,16px)}
.zx .auftakt .schau{grid-column:1/-1;position:relative}
/* DIE LAGERUNG DER FOLIEN. Michael am 04.10.2026: "Bei einer Variante
   funktioniert das Karussell nicht, das sind die Bilder untereinander."
   GEMESSEN: auf dieser Fassung stand der Rahmen 1355 x 5447 px hoch, die
   ersten drei Folien bei y=130, 1033 und 1927 -- also untereinander statt
   uebereinander. Auf Variante 1 dagegen 1255 x 753 und alle drei bei y=153.
   URSACHE: die Diaschau holte ihre Lagerung immer aus zpm.css
   (.zpm .folien{position:relative} / .zpm .folie{position:absolute;inset:0;
   opacity:0}). werkzeug-arbeitsvorlage.py nimmt zpm.css fuer diese Fassung
   aber ausdruecklich heraus -- hier standen nur aspect-ratio und margin, und
   ohne position stapelt der Browser die sechs Bilder der Reihe nach.
   Die Regeln stehen deshalb jetzt HIER, vollstaendig und unabhaengig. */
/* DER DECKEL GEGEN DIE BILDSCHIRMHOEHE. Michael am 05.10.2026 zu
   /zimmer-preise/preise/: "Das spielt eins gegen zwei." GEMESSEN bei 1440x900:
   die Steuerzeile lag auf 836-874, die klebende Buchungsleiste auf 820-884 --
   576 px der Zeile standen unter der Leiste, der Taktbalken war mittig
   durchschnitten. URSACHE: die Bildhoehe folgte allein der BREITE
   (aspect-ratio), die Leiste aber klebt an der FENSTERHOEHE. Bei hohen
   Fenstern passte es, bei 900 px nicht.
   Der Deckel nimmt vom Fenster ab, was ueber und unter dem Bild steht:
   Kopfzeile 130 + Steuerzeile 52 + Leiste 64 + 34 Luft = 280 px. Damit endet
   die Steuerzeile bei JEDER Fensterhoehe ueber der Leiste; bei hohen Fenstern
   bleibt das Seitenverhaeltnis massgebend und der Deckel greift gar nicht.
   width:100% steht ausdruecklich dabei: ohne diesen Wert zieht der Deckel ueber
   das Seitenverhaeltnis auch die BREITE mit, und rechts blieb ein leerer
   Streifen von 165 px stehen (gemessen 1440x900: Bild 1190 statt 1355 breit).
   Mit fester Breite gewinnt die Breite, der Deckel kuerzt nur die Hoehe, und
   object-fit:cover beschneidet das Bild statt es zu stauchen. */
.zx .auftakt .folien{position:relative;overflow:hidden;width:100%;
  aspect-ratio:12/6.25;max-height:calc(100dvh - 280px);background:#E6DFD4}
.zx .auftakt .folie{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .6s var(--aus)}
.zx .auftakt .folie.an{opacity:1}
.zx .auftakt .folie img{width:100%;height:100%;object-fit:cover}
.zx .auftakt .schausteuer{display:flex;align-items:center;gap:20px;padding-top:14px}
.zx .auftakt .pfeil{width:34px;height:24px;padding:0;border:0;background:transparent;
  cursor:pointer;position:relative}
.zx .auftakt .pfeil::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;
  background:var(--tinte)}
.zx .auftakt .pfeil::after{content:"";position:absolute;top:8px;width:7px;height:7px;
  border-top:1px solid var(--tinte);border-right:1px solid var(--tinte)}
.zx .auftakt .pfeil.vor::after{right:0;transform:rotate(45deg)}
.zx .auftakt .pfeil.zurueck::after{left:0;transform:rotate(-135deg)}
.zx .auftakt .zaehler{font:400 11px/1 var(--mono);letter-spacing:.16em;color:var(--grau);
  font-variant-numeric:tabular-nums}
/* Michael am 04.10.2026: "mehr Abstand zwischen dem oberen Bild und der
   Ueberschrift". GEMESSEN vorher bei 1440 px: Steuerleiste endet bei 874,
   die Ueberschrift beginnt bei 931 -- 57 px. Zum Bildrand selbst waren es
   95 px, aber dazwischen liegen Pfeile und Zaehler, und die lesen als Teil
   des Bildes. Der Abstand, den man SIEHT, ist der zur Steuerleiste.
   Neu: clamp(56px,6.4vw,112px) -- bei 1440 px rund doppelt so viel. */
.zx .auftakt h1{grid-column:1/-1;margin-top:clamp(56px,6.4vw,112px);
  font-size:clamp(30px,3.6vw,56px);line-height:1.04;text-wrap:balance}
.zx .auftakt .einl{grid-column:1/10;margin-top:clamp(16px,2vw,28px);color:var(--text);
  max-width:86ch;text-wrap:pretty}
@media (max-width:1199px){.zx .auftakt .einl{grid-column:1/-1}}
@media (max-width:809px){
  .zx .auftakt .folien{aspect-ratio:4/5}
  .zx .auftakt h1{font-size:clamp(26px,7vw,34px)}
  .zx .auftakt .einl{font-size:17px}
}

/* ============================= EIN ZIMMER ============================== */
.zx .mo-raum{padding:clamp(60px,7.5vw,112px) 0 clamp(54px,7vw,130px);
  scroll-margin-top:90px}
/* Laufkopf, wie ihn Variante 1 traegt: links das Zimmer, rechts die Seite.
   Haarlinie darueber, Mono-Versalien -- er ordnet den Block ein, ohne ihn
   zu betonen. */
/* Genau wie in Variante 1 gemessen (04.10.2026): Haarlinie darueber,
   16 px Luft bis zur Zeile, DM Mono 11 px mit 0,14 em Laufweite.
   Vorher stand hier Inter mit 0,18 em und ohne Linie. */
.zx .mo-folio{display:flex;justify-content:space-between;gap:var(--gasse);
  border-top:1px solid var(--linie);padding-top:16px;
  padding-bottom:clamp(18px,2.2vw,34px);
  font:400 11px/16px "DM Mono","IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
@media (max-width:809px){.zx .mo-folio{flex-direction:column;gap:4px}}
/* Zwei Spalten, nicht drei: die Ziffer davor ist am 04.10.2026 weggefallen
   ("Entferne die Nummerierung vor der Zimmerkategorie. Und setze es dann
   linksbuendig."). Damit faengt der Name am linken Satzrand an, die Masse
   bleiben rechts. Die Regel fuer .mo-nr bleibt stehen, falls die Ziffer
   irgendwo sonst noch vorkommt -- im Mosaik tut sie es nicht mehr. */
.zx .mo-marke{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  column-gap:clamp(14px,1.6vw,26px);padding-bottom:clamp(20px,2.4vw,38px)}
.zx .mo-nr{font:400 12px/1 var(--mono);letter-spacing:.14em;color:var(--grau)}
/* Michael am 04.10.2026 mit einer Abbildung des Zimmernamens:
   "Verkleinere den Schriftzug Modern Top ... Kleiner machen."
   Gemessen bei 1440 px: der Name stand auf 63,36 px, in Fassung eins
   steht derselbe Name auf 38 px. Auf dieses Mass gebracht -- 4,4vw mal
   0,6 sind 2,64vw, die Eckwerte im selben Verhaeltnis (30 -> 18,
   70 -> 42). So geht es ueber alle Fenstergroessen mit, statt nur bei
   1440 zu stimmen. Zeilenhoehe bleibt .96, der Name ist einzeilig. */
.zx .mo-raum h2{font-size:clamp(18px,2.64vw,42px);line-height:.96}
.zx .mo-mass{display:flex;gap:16px;font:400 12px/1 var(--mono);letter-spacing:.1em;
  color:var(--grau);font-variant-numeric:tabular-nums}

/* --- 1. Das Mosaik: gleiche Oberkante waere ein Raster, kein Satz. --- */
.zx .mo-mosaik{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gasse);row-gap:clamp(18px,2.4vw,40px)}
.zx .mo-f{overflow:hidden;margin:0}
.zx .mo-f img{width:100%}
.zx .mz-5 .mo-f0,.zx .mz-4 .mo-f0,.zx .mz-3 .mo-f0,.zx .mz-2 .mo-f0{grid-column:1/8;grid-row:1}
.zx .mo-f0 img{aspect-ratio:4/5}
.zx .mz-5 .mo-f1,.zx .mz-4 .mo-f1,.zx .mz-3 .mo-f1,.zx .mz-2 .mo-f1{grid-column:8/13;grid-row:1;
  align-self:end;margin-bottom:clamp(14px,3vw,56px)}
.zx .mo-f1 img{aspect-ratio:3/2}
.zx .mz-5 .mo-f2,.zx .mz-4 .mo-f2{grid-column:2/7;grid-row:2}
.zx .mz-3 .mo-f2{grid-column:3/11;grid-row:2}
.zx .mo-f2 img{aspect-ratio:4/3}
.zx .mz-5 .mo-f3,.zx .mz-4 .mo-f3{grid-column:7/12;grid-row:2;margin-top:clamp(24px,4.4vw,90px)}
.zx .mo-f3 img{aspect-ratio:3/4}
.zx .mz-5 .mo-f4{grid-column:1/6;grid-row:3;margin-top:0}
/* Michael am 04.10.2026: "Schneide Bild eins von Bild zwei ab." Der
   negative Rand (-70 bis -20 px) zog Folie 4 unter Folie 2 -- GEMESSEN
   17 px Ueberlappung bei 960 px Breite, in drei Zimmerbloecken (modern,
   familiensuite, huettensuite). Jetzt sitzt sie sauber unter der Reihe. */
.zx .mo-f4 img{aspect-ratio:1/1}

/* --- 2. Der Textsatz: links die Aussage, rechts die Prosa. --- */
.zx .mo-satz{display:grid;grid-template-columns:6fr 6fr;column-gap:clamp(24px,4vw,80px);
  padding-top:clamp(40px,5.4vw,100px)}
.zx .mo-stand{font-family:var(--serif);font-size:clamp(26px,3.2vw,50px);line-height:1.1;
  max-width:19ch;text-wrap:pretty}
.zx .mo-prosa{display:grid;row-gap:18px;align-self:start;padding-top:clamp(4px,.6vw,10px)}
.zx .mo-prosa p{color:var(--text);max-width:46ch;hyphens:auto}

/* --- 3. Was im Zimmer ist: vier Spalten mit Haarlinie. --- */
/* Michael am 05.10.2026: "Setze den letzten Block etwas tiefer runter, mehr
   Abstand zwischen dem Text und 'Was im Zimmer ist' -- damit es grosszuegiger
   und eleganter wirkt." GEMESSEN vorher 78 px Innenabstand. */
/* Abbinder, 05.10.2026 grosszuegiger gesetzt. Drei Eingriffe, gleich gehalten
   mit der Detailseite (zimmer-preise/abbinder.css), damit Uebersicht und
   Zimmerseite denselben Schluss haben:

   1. LUFT. Abstand Ueberschrift zur ersten Linie 28 auf 56 px, Zeilenabstand
      der Listen 26 auf 30 px, Schrift 16 auf 17 px. Eine Ausstattungsliste
      wird einmal gelesen, sie darf Platz brauchen.
   2. EINE Linie statt vier. Vier Haarlinien mit Luecken dazwischen sind vier
      Anfaenge; eine durchgehende Linie ueber alle Spalten ist ein Kolumnen-
      titel, und die Spalten haengen sichtbar an derselben Kante.
   3. Eine zweite Linie schliesst den Block unten ab -- sonst franst er aus,
      weil die vier Spalten verschieden lang sind (7 / 2 / 3 / 6 Zeilen).

   Kein haengender Einzug fuer umbrochene Zeilen: die Punkte stehen als EIN dd
   mit <br>, text-indent wirkt dort nur auf die erste Zeile und padding-left
   auf alle uebrigen (am 05.10.2026 gemessen: nur "Suedbalkon" stand buendig).
   Richtig waere eine echte Liste im Erzeuger; bis dahin regelt es die Zeile. */
.zx .mo-was{padding-top:clamp(74px,9.6vw,150px)}
.zx .mo-was h3{font-size:clamp(26px,3vw,50px);line-height:1.02;letter-spacing:-.028em;
  padding-bottom:clamp(28px,3.4vw,56px)}
.zx .mo-was dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(24px,3vw,56px);border-top:1px solid var(--linie)}
.zx .mo-was dl>div{border-top:0;padding-top:clamp(20px,2.2vw,34px)}
.zx .mo-was::after{content:"";display:block;height:1px;background:var(--linie);
  margin-top:clamp(28px,3.4vw,56px)}
.zx .mo-was dt{font:400 11px/16px Inter,system-ui,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grau)}
.zx .mo-was dd{margin-top:clamp(14px,1.6vw,22px);font-size:17px;line-height:30px;
  color:var(--text);text-wrap:pretty}

/* Michael am 04.10.2026: "Mach die Button so breit wie die obere Spalte. Mit
   ein bisschen Abstand dazwischen. swissgrid." Also sitzen die Knoepfe auf
   DENSELBEN Rasterspalten wie die Angaben darueber, mit der Gasse als
   Abstand -- gemessen vorher 217 und 193 px neben Spalten von 238 px. */
/* Michael am 04.10.2026: "Sie muessen von der zweiten bis zur vierten Spalte."
   GEMESSEN vorher bei 1440 px: beide Knoepfe je 321 px auf Spalte 1 und 2,
   linke Kante x=43. Jetzt bleibt die erste Rasterspalte frei und die beiden
   teilen sich den Rest. Die erste Spalte wird AUS dem Vierer-Raster gerechnet
   ((100% - 3 Gassen)/4), damit sie mit den Angaben darueber fluchtet --
   ein fester Pixelwert wuerde bei jeder anderen Fensterbreite danebenliegen. */
/* Die Spalten der Knoepfe bleiben, wie sie sind -- geaendert wird nur Luft,
   Hoehe und das Verhalten beim Zeigen. */
/* ZURUECKGENOMMEN am 05.10.2026, 23:1x. Michael: "warum sind die button auf
   einmal so gross, mach es rueckgaengig." Am selben Tag waren die Knoepfe an die
   Detailseite angeglichen worden (vier Spalten, jeder Knopf ueber zwei davon,
   der erste buendig mit dem Satzspiegel -- gemessen 666 px ab x=43). Das gilt
   nicht mehr.
   Zurueck auf die Vorgabe vom 04.10.2026, "von der zweiten bis zur vierten
   Spalte": der Knopfblock beginnt eine Rasterspalte spaeter und teilt den Rest
   haelftig. Gemessen vor der Angleichung: 493 px ab x=387 -- genau diese zwei
   Zahlen stellt die Einrueckung wieder her. Sie ist gerechnet, nicht geraten:
   eine Spalte des Vierer-Rasters ist (100% - 3 Gassen)/4, dazu eine Gasse.
   Die Hoehe war von der Angleichung nicht betroffen und bleibt. */
.zx .mo-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gasse);padding-top:clamp(36px,4.4vw,72px);
  margin-left:calc((100% - 3*var(--gasse))/4 + var(--gasse))}
.zx .mo-knopf,.zx .mo-mehr{grid-column:auto}
.zx .mo-knopf,.zx .mo-mehr{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:62px;padding:20px 24px;border-radius:0;text-align:center;
  font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  transition:transform 170ms var(--aus),background-color 220ms var(--aus),
             border-color 220ms var(--aus),box-shadow 260ms var(--aus),color 220ms var(--aus)}
.zx .mo-knopf{background:var(--tinte);color:var(--grund)}
.zx .mo-mehr{border:1px solid var(--linie);color:var(--grau)}
.zx .mo-knopf:active,.zx .mo-mehr:active{transform:scale(.988)}
@media (hover:hover) and (pointer:fine){
  .zx .mo-knopf:hover{background:#2C2724;transform:translateY(-1px);
    box-shadow:0 14px 34px rgba(61,55,51,.18)}
  .zx .mo-mehr:hover{border-color:var(--tinte);color:var(--tinte);
    background:rgba(61,55,51,.035);transform:translateY(-1px)}
}

.zx .mo-schluss{padding:clamp(40px,5vw,90px) 0 clamp(60px,7vw,120px)}
.zx .mo-schluss p{font-family:var(--serif);font-size:clamp(24px,3.4vw,54px);line-height:1.05}

/* Bildeintritt OHNE Skript. Erster Aufbau haengte an einer Klasse, die ein
   Skript setzen musste -- gemessen 04.10.2026: 0 von 44 Bildern wurden je
   sichtbar, die Seite blieb leer. Jetzt ist der Grundzustand SICHTBAR, und
   die Bewegung kommt aus der Scroll-Zeitachse des Browsers. Kann er das
   nicht, steht das Bild einfach da. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes mo-auf{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
    .zx .mo-f{animation:mo-auf linear both;animation-timeline:view();
      animation-range:entry 4% entry 62%}
  }
}

@media (max-width:1199px){
  .zx{--rand:32px;--gasse:20px}
  .zx .mo-was dl,.zx .mo-wege{grid-template-columns:1fr 1fr}
  .zx .mo-wege{margin-left:0}
  .zx .mo-knopf,.zx .mo-mehr{grid-column:auto}
  .zx .mo-was dl{row-gap:22px}
  .zx .mo-satz{grid-template-columns:1fr;row-gap:20px}
  .zx .mo-stand{max-width:26ch}
}
@media (max-width:809px){
  .zx{--rand:20px;--gasse:16px}
  .zx .mo-tor{height:88svh;min-height:460px}
  .zx .to-wand{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .zx .to-b0{grid-row:1/3}
  .zx .to-satz h1{font-size:clamp(30px,9vw,44px);max-width:none}
  .zx .mo-marke{grid-template-columns:1fr;row-gap:6px}
  /* 05.10.2026, Michael: "Modern top etwas groesser schreiben beim
     Breakpoint Mobil". GEMESSEN bei 375 px: der Name stand auf 18 px --
     die Untergrenze des clamp, waehrend die Masszeile daneben schon 12 px
     hat. Zwei Schriftgrade, die fast gleich gross sind, ergeben keine
     Rangfolge. 8vw bindet die Groesse wieder ans Fenster (375 -> 30 px,
     809 -> 38 px gedeckelt), der laengste Name bleibt einzeilig. */
  .zx .mo-raum h2{font-size:clamp(28px,8vw,38px)}
  .zx .mo-mass{grid-column:1/-1}
  /* Auf dem Handy steht ein Bild je Zeile: zwei nebeneinander ergaeben
     Randmasse, die nicht mehr zu den anderen Seiten passen. */
  .zx .mo-mosaik{grid-template-columns:1fr}
  .zx .mo-mosaik .mo-f{grid-column:1/-1!important;grid-row:auto!important;margin:0!important}
  /* 05.10.2026, Michael: "die linke Seite der Bildausschnitte naeher am
     Fenster". Am Handy wird das Leitfoto von 3:2 auf 4:5 beschnitten -- davon
     bleiben rund 53 Prozent der Bildbreite stehen, bei object-position center
     faellt links und rechts gleich viel weg. Das Fenster liegt in diesen
     Aufnahmen rechts; 72 % schiebt den Ausschnitt dorthin, ohne das Bett ganz
     aus dem Bild zu draengen (100 % waere der Anschlag). */
  .zx .mo-f0 img{aspect-ratio:4/5;object-position:72% center}
  .zx .mo-f1 img,.zx .mo-f2 img{aspect-ratio:4/3}
  .zx .mo-f3 img,.zx .mo-f4 img{aspect-ratio:1/1}
  .zx .mo-was dl{grid-template-columns:1fr;row-gap:20px}
  .zx .mo-wege{grid-template-columns:1fr;row-gap:12px}
  .zx .mo-knopf,.zx .mo-mehr{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .zx *{transition-duration:1ms!important;animation:none!important}
  .zx.js .mo-f{clip-path:none}
}

@media (prefers-reduced-motion:reduce){
  .zx .auftakt .folie{transition:none}
}

/* ===== Auftakt gleich wie Fassung eins ==================================
   Michael am 04.10.2026: "Ist das identisch????????????????????????????????"
   Nein, war es nicht. Ich hatte "beide Fassungen haben den Kopf identisch"
   gesagt und dabei die REIHENFOLGE im Quelltext gemeint, nicht das Aussehen.
   Gemessen bei 1440 px Fensterbreite, Fassung eins gegen Fassung zwei:

     h1 Schriftgroesse     30 px        gegen  51,84 px
     h1 Zeilenhoehe        38,4 px      gegen  53,91 px
     h1 Abstand oben       125,28 px    gegen  92,16 px
     Einleitung Groesse    18 px        gegen  17 px
     Einleitung Breite     935 px       gegen  747 px

   Die Werte kommen in Fassung eins aus zpm.css und zpm-gross.css, die
   Fassung zwei beide NICHT laedt. Darum stehen sie hier noch einmal -- und
   zwar als dieselben Ausdruecke, nicht als abgelesene Pixelwerte, damit sie
   ueber alle Fenstergroessen mitgehen. Aendert jemand sie dort, gehoeren sie
   hier nachgezogen; eine Probe dafuer steht in werkzeug-arbeitsvorlage.py
   (--gegenprobe).

   NUR SCHRIFT UND ABSTAENDE, NICHT DIE BREITE. Michael am 04.10.2026: "Den
   Satzspiegel nicht übernehmen. Und auch diese Frage nicht mehr stellen."
   Fassung eins ist 1255 px breit mit 93 px Rand, Fassung zwei 1355 mit 43 --
   das bleibt. Die beiden sollen sich vergleichen lassen, nicht gleich
   aussehen. Entschieden, nicht wieder aufmachen. */
.zx .auftakt h1{
  font-size:30px;line-height:1.28;letter-spacing:-.005em;
  /* Michael am 05.10.2026: "Gleich viel Abstand vom unteren Rand des oberen
     Bildes zur Schrift und von der Schrift zum unteren Block."
     GEMESSEN bei 1440 px: oben 125 px, unten 186 px. Der obere Wert zieht
     nach (8,7vw -> 12,9vw). Schriftgroesse bleibt, wie sie entschieden ist. */
  margin-top:clamp(69px,8.23vw,133px)}
/* KEIN max-width:44ch hier. In zpm.css steht das an ".zpm .einl", und die
   spaetere Auftakt-Regel setzt es nicht fort -- in Fassung eins wirkt es auf
   den Auftakt also NICHT. Uebernommen hat es den Satz auf 405 px eingeschnuert
   (gemessen 04.10.2026) statt auf die volle Spaltenbreite. */
.zx .auftakt .einl{
  grid-column:1/10;font-size:18px;line-height:1.52;
  margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:1199px){ .zx .auftakt .einl{grid-column:1/-1} }
@media (max-width:809px){
  .zx .auftakt h1{font-size:28px}
  .zx .auftakt .einl{grid-column:1/-1;font-size:17px}
}


/* 06.10.2026, Michael: "Das Bild mit dem gelben Stuhl etwas mehr Hochformat,
   30 % hoeher." Das ist superior-garden-4.jpg im Feld mo-f1. Dort galt 3/2
   (gemessen 551 x 367 px). 30 % mehr Hoehe sind 477 px, das Verhaeltnis dazu
   ist 551/477 = 1,155 -- als Bruch 15/13. Nur dieses eine Bild, die uebrigen
   mo-f1-Felder bleiben bei 3/2. */
#superior-garden .mo-f1 img{aspect-ratio:15/13}

/* === /zimmer-preise/zx-grundriss.css === */
/* ===== zx-grundriss.css — das Grundriss-Plus im Bildmosaik =====
   Michael am 05.10.2026: "Bau das Grundriss Plus in dem unteren Teil der
   Bilder ein, immer wo du Platz hast und es gut aussieht. Und wir machen das
   dunkle Pop-up, wie wir schon erwartet haben."

   Zwei Bausteine, beide an den Entwuerfen schon entschieden:
     - die Marke: Haarlinienkreuz, das Wort rechts daneben auf der Hoehe des
       waagrechten Arms (Fassung T2 aus aufklappen.css)
     - die Karte: dunkelbrauner Grund, Plan als Negativ-Fassung, das gedrehte
       Kreuz wird zum Schliess-X (Fassung K2 aus aufklappen.css)

   Diese Datei bringt beides MIT, sie erbt nichts: zx-mosaik.css ist erzeugt,
   und .mo-f traegt dort overflow:hidden -- die Karte darf darum kein Kind
   einer Kachel sein, sondern ist ein eigenes Rasterfeld.

   Die Plaetze sind an der Seite GEMESSEN (1024 px Fenster, Mosaik 960 px,
   12 Spalten zu 61,7 px, Gasse 20 px):
     mz-5  Zeile 3 traegt nur mo-f4 (x 0-388). Frei bleiben 552 x 388 px
           rechts daneben -- dort steht das Kreuz, ohne dass die Seite waechst.
     mz-4  Zeile 2 ist voll (mo-f2 x 82-470, mo-f3 x 490-878, beide bis zur
           Unterkante). Darum eine eigene Zeile darunter.
     mz-3  Zeile 2 traegt mo-f2 mittig (x 163-796). Links und rechts blieben
           nur 163 px -- zu wenig fuer Kreuz UND Wort. Also auch hier eine
           eigene Zeile, mittig unter dem Bild. */

/* ---- 1. Das Rasterfeld ---- */
/* --gr-pad steht als Variable NEBEN dem padding, nicht statt dessen: die Karte
   wird am .mo-plan ausgerichtet, das summary aber sitzt um genau dieses Mass
   tiefer. Ohne die Variable muesste die Karte raten, wo das Kreuz steht. */
.zx .mo-mosaik .mo-plan{position:relative;z-index:30;margin:0;
  display:flex;align-items:center;justify-content:center;
  --gr-k:clamp(72px,7.4vw,108px);--gr-pad:0px;
  --gr-bild:258px;--gr-polster:40px}
/* 06.10.2026, Michael: "Das gleiche Szenario, mehr rechts, hoeher -- mit den
   Bildern ungefaehr." GEMESSEN bei 1440 px, modern-top: die freie Flaeche
   unter den Bildern reicht ueber die GANZE Satzbreite (x 43 bis 1398), nicht
   nur ueber die halbe. Das Feld lag aber auf den Spalten 1-7, darum stand die
   Marke bei x=375 statt bei 720. Jetzt nimmt das Feld alle zwoelf Spalten,
   und justify-content:center setzt die Marke in die echte Mitte.
   Senkrecht faellt --gr-pad weg: das Polster hatte sie um 46 px nach unten
   gedrueckt (Plus-Mitte 3393 statt 3347). Ohne Polster zentriert
   align-items:center sie im Feld. */
/* 06.10.2026, zweite Fassung. Michael mit zwei Abbildungen: "Das Grundriss-
   kreuz ist nicht richtig in Abbildung eins, in Abbildung zwei ist es richtig."
   Die volle Satzbreite war falsch: das Bild RECHTS daneben ragt in dieselbe
   Rasterzeile hinein, und die Marke landete damit direkt an seiner Kante
   (gemessen an Michaels Abbildung 1: Marke bei x=918, Bildkante bei x=932).
   Die Spalten stehen deshalb wieder so, dass das Feld VOR dem Nachbarbild
   endet; justify-content:center setzt die Marke in dessen Mitte. */
.zx .mz-5 .mo-plan{grid-column:7/13;grid-row:3;align-self:center}
/* Michael am 05.10.2026: "Unter den letzten zwei Bildern, wo mehr Platz ist.
   Wenn das letzte Bild in der Mitte ist, kann es darunter bleiben."
   GEMESSEN je Mosaikform, Unterkante der letzten zwei Bilder und freier Rand:
     mz-5  letzte Bilder rechts (Reihe 2) und LINKS unten (Reihe 3, Spalte 1-6)
           -> frei ist rechts. Plus bleibt 7/13.
     mz-4  beide letzten Bilder enden gleich tief; links bleibt ein freier
           Randstreifen, rechts steht das Bild buendig an der Kante
           -> frei ist LINKS. Plus wandert von 7/13 auf 1/7.
     mz-3  das letzte Bild steht mittig (Spalte 3-11) -> Plus bleibt darunter.
     mz-2  ganze Breite -> bleibt. */
.zx .mz-4 .mo-plan{grid-column:1/7;grid-row:3;--gr-pad:0px}
.zx .mz-3 .mo-plan{grid-column:3/11;grid-row:3;--gr-pad:0px}
.zx .mz-2 .mo-plan{grid-column:1/13;grid-row:2;--gr-pad:0px}

/* ---- 1b. Drei Zimmer tragen das Plus LINKS ---- */
/* Michael am 05.10.2026: "Moechte dass du das Plus auf der linken Seite bei
   folgenden Kategorien machst: modern top, superior, grand superior."
   GEMESSEN vorher bei 1440 px: das summary sass in allen drei Faellen mittig im
   Feld (modern-top und superior bei x=1011, Feldmitte 1064). Die Zimmer haben
   VERSCHIEDENE Mosaikformen (modern-top mz-4, superior mz-5, grand-superior
   mz-3), darum greift keine Form-Regel -- angesprochen wird jedes ueber die ID
   seines <article class="mo-raum">, die im Dokument eindeutig ist. */
/* 06.10.2026, Michael: "Mach das Plus genau in die Mitte, horizontal und
   vertikal, zwischen dem oberen Bild, dem unteren Text und dem rechten Bild.
   Und das machst du dann auch bei allen andern auf der linken Seite."
   Das loest die Vorgabe von gestern ab (Plus linksbuendig). Gemessen bei
   1440 px, modern-top: das Feld reicht von x=43 bis x=708 (rechts beginnt das
   Nachbarbild bei 732), senkrecht vom Bildende y=3247 bis zum Textanfang
   y=3524. Mittig heisst damit x=322 und y=3332 fuer die linke obere Ecke der
   107 px grossen Marke.
   Waagrecht macht das justify-content:center; senkrecht sitzt die Marke schon
   richtig, weil das Feld 164 px hoch ist und --gr-pad sie um die halbe
   Differenz nach unten schiebt. */
#modern-top .mo-mosaik .mo-plan,
#superior .mo-mosaik .mo-plan,
#grand-superior .mo-mosaik .mo-plan{justify-content:center}

/* ---- 2. Die Marke: Kreuz aus zwei Haarlinien, Wort rechts daneben ---- */
/* Das Kreuz ist bewusst gross und bleibt 1 px duenn -- mitwachsende Striche
   waeren fett, und genau die Feinheit ist der ganze Reiz. */
.zx .mo-plan summary{list-style:none;cursor:pointer;display:block;
  position:relative;width:var(--gr-k);height:var(--gr-k);
  transition:transform .62s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan summary::-webkit-details-marker{display:none}
.zx .mo-plan .gr-plus{display:block;position:absolute;inset:0;
  transition:transform .62s cubic-bezier(.23,1,.32,1)}
/* 06.10.2026 ZURUECKGENOMMEN: mix-blend-mode: difference.
   Gedacht war die fliessende Kante -- der Teil ueber der Karte hell, der ueber
   dem Papier dunkel, pixelweise. GEMESSEN am Bildschirm war das Kreuz danach
   WEISS auf hellem Papier, also unsichtbar. Grund: .mo-plan traegt
   position:relative mit z-index und bildet damit einen eigenen Stapelkontext.
   Die Mischung rechnet nur gegen das, was IN diesem Kontext dahinterliegt --
   und das ist nichts. Gegen Nichts ergibt difference mit Weiss wieder Weiss.
   Zwei feste Farben sind hier das Richtige: dunkel auf dem Papier, hell auf
   der Karte. */
.zx .mo-plan .gr-plus::before,
.zx .mo-plan .gr-plus::after{content:"";position:absolute;background:#3D3733;
  transition:background-color .4s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan .gr-plus::before{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}
.zx .mo-plan .gr-plus::after{top:50%;left:0;right:0;height:1px;margin-top:-.5px}
/* T2: das Wort steht rechts vom Kreuz, auf der Hoehe des waagrechten Arms. */
.zx .mo-plan .gr-et{position:absolute;left:100%;top:50%;transform:translateY(-50%);
  margin-left:34px;white-space:nowrap;
  font:400 11px/1 "DM Mono","IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.22em;text-transform:uppercase;color:#6E6862;
  transition:color .3s cubic-bezier(.23,1,.32,1),opacity .34s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan summary:focus-visible{outline:1px solid #3D3733;outline-offset:12px}
@media (hover:hover) and (pointer:fine){
  .zx .mo-plan summary:hover .gr-et{color:#3D3733}
  .zx .mo-plan summary:hover .gr-plus{transform:scale(1.06)}
  .zx .mo-plan[open] summary:hover .gr-plus{transform:rotate(45deg) scale(.26)}
}

/* ---- 3. Geoeffnet: das Kreuz wird zum Schliess-X auf der Karte ---- */
/* Rechnung: die Karte steht mittig unter dem Kreuz, ihre rechte Innenkante
   liegt also --gr-bild/2 + --gr-polster rechts von der Kreuzmitte. Das X soll
   34 px von Rand und Oberkante stehen -- daraus die beiden Masse. An FESTER
   Bildbreite sitzt die Ecke bei allen Zimmern gleich; an fester Hoehe sass sie
   je nach Seitenverhaeltnis zwischen 13 und 495 px (gemessen 05.10.2026). */
/* Michael am 05.10.2026: "Das X mehr rechts und weiter oben, das ist zu weit
   draussen." GEMESSEN war der Grund: die alte Rechnung verschob das summary um
   einen festen Betrag von SEINER Stelle aus -- und die haengt an der Breite des
   summary, nicht an der Karte. Darum landete das X links oben statt in der
   rechten Ecke.
   Jetzt haengt es an der KARTE: -50% setzt das summary auf die Mittelachse der
   Karte (die steht selbst auf left:50% mit -50%), danach geht es um die halbe
   Karteninnenbreite nach rechts und 30 px zurueck. Das Mass stimmt damit bei
   jeder Kartenbreite, ohne neue Zahl. */
.zx .mo-plan[open] summary{z-index:32;position:absolute;left:50%;
  top:calc(var(--gr-pad) + var(--gr-k)/2);
  transform:translateX(calc(-50% + var(--gr-bild)/2 + var(--gr-polster) - 30px))
            translateY(calc(30px - var(--gr-k)/2))}
/* Senkrecht dieselbe Rechnung: das Kreuz ist --gr-k hoch und sitzt mittig
   darin, also muss die halbe Kreuzhoehe abgezogen werden, damit die MITTE des
   X 30 px unter der Kartenkante steht. Ohne den Abzug waren es 79 px
   (gemessen 05.10.2026 bei 1440 px). */
.zx .mo-plan[open] .gr-plus{transform:rotate(135deg) scale(.26)}
.zx .mo-plan[open] .gr-plus::before,
.zx .mo-plan[open] .gr-plus::after{background:#E6DFD2}
.zx .mo-plan[open] .gr-et{opacity:0}

/* ---- 4. Die Karte: dunkler Grund, Plan als Negativ ---- */
/* Sie waechst NACH UNTEN aus dem Kreuz heraus (Michael, 05.10.2026) und
   springt nicht nach oben aus dem Bild. */
/* ---- S2 "Schub", ueberarbeitet am 05.10.2026 ----
   Michael: "bau S2 ein mit einer besseren Motion, Anfang und Ende muessen
   spektakulaerer sein." Gewichtung nach dem Motion-Skill: Seite ist eine
   Marketingseite, ein Gast oeffnet den Grundriss selten -- also darf die
   Bewegung ausdruecklich sein (Jakub primaer, Jhey sekundaer). Emils
   Haeufigkeitsregel greift hier NICHT: sie gilt fuer Dinge, die man hundertmal
   am Tag anfasst.

   Der Auftritt in drei Schritten, nicht in einem:
     1. Die Karte wird VON UNTEN freigegeben (clip-path inset 100% -> 0), aus
        dem Kreuz heraus. Dazu 4 px Unschaerfe, die auf 0 geht -- die Unschaerfe
        verdeckt die Kante der Freigabe, sonst sieht man zwei Dinge gleichzeitig.
     2. Die Karte faehrt dabei 18 px hoch und waechst von 0,985 auf 1.
     3. Der Plan DARIN laeuft langsamer mit (56 px, 120 ms spaeter, laenger).
        Diese Parallaxe ist der ganze Trick: die Karte wirkt wie eine Lade,
        der Plan liegt darin und bleibt kurz zurueck.

   Das Ende ist bewusst KEINE Umkehr in gleicher Laenge: 280 statt 720 ms,
   ohne Unschaerfe, der Plan bewegt sich nur 20 px. Beim Oeffnen schaut man
   hin, beim Schliessen ist man schon weiter.

   Bewegt werden nur transform, opacity, filter und clip-path -- nichts, was
   ein Layout neu rechnet. */
.zx .mo-plan .gr-fach{position:absolute;left:50%;z-index:31;
  top:calc(var(--gr-pad) + var(--gr-k)/2);
  width:max-content;display:block;pointer-events:none;transform-origin:50% 0;
  filter:blur(0px);
  transition:opacity .18s cubic-bezier(.23,1,.32,1),
             transform .28s cubic-bezier(.23,1,.32,1),
             clip-path .28s cubic-bezier(.23,1,.32,1),
             filter .2s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan:not([open]) .gr-fach{opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(10px) scale(.985) rotate(-6deg);
  clip-path:inset(100% 0 0 0)}
.zx .mo-plan[open] .gr-fach{opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1) rotate(0deg);
  clip-path:inset(0 0 0 0);
  transition:opacity .26s cubic-bezier(.23,1,.32,1),
             transform .72s cubic-bezier(.23,1,.32,1),
             clip-path .72s cubic-bezier(.23,1,.32,1),
             filter .44s cubic-bezier(.23,1,.32,1)}
/* Die Unschaerfe nur beim Auftritt, nicht beim Abgang. */
.zx .mo-plan .gr-fach{--gr-weich:0px}
.zx .mo-plan[open] .gr-fach{animation:gr-scharf .54s cubic-bezier(.23,1,.32,1) both}
@keyframes gr-scharf{from{filter:blur(5px)}to{filter:blur(0)}}

/* Der Plan bleibt kurz zurueck -- die Parallaxe, die aus dem Oeffnen eine
   Lade macht statt einer Einblendung. */
.zx .mo-plan .gr-fach img{transform:translateY(20px);
  transition:transform .28s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan[open] .gr-fach img{transform:translateY(0);
  transition:transform .88s cubic-bezier(.23,1,.32,1) .12s}

@media (prefers-reduced-motion:reduce){
  .zx .mo-plan .gr-fach,.zx .mo-plan[open] .gr-fach,
  .zx .mo-plan .gr-fach img,.zx .mo-plan[open] .gr-fach img{
    transition:opacity .18s linear!important;animation:none!important;
    transform:translateX(-50%)!important;clip-path:none!important;filter:none!important}
  .zx .mo-plan[open] .gr-fach img{transform:none!important}
}
.zx .mo-plan .gr-fach > div{background:#35302B;
  padding:34px var(--gr-polster) 30px;border:1px solid rgba(230,223,210,.14);
  box-shadow:0 2px 8px rgba(24,20,17,.22),
             0 20px 56px rgba(24,20,17,.30),
             0 52px 104px rgba(24,20,17,.26)}
.zx .mo-plan .gr-fach img{display:block;margin:0;width:var(--gr-bild);height:auto;
  max-height:64vh;background:none;object-fit:contain}

/* ---- 5. Schmal: das Kreuz steht als eigener Block, das Wort darunter ---- */
@media (max-width:1099px){
  .zx .mo-mosaik .mo-plan{grid-column:1/-1!important;grid-row:auto!important;
    display:block;text-align:center;align-self:auto!important;
    /* 21.10.2026, Michael: "Mach es grosszuegig." Mehr Luft ueber und unter dem Kreuz, Wort weiter darunter. */
    padding-top:clamp(48px,8vw,80px);padding-bottom:clamp(16px,3vw,32px);--gr-k:96px}
  /* summary auf volle Breite: auf Kreuzbreite (84 px) gezwungen brach das
     gesperrte Wort (gemessen 110 px bei .32em Laufweite) aus dem Kasten. */
  .zx .mo-plan summary{width:auto;height:auto;margin:0;transform:none!important}
  .zx .mo-plan .gr-plus{position:relative;inset:auto;margin:0 auto;
    width:var(--gr-k);height:var(--gr-k)}
  .zx .mo-plan .gr-et{position:static;transform:none;margin:22px 0 0;
    display:block;text-align:center;letter-spacing:.32em;opacity:1!important}
  .zx .mo-plan[open] .gr-plus{transform:rotate(135deg) scale(.82)}
  .zx .mo-plan[open] .gr-plus::before,
  .zx .mo-plan[open] .gr-plus::after{background:#3D3733}
  .zx .mo-plan .gr-fach{position:static;transform:none;opacity:1;width:auto;
    display:grid;grid-template-rows:0fr;pointer-events:auto;
    transition:grid-template-rows .6s cubic-bezier(.23,1,.32,1)}
  .zx .mo-plan[open] .gr-fach{grid-template-rows:1fr;transform:none}
  /* Der dunkle Grund bleibt AUCH schmal: der Plan ist die Negativ-Fassung,
     helle Linien auf hellem Papier waeren unsichtbar. */
  .zx .mo-plan .gr-fach > div{overflow:hidden;min-height:0;border:0;
    box-shadow:none;background:#35302B;padding:26px 22px}
  .zx .mo-plan .gr-fach img{width:100%;max-width:300px;margin:0 auto;
    max-height:none}
}

@media (prefers-reduced-motion:reduce){
  .zx .mo-plan summary,.zx .mo-plan .gr-plus,.zx .mo-plan .gr-et,
  .zx .mo-plan .gr-fach,.zx .mo-plan .gr-fach img{transition-duration:1ms!important}
}

/* ═══════════════ S2: Mitlaufendes Etikett ═══════════════ */
/* Michael am 05.10.2026, nach den drei Entwuerfen in schliessen-vorschau.html:
   "Und S2 einbauen." Das Kreuz in der Ecke faellt weg; stattdessen traegt der
   Mauszeiger selbst die Beschriftung, solange er auf dem Dunkel liegt.
   Begruendung aus dem Entwurf: die Anweisung steht damit genau dort, wo der
   Blick ohnehin ist -- und nirgends sonst. Geschlossen wird weiterhin im
   GANZEN dunklen Bereich, auch auf dem Plan selbst. */

/* Das X verschwindet. Die Marke im geschlossenen Zustand (Kreuz + "Grundriss")
   bleibt unberuehrt -- sie ist der GRIFF zum Oeffnen, nicht zum Schliessen. */
.zx .mo-plan[open] summary{opacity:0;pointer-events:none}

/* Der eigene Zeiger faellt weg, das Schild tritt an seine Stelle. Nur auf
   Geraeten mit echtem Zeiger: ohne Maus gaebe es nichts, was mitlaufen koennte. */
.zx .mo-plan[open] .gr-fach{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .zx .mo-plan[open] .gr-fach{cursor:none}
}
.zx .gr-schild{position:absolute;left:0;top:0;z-index:33;
  margin:14px 0 0 16px;padding:7px 12px;
  background:#E6DFD2;color:#35302B;
  font:400 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.26em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .22s ease;will-change:transform}
.zx .mo-plan[open] .gr-fach:hover .gr-schild{opacity:1}
/* Ueber der Zeichnung tritt das Schild zurueck, statt ganz zu verschwinden --
   sonst sieht es aus, als waere der Plan nicht mehr klickbar. Er ist es. */
/* Dieselbe Spezifitaet wie die :hover-Regel darueber -- mit nur einer Klasse
   gewinnt die staerkere Regel und das Schild bliebe auf dem Plan voll da
   (gemessen 05.10.2026: opacity 1 statt .28). */
.zx .mo-plan[open] .gr-fach:hover .gr-schild.leise{opacity:.28}

/* Ohne Zeiger (Telefon, Tablet) steht das Schild fest in der Ecke: ein Entwurf,
   der nur im Hover existiert, ist dort kein Entwurf. */
@media (hover:none),(pointer:coarse){
  .zx .gr-schild{opacity:1;left:auto;right:0;top:auto;bottom:0;
    margin:0 16px 16px 0;transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .zx .gr-schild{transition-duration:1ms}
}


/* 06.10.2026, Michael: "Grundriss von Huettensuite fast doppelt so gross."
   Der Plan der Huettensuite liegt quer (2660 x 990 px) -- bei der einheitlichen
   Planbreite von 258 px wurde die Karte nur 162 px hoch und der Grundriss
   verschwand darin. 480 px sind das 1,86-fache; die Karte waechst mit, weil
   sie sich nach dem Bild richtet. Nur dieses eine Zimmer. */
#huetten-suite .mo-mosaik .mo-plan{--gr-bild:480px}
#modern-nord .mo-mosaik .mo-plan{--gr-bild:480px}

/* 06.10.2026, Michael: "Vergroessere den Grundriss der Maisonette Suite auf
   das Doppelte." 258 x 2 = 516 px. Der Plan steht hochkant (1780 x 1970),
   bei 516 px Breite wird er 571 px hoch -- das liegt ueber der sonst
   geltenden Deckelung von 64vh (576 px erst ab 900 px Fensterhoehe). Damit
   die Verdopplung auch auf niedrigeren Fenstern ankommt, steht die Deckelung
   fuer dieses eine Zimmer auf 82vh. Die Karte waechst mit dem Bild. */
#maisonette-suite .mo-mosaik .mo-plan{--gr-bild:516px}
#maisonette-suite .mo-mosaik .mo-plan .gr-fach img{max-height:82vh}

/* ═══════════════ Die Karte steht MITTEN IM FENSTER ═══════════════ */
/* Michael am 06.10.2026, siehe aufklappen.css: die Karte haengt am FENSTER,
   nicht am Satz. Damit steht sie immer mittig, und die Seite muss sich nicht
   bewegen. Die Bewegung ist dieselbe: 44 px von unten, 2,5 Grad Drehung,
   aus 92 % Groesse, cubic-bezier(.23,1,.32,1). */
.zx .mo-plan .gr-fach{position:fixed;left:50%;top:50%;z-index:60;
  width:max-content;max-width:min(92vw,620px);
  transform-origin:50% 100%;
  transform:translate(-50%,calc(-50% + 72px)) scale(.9);
  opacity:0;clip-path:none;filter:none;
  transition:opacity .3s cubic-bezier(.23,1,.32,1),
             transform .56s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan:not([open]) .gr-fach{opacity:0;pointer-events:none;
  transform:translate(-50%,calc(-50% + 72px)) scale(.9);
  clip-path:none}
.zx .mo-plan[open] .gr-fach{opacity:1;pointer-events:auto;clip-path:none;
  transform:translate(-50%,-50%) scale(1) rotate(0deg);animation:none;
  transition:opacity .3s cubic-bezier(.23,1,.32,1),
             transform .56s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan[open] .gr-fach img{transform:none}

@media (prefers-reduced-motion:reduce){
  .zx .mo-plan .gr-fach,.zx .mo-plan[open] .gr-fach{
    transform:translate(-50%,-50%) scale(1) rotate(0deg);
    transition:opacity .2s ease}
}

/* DER STARTZUSTAND. Gemessen 06.10.2026: die Karte sprang ohne jede Bewegung
   auf ihren Endwert (transform schon nach 60 ms final). Grund: <details> haelt
   seinen Inhalt geschlossen zurueck -- es gibt keinen gerenderten Anfangswert,
   von dem aus der Browser ueberblenden koennte. @starting-style liefert genau
   diesen Anfangswert und ist fuer diesen Fall gemacht. */
.zx .mo-plan[open] .gr-fach{
  @starting-style{
    opacity:0;
    transform:translate(-50%,calc(-50% + 72px)) scale(.9);
  }
}

/* ═══════════════ Modern Top: das Kreuz oben rechts ═══════════════ */
/* Michael am 06.10.2026 mit zwei Abbildungen: "Bei Modern Top soll das Kreuz
   nicht in Abbildung eins, sondern in der Mitte von Abbildung zwei stehen."
   GEMESSEN im Mosaik von modern-top bei 1440 px (Masse relativ zum Blockanfang):
     Bild 1   x  43-823   y    0- 976
     Bild 2   x 847-1397  y  565- 932   <- darueber liegt die freie Flaeche
     Bild 3   x 157-708   y 1010-1808
     Bild 4   x 732-1283  y 1073-1808
     Kreuz    x  43-708   y 1842-1949   (Abbildung eins -- so war es)
   Die freie Flaeche aus Abbildung zwei ist also x 847-1397, y 0-565. Ihre Mitte
   liegt bei x=1122, y=282.
   Das Kreuz zieht deshalb in die ERSTE Zeile auf die Spalten 8-12. Die Hoehe
   von 58 % der Zeile (975 px) ergibt mit align-items:center genau 283 px --
   als Anteil statt als fester Wert, damit es bei jeder Fensterbreite stimmt. */
/* 06.10.2026, zweiter Schritt. Michael: "Mach das jetzt bei allen Kategorien.
   Grundriss-Kreuz immer an die rechte Stelle neben dem grossen Header-Bild."
   GEMESSEN ueber alle zehn Zimmer: die erste Mosaikzeile ist ueberall gleich
   gebaut -- grosses Bild auf den Spalten 1-8, kleines Bild auf 8-13, und das
   kleine sitzt unten in seiner Zelle. Die freie Flaeche darueber ist damit in
   jedem Zimmer dieselbe (x 804-1355, y 0-565 bei 1440 px). Eine Regel genuegt,
   keine je Zimmer. */
.zx .mo-mosaik .mo-plan{grid-column:8/13;grid-row:1;
  align-self:start;height:58%;justify-content:center}

/* Eine Ausnahme: bei superior-garden ist das kleine Bild der Zeile seit dem
   06.10.2026 um 30 % hoeher (der gelbe Sessel, aspect-ratio 15/13 statt 3/2).
   Die freie Flaeche darueber ist dadurch kuerzer -- gemessen endet sie bei
   y=456 statt 565, die Mitte liegt bei 228. 456/975,5 = 46,8 % der Zeile.
   Ohne diesen Wert stuende das Kreuz dort 55 px zu tief. */
#superior-garden .mo-mosaik .mo-plan{height:46.8%}

/* ═══════════════ Waagrecht ueber dem Kreuz, senkrecht in der Fenstermitte ═══
   Michael am 06.10.2026: "Ich moechte, dass der Grundriss in der Mitte --
   horizontal gesehen vom Point of View -- ist. Aber nicht in der Mitte des
   Bildes. Es soll schon ueber dem Kreuz des Grundrisses sein. Nicht dann, wenn
   es rechts draussen ist, in die Mitte springen. In der Mitte gesehen zwischen
   oben und unten, aber nicht in der Mitte zwischen rechts und links."

   Also: top bleibt die halbe FENSTERhoehe, left folgt dem Kreuz. Die Stelle
   setzt das Skript als --gr-x, weil CSS die Lage des Kreuzes nicht kennt; dort
   wird sie auch schon an den Fensterrand geklemmt, damit die Karte nie
   hinausragt. Ohne gesetzte Variable faellt sie auf die Fenstermitte zurueck. */
.zx .mo-plan .gr-fach{left:var(--gr-x,50vw)}

/* Das Blatt ausserhalb der Karte: unsichtbar, aber greifbar. Es liegt UNTER
   der Karte (z-index 59 gegen 60), damit der Plan selbst anklickbar bleibt,
   und traegt dasselbe mitlaufende Schild. */
.gr-aussen{position:fixed;inset:0;z-index:59;display:none;
  background:transparent;cursor:pointer}
body.gr-offen .gr-aussen{display:block}
@media (hover:hover) and (pointer:fine){
  body.gr-offen .gr-aussen{cursor:none}
}
.gr-aussen .gr-schild{opacity:0}
.gr-aussen:hover .gr-schild{opacity:1}
@media (hover:none),(pointer:coarse){
  .gr-aussen .gr-schild{opacity:1}
}

/* ═══════════════ Die Bewegung, verstaerkt und in beide Richtungen ═══════════
   Michael am 06.10.2026: "Die Animation ist gut, dass zuerst der schwarze
   Hintergrund reindreht und danach erst der Strich. Koennen wir diesen Effekt
   ein kleines bisschen verstaerken. Aber auch beim Zuklappen einen schoenen
   Effekt machen."

   AUFGEHEN -- zwei Stufen:
     1. Die dunkle Flaeche faehrt 64 px herauf, aus 88 % Groesse und 4 Grad
        Drehung (vorher 44 px / 92 % / 2,5 Grad). Dauer 620 ms.
     2. Der PLAN folgt erst danach: 200 ms spaeter, mit eigener kleiner Fahrt
        von 14 px und 96 % Groesse. Dadurch liest man zuerst die Karte, dann
        die Zeichnung -- genau der Effekt, den Michael gut fand.
   ZUGEHEN -- umgekehrt und kuerzer:
     1. Der Plan geht zuerst weg (180 ms).
     2. Die Flaeche faehrt zurueck nach unten, dreht gegen die Oeffnungs-
        richtung. Erst danach faellt das <details> zu (420 ms, siehe
        ZU_DAUER in grundriss-karte.js).
   Kurve durchgehend cubic-bezier(.23,1,.32,1): schnell los, weich aus, nie
   ease-in. Drehpunkt unten, damit die Karte um den Punkt dreht, aus dem sie
   kommt. */
.zx .mo-plan .gr-fach{transform-origin:50% 100%;
  transform:translate(-50%,calc(-50% + 72px)) scale(.9);
  transition:opacity .34s cubic-bezier(.23,1,.32,1),
             transform .62s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan[open] .gr-fach{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
.zx .mo-plan[open] .gr-fach{
  @starting-style{
    opacity:0;
    transform:translate(-50%,calc(-50% + 72px)) scale(.9);
  }
}

/* Der Plan kommt nach der Flaeche. */
.zx .mo-plan .gr-fach img{opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .42s cubic-bezier(.23,1,.32,1) .2s,
             transform .54s cubic-bezier(.23,1,.32,1) .2s}
.zx .mo-plan[open] .gr-fach img{opacity:1;transform:none}
.zx .mo-plan[open] .gr-fach img{
  @starting-style{opacity:0;transform:translateY(14px) scale(.96);}
}

/* Zugehen: erst der Plan, dann die Flaeche -- in die Gegenrichtung gedreht. */
.zx .mo-plan.gr-zu[open] .gr-fach{opacity:0;
  transform:translate(-50%,calc(-50% + 72px)) scale(.9);
  transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,
             transform .42s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan.gr-zu[open] .gr-fach img{opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .18s ease,transform .24s cubic-bezier(.23,1,.32,1)}

@media (prefers-reduced-motion:reduce){
  .zx .mo-plan .gr-fach,.zx .mo-plan[open] .gr-fach,.zx .mo-plan.gr-zu[open] .gr-fach{transform:translate(-50%,-50%);
    transition:opacity .2s ease}
  .zx .mo-plan .gr-fach img,.zx .mo-plan[open] .gr-fach img,.zx .mo-plan.gr-zu[open] .gr-fach img{transform:none;transition:opacity .2s ease}
}

/* Die Ebenen neu geordnet. GEMESSEN 06.10.2026: die Kopfzeile liegt auf
   z-index 60, der Vorlagenschalter auf 120 -- das Blatt auf 59 lag darunter,
   und auf dem Kopf liess sich nicht schliessen. Jetzt:
     Blatt  200   faengt jeden Klick neben der Karte
     Karte  201   liegt darueber, der Plan bleibt anklickbar
   Beides bleibt unter dem Chatfenster (9992). */
.gr-aussen{z-index:200}
.zx .mo-plan .gr-fach{z-index:201}



/* ═══════════════ Gerade herauf, und der Zeiger wird zum X ═══════════════
   Michael am 06.10.2026: "Das Popup soll gerade aufgehen, nicht so reindrehen.
   Das Reindrehen schaut nicht so elegant aus. Es soll schon eine Bewegung
   sein, am besten von unten herauf. Und statt Schliessen koennen wir ein
   grosses X haben -- der Cursor kann ruhig zum X werden, dann brauchen wir es
   nicht in Englisch umzubauen."

   Also:
     * keine Drehung mehr, nur noch gerade von unten herauf
     * 72 px Weg statt 64, damit die Bewegung ohne Drehung trotzdem traegt
     * der Mauszeiger ist ein X: hell auf der dunklen Karte, dunkel daneben.
       Damit faellt das Wort "Schliessen" weg und es gibt nichts zu uebersetzen. */
.zx .mo-plan .gr-fach{transform-origin:50% 100%;
  transform:translate(-50%,calc(-50% + 72px)) scale(.9);
  transition:opacity .34s cubic-bezier(.23,1,.32,1),
             transform .6s cubic-bezier(.23,1,.32,1)}
.zx .mo-plan[open] .gr-fach{transform:translate(-50%,-50%) scale(1)}
.zx .mo-plan[open] .gr-fach{
  @starting-style{opacity:0;transform:translate(-50%,calc(-50% + 72px)) scale(.9);}
}
.zx .mo-plan.gr-zu[open] .gr-fach{opacity:0;transform:translate(-50%,calc(-50% + 80px)) scale(.94);
  transition:opacity .3s cubic-bezier(.23,1,.32,1) .08s,
             transform .42s cubic-bezier(.23,1,.32,1)}

/* Der Zeiger. 16 16 ist die Mitte des 32er Bildes, damit das X genau unter dem
   Punkt sitzt, auf den man zeigt. */
@media (hover:hover) and (pointer:fine){
  .zx .mo-plan[open] .gr-fach{cursor:url("/zimmer-preise/grundrisse/x-hell.svg") 16 16, pointer}
  body.gr-offen .gr-aussen{cursor:url("/zimmer-preise/grundrisse/x-dunkel.svg") 16 16, pointer}
}
/* Das Schild faellt weg -- das X sagt dasselbe ohne Sprache. */
.gr-schild{display:none}

@media (prefers-reduced-motion:reduce){
  .zx .mo-plan .gr-fach,.zx .mo-plan[open] .gr-fach,.zx .mo-plan.gr-zu[open] .gr-fach{transform:translate(-50%,-50%);
    transition:opacity .2s ease}
}

/* ═══════════════ Das X: so gross wie das Plus, nur gedreht ═══════════════
   Michael am 06.10.2026: "Das X soll gleich gross sein wie das Plus, nur
   natuerlich verdreht als X." GEMESSEN am Plus der Seite: 107 x 107 px,
   Haarlinie 1 px, Farbe #3D3733 -- dieselben Werte stehen hier, die Groesse
   kommt aus derselben Variablen (--gr-k). Gedreht wird um 45 Grad.
   Kein Mauszeiger-BILD: Browser nehmen dafuer hoechstens 128 px, viele lehnen
   schon ab 32 px ab. Ein echtes Element, das dem Zeiger folgt, ist in dieser
   Groesse der einzige verlaessliche Weg. */
.gr-x{position:absolute;left:0;top:0;z-index:40;pointer-events:none;
  width:var(--gr-k,107px);height:var(--gr-k,107px);
  margin:calc(var(--gr-k,107px) / -2) 0 0 calc(var(--gr-k,107px) / -2);
  opacity:0;transition:opacity .22s ease;will-change:transform}
.gr-x::before,.gr-x::after{content:"";position:absolute;background:#3D3733}
.gr-x::before{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}
.gr-x::after{top:50%;left:0;right:0;height:1px;margin-top:-.5px}
.gr-x{transform-origin:50% 50%}
/* Hell auf der dunklen Karte. */
.gr-x-hell::before,.gr-x-hell::after{background:#E6DFD2}

.zx .mo-plan[open] .gr-fach:hover .gr-x{opacity:1}
body.gr-offen .gr-aussen:hover .gr-x{opacity:1}

/* Der eigene Zeiger faellt weg, das X tritt an seine Stelle. */
@media (hover:hover) and (pointer:fine){
  .zx .mo-plan[open] .gr-fach{cursor:none}
  body.gr-offen .gr-aussen{cursor:none}
}
/* Ohne Maus gibt es nichts, was mitlaufen koennte -- dort bleibt der Zeiger. */
@media (hover:none),(pointer:coarse){
  .gr-x{display:none}
  .zx .mo-plan[open] .gr-fach,body.gr-offen .gr-aussen{cursor:pointer}
}

/* Die offene Falte kommt ueber das Blatt. GEMESSEN 06.10.2026: an der Stelle
   der Karte lag trotz z-index 201 gegen 200 das Blatt (elementFromPoint gab
   "gr-aussen"). Grund: die Karte steckt im Stapelkontext des Mosaiks, ihr
   z-index gilt nur INNERHALB davon -- das Blatt haengt dagegen am body. Also
   muss der ganze Kontext hoch, nicht die Karte allein. */
.zx .mo-plan[open]{position:relative;z-index:210}


/* ═══════════════ Die Karte scrollt mit (08.10.2026) ═══════════════
   Michael: "Bei Zimmer und Preise den Grundriss nicht ankleben. Wenn ich
   Holzkohle bleibt offen und geht dann beim Scrollen verschwindet er oben
   ganz normal wie alle anderen Bilder auch." Bisher fixed am Fenster, jetzt
   absolute an der Falte (.mo-plan ist position:relative). Lage setzt
   grundriss-karte.js beim Oeffnen als --gr-x und --gr-y. */
.zx .mo-plan .gr-fach{position:absolute;left:var(--gr-x,50%);top:var(--gr-y,50%)}

/* ═══════════════ Knopffarben getauscht (08.10.2026) ═══════════════
   Michael: "Auf der rechten Seite kommt der braune Button und auf der linken
   Seite der helle. Die Schrift bleibt gleich." Links bleibt "Verfuegbarkeit
   pruefen" (.mo-knopf), rechts "Fotos und Details" (.mo-mehr), nur die Farben
   wechseln. Eigene Regel hier, weil zx-mosaik.css erzeugt wird. */
.zx .mo-knopf{background:transparent;border:1px solid var(--linie);color:var(--grau)}
.zx .mo-mehr{background:var(--tinte);border:0;color:var(--grund)}
@media (hover:hover) and (pointer:fine){
  .zx .mo-knopf:hover{background:rgba(61,55,51,.035);border-color:var(--tinte);color:var(--tinte);
    box-shadow:none;transform:translateY(-1px)}
  .zx .mo-mehr:hover{background:#2C2724;color:var(--grund);border-color:transparent;
    box-shadow:0 14px 34px rgba(61,55,51,.18);transform:translateY(-1px)}
}

/* Hochformat im Querformat-Feld (08.10.2026): traditionell-sued-6 ist 2:3, das
   Feld mo-f1 liegt quer. Mitte waere das Buch oben angeschnitten. */
.zx .mo-f img[src$="traditionell-sued-6.jpg"]{object-position:50% 30%}

/* Modern Nord (08.10.2026): der Zuschnitt aus Michaels Bild eins ist 3:2, das
   Feld mo-f2 sonst 4:3 -- sonst fehlt links und rechts ein Stueck des Ausschnitts. */
.zx #modern-nord .mo-f2,.zx #modern-nord .mo-f2 img{aspect-ratio:3/2}

/* Michael am 11.10.2026: der blaue Browser-Fokusrahmen um "Vollbild und Details"
   ("Bauernbalken") fliegt raus. Tastaturfokus bleibt sichtbar, aber leise:
   der Rand wird tintenfarben, wie beim Ueberfahren. */
.zx .mo-knopf:focus,.zx .mo-mehr:focus{outline:none}
.zx .mo-knopf:focus-visible{border-color:var(--tinte);color:var(--tinte)}

/* Michael am 11.10.2026: "Bei allen Breakpoints zwei Button." Auch am Telefon
   stehen die Knoepfe nebeneinander; die Schrift wird enger, der Text darf
   zweizeilig umbrechen. */
@media (max-width:809px){
  .zx .mo-wege{grid-template-columns:1fr 1fr;row-gap:0;column-gap:10px}
  .zx .mo-knopf,.zx .mo-mehr{padding:14px 8px;min-height:56px;font-size:11px;
    letter-spacing:.1em;line-height:1.35}
}



/* 25.10.2026, Michael: "Bei Desktop sieht man das X am Mauszeiger, am Handy und Tablet nicht. Dort ein X rechts oben." */
.zx .mo-plan .gr-fach > div{position:relative}
.gr-zubtn{display:none}
@media (max-width:1199px),(hover:none),(pointer:coarse){
  .zx .mo-plan .gr-fach .gr-zubtn{display:grid;place-items:center;position:absolute;top:6px;right:6px;z-index:5;width:48px;height:48px;padding:0;
    background:none;border:0;border-radius:0;color:#F3EEE7;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .zx .mo-plan .gr-fach .gr-zubtn svg{width:20px;height:20px;display:block}
}

/* === /zimmer-preise/zimmer-mobil.css === */
/* Michael am 11.10.2026, Seite /zimmer-preise/zimmer/ (Mobil und Tablet):
   "Mach die 23 Quadrat vertikal in der gleichen Linie zu Ausstattung" und
   "Mach den Strich etwas heller". Gemessen bei 900 px: Groesse stand bei
   x=427, Ausstattung bei x=466. Die Fakten ruecken in die zweite Spalte der
   Textzeile (halbe Breite plus halbe Gasse), dort beginnt auch Ausstattung. */
@media (min-width:810px) and (max-width:1199px){
  /* Michael am 11.10.2026: Groesse bleibt an ihrer Stelle (Spalte von Ausstattung),
     die Personenzahl rueckt in die Mitte dieses Blocks, die beiden weiter auseinander. */
  html body .zpm .raum.g2.m2 .tb .fakt{display:grid!important;grid-template-columns:1fr 1fr!important;
    column-gap:24px;margin-left:calc(50% + 16px)!important;width:calc(50% - 16px)!important}
  html body .zpm .raum.g2.m2 .tb .fakt>div{grid-column:auto!important;grid-row:1!important;min-width:0;justify-self:start!important;text-align:left!important;align-items:flex-start!important}
  html body .zpm .raum.g2.m2 .tb .fakt dt,html body .zpm .raum.g2.m2 .tb .fakt dd{text-align:left!important;justify-self:start!important}
}
.zpm .raum.g2.m2 .tb .linie{border-top-color:rgba(61,55,51,.22)}

/* === /zimmer-preise/heft-mobil.css === */
/* Mobil-Fassung (bis 809 px), 11.10.2026, aus der Vorschau freigegeben. Zimmerblock am Handy (bis 809 px) im Stil eines
   Designmagazins: grosser Name, Zaehler oben rechts, Fakten zwischen zwei
   Linien, grosser Leitsatz, dann Etiketten links und Werte rechts mit feinen
   Trennlinien. Idee aus dem Entwurf des anderen Modells; Schriften sind die
   des Hauses (Cormorant Garamond, Abhaya Libre, DM Mono), keine Fremdschrift. */
@media (max-width:809px){
  html body .zpm{counter-reset:zi !important}
  html body .zpm .raum .modul{counter-increment:zi !important}
  html body .zpm .raum.g2.m2.v1 .tb{position:relative !important;display:flex !important;flex-direction:column !important;gap:0 !important;padding:8px 40px 0 45px !important}
  html body .zpm .raum.g2.m2.v1 .tb>*{order:5 !important}
  html body .zpm .raum.g2.m2.v1 .tb h2{order:1 !important;margin:0 !important;padding:30px 0 36px 0!important;border-bottom:1px solid rgba(61,55,51,.14) !important;font:300 clamp(32px,9.6vw,38px)/1.05 "Cormorant Garamond",Georgia,serif !important;letter-spacing:-.005em !important;color:var(--tinte) !important}
  /* Fakten: zwei Spalten, Etikett klein, Wert gross in Mono */
  html body .zpm .raum.g2.m2.v1 .tb .fakt{order:2 !important;row-gap:0 !important;grid-template-rows:auto !important;display:grid!important;grid-template-columns:1fr 1fr !important;column-gap:16px !important;margin:0 !important;padding:26px 0 24px !important;border-bottom:1px solid rgba(61,55,51,.14) !important}
  html body .zpm .raum.g2.m2.v1 .tb .fakt>div{grid-row:1 !important;margin:0 !important;grid-column:auto!important;display:flex !important;flex-direction:column !important;gap:12px !important}
  html body .zpm .raum.g2.m2.v1 .tb .fakt dt{font:400 11px/1 "DM Mono",ui-monospace,monospace !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--grau) !important}
  html body .zpm .raum.g2.m2.v1 .tb .fakt dd{margin:0 !important;font:400 19px/1.1 "DM Mono",ui-monospace,monospace !important;color:var(--text) !important}
  /* die alte Linie ist durch die zwei Rahmenlinien ersetzt */
  html body .zpm .raum.g2.m2.v1 .tb .linie{display:none !important}
  /* Leitsatz gross, die Erklaerung darunter ruhig */
  html body .zpm .raum.g2.m2.v1 .tb .lead{order:3 !important;margin:0 !important;padding:28px 0 14px!important;max-width:15em!important;font:300 clamp(22px,6.6vw,26px)/1.28 "Cormorant Garamond",Georgia,serif !important;color:var(--tinte) !important;text-wrap:balance !important}
  html body .zpm .raum.g2.m2.v1 .tb .erklaer{order:4 !important;margin:0 !important;padding:12px 0 30px !important;font:400 17px/1.65 "Abhaya Libre",Georgia,serif !important;color:var(--text) !important}
  /* Etiketten links, Werte rechts, feine Linien dazwischen */
  html body .zpm .raum.g2.m2.v1 .tb .kat{order:5 !important;display:block!important;margin:0 !important;padding:0 !important;border-top:1px solid rgba(61,55,51,.14) !important}
  html body .zpm .raum.g2.m2.v1 .tb .kat>div{display:grid !important;grid-template-columns:96px 1fr !important;column-gap:36px !important;align-items:start !important;padding:22px 0 !important;border-top:0 !important;border-bottom:0 !important}
  html body .zpm .raum.g2.m2.v1 .tb .kat>div:last-child{border-bottom:0 !important}
  html body .zpm .raum.g2.m2.v1 .tb .kat dt{grid-column:1!important;padding-top:5px !important;font:400 11px/1.4 "DM Mono",ui-monospace,monospace !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:var(--grau) !important;min-width:0 !important;-webkit-hyphens:manual !important;hyphens:manual !important;overflow-wrap:break-word !important}   /* 25.10.2026 Michael: lange Woerter (nl Voorzieningen) frueher trennen, an der Stelle der Sprachregel (weiches Trennzeichen im Woerterbuch). Auf dem iPhone setzte hyphens:auto die Trennung zu spaet (VOORZIENIN-/GEN). */
  html body .zpm .raum.g2.m2.v1 .tb .kat dd{grid-column:2!important;margin:0 !important;font:400 16px/1.55 "Abhaya Libre",Georgia,serif !important;color:var(--tinte) !important;max-width:21em !important}
  html body .zpm .raum.g2.m2.v1 .tb .cta{order:6 !important;margin-top:32px !important}
  html body .zpm .raum.g2.m2.v1 .tb .dv-d{order:7 !important}
}

/* Grundriss in der Zimmerkarte (25.10.2026, Michael: "Baue jetzt die Grundrisse ein, in allen Sprachen"):
   Knopf "+ Grundriss", darunter faltet die dunkle Karte auf; X rechts oben, mindestens 44 px gross. */
.raum-plan{margin:18px 0 6px;grid-column:1/-1}
.raum-plan>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:44px;color:#3D3733}
.raum-plan>summary::-webkit-details-marker{display:none}
.raum-plan .rp-plus{position:relative;width:18px;height:18px;flex:none}
.raum-plan .rp-plus::before,.raum-plan .rp-plus::after{content:"";position:absolute;background:currentColor;left:0;top:8px;width:18px;height:1.5px}
.raum-plan .rp-plus::after{transform:rotate(90deg);transition:transform .3s ease}
.raum-plan[open] .rp-plus::after{transform:rotate(0)}
.raum-plan .rp-et{font:400 13px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase}
.raum-plan .rp-karte{position:relative;margin-top:12px;background:#35302B;padding:56px 20px 28px;box-shadow:0 2px 8px rgba(24,20,17,.2),0 16px 40px rgba(24,20,17,.22)}
.raum-plan .rp-karte img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 190px);background:none!important;object-fit:contain}
.raum-plan .rp-zu{position:absolute;top:4px;right:4px;width:48px;height:48px;display:grid;place-items:center;padding:0;background:none;border:0;border-radius:0;color:#F3EEE7;cursor:pointer;-webkit-tap-highlight-color:transparent}
.raum-plan .rp-zu svg{width:20px;height:20px;display:block}

/* 31.10.2026 Michael: Tablet, Grundriss UEBER "Bilder und Details", linksbuendig mit der Detailspalte (Haartrockner usw.). Zurueck: .vor-tablet-grundriss-31102026 */
@media (min-width:810px) and (max-width:1199px){html body .zpm .raum .tb>details.raum-plan{grid-column:2!important;grid-row:4!important;margin-top:0!important}html body .zpm .raum .tb>.cta{grid-row:5!important}}

/* === /leben.css === */
/* Das Leben der Seite: EINE Bewegungssprache fuer alle Seiten.
   Michael 11.10.2026: "Jede Seite soll die gleiche Bildanimation, die gleiche
   Schriftanimation und die gleiche Linkanimation haben. Die Linkanimationen
   spektakulaer. Das Glas-Objektiv. Bei den Bildern auch eine Motion."

   Drei Bausteine, alle an html.js und an echtem Zeigen gebunden:
   1. LINK    Glastropfen: eine Glasflaeche breitet sich von der Stelle aus,
              an der der Zeiger eintrat, und zieht sich zu der Stelle zurueck,
              an der er ging. Lichtfleck folgt dem Zeiger, die Linie zeichnet.
   2. BILD    langsame Tiefe beim Scrollen (Parallaxe ueber die Eigenschaft
              translate, getrennt vom Eintritt E1, der transform nimmt) und
              eine Glaslinse, die dem Zeiger folgt und das Bild darunter
              leicht bricht.
   3. SEITE   weicher Uebergang zwischen den Seiten, Kopf und Buchungsleiste
              bleiben stehen.

   Eintritt von Schrift (T2) und Bild (E1) liegt weiter in eintritt-home.css.
   Hier steht nur, was dazukommt. Alles faellt weg bei
   prefers-reduced-motion, und die Zeiger-Effekte nur dort, wo es einen
   Zeiger gibt (hover: hover). Am Handy bleibt: Druckblitz beim Tippen,
   Tiefe beim Scrollen, Seitenuebergang. */

:root {
  --gl-aus: cubic-bezier(.23,1,.32,1);
  --gl-sanft: cubic-bezier(.77,0,.175,1);
}

/* ---------- 3. Seitenuebergang ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kopf { view-transition-name: gl-kopf; }
  .klebeleiste { view-transition-name: gl-leiste; }
  ::view-transition-group(root) { animation-duration: 420ms; animation-timing-function: var(--gl-aus); }
  ::view-transition-old(root) { animation: gl-raus 240ms var(--gl-sanft) both; }
  ::view-transition-new(root) { animation: gl-rein 420ms var(--gl-aus) both; }
  ::view-transition-group(gl-kopf), ::view-transition-group(gl-leiste) { animation-duration: 0s; }
  @keyframes gl-raus { to { opacity: 0; filter: blur(6px); } }
  @keyframes gl-rein { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } }
}

/* ---------- 1. Links ---------- */
/* Das Skript haengt data-gl an jede Verweisflaeche und setzt zwei Kinder
   hinein: .gl-glas (die Flaeche) und .gl-linie (die Zeichnung). Beide liegen
   ausser der Reihe (absolute) und aendern kein Mass. */
/* position setzt das Skript NUR, wenn der Verweis noch 'static' ist: ein Verweis, der
   schon absolut oder klebend steht (Kartenverweise), darf nicht umgestellt werden. */
html.gl [data-gl] { isolation: isolate; -webkit-tap-highlight-color: transparent; }
html.gl [data-gl] > .gl-glas, html.gl [data-gl] > .gl-linie { position: absolute; pointer-events: none; }

html.gl [data-gl="text"] { text-decoration: none; }
html.gl [data-gl="text"] > .gl-glas {
  inset: -.22em -.62em; z-index: -1;
  background:
    radial-gradient(120px 70px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.34));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 1px 0 rgba(255,255,255,.95), 0 14px 30px -12px rgba(61,55,51,.38);
  clip-path: circle(0 at var(--mx, 50%) var(--my, 50%));
  /* Der Weichzeichner haengt NUR am aktiven Verweis (66 Glasflaechen mit
     dauerhaftem backdrop-filter kosten beim Scrollen), und er bleibt noch so
     lange stehen, wie sich die Flaeche zurueckzieht. */
  transition: clip-path 620ms var(--gl-aus), backdrop-filter 0s 640ms, -webkit-backdrop-filter 0s 640ms;
}
html.gl [data-gl="text"]:hover > .gl-glas, html.gl [data-gl="text"].gl-an > .gl-glas, html.gl [data-gl="text"]:active > .gl-glas, html.gl [data-gl="text"]:focus-visible > .gl-glas {
  -webkit-backdrop-filter: blur(7px) saturate(1.5); backdrop-filter: blur(7px) saturate(1.5);
  transition: clip-path 620ms var(--gl-aus), backdrop-filter 0s, -webkit-backdrop-filter 0s;
}
html.gl [data-gl="text"] > .gl-linie {
  left: 0; right: 0; bottom: -.12em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: var(--seite, left) center;
  transition: transform 520ms var(--gl-aus);
}

/* Die Lichtkante: ein heller Bogen laeuft einmal um den Rand der Glasflaeche
   (dieselbe Zeichnung wie "Glas B Lichtkante" beim Kiesel, 19.09.2026). */
@property --gl-w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html.gl [data-gl] > .gl-glas::before {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; opacity: 0;
  background: conic-gradient(from var(--gl-w), rgba(255,255,255,0) 0 55%, rgba(255,255,255,.95) 78%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html.gl [data-gl="knopf"] > .gl-glas::before {
  background: conic-gradient(from var(--gl-w), rgba(255,255,255,0) 0 55%, rgba(255,255,255,.85) 78%, rgba(255,255,255,0) 100%);
}
@keyframes gl-lauf { from { --gl-w: 0deg; opacity: 1; } 85% { opacity: 1; } to { --gl-w: 360deg; opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  html.gl [data-gl]:hover > .gl-glas::before { animation: gl-lauf 1300ms var(--gl-aus) both; }
}
html.gl [data-gl].gl-an > .gl-glas::before { animation: gl-lauf 1000ms var(--gl-aus) both; }

/* Knoepfe (rechtwinklig, Hausregel): kein Tropfen, ein Lichtfleck unter dem Zeiger
   und eine Kante, die das Licht faengt. */
html.gl [data-gl="knopf"] { transition: transform 240ms var(--gl-aus), box-shadow 320ms var(--gl-aus); }
html.gl [data-gl="knopf"] > .gl-glas {
  inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; opacity: 0;
  background:
    radial-gradient(180px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.34), rgba(255,255,255,0) 70%),
    linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 60%) var(--glanz, -160%) 0 / 260% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  transition: opacity 360ms var(--gl-aus);
}
html.gl [data-gl="knopf"] > .gl-linie { display: none; }
/* der Inhalt des Knopfes bleibt ueber dem Licht */
html.gl [data-gl="knopf"] > :not(.gl-glas):not(.gl-linie) { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  html.gl [data-gl="text"]:hover > .gl-glas, html.gl [data-gl="text"].gl-an > .gl-glas { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
  html.gl [data-gl="text"]:hover > .gl-linie, html.gl [data-gl="text"].gl-an > .gl-linie { transform: scaleX(1); }
  html.gl [data-gl="knopf"]:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -12px rgba(61,55,51,.55); }
  html.gl [data-gl="knopf"]:hover > .gl-glas { opacity: 1; --glanz: 160%; transition: opacity 360ms var(--gl-aus), background-position 900ms var(--gl-aus); }
}
html.gl [data-gl="knopf"]:active { transform: scale(.985); transition-duration: 90ms; }
html.gl [data-gl="knopf"].gl-an > .gl-glas { opacity: 1; }
html.gl [data-gl="text"]:active > .gl-glas { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }

/* Tastatur: dieselbe Zeichnung wie beim Zeigen */
html.gl [data-gl="text"]:focus-visible > .gl-glas { clip-path: circle(150% at 50% 50%); }
html.gl [data-gl="text"]:focus-visible > .gl-linie { transform: scaleX(1); }

/* ---------- 2. Bilder ---------- */
/* Tiefe beim Scrollen. translate und scale sind EIGENE Eigenschaften; E1
   benutzt transform. Beide laufen nebeneinander, ohne sich zu stoeren.
   Nur im Chromium und in Safari 26, wo es animation-timeline gibt; sonst
   steht das Bild still, und das ist in Ordnung. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Die Zeitachse haengt am RAHMEN, nicht am Bild: der Rahmen hat overflow:hidden
       und ist damit selbst ein Scroll-Container -- view() am Bild lauschte auf
       ihn und lief nie (gemessen 11.10.2026: progress null). */
    html.gl [data-ein="bild"][data-tiefe] { view-timeline: --gl-tiefe block; }
    html.gl [data-ein="bild"][data-tiefe] img {
      scale: var(--gl-s, 1.07);
      animation: gl-tiefe linear both; animation-timeline: --gl-tiefe; animation-range: cover 0% cover 100%;
      will-change: translate;
    }
    @keyframes gl-tiefe { from { translate: 0 calc(var(--gl-v, 3%) * -1); } to { translate: 0 var(--gl-v, 3%); } }
  }
}

/* Beim Zeigen atmet das Bild ein Stueck naeher heran (langsam, damit es ruhig
   bleibt). Nur dort, wo es einen Zeiger gibt. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.gl [data-ein="bild"][data-tiefe] img { transition: filter 900ms var(--aus, ease), transform 900ms var(--aus, ease), opacity 520ms linear, scale 1600ms var(--gl-aus); }
  /* Michael 19.10.2026: "Kein Effekt beim rueber scrollen mit der Maus. Das ist zu viel." Kein Heranatmen mehr. */
}

/* Nichts davon im Kopf, im Chat, in der Tafel, in Karten und Schiebern: dort
   ist Bewegung Bedienung, nicht Schmuck. */
html.gl .gc-fenster [data-gl] > .gl-glas, html.gl .gc-fenster [data-gl] > .gl-linie { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.gl [data-gl] > .gl-glas, html.gl [data-gl] > .gl-linie { transition: none !important; }
  html.gl [data-ein="bild"][data-tiefe] img { animation: none !important; scale: none !important; }
  html.gl [data-gl="knopf"] { transition: none !important; }
}

/* Handy (bis 809 px): Bildunterschriften waren hinter dem Bild. Das Bild bekommt die Tiefe (scale 1,07 plus
   Versatz), sein Rahmen ist aber die ganze figure MIT figcaption. Das vergroesserte Bild malte ueber die
   Unterschrift (gemessen 11.10.2026, 390 px: 4 von 20 Unterschriften verdeckt). Mit Unterschrift steht das Bild
   dort still. Michael 11.10.2026: "Bei Breakpoint Mobil fehlen die Bildunterschriften." */
@media (max-width: 809px) {
  html.gl [data-ein="bild"][data-tiefe]:has(figcaption) img { scale: none !important; translate: none !important; animation: none !important; }
}

/* Fusszeile (Michael 11.10.2026: "Was ist hier los? Beim Footer"): die Verweise dort haben 10 px Tippflaeche oben und unten
   (kopf.css: padding 10px 0, margin -10px 0). Das Glas und die Linie bezogen sich auf diesen 44-px-Kasten, deckten die
   Nachbarzeilen zu und die Linie lag auf dem naechsten Verweis. Jetzt beziehen sie sich auf die Textzeile. */
html.gl .fussblock li a[data-gl="text"] > .gl-glas { inset: -.22em -.62em; }
html.gl .fussblock li a[data-gl="text"] > .gl-linie { bottom: -.12em; }

/* 12.10.2026, Michael: Hover der Buchungsleiste "eleganter, aber nicht moderner". Jetzt: das Papier faehrt von links ueber den Knopf (Wischer, 480 ms, Expo),
   die Schrift kippt dabei auf dunkel. Kein Lichtfleck, kein Rahmen, kein Schatten. Tippen am Handy: derselbe Wischer, kurz. */
html.gl .buchbar [data-gl="knopf"] { transition: color 360ms var(--gl-aus); isolation: isolate; }
html.gl .buchbar [data-gl="knopf"] > .gl-glas { z-index: -1; }
html.gl .buchbar [data-gl="knopf"] > .gl-glas {
  background: #F3EEE7; box-shadow: none; opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 520ms var(--gl-aus);
}
html.gl .buchbar [data-gl="knopf"] > .gl-glas::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.gl .buchbar [data-gl="knopf"]:hover { transform: none; box-shadow: none; color: #3D3733; }
  html.gl .buchbar [data-gl="knopf"]:hover > .gl-glas { clip-path: inset(0 0 0 0); opacity: 1; }
}
html.gl .buchbar [data-gl="knopf"].gl-an { color: #3D3733; }
html.gl .buchbar [data-gl="knopf"].gl-an > .gl-glas { clip-path: inset(0 0 0 0); }
html.gl .buchbar [data-gl="knopf"]:focus-visible { color: #3D3733; }
html.gl .buchbar [data-gl="knopf"]:focus-visible > .gl-glas { clip-path: inset(0 0 0 0); }
html.gl .buchbar [data-gl="knopf"] svg, html.gl .buchbar [data-gl="knopf"] img { transition: filter 360ms var(--gl-aus); }
@media (prefers-reduced-motion: reduce) { html.gl .buchbar [data-gl="knopf"] > .gl-glas { transition: none; } }

/* 12.10.2026, Michael: kein weisser Balken hinter Verweisen, nirgends. Neuer Effekt: eine Haarlinie zieht unter dem Wort ein (von der Seite, aus der der Zeiger kommt),
   das Wort rueckt 3 px nach rechts und wird eine Spur dunkler. Keine Flaeche, kein Schatten, keine Unschaerfe. */
html.gl [data-gl="text"] > .gl-glas { display: none !important; }
html.gl [data-gl="text"] { transition: color 380ms var(--gl-aus), translate 380ms var(--gl-aus); }
html.gl [data-gl="text"] > .gl-linie { bottom: -.2em; height: 1px; transition: transform 640ms var(--gl-aus); }
@media (hover: hover) and (pointer: fine) {
  html.gl [data-gl="text"]:hover { translate: 3px 0; color: #1F1B18; }
}
@media (prefers-reduced-motion: reduce) { html.gl [data-gl="text"] { transition: none; translate: none !important; } }

/* 12.10.2026, Michael: "Der Wischeffekt ist besser, aber noch nicht perfekt. Mehr zeitgenoessisch." Statt einer harten Kante faehrt das Papier mit
   WEICHER Kante ein (Maske mit Verlauf, keine Schiebekante), von der Seite, an der der Zeiger eintritt (--seite aus leben.js), und sehr leicht
   durchscheinend mit Weichzeichner, wie Milchglas. Die Schrift kippt etwas spaeter als die Flaeche, damit sie nie auf halber Farbe steht. */
html.gl .buchbar [data-gl="knopf"] > .gl-glas {
  clip-path: none;
  background: rgba(243,238,231,.96);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  -webkit-mask-image: linear-gradient(90deg, #000 0 34%, transparent 66% 100%); mask-image: linear-gradient(90deg, #000 0 34%, transparent 66% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: mask-position 720ms var(--gl-aus), -webkit-mask-position 720ms var(--gl-aus);
}
html.gl .buchbar [data-gl="knopf"][style*="right"] > .gl-glas {
  -webkit-mask-image: linear-gradient(270deg, #000 0 34%, transparent 66% 100%); mask-image: linear-gradient(270deg, #000 0 34%, transparent 66% 100%);
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
html.gl .buchbar [data-gl="knopf"] { transition: color 280ms var(--gl-aus) 140ms; }
@media (hover: hover) and (pointer: fine) {
  html.gl .buchbar [data-gl="knopf"]:hover > .gl-glas { clip-path: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
  html.gl .buchbar [data-gl="knopf"][style*="right"]:hover > .gl-glas { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
html.gl .buchbar [data-gl="knopf"].gl-an > .gl-glas, html.gl .buchbar [data-gl="knopf"]:focus-visible > .gl-glas { clip-path: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
html.gl .buchbar [data-gl="knopf"][style*="right"].gl-an > .gl-glas, html.gl .buchbar [data-gl="knopf"][style*="right"]:focus-visible > .gl-glas { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
@media (prefers-reduced-motion: reduce) { html.gl .buchbar [data-gl="knopf"] > .gl-glas { transition: none; } }

/* Ueberschriften steigen Wort fuer Wort auf (siehe leben.js, 12.10.2026). Das Wort sitzt in einer Maske
   mit etwas Luft (Unterlaengen, Schwung der Cormorant), die Maske verschiebt das Layout nicht. */
html.lw-bereit .lw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
html.lw-bereit .lw-i { display: inline-block; transform: translateY(108%); will-change: transform;
  transition: transform 950ms var(--gl-aus) calc(var(--i, 0) * 55ms); }
html.lw-bereit .lw-an .lw-i { transform: none; }
@media (prefers-reduced-motion: reduce) { html.lw-bereit .lw-i { transform: none; transition: none; } }

/* Handy: Der Wischer der Buchungsleiste deckt auch das Chat-Symbol zu (Michael 12.10.2026: "die Schrift wird dunkel, das Logo des Chatbots nicht").
   Der Knopf "Verfuegbarkeit" ist am Handy so breit wie die ganze Leiste; das Papier liegt unter dem Symbol, das Symbol blieb hell auf hell.
   Jetzt kippt das Symbol mit der Schrift: Blase dunkel, Augen hell (umgekehrt zum Ruhezustand). */
@media (max-width: 809px) {
  html.gl .buchbar .cg-ruf { transition: color 360ms var(--gl-aus); }
  html.gl .buchbar .cg-ruf svg rect { transition: fill 360ms var(--gl-aus); }
  html.gl .buchbar:has(.buchtext.gl-an) .cg-ruf,
  html.gl .buchbar:has(.buchtext:focus-visible) .cg-ruf { color: #3D3733; }
  html.gl .buchbar:has(.buchtext.gl-an) .cg-ruf svg rect,
  html.gl .buchbar:has(.buchtext:focus-visible) .cg-ruf svg rect { fill: #F3EEE7 !important; }
}
@media (max-width: 809px) and (hover: hover) and (pointer: fine) {
  html.gl .buchbar:has(.buchtext:hover) .cg-ruf { color: #3D3733; }
  html.gl .buchbar:has(.buchtext:hover) .cg-ruf svg rect { fill: #F3EEE7 !important; }
}

/* 12.10.2026, Michael: "Mach einen besseren Rollover, das sieht nicht gut aus, einfacher und eleganter." Der Wischer mit Maske und Weichzeichner
   entfaellt ganz. Jetzt: der Knopf hellt nur leise auf (Papierton, 10 %), die Schrift bleibt hell und steht still. Eine Eigenschaft, eine Dauer.
   Das Chat-Symbol kippt nicht mehr mit, es bleibt wie im Ruhezustand. */
html.gl .buchbar [data-gl="knopf"] > .gl-glas { display: none !important; }
html.gl .buchbar [data-gl="knopf"] { transition: background-color 420ms var(--gl-aus); }
@media (hover: hover) and (pointer: fine) {
  html.gl .buchbar [data-gl="knopf"]:hover { background-color: rgba(246,242,234,.10); color: #F6F2EA; }
}
html.gl .buchbar [data-gl="knopf"].gl-an,
html.gl .buchbar [data-gl="knopf"]:focus-visible { background-color: rgba(246,242,234,.10); color: #F6F2EA; }
@media (max-width: 809px) {
  html.gl .buchbar:has(.buchtext.gl-an) .cg-ruf,
  html.gl .buchbar:has(.buchtext:focus-visible) .cg-ruf { color: #F1ECE3; }
  html.gl .buchbar:has(.buchtext.gl-an) .cg-ruf svg rect,
  html.gl .buchbar:has(.buchtext:focus-visible) .cg-ruf svg rect { fill: #3D3733 !important; }
}
@media (max-width: 809px) and (hover: hover) and (pointer: fine) {
  html.gl .buchbar:has(.buchtext:hover) .cg-ruf { color: #F1ECE3; }
  html.gl .buchbar:has(.buchtext:hover) .cg-ruf svg rect { fill: #3D3733 !important; }
}

/* 13.10.2026, Michael: "Mach das Roll over bei allen dicken Button wie bei der Booking Bar, auf allen Breakpoints, bei allen Seiten."
   Ein Rollover fuer alle grossen Knoepfe: nur die Fuellung wandert leise (Papierton, 10 %), die Schrift bleibt, nichts hebt sich, nichts kippt um.
   Dunkle Knoepfe werden eine Spur heller (#504A45 = Tinte + 10 % Papier), Linienknoepfe bekommen eine zarte Tinte-Flaeche. Eine Eigenschaft, 420 ms, gleiche Kurve. */
html body .ts-knopf.ts-knopf.ts-knopf, html body .an-knopf.an-knopf.an-knopf, html body.rg .buchen.buchen.buchen {
  transition: background-color 420ms var(--gl-aus); }
@media (hover: hover) and (pointer: fine) {
  html body .ts-knopf.ts-knopf.ts-knopf:hover, html body .an-knopf.an-knopf.an-knopf:hover:not(.voll) { background: rgba(61,55,51,.08); color: var(--tinte, #3D3733); transform: none; box-shadow: none; }
  html body .an-knopf.an-knopf.an-knopf.voll:hover, html body .an-kartentafel .an-knopf.an-knopf.an-knopf:hover, html body.rg .buchen.buchen.buchen:hover { background: #504A45; color: #F3EEE7; transform: none; box-shadow: none; }
}
html body .ts-knopf.ts-knopf.ts-knopf:active, html body .an-knopf.an-knopf.an-knopf:active, html body.rg .buchen.buchen.buchen:active { transform: none; }
@media (prefers-reduced-motion: reduce) { html body .ts-knopf.ts-knopf.ts-knopf, html body .an-knopf.an-knopf.an-knopf, html body.rg .buchen.buchen.buchen { transition: none; } }

/* 16.10.2026, Michael: "einfachere Animation, diese passt nicht zu unserem Design". Die Knoepfe (data-gl="knopf") bekommen KEIN
   Glaslicht mehr (kein Lichtfleck unter dem Zeiger, kein Glanzstreifen, kein Anheben, kein Schatten, keine Lichtkante): nur der
   ruhige Farbwechsel, den die Knopfklasse selbst mitbringt (Fuellung wird dunkler oder hell hinterlegt). Links (data-gl="text")
   bleiben wie sie sind. Zurueck: leben.css.vor-knopf-ruhig-16102026 */
html.gl [data-gl="knopf"] > .gl-glas, html.gl [data-gl="knopf"] > .gl-linie { display: none !important; }
html.gl [data-gl="knopf"], html.gl [data-gl="knopf"]:hover { transform: none !important; box-shadow: none; transition: background-color .28s ease, color .28s ease, border-color .28s ease; }
html.gl [data-gl="knopf"]:active { transform: none !important; }

/* Michael 19.10.2026: "Kein Effekt beim rueber scrollen mit der Maus. Das ist zu viel."
   Glastropfen, Lichtfleck und Lichtlauf unter dem Zeiger sind aus. Die Unterstreichung
   der Textverweise (.gl-linie) bleibt: sie sagt nur, dass man klicken kann. */
html.gl [data-gl] > .gl-glas { display: none !important; }

/* 20.10.2026, Michael (FAQ, Inhalt): "Mach den Strich um 25 % weniger lang auf der rechten Seite, dass er nicht ganz
   nach aussen geht, und um 50 % heller." Gilt fuer die Inhaltsliste aller Textseiten (dieselbe Liste). */
html.gl .ts-inhalt [data-gl="text"] > .gl-linie, html.gl .ts-inhalt [data-gl="text"] > .gl-glas { display: none; }   /* 20.10.2026: dort gilt Variante A (textseiten.css) */

/* === /buchform.css === */
/* Buchungsformular ohne Promo-Code (Michael 16.10.2026): drei Felder (Anreise, Abreise, Belegung), mittig, so breit wie die haeufigen Fragen darueber (1144 px, Michael 17.10.2026, vorher 880); mehr Luft zwischen den
   Eingabelinien und dem Knopf (vorher 24 px, jetzt 56 px). Gilt ab 810 px; darunter bleibt das Handy-Raster aus lp-stil.css. */
@media (min-width: 810px) {
  /* 20.10.2026, Michael: "Mach die Buchungsleiste so breit wie oben die Fragen und unten die Bewertungen."
     Gemessen war sie 393 px statt 1144: max-width allein reicht einem Grid nicht, es bleibt so schmal wie
     sein Inhalt. Mit width 100% fuellt es den Satzspiegel der Fragen darueber. */
  html .buchform, html #buchen .buchform { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px;
    width: 100%; max-width: 1144px; margin-inline: auto; box-sizing: border-box; }
}
@media (max-width: 809px) {
  /* 30.10.2026, Michael: Buchungsleiste so breit wie die Fragen darueber. Gemessen bei 390 px:
     Leiste 68-322, Fragen 36-354, weil probe-tafel-milchglas.css (max-width 809) 32 px Rand setzt. */
  html .buchform { row-gap: 40px; margin-left: 0; margin-right: 0; }
}

/* === /cookiebanner.css === */
/* Einwilligung: Hinweis, Einstellungen, Liste der Cookies.
   Haus-Stil: Papier #F3EEE7, Tinte #3D3733, Linie #DDD5C9, Radius 0 bei Knoepfen
   (Michael 05.09.2026), Schieber rund. Ueberschriften Cormorant Garamond 300,
   Text Abhaya Libre, Beschriftungen DM Mono in Versalien.
   Gleichwertigkeit: alle Knoepfe einer Ebene teilen EINE Regel (.cb-knopf).
   Es gibt bewusst keine Farbvariante fuer "Alles akzeptieren". */

.cookiebanner {
  --cb-grund: #F3EEE7; --cb-tinte: #3D3733; --cb-text: #5C554F; --cb-leise: #6E6862;
  --cb-linie: #DDD5C9; --cb-rand: clamp(20px, 3vw, 42px);
  font-family: "Abhaya Libre", "Abhaya Ersatz", Georgia, serif;
  color: var(--cb-tinte); font-size: 17px; line-height: 1.6;
}
.cookiebanner [hidden] { display: none !important; }
.cookiebanner *, .cookiebanner *::before, .cookiebanner *::after { box-sizing: border-box; }
.cookiebanner :where(h2, h3, p, dl, dd) { margin: 0; }
.cookiebanner :where(button) { font: inherit; color: inherit; }
.cookiebanner :where(a) { color: inherit; text-underline-offset: 3px; }
.cookiebanner :focus-visible { outline: 2px solid var(--cb-tinte); outline-offset: 3px; }
html.cb-sperre { overflow: hidden; }

/* ---------- ein Knopf, drei Aufgaben ---------- */

.cb-knopf {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 52px; padding: 10px 20px;
  border: 1px solid var(--cb-tinte); border-radius: 0; background: transparent; cursor: pointer;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; color: var(--cb-tinte);
  transition: background-color .22s ease, color .22s ease;
}
.cb-knopf:hover { background: var(--cb-tinte); color: var(--cb-grund); }
.cb-knopf:active { transform: translateY(1px); }
.cb-knoepfe { display: grid; gap: 12px; }

.cb-textknopf, .cb-zu, .cb-sprache button, .cb-navdienst {
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0;
}
.cb-textknopf {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; color: var(--cb-tinte);
}
.cb-zu {
  min-height: 44px; padding: 0 2px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* ---------- Sprache ---------- */

.cb-sprache {
  display: inline-flex; align-items: center; gap: 2px; color: var(--cb-leise);
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .16em;
}
.cb-sprache button {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  font: inherit; letter-spacing: inherit; color: var(--cb-leise);
}
.cb-sprache button:last-child { justify-content: end; margin-right: -.16em; }
.cb-sprache button[aria-pressed="true"] { color: var(--cb-tinte); font-weight: 500; }

/* ---------- Ebene 1: Hinweis ---------- */

.cb-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--cb-grund); border-top: 1px solid var(--cb-linie);
  box-shadow: 0 -18px 48px rgba(61, 55, 51, .10);
  max-height: 100dvh; overflow-y: auto;
  /* Kein Einblenden mehr: Michael 19.10.2026 ("Stell A und B live"), der Hinweis steht sofort */
}
.cb-leiste[data-da] { opacity: 1; transform: none; }
.cb-innen {
  /* Swiss Grid (16.10.2026): 12 Spalten, 24 px Rinne. Titel Spalte 1 bis 4, Text 5 bis 9, Knoepfe 10 bis 12.
     --breite der Zimmerseiten (Kartenbreite) darf hier NICHT einfliessen: sie quetschte die Leiste auf 490 px. */
  max-width: 1435px; margin: 0 auto;
  padding: 28px var(--cb-rand) calc(24px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; align-items: center;
}
.cb-links { grid-column: 1 / span 9; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; align-items: start; }
.cb-links .cb-titel { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.cb-links .cb-text { grid-column: 5 / span 5; grid-row: 1; margin-top: 0; max-width: none; }
.cb-links .cb-fuss { grid-column: 5 / span 5; grid-row: 2; margin-top: 6px; }
.cb-rechts { grid-column: 10 / span 3; }
@media (max-width: 900px) {
  .cb-innen { grid-template-columns: minmax(0, 1fr); }
  .cb-links, .cb-rechts { grid-column: 1; }
  .cb-links { grid-template-columns: minmax(0, 1fr); }
  .cb-links .cb-titel, .cb-links .cb-text, .cb-links .cb-fuss { grid-column: 1; grid-row: auto; }
}
.cb-titel {
  font-family: "Cormorant Garamond", "Cormorant Ersatz", Georgia, serif;
  font-weight: 300; font-size: 27px; line-height: 1.15; letter-spacing: -.005em; color: var(--cb-tinte);
}
.cb-text { margin-top: 8px; max-width: 80ch; font-size: 16px; line-height: 1.55; color: var(--cb-text); }
.cb-fuss { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 2px; }
.cb-fuss a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--cb-leise);
}
.cb-fuss a:last-child { margin-right: -.16em; }
.cb-fuss a:hover { color: var(--cb-tinte); text-decoration: underline; text-underline-offset: 5px; }
.cb-rechts { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; }
.cb-rechts .cb-sprache { align-self: flex-end; margin: -8px 0 0 0; }
.cb-rechts .cb-knopf { min-height: 44px; }
.cb-rechts .cb-knoepfe { gap: 8px; }

/* ---------- Ebene 2 und 3: Fenster ---------- */

.cb-schleier {
  position: fixed; inset: 0; z-index: 9001; background: rgba(38, 34, 30, .52);
  animation: cb-ein .3s ease both;
}
.cb-modal {
  position: fixed; z-index: 9002; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1040px, calc(100% - 32px)); height: min(820px, calc(100dvh - 32px));
  display: flex; flex-direction: column;
  background: var(--cb-grund); border: 1px solid var(--cb-linie); box-shadow: 0 30px 90px rgba(38, 34, 30, .35);
  animation: cb-auf .45s cubic-bezier(.22, 1, .36, 1) both;
}
.cb-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 32px 40px 0;
}
.cb-kopf .cb-titel { font-size: 32px; padding-top: 4px; }
.cb-kopfrechts { display: flex; align-items: center; gap: 4px; flex: none; margin-top: -6px; }
.cb-koerper { flex: 1 1 auto; overflow-y: auto; padding: 24px 40px 8px; overscroll-behavior: contain; }
.cb-modalfuss {
  flex: none; padding: 20px 40px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cb-linie); display: grid; gap: 14px;
}
.cb-id { font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .08em; color: var(--cb-leise); }
.cb-modalfuss .cb-knoepfe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-modalfuss .cb-knoepfe.cb-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-left: auto; width: 100%; }

/* Auswahl */
.cb-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start;
  padding: 28px 0; border-bottom: 1px solid var(--cb-linie);
}
.cb-zeile:first-child { padding-top: 12px; }
.cb-zeile h3 {
  font-family: "Cormorant Garamond", "Cormorant Ersatz", Georgia, serif;
  font-weight: 400; font-size: 26px; line-height: 1.2;
}
.cb-zahl { font-family: "DM Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; color: var(--cb-leise); vertical-align: .15em; }
.cb-zeile p { margin-top: 8px; max-width: 62ch; color: var(--cb-text); }

/* Schieber: rund (Hausregel), mit Wort daneben, damit der Zustand nicht nur an der Farbe haengt */
.cb-schalter { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; min-height: 44px; position: relative; }
.cb-schalter input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.cb-schiene {
  position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px;
  border: 1px solid var(--cb-leise); background: transparent; transition: background-color .25s ease, border-color .25s ease;
}
.cb-schiene::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cb-leise); transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .25s ease;
}
.cb-schalter input:checked + .cb-schiene { background: var(--cb-tinte); border-color: var(--cb-tinte); }
.cb-schalter input:checked + .cb-schiene::after { transform: translateX(22px); background: var(--cb-grund); }
.cb-schalter input:disabled { cursor: default; }
.cb-schalter input:disabled + .cb-schiene { opacity: .62; }
.cb-schalter input:focus-visible + .cb-schiene { outline: 2px solid var(--cb-tinte); outline-offset: 3px; }
.cb-zustand {
  min-width: 7.5em; font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-text);
}

/* Liste */
.cb-zweispalt { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 48px; align-items: start; }
.cb-nav { position: sticky; top: 0; padding-right: 24px; border-right: 1px solid var(--cb-linie); }
.cb-navgruppe + .cb-navgruppe { margin-top: 28px; }
.cb-navkat {
  font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-leise); margin-bottom: 4px;
}
.cb-navdienst {
  display: block; width: 100%; text-align: left; min-height: 44px; padding: 8px 0 8px 14px; margin-left: -14px;
  border-left: 2px solid transparent; color: var(--cb-text); line-height: 1.3;
}
.cb-navdienst:hover { color: var(--cb-tinte); }
.cb-navdienst[aria-current="true"] { color: var(--cb-tinte); border-left-color: var(--cb-tinte); }
.cb-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--cb-tinte); }
.cb-kopfzeile h2 { font-family: "Cormorant Garamond", "Cormorant Ersatz", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2; }
.cb-dienst { margin: 28px 0 8px; font-family: "Cormorant Garamond", "Cormorant Ersatz", Georgia, serif; font-weight: 500; font-size: 24px; line-height: 1.25; }
.cb-felder { display: grid; gap: 18px; margin-top: 16px; }
.cb-feld dt { font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-leise); margin-bottom: 2px; }
.cb-feld dd { color: var(--cb-text); overflow-wrap: anywhere; }
.cb-tabelle { width: 100%; margin: 28px 0 16px; border-collapse: collapse; font-size: 16px; text-align: left; }
.cb-tabelle caption { text-align: left; font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-leise); padding-bottom: 8px; }
.cb-tabelle th { font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--cb-tinte); }
.cb-tabelle td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--cb-linie); vertical-align: top; color: var(--cb-text); }
.cb-tabelle td:first-child { font-family: "DM Mono", ui-monospace, monospace; font-size: 13px; color: var(--cb-tinte); overflow-wrap: anywhere; }

@keyframes cb-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-auf { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .cb-innen { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px 40px; }
}

/* ---------- Handy ---------- */
@media (max-width: 809px) {
  .cookiebanner { font-size: 16px; }
  .cb-leiste { max-height: 94dvh; }
  .cb-innen { grid-template-columns: 1fr; gap: 12px; padding: 14px var(--cb-rand) calc(14px + env(safe-area-inset-bottom)); }
  .cb-titel { font-size: 22px; }
  .cb-text { margin-top: 6px; font-size: 15.5px; }
  .cb-fuss { margin-top: 4px; justify-content: space-between; }
  .cb-rechts { display: contents; }
  .cb-rechts .cb-sprache { order: -1; justify-self: end; margin: -10px 0 -6px 0; }
  .cb-links { order: 0; }
  .cb-rechts .cb-knoepfe { order: 1; gap: 8px; }
  .cb-knopf, .cb-rechts .cb-knopf { min-height: 44px; }
  .cb-zustand { min-width: 0; }

  .cb-modal { inset: 0; top: 0; left: 0; transform: none; width: 100%; height: 100dvh; max-height: none; border: 0; animation: cb-ein .3s ease both; }
  .cb-kopf { padding: 18px var(--cb-rand) 0; flex-wrap: wrap; gap: 4px 12px; }
  .cb-kopf .cb-titel { font-size: 25px; order: 2; flex-basis: 100%; padding-top: 0; }
  .cb-kopfrechts { order: 1; margin: 0 0 0 auto; }
  .cb-koerper { padding: 12px var(--cb-rand) 8px; }
  .cb-modalfuss { padding: 14px var(--cb-rand) calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
  .cb-modalfuss .cb-knoepfe, .cb-modalfuss .cb-knoepfe.cb-zwei { grid-template-columns: 1fr; max-width: none; gap: 8px; }
  .cb-zeile { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .cb-zeile h3 { font-size: 23px; }

  .cb-zweispalt { grid-template-columns: 1fr; gap: 20px; }
  .cb-nav { position: static; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--cb-linie); }
  .cb-kopfzeile h2 { font-size: 25px; }
  .cb-tabelle thead { position: absolute; left: -9999px; }
  .cb-tabelle tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--cb-linie); }
  .cb-tabelle td { display: block; border: 0; padding: 2px 0; }
  .cb-tabelle td::before { content: attr(data-l); display: block; font-family: "Inter", system-ui, sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-leise); margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-leiste, .cb-schleier, .cb-modal, .cb-schiene, .cb-schiene::after, .cb-knopf { transition: none; animation: none; }
  .cb-leiste { transform: none; }
}

/* 16.10.2026: am Handy kompakter, die Leiste fuellte 62 % des Bildschirms (502 von 800 px) */
@media (max-width: 600px) {
  .cb-innen { padding-top: 14px; row-gap: 10px; }
  .cb-leiste .cb-titel { font-size: 21px; }
  .cb-leiste .cb-text { font-size: 14.5px; line-height: 1.45; }
  .cb-leiste .cb-fuss a { min-height: 28px; }
  .cb-leiste .cb-rechts .cb-knopf { min-height: 42px; }
  .cb-leiste .cb-rechts .cb-knoepfe { gap: 6px; }
}

/* ---------- Liste und Auswahl im Swiss Grid (Michael 16.10.2026: "grosszuegiger, eleganter, luxurioeser") ----------
   Raster: 12 Spalten, 32 px Rinne. Navigation Spalte 1 bis 3, Inhalt Spalte 5 bis 12. Haarlinien 1 px statt dicker Balken,
   Ueberschriften leicht (Cormorant 300), Beschriftungen DM Mono 11 px gesperrt, Abstaende auf 8-Punkt-Raster (24/32/48/64).
   Zurueck: cookiebanner.css.vor-liste-16102026 */
@media (min-width: 810px) {
  .cb-modal { width: min(1200px, calc(100% - 64px)); height: min(880px, calc(100dvh - 64px)); box-shadow: 0 40px 120px rgba(38, 34, 30, .32); }
  .cb-kopf { padding: 48px 64px 0; align-items: baseline; }
  .cb-kopf .cb-titel { font-size: 44px; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; padding-top: 0; }
  .cb-kopfrechts { margin-top: 0; gap: 24px; }
  .cb-koerper { padding: 40px 64px 32px; }
  .cb-kopf + .cb-koerper { border-top: 1px solid var(--cb-linie); margin-top: 32px; }

  .cb-zweispalt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .cb-nav { grid-column: 1 / span 3; border-right: 0; padding-right: 0; top: 8px; }
  .cb-detail { grid-column: 5 / span 8; min-width: 0; }
  .cb-navgruppe + .cb-navgruppe { margin-top: 48px; }
  .cb-navkat { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; margin-bottom: 12px; }
  .cb-navdienst { min-height: 40px; padding: 8px 0 8px 20px; margin-left: 0; border-left: 1px solid var(--cb-linie); font-size: 19px; line-height: 1.3; transition: color .25s ease, border-color .25s ease; }
  .cb-navdienst[aria-current="true"] { border-left-color: var(--cb-tinte); }

  .cb-kopfzeile { padding-bottom: 24px; border-bottom: 1px solid var(--cb-tinte); align-items: baseline; }
  .cb-kopfzeile h2 { font-size: 38px; font-weight: 300; letter-spacing: -.005em; }
  .cb-dienst { margin: 48px 0 24px; font-size: 28px; font-weight: 400; }
  .cb-felder { gap: 0; margin-top: 0; }
  .cb-feld { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 32px; padding: 20px 0; border-top: 1px solid var(--cb-linie); }
  .cb-feld:last-child { border-bottom: 1px solid var(--cb-linie); }
  .cb-feld dt { grid-column: 1 / span 2; font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; margin: 5px 0 0; }
  .cb-feld dd { grid-column: 3 / span 6; font-size: 17px; line-height: 1.65; }
  .cb-tabelle { margin: 56px 0 24px; }
  .cb-tabelle caption { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; padding-bottom: 16px; }
  .cb-tabelle th { font-size: 11px; letter-spacing: .2em; padding: 14px 24px 14px 0; border-bottom: 1px solid var(--cb-tinte); }
  .cb-tabelle td { padding: 18px 24px 18px 0; line-height: 1.55; }

  .cb-modalfuss { flex-direction: row; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 64px calc(32px + env(safe-area-inset-bottom)); }
  .cb-modalfuss .cb-knoepfe.cb-zwei { margin: 0; width: auto; max-width: none; grid-template-columns: repeat(2, 260px); gap: 16px; }
  .cb-modalfuss .cb-knoepfe { grid-template-columns: repeat(3, 220px); gap: 16px; }
  .cb-modalfuss .cb-knopf { min-height: 56px; }
}

/* 16.10.2026, Michael: Knoepfe rechts wieder wie am Anfang (320 x 44 px, 8 px Abstand), nur der Rahmen eine Spur heller.
   Zurueck: cookiebanner.css.vor-urform-16102026 */
.cb-leiste .cb-rechts .cb-knopf { border-color: rgba(61, 55, 51, .55); }
.cb-leiste .cb-rechts .cb-knopf:hover { border-color: var(--cb-tinte); }

/* 16.10.2026, Michael: "die drei Knoepfe gleich hoch wie der Fliesstext: Oberkante des Textes bis Unterkante des Textblocks, nach Swiss Grid".
   Der Textblock (Absatz + Links) bestimmt die Hoehe; die drei Knoepfe teilen sie sich zu gleichen Teilen (8 px Abstand, gemessen ca. 40 px je Knopf).
   Die Sprachwahl rutscht ueber den Block, in die obere Randzone. Am Handy unveraendert. Zurueck: cookiebanner.css.vor-bluendig-16102026 */
@media (min-width: 901px) {
  .cb-innen { padding-top: 64px; align-items: stretch; }
  .cb-links { min-height: 128px; align-content: start; }
  .cb-leiste .cb-rechts { position: relative; display: block; }
  .cb-leiste .cb-rechts .cb-sprache { position: absolute; right: 0; top: -48px; margin: 0; align-self: auto; }
  .cb-leiste .cb-rechts .cb-knoepfe { height: 100%; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cb-leiste .cb-rechts .cb-knopf { min-height: 0; height: 100%; padding: 0 20px; }
}

/* 16.10.2026, Michael: "Ueberschrift, Fliesstext und Knoepfe genau ausgerichtet". An Pixeln gemessen (Bildschirmfoto, doppelte Aufloesung):
   Tinte oben: Ueberschrift 4 px, Fliesstext 5,5 px unter der Oberkante der Knoepfe; Links endeten 12 px ueber der Unterkante.
   Jetzt beginnen alle drei auf EINER Linie und die Links enden auf der Unterkante der Knoepfe. Zurueck: cookiebanner.css.vor-ausrichtung-16102026 */
@media (min-width: 901px) {
  .cb-links .cb-titel { margin-top: -4px; }
  .cb-links .cb-text { margin-top: -5.5px; }
  .cb-links .cb-fuss { margin-bottom: -12px; }
}
/* 16.10.2026, Michael: Text lief bis an die Knoepfe, "frueher umbrechen": rechts 48 px Luft im Fliesstext (zusaetzlich zur Rinne). */
@media (min-width: 901px) { .cb-links .cb-text { padding-right: 48px; } }

/* 16.10.2026, Michael: "Verbessere die Typografie in diesem Breakpoint" (Cookie-Leiste, einspaltig 601 bis 900 px). Befund am Screenshot: Titel brach mit
   dem Einzelwort "Technologien." um, der Text lief mit rund 90 Zeichen je Zeile und endete auf "werden.". Jetzt: Titel ausgewogen umbrochen, Text auf
   etwa 62 Zeichen begrenzt, ruhigerer Zeilenabstand, keine Einzelwoerter am Absatzende, Anfuehrungszeichen haengen. Zurueck: cookiebanner.css.vor-satz-16102026 */
.cb-titel { text-wrap: balance; hanging-punctuation: first; }
.cb-text { text-wrap: pretty; hyphens: manual; }
@media (min-width: 601px) and (max-width: 900px) {
  .cb-links .cb-titel { font-size: 32px; line-height: 1.12; letter-spacing: -.01em; max-width: 26ch; }
  .cb-links .cb-text { margin-top: 14px; max-width: 62ch; font-size: 16.5px; line-height: 1.62; padding-right: 0; }
  .cb-links .cb-fuss { margin-top: 12px; }
}

/* ---- Responsive-Fix 28.10.2026 Teil 5: Cookie-Knoepfe am Handy mindestens 44 px hoch (vorher 42) ---- */
@media (max-width: 600px) { .cb-leiste .cb-rechts .cb-knopf { min-height: 44px; } }