/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Breakpoint-Übersicht:
   0–478   xs
   479–767 sm
   768–991 md
   992–1199 lg
   ≥1200   xl (≥1500, ≥1600 Extra-Stufen)
*/

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    hyphens: auto;
}

body {
    min-height: 100vh;
}
a:hover {
    text-decoration: underline;
}
a.bricks-button:hover {
    text-decoration: none;
}

#menu-hauptmenue, .gb-navigationsbuttons__button
{
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    word-break: normal;    /* Standardverhalten, bricht nicht mitten im Wort */
    overflow-wrap: break-word; /* Nur bei Bedarf, bricht bei Leerzeichen */
    hyphens: manual;       /* Keine automatische Silbentrennung */
}

h1.Wahr,
h2.gb-zwischenueberschrift-h2-block__headline.Wahr {
    text-align: center;
    font-weight: 400;
    font-style: normal;
    font-family: "Pacifico";
    font-size: 44px;
    line-height: 60px;
}
h1.Falsch,
h2.gb-zwischenueberschrift-h2-block__headline.Falsch{
    text-align: center;
    font-size: 44px;
    font-family: "Noto Sans";
    font-weight: 600;
    line-height: 60px;
    z-index: 0;
}

h1.Falsch span,
h2.gb-zwischenueberschrift-h2-block__headline.Falsch span{
    padding: initial;
    margin: initial;
}

h1.Wahr,
h2.gb-zwischenueberschrift-h2-block__headline.Wahr {
    position: relative;
    z-index: 0;
    display: inline-block; /* damit das ::after genau unter dem Text sitzt */
}

h1.Wahr span,
h2.gb-zwischenueberschrift-h2-block__headline.Wahr span {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 0 18px 0 18px;
    margin: 0 -17px 0 -18px;
}

h1.Wahr span::after,
h2.gb-zwischenueberschrift-h2-block__headline.Wahr span::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 0.45em;
    background: #FFD700;
    z-index: -1;
    border-radius: 0.33em;
    pointer-events: none;
}

h1.Wahr span.first::after,
h2.gb-zwischenueberschrift-h2-block__headline.Wahr span.first::after{
    left: 0;
}
h1.Wahr span.last::after,
h2.gb-zwischenueberschrift-h2-block__headline.Wahr span.last::after{
    right: 0;
}

.nowrap {
    white-space: nowrap;
}

.gb-hauptueberschrift__section.Wahr{
    margin-top: -40px;
}
.gb-hauptueberschrift__section.Falsch{
    margin-top: 200px;
}
.gb-hauptueberschrift__container{
    margin-top: 0;
}

.gb-headerimageslider__container {
    margin-bottom: -66px;
}
.gb-hauptueberschrift__bow {
    border-top-left-radius: 150px;
    height: 150px;
}
.gb-footer__content {
    border-top-left-radius: 150px;
    padding-top: 140px;
}
/*-----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------ ANFANG Allgemeiner CSS-Teil --------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------*/
.gb-headerimageslider__slider-nested .splide__pagination {
    z-index: 0 !important;
}

/*-------------------------------------- ANFANG  Reihenfolge im Block "Bild-Text" ändern ------------------------------------*/
.image-text .gb-bild-text-border__texte,      /* ACHTUNG KLASSENNAME!!!!!!!!*/
.image-text .gb-bild-text__texte,
.image-text .gb-bild-text-blue__texte
{
    order: 1; /* dreht die Reihenfolge um, da Standard-Order 0 ist*/
}
/*--------------------------------------- ENDE  Reihenfolge im Block "Bild-Text" ändern --------------------------------------*/

/*-------------------------------------- ANFANG  2 Text-Boxen ------------------------------------*/
.blue-bg-color .gb-text-boxen__textbox, .blue-bg-color .gb-text-boxen__textbox h2  {
    box-shadow: initial;
    background-color: #4d86a0;
    color: #ffffff;
}

.gb-galerie__grid > .gb-galerie__block:nth-child(1) { height: 130px;}
/*--------------------------------------- ENDE  2 Text-Boxen --------------------------------------*/
nav > .bricks-mobile-menu {
    margin-left: 0;
    margin-right: 0;
}

nav > .bricks-mobile-menu > li{
    margin-bottom: 37px;
}
nav > .bricks-mobile-menu > li > div > a{
    padding: 0;
}

.searchform label{
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    font-family: "Noto Sans";
    color: #000000;
    margin-bottom: 20px;
}

.searchform .go-search__form-code input#s{
    border-width: 1px;
    border-color: var(--bricks-color-csbavj);
    border-radius: 10px;
    font-size: 17px;
    font-family: "Nata Sans";
    font-weight: 500;
    font-style: normal;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.searchform .go-search__form-code input#searchsubmit{
    background-color: #000000;
    color: #ffffff;
    border-width: 0;
    font-size: 17px;
    font-family: "Noto Sans";
    letter-spacing: .5px;
    padding: .5em 1em;
    font-weight: 500;
    border-radius: 20px;
}

.gb-layer__section {
    margin-top: 33px !important;
}

.gb-headerimageslider__slider-nested .splide__pagination {bottom: 38%;}

/*----------------------------------------- ANFANG  Standardabstände für alle Blöcke -----------------------------------------*/
/* 0–478 px: Abstände + bow 110px */
@media screen and (max-width: 478px) {

    .gb-footer__right-col-nav{
        width:100%;
    }
    .gb-footer__right-col-nav ul li{
        margin-right: auto ! important;
        margin-left: auto ! important;
    }
    .gb-footer__right-col-nav ul li:first-child{
        margin-left: 20px ! important;
        margin-right: auto ! important;
    }
    .gb-footer__right-col-nav ul li:last-child{
        margin-right: 20px ! important;
        margin-left: auto ! important;
    }
    .normal-distance {
        margin-bottom: 40px;
    }
    .small-distance {
        margin-bottom: 20px;
    }
    .no-distance {
        margin-bottom: 0;
    }
    .gb-aktuelle-veranstaltungen__veranstaltungsblock{
        align-items: baseline !important;
    }
    .gb-fliesstext {
        width: 100%;
        text-align: left;
    }
    .gb-aktuelle-veranstaltungen__slider .splide__pagination {
        transform: initial !important;
        left: auto;
    }


}

@media screen and (min-width: 479px) {
    .gb-footer__right-col-nav{
        width:370px ! important;
    }
    .gb-footer__right-col-nav ul li{
        margin-right: auto ! important;
        margin-left: auto ! important;
    }
    .gb-footer__right-col-nav ul li:first-child{
        margin-left: 20px ! important;
        margin-right: auto ! important;
    }
    .gb-footer__right-col-nav ul li:last-child{
        margin-right: 20px ! important;
        margin-left: auto ! important;
    }
}



/* 479–767 px: bow 120px */
@media screen and (min-width: 479px) and (max-width: 767px) {
    .normal-distance {
        margin-bottom: 60px;
    }
    .small-distance {
        margin-bottom: 30px;
    }
    .no-distance {
        margin-bottom: 0;
    }

    .gb-headerimageslider__slider-nested .splide__pagination {
        bottom: 32%;
        z-index: 0;
    }
}
@media screen and (min-width: 768px)  {
    .gb-headerimageslider__container {
        margin-bottom: -100px;
    }
    .gb-hauptueberschrift__bow {
        border-top-left-radius: 225px;
        height: 225px;
    }

}

/* 768–991 px: Abstände */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .normal-distance {
        margin-bottom: 80px;
    }
    .small-distance {
        margin-bottom: 40px;
    }
    .no-distance {
        margin-bottom: 0;
    }
    .gb-hauptueberschrift__container{
        margin-top: -10px;
    }
}

/* ≥992 px: Abstände (Desktop-Basis) */
@media screen and (min-width: 992px) {
    .gb-header__container{
        width: 100% !important;
    }
    .normal-distance {
        margin-bottom: 100px;
    }
    .small-distance {
        margin-bottom: 50px;
    }
    .no-distance {
        margin-bottom: 0;
    }
    .gb-aktuellste-news__slider .splide__pagination, .gb-veranstaltungs__slider .splide__pagination {
        display: none;
    }
}
/*------------------------------------------ Ende  Standardabstände für alle Blöcke -----------------------------------------*/

@media (max-width: 767px) {
    /* Standard: alle Pfeile in den Megamenus aus */
    .brx-megamenu .gb-layer__first-link-icon {
        display: none !important;
    }

    /* Pfeil NUR zeigen, wenn es ein echtes Untermenü mit Links gibt */
    .brx-megamenu .gb-layer__navblock:has(> .gb-layer__link-group .gb-layer__link)
    .gb-layer__first-link-icon {
        display: inline-block !important;
    }
}

/*------------------------------------------------ Start  Smartphone-Navigation ---------------------------------------------*/

@media (max-width: 991px) {

    .gb-header__nav-menu .bricks-mobile-menu-toggle {
    margin-top: 10px;
    }

    .gb-header__nav-menu .bricks-mobile-menu-toggle span {
        /*  position: relative !important;
          right: initial !important;
          padding: 1px !important;
          width: 20px !important;*/
        background-color: #000000 !important;
    }
    .gb-layer__first-link-icon{
        color: #000000 !important;
    }

   nav > .bricks-mobile-menu {
        margin-top: 120px; /* Menü nach unten schieben */
        background-color: #4D86A0;
        border-radius: 20px;
    }

    nav > .bricks-mobile-menu a:hover {
        text-decoration: underline;
    }

    .gb-layer__section {
        border-radius: 20px;
        margin-top: 10px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* --- Mobile: Link & Toggle trennen --- */
    .brx-submenu-toggle {
        position: relative;
        display: flex;
        align-items: center;
    }

    /* Link bekommt rechts Platz, damit der Button „frei“ klickbar ist */
    .brx-submenu-toggle > a {
        flex: 1 1 auto;
        padding-right: 56px !important;   /* 48–60px je nach Icon-Größe */
    }

    /* wichtig: SVG soll keine eigenen Pointer-Events haben */
    /* Der Toggle-Button sitzt fix rechts & ist großer Touch-Target */
    .brx-submenu-toggle > button {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        z-index: 3;
    }

    /* --- Icon vor "Home"-Link --- */
    li.menu-item-home > a::before {
        content: '';
        display: inline-block;
        width: 16px; /* Breite des Icons */
        height: 16px; /* Höhe des Icons */
        background-image: url('https://toemy.de/wp-content/uploads/house.svg'); /* Pfad zur SVG-Datei */
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 8px;
        margin-top: -2px;
        vertical-align: middle;
    }

    /* --- Allgemeine Stile für das Menü --- */
    nav.bricks-mobile-menu-wrapper {
        position: relative;
        width: 100%;
        font-family: Arial, sans-serif;
        font-size: 16px;
    }

    /* Hintergrundfarbe der Mobile-Navigation */
    nav.bricks-mobile-menu-wrapper::before {
        background-color: #4D86A0 !important;
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    /* Link-Stile: Allgemein */
    .brxe-nav-menu .bricks-mobile-menu-wrapper li a {
        line-height: 40px !important;
        white-space: normal; /* Zeilenumbrüche erlauben */
        z-index: 0;
    }
    .brxe-nav-menu .bricks-mobile-menu-wrapper li ul li a {
        line-height: 20px !important;
    }

    /* --- Einrücken der Ebenen --- */
    .brxe-nav-menu .bricks-mobile-menu > li > .brx-submenu-toggle > *,
    .brxe-nav-menu .bricks-mobile-menu > li > a {
        color: #000000;
    }

    #menu-hauptmenue-1 > li > div > a {
        padding-left: 25px !important;
        padding-right: 0 !important;
    }
    #menu-hauptmenue-1 > li > div.brx-megamenu section {
        padding-left: 25px !important;
    }

    /* --- Submenüs: Allgemeine Anpassungen --- */
    .ssf-header__nav-menu .sub-menu {
        padding: initial !important;
    }

    /* --- Submenü-Toggle-Stile --- */
    .brx-submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        cursor: pointer;
        position: relative;
    }

    .brx-submenu-toggle a,
    .bricks-mobile-menu a {
        text-decoration: none;
        flex: 1;
    }

    .brx-submenu-toggle.icon-right button {
        margin-left: 0;
    }

    .brx-submenu-toggle button,
    .brx-submenu-toggle svg{
        background: none;
        border: none;
        cursor: pointer;
        right: 0;
        z-index: 1;
        width: 23px;
        height: auto;
    }

    /* Geöffnetes Submenü anzeigen */
    .sub-menu-open > .sub-menu {
        display: block;
    }

    /* --- Stile für die einzelnen Ebenen --- */
    /* 1. Ebene */
    .bricks-mobile-menu > li {
       /* background-color: #f8f9fa;*/
     /*   border-bottom: 1px solid #333; */
    }

    .bricks-mobile-menu > li > a {
        display: block;
        text-decoration: none;
        transition: background-color 0.3s ease;
        line-height: 28px !important;
    }

    /* 2. Ebene */
    .bricks-mobile-menu .sub-menu > li {
     /*   background-color: #e9ecef;*/
    }

    .bricks-mobile-menu .sub-menu > li:last-child {
        border-bottom-width: 0px;
    }

    .bricks-mobile-menu .sub-menu > li > a {
        display: block;
        text-decoration: none;
        color: #000000 !important;
        transition: background-color 0.3s ease;
    }

    /* 3. Ebene */
    .bricks-mobile-menu .sub-menu .sub-menu > li {
       /* background-color: #dee2e6;*/
    }

    .bricks-mobile-menu .sub-menu .sub-menu > li > a {
        padding: 0 30px 0 60px !important;
        display: block;
        text-decoration: none;
        color: #000000 !important;
        font-size: 18px !important;
    }

    /* 4. Ebene */
    .bricks-mobile-menu .sub-menu .sub-menu .sub-menu > li {
    /*    background-color: #ced4da;*/
    }

    .bricks-mobile-menu .sub-menu .sub-menu .sub-menu > li > a {
        padding: 0 30px 0 75px !important;
        display: block;
        text-decoration: none;
        color: #000000 !important;
        font-size: 18px !important;
    }

    /* --- Hover-Farben --- */
 /*   .bricks-mobile-menu a:hover {
        background-color: #5a9ebc !important;
    } */

}


/*------------------------------------------------ ENDE  Smartphone-Navigation ---------------------------------------------*/

/*---------------------------------------- ANFANG  Megamenü ---------------------------------------*/
/* Standardverhalten auf großen Geräten (ab 768px) */
.gb-layer__link-group {
    display: block;  /* Sichtbar */
    max-height: none; /* Keine Begrenzung der Höhe */
    overflow: visible; /* Alle Inhalte sichtbar */
    visibility: visible; /* Sicherstellen, dass es sichtbar bleibt */
    position: relative; /* Normale Positionierung */
}

/* Auf Geräten unter 768px ausgeblendet */
@media (max-width: 767px) {
    .gb-layer__link-group {
        visibility: hidden; /* Unsichtbar, aber Layout wird nicht beeinflusst */
        max-height: 0;
        padding: 0; /* Entfernt unnötige Abstände */
        overflow: hidden;
        position: absolute; /* Nimmt keinen Platz mehr im Layout ein */
        transition: max-height 0.3s ease, visibility 0s ease 0.3s; /* Sanfte Öffnungs-Animation */
    }

    /* Wenn der Block geöffnet wird */
    .gb-layer__link-group.opened {
        visibility: visible; /* Wird wieder sichtbar */
        max-height: 500px; /* Große max-height für sanftes Öffnen */
        position: relative; /* Zurück zur normalen Position */
        padding: 0 20px;
    }

    /* Die Pfeile auf mobilen Geräten */
    .ti-angle-down::before,
    .ti-angle-up::before {
        content: "\e64b"; /* Zeichen für den Pfeil */
        padding: 5px;
        display: inline-block;
        margin: 0;
        vertical-align: middle;
        cursor: pointer; /* Zeigt an, dass der Pfeil klickbar ist */
    }

    /* Wenn der Link geöffnet ist, Pfeil nach oben drehen */
    .gb-layer__link-group.opened .ti-angle-down::before {
        transform: rotate(180deg); /* Pfeil nach oben drehen */
    }
}

/* Auf Geräten unter 768px Icons sichtbar */
.gb-layer__first-link-icon {
    display: inline-block !important;
}

/* Auf größeren Geräten (ab 768px) Icons ausblenden */
@media (min-width: 768px) {
    .gb-layer__first-link-icon {display: none !important; /* Icons unsichtbar auf großen Bildschirmen */}
    .gb-galerie__grid > .gb-galerie__block:nth-child(1) { height: 280px;}
}

@media screen and (min-width: 992px) and (max-width: 1180px) {
    .gb-layer__first-link {font-size: 13px !important;line-height: 35px !important;}
    .gb-layer__link {font-size: 12px !important;line-height: 26px !important;}
}

@media screen and (min-width: 992px) {

    .gb-bild-text__section.text-image .gb-bild-text__padding-box{
        padding-right: 60px;
    }
    .gb-bild-text__section.image-text .gb-bild-text__padding-box{
        padding-left: 60px;
    }
    .gb-headerimageslider__slider-nested .splide__pagination {bottom: 35%;}

    /* ==========================================================
   GELBE UNTERSTREICHUNG FÜR HAUPTMENÜ (Top-Level)
   Variante 1 – mit ::after-Pseudo-Element
   ========================================================== */

    /* Grundstil für alle Top-Level-Menüpunkte */
    .bricks-nav-menu-wrapper .brx-submenu-toggle > a {
        position: relative;
        display: inline-block;
        text-decoration: none;
        color: #000;
        font-weight: 600;
        padding-bottom: 4px; /* Platz für gelbe Linie */
        transition: color 0.3s ease;
    }

    /* Unsichtbare Linie unter jedem Menüpunkt */
    .bricks-nav-menu-wrapper .brx-submenu-toggle > a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 10px;                /* Dicke der Linie */
        border-radius: 5px;         /* Rundungen links/rechts */
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    /* Gelbe Linie bei Hover und bei aktivem Menüpunkt */
    .bricks-nav-menu-wrapper .brx-submenu-toggle:hover > a::after,
    .bricks-nav-menu-wrapper .menu-item.current-menu-item .brx-submenu-toggle > a::after,
    .bricks-nav-menu-wrapper .menu-item.current-menu-ancestor .brx-submenu-toggle > a::after {
        background-color: #FFD700;  /* Bernried-Gelb */
    }

    /* Optional: Textfarbe beim Hover oder aktivem Menüpunkt */
    .bricks-nav-menu-wrapper .brx-submenu-toggle:hover > a,
    .bricks-nav-menu-wrapper .menu-item.current-menu-item .brx-submenu-toggle > a {
        color: #000;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .gb-hauptueberschrift__container{
        margin-top: -25px;
    }
}

@media screen and (min-width: 1200px)  {
    .gb-hauptueberschrift__container{
        margin-top: -45px;
    }
    .gb-galerie__grid > .gb-galerie__block:nth-child(1) { height: 350px;}
    .gb-headerimageslider__slider-nested .splide__pagination {bottom: 34%;}
}
@media screen and (min-width: 1300px)  {
    .gb-footer__content {
        border-top-left-radius: 225px;
    }
}