/*
 * ============================================================
 * Cassiopeia Child Template
 *
 * user.css
 * Design: modern / traditionell / grün / weiß / gold
 * ============================================================
 */


/* ============================================================
   1. FARBEN & GRUNDVARIABLEN
   ============================================================ */

:root {
    --anstel-green: #3B5B49; /* #145c36;*/
    --anstel-green-dark: #273C30; /*#0b4527;*/
    --anstel-green-light: #7A8E83; /*#eaf2ed;*/
    --anstel-gold: #BFAD7C; /*#c9a832;*/

    --anstel-white: #ffffff;
    --anstel-text: #222222;
    --anstel-text-light: #666666;

    --anstel-gray: #f5f6f4;
    --anstel-border: #dfe4e0;

    --anstel-radius: 5px;

    --anstel-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08);

    --anstel-container: 1320px;
}


/* ============================================================
   2. ALLGEMEINE EINSTELLUNGEN
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--anstel-white);
    color: var(--anstel-text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.6;
}


/* Links */

a {
    color: var(--anstel-green);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: var(--anstel-green-dark);
}


/* ============================================================
   3. CONTAINER / SEITENBREITE
   ============================================================ */

.container {
    max-width: var(--anstel-container);
}


/* Cassiopeia Container */

.container-component,
.container-sidebar-left,
.container-sidebar-right {
    max-width: var(--anstel-container);
}




/* TOPBAR – gleiche Breite wie Hauptcontainer */

.container-topbar .container {
    max-width: var(--anstel-container);
    margin-left: auto;
    margin-right: auto;
}


/* slideshow ck banner zentrieren */
.container-banner .slideshowck {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* goldener balken unter der slideshow */
.container-banner::after {
    content: "";
    display: block;
    width: min(100%, var(--anstel-container));
    height: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--anstel-gold);
}

/* goldener balken über der slideshow */
/*.container-banner::before {
    content: "";
    display: block;
    width: min(100%, var(--anstel-container));
    height: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--anstel-gold);
}*/







/* ============================================================
   4. ÜBERSCHRIFTEN
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--anstel-green-dark);
    font-weight: 700;
    line-height: 1.25;
}

h1 {
    margin-bottom: 1.5rem;
}

h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

h3 {
    margin-bottom: 0.75rem;
}


/* ============================================================
   5. HEADER
   ============================================================ */

.container-header {
    background: var(--anstel-white);
    background-image: none;

    color: var(--anstel-text);

    padding: 0;
}


/* Header-Links */

.container-header a {
    color: var(--anstel-green-dark);
}

.container-header a:hover,
.container-header a:focus {
    color: var(--anstel-gold);
}


/* ============================================================
   6. BRANDING / LOGO
   ============================================================ */

.container-header .navbar-brand {
    display: flex;
    align-items: center;
}

.container-header .navbar-brand img {
    max-height: 125px;
    width: auto;
}


/* Titel */

.container-header .site-title {
    color: var(--anstel-green-dark);
    font-weight: 700;
}


/* Tagline */

.container-header .site-description {
    color: var(--anstel-text-light);
}


/* ============================================================
   7. HAUPTMENÜ
   ============================================================ */

.container-nav {
    background: var(--anstel-green);
    border: 0;
    padding: 0;
}


/* Menü */

.container-nav .mod-menu {
    margin: 0;
    padding: 0;
}


/* Hauptmenüpunkte */

.container-nav .mod-menu > li > a,
.container-nav .mod-menu > li > span {
    display: inline-flex;
    align-items: center;

    padding: 1rem 1.1rem;

    color: var(--anstel-white);

    font-size: 0.9rem;
    font-weight: 600;

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

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* Hover */

.container-nav .mod-menu > li > a:hover,
.container-nav .mod-menu > li > a:focus {
    background: var(--anstel-green-dark);
    color: var(--anstel-white);
}


/* Aktiver Menüpunkt */

.container-nav .mod-menu > li.active > a,
.container-nav .mod-menu > li.active > span {
    position: relative;

    background: var(--anstel-green-dark);
    color: var(--anstel-white);
}


/* Goldene Linie unter aktivem Menüpunkt */

.container-nav .mod-menu > li.active > a::after {
    content: "";

    position: absolute;

    left: 1rem;
    right: 1rem;
    bottom: 0;

    height: 3px;

    background: var(--anstel-gold);
}

/* Hellgrüne Standardlinie unter aktivem Menüpunkt entfernen */ .container-nav .mod-menu > li.active, .container-nav .mod-menu > li.active > a { border: none !important; box-shadow: none !important; } .container-nav .mod-menu > li.active > a::before { display: none !important; }



/* ============================================================
   9. HERO-BEREICH
   ============================================================ */

/*
 * Das Modul mit der Klasse "hero-banner"
 * enthält die Slideshow.
 */

.hero-banner {
    position: relative;

    width: 100%;

    min-height: 520px;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* Slideshow-Bilder */

.hero-banner img {
    display: block;

    width: 100%;
    height: 520px;

    object-fit: cover;
}


/* Falls der Slider einen Container verwendet */

.hero-banner .slider,
.hero-banner .slideshow,
.hero-banner .swiper,
.hero-banner .carousel {
    width: 100%;
    height: 520px;
}


/* Bilder innerhalb gängiger Slider */

.hero-banner .slider img,
.hero-banner .slideshow img,
.hero-banner .swiper img,
.hero-banner .carousel img {
    width: 100%;
    height: 520px;

    object-fit: cover;
}


/* ============================================================
   10. HERO – DUNKLER VERLAUF
   ============================================================ */

.hero-banner::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.48) 35%,
            rgba(0, 0, 0, 0.18) 65%,
            rgba(0, 0, 0, 0) 100%
        );
}


/* ============================================================
   11. HERO – TEXT OVERLAY
   ============================================================ */

.hero-overlay {
    position: absolute;

    z-index: 5;

    left: 6%;
    top: 50%;

    transform: translateY(-50%);

    width: auto;
    max-width: 560px;

    color: var(--anstel-white);
}


/* Hero Überschrift */

.hero-overlay h1,
.hero-overlay h2,
.hero-overlay h3 {
    margin-top: 0;

    color: var(--anstel-white);

    font-size:
        clamp(2.2rem, 4vw, 4rem);

    font-weight: 700;

    line-height: 1.1;
}


/* Hero Text */

.hero-overlay p {
    margin-top: 1rem;
    margin-bottom: 2rem;

    color: var(--anstel-white);

    font-size:
        clamp(1.1rem, 2vw, 1.6rem);

    line-height: 1.45;
}


/* ============================================================
   12. HERO – BUTTON
   ============================================================ */

.hero-overlay .btn {
    display: inline-block;

    padding: 0.8rem 1.5rem;

    background: var(--anstel-green);
    border: 1px solid var(--anstel-green);

    border-radius: var(--anstel-radius);

    color: var(--anstel-white);

    font-weight: 600;

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

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.hero-overlay .btn:hover,
.hero-overlay .btn:focus {
    background: var(--anstel-gold);
    border-color: var(--anstel-gold);

    color: var(--anstel-white);

    transform: translateY(-2px);
}


/* ============================================================
   13. SLIDESHOW NAVIGATION
   ============================================================ */

/*
 * Punkte und Pfeile des Sliders
 * bleiben grundsätzlich sichtbar.
 */

.hero-banner button,
.hero-banner .swiper-button-next,
.hero-banner .swiper-button-prev {
    z-index: 6;
}


/* Slider-Punkte */

.hero-banner .swiper-pagination,
.hero-banner .carousel-indicators {
    z-index: 7;
}


/* ============================================================
   14. HIGHLIGHT-BALKEN
   ============================================================ */

.highlight-bar {
    background: var(--anstel-green);

    color: var(--anstel-white);

    padding: 1.2rem 2rem;
}


/* Überschriften */

.highlight-bar h2,
.highlight-bar h3,
.highlight-bar h4 {
    margin: 0;

    color: var(--anstel-white);
}


/* Links */

.highlight-bar a {
    color: var(--anstel-white);
}

.highlight-bar a:hover,
.highlight-bar a:focus {
    color: var(--anstel-gold);
}


/* Highlight Button */

.highlight-bar .btn {
    background: transparent;

    border: 1px solid var(--anstel-white);

    color: var(--anstel-white);

    border-radius: var(--anstel-radius);
}


.highlight-bar .btn:hover,
.highlight-bar .btn:focus {
    background: var(--anstel-white);

    color: var(--anstel-green);

    border-color: var(--anstel-white);
}


/* ============================================================
   15. SEKTIONSÜBERSCHRIFTEN
   ============================================================ */

.section-title {
    position: relative;

    margin-bottom: 2rem;

    color: var(--anstel-green-dark);

    font-size: 2rem;
    font-weight: 700;
}


/* Goldene Linie */

.section-title::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin-top: 0.7rem;

    background: var(--anstel-gold);
}


/* ============================================================
   16. NEWS-BEREICH
   ============================================================ */

.news-card {
    height: 100%;

    overflow: hidden;

    background: var(--anstel-white);

    border: 1px solid var(--anstel-border);

    border-radius: var(--anstel-radius);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.news-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--anstel-shadow);
}


/* News-Bilder */

.news-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/* News-Inhalt */

.news-card-content {
    padding: 1.3rem;
}


/* News Überschrift */

.news-card h2,
.news-card h3,
.news-card h4 {
    margin-top: 0;

    color: var(--anstel-green-dark);
}


/* News Datum */

.news-card .date {
    color: var(--anstel-text-light);

    font-size: 0.85rem;
}


/* ============================================================
   17. TERMIN-BEREICH
   ============================================================ */

.events-list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.event-item {
    display: flex;
    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid var(--anstel-border);
}


.event-date {
    flex: 0 0 65px;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    min-height: 65px;

    background: var(--anstel-green);

    color: var(--anstel-white);

    border-radius: var(--anstel-radius);

    text-align: center;
}


.event-date .day {
    font-size: 1.5rem;
    font-weight: 700;

    line-height: 1;
}


.event-date .month {
    margin-top: 0.25rem;

    font-size: 0.7rem;

    text-transform: uppercase;
}


.event-title {
    margin: 0;

    color: var(--anstel-green-dark);

    font-weight: 700;
}


/* ============================================================
   18. FEATURE-KARTEN
   ============================================================ */

.feature-card {
    height: 100%;

    overflow: hidden;

    background: var(--anstel-white);

    border: 1px solid var(--anstel-border);

    border-radius: var(--anstel-radius);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.feature-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--anstel-shadow);
}


/* Bilder */

.feature-card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/* Inhalt */

.feature-card-content {
    padding: 1.3rem;
}


.feature-card h2,
.feature-card h3,
.feature-card h4 {
    margin-top: 0;

    color: var(--anstel-green-dark);
}


/* ============================================================
   19. HINTERGRUNDBEREICHE
   ============================================================ */

.section-light {
    background: var(--anstel-gray);

    padding-top: 4rem;
    padding-bottom: 4rem;
}


.section-white {
    background: var(--anstel-white);

    padding-top: 4rem;
    padding-bottom: 4rem;
}


.section-green {
    background: var(--anstel-green);

    color: var(--anstel-white);

    padding-top: 4rem;
    padding-bottom: 4rem;
}


.section-green h2,
.section-green h3 {
    color: var(--anstel-white);
}


/* ============================================================
   20. ALLGEMEINE BUTTONS
   ============================================================ */

.btn-primary {
    background: var(--anstel-green);

    border-color: var(--anstel-green);

    color: var(--anstel-white);

    border-radius: var(--anstel-radius);
}


.btn-primary:hover,
.btn-primary:focus {
    background: var(--anstel-green-dark);

    border-color: var(--anstel-green-dark);

    color: var(--anstel-white);
}


/* ============================================================
   21. FOOTER
   ============================================================ */

.footer {
    margin-top: 0;

    padding-top: 3rem;
    padding-bottom: 2rem;

    background: var(--anstel-green-dark);

    border-top: 4px solid var(--anstel-gold);

    color: var(--anstel-white);
}


/* Footer Überschriften */

.footer h2,
.footer h3,
.footer h4 {
    color: var(--anstel-white);
}


/* Footer Links */

.footer a {
    color: var(--anstel-white);

    text-decoration: none;
}


.footer a:hover,
.footer a:focus {
    color: var(--anstel-gold);
}


/* ============================================================
   22. FOOTER-BEREICHE
   ============================================================ */

.footer-column {
    padding: 1rem;
}


/* ============================================================
   23. BACK-TO-TOP
   ============================================================ */

.back-to-top {
    background: var(--anstel-green);

    color: var(--anstel-white);

    border-radius: 50%;
}


.back-to-top:hover {
    background: var(--anstel-gold);

    color: var(--anstel-white);
}


/* ============================================================
   24. FORMULARE
   ============================================================ */

.form-control,
.form-select {
    border: 1px solid var(--anstel-border);

    border-radius: var(--anstel-radius);
}


.form-control:focus,
.form-select:focus {
    border-color: var(--anstel-green);

    box-shadow:
        0 0 0 0.2rem rgba(20, 92, 54, 0.15);
}


/* ============================================================
   25. TABELLEN
   ============================================================ */

table {
    width: 100%;
}


table th {
    background: var(--anstel-green);

    color: var(--anstel-white);
}


table th,
table td {
    padding: 0.7rem;

    border: 1px solid var(--anstel-border);
}


/* ============================================================
   26. BILDER / MEDIEN
   ============================================================ */

img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   27. BARRIEREARMER FOKUS
   ============================================================ */

:focus-visible {
    outline: 3px solid var(--anstel-gold);

    outline-offset: 3px;
}


/* ============================================================
   28. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .container-header .navbar-brand img {
        max-height: 90px;
    }


    .hero-banner {
        min-height: 440px;
    }


    .hero-banner img,
    .hero-banner .slider,
    .hero-banner .slideshow,
    .hero-banner .swiper,
    .hero-banner .carousel,
    .hero-banner .slider img,
    .hero-banner .slideshow img,
    .hero-banner .swiper img,
    .hero-banner .carousel img {
        height: 440px;
    }


    .hero-overlay {
        left: 4%;
        max-width: 500px;
    }


    .container-nav .mod-menu > li > a,
    .container-nav .mod-menu > li > span {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}


/* ============================================================
   29. SMARTPHONE
   ============================================================ */

@media (max-width: 767.98px) {

    body {
        font-size: 1rem;
    }


    /* Header */

    .container-header .navbar-brand img {
        max-height: 75px;
    }


    /* Navigation */

    .container-nav {
        padding: 0.25rem 0;
    }


    /* Hero */

    .hero-banner {
        min-height: 360px;
    }


    .hero-banner img,
    .hero-banner .slider,
    .hero-banner .slideshow,
    .hero-banner .swiper,
    .hero-banner .carousel,
    .hero-banner .slider img,
    .hero-banner .slideshow img,
    .hero-banner .swiper img,
    .hero-banner .carousel img {
        height: 360px;
    }


    /* Hero Verlauf */

    .hero-banner::after {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.75),
                rgba(0, 0, 0, 0.30)
            );
    }


    /* Hero Text */

    .hero-overlay {
        left: 1.5rem;
        right: 1.5rem;

        max-width: none;
    }


    .hero-overlay h1,
    .hero-overlay h2 {
        font-size: 2rem;
    }


    .hero-overlay p {
        font-size: 1.1rem;

        margin-bottom: 1.5rem;
    }


    .hero-overlay .btn {
        padding: 0.7rem 1.2rem;

        font-size: 0.85rem;
    }


    /* Highlight */

    .highlight-bar {
        padding: 1rem;
    }


    /* Sektionen */

    .section-light,
    .section-white,
    .section-green {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }


    /* News */

    .news-card {
        margin-bottom: 1rem;
    }


    /* Features */

    .feature-card {
        margin-bottom: 1rem;
    }


    /* Footer */

    .footer {
        padding-top: 2rem;
    }
}


/* ============================================================
   30. KLEINE SMARTPHONES
   ============================================================ */

@media (max-width: 480px) {

    .hero-banner,
    .hero-banner img,
    .hero-banner .slider,
    .hero-banner .slideshow,
    .hero-banner .swiper,
    .hero-banner .carousel,
    .hero-banner .slider img,
    .hero-banner .slideshow img,
    .hero-banner .swiper img,
    .hero-banner .carousel img {
        height: 330px;

        min-height: 330px;
    }


    .hero-overlay {
        left: 1rem;
        right: 1rem;
    }


    .hero-overlay h1,
    .hero-overlay h2 {
        font-size: 1.8rem;
    }


    .hero-overlay p {
        font-size: 1rem;
    }
}


/* ============================================================
   31. JO Slideshow
   ============================================================ */

/* JO Slideshow auf 1320px begrenzen und proportional skalieren */
.hero-banner {
    width: 100%;
    max-width: 1320px;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1320 / 500;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* Slideshow und Bilder proportional skalieren */
.hero-banner .slider,
.hero-banner .slideshow,
.hero-banner .swiper,
.hero-banner .carousel,
.hero-banner img,
.hero-banner .slider img,
.hero-banner .slideshow img,
.hero-banner .swiper img,
.hero-banner .carousel img {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.hero-banner img,
.hero-banner .slider img,
.hero-banner .slideshow img,
.hero-banner .swiper img,
.hero-banner .carousel img {
    display: block;
    object-fit: cover;
}


/* ============================================================
   32. PAGINATION – DESIGNFARBEN
   ============================================================ */

.pagination .page-link {
    color: var(--anstel-green);
    background-color: var(--anstel-white);
    border-color: var(--anstel-border);
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    color: var(--anstel-white);
    background-color: var(--anstel-green-dark);
    border-color: var(--anstel-green-dark);
}

.pagination .page-item.active .page-link {
    color: var(--anstel-white);
    background-color: var(--anstel-green);
    border-color: var(--anstel-green);
}

.pagination .page-item.disabled .page-link {
    color: var(--anstel-text-light);
    background-color: var(--anstel-gray);
    border-color: var(--anstel-border);
}








/* ============================================================
   JEVENTS – JAHRESANSICHT
   Design passend zum Cassiopeia Child Template
   Farben:
   Grün       #3B5B49
   Grün dunkel #273C30
   Grün hell  #7A8E83
   Gold       #BFAD7C
   Weiß       #ffffff
   Grau       #dfe4e0
   ============================================================ */


/* ------------------------------------------------------------
   1. GRUNDLEGENDES JEVENTS-LAYOUT
   ------------------------------------------------------------ */

#jevents,
.jev_container {
    color: var(--anstel-text);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* Links innerhalb JEvents */

#jevents a,
.jev_container a {
    color: var(--anstel-green);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


#jevents a:hover,
#jevents a:focus,
.jev_container a:hover,
.jev_container a:focus {
    color: var(--anstel-gold);
}


/* ------------------------------------------------------------
   2. ÜBERSCHRIFT "TERMINE FÜR"
   ------------------------------------------------------------ */

#jevents h1,
#jevents h2,
#jevents h3,
.jev_container h1,
.jev_container h2,
.jev_container h3 {
    color: var(--anstel-green-dark);
}


/* Falls die Überschrift der Jahresansicht
   direkt über der Tabelle steht */

#jevents .contentheading,
#jevents .componentheading {
    color: var(--anstel-green-dark);
    font-weight: 700;
}


/* ------------------------------------------------------------
   3. JAHRESBALKEN – z.B. "2026"
   ------------------------------------------------------------ */

/*
 * Diese Klasse haben wir anhand deines HTML-Codes
 * eindeutig identifiziert:
 *
 * <td colspan="2" class="cal_td_daysnames">
 *     2026
 * </td>
 */

.cal_td_daysnames {
    background-color: var(--anstel-green) !important;

    color: var(--anstel-white) !important;

    border: 0 !important;

    padding: 0.65rem 1rem !important;

    font-size: 1.25rem;

    font-weight: 700;

    line-height: 1.3;

    text-align: center;
}


/* Jahr selbst */

.cal_td_daysnames a {
    color: var(--anstel-white) !important;
    text-decoration: none;
}

/* ------------------------------------------------------------
   JAHRESBALKEN
   ------------------------------------------------------------ */

#jevents .cal_td_daysnames,
.cal_td_daysnames {
    background-color: var(--anstel-green) !important;
    color: var(--anstel-white) !important;

    font-weight: 700;
}


/* ------------------------------------------------------------
   4. JEVENTS TABELLE
   ------------------------------------------------------------ */

#jevents table,
.jev_container table {
    border-collapse: collapse;
}


/* Tabellenzellen */

#jevents td,
#jevents th,
.jev_container td,
.jev_container th {
    border-color: var(--anstel-border);
}


/* ------------------------------------------------------------
   5. MONATSZEILEN
   ------------------------------------------------------------ */

/*
 * Die Jahresansicht von JEvents verwendet für die
 * Monats-/Datumsbereiche Tabellenzellen.
 *
 * Die folgenden Regeln halten den Hintergrund bewusst weiß
 * und entfernen das graue Standarddesign.
 */

#jevents table td,
.jev_container table td {
    background-color: var(--anstel-white);
}


/* Monat nicht unnötig grau darstellen */

#jevents .cal_td_month,
.jev_container .cal_td_month {
    background-color: var(--anstel-white);
    color: var(--anstel-green-dark);
}


/* Feinanpassung  Montasnamen*/


#jevents td {
    vertical-align: top;
}


/*
 * Monatsnamen links etwas kräftiger und
 * in Website-Grün darstellen.
 */

#jevents td:first-child {
    color: var(--anstel-green-dark);
}


/* Monatsname */

#jevents td:first-child a {
    color: var(--anstel-green-dark);
    font-weight: 600;
    text-decoration: none;
}

#jevents td:first-child a:hover {
    color: var(--anstel-gold);
}



/* ------------------------------------------------------------
   6. TRENNLINIEN ZWISCHEN DEN MONATEN
   ------------------------------------------------------------ */

#jevents table tr {
    border-bottom: 1px solid var(--anstel-border);
}


#jevents table tr:last-child {
    border-bottom: none;
}

/* ------------------------------------------------------------
   TRENNLINIEN
   ------------------------------------------------------------ */

#jevents table td {
    border-color: var(--anstel-border);
}


/* ------------------------------------------------------------
   7. MONATSNAME
   ------------------------------------------------------------ */

/*
 * Je nach JEvents-Version können Monatsnamen
 * unterschiedliche Klassen bekommen.
 *
 * Deshalb werden mehrere mögliche JEvents-Klassen
 * gleichzeitig angesprochen.
 */

.cal_td_month,
.cal_td_monthname,
.cal_td_month_name,
.jev_month,
.jev_month_name {
    color: var(--anstel-green-dark) !important;

    font-size: 1rem;

    font-weight: 600;

    vertical-align: top;
}


/* Monatsname als Link */

.cal_td_month a,
.cal_td_monthname a,
.cal_td_month_name a,
.jev_month a,
.jev_month_name a {
    color: var(--anstel-green-dark) !important;

    text-decoration: none;
}


.cal_td_month a:hover,
.cal_td_monthname a:hover,
.cal_td_month_name a:hover,
.jev_month a:hover,
.jev_month_name a:hover {
    color: var(--anstel-gold) !important;
}


/* ------------------------------------------------------------
   8. VERANSTALTUNGSBEREICH
   ------------------------------------------------------------ */

#jevents .event,
#jevents .eventlist,
.jev_container .event,
.jev_container .eventlist {
    color: var(--anstel-text);
}


/* ------------------------------------------------------------
   9. DATUM DER VERANSTALTUNG
   ------------------------------------------------------------ */

/*
 * Beispiel:
 *
 * Freitag, 13. März 2026
 */

#jevents .cal_td_day,
#jevents .cal_td_date,
#jevents .jev_date,
.jev_container .cal_td_day,
.jev_container .cal_td_date,
.jev_container .jev_date {
    color: var(--anstel-green-dark);

    font-size: 1.1rem !important; /* 1.1rem */

    font-weight: 500;
}


/* Datum als Link */

#jevents .cal_td_day a,
#jevents .cal_td_date a,
#jevents .jev_date a,
.jev_container .cal_td_day a,
.jev_container .cal_td_date a,
.jev_container .jev_date a {
    color: var(--anstel-green-dark);

    text-decoration: none;
}


#jevents .cal_td_day a:hover,
#jevents .cal_td_date a:hover,
#jevents .jev_date a:hover,
.jev_container .cal_td_day a:hover,
.jev_container .cal_td_date a:hover,
.jev_container .jev_date a:hover {
    color: var(--anstel-gold);
}


/* ------------------------------------------------------------
   10. VERANSTALTUNGSTITEL
   ------------------------------------------------------------ */

/*
 * Beispiel:
 *
 * Jahreshauptversammlung :: DEFAULT
 */

#jevents .eventtitle,
#jevents .event_title,
#jevents .jev_event_title,
.jev_container .eventtitle,
.jev_container .event_title,
.jev_container .jev_event_title {
    color: var(--anstel-green);

    font-weight: 500;
}


/* Titel-Link */

#jevents .eventtitle a,
#jevents .event_title a,
#jevents .jev_event_title a,
.jev_container .eventtitle a,
.jev_container .event_title a,
.jev_container .jev_event_title a {
    color: var(--anstel-green);

    text-decoration: none;
}


/* Hover */

#jevents .eventtitle a:hover,
#jevents .event_title a:hover,
#jevents .jev_event_title a:hover,
.jev_container .eventtitle a:hover,
.jev_container .event_title a:hover,
.jev_container .jev_event_title a:hover {
    color: var(--anstel-gold);
}


/* ------------------------------------------------------------
   11. KATEGORIE
   ------------------------------------------------------------ */

/*
 * Beispiel:
 *
 * DEFAULT
 */

#jevents .catname,
#jevents .category,
#jevents .jev_category,
.jev_container .catname,
.jev_container .category,
.jev_container .jev_category {
    color: var(--anstel-text-light);

    font-size: 0.9rem;

    display: none !important;  
}


/* Kategorie-Link */

#jevents .catname a,
#jevents .category a,
#jevents .jev_category a,
.jev_container .catname a,
.jev_container .category a,
.jev_container .jev_category a {
    color: var(--anstel-text-light);
}


/* ------------------------------------------------------------
   DEFAULT / KATEGORIE
   ------------------------------------------------------------ */

#jevents .cal_td_event a {
    color: var(--anstel-green);
}


/* ------------------------------------------------------------
   12. FARBBALKEN VOR VERANSTALTUNGEN
   ------------------------------------------------------------ */

/*
 * Das Geraint-Theme verwendet teilweise einen farbigen
 * linken Rand für Veranstaltungen/Kategorien.
 *
 * Wir machen daraus einen dezenten grünen Akzent.
 */

#jevents td[style*="border-left"],
.jev_container td[style*="border-left"] {
    border-left-color: var(--anstel-green) !important;
}


/* Häufig verwendete JEvents-Klassen */

.cal_td_events,
.cal_td_event,
.jev_event {
    border-left-color: var(--anstel-green);
}


/* ------------------------------------------------------------
   13. VERANSTALTUNGSZEILEN
   ------------------------------------------------------------ */

.cal_td_events,
.cal_td_event,
.jev_event {
    background-color: var(--anstel-white);

    color: var(--anstel-text);
}


/* ------------------------------------------------------------
   14. ABSTÄNDE INNERHALB DER VERANSTALTUNGEN
   ------------------------------------------------------------ */

#jevents .eventtitle,
#jevents .event_title,
.jev_container .eventtitle,
.jev_container .event_title {
    margin-bottom: 0.2rem;
}


/* ------------------------------------------------------------
   15. LEERE MONATE / LEERE BEREICHE
   ------------------------------------------------------------ */

.cal_td_daysnoevents,
.cal_td_noevents {
    background-color: var(--anstel-white);

    color: var(--anstel-text-light);
}


/* ------------------------------------------------------------
   16. AKTUELLER TAG
   ------------------------------------------------------------ */

.cal_td_today,
.jev_today {
    background-color: rgba(191, 173, 124, 0.12) !important;

    color: var(--anstel-green-dark) !important;
}


/* ------------------------------------------------------------
   17. HOVER-EFFEKT
   ------------------------------------------------------------ */

#jevents tr:hover td,
.jev_container tr:hover td {
    background-color: rgba(59, 91, 73, 0.035);
}


/* Jahresbalken darf beim Hover NICHT verändert werden */

#jevents .cal_td_daysnames:hover,
.jev_container .cal_td_daysnames:hover {
    background-color: var(--anstel-green) !important;
}


/* ------------------------------------------------------------
   18. NAVIGATION – PFEILE / ICONS
   ------------------------------------------------------------ */

/*
 * Die JEvents-Navigation befindet sich oberhalb
 * des Jahreskalenders.
 */

#jevents .jev_navigation,
#jevents .jev_navbar,
.jev_container .jev_navigation,
.jev_container .jev_navbar {
    color: var(--anstel-green);
}


/* Navigationslinks */

#jevents .jev_navigation a,
#jevents .jev_navbar a,
.jev_container .jev_navigation a,
.jev_container .jev_navbar a {
    color: var(--anstel-green);

    text-decoration: none;
}


/* Hover */

#jevents .jev_navigation a:hover,
#jevents .jev_navbar a:hover,
.jev_container .jev_navigation a:hover,
.jev_container .jev_navbar a:hover {
    color: var(--anstel-gold);
}

/* ------------------------------------------------------------
   NAVIGATION OBEN
   ------------------------------------------------------------ */

/*
 * Trennlinien der JEvents-Navigation etwas dezenter
 */

#jevents table {
    border-color: var(--anstel-border);
}


/* Navigationstexte */

#jevents a {
    text-decoration: none;
}



/* ------------------------------------------------------------
   19. NAVIGATIONSTEXT
   ------------------------------------------------------------ */

#jevents .jev_navigation,
#jevents .jev_navbar {
    font-size: 0.95rem;
}


/* ------------------------------------------------------------
   20. SUCH-/NAVIGATIONSELEMENTE
   ------------------------------------------------------------ */

#jevents input,
#jevents select,
#jevents button,
.jev_container input,
.jev_container select,
.jev_container button {
    border-radius: var(--anstel-radius);
}


/* ------------------------------------------------------------
   21. BUTTONS
   ------------------------------------------------------------ */

#jevents .btn,
.jev_container .btn {
    background-color: var(--anstel-green);

    border-color: var(--anstel-green);

    color: var(--anstel-white);
}


#jevents .btn:hover,
#jevents .btn:focus,
.jev_container .btn:hover,
.jev_container .btn:focus {
    background-color: var(--anstel-green-dark);

    border-color: var(--anstel-green-dark);

    color: var(--anstel-white);
}


/* ------------------------------------------------------------
   22. GOLD-AKZENT
   ------------------------------------------------------------ */

/*
 * Für wichtige Links/aktive Elemente kann JEvents
 * die Website-Goldfarbe verwenden.
 */

#jevents .active a,
.jev_container .active a {
    color: var(--anstel-gold);
}



/* ------------------------------------------------------------
   GERAINT – HELLVIOLETTER LINKER BALKEN
   ------------------------------------------------------------ */

/*
 * Der violette Balken links neben den Veranstaltungen
 * gehört offensichtlich noch zum Geraint-Design.
 *
 * Wir ersetzen ihn durch unseren grünen Akzent.
 */

#jevents td[style*="border-left"] {
    border-left-color: var(--anstel-green) !important;
}


/* Falls der Balken über eine Klasse erzeugt wird */

#jevents .cal_td_event {
    border-left-color: var(--anstel-green) !important;
}




/* ------------------------------------------------------------
   23. MOBILE – TABLET
   ------------------------------------------------------------ */

@media (max-width: 767.98px) {

    #jevents,
    .jev_container {
        font-size: 0.95rem;
    }


    /* Jahreszahl */

    .cal_td_daysnames {
        padding: 0.55rem 0.75rem !important;

        font-size: 1.1rem;
    }


    /* Monatsname */

    .cal_td_month,
    .cal_td_monthname,
    .cal_td_month_name,
    .jev_month,
    .jev_month_name {
        font-size: 0.95rem;
    }


    /* Datum */

    #jevents .cal_td_day,
    #jevents .cal_td_date,
    #jevents .jev_date,
    .jev_container .cal_td_day,
    .jev_container .cal_td_date,
    .jev_container .jev_date {
        font-size: 1rem;
    }


    /* Veranstaltung */

    #jevents .eventtitle,
    #jevents .event_title,
    #jevents .jev_event_title,
    .jev_container .eventtitle,
    .jev_container .event_title,
    .jev_container .jev_event_title {
        font-size: 0.95rem;
    }
}


/* ------------------------------------------------------------
   24. MOBILE – KLEINE BILDSCHIRME
   ------------------------------------------------------------ */

@media (max-width: 480px) {

    .cal_td_daysnames {
        padding: 0.5rem !important;

        font-size: 1rem;
    }


    #jevents .cal_td_day,
    #jevents .cal_td_date,
    #jevents .jev_date,
    .jev_container .cal_td_day,
    .jev_container .cal_td_date,
    .jev_container .jev_date {
        font-size: 0.95rem;
    }


    #jevents .eventtitle,
    #jevents .event_title,
    #jevents .jev_event_title,
    .jev_container .eventtitle,
    .jev_container .event_title,
    .jev_container .jev_event_title {
        font-size: 0.9rem;
    }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767.98px) {

    #jevents td:first-child {
        font-size: 0.9rem;
    }

    #jevents td:nth-child(2) {
        font-size: 0.95rem;
    }

}

/* ============================================================
   JEVENTS – ENDE
   ============================================================ */






/* ============================================================
   ENDE
   ============================================================ */
```