/**
 * 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);
}


/* ================================================================
   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, 0px);
    padding-right: var(--fs-outer-pad, 0px);
}

/* 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, 0px);
    padding-right: var(--fs-outer-pad, 0px);
}

/* 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; }



/* ================================================================
   Spalten-Hintergrund
   ================================================================ */
.fs-col {
    position: relative;
}

.fs-col__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-color:    var(--fs-col-bg-color,  transparent);
    background-image:    var(--fs-col-bg-image,  none);
    background-size:     var(--fs-col-bg-size,   cover);
    background-position: var(--fs-col-bg-pos,    center);
    background-repeat:   var(--fs-col-bg-repeat, no-repeat);
}

/* Spalten-Inhalt über dem Hintergrund */
.fs-col > *:not(.fs-col__bg) {
    position: relative;
    z-index: 1;
}

/* ================================================================
   Boxed-Offset: Abstand vom Browserrand zum Boxed-Inhalt
   Wird als Custom Property auf :root berechnet und kann als
   Spalten-Padding genutzt werden (= Boxed Checkbox im Backend).
   ================================================================ */
:root {
    --fs-boxed-offset: max(
        0px,
        calc((100vw - var(--fs-max-width, 1200px)) / 2)
    );
}

/* Spalten-Padding – Desktop */
.fs-col {
    padding-top:    var(--fs-col-pad-top-d,    0px);
    padding-right:  var(--fs-col-pad-right-d,  0px);
    padding-bottom: var(--fs-col-pad-bottom-d, 0px);
    padding-left:   var(--fs-col-pad-left-d,   0px);
}

/* ================================================================
   Parallax-Effekt (CSS background-attachment: fixed)
   Hinweis: funktioniert nicht auf iOS Safari
   ================================================================ */
.fs-row__bg--parallax {
    background-attachment: fixed;
}

/* iOS-Fallback: fixed deaktivieren */
@supports (-webkit-touch-callout: none) {
    .fs-row__bg--parallax {
        background-attachment: scroll;
    }
}

/* Parallax-Höhe: auf fs-row__inner damit der Dokumentfluss korrekt ist */
.fs-row--parallax > .fs-row__inner {
    min-height: var(--fs-parallax-h, 50vh);
}