/* ══════════════════════════════════════════════════
   v2 OVERLAYS — Modal, Toast, Tooltip, Collapse
   Der Prototyp ist ein statischer Mockup und hat keine echten Overlays (der
   "Erfolg"-Zustand ist z. B. eine ganze Seite, kein Modal). Eigene
   Ergaenzungen im Token-Vokabular des Prototyps (Radius, Schatten, Abstaende),
   gedacht fuer assets/v2-ui.js.
   ══════════════════════════════════════════════════ */

/* ── Ueberlagerungs-Grund (Scrim) ──
   EINE Regel fuer JEDE schwebende Flaeche der Anwendung. Die Bauteile setzen
   ihren Grund deshalb selbst NICHT mehr; sie sagen nur, WO sie liegen (Lage,
   z-index, Ueberblendung) — wie sie aussehen, steht hier.

   Warum zusammen und nicht bei jedem Bauteil: der Wert stand viermal hart im
   Code, in zwei Dateien, und beim naechsten Dialog waere es der fuenfte
   geworden. Ein Weichzeichner an einer der vier Stellen haette die anderen
   drei sofort falsch aussehen lassen.

   shell.css laedt VOR overlays.css (app-v2.js), die Regel steht also NACH den
   Bauteilen, die sie betrifft. Darauf kommt es aber nicht an: sie gewinnt
   nicht durch Reihenfolge, sondern weil in shell.css gar kein `background`
   mehr steht. Wer dort einen eintraegt, hebt diese Regel auf — und weil beide
   Selektoren gleich spezifisch sind, waere es die spaetere von beiden. */
.modal-backdrop,
.shell-scrim,
.aside-scrim,
.cmdk-backdrop {
  background: var(--ms-scrim);
  backdrop-filter: blur(var(--ms-scrim-blur));
  -webkit-backdrop-filter: blur(var(--ms-scrim-blur));
}
/* Die Suchpalette legt sich ueber die Arbeitsflaeche, ohne eine Entscheidung
   zu verlangen — sie darf den Hintergrund nicht so weit zurueckdraengen. */
.cmdk-backdrop {
  backdrop-filter: blur(var(--ms-scrim-blur-soft));
  -webkit-backdrop-filter: blur(var(--ms-scrim-blur-soft));
}
/* Wer wenig Transparenz wuenscht, bekommt keinen Weichzeichner — dann muss die
   Deckkraft die Trennung zum Hintergrund allein tragen. Ohne diesen Block
   waere die Einstellung des Nutzers zwar geachtet, der Grund aber zu schwach:
   ein Dialog stuende dann fast unbegrenzt in der Seite. */
@media (prefers-reduced-transparency: reduce) {
  .modal-backdrop,
  .shell-scrim,
  .aside-scrim,
  .cmdk-backdrop {
    background: var(--ms-scrim-opaque);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── Modal ── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--ms-z-modal-backdrop);
  opacity: 0; transition: opacity var(--ms-transition-base);
}
.modal-backdrop.show { opacity: 1; }
.modal {
  position: fixed; inset: 0; z-index: var(--ms-z-modal);
  display: none; overflow-y: auto;
  padding: var(--ms-space-6) var(--ms-space-4);
}
/* Jedes Modal steht mittig — waagerecht UND senkrecht, ohne Zusatzklasse.
   Zentriert wird ueber `margin: auto` am Dialog, nicht ueber
   `align-items: center`: bei Inhalten, die hoeher als das Fenster sind,
   schneidet die Ausrichtung den oberen Rand unerreichbar ab, die
   automatischen Aussenabstaende dagegen nicht. */
.modal.show { display: flex; }
/* Der Dialog wird nie hoeher als das Fenster (abzueglich des Innenabstands der
   Ueberlagerung); was nicht passt, scrollt im Rumpf. Kopf- und Fusszeile
   bleiben dabei stehen. */
.modal-dialog {
  width: 100%; max-width: 560px; margin: auto; max-height: 100%;
  /* Selbst Flex-Spalte: eine prozentuale `max-height` am Inhalt haette keinen
     Bezugswert, weil die Hoehe des Dialogs `auto` ist. Ueber Flex erbt der
     Inhalt die Deckelung dagegen zuverlaessig. */
  display: flex; flex-direction: column;
  transform: translateY(-16px); opacity: 0;
  transition: transform var(--ms-transition-base), opacity var(--ms-transition-base);
}
.modal.show .modal-dialog { transform: translateY(0); opacity: 1; }
.modal-dialog-sm { max-width: 380px; }
.modal-dialog-lg { max-width: 800px; }
/* `width: 100%` ist nicht kosmetisch: bei `.modal-dialog-centered` wird der
   Dialog zum Flex-Behaelter, und ein Flex-Kind ohne Breitenangabe schrumpft auf
   seinen Inhalt. Ein Rumpf mit `width: 100%` (z.B. das PDF-Fenster der
   Dateivorschau) blieb dadurch schmal und klebte am linken Rand des Dialogs. */
.modal-content {
  width: 100%;
  background: var(--ms-card-bg);
  border-radius: var(--ms-radius-xl);
  box-shadow: var(--ms-card-shadow-hover);
  overflow: hidden;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.modal-header, .modal-footer { flex: 0 0 auto; }
/* `min-height: 0` ist Pflicht: ein Flex-Kind weigert sich sonst, unter seine
   Inhaltshoehe zu schrumpfen, und der Bildlauf landet wieder aussen. */
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Die Twig-Komponente templates/components/MsModal.html.twig setzt eine frei
   waehlbare `class` auf das AEUSSERE .modal-Element (nicht .modal-dialog) —
   geteilt mit den alten Vorlagen, deshalb hier dieselben Klassennamen wie in
   ms-base.css statt eigener v2-Namen: .modal-lg/.modal-sm/.modal-xl (Groesse),
   .modal-dialog-centered (senkrecht zentriert), .modal-dialog-scrollable
   (Inhalt scrollt, nicht die Seite). `.h-100` gehoert dazu, steht aber als
   allgemeines Groessen-Utility in grid.css. */
/* Die Groesse gehoert auf den DIALOG, nicht auf die Ueberlagerung: `.modal`
   liegt mit `inset: 0` ueber der ganzen Seite: bekommt sie selbst eine
   `max-width`, schrumpft die Ueberlagerung auf diesen Wert und klebt links —
   der Dialog wird dann innerhalb dieses Streifens zentriert und sitzt sichtbar
   links der Bildschirmmitte (aufgefallen an der Dateivorschau mit
   `.modal-xl`). */
.modal-sm .modal-dialog { max-width: 380px; }
.modal-lg .modal-dialog { max-width: 800px; }
/* DIE 1140 HIER SIND NICHT DIE SEITENBREITE. Sie waren bis zum 2026-09-17
   zufaellig dieselbe Zahl wie `--ms-content-width`; seither traegt die
   Kundenseite auf breiten Schirmen 1320px, dieser Dialog aber unveraendert
   1140px. Ein Dialog ist keine Seite: er legt sich UEBER den Inhalt und soll
   ihn nicht ausfuellen. Wer die Seitenbreite aendert, laesst diese Zeile also
   in Ruhe — sie sieht nur aus, als gehoerte sie dazu. */
.modal-xl .modal-dialog { max-width: 1140px; }
/* Ohne Wirkung — Modale stehen ohnehin mittig. Die Klasse bleibt nur stehen,
   weil aeltere Vorlagen sie mitgeben. */
.modal-dialog-centered { }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ms-space-4);
  padding: var(--ms-space-5) var(--ms-space-6);
  border-bottom: 1px solid var(--ms-border-light);
}
/* `line-height: 1.2` und nicht die geerbte: der Titel ist EINZEILIG, und die
   geerbte Zeilenhoehe (1.5) legt oben und unten Luft um die Buchstaben. Weil
   ein Titel wie „Bar-Banner" keine Unterlaengen hat, sitzt die Schrift damit
   optisch hoch — der Abstand nach unten zum Trennstrich sieht groesser aus als
   der nach oben, obwohl die Polsterung gleich ist (gemeldet 2026-09-18). Eine
   Zahl und kein Token: es ist das Mass DIESER Zeile, wie `width: 288px` beim
   Datumswaehler. */
.modal-title {
  font-size: var(--ms-text-h4); font-weight: var(--ms-weight-semibold);
  margin: 0; line-height: 1.2;
}
/* ── Kopfzeile mit Beizeile (2026-09-17) ──
   Der Dialog der Schnellinfo traegt unter dem Veranstaltungsnamen den Zustand
   und die Bestellnummer. Sie standen vorher als erste Zeile im INHALT, direkt
   unter einem Kopf, der dieselbe Bestellung schon benannte — eine Zeile fuer
   eine Wiederholung. Weisung des Betreibers: „das kleine Badge und die
   Bestellnummer kann oben mit in den Header der Karte."

   ZWEI KLASSEN UND SONST NICHTS EIGENES: das Abzeichen ist `.order-badge`, die
   Nummer `.cell-meta` — beides Bauteile, die es gibt. Hier steht nur, dass
   Titel und Beizeile untereinander und Abzeichen und Nummer nebeneinander
   stehen.

   `:empty` haelt den Abstand zurueck, wo kein Dialog eine Beizeile fuellt —
   die Gruppe ist ein allgemeines Bauteil des Kopfes, nicht eines der
   Bestellvorschau. */
/* EINE ZEILE UND NICHT ZWEI (korrigiert am 2026-09-17): untereinander wuchs
   der Kopf um eine ganze Zeile, fuer ein Abzeichen und zwoelf Ziffern. Der
   Betreiber hat es beanstandet. Nebeneinander bleibt der Kopf so hoch wie sein
   Titel; `flex-wrap` faengt den Fall auf, dass Name, zwei Abzeichen und Nummer
   zusammen nicht in eine Zeile passen. */
.modal-title-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-space-3); min-width: 0; }
.modal-title-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ms-space-3); }
.modal-title-meta:empty { display: none; }
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--ms-text-tertiary); font-size: var(--ms-glyph-lg); line-height: 1; padding: 0;
}
.modal-close:hover { color: var(--ms-text-primary); }
/* .btn-close: dieselbe Rolle wie .modal-close, aber ohne eigenen Textinhalt
   (aeltere Vorlagen setzen ein leeres <button class="btn-close">) — deshalb
   das × per ::before statt per Inhalt. */
.btn-close {
  width: var(--ms-icon-btn-h-dense); height: var(--ms-icon-btn-h-dense); padding: 0; border: none; background: none;
  cursor: pointer; color: var(--ms-text-tertiary); font-size: 0; line-height: 1;
}
.btn-close::before { content: '×'; font-size: var(--ms-glyph-lg); }
.btn-close:hover { color: var(--ms-text-primary); }
/* SENKRECHT WIE KOPF UND FUSS, waagerecht wie sie auch.

   Hier stand rundum --ms-space-6 (32px), waehrend .modal-header und
   .modal-footer senkrecht --ms-space-5 (24px) tragen. Damit war der Abstand
   UNTER der Trennlinie acht Pixel groesser als der darueber — an jedem Dialog
   der Anwendung, und am deutlichsten dort, wo gleich unter dem Kopf ein Satz
   steht statt eines Feldes. Eine Trennlinie soll mittig zwischen dem stehen,
   was sie trennt. */
.modal-body { padding: var(--ms-space-5) var(--ms-space-6); }
/* ── Rumpf mit stehendem Kopf ──
   Fuer einen Dialog, in dem man SUCHT: das Suchfeld bleibt stehen, die Liste
   darunter scrollt. Ohne das scrollt der Rumpf als Ganzes, und das Suchfeld
   waere nach drei Zeilen aus dem Bild — genau dann, wenn man es braucht.

   Der Rumpf wird dafuer selbst zur Flex-Spalte und gibt das Scrollen an die
   Liste ab (`.select-list`, forms.css — dasselbe Bauteil wie im Auswahlfeld).
   Gebraucht vom Adressdialog des Bestellassistenten. */
.modal-body--picker { display: flex; flex-direction: column; overflow: hidden; }
/* Das erste und letzte Kind bringen ihren eigenen Aussenabstand mit (ein
   Absatz, ein Meldungsband) und schoben den Inhalt noch weiter von der
   Trennlinie weg. Die Polsterung des Rumpfes ist der Abstand — nicht sie
   plus ein Erbe des Bauteils. */
.modal-body > :first-child { margin-top: 0; }
.modal-body > :last-child { margin-bottom: 0; }
/* RUBRIK IM DIALOG — dieselbe Gliederung wie in der Detailmaske
   (shell.css: `.md-detail .section-title`), eine Stufe kleiner. Ein Dialog
   mit mehreren Handlungen untereinander (Karte bearbeiten: Regel, Verschieben,
   Ersetzen) las sich ohne diese Regel als ein Block: die Ueberschriften kamen
   in --ms-text-h4 daher, also in der GROESSE DES DIALOGTITELS, und zwischen
   den Abschnitten stand nichts. Eine Unterrubrik in der Groesse ihres
   Ueberbaus ist keine Unterrubrik.

   Die erste Rubrik bekommt Linie und Abstand mit: ueber ihr steht der
   Auskunftssatz zur Auswahlart, und der gehoert nicht zum ersten Abschnitt. */
.modal-body .section-title {
  /* --ms-text-md und nicht --ms-text-lg: in der dichten Fassung
     (tokens-dense.css) steht --ms-text-h4 auf 17px, --ms-text-lg aber
     unveraendert auf 18px — die Unterrubrik waere dort GROESSER geworden als
     der Dialogtitel darueber. --ms-text-md (16px) liegt in beiden Fassungen
     zwischen Fliesstext und Titel. Den Rang traegt ohnehin nicht die Groesse
     allein, sondern Halbfett plus Trennlinie. */
  font-size: var(--ms-text-md);
  margin-top: var(--ms-space-5);
  padding-top: var(--ms-space-4);
  border-top: 1px solid var(--ms-border-divider);
}
.modal-body > form:first-child > .section-title:first-child,
.modal-body > .section-title:first-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}
/* Ohne Wirkung — lange Inhalte scrollen ohnehin im Rumpf (siehe oben). Die
   Klasse bleibt nur stehen, weil aeltere Vorlagen sie mitgeben. */
.modal-dialog-scrollable { }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--ms-space-3);
  padding: var(--ms-space-5) var(--ms-space-6);
  border-top: 1px solid var(--ms-border-light);
}

/* ── Toast ── */
/* ── Bestaetigungskarte ───────────────────────────────────────────────────
   „Gespeichert", „angelegt", „versendet" — die Rueckmeldung auf eine
   Handlung, die geklappt hat. Zentriert ueber der Seite, mit Schleier
   dahinter.

   WARUM MITTIG UND NICHT AM RAND. Bis heute standen ALLE Meldungen unten
   rechts, auch die Bestaetigungen. Dort schaut nach dem Speichern niemand
   hin: der Blick ist beim Knopf oder beim Feld, das man zuletzt angefasst
   hat. Eine Bestaetigung, die niemand sieht, ist keine. Die Karte steht
   deshalb dort, wo der Blick nach der Handlung ohnehin ist, verdeckt kein
   Bedienelement und geht nach drei Sekunden von selbst.

   Bauform nach myOFFICE (`.mo-confirm-card`): Abzeichen mit Haken, eine
   fette Zeile, wahlweise eine leise zweite, Schliesskreuz oben rechts.
   Werte aus unseren Token.

   FEHLER BLEIBEN AM RAND (.toast-container weiter unten): sie treten meist
   mitten in einer Eingabe auf, und dort soll der Blick im Formular bleiben
   statt in die Bildmitte gerissen zu werden. Dieselbe Trennung wie dort. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: var(--ms-z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--ms-space-4);
  opacity: 0; transition: opacity var(--ms-transition-base);
}
.confirm-overlay.show { opacity: 1; }
.confirm-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--ms-space-4);
  max-width: 24rem; width: 100%;
  padding: var(--ms-space-6) var(--ms-space-5) var(--ms-space-5);
  background: var(--ms-bg-primary);
  border: 1px solid var(--ms-border-light);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-card-shadow-hover);
  transform: translateY(10px) scale(.97);
  transition: transform var(--ms-transition-base);
}
.confirm-overlay.show .confirm-card { transform: none; }
.confirm-card-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--ms-success); color: var(--ms-on-accent);
  /* Das Symbol nimmt die halbe Kreisbreite. Gesteuert wird das ueber die
     SCHRIFTGROESSE und nicht ueber `width`/`height` am Symbol: `.ms-ico` misst
     seine Kanten in `em`, also ist die Schriftgroesse der Regler des Systems.
     Vorher stand hier `width: 1.75rem; height: 1.75rem` am Symbol — der
     einzige Ort der Anwendung, der eine Symbolgroesse absolut setzte. */
  font-size: var(--ms-glyph-xl);
}
/* Dieselbe Karte, anderes Abzeichen: eine Warnung erklaert meist, warum etwas
   NICHT passiert ist — sie gehoert an dieselbe Stelle wie die Bestaetigung,
   nur mit anderem Zeichen. */
.confirm-card--warning .confirm-card-badge { background: var(--ms-warning); color: var(--ms-text-primary); }
.confirm-card-text {
  font-size: var(--ms-text-body); font-weight: var(--ms-weight-semibold);
  line-height: 1.4; color: var(--ms-text-primary);
}
/* Beiwerk zur Hauptaussage, deshalb leiser und kleiner. */
.confirm-card-detail {
  margin-top: var(--ms-space-1);
  font-size: var(--ms-text-small); color: var(--ms-text-secondary); line-height: 1.4;
}
/* Knopfreihe einer RUECKFRAGE-Karte. Sie steht unter dem Text und nicht
   daneben: die Karte ist mittig ausgerichtet (`.confirm-card`, `align-items:
   center`), und zwei Knoepfe in einer eigenen Zeile bleiben auch dann lesbar,
   wenn die Beschriftungen lang sind. `flex-wrap`, weil „Angemeldet bleiben"
   und „Abbrechen" auf einem schmalen Schirm nebeneinander nicht passen. */
.confirm-card-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-2);
}

.confirm-card-close {
  position: absolute; top: var(--ms-space-2); right: var(--ms-space-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ms-text-tertiary); border-radius: var(--ms-radius-sm);
  transition: color var(--ms-transition-fast), background var(--ms-transition-fast);
}
.confirm-card-close:hover { color: var(--ms-text-primary); background: var(--ms-bg-secondary); }
.confirm-card-close:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .confirm-overlay, .confirm-card { transition: none; }
}

/* Fehler und Warnungen: kurze Meldung OBEN RECHTS. Sie stand bis heute unten
   rechts, zusammen mit den Bestaetigungen — beide Aussagen sahen damit gleich
   aus, obwohl die eine „fertig" und die andere „so nicht" heisst. */
.toast-container {
  position: fixed; right: var(--ms-space-5); top: calc(var(--ms-topbar-h) + var(--ms-space-4));
  z-index: var(--ms-z-toast);
  display: flex; flex-direction: column; gap: var(--ms-space-2);
}
.toast {
  display: none;
  min-width: 280px; max-width: 360px;
  padding: var(--ms-space-3) var(--ms-space-4);
  /* Helle Flaeche mit farbiger Kante links statt des frueheren dunklen
     Chips: die Meldung steht jetzt neben der Bestaetigungskarte im selben
     System, und die Kante sagt in einem Blick, worum es geht. Bauform wie
     `.mo-toast` in myOFFICE. */
  background: var(--ms-bg-primary); color: var(--ms-text-primary);
  border: 1px solid var(--ms-border-light);
  border-left: 4px solid var(--ms-error);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-card-shadow-hover);
  font-size: var(--ms-text-small);
  cursor: pointer;
  /* Von rechts herein, weil sie am rechten Rand steht — vorher kam sie von
     unten, was am oberen Rand keinen Sinn mehr ergibt. */
  opacity: 0; transform: translateX(24px);
  transition: opacity var(--ms-transition-base), transform var(--ms-transition-base);
}
.toast.show { display: block; opacity: 1; transform: translateX(0); }
.toast--warning { border-left-color: var(--ms-warning); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* Meldungstext und Schliessen-Kreuz nebeneinander. `align-items: flex-start`,
   damit das Kreuz bei mehrzeiligen Meldungen oben bleibt statt mittig zu
   rutschen. Der Text nimmt den Rest der Breite (.flex-1 in der Vorlage). */
.toast-body { display: flex; align-items: flex-start; gap: var(--ms-space-3); }

/* ── Tooltip ── */
.tooltip {
  position: absolute; z-index: var(--ms-z-tooltip);
  padding: var(--ms-space-1) var(--ms-space-3);
  background: var(--ms-bg-dark); color: var(--ms-text-primary-dark);
  border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-small);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ms-transition-fast);
  /* KEIN `nowrap` mehr (2026-09-06). Die Blase traegt an mehreren Stellen
     einen ganzen Erklaersatz — am Pflichtschalter eines Bereichs, am Abzeichen
     „Nie leer" —, und ohne Umbruch stand der als EINE Zeile von weit ueber
     Fensterbreite da; das Einfangen am Rand (v2-ui.js) schob sie dann nur
     nach links, abgeschnitten blieb sie trotzdem. Die Blase ist absolut
     positioniert und schrumpft auf ihren Inhalt: kurze Hinweise bleiben
     einzeilig, lange brechen bei --ms-content-narrow/2. */
  max-width: min(22rem, calc(100vw - var(--ms-space-8)));
  white-space: normal;
}
.tooltip.show { opacity: 1; }

/* ── Collapse ── */
.collapse:not(.show) { display: none; }
.collapsing { overflow: hidden; transition: height var(--ms-transition-slow); }

/* Breiter Dialog — fuer Inhalte, die Flaeche brauchen statt Text: die
   Zuschnittflaeche eines Bildes ist nur brauchbar, wenn man das Bild
   erkennt.

   ZWEI SELEKTOREN, EINE BREITE. Aeltere Vorlagen schreiben die Klasse direkt
   an `.modal-dialog`; die Twig-Komponente MsModal kann das nicht, sie gibt
   ihre `class` an das AEUSSERE Element weiter (siehe .modal-lg/.modal-xl
   weiter oben). Deshalb hier beide Wege auf DERSELBEN Zeile — eine zweite
   Zahl an anderer Stelle waere ein zweiter Dialogschnitt, der eines Tages
   auseinanderlaeuft. Die 56rem (896px) liegen bewusst zwischen .modal-lg
   (800) und .modal-xl (1140): ein Dialog, der die halbe Seite fuellt, hebt
   seinen eigenen Zweck auf. */
.modal-dialog--wide,
.modal-wide .modal-dialog { max-width: 56rem; }

/* Sprechblase mit einer LISTE statt eines Satzes — je Zeile ein Empfaenger
   (Bestandswarnungen, 2026-09-07). Die Zeilenumbrueche stehen als `\n` im
   Merkmal, und v2-ui.js setzt den Text als TEXT (`textContent`); `pre-line`
   macht daraus Zeilen, ohne dass Auszeichnung in die Blase gelangen kann. */
.tooltip--lines { white-space: pre-line; text-align: left; }

/* Ein Satz in der Fusszeile eines Dialogs, links neben den Knoepfen — dort,
   wo eine Bedingung des Schliessens stehen muss („Schliessen ohne Speichern
   verwirft"). `margin-right: auto` schiebt die Knoepfe nach rechts, ohne die
   Fusszeile umzubauen. */
.modal-footer-note {
  margin-right: auto;
  font-size: var(--ms-text-small);
  color: var(--ms-text-secondary);
}

/* Titel und Geltungsbereich im Kopf eines Dialogs.
   `.modal-header` ist eine Flex-Zeile mit dem Schliesskreuz am Ende; Titel und
   Unterzeile brauchen deshalb eine gemeinsame Huelle, sonst stellte sich die
   Unterzeile NEBEN den Titel. `min-width: 0`, damit ein langer Firmenname
   umbricht statt das Kreuz hinauszuschieben. */
.modal-heading { min-width: 0; }
.modal-subtitle {
  margin: var(--ms-space-1) 0 0;
  font-size: var(--ms-text-small);
  color: var(--ms-text-secondary);
}