body {
}

/* ══════════════════════════════════════════════════════════════════════
   19.08.2026 — VERBINDUNGSABRISS SICHTBAR MACHEN (siehe App.razor).
   Blazor setzt auf #components-reconnect-modal seine Zustandsklassen:
     .components-reconnect-show     Leitung weg, Wiederverbindung laeuft
     .components-reconnect-failed   Wiederverbindung aufgegeben
     .components-reconnect-rejected Server kennt die Sitzung nicht mehr
   Ohne Regeln dafuer bliebe der Abriss unsichtbar - die Seite saehe
   gesund aus und reagierte auf keinen Klick.
   ══════════════════════════════════════════════════════════════════════ */
#components-reconnect-modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20000;
    padding: 14px 18px;
    background: #7C2D12;
    color: #fff;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .28);
    font-size: 14px;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: block !important;   /* schlaegt das Inline-display:none im App.razor */
    }

    #components-reconnect-modal .arc-box {
        display: flex;
        align-items: center;
        gap: 14px;
        max-width: 1100px;
        margin: 0 auto;
    }

    #components-reconnect-modal .arc-texte {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    #components-reconnect-modal .arc-texte span {
        opacity: .92;
        font-size: 13px;
        line-height: 1.45;
    }

/* Wartetext beim Wiederverbinden, Fehlertext wenn es aufgegeben wurde -
   nie beide gleichzeitig. */
#components-reconnect-modal .arc-t-fail,
#components-reconnect-modal .arc-s-fail {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .arc-t-wait,
#components-reconnect-modal.components-reconnect-failed .arc-s-wait,
#components-reconnect-modal.components-reconnect-rejected .arc-t-wait,
#components-reconnect-modal.components-reconnect-rejected .arc-s-wait {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .arc-t-fail,
#components-reconnect-modal.components-reconnect-failed .arc-s-fail,
#components-reconnect-modal.components-reconnect-rejected .arc-t-fail,
#components-reconnect-modal.components-reconnect-rejected .arc-s-fail {
    display: block;
}

#components-reconnect-modal .arc-spin {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: arc-dreh .9s linear infinite;
    flex-shrink: 0;
}

/* Aufgegeben: kein Kreisel mehr - er wuerde Arbeit vortaeuschen. */
#components-reconnect-modal.components-reconnect-failed .arc-spin,
#components-reconnect-modal.components-reconnect-rejected .arc-spin {
    display: none;
}

@keyframes arc-dreh {
    to {
        transform: rotate(360deg);
    }
}

#components-reconnect-modal .arc-btn {
    flex-shrink: 0;
    background: #fff;
    color: #7C2D12;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
}

    #components-reconnect-modal .arc-btn:hover {
        background: #FFEDD5;
    }

/* ════════════════════════════════════════════════════════════════════════
   ⚠ 19.08.2026 — #blazor-error-ui: der Streifen fuer den ABSTURZ.

   Der Streifen darueber (#components-reconnect-modal) meldet den
   Leitungsabriss. Stirbt der Circuit dagegen an einer Ausnahme, setzt
   Blazor _renderingFailed und ruft onConnectionDown gar nicht mehr auf —
   dann greift es allein nach diesem Element hier.

   Die frueheren Regeln dafuer standen in MainLayout.razor.css und waren
   SCOPED (#blazor-error-ui[b-87s2vmt0ui]); an einem Element ohne dieses
   Attribut haetten sie nie gegriffen. Deshalb stehen sie jetzt global.

   Rot statt des blassen Gelbs der Blazor-Vorlage: Dieser Fall ist
   endgueltig, die Seite ist bis zum Neuladen unbedienbar. Ein Streifen,
   den man fuer eine Verzierung haelt, ist so gut wie keiner.

   ⚠ display: none IST PFLICHT — und zwar OHNE !important.
   Ein <div> ist von Haus aus sichtbar; ohne diese Zeile laege der rote
   Streifen dauerhaft ueber der Seite und finge Klicks ab. Genau der
   Zustand, den er melden soll.
   Blazor macht ihn ueber einen INLINE-Stil sichtbar
   (element.style.display = "block"), und Inline schlaegt jede Regel aus
   dem Stylesheet. Ein !important hier wuerde das aushebeln und den
   Streifen fuer immer unsichtbar machen — anders als beim
   Reconnect-Streifen darueber, wo Blazor ueber KLASSEN arbeitet und das
   !important deshalb noetig ist.
   ════════════════════════════════════════════════════════════════════════ */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10050;   /* ueber .cmdk (2000) und der Rail-Maske (1090) */
    background: #7F1D1D;
    color: #FEF2F2;
    padding: 12px 18px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .28);
    font-size: 13.5px;
}

    #blazor-error-ui .bef-box {
        display: flex;
        align-items: center;
        gap: 14px;
        max-width: 1100px;
        margin: 0 auto;
    }

    #blazor-error-ui .bef-ico {
        font-size: 22px;
        flex-shrink: 0;
        opacity: .95;
    }

    #blazor-error-ui .bef-texte {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

        #blazor-error-ui .bef-texte strong {
            font-weight: 600;
            font-size: 14px;
        }

        #blazor-error-ui .bef-texte span {
            opacity: .9;
            font-size: 12.5px;
        }

    #blazor-error-ui .bef-btn {
        flex-shrink: 0;
        margin-left: auto;
        background: #fff;
        color: #7F1D1D;
        border: none;
        border-radius: 8px;
        padding: 9px 18px;
        font-weight: 600;
        font-size: 13.5px;
        cursor: pointer;
    }

        #blazor-error-ui .bef-btn:hover {
            background: #FEE2E2;
        }

/* Die Blazor-Vorlage blendet hier einen eigenen .dismiss-Schliesser ein.
   Er ist unerwuenscht: Wegklicken aendert nichts daran, dass die Seite
   unbedienbar ist, und nimmt dem Bediener nur den Recharger-Knopf aus dem
   Blick. */
#blazor-error-ui .dismiss {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 07.09.2026 — SEITENKOPF: IMMER in der HAUPTFARBE (Betreiber-Wunsch).
   Jede Seite baut ihren Kopf selbst; vier Bauweisen im Bestand, davon
   zwei OHNE Hintergrund (der Kopf erbte das Grau des .app-shell).
   Die Regel gibt jedem .page-header den Haus-Blauverlauf (wie Dashboard-
   Banner und Transport-Balken) mit weißer Schrift. :where() hat Spezifität 0
   für den Hintergrund — ein Kopf mit eigener Farbe gewinnt weiterhin.
   Die Schriftfarben tragen !important, weil viele Seiten ihre Titel lokal
   dunkel setzen (dunkel auf Blau wäre unlesbar).
   Jeder Seitenkopf trägt die Klasse page-header (Wächter: KonsoleKopfzeilenTests).
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠ 10.09.2026 (Betreiber: „alle Header gleich breit") — DER SCROLLBALKEN
   MACHTE DEN LETZTEN UNTERSCHIED.

   Gescrollt wird das FENSTER. Der Balken nimmt sich 15 px vom sichtbaren
   Bereich, also ist jede Seite, die scrollt, um 15 px schmaler als eine, die
   auf den Schirm passt: /promos mass 1209 px, /recharges und /driver-payouts
   1194 — beim Durchklicken sprang der blaue Kasten sichtbar hin und her,
   obwohl alle dieselbe Regel benutzen.

   `stable` hält den Platz IMMER frei, auch auf kurzen Seiten. Damit ist die
   Breite von der Länge der Seite unabhängig. */
html {
    scrollbar-gutter: stable;
}

:root {
    --mewa-kopf-bg: linear-gradient(135deg, #0072A3, #005A82);
    --mewa-kopf-rand: #005A82;
    --mewa-kopf-text: #FFFFFF;
    --mewa-kopf-sub: rgba(255, 255, 255, 0.86);
    /* ✨ 15.09.2026 (Betreiber: „Header background der Tabelle bisschen heller" → „ich meine hellblau") —
       TABELLENköpfe hellblau mit dunkelblauer Schrift in der Hausfarbe; der Seitenkopf behält den blauen
       Verlauf (--mewa-kopf-bg). Kontrast Schrift/Grund ≈ 7 : 1 (Wächter verlangt mindestens 4,5 : 1). */
    --mewa-tabelle-kopf-bg: #E3F1F9;
    --mewa-tabelle-kopf-text: #005A82;
    --mewa-tabelle-kopf-linie: #C9E3F1;
}
:where(.page-header) {
    display: flex;
    align-items: center;
    /* KEIN justify-content hier: Icon-Köpfe (Garages) haben nur Icon + Text und würden auseinandergerissen;
       Seiten mit Aktionen rechts setzen space-between selbst oder geben dem Text flex:1. */
    flex-wrap: wrap;
    gap: 12px 16px;
    background: var(--mewa-kopf-bg);
    color: var(--mewa-kopf-text);
    border: 0;
    padding: 18px 22px;
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 14.09.2026 (Betreiber im Klicktest: „Alle Header müssen wie Restaurants
   aussehen, die ganze Breite" — Rückfrage beantwortet: ganze Breite, BLAU).

   Ersetzt den Kasten vom 10.09. (`.mewa-kopf-kasten`: 1336 px, runde Ecken,
   28 px Abstand oben). Damals hieß der Wunsch „alle gleich breit" — jetzt
   sind sie wieder gleich breit, aber über die VOLLE Breite der Hauptfläche,
   oben bündig, ohne Ecken und Schatten. Wie « Restaurants », nur in der
   Hausfarbe.

   Gemessen am 14.09. über alle 49 Seiten: vier Bauweisen.
     A  `.page-header` in einer gepolsterten Hülle (page-wrap 28/32,
        sos-page 24/32, set-page 860 px mittig …)
     B  eigener Kopf mit `.mewa-kopf-kasten` (die acht Geldseiten)
     C  eigener weißer Kopf über die volle Breite (Restaurants & Co.)
     D  eigener blauer Kopf, 138 px hoch, der Inhalt ragt 40 px hinein
        (Transport, Covoiturage)
   B, C und D tragen jetzt `.mewa-kopf-band`.

   ══ WIE EIN KOPF IN EINER SCHMALEN HÜLLE DIE VOLLE BREITE BEKOMMT ══
   Die Hüllen haben Polster UND oft eine Höchstbreite mit `margin: auto`
   (/settings: 860 px). Negative Ränder träfen die Kante nur, solange die
   Hülle schmaler als ihre Höchstbreite ist — auf einem breiten Schirm nicht.
   Deshalb malt `border-image` den Verlauf nach links und rechts um 100vmax
   ÜBER den Kasten hinaus. Das ist reine Tinte: sie schiebt nichts, macht
   keinen Querscroll, und `main.app-main` (overflow: auto) schneidet sie
   exakt an seiner Kante ab — nicht über die Seitenleiste.
   Den Abstand oben nimmt die Hülle selbst weg (:has), damit der Balken
   bündig oben steht und der Titel darin mittig bleibt.

   ⚠ SPEZIFITÄT: Die Seiten setzen in ihren <style>-Blöcken `border:` als
   Kurzform — die setzt `border-image` auf none zurück. `main.app-main …`
   (0,2,1) schlägt die Seitenregeln (0,1,0).
   ⚠ Alle Köpfe benutzen DIESELBE Malweise, auch die, die ohnehin volle
   Breite haben: Der Verlauf über 100vmax zeigt nur seine Mitte. Mit
   `background` allein wäre ein Kopf links heller als der nächste.
   ═══════════════════════════════════════════════════════════════════════ */
main.app-main :is(.page-header, .mewa-kopf-band) {
    border-image: var(--mewa-kopf-bg) fill 0 / 0 / 0 100vmax;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
}

main.app-main .mewa-kopf-band {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: auto;
    border-bottom: 0;
}

/* Die Hülle eines Kopfes gibt ihr Polster OBEN ab — seitlich und unten
   bleibt es, der Inhalt darunter steht wie bisher. Gilt auch für die zwei
   Köpfe, die als div in einer gepolsterten Hülle stehen (Dashboard-Banner,
   Documents). */
main.app-main :has(> :is(.page-header, .mewa-kopf-band)) {
    padding-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 14.09.2026 spätabends — SEITENRASTER: JEDE SEITE WIE « CHAUFFEURS ».

   Betreiber: „Alle Seiten sehen unterschiedlich aus, guckt mal Chauffeur, so
   sollte die Position der Headertitle, alle müssen an dieser Position anfangen
   und dann der untere Teil, dieser Inhalt müssen die gleiche Länge haben,
   genau so breit, sodass wenn man die Seite navigiert, man nichts merkt —
   nur die Inhalte müssen sich ändern."

   Gemessen über 51 Seiten bei 1920 px Fensterbreite (Hauptfläche 1657 px):
   Titelbeginn zwischen 48 und 503 px (Chauffeurs 83), Inhaltskante zwischen
   24 und 431 px (Chauffeurs 61), Titel 18–32 px, Köpfe 82–190 px hoch.
   Ursachen: eigene Höchstbreiten (880, 1100, 1240, 1400, 860 px), Symbol-
   kästen vor dem Titel, eigene Innenabstände je Seite.

   DIE MASSE VON « CHAUFFEURS » (page-wrap + page-header) SIND JETZT DIE
   HAUSREGEL — hier als Variablen, damit keine Seite eigene Zahlen hat:
     Inhaltsspalte  höchstens 1600 px, mittig, 32 px Rand zur Hauptfläche
     Titelbeginn    22 px innerhalb der Spalte
     Titel          24 px / 600, Untertitel 12 px
     Kopfhöhe       89 px
     Abstand        24 px vom Kopf zum Inhalt

   Zwei Bauweisen, dieselbe Geometrie:
     A  <div class="… mewa-spalte"> mit <header class="page-header"> darin
        (die Spalte trägt den Kopf, der Kopf rückt 22 px ein)
     B  <header class="… mewa-kopf-band"> über die volle Breite, darin
        <div class="… mewa-kopf-zeile"> (Spalte + Einzug in einem), danach
        <div class="… mewa-spalte"> für den Inhalt
   ⚠ `main.app-main …` (0,2,1) schlägt die Seitenregeln (0,1,0) — die Seiten
   haben eigene max-width/padding-Werte, die sonst gewännen. Titelgrösse und
   -gewicht tragen !important: die Seiten setzen h1 mit höherer Spezifität.
   Wächter: KonsoleSeitenrasterTests.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --mewa-seite-max: 1600px;
    --mewa-seite-rand: 32px;
    --mewa-kopf-einzug: 22px;
    --mewa-kopf-hoehe: 89px;
    --mewa-kopf-abstand: 24px;
}

main.app-main .mewa-spalte {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mewa-seite-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mewa-seite-rand);
    padding-right: var(--mewa-seite-rand);
}

main.app-main .page-header {
    box-sizing: border-box;
    min-height: var(--mewa-kopf-hoehe);
    padding: 18px var(--mewa-kopf-einzug);
    margin-bottom: var(--mewa-kopf-abstand);
}

main.app-main .mewa-kopf-band:has(> .mewa-kopf-zeile) {
    padding: 0;
    min-height: 0;
    margin-bottom: var(--mewa-kopf-abstand);
}

main.app-main .mewa-kopf-zeile {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mewa-seite-max);
    min-height: var(--mewa-kopf-hoehe);
    margin: 0 auto;
    padding: 18px calc(var(--mewa-seite-rand) + var(--mewa-kopf-einzug));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
}

/* Die Spalte unter einem Band-Kopf: der Abstand kommt vom Kopf (24 px), nicht
   zusätzlich aus der Spalte. */
main.app-main .mewa-kopf-band ~ .mewa-spalte {
    padding-top: 0;
    margin-top: 0;
}

/* Titel und Untertitel — überall dieselbe Schrift wie « Chauffeurs ». */
main.app-main :is(.page-header, .mewa-kopf-band) h1 {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
}

main.app-main :is(.page-header, .mewa-kopf-band) h1 + :is(p, div, span) {
    font-size: 12px !important;
    line-height: 16px !important;
    margin: 6px 0 0 !important;
}

main.app-main :is(.page-header, .mewa-kopf-band) h1 + span { display: block; }

@media (max-width: 640px) {
    :root {
        --mewa-seite-rand: 16px;
        --mewa-kopf-einzug: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 10.09.2026 (Betreiber) — TABELLENKÖPFE IN DER HAUSFARBE.

   Jede Seite gestaltete ihre Kopfzeile selbst: graue Grossbuchstaben auf
   weissem Grund, in jeder Datei mit eigenen Werten. Der Kopf der SEITE trägt
   die Hauptfarbe, der Kopf der TABELLE darunter nicht — jetzt beide.

   ⚠ Die Seiten setzen bei `th` eine eigene (graue) Schriftfarbe, oft mit
   höherer Spezifität als diese Regel. Deshalb trägt die Schrift `!important`
   — grau auf Blau wäre unlesbar. Beim Hintergrund ist das nicht nötig: den
   setzt bisher keine Seite, und wer ihn künftig setzt, meint es dann auch so.
   ═══════════════════════════════════════════════════════════════════════ */
/* ✨ 15.09.2026 — hellblau statt Verlauf: Grund, Schrift und eine feine Linie unter dem Kopf. Die Schrift
   behält !important (Seiten setzen bei `th` eigene graue Farben), jetzt in Dunkelblau. */
:where(thead) th {
    background: var(--mewa-tabelle-kopf-bg);
    color: var(--mewa-tabelle-kopf-text) !important;
    border-bottom: 1px solid var(--mewa-tabelle-kopf-linie) !important;
}

/* Icons und Sortierpfeile in der Kopfzeile gehören zur Schrift. */
:where(thead) th i,
:where(thead) th svg { color: var(--mewa-tabelle-kopf-text) !important; }

/* ✨ 15.09.2026 (Betreiber: „alle Listenköpfe hellblau") — SELBSTGEBAUTE LISTENKÖPFE.
   Viele Listen sind keine <table>, sondern Zeilen aus div/Grid (z. B. « Chauffeurs »: CHAUFFEUR · VÉHICULE ·
   STATUT …). Die zentrale th-Regel erreicht sie nicht; sie blieben grau auf fast weiss. Jede solche Kopfzeile
   trägt die Klasse mewa-listenkopf und bekommt dieselbe Farbe wie ein echter Tabellenkopf.
   ⚠ !important, weil die Seitenregeln spezifischer sind (eigene Klasse + Grund/Farbe).
   ⚠ Nur die KOPFZEILE einer Liste — nicht Karten-, Abschnitts-, Dialog- oder Seitenköpfe. */
.mewa-listenkopf {
    background: var(--mewa-tabelle-kopf-bg) !important;
    border-bottom: 1px solid var(--mewa-tabelle-kopf-linie) !important;
}
.mewa-listenkopf,
.mewa-listenkopf > *,
.mewa-listenkopf i,
.mewa-listenkopf svg { color: var(--mewa-tabelle-kopf-text) !important; }

/* Sitzt die Tabelle in einem Kasten mit runden Ecken, folgt der Kopf ihnen. */
:where(thead) tr:first-child th:first-child { border-top-left-radius: 10px; }
:where(thead) tr:first-child th:last-child { border-top-right-radius: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 15.09.2026 (Betreiber: „im Revenue soll auch die Header von Card mit Backgroundcolor, auch überall",
   Rückfrage: Hausblau wie Tableau de bord) — KARTENKÖPFE IM HAUSBLAU.
   Vorbild: die Karten des Tableau de bord (« Actions rapides », « Top chauffeurs ») — blauer Kopf, weisse
   Schrift, Symbol im Markengelb. Auf den anderen Seiten waren Kartenköpfe weiss mit dunklem Titel.
   Jeder Kartenkopf (die Titelzeile OBEN an einer Karte/einem Kasten) trägt die Klasse mewa-kartenkopf.
   Die Farben der Elemente darin folgen denselben Regeln wie im blauen Seitenkopf (.page-header):
   Titel weiss, Unterzeile gedämpft weiss, Primärknopf weiss mit Hausblau, Geist-Knopf weiss umrandet.
   Abzeichen mit eigener Klasse behalten ihre Farbe.
   ⚠ !important, weil die Seiten ihre dunklen Titel mit höherer Spezifität setzen.
   ⚠ NICHT für Seitenköpfe, Tabellen-/Listenköpfe (hellblau), Dialog-/Aufklapperköpfe, KPI-Kacheln, Hilfe-Box.
   ═══════════════════════════════════════════════════════════════════════ */
.mewa-kartenkopf {
    background: var(--mewa-kopf-bg) !important;
    color: var(--mewa-kopf-text) !important;
    border-bottom: 0 !important;
}
.mewa-kartenkopf :is(h1, h2, h3, h4, h5, h6),
.mewa-kartenkopf :is(h1, h2, h3, h4, h5, h6) span:not([class]) { color: var(--mewa-kopf-text) !important; }
.mewa-kartenkopf :is(h1, h2, h3, h4, h5, h6) > i,
.mewa-kartenkopf > i { color: #FCD116 !important; }
.mewa-kartenkopf p,
.mewa-kartenkopf small,
.mewa-kartenkopf [class*="-sub"],
.mewa-kartenkopf [class*="-meta"],
.mewa-kartenkopf [class*="-hint"],
.mewa-kartenkopf [class*="muted"] { color: var(--mewa-kopf-sub) !important; }
.mewa-kartenkopf a:not([class*="btn"]):not(.btn) { color: rgba(255, 255, 255, 0.88) !important; }
.mewa-kartenkopf a:not([class*="btn"]):not(.btn):hover { color: #FFFFFF !important; }
.mewa-kartenkopf [class*="btn-primary"],
.mewa-kartenkopf [class*="btn"].ok,
.mewa-kartenkopf [class*="btn"].primary { background: #FFFFFF !important; color: var(--mewa-kopf-rand) !important; border-color: #FFFFFF !important; }
.mewa-kartenkopf [class*="btn-primary"] i,
.mewa-kartenkopf [class*="btn"].ok i,
.mewa-kartenkopf [class*="btn"].primary i { color: var(--mewa-kopf-rand) !important; }
.mewa-kartenkopf [class*="btn"].ghost,
.mewa-kartenkopf [class*="btn-ghost"] { background: rgba(255, 255, 255, 0.12) !important; color: var(--mewa-kopf-text) !important; border-color: rgba(255, 255, 255, 0.55) !important; }

.page-header h1,
.page-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--mewa-kopf-text) !important;
}
.page-header h1 i,
.page-header h2 i { color: var(--mewa-kopf-text) !important; }
.page-header p,
.page-header small,
.page-header .subtitle,
.page-header [class*="subtitle"],
.page-header [class*="-sub"],
.page-header [class*="-desc"],
.page-header .pn-updated,
.page-header .pn-muted,
.page-header .conn-text,
.page-header .lm-sub,
/* ✨ 14.09.2026 — Lesbarkeitsprüfung über alle 45 Köpfe (jeder Text, der direkt auf dem Blau steht,
   muss hell sein) fand drei Reste: « · 6 codes / actualisé à l'instant » (.updated, #9CA3AF) auf sieben
   Seiten, « Live » (.conn-label) auf /sos — und Untertitel OHNE Klasse direkt hinter dem Titel
   (« Fonctions Plus »: dunkelblau auf Blau). Bei den klassenlosen nur Geschwister des Titels —
   Abzeichen mit eigener Klasse behalten ihre Farbe. */
.page-header .updated,
.page-header .conn-label,
.page-header :is(h1, h2) ~ span:not([class]),
.mewa-kopf-band :is(h1, h2) ~ span:not([class]) { color: var(--mewa-kopf-sub) !important; }
.page-header .pn-danger,
.page-header .danger,
.page-header .text-danger { color: #FFE0E0 !important; font-weight: 700; }
.page-header a:not([class*="btn"]):not(.btn) { color: var(--mewa-kopf-text); }
/* ✨ 07.09.2026 (Klicktest) — Primär-/Geist-Knöpfe im blauen Kopf: Türkis oder Grün auf Blau war
   schwer lesbar (« Ajouter un lieu »), ein Geist-Knopf mit dunkler Schrift wäre unsichtbar.
   → Primär: weiß mit Hausblau. Geist: weiße Schrift, weißer Rand. Sekundärknöpfe bleiben weiß/dunkel. */
.page-header [class*="btn-primary"],
.page-header [class*="btn"].ok,
.page-header [class*="btn"].primary { background: #FFFFFF !important; color: var(--mewa-kopf-rand) !important; border-color: #FFFFFF !important; }
.page-header [class*="btn-primary"] i,
.page-header [class*="btn"].ok i,
.page-header [class*="btn"].primary i { color: var(--mewa-kopf-rand) !important; }
.page-header [class*="btn"].ghost,
.page-header [class*="btn-ghost"] { background: rgba(255, 255, 255, 0.12) !important; color: var(--mewa-kopf-text) !important; border-color: rgba(255, 255, 255, 0.55) !important; }

/* ✨ 14.09.2026 — DIESELBEN FARBEN FÜR DIE KÖPFE MIT EIGENER KLASSE (.mewa-kopf-band).
   Zwölf davon waren bis heute WEISS: Titel #10222E, Untertitel grau, Primärknopf blau — auf dem
   neuen blauen Balken wäre der Titel fast unsichtbar und der Primärknopf verschwände ganz.
   Nur die FARBEN — Größe und Gewicht der Titel bestimmen die Seiten weiter selbst (19 px),
   anders als beim .page-header (24 px). !important aus demselben Grund wie oben: die Seiten
   setzen ihre dunklen Titel mit höherer Spezifität. */
.mewa-kopf-band { color: var(--mewa-kopf-text); }
.mewa-kopf-band h1,
.mewa-kopf-band h2,
.mewa-kopf-band h1 i,
.mewa-kopf-band h2 i { color: var(--mewa-kopf-text) !important; }
.mewa-kopf-band p,
.mewa-kopf-band small,
.mewa-kopf-band [class*="-sub"] { color: var(--mewa-kopf-sub) !important; }
.mewa-kopf-band [class*="btn-primary"] { background: #FFFFFF !important; color: var(--mewa-kopf-rand) !important; border-color: #FFFFFF !important; }
.mewa-kopf-band [class*="btn-primary"] i { color: var(--mewa-kopf-rand) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 07.09.2026 (Klicktest « Lieux d'aide ») — MODAL-GRUNDSTIL, EINMAL ZENTRAL.
   « Ajouter un lieu » öffnete ein NACKTES Formular: schwarzer Vollbild-Grund,
   Felder ohne Rahmen, Knöpfe ohne Farbe. Grund: die Seite benutzt die Klassen
   modal-backdrop/modal-card/… und btn-save/btn-cancel/form-group, die es nur
   in den <style>-Blöcken ANDERER Seiten gibt — und ein solcher Block gilt nur,
   solange SEINE Seite gerendert ist.
   :where() hat Spezifität 0: die acht Seiten mit eigenem Modal-Stil behalten
   ihr Aussehen, jede Seite ohne eigenen bekommt den Hausstil statt gar nichts.
   ⚠ AUSNAHME modal-backdrop/header/body/footer: die definiert BOOTSTRAP selbst
   (Spezifität 0,1,0) und schlüge jedes :where() — der Hintergrund wäre
   undurchsichtig schwarz statt halbtransparent (Klicktest 07.09.). Diese vier
   stehen deshalb als normale Klassen hier; admin.css lädt NACH bootstrap.min.css,
   die <style>-Blöcke der Seiten stehen im Body und gewinnen weiterhin.
   Wächter: KonsoleModalStilTests.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --mewa-modal-bg: #FFFFFF;
    --mewa-modal-rand: #E5E7EB;
    /* ✨ 07.09.2026 (Betreiber) — « Header von Modal muss auch Backgroundcolor haben »: derselbe
       Haus-Blauverlauf wie die Seitenköpfe, damit ein Fensterkopf nie blass-auf-weiß dasteht. */
    --mewa-modal-kopf: linear-gradient(135deg, #0072A3, #005A82);
    --mewa-modal-kopf-text: #FFFFFF;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}
:where(.modal-card) {
    background: var(--mewa-modal-bg);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.modal-header {
    padding: 16px 22px;
    border-bottom: 0.5px solid var(--mewa-modal-rand);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--mewa-modal-kopf);
    border-radius: 16px 16px 0 0;
}
.modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    /* ✨ 08.09.2026 (Betreiber: « der Modal de voir la course der Header passt nicht ») — !important
       wie bei den Seitenköpfen: viele Seiten setzen ihren Fenstertitel lokal dunkel und ihr Icon in
       einer Akzentfarbe. Auf dem blauen Kopf ist beides unlesbar, und ein <style>-Block der Seite
       steht im Body — er schlägt admin.css im Kopf, solange die Regel kein !important trägt. */
    color: var(--mewa-modal-kopf-text) !important;
}
.modal-header h3 i { color: var(--mewa-modal-kopf-text) !important; font-size: 18px; }
:where(.modal-close) {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--mewa-modal-kopf-text);
    font-size: 18px;
    padding: 4px 6px;
    border-radius: 6px;
    display: inline-flex;
}
:where(.modal-close):hover { background: rgba(255, 255, 255, .18); }

/* ✨ 07.09.2026 (Betreiber) — « Header von Modal muss auch Backgroundcolor haben »: JEDER Fensterkopf
   trägt die Hauptfarbe, auch die acht Seiten mit eigenem Modal-Stil (grau-weiß, grün, bernstein).
   Wie bei .page-header braucht das !important: die Seiten setzen Hintergrund UND dunkle Titelfarbe
   in ihrem eigenen <style>-Block, der später im Dokument steht — dunkel auf Blau wäre unlesbar.
   Wächter: KonsoleModalStilTests. */
.modal-header,
.modal-header-flat {
    background: var(--mewa-modal-kopf) !important;
    color: var(--mewa-modal-kopf-text) !important;
}
.modal-header h3,
.modal-header h4,
.modal-header h3 i,
.modal-header h4 i,
.modal-header-flat h3,
.modal-header-flat h4,
.modal-header .modal-close,
.modal-header-flat .modal-close,
.modal-header [class*="close"] { color: var(--mewa-modal-kopf-text) !important; }
/* ✨ 08.09.2026 (Betreiber: « der Badge ist zu hell man kann es nicht sehen ») — ABZEICHEN IM KOPF.
   Zwei Fehler auf einmal: die Regel darunter färbte JEDEN Text im Fensterkopf weiß, auch den in
   einem Zustandsabzeichen — weiß auf hellgrün war unlesbar (« Terminée » verschwand). Und die
   Pastellfläche des Abzeichens selbst geht auf dem blauen Kopf unter.
   Deshalb: DECKEND WEISSE Fläche, und die Schriftfarbe kommt zurück — so bleibt die Statusfarbe
   am Text erkennbar (grün erledigt, bernstein wartend, rot Störung) und die Pille sticht heraus. */
.modal-header :where([class*="badge"], [class*="pill"], [class*="tag"], [class*="chip"]),
.modal-header-flat :where([class*="badge"], [class*="pill"], [class*="tag"], [class*="chip"]) {
    /* ⚠ Die Pastellfläche des Abzeichens BLEIBT — sie trägt die Statusfarbe (grün erledigt,
       bernstein wartend, rot Störung). Nur die Schrift wird dunkel: geerbtes Weiß auf Pastell
       war unlesbar, und « color: revert » half nicht, weil die Pille die weiße Farbe vom Kopf
       ERBT statt sie selbst zu setzen. Der Schatten hebt die helle Fläche vom blauen Kopf ab. */
    color: #111827 !important;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}

.modal-header p,
.modal-header small,
.modal-header span:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([class*="tag"]):not([class*="chip"]),
.modal-header-flat p,
.modal-header-flat small { color: rgba(255, 255, 255, .86) !important; }
.modal-body { padding: 20px 22px; }
.modal-footer {
    padding: 14px 22px;
    border-top: 0.5px solid var(--mewa-modal-rand);
    background: #FAFBFC;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-radius: 0 0 16px 16px;
}

/* ✨ 08.09.2026 (Betreiber: « der Button Ferme muss auch mit backgroundcolor ») — SCHLIESSEN IM FUSS.
   « Fermer » stand weiß auf fast weißem Grund (#FAFBFC) mit hellgrauem Rand — man fand ihn nur,
   wenn man wusste, wo er ist. Jetzt trägt er eine ruhige graue Fläche: deutlich sichtbar, aber
   zurückhaltend genug, um eine Hauptaktion daneben (Speichern, Bestätigen) nicht zu überstrahlen.
   !important, weil die Seiten ihren eigenen Knopfstil im Stilblock der Seite mitbringen — der steht
   im Body und schlüge admin.css im Kopf.
   Nur SEKUNDÄRE Knöpfe: was primary/save/confirm/danger heißt, bleibt unberührt. */
.modal-footer :where(.btn-close, [class*="cancel"], [class*="annul"], [class*="secondary"]):not([class*="primary"]) {
    background: #E5E7EB !important;
    color: #111827 !important;
    border: 1px solid #D1D5DB !important;
    font-weight: 600;
}
.modal-footer :where(.btn-close, [class*="cancel"], [class*="annul"], [class*="secondary"]):not([class*="primary"]):hover {
    background: #D1D5DB !important;
}
:where(.form-group) { margin-bottom: 12px; }
:where(.form-group) label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #4B5563;
    margin-bottom: 6px;
}
:where(.form-group) input:not([type="checkbox"]):not([type="radio"]),
:where(.form-group) select,
:where(.form-group) textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--mewa-modal-rand);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}
:where(.form-group) input:focus,
:where(.form-group) select:focus,
:where(.form-group) textarea:focus {
    outline: none;
    border-color: #0072A3;
    box-shadow: 0 0 0 3px rgba(0, 114, 163, .15);
}
:where(.form-error) {
    padding: 8px 12px;
    background: #FEE2E2;
    color: #991B1B;
    border-radius: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
:where(.btn-cancel) {
    padding: 9px 16px;
    background: #fff;
    color: #6B7280;
    border: 0.5px solid var(--mewa-modal-rand);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}
:where(.btn-cancel):hover { background: #F9FAFB; }
:where(.btn-save) {
    padding: 9px 16px;
    background: #0072A3;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
:where(.btn-save):hover:not(:disabled) { filter: brightness(.92); }
:where(.btn-save):disabled, :where(.btn-cancel):disabled { opacity: .55; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 08.09.2026 (Betreiber) — FILTERREITER: EINE DARSTELLUNG FÜR DIE GANZE KONSOLE

   « À traiter / Tous sollen die gleiche Darstellung wie im Urgences SOS und es soll
   so überall sein. » Vorher hatte jede Seite ihre eigenen Reiter: mal Pillen mit
   Rand, mal Unterstrich, mal grau, mal blau — bei achtzehn Seiten achtzehn Varianten.

   Vorbild ist die SOS-Seite: eine weiße Leiste mit Innenabstand, darin gleich breite
   Reiter; der gewählte trägt die Hauptfarbe, die Zahl daneben sitzt in einer Kapsel.

   :where() für die Grundregeln (Spezifität 0) — eine Seite mit echtem Sonderfall
   kann weiterhin nachjustieren, ohne !important zu brauchen.
   Wächter: KonsoleReiterTests.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --mewa-reiter-leiste: #FFFFFF;
    --mewa-reiter-rand: #E5E7EB;
    --mewa-reiter-text: #6B7280;
    --mewa-reiter-an: #0072A3;
    --mewa-reiter-an-text: #FFFFFF;
}

/* ⚠ 08.09.2026 (Betreiber: « der Backgroundcolor muss auf die gesamte Fläche sein ») —
   KEIN Innenabstand und KEINE Lücke: der gewählte Reiter füllte vorher nur ein Feld INNERHALB
   der weißen Leiste, ringsum blieb ein weißer Rand. Jetzt ist die Leiste ein durchgehender
   Balken, und die Hauptfarbe reicht in ihrem Abschnitt bis an jede Kante.
   overflow: hidden gibt dem ersten und letzten Reiter die Rundung der Leiste. */
:where(.mewa-tabs) {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 0;
    overflow: hidden;
    background: var(--mewa-reiter-leiste);
    border: 0.5px solid var(--mewa-reiter-rand);
    border-radius: 12px;
}

:where(.mewa-tab) {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--mewa-reiter-text);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

:where(.mewa-tab:hover:not(.on)) { background: #F3F4F6; }

/* Der gewählte Reiter trägt die Hauptfarbe — hier ohne :where(), damit er die
   Grundregel sicher schlägt, auch wenn eine Seite ihre eigene Farbe setzt. */
.mewa-tab.on {
    background: var(--mewa-reiter-an);
    color: var(--mewa-reiter-an-text);
}

:where(.mewa-tab-count) {
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.10);
    font-size: 11px;
    font-weight: 700;
}

.mewa-tab.on .mewa-tab-count { background: rgba(255, 255, 255, 0.25); }

/* Schmaler Schirm: die Reiter dürfen umbrechen statt zu quetschen. */
@media (max-width: 640px) {
    :where(.mewa-tab) { flex: 1 1 44%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 14.09.2026 — KNÖPFE NEBENEINANDER HABEN IMMER ABSTAND (Betreiberregel).

   Anlass (Klicktest): In den Aktionsspalten von /recharges, /encaissements
   und /driver-deposits standen « Vérifier · Vérifié au portail · Créditer
   manuellement » als Inline-Knöpfe hintereinander. Ihr Abstand hing am
   zufälligen Leerraum im Markup — auf /encaissements war er null, die Knöpfe
   klebten aneinander. Und weil die Zelle « white-space: nowrap » trug, wurde
   die Tabelle so breit, dass die Kundenspalte links angeschnitten war.

   Eine Knopfreihe ist deshalb ein Flex-Container mit festem Abstand, der
   UMBRICHT, statt die Tabelle zu sprengen. Neue Aktionsknöpfe gehören in
   diese Klasse — dann gilt der Abstand, ohne dass jemand daran denkt.
   ═══════════════════════════════════════════════════════════════════════ */
.mewa-knopfreihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 8px;
}

.mewa-knopfreihe > button,
.mewa-knopfreihe > a {
    white-space: nowrap;
}

/* In einer Tabellenzelle: lieber zwei Zeilen Knöpfe als eine abgeschnittene
   erste Spalte. */
td .mewa-knopfreihe {
    max-width: 340px;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 14.09.2026 — SEITENHILFE « Comment ça marche ? » (Betreiberregel:
   überall eine Erklärung). Baustein: Components/Shared/SeitenHilfe.razor.
   Ein ruhiger Kasten unter dem Kopf. Er soll auffindbar sein, aber nicht
   mit der Arbeit konkurrieren.

   ✨ 14.09.2026 abends (Betreiber: „aus einem Knopf ganz rechts im Header;
   wenn man klickt, erscheint die Ansicht wie aktuell") — die zugeklappte
   Leiste unter dem Kopf ist weg. Geöffnet wird über « Aide » im Kopf
   (.mewa-hilfe-knopf); der Kasten sieht aus wie vorher aufgeklappt, mit
   einer Titelzeile und « × » zum Schliessen.
   ═══════════════════════════════════════════════════════════════════════ */
.mewa-hilfe {
    margin: 0 0 14px;
    border: 1px solid #BAE6FD;
    border-radius: 10px;
    background: #F0F9FF;
    color: #0C4A6E;
    font-size: 13px;
    line-height: 1.55;
}

.mewa-hilfe-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 14px;
    font-weight: 600;
    color: #0072A3;
}

.mewa-hilfe-kopf i { font-size: 17px; }

.mewa-hilfe-zu {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0072A3;
    cursor: pointer;
}

.mewa-hilfe-zu:hover { background: #E0F2FE; }
.mewa-hilfe-zu:focus-visible { outline: 2px solid #0072A3; outline-offset: 1px; }

/* Der Knopf im blauen Kopf: dieselbe Sprache wie die Geist-Knöpfe dort
   (weisse Schrift, heller Rand, leicht getönter Grund); geöffnet weiss mit
   Hausblau — so sieht man, dass die Hilfe gerade offen ist. */
.mewa-hilfe-knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.mewa-hilfe-knopf i { font-size: 17px; color: inherit !important; }
.mewa-hilfe-knopf:hover { background: rgba(255, 255, 255, 0.24); }
.mewa-hilfe-knopf:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.mewa-hilfe-knopf.on {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--mewa-kopf-rand);
}

/* Die rechte Gruppe des Kopfes, wenn die Seite keine eigene hat: bisherige
   Knöpfe + « Aide », immer ganz rechts, mit Abstand (Betreiberregel). */
.mewa-kopf-aktionen {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-left: auto;
}

@media (max-width: 640px) {
    .mewa-hilfe-knopf { padding: 0 11px; }
    .mewa-hilfe-knopf span { display: none; }
}

.mewa-hilfe-inhalt {
    padding: 2px 16px 14px 38px;
}

.mewa-hilfe-inhalt p { margin: 0 0 8px; }

.mewa-hilfe-inhalt dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 6px 0 0;
}

.mewa-hilfe-inhalt dt { font-weight: 700; color: #075985; }
.mewa-hilfe-inhalt dd { margin: 0; }

@media (max-width: 640px) {
    .mewa-hilfe-inhalt { padding-left: 16px; }
    .mewa-hilfe-inhalt dl { grid-template-columns: 1fr; gap: 2px; }
    .mewa-hilfe-inhalt dd { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .mewa-hilfe-knopf { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ✨ 15.09.2026 — « À VALIDER » DIREKT LINKS VON « Aide » (nur SuperAdmin).
   Baustein: Components/Shared/VormerkAnzeige.razor, eingebunden in
   SeitenHilfeKnopf.razor (AuthorizeView SuperAdminOnly).

   Betreiber: „Eine Anzeige, die nur der Super Admin sieht und die ihn
   benachrichtigt, wenn ein Admin etwas vormerkt, das ich bestätigen muss —
   oben rechts im Header." Keine Glocke: ein Knopf mit Abhak-Symbol und rotem
   Zähler in derselben Machart wie « Aide »; ein Klick öffnet die Liste.

   · .mewa-kopf-knoepfe hält « À valider » und « Aide » mit 8 px Abstand
     zusammen (Betreiberregel Knopfabstand) — unabhängig davon, wie die rechte
     Gruppe der jeweiligen Seite gebaut ist — und ist der Anker des
     Aufklappers (rechtsbündig an « Aide »). Für Admin und Observateur steht
     darin nur « Aide »: dieselbe Geometrie wie bisher.
   · Der Aufklapper liegt ABSOLUT: im Fluss verschöbe er den Kopf (Raster
     89 px) und auf /live-map die gemessene Kopfleiste.
   · Er steht IM blauen Kopf und erbt dort weisse Schrift und die Link-Farbe
     des Kopfes (.page-header a …, Spezifität 0,3,1) — deshalb setzt jede
     Textklasse ihre Farbe selbst, die Zeile mit !important.
   · Präfix vmg- (heute sonst nirgends); keine ac-*-Klassen der Glocke « À
     traiter » (Lehre 14.09. « AC rot »). Wächter: VormerkungenAnzeigeTests.
   ═══════════════════════════════════════════════════════════════════════ */
.mewa-kopf-knoepfe {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.vmg-knopf {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px 0 14px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.vmg-knopf i { font-size: 17px; color: inherit !important; }
.vmg-knopf:hover { background: rgba(255, 255, 255, 0.24); }
.vmg-knopf:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.vmg-knopf.on {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--mewa-kopf-rand);
}

/* Roter Zähler; nach einem Ladefehler grau « ? » (« null bedeutet zweierlei »). */
.vmg-zahl {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #DC2626;
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vmg-zahl.vmg-unbekannt { background: #9CA3AF; }

/* Klick daneben schliesst: unsichtbare Fläche unter dem Aufklapper. */
.vmg-schleier {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: transparent;
}

.vmg-aufklapper {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1200;
    box-sizing: border-box;
    width: min(380px, calc(100vw - 28px));
    max-height: min(560px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #FFFFFF;
    color: #1F2937;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    cursor: default;
}

.vmg-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 14px;
    border-bottom: 1px solid #F3F4F6;
}

.vmg-titel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0072A3;
    font-size: 14px;
    font-weight: 700;
}

.vmg-titel i { font-size: 17px; color: #0072A3 !important; }

.vmg-kopf-zahl {
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #FEE2E2;
    color: #B91C1C;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.vmg-luecke { flex: 1; }

.vmg-rund {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #4B5563;
    cursor: pointer;
}

.vmg-rund i { font-size: 16px; color: inherit !important; }
.vmg-rund:hover { background: #F3F4F6; }
.vmg-rund:focus-visible { outline: 2px solid #0072A3; outline-offset: 1px; }
.vmg-rund:disabled { opacity: .5; cursor: default; }

.vmg-hinweis {
    padding: 8px 14px;
    background: #F9FAFB;
    border-bottom: 1px solid #F3F4F6;
    color: #6B7280;
    font-size: 12px;
}

.vmg-meldung {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 14px;
    color: #6B7280;
}

.vmg-meldung-fehler { color: #B91C1C; }
.vmg-meldung-fehler i { color: #B91C1C !important; font-size: 16px; }

.vmg-nochmal {
    margin-left: auto;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FFFFFF;
    color: #1F2937;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.vmg-nochmal:hover { background: #F9FAFB; }

.vmg-liste {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vmg-aufklapper a.vmg-zeile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border-bottom: 1px solid #F3F4F6;
    color: #1F2937 !important;
    text-decoration: none;
}

.vmg-aufklapper a.vmg-zeile:last-child { border-bottom: 0; }
.vmg-aufklapper a.vmg-zeile:hover { background: #F0F9FF; }
.vmg-aufklapper a.vmg-zeile:focus-visible { outline: 2px solid #0072A3; outline-offset: -2px; }

.vmg-symbol {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #E0F2FE;
    color: #0072A3 !important;
    font-size: 16px;
}

.vmg-inhalt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vmg-oben {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.vmg-betreff {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-weight: 600;
}

.vmg-betrag {
    flex-shrink: 0;
    color: #111827;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vmg-betrag.vmg-abzug { color: #B91C1C; }

.vmg-art { color: #374151; font-size: 12px; }
.vmg-von { color: #6B7280; font-size: 11.5px; }

.vmg-grund {
    color: #4B5563;
    font-size: 12px;
    font-style: italic;
    overflow-wrap: anywhere;
}

.vmg-pfeil {
    flex-shrink: 0;
    align-self: center;
    color: #9CA3AF !important;
    font-size: 16px;
}

.vmg-mehr {
    padding: 8px 14px;
    border-top: 1px solid #F3F4F6;
    background: #F9FAFB;
    color: #6B7280;
    font-size: 12px;
}

/* Telefon: nur Symbol + Zahl; der Aufklapper hängt am Bildschirm statt am Knopf,
   sonst ragte er bei 375 px links hinaus. */
@media (max-width: 640px) {
    .vmg-knopf { padding: 0 9px; }
    .vmg-knopf-text { display: none; }
    .vmg-aufklapper {
        position: fixed;
        top: 64px;
        left: 14px;
        right: 14px;
        width: auto;
        max-height: calc(100vh - 88px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vmg-knopf { transition: none; }
}