@charset "utf-8";
/* ==========================================================================
   Ferienwohnung Klaus – Gestaltung
   Warme Erdtöne, großzügige Typografie, eine Seite zum Durchscrollen.
   Reihenfolge: Schriften · Farbwerte · Grundlagen · Bausteine · Abschnitte
   · Fußzeile · Lichtkasten · kleine Bildschirme · Druck
   ========================================================================== */

/* --- Schriften (lokal, kein Abruf bei Dritten) --------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("/schriften/fraunces-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("/schriften/inter-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* --- Farben und Maße ----------------------------------------------------- */
:root {
  /* Warme Grundtöne: Leinen, Sand, Ton */
  --leinen:        #FDFAF5;
  --sand:          #F6EDE1;
  --sand-tief:     #EDE0CD;
  --ton:           #E0CDB3;

  /* Akzent: gebrannter Ton.
     Drei Stufen mit klarer Aufgabenteilung, damit die Kontrastvorgaben
     eingehalten werden (nachgerechnet in pruefen.py):
       --glut        nur Flaechen und Symbole, nie Text  (3,8:1 auf Leinen)
       --glut-tief   Text und Knopfgrund                 (5,5:1 beidseitig)
       --glut-hell   Text auf dunklen Flaechen           (4,7:1 auf Tanne) */
  --glut:          #C0683C;
  --glut-tief:     #9E5029;
  --glut-dunkel:   #7F3F1F;
  --glut-hell:     #F3BC99;

  /* Zweitfarbe: warmes Tannengrün für ruhige Flächen */
  --tanne:         #4A5544;
  --tanne-tief:    #333C2F;

  /* Schrift */
  --tinte:         #2A2019;
  --tinte-leicht:  #5E4F42;
  --tinte-zart:    #786552;
  --auf-dunkel:    #F7F0E6;
  --auf-dunkel-zart:#D3C7B6;

  --linie:         #E3D6C2;
  --linie-dunkel:  rgba(247, 240, 230, .18);

  /* Flächen */
  --schatten-weich: 0 1px 2px rgba(60, 40, 24, .05),
                    0 8px 24px -12px rgba(60, 40, 24, .18);
  --schatten-hoch:  0 2px 4px rgba(60, 40, 24, .06),
                    0 24px 48px -24px rgba(60, 40, 24, .28);

  --rundung:       14px;
  --rundung-gross: 24px;

  --breite:        1180px;
  --breite-eng:    720px;
  --breite-weit:   1440px;
  --rand:          clamp(1.25rem, 5vw, 3.5rem);

  --schrift-text:  "InterVar", ui-sans-serif, system-ui, -apple-system,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --fluss:         cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Damit Sprungziele nicht unter der Kopfleiste verschwinden */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--leinen);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.ist-gesperrt { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  /* Optische Größenachse der Fraunces: bei Überschriften weicher */
  font-variation-settings: "opsz" 72, "SOFT" 30;
}

p { margin: 0 0 1.1em; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--glut-tief); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--glut-dunkel); }

:focus-visible {
  outline: 3px solid var(--glut);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: .5rem;
  z-index: 1000;
  background: var(--tinte);
  color: var(--auf-dunkel);
  padding: .7rem 1.2rem;
  border-radius: var(--rundung);
}
.sprungmarke:focus { left: .75rem; }

/* --- Umschläge und Abstände ---------------------------------------------- */
.umschlag {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.umschlag--eng  { max-width: var(--breite-eng); }
.umschlag--weit { max-width: var(--breite-weit); }

.abschnitt { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.abschnitt--sand   { background: var(--sand); }
.abschnitt--dunkel { background: var(--tanne); color: var(--auf-dunkel); }
.abschnitt--dunkel a { color: var(--glut-hell); }

.abschnitt__kopf { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }

/* --- Typografische Bausteine --------------------------------------------- */
.augenbraue {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--glut-tief);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.abschnitt__kopf--mitte .augenbraue { justify-content: center; }
.augenbraue::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.augenbraue--hell { color: var(--glut-hell); }

.ueberschrift {
  font-size: clamp(1.95rem, 1.2rem + 2.9vw, 3.3rem);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.ueberschrift--hell { color: var(--auf-dunkel); }

.unterueberschrift {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.unterueberschrift .symbol { width: 1.4em; height: 1.4em; color: var(--glut); flex: none; }

.vorspann {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--tinte-leicht);
  line-height: 1.65;
  text-wrap: pretty;
}
.vorspann--hell { color: var(--auf-dunkel-zart); }

.fliesstext { color: var(--tinte-leicht); text-wrap: pretty; }

.symbol { width: 1.5rem; height: 1.5rem; }

/* Platzhaltermarkierung – nur im Entwurf sichtbar */
.platzhalter {
  background: linear-gradient(transparent 58%, #FFE08A 58%);
  color: inherit;
  padding: 0 .12em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- Knöpfe -------------------------------------------------------------- */
.knopf {
  /* Nicht --glut: weisse Schrift darauf erreicht nur 3,8:1. */
  --knopf-grund: var(--glut-tief);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  background: var(--knopf-grund);
  color: #FFF8F1;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: .975rem;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--fluss), transform .25s var(--fluss),
              box-shadow .25s var(--fluss);
  box-shadow: 0 1px 2px rgba(120, 60, 25, .18);
}
.knopf:hover {
  background: var(--glut-dunkel);
  color: #FFF8F1;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(120, 60, 25, .5);
}
.knopf:active { transform: translateY(0); }
.knopf[disabled] { opacity: .55; cursor: progress; transform: none; }

.knopf--rand {
  background: transparent;
  color: var(--tinte);
  border-color: currentColor;
  box-shadow: none;
}
.knopf--rand:hover {
  background: var(--tinte);
  color: var(--leinen);
  border-color: var(--tinte);
}
.hero .knopf--rand { color: #FFF8F1; }
.hero .knopf--rand:hover { background: #FFF8F1; color: var(--tinte); border-color: #FFF8F1; }

.knopf--klein { padding: .62rem 1.15rem; font-size: .875rem; }
.knopf--voll  { width: 100%; }

/* --- Kopfleiste ---------------------------------------------------------- */
.kopfleiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: background .35s var(--fluss), box-shadow .35s var(--fluss),
              border-color .35s var(--fluss);
  border-bottom: 1px solid transparent;
}
.kopfleiste__innen {
  max-width: var(--breite-weit);
  margin-inline: auto;
  padding: .85rem var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
/* Über dem Hero: durchsichtig und hell. Nach dem Scrollen: fest und sandfarben. */
.kopfleiste { color: #FFF8F1; }
.kopfleiste.ist-fest {
  background: rgba(253, 250, 245, .9);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: var(--linie);
  color: var(--tinte);
  box-shadow: 0 1px 24px -16px rgba(60, 40, 24, .6);
}
body.ist-textseite .kopfleiste {
  background: var(--leinen);
  border-bottom-color: var(--linie);
  color: var(--tinte);
}

.marke { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.marke__zeichen { width: 2.25rem; height: 2.25rem; color: var(--glut-hell); flex: none; }
.kopfleiste.ist-fest .marke__zeichen,
body.ist-textseite .marke__zeichen { color: var(--glut); }
.marke__text { display: flex; flex-direction: column; line-height: 1.15; }
.marke__name {
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}
.marke__ort { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }

.navi { display: flex; align-items: center; gap: 1.75rem; }
.navi__liste { display: flex; gap: 1.6rem; }
.navi__liste a {
  color: inherit;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  padding: .35rem 0;
  position: relative;
  opacity: .92;
}
.navi__liste a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: .05rem;
  height: 1.5px;
  background: currentColor;
  transition: right .28s var(--fluss);
}
.navi__liste a:hover::after,
.navi__liste a.ist-aktuell::after { right: 0; }

.navi__schalter {
  display: none;
  width: 2.75rem; height: 2.75rem;
  background: none;
  border: 1px solid currentColor;
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 5px;
}
.navi__strich {
  display: block;
  width: 1.1rem; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--fluss), opacity .2s linear;
}

.kopfleiste__fortschritt {
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--glut), var(--glut-hell));
  transition: width .1s linear;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 56rem);
  display: grid;
  align-items: center;
  isolation: isolate;
  padding-block: 9rem 6rem;
  overflow: hidden;
}
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img, .hero__bild svg {
  width: 100%; height: 100%;
  object-fit: cover;
  /* leichtes Heranfahren beim Laden */
  animation: heranfahren 1.6s var(--fluss) both;
}
@keyframes heranfahren {
  from { transform: scale(1.06); opacity: .4; }
  to   { transform: scale(1);    opacity: 1; }
}
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(42, 32, 25, .62) 0%, rgba(42, 32, 25, .28) 38%,
                            rgba(42, 32, 25, .52) 78%, rgba(42, 32, 25, .74) 100%),
    radial-gradient(120% 90% at 18% 45%, rgba(158, 80, 41, .34), transparent 62%);
}
.hero__inhalt {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  width: 100%;
  color: #FFF8F1;
  animation: auftauchen .9s .25s var(--fluss) both;
}
.hero__titel {
  font-size: clamp(2.7rem, 1.4rem + 6vw, 5.5rem);
  max-width: 14ch;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 30px rgba(28, 18, 12, .35);
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.hero__zeile {
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.4rem);
  max-width: 34rem;
  color: rgba(255, 248, 241, .93);
  margin-bottom: 2.2rem;
  text-wrap: pretty;
}
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__weiter {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  translate: -50% 0;
  width: 1.5rem; height: 3rem;
  display: grid;
  place-items: center;
}
.hero__weiter-strich {
  width: 1px; height: 2.6rem;
  background: linear-gradient(180deg, transparent, rgba(255, 248, 241, .85));
  animation: rutschen 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes rutschen {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(1.6rem); }
  to   { opacity: 1; transform: none; }
}

/* --- Kurzfakten ---------------------------------------------------------- */
.fakten {
  background: var(--leinen);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--linie);
}
.fakten__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.fakten__punkt {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--ton);
}
.fakten__zahl {
  font-family: var(--schrift-titel);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--glut-tief);
}
.fakten__einheit { font-weight: 600; font-size: .95rem; }
.fakten__hinweis { font-size: .875rem; color: var(--tinte-zart); }

/* --- Willkommen ---------------------------------------------------------- */
.willkommen__gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.willkommen__unterschrift {
  font-family: var(--schrift-titel);
  font-size: 1.45rem;
  color: var(--glut-tief);
  margin-top: 1.8rem;
  font-variation-settings: "opsz" 24, "SOFT" 60;
}
.willkommen__bild {
  margin: 0;
  position: relative;
  border-radius: var(--rundung-gross);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
  aspect-ratio: 4 / 5;
}
.willkommen__bild img, .willkommen__bild svg { width: 100%; height: 100%; object-fit: cover; }
.willkommen__marke {
  position: absolute;
  left: 1.25rem; bottom: 1.25rem;
  background: rgba(253, 250, 245, .92);
  backdrop-filter: blur(6px);
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tinte);
}

/* --- Karten (Ausstattung) ------------------------------------------------ */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.karte {
  background: var(--leinen);
  border: 1px solid var(--linie);
  border-radius: var(--rundung-gross);
  padding: clamp(1.6rem, 2.5vw, 2.1rem);
  transition: transform .35s var(--fluss), box-shadow .35s var(--fluss),
              border-color .35s var(--fluss);
}
.karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--ton);
}
.karte__symbol {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--sand-tief), var(--ton));
  color: var(--glut-tief);
  margin-bottom: 1.2rem;
}
.karte__titel { font-size: 1.3rem; margin-bottom: .85rem; }
.karte__liste { display: flex; flex-direction: column; gap: .55rem; }
.karte__liste li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--tinte-leicht);
  font-size: .9375rem;
  line-height: 1.55;
}
.karte__liste li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .62em;
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--glut);
  opacity: .8;
}

/* --- Galerie ------------------------------------------------------------- */
.galerie__gitter {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.6rem, 1.2vw, 1rem);
}
/* Unregelmäßiges Raster: zwei große, vier kleinere Felder */
.galerie__feld { grid-column: span 4; aspect-ratio: 4 / 3; }
.galerie__feld--1 { grid-column: span 8; aspect-ratio: 16 / 10; }
.galerie__feld--2 { grid-column: span 4; aspect-ratio: 4 / 5; }
.galerie__feld--5 { grid-column: span 8; aspect-ratio: 16 / 9; }
.galerie__feld--6 { grid-column: span 4; aspect-ratio: 4 / 5; }

.galerie__knopf {
  all: unset;
  display: block;
  position: relative;
  width: 100%; height: 100%;
  border-radius: var(--rundung);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--sand-tief);
}
.galerie__knopf img, .galerie__knopf svg {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--fluss), filter .4s var(--fluss);
}
.galerie__knopf:hover img, .galerie__knopf:hover svg { transform: scale(1.045); }
.galerie__knopf::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(34, 24, 17, .62));
  opacity: .85;
  transition: opacity .35s var(--fluss);
}
.galerie__beschriftung {
  position: absolute;
  left: 1rem; bottom: .85rem;
  z-index: 1;
  color: #FFF8F1;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* --- Preise -------------------------------------------------------------- */
.preis__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.preis {
  position: relative;
  background: rgba(253, 250, 245, .07);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--rundung-gross);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--fluss), background .35s var(--fluss);
}
.preis:hover { transform: translateY(-4px); background: rgba(253, 250, 245, .11); }
.preis--betont {
  background: var(--leinen);
  color: var(--tinte);
  border-color: transparent;
  box-shadow: var(--schatten-hoch);
}
.preis--betont:hover { background: var(--leinen); }
.preis__faehnchen {
  position: absolute;
  top: -.75rem; left: 1.75rem;
  background: var(--glut);
  color: #FFF8F1;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 999px;
}
.preis__name { font-size: 1.35rem; margin-bottom: .3rem; }
.preis__zeitraum {
  font-size: .875rem;
  color: var(--auf-dunkel-zart);
  margin-bottom: 1.4rem;
  min-height: 2.6em;
}
.preis--betont .preis__zeitraum { color: var(--tinte-zart); }
.preis__betrag { display: flex; align-items: baseline; gap: .45rem; margin-bottom: 1.6rem; }
.preis__zahl {
  font-family: var(--schrift-titel);
  font-size: clamp(2.4rem, 2rem + 1.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
}
.preis--betont .preis__zahl { color: var(--glut-tief); }
.preis__einheit { font-size: .9rem; color: var(--auf-dunkel-zart); }
.preis--betont .preis__einheit { color: var(--tinte-zart); }
.preis__verweis {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  color: var(--glut-hell);
}
.preis--betont .preis__verweis { color: var(--glut-tief); }
.preis__verweis .symbol { width: 1.15rem; height: 1.15rem; transition: transform .28s var(--fluss); }
.preis__verweis:hover .symbol { transform: translateX(4px); }

.preis__zusatz {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .7rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie-dunkel);
}
.preis__zusatz li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .9375rem;
  color: var(--auf-dunkel-zart);
}
.preis__zusatz li::before {
  content: "";
  position: absolute;
  left: 0; top: .66em;
  width: .7rem; height: 1px;
  background: var(--glut-hell);
}

/* --- Lage ---------------------------------------------------------------- */
.lage__gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.entfernung {
  margin-bottom: 1.75rem;
  border-top: 1px solid var(--linie);
}
.entfernung__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--linie);
}
.entfernung dt { color: var(--tinte-leicht); font-size: .9375rem; }
.entfernung dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lage__kartenhinweis {
  font-size: .8125rem;
  color: var(--tinte-zart);
  margin-top: .9rem;
  line-height: 1.5;
  max-width: 32rem;
}

.streifen { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
.streifen__punkt {
  background: var(--leinen);
  padding: 1.35rem 0;
  transition: padding-left .3s var(--fluss), background .3s var(--fluss);
}
.streifen__punkt:hover { padding-left: 1rem; background: var(--sand); }
.streifen__titel {
  font-size: 1.2rem;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.streifen__titel::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--glut);
  flex: none;
}
.streifen__text { margin: 0; color: var(--tinte-leicht); font-size: .9375rem; }

.anreise {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--sand);
  border-radius: var(--rundung-gross);
}
.anreise__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.anreise__symbol { color: var(--glut-tief); display: block; margin-bottom: .7rem; }
.anreise__symbol .symbol { width: 1.75rem; height: 1.75rem; }
.anreise__titel { font-size: 1.1rem; margin-bottom: .35rem; }
.anreise__text { margin: 0; font-size: .9375rem; color: var(--tinte-leicht); }

/* --- Gästestimmen -------------------------------------------------------- */
.stimmen__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.stimme {
  margin: 0;
  background: var(--leinen);
  border-radius: var(--rundung-gross);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  box-shadow: var(--schatten-weich);
  position: relative;
}
.stimme::before {
  content: "\201E";
  position: absolute;
  top: .35rem; left: 1.4rem;
  font-family: var(--schrift-titel);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--ton);
}
.stimme__text {
  margin: 1.4rem 0 1.4rem;
  font-family: var(--schrift-titel);
  font-size: 1.1rem;
  line-height: 1.6;
  font-variation-settings: "opsz" 14, "SOFT" 40;
  color: var(--tinte);
}
.stimme__quelle { display: flex; flex-direction: column; gap: .1rem; }
.stimme__name { font-weight: 600; font-size: .9375rem; }
.stimme__zeit { font-size: .8125rem; color: var(--tinte-zart); }

/* --- Anfrage ------------------------------------------------------------- */
.anfrage__gitter {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.direktkontakt { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2rem; }
.direktkontakt li { display: flex; gap: .9rem; align-items: flex-start; }
.direktkontakt__symbol {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border-radius: 10px;
  background: var(--sand);
  color: var(--glut-tief);
}
.direktkontakt__symbol .symbol { width: 1.25rem; height: 1.25rem; }
.direktkontakt__kennung {
  display: block;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-zart);
}
.direktkontakt a { font-weight: 600; text-decoration: none; }
.direktkontakt a:hover { text-decoration: underline; }

.formular {
  background: var(--leinen);
  border: 1px solid var(--linie);
  border-radius: var(--rundung-gross);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--schatten-weich);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.formular__reihe { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.formular__reihe > .feld { flex: 1 1 11rem; }
.formular__reihe > .feld--schmal { flex: 0 1 7.5rem; }

.feld { display: flex; flex-direction: column; gap: .4rem; }
.feld label { font-size: .875rem; font-weight: 600; color: var(--tinte); }
.feld__pflicht { color: var(--glut); }
.feld__wahl { font-weight: 400; color: var(--tinte-zart); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="date"],
.feld select,
.feld textarea {
  font: inherit;
  font-size: .975rem;
  color: var(--tinte);
  background: #FFFDFA;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: .72rem .9rem;
  width: 100%;
  transition: border-color .22s var(--fluss), box-shadow .22s var(--fluss);
}
.feld textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.feld select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23786552' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.2rem;
}
.feld :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--glut);
  box-shadow: 0 0 0 3px rgba(192, 104, 60, .16);
}
.feld :is(input, select, textarea).ist-falsch {
  border-color: #B4472F;
  box-shadow: 0 0 0 3px rgba(180, 71, 47, .13);
}

.feld--haken { flex-direction: row; align-items: flex-start; gap: .7rem; }
.feld--haken input {
  margin-top: .22rem;
  width: 1.1rem; height: 1.1rem;
  flex: none;
  accent-color: var(--glut);
  cursor: pointer;
}
.feld--haken label { font-weight: 400; font-size: .8125rem; color: var(--tinte-leicht); line-height: 1.55; }

/* Für Menschen unsichtbar, für Werbeprogramme verlockend */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formular__meldung {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  padding: 0;
  border-radius: 10px;
  transition: padding .2s linear;
}
.formular__meldung.ist-gut {
  background: #E7F0E2;
  color: #33502A;
  padding: .85rem 1rem;
  border: 1px solid #BFD6B4;
}
.formular__meldung.ist-schlecht {
  background: #FBE8E3;
  color: #8C331E;
  padding: .85rem 1rem;
  border: 1px solid #E9C2B6;
}
.formular__fussnote { margin: 0; font-size: .75rem; color: var(--tinte-zart); }

/* --- Textseiten (Impressum, Datenschutz) --------------------------------- */
body.ist-textseite { padding-top: 4.75rem; }
.textseite .unterueberschrift { margin-top: 2.4rem; }
.textseite .ueberschrift { margin-bottom: 1.8rem; }
.textseite__stand { font-size: .8125rem; color: var(--tinte-zart); margin-top: 2.5rem; }
.textseite__zurueck { margin-top: 2.5rem; }

/* --- Fußzeile ------------------------------------------------------------ */
.fuss {
  background: var(--tanne-tief);
  color: var(--auf-dunkel-zart);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .9375rem;
}
.fuss__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.fuss__spruch {
  font-family: var(--schrift-titel);
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
  color: var(--auf-dunkel);
  margin-bottom: .6rem;
  line-height: 1.25;
}
.fuss__name { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.fuss__titel {
  font-family: var(--schrift-text);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--auf-dunkel);
  margin-bottom: .9rem;
}
.fuss address { font-style: normal; line-height: 1.75; }
.fuss__liste { display: flex; flex-direction: column; gap: .4rem; }
.fuss__verweis { color: var(--auf-dunkel-zart); text-decoration: none; border-bottom: 1px solid rgba(201, 188, 169, .3); }
.fuss__verweis:hover { color: var(--glut-hell); border-bottom-color: currentColor; }

.fuss__zeile {
  border-top: 1px solid var(--linie-dunkel);
  padding: 1.3rem var(--rand);
  max-width: var(--breite);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  font-size: .8125rem;
  opacity: .78;
}
.fuss__zeile p { margin: 0; }
.fuss__hinweis { max-width: 46ch; }

/* --- Lichtkasten --------------------------------------------------------- */
.lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 19, 14, .93);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  animation: einblenden .25s var(--fluss);
}
.lichtkasten[hidden] { display: none; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.lichtkasten__rahmen {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-height: 100%;
  min-width: 0;
}
.lichtkasten__rahmen img {
  max-height: 78vh;
  width: auto;
  border-radius: var(--rundung);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
  background: var(--sand-tief);
}
.lichtkasten__rahmen figcaption {
  color: var(--auf-dunkel-zart);
  font-size: .875rem;
  text-align: center;
  max-width: 50ch;
}
.lichtkasten__zu {
  position: absolute;
  top: 1rem; right: 1.25rem;
  background: none;
  border: none;
  color: var(--auf-dunkel);
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .6rem;
  border-radius: 8px;
}
.lichtkasten__pfeil {
  background: rgba(253, 250, 245, .1);
  border: 1px solid rgba(253, 250, 245, .22);
  color: var(--auf-dunkel);
  font-size: 1.9rem;
  line-height: 1;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s var(--fluss);
}
.lichtkasten__pfeil:hover, .lichtkasten__zu:hover { background: rgba(253, 250, 245, .22); }

/* --- Einblenden beim Scrollen -------------------------------------------- */
/* Die Staffelung steht hier und nicht als style="--verzug: …" am Element:
   die Inhaltssicherheitsregel (CSP) dieser Seite erlaubt kein style-Attribut,
   die Abstufung waere sonst wirkungslos verpufft. */
.karten > *,
.galerie__gitter > *,
.preis__gitter > *,
.streifen > *,
.stimmen__gitter > *              { --verzug: 0ms; }
.karten > *:nth-child(2),
.streifen > *:nth-child(2)        { --verzug: 60ms; }
.karten > *:nth-child(3),
.streifen > *:nth-child(3)        { --verzug: 120ms; }
.karten > *:nth-child(4),
.streifen > *:nth-child(4)        { --verzug: 180ms; }
.karten > *:nth-child(5)          { --verzug: 240ms; }
.karten > *:nth-child(n+6)        { --verzug: 300ms; }

.galerie__gitter > *:nth-child(2) { --verzug: 50ms; }
.galerie__gitter > *:nth-child(3) { --verzug: 100ms; }
.galerie__gitter > *:nth-child(4) { --verzug: 150ms; }
.galerie__gitter > *:nth-child(5) { --verzug: 200ms; }
.galerie__gitter > *:nth-child(n+6) { --verzug: 250ms; }

.preis__gitter > *:nth-child(2),
.stimmen__gitter > *:nth-child(2) { --verzug: 80ms; }
.preis__gitter > *:nth-child(n+3),
.stimmen__gitter > *:nth-child(n+3) { --verzug: 160ms; }

[data-zeigen] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .7s var(--fluss) var(--verzug, 0ms),
              transform .7s var(--fluss) var(--verzug, 0ms);
}
[data-zeigen].ist-sichtbar { opacity: 1; transform: none; }
/* Ohne JavaScript bleibt nichts unsichtbar */
.kein-js [data-zeigen] { opacity: 1; transform: none; }

/* --- Kleine Bildschirme -------------------------------------------------- */
@media (max-width: 960px) {
  .willkommen__gitter,
  .lage__gitter,
  .anfrage__gitter { grid-template-columns: 1fr; }
  .willkommen__bild { aspect-ratio: 16 / 11; order: -1; }
  .fuss__innen { grid-template-columns: 1fr 1fr; }
  .fuss__block--breit { grid-column: 1 / -1; }

  .galerie__feld,
  .galerie__feld--1, .galerie__feld--2,
  .galerie__feld--5, .galerie__feld--6 { grid-column: span 6; aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 4.5rem; }

  .navi__schalter { display: grid; }
  .navi {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    background: var(--leinen);
    color: var(--tinte);
    padding: 5rem var(--rand) 2rem;
    box-shadow: 0 24px 40px -24px rgba(42, 32, 25, .5);
    transform: translateY(-100%);
    transition: transform .4s var(--fluss);
    visibility: hidden;
  }
  .navi.ist-offen { transform: none; visibility: visible; }
  .navi__liste { flex-direction: column; gap: 0; }
  .navi__liste a {
    display: block;
    padding: .9rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--linie);
  }
  .navi__liste a::after { display: none; }
  .navi__knopf { margin-top: 1.25rem; align-self: flex-start; }

  .navi__schalter.ist-offen { color: var(--tinte); border-color: var(--tinte); }
  .navi__schalter.ist-offen .navi__strich:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .navi__schalter.ist-offen .navi__strich:nth-child(2) { opacity: 0; }
  .navi__schalter.ist-offen .navi__strich:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .hero { min-height: 88svh; padding-block: 7.5rem 5rem; }
  .hero__titel { max-width: 18ch; }
  .hero__knoepfe .knopf { flex: 1 1 100%; }

  .fakten__liste { grid-template-columns: 1fr 1fr; }
  .galerie__feld,
  .galerie__feld--1, .galerie__feld--2,
  .galerie__feld--5, .galerie__feld--6 { grid-column: span 12; }

  .fuss__innen { grid-template-columns: 1fr; }
  .lichtkasten { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lichtkasten__pfeil { position: absolute; bottom: 1.5rem; }
  .lichtkasten__pfeil--zurueck { left: 25%; }
  .lichtkasten__pfeil--vor { right: 25%; }
}

/* --- Wer keine Bewegung möchte, bekommt keine ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-zeigen] { opacity: 1; transform: none; }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .kopfleiste, .hero__weiter, .navi, .lichtkasten, .formular, .hero__knoepfe { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt { padding-block: 1.2rem; break-inside: avoid; }
  .abschnitt--dunkel, .fuss { background: #fff !important; color: #000 !important; }
  .abschnitt--dunkel .ueberschrift--hell, .fuss__spruch { color: #000 !important; }
  .hero { min-height: auto; padding-block: 0 1.5rem; }
  .hero__inhalt { color: #000; }
  .hero__bild, .hero__schleier { display: none; }
  .hero__titel { text-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  [data-zeigen] { opacity: 1 !important; transform: none !important; }
}