/**
 * FlexSection – frontend.css
 * CSS-Architektur basierend auf FlexLayout Phase-1-Spec.
 * BEM-Klassen, Custom Properties, kein PHP-calc() mehr.
 */

/* ================================================================
   Custom Property Defaults
   ================================================================ */
:root {
    /* Gap-Skala */
    --fs-gap-default: 24px;
    --fs-gap-xs:  8px;
    --fs-gap-s:  16px;
    --fs-gap-m:  24px;
    --fs-gap-l:  40px;
    --fs-gap-xl: 64px;

    /* Padding-Skala (Row) */
    --fs-space-xs:  16px;
    --fs-space-s:   32px;
    --fs-space-m:   64px;
    --fs-space-l:   96px;
    --fs-space-xl: 128px;
}

/* ================================================================
   Row – Basis
   ================================================================ */
.fs-row {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    /* Desktop-Padding (default) */
    padding-top:    var(--fs-pad-top-d,    0px);
    padding-right:  var(--fs-pad-right-d,  0px);
    padding-bottom: var(--fs-pad-bottom-d, 0px);
    padding-left:   var(--fs-pad-left-d,   0px);
}

/* Tablet-Padding */
@media (max-width: 1024px) {
    .fs-row {
        padding-top:    var(--fs-pad-top-t,    var(--fs-pad-top-d,    0px));
        padding-right:  var(--fs-pad-right-t,  var(--fs-pad-right-d,  0px));
        padding-bottom: var(--fs-pad-bottom-t, var(--fs-pad-bottom-d, 0px));
        padding-left:   var(--fs-pad-left-t,   var(--fs-pad-left-d,   0px));
    }
}

/* Mobil-Padding */
@media (max-width: 768px) {
    .fs-row {
        padding-top:    var(--fs-pad-top-m,    var(--fs-pad-top-t,    var(--fs-pad-top-d,    0px)));
        padding-right:  var(--fs-pad-right-m,  var(--fs-pad-right-t,  var(--fs-pad-right-d,  0px)));
        padding-bottom: var(--fs-pad-bottom-m, var(--fs-pad-bottom-t, var(--fs-pad-bottom-d, 0px)));
        padding-left:   var(--fs-pad-left-m,   var(--fs-pad-left-t,   var(--fs-pad-left-d,   0px)));
    }
}

/* ================================================================
   Layout-Modi
   ================================================================ */

/* Boxed: Inhalt auf max-width begrenzt, zentriert */
.fs-row--boxed .fs-row__inner {
    max-width: var(--fs-max-width, 1200px);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--fs-outer-pad, 20px);
    padding-right: var(--fs-outer-pad, 20px);
}

/* Fullwidth: Section geht bis zum Browserrand */
.fs-row--full {
    width:  100dvw;
    margin-inline: calc(50% - 50dvw);
}

/* Fallback für Browser ohne dvw */
@supports not (width: 100dvw) {
    .fs-row--full {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
}

/* Fullwidth: Inhalt auf max-width zentriert mit Seitenabstand */
.fs-row--full .fs-row__inner {
    max-width:    var(--fs-max-width, 1200px);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--fs-outer-pad, 20px);
    padding-right: var(--fs-outer-pad, 20px);
}

/* Fullwidth bis Rand: kein max-width, kein Padding */
.fs-row--full.fs-row--edge .fs-row__inner {
    max-width:    none;
    padding-left:  0;
    padding-right: 0;
}

/* ================================================================
   Hintergrund-Layer
   ================================================================ */
.fs-row__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-color:    var(--fs-bg-color,  transparent);
    background-image:    var(--fs-bg-image,  none);
    background-size:     var(--fs-bg-size,   cover);
    background-position: var(--fs-bg-pos,    center);
    background-repeat:   var(--fs-bg-repeat, no-repeat);
}

.fs-row__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-color: var(--fs-ov-color,   transparent);
    opacity:          var(--fs-ov-opacity,  0);
}

/* ================================================================
   Inner – Flex-Container
   ================================================================ */
.fs-row__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: var(--fs-valign, stretch);
    /* Gap wird als Custom Property gesetzt damit .fs-col darauf zugreifen kann */
    --fs-gap-active: var(--fs-gap-d, var(--fs-gap-default));
    column-gap: var(--fs-gap-active);
    row-gap:    var(--fs-gap-active);
}

/* ================================================================
   Spalten – Basis
   ================================================================
   Formel: pct * 1%  gibt den %-Anteil (z.B. 33.333%)
           gap * (100 - pct) / 100  gibt den px-Anteil des Gaps
   calc() darf px und % mischen → funktioniert zuverlässig.
   Beispiel 33.333%, gap 24px:
     33.333 * 1% - 24px * (100 - 33.333) / 100
     = 33.333% - 24px * 0.667
     = 33.333% - 16px  ✓
   ================================================================ */
.fs-col {
    box-sizing: border-box;
    min-width: 0;
    flex-grow: 0;
    flex-shrink: 0;
    /* Default: 100% Breite (eine Spalte / Fallback) */
    --fs-w-pct-d: 100;
    --fs-pct: var(--fs-w-pct-d);
    flex-basis: calc(var(--fs-pct) * 1% - var(--fs-gap-active, var(--fs-gap-default)) * (100 - var(--fs-pct)) / 100);
    max-width:  calc(var(--fs-pct) * 1% - var(--fs-gap-active, var(--fs-gap-default)) * (100 - var(--fs-pct)) / 100);
    padding-top:    var(--fs-col-pad-top,    0px);
    padding-bottom: var(--fs-col-pad-bottom, 0px);
}

/* ================================================================
   Preset-Klassen
   --fs-w-pct: dimensionslose Zahl (z.B. 33.333) für calc()-Arithmetik
   ================================================================ */

/* Desktop */
.fs-w-100 { --fs-w-pct-d: 100; }
.fs-w-75  { --fs-w-pct-d: 75; }
.fs-w-67  { --fs-w-pct-d: 66.666; }
.fs-w-60  { --fs-w-pct-d: 60; }
.fs-w-50  { --fs-w-pct-d: 50; }
.fs-w-40  { --fs-w-pct-d: 40; }
.fs-w-33  { --fs-w-pct-d: 33.333; }
.fs-w-25  { --fs-w-pct-d: 25; }

/* Tablet */
.fs-w-t-100 { --fs-w-pct-t: 100; }
.fs-w-t-75  { --fs-w-pct-t: 75; }
.fs-w-t-67  { --fs-w-pct-t: 66.666; }
.fs-w-t-60  { --fs-w-pct-t: 60; }
.fs-w-t-50  { --fs-w-pct-t: 50; }
.fs-w-t-40  { --fs-w-pct-t: 40; }
.fs-w-t-33  { --fs-w-pct-t: 33.333; }
.fs-w-t-25  { --fs-w-pct-t: 25; }

/* Mobil */
.fs-w-m-100 { --fs-w-pct-m: 100; }
.fs-w-m-75  { --fs-w-pct-m: 75; }
.fs-w-m-67  { --fs-w-pct-m: 66.666; }
.fs-w-m-60  { --fs-w-pct-m: 60; }
.fs-w-m-50  { --fs-w-pct-m: 50; }
.fs-w-m-40  { --fs-w-pct-m: 40; }
.fs-w-m-33  { --fs-w-pct-m: 33.333; }
.fs-w-m-25  { --fs-w-pct-m: 25; }

/* ================================================================
   Breakpoints – werden durch view.php einmalig im <head> gesetzt.
   Diese Regeln hier sind der Fallback falls der <style>-Block fehlt.
   ================================================================ */
@media (max-width: 1024px) {
    .fs-row__inner {
        --fs-gap-active: var(--fs-gap-t, var(--fs-gap-d, var(--fs-gap-default)));
        column-gap: var(--fs-gap-active);
        row-gap:    var(--fs-gap-active);
    }
    .fs-col {
        --fs-pct: var(--fs-w-pct-t, var(--fs-w-pct-d, 100));
        flex-basis: calc(var(--fs-pct) * 1% - var(--fs-gap-active, var(--fs-gap-default)) * (100 - var(--fs-pct)) / 100);
        max-width:  calc(var(--fs-pct) * 1% - var(--fs-gap-active, var(--fs-gap-default)) * (100 - var(--fs-pct)) / 100);
    }
}

@media (max-width: 768px) {
    .fs-row__inner {
        --fs-gap-active: var(--fs-gap-m, var(--fs-gap-t, var(--fs-gap-d, var(--fs-gap-default))));
        column-gap: var(--fs-gap-active);
        row-gap:    var(--fs-gap-active);
    }
    .fs-col {
        --fs-pct: var(--fs-w-pct-m, var(--fs-w-pct-t, var(--fs-w-pct-d, 100)));
        flex-basis: calc(var(--fs-pct) * 1% - var(--fs-gap-active, var(--fs-gap-default)) * (100 - var(--fs-pct)) / 100);
        max-width:  calc(var(--fs-pct) * 1% - var(--fs-gap-active, var(--fs-gap-default)) * (100 - var(--fs-pct)) / 100);
    }
}

/* ================================================================
   Reihenfolge (CSS order) – Tablet / Mobil
   ================================================================ */
@media (max-width: 1024px) {
    .fs-col { order: var(--fs-order-t, 0); }
}

@media (max-width: 768px) {
    .fs-col { order: var(--fs-order-m, var(--fs-order-t, 0)); }
}