/* Editor (Jodit) im Stil der Suite + Darstellung der damit geschriebenen Texte.

   Bewusst OHNE @layer: Tailwinds Preflight nimmt Listen, Ueberschriften und Zitaten ihr Aussehen; diese Regeln
   muessen darueber liegen. Jodits eigenes Stylesheet wird erst mit dem Editor nachgeladen (also NACH dieser
   Datei) — deshalb laufen die Farben ueber Jodits Variablen am <body> (schlagen die Vorgaben an :root durch
   Vererbung, unabhaengig von der Reihenfolge) und die uebrigen Regeln ueber `.psn-editor` mit hoeherer
   Spezifitaet. */

body {
    --jd-color-border: color-mix(in srgb, var(--psn-muted) 40%, transparent);
    --jd-color-separator: color-mix(in srgb, var(--psn-muted) 30%, transparent);
    --jd-color-text: var(--psn-text);
    --jd-color-icon: var(--psn-text);
    --jd-color-text-icons: var(--psn-text);
    --jd-color-placeholder: color-mix(in srgb, var(--psn-muted) 40%, transparent);
    --jd-color-panel: #fff;
    --jd-color-background-light-gray: #fff;
    --jd-color-background-button-hover: color-mix(in srgb, var(--psn-primary) 10%, #fff);
    --jd-color-button-background-hover: color-mix(in srgb, var(--psn-primary) 10%, #fff);
    --jd-color-button-background-hover-opacity40: color-mix(in srgb, var(--psn-primary) 16%, #fff);
    --jd-color-button-background-hover-opacity60: color-mix(in srgb, var(--psn-primary) 16%, #fff);
    --jd-color-border-selected: var(--psn-primary);
    --jd-color-border-active: var(--psn-primary);
    --jd-color-background-active: var(--psn-primary);
    --jd-color-background-selection: color-mix(in srgb, var(--psn-primary) 25%, #fff);
    --jd-font-default: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --jd-font-size-default: 0.875rem;
    --jd-border-radius-default: 0.25rem;
    --jd-focus-input-box-shadow: 0 0 0 1px var(--psn-primary);
}

/* --- Rahmen: ein Feld wie die anderen Eingabefelder, Leiste liegt darin ------------------------------- */

.jodit-container.psn-editor:not(.jodit_inline) {
    border: 1px solid color-mix(in srgb, var(--psn-muted) 40%, transparent);
    border-radius: 0.25rem;
    background-color: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.jodit-container.psn-editor:not(.jodit_inline):focus-within {
    border-color: var(--psn-primary);
    box-shadow: 0 0 0 1px var(--psn-primary);
}

.jodit-container.psn-editor .jodit-workplace {
    border: 0;
    border-radius: 0 0 0.25rem 0.25rem;
}

.jodit-container.psn-editor .jodit-toolbar__box:not(:empty) {
    border-bottom: 1px solid color-mix(in srgb, var(--psn-muted) 20%, transparent);
    border-radius: 0.25rem 0.25rem 0 0;
    background-color: color-mix(in srgb, var(--psn-surface) 60%, #fff);
}

.jodit-container.psn-editor .jodit-toolbar-editor-collection {
    padding: 0.25rem 0.375rem;
    background: none;
}

/* Jodit zeichnet Trennlinien zwischen Knopfzeilen als Hintergrundbild. */
.jodit-container.psn-editor .jodit-toolbar-editor-collection_mode_horizontal::after {
    display: none;
}

.jodit-container.psn-editor .jodit-toolbar-button,
.jodit-container.psn-editor .jodit-toolbar-button__button,
.jodit-container.psn-editor .jodit-toolbar-button__trigger {
    border-radius: 0.25rem;
}

.jodit-container.psn-editor .jodit-toolbar-button__button[aria-pressed='true'],
.jodit-container.psn-editor .jodit-toolbar-button__button[aria-pressed='true']:hover {
    background-color: color-mix(in srgb, var(--psn-primary) 16%, #fff);
    color: var(--psn-primary);
}

.jodit-container.psn-editor .jodit-toolbar-button__button[aria-pressed='true'] .jodit-icon {
    fill: var(--psn-primary);
    stroke: var(--psn-primary);
}

.jodit-container.psn-editor .jodit-ui-separator {
    margin: 0.25rem 0.375rem;
}

/* Der Fokus-Rahmen sitzt am Feld, nicht noch einmal an der Schreibflaeche. */
.jodit-container.psn-editor .jodit-wysiwyg:focus,
.jodit-container.psn-editor .jodit-wysiwyg:focus-visible {
    outline: none;
}

.jodit-container.psn-editor:not(.jodit_inline) .jodit-wysiwyg {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--psn-text);
}

.jodit-container.psn-editor:not(.jodit_inline) .jodit-placeholder {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --- Aufklappende Listen und das Link-Feld (haengen am <body>, nicht im Feld) -------------------------- */

.jodit-popup__content {
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--psn-text);
}

.jodit-popup .jodit-ui-input__wrapper {
    border-radius: 0.25rem;
}

.jodit-popup .jodit-ui-button_variant_primary,
.jodit-popup .jodit-ui-button_variant_primary:hover:not([disabled]) {
    border-radius: 0.25rem;
    background-color: var(--psn-primary);
    color: #fff;
    font-weight: 600;
}

.jodit-popup .jodit-ui-button_variant_primary:hover:not([disabled]) {
    opacity: 0.9;
}

/* --- Geschriebener Text: im Editor und in der Anzeige gleich ----------------------------------------- */
/* `trix-content`: Anzeige-Klasse aus der Zeit vor Jodit, bleibt fuer aeltere Vorlagen gueltig. */

.psn-richtext,
.trix-content {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) > * + * {
    margin-top: 0.5em;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) p {
    margin: 0;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) p + p {
    margin-top: 0.5em;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) :is(h1, h2, h3) {
    font-weight: 600;
    line-height: 1.3;
    color: var(--psn-text);
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) h1 { font-size: 1.25em; }
:is(.psn-richtext, .trix-content, .jodit-wysiwyg) h2 { font-size: 1.15em; }
:is(.psn-richtext, .trix-content, .jodit-wysiwyg) h3 { font-size: 1em; }

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) :is(ul, ol) {
    margin-left: 0;
    padding-left: 1.5em;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) ul { list-style: disc; }
:is(.psn-richtext, .trix-content, .jodit-wysiwyg) ol { list-style: decimal; }
:is(.psn-richtext, .trix-content, .jodit-wysiwyg) ul ul { list-style: circle; }

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) li + li {
    margin-top: 0.15em;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 0 0.75em;
    border: 0;
    border-left: 3px solid color-mix(in srgb, var(--psn-muted) 40%, transparent);
    color: var(--psn-muted);
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) pre {
    padding: 0.5em 0.75em;
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, var(--psn-muted) 10%, #fff);
    font-family: "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) a {
    color: var(--psn-primary);
    text-decoration: underline;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) :is(strong, b) {
    font-weight: 600;
}

:is(.psn-richtext, .trix-content, .jodit-wysiwyg) img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}