.animation:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.animation {
    transition: all 0.3s ease;
}

.uk-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.uk-card, .jp-slide{
  transition: all 0.3s ease;
  border-radius: 20px;
}
.form-control, #adminForm .controls > textarea, #adminForm .controls > select, #adminForm .controls > input[type="text"], #adminForm .controls > input[type="password"], #adminForm .controls > input[type="datetime"], #adminForm .controls > input[type="datetime-local"], #adminForm .controls > input[type="date"], #adminForm .controls > input[type="month"], #adminForm .controls > input[type="time"], #adminForm .controls > input[type="week"], #adminForm .controls > input[type="number"], #adminForm .controls > input[type="email"], #adminForm .controls > input[type="url"], #adminForm .controls > input[type="search"], #adminForm .controls > input[type="tel"], #adminForm .controls > input[type="color"], #adminForm .controls > .uneditable-input, #adminForm .controls .field-calendar input[type="text"], #adminForm .controls .field-media-input {
  height: calc(1.8em + 14px);
  font-size: 14px;
  font-weight: 300;
  border: 1px solid #ddd;
}
.text-small, text-small a {
  font-size: .875rem;
}

.uk-slider-container-offset {
    margin: 0;
    padding: 0;
  }
  .border-top {
  border-top: none !important;
}
.item-title, .module-title {
  margin-bottom: 0.3rem;
}




/* Wir sprechen das Element mit deinen Klassen an */
.col-lg-6.vol-md-8.col-sm-12.animation {
  /* 1. Breite auf 80% setzen und mittig ausrichten */
  width: 80% !important;
  max-width: 80% !important;
  flex: 0 0 80% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;

  /* 2. STÄRKERE RUNDUNG HINZUFÜGEN */
  border-radius: 40px !important;
  /* Hier den Wert für noch mehr Rundung erhöhen */

  /* Optional: Ein etwas weicherer Schatten, der die runden Ecken betont */
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.07);
}

/* Für Mobilgeräte (damit es auf dem Handy nicht zu gequetscht aussieht) */
@media (max-width: 767px) {
  .col-lg-6.vol-md-8.col-sm-12.animation {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    border-radius: 20px !important;
    /* Auf dem Handy etwas weniger Rundung, damit kein Text abgeschnitten wird */
  }
}





/* --- Individuelle Farben für die Menüpunkte (Joomla 5 & Astroid) --- */

/* Start - Grün */
.astroid-nav .nav-item-id-101>a .nav-title-text {
  color: #085533 !important;
}

/* Homöopathik - Blau */
.astroid-nav .nav-item-id-246>a .nav-title-text {
  color: #234f79 !important;
}

/* Therapie - Hellgrün */
.astroid-nav .nav-item-id-247>a .nav-title-text {
  color: #87aa09 !important;
}

/* Praxis - Rot */
.astroid-nav .nav-item-id-248>a .nav-title-text {
  color: #C62828 !important;
}

/* Persönliches - Orange / Braun-Orange */
.astroid-nav .nav-item-id-249>a .nav-title-text {
  color: #da9200 !important;
}

/* Links - Grau / Olivgrau */
.astroid-nav .nav-item-id-250>a .nav-title-text {
  color: #78909C !important;
}



/* --- OPTIONAL: Verhalten beim Drüberfahren (Hover) --- */
/* Wenn du möchtest, dass die Farben beim Drüberfahren mit der Maus erhalten bleiben, 
   entferne einfach die "/*" und "*/
" in den folgenden Zeilen: */

/*
.astroid-nav .nav-item-id-101 > a:hover .nav-title-text { color: #2E7D32 !important; }
.astroid-nav .nav-item-id-246 > a:hover .nav-title-text { color: #1565C0 !important; }
.astroid-nav .nav-item-id-247 > a:hover .nav-title-text { color: #7CB342 !important; }
.astroid-nav .nav-item-id-248 > a:hover .nav-title-text { color: #C62828 !important; }
.astroid-nav .nav-item-id-249 > a:hover .nav-title-text { color: #EF6C00 !important; }
.astroid-nav .nav-item-id-250 > a:hover .nav-title-text { color: #78909C !important; }
*/

/* --- Individuelle Farben für das Mobil-Menü --- */

/* Start - Grün */
.astroid-mobile-menu .nav-item-id-101>a .nav-title-text {
  color: #085533 !important;
}

/* Homöopathik - Blau */
.astroid-mobile-menu .nav-item-id-246>a .nav-title-text {
  color: #234f79 !important;
}

/* Therapie - Hellgrün / Apfelgrün */
.astroid-mobile-menu .nav-item-id-247>a .nav-title-text {
  color: #87aa09 !important;
}

/* Praxis - Rot */
.astroid-mobile-menu .nav-item-id-248>a .nav-title-text {
  color: #C62828 !important;
}

/* Persönliches - Orange / Braun-Orange */
.astroid-mobile-menu .nav-item-id-249>a .nav-title-text {
  color: #da9200 !important;
}

/* Links - Grau / Olivgrau */
.astroid-mobile-menu .nav-item-id-250>a .nav-title-text {
  color: #78909C !important;