/* ==========================================================================
   Ferienhaus Deichglück — Komponenten-Styles
   ==========================================================================
   Aufbau:
     1. Basis & Reset
     2. Typografie-Hilfsklassen
     3. Layout (Container, Sektionen)
     4. Header & Navigation
     5. Hero
     6. Details (Fakten-Karten)
     7. Ausstattung (Chips)
     8. Kalender & Buchungsformular
     9. Lage & Karte (Zwei-Klick-Consent)
    10. Footer
    11. Rechtsseiten (Impressum / Datenschutz) und Kontaktseite
    12. Responsive Anpassungen
   Design-Variablen: siehe tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Basis & Reset
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 8px);
  /* Fläche neben der Seite auf Ultrawide-Monitoren */
  background-color: var(--color-surface-dim);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  /* Seite nie breiter als ein 16:9-Bildschirm (siehe tokens.css) */
  max-width: var(--page-max);
  margin-inline: auto;
  box-shadow: 0 0 60px rgba(4, 25, 38, 0.1);
}

::selection {
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-outline-variant); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-outline); }

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. Typografie-Hilfsklassen
   -------------------------------------------------------------------------- */

.headline-md {
  font-family: var(--font-serif);
  font-size: var(--text-headline-md);
  font-weight: 400;
  line-height: var(--leading-headline);
  color: var(--color-primary);
}

.headline-sm {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-primary);
}

.label-caps {
  font-family: var(--font-sans);
  font-size: var(--text-label-caps);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.body-muted {
  color: var(--color-on-surface-variant);
}

/* Icons (Inline-SVG, Strich-Stil — Farbe folgt der Textfarbe) */
.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.icon--lg {
  width: 32px;
  height: 32px;
}

.icon--sm {
  width: 20px;
  height: 20px;
}

/* Icon-Sammlung am Seitenanfang: nur Vorlage für <use href="#icon-…">,
   selbst unsichtbar. Steht hier statt als style="…" im HTML, weil die
   Content-Security-Policy (.htaccess) Inline-Styles blockiert. */
.icon-sprite {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

/* Eigener Formatierungskontext: verhindert, dass der obere Außenabstand
   des gerahmten Heros (breite Bildschirme) die ganze Seite nach unten
   schiebt und dort der Hintergrund neben der Seite durchscheint */
main {
  display: flow-root;
}

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

.section {
  padding-block: var(--section-gap-mobile);
}

.section__title {
  text-align: center;
  margin-bottom: 4rem;
}

/* --------------------------------------------------------------------------
   4. Header & Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  /* Wie die Seite selbst auf die 16:9-Breite begrenzt und zentriert */
  max-width: var(--page-max);
  margin-inline: auto;
  background-color: var(--color-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-ambient);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-height);
  padding-block: 0.75rem;
}

.site-header__brand {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  color: var(--color-primary);
  line-height: 1.2;
}

.main-nav {
  display: none;
  gap: 2rem;
}

.main-nav__link {
  padding-bottom: 0.25rem;
  color: var(--color-on-surface-variant);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.main-nav__link:hover {
  color: var(--color-primary);
}

.main-nav__link.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  transition: background-color var(--transition), color var(--transition), opacity var(--transition);
}

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

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

/* Buchungs-CTA: warmer Sandton mit Navy-Text — hebt sich vom dunklen
   Hero-Foto ab; beim Hover aufhellen und leicht anheben */
.btn--cta {
  background-color: var(--color-secondary-container);
  color: var(--color-primary);
  border: 1px solid var(--color-border-softer);
  /* Kräftigerer Schnitt: der helle Sandton lässt dünne Versalien
     sonst optisch ausfransen */
  font-weight: 700;
  transition: background-color var(--transition), transform var(--transition);
}

.btn--cta:hover {
  background-color: var(--color-surface-lowest);
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn--outline {
  border: 1px solid var(--color-border-soft);
  color: var(--color-primary);
  background-color: transparent;
}

.btn--outline:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.site-header__cta {
  display: none;
}

/* Mobiles Menü */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-primary);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem var(--margin-mobile) 1.25rem;
  border-top: 1px solid var(--color-border-softer);
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav__link {
  padding: 0.75rem 0.5rem;
  color: var(--color-on-surface-variant);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
}

.mobile-nav__link:hover,
.mobile-nav__link.is-active {
  color: var(--color-primary);
  background-color: var(--color-surface-container);
}

.mobile-nav__cta {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Füllt den Bildschirm, aber nie höher als 54rem — auf großen Monitoren
     bleibt die nächste Sektion sichtbar statt einer endlosen Bildwand */
  min-height: min(100vh, 54rem);
  min-height: min(100svh, 54rem);
  display: flex;
  /* Text im oberen Bildbereich (Himmel/Dachlinie) statt mittig — so bleibt
     das Haus selbst weitgehend frei */
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--header-height) + clamp(4.5rem, 11vh, 7.5rem));
  overflow: hidden;
}

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

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-hero-overlay);
  mix-blend-mode: multiply;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-lg);
}

.hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-display-lg-mobile);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-surface-lowest);
  text-shadow: 0 2px 12px rgba(4, 25, 38, 0.4);
}

.hero__tagline {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: var(--leading-headline);
  color: var(--color-surface-lowest);
  text-shadow: 0 1px 8px rgba(4, 25, 38, 0.4);
  /* Näher an die Überschrift als an den Button — liest sich als Namenszug mit Zeile */
  margin-top: calc(-1 * var(--stack-md));
}

/* Verhindert den Umbruch innerhalb eines Begriffs (z. B. am Bindestrich
   von „Friedrichskoog-Spitze") */
.nowrap {
  white-space: nowrap;
}

.hero__cta {
  /* Unabhängig vom Textblock im unteren Bilddrittel platziert; ohne transform,
     damit der Hover-Effekt (translateY) ungestört bleibt */
  position: absolute;
  z-index: 1;
  top: 77%;
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  padding: 1rem 2rem;
  font-size: 13px;
  letter-spacing: 0.15em;
  box-shadow: var(--shadow-button);
}

/* Handys: Ein bildschirmhoher Hero wäre ein hoher, schmaler Kasten, in dem vom
   Querformat-Foto nur gut ein Drittel der Breite Platz hat — das Haus wäre
   links und rechts abgeschnitten. Deshalb hier nur etwas höher als breit
   (9:10): rund 60 % der Fotobreite, also das ganze Haus mit etwas Umgebung.
   Bewusst eine Höhe statt aspect-ratio — zusammen mit einer Mindesthöhe würde
   aspect-ratio den Hero auf kleinen Handys breiter als den Bildschirm machen.
   Die 20rem greifen erst unter 289 px Breite oder bei stark vergrößerter
   Schrift und halten dann den Knopf unter dem Text.
   Prüfung: sh dev-resources/tests/hero/check.sh */
@media (max-width: 640px) {
  .hero {
    min-height: max(20rem, 111vw);
    /* Im niedrigeren Bild rückt die Überschrift näher an die Kopfzeile */
    padding-top: calc(var(--header-height) + 2.5rem);
  }

  /* Überschrift und Unterzeile immer einzeilig — umbrochen verdecken sie zu
     viel vom Haus. Die Schriftgröße folgt deshalb der Breite zwischen den
     Seitenrändern: In Libre Caslon Text ist „Ferienhaus Deichglück" 10,9-mal
     und die Unterzeile 15,0-mal so breit wie ihre Schriftgröße (die
     Ersatzschriften laufen schmaler); die Teiler lassen rund 3 % Luft. Bei
     geändertem Text oder anderer Schrift neu ausmessen. Bewusst ohne
     white-space: nowrap — passt es doch einmal nicht, bricht der Text lieber
     um, als am Bildrand abgeschnitten zu werden. */
  .hero__title {
    font-size: min(var(--text-display-lg-mobile), calc((100vw - 2 * var(--margin-mobile)) / 11.2));
  }

  .hero__tagline {
    font-size: min(1.25rem, calc((100vw - 2 * var(--margin-mobile)) / 15.5));
  }
}

/* Sehr breite Bildschirme (oberhalb Full-HD): Hero als gerahmte Bildkarte
   statt endloser Panorama-Streifen — beginnt unterhalb des Headers */
@media (min-width: 2000px) {
  .hero {
    max-width: 1800px;
    margin-inline: auto;
    margin-top: calc(var(--header-height) + var(--stack-lg));
    /* Die Karte liegt nicht mehr unter der Kopfzeile: deren Höhe entfällt, der
       Abstand der Überschrift zum oberen Bildrand bleibt derselbe wie oben */
    padding-top: clamp(4.5rem, 11vh, 7.5rem);
    min-height: min(100vh - 9rem, 50rem);
    min-height: min(100svh - 9rem, 50rem);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-ambient);
  }
}

/* --------------------------------------------------------------------------
   Einleitung — Willkommenstext direkt unter dem Hero
   -------------------------------------------------------------------------- */

/* Nur Abstand nach oben; nach unten liefert die Details-Sektion ihren eigenen
   (doppelte Klasse, damit die Regel auch die Desktop-Sektionsabstände schlägt) */
.section.section--intro {
  padding-bottom: 0;
}

.intro__greeting {
  text-align: center;
}

.intro__lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--color-on-surface-variant);
  max-width: 36rem;
  margin: var(--stack-md) auto 0;
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   6. Details (Fakten-Karten)
   -------------------------------------------------------------------------- */

.details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: center;
}

.details__text {
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.fact-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background-color: var(--color-surface-lowest);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
}

.fact-card .icon {
  color: var(--color-primary);
}

.fact-card__label {
  color: var(--color-on-surface-variant);
}

.fact-card__value {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  color: var(--color-primary);
  line-height: 1.3;
}

.details__media {
  /* Volle Zeilenhöhe einnehmen: das Foto endet dadurch bündig mit
     der Textspalte statt eine Lücke im Rahmen zu lassen */
  align-self: stretch;
  position: relative;
  min-height: 320px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.details__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.details__media:hover img {
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   6b. Galerie & Lightbox
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense; /* füllt Lücken neben den großen Kacheln auf */
  gap: 1rem;
}

.gallery__item {
  position: relative;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
  transform: scale(1.05);
}

/* Lightbox (Markup wird von js/gallery.js erzeugt) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--color-primary) 92%, transparent);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(1100px, 100%);
}

.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.lightbox__caption {
  color: var(--color-primary-fixed);
  text-align: center;
  font-size: 0.9375rem;
}

.lightbox__counter {
  color: var(--color-primary-fixed-dim);
  margin-left: 0.75em;
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  color: var(--color-surface-lowest);
  background-color: color-mix(in srgb, var(--color-surface-lowest) 12%, transparent);
  transition: background-color var(--transition);
}

.lightbox__btn:hover {
  background-color: color-mix(in srgb, var(--color-surface-lowest) 28%, transparent);
}

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

/* Seite hinter geöffneter Lightbox nicht scrollen */
body.lightbox-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Ausstattung (Chips)
   -------------------------------------------------------------------------- */

.section--features {
  background-color: var(--color-surface-lowest);
  border-block: 1px solid var(--color-border-softer);
}

.features__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-lg);
}

.features__intro {
  max-width: 42rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-chip-bg);
  border: 1px solid var(--color-chip-border);
  color: var(--color-on-tertiary-fixed);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   8. Kalender & Buchungsformular
   -------------------------------------------------------------------------- */

.booking-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--color-surface-lowest);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-ambient);
  overflow: hidden;
}

/* --- Kalender --- */

.calendar {
  padding: 2rem;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

.calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.calendar__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-primary);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
}

.calendar__nav-btn:hover:not(:disabled) {
  background-color: var(--color-surface-container);
}

.calendar__nav-btn:disabled {
  color: var(--color-outline-variant);
  cursor: not-allowed;
}

/* Zweiter Monat (calendar.monthsVisible: 2): eigener Titel im gleichen
   Rhythmus wie die Kopfzeile des ersten Monats */
.calendar__month--secondary {
  margin-top: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.calendar__month {
  min-width: 12ch;
  text-align: center;
}

.calendar__weekdays,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  text-align: center;
}

.calendar__weekdays {
  margin-bottom: 1rem;
  color: var(--color-on-surface-variant);
}

.cal-day {
  padding-block: 0.5rem;
  border-radius: var(--radius-sm);
  user-select: none;
}

.cal-day--outside {
  color: var(--color-outline-variant);
}

.cal-day--past {
  color: var(--color-outline-variant);
  text-decoration: line-through;
  text-decoration-color: var(--color-outline-variant);
}

.cal-day--free {
  cursor: pointer;
  /* Buchbare Tage als sichtbare Zellen vom Kalenderhintergrund abheben */
  background-color: var(--color-surface-lowest);
  box-shadow: inset 0 0 0 1px var(--color-border-softer);
  transition: background-color var(--transition);
}

.cal-day--free:hover {
  background-color: var(--color-primary-fixed);
}

.cal-day--booked {
  background-color: var(--color-day-booked-bg);
  color: var(--color-on-surface);
  cursor: not-allowed;
}

/* Halbtags-Stil (calendar.dayStyle: 'split'): An- und Abreisetage werden
   diagonal geteilt — die belegte Tageshälfte trägt die Belegt-Farbe.
   Anreisetag: Nachmittag belegt (rechts unten), Abreisetag: Vormittag
   belegt (links oben), Bettwechsel: beide Hälften mit Kante dazwischen. */
.cal-day--arrival {
  /* Freie Vormittagshälfte wie eine buchbare Zelle darstellen */
  background-color: var(--color-surface-lowest);
  background-image: linear-gradient(135deg, transparent 50%, var(--color-day-booked-bg) 50%);
  box-shadow: inset 0 0 0 1px var(--color-border-softer);
  cursor: not-allowed;
}

.cal-day--departure {
  background-image: linear-gradient(135deg, var(--color-day-booked-bg) 50%, transparent 50%);
}

.cal-day--turnover {
  background-image: linear-gradient(135deg,
    var(--color-day-booked-bg) 47%,
    var(--color-surface) 47% 53%,
    var(--color-day-booked-bg) 53%);
  color: var(--color-on-surface);
  cursor: not-allowed;
}

/* Anreisetag der nächsten Gäste, solange er zur gewählten Anreise als eigener
   Abreisetag passt (der Vormittag ist frei): anklickbar wie ein freier Tag.
   Steht bewusst nach den Belegt-Regeln, damit der Mauszeiger gewinnt. */
.cal-day--departure-option {
  cursor: pointer;
}

.cal-day--departure-option:hover {
  background-color: var(--color-primary-fixed);
}

.cal-day--selected {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}

.cal-day--in-range {
  background-color: var(--color-day-range-bg);
  cursor: pointer;
}

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  color: var(--color-on-surface-variant);
}

.calendar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

.legend-swatch--booked { background-color: var(--color-day-booked-bg); border: 1px solid var(--color-error-container); }
.legend-swatch--free { background-color: var(--color-surface-lowest); border: 1px solid var(--color-border-soft); }
.legend-swatch--selected { background-color: var(--color-primary); }
.legend-swatch--half {
  background-image: linear-gradient(135deg, var(--color-day-booked-bg) 50%, transparent 50%);
  border: 1px solid var(--color-border-soft);
}

/* Legenden-Eintrag für An-/Abreisetage nur im Halbtags-Stil zeigen */
.calendar__legend-item--split { display: none; }
.calendar--split .calendar__legend-item--split { display: inline-flex; }

.calendar__status {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  min-height: 1.5em;
}

/* --- Formular --- */

.booking-form {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.booking-form__title {
  margin-bottom: 1.5rem;
}

.booking-form form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  /* minmax(0, …): erlaubt den Feldern, schmaler als ihre
     Browser-Mindestbreite zu werden (verhindert Überlauf auf Mobilgeräten) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Name + Erwachsene + Kinder: die Zählfelder enthalten nur eine Ziffer
   und sind daher fest schmal (6rem — gerade breit genug für das Label
   „Erwachsene"). Auf schmalen Bildschirmen steht der Name in voller
   Breite darüber, die restliche Spalte der Zählfeld-Zeile bleibt leer. */
.form-row--persons {
  grid-template-columns: 6rem 6rem minmax(0, 1fr);
}

.form-row--persons .form-field:first-child {
  grid-column: 1 / -1;
}

/* Ab Tablet-Breite alle drei in einer Zeile: der Name bekommt den
   gesamten übrigen Platz */
@media (min-width: 768px) {
  .form-row--persons {
    grid-template-columns: minmax(0, 1fr) 6rem 6rem;
  }

  .form-row--persons .form-field:first-child {
    grid-column: auto;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field__label {
  color: var(--color-on-surface-variant);
}

.form-field input[type='text'],
.form-field input[type='email'],
.form-field input[type='number'],
.form-field textarea {
  width: 100%;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--color-border-soft);
  border-radius: 0;
  background: transparent;
  padding-block: 0.5rem;
  font: inherit;
  color: var(--color-primary);
  transition: border-color var(--transition);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: -1px;
}

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

.form-field__error {
  font-size: 0.8125rem;
  color: var(--color-error);
  min-height: 1em;
}

/* Honeypot-Feld: aus dem Sichtbereich geschoben statt display:none,
   damit Spam-Bots es für ein echtes Feld halten */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Einwilligung (DSGVO) */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
}

.form-consent input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.form-consent a {
  color: var(--color-primary);
  text-decoration: underline;
}

.booking-form__submit {
  margin-top: 1rem;
  padding: 1rem;
  letter-spacing: 0.15em;
}

.form-feedback {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.form-feedback--success {
  background-color: var(--color-chip-bg);
  color: var(--color-on-tertiary-fixed);
  border: 1px solid var(--color-chip-border);
}

.form-feedback--error {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
}

.form-feedback[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   9. Lage & Karte (Zwei-Klick-Consent)
   -------------------------------------------------------------------------- */

.section--location {
  border-top: 1px solid var(--color-border-softer);
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: center;
}

.location__map-frame {
  order: 2;
  height: 400px;
  padding: 0.5rem;
  background-color: var(--color-surface-lowest);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.location__map {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 0; /* Leaflet-Panes unter dem Seiten-Header halten */
}

/* Platzhalter, bevor der Gast dem Laden der Karte zustimmt */
.map-consent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-variant);
}

.map-consent .icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.map-consent__note {
  max-width: 34rem;
  font-size: 0.875rem;
}

.map-consent__note a {
  text-decoration: underline;
}

/* Kartenkacheln gedämpft einfärben, passend zum ruhigen Design */
.location__map .leaflet-tile {
  filter: grayscale(0.35) saturate(0.65);
}

.location__map .leaflet-popup-content {
  font-family: var(--font-sans);
}

.location__info {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
}

.location__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.location__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-softer);
}

.location__list .icon {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--section-gap-mobile);
  background-color: var(--color-surface-lowest);
  border-top: 1px solid var(--color-border-soft);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: var(--stack-lg);
  text-align: center;
}

.site-footer__brand {
  font-family: var(--font-serif);
  font-size: var(--text-headline-md);
  color: var(--color-primary);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.site-footer__nav a {
  color: var(--color-on-surface-variant);
  transition: color var(--transition);
}

.site-footer__nav a:hover {
  color: var(--color-primary);
}

.site-footer__copy {
  color: var(--color-on-surface-variant);
}

/* --------------------------------------------------------------------------
   11. Rechtsseiten (Impressum / Datenschutz)
   -------------------------------------------------------------------------- */

.legal-page,
.contact-page {
  max-width: 48rem;
  margin-inline: auto;
  padding: calc(var(--header-height) + 3rem) var(--margin-mobile) var(--section-gap-mobile);
}

.legal-page h1,
.contact-page h1 {
  font-family: var(--font-serif);
  font-size: var(--text-headline-md);
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 2rem;
}

.legal-page h2,
.contact-page > h2 {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  font-weight: 400;
  color: var(--color-primary);
  margin: 2.5rem 0 1rem;
}

.legal-page p,
.legal-page ul,
.contact-page > p {
  margin-bottom: 1rem;
  color: var(--color-on-surface-variant);
}

.legal-page ul {
  padding-left: 1.5rem;
}

.legal-page a,
.contact-page > p a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Kontaktseite (kontakt.html): Text wie auf den Rechtsseiten, das Formular
   im selben Panel wie die Buchungsanfrage — hier ohne Kalender daneben,
   deshalb auch auf breiten Bildschirmen einspaltig. */
.booking-panel.contact-panel {
  grid-template-columns: minmax(0, 1fr);
  margin-block: 2rem 1rem;
}

/* --------------------------------------------------------------------------
   12. Responsive Anpassungen
   -------------------------------------------------------------------------- */

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--margin-desktop);
  }

  /* Auf Tablets rücken die Menüpunkte enger zusammen, und der Knopf „Jetzt
     Buchen" fehlt noch: Marke, sechs Menüpunkte und Knopf brauchen zusammen
     rund 960 px. Der Knopf kommt deshalb erst ab 1024 px dazu (siehe unten);
     bis dahin führen der Menüpunkt „Kalender" und der Knopf im Titelbild zur
     Anfrage. Prüfung: sh dev-resources/tests/header/check.sh */
  .main-nav {
    display: flex;
    gap: 1.25rem;
  }

  .menu-toggle,
  .mobile-nav {
    display: none !important;
  }

  .hero__title {
    font-size: var(--text-display-lg);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
  }

  .hero__tagline {
    font-size: var(--text-headline-sm);
  }

  .calendar,
  .booking-form {
    padding: 3rem;
  }

  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Ausgewählte Bilder als große 2×2-Kacheln für einen editorialen Rhythmus */
  .gallery__item--wide {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto; /* Höhe folgt den beiden Nachbarzeilen */
  }

  .lightbox__btn--prev { left: 1.5rem; }
  .lightbox__btn--next { right: 1.5rem; }

  .location__map-frame {
    height: 500px;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .main-nav {
    gap: 2rem;
  }

  .site-header__cta {
    display: inline-block;
  }

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

  .details__grid {
    grid-template-columns: 4fr 7fr;
  }

  .details__media {
    min-height: 600px;
  }

  .booking-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar {
    border-bottom: none;
    border-right: 1px solid var(--color-border-soft);
  }

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

  .location__map-frame {
    order: 1;
  }

  .location__info {
    order: 2;
    padding-left: 3rem;
  }

  .site-footer {
    padding-block: var(--section-gap);
  }

  .site-footer__inner {
    flex-direction: row;
    text-align: left;
  }
}