/* ===========================================================================
   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:   #8F5F14;   /* Goldton, lesbar als Schrift */
  --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);
}

/* 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; }

/* 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); }

.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; }
  .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; }


/* 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; }


/* 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); }

/* ===========================================================================
   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;
}







/* Ganz oben in dein CSS einfügen */
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

/* Und diese Schriftart exakt für deine Flaggen definieren */
.aktuelle-flagge, .sprache-liste a {
  font-family: 'Noto Color Emoji', -apple-system, 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); }
.veranstaltung-karte__bild { width: 100%; height: 100%; 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; }
.snippet-wrapper { margin-bottom: 1.4rem; }
.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.
   =========================================================================== */
.ib-seitenmenue {
  margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem);
  padding: 1rem 1.2rem;
  background: var(--grund);
  border-left: 3px solid var(--ton);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ib-seitenmenue ul { list-style: none; margin: 0; padding: 0; }
.ib-seitenmenue li { padding: .22rem 0; }
.ib-seitenmenue a { text-decoration: none; color: var(--text); }
.ib-seitenmenue a:hover { color: var(--ton-dunkel); text-decoration: underline; }

.ib-menue-e2 { padding-left: 1rem; }
.ib-menue-e3 { padding-left: 2rem; font-size: .95rem; }

.ib-menue-offen > a { font-weight: 600; color: var(--ton-dunkel); }
.ib-menue-hier > a {
  font-weight: 600; color: var(--ton-dunkel);
  box-shadow: inset 2px 0 0 var(--ton); padding-left: .5rem; display: inline-block;
}

/* ===========================================================================
   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.
   =========================================================================== */
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; }

.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 unter den Feldern, ueber die volle Breite der Kachel. */
.shop-kaufform__fuss { flex-basis: 100%; margin: .1rem 0 0; }
.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; }
}