/* LibreOffice-Erweiterungen — was allein diese Seite betrifft.
 *
 * Tafel, Bausteine und der Aufbau der einfachen Seiten stehen in
 * `gemeinsam/`; die Anleitungen setzt der Bau mit den Klassen der Hilfe
 * (`.hilfe…`), deren Gestaltung aus `bausteine.css` kommt. Hier steht allein
 * der Kasten zum Herunterladen.
 */

/* Der Ton dieser Anwendung: orange, die Gruppe „Kanzlei“ auf der Übersicht —
   derselbe Ton, den `icon.svg` bereits trägt. */
:root {
  --ton-app: var(--ton-orange);
}

/* Der Sprung aus der Übersicht soll die Überschrift nicht unter die stehende
   Kopfleiste schieben; ein Fokusrahmen um die ganze Karte wäre lauter als
   der Sprung selbst. */
.erweiterung {
  scroll-margin-top: 5rem;
}

.erweiterung:focus {
  outline: none;
}

.erweiterung__fassung {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-leise);
}

.erweiterung__laden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* `.knopf` ist für `<button>` gebaut; ein Verweis bekäme sonst seinen Strich. */
.erweiterung__laden a.knopf {
  text-decoration: none;
}

.erweiterung__groesse {
  font-size: 0.85rem;
  color: var(--text-leise);
}

/* 64 Zeichen ohne Lücke laufen sonst auf schmalen Schirmen über den Rand. */
.erweiterung__pruefsumme {
  font-size: 0.8rem;
  color: var(--text-leise);
  overflow-wrap: anywhere;
}

.erweiterung__pruefsumme code {
  color: var(--text);
}

.erweiterung .hilfe {
  margin-top: 1.25rem;
}

/* Bilder in einer Anleitung (`{{BILDER}}`, MOVE-Icons): Bildschirmfotos in
   natürlicher Größe, untereinander, damit „bisher“ und „nachher“ an derselben
   Kante beginnen; auf schmalen Schirmen schrumpfen sie mit. */
.vergleich {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
}

.vergleich__bild {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.vergleich__titel {
  font-size: 0.85rem;
  color: var(--text-leise);
}

.vergleich img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--linie);
}