/*
 * sws-layouts.css — Wiederverwendbare Layout-Klassen für das Box-Element.
 *
 * Ansatz (Variant B — ohne margin-inline-Breakout-Tricks):
 *   • Das Modul rendert seinen eigenen Wrapper (.box-wrap, max-width 1920).
 *   • Innerhalb des Wrappers liegt ein Grid/Flex-Row (.box-element) mit den
 *     Box-Slots (.text, .bild, .html, .infobox, .bildtextbox).
 *   • Der Wrapper entscheidet die Maximal-Breite; darunter funktioniert 1fr 1fr
 *     ganz natürlich, ohne negative Margins oder viewport-units im Grid.
 *
 * Naming-Konvention — bewusst ohne Projekt-/Company-Präfixe, damit die CSS
 * 1:1 in jedes weitere Projekt portierbar ist:
 *   .box-wrap           äußerer Container (max 1920 px, zentriert)
 *   .box-element        das Grid/Flex-Row
 *   .box-element.c1     1 Spalte
 *   .box-element.c11    2 Spalten gleich
 *   .box-element.c111   3 Spalten
 *   .box-element.c1111  4 Spalten
 *   .box-element.c11111 5 Spalten
 *   .box-element.c12    1/3 + 2/3
 *   .box-element.c21    2/3 + 1/3
 *   .box-element.overflow-l  linke Spalte bleedet (kombiniert mit .c11)
 *   .box-element.overflow-r  rechte Spalte bleedet
 *
 * Slot-Klassen (direkt auf dem Kind-Div):
 *   .text         Text-Box (Überschrift + Fließtext)
 *   .bild         reine Bild-Box
 *   .html         Raw-HTML-Box
 *   .infobox      Ausklappbox (aktuell gerendert wie .text)
 *   .bildtextbox  Bild oben + Text unten
 *
 * Scope: alle Slot-Styles sind unter .box-element verschachtelt, damit die
 * generischen Klassen .text / .bild nicht mit anderem Projekt-CSS kollidieren.
 *
 * Konfigurations-Custom-Properties (auf :root im Projekt überschreibbar):
 *   --max-w        Content-Zone (Default 1485 px — Text-Bereich)
 *   --max-w-ext    Extended-Zone (Default 1920 px — Box-Wrap max)
 *   --gap          Default Grid-Gap
 *   --gutter       Minimaler Seitenabstand bei schmalen Viewports
 */

/* =========================================================================
 * Wrapper — 1920 max, zentriert.
 * ====================================================================== */
.box-wrap {
    max-width: var(--max-w-ext, 1920px);
    margin-inline: auto;
    width: 100%;
}

/* =========================================================================
 * Basis-Grid — Default 1 Spalte (gestackt).
 * ====================================================================== */
.box-element {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* =========================================================================
 * Layouts — Grid-Template-Columns.
 * Im gestackten Modus (< lg) wirken alle Varianten wie c1.
 * ====================================================================== */
@media (min-width: 64em) {
    .box-element.c1       { grid-template-columns: 1fr; }
    .box-element.c11      { grid-template-columns: 1fr 1fr; }
    .box-element.c111     { grid-template-columns: repeat(3, 1fr); }
    .box-element.c1111    { grid-template-columns: repeat(4, 1fr); }
    .box-element.c11111   { grid-template-columns: repeat(5, 1fr); }
    .box-element.c12      { grid-template-columns: 1fr 2fr; }
    .box-element.c21      { grid-template-columns: 2fr 1fr; }
}

/* Gap für mehrspaltige Varianten. Overflow-Varianten haben expliziten gap:0. */
@media (min-width: 64em) {
    .box-element.c111,
    .box-element.c1111,
    .box-element.c11111,
    .box-element.c12,
    .box-element.c21 {
        gap: var(--gap, 1.5rem);
    }
}

/* =========================================================================
 * Overflow-Varianten: linke/rechte Spalte bleedet bis Wrap-Kante.
 * Da der Wrapper schon bei 1920 max-breit ist, reicht ein 1fr-1fr-Grid.
 * Bild-Kinder füllen ihre Spalte bis zur Wrap-Kante (= Viewport bzw. Ext-Zone).
 * Text-Kinder bekommen internes Padding, damit ihr Inhalt in der Content-Zone
 * (max-w) bleibt.
 * ====================================================================== */
@media (min-width: 64em) {
    .box-element.c11.overflow-l,
    .box-element.c11.overflow-r {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    /* Text-Padding auf der Nicht-Bleeding-Seite (bzw. auf der „Außen-Seite" bei
       plain c11), damit Content in der 1485-Content-Zone bleibt. Außen (zum
       Viewport-Rand) bekommt der Text Content-Zone-Padding; innen (zur Nachbar-
       Spalte) reichen 40 px Lücke.

       Gilt für ALLE c11-Varianten (overflow-l, overflow-r, plain c11) —
       Voraussetzung: die Section-Config des c11-Slices ist auf `no-wrapper`
       gesetzt (wird vom Modul automatisch gemacht, siehe bcl-box-element.output.php).
       Dadurch rendern alle drei Layouts pixel-identisch bei gleichem Content.

       `100%` in padding-calc würde auf die Grid-Cell-Breite (50 % Wrap) resolven
       — deshalb `min(100vw, --max-w-ext)`. */
    /* Outer (last-child): Außen-Padding rechts, innen links.
       Text/Html/InfoBox/BildTextBox greifen in allen c11-Varianten.
       `.bild` bekommt das Padding NUR bei plain c11 (kein Overflow) —
       in overflow-Varianten bleibt die Bild-Spalte full-bleed. */
    .box-element.c11 > .text:last-child,
    .box-element.c11 > .html:last-child,
    .box-element.c11 > .infobox:last-child,
    .box-element.c11 > .bildtextbox:last-child,
    .box-element.c11:not(.overflow-l):not(.overflow-r) > .bild:last-child {
        padding-right: max(var(--gutter, 1.5rem), calc((min(100vw, var(--max-w-ext, 1920px)) - var(--max-w, 1485px)) / 2));
        padding-left: 2.222rem;                      /* 40 px Lücke zur Nachbar-Spalte */
    }
    /* Outer (first-child): Außen-Padding links, innen rechts. */
    .box-element.c11 > .text:first-child,
    .box-element.c11 > .html:first-child,
    .box-element.c11 > .infobox:first-child,
    .box-element.c11 > .bildtextbox:first-child,
    .box-element.c11:not(.overflow-l):not(.overflow-r) > .bild:first-child {
        padding-left: max(var(--gutter, 1.5rem), calc((min(100vw, var(--max-w-ext, 1920px)) - var(--max-w, 1485px)) / 2));
        padding-right: 2.222rem;                     /* 40 px Lücke zur Nachbar-Spalte */
    }

    /* =====================================================================
     * c1-Singlespalte + 2-spaltige c11-Layouts (plain + overflow) —
     * Text-Block-Typografie + Padding 1:1 analog Startseite-Sektion
     * „Skipperfreunde" (`.bcl-tis`):
     *   • Titel 34 px @ XL (1.889 rem), Line 1 Light (300), Line 2 ExtraBold (800)
     *     → 18 px (1 rem) Abstand zum Body
     *   • Body 18 px (1 rem), Light (300), line-height 1.55
     *     → Absätze: 15 px (0.833 rem) Bottom-Margin, letzter Absatz ohne
     *
     * Betrifft nur .text + .infobox (Textbox-Typen) — .bildtextbox-Text-Block
     * wird separat über .box-text gestyled (s. u.), HTML-Slot bleibt roh. */
    .box-element > .text,
    .box-element > .infobox {
        display: flex;
        flex-direction: column;
    }
    .box-element > .text .box-title,
    .box-element > .infobox .box-title {
        font-size: 1.889rem;
        line-height: 1.15;
        margin: 0 0 1rem 0;                          /* 18 px Abstand zum Body (analog .bcl-tis-title) */
    }
    .box-element > .text .box-body,
    .box-element > .infobox .box-body {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.55;
    }
    .box-element > .text .box-body p,
    .box-element > .infobox .box-body p {
        margin: 0 0 0.833rem 0;                      /* 15 px, analog .bcl-tis-body-col p */
    }
    .box-element > .text .box-body p:last-of-type,
    .box-element > .infobox .box-body p:last-of-type {
        margin-bottom: 0;
    }
    /* Mehrspaltiger Body: Column-Gap 40 px, analog `.bcl-abt-body--2col` */
    .box-element .box-body.body-cols-2,
    .box-element .box-body.body-cols-3 {
        column-gap: 2.222rem;
    }
}

/* =========================================================================
 * Vertikales Text-Padding — symmetrisch (oben = unten), pro Breakpoint-Stufe
 * explizit gesetzt, damit kleinere Viewports nicht überdimensioniertes Padding
 * bekommen (reines rem-Scaling über die Root-Font reicht nicht — dort wäre
 * 5 rem noch 60 px auf Mobile M).
 *
 *   Mobile (< 64em)       → 2 rem  ≈ 24–28 px je nach Root
 *   Laptop / Desktop      → 3 rem  ≈ 45–48 px
 *   XL (>= 112.5em/1800) → 5 rem  = 90 px
 *
 * Betrifft ALLE Box-Element-Layouts (c1, c11 plain + overflow, c111, c1111,
 * c11111, c12, c21). Das Modul setzt die Section-Config auf py-0 (s. Modul-
 * Output), daher übernehmen die Text- bzw. Bild-Zellen die Luft-Funktion
 * über ihre rem-basierten Paddings.
 * Ausnahme: In c11-Overflow-Varianten bleibt das Bild full-bleed (kein
 * Padding) — das ist genau der Sinn von „overflow-l/-r".
 * ====================================================================== */
.box-element > .text,
.box-element > .infobox,
.box-element > .bildtextbox,
.box-element > .bild,
.box-element.c11.overflow-l > .bild,
.box-element.c11.overflow-r > .bild {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.box-element.c11.overflow-l > .bild,
.box-element.c11.overflow-r > .bild {
    padding-top: 0;
    padding-bottom: 0;
}
@media (min-width: 64em) {
    .box-element > .text,
    .box-element > .infobox,
    .box-element > .bildtextbox,
    .box-element > .bild {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .box-element.c11.overflow-l > .bild,
    .box-element.c11.overflow-r > .bild {
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media (min-width: 112.5em) {
    .box-element > .text,
    .box-element > .infobox,
    .box-element > .bildtextbox,
    .box-element > .bild {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .box-element.c11.overflow-l > .bild,
    .box-element.c11.overflow-r > .bild {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* =========================================================================
 * Non-c11-Layouts: Das ganze Grid wird auf die Content-Zone (1485) eingerückt,
 * indem `.box-element` selbst links/rechts Padding bekommt. Dadurch sind alle
 * Spalten eines c111/c1111/c11111/c12/c21-Grids gleich breit und der Grid-Gap
 * wirkt innerhalb der Content-Zone. c1 braucht analog beidseitiges Padding,
 * damit sein Single-Content in der Zone bleibt.
 *
 * c11 und c11-Overflow haben eigene, dedizierte Regeln weiter oben (sie
 * nutzen Full-Bleed bis 1920 + per-Column content-zone padding auf der
 * äußeren Seite).
 * ====================================================================== */
@media (min-width: 64em) {
    .box-element.c1,
    .box-element.c111,
    .box-element.c1111,
    .box-element.c11111,
    .box-element.c12,
    .box-element.c21 {
        padding-left:  max(var(--gutter, 1.5rem), calc((min(100vw, var(--max-w-ext, 1920px)) - var(--max-w, 1485px)) / 2));
        padding-right: max(var(--gutter, 1.5rem), calc((min(100vw, var(--max-w-ext, 1920px)) - var(--max-w, 1485px)) / 2));
    }
}

/* =========================================================================
 * Gestackt (< lg): ALLE Kinder-Boxen bekommen horizontales Gutter/Content-
 * Zone-Padding — inkl. Bilder. Ausnahme: c11-Overflow-Varianten lassen das
 * Bild weiterhin full-bleed, das ist deren Sinn.
 *
 * c11 (plain + overflow): grid-gap auf 0, damit im gestackten Modus nicht
 * 1.5rem Zusatz-Luft zwischen Text und Bild entsteht — die pt/pb der Boxen
 * (siehe oben, Abschnitt „Vertikales Text-Padding") übernehmen die
 * Luftfunktion. Andere Mehrspalten-Layouts (c111, c1111, c12, c21) behalten
 * den Default-Gap.
 * ====================================================================== */
@media (max-width: 63.99em) {
    .box-element > .text,
    .box-element > .html,
    .box-element > .infobox,
    .box-element > .bildtextbox,
    .box-element:not(.overflow-l):not(.overflow-r) > .bild {
        padding-inline: max(var(--gutter, 1.5rem), calc((100% - var(--max-w, 1485px)) / 2));
    }
    .box-element {
        gap: var(--gap, 1.5rem);
    }
    .box-element.c11 {
        gap: 0;
    }
}

/* =========================================================================
 * Bild-Element füllt immer seinen Container (100% Breite), override des
 * <img>-sizes-Attribute-Defaults.
 * ====================================================================== */
.box-element .bild img,
.box-element .bildtextbox img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* =========================================================================
 * 2-spaltige c11-Layouts (plain + overflow): Bild füllt auch vertikal die
 * komplette Sektion-Höhe (analog Startseite-Sektionen „Skipperfreunde" /
 * „Über BCL"). Das Grid stretched .bild automatisch auf die Zeilenhöhe;
 * das <img> muss dann 100% hoch sein und via object-fit: cover auf den
 * Ausschnitt zuschneiden.
 * ====================================================================== */
@media (min-width: 64em) {
    .box-element.c11 > .bild,
    .box-element.c11 > .bildtextbox {
        align-self: stretch;
        min-height: 100%;
    }
    .box-element.c11 > .bild img,
    .box-element.c11 > .bildtextbox img {
        height: 100%;
    }
}

/* =========================================================================
 * Strukturierte Überschrift in Text-/InfoBox-Slots (2 Zeilen).
 * Line 1 = Light, Line 2 = ExtraBold — analog Skipperfreunde.
 * ====================================================================== */
.box-element .box-title {
    font-size: 1.889rem;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--section-heading, var(--section-fg, inherit));
}
/* Line 1 = Subline (Light, StyleGuide-Subline-Farbe = --section-muted)
   Line 2 = Headline (ExtraBold, StyleGuide-Headline-Farbe = --section-heading) */
.box-element .box-title-line1 { display: block; font-weight: 300; color: var(--section-muted, inherit); }
.box-element .box-title-line2 { display: block; font-weight: 800; color: var(--section-heading, inherit); }

/* Überschriften-Ausrichtung (nur .box-title, Fließtext bleibt linksbündig).
   Default (ohne Klasse) = linksbündig; align-* override. */
.box-element .box-title.align-left   { text-align: left; }
.box-element .box-title.align-center { text-align: center; }
.box-element .box-title.align-right  { text-align: right; }
.box-element .box-body > :first-child,
.box-element .box-text > :first-child { margin-top: 0; }
.box-element .box-body > :last-child,
.box-element .box-text > :last-child { margin-bottom: 0; }

/* =========================================================================
 * Mehrspaltiger Fließtext pro Box (ab lg).
 * Steuerung aus dem JSON-Feld „cols" (1|2|3); unter lg bleibt alles 1-spaltig.
 * ====================================================================== */
@media (min-width: 64em) {
    .box-element .body-cols-2 {
        columns: 2;
        column-gap: var(--gap, 1.5rem);
    }
    .box-element .body-cols-3 {
        columns: 3;
        column-gap: var(--gap, 1.5rem);
    }
    .box-element .body-cols-2 > *,
    .box-element .body-cols-3 > * {
        break-inside: avoid;
    }
}

/* =========================================================================
 * Farb-Inheritance: Text-Kinder erben die Section-Farben aus den CSS-Custom-
 * Properties, die das Template pro Section setzt (--section-fg etc.).
 * ====================================================================== */
.box-element .text,
.box-element .html,
.box-element .infobox,
.box-element .bildtextbox {
    color: var(--section-fg, inherit);
}
.box-element .text a,
.box-element .html a,
.box-element .infobox a,
.box-element .bildtextbox a {
    color: inherit;
}

/* =============================================================
 * InfoBox / Aufklappbox — natives <details>/<summary> mit
 * eigenem Indikator (Pfeil) und sanfter Open/Close-Animation.
 * Markup im Modul-Output:
 *   <details class="box-infobox body-cols-N">
 *     <summary class="box-infobox-summary align-X">
 *       <span class="box-title">
 *         <span class="box-title-line1">…</span>
 *         <span class="box-title-line2">…</span>
 *       </span>
 *     </summary>
 *     <div class="box-infobox-body body-cols-N">…</div>
 *   </details>
 * ============================================================= */
.box-element .box-infobox { width: 100%; }
.box-element .box-infobox > summary.box-infobox-summary {
    list-style: none;                /* default-Marker (Dreieck) verbergen */
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.667rem;
    user-select: none;
    padding: 0.444rem 0;             /* 8 px Klickfläche */
}
.box-element .box-infobox > summary.box-infobox-summary::-webkit-details-marker { display: none; }
.box-element .box-infobox > summary.box-infobox-summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0.833rem;                 /* 15 px */
    height: 0.833rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.18s ease;
    transform-origin: center;
    align-self: center;
}
.box-element .box-infobox[open] > summary.box-infobox-summary::before { transform: rotate(90deg); }
/* Body bei geschlossenem details ausblenden — die UA-Hide-Regel greift in
 * manchen Engines nicht zuverlässig, wenn das Body-Element via JS während
 * der Close-Animation Inline-Styles bekommt und wieder verliert. Die JS-
 * Animation öffnet das details VOR dem Höhe-Tween, schließt es DANACH;
 * während der Animation hat details das open-Attribut, dieser Selektor
 * greift also korrekt nur im Ruhezustand „zu". */
.box-element .box-infobox:not([open]) > .box-infobox-body { display: none; }
.box-element .box-infobox > summary.box-infobox-summary > .box-title { flex: 1 1 auto; }
.box-element .box-infobox > summary.box-infobox-summary.align-center { justify-content: center; }
.box-element .box-infobox > summary.box-infobox-summary.align-right  { justify-content: flex-end; }
.box-element .box-infobox > .box-infobox-body { padding-top: 0.667rem; }
.box-element .box-infobox > .box-infobox-body > :first-child { margin-top: 0; }
.box-element .box-infobox > .box-infobox-body > :last-child  { margin-bottom: 0; }
/* 2-/3-Spalten-Layout im aufgeklappten Body, analog .box-body. */
.box-element .box-infobox-body.body-cols-2 { columns: 2; column-gap: 2rem; }
.box-element .box-infobox-body.body-cols-3 { columns: 3; column-gap: 2rem; }
@media (max-width: 64em) {
    .box-element .box-infobox-body.body-cols-2,
    .box-element .box-infobox-body.body-cols-3 { columns: 1; }
}