/* === FontSwitcher ===
   Die Regeln greifen nur, solange am html-Element das passende data-Attribut gesetzt ist (font-switcher.js).
   Ohne Auswahl ändert diese Datei nichts. */

/* Schriftart des Fließtexts – erst ab body, damit am html-Element die Standardschrift der Anwendung erhalten bleibt.
   --oo-font-switcher-standard hält sie fest; Überschriften ohne eigene Auswahl behalten sie. */
html[data-oo-font] {
    --oo-font-switcher-standard: var(--oo-font-family);
}

html[data-oo-font] body {
    --oo-font-family: var(--oo-font-switcher-familie);
    font-family: var(--oo-font-family);
}

html[data-oo-font]:not([data-oo-font-ueberschrift]) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--oo-font-switcher-standard) !important;
}

/* Größe: ersetzt die Grundgröße in px (auch die aus FontSizeInit), damit alle rem-Werte mitwachsen. */
html[data-oo-font-groesse] {
    font-size: var(--oo-font-switcher-groesse);
}

/* Zeichenabstand und Zeilenhöhe für den Fließtext und den Richtext-Editor.
   Elemente mit eigenem Wert (z. B. Buttons, Eingabefelder) behalten diesen. */
html[data-oo-font-zeichenabstand] body,
html[data-oo-font-zeichenabstand] .jodit-wysiwyg {
    letter-spacing: var(--oo-font-switcher-zeichenabstand);
}

html[data-oo-font-zeilenhoehe] body,
html[data-oo-font-zeilenhoehe] .jodit-wysiwyg {
    line-height: var(--oo-font-switcher-zeilenhoehe);
}

/* Eigene Schrift für Überschriften; !important wegen html * { font-family: inherit !important } in reset.css. */
html[data-oo-font-ueberschrift] :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--oo-font-switcher-ueberschrift) !important;
}

/* Schriftstärke der Überschriften; !important, damit sie auch Überschriften mit eigener font-weight (z. B. aus Komponenten) erreicht. */
html[data-oo-font-ueberschrift-gewicht] :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--oo-font-switcher-ueberschrift-gewicht) !important;
}

/* Schwebend (Standard): Button rechts unten fixiert. Ohne diese Klasse sitzt der Button im normalen Fluss, z. B. im Header. */
.oo-font-switcher {
    display: inline-block;
}

.oo-font-switcher--schwebend {
    position: fixed;
    right: calc(var(--oo-space-4) + env(safe-area-inset-right));
    bottom: calc(var(--oo-space-4) + env(safe-area-inset-bottom));
    z-index: calc(var(--oo-z-dropdown) - 1);
}

/* Inhalt des ContextMenu-Panels; Rahmen, Schatten, Position und Höhenbegrenzung kommen vom ContextMenu. */
.oo-font-switcher__panel {
    width: 370px;
    padding: 0 var(--oo-space-1);
}

.oo-font-switcher__vorschau {
    font-size: 15px;
}

.oo-font-switcher__vorschau--ueberschrift {
    font-size: 17px;
}