.uniplus-sektion-block {
    box-sizing: border-box;
}

/* Spacing-Skala Bootstrap 4 ($spacer: 1rem !default), Stufen 2/3/4/5 --
   Stufen 0/1 (0 / 0.25rem) ausgelassen, zu knapp fuer einen Sektions-Abstand.
   Gilt hier (Modus "Container + Innenabstand") auf allen vier Seiten. */
.uniplus-sektion-block--padding-xs { padding: 0.5rem; }  /* Bootstrap-Stufe 2 */
.uniplus-sektion-block--padding-sm { padding: 1rem; }    /* Bootstrap-Stufe 3 ($spacer) */
.uniplus-sektion-block--padding-md { padding: 1.5rem; }  /* Bootstrap-Stufe 4 */
.uniplus-sektion-block--padding-lg { padding: 3rem; }    /* Bootstrap-Stufe 5 */

/* Im Vollbreite-Modus gilt derselbe Innenabstand nur oben/unten -- links/rechts
   kommt bereits aus der Bootstrap-4-Container-Breite von .uniplus-sektion-block__inner
   (siehe unten). Hoehere Spezifitaet durch die zusaetzliche --fullwidth-Klasse
   ueberschreibt die obigen Allseiten-Regeln zuverlaessig. Gilt gleichermassen fuer
   "--fullwidth-preview" (Editor-Vorschau, siehe unten), damit der Innenabstand dort
   optisch genauso aussieht wie im Frontend. */
.uniplus-sektion-block--fullwidth.uniplus-sektion-block--padding-xs,
.uniplus-sektion-block--fullwidth-preview.uniplus-sektion-block--padding-xs { padding: 0.5rem 0; }
.uniplus-sektion-block--fullwidth.uniplus-sektion-block--padding-sm,
.uniplus-sektion-block--fullwidth-preview.uniplus-sektion-block--padding-sm { padding: 1rem 0; }
.uniplus-sektion-block--fullwidth.uniplus-sektion-block--padding-md,
.uniplus-sektion-block--fullwidth-preview.uniplus-sektion-block--padding-md { padding: 1.5rem 0; }
.uniplus-sektion-block--fullwidth.uniplus-sektion-block--padding-lg,
.uniplus-sektion-block--fullwidth-preview.uniplus-sektion-block--padding-lg { padding: 3rem 0; }

/* NUR die echte Frontend-Klasse bekommt den 100vw-Breakout -- die Editor-Vorschau
   ("--fullwidth-preview") bewusst nicht, da der Editor-Canvas in einem schmaleren
   iframe laeuft und 50vw/100vw dort nicht der tatsaechlichen Fensterbreite entspricht
   (siehe build-src/edit.js fuer die ausfuehrliche Begruendung). */
.uniplus-sektion-block--fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Innenbereich: Breite + Seiten-Padding an die tatsaechliche .container-Klasse
   des aktiven Themes angelehnt -- Bootstrap-4-Standardstufen (576/768/992/1200px)
   PLUS eine zusaetzliche, projektspezifische 1600px-Stufe, die im aktiven Theme
   ergaenzt wurde (kein vanilla-Bootstrap-4-Breakpoint). */
.uniplus-sektion-block--fullwidth .uniplus-sektion-block__inner {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 576px) {
    .uniplus-sektion-block--fullwidth .uniplus-sektion-block__inner { max-width: 540px; }
}
@media (min-width: 768px) {
    .uniplus-sektion-block--fullwidth .uniplus-sektion-block__inner { max-width: 720px; }
}
@media (min-width: 992px) {
    .uniplus-sektion-block--fullwidth .uniplus-sektion-block__inner { max-width: 960px; }
}
@media (min-width: 1200px) {
    .uniplus-sektion-block--fullwidth .uniplus-sektion-block__inner { max-width: 1140px; }
}
@media (min-width: 1600px) {
    .uniplus-sektion-block--fullwidth .uniplus-sektion-block__inner {
        max-width: 1600px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Hoehe (IMPL-016): min-height statt fester Hoehe -- Inhalt darf die Sektion
   ueberragen, keine vertikale Zentrierung/Flex. */
.uniplus-sektion-block--height-15vh { min-height: 15vh; }
.uniplus-sektion-block--height-25vh { min-height: 25vh; }
.uniplus-sektion-block--height-33vh { min-height: 33vh; }
.uniplus-sektion-block--height-50vh { min-height: 50vh; }
.uniplus-sektion-block--height-66vh { min-height: 66vh; }
.uniplus-sektion-block--height-75vh { min-height: 75vh; }
.uniplus-sektion-block--height-100vh { min-height: 100vh; }

/*
 * Farbverlauf (IMPL-017) als absolut positioniertes Pseudo-Element statt als
 * background-image-Ebene: "bottom: 0" bindet die Kante direkt und pixelgenau
 * an die Box, waehrend prozentuale background-size/-position-Werte bei
 * gebrochenen Pixel-Hoehen unabhaengig voneinander runden und dadurch am
 * unteren Rand eine Sub-Pixel-Luecke (Seitenhintergrund blitzt durch) erzeugen
 * konnten. Die Verlaufsfarbe kommt als CSS-Custom-Property (inline pro
 * Instanz gesetzt, siehe render.php/edit.js), da sie pro Block unterschiedlich
 * und Pseudo-Elemente kein eigenes style-Attribut haben.
 */
.uniplus-sektion-block--gradient {
    position: relative;
}

.uniplus-sektion-block--gradient::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px; /* Pixelgenau statt Prozentwert (Nutzer-Entscheidung) -- ca. 15% einer typischen Sektionshoehe, ohne die Rundungsanfaelligkeit prozentualer Werte. */
    background: var(--uniplus-sektion-gradient);
    pointer-events: none;
}

/*
 * Hintergrundtext -- Layer-Reihenfolge (hinten -> vorne): Hintergrundfarbe,
 * Hintergrundtext, Inhalt (InnerBlocks). Nur bei Hintergrund-Typ "Farbe"
 * verfuegbar (Nutzer-Entscheidung), siehe render.php.
 *
 * .uniplus-sektion-block__bg-text ist absolut positioniert mit eigenem
 * z-index -- ohne z-index wuerde JEDES positionierte Element automatisch vor
 * unpositioniertem Inhalt liegen, unabhaengig von z-index-Wert/DOM-Reihenfolge.
 * .uniplus-sektion-block__content bekommt deshalb ein hoeheres z-index, damit
 * die InnerBlocks garantiert oben liegen (nur vorhanden, wenn Hintergrundtext
 * aktiv ist, siehe render.php).
 *
 * pointer-events: none + user-select: none: Text ist rein dekorativ, nicht
 * auswaehlbar/klickbar (Nutzer-Vorgabe). overflow: hidden schneidet zu langen
 * Text an der Sektionskante ab, statt sie zu sprengen.
 */
.uniplus-sektion-block--bg-text {
    position: relative;
    overflow: hidden;
}

.uniplus-sektion-block__bg-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start; /* Immer oben buendig (Nutzer-Vorgabe), unabhaengig von der horizontalen Ausrichtung. */
    pointer-events: none;
    user-select: none;
    font-weight: 700;
    line-height: 1;
    white-space: pre-line;
}

.uniplus-sektion-block__content {
    position: relative;
    z-index: 2;
}

.uniplus-sektion-block__bg-text--align-left { justify-content: flex-start; text-align: left; }
.uniplus-sektion-block__bg-text--align-center { justify-content: center; text-align: center; }
.uniplus-sektion-block__bg-text--align-right { justify-content: flex-end; text-align: right; }

/* Groessen-Skala (Nutzer-Vorgabe: lg = 18rem als Ankerpunkt/Standard). */
.uniplus-sektion-block__bg-text--xs { font-size: 6rem; }
.uniplus-sektion-block__bg-text--sm { font-size: 10rem; }
.uniplus-sektion-block__bg-text--md { font-size: 14rem; }
.uniplus-sektion-block__bg-text--lg { font-size: 18rem; }
.uniplus-sektion-block__bg-text--xxl { font-size: 24rem; }