/* ============================================================
   Landgasthof Fischer – Gestaltung
   Farben aus der hauseigenen Speisekarte übernommen:
   Creme #ECE8DD, Dunkelbraun #492D06, dazu Gold und Salbei.
   Mobile-first, kein Framework.
   ============================================================ */

:root {
  /* Farben */
  --creme:        #ECE8DD;
  --creme-hell:   #F7F4EC;
  --weiss:        #FFFFFF;
  --braun-dunkel: #3D2A08;
  --braun:        #4C3A1C;
  --braun-hell:   #6E5A38;
  --gold:         #8A6224;
  --gold-hell:    #A67C36;
  --salbei:       #A3AE90;
  --salbei-hell:  #C9D0BC;
  --rand:         #D8D2C2;

  /* Typografie */
  --schrift-titel: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --schrift-text:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --breite:       78rem;
  --breite-schmal: 46rem;
  --abstand:      clamp(3rem, 7vw, 6rem);
  --radius:       4px;
  --schatten:     0 2px 14px rgba(61, 42, 8, .10);
  --schatten-hoch: 0 10px 34px rgba(61, 42, 8, .18);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--braun);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--braun-dunkel);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.06rem + .6vw, 1.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

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

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--braun-dunkel); color: var(--weiss);
  padding: .8rem 1.2rem; text-decoration: none;
}
.sprungmarke:focus { left: 0; color: var(--weiss); }

.klein { font-size: .9rem; color: var(--braun-hell); }

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

.bahn { padding: var(--abstand) 1.25rem; }
.bahn--creme { background: var(--creme-hell); }
.bahn--dunkel { background: var(--braun-dunkel); color: #E8DFCB; }
.bahn--dunkel h2, .bahn--dunkel h3 { color: var(--weiss); }
.bahn--dunkel a { color: #E0C48C; }

.innen { max-width: var(--breite); margin-inline: auto; }
.innen--schmal { max-width: var(--breite-schmal); margin-inline: auto; }

.kopfzeile { text-align: center; margin-bottom: 2.6rem; }
.kopfzeile p { max-width: 42rem; margin-inline: auto; color: var(--braun-hell); }

.zierlinie {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; margin: 0 0 1rem; color: var(--salbei);
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
}
.zierlinie::before, .zierlinie::after {
  content: ""; height: 1px; width: clamp(2rem, 8vw, 4.5rem); background: var(--salbei);
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--gold); color: var(--weiss);
  padding: .82rem 1.5rem; border: 1px solid var(--gold); border-radius: var(--radius);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
.knopf:hover { background: var(--braun-dunkel); border-color: var(--braun-dunkel); color: var(--weiss); }
.knopf:active { transform: translateY(1px); }
.knopf--rand { background: transparent; color: var(--braun-dunkel); border-color: var(--rand); }
.knopf--rand:hover { background: var(--braun-dunkel); border-color: var(--braun-dunkel); color: var(--weiss); }
.knopf--klein { padding: .5rem 1rem; font-size: .92rem; }
.knopf--voll { width: 100%; }

.alsLink {
  background: none; border: 0; padding: .35rem 0; font: inherit;
  color: inherit; text-decoration: underline; cursor: pointer;
}

/* ---------------------------------------------------------- Kopfbereich */

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(236, 232, 221, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
}
.kopf__innen {
  max-width: var(--breite); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1.25rem;
}
.kopf__marke { flex: 0 0 auto; line-height: 0; }
.kopf__marke img { width: clamp(120px, 20vw, 168px); height: auto; }

.kopf__schalter {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .5rem .8rem; font: inherit; color: var(--braun-dunkel); cursor: pointer;
}
.kopf__schalter-balken {
  position: relative; display: block; width: 20px; height: 2px;
  background: currentColor; transition: background .15s;
}
.kopf__schalter-balken::before,
.kopf__schalter-balken::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
  transition: transform .2s;
}
.kopf__schalter-balken::before { top: -6px; }
.kopf__schalter-balken::after  { top: 6px; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken { background: transparent; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::before { transform: translateY(6px) rotate(45deg); }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::after  { transform: translateY(-6px) rotate(-45deg); }

.kopf__nav { display: none; }
.kopf__nav.istOffen {
  display: block;
  position: absolute; inset: 100% 0 auto 0;
  background: var(--creme-hell);
  border-bottom: 1px solid var(--rand);
  box-shadow: var(--schatten);
  padding: 1rem 1.25rem 1.4rem;
  max-height: calc(100dvh - 4.5rem); overflow-y: auto;
}
.kopf__nav ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.kopf__nav li + li { border-top: 1px solid var(--rand); }
.kopf__nav a {
  display: block; padding: .78rem .2rem;
  color: var(--braun-dunkel); text-decoration: none; font-weight: 500;
}
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { color: var(--gold); }
.kopf__aktionen { display: grid; gap: .6rem; }

@media (min-width: 62rem) {
  .kopf__schalter { display: none; }
  .kopf__nav { display: flex !important; align-items: center; gap: 1.6rem; margin-left: auto; position: static; padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; }
  .kopf__nav ul { display: flex; gap: 1.35rem; margin: 0; }
  .kopf__nav li + li { border: 0; }
  .kopf__nav a { padding: .3rem 0; font-size: .97rem; position: relative; }
  .kopf__nav a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 2px; background: var(--gold);
  }
  .kopf__aktionen { display: flex; gap: .6rem; }
}

/* ---------------------------------------------------------- Hero */

.hero { position: relative; isolation: isolate; }
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img, .hero__bild picture { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(30,20,5,.52) 0%, rgba(30,20,5,.34) 45%, rgba(30,20,5,.66) 100%);
}
.hero__innen {
  max-width: var(--breite); margin-inline: auto;
  padding: clamp(4rem, 13vw, 8.5rem) 1.25rem clamp(2.5rem, 6vw, 4rem);
  color: var(--weiss); text-align: center;
  min-height: min(78dvh, 620px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero h1 { color: var(--weiss); text-shadow: 0 2px 18px rgba(0,0,0,.4); margin-bottom: .3em; }
.hero__unterzeile {
  font-size: clamp(.8rem, .72rem + .35vw, .98rem);
  letter-spacing: .26em; text-transform: uppercase;
  color: #EBDDBE; margin-bottom: 1rem;
}
.hero__text { max-width: 34rem; margin-inline: auto; font-size: 1.1rem; text-shadow: 0 1px 10px rgba(0,0,0,.45); }

/* Buchungs-Schnellsuche */
.suche {
  background: rgba(247, 244, 236, .97);
  color: var(--braun);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  padding: 1.1rem;
  max-width: 60rem; margin: 2rem auto 0; text-align: left;
}
.suche__zeile { display: grid; gap: .8rem; }
.suche__feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.suche__feld label { font-size: .82rem; font-weight: 600; color: var(--braun-dunkel); letter-spacing: .04em; }
.suche input, .suche select {
  font: inherit; padding: .68rem .7rem;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--weiss); color: var(--braun-dunkel);
  min-height: 44px; width: 100%; min-width: 0;
}
/* iOS Safari rendert input[type=date] mit einem eigenen, nativen Aussehen,
   das die CSS-Breite der Box ignoriert und dadurch rechts übersteht.
   -webkit-appearance:none schaltet nur dieses native Aussehen ab - das
   Antippen öffnet weiterhin das normale iOS-Datumsrad. */
.suche input[type="date"] {
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}
.suche__hinweis { margin: .7rem 0 0; font-size: .82rem; color: var(--braun-hell); }
.suche__fehler { margin: .6rem 0 0; color: #8C2F16; font-size: .88rem; font-weight: 600; }

@media (min-width: 48rem) {
  .suche { padding: 1.35rem 1.5rem; }
  .suche__zeile { grid-template-columns: 1fr 1fr .8fr auto; align-items: end; }
}

/* ---------------------------------------------------------- Raster */

.raster { display: grid; gap: 1.6rem; }
.raster--2 { grid-template-columns: 1fr; }
.raster--3 { grid-template-columns: 1fr; }
.raster--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .raster--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .raster--4 { grid-template-columns: repeat(4, 1fr); }
}

.zweispalt { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
/* Überschrift über dem Fließtext bewusst immer mittig - auf dem Handy, weil ihr
   im gestapelten Layout die zweite Spalte als Gegengewicht fehlt, und am
   Bildschirm auf Wunsch ebenso, statt beim Erreichen der Zweispaltigkeit auf
   linksbündig zu wechseln. */
.zweispalt h2, .zweispalt h3 { text-align: center; }
@media (min-width: 56rem) {
  .zweispalt { grid-template-columns: 1fr 1fr; }
  .zweispalt--gedreht > :first-child { order: 2; }
  /* Bildseite bekommt spürbar mehr Raum als der Text daneben. */
  .zweispalt--bildbetont { grid-template-columns: .82fr 1.18fr; }
}

/* Zwei Bilder, garantiert gleich groß: feste, identische Bildbox statt der
   natürlichen (und je nach Foto unterschiedlichen) Seitenverhältnisse. */
.raster--gleichgross .karte__bild { aspect-ratio: 4 / 3; }

/* Karten */
.karte {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.karte__bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--creme); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.karte__text { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.karte__text h3 { margin-bottom: .35rem; }
.karte__text p { color: var(--braun-hell); font-size: .96rem; }
.karte__fuss { margin-top: auto; padding-top: .9rem; }

.marke {
  display: inline-block; font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .4rem;
}

/* Merkmalliste mit Haken */
.merkmale { list-style: none; margin: .6rem 0 0; padding: 0; }
.merkmale li { position: relative; padding-left: 1.5rem; margin-bottom: .35rem; font-size: .95rem; }
.merkmale li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .5rem; height: .28rem;
  border-left: 2px solid var(--salbei); border-bottom: 2px solid var(--salbei);
  transform: rotate(-45deg);
}

/* Öffnungszeiten */
.zeiten { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.2rem; }
.zeiten dt { color: inherit; }
.zeiten dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------- Galerie */

.galerie-raster {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.galerie-raster a {
  display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius); background: var(--rand);
}
.galerie-raster img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.galerie-raster a:hover img { transform: scale(1.05); }

.filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.filter button {
  font: inherit; font-size: .9rem; cursor: pointer;
  background: transparent; color: var(--braun);
  border: 1px solid var(--rand); border-radius: 999px; padding: .42rem 1rem;
}
.filter button[aria-pressed="true"] { background: var(--braun-dunkel); border-color: var(--braun-dunkel); color: var(--weiss); }

/* Leuchtkasten */
.leuchtkasten {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(24, 16, 4, .93);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.leuchtkasten[hidden] { display: none; }
.leuchtkasten img { max-width: 100%; max-height: 86dvh; object-fit: contain; border-radius: var(--radius); }
.leuchtkasten__schliessen,
.leuchtkasten__vor, .leuchtkasten__zurueck {
  position: absolute; background: rgba(255,255,255,.14); color: var(--weiss);
  border: 0; border-radius: 50%; width: 46px; height: 46px;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.leuchtkasten__schliessen { top: 1rem; right: 1rem; }
.leuchtkasten__zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.leuchtkasten__vor { right: 1rem; top: 50%; transform: translateY(-50%); }
.leuchtkasten__schliessen:hover, .leuchtkasten__vor:hover, .leuchtkasten__zurueck:hover { background: rgba(255,255,255,.28); }

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

.stimme {
  background: var(--weiss); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column;
}
.stimme__text { font-style: italic; color: var(--braun); }
.stimme__text::before { content: "\201E"; font-family: var(--schrift-titel); font-size: 2.4rem; line-height: 0; color: var(--salbei); margin-right: .15rem; vertical-align: -.35em; }
.stimme__name { margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--braun-dunkel); font-style: normal; }
.stimme__quelle { font-size: .82rem; color: var(--braun-hell); font-weight: 400; }

/* ---------------------------------------------------------- Speisekarte */

.karte-abschnitt + .karte-abschnitt { margin-top: 2.6rem; }
.gericht { padding: .9rem 0; border-bottom: 1px dashed var(--rand); }
.gericht:last-child { border-bottom: 0; }
.gericht__kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.gericht__name { font-family: var(--schrift-titel); font-size: 1.12rem; font-weight: 600; color: var(--braun-dunkel); }
.gericht__preis { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gold); font-weight: 600; }
.gericht__text { margin: .2rem 0 0; font-size: .95rem; color: var(--braun-hell); font-style: italic; }
.kennzeichen { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--salbei); border: 1px solid var(--salbei-hell); border-radius: 999px; padding: .05rem .5rem; margin-left: .4rem; vertical-align: .1em; }

/* ---------------------------------------------------------- Formulare */

.formular { display: grid; gap: 1.1rem; }
.feldgruppe { border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.2rem 1.25rem 1.4rem; background: var(--weiss); }
.feldgruppe > legend { font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 600; color: var(--braun-dunkel); padding: 0 .5rem; }
.feldreihe { display: grid; gap: .9rem; }
@media (min-width: 40rem) {
  .feldreihe--2 { grid-template-columns: 1fr 1fr; }
  .feldreihe--3 { grid-template-columns: repeat(3, 1fr); }
}
.feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.feld label { font-size: .88rem; font-weight: 600; color: var(--braun-dunkel); }
.feld .pflicht { color: var(--gold); }
.feld input, .feld select, .feld textarea {
  font: inherit; padding: .66rem .7rem;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--weiss); color: var(--braun-dunkel); min-height: 44px; width: 100%; min-width: 0;
}
.feld textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.feld input:invalid:not(:placeholder-shown) { border-color: #B4553A; }
/* Gleicher iOS-Safari-Fix wie beim Suchfeld im Hero: das native Aussehen
   von input[type=date] ignoriert sonst die CSS-Breite und läuft über. */
.feld input[type="date"] {
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}
.feld__hilfe { font-size: .82rem; color: var(--braun-hell); }

.ankreuz {
  display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem;
  /* Mindestens 44 px Trefferflaeche - auf dem Handy trifft man 26 px schlecht. */
  min-height: 44px; padding: .35rem 0; cursor: pointer;
}
.ankreuz input { width: 1.3rem; height: 1.3rem; min-height: 0; margin-top: .3rem; flex: 0 0 auto; accent-color: var(--gold); }
.ankreuzliste { display: grid; gap: .6rem; }
@media (min-width: 40rem) { .ankreuzliste--2 { grid-template-columns: 1fr 1fr; } }

/* Honeypot – für Menschen unsichtbar, für Bots ein Köder */
.koeder {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.meldung { border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.5rem; border: 1px solid; }
.meldung--gut { background: #EDF3E7; border-color: #A9BE93; color: #33501F; }
.meldung--fehler { background: #F8EBE6; border-color: #D5A08C; color: #7B3319; }
.meldung ul { margin: .5rem 0 0; padding-left: 1.2rem; }


/* ---------------------------------------------------------- Karte */

.kartenplatz { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rand); background: var(--creme-hell); }
.kartenplatz iframe { display: block; width: 100%; height: 420px; border: 0; }
.kartenplatz__hinweis { padding: 2.4rem 1.5rem; text-align: center; }
.kartenplatz__hinweis p { max-width: 34rem; margin-inline: auto; color: var(--braun-hell); font-size: .95rem; }
.routen { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }

/* ---------------------------------------------------------- Veranstaltungen */

.termin { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rand); }
.termin:last-child { border-bottom: 0; }
.termin__datum {
  background: var(--braun-dunkel); color: var(--weiss); border-radius: var(--radius);
  padding: .55rem .7rem; text-align: center; min-width: 4.6rem; align-self: start;
}
.termin__tag { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1; font-family: var(--schrift-titel); }
.termin__monat { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .2rem; }
.termin__inhalt h3 { margin-bottom: .2rem; }
.termin--vorbei { opacity: .5; }
.termin--vorbei .termin__datum { background: var(--braun-hell); }

/* ---------------------------------------------------------- Fuß */

.fuss { background: var(--braun-dunkel); color: #D9CDB4; margin-top: var(--abstand); }
.fuss a { color: #E8D3A6; }
.fuss a:hover { color: var(--weiss); }
.fuss h2 { color: var(--weiss); font-size: 1.1rem; margin-bottom: .8rem; }
.fuss__innen {
  max-width: var(--breite); margin-inline: auto;
  padding: 3rem 1.25rem 2.4rem;
  display: grid; gap: 2.2rem;
}
@media (min-width: 46rem) { .fuss__innen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .fuss__innen { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.fuss__logo { width: 160px; height: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .92; }
.fuss__adresse { line-height: 1.6; }
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: .42rem; }
.fuss__sozial { display: flex; flex-direction: column; gap: .6rem; }
.fuss__sozial a { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.fuss__sozial a:hover { text-decoration: underline; }
.fuss__siegel { width: 108px; height: auto; margin-top: 1.2rem; background: var(--weiss); border-radius: var(--radius); padding: .4rem; }
.fuss .zeiten dt { color: #D9CDB4; }
.fuss .zeiten dd { color: var(--weiss); }
.fuss .klein { color: #B7A88A; }

.fuss__leiste {
  border-top: 1px solid rgba(255,255,255,.14);
  max-width: var(--breite); margin-inline: auto;
  padding: 1.1rem 1.25rem 1.6rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; align-items: center;
  font-size: .88rem;
}
.fuss__leiste p { margin: 0; }
.fuss__leiste nav { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.fuss__leiste .alsLink { color: #E8D3A6; }

/* ---------------------------------------------------------- Einwilligung */

.einwilligung {
  position: fixed; inset: auto 0 0 0; z-index: 130;
  background: var(--creme-hell);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -6px 30px rgba(0,0,0,.22);
  padding: 1.2rem 1.25rem calc(1.2rem + env(safe-area-inset-bottom));
}
.einwilligung[hidden] { display: none; }
.einwilligung__inhalt { max-width: var(--breite); margin-inline: auto; display: grid; gap: .8rem; }
.einwilligung h2 { font-size: 1.15rem; margin: 0; }
.einwilligung p { margin: 0; font-size: .92rem; color: var(--braun); }
.einwilligung__knoepfe { display: grid; gap: .6rem; }
@media (min-width: 40rem) {
  .einwilligung__knoepfe { display: flex; justify-content: flex-end; }
  .einwilligung__inhalt { grid-template-columns: 1fr auto; align-items: center; gap: 1.6rem; }
  .einwilligung__knoepfe { flex: 0 0 auto; }
}

/* ---------------------------------------------------------- Sonstiges */

.rechtstext { max-width: var(--breite-schmal); margin-inline: auto; }
.rechtstext h2 { margin-top: 2.2rem; font-size: 1.35rem; }
.rechtstext h3 { margin-top: 1.6rem; font-size: 1.1rem; }
.rechtstext dl { display: grid; gap: .3rem 1.4rem; }
@media (min-width: 40rem) { .rechtstext dl { grid-template-columns: max-content 1fr; } }
.rechtstext dt { font-weight: 600; color: var(--braun-dunkel); }
.rechtstext dd { margin: 0; }

.tabellenrolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media print {
  .kopf, .fuss__innen, .einwilligung, .sprungmarke, .knopf { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Beschriftete Angaben mit umbrechendem Fließtext.
   Im Unterschied zu .zeiten darf hier alles umbrechen. */
.angaben { margin: 0; display: grid; gap: .1rem; }
.angaben dt { font-weight: 600; color: var(--braun-dunkel); margin-top: .7rem; }
.angaben dt:first-child { margin-top: 0; }
.angaben dd { margin: 0; }

/* Grosser Knopf, z. B. auf der Buchungsseite */
.knopf--gross { padding: 1rem 2rem; font-size: 1.05rem; }

.buchungspanel {
  display: grid; gap: 2rem;
  background: var(--weiss); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
@media (min-width: 52rem) {
  .buchungspanel { grid-template-columns: 1.3fr 1fr; align-items: center; }
}
.buchungspanel__aktion {
  background: var(--creme-hell); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.5rem; text-align: center;
}
.buchungspanel__aktion .knopf--gross { width: 100%; }
.buchungspanel__aktion .klein { margin: .7rem 0 0; }
.buchungspanel__oder {
  margin: 1.2rem 0 .8rem; font-size: .85rem; color: var(--braun-hell);
  display: flex; align-items: center; gap: .8rem;
}
.buchungspanel__oder::before, .buchungspanel__oder::after {
  content: ""; flex: 1; height: 1px; background: var(--rand);
}

/* Hervorgehobener Sofortbuchen-Verweis unter der Schnellsuche */
.suche__sofort { font-weight: 700; color: var(--gold); white-space: nowrap; }

/* Hinweisbalken im Testbetrieb. Bewusst auffällig, damit niemand die
   Testfassung für die echte Website hält. */
.testbalken {
  background: #8C3A16; color: #FFF3E4;
  padding: .6rem 1.25rem; text-align: center;
  font-size: .9rem; line-height: 1.5;
  position: relative; z-index: 70;
}
.testbalken a { color: #FFD9A8; }
.istTest .kopf { top: 0; }

/* Echter Betriebshinweis (z. B. Bauarbeiten/Umleitung) - vom Betreiber selbst
   ein-/ausschaltbar, unabhängig vom Testbetrieb-Balken, deshalb bewusst
   andersfarbig statt alarmierend rot. */
.hinweisbanner {
  background: var(--gold); color: var(--weiss);
  padding: .6rem 1.25rem; text-align: center;
  font-size: .9rem; line-height: 1.5;
  position: relative; z-index: 65;
}
.hinweisbanner a, .hinweisbanner strong { color: inherit; }