body, html {
       background-color: #FBF8EF;
       font-family: 'Barlow', sans-serif;
       font-weight: 300;
       height: 100%;
       margin: 0;			
   }
  /* Navigations */
   .custom-navbar {
       background-color: #F7B2EA; 
   }
 /* Entfernen des Fett-Stils beim Anklicken des Hamburger-Menüs */
 .navbar-toggler:focus,
 .navbar-toggler:active {
   	outline: none;
   	box-shadow: none;
   	border: none;
 }

 .navbar-toggler-icon {
   	outline: none;
   	box-shadow: none;
 }
   .navbar-nav {
       right: 0px;
   }
 /* Fixierte Navbar */
 .fixed-navbar {
     position: fixed;
     top: 32px;
     width: 100%;
     z-index: 1000; 
     background-color: #F7B2EA; 
 }
 .fixed-header {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1000; 
 }
   @media (max-width: 768px) {
       .fixed-navbar {
           top: 56px;
       }
   }
 /* Balken über der Navigation */
   .bg-primary1 {
       background-color: #F9D2F1; /* Hintergrundfarbe */
   }
 
 /* Animation am Anfang */
   .cloud-container {
       position: relative;
       width: 100%;
       height: 100vh; 
       overflow: hidden;
       background-image: url('bilder/hintergrund_wolke_blur.webp'); 
       background-attachment: fixed;
       background-position: center;
       background-size: cover;
   }
   .cloud {
       position: absolute;
       bottom: -20px;; /* Initial position */
       /*   transition: transform 20s linear; */
	 transform: translateX(-60%);
	 transition: transform 20s ease-out;
   }
 .cloud.small {
     width: 334px;
     height: 180px;
     background: url('ani/wolke.svg') no-repeat;
     background-size: cover;
     left: 10%;
     bottom: 60px; 
     z-index: 6;
 }
 .cloud.large {
	 width: 800px; 
	 height: 199px; 
     background: url('ani/wolke_gross.svg') no-repeat;
     background-size: cover;
     left: 50%;
     bottom: -0.5px; 
     z-index: 5;
 }
   .sun {
       position: absolute;
       bottom: -40px;
       left: 50%;
       width: 540px;
       height: 340px;
       background: url('bilder/lps-logo-weiss.svg') no-repeat;
       background-size: cover;
       transform: translateX(-60%);
       transition: bottom 2s ease-out;
       z-index: 4;
   }
   .emr {
       width: 100%;
       max-width: 600px;
       background-color: #fff;
       border-radius: 15px;
       padding: 15px;
       display: table; /* Verhindert Layout-Probleme mit Float */
   }

   .emr-logo {
       width: 100px; /* Logo-Größe */
       height: auto;
       display: table-cell; /* Ermöglicht Ausrichtung in einer Zeile */
       vertical-align: middle;
       padding-right: 15px;
   }

   .emr-content {
       display: table-cell; /* Hält Text und Button in der gleichen Zeile */
       vertical-align: middle;
   }

   .emr p {
       margin: 5px 0;
   }

   .emr-button {
       background-color: #61A60E;
       display: inline-block;
       margin-top: 10px;
       text-decoration: none;
   }

   /* Mobile Ansicht: Alles untereinander */
   @media (max-width: 767px) {
       .emr {
           display: block; /* Zurück zu Block-Layout */
           text-align: center;
       }

       .emr-logo {
           display: block;
           margin: 0 auto 10px auto; /* Logo zentrieren */
           float: none; /* Kein Float auf Mobile */
       }

       .emr-content {
           display: block;
           text-align: center;
       }

       .emr-button {
           display: block;
           width: 100%;
           text-align: center;
       }
   }
 /* Media Queries für mobile Geräte */
 @media (max-width: 768px) {
     .cloud.small {
         width: 200px; /* Kleinere Wolken für mobile Geräte */
         height: 100px;
         left: 10%; /* Bleibt links */
         bottom: 40px; /* Etwas höher setzen */
     }

     .cloud.large {
         width: 500px; /* Anpassung der grösseren Wolke */
         height: 125px;
         left: 40%; /* Linksposition leicht anpassen */
         bottom: 0;
     }

     .sun {
         width: 350px; /* Kleinere Sonne auf mobilen Geräten */
         height: 250px;
         left: 50%; /* Zentriert */
         transform: translateX(-50%); /* Korrektur für Mitte */
         bottom: 0;
     }
 }

 /* Noch kleinere Geräte wie Smartphones */
 @media (max-width: 480px) {
     .cloud.small {
         width: 150px;
         height: 80px;
         left: 5%; /* Noch etwas linksbündiger */
         bottom: 30px;
     }

     .cloud.large {
         width: 400px;
         height: 100px;
         left: 30%;
         bottom: 0;
     }

     .sun {
         width: 320px;
         height: 210px;
         left: 50%;
         transform: translateX(-50%);
         bottom: 0;
     }
 }
/* Hintergrund */
   .bg-dark1 {
       background-color: #867C61;
   }
   .bg-primary {
       background-color: #867C61;
   }
 /* Button */
   .btn {
       background-color: #867C61;
       border: none;
   }
   .btn-primary {
       background-color: #867C61;
       border: none;
   } 
   .btn:hover {
       background-color: #605742;
       border: none;
   } 
   .btn:active {
       background-color: #544B34;
       border: none;
   }
 /* Link-Farbene */
   a {
       color: #867C61;
   }
   a:hover {
       text-decoration: none; 
       color: #605742; 
   }
   a:active {
       color: #544B34; 
   }	
   .gruen   {
       color: #867C61;
   }
   
 /* Biografie */
 .biografie {
   color: #4b2e2c;
   background-color: #deba89;
   width: 100%;
 }
 .buch {
     padding: 0 20px;
 }
 .text-center {
   text-align: center;
 }
 .text-center-text {
   text-align: center;
   width: 50%;
 }
 .text-center-text-bio {
   text-align: center;
   width: 50%;
   margin: auto;
 }
 .text-center-bio {
   margin-top: 40px;
   text-align: center;
 }
 .highlight-box-bio {
   background-color: #f0e5d1;
   padding: 20px;
   border-radius: 5px;
   margin: 20px auto; /* Zentriert die Box horizontal */
   width: 50%; /* Setzt die Breite der Box auf 60% */
   text-align: center;
 }
 .angebot-list-bio {
   list-style-type: none;
   padding: 0;
 }
 .angebot-list-bio li {
   margin: auto;
   width: 100%;
   background-color: #f0e5d1;
   margin: 10px 0;
   padding: 10px;
   border-radius: 5px;
   font-size: 1.1em;
 }
 .angebot-list-bio li i {
   color: #4b2e2c;
   margin-right: 10px;
 }
 .custom-bio {
   background-color: #3B6B4C;
   color: #ffffff; 
   border: none; 
   padding: 10px 20px; 
   border-radius: 5px; 
   font-size: 1.2em; 
   cursor: pointer; 
   transition: background-color 0.3s ease;
 }

 .custom-bio:hover {
   background-color: #355B43; 
 }

 /* Flex-Box Intro */
   .flex-container {
       display: flex;
   }
   .flex-container .left-column {
       flex: 2; /* Linke Spalte nimmt 2/3 des Platzes ein */
       margin-right: 40px;
	 text-align: justify;
   }
   .flex-container .right-column {
       flex: 1; /* Rechte Spalte nimmt 1/3 des Platzes ein */
	 display: fley;
	 justify-content: center;
	 align-items: center;
   }
 /* Elefant schwimm Titel und Text*/
 .flex-elefant {
     display: flex;
     flex-direction: column; /* Macht die Flexbox zu einer Spalte */
     align-items: flex-start; /* Ausrichtung des Inhalts nach links */
 }
 .title {
	 margin-top:30px;
	 margin-bottom: 20px;
     width: 100%;
	 text-align: center;
 }
 .text-columns {
     display: flex;
     flex-direction: row;
     width: 100%;
     margin-top: 20px; /* Abstand zwischen Titel und Text */
 }	
 .left-column {
     flex: 1;
     padding-right: 10px;
	 text-align: justify;
	 margin-top: 20px;
 }
 .right-column {
     flex: 1;
     padding-left: 10px;
	 text-align: justify;
	 margin-top: 20px;
 }	
 	 
/* schaukelnder Elefant */         
.custom-container {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     flex-wrap: wrap; 
}

.left-column {
     flex: 1;
     padding: 20px;
}

.moveo {
     margin-bottom: 30px;
}

.kugeln {
     display: flex;
     flex-direction: column; 
     justify-content: flex-end; 
     align-items: center;
     position: relative;
     flex: 1 1 auto; 
     height: 100%; 
	 margin-top: auto;
}

.liegifant {
     display: inline-block;
     animation: swing 3s ease-in-out infinite;
     transform-origin: center bottom;
	 z-index: 15;
}

@keyframes swing {
/*  0% { transform: rotate(0deg); } */
  25% { transform: rotate(5deg); }
/*  50% { transform: rotate(1deg); } */
  75% { transform: rotate(-5deg); }
/*  100% { transform: rotate(0deg); } */ 
}

.swing-element {
  animation: swing 2s ease-in-out infinite;
}

@media (max-width: 768px) {
.custom-container {
     flex-direction: column; 
     }
.kugeln {
     justify-content: center; 
     align-items: center;
        height: auto; 
    }
}
.wuerfel-container {
    position: relative;
    width: 100px;
    height: 150px;
    margin-top: -8px;
}

.wuerfel {
    position: absolute;
    width: 80px;
    height: 80px;
    transition: transform 0.3s ease;
}

.wuerfel1 {
    top: 0;
    left: 50;
	background-color: #f39c12;
}

.wuerfel2 {
    top: 80px;
    left: -20px;
	background-color: red;
}

.wuerfel3 {
    top: 80px;
    left: 70px;
	background-color: green;
}

.wuerfel:hover {
    transform: translateY(-20px) rotate(10deg);
}
 /* Elefant mittig Yoga */
 .container-spalte {
	 background-color: #e0ddd0;
 }
 .center-image-container {
	 position: relative;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     height: 100%; /* Stellt sicher, dass das Bild vertikal zentriert ist */
 }
 .central-image {
     max-width: 100%; /* Bildbreite auf 100% des Containers beschränken */
     max-height: 400px; /* Maximalhöhe des Bildes */
     position: absolute;
     top: 20px; /* Abstand nach oben */
     transform: translateY(20px); /* Standardverschiebung für Mobilgeräte */
 }		
   .content-section1 {
       background-color: #867C61;
       padding: 20px;
   }
   /* Carousel */
   .carousel-caption {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 100%;
       color: #fff;
   }
   /* Links positionierter Text */
   .carousel-text-left {
       left: 10%; /* Abstand von links */
       right: 50%; /* Abstand von rechts auf 50% setzen, um Text auf der linken Seite zu halten */
       text-align: left;
   }
   /* Rechts positionierter Text */
   .carousel-text-right {
       right: 10%; /* Abstand von rechts */
       left: 50%; /* Abstand von links auf 50% setzen, um Text auf der rechten Seite zu halten */
       text-align: right;
   }
   /* Hintergrund des Carousel Textes */
   .carousel-caption-backdrop {
       display: inline-block;
       background-color: rgba(0, 0, 0, 0.5);
       padding: 10px 20px;
       border-radius: 10px;
   }	 
   /* Container für den Parallax-Pattern */       
   .parallax-section-1 {
       position: relative;
       width: 100%;
       height: 600px; 
       background-image: url('bilder/pmt-raum.webp');
   /*    background-attachment: fixed; */
       background-position: center;
       background-repeat: repeat;
       background-size: auto;
   }
   .parallax-section-2 {
       position: relative;
       width: 100%;
       height: 512px; 
	 background-image: url('bilder/wellen_blau_pattern.webp');
       background-position: center;
       background-repeat: repeat;
       background-size: auto;
 }		 
   .overlay-links {
       position: absolute;
       top: 0;
       left: 0;
       width: 50%; /* bis zur Mitte */
       height: 100%;
       background-color: rgba(26, 29, 54, 0.5); 
       display: flex;
       align-items: center;
       padding: 20px;
   }
   .overlay-text-links {
       color: white;
       font-size: 2.5em;
   }
   .overlay-rechts {
       position: absolute;
       top: 0;
       right: 0; /
       width: 50%; /* bis zur Mitte */
       height: 100%;
       background-color: rgba(65, 116, 172, 0.8); 
       display: flex;
       align-items: center;
       padding: 20px;
   }
   .overlay-text-rechts {
       color: white;
       font-size: 24px;
       text-align: right; /* Text rechtsbündig ausrichten */
   }
 
/* Container für die schwimmender Elefant-Animation */
 .parallax-container {
  	height: 30vh; /* Vollbild Höhe */
  	overflow: hidden; 
  	position: relative; /* Relativ für die Positionierung des SVG */
}
/* Allgemeine Stile (Desktop/Tablet) */
	.parallax-svg {
	 position: absolute;
	 width: 280px; 
	 left: -50%; /* Startposition ausserhalb des Bildschirms für Desktop */
	 top: 60%;  /* Zentriert vertikal */
	 transform: translateY(-50%);
	 clip-path: inset(0);
	 z-index: 10; /* zwischen den Wellen */
 }
 .parallax-wave,
 .parallax-wave-above {
     position: absolute;
     width: 100%; /* Wellen Breite Bildschirm*/
     left: 0; 
     bottom: 0; /* ganz unten am Rand! */
     transform: none; /* Vertikale Zentrierung */
 }
 /* Die Wellen übereinander */
 .parallax-wave-above {
     z-index: 11; 
 }
 .parallax-wave {
	 z-index: 8; 
     bottom: -30px;
 }		 
 /* Mobile Anpassungen */
 @media (max-width: 768px) {
     .parallax-svg {
		 position: absolute;
         width: 180px; /* Elefant etwas kleiner */
         top: 80%; /* Elefant etwas höher */
         left: -270% !important; /* Elefant weiter nach hinten */
  		 transform: translateY(-50%);
  		 clip-path: inset(0);
  		 z-index: 10; 
     }

     .parallax-wave,
     .parallax-wave-above {
		 left: -10; 
         bottom: 0; 
     }
 }		 
 /* Animation für den Elefanten */
   @keyframes slide-in-out {
       0%, 100% {
           transform: translateX(-100%);
       }
       50% {
           transform: translateX(100%);
       }
   }		 		
   /* Reihenfolge drei Spalten mit Yogifant in der Mitte */
   @media (max-width: 768px) {
       .mb-n5 {
           margin-bottom: -5rem; /* Negative Margin, anpassen */
       }
   }
   /* Standard Textausrichtung für mobile Geräte */
   .text-align-right-md {
     /*   text-align: left; oder 'center' je nach Bedarf */
	 text-align: justify;
  	 }
 /* Media Query für md Größe und größer */
@media (min-width: 768px) {
.text-align-right-md {
  /* 	text-align: right;  Rechtsausrichtung für Desktop und Tablet */
	text-align: justify;
	}
.central-image {
	 top: 50px; /* Abstand nach oben */
  	 transform: translateY(80px); /* Größere Verschiebung für größere Bildschirme */
	}
}
   .central-image {
       transform: translateY(20px); /* Standardverschiebung für Mobilgeräte */
       max-width: 100%; /* Bildbreite auf 100% des Containers beschränken */
       max-height: 300px; /* Maximalhöhe des Bildes */
   }
   .text-align-left {
   	text-align: justify;
   }
   /* Container für den Parallax-Bereich */
   .parallax {
     display: flex;
     justify-content: center;
     align-items: center;
       background-image: url('bilder/ginko.jpg');
       height: 350px; 
       background-attachment: fixed;
       background-position: center;
       background-repeat: repeat;
       background-size: auto;
   }
   /* Container mit vier Abschnitten */
   .content-section {
       background-image: url('https://via.placeholder.com/1200x600?text=Hintergrundbild');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
       padding: 20px 0; /* Etwas Abstand oben und unten */
   }
 .card-img-top { 
     width: 100%; /* Stellt sicher, dass das Bild die Karte ausfüllt */
     height: 150px; /* Fixe Höhe für die Bilder */
     object-fit: cover; /* Sorgt dafür, dass die Bilder gut aussehen */
  } 
   /* Container für den Textbereich */
   .text-section-mitte {
	 position: relative;
       color: #ffffff;
       background-color: #333;
       padding: 50px 80px;
       text-align: justify;
   }
 .text-section-mitte i {
	 color: #ffffff;
     position: absolute;
     right: 10%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 142px; /* Icons Grösse */
     color: inherit; /* Übernimmt die Textfarbe vom Parent-Element */
 }
   #map {
       height: 520px; /* Höhe der Karte */
       width: 100%; /* Volle Breite innerhalb des Containers */
   }
   #myBtn {
       display: none;
       position: fixed;
       bottom: 20px;
       right: 30px;
       z-index: 99;
       cursor: pointer;
       fill: #DD87C9; /* Ändern Sie die Farbe des SVG */
   }
   #myBtn:hover {
       fill: #555;
   }
 .blogger {
	 margin-bottom: 25px;
 }
 .gruen1 {
	 color: #3bb7ab;
 }
 .blau {
	 color: #2e4b2d;
 }
 .ethik {
	 font-size: 0.7em;
	 font-style: italic;
	 font-weight: 700;
	 margin-top: 10px;		 
 }
 .cta-button {
   background-color: #E67E22; /* Kräftiges Orange */
   width: 40%;
   color: #FFFFFF; /* Weißer Text */
   padding: 15px 30px;
   border: none;
   border-radius: 5px;
   font-size: 1.2em;
   font-weight: bold;
   cursor: pointer;
   text-align: center;
   text-decoration: none; /* Entfernt Unterstreichung bei Links */
   display: inline-block;
   margin-top: 20px;
   margin: auto;
   transition: background-color 0.3s ease; /* Weicher Übergang */
 }
 .cta-button:hover {
   background-color: #D35400; /* Dunkleres Orange beim Hover */
 }
 
 .highlight-box {
	 width: 80%;
     background-color: #f9f9f9; 
     border: 2px solid #ccc;    
     padding: 20px;                      
     text-align: center;        
     font-size: 1em;          
     border-radius: 10px;       
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 }
 .eltern {
	 margin-left: 40px;
	 padding: 10px 60px;
	 text-align: center;
 }
 .eltern-left {
	 padding-right: 60px;
 }
 .eltern-right {
	 padding-left: 60px;
 }
 .eltern-klein {
	 text-align: center;
	 font-size: 0.7em;
	 font-style: italic; 
 }
 .custom-eltern {
     background-color: #3bb7ab; 
     border: none;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
	 cursor: pointer;
     margin: 4px 2px;
     cursor: pointer;
     border-radius: 12px; 
	 transition: background-color 0.3s ease;
 }
 .custom-eltern:hover {
     background-color: #c70039; 
 }
 .moveo-box {
	 display: block;
	 width: 80%;
     background-color: #f9f9f9; 
     border: 2px solid #3bb7ab;    
     padding: 20px;                      
     text-align: center;        
     font-size: 1em;          
     border-radius: 10px;       
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
	 margin-top: 80px; 
	 margin-bottom: 80px; 
	 margin-left: auto; 
	 margin-right: auto; /* Automatische horizontale Zentrierung */		
 }		 
 .container-main {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 15px;
 }
 .flex-container {
     display: flex;
     flex-wrap: wrap;
 }
 .left-column, .right-column {
     flex: 1;
 }
 .highlight-box, .eltern, .biografie, .container-spalte, .content-section1, .text-section-mitte {
     max-width: 1400px;
     margin: 0 auto;
 }
 .yoga-text {
	 width: 60%;
	 background-color: #f9f9f9; 
	 border: 2px solid #ccc;    
	 padding: 20px;                    
	 text-align: center;        
	 font-size: 1em;          
	 border-radius: 10px;       
	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 }
 .container-spruch {
     display: flex;
     flex-direction: column; /* Für kleinere Bildschirme untereinander anordnen */
     align-items: center;    /* Zentriert die Inhalte */
 }

 .container-spruch h1 {
     font-size: 2rem; /* Angepasste Schriftgrösse für kleinere Bildschirme */
 }

 .container-spruch i {
     font-size: 9rem; /* Grösse des Icons */
     margin-top: 1rem; /* Abstand zum Text */
 }

 @media (max-width: 768px) {
     .container-spruch {
         flex-direction: column; /* Stellt sicher, dass Text und Icon untereinander sind */
     }
 }
 /* Testimonial Styles */
 .testimonial-section {
     margin-bottom: 4rem;
 }

 .testimonial-section[data-category="yoga"] .testimonial-card { 
     background-color: #F7B2EA;
     color: #333;
 }

 .testimonial-section[data-category="psychomotorik"] .testimonial-card { 
     background-color: #3bb7ab;
     color: #fff;
 }

 .testimonial-section[data-category="minimoveo"] .testimonial-card { 
     background-color: #867C61;
     color: #fff;
 }

 .testimonial-section[data-category="lebensbuch"] .testimonial-card { 
     background-color: #F9D2F1;
     color: #333;
 }

 .testimonial-card {
     position: relative;
     padding: 2rem;
     border-radius: 15px;
     margin-bottom: 1.5rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .testimonial-card:hover {
     transform: translateY(-5px);
 }

 .testimonial-header {
     display: flex;
     align-items: center;
     margin-bottom: 1.5rem;
 }

 .profile-image {
     width: 80px;
     height: 80px;
     margin-right: 1rem;
     overflow: hidden;
     border-radius: 50%;
     border: 3px solid #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .profile-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .category-icon {
     position: absolute;
     top: 1rem;
     right: 1rem;
     width: 40px;
     height: 40px;
 }

 .category-icon img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .quote-marks {
     position: absolute;
     top: 0.5rem;
     left: 1rem;
     font-size: 3rem;
     color: rgba(255, 255, 255, 0.2);
     font-family: serif;
 }

 .testimonial-content {
     position: relative;
     z-index: 1;
     font-style: italic;
     margin-bottom: 1rem;
     line-height: 1.6;
 }

 .testimonial-author {
     text-align: right;
     opacity: 0.9;
     font-size: 0.9em;
 }

 .category-title {
     position: relative;
     display: inline-block;
     margin-bottom: 2rem;
     padding-bottom: 0.5rem;
     color: #867C61;
 }

 .category-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 2px;
     background-color: currentColor;
 }

 @media (max-width: 768px) {
     .testimonial-card {
         margin: 1rem;
     }
    
     .profile-image {
         width: 60px;
         height: 60px;
     }
    
     .category-icon {
         width: 30px;
         height: 30px;
     }
 }