/* === /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; }
/* === /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}
/* === /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; }
}
/* === /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}
/* === /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
:
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 ,
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 (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 ( 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