:root {
  --cassiopeia-color-primary: #ffffff;
  --cassiopeia-color-title: #7e9e41;
  --cassiopeia-color-link: #7e9e41;
  --cassiopeia-color-hover: #77a029;
  --cassiopeia-color-bg: #f1f3f3;
  --cassiopeia-color-blackbg: #313e4f;
  --cassiopeia-color-text: #111111;
  --cassiopeia-color-grey: #313e4f;
  --cassiopeia-color-lila: #7c2c61;
  --cassiopeia-color-green: #9fce47;
  --body-bg: #ffffff;
  --link-color: #7e9e41;
  --link-color-hover: #77a029;
  --link-hover-color: #7e9e41;
}
/*#9fce47*/
/*#7e9e41*/
    
#cookiehintsubmit, #cookiehintsubmitno {
    background-color: #9fce47 !important;
    color: #fff !important;
}
#cookiehintsubmit:hover, #cookiehintsubmitno:hover {
    background: #749a2c !important;
    color: #fff !important;
}


.btn-secondary{

  --btn-color: #ffffff;
  --btn-hover-color: #ffffff;
  --btn-bg: #7c2c61;
  --btn-hover-bg: #6d1851;
  --btn-hover-border-color: #6d1851;
  
}

li.metismenu-item span.mod-menu__heading{

    color: #ccc;
    font-size: 0.8rem;
}

li.metismenu-item .eingerueckt {
    margin-left: 15px;
}

/* Container für das gesamte Layout */
.leistungen-container {
    display: flex;
    flex-wrap: wrap; /* Wichtig: Ermöglicht den Zeilenumbruch */
    gap: 2px; /* Abstand zwischen allen Spalten */
    width: 75%;
    margin: 40px auto;
}

.leistungen-container i{

    font-size: 3em;
}

.flexcard a, .leistungen-container a{

  text-decoration: none;
}

a div.green, a div.lila{

  transition: background-color 0.5s ease-in-out; /* Die Transition-Eigenschaft */
}

a div.green:hover{

  background-color: #6e9c18;
}

a div.lila:hover{

  background-color: #5a1b45;
}

.leistungen-item{

   transition: background-color 0.5s ease-in-out; /* Die Transition-Eigenschaft */
}

.leistungen-item:hover{

  background-color: #7c2c61;
}

img.border{

  border: 3px solid #ccc !important;
}

.hoverOpacityEffect{

  opacity: 0.6;
  transition: opacity 0.5s ease-in-out;
}

.hoverOpacityEffect:hover{

  opacity: 1;
}

/* Die Spalte, die 1/3 der Breite einnimmt */
.leistungen-spalte-1, 
.leistungen-spalte-3,
.leistungen-spalte-4,
.leistungen-spalte-5 {
    /* flex-grow: 1, flex-shrink: 1, basis-width: ca. 1/3 */
    flex: 1 1 calc(33.33% - 10px); /* Der 10px-Wert ist für den gap-Abzug */
}

/* Die Spalte, die 2/3 der Breite einnimmt */
.leistungen-spalte-2 {
    /* flex-grow: 2, flex-shrink: 1, basis-width: ca. 2/3 */
    flex: 1 1 calc(66.66% - 10px); /* Passt sich proportional an */
}

/* Grundlegendes Styling für alle Boxen */
.leistungen-box {
    width: 100%; /* Wichtig, damit die Box die Spalte komplett ausfüllt */
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box; /* Stellt sicher, dass Padding nicht die Breite ändert */
}

/* Spezielles Styling für die Boxen */
.leistungen-item {
    background-color: var(--cassiopeia-color-grey); /*#2b598b;*/
    color: white;
}

.leistungen-bildbereich {
    padding: 0;
    background-color: #f0f0f0;
    height: 400px;
}

.leistungen-bildbereich img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

div.columns-4 .blog-item:nth-child(even) {
  
  background-color: var(--cassiopeia-color-blackbg);
  color: #fff;
}

div.columns-4 .blog-item h2{
  
  padding: 10px;
  font-size: 1.3em;
}

div.columns-4 .blog-item:nth-child(even) h2{
  
  background-color: var(--cassiopeia-color-lila);
  color: #fff;
  padding: 10px;
  font-size: 1.3em;
}

div.columns-4 .blog-item{

  box-shadow: 1px 1px 13px 3px #ccc;
}

div.columns-4 .item-content {
  
  padding: 20px;
}

div.columns-4 .text-muted {
  
    color: #000 !important;
}

dt.article-info-term{

  display: none;
}

.article-info dd {
 
    background: #f1f1f1;
}

div.columns-4 .blog-item:nth-child(even) .article-info dd{

  background: #c4c4c45c;
}

div.columns-4 .blog-item:nth-child(even) .text-muted {
  
    color: #9fce47 !important;
}

.lazyUp, .lazyLeft, .lazyLeft1, .lazyLeft2, .lazyLeft3, .lazyRight {
    
    opacity: 0;
}

.lazyLeft, .lazyLeft1, .lazyLeft2, .lazyLeft3 {
    
    opacity: 0;
    left: 100px;
}

 .lazyRight{

    opacity: 0;
    left: -100px;
 }

.slideUp {
    opacity: 1;
    animation: slideUp 0.5s linear;
} 

.slideRight {
    opacity: 1;
    animation: slideRight 0.5s linear;
} 


    
@keyframes slideUp {
  
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
  
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideLeft {
  
    0% {
        position: relative;
       left: 100px;
        opacity: 0;
    }
  
    100% {
        position: relative;
        left: 0px;
        opacity: 1;
    }
}

@keyframes slideRight {
  
    0% {
        position: relative;
        left: -100px;
        opacity: 0;
    }
  
    100% {
        position: relative;
        left: 0px;
        opacity: 1;
    }
}

.slide-title, .typing-container {
   
    opacity: 0;
    animation: slideLeft 0.5s 1s linear forwards;
    /* width: 0; */
    /* overflow: hidden; */
    /* white-space: nowrap;  */
    /*border-right: .01em solid #a5c615; /* Simuliert den blinkenden Cursor */
    /* animation:  */
        /* typing 4s steps(30, end) forwards, /* Animation der Breite */ */
        /* blink-caret .75s step-end infinite; /* Animation des Cursors */ */
    
    /* display: inline-block; */
    /* #vertical-align: top; */

}

/* Die Haupt-Animation, die die Breite des Textes wachsen lässt */
/* @keyframes typing {
    from { width: 0 }
    to { width: 100% }
} */

/* Die Animation für den blinkenden Cursor */
/* @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #a5c615; }
} */

@keyframes draw-border {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

body{

  font-size: 18px;
}

body.itemid-101 .site-grid {
  min-height: 100vh; /* volle Höhe vom Viewport */
  /* background: url('/joomla5/images/roboter.png') no-repeat right bottom;
  background-size: 600px; */
}

.left.item-image {
  
    display: flex;
    align-items: center;
}

a.footer-link{

    width: fit-content;
    margin: auto;
}

a.footer-link:hover{

  text-decoration: underline !important;
}

a.btn-primary{

  color: var(--link-color);
  margin: auto;
}

div.main-bottom{

  border: 0;
}

.container-header{

  display: grid;
  grid-template-areas: 'container-below-top container-below-top';
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
  text-transform: uppercase;
}

.container-below-top {
    color: #999;
    background: #f5f5f5;
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    grid-area: container-below-top;
}

.nav-header{

    text-transform: uppercase;
    text-decoration: none;
}

a.brand-logo img {
    width: 140px;
}

h1,h2,h3,h4{

  font-weight: 100;
  color: var(--cassiopeia-color-title);
}

.flex{
    display: flex;
    align-items: center;
    gap: 6%;
    align-items: flex-start;
}

.flexcardwrapper{

    display: flex;
    align-items: center;
    gap: 2%;
    margin: auto;
}

.flexcard{

  flex:1;
}

.flexcard h3{

  color: #fff;
  font-weight: 400;
}

.flexcarddescription{

    padding: 30px;
    color: #fff;
}

.green{
  
    background-color: var(--cassiopeia-color-green);
}

.lila{
  
    background-color: var(--cassiopeia-color-lila);
}

.grey{
  
    background-color: var(--cassiopeia-color-grey);
}

.back-to-top-link{

  background-color: var(--cassiopeia-color-link);
}

.back-to-top-link:hover, .back-to-top-link:focus{

  background-color: var(--cassiopeia-color-hover);
}

.title{

  color: var(--cassiopeia-color-title);
}

.card-body {
    
  padding: 0px;
}

.container-header .navbar-toggler {
    color: #717171 !important;
}

.container-header .mod-menu {
    color: #717171 !important;
}

.slide-desc-text-default{

    padding: 7% !important;
    text-align: right !important;
    font-size: 1.8em !important;
    line-height: 1.3em !important;
}

.djslider-default .slide-desc{

  height: 100% !important;
}

.djslider-default .slide-desc-in{
  
    height: 100% !important;
}

.slide-desc-text-default .slide-title{

    font-size: 2.4em !important;
    line-height: 1.3em !important;
    margin-bottom: 28px !important;
    /* font-weight: 100 !important; */
}

.slide-desc-bg-default{

    height: 100% !important;
    opacity: 0.85 !important;
}

.slide-text{

  opacity: 0;
  animation: slideUp 0.5s 2s linear forwards;
  /*font-weight: 100 !important;*/
  font-size: 0.9em;
   
}

.animierter-strich{

  width: 0;
  height: 10px;
  border-bottom: 2px solid #9fce47;
  animation: draw-border 1.5s forwards;
  animation-delay: 2.5s; /* Startet die Animation nach 4 Sekunden */
}

.container-header{

  background-image: none;
}
.footer{
  background-color: var(--cassiopeia-color-blackbg);
  background-image: none;
}

footer div.title{

  font-size: 1.3em !important;
  margin: 0px 15px;
  color: var(--cassiopeia-color-link);
}

.certificatedetails {
    display: flex;
    flex-direction: row;
}

.openingTimes {
    display: flex;
    flex-direction: column;
    margin: 0px 15px;
}

footer div.contact-wrapper {
  display: flex;
}

footer div.contactdetails, footer div.certificatedetails{

  margin: 0px 15px;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin: 0px 15px;
}

.social-icons a {
  color: #adadad !important;
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #fff !important;
}

.greeninfobox{

    background-color: var(--cassiopeia-color-title);
    padding: 75px;
    color: #fff;
    font-weight: 400;
}

.greeninfobox h2{

    color: #ffffff;
    font-weight: 600;
    background: #7c2c61;
    display: inline-block;
    padding: 12px;
}

.infoboxneutral{

  padding: 25px;
  text-align: center;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  background: #f9f9f9;
}

.infobox{

  font-size: 1.2em;
  background-color: var(--cassiopeia-color-grey);
  padding: 75px;
  color: #fff;
  font-weight: 400;   
  margin-bottom: 16px;
}

.infobox h2, .infobox h3{

    color: #ffffff;
    font-weight: 600;
    background-color: var(--cassiopeia-color-lila);
    display: inline-block;
    padding: 12px;
}

#keinpassendesStellenangebot{
  
  font-size: 1.2em;
  box-shadow: 3px 3px 5px 1px #7c2c61;
  margin: 10px;
  margin-top: 100px;
}

.benefits {
  text-align: center;
  padding: 3rem 1rem;
}

.benefits h2 {
  font-size: 2rem;
  margin-bottom: 2.5rem;
  color: #555;
  letter-spacing: 2px;
}

.benefits-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}

.benefit-item {
  flex: 0 1 160px;
  text-align: center;
  color: #777;
}

.benefit-item i {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  color: #9ca3af; /* grau wie im Screenshot */
}

.oeffnungszeiten{

  padding: 3rem 0rem;
  color: #777;
  text-align: center;
}

.oeffnungszeiten h2{

    font-size: 2rem;
    color: #777;
    margin-bottom: 2.5rem;
    letter-spacing: 2px;
}

.oeffnungszeiten-wrapper{

    justify-content: center;
}

.oeffnungszeiten-inner{

    flex-direction: column;
}

.teambox {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 25px;
    justify-content: space-around;
    margin: 50px auto;
    width: 75%;
}

div.picWrapperWithVita {
    display: flex;
    flex-basis: 50%;
    flex-direction: column;
}

div.picWrapperWithVita img {
    display: block;
    height: fit-content;
}

div.contactbox {
    background: var(--cassiopeia-color-blackbg);
    padding: 20px 25px 30px 25px;
    width: 100%;
    position: relative;
    margin-bottom: 80px;
}

.contactbox{
  
    background-color: #393937;
    text-align: center;
}

.contactbox .name {
    color: #fff;
    font-size: 26px;
}

.contactbox .contactoverlay {
    position: absolute;
    right: 30px;
    height: 95px;
    margin-top: 10px;
}

.contactoverlay.flip-card {
    perspective: 1000px;
    width: 100%;
    height: 90px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateX(180deg);
}

.front, .back {
    position: absolute;
    right: 0;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: var(--cassiopeia-color-title);
}

.back a, .back a:hover{

  color: #fff;
  text-decoration: none;
}

.front {
    color: #fff;
    width: 150px;
    text-align: center;
    padding: 15px 20px;
}

.back {
    transform: rotateX(180deg);
    text-align: end;
    padding: 15px 20px;
}

.fa-address-card:before {
    content: "";
}

.fa, .fas, [class^=icon-], [class*=\ icon-], .far, .fal, .fad, .fab, .icon-joomla {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-variant: normal;
    text-rendering: auto;
    font-style: normal;
    line-height: 1;
    display: inline-block;
}

/* FAQ */
 .faq-container {
    margin: 20px auto;
  }
  .faq-item {
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden; /* Wichtig für die Animation */
  }
  .faq-question {
    padding: 10px;
    cursor: pointer;
    background-color: #a7a7a721;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .faq-question:hover {
    background-color: #e9e9e9;
  }
  .faq-answer {
    padding: 0 15px; /* Padding oben/unten für die Animation auf 0 setzen */
    background-color: #fff;
    border-top: 1px solid #ccc;
    max-height: 0; /* Standardmäßig ausgeblendet und für Animation vorbereitet */
    overflow: hidden; /* Wichtig für die Animation */
    transition: max-height 0.5s linear, padding 0.5s linear; /* Übergang für max-height und padding */
  }
  .faq-answer.active {
    max-height: 200px; /* Oder größer, je nach erwarteter Antwortlänge */
    padding: 15px; /* Padding wiederherstellen, wenn aktiv */
  }
  .faq-question::after {
    content: '+';
    transition: transform 0.3s;
  }
  .faq-question.active::after {
    content: '-';
    transform: rotate(180deg);
  }
/* FAQ Ende */

@media (width<=1690px) {

   .slide-desc-text-default .slide-title {
    
    font-size: 2.5em !important;
  }

  .slide-desc-text-default {
   
    font-size: 1.5em !important;
  }
}

@media (width<=1475px) {

   .slide-desc-text-default .slide-title {
    
    font-size: 1.5em !important;
  }

  .slide-desc-text-default {
   
    font-size: 1.2em !important;
  }

 
}

@media (width<=1170px) {

  .startseiteoeffnungszeiten{

    background: #ffffffeb;
  }
}

 
@media (min-width: 993px) and (max-width: 1475px) {

   footer{

    font-size: 0.8em;
  }

  div.contactbox .name{

    font-size: 20px;
  }

  div.contactbox .title{

    font-size: 16px;
  }
}

@media (min-width: 993px) and (max-width: 1155px) {

   .metismenu.mod-menu .metismenu-item {
    
    font-size: 0.9rem;
   }

   footer{

    font-size: 0.6em;
  }

  div.contactbox .title{

    font-size: 13px;
  }
}

@media (width>=992px) {
  
.infoboxneutral div{

  width: 50%;
  margin: auto;
}
  
.left.item-image {
   
    height: 235px;
}

.slideLeft {

    opacity: 1;
    animation: slideLeft 0.5s linear forwards;
}
  
.slideLeft1 {
    
    animation: slideLeft 0.5s linear forwards;
}

.slideLeft2 {
  
    animation: slideLeft 0.5s 0.5s linear forwards;
} 

.slideLeft3 {
    
    animation: slideLeft 0.5s 1s linear forwards;
} 
  
  .contentcontainer{

    width: 75%;
    margin: auto;
  }

  .startseiteoeffnungszeiten{

    margin-top: 200px;
  }

  div.main-bottom{
   
    margin: auto;
    margin-top: 200px;
    width: 75%;
  }

  footer .grid-child{
    align-items: flex-start !important;
    display: flex;
  }
}

@media (width<=991px) {

body.wrapper-fluid .site-grid {
    
  grid-gap: 0 1em;
}
  
footer div.title{

  text-align: center;
}

footer .social-icons, footer .nav, footer .grid-child {

  justify-content: center !important;
  align-items: center;
}
  
.leistungen-container {
    
    width: 100%;
}
  
.slideLeft {
    
    animation: slideLeft 1s linear forwards;
}
  
.slideLeft1 {
    
    animation: slideLeft 1s linear forwards;
}

.slideLeft2 {
  
    animation: slideLeft 1s linear forwards;
} 

.slideLeft3 {
    
    animation: slideLeft 1s linear forwards;
} 
  
  div.main-bottom{

    background: #ffffffe6;
  }
  
  body.itemid-101 .site-grid {
  
    background-size: 350px;
  }
  
  .float-end {
    
    float: none !important;
    text-align: right;
  }
  
  .container-header .container-nav .container-search,
  .container-header .container-nav nav {
   
    margin-top: 1em
  }

  .container-nav{

    justify-content: flex-end !important;
  }

  .navbar .navbar-toggler {
    
    font-size: 2em;
  }

  .offcanvas .metismenu.mod-menu .metismenu-item > ul {
    
    position: relative;
    width: 100%;
    margin-top: 1rem;
    box-shadow: 0 0 0 #fff;
  }

  .metismenu.mod-menu .metismenu-item.active>a, .metismenu.mod-menu .metismenu-item.active>button, .metismenu.mod-menu .metismenu-item>a:hover, .metismenu.mod-menu .metismenu-item>button:hover {
    
    text-decoration: none;
  }

  .flex {
    
    gap: 20px;
    flex-direction: column;
    align-items: center;
  }

  .flexcardwrapper {
    
    gap: 20px;
    flex-direction: column;
    width: 100%;
  }

  .teambox {
    
    gap: 20px;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .infobox, .infoboxneutral{

    padding: 20px;
    font-size: 1.0em;
  }
  #keinpassendesStellenangebot{

    padding: 20px;
    font-size: 1.0em;
  }

  body.wrapper-fluid header>.grid-child, body.wrapper-fluid footer>.grid-child {
    
    padding-left: 0;
    padding-right: 0;
    gap: 30px;
  }

  footer div.contactdetails, footer div.certificatedetails {

    text-align: center;
  }


  div.djslider {
        
    height: 250px !important;
  }
  
  .djslider-in li {
        
    height: 250px !important;
  }

  .djslider-default img.dj-image {
   
    height: 100% !important;
  }

  .djslider-default .slide-desc {
   
    width: 100% !important;
  }

  .slide-desc-text-default .slide-title {
    
    font-size: 1.3em !important;
    font-weight: 400 !important;
  }

  .slide-desc-text-default {
   
    font-size: 1.3em !important;
  }
}