/* Mini-WYSIWYG-Editor fuer Beschreibungs-Felder.
   Wird per data-richtext="<textarea-name>" auf einem <div> aktiviert.
   Die zugehoerige <textarea> wird beim Submit synchron aktualisiert. */

.rt-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 140px;
}

.rt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    background: #f7f7f8;
    border-radius: 8px 8px 0 0;
}

.rt-toolbar button {
    background: transparent;
    border: 1px solid transparent;
    padding: 3px 7px;
    min-width: 28px;
    font-size: 13px;
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

.rt-toolbar button:hover {
    background: #fff;
    border-color: var(--border);
}

.rt-toolbar button.is-active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.rt-toolbar .rt-sep {
    width: 1px;
    background: var(--border);
    margin: 2px 4px;
    align-self: stretch;
}

.rt-content {
    flex: 1 1 auto;
    padding: 10px 12px;
    min-height: 100px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    overflow-y: auto;
    max-height: 360px;
}

.rt-content:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
}

.rt-content p, .rt-content div { margin: 0 0 8px; }
.rt-content p:last-child, .rt-content div:last-child { margin-bottom: 0; }
.rt-content ul, .rt-content ol { margin: 4px 0 8px; padding-left: 20px; }
.rt-content li { margin: 2px 0; }
/* Verschachtelte Listen: Punkt-/Zahlen-Stil variieren je Ebene, damit
   die Tiefe visuell sofort erkennbar ist. */
.rt-content ul ul, .richtext-out ul ul { list-style-type: circle; margin: 2px 0; }
.rt-content ul ul ul, .richtext-out ul ul ul { list-style-type: square; }
.rt-content ol ol, .richtext-out ol ol { list-style-type: lower-alpha; margin: 2px 0; }
.rt-content ol ol ol, .richtext-out ol ol ol { list-style-type: lower-roman; }
.rt-content a { color: var(--brand); }

/* Read-Only-Anzeige: gleiche Typografie wie der Editor, damit der
   gespeicherte Text im Backoffice/Frontend konsistent aussieht. */
.richtext-out p, .richtext-out div { margin: 0 0 8px; }
.richtext-out p:last-child, .richtext-out div:last-child { margin-bottom: 0; }
.richtext-out ul, .richtext-out ol { margin: 4px 0 8px; padding-left: 20px; }