/*
 * MS Events – Frontend-Formular Styles
 * Version:    2.1.0
 * Namespace:  .ms-events-form*, .ms-events-login*
 * WCAG:       2.2 AA
 * Theme:      Salient/Nectar kompatibel
 */

/* ================================================================
   CSS Custom Properties (form-spezifische Ergänzungen; Basis-Vars in :root via ms-events-frontend.css)
   ================================================================ */
/* Form-spezifische CSS-Variablen — erweitern die :root-Basis aus ms-events-frontend.css.
   Wer nur ms-events-form.css ohne ms-events-frontend.css lädt,
   bekommt hier saubere Fallbacks. */
:root {
    --ms-border-focus:  var(--ms-accent, var(--ms-color-primary, #10428c));
    --ms-shadow-focus:  0 0 0 3px rgba(16, 66, 140, 0.22);
    --ms-error:         #d63638;
    --ms-error-bg:      #fff5f5;
    --ms-success:       #1d7917;
    --ms-success-bg:    #f0fff0;
    --ms-warning-bg:    #fffbe6;
    --ms-info-bg:       #e8f4f8;
}

/* ================================================================
   Meldungen / Notices
   ================================================================ */
.ms-events-form__notice {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    padding:       var(--ms-space-md) var(--ms-space-lg);
    border-radius: var(--ms-radius);
    border:        1px solid transparent;
    margin-bottom: var(--ms-space-lg);
    font-size:     0.95rem;
    line-height:   1.5;
}

.ms-events-form__notice p { margin: 0 0 0.5rem; }
.ms-events-form__notice p:last-child { margin-bottom: 0; }

.ms-events-form__notice--error {
    background:   var(--ms-error-bg);
    border-color: var(--ms-error);
    color:        #7a0000;
}
.ms-events-form__notice--error ul {
    margin:   0.5rem 0 0;
    padding-left: 1.25rem;
}
.ms-events-form__notice--error ul a {
    color:    inherit;
    font-weight: 600;
}

.ms-events-form__notice--success {
    background:   var(--ms-success-bg);
    border-color: var(--ms-success);
    color:        #1a4f17;
}
.ms-events-form__notice--warning {
    background:   var(--ms-warning-bg);
    border-color: #c59a00;
    color:        #5a4200;
}
.ms-events-form__notice--info {
    background:   var(--ms-info-bg);
    border-color: var(--ms-accent);
    color:        #0a3a5a;
}
.ms-events-form__notice svg {
    flex-shrink: 0;
    margin-top:  2px;
    color:       inherit;
}

/* ================================================================
   Login-Box
   ================================================================ */
.ms-events-login {
    display:         flex;
    justify-content: center;
    padding:         var(--ms-space-xl) var(--ms-space-md);
}

.ms-events-login__box {
    width:         100%;
    max-width:     420px;
    background:    var(--ms-bg);
    border:        1px solid var(--ms-border);
    border-radius: calc(var(--ms-radius) * 2);
    padding:       var(--ms-space-xl);
    box-shadow:    0 4px 16px rgba(0, 0, 0, 0.07);
}

.ms-events-login__title {
    font-size:     1.4rem;
    font-weight:   700;
    margin:        0 0 var(--ms-space-lg);
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    color:         var(--ms-text);
}

.ms-events-login__title svg {
    color: var(--ms-accent);
}

.ms-events-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-md);
}

/* Passwort-Toggle */
.ms-events-form__input-wrapper {
    position: relative;
    display:  block;
}

.ms-events-login__toggle-pw {
    position:    absolute;
    right:       10px;
    top:         50%;
    transform:   translateY(-50%);
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--ms-text-muted);
    padding:     4px;
    line-height: 1;
    border-radius: var(--ms-radius);
}
.ms-events-login__toggle-pw:hover { color: var(--ms-text); }
.ms-events-login__toggle-pw:focus-visible {
    outline:        2px solid var(--ms-accent);
    outline-offset: 2px;
}
.ms-events-login__toggle-pw[aria-pressed="true"] {
    color: var(--ms-accent);
}

/* ================================================================
   Formular-Wrapper
   ================================================================ */
.ms-events-form-wrap {
    max-width: 820px;
}

.ms-events-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--ms-space-lg);
}

/* ================================================================
   Sektionen
   ================================================================ */
.ms-events-form__section {
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    padding:       0;
    margin:        0;
    overflow:      hidden;
}

.ms-events-form__section--privacy {
    border:     none;
    padding:    0;
    background: transparent;
}

.ms-events-form__section-title {
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    background:     var(--ms-bg-secondary);
    border-bottom:  1px solid var(--ms-border);
    padding:        0.75rem 1.25rem;
    font-size:      0.95rem;
    font-weight:    700;
    color:          var(--ms-text);
    text-align:     left;
    width:          100%;
}

.ms-events-form__section-title svg {
    color:       var(--ms-accent);
    flex-shrink: 0;
}

.ms-events-form__section > :not(.ms-events-form__section-title) {
    padding: 0 1.25rem;
}
.ms-events-form__section > .ms-events-form__field:first-of-type {
    padding-top: var(--ms-space-md);
}
.ms-events-form__section > .ms-events-form__field:last-child,
.ms-events-form__section > .ms-events-form__row:last-child {
    padding-bottom: var(--ms-space-md);
}
.ms-events-form__section > .ms-events-form__checkbox-group {
    padding: var(--ms-space-md) 1.25rem;
}

/* ================================================================
   Felder
   ================================================================ */
.ms-events-form__field {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
    padding-top:    var(--ms-space-md);
    padding-bottom: var(--ms-space-sm);
}

.ms-events-form__field--error .ms-events-form__input,
.ms-events-form__field--error .ms-events-form__textarea {
    border-color: var(--ms-error);
    background:   var(--ms-error-bg);
}

.ms-events-form__label {
    font-weight:  600;
    font-size:    0.9rem;
    color:        var(--ms-text);
    line-height:  1.3;
}

.ms-events-form__required {
    color:        var(--ms-error);
    margin-left:  2px;
    font-weight:  700;
}

/* Einzeilige Inputs */
.ms-events-form__input {
    width:         100%;
    padding:       0.7rem 0.9rem;
    font-size:     1.05rem;
    font-family:   inherit;
    color:         var(--ms-color-text, #000000);
    background:    var(--ms-bg);
    border:        1.5px solid var(--ms-border);
    border-radius: var(--ms-radius);
    line-height:   1.5;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing:    border-box;
    -webkit-appearance: none;
    appearance:    none;
}

.ms-events-form__input--small {
    width: 120px;
}

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

/* WCAG 2.2 Focus */
.ms-events-form__input:focus,
.ms-events-form__textarea:focus {
    outline:      none;
    border-color: var(--ms-border-focus);
    box-shadow:   var(--ms-shadow-focus);
}

/* Passwort-Feld hat rechts Platz für Toggle */
.ms-events-form__input-wrapper .ms-events-form__input {
    padding-right: 2.5rem;
}

/* Textarea */
.ms-events-form__textarea {
    width:       100%;
    padding:     0.7rem 0.9rem;
    font-size:   1.05rem;
    font-family: inherit;
    color:       var(--ms-color-text, #000000);
    background:  var(--ms-bg);
    border:      1.5px solid var(--ms-border);
    border-radius: var(--ms-radius);
    line-height: 1.6;
    resize:      vertical;
    min-height:  130px;
    transition:  border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing:  border-box;
    -webkit-appearance: none;
    appearance:  none;
}

/* Beschreibung / Hinweis */
.ms-events-form__hint {
    font-size:  0.82rem;
    color:      var(--ms-text-muted);
    margin:     0;
    line-height: 1.4;
}

/* Fehler */
.ms-events-form__error {
    font-size:   0.85rem;
    color:       var(--ms-error);
    margin:      0;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         4px;
}

/* ================================================================
   Row: Felder nebeneinander
   ================================================================ */
.ms-events-form__row {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap:                   0 1rem;
    padding-top:           0;
    padding-bottom:        0;
}

.ms-events-form__row .ms-events-form__field {
    padding-left:  0;
    padding-right: 0;
}

/* ================================================================
   Checkboxen
   ================================================================ */
.ms-events-form__checkbox-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem 1.5rem;
}

.ms-events-form__field--checkbox {
    padding-top: var(--ms-space-sm);
}

.ms-events-form__checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         0.5rem;
    cursor:      pointer;
    font-size:   0.95rem;
    color:       var(--ms-text);
    line-height: 1.4;
}

.ms-events-form__checkbox-label input[type="checkbox"] {
    width:         18px;
    height:        18px;
    flex-shrink:   0;
    margin:        1px 0 0;
    accent-color:  var(--ms-accent);
    cursor:        pointer;
}

.ms-events-form__checkbox-label input[type="checkbox"]:focus-visible {
    outline:        3px solid var(--ms-accent);
    outline-offset: 2px;
}

/* ================================================================
   PDF-Datei-Upload (Drag & Drop Zone)
   ================================================================ */
.ms-events-form__file-drop {
    border:        2px dashed var(--ms-border);
    border-radius: var(--ms-radius);
    padding:       var(--ms-space-lg) var(--ms-space-md);
    text-align:    center;
    cursor:        pointer;
    background:    var(--ms-bg-secondary);
    transition:    border-color 0.15s ease, background 0.15s ease;
    position:      relative;
    overflow:      hidden;
    color:         var(--ms-text-muted);
}

.ms-events-form__file-drop:hover,
.ms-events-form__file-drop.ms-dragging {
    border-color:  var(--ms-accent);
    background:    var(--ms-info-bg, #e8f4f8);
    color:         var(--ms-text);
}

.ms-events-form__file-drop:focus-visible {
    outline:        3px solid var(--ms-accent);
    outline-offset: 2px;
    border-color:   var(--ms-accent);
}

.ms-events-form__file-drop svg {
    color:         var(--ms-accent);
    margin-bottom: 0.5rem;
}

.ms-events-form__file-drop p {
    margin:        0.25rem 0;
    font-size:     0.9rem;
}

.ms-events-form__file-link {
    color:           var(--ms-accent);
    font-weight:     600;
    text-decoration: underline;
    cursor:          pointer;
}

.ms-events-form__file-hint {
    font-size:  0.8rem !important;
    color:      var(--ms-text-muted);
}

/* Datei-Input versteckt (visuell, aber für Screenreader erreichbar) */
.ms-events-form__file-input {
    position:  absolute;
    inset:     0;
    opacity:   0;
    width:     100%;
    height:    100%;
    cursor:    pointer;
    font-size: 0; /* verhindert Browser-native Button-Label */
}

/* Datei-Vorschau */
.ms-events-form__file-preview {
    margin-top:  0.5rem;
    font-size:   0.88rem;
    font-weight: 600;
    color:       var(--ms-success);
    min-height:  1.2em;
}

/* ================================================================
   Actions / Submit
   ================================================================ */
.ms-events-form__actions {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--ms-space-sm);
    padding-top:    var(--ms-space-md);
}

.ms-events-form__required-note {
    font-size:  0.82rem;
    color:      var(--ms-text-muted);
    margin:     0;
}

.ms-events-form__recaptcha-notice {
    font-size:  0.78rem;
    color:      var(--ms-text-muted);
    max-width:  560px;
    line-height: 1.4;
}

.ms-events-form__recaptcha-notice a {
    color: var(--ms-text-muted);
}

.ms-events-form__recaptcha-status {
    font-size:  0.82rem;
    color:      var(--ms-text-muted);
    margin:     0;
    min-height: 1.2em;
    font-style: italic;
}

/* Submit-Button */
.ms-events-form__submit {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    background:      var(--ms-accent);
    color:           #fff;
    border:          none;
    border-radius:   var(--ms-radius);
    padding:         0.7rem 1.75rem;
    font-size:       1rem;
    font-weight:     700;
    font-family:     inherit;
    cursor:          pointer;
    line-height:     1;
    transition:      background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    white-space:     nowrap;
}

.ms-events-form__submit--full {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.75rem;
}

.ms-events-form__submit:hover:not(:disabled) {
    background: var(--ms-accent-hover);
}

.ms-events-form__submit:active:not(:disabled) {
    transform: scale(0.98);
}

.ms-events-form__submit:focus-visible {
    outline:        3px solid var(--ms-accent);
    outline-offset: 3px;
    box-shadow:     0 0 0 5px rgba(0, 115, 170, 0.15);
}

.ms-events-form__submit:disabled {
    opacity:  0.6;
    cursor:   not-allowed;
}

/* Lade-Spinner im Button */
.ms-events-form__submit .ms-spinner {
    display:         inline-block;
    width:           14px;
    height:          14px;
    border:          2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius:   50%;
    animation:       ms-spin 0.7s linear infinite;
    flex-shrink:     0;
}

@keyframes ms-spin {
    to { transform: rotate(360deg); }
}

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

    .ms-events-login__box {
        padding: var(--ms-space-lg) var(--ms-space-md);
    }

    .ms-events-form__section > :not(.ms-events-form__section-title) {
        padding-left:  var(--ms-space-md);
        padding-right: var(--ms-space-md);
    }

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

/* ================================================================
   Reduced Motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .ms-events-form__input,
    .ms-events-form__textarea,
    .ms-events-form__file-drop,
    .ms-events-form__submit {
        transition: none;
    }
    .ms-spinner {
        animation: none;
        border:    2px solid rgba(255,255,255,0.7);
    }
}

/* ================================================================
   High Contrast Mode
   ================================================================ */
@media (forced-colors: active) {
    .ms-events-form__input,
    .ms-events-form__textarea {
        border: 2px solid ButtonText;
    }
    .ms-events-form__submit {
        border:     2px solid ButtonText;
        background: Highlight;
        color:      HighlightText;
    }
    .ms-events-form__file-drop {
        border: 2px dashed ButtonText;
    }
}

/* ================================================================
   Salient-Kompatibilität: Override spezifischer Theme-Stile
   ================================================================ */

/* Salient setzt manchmal box-sizing global auf content-box */
.ms-events-form-wrap *,
.ms-events-login * {
    box-sizing: border-box;
}

/* Salient h2/h3 padding zurücksetzen für Section-Titles */
.ms-events-form__section .ms-events-form__section-title {
    padding-top:    0.75rem;
    padding-bottom: 0.75rem;
}

/* Salient Buttons haben manchmal global text-transform: uppercase */
.ms-events-form__submit {
    text-transform: none;
    letter-spacing: normal;
}

/* ================================================================
   v1.4.0 Erweiterungen
   ================================================================ */

/* ── Auswahl-Seite [ms_events_choose] ─────────────────────────── */
.ms-events-choose {
    width: 100%;
}

.ms-events-choose__intro {
    font-size:   1.05rem;
    font-weight: 600;
    color:       var(--ms-text);
    margin:      0 0 1.5rem;
}

/* Immer zwei gleichbreite Spalten — auf Mobilgeräten untereinander */
.ms-events-choose__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem;
}

/* ── Die Karte ─────────────────────────────────────────────────── */
.ms-events-choose__card {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    gap:             1.75rem;
    padding:         2.25rem 2rem;
    background:      var(--ms-bg, #fff);
    border:          1px solid var(--ms-color-accent, #f7be1a);
    border-radius:   0;
    text-decoration: none;
    color:           var(--ms-text, #1d2327);
    box-shadow:      0 2px 8px rgba(0, 0, 0, 0.06);
    transition:      box-shadow 0.18s ease,
                     transform  0.18s ease;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
}

/* Goldener linker Akzentstreifen */
.ms-events-choose__card::before {
    content:    '';
    position:   absolute;
    inset:      0 auto 0 0;
    width:      4px;
    background: var(--ms-color-accent, #f7be1a);
    border-radius: 0;
    transition: width 0.18s ease;
}

.ms-events-choose__card:hover {
    box-shadow:   0 8px 28px rgba(0, 0, 0, 0.13);
    transform:    translateY(-3px);
    border-color: var(--ms-color-accent, #f7be1a);
    color:        var(--ms-text, #1d2327);
}

.ms-events-choose__card:hover::before {
    width: 6px;
}

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

/* ── Icon-Bereich ──────────────────────────────────────────────── */
.ms-events-choose__icon-wrap {
    flex-shrink: 0;
    color:       var(--ms-color-primary, #10428c);  /* VDST-Blau, passend zu Nectar-Buttons */
    opacity:     0.85;
    transition:  opacity 0.18s ease, transform 0.18s ease;
}

.ms-events-choose__card:hover .ms-events-choose__icon-wrap {
    opacity:   1;
    transform: scale(1.06);
}

/* ── Textbereich ───────────────────────────────────────────────── */
.ms-events-choose__body {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
    flex:           1;
    min-width:      0;
}

.ms-events-choose__label {
    font-size:   1.2rem;
    font-weight: 700;
    display:     block;
    line-height: 1.25;
    color:       var(--ms-text, #1d2327);
}

.ms-events-choose__desc {
    font-size:   0.88rem;
    color:       var(--ms-text-muted, #646970);
    display:     block;
    line-height: 1.4;
}

/* „Jetzt erstellen →" – erscheint dezent am unteren Rand des Textblocks */
.ms-events-choose__cta {
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--ms-color-primary, #10428c);
    margin-top:  0.5rem;
    opacity:     0;
    transform:   translateX(-6px);
    transition:  opacity 0.18s ease, transform 0.18s ease;
}

.ms-events-choose__card:hover .ms-events-choose__cta {
    opacity:   1;
    transform: translateX(0);
}

/* ── Responsive: ab ≤ 600 px untereinander ─────────────────────── */
@media (max-width: 600px) {
    .ms-events-choose__grid {
        grid-template-columns: 1fr;
    }
    .ms-events-choose__card {
        padding: 1.5rem 1.25rem;
        gap:     1.25rem;
    }
    .ms-events-choose__icon-wrap svg {
        width:  48px;
        height: 48px;
    }
    .ms-events-choose__cta {
        opacity:   1;
        transform: none;
    }
}

/* ── Reduced Motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ms-events-choose__card,
    .ms-events-choose__card::before,
    .ms-events-choose__icon-wrap,
    .ms-events-choose__cta {
        transition: none;
        transform:  none !important;
    }
    .ms-events-choose__cta {
        opacity: 1;
    }
}

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


/* ── Bild-Vorschau ─────────────────────────────────────────────── */
.ms-events-form__image-preview {
    margin-top: 0.75rem;
}

.ms-events-form__image-thumb {
    max-width:     280px;
    max-height:    200px;
    width:         auto;
    height:        auto;
    display:       block;
    border-radius: var(--ms-radius);
    border:        1px solid var(--ms-border);
    object-fit:    cover;
}

/* Bild-Drop-Zone etwas größer */
.ms-events-form__file-drop--image {
    min-height: 130px;
}

/* ── Word-Paste Hinweis ────────────────────────────────────────── */
.ms-events-form__word-hint {
    display:     flex;
    align-items: flex-start;
    gap:         0.4rem;
    font-size:   0.82rem;
    color:       var(--ms-text-muted);
    background:  var(--ms-info-bg, #e8f4f8);
    border-left: 3px solid var(--ms-accent);
    padding:     0.5rem 0.75rem;
    border-radius: 0 var(--ms-radius) var(--ms-radius) 0;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.ms-events-form__word-hint svg {
    flex-shrink: 0;
    margin-top:  1px;
    color:       var(--ms-accent);
}

/* Rich-Textarea etwas größer */
.ms-events-form__textarea--rich {
    min-height: 220px;
    font-family: inherit;
}



/* ================================================================
   Rich-Text-Editor – Ausführliche Beschreibung (v2.3.9)
   Toolbar + Editor immer sichtbar (kein JS-Toggle nötig).
   No-JS-Fallback über <noscript> in der PHP-Ausgabe.
   ================================================================ */

/* Toolbar: immer sichtbar */
.ms-events-richtext-toolbar {
    display:          flex;
    align-items:      center;
    gap:              4px;
    padding:          6px 8px;
    background:       var(--ms-bg-alt, #f5f7f9);
    border:           1.5px solid var(--ms-border);
    border-bottom:    none;
    border-radius:    var(--ms-radius) var(--ms-radius) 0 0;
    flex-wrap:        wrap;
}

/* Contenteditable Editor: immer sichtbar */
.ms-events-richtext-editor {
    display:          block;
    width:            100%;
    min-height:       280px;
    padding:          0.8rem 1rem;
    font-size:        1.05rem;
    font-family:      inherit;
    color:            var(--ms-color-text, #000000);
    background:       var(--ms-bg, #ffffff);
    border:           1.5px solid var(--ms-border);
    border-radius:    0 0 var(--ms-radius) var(--ms-radius);
    line-height:      1.7;
    resize:           vertical;
    overflow-y:       auto;
    box-sizing:       border-box;
    outline:          none;
    transition:       border-color 0.15s ease, box-shadow 0.15s ease;
    overflow-wrap:    break-word;
    word-break:       break-word;
    /* min-height als CSS custom property, überschreibbar per resize */
    min-height:       280px;
}

.ms-events-richtext-editor:focus {
    border-color:     var(--ms-border-focus);
    box-shadow:       var(--ms-shadow-focus);
}

/* Textarea ist per PHP inline-style="display:none" versteckt.
   Wird durch <noscript>-Block im No-JS-Fall wieder sichtbar. */
.ms-events-richtext-textarea {
    min-height:       280px;
}

/* ── Toolbar-Buttons ── */
.ms-richtext-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        2.1rem;
    height:           2.1rem;
    padding:          0 0.5rem;
    background:       transparent;
    border:           1.5px solid transparent;
    border-radius:    var(--ms-radius, 0);
    cursor:           pointer;
    font-size:        0.88rem;
    font-family:      inherit;
    color:            var(--ms-text, #1a1a1a);
    line-height:      1;
    transition:       background 0.12s, border-color 0.12s, color 0.12s;
    user-select:      none;
    -webkit-user-select: none;
}

.ms-richtext-btn:hover {
    background:       var(--ms-bg, #ffffff);
    border-color:     var(--ms-border);
    color:            var(--ms-primary, #10428c);
}

.ms-richtext-btn:focus-visible {
    outline:          2px solid var(--ms-primary, #10428c);
    outline-offset:   2px;
}

/* Aktiver Zustand (execCommand-State) */
.ms-richtext-btn.is-active {
    background:       var(--ms-primary, #10428c);
    border-color:     var(--ms-primary, #10428c);
    color:            #ffffff;
}

.ms-richtext-btn.is-active:hover {
    background:       var(--ms-primary-dark, #0d3470);
    border-color:     var(--ms-primary-dark, #0d3470);
    color:            #ffffff;
}

/* Bold/Italic kursiv/fett darstellen */
.ms-richtext-btn--bold   strong { font-weight: 700; }
.ms-richtext-btn--italic em     { font-style: italic; }

/* Trennlinie zwischen Buttongruppen */
.ms-richtext-separator {
    width:            1px;
    height:           1.4rem;
    background:       var(--ms-border);
    margin:           0 4px;
    flex-shrink:      0;
}

/* ── Inhaltsformatierung im contenteditable-Editor ── */
/* Damit H3 und Listen innerhalb des Editors korrekt aussehen,          */
/* auch wenn das Theme globale Reset-Styles setzt (z. B. Salient/Nectar). */

.ms-events-richtext-editor h3 {
    font-size:        1.15rem;
    font-weight:      700;
    line-height:      1.3;
    margin:           0.9em 0 0.4em;
    padding:          0;
    color:            inherit;
}

.ms-events-richtext-editor h3:first-child {
    margin-top:       0;
}

.ms-events-richtext-editor p {
    margin:           0 0 0.6em;
}

.ms-events-richtext-editor ul,
.ms-events-richtext-editor ol {
    margin:           0.4em 0 0.6em 1.4em;
    padding:          0;
}

.ms-events-richtext-editor li {
    margin:           0.25em 0;
}

.ms-events-richtext-editor strong,
.ms-events-richtext-editor b {
    font-weight:      700;
}

.ms-events-richtext-editor em,
.ms-events-richtext-editor i {
    font-style:       italic;
}

/* Leerer Editor: Placeholder-Text (CSS-only) */
.ms-events-richtext-editor:empty::before,
.ms-events-richtext-editor[data-placeholder]:empty::before {
    content:          attr(data-placeholder);
    color:            var(--ms-placeholder, #9ca3af);
    pointer-events:   none;
    font-style:       italic;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .ms-events-richtext-editor,
    .ms-richtext-btn {
        transition: none;
    }
}

/* ── High Contrast ── */
@media (forced-colors: active) {
    .ms-events-richtext-editor {
        border: 2px solid ButtonText;
    }
    .ms-richtext-btn {
        border: 1px solid ButtonText;
    }
    .ms-richtext-btn.is-active {
        background:  Highlight;
        color:       HighlightText;
        border-color: Highlight;
    }
}