/* ==========================================================================
   Gemeinde Seebach – Design System
   Layout-Vorbild: koenigsbach-stein.de · Farbwerte aus der bestehenden
   Seebach-Contao-Instanz (Cookie-Banner-Grün) übernommen.
   ========================================================================== */

/* Serif-Headline-Schrift für den Seiteninhalt, lokal vendort (siehe
   assets/vendor/instrument-serif/) - nur für Inhalts-Überschriften genutzt,
   Header/Footer bleiben bei der bisherigen Schrift. */
@import url('/assets/vendor/instrument-serif/instrument-serif.css');

:root {
  /* Brand */
  --color-primary: #4A8B33;
  --color-primary-dark: #435f2f;
  --color-primary-light: #eef3ea;
  /* Rückwärtskompatible Aliasnamen: Blau wird im Layout nicht mehr genutzt. */
  --color-navy: var(--color-primary);
  --color-navy-light: var(--color-primary);

  /* Neutrals */
  --color-text: #2c2c2c;
  --color-text-muted: #5b5b5b;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f5f2;
  --color-beige: #f2ede2; /* Mega-Menü-Hintergrund, Vorbild schoemberg.de */
  --color-bg-alt-2: #eef1ec;
  --color-border: #dfe1db;

  /* Type */
  --font-base: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --radius: 6px;
  --radius-lg: 10px;

  /* Layout */
  --container: 1400px;
  --header-h: 68px;
  /* Höhe des Streifens, der beim Scrollen oben stehen bleibt. Alles, was
     ebenfalls klebt oder angesprungen wird, rechnet damit - sonst schiebt sich
     die Navigation darüber. */
  --klebehoehe: var(--header-h);
}

/* Neue Inhalts-Palette (Design 2026-07-27) - bewusst NUR auf Breadcrumb/
   Seitenkopf/Hauptinhalt begrenzt (nicht auf :root), damit Header und Footer
   optisch unverändert bleiben und weiter die ursprünglichen Farben nutzen. */
.breadcrumb, .page-header, main#content {
  --color-primary: #1f3d2b;
  --color-primary-dark: #16291d;
  --color-primary-light: #eae2c8;
  --color-navy: var(--color-primary);
  --color-text: #1b1b16;
  --color-text-muted: #5b5c52;
  --color-bg-alt: #f7f3ea;
  --color-bg-alt-2: #eae2c8;
  --color-border: #e4dcc5;
  --color-accent: #d98b3b;
}
/* Serif nur für die großen Seiten-/Abschnittsüberschriften (h1/h2) - Karten-
   und Listentitel (h3) bleiben in der Grundschrift fett, wie im Design. */
.breadcrumb h1, .page-header h1,
main#content h1, main#content h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
}
main#content { background: #fff; }

/* Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Angesprungene Stellen dürfen nicht unter der klebenden Navigation landen.
   Ohne diesen Abstand steht die Überschrift, auf die ein Verweis zeigt, hinter
   dem Menü - man springt und sieht den Anfang des Ziels nicht. */
[id] { scroll-margin-top: calc(var(--klebehoehe) + 16px); }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--color-text-muted); max-width: 65ch; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Skip-Link (Barrierefreiheit) */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-outline {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn-outline:hover { background: rgba(255,255,255,0.12); text-decoration: none; }

/* Hinweise & Störungen
   ========================================================================== */
.startseiten-hinweise {
  padding: 20px 0;
  border-bottom: 1px solid #d8d2c4;
  background: #fff8e9;
}
.startseiten-hinweise-kopf,
.startseiten-hinweise-kopf > div,
.startseiten-hinweise-kopf > a,
.startseiten-hinweis,
.hinweis-meta,
.hinweis-status { display: flex; align-items: center; }
.startseiten-hinweise-kopf { justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.startseiten-hinweise-kopf > div { gap: 12px; }
.startseiten-hinweise-kopf h2 { margin: 0; font-family: var(--font-base); font-size: 1.2rem; }
/* "Aktuell wichtig" steht hier ausnahmsweise NEBEN der Überschrift statt
   darüber. Der Standardabstand von .startseiten-eyebrow nach unten würde die
   Zeile in dieser Flex-Ausrichtung um die halbe Höhe nach oben versetzen -
   sichtbar als schief sitzende Auszeichnung. In der schmalen Ansicht stehen
   beide untereinander, dort sorgt das gap des Elternelements für den Abstand. */
.startseiten-hinweise-kopf .startseiten-eyebrow { margin-bottom: 0; }
.startseiten-hinweise-kopf > a { gap: 7px; font-weight: 700; }
.startseiten-hinweise-liste { display: grid; gap: 8px; }
.startseiten-hinweis {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e1d8c4;
  border-left: 5px solid #567a3c;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
}
.startseiten-hinweis--wichtig { border-left-color: #bd6b16; }
.startseiten-hinweis--akut { border-left-color: #b42318; background: #fff8f7; }
.startseiten-hinweis > i:first-child { color: var(--color-primary); font-size: 1.65rem; }
.startseiten-hinweis > span { min-width: 0; }
.startseiten-hinweis small,
.startseiten-hinweis strong,
.startseiten-hinweis > span > span { display: block; }
.startseiten-hinweis small { color: var(--color-text-muted); font-size: .78rem; }
.startseiten-hinweis strong { color: #1b1b16; font-size: 1rem; }
.startseiten-hinweis > span > span { color: var(--color-text-muted); font-size: .85rem; }
.startseiten-hinweis:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(30,43,32,.09); }

.hinweis-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.hinweis-filter a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; color: var(--color-text); font-size: .9rem; font-weight: 700; }
.hinweis-filter a:hover,
.hinweis-filter a.aktiv { border-color: var(--color-primary); background: var(--color-primary); color: #fff; text-decoration: none; }
.hinweis-liste { display: grid; gap: 16px; }
.hinweis-karte { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; padding: 22px; border: 1px solid var(--color-border); border-left: 6px solid var(--color-primary); border-radius: 10px; background: #fff; }
.hinweis-karte--wichtig { border-left-color: #bd6b16; }
.hinweis-karte--akut { border-left-color: #b42318; background: #fff9f8; }
.hinweis-karte-icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); font-size: 1.6rem; }
.hinweis-meta { flex-wrap: wrap; gap: 7px 14px; margin-bottom: 7px; color: var(--color-text-muted); font-size: .82rem; }
.hinweis-meta span { display: inline-flex; align-items: center; gap: 4px; }
.hinweis-karte h2 { margin-bottom: 6px; font-size: 1.35rem; }
.hinweis-karte h2 a { color: inherit; }
.hinweis-leerzustand { display: flex; gap: 18px; align-items: flex-start; padding: 28px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
.hinweis-leerzustand > i { color: var(--color-primary); font-size: 2.2rem; }
.hinweis-leerzustand h2 { margin-bottom: 4px; }
.hinweis-abo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: 44px; margin-top: 48px; padding: 34px; border-radius: 14px; background: #eae2c8; }
.hinweis-abo form { padding: 22px; border-radius: 10px; background: #fff; }
.hinweis-abo label,
.hinweis-abo legend { color: var(--color-text); font-weight: 700; }
.hinweis-abo-email { display: flex; gap: 8px; margin: 7px 0 18px; }
.hinweis-abo input[type="email"] { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #aaa; border-radius: 6px; font: inherit; }
.hinweis-abo fieldset { padding: 0; border: 0; }
.hinweis-abo-themen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 7px; }
.hinweis-abo-themen label { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; }
.form-hinweis { margin-top: 16px; font-size: .8rem; }
.hinweis-status { display: inline-flex; gap: 7px; padding: 6px 10px; border-radius: 999px; background: var(--color-primary-light); font-weight: 800; }
.hinweis-status--wichtig { background: #fff0d9; color: #824b10; }
.hinweis-status--akut { background: #fee4e2; color: #8f1d16; }
.hinweis-detailbox dl { margin: 0; }
.hinweis-detailbox dl div { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.hinweis-detailbox dl div:last-child { border-bottom: 0; }
.hinweis-detailbox dt { color: var(--color-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.hinweis-detailbox dd { margin: 2px 0 0; color: var(--color-text); }
.abo-rueckmeldung { display: flex; gap: 22px; align-items: flex-start; max-width: 820px; margin: 40px auto; padding: 34px; border: 1px solid var(--color-border); border-left: 6px solid #b42318; border-radius: 12px; background: #fff; }
.abo-rueckmeldung--erfolg { border-left-color: var(--color-primary); }
.abo-rueckmeldung--warnung { border-left-color: #bd6b16; }
.abo-rueckmeldung > i { color: var(--color-primary); font-size: 2.5rem; }

@media (max-width: 760px) {
  .startseiten-hinweise-kopf,
  .startseiten-hinweise-kopf > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .startseiten-hinweis { grid-template-columns: 34px minmax(0, 1fr); }
  .startseiten-hinweis > i:last-child { display: none; }
  .hinweis-karte { grid-template-columns: 1fr; }
  .hinweis-abo { grid-template-columns: 1fr; padding: 22px; }
  .hinweis-abo-email { align-items: stretch; flex-direction: column; }
  .hinweis-abo-themen { grid-template-columns: 1fr; }
}

/* Gemeinderat, Sitzungen und Beschlussarchiv
   ========================================================================== */
.gemeinderat-servicekarten { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--color-border); }
.gemeinderat-servicekarten > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gemeinderat-servicekarten a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--color-text); }
.gemeinderat-servicekarten a:hover { border-color: var(--color-primary); text-decoration: none; box-shadow: 0 8px 20px rgba(24,51,34,.08); }
.gemeinderat-servicekarten a > i:first-child { color: var(--color-primary); font-size: 1.8rem; }
.gemeinderat-servicekarten strong,
.gemeinderat-servicekarten small { display: block; }
.gemeinderat-servicekarten strong { color: var(--color-primary); }
.gemeinderat-servicekarten small { margin-top: 3px; color: var(--color-text-muted); }
.ratsinformation > section + section { margin-top: 54px; }
.ratsbereich-kopf { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.ratsbereich-kopf h2 { margin: 0; }
.ratssitzungen-liste { display: grid; gap: 12px; }
.ratssitzung-karte { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--color-border); border-left: 5px solid var(--color-primary); border-radius: 10px; background: #fff; }
.ratssitzung-karte--abgesagt { border-left-color: #b42318; opacity: .82; }
.ratssitzung-karte > time { display: grid; place-items: center; padding: 9px; border-radius: 8px; background: var(--color-primary); color: #fff; line-height: 1; }
.ratssitzung-karte > time strong { font-size: 1.7rem; }
.ratssitzung-karte > time span { margin-top: 3px; font-size: .78rem; font-weight: 800; }
.ratssitzung-karte > time small { margin-top: 5px; opacity: .82; }
.ratssitzung-karte h3 { margin: 5px 0 3px; font-size: 1.25rem; }
.ratssitzung-karte p { margin: 0; font-size: .9rem; }
.ratssitzung-karte > a:last-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary-light); font-size: 1.2rem; }
.rats-status { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #e8f1e5; color: #315126; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.rats-status--abgesagt { background: #fee4e2; color: #8f1d16; }
.ratssitzungen-archiv { border-top: 1px solid var(--color-border); }
.ratssitzungen-archiv > a { display: grid; grid-template-columns: 105px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 8px; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.ratssitzungen-archiv > a:hover { background: rgba(255,255,255,.6); text-decoration: none; }
.ratssitzungen-archiv strong,
.ratssitzungen-archiv small { display: block; }
.ratssitzungen-archiv small { color: var(--color-text-muted); }
.rats-leer { padding: 22px; border: 1px dashed var(--color-border); border-radius: 8px; }
.rats-absage { margin-bottom: 24px; padding: 16px 18px; border-left: 5px solid #b42318; background: #fee4e2; color: #8f1d16; }
.rats-sitzung-hinweis { margin-bottom: 26px; padding: 18px; border-radius: 8px; background: #fff8e9; }
.rats-beschluesse { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--color-border); }
.rats-beschluesse article,
.rats-beschlussarchiv > article { margin-top: 16px; padding: 24px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
.rats-beschluss-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 8px; color: var(--color-text-muted); font-size: .8rem; }
.rats-beschluss-meta span { padding: 2px 7px; border-radius: 4px; background: var(--color-primary-light); color: var(--color-primary); font-weight: 800; }
.rats-abstimmung { margin-top: 18px; padding: 10px 12px; border-left: 3px solid var(--color-primary); background: var(--color-primary-light); }
.rats-daten { margin: 0; }
.rats-daten div { padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.rats-daten div:last-child { border-bottom: 0; }
.rats-daten dt { color: var(--color-text-muted); font-size: .76rem; text-transform: uppercase; }
.rats-daten dd { margin: 2px 0 0; }
.rats-dokumente ul { margin: 0; padding: 0; list-style: none; }
.rats-dokumente li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.rats-dokumente li:last-child { border-bottom: 0; }
.rats-dokumente li > i { margin-top: 2px; color: #b42318; font-size: 1.25rem; }
.rats-dokumente strong,
.rats-dokumente small { display: block; }
.rats-dokumente small { color: var(--color-text-muted); }
.rats-dokumente a { display: inline-block; margin: 5px 9px 0 0; font-size: .84rem; font-weight: 700; }
.ratsarchiv-filter { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; align-items: end; gap: 12px; padding: 20px; border-radius: 10px; background: #eae2c8; }
.ratsarchiv-filter label { display: block; margin-bottom: 5px; font-weight: 700; }
.ratsarchiv-filter input,
.ratsarchiv-filter select { width: 100%; min-height: 46px; padding: 9px 11px; border: 1px solid #9c9b93; border-radius: 6px; background: #fff; font: inherit; }
.ratsarchiv-anzahl { margin: 22px 0 4px; }

@media (max-width: 760px) {
  .gemeinderat-servicekarten > div { grid-template-columns: 1fr; }
  .ratssitzung-karte { grid-template-columns: 62px minmax(0, 1fr); }
  .ratssitzung-karte > a:last-child { display: none; }
  .ratssitzungen-archiv > a { grid-template-columns: 1fr auto; }
  .ratssitzungen-archiv time { grid-column: 1 / -1; }
  .ratsarchiv-filter { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Utility bar (oberste Zeile)
   ========================================================================== */
.utility-bar {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  min-height: 40px;
}
/* Die drei Punkte der Serviceleiste stehen in normaler Textfarbe - grün wird
   nur beim Überfahren. Vorher war die ganze Leiste grün und zog mehr
   Aufmerksamkeit auf sich als die eigentliche Navigation darunter. */
.utility-bar a:not(.utility-social a) {
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.utility-bar a:not(.utility-social a):hover { color: var(--color-primary); }
.utility-social { display: flex; gap: 14px; margin-right: auto; }
.utility-social a { font-size: 1.05rem; }
/* Eingerahmter Knopf ganz rechts – gleiche Optik wie auf der
   Wohnungsverwaltungs-Seite. */
.utility-darstellung {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  /* Schrift wie die beiden Links daneben; der Rahmen bleibt grün, sonst
     wirkte der Knopf wie ein schwerer schwarzer Kasten. */
  color: var(--color-text);
  border-color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.utility-darstellung:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.utility-darstellung[aria-expanded="true"] {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 700;
}

/* Bedienfeld für Kontrast, Schriftgröße und reduzierte Bewegung */
.darstellung-panel[hidden] { display: none !important; }
.darstellung-panel {
  position: fixed;
  z-index: 1200;
  top: 50px;
  right: max(18px, calc((100vw - var(--container)) / 2 + 24px));
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100vh - 66px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 24px 70px rgba(20, 34, 25, 0.22);
}
.darstellung-panel-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}
.darstellung-panel-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.darstellung-panel h2 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 1.35rem;
}
.darstellung-panel-schliessen {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
}
.darstellung-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.darstellung-option-text strong,
.darstellung-option-text span { display: block; }
.darstellung-option-text strong {
  margin-bottom: 3px;
  color: var(--color-text);
}
.darstellung-option-text span {
  color: var(--color-text-muted);
  font-size: 0.87rem;
  line-height: 1.45;
}
.darstellung-schalter {
  position: relative;
  width: 54px;
  height: 32px;
  padding: 3px;
  border: 2px solid var(--color-text-muted);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.darstellung-schalter span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 0.18s ease, background 0.18s ease;
}
.darstellung-schalter[aria-checked="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.darstellung-schalter[aria-checked="true"] span {
  transform: translateX(22px);
  background: #fff;
}
.darstellung-schrift {
  min-width: 0;
  margin: 0;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
}
.darstellung-schrift legend {
  margin-bottom: 11px;
  padding: 0;
  color: var(--color-text);
  font-weight: 700;
}
.darstellung-schrift-auswahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.darstellung-schrift-auswahl button {
  min-height: 44px;
  padding: 8px 9px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.darstellung-schrift-auswahl button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.darstellung-panel-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  font-size: 0.84rem;
}
.darstellung-zuruecksetzen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   Header + Hauptnavigation
   ========================================================================== */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 58; /* über Navigation und Abdunkelung, damit die geöffnete Suche sichtbar bleibt */
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Reicht der Platz für Logo und Kopfzeilen-Links nicht mehr (etwa zwischen
     980 und 1050 Pixeln Fensterbreite), rutschen die Links in eine zweite
     Zeile. Vorher schrumpfte die Logospalte unter ihre Textbreite - der
     Schriftzug "Gemeinde Seebach" lief dann unter den Links durch. */
  flex-wrap: wrap;
  row-gap: 12px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  /* Die Logospalte behält ihre Breite; sie ist der Grund, warum überhaupt
     umgebrochen wird. */
  flex: 0 0 auto;
  min-width: 0;
  line-height: 1;
  text-decoration: none;
}
.header-logo-image {
  width: auto;
  height: 64px;
  flex: 0 0 auto;
}
.logo .logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.logo .logo-mark {
  font-family: var(--font-base);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo .logo-sub {
  margin-top: 7px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* In der zweiten Zeile stehen die Links rechtsbündig unter dem Logo. */
.header-actions {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}
.header-quicklink {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.header-quicklink:hover { color: var(--color-primary); text-decoration: underline; }
.search-toggle {
  width: 42px;
  height: 42px;
  justify-content: center;
  background: var(--color-primary-light);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  padding: 0;
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: #fff;
}
.header-search-panel[hidden] { display: none; }
.header-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 80;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid #d8d0c0;
  background: var(--color-beige);
  box-shadow: 0 22px 45px rgba(24, 45, 31, 0.18);
}
.header-search-panel .container {
  display: block;
  padding-top: 22px;
  padding-bottom: 22px;
}
.header-search-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
.header-search-form > i {
  margin-right: -54px;
  z-index: 1;
  color: var(--color-primary);
  font-size: 1.3rem;
  pointer-events: none;
}
.header-search-form input {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px 12px 50px;
  border: 1px solid #c8c4b9;
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font: inherit;
}
.header-search-form input:focus {
  border-color: var(--color-primary);
  outline: 3px solid rgba(86, 122, 60, 0.22);
  outline-offset: 0;
}
.header-search-form .btn { min-height: 54px; }
.header-search-close {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8c4b9;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.3rem;
  cursor: pointer;
}
.header-search-close:hover { background: #fff; }

.nav-primary {
  background: var(--color-primary);
}
.nav-primary .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
/*
 * Die Hauptnavigation bleibt beim Scrollen oben stehen. Der Kopf darüber
 * (Logo, Schnellzugriffe, Suche) wandert mit hinaus - er wird beim Lesen nicht
 * gebraucht, das Menü schon.
 *
 * `sticky` und nicht `fixed`: So behält die Navigation ihren Platz im Fluss,
 * und der Inhalt darunter beginnt an derselben Stelle wie bisher.
 */
.nav-primary {
  position: sticky;
  top: 0;
  z-index: 56;
}
.nav-primary ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  height: 100%;
}
.nav-primary > .container > ul {
  flex: 1;
  justify-content: flex-end;
}
.nav-primary li { display: flex; align-items: stretch; }
.nav-primary a.nav-link {
  color: #fff;
  font-weight: 600;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  padding: 0 18px;
  height: 100%;
  /* Ohne diese Zeile bricht "Familie & Bildung" in zwei Zeilen um, obwohl in
     der Leiste noch Platz ist: verschachtelte Flex-Boxen verkleinern den Punkt
     vorzeitig. Die Media Query unten sorgt dafür, dass die Leiste rechtzeitig
     auf die kompakte Darstellung wechselt. */
  white-space: nowrap;
}
.nav-primary a.nav-link:hover,
.nav-primary li.is-open > a.nav-link,
.nav-primary a.nav-link-active {
  background: rgba(0,0,0,0.14);
  text-decoration: none;
}

/* "Kontakt" ganz rechts optisch als Knopf absetzen statt als weiterer
   gleichrangiger Menüpunkt - direkter Weg zum Kontaktformular, das vorher
   nur in der Serviceleiste und im Footer stand. */
.nav-kontakt {
  align-items: center;
  margin-left: 6px;
  padding-right: 4px;
}
.nav-link--kontakt {
  height: auto;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}
.nav-link--kontakt:hover {
  background: rgba(255,255,255,0.28);
}

/* "Umfragen" wird farbig hinterlegt, damit die Bürgerbeteiligung in der grünen
   Leiste sofort auffällt - anders als "Kontakt" mit einer echten Farbe statt
   nur aufgehellt, weil eine laufende Umfrage eine befristete Einladung ist. */
.nav-umfragen {
  align-items: center;
  margin-left: 4px;
}
/* Bewusst kompakter als "Kontakt": mit voller Menüleiste fehlten sonst rund
   8 px, und "Familie & Bildung" rutschte in eine zweite Zeile. */
.nav-primary a.nav-link--umfragen {
  height: auto;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: .9rem;
  background: #e8b44a;
  color: #23331f;
}
.nav-primary a.nav-link--umfragen:hover,
.nav-primary a.nav-link--umfragen.nav-link-active {
  background: #f2c569;
  color: #23331f;
  text-decoration: none;
}

/* Mit Galerie und Umfragen besitzt die Hauptnavigation zwölf Punkte. Auf
   kleineren Desktop-/Querformat-Breiten bleiben sie in einer Zeile, ohne dass
   etwas abgeschnitten wird oder umbricht; ab 960 px greift weiterhin das
   mobile Menü. Die Obergrenze lag früher bei 1280 px - mit dem zusätzlichen
   Punkt "Umfragen" reicht der volle Abstand erst ab 1400 px (bei 1380 px läuft
   die Leiste nachweislich über - gemessen, nicht geschätzt). */
@media (min-width: 961px) and (max-width: 1399px) {
  .nav-primary a.nav-link {
    padding-right: 7px;
    padding-left: 7px;
    font-size: .82rem;
  }
}

/* Basis (auch als Rückfall für sehr schmale Tablet-Breiten zwischen den beiden
   Media Queries unten): einfaches Ein-/Ausblenden, ohne Positionierung. */
.nav-primary .dropdown { display: none; }
.nav-primary li.is-open .dropdown { display: block; }
.nav-primary .dropdown a {
  display: block;
  padding: 10px 20px;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-primary .dropdown a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  text-decoration: none;
}
/* .nav-primary ul setzt display:flex für ALLE <ul> im Menü (auch diese
   verschachtelte Liste) - hier bei jeder Breite wieder auf Blockliste
   zurückgesetzt, sonst stehen die Punkte nebeneinander statt untereinander. */
.nav-primary .dropdown-list { display: block; list-style: none; margin: 0; padding: 0; }
.nav-primary .dropdown-main-item {
  display: block;
}
.nav-primary .dropdown a.dropdown-main-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  background: rgba(255,255,255,0.08);
  line-height: 1.2;
}
.nav-primary .dropdown-main-link > i:first-child {
  flex: 0 0 auto;
  color: #aecb96;
  font-size: 1rem;
}
.nav-primary .dropdown-main-link span {
  flex: 1;
  min-width: 0;
}
.nav-primary .dropdown-main-link small,
.nav-primary .dropdown-main-link strong {
  display: block;
}
.nav-primary .dropdown-main-link small {
  margin-bottom: 3px;
  color: rgba(255,255,255,0.65);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-primary .dropdown-main-link strong {
  color: #fff;
  font-size: 0.96rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.nav-primary .dropdown-main-link .dropdown-main-link-pfeil {
  flex: 0 0 auto;
  color: #fff;
  font-size: 0.95rem;
  transition: transform 0.15s ease;
}
.nav-primary .dropdown a.dropdown-main-link:hover,
.nav-primary .dropdown a.dropdown-main-link:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.15);
  text-decoration: none;
}
.nav-primary .dropdown-main-link:hover .dropdown-main-link-pfeil,
.nav-primary .dropdown-main-link:focus-visible .dropdown-main-link-pfeil {
  transform: translateX(3px);
}

/* Mega-Menü: nur die aufgeklappte Fläche wird neu gestaltet. Die grüne
   Hauptnavigation darüber behält Abmessungen, Farben und Bedienung. */
@media (min-width: 961px) {
  .nav-primary .dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    background: var(--color-beige);
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
    box-shadow: 0 24px 60px rgba(19,28,22,0.22);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .nav-primary li.is-open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-primary .dropdown-inner {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    min-height: 360px;
    position: relative;
  }

  /* Der dunkle Navigationsblock schließt links bis an den Fensterrand an.
     Inhalt und Außenkante bleiben trotzdem am bestehenden Container-Raster. */
  .nav-primary .dropdown-list {
    width: 330px;
    flex: 0 0 330px;
    padding: 22px 0 30px;
    background: var(--color-primary);
    box-shadow: -100vw 0 0 100vw var(--color-primary);
  }
  .nav-primary .dropdown-main-item {
    margin-bottom: 8px;
  }
  .nav-primary .dropdown-item { position: static; display: block; }
  .nav-primary .dropdown-item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 13px 24px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.88);
    background: transparent;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .nav-primary .dropdown-item > a i {
    flex: 0 0 auto;
    color: #aecb96;
    font-size: 0.84rem;
    transition: transform 0.15s ease;
  }
  .nav-primary .dropdown-item > a:hover,
  .nav-primary .dropdown-item > a:focus-visible,
  .nav-primary .dropdown-item.is-flyout-open > a,
  .nav-primary .dropdown-item.has-children:hover > a,
  .nav-primary .dropdown-item.has-children:focus-within > a {
    color: #fff;
    background: rgba(255,255,255,0.09);
    text-decoration: none;
  }
  .nav-primary .dropdown-item.is-flyout-open > a i,
  .nav-primary .dropdown-item.has-children:hover > a i,
  .nav-primary .dropdown-item.has-children:focus-within > a i {
    transform: translateX(3px);
  }

  /* Standardinhalt rechts: Freitext, Bild oder redaktionelle Listen. */
  .dropdown-visual {
    flex: 1;
    min-width: 0;
    padding: 46px 50px 42px;
    color: var(--color-primary);
    background: var(--color-beige);
  }
  .dropdown-visual.dropdown-visual--zwei {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
  }
  .dropdown-visual--zwei .dropdown-visual-box {
    min-width: 0;
  }
  .dropdown-visual--zwei .dropdown-visual-box + .dropdown-visual-box {
    padding-left: 44px;
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  }
  .dropdown-visual-titel {
    display: block;
    margin-bottom: 18px;
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  .nav-primary .dropdown-visual-liste {
    display: block;
    height: auto;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
  }
  .dropdown-visual-liste li {
    display: block;
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 13%, transparent);
  }
  .nav-primary .dropdown-visual-liste a {
    padding: 12px 0;
    color: var(--color-primary);
    font-weight: 650;
    line-height: 1.35;
  }
  .nav-primary .dropdown-visual-liste a:hover {
    color: var(--color-primary-dark);
    background: transparent;
  }
  .dropdown-visual-text {
    max-width: 60ch;
    margin-bottom: 18px;
    color: var(--color-text-muted);
    font-size: 0.96rem;
  }
  .nav-primary .dropdown a.dropdown-visual-link {
    display: inline-flex;
    padding: 0 0 4px;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary-dark);
    font-size: 0.9rem;
    font-weight: 750;
  }
  .dropdown-visual-bild {
    width: 100%;
    max-width: 420px;
    height: 170px;
    margin-bottom: 18px;
    border-radius: var(--radius);
    object-fit: cover;
  }
  .dropdown-visual--zwei .dropdown-visual-bild { max-width: 100%; }

  /* Rechts neben der dauerhaft sichtbaren Hauptmenüliste liegen zwei Boxen:
     Das Untermenü der gewählten Seite steht automatisch links, ihr im
     Seiteneditor gewählter Inhalt rechts. */
  .dropdown-flyout {
    display: none;
    position: absolute;
    inset: 0 0 0 330px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    padding: 42px 50px;
    overflow-y: auto;
    background: var(--color-beige);
    z-index: 2;
  }
  /* Nur das Untermenü, keine Box daneben: eine Spalte über die volle Breite.
     Die Einträge brechen dann nicht um, und der Kasten bleibt ohne
     Scrollbalken. */
  .dropdown-flyout--einspaltig {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Die frei gewordene Breite trägt die Einträge in mehreren Spalten. Sonst
     stünde eine lange, schmale Liste in einer sehr breiten Fläche - und ab
     etwa fünf Unterpunkten käme der Scrollbalken zurück, weil die Fläche nur
     so hoch ist wie die Hauptmenüliste daneben. */
  .dropdown-flyout--einspaltig .dropdown-flyout-links {
    /* Spaltenbreite statt Spaltenzahl: Auf breiten Bildschirmen entstehen von
       selbst drei Spalten, auf schmalen zwei. So bleibt auch eine lange Liste
       in der Höhe, die neben der Hauptmenüliste zur Verfügung steht. */
    columns: 260px;
    column-gap: 56px;
  }
  .dropdown-item.has-children:hover .dropdown-flyout,
  .dropdown-item.has-children:focus-within .dropdown-flyout,
  .dropdown-item.has-children.is-flyout-open .dropdown-flyout {
    display: grid;
  }

  .dropdown-flyout-navigation {
    min-width: 0;
  }
  .nav-primary .dropdown-flyout-navigation a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 52px;
    padding: 13px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-weight: 650;
    line-height: 1.35;
    break-inside: avoid;
  }
  .nav-primary .dropdown-flyout-overview {
    /* Der Pfeil steht direkt hinter dem Namen, nicht am rechten Rand.
       Mit "space-between" hing er an der Kante der Fläche - bei einem Menü
       ohne Box daneben 800 Pixel vom Text entfernt, bei einem mit Box halb
       so weit. Derselbe Kasten sah dadurch je nach Nachbarschaft anders aus;
       den Pfeil am Text zu lassen ist in beiden Fällen dasselbe Bild. */
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 22px;
    padding: 0 2px 18px;
    border-bottom: 2px solid rgba(86,122,60,0.38);
  }
  .dropdown-flyout-overview small {
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary-dark);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  .dropdown-flyout-overview strong {
    display: block;
    color: var(--color-primary);
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .nav-primary .dropdown-flyout-overview i {
    color: var(--color-primary);
    font-size: 1.25rem;
  }
  .dropdown-flyout-links {
    display: block;
  }
  .nav-primary .dropdown-flyout-navigation a i {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: 0.84rem;
  }
  .nav-primary .dropdown-flyout-navigation a:hover,
  .nav-primary .dropdown-flyout-navigation a:focus-visible {
    color: var(--color-primary-dark);
    background: transparent;
    text-decoration: none;
  }
  .dropdown-flyout .dropdown-flyout-visual {
    min-width: 0;
    padding: 0 0 0 44px;
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
    background: transparent;
  }

  body.menu-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 55;
  }
}

/* ==========================================================================
   Schalter für die Untermenüs der Hauptnavigation
   Der Menüpunkt selbst ist und bleibt ein Link auf die Übersichtsseite.
   Das Auf- und Zuklappen übernimmt dieser Knopf.
   ========================================================================== */
.nav-untermenue-schalter {
  /* Am Schreibtisch nicht sichtbar: dort öffnet der Klick auf den Menüpunkt
     das Mega-Menü wie gewohnt. Für die Tastatur bleibt der Knopf erreichbar
     und wird beim Anspringen sichtbar (siehe :focus-visible weiter unten). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.nav-untermenue-schalter:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 10px;
  clip: auto;
  overflow: visible;
  display: flex;
  align-items: center;
}
.nav-untermenue-zeichen::before {
  content: '+';
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: #aecb96;
}
.nav-untermenue-schalter[aria-expanded="true"] .nav-untermenue-zeichen::before {
  content: '−';
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding: 56px 0 0;
  background: var(--color-bg-alt);
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-badge {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero h1 { font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 1.15; margin-bottom: 18px; }
.hero-lead { font-size: 1.05rem; margin-bottom: 28px; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 0; }
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-pill-filled { background: var(--color-primary); color: #fff; }
.btn-pill-filled:hover { background: var(--color-primary-dark); color: #fff; text-decoration: none; }
.btn-pill-outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-pill-outline:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
.media-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, #3d4d33, var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-placeholder .placeholder-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.18);
  padding: 6px 12px;
  border-radius: 999px;
}
.media-placeholder .placeholder-label i { font-size: 1rem; }

.hero-media { position: relative; padding-bottom: 40px; }
.hero-media::before {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px dashed var(--color-border);
  border-radius: 24px;
  z-index: 0;
}
.hero-media .media-placeholder,
.hero-media img {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hero-media .media-placeholder { background: linear-gradient(135deg, var(--color-accent), #c9622a); }

/* ==========================================================================
   Kachel-Icons (Quick Links)
   ========================================================================== */
.quicklinks {
  background: var(--color-bg-alt);
  padding-bottom: 0;
}
.quicklinks .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(31,61,43,0.14);
  overflow: hidden;
  transform: translateY(40px);
}
.quicklink {
  padding: 26px 28px;
  border-right: 1px solid var(--color-border);
  text-align: left;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
}
.quicklink:last-child { border-right: 0; }
.quicklink:hover { background: var(--color-primary-light); text-decoration: none; }
.quicklink i {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  font-style: normal;
}
.quicklink .label { display: block; font-weight: 700; color: var(--color-primary); }

/* ==========================================================================
   Sektionen allgemein
   ========================================================================== */
.section { padding: 64px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-header { max-width: 640px; margin-bottom: 36px; }

/* Themen im Fokus */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.topics-grid.topics-grid--verzeichnis {
  grid-template-columns: repeat(4, 1fr);
}
.verzeichnis-mehr-laden[hidden] {
  display: none;
}
.verzeichnis-mehr-laden {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.topic-card[hidden] {
  display: none;
}
.topic-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
/* Kacheln/Karten blenden beim Scrollen sanft ein (angelehnt an
   unterwellenborn.de): Vereine/Gewerbe, Veranstaltungen, Aktuelles und
   Verwaltung. Die Klasse "hat-einblendung" wird erst per JavaScript gesetzt
   - ohne JS oder bei reduzierter Bewegungspräferenz bleiben alle Karten
   normal und sofort sichtbar. Direkte-Kind-Selektor, damit dieselbe Regel
   für unterschiedliche Karten-Klassen (.topic-card, .datierte-karte,
   .verwaltung-karte) funktioniert. */
[data-verzeichnis-liste].hat-einblendung > *,
[data-einblend-liste].hat-einblendung > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-verzeichnis-liste].hat-einblendung > *.ist-sichtbar,
[data-einblend-liste].hat-einblendung > *.ist-sichtbar {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-verzeichnis-liste].hat-einblendung > *,
  [data-einblend-liste].hat-einblendung > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.topic-card .topic-media {
  width: 100%;
  height: 140px;
  display: block;
  object-fit: cover;
  object-position: center;
  background-color: var(--color-bg-alt-2);
}
/* Hochkante Bilder von oben anschneiden statt aus der Mitte - sonst zeigt
   die Kachel eines Veranstaltungsplakats nur ein Band ohne Information.
   Gesetzt wird die Klasse in PHP, siehe medienHochkantKlasse(). */
.topic-card .topic-media--hochkant {
  object-position: top;
}
.topic-card .topic-media--logo {
  height: 180px;
  object-fit: contain;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}
.topic-card .topic-media--platzhalter {
  height: 180px;
  object-fit: cover;
  object-position: center;
}
.topic-card .topic-contact {
  font-size: 0.88rem;
  margin-bottom: 6px;
  word-break: break-word;
}
.topic-card .topic-contact a { font-weight: 600; }
.topic-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.topic-datum-zeit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
/* Folgt die Terminliste (termine.php) mit ihren Datum-/Uhrzeit-Boxen direkt
   vor dem Button, übernimmt bereits die Box das Nachuntendrücken - der
   Button braucht dann keinen eigenen Abstand mehr zum Kartenrand. */
.topic-datum-zeit + .topic-actions {
  margin-top: 10px;
  padding-top: 0;
}
.topic-datum-box,
.topic-zeit-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.82rem;
  text-align: center;
}
.topic-actions .btn-topic {
  display: inline-block;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 8px 10px;
  border-radius: var(--radius);
  text-decoration: none;
}
.topic-actions .btn-topic:hover {
  background: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
}
.topic-card .topic-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.topic-card h3 { margin-bottom: 8px; }
.topic-card p { font-size: 0.95rem; margin-bottom: 14px; }
.topic-card .topic-link { font-weight: 600; font-size: 0.92rem; }

/* Aktuelle Meldungen: große Feature-Karte links + einfache Liste rechts */
.meldungen-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}
.meldung-feature {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(31,61,43,0.06);
  overflow: hidden;
}
.meldung-feature .topic-media, .meldung-feature .media-placeholder { height: 220px; }
.meldung-feature-body { padding: 32px; }
.meldung-feature-kategorie {
  display: block;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.meldung-feature-body h3 { font-size: 1.3rem; margin-bottom: 10px; }
.meldung-feature-body h3 a { color: inherit; }
.meldung-feature-body p { margin-bottom: 14px; }
.meldung-feature-datum { color: var(--color-text-muted); font-size: 0.85rem; }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: 0; }
.news-item a { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--color-text); font-weight: 600; font-size: 0.98rem; }
.news-item a:hover { color: var(--color-primary); text-decoration: none; }
.news-item .datum { display: block; color: var(--color-text-muted); font-size: 0.82rem; font-weight: 400; margin-top: 4px; }
.news-item .pfeil { color: var(--color-text-muted); flex-shrink: 0; }

.teaser-lead { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin-bottom: 1.2em; max-width: none; }
.weiterlesen { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* Kalender (Veranstaltungen & Termine) */
.kalender { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; padding: 20px; margin-bottom: 40px; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kalender-kopf h2 { margin: 0; font-size: 1.15rem; }
.kalender-nav { display: flex; gap: 8px; }
.kalender-nav a { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 4px 10px; font-weight: 600; font-size: 0.85rem; }
.kalender-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kalender-wochentag { text-align: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); padding-bottom: 6px; }
.kalender-tag { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 0.9rem; color: var(--color-text); }
.kalender-tag.ausserhalb { color: var(--color-border); }
.kalender-tag.heute { border: 1px solid var(--color-primary); font-weight: 700; }
.kalender-tag.hat-termin { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
.kalender-tag.hat-termin:hover { background: var(--color-primary); color: #fff; }
.kalender-tag .punkt { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-top: 2px; }

/* Bildergalerie (Meldungen, Seiten, Vereine/Wirtschaft) */
.bildergalerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.bildergalerie-item { margin: 0; }
/* Alle Kacheln gleich hoch, unabhängig vom Seitenverhältnis des Fotos: das
   Bild füllt die Box formatfüllend aus (object-fit: cover), Hoch- und
   Querformat stehen dadurch in einer sauberen Reihe.
   Die Auswahl ist bewusst mit `.page-content`/`.infobox` doppelt notiert:
   weiter unten setzt `.page-content img { height: auto }` bei gleicher
   Spezifität die feste Höhe sonst wieder ausser Kraft - auf den Detailseiten
   von Vereinen, Gewerbe, Meldungen und Seiten waren die Bilder deshalb
   unterschiedlich hoch. */
.bildergalerie-item img,
.page-content .bildergalerie-item img,
.infobox .bildergalerie-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  cursor: zoom-in;
  background: var(--color-bg-alt-2);
}
.bildergalerie-item figcaption {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.seiten-fotoalben {
  margin-top: clamp(38px, 6vw, 68px);
  padding-top: clamp(28px, 4vw, 42px);
  border-top: 1px solid var(--color-border);
}
.seiten-fotoalbum + .seiten-fotoalbum {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: clamp(34px, 5vw, 52px);
  border-top: 1px solid var(--color-border);
}
.seiten-fotoalbum-kopf {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px 28px;
  margin-bottom: 18px;
}
.seiten-fotoalbum-kopf .kicker { margin: 0 0 5px; }
.seiten-fotoalbum-kopf h2 { margin: 0; }
.seiten-fotoalbum-archivlink {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 800;
}
.seiten-fotoalbum-beschreibung {
  max-width: 74ch;
  margin-bottom: 20px;
  color: var(--color-text-muted);
}
.seiten-fotoalbum-beschreibung > :last-child { margin-bottom: 0; }
.seiten-fotoalbum .seiten-fotoalbum-bilder {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  margin-top: 20px;
}
.seiten-fotoalbum .bildergalerie-item img,
.page-content .seiten-fotoalbum .bildergalerie-item img {
  height: 175px;
}
@media (max-width: 640px) {
  .seiten-fotoalbum-kopf {
    align-items: flex-start;
    flex-direction: column;
  }
  .seiten-fotoalbum-archivlink { flex-basis: auto; }
}
.infobox img.lightbox-bild, .page-content img.lightbox-bild { cursor: zoom-in; }

/* Historische Seiten: Bilder bleiben Teil des bearbeitbaren Fließtextes.
   Quill legt jedes Bild in einem eigenen Absatz ab; diese Absätze bilden
   deshalb ohne zusätzliche, beim Bearbeiten leicht verlierbare Klassen ein
   ein kompaktes Raster mit bis zu vier Vorschaubildern. */
.seite-inhalt--geschichte p:has(> img),
.seite-inhalt--entwicklung-nach-der-wiedervereinigung p:has(> img) {
  display: inline-flex;
  width: calc(25% - 16px);
  margin: 8px 12px 18px 0;
  vertical-align: top;
}
.seite-inhalt--geschichte p:has(> img) img,
.seite-inhalt--entwicklung-nach-der-wiedervereinigung p:has(> img) img {
  width: 100%;
  height: 190px;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--color-bg-alt-2);
  box-shadow: 0 8px 26px rgba(20, 43, 34, 0.12);
}

/* Die Amtschronik ist bewusst keine Tabelle: einzelne Einträge lassen sich
   im Standardeditor als einfache Listenelemente ergänzen oder korrigieren. */
.seite-inhalt--schultheissen-buergermeister > ul,
.seite-inhalt--schultheissen-buergermeister > ol {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.seite-inhalt--schultheissen-buergermeister > ul > li,
.seite-inhalt--schultheissen-buergermeister > ol > li {
  margin: 0;
  padding: 18px 20px;
  min-height: 88px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
}
.seite-inhalt--schultheissen-buergermeister > ul > li img,
.seite-inhalt--schultheissen-buergermeister > ol > li img {
  display: block;
  width: 92px;
  height: 112px;
  margin: 14px 0 0;
  padding: 6px;
  object-fit: contain;
  border-radius: calc(var(--radius) - 3px);
  background: var(--color-bg-alt-2);
}

/* Porträte stehen links; Amtszeit und Name bleiben als normal bearbeitbarer
   Listeninhalt rechts daneben. Einträge ohne Bild behalten ihr Kartenlayout. */
.seite-inhalt--schultheissen-buergermeister > ul > li:has(> img),
.seite-inhalt--schultheissen-buergermeister > ol > li:has(> img) {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-content: center;
  min-height: 152px;
}

.seite-inhalt--schultheissen-buergermeister > ul > li:has(> img) > br,
.seite-inhalt--schultheissen-buergermeister > ol > li:has(> img) > br {
  display: none;
}

.seite-inhalt--schultheissen-buergermeister > ul > li:has(> img) > strong,
.seite-inhalt--schultheissen-buergermeister > ol > li:has(> img) > strong {
  grid-column: 2;
  align-self: end;
  margin-bottom: 4px;
  color: var(--color-primary);
}

.seite-inhalt--schultheissen-buergermeister > ul > li:has(> img) > img,
.seite-inhalt--schultheissen-buergermeister > ol > li:has(> img) > img {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: start;
  margin: 0;
}

/* Lightbox (Klick-Vergrößerung für alle markierten Bilder) */
body.lightbox-offen {
  overflow: hidden;
}
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 20, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 32px 92px;
}
.lightbox-overlay figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(1120px, 100%);
  max-height: calc(100vh - 64px);
  margin: 0;
}
.lightbox-overlay img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 142px);
  border-radius: var(--radius);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 38px;
  margin-top: 10px;
}
.lightbox-overlay figcaption {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 0.95rem;
}
.lightbox-zaehler {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  color: rgba(255,255,255,0.72);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  background: rgba(255,255,255,0.09);
  cursor: pointer;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,0.09);
  font-size: 1.3rem;
  cursor: pointer;
  transform: translateY(-50%);
}
.lightbox-nav[hidden] {
  display: none;
}
.lightbox-zurueck { left: 22px; }
.lightbox-weiter { right: 22px; }
.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: var(--color-primary);
  border-color: rgba(255,255,255,0.48);
  outline: 3px solid rgba(255,255,255,0.22);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .lightbox-overlay {
    padding: 68px 12px 80px;
  }
  .lightbox-overlay figure {
    max-height: calc(100vh - 148px);
  }
  .lightbox-overlay img {
    max-height: calc(100vh - 204px);
  }
  .lightbox-nav {
    top: auto;
    bottom: 18px;
    width: 46px;
    height: 46px;
    transform: none;
  }
  .lightbox-zurueck {
    left: calc(50% - 54px);
  }
  .lightbox-weiter {
    right: calc(50% - 54px);
  }
  .lightbox-close {
    top: 12px;
    right: 12px;
  }
  .lightbox-meta {
    gap: 9px;
  }
}

.termine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.termine-grid .topic-card .topic-contact { display: flex; align-items: center; gap: 6px; }
@media (max-width: 960px) { .termine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .termine-grid { grid-template-columns: 1fr; } }

/* Aktuelle Meldungen und Termine direkt auf Inhaltsseiten wie Bibliothek oder Red Cube. */
.seiten-redaktion {
  margin-top: clamp(42px, 6vw, 72px);
  padding-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--color-border);
}
.seiten-redaktion-kopf {
  max-width: 680px;
  margin-bottom: 24px;
}
.seiten-redaktion-kopf > span {
  display: block;
  margin-bottom: 6px;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.seiten-redaktion-kopf h2 { margin-bottom: 8px; }
.seiten-redaktion-kopf p { margin: 0; color: var(--color-text-muted); }
.seiten-redaktion-grid,
.seiten-termine .termine-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.seiten-redaktion .topic-card,
.seiten-redaktion .topic-body {
  min-width: 0;
}
.seiten-redaktion .topic-card h3,
.seiten-redaktion .topic-card p {
  overflow-wrap: anywhere;
}
.seiten-redaktion-grid .topic-contact { display: flex; align-items: center; gap: 6px; }
.seiten-redaktion-alle { margin: 22px 0 0; font-weight: 700; }
@media (max-width: 680px) {
  .seiten-redaktion-grid,
  .seiten-termine .termine-grid { grid-template-columns: 1fr; }
}

/* Angebote der Wohnungsverwaltung: drei schmalere Kacheln je Reihe - so bleibt
   auch mit den Boxen der rechten Seitenleiste (330 px) genug Platz. */
.wohnangebote-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.wohnangebote-grid .topic-media { height: 124px; }
.wohnangebote-grid .topic-body { padding: 16px 18px 20px; }
.wohnangebote-grid .topic-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.wohnangebote-grid .topic-card p { font-size: 0.9rem; margin-bottom: 10px; }
.wohnangebote-grid .topic-contact { font-size: 0.84rem; margin-bottom: 4px; }
.wohnangebote-grid .btn-topic { padding: 9px 16px; font-size: 0.9rem; }
.wohnangebot-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 8px 12px;
  margin: 12px 0 4px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.wohnangebot-daten dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.wohnangebot-daten dd {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}
/* Steht rechts eine Box, bleiben 330 px weniger Platz - dann früher zwei
   Kacheln, damit sie nicht zu schmal werden. Unter 960 px rutscht die
   Seitenleiste ohnehin unter den Text, dort gilt wieder die normale Regel. */
@media (min-width: 961px) and (max-width: 1260px) {
  .page-layout.mit-infobox .wohnangebote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wohnangebote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .wohnangebote-grid { grid-template-columns: 1fr; }
}
.dropdown-visual-liste a small {
  display: block;
  font-weight: 500;
  opacity: 0.8;
}

/* Veranstaltungen & Termine (Startseite): 4 gleich große Karten mit Datum */
.termine-reihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.termin-karte {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(31,61,43,0.06);
  padding: 24px;
}
.termin-karte .datum-block { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.termin-karte .tag { font-size: 1.6rem; font-weight: 700; color: var(--color-primary); line-height: 1; }
.termin-karte .monat { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.termin-karte h3 { font-size: 1rem; margin-bottom: 4px; }
.termin-karte h3 a { color: var(--color-text); }
.termin-karte .ort { font-size: 0.85rem; color: var(--color-text-muted); }
@media (max-width: 960px) { .termine-reihe { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .termine-reihe { grid-template-columns: 1fr; } }

/* Amtliche Bekanntmachung: volle Breite, dunkelgrün */
.bekanntmachung-banner {
  background: var(--color-primary);
  color: #fff;
  padding: 32px 0;
}
.bekanntmachung-banner .container { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.bekanntmachung-banner .inhalt { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 260px; }
.bekanntmachung-pille {
  flex-shrink: 0;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.bekanntmachung-banner p { color: rgba(247,243,234,0.9); margin: 0; max-width: none; }
.bekanntmachung-banner .btn-pill-outline { border-color: rgba(247,243,234,0.4); color: #f7f3ea; flex-shrink: 0; }
.bekanntmachung-banner .btn-pill-outline:hover { background: rgba(247,243,234,0.15); }

/* Seebach auf einen Blick: Bento-Fotogrid (1 großes + 1 breites + 2 kleine Feld) */
.ueberblick-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 20px;
}
.ueberblick-kachel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--color-bg-alt-2);
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.ueberblick-kachel:hover { text-decoration: none; }
.ueberblick-kachel:nth-child(1) { grid-row: 1 / 3; }
.ueberblick-kachel:nth-child(2) { grid-column: 2 / 4; }
.ueberblick-kachel img, .ueberblick-kachel .media-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ueberblick-kachel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(27,27,22,0.75) 0%, rgba(27,27,22,0) 55%);
}
.ueberblick-kachel-text { position: relative; z-index: 1; padding: 20px 22px; }
.ueberblick-kachel-text strong { display: block; font-size: 1.15rem; font-weight: 700; }
.ueberblick-kachel-text span { display: block; font-size: 0.85rem; color: rgba(247,243,234,0.85); margin-top: 4px; }
@media (max-width: 768px) {
  .ueberblick-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
  .ueberblick-kachel:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 3; }
  .ueberblick-kachel:nth-child(2) { grid-column: 1 / 3; grid-row: 2 / 3; }
}

/* Vereine & Gemeinschaft: horizontal scrollende Foto-Reihe */
.vereine-reihe {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.vereine-reihe .ueberblick-kachel {
  flex: 0 0 240px;
  height: 280px;
}
.vereine-reihe .ueberblick-kachel:nth-child(1) { grid-row: auto; }

/* ==========================================================================
   Unterseiten-Layout (seite.html)
   ========================================================================== */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb .sep { margin: 0 8px; color: #b6b9b0; }
.breadcrumb .current { color: var(--color-primary); font-weight: 600; }

.page-header {
  position: relative;
  overflow: hidden;
  padding: 54px 0 50px;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.08) 64%),
    var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.page-header--mit-bild {
  display: flex;
  min-height: 230px;
  align-items: center;
  background-color: var(--color-primary-dark);
  /* Der Verlauf hält die Textspalte links dunkel genug für weisse Schrift,
     gibt das Foto rechts davon aber deutlich frei. Bis 52 % bleibt genug
     Abdeckung, damit auch lange Überschriften auf hellen Bildstellen noch
     kontrastreich stehen (grosse Schrift, mindestens 3:1). */
  background-image:
    linear-gradient(
      90deg,
      rgba(22, 41, 29, 0.88) 0%,
      rgba(22, 41, 29, 0.84) 34%,
      rgba(22, 41, 29, 0.70) 52%,
      rgba(22, 41, 29, 0.22) 80%,
      rgba(22, 41, 29, 0.06) 100%
    ),
    var(--page-header-bild);
  background-position: center, center right;
  background-repeat: no-repeat;
  background-size: cover;
}
.page-header--mit-bild > .container {
  width: 100%;
}
.page-header::after {
  content: '';
  position: absolute;
  right: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  bottom: -62px;
  width: 210px;
  height: 150px;
  border: 24px solid rgba(86,122,60,0.09);
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}
.page-header--mit-bild::after {
  display: none;
}
.page-header--mit-zurueck .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  /* Mehr Luft als vorher (18 px): Bei langen Überschriften standen die
     Schaltflächen sonst fast auf der letzten Zeile. */
  gap: 28px;
}
/* Datum/Einordnung links, Schaltflächen rechts - auf einer Linie. */
.detail-kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.detail-kopf-zeile .detail-beitragsmeta {
  margin: 0;
}
.detail-kopf-zeile .detail-kopf-aktionen {
  width: auto;
  flex: 0 1 auto;
}
@media (max-width: 640px) {
  .detail-kopf-zeile .detail-kopf-aktionen {
    width: 100%;
  }
}
.page-header--mit-zurueck .page-header-text {
  min-width: 0;
  width: 100%;
}
.page-header.page-header--mit-zurueck h1 {
  font-size: clamp(1.65rem, 2.35vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.btn-zurueck {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  text-decoration: none;
}
.btn-zurueck:hover,
.btn-zurueck:focus-visible {
  text-decoration: none;
}
.detail-kopf-aktionen {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.btn-pdf-druckfassung {
  border-color: var(--color-primary);
  background: #fff;
  color: var(--color-primary);
}
.btn-pdf-druckfassung:hover,
.btn-pdf-druckfassung:focus-visible {
  background: #f2efe4;
  color: var(--color-primary-dark);
  text-decoration: none;
}
[data-pdf-druckfassung][aria-busy="true"] {
  opacity: .68;
  cursor: wait;
}
@media (max-width: 640px) {
  .btn-zurueck {
    align-self: flex-start;
  }
  .detail-kopf-aktionen {
    width: 100%;
    justify-content: flex-start;
  }
}
.page-header h1 {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  white-space: nowrap;
}
.page-header--mit-bild h1 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}
.page-kicker {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 11px;
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.page-header--mit-bild .page-kicker {
  color: #f2e8c8;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.page-header--mit-zusatz {
  padding-top: 30px;
  padding-bottom: 30px;
}
.page-header--mit-zusatz .page-header-zusatz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.page-header--mit-zusatz .page-header-text { min-width: 0; }
.page-header--mit-zusatz h1 { white-space: normal; }
.page-header-untertitel {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--color-primary-dark);
  font-size: 1.05rem;
  font-weight: 800;
}
.page-header-beschreibung {
  max-width: 760px;
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: .94rem;
  line-height: 1.45;
}
.page-header--mit-bild .page-header-untertitel,
.page-header--mit-bild .page-header-beschreibung {
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.page-header-kennzahl {
  display: grid;
  min-width: 155px;
  padding: 18px 20px;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.page-header-kennzahl strong {
  color: var(--color-primary-dark);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.85rem;
  font-weight: 400;
  line-height: .9;
}
.page-header-kennzahl span {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Die Seiten derselben Rubrik liegen als ruhige Reiter direkt unter dem
   Seitenkopf. Damit bleibt der Inhalt frei von einer dauerhaft wiederholten
   Seitennavigation. */
.seiten-reiter {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.seiten-reiter .container {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.seiten-reiter a {
  position: relative;
  flex: 0 0 auto;
  padding: 17px 1px 15px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.seiten-reiter a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.16s ease;
}
.seiten-reiter a:hover,
.seiten-reiter a.active {
  color: var(--color-primary-dark);
  text-decoration: none;
}
.seiten-reiter a:hover::after,
.seiten-reiter a.active::after {
  transform: scaleX(1);
}

/* Einspaltig als Standard - übersichtlicher als eine feste 3-Spalten-Sidebar-Konstruktion.
   Nur wenn eine Seite eine eigene Infobox hat (z.B. ein Titelbild), wird eine
   zweite, schmalere Spalte daneben gesetzt - keine überall wiederholte
   statische Box. */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  padding-top: 54px;
  padding-bottom: 88px;
  align-items: start;
}
.inhalt-container {
  padding-top: 32px;
  padding-bottom: 80px;
}
.page-layout.mit-infobox {
  grid-template-columns: minmax(0, 1fr) 330px;
}
.page-main {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.page-main-breit { max-width: none; }
.page-main-breit.gemeinderat-inhalt { max-width: 1180px; }
.page-layout.mit-infobox .gemeinderat-inhalt { max-width: none; }
.page-main > :first-child { margin-top: 0; }
.seiten-einleitung {
  max-width: 760px;
  margin-bottom: 36px;
}

/* Geschwister-Seiten als Pillen-Reihe statt fester Sidebar-Spalte */
.sibling-pills {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.sibling-pills a {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
}
.sibling-pills a:hover { border-color: var(--color-primary); text-decoration: none; }

/* Filterblock im Verzeichnis (Vereine/Wirtschaft): Ort und Kategorie als
   eigene Zeilen in einem umrandeten Kasten statt loser Pillenreihen, damit
   beide Filter bei gleichzeitiger Nutzung klar getrennt bleiben. */
.verzeichnis-filter {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.verzeichnis-filter-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.verzeichnis-filter-zeile + .verzeichnis-filter-zeile {
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.verzeichnis-filter-label {
  flex-shrink: 0;
  min-width: 84px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.verzeichnis-filter-pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.verzeichnis-filter-pillen a {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
}
.verzeichnis-filter-pillen a:hover { border-color: var(--color-primary); text-decoration: none; }
/* Ganz rechts in der Ort-Zeile (oder, falls es noch keine Ort-Pillen gibt,
   in einer eigenen Zeile): Aufruf, einen fehlenden Verein/Betrieb selbst
   vorzuschlagen. */
.verzeichnis-eintragen-button {
  margin-left: auto;
  padding: 8px 16px;
  font-size: 0.85rem;
}
/* Umschalter Kalender <-> Liste (veranstaltungskalender.php <-> termine.php) */
.ansicht-wechsel-zeile { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.ansicht-wechsel-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
}
.ansicht-wechsel-button:hover {
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}
.verzeichnis-filter-pillen a.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
/* Kategorien+Datum-Karten für Aktuelles/Bekanntmachungen (Vorbild ruhla.de) */
.datierte-liste { display: flex; flex-direction: column; gap: 20px; }
.datierte-karte { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; padding: 24px; }
.datierte-karte-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.detail-beitragsmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.datum-pille, .kategorie-pille, .ort-pille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius);
}
.datum-pille, .ort-pille { background: var(--color-bg-alt-2); color: var(--color-text); }
.kategorie-pille { background: var(--color-primary-light); color: var(--color-primary-dark); }
.kategorie-pille:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
.datierte-karte h3 { margin-bottom: 8px; }
.datierte-karte h3 a { color: inherit; }
.datierte-karte p { margin-bottom: 14px; }

.kategorien-box { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.kategorien-box h2 { background: var(--color-bg-alt-2); margin: 0; padding: 14px 20px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kategorien-box ul { list-style: none; margin: 0; padding: 6px 0; }
.kategorien-box li { border-bottom: 1px solid var(--color-border); }
.kategorien-box li:last-child { border-bottom: 0; }
.kategorien-box a { display: block; padding: 10px 20px; color: var(--color-text); font-weight: 600; font-size: 0.9rem; }
.kategorien-box a:hover, .kategorien-box a.active { background: var(--color-primary-light); color: var(--color-primary-dark); text-decoration: none; }
.kategorien-box .anzahl { color: var(--color-text-muted); font-weight: 400; }

.seiten-sidebar {
  display: grid;
  gap: 24px;
  align-self: start;
}

.sibling-pills a.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Bürgerservice-Übersicht: übersichtliche Aktionskacheln im normalen
   Seitenraster; optionale redaktionelle Boxen stehen in der rechten Spalte. */
.service-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.service-tile {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 10px 28px rgba(31,61,43,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-tile-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.service-tile-icon i { font-size: 1.2rem; }
.service-tile strong { font-size: 1.05rem; color: var(--color-text); }
.service-tile span.beschreibung { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.5; }
.service-tile[href]:hover { box-shadow: 0 14px 34px rgba(31,61,43,0.12); }
.service-tile--mangel {
  border: 1px solid #d9aa75;
  background: linear-gradient(145deg, #fff9f1, #f7ecdd);
  box-shadow: 0 10px 28px rgba(166,98,37,0.1);
}
.service-tile--mangel[href]:hover {
  border-color: #bd7638;
  box-shadow: 0 14px 34px rgba(166,98,37,0.17);
}
.service-tile--mangel .service-tile-icon {
  background: #d98b3b;
  color: #fff;
}
.service-tile--mangel strong { color: #7b421d; }

.buergerservice-anfrage {
  margin-top: 48px;
  scroll-margin-top: calc(var(--klebehoehe) + 24px);
}
.buergerservice-anfrage-kopf {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 10%, rgba(86,122,60,0.15), transparent 34%),
    var(--color-beige);
}
.buergerservice-anfrage-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.buergerservice-anfrage-kopf h2 {
  margin-bottom: 8px;
}
.buergerservice-anfrage-kopf p {
  max-width: 820px;
  margin: 0;
}
.buergerservice-anfrage-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: none;
  margin: 0 0 18px;
  padding: 13px 16px;
  border-radius: 10px;
  background: var(--color-primary-light);
  color: var(--color-text);
  font-size: 0.88rem;
}
.buergerservice-anfrage-hinweis i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--color-primary);
  font-size: 1.1rem;
}
.buergerservice-anfrage-formular {
  border: 1px solid var(--color-border);
  box-shadow: 0 14px 36px rgba(31,61,43,0.08);
}
.buergerservice-anfrage .abschnitt-hinweis {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 400;
}
.buergerservice-anfrage .formular-erfolg {
  max-width: none;
  margin-top: 18px;
}

@media (max-width: 560px) {
  .service-tiles { grid-template-columns: 1fr; }
  .buergerservice-anfrage { margin-top: 36px; }
  .buergerservice-anfrage-kopf {
    padding: 23px 20px;
    border-left-width: 4px;
  }
}

/* Formulare (Kontaktformular, Mängelmelder): Karten-Optik statt roher
   Browser-Standardfelder, damit sie zum übrigen Redesign passen. */
.formular-karte {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(31,61,43,0.06);
  padding: 40px 44px;
}
.formular-abschnitt { margin-bottom: 36px; }
.formular-abschnitt:last-child { margin-bottom: 0; }
.formular-abschnittskopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.formular-abschnitt h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--color-primary);
  margin: 0;
}
.formular-schritt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.formular-abschnittstext {
  max-width: 760px;
  margin: -7px 0 22px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.formular-abschnitt .abschnitt-hinweis {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px; }
.form-feld { grid-column: 1 / -1; max-width: none; margin: 0; }
.form-feld.spalte-1 { grid-column: 1; }
.form-feld.spalte-2 { grid-column: 2; }
.form-feld label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 8px;
  color: var(--color-text);
}
.form-feld input[type="text"],
.form-feld input[type="email"],
.form-feld input[type="tel"],
.form-feld input[type="date"],
.form-feld input[type="url"],
.form-feld select,
.form-feld textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg-alt);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-feld input:focus,
.form-feld select:focus,
.form-feld textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}
.form-feld input[type="file"] {
  width: 100%;
  padding: 8px 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.form-feld input[type="file"]::file-selector-button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  margin-right: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.form-feld input[type="file"]::file-selector-button:hover { background: var(--color-primary-dark); }

.maengel-auswahl {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.maengel-auswahl legend {
  margin-bottom: 14px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.maengel-checkboxen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.maengel-checkbox {
  position: relative;
  display: block;
  cursor: pointer;
}
.maengel-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.maengel-checkbox span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 13px 15px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.maengel-checkbox i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 2px solid #bfc5b9;
  border-radius: 6px;
  color: transparent;
  font-size: 0.9rem;
}
.maengel-checkbox:hover span {
  border-color: rgba(31,61,43,0.45);
  background: #fff;
}
.maengel-checkbox input:focus-visible + span {
  outline: 3px solid rgba(86,122,60,0.22);
  outline-offset: 2px;
}
.maengel-checkbox input:checked + span {
  border-color: var(--color-primary);
  background: #eef3ea;
  box-shadow: 0 0 0 1px var(--color-primary);
}
.maengel-checkbox input:checked + span i {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.formular-datenschutz {
  margin: 0 0 24px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.formular-datenschutz label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.formular-datenschutz input[type="checkbox"] {
  width: 19px; height: 19px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
/* Kurzer Datenschutzhinweis direkt über dem Absenden-Knopf (Art. 13 DSGVO):
   sichtbar, aber ohne dem eigentlichen Formular die Aufmerksamkeit zu nehmen. */
.formular-datenschutzhinweis {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--color-primary);
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.form-feld-fehler {
  display: block;
  margin-top: 6px;
  color: #8a1f1f;
  font-size: 0.86rem;
  font-weight: 650;
}
.form-feld [aria-invalid="true"] {
  border-color: #a33a2b;
  box-shadow: 0 0 0 1px #a33a2b;
}
.form-honig {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-notfall {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fdeaea;
  border: 1px solid #e8b4b4;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 28px;
}
.formular-notfall i { font-size: 1.4rem; color: #8a1f1f; flex-shrink: 0; margin-top: 2px; }
.formular-notfall p { margin: 0; color: #7a2020; }

.formular-fehler {
  background: #fdeaea;
  border: 1px solid #e8b4b4;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
}
.formular-fehler p { margin: 0; color: #7a2020; }
.formular-fehler ul { margin: 10px 0 0; color: #7a2020; }

.formular-erfolg {
  max-width: 640px;
  background: var(--color-bg-alt);
  border-radius: 20px;
  padding: 32px 36px;
}
.formular-erfolg .tracking-nr {
  display: inline-block;
  font-family: monospace;
  font-size: 1.1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 12px;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .formular-karte { padding: 28px 24px; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .form-feld.spalte-1, .form-feld.spalte-2 { grid-column: 1 / -1; }
  .maengel-checkboxen { grid-template-columns: 1fr; }
}

/* Auffälliger Hinweis innerhalb einer .formular-karte: zieht bis an den
   Kartenrand statt vom Karten-Innenabstand eingerückt zu sein. */
.formular-notfall.formular-notfall--breit {
  margin-left: -44px;
  margin-right: -44px;
  padding-left: 44px;
  padding-right: 44px;
  border-radius: 0;
}
@media (max-width: 640px) {
  .formular-notfall.formular-notfall--breit {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.page-content h2 { margin-top: 1.6em; }
.page-content h2:first-child { margin-top: 0; }
/* Titelbild von Meldungen/Terminen/Bekanntmachungen.
   Die Variante kommt aus medienTitelbildLayout() und richtet sich nach dem
   Seitenverhältnis: Ein Wappen-Banner soll nicht denselben Kasten bekommen wie
   ein Querformat-Foto, und der Fließtext soll nicht zwischen Bild und Infobox
   auf eine unlesbar schmale Spalte zusammenschrumpfen. */
.artikel-titelbild {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31,61,43,0.08);
}
.artikel-titelbild img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  cursor: zoom-in;
}

/* Banner/Logo (breiter als 2,2:1): bewusst klein über dem Text. Der Text
   darunter behält die volle Spaltenbreite.
   Die Breitenbegrenzung gehört auf die figure, nicht auf das Bild: die figure
   ist "fit-content", eine Prozentangabe am Bild wäre dadurch zirkulär und
   würde vom Browser verworfen. */
.artikel-titelbild--banner { max-width: 400px; }

/* Querformat-Foto: über dem Text, in der Höhe gedeckelt, damit ein großes
   Foto den Beitrag nicht komplett verdrängt. Kein Beschnitt - das Bild wird
   proportional kleiner, nie angeschnitten. */
.artikel-titelbild--quer img { max-height: 420px; }

/* Hoch- und Quadratformate dürfen weiterhin umflossen werden. Die Breite ist
   so gedeckelt, dass neben Bild und Infobox mindestens rund 500px Textspalte
   übrig bleiben. */
.artikel-titelbild--hoch {
  float: left;
  max-width: min(38%, 260px);
  margin: 4px 26px 14px 0;
}
.artikel-titelbild--hoch img { max-height: 380px; }

.page-content .artikel-titelbild + * { margin-top: 0; }

@media (max-width: 780px) {
  .artikel-titelbild--hoch { float: none; max-width: 320px; margin: 0 0 20px; }
}
@media (max-width: 560px) {
  /* Auf dem Handy gibt es keine Nebenspalte: alle Varianten stehen über dem
     Text und nutzen die Breite, die das Bild hergibt. */
  .artikel-titelbild,
  .artikel-titelbild--banner,
  .artikel-titelbild--hoch { float: none; max-width: 100%; margin: 0 auto 20px; }
  .artikel-titelbild--quer img,
  .artikel-titelbild--hoch img { max-height: 340px; }
}
.page-content ul { color: var(--color-text-muted); padding-left: 1.2em; }
.page-content li { margin-bottom: 0.4em; }
/* Etwas kompakter als der Seiten-Standard (1.6) - im Fließtext wirkte der
   Zeilenabstand zu großzügig. */
.page-content, .page-content p { line-height: 1.5; }
.page-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.page-content p {
  max-width: none;
  /* Bewusst eng: Die Redaktion setzt Absätze häufig einzeln, dadurch wirkte
     der Text mit dem früheren Wert (0.85em) auseinandergerissen. */
  margin-bottom: 0.35em;
}
/* Übernommene Inhalte der früheren Website können feste Breiten,
   geschützte Leerzeichen oder Tabellen enthalten. Diese dürfen nicht den
   Seitencontainer verbreitern oder auf Mobilgeräten abgeschnitten werden. */
.page-content > * {
  max-width: 100%;
}
.page-content p,
.page-content li,
.page-content address,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content a {
  overflow-wrap: anywhere;
}
.page-content p,
.page-content li,
.page-content address {
  white-space: normal !important;
}
.page-content [style*="width"] {
  max-width: 100% !important;
}
.page-content [style*="min-width"] {
  min-width: 0 !important;
}
.page-content img,
.page-content video,
.page-content iframe {
  max-width: 100% !important;
  height: auto;
}
/* Tabellen im Seiteninhalt.
 *
 * Gescrollt wird der Rahmen um die Tabelle, nicht die Tabelle selbst: Ein
 * `display: block` auf <table> nimmt ihr in mehreren Screenreadern die
 * Tabellenstruktur, und damit die Zuordnung von Zelle zu Spaltenkopf.
 * Den Rahmen setzt htmlTabellenScrollbar() beim Ausgeben. */
.page-content .tabelle-rahmen {
  overflow-x: auto;
  margin: 1.5rem 0;
  -webkit-overflow-scrolling: touch;
}
.page-content .tabelle-rahmen:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .95rem;
}
/* Im Rahmen liegt der Abstand bereits am Rahmen selbst. */
.page-content .tabelle-rahmen > table {
  margin: 0;
}
.page-content th,
.page-content td {
  border: 1px solid var(--color-border);
  padding: .55rem .75rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
.page-content thead th {
  background: #f2f5ee;
  font-weight: 600;
  /* Spaltenköpfe sollen nicht umbrechen - sie bestimmen, wie schmal eine
     Spalte werden darf, und ein umgebrochenes "Gesundheit" hilft niemandem. */
  white-space: nowrap;
}
.page-content tbody tr:nth-child(even) td {
  background: #fafbf8;
}

/* Wiederholbare Bild-Text-Bereiche: redaktionell wahlweise Bild links oder
   rechts, ohne fragiles Float-/Tabellen-Markup im Rich-Text-Editor. */
.bild-text-bereiche {
  display: grid;
  gap: clamp(30px, 4vw, 52px);
  margin-top: clamp(44px, 6vw, 76px);
}
/* Stehen die Bereiche ausnahmsweise VOR dem ausführlichen Text, folgt dieser
   unmittelbar darunter. Ohne eigenen Abstand klebte der erste Absatz an der
   letzten Karte - deshalb hier derselbe Abstand wie nach oben. */
.bild-text-bereiche--vor-text {
  margin-bottom: clamp(44px, 6vw, 76px);
}
.page-main > .bild-text-bereiche:first-child {
  margin-top: 0;
}
.bild-text-bereich {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;
  min-height: 350px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(31, 61, 43, 0.075);
}
/* Die Kachel richtet sich nach dem Bild, nicht umgekehrt.
 *
 * Zwei Fehlversuche stecken hier drin: Erst stand das Bild freigestellt in
 * einem gepolsterten Kasten - bei querformatigen Fotos blieben bis zu 85 % der
 * Fläche leer. Dann füllte es die Kachel formatfüllend aus - dabei wurden
 * hochformatige Bilder wie die Collage im Aktivpark stark vergrößert und an
 * den Rändern abgeschnitten.
 *
 * Jetzt nimmt das Bild die volle Breite seiner Spalte ein, die Höhe ergibt
 * sich aus dem Bild selbst (`height: auto`), und die Spalte wächst nicht auf
 * die Höhe der Textspalte mit (`align-self: start`). Dadurch wird nichts
 * vergrößert, nichts angeschnitten und keine Fläche künstlich aufgefüllt. */
.bild-text-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  /* Gleicher Untergrund wie die Karte: Ist der Text länger als das Bild hoch
     ist, wirkt der Rest als normaler Rand der Karte und nicht als leerer
     grauer Kasten. */
  background: #fff;
}
.bild-text-bild img {
  position: static;
  display: block;
  /*
   * Kein Bild groesser als seine eigene Aufloesung.
   *
   * Die Breite des Originals liefert includes/inhaltsbereiche.php als
   * --bild-breite. Ohne Angabe (aeltere Datensaetze) bleibt es bei 100 %.
   *
   * Gedeckelt wird das BILD, nicht die Spalte. Der erste Versuch verkleinerte
   * die ganze Spalte - damit rutschte der Textumbruch mit, und ein kleines
   * Logo klebte in der Ecke der Kachel, weil die Kachel kein Innenpolster hat
   * (das Bild soll sie randvoll ausfuellen). So bleibt die Spalte 42 % breit,
   * der Text bricht wie bisher um, und das Logo steht mittig darin.
   *
   * width statt max-width: Fuer max-width gilt weiter oben
   * ".page-content img { max-width: 100% !important }" - dagegen kaeme man
   * nur mit einem zweiten !important an.
   */
  width: min(100%, var(--bild-breite, 100%));
  margin-inline: auto;
  height: auto;
  min-height: 0;
  max-width: 100%;
  /*
   * Hochkante Bilder nicht ins Riesenhafte wachsen lassen.
   *
   * Ein Hochformat wird in der Spalte sehr hoch: Ein Kirchenfoto mit 576 x
   * 768 Bildpunkten kam auf 687 Pixel Hoehe, waehrend der Text daneben nur
   * 241 Pixel hoch war - darunter stand die halbe Kachel leer.
   *
   * Die 460 Pixel sind an den vorhandenen Bildern gemessen: Alle Querformate
   * liegen darunter (312 bis 417) und bleiben unberuehrt; betroffen ist genau
   * das eine Hochformat. Mit object-fit: contain (direkt darunter) wird dabei
   * nichts beschnitten, das Bild wird nur kleiner.
   *
   * Hier und nicht weiter oben, weil an dieser Stelle vorher "max-height:
   * none" stand - spaeter in derselben Regel und haette den Wert gewonnen.
   */
  max-height: 460px;
  object-fit: contain;
  object-position: center;
  filter: none;
}
.bild-text-inhalt {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 58px);
}
.bild-text-inhalt h2 {
  margin: 0 0 0.65em;
  color: var(--color-primary-dark);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.08;
}
.bild-text-inhalt h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 16px;
  border-radius: 999px;
  background: var(--color-accent);
}
.bild-text-text {
  max-width: 58ch;
}
.bild-text-text > :last-child {
  margin-bottom: 0;
}
.bild-text-bereich--ohne-bild .bild-text-inhalt {
  grid-column: 1 / -1;
}
/* Sehr breite Bilder bekommen unten mehr Platz im Umfluss; gestapelt (Telefon)
   liegen sie über die ganze Kartenbreite. */
.bild-text-bereich--breites-bild {
  grid-template-columns: 1fr;
  min-height: 0;
}
.bild-text-bereich--breites-bild > .bild-text-bild,
.bild-text-bereich--breites-bild > .bild-text-inhalt {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
 * Der Text fliesst um das Bild herum.
 *
 * Dritter und letzter Anlauf an dieser Kachel. Zwei gleich hohe Spalten, aber
 * ein Bild, das selten so hoch ist wie der Text: Bei „Johannes Niklas Dicel"
 * stand neben der unteren Texthälfte ein weisses Loch von 265 Pixeln, die
 * Kachel war 794 Pixel hoch statt 539.
 *
 * Zwei Spalten können das nicht lösen - ungleich lange Inhalte nebeneinander
 * lassen zwangsläufig Platz übrig. Deshalb keine Spalten mehr, sondern ein
 * umflossenes Bild: Neben dem Bild steht Text, darunter läuft er über die
 * volle Breite weiter. Der Satz, den jede Zeitung seit hundert Jahren benutzt.
 *
 * Voraussetzung dafür ist, dass das Bild im Quelltext VOR dem Text steht -
 * umflossen wird nur, was danach kommt. Deshalb gibt die Vorlage es immer
 * zuerst aus (siehe includes/inhaltsbereiche.php).
 *
 * BREITE BILDER standen zwischenzeitlich über die volle Kartenbreite mit dem
 * Text darunter. Das sah nach Notlösung aus: Über dem Text ein Panorama, und
 * darunter lief er nur über die halbe Breite weiter. Sie werden jetzt ebenso
 * umflossen, nur mit mehr Platz (50 statt 42 Prozent) - damit aus einem
 * Panorama kein Briefmarkenstreifen wird.
 *
 * Nicht betroffen: Bereiche ohne Bild und alles unter 821 px - dort wird
 * gestapelt, und das ist am Telefon auch richtig.
 * ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  /*
   * Gestapelt gilt wieder die vom Redakteur gewählte Reihenfolge.
   *
   * Der Quelltext hat das Bild seit der Umstellung immer vorn (nötig fürs
   * Umfliessen). Untereinander hiesse „Bild rechts" aber „Bild unter dem
   * Text" - ohne diese Regel wäre die Reihenfolge auf allen bestehenden
   * Seiten stillschweigend gekippt.
   */
  .bild-text-bereich--bild-rechts > .bild-text-bild {
    order: 2;
  }
}

@media (min-width: 821px) {
  .bild-text-bereich:not(.bild-text-bereich--ohne-bild) {
    /* flow-root statt block: schliesst das umflossene Bild ein, auch wenn der
       Text kürzer ist als das Bild. Sonst ragte es unten aus der Kachel. */
    display: flow-root;
    min-height: 0;
  }
  .bild-text-bereich:not(.bild-text-bereich--ohne-bild) > .bild-text-inhalt {
    display: block;
  }
  .bild-text-bereich:not(.bild-text-bereich--ohne-bild) > .bild-text-bild {
    display: block;
    float: right;
    width: 42%;
    margin: 0 0 22px 30px;
  }
  .bild-text-bereich--bild-links:not(.bild-text-bereich--ohne-bild) > .bild-text-bild {
    float: left;
    margin: 0 30px 22px 0;
  }
  /*
   * Kleine Bilder: zwei Spalten statt Umfliessen.
   *
   * Ein Umfluss (float) sitzt immer oben - das laesst sich nicht aendern, so
   * ist er definiert. Bei einem Logo oder Portraet, das seine Spalte nicht
   * ausfuellt, sieht das verloren aus: Bild oben in der Ecke, darunter eine
   * grosse Leerflaeche neben dem weiterlaufenden Text.
   *
   * Deshalb bekommen kleine Bilder hier eine eigene Spalte und stehen darin
   * senkrecht mittig. Die Hoehe gibt der Text vor. Grosse Bilder bleiben beim
   * Umfliessen - dort ist es richtig, und der Text soll unter ihnen
   * weiterlaufen.
   */
  .bild-text-bereich--kleines-bild:not(.bild-text-bereich--ohne-bild) {
    display: grid;
    grid-template-columns: 42% 1fr;
    column-gap: 30px;
    align-items: center;
  }
  .bild-text-bereich--kleines-bild:not(.bild-text-bereich--ohne-bild) > .bild-text-bild {
    float: none;
    margin: 0;
    /* Die Umfluss-Regel setzt width: 42%. Die galt hier weiter - und 42 %
       der ohnehin schon 42 % breiten Spalte ergaben 147 statt 351 Pixel.
       Darin wirkte das Bild winzig. Als Rasterfeld braucht die Figur keine
       eigene Breite, sie fuellt ihre Spalte von selbst. */
    width: auto;
    grid-column: 1;
    grid-row: 1;
  }
  .bild-text-bereich--kleines-bild:not(.bild-text-bereich--ohne-bild) > .bild-text-inhalt {
    grid-column: 2;
    grid-row: 1;
  }
  /* Bild rechts: dieselben zwei Spalten, nur getauscht. Die Reihenfolge im
     Quelltext bleibt unveraendert (Bild zuerst, siehe Begruendung oben). */
  .bild-text-bereich--kleines-bild.bild-text-bereich--bild-rechts:not(.bild-text-bereich--ohne-bild) {
    grid-template-columns: 1fr 42%;
  }
  .bild-text-bereich--kleines-bild.bild-text-bereich--bild-rechts:not(.bild-text-bereich--ohne-bild) > .bild-text-bild {
    grid-column: 2;
  }
  .bild-text-bereich--kleines-bild.bild-text-bereich--bild-rechts:not(.bild-text-bereich--ohne-bild) > .bild-text-inhalt {
    grid-column: 1;
  }

  /* Breite Bilder bekommen mehr Platz - sonst bliebe von einem Panorama ein
     flacher Streifen übrig. */
  .bild-text-bereich--breites-bild:not(.bild-text-bereich--ohne-bild) > .bild-text-bild {
    width: 50%;
  }
  /* Die Zeilenlänge begrenzt jetzt die Kachel, nicht mehr das Textfeld -
     neben dem Bild wäre 58ch sonst unerreichbar und darunter zu schmal. */
  .bild-text-bereich:not(.bild-text-bereich--ohne-bild) .bild-text-text {
    max-width: none;
  }
}

@media (max-width: 820px) {
  .bild-text-bereich {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .bild-text-bild {
    min-height: 0;
    max-height: none;
    padding: 0;
  }
}

@media (max-width: 560px) {
  .bild-text-bereiche {
    gap: 24px;
    margin-top: 38px;
  }
  .bild-text-bereich {
    border-radius: 13px;
  }
  .bild-text-bild {
    min-height: 0;
    max-height: none;
    padding: 0;
  }
  .bild-text-inhalt {
    padding: 26px 22px 30px;
  }
}

/* ==========================================================================
   Startseite: „Aktuelles" als vier gleich grosse Kacheln
   Vorher lag dort eine grosse Meldung (849 px) über drei schmalen Zeilen
   (je 79 px). Jetzt bekommen alle vier denselben Platz.
   ========================================================================== */
.startseiten-meldungs-kacheln {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.startseiten-meldungs-kachel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 61, 43, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.startseiten-meldungs-kachel:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(31, 61, 43, 0.12);
}
.startseiten-meldungs-kachel-bild {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt-2);
}
.startseiten-meldungs-kachel-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Nur noch Rückfall, falls auch kein Ersatzbild hinterlegt ist. */
.startseiten-meldungs-kachel-ersatz {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-light), #dfe8d8);
  color: var(--color-primary);
  font-size: 2.4rem;
}
.startseiten-meldungs-kachel-text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 22px;
}
.startseiten-meldungs-kachel h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.32;
}
.startseiten-meldungs-kachel-teaser {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Termine und Bekanntmachungen als zwei gleich hohe Listen nebeneinander. */
.startseiten-zwei-listen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.startseiten-listenkarte {
  padding: 22px 24px 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
}
/* Die allgemeine Regel macht aus diesem Link einen 40-px-Kreis - gedacht für
   ein einzelnes Pfeil-Symbol. Hier steht Text darin, deshalb ein richtiger
   Knopf in Pillenform statt des Kreises, in dem die Schrift überlief. */
.startseiten-listenkarte .startseiten-box-kopf > a {
  width: auto;
  height: auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}
.startseiten-listenkarte .startseiten-box-kopf > a:hover,
.startseiten-listenkarte .startseiten-box-kopf > a:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  text-decoration: none;
}
.startseiten-datumsliste,
.startseiten-amtsliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.startseiten-datumsliste li + li,
.startseiten-amtsliste li + li {
  border-top: 1px solid var(--color-border);
}
.startseiten-datumsliste a,
.startseiten-amtsliste a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}
.startseiten-datumsliste a:hover,
.startseiten-amtsliste a:hover { text-decoration: none; }
.startseiten-datumsliste a:hover .startseiten-zeilen-text strong,
.startseiten-amtsliste a:hover .startseiten-zeilen-text strong {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
.startseiten-datumsliste time {
  display: flex;
  flex: 0 0 auto;
  width: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
  border-radius: 10px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  line-height: 1.1;
}
.startseiten-datumsliste time strong { font-size: 1.25rem; }
.startseiten-datumsliste time span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.startseiten-zeilen-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.startseiten-zeilen-text strong {
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.35;
}
.startseiten-zeilen-text small,
.startseiten-zeilen-text time {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.startseiten-datumsliste li i,
.startseiten-amtsliste li i {
  margin-left: auto;
  color: var(--color-primary);
}
.startseiten-amtsliste a { align-items: flex-start; }

@media (max-width: 1100px) {
  .startseiten-meldungs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .startseiten-zwei-listen { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .startseiten-meldungs-kacheln { grid-template-columns: 1fr; }
}

/* Erklärung zur Barrierefreiheit und Rückmeldeformular. */
.barrierefreiheit-layout,
.leichte-sprache-layout {
  padding-top: 48px;
  padding-bottom: 88px;
}
.barrierefreiheit-inhalt {
  max-width: 920px;
}
.barrierefreiheit-inhalt section {
  padding-top: 8px;
}
.barrierefreiheit-inhalt address {
  margin: 18px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--color-primary);
  background: #fff;
  color: var(--color-text);
  font-style: normal;
}
.barrierefreiheit-kontakt {
  margin-top: 44px;
  padding: 26px clamp(22px, 4vw, 34px) 30px !important;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
}
.barriere-melden-inhalt {
  max-width: 860px;
}

/* Leichte Sprache folgt den Vorgaben der BITV: große klare Schrift,
   linksbündiger Text, heller einfarbiger Hintergrund und kurze Absätze. */
.leichte-sprache-inhalt {
  max-width: 780px;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
  color: var(--color-text);
  font-size: 1.2em;
  line-height: 1.75;
  text-align: left;
}
.leichte-sprache-inhalt h2 {
  margin-top: 1.7em;
  font-family: var(--font-base);
  font-size: 1.45em;
  font-weight: 800;
}
.leichte-sprache-inhalt p {
  max-width: 55ch;
  margin-bottom: 0.9em;
  color: var(--color-text);
  line-height: inherit;
}
.leichte-sprache-hinweis {
  padding: 18px 20px;
  border-left: 5px solid var(--color-primary);
  background: var(--color-primary-light);
}
.leichte-sprache-kontakt {
  margin-top: 2.4em;
  padding-top: 0.5em;
  border-top: 2px solid var(--color-border);
}

/* Dokumentarchiv: klar gegliederte Fachbereiche mit zwei bewusst getrennten
   Aktionen für Browseransicht und tatsächlichen Dateidownload. */
.dokumente-uebersicht {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 34px;
}
.dokumente-uebersicht [hidden] {
  display: none !important;
}
.dokumente-filter {
  margin-bottom: 38px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(22, 41, 29, 0.05);
}
.dokumente-filter-kopf {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
}
.dokumente-filter-kopf h2 {
  margin: 0;
}
.dokumente-filter-gesamt {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 800;
}
.dokumente-filter-felder {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(280px, 1.25fr) auto;
  gap: 14px;
  align-items: end;
}
.dokumente-filter-felder label > span:first-child {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text);
  font-size: 0.76rem;
  font-weight: 800;
}
.dokumente-filter select,
.dokumente-filter input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 0.88rem;
}
.dokumente-filter select {
  padding: 0 38px 0 13px;
}
.dokumente-suchfeld {
  position: relative;
  display: block;
}
.dokumente-suchfeld i {
  position: absolute;
  top: 50%;
  left: 13px;
  color: var(--color-primary);
  transform: translateY(-50%);
}
.dokumente-filter .dokumente-suchfeld input {
  padding: 0 13px 0 40px;
}
.dokumente-filter select:focus,
.dokumente-filter input:focus {
  border-color: var(--color-primary);
  outline: 3px solid rgba(31, 61, 43, 0.14);
}
.dokumente-filter-reset {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--color-primary);
  border-radius: 7px;
  background: transparent;
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.dokumente-filter-reset:hover {
  background: var(--color-primary-light);
}
.dokumente-filter-ergebnis {
  max-width: none;
  margin: 13px 0 0;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 650;
}
.dokumente-kategorien-leiste {
  position: sticky;
  top: calc(var(--klebehoehe) + 8px);
  z-index: 20;
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 8px;
  margin: 0 0 26px;
  padding: 11px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(247, 243, 234, 0.96);
  box-shadow: 0 8px 28px rgba(22, 41, 29, 0.12);
  scrollbar-width: thin;
  backdrop-filter: blur(10px);
}
.dokumente-kategorien-leiste button {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.dokumente-kategorien-leiste button:hover {
  border-color: var(--color-primary);
}
.dokumente-kategorien-leiste button.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.dokumente-kategorien-leiste button span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.68rem;
}
.dokumente-kategorien-leiste button.active span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.dokumente-kein-ergebnis {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-bottom: 32px;
  padding: 40px 24px;
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-text-muted);
  text-align: center;
}
.dokumente-kein-ergebnis i {
  color: var(--color-primary);
  font-size: 2rem;
}
.dokumente-kein-ergebnis strong {
  color: var(--color-text);
}
.dokumente-gruppe {
  width: 100%;
  max-width: 100%;
  margin: 0 0 34px;
  scroll-margin-top: calc(var(--klebehoehe) + 20px);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(22, 41, 29, 0.05);
}
.dokumente-gruppe-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-primary-light);
  cursor: pointer;
  list-style: none;
}
.dokumente-gruppe:not([open]) .dokumente-gruppe-kopf {
  border-bottom: 0;
}
.dokumente-gruppe-kopf::-webkit-details-marker {
  display: none;
}
.dokumente-gruppe-kopf h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}
.dokumente-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
.dokumente-gruppe-status {
  display: flex;
  flex: 0 0 auto;
  gap: 13px;
  align-items: center;
}
.dokumente-anzahl {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.83rem;
  font-weight: 800;
}
.dokumente-klappsymbol {
  color: var(--color-primary);
  font-size: 1.2rem;
  transition: transform 0.18s ease;
}
.dokumente-gruppe[open] .dokumente-klappsymbol {
  transform: rotate(180deg);
}
.seiten-dokumente {
  margin-top: clamp(34px, 5vw, 58px);
}
.seiten-dokumente .seiten-dokumente-kopf {
  border-bottom: 1px solid var(--color-border);
  cursor: default;
}
.seiten-dokumente-kopf > div {
  min-width: 0;
}
.seiten-dokumente-kopf p {
  max-width: 62ch;
  margin: 7px 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.dokument-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 18px 26px;
  border-bottom: 1px solid var(--color-border);
}
.dokument-zeile:last-child {
  border-bottom: 0;
}
.dokument-datei {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-width: 0;
}
.dokument-datei > div {
  min-width: 0;
}
.dokument-symbol {
  display: grid;
  width: 42px;
  height: 48px;
  place-items: center;
  border-radius: 7px;
  background: #f7e8e5;
  color: #a33a2b;
  font-size: 1.5rem;
}
.dokument-datei h3 {
  margin: 0 0 3px;
  color: var(--color-text);
  font-size: 0.96rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.dokument-datei div > span {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 650;
}
.dokument-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.dokument-button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.dokument-button--ansehen {
  background: #fff;
  color: var(--color-primary-dark);
}
.dokument-button--download {
  background: var(--color-primary);
  color: #fff;
}
.dokument-button:hover {
  background: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
}

/* Gemeinderat: editierbare Überschriften + Listen statt einer starren Tabelle.
   Ohne Seitenbox darf der Inhalt deutlich breiter laufen; mit aktivierter Box
   übernimmt automatisch das vorhandene zweispaltige Seitenraster. */
.gemeinderat-inhalt > h2 {
  margin-bottom: 12px;
}
.gemeinderat-inhalt > h2 + p {
  max-width: 78ch;
  margin-bottom: 30px;
  font-size: 1.05rem;
}
.gemeinderat-inhalt > h3 {
  margin: 24px 0 0;
  padding: 16px 22px;
  border-radius: 12px 12px 0 0;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}
.gemeinderat-inhalt > h3 + ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0 0 24px;
  padding: 14px 22px 18px;
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
  list-style: none;
}
.gemeinderat-inhalt > h3 + ul li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.gemeinderat-inhalt > h3 + ul li:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.gemeinderat-inhalt > h3 + ul strong {
  color: var(--color-text);
}

@media (max-width: 680px) {
  .gemeinderat-inhalt > h3 + ul {
    grid-template-columns: 1fr;
  }
  .gemeinderat-inhalt > h3 + ul li:nth-last-child(2) {
    border-bottom: 1px solid var(--color-border);
  }
}

/* Der Editor speichert Ausrichtung als Klasse (ql-align-center/-right/-justify),
   die Definition dafür existiert bei Quill aber nur innerhalb des Editors
   selbst (.ql-editor ...) - im Frontend fehlte sie komplett, wodurch jeder
   redaktionell zentrierte/rechtsbündige Text stillschweigend linksbündig
   wurde. Global (nicht nur .page-content), da Quill-Inhalt an mehreren
   Stellen ausgegeben wird (Meldungen, Termine, Vereine/Wirtschaft, Bekanntmachungen). */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.placeholder-note {
  display: inline-block;
  background: #fff4d6;
  border: 1px solid #e9d38a;
  color: #6b5a12;
  font-size: 0.82rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* Infobox: allgemeine Grundlage für Detailansichten. */
.infobox {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.infobox img { width: 100%; display: block; }
.infobox figcaption {
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.eintrag-infoboxen {
  display: grid;
  gap: 24px;
  align-self: start;
}
.eintrag-layout {
  padding-top: 32px;
  padding-bottom: 80px;
}
.eintrag-layout.mit-infobox {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(36px, 4vw, 56px);
}
.eintrag-layout .page-main {
  max-width: none;
}
.eintrag-layout .page-content p {
  max-width: 82ch;
}
/* Freigegebene Veranstaltungen eines Vereins auf dessen eigener Detailseite */
.eintrag-termine {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.eintrag-termine-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.eintrag-termine-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt-2);
}
.eintrag-termine-liste a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  text-decoration: none;
}
.eintrag-termine-liste a:hover strong,
.eintrag-termine-liste a:focus-visible strong {
  text-decoration: underline;
}
.eintrag-termine-liste time {
  min-width: 12ch;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  font-weight: 600;
}
.eintrag-termin-ort {
  color: var(--color-text-muted, #5b5b52);
  font-size: 0.92em;
}
.eintrag-kontaktbox {
  border: 0;
  border-top: 5px solid var(--color-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: #fff;
  box-shadow: 0 16px 40px rgba(31,61,43,0.09);
}
.eintrag-logo {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 26px;
  background: var(--color-bg-alt-2);
}
.eintrag-logo .eintrag-logo-bild {
  width: auto;
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}
.eintrag-logo + .kontaktdaten {
  border-top: 1px solid var(--color-border);
}
.eintrag-kontaktbox .kontaktdaten {
  padding: 24px 26px 26px;
}
.eintrag-detailbox {
  border: 0;
  border-top: 5px solid color-mix(in srgb, var(--detailbox-schrift, #1b1b16) 55%, transparent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--detailbox-hintergrund, #f7f3ea);
  color: var(--detailbox-schrift, #1b1b16);
  box-shadow: 0 16px 40px rgba(31,61,43,0.09);
}
.eintrag-detailbox .infobox-inhalt,
.eintrag-detailbox .infobox-inhalt h2,
.eintrag-detailbox .infobox-inhalt h3,
.eintrag-detailbox .infobox-inhalt p,
.eintrag-detailbox .infobox-inhalt li,
.eintrag-detailbox .infobox-inhalt a,
.eintrag-detailbox .infobox-inhalt .page-content {
  color: inherit;
}

/* Redaktionell pro Seite aktivierbare Infobox. Sie ist kein auswählbares
   Frontend-Modul, sondern erscheint nur, wenn sie in der Verwaltung für die
   konkrete Seite eingeschaltet wurde. */
.infobox-seite {
  position: sticky;
  top: calc(var(--klebehoehe) + 28px);
  border: 0;
  border-top: 5px solid var(--color-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: #fff;
  box-shadow: 0 16px 40px rgba(31,61,43,0.09);
}
.infobox-seite figure {
  margin: 18px 18px 0;
  overflow: hidden;
}
/* Das Bild nimmt die volle Breite der Box ein, die Höhe richtet sich nach dem
   Bild selbst. Vorher erzwang ein festes 4:3-Format eine Querformat-Fläche:
   Ein Hochkant-Foto - etwa das Porträt der Werkleitung bei der WVS - stand
   dann als schmaler Streifen mit weißen Flächen links und rechts darin.
   Die Obergrenze fängt nur extreme Hochformate ab; angeschnitten wird dabei
   unten, damit Gesichter im Bild bleiben. */
.infobox-seite figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center top;
}
.infobox-inhalt {
  padding: 26px 26px 28px;
}
.infobox-inhalt h2 {
  margin: 0 0 15px;
  font-size: 1.65rem;
  line-height: 1.1;
}
.infobox-inhalt .page-content {
  font-size: 0.94rem;
}
.infobox-inhalt .page-content > :last-child {
  margin-bottom: 0;
}
.infobox-link {
  margin-top: 20px;
  white-space: normal;
}

.seiten-infoboxen {
  position: sticky;
  top: calc(var(--klebehoehe) + 28px);
  display: grid;
  gap: 24px;
  align-self: start;
}

/* Box "Dateien zum Herunterladen" an Meldungen, Terminen und
   Bekanntmachungen. Die Spalte ist rund 330px breit - Name, Typ und die
   beiden Schaltflächen stehen deshalb untereinander statt nebeneinander. */
.beitrags-dateien {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.beitrags-datei + .beitrags-datei {
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}
.beitrags-datei-kopf {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.beitrags-datei-symbol {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  font-size: 1.25rem;
}
.beitrags-datei-angabe {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.beitrags-datei-name {
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.beitrags-datei-meta {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 650;
}
.beitrags-datei-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* In der schmalen Spalte sollen beide Schaltflächen dieselbe Breite haben und
   gemeinsam eine Zeile füllen; wird es zu eng, bricht die zweite um. */
.beitrags-datei-aktionen .dokument-button {
  flex: 1 1 120px;
}
.seiten-infoboxen .infobox-seite {
  position: static;
  top: auto;
}
.seitenleisten-aktion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(31, 61, 43, 0.14);
}
.seitenleisten-aktion i {
  flex: 0 0 auto;
  font-size: 1.3em;
}
.seitenleisten-aktion:hover,
.seitenleisten-aktion:focus-visible {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
}

.infobox-individuell {
  background: var(--infobox-hintergrund, #fff);
  color: var(--infobox-schrift, var(--color-text));
}
.infobox-individuell .infobox-inhalt,
.infobox-individuell .infobox-inhalt h2,
.infobox-individuell .infobox-inhalt h3,
.infobox-individuell .infobox-inhalt p,
.infobox-individuell .infobox-inhalt li,
.infobox-individuell .infobox-inhalt .page-content {
  color: inherit;
}
.infobox-individuell .infobox-link {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
}
.infobox-individuell .infobox-link:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
}

.infobox-automatik-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.infobox-automatik-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.infobox-automatik-liste li {
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
}
.infobox-automatik-liste time {
  display: block;
  margin-bottom: 3px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.infobox-automatik-liste a {
  display: block;
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
}
.infobox-automatik-liste a:hover { color: var(--color-primary); }
.infobox-automatik-leer {
  max-width: none;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}
.infobox-automatik-alle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: var(--color-primary-dark);
  font-size: 0.82rem;
  font-weight: 800;
}

.infobox-zahlen-fakten {
  color: var(--color-text);
}
.infobox-zahlen-fakten .infobox-inhalt {
  padding: 30px 28px;
}
.fakten-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fakten-stand {
  max-width: none;
  margin: 0 0 22px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}
.fakten-stand strong {
  color: var(--color-text);
  font-weight: 700;
}
.fakten-liste {
  margin: 0;
}
.fakten-liste > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
}
.fakten-liste dt {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}
.fakten-liste dd {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}
.fakten-zuordnung {
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--color-primary-light);
}
.fakten-zuordnung p {
  max-width: none;
  margin: 0 0 11px;
  color: var(--color-text);
  font-size: 0.84rem;
  line-height: 1.45;
}
.fakten-zuordnung p:last-child {
  margin-bottom: 0;
}
.fakten-freitext {
  margin-top: 21px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.86rem;
}
.fakten-quelle {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}
.fakten-quelle i {
  flex: 0 0 auto;
  margin-top: 2px;
}
.fakten-quelle:hover {
  color: var(--color-primary);
}

/* Kontaktdaten-Box in der Verzeichnis-Detailansicht (Vereine/Wirtschaft) -
   bündelt Ansprechpartner/Adresse/Telefon/Webseite/E-Mail rechts statt
   verstreut im Fließtext. */
.infobox .kontaktdaten { padding: 18px 20px; }
.infobox .kontaktdaten h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
.infobox .kontaktdaten .kontakt-name {
  display: block;
  margin-bottom: 16px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.35;
}
.infobox .kontaktdaten .kontakt-zeile {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.92rem;
}
.infobox .kontaktdaten .kontakt-zeile:last-child { margin-bottom: 0; }
.infobox .kontaktdaten .kontakt-zeile i { color: var(--color-primary); margin-top: 3px; flex-shrink: 0; }
.infobox .kontaktdaten .kontakt-zeile a { font-weight: 600; word-break: break-word; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-bg); }
/* Skyline-Illustration über dem Footer (Vorbild wvs.gs-admin.rewa-media.de) -
   rein dekorativ (aria-hidden), Text steht nie darüber, sondern erst auf der
   durchgehend grünen ".footer-surface" darunter, damit die Lesbarkeit immer
   gesichert ist. */
.footer-illustration {
  position: relative;
  overflow: hidden;
  line-height: 0;
  background: var(--color-bg);
}
.footer-illustration__landscape {
  display: block;
  width: 100%;
  height: auto;
}
.footer-surface {
  background: var(--color-primary);
  color: #fff;
}
.footer-surface p,
.footer-surface li,
.footer-surface span,
.footer-surface small,
.footer-surface time,
.footer-surface address,
.footer-surface em {
  color: #fff;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 56px 24px 40px;
}
.footer-secondary {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 38px 24px 42px;
  border-top: 1px solid var(--color-primary-dark);
}
.footer-col h4 {
  color: #1f3d2b;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
/* Linklisten kompakt halten: mit 10px Abstand brauchte jede Zeile 34px, was
   die Fußzeile unnötig in die Länge zog. Der Abstand schrumpft, die Zeilenhöhe
   bleibt - sonst fiele die Klickfläche der Links unter die 24px, die
   BITV 2.0 / WCAG 2.5.8 als Mindestgröße verlangen. */
.footer-col li { margin-bottom: 2px; line-height: 1.6; }
.footer-col a { color: #fff; font-size: 0.94rem; }
.footer-col a:hover { color: #fff; }
.footer-richtext {
  min-width: 0;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
  /* Adresse und Öffnungszeiten bestehen aus kurzen, mit <br> getrennten
     Zeilen. Die Lesezeilenhöhe von 1.6 aus dem Fließtext wirkt dort wie ein
     Absatzabstand - 1.4 hält die Blöcke zusammen. */
  line-height: 1.4;
}
.footer-richtext p {
  margin: 0 0 10px;
}
.footer-richtext p:last-child {
  margin-bottom: 0;
}
.footer-richtext strong {
  color: #fff;
}
.footer-richtext h2,
.footer-richtext h3,
.footer-richtext h4 {
  color: #1f3d2b;
  margin: 0 0 14px;
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
}
.footer-logo:hover {
  background: #f5f6f2;
}
.footer-logo img {
  width: auto;
  height: 52px;
}
.footer-contact .contact-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.94rem;
}
.footer-contact .contact-line i { color: #fff; margin-top: 3px; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: rgba(255,255,255,0.12); }

.footer-dynamic time {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.footer-col .footer-feature-title {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.footer-feature-teaser {
  display: -webkit-box;
  margin: 9px 0 0;
  overflow: hidden;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.footer-event-place {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 10px 0 0;
  color: #fff;
  font-size: 0.88rem;
}
.footer-event-place i {
  flex: 0 0 auto;
  margin-top: 3px;
}
.footer-col .footer-more {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 15px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
}
.footer-col .footer-more:hover {
  gap: 10px;
}
.footer-richtext--zusatz {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.16);
}

.footer-bottom {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.85rem;
  color: #fff;
}
.footer-bottom .legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; }
.footer-bottom a { color: #fff; }
.footer-bottom a:hover { color: #fff; }

/* "Nach oben"-Button: springt per Anker auf #content, ohne JavaScript also
   immer sichtbar und funktionsfähig. Per JavaScript blendet er erst nach
   ausreichendem Scrollen ein und scrollt sanft ganz nach oben - siehe
   main.js. */
.nach-oben-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(13, 20, 16, 0.28);
  font-size: 1.3rem;
  line-height: 1;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
.nach-oben-button:hover,
.nach-oben-button:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
}
.nach-oben-button.nach-oben-versteckt {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .nach-oben-button { transition: none; }
}
@media print {
  .nach-oben-button { display: none; }
}
@media (max-width: 600px) {
  .nach-oben-button { right: 16px; bottom: 16px; width: 44px; height: 44px; font-size: 1.15rem; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 960px) {
  body.nav-open { overflow: hidden; }
  body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(18, 25, 21, 0.48);
  }

  .meldungen-layout { grid-template-columns: 1fr; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-media { order: -1; padding-bottom: 24px; }
  .page-layout.mit-infobox { grid-template-columns: 1fr; }
  .infobox-seite { position: static; max-width: 620px; }
  .seiten-infoboxen { position: static; max-width: 620px; }
  .footer-main,
  .footer-secondary { grid-template-columns: 1fr 1fr; }
  .topics-grid.topics-grid--verzeichnis { grid-template-columns: repeat(2, 1fr); }
  .seite-inhalt--geschichte p:has(> img),
  .seite-inhalt--entwicklung-nach-der-wiedervereinigung p:has(> img) {
    width: calc(50% - 16px);
  }
  .seite-inhalt--geschichte p:has(> img) img,
  .seite-inhalt--entwicklung-nach-der-wiedervereinigung p:has(> img) img {
    height: 220px;
  }

  /* Off-Canvas-Navigation für Handy UND Tablet. Damit gibt es keine
     unbestimmte Zwischenbreite mehr zwischen mobilem Menü und Mega-Menü. */
  .nav-primary > .container > ul {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 100;
    width: min(380px, 100vw);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 76px 0 28px;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    background: var(--color-primary);
    box-shadow: -18px 0 48px rgba(0,0,0,0.28);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0.25s;
  }
  body.nav-open .nav-primary > .container > ul {
    visibility: visible;
    transform: translateX(0);
  }

  .nav-primary li {
    display: block;
    width: 100%;
    height: auto;
  }
  .nav-primary a.nav-link {
    justify-content: space-between;
    width: 100%;
    height: auto;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  /* Menüpunkt und Aufklapp-Schalter liegen nebeneinander in einer Zeile,
     das Untermenü klappt darunter über die volle Breite auf. So öffnet ein
     Tipp auf den Namen die Übersichtsseite und ein Tipp auf das Pluszeichen
     das Untermenü - vorher tat ein Tipp keines von beidem. */
  .nav-primary li.has-dropdown {
    /* Die allgemeine Regel darüber setzt alle Menüzeilen auf display:block.
       Für die aufklappbaren Punkte braucht es Flex, damit Name und Schalter
       nebeneinander stehen und das Untermenü darunter umbricht. */
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .nav-primary li.has-dropdown > a.nav-link {
    flex: 1 1 auto;
    width: auto;
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  .nav-primary li.has-dropdown > .nav-untermenue-schalter,
  .nav-primary li.has-dropdown > .nav-untermenue-schalter:focus-visible {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 60px;
    height: auto;
    min-height: 56px;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav-primary li.has-dropdown > .dropdown {
    flex: 1 1 100%;
  }

  /* Im ausklappbaren Menü wird "Kontakt" wieder eine normale Zeile statt
     eines schwebenden Knopfs - der passt nur in die schmale Desktop-Leiste. */
  .nav-kontakt { margin-left: 0; padding-right: 0; }
  .nav-primary a.nav-link--kontakt {
    border-radius: 0;
    background: transparent;
  }
  /* "Umfragen" bleibt auch im ausklappbaren Menü farbig - dort ist sie kein
     Platzproblem, und der Hinweischarakter soll erhalten bleiben. */
  .nav-umfragen { margin-left: 0; }
  .nav-primary a.nav-link--umfragen {
    border-radius: 0;
    width: 100%;
  }

  .nav-primary .dropdown {
    position: static;
    width: 100%;
    height: auto;
    border: 0;
    box-shadow: none;
    background: rgba(255,255,255,0.055);
    display: none;
  }
  .nav-primary li.is-open > .dropdown { display: block; }

  /* Die allgemeine .nav-primary .container-Regel gibt auch verschachtelten
     Containern 68 px Höhe und Flex-Layout. Im mobilen Akkordeon muss der
     Untermenü-Container stattdessen vollständig im Dokumentfluss wachsen. */
  .nav-primary .dropdown-inner {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .nav-primary .dropdown-list {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5px 0 10px;
  }
  .nav-primary .dropdown-main-item {
    margin: 0;
  }
  .nav-primary .dropdown a.dropdown-main-link {
    min-height: 0;
    padding: 13px 28px 13px 36px;
    background: rgba(255,255,255,0.1);
  }
  .nav-primary .dropdown-main-link small {
    color: rgba(255,255,255,0.62);
  }
  .nav-primary .dropdown-item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 13px 28px 13px 36px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.88);
    line-height: 1.35;
  }
  .nav-primary .dropdown a:hover {
    color: #fff;
    background: rgba(255,255,255,0.09);
  }
  .nav-primary .dropdown-visual { display: none; }

  /* Die dritte Ebene wird innerhalb des jeweiligen Unterpunktes eingerückt.
     Sie liegt damit nicht mehr als zweite Fläche über der Hauptnavigation. */
  .nav-primary .dropdown-flyout {
    display: block !important;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 0 8px 16px;
    overflow: visible;
    background: rgba(0,0,0,0.1);
  }
  .nav-primary .dropdown-flyout-navigation {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .nav-primary .dropdown-flyout-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    margin: 0;
    padding: 12px 24px 12px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .dropdown-flyout-overview small {
    display: block;
    color: rgba(255,255,255,0.58);
    font-size: 0.7rem;
  }
  .dropdown-flyout-overview strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
  }
  .nav-primary .dropdown-flyout-links { display: block; }
  .nav-primary .dropdown-flyout-links > a {
    padding: 11px 24px 11px 36px;
    color: rgba(255,255,255,0.88);
    font-size: 0.9rem;
  }
  .nav-primary .dropdown-flyout-links > a:visited,
  .nav-primary .dropdown-flyout-links > a:hover,
  .nav-primary .dropdown-flyout-links > a:focus-visible {
    color: #fff;
  }
  .nav-primary .dropdown-flyout-links > a i {
    color: inherit;
  }

  .mobile-menu-toggle {
    position: relative;
    z-index: 101;
    display: block;
  }
  body.nav-open .mobile-menu-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
  }
}

/* Auf Tablets erhält der eigentliche Seiteninhalt einen sichtbar großzügigeren
   Rand. Header und geschlossene Hauptnavigation bleiben kompakt. */
@media (min-width: 769px) and (max-width: 1180px) {
  .container {
    padding-left: clamp(38px, 5vw, 54px);
    padding-right: clamp(38px, 5vw, 54px);
  }
  .utility-bar > .container,
  .site-header > .container,
  .nav-primary > .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 769px) and (max-width: 980px) {
  .header-quicklink { display: none; }
}

@media (max-width: 768px) {
  .utility-bar .container {
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px 16px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .utility-social {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }
  .darstellung-panel {
    top: 12px;
    right: 16px;
  }
  .logo { gap: 11px; }
  .header-logo-image { height: 50px; }
  .logo .logo-mark { font-size: 0.94rem; }
  .logo .logo-sub {
    margin-top: 5px;
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }
  .header-quicklink { display: none; }
  .page-header { padding: 38px 0 36px; }
  .page-header--mit-bild {
    min-height: 190px;
    background-image:
      linear-gradient(
        90deg,
        rgba(22, 41, 29, 0.97) 0%,
        rgba(22, 41, 29, 0.88) 58%,
        rgba(22, 41, 29, 0.42) 100%
      ),
      var(--page-header-bild);
    background-position: center, 64% center;
  }
  .page-header::after { right: -80px; opacity: 0.7; }
  .page-layout { padding-top: 38px; padding-bottom: 62px; }
  .inhalt-container { padding-top: 32px; padding-bottom: 62px; }
  .seiten-reiter .container { gap: 22px; }
  .quicklinks .grid { grid-template-columns: repeat(2, 1fr); }
  .quicklink { border-bottom: 1px solid var(--color-border); }
  .termine-reihe { grid-template-columns: 1fr; }
  .topics-grid, .topics-grid.topics-grid--verzeichnis { grid-template-columns: 1fr; }
  .footer-main,
  .footer-secondary { grid-template-columns: 1fr; }
  .dokumente-filter-felder { grid-template-columns: 1fr; }
  .dokumente-filter-reset { justify-self: start; }
  .dokument-zeile { grid-template-columns: 1fr; gap: 14px; }
  .dokument-aktionen { padding-left: 57px; }
  .barrierefreiheit-layout,
  .leichte-sprache-layout { padding-top: 34px; padding-bottom: 62px; }
  .leichte-sprache-inhalt { font-size: 1.1em; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-bottom .legal-links { justify-content: flex-start; }

}

@media (max-width: 560px) {
  .site-header .container {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .logo { gap: 8px; }
  .header-logo-image { height: 40px; }
  .logo .logo-mark { font-size: 0.75rem; }
  .logo .logo-sub {
    font-size: 0.47rem;
    letter-spacing: 0.1em;
  }
  .header-actions { gap: 6px; }
  .ueberblick-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 200px); }
  .ueberblick-kachel:nth-child(1), .ueberblick-kachel:nth-child(2) { grid-column: 1; grid-row: auto; }
  .quicklinks .grid { grid-template-columns: 1fr; }
  .dokumente-filter-kopf { align-items: flex-start; }
  .dokumente-filter-gesamt { margin-top: 2px; }
  .dokumente-gruppe-kopf { padding: 19px 18px; }
  .dokument-zeile { padding: 17px 18px; }
  .dokument-aktionen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
  }
  .seite-inhalt--geschichte p:has(> img),
  .seite-inhalt--entwicklung-nach-der-wiedervereinigung p:has(> img) {
    display: flex;
    width: 100%;
    margin-right: 0;
  }
  .seite-inhalt--schultheissen-buergermeister > ul,
  .seite-inhalt--schultheissen-buergermeister > ol {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Website-Suche
   ========================================================================== */
.site-search-page {
  padding-top: 54px;
  padding-bottom: 90px;
}
.site-search-form {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(22, 41, 29, 0.07);
}
.site-search-form > label {
  display: block;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 1.05rem;
  font-weight: 800;
}
.site-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
}
.site-search-field > i {
  margin-right: -48px;
  margin-left: 18px;
  z-index: 1;
  color: var(--color-primary);
  font-size: 1.25rem;
  pointer-events: none;
}
.site-search-field input {
  width: 100%;
  min-height: 58px;
  padding: 13px 20px 13px 52px;
  border: 1px solid #c9c9c0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: #fff;
  color: var(--color-text);
  font: inherit;
}
.site-search-field input:focus {
  z-index: 1;
  border-color: var(--color-primary);
  outline: 3px solid rgba(31, 61, 43, 0.18);
  outline-offset: 0;
}
.site-search-field .btn {
  min-height: 58px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.site-search-form > p {
  max-width: none;
  margin: 13px 0 0;
  font-size: 0.9rem;
}
.site-search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 42px 0 16px;
}
.site-search-summary p {
  max-width: none;
  margin: 0;
  color: var(--color-text);
}
.site-search-results {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
}
.site-search-result {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 46px;
  gap: 20px;
  align-items: start;
  padding: 24px 26px;
  border-bottom: 1px solid var(--color-border);
}
.site-search-result:last-child { border-bottom: 0; }
.site-search-result:hover { background: #fbfaf6; }
.site-search-result-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 1.35rem;
}
.site-search-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 5px;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-search-result-meta time::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 9px 2px 0;
  border-radius: 50%;
  background: var(--color-accent);
}
.site-search-result h2 {
  margin: 0 0 6px;
  font-family: var(--font-base);
  font-size: 1.18rem;
  font-weight: 800;
}
.site-search-result h2 a { color: var(--color-primary); }
.site-search-result p {
  max-width: 90ch;
  margin: 0;
  font-size: 0.94rem;
}
.site-search-result-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary);
}
.site-search-result-link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}
.site-search-notice,
.site-search-intro {
  max-width: 820px;
  margin: 46px auto 0;
  padding: 34px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-alt-2);
  text-align: center;
}
.site-search-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  text-align: left;
}
.site-search-notice > i,
.site-search-intro > i {
  color: var(--color-primary);
  font-size: 2rem;
}
.site-search-notice h2,
.site-search-intro h2 { margin-bottom: 8px; }
.site-search-notice p,
.site-search-intro p {
  max-width: none;
  margin: 0;
}

@media (max-width: 680px) {
  .header-search-panel .container {
    padding: 15px;
  }
  .header-search-form {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  .header-search-form > i { margin-right: -48px; }
  .header-search-form input {
    min-height: 50px;
    padding-left: 45px;
  }
  .header-search-form .btn {
    grid-column: 1 / 3;
    min-height: 48px;
    justify-content: center;
  }
  .header-search-close {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  .site-search-page {
    padding-top: 32px;
    padding-bottom: 62px;
  }
  .site-search-form { padding: 22px 18px; }
  .site-search-field {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .site-search-field input {
    min-width: 0;
    border-radius: var(--radius);
  }
  .site-search-field .btn {
    grid-column: 1 / 3;
    justify-content: center;
    margin-top: 10px;
    border-radius: var(--radius);
  }
  .site-search-result {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 17px;
  }
  .site-search-result-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .site-search-result-link { display: none; }
  .site-search-result h2 { font-size: 1.05rem; }
  .site-search-notice,
  .site-search-intro {
    margin-top: 30px;
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-primary > .container > ul { transition: none; }
}

/* Amtliches Veröffentlichungsarchiv und technischer Nachweis */
.archiv-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(130px, .35fr) minmax(190px, .5fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 28px;
  padding: 20px;
  border-radius: 10px;
  background: #eae2c8;
}
.archiv-filter label { display: block; margin-bottom: 5px; font-weight: 700; }
.archiv-filter input,
.archiv-filter select { width: 100%; min-height: 46px; padding: 9px 11px; border: 1px solid #9c9b93; border-radius: 6px; background: #fff; color: inherit; font: inherit; }
.amtliche-metadaten { margin-top: 42px; padding: 24px; border: 1px solid var(--color-border); border-left: 5px solid var(--color-primary); border-radius: 8px; background: #faf9f4; }
.amtliche-metadaten h2 { margin-top: 2px; }
.datenliste { margin: 0; }
.datenliste > div { display: grid; grid-template-columns: minmax(130px, .4fr) 1fr; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.datenliste > div:last-child { border-bottom: 0; }
.datenliste dt { font-weight: 700; }
.datenliste dd { margin: 0; }
.amtliche-metadaten-nachweis { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.amtliche-metadaten-nachweis > i { color: #24723d; font-size: 1.45rem; }
.amtliche-metadaten-nachweis a { margin-left: auto; font-weight: 700; }
.nachweis-seite { padding-top: 36px; padding-bottom: 56px; }
.nachweis-status { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; padding: 20px; border-radius: 9px; }
.nachweis-status > i { font-size: 2rem; }
.nachweis-status p { margin: 5px 0 0; }
.nachweis-status--intakt { border: 1px solid #8cc59a; background: #e9f6ec; color: #164f27; }
.nachweis-status--fehler { border: 1px solid #dd9e9e; background: #fff0f0; color: #7c2020; }
.nachweis-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.nachweis-karte { padding: 24px; border: 1px solid var(--color-border); border-radius: 9px; background: #fff; }
.nachweis-karte h2 { margin-top: 0; }
.nachweis-fassung { margin-top: 22px; }
.nachweis-versionen { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 20px; padding: 15px 0; }
.nachweis-versionen a { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 5px; }
.nachweis-versionen a[aria-current="page"] { border-color: var(--color-primary); background: var(--color-primary); color: #fff; text-decoration: none; }
.hash-zeile { margin-top: 16px; }
.hash-zeile strong { display: block; margin-bottom: 4px; }
.hash-zeile code { display: block; overflow-wrap: anywhere; padding: 9px; border-radius: 5px; background: #f0eee7; font-size: .78rem; }
.nachweis-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.nachweis-aktionen .btn-secondary { border-color: var(--color-primary); background: #fff; color: var(--color-primary); }
.nachweis-aktionen .btn-secondary:hover { background: #f2efe4; text-decoration: none; }
.nachweis-hinweis { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .9rem; }

@media (max-width: 900px) {
  .archiv-filter { grid-template-columns: 1fr 1fr; }
  .archiv-filter-suche { grid-column: 1 / -1; }
  .nachweis-raster { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .archiv-filter { grid-template-columns: 1fr; }
  .archiv-filter-suche { grid-column: auto; }
  .datenliste > div { grid-template-columns: 1fr; gap: 3px; }
  .amtliche-metadaten-nachweis a { width: 100%; margin-left: 0; }
}

@media print {
  .nachweis-seite .btn, .nachweis-seite ~ footer, .page-header .detail-kopf-aktionen, .page-header .btn-zurueck { display: none !important; }
  .nachweis-karte { break-inside: avoid; }
}

/* Ausgabenzentrale: Webausgabe, Newsletter und Druckfassung */
.ausgaben-serviceleiste { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 36px; }
.ausgaben-serviceleiste a { display: flex; gap: 13px; align-items: center; padding: 18px; border: 1px solid var(--color-border); border-radius: 9px; background: #fff; color: inherit; text-decoration: none; }
.ausgaben-serviceleiste a:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.ausgaben-serviceleiste i { color: var(--color-primary); font-size: 1.65rem; }
.ausgaben-serviceleiste span { display: grid; }
.ausgaben-serviceleiste small { color: var(--color-text-muted); }
.ausgaben-liste { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.ausgabe-karte { display: flex; flex-direction: column; min-height: 230px; padding: 24px; border: 1px solid var(--color-border); border-top: 5px solid var(--color-primary); border-radius: 9px; background: #fff; }
.ausgabe-karte-meta,.ausgabe-beitrag-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--color-text-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .035em; }
.ausgabe-karte h2 { margin: 18px 0 8px; }
.ausgabe-karte-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; }
.newsletter-box { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; margin-top: 45px; padding: 30px; border-radius: 10px; background: #eae2c8; }
.newsletter-box h2 { margin-top: 4px; }
.newsletter-box label { display: block; margin-bottom: 6px; font-weight: 700; }
.newsletter-form-zeile { display: flex; gap: 9px; }
.newsletter-form-zeile input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #8f8e86; border-radius: 6px; font: inherit; }
.newsletter-box form > small { display: block; margin-top: 9px; color: var(--color-text-muted); }
.abo-honigfeld { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }
.ausgabe-kopf { display: flex; justify-content: space-between; gap: 35px; padding-bottom: 24px; border-bottom: 3px solid var(--color-primary); }
.ausgabe-kopf h1 { margin: 4px 0 10px; }
.ausgabe-kopf-daten { display: grid; align-content: start; gap: 5px; min-width: 185px; text-align: right; color: var(--color-text-muted); }
.ausgabe-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.ausgabe-aktionen .btn-secondary { border-color: var(--color-primary); background: #fff; color: var(--color-primary); }
.ausgabe-einleitung { margin: 28px 0; padding: 22px; border-radius: 8px; background: #f3f0e7; }
.ausgabe-inhalte { display: grid; gap: 24px; }
.ausgabe-beitrag { padding: 26px; border: 1px solid var(--color-border); border-radius: 9px; background: #fff; }
.ausgabe-beitrag h2 { margin: 10px 0; }
.ausgabe-beitrag-text { margin-top: 15px; }
.ausgabe-quelle { display: inline-flex; gap: 6px; align-items: center; margin-top: 18px; font-weight: 700; }
.ausgabe-druck-url { display: none; }
.ausgabe-rechtshinweis { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--color-border); font-size: .88rem; }

@media (max-width: 850px) {
  .ausgaben-serviceleiste,.ausgaben-liste { grid-template-columns: 1fr; }
  .newsletter-box { grid-template-columns: 1fr; }
  .ausgabe-kopf { display: grid; }
  .ausgabe-kopf-daten { text-align: left; }
}
@media (max-width: 560px) {
  .newsletter-form-zeile { align-items: stretch; flex-direction: column; }
}

@media print {
  body:has(.ausgabe-druck) .utility-bar,
  body:has(.ausgabe-druck) .site-header,
  body:has(.ausgabe-druck) .nav-primary,
  body:has(.ausgabe-druck) .breadcrumb,
  body:has(.ausgabe-druck) .site-footer,
  body:has(.ausgabe-druck) .consent-banner,
  .ausgabe-nicht-drucken { display: none !important; }
  .ausgabe-druck { font-size: 10.5pt; }
  .ausgabe-druck .container { width: auto; max-width: none; padding: 0; }
  .ausgabe-kopf { padding-top: 0; }
  .ausgabe-beitrag { break-inside: avoid; padding: 16px 0; border: 0; border-bottom: 1px solid #bbb; border-radius: 0; }
  .ausgabe-beitrag-text { max-height: none; }
  .ausgabe-druck-url { display: block; margin-top: 12px; overflow-wrap: anywhere; }
  @page { margin: 16mm; }
}

/* ==========================================================================
   Besuchereinstellungen für barrierearme Darstellung
   ========================================================================== */
html[data-schrift="gross"] { font-size: 112.5%; }
html[data-schrift="sehr-gross"] { font-size: 125%; }

html[data-schrift="gross"] .page-header h1,
html[data-schrift="sehr-gross"] .page-header h1 {
  white-space: normal;
  overflow-wrap: anywhere;
}

html[data-bewegung="reduziert"] { scroll-behavior: auto; }
html[data-bewegung="reduziert"] *,
html[data-bewegung="reduziert"] *::before,
html[data-bewegung="reduziert"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
}
html[data-bewegung="reduziert"] .darstellung-schalter span { transition: none; }
.startseiten-slider-steuerung > button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

html[data-kontrast="hoch"] {
  --color-primary: #063d1f;
  --color-primary-dark: #001f0e;
  --color-primary-light: #e6f3e9;
  --color-text: #000;
  --color-text-muted: #161616;
  --color-bg: #fff;
  --color-bg-alt: #fff;
  --color-bg-alt-2: #f2f2f2;
  --color-beige: #fff;
  --color-border: #111;
}
html[data-kontrast="hoch"] .breadcrumb,
html[data-kontrast="hoch"] .page-header,
html[data-kontrast="hoch"] main#content {
  --color-primary: #063d1f;
  --color-primary-dark: #001f0e;
  --color-primary-light: #e6f3e9;
  --color-text: #000;
  --color-text-muted: #161616;
  --color-bg-alt: #fff;
  --color-bg-alt-2: #f2f2f2;
  --color-border: #111;
}
html[data-kontrast="hoch"] :focus-visible {
  outline: 4px solid #ffbf00;
  outline-offset: 3px;
}
html[data-kontrast="hoch"] .utility-bar,
html[data-kontrast="hoch"] .site-header,
html[data-kontrast="hoch"] .nav-primary,
html[data-kontrast="hoch"] main#content,
html[data-kontrast="hoch"] .darstellung-panel {
  border-color: #111;
}
html[data-kontrast="hoch"] main#content a:not(.btn):not(.btn-startseite),
html[data-kontrast="hoch"] .breadcrumb a,
html[data-kontrast="hoch"] .site-footer a {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.16em;
}
html[data-kontrast="hoch"] .page-header:not(.page-header--mit-bild) {
  background: #fff;
}
html[data-kontrast="hoch"] .page-header--mit-bild {
  background-image:
    linear-gradient(90deg, rgba(0, 20, 8, 1) 0%, rgba(0, 20, 8, 0.97) 42%, rgba(0, 20, 8, 0.58) 76%, rgba(0, 20, 8, 0.38) 100%),
    var(--page-header-bild);
}
html[data-kontrast="hoch"] .startseiten-slide-verlauf {
  background: linear-gradient(90deg, rgba(0, 18, 8, 0.76) 0%, rgba(0, 18, 8, 0.36) 52%, rgba(0, 18, 8, 0.08) 100%);
}
html[data-kontrast="hoch"] .startseiten-slide-text {
  border: 2px solid #111;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Im Kontrastmodus ist die Fläche weiss - die weisse Schrift von oben wäre
   dort unsichtbar. */
html[data-kontrast="hoch"] .startseiten-slide-text .startseiten-slide-kicker,
html[data-kontrast="hoch"] .startseiten-slide-text h1,
html[data-kontrast="hoch"] .startseiten-slide-text h2,
html[data-kontrast="hoch"] .startseiten-slide-text p {
  color: #111;
}
html[data-kontrast="hoch"] .startseiten-slider-steuerung {
  border: 2px solid #fff;
  background: #001f0e;
  backdrop-filter: none;
}
html[data-kontrast="hoch"] .site-footer {
  background: #001f0e;
  color: #fff;
}
html[data-kontrast="hoch"] .site-footer h2,
html[data-kontrast="hoch"] .site-footer h3,
html[data-kontrast="hoch"] .site-footer h4 {
  color: #fff;
}
html[data-kontrast="hoch"] .darstellung-panel,
html[data-kontrast="hoch"] .darstellung-panel-schliessen,
html[data-kontrast="hoch"] .darstellung-schrift-auswahl button {
  border-width: 2px;
}

@media (max-width: 900px) {
  .page-header h1 {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  .page-header--mit-zusatz {
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .page-header--mit-zusatz .page-header-zusatz-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page-header--mit-zusatz h1 { font-size: 2rem; }
  .page-header-untertitel {
    margin-top: 7px;
    font-size: .94rem;
  }
  .page-header-beschreibung {
    margin-top: 3px;
    font-size: .84rem;
    line-height: 1.35;
  }
  .page-header-kennzahl {
    display: flex;
    width: fit-content;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border-left-width: 3px;
  }
  .page-header-kennzahl strong { font-size: 1.7rem; }
  .page-header-kennzahl span {
    margin-top: 0;
    font-size: .68rem;
  }
}

/* Verwaltung: durchsuchbare Anlaufstellen der erfüllenden Gemeinde Ruhla. */
.verwaltung-verzeichnis {
  width: 100%;
  margin-bottom: 48px;
}
.verwaltung-suche {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(31,61,43,.06);
}
.verwaltung-suche label {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: .92rem;
  font-weight: 700;
}
.verwaltung-suche-feld {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 980px;
}
.verwaltung-suche-feld > i {
  position: absolute;
  left: 18px;
  z-index: 1;
  color: var(--color-primary);
  font-size: 1.35rem;
  pointer-events: none;
}
.verwaltung-suche-feld input {
  width: 100%;
  min-height: 62px;
  padding: 14px 135px 14px 52px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  box-shadow: 0 8px 24px rgba(31,61,43,.08);
}
.verwaltung-suche-feld input:focus {
  border-color: var(--color-primary);
  outline: 0;
}
.verwaltung-suche-feld button {
  position: absolute;
  right: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.verwaltung-treffer {
  max-width: none;
  margin: 22px 0 28px;
  color: var(--color-text-muted);
  font-size: .9rem;
  font-weight: 600;
}
.verwaltung-gruppe {
  margin-top: 44px;
}
.verwaltung-gruppe[hidden],
.verwaltung-karte[hidden] {
  display: none !important;
}
.verwaltung-gruppe-kopf {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.verwaltung-gruppe-kopf h2 { margin: 0; }
.verwaltung-gruppe-kopf > span {
  color: var(--color-text-muted);
  font-size: .82rem;
  white-space: nowrap;
}
.verwaltung-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.verwaltung-karte {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 21px;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(31,61,43,.06);
}
.verwaltung-karte--sehr-wichtig { border-top-color: var(--color-accent); }
.verwaltung-karte--weitere { border-top-color: #93a18f; }
.verwaltung-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.verwaltung-wichtigkeit,
.verwaltung-zimmer {
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.verwaltung-karte--sehr-wichtig .verwaltung-wichtigkeit { color: #97581d; }
.verwaltung-karte h3 {
  margin-bottom: 10px;
  font-size: 1.23rem;
}
.verwaltung-karte h4 {
  margin: 0 0 7px;
  color: var(--color-text);
  font-size: .82rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.verwaltung-person {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  margin-bottom: 15px;
  color: var(--color-text);
  font-weight: 700;
}
.verwaltung-person i { color: var(--color-primary); font-size: 1.1rem; }
.verwaltung-kurztelefon,
.verwaltung-karte-toggle { display: none; }
.verwaltung-karte-inhalt { display: contents; }
.verwaltung-karte-inhalt[hidden] { display: none !important; }
.verwaltung-kontaktwege {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.verwaltung-kontaktwege a,
.verwaltung-kontaktwege > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  color: var(--color-text);
  font-size: .92rem;
}
.verwaltung-kontaktwege i { margin-top: 3px; color: var(--color-primary); }
.verwaltung-kontaktwege span span,
.verwaltung-kontaktwege a span { overflow-wrap: anywhere; }
.verwaltung-kontaktwege a[href^="tel:"] > span,
.verwaltung-kontaktwege > span > span {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.verwaltung-aufgaben { margin-bottom: 17px; }
.verwaltung-aufgaben ul {
  margin: 0;
  padding-left: 20px;
}
.verwaltung-aufgaben li {
  margin-bottom: 5px;
  color: var(--color-text-muted);
  font-size: .9rem;
}
.verwaltung-aufgaben details { margin-top: 6px; }
.verwaltung-aufgaben details ul { margin-top: 8px; }
.verwaltung-aufgaben summary,
.verwaltung-details summary {
  color: var(--color-primary);
  font-size: .87rem;
  font-weight: 700;
  cursor: pointer;
}
.verwaltung-details {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.verwaltung-details > div {
  margin-top: 13px;
  padding: 14px;
  border-radius: 8px;
  background: var(--color-bg-alt);
}
.verwaltung-details address,
.verwaltung-details p {
  max-width: none;
  margin: 0 0 13px;
  color: var(--color-text-muted);
  font-size: .88rem;
  font-style: normal;
}
.verwaltung-details p:last-child,
.verwaltung-details address:last-child { margin-bottom: 0; }
.verwaltung-hinweis {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  padding-top: 11px;
  border-top: 1px solid var(--color-border);
}
.verwaltung-hinweis i { margin-top: 3px; color: var(--color-primary); }
.verwaltung-quelle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 16px;
  font-size: .78rem;
  font-weight: 700;
}
.verwaltung-keine-treffer {
  padding: 54px 25px;
  border: 1px dashed var(--color-border);
  border-radius: 13px;
  text-align: center;
}
.verwaltung-keine-treffer > i {
  color: var(--color-primary);
  font-size: 2.25rem;
}
.verwaltung-keine-treffer h2 { margin-top: 8px; }
.verwaltung-keine-treffer p { margin: 0 auto; }

@media (max-width: 1180px) {
  .verwaltung-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .verwaltung-karten { grid-template-columns: 1fr; }
  .verwaltung-gruppe { margin-top: 31px; }
  .verwaltung-karte {
    padding: 18px;
    box-shadow: 0 8px 24px rgba(31,61,43,.05);
  }
  .verwaltung-karte-kopf { margin-bottom: 9px; }
  .verwaltung-karte h3 {
    margin-bottom: 7px;
    font-size: 1.08rem;
  }
  .verwaltung-person {
    margin-bottom: 9px;
    font-size: .91rem;
  }
  .verwaltung-kurztelefon {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin-bottom: 12px;
    color: var(--color-primary);
    font-size: .94rem;
    font-weight: 800;
  }
  .verwaltung-karte-toggle {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
    color: var(--color-primary);
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }
  .verwaltung-karte-toggle i {
    flex: 0 0 auto;
    font-size: 1.1rem;
    transition: transform .18s ease;
  }
  .verwaltung-karte-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .verwaltung-karte-inhalt {
    display: block;
    padding-top: 4px;
  }
  .verwaltung-kontaktwege { margin-top: 10px; }
  .verwaltung-details { margin-top: 0; }
}

@media (max-width: 560px) {
  .verwaltung-suche { padding: 24px 19px; }
  .verwaltung-suche-feld { display: block; }
  .verwaltung-suche-feld input { padding-right: 16px; }
  .verwaltung-suche-feld button {
    position: static;
    width: 100%;
    margin-top: 8px;
  }
  .verwaltung-gruppe-kopf {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

@media (max-width: 520px) {
  .utility-bar a[href="/veranstaltungskalender.php"],
  .utility-bar a[href="/verwaltung/buergerservice/meldeformular"],
  .utility-bar .utility-link--sekundaer {
    display: none;
  }
  .utility-darstellung { padding: 3px 9px; }
  .darstellung-panel {
    width: calc(100vw - 24px);
    right: 12px;
    padding: 19px;
  }
  .darstellung-panel-fuss {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (forced-colors: active) {
  .darstellung-schalter,
  .darstellung-schrift-auswahl button,
  .startseiten-slider-steuerung {
    forced-color-adjust: auto;
  }
  .darstellung-schalter[aria-checked="true"] span {
    outline: 2px solid ButtonText;
  }
}

/* ==========================================================================
   Moderne, redaktionell pflegbare Startseite
   ========================================================================== */
.startseite-modern {
  overflow: hidden;
  background: #fff;
}

.startseiten-slider {
  position: relative;
  min-height: clamp(520px, 61vw, 680px);
  background: var(--color-primary-dark);
  isolation: isolate;
}
.startseiten-slides,
.startseiten-slide {
  position: absolute;
  inset: 0;
}
.startseiten-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s ease, visibility 0.65s ease;
  pointer-events: none;
}
.startseiten-slide.ist-aktiv {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.startseiten-slide-bild,
.startseiten-slide-platzhalter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.startseiten-slide-bild {
  object-fit: cover;
  object-position: center;
}
.startseiten-slide-platzhalter {
  background:
    radial-gradient(circle at 76% 22%, rgba(234, 226, 200, 0.2), transparent 30%),
    linear-gradient(125deg, var(--color-primary-dark), var(--color-primary) 58%, #7d9568);
}
.startseiten-slide-verlauf {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(15, 31, 21, 0.38) 0%,
      rgba(15, 31, 21, 0.16) 28%,
      rgba(15, 31, 21, 0.05) 44%,
      transparent 66%
    ),
    linear-gradient(0deg, rgba(15, 31, 21, 0.18), transparent 42%);
}
.startseiten-slide-inhalt {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: clamp(520px, 61vw, 680px);
  display: flex;
  align-items: flex-end;
  padding-top: 64px;
  padding-bottom: 88px;
}
/* Die Bildunterschrift steht in weisser Schrift auf einer dunklen, leicht
   durchscheinenden Fläche - Vorbild ruhla.de. Vorher lag helles Beige mit
   schwarzer Schrift über dem Foto; auf hellen Aufnahmen (Himmel, Schnee) war
   der Text dort schwer zu lesen. Dunkel nach oben ist der sichere Weg: Ein
   Foto kann beliebig hell werden, die Fläche darüber bleibt gleich dunkel. */
.startseiten-slide-text {
  width: min(640px, 58vw);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px 24px 24px 2px;
  background: rgba(15, 31, 21, 0.34);
  box-shadow: 0 28px 70px rgba(15, 31, 21, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.startseiten-slide-kicker,
.startseiten-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.startseiten-slide-text .startseiten-slide-kicker {
  color: rgba(255, 255, 255, 0.86);
}
.startseiten-slide-text h1,
.startseiten-slide-text h2 {
  margin-bottom: 14px;
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 0.98;
  text-wrap: balance;
}
.startseiten-slide-text p {
  max-width: 52ch;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.93);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.65;
}
.btn-startseite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
}
.btn-startseite:hover {
  background: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
}
.startseiten-slider-bedienung {
  position: relative;
  z-index: 3;
  min-height: clamp(520px, 61vw, 680px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 28px;
  pointer-events: none;
}
.startseiten-slider-steuerung {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  background: rgba(22, 41, 29, 0.82);
  box-shadow: 0 8px 30px rgba(0,0,0,0.16);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.startseiten-slider-steuerung > button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.startseiten-slider-steuerung > button:hover {
  background: rgba(255,255,255,0.12);
}
.startseiten-slider-punkte {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px;
}
.startseiten-slider-punkte button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.startseiten-slider-punkte button.ist-aktiv {
  width: 25px;
  background: var(--color-beige);
}

.startseiten-schnellzugriffe {
  position: relative;
  z-index: 4;
  margin-top: -24px;
}
.startseiten-schnellzugriffe-raster {
  display: grid;
  /* Spaltenzahl kommt aus der Vorlage und entspricht der Zahl der Kacheln. */
  grid-template-columns: repeat(var(--schnellzugriffe-spalten, 4), minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(31, 61, 43, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(22, 41, 29, 0.12);
}
.startseiten-schnellzugriffe-raster a {
  min-height: 108px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 24px 26px;
  border-right: 1px solid var(--color-border);
  color: var(--color-primary-dark);
}
.startseiten-schnellzugriffe-raster a:last-child {
  border-right: 0;
}
.startseiten-schnellzugriffe-raster a:hover {
  background: var(--color-primary-light);
  text-decoration: none;
}
.startseiten-schnellzugriffe-raster a > i:first-child {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-beige);
  color: var(--color-primary);
  font-size: 1.25rem;
}
.startseiten-schnellzugriffe-raster a > i:last-child {
  color: var(--color-text-muted);
}
.startseiten-schnellzugriffe-raster span {
  font-size: 0.95rem;
  font-weight: 750;
}

.startseiten-abschnitt {
  padding: clamp(72px, 8vw, 118px) 0;
}
.startseiten-abschnitt-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}
.startseiten-abschnitt-kopf h2,
.startseiten-box-kopf h2 {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1;
}
.startseiten-abschnitt-kopf > p {
  margin: 0 0 5px;
  text-align: right;
}
.startseiten-mehr,
.startseiten-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 750;
}
.startseiten-mehr:hover,
.startseiten-inline-link:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

.startseiten-aktuell {
  /* Deutlich knapper als früher (104-150 px): Zwischen den Schnellzugriff-
     Kacheln und „Aktuelles" klaffte sonst eine Lücke von rund 120 px. */
  padding-top: clamp(52px, 5vw, 78px);
  background: #fff;
}
.startseiten-aktuell-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.85fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}
.startseiten-hauptmeldung {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-bg-alt);
}
.startseiten-hauptmeldung-bild {
  height: clamp(250px, 30vw, 390px);
  display: block;
  overflow: hidden;
  background: var(--color-primary-light);
}
.startseiten-hauptmeldung-bild img,
.startseiten-bildplatzhalter {
  width: 100%;
  height: 100%;
}
.startseiten-hauptmeldung-bild img {
  object-fit: cover;
  transition: transform 0.45s ease;
}
.startseiten-hauptmeldung:hover .startseiten-hauptmeldung-bild img {
  transform: scale(1.025);
}
.startseiten-bildplatzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 68% 24%, rgba(242, 237, 226, 0.34), transparent 24%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: rgba(255,255,255,0.72);
  font-size: 3rem;
}
.startseiten-hauptmeldung-text {
  padding: clamp(25px, 4vw, 42px);
}
.startseiten-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 14px;
  margin-bottom: 13px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.startseiten-meta span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-beige);
  color: var(--color-primary);
  font-weight: 750;
}
.startseiten-hauptmeldung h3 {
  max-width: 26ch;
  margin-bottom: 12px;
  color: var(--color-primary-dark);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}
.startseiten-hauptmeldung h3 a {
  color: inherit;
}
.startseiten-hauptmeldung h3 a:hover {
  text-decoration: none;
}
.startseiten-hauptmeldung p {
  margin-bottom: 18px;
}
.startseiten-meldungen-liste {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.startseiten-meldungen-liste li {
  border-bottom: 1px solid var(--color-border);
}
.startseiten-meldungen-liste a {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 4px;
  color: var(--color-text);
}
.startseiten-meldungen-liste a:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.startseiten-meldungen-liste strong {
  display: block;
  font-size: 0.95rem;
}
.startseiten-meldungen-liste time {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.76rem;
}
.startseiten-info-spalte {
  display: grid;
  gap: 24px;
}
.startseiten-termine-box,
.startseiten-bekanntmachung {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 22px;
}
.startseiten-termine-box {
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.startseiten-box-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.startseiten-box-kopf h2 {
  font-size: 2.25rem;
}
.startseiten-box-kopf > a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary);
}
.startseiten-termine-box ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.startseiten-termine-box li + li {
  border-top: 1px solid var(--color-border);
}
.startseiten-termine-box li > a {
  min-height: 78px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  color: var(--color-text);
}
.startseiten-termine-box li > a:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.startseiten-termine-box time {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-beige);
  color: var(--color-primary-dark);
  line-height: 1;
}
.startseiten-termine-box time strong {
  font-size: 1.25rem;
}
.startseiten-termine-box time span {
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.startseiten-termine-box li > a > span > strong,
.startseiten-termine-box li > a > span > small {
  display: block;
}
.startseiten-termine-box li > a > span > strong {
  font-size: 0.9rem;
  line-height: 1.35;
}
.startseiten-termine-box li > a > span > small {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.startseiten-box-hinweis {
  margin: 0;
}
.startseiten-bekanntmachung {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
}
.startseiten-bekanntmachung::after {
  content: '§';
  position: absolute;
  right: 18px;
  bottom: -46px;
  color: rgba(255,255,255,0.06);
  font-family: Georgia, serif;
  font-size: 10rem;
  line-height: 1;
}
.startseiten-bekanntmachung .startseiten-eyebrow {
  color: var(--color-beige);
}
.startseiten-bekanntmachung h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  color: #fff;
  font-family: var(--font-base);
  font-size: 1.13rem;
  font-weight: 750;
}
.startseiten-bekanntmachung p {
  position: relative;
  z-index: 1;
  margin-bottom: 17px;
  color: rgba(255,255,255,0.8);
  font-size: 0.88rem;
}
.startseiten-bekanntmachung a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 750;
}
.startseiten-leerzustand {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  border: 1px dashed var(--color-border);
  border-radius: 22px;
  background: var(--color-bg-alt);
}
.startseiten-leerzustand > i {
  font-size: 2rem;
  color: var(--color-primary);
}
.startseiten-leerzustand strong,
.startseiten-leerzustand span {
  display: block;
}
.startseiten-leerzustand span {
  color: var(--color-text-muted);
  font-size: 0.86rem;
}

.startseiten-fakten {
  background: var(--color-primary-dark);
  color: #fff;
}
.startseiten-fakten .container {
  min-height: 156px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(190px, auto);
  align-items: center;
}
.startseiten-fakten .container > div {
  padding: 18px 26px;
  border-right: 1px solid rgba(255,255,255,0.13);
}
.startseiten-fakten strong,
.startseiten-fakten span {
  display: block;
}
.startseiten-fakten strong {
  color: var(--color-beige);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
}
.startseiten-fakten span {
  margin-top: 7px;
  color: rgba(255,255,255,0.65);
  font-size: 0.73rem;
}
.startseiten-fakten a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 20px 0 20px 28px;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 750;
  text-align: right;
}

.startseiten-entdecken {
  background: var(--color-bg-alt);
}
.startseiten-entdecken-raster {
  display: grid;
  grid-template-columns: 1.22fr 1fr 1fr;
  grid-template-rows: repeat(2, 235px);
  gap: 18px;
}
.startseiten-entdecken-kachel {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--color-primary);
  color: #fff;
}
.startseiten-entdecken-kachel:nth-child(1) {
  grid-row: 1 / 3;
}
.startseiten-entdecken-kachel:nth-child(2) {
  grid-column: 2 / 4;
}
.startseiten-entdecken-kachel img,
.startseiten-entdecken-platzhalter,
.startseiten-entdecken-verlauf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.startseiten-entdecken-kachel img {
  object-fit: cover;
  transition: transform 0.5s ease;
}
.startseiten-entdecken-platzhalter {
  background:
    radial-gradient(circle at 70% 28%, rgba(242,237,226,0.22), transparent 25%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}
.startseiten-entdecken-verlauf {
  background: linear-gradient(0deg, rgba(11, 25, 17, 0.88), rgba(11, 25, 17, 0.05) 70%);
}
.startseiten-entdecken-text {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 24px;
  left: 26px;
}
.startseiten-entdecken-text strong,
.startseiten-entdecken-text span {
  display: block;
}
.startseiten-entdecken-text strong {
  color: #fff;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}
.startseiten-entdecken-text span {
  max-width: 38ch;
  margin-top: 5px;
  color: rgba(255,255,255,0.76);
  font-size: 0.8rem;
}
.startseiten-entdecken-kachel > i {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  color: #fff;
}
.startseiten-entdecken-kachel:hover {
  text-decoration: none;
}
.startseiten-entdecken-kachel:hover img {
  transform: scale(1.035);
}

.startseiten-textbild {
  background: #fff;
}
.startseiten-textbild-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-beige);
}
.startseiten-textbild-raster.bild-rechts .startseiten-textbild-bild {
  order: 2;
}
.startseiten-textbild-bild {
  min-height: 430px;
  background: var(--color-primary);
}
.startseiten-textbild-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.startseiten-textbild-inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(36px, 6vw, 78px);
}
.startseiten-textbild-inhalt h2 {
  margin-bottom: 18px;
  color: var(--color-primary-dark);
  font-size: clamp(2rem, 3.8vw, 3.3rem);
  line-height: 1;
}
.startseiten-textbild-inhalt p {
  margin-bottom: 25px;
  line-height: 1.75;
}

@media (max-width: 1100px) {
  .startseiten-schnellzugriffe-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .startseiten-schnellzugriffe-raster a:nth-child(2n) {
    border-right: 0;
  }
  /* Trennlinie unter jeder Kachel ausser der letzten - bei ungerader Anzahl
     (fünf Kacheln, drei Reihen) fehlten sonst die unteren Linien. */
  .startseiten-schnellzugriffe-raster a {
    border-bottom: 1px solid var(--color-border);
  }
  .startseiten-schnellzugriffe-raster a:last-child {
    border-bottom: 0;
  }
  .startseiten-aktuell-raster {
    grid-template-columns: 1fr;
  }
  .startseiten-info-spalte {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  }
  .startseiten-fakten .container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, auto);
  }
  .startseiten-fakten .container > div:nth-child(2) {
    border-right: 0;
  }
  .startseiten-fakten a {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (max-width: 768px) {
  .startseiten-slider,
  .startseiten-slide-inhalt,
  .startseiten-slider-bedienung {
    min-height: 600px;
  }
  .startseiten-slide-inhalt {
    align-items: flex-end;
    padding-right: 0;
    padding-bottom: 74px;
    padding-left: 0;
  }
  .startseiten-slide-text {
    width: calc(100% - 30px);
    margin-right: 15px;
    margin-left: 15px;
    padding: 28px 25px;
    border-radius: 18px;
    background: rgba(242, 237, 226, 0.4);
  }
  .startseiten-slide-text h1,
  .startseiten-slide-text h2 {
    font-size: clamp(2.25rem, 10vw, 3.4rem);
  }
  .startseiten-slider-bedienung {
    align-items: flex-start;
    padding-top: 18px;
    padding-right: 15px;
  }
  .startseiten-schnellzugriffe {
    margin-top: 0;
    padding: 16px 0;
    background: var(--color-bg-alt);
  }
  .startseiten-schnellzugriffe-raster {
    box-shadow: 0 12px 34px rgba(22,41,29,0.08);
  }
  .startseiten-schnellzugriffe-raster a {
    min-height: 90px;
    padding: 19px;
  }
  .startseiten-abschnitt-kopf {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .startseiten-abschnitt-kopf > p {
    text-align: left;
  }
  .startseiten-info-spalte {
    grid-template-columns: 1fr;
  }
  .startseiten-fakten .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .startseiten-fakten .container > div {
    padding: 17px 12px;
  }
  .startseiten-fakten .container > div:nth-child(2n) {
    border-right: 0;
  }
  .startseiten-fakten a {
    grid-column: 1 / 3;
    grid-row: auto;
    justify-content: flex-start;
    padding: 21px 12px 5px;
    border-top: 1px solid rgba(255,255,255,0.13);
    text-align: left;
  }
  .startseiten-entdecken-raster {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 210px);
  }
  .startseiten-entdecken-kachel:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: auto;
  }
  .startseiten-entdecken-kachel:nth-child(2) {
    grid-column: 1 / 3;
  }
  .startseiten-textbild-raster {
    grid-template-columns: 1fr;
  }
  .startseiten-textbild-raster.bild-rechts .startseiten-textbild-bild {
    order: 0;
  }
  .startseiten-textbild-bild {
    min-height: 320px;
  }
}

@media (max-width: 520px) {
  .startseiten-slider,
  .startseiten-slide-inhalt,
  .startseiten-slider-bedienung {
    min-height: 620px;
  }
  .startseiten-slide-bild {
    object-position: center top;
  }
  .startseiten-slide-inhalt {
    padding-bottom: 62px;
  }
  .startseiten-slide-text {
    padding: 25px 21px;
  }
  .startseiten-slide-text p {
    font-size: 0.94rem;
  }
  .startseiten-slider-steuerung {
    padding: 5px;
  }
  .startseiten-slider-steuerung > button {
    width: 33px;
    height: 33px;
  }
  .startseiten-schnellzugriffe-raster {
    grid-template-columns: 1fr;
  }
  .startseiten-schnellzugriffe-raster a,
  .startseiten-schnellzugriffe-raster a:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .startseiten-schnellzugriffe-raster a:last-child {
    border-bottom: 0;
  }
  .startseiten-hauptmeldung-bild {
    height: 230px;
  }
  .startseiten-entdecken-raster {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .startseiten-entdecken-kachel,
  .startseiten-entdecken-kachel:nth-child(1),
  .startseiten-entdecken-kachel:nth-child(2) {
    grid-column: 1;
    grid-row: auto;
    min-height: 245px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .startseiten-slide,
  .startseiten-hauptmeldung-bild img,
  .startseiten-entdecken-kachel img,
  .startseiten-slider-punkte button {
    transition: none;
  }
}

/* Linkbox: mehrere Verweise in einem Kasten der rechten Spalte. Aufgebaut wie
   die Dokumentenliste daneben, damit beide als dieselbe Art Kasten gelesen
   werden. */
.linkbox-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linkbox-liste li + li {
  border-top: 1px solid var(--color-border);
}
.linkbox-liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-weight: 600;
  text-decoration: none;
}
.linkbox-liste a:hover,
.linkbox-liste a:focus-visible {
  text-decoration: underline;
}
.linkbox-liste i {
  flex: 0 0 auto;
  font-size: 1.1rem;
  color: var(--color-primary);
}