/* ========================================================================
   SPIELESCHEUNE – BENUTZERDEFINIERTES CSS
   JTL-Shop / NOVAChild / Theme "my-nova"

   Stand: 2026-07-26 – bereinigte Gesamtfassung v12.4

   Zuständigkeit dieser Datei:
   - globale Designwerte und Typografie
   - allgemeine Buttons, Formulare und Statusfarben
   - Header, Navigation und offizielle Social-Icons
   - Footerlayout und Footer-Dekoration
   - OPC-Trennlinie mit Zusatzklasse .colored-divider
   - systemseitige Blog-/News-Trennlinie

   Bewusst NICHT hier enthalten:
   - SVG-System                  → themes/my-nova/icons/icons.css
   - Hero-Slider                → themes/my-nova/slider/hero-slider.css
   - Produktkarten              → themes/my-nova/products/product-card.css
   - Blogkarten                 → themes/my-nova/blog/home-news.css
   - Footer-Buchstabenanimation → themes/my-nova/letter/footer-letter.css

   Diese Trennung verhindert, dass globale Regeln die eigenständigen
   Komponenten erneut überschreiben.
   ======================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&display=swap");



/* ------------------------------------------------------------------------
   01. Lokale Schriften
   Poppins: ausschließlich Überschriften und Navigation
   Century Gothic: Fließtext, Formulare, Buttons und sonstige Inhalte
   ------------------------------------------------------------------------ */

@font-face {
    font-family: "Poppins";
    src: url("/templates/NOVAChild/fonts/poppins/poppins-v24-latin-300.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/templates/NOVAChild/fonts/poppins/poppins-v24-latin-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/templates/NOVAChild/fonts/poppins/poppins-v24-latin-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/templates/NOVAChild/fonts/poppins/poppins-v24-latin-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/templates/NOVAChild/fonts/poppins/poppins-v24-latin-700.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Century Gothic";
    src: url("/templates/NOVAChild/fonts/centurygothic/CenturyGothic.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Century Gothic";
    src: url("/templates/NOVAChild/fonts/centurygothic/CenturyGothic-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Century Gothic";
    src: url("/templates/NOVAChild/fonts/centurygothic/CenturyGothic-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Century Gothic";
    src: url("/templates/NOVAChild/fonts/centurygothic/CenturyGothic-BoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}


/* ------------------------------------------------------------------------
   02. Zentrale Designwerte
   ------------------------------------------------------------------------ */

:root {
    /* Schriften */
    --ss-font-body: "Century Gothic", Arial, sans-serif;
    --ss-font-display: "Poppins", Arial, sans-serif;

    /* Spielescheune-Farben */
    --ss-accent: #e56b5e;
    --ss-accent-rgb: 229, 107, 94;
    --ss-accent-hover: rgba(229, 107, 94, 0.7);
    --ss-accent-hover-solid: #cf5f54;
    --ss-accent-soft: rgba(229, 107, 94, 0.12);

    --ss-heading: #525252;
    --ss-text: #575757;
    --ss-text-muted: #757575;
    --ss-text-light: #8a8a8a;

    --ss-white: #ffffff;
    --ss-surface: #ffffff;
    --ss-surface-soft: #f7f7f7;
    --ss-border: #e2e2e2;
    --ss-border-dark: #c9c9c9;

    --ss-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.07);
    --ss-shadow-md: 0 12px 34px rgba(0, 0, 0, 0.14);

    --ss-radius-sm: 6px;
    --ss-radius: 9px;

    /* Symmetrische Position der Icongruppen links und rechts */
    --ss-header-actions-top: 40px;
    --ss-header-actions-side: clamp(28px, 2.5vw, 50px);

    /* Desktop-Hauptnavigation */
    --ss-nav-height: 66px;
    --ss-nav-font-size: clamp(17px, 1.05vw, 19px);
    --ss-nav-gap: clamp(22px, 2.1vw, 46px);
    --ss-nav-underline: 3px;

    /* Dekorative Footer-Grafik unten; entspricht dem Seitenverhältnis 1937 × 359 */
    --ss-footer-art-height: clamp(90px, 18.53vw, 359px);

    /* Dekorative Footer-Grafik oben */
    --ss-footer-top-art-height: clamp(70px, 10vw, 180px);

    /* Kompatibilität mit Komponenten, die Laufzeitvariablen verwenden */
    --primary: var(--ss-accent);
    --info: var(--ss-accent);
    --bs-primary: var(--ss-accent);
    --bs-info: var(--ss-accent);
}


/* ------------------------------------------------------------------------
   03. Grundlayout und Fließtext
   ------------------------------------------------------------------------ */

html {
    background: var(--ss-white);
}

body,
button,
input,
optgroup,
select,
textarea,
.form-control,
.custom-select,
.btn,
.dropdown-menu,
.popover,
.tooltip {
    font-family: var(--ss-font-body);
}

body {
    color: var(--ss-text);
    background: var(--ss-white);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Nur die eigentlichen Seitenwrapper neutralisieren.
   Keine generischen Bootstrap-Hintergrundklassen überschreiben. */
#page-wrapper,
#main-wrapper,
#content-wrapper,
.page-wrapper,
.content-wrapper,
main {
    background-color: var(--ss-white);
}

hr {
    border-color: var(--ss-border);
}

::selection {
    color: var(--ss-white);
    background: var(--ss-accent);
}


/* ------------------------------------------------------------------------
   04. Überschriften – ausschließlich Poppins
   ------------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title,
.modal-title {
    font-family: var(--ss-font-display);
    color: var(--ss-heading);
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.015em;
}

h1,
.h1 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    line-height: 1.2;
}

h2,
.h2 {
    font-size: clamp(1.65rem, 2.5vw, 2rem);
    line-height: 1.25;
}

h3,
.h3 {
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    line-height: 1.3;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    line-height: 1.35;
}


/* ------------------------------------------------------------------------
   05. Links und Tastaturfokus
   ------------------------------------------------------------------------ */

a {
    color: var(--ss-accent);
    transition: color 0.18s ease;
}

a:hover,
a:focus {
    color: var(--ss-accent-hover);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ss-accent);
    outline-offset: 2px;
}


/* ------------------------------------------------------------------------
   06. Oberer Desktop-Header mit buntem Hintergrund
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {
    #jtl-nav-wrapper .hide-navbar {
        position: relative;
        min-height: 130px;
        overflow: visible;
        background-color: var(--ss-white) !important;
        background-image: url("/templates/NOVAChild/themes/my-nova/images/scheune-header.png") !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% 100px !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar {
        position: relative;
        z-index: 1;
        min-height: 130px;
    }

    /* Der frühere linke Suchplatz trägt jetzt die Social-/Kontakt-Icons.
       Die eigentliche Suche bleibt als Lupen-Icon in der rechten Gruppe. */
    #jtl-nav-wrapper .main-search-wrapper {
        position: relative;
        top: var(--ss-header-actions-top);
        left: var(--ss-header-actions-side);
        z-index: 5;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        max-width: none !important;
        margin-right: auto !important;
    }

    /* Logo bleibt unabhängig von den seitlichen Elementen exakt mittig */
    #jtl-nav-wrapper .hide-navbar .nav-logo-wrapper {
        position: absolute !important;
        top: 50%;
        left: 50%;
        z-index: 2;
        margin: 0 !important;
        transform: translate(-50%, -50%);
    }

    /* Der Kategorienbereich unter dem Bild bleibt vollständig weiß */
    #jtl-nav-wrapper > .menu-center-center,
    #jtl-nav-wrapper > .menu-multiple-rows-multiple {
        position: relative;
        z-index: 2;
        background: var(--ss-white) !important;
    }
}


/* ------------------------------------------------------------------------
   07. Symmetrische Header-Icongruppen links und rechts
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {
    /* Linke Gruppe: Facebook, Instagram und Kontakt */
    #jtl-nav-wrapper .spielescheune-social-nav {
        display: flex;
        align-items: center;
    }

    #jtl-nav-wrapper .spielescheune-social-icons,
    #shop-nav.nav-icons {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
    }

    /* Rechte Gruppe: Konto, Suche, Wunschzettel und Warenkorb */
    #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper {
        position: relative;
        top: var(--ss-header-actions-top);
        right: var(--ss-header-actions-side);
        z-index: 5;
        margin-left: auto !important;
    }

    /* Gemeinsame Geometrie und Farbe aller Header-Icons */
    #jtl-nav-wrapper .spielescheune-social-icons > .nav-item > .nav-link,
    #shop-nav.nav-icons > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 44px;
        padding: 8px 9px;
        color: var(--ss-heading) !important;
        background: transparent;
        border: 0;
        font-size: 24px;
        line-height: 1;
        text-decoration: none;
        transition:
            color 0.18s ease,
            transform 0.18s ease;
    }

    #jtl-nav-wrapper .spielescheune-social-icons > .nav-item > .nav-link:hover,
    #jtl-nav-wrapper .spielescheune-social-icons > .nav-item > .nav-link:focus,
    #shop-nav.nav-icons > .nav-item > .nav-link:hover,
    #shop-nav.nav-icons > .nav-item > .nav-link:focus {
        color: var(--ss-accent) !important;
        transform: translateY(-1px);
    }
    /* Offizielle Markenicons bleiben unverändert und werden nur
       an das 25-px-Raster der eigenen SVG-Icons angeglichen. */
    #jtl-nav-wrapper
    .spielescheune-social-icons
    > .nav-item
    > .nav-link
    > .fab.fa-facebook-f,
    #jtl-nav-wrapper
    .spielescheune-social-icons
    > .nav-item
    > .nav-link
    > .fab.fa-instagram {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 25px !important;
        height: 25px !important;
        font-family: "Font Awesome 5 Brands" !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    #jtl-nav-wrapper
    .spielescheune-social-icons
    > .nav-item
    > .nav-link
    > .fab.fa-facebook-f {
        font-size: 21px !important;
    }

    #jtl-nav-wrapper
    .spielescheune-social-icons
    > .nav-item
    > .nav-link
    > .fab.fa-instagram {
        font-size: 20px !important;
    }

    /* Eigene Konto-, Such-, Wunschlisten-, Warenkorb- und Kontakticons
       werden ausschließlich über icons.css ausgegeben. */

#shop-nav .cart-icon-dropdown-price {
        display: none !important;
    }

    /* Mengen-Badge am Warenkorb bzw. Wunschzettel */
    #shop-nav .fa-sup,
    #shop-nav .badge {
        color: var(--ss-white) !important;
        background-color: var(--ss-accent) !important;
        border-color: var(--ss-accent) !important;
    }
}


/* ------------------------------------------------------------------------
   08. Ausklappbare Desktop-Suche
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {
    #shop-nav .spielescheune-search-dropdown {
        position: relative;
    }

    #shop-nav .spielescheune-search-dropdown > .dropdown-menu {
        right: 0;
        left: auto;
        width: min(380px, calc(100vw - 32px));
        min-width: 340px;
        margin-top: 8px;
        padding: 0;
        overflow: visible;
        border: 1px solid var(--ss-border);
        border-radius: var(--ss-radius);
        background: var(--ss-white);
        box-shadow: var(--ss-shadow-md);
    }

    #shop-nav .spielescheune-search-dropdown-body {
        padding: 16px;
    }

    #shop-nav .spielescheune-search-dropdown-body .input-group {
        flex-wrap: nowrap;
    }

    #shop-nav .spielescheune-search-dropdown-body .twitter-typeahead {
        width: 100%;
    }

    #shop-nav .spielescheune-search-dropdown-body .form-control {
        height: 46px;
        color: var(--ss-text);
        background: var(--ss-white);
        border: 1px solid var(--ss-border-dark);
        border-right: 0;
        border-radius: var(--ss-radius-sm) 0 0 var(--ss-radius-sm);
        box-shadow: none;
    }

    #shop-nav .spielescheune-search-dropdown-body .form-control:focus {
        border-color: var(--ss-accent);
        box-shadow: 0 0 0 3px var(--ss-accent-soft);
    }

    #shop-nav .spielescheune-search-dropdown-body .btn {
        min-width: 48px;
        color: var(--ss-white);
        background: var(--ss-accent);
        border-color: var(--ss-accent);
        border-radius: 0 var(--ss-radius-sm) var(--ss-radius-sm) 0;
    }

    #shop-nav .spielescheune-search-dropdown-body .btn:hover,
    #shop-nav .spielescheune-search-dropdown-body .btn:focus {
        color: var(--ss-white);
        background: var(--ss-accent-hover-solid);
        border-color: var(--ss-accent-hover-solid);
    }

    #shop-nav .spielescheune-search-dropdown .tt-menu {
        width: 100%;
        max-height: 360px;
        overflow-y: auto;
        border: 1px solid var(--ss-border);
        background: var(--ss-white);
        box-shadow: var(--ss-shadow-sm);
    }
}


/* ------------------------------------------------------------------------
   09. Hauptnavigation und Mega-Menü
   Große, ruhige Desktop-Navigation ohne Dropdown-Pfeile
   ------------------------------------------------------------------------ */

#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
#mainNavigation,
#mainNavigation .dropdown-menu,
#mainNavigation .dropdown-menu a,
#mainNavigation .submenu-headline,
#mainNavigation .nav-mobile-heading {
    font-family: var(--ss-font-display);
}

#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
    color: var(--ss-heading) !important;
    font-weight: 400;
    letter-spacing: 0;
}

#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus,
#jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link {
    color: var(--ss-accent) !important;
}

/* Mega-Menü bleibt weiß und übersichtlich */
#mainNavigation .dropdown-menu,
#mainNavigation .dropdown-body,
#mainNavigation .subcategory-wrapper,
#mainNavigation .categories-recursive-dropdown,
#mainNavigation .categories-recursive-dropdown > ul {
    background-color: var(--ss-white) !important;
}

#mainNavigation .dropdown-full > .dropdown-menu {
    border-top: 1px solid var(--ss-border);
    box-shadow: var(--ss-shadow-sm);
}

#mainNavigation .dropdown-menu a,
#mainNavigation .dropdown-menu .nav-link,
#mainNavigation .categories-recursive-link {
    color: var(--ss-text) !important;
    background-color: transparent !important;
}

#mainNavigation .dropdown-menu a:hover,
#mainNavigation .dropdown-menu a:focus,
#mainNavigation .dropdown-menu .nav-link:hover,
#mainNavigation .dropdown-menu .nav-link:focus {
    color: var(--ss-accent) !important;
    background-color: var(--ss-surface-soft) !important;
}

#mainNavigation .submenu-headline {
    color: var(--ss-heading) !important;
    font-weight: 500;
    border-bottom-color: var(--ss-border) !important;
}

@media (min-width: 992px) {
    /* Komfortable Höhe der gesamten Kategorienleiste */
    #jtl-nav-wrapper > .menu-center-center > .navbar,
    #jtl-nav-wrapper > .menu-multiple-rows-multiple > .navbar,
    #mainNavigation {
        min-height: var(--ss-nav-height);
    }

    #jtl-nav-wrapper > .menu-center-center > .navbar,
    #jtl-nav-wrapper > .menu-multiple-rows-multiple > .navbar {
        padding-top: 0;
        padding-bottom: 0;
    }

    #mainNavigation .nav-mobile-body {
        width: 100%;
    }

    /* Gleichmäßiger Abstand wie im Referenzshop, ohne die Links aufzublähen */
    #mainNavigation .nav-scrollbar-inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: clamp(18px, 2vw, 42px);
        padding-left: clamp(18px, 2vw, 42px);
        column-gap: var(--ss-nav-gap);
    }

    #mainNavigation .nav-scrollbar-inner > .nav-item {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        min-height: var(--ss-nav-height);
        padding: 0 2px !important;
        border-bottom: var(--ss-nav-underline) solid transparent !important;
        color: var(--ss-heading) !important;
        font-size: var(--ss-nav-font-size);
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0;
        white-space: nowrap;
        box-sizing: border-box;
        transition:
            color 0.18s ease,
            border-color 0.18s ease;
    }

    /* Nur die Pfeile der obersten Desktop-Kategorien entfernen.
       Untermenü- und Mobilnavigation bleiben unverändert. */
    #mainNavigation .nav-scrollbar-inner > .nav-item > .dropdown-toggle::after {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        content: none !important;
        border: 0 !important;
    }

    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link > .fa-chevron-down,
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link > .fa-angle-down,
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link > .fa-caret-down {
        display: none !important;
    }

    /* Aktiver, geöffneter und überfahrener Menüpunkt */
    #mainNavigation .nav-scrollbar-inner > .nav-item.active > .nav-link,
    #mainNavigation .nav-scrollbar-inner > .nav-item:hover > .nav-link,
    #mainNavigation .nav-scrollbar-inner > .nav-item:focus-within > .nav-link,
    #mainNavigation .nav-scrollbar-inner > .nav-item.show > .nav-link {
        color: var(--ss-accent) !important;
        border-bottom-color: var(--ss-accent) !important;
    }
}


/* ------------------------------------------------------------------------
   10. Breadcrumb – Century Gothic und neutrales Grau
   ------------------------------------------------------------------------ */

.breadcrumb,
.breadcrumb-wrapper,
.breadcrumb-container {
    font-family: var(--ss-font-body);
    color: var(--ss-text-muted);
    background: transparent !important;
}

.breadcrumb a,
.breadcrumb .breadcrumb-item,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ss-text-muted) !important;
    font-weight: 400;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--ss-heading) !important;
}

.breadcrumb .breadcrumb-item.active,
.breadcrumb .active,
.breadcrumb strong {
    color: var(--ss-heading) !important;
    font-weight: 700;
}


/* ------------------------------------------------------------------------
   11. Buttons
   ------------------------------------------------------------------------ */

.btn {
    font-family: var(--ss-font-body);
    font-weight: 700;
    border-radius: var(--ss-radius-sm);
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.btn-primary,
.btn-info {
    color: var(--ss-white);
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
    color: var(--ss-white);
    background-color: var(--ss-accent-hover-solid);
    border-color: var(--ss-accent-hover-solid);
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--ss-accent);
    background-color: transparent;
    border-color: var(--ss-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-info:hover,
.btn-outline-info:focus {
    color: var(--ss-white);
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}

.btn-secondary,
.btn-outline-secondary {
    color: var(--ss-heading);
    background-color: var(--ss-white);
    border-color: var(--ss-border-dark);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: #2f2f2f;
    background-color: var(--ss-surface-soft);
    border-color: #b8b8b8;
}


/* ------------------------------------------------------------------------
   12. Formulare
   ------------------------------------------------------------------------ */

.form-control,
.custom-select {
    color: var(--ss-text);
    background-color: var(--ss-white);
    border-color: var(--ss-border-dark);
    border-radius: var(--ss-radius-sm);
}

.form-control::placeholder {
    color: var(--ss-text-light);
    opacity: 1;
}

.form-control:focus,
.custom-select:focus {
    color: var(--ss-text);
    background-color: var(--ss-white);
    border-color: var(--ss-accent);
    box-shadow: 0 0 0 0.2rem var(--ss-accent-soft);
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--ss-accent-soft);
}


/* ------------------------------------------------------------------------
   13. Übrige Primär-/Blautöne auf Koralle umstellen
   ------------------------------------------------------------------------ */

.text-primary,
.text-info {
    color: var(--ss-accent) !important;
}

.bg-primary,
.bg-info {
    background-color: var(--ss-accent) !important;
}

.border-primary,
.border-info {
    border-color: var(--ss-accent) !important;
}

.badge-primary,
.badge-info {
    color: var(--ss-white);
    background-color: var(--ss-accent);
}

.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.progress-bar {
    color: var(--ss-white);
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active {
    color: var(--ss-accent);
    border-bottom-color: var(--ss-accent);
}

.page-link {
    color: var(--ss-accent);
}

.page-link:hover,
.page-link:focus {
    color: var(--ss-accent-hover-solid);
    background-color: var(--ss-surface-soft);
    border-color: var(--ss-border);
}

.page-item.active .page-link {
    color: var(--ss-white);
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}

.alert-info {
    color: var(--ss-heading);
    background-color: var(--ss-accent-soft);
    border-color: rgba(var(--ss-accent-rgb), 0.28);
}


/* ------------------------------------------------------------------------
   14. Bunter Footer-Hintergrund
   Datei:
   /templates/NOVAChild/themes/my-nova/images/scheune-footer.png
   ------------------------------------------------------------------------ */

#footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;

    /* Obere Grafik sichtbar machen */
    padding-top: var(--ss-footer-top-art-height) !important;

    /* Keine künstliche Fläche mehr nach dem Copyright:
       Die Unterkante des Footer-PNG liegt dadurch exakt an der
       Unterkante des Copyright-Bereichs. */
    padding-bottom: 0 !important;
    background-color: var(--ss-white) !important;
}

/* Die Grafik erhält einen eigenen dekorativen Layer.
   Dadurch bleibt der komplette Footer-Inhalt lesbar und anklickbar. */
#footer::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: var(--ss-footer-art-height);
    pointer-events: none;
    background-image: url("/templates/NOVAChild/themes/my-nova/images/scheune-footer.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}


/* Oberes Deko-PNG am oberen Rand des Footers */
#footer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: var(--ss-footer-top-art-height);
    pointer-events: none;
    background-image: url("/templates/NOVAChild/themes/my-nova/images/scheune-footer-oben.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

/* Footer-Inhalt und Copyright bleiben über der Grafik. */
#footer > .container,
#footer > #copyright {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
}

/* Das Copyright ist das letzte Element im normalen Footer-Fluss.
   Seine Unterkante ist damit zugleich die Unterkante der Grafik. */
#footer > #copyright {
    min-height: 56px;
    margin: 0 !important;
    overflow: visible;
}

/* Eventuelle Theme-Hintergründe innerhalb des Footers neutralisieren. */
#footer .newsletter-footer,
#footer #footer-boxes,
#footer .withdrawal-link-wrapper,
#footer .footer-social-media,
#footer .footnote-vat {
    background-color: transparent !important;
}

@media print {
    #footer {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #footer::before,
    #footer::after {
        display: none !important;
    }
}


/* ------------------------------------------------------------------------
   15. Bewegungsreduktion
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ========================================================================
   16. OBERER FOOTER-VIERERBLOCK – LOGO / SCHRIFTZUG / SOCIAL / NEWSLETTER

   Desktop:
   Logo links / animierter Schriftzug / Social Icons / Newsletter rechts

   Tablet:
   ruhiges 2 × 2 Raster

   Mobil:
   Logo -> Schriftzug -> Social Icons -> Newsletter
   ======================================================================== */


/* ------------------------------------------------------------------------
   16.1 Vierersystem und gemeinsame Geometrie
   ------------------------------------------------------------------------ */

#footer .footer-top-grid {
    --ss-footer-top-main-row: clamp(96px, 7.4vw, 118px);

    display: grid !important;
    grid-template-columns:
        minmax(120px, 0.75fr)
        minmax(260px, 1.3fr)
        minmax(190px, 0.95fr)
        minmax(380px, 1.85fr);
    align-items: center !important;
    column-gap: clamp(14px, 1.5vw, 28px);
    row-gap: 22px;

    min-height: 190px;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding:
        clamp(18px, 2vw, 32px)
        0
        clamp(18px, 2vw, 32px);
}

#footer .footer-top-grid > [class*="col-"] {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}

#footer .footer-top-grid-column {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    min-width: 0;
    min-height: 154px;

    margin: 0 !important;
    padding:
        10px
        clamp(8px, 0.9vw, 16px)
        !important;

    text-align: center;
}

#footer .footer-top-grid-logo,
#footer .footer-top-grid-brand,
#footer .footer-top-grid-social,
#footer .footer-top-grid-newsletter {
    align-self: stretch;
}


/* ------------------------------------------------------------------------
   16.2 Logo links
   ------------------------------------------------------------------------ */

#footer .footer-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: var(--ss-footer-top-main-row);
    max-width: 100%;

    text-decoration: none;
}

#footer .footer-logo-image {
    display: block;

    width: clamp(98px, 8.2vw, 145px);
    max-width: 100%;
    height: auto;

    margin: 0 auto;
}


/* ------------------------------------------------------------------------
   16.3 Eigene Spalte für den animierten Spielescheune-Schriftzug
   ------------------------------------------------------------------------ */

#footer .footer-top-grid-brand {
    align-items: flex-start !important;
    overflow: visible;
}

#footer .footer-top-grid-brand .footer-brand-heading {
    min-height: var(--ss-footer-top-main-row);
    align-items: center;
}

#footer .newsletter-footer-heading.footer-brand-heading {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;

    column-gap: 0.012em;

    width: 100%;
    max-width: 100%;

    margin: 0 !important;
    padding: 0;

    overflow: visible;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(2.35rem, 3vw, 4.15rem);
    font-style: normal;
    font-weight: 400 !important;
    line-height: 0.95;
    letter-spacing: 0;
    text-align: center;
    text-transform: none !important;
    white-space: nowrap;
}

#footer .footer-brand-letter {
    display: inline-block;
    flex: 0 0 auto;

    min-width: 0;
    margin: 0;
    padding: 0;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 0.95;
    text-transform: lowercase;

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
}

#footer .footer-brand-letter:first-child {
    text-transform: uppercase;
}

/* Farben des Ladenschilds: Rot -> Orange -> Gelb -> Grün -> Blau */
#footer .footer-brand-letter-1  { color: #c8473a; }
#footer .footer-brand-letter-2  { color: #cc4338; }
#footer .footer-brand-letter-3  { color: #d65a34; }
#footer .footer-brand-letter-4  { color: #e07a32; }
#footer .footer-brand-letter-5  { color: #d6b434; }
#footer .footer-brand-letter-6  { color: #d4c76a; }
#footer .footer-brand-letter-7  { color: #a5c34e; }
#footer .footer-brand-letter-8  { color: #78b15c; }
#footer .footer-brand-letter-9  { color: #5f7f7a; }
#footer .footer-brand-letter-10 { color: #62a7c8; }
#footer .footer-brand-letter-11 { color: #4e90c2; }
#footer .footer-brand-letter-12 { color: #3f76ad; }
#footer .footer-brand-letter-13 { color: #355d97; }


/* ------------------------------------------------------------------------
   16.4 Social Icons als eigenständige dritte Spalte
   ------------------------------------------------------------------------ */

#footer .footer-social-media-top,
#footer .footer-social-list {
    width: 100%;
}

#footer .footer-social-list {
    min-width: max-content;
}

#footer .footer-social-media-top {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: var(--ss-footer-top-main-row);
    margin: 0;
}

#footer .footer-social-list {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;

    gap: clamp(12px, 1.1vw, 20px);

    margin: 0;
    padding: 0;
}

#footer .footer-social-list > li {
    flex: 0 0 auto;

    margin: 0 !important;
    padding: 0;
}

#footer .footer-social-list .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;
    padding: 0;

    color: var(--ss-heading) !important;
    background: var(--ss-white);
    border: 1px solid var(--ss-border-dark);
    border-radius: 9px;

    font-size: 22px;
    line-height: 1;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

#footer .footer-social-list .btn:hover,
#footer .footer-social-list .btn:focus {
    color: var(--ss-accent) !important;
    border-color: var(--ss-accent);
    transform: translateY(-2px);
}


/* ------------------------------------------------------------------------
   16.5 Kompakte Newsletter-Anmeldung rechts
   ------------------------------------------------------------------------ */

#footer .footer-newsletter-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    gap: 6px !important;

    width: 100%;
    max-width: 540px;

    margin-right: auto;
    margin-left: auto;

    /*
     * Das Formular wird innerhalb der gemeinsamen Hauptzeile zentriert.
     * Der Infotext folgt unmittelbar darunter, statt erst nach einer
     * vollständigen, leeren Rasterzeile zu beginnen.
     */
    padding-top:
        max(
            0px,
            calc(
                (
                    var(--ss-footer-top-main-row) -
                    46px
                ) / 2
            )
        );

    text-align: left;
}

#footer .footer-newsletter-inner > form {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 46px;

    margin: 0 !important;
    padding: 0;
}

#footer .footer-newsletter-inner .newsletter-email-wrapper,
#footer .footer-newsletter-inner .form-group,
#footer .footer-newsletter-inner .input-group {
    width: 100%;

    margin: 0 !important;
    padding: 0;
}

#footer .footer-newsletter-inner .input-group {
    flex-wrap: nowrap;
}

#footer .footer-newsletter-inner .form-control {
    min-width: 0;
    min-height: 46px;
}

#footer .footer-newsletter-inner button[type="submit"],
#footer .footer-newsletter-inner .input-group-append .btn,
#footer .footer-newsletter-inner .input-group-addon .btn {
    min-width: 118px;
    min-height: 46px;

    color: var(--ss-white) !important;
    background-color: var(--ss-accent) !important;
    border-color: var(--ss-accent) !important;
}

#footer .footer-newsletter-inner button[type="submit"]:hover,
#footer .footer-newsletter-inner button[type="submit"]:focus,
#footer .footer-newsletter-inner .input-group-append .btn:hover,
#footer .footer-newsletter-inner .input-group-append .btn:focus,
#footer .footer-newsletter-inner .input-group-addon .btn:hover,
#footer .footer-newsletter-inner .input-group-addon .btn:focus {
    color: var(--ss-white) !important;
    background-color: var(--ss-accent-hover-solid) !important;
    border-color: var(--ss-accent-hover-solid) !important;
}

#footer .footer-newsletter-inner .newsletter-footer-info {
    max-width: 520px;

    margin: 0 !important;
    padding: 0;

    color: var(--ss-text-muted);
    font-size: clamp(0.76rem, 0.7vw, 0.84rem);
    line-height: 1.42;

    text-align: justify !important;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}


/* ------------------------------------------------------------------------
   16.6 Tablet: zwei Spalten
   ------------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1299.98px) {
    #footer .footer-top-grid {
        --ss-footer-top-main-row: 104px;

        grid-template-columns:
            minmax(150px, 0.8fr)
            minmax(300px, 1.6fr);

        min-height: 0;
        padding-top: 26px;
        padding-bottom: 26px;
    }

    #footer .footer-top-grid-column {
        min-height: 130px;
    }

    #footer .footer-logo-image {
        width: clamp(110px, 14vw, 150px);
    }

    #footer .newsletter-footer-heading.footer-brand-heading {
        font-size: clamp(2.6rem, 5.6vw, 4rem);
    }

    #footer .footer-newsletter-inner {
        max-width: 560px;
    }
}


/* ------------------------------------------------------------------------
   16.7 Mobil: saubere Reihenfolge untereinander
   ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    #footer .footer-top-grid {
        --ss-footer-top-main-row: auto;

        grid-template-columns: 1fr;

        min-height: 0;
        padding-top: 24px;
        padding-bottom: 24px;

        row-gap: 12px;
    }

    #footer .footer-top-grid-column {
        min-height: 0;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    #footer .footer-top-grid-logo {
        order: 1;
    }

    #footer .footer-top-grid-brand {
        order: 2;
    }

    #footer .footer-top-grid-social {
        order: 3;
    }

    #footer .footer-top-grid-newsletter {
        order: 4;
    }

    #footer .footer-logo-image {
        width: clamp(105px, 34vw, 150px);
    }

    #footer .newsletter-footer-heading.footer-brand-heading {
        column-gap: 0.01em;
        font-size: clamp(2.15rem, 10vw, 3.15rem);
        line-height: 0.98;
    }

    #footer .footer-social-list {
        gap: 18px;
    }

    #footer .footer-newsletter-inner {
        display: flex;
        flex-direction: column;
        max-width: 560px;
        padding-top: 0;
    }

    #footer .footer-newsletter-inner > form,
    #footer .footer-logo-link,
    #footer .footer-top-grid-brand .footer-brand-heading,
    #footer .footer-social-media-top {
        min-height: 0;
    }
}

@media (max-width: 420px) {
    #footer .footer-newsletter-inner .input-group {
        flex-wrap: wrap;
    }

    #footer .footer-newsletter-inner .form-control {
        flex: 1 1 100%;
        width: 100%;
        border-radius: var(--ss-radius-sm) !important;
    }

    #footer .footer-newsletter-inner .input-group-append {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
    }

    #footer .footer-newsletter-inner .input-group-append .btn {
        width: 100%;
        border-radius: var(--ss-radius-sm) !important;
    }
}


/* ========================================================================
   17. FOOTER-LINKBOXEN, WIDERRUF UND COPYRIGHT-DREIERGRID
   ======================================================================== */


/* ------------------------------------------------------------------------
   17.1 Widerrufsbutton direkt unter der ersten Footer-Linkbox
   ------------------------------------------------------------------------ */

#footer .footer-withdrawal-inline {
    margin-top: 14px;
}

#footer .footer-withdrawal-inline .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 18px !important;
    color: var(--ss-heading) !important;
    background-color: var(--ss-white) !important;
    border: 1px solid var(--ss-border-dark) !important;
    border-radius: var(--ss-radius-sm) !important;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
}

#footer .footer-withdrawal-inline .btn:hover,
#footer .footer-withdrawal-inline .btn:focus {
    color: var(--ss-accent) !important;
    background-color: var(--ss-surface-soft) !important;
    border-color: var(--ss-accent) !important;
}

/* Rückfallregel, falls der alte separate Block noch gerendert wird */
#footer > .container > .withdrawal-link-wrapper {
    display: none !important;
}


/* ------------------------------------------------------------------------
   17.2 Copyright: links Hinweis / Mitte kurzeWege / rechts JTL-Shop
   ------------------------------------------------------------------------ */

#footer #copyright {
    min-height: 68px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ss-white);
    background: transparent !important;
}

#footer #copyright > .container-fluid {
    padding-right: clamp(20px, 3vw, 60px);
    padding-left: clamp(20px, 3vw, 60px);
}

#footer .footer-copyright-grid {
    min-height: 68px;
    margin-right: 0;
    margin-left: 0;
}

#footer .footer-copyright-cell {
    display: flex;
    align-items: center;
    min-height: 68px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--ss-white);
    font-size: 14px;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}

#footer .footer-copyright-left {
    justify-content: flex-start;
    text-align: left;
}

#footer .footer-copyright-center {
    justify-content: center;
    text-align: center;
}

#footer .footer-copyright-right {
    justify-content: flex-end;
    text-align: right;
}

#footer .footer-copyright-notices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

#footer #copyright .footnote-vat {
    margin: 0 !important;
    padding: 0;
    color: inherit;
    background: transparent !important;
}

#footer #copyright a {
    color: var(--ss-white) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#footer #copyright a:hover,
#footer #copyright a:focus {
    color: var(--ss-white) !important;
    opacity: 0.82;
}

#footer .footer-created-by a {
    margin-left: 4px;
    font-weight: 700;
}


/* ------------------------------------------------------------------------
   17.3 Copyright mobil
   ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    #footer .footer-copyright-grid {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #footer .footer-copyright-cell {
        justify-content: center;
        min-height: auto;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
    }

    #footer .footer-copyright-notices {
        align-items: center;
    }

    #footer .footer-withdrawal-inline {
        margin-top: 12px;
    }
}


/* ------------------------------------------------------------------------
   17.4 Druckansicht des Copyrightbereichs
   ------------------------------------------------------------------------ */

@media print {
    #footer #copyright,
    #footer .footer-copyright-cell,
    #footer #copyright a {
        color: #000000 !important;
        text-shadow: none !important;
    }
}
/* ========================================================================
   SPIELESCHEUNE – Footer-Inhalt höher positionieren
   Polygonbilder und Copyright bleiben unverändert
   ======================================================================== */

/* Desktop:
   Dreierblock, Trennlinie und Viererblock gemeinsam nach oben bewegen.
   transform verändert nicht die Position des Copyrightbereichs. */
@media (min-width: 992px) {
    #footer > .container.d-print-none {
        transform: translateY(-58px);
    }
}

/* Tablet nur etwas nach oben verschieben */
@media (min-width: 576px) and (max-width: 991.98px) {
    #footer > .container.d-print-none {
        transform: translateY(-28px);
    }
}

/* Mobil keine Verschiebung, damit die gestapelten Blöcke genug Platz haben */
@media (max-width: 575.98px) {
    #footer > .container.d-print-none {
        transform: none;
    }
}


/* ------------------------------------------------------------------------
   Scroll-to-top-Button über den Copyrightbereich anheben
   ------------------------------------------------------------------------ */

#footer > .smoothscroll-top,
#footer .smoothscroll-top {
    bottom: 82px !important;
}


/* Druckansicht neutral halten */
@media print {
    #footer > .container.d-print-none {
        transform: none !important;
    }
}
/* ========================================================================
   SPIELESCHEUNE – farbige Trennlinie zwischen 3er- und 4er-Block

   Start: am bisherigen linken Rand des <hr>
   Ende:  am rechten Bildschirmrand
   Bild:  1937 × 19 px
   ======================================================================== */

#footer .footer-top-grid + hr {
    display: block;
    width: calc(100% - clamp(32px, 4vw, 72px));
    max-width: none;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    margin: 7px auto !important;
    padding: 0;
    border: 0 !important;
    opacity: 1;
    background-image:
        url("/templates/NOVAChild/themes/my-nova/images/scheune-line.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 8px !important;
}
/* ========================================================================
   SPIELESCHEUNE – Copyright-Inhalte unten im Container ausrichten
   ======================================================================== */

@media (min-width: 768px) {

    #footer .footer-copyright-grid {
        align-items: flex-end !important;
    }

    #footer .footer-copyright-cell {
        align-items: flex-end !important;
        min-height: 68px;
        padding-top: 0 !important;
        padding-bottom: 7px !important;
    }

    #footer .footer-copyright-left {
        justify-content: flex-start;
    }

    #footer .footer-copyright-center {
        justify-content: center;
    }

    #footer .footer-copyright-right {
        justify-content: flex-end;
    }
}

/* ========================================================================
   SPIELESCHEUNE – SYSTEM- UND OPC-TRENNLINIEN v12.1

   Erfasst:
   1. OPC:  .opc-Divider.hr-sect.colored-divider
   2. News: section.index-news-wrapper .blog-header .hr-sect

   Die News-Überschrift bleibt verlinkt; nur der Linkinhalt wird von
   custom.js in farbige Einzelbuchstaben zerlegt.
   ======================================================================== */

/* Gemeinsame Geometrie */
body .opc-Divider.hr-sect.colored-divider,
body section.index-news-wrapper .blog-header .hr-sect {
    --ss-divider-gap: clamp(16px, 1.8vw, 30px);
    --ss-divider-height: 3px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--ss-divider-gap) !important;

    width: 100% !important;
    max-width: none !important;
    margin: clamp(24px, 2.6vw, 44px) 0 !important;
    padding: 0 !important;

    color: var(--ss-heading) !important;
    background: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    font-family: var(--ss-font-display, "Poppins", Arial, sans-serif) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    -webkit-text-fill-color: initial !important;
}

/* OPC-Text bleibt wie gewünscht etwa doppelt so groß */
body .opc-Divider.hr-sect.colored-divider {
    font-size: 2em !important;
}

/* Systemseitige News-Überschrift: gleiche Wirkung, ohne 2em auf .h2 zu stapeln */
body section.index-news-wrapper .blog-header .hr-sect {
    font-size: clamp(1.9rem, 2.2vw, 2.5rem) !important;
}

/* Verlinkte News-Überschrift vollständig erhalten */
body section.index-news-wrapper .blog-header .hr-sect > a {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    background: transparent !important;
    border: 0 !important;

    font: inherit !important;
    letter-spacing: inherit !important;
    text-decoration: none !important;
    white-space: inherit !important;
    box-shadow: none !important;
}

body section.index-news-wrapper .blog-header .hr-sect > a:hover,
body section.index-news-wrapper .blog-header .hr-sect > a:focus {
    color: inherit !important;
    text-decoration: none !important;
}

/* Von custom.js erzeugter Text */
body .opc-Divider.hr-sect.colored-divider .ss-divider-text,
body section.index-news-wrapper .blog-header .hr-sect .ss-divider-text {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
}

body .opc-Divider.hr-sect.colored-divider .ss-divider-letter,
body section.index-news-wrapper .blog-header .hr-sect .ss-divider-letter {
    display: inline-block;
    color: var(--ss-divider-letter-color, var(--ss-heading)) !important;
    line-height: 1;
    -webkit-text-fill-color: currentColor !important;
}

body .opc-Divider.hr-sect.colored-divider .ss-divider-space,
body section.index-news-wrapper .blog-header .hr-sect .ss-divider-space {
    display: inline-block;
    width: 0.35em;
    line-height: 1;
}

/* Mehrfarbige Linien links und rechts */
body .opc-Divider.hr-sect.colored-divider::before,
body .opc-Divider.hr-sect.colored-divider::after,
body section.index-news-wrapper .blog-header .hr-sect::before,
body section.index-news-wrapper .blog-header .hr-sect::after {
    content: "" !important;

    display: block !important;
    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 30px !important;
    height: var(--ss-divider-height) !important;
    min-height: var(--ss-divider-height) !important;
    max-height: var(--ss-divider-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    background:
        linear-gradient(
            90deg,
            #d94d43 0%,
            #ef7d32 18%,
            #e7ae19 36%,
            #a5c34e 53%,
            #258fa3 71%,
            #31547f 86%,
            #8b68a6 100%
        ) !important;

    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 3px rgba(38, 57, 77, 0.08) !important;
    transform: none !important;
}

/* Beide Verläufe laufen optisch zur Mitte */
body .opc-Divider.hr-sect.colored-divider::after,
body section.index-news-wrapper .blog-header .hr-sect::after {
    transform: scaleX(-1) !important;
}

/* Blog-Abstand zum Slider beibehalten, aber nicht doppelt aufblasen */
body section.index-news-wrapper .blog-header {
    margin-bottom: clamp(22px, 2vw, 34px) !important;
}

/* Mögliche Standard-Unterelemente entfernen */
body .opc-Divider.hr-sect.colored-divider > hr,
body .opc-Divider.hr-sect.colored-divider .hr-sect__line,
body section.index-news-wrapper .blog-header .hr-sect > hr,
body section.index-news-wrapper .blog-header .hr-sect .hr-sect__line {
    display: none !important;
}

@media (max-width: 575.98px) {
    body .opc-Divider.hr-sect.colored-divider,
    body section.index-news-wrapper .blog-header .hr-sect {
        --ss-divider-gap: 10px;
        --ss-divider-height: 2px;

        font-size: 1.5em !important;
        white-space: normal !important;
    }

    body .opc-Divider.hr-sect.colored-divider .ss-divider-text,
    body section.index-news-wrapper .blog-header .hr-sect .ss-divider-text {
        flex-wrap: wrap;
        white-space: normal;
    }

    body .opc-Divider.hr-sect.colored-divider::before,
    body .opc-Divider.hr-sect.colored-divider::after,
    body section.index-news-wrapper .blog-header .hr-sect::before,
    body section.index-news-wrapper .blog-header .hr-sect::after {
        min-width: 18px !important;
    }
}

@media print {
    body .opc-Divider.hr-sect.colored-divider,
    body .opc-Divider.hr-sect.colored-divider .ss-divider-letter,
    body section.index-news-wrapper .blog-header .hr-sect,
    body section.index-news-wrapper .blog-header .hr-sect .ss-divider-letter {
        color: #525252 !important;
        -webkit-text-fill-color: #525252 !important;
    }

    body .opc-Divider.hr-sect.colored-divider::before,
    body .opc-Divider.hr-sect.colored-divider::after,
    body section.index-news-wrapper .blog-header .hr-sect::before,
    body section.index-news-wrapper .blog-header .hr-sect::after {
        background: #9b9b9b !important;
        box-shadow: none !important;
    }
}