#Mod141::after { /* Balken 15px */
    content: "";
    display: block;
    height: 15px;
    background-color: #6f2c46;
    width: 100%;
    margin-top: 40px; 
   } 
#t4-footnav::before { /* Balken 15px */
    content: "";
    display: block;
    height: 15px;
    background-color: #6f2c46; 
    width: 100%; 
    margin-bottom: 20px; 
}

h2.mt-0.mb-4 { /* Überschrfit Animation */
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #6f2c46;
    position: relative;
    opacity: 0;
    animation: fallIn 1.5s ease-out forwards;
}
.meine-entspannungskurse-heading {  /* Überschrfit Animation Entspannungskurse */
    font-size: 2rem;
    font-weight: bold;
    color: #6f2c46;
    position: relative;
    opacity: 0;
    animation: fallIn 1.5s ease-out forwards;
}
@keyframes fallIn {  /* Überschrfit Animation Entspannungskurse */
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.mod-entspannung .mod-title {  /* Titel im Modul Entspannungskurse ausblenden */
    display: none;
}
.mein-beruflicher-weg-heading {   /* Überschrfit Animation Timeline */
    font-size: 2rem;
    font-weight: bold;
    color: #6f2c46;
    position: relative;
    opacity: 0;
    animation: fallIn 1.5s ease-out forwards;
}

/* Animation für die benutzerdefinierte Überschrift */
@keyframes fallIn {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


#Mod129 {
    background: linear-gradient(135deg, #f2d8e9, #6f2c46, #f2d8e9);
    background-size: 400% 400%;
    animation: gradientAnimation 12s ease infinite;
}

@keyframes gradientAnimation { 
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.testimonial-media {
    background-color: #f2d8e9; /* Kunden Feedback links */
}
.col-12.col-lg-6 {
    background-color: #f2d8e9; /* Kunden Feedback rechts */
}
#t4-section-1 {
    background-color: #f2d8e9!important; /* Ueber Mich */
}
#t4-section-2 {
    background-color: #f2d8e9!important;/* Arbeite gerne mit Menschen*/
}
.feature-media img {
    transition: transform 0.3s ease; /* Bilder Animation */
}

.feature-media img:hover {
    transform: scale(1.05); /* Bilder Animation */
     background-color: #f2d8e9; /* Background Bilder */
}

#Mod121 {
    background-color: #f2d8e9!important; /* Timeline */
}
.timeline-ct {
    background-color: #f7f3f4 !important;  /* Timeline Animation und Background der Kasten */
    padding: 20px;
    transition: transform 0.2s ease-in-out; /* Sanftere Übergänge Timeline */
}

.timeline-ct:hover {
    transform: scale(1.03); /* Vergrößert den Kasten um 3% Timeline */
}
#t4-footnav {
    background-color: #f2d8e9 !important; /* Footer*/
}

.header-block.header-block-2 {
    background-color: #f2d8e9 ; /* Menü Background*/
}

#t4-topbar {
    background-color: #6f2c46!important; /* Topbar*/
}
#t4-footer {
    background-color: #6f2c46; /* Grün */ /* Footer */
    width: 100%;  /* Volle Breite */
    padding-left: 0;  /* Kein Abstand links */
    padding-right: 0; /* Kein Abstand rechts */
    margin-left: 0;   /* Kein Abstand links */
    margin-right: 0;  /* Kein Abstand rechts */
}
/* Links im Footer-Menü weiß machen */
#t4-footer .mod-menu .nav-item a {
    color: white !important; /* Weiße Schriftfarbe für Links */
}

/* Links im Footer beim Hover auf eine andere Farbe ändern */
#t4-footer .mod-menu .nav-item a:hover {
    color: #c2a1a7 !important; /* Hellblaugrün beim Hover */
}

/* Text im Footer weiß machen */
#t4-footer .mod-footer .footer1, 
#t4-footer .mod-footer .footer2 {
    color: white !important; /* Weiße Schriftfarbe für den Footer-Text */
}

/* Links im Footer (Copyright & Joomla) weiß machen */
#t4-footer .mod-footer a {
    color: white !important; /* Weiße Schriftfarbe für Links im Footer */
}

/* Footer-Links beim Hover auf eine andere Farbe ändern */
#t4-footer .mod-footer a:hover {
    color: #c2a1a7 !important; /* Hellblaugrün beim Hover */
}
.mod-entspannung  .features-list  .fd-item-inner {
    background-color: #f6e4f0 !important; /* Setzt den Hintergrund auf #efe7e9 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Weiche Übergänge für Hintergrundfarbe und Transformation */
}

.mod-entspannung  .features-list  .fd-item-inner {
    background-color: #f6e4f0!important; /* Setzt den Hintergrund auf #efe7e9 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Weiche Übergänge für Hintergrundfarbe und Transformation */
}

/* Hover-Effekt für fd-item-inner */
.mod-entspannung  .features-list  .fd-item-inner:hover {
    background-color: #f6e4f0 !important; /* Setzt den Hintergrund auf #e0d0d2 bei Hover */
    transform: scale(1.05); /* Vergrößert das Element um 5% beim Hover */
}
/* Optional: Sanfte Vergrößerung beim Hover */
.mod-entspannung  .features-list  .fd-item-inner {
    transition: transform 0.3s ease; /* Weicher Übergang für die Skalierung */


.btn-yoga {
    display: inline-block; /* Damit es wie ein Blockelement wirkt */
    padding: 10px 20px; /* Abstand innerhalb des Buttons */
    background-color: #6f2c46; /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe */
    text-align: center; /* Text zentrieren */
    text-decoration: none; /* Entfernt den Standard-Link-Unterstrich */
    border-radius: 5px; /* Abgerundete Ecken */
    font-weight: bold; /* Fettschrift für den Text */
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}
.termin-btn:hover {
  background-color: white; /* Hintergrundfarbe wird weiß */
  color: black; /* Textfarbe wird schwarz */
  border: 1px solid #333; /* Rand bleibt dunkelgrau */
}
.btn-yoga:hover {
    background-color: #8a4b5d ; /* Hellerer Farbton für den Hover-Effekt */
      color: white; /* Textfarbe */
}
.btn-meditation {
    display: inline-block; /* Damit es wie ein Blockelement wirkt */
    padding: 10px 20px; /* Abstand innerhalb des Buttons */
    background-color: #6f2c46; /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe */
    text-align: center; /* Text zentrieren */
    text-decoration: none; /* Entfernt den Standard-Link-Unterstrich */
    border-radius: 5px; /* Abgerundete Ecken */
    font-weight: bold; /* Fettschrift für den Text */
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

.btn-meditation:hover {
    background-color: #8a4b5d; /* Hellerer Farbton für den Hover-Effekt */
    color: white; /* Textfarbe */
}
.btn-waldbaden {
    display: inline-block; /* Damit es wie ein Blockelement wirkt */
    padding: 10px 20px; /* Abstand innerhalb des Buttons */
    background-color: #6f2c46; /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe */
    text-align: center; /* Text zentrieren */
    text-decoration: none; /* Entfernt den Standard-Link-Unterstrich */
    border-radius: 5px; /* Abgerundete Ecken */
    font-weight: bold; /* Fettschrift für den Text */
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

.btn-waldbaden:hover {
    background-color: #8a4b5d; /* Hellerer Farbton für den Hover-Effekt */
    color: white; /* Textfarbe */
}
.btn-muskelentspannung {
    display: inline-block; /* Damit es wie ein Blockelement wirkt */
    padding: 10px 20px; /* Abstand innerhalb des Buttons */
    background-color: #6f2c46; /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe */
    text-align: center; /* Text zentrieren */
    text-decoration: none; /* Entfernt den Standard-Link-Unterstrich */
    border-radius: 5px; /* Abgerundete Ecken */
    font-weight: bold; /* Fettschrift für den Text */
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

.btn-muskelentspannung:hover {
    background-color: #8a4b5d; /* Hellerer Farbton für den Hover-Effekt */
    color: white; /* Textfarbe */
}

/* Desktop: 5 Icons nebeneinander */
@media (min-width: 992px) {
  /* Row als Flexbox */
  .ja-acm.acm-features .features-list.row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  /* Alle Bootstrap-Spalten neutralisieren */
  .ja-acm.acm-features .features-list.row > .col-12,
  .ja-acm.acm-features .features-list.row > .col-md-6,
  .ja-acm.acm-features .features-list.row > .col-lg-3,
  .ja-acm.acm-features .features-list.row > .fd-item {
    flex: 0 0 20% !important;   /* 5 nebeneinander */
    max-width: 20% !important;
    width: 20% !important;
    margin: 0 !important;
  }
}