/*
 * Neues Design der Verwaltung (alle Seiten mit layout/default.php), Entwurf 1
 * „Kopfband wie das neue Elternportal“: dunkles Band (#4a5568 -> #2d3748) mit Reitern,
 * darunter die Seiten des aktiven Bereichs als Unterreiter und der Seitentitel; der Inhalt
 * liegt als weisse Karte halb auf dem Band, auf #f4f6f9.
 *
 * Alles haengt an body.vw-neu und steht nach den alten Stilen. Viele Werte tragen
 * !important, weil app.css sie selbst mit !important setzt -- allen voran
 * `* { border-radius: 0 !important }`, ohne das hier keine Ecke rund waere.
 *
 * Unter 1330 px (und bei body.nav-kompakt) gilt das Burger-Menue aus app.css; es ist hier unter
 * body.vw-burger neu gestaltet (Abschnitt „Burger-Menue“).
 */

body.vw-neu {
    background: #f4f6f9;
}

body.vw-neu .wrapper {
    background: #f4f6f9;
    box-shadow: none;
}

/* ===== Kopf ===== */

/* Kein eigener Stapelkontext: sonst laege das Band ueber der Inhaltskarte. Die Navbar
   mit den Aufklappmenues bleibt mit z-index 1000 ueber der Karte. */
body.vw-neu .header {
    z-index: auto;
    box-shadow: none;
    padding-bottom: 96px;
}

body.vw-neu .navbar {
    min-height: 0;
    z-index: 1000;
}

body.vw-neu .navbar .container {
    min-height: 0;
    padding: 16px 32px 0;
    align-items: center;
}

/* Bootstrap zieht die Marke ab 768 px um 15 px nach links; hier steht sie buendig mit dem Band. */
body.vw-neu .navbar-brand-gts {
    margin-right: 16px;
    margin-left: 0 !important;
}

body.vw-neu .navbar-brand-gts img {
    height: 48px !important;
}

body.vw-neu .vw-schule {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    margin-right: 24px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    line-height: 1.3;
}

body.vw-neu .vw-schule strong {
    max-width: 340px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vw-neu .vw-schule span {
    font-size: 13px;
    color: #e5e7eb;
}

/* Schullogo rechts neben dem Namen, auf weisser Kachel wie im Elternportal: Viele Logos sind dunkel
   oder haben einen weissen Hintergrund und gingen im dunklen Kopf unter. */
body.vw-neu .vw-schule:has(+ .vw-schule-logo) {
    margin-right: 14px;
}

body.vw-neu .vw-schule-logo {
    flex: none;
    margin-right: 24px;
    padding: 4px 8px;
    border-radius: 10px !important;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

body.vw-neu .vw-schule-logo img {
    display: block;
    width: auto;
    max-width: 140px;
    height: auto;
    max-height: 40px;
}

@media (min-width: 1331px) {
    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav > li > a {
        margin: 0 2px;
        padding: 10px 14px !important;
        border-bottom: 0 !important;
        border-radius: 10px !important;
        color: #e5e7eb !important;
        font-size: 15px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
    }

    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav > li > a:hover,
    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav > li > a:focus,
    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav > li.open > a {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    /* Der aktuelle Bereich in GTS-Gruen mit dunkler Schrift (Kontrast etwa 7:1); weiss hob er sich
       zu wenig vom Benutzermenue und den Unterreitern ab. */
    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav > li.active > a,
    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav > li.active > a:hover,
    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav > li.active > a:focus {
        background: #72c02c !important;
        color: #14250a !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    }

    /* Benutzermenue als Pille rechts */
    body.vw-neu:not(.nav-kompakt) .header .navbar-nav > li:last-child {
        margin-left: 12px;
        padding-left: 0;
        border-left: 0;
    }

    /* !important, weil die Reiter oben border-bottom: 0 !important tragen */
    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav > li:last-child > a {
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 999px !important;
    }

    body.vw-neu:not(.nav-kompakt) .header .navbar-nav .dropdown-menu {
        margin-top: 6px;
        padding: 6px;
        border-radius: 12px !important;
        border-top: 0;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    }

    /* Die Menues oeffnen per :hover (header-default.css). Auf dem Weg vom Reiter ins Menue verlor die
       Maus den Hover in der Luecke darueber, und das Menue schloss sofort. Eine unsichtbare Bruecke
       schliesst die Luecke; ausserdem bleibt ein Menue nach dem Verlassen noch 0,3 s stehen, damit
       auch ein schraeger Mausweg ankommt. Per Tastatur oeffnet es mit :focus-within. */
    body.vw-neu:not(.nav-kompakt) .header .navbar-nav > li.dropdown > .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.12s ease 0.3s, visibility 0s linear 0.42s;
    }

    body.vw-neu:not(.nav-kompakt) .header .navbar-nav > li.dropdown:hover > .dropdown-menu,
    body.vw-neu:not(.nav-kompakt) .header .navbar-nav > li.dropdown:focus-within > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.12s ease, visibility 0s;
    }

    /* Zeigt die Maus auf einen anderen Reiter mit Menue, verschwindet das alte sofort statt nachzulaufen;
       sonst ueberlappen sich beide kurz. Das gilt auch fuer ein Menue, das nur per Fokus offen ist. */
    body.vw-neu:not(.nav-kompakt) .header .navbar-nav:has(> li.dropdown:hover) > li.dropdown:not(:hover) > .dropdown-menu {
        visibility: hidden;
        opacity: 0;
        transition: none;
    }

    body.vw-neu:not(.nav-kompakt) .header .navbar-nav > li.dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -14px;
        right: 0;
        left: 0;
        height: 14px;
    }

    body.vw-neu:not(.nav-kompakt) .header .navbar-nav .dropdown-menu > li > a {
        border-radius: 8px !important;
        color: #1f2937 !important;
    }

    body.vw-neu:not(.nav-kompakt) .header .navbar-nav .dropdown-menu > li > a:hover,
    body.vw-neu:not(.nav-kompakt) .header .navbar-nav .dropdown-menu > li > a:focus {
        background: #f3f4f6 !important;
        color: #1f2937 !important;
    }

    body.vw-neu:not(.nav-kompakt) .header .navbar-default .navbar-nav .dropdown-menu > li.active > a {
        background: #eef6e8 !important;
        color: #2f5f0e !important;
        font-weight: 600;
    }
}

/* ===== Band: Unterreiter und Seitentitel ===== */

/* Eine Zeile: links der Seitentitel, rechts die Unterreiter. Fehlt der Platz, rutschen die
   Unterreiter unter den Titel. */
body.vw-neu .vw-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    padding: 24px 32px 0;
    color: #ffffff;
}

/* max-width: Als Flex-Element waere die Auswahl mindestens so breit wie der ungekuerzte Knopftext und
   ragte am Handy aus dem Band („Betreuung · Echtzeit-Kinder-Gruppenzuordnung“). So bricht sie unter
   den Titel um und kuerzt den Text dort mit „…“. */
body.vw-neu .vw-band > .vw-unterreiter-wahl {
    flex: 1 1 0;
    max-width: 100%;
}

/* Rechtsbuendig, damit die Seiten unter den Reitern der ersten Ebene stehen. */
body.vw-neu .vw-unterreiter {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

body.vw-neu .vw-unterreiter a {
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 999px !important;
    color: #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

body.vw-neu .vw-unterreiter a:hover,
body.vw-neu .vw-unterreiter a:focus {
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

body.vw-neu .vw-unterreiter a.aktiv {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

body.vw-neu .vw-unterreiter a .fa,
body.vw-neu .vw-unterreiter a i {
    display: none;
}

body.vw-neu h1.vw-titel {
    margin: 0;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: none;
}

/* ===== Inhalt als Karte auf dem Band ===== */

/* Ohne z-index: Ein eigener Stapelkontext legte die Dialoge (in der Karte, z-index 1050) unter
   den abgedunkelten Hintergrund, den Bootstrap an den body haengt (1040). Die Karte liegt auch
   so ueber dem Band, weil sie nach dem Kopf kommt; die Navigation (1000) bleibt darueber. */
body.vw-neu .content {
    position: relative;
    flex: 1 0 auto;
    min-height: 300px;
    margin: -72px 24px 32px;
    padding: 24px 24px 28px !important;
    border-radius: 18px !important;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.16);
}

/* Filterfelder als graues Feld mit Schatten statt mit gruenem Rand; die weissen Eingabefelder heben
   sich davon ab. */
body.vw-neu .content .gts-filter-panel,
body.vw-neu .content .listen-filter-panel,
body.vw-neu .content .import-filter-panel,
body.vw-neu .content .settings-header {
    border: 1px solid #dde1e7;
    border-radius: 14px !important;
    background: #eceff3;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* Filterkachel und Tabellenrahmen auf allen Seiten gleich breit (Referenz: Gruppen, beide direkt im
   .container). Die Views schachteln sie verschieden in .col-md-12 und .row, und jede volle Spalte
   rueckte sie um weitere 15 px ein. Volle Spalten und Zeilen auf dem Weg zu Kachel, Rahmen oder
   Listentabelle (id „…-entries“, ohne DataTables) geben deshalb keinen eigenen Abstand mehr dazu;
   Zeilen mit halben Spalten (zwei Kacheln nebeneinander) behalten den Abstand untereinander. */
/* Am Handy setzen die Regeln unter „Handy“ das Raster ohnehin auf 0. */
@media (min-width: 576px) {
    body.vw-neu .content :is(.col-md-12, .col-lg-12):not(.modal *):has(.gts-filter-panel, .listen-filter-panel, .import-filter-panel, .vw-tabellenrahmen, table[id$="-entries"]) {
        padding-right: 0;
        padding-left: 0;
    }

    body.vw-neu .content .row:not(.modal *):has(.gts-filter-panel, .listen-filter-panel, .import-filter-panel, .vw-tabellenrahmen, table[id$="-entries"]) {
        margin-right: 0;
        margin-left: 0;
    }

    body.vw-neu .content .row:not(.modal *):has(> :is([class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"]):not(.col-md-12):not(.col-lg-12) :is(.gts-filter-panel, .listen-filter-panel, .import-filter-panel, .vw-tabellenrahmen, table[id$="-entries"])) {
        margin-right: -15px;
        margin-left: -15px;
    }
}

/* Knoepfe zum Hinzufuegen unten links in der Kachel (verwaltung.js holt sie aus der Liste). */
body.vw-neu .content .gts-filter-panel .vw-kachelaktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* Seiten ohne Filter (Kategorien, Konten …): Die Kachel traegt nur die Knoepfe. Bis verwaltung.js sie
   aus der Liste geholt hat, ist sie leer und bleibt verborgen. */
body.vw-neu .content .gts-filter-panel:not(:has(*)) {
    display: none;
}

body.vw-neu .content .gts-filter-panel .vw-kachelaktionen:first-child {
    margin-top: 0;
}

/* Die leeren Abstandshalter, die in den Listen Knopf und Tabelle trennten, fallen weg, seit der
   Knopf in der Kachel steht: Zwischen Kachel und Tabelle bleibt ueberall der Abstand der Kachel. */
/* app.css gibt allein der Gruppenliste am Handy 20 px Abstand nach oben. */
body.vw-neu #ag-entries-wrapper {
    margin-top: 0;
}

body.vw-neu .content [id$="-entries-wrapper"] :is(.margin-bottom-10, .margin-bottom-20):empty:has(~ :is(.dataTables_wrapper, table, .table-responsive), ~ * table) {
    display: none;
}

body.vw-neu .content .gts-filter-panel .vw-kachelaktionen > .btn {
    margin: 0;
}

body.vw-neu .content .gts-filter-panel::before,
body.vw-neu .content .listen-filter-panel::before,
body.vw-neu .content .import-filter-panel::before,
body.vw-neu .content .settings-header::before {
    display: none;
}

/* Schmale Knoepfe im Filter („Auswählen“, „Zurücksetzen“): filter-panels.css bricht dort mitten im
   Wort um (word-wrap: break-word); mit Silbentrennung wird daraus „Auswäh-len“. */
body.vw-neu .content .gts-filter-panel .btn.form-control,
body.vw-neu .content .listen-filter-panel .btn.form-control {
    overflow-wrap: normal;
    word-wrap: normal;
    hyphens: auto;
}

/* Gruener Knopf wie im Elternportal: #72c02c traegt keine weisse Schrift (Kontrast 2,4:1). Dasselbe fuer
   die gruenen Unify-Knoepfe (.btn-u ohne Farbvariante, z. B. „Logindaten, QR Codes, Mails“). */
body.vw-neu .btn-u:not(.btn-u-blue):not(.btn-u-orange):not(.btn-u-red):not(.btn-u-default):not(.btn-u-dark):not(.btn-u-sea):not(.btn-u-aqua):not(.btn-u-purple):not(.btn-u-brown):not(.btn-u-light-grey),
body.vw-neu .btn-u.btn-u-split-default.dropdown-toggle {
    border-color: #3f7d14;
    background-color: #3f7d14;
    color: #ffffff;
}

body.vw-neu .btn-u:not(.btn-u-blue):not(.btn-u-orange):not(.btn-u-red):not(.btn-u-default):not(.btn-u-dark):not(.btn-u-sea):not(.btn-u-aqua):not(.btn-u-purple):not(.btn-u-brown):not(.btn-u-light-grey):hover,
body.vw-neu .btn-u.btn-u-split-default.dropdown-toggle:hover {
    border-color: #356b10;
    background-color: #356b10;
    color: #ffffff;
}

body.vw-neu .btn-success,
body.vw-neu .btn-success:active {
    border-color: #3f7d14;
    background-color: #3f7d14;
    color: #ffffff;
}

body.vw-neu .btn-success:hover,
body.vw-neu .btn-success:focus {
    border-color: #356b10;
    background-color: #356b10;
    color: #ffffff;
}

/* Check-in: Knoepfe wie die orangen Check-out-Knoepfe (custom.css: helle Farbe mit Relief), hier in
   Gruen; „Für den Tag krank melden“ rot, damit es sich vom Check-in abhebt. */
body.vw-neu .btn-checkin {
    box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.3), inset 0 0 2px rgba(255, 255, 255, 0.3), 0 2px 2px rgba(0, 0, 0, 0.15);
}

body.vw-neu .btn-success.btn-checkin,
body.vw-neu .btn-success.btn-checkin:active {
    border-color: #66ab27;
    background-color: #72c02c;
}

body.vw-neu .btn-success.btn-checkin:hover,
body.vw-neu .btn-success.btn-checkin:focus {
    border-color: #578f20;
    background-color: #64a827;
}

/* ===== Fuss ===== */

/* Eine Karte wie der Inhalt: gleiche Breite, gleiche Rundung, gleicher Schatten. */
body.vw-neu .vw-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    margin: auto 24px 24px;
    padding: 12px 24px;
    border: 0;
    border-radius: 18px !important;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.16);
    color: #4b5563;
    font-size: 13px;
}

body.vw-neu .vw-fuss img {
    display: block;
    width: auto;
    height: 40px;
}

body.vw-neu .vw-fuss a {
    color: #3f7d14;
}

/* ===== Schmale Fenster: Burger-Menue aus app.css =====
   Dieselben Regeln unter 1330 px und bei body.nav-kompakt (breites Fenster, in das die Reiter
   trotzdem nicht passen, siehe navbar_kompakt.php): Logo und Schule in einer Zeile, der
   Burger rechts daneben, das aufgeklappte Menue darunter ueber die volle Breite. */

@media (max-width: 1330px) {
    body.vw-neu .header {
        padding-bottom: 80px;
    }

    body.vw-neu .navbar .container {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        padding: 10px 16px;
    }

    body.vw-neu .navbar-brand-gts img {
        height: 40px !important;
    }

    body.vw-neu .vw-schule {
        margin-right: 64px;
    }

    /* Rechts liegt der Burger-Knopf (absolut). */
    body.vw-neu .vw-schule-logo {
        margin-right: 64px;
    }

    body.vw-neu .navbar-toggle {
        top: 14px;
        transform: none;
    }

    body.vw-neu .navbar-responsive-collapse {
        flex-basis: 100%;
        margin: 10px 0 0 !important;
    }

    body.vw-neu .vw-band {
        padding: 16px 16px 0;
    }

    body.vw-neu h1.vw-titel {
        font-size: 24px;
    }

    body.vw-neu .content {
        width: auto !important;
        margin: -64px 8px 20px;
        padding: 16px 12px !important;
        border-radius: 14px !important;
    }

    /* app.css gibt .container-fluid hier 10px !important; .container gleich, damit Kacheln und
       Tabellen auf allen Seiten gleich breit bleiben. */
    body.vw-neu .content .container {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.vw-neu .vw-fuss {
        margin: auto 8px 8px;
        padding: 12px;
        border-radius: 14px !important;
    }
}

body.vw-neu.nav-kompakt .navbar .container {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 16px;
}

body.vw-neu.nav-kompakt .navbar-toggle {
    top: 14px;
    transform: none;
}

body.vw-neu.nav-kompakt .navbar-responsive-collapse {
    flex-basis: 100%;
    margin: 10px 0 0 !important;
}

/* ===== Burger-Menue (erste Ebene) =====
   body.vw-burger setzt navbar_kompakt.php unter 1330 px und bei .nav-kompakt. Das Menue klappt im
   dunklen Kopf auf statt als weisse Liste mit Grossbuchstaben: Bereiche wie die Reiter, die Seiten
   eines Bereichs als weisse Karte wie die Aufklappmenues am breiten Bildschirm. */

body.vw-neu.vw-burger .header .navbar-toggle {
    margin: 0;
    padding: 10px 9px;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 10px !important;
    background: transparent !important;
}

body.vw-neu.vw-burger .header .navbar-toggle:hover,
body.vw-neu.vw-burger .header .navbar-toggle:focus,
body.vw-neu.vw-burger .header .navbar-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.12) !important;
}

body.vw-neu.vw-burger .header .navbar-toggle .icon-bar {
    width: 20px;
    height: 2px;
    margin: 4px 0;
    border-radius: 1px !important;
    background: #ffffff !important;
}

body.vw-neu.vw-burger .header .navbar-responsive-collapse {
    max-height: none !important;
    margin: 12px 0 0 !important;
    padding: 8px 0 0;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.vw-neu.vw-burger .header .navbar-nav {
    float: none;
    margin: 0;
}

body.vw-neu.vw-burger .header .navbar-nav > li,
body.vw-neu.vw-burger .header .navbar-nav > li:last-child {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

body.vw-neu.vw-burger .header .navbar-default .navbar-nav > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #e5e7eb !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
}

body.vw-neu.vw-burger .header .navbar-default .navbar-nav > li > a:hover,
body.vw-neu.vw-burger .header .navbar-default .navbar-nav > li > a:focus,
body.vw-neu.vw-burger .header .navbar-default .navbar-nav > li.open > a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.vw-neu.vw-burger .header .navbar-default .navbar-nav > li.active > a,
body.vw-neu.vw-burger .header .navbar-default .navbar-nav > li.active > a:hover,
body.vw-neu.vw-burger .header .navbar-default .navbar-nav > li.active > a:focus {
    background: #72c02c !important;
    color: #14250a !important;
}

/* Pfeil rechts; dreht sich beim offenen Bereich. */
body.vw-neu.vw-burger .header .navbar-nav > li > a > .fa-angle-down {
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.15s ease;
}

body.vw-neu.vw-burger .header .navbar-nav > li.open > a > .fa-angle-down {
    transform: rotate(180deg);
}

/* Benutzer abgesetzt am Ende */
body.vw-neu.vw-burger .header .navbar-nav > li:last-child {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.vw-neu.vw-burger .header .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 4px 0 10px;
    padding: 6px;
    border: 0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.vw-neu.vw-burger .header .navbar-nav > li.dropdown:not(.open) > .dropdown-menu {
    display: none !important;
}

body.vw-neu.vw-burger .header .navbar-nav > li.open > .dropdown-menu {
    display: block !important;
    visibility: visible;
    opacity: 1;
}

body.vw-neu.vw-burger .header .navbar-default .navbar-nav .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    line-height: 1.3;
    white-space: normal;
}

body.vw-neu.vw-burger .header .navbar-default .navbar-nav .dropdown-menu > li > a:hover,
body.vw-neu.vw-burger .header .navbar-default .navbar-nav .dropdown-menu > li > a:focus {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}

body.vw-neu.vw-burger .header .navbar-default .navbar-nav .dropdown-menu > li.active > a {
    background: #eef6e8 !important;
    color: #2f5f0e !important;
    font-weight: 600;
}

body.vw-neu.vw-burger .header .navbar-nav .dropdown-menu > li > a .fa,
body.vw-neu.vw-burger .header .navbar-nav .dropdown-menu > li > a i {
    flex: none;
    width: 20px;
    margin: 0 !important;
    color: #6b7280;
    text-align: center;
}

/* ===== Zweite Ebene hinter einem Knopf =====
   Passen die Unterreiter nicht in eine Zeile, setzt layout/default.php .vw-unterreiter-kompakt:
   ein Knopf mit Bereich und aktueller Seite, darunter die Seiten als Karte ueber dem Inhalt. */

body.vw-neu .vw-unterreiter-wahl {
    position: relative;
}

body.vw-neu .vw-unterreiter-knopf {
    display: none;
}

/* Auch zusammengeklappt rechts: der Knopf steht rechts, die Karte klappt nach links auf. */
body.vw-neu .vw-unterreiter-kompakt {
    display: flex;
    justify-content: flex-end;
}

body.vw-neu .vw-unterreiter-kompakt .vw-unterreiter-knopf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 8px 14px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

body.vw-neu .vw-unterreiter-kompakt .vw-unterreiter-knopf:hover,
body.vw-neu .vw-unterreiter-kompakt .vw-unterreiter-knopf:focus-visible,
body.vw-neu .vw-unterreiter-kompakt.offen .vw-unterreiter-knopf {
    background: rgba(255, 255, 255, 0.24);
}

body.vw-neu .vw-unterreiter-burger {
    display: inline-flex;
    flex: none;
    flex-direction: column;
    gap: 3px;
}

body.vw-neu .vw-unterreiter-burger span {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 1px !important;
    background: currentColor;
}

body.vw-neu .vw-unterreiter-knopftext {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vw-neu .vw-unterreiter-knopfseite {
    color: #e5e7eb;
    font-weight: 400;
}

body.vw-neu .vw-unterreiter-knopfseite::before {
    content: "·";
    margin: 0 6px;
}

body.vw-neu .vw-unterreiter-knopf .fa-angle-down {
    flex: none;
    font-size: 16px;
    transition: transform 0.15s ease;
}

body.vw-neu .vw-unterreiter-kompakt.offen .vw-unterreiter-knopf .fa-angle-down {
    transform: rotate(180deg);
}

body.vw-neu .vw-unterreiter-kompakt .vw-unterreiter {
    display: none;
    position: absolute;
    z-index: 1010;
    top: calc(100% + 6px);
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    width: max-content;
    min-width: 240px;
    max-width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 160px);
    padding: 6px;
    overflow-y: auto;
    border-radius: 12px !important;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

body.vw-neu .vw-unterreiter-kompakt.offen .vw-unterreiter {
    display: flex;
}

body.vw-neu .vw-unterreiter-kompakt .vw-unterreiter a {
    padding: 10px 12px;
    border: 0;
    border-radius: 8px !important;
    background: transparent;
    color: #1f2937;
    font-size: 15px;
    font-weight: 400;
}

body.vw-neu .vw-unterreiter-kompakt .vw-unterreiter a:hover,
body.vw-neu .vw-unterreiter-kompakt .vw-unterreiter a:focus {
    background: #f3f4f6;
    color: #1f2937;
}

body.vw-neu .vw-unterreiter-kompakt .vw-unterreiter a.aktiv {
    background: #eef6e8;
    color: #2f5f0e;
    font-weight: 600;
}

@media print {
    body.vw-neu .header {
        padding-bottom: 0;
    }

    body.vw-neu .content,
    body.vw-neu .vw-fuss {
        margin: 0;
        box-shadow: none;
    }
}

/* ===== Tabellen (Entwurf T2 „Kompakt“) =====
   Dichte Zeilen, keine Gitterlinien und Streifen, ein Rahmen, in dem die Tabelle rollt,
   waehrend ihr Kopf stehen bleibt. Rahmen, Spaltenwahl und Zeilenmenues baut verwaltung.js. */

body.vw-neu .dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

body.vw-neu .dataTables_wrapper::after {
    display: none;
}

body.vw-neu .dataTables_wrapper > .vw-tabellenleiste,
body.vw-neu .dataTables_wrapper > .dataTables_filter {
    order: 0;
}

body.vw-neu .dataTables_wrapper > .vw-tabellenrahmen,
body.vw-neu .dataTables_wrapper > table.dataTable {
    flex: 1 1 100%;
    order: 1;
    min-width: 0;
}

body.vw-neu .dataTables_wrapper > .dataTables_info {
    flex: 1 1 auto;
    order: 2;
}

body.vw-neu .dataTables_wrapper > .dataTables_length {
    order: 3;
}

body.vw-neu .dataTables_wrapper > .dataTables_paginate {
    order: 4;
}

body.vw-neu .vw-tabellenleiste {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* Zusatzspalten bis zur Entscheidung in verwaltung.js verbergen (sonst blitzen sie kurz auf). */
body.vw-neu table:not(.vw-zusatz-bereit) > thead > tr > .vw-zusatz,
body.vw-neu table:not(.vw-zusatz-bereit) > tbody > tr > .vw-zusatz {
    display: none;
}

body.vw-neu .vw-tabellenrahmen {
    max-height: max(360px, calc(100vh - 150px));
    overflow: auto;
    border: 1px solid #d5d9df;
    border-radius: 12px !important;
    background: #ffffff;
}

/* Arbeitslisten, die nach jedem Klick neu geladen werden (Check-in/Check-out): Abwaerts rollt die
   Seite, der Rahmen nur seitwaerts. Zwei Rollbereiche ineinander sind am Tablet muehsam
   (ZAMMAD-39278). Der Kopf bleibt hier deshalb nicht stehen. */
body.vw-neu .vw-tabellenrahmen.vw-seite-rollt {
    max-height: none;
}

body.vw-neu table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #ffffff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* custom.css setzt fuer jede .table feste Spaltenbreiten und Umbruch mitten im Wort. Im Rahmen
   darf die Tabelle so breit werden, wie ihr Inhalt es braucht; der Rahmen rollt dann seitwaerts. */
body.vw-neu .vw-tabellenrahmen > table.dataTable {
    table-layout: auto !important;
    word-break: normal;
}

/* Im Rahmen richten sich die Spalten nach dem Inhalt; Eingabefelder sind von sich aus schmal und
   schnitten Uhrzeiten ab (Arbeitszeiterfassung: „09:0“). */
body.vw-neu .vw-tabellenrahmen > table.dataTable td input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.vw-neu .vw-tabellenrahmen > table.dataTable td select {
    min-width: 96px;
}

body.vw-neu .modal table.dataTable {
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Der Kopf bleibt nur im Rahmen stehen. In Dialogen rollt der Dialog selbst; dort laege ein
   stehender Kopf ueber der Zeile, zu der gerade gerollt wurde (E2E: „covered by other element“). */
body.vw-neu .vw-tabellenrahmen > table.dataTable > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Spaltenkoepfe mittig, auch gegen text-align aus den Views. Links und rechts gleich viel Abstand,
   damit die Beschriftung ueber der Spaltenmitte steht; die Sortierpfeile liegen im rechten Abstand. */
body.vw-neu table.dataTable > thead > tr > th {
    width: auto !important;
    padding: 9px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #c8cdd5 !important;
    background-color: #eceff3 !important;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center !important;
    white-space: nowrap;
    vertical-align: bottom;
}

body.vw-neu table.dataTable > thead > tr > th::before,
body.vw-neu table.dataTable > thead > tr > th::after {
    right: 6px !important;
}

body.vw-neu table.dataTable > thead > tr > th.sorting_disabled {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

body.vw-neu table.dataTable > tbody > tr,
body.vw-neu table.dataTable > tbody > tr.odd,
body.vw-neu table.dataTable > tbody > tr.even {
    background: #ffffff !important;
}

body.vw-neu table.dataTable > tbody > tr > td {
    height: 38px;
    padding: 6px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #dde1e6 !important;
    background-color: #ffffff;
    box-shadow: none !important;
    color: #1f2937;
    line-height: 1.4;
    vertical-align: middle;
}

body.vw-neu table.dataTable > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

body.vw-neu table.dataTable > tbody > tr:hover > td {
    background-color: #f7f9fb;
}

body.vw-neu table.dataTable > tbody > tr.vw-gewaehlt > td {
    background-color: #eef6e8;
}

body.vw-neu table.dataTable td.dataTables_empty {
    padding: 24px 10px !important;
    color: #4b5563;
    text-align: center;
}

/* Zeilenmenue: schlichter Knopf mit drei Punkten statt Kreis mit Pfeil */
body.vw-neu table.dataTable td .btn-group > .dropdown-toggle,
body.vw-neu .content .table td .btn-group > .dropdown-toggle {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px !important;
    background: transparent;
    box-shadow: none;
    color: #374151;
}

body.vw-neu table.dataTable td .btn-group > .dropdown-toggle:hover,
body.vw-neu table.dataTable td .btn-group > .dropdown-toggle:focus,
body.vw-neu table.dataTable td .btn-group.open > .dropdown-toggle,
body.vw-neu .content .table td .btn-group > .dropdown-toggle:hover,
body.vw-neu .content .table td .btn-group > .dropdown-toggle:focus,
body.vw-neu .content .table td .btn-group.open > .dropdown-toggle {
    border-color: #d1d5db;
    background: #ffffff;
}

body.vw-neu table.dataTable td .btn-group > .dropdown-toggle .fa-chevron-down::before,
body.vw-neu .content .table td .btn-group > .dropdown-toggle .fa-chevron-down::before,
body.vw-neu .content .table td .btn-group > .dropdown-toggle .fa-angle-down::before {
    content: "\f141";
}

/* Ueber Navigation (1000) und Karte, aber unter dem Dialog-Hintergrund (1040). */
body.vw-neu .dataTable .dropdown-menu,
body.vw-neu .content .table .btn-group > .dropdown-menu,
body.vw-neu .dropdown-menu.vw-menue-fest {
    z-index: 1030;
    min-width: 240px;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    font-size: 14px;
}

body.vw-neu .dataTable .dropdown-menu > li > a,
body.vw-neu .content .table .btn-group > .dropdown-menu > li > a {
    padding: 7px 12px;
    border-radius: 8px !important;
    color: #1f2937;
}

body.vw-neu .dataTable .dropdown-menu > li > a:hover,
body.vw-neu .dataTable .dropdown-menu > li > a:focus,
body.vw-neu .content .table .btn-group > .dropdown-menu > li > a:hover,
body.vw-neu .content .table .btn-group > .dropdown-menu > li > a:focus {
    background: #f3f4f6;
    color: #1f2937;
}

body.vw-neu .dataTable .dropdown-menu > li > a .fa {
    width: 20px;
    color: #4b5563;
    text-align: center;
}

/* app.css setzt .divider { margin: 15px 0 !important } – das Schuljahrphasen-Menue wurde so ~770 px hoch. */
body.vw-neu .dataTable .dropdown-menu .divider,
body.vw-neu .dropdown-menu.vw-menue-fest .divider,
body.vw-neu .content .table .btn-group > .dropdown-menu .divider {
    margin: 4px 6px !important;
    background-color: #eef0f3;
}

/* Unter der Tabelle: Anzahl, Zeilen pro Seite, Seiten */
body.vw-neu .dataTables_wrapper .dataTables_info {
    padding: 0 !important;
    color: #4b5563;
    font-size: 13px;
}

body.vw-neu .dataTables_wrapper .dataTables_length label,
body.vw-neu .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #4b5563;
    font-size: 13px;
    font-weight: 400;
}

body.vw-neu .dataTables_wrapper .dataTables_length select,
body.vw-neu .dataTables_wrapper .dataTables_filter input {
    height: 34px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px !important;
    background-color: #ffffff;
    color: #1f2937;
    font-size: 13px;
}

body.vw-neu .dataTables_wrapper .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
}

body.vw-neu .dataTables_wrapper .dataTables_paginate > span {
    display: flex;
    gap: 4px;
}

body.vw-neu .dataTables_wrapper .dataTables_paginate .paginate_button,
body.vw-neu .dataTables_wrapper .dataTables_paginate .ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #1f2937 !important;
    font-size: 13px;
    font-weight: 600;
}

body.vw-neu .dataTables_wrapper .dataTables_paginate .ellipsis {
    border-color: transparent !important;
}

body.vw-neu .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}

body.vw-neu .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.vw-neu .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: #2d3748 !important;
    background: #2d3748 !important;
    color: #ffffff !important;
}

body.vw-neu .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.vw-neu .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #ffffff !important;
    color: #9ca3af !important;
    cursor: default;
}

/* Spaltenwahl */
body.vw-neu .vw-spaltenwahl-anker {
    position: relative;
}

body.vw-neu .vw-werkzeugknopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px !important;
    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

body.vw-neu .vw-werkzeugknopf:hover,
body.vw-neu .vw-werkzeugknopf[aria-expanded="true"] {
    border-color: #2d3748;
}

body.vw-neu .vw-werkzeugknopf:focus-visible,
body.vw-neu .vw-textknopf:focus-visible,
body.vw-neu .vw-auswahlleiste button:focus-visible {
    outline: 2px solid #3f7d14;
    outline-offset: 2px;
}

body.vw-neu .vw-pfeil {
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

body.vw-neu .vw-spaltenwahl {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: 60vh;
    padding: 8px;
    overflow-y: auto;
    /* Der Fuss mit „Alle Spalten zeigen“ klebt unten (.vw-spaltenwahl-fuss, ~48px hoch). Ohne
       diesen Abstand rollt der Browser einen Eintrag nur bis an den unteren Rand, also hinter den
       Fuss: Ein per Tab fokussiertes Haekchen waere verdeckt. */
    scroll-padding-bottom: 56px;
    border: 1px solid #e5e7eb;
    border-radius: 12px !important;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
}

body.vw-neu .vw-spaltenwahl[hidden] {
    display: none;
}

body.vw-neu .vw-spaltenwahl-titel {
    margin: 4px 10px 6px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
}

body.vw-neu .vw-spaltensuche {
    margin: 0 4px 6px;
    padding: 0 10px;
    min-height: 34px;
    border: 1px solid #d1d5db;
    border-radius: 8px !important;
    font-size: 14px;
}

body.vw-neu .vw-spalte {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    margin: 0;
    padding: 0 10px;
    border-radius: 6px !important;
    color: #1f2937;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

body.vw-neu .vw-spalte:hover {
    background: #f3f4f6;
}

body.vw-neu .vw-spalte input,
body.vw-neu .vw-auswahl-zelle input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #3f7d14;
}

/* Bleibt sichtbar, wenn die Liste bei vielen Spalten rollt. */
body.vw-neu .vw-spaltenwahl-fuss {
    position: sticky;
    bottom: -8px;
    margin: 6px -8px -8px;
    padding: 8px 14px 10px;
    border-top: 1px solid #eef0f3;
    background: #ffffff;
}

body.vw-neu .vw-textknopf {
    padding: 4px;
    border: 0;
    background: none;
    color: #3f7d14;
    font-size: 13px;
    font-weight: 600;
}

/* Mehrfachauswahl (Kinder): Haekchen-Spalte bleibt beim seitlichen Rollen stehen */
body.vw-neu .vw-tabellenrahmen > table.dataTable .vw-auswahl-zelle {
    position: sticky;
    left: 0;
    z-index: 1;
}

body.vw-neu table.dataTable .vw-auswahl-zelle {
    width: 36px !important;
    padding-right: 10px !important;
    box-shadow: 1px 0 0 #dde1e6 !important;
    text-align: center;
}

body.vw-neu .vw-tabellenrahmen > table.dataTable > thead > tr > th.vw-auswahl-zelle {
    z-index: 3;
}

body.vw-neu .vw-auswahlleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 10px;
    padding: 6px 8px 6px 14px;
    border-radius: 10px !important;
    background: #2d3748;
    color: #ffffff;
    font-size: 13px;
}

body.vw-neu .vw-auswahlleiste[hidden] {
    display: none;
}

body.vw-neu .vw-auswahlleiste-aktionen {
    display: flex;
    flex-wrap: wrap;
}

body.vw-neu .vw-auswahlleiste button {
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px !important;
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

body.vw-neu .vw-auswahlleiste button:hover {
    background: rgba(255, 255, 255, 0.14);
}

body.vw-neu .vw-auswahlleiste .vw-auswahlleiste-ende {
    display: flex;
    margin-left: auto;
}

/* ===== Dialoge (Entwurf D2 „Abschnittsleiste“) =====
   Alle Dialoge: weisser Kopf mit Titel links und Schliessen-Knopf, ruhiger Fuss mit
   „Abbrechen“ als Rahmenknopf. Dialoge mit mindestens drei Reitern (verwaltung.js setzt
   .vw-dialog-abschnitte): Reiter als Leiste links mit Symbol und Kurzinfo. */

body.vw-neu .modal-backdrop.in {
    background: #111827;
    opacity: 0.5;
}

body.vw-neu .modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
}

body.vw-neu .modal.fade .modal-dialog {
    box-shadow: none !important;
}

/* Breite: rund 30 % breiter als bisher (custom.css: 75 %, modal-sm 400, modal-mid 600, modal-mid2 850,
   modal-lg 900 px). Hoehe: Der Dialog passt immer ins Fenster und rollt selbst; so bleibt der Fuss mit
   „Abbrechen“ und „Speichern“ unten stehen (position: sticky im rollenden .modal-dialog). */
@media (min-width: 769px) {
    body.vw-neu .modal-dialog {
        width: min(97.5%, calc(100% - 32px));
        max-height: calc(100vh - 60px);
    }

    body.vw-neu .modal-dialog.modal-lg {
        width: min(1170px, calc(100% - 32px));
    }

    body.vw-neu .modal-dialog.modal-sm,
    body.vw-neu .modal-dialog.modal-mid,
    body.vw-neu .modal-dialog.modal-mid2 {
        margin-top: 12vh;
        max-height: calc(88vh - 30px);
    }

    body.vw-neu .modal-dialog.modal-sm {
        width: min(520px, calc(100% - 32px));
    }

    body.vw-neu .modal-dialog.modal-mid {
        width: min(780px, calc(100% - 32px));
    }

    body.vw-neu .modal-dialog.modal-mid2 {
        width: min(1105px, calc(100% - 32px));
    }
}

@media (max-width: 768px) {
    body.vw-neu .modal-dialog {
        max-height: calc(100vh - 20px);
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

body.vw-neu .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

body.vw-neu .modal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    padding: 20px 24px 16px !important;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 18px 18px 0 0 !important;
    background: #ffffff;
}

body.vw-neu .modal-header::before,
body.vw-neu .modal-header::after,
body.vw-neu .modal-footer::before,
body.vw-neu .modal-footer::after {
    display: none;
}

body.vw-neu .modal-header > * {
    flex-basis: 100%;
    order: 3;
}

body.vw-neu .modal-header .modaltitle,
body.vw-neu .modal-header .modal-title {
    flex: 1 1 0;
    order: 1;
    min-width: 0;
    margin: 0;
    color: #1f2937;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

body.vw-neu .modal-header .modaltitle > .fa:first-child {
    display: none;
}

body.vw-neu .modal-header .close {
    flex: 0 0 40px;
    order: 2;
    width: 40px;
    height: 40px;
    margin: -4px -6px 0 auto;
    border-radius: 10px !important;
    background: #f3f4f6;
    color: #374151;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
}

body.vw-neu .modal-header .close:hover,
body.vw-neu .modal-header .close:focus {
    background: #e5e7eb;
    color: #111827;
}

body.vw-neu .modal-body {
    background: #ffffff;
}

body.vw-neu .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px !important;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 18px 18px !important;
    background: #f9fafb;
}

/* Manche Knoepfe sind <input> ohne type (also Textfelder) und waeren sonst 20 Zeichen breit. */
body.vw-neu .modal-footer input.btn {
    field-sizing: content;
}

body.vw-neu .modal-footer .btn {
    width: auto;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 18px;
    border-radius: 10px !important;
    font-size: 15px;
    font-weight: 600;
}

body.vw-neu .modal-footer .pull-left {
    margin-right: auto !important;
}

body.vw-neu .modal .btn-warning,
body.vw-neu .content .gts-filter-panel .btn-warning {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
}

body.vw-neu .modal .btn-warning:hover,
body.vw-neu .modal .btn-warning:focus,
body.vw-neu .content .gts-filter-panel .btn-warning:hover,
body.vw-neu .content .gts-filter-panel .btn-warning:focus {
    border-color: #9ca3af;
    background: #f3f4f6;
    color: #111827;
}

body.vw-neu .modal .form-control,
body.vw-neu .modal .sky-form .input input,
body.vw-neu .modal .sky-form .select select,
body.vw-neu .modal .sky-form .textarea textarea,
body.vw-neu .settings-tabs-wrapper .form-control,
body.vw-neu .settings-tabs-wrapper .input input,
body.vw-neu .settings-tabs-wrapper .textarea textarea {
    border-color: #9ca3af;
    border-radius: 10px !important;
    box-shadow: none;
}

body.vw-neu .modal .form-control:focus,
body.vw-neu .modal .sky-form .input input:focus,
body.vw-neu .modal .sky-form .select select:focus,
body.vw-neu .modal .sky-form .textarea textarea:focus,
body.vw-neu .settings-tabs-wrapper .form-control:focus,
body.vw-neu .settings-tabs-wrapper .input input:focus,
body.vw-neu .settings-tabs-wrapper .textarea textarea:focus {
    border-color: #3f7d14;
    box-shadow: 0 0 0 3px rgba(63, 125, 20, 0.18);
}

/* SlimSelect (Mehrfachauswahl) wie die uebrigen Felder */
body.vw-neu .modal .ss-main {
    border-color: #9ca3af;
    border-radius: 10px !important;
}

/* Lange Platzhalter („Auswählen (Alle Kategorien müssen gesetzt sein)“) enden mit „…“. SlimSelect
   setzt sie als Flex-Container, dort greift text-overflow nicht, und die Werte waren mindestens so
   breit wie der Text: Am Handy lief er ueber den Feldrand. */
body.vw-neu .ss-main .ss-values {
    min-width: 0;
}

body.vw-neu .ss-main .ss-values .ss-placeholder {
    display: block;
}

/* Datumsfelder bringen ihr eigenes Kalendersymbol mit; das zusaetzliche von sky-forms faellt weg. */
body.vw-neu .sky-form label.input:has(> input[type="date"]) > .icon-append,
body.vw-neu .sky-form label.input:has(> input[type="date"]) > .icon-prepend {
    display: none;
}

body.vw-neu .modal .sky-form .icon-append,
body.vw-neu .modal .sky-form .icon-prepend {
    border-color: transparent;
    background: transparent;
    color: #6b7280;
}

/* Tabellen ohne DataTables (Tagesuebersicht, Dialoge: Teilnehmer, Wochentage ...): dieselbe ruhige
   Optik, aber ohne Rahmen, Spaltenwahl und feste Kopfzeile. Kein Umbruch mitten im Wort mehr
   (custom.css setzt word-break: break-all fuer jede .table). */
body.vw-neu .content .table:not(.dataTable),
body.vw-neu .modal .table {
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    word-break: normal;
    overflow-wrap: anywhere;
}

body.vw-neu .content .table:not(.dataTable) > thead > tr > th,
body.vw-neu .modal .table > thead > tr > th {
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid #c8cdd5;
    background-color: #eceff3;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    text-align: center !important;
    vertical-align: bottom;
}

body.vw-neu .content .table:not(.dataTable) > tbody > tr,
body.vw-neu .content .table-striped:not(.dataTable) > tbody > tr:nth-of-type(odd),
body.vw-neu .modal .table > tbody > tr,
body.vw-neu .modal .table-striped > tbody > tr:nth-of-type(odd) {
    background: none;
}

body.vw-neu .content .table:not(.dataTable) > tbody > tr > td,
body.vw-neu .modal .table > tbody > tr > td {
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid #dde1e6;
    background-color: #ffffff;
    vertical-align: middle;
}

/* Zellen mit Eingabefeldern (Arbeitszeiterfassung: Von/Bis in schmalen col-md-1-Spalten) behalten
   den knappen Abstand, sonst schneidet das Feld die Uhrzeit ab. */
body.vw-neu .content .table > tbody > tr > td:has(input[type="time"], input[type="date"]) {
    padding-right: 4px;
    padding-left: 4px;
}

body.vw-neu .content .table td input[type="time"],
body.vw-neu .content .table td input[type="date"] {
    width: 100%;
    max-width: 100%;
    padding: 4px 6px;
}

/* Spaltenkoepfe in schmalen Spalten mit Silbentrennung statt „Gehz|eit“. */
body.vw-neu .content .table:not(.dataTable) > thead > tr > th,
body.vw-neu .modal .table > thead > tr > th {
    overflow-wrap: normal;
    hyphens: auto;
}

body.vw-neu .content .table-hover:not(.dataTable) > tbody > tr:hover > td,
body.vw-neu .modal .table-hover > tbody > tr:hover > td {
    background-color: #f7f9fb;
}

/* Zwei Reiter im Dialog und Reiter auf Seiten (Anmeldeformulare, Nachrichten …): unterstrichen statt
   gruener Kasten. Die Einstellungen haben die Abschnittsleiste. */
body.vw-neu .content .tab-v1 > .nav-tabs:not(.vw-abschnittsleiste) {
    border-bottom: 1px solid #e5e7eb !important;
    background: none;
}

body.vw-neu .content .tab-v1 > .nav-tabs:not(.vw-abschnittsleiste) > li > a {
    margin: 0 4px -1px 0;
    padding: 10px 12px;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    color: #4b5563 !important;
    font-weight: 600;
}

body.vw-neu .content .tab-v1 > .nav-tabs:not(.vw-abschnittsleiste) > li.active > a,
body.vw-neu .content .tab-v1 > .nav-tabs:not(.vw-abschnittsleiste) > li > a:hover {
    border-bottom-color: #3f7d14 !important;
    color: #1f2937 !important;
}

body.vw-neu .content .tab-v1 > .tab-content {
    border: 0;
}

/* Karten mit Kopfzeile (Feldverwaltung): Knopf rutscht am Handy unter den Titel statt hinaus. */
body.vw-neu .content .card-header {
    flex-wrap: wrap;
    gap: 8px;
}

/* Zwei Reiter: unterstrichen statt gruener Kasten */
body.vw-neu .vw-dialog-reiter .tab-v1 .nav-tabs {
    border-bottom: 1px solid #e5e7eb !important;
    background: none;
}

body.vw-neu .vw-dialog-reiter .tab-v1 .nav-tabs > li > a {
    margin: 0 4px -1px 0;
    padding: 10px 12px;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    color: #4b5563 !important;
    font-weight: 600;
}

body.vw-neu .vw-dialog-reiter .tab-v1 .nav-tabs > li.active > a,
body.vw-neu .vw-dialog-reiter .tab-v1 .nav-tabs > li > a:hover {
    border-bottom-color: #3f7d14 !important;
    color: #1f2937 !important;
}

/* Abschnittsleiste */
body.vw-neu .modal.vw-dialog-abschnitte .modal-dialog {
    width: calc(100% - 32px) !important;
    max-width: 1612px;
}

body.vw-neu .vw-dialog-abschnitte .modal-body {
    padding: 0 !important;
}

body.vw-neu .vw-dialog-abschnitte .modal-body > :not(.vw-abschnitte):not(input):not(form) {
    margin: 16px 24px 0;
}

body.vw-neu .vw-abschnitte {
    display: flex;
    align-items: stretch;
    background: linear-gradient(to right, #f4f6f9 280px, #ffffff 280px);
}

body.vw-neu .vw-abschnitte > ul.vw-abschnittsleiste {
    position: sticky;
    top: 0;
    display: flex;
    flex: 0 0 280px;
    flex-direction: column;
    align-self: flex-start;
    width: 280px;
    min-width: 0;
    gap: 4px;
    float: none;
    margin: 0;
    padding: 16px 12px;
    border: 0 !important;
    background: none !important;
}

body.vw-neu .vw-abschnittsleiste > li {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
}

body.vw-neu .vw-abschnittsleiste > li > a,
body.vw-neu .tab-v1 .vw-abschnittsleiste > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #1f2937 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

body.vw-neu .vw-abschnittsleiste > li > a:hover,
body.vw-neu .vw-abschnittsleiste > li > a:focus {
    background: #e9ecf1 !important;
}

body.vw-neu .vw-abschnittsleiste > li.active > a,
body.vw-neu .vw-abschnittsleiste > li.active > a:hover,
body.vw-neu .vw-abschnittsleiste > li.active > a:focus,
body.vw-neu .tab-v1 .vw-abschnittsleiste > li.active > a {
    background: #2d3748 !important;
    color: #ffffff !important;
}

body.vw-neu .vw-abschnittsleiste > li > a:focus-visible {
    outline: 2px solid #3f7d14;
    outline-offset: 2px;
}

body.vw-neu .vw-symbol {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 9px !important;
    background: #ffffff;
    color: #374151;
}

body.vw-neu .vw-abschnittsleiste > li.active .vw-symbol {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

body.vw-neu .vw-abschnitt-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

body.vw-neu .vw-abschnitt-text::after {
    content: attr(data-kurz);
    max-width: 100%;
    overflow: hidden;
    color: #4b5563;
    font-size: 13px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.vw-neu .vw-abschnitt-text[data-kurz=""]::after {
    display: none;
}

body.vw-neu .vw-abschnittsleiste > li.active .vw-abschnitt-text::after {
    color: #e5e7eb;
}

body.vw-neu .vw-abschnittsleiste > li > a.vw-warnung .vw-abschnitt-text::after {
    color: #9a3412;
    font-weight: 600;
}

body.vw-neu .vw-abschnittsleiste > li.active > a.vw-warnung .vw-abschnitt-text::after {
    color: #fed7aa;
}

/* z-index: auto, weil filter-panels.css den Einstellungen z-index 1000 gibt. Als Flex-Kind wirkt der
   Wert und bildet einen Stapelkontext auf Hoehe der Navbar; weil der Inhalt spaeter im Dokument steht,
   laegen die Felder sonst ueber den Aufklappmenues (und ueber der klebenden Speichern-Leiste). */
body.vw-neu .vw-abschnitte > .tab-content {
    z-index: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 32px 24px !important;
    border: 0;
    background: #ffffff;
}

body.vw-neu .vw-abschnittskopf {
    margin: 0 0 16px;
}

body.vw-neu .vw-abschnittskopf::before {
    content: attr(data-titel);
    color: #1f2937;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

/* ===== Einstellungen: Abschnittsleiste wie in den Dialogen, Speichern bleibt unten stehen ===== */

body.vw-neu .settings-header {
    display: none;
}

body.vw-neu .settings-tabs-wrapper,
body.vw-neu .settings-tabs-wrapper .tab-v1 {
    float: none;
    padding: 0;
    background: none;
}

body.vw-neu .settings-tabs-wrapper .vw-abschnitte {
    border: 1px solid #e5e7eb;
    border-radius: 14px !important;
}

body.vw-neu .settings-tabs-wrapper .vw-abschnitte > ul.vw-abschnittsleiste {
    top: 16px;
}

body.vw-neu .settings-tabs-wrapper .vw-abschnitte > ul.vw-abschnittsleiste > li > a {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #1f2937 !important;
}

body.vw-neu .settings-tabs-wrapper .vw-abschnitte > ul.vw-abschnittsleiste > li > a:hover {
    background: #e9ecf1 !important;
}

body.vw-neu .settings-tabs-wrapper .vw-abschnitte > ul.vw-abschnittsleiste > li.active > a {
    background: #2d3748 !important;
    color: #ffffff !important;
}

body.vw-neu .settings-tabs-wrapper .vw-abschnitte > .tab-content {
    border-radius: 0 14px 14px 0 !important;
    background: transparent;
}

body.vw-neu .vw-symbol > .fa {
    width: auto;
    margin: 0;
    font-size: 16px;
}

body.vw-neu .settings-tabs-wrapper #einstellungen-form > .row:last-child {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 16px 0 0;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 14px 14px !important;
    background: #f9fafb;
}

body.vw-neu .settings-tabs-wrapper #einstellungen-form > .margin-bottom-30 {
    display: none;
}

body.vw-neu #einstellungen-form-submit {
    min-height: 42px;
    padding: 0 22px;
    border-radius: 10px !important;
    font-size: 15px;
    font-weight: 600;
}

/* Am Handy: Seitenknoepfe in einer Zeile unter der Tabelle */
@media (max-width: 767px) {
    /* Tabellen ohne DataTables (Finanzen, Meine Gruppen …) rollen seitwaerts, statt ihre Spalten
       auf ein paar Pixel zu quetschen. */
    body.vw-neu .content .table:not(.dataTable) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        table-layout: auto !important;
    }

    body.vw-neu .content .table:not(.dataTable) > thead > tr > th {
        hyphens: manual;
        white-space: nowrap;
    }

    body.vw-neu .content .table:not(.dataTable),
    body.vw-neu .content .table:not(.dataTable) td {
        overflow-wrap: normal;
        word-break: normal;
    }

    body.vw-neu .dataTables_wrapper > .dataTables_paginate {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 3px;
    }

    body.vw-neu .dataTables_wrapper .dataTables_paginate > span {
        gap: 3px;
    }

    body.vw-neu .dataTables_wrapper .dataTables_paginate .paginate_button,
    body.vw-neu .dataTables_wrapper .dataTables_paginate .ellipsis {
        min-width: 30px;
        padding: 0 6px !important;
    }
}

/* Am Handy: Abschnitte als Zeile zum Wischen ueber dem Inhalt */
@media (max-width: 767px) {
    body.vw-neu .modal.vw-dialog-abschnitte .modal-dialog {
        width: calc(100% - 16px) !important;
        margin: 8px auto;
    }

    body.vw-neu .vw-abschnitte {
        flex-direction: column;
        background: none;
    }

    body.vw-neu .vw-abschnitte > ul.vw-abschnittsleiste {
        position: static;
        flex: none;
        flex-direction: row;
        align-self: stretch;
        width: auto;
        padding: 8px;
        overflow-x: auto;
        background: #f4f6f9 !important;
    }

    body.vw-neu .vw-abschnittsleiste > li {
        flex: none;
    }

    body.vw-neu .vw-abschnittsleiste > li > a,
    body.vw-neu .tab-v1 .vw-abschnittsleiste > li > a {
        min-height: 44px;
        white-space: nowrap;
    }

    body.vw-neu .vw-abschnitt-text::after,
    body.vw-neu .vw-abschnittsleiste .vw-symbol {
        display: none;
    }

    body.vw-neu .vw-abschnitte > .tab-content {
        padding: 16px !important;
    }
}

/* ===== Handy =====
   Kopf: GTS-Logo und Schule bleiben nebeneinander. Unter rund 390 px rutschte die Schule sonst
   unter das Logo, der Trennstrich blieb allein links stehen, und der Kopf wurde 40 px hoeher.
   Der Schulname darf auf zwei Zeilen umbrechen und wird dann gekuerzt. */
@media (max-width: 575px) {
    body.vw-neu .navbar .container {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    body.vw-neu .navbar-brand-gts {
        flex: none;
        margin-right: 10px;
    }

    body.vw-neu .navbar-brand-gts img {
        height: 30px !important;
    }

    /* Rechts liegt der Burger-Knopf (absolut, 44 px). */
    body.vw-neu .vw-schule {
        flex: 1 1 0;
        margin-right: 56px;
        padding-left: 10px;
    }

    body.vw-neu .vw-schule strong {
        display: -webkit-box;
        max-width: none;
        font-size: 15px;
        white-space: normal;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    body.vw-neu .vw-schule span {
        font-size: 12px;
    }

    body.vw-neu .vw-schule:has(+ .vw-schule-logo) {
        margin-right: 10px;
    }

    body.vw-neu .vw-schule-logo {
        margin-right: 56px;
        padding: 3px 5px;
        border-radius: 8px !important;
    }

    body.vw-neu .vw-schule-logo img {
        max-width: 64px;
        max-height: 30px;
    }

    body.vw-neu .vw-band {
        gap: 10px;
        padding: 12px 12px 0;
    }

    body.vw-neu h1.vw-titel {
        font-size: 22px;
    }

    /* Inhalt: Die Seiten bringen ihr Raster mit (.container in der Karte, Spalte in .row,
       sky-form-fieldset). Jede Stufe zog links und rechts noch einmal 10 bis 30 px ab, Formulare
       waren nur gut 200 px breit. Am Handy stehen die Spalten ohnehin untereinander (sky-form unter
       600 px, Bootstrap unter 768 px); col-xs-* steht auch hier nebeneinander und behaelt den Abstand. */
    /* !important: Das Bundle gibt .container-fluid hier 10px !important; Seiten mit .container-fluid
       standen sonst 10 px weiter innen als Seiten mit .container. */
    body.vw-neu .content .container,
    body.vw-neu .content .container-fluid {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.vw-neu .content .row {
        margin-right: 0;
        margin-left: 0;
    }

    body.vw-neu .content [class*="col-sm-"]:not([class*="col-xs-"]),
    body.vw-neu .content [class*="col-md-"]:not([class*="col-xs-"]),
    body.vw-neu .content [class*="col-lg-"]:not([class*="col-xs-"]),
    body.vw-neu .content .col-xs-12,
    body.vw-neu .content .sky-form .col {
        padding-right: 0;
        padding-left: 0;
    }

    body.vw-neu .content .sky-form fieldset {
        padding-right: 0;
        padding-left: 0;
    }

    body.vw-neu .content .gts-filter-panel,
    body.vw-neu .content .listen-filter-panel {
        padding: 14px 12px;
    }
}

@media (max-width: 767px) {
    /* Felder mit mindestens 16 px Schrift, sonst zoomt iOS beim Antippen in die Seite. */
    body.vw-neu input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]),
    body.vw-neu select,
    body.vw-neu textarea {
        font-size: 16px !important;
    }

    /* Leere Tabelle, die breiter ist als der Rahmen: Die Meldung stand mittig ueber der vollen
       Breite und war halb abgeschnitten. */
    body.vw-neu .vw-tabellenrahmen table.dataTable td.dataTables_empty {
        text-align: left;
    }
}

/* Touch (Handy, Tablet): Haken und Knoepfe gross genug zum Antippen. */
@media (max-width: 991px) {
    /* Arbeitszeiterfassung (gearbeitet ja/nein), Meine Gruppen („Alle Gruppen anzeigen“) */
    body.vw-neu #mitarbeiterentries label.checkbox > input[type="checkbox"],
    body.vw-neu #check_alle_anzeigen {
        width: 24px;
        height: 24px;
        margin: 0 8px 0 0;
        vertical-align: middle;
        accent-color: #3f7d14;
    }

    /* Check-in: „Für den Tag krank melden“ (24 px hoch, 11 px Schrift) */
    body.vw-neu .checkin_krankmeldung_button {
        min-height: 40px;
        font-size: 14px;
        white-space: normal;
    }
}

@media print {
    body.vw-neu .vw-tabellenrahmen {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    body.vw-neu .vw-tabellenleiste,
    body.vw-neu .vw-auswahlleiste {
        display: none;
    }

    body.vw-neu table.dataTable > thead > tr > th {
        position: static;
    }
}