/*
    Ergaenzungen zu MudBlazor, keine eigene Designsprache.

    MudBlazor macht die Gestaltung. Was hier steht, ist das, was es nicht kennt:
    der Platz fuer das Kundenlogo, die Mitte der Anmeldemaske, die Karte bei
    unterbrochener Verbindung. Wer hier eine Farbe oder einen Abstand setzt, der
    auch aus dem Thema kommen koennte, hat die falsche Stelle gewaehlt - dann
    gehoert es in Dienste/Erscheinungsbild.cs.
*/

/* Nur fuer Bildschirmleser: die Ueberschrift, auf die FocusOnNavigate springt.
   Sichtbar waere sie doppelt, denn den Bereichstitel zeigt schon die Kopfzeile. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------- Logo --- */

/* Das Logo des Lizenznehmers in der Kopfzeile. Feste Hoehe, Breite nach
   Seitenverhaeltnis: ein Kundenlogo kommt in jedem Format, und die Kopfzeile darf
   davon nicht die Hoehe wechseln.

   Aufgehellt wird es nicht hier, sondern in js/thema.js - pixelweise und nur dort,
   wo es unstrittig ist. Ein CSS-Filter kann "Schwarz wird Weiss" nicht ausdruecken,
   ohne die Hausfarbe zu verfaelschen. */
.kopf-logo {
    height: 2rem;
    width: auto;
    max-width: 12rem;
    object-fit: contain;
}

.anmeldung-logo {
    margin-bottom: 1.5rem;
    text-align: center;
}

.anmeldung-logo img {
    height: 3rem;
    width: auto;
    max-width: 16rem;
    object-fit: contain;
}

/* -------------------------------------------------------- Anmeldemaske --- */

/* Der Thema-Umschalter oben rechts, wo er auch in der Kopfzeile der angemeldeten
   Anwendung sitzt - dieselbe Sache am selben Ort. */
.anmeldung-kopf {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem 0 0;
}

/* Mittig, aber nicht ganz oben: ein Formular direkt unter der Fensterkante sieht
   abgeschnitten aus. */
.anmeldung-mitte {
    margin-top: 6vh;
    margin-bottom: 4rem;
}

/* --------------------------------------------------------- Kleinigkeiten --- */

/* Eine Tabellenzeile, die sich anklicken laesst, soll das auch zeigen. */
.cursor-pointer {
    cursor: pointer;
}

/* MudBlazor kennt gap-2 nicht als Hilfsklasse; die Knopfreihen unten in den
   Bearbeitungsbereichen brauchen sie. */
.gap-2 {
    gap: 0.5rem;
}

.h-100 {
    height: 100%;
}

/* ----------------------------------------------------------- Datengitter --- */

/*
    Ergaenzungen zu MudTable, nicht eine eigene Tabelle.

    Hier stand vorher eine eigene, mit der Begruendung, MudTable gebe fuer
    Spaltenbreiten, Hoehe und ein Filtermenue im Kopf nicht genug her - und mit dem
    Zusatz, das sei "dieselbe Entscheidung wie in VOKDAMS.NET8". Das war schlicht
    falsch: VOKDAMS benutzt MudTable, und alle drei Dinge liegen dort an
    Ergaenzungen wie den folgenden. Der Preis der eigenen Tabelle war ein Blaettern,
    das anders aussah als im Vorbild - und MudTablePager laesst sich nicht daneben
    stellen, er ist ein Kind von MudTable und liest dessen Zustand.

    Die Farben kommen aus MudBlazors Variablen, damit das Gitter dem
    Erscheinungsbild folgt.
*/

/* Die Spaltenueberschrift sortiert beim Anklicken. */
.gitter-kopf {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* Traegt die Stufenziffer; position:relative, damit sie sich daran ausrichtet. */
.gitter-sortierzeichen {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Die Stufe einer mehrspaltigen Sortierung, als Ziffer am Pfeil.

   Ohne Rot: rot heisst in dieser Oberflaeche "hier stimmt etwas nicht", und eine
   zweite Sortierspalte ist keine Warnung. Die Ziffer nimmt ueber inherit die Farbe
   der Ueberschrift, in der sie steht - damit ist sie in beiden Erscheinungsbildern
   genau so grau wie die Beschriftung daneben und ordnet sich ihr unter, statt gegen
   sie anzutreten. */
.gitter-sortierrang {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 13px;
    padding: 0 1px;
    color: inherit;
    opacity: .8;
    font-size: .625rem;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* Der Zellinhalt mit Hoechstbreite.

   Die gezogene Breite steht am th, und das genuegt nicht: eine Tabelle mit
   automatischem Layout richtet sich nach ihrem laengsten Zellinhalt, und ein Betreff
   mit hundertzwanzig Zeichen sprengt damit jede eingestellte Breite.

   380 Pixel als Vorgabe: breit genug fuer einen Betreff oder einen Lieferantennamen,
   schmal genug, dass daneben noch etwas Platz hat. Wer mehr braucht, zieht die Spalte
   breiter - dann gilt die gezogene Breite. */
.gitter-zelle {
    max-width: 380px;
    overflow: hidden;
}

/* Reiner Text bekommt die Auslassungspunkte; die volle Fassung steht im
   Mausueberfahrtext. Zellen mit eigener Vorlage nicht: dort stehen Symbole und
   Knoepfe nebeneinander, die ein nowrap in eine Zeile zwaenge. */
.gitter-zelle-text {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Der Hilfetext beim Ueberfahren.

   Mit Hoechstbreite und Zeilenumbruch: MudBlazor setzt einen Mausueberfahrtext sonst
   in eine einzige Zeile, und ein Satz von hundertzwanzig Zeichen laeuft dann ueber
   den halben Bildschirm - erst recht bei der Mandantenliste eines eingeschraenkten
   Benutzers. */
.hilfe-blase {
    max-width: 320px;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

/* Die gewaehlte Zeile eines Master-Detail-Gitters.

   Ueber die Hintergrundfarbe des Themas und nicht ueber eine eigene: hell und dunkel
   sollen beide stimmen, und eine hier gesetzte Farbe waere in einem davon falsch. Der
   Balken links ist das, was man im Augenwinkel sieht, wenn man vom Detail nach oben
   zurueckschaut.

   !important, weil MudBlazor die Streifen von Striped ueber eine eigene Regel setzt
   und die sonst gewinnt - die markierte Zeile saehe dann je nachdem, ob sie gerade
   und ungerade ist, verschieden aus. */
.gitter-zeile-gewaehlt > td {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.gitter-zeile-gewaehlt > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

/* Eine Feldkachel im Einstellbereich - dieselbe fuer Spalten und fuer die Kacheln
   der Uebersicht. Wer dort Spalten zieht, zieht hier Kacheln, ohne etwas Neues zu
   lernen. */
.gitter-feld {
    display: flex;
    align-items: center;
    min-width: 190px;
    padding: 2px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: grab;
    user-select: none;
}

.gitter-feld:hover {
    border-color: var(--mud-palette-primary);
}

/* Das Stueck, das gerade gezogen wird. */
.gitter-feld-zieht {
    opacity: .4;
}

/* Das Stueck, auf dem es landen wuerde. */
.gitter-feld-ziel {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Griff unter der Tabelle, mit dem sich ihre Hoehe ziehen laesst. */
.gitter-griff {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

.gitter-griff-strich {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
}

.gitter-griff:hover .gitter-griff-strich {
    background: var(--mud-palette-primary);
}

/* Ziehgriff am rechten Rand jeder Kopfzelle, fuer die Spaltenbreite. Das Element
   legt das Skript an, nicht das Markup: es haengt an jeder Kopfzelle, die MudBlazor
   zeichnet, und die zeichnet es beim Filtern und Sortieren neu. */
.gitter-breite {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    z-index: 3;
}

.gitter-breite:hover {
    background: var(--mud-palette-primary);
    opacity: .5;
}

/* ------------------------------------------------------- Terminampel --- */

/*
    Der Kreis in der Spalte "Termin" - gruen, gelb, rot.

    Ein span mit border-radius und keine Komponente: in einer Tabellenzelle ist das ein
    farbiger Punkt und kein Symbol, kein Chip und kein Fortschrittskreis. Zehn Zeichen
    CSS gegen eine Komponente je Zeile.

    Die Farben kommen aus dem Thema und sind nicht hier gesetzt: sie muessen in hell und
    dunkel stimmen, und Rot ist in dieser Oberflaeche Warnungen vorbehalten - genau das
    ist ein ueberfaelliger Liefertermin.
*/
.termin-ampel {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.termin-gruen {
    background: var(--mud-palette-success);
}

.termin-gelb {
    background: var(--mud-palette-warning);
}

.termin-rot {
    background: var(--mud-palette-error);
}

/*
    Zwei gedeckte Toene neben den drei Ampelfarben: "ohne Termin" ist eine Luecke,
    "erledigt" ein Abschluss. Beide ohne Signalfarbe, denn an beiden ist nichts zu
    tun - Rot, Gelb und Gruen gehoeren dem, was draengt.
*/
.termin-grau {
    background: var(--mud-palette-text-disabled);
}

.termin-blaugrau {
    background: var(--mud-palette-text-secondary);
}

/*
    Der Lieferfortschritt in der Belegliste: ein Balken, daneben der Prozentwert.

    Die Farbe des Balkens kommt von der Terminampel und nicht vom Fortschritt - deshalb
    setzt er keine eigene, sondern nimmt die Klassen termin-gruen/-gelb/-rot. Ohne Lage
    bleibt er neutral.
*/
.fortschritt-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.fortschritt {
    flex: 1 1 auto;
    min-width: 48px;
    height: 8px;
    border-radius: 4px;
    background: var(--mud-palette-action-default-hover);
    overflow: hidden;
}

.fortschritt-wert {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--mud-palette-text-disabled);
    transition: width .2s ease-out;
}

/* Tabellenziffern, damit die Prozentwerte untereinander stehen und nicht tanzen. */
.fortschritt-zahl {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    min-width: 2.5rem;
    text-align: right;
}

/*
    Das Lastdiagramm auf der Systemseite: Linien ueber der Zeit, darunter eine Legende,
    die zugleich der Schalter ist.

    Die Linien liegen in einem SVG mit viewBox und ohne festes Mass - das Bild waechst mit
    der Spalte. preserveAspectRatio="none" laesst es sich dabei strecken; bei einem
    Zeitverlauf ist das richtig, denn die Form einer Spitze traegt hier keine Aussage, ihre
    Hoehe schon.
*/
.last-diagramm svg {
    display: block;
    width: 100%;
    height: 320px;
}

.last-raster {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

.last-achse {
    fill: var(--mud-palette-text-secondary);
    font-size: 11px;
}

/* Gestrichelt und blass: die Schwelle ist eine Nebenlinie, kein Messwert. */
.last-schwelle {
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: .45;
}

.last-linie {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.last-punkt {
    stroke: none;
}

.last-zeitachse {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    padding: 0 4px;
}

/*
    Die Legende als Gitter: Strich, Name, Dienst, Wert, Schwelle, Hinweis. Ausgerichtet,
    damit die Werte untereinander stehen - sie werden verglichen.
*/
.last-legende {
    display: grid;
    grid-template-columns: auto auto auto auto auto 1fr;
    gap: 2px 12px;
    align-items: center;
}

.last-legende-zeile {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

.last-legende-zeile:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Ausgeblendet heisst blass und nicht weg: der Schalter muss zurueckzufinden sein. */
.last-aus {
    opacity: .4;
}

.last-strich {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
}

.last-name {
    font-weight: 600;
}

.last-dienst,
.last-grenze,
.last-hinweis {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Ein gestoerter Waechter: der Grund traegt die Warnfarbe, nicht die des Textes. Rot waere
   falsch - nicht messen zu koennen ist eine Einschraenkung und kein Fehler; die Maschine
   arbeitet, wir sehen nur nicht hin. Die Farbe kommt aus dem Thema. */
.last-gestoert {
    color: var(--mud-palette-warning);
}

/* Das Warnzeichen steht an der Stelle des Farbstrichs und braucht dessen Breite, damit die
   Spalten der Legende nicht verrutschen, sobald eine Zeile stoert. */
.last-strich-symbol {
    width: 18px;
    font-size: 1rem !important;
}

.last-wert {
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 3.5rem;
}

/*
    Der Ring einer Auswertung. Aufbau: ein Kreis mit dem Umfang 100 (r = 15,915), je
    Stueck ein stroke-dasharray aus Anteil und Rest. Gedreht, damit bei 12 Uhr begonnen
    wird - sonst faengt ein SVG-Kreis rechts an, und die Reihenfolge der Stuecke stimmt
    nicht mit der Liste daneben ueberein.
*/
.ring {
    transform: rotate(-90deg);
    max-width: 100%;
    height: auto;
}

.ring-grund {
    fill: none;
    stroke: var(--mud-palette-lines-default);
    stroke-width: 4;
}

/* fill:none heisst zugleich: geklickt wird auf den Strich und nicht in die Mitte. */
.ring-stueck {
    fill: none;
    stroke-width: 4;
    cursor: pointer;
    transition: stroke-width .12s ease-out;
}

.ring-stueck:hover {
    stroke-width: 5.5;
}

/*
    Die Beschriftung in der Mitte muss die Drehung des Rings wieder aufheben - sonst
    stuende sie auf dem Kopf. Gedreht wird um den Mittelpunkt des Koordinatensystems
    (21/21), nicht um den Ursprung.
*/
.ring-summe,
.ring-summe-text {
    transform: rotate(90deg);
    transform-origin: 21px 21px;
    fill: var(--mud-palette-text-primary);
    dominant-baseline: middle;
}

.ring-summe {
    font-size: 6px;
    font-weight: 600;
}

.ring-summe-text {
    font-size: 2.6px;
    fill: var(--mud-palette-text-secondary);
}

/*
    Die Zahlen neben einem Ringdiagramm: Kreis, Wort, Anzahl, Anteil.

    Als Gitter und nicht als Reihe von Textblocken, damit die Zahlen untereinander
    stehen. Zahlen werden verglichen, und linksbuendig hinter Woertern verschiedener
    Laenge tanzen sie - dann liest man sie einzeln statt als Reihe.
*/
.ring-zahlen {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 2px 12px;
    align-items: center;
    min-width: 16rem;
}

.ring-zeile {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

/* Die Zeile fuehrt in die gefilterte Liste. Dass sie das tut, zeigt sie beim
   Ueberfahren - ein Zeiger allein ist zu wenig Hinweis fuer einen Sprung. */
.ring-zeile:hover {
    background: var(--mud-palette-action-default-hover);
}

.ring-zahl {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ring-anteil {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------- Kacheln --- */

/* Die Kacheln der Uebersicht. Anheben beim Darueberfahren, damit sichtbar ist, dass
   sie anklickbar sind - eine Kachel, die auf eine gefilterte Liste fuehrt, soll wie
   ein Weg aussehen und nicht wie eine Anzeigetafel. */
.dashboard-kachel {
    transition: box-shadow .15s ease, transform .15s ease;
}

.dashboard-kachel:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    transform: translateY(-2px);
}

/* Der Ziehbereich um eine Kachel. Die Zugangaben sitzen an einem einfachen div und
   nicht an der MudBlazor-Komponente: dort kamen draggable und data-feld nicht im
   Baum an, und damit fing das Ziehen nie an.

   Der Zeiger bleibt der Zeigefinger, auch hier: gezogen wird nur am Griff, und ein
   Greifzeiger auf der ganzen Kachel verspraeche das Gegenteil. */
.kachel-zug,
.kachel-zug .dashboard-kachel {
    cursor: pointer;
}

/* Der Griff einer Kachel, oben rechts.

   Er erscheint erst beim Ueberfahren. Staendig sichtbar waere er ein Symbol auf jeder
   Kachel, das in aller Regel niemand braucht - und was hier zaehlt, ist die Zahl.
   position:absolute, damit er nicht in die mittige Anordnung von Symbol, Zahl und
   Beschriftung eingreift: als Teil des Flusses schoebe er alles um seine Hoehe nach
   unten, und die Kachel saehe daneben aus. */
.kachel-griff {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    cursor: grab;
    opacity: 0;
    transition: opacity .15s ease;
    color: var(--mud-palette-text-secondary);
}

.dashboard-kachel {
    position: relative;
}

.dashboard-kachel:hover .kachel-griff {
    opacity: .55;
}

.kachel-griff:hover {
    opacity: 1 !important;
    background: var(--mud-palette-action-default-hover);
}

.kachel-griff:active {
    cursor: grabbing;
}

/* Die Fassung um das Blockzeichen: sie traegt data-griff und ist damit die Stelle, an
   der ein Zug des Blocks beginnen darf. */
.block-griff-fassung {
    display: inline-flex;
    align-items: center;
    cursor: grab;
}

.block-griff-fassung:active {
    cursor: grabbing;
}

.kachel-zug.gitter-feld-zieht {
    opacity: .4;
}

.kachel-zug.gitter-feld-ziel .dashboard-kachel {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: 3px;
}

/* Die Ueberschriftszeile eines Themas traegt den Griff des ganzen Blocks. Nur der
   Griff zieht und nicht die Zeile: in der Zeile steht rechts die Einstellschraube, und
   ein Zug, der an einem Knopf beginnt, verschluckt dessen Klick. */
.block-griff-zeichen {
    opacity: .25;
    transition: opacity .15s ease;
}

.block-griff:hover .block-griff-zeichen {
    opacity: .8;
}

/* ---------------------------------------------------------- Belegvorschau --- */

/* Vorschau eines Belegs beim Darueberfahren.

   Die Masse stehen fest und haengen nicht am Bild. Das ist der Punkt: MudBlazor misst
   die Sprechblase, wenn sie aufgeht, und entscheidet danach, ob sie nach rechts oder
   nach links klappt. Beim ersten Zeigen ist das Bild aber noch nicht geladen, die Blase
   waere also winzig - und wenn das Bild dann eintrifft, waechst sie ueber den
   Bildschirmrand hinaus, ohne noch einmal zu rechnen. Beim zweiten Zeigen liegt es im
   Zwischenspeicher und alles passt. Genau dieser Unterschied verschwindet, wenn der
   Platz von vornherein reserviert ist.

   Das Format ist hochkant im Verhaeltnis von DIN A4; die meisten Belege kommen so
   daher, und was abweicht, wird ueber object-fit eingepasst statt verzerrt. */
.beleg-vorschau {
    width: 320px;
}

.beleg-vorschau img {
    display: block;
    width: 320px;
    height: 452px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
}

.beleg-vorschau-fuss {
    margin-top: 4px;
    height: 1.1rem;
    font-size: .75rem;
    opacity: .7;
    text-align: right;
}

/* Dokumente ohne Datei - etwa solche, die nur ueber ihre Indexdaten angelegt wurden.
   Derselbe reservierte Platz, aber eine Aussage statt eines Bildes. Der Browser zeigte
   sonst sein Symbol fuer ein kaputtes Bild, und das sieht nach Fehler aus, wo schlicht
   nichts da ist. */
.beleg-vorschau-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 452px;
    border-radius: 4px;
    border: 1px dashed rgba(255, 255, 255, .35);
    font-size: .875rem;
    opacity: .8;
}

.beleg-vorschau-grund {
    margin-top: 4px;
    font-size: .75rem;
    opacity: .7;
    max-width: 260px;
    text-align: center;
}

/* Notnagel: laedt das Bild wider Erwarten doch nicht, bleibt der Platz stehen und das
   Symbol des Browsers aussen vor. */
.bild-fehlt {
    visibility: hidden;
}

/* Dieselbe Seite gross, im Fenster. Hier zaehlt die Breite: das Fenster ist breit, und
   ein Beleg soll darin lesbar sein, ohne dass man zoomen muss. */
.beleg-blatt {
    display: flex;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    padding: 8px;
    border-radius: 4px;
}

.beleg-blatt img {
    max-height: 72vh;
    max-width: 100%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

/*
    Solange das Bild unterwegs ist, steht an seiner Stelle eine Seite in Seitengroesse:
    ein Ladekreis in der Mitte und ein Schimmern darueber.

    WARUM ES DAS BRAUCHT. Das Bild holt der Browser selbst ueber /beleg/{docid}/vorschau;
    Blazor weiss also nicht, wann es da ist, und kann den Zustand nicht fuehren. Ohne diese
    Flaeche blieb der Rahmen leer -- und beim Vergleich von elf Ausfertigungen nebeneinander
    sind das elf leere Rahmen, bei denen niemand sieht, ob noch etwas kommt oder ob es
    nichts gibt.

    Hier stand zuerst nur ein Pulsieren auf 220px Hoehe. Das war zu klein und zu leise, um
    als "es laedt" gelesen zu werden, und die Flaeche sprang beim Eintreffen des Bildes von
    einem Streifen auf eine Seite. Jetzt ist der Platzhalter so hoch wie das Bild wird,
    also springt nichts.

    Die Klasse nimmt `onload` im Browser wieder weg (siehe Belegblatt.razor); ueber den
    Circuit waeren es bei elf Bildern elf Meldungen fuer das Wegnehmen einer CSS-Klasse.
*/
.beleg-blatt-laedt {
    position: relative;
    align-items: center;
    justify-content: center;

    /* Die Hoehe einer Seite aus ihrer Breite: DIN A4 im Hochformat. So steht der
       Platzhalter dort, wo das Bild stehen wird, und beim Eintreffen springt nichts.
       Die Obergrenze ist dieselbe wie beim Bild selbst. */
    aspect-ratio: 1 / 1.414;
    max-height: 72vh;
}

/* Das Bild ist da, sobald es da ist -- vorher soll es nicht als weisses Rechteck ueber
   dem Platzhalter liegen. */
.beleg-blatt-laedt img {
    opacity: 0;
}

/*
    Das Schimmern. Ueber die Palette und nicht mit festen Farben: in hell zieht ein
    dunklerer Streifen ueber die helle Flaeche, in dunkel ein hellerer ueber die dunkle --
    und beides ohne eine zweite Regel.
*/
.beleg-blatt-laedt::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 2px;
    background: linear-gradient(100deg,
                transparent 30%,
                var(--mud-palette-action-disabled-background) 50%,
                transparent 70%);
    background-size: 220% 100%;
    animation: blatt-schimmer 1.4s linear infinite;
}

@keyframes blatt-schimmer {
    0% { background-position: 160% 0; }
    100% { background-position: -60% 0; }
}

/*
    Der Ladekreis steht immer im Markup und wird hier ein- und ausgeblendet: Blazor kennt
    den Ladezustand des Bildes nicht, also kann nur CSS ihn kennen.

    Ueber dem Schimmern (z-index), sonst zieht der Streifen darueber hinweg.
*/
.beleg-blatt-warten {
    display: none;
}

.beleg-blatt-laedt .beleg-blatt-warten {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/*
    Das Dokument im Vollbild: die Seite darf die Hoehe des Bildschirms nutzen.

    72vh ist die Vorgabe fuer das Blatt in einer Karteikarte, wo darueber Laschen und
    darunter Felder stehen. In einem Fenster ohne alles daneben waere sie eine
    Selbstbeschraenkung - man oeffnet Vollbild, um zu lesen.
*/
.beleg-vollbild .beleg-blatt img {
    max-height: calc(100vh - 210px);
}

/* Zeigt an, dass an dem Wert mehr haengt als der Wert. */
.beleg-mit-vorschau {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* --------------------------------------------------------- Auswahlzeile --- */

/*
    Hier standen .auswahlzeile und .auswahlfeld: eine Flex-Zeile mit eigenen
    Mindestbreiten fuer die Auswahl oben auf den Belegseiten.

    Beides ist weg, und das ist die Behebung eines Fehlers, nicht Aufraeumen. In einer
    Flex-Zeile bestimmt jedes Feld seine Hoehe selbst; ein Hilfetext an einem einzigen
    Feld genuegte, und die drei Auswahlfelder standen auf verschiedenen Linien. Es
    ersetzt sie ein MudGrid mit MudItem md="3" je Feld - wie in VOKDAMS. Dort haben
    alle Zellen dieselbe Breite und dieselbe Grundlinie, und der Umbruch auf schmalen
    Schirmen kommt mit.

    Die Lehre ist die aus CLAUDE.md: wer hier eine Groesse setzt, die aus dem Raster
    kommen koennte, hat die falsche Stelle gewaehlt.
*/

/* ------------------------------------------------------ Verbindung weg --- */

/*
    Die Karte, wenn die Verbindung zum Server abreisst.

    Blazor sucht das Element #components-reconnect-modal und schaltet daran eine
    Klasse um. ALLE Zustaende, die es kennt (nachgesehen in blazor.web.js, Klasse Go):

      components-reconnect-show           die Verbindung ist weg, es beginnt
      components-reconnect-retrying       ein Versuch laeuft (bis zu 30, Abstand bis 30 s)
      components-reconnect-paused         der Dienst hat die Sitzung angehalten
      components-reconnect-failed         die Versuche sind aufgebraucht
      components-reconnect-resume-failed  die angehaltene Sitzung liess sich nicht fortsetzen
      components-reconnect-rejected       der Dienst kennt die Sitzung nicht mehr
                                          (er wurde neu gestartet)
      components-reconnect-hide           alles wieder gut

    HIER STANDEN NUR DREI DAVON, und das war der Fehler, der als "alles friert ein"
    gemeldet wurde: nach einem Dienstneustart geht der Client in "retrying" und bleibt
    dort dreissig Versuche lang - eine Viertelstunde. Traf keine der drei Regeln, blieb
    die Karte auf display:none. Die Seite stand dann tot da, ohne ein Wort, und kein
    Klick tat mehr etwas. Am Dienst war dabei nichts zu sehen: 0 % Prozessorlast, denn
    er wurde gar nicht gefragt.

    Wer hier eine Regel ergaenzt, ergaenzt sie fuer JEDEN Zustand - eine unbekannte
    Klasse heisst unsichtbar, und unsichtbar heisst hier "kaputt ohne Meldung".

    Ohne diese Regeln zeigte Blazor seine eigene graue Leiste mit englischem Text.
    Das Geruest dazu steht in App.razor.

    Die Farben kommen aus MudBlazors Variablen, damit die Karte dem
    Erscheinungsbild folgt - sie ist im hellen hell.
*/
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.verbindung-karte {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 2rem 2.5rem;
    max-width: 30rem;
    text-align: center;
}

.verbindung-logo {
    height: 2.5rem;
    width: auto;
    max-width: 14rem;
    object-fit: contain;
    margin-bottom: 1.25rem;
}

.verbindung-karte h2 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 0.75rem;
}

.verbindung-karte p {
    margin: 0 0 0.5rem;
    color: var(--mud-palette-text-secondary);
}

.verbindung-nebenbei {
    font-size: 0.875rem;
}

/* Je Zustand genau ein Abschnitt. Verborgen wird mit display:none und nicht mit
   Sichtbarkeit: ein leerer Platzhalter wuerde die Karte hoeher machen, als sie
   aussieht. */
.verbindung-versuch,
.verbindung-angehalten,
.verbindung-gescheitert,
.verbindung-abgelehnt {
    display: none;
}

/* Sieben Zustaende, vier Abschnitte: "show" und "retrying" sind derselbe Vorgang in zwei
   Phasen, und "failed" wie "resume-failed" enden beide bei "der Dienst antwortet nicht". */
.components-reconnect-show .verbindung-versuch,
.components-reconnect-retrying .verbindung-versuch,
.components-reconnect-paused .verbindung-angehalten,
.components-reconnect-failed .verbindung-gescheitert,
.components-reconnect-resume-failed .verbindung-gescheitert,
.components-reconnect-rejected .verbindung-abgelehnt {
    display: block;
}

/* Zwei Knoepfe nebeneinander brauchen Luft. */
.verbindung-karte button + button {
    margin-left: 0.5rem;
}

/* Der Kreisel beim Wiederverbinden. Handgemacht und nicht als MudProgressCircular:
   waehrend der Stoerung laeuft kein Blazor mehr, das ihn zeichnen koennte. */
.verbindung-kreis {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 1.25rem;
    border: 3px solid var(--mud-palette-lines-default);
    border-top-color: var(--mud-palette-primary);
    border-radius: 50%;
    animation: verbindung-dreht 0.9s linear infinite;
}

@keyframes verbindung-dreht {
    to { transform: rotate(360deg); }
}

/* Das Ausrufezeichen bei Fehlschlag. Orange heisst "noch offen", nicht rot: die
   Verbindung kommt in der Regel wieder, und nichts ist verloren. */
.verbindung-zeichen {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--mud-palette-warning);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2.5rem;
}

.verbindung-karte button {
    margin-top: 1.25rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: 6px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    cursor: pointer;
}

.verbindung-karte button:hover {
    filter: brightness(1.1);
}

/* Die Ausfertigungen eines Belegs - Wiederholungsdrucke.

   Der Rahmen traegt die Aussage: gruen bleibt, rot verschwindet, grau wartet auf eine
   Entscheidung. Drei Zustaende, drei Farben - und die Rahmenbreite ist bei allen
   dieselbe, sonst ruckte die Kachel beim Anklicken um zwei Pixel.

   Die Farben kommen aus dem Thema und stehen nicht als Hexwert hier: wer im Dunkelmodus
   liest, bekaeme sonst ein Gruen, das fuer den hellen Hintergrund gedacht war. */
/*
    Eine Ausfertigung im Vergleichsfenster.

    DIE BREITE STEHT HIER und kommt nicht vom Bild. Vorher nahm jeder Rahmen die natuerliche
    Breite seines Bildes: die dritte Ausfertigung stand dann rechts ausserhalb des Fensters,
    und der Umbruch griff nicht, weil ein Rahmen ohne Bild keine Breite hat. Ausserdem hat
    ein Ladeplatzhalter dann auch keine -- und damit keine Hoehe, ueber die er sich zeigen
    koennte.

    340px als Grundmass, wachsend: bei einem Fenster in ExtraLarge stehen drei bis vier
    nebeneinander, bei zwei Ausfertigungen nehmen sie den Platz bis 560px. Darueber hinaus
    nicht -- zwei Seiten in Postergroesse nebeneinander liest niemand.
*/
.dublette {
    border: 2px solid transparent;
    transition: border-color .15s ease-in-out;
    flex: 1 1 340px;
    min-width: 260px;
    max-width: 560px;
}

.dublette-bleibt {
    border-color: var(--mud-palette-success);
}

.dublette-gewaehlt {
    border-color: var(--mud-palette-error);
}

.dublette-offen {
    border-color: var(--mud-palette-lines-default);
}

.dublette-offen:hover {
    border-color: var(--mud-palette-text-secondary);
}

/* Das Zeichen an einer mehrfach abgelegten Zeile traegt die Anzahl der Ausfertigungen.

   Uebernommen aus VOKDAMS (mehrfach-zeichen / mehrfach-nummer-klein / symbolzelle):
   dieselbe Sache soll in beiden Haeusern gleich aussehen, und wer von dort kommt,
   erkennt sie ohne hinzusehen.

   Die hochgestellte Ziffer sitzt ABSOLUT am Symbol und nicht daneben. Daneben waere sie
   eine zweite Spalte in einer Zelle, die schon eine ist; darueber traegt sie die Zahl
   dorthin, wo das Auge ohnehin hinsieht. */
.symbolzelle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.mehrfach-zeichen {
    position: relative;
    display: inline-flex;
    align-items: center;

    /* PLATZ FUER DIE HOCHGESTELLTE ZIFFER. Sie sitzt absolut ueber der rechten oberen
       Ecke des Symbols und ragte damit aus der Zelle heraus - abgeschnitten war sie
       oben und rechts. Der Rand schafft ihr den Raum INNERHALB der Zelle, statt an
       deren Ueberlauf zu ruetteln: overflow zu loesen wuerde die Spaltenbreiten des
       Gitters betreffen und damit etwas ganz anderes. */
    margin: 7px 9px 0 0;
}

.mehrfach-nummer-klein {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 13px;
    height: 13px;
    padding: 0 2px;
    border-radius: 7px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text, #fff);
    font-size: .625rem;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* ===========================================================================
   Belegvorschau und Belegblatt

   Ergaenzungen zu MudBlazor, keine eigene Designsprache: Farben kommen aus dem
   Thema (--mud-palette-*), nur Masse und Zustaende stehen hier. Was aus dem Thema
   kommen koennte, gehoert nach Dienste/Erscheinungsbild.cs und nicht hierher.
   =========================================================================== */

.beleg-vorschau {
    width: 320px;
}

/* DER PLATZ STEHT, BEVOR DAS BILD DA IST. Ohne feste Hoehe misst MudBlazor die
   Sprechblase als leer und klappt sie beim ersten Zeigen nach oben statt nach
   unten - man sieht sie an der falschen Stelle aufspringen und dann springen.
   320 x 452 ist DIN A4 hochkant. */
.beleg-vorschau img {
    display: block;
    width: 320px;
    height: 452px;
    object-fit: contain;

    /* Weiss und nicht die Themafarbe: ein Beleg ist ein Blatt Papier, und im
       dunklen Erscheinungsbild stuende schwarze Schrift sonst auf dunklem Grund. */
    background: #fff;
    border-radius: 4px;
}

.beleg-vorschau-fuss {
    margin-top: 4px;
    height: 1.1rem;
    font-size: .75rem;
    opacity: .7;
    text-align: right;
}

.beleg-vorschau-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 452px;
    border-radius: 4px;
    border: 1px dashed var(--mud-palette-lines-default);
    font-size: .875rem;
    opacity: .8;
    text-align: center;
}

.beleg-vorschau-grund {
    margin-top: .25rem;
    max-width: 280px;
    font-size: .75rem;
    opacity: .75;
}

/* Ein Bild, das nicht geladen werden konnte, wird UNSICHTBAR und nicht entfernt:
   der Platz bleibt, und der Browser zeigt nicht sein Symbol fuer "kaputt". */
.bild-fehlt {
    visibility: hidden;
}

.beleg-mit-vorschau {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.beleg-blatt {
    display: flex;
    justify-content: center;
    padding: 8px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

.beleg-blatt img {
    max-height: 72vh;
    max-width: 100%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

/* WAEHREND DAS BLATT LAEDT. Das Seitenverhaeltnis haelt die Hoehe fest, sonst
   springt der ganze Dialog, wenn das Bild eintrifft - und beim Blaettern bei jeder
   Seite erneut. */
.beleg-blatt-laedt {
    position: relative;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1.414;
    max-height: 72vh;
}

.beleg-blatt-laedt img {
    opacity: 0;
}

.beleg-blatt-laedt::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 2px;
    background: linear-gradient(100deg, transparent 30%,
                var(--mud-palette-action-disabled-background) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: blatt-schimmer 1.4s linear infinite;
}

@keyframes blatt-schimmer {
    0%   { background-position: 160% 0; }
    100% { background-position: -60% 0; }
}

.beleg-blatt-warten {
    display: none;
}

.beleg-blatt-laedt .beleg-blatt-warten {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Im Vollbild darf das Blatt die Hoehe des Bildschirms nehmen, abzueglich
   Titelzeile, Seitenschaltung und Fusszeile des Dialogs. */
.beleg-vollbild .beleg-blatt img {
    max-height: calc(100vh - 210px);
}

.beleg-vollbild .beleg-blatt-laedt {
    max-height: calc(100vh - 210px);
}

/* --- Dokumentkacheln in der Belegkartei --------------------------------- */

.beleg-kachel {
    cursor: zoom-in;
    overflow: hidden;
    transition: box-shadow .15s ease-in-out;
}

.beleg-kachel:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* DIN A4 hochkant. Das Verhaeltnis steht fest, BEVOR das Bild da ist - sonst
   springt die ganze Kachelwand, waehrend die Bilder nacheinander eintreffen. */
.beleg-kachel-blatt {
    aspect-ratio: 1 / 1.414;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}

.beleg-kachel-blatt img {
    width: 100%;
    height: 100%;

    /* cover und nicht contain: die Kachel soll gefuellt sein. Der Beschnitt trifft
       den Rand des Blattes, und der ist leer - das Briefbild bleibt erkennbar. */
    object-fit: cover;
    object-position: top center;
}

.beleg-kachel-fuss {
    padding: 6px 8px 8px;
}

/* --- Karteikarten, deren Reihenfolge dem Benutzer gehoert ---------------- */

.kartei-reiter {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 1rem;
}

.kartei-reiter-feld {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .5rem .85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--mud-palette-text-secondary);
    user-select: none;
    white-space: nowrap;
}

.kartei-reiter-feld:hover {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

.kartei-reiter-offen {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

/* Der Griff erscheint erst beim Ueberfahren. Staendig sichtbar waere er ein Symbol auf
   jedem Reiter, das in aller Regel niemand braucht - und er nimmt der Beschriftung den
   Platz, um den es geht. */
.kartei-griff {
    display: inline-flex;
    align-items: center;
    opacity: 0;
    cursor: grab;
    transition: opacity .12s ease-in-out;
}

.kartei-reiter-feld:hover .kartei-griff {
    opacity: .55;
}

.kartei-griff:active {
    cursor: grabbing;
}

/* --- Die Teile eines mehrteiligen Dokuments ------------------------------ */
/* Gilt fuer beides: die Abschnitte eines DocuWare-Belegs und die Anhaenge einer
   Mail. Dieselbe Ansicht, dieselben Klassen. */

.blatt-teile {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* Die Seitenzahl kleiner und blasser als der Name: den Namen waehlt man an, die
   Seitenzahl erklaert nur, was einen dort erwartet. */
.blatt-teil-seiten {
    margin-left: .35rem;
    font-size: .72em;
    opacity: .75;
}

/* --- Anhaenge einer Mail ------------------------------------------------- */

/* Eine Reihe, die umbricht, und KEIN Gitter mit fester Spaltenzahl: die Zahl der
   Anhaenge steht nicht fest, und eine halbe Reihe leerer Zellen sieht nach einem
   Fehler aus. */
.mail-anhaenge {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .6rem;
}

.mail-anhang {
    cursor: zoom-in;
    width: 96px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--mud-palette-surface);
    transition: box-shadow .15s ease-in-out;
}

.mail-anhang:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* Dasselbe Blattverhaeltnis wie bei den Belegkacheln - und aus demselben Grund fest,
   BEVOR das Bild da ist: sonst springt die Reihe, waehrend die Bilder eintreffen. */
.mail-anhang-blatt {
    aspect-ratio: 1 / 1.414;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}

.mail-anhang-blatt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Die Endung als Wort unter dem Symbol. Ein Symbol allein unterscheidet XLSX nicht
   von CSV, und genau das will man vor dem Klick wissen. */
.mail-anhang-art {
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

.mail-anhang-fuss {
    padding: 4px 6px 6px;
}

/* Der Name wird umgebrochen und nicht abgeschnitten: bei "Angebot_2026-2400305.pdf"
   steht das Unterscheidende hinten, und drei Punkte an genau der Stelle machen alle
   Anhaenge gleich aussehen. */
.mail-anhang-name {
    font-size: .72rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mail-anhang-groesse {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
}

/* --- Mailvorschau und Mailblatt ----------------------------------------- */

.mail-vorschau {
    width: 380px;
    max-width: 380px;
}

.mail-vorschau-kopf {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: .8125rem;
}

.mail-vorschau-zeile {
    font-size: .75rem;
    opacity: .75;
}

/* Der Text einer Mail kommt mit eigenen Zeilenumbruechen. pre erhaelt sie, aber
   ohne pre-wrap laeuft eine lange Zeile aus der Sprechblase heraus. */
.mail-vorschau-text {
    margin: 0;
    max-height: 260px;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: .8125rem;
    line-height: 1.35;
}

.mail-vorschau-fuss {
    margin-top: 6px;
    font-size: .75rem;
    opacity: .7;
    text-align: right;
}

/* DER ABGESCHOTTETE RAHMEN fuer den HTML-Koerper. Weiss und nicht themenfarbig:
   eine Mail bringt ihre eigenen Farben mit und rechnet mit hellem Grund - im
   dunklen Erscheinungsbild stuende schwarze Schrift sonst auf dunklem Grund. */
.mail-blatt {
    width: 100%;
    height: calc(100vh - 320px);
    min-height: 320px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: #fff;
}

.mail-blatt-text {
    margin: 0;
    padding: 12px;
    max-height: calc(100vh - 320px);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.45;
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
}

/* Der Eintrag, auf den aus der Aufgabenliste gesprungen wurde.

   UEBER :has() AM ELTERNTEIL, weil der Anker selbst ein leeres span ist: er markiert die
   Stelle, gestaltet wird die ganze Zeile. Ein umschliessendes div stattdessen haette
   geheissen, das Markup des Zeitstrahls umzubauen, nur damit man es einfaerben kann.

   ES VERBLASST VON SELBST. Eine Hervorhebung, die bleibt, ist nach dem dritten Sprung
   keine mehr - und sie liesse den Benutzer glauben, an der Zeile sei etwas Besonderes. */
.mud-timeline-item:has(.historie-ziel) .mud-timeline-item-content {
    border-radius: 4px;
    animation: historie-ziel-blitz 3s ease-out 1;
}

@keyframes historie-ziel-blitz {
    0%   { background-color: var(--mud-palette-primary-hover); }
    60%  { background-color: var(--mud-palette-primary-hover); }
    100% { background-color: transparent; }
}