/* Hallmark · genre: editorial · macrostructure: Photographic · theme: custom
 * vibe: "warmes Alpen-Apartment, ruhig, ehrlich"
 * paper oklch(97.2% 0.008 78) · accent oklch(73.6% 0.135 61.4) warm
 * display Fraunces · body IBM Plex Sans
 * achsen: light / roman-serif / warm
 * H6 Photographic knobs: Bildfläche=full-bleed, Caption=unten-links, Text darunter
 * nav: N9 Edge-aligned minimal · footer: Ft6 Letter close
 * enrichment: keine, die Fotografie trägt die Seite
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

/* tokens.css und schrift/fonts.css sind hier eingebettet, damit der Browser keine CSS-Kette abarbeiten muss. */
/* Haus Süta · Gestaltungs-Token
 * Anker: Logo-Orange #E69446 = oklch(73.6% 0.135 61.4)
 * Papier und Text sind warm getönt (Hue 55–78). Die dunklen Bänder nehmen
 * das kühle Anthrazit des Logos auf (#2E363E, Hue 248). Diese Zweifarbigkeit
 * stammt aus dem Corporate Design und ist Absicht.
 */

:root {
  /* Flächen */
  --color-paper:      oklch(97.2% 0.008 78);
  --color-paper-2:    oklch(94.2% 0.012 75);
  --color-paper-dark: oklch(29%   0.018 248);
  --color-paper-dark-2: oklch(34% 0.018 248);

  /* Linien und Text */
  --color-rule:       oklch(86%   0.011 72);
  --color-rule-dark:  oklch(45%   0.016 248);
  --color-muted:      oklch(45%   0.013 62);
  --color-muted-dark: oklch(80%   0.012 250);
  --color-ink:        oklch(24%   0.016 58);
  --color-ink-dark:   oklch(96%   0.006 250);

  /* Marke */
  --color-accent:       oklch(73.6% 0.135 61.4);
  --color-accent-hover: oklch(79%   0.120 64);
  /* Text auf orangefarbener Fläche */
  --color-accent-ink:   oklch(24%   0.030 58);
  --color-accent-deep:  oklch(52%   0.140 52);
  --color-accent-soft:  oklch(91%   0.045 70);
  --color-focus:        oklch(52%   0.140 52);
  --color-focus-dark:   oklch(80%   0.130 62);
  --color-warnung:      oklch(62%   0.170 28);
  --color-platzhalter:  oklch(70%   0.012 250);
  /* Karte: Saisonfarben, gedeckt, damit das Orange die Routen behält */
  --color-sommer:       oklch(58%   0.110 140);
  --color-winter:       oklch(58%   0.095 245);

  /* Auflagen über dem Hero-Foto */
  --color-hero-label:   oklch(93%   0.020 76);
  --schleier-oben:      oklch(25%   0.020 60 / 0.45);
  --schleier-klar:      oklch(25%   0.020 60 / 0);
  --schleier-unten:     oklch(20%   0.020 58 / 0.86);
  --schleier-mitte:     oklch(20%   0.020 58 / 0.62);
  --schleier-aus:       oklch(20%   0.020 58 / 0);
  --glas-nav:           oklch(26%   0.018 248 / 0.72);
  --glas-nav-hover:     oklch(24%   0.018 248 / 0.88);
  --glas-nav-rand:      oklch(95%   0.008 78 / 0.55);
  --schatten-marke:     0 2px 10px oklch(18% 0.02 60 / 0.75);
  --schatten-marke-eng: 0 1px 2px oklch(18% 0.02 60 / 0.5);
  --schatten-titel:     0 1px 18px oklch(18% 0.02 60 / 0.55);

  /* Schrift */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body:    'IBM Plex Sans', ui-sans-serif, 'Segoe UI', sans-serif;

  /* Skala, Quinte 1.25 ab 16 px */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-display:   clamp(2.5rem, 4.4vw + 1rem, 4.75rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem);

  /* Raum, 4-pt */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);
  /* Auf sehr breiten Schirmen bekommt die Seite einen Rahmen, sonst
     steht der Text links und rechts liegen 1000 Pixel Leere. */
  --inhalt-max: 100rem;

  /* Linienstärken */
  --rule-hair: 1px;
  --rule-bold: 2px;

  /* Bewegung */
  --dur-instant: 90ms;
  --dur-short:   170ms;
  --dur-medium:  280ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Ebenen */
  --z-base: 1;
  --z-sticky: 20;
  --z-overlay: 40;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('schrift/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('schrift/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('schrift/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('schrift/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- Grundlage ---------- */

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

html, body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

html { background: var(--color-paper-2); }

html { scroll-behavior: smooth; }

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

body {
  position: relative;      /* Bezugsrahmen für den absolut gesetzten Kopf */
  max-width: var(--inhalt-max);
  margin-inline: auto;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
  /* Fraunces ist variabel: opsz passt die Strichstärke an die Schriftgröße an */
  font-variation-settings: 'opsz' 48;
}

.hero__titel,
.kopf h2 {
  font-variation-settings: 'opsz' 120;
}

.band__titel,
.monat__titel,
.fuss__gruss {
  font-variation-settings: 'opsz' 32;
}

p { margin: 0; }

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

a { color: inherit; }

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 1px;
}

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

/* Sprungmarke für Tastatur */
.sprung {
  position: absolute;
  left: var(--space-md);
  top: -4rem;
  z-index: var(--z-overlay);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  font-size: var(--text-sm);
  text-decoration: none;
}
.sprung:focus-visible { top: var(--space-md); }

/* ---------- Nav · N9 Edge-aligned minimal ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--page-gutter);
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
}

.nav__marke {
  display: block;
  line-height: 0;
}

.nav__marke img {
  height: clamp(2.6rem, 5.5vw, 3.75rem);
  width: auto;
  filter: drop-shadow(var(--schatten-marke)) drop-shadow(var(--schatten-marke-eng));
}

.nav__cta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink-dark);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--glas-nav-rand);
  background: var(--glas-nav);
  backdrop-filter: blur(3px);
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}

.nav__cta:hover {
  background: var(--glas-nav-hover);
  border-color: var(--color-accent);
}

.nav__cta:active { background: var(--color-paper-dark); }

/* Seitenmenü zwischen Marke und Buchen-Knopf */
.nav__menue {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-inline: auto;
}

.nav__menue a {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-dark);
  text-shadow: var(--schatten-marke-eng), 0 1px 8px oklch(18% 0.02 60 / 0.6);
  padding: var(--space-xs) 0;
  border-bottom: var(--rule-bold) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}

.nav__menue a:hover,
.nav__menue a[aria-current="page"] { border-bottom-color: var(--color-accent); }

@media (max-width: 44rem) {
  .nav { flex-wrap: wrap; }
  .nav__cta { order: 2; }
  .nav__menue {
    order: 3;
    width: 100%;
    margin-inline: 0;
    justify-content: flex-start;
    gap: var(--space-2xs) var(--space-sm);
  }
  .nav__menue a { font-size: var(--text-xs); }
}

/* ---------- Hero · H6 Photographic Fold ---------- */

.hero {
  position: relative;
  min-height: min(84svh, 46rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero > picture {
  grid-area: 1 / 1;
  display: block;
  min-height: 0;
}

.hero__bild {
  width: 100%;
  height: 100%;
  min-height: min(84svh, 46rem);
  object-fit: cover;
  object-position: center 58%;
}

.hero__schleier {
  grid-area: 1 / 1;
  background: linear-gradient(
    to bottom,
    var(--schleier-oben) 0%,
    var(--schleier-klar) 26%
  );
}

.hero__unterschrift {
  grid-area: 1 / 1;
  align-self: end;
  padding: var(--space-lg) var(--page-gutter);
  background: linear-gradient(
    to top,
    var(--schleier-unten) 0%,
    var(--schleier-mitte) 38%,
    var(--schleier-aus) 100%
  );
  padding-top: var(--space-3xl);
  color: var(--color-ink-dark);
}

.hero__ort {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
  font-variation-settings: normal;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hero-label);
  margin-bottom: var(--space-xs);
}

.hero__titel {
  display: block;
  font-size: var(--text-display);
  font-weight: 400;
  max-width: 18ch;
  text-shadow: var(--schatten-titel);
}

/* Unterseiten: niedrigerer Hero */
.hero--klein,
.hero--klein .hero__bild { min-height: min(56svh, 30rem); }

.hero--klein .hero__titel { font-size: var(--text-display-s); }

/* Brotkrumen über der Überschrift */
.krumen {
  list-style: none;
  margin: 0 0 var(--space-xs);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-hero-label);
}

.krumen a { color: inherit; text-decoration: none; }
.krumen a:hover { text-decoration: underline; text-underline-offset: 3px; }
.krumen li + li::before { content: '/'; margin-right: var(--space-xs); opacity: 0.6; }

/* ---------- Textbänder ---------- */

.band {
  padding-block: var(--space-2xl);
  padding-inline: var(--page-gutter);
}

.band--eng { max-width: 72ch; }
.band--breit { max-width: 78ch; }
.band--luft { padding-block: var(--space-2xl) var(--space-3xl); }

.band--dunkel {
  background: var(--color-paper-dark);
  color: var(--color-ink-dark);
  max-width: none;
  /* damit der Browser Datumsfelder und Bildlaufleisten passend zeichnet */
  color-scheme: dark;
}

.lede {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.01em;
}

.fliess + .fliess { margin-top: var(--space-md); }

.fliess {
  max-width: 62ch;
  color: var(--color-muted);
}

.band--dunkel .fliess { color: var(--color-muted-dark); }

/* Sektionsüberschrift · S2 Hanging, einspaltig gestapelt */
.kopf {
  padding-block: var(--space-2xl) var(--space-lg);
  padding-inline: var(--page-gutter);
}

.kopf h2 {
  font-size: var(--text-2xl);
  font-weight: 400;
  max-width: 20ch;
}

.kopf__zusatz {
  margin-top: var(--space-sm);
  max-width: 54ch;
  color: var(--color-muted);
}

/* ---------- Bildbänder ---------- */

.foto {
  position: relative;
  margin: 0;
}

.foto img {
  width: 100%;
  height: clamp(18rem, 62svh, 40rem);
  object-fit: cover;
}

.foto--hoch img { height: clamp(20rem, 78svh, 46rem); }

.foto figcaption {
  padding: var(--space-sm) var(--page-gutter) 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.foto-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--rule-hair);
  background: var(--color-rule);
}

.foto-paar .foto { background: var(--color-paper); }

.foto-paar .foto img { height: clamp(15rem, 44svh, 26rem); }

/* ---------- Faktentabelle · F3 ---------- */

.fakten {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-md);
}

.fakten caption {
  text-align: left;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-sm);
}

.fakten th,
.fakten td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.fakten th {
  font-weight: 400;
  color: var(--color-muted);
  width: 42%;
}

.fakten td { font-weight: 600; }

.fakten tr:last-child th,
.fakten tr:last-child td { border-bottom: 0; }

.hinweis {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 54ch;
}

/* ---------- Jahreszeiten ---------- */

.jahr {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-xl);
  padding-inline: var(--page-gutter);
  padding-block: var(--space-lg) var(--space-2xl);
}

.jahr h3 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.jahr p {
  color: var(--color-muted-dark);
  margin-bottom: var(--space-md);
}

/* ---------- Links · C3 Typographic ---------- */

.link {
  display: inline-block;
  font-weight: 600;
  color: var(--color-accent-deep);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-bold) solid var(--color-accent-soft);
  padding-bottom: var(--rule-hair);
  transition: border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.link:hover {
  border-color: var(--color-accent-deep);
}

.link:active { color: var(--color-ink); }

.band--dunkel .link:active { color: var(--color-accent); }

.band--dunkel .link {
  color: var(--color-ink-dark);
  border-color: var(--color-accent);
}

.band--dunkel .link:hover { border-color: var(--color-ink-dark); }

.band--dunkel :focus-visible { outline-color: var(--color-focus-dark); }

/* ---------- Buchen ---------- */

.buchen h3 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.buchen p { color: var(--color-muted-dark); }

.knopf {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: var(--rule-hair) solid var(--color-accent);
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}

.knopf:hover { background: var(--color-accent-hover); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled {
  background: var(--color-rule-dark);
  border-color: var(--color-rule-dark);
  color: var(--color-muted-dark);
  cursor: not-allowed;
}

/* ---------- Footer · Ft6 Letter close ---------- */

.fuss {
  background: var(--color-paper-2);
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
}

.fuss__gruss {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.45;
  max-width: 48ch;
}

.fuss__name {
  display: block;
  margin-top: var(--space-xs);
  font-weight: 600;
}

.fuss__kontakt {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.fuss__kontakt a { color: var(--color-accent-deep); }

.fuss__zeile {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.fuss__zeile a {
  color: var(--color-muted);
  text-decoration-color: var(--color-rule);
  text-underline-offset: 3px;
  white-space: nowrap;
  /* grössere Trefferfläche für Finger, ohne die Zeile zu sprengen */
  padding-block: var(--space-xs);
  margin-block: calc(var(--space-xs) * -1);
}

.fuss__zeile a:hover { color: var(--color-accent-deep); }

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

.rechtstext {
  max-width: 68ch;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
}

.rechtstext h1 {
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-lg);
}

.rechtstext h2 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}

.rechtstext p,
.rechtstext li { color: var(--color-muted); }

.rechtstext p + p { margin-top: var(--space-sm); }

.rechtstext ul { padding-left: 1.2em; }

.rechtstext a { color: var(--color-accent-deep); }

.rechtstext .zurueck {
  display: inline-block;
  padding-block: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-underline-offset: 3px;
}

.platzhalter {
  background: var(--color-paper-2);
  border-left: var(--rule-bold) solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-sm);
}

/* ---------- Lage mit Kartenbild ---------- */
.lage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--page-gutter);
  align-items: center;
}

@media (min-width: 58rem) {
  .lage {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-2xl);
  }
}

.lage__text { max-width: 52ch; }

.lage__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

.lage__bild {
  margin: 0;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.lage__bild a { display: block; }
.lage__bild img { width: 100%; height: auto; }

.lage__bild figcaption {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* ---------- Fragen und Antworten ---------- */
.fragen { margin: var(--space-md) 0 0; max-width: 62ch; }
.fragen dt {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 32;
  margin-top: var(--space-lg);
}
.fragen dd { margin: var(--space-xs) 0 0; color: var(--color-muted); }

/* ---------- Danke ---------- */

.danke {
  min-height: 70svh;
  display: grid;
  align-content: center;
  gap: var(--space-md);
  max-width: 52ch;
  padding: var(--space-2xl) var(--page-gutter);
}

.danke h1 {
  font-size: var(--text-xl);
  font-weight: 400;
}

/* ---------- Kleine Helfer ---------- */

.abstand-md { margin-top: var(--space-md); }

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

.band__titel {
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-md);
}

/* ---------- Weniger Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .knopf:active { transform: none; }
}

/* ---------- Grundriss ---------- */

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

@media (min-width: 58rem) {
  .plan {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
  }
}

.plan__text { max-width: 52ch; }

.plan__bild {
  margin: 0;
  background: var(--color-paper-2);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
}

.plan__bild img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.plan__bild a {
  display: block;
  text-decoration: none;
}

.plan__lupe {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: right;
}

.raeume {
  margin-top: var(--space-lg);
  width: 100%;
  max-width: 34ch;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.raeume th,
.raeume td {
  text-align: left;
  padding: var(--space-xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-weight: 400;
}

.raeume th { color: var(--color-muted); }
.raeume td { text-align: right; font-weight: 600; }
.raeume tr:last-child th,
.raeume tr:last-child td { border-bottom: 0; }

/* ---------- Trenner mit der Berglinie aus dem Logo ---------- */

.trenner {
  display: flex;
  justify-content: center;
  padding-block: var(--space-xl);
  padding-inline: var(--page-gutter);
}

.trenner img {
  width: clamp(7rem, 22vw, 13rem);
  height: auto;
  opacity: 0.5;
}

/* ---------- Jahreszeiten ---------- */

.jahr__bild {
  margin: var(--space-lg) 0 0;
}

.jahr__bild img {
  width: 100%;
  height: clamp(11rem, 26svh, 17rem);
  object-fit: cover;
}

.jahr__bild figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted-dark);
}

/* ---------- Belegungskalender ---------- */

.belegung {
  padding-inline: var(--page-gutter);
  padding-bottom: var(--space-xl);
}

.belegung__titel {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.belegung__stand {
  color: var(--color-muted-dark);
  max-width: 54ch;
  margin-bottom: var(--space-lg);
}

.kalender {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-lg) var(--space-xl);
}

.monat__titel {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-dark);
}

.monat__gitter {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}

.monat__gitter th {
  font-weight: 400;
  color: var(--color-muted-dark);
  padding-bottom: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.monat__gitter td {
  text-align: center;
  padding: 0.28rem 0;
  color: var(--color-ink-dark);
}

.tag--vorbei { color: var(--color-rule-dark); }

.tag--belegt {
  color: var(--color-muted-dark);
  text-decoration: line-through;
  text-decoration-thickness: var(--rule-hair);
  text-decoration-color: var(--color-accent);
}

.tag--frei { color: var(--color-ink-dark); font-weight: 600; }

.legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted-dark);
}

.legende__paar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.legende__bsp {
  display: inline-block;
  min-width: 1.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}

.legende__hinweis {
  color: var(--color-muted-dark);
  flex-basis: 100%;
}

/* ---------- Abschluss: ein Weg zur Buchung ---------- */

.abschluss {
  padding-inline: var(--page-gutter);
  padding-bottom: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule-dark);
  padding-top: var(--space-xl);
}

.knopf--gross {
  display: inline-block;
  font-size: var(--text-base);
  line-height: 1.2;
  padding: var(--space-md) var(--space-xl);
  text-decoration: none;
}

.abschluss__zusatz {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted-dark);
  max-width: 58ch;
}

/* ---------- Gästestimmen ---------- */

.stimmen {
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
}

.stimme {
  margin: 0;
  max-width: 58ch;
}

.stimme p {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.stimme p::before { content: '„'; }
.stimme p::after  { content: '“'; }

.stimme footer {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.stimme cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink);
}

/* Das erste Zitat trägt die Sektion, die beiden anderen stützen */
.stimme--gross {
  border-left: var(--rule-bold) solid var(--color-accent);
  padding-left: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.stimme--gross p {
  font-size: var(--text-lg);
  line-height: 1.35;
  font-variation-settings: 'opsz' 60;
}

.stimmen__paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.stimmen__paar .stimme p {
  font-size: var(--text-md);
  line-height: 1.45;
  font-variation-settings: 'opsz' 28;
}

.stimmen .hinweis { margin-top: var(--space-xl); }

.trenner--schmal { padding-block: var(--space-lg); }