/* Inhaltsbreite ab 992px: Fensterbreite abzüglich 50px Rand links und rechts, höchstens 1400px Inhalt
   (ab 1500px Fensterbreite also 1400px, zentriert). Gilt für alle Container (Header, Inhaltselemente, Footer)
   sowie Startseiten-Slider und Seiten-Header (pageheader). Unter 992px bleibt es bei den Bootstrap-Breiten. */
@media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .frame-group-container,
    .frame-container-default,
    .cc-container {
        max-width: 1500px;
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-right: 50px;
        padding-left: 50px;
    }

    /* Inhaltselemente: der innere .frame-container hat zusätzlich calc(var(--bs-gutter-x) * .5) Padding,
       daher hier entsprechend weniger, damit der Inhalt ebenfalls bei 50px beginnt */
    .frame-group-container {
        margin-right: auto;
        margin-left: auto;
        /* --bs-gutter-x ist erst am .frame-container gesetzt, daher der Bootstrap-Package-Wert 40px als Rückfall */
        padding-right: calc(50px - var(--bs-gutter-x, 40px) * .5);
        padding-left: calc(50px - var(--bs-gutter-x, 40px) * .5);
    }

    /* Inhaltselemente in Spalten-Containern (Frame im Frame): kein zusätzlicher Rand – der Inhalt beginnt an der
       Spaltenkante und damit bündig mit den übrigen Inhalten (50px). Elemente mit eigener Hintergrundfarbe
       behalten den Innenabstand ihres inneren Containers. */
    .frame .frame > .frame-group-container {
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    .frame .frame.frame-background-none > .frame-group-container > .frame-group-inner > .frame-container {
        padding-right: 0;
        padding-left: 0;
    }

    /* verschachtelte Container (Frames in Containern) ohne eigenen Rand – wie im Bootstrap Package */
    .container .frame-container,
    .container .frame-group-container {
        padding-right: 0;
        padding-left: 0;
    }

    /* Seiten-Header: die Box selbst hat schon die Inhaltsbreite, innen gilt nur der Abstand aus main.css */
    .frame.pageheader > .frame-group-container {
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    /* Elemente mit eigener Breite statt Container (main.css: 1280px bzw. 920–1280px) */
    .section.section-default > .frame-type-ws_slider,
    .frame.pageheader {
        max-width: min(1400px, 100% - 100px);
    }
}

/* Header (Logo, Navigation, Suche) bleibt beim Scrollen oben stehen – Desktop und mobil.
   Sprungmarken (Anker) landen unterhalb des Headers. */
#page-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    /* !important: Bootstrap Package setzt bei navbar-default-transition „transparent !important“ */
    background: #fff !important;
}

html {
    scroll-padding-top: 120px;
}

@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 90px;
    }
}

/* Startseite: Bereich mit Text + Zahlen-Kreisen (#c8) liegt immer über dem Slider (#c6), in den die Kreise
   hineinragen. Der Swiper im Slider hat selbst z-index 1, deshalb hier höher. */
#c6 {
    position: relative;
    z-index: 1;
}

#c8 {
    position: relative;
    z-index: 2;
}