:root {
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 300;
    --cassiopeia-font-weight-normal: 300;

    --dunkelblau: #121d23;
    --hellblau: #21333d;
    --orange:#F5B578;
    --text-grey: #b3b3b4;
    --bg-grey: #eae9e5;
    --beige: #D9B578;
    --responsive-font-size: clamp(1rem, 2.5vw, 1.2rem);    
  }   
body {
    background-color: var(--bg-grey);
    font-size: 1.25rem !important;
    color: #676464 !important;
    font-weight: 300;
}   
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cassiopeia-font-family-headings);
    font-weight: var(--cassiopeia-font-weight-headings);
    line-height: 1.2;
    text-transform: uppercase;
}
 .bg-dunkelblau{
    background-color: var(--dunkelblau);
  }
 .bg-hellblau{
    background-color: var(--hellblau);
  }

.mybutton {
    border: 1px solid #F5B578;
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-weight: 500;
    background-color: #21333D;
    color: #fff;
    transition: all 0.3s ease;
}

.commercial-image .image-bg {
    background-color: #21333d;
    position: absolute;
    top: 0;
    right: -60px;
    bottom: -60px;
    top: -60px;
    width: 60%;
    z-index: 0;
}


/*Service icons*/
.service-box {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
}

.icon-box {
    width: 70px;
    height: 70px;
    background-color: var(--hellblau);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #F5B578;
    font-size: 38px;
    
}

.service-text h3 {
    color: #F5B578;
    font-size: 1.4rem;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.service-text p {
    color: #d0d7db;
    margin: 0;
    line-height: 1.6;
    max-width: 550px;
}

/*Timeline-Ausstellungen*/
.timeline-item {
    margin-bottom: 32px;
}

.icon-calendar {
    color: var(--beige);
    font-size: 28px;
    margin-right: 12px;
}

.timeline-item h4 {
    display: inline-block;
    color: var(--beige);
    margin: 0;
    padding: 0;
}

.timeline-item p {
    color: #d0d7db;
    margin: 4px 0 0 40px; /* damit der Text unter dem Jahr eingerückt ist */
    line-height: 1.5;
}



.winter {
    display: flex;  /* Setzt die Bilder in eine Zeile */
    flex-wrap: wrap; /* Falls der Platz nicht reicht, umbrechen */
    gap: 10px; /* Abstand zwischen den Bildern */
    justify-content: center; /* Zentriert die Bilder */
    align-items: center;
}

/* Bilder einheitlich anpassen */
.winter-item img {
    width: auto; /* Originalgröße der Bilder beibehalten */
    height: auto;
    max-width: 150px; /* Maximale Bildgröße */
    display: block; /* Verhindert unerwünschte Abstände */
}

/* Responsives Design für kleinere Bildschirme */
@media (max-width: 768px) {
    .winter {
        justify-content: center; /* Sorgt für zentrierten Umbruch */
    }

    .winter-item img {
        max-width: 120px; /* Kleinere Bilder auf mobilen Geräten */
    }
}



/*contrast-button*/
/* 🔹 High-Contrast Modus – Ohne invert */
.high-contrast {
    background-color: #000 !important;
    color: #FFD700 !important; /* Goldgelb für gute Sichtbarkeit */
}

/* 🔹 Links im Kontrastmodus anpassen */
.high-contrast a {
    color: var(--orange) !important; /* Orange für bessere Lesbarkeit */
    text-decoration: none;
}

/* 🔹 Buttons im Kontrastmodus */
.high-contrast button, 
.high-contrast input, 
.high-contrast select {
    background-color: #222 !important;
    color: #FFD700 !important;
    border: 1px solid #FFD700 !important;
}

/* 🔹 Background - Card im Kontrastmodus */
.high-contrast .bg-white,
.high-contrast .card-body,
.high-contrast .blockquote-text
 {
    background-color: #222 !important;
    color: #FFD700 !important;
    border: 1px solid #FFD700 !important;
}

/* 🔹 Menü-Anpassungen im Kontrastmodus */
.high-contrast .navbar, 
.high-contrast .menu {
    background-color: #111 !important;
    color: #FFD700 !important;
}

/* Standardfarbe für das Kontrast-Icon */
.contrast-toggle .fa-solid {
    color: var(--dark) !important; /* Dunkelgrau im normalen Modus */
}

/* Wenn der Kontrastmodus aktiviert ist */
.high-contrast .fa-solid {
    color: #FFffff !important; /* Goldgelb im Kontrastmodus */
}




/*transp. HG für Banner-Text*/
.dark-overlay {
    background: rgb(46 16 0 / 51%);
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
}






.no-events{
  pointer-events:none;
}
/*Winterbutton*/
.winter-button {
    display: inline-block;
    padding: 5px 14px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #a6c8ff, #dfefff); /* Frostige Blau- & Weißtöne */
    border: 2px solid #ffffff;
    
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    
}

/* Schneeeffekt */
.winter-button::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, transparent 80%);
    opacity: 0.6;
    transform: rotate(25deg);
    transition: all 0.6s ease-in-out;
}

/* Hover-Effekt */
.winter-button:hover {
    background: linear-gradient(135deg, #88b3ff, #c9e5ff);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
}

/* Schimmer-Effekt beim Hover */
.winter-button:hover::before {
    top: 0%;
    left: 0%;
    opacity: 1;
}


/*masonry-gallery*/
.masonry {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 15px; /* Abstand zwischen den Spalten */
    -moz-column-gap: 15px;
    column-gap: 15px;
}

.masonry img {
    width: 100%; /* Bilder füllen die Spaltenbreite */
    display: block; /* Verhindert extra Abstand durch Inline-Elemente */
    margin-bottom: 15px; /* Abstand zwischen den Bildern */
    break-inside: avoid; /* Verhindert, dass ein Bild in zwei Spalten aufgeteilt wird */
}







.text-white{
color: #ffffff;
}
/*iframe*/
/* Container für das iframe */

.cal caption {
    color: #ffffff !important;
    padding: 5px 6px 0;
    margin: 0;
}


.link-light {
    color: var(--text-white) !important;}


.container-bottom-c .grid-child {
   flex-direction: column !important;
}

.bottom-n a {
    color: var(--link-color-light);
    text-decoration: none !important;
}
.container-bottom-n .grid-child {
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 2.5rem 0.5em !important;
    gap: 30px !important;
}

.bottom-n h5
{ color:var(--white);}

.container-bottom-n .metismenu.mod-menu .metismenu-item {
    padding: .5em 0em;
 }

/* Das Modul bottom-n für logobild als Flexbox ausrichten */
.custom-logo {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Optional: auch horizontal */
    height: 100%; /* Falls das Modul die volle Höhe nutzen soll */
}


/*irgendwann name änder, da bg hellgelb*/
.lilabox{
  background-color: #fff3d1;
  color: #002;
  padding: 1rem;
  border: solid 1px #99b;
}

 
/*table responsiv*/
.table-light {
    --table-bg: #fff3d1;
    color: var(--primary-text-emphasis) !important; }

.table {
  font-size: var(--responsive-font-size);
}
.text-primary-emphasis {
    color: var(--primary-text-emphasis) !important;
}  

@media (max-width: 768px) {
  .table {
    font-size: 1rem; /* Kleinere Schriftgröße für mobile Ansicht */
  }
}

@media (max-width: 480px) {
  .table {
    font-size: 0.9rem; /* Noch kleiner für sehr schmale Displays */
  }
}





p.tabletext {
    margin-top: 0;
    margin-bottom: 0 !important;
}
  .table ul {
    margin-top: 0;
    margin-bottom: 0rem;
}
.table th {
    font-weight: inherit !important;
}  

 .titlecolor{
 color: var(--orange); 
}




.btn-info {
    --btn-color: var(--text-white);
    --btn-bg: var(--dark);
    --btn-border-color: var(--text-white);
    --btn-hover-color: var(--dark);
    --btn-hover-bg: var(--dark);
    --btn-hover-border-color: var(--text-white);
    --btn-focus-shadow-rgb: 79, 122, 158;
    --btn-active-color: var(--text-white);
    --btn-active-bg: var(--dark);
    --btn-active-border-color: var(--text-white);
    --btn-active-shadow: inset 0 3px 5px #00000020;
    --btn-disabled-color: #fff;
    --btn-disabled-bg: var(--dark);
    --btn-disabled-border-color: var(--text-white);
    pointer-events:none !important;
  
}






/* 🎯 Dynamische Skalierung für H1 & H2 */
h1, h2 {
    font-size: clamp(1.8rem, 5vw, 3rem); /* 48px bei großen Bildschirmen */
    
  }  

/* 📝 H3 bis H6 – Abgestufte Größen für bessere Struktur */
h3 {
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* 40px max */
    
}

h4 {
    font-size: clamp(1.3rem, 3.5vw, 2rem); /* 32px max */
   
}

h5 {
    font-size: clamp(1.2rem, 3vw, 1.75rem); /* 28px max */
    
}

/* h6 Ferienwohnung */
.h6 {
    font-family: var(--font-family-headings);
    font-size: 1.25rem; /* 20px */
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* 🛠 Spezielle Anpassungen für sehr kleine Bildschirme (<360px) */
@media (max-width: 360px) {
    h1, h2 {
        font-size: 1.8rem; /* Nicht zu groß für kleine Displays */
    }

    h3 {
        font-size: 1.3rem; /* WCAG-konform für sehr kleine Bildschirme */
    }
  .h6 {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 1rem;
    }
  
}
.footer-menu a,
.footer-menu a:visited {
    color: #ffffff !important;}

.footer-menu a:hover {
    color: #dddddd !important; /* optional: leichtes Hellgrau beim Hover */
}
a {
    color: var(--link-color);
    text-decoration: none !important;
}
ul {
    list-style-type: none !important;
    padding-left: 0px !important;
}

.orange {
  color: var(--beige);
}
/* Standardgröße für Desktop */


/* Verkleinerung für Tablets */
@media (max-width: 768px) {
  .tele {
    font-size: 5rem; /* Reduzierte Größe für Tablets */
  }
}

/* Verkleinerung für Handys */
@media (max-width: 480px) {
  .tele {
    font-size: 4rem; /* Kleinere Größe für Mobilgeräte */
  }
}


.title-span {
  color: var(--primary); 
}




.btn-primary {

    border-radius: .5rem;
    padding: .5rem 1rem;
    font-weight: 500;
    background-color: #21333D;
    color: #fff;
    transition: all 0.3s ease;
    text-decoration: none;
    
}
 .btn-primary:hover {
    background: var(--dark) !important;
    color: white; /* Falls --white nicht definiert ist */
}



.icon-box {
  padding: 0.5rem; /* Gepolsterter Bereich */
}

.icon-text {
  font-family: var(--bs-body-font-family, sans-serif); /* Vererbt Bootstrap-Schriftart oder Fallback */
  font-size: var(--bs-body-font-size, 1rem); /* Verwendet die globale Font-Size */
  font-weight: var(--bs-body-font-weight, normal); /* Nutzt das Standardgewicht des Body */
  color: var(--bs-body-color, inherit); /* Vererbt die Standardfarbe */
  margin: 0;
}

/* Falls es noch überschrieben wird: Erzwinge die Werte */
.icon-text, .icon-box p {
  font-family: inherit !important;
  font-weight: inherit !important;
}


/*Zitat-Slider - links Border*/
.border-start {
    border-left: var(--border-width) var(--border-style) var(--border-color) !important;
}
.blockquote {
    margin-bottom: 1rem;
    font-size: var(--body-font-size);
    font-style: italic;
     padding: 1rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--primary);
}

.blockquote-text {
  display: block;
  line-height: 1.5; /* Verbessert die Lesbarkeit */
  max-width: 100%; /* Verhindert, dass der Text zu breit wird */
  overflow: auto; /* Falls JavaScript deaktiviert ist, wird kein Text über den Rand hinaus angezeigt */
  text-align: center; /* Falls die Zitate mittig sein sollen */
}
.ferienwohnung-content {
    text-align: center;
    padding: 2rem;
    font-family: inherit;
}



/* Hauptüberschrift "Zum Sonnenaufgang" */
.ferienwohnung-name {
    font-size: 2.5rem; /* 40px */
    font-weight: bold;
    margin-bottom: 1.5rem; /* Mehr Abstand zur Beschreibung */
}



/* Icons für Personen, Betten, Größe */
.ferienwohnung-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 1.5rem;
    margin-top: 1rem;
}

/* Einzeln gestylte Icons */
.ferienwohnung-icons .icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
}

/* Icon-Farbe */
.ferienwohnung-icons i {
    font-size: 2rem;
    color: var(--orange);
}

/* === Mobile Anpassungen === */
@media (max-width: 768px) {
    .ferienwohnung-content {
        padding: 1.25rem;
    }

    

    .ferienwohnung-name {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    

    .ferienwohnung-icons {
        gap: 1rem;
        font-size: 1.2rem;
    }

    .ferienwohnung-icons .icon {
        font-size: 1.2rem;
    }

    .ferienwohnung-icons i {
        font-size: 1.5rem;
    }
}






.fa-classic, .fa-regular, .fa-solid, .far, .fas, fa{
    font-family: "Font Awesome 6 Free" !important;
    /*color: var(--orange);*/
}

.card-header {
    color: var(--text-grey);
    background-color: #676464;
   
}
/*buttom highlights nebeneinander*/
.button-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Ermöglicht das Umbrechen der Buttons bei kleineren Bildschirmgrößen */
    gap: 10px; /* Optional: Abstand zwischen den Buttons */
}



/*................SEO*/
.tag-cloud {
  list-style-type: none;
  padding: 0;
  text-align: center;
}

.tag-cloud li {
  display: inline-block;
  margin: 0.5rem;
  /* Optional: Farbe für die Tags */
  color: #333;
}

/* Schriftgrößen basierend auf der Gewichtung */
.tag-weight-1 { font-size: 0.5rem; }
.tag-weight-2 { font-size: 0.75rem; }
.tag-weight-3 { font-size: 1rem; }
.tag-weight-4 { font-size: 1.5rem; }
.tag-weight-5 { font-size: 1.75rem; }

/*Container-Bottom-F-------------------------------Container-Bottom-F*/
.container-bottom-f {
    color: var(--text-grey);
    }


/*Container-Footer-Menu-------------------------------Container-Footer-Menu*/
.container-footer-menu a {
    color: var(--white);
    font-weight: 300;
    text-decoration: none !important;
}

.container-footer-menu ul.social_icons {
    display: flex;
    list-style: none;
    margin-top: 20px;
    padding-left: 0;
    gap: 5px;
}
.container-footer-menu ul.social_icons li a {
    height: 40px;
    width: 40px;
    line-height: 38px;
    background-color: var(--hellblau);
    text-align: center;
    font-size: 13px;
    border-radius: 3px;
}

ul.social_icons li a {
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    color: var(--orange);
    padding: 10px;
    background-color: black;
}

ul.social_icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
    padding-left: 0;
    margin: 0;
}

/*---------------Positions----------------*/
/*positionen*/
.container-bottom-c,
.container-bottom-d,
.container-bottom-dd,
.container-bottom-e,
.container-bottom-f,
.container-bottom-g,
.container-bottom-h,
.container-bottom-i,
.container-bottom-j,
.container-bottom-k,
.container-bottom-l,
.container-bottom-m,
.container-bottom-n,
.container-footer-menu,
.container-seo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Abstand zwischen den Modulen */
    
}

.container-bottom-c > *,
.container-bottom-d > *,
.container-bottom-dd > *,
.container-bottom-e > *,
.container-bottom-f > *,
.container-bottom-g > *,
.container-bottom-h > *,
.container-bottom-i > *,
.container-bottom-j > *,
.container-bottom-k > *,
.container-bottom-l > *,
.container-bottom-m > *,
.container-bottom-n > *,
.container-footer-menu > *,
.container-seo > * {
    flex: 1 1 calc(25% - 1rem); /* Vier Module pro Zeile */
}

@media (max-width: 1200px) {
.container-bottom-c > *,
.container-bottom-d > *,
.container-bottom-dd > *,
.container-bottom-e > *,
.container-bottom-f > *,
.container-bottom-g > *,
.container-bottom-h > *,
.container-bottom-i > *,
.container-bottom-j > *,
.container-bottom-k > *,
.container-bottom-l > *,
.container-bottom-m > *,
.container-bottom-n > *,
.container-footer-menu > *,
.container-seo > * {
        flex: 1 1 calc(33.333% - 1rem); /* Drei Module pro Zeile bei Bildschirmen ≤ 1200px */
        margin: 1rem 1rem; /* Innenabstand links und rechts */
        gap: 1rem;
    }
}

@media (max-width: 992px) {
.container-bottom-c > *,
.container-bottom-d > *,
.container-bottom-dd > *,
.container-bottom-e > *,
.container-bottom-f > *,
.container-bottom-g > *,
.container-bottom-h > *,
.container-bottom-i > *,
.container-bottom-j > *,
.container-bottom-k > *,
.container-bottom-l > *,
.container-bottom-m > *,
.container-bottom-n > *,
.container-footer-menu > *,
.container-seo > * {
        flex: 1 1 calc(50% - 1rem); /* Zwei Module pro Zeile bei Bildschirmen ≤ 992px */
        margin: 0 1rem; /* Innenabstand links und rechts */
        flex-direction:column;
        gap: 1rem;
    }
}

@media (max-width: 576px) {
.container-bottom-c > *,
.container-bottom-d > *,
.container-bottom-dd > *,
.container-bottom-e > *,
.container-bottom-f > *,
.container-bottom-g > *,
.container-bottom-h > *,
.container-bottom-i > *,
.container-bottom-j > *,
.container-bottom-k > *,
.container-bottom-l > *,
.container-bottom-m > *,
.container-bottom-n > *,
.container-footer-menu > *,
.container-seo > * {
        flex: 1 1 100%; /* Ein Modul pro Zeile bei Bildschirmen ≤ 576px */
        flex-direction:column;
    }
}



/*---------------Positions----------------*/
@supports (display: grid) {
  .site-grid {
    grid-gap: 0 1em;
    grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 19.875rem))[main-end] minmax(0, 1fr)[full-end];
    grid-template-areas: ". banner banner banner banner ."
                         ". top-a top-a top-a top-a ."
                         ". top-b top-b top-b top-b ."
                         ". comp comp comp comp ."
                         ". side-r side-r side-r side-r ."
                         ". side-l side-l side-l side-l ."
                         ". bot-a bot-a bot-a bot-a ."
                         ". bot-b bot-b bot-b bot-b ."
                         ". bot-c bot-c bot-c bot-c ."
                         ". bot-d bot-d bot-d bot-d ."
                         ". bot-e bot-e bot-e bot-e ."
                         ". bot-dd bot-dd bot-dd bot-dd ."
                         ". bot-f bot-f bot-f bot-f ."
                         ". bot-g bot-g bot-g bot-g ."
                         ". bot-h bot-h bot-h bot-h ."
                         ". bot-i bot-i bot-i bot-i ."
                         ". bot-j bot-j bot-j bot-j ."
                         ". bot-k bot-k bot-k bot-k ."
                         ". bot-l bot-l bot-l bot-l ."
                         ". bot-m bot-m bot-m bot-m ."
                         ". bot-n bot-n bot-n bot-n ."
                         ". footer-m footer-m footer-m footer-m ."
                         ". seo  seo  seo  seo .";
                          
    display: grid;
  }

  .site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
    column-gap: 1em;
    width: 100%;
    max-width: none;
  }

  .site-grid > .full-width {
    grid-column: full-start / full-end;
  }

  @media (min-width: 992px) {
    .site-grid {
      grid-template-areas:". banner banner banner banner ."
                         ". top-a top-a top-a top-a ."
                         ". top-b top-b top-b top-b ."
                         ". comp comp comp comp ."
                         ". side-r side-r side-r side-r ."
                         ". side-l side-l side-l side-l ."
                         ". bot-a bot-a bot-a bot-a ."
                         ". bot-b bot-b bot-b bot-b ."
                         ". bot-c bot-c bot-c bot-c ."
                         ". bot-d bot-d bot-d bot-d ."
                         ". bot-e bot-e bot-e bot-e ."
                         ". bot-dd bot-dd bot-dd bot-dd ."
                         ". bot-f bot-f bot-f bot-f ."
                         ". bot-g bot-g bot-g bot-g ."
                         ". bot-h bot-h bot-h bot-h ."
                         ". bot-i bot-i bot-i bot-i ."
                         ". bot-j bot-j bot-j bot-j ."
                         ". bot-k bot-k bot-k bot-k ."
                         ". bot-l bot-l bot-l bot-l ."
                         ". bot-m bot-m bot-m bot-m ."
                         ". bot-n bot-n bot-n bot-n ."
                         ". footer-m footer-m footer-m footer-m ."
                         ". seo  seo  seo  seo .";
    }
  }


.grid-child {
    column-gap: 1em !important;
}
.container-banner {
  grid-area: banner;
}

.container-top-a {
  grid-area: top-a;
}

.container-top-b {
  grid-area: top-b;
}

.container-component {
  grid-area: comp;
}

.container-sidebar-left {
  grid-area: side-l;
}

.container-sidebar-right {
  grid-area: side-r;
}

.container-main-top {
  grid-area: main-t;
}

.container-main-bottom {
  grid-area: main-b;
}

.container-breadcrumbs {
  grid-area: bread;
}

.container-bottom-a {
  grid-area: bot-a;
}

.container-bottom-b {
  grid-area: bot-b;
  }
.container-bottom-c {
  grid-area: bot-c;
}
.container-bottom-d {
  grid-area: bot-d;
}

.container-bottom-dd {
  grid-area: bot-dd;
}
.container-bottom-e {
  grid-area: bot-e;
}
.container-bottom-f {
  grid-area: bot-f;
}
.container-bottom-g {
  grid-area: bot-g;
}
.container-bottom-h {
  grid-area: bot-h;
}
.container-bottom-i {
  grid-area: bot-i;
}
.container-bottom-j {
  grid-area: bot-j;
}
.container-bottom-k {
  grid-area: bot-k;
}
.container-bottom-l {
  grid-area: bot-l;
}
.container-bottom-m {
  grid-area: bot-m;
}
.container-bottom-n {
  grid-area: bot-n;
}

.container-footer-menu  {
  grid-area: footer-m;
}
.container-seo {
  grid-area: seo;
}

.container-topbar .grid-child{
    justify-content: space-between;
    align-items: baseline !important;
    padding: 1.1rem 0.5em;
    gap: 30px !important;
    display:block;
    flex-direction:column !important;
}

.container-banner .banner-overlay .overlay {
    background-color: #00000000 !important;    
}
  
/*menü im header*/
.container-header {
    background-color: var(--primary);
    background-image: none;
    box-shadow: none;
    font-weight: bold;
   }
  .container-header .container-nav {
    padding-bottom: 0 !important; 
}
  .container-header .grid-child {
   padding-bottom: 0 !important;
}
  
  .metismenu.mod-menu .metismenu-item>button {
   font-weight: bold;
}

/*container-search*/
.container-header .container-search {
  margin-top: 1em !important;
}
@media (width <= 767.98px) {
    .container-header .container-nav .container-search, .container-header .container-nav nav {
        margin-top: 0 !important;
    }
}