/* ==========================================================================
   mud.css — gemeinsame Oberflaeche fuer alle MUD-Seiten (Laravel-Neubau)

   ENTWURF zur Abnahme (Musterseite tools/vorschau/mud_muster.html).
   Entscheidungen: wiki/Aufgaben/Neubau-Plan.md, Abschnitt 4, „Design“.

   Grundlage:  UTEK utek.css (Palette, Formensprache) und MTV mtv_common.css
               (Filter- und Eingabe-Modale, gespeicherte Ansichten, Spaltenauswahl).

   Regeln:
   - Alles, was ueberall gleich ist, steht HIER. Ein eigenes CSS fuer eine
     einzelne Seite gibt es nur mit Stefans Freigabe und nur, wenn zwingend.
   - Alle Klassen tragen den Praefix mud-.
   - Jede Farbe steht als Variable in :root — im Rest der Datei kein
     fester Farbwert (Ausnahme: reines Weiss #fff und Schatten-rgba).
   - Schriftgroessen immer in px, nie in rem. Grundgroesse 12 px.
   - Kein Tailwind, kein Dunkelmodus.
   ========================================================================== */

:root{
    /* Palette (1:1 aus UTEK) */
    --mud-blau:          #1E4D80;
    --mud-blau-dunkel:   #143654;
    --mud-blau-hell:     #E8EEF5;
    --mud-akzent:        #D17B2A;
    --mud-stahl:         #5C6B7A;
    --mud-schrift:       #222B36;
    --mud-gedimmt:       #6E7884;
    --mud-flaeche:       #F7F8FA;
    --mud-karte:         #FFFFFF;
    --mud-linie:         #D6DCE3;
    --mud-zeile-alt:     #F2F5F9;
    --mud-gruen:         #2E7D32;
    --mud-gelb:          #A6741A;
    --mud-rot:           #B12C2C;
    --mud-violett:       #5B4B8A;
    --mud-markiert:      #FFF8E1;

    /* Toene, die in utek.css fest eingetragen waren — jetzt zentral */
    --mud-blau-rand:        #BFD0E3;   /* Rahmen auf hellblauem Grund */
    --mud-kopf-info:        #C9D6E5;   /* Nebentext in der blauen Kopfzeile */
    --mud-schalter-aus:     #C3CAD3;   /* Bahn des Ja/Nein-Schalters, aus */
    --mud-verlauf-gruen:    #3A9740;   /* obere Verlaufsfarbe der Schaltflaechen */
    --mud-verlauf-rot:      #C8453F;
    --mud-verlauf-stahl:    #6F7F8E;
    --mud-verlauf-blau:     #2A6099;
    --mud-verlauf-violett:  #6D5DA3;
    --mud-verlauf-akzent:   #DD913F;
    --mud-verlauf-gelb:     #C08C28;
    --mud-chip-neutral-hg:  #EEF0F4;
    --mud-chip-ok-hg:       #E8F5E9;
    --mud-chip-ok-rand:     #C8E6C9;
    --mud-chip-warn-hg:     #FFF7E6;
    --mud-chip-warn-rand:   #F1D7A4;
    --mud-chip-stop-hg:     #FCE8E6;
    --mud-chip-stop-rand:   #F5C2BD;
    --mud-abdunkeln:        rgba(20, 54, 84, .45);   /* Modal-Hintergrund = blau-dunkel */

    /* Schrift */
    --mud-font:          'Inter', "Segoe UI", Helvetica, Arial, sans-serif;
    --mud-text:          12px;
    --mud-text-klein:    11px;
    --mud-text-titel:    15px;
    --mud-text-modal:    14px;

    /* Masse */
    --mud-radius:        6px;
    --mud-radius-btn:    3px;
    --mud-radius-klein:  4px;
    --mud-kopf-hoehe:    56px;
    --mud-fuss-hoehe:    52px;
    --mud-feld-hoehe:    32px;   /* Felder so hoch wie Schaltflaechen */
}

/* ==========================================================================
   1 · Schale: fester Kopf, scrollender Inhalt, fester Fuss
   ========================================================================== */

/* Die Schale ist 100vh hoch. Rand der Seite auf null und das Fenster
   festgestellt, sonst entsteht ein zweiter Rollbalken (aus UTEK). */
html:has(.mud-schale),
body:has(.mud-schale){
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.mud-schale{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--mud-flaeche);
    color: var(--mud-schrift);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    line-height: 1.5;
}
.mud-schale *,
.mud-modal-hg *{ box-sizing: border-box; }
/* hidden gilt immer, auch gegen display aus den Bausteinen (z. B. .mud-btn). */
.mud-schale [hidden],
.mud-modal-hg [hidden]{ display: none !important; }

/* Kopfzeile: ALLE Schaltflaechen der Seite (Stefan 2026-10-21). Links der
   Titel und direkt daneben die Suche, in der Mitte Speichern bzw. Anlegen,
   rechts von innen nach aussen Filter, Export, Tour, ganz aussen die Hilfe.
   Schmal wird nur umgebrochen, nie umsortiert — deshalb nirgends order:. */
.mud-kopf{
    flex: 0 0 auto;
    min-height: var(--mud-kopf-hoehe);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--mud-blau) 0%, var(--mud-blau-dunkel) 100%);
    color: #fff;
}
.mud-kopf-links,
.mud-kopf-rechts{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mud-kopf-rechts{ justify-content: flex-end; }
.mud-kopf-mitte{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mud-kopf h1{
    font-size: var(--mud-text-titel);
    font-weight: 700;
    margin: 0 8px 0 0;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.mud-kopf .mud-kopf-info{
    font-size: var(--mud-text-klein);
    color: var(--mud-kopf-info);
    white-space: nowrap;
}

.mud-inhalt{
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}

.mud-fuss{
    flex: 0 0 auto;
    min-height: var(--mud-fuss-hoehe);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--mud-flaeche);
    border-top: 2px solid var(--mud-blau);
    box-shadow: 0 -2px 6px rgba(0,0,0,.08);
}

/* ==========================================================================
   2 · Karten, Abschnitte, Reiter
   ========================================================================== */

.mud-karte{
    background: var(--mud-karte);
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.mud-karte-kopf{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -14px -16px 12px;
    padding: 10px 16px;
    background: var(--mud-blau-hell);
    border-bottom: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius) var(--mud-radius) 0 0;
    font-weight: 600;
    color: var(--mud-blau-dunkel);
}
.mud-karte-kopf .mud-abstand-links{ margin-left: auto; }
/* Schmale Karte fuer kurze Formulare (z. B. Anmeldung), so breit wie ein Modal. */
.mud-karte-schmal{
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.mud-hinweis{
    font-size: var(--mud-text-klein);
    color: var(--mud-gedimmt);
}

/* Reiter (aus UTEK). Die Leiste traegt die durchgehende Linie, der gewaehlte
   Reiter ist ausgefuellt. Am PC bricht die Leiste in mehrere Reihen um, auf
   dem Handy (unter 760 px) wird sie zur Auswahlliste .mud-reiter-auswahl. */
.mud-reiter{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 3px;
    border-bottom: 2px solid var(--mud-blau);
    margin: 0 0 14px 0;
}
.mud-reiter-knopf{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--mud-linie);
    border-bottom: none;
    background: var(--mud-flaeche);
    color: var(--mud-gedimmt);
    font: inherit;
    font-size: var(--mud-text);
    padding: 6px 14px 7px 14px;
    border-radius: var(--mud-radius) var(--mud-radius) 0 0;
    cursor: pointer;
    margin-bottom: -2px;
}
.mud-reiter-knopf:hover{
    color: var(--mud-blau);
    background: var(--mud-blau-hell);
    border-color: var(--mud-blau-hell);
}
.mud-reiter-knopf.mud-aktiv{
    color: #fff;
    background: var(--mud-blau);
    border-color: var(--mud-blau);
    padding: 8px 16px 9px 16px;
    font-weight: 700;
}
.mud-reiter-knopf.mud-aktiv:hover{
    background: var(--mud-blau-dunkel);
    border-color: var(--mud-blau-dunkel);
}
.mud-reiter-zahl{
    background: var(--mud-blau-hell);
    color: var(--mud-blau-dunkel);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: var(--mud-text-klein);
    font-weight: 700;
}
.mud-reiter-knopf.mud-aktiv .mud-reiter-zahl{
    background: rgba(255,255,255,.22);
    color: #fff;
}
.mud-reiter-inhalt{ display: none; }
.mud-reiter-inhalt.mud-aktiv{ display: block; }

/* Handy: Auswahlliste statt Reiterleiste. Reine Navigation, deshalb ohne
   Select2 (Ausnahme wie in MTV). */
.mud-reiter-auswahl{ display: none; }

/* ==========================================================================
   3 · Tabellen mit festem Kopf
   ========================================================================== */

/* Liegt die Tabelle direkt im Inhalt, scrollt nur ihr Rahmen: der Kopf
   klebt, der waagerechte Rollbalken sitzt ueber der Fusszeile (aus UTEK). */
.mud-inhalt:has(> .mud-tabelle-rahmen){
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.mud-inhalt:has(> .mud-tabelle-rahmen) > .mud-tabelle-rahmen{
    flex: 1 1 auto;
    min-height: 0;
}

.mud-tabelle-rahmen{
    overflow: auto;
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
    background: var(--mud-karte);
}
table.mud-tabelle{
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mud-text);
}
table.mud-tabelle thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-blau);
    color: #fff;
    text-align: left;
    font-weight: 600;
    padding: 9px 10px;
    white-space: nowrap;
}
table.mud-tabelle td{
    padding: 7px 10px;
    border-bottom: 1px solid var(--mud-linie);
    vertical-align: top;
}
table.mud-tabelle tbody tr:nth-child(even) td{ background: var(--mud-zeile-alt); }
table.mud-tabelle tbody tr:hover td{ background: var(--mud-blau-hell); }
table.mud-tabelle tbody tr.mud-zeile-aus td{ opacity: .55; }
.mud-num{ text-align: right; font-variant-numeric: tabular-nums; }
table.mud-tabelle thead th.mud-num{ text-align: right; }

/* Bearbeiten ganz vorne, Loeschen ganz hinten — je eine schmale Spalte */
table.mud-tabelle th.mud-sp-aktion,
table.mud-tabelle td.mud-sp-aktion{
    width: 1%;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}
.mud-leer{
    padding: 24px;
    text-align: center;
    color: var(--mud-gedimmt);
}

/* Mehrere Symbolknoepfe in einer Aktionsspalte nebeneinander (Rechnungsuebersicht: Stift und Auge) */
.mud-knopfreihe{ display: inline-flex; gap: 6px; align-items: center; }

/* Sortierbarer Spaltenkopf: der ganze Kopf ist der Knopf (Reiter Rechnungen, 2026-10-23) */
.mud-sortier{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.mud-sortier i{ opacity: .75; }
.mud-sortier:hover i,
.mud-sortier:focus-visible i{ opacity: 1; }

/* Summenzeile unter der Tabelle; klebt am unteren Rand des Rahmens */
table.mud-tabelle tfoot td{
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 8px 10px;
    background: var(--mud-blau-hell);
    border-top: 2px solid var(--mud-blau);
    font-weight: 700;
    white-space: nowrap;
}
.mud-mkarte-summe{
    background: var(--mud-blau-hell);
    border-color: var(--mud-blau-rand);
}

/* ==========================================================================
   4 · Schaltflaechen

   Kategorie nach der HANDLUNG waehlen. Jede Schaltflaeche traegt mud-btn
   plus genau EINE Kategorie — eine neutrale ohne Kategorie gibt es nicht.
     mud-btn-speichern   Speichern, Anlegen, Bestaetigen
     mud-btn-loeschen    Loeschen, Entfernen, Gefahr
     mud-btn-nav         Zurueck, Abbrechen, Navigation
     mud-btn-bearbeiten  Bearbeiten, Ansehen, Information
     mud-btn-filter      Filter, Ansicht, Spalten
     mud-btn-werkzeug    Export, Druck, Werkzeuge
     mud-btn-tour        Gefuehrte Tour
   Alle 32 px hoch, unter 760 px Breite 40 px (Touch-Ziele).
   mud-btn-klein und mud-btn-symbol aendern nur die Polsterung.
   ========================================================================== */

.mud-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--mud-radius-btn);
    border: 1px solid transparent;
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 4px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.15);
}
.mud-btn i{ font-size: inherit; }
.mud-btn:hover{
    filter: brightness(1.05);
    box-shadow: 0 3px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15);
}
.mud-btn:focus-visible{ outline: 2px solid var(--mud-blau); outline-offset: 1px; }
.mud-kopf .mud-btn:focus-visible{ outline-color: #fff; }
.mud-btn[disabled], .mud-btn.mud-btn-aus{
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}
.mud-btn-klein{ padding: 0 10px; }
.mud-btn-symbol{ padding: 0 9px; }

.mud-btn-speichern { background: linear-gradient(to bottom, var(--mud-verlauf-gruen),   var(--mud-gruen));   border-color: var(--mud-gruen); }
.mud-btn-loeschen  { background: linear-gradient(to bottom, var(--mud-verlauf-rot),     var(--mud-rot));     border-color: var(--mud-rot); }
.mud-btn-nav       { background: linear-gradient(to bottom, var(--mud-verlauf-stahl),   var(--mud-stahl));   border-color: var(--mud-stahl); }
.mud-btn-bearbeiten{ background: linear-gradient(to bottom, var(--mud-verlauf-blau),    var(--mud-blau));    border-color: var(--mud-blau); }
.mud-btn-filter    { background: linear-gradient(to bottom, var(--mud-verlauf-violett), var(--mud-violett)); border-color: var(--mud-violett); }
.mud-btn-werkzeug  { background: linear-gradient(to bottom, var(--mud-verlauf-akzent),  var(--mud-akzent));  border-color: var(--mud-akzent); }
.mud-btn-tour      { background: linear-gradient(to bottom, var(--mud-verlauf-gelb),    var(--mud-gelb));    border-color: var(--mud-gelb); }

/* In der blauen Kopfzeile bekommen Bearbeiten und Navigation einen hellen
   Rand, sonst verschwinden sie auf dem gleichfarbigen Grund. */
.mud-kopf .mud-btn-bearbeiten,
.mud-kopf .mud-btn-nav{ border-color: rgba(255,255,255,.45); }

/* Zahl in einer Schaltflaeche, z. B. aktive Filter (wie in MTV) */
.mud-btn-zahl{
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #fff;
    color: var(--mud-violett);
    font-size: var(--mud-text-klein);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* ==========================================================================
   5 · Formulare
   ========================================================================== */

.mud-feld{ margin-bottom: 12px; }
.mud-feld > label{
    display: block;
    margin-bottom: 4px;
    font-size: var(--mud-text);
    font-weight: 600;
    color: var(--mud-stahl);
}
.mud-pflicht::after{
    content: " *";
    color: var(--mud-rot);
}
.mud-eingabe,
.mud-schale input[type="text"],
.mud-schale input[type="password"],
.mud-schale input[type="email"],
.mud-schale input[type="tel"],
.mud-schale input[type="number"],
.mud-schale input[type="search"],
.mud-schale input[type="date"],
.mud-schale input[type="time"],
.mud-schale textarea,
.mud-schale select,
.mud-modal-hg input[type="text"],
.mud-modal-hg input[type="password"],
.mud-modal-hg input[type="email"],
.mud-modal-hg input[type="tel"],
.mud-modal-hg input[type="number"],
.mud-modal-hg input[type="date"],
.mud-modal-hg input[type="time"],
.mud-modal-hg textarea,
.mud-modal-hg select{
    width: 100%;
    height: var(--mud-feld-hoehe);
    padding: 0 9px;
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
    background: var(--mud-karte);
    color: var(--mud-schrift);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
}
.mud-schale textarea,
.mud-modal-hg textarea{
    height: auto;
    min-height: 72px;
    padding: 7px 9px;
    line-height: 1.5;
}
.mud-eingabe:focus,
.mud-schale input:focus,
.mud-schale textarea:focus,
.mud-schale select:focus,
.mud-modal-hg input:focus,
.mud-modal-hg textarea:focus,
.mud-modal-hg select:focus{
    outline: none;
    border-color: var(--mud-blau);
    box-shadow: 0 0 0 2px var(--mud-blau-hell);
}
/* Nur zum Ansehen (z. B. die ID) — erkennbar anders, damit niemand tippt */
.mud-feld input[readonly],
.mud-feld textarea[readonly]{
    background: var(--mud-flaeche);
    color: var(--mud-gedimmt);
    cursor: default;
}
.mud-feld-fehler input,
.mud-feld-fehler textarea,
.mud-feld-fehler select,
.mud-feld-fehler .select2-selection{ border-color: var(--mud-rot) !important; }
.mud-feld-meldung{
    margin-top: 3px;
    font-size: var(--mud-text-klein);
    color: var(--mud-rot);
}
/* Nur waagerechter Abstand — senkrecht sorgt schon .mud-feld fuer 12 px,
   sonst stehen umgebrochene Felder doppelt so weit auseinander. */
.mud-zeile{
    display: flex;
    gap: 0 14px;
    flex-wrap: wrap;
}
.mud-zeile > *{ flex: 1 1 220px; min-width: 0; }

/* Ja/Nein-Schalter — NUR fuer echtes Ja/Nein. Darunter liegt ein normales
   Haekchen, durchsichtig darueber gelegt: bleibt mit der Tastatur bedienbar.
   Bahn und Text tragen ihren Kasten selbst (siehe UTEK, !important-Falle). */
.mud-schalter,
.mud-feld > label.mud-schalter{
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    line-height: 24px;
    cursor: pointer;
    user-select: none;
    font-weight: 400;
}
.mud-schalter input[type="checkbox"]{
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.mud-schalter-bahn{
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--mud-schalter-aus);
    border: 1px solid var(--mud-linie);
    transition: background .18s, border-color .18s;
}
.mud-schalter-knopf{
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
    transition: transform .18s;
}
.mud-schalter input:checked + .mud-schalter-bahn{
    background: var(--mud-gruen);
    border-color: var(--mud-gruen);
}
.mud-schalter input:checked + .mud-schalter-bahn .mud-schalter-knopf{ transform: translateX(20px); }
.mud-schalter input:focus-visible + .mud-schalter-bahn{ outline: 2px solid var(--mud-blau); outline-offset: 2px; }
.mud-schalter input[disabled] + .mud-schalter-bahn{ opacity: .45; cursor: not-allowed; }
/* Haekchen vor einem Text, fuer Listen zum Ankreuzen (Gruppen eines Benutzers,
   Stefan 2026-10-21, App 9). Fuer ein einzelnes Ja/Nein bleibt der Schalter. */
.mud-haken,
.mud-feld > label.mud-haken{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: var(--mud-text);
    font-weight: 400;
    color: var(--mud-schrift);
}
.mud-haken input[type="checkbox"]{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mud-blau);
    cursor: pointer;
}
.mud-schalter-text{
    display: inline-block;
    margin-left: 10px;
    font-size: var(--mud-text);
    color: var(--mud-schrift);
}

/* Auswahlgruppe — wenn beide (oder alle drei) Moeglichkeiten einen Namen haben */
.mud-wahl{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    min-height: var(--mud-feld-hoehe);
}
.mud-wahl-opt,
.mud-feld > label.mud-wahl-opt{
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    line-height: 20px;
    cursor: pointer;
    user-select: none;
    font-weight: 400;
}
.mud-wahl-opt input[type="radio"]{
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.mud-wahl-punkt{
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--mud-stahl);
    border-radius: 50%;
    background: var(--mud-karte);
    transition: border-color .12s;
}
.mud-wahl-punkt::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--mud-blau);
    transform: scale(0);
    transition: transform .12s;
}
.mud-wahl-opt input:checked + .mud-wahl-punkt{ border-color: var(--mud-blau); }
.mud-wahl-opt input:checked + .mud-wahl-punkt::after{ transform: scale(1); }
.mud-wahl-opt input:focus-visible + .mud-wahl-punkt{ outline: 2px solid var(--mud-blau); outline-offset: 2px; }
.mud-wahl-text{
    margin-left: 8px;
    font-size: var(--mud-text);
    color: var(--mud-schrift);
}

/* ==========================================================================
   6 · Status-Chips
   Welcher Belegstatus welche Farbe bekommt, wird beim Modul festgelegt.
   ========================================================================== */

.mud-chip{
    display: inline-block;
    padding: 1px 9px;
    border-radius: 10px;
    border: 1px solid;
    font-size: var(--mud-text-klein);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.mud-chip-neutral{ background: var(--mud-chip-neutral-hg); color: var(--mud-gedimmt); border-color: var(--mud-linie); }
.mud-chip-info   { background: var(--mud-blau-hell);       color: var(--mud-blau);    border-color: var(--mud-blau-rand); }
.mud-chip-ok     { background: var(--mud-chip-ok-hg);      color: var(--mud-gruen);   border-color: var(--mud-chip-ok-rand); }
.mud-chip-warn   { background: var(--mud-chip-warn-hg);    color: var(--mud-gelb);    border-color: var(--mud-chip-warn-rand); }
.mud-chip-stop   { background: var(--mud-chip-stop-hg);    color: var(--mud-rot);     border-color: var(--mud-chip-stop-rand); }

/* ==========================================================================
   7 · Modale (aus MTV)

   Eingabe-Modal: blauer Kopf.  Filter-Modal (.mud-modal-filter): violetter
   Kopf. Filter, Ansicht und Spalten sind violett, Dateneingabe blau — nie
   den violetten Kopf fuer etwas anderes als Filter/Ansicht/Spalten.
   Im Fuss: Hauptaktion ZUERST (links), Abbrechen ZULETZT (rechts).
   Oeffnen/Schliessen ueber die Klasse .mud-offen an .mud-modal-hg.
   Das Modal setzt Schrift und Farbe selbst — es liegt ggf. ausserhalb der
   Schale und erbt dann nichts.
   ========================================================================== */

.mud-modal-hg{
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--mud-abdunkeln);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    line-height: 1.5;
    color: var(--mud-schrift);
}
.mud-modal-hg.mud-offen{ display: flex; }
.mud-modal{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    background: var(--mud-karte);
    border-radius: var(--mud-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.mud-modal-breit{ max-width: 640px; }
.mud-modal-kopf{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--mud-blau);
    color: #fff;
}
.mud-modal-kopf h2{
    margin: 0;
    font-size: var(--mud-text-modal);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Tour-Knopf im Modal-Kopf: rechts, direkt vor dem Kreuz. */
.mud-modal-kopf .mud-btn-tour{ margin-left: auto; }
.mud-modal-kopf .mud-btn-tour + .mud-modal-schliessen{ margin-left: 0; }
.mud-modal-schliessen{
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.mud-modal-inhalt{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}
.mud-modal-fuss{
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--mud-linie);
    background: var(--mud-flaeche);
}

/* Filter-Modal. Violetter Kopf auch fuer Ansicht und Spaltenauswahl
   (.mud-modal-violett), nie fuer Dateneingabe. */
.mud-modal-filter{ max-width: 620px; }
.mud-modal-filter .mud-modal-kopf,
.mud-modal-violett .mud-modal-kopf{ background: var(--mud-violett); }

/* Gespeicherte Ansichten im Filter-Modal (MTV mtv-flt-save-box) */
.mud-ansicht-box{
    margin-top: 12px;
    padding: 10px;
    background: var(--mud-blau-hell);
    border: 1px solid var(--mud-blau-rand);
    border-radius: var(--mud-radius);
}
.mud-ansicht-box > label{
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--mud-blau-dunkel);
}
.mud-ansicht-zeile{
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.mud-ansicht-zeile > .mud-ansicht-wahl{ flex: 0 0 30%; min-width: 150px; }
.mud-ansicht-zeile > input[type="text"]{ flex: 1 1 120px; width: auto; }
.mud-ansicht-zeile > .mud-schalter{ flex: 0 0 auto; }

/* Spaltenauswahl: zwei Eimer, Ziehen zwischen „ausgeblendet“ und „angezeigt“ */
.mud-spalten-hinweis{
    margin-bottom: 8px;
    font-size: var(--mud-text-klein);
    color: var(--mud-gedimmt);
}
.mud-spalten-raster{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.mud-spalten-eimer{
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
    background: var(--mud-karte);
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
}
.mud-spalten-eimer h4{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 6px 10px;
    background: var(--mud-violett);
    color: #fff;
    font-size: var(--mud-text);
    font-weight: 700;
}
.mud-spalten-eimer.mud-spalten-aus h4{ background: var(--mud-stahl); }
.mud-spalten-liste{
    flex: 1;
    min-height: 160px;
    max-height: 320px;
    margin: 0;
    padding: 6px;
    overflow: auto;
    list-style: none;
}
.mud-spalten-liste.mud-ziel{
    background: var(--mud-blau-hell);
    outline: 2px dashed var(--mud-violett);
    outline-offset: -4px;
}
.mud-spalten-eintrag{
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-bottom: 4px;
    padding: 6px 8px;
    background: var(--mud-karte);
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius-klein);
    font-weight: 600;
    cursor: grab;
    user-select: none;
}
.mud-spalten-eintrag:hover{ border-color: var(--mud-violett); }
.mud-spalten-eintrag.mud-zieht{ opacity: .4; cursor: grabbing; }
.mud-spalten-eintrag i{ color: var(--mud-gedimmt); }

/* Schnellfilter links neben der Liste (wie MTV mtv-facet-*, Stefan 2026-10-23):
   Werte mit Trefferzahl, ein Klick filtert. Die Liste rechts scrollt allein,
   wie eine Tabelle direkt im Inhalt. Unter 760 px ausgeblendet; der Knopf
   „Schnellfilter“ (.mud-nur-handy) blendet sie als Ueberlagerung ein. */
.mud-inhalt:has(> .mud-facetten-layout){
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.mud-facetten-layout{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 12px;
}
.mud-facetten{
    flex: 0 0 240px;
    min-width: 0;
    overflow-y: auto;
    padding: 8px;
    background: var(--mud-karte);
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
}
.mud-facetten-haupt{
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.mud-facetten-haupt > .mud-tabelle-rahmen{ flex: 1 1 auto; min-height: 0; }
.mud-facette{ margin-bottom: 10px; }
.mud-facette-kopf{
    padding: 5px 8px;
    border-radius: var(--mud-radius-klein);
    background: var(--mud-blau);
    color: #fff;
    font-weight: 700;
}
.mud-facette-liste{ display: flex; flex-direction: column; }
.mud-facette-wert{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 30px;
    padding: 5px 4px;
    border: none;
    border-bottom: 1px solid var(--mud-linie);
    background: none;
    color: var(--mud-schrift);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.mud-facette-wert:hover{ background: var(--mud-blau-hell); }
.mud-facette-wert.mud-aktiv{
    background: var(--mud-blau-hell);
    border-radius: var(--mud-radius-klein);
    color: var(--mud-blau-dunkel);
    box-shadow: inset 3px 0 0 var(--mud-blau);
}
.mud-facette-wert.mud-facette-fest{ cursor: default; color: var(--mud-gedimmt); }
.mud-facette-wert.mud-facette-fest:hover{ background: none; }
.mud-facette-name{ flex: 1; min-width: 0; word-break: break-word; }
.mud-facette-zahl{
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--mud-chip-neutral-hg);
    font-size: var(--mud-text-klein);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mud-schale input[type="text"].mud-facette-suche{ height: 28px; margin: 6px 0 4px; }
.mud-facette-mehr{
    padding: 5px 4px;
    border: none;
    background: none;
    color: var(--mud-blau);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.mud-facette-mehr:hover{ text-decoration: underline; }
.mud-facette-leer{ padding: 6px 4px; color: var(--mud-gedimmt); }
/* Gesetzte Filter als Ketten ueber der Liste, jede mit Kreuz zum Entfernen. */
.mud-ketten{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.mud-kette{ display: inline-flex; align-items: center; gap: 4px; }
.mud-kette-weg{
    padding: 0 2px;
    border: none;
    background: none;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.mud-facetten-kopf{
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--mud-blau-dunkel);
}
.mud-facetten-zu{
    min-width: 40px;
    min-height: 40px;
    border: none;
    background: none;
    color: var(--mud-blau-dunkel);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
/* Knoepfe, die es nur auf dem Handy braucht (z. B. „Schnellfilter“). */
.mud-nur-handy{ display: none !important; }

/* ==========================================================================
   8 · Blaettern — immer auf dem Server, immer alle drei Teile
   ========================================================================== */

.mud-paging-groesse{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: var(--mud-text);
    font-weight: 700;
}
.mud-paging-groesse select.mud-seitengroesse{
    width: auto;
    height: 32px;
    padding: 0 6px;
    border-radius: var(--mud-radius-klein);
    font-weight: 600;
}
.mud-paging-btns{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mud-paging-info{
    font-size: var(--mud-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mud-paging-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--mud-blau);
    border-radius: var(--mud-radius-klein);
    background: var(--mud-blau);
    color: #fff;
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    font-weight: 700;
    cursor: pointer;
}
.mud-paging-btn:hover:not(:disabled){
    background: var(--mud-blau-dunkel);
    border-color: var(--mud-blau-dunkel);
}
.mud-paging-btn:disabled{ opacity: .4; cursor: not-allowed; }
/* Seitenzahlen sind Anzeige: ohne Rahmen, nur die aktuelle als Oval */
.mud-paging-btn.mud-paging-nr{
    min-width: 32px;
    padding: 0 10px;
    border-color: transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--mud-blau);
}
.mud-paging-btn.mud-paging-nr:hover:not(:disabled){
    background: var(--mud-blau-hell);
    border-color: var(--mud-blau-hell);
    color: var(--mud-blau-dunkel);
}
.mud-paging-btn.mud-paging-nr.mud-aktiv{
    background: var(--mud-blau);
    border-color: var(--mud-blau);
    color: #fff;
}

/* ==========================================================================
   8b · Handy — Tabelle am Rechner, Karten am Telefon
   Jede Liste wird ZWEIMAL ausgegeben, aus denselben Daten.
   ========================================================================== */

.mud-karten{ display: none; }
.mud-mkarte{
    margin-bottom: 10px;
    padding: 12px;
    background: var(--mud-karte);
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
}
.mud-mkarte-kopf{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.mud-mkarte-name{
    font-weight: 700;
    color: var(--mud-blau-dunkel);
    word-break: break-word;
}
.mud-mkarte-zeile{
    margin-top: 3px;
    word-break: break-word;
}
.mud-mkarte-feld{
    display: inline-block;
    min-width: 92px;
    margin-right: 8px;   /* laengere Feldnamen stossen sonst an den Wert */
    color: var(--mud-gedimmt);
}
.mud-mkarte-aktionen{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
/* Doppelter Abstand vor Loeschen (Laravel-Standards 6) */
.mud-mkarte-aktionen .mud-btn-loeschen{ margin-left: 8px; }
.mud-mkarte-aus{ opacity: .6; }

@media (max-width: 760px){
    .mud-tabelle-rahmen{ display: none !important; }
    .mud-inhalt:has(> .mud-tabelle-rahmen){ display: block; overflow-y: auto; }
    .mud-karten{ display: block; }
    .mud-kopf{ padding: 8px 12px; }
    .mud-kopf h1{ font-size: 14px; }
    .mud-kopf-links,
    .mud-kopf-mitte,
    .mud-kopf-rechts{ flex: 1 1 100%; justify-content: flex-start; }
    .mud-inhalt{ padding: 12px; }
    .mud-fuss{ justify-content: center; gap: 6px; padding: 8px 12px; }
    .mud-zeile > *{ flex: 1 1 100%; }
    .mud-reiter{ display: none; }
    .mud-reiter-auswahl{ display: block; margin-bottom: 14px; }
    .mud-spalten-raster{ grid-template-columns: 1fr; }
    .mud-modal{ max-width: 100%; }
    .mud-suche-rahmen.mud-suche-kopf{ flex: 1 1 100%; }
    /* Touch-Ziele mindestens 40 px (Laravel-Standards 6, Stefan 2026-10-21);
       am PC bleiben Knoepfe und Felder 32 px. */
    :root{ --mud-feld-hoehe: 40px; }
    .mud-btn,
    .mud-paging-btn{ height: 40px; }
    .mud-paging-btn.mud-paging-nr{ min-width: 40px; }
    .mud-paging-groesse select.mud-seitengroesse{ height: 40px; }
    .mud-suche-weg{ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; right: 0; }
    .select2-results__option{ min-height: 40px; display: flex; align-items: center; }
    .mud-modal-schliessen{ min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    /* Ja/Nein-Schalter: das unsichtbare Haekchen ueber die volle Hoehe (App 8, Schalter in Karten). */
    .mud-schalter{ min-height: 40px; }
    .mud-schalter input[type="checkbox"]{ height: 100%; }
    .mud-haken,
    .mud-feld > label.mud-haken{ min-height: 40px; }
    .mud-haken input[type="checkbox"]{ width: 22px; height: 22px; }
    /* Schnellfilter: Leiste weg, ueber den Knopf als Ueberlagerung; Liste wie sonst als Karten. */
    .mud-nur-handy{ display: inline-flex !important; }
    .mud-facetten-kopf.mud-nur-handy{ display: flex !important; }
    .mud-inhalt:has(> .mud-facetten-layout){ display: block; overflow-y: auto; }
    .mud-facetten-layout{ display: block; }
    .mud-facetten{ display: none; }
    .mud-facetten.mud-offen{
        display: block;
        position: fixed;
        inset: 12px;
        z-index: 8000;
        box-shadow: 0 12px 40px rgba(0,0,0,.28);
    }
    .mud-facette-wert,
    .mud-facette-mehr{ min-height: 40px; }
    .mud-schale input[type="text"].mud-facette-suche{ height: 40px; }
    .mud-kette-weg{ min-width: 40px; min-height: 40px; }
}

/* ==========================================================================
   9 · Suche in der Kopfzeile
   Startet selbst ab 3 Zeichen, 400 ms nach dem letzten Tastendruck, sucht
   ueber den ganzen Bestand und setzt auf Seite 1 zurueck.
   ========================================================================== */

.mud-suche-rahmen{ position: relative; flex: 0 1 420px; max-width: 100%; }
.mud-suche-rahmen.mud-suche-kopf{ flex: 0 0 210px; }
.mud-suche-symbol{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mud-stahl);
    font-size: var(--mud-text);
    pointer-events: none;
}
.mud-schale input[type="text"].mud-suche{
    padding: 0 30px;
}
.mud-kopf .mud-suche-kopf input[type="text"].mud-suche{
    border-color: rgba(255,255,255,.35);
}
.mud-kopf .mud-suche-kopf input[type="text"].mud-suche:focus{
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
.mud-suche-weg{
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px;
    border: 0;
    background: none;
    color: var(--mud-gedimmt);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

/* ==========================================================================
   10 · Fremdbibliotheken einpassen
   ========================================================================== */

/* Select2 — Feldhoehe und Farben */
.select2-container{ font-family: var(--mud-font); font-size: var(--mud-text); max-width: 100%; }
.select2-container--default .select2-selection--single{
    height: var(--mud-feld-hoehe);
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
}
/* Text und Pfeil aus der Feldhoehe, damit sie auch bei 40 px (Handy) mittig sitzen. */
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: calc(var(--mud-feld-hoehe) - 2px);
    padding-left: 9px;
    color: var(--mud-schrift);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height: calc(var(--mud-feld-hoehe) - 2px); }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection{
    border-color: var(--mud-blau);
    box-shadow: 0 0 0 2px var(--mud-blau-hell);
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background: var(--mud-blau);
}
.select2-dropdown{ border-color: var(--mud-linie); }
.select2-container--open{ z-index: 9500; }   /* ueber den Modalen */

/* SweetAlert2 — Klasse mud-swal an jeder Meldung (customClass.popup) */
.swal2-popup.mud-swal{
    border-radius: var(--mud-radius);
    font-family: var(--mud-font);
    font-size: 13px;
}
.swal2-popup.mud-swal .swal2-title{ color: var(--mud-blau-dunkel); font-size: 17px; }
.swal2-popup.mud-swal .swal2-html-container{ color: var(--mud-schrift); font-size: 13px; }
.swal2-popup.mud-swal .swal2-actions{ gap: 8px; }
.swal2-popup.mud-swal .swal2-actions .mud-btn{ margin: 0; }

/* driver.js — Tourfenster */
.driver-popover.mud-tour{
    border-radius: var(--mud-radius);
    font-family: var(--mud-font);
    color: var(--mud-schrift);
}
.driver-popover.mud-tour .driver-popover-title{ color: var(--mud-blau-dunkel); font-size: 14px; }
.driver-popover.mud-tour .driver-popover-description{ font-size: var(--mud-text); }

/* ==========================================================================
   11 · Kleinigkeiten
   ========================================================================== */

.mud-verstecken{ display: none !important; }
/* fieldset nur zum gemeinsamen Sperren von Feldern (ohne Recht zum Aendern), ohne eigene Optik. */
.mud-ohne-rahmen{ min-width: 0; margin: 0; padding: 0; border: 0; }
.mud-trenner{ height: 1px; margin: 14px 0; background: var(--mud-linie); }
.mud-abstand-links{ margin-left: auto; }

/* ==========================================================================
   12 · Hauptmenue (appl_sys_menu, public/js/mud-menue.js) — aus MTV
   Leiste oben, schwebende Tafeln fuer Untermenues, Mega-Tafel mit Spalten,
   darunter die Reiter; jede Seite in ihrem eigenen iframe. Nur Farben aus
   der Palette oben (Stefan: Farbschema gemeinsam abstimmen).
   ========================================================================== */

html:has(.mud-menue),
body:has(.mud-menue){
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
.mud-menue{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--mud-flaeche);
    color: var(--mud-schrift);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    line-height: 1.4;
}
.mud-menue *{ box-sizing: border-box; }
.mud-menue-ic{ width: 1.1em; text-align: center; flex: 0 0 auto; }
.mud-menue-ic2{ margin-left: -3px; }
.mud-menue-pfeil{ font-size: .72em; opacity: .75; }

.mud-menue-leiste{
    flex: 0 0 auto;
    position: relative;
    z-index: 50;
    display: flex;
    align-items: stretch;
    min-height: 46px;
    padding: 0 8px;
    background: linear-gradient(135deg, var(--mud-blau) 0%, var(--mud-blau-dunkel) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.mud-menue-burger{
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.mud-menue-nav{ display: flex; flex: 1; min-width: 0; }
/* Abmelden rechts in der Leiste (App 11), sieht aus wie ein Hauptpunkt. */
.mud-menue-abmelden{ display: flex; align-items: center; flex: 0 0 auto; margin: 0 0 0 8px; }
/* Ein <button> erbt Schrift und Farbe nicht von selbst (die Hauptpunkte sind <div>). */
.mud-menue-abmelden button{ color: inherit; font: inherit; }
.mud-menue-oben{ display: flex; flex: 1; min-width: 0; gap: 3px; overflow: hidden; align-items: center; }

/* Hauptpunkte: erhabene, abgerundete Knoepfe auf der Leiste (wie MTV). */
.mud-menue-haupt{
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(0,0,0,.22);
    border-radius: var(--mud-radius);
    background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.02) 50%, rgba(0,0,0,.14) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.28);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.mud-menue-haupt:hover{ background-color: rgba(255,255,255,.08); }
.mud-menue-haupt:focus-visible{ outline: 2px solid #fff; outline-offset: 1px; }
.mud-menue-haupt.mud-offen,
.mud-menue-haupt:active{
    border-color: var(--mud-akzent);
    background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.04) 60%, rgba(255,255,255,.08) 100%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.30);
}
.mud-menue-haupt.mud-menue-gesperrt{ color: var(--mud-kopf-info); cursor: not-allowed; box-shadow: none; }
.mud-menue-haupt.mud-menue-gesperrt .mud-menue-ic{ opacity: .55; }
.mud-menue-mehr .mud-menue-ic{ color: var(--mud-akzent); }

/* Schwebende Tafeln (Untermenues). Lage setzt mud-menue.js. */
.mud-menue-tafel{
    position: fixed;
    z-index: 2000;
    width: max-content;
    min-width: 190px;
    max-width: min(92vw, 460px);
    max-height: calc(100vh - 12px);
    overflow-y: auto;
    padding: 6px;
    background: var(--mud-karte);
    color: var(--mud-schrift);
    border: 1px solid var(--mud-blau-rand);
    border-radius: var(--mud-radius);
    box-shadow: 0 14px 36px rgba(20,54,84,.30), 0 2px 6px rgba(0,0,0,.14);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
}
.mud-menue-zeile,
.mud-menue-mpunkt{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--mud-radius-klein);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.mud-menue-zeile .mud-menue-text,
.mud-menue-mpunkt .mud-menue-text{ flex: 1; }
.mud-menue-zeile:not(.mud-menue-gesperrt):hover,
.mud-menue-mpunkt:not(.mud-menue-gesperrt):hover,
.mud-menue-zeile:focus-visible,
.mud-menue-mpunkt:focus-visible{ background: var(--mud-blau-hell); color: var(--mud-blau-dunkel); outline: none; }
.mud-menue-zeile .mud-menue-ic,
.mud-menue-mpunkt .mud-menue-ic{ color: var(--mud-blau); }
.mud-menue-zeile.mud-menue-gesperrt,
.mud-menue-mpunkt.mud-menue-gesperrt{ color: var(--mud-gedimmt); cursor: not-allowed; }
.mud-menue-zeile.mud-menue-gesperrt .mud-menue-ic,
.mud-menue-mpunkt.mud-menue-gesperrt .mud-menue-ic{ color: var(--mud-gedimmt); opacity: .6; }

/* Mega-Tafel: Kinder eines Hauptpunkts als Spalten mit Ueberschrift. */
.mud-menue-tafel.mud-menue-mega{ max-width: min(1100px, 94vw); padding: 10px; }
.mud-menue-mraster{ display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-start; }
.mud-menue-mspalte{ flex: 0 0 auto; min-width: 130px; padding: 4px; }
.mud-menue-mkopf{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 6px 8px;
    border-bottom: 2px solid var(--mud-akzent);
    color: var(--mud-blau-dunkel);
    font-weight: 700;
    white-space: nowrap;
}
.mud-menue-mpunktzeichen{ width: 8px; height: 8px; border-radius: 2px; background: var(--mud-akzent); flex: 0 0 auto; }

/* „neu“-Markierung (is_neu) */
.mud-menue-marke{
    flex: 0 0 auto;
    margin-left: 2px;
    padding: 2px 5px;
    border-radius: var(--mud-radius-klein);
    background: var(--mud-rot);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.mud-menue-zeile.mud-menue-neu{ box-shadow: inset 3px 0 0 var(--mud-rot); }
.mud-menue-mpunkt.mud-menue-neu{ outline: 1.5px solid var(--mud-rot); outline-offset: -1px; }

/* Reiter der offenen Seiten */
.mud-menue-reiter{
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px 0;
    overflow-x: auto;
    background: var(--mud-blau-hell);
    border-bottom: 2px solid var(--mud-blau);
}
.mud-menue-reiter:empty{ display: none; }
.mud-menue-tab{
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--mud-blau-rand);
    border-bottom: 0;
    border-radius: var(--mud-radius) var(--mud-radius) 0 0;
    background: var(--mud-karte);
    color: var(--mud-stahl);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.mud-menue-tab-fest{ padding-right: 12px; }
.mud-menue-tab:hover{ color: var(--mud-blau); }
.mud-menue-tab:focus-visible{ outline: 2px solid var(--mud-blau); outline-offset: -2px; }
.mud-menue-tab.mud-aktiv{ background: var(--mud-blau); border-color: var(--mud-blau); color: #fff; }
.mud-menue-tab-zu{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .7;
    cursor: pointer;
}
.mud-menue-tab-zu:hover{ opacity: 1; background: rgba(0,0,0,.10); }

.mud-menue-ansicht{ flex: 1 1 auto; position: relative; overflow: hidden; background: var(--mud-flaeche); }
.mud-menue-rahmen{ position: absolute; inset: 0; display: none; width: 100%; height: 100%; border: 0; background: var(--mud-karte); }
.mud-menue-rahmen.mud-aktiv{ display: block; }
.mud-menue-leer{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: var(--mud-gedimmt);
    text-align: center;
}
.mud-menue-leer > i{ font-size: 44px; opacity: .45; }

/* News-Fenster: bereinigtes HTML aus tbl_sys_messagetexte */
.mud-news-text{ font-size: 13px; line-height: 1.55; }
.mud-news-text img{ max-width: 100%; height: auto; }
.mud-news-text p{ margin: 0 0 .7em; }

/* KI-Hilfe: runder Knopf unten rechts, Chatfenster darueber */
.mud-hilfe-knopf{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--mud-verlauf-akzent), var(--mud-akzent));
    color: #fff;
    font-size: 21px;
    box-shadow: 0 4px 14px rgba(20,54,84,.35);
    cursor: pointer;
}
.mud-hilfe-knopf:hover{ filter: brightness(1.06); }
.mud-hilfe-knopf:focus-visible{ outline: 2px solid var(--mud-blau); outline-offset: 2px; }
.mud-hilfe{
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 8001;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 110px);
    overflow: hidden;
    background: var(--mud-karte);
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    color: var(--mud-schrift);
}
.mud-hilfe[hidden]{ display: none; }
.mud-hilfe *{ box-sizing: border-box; }
.mud-hilfe-kopf{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--mud-blau);
    color: #fff;
    font-weight: 700;
}
.mud-hilfe-verlauf{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 12px;
    background: var(--mud-flaeche);
}
.mud-hilfe-blase{
    max-width: 88%;
    padding: 8px 12px;
    border-radius: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.mud-hilfe-frage{ align-self: flex-end; background: var(--mud-blau); color: #fff; border-bottom-right-radius: 3px; }
.mud-hilfe-antwort{ align-self: flex-start; background: var(--mud-karte); border: 1px solid var(--mud-linie); border-bottom-left-radius: 3px; }
.mud-hilfe-wartet{ color: var(--mud-gedimmt); font-style: italic; }
.mud-hilfe-fehler{ align-self: flex-start; background: var(--mud-chip-stop-hg); border: 1px solid var(--mud-chip-stop-rand); color: var(--mud-rot); }
.mud-hilfe-hinweis{ flex: 0 0 auto; padding: 4px 12px; font-size: var(--mud-text-klein); color: var(--mud-gedimmt); border-top: 1px solid var(--mud-linie); }
.mud-hilfe-eingabe{ flex: 0 0 auto; display: flex; gap: 6px; align-items: flex-end; padding: 8px; border-top: 1px solid var(--mud-linie); }
.mud-hilfe-eingabe textarea{
    flex: 1;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
    font-family: var(--mud-font);
    font-size: var(--mud-text);
    color: var(--mud-schrift);
    resize: vertical;
}
.mud-hilfe-eingabe textarea:focus{ outline: none; border-color: var(--mud-blau); box-shadow: 0 0 0 2px var(--mud-blau-hell); }

@media (max-width: 760px){
    .mud-menue-burger{ display: flex; }
    .mud-menue-oben{
        position: absolute;
        top: 46px;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: max-content;
        min-width: 220px;
        max-width: min(88vw, 440px);
        max-height: calc(100vh - 46px);
        overflow: auto;
        padding: 4px;
        background: var(--mud-blau-dunkel);
        box-shadow: 0 14px 30px rgba(0,0,0,.35);
    }
    .mud-menue.mud-menue-offen .mud-menue-oben{ display: flex; }
    .mud-menue-haupt{ height: auto; min-height: 40px; margin: 2px 0; padding: 8px 14px; }
    .mud-menue-haupt .mud-menue-text{ flex: 1; }
    .mud-menue-haupt .mud-menue-pfeil{ transform: rotate(-90deg); }
    .mud-menue-zeile, .mud-menue-mpunkt{ min-height: 40px; }
    .mud-menue-tafel.mud-menue-mega{ max-width: min(88vw, 440px); }
    .mud-menue-mraster{ flex-direction: column; }
    .mud-menue-mspalte{ min-width: 0; }
    .mud-menue-tab{ min-height: 40px; }
    .mud-menue-tab-zu{ width: 40px; height: 40px; }
    .mud-hilfe{ right: 0; left: 0; bottom: 0; width: 100%; max-width: none; height: 70vh; border-radius: var(--mud-radius) var(--mud-radius) 0 0; }
    .mud-hilfe-knopf{ right: 16px; bottom: 16px; }
}

/* ==========================================================================
   13 · Menue-Konfiguration (appl_sa_sys_menu, public/js/mud-menue-pflege.js)
   Links der Baum, rechts die Angaben; unter 760 px untereinander.
   ========================================================================== */

.mud-kopf select.mud-mpflege-wahl{ width: auto; min-width: 140px; max-width: 220px; }
/* Kreuz im hellblauen Kartenkopf: dunkel statt weiss wie im Modal-Kopf. */
.mud-karte-kopf .mud-modal-schliessen{ color: var(--mud-blau-dunkel); }
.mud-mpflege{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.mud-mpflege .mud-karte{ margin-bottom: 0; }
.mud-mbaum-liste{ display: flex; flex-direction: column; gap: 2px; }
.mud-mbaum-zeile{
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: var(--mud-radius-klein);
}
.mud-mbaum-zeile:hover{ background: var(--mud-zeile-alt); }
.mud-mbaum-zeile.mud-gewaehlt{ background: var(--mud-blau-hell); border-color: var(--mud-blau-rand); }
.mud-mbaum-zeile.mud-mbaum-aus .mud-mbaum-text{ opacity: .55; }
.mud-mbaum-tiefe-1{ margin-left: 22px; }
.mud-mbaum-tiefe-2{ margin-left: 44px; }
.mud-mbaum-tiefe-3{ margin-left: 66px; }
.mud-mbaum-tiefe-4{ margin-left: 88px; }
.mud-mbaum-tiefe-5{ margin-left: 110px; }
.mud-mbaum-tiefe-6{ margin-left: 132px; }
.mud-mbaum-klappe,
.mud-mbaum-klappe-leer{ flex: 0 0 22px; width: 22px; }
.mud-mbaum-klappe{ height: 22px; padding: 0; border: 0; background: none; color: var(--mud-stahl); cursor: pointer; }
.mud-mbaum-griff{ flex: 0 0 auto; padding: 4px 6px; color: var(--mud-gedimmt); cursor: grab; touch-action: none; }
.mud-mbaum-text{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; }
.mud-mbaum-text > i{ color: var(--mud-blau); width: 1.1em; text-align: center; }
.mud-mbaum-label{ font-weight: 600; }
.mud-mbaum-aktionen{ flex: 0 0 auto; display: flex; gap: 4px; }
/* Loeschen mit doppeltem Abstand zu den uebrigen Aktionen (Laravel-Standards 6). */
.mud-mbaum-aktionen .mud-mbaum-loeschen{ margin-left: 8px; }
.mud-mbaum-zieht{ opacity: .45; }
.mud-mbaum-ziehen{ user-select: none; }
.mud-mbaum-davor{ box-shadow: inset 0 2px 0 var(--mud-akzent); }
.mud-mbaum-dahinter{ box-shadow: inset 0 -2px 0 var(--mud-akzent); }
.mud-mbaum-hinein{ background: var(--mud-markiert); border-color: var(--mud-akzent); }
.mud-mbaum-ende{
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px dashed var(--mud-akzent);
    border-radius: var(--mud-radius-klein);
    color: var(--mud-gedimmt);
}
.mud-mbaum-ziehen .mud-mbaum-ende{ display: flex; }
.mud-mpflege-symbol{ display: flex; align-items: center; gap: 8px; }
.mud-mpflege-vorschau{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mud-feld-hoehe);
    height: var(--mud-feld-hoehe);
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius);
    color: var(--mud-blau);
    font-size: 15px;
}
.mud-mpflege-symbole{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
    margin-top: 10px;
}
.mud-mpflege-zelle{
    height: 42px;
    border: 1px solid var(--mud-linie);
    border-radius: var(--mud-radius-klein);
    background: var(--mud-karte);
    color: var(--mud-schrift);
    font-size: 16px;
    cursor: pointer;
}
.mud-mpflege-zelle:hover,
.mud-mpflege-zelle:focus-visible{ border-color: var(--mud-blau); background: var(--mud-blau-hell); color: var(--mud-blau); outline: none; }

@media (max-width: 760px){
    .mud-mpflege{ grid-template-columns: 1fr; }
    .mud-mbaum-zeile{ min-height: 44px; }
    .mud-mbaum-tiefe-1{ margin-left: 12px; }
    .mud-mbaum-tiefe-2{ margin-left: 24px; }
    .mud-mbaum-tiefe-3{ margin-left: 36px; }
    .mud-mbaum-tiefe-4{ margin-left: 48px; }
    .mud-mbaum-tiefe-5{ margin-left: 60px; }
    .mud-mbaum-tiefe-6{ margin-left: 72px; }
    /* Touch-Ziele mindestens 40 px (Laravel-Standards 6). */
    .mud-mbaum-griff{ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; }
    .mud-mbaum-klappe,
    .mud-mbaum-klappe-leer{ flex-basis: 40px; width: 40px; height: 40px; }
    /* Schmal: die Knoepfe rechts brechen in eine zweite Reihe, statt die Seite zu verbreitern. */
    .mud-mbaum-zeile{ flex-wrap: wrap; row-gap: 4px; }
    .mud-mbaum-text{ flex: 1 1 140px; }
    .mud-mbaum-aktionen{ margin-left: auto; }
    .mud-mbaum-text .mud-chip{ overflow-wrap: anywhere; }
    .mud-kopf select.mud-mpflege-wahl{ max-width: 100%; flex: 1 1 auto; }
}