/* Winterversion v6 "Stilles Winterlicht" (2026-11-04). Wird nur geladen, wenn einstellungen.json saison =
"weihnachten" ist (Layout.astro; astro.config.mjs kopiert web/winter/ dann nach dist/winter/). v5.css bleibt im
Repo als Rückweg: in Layout.astro v5.css und v5.js statt v6.css und v6.js laden.
Eine Regel für alles: EIN Material, EIN Hintergrund.
- Material: kühles Milchglas ("leicht kalt", nicht blau) mit den zwei Lichtstreifen rechts oben. Gilt für
Frühstück, Zimmer, In jedem Zimmer, Stimmen, Lage, Kontakt, Anfrage und die Rechtsseiten. Ohne backdrop-filter
und ohne mix-blend-mode: ein dichter Schleier, einmal gemalt, beim Scrollen nur verschoben.
- Ausnahme Fakten-Leiste (Dennis 2026-11-04 "so lassen wie er war aber ohne den schneerand"): das Eisglas aus v5
mit backdrop-filter und Lichtkante, ohne Eissaum. Der einzige backdrop-filter der Seite.
- Hintergrund: Papier mit wenigen, sehr großen, sehr weichen Lichtflächen (kühl und warm), keine Motive,
keine Scheiben mit Rand.
- Fotos: Startbild mit Frost-Ecken und leisem Schnee, Lage mit Frost, Zimmer mit warmem Schein, Ausflüge und
Kontakt ohne Frost. Frost liegt als Alpha-Bild darüber (frost-licht*.webp, aus frost-rand*.webp gerechnet),
sieht aus wie das frühere "screen" und kostet keinen Blend-Modus.
- Farben der Marke bleiben: Sand, Seegrün, EIN Akzent Orange (Knöpfe weiße Schrift). */
:root.wh-v5{
/* Milchglas */
--milch-oben:rgb(251 253 254 / .82);
--milch-unten:rgb(236 243 246 / .76);
--milch-dicht-oben:rgb(251 253 254 / .92);
--milch-dicht-unten:rgb(238 244 247 / .90);
--milch-glanz:rgb(255 255 255 / .22);
--milch-kante:rgb(255 255 255 / .75);
--milch-ring:rgb(40 72 82 / .08);
--milch-glow:rgb(150 196 214 / .26);
--milch-schatten:0 1px 2px rgb(24 54 62 / .05), 0 14px 30px -14px rgb(24 54 62 / .16), 0 44px 80px -40px rgb(24 54 62 / .20);
--strahl:rgb(255 255 255 / .92);
--strahl-grund:rgb(150 192 208 / .12); /* kühler Hauch unter den Strahlen, sonst ist Weiß auf Milchweiß unsichtbar */
--warm-schein:rgb(241 132 0 / .13);
/* Text und Linien auf Glas */
--glas-gedaempft:#4f4842;
--eis:#4e7681; /* Icons, Linien-Akzent (Nicht-Text, >= 3:1) */
--eis-rand:#d3dfe2;
--eis-linie:rgb(78 118 129 / .18);
--eis-glanz:rgb(255 255 255 / .9);
--glas-chip:rgb(255 255 255 / .55);
--feld-glas:rgb(255 254 251 / .88);
--feld-glas-hover:rgb(255 255 255 / .97);
--eis-kasten:rgb(220 236 245 / .10);
--eis-kasten-rand:rgb(220 236 245 / .28);
/* Hintergrund: Lichtflächen */
--licht-kalt:rgb(168 204 218 / .30);
--licht-kalt-leise:rgb(168 204 218 / .18);
--licht-warm:rgb(241 150 60 / .10);
/* Maus-Licht an der Kante */
--glow-linie:rgb(255 255 255 / .95);
/* Frost an den Fotos */
--frost-deckkraft:.72;--frost-deckkraft-held:.95;--frost-groesse:108%;
--fakten-luft:clamp(32px,3.6vw,52px);
/* Fakten-Leiste wie v5 (Eisglas, Lichtkante), ohne Eissaum */
--fk-ton:rgb(232 244 249 / .40);--fk-ton-fest:rgb(255 253 249 / .92);
--fk-licht-kalt:rgb(176 210 222 / .70);--fk-licht-warm:rgb(241 132 0 / .13);
--fk-kante-licht:rgb(255 255 255 / .98);--fk-kante-kalt:rgb(98 152 172 / .60);--fk-kante-grund:rgb(98 152 172 / .30);
--fk-kante-glow:rgb(140 194 214 / .55);--fk-schatten:rgb(24 54 62 / .30);--fk-linie:rgb(78 118 129 / .20);
--fk-flocken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%234e7681' stroke-opacity='.10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(62 50) rotate(0) scale(1)'%3E%3Cpath transform='rotate(0)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(60)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(120)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(180)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(240)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(300)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3C/g%3E%3Cg transform='translate(302 42) rotate(10) scale(1)'%3E%3Cpath transform='rotate(0)' d='M0 0V-11M-3-7h6'/%3E%3Cpath transform='rotate(45)' d='M0 0V-11M-3-7h6'/%3E%3Cpath transform='rotate(90)' d='M0 0V-11M-3-7h6'/%3E%3Cpath transform='rotate(135)' d='M0 0V-11M-3-7h6'/%3E%3Cpath transform='rotate(180)' d='M0 0V-11M-3-7h6'/%3E%3Cpath transform='rotate(225)' d='M0 0V-11M-3-7h6'/%3E%3Cpath transform='rotate(270)' d='M0 0V-11M-3-7h6'/%3E%3Cpath transform='rotate(315)' d='M0 0V-11M-3-7h6'/%3E%3C/g%3E%3Cg transform='translate(116 152) rotate(0) scale(1)'%3E%3Cpath d='M0-22-9-9h5l-9 12h7l-9 11h30L6 3h7L4-9h5Z'/%3E%3Cpath d='M-2.5 14v7h5v-7'/%3E%3C/g%3E%3Cg transform='translate(42 238) rotate(-14) scale(1)'%3E%3Cpath d='M-8 14V-2c0-10 4-15 10-15 7 0 9 6 8 14l-1 9c0 3-2 5-5 5v3Z'/%3E%3Cpath d='M-8 2c-5-2-7-7-4-10 2-2 4 0 4 2'/%3E%3Cpath d='M-9 9h14'/%3E%3C/g%3E%3Cg transform='translate(182 222) rotate(15) scale(1)'%3E%3Cpath d='M0-4 3.5-2v4L0 4-3.5 2v-4Z'/%3E%3Cg transform='rotate(0)'%3E%3Cpath d='M0-4V-11'/%3E%3Ccircle cy='-14' r='2.4'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cpath d='M0-4V-11'/%3E%3Ccircle cy='-14' r='2.4'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cpath d='M0-4V-11'/%3E%3Ccircle cy='-14' r='2.4'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cpath d='M0-4V-11'/%3E%3Ccircle cy='-14' r='2.4'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cpath d='M0-4V-11'/%3E%3Ccircle cy='-14' r='2.4'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cpath d='M0-4V-11'/%3E%3Ccircle cy='-14' r='2.4'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(306 228) rotate(8) scale(1)'%3E%3Cpath d='M-14 8c0-16 28-16 28 0Z'/%3E%3Cpath d='M-15 8h30v6h-30Z'/%3E%3Cpath d='M-9 8v6M-3 8v6M3 8v6M9 8v6'/%3E%3Ccircle cy='-8' r='3.5'/%3E%3C/g%3E%3Cg transform='translate(232 318) rotate(20) scale(0.8)'%3E%3Cpath transform='rotate(0)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(60)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(120)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(180)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(240)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3Cpath transform='rotate(300)' d='M0 0V-16M0-8.5l-4.5-4M0-8.5l4.5-4M0-13l-2.5-2.2M0-13l2.5-2.2'/%3E%3C/g%3E%3Cpath stroke-width='2.6' d='M20 110h.01M345 158h.01M158 280h.01M300 92h.01M60 178h.01M262 260h.01M210 18h.01M28 338h.01'/%3E%3C/g%3E%3C/svg%3E");
/* Kontakt und Formular */
--ko-hover:rgb(255 255 255 / .55);
--fokus-halo:rgb(173 88 0 / .16);
--fehler-hauch:rgb(180 35 24 / .06);
/* für die Rechtsseiten (site.css nutzt diese Namen) */
--glas-karte:var(--milch-oben);
--kante-licht:var(--milch-kante);
}
/* ---------- Hintergrund: Papier mit wenigen, sehr großen, weichen Lichtflächen, still ----------
Eine Fläche über die ganze Seitenhöhe (keine Kachel, also keine Nahtkante), Lagen in Prozent der Höhe. */
.wh-v5 body{
background:
radial-gradient(1500px 1100px at 88% 3%, var(--licht-kalt), transparent 70%),
radial-gradient(1300px 1000px at 6% 20%, var(--licht-warm), transparent 70%),
radial-gradient(1600px 1100px at 78% 38%, var(--licht-kalt-leise), transparent 70%),
radial-gradient(1300px 1000px at 10% 58%, var(--licht-kalt), transparent 70%),
radial-gradient(1400px 1000px at 92% 76%, var(--licht-warm), transparent 70%),
radial-gradient(1500px 1100px at 30% 95%, var(--licht-kalt-leise), transparent 70%),
var(--papier);
background-size:100% 100%;background-repeat:no-repeat}
@media print{.wh-v5 body{background:#fff}}
/* ---------- Schnee (Canvas, nur im Startbild) ---------- */
.wh-schnee{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;
transition:opacity 1.2s cubic-bezier(0.23,1,0.32,1)}
.wh-schnee.wh-schnee-an{opacity:1}
.wh-schnee[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.wh-schnee{display:none}}
/* ---------- Grußstreifen "Frohe Weihnachten" ---------- */
.wh-streifen{--streifen-h:44px;position:relative;background:var(--ink);color:var(--ink-text);font-size:.9375rem;line-height:1.3}
.wh-streifen p{position:relative;margin:0 auto;max-width:var(--breite);min-height:var(--streifen-h);padding:6px var(--rand);
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:22px;row-gap:2px;text-align:center}
.wh-gruss{font-weight:600;letter-spacing:.02em;display:inline-flex;align-items:center;gap:10px}
.wh-gruss::before{content:"";width:14px;height:14px;flex:none;background:var(--sonne);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.wh-streifen a{color:var(--sonne);font-weight:600;text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;min-height:44px;display:inline-flex;align-items:center}
.wh-streifen a:focus-visible{outline:3px solid #f4efe6;outline-offset:2px;border-radius:4px}
@media (hover:hover) and (pointer:fine){
.wh-streifen a{transition:color .2s ease}
.wh-streifen a:hover{color:#ffb35c}
}
/* ---------- Startbild: Höhe mit Streifen, warmer Schein im Textfeld ---------- */
@media (width<=899px){
.wh-streifen{--streifen-h:64px}
.wh-streifen p{padding-block:4px}
.wh-streifen a{min-height:32px}
.wh-v5 .held-bild{height:calc(100svh - var(--kopf-h) - 72px - var(--streifen-h, 64px));min-height:500px}
.wh-v5 .held-bild::after{background:linear-gradient(to top, rgb(var(--ink-rgb) / .92) 0%, rgb(var(--ink-rgb) / .8) 36%, rgb(var(--ink-rgb) / 0) 64%)}
}
@media (width>=900px){
.wh-v5 .held-buehne{height:clamp(560px, calc(100svh - var(--kopf-h) - 44px), 960px)}
.wh-v5 .held-text{background:radial-gradient(90% 55% at 0% 100%, rgb(241 132 0 / .14), rgb(241 132 0 / 0) 70%), var(--ink);
padding-bottom:calc(clamp(40px,6vh,72px) + 46px)}
}
/* ---------- Frost an den Fotos: Startbild und Lage. Zimmer: warmer Schein. Ausflüge, Kontakt: ohne ---------- */
.wh-v5 :is(.held-bild,.zimmer-bilder,.lage-buehne){position:relative;isolation:isolate}
.wh-v5 .held-bild::before,.wh-v5 .lage-buehne::after{content:"";position:absolute;inset:0;height:auto;z-index:2;pointer-events:none;
background:url("frost-licht-2400.webp") center/var(--frost-groesse) var(--frost-groesse) no-repeat;opacity:var(--frost-deckkraft)}
.wh-v5 .held-bild::before{opacity:var(--frost-deckkraft-held)}
/* Handy (2026-11-05, Lighthouse): Startbild und Lage teilen eine kleine Fassung (1000 px, 96 KB) statt
frost-licht.webp + frost-licht-2400.webp (zusammen 491 KB, beide mit hoher Priorität neben dem Startbild). */
@media (width<=899px){
.wh-v5 .lage-buehne::after{background-image:url("frost-licht-1000.webp")}
.wh-v5 .held-bild::before{background-image:url("frost-licht-1000.webp");
-webkit-mask-image:linear-gradient(#000 40%, transparent 62%);mask-image:linear-gradient(#000 40%, transparent 62%)}
}
.wh-v5 .zimmer-karte .zimmer-bilder::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(90% 80% at 80% 15%, rgb(255 140 40 / .30), rgb(255 140 40 / 0) 72%)}
/* ---------- Das Material: kühles Milchglas mit Lichtstreifen rechts oben ---------- */
.wh-v5 :is(.fruehstueck-karte,.zimmer-karte,.stimme,.ausstattung,.lage-karte,.ko-karte,.anfrage-karte,.faq-liste){
position:relative;isolation:isolate;border:0;border-radius:18px;
background:radial-gradient(120% 70% at 50% -10%, var(--milch-glanz), transparent 70%),
linear-gradient(180deg, var(--milch-oben), var(--milch-unten));
box-shadow:inset 0 1px 0 var(--milch-kante), inset 0 0 0 1px var(--milch-ring), inset 0 0 26px -12px var(--milch-glow),
var(--milch-schatten)}
.wh-v5 :is(.fruehstueck-karte,.zimmer-karte,.stimme,.ausstattung,.lage-karte,.ko-karte,.anfrage-karte,.faq-liste)::before{
content:"";position:absolute;z-index:-1;top:0;right:0;width:min(100%,620px);height:min(100%,380px);
border-radius:inherit;pointer-events:none;
background:linear-gradient(116deg, transparent 0 59%, var(--strahl-grund) 64%, var(--strahl) 67%, var(--strahl-grund) 68.5%,
var(--strahl-grund) 70%, var(--strahl) 71.5%, var(--strahl-grund) 73.5%, transparent 79%),
radial-gradient(60% 50% at 92% 0%, var(--strahl), transparent 70%);
-webkit-mask:radial-gradient(120% 110% at 100% 0%, #000 28%, transparent 78%);mask:radial-gradient(120% 110% at 100% 0%, #000 28%, transparent 78%)}
/* Zimmer: dasselbe Glas, dazu der warme Schein unten rechts (Dennis 2026-11-02) */
.wh-v5 .zimmer-karte{
background:radial-gradient(80% 50% at 100% 100%, var(--warm-schein), transparent 70%),
radial-gradient(120% 70% at 50% -10%, var(--milch-glanz), transparent 70%),
linear-gradient(180deg, var(--milch-oben), var(--milch-unten))}
/* Lage: liegt halb auf dem Seefoto, deshalb dichter, sonst trägt der Text auf hellem Himmel nicht */
.wh-v5 .lage-karte{background:radial-gradient(120% 70% at 50% -10%, var(--milch-glanz), transparent 70%),
linear-gradient(180deg, var(--milch-dicht-oben), var(--milch-dicht-unten))}
.wh-v5 .stimme{border-radius:14px}
@media (width<=899px){.wh-v5 :is(.fruehstueck-karte,.anfrage-karte){border-radius:16px}}
/* ---------- Fakten-Leiste: schmale Eisglas-Leiste wie in v5 (backdrop-filter, Linien-Icons in Eisgrau, feine
Trennlinien, Lichtkante), aber ohne den Eissaum (v5 ::before mit eis-saum-*.webp), Dennis 2026-11-04 ---------- */
.wh-v5 .fakten{position:relative;isolation:isolate;z-index:3;margin-top:24px;border:0;border-radius:18px;overflow:hidden;
padding:2px clamp(6px,1.4vw,18px);
background:var(--fk-flocken) 24px 18px/300px 300px repeat,
radial-gradient(55% 160% at 0% 0%, var(--fk-licht-kalt), transparent 72%),
radial-gradient(45% 140% at 100% 100%, var(--fk-licht-warm), transparent 72%), var(--fk-ton);
-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
box-shadow:inset 0 0 18px -6px var(--fk-kante-glow), 0 22px 44px -28px var(--fk-schatten)}
/* Lichtkante: 1,5 px, an zwei Ecken hell, dazwischen kühl, vier kurze Lichtpunkte (Ring per Maske) */
.wh-v5 .fakten::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;padding:1.5px;
background:
radial-gradient(64px 5px at 24% 0, var(--fk-kante-licht), transparent 70%),
radial-gradient(5px 54px at 0 34%, var(--fk-kante-licht), transparent 70%),
radial-gradient(80px 5px at 71% 100%, var(--fk-kante-licht), transparent 70%),
radial-gradient(5px 40px at 100% 64%, var(--fk-kante-licht), transparent 70%),
linear-gradient(135deg, var(--fk-kante-licht) 0%, var(--fk-kante-kalt) 16%, var(--fk-kante-grund) 40%, var(--fk-kante-grund) 62%, var(--fk-kante-kalt) 86%, var(--fk-kante-licht) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.wh-v5 .fakten{background-color:var(--fk-ton-fest)}}
@media (width>=900px){.wh-v5 .fakten{margin-top:var(--fakten-luft)}}
.wh-v5 #rooms{padding-top:calc(var(--fakten-luft) - 16px)}
.wh-v5 .fakt{position:relative;border-top:0;padding:16px 10px 16px 14px}
.wh-v5 .fakt::before,.wh-v5 .fakt::after{content:"";position:absolute;pointer-events:none}
.wh-v5 .fakt::before{left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(transparent, var(--fk-linie) 30%, var(--fk-linie) 70%, transparent)}
.wh-v5 .fakt::after{top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg, transparent, var(--fk-linie) 30%, var(--fk-linie) 70%, transparent)}
.wh-v5 .fakt svg{width:22px;height:22px;color:var(--eis);stroke-width:1.35px}
.wh-v5 .fakt b{font-weight:600;letter-spacing:-.005em}
.wh-v5 .fakt span span,.wh-v5 .fakt-text > span{color:var(--glas-gedaempft)}
/* Trennlinien je Raster: 2 Spalten (Handy), 3 Spalten, 6 in einer Reihe */
.wh-v5 .fakt:nth-child(odd)::before,.wh-v5 .fakt:nth-child(-n+2)::after{display:none}
@media (width>=700px) and (width<1100px){
.wh-v5 .fakt:nth-child(odd)::before{display:block}
.wh-v5 .fakt:nth-child(3n+1)::before,.wh-v5 .fakt:nth-child(-n+3)::after{display:none}
}
@media (width>=1100px){
.wh-v5 .fakt{padding:20px 10px 20px 18px}
.wh-v5 .fakt:not(:first-child)::before{display:block}
.wh-v5 .fakt::after{display:none}
}
/* ---------- Frühstück ---------- */
.wh-v5 .fruehstueck-karte{overflow:hidden}
.wh-v5 .fr-bild{position:relative;z-index:1;background:transparent}
.wh-v5 .fr-bildplatz{background:repeating-linear-gradient(135deg, transparent 0 14px, rgb(78 118 129 / .07) 14px 15px), rgb(255 255 255 / .28);
color:var(--glas-gedaempft)}
.wh-v5 .fr-bildplatz svg{color:var(--eis)}
.wh-v5 .fr-inhalt{position:relative;z-index:1}
.wh-v5 :is(.fr-text,.fr-tage,.fr-uhr-einheit,.fr-notiz,.fr-preis span){color:var(--glas-gedaempft)}
.wh-v5 .fr-tage svg{color:var(--eis)}
.wh-v5 .fr-zeit{background:var(--glas-chip);border:0;border-radius:14px;
box-shadow:inset 0 0 0 1px var(--eis-linie), inset 0 1px 0 var(--eis-glanz)}
.wh-v5 .fr-preis{border-top-color:var(--eis-linie)}
/* ---------- Zimmer, In jedem Zimmer, Stimmen ---------- */
.wh-v5 .stimme figcaption{color:var(--glas-gedaempft)}
.wh-v5 :is(.ausstattung,.lage-karte){padding:clamp(24px,3vw,40px)}
.wh-v5 .ausstattung li:last-child{border-bottom:0}
.wh-v5 .ausstattung svg{color:#5b6a6f}
/* ---------- Häufige Fragen: dasselbe Milchglas (Material oben), Linien und Plus in Eisgrau ---------- */
.wh-v5 .faq-liste{padding:6px clamp(20px,2.6vw,36px)}
.wh-v5 .faq-eintrag + .faq-eintrag{border-top-color:var(--eis-linie)}
.wh-v5 .faq-gruppe + .faq-gruppe{border-top-color:var(--eis-linie)}
.wh-v5 .faq-antwort{color:var(--glas-gedaempft)}
.wh-v5 .faq-zeichen{border:0;color:var(--eis);background:var(--glas-chip);box-shadow:inset 0 0 0 1px var(--eis-linie), inset 0 1px 0 var(--eis-glanz)}
@media (hover:hover) and (pointer:fine){.wh-v5 .faq-eintrag summary:hover .faq-zeichen{background:var(--feld-glas-hover);border-color:transparent}}
/* ---------- Lage ---------- */
.wh-v5 .lage-karte p:not(.lead),.wh-v5 .wege-hinweis,.wh-v5 :is(.weg-klein,.weg-km){color:var(--glas-gedaempft)}
.wh-v5 .wege-titel svg{color:var(--eis)}
.wh-v5 .wege::after{box-shadow:0 0 0 4px var(--papier),0 0 14px 2px rgb(241 132 0 / .35)}
.wh-v5 .weg::before{border-color:var(--eis)}
.wh-v5 .wege::before{background:var(--eis-linie)}
/* ---------- In der Nähe: alle vier Karten gleich, Foto randlos bis an die Kante ----------
Die Scroll-Blende des Hausstandards (grosseBilder) schneidet das Bild per clip-path auf, solange die Karte
nicht weit genug im Bild ist. Auf diesen Karten sah das wie ein eingerücktes Bild in einer dunklen Karte aus
(untere Reihe). Hier bleibt nur der Zoom des Fotos; die Maske setzt GSAP inline, darum hier !important. */
.wh-v5 .ausflug{border-radius:18px;box-shadow:var(--milch-schatten)}
.wh-v5 .ausflug .m-bildmaske{-webkit-clip-path:none!important;clip-path:none!important}
.wh-v5 .ausflug::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 1px 0 rgb(255 255 255 / .32), inset 0 0 0 1px rgb(255 255 255 / .10)}
/* ---------- Kontakt "So erreichen Sie uns" (Runde 2, 2026-11-04): eine Liste klarer Zeilen ----------
Je Zeile: Linien-Icon in einer Eis-Kachel, Etikett in Satzschreibung (keine Versalien), der Wert groß, rechts die
Aktion als Pille (Route planen, Anrufen, Schreiben). Ganze Zeile ist der Link (Telefon: je Nummer eine Zeile),
mindestens 56 px hoch. Hover: Zeile hellt auf, Pille wird Seegrün. Handy: Pille nur als runder Icon-Knopf,
der Text bleibt für Bildschirmleser. Rezeption: Tage und Uhrzeit getrennt, "07:00-15:00 Uhr" bricht nie um. */
.wh-v5 .kontakt-foto{position:relative;isolation:isolate;border-radius:18px;box-shadow:var(--milch-schatten)}
.wh-v5 .kontakt-foto::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 1px 0 rgb(255 255 255 / .45), inset 0 0 0 1px var(--milch-ring)}
@media (width>=1000px){
.wh-v5 .kontakt-raster{align-items:stretch;gap:clamp(28px,3.4vw,48px)}
.wh-v5 .kontakt-foto{align-self:stretch}
.wh-v5 .kontakt-foto picture{display:block;height:100%}
.wh-v5 .kontakt-foto img{height:100%;min-height:100%;aspect-ratio:auto}
}
.wh-v5 .ko-karte{display:grid;align-content:center;gap:0;padding:clamp(8px,1.2vw,14px)}
.wh-v5 .ko-zeile{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:16px;align-items:center;
min-height:56px;padding:16px 14px;border-radius:14px;color:var(--tinte);text-decoration:none}
/* feine Trennlinie zwischen den Zeilen, ab der Textspalte (wie eine iOS-Liste) */
.wh-v5 .ko-zeile + .ko-zeile::before{content:"";position:absolute;top:0;left:74px;right:14px;height:1px;background:var(--eis-linie);pointer-events:none}
.wh-v5 .ko-icon{grid-row:1 / span 3;align-self:start;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
color:var(--eis);background:var(--glas-chip);box-shadow:inset 0 0 0 1px var(--eis-linie), inset 0 1px 0 var(--eis-glanz)}
.wh-v5 .ko-icon svg{width:22px;height:22px;stroke-width:1.5}
.wh-v5 .ko-text{display:grid;gap:3px;min-width:0}
.wh-v5 .ko-etikett{font-size:.875rem;line-height:1.3;font-weight:500;color:var(--glas-gedaempft)}
.wh-v5 .ko-wert{font-size:1.125rem;line-height:1.35;font-weight:600;letter-spacing:-.005em;color:var(--tinte);overflow-wrap:anywhere;
font-variant-numeric:tabular-nums}
.wh-v5 .ko-adresse{display:grid;gap:1px}
.wh-v5 .ko-adresse span{font-size:1rem;font-weight:400}
.wh-v5 .ko-mail{font-size:1.0625rem}
.wh-v5 .ko-zeit{font-size:1rem;font-weight:400}
.wh-v5 .ko-uhr{display:inline-block;font-weight:600;white-space:nowrap}
.wh-v5 .ko-notiz{font-size:.9375rem;color:var(--glas-gedaempft)}
.wh-v5 .ko-aktion{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px 0 16px;border-radius:999px;
font-size:.875rem;font-weight:600;white-space:nowrap;color:var(--tinte);background:var(--glas-chip);
box-shadow:inset 0 0 0 1px var(--eis-linie), inset 0 1px 0 var(--eis-glanz);
transition:background-color .18s ease, color .18s ease, box-shadow .18s ease, scale .14s var(--ease-out)}
.wh-v5 .ko-aktion svg{width:16px;height:16px;stroke-width:2;transition:transform .2s var(--ease-out)}
.wh-v5 .ko-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Telefon: Etikett oben, darunter je Nummer eine eigene klickbare Zeile */
.wh-v5 .ko-gruppe{grid-template-columns:44px minmax(0,1fr);row-gap:2px;align-items:start}
.wh-v5 .ko-gruppe > .ko-etikett{grid-column:2;padding-top:2px}
.wh-v5 .ko-nummer{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;
margin:0 -10px;padding:2px 10px;border-radius:12px;color:var(--tinte);text-decoration:none}
.wh-v5 .ko-nummer .ko-wert{font-size:1.1875rem}
/* Rezeption: keine Aktion, ruhiger */
.wh-v5 .ko-ruhig{align-items:start}
@media (hover:hover) and (pointer:fine){
.wh-v5 :is(a.ko-zeile,.ko-nummer){transition:background-color .18s ease}
.wh-v5 :is(a.ko-zeile,.ko-nummer):hover{background:var(--ko-hover)}
.wh-v5 :is(a.ko-zeile,.ko-nummer):hover .ko-aktion{background:var(--ink);color:var(--ink-text);box-shadow:none}
.wh-v5 a.ko-zeile:hover .ko-aktion svg{transform:translate(2px,0)}
.wh-v5 a.ko-zeile[href^="https"]:hover .ko-aktion svg{transform:translate(2px,-2px)}
}
.wh-v5 :is(a.ko-zeile,.ko-nummer):active .ko-aktion{scale:.96}
.wh-v5 :is(a.ko-zeile,.ko-nummer):focus-visible{outline:2px solid var(--fokus-akzent);outline-offset:2px}
@media (width<=599px){
.wh-v5 .ko-karte{padding:6px}
.wh-v5 .ko-zeile{grid-template-columns:40px minmax(0,1fr) auto;column-gap:14px;padding:14px 10px}
.wh-v5 .ko-gruppe{grid-template-columns:40px minmax(0,1fr)}
.wh-v5 .ko-zeile + .ko-zeile::before{left:64px;right:10px}
.wh-v5 .ko-icon{width:40px;height:40px;border-radius:11px}
.wh-v5 .ko-icon svg{width:20px;height:20px}
.wh-v5 .ko-aktion{width:44px;height:44px;min-height:0;padding:0;justify-content:center;gap:0}
.wh-v5 .ko-aktion-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wh-v5 .ko-aktion svg{width:18px;height:18px}
.wh-v5 .ko-wert{font-size:1.0625rem}
.wh-v5 .ko-nummer .ko-wert{font-size:1.125rem}
.wh-v5 .ko-mail{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.wh-v5 :is(.ko-aktion,.ko-aktion svg){transition:none}.wh-v5 :is(a.ko-zeile,.ko-nummer):active .ko-aktion{scale:1}}
/* ---------- Anfrage "Ihre Frage an uns" (Runde 2, 2026-11-04): Seegrün-Feld links, Formular auf Milchglas ----------
Links: leiser kühler Lichtschein oben rechts, Kachel "Freie Zimmer und Preise?" mit Icon im orangen Hauch und
hellem, flachem Knopf; "Lieber anrufen?" mit Telefon-Icon.
Rechts: Felder 64 px mit weichem Ring, die Unterkante (3:1) bleibt; Fokus = Akzentring plus weicher Halo;
Fehler = roter Hauch im Feld, roter Ring, Meldung mit Zeichen; Themen-Chips mit Linien-Icons, gewählt in
Seegrün mit Häkchen; Absenden-Knopf flach mit leichtem Glow, Pfeil rückt bei Hover, Handy volle Breite. */
.wh-v5 .anfrage-seite > *{position:relative}
.wh-v5 .anfrage-seite{background:radial-gradient(90% 55% at 100% 0%, rgb(150 196 214 / .12), rgb(150 196 214 / 0) 70%),
radial-gradient(120% 70% at 0% 100%, rgb(241 132 0 / .13), rgb(241 132 0 / 0) 60%), var(--ink)}
.wh-v5 .af-buchung{gap:12px;padding:22px 22px 24px;border:0;border-radius:18px;
background:linear-gradient(160deg, rgb(255 255 255 / .08), transparent 55%), var(--eis-kasten);
box-shadow:inset 0 0 0 1px var(--eis-kasten-rand), inset 0 1px 0 rgb(255 255 255 / .16)}
.wh-v5 .af-buchung h3{gap:12px}
.wh-v5 .af-buchung h3 svg{box-sizing:content-box;width:22px;height:22px;padding:9px;border-radius:12px;background:rgb(241 132 0 / .16)}
.wh-v5 .af-buchung .btn{border-radius:999px;min-height:48px;padding:0 22px;background:var(--ink-text);color:var(--ink);border-color:var(--ink-text)}
@media (hover:hover) and (pointer:fine){.wh-v5 .af-buchung .btn:hover{background:#fff;border-color:#fff}}
.wh-v5 .af-buchung .btn:focus-visible{outline:2px solid var(--ink-text);outline-offset:3px}
/* Icon absolut, Zeilen 44 px: als Flex-Kinder rutschte der umbrochene Link am Handy unter das Icon */
.wh-v5 .af-tel{position:relative;padding-left:28px;line-height:44px}
.wh-v5 .af-tel-icon{position:absolute;left:0;top:13px;width:18px;height:18px;color:var(--sonne);stroke-width:1.8}
.wh-v5 .anfrage-form{gap:24px}
.wh-v5 .af-raster{gap:14px}
.wh-v5 .schwebe :is(input,textarea){min-height:64px;padding:29px 18px 10px;border-radius:14px;background:var(--feld-glas);
box-shadow:inset 0 0 0 1px var(--eis-linie), inset 0 -1.5px 0 var(--feld-rand), 0 1px 2px rgb(24 54 62 / .04)}
.wh-v5 .schwebe textarea{min-height:164px;padding-top:33px}
.wh-v5 .schwebe label{left:18px;top:21px;max-width:calc(100% - 36px)}
@media (hover:hover) and (pointer:fine){.wh-v5 .schwebe :is(input,textarea):hover{background:var(--feld-glas-hover)}}
.wh-v5 .schwebe :is(input,textarea):focus{background:var(--feld-glas-hover);outline:2px solid var(--fokus-akzent);outline-offset:0;
box-shadow:0 0 0 6px var(--fokus-halo)}
/* Etikett des fokussierten Felds: --fokus-akzent #ad5800 kam auf der helleren Fokusfläche nur auf 4.49:1 */
.wh-v5 .schwebe :is(input,textarea):focus + label{color:#9a4e00}
.wh-v5 .ist-gueltig .schwebe input:not(:focus){box-shadow:inset 0 0 0 1px var(--eis-linie), inset 0 -2px 0 var(--gut)}
.wh-v5 .hat-fehler .schwebe :is(input,textarea){background:linear-gradient(var(--fehler-hauch), var(--fehler-hauch)), var(--feld-glas);
box-shadow:inset 0 0 0 1px var(--fehler), inset 0 -2px 0 var(--fehler)}
.wh-v5 .hat-fehler .schwebe :is(input,textarea):focus{outline-color:var(--fehler);box-shadow:0 0 0 6px var(--fehler-hauch)}
.wh-v5 .feld-fehler{padding-left:4px}
.wh-v5 .af-gruppe legend{margin-bottom:12px}
.wh-v5 .chips{gap:10px}
.wh-v5 .chip span{gap:8px;padding:0 18px 0 14px;border:0;background:var(--glas-chip);
box-shadow:inset 0 0 0 1px var(--feld-rand), inset 0 1px 0 var(--eis-glanz)}
.wh-v5 .chip-icon{width:18px;height:18px;flex:none;color:var(--eis);stroke-width:1.6}
.wh-v5 .chip input:checked + span{padding-left:14px;background:var(--ink);color:var(--ink-text);box-shadow:none}
.wh-v5 .chip input:checked + span .chip-icon{display:none}
@media (hover:hover) and (pointer:fine){.wh-v5 .chip input:not(:checked):hover + span{background:var(--feld-glas-hover)}}
/* Icon absolut statt flex: als Flex-Kinder fielen Text, Link und Punkt in drei Spalten auseinander */
.wh-v5 .anfrage-hinweis{position:relative;padding-left:28px}
.wh-v5 .af-hinweis-icon{position:absolute;left:0;top:3px;width:18px;height:18px;color:var(--eis);stroke-width:1.7}
.wh-v5 :is(.af-zaehler:not(.fast-voll),.anfrage-hinweis,.optional){color:var(--glas-gedaempft)}
.wh-v5 .anfrage-meldung{border:0;background:var(--fehler-hauch);box-shadow:inset 0 0 0 1.5px var(--fehler)}
.wh-v5 .af-senden{min-height:56px;padding:0 30px;box-shadow:0 12px 26px -14px rgb(241 132 0 / .55)}
.wh-v5 .af-senden .af-pfeil{transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.wh-v5 .af-senden:hover .af-pfeil{transform:translateX(4px)}}
@media (width<=599px){.wh-v5 .af-senden{width:100%}}
.wh-v5 .af-haken svg{box-sizing:content-box;padding:10px;border-radius:50%;background:rgb(241 132 0 / .14)}
@media (prefers-reduced-motion:reduce){.wh-v5 .af-senden .af-pfeil{transition:none}}
/* ---------- Kopf, Handy-Buchungsleiste, Fuß ---------- */
.wh-v5 :is(.site-header,.buchungsleiste){border-color:var(--eis-rand)}
.wh-v5 .site-footer .btn-primary{color:var(--auf-orange)}
/* ---------- Rechtsseiten: Verzeichnis und Querverweis im selben Milchglas, ohne backdrop-filter ---------- */
.wh-v5 :is(.inhalt-klapp,.recht-weiter){border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
background:linear-gradient(180deg, var(--milch-oben), var(--milch-unten));
box-shadow:inset 0 1px 0 var(--milch-kante), inset 0 0 0 1px var(--milch-ring), var(--milch-schatten)}
/* ---------- Maus-Licht: eine feine Lichtlinie an der Kartenkante in Zeigernähe (nur Maus, v6.js) ----------
Nur die Kante, keine Fläche: ein Ring per Maske, darin ein weicher Fleck, der per background-position folgt.
Einblenden 0,4 s, Ausblenden 1,2 s, ease-out. Bei reduzierter Bewegung steht der Schein fest (v6.js). */
.wh-v5 .glas-glow{position:absolute;inset:0;z-index:5;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
background:radial-gradient(closest-side, var(--glow-linie), rgb(255 250 240 / 0)) no-repeat;background-size:320px 320px;
background-position:calc(var(--gx,50%) - 160px) calc(var(--gy,30%) - 160px);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
transition:opacity 1.2s cubic-bezier(0.23,1,0.32,1)}
.wh-v5 .glas-an > .glas-glow{opacity:1;transition-duration:.4s}