/* Gerenderte Markdown-Texte (texte/markdown.py) in ihrem eigenen Container.
   Der doppelte Klassenselektor hebt jede Regel über die Seitenregeln gleicher
   Form (etwa `.page-field h3`, `.page-field p`), gleich in welcher Reihenfolge
   die Stylesheets geladen werden. Die Überschriften messen sich am Text, den
   sie gliedern; auf Seitenfeldern (1rem) bleiben sie so kleiner als der
   Abschnittskopf (`.page-section__head h2`, 1.05rem). Die Szenentexte der
   Sitzung stufen sie in sitzung.css über ihren größeren Fließtext. */

.markdown-text {
    overflow-wrap: anywhere;
}

.markdown-text.markdown-text > :first-child {
    margin-top: 0;
}

.markdown-text.markdown-text > :last-child {
    margin-bottom: 0;
}

.markdown-text.markdown-text p {
    margin: 0 0 var(--space-2);
}

.markdown-text.markdown-text :is(h3, h4, h5) {
    margin: var(--space-3) 0 var(--space-1);
    color: var(--color-text);
    line-height: 1.25;
}

.markdown-text.markdown-text h3 {
    font-family: var(--font-heading);
    font-size: 1em;
    font-weight: 600;
}

.markdown-text.markdown-text h4 {
    font-family: var(--font-body);
    font-size: .94em;
    font-weight: 700;
}

.markdown-text.markdown-text h5 {
    font-family: var(--font-body);
    font-size: .86em;
    font-weight: 700;
    color: var(--color-text-muted);
}

.markdown-text.markdown-text :is(ul, ol) {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-3);
}

.markdown-text.markdown-text li > p {
    margin: 0;
}

.markdown-text.markdown-text blockquote {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-2);
    border-left: 3px solid var(--color-border);
    color: var(--color-text-muted);
}

.markdown-text.markdown-text pre {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: .9em;
    white-space: pre-wrap;
}

.markdown-text.markdown-text a {
    text-decoration: underline;
}

/* Sichtbarer Hinweis, ob ein Link in neuem Tab oder im Mailprogramm öffnet;
   Screenreader lesen stattdessen den Text daneben. Das schmale Leerzeichen
   rückt das Zeichen ab, ohne das Abstandsraster zu verlassen. */
.markdown-text.markdown-text a[target="_blank"]::after {
    content: "\2009\2197" / "";
}

.markdown-text.markdown-text a[href^="mailto:"]::after {
    content: "\2009\2709" / "";
}

.markdown-text__extern {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Editorfeld mit Umschalter „Bearbeiten | Vorschau“ (texte/includes/markdown_feld.html). */
.markdown-feld__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.markdown-feld__umschalter {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.markdown-feld__umschalter button {
    padding: 0 var(--space-1);
    line-height: 1.8;
    border: 0;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.markdown-feld__umschalter button[aria-pressed="true"] {
    background: var(--color-text);
    color: var(--color-surface);
}

.markdown-feld__vorschau {
    min-height: 116px;
    padding: var(--space-1);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.markdown-feld__hinweis {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: .75rem;
}

/* Lese-Hülle um das Editorfeld (texte/includes/markdown_lesefeld.html): Der
   gerenderte Text steht gekürzt auf gut vier Zeilen und lässt sich ganz
   anzeigen; die Kante links hält Lese- und Bearbeitungsstand zusammen. */
.markdown-lesefeld__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.markdown-lesefeld__kopf label {
    margin: 0;
}

.markdown-lesefeld__lesen {
    padding-left: var(--space-2);
    border-left: 3px solid var(--color-border);
}

.markdown-lesefeld__text {
    max-height: 6.5em;
    overflow: hidden;
    mask-image: linear-gradient(#000 60%, transparent);
}

.markdown-lesefeld__text--ganz {
    max-height: none;
    mask-image: none;
}

.markdown-lesefeld__umfang {
    margin-top: var(--space-1);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-accent);
    font: inherit;
    font-size: .84rem;
    text-decoration: underline;
    cursor: pointer;
}

.markdown-lesefeld__leer {
    margin: 0;
    color: var(--color-text-muted);
    font-style: italic;
}

.markdown-lesefeld__aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-1);
}