/* ============================================================
   TEAM 7 Eventlocation — zentrales Stylesheet
   Designsystem lt. CLAUDE.md: helle, ruhige Flächen, dünne Linien,
   Versal-Headlines, keine Schatten / Rundungen / Verläufe.
   ============================================================ */

/* ---------- Schriften (selbst gehostet, DSGVO) ---------- */

@font-face {
    font-family: "ABC Whyte Inktrap";
    src: url("../fonts/whyte-inktrap-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ABC Whyte Inktrap";
    src: url("../fonts/whyte-inktrap-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ABC Whyte Inktrap";
    src: url("../fonts/whyte-inktrap-book.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---------- Design-Tokens ---------- */

:root {
    --color-primary: #838270;   /* Primär, Highlights, Buttons */
    --color-on-primary: #ffffff;/* Schrift auf Primärfarbe; auch als heller Flächen-Hintergrund nutzbar */
    --color-bg: #ece8e5;        /* Standard-Hintergrund */
    --color-text: #3c3b3a;      /* Standard-Text, Details, Linien */
    --color-error: #8f3b2d;     /* Formularfehler — gedeckt, passend zur Palette */

    --font-sans: "ABC Whyte Inktrap", "Helvetica Neue", Arial, sans-serif;

    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
    --text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
    /* Hero-H1: der erste Claim-Satz ("Für erfolgreiche Meetings.") misst
       18,1 em in Versalien + Sperrung und muss einzeilig bleiben — die
       Größe folgt daher der verfügbaren Breite (Divisor mit ~1 % Reserve);
       2,25 rem passen exakt in die maximale Panelbreite (41 rem Inhalt) */
    --text-hero: min(2.25rem, calc((100vw - 2 * var(--gutter)) / 18.3));

    --tracking-caps: 0.08em;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;

    --container: 74rem;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --header-height: 4.5rem;
}

/* ---------- Basis ---------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

h1, h2, h3, h4 {
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin: 0 0 var(--space-3);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }

p {
    margin: 0 0 var(--space-2);
}

address {
    font-style: normal;
}

small {
    font-size: var(--text-sm);
    font-weight: 400;
}

.lead {
    font-size: var(--text-lg);
    font-weight: 300;
    line-height: 1.6;
    max-width: 46em;
}

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: 52rem;
}

.section {
    padding-block: var(--space-5);
}

.section--alt {
    background: var(--color-on-primary);
}

.full-image {
    width: 100%;
}

.nowrap {
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-text);
    color: var(--color-on-primary);
    padding: 0.5rem 1rem;
    z-index: 200;
}

.skip-link:focus {
    left: 0;
}

/* ---------- Stilmittel: dünne Linien ---------- */

/* Vertikale 1px-Linie links neben Textblöcken */
.vline {
    border-left: 1px solid var(--color-text);
    padding-left: clamp(1rem, 3vw, 2rem);
}

.vline--light {
    border-left-color: var(--color-on-primary);
}

/* Horizontale 1px-Linie: läuft vom linken Seitenrand in den Inhalt hinein,
   übergreifend über Elemente hinweg */
.section--edge-line {
    position: relative;
}

.section--edge-line::before {
    content: "";
    position: absolute;
    top: clamp(1.5rem, 5vw, 3rem);
    left: 0;
    width: min(38vw, 34rem);
    border-top: 1px solid var(--color-text);
}

/* ---------- Scroll-Reveal ----------
   Alle reveal-Klassen werden erst per JS gesetzt (main.js) — ohne JS oder
   mit prefers-reduced-motion bleibt die Seite komplett statisch sichtbar. */

/* Karten & Listeneinträge blenden dezent von unten ein */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Horizontale Linien wachsen im Viewport vom Seitenrand in den Inhalt
   (greift auf .section--edge-line und .room) */
.reveal-line::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s ease 0.15s;
}

.reveal-line.is-visible::before {
    transform: scaleX(1);
}

/* Vertikale Linie wächst von oben nach unten: die Border wird transparent,
   die sichtbare Linie ist ein 1px breiter Hintergrund-Verlauf, dessen Höhe
   von 0 auf 100 % wächst */
.reveal-vline {
    border-left-color: transparent;
    background-image: linear-gradient(var(--color-text), var(--color-text));
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: left top;
    background-size: 1px 0;
    transition: background-size 0.9s ease 0.15s;
}

.vline--light.reveal-vline {
    background-image: linear-gradient(var(--color-on-primary), var(--color-on-primary));
}

.reveal-vline.is-visible {
    background-size: 1px 100%;
}

/* ---------- Pfeil-Listen (→ als Listen-Stilmittel) ---------- */

.arrow-list {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
}

.arrow-list li {
    padding-left: 1.75em;
    position: relative;
    margin-bottom: 0.5em;
}

.arrow-list li::before {
    content: "\2192"; /* → */
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    text-decoration: none;
    border: 1px solid var(--color-primary);
    background: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Primary-Hover = Optik des Secondary-Standards: nur Border, kein
   Hintergrund, farbiger Text (grün auf hellen Flächen) */
.btn--primary:hover,
.btn--primary:focus-visible {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline {
    color: var(--color-text);
    border-color: var(--color-text);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--color-text);
    color: var(--color-on-primary);
}

.btn--light {
    background: var(--color-on-primary);
    border-color: var(--color-on-primary);
    color: var(--color-text);
}

/* Auf Primärflächen entsprechend in Weiß */
.btn--light:hover,
.btn--light:focus-visible {
    background: transparent;
    border-color: var(--color-on-primary);
    color: var(--color-on-primary);
}

.text-link {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-sm);
}

/* ---------- Header (sticky, Tel/Mail immer sichtbar) ---------- */

/* Header auf Primärfläche: nur Weiß als Text-/Linienfarbe (Kontrastregel) */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--header-height);
}

.site-header__logo {
    flex-shrink: 0;
    display: flex;
}

.site-header__logo img {
    height: 2.125rem;
    width: auto;
}

.site-nav {
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    text-decoration: none;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    padding-block: 0.5rem;
    border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
    border-bottom-color: var(--color-on-primary);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.site-header__actions .btn {
    padding: 0.5rem 1rem;
}

/* "Anrufen"-Button auf der Primärfläche: weiße Kontur/Schrift */
.site-header .btn--outline {
    color: var(--color-on-primary);
    border-color: var(--color-on-primary);
}

.site-header .btn--outline:hover,
.site-header .btn--outline:focus-visible {
    background: var(--color-on-primary);
    color: var(--color-text);
}

/* Telefon-Button: auf breiten Screens die konkrete Nummer,
   auf mittleren Breiten die kompakte Beschriftung */
.btn__label--full {
    white-space: nowrap;
}

.btn__label--short {
    display: none;
}

@media (max-width: 69rem) {
    .btn__label--full {
        display: none;
    }

    .btn__label--short {
        display: inline;
    }
}

.nav-toggle {
    display: none;
    background: none;
    color: inherit;
    border: none;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    display: block;
    width: 1.25rem;
    height: 1px;
    background: currentColor;
    position: relative;
    content: "";
}

.nav-toggle__bar::before { position: absolute; top: -6px; }
.nav-toggle__bar::after { position: absolute; top: 6px; }

/* ---------- Hero ---------- */

.hero {
    position: relative;
}

/* Hero-Slideshow: gestapelte Bilder, sanftes automatisches Überblenden
   (nicht steuerbar, Endlosschleife) */
.hero__slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 72vh;
    overflow: hidden;
}

.hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* transform mit übergehen lassen: verhindert einen sichtbaren Sprung,
       wenn die Zoom-Animation beim Slide-Wechsel entfernt wird */
    transition: opacity 1s ease, transform 1s ease;
}

.hero__slide.is-active {
    opacity: 1;
}

/* Leichte Ken-Burns-Bewegung: das aktive Bild zoomt minimal, abwechselnd
   hinein und heraus. Dauer etwas länger als das Wechselintervall (5 s)
   plus Überblendung, damit die Bewegung nie sichtbar stoppt. */
@keyframes hero-zoom-in {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

@keyframes hero-zoom-out {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}

.hero__slide.is-active {
    animation: hero-zoom-in 7s linear forwards;
}

.hero__slide:nth-child(even).is-active {
    animation-name: hero-zoom-out;
}

.hero__panel {
    background: var(--color-bg);
    padding: var(--space-4);
    max-width: 46rem;
    margin-top: -5rem;
    position: relative;
}

.hero__title {
    font-size: var(--text-hero);
    margin-bottom: var(--space-2);
}

/* Claim: Umbruch nach jedem Satz (erster Satz = eine Zeile) */
.hero__title-line {
    display: block;
}

.hero__subtitle {
    font-weight: 300;
    font-size: var(--text-lg);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ---------- Startseite: Intro + USPs ---------- */

.intro-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-5);
    align-items: start;
}

.usp-list {
    margin-top: var(--space-2);
}

/* ---------- Teaser-Kacheln ---------- */

.teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.teaser {
    text-decoration: none;
    display: block;
}

.teaser img {
    margin-bottom: var(--space-2);
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.teaser h3 {
    margin-bottom: var(--space-1);
}

.teaser__link {
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.teaser__link::after {
    content: " \2192";
    color: var(--color-primary);
}

.teaser:hover .teaser__link,
.teaser:focus-visible .teaser__link {
    border-bottom: 1px solid var(--color-text);
}

/* ---------- Eventkalender (Listenform) ---------- */

.event-list {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.event-list__item {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) 3fr;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-text);
}

.event-list__item:last-child {
    border-bottom: 1px solid var(--color-text);
}

.event-list__date {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-sm);
}

.event-list__date span {
    font-weight: 300;
}

.event-list__body h3 {
    margin-bottom: var(--space-1);
    text-transform: none;
    letter-spacing: 0;
}

.event-list__body p {
    margin-bottom: var(--space-1);
}

/* ---------- CTA-Block ---------- */

.cta-block {
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding-block: var(--space-5);
}

.cta-block__inner {
    max-width: 44rem;
}

.cta-block__title {
    color: var(--color-on-primary);
}

.cta-block__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.cta-block__phone {
    color: var(--color-on-primary);
}

/* ---------- Seitenkopf ---------- */

.page-head {
    padding-block: var(--space-5) var(--space-2);
}

/* ---------- Raumangebot ---------- */

/* ---------- Interaktives Übersichtsbild (Raumpositionen) ---------- */

.building-map {
    position: relative;
}

.building-map__spot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem; /* vergrößert das Touch-Ziel auf ≥ 44px */
    text-decoration: none;
}

.building-map__spot--left { flex-direction: row-reverse; }
.building-map__spot--top { flex-direction: column-reverse; }
.building-map__spot--bottom { flex-direction: column; }

.building-map__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 1px solid var(--color-on-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.building-map__label {
    background: var(--color-on-primary);
    color: var(--color-text);
    border: 1px solid var(--color-text);
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover/Fokus: Weiß-↔-Grün-Inversion des gesamten Markers —
   grüner Punkt wird weiß, weißes Label wird grün (und umgekehrt) */
.building-map__spot:hover .building-map__dot,
.building-map__spot:focus-visible .building-map__dot {
    background: var(--color-on-primary);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.building-map__spot:hover .building-map__label,
.building-map__spot:focus-visible .building-map__label {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

@media (max-width: 52rem) {
    /* Mobil: nur nummerierte Punkte, kein überlagerndes Label — die
       Raumnamen stehen in der room-index-Liste unter dem Bild. Ein Tap auf
       einen Marker springt direkt zum Raum. */
    .building-map__label {
        display: none;
    }

    .building-map__spot {
        padding: 0.4rem;
    }

    .building-map__dot {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.7rem;
    }
}

.room-index ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.room-index a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    /* Kein Anker-Underline — sonst läuft die Linie unter der Zahl-Box durch */
    text-decoration: none;
}

/* Nur der Raumname bleibt unterstrichen (Link-Affordanz), nicht die Zahl */
.room-index__name {
    text-decoration: underline;
}

/* Mobil: alle Räume konsistent untereinander statt uneinheitlichem Umbruch */
@media (max-width: 52rem) {
    .room-index ul {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Raum-Subnav: zweite Header-Zeile ----------
   Schmale weiße Leiste unter dem Haupt-Header mit der Raumliste als
   Anker-Links (gleiche Nummerierung wie Bild-Marker und Sprungliste).
   Standardmäßig verborgen — main.js blendet sie ein, sobald das
   Übersichtsbild aus dem Sichtbereich gescrollt ist. */
.room-subnav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 90; /* unter dem Haupt-Header (100) */
    background: var(--color-on-primary);
    border-bottom: 1px solid var(--color-text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.room-subnav.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.room-subnav ul {
    display: flex;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0.55rem 0;
    overflow-x: auto; /* mobil: Leiste scrollt horizontal statt umzubrechen */
    -webkit-overflow-scrolling: touch;
}

.room-subnav a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    text-decoration: none;
    white-space: nowrap;
}

.room-subnav a:hover,
.room-subnav a:focus-visible {
    text-decoration: underline;
}

/* Scrollspy: der Raum, bei dem man sich gerade befindet (siehe main.js) */
.room-subnav a.is-active {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

/* Anker-Ziele unter der eingeblendeten Subnav-Leiste freihalten */
html:has(.room-subnav) {
    scroll-padding-top: calc(var(--header-height) + 3.5rem);
}

/* Nummer analog zu den Markern im Übersichtsbild */
.room-index__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.included-box {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-4);
    align-items: start;
}

.room-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.room {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
    position: relative;
    padding-top: var(--space-3);
}

/* Horizontale Linie, die über Bild und Text hinwegläuft */
.room::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--gutter));
    right: 30%;
    border-top: 1px solid var(--color-text);
}

.room__media {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2));
}

/* ---------- Foto-Slideshow (Container bleibt in Größe/Position) ---------- */

.slideshow {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.slideshow__slides {
    position: absolute;
    inset: 0;
}

.slideshow__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* nur das sichtbare Foto ist klickbar (Lightbox) */
}

.slideshow__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.slideshow__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
}

.slideshow__arrow--prev { left: 0.75rem; }
.slideshow__arrow--next { right: 0.75rem; }

.slideshow__arrow:hover,
.slideshow__arrow:focus-visible {
    background: var(--color-text);
    color: var(--color-on-primary);
}

.slideshow__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Punkte als kleine Quadrate — passend zur Linien-Ästhetik, keine Rundungen */
.slideshow__dot {
    width: 0.65rem;
    height: 0.65rem;
    padding: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-text);
    cursor: pointer;
}

.slideshow__dot.is-active {
    background: var(--color-text);
}

.room__intro {
    font-weight: 300;
    font-size: var(--text-lg);
}

.room__note {
    border: 1px solid var(--color-primary);
    padding: var(--space-2);
}

/* Kennzahlen als Linien-Liste: Label-Wert-Zeilen, getrennt durch
   dünne horizontale Linien (Broschüren-Stilmittel) */
.room__facts {
    margin: var(--space-3) 0;
}

.room__facts > div {
    display: grid;
    grid-template-columns: minmax(7.5rem, 1fr) 2.5fr;
    gap: var(--space-2);
    align-items: baseline;
    padding-block: 0.75rem;
    border-top: 1px solid var(--color-text);
}

.room__facts > div:last-child {
    border-bottom: 1px solid var(--color-text);
}

.room__facts dt {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: 500;
}

.room__facts dd {
    margin: 0;
}

.room__facts dd small {
    display: block;
}

/* Halbtags- und Tagespreis untereinander */
.room__prices span {
    display: block;
    white-space: nowrap;
}

.room__subheading {
    margin-top: var(--space-3);
    margin-bottom: var(--space-1);
}

.room__setups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--space-2);
}

.room__setup {
    margin: 0;
}

.room__setup figcaption {
    font-size: var(--text-sm);
    margin-top: 0.25rem;
}

.room__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ---------- Kulinarik (kulinarische Möglichkeiten) ---------- */

.package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.package-grid--two {
    margin-top: var(--space-3);
}

.package {
    --package-pad: var(--space-4);
    padding: var(--package-pad);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-bg);
}

/* Piktogramm-Bereich: feste Höhe, Icon unten-bündig — so teilen sich
   unterschiedlich proportionierte Piktogramme (hohe Flaschen, breite
   Cloche) dieselbe Grundlinie. Breite folgt per width:auto am Icon
   dem Seitenverhältnis. */
.package__icon-frame {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    height: clamp(5.5rem, 8vw, 8rem);
    margin-bottom: var(--space-3);
}

.package__icon {
    height: 100%;
    width: auto;
    max-width: 100%;
    color: var(--color-primary);
}

.package__title {
    margin-bottom: var(--space-1);
}

/* Karteninhalt unterhalb des Titels: eigener Flex-Kontext, damit die
   CTAs aller Karten trotz Wrapper bündig unten sitzen — und mobil als
   Akkordeon-Körper ein-/ausklappbar (siehe unten + main.js) */
.package__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex-grow: 1;
}

/* Titel-Button fürs mobile Akkordeon (wird von main.js eingesetzt):
   am Desktop unsichtbar wie normaler Titeltext */
.package__toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: default;
}

/* "Ideal für"-Empfehlung: füllt die Resthöhe, damit die CTAs
   aller Karten bündig unten sitzen */
.package__ideal {
    font-weight: 300;
    flex-grow: 1;
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
}

.package__ideal-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-primary);
    font-weight: 500;
}

.package-note {
    margin-top: var(--space-4);
    font-weight: 300;
    font-size: var(--text-lg);
    max-width: 44rem;
}

/* ---------- Kontakt ---------- */

/* Persönlicher Einstieg: Beratungstext + Teamfoto */
.contact-intro {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-5);
    align-items: center;
    margin-top: var(--space-3);
}

.contact-intro__team {
    margin: 0;
}

.contact-intro__team img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-intro__team figcaption {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: 500;
}

/* Einleitungssatz über dem Anfrage-Bereich */
.contact-lead {
    max-width: 46rem;
    margin-bottom: var(--space-4);
}

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-5);
    align-items: start;
}

.contact-grid__item {
    margin-bottom: var(--space-2);
}

.contact-grid__label {
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: 500;
}

.contact-grid__info h3 {
    margin-top: var(--space-4);
}

.form-notice {
    border: 1px solid var(--color-primary);
    background: var(--color-on-primary);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

.form-field {
    width: 100%;
}

.form-field label {
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font: inherit;
    color: inherit;
    background: var(--color-on-primary);
    border: 1px solid var(--color-text);
}

/* Placeholder als dezenter Hinweis (Markenfarbe gedimmt statt Browsergrau) */
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--color-text);
    opacity: 0.55;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Honeypot-Feld für Menschen ausblenden */
.form-field--hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-field--checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
}

.form-field--checkbox input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.3rem;
}

.form-field--checkbox label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: var(--text-sm);
    margin: 0;
}

.form-hint {
    font-size: var(--text-sm);
    margin: 0;
}

/* Formularfehler: dünne Linien statt Flächen, gedeckte Fehlerfarbe */
.form-notice--error {
    border-color: var(--color-error);
}

.form-error {
    color: var(--color-error);
    font-size: var(--text-sm);
    margin: 0.35rem 0 0;
}

.form-field--error input,
.form-field--error textarea {
    border-color: var(--color-error);
}

/* ---------- Lightbox ---------- */

.lightbox-trigger {
    cursor: zoom-in;
}

/* Seite hinter der offenen Lightbox nicht scrollbar */
.has-lightbox,
.has-lightbox body {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(60, 59, 58, 0.94); /* --color-text, fast deckend */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* display:flex würde das hidden-Attribut sonst aushebeln */
.lightbox[hidden] {
    display: none;
}

.lightbox__figure {
    margin: 0;
    max-width: min(90vw, 74rem);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.lightbox__image {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lightbox__caption {
    color: var(--color-on-primary);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: center;
}

.lightbox__close,
.lightbox__arrow {
    position: absolute;
    background: transparent;
    color: var(--color-on-primary);
    border: 1px solid var(--color-on-primary);
    font-family: inherit;
    font-size: var(--text-lg);
    line-height: 1;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    z-index: 1;
}

.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__arrow:hover,
.lightbox__arrow:focus-visible {
    background: var(--color-on-primary);
    color: var(--color-text);
}

.lightbox__close {
    top: 1rem;
    right: 1rem;
}

.lightbox__arrow--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__arrow--next { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 52rem) {
    /* Mobil: Navigation primär per Swipe, Pfeile kompakt unten */
    .lightbox__arrow--prev { left: 0.75rem; top: auto; bottom: 1rem; transform: none; }
    .lightbox__arrow--next { right: 0.75rem; top: auto; bottom: 1rem; transform: none; }

    .lightbox__figure {
        max-width: 94vw;
    }
}

/* ---------- Cookie-Consent-Modal ---------- */

/* Seite hinter dem offenen Consent-Modal nicht scrollbar */
.has-consent-modal,
.has-consent-modal body {
    overflow: hidden;
}

.consent {
    position: fixed;
    inset: 0;
    z-index: 300; /* über Header (100) und Lightbox (200) */
    background: rgba(60, 59, 58, 0.94); /* --color-text, fast deckend */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
}

/* display:flex würde das hidden-Attribut sonst aushebeln */
.consent[hidden] {
    display: none;
}

.consent__dialog {
    background: var(--color-on-primary);
    max-width: 34rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-4);
    border-top: 1px solid var(--color-text); /* dünne Linie als Stilmittel */
}

.consent__dialog:focus {
    outline: none;
}

.consent__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.consent__text p {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Footer-Button „Cookie-Einstellungen" im Look der rechtlichen Links */
.consent-settings-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 52rem) {
    .consent__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Rechtstexte ---------- */

.legal-text h2 {
    font-size: var(--text-lg);
    margin-top: var(--space-4);
}

.legal-note {
    margin-top: var(--space-4);
}

/* ---------- Back-to-Top ---------- */

/* Folgt dem Button-Muster (quadratisch, 1-px-Linie, keine Rundung/Schatten).
   Standardmäßig ausgeblendet und nicht fokussierbar; main.js blendet ihn ab
   einer gewissen Scroll-Tiefe ein und über dem Footer wieder aus. */
.back-to-top {
    position: fixed;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
                background-color 0.2s ease, color 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: var(--color-on-primary);
    color: var(--color-primary);
}

.back-to-top svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding-block: var(--space-5) var(--space-3);
    margin-top: 0;
}

.site-footer a {
    color: inherit;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4);
}

.site-footer__brand img {
    margin-bottom: var(--space-2);
    height: 2.125rem;
    width: auto;
}

/* Social-Media-Icons unter dem Claim */
.site-footer__social {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.site-footer__social a {
    display: block;
    line-height: 0;
}

.site-footer__social svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
}

.site-footer__social a:hover svg,
.site-footer__social a:focus-visible svg {
    opacity: 0.75;
}

.site-footer__heading {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.site-footer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__nav li {
    margin-bottom: 0.5em;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-on-primary);
    font-size: var(--text-sm);
}

.site-footer__legal ul {
    display: flex;
    /* Mobil müssen die Links umbrechen können, sonst sprengen sie das Layout */
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Responsive: Mobil-Anpassungen (Linien reduziert, Nav einklappbar)
   ============================================================ */

@media (max-width: 64rem) {
    .intro-grid,
    .included-box,
    .contact-intro,
    .contact-grid,
    .room {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .room__media {
        position: static;
    }

    .teaser-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .package-grid {
        grid-template-columns: 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 52rem) {
    :root {
        --header-height: 4rem;
    }

    /* Mobil kompakterer Abschnittsrhythmus: zwei aufeinanderfolgende
       Sections addierten sonst 2 × 4 rem zu einer sehr großen Lücke */
    .section {
        padding-block: var(--space-4);
    }

    /* Mobile Navigation: eingeklappt, Toggle sichtbar —
       Tel/Mail-Buttons bleiben immer sichtbar (Conversion) */
    .nav-toggle {
        display: block;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-primary);
        color: var(--color-on-primary);
        padding: var(--space-2) var(--gutter) var(--space-3);
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav a {
        display: block;
        padding-block: 0.75rem;
    }

    .site-header__actions {
        margin-left: auto;
    }

    .btn--icon .btn__label {
        display: none; /* mobil nur Icons für Tel/Mail, Buttons bleiben sichtbar */
    }

    .btn--icon {
        padding: 0.65rem;
    }

    .site-header__logo img {
        height: 1.6rem;
    }

    /* Linien mobil reduzieren */
    .section--edge-line::before {
        width: 30vw;
    }

    .room::before {
        right: 0;
    }

    .hero__panel {
        margin-top: 0;
        padding: var(--space-3) 0 0;
    }

    .event-list__item {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .package {
        --package-pad: var(--space-3);
    }

    .package__icon-frame {
        height: 4.75rem;
    }

    /* Kulinarik-Karten als Akkordeon: zuerst nur Piktogramm + Titel.
       Greift nur, wenn main.js die Klasse setzt — ohne JS bleiben alle
       Karten vollständig sichtbar (progressive enhancement). */
    .package-grid.is-accordion {
        gap: var(--space-2);
    }

    .package-grid.is-accordion .package__body {
        display: none;
    }

    .package-grid.is-accordion .package.is-open .package__body {
        display: flex;
    }

    .package-grid.is-accordion .package__icon-frame {
        cursor: pointer;
        margin-bottom: var(--space-2);
    }

    .package-grid.is-accordion .package__title {
        align-self: stretch;
        margin-bottom: 0;
    }

    .package-grid.is-accordion .package.is-open .package__title {
        margin-bottom: var(--space-1);
    }

    .package-grid.is-accordion .package__toggle {
        cursor: pointer;
        display: flex;
        width: 100%;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-2);
    }

    /* Auf-/Zu-Indikator im Linienstil: + und − */
    .package-grid.is-accordion .package__toggle::after {
        content: "+";
        font-weight: 400;
        color: var(--color-primary);
        flex-shrink: 0;
    }

    .package-grid.is-accordion .package.is-open .package__toggle::after {
        content: "\2212";
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn {
        transition: none;
    }

    /* Kein automatisches Überblenden, keine Zoom-Bewegung —
       nur das Startbild bleibt ruhig sichtbar */
    .hero__slide {
        transition: none;
        animation: none;
    }

    /* Back-to-Top ohne Bewegung ein-/ausblenden */
    .back-to-top {
        transform: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .back-to-top.is-visible {
        transform: none;
    }

    /* Raum-Subnav ohne Bewegung ein-/ausblenden */
    .room-subnav {
        transform: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
}