@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: 21px;
  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: 19px;
  line-height: 1.55;
  font-weight: 400;
}

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

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

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

.t-kicker {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 11.5px;
  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: 16px;
  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 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;
}

.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: 17px;
}

.abschnitt--wald .kopf__unter {
  color: #ffffff;
  opacity: 0.75;
}

.mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  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;
}

.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: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: 1px;
}

.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: 12.5px;
  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: 15px;
  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 zentriert, Navigation darunter
   ============================================================ */
.kopfzeile {
  background: #ffffff;
}

.kopfzeile__marke {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 26px;
}

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

.kopfzeile__rechts {
  justify-self: end;
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: #5b6560;
}

.kopfzeile__rechts a:hover {
  color: #1f2a26;
}

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

.marke img {
  width: 38px;
  height: 38px;
}

.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: 64px;
  border-bottom: 1px solid #e4e7e2;
}

.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: 46px;
  }
  .navzeile__innen {
    border-bottom: 0;
  }
  .navleiste {
    display: flex;
    gap: 26px;
    height: 46px;
    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;
    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: 28px;
}

.nav-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 8px 14px;
  margin: 0 -14px;
  border-radius: 999px;
  cursor: pointer;
  color: #1f2a26;
  transition: background 0.2s, color 0.2s;
}

.nav-knopf svg {
  width: 18px;
  height: 18px;
}

.nav-knopf:hover {
  color: #2f6c5e;
}

.nav-knopf .ort-wert {
  color: #2f6c5e;
}

/* Offenes Panel: Knopf als gefüllte Pille, damit klar ist, was gerade offen ist */
.nav-knopf[aria-expanded=true], .nav-knopf[aria-expanded=true]:hover {
  background: #1f2a26;
  color: #ffffff;
}

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

.nav-knopf .dreieck {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}

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

.menue-knopf {
  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: 15px;
  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: 14px;
  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: 12px;
  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: 18px;
  text-align: left;
  cursor: pointer;
}

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

.ort-option__name {
  flex: 1;
}

.ort-option__zahl {
  font-size: 14px;
  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;
}

/* ============================================================
   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 img {
  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: 19px;
  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: 12px;
  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: 16px;
}

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

.fusszeile__unten {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  font-size: 13px;
  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 img {
  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: 24px;
  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: 20px;
}

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

/* Ortswahl im Menü: klappt an Ort und Stelle auf */
.menue-ort {
  margin-top: 28px;
}

.menue-ort__knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: #1f2a26;
  text-align: left;
}

.menue-ort__knopf:hover {
  border-color: #1f2a26;
}

.menue-ort__knopf svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.menue-ort__knopf .ort-wert {
  flex: 1;
  color: #2f6c5e;
}

.menue-ort__knopf .pfeil-rechts {
  width: 12px;
  height: 12px;
}

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

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

.seitenspalte__titel {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 12px;
  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: 19px;
  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: 15px;
  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: 23px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

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

.melden-band .melden-band__schluss {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: #1f2a26;
  font-size: 14px;
  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: 12/5;
  max-height: 600px;
  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: 12px;
  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: 19px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

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

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

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

.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: 17px;
  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: 14px;
  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: 14px;
  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: 17px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

/* Ortsleiste unter der Karte */
.orte-leiste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e4e7e2;
}

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

.orte-leiste button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 28px 32px 30px 0;
  border-top: 3px solid transparent;
  transition: border-color 0.25s;
}

.orte-leiste li + li button {
  padding-left: 32px;
  border-left: 1px solid #e4e7e2;
}

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

.orte-leiste button[aria-pressed=true] {
  border-top-color: #2f6c5e;
}

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

.ort__name {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

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

.ort__zahl b {
  color: #2f6c5e;
  font-weight: 700;
  font-size: 15px;
}

.ort__neu {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: #5b6560;
  line-height: 1.5;
}

.orte-leiste button:hover .ort__name, .orte-leiste button[aria-pressed=true] .ort__name {
  color: #2f6c5e;
}

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

.karte-liste summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}

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

.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: 14px;
  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) auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
}

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

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

.karte-liste .t-meta {
  white-space: nowrap;
}

/* 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: 13px;
  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: 21px;
}

.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: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1f2a26;
}

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

.werbeplatz__link {
  margin-top: 10px;
  font-size: 13px;
  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: 11.5px;
  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: 14px;
  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: 12px;
  font-weight: 500;
  color: #5b6560;
  margin-top: 4px;
}

.amt-zeile__titel {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  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: 13px;
  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: 19px;
  line-height: 1.25;
}

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

.stelle__firma {
  font-size: 14px;
  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: 21px;
  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: 20px;
  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: 13px;
  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: 14px;
  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: 15px;
  color: #5b6560;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

/* ============================================================
   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: 20px;
  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: 13px;
  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: 15px;
  line-height: 1.4;
}

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

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

.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: 17px;
}

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

.termin-einladung b {
  display: block;
  margin-bottom: 2px;
  text-wrap: balance;
  color: #2f6c5e;
  font-size: 18px;
  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-termine], [data-block-amt], [data-block-betriebe], [data-aktuell-unter], .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;
}

/* ============================================================
   Brotkrumen
   ============================================================ */
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  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: 19px;
}

.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: 20px;
  font-weight: 600;
}

.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: 19px;
  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: 14px;
  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: 15px;
  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: 15px;
  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: 15px;
}

/* 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 .brotkrumen {
  margin-bottom: 44px;
}

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

.beitrag-haupt {
  min-width: 0;
}

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

.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: 14px;
  padding: 6px 14px;
}

/* ---- Termin: Datum, Beginn, Ort, Kalender ---- */
.termin-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 28px;
  align-items: center;
  margin-top: 28px;
  padding: 22px 26px;
  background: #f5f3ee;
}

.termin-box__datum {
  min-width: 72px;
  text-align: center;
  color: #b4532f;
}

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

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

.termin-box__wann {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.termin-box__wo {
  margin: 4px 0 0;
  color: #5b6560;
  font-size: 15px;
  line-height: 1.5;
}

/* ---- 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;
  max-width: 700px;
  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: 11.5px;
  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;
}

.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: 14px;
  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: 18px;
  line-height: 1.7;
}

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

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

.beitrag-text--initiale > p:first-of-type:not(:first-child) {
  margin-top: 24px;
}

.beitrag-text--initiale > p:first-of-type::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: 25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.beitrag-text h3 {
  margin: 1.4em 0 0.4em;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 20px;
  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: 20px;
}

.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: 16px;
}

.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;
  max-width: 700px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid #e4e7e2;
}

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

.beitrag-fuss__melden {
  color: #5b6560;
  font-size: 14px;
  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;
}

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

.lightbox__buehne {
  position: relative;
  display: grid;
  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__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;
}

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

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

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

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

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

@media (min-width: 721px) {
  .themen-leiste {
    flex-wrap: wrap;
    overflow: visible;
  }
}
@media (max-width: 720px) {
  .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);
  }
  .themen-leiste.wisch--stupser > * {
    animation: oa-stupser 1s cubic-bezier(0.3, 0.7, 0.3, 1);
  }
}
@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: 15px;
  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: 12px;
  font-weight: 600;
  color: #5b6560;
}

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

.themen-leiste--rubriken .themen-pille {
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
}

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

.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 #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 12px;
  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: 16px;
  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]) {
  border-style: dashed;
  color: #5b6560;
}

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

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

.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: 17px;
}

.absender-kopf__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  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: 15px;
  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: 15px;
  font-weight: 600;
}

.absender-kontakt__titel {
  margin: 0 0 14px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 12px;
  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: 13px;
  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: 12px;
  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: 19px;
  font-weight: 600;
  line-height: 1.3;
}

/* Termine-Seite: Zeitgruppen mit Terminliste */
.termine-verzeichnis {
  padding-top: 48px;
}

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

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

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

/* 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: 12.5px;
  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: 15px;
  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: 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;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.vk-teilen {
  flex: none;
}

.vk-text--teilen {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.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: 17px;
  color: #5b6560;
}

.vk-gruender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #e2ede9;
  color: #2f6c5e;
  font-size: 11.5px;
  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: 14px;
  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: 12px;
  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: 16px;
  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: 15px;
}

.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: 13px;
  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: 20px;
  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: 12px;
  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: 16px;
}

.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: 14px;
}

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

.profilleiste__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  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: 14px;
}

.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;
  }
  .visitenkarte-bereich .brotkrumen {
    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: 20px;
  }
  .vk-teilen, .vk-aktionen, .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: 14px;
  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: 19px;
}

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

/* Nächster Termin auf der Vereinskarte (auch Startseite und Absenderseite) */
.verein__termin {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  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: 16px;
  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: 13px;
  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: 14px;
  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;
}

/* 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: 14px;
  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: 16px;
}

.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: 15px;
  line-height: 1.45;
}

.karte-absender .karte-popover__ort {
  color: #5b6560;
  font-size: 14px;
}

.karte-absender__mehrzeilig {
  white-space: pre-line;
}

.karte-absender__merkmale {
  font-size: 13px !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 #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 12px;
  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: 15px;
  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: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ausflug__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #5b6560;
}

/* Notrufnummern: Nummer groß, Bezeichnung, Hinweis; 112/110 mit kräftiger Linie */
.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 {
  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__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: 16px;
}

.notruf__info {
  font-size: 14px;
  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: 14px;
  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: 13px;
  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: 20px;
}

.gruender__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  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: 18px;
  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: 15px;
  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: 15px;
  color: #5b6560;
}

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

.panel--menue .vorschlag__titel {
  font-size: 16px;
}

/* Ergebnisseite */
.suche-form--seite {
  margin-top: 28px;
}

.suche-form--seite input {
  font-size: 34px;
}

.suche-status {
  margin: 16px 0 0;
  font-size: 16px;
  color: #5b6560;
}

.suche-kopf .themen-leiste {
  margin-top: 24px;
}

.suche-ergebnisse {
  padding-top: 40px;
}

.suche-ort {
  margin: 0 0 28px;
  font-size: 15px;
  color: #5b6560;
}

.suche-ort .mehr--text {
  font-size: 15px;
  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: 18px;
}

.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: 18px;
  line-height: 1.25;
}

.treffer-absender__bez {
  font-size: 14px;
  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: 16px;
  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: 12px;
  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: 15px;
  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__anschrift {
  display: block;
  margin: 0;
  font-style: normal;
  font-size: 19px;
  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: 21px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.textseite p {
  margin: 0 0 14px;
  font-size: 17px;
  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: 21px;
  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: 17px;
  line-height: 1.4;
  font-weight: 600;
}

.textseite ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.textseite li {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.6;
}

.textseite a {
  overflow-wrap: anywhere;
}

.textseite__stand {
  margin: -24px 0 32px;
  color: #5b6560;
  font-size: 15px;
}

.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: 16px;
  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: 13px;
  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: 15px;
  }
  .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: 24px;
  }
}
.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: 21px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kontakt-direkt p, .kontakt-direkt address {
  margin: 0;
  font-size: 17px;
  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: 17px;
}

.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: 15px;
  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: 19px;
  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: 15px;
  line-height: 1.5;
  color: #5b6560;
}

.ueber-frage__ziel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 15px;
  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: 21px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ueber-schritt p {
  margin: 0;
  font-size: 16px;
  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: 19px;
  line-height: 1.6;
}

.ueber-profil__text > p:last-child {
  margin: 0;
  font-size: 17px;
  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: 18px;
}

.profil-muster__name {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.profil-muster__art {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  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: 15px;
}

.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: 15px;
  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: 12px;
  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: 17px;
  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: 17px;
  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: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.werben-karte__preis {
  margin: 0 0 6px;
  font-size: 16px;
  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: 14px;
  color: #2f6c5e;
}

.werben-karte__text {
  margin: 12px 0 0;
  font-size: 16px;
  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: 15px;
  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: 19px;
  line-height: 1.3;
  font-weight: 600;
}

.werben-extra p {
  margin: 0 0 12px;
  font-size: 15px;
  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: 15px;
  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: 15px;
  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: 15px;
  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: 17px;
  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: 19px;
  line-height: 1.3;
  font-weight: 600;
}

.werben-format__mass {
  margin-top: 2px;
  font-size: 14px;
  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: 15px;
  }
  .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: 17px;
  }
  .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;
  }
}
.mp-schmal > * {
  max-width: 960px;
}

.abschnitt.mp-kopf-bereich {
  padding: 40px 0 0;
}

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

.mp-konto {
  margin-top: 18px;
}

.mp-konto__name {
  margin: 0;
  font-size: 16px;
  color: #5b6560;
}

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

.mp-nav {
  margin-top: 18px;
}

.abschnitt.mp-inhalt {
  padding-top: 28px;
}

.mp-konto__abmelden {
  color: #5b6560;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-konto__abmelden:hover {
  color: #2f6c5e;
}

.mp-einleitung {
  margin: 0 0 36px;
  max-width: 700px;
  font-size: 17px;
  line-height: 1.55;
  color: #5b6560;
}

.mp-hinweis {
  font-size: 13.5px;
  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: 23px;
  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-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: 15px;
  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-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: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.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: 15px;
  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: 16px;
  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: 14px;
  color: #5b6560;
  cursor: pointer;
}

.mp-formular input[type=file]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  border: 1px solid #c5cbc6;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2a26;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  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: 14px;
}

.mp-bild-hinweis.mp-anhaenge__hinweis {
  margin: 0 0 16px;
  border-color: #2f6c5e;
  background: #e2ede9;
  font-weight: 400;
}

.mp-anhaenge {
  margin-top: 20px;
}

/* 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: 15px;
  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: 15px;
  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: 14px;
  font-weight: 500;
}

.mp-vorschaubild {
  width: 160px;
  max-width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: #dfe3dd;
}

.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: 15px;
  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-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: 17px;
  font-weight: 600;
}

.mp-art__text {
  font-size: 14px;
  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;
}

/* Galerie */
.mp-galerie {
  margin-top: 4px;
}

.mp-galerie summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.mp-galerie summary:hover {
  color: #2f6c5e;
}

.mp-galerie__felder {
  margin-top: 16px;
}

.mp-galerie__felder .mehr {
  cursor: pointer;
  background: 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: 15px;
  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: 16px;
}

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

.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: 19px;
  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: 15px;
  line-height: 1.55;
}

.mp-anmelden__info h2 {
  margin: 0 0 10px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
}

.mp-anmelden__info h3 {
  margin: 22px 0 6px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 16px;
  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: 14px;
  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: 14px;
  color: #5b6560;
}

.mp-filter__stand .mehr {
  background: none;
  cursor: pointer;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
}

.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: 20px;
  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;
}

.mp-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: #f5f3ee;
  font-size: 13px;
  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: 19px;
  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: 15px;
}

.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 {
  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: 14px;
  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: 16px;
  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: 19px;
  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 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: 15px;
}

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

.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: 15px;
  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: 16px;
  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 {
  margin: 32px 0;
  padding: 22px 0 24px;
  border-top: 1px solid #c5cbc6;
  border-bottom: 1px solid #c5cbc6;
}

.kartenpunkt > summary {
  font-size: 17px;
}

.kartenpunkt__info {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 4px solid #3a8a78;
  background: #e2ede9;
  font-size: 15px;
  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__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: 15px;
  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: 15px;
  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: 15px;
  line-height: 1.45;
}

.kartenpunkt .kartenpunkt__entfernen {
  font-weight: 700;
  color: #1f2a26;
}

/* Fehler-Zusammenfassung über dem Absende-Knopf (js/oa-meldeportal.js) */
.mp-fehlerliste {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid #b4532f;
  background: rgba(180, 83, 47, 0.1);
  font-size: 15px;
  line-height: 1.5;
  color: #1f2a26;
}

.mp-fehlerliste[hidden] {
  display: none;
}

.mp-fehlerliste b {
  font-weight: 600;
  color: #b4532f;
}

/* 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: 15px;
  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: 13px;
  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: 15px;
  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: 15px;
  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: 17px;
  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: 15px;
  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: 17px;
  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;
}

.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: 12px;
  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__titel em {
  font-style: italic;
  font-weight: 300;
}

.andruck-anzeige__text {
  margin: 28px 0 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.6;
}

.andruck-anzeige__themen-titel {
  margin: 32px 0 12px;
  font-size: 12px;
  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: 14px;
  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: 17px;
  font-weight: 650;
  line-height: 1.3;
}

.andruck-anzeige__ziel span {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  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: 16px;
  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: 14px;
  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;
  }
}
/* ============================================================
   Responsive: <720 Mobil · 721–1180 Tablet · >1180 Desktop
   ============================================================ */
@media (max-width: 1180px) {
  .hauptnav {
    gap: 28px;
  }
  .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));
  }
  .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));
  }
  .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, .kopfzeile__rechts, .nav-knopf .nav-text {
    display: none;
  }
  .menue-knopf {
    display: inline-flex;
  }
  .kopfzeile__marke {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: calc(36px + env(safe-area-inset-top));
    padding-bottom: 24px;
  }
  .navzeile__innen {
    height: 54px;
    justify-content: space-between;
    gap: 16px;
  }
  .nav-rechts {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .ort-schublade {
    left: 0;
    right: 56px;
    width: auto;
    animation-name: oa-schublade-links;
  }
  .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;
  }
}
@media (max-width: 720px) {
  .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: 16px;
  }
  .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: 24px;
    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;
  }
  .nav-knopf {
    padding: 8px 12px;
    margin: 0 -12px;
  }
  .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 img {
    width: 30px;
    height: 30px;
  }
  .suche-form input {
    font-size: 24px;
  }
  .leitmeldung .t-display {
    font-size: 34px;
    line-height: 1.1;
  }
  .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: 18px;
  }
  .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-liste a {
    grid-template-columns: 12px minmax(0, 1fr);
  }
  .karte-liste .t-meta {
    grid-column: 2;
  }
  .orte-leiste {
    grid-auto-columns: max-content;
    gap: 8px;
    margin: 0 -16px;
    padding: 16px 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 {
    scroll-snap-align: start;
  }
  .orte-leiste button, .orte-leiste li + li button {
    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[aria-pressed=true] {
    background: #1f2a26;
    border-color: #1f2a26;
  }
  .orte-leiste button:focus-visible {
    outline-offset: 2px;
  }
  .ort__kopf {
    align-items: center;
    gap: 8px;
  }
  .ort__name {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .orte-leiste button:hover .ort__name {
    color: #1f2a26;
  }
  .orte-leiste button[aria-pressed=true] .ort__name {
    color: #ffffff;
  }
  .ort__zahl b {
    font-size: 12px;
    font-weight: 600;
    color: #5b6560;
  }
  .orte-leiste button[aria-pressed=true] .ort__zahl b {
    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;
  }
  .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;
  }
  .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: 18px;
  }
  .amt-zeile__titel {
    font-size: 17px;
  }
  .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;
  }
  .beitrag {
    padding-top: 20px;
  }
  .themen-kopf-bereich {
    padding: 20px 0 0;
  }
  .abschnitt--seitenanfang {
    padding-top: 20px;
  }
  .themen-leiste {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .themen-inhalt {
    padding-top: 32px;
  }
  .eintrag-bereich {
    margin-top: 56px;
  }
  .eintrag {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
  }
  .eintrag--ohne-bild {
    grid-template-columns: minmax(0, 1fr);
  }
  .eintrag .bild {
    aspect-ratio: 1/1;
  }
  .eintrag__titel {
    font-size: 17px;
    margin-bottom: 6px;
  }
  .eintrag__text p {
    display: none;
  }
  .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: 17px;
  }
  .vereine-verzeichnis {
    padding-top: 40px;
  }
  .termine-verzeichnis, .amtliches-verzeichnis {
    padding-top: 32px;
  }
  .amtliches-sitzungen {
    padding-top: 28px;
  }
  .termin-gruppe {
    margin-bottom: 40px;
  }
  .termin-gruppe__titel {
    font-size: 19px;
  }
  .vereine-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .vereine-raster .verein {
    min-height: 0;
  }
  .ansicht-leiste {
    justify-content: flex-start;
  }
  .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: 24px;
  }
  .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: 15px;
  }
  .mp-art__lang {
    display: none;
  }
  .mp-art__text {
    display: none;
  }
  /* 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: 14px;
  }
  .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: 19px;
  }
  .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: 16px;
  }
  .beitrag .brotkrumen {
    margin-bottom: 28px;
  }
  .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: 17px;
  }
  .termin-box {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
    gap: 12px 18px;
  }
  .termin-box .mehr {
    grid-column: 1/-1;
    justify-self: start;
  }
  .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);
  }
}
@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) {
  .menue-knopf {
    margin-right: auto;
  }
}