.mod_events_latest_table td {
  padding: 6px 0;
}

.sp-menu-heading {
  color: #ffffff;
}
.sp-menu-heading:hover {
  color: #0091margin-left: 20px;5a;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: #ffffff;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a {
  color: #00915a;
}

/* Allgemeines */
.pagination {
    --bs-pagination-border-radius: 0px;
}
#sp-left .sp-module {
  border: 1px solid #9c9c9c;
  padding: 20px;
  border-radius: 0px;
  margin-top: 25px;
}
#sp-left .sp-module ul > li, #sp-right .sp-module ul > li {
  display: block;
  border-bottom: 1px solid #9c9c9c;
  padding-top: 15px;
}
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
  font-weight: normal;
  border-bottom: 1px solid #9c9c9c;
  margin: 0 0 10px 0px;
  padding-bottom: 10px;
}

/* HOME */

.home-page {

	/* ==========================================================================
	   2. Oberster Artikel (Leading Article / Hero Banner)
	   ========================================================================== */
	.articles-leadinghome-first .com-content-category-blog__item {
	  position: relative;
	  width: 100%;
	  height: 500px;
	  max-height: 500px;
	  overflow: hidden;
	  margin-bottom: 2rem;
	  color: #ffffff;
	  display: flex;
	  align-items: flex-end; /* Text unten platzieren */
	}

	/* Bild als Hintergrund-Hero */
	.articles-leadinghome-first .article-intro-image {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 1;
	  float: none; /* Old-School Float zurücksetzen */
	}
	 .article[itemprop="blogPost"] .article-intro-image {
       width: 100%;
       max-width: 100%;
	}
  .article-info {
    display: none;
  }

  .article-introtext .readmore a {
    color: #ffffff !important;
    border-radius: 0;
  }
  
.article-introtext .readmore a::before {
    color: #ffffff;
}

	.articles-leadinghome-first .article-intro-image a,
	.articles-leadinghome-first .article-intro-image img {
	  width: 100%;
	  height: 100%;
	  display: block;
	}

	.articles-leadinghome-first .article-intro-image img {
	  object-fit: cover;
	  object-position: center; /* Bild zentrieren und beschneiden */
	}

	/* Text-Overlay Container */
	.articles-leadinghome-first .article-body {
	  position: relative;
	  z-index: 2;
	  width: 100%;
	  padding: 2rem;
	  /* Sanfter dunkler Verlauf von unten nach oben für gute Lesbarkeit */
	  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100%);
	}

	.articles-leadinghome-first .article-header h2 {
	  margin: 0 0 0.5rem 0;
	  font-size: 1.8rem;
	  line-height: 1.2;
	}

	.articles-leadinghome-first .article-header h2 a,
    .articles-leadinghome-first .article-header h2 a:hover {
	  color: #ffffff;
	}

    article-info {
       display: none;
    }

	.articles-leadinghome-first .article-introtext p {
	  margin: 0 0 1rem 0;
	  font-size: 1rem;
	  line-height: 1.4;
	  max-width: 800px;
	}

	.articles-leadinghome-first .readmore a {
	  display: inline-block;
	  background-color: #00875a; /* Werder-Grün (oder deine Wunschfarbe) */
	  color: #ffffff;
	  padding: 0.5rem 1rem;
	  font-weight: 600;
	  transition: background-color 0.2s ease;
	}

	.articles-leadinghome-first .readmore a:hover {
	  background-color: #005c3d;
	}


	/* ==========================================================================
	   3. Untere 3 Artikel (Grid / Cards)
	   ========================================================================== */

	/* Karten-Look für die unteren Artikel */
	.home-article .article {
	  display: flex;
	  flex-direction: column;
	  background: #ffffff;
	  overflow: hidden;
	}

	/* Bild nimmt 100% der Spaltenbreite ein */
	.home-article .article-intro-image {
	  width: 100%;
	  height: 200px; /* Feste Höhe für einheitliche Karten */
	  overflow: hidden;
	  float: none; /* Standard Bootstrap Floats aufheben */
	}

    .home-article {
      .article[itemprop="blogPost"] .article-body {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
    .home-article .readmore a,
    .home-article .readmore a:before {
       color: #00875a !important;
    }

	.home-article .article-intro-image a,
	.home-article .article-intro-image img {
	  width: 100%;
	  height: 100%;
	  display: block;
	}

  .home-article .article-info {
    display: none;
  }

	.home-article .article-intro-image img {
	  object-fit: cover;
	  object-position: center;
	  transition: transform 0.3s ease;
	}

	.home-article .article:hover .article-intro-image img {
	  transform: scale(1.03); /* Dezenter Hover-Effekt auf dem Bild */
	}

	/* Textbereich UNTER dem Bild */
	.home-article .article-body {
	  padding: 1.25rem;
	  display: flex;
	  flex-direction: column;
	  flex-grow: 1; /* Füllt die Karte aus */
	}

	.home-article .article-header h2 {
	  margin: 0 0 0.5rem 0;
	  font-size: 1.2rem;
	  line-height: 1.3;
	}

	.home-article .article-header h2 a {
	  color: #1a1a1a;
	}

	.home-article .article-header h2 a:hover {
	  color: #00875a;
	}

	.home-article .article-introtext {
	  font-size: 0.9rem;
	  color: #444;
	  line-height: 1.5;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  flex-grow: 1;
	}

	.home-article .article-introtext p {
	  margin: 0 0 1rem 0;
	}

	.home-article .readmore {
	  margin-top: auto; /* Pusht den Button nach ganz unten */
	}

	.home-article .readmore a {
	  display: inline-block;
	  color: #00875a;
	  font-weight: 600;
	  font-size: 0.85rem;
	}

	.home-article .readmore a:hover {
	  text-decoration: underline;
	}


	/* ==========================================================================
	   4. Responsive Webdesign (für Smartphones & Tablets)
	   ========================================================================== */
	@media (max-width: 991px) {
	  .home-article .row {
		grid-template-columns: repeat(2, 1fr); /* Tablet: 2 Spalten */
	  }
	}

	@media (max-width: 600px) {
	  .home-article .row {
		grid-template-columns: 1fr; /* Mobil: 1 Spalte */
	  }

	  .articles-leadinghome-first .com-content-category-blog__item {
		height: 350px; /* Auf Smartphones etwas flacher */
	  }

	  .articles-leadinghome-first .article-header h2 {
		font-size: 1.3rem;
	  }
	}
}







/* Gallery */

.com-joomgallery-gallery,
#sp-main-body {
  .btn {
    box-sizing: border-box;
    appearance: none;
    background-color: transparent !important; /* Wichtig: Standard-Hintergrund erzwingen */
    border: 2px solid #00915a;
    border-radius: 0.6em;
    color: #00915a;
    cursor: pointer;
    display: inline-flex;
    align-self: center;
    font-size: 0.9rem;
    line-height: 1;
    margin: 20px;
    padding: 1.2em 2.8em;
    text-decoration: none;
    text-align: center;
    position: relative; /* Wichtig für das absolute absolute-Positionieren des Hovers */
    z-index: 1; /* Definiert die Basisebene */
    overflow: hidden; /* Schneidet das breiter werdende :after-Element an den Ecken ab */

    /* Nur wenn die Maus wirklich drüber ist, wird die Schrift weiß */
    &:hover {
      color: #fff !important;
    }

    /* Wenn der Button geklickt wurde/fokussiert ist, aber die Maus NICHT mehr drüber hovert */
    &:focus {
      color: #00915a !important; /* Zurück zur grünen Schriftfarbe */
      outline: 0 !important;
      background-color: transparent !important;
    }

    /* Falls der Button im geklickten Zustand UND gleichzeitig gehovert wird */
    &:focus:hover {
      color: #fff !important;
    }
    
    
  }
  
  .btn-outline-primary {
    .jg-icon-arrow-left-alt {
      padding-top: 6px;
    }
    border-color: #00915a;
    border-radius: 0; /* Überschreibt das runde Design der Basisklasse */
    color: #00915a;
    transition: color 150ms ease-in-out;
  
    &:after {
      content: '';
      position: absolute;
      display: block;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 100%;
      background: #00915a !important; /* Das Grün für den Hintergrund */
      z-index: -1; /* Liegt hinter dem Text, aber vor dem transparenten Button-Hintergrund */
      transition: width 150ms ease-in-out;
    }
  
    /* Wenn der Mauszeiger über den Button fährt */
    &:hover {
      color: #fff !important; /* Text wird weiß */
      
      /* Das grüne Hintergrund-Element breitet sich aus */
      &:after {
        width: 110%;
      }
    }
  }
}

/* News-Seite */

/* 1. Das Eltern-Element vorbereiten und den sanften Übergang für alle Unterelemente aktivieren */
.mod-articles-item-content {
    display: block;
}

/* 2. Den Link (Pfeil + Text) stylen */
.mod-articles-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #00915a;
    transition: transform 0.3s ease, color 0.3s ease;
    font-size: 0.875rem;
}

/* Der Pfeil vor dem Text (Größe + Abstand definieren die Einrückung des Datums) */
.mod-articles-link::before,
.calendar-row::before {
    content: "»"; /* Dein Pfeil-Icon → \203A */
    width: 20px;  /* Feste Breite für das Icon, um das Datum präzise auszurichten */
    color: #00915a;
    margin-right: 10px; /* Abstand zum Text */
    font-size: 1.25rem;
    font-weight: bold;
    display: inline-block;
}

.calendar-row::before {
    margin-right: 0;
}

/* 3. Das Datumsfeld exakt unter dem Text ausrichten */
.mod-articles-item-content .list-inline {
    /* Einrückung = Icon-Breite (20px) + Icon-Abstand (10px) = 30px */
    padding-left: 24px;
    margin-top: -3px;
    margin-bottom: 0;
    
    /* Auch das Datum soll weich gleiten */
    transition: transform 0.3s ease; 
}

/* 4. Der Hover-Effekt: Wenn man über die Zeile fährt, bewegt sich ALLES gemeinsam */
.mod-articles-item-content:hover .mod-articles-link {
    transform: translateX(8px);
    color: #00915a; /* Optional: Text färbt sich blau beim Hover */
}

.mod-articles-item-content:hover .list-inline {
    transform: translateX(8px); /* Das Datum bewegt sich exakt synchron mit */
}

.mod-articles-date,
.mod-events-latest-date{
    color: #9c9c9c;
    font-size: 0.75rem;
}

.mod-events-latest-date {
    margin-left: 20px;
}

.article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {
  margin: 0px 20px 20px 0px;
  border: none;
  width: 33%;
  float: left;
}
.article-list .article {
  position: relative;
  margin-bottom: 30px;
  padding: 0;
  border: 1px solid #9c9c9c;
  border-radius: 0px;
  border-left: none;
  border-right: none;
}
.article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img {
  border-radius: 0;
}

.article-body {
  padding-top: 20px;
}
.article-header h2:first-of-type {
  margin: 0 !important;
}
.article-introtext p {
  font-size: 0.875rem;
}


/* Container-Verhalten für die Desktop-Ansicht */
@media (min-width: 768px) {
    .article[itemprop="blogPost"] {
        display: flex;
        align-items: flex-start; /* Verhindert, dass das Bild unschön in die Länge gezogen wird */
        gap: 20px;               /* Abstand zwischen Bildspalte und Textspalte */
    }

    /* Das Bild-Container-Element nimmt exakt 33% ein */
    .article[itemprop="blogPost"] .article-intro-image {
        flex: 0 0 33%;
        max-width: 33%;
        margin: 0;               /* Setzt eventuelle Joomla-Standard-Margins zurück */
    }

    /* Das Bild selbst passt sich flexibel der 33%-Spalte an */
    .article[itemprop="blogPost"] .article-intro-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Der Text-Container nimmt den Rest des Platzes ein */
    .article[itemprop="blogPost"] .article-body {
        flex: 0 0 66%;
        max-width: 66%;
    }
}

/* Optionale Anpassung für mobile Geräte */
@media (max-width: 767px) {
    .article[itemprop="blogPost"] .article-intro-image {
        margin-bottom: 15px;    /* Abstand nach unten auf dem Handy, wenn Bild über Text rutscht */
        float: none !important; /* Deaktiviert das unschöne Umfließen auf kleinen Bildschirmen */
    }
}

/* Styling für den Weiterlesen-Link im Ausgangszustand */
.article-introtext .readmore a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease-in-out; /* Weiche Bewegung für das Hovern */
}

.article-introtext .readmore {
  margin-bottom: 10px;
}

/* Erzeugt das » Zeichen vor dem Text */
.article-introtext .readmore a::before {
    content: "»";
    margin-right: 8px; /* Abstand zwischen » und dem Text */
    display: inline-block;
    transition: transform 0.2s ease-in-out; /* Ermöglicht eine separate Bewegung des Zeichens */
    color: #00915a;
}

/* Hover-Effekt: Bewegt den gesamten Link leicht nach rechts */
.article-introtext .readmore a:hover {
    transform: translateX(4px); /* Bewegt den kompletten Button um 4px nach rechts */
    color: #00915a;
}

.article-list .article .readmore a {
    color: #00915a;
}

/* Das bricht das CSS aus deinem Entwurf, das den Fehler verursacht hat */
@media (min-width: 768px) {
  .history .article[itemprop="blogPost"] {
    display: block; /* Zurück auf Standard, damit das Layout nicht zerreißt */
  }
  .history .article[itemprop="blogPost"] .article-body {
    flex: none;
    max-width: 100%;
  }
}


.history h4 {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  color: #00915a;
  letter-spacing: 0px;
  text-decoration: none;
}

/* --- HIER IST DIE LÖSUNG FÜR DEIN HTML --- */

/* Wir machen JEDE Historie-Row zu einer Flexbox */
.historie-row {
    display: flex;
    flex-wrap: wrap;       /* Erlaubt das Weiterfließen der verschachtelten Rows nach unten */
    align-items: flex-start;
    width: 100%;
    margin-bottom: 15px;
}

/* Das Bild nimmt immer exakt 33% der Breite des Elternelements ein */
.historie-picture {
    flex: 0 0 33%;
    max-width: 33%;
    box-sizing: border-box;
    padding-right: 15px;
}

/* Stellt sicher, dass die Bilder sauber skalieren */
.historie-picture img {
    width: 100%;
    height: auto;
    display: block;
}

/* Der Textbereich daneben bekommt die restlichen 67% */
.historie-content {
    flex: 0 0 67%;
    max-width: 67%;
    box-sizing: border-box;
}

/* KARTE */


#OMapsID {
  z-index: 10;
}

#OMapsMarkerTABLEBODY {
  font-size: 0.875rem;
}

/* Erzwingt, dass die Tabelle exakt in der Box bleibt */
#sp-left .table {
    table-layout: fixed;
    width: 100% !important;
}

/* Erlaubt Zeilenumbrüche im Text und schneidet nichts ab */
#sp-left .table td {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

.sp-dropdown {
  z-index: 99;
}

.zhom-li-table-c1-markerList-advanced {
  padding: 5px 5px 0px 8px;
}

/* Zwingt die Tabellenzeilen und -zellen untereinander zu stehen */
#sp-left .member-list .table tr {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

#sp-left .member-list .table td {
    display: block;
    width: 100% !important;
    /* Entfernt störende Rahmenlinien zwischen den beiden Zellen */
    border-top: none !important; 
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: none;
}

/* Optional: Verpasst der Beschreibung (2. Zelle) etwas weniger Gewicht */
#sp-left .member-list .table td.zhom-li-table-c3-markerList-advanced {
    padding-bottom: 8px !important; /* Abstand zum nächsten Mitglied */
}

#sp-left .member-list .zhom-li-table-c3-markerList-advanced {
  color: rgb(156, 156, 156);
  font-size: 0.75rem;
}

#sp-left .member-list .zhom-li-table-c3-markerList-advanced p {
  margin-bottom: 0;
}

#sp-left .members-offer .ul_star,
#sp-left .members-advantage .ul_star {
    list-style: none;
    padding-left: 0;
}

#sp-left .members-offer .ul_star li,
#sp-left .members-advantage .ul_star li {
    position: relative;
    padding-left: 27px;
    margin-bottom: 5px;
    border-bottom: none;
    font-size: 0.775rem;
    padding-top: 5px;
}

/* Stern als Icon */
#sp-left .members-offer .ul_star li::before,
#sp-left .members-advantage .ul_star li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f005"; /* Font Awesome Stern */
    position: absolute;
    left: 0;
    top: 2px;
    color: #00a651; /* Knalliges Werder-Grün */
    font-size: 16px;
    transition: transform 0.4s ease-in-out;
}

/* Rotations-Animation bei Hover */
#sp-left .members-offer .ul_star li:hover::before,
#sp-left .members-advantage .ul_star li:hover::before {
    transform: rotate(144deg) scale(1.2);
    color: #ffcc00; /* Optional: Stern wird gold/gelb beim Hovern */
}

.convertforms .cf-content-wrap {
  padding: 0;
}

#sp-main-body #cf_1 form {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1.5;
}

#cf_1 form .member-form-text {
  margin-top: 30px;
  margin-bottom: 20px;
}

.members-link-img {
  display: inline-block;
}




/* --- Kontakt Modul Styling (#sp-left) --- */

#sp-left .contact-data ul > li, #sp-right .contact-data ul > li {
  padding-top: 0;
}

/* Listen-Struktur zurücksetzen */
#sp-left .contact-data .ul_arrow {
    list-style: none;
    padding-left: 0;
    margin-bottom: 10px;
    margin-top: 15px;
}

/* Basis-Styling für die Listeneinträge (Titelzeilen) */
#sp-left .contact-data .ul_arrow li {
    font-family: 'Anton', sans-serif;
    position: relative;
    padding-left: 28px; /* Platz für das Icon */
    font-size: 0.775rem;
    color: #00915a;
    padding-top: 2px;
}

/* --- DYNAMISCHE ICONS (GRÜN) --- */

/* 1. Icon für "Website" (Globus) */
#sp-left .contact-data .ul_arrow:nth-of-type(1) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-color: #00915a;
    /* SVG Globus */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9'/%3E%3C/svg%3E") no-repeat center;
}

/* 2. Icon für "E-Mail" (Briefumschlag) */
#sp-left .contact-data .ul_arrow:nth-of-type(2) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-color: #00915a;
    /* SVG Briefumschlag */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 002-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 002-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E") no-repeat center;
}

/* 3. Icon für "Facebook" (Daumen hoch / Teilen) */
#sp-left .contact-data .ul_arrow:nth-of-type(3) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 18px;
    background-color: #00915a;
    /* SVG Daumen-hoch (repräsentativ für Facebook/Social) */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2m0 10V10'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2m0 10V10'/%3E%3C/svg%3E") no-repeat center;
}

/* --- TEXTBLOCK-STYLING --- */

/* Abstände der Absätze unter den Listen korrigieren */
#sp-left .contact-data .mod-custom p {
    margin-bottom: 12px;
    line-height: 1.4;
    font-size: 0.775rem;
}

/* Spezielles Styling für die E-Mail-Namen (z.B. Philipp, Rene...) */
#sp-left .contact-data .mod-custom p strong {
    display: inline-block;
    margin-top: 4px;
}

/* Links (Mail und Web) */
#sp-left .contact-data .mod-custom a {
    color: #00915a;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

#sp-left .contact-data .mod-custom a:hover {
    color: #00915a;
    text-decoration: underline;
}

/* Datenschutz-Hinweis am Ende */
#sp-left .contact-data .mod-custom hr {
    border: 0;
    border-top: 1px solid #dee2e6;
    margin: 20px 0 10px 0;
}

#sp-left .contact-data li,
#sp-left .contact-data p {
  font-size: 0.775rem;
}

.calendar-row {
     font-size: 0.875rem;
}


/* Kalender */
#jevents_body {
  .nav-items > div:first-child {
     border-radius: 0;
     border-left: 1px solid #00915a;
   }

   .nav-items > div {
      border: 1px solid #00915a;
   }

   .nav-items > div a:hover {
      padding: 7px 12px 7px 12px;
      background-color: #CCC;
      border-left: 1px solid #00915a;
      color: #000;
   }

   .nav-items div.active a, .jev_header2 .active a {
      background-color: #00915a;
      color: #FFF;
   }
  
  .nav-items div.active a:hover, .jev_header2 .active a:hover {
     background-color: #FFF;
     border-left: 1px solid #00915a;
   }

  .jev_toprow div.previousmonth, .jev_toprow div.nextmonth {
     background-color: #00915a;
     border: 1px solid #00915a;
  }

  .jev_toprow div.currentmonth {
    border-top: 1px solid #00915a;
    border-bottom: 1px solid #00915a;
    margin-bottom: -1px;
  }
   .cal_today a.cal_daylink {
     background-color: #f27609;
     padding: 4px;
     border-radius: 10px;
     color: #FFFFFF;
   }

  .cal_today a.cal_daylink:hover {
    border-left: 1px solid #f27609;
    background-color: #fff;
    border: 1px solid #f27609;
    padding: 4px;
    border-radius: 10px;
    color: #f27609;
  }
  
}