/**
 * Block: Section (Container-Wrapper mit BG-Optionen).
 *
 * Layering (z-index):
 *   .block--section__bg       → 0  (Image/Video-Füllung)
 *   .block--section__overlay  → 1  (Farb-Dimmung)
 *   .block--section__content  → 2  (InnerBlocks)
 */

.block--section {
    position: relative;
    overflow: hidden;
    min-height: var(--section-min-h, 0);
}

/* Padding (Reuse der bestehenden Padding-Modifier) */
.block--section.block--pad-none   { padding-block: 0; }
.block--section.block--pad-normal { padding-block: var(--space-16); }
.block--section.block--pad-lg     { padding-block: var(--space-24); }

/* ── Text-Farben auf dunklem BG ───────────────── */

.block--section-bg-color.block--bg-navy,
.block--section-bg-color.block--bg-anthrazit,
.block--section-bg-color.block--bg-electric-blue,
.block--section-bg-color.block--bg-violett {
    color: var(--color-text-on-navy);
}

/* Farb-Mapping für BG-Klassen die nicht schon global existieren */
.block--section.block--bg-beige         { background-color: var(--color-beige); }
.block--section.block--bg-dunkelbeige   { background-color: var(--color-dunkelbeige); }
.block--section.block--bg-white         { background-color: var(--color-white); }
.block--section.block--bg-navy          { background-color: var(--color-navy); }
.block--section.block--bg-anthrazit     { background-color: var(--color-anthrazit); }
.block--section.block--bg-electric-blue { background-color: var(--color-electric-blue); }
.block--section.block--bg-neongelb      { background-color: var(--color-neongelb); }
.block--section.block--bg-violett       { background-color: var(--color-violett); }
.block--section.block--bg-steingrau     { background-color: var(--color-steingrau); }

/* ── BG-Layer: Bild / Video / iFrame ─────────── */

.block--section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.block--section__bg-image,
.block--section__bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* iFrame-Embed: proportional größer ziehen, damit keine Letterboxing-Ränder
 * entstehen (Trick: 56.25 % + Zentrierung). */
.block--section__bg--embed {
    /* Der iFrame bekommt eine Mindest-Abdeckung über aspect-ratio. */
}

.block--section__bg-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100vw, 100%);
    height: max(calc(100vw * 9 / 16), 100%);
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    display: block;
    pointer-events: none;
}

/* ── Overlay ─────────────────────────────────── */

.block--section__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: var(--section-overlay-color, var(--color-black));
    opacity: var(--section-overlay-opacity, 0.3);
}

/* ── Dekoratives Overlay-Pattern (SVG/PNG) ───── */

.block--section__pattern {
    position: absolute;
    inset: 0;
    z-index: 1;                /* über BG-Image/Video, unter Content (z=2) */
    pointer-events: none;
    background-image:  var(--section-pattern-url);
    background-size:   var(--section-pattern-size, cover);
    background-repeat: var(--section-pattern-repeat, no-repeat);
    background-position: center;
    opacity: var(--section-pattern-opacity, 1);
}

/* ── Content (InnerBlocks) ───────────────────── */

.block--section__content {
    position: relative;
    z-index: 2;
}

/* ── Content-Breite: begrenzt Inner-Blöcke + deren Hintergründe ──
 *
 * Bei „Volle Breite" (Default) passiert nichts — alignfull-Blocks
 * dürfen ihren BG bis zum Viewport-Rand ziehen.
 *
 * Bei festen Breiten (1440/1020/768) wird der Content-Wrapper zentriert
 * begrenzt und alignfull/alignwide der Inner-Blöcke auf diese Breite
 * zurückgeholt, damit deren Hintergründe ebenfalls boxed erscheinen. */

/* 1440 = volle Container-Box: identisch zum Header-Container.
 * Box-Breite = max 1440 px, padding-inline für Inhalts-Fluchtung mit dem
 * Logo. Bei viewport > 1440 sitzt der Content automatisch mittig. */
.block--section--width-1440 > .block--section__content {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}

/* 1020 / 768 = engere Inhaltsboxen, Default linksbündig.
 *
 * Die linke Inhaltskante muss exakt mit der Logo-Inhaltskante fluchten —
 * also bei (viewport - 1440) / 2 + container-padding, gedeckelt auf
 * container-padding für viewports < 1440. Die rechte Kante bekommt
 * --container-padding Schutzraum, damit der Block auf kleinen Viewports
 * nicht am Rand klebt. */
.block--section--width-1020 > .block--section__content,
.block--section--width-768  > .block--section__content {
    margin-left: max(
        var(--container-padding),
        calc(50% - var(--container-max) / 2 + var(--container-padding))
    );
    margin-right: var(--container-padding);
    box-sizing: border-box;
}
.block--section--width-1020 > .block--section__content { max-width: 1020px; }
.block--section--width-768  > .block--section__content { max-width: 768px;  }

/* Zentriert-Variante (nur 1020 / 768): überschreibt die margin-left-
 * Formel, sodass die engere Box im Viewport mittig sitzt. Beim 1440-
 * Modus gibt es keine Zentriert-Variante, weil die Box ohnehin
 * Container-Größe hat. */
.block--section--align-center.block--section--width-1020 > .block--section__content,
.block--section--align-center.block--section--width-768  > .block--section__content {
    margin-inline: auto;
}

/* Gutenberg-alignfull/alignwide innerhalb einer boxed Section
 * neutralisieren — sonst springen Inner-Blöcke per negativem Margin
 * wieder aus der Section raus. */
.block--section--width-1440 .block--section__content .alignfull,
.block--section--width-1440 .block--section__content .alignwide,
.block--section--width-1020 .block--section__content .alignfull,
.block--section--width-1020 .block--section__content .alignwide,
.block--section--width-768  .block--section__content .alignfull,
.block--section--width-768  .block--section__content .alignwide {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Inner-Block-Wrapper, die selbst die globale `.container`-Klasse
 * tragen (z. B. .container.block__inner im Text-Block), sollen
 * innerhalb einer boxed Section KEIN zusätzliches max-width +
 * padding-inline draufpacken — sonst kommt der Inhalt um doppelt
 * --container-padding eingerückt heraus. Die Section selbst übernimmt
 * Width + Inset, der Inner-Container streckt sich nur noch im
 * verfügbaren Raum. */
.block--section--width-1440 .block--section__content .container,
.block--section--width-1020 .block--section__content .container,
.block--section--width-768  .block--section__content .container {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* Ausnahme: die animierte Polyline-Linie darf immer über die volle
 * Viewport-Breite laufen — auch wenn der Inhalt boxed ist. Dafür muss
 * die Section ihr overflow:hidden lockern (BG-Image/Video bleibt
 * ohnehin auf .block--section__bg gecroppt). */
.block--section--width-1440,
.block--section--width-1020,
.block--section--width-768 {
    overflow: visible;
}

.block--section--width-1440 [data-line~="polyline"] > .block__line-svg,
.block--section--width-1020 [data-line~="polyline"] > .block__line-svg,
.block--section--width-768  [data-line~="polyline"] > .block__line-svg {
    left: calc(50% - 50vw);
    width: 100vw;
    max-width: none;
}

/* ── Editor-Placeholder (Video noch leer) ──── */

.block--section__placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dunkelbeige);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
    padding: var(--space-6);
}