/*
 * MS Events – Frontend Styles
 * Version:    2.1.0
 * Namespace:  .ms-events-*
 * WCAG:       2.2 AA konform
 * Theme:      Salient/Nectar kompatibel via CSS Custom Properties
 * Browser:    Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
 * ================================================================
 */

/* ================================================================
   CSS Custom Properties – global auf :root
   Alle Plugin-Komponenten (list, choose, form, login, single)
   erben die Variablen ohne Scope-Probleme.
   ================================================================ */
:root {
    /* ══ Plugin-Grundfarben ══════════════════════════════════════════════
       Konfigurierbar: Dashboard → Veranstaltungen → Einstellungen → Farbgebung
       Fallback-Werte gelten wenn keine Einstellung gespeichert ist.
       PHP (MS_Events_Settings::inject_color_vars) überschreibt diese Vars.
       ================================================================ */
    --ms-color-text:         #000000;   /* Textfarbe                      */
    --ms-color-text-soft:    #1e1e1e;   /* Textfarbe weich (nahe Schwarz)  */
    --ms-color-primary:      #10428c;   /* Hauptfarbe                     */
    --ms-color-primary-dark: #0d2240;   /* Hauptfarbe dunkel (Hover)      */
    --ms-color-primary-tint: #e8f0fb;   /* Hauptfarbe hell (Hintergründe) */
    --ms-color-accent:       #f7be1a;   /* Akzentfarbe                    */
    --ms-color-accent-dark:  #e6a817;   /* Akzentfarbe dunkel (Hover)     */
    --ms-color-accent-tint:  #fdf7e3;   /* Akzentfarbe hell (Hintergründe)*/

    /* ══ Theme-Integration (Salient/Nectar) ══════════════════════════════
       Allgemeine Layout-Farben folgen dem Theme.
       Für Plugin-Akzente gilt die Grundfarbe (--ms-color-primary).
       ================================================================ */
    --ms-accent:        var(--ms-color-primary);
    --ms-accent-hover:  var(--ms-color-primary-dark);
    --ms-text:          var(--color-body-text, var(--text-color, #333333));
    --ms-text-muted:    var(--color-text-secondary, #646970);
    --ms-border:        var(--color-border, var(--nectar-border-color, #e0e0e0));
    --ms-bg:            var(--color-bg, var(--nectar-card-bg, #ffffff));
    --ms-bg-secondary:  var(--color-bg-secondary, #f6f7f7);
    --ms-radius:        var(--nectar-border-radius, 4px);
    --ms-shadow:        var(--nectar-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
    --ms-font:          var(--body-font-family, var(--nectar-font-family, inherit));

    /* ── Abstände ──────────────────────────────────────────────────────── */
    --ms-space-xs: 0.35rem;
    --ms-space-sm: 0.6rem;
    --ms-space-md: 1rem;
    --ms-space-lg: 1.5rem;
    --ms-space-xl: 2.25rem;

    /* ── Buttons ───────────────────────────────────────────────────────── */
    --ms-btn-pdf-bg:      var(--color-bg-secondary, #f0f0f0);
    --ms-btn-pdf-color:   var(--ms-text);
    --ms-btn-pdf-border:  var(--ms-border);
    --ms-btn-reg-bg:      var(--ms-accent);
    --ms-btn-reg-color:   #ffffff;
    --ms-btn-ical-bg:     transparent;
    --ms-btn-ical-color:  var(--ms-text-muted);
    --ms-btn-ical-border: var(--ms-border);

    font-family: var(--ms-font);
}

/* ================================================================
   Leer-Zustand
   ================================================================ */
.ms-events-empty {
    color: var(--ms-text-muted);
    font-style: italic;
    padding: var(--ms-space-md) 0;
}

/* ================================================================
   List-Layout
   ================================================================ */
.ms-events-list {
    list-style:  none;
    margin:      0;
    padding:     0;
}

.ms-events-list--list .ms-events-item {
    border-bottom: 1px solid var(--ms-border);
    padding:       var(--ms-space-lg) 0;
    margin:        0;
}

.ms-events-list--list .ms-events-item:last-child {
    border-bottom: none;
}

/* ================================================================
   Cards-Layout
   ================================================================ */
.ms-events-list--cards {
    display:               grid;
    grid-template-columns: repeat(var(--ms-cards-cols, 3), 1fr);
    gap:                   var(--ms-space-lg);
}

.ms-events-list--cards .ms-events-item {
    border:        1px solid var(--ms-color-accent, #f7be1a);
    border-radius: var(--ms-radius);
    padding:       var(--ms-space-lg);
    background:    var(--ms-bg);
    transition:    box-shadow 0.2s ease, transform 0.2s ease;
    display:       flex;
    flex-direction: column;
    position:      relative; /* Stretch-Link-Basis */
    cursor:        pointer;
}

.ms-events-list--cards .ms-events-item:hover {
    box-shadow: var(--ms-shadow);
    transform:  translateY(-1px);
}

/* Basis-Schriftgröße und Textfarbe für alle Items */
.ms-events-item {
    font-size: 1.2rem;
    color:     var(--ms-color-text-soft, #1e1e1e);
}

/* Vergangenheits-Indikator */
.ms-events-item--past {
    opacity: 0.75;
}

/* ================================================================
   Thumbnail
   ================================================================ */
.ms-events-item__thumbnail {
    margin-bottom: var(--ms-space-md);
    border-radius: var(--ms-radius);
    overflow:      hidden;
    aspect-ratio:  16 / 9;
    background:    var(--ms-bg-secondary);
}

/* Cards: Thumbnail bündig zum Kartenrand (kein Abstand oben/seitlich) */
.ms-events-list--cards .ms-events-item__thumbnail {
    margin-top:   calc(-1 * var(--ms-space-lg));
    margin-left:  calc(-1 * var(--ms-space-lg));
    margin-right: calc(-1 * var(--ms-space-lg));
    border-radius: var(--ms-radius) var(--ms-radius) 0 0;
}

.ms-events-item__thumbnail a {
    display:   block;
    height:    100%;
}

.ms-events-item__thumbnail img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    border-radius: var(--ms-radius);
    transition:  opacity 0.2s ease;
}

.ms-events-item__thumbnail img:hover {
    opacity: 0.9;
}

/* ================================================================
   Kategorie-Badge
   ================================================================ */
.ms-events-item__categories {
    margin-bottom: var(--ms-space-sm);
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--ms-space-xs);
}

.ms-events-item__category {
    display:        inline-block;
    background:     var(--ms-accent);
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    700;
    line-height:    1;
    padding:        0.25em 0.6em;
    border-radius:  calc(var(--ms-radius) * 3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space:    nowrap;
}

/* Kategorie auf Einzelseite: kein Badge, reiner Text */
.ms-events-single__header .ms-events-item__category {
    background:     transparent;
    color:          #646970;
    font-size:      0.95rem;
    font-weight:    400;
    padding:        0;
    border-radius:  0;
    text-transform: none;
    letter-spacing: normal;
    line-height:    1.4;
}

/* ================================================================
   Titel
   ================================================================ */
.ms-events-item__title {
    font-weight:  700;
    margin:       0 0 0.75rem;
    line-height:  1.3;
    color:        var(--ms-text);
}

/* Salient/Nectar: h3 bekommt oft großes Spacing –
   hier gezielt zurücksetzen */
.ms-events-list .ms-events-item__title {
    padding-top: 0;
}

.ms-events-item__title a {
    color:           inherit;
    text-decoration: none;
}

.ms-events-item__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.1em;
}

/* WCAG 2.2 Focus-Sichtbarkeit (2.4.11 Focus Not Obscured) */
.ms-events-item__title a:focus-visible {
    outline:        3px solid var(--ms-accent);
    outline-offset: 3px;
    border-radius:  2px;
    text-decoration: none;
    /* scroll-margin für sticky Header */
    scroll-margin-top: 80px;
}

/* ================================================================
   Meta-Tabelle (dl)
   ================================================================ */
.ms-events-item__meta {
    margin:                0 0 var(--ms-space-md);
    padding:               0;
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   0.2rem 1rem;
}

.ms-events-item__meta-row {
    display: contents;
}

.ms-events-item__meta .ms-events-item__meta-row > dt {
    padding-top:    0.6rem;
    padding-bottom: 0.6rem;
}

.ms-events-item__meta .ms-events-item__meta-row > dd {
    padding-top:    0.6rem;
    padding-bottom: 0.6rem;
}

.ms-events-item__meta dt {
    font-weight:  600;
    color:        var(--ms-text-muted);
    white-space:  nowrap;
    align-self:   start;
    padding-top:  0.1em;
}

.ms-events-item__meta dd {
    margin:  0;
    color:   var(--ms-text);
}

.ms-events-item__meta address {
    font-style: normal;
}

.ms-events-item__address {
    color: var(--ms-text-muted);
}

/* ================================================================
   Excerpt
   ================================================================ */
.ms-events-item__excerpt {
    line-height:   1.65;
    color:         var(--ms-text);
    margin-bottom: var(--ms-space-md);
    flex-grow:     1; /* Cards: Inhalt ausdehnen */
}

.ms-events-item__excerpt p:last-child {
    margin-bottom: 0;
}

/* ================================================================
   Actions / Buttons
   ================================================================ */
.ms-events-item__actions {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            var(--ms-space-sm);
    margin-top:     auto; /* Cards: ans Ende drücken */
    padding-top:    var(--ms-space-sm);
}

/* Basis-Button */
.ms-events-item__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--ms-space-xs);
    font-size:       0.875rem;
    font-weight:     600;
    line-height:     1;
    text-decoration: none;
    padding:         0.5em 0.9em;
    border-radius:   var(--ms-radius);
    border:          2px solid transparent;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background-color 0.15s ease,
                     border-color     0.15s ease,
                     color            0.15s ease,
                     box-shadow       0.15s ease;
}

/* WCAG 2.2: Focus sichtbar mit Kontrast ≥ 3:1 */
.ms-events-item__btn:focus-visible {
    outline:        3px solid var(--ms-accent);
    outline-offset: 3px;
    box-shadow:     0 0 0 5px rgba(0, 115, 170, 0.15);
    scroll-margin-top: 80px;
}

/* PDF-Button */
.ms-events-item__btn--pdf {
    background:   var(--ms-btn-pdf-bg);
    color:        var(--ms-btn-pdf-color);
    border-color: var(--ms-btn-pdf-border);
}

.ms-events-item__btn--pdf:hover {
    background:   var(--ms-border);
    border-color: var(--ms-text-muted);
}

/* Anmelde-Button */
.ms-events-item__btn--register {
    background:   var(--ms-btn-reg-bg);
    color:        var(--ms-btn-reg-color);
    border-color: var(--ms-btn-reg-bg);
}

.ms-events-item__btn--register:hover {
    background:   var(--ms-accent-hover);
    border-color: var(--ms-accent-hover);
    color:        #fff;
}

/* iCal-Button */
.ms-events-item__btn--ical {
    background:   var(--ms-btn-ical-bg);
    color:        var(--ms-btn-ical-color);
    border-color: var(--ms-btn-ical-border);
    font-weight:  400;
}

.ms-events-item__btn--ical:hover {
    background:   var(--ms-bg-secondary);
    color:        var(--ms-text);
}

/* SVG-Icon im Button */
.ms-events-icon {
    flex-shrink:   0;
    display:       inline-block;
    vertical-align: middle;
}

/* Anmeldeschluss-Badge */
.ms-events-item__deadline {
    font-size:   1rem;
    color:       #c0392b;
    font-weight: 600;
    white-space: nowrap;
}

/* ================================================================
   Single-Template: Datum, Zeit, Ort als Überschriften
   ================================================================ */
.ms-events-single__date-heading {
    font-weight:    700;
    color:          var(--ms-color-primary, #10428c);
    text-align:     left;
    margin:         0;
    padding-top:    10px;
    padding-bottom: 10px;
    line-height:    1.3;
}

.ms-events-single__time-heading,
.ms-events-single__location-heading {
    font-weight:    600;
    color:          var(--ms-color-text-soft, #1e1e1e);
    text-align:     left;
    margin:         0;
    padding-top:    10px;
    padding-bottom: 10px;
    line-height:    1.3;
}

/* ================================================================
   Zurück-Navigation
   ================================================================ */
.ms-events-single__nav {
    margin-bottom: 1.25rem;
}

.ms-events-single__nav--bottom {
    margin-top:    2rem;
    margin-bottom: 0;
    padding-top:   1.25rem;
    border-top:    1px solid #e8e8e8;
}

.ms-events-single__back {
    display:         inline-flex;
    align-items:     center;
    gap:             0.35rem;
    color:           var(--ms-color-primary, #10428c);
    text-decoration: none;
    font-weight:     600;
}

.ms-events-single__back:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ms-events-single__back:focus-visible {
    outline:        3px solid var(--ms-color-primary, #10428c);
    outline-offset: 3px;
    border-radius:  2px;
}

/* ================================================================
   Info-Card: Datum / Zeit / Ort
   ================================================================ */
.ms-events-single__info-card {
    background:    #ffffff;
    border-left:   4px solid var(--ms-color-accent, #f7be1a);
    border-radius: 0 4px 4px 0;
    padding:       1.25rem 1.75rem;
    margin:        1.75rem 0;
    box-shadow:    0 2px 14px rgba(0, 0, 0, 0.07);
    display:       flex;
    flex-direction: column;
    gap:           0.75rem;
}

.ms-events-single__info-row {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
    line-height: 1.4;
}

.ms-events-single__info-icon {
    color:       var(--ms-color-primary, #10428c);
    flex-shrink: 0;
    margin-top:  0.1em;
    opacity:     0.85;
}

.ms-events-single__info-row--date .ms-events-single__info-icon {
    margin-top: 0.2em;
}

.ms-events-single__info-date {
    font-weight: 700;
    color:       var(--ms-color-primary, #10428c);
}

.ms-events-single__info-text {
    color: var(--ms-color-text-soft, #1e1e1e);
}

.ms-events-single__info-address {
    display:    block;
    color:      #646970;
    margin-top: 0.15rem;
}


/* 2. Veranstaltungsort – dezente Trennlinie zum 1. Ort ───────────────── */
.ms-events-single__info-row--loc2 {
    padding-top: 0.6rem;
    margin-top:  0.3rem;
    border-top:  1px dashed rgba(0, 0, 0, 0.1);
}
/* ================================================================
   Info-Card: Trennlinie vor den Zusatzfeldern (Deadline, Gebühr, Kontakt)
   ================================================================ */
.ms-events-single__info-row--deadline {
    padding-top:  0.65rem;
    margin-top:   0.4rem;
    border-top:   1px solid rgba(0, 0, 0, 0.07);
}

/* Erste Zusatzzeile bekommt die Trennlinie – alle folgenden Zeilen
   mit demselben Muster erhalten sie via CSS-Trick nicht erneut.
   Da die drei Zeilen als separate Elemente ausgegeben werden, reicht
   es, nur die erste visuell zu trennen. */
.ms-events-single__info-row--deadline ~ .ms-events-single__info-row {
    /* kein border-top – folgende Zeilen fließen normal weiter */
}

/* Urgent-Variante: Accent-Farbe und fettes Gewicht */
.ms-events-single__info-row--deadline-urgent .ms-events-single__info-icon {
    color: #c47d00;
}
.ms-events-single__info-row--deadline-urgent .ms-events-single__info-text {
    color:       #7a5c00;
    font-weight: 600;
}

/* Label + Wert-Kombo innerhalb info-text (Gebühr, Kontakt) */
.ms-events-single__info-text strong {
    display:      block;
    font-weight:  600;
    color:        var(--ms-color-primary, #10428c);
    margin-bottom: 0.1rem;
}

.ms-events-single__info-text a {
    color:           var(--ms-color-primary, #10428c);
    text-decoration: none;
}
.ms-events-single__info-text a:hover {
    text-decoration: underline;
}

/* ================================================================
   Detailtabelle
   ================================================================ */
.ms-events-single__details {
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   0;
    margin:                1.75rem 0;
    border-top:            1px solid #f0f0f0;
}

.ms-events-single__detail-row {
    display: contents;
}

.ms-events-single__detail-label {
    display:        flex;
    align-items:    flex-start;
    gap:            0.45rem;
    font-weight:    600;
    color:          var(--ms-color-primary, #10428c);
    padding:        0.75rem 1.5rem 0.75rem 0;
    border-bottom:  1px solid #f0f0f0;
    white-space:    nowrap;
    vertical-align: top;
}

.ms-events-single__detail-label svg {
    flex-shrink: 0;
    opacity:     0.8;
    width:       18px;
    height:      18px;
}

.ms-events-single__detail-value {
    padding:       0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    color:         var(--ms-color-text-soft, #1e1e1e);
    vertical-align: middle;
}

.ms-events-single__detail-value a {
    color:           var(--ms-color-primary, #10428c);
    text-decoration: none;
}

.ms-events-single__detail-value a:hover {
    text-decoration: underline;
}

/* Badge: Zertifikat */
.ms-events-single__badge {
    display:     inline-flex;
    align-items: center;
    gap:         0.35rem;
}

.ms-events-single__badge--green {
    color: #1a6b2e;
}

.ms-events-single__badge--green svg {
    color: #1a6b2e;
}

/* ================================================================
   Nectar-Buttons auf der Einzelseite
   ================================================================ */
.ms-events-single__actions .nectar-cta {
    display: inline-block;
}

.ms-events-single__actions .nectar-cta .link_wrap {
    display: inline-block;
}

/* ── PDF-Button: dominant, volle Breite ── */
.ms-events-single__pdf-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    width:            100%;
    padding:          14px 28px;
    background-color: var(--ms-color-primary, #10428C);
    color:            #fff !important;
    font-weight:      700;
    font-size:        1.4rem;
    text-decoration:  none;
    border-radius:    var(--ms-radius, 4px);
    border:           2px solid var(--ms-color-primary, #10428C);
    transition:       background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    box-sizing:       border-box;
    letter-spacing:   0.01em;
}

.ms-events-single__pdf-btn:hover,
.ms-events-single__pdf-btn:focus-visible {
    background-color: var(--ms-color-primary-dark, #0c3370);
    border-color:     var(--ms-color-primary-dark, #0c3370);
    color:            #fff !important;
    text-decoration:  none;
}

.ms-events-single__pdf-btn svg {
    flex-shrink: 0;
    stroke:      currentColor;
}

/* ── iCal-Link: rechtsbündig, dezent ── */
.ms-events-single__ical-link {
    display:         flex;
    align-items:     center;
    gap:             6px;
    margin-left:     auto;
    color:           var(--ms-color-primary, #10428C) !important;
    font-weight:     600;
    font-size:       0.95rem;
    text-decoration: none;
    padding:         8px 0;
    transition:      color 0.15s ease;
}

.ms-events-single__ical-link:hover,
.ms-events-single__ical-link:focus-visible {
    color:           var(--ms-color-primary-dark, #0c3370) !important;
    text-decoration: underline;
}

.ms-events-single__ical-link svg {
    flex-shrink: 0;
    stroke:      currentColor;
}

/* ================================================================
   Einzelseite: Alle Details
   ================================================================ */
.ms-events-single {
    padding:    0 6vw 8% 6vw;
    max-width:  1200px;
    width:      100%;
    box-sizing: border-box;
}

/* Bilder auf Einzel-Veranstaltungsseite immer 100% Breite */
.ms-events-single img,
.ms-events-single .entry-content img {
    width:         100% !important;
    height:        auto;
    display:       block;
    max-width:     100%;
}

.ms-events-single__header {
    margin-bottom: var(--ms-space-lg);
}

.ms-events-single__thumbnail {
    border-radius: var(--ms-radius);
    overflow:      hidden;
    margin-bottom: var(--ms-space-lg);
}

.ms-events-single__thumbnail img {
    width:         100% !important;
    height:        auto;
    display:       block;
    margin-top:    3%;
    margin-bottom: 5%;
}

.ms-events-single__meta {
    background:    var(--ms-bg-secondary);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    padding:       var(--ms-space-lg);
    margin-bottom: var(--ms-space-lg);
    display:       grid;
    grid-template-columns: auto 1fr;
    gap:           0.4rem 1.25rem;
}

.ms-events-single__meta dt {
    font-weight: 700;
    color:       var(--ms-text-muted);
    white-space: nowrap;
}

.ms-events-single__meta dd {
    margin: 0;
    color:  var(--ms-text);
}

.ms-events-single__content {
    line-height: 1.7;
    color:       var(--ms-text);
}

.ms-events-single__actions {
    display:        flex;
    flex-direction: column;
    gap:            var(--ms-space-sm);
    margin-top:     var(--ms-space-lg);
    padding-top:    var(--ms-space-md);
    border-top:     1px solid var(--ms-border);
}

/* ================================================================
   Responsive: Tablet
   ================================================================ */
@media (max-width: 768px) {
    .ms-events-list--cards {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   Responsive: Mobil
   ================================================================ */
@media (max-width: 600px) {

    /* Padding Beitrag + Veranstaltung auf Handy: 4vw links/rechts */
    .ms-events-single {
        padding-left:  4vw;
        padding-right: 4vw;
    }

    .ms-events-item__meta {
        grid-template-columns: 1fr;
        gap:                   0.1rem;
    }

    .ms-events-item__meta dt {
        margin-top: 0.5rem;
    }

    .ms-events-item__meta:first-child dt:first-child {
        margin-top: 0;
    }

    .ms-events-item__actions {
        flex-direction: column;
        align-items:    flex-start;
    }

    .ms-events-item__btn {
        width:          100%;
        justify-content: center;
    }

    .ms-events-single__meta {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   Reduzierte Bewegung (WCAG 2.2.2)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .ms-events-list--cards .ms-events-item,
    .ms-events-item__thumbnail img,
    .ms-events-item__btn,
    .ms-events-item__title a {
        transition: none;
        transform:  none;
    }
}

/* ================================================================
   Datum als prominente h4-Überschrift in der Kachel
   ================================================================ */
.ms-events-item__date {
    font-size:    1rem;
    font-weight:  700;
    color:        var(--ms-color-primary, #10428c);
    margin:       0 0 0.6rem;
    text-align:   left;
    line-height:  1.3;
}

.ms-events-item__date time {
    font-style: normal;
}

/* ================================================================
   Stretch-Link: gesamte Card auf Übersichtsseite klickbar
   Die Titellink-::after-Pseudo-Ebene überspannt die ganze Kachel.
   Interaktive Elemente (Buttons, Badge) liegen via z-index darüber.
   (WCAG-Standard "stretched link"-Pattern)
   ================================================================ */
.ms-events-list--cards .ms-events-item__title a::after {
    content:  '';
    position: absolute;
    inset:    0;
    z-index:  1;
}

.ms-events-list--cards .ms-events-item__title a {
    text-decoration: none;
}

.ms-events-list--cards .ms-events-item__actions,
.ms-events-list--cards .ms-events-item__actions .nectar-cta,
.ms-events-list--cards .ms-events-item__actions a,
.ms-events-list--cards .ms-events-item__categories {
    position: relative;
    z-index:  2;
}

/* ================================================================
   Nectar/Salient CTA-Button – Event-Actions
   Alle Buttons nutzen das Salient see-through-Style
   ================================================================ */
.ms-events-item__actions .nectar-cta {
    margin-top: 0 !important;
    display:    inline-block;
    font-size:  60%; /* Buttons auf Übersichtsseite kompakt */
}

.ms-events-item__actions .nectar-cta .link_wrap {
    display: inline-block;
}

.ms-events-item__actions .nectar-cta .link_text {
    text-decoration: none;
}

/* ================================================================
   Salient Block-IDs ausblenden (Theme-spezifisch)
   ================================================================ */
#block-5,
#block-6 {
    display: none;
}

/* ================================================================
   Druckstile
   ================================================================ */
@media print {
    .ms-events-item__btn--register,
    .ms-events-item__btn--ical {
        display: none;
    }

    .ms-events-item__btn--pdf::after {
        content: ' (' attr(href) ')';
        font-size: 0.75em;
        font-weight: 400;
    }

    .ms-events-list--cards {
        display: block;
    }

    .ms-events-list--cards .ms-events-item {
        break-inside: avoid;
        margin-bottom: 1rem;
        box-shadow:    none;
        border:        1px solid #ccc;
    }
}

/* ================================================================
   High Contrast Mode (Windows)
   ================================================================ */
@media (forced-colors: active) {
    .ms-events-item__btn {
        border: 2px solid ButtonText;
    }

    .ms-events-item__category {
        background:   Highlight;
        color:        HighlightText;
        border:       1px solid ButtonText;
    }

    .ms-events-item__deadline {
        color: Mark;
    }
}

/* ================================================================
   Single-Template: Mobil-Anpassung Detail-Tabelle
   ================================================================ */
@media (max-width: 600px) {
    .ms-events-single__details {
        grid-template-columns: 1fr;
    }
    .ms-events-single__detail-label {
        padding-bottom: 0.2rem;
        border-bottom:  none;
        padding-top:    0.75rem;
    }
    .ms-events-single__detail-value {
        padding-top: 0;
    }
    .ms-events-single__info-card {
        padding: 1rem 1.25rem;
    }
    .ms-events-single__actions {
        flex-direction: column;
        align-items:    flex-start;
    }
}

/* ── iCal Textlink ─────────────────────────────────────────────── */
.ms-events-item__ical-link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.35rem;
    font-size:       0.78rem;
    color:           var(--ms-text-muted);
    text-decoration: none;
    border-bottom:   1px dotted var(--ms-border);
    padding-bottom:  1px;
    transition:      color 0.15s, border-color 0.15s;
    margin-top:      0.15rem;
}
.ms-events-item__ical-link:hover {
    color:        var(--ms-accent);
    border-color: var(--ms-accent);
}
.ms-events-item__ical-link svg {
    flex-shrink: 0;
    opacity:     0.6;
}
.ms-events-item__ical-link:hover svg {
    opacity: 1;
}


/* ── Zusatzinfos auf Einzelseite ───────────────────────────────── */
.ms-events-single__additional {
    margin-top: 20px;
}

.ms-events-single__section-title {
	font-size:1.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   Agenda-Layout  [ms_events layout="agenda"]
   ═══════════════════════════════════════════════════════════════ */

.ms-events-list--agenda {
    display:        flex;
    flex-direction: column;
    gap:            0;
    list-style:     none;
    margin:         0;
    padding:        0;
}

/* ── Gesamt-Item als klickbarer Link ─────────────────────────── */
.ms-events-agenda-item {
    display:         flex;
    align-items:     stretch;
    width:           100%;
    border:          2px solid var(--ms-color-accent, #f7be1a);
    border-top:      none;          /* zusammenhängende Trennlinie */
    text-decoration: none;
    color:           inherit;
    background:      #ffffff;
    transition:      box-shadow 0.18s ease, transform 0.18s ease;
    position:        relative;
    min-height:      72px;
}

/* Erstes Item: oberer Border wieder an */
.ms-events-agenda-item:first-child {
    border-top: 2px solid var(--ms-color-accent, #f7be1a);
}

.ms-events-agenda-item:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    transform:  translateY(-2px);
    z-index:    1;
    border-top: 2px solid var(--ms-color-accent, #f7be1a);  /* beim Hover auch oben */
}

@media (prefers-reduced-motion: reduce) {
    .ms-events-agenda-item { transition: none; transform: none !important; }
}

/* ── Datum-Block (links, dunkelblau) ─────────────────────────── */
.ms-events-agenda-item__date {
    flex-shrink:     0;
    width:           100px;
    min-width:       80px;
    background:      var(--ms-color-primary, #10428c);
    color:           #ffffff;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         12px 10px;
    gap:             2px;
    line-height:     1.15;
}

.ms-events-agenda-item__dm {
    font-size:   1.5rem;
    font-weight: 700;
    display:     block;
    text-align:  center;
    letter-spacing: 0.01em;
}

.ms-events-agenda-item__year {
    font-size:   0.95rem;
    font-weight: 700;
    display:     block;
    text-align:  center;
}

/* ── Inhalt (Titel + Meta) ───────────────────────────────────── */
.ms-events-agenda-item__content {
    flex:            1;
    min-width:       0;   /* Truncation ermöglichen */
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         14px 20px;
    gap:             4px;
}

.ms-events-agenda-item__title {
    display:       block;
    font-size:     1.8rem;
    font-weight:   700;
    color:         var(--ms-color-primary-dark, #0d2240);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    line-height:   1.3;
}

.ms-events-agenda-item:hover .ms-events-agenda-item__title {
    color: var(--ms-color-primary, #10428c);
}

.ms-events-agenda-item__meta {
    display:     block;
    font-size:   1.3rem;
    color:       var(--ms-color-text, #000000);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* ── CTA rechts ──────────────────────────────────────────────── */
.ms-events-agenda-item__cta {
    flex-shrink:  0;
    display:      flex;
    align-items:  center;
    padding:      14px 20px;
    font-size:    0.82rem;
    font-weight:  700;
    color:        var(--ms-color-primary, #10428c);
    border-left:  1px solid var(--ms-color-accent, #f7be1a);
    white-space:  nowrap;
    transition:   background 0.15s, color 0.15s;
    min-width:    120px;
    justify-content: center;
}

.ms-events-agenda-item:hover .ms-events-agenda-item__cta {
    background: var(--ms-color-accent, #f7be1a);
    color:      var(--ms-color-primary-dark, #0d2240);
}

/* Kategorie im Agenda-Item — Plaintext, Größe wie __year */
.ms-events-agenda-item__cat {
    display:       block;
    font-size:     0.95rem;
    font-weight:   400;
    color:         #646970;
    line-height:   1.2;
    margin-bottom: 1px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ms-events-agenda-item__date {
        width:     64px;
        min-width: 64px;
    }
    .ms-events-agenda-item__dm   { font-size: 1.5rem; }
    .ms-events-agenda-item__year { font-size: 1.5rem; }
    .ms-events-agenda-item__cta  {
        padding:   10px 12px;
        min-width: 80px;
        font-size: 0.75rem;
    }
    .ms-events-agenda-item__content { padding: 10px 14px; }
    .ms-events-agenda-item__title   { font-size: 0.92rem; }
}

@media (max-width: 600px) {
    .ms-events-agenda-item__cta { display: none; }
}


/* ================================================================
   v2.0.0 – Mitarbeiter Frontend-Navigation (.ms-events-fnav)
   Namespace:  .ms-events-fnav
   Sichtbar:   nur für eingeloggte Nutzer mit Submit-Berechtigung
   Position:   fixed, rechts, vertikal zentriert
   ================================================================ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.ms-events-fnav {
    position:        fixed;
    right:           0;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         9998;
    display:         flex;
    flex-direction:  column;
    align-items:     stretch;
    margin:          0;
    padding:         0;
    list-style:      none;
    /* Schatten links/unten für Tiefenwirkung */
    box-shadow:      -3px 3px 18px rgba(0, 0, 0, 0.18);
}

/* ── Toggle-Button (Hamburger) ────────────────────────────────── */
.ms-events-fnav__toggle {
    display:         flex;
    align-items:     center;
    gap:             8px;
    width:           100%;
    padding:         10px 16px;
    background:      var(--ms-color-primary, #10428c);
    color:           #ffffff;
    border:          none;
    border-bottom:   1px solid rgba(255, 255, 255, 0.15);
    cursor:          pointer;
    font-size:       0.82rem;
    font-weight:     700;
    font-family:     inherit;
    text-align:      left;
    white-space:     nowrap;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    line-height:     1;
    /* Kein border-radius */
}

.ms-events-fnav__toggle:hover {
    background: var(--ms-color-primary-dark, #0c3070);
}

.ms-events-fnav__toggle:focus-visible {
    outline:        3px solid var(--ms-color-accent, #f7be1a);
    outline-offset: -3px;
}

.ms-events-fnav__toggle svg {
    flex-shrink: 0;
}

/* ── Menu-Liste ───────────────────────────────────────────────── */
.ms-events-fnav__menu {
    display:        flex;
    flex-direction: column;
    margin:         0;
    padding:        0;
    list-style:     none;
    /* Menü sichtbar – Toggle steuert via .ms-events-fnav--collapsed */
    overflow:       hidden;
    max-height:     600px;
    transition:     max-height 0.22s ease;
}

.ms-events-fnav--collapsed .ms-events-fnav__menu {
    max-height: 0;
}

.ms-events-fnav__menu li {
    margin:  0;
    padding: 0;
}

/* ── Einzelne Nav-Links ───────────────────────────────────────── */
.ms-events-fnav__item {
    display:         block;
    padding:         11px 20px;
    background:      #ffffff;
    color:           var(--ms-color-primary, #10428c);
    border:          1px solid var(--ms-color-accent, #f7be1a);
    border-top:      none;   /* Items direkt aneinander */
    font-size:       0.88rem;
    font-weight:     700;
    font-family:     inherit;
    text-decoration: none;
    white-space:     nowrap;
    line-height:     1.3;
    /* Kein border-radius */
    transition:      background 0.15s ease,
                     color      0.15s ease,
                     border-color 0.15s ease;
    /* Mindestbreite für kurze Labels */
    min-width:       180px;
}

/* Erstes Item schließt direkt an den Toggle-Button an */
.ms-events-fnav__menu li:first-child .ms-events-fnav__item {
    border-top: 1px solid var(--ms-color-accent, #f7be1a);
}

/* ── Hover-Status ─────────────────────────────────────────────── */
.ms-events-fnav__item:hover {
    background:   var(--ms-color-primary, #10428c);
    color:        #ffffff;
    border-color: var(--ms-color-primary, #10428c);
}

/* ── Aktiver Status (current page) ───────────────────────────── */
.ms-events-fnav__item--active,
.ms-events-fnav__item--active:hover {
    background:   var(--ms-color-primary, #10428c);
    color:        #ffffff;
    border-color: var(--ms-color-primary, #10428c);
    cursor:       default;
}

/* ── Abmelden-Item: leicht abgesetzt ─────────────────────────── */
.ms-events-fnav__item--logout {
    border-top: 2px solid var(--ms-color-accent, #f7be1a);
    color:      #646970;
}

.ms-events-fnav__item--logout:hover {
    background:   var(--ms-color-primary, #10428c);
    color:        #ffffff;
    border-color: var(--ms-color-primary, #10428c);
}

/* ── Focus (WCAG 2.2 AA) ──────────────────────────────────────── */
.ms-events-fnav__item:focus-visible {
    outline:        3px solid var(--ms-color-accent, #f7be1a);
    outline-offset: -3px;
    z-index:        1;
    position:       relative;
}

/* ── Responsive: Mobile ≤ 640 px ─────────────────────────────── */
@media (max-width: 640px) {
    .ms-events-fnav {
        top:            auto;
        bottom:         calc(20px + env(safe-area-inset-bottom, 0px));
        left:           50%;
        right:          auto;
        transform:      translateX(-50%);
        flex-direction: column-reverse; /* Toggle unten = Daumen erreichbar */
        box-shadow:     0 -3px 18px rgba(0, 0, 0, 0.18);
        width:          min(320px, calc(100vw - 32px));
    }

    .ms-events-fnav__menu {
        flex-direction: column;
        flex-wrap:      nowrap;
        max-height:     none;
        overflow:       visible;
    }

    /* Salient überschreibt list-style auf li – explizit zurücksetzen */
    .ms-events-fnav__menu li,
    .ms-events-fnav__menu li::before,
    .ms-events-fnav__menu li::marker {
        list-style:      none !important;
        list-style-type: none !important;
        margin:          0 !important;
        padding-left:    0 !important;
    }

    .ms-events-fnav--collapsed .ms-events-fnav__menu {
        display: none;
    }

    .ms-events-fnav__item {
        display:     block;
        border:      1px solid var(--ms-color-accent, #f7be1a);
        min-width:   0;
        width:       100%;
        text-align:  center;
        padding:     12px 20px;
        font-size:   0.85rem;
        white-space: normal;
    }

    .ms-events-fnav__menu li:first-child .ms-events-fnav__item {
        border-top: 1px solid var(--ms-color-accent, #f7be1a);
    }

    .ms-events-fnav__toggle {
        justify-content: center;
    }
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ms-events-fnav__menu {
        transition: none;
    }
    .ms-events-fnav__item {
        transition: none;
    }
}

/* ── High Contrast (Windows forced-colors) ───────────────────── */
@media (forced-colors: active) {
    .ms-events-fnav__item {
        border:     2px solid ButtonText;
        background: ButtonFace;
        color:      ButtonText;
    }
    .ms-events-fnav__item:hover,
    .ms-events-fnav__item--active {
        background: Highlight;
        color:      HighlightText;
        border-color: Highlight;
    }
    .ms-events-fnav__toggle {
        background: Highlight;
        color:      HighlightText;
        border:     2px solid ButtonText;
    }
}

/* ── Salient/Nectar-Kompatibilität ────────────────────────────── */
/* Verhindert, dass das Theme die feste Positionierung überschreibt */
.ms-events-fnav,
.ms-events-fnav * {
    box-sizing: border-box;
}

/* Salient setzt manchmal a { text-transform: uppercase } – zurücksetzen */
.ms-events-fnav__item {
    text-transform: none;
    letter-spacing: normal;
}