/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0
*/

/* ====================================
   Border webseite
==================================== */

body {
    border-top: 0vh solid #ffffff;
    border-left: 0vw solid #f3f4f6;
    border-right: 0vw solid #f3f4f6;
}

@media only screen and (max-width: 1280px) {
  body {
    border: solid 0vw;
  }
}


/* ====================================
   Entfernt abstand zwischen Content und Footer
==================================== */

.the_content_wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ====================================
   Socialmedia Icons nebeneinander
==================================== */

.social-inline .wpb_wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 15px !important;
  flex-wrap: nowrap !important;
}

.social-inline .ult-just-icon-wrapper {
  margin-bottom: 0 !important;
}

/* Einheitliche Größe und Stil für alle Social Media Icons */

.social-inline .ult-just-icon-wrapper {
  font-size: 20px !important;         /* Schriftgröße innerhalb des Icons */
  width: 50px !important;             /* Breite des Icons */
  height: 50px !important;            /* Höhe des Icons */
  line-height: 50px !important;       /* vertikale Zentrierung */
  text-align: center !important;
}

.social-inline .ult-just-icon-wrapper i {
  font-size: 20px !important;         /* Größe des eigentlichen Icons */
}


/* ====================================
   Hide Elements Responsive
==================================== */

/* Hide elemente unter 1200px */

@media (max-width: 1200px) {
  .hide-mobile {
    display: none !important;
  }
}


/* Hide elemente unter 1440px */

@media (max-width: 1440px) {
  .hide-tablet {
    display: none !important;
  }
}


/* Hide "background-titel" unter 1200px */

@media (max-width: 1200px) {
  /* Alles ausblenden, was "circular-backgrund" im Style enthält */
  div[style*="circular-backgrund"],
  section[style*="circular-backgrund"] {
    display: none !important;
  }
}


/* Elemente unter 1200px full-width */

@media screen and (max-width: 1200px) {
  .full-width-mobile {
    width: 100% !important;
  }
}


/* 5-Spalten-Layout → unter 1200 px in 3-Spalten umwandeln */

@media (max-width: 1199px) {
  .five-cols .vc_row .vc_col-sm-2,
  .five-cols .vc_row .wpb_column {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
  }
}


/* ====================================
   Padding & Margin von WPBakery Column komplett entfernen
==================================== */

.no-spacing.wpb_column,
.no-spacing .vc_column-inner,
.no-spacing .wpb_wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1199px) {
  .no-spacing.wpb_column,
  .no-spacing .vc_column-inner,
  .no-spacing .wpb_wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


.vc_column-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Unter 1200px: wieder etwas Luft oben und unten */
@media (max-width: 1199px) {
  .vc_column-inner {
    padding-top: 2vh !important;
    padding-bottom: 0 !important;
  }

  /* Extra: letzter inner Container bekommt unten Abstand */
  .vc_column-inner:last-child {
    padding-bottom: 2vh !important;
  }
}

/*margin-bottom-15px */

.wpb_wrapper > div { margin-bottom: 0px !important; 
}

/*mpc-column a:hover */

.mpc-column a:hover {
    text-decoration: none !important;
}


/* ====================================
    Menu und Logo
==================================== */

/* menu word-break */

.ss-element * {
    word-break: keep-all !important;
}


/*gusta-nav scale*/

.foodscience-navigation > ul > li > a {
  font-size: clamp(15px, 1.4vw, 30px) !important;
  line-height: clamp(35px, 3vw, 50px) !important;
}

.footer-navigation > ul > li > a {
  font-size: clamp(10px, 0.98vw, 21px) !important;
  line-height: clamp(24px, 2.1vw, 35px) !important;
}

/* Entfernt border-right vom letzten Listenelement */

.footer-navigation li:last-child {
  border-left: none !important;
}

/* gusta-nav logo scale*/

@media screen and (max-width: 2580px) {
	.gusta-logo, .gusta-logo a {
		height: 140px !important;
	}
	#menu-foodscience-hauptmenu {
		margin-left: 4vw;
  }
}
	
@media screen and (max-width: 1920px) {
	.gusta-logo, .gusta-logo a {
		height: 150px !important;
	}
	#menu-foodscience-hauptmenu {
		margin-left: 4vw;
  }
}

@media screen and (max-width: 1560px) {
	.gusta-logo, .gusta-logo a {
		height: 40px !important;
	}
	#menu-foodscience-hauptmenu {
		margin-left: 4vw;
  }
}

@media screen and (max-width: 1440px) {
	.gusta-logo, .gusta-logo a {
		height: 20px !important;
	}
	#menu-foodscience-hauptmenu {
		margin-left: 4vw;
  }
}

@media screen and (max-width: 1280px) {
	.gusta-logo, .gusta-logo a {
		height: 10px !important;
	}
	#menu-foodscience-hauptmenu {
		margin-left: 4vw;
	}
}

@media screen and (max-width: 1024px) {
	.gusta-logo, .gusta-logo a {
		height: 100px !important;
	}
	#menu-foodscience-hauptmenu {
		margin-left: 4vw;
	}
}

@media screen and (max-width: 768px) {
	.gusta-logo, .gusta-logo a {
		height: 100px !important;
	}
	#menu-foodscience-hauptmenu {
		margin-left: 4vw;
	}
}


/* ====================================
   Schriften
==================================== */

	/* P Schrift groesse */

p {
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.40;
}

/* H1 Schriftgröße */
h1 {
  font-size: clamp(1.35rem, 1.8vw, 2.25rem);
  line-height: 1.3;
}

/* H2 Schriftgröße (identisch zu H1) */
h2 {
  font-size: clamp(1.35rem, 1.8vw, 2.25rem);
  line-height: 1.3;
}

/* H3 = 30% kleiner */
h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.75rem);
  line-height: 1.3;
}

/* H4 = nochmal 30% kleiner als H3 */
h4 {
  font-size: clamp(0.74rem, 1vw, 1.23rem);
  line-height: 1.3;
}

/* H5 = nochmal 30% kleiner als H4 */
h5 {
  font-size: clamp(0.52rem, 0.7vw, 0.86rem) !important;
  line-height: 1.3 !important;
}

/* H6 = nochmal 30% kleiner als H5 */
h6 {
  font-size: clamp(0.36rem, 0.5vw, 0.6rem) !important;
  line-height: 1.3 !important;
}


/* ====================================
   Paddings
==================================== */

/* Globales - Padding Top-Bottom */

.padding-top {
  padding-top: clamp(6vh, 6vw, 16vh) !important;
}

@media (max-width: 1200px) {
  .padding-top {
    padding-top: 0 !important;
  }
}

.padding-bottom {
  padding-bottom: clamp(6vh, 6vw, 16vh) !important;
}

@media (max-width: 1200px) {
  .padding-bottom {
    padding-bottom: 0 !important;
  }
}


/*Globales Padding-left-right*/

.padding-left-right {
  padding-left: clamp(18vw, 8vw, 18vw) !important;
  padding-right: clamp(18vw, 8vw, 18vw) !important;
}

.padding-left-right-small {
  padding-left: clamp(24vw, 10vw, 24vw) !important;
  padding-right: clamp(24vw, 10vw, 24vw) !important;
}

.padding-left-right-frame {
  padding-left: clamp(2vw, 2vw, 2vw) !important;
  padding-right: clamp(2vw, 2vw, 2vw) !important;
}

.padding-left-right-frame-doppelt {
  padding-left: clamp(5vw, 10vw, 16vw) !important;
  padding-right: clamp(5vw, 10vw, 16vw) !important;
}

@media screen and (max-width: 1200px) {
.padding-left-right {
  padding-left: clamp(4vw, 4vw, 4vh) !important;
  padding-right: clamp(4vw, 4vw, 4vh) !important;
}

.padding-left-right-frame {
  padding-left: clamp(0vw, 0vw, 0vh) !important;
  padding-right: clamp(0vw, 0vw, 0vh) !important;
	}
}


/*Padding-innen runde bilder*/

.paddinginnen-runde-bilder {
  padding-left: clamp(3vw, 3vw, 3vh) !important;
  padding-right: clamp(3vw, 3vw, 3vh) !important;
}

/* Unter 1200px anderes Padding */
@media (max-width: 1199px) {
  .paddinginnen-runde-bilder {
    padding-left: 4vw !important;
    padding-right: 4vh !important;
  }
}


/*Padding überschrift*/

.uberschrift {
  padding-top: clamp(0vh, 0vh, 0vh) !important;
  padding-bottom: clamp(1vh, 2vh, 3vh) !important;
}


/*Padding überschrift viel*/

.uberschriftviel {
  padding-top: clamp(0vh, 0vh, 0vh) !important;
  padding-bottom: clamp(2vh, 4vh, 6vh) !important;
}

@media screen and (max-width: 1200px) {
  .uberschriftviel {
    padding-bottom: clamp(1vh, 2vh, 3vh) !important;
  }
}


/*Padding im Blog*/

.uberschriftblog {
  padding-top: clamp(1vh, 1vh, 1vh) !important;
  padding-bottom: clamp(1vh, 2vh, 3vh) !important;
}


@media screen and (max-width: 1200px) {
  .uberschriftblog {
		padding-top: clamp(1vh, 1vh, 1vh) !important;
    padding-bottom: clamp(1vh, 1vh, 1vh) !important;
  }
}


@media (max-width: 1199px) {
  .no-mobile-bottom-space,
  .no-mobile-bottom-space .vc_column-inner,
  .no-mobile-bottom-space .wpb_wrapper,
  .no-mobile-bottom-space p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .column.one.post-header {
    display: none !important;
  }

  .vc_custom_174068215448 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .vc_custom_1740690058412 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* dauerhaft ausgeblendet: header mit .section-post-header */
header.section.section-post-header {
  display: none !important;
}


/*Kein Margin und Padding oben und Unten*/

.no-spacing {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/*padding Button*/

.paddingbutton {
  margin-top: 0vh !important;
  margin-bottom: clamp(-7vh, -7vw, -7vh) !important;
  padding-left: 1.5vw !important;
  padding-right: 1.5vw !important;
	z-index: 10 !important;
}

@media (max-width: 1200px) {
  .paddingbutton {
    display: none !important;
  }
}


/* ====================================
   Slider Sachen
==================================== */

@media (max-width: 1199px) {
  /* Auf jeden Fall Slick-Elemente nullen */
  .slider-padding-mobile .slick-slider,
  .slider-padding-mobile .slick-list,
  .slider-padding-mobile .slick-track,
  .slider-padding-mobile .slick-slide {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Auch die Spalten nullen */
  .slider-padding-mobile .wpb_column,
  .slider-padding-mobile .wpb_column > .vc_column-inner,
  .slider-padding-mobile .vc_column-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Die Row selber */
  .slider-padding-mobile.vc_row,
  .slider-padding-mobile .vc_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Die Klasse selber */
  .slider-padding-mobile {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Dots positionieren im Slider */
.slick-dots {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

/* Slider-Container auf relative setzen, damit absolute Position der Dots funktioniert */
.slider-padding-mobile {
  position: relative !important;
}

/* Unter 1200px: Dots näher an unteren Rand */
@media (max-width: 1199px) {
  .slider-padding-mobile .slick-dots {
    bottom: 0px !important; /* oder 0px, je nach Bedarf */
  }
}

/* Dots grösser und bereinigt */
.ult-carousel-wrapper .ultsl-record {
  all: unset !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background-color: #fff !important; /* inaktiv: weiß */
  margin: 0 4px !important;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  position: relative;
}

/* Entferne mögliche Pseudo-Elemente */
.ult-carousel-wrapper .ultsl-record::before,
.ult-carousel-wrapper .ultsl-record::after {
  display: none !important;
  content: none !important;
}

/* Aktiver Punkt: dein Wunschblau */
.ult-carousel-wrapper .slick-dots li.slick-active .ultsl-record {
  background-color: #013E99 !important;
  transform: scale(1.2);
}

/* Slider-Container auf volle breite */
@media (max-width: 1199px) {
  .ult-carousel-wrapper.ult_horizontal {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ====================================
   formcraft
==================================== */

.form-cover .main-label, .form-cover .sub-label {
	font-weight: bold;
}
@media screen and (max-width: 2580px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 125%;
    line-height: 125%;
  }
}

@media screen and (max-width: 1880px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 125%;
    line-height: 125%;
  }
}

@media screen and (max-width: 1720px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 125%;
    line-height: 125%;
  } 
}

@media screen and (max-width: 1560px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 100%;
    line-height: 125%;
  }
}

@media screen and (max-width: 1440px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 100%;
    line-height: 125%;
  }
}

@media screen and (max-width: 1280px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 100%;
    line-height: 125%;
  }
}

@media screen and (max-width: 1024px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 100%;
    line-height: 125%;
  }
}

@media screen and (max-width: 900px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 105%;
    line-height: 125%;
  }
}

@media screen and (max-width: 768px) {
  .form-cover .main-label, .form-cover .sub-label {
    font-size: 85%;
    line-height: 125%;
  }
}


/* ====================================
   actionlink
==================================== */

.actionlink {
    box-sizing: border-box;
    padding: 0px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;    
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;    
    transition: all 0.2s ease-in-out;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.actionlink:hover {
     -ms-transform: scale(1.02); /* IE 9 */
    -webkit-transform: scale(1.02); /* Safari 3-8 */
    transform: scale(1.02); 
    opacity: 1;
}

.tnp.tnp-subscription {
	width: 100%;
	padding: 0;
	margin: 0;
}

.tnp.tnp-subscription form {
	display: flex;
}
.tnp.tnp-subscription form .tnp-field {
	width: 50%;
}


/* ====================================
   Text als Zitate mit z-index und blauen hintergrund
==================================== */

.text-overlay-left {
  position: absolute !important;
  top: 50% !important;
  left: 0% !important; /* statt 5% */
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: white !important;
  text-align: left !important;
  background: #2f6aac !important;
  min-height: 1px;
  width: 40% !important;  
  max-width: 600px !important;
  padding: 4vh 4vw !important;
}

@media (max-width: 1200px) {
  .text-overlay-left {
    display: none !important;
  }
}

.image-space {
  margin-left: 25% !important;  /* So bleibt das Bild mittig */
}

@media (max-width: 1200px) {
  .image-space {
    margin-left: 0% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

.text-overlay-right {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: white !important;
  text-align: right !important;
  background: #2f6aac !important;
	min-height: 1px; 
  width: 50% !important;
  max-width: 600px !important;
  padding: 4vh 4vw !important;  /* Abstand innen */
}


/* ====================================
   Skalierung von Bildern ohne zusätzlichen Abstand
==================================== */

.specific-container img.scale-with-padding {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  transform: scale(0.5) !important;
  transform-origin: center center !important;
}

.specific-container img {
  width: 50% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  display: block !important;
}


/* ====================================
   Akkordeon ohne Linie etc
==================================== */

.vc_tta-panels-container .vc_tta-panels .vc_tta-panel {
	margin-bottom: 3px;
}
.vc_tta-panels-container .vc_tta-panels .vc_tta-panel .vc_tta-panel-heading {
	border: none;
	border-bottom: solid 1px #161922 !important;
}
.vc_tta-panels-container .vc_tta-panels .vc_tta-panel .vc_tta-title-text {
	color: #161922 !important;
}

.vc_tta-color-white.vc_tta-style-modern .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::after,
.vc_tta-color-white.vc_tta-style-modern .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::before,
.vc_tta-color-white.vc_tta-style-modern .vc_tta-controls-icon::after,
.vc_tta-color-white.vc_tta-style-modern .vc_tta-controls-icon::before {
	border-color: #161922 !important;
}


/* ====================================
   Element nach unten Positionieren
==================================== */

.wpb-col-bottom {
  position: relative !important;
  min-height: 100% !important;
}

.wpb-col-bottom .bottom-element {
  position: absolute !important;
  bottom: 0 !important;
	bottom: 2vh !important;
}

.uvc-list-icon-wrapper {
  position: relative;
  padding-bottom: 10px; /* optional, etwas Abstand zur Linie */
  margin-bottom: 10px; /* Abstand zwischen den Einträgen */
}

.uvc-list-icon-wrapper::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: 0;
}


/* ====================================
   List Icon mit weisser Linie
==================================== */

.custom-list-line li {
  position: relative !important;
  padding-top: 5px !important;
  padding-bottom: 0px !important;
  list-style: none !important;
}

.custom-list-line li::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background-color: #000000 !important;
}

.custom-list-line li:last-child::after {
  display: none !important;
}

.custom-list-line img {
  width: clamp(10px, 3vw, 20px) !important;
  max-width: clamp(10px, 3vw, 20px) !important;
  height: auto !important;
}


/* ====================================
   Button Arrow
==================================== */

/* Basis Button-Style bleibt */
.custom-button-style {
  font-family: var(--h4-font-family, inherit) !important;
  font-size: var(--h4-font-size, clamp(0.74rem, 1vw, 1.23rem)) !important;
  font-weight: var(--h4-font-weight, bold) !important;
  line-height: var(--h4-line-height, 1.3) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #101015 !important; /* Schriftfarbe */
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
}


/* Bestehendes Icon ersetzen */
.custom-button-style i,
.custom-button-style span.vc_btn3-icon {
  width: 1.2em;
  height: 1.2em;
  background-image: url('https://master-foodscience.com/wp-content/uploads/2025/04/arrowleft.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  font-style: normal; /* Wichtig: Kein echtes Font-Icon mehr */
  color: transparent; /* Falls noch Schrift-Icon da ist */
  transition: background-image 0.3s ease; /* sanfter Übergang beim Hover */
}

/* Hover: Icon auf weiß ändern */
.custom-button-style:hover i,
.custom-button-style:hover span.vc_btn3-icon {
  background-image: url('https://master-foodscience.com/wp-content/uploads/2025/04/arrowleft-white.png');
}

@media (max-width: 1199px) {
  /* Button-Größe verkleinern */
  .vc_btn3-size-lg {
    font-size: 0.8rem !important;
    padding: 0.4em 1em !important;
  }

  /* Icon-Größe anpassen */
  .vc_btn3-size-lg i,
  .vc_btn3-size-lg span.vc_btn3-icon {
    width: 1em !important;
    height: 1em !important;
  }

  /* Icon komplett ausblenden */
  .vc_btn3-size-lg i,
  .vc_btn3-size-lg span.vc_btn3-icon {
    display: none !important;
  }
}


/* ====================================
   Button Play
==================================== */

/* Basis Button-Style für Play-Button */
.custom-button-style-play {
  font-family: var(--h4-font-family, inherit) !important;
  font-size: var(--h4-font-size, clamp(0.74rem, 1vw, 1.23rem)) !important;
  font-weight: var(--h4-font-weight, bold) !important;
  line-height: var(--h4-line-height, 1.3) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #101015 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
}

/* Play-Icon (500x433 px mit Seitenverhältnis ~1.15) */
.custom-button-style-play i,
.custom-button-style-play span.vc_btn3-icon {
  width: 1.6em;
  height: 1.39em;
  background-image: url('https://master-foodscience.com/wp-content/uploads/2023/03/iconplay.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  font-style: normal;
  color: transparent;
  transition: background-image 0.3s ease;
}

/* Hover: Weißes Play-Icon */
.custom-button-style-play:hover i,
.custom-button-style-play:hover span.vc_btn3-icon {
  background-image: url('https://master-foodscience.com/wp-content/uploads/2023/03/iconplay-white-1.png');
}

@media (max-width: 1199px) {
  .vc_btn3-size-lg.custom-button-style-play {
    font-size: 0.8rem !important;
    padding: 0.4em 1em !important;
  }

  .vc_btn3-size-lg.custom-button-style-play i,
  .vc_btn3-size-lg.custom-button-style-play span.vc_btn3-icon {
    width: 1.2em !important;
    height: 1.04em !important;
    display: inline-block !important;
  }
}


/* ====================================
   Sticky beim Scrollen nach oben
==================================== */

.sticky-header {
  position: fixed;
  top: -100px; /* Versteckt das Menü initial */
  width: 100%;
  transition: top 0.3s ease;
  z-index: 9999;
}

.sticky-header.show-sticky {
  top: 0; /* Zeigt das Menü beim Scrollen nach oben */
}