/* Begruendung: AENDERUNGEN.md */

/* ---------------------------------------------------------------- Variablen */
:root {
  /* Farben - Vorgabe aus Farbcodes.rtf */
  --gruen:          #264233;
  --gruen-dunkel:   #1B3025;
  --gruen-hell:     #3A5C48;
  --gold:           #C0A668;
  /* Begruendung: AENDERUNGEN.md */
  --gold-dunkel:    #7E6127;
  /* Begruendung: AENDERUNGEN.md */
  --gold-auf-dunkel: #C9B078;
  --creme:          #F6F3ED;
  --creme-tief:     #EDE8DE;
  --weiss:          #FFFFFF;

  --text:           #1F2A23;
  --text-leise:     #55645B;
  --text-auf-dunkel: #F6F3ED;
  --text-leise-dunkel: #C3CEC7;

  --linie:          #DFD9CC;
  --linie-dunkel:   rgba(246, 243, 237, 0.22);

  /* Typografie */
  --schrift: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zeilenhoehe-text: 1.75;
  --zeilenhoehe-titel: 1.18;

  /* Masse */
  --breite: 1200px;
  --breite-schmal: 780px;
  --rand: 24px;

  --raum-xs: 8px;
  --raum-s:  16px;
  --raum-m:  28px;
  --raum-l:  48px;
  --raum-xl: 80px;
  --abschnitt: clamp(56px, 8vw, 104px);

  --radius:   4px;
  --radius-l: 8px;

  --schatten:      0 2px 12px rgba(31, 42, 35, 0.07);
  --schatten-hoch: 0 8px 28px rgba(31, 42, 35, 0.12);

  --uebergang: 180ms ease;

  /* Begruendung: AENDERUNGEN.md */
  --bw-spalten: 3;
}

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

html {
  /* clip statt hidden: hidden erzeugt einen Scrollport und wuerde ein
     position: sticky am Kopf aufheben. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  font-weight: 400;
  line-height: var(--zeilenhoehe-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

/* Sprungmarke fuer die Tastaturbedienung */
.zum-inhalt {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gruen);
  color: var(--text-auf-dunkel);
  padding: 12px 20px;
  z-index: 200;
}
.zum-inhalt:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- Typografie */
/* Begruendung: AENDERUNGEN.md */
h1, h2, h3, h4 {
  font-family: var(--schrift);
  line-height: var(--zeilenhoehe-titel);
  color: var(--gruen);
  margin: 0 0 var(--raum-s);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); }
h4 { font-size: 1.075rem; letter-spacing: 0; }

p { margin: 0 0 var(--raum-s); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--gruen); }

/* Kleine Zeile ueber der Ueberschrift - bei Wix das goldene Auge des Abschnitts */
.augbraue {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dunkel);
  margin-bottom: var(--raum-xs);
}

.vorspann {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--text-leise);
  max-width: 62ch;
}

.mittig { text-align: center; }
.mittig .vorspann { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------- Layout */
.behaelter {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}

.behaelter-schmal { max-width: var(--breite-schmal); }

.abschnitt {
  padding-top: var(--abschnitt);
  padding-bottom: var(--abschnitt);
}
.abschnitt-eng { padding-top: var(--raum-xl); padding-bottom: var(--raum-xl); }

.flaeche-creme  { background: var(--creme); }
.flaeche-weiss  { background: var(--weiss); }
.flaeche-tief   { background: var(--creme-tief); }
.flaeche-gruen  { background: var(--gruen); color: var(--text-auf-dunkel); }
.flaeche-gruen h1,
.flaeche-gruen h2,
.flaeche-gruen h3,
.flaeche-gruen h4 { color: var(--text-auf-dunkel); }
.flaeche-gruen .vorspann { color: var(--text-leise-dunkel); }
.flaeche-gruen strong { color: var(--gold); }
/* Die Augbraue steht sonst im dunklen Gold fuer helle Flaechen und
   verschwindet auf dem Gruen (gemessen 1,90). */
.flaeche-gruen .augbraue { color: var(--gold-auf-dunkel); }
/* Begruendung: AENDERUNGEN.md */
.flaeche-gruen a:not(.knopf) { color: var(--gold); }

/* Reihe = Elementor-Flex-Container. Spalten immer flex: 1 1 min(Xpx, 100%),
   damit sie ohne Medienabfrage umbrechen. */
.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-m);
}
.reihe-weit  { gap: var(--raum-l); }
.reihe-mitte { align-items: center; }
/* Gleiche Kachelhoehen regelt der Behaelter, nicht die Kachel */
.reihe-strecken { align-items: stretch; }

.spalte     { flex: 1 1 min(300px, 100%); min-width: 0; }
.spalte-halb{ flex: 1 1 min(420px, 100%); min-width: 0; }
.spalte-breit{ flex: 1.4 1 min(420px, 100%); min-width: 0; }
.spalte-schmal{ flex: 0.8 1 min(300px, 100%); min-width: 0; }

/* ---------------------------------------------------------------- Schaltflaeche */
/* Die Schaltflaeche im Kopf faellt eine Stufe kleiner aus als im Inhalt -
   sonst passen Menue, Rufnummer und Sprachwahl nicht in den 1200er-Behaelter. */
.kopf .knopf { padding: 12px 18px; font-size: 0.88rem; white-space: nowrap; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--schrift);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang),
              border-color var(--uebergang), transform var(--uebergang);
}
.knopf:hover  { transform: translateY(-1px); text-decoration: none; }
.knopf:active { transform: translateY(0); }

.knopf-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gruen-dunkel);
}
.knopf-gold:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); color: var(--weiss); }

/* Begruendung: AENDERUNGEN.md */


.knopf-linie {
  background: transparent;
  border-color: var(--gold-dunkel);
  color: var(--gold-dunkel);
}
@media (hover: hover) {
  .knopf-linie:hover { background: var(--gold-dunkel); color: var(--weiss); }
}


.knopf-linie-hell {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.knopf-linie-hell:hover { background: var(--gold); color: var(--gruen-dunkel); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--raum-s); }
.mittig .knopf-reihe { justify-content: center; }

/* ------------------------------------------------------------------- Karten */
/* ------------------------------------------------------------- Verborgenes */
/* Begruendung: AENDERUNGEN.md */
[hidden] { display: none !important; }

.karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  /* Begruendung: AENDERUNGEN.md */
  border: 2px solid var(--linie);
  border-radius: var(--radius-l);
  padding: var(--raum-m);
  transition: box-shadow var(--uebergang), border-color var(--uebergang);
}
.karte:hover { box-shadow: var(--schatten-hoch); border-color: var(--gold); }

/* Der Text waechst, damit Fusszeilen der Karten auf einer Linie stehen -
   die gleiche Hoehe kommt vom Behaelter (.reihe-strecken). */
.karte-inhalt { flex: 1 1 auto; }
.karte h3 { margin-bottom: var(--raum-xs); }
.karte p  { color: var(--text-leise); }

.karte-zahl {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-dunkel);
  margin-bottom: var(--raum-xs);
}

/* Symbolkachel - in Elementor eine Icon-Box */
.symbol {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(192, 166, 104, 0.16);
  color: var(--gruen);
  margin-bottom: var(--raum-s);
}
.symbol svg { width: 22px; height: 22px; }
.flaeche-gruen .symbol { background: rgba(192, 166, 104, 0.2); color: var(--gold); }

/* ------------------------------------------------------------------ Hero */
/* Begruendung: AENDERUNGEN.md */
.hero {
  position: relative;
  background:
    linear-gradient(to bottom,
      rgba(16, 23, 17, 0.55) 0%,
      rgba(16, 23, 17, 0.00) 42%,
      rgba(16, 23, 17, 0.35) 100%),
    var(--gruen-dunkel);
  color: var(--text-auf-dunkel);
  overflow: hidden;
}
/* Eine goldene Haarlinie am Fuss des Kopfes - dieselbe Kante, die auf der
   Buehne die Zusagen vom Satzblock trennt. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right,
    transparent, var(--gold-auf-dunkel) 22%, var(--gold-auf-dunkel) 78%, transparent);
  opacity: .5;
}
.hero .behaelter {
  position: relative;
  z-index: 2;
  padding-top: clamp(64px, 9vw, 116px);
  padding-bottom: clamp(64px, 9vw, 116px);
}
.hero h1 { color: var(--text-auf-dunkel); }
.hero .vorspann { color: var(--text-leise-dunkel); }
.hero .augbraue { color: var(--gold-auf-dunkel); }

.hero-bild {
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-hoch);
  width: 100%;
  object-fit: cover;
  /* Begruendung: AENDERUNGEN.md */
  object-position: 50% 0;
}

/* Zierlinie unter der Hero-Ueberschrift */
.zierlinie {
  width: 64px;
  height: 3px;
  background: var(--gold);
  border: 0;
  margin: var(--raum-s) 0 var(--raum-m);
}
.mittig .zierlinie { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- Merkmale */
.merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-s) var(--raum-l);
  list-style: none;
  margin: var(--raum-m) 0 0;
  padding: 0;
}
.merkmale li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.97rem;
  font-weight: 500;
}
.merkmale svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; }

/* Aufzaehlung mit goldenem Haken */
.haken-liste { list-style: none; margin: 0 0 var(--raum-s); padding: 0; }
.haken-liste li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

/* ------------------------------------------------------------------ Gebiet */
.orte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-s);
  margin-top: var(--raum-m);
  padding: 0;
  list-style: none;
}
.orte li {
  padding: 9px 20px;
  border: 1px solid var(--linie-dunkel);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
}
.orte li.ist-hier {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gruen-dunkel);
  font-weight: 700;
}

/* ---------------------------------------------------------------- Akkordeon */
.akkordeon { border-top: 1px solid var(--linie); }
.akkordeon details {
  border-bottom: 1px solid var(--linie);
}
.akkordeon summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raum-s);
  padding: var(--raum-s) 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gruen);
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary:hover { color: var(--gold-dunkel); }
.akkordeon summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 0.45em;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform var(--uebergang);
}
.akkordeon details[open] summary::after { transform: rotate(-135deg); }
.akkordeon .antwort {
  padding: 0 0 var(--raum-m);
  color: var(--text-leise);
  max-width: 68ch;
}

/* ----------------------------------------------------------------- Formular */
.formular { display: flex; flex-wrap: wrap; gap: var(--raum-s); }
.feld { flex: 1 1 min(260px, 100%); display: flex; flex-direction: column; min-width: 0; }
.feld-voll { flex: 1 1 100%; }

.feld label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gruen);
  margin-bottom: 6px;
}
.feld .pflicht { color: var(--gold-dunkel); }

.feld input,
.feld select,
.feld textarea {
  font-family: var(--schrift);
  font-size: 1rem;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 13px 15px;
  width: 100%;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(192, 166, 104, 0.22);
}
.feld .hinweis { font-size: 0.83rem; color: var(--text-leise); margin-top: 5px; }

.kaestchen {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.93rem;
  line-height: 1.55;
}
.kaestchen input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--gruen); }
.kaestchen label { font-weight: 400; color: var(--text); margin: 0; }

/* Honigtopf - fuer Menschen unsichtbar, fuer Skripte ausfuellbar.
   Sichtbarkeit ueber Klasse, nie ueber inline style. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-meldung {
  flex: 1 1 100%;
  display: none;
  padding: 15px 18px;
  border-radius: var(--radius);
  font-size: 0.96rem;
}
.formular-meldung.ist-sichtbar { display: block; }
.formular-meldung.ist-erfolg  { background: rgba(38, 66, 51, 0.1);  border: 1px solid var(--gruen); color: var(--gruen); }
.formular-meldung.ist-fehler  { background: rgba(159, 61, 46, 0.09); border: 1px solid #9F3D2E; color: #7E3123; }

/* --------------------------------------------------------------------- Kopf */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--creme);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-m);
  min-height: 76px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.kopf-logo { flex: 0 0 auto; display: inline-flex; }
.kopf-logo img { width: 150px; height: auto; }

.navigation { display: flex; align-items: center; gap: var(--raum-s); }
.menue {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menue a {
  /* Ohne nowrap bricht "Über mich" in zwei Zeilen und zieht den Kopf auf.
     Gemessen bei 1280 px: zwei Menuezeilen statt einer. */
  white-space: nowrap;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--uebergang), border-color var(--uebergang);
}
.menue a:hover { color: var(--gruen); border-bottom-color: var(--gold); }
.menue a.ist-hier { color: var(--gruen); font-weight: 700; border-bottom-color: var(--gold); }

/* Begruendung: AENDERUNGEN.md */
.menue li { position: relative; }

.hat-untermenue > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}

.untermenue {
  display: none;
  position: absolute;
  left: -14px;
  top: 100%;
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  z-index: 110;
}
.menue li:hover > .untermenue,
.menue li:focus-within > .untermenue { display: block; }

.untermenue a {
  display: block;
  padding: 9px 18px;
  border-bottom: 0;
  font-weight: 400;
  white-space: nowrap;
}
.untermenue a:hover { background: var(--creme); color: var(--gruen); border-bottom: 0; }
.untermenue a.ist-hier { border-bottom: 0; background: var(--creme); }

.kopf-rechts { display: flex; align-items: center; gap: var(--raum-s); }

.kopf-telefon {
  display: inline-flex;
  align-items: center;
  /* Begruendung: AENDERUNGEN.md */
  padding-block: 10px;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gruen);
  text-decoration: none;
  white-space: nowrap;
}
.kopf-telefon svg { width: 17px; height: 17px; color: var(--gold-dunkel); }

/* Sprachumschalter Deutsch / Russisch */
/* Begruendung: AENDERUNGEN.md */
.sprachen { display: flex; align-items: center; gap: 6px; font-size: 0.875rem;
            font-weight: 600; margin: 0; }
.sprachen a {
  color: var(--text-leise);
  text-decoration: none;
  /* Begruendung: AENDERUNGEN.md */
  padding: 10px 9px;
  border-radius: var(--radius);
}
.sprachen a:hover { color: var(--gruen); background: var(--creme-tief); }
.sprachen a.ist-hier { color: var(--gruen-dunkel); background: var(--gold); }
.sprachen .teiler { color: var(--linie); }

/* Menueknopf fuer schmale Bildschirme */
.menue-knopf {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--gruen);
}
.menue-knopf svg { width: 22px; height: 22px; }
.menue-knopf .symbol-schliessen { display: none; }
.menue-knopf[aria-expanded="true"] .symbol-schliessen { display: block; }
.menue-knopf[aria-expanded="true"] .symbol-menue { display: none; }

/* --------------------------------------------------------------------- Fuss */
.fuss {
  background: var(--gruen-dunkel);
  color: var(--text-leise-dunkel);
  padding-top: var(--raum-xl);
  padding-bottom: var(--raum-m);
  font-size: 0.95rem;
}
.fuss h4 {
  color: var(--text-auf-dunkel);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--raum-s);
}
.fuss a { color: var(--text-leise-dunkel); text-decoration: none; }
.fuss a:hover { color: var(--gold); text-decoration: underline; }
.fuss-logo { width: 190px; margin-bottom: var(--raum-s); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 9px; }
/* Begruendung: AENDERUNGEN.md */
.fuss-kontakt .zeile-mit-symbol { display: flex; align-items: center; gap: 14px; }
.fuss-kontakt .zeile-mit-symbol > .symbol { flex: 0 0 auto; }

.fuss .zeile-mit-symbol { display: flex; align-items: flex-start; gap: 10px; }
.fuss .zeile-mit-symbol svg { width: 16px; height: 16px; color: var(--gold); flex: 0 0 auto; margin-top: 5px; }

.fuss-schluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-s);
  margin-top: var(--raum-l);
  padding-top: var(--raum-m);
  border-top: 1px solid var(--linie-dunkel);
  font-size: 0.875rem;
}
.fuss-rechtliches { display: flex; flex-wrap: wrap; gap: var(--raum-s); }

/* ------------------------------------------------------------------- Blog */
.beitrag-karte { overflow: hidden; padding: 0; }
.beitrag-karte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.beitrag-karte .karte-inhalt { padding: var(--raum-m); }
.beitrag-meta {
  font-size: 0.83rem;
  color: var(--text-leise);
  margin-bottom: var(--raum-xs);
  letter-spacing: 0.02em;
}
.beitrag-karte h3 a { color: var(--gruen); text-decoration: none; }
.beitrag-karte h3 a:hover { color: var(--gold-dunkel); }

/* Fliesstext eines Beitrags */
.beitragstext { max-width: 68ch; }
.beitragstext h2 { margin-top: var(--raum-l); }
.beitragstext h3 { margin-top: var(--raum-m); }
.beitragstext ul, .beitragstext ol { padding-left: 22px; margin-bottom: var(--raum-s); }
.beitragstext li { margin-bottom: 8px; }
.beitragstext blockquote {
  margin: var(--raum-m) 0;
  padding: var(--raum-s) var(--raum-m);
  border-left: 3px solid var(--gold);
  background: var(--weiss);
  color: var(--text-leise);
  font-size: 1.05rem;
}

/* ------------------------------------------------------- Hinweis am Beitrag */
/* Begruendung: AENDERUNGEN.md */
.beitrag-hinweis {
  margin-top: var(--raum-l);
  padding: var(--raum-xs) 0 var(--raum-xs) var(--raum-s);
  border-left: 3px solid var(--gold-dunkel);
}
.beitrag-hinweis p { margin: 0; color: var(--text-leise); }


/* ------------------------------------------------------------- Bildbereiche */

/* Begruendung: AENDERUNGEN.md */

main img:not(.buehne-bild):not([src*="siegel"]):not([src*="logo"]) {
  filter: saturate(0.96) sepia(0.14);
}

/* Rundung und Rahmen dagegen haengen sehr wohl an der Form: Das runde
   Portraet behaelt seine 50 % und seinen hellen Rand auf dem dunklen Grund. */
/* Begruendung: AENDERUNGEN.md */
.spalte > img,
.bildrahmen img { border-radius: var(--radius-l); }


.bild-gerahmt {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.bild-hoch { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.bild-quer { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Begruendung: AENDERUNGEN.md */


@media (max-width: 1240px) {
  /* Abstaende zuerst: Sie kosten nichts an Lesbarkeit. 6 px weniger je Luecke
     mal fuenf Luecken sind 30 px, der Behaelterabstand bringt weitere 16. */
  .menue { gap: 12px; }
  .kopf-innen { gap: 20px; }
  .kopf-rechts { gap: 14px; }
}
@media (max-width: 1140px) {
  /* Begruendung: AENDERUNGEN.md */
  .menue a { font-size: 14px; padding-block: 12px; }
  .kopf .knopf { font-size: .84rem; padding-inline: 18px; }
}
/* Begruendung: AENDERUNGEN.md */
@media (max-width: 1120px) {
  /* Begruendung: AENDERUNGEN.md */
  .kopf-tel-text {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  /* Waagerecht knapper, senkrecht groesser: Ohne die Ziffern ist der Link nur
     noch das Symbol, und 37 px sind zu wenig zum Treffen. */
  .kopf-telefon { padding-inline: 8px; padding-block: 14px; }
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 1009px) {
  .kopf-logo img { width: 140px; }
  .menue-knopf { display: inline-flex; }

  .navigation {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-hoch);
    padding: var(--raum-s) var(--rand) var(--raum-m);

    /* Begruendung: AENDERUNGEN.md */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    /* Damit am Ende der Liste nicht die Seite dahinter weiterscrollt. */
    overscroll-behavior: contain;
  }
  /* Sichtbarkeit ueber die Klasse, damit kein inline style sie aussperrt */
  .navigation.ist-offen { display: flex; }

  .menue { flex-direction: column; align-items: stretch; gap: 0; }
  .menue li { border-bottom: 1px solid var(--linie); }
  .menue a { display: block; padding: 13px 0; border-bottom: 0; }
  .menue a.ist-hier { border-bottom: 0; }

  /* Im aufgeklappten Menue steht das Untermenue offen als Einrueckung -
     ein Aufklappen im Aufklappen waere auf dem Telefon nur laestig. */
  .hat-untermenue > a::after { display: none; }
  .untermenue {
    display: block;
    position: static;
    min-width: 0;
    margin: 0 0 8px 0;
    padding: 0 0 0 18px;
    border: 0;
    border-left: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .untermenue li { border-bottom: 0; }
  .untermenue a { padding: 9px 0; font-size: 0.92rem; }
  .untermenue a:hover, .untermenue a.ist-hier { background: transparent; }

  .kopf-rechts {
    flex-direction: column;
    align-items: stretch;
    gap: var(--raum-s);
    margin-top: var(--raum-s);
  }
  .kopf-rechts .knopf { width: 100%; }
  .kopf-telefon { justify-content: center; }
  .sprachen { justify-content: center; }

  .kopf-innen { position: relative; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  :root { --rand: 18px; }
  .fuss-schluss { flex-direction: column; align-items: flex-start; }
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 360px) {
  body { font-size: 15px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  .knopf { padding: 13px 20px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}



/* ------------------------------------- Bewertungen, verborgene Karten */
/* Begruendung: AENDERUNGEN.md */

/* Nur fuer Vorleseprogramme. Nicht display:none - das nimmt der
   Screenreader ebenfalls heraus. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------------ Drucken */
@media print {
  .kopf, .fuss, .knopf, .menue-knopf { display: none; }
  body { background: #fff; font-size: 11pt; }
}


/* Begruendung: AENDERUNGEN.md */
.spalte-viertel { flex: 1 1 min(240px, 100%); min-width: 0; }


/* --------------------------------------------------------------- Anfahrt */
/* Der Kartenbehaelter heisst .landkarte und nicht .karte: .karte ist im Theme
   die Inhaltskachel mit Rahmen, Schatten und Hover-Effekt. */
.landkarte {
  position: relative;
  display: block;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 2px solid var(--linie);
  line-height: 0;
  /* Begruendung: AENDERUNGEN.md */
  aspect-ratio: 15 / 7;
}
.landkarte iframe { width: 100%; height: 100%; display: block; border: 0; }

/* Begruendung: AENDERUNGEN.md */
.landkarte-hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--raum-m);
  background: var(--creme, #F6F3ED);
  color: var(--text-leise);
  font-size: 0.95rem;
  line-height: 1.6;
}
/* Der Knopf im Hinweiskasten. Abstand nach oben, damit er nicht am Text
   klebt; im Uebrigen die vorhandene Knopfgestalt, kein Sonderfall. */
.landkarte-hinweis .knopf { margin-top: var(--raum-s); }
.landkarte-hinweis .knopf[disabled] { opacity: .6; cursor: default; }

/* Begruendung: AENDERUNGEN.md */
.karte-widerruf {
  appearance: none; background: none; border: 0;
  font: inherit; color: var(--gold-dunkel);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 11px 4px; margin-left: 4px;
}
@media (hover: hover) { .karte-widerruf:hover { color: var(--gruen); } }
.karte-widerruf:focus { outline: 2px solid var(--gold-dunkel); outline-offset: 2px; }
.karte-widerruf:focus:not(:focus-visible) { outline: none; }

.landkarte-hinweis p { margin: 0; max-width: 32em; }
.landkarte-hinweis[hidden] { display: none; }

/* Der Platzhalter, den Real Cookie Banner an die Stelle des iframes setzt,
   soll den Behaelter ebenfalls fuellen. */
.landkarte > * { max-width: 100%; }

.anschrift {
  margin: var(--raum-m) 0 var(--raum-s);
  line-height: 1.55;
}

/* Herkunftshinweis unter der Karte - leiser als der Fliesstext. */
.anfahrt-hinweis {
  margin-top: var(--raum-s);
  font-size: 0.85rem;
  color: var(--text-leise);
  max-width: 46em;
}

/* ------------------------------------------------------------- Bewertungen */
/* Begruendung: AENDERUNGEN.md */

.bewertung-kopfzahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bewertung-note {
  font-size: clamp(2.8rem, 2rem + 3.4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gruen);
  /* Grosse Ziffern stehen sonst zu locker */
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Begruendung: AENDERUNGEN.md */
.sterne {
  color: var(--gold-dunkel);
  letter-spacing: 0.18em;
  /* Das letzte Sperrzeichen wuerde die Reihe sonst nach links versetzen */
  margin-right: -0.18em;
}

.bewertung-kopfzahl .sterne { font-size: 1.5rem; line-height: 1; }

.bewertung-anzahl {
  font-size: 0.95rem;
  color: var(--text-leise);
  letter-spacing: 0.01em;
}

/* Zitate brauchen Luft: Lob im Kleingedruckten wirkt wie eine Fussnote. */
.bewertung { padding: var(--raum-l) var(--raum-m); }
.bewertung .sterne { font-size: 1.05rem; margin-bottom: var(--raum-s); }

.bewertung blockquote {
  margin: 0 0 var(--raum-m);
  /* Der Block soll auch dann unten buendig stehen, wenn ein Zitat
     kuerzer ist als die anderen - die Reihe streckt die Karten. */
  flex: 1 1 auto;
}

.bewertung blockquote p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text);
}

.bewertung-autor {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-leise);
  letter-spacing: 0.02em;
  margin: 0;
}
.bewertung-autor::before { content: "— "; }

/* Begruendung: AENDERUNGEN.md */

.bewertung-quelle {
  max-width: 78ch;
  margin: var(--raum-xl) auto 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-leise);
  text-align: center;
}
.bewertung-quelle a {
  color: var(--gruen);
  white-space: nowrap;
}

/* Begruendung: AENDERUNGEN.md */
.abschnitt-anschluss { padding-top: 0; padding-bottom: var(--abschnitt); }
/* Begruendung: AENDERUNGEN.md */
.belege {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--raum-m) var(--raum-l);
  max-width: 40em; margin: 0 auto;
  padding: var(--raum-m) var(--raum-l);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
}
.belege img { flex: 0 0 auto; height: 128px; width: auto; }
.belege .siegel-zeile {
  margin: 0; max-width: 34ch; text-align: left;
  font-size: 0.86rem; line-height: 1.6; color: var(--text-leise);
}
@media (max-width: 600px) {
  .belege { flex-direction: column; gap: var(--raum-s); }
  .belege .siegel-zeile { text-align: center; }
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 1003px) {
  /* Begruendung: AENDERUNGEN.md */
  :root { --bw-spalten: 2; }
  .bewertung { flex-basis: calc(50% - (var(--raum-m) / 2)); }
}

@media (max-width: 767px) {
  /* Begruendung: AENDERUNGEN.md */
  :root { --bw-spalten: 2; }
  .bewertung { flex-basis: 100%; }
}

@media (max-width: 600px) {
  .bewertung { padding: var(--raum-m) var(--raum-s); }
  .bewertung-quelle { text-align: left; }
}

/* Begruendung: AENDERUNGEN.md */

:root {
  /* Begruendung: AENDERUNGEN.md */
  --rahmen:        rgba(38, 66, 51, 0.32);
  --rahmen-dunkel: rgba(201, 176, 120, 0.30);
  /* Begruendung: AENDERUNGEN.md */
  --kopf-hoehe:    107px;
  --kleb-oben:     calc(var(--kopf-hoehe) + 27px);
}

/* ------------------------------------------------------------------ Buehne */
/* Begruendung: AENDERUNGEN.md */
.buehne {
  position: relative;
  align-items: flex-end;
  /* Begruendung: AENDERUNGEN.md */
  min-height: 86svh;
  display: flex;
  overflow: hidden;
  background: var(--gruen-dunkel);
}
.buehne-bilder { position: absolute; inset: 0; }
.buehne-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Der Beschnitt faellt nach unten: oben steht Himmel, unten die Stadt -
     und der Satzblock sitzt ueber den Daechern. */
  object-position: 50% 34%;
}

/* Begruendung: AENDERUNGEN.md */



.buehne::before,
.buehne::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Begruendung: AENDERUNGEN.md */
.buehne::before {
  /* Begruendung: AENDERUNGEN.md */
  background: linear-gradient(to right,
    rgba(16, 23, 17, 0.68)   0%,
    rgba(16, 23, 17, 0.67)  38%,
    rgba(16, 23, 17, 0.27)  54%,
    rgba(16, 23, 17, 0.05)  70%,
    rgba(16, 23, 17, 0.02) 100%);
}

/* Begruendung: AENDERUNGEN.md */
.buehne::after {
  background: linear-gradient(to bottom,
    rgba(16, 23, 17, 0.10)   0%,
    rgba(16, 23, 17, 0.03)  26%,
    rgba(16, 23, 17, 0.02)  66%,
    rgba(16, 23, 17, 0.12) 100%);
}

/* Begruendung: AENDERUNGEN.md */

@media (max-width: 1120px) {
  .buehne::before {
    background: linear-gradient(to right,
      rgba(16,23,17,.10) 0%, rgba(16,23,17,.06) 50%, rgba(16,23,17,.10) 100%);
  }
  /* Begruendung: AENDERUNGEN.md */
  
  .satzblock { position: relative; }
  /* Begruendung: AENDERUNGEN.md */
  .satzblock::before {
    content: "";
    position: absolute;
    inset: -360px -50vw -100vh -50vw;
    z-index: -1;
    background: linear-gradient(to bottom,
      rgba(16, 23, 17, 0)    0,
      rgba(16, 23, 17, 0.66) 360px,
      rgba(16, 23, 17, 0.66) 100%);
  }
  /* Die Flaeche darueber bleibt frei - das Bild traegt dort. */
  .buehne::after {
    background: linear-gradient(to bottom,
      rgba(16, 23, 17, 0.10)  0%,
      rgba(16, 23, 17, 0.04) 30%,
      rgba(16, 23, 17, 0.04) 100%);
  }
  /* Begruendung: AENDERUNGEN.md */
  .buehne-bild { object-position: 50% 62%; }
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 767px) {
  .satzblock::before {
    inset: -220px -50vw -100vh -50vw;
    background: linear-gradient(to bottom,
      rgba(16, 23, 17, 0)    0,
      rgba(16, 23, 17, 0.66) 220px,
      rgba(16, 23, 17, 0.66) 100%);
  }
}


.buehne .behaelter { position: relative; z-index: 2; padding-top: 118px; padding-bottom: 92px; }

/* Begruendung: AENDERUNGEN.md */

.satzblock {
  max-width: 620px;
  margin: 0;
  text-align: left;
  color: var(--text-auf-dunkel);
  position: relative;
}

/* Begruendung: AENDERUNGEN.md */



.satzblock .augbraue { color: #F6EDD8; }

/* Begruendung: AENDERUNGEN.md */

.vertrauensleiste {
  background: var(--creme-tief);
  border-bottom: 1px solid var(--linie);
  padding: var(--raum-m) 0;
}
/* Begruendung: AENDERUNGEN.md */

.vl-innen { display: flex; flex-direction: column; align-items: center;
  gap: var(--raum-s); }
.vl-innen ul { width: 100%; }
/* Begruendung: AENDERUNGEN.md */
.vl-siegel {
  /* Begruendung: AENDERUNGEN.md */
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px;
  max-width: 26em;
  padding-top: var(--raum-s);
  border-top: 1px solid var(--linie);
}
/* Begruendung: AENDERUNGEN.md */
/* Die Bilder als eigene Gruppe - ein zweites Siegel stellt sich damit neben
   das erste, nicht zwischen Bild und Text. Vorbereitet, weil eines kommt. */
.vl-siegel img { display: block; height: 90px; width: auto; }
/* Begruendung: AENDERUNGEN.md */
.vl-siegel .siegel-svg {
  display: block; height: 90px; width: auto;
  color: var(--gold-dunkel);
}
/* Begruendung: AENDERUNGEN.md */
/* Unter 900 px unter die Leiste, ohne Trennlinie - eine senkrechte Linie unter
   einer gestapelten Liste trennt nichts mehr. */
@media (max-width: 900px) {
  .vl-siegel { max-width: none; }
}

.vertrauensleiste ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-m) var(--raum-l);
}
.vertrauensleiste li {
  display: flex; align-items: flex-start; gap: 14px;
  /* Begruendung: AENDERUNGEN.md */
  flex: 0 1 max(14em, calc(25% - var(--raum-l)));
}
.vertrauensleiste .vl-zeichen {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--weiss);
  border: 1px solid var(--linie);
  /* Begruendung: AENDERUNGEN.md */
  color: var(--gold-dunkel);
}
.vertrauensleiste .vl-zeichen svg { width: 21px; height: 21px; display: block; }
.vertrauensleiste .vl-wort { display: block; line-height: 1.35; }
.vertrauensleiste .vl-wort strong {
  display: block; color: var(--gruen);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
}
.vertrauensleiste .vl-unten {
  display: block; margin-top: 3px;
  font-size: 0.875rem; color: var(--text-leise);
}
.vertrauensleiste .vl-note strong { color: var(--gruen); font-size: .95rem; }
.vertrauensleiste .leiste-sterne { color: var(--gold-dunkel); letter-spacing: .06em; }
.vertrauensleiste .leiste-anzahl { color: var(--text-leise); font-size: 0.875rem; }

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 1160px) {
  /* Begruendung: AENDERUNGEN.md */
  .vertrauensleiste ul:not(:has(.vl-wort:empty)) > li {
    flex: 0 1 calc(50% - var(--raum-l));
  }
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 880px) {
  .vertrauensleiste ul:has(.vl-wort:empty) > li { flex: 0 1 100%; }
}

/* Begruendung: AENDERUNGEN.md */
.vertrauensleiste .vl-note:has(.vl-wort:empty) { display: none; }

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 620px) {
  .vertrauensleiste ul {
    flex-direction: column; align-items: flex-start;
    gap: var(--raum-s);
    max-width: 22em; margin: 0 auto;
  }
  .vertrauensleiste li { max-width: none; width: 100%; }
  .vertrauensleiste .vl-zeichen { width: 34px; height: 34px; }
  .vertrauensleiste .vl-zeichen svg { width: 18px; height: 18px; }
}

.satzblock h1 { color: var(--weiss); margin-bottom: var(--raum-s); }
.satzblock h1 span { display: block; color: var(--gold-auf-dunkel); }
.satzblock .satz { color: rgba(255,255,255,.92); font-size: 1.06rem; max-width: 54ch; margin: 0 0 var(--raum-m); }
.satzblock .knopf-reihe { justify-content: flex-start; align-items: center; gap: var(--raum-m); }

/* Begruendung: AENDERUNGEN.md */

.buehne-note { display: none; }
@media (max-width: 767px) {
  .buehne-note {
    display: block;
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--gold-auf-dunkel);
  }
  /* Begruendung: AENDERUNGEN.md */
  .buehne-note strong,
  .buehne-note .leiste-anzahl,
  .buehne-note .leiste-sterne { color: inherit; }
  /* Begruendung: AENDERUNGEN.md */
  .buehne { min-height: 0; }
  .buehne .behaelter { padding-top: 104px; }
}

.buehne-tel {
  color: var(--gold-auf-dunkel);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(201, 176, 120, .45);
}
@media (hover: hover) {
  .buehne-tel:hover { color: var(--weiss); border-bottom-color: var(--weiss); }
}

.signatur {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--linie-dunkel);
  text-align: left;
}
.signatur img {
  width: 58px; height: 58px; flex: 0 0 auto;
  /* Begruendung: AENDERUNGEN.md */
  border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255,255,255,.35);
}
.signatur .name  { display: block; color: var(--weiss); font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; }
.signatur .rolle { display: block; color: var(--gold-auf-dunkel); font-size: .78rem; }

/* Begruendung: AENDERUNGEN.md */


/* ----------------------------------------------------------------- Aussage */
.aussage { background: var(--gruen-dunkel); color: var(--text-auf-dunkel); padding: clamp(56px, 7vw, 92px) 0; }
.aussage .behaelter { display: flex; align-items: center; justify-content: center; gap: clamp(26px, 4vw, 54px); flex-wrap: wrap; }
.aussage figure { margin: 0; flex: 0 0 auto; }
.aussage figure img {
  width: clamp(120px, 16vw, 190px); aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
}
.aussage .worte { flex: 0 1 min(480px, 100%); }
/* Begruendung: AENDERUNGEN.md */
.aussage p { font-size: clamp(1.3rem, .9rem + 1.5vw, 2.1rem); font-weight: 200; margin: 0; max-width: 9.5em; color: var(--weiss); }
.aussage cite {
  display: block; margin-top: var(--raum-s); font-style: normal;
  font-size: 0.875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-auf-dunkel);
}
@media (max-width: 640px) {
  .aussage .behaelter { flex-direction: column; text-align: center; }
  .aussage p { max-width: none; }
}

/* --------------------------------------------------------------- Situation */
/* Begruendung: AENDERUNGEN.md */
.blockkopf { margin-bottom: var(--raum-m); }

.situationen { display: flex; flex-wrap: wrap; gap: var(--raum-m); }
.lage {
  flex: 1 1 min(240px, 100%); min-width: 0;
  padding: var(--raum-m) 26px 32px;
  background: var(--weiss);
  /* Begruendung: AENDERUNGEN.md */
  border: 2px solid var(--linie);
  border-radius: var(--radius-l);
}
.lage h3 { margin: 0 0 12px; font-size: 1.02rem; letter-spacing: .04em; }
.lage h3::before {
  content: ""; display: block; width: 26px; height: 2px;
  background: var(--gold); margin-bottom: 14px;
}
.lage p { margin: 0; font-size: .93rem; line-height: 1.66; color: var(--text-leise); }

/* Begruendung: AENDERUNGEN.md */
.zweispalt { display: flex; flex-wrap: wrap; gap: clamp(26px, 3.4vw, 54px); align-items: flex-start; }
/* Begruendung: AENDERUNGEN.md */
.spalte-kleb { position: sticky; top: var(--kleb-oben); align-self: flex-start; flex: 0 1 460px; min-width: 0; }
.spalte-lang { flex: 1 1 min(420px, 100%); max-width: 700px; min-width: 0; align-self: center; }
/* Gestapelt darf die Bildspalte nicht auf ihrer Basisbreite stehenbleiben:
   400 px Bild ueber 705 px Text sieht aus wie ein Fehler im Inhalt. */
@media (max-width: 900px) {
  .spalte-kleb { position: static; flex: 1 1 100%; }
  .spalte-bild { flex: 1 1 100%; }

  /* Begruendung: AENDERUNGEN.md */
  .spalte-kleb figure,
  .spalte-kleb > img { max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* Begruendung: AENDERUNGEN.md */
.spalte-bild { flex: 0 1 400px; min-width: 0; }

/* Rahmen direkt an der Bildkante, gerundet. overflow:hidden ist hier nicht
   Kosmetik: Ohne das ragen die eckigen Bildecken ueber die gerundete Linie. */
.bildrahmen {
  position: relative; overflow: hidden; margin: 0;
  background: var(--gruen-dunkel);
  border: 2px solid var(--rahmen); border-radius: var(--radius-l);
}
.bildrahmen img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* Quer, wo das Bild neben laufendem Text klebt: ein Hochformat waere dort
   hoeher als der Text und wuerde gar nicht erst mitlaufen. */
.bildrahmen-quer img { aspect-ratio: 4 / 3; }
.bildrahmen figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 24px 18px;
  background: linear-gradient(to top, rgba(27,48,37,.86), rgba(27,48,37,0));
  color: rgba(255,255,255,.9);
  font-size: 0.875rem; letter-spacing: .12em; text-transform: uppercase;
}
.flaeche-tief .bildrahmen, .flaeche-gruen .bildrahmen { border-color: var(--rahmen-dunkel); }

/* Begruendung: AENDERUNGEN.md */
.spalte-bilder {
  flex: 0 1 380px; min-width: 0;
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px);
}
.spalte-bilder figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.spalte-bilder figcaption {
  /* Nicht die absolute Variante aus .bildrahmen: Hier steht die Zeile UNTER
     dem Bild, sonst laege heller Text auf hellen Bildstellen. */
  position: static; background: none; padding: 0;
  color: var(--text-leise); text-transform: none; letter-spacing: 0;
  font-size: 0.9rem; line-height: 1.5;
}
.spalte-bilder figcaption strong {
  display: block; color: var(--gruen); font-weight: 600;
  font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 3px;
}
/* Begruendung: AENDERUNGEN.md */
@media (max-width: 900px) {
  .spalte-bilder { flex: 1 1 100%; flex-direction: row; flex-wrap: nowrap; }
  .spalte-bilder figure { flex: 1 1 0; min-width: 0; }
}
/* Begruendung: AENDERUNGEN.md */
@media (max-width: 640px) {
  .spalte-bilder { flex-direction: column; flex-wrap: wrap; }
  .spalte-bilder figure { flex: 1 1 auto; }
}

/* Kartenraster mit Bild oben - dieselbe Bauart wie die Blogkacheln, damit
   nicht zwei Kartenarten nebeneinander existieren. */
.karte-bild { overflow: hidden; padding: 0; }
.karte-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Begruendung: AENDERUNGEN.md */
@media (max-width: 1020px) {
  .karte-bild img { aspect-ratio: auto; height: 260px; }
}
.karte-bild .karte-inhalt { padding: var(--raum-m); }
.karte-bild .symbol {
  /* Das Symbol sitzt jetzt auf der Bildkante, nicht darueber im Leeren. */
  position: relative; margin-top: -34px; margin-left: var(--raum-m);
  background: var(--weiss); box-shadow: var(--schatten);
}

/* Begruendung: AENDERUNGEN.md */
.ortszeile {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 4px clamp(18px, 3vw, 40px);
}
.ortszeile a {
  position: relative;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  /* Ueberschriftengross, also auch Ueberschriftengewicht - sonst haette die
     Seite doch wieder zwei Gewichte in derselben Groessenordnung. */
  font-weight: 600; letter-spacing: -0.015em;
  color: var(--gruen); text-decoration: none;
  padding: 6px 2px;
  transition: color var(--uebergang);
}
.ortszeile a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--uebergang);
}
.ortszeile a:hover { color: var(--gold-dunkel); }
.ortszeile a:hover::after { transform: scaleX(1); }
.ortszeile a + a::before {
  content: ""; position: absolute;
  left: calc(-1 * clamp(18px, 3vw, 40px) / 2); top: 0.28em; bottom: 0.28em;
  width: 1px; background: var(--linie);
}
/* Begruendung: AENDERUNGEN.md */
@media (max-width: 620px) {
  .ortszeile { flex-direction: column; gap: 2px; }
  .ortszeile a + a::before { display: none; }
}

/* ------------------------------------------------------------------ Ablauf */
.schritte { counter-reset: schritt; margin: 0; padding: 0; list-style: none; }
.schritt-punkt {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 32px 56px;
  margin-left: 15px;
  border-left: 1px solid var(--linie);
}
.schritt-punkt:last-child { border-left-color: transparent; padding-bottom: 0; }
.schritt-punkt::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; left: -15px; top: -2px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--gruen-dunkel);
  border-radius: 50%;
  font-size: .68rem; font-weight: 700;
}
.schritt-punkt h3 { margin: 0 0 8px; font-size: 1.04rem; }
.schritt-punkt p  { margin: 0; color: var(--text-leise); font-size: .96rem; }
.schritt-punkt .dauer {
  display: inline-block; margin-top: 8px;
  font-size: 0.875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-dunkel);
}

/* Begruendung: AENDERUNGEN.md */
.siegel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(26px, 5vw, 56px);
}
.siegel img { height: 118px; width: auto; opacity: .94; transition: opacity var(--uebergang), transform var(--uebergang); }
.siegel img:hover { opacity: 1; transform: translateY(-2px); }
.siegel-zeile { margin: 0; color: var(--text-leise); font-size: 0.95rem; max-width: 30ch; }

/* WhatsApp: derselbe Knopf, nur mit Zeichen davor. Kein Fremdskript, kein
   Widget - ein wa.me-Verweis laedt nichts nach und bleibt damit bannerfrei. */
.knopf-wa { display: inline-flex; align-items: center; gap: 9px; }
.knopf-wa svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 520px) { .siegel img { height: 92px; } }


/* Begruendung: AENDERUNGEN.md */

@media (max-width: 1160px) {
  /* Begruendung: AENDERUNGEN.md */
  .situationen > *,
  .reihe:has(> :nth-child(4):last-child) > * {
    /* Begruendung: AENDERUNGEN.md */
    flex: 1 1 max(240px, calc(50% - var(--raum-m)));
  }
}

@media (max-width: 1020px) {
  /* Begruendung: AENDERUNGEN.md */
  .reihe:has(> :nth-child(3):last-child) > * { flex: 1 1 100%; }
}


/* Begruendung: AENDERUNGEN.md */

.gebiet {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
}
/* overflow hidden: Die Landkreisgrenzen laufen weit ueber den Ausschnitt
   hinaus - ohne das zeichnen sie quer ueber die Seite. */
.gebiet-grund { display: block; width: 100%; height: auto; overflow: hidden; }

.gebiet-kreis   { fill: none; stroke: var(--linie); stroke-width: .55; }
.gebiet-stadt {
  fill: var(--gold); fill-opacity: .45;
  stroke: var(--gold-dunkel); stroke-width: .6; stroke-linejoin: round;
}
/* Begruendung: AENDERUNGEN.md */
.gebiet-strasse { fill: none; stroke: var(--gold-dunkel); stroke-width: .5; opacity: .75; }
.gebiet-strasse-a { stroke-width: .9; opacity: .9; }
/* Begruendung: AENDERUNGEN.md */
.gebiet-fluss   { fill: none; stroke: var(--text-leise); stroke-width: .45; opacity: .5; }

.gebiet-orte { list-style: none; margin: 0; padding: 0; }

/* Begruendung: AENDERUNGEN.md */
.gebiet-orte .ort { position: absolute; inset: 0; pointer-events: none; }
.gebiet-orte a { position: absolute; inset: 0; display: block;
  pointer-events: none; text-decoration: none; }

.ort-flaeche {
  position: absolute; inset: 0;
  pointer-events: auto;
  /* Begruendung: AENDERUNGEN.md */
  background: transparent;
  transition: background var(--uebergang);
}

.ort-marke {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; white-space: nowrap;
  pointer-events: auto;
  padding: 8px 3px;
  transition: transform var(--uebergang);
}
/* Der Punkt sitzt auf der Koordinate, der Name daneben. Augsburg und Friedberg
   liegen nur 15 % auseinander und ueberlappten zentriert. */
.ort-rechts { transform: translate(-14px, -50%); }
.ort-links  { transform: translate(calc(-100% + 14px), -50%); }
.ort-links { flex-direction: row-reverse; }
.ort-nach .ort-marke { padding: 5px 3px; gap: 6px; }

.ort-punkt {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-dunkel);
  box-shadow: 0 0 0 2.5px var(--creme);
  transition: box-shadow var(--uebergang);
}
.ort-haupt .ort-punkt { width: 13px; height: 13px; }
.ort-punkt-klein { width: 5px; height: 5px; background: var(--text-leise); opacity: .7; }

/* Der Schatten in Cremefarbe ist kein Effekt, sondern Lesbarkeit: Die Namen
   liegen ueber Flaechen, Strassen und Grenzen. */
.ort-name {
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--gruen);
  text-shadow: 0 0 3px var(--creme), 0 0 7px var(--creme), 0 0 11px var(--creme);
  /* Begruendung: AENDERUNGEN.md */
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: border-color var(--uebergang);
}
.ort-haupt .ort-name { font-size: 1.14rem; }
.ort-nach span:last-child {
  font-size: 0.875rem; color: var(--text-leise);
  text-shadow: 0 0 3px var(--creme), 0 0 7px var(--creme);
}
.ort-nach .ort-marke { border-bottom: 0; }

/* Begruendung: AENDERUNGEN.md */
/* Die Flaeche faerbt sich gruen (Ansage Hermann, 04.09.2026). Die Marke bleibt
   dabei LIEGEN - das Anheben war das, was er "raus kommen" nannte. */
.gebiet-orte a:hover .ort-flaeche,
.gebiet-orte a:focus-visible .ort-flaeche { background: rgba(38, 66, 51, .6); }
.ort-rechts { --marke-ruhe: translate(-14px, -50%); }
.ort-links  { --marke-ruhe: translate(calc(-100% + 14px), -50%); }
.gebiet-orte li:hover, .gebiet-orte li:focus-within { z-index: 2; }

/* Der Ortsname steht auf demselben Gruen wie die Flaeche - gerechnet ergibt
   das 1,93 bei noetigen 4,5. Er wechselt deshalb auf Creme.
   ABER NICHT NUR DAS: Am Bild gemessen liegt der Name bei Gersthofen und
   Friedberg zum Teil NEBEN der eingefaerbten Flaeche, auf hellem Grund - dort
   waere Creme genauso unlesbar, nur andersherum. Deshalb bekommt er eine
   eigene gruene Unterlage ueber `box-shadow`, die keinen Platz braucht und
   das Layout nicht verschiebt. Creme auf #264233 traegt 9,83, unabhaengig
   davon, worueber der Name gerade liegt. */
.gebiet-orte a:hover .ort-name,
.gebiet-orte a:focus-visible .ort-name {
  color: var(--creme);
  background: var(--gruen);
  box-shadow: 0 0 0 4px var(--gruen);
  border-bottom-color: var(--creme);
  text-shadow: none;
  border-radius: 2px;
}
/* Der zweite Ring in Gold-Dunkel verschwindet auf der gruenen Flaeche (1,00).
   Fuer die vier Orte MIT Flaeche wird er cremefarben (5,13); Neusaess und
   Diedorf haben keine Flaeche und behalten das Gold auf hellem Grund. */
.gebiet-orte li:not(.ort-nach) a:hover .ort-punkt,
.gebiet-orte li:not(.ort-nach) a:focus-visible .ort-punkt {
  box-shadow: 0 0 0 2.5px var(--creme), 0 0 0 5px var(--creme);
}
.gebiet-orte .ort-nach a:hover .ort-punkt,
.gebiet-orte .ort-nach a:focus-visible .ort-punkt { box-shadow: 0 0 0 2.5px var(--creme), 0 0 0 5px var(--gold-dunkel); }

/* Begruendung: AENDERUNGEN.md */
@media (hover: none) {
  .gebiet-orte a:hover .ort-flaeche { background: transparent; }
  .gebiet-orte a:hover .ort-name {
    color: var(--gruen); background: none; box-shadow: none;
    border-bottom-color: var(--gold);
    text-shadow: 0 0 3px var(--creme), 0 0 7px var(--creme), 0 0 11px var(--creme);
  }
  .gebiet-orte a:hover .ort-punkt { box-shadow: 0 0 0 2.5px var(--creme); }
  /* Antippen zeigt dasselbe wie Ueberfahren am Schreibtisch. */
  .gebiet-orte a:active .ort-flaeche { background: rgba(38, 66, 51, .6); }
  .gebiet-orte a:active .ort-name {
    color: var(--creme); background: var(--gruen);
    box-shadow: 0 0 0 4px var(--gruen);
    border-bottom-color: var(--creme); text-shadow: none;
  }
  .gebiet-orte li:not(.ort-nach) a:active .ort-punkt {
    box-shadow: 0 0 0 2.5px var(--creme), 0 0 0 5px var(--creme);
  }
}

/* Begruendung: AENDERUNGEN.md */
.gebiet-orte a:focus .ort-marke { outline: 2px solid var(--gold-dunkel); outline-offset: 2px; }
.gebiet-orte a:focus:not(:focus-visible) .ort-marke { outline: none; }

.gebiet-quelle {
  margin: 18px 0 0; text-align: center;
  /* 14 px, Ansage vom 04.09.2026. Damit faellt die letzte Ausnahme der
     Schriftgroessenregel weg - es gibt keine Stelle unter 14 px mehr. */
  font-size: .875rem; color: var(--text-leise);
}

/* Zeigen und Antippen fuehren zum selben Bild. `:active` ist der einzige
   Zustand, den ein Finger ausloest. */
.gebiet-orte a:active .ort-punkt,
.gebiet-orte a:focus-visible .ort-punkt { box-shadow: 0 0 0 2.5px var(--creme), 0 0 0 5px var(--gold-dunkel); }
.gebiet-orte a:active .ort-name,
.gebiet-orte a:focus-visible .ort-name { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .gebiet-orte a:hover .ort-punkt { box-shadow: 0 0 0 2.5px var(--creme), 0 0 0 5px var(--gold-dunkel); }
  .gebiet-orte a:hover .ort-name { text-decoration: underline; text-underline-offset: 3px; }
}
/* Begruendung: AENDERUNGEN.md */
.gebiet-orte a:focus { outline: 2px solid var(--gold-dunkel); outline-offset: 2px; }
.gebiet-orte a:focus:not(:focus-visible) { outline: none; }

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 600px) {
  /* Begruendung: AENDERUNGEN.md */
  
  .gebiet-orte .ort-nach { display: none; }
  .ort-name { font-size: .92rem; }
  .ort-haupt .ort-name { font-size: 1.02rem; }
  /* Aichach liegt bei 79,6 % - sein Name lief rechts aus der Karte heraus.
     Unter 600 px steht er links vom Punkt; dort ist Platz. */
  /* Begruendung: AENDERUNGEN.md */
  .ort-aichach .ort-marke {
    transform: translate(calc(-100% + 14px), -50%);
    flex-direction: row-reverse;
  }
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 600px) {
  /* Begruendung: AENDERUNGEN.md */
  .ort-marke { padding: 12px 3px; }
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 372px) {
  .ort-name { font-size: .85rem; }
  .ort-haupt .ort-name { font-size: .95rem; }
}

/* Begruendung: AENDERUNGEN.md */

.buehne-portraet {
  position: absolute;
  right: 3%;
  bottom: 0;
  /* Hoehe statt Breite: Die Buehne darf nicht wachsen (0,86 Bildschirme sind
     Vorgabe), und ueber die Hoehe bleibt das Verhaeltnis 933:1400 gewahrt. */
  height: 88%;
  z-index: 2;
  pointer-events: none;
}
.buehne-portraet img {
  display: block;
  height: 100%;
  width: auto;
  position: relative;
  z-index: 1;
}
.buehne-portraet::before {
  content: "";
  position: absolute;
  inset: -4% -14%;
  z-index: 0;
  /* Begruendung: AENDERUNGEN.md */
  background: linear-gradient(to bottom,
    rgba(16, 23, 17, 0.32)   0%,
    rgba(16, 23, 17, 0.14)  40%,
    rgba(255, 255, 255, 0.05) 75%,
    rgba(255, 255, 255, 0.06) 100%);
  /* Begruendung: AENDERUNGEN.md */
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 25%, transparent 100%);
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 1120px) {
  .buehne-portraet { display: none; }
}

/* Begruendung: AENDERUNGEN.md */
.kontaktleiste { display: none; }

@media (max-width: 767px) {
  .kontaktleiste {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(38, 66, 51, 0.97);
    border-top: 1px solid rgba(192, 166, 104, 0.35);
    transform: translateY(110%);
    transition: transform 0.22s ease;
    pointer-events: none;
  }
  .kontaktleiste.ist-sichtbar { transform: translateY(0); pointer-events: auto; }

  /* 48 px statt der geforderten 44: Die Leiste ist das letzte Ziel ueber der
     Bildschirmkante, wo der Daumen am ungenauesten trifft. */
  .kontaktleiste-knopf {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-m, 8px);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--creme, #F6F3ED);
    border: 1px solid rgba(246, 243, 237, 0.45);
  }
  .kontaktleiste-gold {
    color: var(--gruen, #264233);
    background: var(--gold, #C0A668);
    border-color: var(--gold, #C0A668);
  }
  .kontaktleiste-symbol { display: inline-flex; width: 16px; height: 16px; }
  .kontaktleiste-symbol svg { width: 100%; height: 100%; }

  /* Begruendung: AENDERUNGEN.md */
  body { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .kontaktleiste { transition: none; }
}

/* Begruendung: AENDERUNGEN.md */
.formularblock {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 48px;
  align-items: flex-start;
}
/* Begruendung: AENDERUNGEN.md */
.formularblock-text,
.formularblock-formular { flex: 1 1 100%; }

@media (min-width: 768px) {
  .formularblock-text     { flex: 1 1 min(300px, 100%); }
  .formularblock-formular { flex: 1 1 min(340px, 100%); }
}

.formularblock-punkte {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.formularblock-punkte li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.5;
}
/* Der Haken als Pseudo-Element, nicht als Zeichen im Text: So bleibt er beim
   Kopieren des Textes weg und wird von Vorlesesoftware nicht mitgelesen. */
.formularblock-punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* Begruendung: AENDERUNGEN.md */
@media (max-width: 767px) {
  .abschnitt     { padding-top: 40px; padding-bottom: 40px; }
  .abschnitt-eng { padding-top: 56px; padding-bottom: 56px; }

  /* Begruendung: AENDERUNGEN.md */
  
  
  .reihe .spalte:not(.beitrag-karte) img { height: 140px; }
  .spalte-kleb img   { aspect-ratio: 4 / 3; height: auto; }

  /* Begruendung: AENDERUNGEN.md */
  .spalte-bilder        { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
  .spalte-bilder figure { flex: 1 1 0; min-width: 0; gap: 6px; }
  .spalte-bilder figure img { height: 110px; aspect-ratio: auto; }
  .spalte-bilder figcaption strong {
    text-transform: none; letter-spacing: 0; font-size: 0.875rem;
  }
  .spalte-bilder figcaption { font-size: 0.875rem; line-height: 1.35; }
}

/* Begruendung: AENDERUNGEN.md */
.kopf { transition: transform 0.25s ease; will-change: transform; }
.kopf.ist-weg { transform: translateY(-100%); }

/* Begruendung: AENDERUNGEN.md */
.kopf:has(.menue-knopf[aria-expanded="true"]) { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .kopf { transition: none; }
}

/* Begruendung: AENDERUNGEN.md */

.kopf-innen   { min-height: 64px; padding-top: 7.5px; padding-bottom: 7.5px; }
.kopf-logo img { width: 112px; }

/* Begruendung: AENDERUNGEN.md */
.fuss .spalte-viertel ul li a,
.fuss-rechtliches a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* Der Abstand steckt jetzt in der Zeilenhoehe selbst - sonst kaeme er oben
   drauf und der Fuss wuechse doppelt. */
.fuss .spalte-viertel ul li { margin-bottom: 0; }

/* Der Herkunftshinweis unter den Bewertungen ist ein Verweis fuer sich, kein
   Wort in einem Satz - er faellt nicht unter die Ausnahme und wird vergroessert. */
.bewertung-quelle a { display: inline-flex; align-items: center; min-height: 44px; }

/* Begruendung: AENDERUNGEN.md */
.menue a { display: flex; align-items: center; min-height: 44px; }

/* Begruendung: AENDERUNGEN.md */
.fuss-kontakt .zeile-mit-symbol a,
.fuss .zeile-mit-symbol a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
}

/* Begruendung: AENDERUNGEN.md */


@media (max-width: 767px) {
  /* Begruendung: AENDERUNGEN.md */
  .hero .knopf-reihe { display: none; }

  .hero .behaelter { padding-top: 32px; padding-bottom: 32px; }
  .hero .reihe     { gap: 24px; }
  .hero .zierlinie { margin-top: 8px; margin-bottom: 16px; }
  .hero h1         { margin-bottom: 8px; }
  .hero .vorspann  { margin-bottom: 8px; }
}