/* ============================================================ */
/* mtv_common.css                                               */
/* Gemeinsame Styles für alle MeinTopVerwalter BG-Apps          */
/* Library: mtv_styles                                          */
/* ============================================================ */
/* Laden in Blank-App:                                          */
/* $var_css = sc_url_library('mtv_styles', 'mtv_common.css');   */
/* $var_html .= '<link rel="stylesheet" href="'.$var_css.'">';  */
/* ============================================================ */

/* === Reset & Base === */
* { box-sizing: border-box; }
input, select, textarea { color: #493a30; }

/* === Schriftart: Inter (screen-optimiert) === */
/* @font-face wird per <link> aus _lib/fonts/inter/inter.css geladen   */
/* Muss in jeder App als erster <link> eingebunden werden:             */
/* <link rel="stylesheet" href="../_lib/fonts/inter/inter.css">        */

/* === Farbvariablen (CSS Custom Properties) === */
:root {
    --mtv-lindgruen:       #85bb22;
    --mtv-schwarzerde:     #493a30;
    --mtv-mohnrot:         #d40829;
    --mtv-kieselgrau:      #a19e92;
    --mtv-warmblue:        #0074be;
    --mtv-narzissengelb:   #ffd600;
    --mtv-schwgruen:       #0a651f;
    --mtv-lilienweiss:     #f2f0f0;
    --mtv-pistaziengruen:  #e3e1a2;
    --mtv-lotusbluete:     #f0bfb9;
    --mtv-kirschbluete:    #c4bbdd;
    --mtv-fuchsie:         #e94177;
    --mtv-violett:         #5d4d8a;
    --mtv-text:            #493a30;
    --mtv-text-light:      #493a30;
    --mtv-text-muted:      #493a30;
    --mtv-border:          #e8e6e3;
    --mtv-bg-light:        #f7f6f4;
    --mtv-font:            "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* Einheitliche Hoehe aller einzeiligen Eingabe- und Auswahlfelder inkl. Select2
       (App-Standards 7). Apps setzen keine eigene Feldhoehe, sondern nutzen diese Variable. */
    --mtv-feld-h:          34px;
}
/* Handy: Fingergroesse (Touch-Ziel mindestens 44 px, CLAUDE.md Mobile First) */
@media (max-width: 760px) { :root { --mtv-feld-h: 44px; } }

/* === Typografie === */
.mtv-wrap {
    font-family: var(--mtv-font);
    color: var(--mtv-text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

/* === Font Awesome: lokal laden per <link> in jeder App === */
/* sc_url_library('prj', 'mtv_styles', 'vendor/fontawesome/css/all.min.css') */

/* === Buttons: Basis === */
.mtv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--mtv-font);
}
.mtv-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.mtv-btn:active { transform: scale(0.97); }
.mtv-btn i { font-size: inherit; }

/* === Buttons: Kat 1 – Speichern / Hinzufügen / Bestätigen === */
.mtv-btn-save {
    background: linear-gradient(to bottom, #0b7a24, var(--mtv-schwgruen));
    color: var(--mtv-lilienweiss);
    border: 1px solid var(--mtv-schwgruen);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
.mtv-btn-save:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* === Buttons: Kat 2 – Löschen / Entfernen / Gefahr === */
.mtv-btn-danger {
    background: linear-gradient(to bottom, #e8203f, var(--mtv-mohnrot));
    color: var(--mtv-lilienweiss);
    border: 1px solid var(--mtv-mohnrot);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
.mtv-btn-danger:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* === Buttons: Kat 3 – Navigation / Zurück / Abbrechen === */
.mtv-btn-nav {
    background: linear-gradient(to bottom, #1a8ad4, var(--mtv-warmblue));
    color: var(--mtv-lilienweiss);
    border: 1px solid var(--mtv-warmblue);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
.mtv-btn-nav:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* === Buttons: Kat 4 – Bearbeiten / Info === */
.mtv-btn-edit {
    background: linear-gradient(to bottom, #1a8ad4, var(--mtv-warmblue));
    color: var(--mtv-lilienweiss);
    border: 1px solid var(--mtv-warmblue);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
.mtv-btn-edit:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* === Buttons: Tour === */
.mtv-btn-tour {
    background: linear-gradient(to bottom, #ffe44d, var(--mtv-narzissengelb));
    color: var(--mtv-schwarzerde);
    border: 1px solid var(--mtv-narzissengelb);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4);
}
.mtv-btn-tour:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* === Buttons: Freigabe / Workflow starten (Stefan 04.09.2026: "etwas Rotes, sanfter als Loeschen") === */
.mtv-btn-wf {
    background: linear-gradient(to bottom, #ee5f8c, var(--mtv-fuchsie)); /* PALETTE-OK: Verlaufs-Aufhellung von Fuchsie */
    color: var(--mtv-lilienweiss);
    border: 1px solid var(--mtv-fuchsie);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
.mtv-btn-wf:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* === Buttons: Kat 5 – Filter / Ansicht / Sortierung === */
.mtv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--mtv-font);
    background: linear-gradient(to bottom, #cfc8e4, var(--mtv-kirschbluete));
    color: var(--mtv-schwarzerde);
    border: 1px solid var(--mtv-kirschbluete);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.3);
}
.mtv-chip:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.3);
}
.mtv-chip-active {
    background: linear-gradient(to bottom, #7a66bb, var(--mtv-violett));
    color: var(--mtv-lilienweiss);
    border-color: var(--mtv-violett);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* === Radio-Options-Liste (Brand-Komponente) ===
   Umrandete Box mit Radio-Optionen, immer linksbuendig. Eigene Regel fuer
   .mtv-radio, damit allgemeine <label>-Regeln einer App die Optionen nicht
   zentrieren. */
.mtv-radio-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid #a19e92;
    border-radius: 4px;
    background: #fff;
    text-align: left;
}
.mtv-radio-list .mtv-radio {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-family: var(--mtv-font);
    font-size: 12px;
    font-weight: 600;
    color: #493a30;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    text-align: left;
}
.mtv-radio-list .mtv-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #0a651f;
    flex-shrink: 0;
    margin: 0;
}

/* === Bloecke (Spalten mit gruener Titelzeile) ===
   .mtv-blocks = nebeneinander, umbrechend; .mtv-block = eine Spalte;
   .mtv-block-head = kompakte Titelzeile mit gruenem Akzent links. */
.mtv-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: start;
}
.mtv-block {
    min-width: 0;
}
.mtv-block-head {
    background: #f2f0f0;
    color: #493a30;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    border-left: 3px solid #85bb22;
    margin: 0 0 8px;
    font-family: var(--mtv-font);
}
/* Variante mit Rahmen: <div class="mtv-blocks mtv-blocks-rahmen"> - jeder Block mit duennem
   Kieselgrau-Rahmen, alle Bloecke einer Reihe gleich hoch (Stefan 29.09.2026) */
.mtv-blocks-rahmen {
    align-items: stretch;
}
.mtv-blocks-rahmen > .mtv-block {
    background: #fff;
    border: 1px solid #a19e92;
    border-radius: 6px;
    padding: 10px;
}

/* Persoenlicher Standardwert (App-Standards 7d): Stern am Feld-Label, far = keiner, fas = gesetzt */
.mtv-default-star { cursor: pointer; color: var(--mtv-narzissengelb); font-size: 14px; margin-left: 6px; vertical-align: middle; transition: transform 0.15s; }
.mtv-default-star:hover { transform: scale(1.3); }

/* Filter-Button im Header (oeffnet Filter-Modal) */
/* Filter + Ansicht/Vorschau-Gruppe = Violett. mtv-btn-view fuer ALLE Vorschau-Buttons (semantisch). */
/* mtv-btn-refresh: Aktualisieren-Knopf (fa-arrows-rotate) im Kopf neben Neu, gleiches Violett (Stefan 01.10.2026) */
.mtv-btn-filter,
.mtv-btn-refresh,
.mtv-btn-view {
    background: var(--mtv-violett);
    color: #fff;
    border: 1px solid var(--mtv-schwarzerde);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
/* Nur Symbol, aber gleich hoch wie der Nachbarknopf mit Text: auf Zeilenhoehe strecken, Symbol mittig */
.mtv-btn-refresh { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; }
.mtv-btn-filter:hover,
.mtv-btn-refresh:hover,
.mtv-btn-view:hover {
    background: #473a6b;
    color: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ===== Filter-Modal (gemeinsame Komponente - NUR Filter; Edit-Modale haben eigenes CSS) ===== */
.mtv-flt-modal-bg { position: fixed; inset: 0; background: rgba(73,58,48,0.55); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; font-family: var(--mtv-font); color: var(--mtv-schwarzerde); font-size: 13px; }
.mtv-flt-modal-bg.show { display: flex; }
.mtv-flt-modal { background: #fff; border-radius: 8px; width: 100%; max-width: 620px; max-height: 90vh; overflow: auto; border: 2px solid var(--mtv-schwarzerde); }
.mtv-flt-modal-head { background: var(--mtv-violett); color: #fff; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.mtv-flt-modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.mtv-flt-modal-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; }
.mtv-flt-modal-body { padding: 14px; }
.mtv-flt-modal-foot { padding: 10px 14px; border-top: 1px solid var(--mtv-kieselgrau); display: flex; justify-content: flex-end; gap: 6px; background: var(--mtv-lilienweiss); }
/* Footer-Buttons (Anwenden + Zuruecksetzen) im violetten Filter-Theme - gilt fuer ALLE Filter-Modals */
.mtv-flt-modal-foot .mtv-btn { background: linear-gradient(to bottom, #7a66bb, var(--mtv-violett)); color: var(--mtv-lilienweiss); border-color: var(--mtv-violett); }
.mtv-flt-modal-foot .mtv-btn:hover { filter: brightness(1.08); }

/* === Spaltenauswahl: Drag-&-Drop zwischen zwei Eimern (Ausgeblendet/Angezeigt) - gemeinsame Komponente fuer ALLE Apps === */
.mtv-cols-hint { font-size: 11px; color: var(--mtv-kieselgrau); font-style: italic; margin-bottom: 8px; }
.mtv-cols-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mtv-cols-col { border: 1px solid var(--mtv-kieselgrau); border-radius: 6px; background: #fff; overflow: hidden; display: flex; flex-direction: column; min-height: 200px; }
.mtv-cols-col h4 { margin: 0; padding: 6px 10px; background: var(--mtv-violett); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; display: flex; justify-content: space-between; align-items: center; }
.mtv-cols-col h4 .mtv-cols-count { background: #fff; color: var(--mtv-violett); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; min-width: 22px; text-align: center; }
.mtv-cols-col.mtv-cols-hidden h4 { background: var(--mtv-kieselgrau); color: #fff; }
.mtv-cols-col.mtv-cols-hidden h4 .mtv-cols-count { color: var(--mtv-schwarzerde); }
.mtv-cols-list { list-style: none; margin: 0; padding: 6px; flex: 1; overflow: auto; min-height: 160px; max-height: 320px; }
.mtv-cols-list.mtv-drag-over { background: var(--mtv-pistaziengruen); outline: 2px dashed var(--mtv-kirschbluete); outline-offset: -4px; }
.mtv-cols-list .mtv-cols-empty { color: var(--mtv-kieselgrau); font-style: italic; font-weight: 600; text-align: center; padding: 10px; }
.mtv-cols-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; background: #fff; border: 1px solid var(--mtv-kirschbluete); border-radius: 4px; cursor: grab; font-weight: 600; font-size: 12px; user-select: none; transition: background 0.12s, border-color 0.12s; min-height: 34px; }
.mtv-cols-item:hover { background: var(--mtv-lilienweiss); }
.mtv-cols-item.mtv-dragging { opacity: 0.4; cursor: grabbing; }
.mtv-cols-item.mtv-drop-before { box-shadow: inset 0 3px 0 var(--mtv-violett); }
.mtv-cols-item.mtv-drop-after { box-shadow: inset 0 -3px 0 var(--mtv-violett); }
.mtv-cols-item .mtv-cols-handle { color: var(--mtv-kieselgrau); font-size: 14px; flex-shrink: 0; }
.mtv-cols-item .mtv-cols-name { flex: 1; }
@media (max-width: 760px) { .mtv-cols-grid { grid-template-columns: 1fr; } .mtv-cols-col { min-height: 180px; } }
@media (max-width: 760px) { .mtv-flt-modal { max-width: 100%; } }
.mtv-flt-modal-body label, .mtv-flt-modal-body input, .mtv-flt-modal-body select { font-family: var(--mtv-font); color: var(--mtv-schwarzerde); }
.mtv-flt-modal-body input[type="date"] { font-size: 13px; height: var(--mtv-feld-h); padding: 0 8px; border: 1px solid var(--mtv-kieselgrau); border-radius: 6px; box-sizing: border-box; width: 100%; }

/* ============================================================ */
/* Dateneingabe-Modal (mtv-modal) - LINDGRUENER Kopf (Brand:     */
/* Lindgruen = Header-BG, Schwarzerde-Text). Fuer Formular-      */
/* Eingaben. NICHT fuer Filter/Ansicht/Spaltenwahl -> dafuer ist */
/* mtv-flt-modal (violett). Buttons behalten Brand-Farben:       */
/* mtv-btn-save (gruen) VOR mtv-btn-nav (blau).                  */
/* ============================================================ */
.mtv-modal-bg { position: fixed; inset: 0; background: rgba(73,58,48,0.55); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; font-family: var(--mtv-font); color: var(--mtv-schwarzerde); font-size: 13px; }
.mtv-modal-bg.show { display: flex; }
.mtv-modal { background: #fff; border-radius: 8px; width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; border: 2px solid var(--mtv-schwarzerde); }
.mtv-modal-head { background: var(--mtv-lindgruen); color: var(--mtv-schwarzerde); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.mtv-modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--mtv-schwarzerde); display: flex; align-items: center; gap: 8px; }
.mtv-modal-close { background: none; border: none; color: var(--mtv-schwarzerde); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; }
.mtv-modal-body { padding: 14px; }
/* :not(.mtv-switch) ist Pflicht: der Switch IST ein <label>. Ohne die Ausnahme
   ueberstimmt diese Regel (0,1,1) das .mtv-switch{display:inline-flex} (0,1,0),
   das Flex-Layout bricht zusammen und die per position:absolute;opacity:0
   versteckte Checkbox liegt sichtbar ueber der Beschriftung. Betraf JEDEN
   Switch in JEDEM Modal. (Stefan 2026-07-17) */
.mtv-modal-body label:not(.mtv-switch) { display: block; font-weight: 600; margin-bottom: 4px; }
.mtv-modal-body input[type="text"], .mtv-modal-body input[type="number"], .mtv-modal-body input[type="date"], .mtv-modal-body input[type="time"], .mtv-modal-body input[type="email"], .mtv-modal-body input[type="tel"], .mtv-modal-body select, .mtv-modal-body textarea { font-family: var(--mtv-font); color: var(--mtv-schwarzerde); font-size: 13px; height: var(--mtv-feld-h); padding: 0 10px; border: 1px solid var(--mtv-kieselgrau); border-radius: 6px; box-sizing: border-box; width: 100%; }
.mtv-modal-body textarea { height: auto; padding: 8px 10px; }
.mtv-modal-row { margin-bottom: 12px; }
.mtv-modal-foot { padding: 10px 14px; border-top: 1px solid var(--mtv-kieselgrau); display: flex; justify-content: flex-end; gap: 6px; background: var(--mtv-lilienweiss); }
@media (max-width: 760px) { .mtv-modal { max-width: 100%; } }
/* Modifier (opt-in, additiv 2026-08-17): Kopf und Fuss bleiben stehen, gescrollt wird nur
   der Rumpf. Ohne den Modifier scrollt wie bisher das ganze Modal - bestehende Modals
   aendern ihr Verhalten also NICHT. Wird der Modifier gesetzt, muss er direkt am
   .mtv-modal stehen; Kopf/Rumpf/Fuss sind dessen direkte Kinder. */
.mtv-modal.mtv-modal-flex { display: flex; flex-direction: column; overflow: hidden; }
.mtv-modal.mtv-modal-flex > .mtv-modal-head { flex: 0 0 auto; }
.mtv-modal.mtv-modal-flex > .mtv-modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.mtv-modal.mtv-modal-flex > .mtv-modal-foot { flex: 0 0 auto; }

/* Filter-Speicher-Box im Filter-Modal (Saved-Views Sektion) */
.mtv-flt-save-box {
    background: var(--mtv-lilienweiss);
    border: 1px solid var(--mtv-schwarzerde);
    border-radius: 6px;
    padding: 10px;
    margin-top: 10px;
}
.mtv-flt-save-box > label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--mtv-schwarzerde);
}
.mtv-flt-save-box-row {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.mtv-flt-save-box-row > select { flex: 0 0 25%; min-width: 140px; }
/* Select2 (Pflicht fuer ALLE Dropdowns) ersetzt das <select> – gleiche Breite in der Speicher-Zeile */
.mtv-flt-save-box-row .select2-container { flex: 0 0 25%; min-width: 140px; }
.mtv-flt-save-box-row > input[type="text"] {
    flex: 1 1 80px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--mtv-kieselgrau);
    border-radius: 4px;
    font-family: var(--mtv-font);
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: var(--mtv-schwarzerde);
    box-sizing: border-box;
}
.mtv-flt-save-box-row > input[type="text"]:focus {
    outline: none;
    border-color: var(--mtv-warmblue);
}
.mtv-flt-save-box-row > label.mtv-flt-default {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-weight: 600;
    margin: 0;
    flex: 0 0 auto;
    line-height: 1.3;
    color: var(--mtv-schwarzerde);
}
.mtv-flt-save-box-row > label.mtv-flt-default input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
    flex: 0 0 auto;
}

/* === Buttons: Kat 6 – Export / Werkzeuge === */
.mtv-btn-tool {
    background: linear-gradient(to bottom, #96cc33, var(--mtv-lindgruen));
    color: var(--mtv-schwarzerde);
    border: 1px solid var(--mtv-lindgruen);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mtv-btn-tool:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* === Buttons: Kat 7 – Spezial (Priorität, Frist, Ergebnis) === */
.mtv-btn-choice {
    padding: 7px 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--mtv-font);
    background: linear-gradient(to bottom, #fff, var(--mtv-lilienweiss));
    color: var(--mtv-schwarzerde);
    border: 1px solid var(--mtv-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}
.mtv-btn-choice:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.mtv-btn-choice-sel {
    color: var(--mtv-lilienweiss);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* === Buttons: Kat 8 – Foto / Medien === */
.mtv-btn-media {
    background: linear-gradient(to bottom, #66c8ff, #4dbbff);
    color: var(--mtv-schwarzerde);
    border: 1px solid #4dbbff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mtv-btn-media:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* === Buttons: Kat 9 – Aktions-Button (wie Kat 1) === */
.mtv-btn-action {
    background: linear-gradient(to bottom, #0b7a24, var(--mtv-schwgruen));
    color: var(--mtv-lilienweiss);
    border: 1px solid var(--mtv-schwgruen);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
.mtv-btn-action:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* === Buttons: Legacy-Kompatibilität === */
.mtv-btn-lindgruen   { background: linear-gradient(to bottom, #96cc33, var(--mtv-lindgruen)); color: var(--mtv-schwarzerde); border: 1px solid var(--mtv-lindgruen); box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2); }
.mtv-btn-schwgruen   { background: linear-gradient(to bottom, #0b7a24, var(--mtv-schwgruen)); color: var(--mtv-lilienweiss); border: 1px solid var(--mtv-schwgruen); box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15); }
.mtv-btn-warmblue    { background: linear-gradient(to bottom, #1a8ad4, var(--mtv-warmblue)); color: var(--mtv-lilienweiss); border: 1px solid var(--mtv-warmblue); box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15); }
.mtv-btn-mohnrot     { background: linear-gradient(to bottom, #e8203f, var(--mtv-mohnrot)); color: var(--mtv-lilienweiss); border: 1px solid var(--mtv-mohnrot); box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15); }
.mtv-btn-violett     { background: linear-gradient(to bottom, #7a66bb, var(--mtv-violett)); color: var(--mtv-lilienweiss); border: 1px solid var(--mtv-violett); box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15); }
.mtv-btn-kieselgrau  { background: linear-gradient(to bottom, #b3b0a6, var(--mtv-kieselgrau)); color: var(--mtv-lilienweiss); border: 1px solid var(--mtv-kieselgrau); box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2); }
.mtv-btn-ghost       { background: linear-gradient(to bottom, #fff, var(--mtv-lilienweiss)); border: 1px solid var(--mtv-kieselgrau); color: var(--mtv-text); box-shadow: 0 2px 4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8); }

/* Legacy + Neue: Einheitlicher Hover */
.mtv-btn-lindgruen:hover, .mtv-btn-schwgruen:hover, .mtv-btn-warmblue:hover,
.mtv-btn-mohnrot:hover, .mtv-btn-violett:hover, .mtv-btn-kieselgrau:hover, .mtv-btn-ghost:hover {
    filter: brightness(1.15);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Button-Größen */
.mtv-btn-sm { padding: 5px 12px; font-size: 12px; }
.mtv-btn-lg { padding: 10px 20px; font-size: 14px; }

/* === Knöpfe als Link (<a class="mtv-btn mtv-btn-edit">, z. B. der Hilfe-Knopf): Die Schriftfarbe der Knopf-Variante
   gilt vor der Link-Farbe eines App-Stylesheets (.xxx-wrap a{color:...}), und beim Überfahren gibt es keinen
   Unterstrich. So sieht ein Knopf als Link überall aus wie ein Knopf (Stefan 12.10.2026). === */
a.mtv-btn.mtv-btn-save, a.mtv-btn.mtv-btn-danger, a.mtv-btn.mtv-btn-nav, a.mtv-btn.mtv-btn-edit, a.mtv-btn.mtv-btn-wf,
a.mtv-btn.mtv-btn-action, a.mtv-btn.mtv-btn-schwgruen, a.mtv-btn.mtv-btn-warmblue, a.mtv-btn.mtv-btn-mohnrot,
a.mtv-btn.mtv-btn-violett, a.mtv-btn.mtv-btn-kieselgrau { color: var(--mtv-lilienweiss); }
a.mtv-btn.mtv-btn-view, a.mtv-btn.mtv-btn-filter, a.mtv-btn.mtv-btn-refresh { color: #fff; }
a.mtv-btn.mtv-btn-tour, a.mtv-btn.mtv-btn-tool, a.mtv-btn.mtv-btn-media, a.mtv-btn.mtv-btn-lindgruen { color: var(--mtv-schwarzerde); }
a.mtv-btn.mtv-btn-ghost { color: var(--mtv-text); }
a.mtv-btn.mtv-btn:hover, a.mtv-btn.mtv-btn:focus { text-decoration: none; }

/* === Badges === */
.mtv-badge {
    display: inline-block;
    min-width: 26px;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--mtv-lilienweiss);
    color: var(--mtv-text);
    font-weight: 600;
    font-size: 12px;
    text-align: center;
}
/* Gedaempfte Variante (z.B. "ehemalig"): Schwarzerde-Schrift.
   Vorher color:#ccc auf Lilienweiss - praktisch unlesbar (Stefan 2026-07-14).
   Hintergrund bleibt der der Basis-Badge. */
.mtv-badge-0 { color: var(--mtv-schwarzerde); }

/* === Status-Pill === */
.mtv-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* === Formular-Elemente === */
.mtv-input,
.mtv-select,
.mtv-textarea {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    font-family: var(--mtv-font);
    color: var(--mtv-text);
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}
.mtv-input:focus,
.mtv-select:focus,
.mtv-textarea:focus {
    border-color: var(--mtv-lindgruen);
}
.mtv-textarea { resize: vertical; min-height: 40px; }
input.mtv-input,
select.mtv-select,
select.mtv-input {
    height: var(--mtv-feld-h);
    box-sizing: border-box;
}

/* === Select2 (einzeilig): gleiche Hoehe und gleicher Rahmen wie die Felder im Modal ===
   "body" davor, damit die Regel auch gilt, wenn select2.min.css NACH dieser Datei geladen
   wird. Apps setzen dafuer KEINE eigene Regel mehr. */
body .select2-container--default .select2-selection--single {
    height: var(--mtv-feld-h);
    box-sizing: border-box;
    border: 1px solid var(--mtv-kieselgrau);
    border-radius: 6px;
    background: #fff;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--mtv-feld-h) - 2px);
    padding-left: 10px;
    color: var(--mtv-schwarzerde);
    font-size: 13px;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--mtv-feld-h) - 2px);
}
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--mtv-lindgruen);
}

/* === Oeffentliche Seite: zentrierte Karte (Login, Registrierung, Bestaetigung, PW-Reset) === */
.mtv-page{ min-height:100vh; margin:0; padding:24px 16px; background:var(--mtv-lilienweiss); font-family:var(--mtv-font); color:var(--mtv-schwarzerde); font-size:13px; display:flex; align-items:flex-start; justify-content:center; box-sizing:border-box; }
.mtv-card{ background:#fff; width:100%; max-width:560px; border:1px solid var(--mtv-kieselgrau); border-radius:12px; box-shadow:0 4px 18px rgba(73,58,48,0.12); padding:24px 26px 26px; box-sizing:border-box; }
@media (max-width:760px){ .mtv-page{ padding:14px 10px; } .mtv-card{ padding:18px 16px; border-radius:10px; } }

/* === App-Layout: Flexbox fullheight, nur Tabelle scrollt === */
.mtv-app-wrap,
.akt-wrap,
.df-wrap,
.lang-wrap,
.bg-wrap,
.ber-wrap,
.tx-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* App-Header: fest oben, Lindgruen-Stripe */
.mtv-app-header,
.akt-header,
.df-header,
.bw-hdr,
.lang-header,
.bg-hdr,
.ber-header {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 3px solid var(--mtv-lindgruen);
    padding: 12px 16px;
}

/* Bereiche zwischen Header und Tabelle: nicht schrumpfen */
.akt-summary,
.akt-filter-row,
.lang-summary,
.lang-new-row,
.lang-filter-row,
.df-garten-head,
.df-nav,
.df-garten-footer,
.df-finish-bar,
.bg-toolbar,
.bg-footer,
.ber-batch,
.ber-footer,
.tx-header,
.tx-tabs,
.tx-toolbar,
.tx-empty {
    flex-shrink: 0;
}

/* Tabellen-Container: fuellt den Rest, scrollt intern */
.mtv-app-table-wrap,
.akt-table-wrap,
.lang-table-wrap,
.bw-detail-table-wrap,
.df-pp-list,
.bg-tbl-wrap,
.ber-tbl-wrap,
.tx-tbl-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

/* Spaltenkoepfe: sticky innerhalb des Scroll-Containers */
.mtv-app-table thead th,
.akt-table thead th,
.lang-table thead th,
.bw-detail-table thead th,
.mtv-tbl thead th,
.bg-tbl thead th,
.ber-tbl thead th,
.vex-table thead th,
.vpr-table thead th,
.ali-table thead th,
.zueb-table thead th,
.vim-prev thead th,
.sch-table thead th,
.sch-sub-table thead th,
.lgv-table thead th,
.eich-table thead th,
.eur-table thead th {
    background: var(--mtv-lindgruen);
    color: var(--mtv-schwarzerde);
    font-weight: 600;
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--mtv-schwarzerde);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* === Tabellen === */
.mtv-tbl-wrap {
    overflow-x: auto;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.mtv-tbl {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 12px;
}
.mtv-tbl thead {
    background: var(--mtv-lindgruen);
}
.mtv-tbl thead th {
    color: var(--mtv-text);
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
}
.mtv-tbl tbody tr {
    border-bottom: 1px solid var(--mtv-border);
    transition: background 0.15s;
}
.mtv-tbl tbody tr:hover { background: var(--mtv-bg-light); }
.mtv-tbl td {
    padding: 10px 14px;
    vertical-align: middle;
}
.mtv-tbl td.mtv-center { text-align: center; }

/* === Leer-Zustand === */
.mtv-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--mtv-text-muted);
}
.mtv-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.mtv-empty-text { font-size: 15px; margin-bottom: 20px; }

/* === Toast === */
.mtv-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.mtv-toast-ok  { background: var(--mtv-schwgruen); }
.mtv-toast-err { background: var(--mtv-mohnrot); }
.mtv-toast.mtv-show { opacity: 1; }

/* === Lightbox === */
.mtv-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 300;
    align-items: center;
    justify-content: center;
}
.mtv-lightbox.mtv-lb-open { display: flex; }
.mtv-lightbox img { max-width: 90%; max-height: 90%; border-radius: 4px; }
.mtv-lb-close {
    position: absolute;
    top: 16px; right: 16px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

/* === Spracheingabe-Button === */
.mtv-mic-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.mtv-mic-btn:hover { background: var(--mtv-lilienweiss); }
.mtv-mic-btn.mtv-mic-active {
    background: var(--mtv-mohnrot);
    color: #fff;
    border-color: var(--mtv-mohnrot);
    animation: mtv-pulse 1s infinite;
}
@keyframes mtv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* === Responsive Tablet (max 1024px) === */
@media (max-width: 1024px) {
    .mtv-wrap { padding: 12px; }
    .mtv-tbl td, .mtv-tbl thead th { padding: 8px 10px; font-size: 12px; }
}

/* === Responsive Mobil (max 768px) === */
@media (max-width: 768px) {
    .mtv-btn-lg { width: 100%; justify-content: center; }
}

/* === SweetAlert2 immer oben === */
/* Swal-Default ist z-index 1060 und liegt damit HINTER dem Filter-Modal (9000)   */
/* und dem Toast (10000). Zentral hochsetzen, damit Bestaetigungen/Meldungen aus   */
/* JEDEM Modal (Filter etc.) sichtbar davor erscheinen. Gilt fuer alle Apps.       */
.swal2-container { z-index: 100000 !important; }

/* ============================================================ */
/* Geteilte App-Komponenten (Promotion 2026-07-03, Stefan):     */
/* Lindengruen-Header (sticky), Reiter/Tabs, Suchfeld, Badges,  */
/* Formularzeilen, Cards, Paging-Footer. NIE pro App neu bauen  */
/* - hier zentral, von ALLEN Apps genutzt (keine eigene App-CSS)*/
/* ============================================================ */

/* --- App-Root: Basis-Schrift (Inter, 12px, Schwarzerde) - Standard §8 --- */
.mtv-app-wrap{ font-family:var(--mtv-font); color:#493a30; font-size:12px; }
/* Kein horizontaler Ueberlauf: width:100% + Padding/Border rechnet inklusive */
.mtv-app-wrap, .mtv-app-wrap *{ box-sizing:border-box; }

/* --- Lindengruen-Header (sticky): Titel | ... | Aktionen --- */
.mtv-app-header{
    background:#85bb22;
    color:#493a30;
    border-bottom:none;
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.mtv-app-title{ font-weight:700; font-size:16px; color:#493a30; display:flex; align-items:center; gap:8px; }
.mtv-app-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mtv-btn-group{ display:inline-flex; align-items:center; gap:8px; }

/* --- App-Body: flex-Bereich unter dem Header (Reiter + Panel) --- */
.mtv-app-body{ flex:1; display:flex; flex-direction:column; min-height:0; padding:12px 14px 0; }

/* --- Reiter / Tabs (Look wie Zaehler-Edit) UNTER dem Header + Mobile-Umschalter --- */
.mtv-mobilesel{ display:none; margin-bottom:10px; }
.mtv-mobilesel select{ width:100%; padding:10px; border:2px solid #c4bbdd; border-radius:4px; background:#fff; color:#493a30; font-family:var(--mtv-font); font-size:13px; font-weight:700; min-height:44px; }
.mtv-tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid #85bb22; margin-bottom:0; flex-shrink:0; }
.mtv-tab{ background:#f2f0f0; border:1px solid #a19e92; border-bottom:none; border-radius:5px 5px 0 0; padding:6px 14px; cursor:pointer; font-family:var(--mtv-font); font-size:12px; font-weight:700; color:#493a30; display:inline-flex; align-items:center; gap:6px; }
.mtv-tab:hover{ background:#e3e1a2; }
.mtv-tab.mtv-tab-active{ background:#85bb22; border-color:#85bb22; color:#493a30; }
.mtv-tab.mtv-tab-hidden{ display:none; }
.mtv-tab-badge{ display:inline-block; min-width:18px; padding:1px 6px; border-radius:10px; background:#d40829; color:#fff; font-size:11px; font-weight:700; text-align:center; }
.mtv-tab-panel{ display:none; flex:1; min-height:0; background:#fff; border:1px solid #a19e92; border-top:none; border-radius:0 0 6px 6px; }
.mtv-tab-panel.mtv-tab-active{ display:flex; flex-direction:column; }
.mtv-tab-panel-form.mtv-tab-active{ padding:14px; }
/* Rahmen um den Inhalt eines Formulars OHNE Reiter - gleiches Aussehen wie das Reiter-Panel
   (Stefan Kredt 25.09.2026, erster Verwender: Inventar-Verleih Scan/Ausgabe/Rueckgabe/Einstellungen) */
.mtv-panel{ background:#fff; border:1px solid #a19e92; border-radius:6px; padding:14px; }
/* Wachsende Formzeile: Editor/Feld fuellt die Panelhoehe (kein Scrollbalken) */
.mtv-grow{ flex:1; min-height:0; display:flex; flex-direction:column; }
.mtv-grow textarea{ flex:1; min-height:120px; }
.mtv-grow .tox-tinymce{ flex:1 !important; min-height:120px; }

/* --- Suchfeld mit Lupe (Kirschblueten-Rand) --- */
.mtv-search-wrap{ position:relative; max-width:360px; }
.mtv-search-icon{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#a19e92; pointer-events:none; }
.mtv-search{ padding-left:32px; border-color:#c4bbdd; width:100%; }
/* Suchfeld im Modal: die Modal-Feldregel (.mtv-modal-body input[type=text], padding 0 10px,
   Spezifitaet 0,2,1) nahm der Lupe den Platz - der Platzhaltertext lag unter dem Symbol.
   Hoeher gewichtet, damit es in jedem Modal passt (Stefan 23.09.2026). */
.mtv-modal-body .mtv-search-wrap .mtv-search{ padding-left:32px; }

/* --- Badge-Farbvarianten --- */
.mtv-badge-ok{ background:#0a651f; color:#fff; }
.mtv-badge-err{ background:#d40829; color:#fff; }

/* --- Formular-Zeile / Label / Pflicht-Stern / Hinweis / Checkbox / Treffer --- */
.mtv-form-row{ margin-bottom:14px; }
/* Horizontale Formzeile: Label VOR dem Feld */
.mtv-form-row-h{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.mtv-form-row-h > .mtv-label{ flex:none; width:140px; margin-bottom:0; }
.mtv-form-row-h > .mtv-input{ flex:1; min-width:200px; }
.mtv-form-row-h > .mtv-field{ flex:1; min-width:200px; }
.mtv-label{ display:block; font-weight:600; color:#493a30; margin-bottom:5px; }
.mtv-req{ color:#d40829; font-weight:700; }
.mtv-hint{ margin-top:6px; font-size:11px; font-weight:600; color:#493a30; display:flex; align-items:center; gap:6px; }
.mtv-hint-warn{ color:#d40829; }
/* Fehler-Zustand fuer Formularfelder (wiederverwendbar in allen Formularen) */
.mtv-input-error{ border-color:#d40829 !important; box-shadow:0 0 0 2px rgba(212,8,41,0.15) !important; }
.mtv-field-error{ margin-top:6px; font-size:13px; font-weight:600; color:#d40829; }

/* --- Fortschritt (determiniert) + Spinner (generisch, App-uebergreifend) --- */
/* Ladekreis mittig im Bildschirm - fuer Wartezeiten ohne bekannten Fortschritt (Liste neu
   laden, Seitengroesse wechseln). Nur der Kreis, kein Text und kein Kasten; halbdurchsichtig,
   damit man sieht, dass die Seite noch da ist. Liegt unter dem Fortschritts-Overlay.
   Zentral seit 2026-08-17. */
.mtv-lade-ov{
    position:fixed;
    inset:0;
    background:rgba(242,240,240,0.6);
    z-index:9400;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.mtv-lade-ov.mtv-open{ display:flex; }

/* Fortschritt mittig im Bildschirm - fuer Laeufe, die eine Weile brauchen (Massenbearbeitung).
   Liegt ueber den Modals (z-index 9000) und unter SweetAlert (100000).
   Zentral seit 2026-08-17, von jeder App nutzbar. */
.mtv-progress-ov{
    position:fixed;
    inset:0;
    background:rgba(73,58,48,0.55);
    z-index:9500;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.mtv-progress-ov.mtv-open{ display:flex; }
.mtv-progress-box{
    background:#fff;
    border:2px solid var(--mtv-schwarzerde);
    border-radius:8px;
    box-shadow:0 18px 44px rgba(73,58,48,0.4);
    padding:22px 26px;
    min-width:420px;
    max-width:90vw;
    font-family:var(--mtv-font);
    color:var(--mtv-schwarzerde);
    font-size:13px;
}
.mtv-progress-box .mtv-progress{ margin:0; }

/* Fortschrittskarte (Vorgabe Stefan Kredt 2026-08-17, Bildvorlage): vollflaechige gruene
   Kopfleiste mit weisser Schrift, darunter der Balken mit dem Prozentwert IM Balken und eine
   Statuszeile. Die Karte tritt an die Stelle der nackten Box - mtv-progress-card gehoert
   zusammen mit -head, -body und -wert. */
.mtv-progress-box.mtv-progress-card{ padding:0; border:none; overflow:hidden; min-width:460px; }
.mtv-progress-head{
    background:var(--mtv-schwgruen);
    color:var(--mtv-lilienweiss);
    font-size:14px;
    font-weight:700;
    padding:11px 18px;
}
.mtv-progress-body{ padding:14px 18px 16px; }
/* Der Prozentwert liegt ueber der Fuellung, mittig in der ganzen Bahn - so bleibt er lesbar,
   auch wenn der Balken noch kurz ist. */
.mtv-progress-wert{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    color:var(--mtv-lilienweiss);
    text-shadow:0 1px 2px rgba(73,58,48,0.55);
}

/* Balken: kraeftige Hoehe, Markenverlauf Lindengruen -> Schweinfurter Gruen und ein laufendes
   Streifenmuster, damit man sieht, dass es weitergeht - auch wenn ein Schritt laenger dauert.
   Aufgewertet 2026-08-17; Struktur unveraendert, damit alle Apps mit mtv-progress profitieren. */
.mtv-progress{ width:100%; margin:8px 0 2px; }
.mtv-progress-track{
    position:relative;
    width:100%;
    height:24px;
    background:#fff;
    border:1px solid var(--mtv-kieselgrau);
    border-radius:6px;
    overflow:hidden;
    box-shadow:inset 0 1px 3px rgba(73,58,48,0.14);
}
.mtv-progress-fill{
    height:100%;
    width:0;
    border-radius:6px;
    background-color:var(--mtv-schwgruen);
    background-image:linear-gradient(135deg, rgba(255,255,255,0.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 75%, transparent 75%, transparent);
    background-size:24px 24px;
    transition:width .25s ease;
    animation:mtv-prog-lauf .9s linear infinite;
}
@keyframes mtv-prog-lauf{
    from{ background-position:0 0; }
    to{ background-position:24px 0; }
}
.mtv-progress-txt{ margin-top:10px; font-size:13px; font-weight:700; color:#493a30; text-align:center; font-variant-numeric:tabular-nums; }
/* In der Karte steht die Statuszeile links unter dem Balken (Bildvorlage). */
.mtv-progress-card .mtv-progress-txt{ text-align:left; }
.mtv-spinner{ width:34px; height:34px; border:4px solid #a19e92; border-top-color:#0a651f; border-radius:50%; animation:mtv-spin .8s linear infinite; margin:0 auto; }
@keyframes mtv-spin{ to{ transform:rotate(360deg); } }
.mtv-check{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#493a30; cursor:pointer; }
.mtv-check input{ width:18px; height:18px; flex:none; margin:0; accent-color:#0a651f; }
/* Switch: Checkboxen in EINGABEFORMULAREN immer als Switch (in Grid-Zeilen bleibt .mtv-check = Kaestchen) */
/* position:relative ist PFLICHT (2026-07-14): die Checkbox darunter ist position:absolute.
   Ohne positioniertes Label ist ihr Bezugsrahmen das DOKUMENT - dann scrollt sie nicht mit
   ihrer Tabellenzeile mit, und ein Klick auf den Schalter scrollt die Seite an die falsche
   Stelle (die App springt aus dem Bild). Faellt nur in scrollenden Listen auf, nicht in
   Formularen. */
.mtv-switch{ position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; color:#493a30; }
.mtv-switch > input{ position:absolute; opacity:0; width:1px; height:1px; }
.mtv-switch-slider{ position:relative; width:40px; height:20px; flex:none; background:#a19e92; border-radius:20px; transition:background .2s; }
.mtv-switch-slider::before{ content:""; position:absolute; left:3px; top:3px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .2s; }
.mtv-switch > input:checked + .mtv-switch-slider{ background:#0a651f; }
.mtv-switch > input:checked + .mtv-switch-slider::before{ transform:translateX(20px); }
.mtv-switch > input:focus-visible + .mtv-switch-slider{ box-shadow:0 0 0 2px #0074be; }
.mtv-switch-label{ font-weight:600; color:#493a30; }
.mtv-treffer{ font-weight:700; color:#0a651f; font-size:13px; }

/* --- Listen: Desktop-Tabelle <-> Mobile-Cards (opt-in) --- */
.mtv-list-top{ padding:12px 14px 8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mtv-list-cards{ display:none; }
.mtv-mcard{ background:#fff; border:1px solid #a19e92; border-radius:8px; padding:12px; margin-bottom:10px; }
.mtv-mcard-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.mtv-mcard-name{ font-weight:700; color:#493a30; }
.mtv-mcard-line{ font-size:12px; font-weight:600; color:#493a30; margin-top:2px; word-break:break-word; }
.mtv-mcard-err{ font-size:11px; font-weight:600; color:#d40829; margin-top:4px; }
.mtv-mcard-actions{ display:flex; gap:8px; margin-top:10px; }
.mtv-actions{ text-align:right; white-space:nowrap; }

/* --- Paging-Footer: Seitengroesse links | Seiten mitte | X-Y von Total rechts --- */
.mtv-paging-footer{
    flex-shrink:0;
    background:#f2f0f0;
    border-top:2px solid #4dbbff;
    padding:8px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    box-shadow:0 -2px 6px rgba(0,0,0,0.08);
}
.mtv-paging-size{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; font-weight:700; color:#493a30; }
.mtv-paging-footer .mtv-pagesize{ height:30px; width:auto; box-sizing:border-box; border:1px solid #a19e92; border-radius:4px; font-family:var(--mtv-font); font-size:12px; color:#493a30; background:#fff; padding:0 6px; }
.mtv-paging-info{ color:#493a30; font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; }
.mtv-paging-btns{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.mtv-paging-btn{ background:#4dbbff; border:1px solid #4dbbff; color:#fff; padding:5px 12px; border-radius:4px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--mtv-font); min-width:36px; display:inline-flex; align-items:center; justify-content:center; }
.mtv-paging-btn:hover:not(:disabled){ background:#0074be; border-color:#0074be; }
.mtv-paging-btn.mtv-active{ background:#0074be; border-color:#0074be; }
.mtv-paging-btn:disabled{ opacity:0.4; cursor:not-allowed; }

/* --- Mobile: Header 1-spaltig, Tabs scrollbar, Tabelle -> Cards --- */
@media (max-width:760px){
    .mtv-app-actions{ margin-left:0; width:100%; }
    .mtv-mobilesel{ display:block; }
    .mtv-tabs{ display:none; }
    .mtv-search-wrap{ max-width:100%; }
    .mtv-paging-footer{ justify-content:center; }
    .mtv-list-table{ display:none !important; }
    .mtv-list-cards{ display:block; flex:1; min-height:0; overflow:auto; padding:0 12px; }
}

/* ===== Font-Awesome Icon-Picker (wiederverwendbar; Quelle: app_menu_config_sa) =====
   Icon-Liste kommt aus js/mtv_fa_icons.js (window.MC_FA_ICONS, Stile solid/regular/brands). */
.mtv-icon-row{ display:flex; align-items:center; gap:8px; }
.mtv-icon-prev{ width:34px; height:32px; border:1px solid #a19e92; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; color:#493a30; background:#fff; flex:0 0 auto; }
/* z-index ueber den Edit-Modals: der Picker wird AUS einem Modal heraus geoeffnet */
.mtv-icon-ov{ position:fixed; inset:0; background:rgba(73,58,48,.55); display:none; align-items:flex-start; justify-content:center; z-index:10000; padding:24px; }
.mtv-icon-ov.mtv-show{ display:flex; }
.mtv-icon-modal{ background:#f2f0f0; border-radius:10px; width:560px; max-width:100%; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 18px 44px rgba(73,58,48,.4); }
.mtv-icon-head{ background:#85bb22; color:#493a30; font-weight:700; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mtv-icon-head i{ color:#493a30; }
.mtv-icon-x{ background:transparent; border:0; color:#493a30; cursor:pointer; font-size:18px; }
.mtv-icon-search{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:#fff; border-bottom:1px solid #a19e92; }
.mtv-icon-search i{ color:#a19e92; }
.mtv-icon-search input{ flex:1; height:var(--mtv-feld-h); box-sizing:border-box; border:1px solid #a19e92; border-radius:6px; padding:0 8px; font:inherit; font-size:13px; color:#493a30; }
.mtv-icon-grid{ flex:1; min-height:0; padding:12px; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:6px; background:#f7f6f4; align-content:start; }
.mtv-icon-cell{ height:44px; border:1px solid #e3e1a2; border-radius:6px; background:#fff; color:#493a30; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.mtv-icon-cell:hover{ background:#e3e1a2; border-color:#85bb22; }

/* ===== Wizard-Stepper (wiederverwendbar; Quelle: app_res_einstellungen) ===== */
.mtv-stepper{ display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; }
.mtv-step-btn{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #a19e92; border-radius:6px; padding:8px 14px; font-weight:700; color:#493a30; cursor:pointer; font-family:'Inter',sans-serif; font-size:12px; }
.mtv-step-num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#e3e1a2; color:#493a30; font-weight:700; font-size:12px; flex:0 0 auto; }
.mtv-step-btn.mtv-step-done{ background:#fff; }
.mtv-step-btn.mtv-step-cur{ background:#0a651f; border-color:#0a651f; color:#f2f0f0; }
.mtv-step-btn.mtv-step-done .mtv-step-num{ background:#0a651f; color:#fff; }
.mtv-step-btn.mtv-step-cur .mtv-step-num{ background:#f2f0f0; color:#0a651f; }
.mtv-step-btn.mtv-step-lock{ opacity:.45; cursor:not-allowed; }
.mtv-wizfoot{ display:flex; justify-content:center; gap:12px; margin-top:16px; }

/* ===== Gruppierte Listen: Warnleiste, Gruppenzeile, Zeilenzustaende =====
   Zentral seit 2026-08-14 (Kostenarten-Neubau). Vorher lagen dieselben Bausteine
   app-lokal als rat-* in rechnungsart.css. Neue Apps nutzen ausschliesslich diese
   Klassen; rechnungsart.css wird beim naechsten Anfassen darauf umgestellt. */

/* Warnleiste ueber einer Liste - err = Mohnrot, warn = Narzissengelb */
.mtv-warnbar{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:9px 12px;
    border-radius:6px;
    margin-bottom:10px;
    font-size:12px;
    font-weight:700;
    color:#493a30;
}
.mtv-warnbar i{ margin-top:2px; font-size:15px; color:#d40829; }
.mtv-warnbar-err{ background:#fdeaed; border:1px solid #d40829; }
.mtv-warnbar-warn{ background:#fffbe6; border:1px solid #ffd600; }
.mtv-warnbar-warn i{ color:#493a30; }
.mtv-warnbar-info{ background:#f7f6f4; border:1px solid #0074be; }
.mtv-warnbar-info i{ color:#0074be; }
.mtv-warnbar-txt{ flex:1; min-width:0; }

/* Gruppenzeile in der Tabelle (z.B. je Finanzbuch) + Pendant in der Kartenansicht.
   Lindgruener Grund wie der Tabellenkopf; die Aktionen stehen mittig, damit sie bei
   breiten Tabellen nicht an den Rand rutschen (Grid 1fr auto 1fr). */
.mtv-grouprow td{
    background:#85bb22;
    color:#493a30;
    border-top:2px solid #493a30;
    border-bottom:1px solid #493a30;
    padding:8px 10px;
}
.mtv-group-inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:8px;
}
.mtv-group-name{ font-weight:700; font-size:13px; color:#493a30; }
.mtv-group-sub{
    display:inline-block;
    padding:1px 8px;
    border-radius:10px;
    background:#f2f0f0;
    color:#493a30;
    font-size:11px;
    font-weight:700;
    margin-left:8px;
}
.mtv-group-actions{ display:inline-flex; gap:8px; justify-content:center; }
.mtv-group-cardhead{
    font-weight:700;
    font-size:13px;
    color:#493a30;
    background:#85bb22;
    padding:7px 10px;
    margin:12px 0 8px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

/* Aktionszellen: Bearbeiten immer links vor der Zeile, Loeschen rechts mit Abstand.
   Zwischen Detail- und Loeschen-Knopf der doppelte Abstand (16px), damit das Loeschen
   nicht versehentlich getroffen wird. */
.mtv-edit-cell{ width:46px; }
.mtv-del-cell{ width:118px; text-align:right; white-space:nowrap; padding-left:16px; }
.mtv-del-cell .mtv-btn + .mtv-btn{ margin-left:16px; }
.mtv-mcard-actions .mtv-btn-danger{ margin-left:8px; }

/* Zeilenzustaende + Zeilen-Hinweise unter dem Namen */
.mtv-row-err td{ background:#fdeaed; }
.mtv-row-warn td{ background:#f7f6f4; }
.mtv-mcard.mtv-row-err{ border-color:#d40829; background:#fdeaed; }
.mtv-mcard.mtv-row-warn{ border-color:#ffd600; background:#f7f6f4; }
.mtv-rowhint{ font-size:11px; font-weight:600; color:#493a30; margin-top:3px; }
.mtv-rowhint-err{ color:#d40829; }
.mtv-rowname{ font-weight:700; }

/* Leerhinweis in einer Tabelle bzw. Kartenliste (mtv-empty ist der grosse
   Leerzustand einer ganzen Seite - das hier ist die schmale Zeilenvariante) */
.mtv-leerzeile{
    padding:14px;
    text-align:center;
    font-weight:600;
    color:#a19e92;
}

/* Merkmal-Kettchen in einer Zelle (z.B. zugeordnete Rechnungsarten) */
.mtv-flagline{ display:flex; gap:6px; flex-wrap:wrap; }
.mtv-flag{
    display:inline-block;
    padding:2px 8px;
    border-radius:10px;
    background:#e8e6e3;
    border:1px solid #a19e92;
    color:#493a30;
    font-size:11px;
    font-weight:700;
}

/* Badge-Varianten fuer neutrale und warnende Zaehler */
.mtv-badge-warn{ background:#ffd600; color:#493a30; }
.mtv-badge-info{ background:#c4bbdd; color:#493a30; }

/* ===== App-Overlay: eine zweite App als Iframe ueber der aktuellen =====
   Zentral seit 2026-08-14 (Kostenarten). Dasselbe Muster liegt in em_zaehler_edit.css
   noch lokal als .eze-vbrovl - wird beim naechsten Anfassen umgestellt.
   Die Ziel-App meldet sich per postMessage zurueck (schliessen / gespeichert),
   die IDs laufen ueber die Session, nie ueber die URL (App-Standards 4a). */
.mtv-appov{
    position:fixed;
    inset:0;
    background:rgba(73,58,48,0.45);
    z-index:9000;
    display:none;
    padding:24px;
}
.mtv-appov.mtv-open{ display:flex; align-items:stretch; justify-content:center; }
.mtv-appov-box{
    width:100%;
    max-width:1100px;
    background:#f2f0f0;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 18px 44px rgba(73,58,48,0.4);
    display:flex;
}
.mtv-appov-frame{ flex:1; width:100%; border:0; background:#f2f0f0; }

@media (max-width:760px){
    .mtv-appov{ padding:0; }
    .mtv-appov-box{ max-width:none; border-radius:0; }
}

/* ===== Facetten-Leiste links neben der Liste (Schnellsuche mit Trefferzahlen) =====
   Zentral seit 2026-08-17 (Kostenliste). Freigegeben von Stefan Kredt fuer die beiden
   Kostenlisten - siehe die dokumentierte Ausnahme in wiki/Konventionen/App-Standards.md
   Paragraph 6. Jede Facette hat ein Suchfeld, sobald sie mehr als zehn Werte hat, und
   oeffnet ab mehr als zwanzig Werten ein Auswahl-Modal (mtv-flt-modal, violett - es ist
   ein Filter). Mehrfachauswahl ist moeglich, die Auswahl gehoert zur gespeicherten
   Ansicht (tbl_sys_user_filter).
   Mobil ist die Leiste ausgeblendet und wird ueber einen Knopf als Overlay eingeblendet -
   ohne diese Umschaltung waere die Ausnahme nicht gedeckt (App-Standards Paragraph 11). */
.mtv-facet-layout{ flex:1; min-height:0; display:flex; gap:12px; padding:0 14px; }
.mtv-facet-side{
    flex:0 0 250px;
    min-width:0;
    overflow-y:auto;
    background:#fff;
    border:1px solid var(--mtv-kieselgrau);
    border-radius:6px;
    padding:8px;
}
.mtv-facet-main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }
.mtv-facet-group{ margin-bottom:10px; }
.mtv-facet-head{
    background:var(--mtv-lindgruen);
    color:var(--mtv-schwarzerde);
    font-weight:700;
    font-size:12px;
    padding:5px 8px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
}
.mtv-facet-search{ margin:6px 0 4px; }
.mtv-facet-search input{
    width:100%;
    height:28px;
    padding:0 8px;
    border:1px solid var(--mtv-kirschbluete);
    border-radius:4px;
    font-family:var(--mtv-font);
    font-size:12px;
    color:var(--mtv-schwarzerde);
    background:#fff;
    box-sizing:border-box;
}
.mtv-facet-list{ display:flex; flex-direction:column; }
.mtv-facet-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    background:none;
    border:none;
    border-bottom:1px solid var(--mtv-border);
    padding:5px 4px;
    min-height:30px;
    font-family:var(--mtv-font);
    font-size:12px;
    font-weight:600;
    color:var(--mtv-schwarzerde);
    text-align:left;
    cursor:pointer;
}
.mtv-facet-item:hover{ background:var(--mtv-bg-light); }
.mtv-facet-item.mtv-facet-item-active{ background:var(--mtv-kirschbluete); border-radius:4px; }
.mtv-facet-name{ flex:1; min-width:0; word-break:break-word; }
.mtv-facet-count{
    flex:0 0 auto;
    background:var(--mtv-lilienweiss);
    color:var(--mtv-schwarzerde);
    border-radius:10px;
    padding:1px 7px;
    font-size:11px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.mtv-facet-more{
    background:none;
    border:none;
    padding:5px 4px;
    font-family:var(--mtv-font);
    font-size:12px;
    font-weight:700;
    color:var(--mtv-warmblue);
    text-decoration:underline;
    cursor:pointer;
    text-align:left;
}
.mtv-facet-leer{ padding:6px 4px; font-size:12px; font-weight:600; color:var(--mtv-kieselgrau); }
/* Gesetzte Filter als entfernbare Kettchen ueber der Liste */
.mtv-facet-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
/* Auswahlliste im Facetten-Modal */
.mtv-facet-modal-list{ max-height:50vh; overflow:auto; border:1px solid var(--mtv-kieselgrau); border-radius:6px; padding:6px; }
.mtv-facet-modal-list .mtv-check{ display:flex; padding:4px 2px; border-bottom:1px solid var(--mtv-border); }
.mtv-facet-modal-list .mtv-check:last-child{ border-bottom:none; }

@media (max-width:760px){
    .mtv-facet-layout{ display:block; padding:0 10px; }
    .mtv-facet-side{
        display:none;
        position:fixed;
        inset:0;
        z-index:8000;
        border-radius:0;
        border:none;
        overflow-y:auto;
        padding:14px;
    }
    .mtv-facet-side.mtv-facet-open{ display:block; }
    .mtv-facet-main{ display:block; }
}

/* Filter-Knopf im Kopf (mtv-facet-toggle) und Schliessen-Zeile oben im Overlay (mtv-facet-close)
   gibt es nur mobil - auf breiten Bildschirmen steht die Leiste immer da. */
.mtv-btn.mtv-facet-toggle,
.mtv-facet-close{ display:none; }
@media (max-width:760px){
    .mtv-btn.mtv-facet-toggle{ display:inline-flex; }
    .mtv-facet-close{
        display:flex;
        justify-content:flex-end;
        position:sticky;
        top:0;
        z-index:1;
        background:#fff;
        padding:0 0 10px;
        margin-bottom:10px;
        border-bottom:1px solid var(--mtv-kieselgrau);
    }
    .mtv-facet-close .mtv-btn{ min-height:44px; }
}

/* ===== Summenzeilen unter einer Gruppe und unter der Tabelle =====
   Zwei Zeilen untereinander: Summe der aktiven und Summe der inaktiven Betraege.
   Die Gesamtsumme unter der Tabelle bezieht sich immer auf ALLE gefilterten Zeilen. */
.mtv-sumrow td{
    background:var(--mtv-bg-light);
    font-weight:700;
    border-top:1px solid var(--mtv-kieselgrau);
    padding:5px 10px;
}
.mtv-sumrow-total td{ background:var(--mtv-lilienweiss); border-top:2px solid var(--mtv-schwarzerde); }
/* Die Zeile mit den AKTIVEN Betraegen leicht gruen hinterlegen - Lindengruen stark
   aufgehellt, damit sie sich von der Gesamtzeile darueber abhebt ohne zu schreien. */
.mtv-sumrow-aktiv td{ background:rgba(133,187,34,0.16); }
.mtv-sumbar{
    flex-shrink:0;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:flex-end;
    padding:8px 14px 0;
    font-weight:700;
    font-size:12px;
    color:var(--mtv-schwarzerde);
}
.mtv-sumbar-wert{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ===== Eine App als Reiter-Inhalt (Iframe) =====
   Zentral seit 2026-09-02 (Sitzungen: die Einladung ist ein eigener Reiter in
   app_meeting_edit, technisch aber eine eigene App). Die Datensatz-ID laeuft
   ueber die Session, nie ueber die URL (App-Standards 4a).
   Der Rahmen holt seine Hoehe von aussen: das Reiter-Panel muss flex:1 und
   min-height:0 mitbringen, sonst bleibt der Iframe 0 Pixel hoch. */
.mtv-tabapp{ flex:1 1 auto; min-height:0; display:flex; background:var(--mtv-lilienweiss); }
.mtv-tabapp-frame{ flex:1; width:100%; border:0; background:var(--mtv-lilienweiss); }
/* Geht die App im Rahmen auf Vollbild (Word-Editor mit A4-Bogen), loest sich der
   Rahmen aus dem Reiter - sonst waere der Bogen auf die Panelhoehe eingesperrt. */
.mtv-tabapp.mtv-tabapp-full{ position:fixed; inset:0; z-index:9200; }

/* ===== Unterschriftsfelder (jSignature) im Formular =====
   Zentral seit 2026-09-02 (Einladung zur Sitzung). Drei Bloecke nebeneinander,
   unter 760px untereinander. In .mtv-sig-pad zeichnet jSignature seine Flaeche;
   gespeichert wird base30 - das Format, das fct_pdf_get_sign_pic zum Drucken
   erwartet. Nicht pro App nachbauen (Protokoll und Korrespondenz folgen). */
/* Die Zeichenflaeche ist fest 500x200 - auf jedem Geraet gleich (Stefan Kredt
   07.09.2026, gesetzt in fct_sys_sig_js). Das ist keine Geschmacksfrage: die
   gezeichneten Punkte gehen unveraendert ins PDF, und fct_pdf_get_sign_pic baut
   ein Bild von 520x220 mit dem Unterschriftsstrich bei 73 Prozent der Hoehe.
   Nur bei gleicher Flaeche sitzt die Unterschrift spaeter auch auf dem Strich.
   Feld und Block muessen deshalb dieselbe Groesse haben wie das Canvas. Passt
   der Block nicht auf den Schirm, scrollt nur er waagerecht. */
.mtv-sig-grid{ display:flex; gap:12px; flex-wrap:wrap; }
/* Pad passt sich der Blockbreite an - vorher 500px in 498px Innenbreite = waagerechter Scrollbalken (Stefan 17.09.2026) */
.mtv-sig-block{ flex:0 1 520px; max-width:520px; min-width:0; overflow:hidden; background:#ffffff; border:1px solid var(--mtv-kieselgrau); border-radius:6px; padding:10px; box-sizing:border-box; }
.mtv-sig-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-weight:700; color:var(--mtv-schwarzerde); }
.mtv-sig-pad{ width:100%; max-width:500px; height:200px; background:var(--mtv-lilienweiss); border:1px dashed var(--mtv-kieselgrau); border-radius:4px; }
.mtv-sig-meta{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.mtv-sig-zeit{ font-size:11px; font-weight:600; color:var(--mtv-kieselgrau); min-height:14px; }
.mtv-sig-foot{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.mtv-sig-block.mtv-sig-aus .mtv-sig-pad,
.mtv-sig-block.mtv-sig-aus .mtv-sig-meta,
.mtv-sig-block.mtv-sig-aus .mtv-sig-foot{ display:none; }
/* Erst wenn nicht einmal mehr ein Block nebeneinander passt (unter 520px), nimmt
   er die volle Breite. Darueber bleibt er bei 520 - sonst wird die Box breiter
   als das Unterschriftsfeld darin (Stefan Kredt 07.09.2026). */
@media (max-width:520px){
    .mtv-sig-block{ flex:0 1 100%; max-width:100%; }
}

/* === Listen-Apps: zentrale Ergaenzungen (07.09.2026, Stefan: alles, was alle
   brauchen, gehoert hierher - keine App-CSS fuer Tabelle/Modal-Hinweis mehr) === */
/* Scroll-Container um eine .mtv-tbl: Kopf bleibt sticky, Rest scrollt */
.mtv-tbl-scroll{ max-height:calc(100vh - 230px); overflow:auto; background:#fff; border:1px solid #a19e92; border-radius:6px; }
.mtv-tbl th.mtv-center{ text-align:center; }
.mtv-tbl td.mtv-nowrap,
.mtv-tbl th.mtv-nowrap{ white-space:nowrap; }
.mtv-tbl td.mtv-strong{ font-weight:700; }
/* Leerzeile in einer Tabelle (kompakter als der grosse Leer-Zustand) */
.mtv-tbl td.mtv-empty{ padding:22px 12px; font-style:italic; color:#a19e92; }
/* Paging-Footer, der beim Scrollen der Seite unten haften bleibt */
.mtv-paging-sticky{ position:sticky; bottom:0; z-index:5; margin-top:12px; border-radius:6px; }
/* Mittlere Gruppe im App-Kopf (Filter, Speichern, ...): zwischen Titel und Aktionen */
.mtv-app-mid{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mtv-app-mid label{ font-weight:600; white-space:nowrap; }
/* Feldhinweis unter einem Modal-Feld */
.mtv-modal-hint{ color:#a19e92; font-size:11px; margin-top:4px; }
/* Breiteres Modal fuer Formulare mit Textfeld */
.mtv-modal-wide{ max-width:640px; }
/* Kurzes Eingabefeld (Zahl, Reihenfolge) */
.mtv-input-sm{ max-width:120px; }
@media (max-width:760px){
    .mtv-tbl-scroll{ max-height:none; }
    .mtv-app-mid{ width:100%; }
}

/* ===== Schrittleiste mit Phasen (Fortschritt einer Akte, z. B. Sitzung): Linie mit Punkten,
   Name darunter, Phasen als beschriftete Gruppen. Zustaende: -done (gruen, Haken),
   -cur (naechster offener Schritt, gefuellt), -lock (uebersprungen). Quelle: app_meeting_edit 17.09.2026 */
.mtv-steps{ display:flex; gap:14px; flex-wrap:wrap; align-items:stretch; }
.mtv-steps-phase{ display:flex; flex-direction:column; background:#f7f6f4; border-radius:8px; padding:6px 10px 4px; min-width:0; }
.mtv-steps-phase-lbl{ font-family:var(--mtv-font); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#a19e92; margin:0 0 4px 2px; }
.mtv-steps-row{ display:flex; align-items:flex-start; position:relative; }
.mtv-steps-row::before{ content:""; position:absolute; left:14px; right:14px; top:13px; height:2px; background:#a19e92; opacity:.5; }
.mtv-steps-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:76px; padding:0 4px; background:none; border:none; cursor:pointer; font-family:var(--mtv-font); color:#493a30; }
.mtv-steps-dot{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid #a19e92; color:#493a30; font-size:11px; font-weight:700; }
.mtv-steps-name{ font-size:11px; font-weight:600; line-height:1.15; text-align:center; white-space:nowrap; }
.mtv-steps-item:hover .mtv-steps-dot{ border-color:#0074be; color:#0074be; }
.mtv-steps-done .mtv-steps-dot{ background:#0a651f; border-color:#0a651f; color:#fff; }
/* naechster offener Schritt: Narzissengelb, nicht gruen - gruen heisst erledigt (Stefan 17.09.2026) */
.mtv-steps-cur .mtv-steps-dot{ background:#ffd600; border-color:#ffd600; color:#493a30; width:30px; height:30px; margin-top:-2px; box-shadow:0 0 0 3px rgba(255,214,0,.35); }
.mtv-steps-cur .mtv-steps-name{ font-weight:700; }
.mtv-steps-lock{ opacity:.45; cursor:default; }
.mtv-steps-lock .mtv-steps-dot{ border-style:dashed; }
@media (max-width:760px){ .mtv-steps{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; } .mtv-steps-phase{ flex:0 0 auto; } }

/* ===== Auswahlkarten in einem Modal (SweetAlert html): gleichwertige Wege nebeneinander,
   je Karte Listen „Moeglich" / „Nicht moeglich". Quelle: app_meeting_tagesordnung 17.09.2026 */
.mtv-choice-intro{ font-size:12px; color:#493a30; margin:0 0 12px; text-align:left; }
.mtv-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; }
.mtv-choice-card{ border:1px solid #a19e92; border-radius:8px; padding:10px 12px; background:#fff; }
.mtv-choice-head{ font-size:14px; font-weight:700; color:#493a30; border-bottom:2px solid #85bb22; padding-bottom:6px; margin-bottom:8px; }
.mtv-choice-lbl{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin:6px 0 2px; }
.mtv-choice-ok .mtv-choice-lbl{ color:#0a651f; }
.mtv-choice-no .mtv-choice-lbl{ color:#d40829; }
.mtv-choice-card ul{ margin:0 0 4px; padding-left:18px; font-size:12px; line-height:1.45; color:#493a30; }
@media (max-width:760px){ .mtv-choice-grid{ grid-template-columns:1fr; } }

/* ===== „Jetzt"-Zeile: ein Satz, der sagt, was in diesem Zustand zu tun ist (unter einer
   Stufenleiste oder oben in einem Reiter). Quelle: app_meeting_stimmkarten 17.09.2026 */
.mtv-jetzt{ display:flex; align-items:center; gap:10px; border-left:4px solid #85bb22; background:#f7f6f4; padding:10px 14px; margin:0 0 12px; font-size:14px; font-weight:600; color:#493a30; border-radius:0 8px 8px 0; }
.mtv-jetzt i{ color:#0a651f; flex:0 0 auto; }

/* ===== Drop-Zone fuer Datei-Auswahl (mtvDrop, js/mtv_drop.js): ueberall statt nacktem
   "Datei auswaehlen"-Knopf (Stefan 17.09.2026). Das input bleibt versteckt bestehen. */
.mtv-drop{ border:2px dashed #a19e92; border-radius:8px; padding:14px; text-align:center; cursor:pointer; background:#f7f6f4; color:#493a30; font-family:var(--mtv-font); font-size:12px; flex:1 1 auto; min-width:0; }
.mtv-drop-ic{ font-size:22px; color:#0074be; display:block; margin-bottom:4px; }
.mtv-drop-txt{ font-weight:600; }
.mtv-drop-files{ margin-top:4px; font-size:11px; color:#0a651f; word-break:break-word; }
.mtv-drop-over{ border-color:#85bb22; background:#ffffff; }
.mtv-drop-voll{ border-style:solid; border-color:#0a651f; }
.mtv-drop:focus{ outline:2px solid #0074be; outline-offset:2px; }