/* Mobile navigation + Layout-Tweaks – Desktop bleibt unverändert */
        @media (max-width: 768px) {
          html, body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
          }

          .wrapper {
		  width: 90% !important;
		  margin: 0 5%!important;
          }

          .header-container {
            position: relative;
          }

          .header-container nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: none;
            flex-direction: column;
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            background: #ffffff;
            z-index: 9999;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
          }

          .header-container nav ul.is-open {
            display: flex;
          }

          .header-container nav ul li {
            border-bottom: 1px solid #e5e5e5;
            text-align: left;
          }

          .header-container nav ul li a {
            display: block;
            padding: 12px 20px;
          }

		.header-container nav li:first-child a {
		    margin-left: 17px;
		}


		/* Hamburger -> X wenn aktiv */
		.mobile-nav-toggle.is-active span {
		    background: transparent;
		}

		.mobile-nav-toggle.is-active span::before {
		    top: 0;
		    transform: rotate(45deg);
		}

		.mobile-nav-toggle.is-active span::after {
		    top: 0;
		    transform: rotate(-45deg);
		}

          .mobile-nav-toggle {
            position: absolute;
            top: 30%;
            right: 18px;
            z-index: 10000;
            width: 60px;
            height: 60px;
            border-radius: 9999px;
            border: 0;
            background: #46b002;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .mobile-nav-toggle span,
          .mobile-nav-toggle span::before,
          .mobile-nav-toggle span::after {
            content: "";
            display: block;
            width: 30px;
            height: 3px;
            background: #ffffff;
            border-radius: 9999px;
            position: relative;
          }

          .mobile-nav-toggle span::before {
            position: absolute;
            top: -8px;
          }

          .mobile-nav-toggle span::after {
            position: absolute;
            top: 8px;
          }

          /* Verhindert zusätzliche Scrollcontainer */
          .slider-container,
          .grey-container,
          #leistungen,
          #angebote,
          #partner,
          #kontakt,
          #impressum {
            overflow: visible;
          }
	     /* Slider darf mitwachsen */
	     .slider-container {
	       height: auto !important;
	       position: relative !important;
				 margin-top: 0 !important;
	     }

	     /* Referenzen-Balken komplett „resetten“ */
	     .references.center {
	       position: static !important;
	       bottom: auto !important;
	       left: auto !important;
	       right: auto !important;
	       transform: none !important;

	       height: auto !important;
	       line-height: normal !important;

	       display: block !important;
	       text-align: center !important;
	       padding: 12px 0 20px !important;
	       margin: 0 !important;
	       width: 100% !important;
	     }

	     /* Alle Kinder: keine floats/absolute Position mehr */
	     .references.center a,
	     .references.center img,
	     .references.center i {
	       position: static !important;
	       float: none !important;
	       display: block !important;
	       margin: 4px auto !important;
	     }

	     .references.center img {
	       max-height: 40px !important;
	       height: auto !important;
	       width: auto !important;
		  padding:15px 0;
	     }

	     .references.center i.fa-play {
	       display:none !important;
	     }
		
		
		
			 /* UDO-BLOCK – mobile */
			 .udo {
			     float: none !important;
			     width: 100% !important;
			     text-align: center;
			     margin: 0 auto 24px auto !important;
			 }

			 .udo img {
			     max-width: 75%;
			     height: auto;
			     display: block;
			     margin: 0 auto 10px auto;
			 }

			 .udo h5 {
			     font-size: 18px;
			     margin: 8px 0 10px;
			 }

			 .udo .urkunden {
			     list-style: none;
			     padding: 0;
			     margin: 0 0 18px 0;
			 }

			 .udo .urkunden li {
			     margin-bottom: 6px;
			 }

			 .udo .urkunden a {
			     font-size: 15px;
			     text-decoration: underline;
			 }

			 /* Logos untereinander mit etwas Luft */
			 .udo img[alt*="Heilpraktiker"],
			 .udo img[alt*="Verband der Diätassistenten"],
			 .udo img[alt*="Alpha Health Service"] {
			     max-width: 80%;
			     margin: 6px auto;
			 }		
		
		
/* =========================================
   LEISTUNGEN – Mobile
   ========================================= */
.leistungen.center {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
}

/* Jede Box = volle Breite */
.leistungen .square {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 22px 12px 26px; /* extra bottom padding */
    border: 0;
    background: #4ab003;
    text-align: center;
}

/* normal-Ansicht aus für Mobile */
.leistungen .square .normal {
    display: none !important;
}

/* Hover immer sichtbar */
.leistungen .square .hover {
    display: block !important;
    position: static !important;
    transform: none !important;
    padding: 0;
}

/* Icons mittig + größer */
.leistungen .square .hover img {
    display: block;
    margin: 0 auto 12px auto;
    width: 64px; /* war 40-46, jetzt lesbarer */
    height: auto;
}

/* Titel */
.leistungen .square .hover h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Listen/Text */
.leistungen .square .hover,
.leistungen .square .hover a,
.leistungen .square .hover span {
    font-size: inherit;
    line-height: 1.45;
}


/* =========================================
   ANGEBOTE – Mobile
   ========================================= */

/* Kacheln untereinander, volle Breite */
#angebote .leistungen.center {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

#angebote .leistungen .square-big,
#angebote .leistungen .square {
    width: 100% !important;
    max-width: 100%;
    height: 100%;
    float: none !important;
    display: block;
    box-sizing: border-box;
    margin: 0 0 20px;
}

/* Bilder in der großen Box */
#angebote .leistungen .square-big img.fL {
    float: none !important;
    display: block;
    margin: 10px auto 20px auto;
    max-width: 100%;
    height: auto;
}

/* Text in der großen Box lesbarer */
#angebote .leistungen .square-big p.text {
    font-size: inherit;
    line-height: 1.5;
}

/* Preis-/Text-Bereich in der kleinen Box */
#angebote .leistungen .square .text,
#angebote .leistungen .square .price {
    display: block;
    font-size: inherit;
    line-height: 1.5;
}
#angebote .leistungen .square .price { font-size:xx-large;}
/* Mountain / Emit / Atlas untereinander, ohne Floats & fixe Positionierung */
#angebote .mountain,
#angebote .emit,
#angebote .atlas {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-top: 25px;
    position: static !important;
}

/* Bilder darin zentriert und skalierend */
#angebote .mountain img,
#angebote .emit img {
    position: static !important;
    float: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px auto 0 auto;
}

/* Atlas-Text */
#angebote .atlas .text {
    display: block;
    font-size: inherit;
    line-height: 1.5;
}


/* =========================================
   PARTNER – Mobile
   ========================================= */

#partner .pressespiegel,
#partner .text,
#partner .studios,
#partner .referenz {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 20px;
}

/* Referenzboxen optisch etwas luftiger */
#partner .referenz p {
    font-size: 16px;
    line-height: 1.5;
}

/* Logos in den Referenzen */
#partner .referenz .logos {
    float: none !important;
    display: block;
    margin: 0 0 8px;
}

#partner .referenz .logos img {
    max-width: 100%;
    height: auto;
}

/* Studios-Bild */
#partner .studios img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* =========================================
   KONTAKT – Mobile
   ========================================= */

#kontakt .address,
#kontakt .address_offices {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 20px;
    font-size: initial !important;
}
#kontakt .address { margin-left: 0 !important; font-size: initial !important; }

/* Blöcke in address_offices mit Abstand */
#kontakt .address_offices p {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.5;
}

/* Telefonnummer-Button schön breit anklickbar */
#kontakt .phonenumber {
    display: inline-block;
    margin-top: 10px;
}


/* =========================================
   FANCYBOX OVERLAYS – Impressum / Datenschutz
   ========================================= */
#impressum,
#datenschutz {
    width: 90vw !important;
    max-width: 90vw !important;
    box-sizing: border-box !important;
    padding: 20px 18px !important;
    background: #ffffff !important;
    color: #000 !important;
    border-radius: 8px;
    overflow-y: auto;
    max-height: 85vh !important;
}

#impressum h2,
#impressum h3,
#datenschutz h2,
#datenschutz h3 {
    font-size: 20px !important;
    margin-bottom: 12px;
}

#impressum p,
#datenschutz p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px;
}

#datenschutz ul,
#impressum ul {
    padding-left: 18px;
    margin-bottom: 14px;
}

#datenschutz ul li,
#impressum ul li {
    font-size: 15px;
    line-height: 1.45;
}

/* Links lesbar */
#datenschutz a,
#impressum a {
    font-size: 15px;
    color: #0077cc !important;
    word-break: break-word;
}	

.fancybox-skin {
    padding: 0 !important;
}
.fancybox-inner {
    width: auto !important;
}	
	
		#uebermich .text, #uebermich #werbespot{ width:100% !important; font-size: initial !important;}
		#partner .referenz { width:90% !important; font-size: initial !important;}
		
        }

        @media (min-width: 769px) {
          .mobile-nav-toggle {
            display: none;
          }
        }