/* Lokale Rechtschreibpruefung (Typo.js) - Overlay-Technik fuer <textarea>. 2.4.147 */

.eit-sp-wrap {
    position: relative;
}

/* Backdrop liegt exakt hinter dem Textfeld und zeichnet die roten Wellenlinien.
   Text ist transparent (das echte Textfeld zeigt den Text), nur die
   text-decoration (eigene Farbe) ist sichtbar. */
.eit-sp-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    color: transparent;
    background: transparent;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-color: transparent !important;
    z-index: 1;
}

.eit-sp-backdrop .eit-sp-err {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: #e74c3c;
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-color: #e74c3c;
    text-decoration-skip-ink: none;
}

/* Echtes Textfeld liegt ueber dem Backdrop; Hintergrund transparent, damit die
   Wellenlinien durchscheinen. Der weisse/dunkle Hintergrund kommt vom Wrap. */
textarea.eit-sp-active {
    position: relative;
    z-index: 2;
    background-color: transparent !important;
}

/* Kontextmenue mit Korrekturvorschlaegen */
.eit-sp-menu {
    position: fixed;
    z-index: 2147483600;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    min-width: 170px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 13px;
    padding: 4px 0;
    color: #333;
}
.eit-sp-menu .eit-sp-item {
    padding: 6px 16px;
    cursor: pointer;
    white-space: nowrap;
}
.eit-sp-menu .eit-sp-item:hover { background: #2a90d9; color: #fff; }
.eit-sp-menu .eit-sp-none { padding: 6px 16px; color: #999; font-style: italic; }
.eit-sp-menu .eit-sp-sep  { border-top: 1px solid #eee; margin: 4px 0; }
.eit-sp-menu .eit-sp-add  { padding: 6px 16px; cursor: pointer; color: #16a085; }
.eit-sp-menu .eit-sp-add:hover { background: #16a085; color: #fff; }

/* Dark-Theme Anpassung */
html[data-theme="dark"] .eit-sp-menu,
body[data-theme="dark"] .eit-sp-menu { background: #2b2b2b; border-color: #444; color: #ddd; }
html[data-theme="dark"] .eit-sp-menu .eit-sp-sep,
body[data-theme="dark"] .eit-sp-menu .eit-sp-sep { border-top-color: #444; }