/* ===========================================================================
   ADI HOTELS KNÜLLWALD — Entwurf 5 „Landgasthof" · gemeinsames Stylesheet
   ---------------------------------------------------------------------------
   Seit 09.09.2026 ist der Entwurf ein Mehrseiter: index.html, buchen.html und
   alle Unterseiten laden DIESE Datei. Vorher stand das CSS im <style> von
   index.html (Struktur und Gestaltung übernommen vom Landgasthof Wetteraperle,
   src/styles/neu.css). Reines CSS, keine Google Fonts, kein externer Request.
   Wer hier eine Farbe oder einen Abstand ändert, ändert ihn auf allen Seiten.
   =========================================================================== */

:root {
  --bordeaux: #7a2320;
  --bordeaux-tief: #5d1917;
  --wald: #3e4740;
  --wald-tief: #2b322c;
  --gold: #c08a2e;
  --gold-hell: #e5b45f;
  --gold-tief: #9c7411;
  --creme: #f8f5ef;
  --creme-2: #efeae0;
  --tinte: #241f1b;
  --tinte-weich: #5b534b;
  --linie: rgba(36, 31, 27, .12);

  --kopf-hoehe: 4.6rem;
  --bahn: 76rem;

  /* Wetteraperle nutzt Cormorant Garamond + Inter über Google Fonts. Hier
     bewusst nicht: der Entwurf soll offline laufen und keinen einzigen
     externen Request auslösen. Georgia trägt denselben Charakter. */
  --display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --text: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Der Buchungsdialog auf buchen.html zieht seine Optik aus diesen
     Variablen — so trägt er die Farben dieses Entwurfs. Beide Dateien halten
     dieselben Werte; wer hier ändert, zieht in buchen.html nach. */
  --bu-grund: #efeae0;
  --bu-flaeche: #ffffff;
  --bu-flaeche-2: #f8f5ef;
  --bu-rand: rgba(36,31,27,.14);
  --bu-text: #241f1b;
  --bu-text-leise: #5b534b;
  --bu-akzent: #7a2320;
  --bu-akzent-tief: #5d1917;
  --bu-akzent-zart: rgba(122,35,32,.09);
  --bu-akzent-text: #ffffff;
  --bu-gut: #3e6b45;
  --bu-schlecht: #9c3327;
  --bu-radius: .5rem;
  --bu-radius-klein: .35rem;
  --bu-schatten: 0 30px 70px -34px rgba(0,0,0,.55);
  --bu-schrift: var(--text);
  --bu-schrift-titel: var(--display);
  --bu-tempo: .2s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-hoehe); }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.display { font-family: var(--display); font-weight: 600; line-height: 1.08; }

.augenbraue {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .28em; color: var(--gold); margin: 0;
}

.bahn { max-width: var(--bahn); margin: 0 auto; padding: 0 1.25rem; }

/* ------------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.5rem; border: 1px solid transparent; border-radius: .4rem;
  font-family: inherit; font-size: .92rem; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn svg { flex: none; }
.btn-gold { background: var(--gold); color: #1d1712; }
.btn-gold:hover { background: var(--gold-hell); }
.btn-bordeaux { background: var(--bordeaux); color: #fff; }
.btn-bordeaux:hover:not(:disabled) { background: var(--bordeaux-tief); }
.btn-hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-hell:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn-linie { background: transparent; color: var(--bordeaux); border-color: rgba(122,35,32,.35); }
.btn-linie:hover { background: rgba(122,35,32,.07); border-color: var(--bordeaux); }
.btn-dunkel { background: transparent; color: var(--tinte); border-color: var(--linie); }
.btn-dunkel:hover { border-color: var(--bordeaux); color: var(--bordeaux); }

/* -------------------------------------------------------------- Entwurfsband */

/* Der Entwurfs-Hinweis liegt unten fest am Bildschirmrand — oben würde ihn die
   fixe Kopfzeile verdecken, und über dem Startbild würde er die Wirkung
   kaputtmachen, die im Gespräch gezeigt werden soll. */
.band {
  position: fixed; inset: auto 0 0 0; z-index: 80;
  background: var(--wald-tief); color: rgba(255,255,255,.86);
  font-size: .72rem; letter-spacing: .04em; text-align: center;
  padding: .5rem 1rem;
  border-top: 2px solid var(--gold);
  box-shadow: 0 -10px 30px -18px rgba(0,0,0,.6);
}
.band strong { color: var(--gold-hell); font-weight: 700; }
body { padding-bottom: 3.6rem; }
@media (max-width: 560px) { body { padding-bottom: 5.2rem; } }

/* --------------------------------------------------------------------- Kopf */

.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.kopf.fest {
  background: rgba(250,249,245,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--linie);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.5);
}
/* Die dreifarbige Kante — bei Wetteraperle Wald/Gold/Bordeaux aus dem Logo,
   hier dieselbe Idee mit den Farben des AdiHotels-Aquarells. */
.kopf.fest::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(to right,
    var(--wald) 0 33.33%, var(--gold) 33.33% 66.66%, var(--bordeaux) 66.66% 100%);
}

/* Drei Spalten statt einer Reihe: die beiden Aussenspalten sind gleich breit
   (1fr), deshalb steht die mittlere Spalte — die Marke — exakt in der
   Seitenmitte, egal wie unterschiedlich lang links und rechts gefuellt sind. */
.kopf-innen {
  max-width: var(--bahn); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.5rem;
  padding: .7rem 1.25rem;
}

/* Das Logo als Typografie statt als Bild: das einzige vorhandene Original ist
   ein Flyer-Scan, in dem der Schriftzug unten angeschnitten ist. Nachgesetzt
   ist er in jeder Größe scharf — und über dem Startbild umschaltbar auf Weiß. */
.marke {
  grid-column: 2; grid-row: 1; justify-self: center;
  display: inline-flex; flex-direction: column; align-items: center;
  text-align: center; line-height: 1;
}
.marke-name {
  font-family: var(--display); font-weight: 700;
  font-size: 1.42rem; letter-spacing: .04em; color: #fff;
  transition: color .3s ease;
}
.marke-name em { font-style: normal; color: var(--gold-hell); transition: color .3s ease; }
.marke-zeile {
  margin-top: .22rem; font-size: .56rem; text-transform: uppercase; white-space: nowrap;
  letter-spacing: .22em; color: rgba(255,255,255,.66); transition: color .3s ease;
}
.kopf.fest .marke-name { color: var(--tinte); }
.kopf.fest .marke-name em { color: var(--bordeaux); }
.kopf.fest .marke-zeile { color: var(--tinte-weich); }

.kopf-nav { display: none; align-items: center; gap: 1.4rem; }
/* Die Navigation teilt sich um die mittige Marke herum auf. */
.kopf-nav--links { grid-column: 1; grid-row: 1; justify-self: start; }
.kopf-rechts {
  grid-column: 3; grid-row: 1; justify-self: end;
  display: flex; align-items: center; gap: 1.4rem;
}
.kopf-nav a {
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  color: rgba(255,255,255,.92); transition: color .2s ease;
}
.kopf-nav a:hover { color: #fff; }
.kopf.fest .kopf-nav a { color: var(--tinte-weich); }
.kopf.fest .kopf-nav a:hover,
.kopf.fest .kopf-nav a[aria-current] { color: var(--bordeaux); }
/* Aktive Seite: auf dem Mehrseiter markiert aria-current="page" den Punkt, der
   zur geöffneten Seite gehört — goldene Linie darunter, in beiden Kopf-Zuständen. */
.kopf-nav a { position: relative; }
.kopf-nav a[aria-current]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.35rem;
  height: 2px; background: var(--gold);
}
.kopf-nav a[aria-current] { color: #fff; }
.kopf-mobil nav a[aria-current] { color: var(--bordeaux); background: rgba(122,35,32,.06); }
/* Seiten ohne Startbild (buchen, Impressum, Datenschutz …) tragen
   class="kopf fest immer-fest": die Kopfzeile steht von Anfang an auf hellem
   Grund, seite.js nimmt „fest" dann nie wieder weg — und der Inhalt beginnt
   unterhalb der Kopfzeile. */
.kopf.immer-fest ~ main { padding-top: var(--kopf-hoehe); }

.kopf-aktion { display: none; align-items: center; gap: .6rem; }
.kopf-tel {
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.9); white-space: nowrap;
  display: inline-flex; align-items: center; gap: .4rem;
}
.kopf.fest .kopf-tel { color: var(--wald); }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; margin-right: -.5rem;
  background: none; border: 0; color: #fff; cursor: pointer;
}
.kopf.fest .burger { color: var(--tinte); }
.burger .schliessen { display: none; }
.kopf.offen .burger .oeffnen { display: none; }
.kopf.offen .burger .schliessen { display: block; }

.kopf-mobil {
  overflow: hidden; max-height: 0;
  background: rgba(250,249,245,.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: max-height .35s ease;
}
.kopf.offen .kopf-mobil { max-height: 34rem; border-bottom-color: var(--linie); }
.kopf-mobil nav { display: flex; flex-direction: column; gap: .1rem; padding: .6rem 1.25rem 1.2rem; }
.kopf-mobil nav a { padding: .68rem .5rem; border-radius: .4rem; font-weight: 600; color: var(--tinte-weich); }
.kopf-mobil nav a:hover { background: var(--creme-2); }
.kopf-mobil .btn { margin-top: .6rem; }

/* Mit neun Punkten plus Telefon und Knopf wird es zwischen 1060 und 1400 px eng —
   dort rücken die Punkte etwas zusammen, damit nichts umbricht. */
@media (min-width: 1060px) and (max-width: 1400px) {
  .kopf-nav { gap: 1rem; }
  .kopf-rechts { gap: 1rem; }
  .kopf-nav a, .kopf-tel { font-size: .84rem; }
  .kopf-innen { gap: 1rem; }
}
/* Bis 1240 px reicht der Platz nicht für Telefon UND Knopf — die Nummer steht
   im Startbild und im Handy-Menü, der Knopf „Zimmer buchen" bleibt. */
@media (min-width: 1060px) and (max-width: 1240px) { .kopf-tel { display: none; } }
@media (min-width: 1060px) {
  .kopf-nav, .kopf-aktion { display: flex; }
  .burger, .kopf-mobil { display: none; }
  .kopf-innen { padding: .85rem 2rem; }
  .marke-name { font-size: 1.6rem; }
}

/* -------------------------------------------------------------------- Start */

.start {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 640px; height: 100svh; overflow: hidden;
}
.start-bild { position: absolute; inset: 0; }
.start-bild img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 26s ease-out both;
}
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }

.start-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(20,26,20,.62) 0%, rgba(20,26,20,.46) 45%, rgba(14,18,14,.86) 100%);
}
.start-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 32%, rgba(10,14,10,.5) 100%);
}

.start-innen {
  position: relative; width: 100%; max-width: 50rem; margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 3.5rem) 1.25rem 4.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.start-augenbraue {
  margin: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .28em; color: var(--gold-hell);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
/* seit 04.10.2026: H1 ist die Suchzeile (.start-augenbraue), der Slogan ein <p class="start-titel"> — Aussehen unverändert */
.start .start-titel {
  margin: 1.1rem 0 0; font-size: clamp(2rem, 6vw, 3.2rem);
  color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.start-lead {
  margin: 1rem 0 0; max-width: 34rem;
  color: rgba(255,255,255,.84); font-size: 1.02rem;
}
.start-knoepfe {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2.1rem;
}
.start-fakten {
  display: flex; flex-wrap: wrap; justify-content: center; margin: 2.4rem 0 0; padding: 0;
}
.start-fakten > div { padding: .25rem 1.5rem; border-left: 1px solid rgba(255,255,255,.22); }
.start-fakten > div:first-child { border-left: 0; }
.start-fakten dt {
  font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: #fff;
}
.start-fakten dd {
  margin: .1rem 0 0; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .16em; color: rgba(255,255,255,.62);
}
/* Sitzt bewusst über der Entwurfs-Leiste am unteren Rand, sonst verschwindet er
   dahinter. Auf der veröffentlichten Seite fällt die Leiste weg — dann kann der
   Wert wieder auf 1.6rem. */
.start-pfeil {
  position: absolute; left: 50%; bottom: 4.6rem; translate: -50% 0;
  color: rgba(255,255,255,.65); animation: wippen 2.4s ease-in-out infinite;
}
@media (max-width: 560px) { .start-pfeil { bottom: 6.2rem; } }
@keyframes wippen { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* --------------------------------------------------------------- Abschnitte */

.abschnitt { padding: 5rem 0; }
.abschnitt.eng { padding: 3.4rem 0; }
.abschnitt.creme2 { background: var(--creme-2); }
.abschnitt.wald { background: var(--wald-tief); color: rgba(255,255,255,.86); }
.abschnitt.wald .augenbraue { color: var(--gold-hell); }
.abschnitt.wald h2 { color: #fff; }
.abschnitt.wald .fuehrung { color: rgba(255,255,255,.72); }

.kopfzeile { max-width: 42rem; }
.kopfzeile.mitte { margin: 0 auto; text-align: center; }
.kopfzeile h2 {
  font-family: var(--display); font-weight: 600; line-height: 1.08;
  font-size: clamp(1.75rem, 4vw, 2.5rem); margin: .7rem 0 0;
}
.kopfzeile h1 {
  font-family: var(--display); font-weight: 600; line-height: 1.08;
  font-size: clamp(2rem, 5vw, 2.9rem); margin: .7rem 0 0;
}
.fuehrung { margin: .9rem 0 0; color: var(--tinte-weich); }

.gitter { display: grid; gap: 1.4rem; margin-top: 2.6rem; }
@media (min-width: 700px)  { .g2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px)  { .g3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .g4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------- Bausteine */

.karte {
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 50px -40px rgba(0,0,0,.5);
}
.karte-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme-2); }

/* Kennzeichnung für Platzhalter-Fotos — dieselbe Regel wie in den anderen
   Entwürfen: was nicht aus Adis Haus stammt, sagt das selbst. */
.beispiel-halter { position: relative; }
.beispiel {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 2;
  background: rgba(20,16,12,.68); color: #fff;
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .26rem .6rem; border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.karte:hover .karte-bild img { transform: scale(1.04); }
.karte-innen { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.karte h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.35rem;
  margin: 0 0 .2rem; line-height: 1.2;
}
.karte p { margin: .55rem 0 0; color: var(--tinte-weich); font-size: .93rem; }
.karte .btn { margin-top: 1.1rem; align-self: flex-start; }
.karte-fuss { margin-top: auto; }

.merkmale { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.merkmale li {
  font-size: .74rem; letter-spacing: .02em; padding: .22rem .6rem;
  border: 1px solid var(--linie); border-radius: 999px; color: var(--tinte-weich);
  background: var(--creme);
}

.preis {
  display: flex; align-items: baseline; gap: .4rem; margin-top: 1rem;
  font-family: var(--display);
}
.preis b { font-size: 1.85rem; font-weight: 700; color: var(--bordeaux); line-height: 1; }
.preis span { font-family: var(--text); font-size: .8rem; color: var(--tinte-weich); }

/* Text neben Bild (.haus) */
.haus { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 860px) {
  .haus { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .haus.gedreht .haus-bild { order: 2; }
}
.haus + .haus { margin-top: 3.4rem; }
.haus-bild { border-radius: .5rem; overflow: hidden; aspect-ratio: 3 / 2; background: var(--creme-2); }
.haus-bild img { width: 100%; height: 100%; object-fit: cover; }
.haus h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem,3vw,2rem); margin: .6rem 0 0; }

/* Hofband — die Zeichnung über die volle Seitenbreite, randlos.
   Das Original ist 1512 x 328 px, also sehr flach. Auf breiten Schirmen läuft
   es in seiner natürlichen Höhe durch; auf dem Handy würde es zum Strich
   zusammenfallen, deshalb dort ein höherer Ausschnitt. */
.hofband { position: relative; background: #cfe0ea; line-height: 0; }
.hofband img { width: 100%; height: auto; display: block; }
.hofband-zeile {
  position: absolute; inset: auto 0 0 0; margin: 0;
  padding: 1.6rem 1.25rem .7rem;
  background: linear-gradient(to top, rgba(12,16,12,.62), transparent);
  color: rgba(255,255,255,.92); font-size: .8rem; line-height: 1.45;
  text-align: center; letter-spacing: .02em;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
@media (max-width: 760px) {
  .hofband img { height: 210px; object-fit: cover; object-position: 62% center; }
}
@media (max-width: 460px) {
  .hofband img { height: 180px; object-position: 70% center; }
  .hofband-zeile { font-size: .74rem; padding-top: 1.2rem; }
}

/* Kacheln „Für wen" */
.kachel {
  position: relative; border-radius: .5rem; overflow: hidden;
  aspect-ratio: 3 / 4; display: flex; align-items: flex-end;
  color: #fff; isolation: isolate;
}
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.kachel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(12,16,12,.9) 0%, rgba(12,16,12,.3) 55%, rgba(12,16,12,.1) 100%);
}
.kachel:hover img { transform: scale(1.05); }
.kachel-innen { padding: 1.2rem 1.2rem 1.35rem; }
.kachel h3 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; margin: .35rem 0 0; }
.kachel p { margin: .4rem 0 0; font-size: .87rem; color: rgba(255,255,255,.78); }

/* Pauschalen */
.paket {
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem;
  overflow: hidden; display: flex; flex-direction: column;
}
.paket-bild { aspect-ratio: 16 / 9; overflow: hidden; background: var(--creme-2); }
.paket-bild img { width: 100%; height: 100%; object-fit: cover; }
.paket-innen { padding: 1.3rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.paket h3 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; margin: .3rem 0 0; }
.paket-preis {
  margin: .9rem 0 0; padding: .7rem .85rem; border-radius: .4rem;
  background: var(--creme-2); border: 1px solid var(--linie);
  font-size: .9rem; color: var(--tinte);
}
.paket-preis b { font-family: var(--display); font-size: 1.3rem; color: var(--bordeaux); }
.paket details { margin-top: .9rem; }
.paket summary {
  cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--bordeaux);
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
}
.paket summary::-webkit-details-marker { display: none; }
.paket summary::after { content: '▾'; font-size: .8em; transition: transform .2s ease; }
.paket details[open] summary::after { transform: rotate(180deg); }
.ablauf { list-style: none; margin: .9rem 0 0; padding: 0; font-size: .88rem; }
.ablauf li { display: grid; grid-template-columns: 5.2rem 1fr; gap: .6rem; padding: .42rem 0; border-top: 1px solid var(--linie); }
.ablauf li:first-child { border-top: 0; }
.ablauf b { font-weight: 700; color: var(--wald); font-size: .82rem; letter-spacing: .02em; }
.ablauf span { color: var(--tinte-weich); }
.paket-fuss { margin-top: auto; padding-top: 1.1rem; }

/* Terminplan — Aufklapper am Ende der Arrangements.
   Die Termine standen vorher als eigene lange Section zwischen den Programmen
   und der Region. Wer die Arrangements liest, will die Preise sehen, nicht
   zwei Tabellen — deshalb liegen sie jetzt hinter einem Knopf, direkt dort,
   wo die Frage aufkommt. Der Kasten bleibt dunkel, damit die Tabellen-Optik
   (heller Text auf Waldgrün) unverändert weiterläuft. */
.terminplan {
  margin-top: 2.8rem; background: var(--wald); color: #fff;
  border-radius: .6rem; overflow: hidden;
  box-shadow: 0 30px 64px -44px rgba(0,0,0,.7);
}
.terminplan > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem;
}
.terminplan > summary::-webkit-details-marker { display: none; }
.terminplan-titel { display: grid; gap: .15rem; }
.terminplan-titel b {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: #fff;
}
.terminplan-titel span { font-size: .86rem; color: rgba(255,255,255,.7); }
.terminplan-knopf {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  padding: .58rem 1.05rem; border-radius: .4rem;
  background: var(--gold); color: #1d1712;
  font-size: .88rem; font-weight: 600;
}
.terminplan-knopf::after { content: '▾'; transition: transform .2s ease; }
.terminplan[open] .terminplan-knopf::after { transform: rotate(180deg); }
.terminplan[open] .terminplan-knopf .zu { display: inline; }
.terminplan[open] .terminplan-knopf .auf { display: none; }
.terminplan .zu { display: none; }
.terminplan-innen { padding: 0 1.4rem 1.6rem; }
.terminplan-innen .fuehrung { color: rgba(255,255,255,.78); margin: 0 0 .4rem; }
@media (max-width: 560px) {
  .terminplan > summary { flex-direction: column; align-items: flex-start; }
  .terminplan-knopf { width: 100%; justify-content: center; }
}

/* Termin-Tabelle */
.termine { width: 100%; border-collapse: collapse; margin-top: 1.8rem; font-size: .92rem; }
.termine caption { text-align: left; padding-bottom: .7rem; color: rgba(255,255,255,.68); font-size: .86rem; }
.termine th, .termine td { padding: .62rem .7rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.14); }
.termine th { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-hell); font-weight: 700; }
.termine td:last-child { text-align: right; white-space: nowrap; font-family: var(--display); font-size: 1.05rem; color: #fff; }
.termine tr:last-child td { border-bottom: 0; }
.termine-huelle { overflow-x: auto; }

/* Küche — Liste mit Bildstreifen */
.streifen { display: grid; gap: .8rem; margin-top: 2.4rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .streifen { grid-template-columns: repeat(4, 1fr); } }
.streifen figure { margin: 0; border-radius: .45rem; overflow: hidden; aspect-ratio: 1 / 1; background: var(--creme-2); }
.streifen img { width: 100%; height: 100%; object-fit: cover; }

/* Region */
.region-liste { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.region-liste li { padding: .8rem 0; border-top: 1px solid var(--linie); display: grid; gap: .15rem; }
.region-liste li:first-child { border-top: 0; }
.region-liste b { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.region-liste span { color: var(--tinte-weich); font-size: .9rem; }

/* Galerie */
.galerie { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.4rem; }
@media (min-width: 780px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie figure { margin: 0; border-radius: .45rem; overflow: hidden; aspect-ratio: 1 / 1; background: var(--creme-2); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galerie figure:hover img { transform: scale(1.06); }
.galerie .breit { grid-column: span 2; aspect-ratio: 2 / 1; }

/* Flyer — die gedruckt produzierten Prospekte, digital „auf den Tisch gelegt".
   Jedes Blatt hat A-Format (210:297), liegt leicht gedreht mit Schatten da und
   richtet sich beim Überfahren auf. VORLAGE: solange keine Datei existiert,
   zeigt .flyer-platzhalter eine gestaltete Leerseite — wie der echte Flyer
   reinkommt, steht als Anleitung am HTML der Section (#flyer). */
.flyer-reihe {
  display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr);
  margin-top: 2.8rem;
  /* KD 08.09.2026: „Alle 20 % größer, benutze ruhig die volle Breite der
     Website, die sollen rausstechen." Die Reihe liegt deshalb NICHT in der
     Bahn (76rem), sondern nutzt die ganze Fensterbreite bis 120rem. */
  width: min(100% - 2.5rem, 120rem); margin-left: auto; margin-right: auto;
}
/* 4 Flyer: 2x2, ab 900px alle vier nebeneinander — so gross wie die Breite
   hergibt. Bewusst NICHT drei Spalten — dann stuende das vierte Blatt allein
   in der zweiten Reihe. */
@media (min-width: 780px)  { .flyer-reihe { gap: 1.6rem; } }
@media (min-width: 900px)  { .flyer-reihe { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.2rem; } }
@media (min-width: 1400px) { .flyer-reihe { gap: 2rem; } }
/* Die Drehung liegt auf dem inneren „Papier", nicht auf der figure selbst:
   die figure ist das (unbewegte) Hover-Ziel. Läge der Hover auf dem Element,
   das sich wegdreht, flackert es, sobald der Zeiger an einer Kante steht. */
/* Das Blatt ist ein Knopf (Klick oeffnet den Flyer gross) — aber es soll wie
   Papier aussehen, nicht wie ein Button: deshalb alle Browser-Vorgaben raus. */
.flyer-blatt {
  margin: 0; position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: zoom-in;
}
.flyer-papier {
  display: block;
  position: relative; aspect-ratio: 210 / 297;
  background: #fff; border: 1px solid var(--linie); border-radius: .3rem;
  box-shadow: 0 26px 55px -30px rgba(0,0,0,.5);
  transition: transform .35s ease, box-shadow .35s ease;
}
.flyer-blatt:focus-visible { outline: none; }
.flyer-blatt:focus-visible .flyer-papier {
  outline: 3px solid var(--gold); outline-offset: 4px; transform: rotate(0);
}
/* Die Lupe sagt: das kann man aufmachen. Sonst raet man. */
.flyer-lupe {
  position: absolute; right: .5rem; bottom: .5rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--tinte);
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(.3rem);
  transition: opacity .25s ease, transform .25s ease;
}
.flyer-blatt:hover .flyer-lupe,
.flyer-blatt:focus-visible .flyer-lupe { opacity: 1; transform: translateY(0); }
@media (hover: none) { .flyer-lupe { opacity: 1; transform: none; } }
/* Bildunterschrift: welcher Flyer und was er kostet, ohne ihn zu oeffnen */
.flyer-titel {
  margin: .85rem .15rem 0; display: flex; flex-direction: column; gap: .15rem;
}
.flyer-titel b {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  line-height: 1.25; color: var(--tinte);
}
.flyer-titel span {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-weich);
}
.flyer-blatt:nth-child(4n+1) .flyer-papier { transform: rotate(-1.8deg); }
.flyer-blatt:nth-child(4n+2) .flyer-papier { transform: rotate(1.1deg) translateY(.5rem); }
.flyer-blatt:nth-child(4n+3) .flyer-papier { transform: rotate(2.2deg); }
.flyer-blatt:nth-child(4n)   .flyer-papier { transform: rotate(-1.1deg) translateY(.35rem); }
.flyer-blatt:hover .flyer-papier { transform: rotate(0); box-shadow: 0 36px 65px -28px rgba(0,0,0,.55); }
/* contain, nicht cover: ein Flyer ist ein Dokument — es darf am Rand nichts
   fehlen, auch wenn ein Scan mal nicht exakt A-Format hat. */
.flyer-papier img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.flyer-platzhalter {
  position: absolute; inset: .55rem;
  border: 2px dashed rgba(192,138,46,.5); border-radius: .25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; padding: 1rem; text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(192,138,46,.08), transparent 55%),
    var(--creme);
  color: var(--tinte-weich);
}
.flyer-platzhalter svg { color: var(--gold); }
.flyer-platzhalter strong {
  font-family: var(--display); font-weight: 600;
  font-size: 1.25rem; line-height: 1.2; color: var(--tinte);
}
.flyer-platzhalter span { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; }

/* Flyer gross ansehen — natives <dialog>, kein Fremdcode, kein externer Request */
.flyer-gross {
  border: 0; padding: 0; background: none; max-width: 100%; max-height: 100%;
  width: min(94vw, 62rem); height: auto;
}
.flyer-gross::backdrop { background: rgba(24,20,14,.86); }
.flyer-gross img {
  display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain;
  border-radius: .3rem; background: #fff; box-shadow: 0 30px 70px -25px rgba(0,0,0,.7);
}
.flyer-gross form { position: absolute; top: -.5rem; right: -.5rem; }
.flyer-zu {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--creme); color: var(--tinte);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px -2px rgba(0,0,0,.5);
}
.flyer-zu:hover { background: #fff; }
@media (max-width: 560px) { .flyer-gross form { top: .4rem; right: .4rem; } }

/* Stimmen */
.stimmen { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 820px) { .stimmen { grid-template-columns: repeat(3, 1fr); } }
.stimme {
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem;
  padding: 1.3rem 1.35rem;
}
.stimme p { margin: 0; font-family: var(--display); font-size: 1.15rem; line-height: 1.45; }
.stimme footer { margin-top: .8rem; font-size: .78rem; color: var(--tinte-weich); letter-spacing: .04em; }
.hinweis {
  margin-top: 1.6rem; padding: .9rem 1.1rem; border-radius: .45rem;
  background: rgba(192,138,46,.12); border: 1px solid rgba(192,138,46,.35);
  font-size: .86rem; color: var(--tinte-weich);
}

/* Bewertungen — ganz unten, zum Lesen gemacht.
   Bewusst OHNE Sterne-Zahl und ohne Gästenamen: beides ist nicht belegt
   (INHALTE.md), und erfundene Bewertungen sind bei einem Hotel der teuerste
   denkbare Fehler. Was hier steht, sind die Punkte, die auf HRS, Hotels.com
   und bikerbetten.de wiederholt gelobt werden. */
.bewertung-kopf {
  display: grid; gap: 1.4rem; margin-top: 2.2rem; align-items: center;
}
@media (min-width: 820px) { .bewertung-kopf { grid-template-columns: 17rem 1fr; } }
.bewertung-portale {
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem;
  padding: 1.2rem 1.3rem;
}
.bewertung-portale h3 {
  margin: 0 0 .8rem; font-family: var(--display); font-weight: 600; font-size: 1.15rem;
}
.bewertung-portale ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.bewertung-portale li {
  padding: .48rem 0; border-top: 1px solid var(--linie); color: var(--tinte-weich);
}
.bewertung-portale li:first-child { border-top: 0; }
.bewertung-portale b { color: var(--tinte); font-weight: 600; }
.themen { display: flex; flex-wrap: wrap; gap: .5rem; }
.thema {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .48rem .9rem; border-radius: 2rem;
  background: rgba(62,71,64,.08); border: 1px solid rgba(62,71,64,.18);
  font-size: .87rem; color: var(--wald); font-weight: 600;
}
.thema svg { color: var(--gold); }
.bewertungen { display: grid; gap: 1rem; margin-top: 1.8rem; }
@media (min-width: 700px) { .bewertungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bewertungen { grid-template-columns: repeat(3, 1fr); } }
.bewertung {
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem;
  padding: 1.25rem 1.3rem; margin: 0;
  display: flex; flex-direction: column;
}
.bewertung-thema {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--gold); margin: 0 0 .55rem;
}
.bewertung p { margin: 0; font-family: var(--display); font-size: 1.12rem; line-height: 1.5; }
.bewertung footer {
  margin-top: auto; padding-top: .9rem; font-size: .78rem;
  color: var(--tinte-weich); letter-spacing: .03em;
}
.bewertung-mehr { margin-top: 1.6rem; }
.bewertung-mehr > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .9rem; color: var(--bordeaux);
}
.bewertung-mehr > summary::-webkit-details-marker { display: none; }
.bewertung-mehr > summary::after { content: '▾'; transition: transform .2s ease; }
.bewertung-mehr[open] > summary::after { transform: rotate(180deg); }
.bewertung-mehr[open] > summary .auf { display: none; }
.bewertung-mehr .zu { display: none; }
.bewertung-mehr[open] > summary .zu { display: inline; }

/* Buchungsleiste */
.leiste-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: .55rem;
  padding: 1.3rem 1.35rem 1.45rem;
  box-shadow: 0 30px 64px -42px rgba(0,0,0,.6);
  margin-top: -4.4rem; position: relative; z-index: 5;
}
.leiste-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; margin-bottom: 1rem; }
.leiste-kopf strong { font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.leiste-kopf span { color: var(--tinte-weich); font-size: .88rem; }
.leiste { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .leiste { grid-template-columns: 1fr 1fr .8fr auto; align-items: end; } }
.feld { display: flex; flex-direction: column; gap: .3rem; }
.feld label { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tinte-weich); font-weight: 700; }
.feld input, .feld select {
  font-family: inherit; font-size: .95rem; color: var(--tinte);
  padding: .68rem .7rem; border: 1px solid var(--linie); border-radius: .4rem;
  background: var(--creme); width: 100%;
}
.feld .btn { width: 100%; padding-block: .78rem; }
/* KD 04.10.2026: „mach den Buchungs kack als banner“ — die Leiste läuft als weißes
   Band über die volle Fensterbreite, ohne Kartenrand und ohne Überlappung. */
.leiste-band { background: #fff; border-block: 1px solid var(--linie); }
.leiste-band .leiste-karte { margin-top: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
/* Zwei Fotos nebeneinander in einer Karte (Freibad, 04.10.2026). */
.karte-bild.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }

/* Kontakt */
.kontakt { display: grid; gap: 2rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .kontakt { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
.kontakt-liste { list-style: none; margin: 0; padding: 0; }
.kontakt-liste li { display: flex; gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--linie); }
.kontakt-liste li:first-child { border-top: 0; }
.kontakt-liste svg { flex: none; margin-top: .18rem; color: var(--gold); }
.kontakt-liste b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tinte-weich); }
.kontakt-liste a, .kontakt-liste span { font-size: 1rem; }
.kontakt-liste a:hover { color: var(--bordeaux); }
.karte-rahmen { border-radius: .5rem; overflow: hidden; border: 1px solid var(--linie); background: var(--creme); aspect-ratio: 4 / 3; }
.anfahrt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; text-align: center; padding: 1.8rem 1.5rem;
}
.anfahrt-adresse { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.35; }
.anfahrt-text { margin: 0; max-width: 24rem; color: var(--tinte-weich); font-size: .9rem; }

/* Fuß */
.fuss { background: var(--wald-tief); color: rgba(255,255,255,.68); padding: 3rem 0 2rem; font-size: .88rem; }
.fuss-innen { display: grid; gap: 2rem; }
@media (min-width: 800px) { .fuss-innen { grid-template-columns: 1.3fr 1fr 1fr; } }
.fuss h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--gold-hell); margin: 0 0 .8rem; }
.fuss a:hover { color: #fff; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fuss-unten {
  margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .8rem; color: rgba(255,255,255,.5);
}
.fuss .marke { align-items: flex-start; text-align: left; }
.fuss .marke-name { color: #fff; }
.fuss .marke-name em { color: var(--gold-hell); }
.fuss .marke-zeile { color: rgba(255,255,255,.55); }

/* ----------------------------------------------------------- Unterseiten */
/* Seitenkopf: das Startbild der Unterseite — dieselbe Schleier-/Vignetten-
   Optik wie das Startbild auf index.html, nur niedriger. Die Kopfzeile liegt
   transparent darüber und wird beim Scrollen fest, genau wie auf der Startseite. */
.seitenkopf {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: 24rem; height: 52svh; max-height: 36rem;
}
.seitenkopf-bild { position: absolute; inset: 0; }
.seitenkopf-bild img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf .start-schleier { background: linear-gradient(to bottom, rgba(20,26,20,.55) 0%, rgba(20,26,20,.35) 40%, rgba(14,18,14,.82) 100%); }
.seitenkopf-innen {
  position: relative; width: 100%; max-width: var(--bahn); margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 2rem) 1.25rem 3rem;
}
.seitenkopf .start-augenbraue { text-align: left; }
.seitenkopf h1 {
  margin: .9rem 0 0; font-size: clamp(2rem, 5.5vw, 3.1rem); max-width: 16em;
  color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.seitenkopf-lead { margin: .9rem 0 0; max-width: 36rem; color: rgba(255,255,255,.84); font-size: 1.02rem; }
.seitenkopf .start-knoepfe { justify-content: flex-start; margin-top: 1.6rem; }
@media (min-width: 1060px) { .seitenkopf-innen { padding-left: 2rem; padding-right: 2rem; } }

/* Sprungmarken: auf langen Seiten (Arrangements, Für wen) eine Chip-Reihe unter
   dem Seitenkopf — dieselbe Optik wie die Themen-Chips bei den Bewertungen. */
.sprungmarken { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.sprungmarken a { transition: background .2s ease, border-color .2s ease; }
.sprungmarken a:hover { background: rgba(62,71,64,.16); border-color: var(--wald); }

/* Teaser auf der Startseite: Knopfzeile unter einem kompakten Ausschnitt */
.mehr { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2.4rem; }
.mehr.links { justify-content: flex-start; }
.mehr .btn { white-space: normal; text-align: center; }

/* Platzhalter für Angaben, die Adi Gombert noch bestätigen muss. Sichtbar
   gestrichelt, damit im Gespräch niemand einen Platzhalter für eine Zusage hält.
   Vor dem Live-Gang muss jeder .pruefen-Block gefüllt oder gelöscht sein. */
.pruefen {
  margin-top: 1.4rem; padding: .9rem 1.1rem; border-radius: .45rem;
  border: 2px dashed rgba(192,138,46,.6); background: rgba(192,138,46,.08);
  font-size: .88rem; color: var(--tinte-weich);
}
.pruefen b { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--gold-tief); margin-bottom: .3rem; }
.pruefen ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.pruefen li + li { margin-top: .15rem; }
.abschnitt.wald .pruefen { color: rgba(255,255,255,.8); border-color: rgba(229,180,95,.55); background: rgba(229,180,95,.1); }
.abschnitt.wald .pruefen b { color: var(--gold-hell); }

/* Arrangement im Detail: Flyer-Blatt neben dem Text (Raster wie .haus) */
.haus-flyer { max-width: 22rem; margin: 0 auto; width: 100%; }
.haus-flyer .flyer-blatt { cursor: zoom-in; }
.haus-flyer .flyer-papier { transform: rotate(-1.2deg); }
.haus-flyer .flyer-blatt:hover .flyer-papier { transform: rotate(0); }
.haus .paket-preis { margin-top: 1.1rem; }
.haus .ablauf { margin-top: 1.2rem; }
.haus .ablauf li { grid-template-columns: 6rem 1fr; }
.leistungen { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .93rem; color: var(--tinte-weich); }
.leistungen li { display: flex; gap: .6rem; align-items: flex-start; }
.leistungen li::before { content: '✓'; color: var(--gold); font-weight: 700; flex: none; }

/* Preistabelle (Zimmer) — helle Fassung der Termin-Tabelle */
.preise { width: 100%; border-collapse: collapse; margin-top: 1.8rem; font-size: .95rem; background: #fff; border: 1px solid var(--linie); border-radius: .5rem; overflow: hidden; }
.preise th, .preise td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--linie); }
.preise th { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tinte-weich); background: var(--creme-2); }
.preise td:last-child { text-align: right; white-space: nowrap; font-family: var(--display); font-size: 1.1rem; color: var(--bordeaux); font-weight: 600; }
.preise tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) { .preise td:last-child { white-space: normal; } .preise th, .preise td { padding: .7rem .6rem; } }
.preise small { display: block; font-size: .78rem; color: var(--tinte-weich); font-family: var(--text); font-weight: 400; }

/* Zitat (echte, veröffentlichte Gästestimme mit Quelle) */
.zitat {
  margin: 2.2rem 0 0; padding: 1.6rem 1.8rem; background: #fff; border-left: 4px solid var(--gold);
  border-radius: 0 .5rem .5rem 0; box-shadow: 0 24px 50px -40px rgba(0,0,0,.5);
}
.zitat p { margin: 0; font-family: var(--display); font-size: 1.15rem; line-height: 1.5; }
.zitat footer { margin-top: .9rem; font-size: .8rem; color: var(--tinte-weich); }

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: 2.4rem 0 .5rem; }
.rechtstext h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 1.6rem 0 .3rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-weich); font-size: .97rem; }
.rechtstext p { margin: .6rem 0 0; }
.rechtstext ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.rechtstext a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 2px; }
.rechtstext address { font-style: normal; margin-top: .6rem; line-height: 1.7; }
.rechtstext dl { margin: .8rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; }
.rechtstext dt { font-weight: 600; color: var(--tinte); }
.rechtstext dd { margin: 0; color: var(--tinte-weich); }
@media (max-width: 560px) { .rechtstext dl { grid-template-columns: 1fr; gap: .1rem; } .rechtstext dd { margin-bottom: .5rem; } }

/* Galerie-Seite: Gruppen mit Zwischenüberschrift */
.galerie-gruppe + .galerie-gruppe { margin-top: 3rem; }
.galerie-gruppe h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: 0; }
.galerie-gruppe .galerie { margin-top: 1.2rem; }
.galerie figure { position: relative; }

/* ------------------------------------------------------------- Bewegungsarm */

@media (prefers-reduced-motion: reduce) {
  .start-bild img, .start-pfeil {
    animation: none !important; transform: none !important;
  }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ===========================================================================
   Überarbeitung 23.09.2026 (Plan „ADI Hotels Knüllwald: Überarbeitung“,
   Schritte 1a/1b/1c/1e). Alles Neue steht in diesem Block, damit die parallel
   laufende Corporate-Design-Arbeit (Schrift, Radius, Ornamente) oben ungestört
   bleibt. Keine neuen Schriftfamilien, keine neuen Farben — einzige Ausnahme:
   der Monteur-Knopf nutzt var(--wald) als eigene Knopffarbe.
   =========================================================================== */

/* ---------------------------------------------------------- Monteur-Knopf */
.btn-monteur {
  background: var(--wald); color: #fff;
  border-color: rgba(229,180,95,.55);
}
.btn-monteur:hover { background: var(--wald-tief); border-color: var(--gold-hell); }
.btn-monteur svg { color: var(--gold-hell); }

/* ------------------------------------------------- Startbild als Slideshow */
/* Zwei Folien liegen übereinander, nur .aktiv ist sichtbar (Überblendung über
   opacity, gesteuert von seite.js). Ohne JavaScript bleibt Folie 1 stehen. Bei
   prefers-reduced-motion schaltet seite.js nicht selbst weiter — die Punkte
   unten rechts funktionieren trotzdem. */
.start-bild .folie {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  opacity: 0; transition: opacity 1.6s ease;
}
/* isolation: eigener Stapelkontext je Folie — nichts aus einer Folie schiebt
   sich über Text und Knöpfe des Startbilds. */
.start-bild .folie.aktiv { opacity: 1; }
.start-bild .folie img { animation: none; }

/* Folie 1 — das Aquarell. Das Original ist sehr flach (1512 × 328 px): es
   steht unten über die ganze Breite, darüber ein gemalter Himmel aus einem
   Verlauf — so wird nichts hochgerechnet und nichts verpixelt. */
.folie-aquarell { background: linear-gradient(to bottom, #7fa7c4 0%, #b7cfdf 55%, #dfe9ee 100%); }
.folie-aquarell .folie-scharf {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: clamp(200px, 48%, 430px);
  object-fit: cover; object-position: 60% 70%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
}
.folie.aktiv .folie-scharf { animation: kenburns 26s ease-out both; transform-origin: 50% 100%; }

/* Folie 2 — Platzhalter, bis Adis Außenfotos da sind (nicht das Fachwerk-Bild). */
.folie-platzhalter {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(62,71,64,.2), rgba(20,26,20,.8)),
    var(--wald);
}
.folie-platzhalter .foto-folgt {
  position: absolute; inset: calc(var(--kopf-hoehe) + 1rem) 1.2rem 4.4rem;
  width: auto; height: auto;
  border-color: rgba(255,255,255,.4); background: none; color: rgba(255,255,255,.9);
  align-items: start; justify-items: end; padding: 1rem 1.2rem; font-size: .85rem;
}

/* Folien-Punkte */
.folien-punkte {
  position: absolute; right: 1.25rem; bottom: 4.6rem; z-index: 3;
  display: flex; gap: .5rem;
}
.folien-punkte button {
  width: .8rem; height: .8rem; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.8); background: transparent;
}
.folien-punkte button[aria-current="true"] { background: var(--gold-hell); border-color: var(--gold-hell); }
/* Handy: die Punkte sitzen mittig direkt unter der Kopfzeile, die vier Knöpfe
   rücken zu einem Raster zusammen (Monteur und Arrangements über die volle
   Breite), damit das Startbild nicht überläuft. Der Platzhalter-Text von
   Folie 2 wandert nach unten, weg von Augenbraue und Punkten. */
@media (max-width: 759px) {
  .start { height: auto; min-height: 100svh; }
  .folien-punkte { bottom: auto; top: calc(var(--kopf-hoehe) + .55rem); right: auto; left: 50%; translate: -50% 0; }
  .start-innen { padding-top: calc(var(--kopf-hoehe) + 2.7rem); padding-bottom: 11rem; }
  .start-fakten > div { padding: .2rem .75rem; }
  .start-fakten dt { font-size: 1.15rem; }
  .start-fakten dd { font-size: .6rem; letter-spacing: .1em; }
  .start-knoepfe { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: .5rem; width: 100%; max-width: 24rem; margin-top: 1.6rem; }
  .start-knoepfe .btn { padding: .72rem .5rem; font-size: .88rem; }
  .start-knoepfe .btn-monteur, .start-knoepfe .btn-hell { grid-column: 1 / -1; }
  .start .start-titel { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .start-fakten { margin-top: 1.6rem; }
  .folie-platzhalter .foto-folgt { inset: calc(var(--kopf-hoehe) + 2rem) .8rem 8.9rem; align-items: end; justify-items: center; padding: .7rem; font-size: .72rem; }
}

/* ---------------------------------------------- Platzhalter „Foto folgt“ */
/* Überall, wo ein Stock-Bild stand oder ein eigenes Foto fehlt: sichtbar
   leer, mit Ansage, was dort hingehört. Vor dem Live-Gang ersetzen. */
.foto-folgt {
  display: grid; place-items: center; text-align: center;
  width: 100%; height: 100%; min-height: 10rem; padding: 1.2rem;
  border: 2px dashed rgba(36,31,27,.28); border-radius: inherit;
  background: repeating-linear-gradient(135deg, var(--creme-2) 0 14px, var(--creme) 14px 28px);
  color: var(--tinte-weich); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
}
.foto-folgt::before { content: 'Foto folgt: ' attr(data-was); }
.foto-folgt.dunkel {
  position: absolute; inset: 0; z-index: -2;
  background: repeating-linear-gradient(135deg, #36403a 0 14px, #313a34 14px 28px);
  border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.7);
  place-items: start center; padding-top: 1.4rem;
}

/* --------------------------------------------------------- Handy-Leiste */
.handy-leiste { display: none; }
@media (max-width: 759px) {
  .handy-leiste {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: .5rem;
    position: fixed; inset: auto 0 0 0; z-index: 85;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(250,249,245,.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -10px 30px -18px rgba(0,0,0,.5);
  }
  .handy-leiste .btn { padding: .72rem .6rem; font-size: .9rem; }
  /* Das Entwurfs-Band rückt über die Leiste. */
  .band { bottom: 3.6rem; }
  body { padding-bottom: 8.6rem; }
  .start-pfeil { display: none; }
}

/* ------------------------------------------------ „Unsere Angebote“ */
.angebote { display: grid; gap: 1.4rem; margin-top: 2.6rem; }
@media (min-width: 760px) { .angebote { grid-template-columns: repeat(2, 1fr); } }
.angebot { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }
.angebot .paket-preis small { display: block; margin-top: .25rem; color: var(--tinte-weich); font-size: .82rem; }
.angebot .leistungen { font-size: .9rem; margin-top: 1rem; }
.getraenke-flat {
  margin: 1rem 0 0; padding: .75rem .9rem; border-radius: .4rem;
  border: 1px solid rgba(192,138,46,.55); background: rgba(192,138,46,.1);
  font-size: .88rem; color: var(--tinte);
}
.getraenke-flat b { color: var(--gold-tief); }
.nebenbei {
  margin: 2rem auto 0; max-width: 46rem; text-align: center;
  font-size: .95rem; color: var(--tinte-weich);
}
.nebenbei a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 2px; }

/* Drei Flyer (seit Kegel raus ist): drei Spalten, etwas schmalere Reihe,
   damit die Blätter nicht riesig werden. Auf dem Handy bleiben es zwei
   Spalten — das dritte Blatt steht mittig darunter. */
@media (min-width: 900px) {
  .flyer-reihe.drei { grid-template-columns: repeat(3, 1fr); width: min(100% - 2.5rem, 72rem); gap: 2.4rem; }
}
@media (max-width: 899px) {
  .flyer-reihe.drei > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - .8rem); justify-self: center; }
}

/* Flyer-Dialog mit zwei Seiten (Vorder- und Rückseite). Der Dialog passt sich
   seit 23.09.2026 der Bildbreite an (vorher weiße Ränder links und rechts). */
.flyer-gross { width: fit-content; max-width: 94vw; }
.flyer-gross form { top: 3.4rem; right: .5rem; z-index: 2; }
.flyer-gross:has(.flyer-seiten[hidden]) form { top: .5rem; }
.flyer-gross img { width: auto; max-width: 100%; margin-inline: auto; }
.flyer-seiten {
  display: flex; justify-content: center; gap: .5rem; margin: 0 0 .6rem;
}
.flyer-seiten[hidden] { display: none; }
.flyer-seiten button {
  padding: .5rem 1rem; border-radius: .4rem; cursor: pointer;
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35); color: #fff;
  font: inherit; font-size: .85rem; font-weight: 600;
}
.flyer-seiten button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1d1712; }
.flyer-gross:has(.flyer-seiten:not([hidden])) img { max-height: calc(88vh - 3rem); }
.flyer-rueckseite-hinweis { display: block; margin-top: .2rem; font-size: .72rem; color: var(--gold-tief); letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------- Anfrageformular */
.anfrage { max-width: 52rem; }
.anfrage-karte {
  margin-top: 2rem; background: #fff; border: 1px solid var(--linie); border-radius: .55rem;
  padding: 1.5rem 1.4rem 1.7rem; box-shadow: 0 30px 64px -46px rgba(0,0,0,.6);
}
.anfrage-form { display: grid; gap: 1rem; }
.anfrage-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1rem; min-width: 0; }
.anfrage-form legend {
  padding: 0; margin-bottom: .2rem;
  font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--tinte);
}
.anfrage-form fieldset + fieldset { border-top: 1px solid var(--linie); padding-top: 1.3rem; }
.reihe { display: grid; gap: 1rem; }
@media (min-width: 640px) { .reihe.r2 { grid-template-columns: 1fr 1fr; } .reihe.r3 { grid-template-columns: 1fr 1fr 1fr; } }
.feld textarea {
  font-family: inherit; font-size: .95rem; color: var(--tinte);
  padding: .68rem .7rem; border: 1px solid var(--linie); border-radius: .4rem;
  background: var(--creme); width: 100%; min-height: 7rem; resize: vertical;
}
.feld small { color: var(--tinte-weich); font-size: .8rem; }
.feld-titel { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tinte-weich); font-weight: 700; }
.feld label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.auswahl label { text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--tinte); font-size: .9rem; }
.pflicht { color: var(--bordeaux); }
.haken {
  display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--tinte);
}
.haken input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--bordeaux); flex: none; }
.auswahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.auswahl label {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .5rem .85rem; border: 1px solid var(--linie); border-radius: .4rem;
  background: var(--creme); font-size: .9rem;
}
.auswahl input { accent-color: var(--bordeaux); }
.auswahl label:has(input:checked) { border-color: var(--bordeaux); background: rgba(122,35,32,.06); }
.mindest {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem 1rem; border-radius: .45rem;
  background: rgba(62,71,64,.08); border: 1px solid rgba(62,71,64,.2);
  font-size: .9rem; color: var(--wald);
}
.mindest svg { flex: none; margin-top: .15rem; color: var(--gold); }
.form-fehler { color: var(--bordeaux); font-size: .88rem; font-weight: 600; min-height: 1.2em; margin: 0; }
.honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.anfrage-danke {
  text-align: center; padding: 1rem .5rem;
}
.anfrage-danke h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: .6rem 0 0; }
.anfrage-danke p { color: var(--tinte-weich); max-width: 34rem; margin: .8rem auto 0; }
.art-wahl { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.art-wahl a[aria-current] { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------ Monteurseite */
.checkliste {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: .7rem;
}
@media (min-width: 760px) { .checkliste { grid-template-columns: 1fr 1fr; } }
.checkliste li {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--linie); border-radius: .45rem;
  padding: .9rem 1rem; font-size: .96rem; color: var(--tinte);
}
.checkliste li::before {
  content: '✓'; flex: none; display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--wald); color: var(--gold-hell); font-weight: 700; font-size: .9rem;
}
.checkliste small { display: block; color: var(--tinte-weich); font-size: .84rem; margin-top: .15rem; }
.chef-satz {
  margin: 1.1rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.35; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.foto-reihe { display: grid; gap: .9rem; margin-top: 2.2rem; }
@media (min-width: 760px) { .foto-reihe { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .foto-reihe .foto.breit2 { grid-column: span 2; aspect-ratio: auto; } .foto-reihe .foto.breit2 img { position: absolute; inset: 0; } }
.foto-reihe .foto-folgt { aspect-ratio: 4 / 3; height: auto; border-radius: .45rem; }
.umgebung { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 820px) { .umgebung { grid-template-columns: 1fr 1fr; } }
.umgebung li {
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem; padding: 1.1rem 1.2rem;
  scroll-margin-top: calc(var(--kopf-hoehe) + 1rem);
}
.umgebung h3, .umgebung h4 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.umgebung .weg { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-tief); }
.umgebung p { margin: .45rem 0 0; font-size: .92rem; color: var(--tinte-weich); }
.umgebung-stufe {
  margin: 2.6rem 0 0; padding-bottom: .5rem; border-bottom: 1px solid var(--linie);
  font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 3vw, 1.5rem); color: var(--bordeaux);
}
.umgebung-stufe + .umgebung { margin-top: 1.2rem; }
.umgebung-klein { margin: 1rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--tinte-weich); max-width: 60rem; overflow-wrap: anywhere; }
.umgebung-klein b { color: var(--tinte); }
.faq { margin-top: 2rem; display: grid; gap: .6rem; max-width: 50rem; }
.faq details { background: #fff; border: 1px solid var(--linie); border-radius: .45rem; padding: 0 1.1rem; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600; color: var(--tinte);
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '▾'; color: var(--bordeaux); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { margin: 0 0 1rem; color: var(--tinte-weich); font-size: .94rem; }

@media (prefers-reduced-motion: reduce) {
  .start-bild .folie { transition: none; }
  .folie.aktiv .folie-scharf { animation: none !important; }
}
/* Kopfzeile: seit „Monteurzimmer“ rechts in der Navigation steht, wird es
   zwischen 1060 und 1200 px zu eng (gemessen 23.09.2026: 28 px Überstand bei
   1060 px). Dort rücken Punkte und Abstände noch etwas zusammen. */
@media (min-width: 1060px) and (max-width: 1200px) {
  .kopf-nav, .kopf-rechts { gap: .7rem; }
  .kopf-innen { gap: .7rem; padding-left: 1.25rem; padding-right: 1.25rem; }
  .kopf-nav a { font-size: .8rem; }
  .kopf-aktion .btn { padding-inline: 1rem; }
}
/* Ab 1400 px steht die volle Navigation samt Telefonnummer — dafür darf die
   Kopfzeile etwas breiter sein als die Bahn, sonst rutscht die Marke aus der Mitte. */
@media (min-width: 1400px) { .kopf-innen { max-width: calc(var(--bahn) + 8rem); } }
/* Anfrageformular: [hidden] muss gegen display:flex/grid gewinnen, und die
   Auswahlknöpfe dürfen die Textfeld-Optik von .feld input nicht erben. */
.anfrage-form [hidden], .anfrage-form[hidden], .anfrage-danke[hidden] { display: none !important; }
.feld .auswahl input, .feld .haken input, .haken input {
  width: 1rem; height: 1rem; padding: 0; margin: 0; border: 0; background: none; flex: none;
}
.auswahl label { white-space: nowrap; }
@media (max-width: 420px) { .auswahl label { white-space: normal; } }

/* ===========================================================================
   KD-Ansage 24.09.2026, 11:20 — Logo größer, Knopf-Schrift, Hero, Angebote.
   =========================================================================== */

/* ------------------------------------------------ Knopf- und Formularschrift */
/* Mulish (SIL Open Font License, schriften/OFL-mulish.txt) — SELBST gehostet, kein
   Request an Google (LG München I, 3 O 17493/20). Variable Schrift, eine Datei
   deckt 200–1000 ab; latin + latin-ext getrennt, der Browser lädt nur, was er braucht.
   Nur für Knöpfe und Formulare — Überschriften (Georgia) und Fließtext bleiben
   (KD 23.09.2026: „Bleiben bei der jetzigen Schrift.“). Vorbild: KDs Screenshot
   vom 24.09.2026, 11:18 („Details & Reservierung“). */
@font-face {
  font-family: 'Mulish';
  font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('schriften/mulish-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: 'Mulish';
  font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('schriften/mulish-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;
}
:root { --knopf: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

.btn {
  font-family: var(--knopf); font-weight: 600;
  font-size: .98rem; letter-spacing: .06em;
}
.leiste :is(label, input, select, button),
.anfrage-form :is(label, input, select, textarea, button, small, .feld-titel, .haken, .mindest, .form-fehler),
.flyer-seiten button {
  font-family: var(--knopf);
}
.feld input, .feld select, .feld textarea { font-size: 1rem; font-weight: 500; letter-spacing: .02em; }
.feld label, .feld-titel { font-weight: 700; letter-spacing: .12em; }
.auswahl label { font-weight: 600; letter-spacing: .03em; font-size: .95rem; }

/* ------------------------------------------------ Marke (Logo) größer */
/* +38 % auf dem Desktop, +20 % auf dem Handy. Die Kopfzeile wird dadurch etwas
   höher — --kopf-hoehe zieht mit (Abstand unter der festen Kopfzeile). */
.marke-name { font-size: 1.7rem; }
.marke-zeile { font-size: .6rem; margin-top: .28rem; }
:root { --kopf-hoehe: 4.6rem; }
@media (min-width: 1060px) {
  :root { --kopf-hoehe: 5rem; }
  .kopf-innen { padding-top: .8rem; padding-bottom: .8rem; }
  .marke-name { font-size: 2.2rem; letter-spacing: .035em; }
  .marke-zeile { font-size: .66rem; margin-top: .34rem; letter-spacing: .24em; }
}
/* Knopf in der Kopfzeile bleibt kompakt, sonst wird es bei 1060 px eng. */
.kopf-aktion .btn { font-size: .9rem; letter-spacing: .05em; padding: .68rem 1.2rem; }
@media (min-width: 1060px) and (max-width: 1200px) {
  .kopf-aktion .btn { padding-inline: .9rem; letter-spacing: .03em; }
}
/* Die Schrift der Fußzeilen-Marke bleibt wie gehabt. */
.fuss .marke-name { font-size: 1.6rem; }
.fuss .marke-zeile { font-size: .6rem; }

/* ------------------------------------------------ Startbild */
/* Überschrift näher unter die Kopfzeile, die Knöpfe sind die lauteste Stelle,
   die Fakten (60 Betten · ab 60 € · Knüll) wandern dezent an den unteren Rand. */
.start { align-items: stretch; }
.start-innen {
  justify-content: flex-start;
  padding-top: calc(var(--kopf-hoehe) + 2.2rem);
  padding-bottom: 7.4rem;
}
.start-knoepfe { margin-top: 2.2rem; }
/* Ab 1200 px stehen alle vier Knöpfe in einer Reihe — breiter als der Textblock. */
@media (min-width: 1200px) { .start-knoepfe { width: min(100vw - 2.5rem, 72rem); flex-wrap: nowrap; } }
.start-knoepfe .btn { font-size: 1rem; padding: .9rem 1.6rem; }
.start-fakten { margin-top: auto; padding-top: 2rem; opacity: .82; }
.start-fakten dt { font-size: 1.12rem; }
.start-fakten dd { font-size: .6rem; }
.start-fakten > div { padding: .15rem 1.2rem; border-left-color: rgba(255,255,255,.18); }
@media (max-width: 759px) {
  .start-innen { padding-top: calc(var(--kopf-hoehe) + 2.4rem); padding-bottom: 9.5rem; min-height: 100svh; }
  .start-knoepfe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .start-knoepfe .btn { padding: .8rem .5rem; font-size: .9rem; letter-spacing: .02em; min-width: 0; white-space: normal; }
  .start-knoepfe .btn-creme { grid-column: 1 / -1; }
  .start-knoepfe .btn { padding-inline: .4rem; }
  @media (max-width: 420px) { .start-knoepfe .btn-bordeaux svg { display: none; } .start-knoepfe .btn-bordeaux { letter-spacing: .01em; } }
  .start-fakten dt { font-size: 1rem; }
  .start-fakten dd { font-size: .56rem; }
}

/* „Unsere Arrangements“: gefüllt statt dünner Rahmen (KD: „sehe ich gerne übersehen“). */
.btn-creme { background: var(--creme); color: var(--tinte); border-color: rgba(255,255,255,.9); }
.btn-creme:hover { background: #fff; }
.btn-creme svg { color: var(--bordeaux); }

/* ------------------------------------------------ Haus Gombert: drei Gebäude */
.haus .ablauf.gebaeude li { grid-template-columns: 7.6rem 1fr; }

/* ------------------------------------------------ Angebote: gleiche Höhen */
/* Titel/Text, Preis, Leistungen, Getränke-Flat und Knöpfe stehen in allen drei
   Karten auf derselben Linie (KD 24.09.2026). CSS-Subgrid: jede Karte übernimmt
   die Zeilen des äußeren Rasters. Ohne Subgrid-Unterstützung bleibt es wie vorher. */
@media (min-width: 760px) {
  @supports (grid-template-rows: subgrid) {
    .angebote { grid-template-rows: auto; row-gap: 0; }
    .angebote > .angebot {
      display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0;
    }
    .angebot > .paket-innen {
      display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
    }
    .angebot .paket-fuss { margin-top: 0; align-self: end; }
    .angebot .leistungen, .angebot .angebot-kopf { align-self: start; }
  }
}
.angebot .paket-fuss { padding-top: 1.2rem; margin-top: 0; }

/* „Unsere Arrangements“ im Startbild: dicke Schrift (KD 24.09.2026, 11:27). */
.btn-creme { font-weight: 800; }

/* ------------------------------------------------ Flyer-Schrift */
/* Barlow Condensed 800 schräg (SIL OFL, schriften/OFL-barlow.txt), selbst
   gehostet — nur für die Flyer-Titel in „Unsere Angebote“ (.flyertitel). */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic; font-weight: 800; font-display: swap;
  src: url('schriften/barlow-condensed-800-italic-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: 'Barlow Condensed';
  font-style: italic; font-weight: 800; font-display: swap;
  src: url('schriften/barlow-condensed-800-italic-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;
}
.flyertitel {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800;
  line-height: 1; letter-spacing: .005em; color: var(--bordeaux);
}
.paket .flyertitel { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 2rem; margin: .35rem 0 0; }

/* ------------------------------------------------ Angebote: Knüller + Fächer */
/* KD 24.09.2026, 11:43: links das Knüller-Wochenende als Text, rechts die drei
   Flyer als Fächer auf dunklem Holz (Design der früheren Flyer-Folie). Die
   Bühne ist dunkel, der Text bleibt auf hellem Grund — so ist er bequem lesbar. */
.knueller { display: grid; gap: 2rem; margin-top: 2.6rem; }
/* Links bleibt die Textspalte so breit wie vorher (1 von 2,1 Teilen), die Bühne
   ist 12,5 % schmaler als ihre alten 1,1 Teile (KD 24.09.2026, 15:10) — der
   freie Rest geht in den Abstand. */
@media (min-width: 980px) {
  .knueller {
    grid-template-columns: calc((100% - 2.8rem) / 2.1) calc((100% - 2.8rem) * 1.1 * .875 / 2.1);
    justify-content: space-between; column-gap: 2.8rem; align-items: stretch;
  }
}
.knueller-titel { margin: .5rem 0 0; font-size: clamp(2.5rem, 5vw, 3.6rem); }
.knueller .fuehrung { margin-top: .9rem; }
.knueller .paket-preis { line-height: 1.7; }
.paket-preis .leise { color: var(--tinte-weich); font-size: .85rem; }
.knueller .ablauf { margin-top: 1.1rem; font-size: .9rem; }
.knueller .ablauf li { grid-template-columns: 5.6rem 1fr; }

.faecher-buehne {
  display: flex; flex-direction: column; justify-content: center;
  padding: .9rem .6rem .8rem; border-radius: .6rem; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, #3a2618 0 110px, #332114 110px 220px, #3d291a 220px 330px),
    #34231a;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.7);
}
.faecher { position: relative; flex: 1; min-height: 27rem; }
.faecher-blatt {
  position: absolute; top: 50%; width: 50%; aspect-ratio: 636 / 900;
  padding: 0; border: 6px solid #fff; border-radius: 2px; background: #fff;
  box-shadow: 0 22px 44px -10px rgba(0,0,0,.7);
  cursor: zoom-in; transition: transform .3s ease, box-shadow .3s ease;
}
.faecher-blatt img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Motorrad-Flyer in der MITTE und VORNE (KD 27.09.2026, abends): das mittlere
   Blatt (2) liegt oben und gerade, Knüller (1) links und E-Bike (3) rechts
   fächern leicht gedreht dahinter auf. Reihenfolge im HTML: Knüller · Motorrad · E-Bike. */
/* KD 30.09.2026, 16:54: wieder DREI Blaetter (der Weihnachts-Flyer liegt jetzt
   unten auf der Weihnachts-Buehne). Werte wie vor dem 30.09. */
.faecher-blatt:nth-child(1) { left: 1%;  transform: translateY(-53%) rotate(-7deg); z-index: 1; }
.faecher-blatt:nth-child(2) { left: 25%; transform: translateY(-47%) rotate(0deg);  z-index: 3; }
.faecher-blatt:nth-child(3) { left: 49%; transform: translateY(-53%) rotate(7deg);  z-index: 2; }
.faecher-blatt:hover, .faecher-blatt:focus-visible {
  z-index: 4; box-shadow: 0 30px 60px -12px rgba(0,0,0,.85);
}
.faecher-blatt:nth-child(1):hover, .faecher-blatt:nth-child(1):focus-visible { transform: translateY(-55%) rotate(-4deg) scale(1.04); }
.faecher-blatt:nth-child(2):hover, .faecher-blatt:nth-child(2):focus-visible { transform: translateY(-49%) rotate(0) scale(1.04); }
.faecher-blatt:nth-child(3):hover, .faecher-blatt:nth-child(3):focus-visible { transform: translateY(-55%) rotate(4deg) scale(1.04); }
.faecher-blatt:hover .flyer-lupe,
.faecher-blatt:focus-visible .flyer-lupe { opacity: 1; transform: translateY(0); }
.faecher-hinweis { margin: .6rem 0 0; text-align: center; font-size: .8rem; color: rgba(255,255,255,.72); }

/* Wanderwoche — kurzer Block unter den Karten, ohne Preis. */
.wanderwoche {
  display: grid; gap: 1.2rem 2.4rem; align-items: center; margin-top: 2.4rem;
  padding: 1.6rem 1.8rem; background: #fff;
}
@media (min-width: 760px) { .wanderwoche { grid-template-columns: 1fr auto; } }
.wanderwoche .flyertitel { margin: .35rem 0 0; font-size: 2rem; }
.wanderwoche p:not(.augenbraue) { margin: .6rem 0 0; max-width: 48rem; color: var(--tinte-weich); }
.wanderwoche .btn { justify-self: start; }

@media (max-width: 759px) {
  .faecher { flex: none; min-height: 0; height: 19rem; }
  .faecher-blatt { width: 46%; border-width: 4px; }
  .faecher-blatt:nth-child(1) { left: 1%; }
  .faecher-blatt:nth-child(2) { left: 27%; }
  .faecher-blatt:nth-child(3) { left: 53%; }
  .wanderwoche { padding: 1.3rem 1.2rem; }
}

/* ===========================================================================
   KD-Feedback 24.09.2026, 15:10 — rote Kästen, Aufklapper, Monteur-Teaser,
   Leiste mit Auswahl, Kopfzeile als mittige Gruppe, Sprachwahl, Haken-Animation.
   =========================================================================== */

/* ------------------------------------------------ Rote Kästen um jedes Angebot */
/* Einheitlich: 3 px Bordeaux, leichter Radius, weißer Grund. Beim Knüller
   umschließt der Kasten Text UND Fächer — das Angebot ist eine Einheit. */
.knueller, .angebote .paket, .wanderwoche {
  border: 3px solid var(--bordeaux); border-radius: .7rem; background: #fff;
}
.knueller { padding: 1.6rem; }
@media (max-width: 759px) { .knueller { padding: 1.1rem; } }

/* ------------------------------------------------ Aufklapper „Programm & Leistungen“ */
.aufklapper { margin-top: 1rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.aufklapper > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .75rem .1rem; font-family: var(--knopf); font-weight: 700; font-size: .92rem;
  letter-spacing: .04em; color: var(--bordeaux);
}
.aufklapper > summary::-webkit-details-marker { display: none; }
.aufklapper > summary::after { content: none; }
.aufklapper > summary:hover { color: var(--bordeaux-tief); }
.aufklapper .auf-pfeil { flex: none; transition: transform .25s ease; }
.aufklapper[open] .auf-pfeil { transform: rotate(180deg); }
.aufklapper[open] > summary { padding-bottom: .2rem; }
.aufklapper > :not(summary) { margin: .5rem 0 1rem; }
.aufklapper .ablauf { margin-top: .5rem; }
.angebot .aufklapper .leistungen { margin-top: .5rem; }

/* ------------------------------------------------ Monteur-Teaser */
.monteur-teaser {
  display: grid; gap: 1.4rem 2.4rem; align-items: center; margin-top: 2.4rem;
  padding: 1.8rem 2rem; border-radius: .7rem;
  background: var(--wald); color: #fff;
  border: 1px solid rgba(229,180,95,.45);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.7);
}
@media (min-width: 860px) { .monteur-teaser { grid-template-columns: 1fr auto; } }
.monteur-teaser .augenbraue { color: var(--gold-hell); }
.monteur-teaser h3 { margin: .45rem 0 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: #fff; }
.monteur-teaser-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }
.monteur-teaser-knoepfe .btn { white-space: normal; }
.haken { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem .9rem; }
@media (min-width: 600px) { .haken { grid-template-columns: 1fr 1fr; } }
.haken li { display: flex; gap: .6rem; align-items: center; font-size: 1rem; font-weight: 600; color: #fff; }
.haken li::before {
  content: '✓'; flex: none; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--gold-hell); color: var(--wald-tief); font-weight: 800; font-size: .85rem;
}
@media (max-width: 759px) { .monteur-teaser { padding: 1.4rem 1.2rem; } }

/* ------------------------------------------------ Haken nacheinander einblenden */
/* Nur Listen, die seite.js vorbereitet hat (.einblenden-bereit), starten
   unsichtbar — ohne Skript oder bei reduzierter Bewegung ist alles sofort da. */
.einblenden-bereit > li {
  opacity: 0; transform: translateX(-14px);
  transition: opacity .45s ease, transform .45s ease;
}
.einblenden-bereit.eingeblendet > li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .einblenden-bereit > li { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------ Leiste mit „Was möchten Sie?“ */
.leiste .feld-wunsch select { font-weight: 600; }
@media (min-width: 760px) {
  .leiste { grid-template-columns: 1fr 1fr; }
  .leiste .feld-wunsch { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .leiste { grid-template-columns: 1.3fr 1fr 1fr .95fr auto; }
  .leiste .feld-wunsch { grid-column: auto; }
}

/* ------------------------------------------------ Fotos Monteurseite */
.foto-reihe .foto { margin: 0; border-radius: .45rem; overflow: hidden; background: var(--creme-2); position: relative; aspect-ratio: 4 / 3; }
.foto-reihe .foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-reihe .foto figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem .9rem .65rem;
  background: linear-gradient(to top, rgba(20,24,20,.78), transparent);
  color: #fff; font-family: var(--knopf); font-weight: 700; font-size: .88rem; letter-spacing: .03em;
}

/* ------------------------------------------------ Kopfzeile: mittige Gruppe */
/* KD 24.09.2026, 15:10: alle Punkte als geschlossene Gruppe um die Marke,
   direkt links „Arrangements“, direkt rechts „Monteurzimmer“.
   KD 24.09.2026, 18:39: „nicht zentriert … zu viel Abstand zwischen Button“ —
   deshalb wieder Raster 1fr | Marke | 1fr: die Marke steht EXAKT in der
   Seitenmitte, beide Gruppen schmiegen sich an sie (links rechtsbündig,
   rechts linksbündig). Telefon nur als Symbol, Sprachwahl nur als Flagge —
   so bleibt die rechte Seite kurz und die Abstände überall gleich eng. */
@media (min-width: 1060px) {
  .kopf-innen {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    column-gap: 1.6rem; max-width: none; padding-left: 1.5rem; padding-right: 1.5rem;
  }
  .kopf-nav--links { grid-column: 1; justify-self: end; order: 0; }
  .marke { grid-column: 2; justify-self: center; order: 0; }
  .kopf-rechts { grid-column: 3; justify-self: start; order: 0; gap: 1.1rem; }
  .kopf-nav { gap: 1.1rem; }
  .kopf-aktion { gap: .45rem; }
  .kopf-tel { display: inline-flex; padding: .4rem; }
  .kopf-tel svg { width: 18px; height: 18px; }
  .kopf-tel-nr { display: none; }
  .sprache-knopf span { display: none; }
  .sprache-knopf { padding-inline: .4rem; }
  .kopf-rechts > .sprache { margin-left: -.65rem; } /* Knopf und Flagge eng zusammen wie Telefon und Knopf */
}
@media (min-width: 1060px) and (max-width: 1399px) {
  .kopf-innen { column-gap: 1.2rem; padding-left: 1rem; padding-right: 1rem; }
  .kopf-nav, .kopf-rechts { gap: .85rem; }
  .kopf-nav a { font-size: .84rem; }
  .kopf-aktion .btn { padding-inline: .9rem; font-size: .86rem; letter-spacing: .03em; }
  .kopf-rechts > .sprache { margin-left: -.4rem; }
}
@media (min-width: 1060px) and (max-width: 1239px) {
  .kopf-innen { column-gap: .9rem; padding-left: .75rem; padding-right: .75rem; }
  .kopf-nav, .kopf-rechts { gap: .6rem; }
  .kopf-nav a { font-size: .78rem; }
  .marke-name { font-size: 1.75rem; }
  .kopf-aktion .btn { padding-inline: .7rem; font-size: .8rem; letter-spacing: .02em; }
  .kopf-tel { display: none; } /* Nummer steht im Startbild und im Handy-Menü */
  .kopf-rechts > .sprache { margin-left: -.15rem; }
}

/* ------------------------------------------------ Sprachwahl (nur Vorschau) */
.flagge { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.sprache { position: relative; display: none; }
@media (min-width: 1060px) { .sprache { display: block; } }
.sprache-knopf {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .38rem .45rem; border-radius: .35rem;
  border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff;
  font-family: var(--knopf); font-weight: 700; font-size: .74rem; letter-spacing: .06em;
}
.kopf.fest .sprache-knopf { color: var(--tinte); border-color: var(--linie); }
.sprache-knopf[aria-expanded="true"] .pfeilchen { transform: rotate(180deg); }
.sprache-menue {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 70;
  list-style: none; margin: 0; padding: .35rem; min-width: 11.5rem;
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.5);
}
.sprache-menue[hidden], .sprache-hinweis[hidden] { display: none; }
.sprache-menue button {
  display: flex; align-items: center; gap: .6rem; width: 100%; cursor: pointer;
  padding: .5rem .6rem; border: 0; border-radius: .3rem; background: none; text-align: left;
  font-family: var(--knopf); font-weight: 600; font-size: .9rem; color: var(--tinte);
}
.sprache-menue button:hover { background: var(--creme-2); }
.sprache-menue button[aria-current] { color: var(--bordeaux); }
.sprache-menue button[aria-current]::after { content: '✓'; margin-left: auto; }
.sprache .sprache-hinweis {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 71; margin: 0; white-space: nowrap;
  padding: .55rem .8rem; border-radius: .4rem; background: var(--wald-tief); color: #fff;
  font-family: var(--knopf); font-size: .82rem; font-weight: 600; box-shadow: 0 16px 30px -16px rgba(0,0,0,.6);
}
.sprache-mobil {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linie);
}
.sprache-mobil > span { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-weich); }
.sprache-mobil ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.sprache-mobil button {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  padding: .4rem .5rem; border: 1px solid var(--linie); border-radius: .35rem; background: #fff;
  font-family: var(--knopf); font-weight: 700; font-size: .78rem; color: var(--tinte);
}
.sprache-mobil button[aria-current] { border-color: var(--bordeaux); color: var(--bordeaux); }
.sprache-mobil .sprache-hinweis { width: 100%; margin: .2rem 0 0; font-family: var(--knopf); font-weight: 600; font-size: .88rem; color: var(--bordeaux); }
.kopf.offen .kopf-mobil { max-height: calc(100svh - 4.2rem); overflow-y: auto; overscroll-behavior: contain; }
/* Knöpfe im Handy-Menü behalten ihre Knopffarbe (die Regel für Menü-Links
   färbte sie bisher grau). */
.kopf-mobil nav a.btn-bordeaux, .kopf-mobil nav a.btn-monteur { color: #fff; }
.kopf-mobil nav a.btn-gold { color: #1d1712; }

/* ===========================================================================
   KD-Feedback 24.09.2026, 20:25
   =========================================================================== */

/* ------------------------------------------------ Hero: den ganzen Platz nutzen */
/* Überschrift etwas tiefer, 30 % mehr Luft über den Knöpfen (2,2 → 2,86 rem),
   die Fakten nicht mehr am unteren Rand. Freie Höhe: je zur Hälfte über der
   Augenbraue (::before) und unter den Fakten (::after); zwischen Knöpfen und
   Fakten ein mit der Höhe wachsender fester Abstand. */
@media (min-width: 760px) {
  .start-innen { padding-top: calc(var(--kopf-hoehe) + 1.4rem); padding-bottom: 6.5rem; }
  .start-innen::before, .start-innen::after { content: ''; flex: 1 1 0; }
  .start-knoepfe { margin-top: 2.86rem; }
  .start-fakten { margin-top: clamp(2.5rem, 9vh, 6.5rem); padding-top: 0; }
}

/* ------------------------------------------------ Leiste: gleiche Höhen, eine Linie */
/* Alle Felder und der Knopf exakt 3 rem hoch, Beschriftungen einzeilig mit
   fester Zeilenhöhe — so stehen „Was möchten Sie?“, „Anreise“, „Abreise“ und
   „Personen“ auf einer Linie. */
.leiste { align-items: end; }
.leiste .feld { gap: .35rem; }
.leiste .feld label { line-height: 1.2; min-height: 1.2em; white-space: nowrap; margin: 0; }
.leiste .feld input, .leiste .feld select, .leiste .feld .btn {
  height: 3rem; box-sizing: border-box; margin: 0;
}
.leiste .feld input, .leiste .feld select { padding-top: 0; padding-bottom: 0; line-height: 1.2; }
.leiste .feld .btn { padding-block: 0; }

/* ------------------------------------------------ Gold-Unterstrich „Monteurzimmer“ */
/* Standard: der Strich steht (ohne JS, bei reduzierter Bewegung). seite.js
   setzt .strich-bereit (Breite 0) und beim Hineinscrollen .strich-an —
   dann zeichnet er sich einmal von links nach rechts. */
.strich {
  background-image: linear-gradient(var(--gold-hell), var(--gold-hell));
  background-repeat: no-repeat; background-position: 0 calc(100% - .03em); background-size: 100% .13em;
  /* KD 25.09.2026: Strich minimal höher — auf dem Handy bricht die Überschrift um,
     vorher klebte er fast an der zweiten Zeile („Knüllwald“). */
}
.strich.strich-bereit { background-size: 0% .13em; transition: background-size .9s cubic-bezier(.3,.7,.3,1) .15s; }
.strich.strich-bereit.strich-an { background-size: 100% .13em; }
@media (prefers-reduced-motion: reduce) { .strich.strich-bereit { background-size: 100% .13em; transition: none; } }

/* ------------------------------------------------ Abschnitt ohne Bild (Weihnachten) */
.ohne-bild { max-width: 46rem; }

/* ------------------------------------------------ Startbild: nur das Aquarell mit Logo */
/* KD 24.09.2026, 20:42: keine Slideshow mehr, nur das Aquarell — so weit hoch,
   dass das AdiHotels-Oval ganz zu sehen ist. Das Bild steht in voller Breite
   und unbeschnitten (Seitenverhältnis bleibt), mit Abstand zum unteren Rand;
   darunter setzt der Grund die helle Flyer-Farbe fort. */
.folie-aquarell {
  background: linear-gradient(to bottom, #7fa7c4 0%, #b7cfdf 45%, #dfe9ee 70%, #eef2ea 100%);
}
.folie-aquarell .folie-scharf {
  top: auto; bottom: var(--aquarell-abstand, 2.6rem);
  width: 100%; height: auto; max-height: none;
  object-fit: contain; object-position: 50% 100%;
}
.folie.aktiv .folie-scharf { animation: none; }
/* Kein heller Balken unten (KD 24.09.2026, 22:03: „dieser weiße Balken unten
   komplett weg“): das Bild steht bündig auf der Unterkante, das Aquarell endet
   an seiner Kante, nur das Oval ragt heraus — daneben und darunter Waldgrün wie
   am Handy. Der Abstand unten bleibt, damit das Entwurfs-Band das Oval nicht anschneidet. */
.start .folie-aquarell .folie-scharf { background: var(--wald-tief); }
.start .folie-aquarell {
  background: linear-gradient(to bottom, #7fa7c4 0%, #b7cfdf 45%, #dfe9ee 70%,
    #eef2ea calc(100% - var(--aquarell-abstand, 2.6rem) - 2px),
    var(--wald-tief) calc(100% - var(--aquarell-abstand, 2.6rem) - 2px));
}
/* Unten heller, damit das Oval nicht im Schleier versinkt — oben bleibt der
   Schleier kräftig, dort steht die weiße Schrift. */
.start:has(.folie-aquarell) .start-schleier {
  background: linear-gradient(to bottom,
    rgba(20,26,20,.62) 0%, rgba(20,26,20,.46) 45%, rgba(20,26,20,.4) 68%, rgba(20,26,20,.08) 100%);
}
.start:has(.folie-aquarell) .start-vignette {
  background: radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(10,14,10,.35) 100%);
}
/* Handy: das Bild sitzt unter den Fakten, über der festen Leiste unten
   (und dem Entwurfs-Band) — das Startbild wird dafür etwas höher. */
@media (max-width: 759px) {
  .folie-aquarell .folie-scharf {
    width: 150%; left: -12%; right: auto; bottom: 8rem;
  }
  .start:has(.folie-aquarell) .start-innen { padding-bottom: 20rem; }
}
/* Fakten über dem helleren Aquarell lesbar halten. */
.start:has(.folie-aquarell) .start-fakten dt,
.start:has(.folie-aquarell) .start-fakten dd { text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.55); color: #fff; }

/* ===========================================================================
   Handy-Optimierung — KD 24.09.2026, 20:50: „die ganze Website mobile optimieren“
   Alles hier gilt nur bis 759 px (bzw. 560 px) — der Desktop bleibt unverändert.
   =========================================================================== */
@media (max-width: 759px) {
  /* Startbild: Auf dem Handy lag das Aquarell mit dem AdiHotels-Oval ganz unten
     hinter Entwurfs-Band und fester Leiste — man sah es nie. Jetzt steht es im
     Fluss direkt unter der Kopfzeile, ohne Schleier, das Oval in der Mitte;
     Überschrift, Text und Knöpfe folgen darunter auf Waldgrün. */
  .start { flex-direction: column; height: auto; min-height: 0; background: var(--wald-tief); }
  .start-bild { position: relative; inset: auto; margin-top: calc(var(--kopf-hoehe) - .5rem); }
  .start-bild .folie { position: relative; inset: auto; }
  .start .folie-aquarell .folie-scharf {
    position: static; display: block; width: 100%; height: clamp(11rem, 29vw, 13rem);
    object-fit: cover; object-position: 0% 100%;
    -webkit-mask-image: none; mask-image: none;
  }
  .start:has(.folie-aquarell) .start-schleier,
  .start:has(.folie-aquarell) .start-vignette { display: none; }
  .start:has(.folie-aquarell) .start-innen { min-height: 0; padding-top: 1.8rem; padding-bottom: 2.6rem; }
  .start-bild picture { display: block; }
  .start .folie-aquarell { background: none; }
  /* Fakten (60 Betten · ab 60 € · Knüll) größer — KD 24.09.2026, 21:46. */
  .start-fakten { margin-top: 2rem; padding-top: 0; opacity: 1; }
  .start-fakten > div { padding: .2rem 1rem; }
  .start-fakten dt { font-size: 1.6rem; }
  .start-fakten dd { font-size: .78rem; letter-spacing: .12em; margin-top: .2rem; }

  /* Unterseiten-Kopf: bei zweizeiliger Überschrift rutschte die Augenbraue
     unter das Logo (feste Höhe + unten ausgerichtet). Höhe wächst jetzt mit. */
  .seitenkopf { height: auto; max-height: none; min-height: 22rem; }
  .seitenkopf-innen { padding-bottom: 2.4rem; }

  /* Weniger Leerraum zwischen den Abschnitten (5 → 3,4 rem). */
  .abschnitt { padding: 3.4rem 0; }
  .abschnitt.eng { padding: 2.6rem 0; }

  /* Kleine Überschriften über den Titeln etwas größer. */
  .augenbraue, .start-augenbraue { font-size: .74rem; letter-spacing: .22em; }

  /* Entwurfs-Band: zwei statt drei Zeilen. */
  .band { bottom: calc(4.2rem + env(safe-area-inset-bottom)); font-size: .64rem; line-height: 1.35; padding: .32rem .8rem; letter-spacing: .02em; }
  body { padding-bottom: 7rem; }

  /* Knopfreihen („Alle Zimmer & Preise“, Schluss-Aufruf): untereinander, volle Breite. */
  .mehr { flex-direction: column; align-items: stretch; width: 100%; max-width: 24rem; margin-inline: auto; }
  .mehr.links { margin-inline: 0; }
  .mehr .btn { justify-content: center; }

  /* Fußzeile: Links zweispaltig, jeder Link ein ordentliches Tipp-Ziel. */
  .fuss ul { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .fuss ul a { display: block; padding: .55rem 0; font-size: .95rem; }
  .fuss-innen > div > p a, .fuss address a { display: inline-block; padding: .35rem 0; }

  /* Lange deutsche Wörter („Datenschutzerklärung“, „Verbraucherstreitbeilegung“)
     schoben die Seite bei 360 px in die Breite — jetzt wird getrennt. */
  /* Silbentrennung nur in den Rechtstexten, sonst würde auch „Gemütlichkeit“
     im Startbild getrennt; überall sonst bricht nur ein Wort, das nicht passt. */
  h1, h2, h3 { overflow-wrap: break-word; }
  .rechtstext h1, .rechtstext h2, .rechtstext h3 { -webkit-hyphens: auto; hyphens: auto; }

  /* Offenes Menü: Leiste und Entwurfs-Band verdeckten Sprachwahl und untere
     Knöpfe — das Menü hat dieselben Knöpfe, also Leiste und Band ausblenden. */
  body:has(.kopf.offen) .handy-leiste, body:has(.kopf.offen) .band { display: none; }

  /* Kontakt-Liste und Sprachwahl im Menü: größere Tipp-Ziele. */
  .kontakt-liste a { display: inline-block; padding: .3rem 0; }
  .sprache-mobil button { min-height: 2.6rem; padding: .5rem .75rem; font-size: .85rem; }
}

/* Tabellen (Termine, Zimmerpreise): auf dem Handy war die Preis-Spalte rechts
   abgeschnitten. Unter 560 px wird jede Zeile eine Karte: Anlass/Zimmer links,
   Datum und Dauer darunter, der Preis rechts groß. */
@media (max-width: 560px) {
  .termine thead, .preise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .termine, .termine tbody, .preise, .preise tbody { display: block; }
  .termine caption { display: block; }
  .termine tr, .preise tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center;
    padding: .8rem .2rem; border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .preise tr { padding: .85rem 1rem; border-bottom-color: var(--linie); }
  .termine tr:last-child, .preise tr:last-child { border-bottom: 0; }
  .termine td, .preise td { grid-column: 1; padding: 0; border: 0; }
  .termine td:first-child { font-weight: 600; color: #fff; }
  .termine td:nth-child(2), .termine td:nth-child(3) { font-size: .88rem; color: rgba(255,255,255,.72); }
  .preise td:nth-child(2) { font-size: .85rem; color: var(--tinte-weich); margin-top: .15rem; }
  .termine td:last-child, .preise td:last-child {
    grid-column: 2; grid-row: 1 / span 3; text-align: right; white-space: nowrap;
  }
  .preise td:first-child { font-weight: 600; }
  .preise td:last-child small { white-space: nowrap; }
}

/* ===========================================================================
   KD 24.09.2026, 21:57 — Getränke-Flat bei jedem Angebot sichtbar, Speisekarte zurück
   =========================================================================== */
/* Getränke-Flat: „eine sehr wichtige Sache“ — kräftiger Kasten mit Glas-Symbol. */
.getraenke-flat {
  position: relative; padding: .8rem .95rem .8rem 2.9rem;
  border: 1.5px solid var(--gold); background: rgba(192,138,46,.14);
  font-size: .92rem;
}
.getraenke-flat::before {
  content: ''; position: absolute; left: .85rem; top: .78rem; width: 1.35rem; height: 1.35rem;
  background: var(--gold-tief);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 11h1a3 3 0 0 1 0 6h-1'/%3E%3Cpath d='M9 12v6M13 12v6'/%3E%3Cpath d='M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z'/%3E%3Cpath d='M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 11h1a3 3 0 0 1 0 6h-1'/%3E%3Cpath d='M9 12v6M13 12v6'/%3E%3Cpath d='M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z'/%3E%3Cpath d='M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wanderwoche .getraenke-flat { margin-top: .9rem; }

/* Speisekarte (Platzhalter, bis Adis Karte da ist) */
.speisekarte { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 760px) { .speisekarte { grid-template-columns: 1fr 1fr; } }
.speisen-gruppe {
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem; padding: 1.2rem 1.3rem;
}
.speisen-gruppe h3 {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--gold);
}
.speisen-gruppe .inhalt-folgt {
  margin: .9rem 0 0; padding: .8rem .9rem; border: 2px dashed rgba(192,138,46,.55); border-radius: .35rem;
  background: rgba(192,138,46,.06); font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tief); text-align: center;
}

/* ===========================================================================
   Anrufen oder WhatsApp — KD 24.09.2026, 22:22: „nur noch die Handynummer, auch
   ein WhatsApp-Symbol auf den Telefonbutton … wenn ich draufklicke, entscheide
   ich, ob ich WhatsApp schreibe oder direkt anrufe“. Auswahl: seite.js.
   =========================================================================== */
.ico-wa { flex: none; }
.btn .ico-wa { margin-left: -.2rem; }
.kopf-tel { gap: .3rem; }
.btn-whatsapp { background: #1f8a4c; color: #fff; }
.btn-whatsapp:hover { background: #18703d; color: #fff; }

.kontakt-wahl {
  border: 0; border-radius: .7rem; padding: 2rem 1.6rem 1.6rem;
  width: min(92vw, 25rem); background: var(--creme); color: var(--tinte);
  text-align: center; box-shadow: 0 30px 70px -25px rgba(0,0,0,.7);
}
.kontakt-wahl::backdrop { background: rgba(24,20,14,.7); }
.kontakt-wahl form { position: absolute; top: .6rem; right: .6rem; margin: 0; }
.kontakt-wahl-zu {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--tinte-weich); display: grid; place-items: center;
}
.kontakt-wahl-zu:hover { background: var(--creme-2); color: var(--tinte); }
.kontakt-wahl-augenbraue {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-tief);
}
.kontakt-wahl h2 { outline: none; margin: .35rem 0 .2rem; font-family: var(--display); font-size: 1.9rem; }
.kontakt-wahl-text { margin: 0 0 1.3rem; color: var(--tinte-weich); }
.kontakt-wahl-knoepfe { display: grid; gap: .7rem; }
.kontakt-wahl-knoepfe .btn { width: 100%; padding-block: .95rem; font-size: 1rem; }

/* Formular: Absenden oder per WhatsApp — nebeneinander, am Handy untereinander. */
.absenden-reihe { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .absenden-reihe { grid-template-columns: 1fr; } }
.absenden-reihe .btn { width: 100%; }
/* Kopfzeile: Telefon + WhatsApp als ein Knopf, eng gesetzt — sonst schiebt das
   zweite Symbol bei 1280 px das Logo aus der Mitte (nachgemessen 24.09.2026). */
@media (min-width: 1060px) {
  .kopf-tel { padding: .4rem .15rem; gap: .2rem; }
}

/* Formular-Haken (Datenschutz, Rechnung auf Firma): die Haken-Liste der
   Monteurseite (.haken als <ul>, weiter oben) machte daraus ein Zwei-Spalten-
   Raster — Kästchen links, Text rechts weit weg. Hier wieder Kästchen + Text. */
label.haken { display: flex; margin: 0; list-style: none; }

/* Logo in der Kopfzeile: das AdiHotels-Oval statt Schriftzug (KD 24.09.2026, 22:52).
   Höhe folgt der Kopfzeile; die Fußzeile behält den Schriftzug. */
.marke--bild { line-height: 0; }
/* KD 24.09.2026, 22:58: „mach das logo etwas größer“ — rund +25 %. Das Oval ragt
   oben/unten etwas in den Rand der Kopfzeile (negativer Abstand), damit die
   Kopfzeile selbst nicht höher wird. */
.marke-bild { display: block; width: auto; height: 4.4rem; margin-block: -.45rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
@media (min-width: 1400px) { .marke-bild { height: 4.9rem; margin-block: -.5rem; } }
@media (max-width: 759px) { .marke-bild { height: 3.7rem; margin-block: -.35rem; } }

/* ------------------------------------------------ Galerie mit 3 Spalten (25.09.2026) */
/* „Gäste & Feste“ hat seit dem Umzug des Reisebus-Fotos nach „Haus & Hof“ 6 Felder —
   am Desktop in 3 Spalten ohne Loch (Winterfoto = Haus Zur Linde ist raus, KD 24.09.). */
@media (min-width: 780px) { .galerie.drei { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------ Kopfzeile: WhatsApp | Telefon (25.09.2026) */
/* KD 25.09.2026, 09:59: „Auf der Desktop-Variante sind das Telefon und das
   WhatsApp-Icon zu nah aneinander. Das braucht mehr Abstand … oder macht das
   WhatsApp-Icon einfach auf die linke Seite und rechts das Telefon“ — beides:
   zwei eigene Symbole, WhatsApp links, Telefon rechts, mit Luft dazwischen. */
.kopf-wa { display: none; color: rgba(255,255,255,.9); }
.kopf.fest .kopf-wa { color: var(--wald); }
@media (min-width: 1060px) {
  .kopf-aktion { gap: .5rem; }
  .kopf-wa, .kopf-tel { display: inline-flex; align-items: center; padding: .35rem; gap: 0; border-radius: .3rem; }
  .kopf-wa svg, .kopf-tel svg { width: 19px; height: 19px; }
  .kopf-wa:hover, .kopf-tel:hover { background: rgba(255,255,255,.12); }
  .kopf.fest .kopf-wa:hover, .kopf.fest .kopf-tel:hover { background: rgba(0,0,0,.05); }
}
/* Unter 1240 px fehlt der Platz — wie beim Telefon steht WhatsApp dann im
   Startbild, im Handy-Menü und auf der Kontaktseite. */
@media (min-width: 1060px) and (max-width: 1239px) { .kopf-wa { display: none; } }

/* ------------------------------------------------ Sprachwahl: echte Links (25.09.2026) */
.sprache-menue a {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .6rem; border-radius: .3rem; text-decoration: none;
  font-family: var(--knopf); font-weight: 600; font-size: .9rem; color: var(--tinte);
}
.sprache-menue a:hover { background: var(--creme-2); }
.sprache-menue a[aria-current] { color: var(--bordeaux); }
.sprache-menue a[aria-current]::after { content: '✓'; margin-left: auto; }
.kopf-mobil .sprache-mobil a {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2.6rem;
  padding: .5rem .75rem; border: 1px solid var(--linie); border-radius: .35rem; background: #fff;
  font-family: var(--knopf); font-weight: 700; font-size: .85rem; color: var(--tinte);
}
.kopf-mobil .sprache-mobil a[aria-current] { border-color: var(--bordeaux); color: var(--bordeaux); background: #fff; }

/* Übersetzte Impressum-/Datenschutzseite: Hinweis auf die deutsche Fassung. */
.recht-hinweis { margin: .9rem 0 0; font-size: .92rem; color: var(--tinte-weich); }

/* ------------------------------------------------ Lange Wörter der Übersetzungen (25.09.2026) */
/* Polnisch/Ukrainisch/Tschechisch sind oft ein Drittel länger als Deutsch. Damit
   auf dem Handy nichts über den Rand läuft: Knöpfe dürfen umbrechen, Rasterzellen
   und Auswahlfelder dürfen schmaler werden als ihr längster Eintrag. */
.handy-leiste { grid-template-columns: minmax(0, 1.3fr) minmax(min-content, 1fr); }
.handy-leiste .btn, .art-wahl .btn, .absenden-reihe .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
.anfrage-form > * { min-width: 0; }
.art-wahl .btn { max-width: 100%; }
.feld, .leiste > * { min-width: 0; }
.feld select, .feld input { max-width: 100%; min-width: 0; }
/* Startbild: ab 1200 px stehen die vier Knöpfe auf Deutsch in einer Reihe (nowrap,
   oben). Übersetzte Knöpfe sind länger — dort bricht die Reihe um, statt über den
   Rand zu laufen (Ukrainisch bei 1280 px). Deutsch bleibt unverändert. */
html:not([lang="de"]) .start-knoepfe { flex-wrap: wrap; }

/* ===========================================================================
   Weihnachten & Silvester groß (KD 25.09.2026, 14:03: „Weihnachten und Silvester
   wollen wir auch noch mal groß machen“). Roter Kasten wie jedes Angebot; links
   eine dunkle Bühne statt Foto (Sternenhimmel, Waldkante, große 12 in Georgia),
   rechts der Text. Handy: Bühne oben, Text darunter.
   =========================================================================== */
.weihnachten {
  display: grid; gap: 2rem; margin-top: 2.4rem; padding: 1.6rem;
  border: 3px solid var(--bordeaux); border-radius: .7rem; background: #fff;
  scroll-margin-top: calc(var(--kopf-hoehe) + 1rem);
}
@media (min-width: 980px) {
  .weihnachten { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 2.8rem; align-items: stretch; }
}
.weihnachten-buehne {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 24rem; padding: 2.2rem 1.2rem 5rem; border-radius: .6rem; overflow: hidden;
  text-align: center; color: #fff;
  background:
    radial-gradient(1.6px 1.6px at 12% 16%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.2px 1.2px at 28% 34%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.8px 1.8px at 41% 11%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 63% 27%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 79% 13%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.1px 1.1px at 88% 38%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.3px 1.3px at 7% 52%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 93% 58%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 54% 47%, rgba(255,255,255,.5), transparent),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(229,180,95,.22), transparent 70%),
    linear-gradient(170deg, #1a2a33 0%, #16241d 55%, #2c1614 100%);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.7);
}
.wb-stern { width: 2.6rem; height: 2.6rem; color: var(--gold-hell); filter: drop-shadow(0 0 12px rgba(229,180,95,.65)); }
.wb-oben {
  margin-top: 1rem; font-size: .74rem; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-hell);
}
.wb-zahl { margin-top: .3rem; font-family: var(--display); font-size: clamp(5.5rem, 11vw, 8.5rem); font-weight: 600; line-height: .95; }
.wb-unten { margin-top: .5rem; font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.25; color: rgba(255,255,255,.9); }
.wb-wald { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 4.4rem; color: #0b1510; }
/* KD 30.09.2026, 16:54: der gedruckte Flyer liegt VORNE AUF der Buehne, die
   selbstgebaute Grafik bleibt als Hintergrund (Sternenhimmel, Stern, Waldkante).
   Die grosse „12" (.wb-zahl) und .wb-unten sind hier nicht mehr im Markup. */
.weihnachten-flyer { position: relative; z-index: 2; margin-top: 1.1rem; width: min(64%, 15rem); }
.weihnachten-flyer .flyer-blatt {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(-2.5deg); transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.6));
}
.weihnachten-flyer .flyer-blatt:hover,
.weihnachten-flyer .flyer-blatt:focus-visible { transform: rotate(0) scale(1.035); }
.wb-tipp {
  position: relative; z-index: 2; margin-top: .9rem; font-size: .78rem;
  color: rgba(255,255,255,.75);
}
/* KD 04.10.2026: „den weihnachten und silvester flyer größer machen, außerdem die
   section als banner durchziehen heisst kein roter rand und die weisse box hat breite“
   → Kasten läuft als weißes Band über die ganze Fensterbreite, ohne roten Rand;
   der Inhalt bleibt in der Bahn. Flyer deutlich größer. */
#angebote { overflow-x: clip; }
.weihnachten {
  border: 0; border-radius: 0;
  margin-inline: calc(50% - 50vw);
  padding: 3rem max(1.25rem, calc(50vw - var(--bahn) / 2 + 1.25rem));
}
@media (min-width: 980px) {
  .weihnachten { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.weihnachten-buehne { min-height: 34rem; }
.weihnachten-flyer { width: min(82%, 26rem); }
.weihnachten-text { align-self: center; }
.weihnachten-titel { margin: .5rem 0 0; font-size: clamp(2.3rem, 4.6vw, 3.3rem); }
.weihnachten .fuehrung { margin-top: .9rem; }
.weihnachten .leistungen { margin-top: 1rem; }
.weihnachten .paket-preis { margin-top: 1.1rem; }
/* Zweite Zeile im Preiskasten (Termin, Hinweis) wie in den Angebots-Karten:
   eigene Zeile, kleiner und leiser (30.09.2026, mit dem Weihnachts-Flyer). */
.weihnachten .paket-preis small { display: block; margin-top: .25rem; color: var(--tinte-weich); font-size: .82rem; }
@media (max-width: 759px) {
  .weihnachten { padding: 1.6rem 1.25rem; gap: 1.4rem; }
  .weihnachten-buehne { min-height: 16rem; padding: 1.6rem 1rem 3.8rem; }
  .wb-wald { height: 3.2rem; }
  /* Auf dem Handy darf der Flyer breiter liegen, sonst ist nichts zu erkennen. */
  .weihnachten-buehne { min-height: 0; }
  .weihnachten-flyer { width: 92%; margin-top: .9rem; }
}

/* ===== BikerBetten-Bewertungen (25.09.2026) ===== */
.bb-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2rem;
  margin: 1.8rem auto 0; max-width: 46rem; padding: 1.4rem 1.6rem;
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem;
}
.bb-note { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.bb-zahl { font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--wald); font-weight: 600; }
.bb-sterne { display: flex; gap: .15rem; margin: 0 0 .7rem !important; }
.bb-sterne svg { width: 1rem; height: 1rem; fill: var(--gold); }
.bb-sterne.gross { margin: 0 !important; }
.bb-sterne.gross svg { width: 1.35rem; height: 1.35rem; }
.bb-text { flex: 1 1 18rem; }
.bb-text p { margin: .2rem 0; color: var(--tinte-weich); font-size: .92rem; }
.bb-text .bb-titel { font-family: var(--display); font-size: 1.3rem; color: var(--tinte); margin-top: 0; }
.bb-text a { color: var(--wald); font-weight: 600; }
/* Google-Kasten unter BikerBetten (04.10.2026); der fünfte Stern ist nur angedeutet (4,2). */
.bb-kopf.bb-google { margin-top: .9rem; }
.bb-sterne svg.leer { fill: var(--linie); }
.bewertung.lang-text p[lang] { font-size: 1rem; }
@media (max-width: 560px) { .bb-kopf { text-align: center; } .bb-zahl { font-size: 2.7rem; } }

/* ===========================================================================
   Angebots-Raster seit 27.09.2026 (abends) — KD hat das Layout vom Nachmittag
   abgelehnt. Reihe 1: Motorrad-Karte + Flyer-Fächer · Reihe 2: E-Bike + Knüller
   (Subgrid, gleich hoch) · Reihe 3: Weihnachten · Reihe 4: Wanderwoche + Monteur-Teaser.
   Die Klassen .angebote-flyer / .angebote-paar / .angebote-schluss sitzen auf
   den drei .angebote-Rastern in index.html. Der Knüller ist eine normale Karte;
   .knueller (der große Kasten) wird auf der Startseite nicht mehr benutzt.
   =========================================================================== */
.angebote-paar, .angebote-schluss { margin-top: 1.4rem; }
.angebote-schluss > .wanderwoche, .angebote-schluss > .monteur-teaser { margin-top: 0; }
/* Der Fächer bekommt denselben roten Rahmen wie die Karten — Reihe 1 sind zwei gleiche Kästen. */
.angebote-flyer > .faecher-buehne { border: 3px solid var(--bordeaux); border-radius: .7rem; }
/* Ablauf-Liste (Freitag/Samstag/Sonntag) braucht die breitere Tagesspalte wie früher im Knüller-Kasten. */
.angebote-paar .ablauf li { grid-template-columns: 5.6rem 1fr; }
@media (min-width: 760px) {
  /* Reihe 4: beide Kästen einspaltig, Knöpfe unten, gleich hoch. */
  .angebote-schluss > .wanderwoche, .angebote-schluss > .monteur-teaser {
    grid-template-columns: 1fr; align-content: space-between; align-items: start;
  }
  .angebote-schluss .haken { grid-template-columns: 1fr; }
  @supports (grid-template-rows: subgrid) {
    /* Reihe 1: nur eine Karte, kein Subgrid nötig — die Karte bleibt ein Flex-Stapel,
       der Fächer streckt sich auf ihre Höhe. */
    .angebote-flyer > .angebot { display: flex; grid-row: auto; grid-template-rows: none; }
    .angebote-flyer > .angebot > .paket-innen { display: flex; grid-row: auto; grid-template-rows: none; }
    /* Reihe 2: E-Bike hat keinen Getränke-Kasten — Aufklapper und Knöpfe trotzdem
       auf dieselbe Zeile wie beim Knüller (Zeile 3 bleibt bei E-Bike leer). */
    .angebote-paar > .angebot > .paket-innen > .aufklapper { grid-row: 4; }
    .angebote-paar > .angebot > .paket-innen > .paket-fuss { grid-row: 5; }
  }
}

/* ===========================================================================
   28.09.2026 (KD-Ansagen 27.09.2026, 23:39 und 28.09.2026, 00:01):
   Bewertungen in der Hero-Schrift, Flyer-Bühne enger, Datumsfelder im CD,
   Media-Castle-Signatur im Fuß.
   =========================================================================== */

/* ---- 4. Bewertungszitate in der Display-Schrift der Hero-Überschrift (Georgia 600) */
.bb-karte p[lang] {
  font-family: var(--display); font-weight: 600; font-size: 1.32rem; line-height: 1.32;
  color: var(--tinte);
}
.bb-karte.lang-text p[lang] { font-size: 1.06rem; line-height: 1.45; }

/* ---- 8. Flyer-Bühne (Startseite Reihe 1 rechts): weniger Rand, Flyer größer.
   KD 28.09.2026, 18:35: „Die Flyer sollen im Hintergrund besser zu sehen sein …
   wieder wie vorher, nur etwas größer." → wieder der Fächer von vorher (gleich
   breite Blätter, Knüller links und E-Bike rechts schauen je ein gutes Stück
   heraus, Motorrad mittig vorn), Blätter aber 58 % statt 50 % breit.
   Die Variante vom 28.09. 00:01 (Motorrad 80 % breit) hat die zwei hinteren verdeckt. */
.angebote-flyer .faecher-buehne { padding: .55rem .5rem .45rem; }
.angebote-flyer .faecher-hinweis { margin-top: .35rem; }
.angebote-flyer .faecher-blatt { width: 58%; border-width: 5px; }
.angebote-flyer .faecher-blatt:nth-child(1) { left: 1%;  transform: translateY(-44%) rotate(-8deg); }
.angebote-flyer .faecher-blatt:nth-child(2) { left: 21%; transform: translateY(-54%) rotate(0deg); }
.angebote-flyer .faecher-blatt:nth-child(3) { left: 41%; transform: translateY(-44%) rotate(8deg); }
.angebote-flyer .faecher-blatt:nth-child(1):hover, .angebote-flyer .faecher-blatt:nth-child(1):focus-visible { transform: translateY(-46%) rotate(-5deg) scale(1.03); }
.angebote-flyer .faecher-blatt:nth-child(2):hover, .angebote-flyer .faecher-blatt:nth-child(2):focus-visible { transform: translateY(-56%) rotate(0) scale(1.03); }
.angebote-flyer .faecher-blatt:nth-child(3):hover, .angebote-flyer .faecher-blatt:nth-child(3):focus-visible { transform: translateY(-46%) rotate(5deg) scale(1.03); }
@media (max-width: 759px) {
  .angebote-flyer .faecher-blatt { width: 50%; border-width: 4px; }
  .angebote-flyer .faecher-blatt:nth-child(1) { left: 0; }
  .angebote-flyer .faecher-blatt:nth-child(2) { left: 25%; }
  .angebote-flyer .faecher-blatt:nth-child(3) { left: 50%; }
}

/* ---- 10. Datumsfelder im Corporate Design (KD 28.09.2026, 18:16)
   seite.js baut jedes <input type="date"> zu einem Textfeld .datum-feld um und klappt
   darunter den eigenen Kalender .datum-pop auf (Waldgrün, Gold, Creme). Der Kalender
   des Browsers ist per CSS nicht gestaltbar, deshalb dieser Umbau. */
.datum-feld {
  cursor: pointer; caret-color: transparent;
  padding-right: 2.6rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c08a2e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right .8rem center !important; background-size: 1.2rem !important;
}
.datum-feld::placeholder { color: var(--tinte-weich); font-weight: 500; opacity: 1; }
.anfrage-form .feld .datum-feld {
  font-family: var(--knopf); font-weight: 600; color: var(--wald-tief);
  background-color: var(--creme); border: 1.5px solid var(--wald); border-radius: .4rem;
  min-height: 2.9rem; padding: .55rem .7rem; line-height: 1.3;
}
.datum-feld[aria-expanded="true"], .anfrage-form .feld .datum-feld:focus-visible { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 1px; }

.datum-pop {
  position: absolute; z-index: 1200;
  width: min(21rem, calc(100vw - 2rem));
  background: var(--creme); color: var(--wald-tief);
  border: 1.5px solid var(--wald); border-radius: .7rem;
  box-shadow: 0 20px 44px rgba(36, 31, 27, .24), 0 2px 6px rgba(36, 31, 27, .12);
  padding: .9rem .9rem 1rem; font-family: var(--knopf);
}
.datum-pop[hidden] { display: none; }
.datum-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.datum-kopf strong { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--wald-tief); }
.datum-nav {
  width: 2.3rem; height: 2.3rem; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--gold); border-radius: 50%; background: #fff; color: var(--gold-tief); cursor: pointer;
}
.datum-nav:hover:not(:disabled) { background: var(--gold); color: #fff; }
.datum-nav:disabled { border-color: var(--linie); color: rgba(36, 31, 27, .25); cursor: default; }
.datum-wt, .datum-tage { display: grid; grid-template-columns: repeat(7, 1fr); }
.datum-wt { border-bottom: 1px solid var(--linie); margin-bottom: .35rem; }
.datum-wt span { text-align: center; padding: .3rem 0 .45rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-tief); }
.datum-tage { row-gap: .2rem; }
.datum-tage button {
  height: 2.5rem; border: 0; border-radius: .45rem; background: transparent; cursor: pointer;
  font: 600 .98rem/1 var(--knopf); color: var(--wald-tief);
}
.datum-tage button:hover:not(:disabled):not(.gewaehlt) { background: var(--creme-2); box-shadow: inset 0 0 0 1.5px var(--gold); }
.datum-tage button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.datum-tage button:disabled { color: rgba(36, 31, 27, .25); cursor: default; }
.datum-tage button.heute { box-shadow: inset 0 0 0 1.5px var(--wald); }
.datum-tage button.dazwischen { background: rgba(192, 138, 46, .18); border-radius: 0; }
.datum-tage button.anfang { background: var(--gold); color: #fff; }
.datum-tage button.gewaehlt { background: var(--wald); color: var(--creme); }

/* ---- 11. Media-Castle-Signatur im Fuß (wie Odenwald Hostel: Logo 40 px + zwei Zeilen) */
.mc-signatur { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.mc-signatur img { width: 2.5rem; height: 2.5rem; display: block; }
.mc-signatur span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.mc-signatur small { font-size: .62rem; text-transform: uppercase; letter-spacing: .25em; color: rgba(255,255,255,.5); }
.mc-signatur b { font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,.85); transition: color .2s ease; }
.mc-signatur:hover b { color: var(--gold-hell); }
.fuss-unten { align-items: center; }

/* ---- 12. Media-Castle-Logo im Fuß mittig (KD 28.09.2026, 20:34: „Mach im Footer das
   Media Castle-Logo in die Mitte"). Drei Spalten: Copyright links, Signatur Mitte,
   rechts leer als Gegengewicht. Handy: untereinander, beides mittig. */
.fuss-unten { display: grid; grid-template-columns: 1fr auto 1fr; }
.fuss-unten > span { grid-column: 1; }
.fuss-unten > .mc-signatur { grid-column: 2; justify-self: center; }
@media (max-width: 759px) {
  .fuss-unten { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .fuss-unten > span, .fuss-unten > .mc-signatur { grid-column: 1; }
}


/* ---- KD 03.10.2026 ----------------------------------------------------------
   Knüller-Flyer raus: Fächer mit ZWEI Blättern (Motorrad vorn und am höchsten,
   E-Bike rechts dahinter), Flyer-Reihe auf arrangements.html mit drei Blättern,
   Platzhalter in der Knüller-Section. Dazu „Adi anrufen“ auf buchen.html und
   die kleinen Termin-Kästen in den Arrangements. */
.faecher.zwei .faecher-blatt:nth-child(1) { left: 10%; transform: translateY(-52%) rotate(-4deg); z-index: 3; }
.faecher.zwei .faecher-blatt:nth-child(2) { left: 40%; transform: translateY(-46%) rotate(6deg);  z-index: 2; }
.faecher.zwei .faecher-blatt:nth-child(1):hover, .faecher.zwei .faecher-blatt:nth-child(1):focus-visible { transform: translateY(-54%) rotate(-2deg) scale(1.03); }
.faecher.zwei .faecher-blatt:nth-child(2):hover, .faecher.zwei .faecher-blatt:nth-child(2):focus-visible { transform: translateY(-48%) rotate(4deg) scale(1.03); }
.angebote-flyer .faecher.zwei .faecher-blatt:nth-child(1) { left: 8%;  transform: translateY(-54%) rotate(-4deg); }
.angebote-flyer .faecher.zwei .faecher-blatt:nth-child(2) { left: 36%; transform: translateY(-45%) rotate(7deg); }
.angebote-flyer .faecher.zwei .faecher-blatt:nth-child(1):hover, .angebote-flyer .faecher.zwei .faecher-blatt:nth-child(1):focus-visible { transform: translateY(-56%) rotate(-2deg) scale(1.03); }
.angebote-flyer .faecher.zwei .faecher-blatt:nth-child(2):hover, .angebote-flyer .faecher.zwei .faecher-blatt:nth-child(2):focus-visible { transform: translateY(-47%) rotate(5deg) scale(1.03); }
@media (max-width: 759px) {
  .angebote-flyer .faecher.zwei .faecher-blatt:nth-child(1) { left: 10%; }
  .angebote-flyer .faecher.zwei .faecher-blatt:nth-child(2) { left: 40%; }
}
@media (min-width: 900px) { .flyer-reihe.drei { grid-template-columns: repeat(3, 1fr); width: min(100% - 2.5rem, 64rem); } }
.flyer-leer { cursor: default; }
.flyer-leer:hover .flyer-papier { transform: none; }

.anruf-direkt { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.3rem; }
.anruf-direkt .btn { padding-block: .95rem; font-size: 1rem; white-space: normal; }
.anruf-direkt span { font-size: .88rem; color: var(--tinte-weich); }

.termine-kurz {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  border-left: 3px solid var(--gold); border-radius: .35rem;
  background: rgba(192,138,46,.08);
}
.termine-kurz h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.termine-kurz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.termine-kurz li { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .2rem 1rem; font-size: .92rem; }
.termine-kurz p { margin: .55rem 0 0; font-size: .9rem; color: var(--tinte-weich); }
.termine-kurz ul + p { margin-top: .7rem; }
@media (max-width: 559px) { .termine-kurz li { grid-template-columns: 1fr; } }

/* ===== Freibad als Band (KD 04.10.2026: „mach aus dem Schwimmbad … einen banner und eine
   Möglichkeit alle fotos anzuschauen“). Foto füllt die volle Breite, Text links auf einem
   dunklen Verlauf; der Knopf öffnet die Bildansicht .fotos-gross (seite.js, [data-fotos]). ===== */
.freibad-band {
  position: relative; overflow: hidden; color: #fff;
  min-height: clamp(26rem, 52vw, 36rem); display: flex; align-items: center;
  scroll-margin-top: var(--kopf-hoehe);
}
.freibad-band-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.freibad-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(16,22,26,.82) 0%, rgba(16,22,26,.55) 45%, rgba(16,22,26,.05) 80%);
}
.freibad-band .bahn { position: relative; z-index: 2; width: 100%; }
.freibad-band-text { max-width: 32rem; padding-block: 3.2rem; }
.freibad-band .augenbraue { color: var(--gold-hell); }
.freibad-band h2 { color: #fff; margin: .4rem 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.1; }
.freibad-band p:not(.augenbraue) { color: rgba(255,255,255,.88); margin: 1rem 0 1.5rem; line-height: 1.6; }
@media (max-width: 759px) {
  .freibad-band { min-height: 0; align-items: flex-end; }
  .freibad-band::before { background: linear-gradient(0deg, rgba(16,22,26,.88) 0%, rgba(16,22,26,.6) 55%, rgba(16,22,26,.1) 100%); }
  .freibad-band-text { padding-top: 14rem; padding-bottom: 2.2rem; }
}

/* Bildansicht für mehrere Fotos (04.10.2026) */
.fotos-gross { border: 0; padding: 0; background: none; max-width: 94vw; max-height: 92vh; overflow: visible; }
.fotos-gross::backdrop { background: rgba(14,12,10,.9); }
.fotos-gross img { display: block; max-width: 94vw; max-height: 84vh; width: auto; height: auto; border-radius: .4rem; margin: 0 auto; }
.fotos-gross .fg-leiste { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .8rem; color: #fff; font-size: .9rem; }
.fotos-gross button {
  font: inherit; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; width: 2.6rem; height: 2.6rem; cursor: pointer; display: grid; place-items: center;
}
.fotos-gross button:hover { background: rgba(255,255,255,.28); }
.fotos-gross .fg-zu { position: absolute; top: -.6rem; right: -.6rem; background: rgba(20,16,12,.85); }
@media (max-width: 560px) { .fotos-gross .fg-zu { top: .4rem; right: .4rem; } }

/* ===========================================================================
   KD 04.10.2026, 16:21 — drei Ansagen auf einmal
   =========================================================================== */

/* 1 · Bewertungs-Köpfe NEBENEINANDER, BikerBetten links (zuerst im HTML), Google
   rechts. Unter 760 px untereinander, BikerBetten oben. */
.bb-koepfe {
  display: grid; gap: .9rem; margin: 1.8rem auto 0; max-width: 64rem;
}
.bb-koepfe .bb-kopf { margin: 0; max-width: none; height: 100%; box-sizing: border-box; }
.bb-koepfe .bb-kopf.bb-google { margin-top: 0; }
@media (min-width: 760px) {
  .bb-koepfe { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .bb-koepfe .bb-kopf { gap: 1rem 1.4rem; padding: 1.3rem 1.4rem; justify-content: flex-start; flex-wrap: nowrap; }
  .bb-koepfe .bb-text { flex: 1 1 auto; min-width: 0; }
  .bb-koepfe .bb-zahl { font-size: 2.8rem; }
}
@media (min-width: 760px) and (max-width: 979px) {
  .bb-koepfe .bb-kopf { flex-wrap: wrap; justify-content: center; text-align: center; }
  .bb-koepfe .bb-text { flex-basis: 100%; }
}

/* 2 · Unvollständige letzte Reihe MITTIG (z. B. termine.html #ganzjaehrig:
   vier Karten im Dreier-Raster → „5 Tage Knüllwald erleben“ allein in Reihe 2).
   Trick: 6 Spalten, jede Karte belegt 2 — dann lassen sich 1 oder 2 übrige
   Karten auf halbe Spalten setzen. Handy (eine Spalte) bleibt unverändert. */
@media (min-width: 880px) {
  .gitter.g3 { grid-template-columns: repeat(6, 1fr); }
  .gitter.g3 > * { grid-column: span 2; }
  .gitter.g3 > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  .gitter.g3 > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
}
@media (min-width: 700px) {
  .gitter.g2 { grid-template-columns: repeat(4, 1fr); }
  .gitter.g2 > * { grid-column: span 2; }
  .gitter.g2 > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}

/* 3 · Flyer-Reihe auf arrangements.html: Klick auf den Flyer SPRINGT zum
   Abschnitt (#motorrad, #ebike, #knueller, #weihnachten). Groß ansehen nur über
   die Lupe (seite.js) bzw. über die Flyer in den Abschnitten selbst. */
a.flyer-blatt { cursor: pointer; text-decoration: none; }
a.flyer-blatt .flyer-lupe { cursor: zoom-in; width: 2.5rem; height: 2.5rem; }
a.flyer-blatt:hover .flyer-lupe { opacity: 1; transform: translateY(0); }
a.flyer-blatt .flyer-lupe:hover { background: #fff; transform: scale(1.08); }
a.flyer-blatt .flyer-titel b::after { content: ' \2193'; color: var(--wald); }
/* html hat schon scroll-padding-top: var(--kopf-hoehe); das hier kommt obendrauf. */
#motorrad, #ebike, #knueller, #weihnachten { scroll-margin-top: .5rem; }

/* Galerie (KD 04.10.2026, 19:15: „eine Galerie oben in die Navigationsleiste, und da
   kommen wirklich alle Bilder rein“). Jedes Foto ist ein Knopf → Bildansicht .fotos-gross. */
.galerie-knopf { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.galerie-knopf:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.galerie-alle .galerie { grid-auto-flow: dense; }

/* „Alle anderen Termine können Sie individuell buchen“ OBEN und abgesetzt (KD 04.10.2026,
   19:15: „Das soll oben stehen … nicht in fett … so abgetrennt, damit man das checkt“).
   .termin-frei = großer Kasten unter dem Seitenkopf (termine.html, arrangements.html),
   .termin-frei-zeile = derselbe Satz direkt unter der Überschrift bzw. im Termin-Kasten. */
.termin-frei-band { background: var(--creme); }
.termin-frei {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.6rem;
  padding: 1.4rem 1.6rem; border: 2px solid var(--gold); border-radius: .6rem;
  background: rgba(192,138,46,.09); max-width: 64rem; margin: 0 auto;
}
.sprungmarken + .termin-frei, .termin-frei + .sprungmarken { margin-top: 2rem; }
.termin-frei-ico { color: var(--gold-tief); }
.termin-frei-titel { font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.25; margin: 0; color: var(--tinte, #1d1712); }
.termin-frei-text p { margin: 0; }
.termin-frei-text p + p { margin-top: .4rem; color: var(--tinte-weich); }
.termin-frei-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
@media (max-width: 859px) {
  .termin-frei { grid-template-columns: auto 1fr; padding: 1.1rem 1.1rem; }
  .termin-frei-knoepfe { grid-column: 1 / -1; justify-content: flex-start; }
  .termin-frei-knoepfe .btn { flex: 1 1 12rem; justify-content: center; }
}
.termin-frei-zeile {
  margin: 1rem 0 0; padding: .55rem .9rem; border-left: 3px solid var(--gold);
  background: rgba(192,138,46,.12); border-radius: .3rem; font-size: 1.02rem;
}
.abschnitt.wald .termin-frei-zeile { color: #fff; background: rgba(229,180,95,.14); border-left-color: var(--gold-hell); }
.termine-kurz h3 + .termin-frei-zeile { margin: 0 0 .7rem; color: var(--tinte); font-size: .95rem; }

/* Startbild: „Zimmer buchen“ nur auf dem Handy — ab 1060 px steht er in der Kopfzeile (KD 04.10.2026, 20:32) */
@media (min-width: 1060px) { .start-knoepfe .nur-handy { display: none; } }

/* Anfrageformular: Arrangement gewählt → Verpflegung inklusive statt Auswahl (KD 04.10.2026, 22:21) */
.auswahl[hidden] { display: none !important; }
.vp-inklusive { margin: .35rem 0 0; padding: .7rem .9rem; border-radius: 8px; background: rgba(46, 125, 50, .09); color: #2e5d31; font-weight: 600; }

/* Häkchen-Liste auf dunklem Grund (motorradhotel.html #termine, 04.10.2026) */
.abschnitt.wald .leistungen { color: rgba(255,255,255,.88); max-width: 46rem; margin-inline: auto; font-size: 1rem; }
.karte-link a { color: var(--bordeaux, #7a2320); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.karte-link a::after { content: ' →'; }