html, body {
    margin: 0;
    padding: 0;
}

/* Never constrain the width of a Mud element that owns a popover: it hands the constraint down to
   the popover, which then clips its own content (a calendar needs 310px per displayed month, and a
   date range shows two). Constrain the surrounding container instead — the field follows it while
   the popover stays free. This rule is the safety net for the popover itself, so an opened picker
   keeps its content width even where a constraint slips through. */
.mud-picker-open {
    width: max-content;
    max-width: none;
}

#blazor-error-ui {
    background: #fff3cd;
    color: #664d03;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1200;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---------------------------------------------------------------------------------------------------------------
   Das Raster der Startseite.

   Die Zelle ist ein Rechteck im Verhältnis 1 : √2, quer gelegt. Daraus wird die Zeilenhöhe gerechnet:
   Spaltenbreite geteilt durch √2. Damit ergeben die drei angebotenen Größen dieselbe Leiter wie die
   DIN-A-Formate — eine Zelle quer (√2 : 1), zwei Zellen untereinander hoch (1 : √2), vier Zellen quer
   (√2 : 1). Jeder Schritt verdoppelt die Fläche, das Verhältnis bleibt, die Ausrichtung wechselt. Nur bei
   diesem Verhältnis führt das Verdoppeln auf dieselbe Form zurück, und deshalb kommen alle drei Größen mit
   *einer* Zeilenhöhe aus (siehe DashboardTileFormat).

   Gemessen wird über `cqw` und nicht über Prozente: Ein Prozentwert in `grid-auto-rows` bezieht sich auf die
   *Höhe* des Rasters, und die steht hier gerade nicht fest — sie ist ja das Ergebnis. Dafür trägt der Rahmen
   `container-type: inline-size`, womit 100cqw genau die Rasterbreite ist. Das ersetzt ein Messen im Browser
   und damit einen JS-Baustein, der bei jeder Fensteränderung nachrechnen müsste.

   Die Spaltenzahl fällt mit der Breite, und in einer einzigen Spalte kann nichts zwei Spalten breit sein —
   sonst legte das Raster eine zweite, unsichtbare Spalte an und alles darin wäre halb so breit. Deshalb wird
   „groß" dort auf eine Spalte zurückgenommen; die doppelte Höhe behält es.
   --------------------------------------------------------------------------------------------------------------- */
.vera-dashboard-frame {
    container-type: inline-size;
}

/* Die Schaltfläche, über die ausgeblendete Kacheln zurückkommen. Rechtsbündig über dem Raster: Sie gehört zum
   Raster und nicht zur Begrüßung darüber, und links stünde sie am Anfang der Leserichtung — für ein Bedienelement,
   das man nur gelegentlich sucht, ist das zu viel Betonung. */
.vera-dashboard-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.vera-dashboard {
    --vera-tile-cols: 4;
    --vera-tile-gap: 16px;
    --vera-tile-ratio: 1.41421356;
    display: grid;
    grid-template-columns: repeat(var(--vera-tile-cols), minmax(0, 1fr));
    grid-auto-rows: calc((100cqw - (var(--vera-tile-cols) - 1) * var(--vera-tile-gap)) / var(--vera-tile-cols) / var(--vera-tile-ratio));
    /* Dicht, damit eine kleine Kachel die Lücke neben einer hohen füllt statt sie offen zu lassen. */
    grid-auto-flow: row dense;
    gap: var(--vera-tile-gap);
}

@container (max-width: 1000px) {
    .vera-dashboard {
        --vera-tile-cols: 2;
    }
}

@container (max-width: 560px) {
    .vera-dashboard {
        --vera-tile-cols: 1;
    }

    .vera-tile-large {
        grid-column: span 1;
    }
}

/* Die Kachel ist das Rasterelement. `min-width/height: 0` ist nicht Kosmetik: Ohne beides wächst ein
   Rasterelement über seine Zelle hinaus, sobald sein Inhalt breiter oder höher ist — eine Liste würde die
   Kachel aufziehen statt in ihr zu rollen, und die ganze Zeile mit. */
.vera-tile {
    display: flex;
    min-width: 0;
    min-height: 0;
    grid-column: span 1;
    grid-row: span 1;
}

.vera-tile-medium {
    grid-row: span 2;
}

.vera-tile-large {
    grid-column: span 2;
    grid-row: span 2;
}

.vera-tile > .mud-paper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    /* Der Inhalt wird an der Rundung beschnitten und nicht darüber hinaus gemalt. */
    overflow: hidden;
}

.vera-tile-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 2px 10px;
    flex: 0 0 auto;
}

/* Die Überschrift weicht als Erstes: In der kleinen Kachel ist die Kopfzeile schmal, und Griff und Menü sind
   Bedienung — sie dürfen nicht von einem langen Titel hinausgeschoben werden. */
.vera-tile-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vera-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 12px 10px 12px;
}

.vera-tile-grip {
    display: inline-flex;
    cursor: grab;
    color: var(--mud-palette-text-secondary);
    /* Sonst wischt ein Ziehen auf dem Tablet die Seite. */
    touch-action: none;
}

.vera-tile-grip:active {
    cursor: grabbing;
}

/* Die gezogene Kachel tritt zurück, das Ziel wird umrissen. Der Umriss liegt innen (`outline-offset: -2px`),
   damit er die Nachbarkachel nicht überlappt und das Raster nicht um zwei Bildpunkte springt. */
.vera-tile-dragging {
    opacity: .45;
}

.vera-tile-over > .mud-paper {
    outline: 2px dashed var(--mud-palette-secondary);
    outline-offset: -2px;
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Batteriekachel.

   Schilderzeile fest, Liste rollend: Die Zusammenfassung ist das, was in jeder Größe stehen bleiben muss — sie
   zählt den ganzen Fuhrpark, während die Liste nur zeigt, was gerade hineinpasst.

   In der großen Kachel stehen die Geräte in zwei Spalten. Die Trennlinie hängt an der Zeile selbst und nicht an
   einem eingeschobenen Element: In einem zweispaltigen Raster wäre eine eigene Trennlinie ein weiteres
   Rasterelement und rutschte in die nächste Zelle.
   --------------------------------------------------------------------------------------------------------------- */
.vera-battery {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.vera-battery-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.vera-battery-rows {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.vera-battery-rows-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    /* Sonst zieht das Raster wenige Zeilen auf die ganze Höhe auseinander. */
    align-content: start;
}

.vera-battery-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.vera-battery-row:last-child {
    border-bottom: none;
}

/* Der Mittelteil gibt nach, die Zahl rechts nicht: Ein langer Gerätename darf den Ladezustand nicht aus der
   Kachel schieben — er ist der Grund, warum man hinsieht. */
.vera-battery-main {
    flex: 1 1 auto;
    min-width: 0;
}

.vera-battery-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vera-battery-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
}

/* Die gewählte Zeile in der Auswertung. Über eine Klasse und nicht über MudBlazors Mehrfachauswahl: Gewählt wird
   durch einen Klick auf die Zeile, und ein Auswahlkästchen je Zeile wäre ein zweites, kleineres Ziel für dieselbe
   Handlung — es nimmt der Liste nur Platz weg.

   Zwei Dinge daran sind erkauft und sollten so bleiben:

   · **Zeile und Zellen tragen die Tönung.** MudBlazor rechnet mit `border-collapse: separate` (bei
     `border-spacing: 0`), und dabei malt eine Zelle mit eigener Fläche über die ihrer Zeile. Eine Tönung, die nur
     an einem der beiden hängt, ist deshalb je nach Zelle sichtbar oder nicht — sichtbar wurde das an der
     feststehenden Werkzeugspalte, die eine eigene Fläche braucht (siehe unten) und die Markierung rechts abschnitt.
   · **Deckend gemischt statt durchsichtig getönt.** Eine durchsichtige Tönung wäre für die feststehende Spalte
     unbrauchbar (das seitlich Durchlaufende schiene hindurch), und die zarte Standardfläche für „überfahren" war als
     Markierung einer Auswahl kaum zu erkennen. `color-mix` mit der Sekundärfarbe trägt die Farbe der Anwendung und
     rechnet in beiden Erscheinungsbildern richtig, weil es mit der Fläche mischt und nicht mit Weiß.
   · **Kein Balken am linken Rand** (Vorgabe des Users, 12.10.2026). Dort sitzt der Prüfstand (siehe ReviewBar),
     und zwei Balken an derselben Kante wären nicht auseinanderzuhalten. Die Fläche allein zeigt die Auswahl.

   Die beiden Flächen stehen als eigene Eigenschaften an der Liste: Sie werden an drei Stellen gebraucht (Zeile,
   Zellen, feststehende Werkzeugspalte), und drei Schreibweisen derselben Mischung würden auseinanderlaufen. */
.vera-recordings {
    --vera-row-hover: color-mix(in srgb, var(--mud-palette-secondary) 6%, var(--mud-palette-surface));
    --vera-row-chosen: color-mix(in srgb, var(--mud-palette-secondary) 14%, var(--mud-palette-surface));
}

.vera-row-selected {
    background-color: var(--vera-row-chosen);
}

/* Ein Text mit Merkmalsymbolen dahinter — der Tourname und der Zeitraum in der Aufzeichnungsliste.

   Die zweite Regel ist der Grund, warum es diese Klasse gibt: MudBlazor zeichnet ein Symbol als `inline-block`-SVG,
   und der Träger des Kurzhinweises ist ebenfalls `inline-block`. Damit sitzt das Symbol auf der Schriftlinie seines
   eigenen Zeilenkastens, und unter ihm bleibt der Platz der Unterlängen leer — der Kasten ist höher als das Symbol,
   und zentriert man ihn, steht das Symbol sichtbar zu hoch. Ein Flexkasten hat keine Schriftlinie, damit fällt der
   Leerraum weg und das Symbol liegt auf der Zeile des Textes. */
.vera-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vera-badges .mud-tooltip-root {
    display: inline-flex;
    align-items: center;
}

/* Die Zeichenzeile der Aufzeichnungsliste steht als dritte Zeile unter dem Tracker. Sie rückt leicht ab, damit
   sie nicht an der Kennung klebt, und bleibt leer ohne Höhe: Eine Zeile ohne Befund soll die Tabellenzeile nicht
   höher machen als eine ohne diese Spalte. */
.vera-badges-row {
    margin-top: 2px;
}

/* Die Werkzeugspalte der Aufzeichnungsliste bleibt am rechten Rand stehen, während die übrigen Spalten darunter
   durchlaufen. Grund: Der Splitter kann schmal gezogen werden, und eine Schaltfläche, die man erst durch seitliches
   Rollen findet, ist in einer Liste keine — die anderen Spalten dürfen dafür abgeschnitten werden.

   Die Zelle muss deckend sein, sonst scheint das seitlich Durchlaufende hindurch. Damit sie die Tönung ihrer Zeile
   nicht abschneidet, bekommt sie jede Lage ausdrücklich: MudBlazor färbt beim Überfahren die *Zeile*, und eine Zelle
   mit eigener Fläche erbt das nicht. Deshalb wird auch das Überfahren an den Zellen nachgezogen — sonst bräche
   dieselbe Tönung an derselben Stelle ab, nur beim Zeigen statt beim Wählen.

   Die Reihenfolge dieser Regeln ist die Rangfolge: „gewählt" steht hinter „überfahren" und gewinnt damit den
   Gleichstand — eine gewählte Zeile soll unter dem Zeiger nicht ihre Markierung verlieren. Den Kopf der Spalte
   versorgt MudBlazor selbst (feststehender Kopf: gleiche Fläche, höhere Ebene). */
.vera-cell-tools {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

.vera-recordings .mud-table-body .mud-table-row:hover > td {
    background-color: var(--vera-row-hover);
}

.vera-recordings .mud-table-body .vera-row-selected > td {
    background-color: var(--vera-row-chosen);
}

/* Der Prüfstand als Balken am linken Rand der Zeile (siehe ReviewBar). Die erste Zelle trägt ihn und hält ihm den
   Platz frei, auch wenn er fehlt — sonst stünden die Kennungen offener Zeilen weiter links als die der übrigen. Der
   Balken ist selbst der Träger des Kurzhinweises: Er liegt als Wurzel des Tooltips absolut in der Zelle und reicht
   über ihre volle Höhe, damit man ihn überall dort trifft, wo man ihn sieht. */
.vera-recordings td.vera-cell-review,
.vera-recordings th.vera-cell-review {
    position: relative;
    padding-left: 20px;
}

.vera-review-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
}

.vera-review-bar-target {
    width: 100%;
    height: 100%;
}

/* Eine verborgene Aufzeichnung — sichtbar nur, solange das Auge in der Filterleiste eingeschaltet ist.

   Gedämpft und nicht ausgegraut: Die Zeile bleibt lesbar und anklickbar, sie gehört nur nicht zum Bestand. Die
   Dämpfung allein wäre zu leise, wenn ohnehin alle sichtbaren Zeilen verborgene sind — deshalb trägt die Zeile
   zusätzlich das durchgestrichene Auge in ihrer Befundleiste. */
.vera-recordings .mud-table-body .vera-row-hidden > td {
    opacity: 0.55;
}

/* Marken auf der Karte: Aktivitätswechsel sowie Anfang und Ende einer Aufzeichnung. Der weiße Rand hebt sie
   von den Stützpunkten ab, die dieselbe Farbe tragen können. */
.vera-map-marker {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.vera-map-marker svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

/* Das Blatt eines Formulareintrags: kleiner als eine Wechselmarke und ohne Kreis — das Symbol selbst trägt die
   Farbe der Aktivität, ein heller Schatten hebt es von der Spur ab. Die Zahl nennt mehrere Einträge am selben Punkt. */
.vera-map-form-marker {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: default;
    filter: drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.vera-map-form-marker svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.vera-map-form-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: #212121;
    color: #ffffff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* Ein Eintrag im Hinweis eines Blatts; der farbige Rand nennt seine Aktivität. */
.vera-map-form-entry {
    margin-top: 4px;
    padding-left: 6px;
    border-left: 3px solid transparent;
}

/* Der Kurzhinweis am Stützpunkt. Bewusst schmal und ohne Überschrift — er soll die Karte nicht verdecken. */
.vera-map-popup .mapboxgl-popup-content {
    padding: 6px 9px;
    border-radius: 8px;
    font-size: .78rem;
    line-height: 1.35;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.vera-map-tip-head {
    font-weight: 600;
    margin-bottom: 2px;
}

.vera-map-tip-label {
    color: #616161;
}

/* ---------------------------------------------------------------------------------------------------------------
   Eigene Bedienelemente auf der Karte.

   Sie tragen die Klassen von Mapbox (.mapboxgl-ctrl-group) und übernehmen damit Hintergrund, Rundung, Schatten und
   die Trennlinien zwischen den Schaltflächen. Hier steht nur, was Mapbox nicht wissen kann: dass unsere Symbole
   SVG-Elemente sind statt Hintergrundbilder, und wie eine eingerastete Schaltfläche aussieht.
   --------------------------------------------------------------------------------------------------------------- */
.vera-map-ctrl-stack {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    /* Der Behälter selbst fängt keine Klicks ab, nur die Steuerungen darin — sonst läge über der halben Karte eine
       unsichtbare Fläche, auf der sich nicht mehr schieben und zoomen ließe. */
    pointer-events: none;
}

.vera-map-ctrl-stack > * {
    pointer-events: auto;
}

/* Zwei Gruppen nebeneinander, jede wächst für sich nach unten.

   Über Flex und ausdrücklich nicht über feste Abstände: Ein zweiter Block mit eigenem `top` wird von der
   aufgeklappten ersten Gruppe überdeckt, sobald sie wächst — genau das war der vorige Versuch. In einer Zeile
   kann das nicht passieren, weil die Gruppen nebeneinander liegen und `align-items: flex-start` sie oben hält. */
.vera-map-ctrl-line {
    flex-direction: row;
}

/* Rechts wird von der rechten Kante her gemessen und die Spalte richtet sich dorthin aus. */
.vera-map-ctrl-right {
    right: 10px;
    align-items: flex-end;
}

.vera-map-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapboxgl-ctrl-group .vera-map-ctrl .mud-icon-root {
    width: 18px;
    height: 18px;
    color: #333333; /* wie die Symbole von Mapbox, die als dunkles SVG im Hintergrundbild stecken */
}

/* Eingerastet: eine Tönung und die Sekundärfarbe im Symbol. Bewusst nicht eine gefüllte, bunte Fläche — die
   Schaltfläche soll wie eine eingerastete Standardschaltfläche wirken und nicht wie ein Fremdkörper. */
.vera-map-ctrl-on {
    background-color: rgba(0, 0, 0, .08);
}

.mapboxgl-ctrl-group .vera-map-ctrl-on .mud-icon-root {
    color: var(--mud-palette-secondary);
}

/* Die Auswahl der Kartengrundlage: nach links auf, weil die Steuerung am rechten Rand sitzt. */
.vera-map-popover {
    position: absolute;
    top: 0;
    right: 39px;
    min-width: 140px;
    background: var(--mud-palette-surface);
}

.vera-map-popover-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.vera-map-popover-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.vera-map-popover-row-chosen {
    background: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

/* Die Legende liegt frei auf der Karte. Ihre Anfangsstelle steht hier und nicht als Inline-Stil: Verschoben wird sie
   vom Browser (siehe veraMap.attachLegendDrag), und der schreibt dann left/top — so streiten Blazor und Skript
   nicht um dasselbe Attribut. */
.vera-map-legend {
    position: absolute;
    left: 10px;
    bottom: 34px;
    z-index: 3;
    width: 180px;
    max-height: 55%;
    overflow: auto;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
}

.vera-map-legend-head {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vera-map-legend-grip {
    display: inline-flex;
    cursor: move;
    color: var(--mud-palette-text-secondary);
    touch-action: none;
}

.vera-map-legend-grip .mud-icon-root {
    width: 15px;
    height: 15px;
}

.vera-map-notice {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: min(360px, calc(100% - 40px));
}

/* Die Kopfdaten der Prüfung oben links über der Karte. Sie liegen in den Behältern der Karte, die selbst keine Klicks
   fangen (siehe .vera-map-ctrl-stack) — deshalb nehmen sie ihre Klicks ausdrücklich an —, und bleiben schmal genug,
   dass rechts die Kartensteuerung frei bleibt. Der Fahrtenschreiber steht unter der Karte und nicht auf ihr: Über
   der Spur hat er mehr gestört als geholfen (Vorgabe des Users). */
.vera-map-panel {
    pointer-events: auto;
    max-width: min(520px, calc(100vw - 160px));
}

/* Zum Ansehen geöffnet nimmt der Fahrtenschreiber keine Griffe an: Eine Vorschau, die beim Loslassen zurückspringt,
   wäre schlechter als keine. */
.vera-timeline-readonly {
    pointer-events: none;
}

/* Eine Wechselmarke in der Nachbearbeitung: Sie lässt sich ziehen, und das muss man ihr ansehen. Anfang und Ende
   einer Aufzeichnung bekommen diese Klasse nicht — sie sind Messungen des Geräts und keine Auslegung. */
.vera-map-marker-draggable {
    cursor: grab;
}

.vera-map-marker-draggable:active {
    cursor: grabbing;
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Werkzeugleiste der Nachbearbeitung: Zeitgrenzen · Stand · Verwenden · Speichern als eine Schaltflächengruppe.

   Der Standwähler ist ein MudMenu und damit eine Schaltfläche — nur so fügt er sich in die Gruppe ein (ein
   Eingabefeld bringt eigenen Rahmen und schwebende Beschriftung mit). Er bekommt eine feste Breite, weil sein Text
   zwischen „Rohdaten (Gerät)" und „Revision 3" wechselt: Ohne sie wandert alles rechts davon unter dem Zeiger weg.
   Die Beschriftung steht links, der Pfeil rechts.

   Absteigender Selektor und kein Kindselektor: MudBlazor legt zwischen `.mud-menu` und die Schaltfläche noch einen
   Träger (`.mud-menu-activator` mit `display:contents`). Die Einträge des Menüs trifft er trotzdem nicht — die
   stehen in einem Überlager am Ende des Dokuments und nicht in diesem Zweig.
   --------------------------------------------------------------------------------------------------------------- */
.vera-version-menu .mud-button-root {
    width: 190px;
    justify-content: space-between;
}

/* Die Aktionsleiste der Prüfung: Stand, Cluster, Verlauf · Zurückgeben, Abschließen. Eine Beschriftung wie
   „Rohdaten (Gerät)" oder „Prüfung abschließen" bricht in einem schmalen Seitenfeld sonst auf zwei Zeilen um; den
   Platz gibt stattdessen der Abstandhalter in der Mitte her. */
.vera-review-actions .mud-button-root {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------------------------------------------
   Der Zeitstrahl der Nachbearbeitung.

   Alle Stellen sind Prozentwerte der Breite: Die Spur stellt das Zeitfenster der Aufzeichnung dar, und dann kostet
   eine Größenänderung des Fensters keine Neuberechnung — weder in C# noch im Browser. Während des Ziehens schreibt
   vera-timeline.js genau dieselben Prozentwerte, die Blazor beim nächsten Rendern verbindlich setzt.
   --------------------------------------------------------------------------------------------------------------- */
.vera-timeline {
    position: relative;
}

/* Der Rahmen, in dem waagerecht gezoomt wird: Spur und Achse werden breiter als er, und darunter entsteht die
   Scrollbar des Browsers.

   Der Innenabstand oben ist der Platz für die Beschriftung der Griffe, und er steht hier und nicht am Strahl:
   Sobald eine Achse rollt, lässt CSS die andere nicht mehr sichtbar überstehen — beschnitten wird aber erst am
   Innenrand, und damit bleibt alles sichtbar, was darin liegt. Die Auswahl eines Abschnitts ist zu hoch dafür und
   steht deshalb außerhalb; ihre Stelle führt vera-timeline.js nach.

   Derselbe Innenabstand ist die Bahn, in der das Pluszeichen erscheint, und damit seine ganze Trefferhöhe. Bei
   20 px war es kaum zu treffen (Rückmeldung des Users); 28 px geben dem größeren Knopf darin Luft. */
.vera-timeline-viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 28px;
}

.vera-timeline-track {
    position: relative;
    /* Hoch genug, dass das Fahrtenschreiberprofil eine Form hat: An ihr liest man ab, ob gesammelt oder
       transportiert wurde, und dafür braucht es mehr als einen Streifen. */
    height: 78px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    overflow: visible;
    touch-action: none; /* sonst wischt ein Zeigerziehen auf dem Tablet die Seite */
}

/* Das Profil füllt die Spur und wird auf ihre Breite gestreckt (preserveAspectRatio="none"): Damit sind alle
   Stellen darin Werte im Koordinatensystem und müssen bei einer Fensteränderung nicht neu gerechnet werden. */
.vera-timeline-profile {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    pointer-events: none; /* der Klick gehört den Abschnittsflächen darüber */
}

.vera-timeline-grid {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke; /* sonst zöge die Streckung die Linie in die Breite */
}

.vera-timeline-scale {
    position: absolute;
    top: 1px;
    left: 4px;
    font-size: .6rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

/* Ein Abschnitt liegt als durchsichtige Fläche über dem Profil: Er trägt den Klick, zeichnet unten einen farbigen
   Streifen und legt einen zarten Schleier über sein Stück. Der Streifen ist das Entscheidende — ein Abschnitt, in
   dem das Fahrzeug nur stand, hat keinen Balken und wäre sonst unsichtbar. */
.vera-timeline-segment {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
}

/* Die Beschriftung in der Farbe der Aktivität auf hellem Grund: Weiß mit Schatten war über einem flächigen Balken
   richtig, über einem Profil mit Lücken wäre es stellenweise unlesbar. */
.vera-timeline-segment-label {
    margin: 2px 0 0 4px;
    padding: 0 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
}

/* Der Griff ist breiter als der Strich, den man sieht: Ein Wechsel muss anfassbar bleiben, auch wenn die
   Abschnitte links und rechts nur wenige Pixel breit sind. Er reicht über die Spur hinaus — oben die Uhrzeit,
   unten der Knopf zum Entfernen. */
.vera-timeline-handle {
    position: absolute;
    top: -18px;
    bottom: -20px;
    width: 20px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: ew-resize;
    touch-action: none;
}

.vera-timeline-handle-time {
    font-size: .62rem;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
    pointer-events: none;
}

.vera-timeline-handle-grip {
    flex: 1 1 auto;
    width: 3px;
    margin-top: 2px;
    border-radius: 2px;
    background: var(--mud-palette-text-primary);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}

/* Hervorgehoben wird der Griff unter dem Zeiger und der, der gerade gezogen wird — beides an ihm selbst und nicht
   am Strahl: Eine Klasse am Strahl träfe jeden Griff darin und zeigte damit gerade nicht, welcher gemeint ist. */
.vera-timeline-handle:hover .vera-timeline-handle-grip,
.vera-timeline-handle-active .vera-timeline-handle-grip {
    background: var(--mud-palette-secondary);
    width: 5px;
}

/* Die runden Knöpfe am Strahl: „−" unter einem bestehenden Wechsel, „+" über der vorläufigen Trennlinie. Oben
   hinzufügen, unten entfernen — die Richtung allein sagt schon, was geschieht. */
.vera-timeline-round {
    display: inline-flex;
    padding: 0;
    font: inherit;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    cursor: pointer;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.vera-timeline-round .mud-icon-root {
    width: 13px;
    height: 13px;
}

/* Gefüllt in der Farbe des Griffs, mit weißem Minus: Der Knopf ist das untere Ende derselben Trennlinie und soll
   auch so aussehen — ein roter Ring daneben hätte ihn zu einem eigenen Ding gemacht. Rot wird er erst beim Zeigen,
   denn dann geht es tatsächlich um das Entfernen. */
.vera-timeline-round-remove {
    margin-top: 2px;
    border: 1px solid var(--mud-palette-surface);
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
}

.vera-timeline-round-remove:hover {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

/* Größer als der Knopf zum Entfernen: Das Pluszeichen erscheint erst unter dem Zeiger und muss dann ohne Zielen zu
   treffen sein. Die eingerastete Fassung hat dieselbe Größe, damit beim Öffnen der Auswahl nichts springt. */
.vera-timeline-round-add,
.vera-timeline-round-pinned {
    width: 24px;
    height: 24px;
}

.vera-timeline-round-add .mud-icon-root,
.vera-timeline-round-pinned .mud-icon-root {
    width: 16px;
    height: 16px;
}

.vera-timeline-round-add {
    margin-bottom: 2px;
    border: 1px solid var(--mud-palette-secondary);
    color: var(--mud-palette-secondary);
}

.vera-timeline-round-add:hover {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

/* Die vorläufige Trennlinie unter dem Zeiger. Vom Stylesheet verborgen; der Browser blendet sie ein und setzt ihre
   Stelle (siehe vera-timeline.js). Gestrichelt und in der Sekundärfarbe, damit sie sich von den bestehenden
   Wechseln unterscheidet — sie ist ein Vorschlag, kein Zustand. */
.vera-timeline-insert {
    display: none;
    position: absolute;
    top: -28px;
    bottom: 0;
    width: 24px;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* die Linie fängt nichts ab; nur das Pluszeichen ist anklickbar */
}

.vera-timeline-insert-line {
    flex: 1 1 auto;
    width: 0;
    border-left: 2px dashed var(--mud-palette-secondary);
}

.vera-timeline-insert .vera-timeline-round-add {
    pointer-events: auto;
}

/* Die eingerastete Trennlinie, solange die Aktivität dafür gewählt wird: durchgezogen und gefüllt statt gestrichelt
   und offen. Aus einem Vorschlag ist eine Festlegung geworden — man soll beim Wählen sehen, wo geteilt wird. */
.vera-timeline-pinned {
    position: absolute;
    top: -28px;
    bottom: 0;
    width: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.vera-timeline-pinned-line {
    flex: 1 1 auto;
    width: 2px;
    background: var(--mud-palette-secondary);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}

.vera-timeline-round-pinned {
    margin-bottom: 2px;
    border: 1px solid var(--mud-palette-surface);
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    cursor: default;
}

/* Der Zeitzeiger: die Stelle, auf die gerade gezeigt wird — von hier oder von der Karte her. Vom Stylesheet
   verborgen; der Browser blendet ihn ein und setzt seine Stelle (siehe vera-timeline.js). Durchgezogen und dünn,
   damit er weder mit einem bestehenden Wechsel noch mit der vorläufigen Trennlinie zu verwechseln ist. */
.vera-timeline-cursor {
    display: none;
    position: absolute;
    top: -18px;
    bottom: 0;
    width: 0;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.vera-timeline-cursor-line {
    flex: 1 1 auto;
    width: 0;
    border-left: 1px solid var(--mud-palette-text-primary);
    opacity: .75;
}

/* Gefüllt statt umrandet: Das Etikett liegt auf derselben Höhe wie die Uhrzeiten der Griffe und muss von ihnen
   unterscheidbar bleiben — es sagt, wo man hinzeigt, nicht, was dort gespeichert ist. */
.vera-timeline-cursor-label {
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    font-size: .62rem;
    line-height: 1.35;
    white-space: nowrap;
}

/* „Ganz anzeigen“. Vom Stylesheet verborgen: Sie ist die Rücknahme eines Zooms und erscheint erst, wenn gezoomt
   ist — eingeblendet vom Browser, der als Einziger den Zoomfaktor kennt. */
.vera-timeline-reset {
    display: none;
    position: absolute;
    top: -1px;
    right: 0;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font: inherit;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    cursor: pointer;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
}

.vera-timeline-reset:hover {
    color: var(--mud-palette-secondary);
    border-color: var(--mud-palette-secondary);
}

.vera-timeline-reset .mud-icon-root {
    width: 15px;
    height: 15px;
}

/* Die Randzeiger: Liegt die gezeigte Stelle außerhalb des gezoomten Ausschnitts, sagt ein Pfeil die Richtung. Er
   fängt nichts ab — er ist eine Auskunft und keine Schaltfläche. */
.vera-timeline-edge {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 50%;
    pointer-events: none;
    opacity: .7;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
}

.vera-timeline-edge-left {
    left: 2px;
}

.vera-timeline-edge-right {
    right: 2px;
}

.vera-timeline-edge .mud-icon-root {
    width: 14px;
    height: 14px;
}

/* Die Formulareinträge unter dem Strahl: eine Zeile von 5 px Höhe direkt darunter. Zählungen sind 3 px breite
   Punkte um ihren Zeitpunkt, Einträge an einer Grenze 8 px breite Rechtecke — der Beginn setzt an der Grenze an, das
   Ende hört an ihr auf. Nur die Marken selbst nehmen den Zeiger an, damit ihr Hinweis erscheint. */
.vera-timeline-entries {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    height: 5px;
    pointer-events: none;
}

.vera-timeline-entry {
    position: absolute;
    top: 0;
    height: 5px;
    pointer-events: auto;
}

.vera-timeline-entry-count {
    width: 3px;
    transform: translateX(-50%);
    border-radius: 1px;
}

.vera-timeline-entry-start {
    width: 8px;
}

.vera-timeline-entry-stop {
    width: 8px;
    transform: translateX(-100%);
}

/* Die kompakte Ansicht: nur das Profil und der Zeitzeiger. Ohne Innenabstand oben, weil es keine Griffe mit Uhrzeit
   gibt, ohne Scrollbar, weil nicht gezoomt wird, und ohne Hand am Abschnitt, weil er hier nichts annimmt. Das Etikett
   des Zeitzeigers rückt in die Spur — darüber wäre es abgeschnitten. */
.vera-timeline-compact .vera-timeline-viewport {
    overflow: hidden;
    padding-top: 0;
    /* Platz für die Formulareinträge unter dem Strahl — ohne ihn schnitte der Rahmen sie ab. */
    padding-bottom: 8px;
}

.vera-timeline-compact .vera-timeline-track {
    height: 30px;
}

.vera-timeline-compact .vera-timeline-segment {
    cursor: default;
}

.vera-timeline-compact .vera-timeline-cursor {
    top: 0;
}

.vera-timeline-axis {
    position: relative;
    height: 14px;
    /* Platz für die Knöpfe, die unter der Spur hängen. */
    margin-top: 22px;
}

.vera-timeline-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: .62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.vera-timeline-tick::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 1px;
    height: 3px;
    background: var(--mud-palette-lines-default);
}

/* Die Auswahl eines Abschnitts. Sie öffnet nach oben über die Karte: Unter dem Strahl ist kein Platz, und über ihm
   verdeckt sie nur einen Teil der Fläche, die man ohnehin gerade nicht bearbeitet. */
/* Vollständig oberhalb des Strahls und nicht ein Stück darüber gelegt: Sonst verdeckte sie genau das, worauf sie
   sich bezieht — die eingerastete Trennlinie und die Uhrzeiten der Wechsel. */
.vera-timeline-picker {
    position: absolute;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    z-index: 5;
    width: 240px;
}

.vera-timeline-picker-list {
    max-height: 168px;
    overflow-y: auto;
}

.vera-timeline-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
}

.vera-timeline-picker-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.vera-timeline-picker-row-chosen {
    background: var(--mud-palette-action-default-hover);
    box-shadow: inset 2px 0 0 0 var(--mud-palette-secondary);
}

.vera-timeline-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4;
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Flottenkachel der Startseite.

   Die Karte braucht eine gemessene Höhe. Sie steht hier als `flex: 1 1 auto` in einer Kachel, deren Höhe das
   Raster vorgibt (siehe „Das Raster der Startseite") — deshalb `min-height: 0` an den Vorfahren: Ohne das wächst
   ein Flexkind über seinen Kasten hinaus, und die Kachel zieht die ganze Rasterzeile auf.
   --------------------------------------------------------------------------------------------------------------- */
.vera-fleet {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
}

.vera-fleet-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Die Breite trägt der Behälter und nicht das Auswahlfeld: Ein MudSelect mit eigener Breite gibt sie an sein
   Überlager weiter, und dann schneidet die Projektliste ihre eigenen Einträge ab. */
.vera-fleet-project {
    width: 180px;
    max-width: 55%;
}

.vera-fleet-map-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 140px;
    border-radius: 10px;
    overflow: hidden;
}

/* Die Karte füllt den Rahmen über Prozentwerte und ausdrücklich nicht über `position: absolute; inset: 0`:
   Mapbox hängt sein eigenes Stylesheet erst beim Aufbau der Karte in den Kopf, also hinter app.css, und dessen
   `.mapboxgl-map { position: relative }` hat dieselbe Spezifität wie eine Regel auf diese Klasse. Es gewinnt damit
   allein durch die spätere Stelle, `inset` wirkt an einem bezogen gestellten Kasten nicht mehr, und die Leinwand
   fällt auf die Höhe null zusammen. Eine Höhe in Prozent übersteht diesen Wechsel, weil sie von der Stellung
   unabhängig ist — der Rahmen ist als Flexkind fest hoch, und daran lassen sich 100% messen. */
.vera-fleet-map {
    width: 100%;
    height: 100%;
}

/* Die Geräteliste unter der Karte. In der großen Kachel zweispaltig, damit die zusätzliche Breite den Geräten
   zugutekommt und nicht dem Leerraum. */
.vera-fleet-list {
    flex: 0 0 auto;
    max-height: 30%;
    overflow: auto;
}

.vera-fleet-list-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-content: start;
}

.vera-fleet-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.vera-fleet-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Eine Zeile, zu deren Fahrzeug es auf der Karte etwas zu zeigen gibt, führt dorthin. Sie sieht auch danach aus:
   Dies ist die Verwaltungsoberfläche, hier ist Hover ein zulässiges Mittel. Die schweigenden Geräte behalten
   bewusst den Textzeiger — eine Zeile, die sich anklicken lässt und dann nichts tut, ist schlechter als eine, die
   gar nicht erst danach aussieht. */
.vera-fleet-row-focusable {
    cursor: pointer;
    border-radius: 6px;
}

.vera-fleet-row-focusable:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Der Punkt in der Liste trägt die Farbe des Schweifs auf der Karte — das ist die einzige Verbindung zwischen
   Liste und Karte, und sie muss ohne Beschriftung tragen. Ein schweigendes Gerät erscheint blass. */
.vera-fleet-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

/* Die Spitze eines Schweifs. Der Pfeil dreht mit der Karte (rotationAlignment: 'map'), zeigt also in die
   Fahrtrichtung im Gelände. Steht das Fahrzeug, wird daraus ein Punkt — ein Pfeil ohne Richtung wäre eine
   Behauptung. */
.vera-fleet-head {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.vera-fleet-head svg {
    width: 26px;
    height: 26px;
}

.vera-fleet-head-still {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}

/* Das Auswahlrechteck der Nachbearbeitung. Ein Aufsatz über der Leinwand und keine Kartenebene: Es wird in
   Bildschirmpunkten aufgezogen, und genau das soll es bleiben, wenn die Karte darunter zoomt. */
.vera-map-box {
    position: absolute;
    border: 2px dashed var(--mud-palette-primary, #1976d2);
    background: rgba(25, 118, 210, .12);
    pointer-events: none;
    z-index: 3;
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Navigationsleiste: Wortmarke und Doodle-Band.

   Die Wortmarke trägt den Produktnamen mit — deshalb steht daneben kein Titeltext mehr. Sie ist weiß auf
   durchsichtigem Grund und liegt damit sowohl auf dem Hausgrün des hellen als auch auf dem Dunkelgrau des
   dunklen Erscheinungsbilds richtig.

   Das Doodle-Band ist eine *Maske* und kein Hintergrundbild. Die Datei ist bereits weiße Strichzeichnung auf
   durchsichtigem Grund; als Maske gibt sie nur die Form vor, und die Farbe kommt aus `currentColor` — das ist
   an der Leiste die Textfarbe des Themas. Damit stimmt die Tönung in beiden Erscheinungsbildern, ohne eine
   zweite, weicher gezeichnete Bilddatei. Gekachelt wird waagerecht auf voller Leistenhöhe: Das Band ist 16:1,
   eine Kachel deckt bei üblicher Leistenhöhe rund 1000 Punkte ab, und auf breiten Bildschirmen bliebe die
   rechte Hälfte sonst leer.

   Die Regeln hängen an einer eigenen Klasse und nicht an `.mud-appbar`: Es geht um diese Leiste, nicht darum,
   MudBlazor pauschal zu überstimmen.
   --------------------------------------------------------------------------------------------------------------- */
/* Die Wortmarke steht in einem eigenen Kasten, und der ist breiter als sie selbst. Zwei Gründe:

   Der Kasten reserviert den Platz. In der Werkzeugleiste ist ein Bild ein Flex-Element wie jedes andere und
   wird zusammengeschoben, sobald rechts Designwechsel, Benutzername und Abmelden Platz fordern — eine
   gestauchte Marke ist aber keine Marke mehr. `flex: 0 0 auto` nimmt sie aus dem Verteilen heraus.

   Und er gibt ihr Luft. Die Marke ist zweizeilig (Bildzeichen, darüber der Schriftzug) und braucht
   seitlichen Abstand, um als Ganzes gelesen zu werden; direkt neben dem Menüschalter klebte sie an ihm.
   Die Breite ist rund das Doppelte dessen, was das Bild bei dieser Höhe einnimmt (595:231 ergibt bei 40
   Punkten Höhe etwa 103 Punkte Breite) — der Rest ist bewusst Leerraum. */
.vera-appbar-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 208px;
}

/* Das Piktogramm von INFA.Vera in der runden Marke der Anmeldekarte. Weiß auf durchsichtigem Grund — die Farbe
   kommt von der Marke, die es trägt. */
.vera-pictogram {
    width: 66%;
    height: 66%;
    object-fit: contain;
}

.vera-appbar-logo {
    display: block;
    height: 40px;
    width: auto;
    flex: 0 0 auto;
}

/* Benutzername und Mandant stehen untereinander und werden als eine Angabe gelesen: wer bin ich, wo bin
   ich. Die Zeilenhöhe ist gedrückt, damit beide zusammen in die Leiste passen, ohne sie höher zu machen.

   Gedämpft wird über die Deckkraft und nicht über eine eigene Farbe: In der Leiste gilt die Textfarbe des
   Themas, und die ist im hellen und im dunklen Erscheinungsbild verschieden — eine feste Farbe wäre in
   einem von beiden falsch. */
.vera-appbar-identity {
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.vera-appbar-tenant {
    opacity: .72;
}

/* `inset: 0` braucht keinen eigenen Bezugsrahmen: MudBlazor gibt der Leiste `position: relative`. */
.vera-appbar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Der Schleier fängt nichts ab — darunter liegen Menüschalter, Designwechsel und Abmelden. */
    pointer-events: none;
    background-color: currentColor;
    opacity: .16;
    -webkit-mask-image: url("images/vera-doodle-banner.png");
    mask-image: url("images/vera-doodle-banner.png");
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

/* Ohne diese Regel malt das Überlager über den Inhalt statt hinter ihn: Ein absolut gesetztes Pseudoelement
   liegt in der Ebene der positionierten Nachfahren, die Werkzeugleiste selbst ist unpositioniert und damit
   darunter. Erst mit eigener Ebene liegen Wortmarke und Schaltflächen wieder obenauf. */
.vera-appbar > .mud-toolbar {
    position: relative;
    z-index: 1;
}
/* ---------------------------------------------------------------------------------------------------------------
   Die Aufzeichnungsliste der Auswertung — ein DataGrid nach dem Vorbild der MudBlazor-Vorlage (Vorgabe des
   Users, 21.09.2026).

   Es füllt die linke Spalte des Splitters ganz aus und teilt sie in drei Lagen: Werkzeugleiste oben, Seitenzahl
   unten, dazwischen die Tabelle mit ihrer eigenen Rollfläche. Ohne diese drei Regeln wüchse das Gitter aus der
   Spalte heraus — MudBlazor gibt seiner Rollfläche nur dann eine Höhe, wenn man eine in Pixeln oder Prozent
   angibt, und beides wäre hier ein ausgerechneter Wert, der bei jeder Änderung an Werkzeugleiste oder Seitenzahl
   nachgeführt werden müsste.

   `min-height: 0` ist dabei der Punkt, an dem es überhaupt rollt: Ein Flexkind darf sonst nicht unter seine
   Inhaltshöhe schrumpfen. Und eigenes Rollen braucht es, weil MudSplitPanel seinen Panels `overflow: hidden`
   setzt — ohne das wäre die Liste ab der Splitterhöhe abgeschnitten statt rollbar.
   --------------------------------------------------------------------------------------------------------------- */
.vera-recordings {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vera-recordings > .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
}

.vera-recordings > .mud-toolbar,
.vera-recordings > .mud-table-pagination {
    flex: 0 0 auto;
}

/* Das Suchfeld teilt sich die Werkzeugleiste mit Überschrift und Filterschaltfläche. Eine Obergrenze, damit es
   in einer breit gezogenen Spalte nicht den halben Kopf einnimmt — und eine Untergrenze, damit beim schmal
   gezogenen Splitter der Platzhalter noch lesbar bleibt, statt auf drei Zeichen zusammenzufallen. */
.vera-recordings-search {
    min-width: 140px;
    max-width: 260px;
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Filterschublade am rechten Bildrand.

   Sie ist eine gewöhnliche MudBlazor-Schublade; hier steht nur, wie ihr Inhalt sitzt. Ein Flexkasten von oben
   nach unten: Kopf, die Gruppen mit eigener Rollfläche, das Zurücksetzen als Fuß. Damit bleibt der Knopf
   erreichbar, auch wenn die Gruppen einmal über die Bildschirmhöhe hinauswachsen.

   Eine Container-Abfrage braucht sie nicht mehr: Ihre Breite steht fest, und die Gruppen stehen ohnehin
   einspaltig — in 380 Bildpunkten ist eine eigene Beschriftungsspalte teurer als die Symmetrie, die sie bringt.
   --------------------------------------------------------------------------------------------------------------- */
.vera-filter-drawer {
    display: flex;
    flex-direction: column;
}

.vera-filter-groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 8px;
}

.vera-filter-group + .vera-filter-group {
    margin-top: 12px;
}

.vera-filter-group-label {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

/* Die Abzeichen rücken enger zusammen als im Standard (Vorgabe des Users: kompakt). MudBlazors 4px ringsum sind
   für einzelne Marken gedacht; hier stehen bis zu fünf in einer Gruppe und mehrere Gruppen untereinander, und
   der Standardabstand machte aus der Schublade eine halbe Bildschirmhöhe. */
.vera-filter-drawer .mud-chip {
    margin: 2px;
}

.vera-filter-drawer-foot {
    flex: 0 0 auto;
    padding: 8px 16px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ---------------------------------------------------------------------------------------------------------------
   Die Fotos aus dem Feld: Kamerasymbol auf der Karte und am Zeitstrahl, die runde Vorschau beim Zeigen, das Vollbild
   und das Verpixeln.
   --------------------------------------------------------------------------------------------------------------- */

/* Das Kamerasymbol: so groß wie ein Blatt und wie dieses ohne Kreis, damit beide nebeneinander gleich gewichtet sind.
   Dunkel statt in einer Aktivitätsfarbe — ein Foto gehört keiner Aktivität sichtbar an, es ist ein eigenes Ding. */
.vera-map-photo-marker {
    position: relative;
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: #263238;
    filter: drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.vera-map-photo-marker svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Noch auf dem Gerät: blasser und ohne Vorschau — nur der Kurzhinweis sagt, was hier kommt. */
.vera-map-photo-pending {
    cursor: default;
    color: #78909c;
}

/* Die runde Vorschau. Sie steht fest im Fenster (siehe vera-photos.js) und wächst aus der Größe 0 genau über dem
   Symbol auf; beim Verlassen schrumpft sie wieder dorthin zurück. */
.vera-photo-preview {
    position: fixed;
    z-index: 2000;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    overflow: hidden;
    cursor: zoom-in;
    border: 3px solid #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    background: #263238;
    transform: scale(0);
    transition: transform 180ms ease-out;
}

.vera-photo-preview-open {
    transform: scale(1);
}

.vera-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Die Zahl der Fotos an dieser Stelle, wenn es mehrere sind — oben rechts im Kreis. */
.vera-photo-preview-count {
    position: absolute;
    top: 30px;
    right: 30px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: #212121;
    color: #ffffff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

/* Der Hinweis auf gelöschte Fotos, unten rechts über der Namensnennung von Mapbox. */
.vera-map-photo-deleted {
    position: absolute;
    right: 10px;
    bottom: 34px;
    z-index: 2;
}

/* Die Kamerasymbole unter dem Zeitstrahl, eine Zeile unter den Formulareinträgen. */
.vera-timeline-photos {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 9px);
    height: 14px;
    pointer-events: none;
}

.vera-timeline-photo {
    position: absolute;
    top: 0;
    width: 14px;
    height: 14px;
    transform: translateX(-50%);
    color: #263238;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
}

.vera-timeline-photo .mud-icon-root {
    width: 14px;
    height: 14px;
}

.vera-timeline-photo-pending {
    color: #78909c;
    cursor: default;
}

/* Platz unter dem Strahl für die Kamerasymbole — ohne ihn schnitte der rollbare Rahmen sie ab. */
.vera-timeline-has-photos .vera-timeline-viewport {
    padding-bottom: 26px;
}

/* Das Vollbild: das Bild so groß, wie das Fenster es zulässt, die Pfeile links und rechts darüber. */
.vera-photo-viewer-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: #121212;
    outline: none;
}

.vera-photo-viewer-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 240px);
    object-fit: contain;
}

/* Der Kommentar des Bedieners unter dem Bild: seine Zeilenumbrüche bleiben stehen, ein langer Text rollt,
   statt das Bild aus dem Fenster zu schieben. */
.vera-photo-viewer-comment {
    white-space: pre-line;
    overflow-wrap: anywhere;
    max-height: 7.5em;
    overflow-y: auto;
}

/* Nur die Lage über dem Bild; Farbe und Form kommen von MudBlazor (gefüllter, dunkler Knopf). */
.vera-photo-viewer-step {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.vera-photo-viewer-previous {
    left: 12px;
}

.vera-photo-viewer-next {
    right: 12px;
}

/* Die Leinwand beim Verpixeln; der Pinsel wird auf ihr gezeichnet, der Zeiger selbst verschwindet. */
.vera-photo-pixelate {
    display: flex;
    justify-content: center;
    background: #121212;
    border-radius: 8px;
}

.vera-photo-pixelate-canvas {
    display: block;
    max-width: 100%;
    cursor: none;
}