/* Generische Content-Section: optionaler vollbreiter SectionHeader und darunter
   1–4 gleichwertige Slots nebeneinander. Die Spaltenzahl kommt aus der Zahl der
   Slots (Modifier --cols-N). Jeder Slot hält Text/HTML, Bild, Video, YouTube
   oder einen Shortcode. Vertikaler Rhythmus aus der .d35-section-Utility, das
   dunkle Band aus .d35-section-dark. Media-Teil spiegelt bewusst section-split. */

.d35-section-content__header {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

.d35-section-content__grid {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /* Top-align, damit unterschiedlich hohe Slots oben bündig stehen. */
  align-items: start;
}

/* Spaltenzahl = Anzahl der Slots. */
.d35-section-content__grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.d35-section-content__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d35-section-content__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d35-section-content__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Vertikale Ausrichtung der Slots optional umstellbar (Default: start). */
.d35-section-content--align-center .d35-section-content__grid { align-items: center; }
.d35-section-content--align-stretch .d35-section-content__grid { align-items: stretch; }

/* ── Slot ───────────────────────────────────────────────────────────────── */

.d35-section-content__slot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Bewusst KEIN Container-Gap: der Rhythmus kommt aus den Kind-Margins (unten),
     damit Prosa-Absätze und Feature-Blöcke unterschiedlich weit stehen können. */
}

/* Prosa-Kinder tragen uneinheitliche Browser-Margins, die sich als Flex-Items
   nicht kollabieren — genullt, der Abstand kommt allein aus der Owl-Regel. */
.d35-section-content__slot > p,
.d35-section-content__slot > h1,
.d35-section-content__slot > h2,
.d35-section-content__slot > h3,
.d35-section-content__slot > h4,
.d35-section-content__slot > h5,
.d35-section-content__slot > h6,
.d35-section-content__slot > ul,
.d35-section-content__slot > ol,
.d35-section-content__slot > blockquote,
.d35-section-content__slot > figure,
.d35-section-content__slot > table,
.d35-section-content__slot > pre {
  margin-block: 0;
}

/* Basis-Rhythmus: jedes gestapelte Kind (außer dem ersten) bekommt oben einen
   normalen Absatz-Abstand. */
.d35-section-content__slot > * + * {
  margin-top: 1rem;
}

/* Icon-Card-Blöcke stehen als Feature-Liste weiter auseinander als Textabsätze. */
.d35-section-content__slot > * + .d35-card-icon-wrap {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* Dokument-Gliederung: Sektions-Überschriften deutlich vom vorangehenden
   Abschnitt absetzen. Über den .d35-section-content-Wrapper gescoped, damit die
   Spezifität (0,2,1) den margin-block:0-Reset schlägt. */
.d35-section-content .d35-section-content__slot > * + h4 { margin-top: 1.5rem; }
.d35-section-content .d35-section-content__slot > * + h3 { margin-top: 1.75rem; }
.d35-section-content .d35-section-content__slot > * + h2 { margin-top: 2.5rem; }

/* Eingebetteter SectionHeader (z. B. aus einem Slot) ohne Card-Chrome. */
.d35-section-content__slot .d35-section-header {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-width: none;
}

/* ── Media ──────────────────────────────────────────────────────────────── */

.d35-section-content__media {
  min-width: 0;
}

.d35-section-content__media .d35-section-content__image,
.d35-section-content__media img,
.d35-section-content__media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--d35-radius);
}

/* Slot-Media ohne intrinsische Höhe (z. B. Logo-Strip) zentriert vertikal. */
.d35-section-content__media--slot {
  align-self: center;
}

.d35-section-content__media--slot-start {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.d35-section-content__media--slot-start > * {
  margin: 0;
}

/* Natural-Media behält die Proportionen; eine gewählte Ratio croppt in eine Box. */
.d35-section-content__media--ratio {
  overflow: hidden;
  border-radius: var(--d35-radius);
  background: var(--d35-color-light, #e9edf2);
}

.d35-section-content__media--ratio .d35-section-content__image,
.d35-section-content__media--ratio img,
.d35-section-content__media--ratio video {
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.d35-section-content__media--16-9 { aspect-ratio: 16 / 9; }
.d35-section-content__media--2-1 { aspect-ratio: 2 / 1; }
.d35-section-content__media--4-3 { aspect-ratio: 4 / 3; }
.d35-section-content__media--3-2 { aspect-ratio: 3 / 2; }
.d35-section-content__media--1-1 { aspect-ratio: 1 / 1; }
.d35-section-content__media--3-4 { aspect-ratio: 3 / 4; }
.d35-section-content__media--4-5 { aspect-ratio: 4 / 5; }

/* Icon-Cards in einem Slot als schlichte vertikale Liste, ohne Card-Fläche. */
.d35-section-content__slot .d35-card-icon-wrap {
  height: auto;
  min-height: 0;
}

.d35-section-content__slot .d35-card-icon {
  padding: 0;
  background: transparent;
  border-radius: 0;
  height: auto;
  min-height: 0;
  align-items: flex-start;
}

.d35-section-content__slot .d35-card-icon__text {
  color: var(--d35-color-muted);
}

/* ── Dark variant ──────────────────────────────────────────────────────── */

.d35-section-content--dark .d35-card-icon,
.d35-section-content--dark .d35-card-icon__heading,
.d35-section-content--dark .d35-card-icon__icon {
  color: #fff;
}

.d35-section-content--dark .d35-card-icon__text {
  color: color-mix(in srgb, #fff 78%, transparent);
}

.d35-section-content--dark .d35-brand-logo--mono {
  color: #fff;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Drei-/Vier-Spalter zuerst auf zwei Spalten, bevor sie ganz umbrechen. */
@media (max-width: 1100px) {
  .d35-section-content__grid--cols-3,
  .d35-section-content__grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .d35-section-content__grid--cols-2,
  .d35-section-content__grid--cols-3,
  .d35-section-content__grid--cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── YouTube: Click-to-Play-Facade (DSGVO) ─────────────────────────────── */

.d35-section-content__youtube {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--d35-radius);
  overflow: hidden;
  background: var(--d35-color-dark, #10151c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.d35-section-content__youtube-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.d35-section-content__youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.d35-section-content__youtube-play {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.d35-section-content__youtube-play:hover,
.d35-section-content__youtube-play:focus-visible {
  background: rgba(0, 0, 0, 0.82);
  transform: scale(1.06);
}

.d35-section-content__youtube-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}

.d35-section-content__youtube-consent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  text-align: center;
}