/* Codex: Grundlayout als kompakte, helle Verwaltungsoberfläche. */
:root {
    --mav-viewport-height: 100vh;
    --mav-header-height: 4rem;
    --mav-footer-height: 2.25rem;
    --mav-shadow: 0 1px 4px rgb(20 27 31 / 10%);
    /* Codex: Semantische Tabulator-Grundfarben folgen Quarks hellem und dunklem Farbschema. */
    --mav-tab-surface: var(--q2-bg-elev);
    --mav-tab-header-bg: var(--q2-bg-muted);
    --mav-tab-grid: var(--q2-border-strong);
    --mav-tab-grid-subtle: var(--q2-divider);
    --mav-tab-text: var(--q2-text);
    --mav-tab-text-muted: var(--q2-text-muted);
    --mav-tab-link: var(--q2-link);
    --mav-tab-selection: color-mix(in srgb, var(--q2-accent) 42%, var(--q2-bg-elev));
    /* Codex: Neutrale Battery-Bar-Flächen folgen Quarks hellem und dunklem Farbschema. */
    --mav-battery-surface: var(--q2-bg-elev);
    --mav-battery-border: var(--q2-border-strong);
    --mav-battery-text: var(--q2-text);
    --mav-battery-empty: var(--q2-bg-muted);
    /* Codex: Fachliche Batterybar-Farben zentral und schemaabhängig bereitstellen. */
    --mav-battery-ok: #66a266;
    --mav-battery-warn: #ffb347;
    --mav-battery-alert: #ff0000;
    --mav-battery-alert-flash: color-mix(in srgb, var(--mav-battery-alert) 55%, #ff8a80);
    --mav-battery-day-width: 7px;
    --mav-battery-day-gap: 2px;
    /* Codex: Gemeinsame Hinweisfarbe für Filter und Sonderkennungszeilen. */
    --mav-table-notice-bg: #fff1c9;
    --mav-table-notice-text: var(--q2-text);
    --mav-table-notice-border: color-mix(in srgb, var(--q2-accent) 45%, var(--q2-border-strong));
    /* Codex: Stellt Leaflets frühere Desktop-Grundschrift von 15px unabhängig von Quarks Root-Schrift wieder her. */
    --mav-map-ui-font-size: 1rem;
}

@supports (height: 100dvh) {
    /* Codex: Mobile Browserleisten werden bei der verfügbaren Anwendungshöhe berücksichtigt. */
    :root {
        --mav-viewport-height: 100dvh;
    }
}

/* Codex: Die fachliche Hinweisfarbe bleibt im Darkmode als gedecktes Gold kontrastreich. */
:root[data-theme="dark"] {
    /* Codex: Batterybar-Zustände bleiben im Darkmode satt, aber nicht grell. */
    --mav-battery-ok: #166a16;
    --mav-battery-warn: #ffb347;
    --mav-battery-alert: #a00;
    --mav-table-notice-bg: #4e3d00;
    --mav-table-notice-text: #fff1bd;
    --mav-table-notice-border: #9d7c00;
}

/* Codex: Die Tabulator-Struktur hebt sich im Hellmodus etwas klarer von der Datenfläche ab. */
:root[data-theme="light"] {
    --mav-tab-header-bg: color-mix(in srgb, var(--q2-text) 7%, var(--q2-bg-muted));
    --mav-tab-grid: color-mix(in srgb, var(--q2-text) 18%, transparent);
    --mav-tab-grid-subtle: var(--q2-border-strong);
}

html {
    background: var(--q2-bg);
}

body.mav-v2 {
    min-width: 20rem;
    min-height: var(--mav-viewport-height);
    margin: 0;
    color: var(--q2-text);
    background: var(--q2-bg);
}

body.mav-v2 #page-wrapper {
    min-height: calc(var(--mav-viewport-height) - var(--mav-footer-height));
}

/* Codex: Fixierter Kopf mit Marke, Seitentitel, Navigation und Nutzerbereich. */
#header.mav-header {
    position: fixed;
    z-index: 1100;
    inset: 0 0 auto;
    height: var(--mav-header-height);
    border-bottom: 1px solid var(--q2-border-strong);
    background: color-mix(in srgb, var(--q2-bg-elev) 96%, transparent);
    box-shadow: var(--mav-shadow);
    backdrop-filter: blur(10px);
}

.mav-header__inner {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
}

.mav-brand {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
}

.mav-brand__logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: stretch;
    padding: 0.35rem 0;
    border-radius: 0.25rem;
}

.mav-brand__logo img {
    display: block;
    width: auto;
    height: 3.25rem;
}

/* Codex: Das invertierte Markenlogo wird ausschließlich in Quarks Darkmode angezeigt. */
.mav-brand__logo .mav-brand__logo--dark {
    display: none;
}

:root[data-theme="dark"] .mav-brand__logo .mav-brand__logo--light {
    display: none;
}

:root[data-theme="dark"] .mav-brand__logo .mav-brand__logo--dark {
    display: block;
}

.mav-brand__divider {
    width: 1px;
    height: 2rem;
    margin: 0 0.85rem;
    background: var(--q2-border-strong);
}

.mav-page-title {
    overflow: hidden;
    margin: 0;
    color: var(--q2-text);
    font-family: var(--pico-font-family-sans-serif);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mav-page-title__application {
    font-weight: 600;
}

.mav-page-title__current {
    font-weight: 650;
}

.mav-header__controls,
.mav-primary-navigation,
.mav-primary-navigation ul,
.mav-user {
    display: flex;
    align-items: stretch;
}

.mav-header__controls {
    flex: 0 0 auto;
}

.mav-primary-navigation ul {
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mav-primary-navigation li {
    display: flex;
    margin: 0;
}

.mav-primary-navigation a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 0.85rem;
    color: var(--q2-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.mav-primary-navigation a::after {
    position: absolute;
    right: 0.85rem;
    bottom: 0;
    left: 0.85rem;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    content: '';
}

.mav-primary-navigation a:hover,
.mav-primary-navigation a:focus-visible,
.mav-primary-navigation a.active {
    color: var(--q2-link);
}

.mav-primary-navigation a.active::after {
    background: var(--q2-accent);
}

.mav-primary-navigation a:focus-visible,
.mav-brand__logo:focus-visible,
.mav-user a:focus-visible,
.mav-menu-toggle:focus-visible,
.mav-footer button:focus-visible,
.mav-theme-toggle:focus-visible {
    outline: 3px solid var(--q2-focus-ring);
    outline-offset: -3px;
}

.mav-user {
    align-items: center;
    margin-left: 0.75rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--q2-border-strong);
    color: var(--q2-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.mav-user :is(strong, a) {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
}

.mav-user strong {
    color: var(--q2-text);
    font-weight: 600;
}

.mav-user .logout {
    color: var(--q2-link);
    gap: 0.25rem;
    text-decoration: none;
}

/* Codex: Das Logout-Icon übernimmt über currentColor die konfigurierbare Linkfarbe. */
.mav-user .logout::after {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    content: '';
    mask: url('../images/icons/logout.svg') center / contain no-repeat;
    -webkit-mask: url('../images/icons/logout.svg') center / contain no-repeat;
}

.mav-menu-toggle {
    display: none;
}

/* Codex: Inhaltsfläche nutzt die verfügbare Höhe; Fachansichten kontrollieren ihr eigenes Scrolling. */
.mav-main {
    box-sizing: border-box;
    padding-top: var(--mav-header-height);
}

#body-wrapper.mav-content {
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--mav-viewport-height) - var(--mav-header-height) - var(--mav-footer-height));
    min-height: 28rem;
    padding: 0.75rem 1rem;
}
.mav-template-map #body-wrapper.mav-content {
    padding: 0;
}

#body-wrapper.mav-content > h4:first-child {
    display: none;
}

.mav-default-content {
    max-width: 76rem;
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.5rem;
    background: var(--q2-bg-elev);
    box-shadow: var(--mav-shadow);
}

/* Codex: Die SG-Ansichtsauswahl bleibt als sichtbare zweite Navigationsebene bestehen. */
.mav-v2 .toggle-group-wrapper {
    align-items: center;
    min-height: 2.5rem;
    margin-bottom: 0.65rem;
    padding: 0.25rem;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.5rem;
    background: var(--q2-bg-elev);
    box-shadow: 0 1px 2px rgb(20 27 31 / 6%);
}

.mav-v2 .btn-group.toggle-group {
    border-color: var(--q2-border-strong);
    border-radius: 0;
    background: var(--q2-bg-muted);
}

.mav-v2 .btn-toggle,
.mav-v2 .btn-new,
.mav-v2 .btn-print {
    min-height: 2rem;
    margin: 0;
    padding: 0.35rem 1.7rem;
    border-radius: 0;
    color: var(--q2-text);
    font-size: 0.82rem;
    line-height: 1.2;
}

.mav-v2 .btn-toggle.active,
.mav-v2 .btn-new.active,
.mav-v2 .btn-print.active {
    color: var(--q2-accent-contrast);
    background: var(--q2-accent);
}

/* Codex: Die SG-Spaltenansicht ist als lokales Werkzeug unmittelbar an die Tabelle angedockt. */
.mav-v2 :is(.sg-table-shell, .lsa-table-shell) {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin-inline: auto;
    min-width: 0;
}

/* Codex: Ohne sichtbare Werkzeugleiste braucht die SG-Hülle während des Ladens eine eigene Spinner-Mindestbreite. */
.mav-v2 .sg-table-shell.is-loading {
    min-width: 20rem;
}

/* Codex: Die Tabelle nutzt unter der Werkzeugleiste die verbleibende verfügbare Höhe als Scrollbereich. */
.mav-v2 :is(.sg-table-shell, .lsa-table-shell) .table-wrapper {
    flex: 1 1 auto;
    width: auto;
    min-height: 0;
    max-width: 100%;
    max-height: none;
    align-items: flex-start;
    justify-content: flex-start;
}

.mav-v2 .sg-table-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 0;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--q2-border-strong);
    border-bottom: 0;
    border-radius: 0;
    background: var(--q2-bg-elev);
}

/* Codex: Reserviert die endgültige Toolbar-Höhe, während ihre Werkzeuge beim Tabellenaufbau verborgen bleiben. */
.mav-v2 .sg-table-toolbar.is-pending {
    visibility: hidden;
    pointer-events: none;
}

/* Codex: Der LSA-Filterhinweis ist bei Bedarf bündig an die Tabelle angedockt. */
.mav-v2 .lsa-table-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--q2-border-strong);
    border-bottom: 0;
    border-radius: 0;
    background: var(--q2-bg-elev);
}

/* Codex: Der Hinweis orientiert sich auch auf der LSA-Seite am rechten Tabellenrand. */
.mav-v2 .lsa-table-toolbar .filterwarncontainer {
    display: flex;
    justify-content: flex-end;
}

.mav-v2 .sg-view-switcher {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 0.5rem;
    min-width: 0;
    height: 2.4rem;
}

.mav-v2 .sg-view-label {
    display: none;
    color: var(--q2-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.mav-v2 .sg-view-segments {
    display: inline-flex;
    align-self: center;
    flex-wrap: nowrap;
    margin-block-end: 0;
    margin-bottom: 0;
    border: 1px solid var(--mav-tab-grid-subtle);
    border-radius: 0;
    background: var(--q2-bg-muted);
    overflow: hidden;
    white-space: nowrap;
}

/* Codex: Pico zeichnet bei role="group" sonst einen Fokusrahmen um die vollständige Segmentgruppe. */
.mav-v2 .sg-view-segments:focus-within {
    --pico-group-box-shadow: 0 0 0 transparent;
    box-shadow: none;
}

/* Codex: Die SG-Ansichtsschalter sind vollständig vom generischen Plugin-Schalterstil entkoppelt. */
.mav-v2 .sg-view-toggle {
    min-height: 2rem;
    margin: 0;
    margin-block: 0;
    padding: 0.35rem 1.7rem;
    border: 0;
    border-right: 1px solid var(--mav-tab-grid-subtle);
    border-radius: 0;
    color: var(--q2-text);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mav-v2 .sg-view-toggle:last-child {
    border-right: 0;
}

.mav-v2 .sg-view-toggle:hover {
    background-color: color-mix(in srgb, var(--q2-accent) 10%, var(--q2-bg-muted));
}

.mav-v2 .sg-view-toggle.active {
    color: var(--q2-accent-contrast);
    background-color: var(--q2-accent);
}

/* Codex: Mausklicks übernehmen keinen generischen Pico-Fokus-Schatten auf der Segmentgruppe. */
.mav-v2 .sg-view-toggle:focus {
    box-shadow: none;
}

.mav-v2 .sg-view-toggle:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: -2px;
}

.mav-v2 .sg-view-select {
    display: none;
    width: auto;
    min-width: 8rem;
    min-height: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0.25rem 1.8rem 0.25rem 0.55rem;
    border-color: var(--q2-border-strong);
    color: var(--q2-text);
    background-color: var(--q2-bg-elev);
    font-size: 0.82rem;
    line-height: 1.2;
}

.mav-v2 .sg-table-toolbar .filterwarncontainer {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    padding: 0;
}

body.mav-v2 .sg-table-shell .sg-table-toolbar #filterwarn {
    margin: 0;
    padding: 0.3rem 0.55rem;
    border-color: var(--mav-table-notice-border);
    color: var(--mav-table-notice-text);
    background-color: var(--mav-table-notice-bg);
    line-height: 1.25;
}

/* Codex: Der LSA-Hinweis verwendet dieselbe konfigurierbare Filterdarstellung wie die SG-Tabelle. */
body.mav-v2 .lsa-table-shell .lsa-table-toolbar #filterwarn {
    margin: 0;
    padding: 0.3rem 0.55rem;
    border-color: var(--mav-table-notice-border);
    border-radius: 0;
    background: var(--mav-table-notice-bg);
    color: var(--mav-table-notice-text);
    line-height: 1.25;
}

/* Codex: Der Filterhinweis und aktive Felder im Tabellenkopf verwenden dieselbe konfigurierbare Farbe. */
.mav-v2 .tabulator .tabulator-header-filter .mav-header-filter-active {
    border-color: var(--mav-table-notice-border);
    background-color: var(--mav-table-notice-bg);
    color: var(--mav-table-notice-text);
}

/* Codex: Sonderkennungszeilen folgen derselben fachlichen Hinweisfarbe wie aktive Filter. */
.mav-v2 .tabulator-row.mav-table-notice-row {
    background-color: var(--mav-table-notice-bg) !important;
    color: var(--mav-table-notice-text);
}

.mav-v2 .tabulator-row.mav-table-notice-row > .tabulator-cell {
    background-color: var(--mav-table-notice-bg) !important;
}

/* Codex: Der Add-Schalter im Kopf der Löschspalte bleibt innerhalb der schmalen Tabulatorspalte bedienbar. */
.mav-v2 .tabulator .tabulator-header-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    color: var(--q2-accent-contrast);
    background: var(--q2-accent);
    box-shadow: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

/* Codex: Der Add-Schalter wird innerhalb seines schmalen Tabulator-Kopfs horizontal ausgerichtet. */
.mav-v2 .tabulator .tabulator-header-add-container {
    display: flex;
    justify-content: center;
}

.mav-v2 .tabulator .tabulator-header-add:hover {
    background: var(--q2-link);
}

.mav-v2 .tabulator .tabulator-header-add:focus-visible {
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: 1px;
}

/* Codex: Überschreibt Tabulators statische Grundfarben mit dem Quark2-Farbsystem. */
.mav-v2 .tabulator {
    border-color: var(--mav-tab-grid);
    background-color: var(--mav-tab-surface);
    color: var(--mav-tab-text);
}

/* Codex: Tabellenaußenkante und Headergrenze bleiben als Strukturmarken deutlich. */
.mav-v2 .tabulator .tabulator-header {
    border-color: var(--mav-tab-grid);
    background-color: var(--mav-tab-header-bg);
    color: var(--mav-tab-text);
}

/* Codex: Zell- und Spaltengitter bleiben im Darkmode als zurückhaltende Unterteilung lesbar. */
.mav-v2 .tabulator .tabulator-header .tabulator-col {
    border-color: var(--mav-tab-grid-subtle);
    background-color: var(--mav-tab-header-bg);
    color: var(--mav-tab-text);
}

/* Codex: Inaktive Sortierindikatoren verwenden Quarks zurückhaltende Trennfarbe. */
.mav-v2 .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-sorter {
    color: var(--q2-divider);
}

.mav-v2 .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: var(--q2-divider);
}

.mav-v2 .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter,
.mav-v2 .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter {
    color: var(--mav-tab-text);
}

.mav-v2 .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: var(--mav-tab-text);
}

.mav-v2 .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-top-color: var(--mav-tab-text);
}

.mav-v2 .tabulator-row {
    background-color: var(--mav-tab-surface);
    color: var(--mav-tab-text);
}

.mav-v2 .tabulator-row.tabulator-row-even,
.mav-v2 .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row,
.mav-v2 .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
    background-color: var(--q2-bg-muted) !important;
}

.mav-v2 .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs {
    background-color: var(--mav-tab-header-bg) !important;
}

.mav-v2 .tabulator-row .tabulator-cell,
.mav-v2 .tabulator-row .tabulator-cell.tabulator-row-header {
    border-color: var(--mav-tab-grid-subtle);
}

.mav-v2 .tabulator-row.tabulator-selected,
.mav-v2 .tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header) {
    background-color: var(--mav-tab-selection);
}

@media (hover: hover) and (pointer: fine) {
    body.mav-v2 .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
        background-color: color-mix(in srgb, var(--q2-text) 8%, var(--mav-tab-header-bg));
    }

    body.mav-v2 .tabulator .tabulator-row.tabulator-selectable:hover,
    body.mav-v2 .tabulator .tabulator-row.tabulator-selected:hover {
        background-color: color-mix(in srgb, var(--q2-accent) 22%, var(--mav-tab-surface)) !important;
    }
}

/* Codex: Tooltips und Auswahllisten können außerhalb der Tabelle angehängt werden. */
body.mav-v2 :is(.tabulator-popup-container, .tabulator-edit-list) {
    border-color: var(--mav-tab-grid);
    background-color: var(--mav-tab-surface);
    color: var(--mav-tab-text);
    box-shadow: var(--q2-shadow-dropdown);
}

body.mav-v2 .tabulator-tooltip {
    color: var(--mav-tab-text);
    background-color: var(--mav-tab-header-bg);
}

/* Codex: Ersetzt für ausgewählte Tabellen-Icons die nicht thembare Browser-Title-Blase. */
body.mav-v2 .mav-native-tooltip {
    position: fixed;
    z-index: 12000;
    max-width: min(24rem, calc(100vw - 1rem));
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--mav-tab-grid);
    border-radius: var(--q2-radius-xs);
    background: var(--q2-bg-elev);
    color: var(--q2-text);
    box-shadow: var(--q2-shadow-dropdown);
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: pre-line;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

body.mav-v2 .mav-native-tooltip[data-placement="below"] {
    transform: translate(-50%, 0);
}

body.mav-v2 .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover,
body.mav-v2 .tabulator-edit-list .tabulator-edit-list-item:hover,
body.mav-v2 .tabulator-edit-list .tabulator-edit-list-item.active {
    color: var(--q2-accent-contrast);
    background-color: var(--q2-accent);
}

body.mav-v2 .tabulator-edit-list :is(.tabulator-edit-list-item, .tabulator-edit-list-placeholder, .tabulator-edit-list-group) {
    color: var(--mav-tab-text);
}

body.mav-v2 .tabulator-edit-list .tabulator-edit-list-group,
body.mav-v2 .tabulator-menu .tabulator-menu-separator {
    border-color: var(--mav-tab-grid);
}

/* Codex: Tabulator-interne Links bleiben in beiden Farbschemata lesbar. */
.mav-v2 .tabulator :is(.tabulator-cell.link a, .formatter_lsaKomNrEdit_linkIcon a, .sgsLink, .multiLineLink) {
    color: var(--mav-tab-link);
}

.mav-v2 .tabulator :is(.tabulator-cell.link a, .formatter_lsaKomNrEdit_linkIcon a, .sgsLink, .multiLineLink):hover {
    color: var(--q2-text-strong);
}

/* Codex: Das Zuordnungs-Icon verwendet denselben Kontrastfilter wie das Dokumenten-Icon. */
.mav-v2 .tabulator-cell .formatter_assignedSgsField .sgsAssignLinkImg {
    filter: contrast(50%) brightness(200%);
}

/* Codex: Der Standortmarker ohne Geodaten wirkt im Darkmode weniger grell. */
:root[data-theme="dark"] .mav-v2 .mapIconLinkImg[data-mav-marker-state="ohne_standort"] {
    filter: brightness(0.35);
}

.mav-v2 .table-wrapper {
    position: relative;
    min-height: 14rem;
    max-height: calc(100% - 3.2rem);
}

/* Codex: Tabulator-Headerfilter vom großflächigen Quark-Formularstil entkoppeln. */
.mav-v2 .tabulator .tabulator-header-filter :is(input, select, textarea) {
    box-sizing: border-box;
    min-height: 0;
    height: 1.75rem;
    margin: 0;
    padding: 0.2rem 0.35rem;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.2;
}

/* Codex: Tabulator-Textfilter bleiben frei von globalen Suchfeld-Dekorationen. */
.mav-v2 .tabulator .tabulator-header-filter input {
    -webkit-appearance: none;
    background-image: none;
}

.mav-v2 .tabulator .tabulator-header-filter input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* Codex: Editor-Auswahlfelder und TickCross-Schalter behalten Tabulators kompakte Zellmaße. */
.mav-v2 .tabulator :is(select, input[type="checkbox"], input[type="radio"]) {
    width: auto;
    min-height: 0;
    margin: 0;
    color: var(--mav-tab-text);
    background-color: var(--mav-tab-surface);
    border-color: var(--mav-tab-grid);
    box-shadow: none;
    accent-color: var(--q2-accent);
}

.mav-v2 .tabulator select {
    width: 100%;
    height: 100%;
    padding: 0.1rem 0.25rem;
}

.mav-v2 .tabulator :is(select, input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: 1px;
}

/* Codex: Direkt schaltbare TickCross-Zellen kennzeichnen ihre Interaktion ohne Editiermodus. */
.mav-v2 .tabulator-cell.mav-tickcross-toggle {
    cursor: grab;
}

/* Codex: Neutrale Akku-Balkenflächen und Beschriftungen bleiben im Darkmode lesbar. */
body.mav-v2 .tabulator .battery-bar-container,
body.mav-v2 .map_popup_battery_linewrap .battery-bar-container,
body.mav-v2 .tabulator .batterydays-bar-container {
    background-color: var(--mav-battery-surface);
    border-color: var(--mav-battery-border);
     /*border: none;*/
}
:root[data-theme="dark"] body.mav-v2 .tabulator .batterydays-bar-container {
    border: none;
   /* background: none;*/
}
body.mav-v2 .tabulator .batterydays-bar-fill-dayswrap .batterydays-bar-fill-day.afterday {
    background-color: var(--mav-battery-empty);
}

body.mav-v2 :is(.battery-bar-nodata, .batterydays-bar-nodata) {
    color: var(--mav-battery-text);
    text-shadow: 0 1px 1px color-mix(in srgb, var(--q2-bg) 65%, transparent);
}

body.mav-v2 :is(.battery-bar-label, .battery-bar-label_days, .battery-bar-label_volt, .batterydays-bar-fill-day-we) {
    color: var(--mav-battery-text);
    text-shadow: 0 1px 1px color-mix(in srgb, var(--q2-bg) 65%, transparent);
}

/* Codex: Der OK-Ladezustand bleibt im Darkmode satt, aber nicht grell. */
:root[data-theme="dark"] .mav-v2 .tabulator .battery-bar-fill[state="ok"] {
    background-color: var(--mav-battery-ok);
    filter: brightness(0.8) saturate(1);
}

/* Codex: Der Warning-Ladezustand bleibt im Darkmode gut unterscheidbar. */
:root[data-theme="dark"] .mav-v2 .tabulator .battery-bar-fill[state="warn"] {
    background-color: var(--mav-battery-warn);
    filter: brightness(0.7) saturate(1);
}

/* Codex: Der Alert-Ladezustand bleibt im Darkmode sichtbar, ohne die Tabelle zu überstrahlen. */
:root[data-theme="dark"] .mav-v2 .tabulator .battery-bar-fill[state="alert"] {
    background-color: var(--mav-battery-alert);
    filter: brightness(0.8) saturate(1);
}

/* Codex: Leaflet-Popups nutzen im Darkmode dieselben gedämpften Akku-Zustände wie die Tabellen. */
:root[data-theme="dark"] .mav-v2 .map_popup_battery_linewrap .battery-bar-fill[state="ok"] {
    background-color: var(--mav-battery-ok);
    filter: brightness(1) saturate(1);
}

:root[data-theme="dark"] .mav-v2 .map_popup_battery_linewrap .battery-bar-fill[state="warn"] {
    background-color: var(--mav-battery-warn);
    filter: brightness(0.7) saturate(1);
}

:root[data-theme="dark"] .mav-v2 .map_popup_battery_linewrap .battery-bar-fill[state="alert"] {
    background-color: var(--mav-battery-alert);
    filter: brightness(0.9) saturate(1);
}

/* Codex: Resttage- und Einzelbalken verwenden im Darkmode dieselbe Rahmenstufe. */
:root[data-theme="dark"] .mav-v2 #map .batterydays-bar-container {
    border-color: var(--mav-battery-border);
}

/* Codex: Ein dunkler, einzelner Schatten trennt das Status-Icon ohne helle Kontur ab. */
:root[data-theme="dark"] .mav-v2 #map .battery-bar-commonstate-icon {
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 70%));
}

/* Codex: Nicht belegte Tagessegmente blenden im Darkmode nicht mehr weiß auf. */
:root[data-theme="dark"] .mav-v2 #map .batterydays-bar-fill-day.afterday {
    filter: brightness(0.25);
}

/* Codex: Unvollständig überwachte LSA bleiben im Darkmode erkennbar, aber weniger stark gedimmt. */
:root[data-theme="dark"] .mav-v2 .batterydays-bar-container.invalideData .batterydays-bar-fill-dayswrap {
    /*filter: opacity(80%) brightness(1) grayscale(20%);*/
}

/* Codex: Der Flash einer kritischen Restlaufzeit bleibt im Darkmode klar rot und kontrastreich. */
:root[data-theme="dark"] .mav-v2 .batterydays-bar-fill-day.bgalertblink {
    animation-name: mav-bgalertblink-dark;
}

@keyframes mav-bgalertblink-dark {
    0%,
    75%,
    100% {
        background-color: var(--mav-battery-alert);
    }

    88% {
        background-color: var(--mav-battery-alert-flash);
        filter: brightness(1.1) saturate(1.25);
    }
}

/* Codex: Feste Tagessegmente verhindern sichtbare Subpixel-Verteilung in der LSA-Tabelle. */
body.mav-v2 .tabulator .batterydays-bar-container,
body.mav-v2 .tabulator .batterydays-bar-fill-dayswrap {
    width: max-content;
}

body.mav-v2 .tabulator .batterydays-bar-container {
    display: inline-block;
}

body.mav-v2 .tabulator .batterydays-bar-fill-dayswrap {
    column-gap: var(--mav-battery-day-gap);
}

body.mav-v2 .tabulator .batterydays-bar-fill-dayswrap > .batterydays-bar-fill-day {
    flex: 0 0 var(--mav-battery-day-width);
    width: var(--mav-battery-day-width);
}

/* Codex: Übernimmt Tabulators flächenbündigen Editiermodus und neutralisiert nur die kollidierenden Quark-Formularmaße. */
.mav-v2 .tabulator-row .tabulator-cell.tabulator-editing {
    padding: 0;
    border-color: var(--q2-link);
}

.mav-v2 .tabulator-row .tabulator-cell.tabulator-editing :is(input, select, textarea) {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Codex: Der fachliche Zeilenhinweis bleibt trotz Quark-Reduzierung sichtbar. */
.mav-v2 .tabulator-row.rowhighlighter {
    animation: mav-rowhighlight-flash 1.8s ease-in-out 1 !important;
}

@keyframes mav-rowhighlight-flash {
    0%,
    33.3%,
    66.6%,
    100% {
        background-color: transparent;
    }

    16.6%,
    50%,
    83.3% {
        background-color: color-mix(in srgb, var(--q2-accent) 42%, transparent);
    }
}

/* Codex: Ladespinner aus dem bisherigen Theme innerhalb beider Tabulator-Tabellen anzeigen. */
.mav-v2 #initrotorwrap {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    pointer-events: none;
}

.mav-v2 .sk-cube-grid {
    /* Codex: Ein festes Raster verhindert beim Skalieren sichtbare Überlappungen. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Codex: 78px ergeben exakt 26px je Cube. */
    width: 78px;
    height: 78px;
}

/* Codex: Übernimmt die frühere obere Spinner-Position, ohne globale Quark-Elemente zu beeinflussen. */
.mav-v2 #initrotorwrap .sk-cube-grid,
.mav-v2 #initrotorwrap .sk-cube-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mav-v2 .sk-cube-grid .sk-cube {
    float: none;
    width: auto;
    height: auto;
    background-color: var(--q2-border-strong);
    animation: mav-cube-grid-scale-delay 1.3s infinite ease-in-out;
}

/* Codex: Der Ladeindikator bleibt trotz der globalen Quark-Bewegungsreduktion animiert. */
@media (prefers-reduced-motion: reduce) {
    .mav-v2 #initrotorwrap .sk-cube-grid .sk-cube {
        animation-duration: 1.3s !important;
        animation-iteration-count: infinite !important;
    }

    /* Codex: Fachliche Batterie- und Warnhinweise bleiben auch bei Quarks globaler Bewegungsreduktion erkennbar. */
    .mav-v2 :is(
        .map_popup_wechseldatum.alertblink,
        .map_popup_resttage.alertblink,
        .tabulator-cell.bgalertmark,
        .batterydays-bar-fill-dayswrap .batterydays-bar-fill-day.bgalertblink
    ) {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }

    /* Codex: Quarks globale Bewegungsreduktion darf die fachlichen Kartenringe nicht anhalten. */
    .mav-v2 #map :is(.pulsingRing, .pulsingRingHighlight) {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }
}

.mav-v2 .sk-cube-grid .sk-cube1,
.mav-v2 .sk-cube-grid .sk-cube5,
.mav-v2 .sk-cube-grid .sk-cube9 {
    animation-delay: 0.2s;
}

.mav-v2 .sk-cube-grid .sk-cube2,
.mav-v2 .sk-cube-grid .sk-cube6 {
    animation-delay: 0.3s;
}

.mav-v2 .sk-cube-grid .sk-cube3 {
    animation-delay: 0.4s;
}

.mav-v2 .sk-cube-grid .sk-cube4,
.mav-v2 .sk-cube-grid .sk-cube8 {
    animation-delay: 0.1s;
}

.mav-v2 .sk-cube-grid .sk-cube7 {
    animation-delay: 0s;
}

.mav-v2 #initrotorwrap .sk-cube-text {
    margin-top: 6.25rem;
    color: var(--q2-text-muted);
}

/* Codex: Leaflet verwendet role="button" für Marker; Pico-Button-Chrome darf die Icons nicht verändern. */
.mav-v2 #map .leaflet-marker-icon {
    box-sizing: content-box;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Codex: Skaliert nur die fachliche Kartenoberfläche einschließlich Controls und Marker-Tooltips. */
.mav-v2 #map.leaflet-container {
    font-size: var(--mav-map-ui-font-size);
}

/* Codex: Testweise wird ausschließlich die BKG-Basiskarte im Darkmode gedreht. */
:root[data-theme="dark"] .mav-v2 #map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.9);
}

/* Codex: Markierungsringe bleiben im Darkmode fachlich unterscheidbar, aber optisch zurückhaltend. */
:root[data-theme="dark"] .mav-v2 #map :is(.pulsingRing, .pulsingRingHighlight) {
    filter: brightness(0.65) saturate(0.75);
}

/* Codex: Der Kartenbereich gibt dem Hinweis eine feste eigene Zeile statt ihn hinter der 100%-Karte zu verdrängen. */
.mav-v2 #map-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mav-v2 #map-wrapper #map {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

/* Codex: Stellt die vom Geocoder erwartete kompakte, rahmenlose Suchzeile gegen Pico-Formularvorgaben wieder her. */
.mav-v2 #map .leaflet-control-geocoder-form {
    margin: 0;
}

/* Codex: Das erweiterte Geocoder-Control fasst Such-Icon und Eingabefeld wieder zu einer Zeile zusammen. */
.mav-v2 #map .leaflet-control-geocoder.leaflet-control-geocoder-expanded {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 1.8rem;
}

.mav-v2 #map .leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

/* Codex: Geocoder-Treffer sind Geschwister des Formulars und belegen daher die nächste vollständige Control-Zeile. */
.mav-v2 #map .leaflet-control-geocoder-expanded .leaflet-control-geocoder-alternatives {
    flex: 0 0 100%;
    width: 100%;
}

/* Codex: Geocoder-Treffer behalten ihre zweizeilige Orts- und Kontextdarstellung statt Icon-Maße zu erben. */
.mav-v2 #map .leaflet-control-geocoder-alternatives li {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: 1.5;
}

.mav-v2 #map .leaflet-control-geocoder-alternatives li a {
    display: block;
    width: auto;
    height: auto;
    padding: 0.3125rem 0.5rem;
    color: inherit;
    background: inherit;
    line-height: inherit;
    text-align: left;
}

.mav-v2 #map .leaflet-control-geocoder-address-context {
    color: var(--q2-text-muted);
    font-size: 0.875em;
}

.mav-v2 #map .leaflet-control-geocoder-form input {
    box-sizing: border-box;
    width: 15.375rem;
    min-height: 0;
    height: 1.8rem;
    margin: 0;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0;
    color: var(--q2-text);
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    font: inherit;
    line-height: 1.3;
}

/* Codex: Der Fokus markiert die gemeinsame Suchzeile statt ein separates inneres Eingabefeld. */
.mav-v2 #map .leaflet-control-geocoder.leaflet-control-geocoder-expanded:focus-within {
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: -2px;
}

/* Codex: Leaflet-Controls bleiben kompakt und vom globalen Pico-Button-Stil entkoppelt. */
.mav-v2 #map .leaflet-bar {
    overflow: hidden;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.35rem;
    box-shadow: var(--mav-shadow);
}

.mav-v2 #map .leaflet-control > :is(a, button, [role="button"]) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--q2-text);
    background-color: var(--q2-bg-elev);
    box-shadow: none;
    font: inherit;
    text-decoration: none;
}

.mav-v2 #map .leaflet-bar > :is(a, button, [role="button"]) {
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
}

.mav-v2 #map .leaflet-control > :is(a, button, [role="button"]):hover {
    color: var(--q2-text-strong);
    background-color: var(--q2-bg-muted);
}

.mav-v2 #map .leaflet-control > :is(a, button, [role="button"]):focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: -2px;
}

/* Codex: Das Hervorhebungsmenü nutzt zentrale Theme-Farben statt fester Inline-Werte. */
.mav-v2 #map .custom-layer-panel {
    padding: 0.5em;
    overflow-y: auto;
    max-height: 18.75rem;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.5em;
    color: var(--q2-text);
    background: var(--q2-bg-elev);
    box-shadow: var(--mav-shadow);
    font-size: 0.8em;
}

.mav-v2 #map .custom-layer-control__title {
    margin-bottom: 0.5em;
    color: var(--q2-text-strong);
    font-weight: 700;
    text-align: center;
}

.mav-v2 #map .custom-layer-control__item {
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
}

.mav-v2 #map .custom-layer-control__item:hover {
    background-color: var(--q2-bg-muted);
}

.mav-v2 #map .custom-layer-control__item--reset {
    text-align: center;
}

/* Codex: Die Kartenquelle bleibt in beiden Farbschemata lesbar, aber visuell nachrangig. */
.mav-v2 #map .leaflet-control-attribution,
.mav-v2 #map .leaflet-control-attribution a {
    font-size: 0.7rem;
}

/* Codex: Der Touch-Popup bietet eine eindeutige, ausreichend große Aktion zur LSA-Tabelle. */
.mav-v2 #map .map_popup__open-lsa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    margin-top: 0.65rem;
    padding: 0.35rem 0.65rem;
    color: var(--q2-accent-contrast);
    background-color: var(--q2-accent);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.mav-v2 #map .map_popup__open-lsa:focus-visible {
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: 2px;
}

/* Codex: Das Touch-Detailpanel liegt als direktes Karten-Kind sicher oberhalb aller Leaflet-Controls. */
.mav-v2 #map .map-touch-details {
    position: absolute;
    z-index: 1200;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    box-sizing: border-box;
    width: min(20rem, calc(100% - 1.5rem));
    max-height: calc(100% - 1.5rem);
    margin-inline: auto;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.35rem;
    color: var(--q2-text);
    background-color: var(--q2-bg-elev);
    box-shadow: var(--mav-shadow);
}

.mav-v2 #map .map-touch-details[hidden] {
    display: none;
}

.mav-v2 #map .map-touch-details__close {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--q2-text-muted);
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
}

.mav-v2 #map .map-touch-details__content {
    padding-top: 1.25rem;
}

/* Codex: Der bestehende Popup-Inhaltsblock sitzt mittig im breiteren Touch-Panel. */
.mav-v2 #map .map-touch-details__content > .map_popup_wrapper {
    margin-inline: auto;
}

/* Codex: Datenquelle, Geocoder und Ergebnisliste integrieren sich im Darkmode in die Kartenoberfläche. */
:root[data-theme="dark"] .mav-v2 #map :is(
    .leaflet-control-attribution,
    .leaflet-control-geocoder,
    .leaflet-control-geocoder-alternatives
) {
    border-color: var(--q2-border-strong);
    color: var(--q2-text);
    background-color: var(--q2-bg-elev);
}

:root[data-theme="dark"] .mav-v2 #map .leaflet-control-attribution a {
    color: var(--q2-text-muted);
}

/* Codex: Die Datenquelle bleibt lesbar, tritt aber gegenüber den Fachdaten zurück. */
:root[data-theme="dark"] .mav-v2 #map .leaflet-control-attribution {
    color: var(--q2-text-muted);
}

:root[data-theme="dark"] .mav-v2 #map .leaflet-control-geocoder-alternatives li + li {
    border-top: 1px solid var(--q2-divider);
}

:root[data-theme="dark"] .mav-v2 #map .leaflet-control-geocoder-alternatives li a:hover {
    color: var(--q2-text);
    background-color: var(--q2-bg-muted);
}

/* Codex: Das externe Suchsymbol wird aufgehellt, ohne die Control-Fläche mitzudrehen. */
:root[data-theme="dark"] .mav-v2 #map .leaflet-control-geocoder-icon {
    background-color: transparent;
    filter: invert(1) brightness(1.8);
}

/* Codex: Marker-Tooltips und ihre Richtungsspitzen folgen im Darkmode dem Quark-Oberflächenkontrast. */
:root[data-theme="dark"] .mav-v2 #map .leaflet-tooltip.map_popup {
    border-color: var(--q2-border-strong);
    color: var(--q2-text);
    background-color: var(--q2-bg-elev);
    box-shadow: var(--mav-shadow);
}

:root[data-theme="dark"] .mav-v2 #map .leaflet-tooltip.map_popup.leaflet-tooltip-top::before {
    border-top-color: var(--q2-bg-elev);
}

:root[data-theme="dark"] .mav-v2 #map .leaflet-tooltip.map_popup.leaflet-tooltip-bottom::before {
    border-bottom-color: var(--q2-bg-elev);
}

:root[data-theme="dark"] .mav-v2 #map .leaflet-tooltip.map_popup.leaflet-tooltip-left::before {
    border-left-color: var(--q2-bg-elev);
}

:root[data-theme="dark"] .mav-v2 #map .leaflet-tooltip.map_popup.leaflet-tooltip-right::before {
    border-right-color: var(--q2-bg-elev);
}

:root[data-theme="dark"] .mav-v2 #map .map_popup :is(.map_popup_sonderkennzeichen, .map_popup_plausMsg) {
    color: var(--mav-table-notice-text);
    background-color: var(--mav-table-notice-bg);
}

@keyframes mav-cube-grid-scale-delay {
    0%,
    70%,
    100% {
        transform: scale3d(1, 1, 1);
    }

    35% {
        transform: scale3d(0, 0, 1);
    }
}

/* Codex: Tabulator-Tooltips während eines geöffneten MAV-Popups unterdrücken. */
body.mav-v2.mav_popup_hideTabulatorTooltips .tabulator-tooltip.tabulator-popup-container {
    display: none;
}

/* Codex: Schmaler Footer mit den unveränderten drei Inhaltsangeboten. */
#footer.mav-footer {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--mav-footer-height);
    min-height: var(--mav-footer-height);
    padding: 0.25rem 1rem;
    border-top: 1px solid var(--q2-border-strong);
    color: var(--q2-text-muted);
    background: var(--q2-bg-muted);
}

.mav-footer nav {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.mav-footer button {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0.15rem 0.1rem;
    border: 0;
    color: var(--q2-text-muted);
    background: transparent;
    box-shadow: none;
    font: inherit;
    text-decoration: none;
}

.mav-footer button:hover {
    color: var(--q2-link);
    text-decoration: underline;
}

/* Codex: Die kompakte Datenschutzbeschriftung wird nur auf schmalen Ansichten benötigt. */
.mav-footer-link__short {
    display: none;
}

/* Codex: Der Darstellungsumschalter bleibt rechts unten, ohne die mittigen Footer-Links zu verschieben. */
.mav-theme-toggle {
    position: absolute;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    min-height: 1.5rem;
    margin: 0;
    padding: 0.1rem 0.25rem;
    border: 0;
    color: var(--q2-text-muted);
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.mav-footer button.mav-theme-toggle:hover {
    color: var(--q2-link);
    text-decoration:  none;
}

.mav-theme-toggle__icon {
    font-size: 1rem;
    line-height: 1;
}

/* Codex: Native Footer-Dialoge mit begrenzter Höhe und klarer Schließen-Aktion. */
.mav-dialog {
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(42rem, calc(var(--mav-viewport-height) - 2rem));
    padding: 0;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.65rem;
    color: var(--q2-text);
    background: var(--q2-bg-elev);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 24%);
}

dialog.mav-dialog[open] {
    display: block;
    inset: 0;
    width: min(46rem, calc(100vw - 2rem));
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: calc(100vw - 2rem);
    max-height: min(42rem, calc(var(--mav-viewport-height) - 2rem));
    margin: auto;
    background: var(--q2-bg-elev);
}

.mav-dialog::backdrop {
    background: rgb(22 27 30 / 48%);
    backdrop-filter: blur(2px);
}

.mav-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--q2-border-strong);
}

.mav-dialog__header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.mav-dialog__close {
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--q2-text-muted);
    background: transparent;
    box-shadow: none;
    font-size: 1.5rem;
    line-height: 1;
}

.mav-dialog__close:hover {
    color: var(--q2-text);
    background: var(--q2-bg-muted);
}

.mav-dialog__content {
    overflow: auto;
    max-height: calc(var(--mav-viewport-height) - 8rem);
    padding: 1rem;
}

/* Codex: Bestehende MicroModal-Dialoge der Fachansichten in das neue Design einpassen. */
.mav-v2 .modal {
    display: none;
}

.mav-v2 .modal.is-open {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: block;
}

/* Codex: MicroModal benötigt animationend, um die is-open-Klasse nach dem Schließen zu entfernen. */
@keyframes mav-micromodal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mav-micromodal-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes mav-micromodal-slide-in {
    from { opacity: 0; transform: translateY(-0.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mav-micromodal-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-0.75rem); }
}

.mav-v2 .micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mav-micromodal-fade-in 160ms ease-out;
}

.mav-v2 .micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mav-micromodal-fade-out 140ms ease-in;
}

.mav-v2 .micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mav-micromodal-slide-in 160ms ease-out;
}

.mav-v2 .micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mav-micromodal-slide-out 140ms ease-in;
}

.mav-v2 .modal__overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(22 27 30 / 48%);
}

.mav-v2 .modal__container {
    overflow: auto;
    width: min(34rem, 100%);
    max-height: calc(var(--mav-viewport-height) - 2rem);
    padding: 1rem;
    /* Codex: Der Rand trennt MicroModal-Dialoge in beiden Farbschemata klar vom Overlay. */
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.65rem;
    background: var(--q2-bg-elev);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 24%);
}

/* Codex: Die SG-Zuordnung hält ihre Aktionsleiste sichtbar und scrollt nur die Listen. */
.mav-v2 #sgsassign-modal .modal__container {
    overflow: hidden;
    width: min(44rem, 100%);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.mav-v2 #sgsassign-modal .modal__content {
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.4rem;
}

.mav-v2 .modal__header,
.mav-v2 .modal__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mav-v2 .modal__header {
    justify-content: space-between;
}

.mav-v2 .modal__title {
    margin: 0;
    font-size: 1.15rem;
}

.mav-v2 .modal__content {
    margin: 1rem 0;
}

.mav-v2 .modal__close {
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--q2-text-muted);
    background: transparent;
    box-shadow: none;
}

.mav-v2 .modal__close::before {
    content: '×';
    font-size: 1.5rem;
}

.mav-v2 .modal__footer {
    justify-content: flex-end;
}

.mav-v2 .modal__btn {
    width: auto;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.35rem;
    color: var(--q2-text);
    background: var(--q2-bg-muted);
    font-size: 0.85rem;
}

.mav-v2 .modal__btn-primary {
    border-color: var(--q2-accent);
    color: var(--q2-accent-contrast);
    background: var(--q2-accent);
}

/* Codex: Dynamische Plugin-Popups und Flashmeldungen oberhalb des App-Rahmens anzeigen. */
#mav_popup {
    position: absolute;
    z-index: 12010;
    display: none;
    min-width: 14rem;
    padding: 0.6rem 0.8rem 1rem;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.5rem;
    background: var(--q2-bg-elev);
    box-shadow: 0 0.4rem 1.4rem rgb(0 0 0 / 20%);
    font-size: 0.85rem;
}

#mav_popup.show {
    display: block;
    transform: translate(-50%, -50%);
}

#mav_popupHeaderClose {
    display: flex;
    justify-content: flex-end;
}

#mav_popupClose {
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.3rem -0.4rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--q2-text-muted);
    background: transparent;
    box-shadow: none;
    font-size: 1.35rem;
    line-height: 1;
}

#mav_popup .popupTextImg {
    height: 0.65em;
}

#toast-zone {
    position: fixed;
    z-index: 13000;
    top: calc(var(--mav-header-height) + 0.75rem);
    right: 1rem;
    width: min(24rem, calc(100vw - 2rem));
}

#toast-zone .toast {
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--q2-border-strong);
    border-radius: 0.45rem;
    background: var(--q2-bg-elev);
    box-shadow: 0 0.4rem 1.4rem rgb(0 0 0 / 16%);
}

/* Codex: Auf schmalen Bildschirmen wird die Hauptnavigation unter dem Kopf aufgeklappt. */
@media (max-width: 62rem) {
    .mav-header__inner {
        padding-right: 0.65rem;
    }

    .mav-menu-toggle {
        display: inline-flex;
        align-items: center;
        align-self: center;
        gap: 0.4rem;
        width: auto;
        min-height: 2.25rem;
        margin: 0;
        padding: 0.4rem 0.65rem;
        border: 1px solid var(--q2-border-strong);
        border-radius: 0.35rem;
        color: var(--q2-text);
        background: var(--q2-bg-elev);
        box-shadow: none;
        font-size: 0.8rem;
    }

    .mav-menu-toggle__icon,
    .mav-menu-toggle__icon::before,
    .mav-menu-toggle__icon::after {
        display: block;
        width: 1rem;
        height: 2px;
        background: currentColor;
        content: '';
    }

    .mav-menu-toggle__icon {
        position: relative;
    }

    .mav-menu-toggle__icon::before {
        position: absolute;
        top: -0.32rem;
    }

    .mav-menu-toggle__icon::after {
        position: absolute;
        top: 0.32rem;
    }

    .mav-header__controls {
        position: absolute;
        top: calc(100% + 1px);
        right: 0.65rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        min-width: 13rem;
        border: 1px solid var(--q2-border-strong);
        border-radius: 0.45rem;
        background: var(--q2-bg-elev);
        box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 16%);
    }

    .mav-header__controls.is-open {
        display: flex;
    }

    .mav-primary-navigation,
    .mav-primary-navigation ul,
    .mav-primary-navigation li {
        display: block;
    }

    .mav-primary-navigation a {
        display: block;
        padding: 0.7rem 0.9rem;
    }

    .mav-primary-navigation a::after {
        inset: 0 auto 0 0;
        width: 3px;
        height: auto;
        border-radius: 0 3px 3px 0;
    }

    .mav-user {
        margin: 0;
        padding: 0.7rem 0.9rem;
        border-top: 1px solid var(--q2-border-strong);
        border-left: 0;
    }
}

/* Codex: Mit der eingeklappten Navigation bleibt im schmalen Kopf nur der Seitentitel sichtbar. */
@media (max-width: 62rem) {
    .mav-page-title__application,
    .mav-page-title__separator {
        display: none;
    }
}

@media (max-width: 42rem) {
    :root {
        --mav-header-height: 3rem;
    }

    /* Codex: Der Seitenrahmen darf nicht auf die Desktop-Mindestbreite anwachsen. */
    body.mav-v2 {
        min-width: 0;
    }

    /* Codex: Der Footer belegt mobil seine tatsächliche Höhe im Dokumentenfluss. */
    #footer.mav-footer {
        position: static;
        flex: 0 0 var(--mav-footer-height);
        box-sizing: border-box;
        justify-content: center;
        padding-inline: 0.45rem;
    }

    /* Codex: Die Rechtslinks bleiben mittig, während das reine Ansichtssymbol näher am Rand sitzt. */
    .mav-theme-toggle {
        right: 0.25rem;
    }

    .mav-brand__logo img {
        height: 2.35rem;
    }

    /* Codex: Das kompaktere Logo hält den mobilen Kopf trotz gut bedienbarem Menü flach. */
    .mav-brand__logo {
        padding-block: 0.2rem;
    }

    .mav-brand__divider {
        margin: 0 0.55rem;
    }

    .mav-page-title {
        font-size: 0.95rem;
    }

    .mav-menu-toggle__label {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
    }

    .mav-content {
        height: auto;
        min-height: calc(var(--mav-viewport-height) - var(--mav-header-height) - var(--mav-footer-height));
        padding: 0.55rem;
    }

    .mav-v2 .toggle-group-wrapper {
        flex-wrap: wrap;
        overflow-x: auto;
    }

    .mav-v2 .btn-group.filterwarncontainer {
        order: 2;
        flex-basis: 100%;
    }

    .mav-v2 .sg-table-toolbar {
        flex-wrap: wrap;
        gap: 0.35rem 0.75rem;
    }

    .mav-v2 .sg-view-segments {
        display: none;
    }

    .mav-v2 .sg-view-label {
        display: inline;
    }

    .mav-v2 .sg-view-select {
        display: block;
    }

    .mav-v2 .sg-table-toolbar .filterwarncontainer {
        order: initial;
        flex-basis: auto;
    }

    .mav-v2 .sg-table-shell {
        display: block;
        height: auto;
        max-height: none;
    }

    /* Codex: Die SG-Ladehülle bleibt innerhalb der sichtbaren Breite und zentriert den Spinner korrekt. */
    .mav-v2 .sg-table-shell.is-loading {
        width: 100%;
        min-width: 0;
    }

    /* Codex: Die kompakte Ladebeschriftung soll auf schmalen Displays nicht umbrechen. */
    .mav-v2 #initrotorwrap .sk-cube-text {
        white-space: nowrap;
        font-size: 0.9rem;
    }

    .mav-v2 .table-wrapper {
        max-height: none;
    }

    /* Codex: Testweise erhalten Fach-Tabellen auch mobil den Desktop-Scrollbereich mit festem Kopf. */
    #body-wrapper.mav-content {
        height: calc(var(--mav-viewport-height) - var(--mav-header-height) - var(--mav-footer-height));
        min-height: 0;
        /* Codex: Die globale Pico-Absatzmarge darf keinen Abstand vor dem Flex-Footer erzeugen. */
        margin-bottom: 0;
        padding: 0.55rem;
    }

    .mav-v2 :is(.sg-table-shell, .lsa-table-shell) {
        display: flex;
        height: 100%;
        max-height: 100%;
    }

    .mav-v2 .table-wrapper {
        max-height: calc(100% - 3.2rem);
    }

    /* Codex: Die SG-Tabelle erhält mobil die tatsächlich nach der Werkzeugleiste verbleibende Höhe. */
    .mav-v2 .sg-table-shell .table-wrapper {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
    }
}

@media (max-width: 28rem) {
    /* Codex: Der Footer bleibt einzeilig, indem der Darstellungsumschalter nur sein Icon zeigt. */
    .mav-footer nav {
        gap: 0.25rem;
        white-space: nowrap;
    }

    .mav-theme-toggle__label {
        display: none;
    }

    /* Codex: Die Kurzfassung schafft Platz, ohne den Datenschutzhinweis zu verkürzen. */
    .mav-footer-link__full {
        display: none;
    }

    .mav-footer-link__short {
        display: inline;
    }
}

/* Codex: Der Passwort-Link folgt der vertikalen Ausrichtung der Remember-me-Option. */
.mav-v2 #grav-login .login-form .button-wrapper > a.contrast {
    padding-top: 7px;
}

@media print {
    .mav-header,
    .mav-footer,
    #toast-zone,
    #mav_popup {
        display: none !important;
    }

    .mav-main {
        padding-top: 0;
    }

    .mav-content {
        height: auto;
        min-height: 0;
        padding: 0;
    }
}