/* ============================================================
   ICOSIM — Brücke zwischen WordPress-Block-Markup und icosim.css

   Zweck: Der WordPress-Editor erzeugt sein eigenes Gerüst
   (.wp-block-group, .wp-block-columns, .wp-block-button …).
   Diese Datei legt das ICOSIM-Design darauf, ohne dass icosim.css
   angefasst werden muss.

   Grundsatz: KEINE Selektoren mit direktem Kind (>) auf Gruppen-
   Ebene. Je nach WordPress-Version schiebt der Block-Editor eine
   zusätzliche Hülle (.wp-block-group__inner-container) ein. Alle
   Regeln hier funktionieren mit und ohne diese Hülle.
   ============================================================ */

/* ---------- 0. Gutenberg-Grundrauschen abschalten ---------- */

/* Der Editor setzt an fast jedes Element eigene Außenabstände.
   Die Gliederung dieses Designs entsteht aber über gap, nicht
   über margins. Also erst abräumen. */
.wp-block-group p,
.wp-block-group h1,
.wp-block-group h2,
.wp-block-group h3,
.wp-block-group h4,
.wp-block-column p,
.wp-block-column h1,
.wp-block-column h2,
.wp-block-column h3,
.wp-block-column h4,
.wp-block-column figure,
.wp-block-group figure,
.wp-block-group blockquote,
.wp-block-column blockquote {
  margin-top: 0;
  margin-bottom: 0;
}

.wp-block-image { margin: 0; }

/* Das WordPress-Stylesheet hängt unter jeden Spaltensatz noch
   1,75em Luft. Diese Seite gliedert über gap, also weg damit. */
.wp-block-columns,
.wp-block-buttons,
.wp-block-media-text { margin-bottom: 0; }
.wp-block-image img { display: block; max-width: 100%; height: auto; }
.wp-block-video { margin: 0; }
.wp-block-video video { display: block; width: 100%; height: auto; }

/* Der Editor gibt Zitaten eine eigene Randlinie und Kursivschrift.
   Beides widerspricht dem Entwurf. */
.wp-block-quote {
  border: 0;
  padding: 0;
  margin: 0;
  font-style: normal;
}
.wp-block-quote p { margin: 0; }
/* Der Browser rückt Zitate von sich aus um 40px ein. Das ist im
   freigegebenen Entwurf so gewollt und muss erhalten bleiben. */
/* Das Original verlässt sich auf die Browser-Vorgabe blockquote { margin: 1em 40px }.
   width:auto ist nötig, weil ein etwaiges width:100% zusammen mit dem
   Außenabstand über die Spalte hinausragen würde. */
.wp-block-quote.quote { margin-inline: 40px; width: auto; }
.wp-block-quote.quote p {
  font-size: var(--text-xl);
  line-height: 1.5;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.015em;
  max-width: 46ch;
}

/* ---------- 1. Behälter ---------- */

.wp-block-group.wrap,
.wp-block-columns.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.wp-block-group.section { padding-block: clamp(3.75rem, 6.5vw, 5.5rem); }
.wp-block-group.section-sm { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.wp-block-group.no-pad { padding-block: 0; }
.wp-block-group.hero { padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 7vw, 6.5rem); }

/* ---------- 2. Stapel (stack-*) ---------- */

/* WICHTIG: Das ICOSIM-Stylesheet erzeugt die Abstände bereits selbst über
   .stack-N > * + * { margin-top: var(--space-N) }.
   Genau dieser Mechanismus wird unverändert weiterverwendet. Ein
   zusätzliches display:flex mit gap würde beides addieren — die Abstände
   wären exakt doppelt so groß. (Genau dieser Fehler war die Ursache der
   Abweichungen von 40 bis 90 Pixel je Abschnitt.)

   Zu ergänzen ist nur ein Fall: Gutenberg schiebt bei aktiver theme.json
   einen Zwischenbehälter (.wp-block-group__inner-container) ein. Dann
   greift die Regel des Originals eine Ebene zu hoch. Deshalb wird sie hier
   für diese Ebene wiederholt — die Darstellung ist damit identisch, egal
   ob der Zwischenbehälter vorhanden ist oder nicht. */
/* Achtung Gewichtung: Abschnitt 0 oben räumt mit .wp-block-group p { margin: 0 }
   auf. Diese Regel ist stärker als das .stack-N > * + * des Originals und
   würde es aushebeln. Deshalb werden die Abstandsregeln hier mit zwei
   Klassen wiederholt — damit gewinnen sie wieder. */
.wp-block-group.stack-2  > * + *, .wp-block-column.stack-2  > * + * { margin-top: var(--space-2); }
.wp-block-group.stack-3  > * + *, .wp-block-column.stack-3  > * + * { margin-top: var(--space-3); }
.wp-block-group.stack-4  > * + *, .wp-block-column.stack-4  > * + * { margin-top: var(--space-4); }
.wp-block-group.stack-5  > * + *, .wp-block-column.stack-5  > * + * { margin-top: var(--space-5); }
.wp-block-group.stack-6  > * + *, .wp-block-column.stack-6  > * + * { margin-top: var(--space-6); }
.wp-block-group.stack-8  > * + *, .wp-block-column.stack-8  > * + * { margin-top: var(--space-8); }
.wp-block-group.stack-10 > * + *, .wp-block-column.stack-10 > * + * { margin-top: var(--space-10); }

/* Sonderfall aus dem Original: nach einer Zwischenüberschrift ist der
   Abstand zum Text kleiner. */
.wp-block-group.stack-2 > h3 + p, .wp-block-group.stack-2 > h4 + p,
.wp-block-group.stack-3 > h3 + p, .wp-block-group.stack-3 > h4 + p,
.wp-block-column.stack-2 > h3 + p, .wp-block-column.stack-2 > h4 + p,
.wp-block-column.stack-3 > h3 + p, .wp-block-column.stack-3 > h4 + p { margin-top: 0.6rem; }

/* Und dasselbe eine Ebene tiefer, falls Gutenberg den Zwischenbehälter setzt. */
.wp-block-group.stack-2  > .wp-block-group__inner-container > * + * { margin-top: var(--space-2); }
.wp-block-group.stack-3  > .wp-block-group__inner-container > * + * { margin-top: var(--space-3); }
.wp-block-group.stack-4  > .wp-block-group__inner-container > * + * { margin-top: var(--space-4); }
.wp-block-group.stack-5  > .wp-block-group__inner-container > * + * { margin-top: var(--space-5); }
.wp-block-group.stack-6  > .wp-block-group__inner-container > * + * { margin-top: var(--space-6); }
.wp-block-group.stack-8  > .wp-block-group__inner-container > * + * { margin-top: var(--space-8); }
.wp-block-group.stack-10 > .wp-block-group__inner-container > * + * { margin-top: var(--space-10); }

/* ---------- 3. Raster ---------- */

/* Die Spalten des Editors sind Flexbox mit Prozentbreiten. Das
   Original ist ein Grid mit festen Spaltenzahlen. Umstellen. */
.wp-block-columns.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.wp-block-columns.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.wp-block-columns.grid {
  display: grid;
  gap: clamp(2rem, 3.6vw, 3.25rem);
}
.wp-block-columns.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-block-columns.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-columns.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wp-block-columns.gap-5 { gap: var(--space-5); }

.wp-block-columns.weekly-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* Im Grid darf die Spalte ihre Flex-Basis nicht mehr durchsetzen. */
.wp-block-columns.hero-grid > .wp-block-column,
.wp-block-columns.split > .wp-block-column,
.wp-block-columns.grid > .wp-block-column,
.wp-block-columns.weekly-grid > .wp-block-column {
  flex: none;
  flex-basis: auto !important;
  min-width: 0;
  margin-left: 0;
}

/* Im Kopfbereich sitzt das Bild senkrecht mittig neben dem Text.
   Der Editor streckt die Spalte stattdessen auf voller Höhe. */
.wp-block-columns.hero-grid > .wp-block-column,
.wp-block-columns.split > .wp-block-column { align-self: center; }
.wp-block-columns.weekly-grid > .wp-block-column { align-self: start; }

/* Zahlenreihe: hier bleibt Flex richtig, die Spalten sollen aber
   nicht auf gleiche Breite gestreckt werden. */
/* Der Editor verbietet Spalten ab 782px ausdrücklich den Umbruch
   (flex-wrap: nowrap !important im WordPress-Stylesheet). Für die
   Zahlenreihe brauchen wir ihn, also gegenhalten. */
.wp-block-columns.stat-row {
  display: flex;
  flex-wrap: wrap !important;
  gap: clamp(2rem, 5vw, 4rem);
}

/* Trennlinie über der Zahlenreihe. Im Editor über
   "Rahmen: oben" und "Abstände" einstellbar. */
.wp-block-columns.stat-divider {
  margin-top: var(--space-6);
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-6);
}
.wp-block-columns.stat-row > .wp-block-column {
  flex: none;
  flex-basis: auto !important;
  margin-left: 0;
}

/* Der Editor bricht Spalten bei 781px um, das Original bei 940px.
   Angleichen, sonst stimmt das Verhalten am Tablet nicht. */
@media (max-width: 940px) {
  .wp-block-columns.g-3,
  .wp-block-columns.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wp-block-columns.hero-grid,
  .wp-block-columns.split,
  .wp-block-columns.weekly-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wp-block-columns.g-2,
  .wp-block-columns.g-3,
  .wp-block-columns.g-4 { grid-template-columns: 1fr; }
}

/* ---------- 4. Kopfzeile eines Abschnitts ---------- */

.wp-block-group.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.wp-block-group.head-row > * { width: auto; }

/* ---------- 5. Knöpfe ---------- */

/* Der Editor liefert eine eigene Knopfoptik mit. Die muss komplett
   zurückgenommen und durch .btn ersetzt werden. */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}
.wp-block-buttons.is-content-justification-center { justify-content: center; }

/* Wichtig: der Editor hängt die Klasse (btn-primary, btn-lg …) an
   eine zusätzliche Hülle um den Link. icosim.css stylt diese Klassen
   aber als Knopf — sonst bekommt man einen Knopf im Knopf, also
   doppelte Innenabstände und doppelte Hintergrundfarbe. Die Hülle
   wird deshalb zuerst vollständig neutralisiert. */
.wp-block-button.btn,
.wp-block-button.btn-lg,
.wp-block-button.btn-primary,
.wp-block-button.btn-ghost,
.wp-block-button.btn-light,
.wp-block-button.btn-on-deep,
.wp-block-button.link {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
  transform: none;
  gap: 0;
  white-space: normal;
  transition: none;
}

.wp-block-button { margin: 0; }

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.3rem;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); }

.wp-block-button.btn-lg .wp-block-button__link {
  padding: 0.95rem 1.7rem;
  font-size: var(--text-base);
}

.wp-block-button.btn-primary .wp-block-button__link {
  background: var(--c-primary);
  color: #062c3b;
}
.wp-block-button.btn-primary .wp-block-button__link:hover { background: #06bcff; color: #062c3b; }

.wp-block-button.btn-ghost .wp-block-button__link {
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}
.wp-block-button.btn-ghost .wp-block-button__link:hover { border-color: var(--c-ink); background: transparent; }
.tone-deep .wp-block-button.btn-ghost .wp-block-button__link { border-color: rgba(255,255,255,.38); color: #fff; }

.wp-block-button.btn-light .wp-block-button__link { background: #fff; color: #12262f; }
.wp-block-button.btn-on-deep .wp-block-button__link { border-color: rgba(255,255,255,.38); color: #fff; }

/* Textlink mit Pfeil — im Original ein <a class="link">, im Editor
   nur als Knopf-Variante erreichbar. */
.wp-block-button.is-style-link-arrow .wp-block-button__link {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  color: var(--c-primary-ink);
  gap: 0.45rem;
  transition: gap 0.25s var(--ease);
}
.wp-block-button.is-style-link-arrow .wp-block-button__link::after,
.link-wrap a.link::after {
  content: '';
  width: 0.95em;
  height: 0.95em;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8h11M9.5 4l4 4-4 4' stroke='%230b7ba6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wp-block-button.is-style-link-arrow .wp-block-button__link:hover { gap: 0.8rem; transform: none; }

.link-wrap { margin: 0; }
.link-wrap a.link { display: inline-flex; align-items: center; gap: 0.45rem; }
.link-wrap a.link:hover { gap: 0.8rem; }

/* ---------- 6. Karten ---------- */

.wp-block-column.card,
.wp-block-group.card {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Im freigegebenen Entwurf haben die Karten bewusst KEINEN
     eigenen Innenabstand — Symbol, Überschrift und Text sitzen
     direkt aufeinander. Das Symbol bringt seinen Abstand selbst mit. */
  gap: 0;
}
.wp-block-group.card.pad-5 { padding: var(--space-5); position: relative; }

/* Ganze Karte klickbar: der Editor kann eine Gruppe nicht verlinken.
   Das Skript icosim-karten.js hebt den ersten Link im Element auf
   die ganze Fläche. Hier nur die Optik dazu. */
.card-link { text-decoration: none; color: inherit; }
.card-link a { color: inherit; text-decoration: none; }
.card-link[data-klickbar] { cursor: pointer; }
.card-link[data-klickbar]:hover h3,
.card-link[data-klickbar]:hover h4 { color: var(--c-primary-ink); }

.card-num {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-primary-ink);
}

.badge-corner {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
}

/* Symbol als Bildblock statt eingebettetem SVG */
.wp-block-image.pillar-ico {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.wp-block-image.pillar-ico img { width: 26px; height: 26px; }

/* ---------- 7. Termin-Zeilen ---------- */

.wp-block-group.event {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--c-line);
}
.wp-block-group.event > * { width: auto; }
.wp-block-group.stack-4 > .wp-block-group.event:last-child { border-bottom: 1px solid var(--c-line); }

.wp-block-group.event-date { display: block; text-align: left; }
.event-day {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  line-height: 1;
}
.event-mon {
  font-size: var(--text-xs);
  color: var(--c-muted);
  margin-top: 0.25rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Der Entwurf stellt Termine unter 760px einspaltig (icosim.css Z. 854):
   Datum, Titel und Schaltflaeche stehen dann untereinander. Dieselbe Grenze
   und dasselbe Verhalten hier, sonst blieb die Blockfassung am Handy
   zweispaltig und damit rund 40px pro Termin flacher als der Entwurf. */
@media (max-width: 760px) {
  .wp-block-group.event {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }
  .wp-block-group.event > .wp-block-buttons,
  .wp-block-group.event > .btn,
  .wp-block-group.event > a.btn { justify-self: start; }
}

/* ---------- 8. Video-Kacheln ---------- */

.wp-block-column.video-tile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-surface-3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  gap: var(--space-2);
}
.video-tile .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
}
.video-tile .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.video-tile:hover .wp-block-image img { transform: scale(1.035); }

/* Verlauf, damit die Schrift auf jedem Bild lesbar bleibt */
.video-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(9,20,27,.95) 0%, rgba(9,20,27,.86) 30%,
    rgba(9,20,27,.62) 58%, rgba(9,20,27,.3) 80%, rgba(9,20,27,.12) 100%);
  pointer-events: none;
}

/* Abspielknopf */
.video-tile::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.92)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c333d'%3E%3Cpath d='M4.5 2.8v10.4c0 .5.55.8.98.55l8.3-5.2a.65.65 0 0 0 0-1.1l-8.3-5.2A.65.65 0 0 0 4.5 2.8Z'/%3E%3C/svg%3E")
    center/17px no-repeat;
  background-position: 53% 50%;
  transition: transform 0.3s var(--ease);
  pointer-events: none;
}
.video-tile:hover::before { transform: translate(-50%, -50%) scale(1.08); }

/* Mitglieder-Kennzeichnung oben rechts */
.video-tile.has-lock .wp-block-image::after {
  content: 'Mitglieder';
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem 0.28rem 1.55rem;
  font-size: var(--text-xs);
  font-family: var(--font);
  color: #fff;
  background: rgba(12,26,34,.62)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='3' y='7' width='10' height='7' rx='2' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M5.5 7V5.2a2.5 2.5 0 0 1 5 0V7' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat;
  background-position: 0.6rem 50%;
  background-size: 0.85em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
}

.video-tile .video-kicker,
.video-tile h4 {
  position: relative;
  z-index: 2;
  color: #fff;
  width: 100%;
}
.video-tile .video-kicker { color: rgba(255,255,255,.94); }
.video-tile .video-kicker,
.video-tile h4,
.video-tile h4 a { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.video-tile h4 a { color: #fff; text-decoration: none; }

/* ---------- 9. Merkmal-Liste (Diagnostik) ---------- */

.wp-block-media-text.pillar {
  grid-template-columns: 34px auto !important;
  gap: var(--space-4);
  align-items: start;
  margin: 0;
}
.wp-block-media-text.pillar .wp-block-media-text__media { margin: 0; }
.wp-block-media-text.pillar .wp-block-media-text__media img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.wp-block-media-text.pillar .wp-block-media-text__content { padding: 0; }
.wp-block-media-text.pillar p { margin: 0; }
.wp-block-group.pillar-list { gap: var(--space-5); }

/* ---------- 10. Flächen und Kleinteile ---------- */

.wp-block-group.panel {
  background: var(--c-surface-2);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  align-items: flex-start;
}

.wp-block-group.center,
.wp-block-group.center * { text-align: center; }
.wp-block-group.center { align-items: center; }
.wp-block-group.mx-auto { margin-inline: auto; }
.eyebrow.center-flex { justify-content: center; }

.maxw-48 { max-width: 48ch; }
.maxw-52 { max-width: 52ch; }
.maxw-56 { max-width: 56ch; }
/* Muss die Breitenregel von .wrap (1140px) schlagen, daher zwei Klassen. */
.maxw-62 { max-width: 62ch; }
.wp-block-group.wrap.maxw-62 { max-width: 62ch; margin-inline: auto; }
.h2-sm { font-size: var(--text-2xl) !important; }

.wp-block-image.shadow-lg { box-shadow: var(--shadow-lg); }
.wp-block-image.rounded-xl,
.wp-block-video.rounded-xl { border-radius: var(--r-lg); overflow: hidden; }
.wp-block-image.ratio-4-3 { aspect-ratio: 4 / 3; }
.wp-block-image.ratio-4-3 img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-video.video-loop { aspect-ratio: 16 / 9; }
.wp-block-video.video-loop video { width: 100%; height: 100%; object-fit: cover; }

.wp-block-image.hero-arch {
  aspect-ratio: 4 / 4.7;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface-2);
}
.wp-block-image.hero-arch img { width: 100%; height: 100%; object-fit: cover; }
/* icosim.css Z. 655 macht den Bildbogen unter 900px flacher (4/3.2). Diese
   Regel greift nur auf .hero-arch und wird von der Blockfassung oben
   ueberstimmt — deshalb hier mit gleicher Gewichtung wiederholt. */
@media (max-width: 900px) {
  .wp-block-image.hero-arch { aspect-ratio: 4 / 3.2; }
}

/* Partner-Zeile: im Editor ein Absatz mit Links statt Flex-Behälter */
p.partners {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* Die Auszeichnungsfarbe der Überschrift setzt der Editor als
   <mark> mit eigener Klasse. */
.has-icosim-primary-ink-color { color: var(--c-primary-ink); }
mark.has-inline-color { background: transparent; }

/* Die Reiter-Beschriftung steht im Editor als kurzer Absatz am
   Anfang jedes Abschnitts. Auf der Seite selbst gehört sie nicht
   hin — das Skript liest sie aus und baut daraus die Leiste. */
.reiter-label { display: none !important; }

/* Platzhalter für die Formulare, die auf der echten Seite per
   Kurzbefehl vom Plugin kommen. */
.shortcode-platzhalter {
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-sm);
  padding: var(--space-4);
  font-size: var(--text-xs);
  color: var(--c-muted);
  width: 100%;
}

/* ---------------------------------------------------------------
   Merkmal-Liste (Diagnostik): Absatz mit Inline-Symbol statt
   Medien-und-Text-Block. Entspricht dem Fluss der Vorlage:
   34px-Symbolfeld, dann fette Zeile, Fließtext über die ganze Breite.
   --------------------------------------------------------------- */
.wp-block-group.pillar-list > p.pillar,
.wp-block-column.pillar-list > p.pillar,
.wp-block-group.pillar-list > .wp-block-group__inner-container > p.pillar {
  margin: 0;
}
p.pillar > img.pillar-ico-img {
  width: 24px;
  height: 24px;
  margin-inline-end: 10px;
  margin-bottom: var(--space-4);
  vertical-align: middle;
  display: inline-block;
}

/* ---------------------------------------------------------------
   Klassen, die frueher Inline-Stile im Entwurf waren.
   Der Blockeditor kann keine Inline-Stile speichern, deshalb
   bekommen diese Stellen echte Klassen.
   --------------------------------------------------------------- */

/* Fussbereich, erste Spalte */
.footer-intro { color: #8fb2b7; max-width: 34ch; margin-top: .5rem; }
.footer-cta   { margin-top: .75rem; }

/* Karten mit Innenabstand (Weekly-Liste, Beitragsliste) */
.card-pad { padding: var(--space-5); }

/* Zeile mit kleinerem Abstand */
.row-tight { gap: var(--space-3); }

/* Bildmarke, falls der Verein im Customizer ein Logo hinterlegt */
.brand-logo { display: block; height: 44px; width: auto; }

/* Blaetternavigation in Archiven */
.wp-block-post-template + .navigation,
.navigation.pagination { margin-top: var(--space-6); }
.navigation .nav-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.navigation .page-numbers {
  padding: .4rem .8rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--c-ink-soft);
}
.navigation .page-numbers.current { background: var(--c-surface-2); color: var(--c-ink); }

/* ============================================================
   ERGÄNZUNGEN FÜR DIE UNTERSEITEN (elf Seiten)

   Alles ab hier stammt aus den Kommentarblöcken „NEUE KLASSEN"
   der Seiten in seiten/ sowie aus icosim.css. Es wurden keine
   Werte geschätzt: jede Angabe ist entweder eine Regel aus
   icosim.css, die Gutenberg an einem anderen Element ablegt,
   oder eine im Entwurf dokumentierte Inline-Angabe.
   ============================================================ */

/* ---------- 11. Hilfsklassen (seitenübergreifend) ---------- */

/* Breitenbegrenzungen, im Entwurf Inline-Angaben (style="max-width:NNch").
   Grundregel des Entwurfs ist p { max-width: 62ch } — diese Klassen
   heben sie punktuell an. */
.maxw-58 { max-width: 58ch; }
.maxw-64 { max-width: 64ch; }
.maxw-66 { max-width: 66ch; }
.maxw-70 { max-width: 70ch; }
.maxw-80 { max-width: 80ch; }

/* Steht die Breitenangabe am selben Element wie .wrap, muss sie deren
   1140px schlagen — deshalb zwei Klassen (gleiches Muster wie maxw-62). */
.wp-block-group.wrap.maxw-60 { max-width: 60ch; }
.wp-block-group.wrap.maxw-64 { max-width: 64ch; }

/* Absätze mit eigener Zentrierung (im Entwurf style="margin-inline:auto") */
p.mx-auto { margin-inline: auto; }

/* Abstände in Rastern und Zeilen (Inline-Angaben des Entwurfs) */
.wp-block-columns.gap-4,
.wp-block-group.gap-4 { gap: var(--space-4); }
.wp-block-columns.gap-6 { gap: var(--space-6); }
.wp-block-columns.gap-8 { gap: var(--space-8); }
/* Im Entwurf steht gap:2px an einem .stack-2 — das ist ein Block-Behälter,
   der Wert bleibt dort also wirkungslos. Die Klasse wird nur der
   Vollständigkeit halber übernommen, damit die Vorlage vollständig
   abgebildet ist. */
.wp-block-group.stack-2.gap-2px { gap: 2px; }

/* Einzelabstände. Im Entwurf Inline-Angaben, die dort die Regel
   .stack-N > * + * überstimmen. Damit sie das auch hier tun, brauchen
   sie mehr Gewicht als 0,2,0 — also drei Klassen. */
.wp-block-group.partners.mt-2 { margin-top: var(--space-2); }
.wp-block-buttons.pager.mt-4 { margin-top: var(--space-4); }

/* Abschnitt ohne unteren Innenabstand (mediathek, style="padding-bottom:0").
   Zwei Klassen, sonst gewinnt .wp-block-group.section-sm. */
.wp-block-group.section-sm.pb-0 { padding-bottom: 0; }

/* Kleine Schrift- und Ausrichtungsangaben aus den Inline-Stilen */
.text-center { text-align: center; }
.fw-400 { font-weight: 400; }
.lead.lead-base { font-size: var(--text-base); }
/* Im Entwurf style="align-items:center" an einem .stack-3. Auch dort ohne
   Wirkung (Block-Behälter); übernommen, damit nichts verloren geht. */
.wp-block-group.stack-3.items-center { align-items: center; }

/* Karten mit Innenabstand — bisher nur als Gruppe gebrückt, im Shop und
   im Mitgliederbereich sitzt die Karte in einer Spalte. */
.wp-block-column.card.pad-5 { padding: var(--space-5); position: relative; }

/* Zeilen mit Ausrichtung nach außen (Inline-Angaben des Entwurfs) */
.wp-block-group.row.row-zwischen { justify-content: space-between; }
.wp-block-group.row.row-zwischen-6,
.wp-block-group.row.row-between-6 { justify-content: space-between; gap: var(--space-6); }
.wp-block-group.row.row-zwischen-oben-4 {
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
}
/* row-mixed kennzeichnet nur eine Zeile, in der Knöpfe und Textlinks
   gemischt stehen. Im Entwurf ist das ein einfaches .row — es braucht
   deshalb keine eigenen Angaben. */

/* Farbvarianten, im Entwurf Inline-Farben */
.eyebrow.eyebrow-sage { color: var(--c-sage); }
.card-num.card-num-sage { color: var(--c-sage); }

/* Kurze Wortmarken-Linie mit begrenzter Breite (style="max-width:280px") */
.rule-mark.rule-mark-280 { max-width: 280px; }

/* Die Ziffernzeile der Karten trägt im Entwurf einen Abstand nach unten
   (.card-num { margin-bottom: var(--space-3) } in icosim.css). Abschnitt 0
   räumt Absatzabstände ab, deshalb hier wiederherstellen. */
.wp-block-group p.card-num,
.wp-block-column p.card-num { margin-bottom: var(--space-3); }

/* ---------- 12. Seitenkopf und Brotkrumen ---------- */

/* .crumbs bringt in icosim.css margin-bottom: var(--space-6) mit. Im
   Blockmarkup ist das ein Absatz, den Abschnitt 0 abräumt (0,1,1).
   Zwei Klassen plus Element gewinnen wieder. */
.wp-block-group p.crumbs { margin-bottom: var(--space-6); }

/* ---------- 13. Bilder am Bildblock statt am <img> ---------- */

/* Im Entwurf stehen ratio-*, img-cover, img-figure, prod-img und
   portrait-sm am <img> oder an einer Hülle. Gutenberg setzt sie an das
   <figure>. Die Klassen selbst greifen (icosim.css benutzt reine
   Klassenselektoren), nur die Angaben für das Bild darin fehlen —
   Abschnitt 0 setzt dort height: auto. */
.wp-block-image.ratio-16-9 { aspect-ratio: 16 / 9; }
.wp-block-image.ratio-16-9 img,
.wp-block-image.ratio-4-3 img,
.wp-block-image.img-cover img,
.wp-block-image.prod-img img { width: 100%; height: 100%; object-fit: cover; }
/* Bestandsgrafiken werden nicht beschnitten, sondern vollständig gezeigt
   (icosim.css: .img-figure img { object-fit: contain }). */
.wp-block-image.img-figure img { height: 100%; object-fit: contain; }

/* Kleines Portrait: im Entwurf trägt das <img> selbst Größe, Rundung und
   den Abstand nach unten. */
.wp-block-image.portrait-sm {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.wp-block-image.portrait-sm img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 14. Tabellen ---------- */

/* Zwei Dinge sind zu tun: das <figure> des Tabellenblocks bringt den
   Außenabstand des Browsers mit (1em 40px), und wp-block-library.css
   rahmt jede Zelle ein. icosim.css spricht dagegen table.data an —
   die Klasse sitzt bei Gutenberg am <figure>. */
.wp-block-table { margin: 0; }
.wp-block-table.data table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.wp-block-table.data thead { border-bottom: 0; }
.wp-block-table.data tfoot { border-top: 0; }
.wp-block-table.data th,
.wp-block-table.data td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--c-line);
}
.wp-block-table.data th {
  font-weight: 500;
  color: var(--c-ink);
  white-space: nowrap;
  width: 1%;
  padding-right: var(--space-6);
}
.wp-block-table.data td { color: var(--c-ink-soft); }
.wp-block-table.data tr:last-child th,
.wp-block-table.data tr:last-child td { border-bottom: 0; }

/* Programmtabelle: Uhrzeit schmal, Referent in Ink, Titel gedämpft. */
.wp-block-table.data.prog th {
  padding-right: var(--space-5);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.wp-block-table.data.prog td:first-of-type {
  width: 30%;
  min-width: 15rem;
  white-space: normal;
  padding-right: var(--space-6);
}
.wp-block-table.data.prog td strong { font-weight: 500; color: var(--c-ink); }
@media (max-width: 700px) {
  .wp-block-table.data.prog table,
  .wp-block-table.data.prog tbody,
  .wp-block-table.data.prog tr,
  .wp-block-table.data.prog th,
  .wp-block-table.data.prog td { display: block; width: auto; }
  .wp-block-table.data.prog tr { border-bottom: 1px solid var(--c-line); padding: var(--space-4) 0; }
  .wp-block-table.data.prog tr:last-child { border-bottom: 0; }
  .wp-block-table.data.prog th,
  .wp-block-table.data.prog td { border-bottom: 0; padding: 0; }
  .wp-block-table.data.prog th { margin-bottom: var(--space-1); }
  .wp-block-table.data.prog td:first-of-type { margin-bottom: 2px; }
}

/* Beitragstabelle: Betrag rechts, Ziffern in gleicher Breite. */
.wp-block-table.data.preis th { white-space: normal; width: auto; }
.wp-block-table.data.preis td {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}
.wp-block-table.data.preis thead th:last-child { text-align: right; padding-right: 0; }

/* ---------- 15. Raster mit feinjustierten Spalten ---------- */

/* Im Entwurf sind diese Raster inline eingestellt. Die Werte sind
   unverändert übernommen. Die Spalten selbst sind über
   .wp-block-columns.grid > .wp-block-column (Abschnitt 3) schon von
   ihrer Flex-Basis befreit. */

/* academy */
.wp-block-columns.grid-2-oben-45 {
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.wp-block-columns.grid-2-oben-40 {
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* patienten */
.wp-block-columns.grid-2-start {
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* kontakt */
.wp-block-columns.grid-085-115-oben {
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* mitglied-werden */
.wp-block-columns.grid-115-085-oben {
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.wp-block-columns.grid-09-11-oben {
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* mitgliederbereich */
.wp-block-columns.grid-1-105-oben {
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.wp-block-columns.grid-1-115-oben {
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.wp-block-columns.grid-14-1-8 {
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
}
/* mediathek */
.wp-block-columns.grid-15-1-8 {
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-8);
}
/* weekly */
.wp-block-columns.grid-115-1 {
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* icosim.css macht alle inline feinjustierten Raster ab 880px einspaltig
   (.grid[style] { grid-template-columns: 1fr !important }). Da hier keine
   Inline-Stile mehr stehen, wird dieselbe Grenze für die Klassen gesetzt. */
@media (max-width: 880px) {
  .wp-block-columns.grid-2-oben-45,
  .wp-block-columns.grid-2-oben-40,
  .wp-block-columns.grid-2-start,
  .wp-block-columns.grid-085-115-oben,
  .wp-block-columns.grid-115-085-oben,
  .wp-block-columns.grid-09-11-oben,
  .wp-block-columns.grid-1-105-oben,
  .wp-block-columns.grid-1-115-oben,
  .wp-block-columns.grid-14-1-8,
  .wp-block-columns.grid-15-1-8,
  .wp-block-columns.grid-115-1 { grid-template-columns: 1fr; }
}

/* ---------- 16. Zahlenzeilen (stat-row) ---------- */

/* Im Entwurf tragen zwei Zahlenzeilen inline eine Spaltenangabe. .stat-row
   ist dort aber display:flex — die Angabe bleibt wirkungslos. Übernommen
   wird deshalb nur, was im Entwurf tatsächlich wirkt: die senkrechte
   Ausrichtung (weekly) und die Trennlinie darüber (ueber-icosim).
   stat-row-3 (wissenschaft) bleibt bewusst ohne Angaben. */
.wp-block-columns.stat-row.stat-row-2 { align-self: center; }
.wp-block-columns.stat-row.stat-top-8 {
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-8);
}

/* ---------- 17. Mediathek: Kacheln als Gruppe ---------- */

/* Im Abschnitt „Zuletzt hinzugefügt" liegen zwei Kacheln in einem Stapel,
   nicht in einer Spalte. Gleiche Angaben wie .wp-block-column.video-tile
   in Abschnitt 8. */
.wp-block-group.video-tile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-surface-3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  gap: var(--space-2);
}

/* ---------- 18. Mitgliederbereich: Übersichtsfläche ---------- */

/* Die Übersicht ist eine Fläche ohne Innenabstand, deren Kopfzeile und
   Inhaltsbereich ihre Abstände selbst mitbringen
   (Entwurf: style="padding:0;overflow:hidden"). */
.wp-block-group.panel.panel-flush { padding: 0; overflow: hidden; }
.wp-block-group.app-bar {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.wp-block-group.app-body { padding: clamp(1.5rem, 3vw, var(--space-8)); }

/* Namenskürzel im Kopf der Übersicht (im Entwurf ein <span> mit
   Inline-Angaben, im Blockmarkup ein Absatz). */
.wp-block-group p.avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--c-primary);
  color: #062c3b;
  font-weight: 600;
  font-size: 0.9rem;
  max-width: none;
}

/* ---------- 19. Shop: Produktkarten ---------- */

/* Entwurf: <article class="card card-hover prod-card" style="padding:0;overflow:hidden"> */
.wp-block-column.prod-flush { padding: 0; overflow: hidden; }

/* ---------- 20. Weekly ---------- */

/* Blätterzeile: muss den gap-Wert von .wp-block-buttons (Abschnitt 5)
   überschreiben, deshalb zwei Klassen. */
.wp-block-buttons.pager { gap: var(--space-2); justify-content: center; }

/* Fläche auf dunklem Grund (Entwurf: Inline-Angaben am .panel) */
.wp-block-group.panel.panel-on-deep {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}

/* Eingabefeld auf dunklem Grund. Laut Konventionen liefert später das
   Newsletter-Formular das Feld; die Klasse gehört dann ins Formular-Template. */
.input-on-deep {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
}

/* ------------------------------------------------------------------
   Anmeldebereich (Kurzbefehl [icosim_login])
   ------------------------------------------------------------------ */

.anmeldeblock > * + * { margin-top: var(--space-6); }

/* Das Honigtopf-Feld gegen automatisierte Eintraege bleibt unsichtbar,
   ist fuer Vorleseprogramme aber vorhanden. */
.nur-technisch {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Absenden-Knopf innerhalb des Formulars: kein zusaetzlicher Absatzabstand. */
.anmeldeblock .btn-zeile { margin-bottom: 0; }

/* Versteckte Felder duerfen keinen Stapelabstand erzeugen. */
.anmeldeblock form > input[type="hidden"] { display: none; }

.anmeldeblock form[hidden] { display: none; }

.anmeldeblock .row-zwischen {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/* ==========================================================================
   21. NACHBESSERUNGEN AUS DEM HÖHENVERGLEICH (Breite 1280)
   Alle Werte stammen aus icosim.css bzw. aus den Inline-Angaben des
   Entwurfs; sie holen genau die Abstände zurück, die der Entwurf an
   dieser Stelle bewusst auf null setzt oder zusätzlich erzeugt.
   ========================================================================== */

/* --- Leitfragen-Liste: kein Stapelabstand ---------------------------------
   Im Entwurf gilt .qlist { margin: 0 } (icosim.css, Abschnitt
   "Leitfragen-Liste"); diese Regel steht dort NACH .stack-N und gewinnt
   deshalb bei gleicher Spezifität. In der Blockfassung trägt die Liste
   zusätzlich .wp-block-list, wodurch die Stapelregel (0,2,0) gleichzieht.
   Zwei Klassen holen den Gleichstand zurück, die spätere Stellung
   entscheidet wieder für margin: 0. */
.wp-block-list.qlist { margin: 0; }

/* --- Bildtafel im Seitenstapel: kein Stapelabstand ------------------------
   Im Entwurf tragen die Bildtafeln der Seiten "Academy" und "Events"
   ausdrücklich style="margin:0"
   (icosim-neu/academy.html Z. 128, icosim-neu/events.html Z. 97).
   Die Stapelregel der Brücke (0,2,0) übertrumpft .wp-block-image
   { margin: 0 } aus Abschnitt 0, daher hier mit drei Klassen. */
.wp-block-group.stack-8 > .wp-block-image.ratio-16-9.img-figure,
.wp-block-group.stack-10 > .wp-block-image.ratio-16-9.img-figure {
	margin-top: 0;
}

/* --- Säulen-Liste (Medien-und-Text) --------------------------------------
   1. Abstand zwischen den Säulen: Abschnitt 9 setzt .pillar auf margin: 0
      und hebt damit .stack-4 auf. Im Entwurf ist es eine <ul class="stack-4">
      mit <li class="pillar">, die Punkte stehen also var(--space-4)
      auseinander. Vier Klassen sichern den Abstand ab.
   2. Höhe der ersten Zeile: im Entwurf steht das Symbol als
      inline-flex-Feld (34px hoch, margin-bottom: var(--space-4),
      icosim.css .pillar-ico) IN der ersten Textzeile. Die erste Zeilenbox
      ist dort also 34px + var(--space-4) hoch. In der Blockfassung sitzt
      das Symbol in einer eigenen Rasterspalte und kann diese Zeilenhöhe
      nicht erzeugen; ::first-line stellt sie mit denselben Werten her.
      Ohne diese Regel ist jede Säule 17px flacher als im Entwurf. */
.wp-block-group.stack-4 > .wp-block-media-text.pillar + .wp-block-media-text.pillar {
	margin-top: var(--space-4);
}
.wp-block-media-text.pillar .wp-block-media-text__content p::first-line {
	line-height: calc(34px + var(--space-4));
}

/* ------------------------------------------------------------------
   22. Nachbesserungen am Anmeldebereich
   ------------------------------------------------------------------ */

/* Der Editor setzt an den Spalten ein eigenes align-self. Die Raster mit
   Ausrichtung „oben" muessen das an der Spalte selbst zuruecknehmen. */
.wp-block-columns.grid-1-105-oben > .wp-block-column,
.wp-block-columns.grid-1-115-oben > .wp-block-column,
.wp-block-columns.grid-14-1-8 > .wp-block-column,
.wp-block-columns.grid-15-1-8 > .wp-block-column,
.wp-block-columns.grid-115-1 > .wp-block-column { align-self: start; }

/* Das Anmeldeformular ist ein <form>, nicht eine Blockgruppe. Die
   Stapelabstaende muessen deshalb eigens gesetzt werden. */
.anmeldeblock form.stack-5 > * + * { margin-top: var(--space-5, 24px); }

/* ------------------------------------------------------------------
   23. Zwischenhuellen in Raster- und Flexblöcken auflösen

   Der Editor legt in eine Blockgruppe eine zusaetzliche Huelle
   (.wp-block-group__inner-container). Bei Bloecken, die selbst ein Raster
   oder eine Flexreihe sind, wuerde diese Huelle zum einzigen Element des
   Rasters — die Teile stapeln sich dann untereinander statt nebeneinander.
   „display: contents" nimmt der Huelle ihre eigene Flaeche, ihre Kinder
   werden direkt zu Rasterfeldern. Das ist genau das Verhalten des Entwurfs.
   ------------------------------------------------------------------ */

.wp-block-group.event > .wp-block-group__inner-container,
.wp-block-group.card > .wp-block-group__inner-container,
.wp-block-group.row > .wp-block-group__inner-container,
.wp-block-group.step > .wp-block-group__inner-container,
.wp-block-group.steps > .wp-block-group__inner-container,
.wp-block-group.prod-foot > .wp-block-group__inner-container,
.wp-block-group.prod-body > .wp-block-group__inner-container,
.wp-block-group.video-tile > .wp-block-group__inner-container,
.wp-block-group.weekly-card > .wp-block-group__inner-container,
.wp-block-group.map-ph > .wp-block-group__inner-container {
	display: contents;
}

/* ------------------------------------------------------------------
   24. Nachtrag zu 21: dieselben Ausnahmen auch eine Ebene tiefer

   Die Regeln in Abschnitt 21 greifen nur, wenn die Bildtafel bzw. die
   Leitfragen-Liste unmittelbares Kind der Blockgruppe ist. Steht dazwischen
   die Huelle .wp-block-group__inner-container, gewinnt die Stapelregel
   (drei Klassen) gegen die Ausnahme (zwei Klassen). Hier wird der
   Gleichstand wiederhergestellt.
   ------------------------------------------------------------------ */

.wp-block-group.stack-8 > .wp-block-group__inner-container > .wp-block-image.img-figure,
.wp-block-group.stack-10 > .wp-block-group__inner-container > .wp-block-image.img-figure,
.wp-block-group.stack-8 > .wp-block-group__inner-container > .wp-block-list.qlist,
.wp-block-group.stack-10 > .wp-block-group__inner-container > .wp-block-list.qlist,
.wp-block-column.stack-8 > .wp-block-group__inner-container > .wp-block-image.img-figure,
.wp-block-column.stack-10 > .wp-block-group__inner-container > .wp-block-image.img-figure {
	margin-top: 0;
}

/* Das Newsletter-Feld ist ebenfalls ein <form> in einer Blockgruppe. */
.panel form.stack-5 > * + * { margin-top: var(--space-5, 24px); }

/* ------------------------------------------------------------------
   25. Programmtabellen im Ausklappbereich nicht einengen

   Ohne theme.json setzt der Editor fuer Bloecke mit „eingeschraenktem"
   Layout eine Standardbreite von rund 620 px. Ueberall sonst gewinnen die
   Breitenklassen des Entwurfs (.wrap, .maxw-60 ...), im Ausklappbereich
   „Programm" gibt es aber keine solche Klasse — die Programmtabelle wurde
   dadurch auf 648 px gequetscht und die Zeilen brachen um. Hier wird die
   Einschraenkung nur innerhalb von .acc aufgehoben.
   ------------------------------------------------------------------ */

/* icosim.css Z. 1009 loest die 68ch-Grenze fuer Tafeln mit Tabelle auf:
   .acc details > div:has(> .table-wrap). In der Blockfassung liegt die
   Tabellenhuelle eine Ebene tiefer, das direkte Kind trifft nicht mehr zu —
   die Programmtabelle wurde deshalb auf 648 px gequetscht. */
.acc details > .wp-block-group:has(.table-wrap) {
	max-width: none;
	padding-right: 0;
}

/* Fliesstext im Ausklappbereich: dieselben Abstaende eine Ebene tiefer. */
.acc details > .wp-block-group > .wp-block-group__inner-container > p { margin: 0; }
.acc details > .wp-block-group > .wp-block-group__inner-container > p + p { margin-top: var(--space-4); }

/* ------------------------------------------------------------------
   26. Saeulen (.pillar): Zeilenhoehe und Abstand wie im Entwurf

   Im Entwurf sitzt das Symbol in einem 34x34 grossen Kaestchen
   (icosim.css .pillar-ico), das Bild selbst ist 24x24. In der Blockfassung
   ist es ein einfaches Bild von 24x24 — die Zeile war dadurch 10 px
   flacher. Ausserdem stehen die Saeulen im Entwurf in einer <ul class=
   "stack-3">, also 12 px auseinander.
   ------------------------------------------------------------------ */

p.pillar > img.pillar-ico-img {
	width: 34px;
	height: 34px;
	padding: 5px;
	box-sizing: border-box;
}

.wp-block-group.pillar-list > p.pillar + p.pillar,
.wp-block-column.pillar-list > p.pillar + p.pillar,
.wp-block-group.pillar-list > .wp-block-group__inner-container > p.pillar + p.pillar,
.wp-block-column.pillar-list > .wp-block-group__inner-container > p.pillar + p.pillar {
	margin-top: var(--space-3);
}

/* ------------------------------------------------------------------
   27. Saeulen als Medien-und-Text: Handy-Ansicht

   Der Block „Medien und Text" bekommt vom Editor die Klasse
   is-stacked-on-mobile. Unter 600 px setzt der Editor den Text damit in
   Zeile 2, Spalte 1 — und Spalte 1 ist bei den Saeulen nur 34 px breit.
   Der Text brach dadurch auf ein Zeichen pro Zeile um (Abschnitt
   „Leistungen" war auf dem Handy 5382 statt 803 px hoch). Die Saeulen
   sollen auch auf dem Handy nebeneinander stehen: Symbol links, Text rechts.
   ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.wp-block-media-text.pillar.is-stacked-on-mobile {
		grid-template-columns: 34px auto !important;
	}
	.wp-block-media-text.pillar.is-stacked-on-mobile > .wp-block-media-text__media {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}
	.wp-block-media-text.pillar.is-stacked-on-mobile > .wp-block-media-text__content {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}
}

/* ------------------------------------------------------------------
   28. Tablet: feinjustierte Raster einspaltig wie im Entwurf

   icosim.css Z. 229 macht jedes Raster mit Inline-Feinjustierung unter
   880 px einspaltig: .grid[style] { grid-template-columns: 1fr !important }.
   Bei der Umstellung auf Blöcke wurden die Inline-Angaben in Hilfsklassen
   überführt (grid-* für die Spalten, gap-* für den Abstand) — der
   Attributselektor [style] greift dadurch nicht mehr. Abschnitt 20 deckt
   die grid-*-Klassen ab, hier kommen die gap-*-Fälle hinzu. Betroffen waren
   die Formulare (Mitglied werden, Kontakt) und die Kacheln im
   Mitgliederbereich, die am Tablet zweispaltig blieben.
   ------------------------------------------------------------------ */

@media (max-width: 880px) {
	.grid[class*="gap-"] {
		grid-template-columns: 1fr !important;
	}
}

/* ------------------------------------------------------------------
   29. Produktkarten im Shop: Bildformat und Fusszeile

   a) Buchcover stehen hochkant, icosim.css Z. 666 gibt der Produktflaeche
      deshalb ein quadratisches Format (.prod-img.img-figure). In der
      Blockfassung traegt die Figur zusaetzlich ratio-4-3, und die
      Bruecken-Regel dazu steht spaeter im Stylesheet — die Cover wurden
      dadurch flacher beschnitten als im Entwurf.
   b) .prod-card .prod-foot hat margin-top: auto, damit Preis und Bestell-
      Button in allen vier Karten auf einer Grundlinie sitzen. Die
      Stapelabstaende aus Abschnitt 10 sind hoeher gewichtet und haben das
      auto ueberschrieben.
   c) icosim.css setzt zwischen Ueberschrift und Fliesstext 0,6rem statt des
      vollen Stapelabstands. Auch das muss eine Ebene tiefer wiederholt werden.
   ------------------------------------------------------------------ */

.wp-block-image.prod-img.img-figure { aspect-ratio: 1 / 1; }
.wp-block-image.prod-img.img-figure img { object-fit: contain; }

.wp-block-group.prod-body > .wp-block-group__inner-container > .prod-foot,
.wp-block-column.prod-body > .wp-block-group__inner-container > .prod-foot,
.wp-block-group.prod-body > .prod-foot,
.wp-block-column.prod-body > .prod-foot {
	margin-top: auto;
}

.wp-block-group.stack-2 > .wp-block-group__inner-container > h3 + p,
.wp-block-group.stack-2 > .wp-block-group__inner-container > h4 + p,
.wp-block-group.stack-3 > .wp-block-group__inner-container > h3 + p,
.wp-block-group.stack-3 > .wp-block-group__inner-container > h4 + p,
.wp-block-column.stack-2 > .wp-block-group__inner-container > h3 + p,
.wp-block-column.stack-2 > .wp-block-group__inner-container > h4 + p,
.wp-block-column.stack-3 > .wp-block-group__inner-container > h3 + p,
.wp-block-column.stack-3 > .wp-block-group__inner-container > h4 + p {
	margin-top: 0.6rem;
}

/* =========================================================================
   30. Kontaktformular und Aufnahmeantrag
   Beide Formulare erzeugt das Theme selbst ([icosim_kontaktformular],
   [icosim_aufnahmeantrag]). Der Kurzbefehl liegt in einem Shortcode-Block,
   das <form> ist damit das einzige Kind der Spalte — der Abstand zwischen
   den Formularteilen muss deshalb am Formular selbst haengen.
   ====================================================================== */

/* Der Kurzbefehl liegt in einem Shortcode-Block; das <form> soll den
   Abstand der umgebenden Spalte erben und nur den eigenen Innenabstand
   selbst setzen. Deshalb nur margin-bottom loeschen, nicht margin-top. */
.wp-block-column .anmeldeblock,
.entry-content form.stack-4,
.entry-content form.stack-5,
.entry-content form.stack-6,
.entry-content form.stack-8 { margin-bottom: 0; }

.entry-content form.stack-4 > * + * { margin-top: var(--space-4); }
.entry-content form.stack-5 > * + * { margin-top: var(--space-5); }
.entry-content form.stack-6 > * + * { margin-top: var(--space-6); }
.entry-content form.stack-8 > * + * { margin-top: var(--space-8); }

/* Die Abschnitte im Aufnahmeantrag. */
.entry-content form .stack-5 > * + * { margin-top: var(--space-5); }
.entry-content form .stack-5 > .check + .check { margin-top: var(--space-3); }

/* Sicherheitsmerkmale erzeugen versteckte Felder — sie duerfen keinen
   Abstand belegen. */
.entry-content form > input[type="hidden"],
.entry-content form > p > input[type="hidden"] { display: none; }
.entry-content form > .nur-technisch { margin-top: 0; }

/* Absendeknopf: <button> statt <a>, gleiche Optik. */
.entry-content form .btn-zeile { margin-bottom: 0; }
.entry-content form button.btn { font: inherit; cursor: pointer; }

/* Rueckmeldung nach dem Absenden. */
.form-note-gut {
	border-left: 3px solid var(--ton-2, #0b7ba6);
	background: rgba(11, 123, 166, 0.06);
}
.form-note-fehler {
	border-left: 3px solid #a8452c;
	background: rgba(168, 69, 44, 0.06);
}
.form-note-gut,
.form-note-fehler { padding: var(--space-4); }

.weekly-card.card-link a { color: inherit; text-decoration: none; }
.weekly-card.card-link:hover h3 { color: var(--c-primary-ink); }

/* Bestehende Seiten aus dem alten Baukasten (z. B. Impressum, Datenschutz)
   bringen sehr kleine Schriftgroessen und feste Breiten mit. Auf dem Telefon
   setzen wir eine gut lesbare Mindestgroesse und verhindern seitliches
   Verschieben. Die Inhalte selbst bleiben unveraendert. */
@media (max-width: 820px) {

	.elementor-section,
	.elementor-container,
	.elementor-row,
	.elementor-column,
	.elementor-widget-wrap,
	.elementor-widget-container,
	.elementor-text-editor {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.elementor-element p,
	.elementor-element li,
	.elementor-element td,
	.elementor-element span:not(.elementor-icon):not([class*="eicon"]),
	.entry-content p,
	.entry-content li,
	.entry-content td {
		font-size: 1rem !important;
		line-height: 1.6 !important;
	}
}

/* Sehr lange Internetadressen in bestehenden Texten (z. B. Datenschutz)
   duerfen auf dem Telefon umbrechen. */
@media (max-width: 820px) {

	.entry-content a,
	.elementor-element a,
	.entry-content p,
	.elementor-element p {
		overflow-wrap: anywhere;
	}
}