/* ============================================================
   JEM – HILSHOF
   Zentrale Design-Anpassungen für JEM + YOOtheme

   HINWEIS:
   - Zeilenfarben (gerade/ungerade) weiterhin in JEM einstellen.
   - Diese Datei bündelt nur die zusätzlichen Anpassungen.
   - Farben können zentral im Abschnitt 1 geändert werden.
   ============================================================ */


/* ============================================================
   1. FARBPALETTE / ZENTRALE VARIABLEN
   ============================================================ */

#jem {
    --jem-brand: #6A9418;
    --jem-primary: #4F6F2F;
    --jem-primary-dark: #3F5E13;
    --jem-dark: #243321;
    --jem-text: #273022;
    --jem-text-soft: #465142;
    --jem-muted: #687061;

    --jem-sage: #E7ECD9;
    --jem-muted-bg: #EEF1E7;
    --jem-main-bg: #F7F6F0;
    --jem-card-bg: #FFFFFF;
    --jem-border: #D8DEC9;
    --jem-earth: #A8663A;

    /* speziell für JEM */
    --jem-hover-bg: #F0F3E8;
    --jem-detail-bg: #FBFCF8;
    --jem-description-bg: #FCFCF8;
    --jem-info-bg: #FAF9F4;

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


/* ============================================================
   2. GRUNDTYPOGRAFIE
   ============================================================ */

/* Haupt- und Zwischenüberschriften */
#jem .componentheading,
#jem h1,
#jem h2,
#jem h3 {
    color: var(--jem-dark);
}


/* Allgemeine Links */
#jem a {
    color: var(--jem-primary);
    text-decoration: none;
}

#jem a:hover,
#jem a:focus {
    color: var(--jem-primary-dark);
}


/* Allgemeine Zusatzinformationen / Labels */
#jem label,
#jem dt,
#jem .jem-filter-label {
    color: var(--jem-muted);
}


/* ============================================================
   3. FILTER- UND SUCHBEREICH
   ============================================================ */

/* Hintergrund des gesamten Filterbereichs */
div#jem #jem_filter.jem-events-filter {
    background: var(--jem-muted-bg);
    border: 1px solid var(--jem-border);
    border-radius: 8px;
    padding: 12px;
}


/* Schrift an YOOtheme angleichen */
div#jem #jem_filter label,
div#jem #jem_filter select,
div#jem #jem_filter input,
div#jem #jem_filter button,
div#jem #jem_filter .btn {
    font-family: inherit !important;
}


/* Labels wie "Monat" und "Limit" */
div#jem #jem_filter label {
    color: var(--jem-border) !important;
    font-weight: 500;
}


/* Eingabe- und Auswahlfelder */
div#jem #jem_filter.jem-events-filter input,
div#jem #jem_filter.jem-events-filter select,
div#jem #jem_filter.jem-events-filter .form-control,
div#jem #jem_filter.jem-events-filter .form-select {
    background-color: var(--jem-card-bg);
    color: var(--jem-text);
    border: 1px solid var(--jem-border);
    border-radius: 5px;
}


/* Aktives Eingabefeld */
div#jem #jem_filter.jem-events-filter input:focus,
div#jem #jem_filter.jem-events-filter select:focus,
div#jem #jem_filter.jem-events-filter .form-control:focus,
div#jem #jem_filter.jem-events-filter .form-select:focus {
    border-color: var(--jem-brand);
    outline: none;
}


/* Suchen- und Zurücksetzen-Button */
div#jem #jem_filter.jem-events-filter .jem-events-filter-actions .btn,
div#jem #jem_filter.jem-events-filter .jem-events-filter-actions button {
    background-color: var(--jem-brand) !important;
    border-color: var(--jem-brand) !important;
    color: #FFFFFF !important;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}


/* Button-Hover */
div#jem #jem_filter.jem-events-filter .jem-events-filter-actions .btn:hover,
div#jem #jem_filter.jem-events-filter .jem-events-filter-actions button:hover {
    background-color: var(--jem-primary-dark) !important;
    border-color: var(--jem-primary-dark) !important;
    color: #FFFFFF !important;
}


/* ============================================================
   4. EVENTLISTE – SPALTEN, TITEL UND META-INFORMATIONEN
   ============================================================ */

/*
   WICHTIG:
   Die Farben für gerade / ungerade Veranstaltungszeilen
   werden weiterhin direkt in JEM gepflegt.
   Dadurch kannst du sie dort bequem ändern, ohne CSS anzufassen.
*/


/* Grundgestaltung einer Veranstaltung */
#jem .jem-event {
    border: 1px solid var(--jem-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}


/* Abstand zwischen Veranstaltungen */
#jem .jem-event + .jem-event {
    margin-top: 15px;
}


/* Spaltenüberschriften:
   Datum, Titel, Lokalität, Ortsname, Kategorie */
div#jem .jem-sort,
div#jem .jem-sort a {
    font-family: inherit !important;
    font-weight: 500;
    color: var(--jem-primary);
}


/* Monatsüberschrift, z. B. "Oktober 2026" */
div#jem .row-month {
    font-family: inherit !important;
    font-weight: 600;
    color: var(--jem-dark);
}


/* Datum, Uhrzeit, Ort, Stadt, Kategorie */
div#jem .jem-event-info,
div#jem .jem-event-info span,
div#jem .jem-event-info a {
    font-family: inherit !important;
    font-weight: 400;
    color: var(--jem-muted);
}


/* Icons bei Datum, Uhrzeit, Ort usw. */
#jem .jem-event-info i {
    color: var(--jem-muted);
}


/* Links innerhalb der Meta-Informationen */
#jem .jem-event-info a:hover {
    color: var(--jem-primary);
}


/* Veranstaltungstitel */
div#jem .jem-event-title,
div#jem .jem-event-title a {
    font-family: inherit !important;
    font-weight: 600;
    color: var(--jem-primary);
}


/* ============================================================
   5. EVENTLISTE – HOVER
   ============================================================ */

/*
   Überschreibt den blauen JEM-Standard-Hover.
   Der grüne Schatten links ist bewusst sehr dezent.
*/

div#jem .eventlist li:not(.jem-nohover):hover {
    background-color: var(--jem-hover-bg) !important;
    border-color: var(--jem-border) !important;
    box-shadow: inset 3px 0 0 rgba(106, 148, 24, 0.45) !important;
}


/* ============================================================
   6. EVENT-DETAILSEITE – OBERER INFOBLOCK
   ============================================================ */

/* Block mit Titel / Wann / Wo / Kategorie */
div#jem.jem_event .jem-event-overview-panel {
    background: var(--jem-detail-bg) !important;
    border: 1px solid var(--jem-border) !important;
}


/* Bezeichnungen: Titel, Wann, Wo, Kategorie */
div#jem.jem_event .jem-event-overview-details dt {
    color: var(--jem-muted) !important;
}


/* Inhalte: Datum, Uhrzeit usw. */
div#jem.jem_event .jem-event-overview-details dd {
    color: var(--jem-text-soft) !important;
}


/* Links im oberen Infoblock */
div#jem.jem_event .jem-event-overview-details a {
    color: var(--jem-primary) !important;
}

div#jem.jem_event .jem-event-overview-details a:hover {
    color: var(--jem-primary-dark) !important;
}


/* ============================================================
   7. EVENT-DETAILSEITE – BESCHREIBUNG
   ============================================================ */

.hilshof-event-content {
    margin-top: 25px;
    color: var(--jem-text-soft);
    line-height: 1.7;
}


/* Hauptkarte der Beschreibung */
.hilshof-description-card {
    background-color: var(--jem-description-bg) !important;
    border: 1px solid var(--jem-border) !important;
    border-radius: 7px;
    padding: 30px 32px;
    margin-bottom: 22px;
    color: var(--jem-text-soft) !important;
}


/* Überschrift "Beschreibung" */
.hilshof-description-card h2 {
    color: var(--jem-dark);
    font-size: 1.45rem;
    margin: 0 0 20px 0;
}


/* Titel innerhalb der Beschreibung */
.hilshof-description-card h3 {
    color: var(--jem-primary);
    font-size: 1.35rem;
    line-height: 1.4;
    margin: 0 0 16px 0;
}


/* Zwischenüberschrift, z. B. "Im Vortrag geht es..." */
.hilshof-description-card h4 {
    color: var(--jem-dark);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 26px 0 12px 0;
}


/* Hervorgehobener Einleitungstext */
.hilshof-event-lead,
.hilshof-description-card .hilshof-event-lead {
    color: var(--jem-primary) !important;
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: 18px;
}


/* Normaler Beschreibungstext */
.hilshof-description-card p,
.hilshof-description-card li {
    color: var(--jem-text-soft);
}

.hilshof-description-card p {
    margin: 0 0 18px 0;
}


/* ============================================================
   8. EVENT-DETAILSEITE – AUFZÄHLUNG
   ============================================================ */

.hilshof-event-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 25px 0;
}

.hilshof-event-list li {
    position: relative;
    padding: 8px 0 8px 28px;
    border-bottom: 1px solid rgba(216, 222, 201, 0.75);
}

.hilshof-event-list li:last-child {
    border-bottom: none;
}


/* Grüne Aufzählungspunkte */
.hilshof-event-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 17px;
    width: 8px;
    height: 8px;
    background-color: var(--jem-brand);
    border-radius: 50%;
}


/* ============================================================
   9. EVENT-DETAILSEITE – ZUSÄTZLICHE INFORMATIONEN
   ============================================================ */

.hilshof-event-details {
    background-color: var(--jem-info-bg) !important;
    border: 1px solid var(--jem-border) !important;
    border-left: 4px solid var(--jem-brand) !important;
    border-radius: 7px;
    padding: 25px 28px;
    color: var(--jem-text-soft) !important;
}


/* Überschrift */
.hilshof-event-details h3 {
    color: var(--jem-dark);
    font-size: 1.25rem;
    margin: 0 0 17px 0;
}


/* Einzelne Infozeilen */
.hilshof-detail-row {
    display: grid;
    grid-template-columns: 135px 1fr;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--jem-border);
    color: var(--jem-text-soft);
}

.hilshof-detail-row:last-child {
    border-bottom: none;
}


/* Bezeichnungen wie Leitung / Telefon / Kosten */
.hilshof-detail-label,
.hilshof-event-details .hilshof-detail-label {
    color: var(--jem-muted) !important;
    font-weight: 700;
}


/* Links in den Zusatzinformationen */
.hilshof-event-details a {
    color: var(--jem-primary);
    font-weight: 600;
    text-decoration: none;
}

.hilshof-event-details a:hover {
    color: var(--jem-primary-dark);
    text-decoration: underline;
}


/* ============================================================
   10. EVENT-DETAILSEITE – VERANSTALTUNGSORT UNTEN
   ============================================================ */

div#jem.jem_event .jem-event-venue-overview-panel {
    background: var(--jem-detail-bg) !important;
    border: 1px solid var(--jem-border) !important;
    color: var(--jem-text-soft) !important;
}


/* Normaler Text im Veranstaltungsort */
div#jem.jem_event .jem-event-venue-overview-panel p,
div#jem.jem_event .jem-event-venue-overview-panel dd,
div#jem.jem_event .jem-event-venue-overview-panel span {
    color: var(--jem-text-soft);
}


/* Links im Veranstaltungsort */
div#jem.jem_event .jem-event-venue-overview-panel a {
    color: var(--jem-primary) !important;
}

div#jem.jem_event .jem-event-venue-overview-panel a:hover {
    color: var(--jem-primary-dark) !important;
}


/* ============================================================
   11. DOPPELTE JEM-EVENTÜBERSCHRIFT
   ============================================================ */

/*
   Blendet die zusätzliche JEM-Überschrift
   "Veranstaltung – Eventname" aus.

   Falls sie später wieder sichtbar sein soll:
   diesen gesamten Block löschen oder auskommentieren.
*/

div#jem.jem_event > h2.jem {
    display: none !important;
}


/* ============================================================
   12. FUNKTIONS-ICONS OBEN RECHTS
   ============================================================ */

/* Icon-Schrift verkleinern */
#jem .buttons i,
#jem .buttons .fa,
#jem .buttons .fas {
    font-size: 0.85rem !important;
}


/* Falls JEM einzelne Icons als Bild ausgibt */
#jem .buttons img {
    width: 16px !important;
    height: 16px !important;
}


/* Abstand zwischen den Icons */
#jem .buttons a {
    margin-left: 4px !important;
}


/* ============================================================
   13. JEM-BRANDING AUSBLENDEN
   ============================================================ */

div#jem .copyright {
    display: none !important;
}


/* ============================================================
   14. MOBILE / SMARTPHONE
   ============================================================ */

@media (max-width: 640px) {

    /* Beschreibung kompakter */
    .hilshof-description-card {
        padding: 22px 18px;
    }

    .hilshof-description-card h2 {
        font-size: 1.3rem;
    }

    .hilshof-description-card h3 {
        font-size: 1.18rem;
    }

    .hilshof-event-lead {
        font-size: 1rem;
    }


    /* Zusatzinformationen untereinander */
    .hilshof-event-details {
        padding: 20px 18px;
    }

    .hilshof-detail-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 12px 0;
    }

    .hilshof-detail-label {
        font-size: 0.9rem;
    }


    /* Aufzählungen etwas kompakter */
    .hilshof-event-list li {
        padding-left: 25px;
    }
}


/* ============================================================
   15. RESTLICHE SCHWARZE JEM-TEXTE WEICHER DARSTELLEN
   ============================================================ */

/*
   Fallback für normalen JEM-Text, der sonst noch schwarz erscheint.
   Überschriften, Links und Buttons behalten durch ihre spezifischeren
   Regeln weiterhin ihre eigenen Farben.
*/

#jem {
    color: var(--jem-text-soft);
}

#jem p,
#jem li,
#jem dd,
#jem td,
#jem .jem-event,
#jem .jem-event-overview-details,
#jem .jem-event-venue-overview-panel {
    color: var(--jem-text-soft);
}


/* Texte in Formularfeldern ebenfalls etwas weicher */
#jem input,
#jem select,
#jem textarea {
    color: var(--jem-text-soft) !important;
}


/* Platzhalter noch etwas dezenter */
#jem input::placeholder,
#jem textarea::placeholder {
    color: var(--jem-muted) !important;
    opacity: 1;
}