/* =========================================================
   GRID SYSTEM – 12-Spalten, Bootstrap-ähnlich
   Breakpoints:  sm  < 810px
                 md  ≥ 810px
                 lg  ≥ 1200px
                 xl  ≥ 1920px
========================================================= */
.container {
    width: 100%;
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--grid-pad);
    padding-left: var(--grid-pad);
    box-sizing: border-box;
}

.eb .container {
    width: 100%;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--grid-pad);
    padding-left: var(--grid-pad);
    box-sizing: border-box;
}

.container-full {
    width: 100%;
    box-sizing: border-box;
    margin: 0px;
    padding: 1rem 0rem;
}

.hero-container {
    width: 100%;
    max-width: 2540px;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--grid-pad);
    padding-left: var(--grid-pad);
    box-sizing: border-box;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter-x, 15px) * -0.5);
    margin-left: calc(var(--gutter-x, 15px) * -0.5);
}

[class*="col-"] {
    box-sizing: border-box;
    padding-right: calc(var(--gutter-x, 15px) * 0.5);
    padding-left: calc(var(--gutter-x, 15px) * 0.5);
    flex-shrink: 0;
    width: 100%;
}

/* ── Base (immer aktiv, mobile-first) ── */
.col-1 {
    flex: 0 0 auto;
    width: 8.3333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.6667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.3333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.6667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.3333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.6667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.3333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.6667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

/* ── sm ≥ 500px ── */
@media (min-width: 500px) {
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.3333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.6667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.6667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.3333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.6667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.6667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 809px) {
    .nobg {
        padding-right: 0rem !important;
    }
}

/* ── md ≥ 810px ── */
@media (min-width: 810px) {

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.3333%;
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.6667%;
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.6667%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.3333%;
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.6667%;
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.6667%;
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ── lg ≥ 1200px ── */
@media (min-width: 1280px) {
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.3333%;
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.6667%;
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.6667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.3333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.6667%;
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.6667%;
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ── xl ≥ 1920px ── */
@media (min-width: 1920px) {
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.3333%;
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.6667%;
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.6667%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.3333%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.6667%;
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.6667%;
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* =========================================================
   VERTIKALE POSITIONIERUNG – pos-v-1 bis pos-v-4
   Richtet einen Container absolut an den horizontalen
   Hintergrund-Linien des Gradients aus.
   Voraussetzung: Elternelement hat position: relative
   (gilt für .hero automatisch).

   Linie 1 → var(--grid-pad)
   Linie 2 → calc(25% + var(--grid-pad) / 2)
   Linie 3 → 50%
   Linie 4 → calc(75% - var(--grid-pad) / 2)
========================================================= */
.pos-v-1,
.pos-v-2,
.pos-v-25,
.pos-v-3,
.pos-v-4 {
    position: absolute;
    left: 0;
    right: 0;
}

.pos-v-1 {
    top: var(--grid-pad);
}

.pos-v-2 {
    top: calc(25% + var(--grid-pad) / 2);
}

.pos-v-25 {
    top: calc(40% + var(--grid-pad) / 2);
}

.pos-v-3 {
    top: 50%;
}

.pos-v-4 {
    top: calc(75% - var(--grid-pad) / 2);
}

/* =========================================================
   SPACING UTILITIES – Bootstrap-kompatibel
   Skala:  0 = 0
           1 = 0.25rem
           2 = 0.5rem
           3 = 1rem
           4 = 1.5rem
           5 = 3rem
========================================================= */

/* ── Margin all ── */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

/* ── Margin top ── */
.mt-n-5 {
    margin-top: -3rem !important;
}

.mt-n-4 {
    margin-top: -1.5rem !important;
}

.mt-n-3 {
    margin-top: -1rem !important;
}

.mt-n-2 {
    margin-top: -0.5rem !important;
}

.mt-n-1 {
    margin-top: -0.25rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

/* ── Margin bottom ── */
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

/* ── Margin start (links) ── */
.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

/* ── Margin end (rechts) ── */
.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}

/* ── Margin x-Achse (links + rechts) ── */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

.mx-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.mx-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.mx-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.mx-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Margin y-Achse (oben + unten) ── */
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

/* ── Padding all ── */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

/* ── Padding top ── */
.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

/* ── Padding bottom ── */
.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

/* ── Padding start (links) ── */
.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}

/* ── Padding end (rechts) ── */
.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

/* ── Padding x-Achse (links + rechts) ── */
.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.px-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

/* ── Padding y-Achse (oben + unten) ── */
.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* =========================================================
   RESPONSIVE SPACING UTILITIES
   px, mx, py, my – jeweils 0–5 (+auto für mx)
   sm ≥ 500px | md ≥ 810px | lg ≥ 1280px | xl ≥ 1920px
========================================================= */

/* ── sm ≥ 500px ── */
@media (min-width: 500px) {
    .px-sm-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .px-sm-1 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .px-sm-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .px-sm-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-sm-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .px-sm-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-sm-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-sm-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .mx-sm-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mx-sm-1 {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }

    .mx-sm-2 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    .mx-sm-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .mx-sm-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }

    .mx-sm-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }

    .mx-sm-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-sm-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-sm-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }
}

/* ── md ≥ 810px ── */
@media (min-width: 810px) {
    .px-md-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .px-md-1 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .px-md-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .px-md-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-md-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .px-md-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-md-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-md-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-md-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-md-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .mx-md-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mx-md-1 {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }

    .mx-md-2 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    .mx-md-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .mx-md-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }

    .mx-md-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }

    .mx-md-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-md-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-md-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-md-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-md-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-md-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }
}

/* ── lg ≥ 1280px ── */
@media (min-width: 1280px) {
    .px-lg-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .px-lg-1 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .px-lg-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .px-lg-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-lg-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .px-lg-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-lg-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-lg-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-lg-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-lg-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-lg-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .mx-lg-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mx-lg-1 {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }

    .mx-lg-2 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    .mx-lg-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .mx-lg-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }

    .mx-lg-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }

    .mx-lg-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-lg-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-lg-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-lg-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-lg-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-lg-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }
}

/* ── xl ≥ 1920px ── */
@media (min-width: 1920px) {
    .px-xl-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .px-xl-1 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .px-xl-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .px-xl-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-xl-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .px-xl-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-xl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-xl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-xl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-xl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-xl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .mx-xl-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mx-xl-1 {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }

    .mx-xl-2 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    .mx-xl-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .mx-xl-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }

    .mx-xl-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }

    .mx-xl-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-xl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-xl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-xl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-xl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-xl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }
}

/* =========================================================
   MAX-WIDTH UTILITIES – .max-w-50 bis .max-w-500
   Schritte: 50px
========================================================= */
.max-w-50 {
    max-width: 50px !important;
}

.max-w-100 {
    max-width: 100px !important;
}

.max-w-150 {
    max-width: 150px !important;
}

.max-w-200 {
    max-width: 200px !important;
}

.max-w-250 {
    max-width: 250px !important;
}

.max-w-300 {
    max-width: 300px !important;
}

.max-w-350 {
    max-width: 350px !important;
}

.max-w-400 {
    max-width: 400px !important;
}

.max-w-450 {
    max-width: 450px !important;
}

.max-w-500 {
    max-width: 500px !important;
}

.max-w-550 {
    max-width: 550px !important;
}

.max-w-600 {
    max-width: 600px !important;
}

.max-w-650 {
    max-width: 650px !important;
}

.max-w-700 {
    max-width: 700px !important;
}

.max-w-750 {
    max-width: 750px !important;
}

.max-w-800 {
    max-width: 800px !important;
}

/* =========================================================
   CARDS – Bootstrap-kompatibel
   Klassen: .card, .card-body, .card-header, .card-footer,
            .card-title, .card-subtitle, .card-text, .card-link,
            .card-img, .card-img-top, .card-img-bottom,
            .card-img-overlay, .card-group
   Stretched Link: .stretched-link  (kein JS nötig – rein CSS)
========================================================= */
.nobg {
    background-color: transparent !important;
}

.nobg {
    padding-right: 2.5rem;
}

/* ── Basis ── */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--card-height);
    word-wrap: break-word;
    background-color: var(--card-bg, #ffffff0a);
    background-clip: border-box;
    /* border: var(--card-border-width, 1px) solid var(--card-border-color, rgba(0, 0, 0, .125)); */
    border-radius: var(--card-border-radius, 2rem);
    overflow: hidden;
}

.card:hover {
    background-color: var(--card-bg-hover, #ffffff1a);
}

.card>hr {
    margin-right: 0;
    margin-left: 0;
}

.card>.list-group {
    border-top: inherit;
    border-bottom: inherit;
}

.card>.list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
    border-top-right-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
}

.card>.list-group:last-child {
    border-bottom-width: 0;
    border-bottom-left-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
    border-bottom-right-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
}

/* ── Body ── */
.card-body {
    flex: 1 1 auto;
    padding: var(--card-spacer-y, 1rem) var(--card-spacer-x, 1rem);
    color: var(--card-color);
}

/* ── Titel & Text ── */
.card-title {
    margin-bottom: var(--card-title-spacer-y, 0.5rem);
}

.card-subtitle {
    margin-top: calc(-0.5 * var(--card-title-spacer-y, 0.5rem));
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

/* ── Link ── */
.card-link+.card-link {
    margin-left: var(--card-spacer-x, 1rem);
}

/* ── Header ── */
.card-header {
    padding: var(--card-cap-padding-y, 0.5rem) var(--card-cap-padding-x, 1rem);
    margin-bottom: 0;
    color: var(--card-cap-color);
    background-color: var(--card-cap-bg, rgba(0, 0, 0, .03));
    border-bottom: var(--card-border-width, 1px) solid var(--card-border-color, rgba(0, 0, 0, .125));
}

.card-header:first-child {
    border-radius:
        calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px)) calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px)) 0 0;
}

/* ── Footer ── */
.card-footer {
    padding: var(--card-cap-padding-y, 0.5rem) var(--card-cap-padding-x, 1rem);
    color: var(--card-cap-color);
}

.card-footer:last-child {
    border-radius:
        0 0 calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px)) calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
}

/* ── Bilder ── */
.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
}

.card-img,
.card-img-top {
    border-top-left-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
    border-top-right-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
    border-bottom-left-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
}

/* ── Bild-Overlay ── */
.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--card-img-overlay-padding, 1rem);
    border-radius: calc(var(--card-border-radius, 0.375rem) - var(--card-border-width, 1px));
}

.card-deck .preheadline {
    display: block;
    color: var(--c1);
    font-family: var(--ff2);
    letter-spacing: 0.05rem;
    font-size: 0.85rem;
}

.card-deck h2 {
    margin: 8px 0px 0px 0px;
}

.card-deck .headline {
    display: block;
    color: var(--c1);
    font-family: var(--fi);
    font-size: 2.3rem;
    font-weight: 400;
    line-height: 1.3;
    text-wrap: balance;
    hyphens: none;
}

.card-deck .headline2 {
    color: var(--c1);
    font-family: var(--fi) !important;
    font-size: 2.3rem;
    font-weight: 400;
    line-height: 1.3;
    text-wrap: balance;
    hyphens: none;
}

.card-deck .subheadline {
    display: block;
    color: var(--c1);
    font-family: var(--ff2);
    letter-spacing: 0.05rem;
    font-size: 0.85rem;
}

.card-deck .subheadline2 {
    display: block;
    color: var(--c1);
    font-family: var(--ff1);
    letter-spacing: 0.05rem;
    font-size: 0.85rem;
}

/* ── Card Deck ── */
/* Gleiche card-body-Höhe ohne JS:
   .card-deck ist bereits eine .row (display: flex; flex-wrap: wrap).
   align-items: stretch (Flex-Standard) streckt alle col-Elemente auf
   die Höhe des größten Elements in der Zeile.
   .card füllt diese Höhe komplett aus (height: 100%).
   .card-body wächst mit flex: 1 1 auto auf den verbleibenden Platz –
   so sind alle card-bodies einer Zeile gleich hoch. */
.card-deck .card {
    height: 100%;
}

.card-deck .card-body {
    flex: 1 1 auto;
}

/* ── Card Group ── */
.card-group {
    display: flex;
    flex-flow: row wrap;
}

@media (min-width: 576px) {
    .card-group>.card {
        flex: 1 0 0%;
        margin-bottom: 0;
    }

    .card-group>.card+.card {
        margin-left: 0;
        border-left: 0;
    }

    .card-group>.card:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .card-group>.card:not(:last-child) .card-img-top,
    .card-group>.card:not(:last-child) .card-header {
        border-top-right-radius: 0;
    }

    .card-group>.card:not(:last-child) .card-img-bottom,
    .card-group>.card:not(:last-child) .card-footer {
        border-bottom-right-radius: 0;
    }

    .card-group>.card:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .card-group>.card:not(:first-child) .card-img-top,
    .card-group>.card:not(:first-child) .card-header {
        border-top-left-radius: 0;
    }

    .card-group>.card:not(:first-child) .card-img-bottom,
    .card-group>.card:not(:first-child) .card-footer {
        border-bottom-left-radius: 0;
    }
}

/* =========================================================
   STRETCHED LINK – macht die gesamte Card anklickbar
   Voraussetzung: Der enthaltende Block (i. d. R. .card) muss
   position: relative haben (ist bei .card bereits gesetzt).
   Das ::after-Pseudo-Element überspannt den gesamten Block
   und macht ihn zur Klickfläche des Links.

   Verwendung:
     <div class="card">
       <div class="card-body">
         <a href="…" class="stretched-link">Mehr erfahren</a>
       </div>
     </div>
========================================================= */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* =========================================================
   NAV & NAV-PILLS – Bootstrap-kompatibel
   Klassen: .nav, .nav-item, .nav-link, .nav-pills,
            .nav-fill, .nav-justified
========================================================= */

/* ── Basis ── */
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: var(--nav-link-padding-y, 0.5rem) var(--nav-link-padding-x, 0.75rem);
    font-size: var(--nav-link-font-size);
    font-weight: var(--nav-link-font-weight);
    color: var(--nav-link-color, var(--c1));
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.card .nav-link {
    padding: 0.15rem 0.75rem;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--nav-link-hover-color, var(--c2));
    text-decoration: none;
}

.nav-link.disabled,
.nav-link:disabled {
    color: var(--nav-link-disabled-color, #6c757d);
    pointer-events: none;
    cursor: default;
}

/* ── Pills ── */
.nav-pills {
    --nav-pills-border-radius: var(--border-radius, 50rem);
    --nav-pills-link-active-color: var(--c4, #fff);
    --nav-pills-link-active-bg: var(--c2, #0d6efd);
}

.nav-pills .nav-link {
    border-radius: var(--nav-pills-border-radius);
    font-family: var(--ff2);
    font-size: 0.65rem;
    letter-spacing: 0.05rem;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    position: relative;
    z-index: 2;
    margin-top: 0.5rem;
}

.tags .nav-link.ms-2:nth-last-child(2) {
    margin-right: 0.5rem !important;
}

.tags .nav-link.ms-2:last-of-type {
    margin-left: 0rem !important;
}

.nav-pills .nav-link:hover {
    border-radius: var(--nav-pills-border-radius);
    border: 2px solid #ff646e;
    color: var(--c1);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--nav-pills-link-active-color);
    background-color: var(--nav-pills-link-active-bg);
}

/* ── Fill & Justified ── */
.nav-fill>.nav-link,
.nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center;
}

.nav-justified>.nav-link,
.nav-justified .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
}

/* =========================================================
   FLEX UTILITIES – Bootstrap-kompatibel
   Breakpoints: sm ≥ 810px  |  md ≥ 810px  |  lg ≥ 1200px
========================================================= */

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-block {
    display: block !important;
}

.d-none {
    display: none !important;
}

/* flex-direction */
.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

/* flex-wrap */
.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* justify-content */
.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

/* align-items */
.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

/* align-self */
.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

/* flex-grow / flex-shrink / flex-fill */
.flex-fill {
    flex: 1 1 auto !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* gap */
.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}

.gap-x-0 {
    column-gap: 0 !important;
}

.gap-x-1 {
    column-gap: 0.25rem !important;
}

.gap-x-2 {
    column-gap: 0.5rem !important;
}

.gap-x-3 {
    column-gap: 1rem !important;
}

.gap-x-4 {
    column-gap: 1.5rem !important;
}

.gap-x-5 {
    column-gap: 3rem !important;
}

.gap-y-0 {
    row-gap: 0 !important;
}

.gap-y-1 {
    row-gap: 0.25rem !important;
}

.gap-y-2 {
    row-gap: 0.5rem !important;
}

.gap-y-3 {
    row-gap: 1rem !important;
}

.gap-y-4 {
    row-gap: 1.5rem !important;
}

.gap-y-5 {
    row-gap: 3rem !important;
}

/* ── sm-Breakpoint (≥ 810px) ── */
@media (min-width: 810px) {
    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-inline-flex {
        display: inline-flex !important;
    }

    .d-sm-block {
        display: block !important;
    }

    .d-sm-none {
        display: none !important;
    }

    .flex-sm-row {
        flex-direction: row !important;
    }

    .flex-sm-column {
        flex-direction: column !important;
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-sm-wrap {
        flex-wrap: wrap !important;
    }

    .flex-sm-nowrap {
        flex-wrap: nowrap !important;
    }

    .justify-content-sm-start {
        justify-content: flex-start !important;
    }

    .justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .justify-content-sm-center {
        justify-content: center !important;
    }

    .justify-content-sm-between {
        justify-content: space-between !important;
    }

    .justify-content-sm-around {
        justify-content: space-around !important;
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-sm-start {
        align-items: flex-start !important;
    }

    .align-items-sm-end {
        align-items: flex-end !important;
    }

    .align-items-sm-center {
        align-items: center !important;
    }

    .align-items-sm-baseline {
        align-items: baseline !important;
    }

    .align-items-sm-stretch {
        align-items: stretch !important;
    }

    .align-self-sm-start {
        align-self: flex-start !important;
    }

    .align-self-sm-end {
        align-self: flex-end !important;
    }

    .align-self-sm-center {
        align-self: center !important;
    }

    .align-self-sm-baseline {
        align-self: baseline !important;
    }

    .align-self-sm-stretch {
        align-self: stretch !important;
    }

    .gap-sm-0 {
        gap: 0 !important;
    }

    .gap-sm-1 {
        gap: 0.25rem !important;
    }

    .gap-sm-2 {
        gap: 0.5rem !important;
    }

    .gap-sm-3 {
        gap: 1rem !important;
    }

    .gap-sm-4 {
        gap: 1.5rem !important;
    }

    .gap-sm-5 {
        gap: 3rem !important;
    }
}

/* ── md-Breakpoint (≥ 810px) ── */
@media (min-width: 810px) {
    .d-md-flex {
        display: flex !important;
    }

    .d-md-inline-flex {
        display: inline-flex !important;
    }

    .d-md-block {
        display: block !important;
    }

    .d-md-none {
        display: none !important;
    }

    .flex-md-row {
        flex-direction: row !important;
    }

    .flex-md-column {
        flex-direction: column !important;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-md-wrap {
        flex-wrap: wrap !important;
    }

    .flex-md-nowrap {
        flex-wrap: nowrap !important;
    }

    .justify-content-md-start {
        justify-content: flex-start !important;
    }

    .justify-content-md-end {
        justify-content: flex-end !important;
    }

    .justify-content-md-center {
        justify-content: center !important;
    }

    .justify-content-md-between {
        justify-content: space-between !important;
    }

    .justify-content-md-around {
        justify-content: space-around !important;
    }

    .justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-md-start {
        align-items: flex-start !important;
    }

    .align-items-md-end {
        align-items: flex-end !important;
    }

    .align-items-md-center {
        align-items: center !important;
    }

    .align-items-md-baseline {
        align-items: baseline !important;
    }

    .align-items-md-stretch {
        align-items: stretch !important;
    }

    .align-self-md-start {
        align-self: flex-start !important;
    }

    .align-self-md-end {
        align-self: flex-end !important;
    }

    .align-self-md-center {
        align-self: center !important;
    }

    .align-self-md-baseline {
        align-self: baseline !important;
    }

    .align-self-md-stretch {
        align-self: stretch !important;
    }

    .gap-md-0 {
        gap: 0 !important;
    }

    .gap-md-1 {
        gap: 0.25rem !important;
    }

    .gap-md-2 {
        gap: 0.5rem !important;
    }

    .gap-md-3 {
        gap: 1rem !important;
    }

    .gap-md-4 {
        gap: 1.5rem !important;
    }

    .gap-md-5 {
        gap: 3rem !important;
    }

    .ms-md-auto {
        margin-left: auto !important;
    }
}

/* ── lg-Breakpoint (≥ 1200px) ── */
@media (min-width: 1200px) {
    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-inline-flex {
        display: inline-flex !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .d-lg-none {
        display: none !important;
    }

    .flex-lg-row {
        flex-direction: row !important;
    }

    .flex-lg-column {
        flex-direction: column !important;
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-lg-wrap {
        flex-wrap: wrap !important;
    }

    .flex-lg-nowrap {
        flex-wrap: nowrap !important;
    }

    .justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .justify-content-lg-center {
        justify-content: center !important;
    }

    .justify-content-lg-between {
        justify-content: space-between !important;
    }

    .justify-content-lg-around {
        justify-content: space-around !important;
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-lg-start {
        align-items: flex-start !important;
    }

    .align-items-lg-end {
        align-items: flex-end !important;
    }

    .align-items-lg-center {
        align-items: center !important;
    }

    .align-items-lg-baseline {
        align-items: baseline !important;
    }

    .align-items-lg-stretch {
        align-items: stretch !important;
    }

    .align-self-lg-start {
        align-self: flex-start !important;
    }

    .align-self-lg-end {
        align-self: flex-end !important;
    }

    .align-self-lg-center {
        align-self: center !important;
    }

    .align-self-lg-baseline {
        align-self: baseline !important;
    }

    .align-self-lg-stretch {
        align-self: stretch !important;
    }

    .gap-lg-0 {
        gap: 0 !important;
    }

    .gap-lg-1 {
        gap: 0.25rem !important;
    }

    .gap-lg-2 {
        gap: 0.5rem !important;
    }

    .gap-lg-3 {
        gap: 1rem !important;
    }

    .gap-lg-4 {
        gap: 1.5rem !important;
    }

    .gap-lg-5 {
        gap: 3rem !important;
    }
}

/* ── xl-Breakpoint (≥ 1920px) ── */
@media (min-width: 1920px) {
    .d-xl-flex {
        display: flex !important;
    }

    .d-xl-inline-flex {
        display: inline-flex !important;
    }

    .d-xl-block {
        display: block !important;
    }

    .d-xl-none {
        display: none !important;
    }

    .flex-xl-row {
        flex-direction: row !important;
    }

    .flex-xl-column {
        flex-direction: column !important;
    }

    .flex-xl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-xl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-xl-wrap {
        flex-wrap: wrap !important;
    }

    .flex-xl-nowrap {
        flex-wrap: nowrap !important;
    }

    .justify-content-xl-start {
        justify-content: flex-start !important;
    }

    .justify-content-xl-end {
        justify-content: flex-end !important;
    }

    .justify-content-xl-center {
        justify-content: center !important;
    }

    .justify-content-xl-between {
        justify-content: space-between !important;
    }

    .justify-content-xl-around {
        justify-content: space-around !important;
    }

    .justify-content-xl-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-xl-start {
        align-items: flex-start !important;
    }

    .align-items-xl-end {
        align-items: flex-end !important;
    }

    .align-items-xl-center {
        align-items: center !important;
    }

    .align-items-xl-baseline {
        align-items: baseline !important;
    }

    .align-items-xl-stretch {
        align-items: stretch !important;
    }

    .align-self-xl-start {
        align-self: flex-start !important;
    }

    .align-self-xl-end {
        align-self: flex-end !important;
    }

    .align-self-xl-center {
        align-self: center !important;
    }

    .align-self-xl-baseline {
        align-self: baseline !important;
    }

    .align-self-xl-stretch {
        align-self: stretch !important;
    }

    .gap-xl-0 {
        gap: 0 !important;
    }

    .gap-xl-1 {
        gap: 0.25rem !important;
    }

    .gap-xl-2 {
        gap: 0.5rem !important;
    }

    .gap-xl-3 {
        gap: 1rem !important;
    }

    .gap-xl-4 {
        gap: 1.5rem !important;
    }

    .gap-xl-5 {
        gap: 3rem !important;
    }
}

/* =========================================================
   TAGS POPULAR – mod-tagspopular
   Klassen: .mod-tagspopular, .tagspopular,
            .mod-articlescategories, .categories-module, .mod-list,
            .tag-count
========================================================= */

/* ── Basis ── */
.mod-tagspopular ul,
.tagspopular ul,
.mod-articlescategories,
.categories-module,
.mod-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    gap: 0.35rem;
}

.mod-tagspopular li,
.tagspopular li,
.mod-articlescategories li,
.categories-module li,
.mod-list li {
    display: flex;
    align-items: center;
}

/* ── Link (entspricht .nav-link in Pills-Optik) ── */
.mod-tagspopular li,
.tagspopular li,
.mod-articlescategories li,
.categories-module li,
.mod-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.15rem 0.15rem 0.75rem;
    font-family: var(--ff2);
    font-size: 0.65rem;
    letter-spacing: 0.05rem;
    color: var(--nav-link-color, var(--c1));
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    border-radius: var(--border-radius, 50rem);
    transition: color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out;
}

.mod-tagspopular a,
.mod-articlescategories a,
.categories-module a,
.mod-list a {
    color: var(--c1);
    text-decoration: none;
}

.mod-tagspopular li:hover,
.mod-tagspopular li:focus,
.tagspopular li:hover,
.tagspopular li:focus,
.mod-articlescategories li:hover,
.mod-articlescategories li:focus,
.categories-module li:hover,
.categories-module li:focus,
.mod-list li:hover,
.mod-list li:focus {
    border-color: #ff646e;
    color: var(--nav-link-hover-color, var(--c1));
    text-decoration: none;
}

/* ── Badge / Zähler ── */
.mod-articlescategories .tag-count,
.mod-tagspopular .tag-count,
.tagspopular .tag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    padding: 0.25rem;
    font-family: var(--ff3);
    font-size: 0.55rem;
    line-height: 1;
    border-radius: 50rem;
    background-color: var(--c1);
    color: var(--c5);
    height: 1rem;
}