/* ==========================================================================
   Haubentaucher · Seitenstil. Nur Variablen aus tokens.css.
   Teil 1: Bausteine (Knöpfe, Buchung, Kalender, Karte, Formulare, Fuß, Menü, Dialoge).
   Teil 2 (unten): Tageslauf, Intro, Seitenwechsel und die Seiten-Layouts.
   ========================================================================== */

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { --kopf-h: 76px; background: var(--flaeche); color: var(--schrift); font-family: var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); accent-color: var(--haus); caret-color: var(--haus); scrollbar-color: var(--rahmen) var(--grund); }
/* Kein scroll-behavior: smooth: Fokus-Sprünge sollen sofort sichtbar sein (fokus-stil-system) */
body { min-height: 100svh; font-size: var(--fs-text); line-height: var(--lh-text); overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; overflow-wrap: break-word; }
/* Browser-Oberflächen aus der Palette: Auswahl, Unterstreichung, Ziffern */
::selection { background: var(--haus); color: var(--creme); }
.held ::selection, .geteilt--dunkel ::selection, .fuss ::selection, .menue ::selection, .galerie ::selection { background: var(--creme); color: var(--nacht); }
a { text-underline-offset: .22em; text-decoration-thickness: 1px; }
table, data, time, output { font-variant-numeric: tabular-nums; }
.karussell, .blatt__inhalt, .menue { scrollbar-width: thin; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; }
[hidden] { display: none !important; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label { font-family: var(--sans); font-size: var(--fs-label); font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.4; }

/* Fokus (fokus-stil-system): sichtbar, nie verdeckt (scroll-padding), auf dunklem Grund hell */
:focus-visible { outline: 2px solid var(--fokus, var(--haus)); outline-offset: 3px; border-radius: 2px; }
.held :focus-visible, .vheld :focus-visible, .zheld :focus-visible, .spalt--dunkel :focus-visible, .geteilt--dunkel :focus-visible, .fuss :focus-visible, .menue :focus-visible, .galerie :focus-visible { outline-color: var(--creme); }
.kopf :focus-visible { outline-color: currentColor; }
.leiste :focus-visible, .pop :focus-visible, .blatt :focus-visible, .hinweis-dialog :focus-visible, .anfrage :focus-visible, .karte :focus-visible, .profil :focus-visible, .vorschau :focus-visible { outline-color: var(--haus); }
:target { scroll-margin-top: calc(var(--kopf-h) + 12px); }

/* Sprunglinks (sprunglinks-landmarken) */
.sprung { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--radius); background: var(--text); color: var(--creme); text-decoration: none; translate: 0 -200%; }
.sprung:focus { translate: 0 0; }

/* Platzhalter: alles, was der Kunde prüfen oder liefern muss */
.platzhalter { display: inline; padding: 1px 6px; border: 1px dashed color-mix(in oklab, currentColor 55%, transparent); border-radius: 3px; background: color-mix(in oklab, currentColor 7%, transparent); color: inherit; font-size: .8125rem; font-style: normal; line-height: 1.7; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.platzhalter::before { content: "Platzhalter · "; font-weight: 600; }
.platzhalter--block { display: block; width: fit-content; max-width: min(100%, var(--lesebreite)); margin: var(--s-5) auto 0; padding: 8px 12px; }
.platzhalter-text { font-size: .75rem; color: var(--schrift-leise); }

/* Links: Unterstreichung bleibt stehen, Hover lässt sie neu durchlaufen (unterstreichung-varianten, Variante wiederkehr) */
/* Zwei Linien: die alte läuft nach rechts aus, die neue kommt von links. Jede Länge ist eine eigene registrierte Größe,
   deshalb hat jede ihre eigene Dauer und Verzögerung, und Maus rein/raus mitten im Lauf springt nicht. */
@property --linie-alt { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --linie-neu { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.linie { --linie-alt: 100%; --linie-neu: 0%; text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% 100% / var(--linie-alt) 1px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / var(--linie-neu) 1px no-repeat; padding-bottom: 1px; border: 0; color: inherit; font: inherit; cursor: pointer;
  transition: --linie-alt var(--dur-zu) var(--ease-zu), --linie-neu var(--dur-zu) var(--ease-zu); }
button.linie { background-color: transparent; padding-inline: 0; }
@media (hover: hover) and (pointer: fine) {
  .linie:hover { --linie-alt: 0%; --linie-neu: 100%; transition: --linie-alt var(--dur-zu) var(--ease-zu), --linie-neu var(--dur-auf) var(--ease-auf) var(--dur-zu); }
}
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; cursor: pointer; }
.textlink--pfeil::after { content: ""; width: 18px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; transition: translate var(--dur-zu) var(--ease-zu); }
.textlink--extern::after { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .textlink--pfeil:hover::after { translate: 4px 0; transition: translate var(--dur-auf) var(--ease-auf); } }

/* ---------- Knöpfe (muster.button) ---------- */
/* Haupthandlung auf ruhigem Grund: pfeil-icon-button, Variante tausch (Pfeil wechselt im Kreis) */
.knopf-pfeil { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: var(--knopf-h); padding: 6px 6px 6px 24px; border: 0; border-radius: var(--knopf-radius); background: var(--haus); color: var(--creme); font: 600 .8125rem/1.25 var(--sans); font-stretch: var(--breit); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-ui) var(--ease-zu), scale var(--dur-ui) var(--ease-zu); }
.knopf-pfeil--klein { min-height: var(--knopf-h-klein); padding: 4px 4px 4px 20px; }
.knopf-pfeil__kreis { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--creme); color: var(--haus); overflow: hidden; }
.knopf-pfeil--klein .knopf-pfeil__kreis { width: var(--pfeil-kreis); height: var(--pfeil-kreis); }
.knopf-pfeil__kreis svg { width: 16px; height: 16px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pfeil-a, .pfeil-b { transition: translate var(--dur-zu) var(--ease-zu); }
.pfeil-b { translate: calc(var(--pfeil-weg) * -1) 0; }
@media (hover: hover) and (pointer: fine) {
  .knopf-pfeil:hover { background: var(--haus-tief); transition-timing-function: var(--ease-auf); }
  .knopf-pfeil:hover .pfeil-a { translate: var(--pfeil-weg) 0; transition: translate var(--dur-auf) var(--ease-auf); }
  .knopf-pfeil:hover .pfeil-b { translate: 0 0; transition: translate var(--dur-auf) var(--ease-auf) var(--stagger-ui); }
}
.knopf-pfeil:focus-visible .pfeil-a { translate: var(--pfeil-weg) 0; transition: translate var(--dur-auf) var(--ease-auf); }
.knopf-pfeil:focus-visible .pfeil-b { translate: 0 0; transition: translate var(--dur-auf) var(--ease-auf) var(--stagger-ui); }
.knopf-pfeil:active { scale: .97; }
.knopf-pfeil:disabled, .knopf-pfeil[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Über dem Foto: glas-button, Variante frost (nur ein Glas-Element pro Ansicht: der Buchen-Knopf im Kopf über dem Hero) */
.knopf { position: relative; isolation: isolate; display: inline-grid; place-items: center; min-height: var(--knopf-h-klein); padding: 0 18px; border: var(--glas-saum) solid transparent; border-radius: var(--knopf-radius); background: var(--glas-saum-farbe) border-box; -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); color: var(--glas-text); font: 600 .8125rem/1 var(--sans); font-stretch: var(--breit); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu), scale var(--dur-ui) var(--ease-zu); }
.knopf__kern { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glas-kern); box-shadow: 0 0 5px 2px var(--glas-kern); transition: background-color var(--dur-ui) var(--ease-zu); }
@media (hover: hover) and (pointer: fine) { .knopf:hover .knopf__kern { background: rgb(254 242 227 / .8); transition-timing-function: var(--ease-auf); } }
.knopf:active { scale: .97; }
.kopf.ist-fest .knopf { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--haus); border-color: var(--haus); color: var(--creme); }
.kopf.ist-fest .knopf__kern { opacity: 0; }
@media (prefers-reduced-transparency: reduce) { .knopf { -webkit-backdrop-filter: none; backdrop-filter: none; } .knopf__kern { background: var(--creme); } }

/* Kleine Knöpfe in Popovern und Dialogen */
.knopf-klein { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--knopf-radius); background: var(--text); color: var(--creme); font-size: .8125rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: .07em; text-transform: uppercase; transition: background-color var(--dur-ui) var(--ease-zu); }
.knopf-klein--haus { background: var(--haus); }
.knopf-klein:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .knopf-klein:hover:not(:disabled) { background: var(--haus-tief); transition-timing-function: var(--ease-auf); } }
.rund { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(254 242 227 / .55); background: transparent; color: var(--creme); transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu); }
.rund svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .rund:hover { background: var(--creme); color: var(--text); transition-timing-function: var(--ease-auf); } }
.rund--hell { border-color: var(--rahmen); color: var(--schrift); }
@media (hover: hover) and (pointer: fine) { .reiter button:hover { color: var(--schrift); transition-timing-function: var(--ease-auf); } }
@media (hover: hover) and (pointer: fine) { .rund--hell:hover { background: var(--text); color: var(--creme); } }
.rund:disabled { opacity: .35; cursor: default; }
.x-knopf { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); background: none; }
.x-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.x-knopf--hell { border-color: rgb(254 242 227 / .4); color: var(--creme); }

/* Formular-Absenden mit Zuständen (button-zustaende) */
.knopf-zustand { position: relative; display: inline-grid; place-items: center; min-height: var(--knopf-h); min-width: 220px; padding: 0 28px; border: 0; border-radius: var(--knopf-radius); background: var(--haus); color: var(--creme); font: 600 .8125rem/1.2 var(--sans); font-stretch: var(--breit); letter-spacing: .07em; text-transform: uppercase; transition: background-color var(--dur-ui) var(--ease-zu), scale var(--dur-ui) var(--ease-zu); }
.knopf-zustand__ebene { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity var(--dur-zu) var(--ease-zu), scale var(--dur-zu) var(--ease-zu); }
.knopf-zustand__laden, .knopf-zustand__ok { opacity: 0; scale: .9; }
.knopf-zustand__laden i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(254 242 227 / .35); border-top-color: var(--creme); animation: drehen 600ms linear infinite; }
.knopf-zustand__ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.knopf-zustand[data-state="loading"] .knopf-zustand__label, .knopf-zustand[data-state="erfolg"] .knopf-zustand__label { opacity: 0; scale: .9; }
.knopf-zustand[data-state="loading"] .knopf-zustand__laden, .knopf-zustand[data-state="erfolg"] .knopf-zustand__ok { opacity: 1; scale: 1; transition-timing-function: var(--ease-auf); transition-duration: var(--dur-auf); }
.knopf-zustand[data-state="erfolg"] .knopf-zustand__ok svg { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-auf) var(--ease-auf); }
.knopf-zustand[aria-disabled="true"] { cursor: progress; }
@media (hover: hover) and (pointer: fine) { .knopf-zustand:hover { background: var(--haus-tief); transition-timing-function: var(--ease-auf); } }
.knopf-zustand:active { scale: .97; }
@keyframes drehen { to { rotate: 360deg; } }

/* Helle Bausteine behalten ihre Schriftfarben, egal welche Tageszeit die Seite gerade hat */
.leiste, .pop, .blatt, .hinweis-dialog, .karte, .profil, .anfrage, .vorschau, .karte-2k__hinweis, .echtheit, .leistung, .betrag, .wahl, .feld-text input, .feld-text textarea, .sprache-pop, .kz-pop, .daumen, .monat-raster li, .inhalt-liste, .kurzfassung, .luecke, .wege-liste a, .jahr li.ist-naechster { --schrift: var(--text); --schrift-leise: var(--leise); --fokus: var(--haus); }

/* ---------- Kopf ---------- */
.kopf { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: var(--s-5); min-height: var(--kopf-h); padding: 10px var(--rand); color: var(--creme); transition: background-color var(--dur-zu) var(--ease-zu), color var(--dur-zu) var(--ease-zu), box-shadow var(--dur-zu) var(--ease-zu); }
.kopf.ist-fest { background: var(--flaeche); color: var(--schrift); box-shadow: 0 1px 0 color-mix(in oklab, var(--schrift) 14%, transparent); transition-timing-function: var(--ease-auf); transition-duration: var(--dur-auf); }
.kopf::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(180deg, rgb(30 28 26 / .38), transparent); opacity: 1; transition: opacity var(--dur-zu) var(--ease-zu); pointer-events: none; }
.kopf.ist-fest::before { opacity: 0; }
.marke { display: grid; text-decoration: none; line-height: 1; margin-right: auto; }
.marke__name { font: italic 400 1.75rem/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.01em; }
.marke__zusatz { margin-top: 5px; font-size: .6875rem; font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; opacity: .9; }
.kopf__nav ul { list-style: none; padding: 0; display: flex; gap: clamp(14px, 2vw, 32px); }
.kopf__nav a { position: relative; display: inline-block; padding: 12px 0; text-decoration: none; font-size: .9375rem; font-weight: 500; }
.kopf__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-zu) var(--ease-zu); }
.kopf__nav a[aria-current="true"]::after { transform: scaleX(1); transition: transform var(--dur-auf) var(--ease-auf); }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover::after { transform: scaleX(1); transition: transform var(--dur-auf) var(--ease-auf); } }
.kopf__rechts { display: flex; align-items: center; gap: var(--s-3); }
.sprache-knopf { anchor-name: --sprache; display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; background: none; font-size: .875rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: .06em; }
.sprache-knopf svg { width: 12px; height: 12px; }
.sprache-pop { position-anchor: --sprache; inset: auto; top: anchor(bottom); right: anchor(right); margin: 8px 0 0; padding: 6px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); color: var(--schrift); box-shadow: 0 18px 50px rgb(40 34 28 / .18); opacity: 0; translate: 0 -6px; transition: opacity var(--dur-zu) var(--ease-zu), translate var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) allow-discrete, display var(--dur-zu) allow-discrete; }
.sprache-pop:popover-open { opacity: 1; translate: 0 0; transition-duration: var(--dur-auf); transition-timing-function: var(--ease-auf); }
@starting-style { .sprache-pop:popover-open { opacity: 0; translate: 0 -6px; } }
.sprache-pop ul { list-style: none; padding: 0; }
.sprache-pop a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 4px; text-decoration: none; }
.sprache-pop a[aria-current] { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .sprache-pop a:hover { background: var(--grund); } }
.menue-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 8px; border: 0; background: none; font-size: .8125rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: .07em; text-transform: uppercase; }
.menue-knopf__striche { display: grid; gap: 5px; width: 22px; }
.menue-knopf__striche i { display: block; height: 1.5px; background: currentColor; }
.menue-knopf__striche i:last-child { width: 70%; justify-self: end; }

/* ---------- Hero mit Signatur-Slideshow ---------- */
.held { position: relative; height: max(600px, min(88svh, 940px)); overflow: hidden; background: var(--bild-grund); color: var(--creme); }
.held__buehne { position: absolute; inset: 0; touch-action: pan-y; }
.dia { position: absolute; inset: 0; margin: 0; }
.dia:not(.ist-aktiv):not(.ist-im-wechsel) { visibility: hidden; }
.dia__rahmen { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.dia__bild { position: absolute; inset: -0.5px; width: calc(100% + 1px); max-width: none; height: calc(100% + 1px); object-fit: cover; object-position: 50% 58%; }
html[data-bewegung="voll"] .dia__bild--erst { animation: zurueck var(--dur-lux-lg) var(--ease-lux-out) both; }
@keyframes zurueck { from { scale: 1.06; } to { scale: 1; } }
.held::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(30 28 26 / .30) 0, transparent 24%, transparent 46%, rgb(30 28 26 / .58) 100%), radial-gradient(90% 70% at 0% 82%, rgb(30 28 26 / .6) 0, rgb(30 28 26 / .3) 50%, transparent 82%); }
.held__text { position: absolute; z-index: 2; left: var(--rand); right: var(--rand); bottom: clamp(96px, 15vh, 156px); max-width: 1100px; }
.held h1 { font-size: var(--fs-h1); font-weight: 300; font-variation-settings: "opsz" 72; letter-spacing: var(--track-h); line-height: 1; max-width: 12.5ch; }
.held__steuer { position: absolute; z-index: 2; right: var(--rand); bottom: clamp(96px, 15vh, 156px); }
.held__reihe { display: flex; align-items: center; gap: var(--s-3); }
.held__striche { display: flex; gap: 6px; margin-right: var(--s-3); }
.held__striche i { width: 26px; height: 2px; background: rgb(254 242 227 / .35); transition: background-color var(--dur-zu) var(--ease-zu); }
.held__striche i.ist-aktiv { background: var(--creme); transition-timing-function: var(--ease-auf); }

/* ---------- Buchungsleiste (Variante leiste, aus der Demo übersetzt) ---------- */
.ort-leiste { position: relative; z-index: 5; margin: -46px auto 0; padding: 0 var(--rand); max-width: calc(1180px + 2 * var(--rand)); scroll-margin-top: calc(var(--kopf-h) + 60px); }
.leiste { color: var(--schrift); display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) auto; align-items: stretch; min-height: 92px; background: var(--creme); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(62 58 55 / .08), 0 18px 50px rgb(62 58 55 / .14); }
.feld { position: relative; display: flex; align-items: stretch; min-width: 0; }
.feld--datum { anchor-name: --datum; }
.feld--gaeste { anchor-name: --gaeste; border-left: 1px solid var(--linie); }
.feld__knopf { flex: 1; min-width: 0; display: grid; align-content: center; gap: 4px; padding: 14px 26px; border: 0; background: none; text-align: left; transition: background-color var(--dur-ui) var(--ease-zu); }
.feld__knopf[aria-expanded="true"] { background: rgb(110 90 71 / .07); transition-timing-function: var(--ease-auf); }
@media (hover: hover) and (pointer: fine) { .feld__knopf:hover { background: rgb(110 90 71 / .07); transition-timing-function: var(--ease-auf); } }
.feld__knopf .label { color: var(--schrift-leise); }
.feld__wert { font: 400 1.375rem/1.2 var(--serif); font-variation-settings: "opsz" 24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feld__wert.leer { color: var(--schrift-leise); font-style: italic; }
.naechte { align-self: center; flex: none; display: grid; place-items: center; min-width: 74px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linie); font-size: .8125rem; font-weight: 520; font-variant-numeric: tabular-nums; color: var(--schrift-leise); transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu); }
.naechte.voll { background: var(--text); border-color: var(--text); color: var(--creme); }
.leiste .los { anchor-name: --los; align-self: center; margin: 12px; }
.mobil-zeile, .mobil-menue { display: none; }
.nur-schmal { display: none; }
.nativ { display: none; }
html:not(.js) .feld { display: none; }
html:not(.js) .nativ { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 18px; align-items: end; }
html:not(.js) .leiste { grid-template-columns: minmax(0, 1fr) auto; }
.nativ label { display: grid; gap: 4px; font-size: var(--fs-label); font-weight: 560; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); }
.nativ input, .nativ select { min-height: 44px; padding: 0 10px; border: 1px solid var(--rahmen); border-radius: 4px; background: var(--karte); color: var(--text); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.leiste-unten { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-5); padding: 0 var(--rand); }
.vorteile { text-align: center; font-size: var(--fs-klein); color: var(--schrift); }
.preis-hinweis { max-width: 80ch; text-align: center; font-size: .8125rem; color: var(--schrift-leise); }
.preis-hinweis .textlink { min-height: 0; font-size: inherit; font-weight: 500; color: var(--schrift); }
.preis-hinweis--links { text-align: left; margin-top: var(--s-4); }

/* Popover am Desktop: verankert, asymmetrisches Tempo */
.pop { margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); color: var(--schrift); box-shadow: 0 24px 70px rgb(40 34 28 / .22); overflow: visible; inset: auto; opacity: 0; translate: 0 8px;
  transition: opacity var(--dur-zu) var(--ease-zu), translate var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) var(--ease-zu) allow-discrete, display var(--dur-zu) var(--ease-zu) allow-discrete; }
.pop:popover-open { opacity: 1; translate: 0 0; transition-duration: var(--dur-auf); transition-timing-function: var(--ease-auf); }
@starting-style { .pop:popover-open { opacity: 0; translate: 0 8px; } }
.pop--kal { position-anchor: --datum; top: anchor(bottom); left: anchor(left); margin-top: 10px; width: 764px; max-width: calc(100vw - 24px); position-try-fallbacks: --oben, --rechts, --rechts-oben; position-try-order: most-height; }
.pop--gaeste { position-anchor: --gaeste; top: anchor(bottom); left: anchor(left); margin-top: 10px; width: 360px; max-width: calc(100vw - 24px); position-try-fallbacks: --oben, --rechts, --rechts-oben; }
.pop--ueber { position-anchor: --los; top: anchor(bottom); right: anchor(right); margin-top: 10px; width: 420px; max-width: calc(100vw - 24px); position-try-fallbacks: --oben-r; }
@position-try --oben { top: auto; bottom: anchor(top); margin: 0 0 10px; }
@position-try --rechts { left: auto; right: anchor(right); }
@position-try --rechts-oben { left: auto; right: anchor(right); top: auto; bottom: anchor(top); margin: 0 0 10px; }
@position-try --oben-r { top: auto; bottom: anchor(top); margin: 0 0 10px; }
.pop.ohne-anker { position: fixed; }

/* Kalender */
.kal { display: grid; gap: 10px; padding: 16px 20px 14px; }
.kal__kopf { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.kal__nav { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); background: none; }
.kal__nav:disabled { opacity: .3; cursor: default; }
.kal__nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kal__hinweis { text-align: center; font-size: var(--fs-klein); min-height: 1.6em; }
.kal__hinweis b { font-weight: 600; }
.kal__hinweis.fehler { color: var(--fehler); }
.kal__monate { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.monat { width: 100%; border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; }
.monat caption { font: 400 1.1875rem/1.2 var(--serif); font-variation-settings: "opsz" 24; padding-bottom: 4px; text-align: left; }
.monat th { font-size: .6875rem; font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); padding-bottom: 4px; }
.monat td { position: relative; height: 40px; padding: 0; text-align: center; font-size: var(--fs-klein); font-variant-numeric: tabular-nums; cursor: pointer; outline: none; }
.monat td:empty { cursor: default; }
.monat td span { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu); }
@media (hover: hover) and (pointer: fine) { .monat td:not(:empty):not([aria-disabled="true"]):hover span { box-shadow: inset 0 0 0 1px var(--text); } }
.monat td:focus-visible span { box-shadow: 0 0 0 2px var(--karte), 0 0 0 4px var(--haus); }
.monat td.heute span::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--haus); }
.monat td.vergangen { color: #8f8a82; cursor: default; }
.monat td[aria-disabled="true"] { cursor: not-allowed; }
.monat td.belegt span { color: #7b756d; text-decoration: line-through; background: repeating-linear-gradient(135deg, transparent 0 4px, rgb(130 120 108 / .18) 4px 5px); }
.monat td.gesperrt span { color: #8f8a82; }
.monat td.min span { text-decoration: underline dotted; text-underline-offset: 4px; }
.monat td.band::before { content: ""; position: absolute; top: 1px; bottom: 1px; left: 0; right: 0; background: var(--band); }
.monat td.start::before { left: 50%; }
.monat td.ende::before { right: 50%; }
.monat td.vorschau::before { background: transparent; border-block: 1px dashed var(--rahmen); }
.monat td.start span, .monat td.ende span { background: var(--text); color: var(--creme); text-decoration: none; }
.kal__fuss { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--linie); }
.legende { list-style: none; padding: 0; display: flex; gap: 14px; font-size: .8125rem; color: var(--schrift-leise); margin-right: auto; }
.legende li { display: flex; align-items: center; gap: 7px; }
.legende i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.legende .l-belegt { background: repeating-linear-gradient(135deg, transparent 0 3px, rgb(130 120 108 / .35) 3px 4px); border: 1px solid var(--linie); }
.legende .l-min { border: 1px dotted var(--leise); }
.summe { font-size: var(--fs-klein); font-variant-numeric: tabular-nums; }
.summe b { font: 400 1.25rem/1 var(--serif); }

/* Gäste */
.gaeste { display: grid; gap: 4px; padding: 18px 22px; }
.zaehler-zeile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.zaehler-zeile b { display: block; font-weight: 560; }
.zaehler-zeile small { color: var(--schrift-leise); font-size: .8125rem; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rahmen); background: none; transition: border-color var(--dur-ui) var(--ease-zu); }
.stepper svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) and (pointer: fine) { .stepper button:hover:not(:disabled) { border-color: var(--text); transition-timing-function: var(--ease-auf); } }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper output { min-width: 2ch; text-align: center; font: 400 1.375rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.alter { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 12px 0 4px; }
.alter:empty { display: none; }
.alter label { display: grid; gap: 3px; font-size: .75rem; color: var(--schrift-leise); }
.gaeste__hinweis { font-size: .8125rem; color: var(--schrift-leise); min-height: 1.5em; padding-top: 8px; }
.gaeste__hinweis.fehler { color: var(--fehler); }
.gaeste__fuss { display: flex; justify-content: flex-end; padding-top: 8px; }

/* Kinderalter: animiertes-select (appearance: base-select, sonst natives Select) */
.waehler { min-height: 44px; padding: 0 10px; border: 1px solid var(--rahmen); border-radius: 4px; background: var(--karte); font-size: var(--fs-klein); color: var(--text); }
.waehler.fehlt { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler); }
@supports (appearance: base-select) {
  .waehler, .waehler::picker(select) { appearance: base-select; }
  .waehler { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .waehler::picker-icon { transition: rotate var(--dur-zu) var(--ease-zu); }
  .waehler:open::picker-icon { rotate: 180deg; transition: rotate var(--dur-auf) var(--ease-auf); }
  .waehler::picker(select) { margin-top: 4px; padding: 4px; border: 1px solid var(--linie); border-radius: 6px; background: var(--karte); box-shadow: 0 18px 40px rgb(40 34 28 / .18); max-height: 260px; opacity: 0; translate: 0 -6px;
    transition: opacity var(--dur-zu) var(--ease-zu), translate var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) allow-discrete, display var(--dur-zu) allow-discrete; }
  .waehler:open::picker(select) { opacity: 1; translate: 0 0; transition-duration: var(--dur-auf); transition-timing-function: var(--ease-auf); }
  @starting-style { .waehler:open::picker(select) { opacity: 0; translate: 0 -6px; } }
  .waehler option { min-height: 40px; padding: 0 10px; border-radius: 4px; }
  .waehler option:checked { background: var(--band); }
  .waehler option:hover, .waehler option:focus-visible { background: var(--grund); }
}

/* Übergabe-Zusammenfassung */
.ueber { padding: 22px 24px 20px; display: grid; gap: 14px; }
.ueber h2 { font: 400 1.5rem/1.15 var(--serif); font-variation-settings: "opsz" 24; }
.ueber dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: var(--fs-klein); padding: 12px 0; border-block: 1px solid var(--linie); }
.ueber dt { color: var(--schrift-leise); }
.ueber dd { font-variant-numeric: tabular-nums; }
.ueber__daten { font-size: .8125rem; color: var(--schrift-leise); line-height: 1.55; }
.ueber__daten .textlink { min-height: 0; font-size: inherit; color: var(--schrift); }
.ueber__knoepfe { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Telefon: Bottom-Sheet */
.blatt { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92svh; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--karte); color: var(--schrift); display: none; flex-direction: column; translate: 0 100%;
  transition: translate var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) allow-discrete, display var(--dur-zu) allow-discrete; }
.blatt[open] { display: flex; translate: 0 0; transition-duration: var(--dur-auf); transition-timing-function: var(--ease-auf); }
@starting-style { .blatt[open] { translate: 0 100%; } }
.blatt::backdrop, .galerie::backdrop, .hinweis-dialog::backdrop { background: rgb(30 28 26 / 0); transition: background-color var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) allow-discrete, display var(--dur-zu) allow-discrete; }
.blatt[open]::backdrop, .hinweis-dialog[open]::backdrop { background: rgb(30 28 26 / .45); }
@starting-style { .blatt[open]::backdrop, .hinweis-dialog[open]::backdrop { background: rgb(30 28 26 / 0); } }
.blatt__kopf { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--linie); }
.blatt__kopf::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--linie); }
.blatt__kopf h2 { font: 400 1.375rem/1.2 var(--serif); }
.blatt__inhalt { overflow-y: auto; overscroll-behavior: contain; }
.blatt .kal__monate { grid-template-columns: 1fr; gap: 18px; }
.blatt .kal { padding: 14px 16px; }
.blatt .monat td { height: 46px; }
.blatt .monat td span { width: 44px; height: 44px; }
.blatt .kal__fuss { display: none; }
.blatt .gaeste { border-top: 8px solid var(--grund); padding: 14px 16px 18px; }
.blatt .gaeste__fuss { display: none; }
.blatt__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); background: var(--karte); }

/* ---------- Sektionen allgemein ---------- */
.sektion { padding: var(--sektion) var(--rand); }
.kopfzeile { display: grid; gap: var(--s-4); max-width: var(--max); margin: 0 auto var(--s-7); }
.kopfzeile h2, .geteilt__titel, .stimmen__kopf h2, .anreise__kopf h2, .angebote__kopf h2, .programm__kopf h2, .karte__kopf h2, .gutschein h2 { font-size: var(--fs-h2); font-variation-settings: "opsz" 72; letter-spacing: var(--track-h); line-height: 1.02; max-width: 16ch; }

/* ---------- Zimmer: Akkordeon-Paneele ---------- */
.zimmer { padding-top: calc(var(--sektion) * .7); }
.paneele { container-type: inline-size; display: flex; gap: 6px; min-height: clamp(440px, 58vh, 580px); max-width: var(--max); margin: 0 auto; }
.paneel { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: var(--radius); background: var(--bild-grund); color: var(--creme); transition: flex-grow var(--dur-lux-flaeche) var(--ease-lux); }
.paneel.ist-offen { flex-grow: 5; }
.paneel__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; scale: 1.001; transition: scale var(--dur-lux) var(--ease-lux); }
.paneel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(30 28 26 / .42) 0, rgb(30 28 26 / .05) 30%, rgb(30 28 26 / .2) 55%, rgb(30 28 26 / .78) 100%); pointer-events: none; }
.paneel:not(.ist-offen)::after { background: linear-gradient(180deg, rgb(30 28 26 / .5), rgb(30 28 26 / .38)); }
.paneel__kopf { position: absolute; inset: 0; z-index: 2; font: inherit; }
.paneel__knopf { position: absolute; inset: 0; width: 100%; padding: 22px; border: 0; background: none; color: inherit; text-align: left; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
/* Name senkrecht; beim Öffnen blendet er schnell aus, beim Schließen erst wieder ein, wenn das Paneel schmal genug ist */
.paneel__knopf { justify-content: flex-end; }
.paneel__name { font: 300 clamp(1.5rem, 1.2rem + .8vw, 2rem)/1.1 var(--serif); font-variation-settings: "opsz" 48; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; transition: opacity var(--dur-auf) var(--ease-auf) calc(var(--dur-lux-flaeche) * .5); }
.paneel.ist-offen .paneel__name { opacity: 0; transition: opacity var(--dur-ui) var(--ease-zu); }
.paneel__knopf:focus-visible { outline-offset: -6px; }
.paneel__inhalt { position: relative; z-index: 3; width: min(560px, calc((100cqi - 18px) * 5 / 8)); padding: 0 26px 24px; visibility: hidden; opacity: 0; transition: opacity var(--dur-zu) var(--ease-zu), visibility 0s linear var(--dur-zu); pointer-events: none; }
.paneel.ist-offen .paneel__inhalt { visibility: visible; opacity: 1; pointer-events: none; transition: opacity var(--dur-auf) var(--ease-auf) calc(var(--dur-lux-flaeche) * .45), visibility 0s; }
.paneel.ist-offen .paneel__inhalt { display: grid; gap: var(--s-3); }
.paneel__inhalt .fakten { order: 2; }
.paneel__titel-offen { font: 300 clamp(2rem, 1.4rem + 1.8vw, 3.25rem)/1 var(--serif); letter-spacing: var(--track-h); }
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 10px 22px; }
.fakten div { border-top: 1px solid rgb(254 242 227 / .5); padding-top: 8px; }
.fakten dt { font-size: .6875rem; font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; opacity: .85; }
.fakten dd { font: 400 1.125rem/1.3 var(--serif); }
.paneel__text { order: 3; max-width: 46ch; }
.paneel__preis { order: 4; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: var(--fs-klein); }
.paneel__preis b { font: 400 1.75rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.paneel__inhalt .textlink { order: 5; justify-self: start; color: var(--creme); }
.paneel.ist-offen .paneel__inhalt .textlink { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { html[data-bewegung="voll"] .paneel.ist-offen:hover .paneel__bild { scale: 1.04; transition-timing-function: var(--ease-lux-out); transition-duration: var(--dur-lux-lg); } }

/* Galerie im Vollbild */
.galerie { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #1f1c1a; color: var(--creme); display: none; grid-template-rows: auto minmax(0, 1fr) auto; opacity: 0;
  transition: opacity var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) allow-discrete, display var(--dur-zu) allow-discrete; }
.galerie[open] { display: grid; opacity: 1; transition-duration: var(--dur-auf); transition-timing-function: var(--ease-auf); }
@starting-style { .galerie[open] { opacity: 0; } }
.galerie__kopf { display: flex; align-items: center; gap: var(--s-4); padding: 14px var(--rand); }
.galerie__kopf h2 { font: 300 1.75rem/1.1 var(--serif); margin-right: auto; }
.galerie__buehne { display: grid; min-height: 0; padding: 0 var(--rand); }
.galerie__buehne img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.galerie__steuer { display: flex; align-items: center; justify-content: center; gap: var(--s-4); padding: 14px var(--rand) calc(18px + env(safe-area-inset-bottom)); }
.galerie__daumen { display: flex; gap: 8px; }
.galerie__daumen button { width: 72px; height: 48px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; opacity: .55; overflow: hidden; transition: opacity var(--dur-ui) var(--ease-zu); }
.galerie__daumen button[aria-current="true"] { opacity: 1; border-color: var(--creme); }
.galerie__daumen img { width: 100%; height: 100%; object-fit: cover; }
::view-transition-group(galerie-bild) { animation-duration: var(--dur-auf); animation-timing-function: var(--ease-auf); }
html.vt-zu::view-transition-group(galerie-bild) { animation-duration: var(--dur-zu); animation-timing-function: var(--ease-zu); }
::view-transition-old(galerie-bild) { object-fit: cover; }
::view-transition-new(galerie-bild) { object-fit: contain; }

/* ---------- Geteilte Sektion mit stehendem Bild (split-screen-sticky-seiten, Variante bild) ---------- */
.geteilt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
.geteilt--dunkel { background: var(--nacht); color: var(--nacht-text); }
.geteilt__buehne { position: sticky; top: var(--kopf-h); height: calc(100svh - var(--kopf-h)); overflow: hidden; }
.geteilt__rahmen { position: absolute; inset: 0; background: var(--bild-grund); }
.geteilt__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.geteilt__bild.ist-aktiv, .geteilt__bild.ist-vorher { visibility: visible; }
.geteilt__bild.ist-aktiv { z-index: 2; }
.geteilt__text { padding: var(--sektion) var(--rand) calc(var(--sektion) * .6) clamp(32px, 6vw, 112px); }
.geteilt__titel { margin-bottom: var(--s-6); }
.block { position: relative; min-height: 62svh; display: grid; align-content: center; gap: var(--s-3); max-width: 52ch; padding-block: var(--s-7); border-top: 1px solid var(--linie); }
.geteilt--dunkel .block { border-top-color: rgb(243 238 231 / .18); }
.block::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: currentColor; transform: scaleX(.6); transform-origin: 0 50%; opacity: .5; transition: transform var(--dur-zu) var(--ease-zu), opacity var(--dur-zu) var(--ease-zu); }
.block.ist-aktiv::before { transform: scaleX(1); opacity: 1; transition: transform calc(var(--dur-auf) * 2) var(--ease-auf), opacity calc(var(--dur-auf) * 2) var(--ease-auf); }
.block__bild { display: none; }
.block h3 { font-size: var(--fs-h3); font-variation-settings: "opsz" 36; line-height: 1.15; letter-spacing: -.01em; }
.block__meta { font-size: var(--fs-klein); color: var(--schrift-leise); }
.geteilt--dunkel .block__meta { color: var(--nacht-leise); }
.block .textlink { justify-self: start; }

/* ---------- Karte der Stube ---------- */
.karte { background: var(--creme); text-align: center; }
.karte__kopf { display: grid; justify-items: center; gap: var(--s-4); max-width: 760px; margin: 0 auto var(--s-6); }
.karte__kopf h2 { max-width: 14ch; }
.reiter { display: flex; justify-content: center; gap: var(--s-2); max-width: 760px; margin: 0 auto var(--s-6); border-bottom: 1px solid var(--linie); }
.reiter button { position: relative; display: grid; justify-items: center; min-height: 56px; padding: 10px 22px 14px; border: 0; background: none; font: 400 1.375rem/1.1 var(--serif); color: var(--schrift-leise); transition: color var(--dur-ui) var(--ease-zu); }
.reiter button[aria-pressed="true"] { color: var(--schrift); }
.reiter button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--haus); transform: scaleX(0); transition: transform var(--dur-zu) var(--ease-zu); }
.reiter button[aria-pressed="true"]::after { transform: scaleX(1); transition: transform var(--dur-auf) var(--ease-auf); }
.menue-tafeln { max-width: 720px; margin: 0 auto; text-align: left; }
.tafel { display: grid; gap: var(--s-5); }
.js .tafel[hidden] { display: none; }
html:not(.js) .tafel + .tafel { margin-top: var(--s-7); }
.js .tafel:not([hidden]) { animation: tafel-ein var(--dur-auf) var(--ease-auf); }
@keyframes tafel-ein { from { opacity: 0; translate: 0 6px; } }
.tafel__titel { font: 400 1.5rem/1.2 var(--serif); text-align: center; }
.js .tafel__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gaenge, .begleitung { list-style: none; padding: 0; }
.gaenge li, .begleitung li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: start; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--linie); }
.begleitung li { grid-template-columns: minmax(0, 1fr) auto; }
.gang__nr { font: italic 400 1.125rem/1.6 var(--serif); color: var(--schrift-leise); }
.gaenge h4, .begleitung h4 { font: 400 1.75rem/1.15 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -.01em; }
.gaenge p, .begleitung p { margin-top: 4px; color: var(--schrift-leise); }
.kuerzel { anchor-name: --kz-anker; min-width: 44px; min-height: 32px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--rahmen); border-radius: 999px; background: none; font-size: .6875rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: .08em; white-space: nowrap; transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu); }
.kuerzel[aria-expanded="true"] { background: var(--text); color: var(--creme); border-color: var(--text); }
.kz-pop { position-anchor: --kz; inset: auto; top: anchor(bottom); right: anchor(right); margin: 8px 0 0; max-width: 280px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); color: var(--schrift); font-size: .875rem; text-align: left; box-shadow: 0 16px 40px rgb(40 34 28 / .18); position-try-fallbacks: --kz-oben;
  opacity: 0; translate: 0 -6px; transition: opacity var(--dur-zu) var(--ease-zu), translate var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) allow-discrete, display var(--dur-zu) allow-discrete; }
.kz-pop:popover-open { opacity: 1; translate: 0 0; transition-duration: var(--dur-auf); transition-timing-function: var(--ease-auf); }
@starting-style { .kz-pop:popover-open { opacity: 0; translate: 0 -6px; } }
@position-try --kz-oben { top: auto; bottom: anchor(top); margin: 0 0 8px; }
.kz-pop ul { padding-left: 1.1em; }
.tafel__preis, .begleitung data { font: 400 1.5rem/1.2 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.tafel__preis { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--s-2); }
.tafel__preis span { font: 560 .75rem/1 var(--sans); font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); }
.karte__fuss { max-width: 720px; margin: var(--s-6) auto 0; font-size: .8125rem; color: var(--schrift-leise); text-align: left; }
.karte__reservieren { max-width: 720px; margin: var(--s-4) auto 0; font-size: var(--fs-klein); text-align: left; }

/* ---------- Seeblatt (editorial-magazin-layout, Variante zeitung) ---------- */
.zeitung { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; }
.zeitung__kopf { display: grid; justify-items: center; padding-bottom: var(--s-5); border-bottom: 3px double var(--text); text-align: center; }
.zeitung__titel { font-size: clamp(3.5rem, 1.5rem + 8vw, 9rem); font-weight: 400; font-variation-settings: "opsz" 72; letter-spacing: -.035em; line-height: .9; }
.zeitung__satz { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 clamp(24px, 3vw, 48px); padding-top: var(--s-6); }
.aufmacher { display: grid; gap: var(--s-3); align-content: start; }
.aufmacher figure { margin: 0 0 var(--s-3); }
.aufmacher figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.aufmacher h3 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem); font-weight: 300; font-variation-settings: "opsz" 72; letter-spacing: var(--track-h); line-height: 1; }
.aufmacher__lead { font: italic 400 var(--fs-lead)/1.45 var(--serif); max-width: 46ch; }
.aufmacher__text { max-width: 52ch; color: var(--schrift-leise); }
.meldungen { display: grid; align-content: start; border-left: 1px solid var(--linie); padding-left: clamp(24px, 3vw, 48px); }
.meldung { display: grid; gap: 6px; padding: var(--s-5) 0; border-bottom: 1px solid var(--linie); }
.meldung:first-child { padding-top: 0; }
.meldung h3 { font: 400 1.5rem/1.15 var(--serif); font-variation-settings: "opsz" 36; }
.meldung p { font-size: var(--fs-klein); color: var(--schrift-leise); }
.meldung figure { margin: 0 0 6px; }
.meldung figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Bild-Reveals: clip-path, an den Scroll gekoppelt, Kurve aus token-luxus-weich (clip-path-bild-reveal + css-view-reveal-nativ) */
.enthuellen { overflow: clip; }
@supports (animation-timeline: view()) {
  html[data-bewegung="voll"] .enthuellen { animation: maske-auf linear both; animation-timeline: view(); animation-range: entry 5% cover 38%; animation-timing-function: var(--ease-lux); }
  html[data-bewegung="voll"] .enthuellen img { animation: bild-zurueck linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; animation-timing-function: var(--ease-lux-out); }
}
@keyframes maske-auf { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes bild-zurueck { from { scale: 1.06; } to { scale: 1; } }

/* ---------- Programm (programm-kalender, Variante programm) ---------- */
.programm { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding-top: 0; }
.programm__kopf { padding-top: var(--s-7); margin-bottom: var(--s-6); border-top: 1px solid var(--text); }
.programm__werkzeug { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rahmen); border-radius: 999px; background: none; font-size: .875rem; font-weight: 520; transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu); }
.chip span { font-variant-numeric: tabular-nums; color: var(--schrift-leise); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--creme); border-color: var(--text); transition-timing-function: var(--ease-auf); }
.chip[aria-pressed="true"] span { color: var(--nacht-leise); }
@media (hover: hover) and (pointer: fine) { .chip:hover:not([aria-pressed="true"]), .ansicht button:hover:not([aria-pressed="true"]) { background: var(--band); transition-timing-function: var(--ease-auf); } }
.ansicht { display: inline-flex; padding: 3px; border: 1px solid var(--rahmen); border-radius: 999px; }
.ansicht button { min-height: 40px; min-width: 80px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-size: .875rem; font-weight: 560; transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu); }
.ansicht button[aria-pressed="true"] { background: var(--haus); color: var(--creme); }
.termine { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.termin { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 5rem; gap: var(--s-2) var(--s-5); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--linie); }
.termin time { font-size: .875rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.termin h3 { font: 400 1.5rem/1.2 var(--serif); font-variation-settings: "opsz" 36; }
.termin p { color: var(--schrift-leise); font-size: var(--fs-klein); }
.termin__preis { text-align: right; font: 400 1.25rem/1.2 var(--serif) !important; color: var(--schrift) !important; font-variant-numeric: tabular-nums; }
.termin.ist-vergangen { opacity: 1; }
.termin.ist-vergangen h3, .termin.ist-vergangen time, .termin.ist-vergangen .termin__preis { color: var(--schrift-leise) !important; }
.termin.ist-vergangen p { display: none; }
.termin.ist-vergangen h3 { font-size: 1.125rem; }
.termin.ist-vergangen time::after { content: " · vorbei"; font-weight: 500; }
.termin.ist-heute time::after { content: " · heute"; color: var(--haus); }
.js .termin.ist-neu { animation: termin-ein var(--dur-auf) var(--ease-auf) both; animation-delay: calc(var(--i, 0) * var(--stagger-ui)); }
@keyframes termin-ein { from { opacity: 0; translate: 0 8px; } }
.monat-ansicht { margin-bottom: var(--s-5); }
.monat-ansicht__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.monat-ansicht__kopf h3 { font: 400 1.75rem/1.2 var(--serif); }
.monat-ansicht__kopf div { display: flex; gap: 8px; }
.monat-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); list-style: none; padding: 0; }
.monat-raster li { min-height: 84px; padding: 6px; background: var(--grund); font-variant-numeric: tabular-nums; font-size: .875rem; }
.monat-raster li.leer-tag { background: var(--grund); }
.monat-raster .wt { min-height: 0; padding: 8px 6px; font-size: .6875rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); background: var(--creme); }
.monat-raster button { display: grid; align-content: start; gap: 4px; width: 100%; height: 100%; min-height: 72px; padding: 0; border: 0; background: none; text-align: left; }
.monat-raster button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--haus); border-radius: 2px; }
.monat-raster .punkt { display: block; height: 4px; border-radius: 2px; background: var(--haus); }
.monat-raster .punkt + .punkt { margin-top: 2px; }
.monat-raster .vorbei { color: var(--schrift-leise); }
.leer-zustand { display: grid; justify-items: start; gap: 6px; padding: var(--s-6) 0; border: 1px dashed var(--rahmen); border-radius: var(--radius); padding-inline: var(--s-5); margin-top: var(--s-4); }
.leer-zustand__titel { font: 400 1.5rem/1.2 var(--serif); }
.programm__fuss { margin-top: var(--s-5); font-size: .875rem; color: var(--schrift-leise); }

/* ---------- Angebote: Karussell (css-native-karussell, Variante peek) ---------- */
.angebote { background: var(--band); padding-inline: 0; }
.angebote__kopf { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto var(--s-6); padding: 0 var(--rand); }
.angebote__steuer { display: flex; gap: 10px; }
.karussell { --breite: clamp(260px, 27vw, 380px); position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: var(--breite); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 4px max(var(--rand), calc((100vw - var(--max)) / 2)) var(--s-4); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--rand), calc((100vw - var(--max)) / 2)); scrollbar-width: thin; scrollbar-color: var(--rahmen) transparent; }
.paket { position: relative; scroll-snap-align: start; scroll-snap-stop: always; }
.paket__link { display: grid; gap: 10px; height: 100%; text-decoration: none; color: inherit; }
.paket__link:focus-visible { outline-offset: 6px; }
.paket__bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--bild-grund); clip-path: inset(0 round 2px); transition: clip-path var(--dur-lux-text) var(--ease-lux); }
.paket__bild img { width: 100%; height: 100%; object-fit: cover; scale: 1.001; transition: scale var(--dur-lux-text) var(--ease-lux); }
@media (hover: hover) and (pointer: fine) {
  html[data-bewegung="voll"] .paket__link:hover .paket__bild { clip-path: inset(4% round 2px); transition-timing-function: var(--ease-lux-out); }
  html[data-bewegung="voll"] .paket__link:hover .paket__bild img { scale: 1.12; transition-timing-function: var(--ease-lux-out); }
}
.paket__titel { font: 400 1.75rem/1.1 var(--serif); padding-top: 4px; }
.paket__zeile { font-size: .875rem; margin-top: -6px; }
.paket__text { font-size: var(--fs-klein); }
.paket__preis { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--rahmen); font-size: .875rem; font-variant-numeric: tabular-nums; }
.paket__preis b { font: 400 1.25rem/1 var(--serif); }
.paket__ziel { margin-left: auto; align-self: center; width: 18px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; transition: translate var(--dur-zu) var(--ease-zu); }
@media (hover: hover) and (pointer: fine) { .paket__link:hover .paket__ziel { translate: 4px 0; transition: translate var(--dur-auf) var(--ease-auf); } }
.karussell__marken { display: flex; gap: 6px; max-width: calc(var(--max) + 2 * var(--rand)); margin: var(--s-3) auto 0; padding: 0 var(--rand); }
.karussell__marken i { width: 24px; height: 2px; background: var(--rahmen); transition: background-color var(--dur-zu) var(--ease-zu); }
.karussell__marken i.ist-aktiv { background: var(--text); }
.angebote__fuss { max-width: calc(var(--max) + 2 * var(--rand)); margin: var(--s-5) auto 0; padding: 0 var(--rand); font-size: .8125rem; }

/* ---------- Gutschein (gutschein-konfigurator) ---------- */
.gutschein { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; align-items: start; }
.gutschein__links { display: grid; gap: var(--s-4); }
.konfig { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; list-style: none; }
.schritte li { position: relative; padding-top: 10px; font-size: .75rem; font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); border-top: 1px solid var(--linie); }
.schritte li::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--haus); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-auf) var(--ease-auf); }
.schritte li[aria-current="step"], .schritte li.ist-fertig { color: var(--schrift); }
.schritte li[aria-current="step"]::before, .schritte li.ist-fertig::before { transform: scaleX(1); }
.schritte li span { margin-right: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .schritte li span { display: block; margin: 0 0 2px; } }
html:not(.js) .schritte { display: none; }
.schritt { display: grid; gap: var(--s-4); min-width: 0; padding: 0; border: 0; }
.schritt legend { padding: 0; margin-bottom: var(--s-4); font: 300 clamp(1.5rem, 1.3rem + .6vw, 1.875rem)/1.15 var(--serif); }
.js .schritt[hidden] { display: none; }
.js .schritt.ist-neu { animation: schritt-ein var(--dur-auf) var(--ease-auf); }
@keyframes schritt-ein { from { opacity: 0; translate: 12px 0; } }
.wahl { display: inline-flex; padding: 3px; border: 1px solid var(--rahmen); border-radius: 999px; justify-self: start; }
.wahl__karte { position: relative; }
.wahl__karte input, .betrag input, .motiv input, .chip-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl__karte span { display: grid; place-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: .875rem; font-weight: 560; transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu); }
.wahl__karte input:checked + span { background: var(--text); color: var(--creme); }
.wahl__karte input:focus-visible + span, .betrag input:focus-visible + span, .motiv input:focus-visible ~ span, .chip-wahl input:focus-visible + span, .leistung input:focus-visible ~ span { outline: 2px solid var(--haus); outline-offset: 3px; }
.feld-label { font-size: var(--fs-label); font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); margin-bottom: 8px; }
.betraege { display: grid; gap: var(--s-4); }
.betraege__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.betrag { position: relative; }
.betrag span { display: grid; place-items: center; min-height: 56px; border: 1px solid var(--rahmen); border-radius: 4px; background: var(--karte); font: 400 1.375rem/1 var(--serif); font-variant-numeric: tabular-nums; transition: border-color var(--dur-ui) var(--ease-zu), box-shadow var(--dur-ui) var(--ease-zu); }
.betrag input:checked + span { border-color: var(--haus); box-shadow: inset 0 0 0 1px var(--haus); }
.feld-text { display: grid; gap: 6px; }
.feld-text label { font-size: .875rem; font-weight: 560; }
.feld-text__hinweis { font-weight: 400; color: var(--schrift-leise); }
.feld-text input, .feld-text textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--rahmen); border-radius: 4px; background: var(--karte); font-size: 1rem; transition: border-color var(--dur-ui) var(--ease-zu), box-shadow var(--dur-ui) var(--ease-zu); }
.feld-text textarea { resize: vertical; line-height: 1.5; }
.feld-text input:focus-visible, .feld-text textarea:focus-visible { outline: 2px solid var(--haus); outline-offset: 1px; }
.feld-text .ist-fehler { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
.fehler-text { color: var(--fehler); font-size: .875rem; min-height: 0; }
.fehler-text:empty { display: none; }
.fehler-text--hell { color: #f2b9a4; }
.pflicht { color: var(--fehler); }
.leistungen { display: grid; gap: 8px; }
.leistung { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border: 1px solid var(--rahmen); border-radius: 4px; background: var(--karte); cursor: pointer; transition: border-color var(--dur-ui) var(--ease-zu), box-shadow var(--dur-ui) var(--ease-zu); }
.leistung:has(input:checked) { border-color: var(--haus); box-shadow: inset 0 0 0 1px var(--haus); }
.leistung input { width: 20px; height: 20px; accent-color: var(--haus); margin: 0; }
.leistung b { display: block; font-weight: 560; }
.leistung small { color: var(--schrift-leise); font-size: .875rem; }
.leistung data { font: 400 1.25rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.motive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.motiv { position: relative; display: grid; gap: 6px; font-size: .8125rem; }
.motiv img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; outline: 1px solid var(--linie); transition: outline-color var(--dur-ui) var(--ease-zu); }
.motiv input:checked ~ img { outline: 3px solid var(--haus); outline-offset: 2px; }
.konfig__fuss { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--linie); }
.summe-zeile { font-size: .875rem; font-variant-numeric: tabular-nums; }
.summe-zeile b { font: 400 1.75rem/1 var(--serif); margin-left: 8px; }
.konfig__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.js .konfig[data-schritt-aktiv="1"] [data-konfig-bezahlen], .js .konfig[data-schritt-aktiv="2"] [data-konfig-bezahlen] { display: none; }
.js .konfig[data-schritt-aktiv="3"] [data-konfig-weiter] { display: none; }
html:not(.js) [data-konfig-weiter], html:not(.js) [data-konfig-zurueck] { display: none; }
.konfig__recht { font-size: .8125rem; color: var(--schrift-leise); max-width: 60ch; }
.gutschein__rechts { position: sticky; top: calc(var(--kopf-h) + 24px); }
.vorschau { display: grid; gap: 10px; padding: clamp(20px, 3vw, 40px); border-radius: 8px; background: var(--band); }
.vorschau__karte { display: grid; grid-template-columns: 1fr 1.15fr; aspect-ratio: 1.414; overflow: hidden; border-radius: 3px; background: var(--creme); box-shadow: 0 1px 2px rgb(62 58 55 / .1), 0 24px 50px rgb(62 58 55 / .18); }
/* Motivwechsel: 200 ms aus, Tausch nach dem Dekodieren, 300 ms ein (seite.js wartet --dur-zu) */
.vorschau__bild { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-auf) var(--ease-auf); }
.vorschau__bild.ist-weg { opacity: 0; transition: opacity var(--dur-zu) var(--ease-zu); }
.vorschau__text { display: grid; align-content: space-between; gap: 6px; padding: clamp(14px, 2vw, 24px); min-width: 0; }
.vorschau__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .5625rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: .1em; text-transform: uppercase; color: var(--schrift-leise); }
.vorschau__fuer, .vorschau__von { font: italic 400 .9375rem/1.3 var(--serif); overflow-wrap: anywhere; }
.vorschau__wert { font: 300 clamp(2rem, 1.4rem + 2vw, 3.25rem)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vorschau__gruss { font: italic 400 .875rem/1.4 var(--serif); color: var(--schrift-leise); overflow-wrap: anywhere; }
.vorschau__code { font-size: .5625rem; letter-spacing: .06em; color: var(--schrift-leise); }
.vorschau__unter { font-size: .8125rem; color: var(--schrift); }

/* ---------- Gästestimmen ---------- */
.stimmen { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; }
.zitat { max-width: 1100px; margin: 0 auto; }
.zitat blockquote p { text-wrap: balance; font: 300 clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem)/1.12 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.015em; text-indent: -.42em; }
.zitat blockquote p::before { content: "„"; }
.zitat blockquote p::after { content: "“"; }
.zitat figcaption { display: grid; gap: 2px; margin-top: var(--s-5); padding-left: 2px; }
.zitat__name { font-weight: 600; color: var(--schrift); font-size: var(--fs-text); }
.zitat__quelle { font-size: .8125rem; }
.stimmen__kopf { display: grid; justify-items: start; gap: var(--s-4); margin: var(--sektion) 0 var(--s-4); padding-top: var(--s-7); border-top: 1px solid var(--text); }
.profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.profil { display: grid; gap: var(--s-4); align-content: start; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); background: var(--creme); }
.profil__kopf { display: grid; gap: 4px; }
.profil__kopf h3 { font: 400 var(--fs-h3)/1.1 var(--serif); font-variation-settings: "opsz" 36; }
.profil__schnitt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .875rem; color: var(--schrift-leise); }
.profil__zahl { font: 400 1.375rem/1 var(--serif); color: var(--schrift); font-variant-numeric: tabular-nums; }
.profil__skala { font-size: .875rem; color: var(--schrift-leise); }
.sterne { display: inline-flex; gap: 3px; }
.sterne i { --f: 1; width: 16px; height: 16px; background: linear-gradient(90deg, var(--haus) calc(var(--f) * 100%), var(--rahmen) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 1 2.1 4.6 5 .5-3.8 3.4 1.1 5L8 12l-4.4 2.5 1.1-5L.9 6.1l5-.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 1 2.1 4.6 5 .5-3.8 3.4 1.1 5L8 12l-4.4 2.5 1.1-5L.9 6.1l5-.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sterne--klein i { width: 12px; height: 12px; }
.echtheit { padding: 12px 14px; border-radius: 4px; background: var(--karte); font-size: .875rem; }
.stimmen-liste { list-style: none; padding: 0; display: grid; }
.stimme { display: grid; gap: 6px; padding: var(--s-4) 0; border-top: 1px solid var(--linie); }
.stimme__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .875rem; }
.stimme__kopf time { color: var(--schrift-leise); margin-left: auto; font-variant-numeric: tabular-nums; }
.antwort summary { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 560; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.antwort p { padding: 10px 14px; border-radius: 4px; background: var(--karte); font-size: .9375rem; color: var(--schrift-leise); }
.profil__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }

/* ---------- Anreise und Anfrage ---------- */
.anreise { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; }
.anreise__kopf { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.anreise__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.anreise__daten { display: grid; gap: var(--s-5); align-content: start; }
.adresse { font: 400 1.5rem/1.35 var(--serif); font-style: normal; }
.adresse b { font-weight: 500; }
.kontaktwege { font-size: 1.125rem; line-height: 1.9; overflow-wrap: anywhere; }
.route { justify-self: start; }
.wege { display: grid; gap: var(--s-4); }
.wege div { display: grid; gap: 4px; padding-top: var(--s-3); border-top: 1px solid var(--linie); }
.wege dt { font-weight: 600; }
.wege dd { color: var(--schrift-leise); }
.zeiten { width: 100%; border-collapse: collapse; font-size: var(--fs-klein); }
.zeiten th, .zeiten td { padding: 8px 0; border-top: 1px solid var(--linie); text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }
.zeiten th { font-weight: 600; width: 38%; padding-right: 12px; }
.anreise__daten > .platzhalter--block { margin: 0; }
.zeitung > .platzhalter--block { margin-left: 0; }
.karte-2k { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 8px; }
.karte-2k__flaeche { position: relative; display: grid; overflow-anchor: none; }
.karte-2k__bild, .karte-2k iframe { grid-area: 1 / 1; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border: 0; border-radius: var(--radius); background: var(--band); }
.karte-2k iframe { opacity: 0; transition: opacity var(--dur-lux) var(--ease-lux); }
.karte-2k iframe.ist-da { opacity: 1; }
.karte-2k__hinweis { grid-row: 2; display: grid; gap: 10px; justify-items: start; margin-top: 10px; padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); font-size: .875rem; }
.merken { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; }
.merken input { width: 20px; height: 20px; accent-color: var(--haus); }
.karte-2k__quelle { font-size: .75rem; color: var(--schrift-leise); }
.anfrage { color: var(--schrift); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--s-7); margin-top: var(--sektion); padding: clamp(24px, 4vw, 56px); border-radius: 8px; background: var(--creme); scroll-margin-top: calc(var(--kopf-h) + 12px); }
.anfrage__text { display: grid; gap: var(--s-4); align-content: start; }
.anfrage__titel { font-size: var(--fs-h3); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); font-variation-settings: "opsz" 48; line-height: 1.05; letter-spacing: -.015em; }
.formular { display: grid; gap: var(--s-4); }
.formular__anlass { border: 0; padding: 0; min-width: 0; }
.formular__anlass legend { padding: 0; margin-bottom: 10px; font-size: .875rem; font-weight: 560; }
.chip-wahl { position: relative; }
.chip-wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rahmen); border-radius: 999px; font-size: .875rem; font-weight: 520; transition: background-color var(--dur-ui) var(--ease-zu), color var(--dur-ui) var(--ease-zu); }
.chip-wahl input:checked + span { background: var(--text); color: var(--creme); border-color: var(--text); }
.formular__zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__recht { font-size: .8125rem; color: var(--schrift-leise); }
.formular .knopf-zustand { justify-self: start; }
.formular__status:not(:empty) { padding: 12px 14px; border-radius: 4px; background: var(--karte); font-size: var(--fs-klein); }
.formular__status.ist-fehler { color: var(--fehler); }

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht); color: var(--nacht-text); padding: var(--sektion) var(--rand) calc(var(--s-6) + env(safe-area-inset-bottom)); }
.fuss .label { color: var(--nacht-leise); }
.fuss__brief { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-8); max-width: var(--max); margin: 0 auto; padding-bottom: var(--s-8); border-bottom: 1px solid rgb(243 238 231 / .16); }
.brief__text { display: grid; gap: var(--s-4); align-content: start; }
.brief__titel { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-variation-settings: "opsz" 72; line-height: 1.05; letter-spacing: var(--track-h); }
.jahr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; align-self: start; }
.jahr li { display: grid; align-content: start; gap: 4px; min-height: 132px; padding: 14px; border: 1px solid rgb(243 238 231 / .2); border-radius: 6px; font-size: .875rem; color: var(--nacht-leise); }
.jahr b { font: 400 1.375rem/1.1 var(--serif); color: var(--nacht-text); }
.jahr li.ist-naechster { background: var(--creme); border-color: var(--creme); color: var(--text); }
.jahr li.ist-naechster b { color: var(--schrift); }
.jahr small { margin-top: auto; padding-top: 8px; font-size: .6875rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--haus); }
.brief__form { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-self: start; }
.brief__form input { min-height: 56px; padding: 0 22px; border: 1px solid rgb(243 238 231 / .35); border-radius: 999px; background: transparent; color: var(--nacht-text); font-size: 1rem; }
.brief__form input::placeholder { color: var(--nacht-leise); opacity: 1; }
.brief__form input.ist-fehler { border-color: #f2b9a4; }
.brief__knopf { min-height: 56px; min-width: 170px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--creme); color: var(--text); font-size: .8125rem; font-weight: 600; font-stretch: var(--breit); letter-spacing: .07em; text-transform: uppercase; transition: background-color var(--dur-ui) var(--ease-zu); }
@media (hover: hover) and (pointer: fine) { .brief__knopf:hover { background: var(--grund); transition-timing-function: var(--ease-auf); } }
.brief__klein { grid-column: 1 / -1; font-size: .8125rem; color: var(--nacht-leise); }
.roll { position: relative; display: inline-grid; overflow: clip; vertical-align: bottom; height: 1.3em; line-height: 1.3; }
.roll__zeile { grid-area: 1 / 1; display: block; }
.roll__zeile.ist-rein { animation: roll-rein var(--dur-auf) var(--ease-auf) both; }
.roll__zeile.ist-raus { animation: roll-raus var(--dur-zu) var(--ease-zu) both; }
@keyframes roll-rein { from { translate: 0 100%; } }
@keyframes roll-raus { to { translate: 0 -100%; } }
.fuss__karte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-8); max-width: var(--max); margin: 0 auto; padding: var(--s-7) 0; border-bottom: 1px solid rgb(243 238 231 / .16); }
.fuss__marke { font: italic 400 clamp(2.5rem, 1.6rem + 3vw, 4.5rem)/1 var(--serif); letter-spacing: -.02em; margin-bottom: var(--s-4); }
.visitenkarte address { font-style: normal; font-size: 1.125rem; line-height: 1.6; }
.fuss__klein { font-size: .8125rem; color: var(--nacht-leise); }
.visitenkarte .fuss__klein { margin-top: var(--s-3); }
.anliegen { display: grid; gap: var(--s-3); align-content: start; }
.anliegen__reiter { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid rgb(243 238 231 / .2); }
.anliegen__reiter button { position: relative; min-height: 48px; padding: 0; border: 0; background: none; color: var(--nacht-leise); font-size: 1rem; font-weight: 520; transition: color var(--dur-ui) var(--ease-zu); }
.anliegen__reiter button[aria-pressed="true"] { color: var(--nacht-text); }
.anliegen__reiter button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--creme); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-zu) var(--ease-zu); }
.anliegen__reiter button[aria-pressed="true"]::after { transform: scaleX(1); transition: transform var(--dur-auf) var(--ease-auf); }
.anliegen__tafel { display: grid; gap: 6px; font: 400 1.375rem/1.45 var(--serif); }
.anliegen__tafel p:not(.label) { overflow-wrap: anywhere; }
.js .anliegen__nur-ohne-js { display: none; }
html:not(.js) .anliegen__tafel + .anliegen__tafel { margin-top: var(--s-4); }
.kopierzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kopieren { min-height: 36px; padding: 0 12px; border: 1px solid rgb(243 238 231 / .35); border-radius: 999px; background: none; color: var(--nacht-text); font: 600 .6875rem/1 var(--sans); font-stretch: var(--breit); letter-spacing: .08em; text-transform: uppercase; }
.fuss__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); max-width: var(--max); margin: 0 auto; padding-top: var(--s-6); font-size: .875rem; }
.fuss__recht { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 0; list-style: none; margin-right: auto; }
.fuss__recht li { display: flex; align-items: center; min-height: 44px; }
.fuss__vertrag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vertrag-knopf { display: inline-flex; white-space: nowrap; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgb(243 238 231 / .5); border-radius: 999px; color: var(--nacht-text); text-decoration: none; font-weight: 560; }
.schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--nacht-text); font-size: .875rem; }
.schalter__spur { position: relative; width: 40px; height: 24px; border-radius: 12px; border: 1px solid var(--nacht-leise); }
.schalter__spur i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--nacht-leise); transition: translate var(--dur-zu) var(--ease-zu), background-color var(--dur-zu) var(--ease-zu); }
.schalter[aria-checked="true"] .schalter__spur { background: var(--creme); border-color: var(--creme); }
.schalter[aria-checked="true"] .schalter__spur i { translate: 16px 0; background: var(--nacht); transition-timing-function: var(--ease-auf); transition-duration: var(--dur-auf); }
html:not(.js) .schalter, html:not(.js) [data-dialog-auf] { display: none; }

/* ---------- Menü im Vollbild (vollbild-overlay-menue-bildvorschau) ---------- */
.menue { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 var(--rand) calc(var(--rand) + env(safe-area-inset-bottom)); border: 0; background: var(--nacht); color: var(--nacht-text); display: none; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) minmax(0, 3fr); grid-template-rows: auto 1fr; gap: 0 var(--s-6); overflow-y: auto;
  clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) allow-discrete, display var(--dur-zu) allow-discrete; }
.menue[open] { display: grid; clip-path: inset(0); transition-duration: var(--dur-auf); transition-timing-function: var(--ease-auf); }
@starting-style { .menue[open] { clip-path: inset(0 0 100% 0); } }
.menue::backdrop { background: transparent; }
.menue__kopf { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: var(--kopf-h); }
.menue__marke { font: italic 400 1.75rem/1 var(--serif); }
.menue__zu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 8px; border: 0; background: none; color: inherit; }
.menue__zu svg { width: 18px; height: 18px; }
.menue__nav { align-self: center; }
.menue__nav ol { list-style: none; padding: 0; }
.menue__nav a { display: flex; align-items: baseline; gap: 18px; padding: 4px 0; text-decoration: none; color: var(--nacht-leise); transition: color var(--dur-ui) var(--ease-zu); }
.menue__nav a:focus-visible { color: var(--nacht-text); }
@media (hover: hover) and (pointer: fine) { .menue__nav a:hover { color: var(--nacht-text); transition-timing-function: var(--ease-auf); } }
.menue__zeile { display: block; overflow: clip; padding-bottom: .06em; }
.menue__zeile span { display: block; font: 300 clamp(2.25rem, 1.4rem + 3.4vw, 5rem)/1.04 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; translate: 0 110%; transition: translate var(--dur-zu) var(--ease-zu); }
.menue[open] .menue__zeile span { translate: 0 0; transition: translate calc(var(--dur-auf) * 2) var(--ease-auf) calc(var(--i, 0) * var(--stagger-ui) + 60ms); }
@starting-style { .menue[open] .menue__zeile span { translate: 0 110%; } }
.menue__vorschau { position: relative; align-self: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: rgb(243 238 231 / .06); }
.menue__vorschau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-zu) var(--ease-zu); }
.menue__vorschau img.ist-aktiv { opacity: 1; transition: opacity var(--dur-auf) var(--ease-auf); }
.menue__seite { align-self: center; display: grid; gap: var(--s-3); font-size: .9375rem; color: var(--nacht-leise); }
.menue__seite p { color: var(--nacht-text); line-height: 1.9; overflow-wrap: anywhere; }

/* ---------- Dialoge (dialog-modal-nativ) ---------- */
.hinweis-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); margin: auto; padding: clamp(22px, 4vw, 36px); border: 0; border-radius: 10px; background: var(--karte); color: var(--schrift); box-shadow: 0 30px 90px rgb(30 26 22 / .35); opacity: 0; scale: .98;
  transition: opacity var(--dur-zu) var(--ease-zu), scale var(--dur-zu) var(--ease-zu), overlay var(--dur-zu) allow-discrete, display var(--dur-zu) allow-discrete; }
.hinweis-dialog[open] { display: grid; gap: var(--s-4); opacity: 1; scale: 1; transition-duration: var(--dur-auf); transition-timing-function: var(--ease-auf); }
@starting-style { .hinweis-dialog[open] { opacity: 0; scale: .98; } }
.hinweis-dialog h2 { font: 300 2rem/1.1 var(--serif); }
.hinweis-dialog .platzhalter--block { margin: 0; }
.bedingungen { display: grid; gap: var(--s-3); }
.bedingungen div { padding-top: var(--s-3); border-top: 1px solid var(--linie); }
.bedingungen dt { font-weight: 600; }
.bedingungen dd { color: var(--schrift-leise); }
.hinweis-dialog form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.schalter-liste { list-style: none; padding: 0; display: grid; }
.schalter-liste li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--linie); }
.schalter-liste b { display: block; }
.schalter-liste small { display: block; color: var(--schrift-leise); font-size: .875rem; }
.schalter-liste input { width: 44px; height: 26px; accent-color: var(--haus); }
.immer { font-size: .8125rem; color: var(--schrift-leise); }
.einst__knoepfe .knopf-klein { flex: 1 1 160px; }

/* ---------- Breiten ---------- */
@media (max-width: 1180px) {
  .kopf__nav { display: none; }
  .feld__knopf { padding: 12px 16px; }
  .feld__wert { font-size: 1.25rem; }
  .naechte { min-width: 0; }
  .menue { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .menue__vorschau { display: none; }
}
@media (max-width: 1000px) {
  .geteilt { grid-template-columns: minmax(0, 1fr); }
  .geteilt__buehne { display: none; }
  .geteilt__text { padding: var(--sektion) var(--rand); }
  .block { min-height: 0; padding-block: var(--s-6); }
  .block__bild { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; margin-bottom: var(--s-3); }
  .zeitung__satz { grid-template-columns: minmax(0, 1fr); }
  .meldungen { border-left: 0; padding-left: 0; margin-top: var(--s-6); border-top: 1px solid var(--text); }
  .meldung:first-child { padding-top: var(--s-5); }
  .gutschein { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .gutschein__links { display: contents; }
  .gutschein__links > h2 { grid-row: 1; }
  .gutschein__rechts { position: static; grid-row: 2; }
  .gutschein .konfig { grid-row: 3; margin-top: 0; }
  .anreise__raster, .anfrage, .fuss__brief, .fuss__karte { grid-template-columns: minmax(0, 1fr); }
  .karte-2k { position: static; }
  .brief__form { grid-column: auto; }
  .profile { grid-template-columns: minmax(0, 1fr); }
  .programm__kopf { grid-template-columns: minmax(0, 1fr); }
  .leiste { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .leiste .los { grid-column: 1 / -1; margin-top: 0; justify-self: stretch; }
}
@media (max-width: 760px) {
  .paneele { flex-direction: column; min-height: 0; }
  .paneel { flex: none; min-height: 88px; transition: min-height var(--dur-lux-flaeche) var(--ease-lux); }
  .paneel.ist-offen { min-height: 560px; }
  .paneel__knopf { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; height: 88px; bottom: auto; }
  .paneel__name, .paneel.ist-offen .paneel__name { writing-mode: horizontal-tb; rotate: 0deg; opacity: 1; font-size: 1.625rem; }
  .paneel__inhalt { width: 100%; padding: 0 18px 20px; }
  .paneel__titel-offen { display: none; }
  .paneel:not(.ist-offen) .paneel__inhalt { display: none; }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .termin { grid-template-columns: minmax(0, 1fr) auto; }
  .termin time { grid-column: 1 / -1; }
  .monat-raster li { min-height: 52px; padding: 4px; font-size: .75rem; }
  .monat-raster button { min-height: 44px; }
  .betraege__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formular__zwei { grid-template-columns: minmax(0, 1fr); }
  .jahr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menue { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .menue__nav { padding: var(--s-5) 0; }
  .vorschau__karte { grid-template-columns: 1fr; aspect-ratio: auto; }
  .vorschau__bild { aspect-ratio: 2 / 1; height: auto; }
}
@media (max-width: 640px) {
  html { --kopf-h: 64px; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .kopf { position: absolute; padding-block: 8px; }
  .kopf .knopf--kopf, .kopf .menue-knopf { display: none; }
  .marke__name { font-size: 1.5rem; }
  .held { height: max(560px, 86svh); }
  .held__text { bottom: 132px; }
  .held__steuer { left: var(--rand); right: var(--rand); bottom: 28px; }
  .held__reihe .held__striche { margin-right: auto; }
  .ort-leiste { margin-top: 0; padding: 0; }
  .leiste-unten { margin-top: var(--s-6); justify-items: start; }
  .vorteile, .preis-hinweis { text-align: left; }
  /* Daumenzone: Buchungsleiste und Menü in einer schwebenden Leiste (mobile-bottom-navigation, Variante basis) */
  html.js .leiste { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 15; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0; border-radius: 30px; border: 1px solid var(--linie); background: var(--creme); box-shadow: 0 10px 34px rgb(62 58 55 / .22); }
  html.js .leiste .feld { display: none; }
  html.js .leiste .mobil-menue { display: grid; place-items: center; width: 52px; margin: 6px 0 6px 6px; border: 0; border-radius: 50%; background: var(--grund); color: var(--schrift); }
  html.js .leiste .mobil-zeile { display: grid; align-content: center; gap: 1px; min-width: 0; padding: 8px 10px; border: 0; background: none; text-align: left; }
  .mobil-zeile .label { color: var(--schrift-leise); font-size: .6875rem; }
  .mobil-zeile b { font: 400 1.125rem/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.js .leiste .los { grid-column: auto; margin: 6px 6px 6px 0; min-height: 52px; padding-left: 16px; }
  .los .nur-breit { display: none; }
  .los .nur-schmal { display: inline; }
  html:not(.js) .nativ { grid-template-columns: 1fr 1fr; }
  .pop--ueber { position-anchor: none; position-try-fallbacks: none; position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: 0; border-radius: 20px 20px 0 0; translate: 0 100%; }
  .pop--ueber:popover-open { translate: 0 0; }
  @starting-style { .pop--ueber:popover-open { translate: 0 100%; } }
  .reiter { justify-content: stretch; }
  .reiter button { flex: 1; padding-inline: 8px; font-size: 1.125rem; }
  .gaenge li { grid-template-columns: 34px minmax(0, 1fr); }
  .gaenge .kuerzel { grid-column: 2; justify-self: start; margin-top: 0; }
  .gaenge h4 { font-size: 1.5rem; }
  .angebote__kopf { flex-direction: column; align-items: start; }
  .karussell { --breite: 78vw; }
  .motive { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .brief__form { grid-template-columns: minmax(0, 1fr); }
  .fuss__leiste { flex-direction: column; align-items: start; }
  .galerie__daumen button { width: 52px; height: 40px; }
}

@media (max-width: 640px) {
  .karte-2k__flaeche { aspect-ratio: auto; display: grid; overflow: visible; background: none; }
  .karte-2k__bild { position: relative; aspect-ratio: 4 / 3; height: auto; border-radius: var(--radius); }
  .karte-2k iframe { height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius); }
  .karte-2k__hinweis { position: static; max-width: none; margin-top: 10px; box-shadow: none; border: 1px solid var(--linie); }
}
@media (max-width: 400px) {
  .knopf-pfeil { white-space: normal; text-align: left; }
  html.js .leiste .mobil-zeile .label { display: none; }
  .mobil-zeile b { white-space: normal; font-size: 1rem; line-height: 1.15; }
  html.js .leiste .los { padding-left: 12px; gap: 8px; }
  html.js .leiste .mobil-menue { width: 46px; }
  .reiter button { font-size: 1rem; padding-inline: 4px; min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- Ruhige Bewegung: Schalter oder Systemeinstellung ---------- */
html[data-bewegung="ruhig"] *, html[data-bewegung="ruhig"] *::before, html[data-bewegung="ruhig"] *::after, html[data-bewegung="ruhig"] *::backdrop { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
html[data-bewegung="ruhig"] .knopf-zustand__laden i { animation: none; border-top-color: var(--creme); }
@media (prefers-reduced-motion: reduce) {
  html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---------- Kontrastmodus (kontrastmodus-forced-colors) ---------- */
@media (forced-colors: active) {
  button, .knopf-pfeil, a.knopf, .vertrag-knopf { border: 1px solid ButtonText !important; }
  .knopf, .knopf-pfeil, .knopf-klein, .knopf-zustand, .chip, .chip-wahl span, .wahl__karte span, .betrag span, .leistung, .rund, .x-knopf, .kuerzel, .brief__knopf, .vertrag-knopf, .kopieren, .stepper button, .kal__nav, .naechte { border: 1px solid ButtonText; }
  .knopf-pfeil__kreis { border: 1px solid ButtonText; }
  .leiste, .pop, .hinweis-dialog, .profil, .anfrage, .vorschau__karte, .karte-2k__hinweis, .menue, .galerie, .blatt { border: 1px solid CanvasText; }
  .held::after, .paneel::after, .kopf::before { display: none; }
  .chip[aria-pressed="true"], .ansicht button[aria-pressed="true"], .chip-wahl input:checked + span, .wahl__karte input:checked + span, .monat td.start span, .monat td.ende span, .naechte.voll, .jahr li.ist-naechster { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .monat td.band::before { background: Highlight; opacity: .3; }
  .platzhalter { border: 1px dashed CanvasText; }
  .sterne i { forced-color-adjust: none; background: CanvasText; }
  .held__striche i.ist-aktiv, .karussell__marken i.ist-aktiv { background: CanvasText; }
  .paneel__inhalt, .held__text, .held__steuer { background: Canvas; color: CanvasText; }
}

/* ---------- Unterseiten (Impressum, Datenschutz, Barrierefreiheit, Widerruf, 404) ---------- */
/* Echte Folgeseiten: native Überblendung zwischen Dokumenten (vt-cross-document-mpa), nur bei voller Bewegung */
.kopf--seite { position: sticky; background: var(--grund); color: var(--schrift); box-shadow: 0 1px 0 var(--linie); }
.kopf--seite::before { display: none; }
.kopf--seite :focus-visible { outline-color: var(--haus) !important; }
.kopf--seite .knopf-pfeil { margin-left: auto; }
.seite { max-width: 820px; margin: 0 auto; padding: calc(var(--kopf-h) + clamp(48px, 8vw, 112px)) var(--rand) var(--sektion); }
.seite h1 { overflow-wrap: break-word; hyphens: manual; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); font-variation-settings: "opsz" 72; letter-spacing: var(--track-h); line-height: 1.02; margin-bottom: var(--s-5); }
.seite h2 { font-size: clamp(1.5rem, 1.25rem + .9vw, 2.125rem); font-variation-settings: "opsz" 36; line-height: 1.15; margin: var(--s-7) 0 var(--s-3); scroll-margin-top: calc(var(--kopf-h) + 12px); }
.seite h3 { font: 400 1.375rem/1.2 var(--serif); margin: var(--s-5) 0 var(--s-2); }
.seite p, .seite ul, .seite ol, .seite dl { max-width: var(--lesebreite); }
.seite p + p, .seite ul + p, .seite p + ul { margin-top: var(--s-3); }
.seite ul, .seite ol { padding-left: 1.2em; }
.seite li + li { margin-top: 6px; }
.seite a:not(.knopf-pfeil):not(.knopf) { text-decoration: underline; text-underline-offset: .22em; }
.seite .platzhalter--block { margin: var(--s-4) 0; }
.seite__lead { font-size: var(--fs-lead); color: var(--schrift-leise); }
.inhalt-liste { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5) !important; border-radius: var(--radius); background: var(--creme); list-style: none; }
.inhalt-liste li { margin: 0 !important; }
.inhalt-liste a { display: inline-flex; min-height: 40px; align-items: center; }
.kurzfassung { max-width: none !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); padding: var(--s-5); border-radius: var(--radius); background: var(--creme); }
.kurzfassung div { border-top: 1px solid var(--linie); padding-top: var(--s-2); }
.kurzfassung dt { font-size: var(--fs-label); font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); }
.kurzfassung dd { font: 400 1.125rem/1.35 var(--serif); }
.luecke { padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: var(--creme); margin-top: var(--s-4); }
.luecke h3 { margin-top: 0; }
.luecke dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: var(--fs-klein); }
.luecke dt { font-weight: 600; }
.seite-form { display: grid; gap: var(--s-4); max-width: 560px; margin-top: var(--s-5); }
.seite-form .knopf-zustand { justify-self: start; }
.fuss--seite { padding-top: var(--s-7); }
.fuss--seite .fuss__leiste { padding-top: 0; }
.fehler-seite { min-height: 70svh; display: grid; align-content: center; }
.wege-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 !important; list-style: none; margin-top: var(--s-5); max-width: none !important; }
.wege-liste li + li { margin-top: 0; }
.wege-liste a { display: grid; align-content: center; gap: 2px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--rahmen); border-radius: var(--radius); text-decoration: none !important; background: var(--karte); }
@media (max-width: 640px) { .kopf--seite { position: relative; } .kopf--seite .knopf-pfeil { display: none; } .kurzfassung, .wege-liste { grid-template-columns: minmax(0, 1fr); } body.unterseite { padding-bottom: 0; } }

/* ---------- Druck: Inhalt ohne Bedienteile, feste Leisten und Bewegung ---------- */
@media print {
  .kopf, .sprung, .held__steuer, .ort-leiste .leiste, .preis-hinweis .textlink, .angebote__steuer, .karussell__marken, .gutschein, .formular, .brief__form, .schalter, .kopieren, .karte-2k, .fuss__vertrag, .programm__werkzeug, dialog, [data-fundus-beispiel] { display: none !important; }
  html, body { background: #fff; }
  .held { height: 11cm; }
  .dia:not(:first-child) { display: none; }
  .enthuellen, .enthuellen img, .geteilt * { animation: none !important; clip-path: none !important; }
  .karussell { overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; padding-inline: var(--rand); }
  .sektion { padding-block: 1.2cm; }
  .paket, .termin, .profil, .meldung, .aufmacher, .block, .anfrage, .zitat { break-inside: avoid; }
  h2, h3, .angebote__kopf, .kopfzeile, .karte__kopf { break-after: avoid; }
  .ort-leiste { margin-top: 0; }
}

/* ==========================================================================
   Teil 2 · Ein Tag am See
   ========================================================================== */

/* ---------- Tageslauf (theme-farbwechsel-scroll, Variante Schwelle): Fläche und Schrift je Kapitel ---------- */
@property --flaeche { syntax: '<color>'; inherits: true; initial-value: #f3eee7; }
@property --schrift { syntax: '<color>'; inherits: true; initial-value: #3e3a37; }
@property --schrift-leise { syntax: '<color>'; inherits: true; initial-value: #66655f; }
html { transition: --flaeche var(--dur-zeit) var(--ease-lux), --schrift var(--dur-zeit) var(--ease-lux), --schrift-leise var(--dur-zeit) var(--ease-lux); }
html[data-zeit="morgen"] { --flaeche: var(--karte); --schrift: var(--text); --schrift-leise: var(--leise); }
html[data-zeit="tag"] { --flaeche: var(--grund); --schrift: var(--text); --schrift-leise: var(--leise); }
html[data-zeit="nachmittag"] { --flaeche: var(--band); --schrift: var(--text); --schrift-leise: #55524c; }   /* 5,6 : 1 auf --band */
html[data-zeit="abend"] { --flaeche: var(--abend); --schrift: var(--creme); --schrift-leise: #dccbb6; --fokus: var(--creme); }   /* 5,6 : 1 auf --abend */
html[data-zeit="nacht"] { --flaeche: var(--nacht); --schrift: var(--nacht-text); --schrift-leise: var(--nacht-leise); --fokus: var(--creme); }
html[data-zeit="abend"] ::selection, html[data-zeit="nacht"] ::selection { background: var(--creme); color: var(--nacht); }
/* Ohne JS bekommt jedes Kapitel seine eigene Fläche */
html:not(.js) [data-zeit-kapitel="morgen"] { background: var(--karte); }
html:not(.js) [data-zeit-kapitel="nachmittag"] { background: var(--band); }
html:not(.js) [data-zeit-kapitel="abend"]:not(.held) { background: var(--abend); color: var(--creme); }
html:not(.js) [data-zeit-kapitel="nacht"] { background: var(--nacht); color: var(--nacht-text); }

/* Sonnenbogen: zeigt nur, wie weit der Tag ist (Scroll-Fortschritt), ohne Text, nur am Desktop */
.tageslauf { display: none; }
@supports (animation-timeline: scroll()) {
  @media (min-width: 1181px) and (hover: hover) {
    .tageslauf { position: fixed; left: var(--rand); bottom: 22px; z-index: 6; display: block; width: 64px; color: var(--schrift); opacity: 0; pointer-events: none; transition: color var(--dur-zeit) var(--ease-lux), opacity var(--dur-zu) var(--ease-zu); }
    html.ist-unterwegs .tageslauf { opacity: .7; transition: color var(--dur-zeit) var(--ease-lux), opacity var(--dur-auf) var(--ease-auf); }
    .tageslauf svg { width: 100%; overflow: visible; }
    .tageslauf__bahn { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
    .tageslauf__horizont { stroke: currentColor; stroke-width: 1; }
    .tageslauf__sonne { fill: currentColor; offset-path: path("M6 54 A54 54 0 0 1 114 54"); offset-rotate: 0deg; animation: sonnenlauf linear both; animation-timeline: scroll(root); }
    @keyframes sonnenlauf { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  }
}

/* ---------- Masken-Zeilen (split-mask-reveal): Zeilen stehen im HTML ---------- */
.maske { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.maske > span { display: inline-block; }
html.js[data-bewegung="voll"] [data-zeilen] .maske > span { transition: translate var(--dur-lux-text) var(--ease-lux-out) calc(var(--i, 0) * var(--stagger-lux)); }
html.js[data-bewegung="voll"] [data-zeilen]:not(.ist-da) .maske > span { translate: 0 112%; }
@keyframes steigen { from { translate: 0 112%; } }
@keyframes auftauchen { from { opacity: 0; translate: 0 14px; } }
@keyframes oeffnen-unten { from { clip-path: inset(100% 0 0 0); } }
@keyframes zurueck-klein { from { scale: 1.06; } }

.gross, .kapitel h2, .titel__h1, .zinfo__satz, .karte__kopf h2, .programm__kopf h2, .anfrage__titel, .saunafakten h2, .vergleich h2, .pakete-kurz h2, .gutschein h2 { font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 72; letter-spacing: var(--track-h); line-height: 1.02; text-wrap: balance; }

/* ---------- Kopf: bleibt beim Seitenwechsel stehen ---------- */
.kopf { view-transition-name: kopf; }
.kopf--hell { color: var(--schrift); }
.kopf--hell::before { display: none; }
.kopf--hell:not(.ist-fest) .knopf, .kopf--hell .knopf { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--haus); border-color: var(--haus); color: var(--creme); }
.kopf--hell .knopf__kern { opacity: 0; }
.kopf__nav a.ist-bereich::after { transform: scaleX(.35); }
.kopf__nav a[aria-current="page"]::after { transform: scaleX(1); }
.marke[aria-current="page"] { cursor: default; }

/* ---------- Start: Hero mit Wasserlinie (intro-ohne-wartezeit, Variante clip) ---------- */
.held { height: max(620px, min(94svh, 980px)); background: var(--nacht); }
.held__titel { font-size: clamp(2.75rem, 1.4rem + 5vw, 6.5rem); font-weight: 300; font-variation-settings: "opsz" 72; letter-spacing: -.025em; line-height: .98; max-width: none; }
.held__titel .maske { width: fit-content; }
.held__linie { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.held__linie::before, .held__linie::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--creme); opacity: 0; }
/* Intro: ab dem ersten Frame steht ein Band des Fotos zwischen zwei Linien, es öffnet sich in --dur-intro; Kopf und Buchung sind nach etwa 0,7 s bedienbar */
html.los[data-intro="voll"][data-bewegung="voll"] .held--start .held__buehne { animation: wasserlinie var(--dur-intro) var(--ease-lux) 80ms both; }
html.los[data-intro="voll"][data-bewegung="voll"] .held--start .held__linie::before { animation: linie-oben var(--dur-intro) var(--ease-lux) 80ms both, linie-ziehen 360ms var(--ease-lux-out) both; }
html.los[data-intro="voll"][data-bewegung="voll"] .held--start .held__linie::after { animation: linie-unten var(--dur-intro) var(--ease-lux) 80ms both, linie-ziehen 360ms var(--ease-lux-out) both; }
@keyframes wasserlinie { from { clip-path: inset(41% 0 41% 0); } to { clip-path: inset(0); } }
@keyframes linie-ziehen { from { scale: 0 1; opacity: 1; } to { scale: 1 1; opacity: 1; } }
@keyframes linie-oben { 0% { top: 41%; opacity: 1; } 70% { opacity: .5; } 100% { top: 0; opacity: 0; } }
@keyframes linie-unten { 0% { top: 59%; opacity: 1; } 70% { opacity: .5; } 100% { top: 100%; opacity: 0; } }
html.los[data-intro="voll"][data-bewegung="voll"] .held--start .held__titel .maske > span { animation: steigen var(--dur-lux-text) var(--ease-lux-out) calc(380ms + var(--i) * var(--stagger-lux)) both; }
html.los[data-intro="kurz"][data-bewegung="voll"] .held--start .held__titel .maske > span { animation: steigen var(--dur-lux-text) var(--ease-lux-out) calc(120ms + var(--i) * var(--stagger-lux)) both; }
html.los[data-intro="aus"][data-bewegung="voll"] .held--start .held__titel .maske > span { animation: steigen var(--dur-lux-text) var(--ease-lux-out) calc(var(--dur-seite) * .4 + var(--i) * var(--stagger-lux)) both; }
html.los[data-intro="voll"][data-bewegung="voll"] .s-start .kopf, html.los[data-intro="voll"][data-bewegung="voll"] .s-start .held__steuer { animation: auftauchen 600ms var(--ease-lux-out) 200ms both; }
html.los[data-intro="voll"][data-bewegung="voll"] .s-start .ort-leiste--leiste .leiste { animation: auftauchen 600ms var(--ease-lux-out) 320ms both; }

/* ---------- Kapitel der Startseite ---------- */
.kapitel { position: relative; padding: var(--sektion) var(--rand); color: var(--schrift); }
.kapitel__kopf { max-width: var(--max); margin: 0 auto clamp(48px, 7vw, 112px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); align-items: end; }
.kapitel__kopf h2 { grid-column: 1 / span 8; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 6rem); }
.kapitel__satz { grid-column: 10 / -1; max-width: 26ch; color: var(--schrift-leise); font-size: var(--fs-lead); line-height: 1.45; }
.kapitel__weiter { max-width: var(--max); margin: clamp(40px, 5vw, 72px) auto 0; }
.kapitel--morgen { padding-bottom: calc(var(--sektion) * .4); }

/* Zimmer als versetzte Komposition (editorial, keine gleichen Karten) */
.zk-feld { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(16px, 2.4vw, 32px); align-items: start; }
.zk { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.zk--a { grid-column: 1 / span 7; }
.zk--b { grid-column: 9 / span 4; margin-top: clamp(80px, 14vw, 220px); }
.zk--c { grid-column: 2 / span 4; margin-top: clamp(-120px, -6vw, -40px); }
.zk--d { grid-column: 7 / span 5; margin-top: clamp(24px, 4vw, 64px); }
.zk__bild { display: block; overflow: hidden; border-radius: 2px; background: var(--bild-grund); clip-path: inset(0 round 2px); transition: clip-path var(--dur-lux-text) var(--ease-lux); }
.zk--a .zk__bild { aspect-ratio: 5 / 4; } .zk--b .zk__bild { aspect-ratio: 3 / 4; } .zk--c .zk__bild { aspect-ratio: 4 / 5; } .zk--d .zk__bild { aspect-ratio: 3 / 2; }
.zk__maske { display: block; width: 100%; height: 100%; }
.zk__bild img { width: 100%; height: 100%; object-fit: cover; scale: 1.001; transition: scale var(--dur-lux-text) var(--ease-lux); }
.zk__name { font: 300 clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem)/1.05 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.015em; padding-top: 6px; }
.zk__meta { font-size: var(--fs-klein); color: var(--schrift-leise); font-variant-numeric: tabular-nums; }
.zk__meta b { font-weight: 560; color: var(--schrift); }
@media (hover: hover) and (pointer: fine) {
  html[data-bewegung="voll"] .zk:hover .zk__bild, html[data-bewegung="voll"] .naechstes__link:hover .naechstes__bild { clip-path: inset(3% round 2px); transition-timing-function: var(--ease-lux-out); }
  html[data-bewegung="voll"] .zk:hover .zk__bild img, html[data-bewegung="voll"] .naechstes__link:hover .naechstes__bild img { scale: 1.1; transition-timing-function: var(--ease-lux-out); }
}
.zk:focus-visible { outline-offset: 8px; }

/* Der See wächst zwischen zwei Wörtern zum Vollbild (medien-expansion-scroll), die nächste Sektion fährt darüber (section-overlap-uebergang) */
.weite { position: relative; height: 280vh; view-timeline-name: --weite; }
.weite--klein { height: 220vh; }
.weite__buehne { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; overflow: clip; }
.weite { --halb: 14vw; }
.weite__bild { position: absolute; inset: 0; margin: 0; clip-path: inset(29% calc(50% - var(--halb)) round 4px); }
.weite__bild img { width: 100%; height: 100%; object-fit: cover; scale: 1.2; }
.weite__wort { position: relative; z-index: 2; font: 300 clamp(2rem, .8rem + 4vw, 5.5rem)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.025em; color: var(--schrift); white-space: nowrap; }
.weite__wort--l { grid-column: 1; justify-self: end; padding-right: calc(34vw / 2 + 24px); grid-row: 1; }
.weite__wort--r { grid-column: 3; justify-self: start; padding-left: calc(34vw / 2 + 24px); grid-row: 1; font-style: italic; }
.weite__wort--l, .weite__wort--r { grid-column: 1 / -1; justify-self: center; }
.weite__wort--l { translate: calc(-50% - var(--halb) - 28px) 0; padding: 0; }
.weite__wort--r { translate: calc(50% + var(--halb) + 28px) 0; padding: 0; }
@supports (animation-timeline: view()) {
  html[data-bewegung="voll"] .weite__bild { animation: weite-auf linear both; animation-timeline: --weite; animation-range: contain 0% contain 78%; }
  html[data-bewegung="voll"] .weite__bild img { animation: weite-bild linear both; animation-timeline: --weite; animation-range: contain 0% contain 78%; }
  html[data-bewegung="voll"] .weite__wort--l { animation: weite-l linear both; animation-timeline: --weite; animation-range: contain 0% contain 70%; }
  html[data-bewegung="voll"] .weite__wort--r { animation: weite-r linear both; animation-timeline: --weite; animation-range: contain 0% contain 70%; }
}
@keyframes weite-auf { to { clip-path: inset(0 0 round 0); } }
@keyframes weite-bild { to { scale: 1; } }
@keyframes weite-l { to { translate: calc(-50% - 60vw) 0; opacity: 0; } }
@keyframes weite-r { to { translate: calc(50% + 60vw) 0; opacity: 0; } }
/* ohne Scroll-Zeitachse oder bei ruhiger Bewegung: ein ruhiges Querformat mit den Wörtern darüber */
@supports not (animation-timeline: view()) { .weite { height: auto; } .weite__buehne { position: relative; height: auto; display: grid; gap: var(--s-4); padding: var(--sektion) var(--rand); } .weite__bild { position: relative; clip-path: none; aspect-ratio: 3 / 2; } .weite__bild img { scale: 1; } .weite__wort--l, .weite__wort--r { translate: none; } }
html[data-bewegung="ruhig"] .weite { height: auto; }
html[data-bewegung="ruhig"] .weite__buehne { position: relative; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4) var(--s-6); padding: var(--sektion) var(--rand); }
html[data-bewegung="ruhig"] .weite__bild { position: relative; order: 3; flex: 1 1 100%; clip-path: none; aspect-ratio: 16 / 9; }
html[data-bewegung="ruhig"] .weite__bild img { scale: 1; }
html[data-bewegung="ruhig"] .weite__wort--l, html[data-bewegung="ruhig"] .weite__wort--r { translate: none; }

/* Stube: zwei Bilder versetzt um den Text */
.kapitel--stube { z-index: 2; margin-top: -60vh; background: var(--flaeche); box-shadow: 0 -1px 0 color-mix(in oklab, var(--schrift) 18%, transparent); }
.paar { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) clamp(16px, 2.4vw, 32px); align-items: center; }
.paar__gross { grid-column: 1 / span 6; grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 5; }
.paar__gross img, .paar__klein img { width: 100%; height: 100%; object-fit: cover; }
.paar__text { grid-column: 8 / span 5; grid-row: 1; display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.paar__text h2 { font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem); }
.paar__text p { max-width: 42ch; }
.paar__meta { color: var(--schrift-leise); font-size: var(--fs-klein); }
.paar__klein { grid-column: 9 / span 3; grid-row: 2; margin: 0; aspect-ratio: 4 / 5; }

/* Abend: das Bild steigt aus dem Wasser */
.kapitel--abend { padding-top: calc(var(--sektion) * .5); }
.steg { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; aspect-ratio: 16 / 9; overflow: clip; }
.steg img { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  html[data-bewegung="voll"] .steg { animation: aus-dem-wasser linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  html[data-bewegung="voll"] .steg img { animation: bild-zurueck linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; animation-timing-function: var(--ease-lux-out); }
}
@keyframes aus-dem-wasser { from { clip-path: inset(46% 8% 46% 8%); } to { clip-path: inset(0); } }
.steg__text { max-width: var(--max); margin: clamp(40px, 5vw, 80px) auto 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4) clamp(16px, 2.4vw, 32px); }
.steg__text h2 { grid-column: 1 / span 7; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem); }
.steg__text p { grid-column: 8 / span 4; align-self: end; max-width: 36ch; }
.steg__text .textlink { grid-column: 8 / span 4; }

/* Nacht: Zitat, Bewertungen, Pakete */
.kapitel--nacht { display: grid; gap: clamp(56px, 7vw, 112px); padding-top: calc(var(--sektion) * .6); }
.kapitel--nacht > * { width: 100%; max-width: var(--max); margin-inline: auto; }
.kapitel--nacht .zitat { max-width: 1100px; }
.zitat__name { color: var(--schrift); }
.zitat__quelle { color: var(--schrift-leise); }
.bewertung-zeile { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); align-items: baseline; padding-top: var(--s-5); border-top: 1px solid color-mix(in oklab, var(--schrift) 22%, transparent); font-size: var(--fs-klein); }
.bewertung-zeile b { font: 400 1.375rem/1 var(--serif); margin-right: 8px; }
.bewertung-zeile span { color: var(--schrift-leise); font-variant-numeric: tabular-nums; }
.bewertung-zeile__echt { flex: 1 1 100%; color: var(--schrift-leise); font-size: .8125rem; }
.pakete-kurz { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) clamp(16px, 2.4vw, 32px); }
.pakete-kurz h2 { grid-column: 1 / span 5; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem); }
.pz-liste { grid-column: 7 / -1; list-style: none; padding: 0; border-top: 1px solid color-mix(in oklab, var(--schrift) 22%, transparent); }
.pakete-kurz > p { grid-column: 7 / -1; }
.pz { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid color-mix(in oklab, var(--schrift) 22%, transparent); color: inherit; text-decoration: none; }
.pz__bild { grid-row: 1 / span 2; width: 72px; aspect-ratio: 1; overflow: hidden; border-radius: 2px; }
.pz__bild img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-lux-text) var(--ease-lux); }
.pz__name { font: 400 1.5rem/1.1 var(--serif); }
.pz__zeile { grid-column: 2; color: var(--schrift-leise); font-size: var(--fs-klein); }
.pz__preis { grid-column: 3; grid-row: 1 / span 2; font: 400 1.25rem/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { html[data-bewegung="voll"] .pz:hover .pz__bild img { scale: 1.12; transition-timing-function: var(--ease-lux-out); } }

/* ---------- Unterseiten: Titel, geteilter Hero, Vollbild-Hero ---------- */
.titel { padding: calc(var(--kopf-h) + clamp(56px, 10vw, 160px)) var(--rand) clamp(48px, 6vw, 96px); max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5) clamp(16px, 2.4vw, 32px); align-items: end; }
.titel__h1 { grid-column: 1 / span 9; font-size: clamp(3rem, 1.3rem + 6.4vw, 8rem); letter-spacing: -.03em; line-height: .95; }
.titel__h1 .maske { width: fit-content; }
.titel__satz { grid-column: 10 / -1; max-width: 28ch; color: var(--schrift-leise); font-size: var(--fs-lead); line-height: 1.45; }
.titel--anreise .titel__h1 { grid-column: 1 / -1; font-size: clamp(2.75rem, 1.2rem + 5.4vw, 7rem); }
.spalt { min-height: min(100svh, 980px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.spalt__text { display: grid; align-content: end; gap: var(--s-5); padding: calc(var(--kopf-h) + var(--s-8)) clamp(24px, 5vw, 96px) clamp(48px, 7vw, 112px) var(--rand); }
.spalt__text .titel__h1 { font-size: clamp(2.75rem, 1.2rem + 4.6vw, 6.5rem); }
.spalt__text .titel__satz { max-width: 34ch; }
.spalt__meta { font-size: var(--fs-klein); color: var(--schrift-leise); }
.spalt__bild { margin: 0; position: relative; overflow: clip; background: var(--bild-grund); }
.spalt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spalt--dunkel { background: var(--nacht); color: var(--nacht-text); }
.spalt--dunkel .titel__satz, .spalt--dunkel .spalt__meta { color: var(--nacht-leise); }
.vheld, .zheld { position: relative; height: max(560px, min(88svh, 920px)); overflow: clip; background: var(--nacht); color: var(--creme); }
.vheld__bild, .zheld__bild { position: absolute; inset: 0; margin: 0; }
.vheld__bild img, .zheld__bild img { width: 100%; height: 100%; object-fit: cover; }
.vheld::after, .zheld::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(30 28 26 / .34) 0, transparent 26%, transparent 48%, rgb(30 28 26 / .62) 100%); }
.vheld__text, .zheld__text { position: absolute; z-index: 2; left: var(--rand); right: var(--rand); bottom: clamp(40px, 7vw, 96px); display: grid; gap: var(--s-3); }
.vheld .titel__h1 { font-size: clamp(3.25rem, 1.2rem + 8vw, 10rem); line-height: .9; }
.zheld__titel { font: 300 clamp(3rem, 1.2rem + 6.6vw, 8.5rem)/.95 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.03em; }
.zheld__zurueck { font-size: var(--fs-klein); }
/* Eintritt ohne Seitenwechsel (Direktaufruf): Bild öffnet sich von unten, Titel steigt */
html.los:not([data-intro="aus"])[data-bewegung="voll"] :is(.vheld__bild, .zheld__bild, .spalt__bild) { animation: oeffnen-unten var(--dur-lux) var(--ease-lux) 120ms both; }
html.los:not([data-intro="aus"])[data-bewegung="voll"] :is(.vheld__bild, .zheld__bild, .spalt__bild) img { animation: zurueck-klein var(--dur-lux-lg) var(--ease-lux-out) 120ms both; }
html.los:not([data-intro="aus"])[data-bewegung="voll"] :is(.titel__h1, .zheld__titel) .maske > span { animation: steigen var(--dur-lux-text) var(--ease-lux-out) calc(380ms + var(--i) * var(--stagger-lux)) both; }
html.los[data-intro="aus"][data-bewegung="voll"] :is(.titel__h1, .zheld__titel) .maske > span { animation: steigen var(--dur-lux-text) var(--ease-lux-out) calc(var(--dur-seite) * .4 + var(--i) * var(--stagger-lux)) both; }
html.los:not([data-intro="aus"])[data-bewegung="voll"] :is(.titel__satz, .spalt__meta, .zheld__zurueck) { animation: auftauchen 900ms var(--ease-lux-out) 900ms both; }

/* ---------- Zimmer-Übersicht ---------- */
.s-zimmer .zimmer { padding-top: 0; }
.vergleich { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; display: grid; gap: var(--s-7); }
.vergleich__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5) clamp(16px, 2.4vw, 32px); align-items: start; }
.vergleich h2 { grid-column: 1 / span 5; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem); }
.vorteil-liste { grid-column: 7 / -1; list-style: none; padding: 0; display: grid; }
.vorteil-liste li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--linie); }
.vorteil-liste b { font: 400 1.5rem/1.15 var(--serif); }
.vorteil-liste span { color: var(--schrift-leise); }
.vergleich__tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vergleich__tabelle th, .vergleich__tabelle td { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-top: 1px solid var(--linie); text-align: left; vertical-align: baseline; }
.vergleich__tabelle thead th { font-size: var(--fs-label); font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); border-top: 0; }
.vergleich__tabelle tbody th { font: 400 1.375rem/1.2 var(--serif); }
.vergleich__tabelle td:last-child { white-space: nowrap; }

/* ---------- Zimmerseite ---------- */
.zinfo { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: var(--sektion) var(--rand) calc(var(--sektion) * .6); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
.zinfo__text { display: grid; gap: var(--s-5); align-content: start; }
.zinfo__satz { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.75rem); }
.zinfo__text > p { max-width: 48ch; font-size: var(--fs-lead); line-height: 1.5; }
.fakten--hell div { border-top-color: var(--linie); }
.fakten--hell dt { color: var(--schrift-leise); opacity: 1; }
.zinfo__preis { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zinfo__preis b { font: 300 2.5rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.zinfo__preis span { color: var(--schrift-leise); }
.zinfo__buchen { position: sticky; top: calc(var(--kopf-h) + 24px); }
.ort-leiste--zimmer { margin: 0; padding: 0; max-width: none; }
.leiste--zimmer { grid-template-columns: minmax(0, 1fr); min-height: 0; box-shadow: 0 1px 2px rgb(62 58 55 / .06), 0 14px 40px rgb(62 58 55 / .1); }
.leiste--zimmer .feld--datum { border-bottom: 1px solid var(--linie); }
.leiste--zimmer .feld--gaeste { border-left: 0; }
.leiste--zimmer .feld__knopf { padding: 16px 20px; }
.leiste--zimmer .los { margin: 12px; justify-self: stretch; }
.zgalerie { padding: 0 var(--rand) var(--sektion); }
.zg { max-width: var(--max); margin: 0 auto; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); align-items: end; }
.zg__fenster { grid-column: 1 / span 7; } .zg__bett { grid-column: 8 / span 5; } .zg__weit { grid-column: 3 / span 8; }
.zg__knopf { display: block; width: 100%; padding: 0; border: 0; background: var(--bild-grund); overflow: hidden; border-radius: 2px; cursor: zoom-in; }
.zg__fenster .zg__knopf { aspect-ratio: 4 / 3; } .zg__bett .zg__knopf { aspect-ratio: 4 / 5; } .zg__weit .zg__knopf { aspect-ratio: 16 / 9; }
.zg__knopf img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-lux) var(--ease-lux); }
.zg__knopf:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { html[data-bewegung="voll"] .zg__knopf:hover img { scale: 1.04; transition-timing-function: var(--ease-lux-out); transition-duration: var(--dur-lux-lg); } }
.zg .enthuellen, .zg__knopf { overflow: clip; }
/* Nächstes Zimmer: das Bild wird beim Klick zum Hero der nächsten Seite */
.naechstes { padding: 0 var(--rand) var(--sektion); }
.naechstes__link { position: relative; display: block; max-width: calc(var(--max)); margin: 0 auto; color: var(--creme); text-decoration: none; }
.naechstes__bild { display: block; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 2px; background: var(--bild-grund); clip-path: inset(0 round 2px); transition: clip-path var(--dur-lux-text) var(--ease-lux); }
.naechstes__bild img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-lux-text) var(--ease-lux); }
.naechstes__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(30 28 26 / .55), transparent 60%); }
.naechstes__text { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px); z-index: 2; display: grid; gap: 6px; }
.naechstes__label { font-size: var(--fs-label); font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; }
.naechstes__name { font: 300 clamp(2.25rem, 1.2rem + 4vw, 5.5rem)/1 var(--serif); letter-spacing: -.025em; }
.naechstes__vor { max-width: var(--max); margin: var(--s-4) auto 0; font-size: var(--fs-klein); }

/* ---------- Sauna & See ---------- */
.saunafakten { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; display: grid; gap: var(--s-7); }
.saunafakten h2 { font-size: clamp(2.5rem, 1.3rem + 4.4vw, 6rem); max-width: 14ch; }
.fakten-gross { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.fakten-gross div { padding-top: var(--s-4); border-top: 1px solid var(--schrift); }
.fakten-gross dt { font-size: var(--fs-label); font-weight: 560; font-stretch: var(--breit); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--schrift-leise); }
.fakten-gross dd { font: 300 clamp(2rem, 1.4rem + 2vw, 3.5rem)/1.05 var(--serif); font-variant-numeric: tabular-nums lining-nums; margin-top: var(--s-2); }
.saunafakten__text { max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; }
.s-see .weite__wort { color: var(--schrift); }

/* ---------- Feiern, Gutschein, Anreise ---------- */
.anfrage-seite { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; }
.anfrage-seite .anfrage { margin-top: 0; }
.anfrage__titel { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); }
.anfrage__direkt { line-height: 1.9; overflow-wrap: anywhere; }
.titel--gutschein, .titel--zimmer { padding-bottom: clamp(40px, 5vw, 72px); }
.s-gutschein .angebote { background: transparent; padding-top: 0; }
.s-gutschein .gutschein { padding-top: var(--sektion); border-top: 1px solid var(--linie); }
.s-anreise .anreise { padding-top: 0; }

/* ---------- Telefon: eine Daumenleiste auf Seiten ohne Buchungsleiste (mobile-bottom-navigation) ---------- */
.daumen { display: none; }

/* ---------- Fuß: große Wortmarke als Abschluss ---------- */
.fuss__wort { max-width: var(--max); margin: 0 auto; padding: var(--s-7) 0 var(--s-5); font: italic 300 min(14.6vw, 14.5rem)/.82 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.045em; color: var(--nacht-text); white-space: nowrap; overflow: clip; border-bottom: 1px solid rgb(243 238 231 / .16); }
.fuss__karte { border-bottom: 0; }

/* ---------- Seitenwechsel (vt-cross-document-mpa, vt-shared-element-morph): die neue Seite öffnet sich an der Wasserlinie ---------- */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-group(kopf) { z-index: 3; animation-duration: var(--dur-auf); animation-timing-function: var(--ease-auf); }
::view-transition-old(root) { animation: seite-weg var(--dur-seite) var(--ease-lux) both; }
::view-transition-new(root) { animation: seite-wasser var(--dur-seite) var(--ease-lux) both; }
@keyframes seite-wasser { from { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); } to { clip-path: inset(0); } }
@keyframes seite-weg { to { opacity: .35; scale: .985; } }
@keyframes blende-weg { to { opacity: 0; } }
@keyframes blende-her { from { opacity: 0; } }
/* tiefer hinein: Zimmerbild wächst zum Hero */
html:active-view-transition-type(morph)::view-transition-old(root) { animation: none; } /* die Buchungsleiste hat eine eigene Ebene und geht sofort */
html:active-view-transition-type(morph)::view-transition-new(root) { animation: blende-her calc(var(--dur-seite-morph) * .5) var(--ease-lux) calc(var(--dur-seite-morph) * .25) both; }
::view-transition-group(zimmer-bild) { z-index: 2; overflow: clip; animation-duration: var(--dur-seite-morph); animation-timing-function: var(--ease-lux); }
::view-transition-old(zimmer-bild), ::view-transition-new(zimmer-bild) { height: 100%; width: 100%; object-fit: cover; animation-duration: calc(var(--dur-seite-morph) * .5); }
/* zurück nach oben: die alte Seite schließt sich zur Linie, darunter liegt die neue */
html:active-view-transition-type(zurueck)::view-transition-old(root) { z-index: 1; animation: wasser-zu calc(var(--dur-seite) * .85) var(--ease-lux) both; }
html:active-view-transition-type(zurueck)::view-transition-new(root) { animation: none; }
@keyframes wasser-zu { to { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); } }
/* zwischen zwei Zimmern: Schub wie die Signatur-Slideshow */
html:active-view-transition-type(seitlich)::view-transition-old(root) { animation: schub-alt var(--dur-seite) var(--ease-lux) both; }
html:active-view-transition-type(seitlich)::view-transition-new(root) { animation: schub-neu var(--dur-seite) var(--ease-lux) both; }
html:active-view-transition-type(seitlich-zurueck)::view-transition-old(root) { animation: schub-alt-r var(--dur-seite) var(--ease-lux) both; }
html:active-view-transition-type(seitlich-zurueck)::view-transition-new(root) { animation: schub-neu-r var(--dur-seite) var(--ease-lux) both; }
@keyframes schub-alt { to { translate: -30% 0; } }
@keyframes schub-neu { from { clip-path: inset(0 0 0 100%); } }
@keyframes schub-alt-r { to { translate: 30% 0; } }
@keyframes schub-neu-r { from { clip-path: inset(0 100% 0 0); } }
@media (max-width: 640px) { :root { --dur-seite: 800ms; --dur-seite-morph: 960ms; } }
html[data-bewegung="ruhig"]::view-transition-group(*), html[data-bewegung="ruhig"]::view-transition-old(*), html[data-bewegung="ruhig"]::view-transition-new(*) { animation-duration: 1ms !important; }

/* ---------- Breiten für Teil 2 ---------- */
@media (max-width: 1000px) {
  .kapitel__kopf h2, .kapitel__satz { grid-column: 1 / -1; }
  .kapitel__satz { margin-top: var(--s-4); }
  .paar__gross { grid-column: 1 / span 7; grid-row: 1; }
  .paar__klein { grid-column: 9 / -1; grid-row: 1; align-self: end; }
  .paar__text { grid-column: 1 / -1; grid-row: 2; }
  .steg__text h2, .steg__text p, .steg__text .textlink { grid-column: 1 / -1; }
  .pakete-kurz h2, .pz-liste, .pakete-kurz > p { grid-column: 1 / -1; }
  .titel__h1, .titel__satz { grid-column: 1 / -1; }
  .spalt { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .spalt__text { padding: calc(var(--kopf-h) + var(--s-7)) var(--rand) var(--s-7); }
  .spalt__bild { aspect-ratio: 4 / 5; max-height: 80svh; }
  .zinfo { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .zinfo__buchen { position: static; }
  .vergleich h2, .vorteil-liste { grid-column: 1 / -1; }
  .fakten-gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .zk-feld { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78vw; gap: 16px; margin-inline: calc(var(--rand) * -1); padding: 0 var(--rand) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: thin; }
  .zk { grid-column: auto !important; margin: 0 !important; scroll-snap-align: start; }
  .zk .zk__bild { aspect-ratio: 4 / 5 !important; }
  .weite { height: 200vh; }
  .weite__wort { font-size: clamp(2rem, 9vw, 3rem); }
  .weite { --halb: 34vw; }
  .weite__bild { clip-path: inset(34% calc(50% - var(--halb)) round 4px); }
  .weite__wort--l { translate: 0 calc(-1 * (16svh + 1em)); }
  .weite__wort--r { translate: 0 calc(16svh + 1em); }
  @keyframes weite-l { to { translate: 0 -60svh; opacity: 0; } }
  @keyframes weite-r { to { translate: 0 60svh; opacity: 0; } }
  .kapitel--stube { margin-top: -40vh; }
  .zg { grid-template-columns: minmax(0, 1fr); }
  .zg li { grid-column: 1 !important; }
  .naechstes__bild { aspect-ratio: 4 / 3; }
  .vergleich__tabelle thead { display: none; }
  .vergleich__tabelle tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--linie); }
  .vergleich__tabelle th, .vergleich__tabelle td { padding: 0; border: 0; }
  .vergleich__tabelle td:nth-child(2), .vergleich__tabelle td:nth-child(3), .vergleich__tabelle td:nth-child(4) { grid-column: 1; color: var(--schrift-leise); font-size: var(--fs-klein); }
  .vergleich__tabelle td:last-child { grid-column: 2; grid-row: 1; }
  .vorteil-liste li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fuss__wort { font-size: 13.4vw; }
}
@media (max-width: 640px) {
  .held__text { bottom: 128px; }
  html.js .daumen { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 15; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border-radius: 30px; border: 1px solid var(--linie); background: var(--creme); color: var(--text); box-shadow: 0 10px 34px rgb(62 58 55 / .22); }
  .daumen .mobil-menue { display: grid; place-items: center; width: 52px; height: 52px; margin: 6px 0 6px 6px; border: 0; border-radius: 50%; background: var(--grund); color: var(--text); }
  .daumen__tel { display: grid; gap: 1px; min-width: 0; padding: 8px 10px; color: var(--text); text-decoration: none; }
  .daumen__tel .label { color: var(--leise); font-size: .6875rem; }
  .daumen__tel b { font: 400 1.125rem/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .daumen .los { margin: 6px 6px 6px 0; min-height: 52px; padding-left: 16px; }
  html:not(.js) body { padding-bottom: 0; }
  .ort-leiste--zimmer .leiste-unten { display: none; }
  .titel { padding-top: calc(var(--kopf-h) + var(--s-7)); }
  .kapitel__kopf h2 { font-size: clamp(2.375rem, 11vw, 3.25rem); }
  .fakten-gross { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .naechstes__vor { padding-bottom: var(--s-4); }
}
@media (forced-colors: active) {
  .tageslauf { display: none; }
  .zk__bild, .naechstes__bild, .zg__knopf { border: 1px solid CanvasText; }
  .vheld::after, .zheld::after, .naechstes__bild::after { display: none; }
  .vheld__text, .zheld__text, .naechstes__text { background: Canvas; color: CanvasText; padding: 8px; }
  .daumen { border: 1px solid CanvasText; }
}
@media print {
  .weite { height: auto; } .weite__buehne { position: relative; height: auto; } .weite__bild { position: relative; clip-path: none; } .tageslauf, .daumen, .naechstes { display: none !important; }
  .kapitel--stube { margin-top: 0; }
}

/* ---------- Nacharbeit nach Jury-Prüfung (02.11.2026) ---------- */
/* Buchungsleiste der Startseite als eigene Ebene: sie verschwindet beim Seitenwechsel sofort, statt über der neuen Seite zu stehen */
.s-start .ort-leiste--leiste .leiste { view-transition-name: leiste; }
::view-transition-group(leiste) { z-index: 2; animation-duration: calc(var(--dur-seite) * .25); }
::view-transition-old(leiste) { animation: blende-weg calc(var(--dur-seite) * .2) var(--ease-zu) both; }
::view-transition-new(leiste) { animation: blende-her calc(var(--dur-seite) * .4) var(--ease-lux) calc(var(--dur-seite) * .6) both; }
/* Masken dürfen auf schmalen Schirmen umbrechen (lange Wörter mit &shy;), statt rechts abzuschneiden */
@media (max-width: 640px) { .maske > span { max-width: 100%; } .maske { hyphens: manual; } }
/* Telefon: die Bildfolge wird nur gewischt; Pfeile und Striche lägen auf der Buchungsleiste */
@media (max-width: 640px) { .held__steuer { display: none; } }
/* Nacht-Kapitel ruhiger: ein Zitat, eine Bewertungszeile, ein Block „Länger bleiben“ mit Paketen und Seebrief */
.kapitel--nacht { gap: clamp(48px, 6vw, 96px); padding-bottom: calc(var(--sektion) * .7); }
.zitat figcaption { display: block; }
.zitat__quelle { font-size: var(--fs-klein); }
.bewertung-zeile { display: block; max-width: var(--max); font-size: var(--fs-klein); color: var(--schrift-leise); line-height: 1.7; }
.bewertung-zeile b { font: 400 1.375rem/1 var(--serif); color: var(--schrift); margin: 0 0 0 6px; }
.bewertung-zeile a { color: var(--schrift); }
.bewertung-zeile__echt { display: inline; font-size: inherit; }
.bleiben { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) clamp(16px, 2.4vw, 32px); padding-top: clamp(48px, 6vw, 96px); border-top: 1px solid color-mix(in oklab, var(--schrift) 22%, transparent); }
.bleiben h2 { grid-column: 1 / span 5; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem); }
.bleiben .pz-liste { grid-column: 7 / -1; grid-row: 1 / span 2; }
.bleiben__weiter { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
.bleiben__brief { grid-column: 7 / -1; margin-top: var(--s-5); }
.bleiben__label { grid-column: 1 / -1; font: 300 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.2 var(--serif); font-variation-settings: "opsz" 48; color: var(--schrift); }
.bleiben .brief__klein { color: var(--schrift-leise); }
.pz__zeile { font-size: var(--fs-text); }
@media (max-width: 1000px) {
  .bleiben h2, .bleiben .pz-liste, .bleiben__weiter, .bleiben__brief { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) { .bleiben__brief { grid-template-columns: minmax(0, 1fr); } }