@charset "UTF-8";
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Variable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
.t-display {
  font-family: "Fraunces", Georgia, serif;
  font-size: 60px;
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.015em;
}

.t-h1 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 46px;
  line-height: 1.08;
  font-weight: 350;
  letter-spacing: -0.01em;
}

.t-h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 34px;
  line-height: 1.14;
  font-weight: 350;
  letter-spacing: -0.005em;
}

.t-h3 {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.t-zahl {
  font-family: "Fraunces", Georgia, serif;
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
}

.t-marke {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 38px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.t-anriss {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.55;
  font-weight: 400;
}

.t-text {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}

.t-nav {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 450;
}

.t-meta {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
}

.t-kicker {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.oa, .oa * {
  box-sizing: border-box;
}

.oa [hidden] {
  display: none !important;
}

.oa .ist-spaeter {
  display: none !important;
}

.oa {
  margin: 0;
  background: #ffffff;
  color: #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "SOFT" 100;
}

.oa h1, .oa h2, .oa h3, .t-display, .t-h1, .t-h2, .t-h3 {
  text-wrap: balance;
}

.oa p {
  text-wrap: pretty;
}

.oa :is(h1, h2, h3, h4, .t-display, .t-h1, .t-h2, .t-h3, .st__titel) {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

.oa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oa a {
  color: inherit;
  text-decoration: none;
}

.oa button {
  font: inherit;
  color: inherit;
}

.oa :focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 3px;
}

.oa h1, .oa h2, .oa h3, .oa h4 {
  font-optical-sizing: auto;
}

.einblenden {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.einblenden--da {
  opacity: 1;
  transform: none;
}

@media print {
  .einblenden {
    opacity: 1;
    transform: none;
  }
}
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.abschnitt {
  padding: 104px 0;
}

.abschnitt--kalk {
  background: #f5f3ee;
}

.vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.abschnitt--kalk + .abschnitt--kalk {
  border-top: 1px solid #e4e7e2;
}

.abschnitt--wald {
  background: #1f3d36;
  color: #ffffff;
}

/* ---- Abschnitts-Kopf ---- */
.kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.kopf h2 {
  margin: 0;
}

.kopf > div:first-child::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  background: #c89b4a;
}

.kopf__unter {
  margin: 10px 0 0;
  color: #5b6560;
  font-size: 19px;
}

/* Nachrangige Abschnitte (Betriebe, Vereine) mit kleinerem Kopf: gibt der Startseite eine Rangfolge statt sechs gleicher Köpfe */
.kopf--klein .t-h1 {
  font-size: 34px;
}

.kopf--klein {
  margin-bottom: 36px;
}

/* Kopf links neben dem Inhalt (Rathaus & Amt, ab 1181 px): Überschrift, Unterzeile und Link untereinander */
@media (min-width: 1181px) {
  .abschnitt-seitlich {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 64px;
    align-items: start;
  }
  .kopf--seitlich {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin: 0;
    position: sticky;
    top: 100px;
  }
  .abschnitt-seitlich .amt-liste--zweispaltig {
    grid-template-columns: minmax(0, 1fr);
  }
}
.abschnitt--wald .kopf__unter {
  color: #ffffff;
  opacity: 0.75;
}

.mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  color: #1f2a26;
  padding: 9px 18px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mehr:hover {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.abschnitt--wald .mehr {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.abschnitt--wald .mehr:hover {
  background: #ffffff;
  color: #1f3d36;
}

.mehr--text {
  padding: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
}

.mehr--text:hover {
  background: none;
  color: #2f6c5e;
}

/* Als <button>: ohne Grundfläche des Browsers; der Hover ist stärker als Bereichsregeln, die die Fläche zurücksetzen */
button.mehr {
  background: none;
  font-family: inherit;
  cursor: pointer;
}

button.mehr:hover {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

button.mehr--text:hover {
  background: none;
  color: #2f6c5e;
}

.pfeil {
  width: 16px;
  height: 16px;
  flex: none;
}

.t-kicker {
  display: block;
  text-transform: uppercase;
  color: #2f6c5e;
  font-family: "Figtree", system-ui, sans-serif;
}

.t-kicker--ziegel {
  color: #b4532f;
}

.neu-marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 8px;
  color: #2f6c5e;
  font-weight: 600;
}

.neu-marke::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a8a78;
}

.tag-pille {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #b4532f;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: 1px;
}

.status-pille {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border: 1px solid #1f2a26;
  border-radius: 999px;
  color: #1f2a26;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.status-pille--abgesagt {
  background: #a3221b;
  border-color: #a3221b;
  color: #ffffff;
}

.status-pille--ausgebucht {
  background: #1f2a26;
  color: #ffffff;
}

:is(.karte, .kurz, .leitmeldung, .eintrag, .termin-karte, .termin-zeile):has(.status-pille--abgesagt) .u {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: #5b6560;
}

.t-meta {
  display: block;
  color: #5b6560;
  font-family: "Figtree", system-ui, sans-serif;
}

.t-display, .t-h1, .t-h2, .t-h3 {
  margin: 0;
}

.t-anriss, .t-text {
  margin: 0;
}

.bild {
  position: relative;
  overflow: hidden;
  background: #dfe3dd;
}

.bild img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a:hover .bild img {
  transform: scale(1.035);
}

.r-3x2 {
  aspect-ratio: 3/2;
}

.r-16x9 {
  aspect-ratio: 16/9;
}

.r-4x3 {
  aspect-ratio: 4/3;
}

.pille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.bild .pille {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #ffffff;
  color: #1f2a26;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #1f2a26;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 17px;
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}

.knopf:hover {
  opacity: 0.85;
}

/* Runder Schließen-Knopf (Menü, Kartenleiste, Blatt) */
.zu-knopf {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f5f3ee;
  color: #1f2a26;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.zu-knopf:hover {
  background: #1f2a26;
  color: #ffffff;
}

.zu-knopf svg {
  width: 16px;
  height: 16px;
}

/* Titel-Hover: feine Unterstreichung wie im Magazin */
.u {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s ease;
}

a:hover .u {
  background-size: 100% 1px;
}

/* ============================================================
   Desktop: die Seite als weißes Blatt auf einem Papiergrund
   Der Grund ($grund) trägt eine feine, gerechnete Papierstruktur (SVG-Rauschen, keine Bilddatei); das Blatt (.oa)
   bleibt weiß, hält $blatt-abstand (oben $blatt-abstand-oben) und lässt innen $blatt-rand weißen Rand. Unter 1181 px läuft die Seite wie bisher über die volle Breite.
   ============================================================ */
@media (min-width: 1181px) {
  html {
    background: #ebe7df url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  }
  .oa {
    width: min(1536px, 100% - 96px);
    margin: 20px auto 48px;
  }
  :where(.oa) .wrap {
    max-width: none;
    padding-left: clamp(64px, 7vw, 128px);
    padding-right: clamp(64px, 7vw, 128px);
  }
}
/* ============================================================
   Kopfzeile: Wortmarke, Ortswahl und Datum links, rechts Block Gemerkt | Login | Suche; Navigation darunter
   ============================================================ */
.kopfzeile {
  background: #ffffff;
}

/* Oben so viel Luft wie zwischen Wortmarke und Schrift der Navigationszeile ($kopf-oben = 22 px unten + halbe Zeilenhöhe) */
.kopfzeile__marke {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 42px;
  padding-bottom: 22px;
}

/* Datum hinter der Ortswahl, durch eine feine Linie abgesetzt */
.kopfzeile__datum {
  padding-left: 24px;
  border-left: 1px solid #c5cbc6;
  font-size: 15px;
  line-height: 1.3;
  color: #5b6560;
  white-space: nowrap;
}

/* Rechts: ein umrandeter Block mit Gemerkt | Login | Suche, Teile durch feine Linien getrennt */
.kopf-block {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  overflow: hidden;
  font-size: 15px;
}

.kopf-block__teil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border: 0;
  background: none;
  cursor: pointer;
  color: #1f2a26;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.kopf-block__teil + .kopf-block__teil {
  border-left: 1px solid #c5cbc6;
}

.kopf-block__teil svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.kopf-block__teil:hover {
  background: #f5f3ee;
  color: #2f6c5e;
}

.kopf-block__teil[aria-current] {
  background: #e2ede9;
  color: #2f6c5e;
}

.kopf-block__teil[aria-expanded=true], .kopf-block__teil[aria-expanded=true]:hover {
  background: #1f2a26;
  color: #ffffff;
}

/* Angemeldet: „Meldeportal“ gefüllt – zeigt auf einen Blick, dass man angemeldet ist */
.kopf-block__teil--an, .kopf-block__teil--an:hover, .kopf-block__teil--an[aria-current] {
  background: #e2ede9;
  color: #2f6c5e;
}

.kopf-block__teil--merken {
  padding: 0 14px;
}

/* Menü und Suche in einem Knopf: nur unter 1000 px, dort ersetzt er Login und Suche (_responsive) */
.kopf-block__teil--menue {
  display: none;
  padding: 0 14px;
}

.kopf-block__teil .kopf-block__menue-icon {
  width: 22px;
  height: 18px;
}

.kopf-block__zahl[hidden] {
  display: none;
}

.kopf-block__zahl {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2f6c5e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.kopf-pille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: #1f2a26;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.kopf-pille svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.kopf-pille:hover {
  border-color: #1f2a26;
}

.kopf-pille[aria-current] {
  border-color: #3a8a78;
  background: #e2ede9;
  color: #2f6c5e;
}

/* Ortswahl neben der Wortmarke: Filter für die ganze Seite, mit gewähltem Ort hellgrün, offen gefüllt */
.kopf-pille--ort .ort-wert {
  color: #2f6c5e;
}

.kopf-pille--ort[data-gewaehlt] {
  border-color: #e2ede9;
  background: #e2ede9;
}

.kopf-pille--ort[aria-expanded=true] {
  border-color: #1f2a26;
  background: #1f2a26;
  color: #ffffff;
}

.kopf-pille--ort[aria-expanded=true] .ort-wert {
  color: #ffffff;
}

.kopf-pille .dreieck {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}

.kopf-pille[aria-expanded=true] .dreieck {
  transform: rotate(180deg);
}

/* Login-Pille im Handy-Menü, angemeldet gefüllt */
.kopf-pille--an, .kopf-pille--an:hover {
  border-color: #e2ede9;
  background: #e2ede9;
  color: #2f6c5e;
}

.kopf-pille--an:hover {
  border-color: #3a8a78;
}

.kopf-pille--an[aria-current] {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #3a8a78;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #1f2a26;
}

.marke__bild {
  width: 38px;
  height: 38px;
  overflow: visible;
}

.marke__flaeche {
  fill: #2f6c5e;
}

.marke__pin path {
  fill: #c89b4a;
}

.marke__pin circle {
  fill: #ffffff;
}

.marke__pin {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.marke:hover .marke__pin, .marke:focus-visible .marke__pin {
  animation: marke-springen 0.8s cubic-bezier(0.3, 0.8, 0.4, 1) both;
}

@keyframes marke-springen {
  0% {
    transform: none;
  }
  15% {
    transform: scale(1.18, 0.8);
  }
  45% {
    transform: translateY(-30px) scale(0.92, 1.1) rotate(-6deg);
  }
  70% {
    transform: translateY(0) scale(1.2, 0.82);
  }
  85% {
    transform: scale(0.95, 1.06);
  }
  100% {
    transform: none;
  }
}
.marke .t-marke {
  color: #1f2a26;
}

/* Navigationszeile ist Bezugsrahmen der Panels (volle Breite) und liegt über dem Abdunkler */
.navzeile {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffff;
}

.navzeile__innen {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 76px;
  border-bottom: 1px solid #e4e7e2;
}

/* Bildmarke in der klebenden Zeile: sitzt im weißen Blattrand links neben der Navigation (nur ab 1181 px, wo das Blatt
   den Rand hat) und erscheint erst, wenn der Kopf mit der großen Wortmarke aus dem Bild ist (js/oa-kopf.js) */
.navzeile__marke {
  display: none;
}

@media (min-width: 1181px) {
  .navzeile__innen {
    position: relative;
  }
  .navzeile__marke {
    display: flex;
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 20px;
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, -50%);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .navzeile__marke .marke__bild {
    width: 28px;
    height: 28px;
  }
  .navzeile--klebt .navzeile__marke {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
  }
}
.hauptnav {
  display: flex;
  gap: 40px;
}

.hauptnav a {
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  color: #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
}

.hauptnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hauptnav a:hover::after {
  transform: scaleX(1);
}

.hauptnav a[aria-current] {
  color: #2f6c5e;
}

.hauptnav a[aria-current]::after {
  height: 2px;
  background: #3a8a78;
  transform: scaleX(1);
}

/* Bereichsleiste: unter 1000 px dieselben Bereiche als wischbare Zeile unter Menü/Ort/Suche, klebt mit der Navigationszeile.
   Läuft bis an den Bildschirmrand; den Verlauf an der Seite mit weiteren Bereichen setzt js/oa-wischen.js. */
.navleiste {
  display: none;
}

@media (max-width: 1000px) {
  html {
    scroll-padding-top: 60px;
  }
  .navzeile__innen {
    border-bottom: 0;
  }
  .navleiste {
    display: flex;
    gap: 26px;
    height: 60px;
    margin: 0 -40px;
    padding: 0 40px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #e4e7e2;
  }
  .navleiste::-webkit-scrollbar {
    display: none;
  }
  .navleiste a {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    padding-bottom: 8px;
    white-space: nowrap;
    color: #1f2a26;
  }
  .navleiste a[aria-current] {
    color: #2f6c5e;
    font-weight: 600;
  }
  .navleiste a[aria-current]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: #3a8a78;
  }
  .navleiste.wisch--rechts {
    mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
  }
  .navleiste.wisch--links {
    mask-image: linear-gradient(to right, transparent, black 56px);
  }
  .navleiste.wisch--links.wisch--rechts {
    mask-image: linear-gradient(to right, transparent, black 56px, black calc(100% - 56px), transparent);
  }
}
@media (max-width: 720px) {
  .navleiste {
    margin: 0 -16px;
    padding: 0 16px;
  }
}
.nav-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Ab 1001 px stehen Ortswahl und Block im Kopf und erscheinen hier – in derselben Form – nur, solange die Zeile klebt
   (Kopf aus dem Bild); darunter ist diese Zeile der Kopf (_responsive). */
.navzeile__wortmarke {
  display: none;
}

@media (min-width: 1001px) {
  .nav-rechts .kopf-pille--ort, .nav-rechts .kopf-block {
    display: none;
  }
  .navzeile--klebt .nav-rechts .kopf-pille--ort {
    display: inline-flex;
  }
  .navzeile--klebt .nav-rechts .kopf-block {
    display: flex;
  }
}
/* Bis $bp-breit passen Wortmarke, Ortswahl, Datum und Block nicht nebeneinander: das Datum entfällt */
@media (max-width: 1440px) {
  .kopfzeile__datum {
    display: none;
  }
}
/* Bis $bp-breit reicht die klebende Zeile nicht für Bereiche, Ortswahl und Block: der Block bleibt wie im Kopf, die
   Ortswahl wird schmal (ohne Ortssymbol, Art klein über dem Namen, lange Namen enden mit „…“) */
@media (min-width: 1001px) and (max-width: 1440px) {
  .hauptnav {
    gap: 24px;
  }
  .navzeile--klebt .nav-rechts {
    min-width: 0;
  }
  .navzeile--klebt .nav-rechts .kopf-pille--ort {
    flex: 0 1 auto;
    min-width: 0;
    gap: 5px;
    height: auto;
    min-height: 36px;
    padding: 3px 10px 3px 12px;
  }
  .navzeile--klebt .nav-rechts .kopf-pille--ort > svg:not(.dreieck) {
    display: none;
  }
  .navzeile--klebt .nav-rechts .ort-wert {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 15px;
    line-height: 1.15;
    text-align: left;
  }
  .navzeile--klebt .nav-rechts .ort-wert__art {
    font-size: 11px;
    font-weight: 500;
    color: #5b6560;
  }
  .navzeile--klebt .nav-rechts .ort-wert__name, .navzeile--klebt .nav-rechts .ort-wert__art {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navzeile--klebt .nav-rechts .kopf-pille--ort[aria-expanded=true] .ort-wert__art {
    color: inherit;
  }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .navzeile--klebt .navzeile__innen {
    gap: 20px;
  }
  .navzeile--klebt .hauptnav {
    gap: 16px;
  }
  .navzeile--klebt .nav-rechts {
    gap: 10px;
  }
  .navzeile--klebt .nav-rechts .kopf-pille--ort {
    padding: 3px 10px;
  }
  .navzeile--klebt .nav-rechts .kopf-pille--ort .dreieck {
    display: none;
  }
}
/* Ausklapp-Panels unter der Navigation (Suche, Ort): weiß über die volle Breite vor dem
   Abdunkler, Inhalt auf Wrap-Breite */
.panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(20, 30, 26, 0.18);
  padding: 28px max(40px, (100% - 1280px) / 2 + 40px) 36px;
  display: none;
}

.panel[data-offen] {
  display: block;
  animation: oa-panel-rein 0.2s ease-out;
}

@keyframes oa-panel-rein {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
/* Abdunkler (js/oa-kopf.js, window.oaEbene): liegt unter der Navigationszeile, beim Karten-Blatt über allem */
.abdunkler {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(31, 42, 38, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.abdunkler[data-sichtbar] {
  opacity: 1;
}

.abdunkler--blatt {
  z-index: 60;
  background: rgba(31, 42, 38, 0.3);
}

.abdunkler--leer {
  background: transparent;
}

html.oa-gesperrt {
  overflow: hidden;
}

/* Kurze Rückmeldung (z. B. nach der Ortswahl) */
.oa-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 90;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 22px;
  border-radius: 999px;
  background: #1f2a26;
  color: #ffffff;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 12px 40px rgba(20, 30, 26, 0.18);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.oa-toast[data-sichtbar] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.suche-form {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #1f2a26;
  padding-bottom: 10px;
}

.suche-form svg {
  width: 24px;
  height: 24px;
  color: #5b6560;
  flex: none;
}

.suche-form input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #1f2a26;
  padding: 4px 0;
  min-width: 0;
}

.suche-form input::placeholder {
  color: #5b6560;
  opacity: 0.7;
}

.suche-tipps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  align-items: center;
  font-size: 15px;
  color: #5b6560;
}

.suche-tipps a {
  padding: 5px 14px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  color: #1f2a26;
}

.suche-tipps a:hover {
  border-color: #1f2a26;
}

/* Ortswahl als Schublade (#panel-ort): eigener Schleier + Schublade, liegt über Seite und Menü.
   Desktop von rechts; unter 1000 px von links mit Spalt rechts (siehe _responsive). */
.navzeile .panel--ort {
  position: fixed;
  inset: 0;
  z-index: 3;
  padding: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.ort-schleier {
  position: absolute;
  inset: 0;
  background: rgba(31, 42, 38, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: oa-schleier-rein 0.2s ease-out;
}

@keyframes oa-schleier-rein {
  from {
    opacity: 0;
  }
}
.ort-schublade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(16px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(20, 30, 26, 0.18);
  animation: oa-schublade-rechts 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes oa-schublade-rechts {
  from {
    transform: translateX(100%);
  }
}
@keyframes oa-schublade-links {
  from {
    transform: translateX(-100%);
  }
}
.ort-schublade__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7e2;
}

.ort-schublade__titel {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ort-schublade__text {
  margin: 22px 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.ort-liste {
  list-style: none;
  margin: 0 -14px;
  padding: 0;
}

.ort-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1f2a26;
  font-size: 19px;
  text-align: left;
  cursor: pointer;
}

.ort-option:hover, .ort-option:focus-visible {
  background: #f5f3ee;
}

.ort-option__name {
  flex: 1;
}

.ort-option__zahl {
  font-size: 15px;
  color: #5b6560;
}

.ort-option__haken {
  width: 18px;
  height: 18px;
  flex: none;
  color: #2f6c5e;
  visibility: hidden;
}

.ort-option[aria-pressed=true] {
  color: #2f6c5e;
  font-weight: 600;
}

.ort-option[aria-pressed=true] .ort-option__haken {
  visibility: visible;
}

.ort-liste__ueber {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 14px 0;
  padding: 14px 30px 0 0;
  border-top: 1px solid #e4e7e2;
  color: #5b6560;
  font-size: 17px;
}

.ort-liste__ueber small {
  display: block;
  font-size: 15px;
}

/* ============================================================
   Fußzeile
   ============================================================ */
.fusszeile {
  background: #ffffff;
  padding: 88px 0 36px;
  border-top: 1px solid #e4e7e2;
}

.fusszeile__marke {
  text-align: center;
  padding-bottom: 56px;
  border-bottom: 1px solid #e4e7e2;
}

.fusszeile__marke .marke__bild {
  width: 44px;
  height: 44px;
}

.fusszeile__marke .t-marke {
  font-size: 52px;
}

.fusszeile__claim {
  margin: 14px 0 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #5b6560;
}

.fusszeile__spalten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid #e4e7e2;
}

.fusszeile h5 {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
  font-weight: 600;
}

.fusszeile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 17px;
}

.fusszeile ul a:hover {
  color: #2f6c5e;
}

.fusszeile__unten {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  font-size: 15px;
  color: #5b6560;
  flex-wrap: wrap;
}

/* Wortmarke: „aktuell" im Donau-Ton abgesetzt (Figtree, keine Kursive) */
.t-marke i {
  font-style: normal;
  color: #2f6c5e;
}

/* Mobiles Menü (Panel „menue", nur unter 1000px erreichbar): bildschirmfüllend, siehe _responsive */
.menue-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7e2;
}

.menue-kopf .marke__bild {
  width: 30px;
  height: 30px;
}

.menue-kopf .marke .t-marke {
  font-size: 28px;
}

.menue-nav {
  display: flex;
  flex-direction: column;
}

.menue-nav a {
  padding: 16px 0;
  border-bottom: 1px solid #e4e7e2;
  color: #1f2a26;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.menue-nav a[aria-current] {
  color: #2f6c5e;
}

.suche-form--menue {
  margin: 24px 0 8px;
}

.suche-form--menue input {
  font-size: 22px;
}

.suche-form--menue svg {
  width: 20px;
  height: 20px;
}

/* Ortswahl im Menü: Pille neben der Wortmarke, das X rückt nach rechts */
.menue-kopf__ort {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.menue-kopf__ort .ort-wert {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kontakt | Werben, darunter Login über die volle Breite – am unteren Rand des Menüs */
.menue-dienst {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 24px;
  font-size: 17px;
  color: #5b6560;
}

.menue-dienst .dienst-link {
  position: relative;
  justify-self: start;
  padding: 4px 0;
}

.menue-dienst .dienst-link:hover {
  color: #1f2a26;
}

.menue-dienst .dienst-link[aria-current] {
  color: #2f6c5e;
  font-weight: 600;
}

.menue-dienst .kopf-pille {
  grid-column: 1/-1;
  height: 44px;
  justify-content: center;
  font-size: 17px;
}

/* ============================================================
   Aktuelle Meldungen
   ============================================================ */
.abschnitt--seitenanfang {
  padding-top: 36px;
}

.meldungen-oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
}

.leitmeldung .bild {
  aspect-ratio: 16/10;
}

.leitmeldung__text {
  padding-top: 26px;
  max-width: 760px;
}

.leitmeldung .t-kicker {
  margin-bottom: 14px;
}

.leitmeldung p {
  margin-top: 18px;
  color: #5b6560;
}

.leitmeldung .t-meta {
  margin-top: 18px;
}

.leitmeldung--text > a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16/10;
  padding: 48px;
  background: #f5f3ee;
}

.leitmeldung--text .leitmeldung__text {
  padding-top: 0;
}

.leitmeldung--text .leitmeldung__text::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 24px;
  background: #c89b4a;
}

.seitenspalte {
  display: flex;
  flex-direction: column;
}

.seitenspalte__titel {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1f2a26;
}

.kurz {
  display: block;
  padding: 0 0 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #e4e7e2;
}

.kurz .bild {
  aspect-ratio: 16/9;
  margin-bottom: 14px;
}

.kurz .t-kicker {
  margin-bottom: 8px;
}

.kurz h3 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.kurz:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.karten-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid #e4e7e2;
}

.karte {
  display: block;
}

.karte .bild {
  margin-bottom: 18px;
}

.karte .t-kicker {
  margin-bottom: 10px;
}

.karte p {
  margin: 10px 0 0;
  color: #5b6560;
  font-size: 17px;
  line-height: 1.55;
}

.karte .t-meta {
  margin-top: 14px;
}

.melden-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 64px;
  padding: 32px 36px;
  background: #f5f3ee;
}

.melden-band h3 {
  margin: 0 0 4px;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.melden-band p {
  margin: 0;
  color: #5b6560;
  font-size: 17px;
}

.melden-band .melden-band__schluss {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: #1f2a26;
  font-size: 15px;
  line-height: 1.45;
}

.melden-band__schluss svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #b4532f;
}

.melden-band__schluss b {
  font-weight: 600;
}

/* ============================================================
   Ortskarte: echte Karte (Leaflet + selbst gehostete PMTiles-Datei), randlos über die volle
   Breite, Orte als Leiste darunter. Pins = Tropfen wie im Logo; Gruppen tragen eine Zahl.
   Leaflet-eigene Grundstile kommen aus css/karte-vendor.css (per Skript nachgeladen).
   ============================================================ */
/* isolation: Leaflet-Ebenen (z-index 400–1000) bleiben in der Karte und überdecken beim
   Scrollen weder Navigationszeile noch Panels */
.ortskarte {
  position: relative;
  width: 100%;
  aspect-ratio: 2/1;
  max-height: 700px;
  overflow: hidden;
  background: #eef1ea;
  isolation: isolate;
}

.ortskarte__leinwand {
  position: absolute;
  inset: 0;
  background: #eef1ea;
  font-family: "Figtree", system-ui, sans-serif;
}

.ortskarte .leaflet-tile-pane {
  transition: filter 0.25s ease;
}

/* Links und rechts läuft die Karte in den Hintergrund des Abschnitts aus (über den Kacheln, unter Pins und Knöpfen) */
.ortskarte {
  --karte-grund: #ffffff;
}

.abschnitt--kalk .ortskarte {
  --karte-grund: #f5f3ee;
}

.ortskarte::before, .ortskarte::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 350;
  width: clamp(32px, 8%, 160px);
  pointer-events: none;
}

.ortskarte::before {
  left: 0;
  background: linear-gradient(to right, var(--karte-grund), rgba(255, 255, 255, 0));
}

.ortskarte::after {
  right: 0;
  background: linear-gradient(to left, var(--karte-grund), rgba(255, 255, 255, 0));
}

.ortskarte--auswahl .leaflet-tile-pane {
  filter: brightness(0.82) saturate(0.6);
}

.oa .leaflet-container {
  font-family: "Figtree", system-ui, sans-serif;
  background: #eef1ea;
}

.oa .leaflet-container a {
  color: inherit;
}

.pin-icon {
  background: none;
  border: 0;
}

.pin {
  position: relative;
  display: block;
  width: 46px;
  height: 56px;
  cursor: pointer;
}

.pin__form {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(20, 30, 26, 0.25));
}

.pin__koerper {
  fill: #2f6c5e;
  stroke: #ffffff;
  stroke-width: 2.5;
}

.pin__kern {
  fill: #c89b4a;
}

.pin--termin .pin__koerper {
  fill: #b4532f;
}

.pin--baustelle .pin__koerper {
  fill: #1f2a26;
}

.pin__zahl {
  position: absolute;
  top: -8px;
  right: -14px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: #1f2a26;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.pin--baustelle .pin__zahl {
  background: #2f6c5e;
}

.pin-icon:hover .pin__form, .pin-icon:focus-visible .pin__form {
  transform: scale(1.12);
}

.pin-icon:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

/* Gewählter Pin: Ziegel mit weißem Kern, vergrößert, Bodenschatten */
.pin--aktiv .pin__koerper {
  fill: #b4532f;
}

.pin--aktiv .pin__kern {
  fill: #ffffff;
}

.pin--aktiv .pin__form {
  transform: scale(1.22);
}

.pin--aktiv::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 30px;
  height: 10px;
  margin-left: -15px;
  border-radius: 50%;
  background: rgba(180, 83, 47, 0.35);
}

.pin--aktiv .pin__zahl {
  background: #b4532f;
}

.karte-popover__inhalt .t-kicker {
  margin-bottom: 8px;
}

.karte-popover__inhalt h4 {
  margin: 0 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.oa .karte-popover__ort {
  margin: 0 0 6px;
  font-size: 15px;
  color: #5b6560;
}

.karte-popover__inhalt > .t-meta {
  margin-bottom: 14px;
}

.karte-popover__inhalt .mehr--text {
  font-size: 15px;
}

.karte-gruppe {
  list-style: none;
  margin: 0;
  padding: 0;
}

.karte-gruppe li + li {
  border-top: 1px solid #e4e7e2;
}

.karte-gruppe a {
  display: block;
  padding: 14px 0;
}

.karte-gruppe li:first-child a {
  padding-top: 0;
}

.karte-gruppe .t-kicker {
  margin-bottom: 4px;
}

.karte-gruppe__titel {
  display: block;
  margin-bottom: 4px;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}

/* Steuerung und Hinweise in der Karte */
.ortskarte .leaflet-bar {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
  overflow: hidden;
}

.ortskarte .leaflet-bar a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #1f2a26;
  border-bottom-color: #e4e7e2;
}

.ortskarte .leaflet-bar a:hover {
  background: #f5f3ee;
}

.ortskarte .leaflet-control-attribution {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.85);
  color: #5b6560;
}

.karte-alle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.karte-alle:hover {
  background: #1f2a26;
  color: #ffffff;
}

.karte-zur-liste {
  display: none;
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1000;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.karte-zur-liste svg {
  width: 16px;
  height: 16px;
}

.karte-hinweis {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 42, 38, 0.5);
  color: #ffffff;
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

/* Zeile unter der Karte: Orte als Pillen (springen auf der Karte zum Ort, Zahl = Kartenpunkte), daneben oder darunter die Legende.
   Bewusst knapp: die Ortswahl im Kopf filtert die Seite, diese Pillen bewegen nur die Karte. */
.karte-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 24px 0;
  border-bottom: 1px solid #e4e7e2;
}

.orte-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.orte-leiste li {
  list-style: none;
}

.orte-leiste button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.orte-leiste button:hover {
  border-color: #1f2a26;
}

.orte-leiste button:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

.orte-leiste button[aria-pressed=true] {
  background: #1f2a26;
  border-color: #1f2a26;
}

.ort__kopf {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ort__name {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.orte-leiste button[aria-pressed=true] .ort__name {
  color: #ffffff;
}

.ort__zahl {
  font-size: 14px;
  color: #5b6560;
}

.ort__zahl b {
  font-weight: 600;
}

.orte-leiste button[aria-pressed=true] .ort__zahl {
  color: #ffffff;
  opacity: 0.7;
}

.ort__wort {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ort__neu {
  display: none;
}

/* Legende und Liste der Beiträge im Kartenausschnitt */
.karte-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 40px;
  padding-top: 24px;
}

.karte-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: #5b6560;
}

.karte-legende li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.karte-liste__art {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2f6c5e;
}

.karte-liste__art--termin {
  background: #b4532f;
}

.karte-liste__art--baustelle {
  border-radius: 0;
  background: #1f2a26;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.karte-liste {
  flex: 1 1 100%;
  scroll-margin-top: 88px;
}

/* Aufklapper als umrandete Pille mit Listen-Symbol, Zahl und Pfeil, damit erkennbar ist, dass sich eine Liste öffnet */
.karte-liste summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 18px;
  border: 1px solid #1f2a26;
  border-radius: 999px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  transition: background 0.2s, color 0.2s;
}

.karte-liste summary::-webkit-details-marker {
  display: none;
}

.karte-liste summary:hover {
  background: #f5f3ee;
  color: #2f6c5e;
}

.karte-liste summary:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

.karte-liste__symbol {
  flex: none;
  width: 18px;
  height: 18px;
}

.karte-liste__zahl {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #2f6c5e;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.karte-liste summary .dreieck {
  flex: none;
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}

.karte-liste[open] summary {
  background: #1f2a26;
  color: #ffffff;
}

.karte-liste[open] summary .dreieck {
  transform: rotate(180deg);
}

.karte-liste ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0 12px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  border-top: 1px solid #1f2a26;
  max-height: min(480px, 60vh);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.karte-begrenzt {
  flex: 1 1 100%;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #5b6560;
}

.karte-begrenzt a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.karte-liste li {
  border-bottom: 1px solid #e4e7e2;
}

.karte-liste a {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 0;
}

.karte-liste a .karte-liste__art {
  margin-top: 5px;
}

.karte-liste__titel {
  display: block;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}

.karte-liste .t-meta {
  display: block;
  margin-top: 6px;
}

/* Beiträge zum Pin (js/oa-karte.js): Seitenleiste in der Karte ab 721 px, darunter Blatt von unten */
.karte-panel {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #1f2a26;
  box-shadow: 0 12px 40px rgba(20, 30, 26, 0.18);
}

.karte-panel__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 14px 24px;
  border-bottom: 1px solid #e4e7e2;
}

.karte-panel__titel {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6560;
}

.karte-panel__inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 28px;
}

.karte-panel h4 {
  font-size: 22px;
}

.karte-panel--leiste {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  width: min(380px, 55%);
  animation: oa-leiste-rein 0.25s ease-out;
}

@keyframes oa-leiste-rein {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}
.karte-panel--blatt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  max-height: 72vh;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 10px 10px 0 0;
  transition: transform 0.2s ease;
  animation: oa-blatt-rein 0.25s ease-out;
}

.karte-panel--blatt::before {
  content: "";
  flex: none;
  align-self: center;
  width: 40px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: #c5cbc6;
}

.karte-panel--blatt .karte-panel__kopf {
  padding: 8px 12px 12px 16px;
}

.karte-panel--blatt .karte-panel__inhalt {
  padding: 20px 16px 24px;
}

@keyframes oa-blatt-rein {
  from {
    transform: translateY(48px);
    opacity: 0;
  }
}
/* ============================================================
   Termine & Veranstaltungen
   ============================================================ */
.termine-raster {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.werbeplatz {
  position: sticky;
  top: 88px;
}

.werbeplatz__flaeche {
  width: 100%;
  aspect-ratio: 1/2;
  background: #dfe3dd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
}

.werbeplatz__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1f2a26;
}

.werbeplatz__format {
  font-size: 15px;
  color: #5b6560;
}

.werbeplatz__link {
  margin-top: 10px;
  font-size: 15px;
  color: #5b6560;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.werbeplatz__link:hover {
  color: #1f2a26;
}

.datum {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 12px 12px 10px;
  background: #ffffff;
  color: #b4532f;
  line-height: 1;
}

.datum b {
  font-family: "Fraunces", Georgia, serif;
  font-size: 36px;
  font-weight: 400;
}

.datum span {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
  color: #1f2a26;
}

.termin-karte {
  display: block;
}

.termin-karte .bild .datum {
  position: absolute;
  left: 0;
  bottom: 0;
}

.termin-karte .t-kicker {
  margin: 20px 0 10px;
}

.termin-karte__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
  font-size: 15px;
  color: #5b6560;
}

.termin-karte__meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.termin-karte__meta svg {
  width: 15px;
  height: 15px;
  color: #b4532f;
}

.termin-karte--gross {
  padding-bottom: 48px;
  border-bottom: 1px solid #e4e7e2;
}

.termin-karte--gross .bild {
  aspect-ratio: 21/9;
}

.termin-karte--gross .bild .datum {
  min-width: 96px;
  padding: 16px 14px 12px;
}

.termin-karte--gross .bild .datum b {
  font-size: 48px;
}

.termin-karte__unten {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.termin-karte--gross .t-kicker {
  margin-top: 26px;
}

.termin-karte--gross .termin-karte__info {
  padding-top: 26px;
}

.termin-karte--gross p {
  margin: 0;
  color: #5b6560;
}

.termin-karte--gross .termin-karte__meta {
  margin-top: 16px;
}

.termin-karte--gross .knopf {
  margin-top: 22px;
}

.termine-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 32px;
  padding-top: 48px;
}

/* ============================================================
   Amtliches & Stellenangebote
   ============================================================ */
.zwei-spalten {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 72px;
}

.spalten-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #1f2a26;
  padding-bottom: 14px;
}

.spalten-kopf h3 {
  margin: 0;
}

.amt-liste, .stellen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.amt-zeile {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 20px;
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid #c5cbc6;
}

.amt-zeile__datum {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
}

.amt-zeile__datum small {
  display: block;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5b6560;
  margin-top: 4px;
}

.amt-zeile__titel {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: block;
}

.amt-zeile__art {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  font-size: 15px;
  color: #5b6560;
}

.amt-zeile__art i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8a6d3b;
  display: inline-block;
}

.amt-zeile .pfeil {
  margin-top: 6px;
  color: #5b6560;
  transition: transform 0.2s, color 0.2s;
}

.amt-zeile:hover .pfeil {
  transform: translateX(4px);
  color: #2f6c5e;
}

.stelle {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid #c5cbc6;
}

.stelle__kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.stelle h4 {
  margin: 10px 0 4px;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
}

.stelle h4 small {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  color: #5b6560;
  font-weight: 400;
}

.stelle__firma {
  font-size: 15px;
  color: #5b6560;
}

.abschnitt--kalk .pille {
  background: #ffffff;
}

.amt-liste--zweispaltig {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  border-top: 1px solid #1f2a26;
}

/* Aus den Betrieben: Beiträge aus dem Abo der Betriebe (Kartenreihe), darunter die Stellen */
.betriebe-stellen {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid #e4e7e2;
}

.betriebe-stellen--allein {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.betriebe-stellen__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 24px;
}

.betriebe-stellen__titel {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
}

/* Stellenangebote: Kartenreihe */
.stellen-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.stelle-karte {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 24px 24px 20px;
  background: #f5f3ee;
  transition: background 0.25s;
}

.stelle-karte:hover {
  background: #e2ede9;
}

.stelle-karte .pille {
  background: #ffffff;
}

.stelle-karte h3 {
  margin: 16px 0 18px;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.stelle-karte h3 small {
  display: block;
  margin-top: 4px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  color: #5b6560;
}

.stelle-karte__fuss {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #c5cbc6;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  font-size: 15px;
  color: #5b6560;
}

.stelle-karte__fuss > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
}

.stelle-karte__fuss b {
  flex-basis: 100%;
  font-weight: 600;
  color: #1f2a26;
}

.stelle-karte__fuss svg:not(.pfeil) {
  width: 14px;
  height: 14px;
  color: #2f6c5e;
}

.stelle-karte__fuss .pfeil {
  color: #2f6c5e;
  transition: transform 0.2s;
}

.stelle-karte:hover .pfeil {
  transform: translateX(4px);
}

.stellen-hinweis {
  margin: 32px 0 0;
  font-size: 17px;
  color: #5b6560;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

/* Aus den Betrieben: Karten stehen direkt im Raster (der Block für js/oa-start.js ist nur Hülle). Der Kasten „Ihr Betrieb
   hier?“ füllt die Reihe nach der Zahl der Karten; bei vier Karten entfällt er und der Hinweis unter dem Abschnitt kommt. */
.betriebe-reihe__karten {
  display: contents;
}

.betriebe-reihe__karten.ist-leer > * {
  grid-column: 1/-1;
}

.betriebe-werbung {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  background: #f5f3ee;
}

.betriebe-reihe:has(.betriebe-reihe__karten > :nth-child(2)) .betriebe-werbung {
  grid-column: span 2;
}

.betriebe-reihe:has(.betriebe-reihe__karten > :nth-child(3)) .betriebe-werbung {
  grid-column: span 1;
  padding: 24px;
}

.betriebe-reihe:has(.betriebe-reihe__karten > :nth-child(4)) .betriebe-werbung {
  display: none;
}

.betriebe-reihe:has(.betriebe-reihe__karten.ist-leer) .betriebe-werbung {
  grid-column: 1/-1;
}

.betriebe-werbung p {
  margin: 0;
  max-width: 34em;
  color: #5b6560;
}

.betriebe-werbung .knopf {
  margin-top: 12px;
}

.betriebe-werbung__titel {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.betriebe-band:has(.betriebe-werbung) .stellen-hinweis {
  display: none;
}

.betriebe-band:has(.betriebe-reihe__karten > :nth-child(4)) .stellen-hinweis {
  display: flex;
}

/* ============================================================
   Vereine-Slider
   ============================================================ */
.slider-steuerung {
  display: flex;
  gap: 10px;
  align-items: center;
}

.rund {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid #c5cbc6;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.rund svg {
  width: 18px;
  height: 18px;
}

.abschnitt--wald .rund {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.abschnitt--wald .rund:hover:not(:disabled) {
  background: #ffffff;
  color: #1f3d36;
  border-color: #ffffff;
}

.rund:disabled {
  opacity: 0.3;
  cursor: default;
}

.vereine-spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 72px) / 4);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 0 8px;
}

.vereine-spur::-webkit-scrollbar {
  display: none;
}

.oa .verein {
  color: #1f2a26;
}

.verein {
  scroll-snap-align: start;
  background: #ffffff;
  padding: 30px 26px 24px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.14);
  transition: transform 0.3s ease;
}

.verein:hover {
  transform: translateY(-4px);
}

.verein__logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  background: #e2ede9;
  color: #2f6c5e;
  margin-bottom: 26px;
}

.verein .t-kicker {
  margin-bottom: 8px;
}

.verein h3 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.verein__fuss {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #e4e7e2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #5b6560;
}

.verein__fuss .pfeil {
  color: #2f6c5e;
  transition: transform 0.2s;
}

.verein:hover .verein__fuss .pfeil {
  transform: translateX(4px);
}

.slider-fortschritt {
  height: 1px;
  background: #c5cbc6;
  margin-top: 36px;
  position: relative;
}

.slider-fortschritt i {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  background: #1f2a26;
  width: 25%;
  transition: left 0.3s ease;
}

.abschnitt--wald .slider-fortschritt {
  background: rgba(255, 255, 255, 0.3);
}

.abschnitt--wald .slider-fortschritt i {
  background: #ffffff;
}

.vereine-slider--fest .slider-fortschritt, .vereine-slider--fest .slider-steuerung .rund {
  display: none;
}

/* Ergänzungen für echte Inhalte: Anzeigenmotiv, Bild-Platzhalter, Vereinslogo */
.werbeplatz__anzeige {
  display: block;
}

.werbeplatz__anzeige .werbeplatz__label {
  display: block;
  margin-bottom: 8px;
  color: #5b6560;
}

.werbeplatz__anzeige img {
  aspect-ratio: 1/2;
  height: auto;
}

.bild--leer {
  background: #e2ede9;
}

.termin-karte .bild--leer {
  min-height: 120px;
}

.termin-einladung {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 24px;
  color: #5b6560;
  font-size: 17px;
  line-height: 1.4;
}

.bild--termin {
  background: #e2ede9;
}

.bild--termin .datum {
  position: absolute;
  left: 0;
  bottom: 0;
}

.bild > .datum {
  position: absolute;
  left: 0;
  bottom: 0;
}

.leitmeldung .bild > .datum {
  min-width: 96px;
  padding: 16px 14px 12px;
}

.leitmeldung .bild > .datum b {
  font-size: 48px;
}

.kurz .bild:not(.bild--termin) > .datum {
  min-width: 60px;
  padding: 8px 8px 6px;
}

.kurz .bild:not(.bild--termin) > .datum b {
  font-size: 28px;
}

.leitmeldung .bild--termin .datum {
  min-width: 96px;
  padding: 16px 14px 12px;
}

.leitmeldung .bild--termin .datum b {
  font-size: 48px;
}

.leitmeldung .termin-einladung {
  padding: 48px 48px 0;
  font-size: 19px;
}

.leitmeldung .termin-einladung b {
  font-size: 26px;
}

.termin-einladung b {
  display: block;
  margin-bottom: 2px;
  text-wrap: balance;
  color: #2f6c5e;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.termin-karte--gross .bild--leer {
  aspect-ratio: auto;
  min-height: 0;
  background: none;
}

.termin-karte--gross .bild--leer .datum {
  position: static;
  background: #e2ede9;
}

.verein__logo--bild {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.verein__logo--bild img {
  object-fit: contain;
  padding: 10px;
}

/* Startseite nach Ort (js/oa-start.js): ohne Treffer steht im Abschnitt nur ein Hinweis statt des Rasters */
.stellen-raster.ist-leer, .amt-liste.ist-leer, .karten-reihe.ist-leer {
  display: block;
}

.amt-liste__leer {
  list-style: none;
  padding-top: 20px;
}

[data-block-termine].ist-leer .hinweiszeile, .stellen-raster.ist-leer .hinweiszeile, .karten-reihe.ist-leer .hinweiszeile {
  margin: 0;
}

@keyframes oa-einblenden {
  to {
    visibility: visible;
  }
}
[data-ort-gemerkt] .startseite:not([data-bereit]) :is([data-block-aktuelles], [data-block-reihe], [data-block-termine], [data-block-amt], [data-amt-sitzung], [data-block-betriebe], .vereine-spur),
[data-ort-gemerkt] .themen:not([data-bereit]) :is(.themen-inhalt, [data-unter], .themen-pille__zahl) {
  visibility: hidden;
  animation: oa-einblenden 0s 3s forwards !important;
}

/* „Aus den Betrieben“ mit wenigen Beiträgen: ab Desktop füllen ein oder zwei Karten die Reihe als Querbeitrag (Bild links,
   Text rechts), drei teilen sich die Breite – statt einer Viertelkarte vor leerem Raum */
@media (min-width: 1181px) {
  [data-block-betriebe]:has(> .karte:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-block-betriebe]:has(> .karte:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-block-betriebe]:has(> .karte:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-block-betriebe]:not(:has(> .karte:nth-child(3))) .karte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
  }
  [data-block-betriebe]:not(:has(> .karte:nth-child(3))) .karte .bild {
    margin-bottom: 0;
  }
  [data-block-betriebe]:has(> .karte:only-child) .karte {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  [data-block-betriebe]:has(> .karte:only-child) .karte .t-h3 {
    font-size: 26px;
  }
}
/* ============================================================
   Brotkrumen
   ============================================================ */
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: #5b6560;
}

.brotkrumen li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brotkrumen li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #c5cbc6;
  border-right: 1.5px solid #c5cbc6;
  transform: rotate(45deg);
}

.brotkrumen a {
  color: #5b6560;
  transition: color 0.2s;
}

.brotkrumen a:hover {
  color: #2f6c5e;
}

.brotkrumen [aria-current] {
  color: #1f2a26;
}

/* ============================================================
   Kartenreihe (4 · 2 · 1 Spalten), z. B. „Mehr von …“
   ============================================================ */
.karten-reihe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.karten-reihe .karte .bild {
  margin-bottom: 16px;
}

.karten-reihe .karte .t-h3 {
  font-size: 22px;
}

.karten-reihe .st__titel {
  font-size: 22px;
}

.karten-reihe--zeilen {
  row-gap: 48px;
}

/* ============================================================
   Absender-Kasten: wer hat das gemeldet, und wie geht es weiter
   ============================================================ */
.absender-kasten {
  padding: 24px;
  background: #f5f3ee;
}

.absender-kasten__kopf {
  display: flex;
  align-items: center;
  gap: 16px;
}

.absender-kasten__logo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 22px;
  font-weight: 600;
}

/* Symbol je Art (oa_symbol.inc) statt Kürzel in allen runden Feldern: gut halb so groß wie der Kreis */
:is(.absender-kasten__logo, .vk-logo, .verein__rund, .verein__logo, .verein__plakette, .neu-von__kuerzel) > .symbol {
  width: 52%;
  height: 52%;
}

.neu-von__kuerzel:has(> .symbol) {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.absender-kasten__logo--bild {
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.absender-kasten__logo--bild img {
  object-fit: contain;
  padding: 8px;
}

.absender-kasten__titel {
  display: block;
  margin-bottom: 4px;
}

.absender-kasten__name {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.absender-kasten__name a:hover {
  color: #2f6c5e;
}

.absender-kasten__art {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  color: #5b6560;
}

.absender-kasten__fakten {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #c5cbc6;
  display: grid;
  gap: 12px;
  font-size: 17px;
  line-height: 1.45;
}

.absender-kasten__fakten a:hover .u {
  background-size: 100% 1px;
}

.absender-kasten__fakten .t-kicker {
  margin-bottom: 2px;
}

.absender-kasten__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.absender-kasten__aktionen .mehr {
  background: #ffffff;
}

.absender-kasten__aktionen .mehr:hover {
  background: #1f2a26;
}

/* ============================================================
   Teilen-Knopf (Pille, Icon + Text)
   ============================================================ */
.teilen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.teilen svg {
  width: 16px;
  height: 16px;
}

.teilen:hover {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

/* Hinweiszeile über einer Liste (z. B. „Aus Sulzbach gibt es dazu nichts Neues“) */
.hinweiszeile {
  margin: 0 0 24px;
  padding: 12px 16px;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 17px;
}

/* Kennzeichnung bezahlter Beiträge (Feld IstAnzeige) im Kicker */
.anzeige-marke {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #5b6560;
  font-size: 0.9em;
  letter-spacing: 0.06em;
}

.beitrag {
  padding: 36px 0 104px;
}

.beitrag-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  align-items: start;
}

.beitrag-haupt {
  min-width: 0;
  container-type: inline-size;
}

.beitrag-haupt :is(.beitrag-text, .dokumente, .bewerbung-box) {
  margin-inline: auto;
}

.beitrag-haupt .beitrag-text .text-fotos {
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
}

.beitrag-haupt .beitrag-text img:not(.text-fotos img) {
  display: block;
  max-width: 100cqw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ---- Kopf ---- */
.beitrag-kopf {
  max-width: 880px;
}

.beitrag-kopf .t-kicker a:hover {
  color: #1f2a26;
}

.beitrag-kopf__titel {
  margin-top: 16px;
}

.beitrag-kopf__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
  padding: 14px 0;
  border-top: 1px solid #e4e7e2;
  border-bottom: 1px solid #e4e7e2;
}

.beitrag-kopf__meta .t-meta {
  font-size: 15px;
}

.beitrag-kopf__meta .t-meta a {
  color: #1f2a26;
  font-weight: 600;
}

.beitrag-kopf__meta .t-meta a:hover {
  color: #2f6c5e;
}

/* ---- Stellenangebot: Branche und Anstellungsart als Pillen unter dem Kopf ---- */
.stellen-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.stellen-fakten .pille {
  font-size: 15px;
  padding: 6px 14px;
}

/* ---- Termin: Titel, darunter der Terminblock wie ein Eintrag der Terminliste ---- */
.beitrag-kopf--termin .beitrag-kopf__titel {
  margin-top: 0;
}

.beitrag-kopf--termin .t-kicker + .beitrag-kopf__titel {
  margin-top: 16px;
}

.termin-info {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 16px;
  margin-top: 32px;
  padding: 32px 32px 24px 0;
  background: #f5f3ee;
}

.termin-info__datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #b4532f;
}

.termin-info__datum b {
  font-family: "Fraunces", Georgia, serif;
  font-size: 56px;
  font-weight: 350;
  line-height: 1;
}

.termin-info__datum span {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.termin-info__liste {
  display: grid;
  gap: 12px;
  margin: 0;
}

.termin-info__zeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.5;
}

.termin-info__zeile dt {
  flex: none;
  padding-top: 3px;
  color: #5b6560;
}

.termin-info__zeile dt svg {
  display: block;
  width: 18px;
  height: 18px;
}

.termin-info__zeile dd {
  margin: 0;
  min-width: 0;
}

.termin-info__zeile dd a {
  color: #1f2a26;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #c5cbc6;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.termin-info__zeile dd a:hover {
  color: #2f6c5e;
  text-decoration-color: currentColor;
}

.termin-info__zeile--wann dt {
  color: #b4532f;
  padding-top: 4px;
}

.termin-info__zeile--wann dd {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
}

.termin-info__zeit {
  display: block;
  margin-top: 2px;
  color: #b4532f;
  font-size: 19px;
}

.termin-info__knoepfe {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e4e7e2;
}

.termin-info__knoepfe .st__kalender {
  height: 40px;
  padding: 0 18px;
  font-size: 17px;
  font-weight: 500;
}

.termin-info__knoepfe .st__kalender svg {
  width: 16px;
  height: 16px;
}

.termin-info--abgesagt .termin-info__datum, .termin-info--abgesagt .termin-info__zeile--wann dd {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.6;
}

.termin-stand {
  margin: 12px 0 0;
  padding: 14px 18px;
  border-left: 4px solid #1f2a26;
  background: #f5f3ee;
  font-size: 17px;
  line-height: 1.5;
}

.termin-stand b {
  font-weight: 700;
}

.termin-stand--abgesagt {
  border-color: #a3221b;
  background: #a3221b;
  color: #ffffff;
}

/* ---- Bild und Galerie (Klick öffnet die Lightbox) ---- */
.beitrag-bild {
  margin: 32px 0 0;
}

.beitrag-bild .bild {
  aspect-ratio: 16/10;
}

.bild-knopf {
  display: block;
  cursor: zoom-in;
}

.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 40px;
}

.galerie .bild {
  aspect-ratio: 4/3;
}

/* Bildnachweis klein unten rechts im Foto */
.bildnachweis {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
  padding: 3px 8px;
  background: rgba(31, 42, 38, 0.55);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.galerie .bildnachweis {
  padding: 2px 6px;
  font-size: 10.5px;
}

.dokumente {
  max-width: 700px;
  margin-top: 40px;
}

.dokumente__titel {
  margin: 0 0 10px;
}

.termin-karte {
  max-width: 700px;
  margin: 40px auto 0;
}

.termin-karte__titel {
  margin: 0 0 10px;
}

.termin-karte__karte {
  aspect-ratio: 2/1;
  min-height: 220px;
  max-width: 100%;
}

.termin-karte__ort {
  margin: 10px 0 0;
}

@media print {
  .termin-karte {
    display: none;
  }
}
.ortsliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ortsliste[hidden] {
  display: none;
}

.ortsliste__ort {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e4e7e2;
}

.ortsliste__name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 19px;
  font-weight: 600;
  text-align: left;
  color: #1f2a26;
  cursor: pointer;
}

.ortsliste__nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #2f6c5e;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.ortsliste__ort--aktiv .ortsliste__nr {
  background: #b4532f;
}

.ortsliste__name:hover .u, .ortsliste__ort--aktiv .u {
  color: #2f6c5e;
}

.ortsliste__route {
  flex: none;
  font-size: 17px;
  font-weight: 600;
  color: #2f6c5e;
}

.karte-punkt .leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
}

.karte-punkt .leaflet-popup-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 16px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  color: #1f2a26;
}

.karte-punkt__name {
  font-weight: 700;
}

.karte-punkt .mehr--text {
  font-weight: 600;
  color: #2f6c5e;
}

.dokumente ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e4e7e2;
}

.dokumente__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e4e7e2;
  color: #1f2a26;
}

.dokumente__link svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: #2f6c5e;
}

.dokumente__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dokumente__art {
  flex: none;
  font-size: 15px;
  color: #2f6c5e;
}

.dokumente__link:hover .dokumente__name {
  color: #2f6c5e;
}

/* ---- Text aus dem Hub (HTML aus dem Editor) ---- */
.beitrag-text {
  max-width: 700px;
  margin-top: 40px;
  font-size: 19px;
  line-height: 1.7;
}

.beitrag-text > :first-child {
  margin-top: 0;
}

.beitrag-text p {
  margin: 0 0 1.1em;
}

.beitrag-text--initiale > p:first-child::first-letter {
  float: left;
  margin: 7px 12px 0 -2px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 5.6em;
  line-height: 0.78;
  font-weight: 400;
  color: #2f6c5e;
}

.beitrag-text h2 {
  margin: 1.6em 0 0.5em;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.beitrag-text h3 {
  margin: 1.5em 0 0.45em;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.beitrag-text h4 {
  margin: 1.4em 0 0.4em;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.beitrag-text ul, .beitrag-text ol {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

.beitrag-text li {
  margin-bottom: 0.35em;
}

.beitrag-text a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.beitrag-text a:hover {
  color: #1f2a26;
}

.beitrag-text hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid #c5cbc6;
}

/* Hervorgehobene Absätze aus dem Meldeportal: farbiger Kasten, aufeinanderfolgende bilden einen */
.beitrag-text .hervorhebung {
  margin: 0;
  padding: 0 24px 0.9em;
  background: #f5f3ee;
}

.beitrag-text :not(.hervorhebung) + .hervorhebung {
  margin-top: 1.4em;
  padding-top: 20px;
}

.beitrag-text .hervorhebung:not(:has(+ .hervorhebung)) {
  margin-bottom: 1.4em;
  padding-bottom: 20px;
}

.beitrag-text > .hervorhebung:first-child {
  padding-top: 20px;
}

.beitrag-text ul.hervorhebung, .beitrag-text ol.hervorhebung {
  padding-left: calc(24px + 1.3em);
}

.beitrag-text blockquote {
  margin: 1.4em 0;
  padding-left: 20px;
  border-left: 3px solid #3a8a78;
  font-size: 22px;
}

.beitrag-text img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 1.2em 0;
}

.beitrag-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1em;
  font-size: 17px;
}

@media (max-width: 720px) {
  .beitrag-text table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.beitrag-text th, .beitrag-text td {
  padding: 8px 10px;
  border-bottom: 1px solid #e4e7e2;
  text-align: left;
  vertical-align: top;
}

/* ---- Bewerbungskontakt bei Stellenangeboten ---- */
.bewerbung-box {
  max-width: 700px;
  margin-top: 40px;
  padding: 24px 26px;
  background: #f5f3ee;
}

.bewerbung-box .t-kicker {
  margin-bottom: 10px;
}

.bewerbung-box p {
  margin: 0 0 0.5em;
}

.bewerbung-box p:last-child {
  margin-bottom: 0;
}

.bewerbung-box a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Fuß des Beitrags: Teilen ---- */
.beitrag-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid #e4e7e2;
}

.beitrag-fuss p {
  margin: 0 auto 0 0;
  color: #5b6560;
  font-size: 17px;
}

.beitrag-fuss__melden {
  margin-left: auto;
  color: #5b6560;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.beitrag-fuss__melden:hover {
  color: #1f2a26;
}

/* ---- Seitenspalte: Absender-Kasten und Werbeplatz ---- */
.beitrag-seite {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 40px;
}

.beitrag-seite .werbeplatz__anzeige img, .werbeplatz--mobil img {
  aspect-ratio: auto;
  height: auto;
}

.werbeplatz--mobil {
  display: none;
}

/* ---- Abschnitte unter dem Beitrag ---- */
.abschnitt--linie {
  border-top: 1px solid #e4e7e2;
}

.abschnitt--weiter + .abschnitt--weiter {
  border-top-color: #3a8a78;
}

.abschnitt--weiter .melden-band {
  background: #ffffff;
}

.abschnitt--weiter .melden-band:first-child {
  margin-top: 0;
}

.abschnitt--weiter .melden-band--zeile {
  background: #1f3d36;
}

.abschnitt--weiter :is(.staffel__karten, .staffel__texte, .staffel__titel-liste, .staffel__texte--2, .kalender-liste, .karten-reihe) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
}

.abschnitt--weiter .staffel__texte--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.abschnitt--weiter .karten-reihe {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.abschnitt--weiter .karten-reihe--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.abschnitt--weiter .karten-reihe--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.abschnitt--weiter .karten-reihe--eins {
  grid-template-columns: minmax(0, 1fr);
}

.abschnitt--weiter .karten-reihe + :is(.karten-reihe, .kalender-raster) {
  margin-top: 32px;
}

.abschnitt--weiter .staffel__stufe > :not(.staffel__titel) + * {
  margin-top: 32px;
  padding-top: 0;
  border-top: 0;
}

.abschnitt--weiter :is(.staffel__karten, .staffel__texte, .staffel__titel-liste, .staffel__texte--2, .karten-reihe) > .st:nth-child(n),
.abschnitt--weiter .st--quer,
.abschnitt--weiter .kalender-eintrag {
  padding: 0;
  border: 0;
  background: #ffffff;
}

.abschnitt--weiter .st .st__bild {
  margin: 0;
}

.abschnitt--weiter .st__text {
  padding: 20px 24px 16px;
}

.abschnitt--weiter .st--quer {
  gap: 0;
}

.abschnitt--weiter .st--quer .st__text {
  padding: 24px 32px 16px;
}

.abschnitt--weiter .st--quer.st--ohne-bild .st__text {
  max-width: none;
}

.abschnitt--weiter .st--titel {
  gap: 0;
}

.abschnitt--weiter .st--titel .st__text {
  padding: 16px;
}

.abschnitt--weiter .kalender-raster {
  overflow: visible;
}

.abschnitt--weiter .kalender-eintrag {
  padding: 24px 24px 16px;
}

.abschnitt--weiter .kalender-eintrag .st__text {
  padding: 0;
}

.abschnitt--weiter :is(.st--karte, .st--text).st--termin .st__datum {
  padding: 20px 0 0 24px;
}

.abschnitt--weiter :is(.st--karte, .st--text).st--termin .st__text {
  padding-left: 0;
}

@media (max-width: 1180px) {
  .abschnitt--weiter :is(.staffel__karten, .staffel__texte, .staffel__titel-liste, .kalender-liste, .karten-reihe) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .abschnitt--weiter .karten-reihe--eins {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .abschnitt--weiter :is(.staffel__karten, .staffel__texte, .staffel__titel-liste, .staffel__texte--2, .kalender-liste, .karten-reihe) {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .abschnitt--weiter .staffel__stufe > :not(.staffel__titel) + * {
    margin-top: 16px;
  }
  .abschnitt--weiter .st__text, .abschnitt--weiter .st--quer .st__text {
    padding: 16px;
  }
  .abschnitt--weiter .st--text:not(.st--termin) .st__text {
    padding-left: 16px;
  }
  .abschnitt--weiter .kalender-eintrag {
    padding: 20px 16px 12px;
  }
}
/* ---- Beitrag nicht gefunden ---- */
.beitrag-leer {
  max-width: 700px;
  padding: 40px 0;
}

.beitrag-leer p {
  color: #5b6560;
}

/* ============================================================
   Lightbox (js/oa-beitrag.js): Bild groß, Pfeile, Zähler
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(31, 42, 38, 0.94);
  color: #ffffff;
  animation: oa-schleier-rein 0.2s ease-out;
}

.lightbox__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 14px 24px;
  font-size: 17px;
}

.lightbox__buehne {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr)/minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: 0 80px 32px;
}

.oa .lightbox__buehne img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox__pfeil {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.lightbox__pfeil:hover {
  background: #ffffff;
  color: #1f2a26;
}

.lightbox .zu-knopf {
  background: #1f2a26;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.lightbox .zu-knopf:hover {
  background: #ffffff;
  color: #1f2a26;
}

.lightbox__pfeil svg {
  width: 18px;
  height: 18px;
}

.lightbox__pfeil--zurueck {
  left: 16px;
}

.lightbox__pfeil--vor {
  right: 16px;
}

.abschnitt--linie .melden-band:first-child {
  margin-top: 0;
}

/* Fotos im Text (oa_text_fotos.inc): eigene Zeile über die Lesespalte, höchstens drei nebeneinander; bleibt in der letzten
   Reihe ein Foto, nimmt es die ganze Breite, bleiben zwei, teilen sie sich die Breite. Ein einzelnes Foto im eigenen Format. */
.text-fotos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 1.6em 0;
}
.text-fotos > .text-fotos__foto {
  grid-column: span 2;
}
.text-fotos .bild {
  display: block;
  aspect-ratio: 4/3;
}
.text-fotos .bildnachweis {
  padding: 2px 6px;
  font-size: 10.5px;
}

.beitrag-text .text-fotos img, .text-fotos img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.text-fotos--rest2 > .text-fotos__foto:nth-last-child(-n+2) {
  grid-column: span 3;
}
.text-fotos--rest2 > .text-fotos__foto:nth-last-child(-n+2) .bild {
  aspect-ratio: 3/2;
}

.text-fotos--rest1 > .text-fotos__foto:last-child {
  grid-column: 1/-1;
}
.text-fotos--rest1 > .text-fotos__foto:last-child .bild {
  aspect-ratio: 16/9;
}

.text-fotos--1 > .text-fotos__foto:last-child .bild {
  aspect-ratio: auto;
}

.beitrag-text .text-fotos--1 img, .text-fotos--1 img {
  height: auto;
  max-height: 80vh;
}

.themen-kopf-bereich {
  padding: 36px 0 0;
}

.themen-kopf-bereich .brotkrumen {
  margin-bottom: 28px;
}

.themen-kopf .t-kicker {
  margin-bottom: 10px;
}

.themen-kopf::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  background: #c89b4a;
  grid-column: 1/-1;
  grid-row: 1;
}

.themen-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: end;
}

.themen-kopf > * {
  grid-column: 1;
}

.themen-kopf > .themen-kopf__filter {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
}

.themen-inhalt {
  padding-top: 64px;
}

/* ---- Themen- und Rubrik-Pillen: eine Zeile, am Handy wischbar ---- */
.themen-leiste {
  display: flex;
  gap: 10px;
  margin: 32px 0 0;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.themen-leiste::-webkit-scrollbar {
  display: none;
}

.themen-leiste.wisch--rechts {
  mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
}

.themen-leiste.wisch--links {
  mask-image: linear-gradient(to right, transparent, black 56px);
}

.themen-leiste.wisch--links.wisch--rechts {
  mask-image: linear-gradient(to right, transparent, black 56px, black calc(100% - 56px), transparent);
}

@media (max-width: 720px) {
  .themen-leiste.wisch--stupser > * {
    animation: oa-stupser 1s cubic-bezier(0.3, 0.7, 0.3, 1);
  }
}
.wisch-rahmen {
  position: relative;
}

.wisch-pfeil {
  position: absolute;
  bottom: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  cursor: pointer;
  transition: border-color 0.2s;
}

.wisch-pfeil:hover {
  border-color: #1f2a26;
}

.wisch-pfeil svg {
  width: 12px;
  height: 12px;
}

.wisch-pfeil--links {
  left: 0;
}

.wisch-pfeil--rechts {
  right: 0;
}

.wisch-rahmen--klein .wisch-pfeil {
  bottom: 3px;
}

.wisch-pfeil[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .wisch-pfeil {
    display: none;
  }
}
@keyframes oa-stupser {
  0%, 100% {
    transform: none;
  }
  35% {
    transform: translateX(-56px);
  }
  65% {
    transform: translateX(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .themen-leiste.wisch--stupser > * {
    animation: none;
  }
}
.themen-leiste--rubriken {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4e7e2;
}

.themen-pille {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  color: #1f2a26;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.themen-pille:hover {
  border-color: #1f2a26;
}

.themen-pille[aria-current] {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.themen-pille__zahl {
  font-size: 14px;
  font-weight: 600;
  color: #5b6560;
}

.themen-pille[aria-current] .themen-pille__zahl {
  color: #ffffff;
  opacity: 0.7;
}

.themen-pille.ist-laedt {
  cursor: progress;
}

.themen-pille.ist-laedt .themen-pille__zahl {
  display: none;
}

.themen-pille.ist-laedt::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: oa-kreisel 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .themen-pille.ist-laedt::after {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }
}
.themen-leiste--rubriken .themen-pille {
  height: 34px;
  padding: 0 14px;
  font-size: 15px;
}

.themen-leiste--rubriken .themen-pille[aria-current] {
  background: #e2ede9;
  border-color: #e2ede9;
  color: #2f6c5e;
}

.themen-leiste__titel {
  flex: none;
  align-self: center;
  margin-right: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.themen-leer .hinweiszeile {
  margin-bottom: 20px;
}

/* ---- Chronologische Liste: Bild links, Text rechts ---- */
.eintrag-bereich {
  margin-top: 72px;
}

.eintrag-bereich__titel {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #3a8a78;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.eintrag {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid #e4e7e2;
}

.eintrag--ohne-bild {
  grid-template-columns: minmax(0, 1fr);
}

.eintrag__text .t-kicker {
  margin-bottom: 8px;
}

.eintrag__titel {
  margin: 0 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.eintrag__text p {
  margin: 0 0 10px;
  max-width: 700px;
  color: #5b6560;
  font-size: 17px;
  line-height: 1.55;
}

.eintrag:focus-visible {
  outline-offset: 4px;
}

.liste-mehr {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

.liste-mehr .mehr[disabled] {
  opacity: 0.5;
  cursor: progress;
}

/* Thema ohne Beiträge (im gewählten Ort): bleibt erreichbar, tritt aber zurück */
.themen-pille--leer:not([aria-current]) {
  display: none;
}

.themen-hinweis {
  margin: 16px 0 0;
  font-size: 15px;
  color: #5b6560;
}

.themen-hinweis a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.seitenspalte--sitzungen .termin-zeile {
  padding: 0 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e4e7e2;
}

.seitenspalte__mehr {
  align-self: flex-start;
  justify-self: start;
  grid-column: 1/-1;
  margin-top: 4px;
}

.absender-kopf-bereich {
  padding: 36px 0 56px;
}

.absender-kopf-bereich .brotkrumen {
  margin-bottom: 36px;
}

.absender-kopf {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}

.absender-info {
  margin: 40px 0 0 168px;
}

.absender-kopf__logo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 36px;
  font-weight: 600;
}

.absender-kopf__logo--bild {
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.absender-kopf__logo--bild img {
  object-fit: contain;
  padding: 14px;
}

.absender-kopf__text .t-kicker {
  margin-bottom: 10px;
}

.absender-kopf__art {
  margin: 10px 0 0;
  color: #5b6560;
  font-size: 19px;
}

.absender-kopf__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
  color: #5b6560;
}

.absender-kopf__zahlen b {
  color: #1f2a26;
  font-weight: 600;
}

.absender-kopf__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.absender-kontakt {
  padding: 24px;
  background: #f5f3ee;
  font-size: 17px;
  line-height: 1.5;
}

/* Standortkarte oben im Kontakt-Kasten (Betriebe mit Ortsaktiv/Paket): randlos über die Kastenbreite */
.standortkarte {
  position: relative;
  margin: -24px -24px 0;
  aspect-ratio: 4/3;
  background: #eef1ea;
  overflow: hidden;
  isolation: isolate;
}

.standortkarte__leinwand {
  position: absolute;
  inset: 0;
}

.standortkarte .leaflet-bar {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
  overflow: hidden;
}

.standortkarte .leaflet-bar a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  color: #1f2a26;
  border-bottom-color: #e4e7e2;
}

.standortkarte .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.85);
  color: #5b6560;
}

.standortkarte__route {
  margin: 12px 0 20px;
  font-size: 17px;
  font-weight: 600;
}

.absender-kontakt__titel {
  margin: 0 0 14px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.absender-kontakt dl {
  margin: 0;
  display: grid;
  gap: 12px;
}

.absender-kontakt dt {
  font-size: 15px;
  color: #5b6560;
}

.absender-kontakt dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.absender-kontakt__adresse {
  white-space: pre-line;
}

.absender-kontakt a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.absender-kontakt a:hover {
  color: #1f2a26;
}

/* Nicht-Vereine: dieselben Karten auf Kalk statt auf Wald */
.abschnitt--kalk .verein {
  box-shadow: none;
}

/* ============================================================
   Terminliste: Datum groß in Ziegel, Titel, Zeit und Ort
   ============================================================ */
.termin-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  border-top: 1px solid #1f2a26;
}

.termin-liste li {
  border-bottom: 1px solid #e4e7e2;
}

.termin-zeile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px 0;
}

.termin-zeile__datum {
  color: #b4532f;
  text-align: center;
}

.termin-zeile__datum b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 38px;
  font-weight: 350;
  line-height: 1;
}

.termin-zeile__datum span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.termin-zeile__text .t-kicker {
  margin-bottom: 6px;
}

.termin-zeile__titel {
  display: block;
  margin-bottom: 4px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.termine-oben {
  padding-top: 64px;
}

.termine-oben .wrap:empty {
  display: none;
}

.termine-verzeichnis {
  padding-top: 64px;
}

.termin-gruppe {
  margin-bottom: 56px;
}

.termin-gruppe:last-child {
  margin-bottom: 0;
}

.termin-gruppe__titel {
  position: sticky;
  top: 76px;
  z-index: 2;
  margin: 0;
  padding: 12px 0;
  background: #ffffff;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.termin-gruppe__zahl {
  display: inline-block;
  margin-left: 12px;
  padding: 1px 9px;
  border-radius: 999px;
  background: #f5f3ee;
  color: #5b6560;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 3px;
}

.termin-gruppe__zahl:empty {
  display: none;
}

/* Amtliches-Seite: Sitzungsblock und Monatsgruppen */
.amtliches-sitzungen {
  padding: 40px 0 0;
}

.amtliches-verzeichnis {
  padding-top: 48px;
}

/* Merkmale (Gastro-Angebot und Unternehmensmerkmale) unter der Bezeichnung */
.absender-kopf__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* Profilbild (16:9) und bis zu 5 Fotos darunter, über den Zahlen „Beiträge in 12 Monaten“ */
.absender-bilder {
  margin-top: 24px;
}

.absender-bilder__haupt .bild {
  aspect-ratio: 16/9;
}

.absender-bilder__reihe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.absender-bilder__reihe .bild {
  aspect-ratio: 1;
}

.absender-bilder .bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.absender-bilder .bild-knopf {
  overflow: hidden;
}

.absender-bilder .bild-knopf:hover img {
  transform: scale(1.03);
}

/* Öffnungszeiten: Text oder eingefügtes HTML (z. B. Tabelle) – fremde Schrift, Farbe und Abstände neutralisieren */
.absender-kontakt__zeiten, .absender-kontakt__zeiten * {
  font: inherit !important;
  color: inherit !important;
  background: none !important;
  letter-spacing: normal !important;
}

.absender-kontakt__zeiten p, .absender-kontakt__zeiten div {
  margin: 0 !important;
}

.absender-kontakt__zeiten table {
  margin: 0 !important;
  border-collapse: collapse;
}

.absender-kontakt__zeiten td, .absender-kontakt__zeiten th {
  padding: 1px 14px 1px 0 !important;
  text-align: left;
  vertical-align: top;
}

/* Gründungspartner: Marke unter dem Namen auf dem Profil */
.gruender-marke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.gruender-marke::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a8a78;
}

.vk-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26 !important;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.vk-knopf svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.vk-knopf:hover {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff !important;
}

.vk-knopf--haupt {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff !important;
}

.vk-knopf--haupt:hover {
  opacity: 0.85;
}

.vk-knopf--rund {
  width: 46px;
  padding: 0;
  justify-content: center;
}

.visitenkarte-bereich {
  padding: 28px 0 64px;
}

.visitenkarte-bereich .brotkrumen {
  margin-bottom: 0;
}

.vk-oben {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.visitenkarte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: stretch;
}

.visitenkarte--mit-karte {
  gap: 40px 48px;
}

.visitenkarte--mit-karte .vk-text {
  grid-column: 1/-1;
}

.vk-teilen {
  flex: none;
  display: flex;
  gap: 10px;
}

.vk-name {
  display: flex;
  align-items: center;
  gap: 24px;
}

.vk-logo {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 26px;
  font-weight: 600;
}

.vk-logo--bild {
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.vk-logo--bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.vk-name .t-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.vk-name .t-h1 {
  margin: 0;
}

.vk-art {
  margin: 8px 0 0;
  font-size: 19px;
  color: #5b6560;
}

.vk-gruender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.vk-gruender::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a8a78;
}

.vk-stellen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.vk-stellen svg {
  width: 16px;
  height: 16px;
}

.vk-stellen:hover {
  background: #2f6c5e;
  color: #ffffff;
}

.vk-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.vk-kontakt {
  padding-top: 12px;
  border-top: 1px solid #1f2a26;
}

.vk-kontakt__titel {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.vk-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vk-liste li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e4e7e2;
  font-size: 17px;
  line-height: 1.5;
}

.vk-liste svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #2f6c5e;
}

.vk-liste a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.vk-liste a:hover {
  color: #1f2a26;
}

.vk-adresse {
  white-space: pre-line;
}

.vk-zeiten, .vk-zeiten * {
  font: inherit !important;
  color: inherit !important;
  background: none !important;
  letter-spacing: normal !important;
}

.vk-zeiten p, .vk-zeiten div {
  margin: 0 !important;
}

.vk-zeiten table {
  margin: 0 !important;
  border-collapse: collapse;
}

.vk-zeiten td, .vk-zeiten th {
  padding: 1px 14px 1px 0 !important;
  text-align: left;
  vertical-align: top;
}

.vk-nebenlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-top: 2px;
  font-size: 17px;
}

.vk-karte {
  position: relative;
  min-height: 260px;
  background: #eef1ea;
  overflow: hidden;
  isolation: isolate;
}

.vk-karte .standortkarte {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
}

.vk-karte .leaflet-control-zoom {
  display: none;
}

.vk-karte__route {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
}

.vk-karte__route svg {
  width: 15px;
  height: 15px;
}

.profil-galerie {
  padding-bottom: 72px;
}

.fotowand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.fotowand--1 {
  grid-template-columns: minmax(0, 1fr);
}

.fotowand__bild {
  position: relative;
  display: block;
  overflow: hidden;
  background: #dfe3dd;
  aspect-ratio: 4/3;
}

.fotowand__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.fotowand__bild:hover img {
  transform: scale(1.04);
}

.fotowand--1 .fotowand__bild {
  max-width: calc(560px * 4 / 3);
}

.fotowand__vorschau {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  align-items: start;
}

.fotowand__bild--versteckt {
  display: none;
}

.fotowand__mehr {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(31, 42, 38, 0.5);
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
}

.profil-kicker {
  display: block;
  margin-bottom: 10px;
}

.profil-ueber-bereich {
  padding-bottom: 72px;
}

.profil-ueber {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.profil-ueber--nur-text {
  grid-template-columns: minmax(0, 700px);
}

.profil-ueber__text .beitrag-text {
  margin-top: 0;
}

.profil-ueber__text .beitrag-text > :first-child {
  margin-top: 0;
}

.profil-ueber__text .beitrag-text.ist-gekuerzt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.profil-ueber__text .beitrag-text.ist-gekuerzt > * {
  display: inline;
}

.profil-ueber__text .beitrag-text.ist-gekuerzt > * + *::before {
  content: " ";
}

.profil-ueber__weiter {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #2f6c5e;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profil-ueber__merkmale {
  padding-top: 12px;
  border-top: 1px solid #1f2a26;
}

.profil-ueber__titel {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.profil-ueber__merkmale ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profil-ueber__merkmale li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #e4e7e2;
  font-size: 17px;
}

.profil-ueber__merkmale svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: #2f6c5e;
}

.profil-stellen {
  scroll-margin-top: 140px;
}

.profil-stellen__raster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profil-aktuell .karten-3 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.profil-aktuell .termin-liste + * {
  margin-top: 64px;
}

.profilleiste {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 29;
  background: #ffffff;
  border-bottom: 1px solid #e4e7e2;
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

@media (min-width: 1181px) {
  .profilleiste {
    left: max(48px, (100% - 1536px) / 2);
    right: max(48px, (100% - 1536px) / 2);
  }
}
.profilleiste.ist-sichtbar {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease;
}

.profilleiste__innen {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
}

.profilleiste .vk-logo {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

.profilleiste .vk-logo--bild img {
  padding: 4px;
}

.profilleiste__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  color: #5b6560;
}

.profilleiste__name b {
  color: #1f2a26;
  font-weight: 600;
}

.profilleiste__aktionen {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.profilleiste .vk-knopf {
  height: 40px;
  padding: 0 18px;
  font-size: 15px;
}

.handy-leiste {
  display: none;
}

@media (max-width: 1180px) and (min-width: 721px) {
  .profil-stellen__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  .visitenkarte {
    gap: 32px 40px;
  }
  .profil-ueber, .profil-ueber--nur-text {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .profil-ueber-bereich {
    padding-bottom: 48px;
  }
}
@media (max-width: 720px) {
  .visitenkarte-bereich {
    padding: 16px 0 40px;
  }
  .vk-oben {
    margin-bottom: 20px;
  }
  .visitenkarte, .visitenkarte--mit-karte {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .vk-name {
    gap: 16px;
    align-items: flex-start;
  }
  .vk-logo {
    width: 64px;
    height: 64px;
    font-size: 22px;
  }
  .vk-teilen, .vk-aktionen, .visitenkarte .vk-karte, .profilleiste {
    display: none !important;
  }
  .fotowand--1 .fotowand__bild {
    max-width: none;
  }
  .vk-kontakt {
    margin-top: 24px;
  }
  .profil-galerie {
    padding-bottom: 48px;
  }
  .fotowand {
    gap: 6px;
  }
  .fotowand__vorschau {
    gap: 6px;
    margin-top: 6px;
  }
  .profil-stellen__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .handy-leiste {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #e4e7e2;
  }
  .handy-leiste .vk-knopf {
    flex: 1 1 0;
    justify-content: center;
  }
  .handy-leiste .vk-knopf--rund {
    flex: none;
  }
  body:has(.handy-leiste) .fusszeile {
    padding-bottom: 96px;
  }
}
.vereine-az {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 20px;
}

.vereine-az a {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #1f2a26;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.vereine-az a:hover {
  background: #1f2a26;
  color: #ffffff;
}

.vereine-verzeichnis {
  padding-top: 56px;
}

.vereine-verzeichnis .hinweiszeile {
  margin-bottom: 0;
}

.vereine-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.vereine-raster .verein {
  scroll-margin-top: 88px;
}

.vereine-raster .verein {
  min-height: 260px;
}

/* Kopfbild (Profilbild, 3:2) über die volle Kartenbreite; Logo bzw. Kürzel sitzt als Plakette halb auf der Bildkante.
   Nur im Verzeichnisraster – im Slider (Startseite, Absenderseite) bleibt die Karte ohne Foto. */
.verein__foto {
  display: none;
}

.vereine-raster .verein__foto {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
  margin: -30px -26px 0;
  background: #dfe3dd;
}

.vereine-raster .verein__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.vereine-raster .verein--foto:hover .verein__foto img {
  transform: scale(1.04);
}

.vereine-raster .verein--foto .verein__logo {
  position: relative;
  width: 64px;
  height: 64px;
  margin: calc(64px / -2) 0 18px;
  border: 3px solid #ffffff;
  font-size: 22px;
}

.vereine-raster .verein--foto .verein__logo--bild img {
  padding: 6px;
}

/* Verzeichnisse als Zeilen (.vereine-raster--zeilen, oa_verein.inc mit v_zeile): zwei Spalten, Linien statt Flächen.
   Buchstaben-Köpfe legt js/oa-vereine.js an; die A–Z-Leiste klebt unter der Navigation und gleitet in Ruhe weg. */
.vereine-az--klebt {
  position: sticky;
  top: 76px;
  z-index: 5;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 10px 0;
  background: #ffffff;
  border-bottom: 1px solid #e4e7e2;
  overflow-x: auto;
  scrollbar-width: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.vereine-az--klebt::-webkit-scrollbar {
  display: none;
}

.vereine-az--klebt a {
  flex: none;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
}

.vereine-az--klebt a[aria-current] {
  background: #1f2a26;
  color: #ffffff;
}

.vereine-az--weg {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.vereine-verzeichnis--zeilen .hinweiszeile {
  margin-top: 24px;
}

.vereine-raster.vereine-raster--zeilen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 0;
}

.verzeichnis-buchstabe {
  grid-column: 1/-1;
  margin: 24px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #3a8a78;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  scroll-margin-top: 129px;
}

.vereine-raster--zeilen .verein.verein--zeile {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 14px 4px;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid #e4e7e2;
  transform: none;
}

.verein__bild {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
}

.verein__rund {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e2ede9;
  color: #2f6c5e;
  font-weight: 600;
  font-size: 17px;
  transition: transform 0.3s ease;
}

.verein__rund img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.verein__rund--logo {
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.verein__rund--logo img {
  object-fit: contain;
  padding: 6px;
}

.verein__marke {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #e4e7e2;
}

.verein__marke img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.verein--zeile:hover .verein__rund {
  transform: scale(1.06);
}

.verein__text {
  flex: 1;
  min-width: 0;
}

.verein--zeile .t-kicker {
  margin-bottom: 3px;
}

.verein--zeile h3 {
  font-size: 19px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.verein--zeile:hover h3 {
  color: #2f6c5e;
}

.verein__link {
  color: inherit;
  text-decoration: none;
}

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

.verein__infos {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  color: #5b6560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verein__infos > :not([hidden]) ~ :not([hidden])::before {
  content: "·";
  margin: 0 6px;
  color: #5b6560;
  font-weight: 400;
}

.verein__status {
  font-weight: 600;
}

.verein__status--offen {
  color: #2f6c5e;
}

.verein__status--bald {
  color: #b4532f;
}

.verein__status--zu {
  font-weight: 500;
}

.verein__naechster {
  color: #1f2a26;
}

.verein__naechster svg {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
  color: #b4532f;
}

.verein__naechster time {
  font-weight: 600;
  color: #b4532f;
}

.verein__rechts {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.verein__knoepfe {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verein__tel {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  color: #2f6c5e;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.verein__tel svg {
  width: 17px;
  height: 17px;
}

.verein__tel:hover {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.verein--zeile .verein__knoepfe .pfeil {
  flex: none;
  color: #2f6c5e;
  transition: transform 0.2s;
}

.verein--zeile:hover .verein__knoepfe .pfeil {
  transform: translateX(4px);
}

.verein__gepflegt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 500;
  color: #5b6560;
  white-space: nowrap;
}

.verein__gepflegt svg {
  width: 13px;
  height: 13px;
  color: #3a8a78;
}

/* Darstellung „Kacheln“ (.vereine-raster--kacheln, Umschalter oa_darstellung.inc): dieselben Einträge als gleich hohe
   Karten auf Kalk. Plakette (Logo/Kürzel) oben links, „Profil gepflegt“ als Haken an der Plakette; mit Profilbild ein
   Knopf oben rechts, der das Bild als Kreis aus der Ecke über die Kachel öffnet (.verein--offen). */
.darstellung-leiste {
  margin-bottom: 16px;
}

.verein__plakette, .verein__ebene, .verein__bildknopf {
  display: none;
}

.vereine-raster.vereine-raster--kacheln {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.vereine-raster--kacheln .verzeichnis-buchstabe {
  margin-bottom: 0;
}

.vereine-raster--kacheln .verein.verein--zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 14px;
  min-height: 256px;
  padding: 22px 22px 18px;
  background: #f5f3ee;
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}

.vereine-raster--kacheln .verein__bild {
  display: none;
}

.vereine-raster--kacheln .verein__plakette {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #e2ede9;
  color: #2f6c5e;
  font-weight: 600;
  font-size: 19px;
  transition: opacity 0.25s, transform 0.35s ease;
}

.vereine-raster--kacheln .verein__plakette--bild {
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.verein__plakette > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  border-radius: 50%;
}

.verein__plakette-haken {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3a8a78;
  color: #ffffff;
  border: 2px solid #f5f3ee;
}

.verein__plakette-haken svg {
  width: 11px;
  height: 11px;
}

.vereine-raster--kacheln .verein__plakette {
  grid-row: 1;
}

.vereine-raster--kacheln .verein__text {
  grid-row: 2;
  transition: opacity 0.25s, transform 0.35s ease;
}

.vereine-raster--kacheln .verein--zeile h3 {
  font-size: 19px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vereine-raster--kacheln .verein__rechts {
  grid-row: 3;
  align-self: end;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid #c5cbc6;
  transition: opacity 0.25s;
}

.vereine-raster--kacheln .verein__tel {
  width: 34px;
  height: 34px;
}

.vereine-raster--kacheln .verein__gepflegt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vereine-raster--kacheln .verein__ebene {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #dfe3dd;
  clip-path: circle(0 at calc(100% - 30px) 30px);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.verein__ebene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 0.8s ease;
}

.verein__ebene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 42, 38, 0) 35%, rgba(31, 42, 38, 0.82) 100%);
}

.verein__ebene-text {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 1;
  color: #ffffff;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s, transform 0.4s ease;
}

.verein__ebene-text .t-kicker {
  color: #ffffff;
  opacity: 0.85;
  margin-bottom: 4px;
}

.verein__ebene-text b {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.verein__ebene-text small {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  opacity: 0.85;
}

.vereine-raster--kacheln .verein__bildknopf {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.verein__bildknopf svg {
  grid-area: 1/1;
  width: 17px;
  height: 17px;
  transition: opacity 0.2s, transform 0.3s ease;
}

.verein__bildknopf-zu {
  opacity: 0;
  transform: rotate(-90deg);
}

.verein__bildknopf:hover {
  border-color: #1f2a26;
}

.verein__bildknopf:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

.verein--offen .verein__ebene {
  clip-path: circle(150% at calc(100% - 30px) 30px);
}

.verein--offen .verein__ebene img {
  transform: scale(1);
}

.verein--offen .verein__ebene-text {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

.verein--offen .verein__plakette, .verein--offen .verein__text {
  opacity: 0;
  transform: translateY(-8px);
}

.verein--offen .verein__rechts {
  opacity: 0;
}

.verein--offen .verein__bildknopf {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.verein--offen .verein__bildknopf-bild {
  opacity: 0;
  transform: rotate(90deg);
}

.verein--offen .verein__bildknopf-zu {
  opacity: 1;
  transform: none;
}

/* Nächster Termin auf der Vereinskarte (auch Startseite und Absenderseite) */
.verein__termin {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #b4532f;
}

/* Ansicht Liste | Karte */
/* Umschalter Vereine | Kirchen: oberste Ebene, darum größer als Liste | Karte */
.bereich-umschalter {
  display: inline-flex;
  margin-top: 28px;
  padding: 4px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
}

.bereich-umschalter a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  color: #1f2a26;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.bereich-umschalter a:hover {
  color: #2f6c5e;
}

.bereich-umschalter a[aria-current] {
  background: #1f2a26;
  color: #ffffff;
}

.bereich-umschalter__zahl {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.7;
}

.ansicht-leiste {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.ansicht-umschalter {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
}

.ansicht-umschalter button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1f2a26;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ansicht-umschalter button svg {
  width: 16px;
  height: 16px;
}

.ansicht-umschalter button[aria-pressed=true] {
  background: #1f2a26;
  color: #ffffff;
}

/* Steuerzeile der Verzeichnisse: Bereich (Vereine | Kirchen), Filter-Knopf, rechts Zeilen | Kacheln */
.verzeichnis-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.verzeichnis-steuerung .bereich-umschalter {
  margin-top: 0;
}

.verzeichnis-steuerung .darstellung-leiste {
  order: 2;
  margin: 0 0 0 auto;
}

/* Filter-Knopf (oa_filter_knopf.inc): „Art: Alle ▾“ wie die Ortswahl; mit gewähltem Filter als gefüllte Pille mit × */
.filter-wahl {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.filter-wahl:hover {
  border-color: #1f2a26;
}

.filter-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}

.filter-knopf__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.filter-knopf__name {
  flex: none;
}

.filter-knopf__wert {
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #2f6c5e;
  font-weight: 600;
}

.filter-knopf__pfeil {
  flex: none;
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}

.filter-knopf[aria-expanded=true] .filter-knopf__pfeil {
  transform: rotate(180deg);
}

.filter-wahl--an {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.filter-wahl--an .filter-knopf__wert {
  color: #ffffff;
}

.filter-wahl--an .filter-knopf {
  padding-right: 8px;
}

.filter-weg {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.filter-weg:hover {
  background: #ffffff;
  color: #1f2a26;
}

.filter-weg svg {
  width: 14px;
  height: 14px;
}

/* Filter-Panel: Karte oben über der abgedunkelten Seite (über der Navigationszeile), Pillen in Spalten; am Handy ein Blatt
   von unten (_responsive.scss). Die Hülle lässt Klicks durch, damit ein Klick daneben den Abdunkler trifft und schließt. */
.abdunkler--filter {
  z-index: 60;
}

.filter-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 24px 24px;
  pointer-events: none;
}

.filter-panel[hidden] {
  display: none;
}

.filter-panel__karte {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  max-height: 100%;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(20, 30, 26, 0.18);
  pointer-events: auto;
  animation: oa-panel-rein 0.2s ease-out;
}

.filter-panel__kopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 12px 28px;
}

.filter-panel__titel {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.filter-panel__inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 28px 24px;
}

.filter-gruppe + .filter-gruppe {
  margin-top: 24px;
}

.filter-gruppe__titel {
  margin: 0 0 12px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.filter-panel .themen-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  mask-image: none;
}

.filter-panel .themen-pille, .filter-panel .themen-leiste--rubriken .themen-pille {
  justify-content: space-between;
  height: 44px;
  padding: 0 18px;
  font-size: 17px;
  white-space: normal;
  line-height: 1.2;
}

.filter-panel .themen-pille[aria-current], .filter-panel .themen-leiste--rubriken .themen-pille[aria-current] {
  background: #2f6c5e;
  border-color: #2f6c5e;
  color: #ffffff;
}

.filter-panel .themen-pille[aria-current] .themen-pille__zahl {
  color: #ffffff;
  opacity: 0.8;
}

.filter-panel .themen-pille:hover:not([aria-current]) {
  border-color: #2f6c5e;
  color: #2f6c5e;
}

.filter-panel__fuss {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  border-top: 1px solid #e4e7e2;
}

.filter-panel__zurueck {
  padding: 0;
  border: 0;
  background: none;
  color: #1f2a26;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.filter-panel__zurueck:hover {
  color: #2f6c5e;
}

/* Karte im Verzeichnis (oa-karte.js, [data-verzeichniskarte]) */
/* Karte in Verzeichnissen randlos über die volle Breite des Abschnitts (Fläche bzw. Seite); Hinweis und Fußzeile
   bleiben im Rahmen. Der Abschnitt ist Container, damit 100cqw die Breite ohne Scrollleiste ist. */
.vereine-verzeichnis, .stellen-verzeichnis {
  container-type: inline-size;
}

.verzeichnis-karte .ortskarte {
  width: 100cqw;
  margin-inline: calc((100% - 100cqw) / 2);
  aspect-ratio: 16/9;
  max-height: 70vh;
}

.verzeichnis-karte .hinweiszeile {
  margin-bottom: 16px;
}

.verzeichnis-karte__fuss {
  margin: 14px 0 0;
  font-size: 15px;
  color: #5b6560;
}

.karte-absender__kopf {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.karte-absender__logo {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e2ede9;
  color: #2f6c5e;
  font-weight: 600;
  font-size: 17px;
}

.karte-absender__logo--bild {
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.karte-absender__logo--bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.karte-absender p {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.45;
}

.karte-absender .karte-popover__ort {
  color: #5b6560;
  font-size: 15px;
}

.karte-absender__mehrzeilig {
  white-space: pre-line;
}

.karte-absender__merkmale {
  font-size: 15px !important;
  font-weight: 600;
  color: #2f6c5e;
}

.karte-absender a:not(.mehr) {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pin--verein .pin__koerper {
  fill: #1f3d36;
}

/* Verzeichnis „Betriebe im Ort“: Gruppe „Aus der Umgebung“ (Absender mit Standort außerhalb) unter dem Raster */
.verzeichnis-gruppe {
  margin-top: 48px;
}

.verzeichnis-gruppe__titel {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #3a8a78;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.verzeichnis-gruppe__unter {
  margin: 12px 0 24px;
  color: #5b6560;
}

.service-kacheln {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 36px 0 48px;
}

.service-kachel {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 26px 24px 22px;
  background: #f5f3ee;
  color: #1f2a26;
  transition: background 0.25s;
}

.service-kachel:hover {
  background: #e2ede9;
}

.service-kachel .t-kicker {
  margin-bottom: 14px;
}

.service-kachel__titel {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.service-kachel__text {
  margin: 10px 0 20px;
  font-size: 17px;
  line-height: 1.45;
  color: #5b6560;
}

.service-kachel .pfeil {
  margin-top: auto;
  color: #2f6c5e;
  transition: transform 0.2s;
}

.service-kachel:hover .pfeil {
  transform: translateX(4px);
}

/* Seitenkopf mit Abstand nach unten (Betriebe, Service): der folgende Abschnitt beginnt mit Linie oder Fläche */
.themen-kopf-bereich--abstand {
  padding-bottom: 48px;
}

/* Ausflüge & Freizeit: redaktionelle Liste, Ort als Kicker */
.ausflug-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
}

.ausflug {
  padding: 22px 0 26px;
  border-top: 1px solid #c5cbc6;
}

.ausflug .t-kicker {
  display: block;
  margin-bottom: 8px;
}

.ausflug__titel {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ausflug__text {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: #5b6560;
}

/* Notrufnummern: Nummer groß, Bezeichnung, Hinweis, unten ein runder Telefon-Knopf (gefüllt bei 112/110); 112/110 mit
   kräftiger Linie. Der ganze Eintrag ist der tel:-Link, der Knopf zeigt nur, dass man tippen kann. */
.notruf-bereich, .ausflug-bereich {
  scroll-margin-top: 72px;
}

.notruf-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
}

.notruf-liste li {
  display: flex;
}

.notruf {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 0 26px;
  border-top: 1px solid #c5cbc6;
  color: #1f2a26;
}

.notruf--dringend {
  border-top: 3px solid #1f2a26;
  padding-top: 20px;
}

.notruf__anrufen {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: auto;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  color: #2f6c5e;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.notruf__anrufen svg {
  width: 17px;
  height: 17px;
}

.notruf:hover .notruf__anrufen {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.notruf--dringend .notruf__anrufen {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.notruf--dringend:hover .notruf__anrufen {
  opacity: 0.85;
}

.notruf__nummer {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.notruf__name {
  margin-top: 6px;
  font-weight: 600;
  font-size: 17px;
}

.notruf__info {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.4;
  color: #5b6560;
}

.notruf:hover .notruf__nummer {
  color: #2f6c5e;
}

/* Unterzeile auf Verzeichniskarten (Bezeichnung von Betrieb oder Gemeinde) */
.verein__bez {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.4;
  color: #5b6560;
}

.stellen-verzeichnis {
  padding-top: 48px;
}

.stellen-verzeichnis .hinweiszeile {
  margin-bottom: 0;
}

/* Angebot eines Lokals auf der Verzeichniskarte (Essen & Trinken) */
.verein__merkmale {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #2f6c5e;
}

/* „Unsere Gründungspartner“ (Service, Unternehmen): statisches Logo-Raster, alphabetisch */
/* Gründungspartner: gleich große Kacheln als Slider. Die Spur reicht bis an beide Fensterränder, die erste Kachel
   beginnt bündig mit dem Inhalt (Abschnitt ist Container, 100cqw = Breite ohne Scrollleiste). */
.gruender-bereich {
  container-type: inline-size;
}

.gruender-leiste {
  list-style: none;
  margin: 0 calc((100% - 100cqw) / 2);
  padding: 4px calc((100cqw - 100%) / 2) 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 176px;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.gruender-leiste::-webkit-scrollbar {
  display: none;
}

.gruender-leiste li {
  display: flex;
  scroll-snap-align: start;
}

.gruender {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 150px;
  padding: 18px 12px 16px;
  background: #f5f3ee;
  color: #1f2a26;
  text-align: center;
  transition: background 0.25s;
}

.gruender-bereich .slider-fortschritt {
  margin-top: 24px;
}

.gruender-bereich.slider--fest .slider-steuerung, .gruender-bereich.slider--fest .slider-fortschritt {
  display: none;
}

.gruender:hover {
  background: #e2ede9;
}

.gruender__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}

.gruender__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gruender__logo--kuerzel {
  border-radius: 50%;
  background: #ffffff;
  color: #2f6c5e;
  font-weight: 600;
  font-size: 22px;
}

.gruender__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.gruender:hover .gruender__name {
  color: #2f6c5e;
}

.oa mark {
  background: #e2ede9;
  color: inherit;
  padding: 0 1px;
}

/* Vorschläge im Kopf (Such-Panel und Handy-Menü) */
.suche-vorschlaege {
  margin-top: 12px;
}

.suche-vorschlaege__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vorschlag {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #e4e7e2;
  color: #1f2a26;
}

.vorschlag .t-kicker {
  margin-bottom: 4px;
}

.vorschlag__titel {
  display: block;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}

.vorschlag:hover .vorschlag__titel, .vorschlag:focus-visible .vorschlag__titel {
  color: #2f6c5e;
}

.vorschlag:focus-visible {
  outline-offset: 2px;
}

.suche-vorschlaege__alle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 17px;
  font-weight: 600;
  color: #2f6c5e;
}

.suche-vorschlaege__alle .pfeil {
  transition: transform 0.2s;
}

.suche-vorschlaege__alle:hover .pfeil {
  transform: translateX(4px);
}

.suche-vorschlaege__leer {
  margin: 4px 0 0;
  font-size: 17px;
  color: #5b6560;
}

.suche-vorschlaege__leer a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel--menue .vorschlag__titel {
  font-size: 17px;
}

/* Ergebnisseite */
.suche-form--seite {
  margin-top: 28px;
}

.suche-form--seite input {
  font-size: 34px;
}

.suche-status {
  margin: 16px 0 0;
  font-size: 17px;
  color: #5b6560;
}

.suche-kopf .themen-leiste {
  margin-top: 24px;
}

.suche-ergebnisse {
  padding-top: 40px;
}

.suche-ort {
  margin: 0 0 28px;
  font-size: 17px;
  color: #5b6560;
}

.suche-ort .mehr--text {
  font-size: 17px;
  color: #2f6c5e;
  cursor: pointer;
  background: none;
}

.suche-absender {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}

.treffer-absender {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  background: #f5f3ee;
  color: #1f2a26;
  transition: background 0.25s;
}

.treffer-absender:hover {
  background: #e2ede9;
}

.treffer-absender__logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e2ede9;
  color: #2f6c5e;
  font-weight: 600;
  font-size: 19px;
}

.treffer-absender__logo--bild {
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.treffer-absender__logo--bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.treffer-absender__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.treffer-absender__name {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
}

.treffer-absender__bez {
  font-size: 15px;
  color: #5b6560;
}

.treffer-absender .pfeil {
  color: #2f6c5e;
  transition: transform 0.2s;
}

.treffer-absender:hover .pfeil {
  transform: translateX(4px);
}

.treffer-absender__alle {
  grid-column: 1/-1;
  justify-self: start;
  cursor: pointer;
  background: none;
}

.suche-liste {
  border-top: 1px solid #1f2a26;
}

.suche-liste:empty {
  border-top: 0;
}

.suche-leer {
  padding-top: 8px;
}

.suche-leer__text {
  margin: 0 0 4px;
  font-size: 17px;
  color: #5b6560;
}

.suche-archiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #e4e7e2;
}

.suche-archiv .mehr {
  cursor: pointer;
  background: none;
}

.suche-archiv .mehr[disabled] {
  opacity: 0.5;
  cursor: progress;
}

/* Such-Panel im Kopf: eine weiße Karte mittig über der abgedunkelten Seite (auch über der Navigationszeile) –
   oben das Suchfeld, darunter „Häufig gesucht“ oder beim Tippen die Vorschläge. Klick daneben, Escape oder
   das X schließen (js/oa-kopf.js). */
.navzeile .panel--suche {
  position: fixed;
  inset: 0;
  z-index: 3;
  padding: 14vh 16px 32px;
  background: rgba(31, 42, 38, 0.72);
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: oa-schleier-rein 0.2s ease-out;
}

.suche-buehne {
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20, 30, 26, 0.18);
  overflow: hidden;
  animation: oa-panel-rein 0.2s ease-out;
}

.panel--suche .suche-form {
  height: 68px;
  padding: 0 10px 0 26px;
  gap: 18px;
  border: 0;
  border-bottom: 1px solid #e4e7e2;
}

.panel--suche .suche-form input {
  font-size: 22px;
}

.panel--suche .suche-form input:focus-visible {
  outline: none;
}

.suche-zu {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5b6560;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.suche-zu:hover {
  background: #f5f3ee;
  color: #1f2a26;
}

.panel--suche .suche-form .suche-zu svg {
  width: 16px;
  height: 16px;
  color: currentColor;
}

.panel--suche .suche-vorschlaege {
  margin: 0;
  padding: 4px 24px 18px;
}

.panel--suche .vorschlag:last-child {
  border-bottom: 0;
}

.panel--suche .suche-tipps {
  margin: 0;
  padding: 18px 24px 22px;
  gap: 8px;
}

.panel--suche .suche-tipps span {
  flex-basis: 100%;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.panel--suche .suche-tipps a {
  padding: 7px 16px;
  border: 0;
  background: #f5f3ee;
  color: #1f2a26;
  font-size: 17px;
  transition: background 0.2s, color 0.2s;
}

.panel--suche .suche-tipps a:hover {
  background: #e2ede9;
  color: #2f6c5e;
}

.textseite-bereich {
  padding: 36px 0 104px;
}

.textseite-bereich .brotkrumen {
  margin-bottom: 28px;
}

.textseite {
  max-width: 700px;
}

.textseite .t-h1 {
  margin-bottom: 36px;
}

.textseite > .t-h1:first-child::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  background: #c89b4a;
}

.textseite__anschrift {
  display: block;
  margin: 0;
  font-style: normal;
  font-size: 22px;
  line-height: 1.6;
}

.textseite__titel {
  margin: 44px 0 10px;
  padding-top: 22px;
  border-top: 1px solid #e4e7e2;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.textseite p {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.65;
}

.textseite a {
  color: #2f6c5e;
  text-decoration: underline;
  text-decoration-color: #3a8a78;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.textseite a:hover {
  color: #1f2a26;
}

.textseite--lang h2 {
  margin: 64px 0 12px;
  padding-top: 28px;
  border-top: 1px solid #c5cbc6;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.textseite--lang h3 {
  margin: 36px 0 10px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.textseite--lang h4 {
  margin: 24px 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 600;
}

.textseite ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.textseite li {
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.6;
}

.textseite a {
  overflow-wrap: anywhere;
}

.textseite__stand {
  margin: -24px 0 32px;
  color: #5b6560;
  font-size: 17px;
}

.textseite__kurz {
  padding: 20px 24px;
  background: #f5f3ee;
}

.textseite .bereich-umschalter {
  margin-top: 0;
}

.textseite .bereich-umschalter a {
  color: #1f2a26;
  text-decoration: none;
}

.textseite .bereich-umschalter a:hover {
  color: #2f6c5e;
}

.textseite .bereich-umschalter a[aria-current] {
  color: #ffffff;
}

.textseite__tabelle {
  width: 100%;
  margin: 8px 0 20px;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.5;
}

.textseite__tabelle th, .textseite__tabelle td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid #e4e7e2;
  text-align: left;
  vertical-align: top;
}

.textseite__tabelle thead th {
  border-bottom-color: #c5cbc6;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6560;
}

.textseite__tabelle tbody th {
  width: 30%;
  font-weight: 600;
}

.textseite__tabelle td:last-child {
  padding-right: 0;
}

.textseite__tabelle thead th:last-child, .textseite__tabelle tbody td:nth-child(3) {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .textseite-bereich {
    padding: 20px 0 64px;
  }
  .textseite__tabelle {
    font-size: 17px;
  }
  .textseite__tabelle tbody th {
    width: 38%;
  }
  .textseite__tabelle thead th:last-child, .textseite__tabelle tbody td:nth-child(3) {
    white-space: normal;
  }
  .textseite__titel {
    margin-top: 32px;
  }
  .textseite--lang h2 {
    margin-top: 48px;
    font-size: 26px;
  }
}
.service-kacheln--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kontakt-direkt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid #c5cbc6;
}

.kontakt-direkt__titel {
  margin: 0 0 12px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kontakt-direkt p, .kontakt-direkt address {
  margin: 0;
  font-size: 19px;
  line-height: 1.65;
  font-style: normal;
}

.kontakt-direkt a {
  color: #2f6c5e;
  text-decoration: underline;
  text-decoration-color: #3a8a78;
  text-underline-offset: 3px;
}

.kontakt-direkt a:hover {
  color: #1f2a26;
}

@media (max-width: 1180px) {
  .service-kacheln--drei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .service-kacheln--drei {
    grid-template-columns: minmax(0, 1fr);
  }
  .kontakt-direkt {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 44px;
  }
}
.kontakt-formular {
  max-width: 760px;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid #c5cbc6;
}

.kontakt-formular__titel {
  margin: 0 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.kontakt-formular__unter {
  margin: 0 0 28px;
  color: #5b6560;
  font-size: 19px;
}

.kontakt-anliegen {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  gap: 10px;
}

.kontakt-anliegen legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 10px;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1f2a26;
}

.kontakt-formular .mp-haken {
  margin-bottom: 10px;
}

.kontakt-formular .mp-haken a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kontakt-formular .mp-absenden {
  margin-top: 40px;
}

@media (max-width: 720px) {
  .kontakt-formular {
    margin-top: 44px;
  }
}
.ueber-kopf-bereich {
  padding-bottom: 72px;
}

.ueber-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: end;
}

.ueber-kopf .t-kicker {
  display: block;
  margin-bottom: 14px;
}

.ueber-kopf__titel {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 60px;
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.015em;
}

.ueber-kopf__text {
  margin: 0;
  font-size: 22px;
  line-height: 1.6;
  color: #5b6560;
}

.ueber-finden {
  padding-top: 0;
}

.ueber-fragen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.ueber-frage {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border-top: 2px solid #1f2a26;
  background: #f5f3ee;
  color: #1f2a26;
  transition: background 0.25s;
}

.ueber-frage:hover {
  background: #e2ede9;
}

.ueber-frage__symbol {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  color: #2f6c5e;
}

.ueber-frage--termin .ueber-frage__symbol {
  color: #b4532f;
}

.ueber-frage__titel {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ueber-frage__text {
  margin: 10px 0 22px;
  font-size: 17px;
  line-height: 1.5;
  color: #5b6560;
}

.ueber-frage__ziel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 17px;
  font-weight: 600;
  color: #2f6c5e;
}

.ueber-frage__ziel .pfeil {
  transition: transform 0.2s;
}

.ueber-frage:hover .ueber-frage__ziel .pfeil {
  transform: translateX(4px);
}

.ueber-schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.ueber-schritt {
  padding-top: 22px;
  border-top: 1px solid #c5cbc6;
}

.ueber-schritt__zahl {
  display: block;
  margin-bottom: 14px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 46px;
  line-height: 1;
  font-weight: 350;
  color: #2f6c5e;
}

.ueber-schritt__titel {
  margin: 0 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ueber-schritt p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #5b6560;
}

.ueber-profil__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px 72px;
  align-items: center;
}

.ueber-profil__text .t-kicker {
  display: block;
  margin-bottom: 14px;
}

.ueber-profil__text .t-h1 {
  margin-bottom: 20px;
}

.ueber-profil__einstieg {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.6;
}

.ueber-profil__text > p:last-child {
  margin: 0;
  font-size: 19px;
  line-height: 1.65;
  color: #5b6560;
}

.ueber-liste b {
  font-weight: 600;
}

.profil-muster {
  padding: 28px;
  background: #ffffff;
  border: 1px solid #c5cbc6;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
}

.profil-muster__kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7e2;
}

.profil-muster__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1f3d36;
  color: #ffffff;
  font-weight: 600;
  font-size: 19px;
}

.profil-muster__name {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.profil-muster__art {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  color: #5b6560;
}

.profil-muster__daten {
  display: grid;
  gap: 8px;
  margin: 18px 0 20px;
}

.profil-muster__daten div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  font-size: 17px;
}

.profil-muster__daten dt {
  color: #5b6560;
}

.profil-muster__daten dd {
  margin: 0;
}

.profil-muster__zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid #e4e7e2;
  font-size: 17px;
  font-weight: 600;
}

.profil-muster__zeile b {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 350;
  line-height: 1;
  color: #b4532f;
  min-width: 34px;
}

.profil-muster__kicker {
  min-width: 48px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2f6c5e;
}

.ueber-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 64px;
}

.ueber-spalte .t-kicker {
  display: block;
  margin-bottom: 10px;
}

.ueber-spalte__titel {
  margin: 0 0 16px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ueber-spalte p, .ueber-dahinter p {
  margin: 0 0 20px;
  font-size: 19px;
  line-height: 1.65;
}

.ueber-liste {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.ueber-liste li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid #e4e7e2;
  font-size: 19px;
  line-height: 1.5;
}

.ueber-liste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 19px;
  width: 12px;
  height: 7px;
  border-left: 2px solid #3a8a78;
  border-bottom: 2px solid #3a8a78;
  transform: rotate(-45deg);
}

.ueber-dahinter {
  max-width: 700px;
  margin-top: 72px;
  padding-top: 36px;
  border-top: 1px solid #c5cbc6;
}

.ueber-dahinter a {
  color: #2f6c5e;
  text-decoration: underline;
  text-decoration-color: #3a8a78;
  text-underline-offset: 3px;
}

.ueber-dahinter + .melden-band {
  margin-top: 48px;
}

.werben-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}

.werben-raster--vier {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.werben-raster--vier .werben-karte {
  padding: 28px 22px 24px;
}

.werben-raster--vier .werben-karte__titel {
  font-size: 22px;
}

.werben-karte {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
}

.werben-karte--hervor {
  border: 2px solid #2f6c5e;
  background: #e2ede9;
}

.werben-karte .t-kicker {
  display: block;
  margin-bottom: 10px;
}

.werben-karte__titel {
  margin: 0 0 14px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.werben-karte__preis {
  margin: 0 0 6px;
  font-size: 17px;
  color: #5b6560;
}

.werben-karte__preis b {
  font-family: "Fraunces", Georgia, serif;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 350;
  color: #1f2a26;
  margin-right: 4px;
}

.werben-karte__hinweis {
  margin: 0 0 4px;
  font-size: 15px;
  color: #2f6c5e;
}

.werben-karte__text {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: #5b6560;
}

.werben-liste {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.werben-liste li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #e4e7e2;
  font-size: 17px;
  line-height: 1.45;
}

.werben-haken {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #2f6c5e;
}

.werben-karte .werben-liste, .werben-karte__text {
  flex-grow: 1;
}

.werben-karte__knopf {
  align-self: flex-start;
  margin-top: 28px;
}

.werben-karte__knopf + .werben-karte__hinweis {
  margin-top: 10px;
  color: #5b6560;
}

.knopf--leise {
  background: transparent;
  color: #1f2a26 !important;
  border: 1px solid #c5cbc6;
}

.knopf--leise:hover {
  border-color: #1f2a26;
}

.werben-extras__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}

.werben-extras__raster--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.werben-extra {
  padding: 24px 24px 22px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
}

.werben-extra {
  position: relative;
  transition: background 0.25s;
}

.werben-extra:hover {
  background: #e2ede9;
}

.werben-extra__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.werben-extra__link .pfeil {
  transition: transform 0.2s;
}

.werben-extra:hover .werben-extra__link .pfeil {
  transform: translateX(4px);
}

.werben-extra__titel {
  margin: 0 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}

.werben-extra p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.55;
  color: #5b6560;
}

.werben-extra .werben-extra__preis {
  margin: 0;
  color: #1f2a26;
}

.werben-extra__preis b {
  font-weight: 600;
}

.werben-extras__hinweis {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: #5b6560;
}

.werben-extra {
  display: flex;
  flex-direction: column;
}

.werben-extra > p:not(.werben-extra__preis) {
  flex-grow: 1;
}

.werben-extra__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #e4e7e2;
}

.werben-extra .werben-extra__fuss .werben-extra__preis {
  margin: 0;
  font-size: 17px;
  color: #5b6560;
}

.werben-extra__fuss .werben-extra__preis b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 350;
  color: #1f2a26;
}

.werben-extra__link {
  flex: none;
}

.werben-extras__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 36px;
  margin-top: 36px;
  padding: 28px 32px;
  background: #ffffff;
  border-left: 4px solid #3a8a78;
}

.werben-extras__start > div:first-child {
  flex: 1 1 420px;
}

.werben-extras__start p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #5b6560;
}

.werben-extras__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.werben-schritte {
  margin: 0 0 22px;
  padding-left: 22px;
}

.werben-schritte li {
  padding: 8px 0;
  font-size: 19px;
  line-height: 1.5;
}

.werben-schritte b {
  font-weight: 600;
}

.werben-warum .melden-band {
  margin-top: 72px;
}

.werben-umschalter {
  margin-top: 48px;
}

.werben-formate {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.werben-format {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 22px 22px 20px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
}

.werben-format__seite {
  position: relative;
  flex: none;
  display: block;
  width: 64px;
  height: calc(64px * 297 / 210);
  background: #f5f3ee;
  border: 1px solid #c5cbc6;
}

.werben-format__flaeche {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--b) / 210 * 100%);
  height: calc(var(--h) / 297 * 100%);
  background: #3a8a78;
}

.werben-format__angaben {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.werben-format__name {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}

.werben-format__mass {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: #5b6560;
}

.werben-format__preis {
  margin-top: 10px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 350;
  white-space: nowrap;
}

.werben-blatt__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin: 36px 0 0;
}

@media (max-width: 1180px) {
  .werben-formate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .werben-karte {
    padding: 26px 22px 24px;
  }
  .werben-raster--vier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .werben-extras__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .werben-raster {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}
@media (max-width: 720px) {
  .werben-extras__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .werben-formate {
    gap: 12px;
  }
  .werben-format {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px 16px;
  }
  .werben-format__preis {
    font-size: 26px;
  }
  .werben-umschalter {
    margin-top: 32px;
  }
  .werben-umschalter a {
    padding: 0 16px;
    font-size: 17px;
  }
  .werben-warum .melden-band {
    margin-top: 48px;
  }
}
@media (max-width: 1180px) {
  .ueber-kopf {
    grid-template-columns: minmax(0, 1fr);
  }
  .ueber-kopf__titel {
    font-size: 48px;
  }
  .ueber-fragen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ueber-profil__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .profil-muster {
    max-width: 520px;
  }
}
@media (max-width: 720px) {
  .ueber-kopf-bereich {
    padding-bottom: 48px;
  }
  .ueber-kopf__titel {
    font-size: 38px;
  }
  .ueber-kopf__text {
    font-size: 19px;
  }
  .ueber-fragen, .ueber-schritte, .ueber-spalten {
    grid-template-columns: minmax(0, 1fr);
  }
  .ueber-fragen {
    gap: 12px;
    margin-top: 28px;
  }
  .ueber-schritte {
    gap: 24px;
  }
  .ueber-dahinter {
    margin-top: 48px;
  }
}
.abschnitt.mp-kopf-bereich {
  padding: 40px 0 0;
}

/* Abmelden rechts oben unter der Navigationszeile, auf jeder Meldeportal-Seite mit Anmeldung */
.mp-abmelden {
  float: right;
  margin: 0 0 12px 24px;
}

.mp-abmelden svg {
  width: 16px;
  height: 16px;
}

.mp-kopf-bereich .t-kicker {
  margin-bottom: 10px;
}

.mp-kopf-bereich .t-kicker::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  background: #c89b4a;
}

.mp-konto {
  margin-top: 18px;
}

.mp-konto__name {
  margin: 0;
  font-size: 17px;
  color: #5b6560;
}

.mp-konto__name b {
  color: #1f2a26;
  font-weight: 600;
}

.mp-nav {
  margin-top: 18px;
}

.abschnitt.mp-inhalt {
  padding-top: 28px;
}

.mp-einleitung {
  margin: 0 0 36px;
  max-width: 700px;
  font-size: 19px;
  line-height: 1.55;
  color: #5b6560;
}

.mp-hinweis {
  font-size: 15px;
  font-weight: 400;
  color: #5b6560;
}

/* Hinweis-Kasten (abgemeldet, ohne Zuordnung, leer, Danke) */
.mp-hinweis-kasten {
  padding: 32px 36px;
  background: #f5f3ee;
}

.mp-hinweis-kasten h2 {
  margin: 0 0 10px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mp-hinweis-kasten p {
  margin: 0 0 20px;
  max-width: 700px;
  color: #5b6560;
  line-height: 1.55;
}

.mp-hinweis-kasten a:not(.knopf):not(.mehr):not(.themen-pille) {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-hinweis-kasten--erfolg {
  border-left: 4px solid #3a8a78;
}

.mp-fortschritt {
  padding: 16px;
  background: #f5f3ee;
}

.mp-fortschritt__kopf {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
}

.mp-fortschritt__balken {
  height: 8px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: #e4e7e2;
  overflow: hidden;
}

.mp-fortschritt__balken span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #3a8a78;
}

.mp-fortschritt .mp-hinweis {
  margin: 0;
}

.mp-fortschritt a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-willkommen {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 12px 12px 16px;
  border-left: 4px solid #3a8a78;
  background: #e2ede9;
}

.mp-willkommen p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

.mp-willkommen a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-willkommen__zu {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -4px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #1f2a26;
  cursor: pointer;
}

.mp-willkommen__zu svg {
  width: 14px;
  height: 14px;
}

.mp-willkommen__zu:hover {
  background: #ffffff;
}

.mp-vorschau .mp-willkommen__zu:hover {
  background: #1f2a26;
  color: #ffffff;
}

.mp-willkommen[hidden] {
  display: none;
}

.mp-arten__hinweis {
  margin: 12px 0 0;
}

.mp-hinweis-kasten .themen-leiste + .mp-weiter {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #c5cbc6;
}

.mp-fehlerliste {
  margin: 0 0 16px;
  padding-left: 1.2em;
  color: #b4532f;
  font-weight: 500;
}

/* Formular */
.mp-formular {
  display: grid;
  gap: 32px;
}

/* Abschnitte ohne Fläche, nur durch Linien getrennt (spart Platz am Handy); ein Abschnitt in einem Abschnitt (Termin)
   mit feiner Linie. Einklappen über .mp-teil__knopf (js/oa-meldeportal.js) */
.mp-teil {
  margin: 0;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid #1f2a26;
  min-width: 0;
}

.mp-formular .mp-teil .mp-teil {
  padding: 20px 0 0;
  border-top: 1px solid #c5cbc6;
}

.mp-teil__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mp-teil__knopf svg {
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

.mp-teil__knopf:hover {
  color: #2f6c5e;
}

.mp-teil__knopf:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 4px;
}

.mp-teil--zu .mp-teil__knopf svg {
  transform: rotate(-90deg);
}

.mp-teil--zu > .mp-teil__titel {
  margin-bottom: 0;
}

.mp-teil__inhalt[hidden] {
  display: none;
}

.mp-teil[hidden] {
  display: none;
}

.mp-teil__titel {
  float: left;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* alle Folgenden, nicht nur das nächste: steht direkt nach der Überschrift ein verstecktes Feld (Freigaben: Haken
   über data-haken-wert), rutschte der Inhalt sonst schmal neben die gefloatete Überschrift */
.mp-teil__titel ~ * {
  clear: both;
}

.mp-teil--termin {
  margin: 8px 0 28px;
}

.mp-reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

.mp-feld {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 20px;
  min-width: 0;
}

.mp-feld label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 17px;
  font-weight: 600;
  color: #1f2a26;
}

.mp-formular input[type=text], .mp-formular input[type=date], .mp-formular input[type=time], .mp-formular input[type=password],
.mp-formular input[type=email], .mp-formular input[type=tel], .mp-formular input[type=url], .mp-formular input[type=number],
.mp-formular select, .mp-formular textarea, .mp-filter select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #c5cbc6;
  border-radius: 0;
  background: #ffffff;
  color: #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

.mp-formular textarea {
  min-height: 0;
  resize: vertical;
}

/* Vom Browser ausgefüllte Felder (gespeicherte Anmeldedaten) nicht blau hinterlegen */
.mp-formular input:-webkit-autofill, .mp-formular input:-webkit-autofill:hover, .mp-formular input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: #1f2a26;
  caret-color: #1f2a26;
  transition: background-color 600000s 0s;
}

.mp-formular input:autofill {
  background: #ffffff;
  color: #1f2a26;
}

.mp-formular input:focus, .mp-formular select:focus, .mp-formular textarea:focus, .mp-filter select:focus {
  outline: 2px solid #3a8a78;
  outline-offset: 0;
  border-color: #3a8a78;
}

/* Dateiauswahl: der Knopf des Browsers als Pille wie „Weiteres Foto“, daneben der Dateiname leise */
.mp-formular input[type=file] {
  max-width: 100%;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  color: #5b6560;
  cursor: pointer;
}

.mp-formular input[type=file]::file-selector-button {
  margin-right: 14px;
  padding: 10px 20px;
  border: 1px solid #1f2a26;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mp-formular input[type=file]:hover::file-selector-button {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.mp-formular input[type=file]:focus {
  outline: 0;
}

.mp-formular input[type=file]:focus-visible::file-selector-button {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

/* Bildnachweis unter dem Foto */
.mp-nachweis {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 6px;
}

.mp-nachweis[hidden] {
  display: none;
}

.mp-nachweis label {
  font-size: 15px;
}

.mp-bild-hinweis.mp-anhaenge__hinweis {
  margin: 0 0 16px;
  border-color: #2f6c5e;
  background: #e2ede9;
  font-weight: 400;
}

/* Bildrechte-Haken zwischen den Aufklappern für Fotos und PDFs */
.mp-feld.mp-bildrechte {
  margin: 24px 0;
  padding: 10px 14px;
  border-left: 3px solid #2f6c5e;
  background: #e2ede9;
}

.mp-feld.mp-bildrechte[hidden] {
  display: none;
}

.mp-bildrechte .mp-bild-hinweis--warnung {
  background: #ffffff;
}

.mp-datei {
  align-self: flex-start;
  color: #2f6c5e;
  font-size: 17px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Schwerpunkt im Eintragsformular: Haken-Gruppe mit Beschriftung wie ein Feld */
.mp-auswahl {
  border: 0;
  padding: 0;
}

.mp-auswahl legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1f2a26;
}

.mp-auswahl .mp-haken label, .mp-auswahl label.mp-haken {
  font-weight: 400;
}

.mp-auswahl[data-blatt-umfang] legend, .mp-auswahl--blatt legend {
  margin-bottom: 8px;
}

.mp-auswahl--blatt .mp-haken + .mp-haken {
  margin-top: 8px;
}

.mp-auswahl [data-kurzfassung] {
  margin: 4px 0 0 32px;
}

.mp-haken--aus {
  opacity: 0.5;
  cursor: not-allowed;
}

.mp-feldfehler {
  margin: 0;
  color: #b4532f;
  font-size: 15px;
  font-weight: 500;
}

/* mit .oa davor, sonst gewinnt .oa img (volle Breite) aus _basis.scss */
.oa .mp-vorschaubild {
  width: 160px;
  height: auto;
  max-width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: #dfe3dd;
}

.oa .mp-vorschaubild--logo {
  width: 96px;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e4e7e2;
}

.mp-bild-hinweis {
  margin: 8px 0 0;
}

.mp-bild-hinweis--fehler, .mp-bild-hinweis--warnung {
  padding: 10px 14px;
  border-left: 3px solid;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.mp-bild-hinweis--fehler {
  border-color: #b4532f;
  background: rgba(180, 83, 47, 0.1);
  color: #b4532f;
}

.mp-bild-hinweis--warnung {
  border-color: #3a8a78;
  background: #f5f3ee;
  color: #1f2a26;
}

/* Absenden: Knopf mit Kreisel, solange das Formular gesendet wird (js/oa-meldeportal.js) */
.knopf--sendet, .knopf--sendet:hover {
  opacity: 0.8;
  cursor: progress;
}

.knopf__kreisel {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: oa-kreisel 0.8s linear infinite;
}

@keyframes oa-kreisel {
  to {
    transform: rotate(360deg);
  }
}
.mp-senden-stand {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-weight: 600;
  color: #1f2a26;
}

/* Art der Meldung als große Auswahl-Kacheln */
.mp-arten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mp-arten--zwei {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-art {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.mp-art input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mp-art__titel {
  font-size: 19px;
  font-weight: 600;
}

.mp-art__text {
  font-size: 15px;
  color: #5b6560;
}

.mp-art:hover {
  border-color: #1f2a26;
}

.mp-art:has(input:checked) {
  border-color: #2f6c5e;
  background: #e2ede9;
  box-shadow: inset 0 0 0 1px #2f6c5e;
}

.mp-art:has(input:focus-visible) {
  outline: 2px solid #3a8a78;
  outline-offset: 3px;
}

/* Aufklappbereich „Ort auf der Karte“: Kasten mit Kopfzeile und Plus-Knopf rechts (offen: Minus) */
.mp-galerie {
  margin: 8px 0 18px;
  padding: 18px 20px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
  transition: border-color 0.2s;
}

.mp-galerie:hover, .mp-galerie[open] {
  border-color: #1f2a26;
}

.mp-galerie > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-right: 52px;
  position: relative;
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
}

.mp-galerie > summary::-webkit-details-marker {
  display: none;
}

.mp-galerie > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border: 1px solid #1f2a26;
  border-radius: 999px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.mp-galerie[open] > summary::after {
  content: "–";
}

.mp-galerie > summary:hover {
  color: #2f6c5e;
}

.mp-galerie > summary:hover::after {
  background: #1f2a26;
  color: #ffffff;
}

.mp-galerie > summary:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 4px;
}

.mp-galerie > summary .mp-hinweis {
  font-weight: 400;
}

/* Dateiwahl (js/oa-meldeportal.js [data-dateiwahl]): Kopf wie eine Feldbezeichnung, ein Knopf, darunter je Datei ein
   Kärtchen mit Vorschau, Name, X bzw. „Ersetzen“ und – bei Fotos – dem Bildnachweis */
.mp-dateiwahl {
  gap: 10px;
  margin-bottom: 28px;
}

.mp-dateiwahl__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1f2a26;
}

.mp-dateiwahl--an {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-teil--dateien > .mp-teil__inhalt > .mp-feld, .mp-teil--dateien > .mp-feld {
  margin-bottom: 28px;
}

.mp-dateiwahl__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.mp-dateiwahl__knopf svg {
  width: 14px;
  height: 14px;
}

.mp-dateiwahl__knopf[disabled] {
  opacity: 0.5;
  cursor: default;
}

.mp-dateiwahl__knopf[disabled]:hover {
  background: none;
  border-color: #c5cbc6;
  color: #1f2a26;
}

.mp-dateiwahl__stand {
  font-size: 15px;
}

.mp-dateiwahl__meldung {
  margin: 0;
}

.mp-dateiwahl__meldung[hidden] {
  display: none;
}

.mp-galerie__felder.mp-dateiwahl--an .mp-bild-hinweis.mp-anhaenge__hinweis {
  margin: 0;
}

.mp-datei-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
}

.mp-datei-karte[hidden] {
  display: none;
}

.mp-datei-karte__kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mp-datei-karte .mp-datei-karte__bild, .mp-datei-karte .mp-datei-karte__gespeichert {
  flex: none;
  width: 96px;
  height: 64px;
  aspect-ratio: auto;
  object-fit: cover;
  background: #f5f3ee;
}

.mp-datei-karte .mp-vorschaubild--logo.mp-datei-karte__gespeichert {
  width: 64px;
  object-fit: contain;
  padding: 4px;
}

.mp-datei-karte__bild[hidden], .mp-datei-karte__gespeichert[hidden] {
  display: none;
}

.mp-datei-karte__bild--pdf {
  display: grid;
  place-items: center;
  width: 48px;
  height: 56px;
  color: #2f6c5e;
}

.mp-datei-karte__bild--pdf svg {
  width: 30px;
  height: 30px;
}

.mp-datei-karte a.mp-datei.mp-datei-karte__gespeichert {
  display: none;
}

.mp-datei-karte__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.mp-datei-karte__ersetzen {
  flex: none;
  font-size: 15px;
}

.mp-datei-karte__ersetzen[hidden] {
  display: none;
}

.mp-datei-karte__loeschen {
  flex: none;
  font-size: 15px;
  color: #b4532f;
}

.mp-datei-karte__loeschen[hidden] {
  display: none;
}

.mp-datei-karte--geloescht .mp-datei-karte__loeschen {
  color: #2f6c5e;
}

.mp-datei-karte--geloescht .mp-datei-karte__name {
  color: #b4532f;
  white-space: normal;
}

.mp-vorschaubild--weg {
  opacity: 0.35;
  filter: grayscale(1);
}

.mp-datei-karte--geloescht .mp-nachweis {
  display: none;
}

.mp-datei-karte .mp-nachweis {
  margin: 0;
}

.mp-datei-karte .mp-bild-hinweis {
  margin: 0;
}

.mp-feld-weg {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mp-feld-weg svg {
  width: 14px;
  height: 14px;
}

.mp-feld-weg:hover, .mp-feld-weg:focus-visible {
  background: #b4532f;
  border-color: #b4532f;
  color: #ffffff;
}

.mp-feld-weg[hidden] {
  display: none;
}

/* Haken (Kanäle, Angemeldet bleiben) */
.mp-kanaele {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.mp-haken {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  cursor: pointer;
}

.mp-feld .mp-haken {
  flex-wrap: nowrap;
  gap: 12px;
  font-weight: 400;
}

.mp-haken input[type=checkbox], .mp-haken input[type=radio] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #2f6c5e;
}

.mp-haken b {
  font-weight: 600;
  margin-right: 6px;
}

.mp-haken-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 16px;
}

@media (max-width: 720px) {
  .mp-haken-raster {
    grid-template-columns: 1fr;
  }
}
.mp-absenden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.mp-absenden .mp-hinweis {
  flex-basis: 100%;
  margin: 0;
}

.mp-formular .knopf {
  border: 0;
  cursor: pointer;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
}

/* Anmeldung */
.mp-anmelden {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.mp-anmelden__formular {
  gap: 0;
}

.mp-anmelden__formular .mp-haken, .mp-registrieren .mp-haken {
  margin: 4px 0 28px;
}

/* Fallenfeld gegen Bots (js/oa-meldeportal.js, [data-bot-schutz]): aus dem Bild geschoben statt display:none, weil
   manche Bots versteckte Felder überspringen */
.mp-falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mp-bestaetigen {
  margin-bottom: 28px;
  padding: 24px 28px;
}

.mp-bestaetigen p:last-child {
  margin-bottom: 0;
}

/* Hinweis über dem Formular (registrieren-2026-pagecontent.html) */
.mp-vorab {
  margin: 0 0 28px;
  padding: 18px 22px;
  border-left: 4px solid #3a8a78;
  background: #e2ede9;
}

.mp-vorab h2 {
  margin: 0 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.mp-vorab p {
  margin: 0;
  line-height: 1.5;
}

.mp-vorab p + p {
  margin-top: 8px;
}

.mp-vorab b {
  font-weight: 600;
}

.mp-vorab a {
  color: #2f6c5e;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-anmelden__info {
  padding: 28px 30px;
  background: #f5f3ee;
  font-size: 17px;
  line-height: 1.55;
}

.mp-anmelden__info h2 {
  margin: 0 0 10px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.mp-anmelden__info h3 {
  margin: 22px 0 6px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
}

.mp-anmelden__info p {
  margin: 0;
  color: #5b6560;
}

.mp-anmelden__info p + p {
  margin-top: 16px;
}

.mp-anmelden__info a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-passwort {
  display: flex;
  gap: 8px;
}

.mp-passwort input {
  flex: 1;
}

.mp-passwort__zeigen {
  flex: none;
  padding: 0 16px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.mp-passwort__zeigen:hover {
  border-color: #1f2a26;
}

.mp-fehler {
  margin: 0 0 20px;
  background: rgba(180, 83, 47, 0.1);
  color: #b4532f;
}

/* Meine Meldungen */
.mp-filter {
  margin-bottom: 20px;
}

.mp-filter__felder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 20px;
}

.mp-filter .mp-feld {
  margin-bottom: 12px;
}

.mp-filter__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: 0;
  font-size: 15px;
  color: #5b6560;
}

.mp-filter__stand .mehr {
  background: none;
  cursor: pointer;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
}

.mp-filter__leer {
  margin: 0 0 24px;
  color: #5b6560;
}

.mp-liste {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 1px solid #1f2a26;
}

.mp-eintrag {
  padding: 22px 0;
  border-bottom: 1px solid #e4e7e2;
}

.mp-eintrag__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.mp-eintrag__titel {
  margin: 0 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mp-eintrag__kanaele {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.mp-eintrag__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* Titelbild klein links neben dem Text (Meine Meldungen); .oa davor, sonst gewinnt .oa img aus _basis.scss */
.mp-eintrag--bild {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}

.mp-eintrag--bild > * {
  grid-column: 2;
}

.oa .mp-eintrag__bild {
  grid-column: 1;
  grid-row: 1/span 6;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: #f5f3ee;
}

.mp-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: #f5f3ee;
  font-size: 15px;
  font-weight: 600;
}

.mp-status--eingereicht {
  background: rgba(200, 155, 74, 0.25);
  color: #1f2a26;
}

.mp-status--freigegeben, .mp-status--veroeffentlicht {
  background: #e2ede9;
  color: #2f6c5e;
}

.mp-status--imBlatt {
  background: #1f2a26;
  color: #ffffff;
}

.mp-status--zurueckgezogen {
  background: #f5f3ee;
  color: #5b6560;
}

.mp-status--abstimmung {
  background: #2f6c5e;
  color: #ffffff;
}

.hinweiszeile--wichtig {
  background: #2f6c5e;
  color: #ffffff;
  font-weight: 600;
}

.mp-vorschau {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
}

.mp-vorschau__bild {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  margin: 0 0 24px;
  background: #dfe3dd;
}

.mp-vorschau__titel {
  margin: 0 0 12px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.mp-vorschau__text {
  margin-top: 24px;
}

.mp-vorschau__galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.mp-vorschau__galerie:empty {
  display: none;
}

.mp-vorschau__galerie img {
  width: 120px;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: #dfe3dd;
}

.mp-pruefen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 24px;
}

.mp-pruefen__teil {
  padding: 24px;
  background: #f5f3ee;
}

.mp-pruefen__titel {
  margin: 0 0 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.mp-pruefen__teil .knopf {
  margin-top: 16px;
}

@media (max-width: 720px) {
  .mp-pruefen {
    grid-template-columns: 1fr;
  }
}
/* Mein Profil: Angaben, die nur die Redaktion ändert */
.mp-profil-fest {
  margin-top: 56px;
}

.mp-profil-fest__liste {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px 20px;
  margin: 0 0 16px;
  font-size: 17px;
}

.mp-profil-fest__liste dt {
  color: #5b6560;
}

.mp-profil-fest__liste dd {
  margin: 0;
}

.mp-profil-fest__logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.mp-hinweis a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Text-Editor (js/oa-meldeportal.js, [data-editor]) */
.mp-editor {
  position: relative;
  border: 1px solid #c5cbc6;
  background: #ffffff;
}

.mp-editor:focus-within {
  border-color: #3a8a78;
  outline: 2px solid #3a8a78;
  outline-offset: -1px;
}

.mp-editor--fehler {
  border-color: #b4532f;
}

.mp-editor__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid #e4e7e2;
  background: #f5f3ee;
}

.mp-editor__leiste button {
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  cursor: pointer;
}

.mp-editor__leiste button:hover {
  background: #ffffff;
  border-color: #c5cbc6;
}

.mp-editor__leiste button[aria-pressed=true] {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.mp-editor__flaeche {
  min-height: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.6;
  outline: none;
}

.mp-editor__flaeche {
  position: relative;
}

.mp-editor__flaeche--leer::before {
  content: attr(data-platzhalter);
  position: absolute;
  top: 14px;
  right: 16px;
  left: 16px;
  color: #5b6560;
  white-space: pre-line;
  pointer-events: none;
}

.mp-editor__flaeche p {
  margin: 0 0 0.8em;
}

.mp-editor__flaeche h3 {
  margin: 1em 0 0.4em;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.mp-editor__flaeche ul, .mp-editor__flaeche ol {
  margin: 0 0 0.8em;
  padding-left: 1.4em;
}

.mp-editor__flaeche a {
  color: #2f6c5e;
  text-decoration: underline;
}

.mp-editor__flaeche table {
  width: 100%;
  margin: 0 0 0.8em;
  border-collapse: collapse;
  font-size: 17px;
}

.mp-editor__flaeche td {
  padding: 6px 8px;
  border: 1px solid #e4e7e2;
  vertical-align: top;
}

.mp-editor__flaeche hr {
  margin: 1.2em 0;
  border: 0;
  border-top: 1px solid #c5cbc6;
}

.mp-editor__flaeche .hervorhebung {
  margin: 0;
  padding: 0 14px 0.6em;
  background: #f5f3ee;
}

.mp-editor__flaeche :not(.hervorhebung) + .hervorhebung, .mp-editor__flaeche > .hervorhebung:first-child {
  padding-top: 12px;
}

.mp-editor__flaeche .hervorhebung:not(:has(+ .hervorhebung)) {
  margin-bottom: 0.8em;
  padding-bottom: 12px;
}

.mp-editor__flaeche ul.hervorhebung, .mp-editor__flaeche ol.hervorhebung {
  padding-left: calc(14px + 1.4em);
}

/* Stufe des Betriebs über dem Formular (kostenloser Eintrag, Ortsaktiv mit Kontingent) */
.mp-kosten {
  margin: 14px 0 0 32px;
  padding: 14px 16px;
  background: #f5f3ee;
  border-left: 4px solid #3a8a78;
}

.mp-kosten[hidden] {
  display: none;
}

.mp-stufe {
  margin: 0 0 28px;
  padding: 16px 20px;
  background: #e2ede9;
  border-left: 4px solid #3a8a78;
}

.mp-stufe--kurz {
  padding: 12px 16px;
  font-size: 17px;
}

.mp-stufe--kurz summary {
  cursor: pointer;
  line-height: 1.45;
}

.mp-stufe--kurz summary b {
  font-weight: 600;
}

.mp-stufe--kurz[open] summary {
  margin-bottom: 8px;
}

.mp-stufe p {
  margin: 0;
  line-height: 1.5;
}

.mp-stufe a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Art, die in der Stufe nicht möglich ist */
.mp-art--gesperrt {
  cursor: not-allowed;
  background: #f5f3ee;
  border-style: dashed;
}

.mp-art--gesperrt:hover {
  border-color: #c5cbc6;
}

.mp-art--gesperrt .mp-art__titel {
  color: #5b6560;
}

.mp-hinweis--block {
  display: block;
  margin: 0 0 16px;
}

/* Redaktion: Druckbilder je Ausgabe (blatt-bilder-pagecontent.html, js/oa-blattbilder.js) */
.blattbilder {
  margin-top: 24px;
}

.blattbilder__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1f2a26;
}

.blattbilder__kopf .mp-hinweis {
  flex: 1 1 100%;
  margin: 0;
}

.blattbilder__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bb;
}

.blattbilder__eintrag {
  display: grid;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid #e4e7e2;
}

.blattbilder__eintrag .t-meta {
  display: block;
}

.blattbilder__bilder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blattbilder__bilder li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blattbilder__abschluss {
  display: grid;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #e4e7e2;
}

.blattbilder__abschluss p {
  margin: 0;
}

.blattbilder__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.blattbilder__aufraeumen {
  display: grid;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid #e4e7e2;
}

.blattbilder__aufraeumen p, .blattbilder__aufraeumen h3 {
  margin: 0;
}

.blattbilder__druckliste {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 24px;
}

.blattbilder__druckliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.blattbilder__druckliste code {
  overflow-wrap: anywhere;
}

.blattbilder__druckliste .ist-geloescht code {
  color: #5b6560;
  text-decoration: line-through;
}

.blattbilder__druckliste .ist-genutzt code {
  color: #5b6560;
}

.pille--warnung {
  background: #f5f3ee;
  color: #5b6560;
}

/* Aufträge fürs Mitteilungsblatt (meldeportal-mitteilungsblatt-2026.html, meldeportal-anzeigenauftrag-2026.html, js/oa-auftraege.js) */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mp-abschnitt-titel {
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid #1f2a26;
}

.mp-auftrag-start {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.mp-auftrag-start p {
  margin: 0;
}

.mp-auftrag__daten {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 8px 24px;
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.5;
}

.mp-auftrag__daten dt {
  color: #5b6560;
}

.mp-auftrag__daten dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mp-auftrag__aktionen {
  gap: 12px;
}

.mp-auftrag__aktionen button.mehr {
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.mp-auftrag__aktionen button.mehr:hover {
  background: #1f2a26;
  color: #ffffff;
}

.mp-aktion {
  margin: 0;
}

.mp-aktion[open] {
  flex: 1 1 100%;
}

.mp-aktion > summary {
  list-style: none;
  cursor: pointer;
}

.mp-aktion > summary::-webkit-details-marker {
  display: none;
}

.mp-aktion[open] > summary {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.mp-aktion__inhalt {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 12px;
  padding: 16px 24px;
  background: #f5f3ee;
}

.mp-aktion__inhalt .mp-feld {
  width: 100%;
}

.mp-verzeichnis-vorschau {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #c5cbc6;
}

.mp-verzeichnis-vorschau img {
  flex: 0 0 auto;
  width: 64px;
  height: 40px;
  object-fit: contain;
}

.mp-verzeichnis-vorschau > div {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.mp-verzeichnis-vorschau .t-meta {
  display: block;
}

.mp-verzeichnis-vorschau__qr {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px dashed #c5cbc6;
  font-size: 11px;
  color: #5b6560;
}

.anzeigenauftrag {
  display: grid;
  gap: 12px;
}

.anzeigenauftrag h2 {
  margin-bottom: 0;
}

.anzeigenauftrag__wahl td:first-child, .anzeigenauftrag__wahl th:first-child {
  width: 2rem;
}

.anzeigenauftrag__wahl input[type=radio] {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: #2f6c5e;
}

.anzeigenauftrag__wahl label {
  cursor: pointer;
}

.anzeigenauftrag__seite {
  position: relative;
  display: block;
  width: 42px;
  height: calc(42px * 297 / 210);
  background: #f5f3ee;
  border: 1px solid #c5cbc6;
}

.anzeigenauftrag__flaeche {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--b) / 210 * 100%);
  height: calc(var(--h) / 297 * 100%);
  background: #3a8a78;
}

/* Zusammenfassung vor dem Bestellknopf – Anzeigenauftrag, Verzeichniseintrag, Ortsaktiv */
.mp-bestellsumme {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid #3a8a78;
  background: #e2ede9;
  font-size: 17px;
  line-height: 1.5;
  color: #1f2a26;
}

.mp-bestellsumme b {
  font-weight: 600;
}

.mp-absenden .mp-bestellsumme {
  flex-basis: 100%;
  margin: 0;
}

/* Ort auf der Karte im Meldeformular (oa_meldeformular.inc, js/oa-karte.js [data-kartenpunkt]) */
.kartenpunkt__info {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 4px solid #3a8a78;
  background: #e2ede9;
  font-size: 17px;
  line-height: 1.5;
  color: #1f2a26;
}

.kartenpunkt__suche {
  display: flex;
  gap: 10px;
  margin: 16px 0 10px;
}

.kartenpunkt__suche input {
  flex: 1 1 auto;
  min-width: 0;
}

.kartenpunkt__gps {
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0;
}

.kartenpunkt__gps label {
  flex: 0 0 auto;
  font-size: 17px;
  color: #5b6560;
}

.kartenpunkt__gps input {
  flex-basis: 150px;
}

.kartenpunkt__treffer {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  border: 1px solid #c5cbc6;
  background: #ffffff;
}

.kartenpunkt__treffer[hidden] {
  display: none;
}

.kartenpunkt__treffer li + li {
  border-top: 1px solid #e4e7e2;
}

.kartenpunkt__treffer button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  text-align: left;
  color: #1f2a26;
  cursor: pointer;
}

.kartenpunkt__treffer button:hover, .kartenpunkt__treffer button:focus-visible {
  background: #e2ede9;
}

.kartenpunkt__leer {
  padding: 10px 14px;
  font-size: 17px;
  color: #5b6560;
}

.kartenpunkt__leinwand {
  height: 340px;
  border: 1px solid #c5cbc6;
  background: #f5f3ee;
}

.kartenpunkt__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 4px solid #3a8a78;
  background: #e2ede9;
  font-size: 17px;
  line-height: 1.45;
}

.kartenpunkt .kartenpunkt__entfernen {
  font-weight: 700;
  color: #1f2a26;
}

/* Pin gesetzt: Haken und kräftigere Linie, damit klar ist, dass nichts mehr zu bestätigen ist */
.kartenpunkt__haken {
  display: none;
  flex: none;
  width: 18px;
  height: 18px;
  color: #2f6c5e;
}

.kartenpunkt__stand--gesetzt {
  border-left-color: #2f6c5e;
  font-weight: 600;
}

.kartenpunkt__stand--gesetzt .kartenpunkt__haken {
  display: block;
}

.kartenpunkt__stand > span {
  flex: 1 1 240px;
}

/* Liste der Orte (js/oa-karte.js): je Ort Bezeichnung und Koordinaten; ab zwei Orten Nummer (wie am Pin), ↑ ↓ ×,
   der gewählte Ort hervorgehoben – Karte, Suche und GPS setzen ihn */
.kartenpunkt__liste {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e4e7e2;
}

.kartenpunkt__ort {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e4e7e2;
}

.kartenpunkt__ort--nummer {
  padding: 10px 10px 10px 8px;
}

.kartenpunkt__ort--aktiv {
  background: #e2ede9;
}

.kartenpunkt__nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #1f2a26;
  cursor: pointer;
}

.kartenpunkt__ort--aktiv .kartenpunkt__nr {
  border-color: #b4532f;
  background: #b4532f;
  color: #ffffff;
}

.kartenpunkt__felder {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kartenpunkt__felder input {
  width: 100%;
}

.kartenpunkt__lage {
  font-size: 15px;
  color: #5b6560;
  overflow-wrap: anywhere;
}

.kartenpunkt__knoepfe {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kartenpunkt__knopf {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  cursor: pointer;
}

.kartenpunkt__knopf svg {
  width: 15px;
  height: 15px;
}

.kartenpunkt__knopf:hover:not(:disabled) {
  border-color: #2f6c5e;
  color: #2f6c5e;
}

.kartenpunkt__knopf:disabled {
  opacity: 0.35;
  cursor: default;
}

.kartenpunkt .kartenpunkt__neu {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: #2f6c5e;
}

.kartenpunkt .kartenpunkt__neu[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .kartenpunkt__ort--nummer {
    flex-wrap: wrap;
  }
  .kartenpunkt__ort--nummer .kartenpunkt__felder {
    flex-basis: calc(100% - 42px);
  }
  .kartenpunkt__ort--nummer .kartenpunkt__knoepfe {
    width: 100%;
    justify-content: flex-end;
  }
}
/* Mitteilungsblatt: Wahl unter dem Haken und Lightbox mit Ausgabe und Umfang (js/oa-meldeportal.js) */
.mp-blattstand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: -8px 0 20px 32px;
  font-size: 17px;
  font-weight: 600;
}

.mp-blattstand[hidden] {
  display: none;
}

.mp-blattstand .mehr--text {
  font-weight: 700;
  color: #2f6c5e;
}

.mp-blattwahl {
  width: min(600px, 100vw - 32px);
}

.mp-blattwahl .mp-auswahl {
  margin: 20px 0 0;
}

.mp-blattwahl .mp-feldfehler {
  margin-top: 10px;
}

.mp-blattwahl .mp-bild-hinweis {
  margin-top: 20px;
}

.mp-blattwahl__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e4e7e2;
}

/* Fehler-Zusammenfassung über dem Absende-Knopf (js/oa-meldeportal.js) */
.mp-fehlerliste {
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 2px solid #b4532f;
  border-left-width: 6px;
  background: rgba(180, 83, 47, 0.1);
  font-size: 17px;
  line-height: 1.5;
  color: #1f2a26;
}

.mp-fehlerliste[hidden] {
  display: none;
}

.mp-fehlerliste b {
  display: block;
  font-weight: 700;
  color: #b4532f;
}

.mp-fehlerliste ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.mp-fehlerliste button {
  padding: 4px 12px;
  border: 1px solid #b4532f;
  border-radius: 999px;
  background: #ffffff;
  color: #b4532f;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

.mp-fehlerliste button:hover, .mp-fehlerliste button:focus-visible {
  background: #b4532f;
  color: #ffffff;
}

/* Fehlende Pflichtangabe am Feld (js/oa-meldeportal.js): roter Rahmen, Meldung darunter */
.mp-formular :is(input, select, textarea, .mp-editor__flaeche) {
  scroll-margin-top: 140px;
}

.mp-feld--fehlt :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, .mp-editor) {
  border-color: #b4532f;
  box-shadow: 0 0 0 1px #b4532f;
  background-color: rgba(180, 83, 47, 0.04);
}

.mp-feld--fehlt > label, .mp-feld--fehlt > legend {
  color: #b4532f;
}

label.mp-haken.mp-feld--fehlt, .mp-feld--fehlt .mp-haken:has(input:invalid) {
  outline: 2px solid #b4532f;
  outline-offset: 4px;
  background: rgba(180, 83, 47, 0.06);
}

.mp-pflichtfehler {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  color: #b4532f;
  font-size: 17px;
  font-weight: 600;
}

.mp-pflichtfehler::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #b4532f;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* Absende-Leiste am Handy, Entwurf, Vorschau (js/oa-meldeportal.js) */
.mp-absendeleiste {
  display: none;
}

@media (max-width: 720px) {
  .mp-absendeleiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #c5cbc6;
  }
  .mp-absendeleiste[hidden] {
    display: none;
  }
  .mp-absendeleiste .knopf {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.mp-entwurf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 4px solid #3a8a78;
  background: #e2ede9;
}

.mp-entwurf p {
  flex: 1 1 280px;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

.mp-entwurf__knoepfe {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mp-vorschau {
  margin: auto;
  width: min(860px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  padding: 24px 28px 28px;
  border: 0;
  background: #ffffff;
  color: #1f2a26;
  overflow-y: auto;
}

.mp-vorschau::backdrop {
  background: rgba(31, 42, 38, 0.45);
}

.mp-vorschau__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mp-vorschau__kopf h2 {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.mp-vorschau__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 32px;
  margin-top: 20px;
}

.mp-vorschau__was {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6560;
}

.mp-vorschau .karte .bild, .mp-vorschau__leit {
  margin-bottom: 12px;
  overflow: hidden;
  background: #f5f3ee;
}

.mp-vorschau img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-vorschau__leit {
  aspect-ratio: 16/10;
}

.mp-vorschau .karte p {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: #5b6560;
}

.mp-vorschau__titel {
  margin: 8px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 350;
}

@media (max-width: 720px) {
  .mp-vorschau__raster {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Meine Meldungen: wartet auf Freigabe, Aktionen (meldeportal-meine-meldungen-2026.html) */
.mp-wartet {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-left: 4px solid #2f6c5e;
  background: #e2ede9;
}

.mp-wartet p {
  margin: 0 0 6px;
  line-height: 1.5;
}

.mp-wartet ul {
  margin: 0;
  padding-left: 20px;
}

.mp-wartet a {
  color: #2f6c5e;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-eintrag--wartet {
  padding-left: 14px;
  border-left: 4px solid #2f6c5e;
}

.mp-eintrag {
  scroll-margin-top: 90px;
}

.mp-eintrag__zurueck {
  margin-left: auto;
  color: #5b6560;
}

.mp-danke-buchung {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: #ffffff;
  border-left: 4px solid #3a8a78;
  color: #1f2a26;
}

/* Profil: Vollständigkeit (meldeportal-profil-2026.html) */
.mp-profilstand {
  margin: 0 0 28px;
  padding: 14px 18px;
  border-left: 4px solid #3a8a78;
  background: #e2ede9;
}

.mp-profilstand p {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.5;
}

.mp-profilstand a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-profilstand__balken {
  height: 6px;
  border-radius: 999px;
  background: #ffffff;
  overflow: hidden;
}

.mp-profilstand__balken span {
  display: block;
  height: 100%;
  background: #3a8a78;
}

/* Onlinepakete im Meldeportal (meldeportal-ortsaktiv-2026.html): Karten wie auf Werben */
.mp-abschnitt-titel--erst {
  margin-top: 0;
}

.mp-pakete {
  margin: 16px 0 12px;
}

@media (min-width: 721px) and (max-width: 1100px) {
  .mp-pakete {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Meine Meldungen: Suche (meldeportal-meine-meldungen-2026.html, js/oa-meldeportal.js) */
.mp-suche {
  position: relative;
  margin: 0 0 12px;
}

.mp-suche[hidden] {
  display: none;
}

.mp-suche svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: #5b6560;
  pointer-events: none;
}

.mp-suche input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 46px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 19px;
  color: #1f2a26;
}

.mp-suche input:focus {
  outline: 2px solid #3a8a78;
  outline-offset: 1px;
  border-color: #3a8a78;
}

.mp-suche__stand {
  margin: 0 0 16px;
  font-size: 17px;
  color: #5b6560;
}

.mp-suche__stand[hidden] {
  display: none;
}

.mp-liste > [data-suche-aus] {
  display: none;
}

/* Anzeigenauftrag: Schritte mit Nummer im Kreis (nicht mit Ausgabe-Nummern zu verwechseln) */
.schritt-titel {
  display: flex;
  align-items: center;
  gap: 12px;
}

.schritt-nr {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2f6c5e;
  color: #ffffff;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

/* Onlinepakete: Tarife Ortsaktiv / Gründungspartner als hinterlegte Kästen, der gewählte mit Akzentrahmen */
.ortsaktiv-tarife {
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-top: 0;
}

.ortsaktiv-tarife thead th {
  padding-bottom: 0;
  border-bottom: 0;
}

.ortsaktiv-tarife tbody td {
  padding: 18px 16px;
  border-bottom: 0;
  background: #f5f3ee;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.ortsaktiv-tarife tbody td:first-child {
  padding-left: 18px;
  border-left: 2px solid transparent;
}

.ortsaktiv-tarife tbody td:last-child {
  padding-right: 18px;
  border-right: 2px solid transparent;
  font-weight: 600;
}

.ortsaktiv-tarife tbody tr:has(input:checked) td {
  background: #e2ede9;
  border-color: #3a8a78;
}

.ortsaktiv-tarife tbody tr:has(input:checked) td:not(:first-child) {
  border-left-color: transparent;
}

.ortsaktiv-tarife tbody tr:has(input:checked) td:not(:last-child) {
  border-right-color: transparent;
}

.mp-nav__zahl {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #2f6c5e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.mp-freigabe {
  margin-bottom: 24px;
}

.mp-freigabe .mp-auftrag__daten {
  grid-template-columns: 9rem 1fr;
}

.mp-freigabe .mp-auftrag__daten a {
  color: #2f6c5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-freigabe-form {
  max-width: 700px;
}

.mp-freigabe-form .mp-teil[hidden] {
  display: none;
}

.mp-freigabe-form .mp-haken + input + .mp-haken {
  margin-top: 10px;
}

.mp-absenden button.mehr {
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.mp-absenden button.mehr:hover {
  background: #1f2a26;
  color: #ffffff;
}

.mp-freigabe-zeile .mp-eintrag__titel a {
  color: inherit;
  text-decoration: none;
}

.mp-freigabe-zeile .mp-eintrag__titel a:hover {
  color: #2f6c5e;
}

.mp-freigaben__alle > summary {
  list-style: none;
  cursor: pointer;
}

.mp-freigaben__alle > summary::-webkit-details-marker {
  display: none;
}

.mp-freigaben__alle > summary::after {
  content: " ▾";
  color: #5b6560;
}

.mp-freigaben__alle[open] > summary::after {
  content: " ▴";
}

.mp-freigaben__alle .mp-freigabe-zeile {
  padding: 14px 0;
}

.mp-freigaben__alle .mp-eintrag__titel {
  margin: 0;
  font-size: 19px;
}

/* Fotos im Text: Baustein im Editor (gleiche Zeilenregel wie .text-fotos) und Auswahl unter der Leiste */
.mp-fotos {
  position: relative;
  max-width: 700px;
  margin: 1em 0;
  user-select: none;
}

.mp-fotos__raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.mp-fotos__foto {
  grid-column: span 2;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #dfe3dd;
}

.mp-fotos__foto img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.mp-fotos__raster--rest2 > .mp-fotos__foto:nth-last-child(-n+2) {
  grid-column: span 3;
  aspect-ratio: 3/2;
}

.mp-fotos__raster--rest1 > .mp-fotos__foto:last-child {
  grid-column: 1/-1;
  aspect-ratio: 16/9;
}

.mp-fotos__foto--fehlt {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c5cbc6;
  background: #f5f3ee;
}

.mp-fotos__foto--fehlt::after {
  content: attr(data-text);
  padding: 0 8px;
  color: #5b6560;
  font-size: 15px;
  text-align: center;
}

.mp-fotos__knoepfe {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
}

.mp-fotos__knoepfe button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  cursor: pointer;
}
.mp-fotos__knoepfe button svg {
  width: 16px;
  height: 16px;
}
.mp-fotos__knoepfe button:hover {
  border-color: #1f2a26;
}

.mp-fotos:hover .mp-fotos__raster {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

.mp-fotowahl {
  padding: 12px 14px 14px;
  border-bottom: 1px solid #e4e7e2;
  background: #f5f3ee;
}

.mp-fotowahl__text {
  margin: 0 0 10px;
  font-size: 17px;
}

.mp-fotowahl__raster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mp-fotowahl__foto {
  position: relative;
  width: 96px;
  height: 96px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  background: #dfe3dd;
  cursor: pointer;
}
.mp-fotowahl__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-fotowahl__foto[aria-pressed=true] {
  border-color: #2f6c5e;
}
.mp-fotowahl__foto:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mp-fotowahl__foto:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

.mp-fotowahl__nr {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #2f6c5e;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}
.mp-fotowahl__nr:empty {
  display: none;
}

.mp-fotowahl .mp-fotowahl__neu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px dashed #c5cbc6;
  background: #ffffff;
  color: #2f6c5e;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
}
.mp-fotowahl .mp-fotowahl__neu svg {
  width: 24px;
  height: 24px;
}
.mp-fotowahl .mp-fotowahl__neu:hover:not(:disabled) {
  border-color: #2f6c5e;
}

.mp-fotowahl__meldung, .mp-fotowahl__info {
  margin: 10px 0 0;
}

.mp-fotowahl__meldung {
  color: #b4532f;
}

.mp-fotoleiste {
  padding: 14px;
  border: 1px solid #e4e7e2;
  background: #f5f3ee;
}

.mp-fotoleiste[hidden] {
  display: none;
}

.mp-fotoleiste .mp-datei-karte {
  gap: 8px;
  padding: 8px 10px;
}

.mp-fotoleiste .mp-datei-karte__kopf {
  flex-wrap: wrap;
  gap: 6px 12px;
}

.mp-fotoleiste .mp-datei-karte__name {
  flex: 1 1 110px;
}

.mp-fotoleiste .mp-datei-karte .mp-datei-karte__bild, .mp-fotoleiste .mp-datei-karte .mp-datei-karte__gespeichert {
  width: 72px;
  height: 48px;
}

.mp-fotoleiste .mp-nachweis {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.mp-fotoleiste .mp-nachweis[hidden] {
  display: none;
}

.mp-fotoleiste .mp-nachweis label {
  flex: none;
}

.mp-fotoleiste .mp-nachweis label .mp-hinweis {
  display: none;
}

.mp-fotoleiste .mp-nachweis input {
  flex: 1 1 auto;
  min-width: 0;
}

.mp-titelbild {
  margin-bottom: 28px;
}

.mp-titelbild[hidden] {
  display: none;
}

.mp-fotos__foto {
  position: relative;
}

.mp-fotos .mp-fotos__bild {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.mp-fotos .mp-fotos__bild:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: -2px;
}

.mp-fotos__copy {
  position: absolute;
  bottom: 6px;
  left: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

.mp-fotos .mp-fotos__foto-weg {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  cursor: pointer;
}
.mp-fotos .mp-fotos__foto-weg svg {
  width: 13px;
  height: 13px;
}
.mp-fotos .mp-fotos__foto-weg:hover {
  border-color: #b4532f;
  color: #b4532f;
}

.mp-fotos__knoepfe button:disabled {
  opacity: 0.35;
  cursor: default;
}

.mp-fotos__knoepfe button:disabled:hover {
  border-color: #c5cbc6;
}

.mp-fotonachweis {
  position: absolute;
  z-index: 3;
  right: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid #c5cbc6;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
}

.mp-fotonachweis[hidden] {
  display: none;
}

.mp-editor .mp-fotonachweis__bild {
  flex: none;
  margin: 0;
  width: 72px;
  height: 48px;
  object-fit: cover;
  background: #dfe3dd;
}

.mp-fotonachweis__feld {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}

.mp-editor .mp-einfuegen {
  position: absolute;
  z-index: 2;
  left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 6px;
  transform: translateY(-50%);
  border: 1px solid #2f6c5e;
  border-radius: 999px;
  background: #ffffff;
  color: #2f6c5e;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.mp-editor .mp-einfuegen svg {
  width: 14px;
  height: 14px;
}
.mp-editor .mp-einfuegen:hover {
  background: #2f6c5e;
  color: #ffffff;
}
.mp-editor .mp-einfuegen[hidden] {
  display: none;
}

.mp-fotowahl__skizze {
  max-width: 260px;
  margin-top: 12px;
}

.mp-fotowahl__skizze[hidden] {
  display: none;
}

.mp-fotowahl__skizze-text {
  display: block;
  margin-bottom: 6px;
  color: #5b6560;
  font-size: 15px;
}

.mp-fotowahl__skizze .mp-fotos__raster {
  gap: 3px;
}

.mp-feld .mp-fotomarke {
  flex: none;
  padding: 3px 10px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #f5f3ee;
  color: #5b6560;
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  cursor: default;
}
.mp-feld .mp-fotomarke[hidden] {
  display: none;
}
.mp-feld .mp-fotomarke:disabled {
  opacity: 1;
}
.mp-feld .mp-fotomarke--text {
  border-color: #2f6c5e;
  background: #ffffff;
  color: #2f6c5e;
  cursor: pointer;
}
.mp-feld .mp-fotomarke--text:hover {
  background: #2f6c5e;
  color: #ffffff;
}
.mp-feld .mp-fotomarke:focus-visible {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

.mp-fotos--blitz .mp-fotos__raster {
  outline: 3px solid #2f6c5e;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .mp-fotos--blitz .mp-fotos__raster {
    animation: mp-fotos-blitz 1.6s ease-out;
  }
}
@keyframes mp-fotos-blitz {
  0%, 60% {
    outline-color: #2f6c5e;
  }
  100% {
    outline-color: transparent;
  }
}
.mp-fotowahl__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.andruck-anzeige {
  position: relative;
  overflow: hidden;
  background: #f5f2ea;
  color: #161616;
}

.andruck-anzeige__streifen {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 8px;
}

.andruck-anzeige__streifen span:nth-child(4n+1) {
  background: #009fe3;
}

.andruck-anzeige__streifen span:nth-child(4n+2) {
  background: #e5007d;
}

.andruck-anzeige__streifen span:nth-child(4n+3) {
  background: #ffe500;
}

.andruck-anzeige__streifen span:nth-child(4n+4) {
  background: #161616;
}

.andruck-anzeige__streifen span:nth-child(n+5):nth-child(-n+8) {
  opacity: 0.55;
}

.andruck-anzeige__streifen span:nth-child(n+9) {
  opacity: 0.25;
}

.andruck-anzeige__bogen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: 64px 64px 56px;
}

.andruck-anzeige__schnitt {
  position: absolute;
  width: 22px;
  height: 22px;
}

.andruck-anzeige__schnitt::before, .andruck-anzeige__schnitt::after {
  content: "";
  position: absolute;
  background: #161616;
}

.andruck-anzeige__schnitt::before {
  width: 22px;
  height: 1px;
}

.andruck-anzeige__schnitt::after {
  width: 1px;
  height: 22px;
}

.andruck-anzeige__schnitt--ol {
  top: 18px;
  left: 18px;
}

.andruck-anzeige__schnitt--ol::before {
  top: 10px;
  left: -12px;
}

.andruck-anzeige__schnitt--ol::after {
  left: 10px;
  top: -12px;
}

.andruck-anzeige__schnitt--or {
  top: 18px;
  right: 18px;
}

.andruck-anzeige__schnitt--or::before {
  top: 10px;
  right: -12px;
}

.andruck-anzeige__schnitt--or::after {
  right: 10px;
  top: -12px;
}

.andruck-anzeige__schnitt--ul {
  bottom: 18px;
  left: 18px;
}

.andruck-anzeige__schnitt--ul::before {
  bottom: 10px;
  left: -12px;
}

.andruck-anzeige__schnitt--ul::after {
  left: 10px;
  bottom: -12px;
}

.andruck-anzeige__schnitt--ur {
  bottom: 18px;
  right: 18px;
}

.andruck-anzeige__schnitt--ur::before {
  bottom: 10px;
  right: -12px;
}

.andruck-anzeige__schnitt--ur::after {
  right: 10px;
  bottom: -12px;
}

.andruck-anzeige__passer {
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border: 1px solid #161616;
  border-radius: 50%;
}

.andruck-anzeige__passer::before, .andruck-anzeige__passer::after {
  content: "";
  position: absolute;
  background: #161616;
}

.andruck-anzeige__passer::before {
  left: -7px;
  right: -7px;
  top: 50%;
  height: 1px;
}

.andruck-anzeige__passer::after {
  top: -7px;
  bottom: -7px;
  left: 50%;
  width: 1px;
}

.andruck-anzeige__kicker {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #615d55;
}

.andruck-anzeige__kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  margin: -2px 12px 0 0;
  vertical-align: middle;
  background: #e5007d;
}

.andruck-anzeige__titel {
  margin: 0;
  max-width: 12ch;
  font-family: "Fraunces", Georgia, serif;
  font-size: 64px;
  font-weight: 330;
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.andruck-anzeige__text {
  margin: 28px 0 0;
  max-width: 34em;
  font-size: 19px;
  line-height: 1.6;
}

.andruck-anzeige__themen-titel {
  margin: 32px 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #615d55;
}

.andruck-anzeige__themen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.andruck-anzeige__themen li {
  padding: 7px 14px;
  border: 1.5px solid #161616;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.andruck-anzeige__rechts {
  display: flex;
  flex-direction: column;
}

.andruck-anzeige__fluss {
  display: grid;
  grid-template-columns: minmax(0, 150px) 56px minmax(0, 1fr);
  align-items: center;
  border-top: 2px solid #161616;
  padding-top: 28px;
}

.andruck-anzeige__quelle {
  padding: 18px 16px;
  border: 1.5px solid #161616;
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.15;
}

.andruck-anzeige__quelle small {
  display: block;
  margin-bottom: 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #615d55;
}

.andruck-anzeige__linien {
  width: 100%;
  height: 170px;
}

.andruck-anzeige__linien path {
  fill: none;
  stroke: #161616;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.andruck-anzeige__ziele {
  margin: 0;
  padding: 0;
  list-style: none;
}

.andruck-anzeige__ziel {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
}

.andruck-anzeige__ziel + .andruck-anzeige__ziel {
  border-top: 1px solid #d6cfbf;
}

.andruck-anzeige__ziel i {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
}

.andruck-anzeige__ziel strong {
  display: block;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
}

.andruck-anzeige__ziel span {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: #615d55;
}

.andruck-anzeige__ziel--online i {
  background: #e5007d;
}

.andruck-anzeige__ziel--blatt i {
  background: #009fe3;
}

.andruck-anzeige__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 32px;
}

.andruck-anzeige__knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  background: #161616;
  color: #f5f2ea !important;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: gap 0.2s;
}

.andruck-anzeige__knopf:hover {
  gap: 16px;
}

.andruck-anzeige__knopf:focus-visible {
  outline: 2px solid #e5007d;
  outline-offset: 3px;
}

.andruck-anzeige__nebenbei {
  margin: 0;
  font-size: 15px;
  color: #615d55;
}

.andruck-anzeige__nebenbei a {
  color: #161616;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.andruck-anzeige__stempel {
  align-self: flex-end;
  margin: 4px 16px 36px 0;
  padding: 12px 18px 10px;
  border: 2px solid #e5007d;
  border-radius: 6px;
  color: #e5007d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-7deg);
  mix-blend-mode: multiply;
}

.andruck-anzeige__stempel b {
  display: block;
  margin: 4px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}

.andruck-anzeige.wird-animiert .andruck-anzeige__titel {
  color: transparent;
  text-shadow: -14px -4px 0 #009fe3, 12px 6px 0 #e5007d, -4px 12px 0 #ffe500;
}

.andruck-anzeige.wird-animiert .andruck-anzeige__themen li,
.andruck-anzeige.wird-animiert .andruck-anzeige__ziel {
  opacity: 0;
  transform: translateY(10px);
}

.andruck-anzeige.wird-animiert .andruck-anzeige__linien path {
  stroke-dashoffset: 1;
}

.andruck-anzeige.wird-animiert .andruck-anzeige__stempel {
  opacity: 0;
  transform: rotate(-7deg) scale(1.6);
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__titel {
  animation: andruck-register 1.6s cubic-bezier(0.2, 0.7, 0.1, 1) 0.15s both;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li,
.andruck-anzeige.ist-sichtbar .andruck-anzeige__ziel {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.1, 1);
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(1) {
  transition-delay: 0.99s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(2) {
  transition-delay: 1.08s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(3) {
  transition-delay: 1.17s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(4) {
  transition-delay: 1.26s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(5) {
  transition-delay: 1.35s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(6) {
  transition-delay: 1.44s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(7) {
  transition-delay: 1.53s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(8) {
  transition-delay: 1.62s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(9) {
  transition-delay: 1.71s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(10) {
  transition-delay: 1.8s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(11) {
  transition-delay: 1.89s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__themen li:nth-child(12) {
  transition-delay: 1.98s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__linien path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__linien path:nth-child(2) {
  transition-delay: 0.85s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__ziel {
  transition-delay: 1.3s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__ziel + .andruck-anzeige__ziel {
  transition-delay: 1.45s;
}

.andruck-anzeige.ist-sichtbar .andruck-anzeige__stempel {
  animation: andruck-stempeln 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 2s both;
}

@keyframes andruck-register {
  0% {
    color: transparent;
    text-shadow: -14px -4px 0 #009fe3, 12px 6px 0 #e5007d, -4px 12px 0 #ffe500;
  }
  55% {
    color: transparent;
  }
  100% {
    color: #161616;
    text-shadow: 0 0 0 #009fe3, 0 0 0 #e5007d, 0 0 0 #ffe500;
  }
}
@keyframes andruck-stempeln {
  0% {
    opacity: 0;
    transform: rotate(-7deg) scale(1.6);
  }
  100% {
    opacity: 1;
    transform: rotate(-7deg) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .andruck-anzeige.wird-animiert .andruck-anzeige__titel {
    color: #161616;
    text-shadow: none;
    animation: none;
  }
  .andruck-anzeige.wird-animiert .andruck-anzeige__themen li,
  .andruck-anzeige.wird-animiert .andruck-anzeige__ziel {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .andruck-anzeige.wird-animiert .andruck-anzeige__linien path {
    stroke-dashoffset: 0;
    transition: none;
  }
  .andruck-anzeige.wird-animiert .andruck-anzeige__stempel {
    opacity: 1;
    transform: rotate(-7deg);
    animation: none;
  }
  .andruck-anzeige__knopf {
    transition: none;
  }
}
@view-transition {
  navigation: auto;
}
.beitrag-bild .bild {
  view-transition-name: oa-beitrag-bild;
}

.beitrag-kopf__titel {
  view-transition-name: oa-beitrag-titel;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.2s;
}

::view-transition-group(oa-beitrag-bild), ::view-transition-group(oa-beitrag-titel) {
  animation-duration: 0.38s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(oa-beitrag-bild), ::view-transition-new(oa-beitrag-bild) {
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}
/* ---- Leiste: volle Breite, scrollt mit (nicht klebend) ---- */
.hinweis {
  position: relative;
}

.hinweis--warnung {
  background: #a3221b;
  color: #ffffff;
}

.hinweis--warnung + .hinweis--warnung {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.hinweis--hinweis {
  background: #f5f3ee;
  color: #1f2a26;
  border-bottom: 1px solid #e4e7e2;
}

.hinweis__innen {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.hinweis__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.hinweis--hinweis .hinweis__icon, .hinweis--hinweis .hinweis__stufe {
  color: #2f6c5e;
}

.hinweis__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
}

.hinweis__stufe {
  font-weight: 700;
}

.hinweis__link {
  color: inherit;
  font-weight: 600;
  outline: none;
}

.hinweis__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hinweis__link:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.hinweis__mehr {
  white-space: nowrap;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hinweis--klickbar:hover .hinweis__mehr {
  text-decoration-thickness: 2px;
}

.hinweis--hinweis .hinweis__mehr {
  color: #2f6c5e;
}

.hinweise--ort .hinweis__ort {
  display: none;
}

.hinweis__zu {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.hinweis__zu svg {
  width: 16px;
  height: 16px;
}

.hinweis--warnung .hinweis__zu:hover {
  background: rgba(255, 255, 255, 0.16);
}

.hinweis--hinweis .hinweis__zu:hover {
  background: #e2ede9;
}

.hinweis__zu:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -6px;
}

.hinweise__weitere-zeile {
  background: #f5f3ee;
  border-bottom: 1px solid #e4e7e2;
}

.hinweise__weitere {
  padding: 8px 0;
  border: 0;
  background: none;
  color: #2f6c5e;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.hinweise__weitere:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-ort-gemerkt] .hinweise:not(.hinweise--bereit) .hinweis:not([data-orte~=Uebergreifend]) {
  display: none;
}

/* ---- Hinweis-Seite ---- */
.hinweis-seite {
  padding: 36px 0 104px;
}

.hinweis-seite__innen {
  max-width: 700px;
}

.hinweis-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 14px 20px;
  font-size: 17px;
  line-height: 1.4;
}

.hinweis-band--warnung {
  background: #a3221b;
  color: #ffffff;
}

.hinweis-band--hinweis {
  background: #f5f3ee;
  color: #2f6c5e;
}

.hinweis-band--beendet {
  background: #f5f3ee;
  color: #5b6560;
}

.hinweis-band__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.hinweis-band__stufe {
  font-weight: 700;
}

.hinweis-band__stand {
  margin-left: auto;
}

.hinweis-seite__beendet {
  margin: 16px 0 0;
}

.hinweis-seite__titel {
  margin: 28px 0 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hinweis-verhalten {
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 4px solid #a3221b;
  background: #f5f3ee;
  font-size: 19px;
  line-height: 1.6;
}

.hinweis-seite--hinweis .hinweis-verhalten {
  border-left-color: #3a8a78;
}

.hinweis-verhalten__titel {
  margin: 0 0 8px;
}

.hinweis-seite--warnung .hinweis-verhalten__titel {
  color: #a3221b;
}

.hinweis-verhalten > :last-child {
  margin-bottom: 0;
}

.hinweis-verhalten p {
  margin: 0 0 0.7em;
}

.hinweis-verhalten ul, .hinweis-verhalten ol {
  margin: 0 0 0.7em;
  padding-left: 1.2em;
}

.hinweis-seite .beitrag-text {
  margin-top: 32px;
}

.hinweis-fakten {
  margin: 36px 0 0;
  border-top: 1px solid #e4e7e2;
}

.hinweis-fakten div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 1px solid #e4e7e2;
}

.hinweis-fakten dt {
  color: #5b6560;
  font-size: 15px;
}

.hinweis-fakten dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.hinweis-fakten a {
  color: #2f6c5e;
  font-weight: 600;
}

.hinweis-seite__amtlich {
  margin: 28px 0 0;
  color: #5b6560;
  font-size: 15px;
  line-height: 1.5;
}

.hinweis-seite__amtlich a {
  color: #2f6c5e;
}

.hinweis-seite__zurueck {
  margin-top: 32px;
}

/* ---- Lightbox: weiße Karte mittig über der abgedunkelten Seite, am Handy ein Blatt von unten ---- */
.abdunkler--hinweis {
  z-index: 60;
}

.hinweis-dialog {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
}

.hinweis-dialog[hidden] {
  display: none;
}

.hinweis-dialog__karte {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20, 30, 26, 0.18);
  animation: oa-panel-rein 0.2s ease-out;
}

.hinweis-dialog__kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: 12px 12px 0;
}

.hinweis-dialog__koerper {
  padding: 0 32px 28px;
  margin-top: -24px;
}

.hinweis-dialog .hinweis-band {
  margin-right: 44px;
}

.hinweis-dialog .hinweis-seite__titel {
  margin-top: 24px;
  font-size: 28px;
}

.hinweis-dialog .beitrag-text {
  margin-top: 24px;
  font-size: 19px;
}

.hinweis-dialog .hinweis-verhalten {
  margin-top: 24px;
}

.hinweis-dialog .hinweis-fakten {
  margin-top: 28px;
}

.hinweis-dialog .beitrag-fuss {
  margin-top: 28px;
}

@media (max-width: 720px) {
  .hinweis-dialog {
    place-items: end stretch;
    padding: 0;
  }
  .hinweis-dialog__karte {
    max-width: none;
    max-height: 88vh;
    border-radius: 10px 10px 0 0;
    animation-name: oa-blatt-rein;
  }
  .hinweis-dialog__koerper {
    padding: 0 16px 24px;
  }
  .hinweis-dialog .hinweis-seite__titel {
    font-size: 22px;
  }
  .hinweis__text {
    font-size: 15px;
  }
  .hinweis-band__stand {
    flex-basis: 100%;
    margin-left: 0;
  }
  .hinweis-seite__titel {
    font-size: 26px;
  }
  .hinweis-fakten div {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ---- Begrüßung ---- */
.einstieg {
  padding: 72px 0 0;
  text-align: center;
}

.einstieg__ort {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2f6c5e;
}

.einstieg__gruss {
  max-width: 760px;
  margin: 12px auto 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 64px;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.einstieg__name {
  color: #2f6c5e;
}

.einstieg__unter {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 19px;
  line-height: 1.5;
  color: #5b6560;
  text-wrap: pretty;
}

.einstieg__unter strong {
  font-weight: 600;
  color: #1f2a26;
}

.einstieg__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.einstieg__anpassen {
  background: #ffffff;
  cursor: pointer;
}

.einstieg__anpassen[hidden] {
  display: none;
}

.einstieg__anpassen svg {
  width: 16px;
  height: 16px;
}

/* ---- Ortsbild (.einstieg--bild, gesetzt vom Skript in oa_einstieg.inc) ----
   Foto über die Blattbreite, Begrüßung dunkel auf einem Verlauf im Ton des Seitenhintergrunds, „Neu von …“ darunter auf Weiß. Klick aufs Bild öffnet es ganz
   (Lightbox in js/oa-einstieg.js). Ausschnitt je Ort über --ortsbild-pos bzw. --ortsbild-pos-handy. */
.einstieg__bild {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #ebe7df;
}

.einstieg__bild[hidden] {
  display: none;
}

.einstieg__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ortsbild-pos, 50% 50%);
  transition: opacity 0.3s ease;
}

.einstieg__bild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(235, 231, 223, 0.94) 0%, rgba(235, 231, 223, 0.82) 32%, rgba(235, 231, 223, 0.3) 58%, rgba(235, 231, 223, 0) 75%), linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 20%);
  pointer-events: none;
}

.einstieg__bild--wechsel img {
  opacity: 0;
}

.einstieg__bild-knopf {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.einstieg__bild-knopf:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -6px;
}

.einstieg__nachweis {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.einstieg--bild {
  position: relative;
  padding-top: 0;
}
.einstieg--bild .einstieg__bild {
  width: 100%;
  aspect-ratio: 2.2;
  max-height: 620px;
}
.einstieg--bild .einstieg__text {
  position: absolute;
  top: clamp(32px, 5vw, 72px);
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 16px;
  pointer-events: none;
}
.einstieg--bild .einstieg__text :is(a, button) {
  pointer-events: auto;
}
.einstieg--bild .einstieg__ort {
  color: rgba(31, 42, 38, 0.8);
}
.einstieg--bild .einstieg__gruss, .einstieg--bild .einstieg__name, .einstieg--bild .einstieg__unter, .einstieg--bild .einstieg__unter strong, .einstieg--bild .einstieg__unter a {
  color: #1f2a26;
}
.einstieg--bild .einstieg__knoepfe {
  margin-top: 32px;
}
.einstieg--bild .einstieg__anpassen {
  border-color: #1f2a26;
  background: #1f2a26;
  color: #ffffff;
}
.einstieg--bild .neu-von {
  margin-top: 32px;
}

/* ---- Neu von … ---- */
.neu-von {
  margin-top: 48px;
}

.neu-von__kopf {
  margin: 0 0 12px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6560;
}

.neu-von__liste {
  list-style: none;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  min-width: 0;
}

.neu-von__eintrag {
  flex: 0 0 92px;
  scroll-snap-align: start;
}

.neu-von__liste.wisch--rechts {
  mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
}

.neu-von__liste.wisch--links {
  mask-image: linear-gradient(to right, transparent, black 56px);
}

.neu-von__liste.wisch--links.wisch--rechts {
  mask-image: linear-gradient(to right, transparent, black 56px, black calc(100% - 56px), transparent);
}

.wisch-rahmen--rund .wisch-pfeil {
  top: calc(4px + 3px + 2px + 72px / 2);
  bottom: auto;
  margin-top: -16px;
}

.neu-von__eintrag > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.neu-von__rund {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 1px #e4e7e2;
  transition: transform 0.25s ease;
}

.neu-von__rund > img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.neu-von__rund > img.neu-von__logo {
  object-fit: contain;
  padding: 10px;
}

.neu-von__kuerzel {
  font-size: 22px;
  font-weight: 600;
  color: #2f6c5e;
}

.neu-von__rund:has(.neu-von__kuerzel) {
  background: #e2ede9;
  box-shadow: none;
}

.ist-neu .neu-von__rund {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #3a8a78;
}

.neu-von__zahl {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #2f6c5e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  box-shadow: 0 0 0 2px #ffffff;
}

.neu-von__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.neu-von__anzeige {
  margin-top: -4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6560;
}

.neu-von__eintrag > a:hover .neu-von__rund {
  transform: translateY(-2px);
}

.neu-von__eintrag > a:hover .neu-von__name {
  color: #2f6c5e;
}

/* Erstes Band direkt unter dem Einstieg */
.einstieg + .band, .einstieg + .ich-dialog + .band {
  padding-top: 72px;
}

/* ---- Werbeplatz quer zwischen den Bändern ---- */
.werbeplatz-quer {
  padding-bottom: 104px;
}

:is(.abschnitt--kalk, .abschnitt--wald) + .werbeplatz-quer {
  padding-top: 104px;
}

.werbeplatz--quer {
  position: static;
}

.werbeplatz--quer .werbeplatz__flaeche {
  aspect-ratio: auto;
  height: 250px;
}

.werbeplatz--quer .werbeplatz__anzeige {
  max-width: none;
  text-align: center;
}

.werbeplatz--quer .werbeplatz__anzeige img {
  aspect-ratio: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 250px;
  margin: 0 auto;
  object-fit: contain;
}

.werbeplatz--quer .werbeplatz__svg {
  display: block;
  width: 100%;
  max-width: 970px;
  aspect-ratio: 970/250;
  margin: 0 auto;
}

.werbeplatz--quer .werbeplatz__anzeige .werbeplatz__svg--klein {
  display: none;
  width: 100%;
  max-width: 400px;
  height: auto;
  max-height: none;
  aspect-ratio: 320/400;
  margin: 0 auto;
}

.werbeplatz__eigen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid #e4e7e2;
  border-bottom: 1px solid #e4e7e2;
  color: #1f2a26;
}

.werbeplatz__eigen-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.werbeplatz__eigen .werbeplatz__label {
  color: #2f6c5e;
}

.werbeplatz__eigen-titel {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.werbeplatz__eigen-unter {
  font-size: 17px;
  line-height: 1.45;
  color: #5b6560;
}

.werbeplatz__eigen:hover .mehr {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

/* ---- Lightbox „Mein ortsaktuell“ ---- */
.ich-dialog {
  width: min(560px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20, 30, 26, 0.18);
  color: #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
  text-align: left;
}

.ich-dialog, .ich-dialog * {
  box-sizing: border-box;
}

.ich-dialog::backdrop {
  background: rgba(31, 42, 38, 0.45);
}

.ich-dialog form {
  position: relative;
  padding: 32px;
}

.ich-dialog h2 {
  margin: 0 0 4px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  font-weight: 350;
}

.ich-dialog__unter {
  margin: 0 0 24px;
  color: #5b6560;
  font-size: 17px;
}

.ich-dialog__zu {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #1f2a26;
  cursor: pointer;
}

.ich-dialog__zu svg {
  width: 18px;
  height: 18px;
}

.ich-dialog__zu:hover {
  background: #f5f3ee;
}

.ich-dialog fieldset {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.ich-dialog legend, .ich-dialog__feld {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.ich-dialog__feld span {
  font-weight: 400;
  color: #5b6560;
}

.ich-dialog input[type=text] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #c5cbc6;
  border-radius: 10px;
  font: inherit;
  font-size: 17px;
  color: #1f2a26;
}

.ich-dialog input[type=text]:focus {
  outline: 2px solid #3a8a78;
  outline-offset: 0;
  border-color: transparent;
}

.ich-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ich-wahl input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ich-wahl label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ich-wahl label svg {
  display: none;
  width: 14px;
  height: 14px;
}

.ich-wahl input:checked + label {
  background: #2f6c5e;
  border-color: #2f6c5e;
  color: #ffffff;
}

.ich-wahl input:checked + label svg {
  display: block;
}

.ich-wahl input:focus-visible + label {
  outline: 2px solid #3a8a78;
  outline-offset: 2px;
}

.ich-dialog__hinweis {
  display: flex;
  gap: 8px;
  margin: 24px 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f5f3ee;
  font-size: 15px;
  color: #5b6560;
}

.ich-dialog__hinweis svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.ich-dialog__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ich-dialog__fuss .knopf {
  cursor: pointer;
}

.ich-dialog__vergessen {
  padding: 0;
  border: 0;
  background: none;
  color: #5b6560;
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- Tablet ---- */
@media (max-width: 1180px) {
  .einstieg__gruss {
    font-size: 52px;
  }
  .einstieg--bild .einstieg__bild {
    aspect-ratio: 1.6;
  }
}
/* ---- Handy ---- */
@media (max-width: 720px) {
  .einstieg {
    padding-top: 32px;
  }
  .einstieg--bild {
    padding-top: 0;
  }
  .einstieg--bild .einstieg__bild {
    aspect-ratio: 0.8;
    max-height: none;
  }
  .einstieg__bild img {
    object-position: var(--ortsbild-pos-handy, var(--ortsbild-pos, 50% 50%));
  }
  .einstieg--bild .einstieg__text {
    top: 32px;
  }
  .einstieg__nachweis {
    right: 12px;
    bottom: 8px;
    font-size: 14px;
  }
  .einstieg__gruss {
    font-size: 38px;
  }
  .einstieg__unter {
    font-size: 17px;
  }
  .neu-von {
    margin-top: 32px;
  }
  .neu-von__kopf {
    margin-bottom: 8px;
  }
  .neu-von__liste {
    width: auto;
    max-width: none;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
  }
  .einstieg + .band, .einstieg + .ich-dialog + .band {
    padding-top: 48px;
  }
  .werbeplatz-quer {
    padding-bottom: 64px;
  }
  :is(.abschnitt--kalk, .abschnitt--wald) + .werbeplatz-quer {
    padding-top: 64px;
  }
  .werbeplatz--quer .werbeplatz__flaeche {
    height: 120px;
  }
  .werbeplatz--quer .werbeplatz__svg--gross {
    display: none;
  }
  .werbeplatz--quer .werbeplatz__anzeige .werbeplatz__svg--klein {
    display: block;
  }
  .werbeplatz--quer .werbeplatz__mobilbild img {
    max-width: 400px;
    max-height: none;
  }
  .werbeplatz__eigen {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .werbeplatz__eigen-titel {
    font-size: 22px;
  }
  .ich-dialog form {
    padding: 24px 16px;
  }
  .ich-dialog h2 {
    font-size: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .neu-von__rund, .einstieg__bild img {
    transition: none;
  }
}
/* ---- Baustein ---- */
.st {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.st__link {
  color: inherit;
  text-decoration: none;
}

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

.st__link:focus-visible {
  outline: none;
}

.st:has(.st__link:focus-visible) {
  outline: 2px solid #3a8a78;
  outline-offset: 4px;
}

.st:hover .bild img {
  transform: scale(1.035);
}

.st__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.st__titel {
  margin: 8px 0 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.st__anriss {
  margin: 12px 0 0;
  color: #5b6560;
  font-size: 17px;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-wrap: pretty;
}

.st__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(31, 42, 38, 0.09);
}

.st__text > :nth-last-child(2) {
  margin-bottom: 16px;
}

.st__fuss .t-meta {
  margin: 0;
  min-width: 0;
}

.st__datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #b4532f;
}

.st__datum b {
  font-family: "Fraunces", Georgia, serif;
  font-size: 34px;
  font-weight: 350;
  line-height: 1;
}

.st__datum span {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.st:has(.status-pille--abgesagt) .u {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: #5b6560;
}

/* ---- Fahne „Merken“ (js/oa-merken.js) ---- */
.merken {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -6px -10px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #5b6560;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.merken svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill 0.2s;
}

.merken:hover {
  color: #2f6c5e;
  background: #e2ede9;
}

.merken[aria-pressed=true] {
  color: #2f6c5e;
}

.merken[aria-pressed=true] svg {
  fill: currentColor;
}

.verein__knoepfe .merken {
  margin: 0;
  width: 44px;
  height: 44px;
}

.vereine-raster--kacheln .verein__knoepfe .merken {
  width: 34px;
  height: 34px;
}

.vk-knopf[data-merken][aria-pressed=true] {
  color: #2f6c5e !important;
  border-color: #2f6c5e;
}

.vk-knopf[data-merken] svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.vk-knopf[data-merken][aria-pressed=true] svg {
  fill: currentColor;
}

.vk-knopf[data-merken]:hover {
  color: #ffffff !important;
}

/* ---- Seite /gemerkt: Beiträge & Termine, dann Profile ---- */
.gemerkt-kopf {
  margin: 0 0 24px;
  padding-top: 12px;
  border-top: 1px solid #1f2a26;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.gemerkt-liste .staffel__karten + .gemerkt-kopf {
  margin-top: 64px;
}

.st__bild--logo {
  display: grid;
  place-items: center;
  background: #f5f3ee;
}

.st__bild--logo img {
  width: 46%;
  height: 70%;
  object-fit: contain;
}

/* ---- Aufmacher ---- */
.st--auf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  background: #f5f3ee;
}

.abschnitt--kalk .st--auf {
  background: #ffffff;
}

.st--auf .st__text {
  padding: 48px;
}

.st--auf .st__titel {
  margin-top: 12px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 38px;
  font-weight: 350;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.st--auf .st__anriss {
  margin-top: 16px;
  color: #1f2a26;
  font-size: 19px;
}

.st--auf .st__text > :nth-last-child(2) {
  margin-bottom: 24px;
}

.st--auf .st__bild {
  aspect-ratio: 1.4;
}

.st--auf.st--ohne-bild {
  grid-template-columns: minmax(0, 1fr);
}

.st--auf.st--ohne-bild .st__text {
  max-width: 880px;
}

.st--auf.st--termin {
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.05fr);
}

.st--auf.st--termin.st--ohne-bild {
  grid-template-columns: 88px minmax(0, 1fr);
}

.st--auf.st--termin .st__text {
  padding-left: 24px;
}

.st--auf .st__datum {
  justify-content: center;
  padding-left: 24px;
}

.st--auf .st__datum b {
  font-size: 60px;
}

.st--auf .st__datum span {
  margin-top: 6px;
  font-size: 14px;
}

/* ---- Drei kleine nebeneinander, senkrechte Linien dazwischen ---- */
.band-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
}

.st--klein {
  flex-direction: row;
  gap: 16px;
  padding: 0 24px;
  border-left: 1px solid #e4e7e2;
}

.st--klein:first-child {
  padding-left: 0;
  border-left: 0;
}

.st--klein:last-child {
  padding-right: 0;
}

.st--klein .st__titel {
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.st--klein .st__anriss {
  display: none;
}

.st--klein .st__bild {
  flex: 0 0 96px;
  align-self: flex-start;
  height: 96px;
}

.st--klein.st--termin .st__bild {
  display: none;
}

.st--klein .st__datum {
  flex: 0 0 52px;
  align-self: flex-start;
}

/* ---- Bildkarte und Textspalte: Bild oben ---- */
:is(.st--karte, .st--text) .st__bild {
  order: -1;
  aspect-ratio: 3/2;
  margin-bottom: 16px;
}

:is(.st--karte, .st--text).st--termin {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 12px;
}

:is(.st--karte, .st--text).st--termin .st__bild {
  grid-column: 1/-1;
  grid-row: 1;
}

:is(.st--karte, .st--text).st--termin .st__datum {
  grid-row: 2;
  justify-content: flex-start;
}

:is(.st--karte, .st--text).st--termin .st__text {
  grid-row: 2;
}

.st--text .st__titel {
  font-size: 22px;
  line-height: 1.3;
}

.st--text .st__anriss {
  -webkit-line-clamp: 4;
  font-size: 17px;
}

/* ---- Querbeitrag ---- */
.st--quer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

.st--quer .st__titel {
  font-size: 30px;
  line-height: 1.18;
  text-wrap: balance;
}

.st--quer .st__anriss {
  -webkit-line-clamp: 4;
  font-size: 19px;
}

.st--quer .st__bild {
  aspect-ratio: 3/2;
}

.st--quer.st--ohne-bild {
  grid-template-columns: minmax(0, 1fr);
}

.st--quer.st--ohne-bild .st__text {
  max-width: 880px;
}

.st--quer.st--termin {
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 12px;
}

.st--quer.st--termin .st__bild {
  margin-left: 20px;
}

.st--quer.st--termin.st--ohne-bild {
  grid-template-columns: 52px minmax(0, 1fr);
}

/* ---- Titelzeile: kleines Bild links ---- */
.st--titel {
  flex-direction: row;
  gap: 16px;
}

.st--titel .st__titel {
  font-size: 19px;
  line-height: 1.3;
}

.st--titel .st__anriss {
  display: none;
}

.st--titel .st__bild {
  order: -1;
  flex: 0 0 96px;
  align-self: flex-start;
  aspect-ratio: 4/3;
}

.st--titel.st--termin {
  gap: 12px;
}

.st--titel.st--termin .st__bild {
  display: none;
}

.st--titel .st__datum {
  flex: 0 0 52px;
  align-self: flex-start;
}

/* ---- Liste: Kopf, Stufen, Gruppen ---- */
.staffel__vorrat {
  display: none;
}

.staffel__fuss.ist-weg {
  display: none;
}

[data-staffel]:not([data-staffel-bereit]) {
  opacity: 0;
  animation: staffel-zeigen 0s 1.5s forwards;
}

@keyframes staffel-zeigen {
  to {
    opacity: 1;
  }
}
.staffel-sitzungen {
  margin-top: 48px;
}

.staffel-sitzungen .seitenspalte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
}

.staffel-sitzungen .seitenspalte__titel {
  grid-column: 1/-1;
}

.staffel-sitzungen .termin-zeile {
  margin-bottom: 16px;
}

.staffel__stufe {
  margin-top: 72px;
}

.staffel__stufe--monat + .staffel__stufe--monat {
  margin-top: 48px;
}

[data-staffel-modus=monat] > .staffel__stufe:first-child {
  margin-top: 0;
}

.staffel__stufe.staffel__stufe--oben {
  margin-top: 0;
}

.staffel__titel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid #3a8a78;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.staffel__zahl {
  font-weight: 500;
  letter-spacing: 0;
  color: #5b6560;
}

[data-staffel]:not([data-staffel-modus]) > .staffel__stufe > .staffel__titel {
  position: relative;
  width: fit-content;
  margin-left: -40px;
  padding: 11px 40px 11px 40px;
  border-bottom: 0;
  background: #2f6c5e;
  color: #ffffff;
}
[data-staffel]:not([data-staffel-modus]) > .staffel__stufe > .staffel__titel .staffel__zahl {
  color: #ffffff;
}
[data-staffel]:not([data-staffel-modus]) > .staffel__stufe > .staffel__titel::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 6px;
  right: 0;
  height: 6px;
  background: linear-gradient(to right, rgba(20, 30, 26, 0.16) 40%, transparent);
}

@media (min-width: 1181px) {
  [data-staffel]:not([data-staffel-modus]) > .staffel__stufe > .staffel__titel {
    margin-left: calc(-1 * (clamp(64px, 7vw, 128px) + 16px));
    padding-left: calc(clamp(64px, 7vw, 128px) + 16px);
  }
  [data-staffel]:not([data-staffel-modus]) > .staffel__stufe > .staffel__titel::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 16px;
    height: 12px;
    background: #1d4a3f;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
}
.staffel__stufe > :not(.staffel__titel) + * {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #e4e7e2;
}

.staffel__karten, .staffel__texte, .staffel__titel-liste {
  display: grid;
  grid-template-columns: calc(calc((100% - 96px - 2px) / 3) + 24px) calc(calc((100% - 96px - 2px) / 3) + 48px + 1px) minmax(0, 1fr);
}

.staffel__texte--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.staffel__karten, .staffel__texte, .staffel__titel-liste) > .st {
  padding: 0 24px 24px;
  border-left: 1px solid #e4e7e2;
}

:is(.staffel__karten, .staffel__texte, .staffel__titel-liste) > .st:nth-child(3n+1) {
  padding-left: 0;
  border-left: 0;
}

:is(.staffel__karten, .staffel__texte, .staffel__titel-liste) > .st:nth-child(3n) {
  padding-right: 0;
}

:is(.staffel__karten, .staffel__texte, .staffel__titel-liste) > .st:nth-child(n+4) {
  padding-top: 24px;
  border-top: 1px solid #e4e7e2;
}

.staffel__texte--2 > .st:nth-child(n) {
  padding: 0 24px 24px;
  border-left: 1px solid #e4e7e2;
  border-top: 0;
}

.staffel__texte--2 > .st:first-child {
  padding-left: 0;
  border-left: 0;
}

.staffel__texte--2 > .st:last-child {
  padding-right: 0;
}

/* ---- Tablet ---- */
@media (max-width: 1180px) {
  .st--auf .st__text {
    padding: 32px;
  }
  .st--auf .st__titel {
    font-size: 32px;
  }
  .st--klein {
    padding: 0 16px;
    gap: 12px;
  }
  .st--klein .st__bild {
    flex-basis: 80px;
    height: 80px;
  }
  .st--quer {
    gap: 24px;
  }
  .st--quer .st__titel {
    font-size: 26px;
  }
  .staffel-sitzungen .seitenspalte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .staffel__karten, .staffel__texte, .staffel__titel-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.staffel__karten, .staffel__texte, .staffel__titel-liste) > .st:nth-child(n) {
    padding: 24px 0 24px 24px;
    border-left: 1px solid #e4e7e2;
    border-top: 1px solid #e4e7e2;
  }
  :is(.staffel__karten, .staffel__texte, .staffel__titel-liste) > .st:nth-child(2n+1) {
    padding-left: 0;
    padding-right: 24px;
    border-left: 0;
  }
  :is(.staffel__karten, .staffel__texte, .staffel__titel-liste) > .st:nth-child(-n+2) {
    padding-top: 0;
    border-top: 0;
  }
}
/* ---- Handy: Bild über dem Aufmacher, kleine wischbar, Listen einspaltig ---- */
@media (max-width: 720px) {
  .st--auf, .st--auf.st--ohne-bild {
    display: flex;
    flex-direction: column;
  }
  .st--auf .st__bild {
    order: -1;
  }
  .st--auf .st__text {
    padding: 20px 16px 16px;
  }
  .st--auf .st__titel {
    font-size: 28px;
  }
  .st--auf .st__anriss {
    font-size: 17px;
  }
  .st--auf.st--termin, .st--auf.st--termin.st--ohne-bild {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas: "bild bild" "datum text";
  }
  .st--auf.st--termin .st__bild {
    grid-area: bild;
  }
  .st--auf.st--termin .st__datum {
    grid-area: datum;
    justify-content: flex-start;
    padding: 20px 0 0 16px;
  }
  .st--auf.st--termin .st__datum b {
    font-size: 42px;
  }
  .st--auf.st--termin .st__text {
    grid-area: text;
    padding-left: 12px;
  }
  .band-reihe {
    display: flex;
    gap: 0;
    margin: 24px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }
  .st--klein {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .st--klein:last-child {
    padding-right: 16px;
    flex-basis: calc(82% + 16px);
  }
  .st--quer, .st--quer.st--termin {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .st--quer .st__bild {
    order: -1;
    margin: 0 0 16px;
  }
  .st--quer.st--termin .st__datum {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 8px;
  }
  .st--quer .st__titel {
    font-size: 22px;
  }
  .st__titel, .st--text .st__titel {
    font-size: 22px;
  }
  .st--titel .st__titel {
    font-size: 19px;
  }
  .st--titel .st__bild {
    flex-basis: 80px;
  }
  .staffel-sitzungen .seitenspalte {
    display: flex;
  }
  .staffel__stufe {
    margin-top: 48px;
  }
  [data-staffel]:not([data-staffel-modus]) > .staffel__stufe > .staffel__titel {
    margin-left: -16px;
    padding-left: 16px;
  }
  .staffel__stufe > :not(.staffel__titel) + * {
    margin-top: 24px;
    padding-top: 24px;
  }
  .staffel__karten {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .staffel__karten > .st:nth-child(n) {
    padding: 0;
    border: 0;
  }
  .staffel__texte, .staffel__titel-liste, .staffel__texte--2 {
    display: block;
  }
  :is(.staffel__texte, .staffel__titel-liste) > .st:nth-child(n) {
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid #e4e7e2;
  }
  :is(.staffel__texte, .staffel__titel-liste) > .st:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .st--text:not(.st--termin) {
    flex-direction: row;
    gap: 16px;
  }
  .st--text:not(.st--termin) .st__bild {
    flex: 0 0 80px;
    align-self: flex-start;
    aspect-ratio: 4/3;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .st .bild img {
    transition: none;
  }
  .merken, .merken svg {
    transition: none;
  }
}
/* ---- Zeitleiste ---- */
.zeitleiste {
  position: sticky;
  top: 76px;
  z-index: 5;
  margin-top: 24px;
  background: #ffffff;
}

.zeitleiste__pillen {
  margin: 0;
  padding: 12px 0;
}

.zeitleiste > .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.zeitleiste .wisch-rahmen, .zeitleiste > .wrap > .zeitleiste__pillen {
  flex: 1 1 auto;
  min-width: 0;
}

.zeitleiste__filter {
  flex: none;
}

.zeitleiste .filter-knopf {
  height: 40px;
}

.zeitleiste .themen-pille {
  background: #ffffff;
  font-family: inherit;
  cursor: pointer;
}

.zeitleiste .themen-pille[aria-pressed=true] {
  background: #1f2a26;
  border-color: #1f2a26;
  color: #ffffff;
}

.zeitleiste .themen-pille[aria-pressed=true] .themen-pille__zahl {
  color: #ffffff;
  opacity: 0.7;
}

.zeitleiste .themen-pille[hidden] {
  display: none;
}

.abschnitt.termine-liste-bereich {
  padding-top: 24px;
  scroll-margin-top: 141px;
}

/* ---- Aufmacher ---- */
.termine-auf {
  margin-bottom: 48px;
}

.termine-auf:empty {
  display: none;
}

.kalender-monat .termine-auf {
  margin: 24px 0 0;
}

.kalender-gross:empty {
  display: none;
}

.kalender-gross__eintrag {
  margin-top: 24px;
}

.st--kalender-auf {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.05fr);
  background: #f5f3ee;
}

.st--kalender-auf.st--ohne-bild {
  grid-template-columns: 88px minmax(0, 1fr);
}

.st--kalender-auf .st__datum {
  justify-content: flex-start;
  padding: 48px 0 0 24px;
}

.st--kalender-auf .st__datum b {
  font-size: 60px;
}

.st--kalender-auf .st__datum span {
  margin-top: 6px;
}

.st--kalender-auf .st__text {
  padding: 48px 48px 24px 24px;
}

.st--kalender-auf.st--ohne-bild .st__text {
  max-width: 880px;
}

.st--kalender-auf .st__titel {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 38px;
  font-weight: 350;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.st--kalender-auf .st__wann {
  margin-top: 16px;
  font-size: 19px;
}

.st--kalender-auf .st__text > :nth-last-child(2) {
  margin-bottom: 0;
}

.st--kalender-auf .st__anriss {
  margin-top: 24px;
  color: #1f2a26;
  font-size: 19px;
  -webkit-line-clamp: 4;
}

.st--kalender-auf .st__fuss {
  flex-wrap: wrap;
  row-gap: 0;
  margin-top: auto;
  padding-top: 12px;
  border-top: 0;
}

.st--kalender-auf .st__fuss .t-meta {
  flex: 1 1 100%;
  font-size: 17px;
}

.st--kalender-auf .st__knoepfe {
  flex: 1 1 100%;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e4e7e2;
}

.st--kalender-auf .st__kalender {
  height: 36px;
  padding: 0 14px;
  font-size: 15px;
}

.st--kalender-auf .merken {
  margin: 0 -8px 0 0;
}

.st--kalender-auf .st__bild {
  aspect-ratio: 1.4;
}

/* ---- Monate ---- */
.kalender-monat + .kalender-monat {
  margin-top: 48px;
}

.kalender-monat__titel {
  position: sticky;
  top: 141px;
  z-index: 4;
  margin: 0;
  padding: 16px 0 12px;
  border-bottom: 1px solid #3a8a78;
  background: #ffffff;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.kalender-raster {
  overflow: hidden;
}

.kalender-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -1px -24px 0 -25px;
  padding: 0;
  list-style: none;
}

.kalender-eintrag {
  padding: 24px 24px;
  border-top: 1px solid #e4e7e2;
  border-left: 1px solid #e4e7e2;
}

.kalender-eintrag > template {
  display: none;
}

/* ---- Eintrag ---- */
.st--zeile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  height: 100%;
}

.st--zeile .st__titel {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

:is(.st--zeile, .st--kalender-auf) .st__wann {
  margin-top: 6px;
  color: #5b6560;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

:is(.st--zeile, .st--kalender-auf) .st__zeit {
  color: #b4532f;
  font-weight: 600;
}

.st--zeile .st__text > :nth-last-child(2) {
  margin-bottom: 0;
}

.st--zeile .st__text {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.st--zeile .st__fuss {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.st--zeile .st__fuss .t-meta {
  font-size: 15px;
}

.st--zeile .st__knoepfe {
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 42, 38, 0.09);
}

.st__absender {
  position: relative;
  z-index: 2;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #c5cbc6;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.st__absender:hover {
  color: #2f6c5e;
  text-decoration-color: currentColor;
}

.st__knoepfe {
  display: flex;
  align-items: center;
  gap: 8px;
}

.st__kalender {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.st__kalender:hover {
  border-color: #1f2a26;
}

.st__kalender svg {
  width: 14px;
  height: 14px;
}

.st__teilen {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 0 -4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #5b6560;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.st__teilen:hover {
  color: #2f6c5e;
  background: #e2ede9;
}

.st__teilen svg {
  width: 16px;
  height: 16px;
}

.st--kalender-auf .st__teilen {
  width: 36px;
  height: 36px;
}

.st--zeile .st__knoepfe {
  gap: 6px;
}

.st--zeile .st__kalender {
  padding: 0 9px;
}

.st--zeile .st__teilen {
  width: 28px;
}

.st__kalender-kurz {
  display: none;
}

@media (min-width: 1181px) and (max-width: 1399px), (min-width: 721px) and (max-width: 819px) {
  .st--zeile .st__kalender-lang {
    display: none;
  }
  .st--zeile .st__kalender-kurz {
    display: inline;
  }
}
@media (max-width: 1180px) {
  .kalender-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st--kalender-auf .st__datum {
    padding-top: 32px;
  }
  .st--kalender-auf .st__text {
    padding: 32px 24px 24px 16px;
  }
  .st--kalender-auf .st__titel {
    font-size: 32px;
  }
}
@media (max-width: 1000px) and (min-width: 721px) {
  .zeitleiste {
    top: 140px;
  }
  .abschnitt.termine-liste-bereich {
    scroll-margin-top: 205px;
  }
  .kalender-monat__titel {
    top: 205px;
  }
}
@media (max-width: 720px) {
  .zeitleiste {
    top: 136px;
    margin-top: 16px;
  }
  .zeitleiste__pillen {
    padding: 8px 16px;
  }
  .zeitleiste .themen-pille {
    height: 34px;
    padding: 0 14px;
    font-size: 15px;
  }
  .zeitleiste > .wrap {
    gap: 8px;
  }
  .zeitleiste .zeitleiste__pillen {
    margin-right: 0;
    padding-right: 0;
  }
  .zeitleiste .filter-knopf {
    height: 34px;
    padding: 0 12px;
    font-size: 15px;
  }
  .zeitleiste .filter-wahl:not(.filter-wahl--an) .filter-knopf__wert, .zeitleiste .filter-wahl--an .filter-knopf__name {
    display: none;
  }
  .zeitleiste .filter-wahl--an .filter-knopf__wert {
    max-width: 80px;
  }
  .zeitleiste .filter-wahl--an .filter-knopf__pfeil {
    display: none;
  }
  .zeitleiste .filter-wahl--an .filter-knopf {
    padding-right: 4px;
  }
  .zeitleiste .filter-weg {
    width: 28px;
    height: 28px;
    margin-right: 3px;
  }
  .abschnitt.termine-liste-bereich {
    padding-top: 16px;
    scroll-margin-top: 187px;
  }
  .kalender-monat__titel {
    position: static;
    padding-top: 12px;
    font-size: 22px;
  }
  .kalender-monat + .kalender-monat {
    margin-top: 32px;
  }
  .termine-auf {
    margin-bottom: 32px;
  }
  .kalender-monat .termine-auf {
    margin: 16px 0 0;
  }
  .kalender-gross__eintrag {
    margin-top: 16px;
  }
  .st--kalender-auf, .st--kalender-auf.st--ohne-bild {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas: "bild bild" "datum text";
  }
  .st--kalender-auf .st__bild {
    grid-area: bild;
  }
  .st--kalender-auf .st__datum {
    grid-area: datum;
    padding: 24px 0 0 16px;
  }
  .st--kalender-auf .st__datum b {
    font-size: 42px;
  }
  .st--kalender-auf .st__text {
    grid-area: text;
    padding: 24px 16px 16px 12px;
  }
  .st--kalender-auf .st__titel {
    font-size: 28px;
  }
  .st--kalender-auf .st__wann {
    font-size: 17px;
  }
  .st--kalender-auf .st__anriss {
    display: none;
  }
  .st--kalender-auf .st__knoepfe {
    margin-top: 16px;
    padding-top: 12px;
  }
  .kalender-liste {
    grid-template-columns: minmax(0, 1fr);
  }
  .kalender-eintrag {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}
/* ---- Abstände und Linie ---- */
.startseite .abschnitt {
  padding: 72px 0;
}

.startseite .einstieg + .band, .startseite .einstieg + .ich-dialog + .band {
  padding-top: 48px;
}

.startseite .werbeplatz-quer {
  padding-bottom: 72px;
}

.startseite :is(.abschnitt--kalk, .abschnitt--wald) + .werbeplatz-quer {
  padding-top: 72px;
}

.startseite .kopf {
  align-items: center;
  margin-bottom: 32px;
  padding-top: 24px;
  border-top: 1px solid #3a8a78;
}

.startseite .kopf > div:first-child::before {
  content: none;
}

.startseite .kopf--klein {
  margin-bottom: 32px;
}

@media (min-width: 1181px) {
  .startseite .abschnitt-seitlich {
    row-gap: 24px;
  }
  .startseite .abschnitt-seitlich::before {
    content: "";
    grid-column: 1/-1;
    height: 1px;
    background: #3a8a78;
  }
  .startseite .kopf--seitlich {
    align-items: flex-start;
    padding-top: 0;
    border-top: 0;
  }
  .startseite .abschnitt-seitlich .amt-liste--zweispaltig {
    border-top: 0;
  }
  .startseite .abschnitt-seitlich .amt-liste > li:first-child .amt-zeile {
    padding-top: 0;
  }
}
/* ---- Aktuelles: Aufmacher links, Termin-Kachel rechts ---- */
.start-oben {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.start-oben--ohne-termin {
  grid-template-columns: minmax(0, 1fr);
}

.start-oben__auf {
  min-width: 0;
}

.start-oben:not(.start-oben--ohne-termin) .st--auf:not(.st--ohne-bild) {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: none;
}

.start-oben:not(.start-oben--ohne-termin) .st--auf:not(.st--ohne-bild) .st__bild {
  order: -1;
}

.start-oben:not(.start-oben--ohne-termin) .st--auf:not(.st--ohne-bild) .st__text {
  padding: 24px 0 0;
}

.start-oben:not(.start-oben--ohne-termin) .st--auf.st--ohne-bild {
  height: 100%;
}

.band--aktuell [data-block-reihe]:has(> .band-reihe) {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 3px solid #3a8a78;
}

.band--aktuell .band-reihe {
  margin-top: 0;
}

.start-termin {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px;
  background: #f5f3ee;
}

.start-termin__kopf {
  margin: 0 0 24px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b4532f;
}

.start-termin .termine-auf {
  margin: 0;
}

.start-termin .st--kalender-auf, .start-termin .st--kalender-auf.st--ohne-bild {
  display: flex;
  flex-direction: column;
  background: none;
}

.start-termin .st--kalender-auf :is(.st__bild, .st__anriss) {
  display: none;
}

.start-termin .st--kalender-auf .st__datum {
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  padding: 0;
}

.start-termin .st--kalender-auf .st__datum b {
  font-size: 60px;
}

.start-termin .st--kalender-auf .st__datum span {
  margin: 0;
}

.start-termin .st--kalender-auf .st__text {
  padding: 16px 0 0;
}

.start-termin .st--kalender-auf .st__titel {
  font-size: 28px;
}

.start-termin .st--kalender-auf .st__knoepfe {
  margin-top: 16px;
}

.start-termin .st--kalender-auf .st__kalender {
  background: #ffffff;
}

.start-termin__danach {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid #c5cbc6;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b6560;
}

.start-termin .kalender-liste {
  display: block;
  margin: 0;
}

.start-termin .kalender-eintrag {
  padding: 12px 0;
  border: 0;
}

.start-termin .kalender-eintrag + .kalender-eintrag {
  border-top: 1px solid #e4e7e2;
}

.start-termin .st--zeile {
  grid-template-columns: 52px minmax(0, 1fr);
}

.start-termin .st--zeile .st__datum b {
  font-size: 26px;
}

.start-termin .st--zeile .st__titel {
  font-size: 19px;
}

.start-termin .st--zeile .st__fuss {
  display: none;
}

.start-termin__alle {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 24px;
}

.start-termin .hinweiszeile {
  margin: 0;
}

/* ---- Mitmachzeile auf Wald ---- */
.melden-band--zeile {
  margin-top: 48px;
  padding: 24px 32px;
  background: #1f3d36;
  color: #ffffff;
}

.melden-band--zeile h3 {
  font-size: 22px;
}

.melden-band--zeile p, .melden-band--zeile .melden-band__schluss {
  color: #ffffff;
}

.melden-band--zeile p {
  opacity: 0.8;
}

.melden-band--zeile .melden-band__schluss {
  opacity: 1;
}

.melden-band--zeile .melden-band__schluss svg {
  color: #c89b4a;
}

.melden-band--zeile .knopf {
  flex: none;
  background: #ffffff;
  color: #1f3d36 !important;
}

/* ---- Rathaus & Amt: nächste Sitzung im Kopf ---- */
.amt-sitzung {
  align-self: stretch;
}

.amt-sitzung__eintrag {
  display: block;
  padding: 16px 0;
  border-top: 1px solid #c5cbc6;
  border-bottom: 1px solid #c5cbc6;
  color: #1f2a26;
}

.amt-sitzung__zeile {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 12px;
}

.amt-sitzung__datum {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  color: #b4532f;
}

.amt-sitzung__datum b {
  font-family: "Fraunces", Georgia, serif;
  font-size: 48px;
  font-weight: 350;
  line-height: 1;
}

.amt-sitzung__datum span {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.amt-sitzung__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
}

.amt-sitzung__titel {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.amt-sitzung__eintrag:hover .u {
  color: #2f6c5e;
}

/* ---- Tablet ---- */
@media (max-width: 1180px) {
  .start-oben {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}
/* ---- Handy ---- */
@media (max-width: 720px) {
  .startseite .abschnitt {
    padding: 44px 0;
  }
  .startseite .werbeplatz-quer {
    padding-bottom: 44px;
  }
  .startseite :is(.abschnitt--kalk, .abschnitt--wald) + .werbeplatz-quer {
    padding-top: 44px;
  }
  .startseite .kopf {
    padding-top: 16px;
    margin-bottom: 24px;
  }
  .band--aktuell > .wrap {
    display: flex;
    flex-direction: column;
  }
  .band--aktuell .start-oben {
    display: contents;
  }
  .band--aktuell [data-block-reihe] {
    order: 1;
  }
  .band--aktuell .start-termin {
    order: 2;
    margin-top: 48px;
  }
  .band--aktuell .melden-band--zeile {
    order: 3;
  }
  .band--aktuell [data-block-reihe]:has(> .band-reihe) {
    margin-top: 32px;
    padding-top: 24px;
  }
  .start-oben:not(.start-oben--ohne-termin) .st--auf:not(.st--ohne-bild) .st__text {
    padding-top: 16px;
  }
  .start-termin {
    padding: 24px 16px;
  }
  .start-termin .st--kalender-auf .st__datum b {
    font-size: 48px;
  }
  .start-termin .st--kalender-auf .st__titel {
    font-size: 26px;
  }
  .melden-band--zeile {
    margin-top: 32px;
    padding: 24px 16px;
  }
  .startseite .vereine-spur {
    grid-auto-columns: 78%;
    margin-right: -16px;
    padding-right: 16px;
  }
}
.teilen-menue {
  position: fixed;
  z-index: 1200;
  display: grid;
  min-width: 200px;
  padding: 8px;
  border: 1px solid #e4e7e2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08);
}

.teilen-menue[hidden] {
  display: none;
}

.teilen-menue > * {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #1f2a26;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.teilen-menue > *:hover, .teilen-menue > *:focus-visible {
  background: #f5f3ee;
  color: #2f6c5e;
  outline: none;
}

.teilen-menue svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.teilen-menue [data-weg=link] {
  margin-top: 4px;
  border-top: 1px solid #e4e7e2;
  border-radius: 0 0 6px 6px;
  padding-top: 12px;
}

.ccm-root .ccm-modal-inner {
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(20, 30, 26, 0.06), 0 14px 36px rgba(20, 30, 26, 0.08) !important;
}

.ccm-root .ccm--h1, .ccm-root .ccm-widget--title {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 350 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

.ccm-root .ccm--p, .ccm-root .ccm-modal--body {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #1f2a26 !important;
}

.ccm-root .ccm-widget--buttons {
  gap: 8px !important;
}

.ccm-root .ccm-modal button.button, .ccm-root .ccm-widget--buttons button {
  min-height: 44px !important;
  padding: 0 24px !important;
  border: 1px solid #1f2a26 !important;
  border-radius: 999px !important;
  background: #1f2a26 !important;
  color: #ffffff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.ccm-root .ccm-widget--buttons button:not(.button) {
  background: #ffffff !important;
  color: #1f2a26 !important;
  border-color: #c5cbc6 !important;
}

.ccm-root .ccm-modal button:hover {
  opacity: 0.85;
}

.ccm-root .ccm-link-container a {
  color: #2f6c5e !important;
  font-size: 15px !important;
}

/* ============================================================
   Responsive: <720 Mobil · 721–1180 Tablet · >1180 Desktop
   ============================================================ */
@media (max-width: 1180px) {
  .hauptnav {
    gap: 24px;
  }
  .meldungen-oben {
    grid-template-columns: 1fr;
  }
  .seitenspalte {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 32px;
  }
  .seitenspalte__titel {
    grid-column: 1/-1;
  }
  .kurz, .kurz:last-child {
    border-bottom: 0;
    margin-bottom: 0;
  }
  .ortskarte {
    aspect-ratio: 2/1;
  }
  .karte-liste ul {
    column-gap: 40px;
  }
  .termine-raster {
    grid-template-columns: 1fr;
  }
  .werbeplatz {
    position: static;
    order: 2;
  }
  .werbeplatz__flaeche {
    aspect-ratio: auto;
    height: 120px;
  }
  .werbeplatz__anzeige {
    max-width: 300px;
    margin: 0 auto;
  }
  .zwei-spalten {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .amt-liste--zweispaltig {
    column-gap: 40px;
  }
  .stellen-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vereine-spur {
    grid-auto-columns: calc((100% - 48px) / 3);
  }
  .fusszeile__spalten {
    grid-template-columns: repeat(2, 1fr);
  }
  .karten-reihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .betriebe-reihe .betriebe-werbung, .betriebe-reihe:has(.betriebe-reihe__karten > :nth-child(2)) .betriebe-werbung {
    grid-column: 1/-1;
    padding: 24px;
  }
  .betriebe-reihe:has(.betriebe-reihe__karten > :nth-child(1):last-child) .betriebe-werbung,
  .betriebe-reihe:has(.betriebe-reihe__karten > :nth-child(3):last-child) .betriebe-werbung {
    grid-column: span 1;
  }
  .beitrag-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .beitrag-seite {
    position: static;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }
  .absender-kopf {
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .absender-info {
    margin-left: 152px;
  }
  .absender-kopf__logo {
    width: 112px;
    height: 112px;
  }
  .absender-kontakt {
    grid-column: 1/-1;
  }
  .termin-liste {
    column-gap: 32px;
  }
  .vereine-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vereine-raster.vereine-raster--kacheln {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .service-kacheln, .notruf-liste, .ausflug-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .andruck-anzeige__bogen {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 56px 48px 48px;
  }
  .andruck-anzeige__titel {
    max-width: 14ch;
    font-size: 56px;
  }
}
@media (max-width: 1000px) {
  .hauptnav, .kopfzeile__datum {
    display: none;
  }
  /* Der Kopf ist hier die klebende Navigationszeile: Wortmarke, Ortswahl und Block Gemerkt | Menü/Suche in einer Zeile,
     darunter die Bereichsleiste. Die große Kopfzeile entfällt; Login und Suche stehen im Menü. */
  .kopfzeile {
    display: none;
  }
  .navzeile {
    padding-top: env(safe-area-inset-top);
  }
  .navzeile__innen {
    height: 80px;
    gap: 12px;
  }
  .navzeile__wortmarke {
    display: inline-flex;
    flex: none;
  }
  .nav-rechts {
    min-width: 0;
    gap: 8px;
  }
  .nav-rechts .kopf-pille--ort {
    flex: 0 1 auto;
    min-width: 0;
  }
  .nav-rechts .kopf-pille--ort .ort-wert {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kopf-block {
    margin-left: 0;
    height: 48px;
  }
  .nav-rechts .kopf-pille--ort {
    min-height: 48px;
  }
  .kopf-block__teil--merken {
    justify-content: center;
    min-width: 48px;
    padding: 0 10px;
  }
  .kopf-block__teil--merken svg {
    width: 22px;
    height: 22px;
  }
  .kopf-block__teil--menue {
    justify-content: center;
    min-width: 50px;
    padding: 0 10px;
  }
  .kopf-block__teil .kopf-block__menue-icon {
    width: 30px;
    height: 25px;
  }
  .kopf-block__teil--login, .kopf-block__teil--suche {
    display: none;
  }
  .kopf-block__teil--menue {
    display: inline-flex;
  }
  .panel--menue {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(16px + env(safe-area-inset-top)) 40px calc(32px + env(safe-area-inset-bottom));
    box-shadow: none;
  }
  .panel--menue[data-offen] {
    display: flex;
    flex-direction: column;
  }
  .ort-schublade {
    left: 0;
    right: 56px;
    width: auto;
    animation-name: oa-schublade-links;
  }
  .vereine-az--klebt {
    top: 140px;
  }
  .verzeichnis-buchstabe {
    scroll-margin-top: 193px;
  }
}
@media (max-width: 900px) {
  .vereine-raster.vereine-raster--zeilen {
    grid-template-columns: minmax(0, 1fr);
  }
  .vereine-raster.vereine-raster--kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .mp-eintrag--bild {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 12px;
  }
  .andruck-anzeige__bogen {
    gap: 40px;
    padding: 48px 24px 40px;
  }
  .andruck-anzeige__passer {
    display: none;
  }
  .andruck-anzeige__titel {
    font-size: 42px;
    line-height: 1;
  }
  .andruck-anzeige__text {
    font-size: 17px;
  }
  .andruck-anzeige__fluss {
    grid-template-columns: minmax(0, 1fr);
  }
  .andruck-anzeige__linien {
    display: none;
  }
  .andruck-anzeige__quelle::after {
    content: "↓";
    display: block;
    margin-top: 12px;
    font-family: "Figtree", system-ui, sans-serif;
    font-size: 26px;
    line-height: 1;
  }
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .panel {
    padding-left: 16px;
    padding-right: 16px;
  }
  .panel--menue {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Kopfzeile am Handy: kleinere Wortmarke, Ortswahl ohne Ortssymbol und Pfeil, damit Wortmarke, Ortswahl und Block
     nebeneinander passen; lange Ortsnamen enden mit „…“ */
  .navzeile__innen {
    height: 76px;
    gap: 6px;
  }
  .navzeile .navzeile__wortmarke {
    gap: 8px;
  }
  .navzeile .navzeile__wortmarke .t-marke {
    font-size: 22px;
  }
  .navzeile .navzeile__wortmarke .marke__bild {
    width: 26px;
    height: 26px;
  }
  .nav-rechts {
    gap: 4px;
  }
  .nav-rechts .kopf-pille--ort .dreieck {
    display: none;
  }
  .kopf-pille--ort > svg:not(.dreieck) {
    display: none;
  }
  /* Art des Orts klein über dem Namen („Gemeinde“ / „Bach a.d.Donau“), oa-kopf.js teilt den Namen */
  .kopf-pille--ort {
    gap: 5px;
    height: auto;
    min-height: 36px;
    padding: 3px 10px 3px 12px;
  }
  .nav-rechts .kopf-pille--ort {
    padding: 4px 7px 4px 9px;
  }
  /* Zahl der gemerkten Einträge als Abzeichen an der Fahne, damit der Block nicht breiter wird */
  .kopf-block__teil--merken {
    position: relative;
  }
  .kopf-block__teil--merken .kopf-block__zahl {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 16px;
  }
  .kopf-pille--ort .ort-wert {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.15;
    text-align: left;
  }
  .kopf-pille--ort .ort-wert__art {
    font-size: 11px;
    font-weight: 500;
    color: #5b6560;
  }
  .kopf-pille--ort .ort-wert__name {
    font-size: 15px;
  }
  .kopf-pille--ort .ort-wert__name, .kopf-pille--ort .ort-wert__art {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kopf-pille--ort[aria-expanded=true] .ort-wert__art {
    color: inherit;
  }
  .menue-kopf {
    gap: 10px;
  }
  .menue-kopf .marke .t-marke {
    font-size: 26px;
  }
  .karte-zur-liste {
    display: inline-flex;
  }
  .abschnitt {
    padding: 64px 0;
  }
  .kopf {
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .kopf .t-h1 {
    font-size: 34px;
  }
  .marke .t-marke {
    font-size: 32px;
  }
  .marke__bild {
    width: 30px;
    height: 30px;
  }
  .suche-form input {
    font-size: 26px;
  }
  .leitmeldung .t-display {
    font-size: 34px;
    line-height: 1.1;
  }
  .leitmeldung--text > a {
    aspect-ratio: auto;
    min-height: 260px;
    padding: 24px;
  }
  .seitenspalte, .karten-3, .termine-2 {
    grid-template-columns: 1fr;
  }
  .kurz {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 0 16px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e4e7e2;
  }
  .kurz .bild {
    grid-row: 1/span 3;
    margin: 0;
    aspect-ratio: 1/1;
  }
  .kurz--ohne-bild {
    grid-template-columns: minmax(0, 1fr);
  }
  .kurz h3 {
    font-size: 19px;
  }
  .karten-3 {
    margin-top: 40px;
    padding-top: 32px;
    gap: 40px;
  }
  .melden-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
  .ortskarte {
    aspect-ratio: auto;
    height: 65vh;
    min-height: 360px;
    max-height: 560px;
  }
  .karte-alle {
    top: 10px;
    right: 10px;
    height: 36px;
    padding: 0 14px;
  }
  .karte-liste ul {
    grid-template-columns: 1fr;
  }
  .karte-zeile {
    padding: 16px 0;
  }
  .orte-leiste {
    flex-wrap: nowrap;
    width: calc(100% + 2 * 16px);
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .orte-leiste::-webkit-scrollbar {
    display: none;
  }
  .orte-leiste li {
    flex: none;
    scroll-snap-align: start;
  }
  .termin-karte--gross .bild {
    aspect-ratio: 4/3;
  }
  .termin-karte .bild--leer, .termin-karte--gross .bild--leer {
    aspect-ratio: auto;
    min-height: 0;
    background: none;
  }
  .termin-karte .bild--leer .datum {
    position: static;
    background: #e2ede9;
  }
  .termin-einladung {
    display: none;
  }
  .karte .bild--termin, .leitmeldung .bild--termin {
    aspect-ratio: auto;
    background: none;
    margin-bottom: 12px;
  }
  .karte .bild--termin .datum, .leitmeldung .bild--termin .datum {
    position: static;
    min-width: 76px;
    padding: 12px 12px 10px;
    background: #e2ede9;
  }
  .leitmeldung .bild--termin .datum b {
    font-size: 36px;
  }
  .kurz .bild--termin .datum, .eintrag .bild--termin .datum {
    position: absolute;
    inset: 0;
    min-width: 0;
    padding: 0;
    background: none;
  }
  .kurz .bild--termin .datum b, .eintrag .bild--termin .datum b {
    font-size: 28px;
  }
  .kurz .bild:not(.bild--termin) > .datum, .eintrag .bild:not(.bild--termin) > .datum {
    min-width: 44px;
    padding: 5px 6px 4px;
  }
  .kurz .bild:not(.bild--termin) > .datum b, .eintrag .bild:not(.bild--termin) > .datum b {
    font-size: 22px;
  }
  .kurz .bild:not(.bild--termin) > .datum span, .eintrag .bild:not(.bild--termin) > .datum span {
    margin-top: 2px;
    font-size: 9.5px;
  }
  .termin-karte__unten {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .termin-karte--gross .termin-karte__info {
    padding-top: 14px;
  }
  .amt-zeile {
    grid-template-columns: 64px minmax(0, 1fr) 16px;
    gap: 14px;
  }
  .amt-zeile__datum {
    font-size: 19px;
  }
  .amt-zeile__titel {
    font-size: 19px;
  }
  .amt-liste--zweispaltig, .stellen-raster {
    grid-template-columns: 1fr;
  }
  .stelle-karte {
    min-height: 0;
  }
  .slider-steuerung .mehr {
    display: none;
  }
  .vereine-spur {
    grid-auto-columns: 78%;
    gap: 16px;
  }
  .fusszeile__marke .t-marke {
    font-size: 36px;
  }
  .fusszeile__spalten {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .karten-reihe {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .betriebe-reihe .betriebe-werbung, .betriebe-reihe:has(.betriebe-reihe__karten > :nth-child(n)) .betriebe-werbung {
    grid-column: 1/-1;
  }
  .beitrag {
    padding-top: 20px;
  }
  .themen-kopf-bereich {
    padding: 20px 0 0;
  }
  .themen-kopf {
    grid-template-columns: minmax(0, 1fr);
  }
  .themen-kopf > .themen-kopf__filter {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 16px;
  }
  .abschnitt--seitenanfang {
    padding-top: 20px;
  }
  .themen-leiste {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .themen-inhalt, .termine-oben {
    padding-top: 40px;
  }
  .eintrag-bereich {
    margin-top: 56px;
  }
  .eintrag {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
  }
  .eintrag--ohne-bild {
    grid-template-columns: minmax(0, 1fr);
  }
  .eintrag .bild {
    aspect-ratio: 1/1;
  }
  .eintrag__text .t-kicker {
    margin-bottom: 4px;
  }
  .eintrag__titel {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.3;
  }
  .eintrag__text p {
    display: none;
  }
  .eintrag .bild--termin .datum b {
    font-size: 26px;
  }
  .eintrag .bild:not(.bild--termin) > .datum {
    min-width: 36px;
    padding: 4px 5px 3px;
  }
  .eintrag .bild:not(.bild--termin) > .datum b {
    font-size: 17px;
  }
  .eintrag .bild:not(.bild--termin) > .datum span {
    font-size: 8.5px;
  }
  .absender-kopf-bereich {
    padding: 20px 0 40px;
  }
  .absender-kopf {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .absender-info {
    margin: 28px 0 0;
  }
  .absender-kopf__logo {
    width: 88px;
    height: 88px;
    font-size: 26px;
  }
  .termin-liste {
    grid-template-columns: minmax(0, 1fr);
  }
  .termin-zeile {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
  }
  .termin-zeile__datum b {
    font-size: 30px;
  }
  .termin-zeile__titel {
    font-size: 19px;
  }
  .vereine-verzeichnis {
    padding-top: 40px;
  }
  .termine-verzeichnis, .amtliches-verzeichnis {
    padding-top: 40px;
  }
  .amtliches-sitzungen {
    padding-top: 28px;
  }
  .termin-gruppe {
    margin-bottom: 40px;
  }
  .termin-gruppe__titel {
    top: 136px;
    font-size: 22px;
  }
  .vereine-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .vereine-raster .verein {
    min-height: 0;
  }
  .vereine-az--klebt {
    top: 136px;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .verzeichnis-buchstabe {
    scroll-margin-top: 189px;
  }
  .verein--zeile .verein__knoepfe .pfeil {
    display: none;
  }
  .verein__gepflegt-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .verein__gepflegt svg {
    width: 16px;
    height: 16px;
  }
  .vereine-raster.vereine-raster--kacheln {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .vereine-raster--kacheln .verein.verein--zeile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 12px;
    min-height: 0;
    padding: 16px 16px 12px;
  }
  .vereine-raster--kacheln .verein__plakette {
    grid-row: 1;
    grid-column: 1;
  }
  .vereine-raster--kacheln .verein__text {
    grid-row: 1;
    grid-column: 2;
    padding-right: 36px;
  }
  .vereine-raster--kacheln .verein__rechts {
    grid-row: 2;
    grid-column: 1/-1;
  }
  .vereine-raster--kacheln .verein--zeile .verein__knoepfe .pfeil {
    display: block;
  }
  .ansicht-leiste {
    justify-content: flex-start;
  }
  .ansicht-umschalter button {
    padding: 0 12px;
  }
  .ansicht-umschalter__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .filter-knopf__wert {
    max-width: 170px;
  }
  .filter-panel {
    align-items: flex-end;
    padding: 0;
  }
  .filter-panel__karte {
    max-width: none;
    max-height: 88vh;
    border-radius: 10px 10px 0 0;
    animation-name: oa-filter-hoch;
  }
  .filter-panel__kopf {
    padding: 14px 12px 8px 16px;
  }
  .filter-panel__inhalt {
    padding: 4px 16px 24px;
  }
  .filter-panel__fuss {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .verzeichnis-karte .ortskarte {
    aspect-ratio: 3/4;
    max-height: 72vh;
  }
  .service-kacheln {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 28px 0 32px;
  }
  .service-kachel {
    min-height: 0;
  }
  .notruf-liste, .ausflug-liste {
    grid-template-columns: minmax(0, 1fr);
  }
  .themen-kopf-bereich--abstand {
    padding-bottom: 32px;
  }
  .notruf__nummer {
    font-size: 26px;
  }
  .suche-form--seite input {
    font-size: 26px;
  }
  .mp-reihe, .mp-anmelden, .mp-filter__felder, .mp-profil-fest__liste {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-anmelden {
    gap: 32px;
  }
  .mp-hinweis-kasten {
    padding: 24px 20px;
  }
  .abschnitt.mp-kopf-bereich {
    padding-top: 24px;
  }
  .abschnitt.mp-inhalt {
    padding-top: 20px;
  }
  /* Art der Meldung am Handy als Umschalter in einer Zeile; Hinweise zum Feld in eigener Zeile unter der Bezeichnung */
  .mp-arten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .mp-art {
    padding: 12px 6px;
    text-align: center;
  }
  .mp-art__titel {
    font-size: 17px;
  }
  .mp-art__lang {
    display: none;
  }
  .mp-arten--zwei {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-arten--zwei .mp-art {
    padding: 14px 16px;
    text-align: left;
  }
  .mp-art__text {
    display: none;
  }
  .mp-arten--zwei .mp-art__text {
    display: block;
  }
  /* Datum und Uhrzeit nebeneinander, auch am Handy */
  .mp-formular {
    gap: 24px;
  }
  .mp-teil {
    padding-top: 20px;
  }
  .mp-teil--termin .mp-reihe:nth-of-type(-n+2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    align-items: end;
  }
  .mp-feld label > .mp-hinweis {
    flex-basis: 100%;
  }
  /* Meldeportal-Leiste am Handy: umbrechen statt seitlich wischen, damit alle Bereiche sichtbar sind */
  .mp-nav {
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .mp-nav .themen-pille {
    height: 34px;
    padding: 0 12px;
    font-size: 15px;
  }
  .navzeile .panel--suche {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .panel--suche .suche-form {
    height: 60px;
    padding-left: 18px;
  }
  .panel--suche .suche-form input {
    font-size: 22px;
  }
  .panel--suche .suche-vorschlaege {
    padding: 4px 18px 14px;
  }
  .panel--suche .suche-tipps {
    padding: 16px 18px 18px;
  }
  .suche-absender {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .treffer-absender {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 14px 16px;
  }
  .treffer-absender__logo {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }
  .beitrag-kopf .t-display {
    font-size: 34px;
    line-height: 1.1;
  }
  .beitrag-kopf__meta {
    margin-top: 20px;
  }
  .beitrag-bild {
    margin: 24px -16px 0;
  }
  .beitrag-text {
    margin-top: 28px;
    font-size: 19px;
  }
  .termin-info {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 12px;
    margin-top: 24px;
    padding: 24px 16px 16px 0;
  }
  .termin-info__datum b {
    font-size: 42px;
  }
  .termin-info__zeile--wann dd {
    font-size: 19px;
  }
  .termin-info__knoepfe {
    grid-column: 1/-1;
    margin-top: 16px;
    margin-left: 16px;
    padding-top: 16px;
  }
  .termin-info__knoepfe {
    gap: 8px;
  }
  .termin-info__knoepfe .st__kalender, .termin-info__knoepfe .teilen {
    padding: 0 14px;
    font-size: 15px;
  }
  .galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .beitrag-seite {
    grid-template-columns: minmax(0, 1fr);
  }
  .beitrag-seite .werbeplatz__anzeige:not(.werbeplatz--mobil) {
    display: none;
  }
  .werbeplatz--mobil {
    display: block;
  }
  .lightbox__buehne {
    padding: 0 8px 72px;
  }
  .lightbox__pfeil {
    top: auto;
    bottom: 12px;
    margin-top: 0;
  }
  .lightbox__pfeil--zurueck {
    left: calc(50% - 60px);
  }
  .lightbox__pfeil--vor {
    right: calc(50% - 60px);
  }
}
/* Desktop: Überschriften in Listen (kleine Beiträge, Textspalten, Titelzeilen, Kartenreihen, Terminliste,
   Rathaus & Amt, Kurzmeldungen, Verzeichnisnamen) einheitlich in $listen-titel-desktop. Darunter gelten die Grundwerte. */
@media (min-width: 1181px) {
  :is(.st--klein, .st--text, .st--titel, .st--zeile) .st__titel,
  .karten-reihe .st__titel, .karten-reihe .karte .t-h3,
  .amt-zeile__titel, .kurz h3, .verein--zeile h3, .vereine-raster--kacheln .verein--zeile h3 {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .oa *, .oa *::before, .oa *::after, .abdunkler, .oa-toast {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 1000px) and (min-width: 721px) {
  .termin-gruppe__titel {
    top: 140px;
  }
}
@keyframes oa-filter-hoch {
  from {
    transform: translateY(100%);
  }
}