/* FH Wedel - Rich-Text-Inhalte (RTE-Preset "fhw").
   Frontend: unter .fhw-rte. Backend-Editor: dieselbe Datei als contentsCss;
   TYPO3 setzt dort "#<id> .ck-content " vor jede Regel. Deshalb hat jede
   Regel zwei Teile: ".fhw-rte X" fuer das Frontend und
   "X:where(.ck-content *)" fuer den Editor (greift nur dort). */

.fhw-rte > :first-child { margin-top: 0; }
.fhw-rte > :last-child { margin-bottom: 0; }

/* h2 nur im Artikeltext des Blogs (Preset "fhw_artikel") */
.fhw-rte h2, h2:where(.ck-content *) { margin-top: var(--space-7); }
.fhw-rte h3, h3:where(.ck-content *) { margin-top: var(--space-6); }
.fhw-rte h4, h4:where(.ck-content *) { margin-top: var(--space-5); }

.fhw-rte ul, ul:where(.ck-content *),
.fhw-rte ol, ol:where(.ck-content *) {
    margin: 0 0 var(--space-4);
    padding-left: 1.25em;
}

.fhw-rte li + li, li:where(.ck-content *) + li { margin-top: var(--space-1); }
.fhw-rte li::marker, li:where(.ck-content *)::marker { color: var(--fh-blau); }

/* Haekchen-Liste (Stil "Liste: Haekchen"), Icon: Lucide check, Dunkelblau */
.fhw-rte ul.liste-haekchen, ul.liste-haekchen:where(.ck-content *) {
    padding-left: 0;
    list-style: none;
}

.fhw-rte ul.liste-haekchen > li, ul.liste-haekchen > li:where(.ck-content *) {
    position: relative;
    padding-left: 1.75em;
}

.fhw-rte ul.liste-haekchen > li::before, ul.liste-haekchen > li:where(.ck-content *)::before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 1.15em;
    height: 1.15em;
    background: var(--fh-blau);
    -webkit-mask: url('../Icons/lucide/check.svg') center / contain no-repeat;
    mask: url('../Icons/lucide/check.svg') center / contain no-repeat;
}

/* Zitat in Alef (Designsystem: Alef fuer Zitate) */
.fhw-rte blockquote, blockquote:where(.ck-content *) {
    margin: var(--space-5) 0;
    padding-left: var(--space-5);
    border-left: 4px solid var(--fh-blau-hell);
    color: var(--fh-blau);
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--weight-heading);
    line-height: var(--leading-subhead);
}

.fhw-rte blockquote p:last-child, blockquote:where(.ck-content *) p:last-child { margin-bottom: 0; }

/* Tabellen: CKEditor setzt sie in figure.table; schmal scrollt nur die
   Tabelle waagerecht, nicht die Seite (WCAG 1.4.10 erlaubt das bei Tabellen). */
.fhw-rte figure.table, figure.table:where(.ck-content *) {
    margin: 0 0 var(--space-5);
    overflow-x: auto;
}

.fhw-rte table, table:where(.ck-content *) {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body-s);
}

.fhw-rte th, th:where(.ck-content *),
.fhw-rte td, td:where(.ck-content *) {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
    text-align: left;
    vertical-align: top;
}

.fhw-rte th, th:where(.ck-content *) {
    border-bottom-color: var(--border-strong);
    color: var(--fh-blau);
    font-weight: var(--weight-bold);
}

.fhw-rte caption, caption:where(.ck-content *),
.fhw-rte figcaption, figcaption:where(.ck-content *) {
    margin-top: var(--space-2);
    color: var(--text-leise);
    font-size: var(--text-caption);
    text-align: left;
}

/* Datum und Uhrzeit nicht innerhalb der Markierung umbrechen */
.fhw-rte mark.hervorhebung-datum, mark.hervorhebung-datum:where(.ck-content *),
.fhw-rte mark.hervorhebung-uhrzeit, mark.hervorhebung-uhrzeit:where(.ck-content *) {
    white-space: nowrap;
}