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

.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%;
    }
}

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

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