/* =========================================================================
   Urlaub am Waldsee Rieden - Design-System
   Schrift: Cormorant Garamond (Display) + Karla (Text/UI), selbst gehostet
   ========================================================================= */

/* ---------------------------------------------------------------- Schriften */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-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: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Karla-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;
}

/* ---------------------------------------------------------------- Tokens */
:root {
  --forst-900: #16221a;
  --forst-800: #1f3026;
  --forst-700: #2c4436;
  /* Farbwerte sind auf Lesbarkeit geprüft (WCAG-Kontrast gegen den jeweiligen
     Untergrund). --messing gilt für helle Flächen, --messing-hell für dunkle.
     Dunkle Bereiche tauschen die Variablen weiter unten selbst aus. */
  --moos: #496250;          /* 6.0 auf Sand */
  --moos-hell: #7d9484;
  --messing: #82613a;       /* 5.1 auf Sand, 5.6 auf Weiß */
  --messing-hell: #cdb184;  /* 8.0 auf Waldgrün */
  --sand: #f7f3ec;
  --sand-2: #efe8dc;
  --stein: #ddd4c5;
  --tinte: #1c201b;
  --tinte-2: #565a51;       /* 6.4 auf Sand */
  --tinte-3: #63665e;       /* 5.3 auf Sand, 4.8 auf Sand-2 */
  --weiss: #fff;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --raum: clamp(1.25rem, 5vw, 4rem);
  --sektion: clamp(4.5rem, 9vw, 8.5rem);
  --breite: 1320px;
  --breite-text: 44rem;

  --rund: 2px;
  --rund-gross: 4px;
  --schatten: 0 1px 2px rgba(28, 32, 27, .04), 0 12px 32px -12px rgba(28, 32, 27, .12);
  --schatten-hoch: 0 2px 4px rgba(28, 32, 27, .05), 0 28px 60px -20px rgba(28, 32, 27, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

/* Ohne diese Regel bleibt ein Element mit hidden sichtbar, sobald irgendeine
   eigene Regel display setzt: Autoren-CSS schlaegt den Browser-Standard
   [hidden] { display: none } unabhaengig von der Spezifitaet. Das JavaScript
   blendet Magazinkarten, Bildstrecken und den Leer-Hinweis ueber hidden aus. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video { max-width: 100%; display: block; }
figure, blockquote { margin: 0; }
img { height: auto; }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1.25em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--messing); color: var(--weiss); }

:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
  border-radius: var(--rund);
}

/* ---------------------------------------------------------------- Typo-Skala */
.d1 { font-size: clamp(2.85rem, 6.8vw, 6rem); }
.d2 { font-size: clamp(2.3rem, 5vw, 4.1rem); }
.d3 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.d4 { font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.18; }

.label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.label::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--messing);
  flex: none;
}
.label--zentriert { justify-content: center; }
.label--zentriert::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--messing);
  flex: none;
}

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.68;
  color: var(--tinte-2);
  font-weight: 300;
}

.zart { color: var(--tinte-2); }

/* ---------------------------------------------------------------- Layout */
.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--raum);
}
/* Schmalere Textspalte, aber am linken Rand bündig zum übrigen Inhalt.
   Wichtig: Der Container bleibt so breit und mittig wie jeder andere, nur sein
   Inhalt wird begrenzt. Ein schmalerer Container mit margin-inline:0 würde auf
   breiten Bildschirmen am Fensterrand kleben, während alle anderen Abschnitte
   mittig sitzen. */
.wrap--eng > * { max-width: 68rem; }
.wrap--eng.zentriert > * { margin-inline: auto; }
.einstieg { max-width: 46rem; }
.wrap--text { max-width: var(--breite-text); }

.sektion { padding-block: var(--sektion); }
.sektion--klein { padding-block: clamp(3rem, 6vw, 5.5rem); }
.sektion--sand { background: var(--sand-2); }

/* Auf dunklem Grund werden die Farbvariablen umdefiniert. Dadurch stimmt der
   Kontrast in jeder Komponente automatisch, ohne dass jede Regel doppelt
   geschrieben werden muss. */
.sektion--dunkel,
.seitenkopf,
.fusszeile,
.band .wrap,
.hero__innen,
.kurzfassung,
.beitrag__hinweis,
.mobilmenue {
  --messing: var(--messing-hell);
  --tinte: var(--sand);
  --tinte-2: rgba(247, 243, 236, .8);
  --tinte-3: rgba(247, 243, 236, .66);
  --stein: rgba(247, 243, 236, .18);
  --moos: var(--moos-hell);
}
.sektion--dunkel { background: var(--forst-900); color: var(--sand); }
.sektion--dunkel .zart, .sektion--dunkel .lead { color: rgba(247, 243, 236, .8); }

.kopf { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kopf--zentriert { margin-inline: auto; text-align: center; }
.kopf p { margin-top: 1.5rem; }

.raster { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.raster--zwei { grid-template-columns: 1fr; }
@media (min-width: 860px) { .raster--zwei { grid-template-columns: 1fr 1fr; } }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 1.1rem 2.1rem;
  border: 1px solid transparent;
  border-radius: var(--rund);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  text-align: center;
  line-height: 1;
}
.btn svg { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primaer { background: var(--forst-900); color: var(--sand); }
.btn--primaer:hover { background: var(--messing); color: var(--weiss); }

.btn--messing { background: var(--messing); color: var(--weiss); }
.btn--messing:hover { background: var(--forst-900); color: var(--sand); }

.btn--linie { border-color: currentColor; color: inherit; }
.btn--linie:hover { background: var(--forst-900); color: var(--sand); border-color: var(--forst-900); }

/* Über Fotos trägt eine reine Kontur nicht: der Text steht dann direkt auf dem
   Bild. Diese Buttons bekommen deshalb eine abgedunkelte Fläche. */
.band .btn--linie,
.video .btn--linie {
  background: rgba(8, 13, 10, .55);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.band .btn--linie:hover,
.video .btn--linie:hover {
  background: var(--sand);
  color: var(--forst-900);
  border-color: var(--sand);
}

.sektion--dunkel .btn--linie { color: var(--sand); }
.sektion--dunkel .btn--linie:hover { background: var(--sand); color: var(--forst-900); border-color: var(--sand); }

.btn--hell { background: var(--sand); color: var(--forst-900); }
.btn--hell:hover { background: var(--messing); color: var(--weiss); }

.btn-reihe { display: flex; flex-wrap: wrap; gap: 1rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--stein);
  transition: border-color .35s var(--ease), color .35s var(--ease), gap .35s var(--ease);
}
.textlink:hover { border-color: var(--messing); color: var(--messing); gap: .85rem; }
.textlink svg { width: .85em; height: .85em; }

/* ---------------------------------------------------------------- Kopfzeile */
.kopfzeile {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
  padding-block: clamp(.9rem, 1.6vw, 1.35rem);
}
.kopfzeile__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--raum);
}
.kopfzeile--transparent { color: var(--weiss); }
/* Die Kopfzeile steht über dem Bild und braucht ihren eigenen Verlauf. Er ist
   auf die Höhe der Leiste begrenzt, damit das Motiv darunter hell bleibt. */
.kopfzeile--transparent::before {
  content: '';
  position: absolute;
  inset: -1px 0 -3.5rem;
  background: linear-gradient(to bottom,
    rgba(10, 17, 12, .82) 0%,
    rgba(10, 17, 12, .68) 42%,
    rgba(10, 17, 12, .3) 76%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.kopfzeile--fest {
  background: rgba(247, 243, 236, .95);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  color: var(--tinte);
  box-shadow: 0 1px 0 rgba(28, 32, 27, .07);
}
.kopfzeile--fest::before { opacity: 0; }
.kopfzeile--versteckt { transform: translateY(-102%); }

.marke { display: flex; align-items: center; gap: .8rem; flex: none; }
.marke__zeichen { width: 2.3rem; height: 2.3rem; flex: none; }
.marke__text { display: flex; flex-direction: column; line-height: 1.05; }
.marke__name {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: .005em;
}
.marke__zusatz {
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: .22rem;
}

.navi { display: flex; align-items: center; gap: clamp(.85rem, 1.5vw, 1.9rem); }
.navi__link {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  position: relative;
  padding-block: .4rem;
  white-space: nowrap;
}
.navi__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.navi__link:hover::after, .navi__link[aria-current]::after { transform: scaleX(1); }

.navi__gruppe { position: relative; }
.navi__klapp {
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 15rem;
  background: var(--weiss);
  color: var(--tinte);
  padding: .6rem;
  box-shadow: var(--schatten-hoch);
  border-radius: var(--rund-gross);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.navi__gruppe:hover .navi__klapp,
.navi__gruppe:focus-within .navi__klapp { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.navi__klapp a {
  display: block;
  padding: .7rem 1rem;
  font-size: .84rem;
  letter-spacing: .02em;
  border-radius: var(--rund);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.navi__klapp a:hover { background: var(--sand-2); color: var(--messing); }

.kopfzeile__aktionen { display: flex; align-items: center; gap: 1rem; flex: none; }
.kopfzeile__tel {
  font-size: .82rem;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.kopfzeile__tel svg { width: .95em; height: .95em; opacity: .75; }
.kopfzeile .btn { padding: .85rem 1.6rem; font-size: .72rem; }
.kopfzeile--transparent .btn--primaer { background: var(--weiss); color: var(--forst-900); }
.kopfzeile--transparent .btn--primaer:hover { background: var(--messing); color: var(--weiss); }

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: .55rem; right: .55rem;
  height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.burger span:nth-child(1) { top: .95rem; }
.burger span:nth-child(2) { top: 1.35rem; }
.burger span:nth-child(3) { top: 1.75rem; }
body.menue-offen .burger span:nth-child(1) { transform: translateY(.4rem) rotate(45deg); }
body.menue-offen .burger span:nth-child(2) { opacity: 0; }
body.menue-offen .burger span:nth-child(3) { transform: translateY(-.4rem) rotate(-45deg); }

@media (max-width: 1439px) { .kopfzeile__tel { display: none; } }
@media (max-width: 1150px) {
  .navi { display: none; }
  .burger { display: block; }
}
@media (max-width: 460px) {
  .kopfzeile__aktionen .btn { display: none; }
  .marke__zusatz { display: none; }
}

/* Mobiles Menü */
.mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--forst-900);
  color: var(--sand);
  padding: 7rem var(--raum) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
body.menue-offen { overflow: hidden; }
body.menue-offen .mobilmenue { opacity: 1; visibility: visible; transform: none; }
.mobilmenue a {
  font-family: var(--serif);
  font-size: 1.85rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(247, 243, 236, .1);
}
.mobilmenue a.klein { font-family: var(--sans); font-size: .95rem; opacity: .75; border: 0; padding: .3rem 0 .3rem 1rem; }
.mobilmenue__fuss { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: min(100svh, 62rem);
  display: flex;
  align-items: flex-end;
  color: var(--weiss);
  overflow: hidden;
  isolation: isolate;
}
.hero--kurz { min-height: min(74svh, 44rem); }
.hero--seite { min-height: min(62svh, 36rem); }

.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Nur so viel Abdunklung, dass das Bild Tiefe bekommt und die Kopfzeile
     darauf steht. Für die Lesbarkeit sorgt die Textkarte, nicht das Overlay. */
  background:
    linear-gradient(to top, rgba(8, 13, 10, .5) 0%, rgba(8, 13, 10, .2) 34%, transparent 66%),
    linear-gradient(to bottom, rgba(8, 13, 10, .48) 0%, rgba(8, 13, 10, .12) 18%, transparent 32%);
}
.hero__innen {
  position: relative;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding: clamp(6rem, 12vw, 9rem) var(--raum) clamp(3rem, 6vw, 5rem);
}
.hero__karte {
  max-width: 49rem;
  padding: clamp(1.75rem, 3.4vw, 3rem);
  border-radius: 3px;
  background: rgba(10, 17, 12, .74);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}
.hero h1 { color: var(--weiss); max-width: 21ch; }
.hero__text {
  max-width: 40rem;
  margin-top: 1.5rem;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  color: rgba(255, 255, 255, .94);
  font-weight: 400;
}
.hero .btn-reihe { margin-top: 2rem; }
.hero .label { color: var(--messing-hell); }
.hero .label::before, .hero .label::after { background: rgba(255, 255, 255, .6); }

.hero__leiste {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.75rem;
  font-size: .82rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .82);
}
.hero__leiste span { display: flex; align-items: center; gap: .6rem; }
.hero__leiste svg { width: 1.05em; height: 1.05em; color: var(--messing-hell); flex: none; }
.hero__leiste { color: rgba(255, 255, 255, .92); }

.scrollhinweis {
  position: absolute;
  right: var(--raum);
  bottom: clamp(3rem, 6vw, 5rem);
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  writing-mode: vertical-rl;
}
.scrollhinweis::after {
  content: '';
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(rgba(255, 255, 255, .6), transparent);
  animation: scrollpuls 2.4s var(--ease) infinite;
}
@keyframes scrollpuls { 0%, 100% { opacity: .35; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 900px) { .scrollhinweis { display: none; } }

/* Seitenkopf ohne Bild */
.seitenkopf {
  padding: clamp(9rem, 16vw, 13rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--forst-900);
  color: var(--sand);
}
.seitenkopf h1 { color: var(--sand); }
.seitenkopf .lead { color: rgba(247, 243, 236, .8); margin-top: 1.5rem; max-width: 44rem; }

/* ---------------------------------------------------------------- Brotkrumen */
.krumen {
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--tinte-3);
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--stein);
}
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.krumen li { display: flex; align-items: center; gap: .5rem; }
.krumen li:not(:last-child)::after { content: '/'; opacity: .45; }
.krumen a:hover { color: var(--messing); }
.krumen [aria-current] { color: var(--tinte); }
/* Die Brotkrumen direkt unter dem dunklen Seitenkopf sitzen auf demselben
   Untergrund, sonst stünde heller Text auf hellem Grund. */
.krumen--dunkel {
  background: var(--forst-900);
  border-color: rgba(247, 243, 236, .18);
  color: rgba(247, 243, 236, .72);
}
.krumen--dunkel a:hover { color: var(--messing-hell); }
.krumen--dunkel [aria-current] { color: var(--sand); }

/* ---------------------------------------------------------------- Hauskarte */
.hauskarte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border-radius: var(--rund-gross);
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.hauskarte:hover { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }
.hauskarte__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-2); }
.hauskarte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.hauskarte:hover .hauskarte__bild img { transform: scale(1.055); }
.hauskarte__stern {
  position: absolute;
  top: 1rem; left: 1rem;
  background: rgba(247, 243, 236, .93);
  color: var(--forst-900);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .8rem;
  border-radius: var(--rund);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hauskarte__stern svg { width: .85em; height: .85em; color: var(--messing); }
.hauskarte__inhalt { padding: clamp(1.6rem, 2.4vw, 2.2rem); display: flex; flex-direction: column; flex: 1; }
.hauskarte__inhalt h3 { font-size: clamp(1.6rem, 2.1vw, 2rem); }
.hauskarte__unter { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--messing); margin-top: .55rem; }
.hauskarte__fakten {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--stein);
  display: grid;
  gap: .7rem;
  font-size: .92rem;
  color: var(--tinte-2);
}
.hauskarte__fakten li { display: flex; align-items: flex-start; gap: .7rem; }
.hauskarte__fakten svg { width: 1.05em; height: 1.05em; margin-top: .38em; color: var(--moos); flex: none; }
.hauskarte__fuss {
  margin-top: auto;
  padding-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.preis { display: flex; flex-direction: column; line-height: 1.2; }
.preis__wert { font-family: var(--serif); font-size: 1.85rem; font-variant-numeric: lining-nums; }
.preis__label { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinte-3); }

/* ---------------------------------------------------------------- Wechselblöcke */
.wechsel { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .wechsel { grid-template-columns: 1fr 1fr; }
  .wechsel--bild-rechts .wechsel__text { order: -1; }
  .wechsel--weit { grid-template-columns: 1.15fr 1fr; }
}
.wechsel__bild { position: relative; }
.wechsel__bild img { width: 100%; border-radius: var(--rund-gross); }
.wechsel__bild--versetzt::before {
  content: '';
  position: absolute;
  inset: auto -1rem -1rem auto;
  width: 55%;
  height: 55%;
  border: 1px solid rgba(162, 129, 79, .5);
  border-radius: var(--rund-gross);
  z-index: -1;
}
.wechsel__text h2 { margin-bottom: 1.75rem; }

/* ---------------------------------------------------------------- Merkmale */
.merkmal { display: flex; gap: 1.15rem; }
.merkmal__icon {
  width: 2.9rem; height: 2.9rem;
  flex: none;
  border: 1px solid var(--stein);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--messing);
}
.merkmal__icon svg { width: 1.3rem; height: 1.3rem; }
.merkmal h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4; }
.merkmal p { margin: .55rem 0 0; font-size: .95rem; color: var(--tinte-2); line-height: 1.62; }
.sektion--dunkel .merkmal p { color: rgba(247, 243, 236, .8); }

/* ---------------------------------------------------------------- Zahlen */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.zahl { text-align: center; }
.zahl__wert {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  line-height: 1;
  color: var(--messing);
  font-variant-numeric: lining-nums;
}
.zahl__label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .8rem; color: var(--tinte-2); }


/* ---------------------------------------------------------------- Stimmen */
.stimme {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--weiss);
  padding: clamp(1.9rem, 3vw, 2.6rem);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
  height: 100%;
}
.stimme__sterne { display: flex; gap: .22rem; color: var(--messing); margin-bottom: 1.4rem; }
.stimme__sterne svg { width: .95rem; height: .95rem; }
.stimme blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.52;
  color: var(--tinte);
  font-weight: 300;
}
.stimme__wer { margin-top: auto; padding-top: 1.75rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); }
.stimme__wer strong { display: block; color: var(--tinte); font-weight: 600; letter-spacing: .1em; margin-bottom: .3rem; }

/* ---------------------------------------------------------------- Galerie
   Gleichmäßiges Drei-Spalten-Raster. Die Zeilenhöhe ergibt sich aus den
   Standardkacheln (3:2); eine große Kachel spannt zwei Spalten und zwei Zeilen
   und füllt den Block dadurch lückenlos aus. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.2vw, 1rem);
}
.galerie__bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--rund-gross);
  background: var(--sand-2);
  aspect-ratio: 3 / 2;
}
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.galerie__bild:hover img { transform: scale(1.06); }

/* Mosaik: erste Kachel doppelt so groß. Funktioniert lückenlos, wenn die
   Bildanzahl 3, 6, 9, ... beträgt.
   Das Bild darin liegt absolut, damit es die Kachelhöhe nicht bestimmt. Sonst
   zieht ein Hochformat die Kachel auf seine natürliche Höhe, während die
   Nachbarkacheln bei ihrer Zeilenhöhe bleiben, und es entstehen Lücken. */
.galerie--mosaik > .galerie__bild:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
  min-height: 0;
}
.galerie--mosaik > .galerie__bild:first-child img {
  position: absolute;
  inset: 0;
}

@media (max-width: 780px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie--mosaik > .galerie__bild:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 3 / 2; }
}

button.galerie__bild { border: 0; padding: 0; cursor: zoom-in; font: inherit; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(11, 18, 13, .96);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox[data-offen] { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 82svh; width: auto; border-radius: var(--rund-gross); }
.lightbox__text {
  color: rgba(247, 243, 236, .88);
  font-size: .85rem;
  text-align: center;
  margin-top: 1.25rem;
  max-width: 44rem;
}
.lightbox__zu, .lightbox__pfeil {
  position: absolute;
  background: rgba(247, 243, 236, .1);
  border: 1px solid rgba(247, 243, 236, .22);
  color: var(--sand);
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.lightbox__zu:hover, .lightbox__pfeil:hover { background: rgba(247, 243, 236, .22); }
.lightbox__zu { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__pfeil svg, .lightbox__zu svg { width: 1.15rem; height: 1.15rem; }
.lightbox__pfeil--zurueck { left: clamp(.5rem, 2vw, 2rem); }
.lightbox__pfeil--vor { right: clamp(.5rem, 2vw, 2rem); }
.lightbox__zaehler { position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%); font-size: .78rem; letter-spacing: .16em; color: rgba(247, 243, 236, .6); }

/* ---------------------------------------------------------------- Akkordeon */
.akkordeon { border-top: 1px solid var(--stein); }
.akkordeon details { border-bottom: 1px solid var(--stein); }
.akkordeon summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 3rem 1.5rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.35;
  transition: color .3s var(--ease);
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary:hover { color: var(--messing); }
.akkordeon summary::after {
  content: '';
  position: absolute;
  right: .35rem;
  top: 50%;
  width: .72rem; height: .72rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .35s var(--ease);
}
.akkordeon details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.akkordeon__inhalt { padding: 0 3rem 1.75rem 0; color: var(--tinte-2); max-width: 52rem; }
.akkordeon details[open] .akkordeon__inhalt { animation: aufklappen .4s var(--ease); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Ausstattungsliste */
.ausstattung { display: grid; gap: clamp(2rem, 4vw, 3.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ausstattung h3 {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--messing);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--stein);
  margin-bottom: 1.25rem;
}
.ausstattung ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: .95rem; color: var(--tinte-2); }
.ausstattung li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.5; }
.ausstattung li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--moos-hell); margin-top: .62em; flex: none; }

/* ---------------------------------------------------------------- Infoblock */
.infoblock { display: grid; gap: 1px; background: var(--stein); border: 1px solid var(--stein); border-radius: var(--rund-gross); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.infoblock > div { background: var(--sand); padding: clamp(1.5rem, 2.5vw, 2rem); }
.infoblock dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: .55rem; }
.infoblock dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.infoblock--weiss > div { background: var(--weiss); }

/* ---------------------------------------------------------------- Entfernungen */
.entfernungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.entfernungen li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--stein);
  font-size: .97rem;
}
/* Zahlenwerte stehen in der Grotesk, nicht in der Display-Serif: Cormorant
   setzt Ziffern als Mediävalziffern mit Ober- und Unterlängen, was bei kleinen
   Größen unruhig wirkt. Messing bleibt den Auszeichnungen vorbehalten, Werte
   bekommen die normale Textfarbe. */
.entfernungen li span:last-child {
  color: var(--tinte);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.entfernungen li span:first-child { color: var(--tinte-2); }


/* ---------------------------------------------------------------- Magazin */
.artikelkarte { display: flex; flex-direction: column; height: 100%; }
.artikelkarte__bild { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--rund-gross); background: var(--sand-2); margin-bottom: 1.4rem; }
.artikelkarte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.artikelkarte:hover .artikelkarte__bild img { transform: scale(1.055); }
.artikelkarte__meta { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--messing); margin-bottom: .8rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.artikelkarte__meta time { color: var(--tinte-3); }
.artikelkarte h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; transition: color .3s var(--ease); }
.artikelkarte:hover h3 { color: var(--messing); }
.artikelkarte p { margin: .85rem 0 0; font-size: .95rem; color: var(--tinte-2); line-height: 1.62; }
.artikelkarte__mehr { margin-top: auto; padding-top: 1.25rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-3); }

.artikelkarte--quer { flex-direction: row; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.artikelkarte--quer .artikelkarte__bild { flex: 0 0 42%; margin-bottom: 0; aspect-ratio: 4 / 3; }
@media (max-width: 720px) { .artikelkarte--quer { flex-direction: column; } .artikelkarte--quer .artikelkarte__bild { flex: none; width: 100%; margin-bottom: 1.4rem; } }

.filterleiste { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.filterleiste a {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .65rem 1.15rem;
  border: 1px solid var(--stein);
  border-radius: 100px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filterleiste a:hover { border-color: var(--forst-900); }
.filterleiste a[aria-current] { background: var(--forst-900); color: var(--sand); border-color: var(--forst-900); }

/* Artikeltext */
.artikeltext { font-size: 1.09rem; line-height: 1.82; color: var(--tinte-2); }
.artikeltext > h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  color: var(--tinte);
  margin: clamp(2.75rem, 5vw, 3.75rem) 0 1.25rem;
}
.artikeltext > h3 {
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--tinte);
  letter-spacing: 0;
  line-height: 1.45;
  margin: 2.25rem 0 .9rem;
}
.artikeltext > h2:first-child, .artikeltext > h3:first-child { margin-top: 0; }
.artikeltext ul { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .65rem; }
.artikeltext ul li { display: flex; gap: .8rem; align-items: flex-start; }
.artikeltext ul li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--messing); margin-top: .72em; flex: none; }
.artikeltext a { color: var(--forst-700); border-bottom: 1px solid var(--stein); transition: border-color .3s var(--ease), color .3s var(--ease); }
.artikeltext a:hover { color: var(--messing); border-color: var(--messing); }
.artikeltext > p:first-of-type { font-size: 1.22rem; line-height: 1.68; color: var(--tinte); font-weight: 300; }

.autorbox {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--weiss);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
}
.autorbox__bild { width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; flex: none; background: var(--sand-2); }
.autorbox__bild img { width: 100%; height: 100%; object-fit: cover; }
.autorbox h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; }
.autorbox p { margin: .5rem 0 0; font-size: .93rem; color: var(--tinte-2); line-height: 1.6; }

/* ---------------------------------------------------------------- Formular */
.formular { display: grid; gap: 1.35rem; }
.feld { display: grid; gap: .55rem; }
.feld--zwei { grid-template-columns: 1fr 1fr; gap: 1.35rem; display: grid; }
@media (max-width: 600px) { .feld--zwei { grid-template-columns: 1fr; } }
.feld label { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--tinte-2); }
.feld input, .feld textarea, .feld select {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--stein);
  border-radius: var(--rund);
  padding: .95rem 1.1rem;
  width: 100%;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.feld textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--messing);
  box-shadow: 0 0 0 3px rgba(162, 129, 79, .13);
}
.feld--pflicht label::after { content: ' *'; color: var(--messing); }
.zustimmung { display: flex; gap: .8rem; align-items: flex-start; font-size: .88rem; color: var(--tinte-2); line-height: 1.55; }
.zustimmung input { width: 1.1rem; height: 1.1rem; margin-top: .3rem; flex: none; accent-color: var(--messing); }
.formularhinweis {
  padding: 1rem 1.15rem;
  background: var(--sand-2);
  border-left: 2px solid var(--messing);
  font-size: .88rem;
  color: var(--tinte-2);
}

/* Rückmeldung nach dem Absenden */
.formularmeldung {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid;
  font-size: .95rem;
  line-height: 1.55;
}
.formularmeldung--gut { background: var(--sand-2); border-color: var(--moos); color: var(--tinte); }
.formularmeldung--schlecht { background: #fbf0ec; border-color: #a4472c; color: #6d2a17; }

/* Bot-Falle: aus dem Blickfeld geschoben statt display:none, weil manche Bots
   ausgeblendete Felder erkennen und dann auslassen. aria-hidden und tabindex
   halten das Feld von Screenreadern und der Tab-Reihenfolge fern. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- Kontaktwege */
.kontaktweg {
  display: flex;
  gap: 1.15rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--weiss);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
a.kontaktweg:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.kontaktweg__icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sand-2); display: grid; place-items: center; color: var(--messing); flex: none; }
.kontaktweg__icon svg { width: 1.2rem; height: 1.2rem; }
.kontaktweg h3 { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-3); }
.kontaktweg__wert { font-family: var(--serif); font-size: 1.35rem; margin-top: .35rem; line-height: 1.25; }
.kontaktweg p { margin: .4rem 0 0; font-size: .86rem; color: var(--tinte-2); line-height: 1.5; }

/* ---------------------------------------------------------------- Bandwerbung */
.band {
  position: relative;
  color: var(--weiss);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.band__bild { position: absolute; inset: 0; z-index: -2; }
.band__bild img { width: 100%; height: 100%; object-fit: cover; }
.band__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 13, 10, .84), rgba(8, 13, 10, .72) 55%, rgba(8, 13, 10, .8)),
    rgba(8, 13, 10, .2);
}
.band .wrap { padding-block: clamp(5rem, 10vw, 8rem); position: relative; }
.band h2 { color: var(--weiss); max-width: 22ch; margin-inline: auto; text-shadow: 0 2px 24px rgba(8, 13, 10, .5); }
.band p { color: #fff; max-width: 40rem; margin: 1.5rem auto 0; text-shadow: 0 1px 14px rgba(8, 13, 10, .5); }
.band .btn-reihe { justify-content: center; margin-top: 2.5rem; }
.band__neben { margin-top: 1.75rem; font-size: .92rem; color: rgba(255, 255, 255, .82); }
.band__neben a { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.band__neben a:hover { border-color: var(--messing-hell); color: var(--messing-hell); }

/* ---------------------------------------------------------------- Fußzeile */
.fusszeile { background: var(--forst-900); color: rgba(247, 243, 236, .82); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; font-size: .92rem; }
.fusszeile a { transition: color .3s var(--ease); }
.fusszeile a:hover { color: var(--messing-hell); }
.fusszeile__oben { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(247, 243, 236, .13); }
.fusszeile__marke { max-width: 22rem; }
.fusszeile .marke__name, .fusszeile h3 { color: var(--sand); }
.fusszeile__text { margin-top: 1.4rem; line-height: 1.68; font-size: .92rem; }
.fusszeile h3 { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--messing-hell); margin-bottom: 1.35rem; }
.fusszeile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.fusszeile__unten { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-top: 2rem; font-size: .8rem; color: rgba(247, 243, 236, .68); }
.fusszeile__rechtlich { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ---------------------------------------------------------------- Animation */
/* Nur animieren, wenn JavaScript laeuft: die Klasse .sichtbar wird ausschliesslich
   per Skript gesetzt. Ohne das html.js davor bliebe jeder Inhalt durchsichtig,
   sobald site.js nicht laedt, und die Seite waere leer. */
html.js .auf { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
html.js .auf.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .auf { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Hilfsklassen */
.nur-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; top: -100%; left: 1rem; z-index: 200;
  background: var(--forst-900); color: var(--sand);
  padding: .85rem 1.5rem; border-radius: var(--rund);
  font-size: .82rem;
}
.skiplink:focus { top: 1rem; }

.trenner { height: 1px; background: var(--stein); border: 0; margin: 0; }

/* Symbol im Fließtext auf Schriftgröße begrenzen */
.inline-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.12em;
  color: var(--messing);
  margin-right: .3em;
}

/* Bild füllt seinen Rahmen (für Kacheln mit fester Seitenverhältnis-Box) */
.objekt-fuellen, .galerie__bild > img, .artikelkarte__bild > img,
[style*="aspect-ratio"] > img { width: 100%; height: 100%; object-fit: cover; }

/* Vergleichstabelle */
.vergleich { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 40rem; }
.vergleich th, .vergleich td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--stein); vertical-align: middle; }
.vergleich thead th {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 400;
  border-bottom: 1px solid var(--forst-900);
  padding-bottom: 1.25rem;
}
.vergleich tbody th { font-family: var(--sans); font-weight: 500; color: var(--tinte-2); font-size: .88rem; }
.vergleich td { color: var(--tinte); }
.vergleich .ja { width: 1.1rem; height: 1.1rem; color: var(--moos); }
.vergleich .nein { color: var(--tinte-3); font-size: .82rem; }
.vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td { border-bottom: 0; }

/* Leistungsliste in Angeboten */
.ausstattung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ausstattung-liste li { display: flex; gap: .8rem; align-items: flex-start; font-size: .98rem; color: var(--tinte-2); line-height: 1.55; }
.ausstattung-liste svg { width: 1.05rem; height: 1.05rem; color: var(--messing); flex: none; margin-top: .3em; }

/* Nummerierte Route */
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: schritt; }
.route li { display: flex; gap: 1rem; align-items: flex-start; font-size: .98rem; line-height: 1.55; }
.route__nr {
  width: 1.9rem; height: 1.9rem;
  flex: none;
  border: 1px solid var(--stein);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .78rem;
  color: var(--messing);
  margin-top: .1rem;
}
.mt-l { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mt-m { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.zentriert { text-align: center; }

/* ---------------------------------------------------------------- Video
   Vorschaubild mit Abspielknopf. Das YouTube-Fenster ersetzt den Knopf
   erst nach dem Klick, vorher geht kein Aufruf an Google. */
.video {
  position: relative;
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: var(--forst-900);
  aspect-ratio: 16 / 9;
}
.video__flaeche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}
.video__flaeche img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .4s var(--ease); }
.video__flaeche::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 15, 11, .78) 0%, rgba(9, 15, 11, .1) 45%, rgba(9, 15, 11, .22) 100%);
  transition: opacity .4s var(--ease);
}
.video__flaeche:hover img { transform: scale(1.04); }
.video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(4rem, 7vw, 5.5rem);
  height: clamp(4rem, 7vw, 5.5rem);
  border-radius: 50%;
  background: rgba(247, 243, 236, .94);
  color: var(--forst-900);
  display: grid;
  place-items: center;
  z-index: 2;
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.video__play svg { width: 42%; height: 42%; margin-left: 6%; }
.video__flaeche:hover .video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--weiss); }
.video__label {
  position: absolute;
  left: clamp(1.1rem, 2.5vw, 2rem);
  bottom: clamp(1.1rem, 2.5vw, 1.75rem);
  right: clamp(1.1rem, 2.5vw, 2rem);
  z-index: 2;
  text-align: left;
  color: var(--weiss);
}
.video__titel {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.2;
}
.video__dauer {
  display: block;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
  margin-top: .5rem;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--breit { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .video--breit { aspect-ratio: 16 / 9; } }

/* ---------------------------------------------------------------- Buchung
   Rahmen um das Lodgify-Widget. Das Widget bringt eigenes CSS mit, deshalb
   wird hier nur der Container gestaltet und die Ränder werden angeglichen. */
.buchung {
  background: var(--weiss);
  border: 1px solid var(--stein);
  border-radius: var(--rund-gross);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--schatten);
}
.buchung__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--stein);
}
.buchung__kopf .label { margin: 0; }
.buchung__preis { margin: 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); }
.buchung__preis span { font-family: var(--serif); font-size: 1.75rem; letter-spacing: 0; text-transform: none; color: var(--tinte); margin-right: .35rem; }
.buchung__widget { min-height: 12rem; }
.buchung__widget:empty::after {
  content: 'Buchungskalender wird geladen …';
  display: grid;
  place-items: center;
  height: 12rem;
  color: var(--tinte-3);
  font-size: .9rem;
}
.buchung__vorteile { list-style: none; margin: 1.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--stein); display: grid; gap: .7rem; }
.buchung__vorteile li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--tinte-2); line-height: 1.5; }
.buchung__vorteile svg { width: 1rem; height: 1rem; color: var(--moos); flex: none; margin-top: .28em; }
.buchung__hilfe { margin: 1.25rem 0 0; font-size: .86rem; color: var(--tinte-3); }
.buchung__hilfe a { color: var(--forst-700); border-bottom: 1px solid var(--stein); }
.buchung__hilfe a:hover { color: var(--messing); border-color: var(--messing); }

/* Lodgify-Widget an die Umgebung angleichen */
.buchung__widget .lodgify-book-now-box,
.buchung__widget [class*='BookNowBox'] { font-family: var(--sans) !important; box-shadow: none !important; }
.buchung__widget input, .buchung__widget button { font-family: var(--sans) !important; }

/* Klebende Buchungsspalte auf großen Bildschirmen.
   min-width:0 verhindert, dass das Lodgify-Widget die Spalte auf schmalen
   Bildschirmen breiter macht als den Bildschirm selbst. */
.hausraster { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.hausraster > * { min-width: 0; }
.buchung__widget { overflow-x: auto; }
@media (min-width: 1000px) { .hausraster { grid-template-columns: minmax(0, 1fr) 24rem; } }
.hausraster__seitlich { position: sticky; top: 6.5rem; }

/* Buchungsleiste auf Übersichtsseiten */
.buchleiste { background: var(--sand-2); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.buchleiste__innen { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; justify-content: space-between; }
.buchleiste__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------------------------------------------------------------- Siegelreihe */
.siegelreihe { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.siegel { text-align: center; }
.siegel__sterne { display: flex; justify-content: center; gap: .2rem; color: var(--messing); margin-bottom: 1rem; }
.siegel__sterne svg { width: 1.05rem; height: 1.05rem; }
.siegel__icon {
  width: 2.9rem; height: 2.9rem;
  margin: 0 auto 1rem;
  border: 1px solid var(--stein);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--messing);
}
.siegel__icon svg { width: 1.3rem; height: 1.3rem; }
.siegel__titel { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .7rem; }
.siegel__text { font-size: .92rem; color: var(--tinte-2); line-height: 1.6; margin: 0 0 1rem; }
.siegel .textlink { font-size: .7rem; }


/* Hero über hellen Motiven: Abdunklung nur dort, wo Text steht */
/* Helle, unruhige Hero-Motive brauchen mehr Abdeckung im Textbereich, sonst
   steht weiße Schrift auf hellem Holz oder Himmel. Die Werte sind so gewählt,
   dass die gemessene Leuchtdichte unter dem Text unter 0,18 bleibt; das
   entspricht Kontrast 4,5 gegen Weiß. Rechts oben bleibt das Bild offen. */
.hero--hell .hero__bild::after {
  background:
    linear-gradient(to top, rgba(9, 15, 11, .56) 0%, rgba(9, 15, 11, .26) 36%, transparent 68%),
    linear-gradient(to bottom, rgba(9, 15, 11, .52) 0%, rgba(9, 15, 11, .14) 20%, transparent 34%);
}

/* Lodgify-Widget in die Umgebung einfügen.
   Das Widget bringt eigenen Rahmen, Schatten und Innenabstand mit; beides wird
   entfernt, damit es nicht als zweiter Kasten in unserer Box sitzt.
   Die Klassen `primary` und `secondary` vergibt Lodgify stabil, die
   css-Hashes daneben nicht: deshalb wird nur über Struktur und diese
   Klassennamen gestaltet. */
.buchung__stern { display: flex; gap: .18rem; color: var(--messing); margin: 0; }
.buchung__stern svg { width: .95rem; height: .95rem; }

.buchung__widget > div > div {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.buchung__widget .primary {
  background: var(--forst-900) !important;
  border-color: var(--forst-900) !important;
  color: var(--sand) !important;
  border-radius: var(--rund) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-size: .78rem !important;
  transition: background .3s var(--ease) !important;
}
.buchung__widget .primary:hover {
  background: var(--messing) !important;
  border-color: var(--messing) !important;
}
.buchung__widget input, .buchung__widget label, .buchung__widget p, .buchung__widget span {
  font-family: var(--sans) !important;
}

/* ---------------------------------------------------------------- Magazinbeitrag
   Ein Raster für die ganze Seite: das Inhaltsverzeichnis steht links neben der
   Überschrift und läuft beim Scrollen mit. Die Textspalte hat dieselbe Breite
   wie überall im Fließtext. */
.beitrag { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.beitrag__raster {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--raum);
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.beitrag__inhalt { min-width: 0; }
.beitrag__navi--leer { display: none; }

@media (min-width: 1080px) {
  /* Zwei Spalten: schmales Verzeichnis, breiter Inhalt. Der Fließtext selbst
     bleibt in Lesebreite, Bilder, Kästen und Karten dürfen die Spalte
     ausnutzen. Eine dritte, leere Spalte hätte die Seite halb leer wirken
     lassen. */
  .beitrag__raster {
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .beitrag__navi {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }
  .beitrag__inhalt { grid-column: 2; grid-row: 1; }
  .beitrag__navi--leer { display: block; }
}
.beitrag__inhalt { max-width: 54rem; }
.beitrag__inhalt .artikeltext { max-width: 42rem; }

.beitrag__kopf { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.beitrag__kategorie {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: 1.1rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.beitrag__kategorie:hover { border-color: var(--messing); }
.beitrag__kopf h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
.beitrag__einleitung {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--tinte-2);
  font-weight: 300;
  margin: 1.5rem 0 0;
}
.beitrag__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--stein);
}
.beitrag__autor { display: flex; align-items: center; gap: .85rem; }
.beitrag__autorbild {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--sand-2);
}
.beitrag__autorbild img { width: 100%; height: 100%; object-fit: cover; }
.beitrag__autorname { display: block; font-size: .92rem; font-weight: 600; }
.beitrag__autorrolle { display: block; font-size: .78rem; color: var(--tinte-3); margin-top: .12rem; }
.beitrag__autor:hover .beitrag__autorname { color: var(--messing); }
.beitrag__daten { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .8rem; color: var(--tinte-3); letter-spacing: .04em; }
.beitrag__daten span { display: flex; align-items: center; gap: .4rem; }
.beitrag__daten svg { width: .95em; height: .95em; }

.beitrag__bild { margin: 0 0 clamp(2rem, 4vw, 2.75rem); }
.beitrag__bild img { width: 100%; border-radius: var(--rund-gross); aspect-ratio: 16 / 9; object-fit: cover; }
.beitrag__bild figcaption { font-size: .78rem; color: var(--tinte-3); margin-top: .75rem; line-height: 1.5; }

.beitrag__navi { font-size: .88rem; }
/* Inhaltsverzeichnis: eigene Fläche mit Messing-Ziffern statt bloßer Liste.
   Der aktive Abschnitt wird beim Scrollen mitgeführt. */
.beitrag__navi {
  background: var(--sand-2);
  border: 1px solid var(--stein);
  border-radius: var(--rund-gross);
  padding: 1.4rem 1.5rem 1.6rem;
}
.beitrag__navititel {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 1.1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--stein);
}
.beitrag__navititel::before {
  content: '';
  width: 1.4rem;
  height: 1px;
  background: var(--messing);
  flex: none;
}
.beitrag__navi ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; counter-reset: kapitel; }
.beitrag__navi li { counter-increment: kapitel; }
.beitrag__navi a {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  color: var(--tinte-2);
  font-size: .92rem;
  line-height: 1.45;
  padding: .5rem .6rem .5rem .5rem;
  margin-inline: -.5rem;
  border-radius: 3px;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.beitrag__navi a::before {
  content: counter(kapitel);
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--stein);
  background: var(--sand);
  color: var(--messing);
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.beitrag__navi a:hover { color: var(--tinte); background: rgba(130, 97, 58, .08); }
.beitrag__navi a:hover::before { border-color: var(--messing); }
.beitrag__navi a.aktiv { color: var(--tinte); font-weight: 500; background: rgba(130, 97, 58, .1); }
.beitrag__navi a.aktiv::before { background: var(--messing); color: var(--sand); border-color: var(--messing); }

@media (max-width: 1079px) { .beitrag__navi { order: 2; } }

.kurzfassung {
  background: var(--forst-900);
  color: var(--sand);
  border-radius: var(--rund-gross);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.kurzfassung__titel {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--messing-hell);
  margin: 0 0 1.25rem;
}
.kurzfassung__titel svg { width: 1rem; height: 1rem; }
.kurzfassung ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.kurzfassung li {
  display: flex;
  gap: .8rem;
  font-size: .99rem;
  line-height: 1.62;
  color: rgba(247, 243, 236, .93);
}
.kurzfassung li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--messing-hell); margin-top: .62em; flex: none; }

.beitrag__hinweis {
  background: var(--forst-900);
  color: var(--sand);
  border-radius: var(--rund-gross);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.beitrag__hinweis h2 { color: var(--sand); margin: 0; }
.beitrag__hinweis p { color: rgba(247, 243, 236, .84); margin: 1rem 0 0; }
.beitrag__hinweis .btn-reihe { margin-top: 1.75rem; }

/* Lesbarkeit im Fließtext des Beitrags */
.beitrag__inhalt .artikeltext > h2 { scroll-margin-top: 6.5rem; }
.beitrag__inhalt .artikeltext > p:first-of-type { font-size: 1.09rem; color: var(--tinte-2); font-weight: 400; }

/* Nummerierter Ablauf auf Angebotsseiten */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.ablauf li { display: flex; gap: 1.15rem; align-items: flex-start; }
.ablauf__nr {
  width: 2.2rem; height: 2.2rem;
  flex: none;
  border: 1px solid var(--stein);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--messing);
}
.ablauf li > span:last-child { display: block; }
.ablauf strong { display: block; font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: .35rem; }
.ablauf li span span { font-size: .96rem; color: var(--tinte-2); line-height: 1.6; }

/* Lodgify setzt Platzhalter und Preishinweise in Hellgrau (#999, Kontrast 2,85).
   Das ist zu schwach; hier werden die Texte auf die eigenen Werte gezogen. */
.buchung__widget,
.buchung__widget span,
.buchung__widget p,
.buchung__widget label,
.buchung__widget input,
.buchung__widget div { color: var(--tinte) !important; }
.buchung__widget input::placeholder { color: var(--tinte-2) !important; opacity: 1 !important; }
.buchung__widget .primary,
.buchung__widget .primary span { color: var(--sand) !important; }

/* ---------------------------------------------------------------- Buchungsseite
   Zwei Spalten: links die Hauswahl, rechts der Kalender. Auf schmalen Geräten
   stehen sie untereinander, die Auswahl zuerst. */
.buchen { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
/* Wie beim Hausraster: ohne min-width:0 ist die Mindestgröße eines
   Rasterfeldes seine Inhaltsbreite. Das Lodgify-Widget kann dann breiter
   werden als der Bildschirm und die ganze Seite waagerecht scrollen lassen. */
.buchen > * { min-width: 0; }
@media (min-width: 980px) { .buchen { grid-template-columns: 1fr 25rem; } }

.hauswahl { display: grid; gap: .85rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.hauswahl__reiter {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  width: 100%;
  padding: .85rem;
  background: var(--weiss);
  border: 1px solid var(--stein);
  border-radius: var(--rund-gross);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.hauswahl__reiter:hover { border-color: var(--moos); transform: translateY(-2px); }
.hauswahl__reiter[aria-current] {
  border-color: var(--forst-900);
  box-shadow: inset 0 0 0 1px var(--forst-900);
}
.hauswahl__bild {
  width: 5.5rem;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  flex: none;
  background: var(--sand-2);
}
.hauswahl__bild img { width: 100%; height: 100%; object-fit: cover; }
.hauswahl__text { display: flex; flex-direction: column; gap: .3rem; }
.hauswahl__name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.1; }
.hauswahl__fakt {
  font-size: .82rem;
  color: var(--tinte-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.hauswahl__reiter[aria-current] .hauswahl__name { color: var(--forst-900); }

.buchen__hinweise { display: grid; gap: 1.5rem; }
.buchen__box { position: sticky; top: 6.5rem; }
@media (max-width: 979px) { .buchen__box { position: static; } }

/* ---------------------------------------------------------------- Impressionen */
/* Die Filterleiste klebt direkt unter der Kopfzeile. Deren Höhe steht in
   --kopf-hoehe und wird auf 0 gesetzt, sobald sich die Kopfzeile beim
   Herunterscrollen einklappt; sonst bliebe zwischen beiden ein Spalt, durch den
   die Bilder sichtbar wandern. Der Hintergrund ist deckend, damit darunter
   nichts durchscheint. */
.impressionen__filter {
  position: sticky;
  top: var(--kopf-hoehe, 4.6rem);
  z-index: 20;
  background: var(--sand);
  border-bottom: 1px solid var(--stein);
  padding-block: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  transition: top .45s var(--ease);
}
.impressionen__filter .filterleiste { margin-bottom: 0; }
.filterleiste button {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .65rem 1.15rem;
  background: none;
  color: inherit;
  border: 1px solid var(--stein);
  border-radius: 100px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filterleiste button:hover { border-color: var(--forst-900); }
.filterleiste button[aria-current] { background: var(--forst-900); color: var(--sand); border-color: var(--forst-900); }

/* ---------------------------------------------------------------- Beitrags-Auftakt
   Titel und Bild stehen nebeneinander. Das Bild allein über die volle Breite
   drückt den Text zu weit nach unten und lässt die Seite leer wirken. */
.beitrag__auftakt { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .beitrag__auftakt { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; }
  .beitrag__auftakt .beitrag__kopf { margin-bottom: 0; }
}
.beitrag__bild { margin: 0; }
.beitrag__bild img { width: 100%; border-radius: var(--rund-gross); }
.beitrag__bild figcaption { margin-top: .7rem; font-size: .82rem; color: var(--tinte-3); line-height: 1.45; }

/* ---------------------------------------------------------------- Häuser im Beitrag */
.haeuserband {
  margin-block: clamp(2.75rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--sand-2);
  border-radius: var(--rund-gross);
  border: 1px solid var(--stein);
}
.haeuserband__kopf { max-width: 40rem; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.haeuserband__kopf p.zart { margin-top: .75rem; font-size: .95rem; }
.haeuserband__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); }
@media (max-width: 620px) { .haeuserband__karten { grid-template-columns: 1fr; } }
.haeuserband__karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border-radius: var(--rund-gross);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.haeuserband__karte:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.haeuserband__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-2); }
.haeuserband__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.haeuserband__karte:hover .haeuserband__bild img { transform: scale(1.05); }
.haeuserband__name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; padding: .9rem 1rem 0; }
.haeuserband__fakt { font-size: .8rem; color: var(--tinte-2); padding: .35rem 1rem 0; font-variant-numeric: lining-nums tabular-nums; }
.haeuserband__preis {
  font-size: .8rem;
  font-weight: 600;
  color: var(--forst-700);
  padding: .4rem 1rem 1rem;
  margin-top: auto;
  font-variant-numeric: lining-nums tabular-nums;
}
.haeuserband__aktionen { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* Beim Hauswechsel wird die Buchungsbox neu aufgebaut. Die Hülle behält so
   lange ihre Höhe und zeigt einen ruhigen Ladezustand, damit nichts springt. */
.buchung__huelle { position: relative; min-height: 13.5rem; }
.buchung__huelle[aria-busy="true"] { opacity: .45; transition: opacity .2s var(--ease); }
.buchung__huelle[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  margin: -.8rem 0 0 -.8rem;
  border: 2px solid var(--stein);
  border-top-color: var(--messing);
  border-radius: 50%;
  animation: drehen .7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
.buchung__direkt { margin-top: .9rem; font-size: .84rem; text-align: center; }
.buchung__direkt a { color: var(--tinte-2); border-bottom: 1px solid var(--stein); }
.buchung__direkt a:hover { color: var(--messing); border-color: var(--messing); }