/* Ergänzende Darstellung, die nicht durch theme.json abbildbar ist. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  overflow-x: clip;
}

:where(.seitenkopf, .startseite, .vereinsseite, .seitenfuss),
:where(.seitenkopf, .startseite, .vereinsseite, .seitenfuss) *,
:where(.seitenkopf, .startseite, .vereinsseite, .seitenfuss) *::before,
:where(.seitenkopf, .startseite, .vereinsseite, .seitenfuss) *::after {
  box-sizing: border-box;
}

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

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--wp--preset--spacing--30);
  left: var(--wp--preset--spacing--30);
  z-index: 1000;
  padding: 0.75em 1em;
  border-radius: 999px;
  background: var(--wp--preset--color--forest-deep);
  color: var(--wp--preset--color--paper);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--wp--preset--color--paper);
  border-radius: 4px;
}

:where(.wp-element-button, button, [role="button"]) {
  min-height: 2.75rem;
  transition:
    transform 100ms ease-out,
    box-shadow 180ms ease-out,
    background-color 180ms ease-out;
}

:where(.wp-element-button, button, [role="button"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.8rem
    color-mix(in srgb, var(--wp--preset--color--ink) 16%, transparent);
}

:where(.wp-element-button, button, [role="button"]):active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.eyebrow {
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  letter-spacing: var(--wp--custom--typography--eyebrow--letter-spacing);
  line-height: var(--wp--custom--typography--eyebrow--line-height);
  text-transform: uppercase;
}

.has-display-font-size {
  letter-spacing: var(--wp--custom--typography--display--letter-spacing);
  line-height: var(--wp--custom--typography--display--line-height);
}

.has-h-2-font-size {
  letter-spacing: var(--wp--custom--typography--h-2--letter-spacing);
  line-height: var(--wp--custom--typography--h-2--line-height);
}

.has-h-3-font-size {
  letter-spacing: var(--wp--custom--typography--h-3--letter-spacing);
  line-height: var(--wp--custom--typography--h-3--line-height);
}

.has-lead-font-size {
  letter-spacing: var(--wp--custom--typography--lead--letter-spacing);
  line-height: var(--wp--custom--typography--lead--line-height);
}

.has-body-font-size {
  letter-spacing: var(--wp--custom--typography--body--letter-spacing);
  line-height: var(--wp--custom--typography--body--line-height);
}

.has-small-font-size {
  letter-spacing: var(--wp--custom--typography--small--letter-spacing);
  line-height: var(--wp--custom--typography--small--line-height);
}

.eyebrow::before {
  display: inline-block;
  width: 2.5rem;
  height: 0.2em;
  margin-right: 0.8em;
  vertical-align: 0.2em;
  background: var(--wp--preset--color--itwo);
  content: "";
}

.sektion--dunkel .eyebrow::before,
.hero-verein .eyebrow::before {
  background: var(--wp--preset--color--spring-bud);
}

/* Wiederkehrende Bogenmaske für Personenbilder. */
.bogenmaske,
.bogenmaske img,
img.bogenmaske,
.angebot-portrait img {
  overflow: hidden;
  border-radius: 220px 220px 24px 24px;
}

.bogenmaske img,
img.bogenmaske,
.angebot-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Translucente Kopfzeile mit weicher Scrollkante statt Trennlinie. */
.seitenkopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(
    in srgb,
    var(--wp--preset--color--paper) 72%,
    transparent
  );
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

.seitenkopf::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 1.5rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent),
    transparent
  );
  opacity: 0;
  transition: opacity 180ms ease-out;
  content: "";
}

.seitenkopf.hat-scrollkante::after {
  opacity: 1;
}

.seitenkopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 1360px);
  min-height: 5.25rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  gap: var(--wp--preset--spacing--40);
}

.seitenkopf__marke {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.seitenkopf__logo {
  display: block;
  width: auto;
}

.seitenkopf__logo--i-tuas {
  height: 2.75rem;
}

.seitenkopf__logo--msg {
  height: 3.5rem;
}

.hauptnavigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.hauptnavigation a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--wp--preset--color--ink);
  font-weight: 650;
  text-decoration: none;
}

.hauptnavigation a:hover {
  color: var(--wp--preset--color--forest);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.3em;
}

.hauptnavigation .hauptnavigation__aktion {
  padding-inline: 1.25em;
  border-radius: 999px;
  background: var(--wp--preset--color--forest);
  color: var(--wp--preset--color--paper);
}

.hauptnavigation .hauptnavigation__aktion:hover {
  background: var(--wp--preset--color--forest-deep);
  color: var(--wp--preset--color--paper);
  text-decoration: none;
}

.menue-schalter {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--forest);
  color: var(--wp--preset--color--paper);
}

.menue-schalter__linien,
.menue-schalter__linien::before,
.menue-schalter__linien::after {
  display: block;
  width: 1.2rem;
  height: 0.12rem;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 180ms ease-out,
    opacity 180ms ease-out;
  content: "";
}

.menue-schalter__linien {
  position: relative;
}

.menue-schalter__linien::before,
.menue-schalter__linien::after {
  position: absolute;
  left: 0;
}

.menue-schalter__linien::before {
  top: -0.38rem;
}

.menue-schalter__linien::after {
  top: 0.38rem;
}

.menue-schalter[aria-expanded="true"] .menue-schalter__linien {
  background: transparent;
}

.menue-schalter[aria-expanded="true"] .menue-schalter__linien::before {
  top: 0;
  background: currentColor;
  transform: rotate(45deg);
}

.menue-schalter[aria-expanded="true"] .menue-schalter__linien::after {
  top: 0;
  background: currentColor;
  transform: rotate(-45deg);
}

/* Timeline: Linie und Marker bleiben in hellen und dunklen Flächen lesbar. */
.timeline {
  position: relative;
  display: grid;
  gap: var(--wp--preset--spacing--50);
  margin: var(--wp--preset--spacing--50) 0;
  padding-left: var(--wp--preset--spacing--50);
}

.timeline::before {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.7rem;
  width: 0.18rem;
  border-radius: 999px;
  background: var(--wp--preset--color--sage-light);
  content: "";
}

.timeline__eintrag {
  position: relative;
}

.timeline__eintrag::before {
  position: absolute;
  top: 0.55em;
  left: -2.3rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 0.2rem solid var(--wp--preset--color--forest);
  border-radius: 999px;
  background: var(--wp--preset--color--sage-light);
  content: "";
}

.has-forest-background-color .timeline__eintrag::before,
.has-forest-deep-background-color .timeline__eintrag::before {
  border-color: var(--wp--preset--color--paper);
}

.timeline__jahr {
  margin: 0 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--spring-bud);
  font-family: var(--wp--preset--font-family--source-serif-4);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 700;
  line-height: 1.25;
}

/* Erst JavaScript macht Elemente unsichtbar; ohne JS bleibt alles lesbar. */
.js .reveal-bereit {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .reveal-bereit.ist-sichtbar {
  opacity: 1;
  transform: translateY(0);
}

/* Vor dem Klick enthält der Video-Consent-Bereich nur lokale Inhalte. */
.video-consent {
  position: relative;
  overflow: hidden;
  border-radius: 1.375rem;
  background: var(--wp--preset--color--forest-deep);
  color: var(--wp--preset--color--paper);
}

.video-consent__medium,
.video-consent iframe,
.video-consent video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.video-consent__aktion {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--wp--preset--spacing--40);
  border: 0;
  border-radius: 0;
  background: color-mix(
    in srgb,
    var(--wp--preset--color--forest-deep) 64%,
    transparent
  );
  color: var(--wp--preset--color--paper);
  text-align: center;
}

/* Sektionsaufbau und Inhaltskarten für die statischen Patterns. */
.sektion {
  padding-block: clamp(2.25rem, 5vw, 4rem);
}

.sektion--dunkel {
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  border-radius: 2.25rem;
}

.sektion--dunkel :where(a:not(.wp-element-button)) {
  color: var(--wp--preset--color--spring-bud);
}

.hero-gernot__layout,
.video-paralympics .wp-block-columns,
.buch .wp-block-columns,
.warum-msg .wp-block-columns {
  gap: clamp(2.5rem, 7vw, 7rem);
}

@media (min-width: 782px) {
  .video-paralympics .msg-video {
    margin-top: 4rem;
  }
}

.hero-gernot__medium {
  position: relative;
}

.hero-gernot__medium .wp-block-image {
  aspect-ratio: 4 / 3;
}

.hero-gernot__zitat {
  position: relative;
  width: min(88%, 28rem);
  margin: -3rem auto 0;
  padding: var(--wp--preset--spacing--40);
  border: 0;
  border-radius: 1.375rem;
  background: color-mix(
    in srgb,
    var(--wp--preset--color--paper) 88%,
    transparent
  );
  box-shadow: 0 1rem 3rem
    color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hero-gernot__zitat p {
  margin: 0;
  font-family: var(--wp--preset--font-family--source-serif-4);
  font-size: var(--wp--preset--font-size--h-3);
}

.fakten-strip {
  padding-block: var(--wp--preset--spacing--50);
}

.fakten-strip__raster {
  margin-block: 0;
}

.fakten-strip__raster .wp-block-column {
  padding-inline: var(--wp--preset--spacing--30);
  border-left: 0.18rem solid var(--wp--preset--color--sage);
}

.fakten-strip__wert,
.fakten-strip__raster p {
  margin-block: 0;
}

.fakten-strip__wert {
  font-family: var(--wp--preset--font-family--source-serif-4);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 600;
  letter-spacing: var(--wp--custom--typography--h-3--letter-spacing);
  line-height: var(--wp--custom--typography--h-3--line-height);
}

.kartenraster {
  align-items: stretch;
}

.karte {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 0.08rem solid var(--wp--preset--color--line);
  border-radius: 1.375rem;
  background: var(--wp--preset--color--paper);
}

.karte__nummer {
  margin: 0;
  color: var(--wp--preset--color--forest);
  font-family: var(--wp--preset--font-family--source-serif-4);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 700;
}

.plan-b__schluss {
  max-width: none;
  margin-top: var(--wp--preset--spacing--60);
}

.zitat-gross__text {
  max-width: 62rem;
  padding-left: clamp(1.5rem, 5vw, 4rem);
  border-left-width: 0.35rem;
}

.zitat-gross__text p {
  font-size: var(--wp--preset--font-size--h-2);
  letter-spacing: var(--wp--custom--typography--h-2--letter-spacing);
  line-height: var(--wp--custom--typography--h-2--line-height);
}

.buch__cover {
  max-width: 32rem;
  margin-inline: auto;
}

.buch__cover img {
  filter: drop-shadow(
    0 1.5rem 2rem
      color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent)
  );
}

.buch__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--wp--preset--spacing--30);
}

.buch__aktionen > :where(.wp-block-button, .buch-bestellung-schalter) {
  flex: 1 1 12rem;
  margin: 0;
}

.buch__aktionen .wp-block-button__link,
.buch-bestellung-schalter {
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.buch-bestellung-schalter {
  display: none;
  border: 0;
  cursor: pointer;
}

.js .buch-bestellung-schalter:not([hidden]) {
  display: inline-flex;
}

.formularplatz {
  margin-top: var(--wp--preset--spacing--60);
}

/* Im Dialog sitzt das Formular direkt unter der Überschrift. */
.msg-formular-dialog .formularplatz {
  margin-top: var(--wp--preset--spacing--40);
}

.formularplatz .fluentform {
  max-width: 52rem;
}

.formularplatz .frm-fluent-form > fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.formularplatz
  :where(
    input,
    select,
    textarea,
    .ff-el-form-control,
    .ff-el-form-check-label,
    .ff-btn-submit
  ) {
  font: inherit;
}

.formularplatz .ff-el-form-control {
  min-width: 0;
  width: 100%;
  min-height: 3rem;
  padding: 0.75em 0.9em;
  border: 0.08rem solid var(--wp--preset--color--line);
  border-radius: 0.55rem;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

.formularplatz textarea.ff-el-form-control {
  height: 4rem;
  min-height: 4rem;
  resize: vertical;
}

/* Safari auf iOS gibt Datumsfeldern eine eigene Innendarstellung: Sie
   werden höher als die übrigen Felder und lassen sich nicht unter ihre
   Eigenbreite verkleinern, width und padding wirken nicht. Ohne die
   Systemdarstellung folgt das Feld wieder dem Raster. */
.formularplatz input[type="date"].ff-el-form-control {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  height: 3rem;
}

.formularplatz .ff-el-input--label label {
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  line-height: 1.3;
}

.formularplatz .ff-el-group {
  min-width: 0;
  margin-bottom: 0;
}

.formularplatz .ff-el-input--label {
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.formularplatz .ff-el-input--label .ff-el-required,
.formularplatz .ff-el-input--label label::after {
  color: var(--wp--preset--color--forest-deep);
}

.formularplatz .msg-formular__gruppe {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.formularplatz .msg-formular__gruppe + .msg-formular__gruppe {
  margin-top: 0.65rem;
}

.formularplatz .msg-formular__gruppe legend {
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0;
  color: var(--wp--preset--color--forest-deep);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  line-height: 1.25;
}

.formularplatz .msg-formular__felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
}

.formularplatz .msg-formular__felder > .ff-el-group {
  grid-column: 1 / -1;
}

.formularplatz--mitglied .msg-formular__gruppe--daten .msg-formular__felder {
  grid-template-areas:
    "anrede anrede"
    "vorname nachname"
    "geburtsdatum telefon"
    "adresse adresse"
    "plz ort"
    "land email";
}

.formularplatz--mitglied .ff-el-group:has([name="anrede"]) {
  grid-area: anrede;
}
.formularplatz--mitglied .ff-el-group:has([name="vorname"]) {
  grid-area: vorname;
}
.formularplatz--mitglied .ff-el-group:has([name="nachname"]) {
  grid-area: nachname;
}
.formularplatz--mitglied .ff-el-group:has([name="geburtsdatum"]) {
  grid-area: geburtsdatum;
}
.formularplatz--mitglied .ff-el-group:has([name="telefon"]) {
  grid-area: telefon;
}
.formularplatz--mitglied .ff-el-group:has([name="adresse"]) {
  grid-area: adresse;
}
.formularplatz--mitglied .ff-el-group:has([name="plz"]) {
  grid-area: plz;
}
.formularplatz--mitglied .ff-el-group:has([name="ort"]) {
  grid-area: ort;
}
.formularplatz--mitglied .ff-el-group:has([name="land"]) {
  grid-area: land;
}
.formularplatz--mitglied .ff-el-group:has([name="email"]) {
  grid-area: email;
}

.formularplatz--buch .msg-formular__gruppe--daten .msg-formular__felder {
  grid-template-areas:
    "vorname nachname"
    "strasse strasse"
    "plz ort"
    "land land"
    "email telefon";
}

.formularplatz--buch .ff-el-group:has([name="vorname"]) {
  grid-area: vorname;
}
.formularplatz--buch .ff-el-group:has([name="nachname"]) {
  grid-area: nachname;
}
.formularplatz--buch .ff-el-group:has([name="strasse"]) {
  grid-area: strasse;
}
.formularplatz--buch .ff-el-group:has([name="plz"]) {
  grid-area: plz;
}
.formularplatz--buch .ff-el-group:has([name="ort"]) {
  grid-area: ort;
}
.formularplatz--buch .ff-el-group:has([name="land"]) {
  grid-area: land;
}
.formularplatz--buch .ff-el-group:has([name="email"]) {
  grid-area: email;
}
.formularplatz--buch .ff-el-group:has([name="telefon"]) {
  grid-area: telefon;
}

/* Auf Telefonen sind zwei Spalten zu schmal: bei 320 px bleiben je
   Spalte 108 px, dort läuft "Geburtsdatum" in die Nachbarspalte.
   Nur PLZ und Ort bleiben gepaart, beide Beschriftungen sind kurz. */
@media (max-width: 30rem) {
  .formularplatz--mitglied .msg-formular__gruppe--daten .msg-formular__felder {
    grid-template-areas:
      "anrede anrede"
      "vorname vorname"
      "nachname nachname"
      "geburtsdatum geburtsdatum"
      "telefon telefon"
      "adresse adresse"
      "plz ort"
      "land land"
      "email email";
  }

  .formularplatz--buch .msg-formular__gruppe--daten .msg-formular__felder {
    grid-template-areas:
      "vorname vorname"
      "nachname nachname"
      "strasse strasse"
      "plz ort"
      "land land"
      "email email"
      "telefon telefon";
  }
}

.formularplatz
  :where(
    .ff-el-group:has([name="anrede"]),
    .ff-el-group:has([name="land"][type="radio"])
  )
  .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.8rem;
}

.formularplatz :where(.ff-el-form-check, .ff-el-form-check-label) {
  min-height: 2.75rem;
}

.formularplatz .ff-el-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
}

.formularplatz .ff-el-form-check {
  margin-bottom: 0;
}

.formularplatz .ff-el-input--content {
  line-height: 1.3;
}

.formularplatz :where(input[type="radio"], input[type="checkbox"]) {
  /* Ohne flex: none schrumpft das Kästchen als Flex-Kind der
     Beschriftung bei langem Text auf bis zu 13 px zusammen. */
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  min-height: 1.35rem;
  margin: 0;
  accent-color: var(--wp--preset--color--forest-deep);
}

/* Fluent Forms blendet bedingte Felder standardmäßig aus und zeigt sie nicht
   selbst wieder an: Die Versandzeile blieb dadurch auch bei erfüllter
   Bedingung unsichtbar, obwohl sie im Gesamtbetrag steckt. */
.formularplatz .has-conditions.msg-formular__berechnung:not(.ff_excluded) {
  display: block;
}

.formularplatz .msg-formular__berechnung .ff-el-form-control {
  border-color: var(--wp--preset--color--sage);
  background: var(--wp--preset--color--sage-light);
  font-weight: 700;
}

.formularplatz .ff-btn-submit {
  min-height: 3rem;
  padding: 0.85em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--forest);
  color: var(--wp--preset--color--paper);
  font-weight: 700;
}

.formularplatz .ff_submit_btn_wrapper {
  margin-top: 0.9rem;
}

.formularplatz :where(.ff-el-is-error .ff-el-form-control, .error) {
  border-color: var(--wp--preset--color--ink);
}

.formularplatz .ff-el-is-error .text-danger {
  color: var(--wp--preset--color--forest-deep);
  font-size: var(--wp--preset--font-size--small);
}

/* Vereinsdaten sind Registerangaben, keine Botschaft: Sie standen bisher als
   dunkelgrüne Fläche mit großer Überschrift genauso präsent da wie die
   Timeline und der Verein-CTA. Jetzt eine ruhige Schlusszone zusammen mit
   dem medizinischen Hinweis darunter - dieselbe Behandlung: feine Linie,
   kleine Schrift, gedämpfte Farbe, keine Farbfläche. Die Überschrift bleibt
   im Markup erhalten, damit der Abschnitt in der Gliederung benannt bleibt. */
/* main ist auf beiden Seiten alignfull mit Flow-Layout - darin bleibt
   "alignwide" wirkungslos und Abschnitte laufen bis an die Fensterkante.
   Bei einer getönten Fläche mit runden Ecken sieht das nach Fehler aus,
   deshalb begrenzt sich dieser Block selbst. Der Innenabstand fällt für die
   Textkante nicht ins Gewicht, solange der Inhaltsbereich breiter als
   1180px bleibt: Die zentrierten Kinder landen dann ohnehin auf derselben
   Linie wie der Text der übrigen Abschnitte. */
.vereinsdaten,
.vereinsdaten + .hinweis-medizinisch {
  width: min(
    var(--wp--style--global--wide-size),
    100% - 2 * clamp(1.25rem, 5vw, 3rem)
  );
  margin-inline: auto;
}

.vereinsdaten {
  margin-block: var(--wp--preset--spacing--60) 0;
  padding: var(--wp--preset--spacing--40) clamp(1.25rem, 5vw, 3rem);
  border-radius: 1.375rem 1.375rem 0 0;
  background: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--typography--small--line-height);
}

.vereinsdaten :where(p) {
  margin-block: 0 var(--wp--preset--spacing--20);
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.vereinsdaten .wp-block-heading {
  margin-block: 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

/* Direkt unter den Vereinsdaten bilden Hinweis und Datenblock eine gemeinsame
   Fläche: kein Abstand dazwischen, und die Trennlinie des Hinweises entfällt,
   weil die Farbfläche die Trennung bereits übernimmt. Auf der Startseite, wo
   der Hinweis auf den Kontaktbereich folgt, bleibt beides unverändert. */
.vereinsdaten + .hinweis-medizinisch {
  margin-top: 0;
  /* Der Abstand nach oben sitzt am Kind, damit die Trennlinie darüber liegt. */
  padding-block: 0 var(--wp--preset--spacing--40);
  border-top: 0;
  border-radius: 0 0 1.375rem 1.375rem;
  background: var(--wp--preset--color--cream);
}

/* Der Hinweis läuft sonst auf Wide-Breite (1360px), die Vereinsdaten darüber
   aber auf Inhaltsbreite (1180px). In der gemeinsamen Fläche sollen beide
   dieselben Kanten haben; die Trennlinie sitzt am Text und ist damit genauso
   breit wie er. Auf der Startseite bleibt der Hinweis breit. */
.vereinsdaten + .hinweis-medizinisch.is-layout-constrained > * {
  max-width: var(--wp--style--global--content-size);
  padding-top: var(--wp--preset--spacing--40);
  border-top: 0.08rem solid var(--wp--preset--color--line);
}

.hinweis-medizinisch {
  /* Bewusst zurückgenommen: Der Hinweis muss auffindbar sein, soll den
	   Seitenabschluss aber nicht dominieren. Statt Farbfläche nur eine
	   feine Trennlinie und gedämpfter Text. */
  margin-block: var(--wp--preset--spacing--60);
  /* Seitenrand wie im übrigen Layout, damit der Text auf schmalen
	   Geräten nicht an der Bildschirmkante klebt. */
  padding: var(--wp--preset--spacing--40) clamp(1.25rem, 5vw, 3rem) 0;
  border-top: 0.08rem solid var(--wp--preset--color--line);
  border-radius: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--typography--small--line-height);
}

.hinweis-medizinisch.is-layout-constrained > * {
  /* Über die Standardbreite (1180px), aber nicht randlos: die Wide-Breite
	   hält den Text von der Bildschirmkante fern. */
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

.hinweis-medizinisch :where(p, strong) {
  color: var(--wp--preset--color--muted);
  font-size: inherit;
  line-height: inherit;
}

.vereinsseite :where(h1, h2, h3, h4, h5, h6),
.hero-verein :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--wp--preset--font-family--figtree);
}

.hero-verein {
  position: relative;
  min-height: 42rem;
  background-color: var(--wp--preset--color--forest-deep);
  background-image:
    linear-gradient(
      color-mix(
        in srgb,
        var(--wp--preset--color--forest-deep) 86%,
        transparent
      ),
      color-mix(in srgb, var(--wp--preset--color--forest-deep) 86%, transparent)
    ),
    var(--hero-verein-bild);
  background-position: 64% center;
  background-size: cover;
}

.hero-verein__innen {
  position: relative;
}

.hero-verein__eyebrow {
  color: var(--wp--preset--color--spring-bud);
}

.hero-verein h1 {
  max-width: 13ch;
  /* Standardabstand plus 4rem: Der Hero hat unter den Knöpfen Luft bis zur
     Mindesthöhe von 42rem, der Inhalt rückt dadurch nach unten statt die
     Sektion zu vergrößern - die Knöpfe stehen 64px näher am unteren Rand.
     In rem, damit der Abstand bei vergrößerter Schrift mitwächst. Ab etwa
     8rem beginnt die Sektion zu wachsen und der Effekt kehrt sich um. */
  margin-bottom: calc(var(--wp--preset--spacing--50) + 4rem);
}

.hero-verein__nutzen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
  margin-block: var(--wp--preset--spacing--50);
}

.hero-verein__nutzenblock {
  padding-left: var(--wp--preset--spacing--30);
  border-left: 0.18rem solid var(--wp--preset--color--spring-bud);
}

.hero-verein__nutzenblock h2 {
  margin-top: 0;
  /* Reserviert immer den Platz für zwei Zeilen, damit der Fließtext darunter
     in allen drei Spalten auf gleicher Höhe beginnt - unabhängig davon, ob
     die Überschrift in dieser Spalte ein- oder zweizeilig umbricht. */
  min-height: calc(2em * var(--wp--custom--typography--h-2--line-height));
  color: var(--wp--preset--color--spring-bud);
  font-size: var(--wp--preset--font-size--h-3);
}

.hero-verein .is-style-outline .wp-element-button {
  border-color: var(--wp--preset--color--spring-bud);
  background: color-mix(
    in srgb,
    var(--wp--preset--color--forest-deep) 72%,
    transparent
  );
  color: var(--wp--preset--color--paper);
}

.warum-msg__bild img {
  width: 100%;
  aspect-ratio: 1400 / 933;
  border-radius: 1.375rem;
  object-fit: cover;
}

.msg-chips {
  gap: var(--wp--preset--spacing--30);
  margin-block: var(--wp--preset--spacing--50);
}

.msg-chips span {
  padding: 0.65em 1em;
  border: 0.08rem solid var(--wp--preset--color--sage);
  border-radius: 999px;
  background: var(--wp--preset--color--paper);
  font-weight: 650;
}

.angebote-mitglieder__cta,
.angebote-mitglieder__recht {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

.angebote-mitglieder__cta {
  margin-top: var(--wp--preset--spacing--50);
  font-weight: 700;
}

.angebote-mitglieder__recht {
  padding-top: var(--wp--preset--spacing--30);
  border-top: 0.08rem solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--muted);
}

.mitgliedschaft-tabelle {
  overflow-x: auto;
  border-radius: 1.375rem;
  background: var(--wp--preset--color--paper);
  contain: layout;
}

.mitgliedschaft-tabelle table {
  min-width: 48rem;
  border-collapse: collapse;
}

.mitgliedschaft-tabelle th,
.mitgliedschaft-tabelle td {
  padding: var(--wp--preset--spacing--30);
  border-color: var(--wp--preset--color--line);
  text-align: left;
}

.mitgliedschaft-tabelle thead th:nth-child(3),
.mitgliedschaft-tabelle tbody td:nth-child(3) {
  background: var(--wp--preset--color--sage-light);
}

.mitgliedschaft-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mitgliedschaft-status svg {
  inline-size: 1.4em;
  block-size: 1.4em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

/* Dynamische Inhalte aus dem MSG-Core-Plugin. */
.msg-angebote__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
}

.msg-angebote--spalten-2 .msg-angebote__raster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.msg-angebot-eintrag,
.msg-angebot {
  min-width: 0;
}

/* Rasterpunkt ist der Eintrag, nicht die Karte: Das Raster streckt nur den
   Eintrag auf Reihenhoehe, die Karte darin blieb inhaltshoch. Als Spalte mit
   flex:1 fuellt die Karte den Eintrag aus, damit Ober- und Unterkanten einer
   Reihe buendig sind. Der Dialog bleibt als zweites Flex-Element darunter und
   damit im Ohne-JavaScript-Rueckfall an seinem Platz. */
.msg-angebot-eintrag {
  display: flex;
  flex-direction: column;
}

.msg-angebot-eintrag > .msg-angebot {
  flex: 1;
}

.msg-angebot {
  /* Spalte, damit alle Karten einer Reihe gleich hoch sind und der
	   Knopf unten bündig sitzt — unabhängig von der Textlänge. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0.08rem solid var(--wp--preset--color--line);
  border-radius: 1.375rem;
  background: var(--wp--preset--color--paper);
}

.msg-angebot__inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.msg-angebot__mehr {
  margin-top: auto;
  align-self: flex-start;
  border: 0;
  cursor: pointer;
}

.msg-angebot__portrait {
  aspect-ratio: 1;
}

/* Kennzeichnung KI-generierter Portraits: kleines Schild am unteren Bildrand. */
.msg-angebot__portrait,
.msg-dialog__portrait {
  position: relative;
}

.msg-angebot__ki-hinweis {
  position: absolute;
  inset-inline-end: var(--wp--preset--spacing--20);
  bottom: var(--wp--preset--spacing--20);
  padding: 0 var(--wp--preset--spacing--20);
  border-radius: 2px;
  background: color-mix(in srgb, var(--wp--preset--color--forest-deep) 55%, transparent);
  color: var(--wp--preset--color--paper);
  font-size: 0.6875rem;
  line-height: 1.5;
}

/* Partner-Logos: ganz sichtbar statt zugeschnitten, auf ruhigem Grund. */
.msg-partner__bild {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--cream);
}

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

.msg-angebot__bild,
.msg-angebot__platzhalter {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg-angebot__inhalt {
  padding: var(--wp--preset--spacing--40);
}

.msg-angebot__funktion {
  display: inline-flex;
  margin-block: 0 var(--wp--preset--spacing--30);
  padding: 0.4em 0.7em;
  border-radius: 999px;
  background: var(--wp--preset--color--eggshell);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
}

.sektion--dunkel .msg-angebot__funktion {
  background: var(--wp--preset--color--spring-bud);
}

.msg-angebot__kontakt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
  list-style: none;
}

.msg-angebot__kontakt li {
  margin: 0;
}

.msg-angebot__kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  /* Lange Adressen dürfen die Kartenbreite nicht sprengen und sollen
	   trotzdem nicht mitten im Wort brechen. */
  overflow-wrap: anywhere;
  hyphens: none;
}

.js .msg-angebot__mehr:not([hidden]) {
  display: inline-flex;
}

.msg-dialog {
  width: min(58rem, calc(100% - 2.5rem));
  max-height: calc(100dvh - 2.5rem);
  padding: 0;
  border: 0;
  border-radius: 1.375rem;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  box-shadow: 0 1.5rem 4rem
    color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent);
}

/* Formulardialoge sind breiter als die Angebotskarten und einspaltig -
   ein Formular hat keine Portraitspalte. Die Höhe begrenzt der Dialog
   selbst, gescrollt wird innen. */
.msg-formular-dialog {
  width: min(52rem, calc(100% - 2.5rem));
}

.msg-formular-dialog .msg-dialog__innen {
  grid-template-columns: minmax(0, 1fr);
}

.msg-formular-dialog .msg-dialog__inhalt {
  padding-top: 0;
}

.msg-formular-dialog .msg-dialog__inhalt > h2 {
  margin-block: 0;
  padding-right: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--h-3);
  line-height: var(--wp--custom--typography--h-3--line-height);
}

.msg-dialog::backdrop {
  background: color-mix(
    in srgb,
    var(--wp--preset--color--forest-deep) 82%,
    transparent
  );
}

.msg-dialog__innen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.5fr);
  gap: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--50);
}

.msg-dialog__schliessen {
  position: absolute;
  top: var(--wp--preset--spacing--30);
  right: var(--wp--preset--spacing--30);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--forest-deep);
  color: var(--wp--preset--color--paper);
  font: inherit;
  font-size: var(--wp--preset--font-size--h-3);
  line-height: 1;
  cursor: pointer;
}

.msg-dialog__portrait {
  align-self: start;
  aspect-ratio: 1;
}

.msg-dialog__inhalt {
  min-width: 0;
  padding-top: var(--wp--preset--spacing--40);
}

.msg-dialog__inhalt h3 {
  padding-right: var(--wp--preset--spacing--50);
}

.msg-dialog__adresse,
.msg-dialog__kontakte {
  overflow-wrap: anywhere;
}

.msg-dialog__langtext {
  margin-top: var(--wp--preset--spacing--40);
}

html:not(.js) .msg-dialog,
html.js:not(.dialog-unterstuetzt) .msg-dialog {
  display: block;
  position: static;
  width: 100%;
  max-height: none;
  margin-top: var(--wp--preset--spacing--30);
  box-shadow: none;
}

html:not(.js) .msg-dialog__schliessen,
html.js:not(.dialog-unterstuetzt) .msg-dialog__schliessen {
  display: none;
}

.msg-angebote__leerzustand,
.msg-termine__leerzustand {
  padding: var(--wp--preset--spacing--50);
  border: 0.08rem solid var(--wp--preset--color--line);
  border-radius: 1.375rem;
  background: var(--wp--preset--color--paper);
}

.msg-termine__liste {
  display: grid;
  gap: var(--wp--preset--spacing--40);
}

.msg-termin {
  display: grid;
  /* Feste Datumsspalte statt mitwachsendem Anteil: So beginnen die
     Überschriften aller Termine auf derselben Linie und der Text steht
     dicht am Datum. */
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--40);
  border: 0.08rem solid var(--wp--preset--color--line);
  border-radius: 1.375rem;
  background: var(--wp--preset--color--paper);
}

.msg-termin__datum {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Vorschaubild eines YouTube-Videos: nimmt in der Datumsspalte deren Platz
   ein, weil ein Video kein Datum hat. */
.msg-termin__vorschaubild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;
  object-fit: cover;
}

/* Reine Textkennzeichnung des Eintragstyps - muss auch ohne
   Farbwahrnehmung verständlich sein, deshalb keine Farbcodierung. */
.msg-termin__typ {
  margin: 0 0 0.15rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: var(--wp--custom--typography--eyebrow--letter-spacing);
  text-transform: uppercase;
}

/* Das Datum tritt so auf wie die Terminüberschrift daneben - gleiche
   Schriftfamilie, Größe, Stärke und Zeilenhöhe wie ein h3. */
.msg-termin__datum time,
.msg-termin__titel {
  font-family: var(--wp--preset--font-family--source-serif-4);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 600;
  letter-spacing: var(--wp--custom--typography--h-3--letter-spacing);
  line-height: var(--wp--custom--typography--h-3--line-height);
}

/* theme.json setzt für h3 keine Abstände, also greift der Browser-Standard
   margin-block: 1em - dadurch stünde die Überschrift tiefer als das Datum
   in der Spalte daneben. */
.msg-termin__titel {
  margin-block: 0;
}

.msg-termin__uhrzeit {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.msg-termin__ort {
  margin-block: var(--wp--preset--spacing--20) 0;
}

.msg-termin__ort-label {
  font-weight: 700;
}

/* Am Desktop stehen die Knöpfe rechts neben Überschrift und Ort.
   align-items: flex-start hält den Textblock oben, damit das Datum in der
   Spalte daneben auf gleicher Höhe mit der Überschrift bleibt - auch wenn
   die Knopfreihe einmal höher werden sollte als der Text. */
.msg-termin__inhalt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
}

.msg-termin__text {
  min-width: 0;
}

.msg-termin__aktionen {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-self: center;
  gap: var(--wp--preset--spacing--30);
}

/* Ohne JavaScript gibt es keinen Dialog - dann bleibt der Knopf verborgen
   und der Text steht stattdessen unter der Karte. */
.msg-termin__mehr {
  display: none;
  border: 0;
  cursor: pointer;
}

.js .msg-termin__mehr:not([hidden]) {
  display: inline-flex;
}

/* Terminbilder sind Veranstaltungsfotos im Querformat, nicht Portraits:
   deshalb über dem Text statt in einer Seitenspalte. */
.msg-termin-dialog .msg-dialog__innen {
  grid-template-columns: minmax(0, 1fr);
}

.msg-termin-dialog__bild {
  overflow: hidden;
  border-radius: 1.375rem;
}

.msg-termin-dialog__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.msg-termin-dialog__eckdaten {
  margin-top: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--muted);
}

.msg-video__datei {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.375rem;
  background: var(--wp--preset--color--forest-deep);
}

.erfolgsliste li + li {
  margin-top: var(--wp--preset--spacing--20);
}

/* Rechtsseiten (Impressum, Datenschutz, Cookie-Richtlinie) laufen ueber
   templates/page.html. Die Schriftgroessen der Startseite sind fuer
   mehrseitige Rechtstexte zu gross, und ueber die volle Inhaltsbreite von
   1180px stehen mehr als 110 Zeichen in einer Zeile. Hier deshalb eine
   eigene, kleinere Leseskala mit schmalerem Satzspiegel. */
.seiteninhalt .wp-block-post-title,
.seiteninhalt .wp-block-post-content > * {
  max-width: 36rem;
  margin-inline: 0;
}

.seiteninhalt .wp-block-post-title {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  line-height: 1.15;
}

.seiteninhalt .wp-block-post-content {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.seiteninhalt .wp-block-post-content h2 {
  margin-block: 2.25rem 0.5rem;
  font-size: clamp(1.3rem, 1.9vw, 1.5rem);
  line-height: 1.25;
}

.seiteninhalt .wp-block-post-content h3 {
  margin-block: 1.5rem 0.35rem;
  font-size: 1.125rem;
  line-height: 1.35;
}

.seiteninhalt .wp-block-post-content :where(p, ul, ol) {
  margin-block: 0 0.9rem;
}

.seiteninhalt .wp-block-post-content li + li {
  margin-top: 0.35rem;
}

.seiteninhalt .wp-block-post-content a {
  text-underline-offset: 0.15em;
}

/* Cookie-Tabelle auf der Cookie-Richtlinie. Schmale Spalten, deshalb bei
   Bedarf seitlich scrollbar statt umbrechend. */
.seiteninhalt .rechtstabelle {
  overflow-x: auto;
  margin-block: 0 1.25rem;
  contain: layout;
}

.seiteninhalt .rechtstabelle table {
  min-width: 28rem;
  border-collapse: collapse;
}

.seiteninhalt .rechtstabelle :where(th, td) {
  padding: 0.5rem 0.75rem;
  border: 0.06rem solid var(--wp--preset--color--line);
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.seiteninhalt .rechtstabelle thead th {
  background: var(--wp--preset--color--cream);
  font-weight: 600;
}

.seiteninhalt .rechtstabelle tbody th {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Cookie-Namen sind Bezeichner - lieber seitlich scrollen als mitten
     im Wort umbrechen. */
  white-space: nowrap;
}

/* Entwurfshinweis als abgesetzter Kasten statt als eingefaerbter Absatz. */
.seiteninhalt .rechtlicher-entwurf {
  padding: 0.9rem 1.1rem;
  border-inline-start: 3px solid var(--wp--preset--color--forest-deep);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Vierspaltige Fusszeile. Ab 782px stellt WordPress die Spalten nebeneinander;
   als Raster statt Flexbox bleiben die Spaltenpositionen fest, unabhaengig
   davon, wie viel Platz einzelne Spalten beanspruchen.
   Zwischen 782 und 1023px sind vier Spalten zu schmal, dort 2x2. */
@media (min-width: 782px) {
  .seitenfuss__spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--50);
  }
}

@media (min-width: 1024px) {
  .seitenfuss__spalten {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Spendenkonto rueckt naeher an Kontakt heran. Weil die Rasterspalten fest
     stehen, verschiebt sich nur dieser Block - Spalte 4 bleibt, wo sie ist. */
  .seitenfuss__spalten > .wp-block-column:nth-child(3) {
    margin-inline-start: -1.5rem;
    margin-inline-end: 1.5rem;
  }
}

.seitenfuss__konto {
  overflow-wrap: anywhere;
}

.seitenfuss__sponsor {
  display: inline-block;
  max-width: 12.5rem;
}

.seitenfuss__sponsor img {
  display: block;
  width: 100%;
  height: auto;
}

.seitenfuss__abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.seitenfuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--40);
  margin-inline-start: auto;
}

.seitenfuss__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 4.75rem;
  margin-bottom: var(--wp--preset--spacing--30);
}

.seitenfuss a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
}

/* Gleiche Behandlung für die Links in den Unterstützen-Karten:
   als reine Inline-Links waren sie nur 21px hoch. */
.unterstuetzen .karte a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

:where(.msg-angebot__kontakt, .msg-dialog__kontakte, .vereinsdaten) a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.seitenfuss .wp-block-separator {
  opacity: 0.45;
}

@media (max-width: 48rem) {
  .bogenmaske,
  .bogenmaske img,
  img.bogenmaske,
  .angebot-portrait img {
    border-radius: 160px 160px 20px 20px;
  }

  .seitenkopf__innen {
    flex-wrap: wrap;
    min-height: 4.75rem;
  }

  .seitenkopf__logo--msg {
    /* Untergrenze 3rem: Darunter wird die Zeile „Mit Spass Gesund"
		   unter dem Schriftzug unleserlich. Platz ist da — neben dem
		   44px-Menüschalter bleiben auch bei 320px über 200px frei. */
    height: clamp(3rem, 12vw, 3.5rem);
  }

  .hauptnavigation {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: var(--wp--preset--spacing--30);
  }

  .js .menue-schalter {
    display: grid;
  }

  .js .hauptnavigation {
    position: absolute;
    top: calc(100% - 0.5rem);
    right: clamp(1.25rem, 5vw, 3rem);
    width: min(22rem, calc(100vw - 2.5rem));
    flex-direction: column;
    align-items: stretch;
    padding: var(--wp--preset--spacing--30);
    border-radius: 1.375rem;
    background: var(--wp--preset--color--paper);
    box-shadow: 0 1rem 2.5rem
      color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: scale(0.92) translateY(-0.5rem);
    transform-origin: top right;
    transition:
      opacity 180ms ease-out,
      transform 180ms ease-out,
      visibility 180ms step-end;
  }

  .js .menue-schalter[aria-expanded="true"] + .hauptnavigation {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: scale(1) translateY(0);
    transition-timing-function: ease-out, ease-out, step-start;
  }

  .js .hauptnavigation a {
    width: 100%;
    padding-inline: var(--wp--preset--spacing--30);
  }

  .sektion--dunkel {
    border-radius: 1.25rem;
  }

  .hero-verein {
    min-height: 0;
    background-image: none;
  }

  .hero-verein h1 {
    margin-bottom: var(--wp--preset--spacing--50);
  }

  .hero-verein__nutzen {
    grid-template-columns: 1fr;
  }

  .msg-angebote__raster,
  .msg-angebote--spalten-2 .msg-angebote__raster {
    grid-template-columns: 1fr;
  }

  .msg-termin {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }

  /* Schmal ist kein Platz daneben: Knöpfe rutschen unter den Text. */
  .msg-termin__inhalt {
    flex-direction: column;
    align-items: stretch;
    gap: var(--wp--preset--spacing--30);
  }

  .msg-termin__aktionen {
    align-self: flex-start;
  }

  .msg-dialog__innen {
    grid-template-columns: 1fr;
    padding: var(--wp--preset--spacing--40);
  }

  .msg-dialog__portrait {
    width: min(100%, 18rem);
    margin-inline: auto;
  }

  .buch__aktionen > :where(.wp-block-button, .buch-bestellung-schalter) {
    flex-basis: 100%;
  }

  :where(.mitglied-werden, .buch).sektion {
    padding-block: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
    transition-property: opacity !important;
  }

  :where(.wp-element-button, button, [role="button"]),
  .js .reveal-bereit,
  .js .reveal-bereit.ist-sichtbar,
  .js .hauptnavigation {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .seitenkopf,
  .js .hauptnavigation,
  .video-consent__aktion {
    background: var(--wp--preset--color--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .video-consent__aktion {
    color: var(--wp--preset--color--ink);
  }
}

@media (prefers-contrast: more) {
  .seitenkopf,
  .js .hauptnavigation {
    background: var(--wp--preset--color--paper);
  }

  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
  ):focus-visible {
    outline-width: 3px;
  }

  .timeline::before,
  .timeline__eintrag::before {
    box-shadow: 0 0 0 0.12rem currentColor;
  }
}

/* Kontaktbereich mittig — Text und Knöpfe auf der Seitenachse. */
.kontakt {
  text-align: center;
}

.kontakt .wp-block-buttons {
  justify-content: center;
}

.kontakt :where(p, h2) {
  margin-inline: auto;
}

/* Auslöser für das Mitgliedsformular: mittig unter dem Einleitungstext,
   nicht an der linken Blockkante. */
.mitglied-schalter-rahmen > .mitglied-schalter {
  display: none;
  width: fit-content;
  min-height: 2.75rem;
  /* Zwei Klassen im Selektor, weil WordPress' Layoutregel
	   .is-layout-constrained > :where(…) dieselbe Spezifität hat, später
	   steht und den Knopf sonst über margin-left:auto zentriert. */
  margin-inline: 0;
  border: 0;
  cursor: pointer;
}

.js .mitglied-schalter-rahmen > .mitglied-schalter:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Der Schlusssatz zu Plan B steht mittig über die volle Wide-Breite. */
.plan-b__schluss {
  text-align: center;
}