/* Fuchs und Has – Grundlayout.
   Umsetzung der visuellen Stilprinzipien V-01 … V-10 (docs/05): bildbetont, große Hero-Bilder,
   moderate Textdichte, deutliche Sektionen, großzügiger Weißraum, klare typografische
   Hierarchie, wenige sichtbare Aktionen, ruhige Wirkung, mittig ausgerichtet (REQ-PUB-13).

   Diese Datei enthält nur Layout und Komponenten. Alle gestalterischen Werte (Farben, Schriften,
   Größen, Abstände, Radien, Schatten) kommen als Design Tokens aus themes.css (ADR-015).
   Hier keine festen Farbwerte eintragen; ein neuer Token muss in jedem Theme definiert werden
   (geprüft in test/themes.test.js). Keine externen Schriften (NFR-12). */

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

html { scroll-padding-top: calc(var(--header-height) + var(--space-2)); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--line-height-body);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 var(--space-2); }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }

.skip-link {
  position: absolute; left: var(--space-2); top: -3rem;
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-1) var(--space-2); z-index: 20;
}
.skip-link:focus { top: var(--space-1); }

/* Layout-Container, mittig */
.container { width: min(100% - 2 * var(--space-3), var(--width-wide)); margin-inline: auto; }
.container--text { max-width: var(--width-text); text-align: center; }
.container--narrow { max-width: var(--width-narrow); }

/* Kopfzeile (REQ-PUB-12): fest oben */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--header-bg);
  color: var(--header-text);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
}
.site-header :focus-visible { outline-color: var(--header-focus); }
.site-header__inner {
  width: min(100% - 2 * var(--space-3), var(--width-wide));
  margin-inline: auto;
  min-height: var(--header-height);
  display: flex; align-items: center; gap: var(--space-3);
}
.brand {
  font-family: var(--brand-font); font-size: var(--brand-size); font-weight: var(--brand-weight);
  letter-spacing: var(--brand-letter-spacing); text-transform: var(--brand-transform);
  color: var(--header-text); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--header-text); }
.main-nav { flex: 1; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--nav-gap); }
.main-nav a {
  color: var(--header-text); text-decoration: none; font-size: var(--nav-size);
  letter-spacing: var(--nav-letter-spacing); text-transform: var(--nav-transform);
}
.main-nav a[aria-current="page"], .main-nav a:hover { color: var(--header-text); text-decoration: underline; text-underline-offset: 0.35em; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.lang-switch { display: flex; gap: var(--space-1); font-size: var(--small-size); }
.lang-switch a { color: var(--header-muted); text-decoration: none; }
.lang-switch a[aria-current] { color: var(--header-text); font-weight: 600; }
.header-contact { font-size: var(--nav-size); color: var(--header-link); }
.header-contact:hover { color: var(--header-text); }
.menu-toggle {
  background: none; border: 1px solid var(--header-border); border-radius: var(--radius);
  padding: 0.35rem 0.75rem; font: inherit; color: var(--header-text); cursor: pointer;
}

/* Buttons – bewusst nur eine primäre Aktionsform (V-07) */
.button {
  display: inline-block; padding: var(--button-pad-y) var(--button-pad-x); border-radius: var(--button-radius);
  text-decoration: none; font: inherit; font-size: var(--button-size); font-weight: var(--button-weight);
  letter-spacing: var(--button-letter-spacing); text-transform: var(--button-transform);
  cursor: pointer; border: 1px solid transparent;
}
.button--primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--button-shadow); }
.button--primary:hover { background: var(--color-accent-strong); color: var(--color-on-accent); }
.button--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.button--ghost:hover { border-color: var(--color-text); color: var(--color-text); }
.site-header .button--primary { background: var(--header-cta-bg); color: var(--header-cta-text); box-shadow: none; }
.site-header .button--primary:hover { background: var(--header-cta-hover); color: var(--header-cta-text); }

/* Hero (V-01, V-02): großes Bild, kurzer Text */
.hero { position: relative; }
.hero__image { min-height: var(--hero-height); border-radius: var(--hero-image-radius); }
.hero--compact .hero__image { min-height: var(--hero-height-compact); }
.hero__text {
  width: min(100% - 2 * var(--space-3), var(--width-text));
  margin: calc(-1 * var(--hero-text-overlap)) auto 0;
  position: relative;
  background: var(--hero-text-bg);
  border-radius: var(--hero-text-radius);
  box-shadow: var(--hero-text-shadow);
  padding: var(--space-4) var(--space-3) var(--space-3);
  text-align: center;
}

.page-intro { padding: var(--section-space) 0 var(--space-3); }

/* Sektionen (V-04, V-05) */
.section { padding: var(--section-space) 0; }
.section--tinted { background: var(--color-tint); }
.section--cta { text-align: center; }

.feature-list { list-style: none; padding: 0; margin: 0 auto; text-align: left; max-width: 34rem; }
.feature-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.fact-list { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fact-list li { border: 1px solid var(--color-border); padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); font-size: var(--small-size); }
.tag-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.tag-list li { background: var(--tag-bg); border: 1px solid var(--tag-border); padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); }

.feature-block__inner { display: grid; gap: var(--space-4); align-items: center; }
.feature-block .placeholder-image { min-height: 22rem; }
@media (min-width: 52rem) {
  .feature-block__inner { grid-template-columns: 3fr 2fr; }
  .feature-block--reverse .feature-block__inner > :first-child { order: 2; }
}

.image-grid { display: grid; gap: var(--image-gap); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.image-grid .placeholder-image { min-height: 16rem; }

/* Bildrahmung: gilt für Bildflächen außerhalb des Hero (Platzhalter jetzt, echte Bilder später) */
.feature-block .placeholder-image, .image-grid .placeholder-image {
  border-radius: var(--image-radius); box-shadow: var(--image-shadow); border: var(--image-border);
}

/* Entwicklungs-Platzhalter: bewusst sichtbar und eindeutig */
.placeholder-image {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, var(--color-placeholder) 0 14px, var(--color-placeholder-alt) 14px 28px);
  color: var(--color-muted); font-size: var(--small-size); letter-spacing: 0.05em; border-radius: var(--image-radius);
}
.hero .placeholder-image { border-radius: var(--hero-image-radius); }
.placeholder-text {
  color: var(--color-muted); font-style: italic;
  border-left: 3px dashed var(--color-border); padding-left: var(--space-1); text-align: left;
}

.notice { background: var(--color-tint); padding: var(--space-2); border-radius: var(--radius); }

.faq { text-align: left; }
.faq details { border-bottom: 1px solid var(--color-border); padding: var(--space-1) 0; }
.faq summary { cursor: pointer; font-weight: 600; }

/* Kalender (SPEC-002) – alle Zustände über --cal-* Tokens */
.calendar {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--surface-shadow); padding: var(--space-3); max-width: 34rem; margin-inline: auto;
}
.calendar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.calendar__title { font-family: var(--font-heading); font-size: var(--step-1); color: var(--color-heading); margin: 0; }
.calendar__nav { background: none; border: 1px solid var(--color-border); border-radius: var(--radius); width: 2.5rem; height: 2.5rem; font-size: 1.1rem; cursor: pointer; color: var(--color-text); }
.calendar__nav:disabled { opacity: var(--cal-disabled-opacity); cursor: default; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cal-gap); }
.calendar__weekday { text-align: center; font-size: 0.8rem; color: var(--color-muted); padding-bottom: var(--space-1); }
.calendar__day {
  aspect-ratio: 1 / 1; min-height: 2.5rem; border: 0; border-radius: var(--cal-day-radius);
  background: var(--cal-available-bg); color: var(--cal-available-text); font: inherit; font-size: 0.95rem; cursor: pointer;
}
.calendar__day:hover:not(:disabled) { outline: 2px solid var(--cal-hover-outline); outline-offset: -2px; }
.calendar__day:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 1px; position: relative; z-index: 1; }
.calendar__day--unavailable {
  background: repeating-linear-gradient(135deg, var(--cal-unavailable-bg) 0 4px, var(--cal-unavailable-stripe) 4px 8px);
  color: var(--cal-unavailable-text); text-decoration: line-through; cursor: not-allowed;
}
.calendar__day--past { color: var(--cal-past-text); cursor: default; }
.calendar__day--in-range { background: var(--cal-range-bg); color: var(--cal-range-text); }
.calendar__day--selected { background: var(--cal-selected-bg); color: var(--cal-selected-text); }
.calendar__legend { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); font-size: 0.85rem; color: var(--color-muted); list-style: none; padding: 0; }
.calendar__legend span { display: inline-block; width: 1rem; height: 1rem; vertical-align: -0.15rem; margin-right: 0.35rem; border-radius: 2px; border: 1px solid var(--color-border); }
.calendar__legend .swatch--available { background: var(--cal-available-bg); }
.calendar__legend .swatch--unavailable { background: repeating-linear-gradient(135deg, var(--cal-unavailable-bg) 0 3px, var(--cal-unavailable-stripe) 3px 6px); }
.calendar__legend .swatch--selected { background: var(--cal-selected-bg); }
.calendar__status { margin-top: var(--space-2); min-height: 1.6em; }
.calendar__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Formular (SPEC-003) */
.inquiry-form { display: grid; gap: var(--space-2); }
.form-row--split { display: grid; gap: var(--space-2); }
@media (min-width: 40rem) { .form-row--split { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: var(--small-size); margin-bottom: 0.25rem; }
.field input, .field textarea {
  width: 100%; font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--input-border);
  border-radius: var(--input-radius); background: var(--color-surface); color: var(--color-text);
}
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__error { color: var(--color-error); font-size: 0.85rem; margin: 0.25rem 0 0; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.6em; }
.form-status--error { color: var(--color-error); }

/* Fußbereich */
.site-footer {
  background: var(--footer-bg); color: var(--footer-text);
  border-top: 1px solid var(--footer-border); padding: var(--space-4) 0; font-size: var(--small-size);
}
.site-footer a { color: var(--footer-link); }
.site-footer a:hover { color: var(--footer-text); }
.site-footer :focus-visible { outline-color: var(--footer-focus); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); }
.site-footer p { margin: 0; }

/* Mobil (V-09): Bildpräsenz bleibt, Menü klappbar, Buchungsanfrage bleibt sichtbar */
@media (max-width: 60rem) {
  .site-header__inner { flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: var(--space-1) 0; }
  .brand { flex: 1; }
  .header-actions { order: 2; }
  .main-nav { order: 3; flex-basis: 100%; }
  .main-nav ul { flex-direction: column; align-items: center; padding: var(--space-2) 0; }
  .js .main-nav[data-collapsed="true"] { display: none; }
}
@media (max-width: 30rem) {
  .header-actions .button { padding: 0.5rem 0.8rem; }
  .hero__image { min-height: 60vh; }
}

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