/* ===========================================================================
   Mühlenhof Bosse — eine Gestaltungsdatei für den ganzen Auftritt
   ---------------------------------------------------------------------------
   Aufbau dieser Datei:
     1. Entwurf 5, unverändert übernommen — die Gestaltungssprache des Hauses.
     2. Brücke: was das CMS ausgibt, aber der Entwurf nicht kannte
        (Bahn, Menü als Liste, Inhaltsspalten, Fußraster).
     3. Modulausgaben aus der Vorlage, mit den Farben des Hofes versorgt.
   Entstanden am 23.09.2026 aus entwuerfe/entwurf-5/stil.css.
   =========================================================================== */

/* ===========================================================================
   1. Entwurf 5 — unverändert
   =========================================================================== */

/* ==========================================================================
   Mühlenhof Bosse — Entwurf 5
   Gestaltungsthese: Die Chronik eines Hofes. Papier, Tinte, Korn.
   Farben aus dem Logo: Moosgrün #3C4818 · Wiesengrün #84903C ·
   Sandgold #F0B46C · Creme #F0E4CC · Fast-Schwarz #242424
   ========================================================================== */

/* ---------- Grundwerte ---------- */
:root {
  --gruen:       #3C4818;   /* Tinte, Hauptfarbe */
  --gruen-tief:  #2B3410;   /* Fuß, dunkle Flächen */
  --wiese:       #84903C;   /* Zweitgrün, dekorativ */
  --wiese-text:  #5F6A28;   /* Zweitgrün, lesbar auf Papier */
  --gold:        #F0B46C;   /* Sandgold, warme Flächen */
  --gold-linie:  #D9A45C;   /* Haarlinien, Zierrat */
  --gold-text:   #7F520E;   /* Goldton, lesbar als Schrift. Am 24.09.2026 von
                               #8F5F14 abgedunkelt: auf Creme kam der alte Wert
                               nur auf 4,37 : 1, jetzt 5,35 : 1. */
  --creme:       #F0E4CC;   /* Markencreme, Flächen */
  --papier:      #FAF5E9;   /* Seitengrund */
  --karte:       #FFFDF4;   /* Kartenflächen */
  --tinte:       #2A2A20;   /* Fließtext */
  --tinte-leise: #6B6753;   /* Nebentext */
  --schwarz:     #242424;

  /* Krimidinner-Nacht */
  --nacht:       #121114;
  --nacht-karte: #1B191E;
  --rauch:       #D8D2C4;
  --blut:        #C22638;

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --breit: 1160px;
  --schmal: 780px;
  --radius: 6px;
  --schatten: 0 1px 2px rgba(42, 42, 32, .06), 0 10px 32px -18px rgba(42, 42, 32, .28);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--gruen);
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: .005em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }

p { margin: 0 0 1em; }

a { color: var(--gruen); text-decoration-color: var(--gold-linie); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-text); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, label:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--wiese);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--schwarz); }

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

.innen { max-width: var(--breit); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.innen--schmal { max-width: var(--schmal); }

.abschnitt { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.abschnitt--creme { background: var(--creme); }
.abschnitt--dunkel { background: var(--gruen-tief); color: var(--creme); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--creme); }

/* Vorzeile: kleine Kapitelmarke über jeder Überschrift */
.vorzeile {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--wiese-text);
  margin: 0 0 .9rem;
}
.abschnitt--dunkel .vorzeile { color: var(--gold); }

/* Jahresmarke: die Chronik-Ziffer als Zierelement */
.jahr {
  display: inline-block;
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--gold-text);
  border: 1px solid var(--gold-linie);
  border-radius: 999px;
  padding: .15rem .85rem;
  background: var(--karte);
}

/* Die Ortsmarke auf der Startseite ist seit dem 24.09.2026 ein Verweis auf
   den Routenplaner (Stefan: "wenn man rauf klickt routenplaner oeffnen").
   Als Pille sieht sie nicht nach Verweis aus - deshalb der Zeiger, die
   Farbumkehr beim Ueberfahren und ein sichtbarer Rahmen fuer die Tastatur.
   Die Adresse kommt aus den Stammdaten ({sd_googleanfahrt}), nicht fest
   aus dem Text: Zieht der Betrieb um, zieht der Verweis mit. */
a.jahr {
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
a.jahr:hover,
a.jahr:focus-visible {
  background: var(--gold); border-color: var(--gold); color: var(--gruen-tief);
}
a.jahr:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

/* Zierlinie mit Raute */
.zier {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.4rem 0;
}
.zier::before, .zier::after {
  content: "";
  height: 1px;
  flex: 0 0 3.2rem;
  background: var(--gold-linie);
}
.zier i {
  width: 7px; height: 7px;
  background: var(--wiese);
  transform: rotate(45deg);
}
.zier--mitte { justify-content: center; }

.abschnittkopf { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.abschnittkopf--mitte { margin-inline: auto; text-align: center; }
.abschnittkopf--mitte .zier { justify-content: center; }
.abschnittkopf p:last-child { margin-bottom: 0; }

.einleitung {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--tinte);
}

/* Knöpfe */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--creme);
  background: var(--gruen);
  border: 1px solid var(--gruen);
  border-radius: var(--radius);
  padding: .95rem 1.7rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--gruen-tief); color: var(--gold); }
.btn--umriss {
  background: transparent;
  color: var(--gruen);
  border-color: var(--gruen);
}
.btn--umriss:hover { background: var(--gruen); color: var(--creme); }
.btn--hell {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--schwarz);
}
.btn--hell:hover { background: var(--creme); border-color: var(--creme); color: var(--gruen); }
.btn--klein { padding: .6rem 1.1rem; font-size: .74rem; }

.knopfzeile { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Eine Knopfzeile, die unter einem Kartenraster steht und den Abschnitt
   abschliesst: mittig und mit Luft nach oben. Vorher klebte der Knopf
   "Tagung anfragen" unmittelbar am Raster (Stefan, 24.09.2026). Ersetzt
   zugleich ein inline-style="justify-content:center" im Seiteninhalt. */
.knopfzeile--schluss {
  justify-content: center;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

/* Merkmal-Chips */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.chips li {
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--gruen);
  background: var(--creme);
  border: 1px solid rgba(60, 72, 24, .16);
  border-radius: 999px;
  padding: .28rem .75rem;
  white-space: nowrap;
}

/* Häkchenliste */
.haken { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.haken--spalten { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
@media (max-width: 620px) { .haken--spalten { grid-template-columns: 1fr; } }
.haken li { padding: .3rem 0 .3rem 1.9rem; position: relative; }
.haken li::before {
  content: "✓";
  position: absolute;
  left: 0; top: .3rem;
  color: var(--wiese-text);
  font-weight: 700;
}
.abschnitt--dunkel .haken li::before { color: var(--gold); }

/* Hinweiskasten */
.hinweis {
  border-left: 3px solid var(--gold-linie);
  background: var(--karte);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
  color: var(--tinte-leise);
  font-size: .95rem;
}
.hinweis strong { color: var(--gruen); }

/* Bildrahmen: das Design trägt die Fotos */
.rahmen {
  background: var(--karte);
  border: 1px solid rgba(60, 72, 24, .12);
  border-radius: var(--radius);
  padding: .55rem;
  box-shadow: var(--schatten);
}
.rahmen img { border-radius: 3px; width: 100%; object-fit: cover; }
.rahmen figcaption {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--tinte-leise);
  padding: .65rem .35rem .25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.rahmen figcaption em { font-style: normal; color: var(--gold-text); white-space: nowrap; }

/* ---------- Kopf & Navigation ---------- */
.kopf {
  background: var(--papier);
  border-bottom: 1px solid rgba(60, 72, 24, .16);
  position: sticky;
  top: 0;
  z-index: 50;
}
.kopf__innen {
  max-width: var(--breit);
  margin: 0 auto;
  padding: .65rem clamp(1.1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.marke {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  margin-right: auto;
}
.marke img { width: 56px; height: 56px; }
.marke__text { display: flex; flex-direction: column; line-height: 1.25; }
.marke__text strong {
  font-family: var(--serif);
  font-size: 1.22rem;
  letter-spacing: .04em;
  color: var(--gruen);
}
.marke__text small {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.navschalter { position: absolute; opacity: 0; pointer-events: none; }
.navknopf {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  border: 1px solid rgba(60, 72, 24, .25);
  border-radius: var(--radius);
  cursor: pointer;
}
.navknopf span { display: block; height: 2px; background: var(--gruen); border-radius: 2px; }

.hauptnav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); }
.hauptnav a:not(.btn) {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gruen);
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.hauptnav a:not(.btn):hover { color: var(--gold-text); }
.hauptnav a[aria-current="page"] { border-bottom-color: var(--gold-linie); color: var(--gold-text); }
.hauptnav .btn { padding: .7rem 1.25rem; }
.hauptnav .btn[aria-current="page"] { background: var(--gruen-tief); color: var(--gold); border-color: var(--gruen-tief); }

/* ---------- Held (Startseite) ---------- */
.held {
  position: relative;
  min-height: clamp(30rem, 78vh, 44rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--gruen-tief);
}
.held > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.held::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(24, 28, 8, .35) 0%, rgba(24, 28, 8, .1) 50%, rgba(24, 28, 8, .3) 100%),
    linear-gradient(to top, rgba(24, 28, 8, .94) 0%, rgba(24, 28, 8, .74) 35%, rgba(24, 28, 8, .38) 65%, rgba(24, 28, 8, .18) 100%);
}
.held__inhalt {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--breit);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.1rem, 4vw, 2rem);
  color: var(--creme);
}
.held__inhalt .vorzeile { color: #F7ECCB; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.held__inhalt h1 { color: #FCF8EC; max-width: 17em; margin-bottom: .4em; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.held__inhalt .einleitung { color: #EFE9D6; max-width: 38em; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.held__tel {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: .04em;
}
.held__tel:hover { color: var(--creme); }
.held__inhalt .held__tel { color: #F7ECCB; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.held__inhalt .held__tel:hover { color: #FFFFFF; }

/* Unterseiten-Held (Banner) */
.held--flach { min-height: clamp(16rem, 42vh, 24rem); }

/* ---------- Zahlenband ---------- */
.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: rgba(60, 72, 24, .16);
  border-block: 1px solid rgba(60, 72, 24, .16);
}
.zahlen > div { background: var(--creme); padding: 1.6rem 1.2rem; text-align: center; }
.zahlen b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  color: var(--gruen);
  line-height: 1.1;
}
.zahlen span {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* ---------- Kartenraster (Säulen, Events, Partner …) ---------- */
.raster { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }

.karte {
  background: var(--karte);
  border: 1px solid rgba(60, 72, 24, .12);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.karte__bild { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.karte__leib { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.karte__leib h3 { margin-bottom: .35em; }
.karte__leib .haken { margin-top: auto; }
.karte__fuss { margin-top: auto; padding-top: .6rem; }

/* ---------- Duett: Text neben Bild ---------- */
.duett {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
}
.duett--tausch > :first-child { order: 2; }
.duett--tausch > :last-child { order: 1; }

/* ---------- Zitate ---------- */
.zitate { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2rem); }
.zitat {
  background: var(--karte);
  border: 1px solid rgba(60, 72, 24, .12);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.4rem;
  margin: 0;
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
}
.zitat p {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--tinte);
}
.zitat p::before { content: "\201E"; color: var(--gold-linie); font-size: 1.4em; line-height: 0; margin-right: .05em; }
.zitat p::after { content: "\201C"; color: var(--gold-linie); font-size: 1.4em; line-height: 0; margin-left: .05em; }
.zitat footer {
  margin-top: auto;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.sterne { color: var(--gold-text); letter-spacing: .18em; font-size: .85rem; margin-bottom: .5rem; }

/* ---------- Zimmerseite ---------- */
.merkmale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(60,72,24,.16); border: 1px solid rgba(60,72,24,.16); border-radius: var(--radius); overflow: hidden; }
.merkmale > div { background: var(--karte); padding: 1.5rem 1.4rem; }
.merkmale h3 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .55rem;
}
.merkmale p { font-size: .93rem; color: var(--tinte-leise); margin: 0; }

.preistafel {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(60,72,24,.16);
  border: 1px solid rgba(60,72,24,.16);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.6rem 0;
}
.preistafel > div { flex: 1 1 180px; background: var(--creme); padding: 1.3rem 1.4rem; text-align: center; }
.preistafel b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--gruen); }
.preistafel span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-leise); }

.zimmer { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.6vw, 2rem); }
.zimmer-karte { position: relative; }
.zimmer-karte .karte__bild { aspect-ratio: 16 / 10; }
.zimmer-karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .3rem;
}
.zimmer-karte__kopf h3 { margin: 0; }
.preis {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--gruen);
  white-space: nowrap;
}
.preis small {
  display: block;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  text-align: right;
}
.zimmer-karte .vorzeile { margin-bottom: .4rem; font-size: .68rem; }
.besonders {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-text);
  border-top: 1px solid rgba(60,72,24,.12);
  padding-top: .8rem;
  margin: .4rem 0 0;
}

/* ---------- Galerie ---------- */
.kapitel { counter-reset: none; }
.kapitelkopf {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  border-bottom: 1px solid var(--gold-linie);
  padding-bottom: .8rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.kapitelkopf b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.6rem;
  color: var(--gold-linie);
  line-height: 1;
}
.kapitelkopf h2 { margin: 0; }
.kapitelkopf p { margin: 0 0 0 auto; color: var(--tinte-leise); font-size: .9rem; text-align: right; }

.mosaik { columns: 3; column-gap: clamp(1.2rem, 2.6vw, 2rem); }
.mosaik .rahmen { break-inside: avoid; margin: 0 0 clamp(1.2rem, 2.6vw, 2rem); }

/* ---------- Veranstaltungen ---------- */
.eventliste { display: grid; gap: clamp(1.2rem, 2.6vw, 1.8rem); }
.event {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  background: var(--karte);
  border: 1px solid rgba(60, 72, 24, .12);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.event__bild { position: relative; min-height: 240px; }
.event__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event__leib { padding: clamp(1.3rem, 2.6vw, 2rem); display: flex; flex-direction: column; }
.event__leib h3 { margin-bottom: .2rem; }
.event__meta {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .8rem;
}
.event__fuss {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
}
.event__preis { font-family: var(--serif); font-size: 1.3rem; color: var(--gruen); margin-right: auto; }
.event__preis small { font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }

/* Namenskollision: Der Entwurf nennt die Terminmarken <ul class="termine">,
   das Modul nennt seinen Abschnitt <section class="termine">. Ohne das ul
   davor machte diese Regel aus dem Abschnitt einen Flexbehaelter, und die
   Terminliste schrumpfte auf ein Drittel der Breite. 24.09.2026. */
.termine { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.termine li {
  font-size: .8rem;
  letter-spacing: .04em;
  border: 1px solid rgba(60,72,24,.25);
  border-radius: 999px;
  padding: .28rem .8rem;
  color: var(--gruen);
  background: var(--papier);
}
.termine li.aus {
  color: var(--tinte-leise);
  background: transparent;
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-color: rgba(107, 103, 83, .6);
}
.termine li.aus::after {
  content: "ausverkauft";
  text-decoration: none;
  display: inline-block;
  margin-left: .5rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #96351E;
}
.stempel {
  position: absolute;
  top: .9rem; left: .9rem;
  z-index: 1;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--gruen);
  color: var(--creme);
  border-radius: 999px;
  padding: .35rem .9rem;
}
.stempel--rot { background: #96351E; }

/* ---------- Formular ---------- */
.formularseite {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}
.formular {
  background: var(--karte);
  border: 1px solid rgba(60, 72, 24, .12);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
}
.formular fieldset {
  border: 0;
  border-top: 1px solid var(--gold-linie);
  margin: 0 0 2.2rem;
  padding: 1.6rem 0 0;
}
.formular fieldset:first-of-type { border-top: 0; padding-top: 0; }
.formular legend {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gruen);
  padding: 0 .8rem 0 0;
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.formular legend .schritt {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.formular legend + p { color: var(--tinte-leise); font-size: .92rem; margin-top: .5rem; }

.feldzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.feldzeile--drei { grid-template-columns: 1fr 1fr 1fr; }
.feld { display: flex; flex-direction: column; gap: .35rem; }
.feld--breit { grid-column: 1 / -1; }
.feld label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gruen);
}
.feld label b { color: var(--gold-text); font-weight: 700; }
.feld input, .feld select, .feld textarea {
  font: inherit;
  color: var(--tinte);
  background: var(--papier);
  border: 1px solid rgba(60, 72, 24, .28);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  width: 100%;
}
.feld input::placeholder, .feld textarea::placeholder { color: #A39D87; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--wiese);
  outline-offset: 0;
  border-color: var(--wiese);
}
.feld small { color: var(--tinte-leise); font-size: .8rem; }

.zustimmung { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; }
.zustimmung input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--gruen); flex: 0 0 auto; }
.zustimmung label { font-size: .88rem; color: var(--tinte-leise); }
.zustimmung label strong { color: var(--gruen); }

.seitenkasten {
  background: var(--creme);
  border: 1px solid rgba(60, 72, 24, .16);
  border-radius: var(--radius);
  padding: 1.6rem;
  position: sticky;
  top: 6.5rem;
}
.seitenkasten h2 { font-size: 1.3rem; }
.seitenkasten .zeiten { margin-bottom: 1.2rem; }

/* Öffnungszeiten-Tabelle */
.zeiten { width: 100%; border-collapse: collapse; font-size: .92rem; }
.zeiten td { padding: .35rem 0; border-bottom: 1px solid rgba(60, 72, 24, .14); vertical-align: top; }
.zeiten td:last-child { text-align: right; white-space: nowrap; }
.zeiten tr:last-child td { border-bottom: 0; }

/* ---------- Krimidinner „Silencio" — die Nacht ---------- */
.noir { background: var(--nacht); color: var(--rauch); }
.noir .kopf { background: var(--nacht); border-bottom-color: rgba(216, 210, 196, .18); }
.noir .marke img { background: var(--creme); border-radius: 50%; padding: 3px; }
.noir .marke__text strong { color: var(--rauch); }
.noir .marke__text small { color: #8F8A7C; }
.noir .hauptnav a:not(.btn) { color: var(--rauch); }
.noir .hauptnav a:not(.btn):hover { color: var(--gold); }
.noir .hauptnav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.noir .navknopf { border-color: rgba(216, 210, 196, .35); }
.noir .navknopf span { background: var(--rauch); }
.noir .hauptnav .btn { background: var(--blut); border-color: var(--blut); color: #fff; }
.noir .hauptnav .btn:hover { background: #A11A2A; }
.noir h1, .noir h2, .noir h3 { color: #F2EDE0; }
.noir a { color: var(--gold); text-decoration-color: rgba(240, 180, 108, .5); }
.noir a:hover { color: #F2EDE0; }
.noir ::selection { background: var(--blut); color: #fff; }

.noir-held {
  position: relative;
  overflow: hidden;
  background: #000;
}
.noir-held img { width: 100%; object-fit: cover; max-height: 78vh; object-position: center 20%; }
.noir-held::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--nacht) 2%, rgba(18, 17, 20, 0) 45%);
}

.noir-titel { text-align: center; margin-top: -6rem; position: relative; z-index: 1; padding-bottom: 1rem; }
.noir-titel .vorzeile { color: #E8556A; }
.noir-titel h1 {
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-style: italic;
  letter-spacing: .02em;
  color: #F2EDE0;
  margin-bottom: .15em;
}
.noir-titel .untertitel {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-style: italic;
  color: var(--gold);
  margin: 0;
}

.noir-karte {
  background: var(--nacht-karte);
  border: 1px solid rgba(216, 210, 196, .14);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.noir .zier i { background: var(--blut); }
.noir .zier::before, .noir .zier::after { background: rgba(216, 210, 196, .3); }
.noir .haken li::before { color: var(--blut); }
.noir .vorzeile { color: var(--gold); }
.noir .hinweis {
  background: var(--nacht-karte);
  border-left-color: var(--blut);
  color: #B7B1A2;
}
.noir .hinweis strong { color: #F2EDE0; }
.noir .termine li { background: transparent; border-color: rgba(216, 210, 196, .35); color: var(--rauch); }
.noir .termine li.aus { color: #7E7A6E; }
.noir .termine li.aus::after { color: #E8556A; }
.noir .btn--blut { background: var(--blut); border-color: var(--blut); color: #fff; }
.noir .btn--blut:hover { background: #A11A2A; color: #fff; }
.noir .btn--umriss { color: var(--rauch); border-color: rgba(216, 210, 196, .45); }
.noir .btn--umriss:hover { background: var(--rauch); color: var(--nacht); }
.noir .rahmen { background: var(--nacht-karte); border-color: rgba(216, 210, 196, .14); }
.noir .rahmen figcaption { color: #8F8A7C; }
.noir .einleitung { color: var(--rauch); }
.noir .zahlen { background: rgba(216, 210, 196, .14); border-color: rgba(216, 210, 196, .14); }
.noir .zahlen > div { background: var(--nacht-karte); }
.noir .zahlen b { color: var(--gold); }
.noir .zahlen span { color: #8F8A7C; }

/* ---------- Fuß ---------- */
.fuss {
  background: var(--gruen-tief);
  color: #D9D2BC;
  margin-top: clamp(3rem, 7vw, 5rem);
  font-size: .95rem;
}
.noir .fuss { margin-top: 0; border-top: 1px solid rgba(216, 210, 196, .12); }
.fuss a { color: var(--gold); text-decoration-color: rgba(240, 180, 108, .4); }
.fuss a:hover { color: var(--creme); }
.fuss__gruss {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-style: italic;
  color: var(--gold);
  margin: 0 0 .4rem;
}
.fuss__innen {
  max-width: var(--breit);
  margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4rem) clamp(1.1rem, 4vw, 2rem) 2.2rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
}
.fuss h2 {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.fuss address { font-style: normal; line-height: 1.8; }
.fuss .zeiten td { border-bottom-color: rgba(240, 228, 204, .16); }
.fuss .zeiten td:first-child { color: #B8B198; }
.fuss__nav { list-style: none; margin: 0; padding: 0; }
.fuss__nav li { padding: .22rem 0; }
.fuss__nav a { text-decoration: none; }
.fuss__nav a:hover { text-decoration: underline; }
.fuss__zeile {
  border-top: 1px solid rgba(240, 228, 204, .16);
  padding: 1.2rem clamp(1.1rem, 4vw, 2rem) 1.4rem;
  text-align: center;
  font-size: .8rem;
  color: #A8A288;
}
.fuss__zeile a { color: #C9C2A8; margin: 0 .5rem; }
.fuss__zeile p { margin: .4rem 0 0; }

/* ---------- Responsiv ---------- */
@media (max-width: 1000px) {
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .mosaik { columns: 2; }
  .merkmale { grid-template-columns: repeat(2, 1fr); }
  .formularseite { grid-template-columns: 1fr; }
  .seitenkasten { position: static; }
  .fuss__innen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .raster--3 { grid-template-columns: 1fr; }
  .zitate { grid-template-columns: 1fr; }
  .duett, .duett--tausch { grid-template-columns: 1fr; }
  .duett--tausch > :first-child { order: 1; }
  .duett--tausch > :last-child { order: 2; }
  .zimmer { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; }
  .event__bild { min-height: 0; aspect-ratio: 8 / 5; }
  .event__bild img { position: static; height: 100%; }
  .noir-titel { margin-top: -3.5rem; }

  /* Navigation aufs Telefon */
  .navknopf { display: flex; }
  .hauptnav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem 0 1rem;
    border-top: 1px solid rgba(60, 72, 24, .16);
    margin-top: .6rem;
  }
  .noir .hauptnav { border-top-color: rgba(216, 210, 196, .18); }
  .navschalter:checked ~ .hauptnav { display: flex; }
  .hauptnav a:not(.btn) { padding: .85rem .2rem; border-bottom: 1px solid rgba(60, 72, 24, .1); }
  .noir .hauptnav a:not(.btn) { border-bottom-color: rgba(216, 210, 196, .1); }
  .hauptnav a[aria-current="page"] { border-bottom-color: var(--gold-linie); }
  .hauptnav .btn { margin-top: .9rem; }
}

@media (max-width: 620px) {
  .raster--2, .raster--4 { grid-template-columns: 1fr; }
  .mosaik { columns: 1; }
  .merkmale { grid-template-columns: 1fr; }
  .feldzeile, .feldzeile--drei { grid-template-columns: 1fr; }
  .fuss__innen { grid-template-columns: 1fr; }
  .kapitelkopf p { display: none; }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Veranstaltungskalender ---------- */
/* Nach Monaten gegliedert, mit Kalenderblatt und ungeschnittenem Plakat.
   Die Ankündigungsgrafiken sind fertig gestaltet — sie werden nie
   beschnitten und nie überdruckt, das Datum steht deshalb daneben. */

.monatsnav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.monatsnav a {
  display: inline-block;
  padding: .5rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gruen);
  background: var(--karte);
  border: 1px solid rgba(60, 72, 24, .22);
  border-radius: 999px;
}
.monatsnav a:hover, .monatsnav a:focus-visible { background: var(--gruen); color: var(--creme); border-color: var(--gruen); }

.hinweiskasten {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding: 1.1rem 1.3rem;
  background: var(--creme);
  border-left: 3px solid var(--gold-linie);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
}
.hinweiskasten p { margin: 0; }
.hinweiskasten strong { color: var(--gruen); }

.monatstitel {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 .4rem;
}
.monatstitel:first-of-type { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.monatstitel h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); white-space: nowrap; }
.monatstitel::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, var(--gold-linie), rgba(217, 164, 92, 0));
}

.termin {
  display: grid;
  grid-template-columns: 3.9rem minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-top: 1px solid rgba(60, 72, 24, .14);
}
.termin:first-of-type { border-top: 0; }

.termin__blatt {
  margin: 0;
  background: var(--gruen);
  color: var(--creme);
  border-radius: var(--radius);
  padding: .6rem .4rem .7rem;
  text-align: center;
}
.termin__blatt b { display: block; font: 400 1.6rem/1 var(--serif); color: var(--gold); }
.termin__blatt span {
  display: block; margin-top: .25rem;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
}

.termin__bild img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(60, 72, 24, .16);
  border-radius: var(--radius);
  background: var(--karte);
}
.termin--aus .termin__bild img { filter: grayscale(.5) contrast(.96); }

.termin__leib h3 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.termin__meta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: .8rem; }
.termin__meta:empty { display: none; }
.termin__zeit {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-text); background: rgba(240, 180, 108, .16);
  border-radius: 3px; padding: .3rem .6rem;
}
.termin__preis { font-family: var(--serif); font-size: 1.15rem; color: var(--gruen); }
.termin__leib > p { margin: 0 0 .9rem; }
.termin__leib > p:last-child { margin-bottom: 0; }
.termin__weiter { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .termin { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem 1.1rem; }
  .termin__bild { grid-column: 2; }
  .termin__leib { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .monatsnav a { padding: .45rem .8rem; font-size: .72rem; }
  .termin { grid-template-columns: 3.2rem minmax(0, 1fr); }
}


/* ===========================================================================
   2. Brücke: CMS-Ausgabe an den Entwurf angeschlossen
   ---------------------------------------------------------------------------
   Der Entwurf war eine Handvoll fester HTML-Seiten. Das CMS gibt dieselben
   Bereiche aus, nur mit eigenen Klassen und als Liste statt als Folge von
   Verweisen. Hier steht, was die beiden verbindet — und nur das.
   =========================================================================== */

/* Die Bahn hält die Zeilenlänge. Im Entwurf hatte jeder Abschnitt seinen
   eigenen Innenkasten; im CMS heißt er überall .bahn. */
.bahn { width: min(100% - 2 * var(--rand), var(--breit)); margin-inline: auto; }
.bahn--schmal { max-width: var(--schmal); }

/* Die Marke im Kopf: das CMS gibt Wappen UND Monogramm aus, damit die Vorlage
   auch ohne Logo trägt. Hier hat der Hof ein Wappen — das Monogramm entfällt.
   Die Namen der Unterelemente heissen im CMS anders als im Entwurf. */
.marke__logo { width: 56px; height: 56px; }
.marke__zeichen { display: none; }
.marke__name { font-family: var(--serif); font-size: 1.22rem; letter-spacing: .04em; color: var(--gruen); }
.marke__claim { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wiese-text); }
.marke__text { display: flex; flex-direction: column; line-height: 1.25; }

/* Sprung zum Inhalt: sichtbar nur, wenn er den Fokus hat. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gruen); color: var(--creme);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* Hauptnavigation: das CMS liefert <ul><li><a>, der Entwurf hatte nur <a>.
   Die Liste wird flach gelegt, die Verweise erben die Gestaltung des Entwurfs. */
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem); }
.hauptnav li { position: relative; }
.hauptnav li > ul {
  display: none; position: absolute; top: 100%; left: 0; min-width: 13rem;
  background: var(--karte); border: 1px solid var(--gold-linie); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: .4rem 0; flex-direction: column; gap: 0; z-index: 30;
}
.hauptnav li.hat-untermenue:hover > ul,
.hauptnav li.hat-untermenue:focus-within > ul { display: flex; }
.hauptnav li > ul a { display: block; padding: .5rem 1rem; }

/* „Reservieren" ist im Entwurf kein Menuepunkt, sondern ein Knopf. Angesprochen
   ueber das Ziel und nicht ueber die Position: Wer im CMS die Reihenfolge des
   Menues aendert, soll den Knopf nicht verlieren. 23.09.2026. */
.hauptnav a[href$="reservierung.html"] {
  background: var(--gruen);
  color: var(--creme);
  padding: .55rem 1.1rem;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--gruen);
}
.hauptnav a[href$="reservierung.html"]:hover,
.hauptnav a[href$="reservierung.html"]:focus-visible { background: var(--gruen-tief); border-color: var(--gruen-tief); color: var(--creme); }
.hauptnav a[href$="reservierung.html"]::after { display: none; }

/* Der Knopf für schmale Bildschirme ist im CMS eine Schaltfläche mit
   .ist-offen am Menü, im Entwurf war es ein Ankreuzfeld. */
.navknopf { display: none; background: none; border: 0; cursor: pointer; font: inherit; color: var(--gruen); align-items: center; gap: .5rem; padding: .5rem .2rem; }
.navknopf__balken, .navknopf__balken::before, .navknopf__balken::after {
  display: block; width: 22px; height: 2px; background: currentColor; content: ""; position: relative;
}
.navknopf__balken::before { top: -7px; }
.navknopf__balken::after  { top: 5px; }

@media (max-width: 860px) {
  .navknopf { display: inline-flex; }
  .hauptnav { display: none; }
  .hauptnav.ist-offen { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--karte); border-top: 1px solid var(--gold-linie); box-shadow: var(--schatten); padding: .8rem var(--rand) 1.2rem; }
  .hauptnav.ist-offen ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hauptnav.ist-offen li > a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--creme); }
  .hauptnav.ist-offen li > ul { display: flex; position: static; border: 0; box-shadow: none; background: none; padding-left: 1rem; }
  /* Ohne JavaScript bewegt der Menueknopf nichts. Dann steht die Navigation
     offen da - in derselben gestapelten Form wie im aufgeklappten Zustand -
     statt unerreichbar zu sein. Die Klasse nimmt ein Einzeiler im <head>
     weg, sobald JavaScript laeuft. 24.09.2026. */
  .ohne-js .navknopf { display: none; }
  .ohne-js .hauptnav { display: block; }
  .ohne-js .hauptnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .ohne-js .hauptnav li > a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--creme); }
  .ohne-js .hauptnav li > ul { display: flex; position: static; border: 0; box-shadow: none; background: none; padding-left: 1rem; }
  .kopf__innen { position: relative; }
}

/* Inhaltsbereich: Bahn, wahlweise mit Seitenmenü links. */
.ib-inhalt { padding-block: clamp(2rem, 5vw, 3.6rem); }
.ib-bahn { width: min(100% - 2 * var(--rand), var(--breit)); margin-inline: auto; }
.ib-bahn:has(.seitenmenue) { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.ib-spalte-inhalt { min-width: 0; }
@media (max-width: 860px) { .ib-bahn:has(.seitenmenue) { grid-template-columns: 1fr; } }

/* Fußraster: der Entwurf hatte drei feste Spalten, das CMS bis zu vier. */
.fuss__innen { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.fuss__innen h2 { font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin: 0 0 .7rem; }
.fuss__innen ul { list-style: none; margin: 0; padding: 0; }
.fuss__innen li { margin-bottom: .35rem; }
.fuss address { font-style: normal; }


/* Abschnitte des Entwurfs laufen ueber die volle Breite.
   Das CMS stellt den Inhalt in eine Bahn (.ib-spalte-inhalt); die Abschnitte
   des Entwurfs brauchen dagegen den ganzen Bildschirm, damit farbige Baender
   und der Held bis an den Rand reichen. Die Bahn bleibt fuer alles andere. */
.ib-spalte-inhalt > .held,
.ib-spalte-inhalt > .noir-held,
.ib-spalte-inhalt > .zahlen,
.ib-spalte-inhalt > .abschnitt,
.ib-spalte-inhalt > .noir-abschnitt,
.ib-spalte-inhalt > section[class*="abschnitt"] {
  width: 100vw; max-width: 100vw;
  margin-left: 50%; transform: translateX(-50%);
}
/* Die Bahn bleibt: Modulseiten (Zimmer, Veranstaltungen, Shop) brauchen sie,
   sonst laufen Text und Formulare ueber die volle Fensterbreite. Die Abschnitte
   des Entwurfs brechen mit der Regel darueber einzeln aus ihr aus.
   Erst hatte ich die Bahn fuer alle Seiten ohne Seitenmenue abgeschaltet - damit
   war die Zimmerseite plotzlich randlos. 23.09.2026. */
.ib-inhalt { overflow-x: clip; }
/* Seiten, deren Inhalt ganz aus Abschnitten besteht, brauchen oben keinen
   Abstand - der erste Abschnitt bringt seinen eigenen mit. */
.ib-inhalt:has(> .ib-bahn > .ib-spalte-inhalt > .abschnitt:first-child),
.ib-inhalt:has(> .ib-bahn > .ib-spalte-inhalt > .zahlen:first-child) { padding-block: 0; }



/* Die Module der Vorlage nennen ihre Schaltflaechen .knopf, der Entwurf nennt
   sie .btn. Statt jedes Modul umzuschreiben, erben die einen von den anderen.
   23.09.2026. */
.knopf {
  display: inline-block; font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--creme); background: var(--gruen); border: 1px solid var(--gruen);
  border-radius: var(--radius); padding: .95rem 1.7rem; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knopf:hover, .knopf:focus-visible { background: var(--gruen-tief); color: var(--gold); }
.knopf.klein { padding: .55rem 1.1rem; font-size: .74rem; }
.knopf.hell { background: transparent; color: var(--gruen); }
.knopf.hell:hover { background: var(--gruen); color: var(--creme); }


/* ===========================================================================
   Bildbetrachter ("Lupe")
   Dunkle Schicht ueber der Seite, Bild in der Mitte, Unterschrift und Zaehler
   darunter, Pfeile links und rechts. Farben aus der Nacht-Palette des
   Krimidinners, damit nichts Neues erfunden wird. 23.09.2026.
   =========================================================================== */
.lupe {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.4rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(18, 17, 20, .94);
}
.lupe[hidden] { display: none; }
body.lupe-offen { overflow: hidden; }

.lupe__rahmen { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: min(100%, 1400px); }
.lupe__bild {
  max-width: 100%; max-height: calc(100vh - 9rem);
  width: auto; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
  background: var(--nacht-karte);
}
.lupe__fuss {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .4rem 1.2rem; color: var(--rauch); font-size: .92rem; text-align: center;
}
.lupe__zaehler { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

.lupe__pfeil, .lupe__zu {
  flex: 0 0 auto;
  background: rgba(240, 228, 204, .1); color: var(--rauch);
  border: 1px solid rgba(240, 228, 204, .35); border-radius: 50%;
  width: 3rem; height: 3rem; font-size: 1.6rem; line-height: 1;
  cursor: pointer; transition: background .18s ease, color .18s ease;
}
.lupe__pfeil:hover, .lupe__zu:hover, .lupe__pfeil:focus-visible, .lupe__zu:focus-visible {
  background: var(--gold); color: var(--nacht); border-color: var(--gold);
}
.lupe__zu { position: absolute; top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); font-size: 1.8rem; }
.lupe__pfeil[hidden] { display: none; }

@media (max-width: 599px) {
  .lupe { padding: .8rem; }
  .lupe__pfeil { position: absolute; bottom: 1rem; width: 2.6rem; height: 2.6rem; }
  .lupe__pfeil--zurueck { left: 1.2rem; }
  .lupe__pfeil--vor { right: 1.2rem; }
  .lupe__bild { max-height: calc(100vh - 11rem); }
}

/* Die Vorschaubilder zeigen jetzt, dass sie sich vergroessern lassen. */
.zimmer-galerie__bild { cursor: zoom-in; }


/* ===========================================================================
   Servicebalken ueber dem Kopf (23.09.2026)
   Links, wie man herkommt und uns erreicht; rechts die Nebenwege. Dunkel
   abgesetzt wie im heutigen Auftritt, damit der Kopf darunter hell bleibt.
   =========================================================================== */
.servicebalken { background: var(--gruen-tief); color: var(--creme); font-size: .82rem; }
.servicebalken__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.4rem; padding: .45rem 0; }
.servicebalken p { margin: 0; }
.servicebalken__links { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.servicebalken__rechts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.servicebalken a { color: var(--creme); text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; }
.servicebalken a:hover, .servicebalken a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); }
@media (max-width: 559px) {
  .servicebalken { font-size: .76rem; }
  .servicebalken__innen { justify-content: center; text-align: center; }
}
/* Im dunklen Kleid (Krimidinner) faellt der Balken sonst nicht auf. */
body.noir .servicebalken { background: #000; }




/* Vorlage "Nacht": dieselbe Ordnung, dunkles Kleid. Die Farben kommen vom
   <body class="noir">, hier stehen nur die Stellen, die das Modul selbst malt. */
body.noir .veranstaltung-detail__titel,
body.noir .veranstaltung-detail h2,
body.noir .veranstaltung-detail h3 { color: var(--creme); }
body.noir .veranstaltung-detail__teaser,
body.noir .veranstaltung-detail__text { color: var(--rauch); }
body.noir .veranstaltung-leistungen li::before { color: var(--blut); }
body.noir .veranstaltung-detail__bild img { border-color: rgba(216, 210, 196, .25); background: var(--nacht-karte); }
body.noir .terminliste .termin { background: var(--nacht-karte); border-color: rgba(216, 210, 196, .25); border-left-color: var(--blut); }
body.noir .terminliste .termin__zeit time { color: var(--rauch); }
body.noir .veranstaltung-detail__text p { color: var(--rauch); }



/* ===========================================================================
   3. Modulausgaben — mit den Farben des Hofes versorgt
   ---------------------------------------------------------------------------
   Die folgenden Regeln stammen aus der Vorlage und gestalten, was die Module
   ausgeben. Sie sprechen die Farben über die Namen der Vorlage an; hier werden
   diese Namen auf die Palette des Entwurfs gelegt. So bleibt der Baustein
   unverändert und trägt trotzdem die Handschrift des Hauses.
   =========================================================================== */
:root {
  --ton:          var(--gruen);
  --ton-dunkel:   var(--gruen-tief);
  --ton-hell:     var(--creme);
  --ton-kontrast: var(--gruen);
  --grund:        var(--creme);
  --flaeche:      var(--karte);
  --linie:        var(--gold-linie);
  --linie-stark:  var(--wiese);
  --text:         var(--tinte);
  --text-leise:   var(--tinte-leise);
  --signal:       var(--gold-text);
  --rand:         clamp(1.1rem, 4vw, 2rem);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ===========================================================================
   Ab hier: Gestaltung der Modulausgaben - Autorenprofile, Bewertungen,
   Sitemap, Sprachumschalter, verwandte Themen, Seitenleisten.
   Frueher eine eigene global.css; eine Datei pro Auftritt.
   =========================================================================== */



.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#box {
   transform-origin: 150px 50px;
   margin-left:20px;
   margin-top:30px;
   position: fixed;
   top:30px; 
   right:5px;
   z-index:5000000;
    cursor: pointer;
}

@media (max-width: 1200px) {
	.box-wrapper {
		display:none;
	}
}


@keyframes winken {
    0%   { transform: rotate(0deg); }
    16%  { transform: rotate(10deg); }
    33%  { transform: rotate(0deg); }
    50%  { transform: rotate(10deg); }
    66%  { transform: rotate(0deg); }
    83%  { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

#box.winken {
    animation: winken 0.6s linear;
}


:root {
/* Autoren- & AEO-Elemente */
/* Fund 2026-08-30: fester, kräftiger Rotton als sitewide Fallback - auf jedem Design
   ohne eigene --farbe-autorenbox-*-Definition (die meisten der 41 main{N}.css) schlug
   dieser Rotton unabhängig vom jeweiligen Designthema durch und wirkte "knallig"/
   deplatziert. Neutraler Übergangs-Fallback bis jedes main{N}.css seine eigene, aus der
   Designfarbe abgeleitete Definition bekommt (wie main1/2/3 es bereits vormachen). */
--farbe-autorenbox-hintergrund: #f5f4f1;
--farbe-autorenbox-linie:        #ddd7cf;
--farbe-autorenbox-akzent:       #706a5f;
--farbe-autorenbox-icon:         #706a5f;
--farbe-autorenbox-icon-text:    #ffffff;
--farbe-autorenbox-text:         #4a453e;
--farbe-autorenbox-text-stark:   #2a2621;

--farbe-aeo-hintergrund:         #fff7f7;
--farbe-aeo-linie:               #a93d4a;
--farbe-aeo-text:                #47262b;


  



  /* Farben */
  --color-primary:       #e10816;
  --color-primary-dark:  #b8060f;
  --color-primary-light: #efefef;
  --color-secondary:     #ff6b6b;
  --color-success:       #22c55e;
  --color-warning:       #f59e0b;
  --color-text:          #0f172a;
  --color-text-muted:    #475569;
  --color-border:        #e2e8f0;
  --color-bg:            #f6f7fb;
  --color-white:         #ffffff;
  --color-card:          #ffffff;
  --color-sidebar-bg:    #f8f9fc;
 

  --font-size-xs:  0.75rem;   /* 12px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-md:  1rem;      /* 16px */
  --font-size-lg:  1.125rem;  /* 18px */
  --font-size-xl:  1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  /* Abstände */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Rahmen */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

  /* Navigation */
  --nav-height: 96px;

  /* Übergänge */
  --transition: 0.2s ease;
  
}



.welcome-video__media {
  position: relative;
}

.welcome-video__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
 
  
box-shadow: 0 8px 24px rgba(120, 120, 120, 0.52);
  
  border: 2px solid #ababab;
  background: #000;
}

.welcome-video__frame video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
}

.welcome-video__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}




.autoren-box {
  background: var(--farbe-autorenbox-hintergrund);
  border: 1px solid var(--farbe-autorenbox-linie);
  border-left: 4px solid var(--farbe-autorenbox-akzent);
  border-radius: 0 12px 12px 0;
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.autoren-box-ueberschrift {
	font-weight:bold;
	margin-bottom:10px;
	font-size:19px;
}

.autoren-box-icon {
  width: 44px;
  height: 44px;
  background: var(--farbe-autorenbox-icon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-autorenbox-icon-text);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.autoren-box-text {
  font-size: 0.88rem;
  color: var(--farbe-autorenbox-text);
  line-height:170%;
}

.autoren-box-text strong {
  color: var(--farbe-autorenbox-text-stark);
}

/* Fund 2026-08-26 (digitalisierung.html, mehrere Designs): in den <li> der
   "Wichtigste auf einen Blick"-Liste erschien sowohl der Browser-Standard-Punkt als auch
   der eigentlich gewollte Marker (Haekchen/Pfeil aus dem jeweiligen main{N}.css). Ursache: das
   <ul> hier ist bewusst klassenlos, viele Designs haben aber eine generische
   "main ul:not([class]) { list-style: disc !important; ... }"-Regel fuer redaktionelle
   CMS-Freitext-Listen, die dadurch auch hier greift. Direkt auf dem <li> (nicht dem <ul>)
   gesetzt, damit es JEDE geerbte list-style-Regel aus main{N}.css schlaegt, unabhaengig von
   deren Spezifitaet/!important - eine explizit auf das Element selbst gesetzte Eigenschaft
   gewinnt immer gegen einen geerbten Wert. */
.autoren-box-text ul li {
  list-style: none;
}


.aeo-abstract {
  background: var(--farbe-aeo-hintergrund);
  border-left: 4px solid var(--farbe-aeo-linie);
  padding: 1.4rem 1.8rem;
  border-radius: 0 12px 12px 0;
  margin-bottom: 2rem;
}

.aeo-abstract p {
  font-size: 1.05rem;
  color: var(--farbe-aeo-text);
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
}




.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}


.autor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {


  .autor-grid {
    grid-template-columns: 1fr;
  }
}



/* ------------------------------------------------------------
   8. Grid-Systeme
   ------------------------------------------------------------ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
  gap: var(--space-6);
}


/* ------------------------------------------------------------
   9. Sidebar-Layout
   ------------------------------------------------------------ */
.layout-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  align-items: start;
}

.layout-sidebar > * {
  min-width: 0;
}

.layout-sidebar--right {
  grid-template-columns: 1fr 280px;
}

.sidebar {
  background: var(--color-sidebar-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

.sidebar__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

.sidebar__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.sidebar__nav a:hover,
.sidebar__nav a.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  text-decoration: none;
}

.sidebar__nav a .fa {
  width: 16px;
  color: var(--color-primary);
}

.sidebar__section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Scrollbare Sidebar-Liste: scrollt ab mehr als ~5 Einträgen */
.sidebar__nav--scroll ul {
  max-height: 230px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f1e8e9;
}

.sidebar__nav--scroll ul::-webkit-scrollbar {
  width: 6px;
}

.sidebar__nav--scroll ul::-webkit-scrollbar-track {
  background: #f1e8e9;
  border-radius: 3px;
}

.sidebar__nav--scroll ul::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 3px;
}


/* ------------------------------------------------------------
   Autoren-Profil
   ------------------------------------------------------------ */
.autor-profile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-10);
  align-items: start;
}

.autor-profile__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.autor-profile__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-lg);
}

.autor-profile__initials {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
}

.autor-profile__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.autor-social-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition);
}

.autor-social-link:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

.autor-profile__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.autor-profile__name {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-2);
}

.autor-profile__role {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  font-weight: 500;
}

.autor-profile__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.autor-profile__list {
  list-style: disc;
  padding-left: var(--space-5);

  line-height: 1.8;
  color: var(--color-text);
}

/* Fund 2026-08-26: Qualifikationen/Themengebiete/Veroeffentlichungen standen bisher als
   nackter Text direkt auf dem Section-Hintergrund, waehrend der "Ueber..."-Block darueber
   als klar abgesetzte Karte (.summary-box) gestaltet ist - wirkte inkonsistent ("oben ja,
   unten nein"). .autor-block gibt den unteren Abschnitten dieselbe Karten-Optik, bewusst
   dezenter als .summary-box (kein Farbverlauf/kein linker Farbbalken), damit die Seite nicht
   dreimal denselben betonten Blockstil wiederholt. */
.autor-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}



/* ------------------------------------------------------------
   11. Summary-Box (AEO: Direct-to-Answer)
   ------------------------------------------------------------ */
.summary-box {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #ffffff 100%);
  border: 1px solid rgba(225,8,22,0.2);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-8);
}

.summary-box__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.summary-box__icon {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.summary-box__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.summary-box__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.summary-box__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  
  color: var(--color-text);
  line-height: 1.5;
}

.summary-box__list li::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  margin-top: 3px;
  flex-shrink: 0;
}


/* Artikel-Teaser-Karte */
.article-teaser-card {
  display: block;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition);
  margin-bottom: 20px;
}

.article-teaser-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.article-teaser-card__tag {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-teaser-card__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}


.sitemap ul {
    list-style: disc !important;
    margin: 0 0 0 1.5rem !important;
    padding: 0 !important;
}

.sitemap li {
    margin: 0.35rem 0 !important;
    padding: 0 !important;
}

.sitemap ul ul {
    margin-top: 0.4rem !important;
    margin-left: 1.5rem !important;
    list-style: circle !important;
}

.sitemap ul ul ul {
    list-style: square !important;
}

.sitemap a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.sitemap a:hover {
    color: var(--farbe-gold) !important;
    padding-left: 4px;
}







/* Kein Google-Fonts-Import (24.09.2026): Die Emoji-Schrift kam von einem fremden
   Server und haette bei jedem Aufruf die Adresse des Besuchers dorthin gemeldet.
   Die Flaggen sind ohnehin lokale SVG unter grafik/flags/ - die Schriftart war
   nur noch der Rueckfall fuer Emoji-Flaggen, den jedes System selbst mitbringt. */

/* Und diese Schriftart exakt für deine Flaggen definieren */
.aktuelle-flagge, .sprache-liste a {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Verpasst den Bildern eine feste, saubere Größe */
.sprache-label img,
.sprache-liste img {
  width: 15px;
  height: auto;
  border-radius: 2px; /* Leicht abgerundete Ecken für die Flagge */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Minimaler Schatten, damit weiße Flaggen (wie Japan) Ränder haben */
  display: block;
}


.sprungbrett-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Richtet Icon und Flagge vertikal untereinander aus */
.sprache-label {
  background-color: #34495e;
  color: #ffffff;
  padding: 8px 0; /* Oben und unten etwas Platz */
  width: 34px;    /* Schmale, feste Breite */
  min-height: 45px; /* Genug Höhe für beide Elemente untereinander */
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column; /* Hier passiert die Magie: untereinander statt nebeneinander */
  align-items: center;
  justify-content: center;
  gap: 4px; /* Abstand zwischen Icon (oben) und Flagge (unten) */
  box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
  list-style: none; /* entfernt den nativen <summary>-Aufklapp-Pfeil */
}

.sprache-label::-webkit-details-marker,
.sprache-label::marker {
  display: none;
}

.sprache-label:hover {
  background-color: #2c3e50;
}

/* Das FontAwesome Icon (oben) */
.sprache-label i {
  font-size: 14px;
  line-height: 1;
}

/* Die Flagge (unten) */
.sprache-label .aktuelle-flagge {
  font-size: 16px;
  line-height: 1;
}



/* Die ausklappbare Liste */
.sprache-liste {
  list-style: none;
  padding: 6px;
  margin: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px 0 0 4px;
  box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -100px;
  visibility: hidden;
  transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.3s;
}

.sprache-details[open] > .sprache-liste {
  right: 100%;
  visibility: visible;
  transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0s;
}

.sprache-liste a {
  text-decoration: none;
  font-size: 18px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.15s;
}

.sprache-liste a:hover {
  background-color: #f5f6fa;
}

.sprache-liste a.aktiv {
  background-color: #ebf5fb;
  border: 1px solid #3498db;
  box-sizing: border-box;
}




/* Footermenü: zentriert, Links nebeneinander mit Zeilenumbruch (nur Layout, keine Farben) */
.footernav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 0.4em;
}

.footernav li {
  display: flex;
  align-items: center;
}

.footernav li:not(:last-child)::after {
  content: "\2022";
  margin: 0 0.6em;
}

.footernav a {
  white-space: nowrap;
}

.footer-nav {
	padding-top:20px;
	padding-bottom:20px;
}

/* Leeres Footermenue komplett ausblenden (Nutzerwunsch 2026-08-31, global
   fuer alle 41 Designs).
   Ausgangslage: {footer_menue} wird in show_inc/global_geruest_inc.php nur
   befuellt, wenn Seiten mit parentID='-3' und freischaltung='ja' existieren.
   Ist die Liste leer, blieb aber der WRAPPER im jeweiligen
   tpl/include_footer*.tpl.htm stehen - und der bringt je nach Design eine
   eigene Trennlinie (border-top) plus Padding mit. Ergebnis: eine sichtbar
   leere Leiste unter dem Copyright-Balken (Live-Fund
   varianten.dentalspezialisten.de, Design 25).
   Loesung bewusst per CSS in global.css statt in den 11 Footer-Templates:
   die Wrapper heissen je Design unterschiedlich (.footer-bottom +
   .footer-bottom-inner / .footer-menue / .fN-fussnav) und tragen teils
   Inline-Styles - eine zentrale Regel ist wartbarer als 11 Template-Edits.
   Kriterium ist "hat keine Element-Kinder" (:not(:has(*))) und NICHT :empty,
   weil im Wrapper immer noch Whitespace/Zeilenumbrueche aus dem Template
   stehen - :empty wuerde daher nie greifen.
   Der Copyright-Balken nutzt in mehreren Designs dieselbe .footer-bottom-
   Klasse (Design 9/17/18/19/26/zzam + Standard-Footer), enthaelt aber immer
   <span>/<a> und wird deshalb nicht getroffen. Das befuellte Footermenue
   enthaelt <nav>/<ul>/<a> und bleibt ebenfalls sichtbar.
   Wichtig: NICHT ".footer-bottom:has(> .footer-bottom-inner:not(:has(*)))"
   schreiben - :has() darf laut Spec nicht in :has() verschachtelt werden,
   der Selektor ist dann komplett ungueltig (im Browser verifiziert). */
.footer-menue:not(:has(*)),
.f2-fussnav:not(:has(*)),
.f7-fussnav:not(:has(*)),
.f23-fussnav:not(:has(*)),
.footer-bottom:not(:has(a)):not(:has(span)):not(:has(nav)):not(:has(ul)) {
  display: none;
}

/* ==========================================================================
   VERWANDTE THEMEN (AEO-Feature 2026-08-29, H8) - bewusst hier statt in
   main{N}.css: soll ohne design-eigene Anpassung auf jedem der 41 Designs
   sofort nutzbar sein, sobald admin-seitig verwandteIDs gepflegt wird. Nutzt
   die designeigenen --farbe-*-Variablen mit neutralen Fallbacks, damit es
   sich in jedes Farbschema einfuegt, aber nie unstyled bleibt.
   ========================================================================== */
.verwandte-themen-section {
  padding: 4rem 0;
}
.verwandte-themen-section .section-header {
  /* Kein text-align:center mehr erzwungen - jedes Design bringt ueber seine
     eigene main{N}.css bereits eine .section-header-Konvention mit (zentriert
     oder linksbuendig); das hier hat sie bislang immer uebersteuert. */
  margin-bottom: 2.5rem;
}
.verwandte-themen-section .section-header h2 {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin: 0;
}
.verwandte-themen-grid {
  /* Kein eigenes max-width/margin/padding mehr - das Markup steckt bereits in
     einem .container (siehe include_cms_inc.php), das uebernimmt Breite und
     Innenabstand schon. Die alte Fassung hat dadurch ein zweites Mal
     eingerueckt (doppeltes Padding). */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.verwandte-themen-karte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--farbe-rahmen-gold, var(--farbe-primaer, #ccc));
  border-radius: var(--radius-m, var(--radius-s, 8px));
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.verwandte-themen-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.verwandte-themen-titel {
  font-weight: 600;
}
.verwandte-themen-karte i {
  flex-shrink: 0;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .verwandte-themen-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Bewertungen-Feature (2026-08-30, I4 aus aeo_analyse2.txt)
   Nutzt generische --farbe-accent/--farbe-text/--farbe-bg-light/--farbe-border-
   Variablen mit Fallback-Werten (var(...,fallback)), damit die Komponente ohne
   Aenderung an allen 41 main{N}.css-Dateien ueberall vernuenftig aussieht.
   ========================================================================== */

.bewertungen-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--farbe-bg-light, #f7f7f9);
  border: 1px solid var(--farbe-border, #e5e5ea);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2.5rem;
}

.bewertungen-summary-zahl {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--farbe-accent, #0ea5e9);
  flex-shrink: 0;
}

.bewertungen-summary-details p {
  margin: 0.4rem 0 0.8rem;
  color: var(--farbe-muted, #666);
  font-size: 0.95rem;
}

.bewertung-sterne {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--farbe-accent, #f5a623);
  font-size: 1.1rem;
}

.bewertungen-summary-zahl + .bewertungen-summary-details .bewertung-sterne {
  font-size: 1.3rem;
}

.bewertungen-google-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bewertungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.bewertung-karte {
  background: var(--farbe-bg-light, #fff);
  border: 1px solid var(--farbe-border, #e5e5ea);
  border-radius: 14px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.bewertung-kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.bewertung-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.bewertung-avatar-initiale {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--farbe-accent, #0ea5e9);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

.bewertung-kopf-text {
  min-width: 0;
}

.bewertung-name {
  font-weight: 600;
  color: var(--farbe-text, #222);
}

.bewertung-text {
  color: var(--farbe-text, #333);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.bewertung-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.8rem;
  color: var(--farbe-muted, #888);
  margin-top: auto;
}

.bewertung-quelle {
  text-decoration: none;
  color: var(--farbe-muted, #888);
  border: 1px solid var(--farbe-border, #e5e5ea);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}
a.bewertung-quelle:hover {
  color: var(--farbe-accent, #0ea5e9);
}

.bewertung-antwort {
  background: var(--farbe-bg, #f2f2f5);
  border-left: 3px solid var(--farbe-accent, #0ea5e9);
  border-radius: 0 10px 10px 0;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
}
.bewertung-antwort strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--farbe-text, #222);
}
.bewertung-antwort p {
  margin: 0;
  color: var(--farbe-muted, #555);
}

@media (max-width: 600px) {
  .bewertungen-summary {
    flex-direction: column;
    text-align: center;
  }
  .bewertungen-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Bewertungen-Karussell (2026-08-30) - Startseiten-Block, immer neutraler
   Hintergrund (.textblock-section), daher keine Kollision mit den
   Farbrhythmus-Regeln fuer knallige Bloecke.
   ========================================================================== */

.bewertungen-karussell {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.bewertungen-karussell-track {
  position: relative;
  min-height: 220px;
}

.bewertungen-karussell-slide {
  display: none;
  text-align: center;
  padding: 0 1rem;
}

.bewertungen-karussell-slide.karussell-slide-aktiv {
  display: block;
  animation: bewertungenKarussellFade 0.5s ease;
}

@keyframes bewertungenKarussellFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bewertungen-karussell-quote {
  font-size: 1.8rem;
  color: var(--farbe-accent, #0ea5e9);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.5rem;
}

.bewertungen-karussell .bewertung-sterne {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--farbe-accent, #f5a623);
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}

.bewertungen-karussell-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--farbe-text, #333);
  margin: 0 0 1rem;
}

.bewertungen-karussell-name {
  font-weight: 600;
  color: var(--farbe-muted, #666);
  margin: 0;
}

.bewertungen-karussell-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.bewertungen-karussell-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--farbe-border, #ddd);
  cursor: pointer;
  padding: 0;
}

.bewertungen-karussell-dot.aktiv {
  background: var(--farbe-accent, #0ea5e9);
}

@media (max-width: 600px) {
  .bewertungen-karussell-track {
    min-height: 260px;
  }
}

/* ===========================================================================
   Farbbruecke
   ---------------------------------------------------------------------------
   Die Modulgestaltung oben stammt aus der fruehreren global.css und erwartet
   zwei Namensschemata (--color-* und --farbe-*), die frueher jede der 41
   main{N}.css-Dateien einzeln belegte. Hier werden sie ein einziges Mal an
   die Hausfarbe gebunden. Pro Projekt aendert man nur den Block ganz oben
   unter :root — diese Bruecke zieht dann alles mit.
   =========================================================================== */
:root {
  --color-primary:       var(--ton);
  --color-primary-dark:  var(--ton-dunkel);
  --color-primary-light: var(--ton-hell);
  --color-secondary:     var(--ton-kontrast);
  --color-text:          var(--text);
  --color-text-muted:    var(--text-leise);
  --color-border:        var(--linie);
  --color-white:         var(--papier);
  --color-bg:            var(--grund);
  --color-card:          var(--flaeche);
  --color-sidebar-bg:    var(--grund);

  --farbe-primaer:       var(--ton);
  --farbe-accent:        var(--ton-dunkel);
  --farbe-text:          var(--text);
  --farbe-muted:         var(--text-leise);
  --farbe-border:        var(--linie);
  --farbe-bg:            var(--papier);
  --farbe-bg-light:      var(--grund);

  /* Die Vorlage arbeitet ohne Gold. Beide Namen zeigen auf die Hausfarbe,
     damit Regeln, die sie noch verwenden, nicht ins Leere laufen. */
  --farbe-gold:          var(--ton);
  --farbe-rahmen-gold:   var(--linie-stark);

  /* Zwei Schreibvarianten aus dem Altbestand - sonst faellt der Radius aus. */
  --radius-s:            var(--radius-sm);
  --radius-m:            var(--radius-md);
}

/* ===========================================================================
   Modul "Veranstaltungen"
   =========================================================================== */
.veranstaltung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }

.veranstaltung-karte {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden;
}
/* Ohne Bild eine Spalte. Das Bildelement wird gar nicht erst ausgegeben, wenn
   kein Bild da ist - eine Regel auf [style*="none"] liefe deshalb ins Leere,
   und die 220px-Spalte bliebe leer stehen. Ergebnis war ein Textblock von
   knapp zwei Zentimetern Breite, in dem "Gewoelbekeller" buchstabenweise
   umbrach. Sichtbar nur im Bild, nicht im Quelltext. Gefunden am 16.09.2026.
   Zwei Regeln statt einer, weil :has() nicht ueberall gleich unterstuetzt ist
   - die erste greift immer, die zweite stellt bei Karten MIT Bild wieder her. */
.veranstaltung-karte { grid-template-columns: 1fr; }
.veranstaltung-karte:has(.veranstaltung-karte__bildbereich) {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}
.veranstaltung-karte__bildbereich { background: var(--grund); }
/* 3:2 quer, ausdruecklich. Bis zum 25.09.2026 kam diese Form aus einem fest
   ins Markup geschriebenen width="1536" height="1024" - also aus einem Attribut,
   das bei jeder echten Datei falsch war. Wer die Attribute geradezog, haette
   ohne diese Zeile die Kachelform verloren: Jedes Bild braechte seine eigene
   Hoehe mit, und die Liste wuerde unruhig. Das Verhaeltnis steht auch in der
   Maske (Zuschneider, Knopf "3:2 - wie die Kachel"); wer es hier aendert,
   aendert es dort mit. */
.veranstaltung-karte__bild { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.veranstaltung-karte__text { padding: clamp(1.1rem, 2.4vw, 1.6rem); }

.veranstaltung-karte__datum {
  display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline;
  font: 600 .82rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ton); margin: 0 0 .4rem;
}
.veranstaltung-karte__zeit { color: var(--text-leise); letter-spacing: .04em; }
.veranstaltung-karte__titel { margin: 0 0 .3rem; font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); }
.veranstaltung-karte__titel a { color: inherit; text-decoration: none; }
.veranstaltung-karte__titel a:hover { color: var(--ton); text-decoration: underline; }
.veranstaltung-karte__ort { margin: 0 0 .7rem; color: var(--text-leise); font-size: .93rem; }
.veranstaltung-karte__teaser > :last-child { margin-bottom: 0; }
.veranstaltung-karte__mehr { margin: .9rem 0 0; font-weight: 600; }
.veranstaltung-karte__pdf { margin: .7rem 0 0; font-size: .93rem; }

.veranstaltung-umschalter { margin-top: 1.6rem; }

.veranstaltung-detail__datum {
  font: 600 .84rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ton); margin: 0 0 .5rem;
  display: flex; flex-wrap: wrap; gap: .2rem .8rem;
}
.veranstaltung-detail__zeit { color: var(--text-leise); letter-spacing: .04em; }
.veranstaltung-detail__ort { color: var(--text-leise); margin: 0 0 1.4rem; }
.veranstaltung-bild { margin: 0 0 1.6rem; }
.veranstaltung-bild img { width: 100%; border-radius: var(--radius); }
.veranstaltung-detail__teaser { font-size: 1.08rem; color: var(--text-leise); margin-bottom: 1.4rem; }
.veranstaltung-detail__zurueck { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.veranstaltung-pdf { display: inline-flex; align-items: center; gap: .6rem; }
.veranstaltung-video { margin: 1.6rem 0; }
.veranstaltung-video iframe, .veranstaltung-video video { width: 100%; aspect-ratio: 16 / 9; height: auto; }

.meldung {
  background: var(--grund); border: 1px solid var(--linie); border-left: 3px solid var(--ton);
  border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--text-leise);
}

@media (max-width: 700px) {
  .veranstaltung-karte { grid-template-columns: 1fr; }
  .veranstaltung-karte__bild { height: 200px; }
}

/* ===========================================================================
   Gestaltung der Bausteine, die CMS-Templates und Module ausgeben
   ---------------------------------------------------------------------------
   Diese Klassennamen kommen aus den Templates in tpl/ und den Modulen in
   show_inc/. Sie sind Teil des Systems, nicht des Designs - deshalb stehen
   sie hier und nicht in einer eigenen Datei.
   =========================================================================== */

/* --- Bahnen und Abschnitte ---------------------------------------------- */
.container,
.ib-bahn { width: min(100% - 2 * var(--rand), var(--breit)); margin-inline: auto; }

.ib-abschnitt,
.ib-vorlagenband,
.section,
.faq-section,
.team-section,
.textblock-section,
.gruppen-section,
.verwandte-themen-section { padding: clamp(2.4rem, 5.5vw, 4rem) 0; }

.ib-abschnitt.ton-hell,
.section--tinted,
.grund-papier { background: var(--grund); }

.ib-abschnitt.ton-warm { background: var(--ton-hell); }

.ib-abschnitt-raster { display: grid; gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: start; }
.ib-abschnitt.hat-bild .ib-abschnitt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ib-abschnitt.bild-links .ib-abschnitt-text { order: 2; }
.ib-abschnitt-bild img { width: 100%; border-radius: var(--radius); }
.ib-abschnitt-text > :last-child { margin-bottom: 0; }

.ib-inhalt, .ib-block { margin-bottom: 1.4rem; }
.ib-spalte-inhalt > :last-child { margin-bottom: 0; }

/* --- Abschnittskoepfe ---------------------------------------------------- */
.section-header { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); max-width: 68ch; }
.section-header > :last-child { margin-bottom: 0; }

.section-label,
.ib-augenmarke,
.textblock-linie + .ib-augenmarke {
  display: block; margin: 0 0 .7rem;
  font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ton);
}

.section-linie,
.textblock-linie { width: 56px; height: 3px; background: var(--ton); border-radius: 2px; margin: 1rem 0 0; }

.textblock-inhalt > :last-child { margin-bottom: 0; }
.textblock-einspaltig { max-width: var(--schmal); }

/* --- Hilfsklassen -------------------------------------------------------- */
.clear { clear: both; }
.mobile-only { display: none; }
@media (max-width: 860px) { .mobile-only { display: block; } }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: .5rem; top: .5rem; z-index: 999; background: var(--ton); color: #fff; padding: .8rem 1.2rem; }
.grid-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; }
.gruppen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }

/* Font-Awesome-Klassen: Die Vorlage bindet keine Icon-Schrift ein (eine CSS-
   Datei pro Auftritt). Die Module setzen ihre Icons rein schmueckend neben
   sprechenden Text, deshalb bleibt hier nur ein kleiner Abstand stehen. Wer
   Icons will, ergaenzt sie projektweise als SVG. */
.fa, .fa-solid { display: inline-block; }
.fa:not(:only-child) { margin-right: .4em; }

/* --- Schaltflaechen ------------------------------------------------------ */
/* .btn gehoert dem Entwurf (Abschnitt 1) - hier nur die uebrigen Namen der
   Vorlage, sonst ueberschreibt der Modulteil die Schaltflaechen des Hauses.
   23.09.2026. */
.button, .button-primary, .button-primary-filled, .ib-knopf, .ib-weiter {
  display: inline-block; padding: .75rem 1.4rem; border-radius: var(--radius);
  background: var(--ton); color: #fff; text-decoration: none; cursor: pointer;
  font: 600 .96rem/1.2 var(--sans); border: 1px solid var(--ton);
}
.btn:hover, .button:hover, .button-primary:hover, .button-primary-filled:hover,
.ib-knopf:hover, .ib-weiter:hover { background: var(--ton-dunkel); border-color: var(--ton-dunkel); color: #fff; }

.btn--outline, .btn-linie {
  background: transparent; color: var(--ton-dunkel); border-color: var(--linie-stark);
}
.btn--outline:hover, .btn-linie:hover { background: var(--ton-hell); color: var(--ton-dunkel); border-color: var(--ton); }

.btn--sm, .btn-klein, .ib-knopf-schmal { padding: .5rem 1rem; font-size: .88rem; }
.button-lg { padding: .95rem 1.8rem; font-size: 1.05rem; }
.btn-zeile { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 0; }
.button-icon, .button-icon-left { display: inline-flex; align-items: center; gap: .5rem; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-rubrik, .faqrubrik_ausgabe { margin: 2rem 0 1rem; font-size: 1.25rem; }
.faq-rubrik:first-child, .faqrubrik_ausgabe:first-child { margin-top: 0; }

.faq-item { border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: .6rem; background: var(--flaeche); }

.faq-frage {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 1rem 3rem 1rem 1.2rem;
  font: 600 1.02rem/1.45 var(--sans); color: var(--ton-kontrast); position: relative;
}
.faq-frage::after {
  content: ""; position: absolute; right: 1.2rem; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ton); border-bottom: 2px solid var(--ton);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq-frage[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
.faq-frage:hover { color: var(--ton); }

.faq-antwort { display: none; padding: 0 1.2rem; }
.faq-frage[aria-expanded="true"] + .faq-antwort { display: block; }

/* --- Galerie ------------------------------------------------------------- */
.galerie-grid, .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.galerie-item { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--grund); }
.galerie-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.galerie-item:hover .galerie-bild { transform: scale(1.04); }
.galerie-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,57,60,.35), transparent 55%); opacity: 0; transition: opacity .25s; }
.galerie-item:hover .galerie-overlay, .galerie-item:focus-visible .galerie-overlay { opacity: 1; }

/* --- Team ---------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.team-foto-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.team-bild { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.team-info { padding: 1.1rem 1.2rem 1.3rem; }
.team-name { margin: 0 0 .2rem; font-size: 1.08rem; }
.team-titel { margin: 0 0 .6rem; color: var(--ton); font-size: .9rem; font-weight: 600; }
.team-vita { font-size: .94rem; color: var(--text-leise); }
.team-vita > :last-child { margin-bottom: 0; }

/* --- Nachrichten --------------------------------------------------------- */
.ib-newsliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.3rem; }
.ib-newskarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.ib-newsbild, .ib-newsbildchen { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ib-newsinhalt { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.ib-newsdatum { font: 600 .8rem/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ton); margin: 0 0 .4rem; }
.ib-newstitel { margin: 0 0 .5rem; font-size: 1.1rem; }
.ib-newstitel a { color: inherit; text-decoration: none; }
.ib-newstitel a:hover { color: var(--ton); text-decoration: underline; }
.ib-newsteaser, .ib-newstext { font-size: .95rem; color: var(--text-leise); }
.ib-newsartikel { max-width: 72ch; }
.ib-newspdf { margin-top: auto; padding-top: .8rem; font-size: .9rem; }

/* --- Erfahrungsberichte -------------------------------------------------- */
.ib-berichtliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.ib-berichtkarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.3rem; }
.ib-berichtbild { width: 100%; border-radius: var(--radius); margin-bottom: .9rem; }
.ib-berichtdatum { font-size: .82rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .07em; }
.ib-berichttext > :last-child { margin-bottom: 0; }

/* --- Inhaltsboxen -------------------------------------------------------- */
.ib-boxliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; }
.ib-box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.ib-box-innen { padding: clamp(1.2rem, 2.5vw, 1.7rem); }
.ib-boxbeschreibung, .ib-boxtext { color: var(--text-leise); font-size: .96rem; }
.ib-boxtext > :last-child { margin-bottom: 0; }

/* --- Downloads ----------------------------------------------------------- */
.ib-downloadliste { display: grid; gap: .7rem; }
.ib-download {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--ton);
  border-radius: var(--radius); padding: .9rem 1.1rem;
}
.ib-download-titel { font-weight: 600; }
.ib-download-art { font-size: .82rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .06em; }
.ib-download-text { flex-basis: 100%; font-size: .93rem; color: var(--text-leise); }

/* --- Kontaktangaben ------------------------------------------------------ */
.ib-kontakt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.ib-kontaktliste { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.ib-kontakt { background: var(--grund); border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 1.7rem); }
.kontakt-info-text > :last-child { margin-bottom: 0; }

/* --- Formulare ----------------------------------------------------------- */
.ib-formular, .kontakt-form { max-width: var(--schmal); }
.ib-feldgruppe { display: grid; gap: 0 1.2rem; }
.ib-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }
.ib-feld { margin-bottom: 1.1rem; }
.ib-feld label, .ib-bez { display: block; font-weight: 600; margin-bottom: .35rem; }
.ib-klein { font-size: .86rem; color: var(--text-leise); }
.ib-pflicht { color: var(--signal); }
.ib-zustimmung { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.1rem; }
.ib-zustimmung input { margin-top: .35rem; flex: none; }
.ib-kaestchen { display: flex; gap: .6rem; align-items: flex-start; }
.ib-leer { display: none; }   /* Honigtopf gegen Formularroboter */

.input_normal, .input_normal_ta {
  width: 100%; padding: .65rem .8rem; font: inherit; color: var(--text);
  background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.input_normal_ta { min-height: 9rem; resize: vertical; }
.eingabe_left, .eingabe_right { margin-bottom: 1.1rem; }

.ib-meldung, .form-meldung, .status, .alert {
  border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.2rem;
  border: 1px solid var(--linie); background: var(--grund);
}
.ib-meldung-gut, .alert-success { border-color: #2f6b45; background: #eef6f1; color: #1d4a2e; }
.ib-meldung-schlecht, .alert-danger { border-color: #9a4a1f; background: #fbf1ea; color: #7a3a17; }

/* --- Sitemap und Verzeichnisse ------------------------------------------- */
.ib-sitemapgruppe { margin-bottom: 1.8rem; }
.ib-sitemapseite { list-style: none; padding-left: 0; }
.lexikon { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .lexikon { columns: 1; } }

/* --- Stellenangebote ----------------------------------------------------- */
.stellenangebot_wrapper { display: grid; gap: 1.1rem; }

/* --- Videogalerie -------------------------------------------------------- */
.videogalerierubrik { margin-bottom: 2rem; }
.VideogalerieH2 { font-size: 1.25rem; margin-bottom: 1rem; }

/* --- Sonstiges ----------------------------------------------------------- */
.shariff { margin: 1.6rem 0; }
/* Bausteinrahmen: Rueckfallebene (24.09.2026)

   Normalerweise nimmt verarbeiteslider() den snippet-wrapper beim Rendern wieder
   heraus - auf der Seite existiert er gar nicht. Sollte der Filter einmal nicht
   laufen (neuer Ausgabeweg, vergessener Aufruf), wuerden die beiden zusaetzlichen
   div-Ebenen sonst jedes Raster und jeden Mehrspaltensatz zerlegen: Aus sechs
   Kacheln in drei Spalten wuerde eine Spalte mit sechs Kaesten.

   display:contents laesst die Huellen fuer das Layout verschwinden, ohne ihren
   Inhalt anzutasten. Kostet nichts und faengt den Tag ab, an dem jemand einen
   neuen Ausgabeweg baut. Rat von zahnarzt-b7, bei denen steht es im Design. */
.snippet-wrapper, .snippet-wrapper > div { display: contents; }
.ib-suchhinweis { font-size: .9rem; color: var(--text-leise); }
.ib-krumen { font-size: .86rem; color: var(--text-leise); }
.ib-hier { font-weight: 600; color: var(--text); }

@media (max-width: 760px) {
  .ib-abschnitt.hat-bild .ib-abschnitt-raster { grid-template-columns: 1fr; }
  .ib-abschnitt.bild-links .ib-abschnitt-text { order: 0; }
  .ib-paar { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Untermenues der Hauptnavigation
   ---------------------------------------------------------------------------
   Auf breiten Schirmen klappt das Untermenue beim Zeigen und beim Tastaturfokus
   auf - :focus-within deckt die Bedienung mit der Tabulatortaste mit ab, ohne
   dass dafuer Skript noetig waere. Auf schmalen Schirmen steht alles
   untereinander, denn dort gibt es kein Zeigen.
   =========================================================================== */
.hauptnav li { position: relative; }
.hauptnav a.im-zweig { color: var(--ton-dunkel); }

.hauptnav ul ul {
  position: absolute; top: 100%; left: 0; z-index: 50;
  display: none; flex-direction: column; gap: 0;
  min-width: 230px; padding: .4rem;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(27, 57, 60, .12);
}
.hauptnav li:hover > ul,
.hauptnav li:focus-within > ul { display: flex; }

.hauptnav ul ul ul { top: 0; left: 100%; }

.hauptnav .hat-untermenue > a::after {
  content: ""; display: inline-block; margin-left: .4em;
  width: 5px; height: 5px; vertical-align: middle;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

@media (max-width: 860px) {
  .hauptnav ul ul {
    position: static; display: flex; min-width: 0;
    border: 0; box-shadow: none; padding: 0 0 0 1rem; background: none;
  }
  .hauptnav ul ul a { font-size: .95rem; color: var(--text-leise); }
  .hauptnav .hat-untermenue > a::after { display: none; }
}

/* ===========================================================================
   Seitenkopf (show_inc/include_seitenkopf_inc.php)
   =========================================================================== */
.seitenkopf {
  padding: clamp(2rem, 4.5vw, 3.2rem) 0;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf--gross { padding: clamp(2.8rem, 7vw, 5rem) 0; }
.seitenkopf h1 { margin-bottom: 0; }
.seitenkopf__vorspann {
  margin: .9rem 0 0;
  font-size: clamp(1.03rem, 1rem + .35vw, 1.2rem);
  color: var(--text-leise);
  max-width: 62ch;
}

/* Mit Motiv: das Bild liegt hinter einem Verlauf, damit der Text in jedem
   Fall lesbar bleibt - auch auf hellen Aufnahmen. */
.seitenkopf.hat-motiv {
  position: relative; border-bottom: 0;
  background-image: linear-gradient(rgba(27,57,60,.72), rgba(27,57,60,.72)), var(--kopfbild);
  background-size: cover; background-position: 50% 50%;
}
.seitenkopf.hat-motiv h1 { color: #fff; }
.seitenkopf.hat-motiv .seitenkopf__vorspann { color: #dbe7e6; }
.seitenkopf.hat-motiv .ib-krumen { color: #c3d6d5; }
.seitenkopf.hat-motiv .ib-krumen a { color: #e6efee; }

/* Brotkrumen */
.ib-krumen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; margin-bottom: .9rem; }
.ib-krumen span[aria-hidden] { color: var(--linie-stark); }

/* ===========================================================================
   Lesebahn
   ---------------------------------------------------------------------------
   Fliesstext bekommt eine eigene, schmalere Breite. Ueber die volle Bahn von
   1180 px gesetzt, wuerde eine Zeile rund 120 Zeichen lang - beim Zeilenwechsel
   findet das Auge den Anfang der naechsten Zeile dann nur noch muehsam. Karten,
   Raster und Bilder behalten die volle Breite.
   =========================================================================== */
/* Die Breite wird den Textelementen gegeben, nicht ihrem Behaelter: ein Kind
   kann nie breiter werden als sein Elternteil. Am Behaelter gesetzt, waeren
   auch Terminliste, Galerie und Kartenraster auf Lesebreite gestaucht. */
.ib-spalte-inhalt > p,
.ib-spalte-inhalt > ul,
.ib-spalte-inhalt > ol,
.ib-spalte-inhalt > h2,
.ib-spalte-inhalt > h3,
.ib-spalte-inhalt > blockquote,
.ib-abschnitt:not(.hat-bild) .ib-abschnitt-text > p,
.ib-abschnitt:not(.hat-bild) .ib-abschnitt-text > ul,
.ib-abschnitt:not(.hat-bild) .ib-abschnitt-text > ol,
.ib-abschnitt:not(.hat-bild) .ib-abschnitt-text > h2,
.ib-abschnitt:not(.hat-bild) .ib-abschnitt-text > h3 { max-width: 72ch; }

/* Ausgenommen: Listen, die ein Modul als Raster ausgibt. Die Lesebahn gilt
   dem Fliesstext - eine Kachelliste auf 72 Zeichen zu stauchen presst
   Bild und Text in eine Spalte von wenigen Zentimetern. Gefunden am
   16.09.2026 an der Zimmeruebersicht, sichtbar nur im Bild. */
.ib-spalte-inhalt > .zimmer-liste,
.ib-spalte-inhalt > .veranstaltung-liste,
.ib-spalte-inhalt > .terminliste,
.ib-spalte-inhalt > .chips,
.ib-spalte-inhalt > .galerie-grid,
.ib-spalte-inhalt > .team-grid,
.zimmergruppe > .zimmer-liste { max-width: none; }

/* Leere Meldungsbereiche nehmen keinen Platz ein. Das Feld fuer die Rueckmeldung
   eines Formulars steht bereits im Markup, damit Vorleseprogramme es ueber
   aria-live beobachten koennen - sichtbar werden soll es erst mit Inhalt. */
.form-meldung:empty,
.ib-meldung:empty,
.status:empty { display: none; padding: 0; border: 0; margin: 0; }

/* ===========================================================================
   Seitenmenue des Rubrikzweigs (show_inc/include_seitenmenue_inc.php)
   ---------------------------------------------------------------------------
   Zeigt auf einer Unterseite, wo man steht und was danebenliegt. Steht ueber
   dem Inhalt; ein vollstaendiges Zweispaltenlayout braucht es dafuer nicht.
   =========================================================================== */
/* Das Menue des Zweigs ("Restaurant / Speisekarte") stand als cremefarbener
   Kasten mit Balken ueber dem Text und sah dadurch aus wie eine Brotkrume,
   die es nicht ist: Es sind Geschwisterseiten, keine Ebenen eines Pfades.
   Stefan am 24.09.2026: "haesslich - keine BG farbe bitte und nebeneinander
   und klein". Jetzt eine schlichte Zeile ueber dem Inhalt.

   Die Einrueckung der Ebenen (ib-menue-e2/e3) faellt dabei weg - sie ergibt
   nur senkrecht einen Sinn. Tiefere Zweige bleiben lesbar, weil die Zeile
   umbricht statt zu scrollen. */
.ib-seitenmenue {
  /* Ausbruch aus der Bahn, genau wie bei .ib-spalte-inhalt > .abschnitt:
     Der Grund muss bis an den Bildschirmrand reichen, sonst steht ein
     1160 Pixel breiter Farbstreifen in einem andersfarbigen Band - das
     waere schlimmer als vorher. Den Text haelt das <ul> in der Bahn. */
  width: 100vw; max-width: 100vw;
  margin: 0 0 0 50%;
  transform: translateX(-50%);
  padding: clamp(.9rem, 2.2vw, 1.3rem) 0 0;
  background: none;
  border-left: 0;
  border-radius: 0;
}
.ib-seitenmenue ul {
  width: min(100% - 2 * var(--rand), var(--breit));
  /* margin:0 ist Pflicht, nicht Kosmetik: Der Standardabstand eines <ul>
     faellt durch die Unterkante des <nav> hinaus (margin-collapsing, weil
     das nav unten kein Padding hat) und malte einen hellen Streifen
     zwischen Leiste und Abschnitt - in den Messwerten unsichtbar, im Bild
     sofort. 24.09.2026. */
  margin: 0; margin-inline: auto;
  display: flex; flex-wrap: wrap;
  gap: .3rem 1.3rem;
  list-style: none; padding: 0;
}

/* Die Farbe des Abschnitts darunter. Gesetzt wird die Kennung in
   show_inc/include_seitenmenue_inc.php - dort steht auch, warum. Ohne
   Kennung bleibt das Menue durchsichtig und liegt auf dem Seitengrund. */
.ib-seitenmenue--creme  { background: var(--creme); }
.ib-seitenmenue--dunkel { background: var(--gruen-tief); }
.ib-seitenmenue--dunkel a { color: var(--creme); }
.ib-seitenmenue--dunkel .ib-menue-hier > a,
.ib-seitenmenue--dunkel .ib-menue-offen > a { color: var(--gold); }
.ib-seitenmenue li { padding: 0; font-size: .85rem; line-height: 1.5; }
.ib-seitenmenue a { text-decoration: none; color: var(--text-leise, var(--tinte-leise)); }
.ib-seitenmenue a:hover { color: var(--ton-dunkel); text-decoration: underline; }

.ib-seitenmenue .ib-menue-e2,
.ib-seitenmenue .ib-menue-e3 { padding-left: 0; }

.ib-seitenmenue .ib-menue-offen > a { font-weight: 600; color: var(--ton-dunkel); }
.ib-seitenmenue .ib-menue-hier > a {
  font-weight: 600; color: var(--ton-dunkel);
  box-shadow: none; padding-left: 0; display: inline;
}

/* ===========================================================================
   Eine einzelne Seite anders einkleiden
   ---------------------------------------------------------------------------
   Das <body> traegt den Seitennamen als Klasse ("seite-krimidinner") und, wenn
   die Seite unter einer Rubrik haengt, deren Namen ("zweig-leistungen").
   Gesetzt in show_inc/home_inc.php, eingesetzt in tpl/geruest.tpl.htm.

   Weil die ganze Gestaltung ueber Farbmarken laeuft, genuegt es, diese Marken
   fuer eine Seite neu zu belegen - der ganze Auftritt dreht mit, vom Kopf ueber
   die Karten bis zum Fussbereich. Kein zweites Stylesheet, keine zusaetzliche
   Anfrage, nichts, was im Zwischenspeicher des Besuchers veralten koennte.

   Das Beispiel unten ist der Fall, fuer den es gebaut wurde: ein Krimidinner,
   das dunkel auftreten soll, waehrend der Rest des Hauses hell bleibt. Die
   Regel steht schon hier - sie greift, sobald eine Seite "krimidinner" heisst.
   =========================================================================== */
/* Zimmerseite: Der FAQ-Block folgt unmittelbar auf den Partnerabschnitt,
   und beide standen auf dem Seitengrund - die Grenze war nicht zu sehen
   (Stefan, 24.09.2026: "farbwechsel bitte"). Nur hier, nicht allgemein:
   Auf "home" folgt der FAQ auf einen dunklen Abschnitt und auf "fragen"
   auf den Seitenkopf; dort wechselt die Farbe bereits von selbst.
   Wer die Reihenfolge der Abschnitte aendert, sieht bitte hier nach. */
body.seite-zimmer .faq-section { background: var(--creme); }

body.seite-krimidinner {
  --papier:       #14110e;
  --grund:        #1c1815;
  --flaeche:      #211c18;
  --text:         #ece6de;   /* 13.1:1 auf #14110e */
  --text-leise:   #b3a99c;   /*  7.2:1 auf #14110e */
  --linie:        #332c26;
  --linie-stark:  #4a4038;
  --ton:          #c8a24a;   /* gedecktes Gold */
  --ton-dunkel:   #dcb862;
  --ton-hell:     #2a2219;
  --ton-kontrast: #f0e8dc;
}

/* Auf dunklem Grund muessen ein paar Stellen mitziehen, die sonst fest
   auf Weiss stehen: Schaltflaechen, der Fussbereich und die Bildabdunklung
   im Seitenkopf. */
body.seite-krimidinner .knopf,
body.seite-krimidinner .btn,
body.seite-krimidinner .button,
body.seite-krimidinner .ib-knopf { color: #14110e; }

body.seite-krimidinner .fuss { background: #0e0c0a; color: var(--text-leise); }
body.seite-krimidinner .fuss h2 { color: var(--ton); }

body.seite-krimidinner .seitenkopf.hat-motiv {
  background-image: linear-gradient(rgba(10, 8, 6, .78), rgba(10, 8, 6, .78)), var(--kopfbild);
}

body.seite-krimidinner .kopf { background: var(--grund); border-bottom-color: var(--linie); }

/* ===========================================================================
   Veranstaltungen: Termine und Reservierung (Modul der Vorlage)
   ---------------------------------------------------------------------------
   ACHTUNG, Namensgleichheit: Der Entwurf nennt einen Eintrag im Kalender
   ".termin" — Datumsblatt, Vorschaubild, Text. Das Modul der Vorlage nennt
   eine EINZELNE Terminzeile innerhalb einer Veranstaltung genauso. Weil der
   Modulteil in dieser Datei hinter dem Entwurf steht, gewann er und machte aus
   der schoenen Kalenderliste eine Zeilenliste ohne Bild.
   Deshalb haengen diese Regeln jetzt an ihrem Behaelter .terminliste.
   Gefunden am 23.09.2026 beim Vergleich mit dem abgenommenen Entwurf.
   =========================================================================== */
.terminliste { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; }

.terminliste .termin {
  display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr) auto;
  gap: 1rem; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--ton); border-radius: var(--radius);
  padding: .9rem 1.1rem;
}
.terminliste .termin__zeit { display: grid; gap: .1rem; }
.terminliste .termin__zeit time { font-weight: 600; color: var(--ton-kontrast); }
.terminliste .termin__uhr { font-size: .9rem; color: var(--text-leise); }
.terminliste .termin__ort, .terminliste .termin__hinweis, .terminliste .termin__preis { margin: 0; font-size: .93rem; }
.terminliste .termin__ort { color: var(--text-leise); }
.terminliste .termin__hinweis { color: var(--ton-dunkel); }
.terminliste .termin__preis { font-weight: 600; margin-top: .2rem; }
.veranstaltung-preishinweis { font-weight: 400; color: var(--text-leise); font-size: .88rem; }
.terminliste .termin__aktion { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }

.termin-marke {
  display: inline-block; padding: .25rem .6rem; border-radius: 999px;
  font: 600 .78rem/1.4 var(--sans); letter-spacing: .04em; white-space: nowrap;
}
.termin-marke--ausverkauft { background: var(--linie); color: var(--text-leise); }
.termin-marke--abgesagt    { background: #fbf1ea; color: #7a3a17; }
.termin-marke--knapp       { background: var(--ton-hell); color: var(--ton-dunkel); }

/* Ein ausverkaufter oder abgesagter Termin bleibt lesbar, tritt aber zurueck.
   Nicht ausblenden: Wer den Termin sucht, soll sehen, dass es ihn gibt. */
.termin:has(.termin-marke--ausverkauft),
.termin:has(.termin-marke--abgesagt) { border-left-color: var(--linie-stark); }
.termin:has(.termin-marke--abgesagt) .termin__zeit time { text-decoration: line-through; }

.veranstaltung-karte__weitere {
  margin: 0 0 .5rem; font-size: .86rem; color: var(--ton);
  font-weight: 600; letter-spacing: .03em;
}
.veranstaltung-karte__preis { margin: .6rem 0 0; font-weight: 600; }

.termine-archiv { margin-top: 2rem; }
.termine-archiv summary { cursor: pointer; font-weight: 600; color: var(--text-leise); padding: .5rem 0; }
.termine-archiv[open] summary { margin-bottom: .8rem; }

/* --- Reservierung -------------------------------------------------------- */
.reservierung {
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--grund); border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.reservierung h2 { margin-top: 0; }
.reservierung-form { max-width: var(--schmal); }
.reservierung-form .feld:last-of-type { margin-bottom: 1.4rem; }
.reservierung-form select,
.reservierung-form input[type="number"] {
  width: 100%; padding: .65rem .8rem; font: inherit;
  border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--papier);
}
.reservierung-form input[type="number"] { max-width: 8rem; }

.reservierung-uebersicht {
  display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem;
  margin: 0 0 1.4rem;
}
.reservierung-uebersicht dt { font-weight: 600; color: var(--text-leise); }
.reservierung-uebersicht dd { margin: 0; }

.reservierung-antwort { margin-bottom: 2rem; }
.meldung--gut      { border-left-color: #2f6b45; background: #eef6f1; color: #1d4a2e; }
.meldung--schlecht { border-left-color: var(--signal); background: #fbf1ea; color: #7a3a17; }

@media (max-width: 760px) {
  .termin { grid-template-columns: 1fr; gap: .5rem; }
  .termin__aktion { justify-content: flex-start; }
}

/* ===========================================================================
   Eigenes Kleid je Veranstaltung
   ---------------------------------------------------------------------------
   Das Feld "gestaltung" einer Veranstaltung wird zur Klasse
   "veranstaltung-<wert>" am <body>. Wie bei body.seite-… genuegt es, die
   Farbmarken neu zu belegen.
   =========================================================================== */
body.veranstaltung-krimidinner {
  --papier:       #14110e;
  --grund:        #1c1815;
  --flaeche:      #211c18;
  --text:         #ece6de;
  --text-leise:   #b3a99c;
  --linie:        #332c26;
  --linie-stark:  #4a4038;
  --ton:          #c8a24a;
  --ton-dunkel:   #dcb862;
  --ton-hell:     #2a2219;
  --ton-kontrast: #f0e8dc;
}
body.veranstaltung-krimidinner .knopf,
body.veranstaltung-krimidinner .btn,
body.veranstaltung-krimidinner .ib-knopf { color: #14110e; }
body.veranstaltung-krimidinner .fuss { background: #0e0c0a; color: var(--text-leise); }
body.veranstaltung-krimidinner .fuss h2 { color: var(--ton); }
body.veranstaltung-krimidinner .kopf { background: var(--grund); border-bottom-color: var(--linie); }
body.veranstaltung-krimidinner .termin-marke--ausverkauft { background: #2a2419; color: #9b9080; }

/* --- Einlass und Gesamtzustand ------------------------------------------- */
.termin__einlass { margin: 0; font-size: .9rem; color: var(--text-leise); }

/* Eine Veranstaltung, deren kommende Termine alle ausverkauft sind, tritt
   zurueck und traegt einen Stempel — aber sie verschwindet nicht. Wer danach
   sucht, soll sehen, dass es sie gibt. */
.veranstaltung-karte.ist-ausverkauft { border-color: var(--linie-stark); }
.veranstaltung-karte.ist-ausverkauft .veranstaltung-karte__bildbereich { position: relative; }
.veranstaltung-karte.ist-ausverkauft .veranstaltung-karte__bild { filter: grayscale(.7) brightness(.72); }
.veranstaltung-karte__stempel {
  display: inline-block; margin: 0 0 .6rem;
  padding: .3rem .8rem; border: 2px solid var(--text-leise); border-radius: var(--radius);
  font: 700 .82rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-leise); transform: rotate(-2deg);
}

/* ===========================================================================
   Zimmer
   =========================================================================== */
.zimmergruppe { margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.zimmergruppe__text { max-width: 72ch; margin-bottom: 1.4rem; }

.zimmer-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.zimmer-karte {
  display: grid; grid-template-columns: 1fr;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden;
}
.zimmer-karte:has(.zimmer-karte__bildbereich) {
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}
.zimmer-karte__bildbereich { background: var(--grund); }
.zimmer-karte__bild { width: 100%; height: 100%; object-fit: cover; }
.zimmer-karte__text { padding: clamp(1.1rem, 2.4vw, 1.7rem); }

.zimmer-karte__art {
  margin: 0 0 .3rem; font: 600 .78rem/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ton);
}
/* Preis immer UNTER dem Namen, nie daneben. Mit flex/space-between sprang er
   je nach Laenge des Namens mal in dieselbe Zeile, mal darunter - in einer
   Liste untereinander wirkt das unruhig, als waere etwas verrutscht. */
.zimmer-karte__kopf { display: block; }
.zimmer-karte__titel { margin: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.zimmer-karte__titel a { color: inherit; text-decoration: none; }
.zimmer-karte__titel a:hover { color: var(--ton); text-decoration: underline; }
.zimmer-karte__preis { margin: .15rem 0 0; font-weight: 600; }
.zimmer-karte__merkmale { margin: .3rem 0 .7rem; font-size: .9rem; color: var(--text-leise); }
.zimmer-karte__teaser { margin: 0 0 .8rem; }
.zimmer-karte__mehr { margin: .9rem 0 0; font-weight: 600; }

/* Ausstattungsmerkmale als Marken. Keine Aufzählungspunkte: Es ist eine
   Sammlung von Eigenschaften, keine Reihenfolge. */
.chips { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li {
  padding: .22rem .6rem; border: 1px solid var(--linie); border-radius: 999px;
  font-size: .82rem; color: var(--text-leise); background: var(--grund);
}

.zimmer-detail__titel { margin-bottom: .3rem; }
.zimmer-detail__teaser { font-size: 1.08rem; color: var(--text-leise); max-width: 62ch; }
.zimmer-eckdaten {
  display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.4rem;
  margin: 1.4rem 0; padding: 1.1rem 1.2rem;
  background: var(--grund); border-radius: var(--radius);
}
.zimmer-eckdaten dt { font-weight: 600; color: var(--text-leise); }
.zimmer-eckdaten dd { margin: 0; }
.zimmer-ausstattung { margin: 1.6rem 0; }
.zimmer-ausstattung h3 { font-size: 1.05rem; margin-bottom: .7rem; }
.zimmer-sammelanfrage { margin-top: 2rem; }

/* --- Anfrageformular ----------------------------------------------------- */
.anfrage {
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--grund); border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.anfrage h2 { margin-top: 0; }
.anfrage__vorwahl {
  background: var(--ton-hell); border-left: 3px solid var(--ton);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .8rem 1.1rem; margin: 0 0 1.4rem; max-width: 72ch;
}
.anfrage-form { max-width: var(--schmal); }
.anfrage-form fieldset {
  border: 0; border-top: 1px solid var(--linie-stark);
  margin: 0 0 1.4rem; padding: 1.2rem 0 0;
}
.anfrage-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.anfrage-form legend {
  padding: 0 .6rem 0 0; font: 600 .82rem/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ton);
}
.anfrage-form input[type="date"],
.anfrage-form input[type="number"],
.anfrage-form input[type="text"],
.anfrage-form input[type="email"],
.anfrage-form input[type="tel"],
.anfrage-form select,
.anfrage-form textarea {
  width: 100%; padding: .65rem .8rem; font: inherit; color: var(--text);
  background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.feldreihe { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.feld--schmal { flex: 0 1 9rem; }
.feld--schmal input { max-width: 100%; }

@media (max-width: 760px) {
  .zimmer-karte { grid-template-columns: 1fr; }
  .zimmer-karte:has(.zimmer-karte__bildbereich) { grid-template-columns: 1fr; }
  .zimmer-karte__bild { height: 220px; }
  .zimmer-eckdaten { grid-template-columns: 1fr; gap: .1rem; }
  .zimmer-eckdaten dd { margin-bottom: .6rem; }
}

/* Bild in der Einzelansicht: Höhe begrenzen. Ein 3:2-Motiv über die volle
   Bahnbreite wird sonst gut 700 px hoch und schiebt alles Weitere unter die
   Falz — der Leser sieht Bild und muss scrollen, um zu erfahren, worum es
   geht. Der Ausschnitt wird mittig beschnitten. */
.veranstaltung-bild img,
.zimmer-detail .veranstaltung-bild img {
  max-height: 460px; width: 100%; object-fit: cover;
}

/* ===========================================================================
   SHOP — Gutscheine und kleine Artikel
   ===========================================================================
   .shop-liste ist ein <ul> und braucht deshalb ausdruecklich max-width: none.
   Weiter oben gilt "ul, ol { max-width: 72ch }" fuer Fliesstextlisten; ohne
   die Ausnahme wuerde das Kachelraster auf Lesebreite zusammengequetscht und
   saehe aus wie eine einspaltige Liste, obwohl das Raster stimmt. Genau diese
   Falle hat schon die Zimmerliste erwischt.
   =========================================================================== */

.shopgruppe { margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.shopgruppe__text { max-width: 72ch; margin-bottom: 1.4rem; }

/* ----------------------------------------------------------------------
   Die fluechtige Bestaetigung nach "In den Warenkorb"
   ----------------------------------------------------------------------
   Vorher sprang der Besucher nach dem Klick in die Warenkorbansicht und
   musste sich zurueckarbeiten, um ein zweites Stueck zu waehlen (Stefan,
   24.09.2026). Jetzt bleibt er auf der Liste, an derselben Karte, und
   bekommt nur eine kurze Rueckmeldung.

   OHNE JavaScript bleibt sie ein gewoehnlicher Absatz im Textfluss: gut
   sichtbar, nie im Weg, nur eben bis zum naechsten Seitenaufbau. Erst
   .mit-js loest sie heraus und laesst sie gehen. Dieselbe Regel wie bei
   der Telefonnavigation - was allein am Skript haengt, fehlt ohne Skript
   ganz, und das darf eine Kaufbestaetigung nicht.
   ---------------------------------------------------------------------- */
.mit-js .shop-fliege {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 4vw, 2rem);
  transform: translateX(-50%);
  z-index: 60;
  margin: 0;
  max-width: min(92vw, 26rem);
  padding: .7rem 1.15rem;
  font-size: .95rem;
  text-align: center;
  background: var(--gruen);
  color: var(--creme);
  border: 0;
  border-radius: var(--radius);
  /* Die Haarlinie trennt die Meldung von allem, was zufaellig dahinter
     liegt. Ohne sie verschwamm sie auf dem gleichfarbigen Knopf
     "In den Warenkorb" - ausgerechnet dort, wo sie erscheint. */
  box-shadow: 0 0 0 1px rgba(240, 228, 204, .45),
              0 8px 28px -8px rgba(20, 22, 10, .65);
  animation: shop-fliege-auf .28s ease-out both;
}
.mit-js .shop-fliege--geht { animation: shop-fliege-zu .4s ease-in both; }

@keyframes shop-fliege-auf {
  from { opacity: 0; transform: translate(-50%, .8rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes shop-fliege-zu {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, .8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mit-js .shop-fliege,
  .mit-js .shop-fliege--geht { animation: none; }
}

.shop-korbleiste {
  max-width: none; margin: 0 0 1.6rem; padding: .7rem 1.1rem;
  background: var(--ton-hell); border-left: 3px solid var(--ton);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.shop-korbleiste--leer {
  background: var(--grund); border-left-color: var(--linie-stark);
  color: var(--text-leise); font-size: .92rem;
}
.shop-korbleiste__zahl {
  display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem;
  padding: 0 .4rem; border-radius: 999px; background: var(--ton); color: #fff;
  font: 600 .85rem/1 var(--sans);
}

/* --- Kacheln ------------------------------------------------------------- */
.shop-liste {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.shop-karte {
  display: flex; flex-direction: column;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
}
.shop-karte__bildbereich { background: var(--grund); aspect-ratio: 3 / 2; }
.shop-karte__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-karte__text {
  padding: clamp(1rem, 2.2vw, 1.4rem);
  display: flex; flex-direction: column; flex: 1;
}
/* Preis unter den Namen, nicht daneben — siehe die Begruendung bei
   .zimmer-karte__kopf: nebeneinander springt er je nach Namenslaenge. */
.shop-karte__kopf { display: block; }
.shop-karte__titel { margin: 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.shop-karte__titel a { color: inherit; text-decoration: none; }
.shop-karte__titel a:hover { color: var(--ton); text-decoration: underline; }
.shop-karte__preis { margin: .2rem 0 .6rem; font-weight: 600; }
.shop-karte__teaser { margin: 0 0 .8rem; font-size: .95rem; }
/* Der Kaufknopf sitzt unten buendig, auch wenn die Teaser verschieden lang
   sind. Sonst steht er in jeder Kachel auf einer anderen Hoehe. */
.shop-karte__mehr { margin: .8rem 0 0; font-size: .9rem; }
.shop-karte .shop-kaufform { margin-top: auto; }

/* --- "In den Warenkorb" -------------------------------------------------- */
.shop-kaufform {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem;
  padding-top: .9rem; border-top: 1px solid var(--linie);
}
.shop-kaufform .feld { margin-bottom: 0; }
.shop-kaufform .feld--schmal { flex: 0 1 7rem; }
.shop-kaufform label {
  display: block; font: 600 .78rem/1.3 var(--sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
  margin-bottom: .25rem;
}
.shop-kaufform input[type="number"] {
  width: 100%; padding: .5rem .6rem; font: inherit; color: var(--text);
  background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
/* Fussnote UEBER den Feldern, ueber die volle Breite der Kachel. Unter dem
   Knopf schob sie ihn in dieser einen Kachel nach oben - siehe die
   Begruendung in shop_kaufform(). */
.shop-kaufform__fuss { flex-basis: 100%; margin: 0 0 .15rem; }
.shop-kaufform--gross { max-width: var(--schmal); padding-top: 1.2rem; }
.shop-knapp { color: var(--signal); font-weight: 600; }
.shop-hinweis {
  margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linie);
  font-size: .92rem; color: var(--text-leise);
}
.shop-hinweis--aus {
  font-weight: 600; color: var(--signal); text-transform: uppercase;
  letter-spacing: .08em; font-size: .85rem;
}

/* --- Einzelansicht ------------------------------------------------------- */
.shop-detail { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
.shop-detail:has(.shop-detail__bild) { grid-template-columns: minmax(0, 1fr); }
/* Hoehe begrenzen: Ein 3:2-Motiv ueber die volle Bahnbreite wird sonst gut
   700 px hoch und schiebt die Beschreibung unter die Falz. */
.shop-detail__bild { margin: 0; }
.shop-detail__bild img {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: var(--radius); display: block;
}
.shop-detail__titel { margin: 0 0 .2rem; }
.shop-detail__preis { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 600; }
.shop-detail__merkmale { margin: 0 0 1.2rem; font-size: .92rem; color: var(--text-leise); }
.shop-detail__inhalt { max-width: 68ch; }

@media (min-width: 900px) {
  .shop-detail:has(.shop-detail__bild) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start;
  }
  .shop-detail__bild img { max-height: none; aspect-ratio: 3 / 2; }
}

/* --- Warenkorb ----------------------------------------------------------- */
.shop-korb, .shop-kasse, .shop-beleg, .shop-meldung {
  margin-top: clamp(1.4rem, 4vw, 2.4rem);
}
.shop-korb__tabelle, .shop-kasse__tabelle, .shop-beleg__tabelle {
  width: 100%; border-collapse: collapse; margin-bottom: 1.2rem;
}
.shop-korb__tabelle th, .shop-korb__tabelle td,
.shop-kasse__tabelle th, .shop-kasse__tabelle td,
.shop-beleg__tabelle th, .shop-beleg__tabelle td {
  padding: .7rem .6rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
.shop-korb__tabelle thead th {
  font: 600 .78rem/1.3 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-leise);
}
.shop-korb__tabelle .zahl, .shop-kasse__tabelle .zahl, .shop-beleg__tabelle .zahl {
  text-align: right; white-space: nowrap;
}
.shop-korb__tabelle tfoot th, .shop-korb__tabelle tfoot td { border-bottom: 0; }
.shop-korb__summe th, .shop-korb__summe td {
  border-top: 2px solid var(--linie-stark); font-size: 1.1rem; font-weight: 600;
  padding-top: .9rem;
}
/* input.<klasse>, nicht nur .<klasse>: Weiter oben steht
   "input[type=number] { width: 100% }" mit Spezifitaet (0,1,1). Eine reine
   Klasse (0,1,0) verliert dagegen — das Mengenfeld wurde dadurch so breit
   wie seine Zelle und sprengte auf dem Telefon die Karte. Im Quelltext war
   nichts zu sehen; erst das Bildschirmfoto hat es gezeigt. */
input.shop-korb__menge {
  width: 4.5rem; max-width: 100%; padding: .4rem .5rem; font: inherit; text-align: right;
  background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.shop-korb__lieferung { font-weight: 600; }
.shop-lieferarten { display: grid; gap: .3rem; margin-top: .5rem; font-weight: 400; }
.shop-lieferart { display: flex; align-items: baseline; gap: .45rem; font-size: .92rem; }
.shop-korb__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }
.shop-korb__weiter { margin-top: 1.6rem; }

/* Ein gesperrter Knopf, der aussieht wie ein bedienbarer, ist schlimmer als
   gar keiner: Man klickt und nichts passiert, und niemand weiss warum. */
.knopf[disabled], .knopf:disabled {
  background: var(--linie); border-color: var(--linie); color: var(--text-leise);
  cursor: not-allowed; opacity: 1;
}
.knopf[disabled]:hover { background: var(--linie); color: var(--text-leise); }

.knopf--klein { padding: .3rem .8rem; font-size: .85rem; }
.knopf--gross { padding: .8rem 1.6rem; font-size: 1.05rem; }
.knopf--still {
  background: transparent; border-color: transparent; color: var(--text-leise);
  text-decoration: underline; padding-left: .3rem; padding-right: .3rem;
}
.knopf--still:hover { background: transparent; color: var(--ton-dunkel); }

/* --- Kasse --------------------------------------------------------------- */
.shop-kasse__aufstellung {
  max-width: var(--schmal); margin-bottom: 1.8rem; padding: 1.1rem 1.2rem;
  background: var(--grund); border-radius: var(--radius);
}
.shop-kasse__aufstellung h3 { margin-top: 0; font-size: 1.05rem; }
.shop-kasse__aufstellung .shop-kasse__tabelle { margin-bottom: .4rem; }
.shop-kasse__tabelle tfoot th, .shop-kasse__tabelle tfoot td {
  border-bottom: 0; border-top: 2px solid var(--linie-stark); font-weight: 600;
}
.shop-kasse__lieferart { margin-bottom: .4rem; }
.shop-kasse__zahlen { margin: 1.6rem 0 .6rem; }
.shop-bedingungen {
  margin: 1rem 0; padding: .7rem 1rem;
  background: var(--grund); border-radius: var(--radius); max-width: 72ch;
}
.shop-bedingungen summary { cursor: pointer; font-weight: 600; }
.shop-bedingungen div { margin-top: .7rem; font-size: .93rem; }

/* --- Beleg --------------------------------------------------------------- */
.shop-beleg__kopf {
  display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.4rem;
  margin: 1.2rem 0 1.6rem; padding: 1rem 1.2rem;
  background: var(--grund); border-radius: var(--radius); max-width: var(--schmal);
}
.shop-beleg__kopf dt { font-weight: 600; color: var(--text-leise); }
.shop-beleg__kopf dd { margin: 0; }
.shop-beleg__tabelle { max-width: var(--schmal); }
.shop-beleg__adresse { margin: 1.4rem 0; }
.shop-beleg__adresse h3 { font-size: 1rem; margin-bottom: .4rem; }
/* Die Gutscheinnummer muss man abschreiben oder vorlesen koennen. Deshalb
   Festbreitenschrift und weite Sperrung: In einer Proportionalschrift sehen
   5 und S, 8 und B nebeneinander zu aehnlich aus. */
.shop-code {
  display: inline-block; font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: .95rem; letter-spacing: .08em; font-weight: 600;
  padding: .15rem .5rem; background: var(--ton-hell); border-radius: var(--radius);
}

/* Nur fuer Vorleseprogramme: Spaltenueberschriften und Knopftexte, die auf
   dem Bildschirm aus dem Zusammenhang klar sind, im Vorlesen aber nicht. */
.ib-nurlesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 700px) {
  /* Die Warenkorbtabelle wird zu Bloecken. Die Spaltenueberschrift steht
     dann je Zelle davor — sonst weiss niemand mehr, was die Zahl bedeutet. */
  .shop-korb__tabelle thead { display: none; }
  .shop-korb__tabelle, .shop-korb__tabelle tbody, .shop-korb__tabelle tfoot,
  .shop-korb__tabelle tr, .shop-korb__tabelle td, .shop-korb__tabelle th { display: block; }
  .shop-korb__tabelle tbody tr {
    border: 1px solid var(--linie); border-radius: var(--radius);
    padding: .5rem .7rem; margin-bottom: .8rem;
  }
  /* .zahl (0,2,0) schlaegt "tbody td" (0,1,2) — deshalb hier ausdruecklich
     mit derselben Klasse ueberschreiben, sonst bleiben die Zellen im
     Blocklayout rechtsbuendig und die Beschriftung klebt am rechten Rand. */
  .shop-korb__tabelle tbody td,
  .shop-korb__tabelle tbody td.zahl { border-bottom: 0; padding: .25rem 0; text-align: left; }
  .shop-korb__tabelle tbody td.zahl { display: flex; align-items: center; gap: .5rem; }
  .shop-korb__tabelle tbody td[data-spalte]::before {
    content: attr(data-spalte) ": "; font-weight: 600; color: var(--text-leise);
  }
  .shop-korb__tabelle tbody td[data-spalte="Artikel"]::before { content: none; }
  .shop-korb__tabelle tfoot th, .shop-korb__tabelle tfoot td {
    text-align: left; padding: .25rem 0;
  }
  .shop-korb__tabelle tfoot tr { display: flex; justify-content: space-between; gap: 1rem; }
  .shop-korb__tabelle tfoot tr td:empty { display: none; }
  .shop-korb__lieferung { width: 100%; }
}

/* ===========================================================================
   Editor-Bausteine (19.09.2026)
   ---------------------------------------------------------------------------
   Gehoeren zu den Mediathek-Eintraegen mit art='content' (Rubrik "Bausteine").
   Vier Stueck: Seitenkopf, Bildfolie, Personen, Personenkarte. Sie ersetzen die
   Bausteine header1/folie/Team/Behandler aus dem Zahnarztbestand, deren Klassen
   es hier nicht gibt.

   Grundsatz: nur Hausmarken (--ton, --grund, --linie, --breit, --rand ...),
   keine eigenen Farben, keine Icon-Schrift. Wer die Hausfarbe im :root tauscht,
   tauscht die Bausteine mit.
   =========================================================================== */

/* Platzhalter fuer ein noch fehlendes Bild. Bewusst kein <img src="">: ein
   leeres Bild zeigt im Browser ein kaputtes Symbol, und im Editor laesst sich
   in diesen Kasten hineinklicken, um das Bild einzusetzen. */
.bs-platzhalter-text,
.bs-folie-bild,
.bs-person-bild,
.bs-personenkarte-bild {
  background: var(--ton-hell);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
}
.bs-platzhalter-text {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-leise);
  font-size: .9rem;
  border: 0;
  background: none;
}
.bs-folie-bild, .bs-person-bild, .bs-personenkarte-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bs-folie-bild img, .bs-person-bild img, .bs-personenkarte-bild img {
  width: 100%; height: 100%; object-fit: cover;
}

/* --- Seitenkopf ---------------------------------------------------------- */
.bs-kopf {
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  padding: clamp(2rem, 6vw, 4rem) 0;
}
.bs-kopf-kicker {
  margin: 0 0 .4rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--ton);
}
.bs-kopf-titel { margin: 0 0 .5rem; }
.bs-kopf-text { margin: 0; max-width: var(--schmal); color: var(--text-leise); }

/* --- Bildfolie ----------------------------------------------------------- */
.bs-folie {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  max-width: var(--breit);
  margin: clamp(1.5rem, 5vw, 3rem) auto;
  padding: 0 var(--rand);
}
.bs-folie-bild { aspect-ratio: 16 / 9; }
.bs-folie-kicker {
  margin: 0 0 .3rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--ton);
}
.bs-folie-titel { margin: 0 0 .5rem; }
.bs-folie-aktionen { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.bs-knopf {
  display: inline-block;
  padding: .6rem 1.1rem;
  border-radius: var(--radius);
  background: var(--ton);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.bs-knopf:hover, .bs-knopf:focus { background: var(--ton-dunkel); }
.bs-knopf-leise {
  background: transparent;
  color: var(--ton-kontrast);
  border: 1px solid var(--linie-stark);
}
.bs-knopf-leise:hover, .bs-knopf-leise:focus { background: var(--ton-hell); }

/* --- Personen (Raster) --------------------------------------------------- */
.bs-personen { padding: clamp(1.5rem, 5vw, 3rem) 0; }
.bs-personen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 3vw, 1.8rem);
}
.bs-person { margin: 0; }
.bs-person-bild { aspect-ratio: 3 / 4; }
.bs-person figcaption { padding-top: .6rem; display: flex; flex-direction: column; }
.bs-person-name { font-weight: 600; color: var(--ton-kontrast); }
.bs-person-rolle { color: var(--text-leise); font-size: .92rem; }

/* --- Personenkarte (eine Person ausfuehrlich) ---------------------------- */
.bs-personenkarte {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  max-width: var(--breit);
  margin: clamp(1.5rem, 5vw, 3rem) auto;
  padding: 0 var(--rand);
  align-items: start;
}
.bs-personenkarte-bild { aspect-ratio: 3 / 4; }
.bs-personenkarte .bs-person-name { display: block; margin: 0 0 .2rem; }
.bs-personenkarte .bs-person-rolle { display: block; margin: 0 0 .8rem; }
.bs-werdegang { list-style: none; margin: 1rem 0 0; padding: 0; }
.bs-werdegang li {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: .6rem;
  padding: .45rem 0;
  border-top: 1px solid var(--linie);
}
.bs-jahr { color: var(--ton); font-weight: 600; }

/* --- Schmale Fenster ----------------------------------------------------- */
@media (max-width: 720px) {
  .bs-folie, .bs-personenkarte { grid-template-columns: minmax(0, 1fr); }
  .bs-werdegang li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ===========================================================================
   4. Das Kleid des Entwurfs fuer die Modulausgaben
   ---------------------------------------------------------------------------
   ACHTUNG, Reihenfolge: Diese Regeln muessen HINTER dem Modulteil stehen.
   Steht das Kleid davor, gewinnt bei gleicher Gewichtung die Vorlage - genau
   daran ist die Veranstaltungsliste zweimal gescheitert (erst das Datumsblatt,
   dann die Spaltenaufteilung). Neue Anpassungen an Modulausgaben gehoeren
   deshalb ans Dateiende, nicht in die Mitte. 23.09.2026.
   =========================================================================== */
/* ===========================================================================
   Veranstaltungskacheln des Moduls in der Sprache des Entwurfs (23.09.2026)
   ---------------------------------------------------------------------------
   Das Modul gibt .veranstaltung-karte aus, der abgenommene Entwurf zeigte eine
   Zeile aus Datumsblatt, Vorschaubild und Text. Statt das Modul umzuschreiben,
   bekommt seine Ausgabe hier das Kleid des Entwurfs - so wie es beim Kalender
   schon geschehen ist. Das Datumsblatt kann das Modul nicht liefern, deshalb
   steht das Datum als Zeile ueber dem Titel; alles andere entspricht.
   =========================================================================== */
.veranstaltung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.veranstaltung-karte,
.veranstaltung-karte:has(.veranstaltung-karte__bildbereich) {
  display: grid;
  grid-template-columns: 3.9rem minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: start;
  background: none;
  border: 0;
  border-top: 1px solid rgba(60, 72, 24, .14);
  border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  overflow: visible;
}
.veranstaltung-liste > .veranstaltung-karte:first-child { border-top: 0; }
.veranstaltung-karte__bildbereich { background: none; }
.veranstaltung-karte__bild {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid rgba(60, 72, 24, .16); border-radius: var(--radius); background: var(--karte);
}
.veranstaltung-karte__text { padding: 0; }
.veranstaltung-karte__datum {
  font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--wiese-text); margin: 0 0 .5rem;
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
}
.veranstaltung-karte__zeit { color: var(--gold-text); letter-spacing: .16em; }
.veranstaltung-karte__titel { font-family: var(--serif); font-weight: 400; color: var(--gruen); }
.veranstaltung-karte__titel a:hover { color: var(--gold-text); text-decoration: none; }
.veranstaltung-karte__preis { font-family: var(--serif); font-size: 1.15rem; color: var(--gruen); margin: .2rem 0 .6rem; }
.veranstaltung-karte__mehr { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: .9rem 0 0; }
.veranstaltung-karte__reservieren { margin-left: auto; }
@media (max-width: 699px) {
  .veranstaltung-karte,
  .veranstaltung-karte:has(.veranstaltung-karte__bildbereich) { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .veranstaltung-karte__bildbereich { grid-column: 1 / -1; }
  .veranstaltung-karte__reservieren { margin-left: 0; }
}


/* ===========================================================================
   Einzelseite einer Veranstaltung (23.09.2026)
   Text links, Motiv rechts. Vorher lag das Bild ueber die volle Breite und
   drueckte alles Lesbare unter die Falz.
   Die Vorlage steht als Klasse am Artikel (.vorlage-standard, .vorlage-noir …);
   so kann ein Abend anders aussehen als der Rest, ohne eigene Seite.
   =========================================================================== */
.veranstaltung-detail__kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-bottom: 2rem;
}
.veranstaltung-detail__bild { margin: 0; }
.veranstaltung-detail__bild img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(60, 72, 24, .16); border-radius: var(--radius);
  background: var(--karte);
  box-shadow: 0 14px 34px -22px rgba(42, 42, 32, .5);
}
.veranstaltung-detail__titel { font-family: var(--serif); font-weight: 400; color: var(--gruen); margin: 0 0 .8rem; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); }
.veranstaltung-detail__teaser { font-family: var(--serif); font-size: 1.15rem; color: var(--tinte); margin-bottom: 1rem; }
.veranstaltung-leistungen { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .45rem; }
.veranstaltung-leistungen li { padding-left: 1.7rem; position: relative; }
.veranstaltung-leistungen li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--gold-text); font-weight: 700;
}
@media (max-width: 767px) {
  .veranstaltung-detail__kopf { grid-template-columns: 1fr; }
  .veranstaltung-detail__bild { order: -1; }
}

/* Die Gestaltung "fest" ist am 24.09.2026 entfallen - hier standen sechs Regeln.
   Lehrstueck: Sie faerbte die Detailflaeche mit var(--creme) ein, also mit genau
   der Farbe, die .reservierung selbst benutzt (background: var(--grund) - und
   --creme ist nur ein anderer Name dafuer). Der Reservierungskasten verlor damit
   seine Kante und zerfloss im Hintergrund; ausserdem hatte die eingefaerbte
   Flaeche kein Innenmass. "noir" faellt nicht darauf herein, weil sein Band
   dunkel ist. Wer eine Gestaltungsvariante anlegt und den Bandgrund aendert,
   prueft zuerst, welche Bausteine INNERHALB des Bandes auf derselben Farbmarke
   stehen - und gibt einer gefaerbten Flaeche immer ein Innenmass. */

/* Zimmer: Bildergalerie und der kleine Reservierungsknopf je Kachel (23.09.2026) */
.zimmer-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin: 1.2rem 0 1.6rem; }
.zimmer-galerie__bild { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gold-linie); background: var(--karte); }
.zimmer-galerie__bild img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .25s ease; }
.zimmer-galerie__bild:hover img, .zimmer-galerie__bild:focus-visible img { transform: scale(1.04); }
.zimmer-karte__mehr { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: auto; padding-top: .9rem; }
.zimmer-karte__reservieren { margin-left: auto; }

/* ---------------------------------------------------------------------------
   Gaestebuch (23.09.2026)
   Eintraege wie Zettel auf Papier: schmale Spalte, Zitat in der Serifenschrift,
   Name und Datum darunter. Die Antwort des Hauses steht eingerueckt daneben.
   --------------------------------------------------------------------------- */
/* Linksbuendig, nicht mittig: Die Ueberschrift der Seite beginnt am linken Rand
   der Bahn. Ein mittig gesetzter Textblock sass 190 px weiter rechts und sah
   aus, als waere er eingerueckt. 23.09.2026. */
/* Die Modulausgaben stehen in der Bahn des CMS, die Abschnitte des Entwurfs in
   ihrer eigenen (.innen) mit zusaetzlichem Innenabstand. Damit beides auf einer
   Linie beginnt, bekommen die Module denselben Abstand. 23.09.2026. */
.gaestebuch, body.seite-jobs .textblock-inhalt {
  padding-left: clamp(1.1rem, 4vw, 2rem); padding-right: clamp(1.1rem, 4vw, 2rem);
}
.gaestebuch { max-width: calc(var(--schmal) + 2 * clamp(1.1rem, 4vw, 2rem)); margin-inline: 0; }
.gaestebuch-liste { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; gap: 1.6rem; }
.gaestebuch-eintrag {
  background: var(--karte); border: 1px solid var(--gold-linie);
  border-left: 3px solid var(--wiese); border-radius: var(--radius);
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
}
.gaestebuch-eintrag__text { margin: 0 0 .9rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; color: var(--tinte); }
.gaestebuch-eintrag__fuss { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--tinte-leise); }
.gaestebuch-eintrag__name { font-weight: 700; color: var(--gruen); letter-spacing: .02em; }
.gaestebuch-eintrag__antwort {
  margin: 1rem 0 0; padding: .9rem 1.1rem; background: var(--creme);
  border-radius: var(--radius); font-size: .95rem;
}
.gaestebuch-eintrag__antwortkopf { margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wiese-text); }
.gaestebuch-eintrag__antwort p:last-child { margin-bottom: 0; }

.gaestebuch-form { background: var(--creme); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2rem); }
.gaestebuch-form h2 { margin-top: 0; }
.gaestebuch-form .feld { margin-bottom: 1rem; }
.gaestebuch-form label { display: block; font-size: .85rem; font-weight: 700; letter-spacing: .06em; margin-bottom: .3rem; color: var(--gruen); }
.gaestebuch-form input[type="text"], .gaestebuch-form textarea {
  width: 100%; padding: .7rem .9rem; font: inherit;
  border: 1px solid var(--gold-linie); border-radius: var(--radius); background: var(--karte); color: var(--tinte);
}
.gaestebuch-form input:focus-visible, .gaestebuch-form textarea:focus-visible { outline: 2px solid var(--gruen); outline-offset: 1px; }
/* Der Honigtopf gegen Maschinen: fuer Menschen unsichtbar, fuer Vorleseprogramme
   ausgeblendet (aria-hidden am Feld), aber vorhanden. Kein display:none -
   manche Maschinen fuellen nur, was sichtbar ist. */
.gaestebuch-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung--gut { background: var(--creme); border-left: 3px solid var(--wiese); padding: .8rem 1rem; border-radius: var(--radius); }
.meldung--fehler { background: #fdeceb; border-left: 3px solid var(--blut); padding: .8rem 1rem; border-radius: var(--radius); color: #7a1520; }

/* ---------------------------------------------------------------------------
   Stellenangebote in der Uebersicht (23.09.2026)
   Das Modul gibt Textbloecke mit "Jetzt bewerben" aus. Hier bekommen sie die
   Form einer Liste: jede Stelle ein Kasten, Titel zuerst, dann der Teaser.
   --------------------------------------------------------------------------- */
body.seite-jobs .textblock-section { padding: 0; }
body.seite-jobs .textblock-section .container { padding: 0; max-width: none; width: 100%; }
body.seite-jobs .textblock-inhalt { max-width: calc(var(--schmal) + 2 * clamp(1.1rem, 4vw, 2rem)); margin-inline: 0; }
body.seite-jobs .textblock-inhalt > p {
  background: var(--karte); border: 1px solid var(--gold-linie);
  border-left: 3px solid var(--wiese);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.1rem 1.3rem .6rem; margin: 1.4rem 0 0;
}
body.seite-jobs .kontakt-info-text {
  background: var(--karte); border: 1px solid var(--gold-linie); border-top: 0;
  border-left: 3px solid var(--wiese);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0 1.3rem 1.1rem; margin: 0 0 .4rem;
}
body.seite-jobs .kontakt-info-text a {
  font-family: var(--serif); font-size: 1.25rem; color: var(--gruen); text-decoration: none;
}
body.seite-jobs .kontakt-info-text a:hover { color: var(--gold-text); text-decoration: underline; }
body.seite-jobs .kontakt-info-text strong {
  display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wiese-text); font-weight: 700; margin-bottom: .2rem;
}

/* ---------------------------------------------------------------------------
   Formulare der Module im Kleid des Entwurfs (23.09.2026)
   Das Kontaktformular, die Zimmeranfrage und die Veranstaltungsreservierung
   geben .ib-feld / .ib-paar / .ib-formular aus; der Entwurf kennt .feld und
   .formular. Statt drei Module umzuschreiben, erben die Namen voneinander.
   --------------------------------------------------------------------------- */
.ib-formular, .kontakt-form, .reservierung-form, .zimmer-anfrage form {
  background: var(--karte);
  border: 1px solid rgba(60, 72, 24, .12);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
}
.ib-kontakt-raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (max-width: 767px) { .ib-kontakt-raster { grid-template-columns: 1fr; } }
.ib-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 559px) { .ib-paar { grid-template-columns: 1fr; } }
.ib-feld, .feld { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.ib-feld label, .feld label, .ib-formular label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen);
}
/* Die Datenschutz-Zustimmung ist ein Satz, keine Feldbeschriftung - in
   Versalien gesetzt wird sie unlesbar und wirkt wie ein Warnschild. */
.ib-formular label:has(input[type="checkbox"]),
.ib-formular .ib-datenschutz label, .ib-formular .datenschutz label, label.ib-datenschutz {
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .92rem; color: var(--tinte);
}
.ib-feld input, .ib-feld select, .ib-feld textarea,
.feld input, .feld select, .feld textarea,
.ib-formular input[type="text"], .ib-formular input[type="email"], .ib-formular input[type="tel"],
.ib-formular input[type="number"], .ib-formular input[type="date"], .ib-formular select, .ib-formular textarea {
  width: 100%; padding: .7rem .9rem; font: inherit; color: var(--tinte);
  background: var(--papier); border: 1px solid var(--gold-linie); border-radius: var(--radius);
}
.ib-feld input:focus, .ib-feld select:focus, .ib-feld textarea:focus,
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--gruen); outline-offset: 1px; background: var(--karte);
}
.ib-formular abbr[title], .feld abbr[title] { color: var(--gold-text); text-decoration: none; border: 0; }
.ib-formular .ib-datenschutz, .ib-formular .datenschutz { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.ib-formular button[type="submit"], .kontakt-form button[type="submit"] { margin-top: .6rem; }
.form-meldung:not(:empty) { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius); background: var(--creme); border-left: 3px solid var(--wiese); }

/* ---------------------------------------------------------------------------
   Speisekarte (23.09.2026)
   Wie eine gedruckte Karte: Rubrik als Ueberschrift, Gericht links, Preis
   rechts, dazwischen eine feine Punktlinie. Kein Kasten um jedes Gericht -
   eine Karte ist eine Liste, kein Katalog.
   --------------------------------------------------------------------------- */
.speisekarten { max-width: none; margin-inline: 0; padding: 0; }
.speisekarte { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.speisekarte__kopf { margin-bottom: 1.6rem; }
.speisekarte__titel { font-family: var(--serif); color: var(--gruen); margin: 0 0 .4rem; }
.speisekarte__gueltig { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .6rem; }
.speisekarte__teaser { margin: 0 0 1rem; }
.speisekarte__pdfgroesse { font-size: .8rem; color: var(--tinte-leise); }

.speiserubrik { margin-bottom: 2rem; }
.speiserubrik__titel {
  font-family: var(--serif); font-size: 1.35rem; color: var(--gruen);
  margin: 0 0 .2rem; padding-bottom: .4rem; border-bottom: 1px solid var(--gold-linie);
}
.speiserubrik__hinweis { font-size: .88rem; color: var(--tinte-leise); margin: .4rem 0 .8rem; }

.gerichte { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .9rem; }
.gericht { display: flex; align-items: baseline; gap: .6rem; }
.gericht__text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; }
.gericht__name { font-weight: 600; color: var(--tinte); }
/* Die Punktlinie zwischen Gericht und Preis - wie auf einer gedruckten Karte.
   Sie waechst mit, weil sie ein eigenes Element mit flex:1 ist. */
.gericht::after {
  content: ""; flex: 1 1 auto; order: 1;
  border-bottom: 1px dotted var(--gold-linie); transform: translateY(-.25rem); min-width: 1.5rem;
}
.gericht__preis { order: 2; white-space: nowrap; font-family: var(--serif); font-size: 1.05rem; color: var(--gruen); }
.gericht__beschreibung { font-size: .9rem; color: var(--tinte-leise); }
.gericht__kennzeichnung { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wiese-text); }
.gericht__preishinweis { font-size: .78rem; color: var(--tinte-leise); }

/* ---------------------------------------------------------------------------
   Leichter Mouseover fuer Karten und Bilder (23.09.2026)
   Auf Wunsch des Auftraggebers: Kaesten und Bilder sollen beim Ueberfahren
   kurz antworten. Zurueckhaltend - zwei Pixel Hub, etwas mehr Schatten,
   kein Zoom. Die Fotos kommen aus dem Druck und sollen nicht zappeln.
   --------------------------------------------------------------------------- */
.karte, .speisekarte, .gaestebuch-eintrag {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.karte:hover, .karte:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -22px rgba(42, 42, 32, .55);
  border-color: var(--gold-linie);
}
/* Bilder im Fliesstext: ruhiger Rahmen wie auf den Zimmerseiten, dazu derselbe
   zurueckhaltende Mouseover. */
.duett__bild img, .abschnitt figure img, .karte__bild {
  border: 1px solid var(--gold-linie);
  border-radius: var(--radius);
  background: var(--karte);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.duett__bild img { padding: 8px; }
.duett__bild:hover img, .abschnitt figure:hover img, .karte:hover .karte__bild {
  border-color: var(--wiese);
  box-shadow: 0 16px 34px -22px rgba(42, 42, 32, .5);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Anfahrt mit Karte (23.09.2026)
   Karte links, Weg rechts. Die Kacheln kommen ueber den eigenen Server
   (openmaps/tiles.php) - kein Besucher wird an einen fremden Kartendienst
   gemeldet, und der Cookie-Banner bleibt uns erspart.
   --------------------------------------------------------------------------- */
.anfahrt__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 767px) { .anfahrt__raster { grid-template-columns: 1fr; } }
#map-zzam {
  height: clamp(18rem, 42vh, 30rem); width: 100%;
  border: 1px solid var(--gold-linie); border-radius: var(--radius);
  background: var(--papier); box-shadow: var(--schatten);
}
.anfahrt__text address { font-style: normal; font-size: 1.05rem; margin-bottom: 1rem; }
.anfahrt__text h3 { font-size: 1.1rem; margin: 1.4rem 0 .3rem; }
.anfahrt__text p { margin: 0 0 .6rem; }
.leaflet-container { font: inherit; }

/* ---------------------------------------------------------------------------
   Kontaktseite aufgeräumt (23.09.2026)
   Vorher lag ein cremefarbener Kasten um alles, und darin noch einmal ein
   weisser um das Formular — Kasten im Kasten, mit zwei Rahmen und zwei
   Hintergründen. Jetzt trägt nur das Formular eine Fläche; die Anschrift steht
   frei daneben auf dem Papier, so wie im Entwurf.
   --------------------------------------------------------------------------- */
/* Luft zwischen Formular und dem, was danach kommt. Gemessen: vorher 0 px -
   die Anfahrt begann unmittelbar unter dem Formular. 23.09.2026. */
.ib-kontakt { background: none; padding: 0; border-radius: 0; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
/* Dasselbe fuer die anderen Modulausgaben, wenn ein Abschnitt folgt. */
.ib-spalte-inhalt > .gaestebuch, .ib-spalte-inhalt > .speisekarten { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.ib-kontakt > .ib-kontakt-raster { align-items: start; }
.ib-kontakt aside .ib-block { background: none; border: 0; padding: 0; }
.ib-kontakt aside h2 { margin-top: 0; }

/* Die Anschrift als ruhige Liste: Bezeichnung klein darüber, Angabe darunter. */
.ib-kontaktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ib-kontaktliste li { display: grid; gap: .15rem; }
.ib-kontaktliste .ib-bez {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wiese-text); font-weight: 700;
}
.ib-kontaktliste a { color: var(--gruen); }

/* Die Datenschutz-Zeile ist ein Satz, keine Feldbeschriftung. Die vorherige
   Regel griff nicht, weil das Kästchen nicht IM label steht, sondern daneben. */
.ib-zustimmung, .ib-zustimmung label,
.ib-formular .ib-datenschutz, .ib-formular .ib-datenschutz label,
.kontakt-form label[for="k-datenschutz"], .ib-formular .feld--datenschutz label {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: .92rem; color: var(--text, var(--tinte)); line-height: 1.5;
}
.ib-formular .ib-hinweis, .ib-formular p.klein { font-size: .85rem; color: var(--tinte-leise); }
.ib-zustimmung { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0 1rem; }
.ib-zustimmung input[type="checkbox"] { margin-top: .25rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.ib-pflicht { font-size: .85rem; color: var(--tinte-leise); margin: 0 0 1rem; }

/* Kacheln der Speisekarte: Aufbau des Entwurfs, Inhalt aus dem Modul. */
.karte--speisekarte .karte__leib { display: flex; flex-direction: column; height: 100%; }
.karte--speisekarte .karte__fuss { margin-top: auto; padding-top: .8rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.karte__gueltig { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.karte__dateigroesse { font-size: .78rem; color: var(--tinte-leise); }
/* Die Gerichte stehen unter den Kacheln, in Lesebreite. */
.speisekarten-texte { max-width: var(--schmal); margin: clamp(2rem, 5vw, 3.5rem) 0 0; }

/* ---------------------------------------------------------------------------
   Stellenangebot (23.09.2026)
   Die Seite besteht aus zwei Abschnitten: die Beschreibung auf Papier, die
   Bewerbung auf Creme. Das Formular spricht dieselbe Sprache wie das
   Kontaktformular (.ib-formular, .ib-feld, .ib-paar) - es erbt darum alles
   von dort und braucht hier nur noch, was es zusaetzlich hat: die
   Dateiauswahl und die Statuszeile.
   --------------------------------------------------------------------------- */
.stellenangebot_wrapper > h2 {
  font-family: var(--serif); color: var(--gruen);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); margin: 0 0 1.2rem;
}
.stellenangebot_wrapper > h2:empty { display: none; }
.stellenangebot_wrapper h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; color: var(--gruen); }
.stellenangebot_wrapper ul { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.stellenangebot_wrapper li { margin-bottom: .35rem; }

.bewerbungsform { margin-top: 1.6rem; }
.bewerbungsform .status:empty { display: none; }
.bewerbungsform .status:not(:empty) { margin-bottom: 1.2rem; }
.bewerbungsform .meldung { display: block; padding: .9rem 1.1rem; border-radius: var(--radius); font-size: .95rem; border: 0; }
.bewerbungsform .meldung--gut { background: #eef3e2; border-left: 3px solid var(--wiese); color: var(--gruen); }
.bewerbungsform .meldung--fehler { background: #fdeceb; border-left: 3px solid var(--blut); color: #7a1520; }
/* Postleitzahl braucht keine halbe Zeile. */
@media (min-width: 560px) { .ib-paar--plzort { grid-template-columns: 8rem 1fr; } }

.ib-dateien { border: 1px dashed var(--gold-linie); border-radius: var(--radius);
  padding: clamp(1rem, 2.4vw, 1.5rem); margin: 0 0 1.2rem; }
.ib-dateien legend { font-family: var(--serif); color: var(--gruen); font-size: 1.05rem; padding: 0 .5rem; }
.ib-dateien .ib-feld:last-of-type { margin-bottom: .4rem; }
.ib-formular input[type="file"] {
  width: 100%; padding: .6rem; background: var(--papier);
  border: 1px solid var(--gold-linie); border-radius: var(--radius); font-size: .9rem;
}
.ib-hinweis { font-size: .85rem; color: var(--tinte-leise); margin: 0; }
.ib-pflicht { font-size: .85rem; color: var(--tinte-leise); margin: 0 0 1rem; }
.ib-formular abbr[title] { color: var(--gold-text); text-decoration: none; border: 0; }

/* Die Zustimmungszeile ist ein Satz, keine Feldbeschriftung. */
.ib-zustimmung { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0 1.2rem; }
.ib-zustimmung label { text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: .92rem; line-height: 1.5; color: var(--tinte); }
.ib-zustimmung input[type="checkbox"] { margin-top: .25rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Fussbereich (23.09.2026)
   Wappen und Spruch links, daneben Adresse, Zeiten, Kontakt und die
   Rechtslinks. Vorbild ist der bisherige Auftritt, in der Sprache des Hofes.
   --------------------------------------------------------------------------- */
.fuss__innen { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: start; }
.fuss__marke { display: grid; gap: .6rem; }
.fuss__wappen { width: 72px; height: 72px; border-radius: 50%; background: var(--creme); padding: 4px; }
.fuss__spruch { font-family: var(--serif); font-size: 1.05rem; color: var(--creme); margin: 0; }
.fuss__netz { display: flex; gap: .7rem; margin: .9rem 0 0; }
.fuss__zeiten { display: grid; gap: .25rem; }
.fuss__zeiten li { display: grid; grid-template-columns: 5.5rem 1fr; gap: .4rem; }
.fuss__zeiten li span:first-child { color: var(--gold); }
.fuss__zeitzusatz { font-size: .85rem; margin: .6rem 0 0; opacity: .85; }
.fuss__zeile { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; justify-content: space-between;
  margin-top: clamp(1.6rem, 4vw, 2.6rem); padding-top: 1rem; border-top: 1px solid rgba(240, 228, 204, .2); font-size: .85rem; }
.fuss__zeile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.fuss a { color: var(--creme); }
.fuss a:hover { color: var(--gold); }


/* ---------------------------------------------------------------------------
   Dunkle Abschnitte: alles, was darin steht, muss hell sein (23.09.2026)
   Gefunden auf feiern.html: .einleitung setzt fest color: var(--tinte) und
   stand damit dunkel auf dunklem Grund — unlesbar. Die Regel gilt fuer jeden
   dunklen Abschnitt, damit derselbe Fehler nicht auf der naechsten Seite
   wiederkehrt. Muss NACH .einleitung stehen, sonst gewinnt die dunkle Farbe.
   --------------------------------------------------------------------------- */
.abschnitt--dunkel,
.abschnitt--dunkel p,
.abschnitt--dunkel li,
.abschnitt--dunkel dd,
.abschnitt--dunkel dt,
.abschnitt--dunkel .einleitung,
.abschnitt--dunkel .vorspann,
.abschnitt--dunkel blockquote { color: var(--creme); }
.abschnitt--dunkel .vorzeile,
.abschnitt--dunkel .karte__gueltig { color: var(--gold); }
.abschnitt--dunkel a:not(.btn) { color: var(--gold); }
.abschnitt--dunkel .btn--umriss { color: var(--creme); border-color: var(--creme); }
.abschnitt--dunkel .btn--umriss:hover { background: var(--creme); color: var(--gruen-tief); }
/* Ein zentrierter Abschnittskopf zentriert auch die Knopfzeile darunter. */
.abschnittkopf--mitte .knopfzeile { justify-content: center; }

/* ---------------------------------------------------------------------------
   Noir-Seite: Kopfzeile (23.09.2026)
   Die vorhandenen .noir-Regeln zielten auf .marke__text strong/small — diese
   Elemente gibt es im Kopf gar nicht, er benutzt .marke__name/.marke__claim.
   Die Wortmarke stand deshalb dunkelgruen auf Schwarz. Gefunden im
   Sichtdurchgang am 23.09.2026.
   --------------------------------------------------------------------------- */
body.noir .marke__name { color: #F2EDE0; }
body.noir .marke__claim { color: #8F8A7C; }
body.noir .kopf { background: var(--nacht); border-bottom-color: rgba(216, 210, 196, .18); }
body.noir .hauptnav a:not(.btn) { color: var(--rauch); }
body.noir .hauptnav a:not(.btn):hover,
body.noir .hauptnav a[aria-current="page"] { color: var(--gold); }
body.noir .kopf .btn { background: var(--blut); border-color: var(--blut); color: #fff; }
body.noir .kopf .btn:hover { background: #A11A2A; border-color: #A11A2A; }
/* Umrissknoepfe auf der Noir-Seite: heller Text, heller Rahmen. Vorher stand
   dort dunkle Schrift auf dunklem Grund (Telefonknopf im Terminblock). */
body.noir .btn--umriss { color: var(--rauch); border-color: rgba(216, 210, 196, .45); background: transparent; }
body.noir .btn--umriss:hover { background: var(--rauch); color: var(--nacht); border-color: var(--rauch); }
/* Der Reservieren-Knopf im Menue ist ein Link mit Zieladresse, kein .btn -
   auf der Noir-Seite muss er deshalb eigens umgefaerbt werden. */
body.noir .hauptnav a[href$="reservierung.html"] { background: var(--blut); border-color: var(--blut); color: #fff; }
body.noir .hauptnav a[href$="reservierung.html"]:hover,
body.noir .hauptnav a[href$="reservierung.html"]:focus-visible { background: #A11A2A; border-color: #A11A2A; color: #fff; }
/* Tischreservierung: Hinweiszeile ueber dem Formular. */
.abschnitt--formular { padding-top: 0; }
.pflichthinweis { max-width: var(--schmal); margin: 0 0 1.6rem; font-size: .92rem; color: var(--tinte-leise); }
.pflichtstern { color: var(--gold-text); }
.formular__hinweis { font-size: .85rem; color: var(--tinte-leise); }
.feld__zusatz { font-weight: 400; text-transform: none; color: var(--tinte-leise); }
.seitenkasten__tel { font-size: 1.35rem; color: var(--gold-text); font-family: var(--serif); }
.seitenkasten__klein { font-size: .9rem; color: var(--tinte-leise); }
.seitenkasten__ueb { font-size: 1.1rem; }
.formular--dank { padding: clamp(1.4rem, 3.4vw, 2.6rem); }
/* Kurzer Einleitungsabschnitt ohne Ueberschrift - nur Luft nach oben, wenig nach unten. */
.abschnitt--schmalkopf { padding-block: clamp(2rem, 5vw, 3.2rem) 0; }
/* Stellenuebersicht: eine Karte je Stelle. */
.karte--stelle h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 .6rem; }
.karte--stelle h3 a { color: var(--gruen); text-decoration: none; }
.karte--stelle h3 a:hover { color: var(--gold-text); }
.karte--stelle .karte__fuss { margin-top: auto; padding-top: 1rem; }
@media (max-width: 900px) { .raster--stellen { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
/* Leseband: schmale Textspalte, aber linksbuendig am selben Rand wie alles
   andere. .innen--schmal zentriert den ganzen Kasten - neben Kacheln, die die
   volle Bahn nutzen, sieht der Text dann eingerueckt aus. 23.09.2026. */
.leseband { max-width: var(--schmal); margin-inline: 0; }
/* Auf Seiten, deren Modulteil die volle Bahn nutzt, bleibt der Einleitungstext
   am selben linken Rand: Der Kasten laeuft ueber die ganze Bahn, nur seine
   Kinder sind auf Lesebreite begrenzt. */
body.seite-jobs .innen--schmal,
body.seite-zimmer .innen--schmal,
body.seite-reservierung .innen--schmal,
body.seite-kontakt .innen--schmal { max-width: var(--breit); }
body.seite-jobs .innen--schmal > *,
body.seite-zimmer .innen--schmal > *,
body.seite-reservierung .innen--schmal > *,
body.seite-kontakt .innen--schmal > * { max-width: var(--schmal); }
/* Gaestebuch: Zaehlzeile und Blaetterleiste. */
.gaestebuch-ueb { font-family: var(--serif); color: var(--gruen); margin: clamp(2rem, 5vw, 3rem) 0 .4rem; }
.gaestebuch-zahl { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 1.4rem; }
.gaestebuch-form { margin-bottom: 1rem; }
.gaestebuch-blaettern ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 2.5rem; padding: 0; }
.gaestebuch-blaettern a, .gaestebuch-blaettern span {
  display: inline-block; min-width: 2.2rem; text-align: center; padding: .4rem .5rem;
  border: 1px solid var(--gold-linie); border-radius: var(--radius);
  text-decoration: none; color: var(--gruen); font-size: .9rem;
}
.gaestebuch-blaettern a:hover { background: var(--creme); }
.gaestebuch-blaettern span[aria-current] { background: var(--gruen); color: var(--creme); border-color: var(--gruen); }
/* FAQ-Rubriken: eine sichtbare Zwischenueberschrift, keine graue Zeile. */
.faq-rubrik {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text);
  margin: clamp(2rem, 4vw, 2.8rem) 0 .9rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--gold-linie);
}
.faq-rubrik:first-of-type { margin-top: 1.4rem; }
/* ---------------------------------------------------------------------------
   Rechtstexte (23.09.2026)
   Impressum, Datenschutz und AGB kommen woertlich aus dem alten Auftritt und
   bringen dessen Auszeichnung mit (h4 als Zwischenzeile, dl/dt/dd fuer
   Adressen, viele &nbsp;-Absaetze). Statt den Text anzufassen bekommt er hier
   eine Lesespalte und eine ruhige Hierarchie - der Wortlaut bleibt unberuehrt.
   --------------------------------------------------------------------------- */
.rechtstext { max-width: var(--schmal); margin-inline: 0; }
.rechtstext h2 { font-family: var(--serif); color: var(--gruen); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: 2.2rem 0 .6rem; }
.rechtstext h3 {
  font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-text); margin: 2rem 0 .5rem;
}
/* h4 traegt im uebernommenen Text auch ganze Saetze ("Hinweis zur
   Online-Streitbeilegung gemaess Art. 14 ...") - in Versalien mit weiter
   Sperrung waere das unlesbar. */
.rechtstext h4 {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  color: var(--gruen); letter-spacing: 0; text-transform: none; margin: 1.8rem 0 .4rem;
}
.rechtstext h4 + p:empty, .rechtstext p:empty { display: none; }
.rechtstext p { margin: 0 0 .9rem; }
.rechtstext dl { margin: 0 0 1.2rem; }
.rechtstext dt { font-weight: 700; color: var(--gruen); margin-top: .6rem; }
.rechtstext dd { margin: 0 0 .2rem 1.2rem; }
.rechtstext ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .3rem; }
.rechtstext a { color: var(--gruen); }
.rechtstext table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; }
.rechtstext td, .rechtstext th { border-bottom: 1px solid var(--gold-linie); padding: .5rem .4rem; text-align: left; vertical-align: top; }
/* Listenueberschriften ueber Termin- und Stellenkacheln (24.09.2026).
   Sie schliessen die Luecke zwischen <h1> und den <h3> der Kacheln. */
.veranstaltung-listentitel, .stellen-titel {
  font-family: var(--serif); color: var(--gruen);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  margin: 0 0 clamp(1.2rem, 3vw, 2rem);
}

/* ---------------------------------------------------------------------------
   Lesbarkeit nachgemessen (24.09.2026)
   Gemessen wurde der tatsaechlich berechnete Stil im Browser, nicht die
   Absicht im Quelltext. Drei Stellen lagen unter 4,5 : 1.
   --------------------------------------------------------------------------- */
/* Der rote Knopf der Noir-Seite erbte die dunkle Schriftfarbe von .btn —
   schwarz auf Rot ergibt 3,25 : 1. Weiss auf demselben Rot: 5,79 : 1. */
body.noir .btn { color: #fff; }
body.noir .btn:hover { color: #fff; }
/* Ausverkaufte Termine waren so weit abgedunkelt, dass sie mit 4,07 : 1
   durchfielen. Grau bleiben sie, lesbar sind sie jetzt (5,89 : 1). */
.noir .termine li.aus, .termine li.aus { color: #9A9688; }

/* ---------------------------------------------------------------------------
   Weniger Bewegung, wenn das Betriebssystem es verlangt (24.09.2026)
   Wer "Bewegung reduzieren" eingestellt hat, hat meist einen Grund: Schwindel,
   Migraene, Reisekrankheit. Uebergaenge bleiben, sie werden nur so kurz, dass
   sie niemanden mehr erwischen; die Zustaende selbst aendern sich nicht.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Google-Bewertungen (24.09.2026)
   Vorher standen sechs Stimmen als Text in der Startseite - mit Sternen aus
   Schriftzeichen, ohne Herkunft und, wie sich beim Abgleich mit dem alten
   Auftritt zeigte, mit vertauschten Namen. Jetzt kommen sie aus der Tabelle
   `bewertungen`; Sterne sind SVG (keine Icon-Schrift, die dieser Auftritt gar
   nicht laedt), und das Google-Zeichen belegt, woher sie stammen.
   --------------------------------------------------------------------------- */
.bewertungen__kopf { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.bewertungen__urteil {
  font-family: var(--serif); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  color: var(--gruen); margin: .2rem 0 .4rem; line-height: 1.1;
}
.bewertungen__zahl { margin: .5rem 0 0; color: var(--tinte-leise); display: flex;
  flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.bewertungen__zahl strong { color: var(--tinte); }
.google-wort { font-weight: 600; color: var(--tinte); }
.google-g { width: 1.05em; height: 1.05em; vertical-align: -.18em; }

/* Sternenreihe. `currentColor` faerbt die SVG - so erbt sie die Textfarbe und
   funktioniert auch auf dunklem Grund. */
.sterne { display: inline-flex; gap: .12em; color: var(--gold-linie); line-height: 1; letter-spacing: 0; }
.sterne .stern { width: 1.25em; height: 1.25em; display: block; }
.sterne--gross { font-size: 1.6rem; color: #E8A33D; }
.sterne--klein { font-size: .95rem; }

.bewertungen-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.bewertung {
  background: var(--karte); border: 1px solid rgba(60, 72, 24, .12);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: clamp(1.1rem, 2.4vw, 1.5rem); display: flex; flex-direction: column;
}
.bewertung__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.bewertung__text {
  margin: 0 0 1rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.6;
  color: var(--tinte); border: 0; padding: 0;
}
.bewertung__fuss { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  font-size: .85rem; color: var(--tinte-leise); }
.bewertung__name { font-weight: 700; color: var(--gruen); }
.bewertung__antwort { margin-top: .9rem; padding: .8rem 1rem; background: var(--papier);
  border-left: 3px solid var(--gold-linie); border-radius: var(--radius); }
.bewertung__antwortkopf { margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--wiese-text); }
.bewertung__antwort p:last-child { margin-bottom: 0; }

/* Aufruf mit QR-Code: auf dem Tisch abfotografiert, am Schirm angeklickt. */
.bewertungen__aufruf {
  margin-top: clamp(2rem, 5vw, 3rem); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center; background: var(--karte); border: 1px solid rgba(60, 72, 24, .12);
  border-radius: var(--radius); padding: clamp(1.4rem, 3.4vw, 2.4rem);
}
.bewertungen__aufruftext h3 { font-family: var(--serif); color: var(--gruen); margin: 0 0 .5rem;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.bewertungen__aufruftext p { margin: 0 0 1rem; }
.bewertungen__aufruftext p:last-child { margin-bottom: 0; }
.bewertungen__qr { margin: 0; text-align: center; }
.bewertungen__qr img { width: clamp(7rem, 14vw, 9.5rem); height: auto; display: block; }
.bewertungen__qr figcaption { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise); margin-top: .5rem; }
@media (max-width: 639px) {
  .bewertungen__aufruf { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.bewertung__weiter { color: var(--gold-text); white-space: nowrap; font-size: .9rem; }
/* Terminzeile auf dem Telefon stapeln: In drei Spalten quetschte sich das
   Datum auf fuenf Zeilen ("FR, 25. / DEZEMBER / 2026 / AB 18:00 / UHR").
   24.09.2026. */
@media (max-width: 639px) {
  .terminliste .termin { grid-template-columns: 1fr; gap: .6rem; }
  .terminliste .termin > * { justify-self: start; }
}
/* Netzverweise im Fuss: Zeichen und Wort nebeneinander (24.09.2026). */
/* Runde Plaketten in den echten Markenfarben (24.09.2026).
   Vorher: weisses Zeichen plus Versalienschrift "FACEBOOK  YOUTUBE" - auf dem
   dunklen Grund zwei graue Woerter, die wie ein Nachgedanke wirkten. Eine Marke
   wird an ihrer Farbe erkannt, nicht an ihrem Namen; deshalb traegt jeder
   Verweis jetzt seine eigene Hausfarbe und das Wort wandert in den sr-only-Text.
   Die Zeichen bleiben eingebettetes SVG - keine Symbolschrift, keine Fremdquelle. */
.netzmarke {
  /* KEIN display hier und keine Zentrierung ueber Flex: Die Vorlage setzt am
     Verweis einen Inline-Stil style="display:{zeige_facebook}", mit dem das CMS
     den Verweis ein- und ausblendet. Ein Inline-Stil schlaegt jede Regel aus
     dem Stilblatt - "display:inline-flex" haette hier nie gegriffen, und das
     Zeichen sass oben links statt in der Mitte. Deshalb wird das SVG absolut
     zentriert: das gilt unabhaengig davon, welches display die Vorlage setzt.
     Dieselbe Falle ist am selben Tag der Sitzung gelnhausen aufgelaufen. */
  position: relative;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  color: #fff; text-decoration: none; border: 0;
  vertical-align: middle;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.netzzeichen {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 1.3rem; height: 1.3rem;
}
.netzmarke--facebook { background: #1877F2; }
.netzmarke--youtube  { background: #FF0000; }
.netzmarke:hover, .netzmarke:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .55);
}
.netzmarke:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .netzmarke { transition: none; } .netzmarke:hover { transform: none; } }

/* ---------------------------------------------------------------------------
   Parallaxeband "Heiraten nahe Erfurt"

   Am Original gemessen (24.09.2026), nachdem ein erster Versuch daneben lag:
   Ich hatte eine Zweispalten-Anordnung gebaut - Bild in einem weissen Kasten
   links, cremefarbene Karte rechts. Das Original macht etwas anderes, naemlich
   DREI EBENEN uebereinander:

     1. das Foto des Saals als Bandhintergrund, hell und unangetastet
     2. das freigestellte Brautpaar davor - es steht IM Raum und ragt oben
        ueber die Bandkante hinaus, ohne Rahmen und ohne eigenen Grund
     3. rechts ein durchscheinender Textkasten mit einer abgesetzten weissen
        Umrisslinie

   Die Zahlen sind aus Stefans Bildschirmfoto abgetastet, nicht geschaetzt:
   Fuellung 88 % Weiss (gemessen 0,85-0,91 an mehreren Stellen), Umrisslinie
   1 px Weiss mit 14 px Abstand, Text #333. Der Bandhintergrund bleibt HELL -
   ein dunkler Verlauf davor war der zweite Grund, warum es anders wirkte.
   --------------------------------------------------------------------------- */
.parallaxband {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(19rem, 34vw, 27.5rem);
  /* Platz nach oben, damit der Ueberstand des Paares in die Luft ragt und
     nicht in den Text des Abschnitts darueber. Gemessen: Der Ueberstand betraegt
     rund 22 % der Bandhoehe, bei 1440 px also 104 px - mehr Abstand ist nur
     leere Flaeche. Zusammen mit der Regel unten (der Abschnitt davor gibt seinen
     unteren Innenabstand ab) schrumpft die Luecke von 232 auf rund 110 px. */
  margin-top: clamp(3.5rem, 10vw, 7rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background-color: #cdb79a;
  /* KEIN overflow:hidden hier - das wuerde den Ueberstand des Paares kappen.
     Beschnitten wird nur der Bildgrund, in seinem eigenen Rahmen. */
}

/* ---------------------------------------------------------------------------
   Der Parallaxeeffekt

   Am Original gemessen (24.09.2026), nicht nachempfunden. Das Original laeuft
   auf dem Divi-Theme; dessen Hintergrundelement wurde im Browser ausgelesen:

       Bandhoehe        451 px
       Grundelement     721 px  (also 270 px hoeher = 30 % der Fensterhoehe)
       Bewegung         translateY waechst um exakt 90 px je 300 px Blaetterweg
       ---------------------------------------------------------------------
       FAKTOR           0,30 - das Bild wandert mit 70 % der Seitengeschwindigkeit

   Vorher stand hier background-attachment:fixed. Das entspricht Faktor 1,0:
   Das Bild steht voellig still. Es sieht verwandt aus, ist aber ein anderer
   Effekt - und genau das hat Stefan gesehen.

   Umgesetzt ohne JavaScript ueber eine blaettergesteuerte Animation
   (animation-timeline: view()). Der Weg --parallaxweg ist so gewaehlt, dass
   sich derselbe Faktor ergibt: Ueber die Strecke, auf der das Band durchs
   Fenster laeuft (Fensterhoehe + Bandhoehe), verschiebt sich der Grund um
   0,30 dieser Strecke. Kennt ein Browser die Zeitachse nicht, springt ein
   kleines Skript in js/main.js mit derselben Rechnung ein; ohne beides steht
   das Band ruhig da - das sieht gut aus, nur eben ohne Bewegung.
   --------------------------------------------------------------------------- */
/* Der Abschnitt unmittelbar VOR dem Band braucht seinen unteren Innenabstand
   nicht: Das Band bringt seinen eigenen Abstand mit, und das Paar fuellt den
   Raum ohnehin. Ohne diese Regel standen 88 px Polster und 144 px Aussenabstand
   uebereinander - eine leere Flaeche, in der rechts vom Paar gar nichts steht. */
.abschnitt:has(+ .parallaxband) { padding-bottom: 0; }

.parallaxband__grundrahmen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.parallaxband__grund {
  --parallaxweg: 45vh;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + var(--parallaxweg));
  background-position: 50% 0;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, calc(-1 * var(--parallaxweg)), 0);
}

@keyframes parallaxlauf {
  from { transform: translate3d(0, calc(-1 * var(--parallaxweg)), 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@supports (animation-timeline: view()) {
  /* Die Zeitachse haengt am ABSCHNITT, nicht am Bildgrund.

     Warum: Der Grund steckt in einem Rahmen mit overflow:hidden (er muss
     beschnitten werden). Damit ist dieser Rahmen selbst ein Blaetterbehaelter,
     und ein "view()" am Kind misst dessen Lage INNERHALB DES RAHMENS - dort
     bewegt es sich nie. Die Animation hing korrekt am Element und stand
     trotzdem still (gemessen: transform blieb bei -263,141 px, ueber 1200 px
     Blaetterweg unveraendert). Eine benannte Zeitachse am Abschnitt wird
     dagegen gegen das Dokument gerechnet. 24.09.2026. */
  .parallaxband {
    view-timeline-name: --bandlauf;
    view-timeline-axis: block;
  }
  .parallaxband__grund {
    animation: parallaxlauf linear both;
    animation-timeline: --bandlauf;
    animation-range: entry 0% exit 100%;
  }
}

/* Wer "Bewegung reduzieren" eingestellt hat, bekommt ein ruhiges Bild. Der
   Grund steht dann mittig statt am oberen Rand seines Ueberhangs. */
@media (prefers-reduced-motion: reduce) {
  .parallaxband__grund {
    animation: none;
    height: 100%;
    transform: none;
    background-position: 50% 50%;
  }
}

/* Ebene 2: das freigestellte Paar. Hoehe ueber 100 % - genau daraus entsteht
   der Ueberstand nach oben, der dem Bild seine Tiefe gibt. */
.parallaxband__paar {
  position: absolute;
  display: block;
  left: 4%;
  bottom: 0;
  height: 122%;
  width: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .18));
}
.parallaxband__paar img { display: block; height: 100%; width: auto; }

.parallaxband .innen { position: relative; z-index: 3; width: 100%; }

/* Ebene 3: der durchscheinende Kasten. */
.parallaxband__kasten {
  margin-left: auto;
  width: min(100%, 40rem);
  background: rgba(255, 255, 255, .88);
  padding: clamp(1.7rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 3.2rem);
  text-align: center;
  color: #333;
  /* Die Umrisslinie ist im Original eine eigene Linie MIT Abstand zum Kasten -
     kein Rahmen am Kasten selbst. outline-offset macht genau das. */
  outline: 1px solid rgba(255, 255, 255, .92);
  outline-offset: 14px;
}
.parallaxband__kasten h2 { margin: 0 0 .8rem; color: #333; }
.parallaxband__kasten p { color: #5b5b5b; }
/* .knopfzeile ist ein Flex-Element. Ein text-align:center am Kasten richtet
   deshalb die Knoepfe NICHT mittig aus - Flex kuemmert sich nicht um
   text-align. Das muss justify-content tun. */
.parallaxband__kasten .knopfzeile { margin-bottom: 0; justify-content: center; }

/* Telefon: Das Paar und ein Textkasten passen nebeneinander nicht auf 390 px.
   Das Paar rueckt an den Rand und der Kasten darunter - so bleibt beides zu
   sehen, statt eines davon zu verstecken. */
@media (max-width: 767px) {
  .parallaxband {
    display: block;
    margin-top: clamp(3rem, 16vw, 5rem);
    padding-top: clamp(9rem, 44vw, 15rem);
  }
  /* Breite statt Hoehe steuern: ein <picture> hat keine eigene Hoehe, und
     "height:auto" am Behaelter plus "height:100%" am Bild ergibt null. */
  .parallaxband__paar { height: auto; width: 46%; left: 2%; bottom: auto; top: -8%; }
  .parallaxband__paar img { width: 100%; height: auto; }
  .parallaxband__kasten { width: 100%; outline-offset: 8px; }
}

/* ===========================================================================
   Zimmerpreise: Spartage und Wochenende (20.10.2026)
   Preisliste ab KW 43/2026. Wunsch des Hofs: der Satz "Ab 3 Naechten gilt
   der Spartagepreis" soll gut platziert sein - deshalb steht er als eigenes
   dunkles Band VOR der Tabelle (auf dem Telefon darueber), nicht als Fussnote.
   Daten aus Zimmer -> Preise im Adminbereich (Tabellen zimmerpreis,
   zimmerpreisinfo).
   =========================================================================== */
.zimmerpreise { margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.zimmerpreise > h2 { margin-bottom: 1.1rem; }
.zimmerpreise__raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 2.4vw, 1.6rem); align-items: stretch;
}

.spar-band {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--gruen); color: var(--creme);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.spar-band::after {            /* feine Goldlinie innen, wie ein Passepartout */
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(240, 180, 108, .45); border-radius: calc(var(--radius) - 2px);
  pointer-events: none;
}
.spar-band__zahl {
  flex: 0 0 auto; margin: 0; width: 5.6rem; height: 5.6rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--gold); color: var(--gruen-tief); line-height: 1;
}
.spar-band__zahl span { font: 400 2.9rem/1 var(--serif); }
.spar-band__zahl small {
  margin-top: .15rem; font: 600 .64rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
}
.spar-band__text p { margin: 0; }
.spar-band__titel {
  font: 400 clamp(1.35rem, 1.1rem + .9vw, 1.75rem)/1.2 var(--serif);
  color: var(--gold); margin-bottom: .45rem !important;
}
.spar-band__text p + p { color: var(--creme); font-size: 1.05rem; line-height: 1.5; }
.spar-band__titel { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; }
.spar-band__beispiel {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem;
  margin-top: 1.2rem !important; padding-top: .9rem;
  border-top: 1px solid rgba(240, 180, 108, .45); font-size: .95rem !important;
}
.spar-band__beispiel strong { color: var(--gold); font-size: 1.15rem; font-weight: 600; }
.spar-band__beispiel s { opacity: .75; }

.zimmerpreise__tabelle {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(.6rem, 1.6vw, 1rem) clamp(.8rem, 2vw, 1.4rem);
}
.preistabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.preistabelle th, .preistabelle td { padding: .52rem .55rem; text-align: right; vertical-align: baseline; }
.preistabelle thead th {
  font: 600 .74rem/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-leise); border-bottom: 2px solid var(--linie);
}
.preistabelle tbody th { text-align: left; font-weight: 600; }
.preistabelle tbody th small { display: block; font-weight: 400; font-size: .8rem; color: var(--text-leise); }
.preistabelle tbody tr + tr > * { border-top: 1px solid rgba(217, 164, 92, .4); }
.preistabelle .preistabelle__spar { background: rgba(240, 180, 108, .16); }
.preistabelle thead .preistabelle__spar { color: var(--gold-text); border-radius: 4px 4px 0 0; }
.preistabelle tbody .preistabelle__spar { font-weight: 700; color: var(--gruen); }
.preistabelle__gleich td { color: var(--text-leise); }
.preistabelle__gleich .preistabelle__spar { font-weight: 600; }
.zimmerpreise__fuss { margin: .7rem .55rem .2rem; font-size: .86rem; color: var(--text-leise); }

/* Zwei Preise an Kachel und Einzelseite */
.preis-zwei { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; }
.preis-zwei small { font-weight: 400; font-size: .8rem; color: var(--text-leise); }
.preis-zwei__spar strong { font-size: 1.08em; color: var(--gruen); }
.preis-zwei__we { font-weight: 600; }
.preis-zwei + .veranstaltung-preishinweis { display: block; margin-top: .15rem; }

/* Kleine Fassung des Spartage-Hinweises: Einzelseite und Anfrageformular */
.spar-zeile {
  display: flex; gap: .7rem; align-items: center; margin: .7rem 0 .9rem;
  padding: .55rem .8rem; border-radius: var(--radius);
  background: rgba(240, 180, 108, .22); border: 1px solid var(--gold-linie);
  font-size: .95rem; line-height: 1.4;
}
.spar-zeile__marke {
  flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gruen); color: var(--gold); font: 400 1.05rem/1 var(--serif);
}
.zimmer-eckdaten .spar-zeile { margin-bottom: 0; }

@media (max-width: 860px) {
  .zimmerpreise__raster { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .preistabelle th, .preistabelle td { padding: .48rem .3rem; }
  .preistabelle thead th { font-size: .66rem; letter-spacing: .05em; }
}

/* ---- Popup (tpl/include_popup.tpl.htm, 22.10.2026) ---------------------------------- */
.hauspopup{position:fixed;inset:0;margin:auto;z-index:1000;max-width:min(560px,92vw);max-height:92vh;padding:0;
  border:0;border-radius:var(--radius);background:var(--karte);color:var(--tinte);box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:auto}
.hauspopup::backdrop{background:rgba(43,52,16,.55)}
.hauspopup__inhalt{padding:0}
.hauspopup__inhalt img{display:block;width:auto;max-width:100%;max-height:calc(92vh - 5.5rem);height:auto;margin:0 auto}
.hauspopup__inhalt p{margin:0;padding:.9rem 1.2rem;text-align:center;font-family:var(--sans)}
.hauspopup__inhalt p + p{padding-top:0}
.hauspopup__inhalt a.knopf{display:inline-block;padding:.6rem 1.4rem;border-radius:999px;background:var(--gruen);color:#fff;text-decoration:none;font-weight:600}
.hauspopup__inhalt a.knopf:hover,.hauspopup__inhalt a.knopf:focus-visible{background:var(--gruen-tief)}
.hauspopup__zu-form{position:sticky;top:0;height:0;z-index:2}
.hauspopup__zu{position:absolute;right:.5rem;top:.5rem;width:2.5rem;height:2.5rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--tinte);font-size:1.6rem;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.hauspopup__zu:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Zimmerliste: ganz leichter Zoom aufs Bild beim Ueberfahren der Karte (23.10.2026, Stefan) */
.zimmer-karte__bildbereich { overflow: hidden; }
.zimmer-karte__bild { transition: transform .5s ease; }
.zimmer-karte:hover .zimmer-karte__bild,
.zimmer-karte:focus-within .zimmer-karte__bild { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .zimmer-karte__bild { transition: none; }
  .zimmer-karte:hover .zimmer-karte__bild, .zimmer-karte:focus-within .zimmer-karte__bild { transform: none; }
}

/* Veranstaltungsliste: derselbe leichte Zoom wie bei den Zimmern (23.10.2026, Stefan).
   Rahmen und Rundung wandern vom Bild auf den Bildbereich, sonst zoomte der Rahmen mit. */
.veranstaltung-karte__bildbereich {
  overflow: hidden; align-self: start; line-height: 0;
  border: 1px solid rgba(60, 72, 24, .16); border-radius: var(--radius); background: var(--karte);
}
.veranstaltung-karte__bild { border: 0; border-radius: 0; transition: transform .5s ease; }
.veranstaltung-karte:hover .veranstaltung-karte__bild,
.veranstaltung-karte:focus-within .veranstaltung-karte__bild { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .veranstaltung-karte__bild { transition: none; }
  .veranstaltung-karte:hover .veranstaltung-karte__bild, .veranstaltung-karte:focus-within .veranstaltung-karte__bild { transform: none; }
}

/* ------------------------------------------------------------------
   Unsere Haeuser in der Nachbarschaft — Startseite (27.10.2026)
   Wunsch von Oliver Bosse: Alte Baeckerei, Feriendorf Kleinfahner und
   Landpension Minna sichtbar machen. Eigene Klassen statt .karte, weil
   das Hauszeichen als runde Marke ueber dem Kartenrand sitzt und die
   Karte mittig gesetzt ist. Seit 28.10.2026 mit echtem Hausfoto als
   Kartenkopf; die Marke ueberlappt dessen Unterkante.
   ------------------------------------------------------------------ */
.haeuser__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
  margin-top: 3.4rem;
}
.haus {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--karte);
  border: 1px solid rgba(60, 72, 24, .14);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 0 0 1.7rem;
  overflow: hidden;            /* Foto an der Kartenrundung beschneiden */
  text-align: center;
  transition: transform .4s ease, box-shadow .4s ease;
}
.haus:hover, .haus:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(42, 42, 32, .08), 0 22px 44px -22px rgba(42, 42, 32, .5);
}
.haus__bild { margin: 0; line-height: 0; }
.haus__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.haus__marke {
  position: relative;
  z-index: 2;
  margin: -3.1rem 0 0;
  line-height: 0;
}
.haus__marke img {
  margin-inline: auto;         /* img ist im Hausstil display:block, text-align greift nicht */
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: .25rem;
  border: 1px solid var(--gold-linie);
  box-shadow: 0 8px 20px -12px rgba(42, 42, 32, .7);
}
.haus__leib { display: flex; flex-direction: column; flex: 1; padding: .9rem 1.6rem 0; }
.haus__leib h3 { margin: 0 0 .25em; }
.haus__ort {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 .9rem;
}
.haus .haken {
  text-align: left;
  display: inline-block;
  margin: .5rem auto 1.4rem;
}
.haus__fuss { margin: auto 0 0; }

/* Der Gruppenkasten: dunkel abgesetzt, damit der Hinweis nicht in der
   Kartenreihe untergeht. Umrissknopf wird hier hell, sonst waere das
   Gruen des Hausstils auf dunklem Grund nicht lesbar. */
.haeuser__gruppe {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding: clamp(1.7rem, 4vw, 2.8rem);
  background: var(--gruen-tief);
  color: var(--creme);
  border-radius: var(--radius);
  text-align: center;
}
.haeuser__gruppe .vorzeile { color: var(--gold); }
.haeuser__gruppe h3 { color: var(--creme); margin: 0 0 .6rem; }
.haeuser__gruppe p { max-width: 46rem; margin-inline: auto; }
.haeuser__gruppe .btn--umriss { color: var(--creme); border-color: var(--creme); }
.haeuser__gruppe .btn--umriss:hover { background: var(--creme); color: var(--gruen-tief); }

@media (max-width: 860px) {
  .haeuser__raster { grid-template-columns: 1fr; gap: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .haus { transition: none; }
  .haus:hover, .haus:focus-within { transform: none; }
}