/* Hallmark · macrostructure: Photographic · tone: luxury · anchor hue: 80
 * Gasthaus Kronenhof — Restaurant, Hotel, Saal.
 * Farben und Schrift folgen dem Logo des Kunden. Alle Werte kommen aus
 * tokens.css; in dieser Datei steht kein einziger roher Farbwert.
 */

@import url('/css/fonts.css');
@import url('/css/tokens.css');

/* ══ Grundlage ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: clip;           /* niemals hidden — bricht position: sticky */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: clip;
    margin: 0;
    background: var(--color-dark);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 300;           /* helle Schrift auf dunklem Grund: 50 leichter */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, iframe { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-style: normal;         /* Überschriften sind grundsätzlich aufrecht */
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.005em;
    color: var(--color-heading);
    margin: 0;
    overflow-wrap: anywhere;
    min-width: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
    background: var(--color-brand);
    color: var(--color-heading);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: var(--z-modal);
    transform: translateY(-200%);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-pill);
    background: var(--color-heading);
    color: var(--color-on-accent);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: transform var(--dur-short) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ══ Bausteine ═══════════════════════════════════════════════════════ */

.wrap {
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}
.wrap--narrow { max-width: 54rem; }

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
}

.lede {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--color-ink);
    max-width: var(--measure);
}

.muted { color: var(--color-muted); }

.rule {
    border: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
    margin: 0;
}

/* Sichtbarer Platzhalter — Angaben, die der Kunde noch liefern muss. */
.platzhalter {
    color: var(--color-muted);
    font-style: normal;
    text-decoration: underline dotted var(--color-rule-2);
    text-underline-offset: 4px;
}

/* ── Typografischer Link (C3) ─────────────────────────────────────── */
.tlink {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    white-space: nowrap;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-accent);
    padding-block: var(--space-2xs);
    border-bottom: var(--rule-hair) solid var(--color-accent-dim);
    transition: color var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out);
}
.tlink:hover, .tlink.is-hover { color: var(--color-heading); border-color: var(--color-heading); }
.tlink:hover .tlink__arrow, .tlink.is-hover .tlink__arrow { transform: translateX(4px); }
.tlink:active, .tlink.is-active { color: var(--color-accent-dim); }

/* ── Knopf ────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 2.9rem;
    padding: var(--space-sm) var(--space-xl);
    border: var(--rule-hair) solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;        /* klickbarer Text bricht nie um */
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-out),
                color var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
}
.btn--primary {
    background: var(--color-heading);
    color: var(--color-on-accent);
    border-color: var(--color-heading);
}
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn--ghost {
    background: transparent;
    color: var(--color-heading);
    border-color: var(--color-rule-2);
}
.btn--ghost:hover, .btn--ghost.is-hover {
    border-color: var(--color-heading);
    background: var(--color-paper-2);
    color: var(--color-heading);
}
.btn--outline {
    background: transparent;
    color: var(--color-heading);
    border-color: var(--color-rule-2);
}
.btn--outline:hover, .btn--outline.is-hover {
    background: var(--color-paper-2);
    border-color: var(--color-heading);
    color: var(--color-heading);
}
.btn--outline-hell {
    background: transparent;
    color: var(--color-brand);
    border-color: oklch(93% 0.055 88 / 0.5);
}
.btn--outline-hell:hover, .btn--outline-hell.is-hover {
    background: oklch(93% 0.055 88 / 0.15);
    border-color: var(--color-brand);
    color: var(--color-brand);
}
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.btn[data-state='loading'] { cursor: progress; }
.btn[data-state='loading'] .btn__label::after {
    content: '…';
    animation: ellipsis 1.2s steps(4, end) infinite;
}
@keyframes ellipsis { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }

/* ══ Kopfzeile ═══════════════════════════════════════════════════════ */

.masthead {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-nav);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem var(--page-gutter);
    background: var(--color-paper);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    transition: background-color var(--dur-short) var(--ease-out),
                border-color var(--dur-short) var(--ease-out),
                box-shadow var(--dur-short) var(--ease-out);
}
.masthead::before {
    display: none;
}
.masthead.is-condensed {
    background: var(--color-paper);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.masthead__brand {
    position: relative;
    display: block;
    line-height: 0;
    height: clamp(2.4rem, 3.8vw, 2.9rem);
    aspect-ratio: 1600 / 783;
}
.masthead__logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity var(--dur-short) var(--ease-out);
}
.masthead__logo--hell { opacity: 0; }
.masthead__logo--dunkel { opacity: 1; }

.masthead__nav { position: relative; }
.masthead__list {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-md), 2vw, var(--space-xl));
    list-style: none;
}
.masthead__link {
    display: inline-block;
    padding-block: var(--space-2xs);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--color-heading);
    border-bottom: var(--rule-hair) solid transparent;
    transition: color var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out);
}
.masthead__link:hover, .masthead__link.is-hover { color: var(--color-accent); }
.masthead__link[aria-current='page'] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.masthead__cta { margin-inline-start: var(--space-sm); }
.masthead__cta .btn {
    background: var(--color-heading);
    color: var(--color-on-accent);
    border-color: var(--color-heading);
    min-height: 2.3rem;
    padding-inline: var(--space-lg);
    font-size: var(--text-2xs);
}
.masthead__cta .btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* Transparente Variante nur auf Unterseiten mit dunklem Vollbild-Hero (Restaurant, Hotel, Saal) */
.masthead[data-hero='ja']:not(.is-condensed) {
    background: transparent;
    border-bottom-color: transparent;
}
.masthead[data-hero='ja']:not(.is-condensed)::before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--scrim-top), var(--scrim-klar));
    opacity: 1;
    pointer-events: none;
}
.masthead[data-hero='ja']:not(.is-condensed) .masthead__link {
    color: var(--color-brand);
}
.masthead[data-hero='ja']:not(.is-condensed) .masthead__link:hover {
    color: var(--color-on-accent);
}
.masthead[data-hero='ja']:not(.is-condensed) .masthead__link[aria-current='page'] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}
.masthead[data-hero='ja']:not(.is-condensed) .masthead__logo--dunkel { opacity: 0; }
.masthead[data-hero='ja']:not(.is-condensed) .masthead__logo--hell { opacity: 1; }
.masthead[data-hero='ja']:not(.is-condensed) .masthead__cta .btn {
    background: var(--color-brand);
    color: var(--color-heading);
    border-color: var(--color-brand);
}
.masthead[data-hero='ja']:not(.is-condensed) .masthead__cta .btn:hover {
    background: var(--color-on-accent);
    border-color: var(--color-on-accent);
}

/* Umschalter für schmale Bildschirme */
.masthead__toggle {
    position: absolute;
    inset-block-start: var(--space-lg);
    inset-inline-end: var(--page-gutter);
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem; height: 2.75rem;
    padding: 0;
    background: transparent;
    border: var(--rule-hair) solid var(--color-dark-rule);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out);
}
.masthead__toggle:hover, .masthead__toggle.is-hover { border-color: var(--color-brand); }
.masthead.is-condensed .masthead__toggle { color: var(--color-heading); border-color: var(--color-rule-2); }
.masthead__toggle:active, .masthead__toggle.is-active { transform: translateY(1px); }
.masthead__bars, .masthead__bars::before, .masthead__bars::after {
    display: block;
    width: 17px; height: 1px;
    background: currentColor;
    transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.masthead__bars::before, .masthead__bars::after { content: ''; position: absolute; }
.masthead__bars::before { transform: translateY(-5px); }
.masthead__bars::after  { transform: translateY(5px); }
.masthead__toggle[aria-expanded='true'] .masthead__bars { background: transparent; }
.masthead__toggle[aria-expanded='true'] .masthead__bars::before { transform: rotate(45deg); }
.masthead__toggle[aria-expanded='true'] .masthead__bars::after  { transform: rotate(-45deg); }

/* ══ Bildfolge — H6 Photographic Fold ════════════════════════════════ */

.hero {
    position: relative;
    display: grid;
    /* align-content, nicht align-items: die Zeile ist inhaltshoch, erst
       align-content schiebt sie im Container nach unten. */
    align-content: end;
    min-height: 88svh;
    padding: calc(var(--space-4xl) + var(--space-lg)) 0 var(--space-2xl);
    isolation: isolate;
}
.hero--compact { min-height: 68svh; }

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Sinkt beim Scrollen langsamer als die Seite. Der Überstand oben
       verhindert, dass unten eine Lücke aufreißt. --p-bild kommt aus dem
       Skript und ist 0 (oben) bis 1 (herausgescrollt). */
    transform: translateY(calc(var(--p-bild, 0) * 12%));
    will-change: transform;
}

/* ── Der Saum: heller Rand, der beim Scrollen über das Foto steigt ─────
   Kein Vorhang von oben, sondern der Boden der Seite, der sich hebt —
   dieselbe weiche Kante, mit der auch die Fußzeile arbeitet. */
.hero__saum {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 0;
    height: clamp(7rem, 22vh, 14rem);
    color: var(--color-paper);      /* füllt den Pfad im SVG */
    pointer-events: none;
    transform: translateY(calc(var(--p-saum, 0) * -62%));
    will-change: transform;
}
.hero__saum svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Unter dem Bogen bleibt die Seitenfarbe stehen, sonst blitzt beim
   Aufsteigen das Foto darunter durch. */
.hero__saum::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: 100vh;
    background: var(--color-paper);
}
/* Zwei Schleier: einer von oben nach unten für Kopfzeile und Fuß, einer von
   links für die Schrift. Erst beide zusammen machen den Text über einem
   hellen Foto sicher lesbar. Nach unten wird abgedunkelt, nicht aufgehellt:
   ein heller Auslauf legt sich als Milchglas über das halbe Bild. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--rauschen),
        linear-gradient(to right, var(--scrim-side) 0%, var(--scrim-side-soft) 48%,
                        var(--scrim-klar) 86%),
        linear-gradient(to bottom, var(--scrim-top) 0%, var(--scrim-klar) 34%,
                        var(--scrim-side-soft) 100%);
}

.hero__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-lg);
    justify-items: start;
    max-width: 46rem;
}
.hero__title {
    font-size: var(--text-4xl);
    font-weight: 300;
    text-wrap: balance;
    color: var(--color-brand);
}
/* Die Bildfolge lebt vom Foto — die Schrift bleibt Anschrift, nicht Plakat. */
.hero__title--lead { font-size: var(--text-display-s); }
.hero__text {
    font-size: var(--text-lg);
    color: var(--color-dark-ink);
    max-width: 42ch;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
}

/* Bildunterschrift in der Ecke — das Bild trägt, der Text annotiert nur. */
.hero__caption {
    position: absolute;
    z-index: 1;
    inset-block-end: var(--space-lg);
    inset-inline-end: var(--page-gutter);
    max-width: 20ch;
    text-align: right;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-dark-muted);
}

/* Im Hero steht alles auf dem Foto — dort gilt durchweg die helle Fassung. */
.hero .eyebrow { color: var(--color-brand); }
.hero .btn--primary {
    background: var(--color-brand);
    color: var(--color-heading);
    border-color: var(--color-brand);
}
.hero .btn--primary:hover { background: var(--color-on-accent); border-color: var(--color-on-accent); }
.hero .tlink { color: var(--color-brand); border-color: var(--color-dark-rule); }
.hero .tlink:hover { color: var(--color-on-accent); border-color: var(--color-on-accent); }

/* ── Startseite: das Haus rechts, eine dunkle Fläche links ─────────────
   Das Foto belegt nur die rechte Bahn; links steht volle Farbe, auf der
   die Schrift sitzt. Die beiden überschneiden sich nicht — das Haus ist
   ganz zu sehen, der Satz steht auf ruhigem Grund. Kein Parallax und kein
   heller Saum: beim Scrollen soll sich nichts gegeneinander verschieben. */
.hero--start {
    align-content: center;
    min-height: 92svh;
    padding-block: var(--space-4xl) var(--space-2xl);
    background: var(--color-dark);      /* die Fläche links vom Foto */
    border-bottom: var(--rule-hair) solid var(--color-dark-rule);

    /* Breite der Bildbahn. Das Haus füllt gut zwei Drittel des Fotos, das
       Foto ist 16:9 — die Bahn muss also rund das 1,26-fache der Hero-Höhe
       breit sein, sonst schneidet der Ausschnitt das Haus an. Auf breiten
       Fenstern bleibt es bei zwei Dritteln, auf schmalen wächst die Bahn
       bis auf die volle Breite. Das Haus geht vor der Fläche. */
    --bahn: max(66%, min(100%, 130svh));

    /* Die deckende Fläche reicht immer knapp über die linke Bildkante.
       Sie schrumpft damit von selbst, je breiter die Bahn wird — auf
       schmalen Fenstern bleibt fast nichts von ihr, und die Schrift steht
       dann auf dem Foto statt auf Farbe. */
    --flaeche: calc(100% - var(--bahn) + 4%);
}

/* Das Foto belegt nur die rechte Bahn. Der Ausschnitt sitzt auf 56 % —
   dort liegt die Mitte des Hauses im Foto, und damit landet das Haus
   unabhängig vom Beschnitt immer mittig in der Bahn. */
.hero--start .hero__media {
    inset-inline-start: auto;
    width: var(--bahn);
    object-position: 56% 50%;
    transform: none;                    /* kein Parallax auf der Startseite */
}

/* Über der Kante des Fotos liegt noch volle Farbe; erst danach wird es
   durchsichtig. So ist von der Kante selbst nichts zu sehen. Der Auslauf
   ist kurz gehalten: er muss nur die Schrift tragen, nicht das halbe Foto
   abdunkeln — hinter dem Text ist er fast deckend, am Haus schon weg.

   Fünf Halte statt drei, und alle auf derselben Farbe: ein langer Verlauf
   über wenige Halte zeigt auf 8-Bit-Bildschirmen sichtbare Streifen, und
   ein Ende auf `transparent` liefe über Schwarz und würde grau. Obenauf
   liegt feines Rauschen — es verwischt die Stufen zwischen zwei
   Farbwerten, die ein Verlauf allein nicht auflösen kann. */
.hero--start::after {
    background:
        var(--rauschen),
        linear-gradient(to right,
            var(--color-dark) 0%,
            var(--color-dark) var(--flaeche),
            var(--flaeche-3) calc(var(--flaeche) + 7%),
            var(--flaeche-2) calc(var(--flaeche) + 15%),
            var(--flaeche-1) calc(var(--flaeche) + 24%),
            var(--flaeche-0) calc(var(--flaeche) + 34%)),
        linear-gradient(to bottom, var(--scrim-top) 0%, var(--scrim-klar) 24%);
}

/* Anders als im Seitenraster steht die Schrift hier nicht in der Mitte,
   sondern am linken Rand — sie soll die freie Fläche ausnutzen, nicht mit
   dem Foto um die Mitte konkurrieren. */
.hero--start > .wrap {
    max-width: none;
    padding-inline-start: clamp(1.25rem, 4vw, 4.5rem);
}

/* Auf breiten Fenstern endet die Spalte, bevor das Haus anfängt — deshalb
   bindet die Breite ans Fenster. Nach unten hin gibt es aber eine Grenze:
   schmaler als 30rem brechen die Schaltflächen untereinander, und dann
   liegt die Schrift lieber auf dem Foto als in drei Zeilen Knöpfe. */
.hero__body--start {
    gap: var(--space-md);
    max-width: min(46rem, max(30rem, 41vw));
}

/* Kleiner als die Plakatgröße der Unterseiten: die zwei Zeilen müssen auch
   auf 1280 × 720 in die Spalte passen, ohne umzubrechen. */
.hero--start .hero__title {
    font-size: clamp(2rem, 0.7rem + 2.4vw, 3.2rem);
}
.hero--start .hero__text {
    font-size: var(--text-md);
    line-height: 1.7;
}

/* Die zweite Zeile trägt den Satz — kursiv und in Gold, damit sie sich
   vom aufrechten Titel abhebt, ohne lauter zu werden. */
.hero__title-akzent {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--color-accent-dim);
}

.hero__strich {
    width: 4.5rem;
    margin: var(--space-2xs) 0;
    border: 0;
    border-top: var(--rule-hair) solid var(--color-accent-dim);
}

.hero__subclaim {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-md);
    line-height: 1.35;
    color: var(--color-brand);
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    margin-block-start: var(--space-2xs);
    padding-block-start: var(--space-md);
    border-top: var(--rule-hair) solid var(--color-dark-rule);
    font-size: var(--text-xs);
    color: var(--color-dark-muted);
}
.hero__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.hero__fact-punkt { color: var(--color-dark-rule); }

/* ── Eingebettetes Bildband ───────────────────────────────────────── */
.photo-band {
    position: relative;
    margin-block: var(--space-3xl);
}
.photo-band__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
}
.photo-band__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.photo-band__frame::after {
    /* leichter Schleier, damit die Unterschrift immer trägt */
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 42%;
    background: linear-gradient(to top, var(--scrim-side-soft), transparent);
    pointer-events: none;
}
.photo-band__caption {
    position: absolute;
    z-index: 1;
    inset-block-end: var(--space-lg);
    inset-inline-start: var(--space-lg);
    max-width: 26ch;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    background: var(--scrim-flat);
    backdrop-filter: blur(6px);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-brand);
}

/* ══ Abschnitte ══════════════════════════════════════════════════════ */

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--sunk { background: var(--color-paper-2); }

/* S2 Hanging — Überschrift steht frei über dem Abschnitt, gestapelt. */
.head-hang {
    display: grid;
    gap: var(--space-md);
    max-width: 44rem;
    padding-block-end: var(--space-xl);
}
.head-hang__title { font-size: var(--text-3xl); }

/* ── Bereichskarten (F6) ──────────────────────────────────────────── */
.bereiche {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
    list-style: none;
}
.bereich { display: grid; gap: var(--space-md); }
.bereich__media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-paper-3);
}
.bereich__media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform var(--dur-long) var(--ease-out);
}
.bereich:hover .bereich__media img,
.bereich:focus-within .bereich__media img { transform: scale(1.02); }
.bereich__zeile {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
}
.bereich__titel { font-size: var(--text-2xl); }
.bereich__text { color: var(--color-muted); font-size: var(--text-sm); }
.bereich__link { margin-block-start: var(--space-2xs); justify-self: start; }

/* ── Zahlenband (nur bestätigte Zahlen) ───────────────────────────── */
.figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    list-style: none;
    border-block: var(--rule-hair) solid var(--color-rule);
    padding-block: var(--space-xl);
}
.figure { display: grid; gap: var(--space-2xs); }
.figure__value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1;
    font-weight: 400;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}
.figure__label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted);
}

/* ── Tabellenartige Liste (Zimmer, Kapazitäten) ───────────────────── */
.spec { display: grid; }
.spec__row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-md);
    align-items: baseline;
    padding-block: var(--space-lg);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}
.spec__row:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.spec__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-heading);
}
.spec__meta { font-size: var(--text-sm); color: var(--color-muted); }
.spec__value {
    font-size: var(--text-sm);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Öffnungszeiten ───────────────────────────────────────────────── */
.hours { display: grid; gap: var(--space-xs); list-style: none; }
.hours__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule);
    font-size: var(--text-sm);
}
.hours__tage { color: var(--color-ink); }
.hours__zeit { color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ── Karten mit Haarlinie ─────────────────────────────────────────── */
.panel {
    padding: var(--space-xl);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-paper-2);
}
.panel__title { font-size: var(--text-xl); margin-block-end: var(--space-sm); }

.duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}

/* ── Aufzählung mit Haarlinien ────────────────────────────────────── */
.ticks { display: grid; gap: var(--space-sm); list-style: none; }
.ticks li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: baseline;
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.ticks li::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    transform: translateY(-3px);
}

/* ── Fragen (details/summary) ─────────────────────────────────────── */
.faq { display: grid; }
.faq__item { border-block-start: var(--rule-hair) solid var(--color-rule); }
.faq__item:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.faq__q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-lg);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-heading);
    cursor: pointer;
    list-style: none;
    transition: color var(--dur-micro) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover, .faq__q.is-hover { color: var(--color-accent); }
.faq__sign {
    flex: none;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-accent);
    transition: transform var(--dur-short) var(--ease-out);
}
.faq__item[open] .faq__sign { transform: rotate(45deg); }
.faq__a {
    max-width: var(--measure);
    padding-block-end: var(--space-lg);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

/* ══ Speisekarte ═════════════════════════════════════════════════════ */

.karte {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xl) var(--space-2xl);
    align-items: start;
}
.karte__gruppe { break-inside: avoid; }
.karte__titel {
    font-size: var(--text-2xl);
    padding-block-end: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule-2);
}
.karte__hinweis {
    margin-block-start: var(--space-sm);
    font-size: var(--text-2xs);
    letter-spacing: 0.03em;
    color: var(--color-neutral);
}
.karte__liste { display: grid; list-style: none; margin-block-start: var(--space-xs); }

.gericht {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: var(--space-sm) var(--space-md);
    align-items: baseline;
    padding-block: var(--space-md);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}
.gericht__nr {
    font-size: var(--text-2xs);
    color: var(--color-neutral);
    font-variant-numeric: tabular-nums;
}
.gericht__text { display: grid; gap: var(--space-3xs); }
.gericht__name { font-size: var(--text-md); color: var(--color-ink); }
.gericht__beschreibung { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.45; }
.gericht__preis {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-heading);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Speisekarte-Teaser auf der Startseite ────────────────────────── */
.karte-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
}
.karte-teaser__bild {
    position: relative;
    border-radius: var(--radius-xs);
    box-shadow: 0 12px 32px -4px oklch(20% 0.016 70 / 0.15);
    background: #0d2b6b;
}
.karte-teaser__foto {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-xs);
}
.karte-teaser__bild::after {
    display: none;
}
.karte-teaser__body {
    display: grid;
    gap: var(--space-lg);
    align-content: center;
}
.karte-teaser__highlights {
    display: grid;
    gap: var(--space-xs);
    list-style: none;
}
.karte-teaser__highlight {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}
.karte-teaser__gericht {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-heading);
}
.karte-teaser__preis {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.karte-teaser__beschreibung {
    font-size: var(--text-sm);
    color: var(--color-muted);
    max-width: var(--measure);
}

/* ── Speisekarte-Seite: Sticky Kategorie-Nav ─────────────────────── */
.karte-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-paper);
    border-block-end: var(--rule-hair) solid var(--color-rule);
    padding-block: var(--space-sm);
    margin-block-end: var(--space-xl);
    /* Sanfter Übergang beim Festsetzen. */
    transition: box-shadow var(--dur-short) var(--ease-out);
}
.karte-nav.is-stuck {
    box-shadow: 0 2px 12px oklch(20% 0.016 70 / 0.08);
}
.karte-nav__list {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
    padding-block: var(--space-2xs);
    -webkit-overflow-scrolling: touch;
}
.karte-nav__list::-webkit-scrollbar { display: none; }
.karte-nav__link {
    display: inline-block;
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius-pill);
    border: var(--rule-hair) solid var(--color-rule);
    background: transparent;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--color-muted);
    transition: all var(--dur-micro) var(--ease-out);
}
.karte-nav__link:hover,
.karte-nav__link.is-hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.karte-nav__link.is-active {
    background: var(--color-heading);
    border-color: var(--color-heading);
    color: var(--color-on-accent);
}

/* ── Speisekarte-Seite: Hero-Einleitung ──────────────────────────── */
.karte-hero {
    position: relative;
    padding-block: calc(var(--space-4xl) + var(--space-xl)) var(--space-3xl);
}
.karte-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
}
.karte-hero__bild {
    border-radius: var(--radius-xs);
    box-shadow: 0 16px 40px -8px oklch(20% 0.016 70 / 0.18);
    background: #0d2b6b;
}
.karte-hero__foto {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-xs);
}

/* ── Authentisches Gasthaus: Editorial-Feature (Text & Maps) ────────── */
.haus-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
    gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
    align-items: stretch;
    margin-block: var(--space-3xl);
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--color-paper-2);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-2xl);
}

.haus-feature__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    padding-inline-end: var(--space-sm);
}

.haus-feature__facts {
    margin-block: var(--space-xs) var(--space-sm);
}

.haus-feature__map-col {
    display: flex;
    flex-direction: column;
}

.haus-feature__map-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-rule);
    background: var(--color-paper);
    box-shadow: 0 16px 40px oklch(20% 0.016 70 / 0.08);
    height: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.haus-feature__map-viewport {
    position: relative;
    flex: 1;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    background: var(--color-paper-2);
}

.haus-feature__map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: linear-gradient(145deg, var(--color-paper), var(--color-paper-2));
    z-index: 2;
    text-align: center;
}

.haus-feature__map-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    max-width: 280px;
}

.haus-feature__map-pin {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: var(--space-2xs);
}

.haus-feature__map-heading {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
}

.haus-feature__map-desc {
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
}

.haus-feature__map-privacy-link {
    font-size: var(--text-2xs);
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: var(--space-2xs);
    transition: color var(--dur-micro) var(--ease-out);
}
.haus-feature__map-privacy-link:hover {
    color: var(--color-brand);
}

.haus-feature__map-embed {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
}

.haus-feature__map-iframe {
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: 0;
    display: block;
    flex: 1;
    filter: saturate(0.95) contrast(1.02);
}

.haus-feature__map-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-paper);
    border-top: 1px solid var(--color-rule);
    flex-wrap: wrap;
}

.haus-feature__map-addr {
    font-size: var(--text-xs);
    color: var(--color-muted);
}

/* ══ Vollbild-Buchungsmodal ═════════════════════════════════════════════ */
.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-medium) var(--ease-out), visibility var(--dur-medium);
}

.booking-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.booking-modal__backdrop {
    position: absolute;
    inset: 0;
    background: oklch(10% 0.01 70 / 0.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.booking-modal__window {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 96vw;
    max-height: 94vh;
    background: #f4f3ef;
    border: 2px solid oklch(15% 0.01 70 / 0.9);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 72px oklch(0% 0 0 / 0.55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.97);
    transition: transform var(--dur-medium) var(--ease-out);
}

.booking-modal.is-open .booking-modal__window {
    transform: scale(1);
}

/* Der markante schwarze Schließen-Button oben rechts wie im Screenshot */
.booking-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 48px;
    height: 48px;
    background: #000;
    color: #fff;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--dur-micro) var(--ease-out);
}

.booking-modal__close:hover,
.booking-modal__close:focus-visible {
    background: var(--color-accent);
}

.booking-modal__body {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    background: #fff;
}

.booking-modal__loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    background: var(--color-paper);
    color: var(--color-muted);
    font-size: var(--text-sm);
    z-index: 1;
    transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short);
}

.booking-modal__loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.booking-modal__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-rule-2);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: modal-spin 0.8s linear infinite;
}

@keyframes modal-spin {
    to { transform: rotate(360deg); }
}

.booking-modal__iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ══ Google-Rezensionen ══════════════════════════════════════════════ */

.sterne { display: inline-flex; gap: 0.12em; line-height: 1; vertical-align: -0.12em; }

.reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.reviews__score {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}
/* Quelle und Marke stehen in einer Zeile, damit das G nicht allein umbricht. */
.reviews__quelle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}
.reviews__marke { color: var(--color-ink); }

/* Das fremde Logo behält seine Farben, richtet sich aber an der Schrift
   aus, neben der es steht. */
.g-logo { flex: none; display: block; }

.reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-lg);
    list-style: none;
}

/* Weiß statt Leinen: die Karten sollen aufliegen wie ein Zettel auf dem
   Tisch, nicht mit dem Grund verschwimmen. Der Schatten macht die Kante,
   die Linie allein schafft das auf so hellem Papier nicht. */
.review {
    display: grid;
    gap: var(--space-sm);
    align-content: start;
    padding: var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-karte);
    box-shadow: var(--schatten-karte);
    transition: box-shadow var(--dur-short) var(--ease-out),
                transform var(--dur-short) var(--ease-out);
}
.review:hover {
    box-shadow: var(--schatten-karte-hoch);
    transform: translateY(-2px);
}
.review__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.review__avatar {
    flex: none;
    width: 44px; height: 44px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    background: var(--color-paper-2);
}
.review__avatar--text {
    display: grid;
    place-items: center;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--color-accent);
    border: var(--rule-hair) solid var(--color-rule-2);
}
.review__meta { display: grid; gap: var(--space-3xs); min-width: 0; }
.review__autor {
    font-size: var(--text-sm);
    color: var(--color-heading);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.review__autor:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.review__wann { font-size: var(--text-2xs); color: var(--color-neutral); }
/* Das G sitzt oben rechts in der Ecke — die Quellenangabe der Karte. */
.review__quelle { margin-inline-start: auto; align-self: start; }
.review__text {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.reviews__mehr {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-xl);
}
/* Kein Versalsatz und keine Sperrung: neben einem Markenlogo wirkt das
   wie ein zweites Logo. */
.btn--google {
    gap: var(--space-sm);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-sm);
    background: var(--color-karte);
}
.btn--google:hover, .btn--google.is-hover { background: var(--color-paper-2); }

/* ══ Formular ════════════════════════════════════════════════════════ */

.form { display: grid; gap: var(--space-lg); }
.form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}
.field { display: grid; gap: var(--space-xs); }
.field--wide { grid-column: 1 / -1; }
.field__label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted);
}
.field__input,
.field__textarea,
.field__select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-3);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 300;
    transition: border-color var(--dur-micro) var(--ease-out),
                background-color var(--dur-micro) var(--ease-out);
}
.field__textarea { min-height: 8.5rem; resize: vertical; }
.field__input::placeholder, .field__textarea::placeholder { color: var(--color-neutral); }
.field__input:hover, .field__textarea:hover, .field__select:hover,
.field__input.is-hover { border-color: var(--color-rule-2); }
.field__input:focus-visible, .field__textarea:focus-visible, .field__select:focus-visible,
.field__input.is-focus { border-color: var(--color-focus); background: var(--color-paper-2); }
.field__input[disabled], .field__textarea[disabled] { opacity: 0.5; cursor: not-allowed; }
.field__input[aria-invalid='true'], .field__textarea[aria-invalid='true'] { border-color: var(--color-danger); }
.field__hint { font-size: var(--text-2xs); color: var(--color-neutral); }
.field__error { font-size: var(--text-2xs); color: var(--color-danger); }

/* Honigtopf — für Menschen unsichtbar, für Bots verlockend. */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form__status {
    display: none;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.form__status[data-state='error'],
.form__status[data-state='success'] { display: grid; }
.form__status[data-state='success'] { border-color: var(--color-success); color: var(--color-ink); }
.form__status[data-state='error']   { border-color: var(--color-danger);  color: var(--color-ink); }

/* ══ Buchungsstrecke ═════════════════════════════════════════════════ */

.booking {
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-paper-2);
    overflow: hidden;
}
.booking__frame {
    display: block;
    width: 100%;
    min-height: 46rem;
    border: 0;
    background: var(--color-paper-2);
}
.booking__note {
    padding: var(--space-md) var(--space-lg);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    font-size: var(--text-2xs);
    color: var(--color-neutral);
}

/* ══ Fließtext (Recht, Datenschutz) ══════════════════════════════════ */

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-lg); }
.prose h2 {
    font-size: var(--text-2xl);
    margin-block-start: var(--space-2xl);
}
.prose h3 {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-block-start: var(--space-xl);
}
.prose p, .prose li { color: var(--color-muted); font-size: var(--text-sm); }
.prose ul { padding-inline-start: var(--space-lg); }
.prose a { color: var(--color-accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--color-brand); }
.prose address { font-style: normal; }

/* ══ Fußzeile — beim Scrollen aufgedeckt (Curtain Reveal) ════════════ */

.page-shell {
    position: relative;
    z-index: 2;
    background: var(--color-paper);
    border-radius: 0 0 clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
    box-shadow: 0 28px 64px -8px oklch(10% 0.01 70 / 0.35);
    padding-block-end: clamp(2rem, 5vw, 4.5rem);
}

.site-footer {
    position: relative;
    z-index: 1;
    background: var(--color-dark);
    color: var(--color-dark-muted);
    padding-block: clamp(4rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3rem);
    width: 100%;
}

@media (min-width: 48.01rem) {
    .site-footer.is-revealed {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1;
    }
}
.site-footer > .wrap {
    display: grid;
    align-content: space-between;
    gap: var(--space-3xl);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-2xl) var(--space-xl);
    align-items: start;
}

.site-footer__label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-dark-muted);
}

.site-footer__statement {
    margin-block-start: var(--space-lg);
    font-family: var(--font-display);
    font-size: var(--text-display-s);
    font-weight: 300;
    line-height: 1.0;
    letter-spacing: -0.015em;
    color: var(--color-brand);
    max-width: 13ch;
    text-wrap: balance;
}
.site-footer__action { margin-block-start: var(--space-2xl); }

/* Der helle Pillen-Knopf ist der einzige helle Fleck in der Fußzeile. */
.site-footer .btn--footer {
    background: var(--color-on-accent);
    color: var(--color-heading);
    border-color: var(--color-on-accent);
}
.site-footer .btn--footer:hover,
.site-footer .btn--footer.is-hover { background: var(--color-brand); border-color: var(--color-brand); }

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
    justify-self: end;
    width: 100%;
    max-width: 30rem;
}
.site-footer__group { display: grid; gap: var(--space-sm); align-content: start; }
.site-footer__list { display: grid; gap: var(--space-xs); list-style: none; }
.site-footer__link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
    color: var(--color-dark-ink);
    transition: color var(--dur-micro) var(--ease-out);
}
.site-footer__link:hover, .site-footer__link.is-hover { color: var(--color-brand); }
.site-footer__link .pfeil { font-size: 0.85em; transition: transform var(--dur-short) var(--ease-out); }
.site-footer__link:hover .pfeil { transform: translate(2px, -2px); }

.site-footer__contact { font-size: var(--text-sm); color: var(--color-dark-ink); font-style: normal; }
.site-footer__contact a { color: inherit; text-decoration: none; }
.site-footer__contact a:hover { color: var(--color-brand); }

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    font-size: var(--text-2xs);
    color: var(--color-dark-muted);
}
.site-footer__agency a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur-micro) var(--ease-out);
}
.site-footer__agency a:hover {
    color: var(--color-brand);
}

/* ══ Fehlerseite ═════════════════════════════════════════════════════ */

.error-page {
    display: grid;
    align-content: center;
    gap: var(--space-lg);
    justify-items: start;
    min-height: 72svh;
    padding-block: var(--space-4xl) var(--space-3xl);
}
.error-page__code {
    font-family: var(--font-display);
    font-size: var(--text-display);
    line-height: 0.9;
    color: var(--color-rule-2);
}

/* ══ Bewegung ════════════════════════════════════════════════════════ */

/* Ein einziger orchestrierter Auftritt beim Laden. */
.reveal {
    opacity: 0;
    transform: translateY(10px);
    animation: reveal var(--dur-long) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* Beim Hereinscrollen: der Abschnitt fährt auf. Zurückhaltend — 14px und
   etwas Unschärfe, mehr braucht es nicht. Ohne JavaScript bleibt alles
   sichtbar, weil erst die Klasse .js den Ausgangszustand setzt. */
.js [data-rise] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity var(--dur-long) var(--ease-out),
        transform var(--dur-long) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-rise].is-in { opacity: 1; transform: none; }

/* Richtungsvarianten: seitliches Einfahren für Duo-Spalten und Akzente. */
.js [data-rise="left"] {
    opacity: 0;
    transform: translateX(-28px);
    transition:
        opacity var(--dur-long) var(--ease-out),
        transform var(--dur-long) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-rise="right"] {
    opacity: 0;
    transform: translateX(28px);
    transition:
        opacity var(--dur-long) var(--ease-out),
        transform var(--dur-long) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-rise="scale"] {
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity var(--dur-long) var(--ease-out),
        transform var(--dur-long) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-rise="left"].is-in,
.js [data-rise="right"].is-in,
.js [data-rise="scale"].is-in { opacity: 1; transform: none; }

/* Kindelemente können gestaffelt nachziehen — Karten einer Liste etwa. */
.js [data-rise] [data-rise-kind] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity var(--dur-long) var(--ease-out),
        transform var(--dur-long) var(--ease-out);
}
.js [data-rise].is-in [data-rise-kind] {
    opacity: 1;
    transform: none;
    transition-delay: calc(120ms + var(--k, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; animation: none; }
    .bereich:hover .bereich__media img { transform: none; }
}

/* ══ Schmale Bildschirme ═════════════════════════════════════════════ */

@media (max-width: 68rem) {
    .haus-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
        padding: var(--space-xl);
    }
    .haus-feature__frame {
        min-height: 280px;
        aspect-ratio: 16 / 9;
    }
    .haus-feature__map-card {
        min-height: 320px;
    }
}

@media (max-width: 60rem) {
    .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .spec__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .spec__value { grid-column: 1 / -1; }
    .karte-teaser { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .karte-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .karte-hero__bild { max-width: 24rem; }
    .haus-feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-lg); }
}

@media (max-width: 48rem) {
    .booking-modal { padding: 0; }
    .booking-modal__window { max-width: 100vw; max-height: 100vh; border: none; border-radius: 0; }
    .booking-modal__close { width: 44px; height: 44px; }
    .masthead {
        justify-items: start;
        padding-block: var(--space-md);
        /* backdrop-filter erzeugt einen Bezugsrahmen für fixierte Kinder —
           dann läge das Vollbildmenü in der Leiste statt im Fenster.
           Der Hintergrund ist ohnehin deckend, die Unschärfe entbehrlich. */
        backdrop-filter: none;
    }
    /* Über das Vollbildmenü, nicht darunter: sonst liegt das X hinter der
       Fläche und das Menü lässt sich nur noch mit Escape schließen. */
    .masthead__toggle {
        display: inline-flex;
        inset-block-start: var(--space-md);
        z-index: calc(var(--z-overlay) + 1);
    }
    /* Das Zeichen bleibt neben dem X stehen, damit über dem offenen Menü
       eine Kopfzeile steht und nicht nur ein Schließknopf im Nichts. */
    .masthead__brand {
        height: clamp(2.4rem, 9vw, 3rem);
        z-index: calc(var(--z-overlay) + 1);
    }

    /* Mobiles Menü: vollflächig, ruhig, ohne Sprünge. */
    .masthead__nav {
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        display: grid;
        align-content: center;
        justify-items: center;
        gap: var(--space-xl);
        padding: var(--space-4xl) var(--page-gutter);
        background: var(--color-paper);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--dur-short) var(--ease-out),
                    transform var(--dur-short) var(--ease-out),
                    visibility 0s linear var(--dur-short);
    }
    .masthead__nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }
    .masthead__list {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }
    /* Im Vollbildmenü steht die Schrift auf hellem Leinen. */
    .masthead__nav .masthead__link {
        font-size: var(--text-md);
        color: var(--color-ink);
    }
    .masthead__nav .masthead__link:hover { color: var(--color-accent); }
    .masthead__nav .masthead__link[aria-current='page'] {
        color: var(--color-accent);
        border-bottom-color: var(--color-accent);
    }
    .masthead__cta { margin: 0; }
    .masthead__cta .btn { min-height: 2.9rem; font-size: var(--text-xs); }

    .hero { min-height: 78svh; }
    /* Hochkant trägt eine seitliche Fläche nicht — die Schrift läuft über
       die ganze Breite. Also von unten aufziehen statt von links. */
    /* Hochkant gibt es keine zweite Spalte mehr — aber auch keinen
       Ausschnitt: ein 16:9-Foto in einem hohen Fenster zeigt vom Haus nur
       noch einen Streifen. Also steht das Foto oben in voller Breite und in
       seinem eigenen Seitenverhältnis, die Schrift darunter auf der
       Farbfläche. Nichts überlagert das Haus, nichts wird beschnitten. */
    .hero--start {
        min-height: 88svh;
        align-content: start;
        /* 56.28vw = 100 / (1672 / 941), die Höhe der Bildbahn. */
        padding-block: calc(56.28vw + var(--space-lg)) var(--space-xl);
    }
    .hero--start .hero__media {
        inset: 0 0 auto 0;
        width: 100%;
        height: auto;               /* volle Höhe des Fotos, nichts beschnitten */
        /* Nur die Unterkante läuft aus, dort beginnt die Schrift. Oben
           bleibt das Foto stehen — der Abendhimmel trägt die Kopfzeile. */
        -webkit-mask-image: linear-gradient(to bottom, black 74%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 74%, transparent 100%);
        /* Klein und auf dunklem Grund wirkt die Abendaufnahme schwerer als
           auf dem Schreibtisch — eine Spur heller gleicht das aus. */
        filter: brightness(1.12) saturate(1.04);
    }
    /* Schrift und Foto liegen nicht mehr übereinander — der Schleier über
       dem Bild kann weg. Nur die Kopfzeile braucht etwas Grund, und davon
       so wenig wie möglich. */
    .hero--start::after {
        background: linear-gradient(to bottom, var(--scrim-top) 0%, var(--scrim-klar) 16%);
    }
    .hero__body--start { gap: var(--space-sm); max-width: none; }
    .bereiche { grid-template-columns: minmax(0, 1fr); }
    .figures { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
    .figure { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-md); }
    .figure__value { font-size: var(--text-3xl); }
    .form__grid { grid-template-columns: minmax(0, 1fr); }
    .karte { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
    .gericht { grid-template-columns: 2rem minmax(0, 1fr) auto; }
    .karte-nav__link { font-size: var(--text-xs); padding: var(--space-xs) var(--space-md); }
    .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: none; justify-self: start; }
    .site-footer > .wrap { min-height: 0; gap: var(--space-2xl); }
    .site-footer__statement { max-width: 18ch; }
    /* Auf schmalen Geräten rückt die Unterschrift in den Fluss — mit Rand. */
    .hero__caption {
        position: static;
        margin-block-start: var(--space-lg);
        padding-inline: var(--page-gutter);
        text-align: left;
        max-width: none;
    }
    /* Ein seitlicher Verlauf trägt hier nicht: die Schrift läuft über die
       ganze Breite. Also ein flächiger Schleier statt eines seitlichen. */
    .hero::after {
        background:
            linear-gradient(to bottom, var(--scrim-top) 0%, var(--scrim-side-soft) 30%,
                            var(--scrim-side-soft) 62%, var(--scrim-side) 100%);
    }
    .photo-band__frame { border-radius: var(--radius-lg); }
    .booking__frame { min-height: 40rem; }
}

@media (max-width: 26rem) {
    .site-footer__statement { font-size: var(--text-2xl); }
    .photo-band__caption { inset-inline: var(--space-sm); max-width: none; text-align: center; }
}