/* ===== Schrift-System (25.07.2026): 3 Rollen als CSS-Variablen =====
       --font-lese    = Ubuntu (alles Lesbare: Tabellen, Akte, Fliesstext)
       --font-eingabe = Courier Prime (alle Eingabefelder)
       --font-akzent  = Platzhalter fuer Font 3 (aktuell Barlow Condensed der Akte) */
    @font-face {
        font-family: 'Ubuntu';
        src: url('/assets/fonts/ubuntu-r.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Elegant Bloom';
        src: url('/assets/fonts/elegantbloom-r.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Courier Prime';
        src: url('/assets/fonts/courierprime-r.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    :root {
        --font-lese: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-eingabe: 'Courier Prime', 'Courier New', Courier, monospace;
        --font-akzent: 'Elegant Bloom', var(--font-lese); /* Font 3: kleine Schrift + Tooltips */
    }
    body {
        font-family: var(--font-lese);
    }

    a {
        color: #8bbabb;
    }

    a:hover {
        text-decoration: none;
        color: #46B2DC;
    }

    thead input {
        width: 100%;
        /*display: none;*/
        float: left;
    }

    /* Schmales Fenster: KEINE Spalten ausblenden -- Tabelle behaelt alle Spalten
       und wird stattdessen waagerecht scrollbar (Wrapper .zk-scrollwrap). */
    @media (max-width: 978px) {
        .zk-scrollwrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        #zk-clients {
            width: 1100px !important;
            min-width: 1100px;
        }
    }

    [contenteditable] {
        -webkit-user-select: text;
        user-select: text;
    }

    #invoice_archiveAndPrint {
        float: right;
    }

    #client_pdfs,
    #invoice_pdf {
        height: 200px;
        text-align: center;
        margin: 0 auto;
        display: block;
        max-width: 500px;
        margin-bottom: 5px;
    }

    input[type='checkbox'],
    input[type='radio'] {
        width: auto;
        float: left;
        margin-right: .75em;
        background: transparent;
        border: none;
    }

    input[type='checkbox']:checked,
    input[type='checkbox']:not(:checked),
    input[type='radio']:checked,
    input[type='radio']:not(:checked) {
        background: transparent;
        position: relative;
        visibility: hidden;
        margin: 0;
        padding: 0;
    }

    input[type='checkbox'] + label,
    input[type='radio'] + label {
        cursor: pointer;
        background: white;
        padding: 5px 20px;
        width: 95%;
        text-align: center;
        border: 1px solid #8bbabb;
        border-radius: 22px;
        transition: .3s all ease;
    }

    .paketContainer input[type='checkbox'] + label,
    .paketContainer input[type='radio'] + label {
        cursor: pointer;
        background: white;
        padding: 5px 20px;
        width: 100%;
        height: 70px;
        text-align: center;
        border: 1px solid #8bbabb;
        border-radius: 22px;
        transition: .3s all ease;
        font-size: 20px;
        transform: scale(0.9);
    }

    input#client_vorgang_5:checked + label {
        background: #d6ae01;
        color: #ffffff;
    }

    input#client_vorgang_7:checked + label {
        background: #871614;
        color: #ffffff;
    }

    /* Sonstiges (SO): grau */
    .vorgangContainer .vorgang-grid input#client_vorgang_8 + label {
        border-color: #adb5bd;
        color: #6c757d;
    }

    input#client_vorgang_8:checked + label {
        background: #6c757d !important;
        border-color: #6c757d !important;
        color: #ffffff !important;
    }

    input[type='checkbox']:checked + label,
    input[type='radio']:checked + label {
        background: #8bbabb;
        color: #ffffff;
    }

    input[type='checkbox'] + label:hover,
    input[type='radio'] + label:hover {
        transform: scale(.98);
    }

    input[type='checkbox']:checked + label::before,
    input[type='checkbox']:not(:checked) + label::before,
    input[type='radio']:checked + label::before,
    input[type='radio']:not(:checked) + label::before {
        content: ' ';
        /*display: inline-block;*/
        width: 17px;
        height: 17px;
        position: relative;
        top: 4px;
        border: 1px solid #bbb;
        background: white;
        margin-right: 1em;
        box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, .1);
        display: none;
    }

    input[type=radio]:checked + label::before,
    input[type=radio]:not(:checked) + label::before {
        border-radius: 30px;
    }

    input[type='checkbox']:hover + label::before,
    input[type='radio']:hover + label::before {
        background: #ddd;
        box-shadow: inset 0 0 0 2px white;
    }

    input[type='checkbox']:checked + label::before,
    input[type='radio']:checked + label::before {
        background: #8bbabb;
        box-shadow: inset 0 0 0 2px white;
    }

    table td {
        padding: 0.4em !important;
    }

    #invoiceInputContainer {
        display: flex;
        justify-content: center;
    }

    #invoiceInputContainer .gebuehren,
    .paket {
        cursor: pointer;
        background: white;
        padding: 5px 20px;
        /*width: 200px;*/
        text-align: center;
        border: 1px solid #8bbabb;
        border-radius: 22px;
        margin: 5px 0;
        display: inline-block;
        transition: .2s all ease;
    }

    #invoiceInputContainer .gebuehren {
        width: 200px;
    }

    #invoiceInputContainer .gebuehren:hover,
    .paket:hover {
        transform: scale(.98);
    }


    #invoiceInputContainer .gebuehren.active,
    .paket.active {
        cursor: pointer;
        background: #8bbabb;
        padding: 5px 20px;
        /*width: 200px;*/
        text-align: center;
        color: #ffffff;
        transform: scale(.9);
    }

    .paket.active {
        transform: scale(1.05);
        border: 2px solid black;
    }

    input.form-control,
    textarea.form-control {
        background: #f8f8f8;
        border: 1px solid #8bbabb;
    }

    .customvorgang {
        width: 95%;
        background: #f8f8f8;
        padding: 5px 20px;
        text-align: center;
        border: 1px solid #8bbabb;
        border-radius: 22px;
        margin: 0 auto;
        display: inline-block;
        transition: .2s all ease;
    }

    #table-invoicestoday tfoot td {
        border: none;
    }

    #table-invoicestoday tfoot tr:first-child td {
        border-top: 1px solid black;
    }

    #table-invoicestoday_info,
    #table-invoicestoday_paginate,
    #table-invoicestoday_length {
        display: none;
    }

    label[for=invoice_paket_0],
    label[for=invoice_paket_1],
    label[for=invoice_paket_2],
    label[for=invoice_paket_6],
    label[for=invoice_paket_7],
    label[for=invoice_paket_8],
    label[for=invoice_paket_9] {
        background: #8bbabb !important;
        color: #ffffff;
    }

    label[for=invoice_paket_3] {
        background: lightgrey !important;
        border: 1px solid lightgrey !important;
        color: #ffffff;
    }

    label[for=invoice_paket_4] {
        background: #ffc107 !important;
        border: 1px solid #ffc107 !important;
        color: #ffffff;
    }

    label[for=invoice_paket_5] {
        background: #dc3545 !important;
        border: 1px solid #dc3545 !important;
        color: #ffffff;
    }

    .paketContainer input[type='checkbox']:checked + label,
    .paketContainer input[type='radio']:checked + label {
        border: 5px solid #000000 !important;
        transform: scale(1.1);
        box-shadow: inset 0 0 5px 2px grey;
        font-size: 16px;
    }

    @media (max-width: 1100px) {
        #invoiceInputContainer table td {
            display: inline-block;
            width: 50%;
        }
    }

    button,
    button:focus,
    button:active {
        outline: none;
    }

    /* Nur die Auftragslisten (clients_today/day) brauchen dieses Zebra -- sie
       teilen sich die ID, haben aber keine eigene Zebra-Regel. Die drei
       Rechnungstabellen tragen .tk-invoices und faerben selbst, dort wuerde
       lightgrey den babyblauen Hover unbrauchbar machen. */
    /* Bewusst leer: die Auftragslisten (clients_today) faerben seit dem
           01.09. selbst im Design der Tageskasse. lightgrey machte den
           babyblauen Hover unbrauchbar und passte zu keiner der beiden Seiten. */

    #regClientList li,
    #regClientList li i {
        transition: .5s transform ease;
    }

    #regClientList li:hover {
        color: #8bbabb;
    }

    #regClientList li:hover i {
        transform: rotate(90deg);
    }

    .abholbereit-icon {
        color: #721c24;
    }

    .abholbereit-icon.active {
        color: #46DD92;
    }


    #stickies-container {
        padding: 1rem;
    }

    .drag {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .sticky {
        background: #8bbabb;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        color: #00243f;
        /* 0 0 150px rgba(0, 0, 0, 0.2); */
        cursor: grab;
        display: inline-block;
        padding: 1rem;
        position: absolute;
        width: 12.5rem;
        transform: scale(0.8);
    }

    .sticky:after {
        content: "";
        position: absolute;
        bottom: -2em;
        left: 0;
        right: 2em;
        border-width: 1em;
        border-style: solid;
        border-color: #8bbabb;
    }

    .sticky:before {
        content: "";
        position: absolute;
        bottom: -2em;
        right: 0;
        border-width: 2em 2em 0 0;
        border-style: solid;
        border-color: #cccccc transparent;
    }

    .sticky:focus-visible {
        outline: none;
    }

    .sticky-blue {
        background: #8bbabb;
    }

    .sticky-blue:after {
        border-color: #8bbabb;
    }

    .sticky-red {
        background: #ff6666;
    }

    .sticky-red:after {
        border-color: #ff6666;
    }

    .sticky-green {
        background: #46DD92;
    }

    .sticky-green:after {
        border-color: #46DD92;
    }

    .sticky-yellow {
        background: #ffc107;
    }

    .sticky-yellow:after {
        border-color: #ffc107;
    }

    .sticky-grey {
        background: #a0a0a0;
    }

    .sticky-grey:after {
        border-color: #a0a0a0;
    }

    .sticky-lila {
        background: #ff66ff;
    }

    .sticky-lila:after {
        border-color: #ff66ff;
    }

    .sticky h3,
    .sticky p {
        /* color: #0065b3; */
        color: #00243f;
        pointer-events: none;
    }

    .sticky h3 {
        font-size: 14px;
        border-bottom: dashed 2px #ffffff;
        margin: 0 0 1rem;
        min-height: 1.3rem;
        padding: 0 1.5rem 0.25rem 0;
        text-align: left;
    }

    .sticky p {
        margin: 0;
        min-height: 4rem;
        text-align: left;
    }

    .sticky .deletesticky {
        color: #ffffff;
        cursor: pointer;
        font-size: 2rem;
        position: absolute;
        right: 0.4rem;
        top: -0.2rem;
    }

    .sticky-form {
        bottom: 1rem;
        position: absolute;
        right: 1rem;
        display: none;
    }

    .sticky-form label,
    .sticky-form input,
    .sticky-form textarea {
        color: #000;
        display: block;
        text-align: left;
    }

    .sticky-form input,
    .sticky-form textarea {
        background-color: #f0f9ff44;
        background-clip: padding-box;
        border: 2px dashed #007bff;
        border-radius: 0.25rem;
        color: #00243f;
        font-family: var(--font-eingabe);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 0.75rem;
        padding: 0.375rem 0.75rem;
        width: calc(100% - 1.5rem);
    }

    .sticky-form input:focus,
    .sticky-form textarea:focus {
        border: 2px dashed #46DD92;
        outline: none;
    }

    .sticky-alert {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 30px;
        color: grey;
    }

    .sticky-alert.active{
        color: #ff6666;
        -webkit-animation: ring 4s .7s ease-in-out infinite;
        -webkit-transform-origin: 50% 4px;
        -moz-animation: ring 4s .7s ease-in-out infinite;
        -moz-transform-origin: 50% 4px;
        animation: ring 4s .7s ease-in-out infinite;
        transform-origin: 50% 4px;
        cursor: pointer;
    }

    @-webkit-keyframes ring {
        0% { -webkit-transform: rotateZ(0); }
        1% { -webkit-transform: rotateZ(30deg); }
        3% { -webkit-transform: rotateZ(-28deg); }
        5% { -webkit-transform: rotateZ(34deg); }
        7% { -webkit-transform: rotateZ(-32deg); }
        9% { -webkit-transform: rotateZ(30deg); }
        11% { -webkit-transform: rotateZ(-28deg); }
        13% { -webkit-transform: rotateZ(26deg); }
        15% { -webkit-transform: rotateZ(-24deg); }
        17% { -webkit-transform: rotateZ(22deg); }
        19% { -webkit-transform: rotateZ(-20deg); }
        21% { -webkit-transform: rotateZ(18deg); }
        23% { -webkit-transform: rotateZ(-16deg); }
        25% { -webkit-transform: rotateZ(14deg); }
        27% { -webkit-transform: rotateZ(-12deg); }
        29% { -webkit-transform: rotateZ(10deg); }
        31% { -webkit-transform: rotateZ(-8deg); }
        33% { -webkit-transform: rotateZ(6deg); }
        35% { -webkit-transform: rotateZ(-4deg); }
        37% { -webkit-transform: rotateZ(2deg); }
        39% { -webkit-transform: rotateZ(-1deg); }
        41% { -webkit-transform: rotateZ(1deg); }

        43% { -webkit-transform: rotateZ(0); }
        100% { -webkit-transform: rotateZ(0); }
    }

    @-moz-keyframes ring {
        0% { -moz-transform: rotate(0); }
        1% { -moz-transform: rotate(30deg); }
        3% { -moz-transform: rotate(-28deg); }
        5% { -moz-transform: rotate(34deg); }
        7% { -moz-transform: rotate(-32deg); }
        9% { -moz-transform: rotate(30deg); }
        11% { -moz-transform: rotate(-28deg); }
        13% { -moz-transform: rotate(26deg); }
        15% { -moz-transform: rotate(-24deg); }
        17% { -moz-transform: rotate(22deg); }
        19% { -moz-transform: rotate(-20deg); }
        21% { -moz-transform: rotate(18deg); }
        23% { -moz-transform: rotate(-16deg); }
        25% { -moz-transform: rotate(14deg); }
        27% { -moz-transform: rotate(-12deg); }
        29% { -moz-transform: rotate(10deg); }
        31% { -moz-transform: rotate(-8deg); }
        33% { -moz-transform: rotate(6deg); }
        35% { -moz-transform: rotate(-4deg); }
        37% { -moz-transform: rotate(2deg); }
        39% { -moz-transform: rotate(-1deg); }
        41% { -moz-transform: rotate(1deg); }

        43% { -moz-transform: rotate(0); }
        100% { -moz-transform: rotate(0); }
    }

    @keyframes ring {
        0% { transform: rotate(0); }
        1% { transform: rotate(30deg); }
        3% { transform: rotate(-28deg); }
        5% { transform: rotate(34deg); }
        7% { transform: rotate(-32deg); }
        9% { transform: rotate(30deg); }
        11% { transform: rotate(-28deg); }
        13% { transform: rotate(26deg); }
        15% { transform: rotate(-24deg); }
        17% { transform: rotate(22deg); }
        19% { transform: rotate(-20deg); }
        21% { transform: rotate(18deg); }
        23% { transform: rotate(-16deg); }
        25% { transform: rotate(14deg); }
        27% { transform: rotate(-12deg); }
        29% { transform: rotate(10deg); }
        31% { transform: rotate(-8deg); }
        33% { transform: rotate(6deg); }
        35% { transform: rotate(-4deg); }
        37% { transform: rotate(2deg); }
        39% { transform: rotate(-1deg); }
        41% { transform: rotate(1deg); }

        43% { transform: rotate(0); }
        100% { transform: rotate(0); }
    }

    .form-control {
        text-transform: uppercase;
    }

    h4 {
        color: #5eb5e0;
    }

    #client_vorgang label {
        display: block;
    }

    a {
        cursor: pointer;
    }

    table tr td:nth-child(2) {
        text-align: right;
    }

    #client_created_at_time {
        display: none;
    }

    #client_created_at,
    #client_created_at_date_month,
    #client_created_at_date_day,
    #client_created_at_date_year {
        border: none;
        vertical-align: top;
    }

    #client_created_at_date_day {
        float: left;
    }

    .dropdown-item {
        cursor: pointer;
    }

    #invoice_abholbereit {
        visibility: visible;
    }

    /* ===== Termin-Sticker (Startseite) ===== */
    .finish-date-sticker {
        display: inline-block;
        background: #fff5f5;
        color: #dc3545;
        border: 1px solid #dc3545;
        border-radius: 8px;
        padding: 4px 20px;
        font-family: var(--font-lese);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: .03em;
        box-shadow: 0 2px 8px rgba(220, 53, 69, .18);
        animation: finishDatePulse 4s ease-in-out infinite;
    }

    @keyframes finishDatePulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .8; }
    }

    /* ===== Globale Suche: Bereichs-Badges & Ergebnistabelle ===== */
    .area-badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 12px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .badge-offen {
        background: #fff8e0;
        color: #a17d00;
        border: 1px solid #F2D231;
    }

    .badge-unvollst {
        background: #fff1e6;
        color: #c25e00;
        border: 1px solid #ED8936;
    }

    .badge-klaerfall {
        background: #f6ecfe;
        color: #7e22ce;
        border: 1px solid #a855f7;
    }

    /* Anzahl Aufträge: bewusst ausfüllen, hervorgehobener Hintergrund */
    #client_anzahl {
        background: #fff8e0;
        border: 1px solid #F2D231;
        border-radius: 5px;
        font-weight: 700;
        text-align: center;
    }

    #client_anzahl::placeholder {
        color: #a17d00;
        opacity: .7;
    }

    /* Fehlende Pflichtfelder: rote Liste neben SPEICHERN */
    .save-missing {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-basis: 100%;
        color: #c0392b;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .05em;
        text-align: center;
        margin-top: 4px;
    }

    /* Speichern-Zeile: dezent, flach, zeitlos, mittig im Container */
    .save-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
    }

    .unvollst-chk {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 46px;
        padding: 0 18px;
        margin: 0;
        border: 1px solid #d7dde3;
        border-radius: 5px;
        background: #fff;
        color: #5a6572;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        cursor: pointer;
        user-select: none;
        transition: border-color .15s, background .15s, color .15s;
    }

    .unvollst-chk:hover {
        border-color: #b9c2cc;
    }

    .unvollst-chk:has(input:checked) {
        border-color: #ED8936;
        background: #fff8f2;
        color: #c25e00;
    }

    .unvollst-chk input[type='checkbox'] {
        visibility: visible;
        width: 15px;
        height: 15px;
        float: none;
        margin: 0;
        accent-color: #ED8936;
        cursor: pointer;
    }

    .btn-save {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 46px;
        padding: 0 48px;
        border: 1px solid #46BDDD;
        border-radius: 5px;
        background: #46BDDD;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .14em;
        cursor: pointer;
        transition: background .15s, border-color .15s, opacity .15s;
    }

    .btn-save:hover {
        background: #33b1d6;
        border-color: #33b1d6;
        color: #fff;
    }

    .btn-save:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    /* Hold-to-Save: dezente Füllung beim Gedrückthalten, 1s von links nach rechts */
    .btn-save::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        background: rgba(255, 255, 255, .18);
    }

    .btn-save.holding::before {
        width: 100%;
        transition: width 0.3s linear;
    }

    .btn-save > span {
        position: relative;
        z-index: 1;
    }

    .btn-save.saving {
        background: #1e9e63;
        border-color: #1e9e63;
    }

    .btn-save.saving::before {
        width: 100%;
    }

    .badge-zahlung {
        background: #e6f7fb;
        color: #1a8dad;
        border: 1px solid #46BDDD;
    }

    .badge-web {
        background: #f3ecff;
        color: #7c4bd1;
        border: 1px solid #b79aec;
    }

    .badge-archiv {
        background: #e9f9f0;
        color: #1e9e63;
        border: 1px solid #46DD92;
    }

    .badge-muell {
        background: #fdecec;
        color: #b02a37;
        border: 1px solid #e6a5a0;
    }

    .zulio-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #e9f9f0;
        color: #1e9e63;
        border: 1px solid #1e9e63;
        border-radius: 12px;
        padding: 1px 8px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .zulio-badge svg {
        width: 11px;
        height: 11px;
        flex: none;
    }

    .kennz-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #f0f2f4;
        color: #43525f;
        border: 1px solid #97a4b0;
        border-radius: 12px;
        padding: 1px 8px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .ab-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: #212529;
        color: #ffffff;
        border: 1px solid #212529;
        border-radius: 12px;
        padding: 1px 8px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .ab-badge small {
        font-size: 7px;
        font-weight: 600;
        opacity: .75;
        letter-spacing: .08em;
    }

    /* EV = Kurzzeitkennzeichen: gelb/schwarz wie der Streifen auf dem echten Schild.
       Gleiche Masse wie .ab-badge, damit die Spalte ruhig bleibt. */
    /* Schmale Anzahl-Spalte der Auftragsliste: 1 bleibt blass, alles darueber faellt auf */
    #zk-clients th.zk-anz, #zk-clients td.zk-anz {
        padding-left: 2px; padding-right: 2px; text-align: center;
    }
    #zk-clients th.zk-anz input {
        width: 100%; min-width: 0; padding: 1px 2px; font-size: 10px; text-align: center;
    }
    #zk-clients td.zk-anz .cs { justify-content: center; overflow: visible; }
    .zk-anz-eins { color: #9db2c4; }
    .zk-anz-mehr {
        display: inline-block; min-width: 15px; padding: 0 3px;
        background: #14273D; color: #fff; border-radius: 8px;
        font-size: 10px; font-weight: 700; line-height: 15px;
    }

    /* Ausfuhr: Rot mit weisser Schrift (Projekt-Rot wie beim Verlust-Hinweis) */
    .av-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: #b02a37;
        color: #ffffff;
        border: 1px solid #9c2531;
        border-radius: 12px;
        padding: 1px 8px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .av-badge small {
        font-size: 7px;
        font-weight: 600;
        opacity: .75;
        letter-spacing: .08em;
    }

    /* Umschreibung / Wiederzulassung: Marine mit weisser Schrift (App-Navy) */
    .zul-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: #1e4d8c;
        color: #ffffff;
        border: 1px solid #1a4478;
        border-radius: 12px;
        padding: 1px 8px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .zul-badge small {
        font-size: 7px;
        font-weight: 600;
        opacity: .75;
        letter-spacing: .08em;
    }

    .ev-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: #f9d616;
        color: #14181c;
        border: 1px solid #14181c;
        border-radius: 12px;
        padding: 1px 8px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .ev-badge small {
        font-size: 7px;
        font-weight: 600;
        opacity: .75;
        letter-spacing: .08em;
    }

    #feinstaubGroup input[type='radio'] + label {
        width: auto;
        display: inline-block;
        padding: 5px 30px;
        margin: 0 6px;
    }

    .abt-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border-radius: 12px;
        padding: 1px 8px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    /* Kassierer (wer kassiert hat), nutzt .abt-badge als Basis, nur Overrides hier */
    .kassierer-badge {
        margin-top: 3px;
        background: #e9f9f0;
        color: #1e9e63;
        border: 1px solid #a6e0c1;
    }

    /* Benutzerfarben */
    .abt-le {
        background: #e3f4fd;
        color: #2b8fc4;
        border: 1px solid #8ecdec;
    }

    .abt-km {
        background: #fff3e0;
        color: #e07b00;
        border: 1px solid #f5b56b;
    }

    .abt-wa {
        background: #f5efe4;
        color: #8a6d3b;
        border: 1px solid #c9b28a;
    }

    .abt-ye {
        background: #f3ecfd;
        color: #7c4fd6;
        border: 1px solid #c9aef2;
    }

    /* Kennzeichen-Verkauf: Anzahl/Preis + Summe */
    .kennz-input {
        width: 80px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        padding: 5px 8px;
        font-size: 14px;
        text-align: center;
    }

    .kennz-input:focus {
        outline: none;
        border-color: #46B2DC;
        box-shadow: 0 0 0 3px rgba(70, 178, 220, .15);
    }

    #kennzSumme {
        display: inline-block;
        margin-left: 14px;
        background: #e9f9f0;
        border: 1px solid #bfe8d4;
        border-radius: 8px;
        padding: 6px 16px;
        font-family: var(--font-lese);
        font-size: 15px;
        color: #1e9e63;
        vertical-align: middle;
    }

    #kennzSumme.d-none {
        display: none !important;
    }

    /* Alters-Ampel (Zahlungen) */
    .alter-badge {
        display: inline-block;
        min-width: 34px;
        text-align: center;
        border-radius: 10px;
        padding: 0 6px;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 700;
    }

    .alter-gruen {
        background: #e9f9f0;
        color: #1e9e63;
        border: 1px solid #46DD92;
    }

    .alter-orange {
        background: #fff3e0;
        color: #e07b00;
        border: 1px solid #f5b56b;
    }

    .alter-rot {
        background: #fdecec;
        color: #b02a37;
        border: 1px solid #e6a5a0;
    }

    /* Schnellansicht-Modal */
    .quick-view {
        font-family: var(--font-lese);
        border: 1px solid #cadff1;
        border-radius: 12px;
        box-shadow: 0 14px 44px rgba(20, 39, 61, .2);
        overflow: hidden;
    }

    .quick-view .modal-header {
        background: #e9f3fc;
        border-bottom: 1px solid #cadff1;
        border-radius: 0;
        align-items: center;
    }

    .quick-view .modal-title {
        font-size: 14px;
        font-weight: 700;
        color: #14273D;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .quick-view .close {
        color: #14273D;
        opacity: .5;
        text-shadow: none;
    }

    .quick-view .close:hover {
        opacity: 1;
    }

    .qv-table {
        width: 100%;
        font-size: 12px;
        border-collapse: collapse;
    }

    .qv-table td {
        padding: 4px 8px !important;
        border-bottom: 1px solid #eef2f6;
        vertical-align: top;
    }

    .qv-table tr:hover td {
        background: #f6fafe;
    }

    .qv-table td:first-child {
        color: #6b87a3;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .05em;
        white-space: nowrap;
        width: 110px;
        padding-top: 6px !important;
    }

    .qv-table td:nth-child(2) {
        text-align: left !important;
        color: #14273D;
        font-weight: 500;
    }

    .qv-table tr:last-child td {
        border-bottom: none;
    }

    .quick-view .modal-footer {
        border-top: 1px solid #eef2f6;
        gap: 6px;
    }

    .quick-view .modal-footer .btn {
        border: none;
        border-radius: 9px;
        font-weight: 600;
        font-size: 12px;
        padding: 6px 12px;
        background: #f1f3f5;
        color: #64748b;
        transition: background .12s, color .12s;
    }

    .quick-view .modal-footer .btn:hover {
        background: #e2e6ea;
        color: #14273D;
    }

    .quick-view #qvEdit {
        background: #e9f3fc;
        color: #2b6cb0;
    }

    .quick-view #qvEdit:hover {
        background: #d7e9fa;
        color: #245a94;
    }

    .quick-view #qvPrint {
        background: #eef2f7;
        color: #14273D;
    }

    .quick-view #qvPrint:hover {
        background: #dfe6ee;
        color: #14273D;
    }

    /* Zulio-Unteroptionen als dezente grüne Karte */
    /* ABZULIO: Sicherheitscodes sind case-sensitiv - Groß-/Kleinschreibung wie getippt anzeigen */
    #abzulioZb1,
    #abzulioCodeHinten,
    #abzulioCodeVorn {
        text-transform: none;
    }

    /* ABZULIO: modernes, kompaktes Formular als Karte */
    #abzulioGroup {
        background: #ffffff;
        border: 1px solid #e3e8ec;
        border-radius: 14px;
        padding: 18px 20px;
        max-width: 520px;
        margin: 0 auto;
        box-shadow: 0 6px 18px rgba(20, 39, 61, .06);
    }

    #abzulioGroup h5 {
        font-weight: 700;
        color: #14273D;
        margin-bottom: 14px;
    }

    #abzulioGroup .form-control {
        border: 1px solid #d7dde2;
        border-radius: 9px;
        box-shadow: none;
        transition: border-color .15s, box-shadow .15s;
    }

    #abzulioGroup .form-control:focus {
        border-color: #1e9e63;
        box-shadow: 0 0 0 3px rgba(30, 158, 99, .15);
    }

    #abzulioGroup .mb-3 {
        margin-bottom: .6rem !important;
    }

    #abzulioFinPz {
        border: 1px solid #d7dde2;
        border-radius: 9px;
        color: #14273D;
    }

    /* moderne Toggle-Switches statt schlichter Checkboxen */
    .abz-switch {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        cursor: pointer;
        margin: 0;
        user-select: none;
    }

    .abz-switch input[type='checkbox'] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
        float: none;
    }

    .abz-switch .abz-slider {
        position: relative;
        width: 40px;
        height: 22px;
        background: #cbd3da;
        border-radius: 22px;
        transition: background .2s;
        flex-shrink: 0;
    }

    .abz-switch .abz-slider::before {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
        transition: transform .2s;
    }

    .abz-switch input:checked + .abz-slider {
        background: #1e9e63;
    }

    .abz-switch input:checked + .abz-slider::before {
        transform: translateX(18px);
    }

    .abz-switch input:focus + .abz-slider {
        box-shadow: 0 0 0 3px rgba(30, 158, 99, .2);
    }

    /* KENNZEICHEN-Verkauf: eine saubere Karte */
    .kv-card {
        max-width: 380px;
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid #e6ebf0;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(20, 39, 61, .06);
        padding: 2px 18px;
        text-transform: none;
    }

    .kv-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 50px;
        padding: 9px 0;
        border-bottom: 1px solid #f0f3f6;
    }

    .kv-line:last-child {
        border-bottom: none;
    }

    .kv-line .kv-label {
        font-size: 13px;
        font-weight: 600;
        color: #14273D;
    }

    .kv-ctrl {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .kv-price {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .kv-x {
        color: #c0c7ce;
        font-size: 14px;
    }

    .kv-unit {
        font-size: 12px;
        color: #9aa3ab;
    }

    /* FIN-Pruefziffer: gruen NUR wenn Stelle 9 uebereinstimmt (Zusatzbestaetigung).
       Sonst neutral, denn bei europaeischen Fahrzeugen ist eine Abweichung normal. */

    .kv-input {
        /* Betraege brauchen mehr Platz als Stueckzahlen -- die Unterscheidung
           macht der Selektor weiter unten ueber step="0.01". */
        width: 72px;
        text-align: center;
        border: 1px solid #dbe1e7;
        border-radius: 8px;
        padding: 8px 6px;
        font-size: 16px;
        background: #fff;
        box-shadow: none;
    }

    /* Betragsfelder (Preise, Gebuehren) sind breiter als Stueckzahlen. */
    .kv-input[step="0.01"] {
        width: 104px;
        letter-spacing: .3px;
    }

    .kv-input:focus {
        border-color: #1e9e63;
        box-shadow: 0 0 0 3px rgba(30, 158, 99, .13);
        outline: none;
    }

    .kv-input:disabled {
        opacity: .4;
        background: #f4f6f8;
        cursor: not-allowed;
    }

    /* Segmented control (iOS-Stil: grauer Track, weißer aktiver Knopf).
       Selektoren mit input[type='radio'] + label, um die globalen runden Radio-Pillen zu schlagen. */
    .kv-seg {
        display: inline-flex;
        background: #eef1f4;
        border-radius: 8px;
        padding: 3px;
        gap: 2px;
    }

    .kv-seg input[type='radio'] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
        float: none;
    }

    .kv-seg input[type='radio'] + label {
        margin: 0;
        width: auto;
        min-width: 46px;
        padding: 6px 16px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: #7a838c;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-align: center;
        transition: background .15s ease, color .15s ease;
        box-shadow: none;
    }

    .kv-seg input[type='radio'] + label::before {
        content: none !important;
        display: none !important;
    }

    .kv-seg input[type='radio'] + label:hover {
        color: #14273D;
        background: transparent;
        transform: none;
    }

    .kv-seg input[type='radio']:checked + label {
        background: #ffffff;
        color: #1e9e63;
        box-shadow: 0 1px 3px rgba(20, 39, 61, .12);
    }

    /* Mini-Kennzeichen (EU-Schild) für die Auftragsliste, echte FE-Schrift (EuroPlate) */
    @font-face {
        font-family: 'EuroPlate';
        src: url('/assets/fonts/europlate.woff2') format('woff2');
        font-display: swap;
    }

    .kz-schild {
        display: inline-flex;
        align-items: stretch;
        height: 18px;
        vertical-align: middle;
        margin: 1px 3px 1px 0;
        filter: drop-shadow(0 1px 1px rgba(20, 39, 61, .25));
    }

    .kz-schild img {
        display: block;
        height: 100%;
        width: auto;
    }

    /* Saisonkennzeichen: die beiden Monate stehen uebereinander, dazwischen ein
       duenner Strich -- wie auf dem echten Schild (dort rechts neben der Nummer). */
    .kz-schild .kz-saison {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: url('/assets/kennzeichen/teile/mitte.png');
        background-size: 100% 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 6px;
        font-weight: 700;
        line-height: 1.05;
        color: #000;
        padding: 1px 3px 0 2px;
        letter-spacing: .2px;
    }

    .kz-schild .kz-saison span:first-child {
        border-bottom: 1px solid #000;
        padding: 0 1px 1px;
    }

    .kz-schild .kz-saison span:last-child {
        padding: 1px 1px 0;
    }

    .kz-schild .kz-txt {
        display: flex;
        align-items: center;
        background: url('/assets/kennzeichen/teile/mitte.png');
        background-size: 100% 100%;
        font-family: 'EuroPlate', 'DejaVu Sans Mono', 'Courier New', monospace;
        font-size: 17px;
        font-weight: 400;
        font-synthesis: none;
        color: #000;
        padding: 2px 2px 0;
        white-space: nowrap;
        letter-spacing: 0;
        line-height: 1;
    }

    /* Feinstaubplakette (assets/fsp.svg, quadratisch) */
    .fsp-symbol {
        display: inline-block;
        height: 18px;
        width: 18px;
        vertical-align: middle;
        margin: 1px 4px 1px 0;
        background: url('/assets/fsp.svg') center/contain no-repeat;
    }

    /* Kennzeichen-Halterung: echte Grafik (assets/kennzeichenhalterung.svg, 1200x190).
       Hoehe passend zum Kennzeichen-Schild daneben, Breite folgt dem Seitenverhaeltnis. */
    .halter-symbol {
        display: inline-block;
        height: 18px;
        width: 114px;
        vertical-align: middle;
        margin: 1px 4px 1px 0;
        background: url('/assets/kennzeichenhalterung.svg') center/contain no-repeat;
    }

    #zulioAbGroup {
        background: #f2faf6;
        border: 1px solid #bfe8d4;
        border-radius: 10px;
        padding: 12px 16px;
        max-width: 480px;
        margin: 0 auto 16px;
    }

    #zulioAbGroup > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #zulioAbGroup #zulioAbExtra {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed #bfe8d4;
    }

    .zulio-ab-anzahl {
        width: 64px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 13px;
        text-align: center;
    }

    .zulio-ab-kennz {
        flex: 1;
        min-width: 0;
        border: 1px solid #ced4da;
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 13px;
        text-transform: uppercase;
    }

    .zulio-ab-anzahl:focus,
    .zulio-ab-kennz:focus {
        outline: none;
        border-color: #1e9e63;
        box-shadow: 0 0 0 3px rgba(30, 158, 99, .12);
    }

    /* Moderne Checkboxen: Label klickbar, Häkchen-Kästchen */
    .mod-check {
        text-align: left;
    }

    /* ===== Feld-Fehlermeldungen: IMMER absolut oben rechts IM Feld =====
       (nie darunter -- sonst springt das Layout beim Ein-/Ausblenden) */
    .feld-fehler-wrap { position: relative; }

    .feld-fehler {
        position: absolute;
        top: 3px;
        right: 10px;
        z-index: 3;
        pointer-events: none;
        max-width: 62%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: var(--font-lese);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.1;
        color: #b03535;
        text-transform: none;
    }

    .feld-fehler:empty {
        display: none;
    }

    input.feld-ungueltig,
    input.feld-ungueltig:focus {
        border-color: #c94a4a !important;
        background: #fdf2f2 !important;
    }

    /* eVB "+"-Knopf rechts im Feld: weitere eVB-Nummern / Notizen (frei, OHNE Validierung) */
    .evb-feld-wrap { position: relative; }
    input#client_evb { padding-right: 34px !important; }
    .evb-plus {
        position: absolute;
        right: 5px;
        bottom: 6px; /* Fallback, JS zentriert exakt zum Input (setzt top) */
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 6px;
        background: rgba(20,39,61,.06);
        color: #5a6b7b;
        cursor: pointer;
        z-index: 3;
        padding: 0;
        user-select: none;
    }
    .evb-plus svg { display: block; }
    .evb-plus:hover { background: #e9f3fc; color: #2b6cb0; }
    .evb-plus.an { background: #2b6cb0; color: #fff; }
    .evb-extra-box { margin-top: 6px; }
    .evb-extra-box.evb-zu { display: none !important; }      /* eigener Auf/Zu-Zustand ("+"-Knopf) */
    .evb-extra-box.vorgang-aus { display: none !important; } /* Vorgang blendet das eVB-Feld aus */
    /* Notizen normal schreibbar (kein Uppercase-Zwang der Seite) + kompakte Hoehe */
    .evb-extra-box textarea {
        text-transform: none !important;
        min-height: 64px !important;
        height: auto !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        width: 100%;
        padding: 8px 12px !important;
    }

    /* eVB: Versicherer-Anzeige rechts im Feld (Kennung = erste 2 Zeichen; right 36px = Platz fuer den "+") */
    .evb-vu {
        position: absolute;
        right: 36px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        pointer-events: none;
        max-width: 45%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: var(--font-lese);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .03em;
        color: #2b6cb0;
        opacity: 0;
        transition: opacity .12s;
    }

    .evb-vu.an {
        opacity: 1;
    }

    /* unbekannte Kennung: dezent gelb markieren (Praefix ggf. nachtragen) */
    input#client_evb.evb-unbekannt {
        border-color: #d3a35c !important;
        background: #fdf7ec !important;
    }

    /* DAUER-eVB: kleine Checkbox direkt unter dem eVB-Feld (client_new) */
    .dauer-evb-wrap {
        margin: 6px 0 0 2px;
    }

    .dauer-evb-wrap input[type='checkbox'] + label {
        font-size: 12px;
        letter-spacing: .03em;
    }

    .dauer-evb-wrap input[type='checkbox'] + label::before {
        width: 15px !important;
        height: 15px !important;
        border-radius: 4px !important;
        line-height: 11px;
        font-size: 10px;
    }

    .mod-check input[type='checkbox'] + label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: auto;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent !important;
        color: #43525f !important;
        cursor: pointer;
        font-family: var(--font-lese);
        font-size: 13px;
        text-align: left;
    }

    .mod-check input[type='checkbox'] + label:hover {
        transform: none;
        color: #14273D !important;
    }

    .mod-check input[type='checkbox'] + label::before {
        content: '' !important;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        border: 2px solid #b9c2cb !important;
        border-radius: 5px !important;
        background: #ffffff !important;
        margin: 0 !important;
        top: 0 !important;
        box-shadow: none !important;
        flex: none;
        text-align: center;
        font-size: 12px;
        line-height: 14px;
        color: #ffffff !important;
        transition: .15s all ease;
    }

    .mod-check input[type='checkbox']:checked + label::before {
        content: '\2714' !important;
        background: #46B2DC !important;
        border-color: #46B2DC !important;
    }

    .mod-check input[type='checkbox'] + label:hover::before {
        border-color: #46B2DC !important;
    }

    .abt-es {
        background: #e0f7f5;
        color: #0f9d8f;
        border: 1px solid #6fd3c9;
    }

    .search-results {
        font-family: var(--font-lese);
        font-size: 12px;
        width: 100%;
        border-collapse: collapse;
    }

    .search-results thead th {
        background: #f4f6f8;
        border-bottom: 2px solid #d7dde3;
        padding: 5px 8px !important;
        font-size: 10px;
        letter-spacing: .05em;
        color: #5a6570;
        text-transform: uppercase;
    }

    .search-results tbody td {
        padding: 4px 8px !important;
        line-height: 1.35;
        border-bottom: 1px solid #edf0f2;
        vertical-align: middle;
    }

    .search-results tr td:nth-child(2) {
        text-align: left;
    }

    .search-results tbody tr:nth-child(even) {
        background: #fafbfc;
    }

    .search-results tbody tr:hover {
        background: #e9f5f8;
    }

    /* altes "Suchen"-Feld der Tabellen ausgeblendet - ersetzt durch die globale Suche im Header */
    .dataTables_wrapper .dataTables_filter {
        display: none;
    }

    /* ===== Kompakte moderne Seitenköpfe ===== */
    h2 {
        font-family: var(--font-lese);
        font-size: 20px;
        font-weight: 600;
        color: #14273D;
        letter-spacing: .02em;
        margin: 2px 0 6px;
    }

    h2 ~ hr {
        margin: 8px 0 14px;
        border-top: 1px solid #e3e8ec;
    }

    h2 ~ a.btn {
        padding: 2px 12px;
        font-size: 12px;
        border-radius: 6px;
    }

    /* ===== Vorgang-Auswahl kompakt ===== */
    .vorgangContainer {
        background: #f8fafb;
        border: 1px solid #e3e8ec;
        border-radius: 8px;
    }

    .vorgangContainer h3 {
        font-family: var(--font-lese);
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #5a6570;
        margin-bottom: 10px;
    }

    .vorgang-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .vorgang-grid > div {
        margin: 0;
    }

    /* Gruppen-Trenner: volle Breite -> erzwingt eine neue Zeile im flex-wrap-Raster */
    .vorgang-grid .vorgang-gruppe {
        flex: 0 0 100%;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 2px 0 1px;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #9aa5b0;
        user-select: none;
    }
    .vorgang-grid .vorgang-gruppe:first-child { margin-top: 0; }
    .vorgangContainer .vorgang-grid label svg { width: 11px !important; height: 11px !important; margin-right: 4px !important; }
    /* nur links ein Strich -- er dehnt sich und schiebt den Titel nach rechts */
    .vorgang-grid .vorgang-gruppe::before {
        content: '';
        flex: 1;
        height: 1px;
        background: #dde4ea;
    }


    /* Globales Custom-Tooltip (ersetzt native title-Tooltips) */
    .ctt {
        position: fixed;
        z-index: 99999;
        background: #14273D;
        color: #fff;
        font-family: var(--font-lese);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35;
        letter-spacing: normal;
        text-transform: none;
        text-align: left;
        padding: 5px 9px;
        border-radius: 6px;
        box-shadow: 0 6px 20px rgba(20, 39, 61, .22);
        pointer-events: none;
        max-width: 280px;
        opacity: 0;
        transform: translateY(3px);
        transition: opacity .1s ease, transform .1s ease;
    }

    .ctt.ctt-show {
        opacity: 1;
        transform: translateY(0);
    }

    .ctt::after {
        content: '';
        position: absolute;
        /* Wert kommt aus dem Skript und zeigt auf die Mitte des Ziels;
           50% ist der Rueckfall, solange nichts gesetzt ist. */
        left: var(--ctt-zeiger, 50%);
        top: 100%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #14273D;
    }

    .ctt.ctt-below::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: #14273D;
    }

    .vorgangContainer .vorgang-grid input[type='radio'] + label {
        display: inline-block;
        width: auto;
        margin: 0;
        padding: 4px 10px;
        font-family: var(--font-lese);
        font-size: 11px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        background: #ffffff;
        color: #5a6570;
        text-align: center;
        white-space: nowrap;
    }

    .vorgangContainer .vorgang-grid input[type='radio'] + label:hover {
        transform: none;
        border-color: #46B2DC;
        background: #eaf4f8;
        color: #14273D;
    }

    .vorgangContainer .vorgang-grid input[type='radio']:checked + label {
        background: #46B2DC;
        border-color: #46B2DC;
        color: #ffffff;
        font-weight: 600;
    }

    .vorgangContainer .customvorgang {
        width: 100%;
        padding: 6px 14px;
        font-size: 13px;
        border-radius: 6px;
        text-align: left;
    }

    /* ===== Moderne kompakte Tabellen (DataTables) ===== */
    /* rohe Tabelle verstecken, bis DataTables sie aufgebaut hat (verhindert Flackern) */
    #zk-clients:not(.dataTable),
    #table-invoicestoday:not(.dataTable) {
        visibility: hidden;
    }

    table.dataTable {
        font-family: var(--font-lese);
        font-size: 12px;
        width: 100% !important;
        border-collapse: collapse !important;
        border: none;
    }

    table.dataTable thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #f4f6f8;
        border-bottom: 2px solid #d7dde3;
        padding: 5px 6px !important;
        font-size: 10px;
        letter-spacing: .05em;
        color: #5a6570;
        vertical-align: middle;
    }

    table.dataTable thead input {
        width: 100%;
        padding: 3px 6px;
        font-size: 11px;
        font-family: inherit;
        border: 1px solid #ced4da;
        border-radius: 4px;
        background: #ffffff;
        box-sizing: border-box;
    }

    /* Sortier-Indikatoren: gut sichtbare Pfeile statt der Mini-Hintergrundbilder */
    table.dataTable thead th.sorting,
    table.dataTable thead th.sorting_asc,
    table.dataTable thead th.sorting_desc {
        background-image: none !important;
        padding-right: 24px !important;
        cursor: pointer;
    }

    table.dataTable thead th.sorting::after,
    table.dataTable thead th.sorting_asc::after,
    table.dataTable thead th.sorting_desc::after {
        font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 12px;
        position: absolute;
        right: 7px;
        top: 50%;
        transform: translateY(-50%);
    }

    table.dataTable thead th.sorting::after {
        content: "\f0dc"; /* fa-sort */
        color: #b8c2ca;
    }

    table.dataTable thead th.sorting_asc::after {
        content: "\f0de"; /* fa-sort-up */
        color: #46B2DC;
    }

    table.dataTable thead th.sorting_desc::after {
        content: "\f0dd"; /* fa-sort-down */
        color: #46B2DC;
    }

    /* leere Spaltenköpfe (z. B. Aktion) bekommen keinen Pfeil */
    table.dataTable thead th:empty::after {
        content: none;
    }

    table.dataTable thead input:focus {
        outline: none;
        border-color: #46B2DC;
        box-shadow: 0 0 0 2px rgba(70, 178, 220, .15);
    }

    table.dataTable tbody td {
        padding: 3px 6px !important;
        line-height: 1.35;
        border-bottom: 1px solid #edf0f2;
        vertical-align: middle;
    }

    /* Zellen immer einzeilig; bei Überbreite scrollt die ganze Tabelle horizontal */
    table.dataTable th,
    table.dataTable td,
    .search-results th,
    .search-results td {
        white-space: nowrap;
    }

    .dataTables_wrapper,
    .search-results-wrap {
        overflow-x: auto;
    }

    /* Die Listen-Seiten nutzen mehr Bildschirm als der Bootstrap-Standard
       (1140px). Der Zuwachs geht ueberproportional an die Datums-Spalte
       (Termin + Taschen-Badge) und an die Abteilung. */
    .container.zk-weit { max-width: min(1800px, 97vw); }

    /* Tabelle füllt exakt die Breite; Spalten prozentual, Zellen scrollen in sich */
    #zk-clients {
        table-layout: fixed;
    }

    /* Zweite Zeile der Datums-Zelle: Termin und Taschen-Badge scrollen in der
       Zelle, statt sie aufzublaehen (gleicher Wrapper wie alle anderen Zellen). */
    #zk-clients td:nth-child(1) .zk-dat2 { max-width: 100%; margin-top: 1px; }

    /* Spalte 4 = Anzahl (seit 08.08.2026): feste schmale Breite, Rest prozentual.
       ACHTUNG: table-layout ist fixed -- diese Werte bestimmen die Spaltenbreiten
       allein. Bei Aenderungen an der Spaltenreihenfolge HIER mitziehen. */
    #zk-clients th:nth-child(1) { width: 21%; }   /* Datum   */
    #zk-clients th:nth-child(2) { width: 15%; }   /* Name    */
    #zk-clients th:nth-child(3) { width: 10%; }   /* Telefon */
    #zk-clients th:nth-child(4) { width: 34px; }  /* Anzahl  */
    #zk-clients th:nth-child(5) { width: 13%; }   /* Vorgang */
    #zk-clients th:nth-child(6) { width: 10%; }   /* Auto    */
    #zk-clients th:nth-child(7) { width: 9%; }    /* Kennz.  */
    #zk-clients th:nth-child(8) { width: 12%; }   /* Aktion  */
    #zk-clients th:nth-child(9) { width: 8%; }    /* Abt.    */

    #zk-clients td {
        overflow: hidden;
    }

    #zk-clients .cs {
        max-width: 100%;
    }

    .search-results {
        table-layout: fixed;
    }

    .search-results th:nth-child(1) { width: 10%; }
    .search-results th:nth-child(2) { width: 10%; }
    .search-results th:nth-child(3) { width: 16%; }
    .search-results th:nth-child(4) { width: 11%; }
    .search-results th:nth-child(5) { width: 15%; }
    .search-results th:nth-child(6) { width: 12%; }
    .search-results th:nth-child(7) { width: 11%; }
    .search-results th:nth-child(8) { width: 9%; }
    .search-results th:nth-child(9) { width: 6%; }

    .search-results td {
        overflow: hidden;
    }

    .search-results .cs {
        max-width: 100%;
    }

    /* lange Inhalte scrollen innerhalb der Zelle (dezente, dünne Scrollbar) */
    /* Hover-Fenster mit den Wunschkennzeichen als echte Schilder.
       Haengt zur Laufzeit am <body> (das JS verschiebt es dorthin), weil
       der Zellen-Scroller .cs overflow-x:auto hat und bei schmalem Fenster
       zusaetzlich .zk-scrollwrap -- beide wuerden einen Ueberhang
       abschneiden. Deshalb hier position: fixed. */
    /* Wunschkennzeichen klein RECHTS NEBEN dem Vorgang, in derselben Zeile. */
    /* Traeger der Schilder: im Dokument, aber NICHT sichtbar. Der Betrieb
       will sie nur beim Ueberfahren sehen, dauerhaft waren sie zu viel.
       display:none kostet weder Layout noch Zeichnen; die Bilder laedt der
       Browser trotzdem, das Fenster erscheint also ohne Flackern.
       ⚠️ Nicht loeschen: das Fenster klont genau diesen Knoten. */
    .wkz-inline { display: none; }
    /* Zeigt an, dass in dieser Zelle etwas verborgen liegt. Ohne Hinweis
       findet die Funktion niemand. */
    #zk-clients tbody td:has(> .cs > .wkz-inline) { cursor: help; }
    .wkz-inline .kz-schild { height: 15px; margin: 0; }
    .wkz-inline .kz-schild .kz-txt { font-size: 14px; }
    /* Auswahltexte statt Kennzeichen: schlicht schreiben. Als Schild waeren
       sie uebergross und unleserlich (der Betrieb hat genau das gemeldet). */
    /* ⚠️ NICHT .kz-text nennen: den Namen belegt die WKZ-Groessen-Auswahl
       (js-script), ihre Regel steht SPAETER im Stylesheet und gewinnt bei
       gleicher Spezifitaet -- mit ihrem display:flex braeche der Text aus
       der Zeile aus. */
    .wkz-text { font-size: 11px; color: #5a6570; letter-spacing: .2px;
        white-space: nowrap; }
    .wkz-pop .wkz-text { margin-left: 1px; }

    /* Das Fenster beim Ueberfahren: hier stehen die Schilder, in der Zeile
       nicht mehr. Hell und freistehend -- ein dunkler Kasten wirkte wie ein
       Fremdkoerper in der hellen Liste. Haengt am body, weil .cs und
       .zk-scrollwrap einen Ueberhang abschneiden wuerden. */
    .wkz-pop {
        position: fixed;
        z-index: 9990;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 5px 7px;
        background: #fff;
        border: 1px solid #cadff1;
        border-radius: 3px;
        box-shadow: 0 4px 14px rgba(20,39,61,.16);
        pointer-events: none;   /* nie im Weg beim Weiterklicken */
    }
    .wkz-pop[hidden] { display: none; }
    /* Gleiche Groesse wie in der Zeile -- es geht ums Sehen ALLER Schilder,
       nicht ums Vergroessern. */
    .wkz-pop .kz-schild { height: 15px; margin: 0; }
    .wkz-pop .kz-schild .kz-txt { font-size: 14px; }

    .cs {
        display: flex;
        align-items: center;
        gap: 5px;
        max-width: 240px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .cs > span {
        flex: none;
    }

    .cs::-webkit-scrollbar {
        display: none;
    }

    table.dataTable tbody tr {
        background: #ffffff;
    }

    table.dataTable tbody tr:nth-child(even) {
        background: #fafbfc;
    }

    table.dataTable tbody tr:hover {
        background: #e9f5f8;
    }

    #zk-clients tfoot {
        display: none;
    }

    #zk-clients tr td:nth-child(2) {
        text-align: left;
    }

    #zk-clients td:nth-child(1) {
        font-size: 11px !important;
        min-width: 150px;
        white-space: nowrap;
    }

    #zk-clients td:nth-child(8) {
        white-space: nowrap;
    }

    /* Aktions-Icons mit dezentem Abstand */
    #zk-clients td:nth-child(8) a,
    #zk-clients td:nth-child(8) button,
    #zk-clients td:nth-child(8) form,
    #zk-clients td:nth-child(8) .fa-info-circle {
        margin: 0 4px;
        font-size: 14px;
    }

    .search-results td a {
        margin: 0 4px;
    }

    /* Status-Icons in der Datum-Zelle */
    #zk-clients td:nth-child(1) > i.fa {
        margin: 0 4px 0 2px;
    }

    /* DataTables Bedienelemente */
    .dataTables_wrapper {
        font-family: var(--font-lese);
        font-size: 11px;
        color: #5a6570;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        padding: 2px 0 8px;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #ced4da;
        border-radius: 4px;
        padding: 3px 8px;
        font-size: 11px;
        background: #ffffff;
        margin-left: 6px;
    }

    .dataTables_wrapper .dataTables_filter input:focus,
    .dataTables_wrapper .dataTables_length select:focus {
        outline: none;
        border-color: #46B2DC;
        box-shadow: 0 0 0 2px rgba(70, 178, 220, .15);
    }

    .dataTables_wrapper .dataTables_info {
        padding-top: 8px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: 1px solid #dee2e6 !important;
        border-radius: 4px;
        padding: 2px 9px !important;
        margin: 0 2px;
        background: #ffffff !important;
        color: #5a6570 !important;
        font-size: 11px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #eaf4f8 !important;
        border-color: #46B2DC !important;
        color: #14273D !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: #46B2DC !important;
        border-color: #46B2DC !important;
        color: #ffffff !important;
        font-weight: bold;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        background: #f8f9fa !important;
        border-color: #e9ecef !important;
        color: #adb5bd !important;
    }

    .dataTables_wrapper .dataTables_processing {
        background: rgba(255, 255, 255, .95);
        border: 1px solid #dee2e6;
        border-radius: 6px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
        font-size: 12px;
        color: #14273D;
        padding: 8px;
        height: auto;
    }


        /* Rechnungs-/Tageskassen-Tabelle: Header + Zellen synchron ausrichten
           (erste Spalte links, letzte = Betrag rechts, Mitte zentriert) */
        table.tk-invoices thead th, table.tk-invoices tbody td { vertical-align: middle; text-align: center; }
        table.tk-invoices thead th:first-child, table.tk-invoices tbody td:first-child { text-align: left; }
        table.tk-invoices thead th:last-child, table.tk-invoices tbody td:last-child { text-align: right; }
        /* Klickbare Zellen/Elemente: kein Text-Markieren, einheitlicher Hover */
        .tk-invoices td.tk-paytype, .tk-invoices td.tk-invno,
        .hm-badge-action, .kb-edit, .kb-clear, .kk-key {
            user-select: none; -webkit-user-select: none;
        }
        .tk-invoices td.tk-paytype, .tk-invoices td.tk-invno, .tk-invoices td.tk-name { transition: color .15s; }
        .tk-vorgang { color: #2b6cb0; font-weight: 700; font-size: 11px; letter-spacing: .03em; }
        /* Auftrag wurde auf der Rechnung eines anderen mitbezahlt */
        .mk-mark { display: inline-block; background: #fffbe6; border: 1px solid #d69e2e; color: #7a5c10;
            border-radius: 4px; padding: 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .02em;
            white-space: nowrap; user-select: none; }
        /* Zulassungstasche, mit der der Auftrag zum Amt ging */
        .tasche-mark { display: inline-block; background: #eef4fb; border: 1px solid #2b6cb0; color: #1d4e7f;
            border-radius: 4px; padding: 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .02em;
            white-space: nowrap; user-select: none; margin-left: 5px; }
        .tasche-mark .fa { font-size: 9px; margin-right: 2px; }
        /* Tasche ist zurueck -- dann ist die Angabe nur noch Historie */
        .tasche-mark.zurueck { background: #f1f3f5; border-color: #adb5bd; color: #6b7784; }
        .tk-mehr { display: inline-block; background: #eef7ee; border: 1px solid #2f855a; color: #1e5c3a;
            border-radius: 4px; padding: 0 5px; font-size: 10px; font-weight: 700; margin-left: 5px;
            white-space: nowrap; user-select: none; }
        .tk-rg { display: inline-block; background: #f3ecfb; border: 1px solid #7c4dbe; color: #55308c;
            border-radius: 4px; padding: 0 5px; font-size: 10px; font-weight: 700; margin-left: 5px;
            white-space: nowrap; user-select: none; }
        .tk-invoices td.tk-paytype:hover, .tk-invoices td.tk-invno:hover, .tk-invoices td.tk-name:hover { color: #2b6cb0; }
        /* Feste Spaltenbreiten + Zell-Scroll: NUR am Bildschirm (Druck siehe @media print) */
        @media screen {
            table.tk-invoices { table-layout: fixed; width: 100%; }
            table.tk-invoices thead th:nth-child(1) { width: 85px; }
            table.tk-invoices thead th:nth-child(3) { width: 165px; }
            table.tk-invoices thead th:nth-child(4) { width: 140px; }
            table.tk-invoices thead th:nth-child(5) { width: 110px; }
            table.tk-invoices thead th:nth-child(6) { width: 110px; }
            .tk-invoices .tk-scroll { overflow-x: auto; white-space: nowrap; max-width: 100%; scrollbar-width: thin; }
            .tk-invoices .tk-scroll::-webkit-scrollbar { height: 5px; }
            .tk-invoices .tk-scroll::-webkit-scrollbar-thumb { background: #c7d2dc; border-radius: 3px; }
        }

        /* Schmales Fenster (auch geteilter Bildschirm): die Tabelle behaelt
           ihre Spalten und scrollt lieber waagerecht, statt die Namensspalte
           auf null zu druecken. Gescrollt wird der Tabellen-Container, die
           Seite selbst bleibt stehen. */
        @media screen and (max-width: 991.98px) {
            .dataTables_wrapper:has(table.tk-invoices) {
                overflow-x: auto; -webkit-overflow-scrolling: touch;
            }
            table.tk-invoices { min-width: 880px; }
        }
        /* Druck: immer DIN A4, Tabelle passt sich der Seite an, Inhalte brechen um statt rauszuragen */
        @page { size: A4 portrait; margin: 16mm 14mm; }
        @media print {
            table.tk-invoices { table-layout: auto !important; width: 100% !important; }
            .tk-invoices .tk-scroll { overflow: visible !important; white-space: normal !important; max-width: none !important; }
            .tk-invoices td, .tk-invoices th { word-break: break-word; }
        }
        /* EC-Zahlungen kursiv (Zeile: Bezahltyp + Betrag, Fuss: EC-Summe) */
        .tk-invoices .tk-ec { font-style: italic; }
        /* Überweisungen fett (Zeile: Bezahltyp + Betrag, Fuss: Überweisung-Summe) */
        .tk-invoices .tk-ueber { font-weight: 700; }

    /* Akzent-Schrift (Elegant Bloom) fuer kleine UI-Texte + die Custom-Tooltips (User-Vorgabe 25.07.2026) */
    .ctt,
    .td-meta, .td-anzahl, .td-erl, .tae-row,
    .hm-todo, .tm-keys, .kb-keys, .kb-pdf-leer, .td-leer {
        font-family: var(--font-akzent);
        /* Display-Font hat nur EIN Gewicht: kuenstliches Faux-Bold des Browsers abschalten (wirkte "zu dick") */
        font-weight: 400 !important;
        font-synthesis: none;
        letter-spacing: .5px;
    }

    /* Eingabe-Schrift fuer ALLE Formularfelder (User-Vorgabe 25.07.2026) */
    input, textarea, select, .kb-inp {
        font-family: var(--font-eingabe) !important;
    }
    .notiz-zaehler {
        font-size: 11px;
        color: #8c98a4;
        text-align: right;
        margin-top: 2px;
        user-select: none;
    }
    .notiz-zaehler.knapp { color: #e0605e; }

    /* zweite Wahl in der Zeile "Abweichender Kontoinhaber" -- Aussehen kommt von .mod-check */
    .le-konto-wahl { margin-left: 26px; }
    .le-konto-wahl.le-aus { display: none !important; }

    /* INTERNE NOTIZ: gelb abgesetzt wie das Info-Zeichen der Auftragsliste (#F2D231) */
    .intern-feld { position: relative; }
    #client_internenotiz {
        border-color: #ecd98a !important;
        background: #fffdf958 !important;
    }
    #client_internenotiz:focus {
        border-color: #e0c04a !important;
        box-shadow: 0 0 0 3px rgba(242, 210, 49, .18) !important;
    }
    .intern-hinweis {
        position: absolute; top: 7px; right: 10px; z-index: 2;
        display: flex; align-items: center; gap: 5px;
        font: 600 10px var(--font-lese); letter-spacing: .06em;
        color: #a17d00; pointer-events: auto; user-select: none;
    }
    .intern-hinweis .fa { color: #F2D231; font-size: 13px; }

    /* IBAN-Anzeige rechts IM Feld (wie der Versicherername beim eVB) --
       frueher stand sie als eigene Zeile darunter und verschob das Formularraster. */
    .iban-feld-wrap { position: relative; }
    .iban-vu {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        pointer-events: none;
        max-width: 46%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font: 600 11px var(--font-lese);
        letter-spacing: .02em;
        text-transform: none;
        color: #1e9e63;
        opacity: 0;
        transition: opacity .12s;
    }
    .iban-vu.an { opacity: 1; }
    /* Platz fuer die Anzeige, damit die IBAN nicht darunter laeuft */
    .iban-vu.fehler { color: #b02a37; }
    .iban-vu.warnung { color: #c47f17; }

    /* Markenvorschlaege im Fahrzeugfeld */
    .marken-liste {
        display: none; position: absolute; z-index: 9999; left: 0; right: 0; top: 100%;
        max-height: 300px; overflow-y: auto; background: #fff;
        border: 1px solid #cadff1; border-radius: 8px; box-shadow: 0 8px 24px rgba(20,39,61,.14);
        text-transform: none;
    }
    .marken-zeile {
        display: flex; align-items: center; gap: 10px; padding: 6px 11px; cursor: pointer;
        font: 500 13px var(--font-lese); color: #14273D;
    }
    .marken-zeile:hover { background: #e9f3fc; }
    .marken-zeile img { width: 26px; height: 20px; object-fit: contain; flex: none; }
    .marken-platz { width: 26px; flex: none; }
    .auto-marken-logo {
        position: absolute; left: 11px; top: 50%; transform: translateY(-50%); z-index: 2;
        height: 20px; width: 26px; object-fit: contain; pointer-events: none;
        opacity: 0; transition: opacity .12s;
    }
    .auto-marken-logo.an { opacity: 1; }

    /* Groessen-Auswahl am WKZ-Groesse-Feld im Hersteller-Stil (Quelle: var/kennzeichen.db) */
    .kz-liste { max-height: 340px; }
    .kz-zeile { gap: 12px; }
    .kz-grafik { display: flex; align-items: center; justify-content: center; width: 92px; flex: none; }
    .kz-text { display: flex; flex-direction: column; line-height: 1.25; }
    .kz-text b { font-size: 12px; letter-spacing: .3px; }
    .kz-text small { color: #767676; font-size: 10.5px; }
    .kz-zeile.kz-an { background: #e9f3fc; }
    .kz-dabei { font-size: 17px; color: #15803d; font-weight: 700; }
    .kz-mini {
        display: inline-block; position: relative; background: #fff;
        border: 1.5px solid #14273D; border-radius: 2px; flex: none;
    }
    .kz-eu { position: absolute; left: 0; top: 0; bottom: 0; width: 16%; background: #039; }
    .kz-eu2 { position: absolute; left: 0; top: 0; width: 24%; height: 42%; background: #039; }
    .kz-img { display: block; flex: none; object-fit: contain; }
    .kz-feld-grafik {
        position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 2;
        height: 16px; max-width: 58px; width: auto; object-fit: contain;
        pointer-events: none; opacity: 0; transition: opacity .12s;
    }
    .kz-feld-grafik.an { opacity: 1; }
    .kzs-hidden { display: none !important; }
    .kzs-aus { display: none !important; }
    .evbk-aus { display: none !important; }
    .kz-sonder-wrap { margin-top: 6px; }
    .kz-opts {
        position: absolute; right: 10px; transform: translateY(-50%); z-index: 3;
        display: flex; gap: 5px;
    }
    .kz-opt {
        position: relative; padding: 2px 7px 2px 19px; cursor: pointer; user-select: none;
        border: 1px solid #cadff1; border-radius: 4px; background: #fff;
        font: 700 9px var(--font-lese); letter-spacing: .4px; color: #767676;
    }
    .kz-opt::before {
        content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
        width: 9px; height: 9px; border: 1.5px solid #b7c9da; border-radius: 2px; background: #fff;
    }
    .kz-opt:hover { border-color: #2b6cb0; }
    .kz-opt.an { color: #14273D; border-color: #2b6cb0; background: #e9f3fc; }
    .kz-opt.an::before { background: #2b6cb0; border-color: #2b6cb0; }

    /* Hersteller rechts IM FIN-Feld (wie die IBAN-Anzeige) */
    .fin-feld-wrap { position: relative; }
    .fin-marke {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
        display: flex; align-items: center; gap: 6px; pointer-events: none;
        max-width: 46%; overflow: hidden; white-space: nowrap;
        font: 600 11px var(--font-lese); color: #2b6cb0; text-transform: none;
        opacity: 0; transition: opacity .12s;
    }
    .fin-marke.an { opacity: 1; }
    .fin-marke img { height: 16px; width: auto; object-fit: contain; }

    /* Keine PIN ohne Reservierung (ohne Wunschkennzeichen / Uebernahme) */
    .pin-aus { display: none !important; }

    /* Ortskennung rechts im Kennzeichen-Feld + Zulassungsstellen-Modal */
    .kennz-feld-wrap { position: relative; }
    .kennz-ort {
        display: none; flex: 0 0 auto; border: none; background: #e9f3fc; color: #2b6cb0; cursor: pointer;
        font: 600 11px var(--font-lese); padding: 3px 9px; border-radius: 10px;
        max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        text-transform: none;
    }
    .kennz-ort:hover { background: #2b6cb0; color: #fff; }
    @media (max-width: 1000px) { .kennz-ort { max-width: 90px; } }
    .kennz-ort.an { display: inline-block; }
    #zsModal { position: fixed; inset: 0; z-index: 99990; }
    #zsModal .zsm-hinter { position: absolute; inset: 0; background: rgba(20,39,61,.45); }
    #zsModal .zsm-box {
        position: absolute; left: 50%; top: 7vh; transform: translateX(-50%);
        width: 560px; max-width: 94vw; max-height: 82vh; display: flex; flex-direction: column;
        background: #fff; border: 1px solid #cadff1; border-radius: 8px;
        box-shadow: 0 18px 48px rgba(20,39,61,.28); overflow: hidden;
    }
    #zsModal .zsm-titel {
        display: flex; align-items: center; justify-content: space-between;
        background: #e9f3fc; border-bottom: 1px solid #cadff1; padding: 10px 14px;
        color: #14273D; font-size: 14px;
    }
    #zsModal .zsm-zu { border: none; background: none; color: #14273D; cursor: pointer; font-size: 15px; opacity: .65; }
    #zsModal .zsm-zu:hover { opacity: 1; color: #b02a37; }
    #zsModal .zsm-suche { position: relative; padding: 10px 14px; border-bottom: 1px solid #eef2f6; }
    #zsModal .zsm-suche .fa-search { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: #9db2c4; font-size: 12px; }
    #zsModal .zsm-suche input {
        width: 100%; border: 1px solid #cadff1; border-radius: 6px; background: #f8fbfe;
        padding: 7px 10px 7px 32px; font: 400 13px var(--font-lese); text-transform: none;
    }
    #zsModal .zsm-suche input:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 3px rgba(43,108,176,.15); }
    #zsModal .zsm-liste { overflow-y: auto; padding: 8px 14px 14px; }
    #zsModal .zsm-gruppe { border: 1px solid #e3edf6; border-radius: 8px; margin-top: 10px; overflow: hidden; }
    #zsModal .zsm-kopf { display: flex; align-items: center; gap: 8px; background: #f4f9fd; padding: 8px 12px; flex-wrap: wrap; }
    #zsModal .zsm-code {
        background: #14273D; color: #fff; font: 700 13px var(--font-eingabe);
        padding: 2px 9px; border-radius: 4px; letter-spacing: 1px;
    }
    #zsModal .zsm-ort { font-weight: 700; color: #14273D; font-size: 13.5px; }
    #zsModal .zsm-land { color: #6b7f92; font-size: 11.5px; }
    #zsModal .zsm-status { margin-left: auto; font-size: 10.5px; padding: 2px 8px; border-radius: 9px; background: #eef2f6; color: #55697c; }
    #zsModal .zsm-s-aktuell { background: #e2f4e8; color: #1e7a3f; }
    #zsModal .zsm-s-alt { background: #fdeeee; color: #b02a37; }
    #zsModal .zsm-s-behoerde { background: #eae6f8; color: #5b4a9e; }
    #zsModal .zsm-stelle { padding: 8px 12px; border-top: 1px solid #eef2f6; }
    #zsModal .zsm-sname { font-weight: 600; color: #14273D; font-size: 12.5px; margin-bottom: 2px; }
    #zsModal .zsm-zeile { font-size: 12px; color: #40536a; margin-top: 2px; }
    #zsModal .zsm-zeile .fa, #zsModal .zsm-sname .fa { width: 15px; text-align: center; color: #2b6cb0; font-size: 11px; }
    #zsModal .zsm-zeile a { color: #2b6cb0; text-decoration: none; }
    #zsModal .zsm-zeile a:hover { text-decoration: underline; }
    #zsModal .zsm-leer { text-align: center; color: #8a9bac; font-size: 12.5px; padding: 22px 0 12px; }

    /* Umkennzeichnung: Verlustumstände + HU/TÜV */
    .uk-aus { display: none !important; }
    .uk-block { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
    /* Verlust-Umschalter LINKS im Kennzeichen-Feld (rechts sitzt die Ortspille) */
    .uk-schalter {
        position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 3;
        display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
        border: 1px solid transparent; background: none; color: #b8c6d3;
        border-radius: 9px; padding: 1px 2px; line-height: 1;
        font: 700 10px var(--font-lese); text-transform: none;
        transition: background-color .12s, border-color .12s, color .12s;
    }
    .uk-schalter svg { width: 19px; height: 19px; flex: none; }
    /* Der Zustand steckt in der Farbe -- kein Text, damit das Feld schmal bleibt */
    .uk-schalter .uk-s-txt { display: none; }
    .uk-schalter:hover { color: #2b6cb0; }
    .uk-schalter[data-stufe="verloren"]  { color: #d68a1a; }
    .uk-schalter[data-stufe="gestohlen"] { color: #b02a37; }
    /* Einzug NUR bei sichtbarem Umschalter (UK); sonst normales Feld wie alle anderen */
    .kennz-feld-wrap.mit-schalter input { padding-left: 44px !important; }
    /* Kennzeichen + TÜV in einer Zeile: beide Seiten brauchen eine Flex-Basis,
       sonst nimmt sich das Standardfeld (width:100%) die ganze Breite. */
    .kennz-zeile { display: flex; align-items: center; gap: 12px; }
    .kennz-zeile > .kz-haupt { flex: 1 1 auto; min-width: 0; }
    .kennz-zeile > .kz-haupt > div { margin: 0; }
    .kennz-zeile > .uk-block { flex: 0 0 auto; }
    .uk-block .uk-tuev { position: relative; display: flex; align-items: center; gap: 10px; }
    .uk-block .uk-tuev-lbl {
        font: 700 11px var(--font-lese); color: #6b7f92; letter-spacing: .6px; flex: none;
    }
    /* gleiche Maße wie ein normales Eingabefeld (Höhe 40, Radius 6, gleicher Rahmen) */
    .uk-block .uk-tuev-felder {
        display: inline-flex; align-items: center; justify-content: center; gap: 3px;
        height: 40px; padding: 0 14px; border: 1px solid #cadff1; border-radius: 6px;
        background: #f8fbfe; transition: border-color .12s, box-shadow .12s, background .12s;
    }
    .uk-block .uk-tuev-felder:focus-within {
        border-color: #2b6cb0; background: #fff; box-shadow: 0 0 0 3px rgba(43,108,176,.15);
    }
    .uk-block input.uk-tuev-teil {
        width: 30px; border: none; background: none; padding: 0; margin: 0;
        height: 38px; line-height: 38px; text-align: center;
        font-family: var(--font-eingabe); font-size: 14px; font-weight: 400;
        color: #14273D; text-transform: none;
    }
    .uk-block input.uk-tuev-teil:focus { outline: none; box-shadow: none; }
    .uk-block input.uk-tuev-teil::placeholder { color: #9aa7b2; }
    .uk-block .uk-tuev-sep {
        color: #9db2c4; font-family: var(--font-eingabe); font-size: 14px; line-height: 1;
    }
    /* das eigentliche Formularfeld traegt nur den Wert */
    .uk-block input.uk-tuev-roh { display: none !important; }
    /* Bezugsrahmen fuer die Ampel -- sie schwebt mittig ueber dem Feld */
    .uk-block .uk-tuev-box { position: relative; display: inline-flex; }
    .uk-block .uk-ampel {
        position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
        z-index: 3; pointer-events: none;
        display: none; font: 700 10px var(--font-lese); padding: 2px 8px; border-radius: 9px;
        white-space: nowrap; text-transform: none;
        border: 2px solid #fff; box-shadow: 0 1px 4px rgba(20,39,61,.14);
    }
    .uk-block .uk-ampel.an { display: block; }
    .uk-block .uk-ampel.gruen  { background: #e2f4e8; color: #1e7a3f; }
    .uk-block .uk-ampel.orange { background: #fdf0e0; color: #b26a00; }
    .uk-block .uk-ampel.rot    { background: #fdeeee; color: #b02a37; }
    .kennz-zeile { position: relative; }
    /* Rechter Bereich IM Kennzeichen-Feld: Hinweis + Ortskennung.
       Absolut positioniert (im Eingabefeld nicht anders möglich), aber ohne feste
       Koordinaten -- die Inhalte ordnen sich per Flex selbst an. */
    .kennz-rechts {
        position: absolute; right: 9px; top: 50%; transform: translateY(-50%); z-index: 3;
        display: flex; align-items: center; gap: 6px; justify-content: flex-end;
        max-width: none; pointer-events: none;
    }
    .kennz-rechts > * { pointer-events: auto; }
    /* schwebt mittig ueber dem Kennzeichen-Feld -- gleiche Machart wie die TÜV-Ampel */
    .uk-hinweis {
        position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
        z-index: 3; pointer-events: none;
        display: none; font: 700 10px var(--font-lese); padding: 2px 8px; border-radius: 9px;
        white-space: nowrap; text-transform: none;
        border: 2px solid #fff; box-shadow: 0 1px 4px rgba(20,39,61,.14);
        background: #fdeeee; color: #b02a37;
        max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    }
    .uk-hinweis.an { display: block; }
    .uk-hinweis.verloren  { background: #fdf0e0; color: #b26a00; }
    .uk-hinweis.gestohlen { background: #fdeeee; color: #b02a37; }

    /* Zusatzangaben zum Kennzeichen-Verlust (Datum + betroffene Schilder) */
    .verlust-zeile { display: flex; align-items: center; gap: 10px; }
    .verlust-zeile .vz-lbl {
        font: 700 11px var(--font-lese); color: #b02a37; letter-spacing: .5px; flex: none;
    }
    .verlust-zeile .vz-felder { display: flex; align-items: center; gap: 10px; }
    /* Datum im App-Design (kein Browser-Kalender): Tag . Monat . Jahr */
    .verlust-zeile .vz-datum {
        display: inline-flex; align-items: center; justify-content: center; gap: 2px;
        height: 40px; padding: 0 14px; border: 1px solid #cadff1; border-radius: 6px;
        background: #f8fbfe; flex: none;
        transition: border-color .14s, box-shadow .14s, background .14s;
    }
    .verlust-zeile .vz-datum:hover { border-color: #b9d4ec; }
    .verlust-zeile .vz-datum:focus-within {
        border-color: #2b6cb0; background: #fff; box-shadow: 0 0 0 3px rgba(43,108,176,.15);
    }
    .verlust-zeile input.vz-teil {
        width: 28px; border: none; background: none; padding: 0; margin: 0;
        height: 38px; line-height: 38px; text-align: center;
        font-family: var(--font-eingabe); font-size: 14px; font-weight: 400;
        color: #14273D; text-transform: none;
    }
    .verlust-zeile input.vz-jahr { width: 44px; }
    .verlust-zeile input.vz-teil:focus { outline: none; box-shadow: none; }
    .verlust-zeile input.vz-teil::placeholder { color: #9aa7b2; }
    .verlust-zeile .vz-sep { color: #9db2c4; font-family: var(--font-eingabe); font-size: 14px; }
    /* Segment-Umschalter: ein Rahmen, innen die Stufen -- vertikal per Flexbox
       zentriert (line-height verrutscht, sobald sich die Schrift ändert). */
    .verlust-zeile .vz-seg {
        display: inline-flex; align-items: stretch; flex: none;
        height: 40px; padding: 3px; gap: 2px;
        border: 1px solid #cadff1; border-radius: 6px; background: #f1f6fb;
        transition: border-color .14s, box-shadow .14s;
    }
    .verlust-zeile .vz-seg:hover { border-color: #b9d4ec; }
    .verlust-zeile .vz-seg input[type="radio"] { display: none; }
    .verlust-zeile .vz-seg label {
        margin: 0; cursor: pointer; user-select: none;
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 62px; padding: 0 13px; border: none; border-radius: 0;
        background: transparent; color: #61748a;
        font-family: var(--font-lese); font-size: 11px; font-weight: 700;
        letter-spacing: .07em; text-transform: none; line-height: 1;
        transition: background-color .14s, color .14s, box-shadow .14s;
    }
    .verlust-zeile .vz-seg label:hover { background: rgba(255, 255, 255, .75); color: #2b6cb0; }
    .verlust-zeile .vz-seg input[type="radio"]:checked + label {
        background: #b02a37; color: #fff;
        box-shadow: 0 1px 3px rgba(176, 42, 55, .32);
    }
    .verlust-zeile .vz-seg input[type="radio"]:checked + label:hover { background: #9c2531; color: #fff; }
    /* die ganze Zeile mittig ausrichten -- alle Elemente sind 40 px hoch */
    .verlust-zeile { align-items: center; }
    .verlust-zeile .vz-lbl { display: inline-flex; align-items: center; height: 40px; }
    /* die eigentlichen Formularfelder tragen nur die Werte */
    .verlust-zeile .vz-roh { display: none !important; }
    /* Anzeige im Feld ausgeblendet: es blieb zu wenig Platz fuer den Inhalt */
    .zu-eng { display: none !important; }
    /* schmales Feld: die Schalter stehen unter dem Feld statt darin */
    /* Druckleiste der Schnellansicht: kompakt, und was gewaehlt ist,
       ist auch gefuellt. Die Belege kommen vom Server, je nach Vorgang. */
    .qv-printbar {
        width: 100%; display: flex; flex-wrap: wrap; gap: 6px;
        align-items: center; margin-top: 10px; padding-top: 10px;
        border-top: 1px solid #e6ebf0;
    }
    .qv-printbar .qv-doc {
        appearance: none; user-select: none; cursor: pointer;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 11px; border-radius: 3px;
        border: 1px solid #cadff1; background: #f8fbfe;
        font: 600 12px var(--font-lese); letter-spacing: .02em; color: #43525f;
        transition: background .12s, border-color .12s, color .12s;
    }
    .qv-printbar .qv-doc:hover { background: #e9f3fc; border-color: #a9cbe9; }
    .qv-printbar .qv-doc.an {
        background: #2b6cb0; border-color: #2b6cb0; color: #fff;
    }
    .qv-printbar .qv-doc.an:hover { background: #245a94; border-color: #245a94; }
    .qv-printbar .qv-cnt {
        display: none; min-width: 17px; padding: 0 4px; border-radius: 3px;
        background: rgba(255, 255, 255, .25); font-weight: 700;
        font-size: 11px; line-height: 16px; text-align: center;
    }
    .qv-printbar .qv-go {
        appearance: none; cursor: pointer; margin-left: auto;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 14px; border-radius: 3px; border: 1px solid #2f855a;
        background: #2f855a; color: #fff;
        font: 600 12px var(--font-lese); letter-spacing: .02em;
        transition: background .12s, opacity .12s;
    }
    .qv-printbar .qv-go:hover:not(:disabled) { background: #276749; }
    .qv-printbar .qv-go:disabled {
        background: #eef1f4; border-color: #dde3e9; color: #a3b1bd; cursor: default;
    }




    :root {
        /* Hoehe der Fusszeile. Alles, was unten am Rand klebt,
           rechnet damit (nie mit --hm-h, das ist die Kopfzeile). */
        --fu-h: 43px;
    }


    #adminSettingsModal .modal-dialog { max-width: 540px; }
    #adminSettingsModal .as-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(20,39,61,.22); height: 600px; display: flex; flex-direction: column; }
    #adminSettingsModal .as-head, #adminSettingsModal .as-tabs, #adminSettingsModal .as-foot { flex: none; }
    #adminSettingsModal .as-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #e9f3fc; border-bottom: 1px solid #cadff1; }
    #adminSettingsModal .as-hico { width: 28px; height: 28px; border-radius: 7px; background: #fff; border: 1px solid #cadff1; color: #2b6cb0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
    #adminSettingsModal .as-title { flex: 1; margin: 0; font-size: 15px; font-weight: 700; color: #14273D; letter-spacing: .01em; }
    #adminSettingsModal .as-x { background: transparent; border: none; color: #7c93aa; font-size: 15px; line-height: 1; cursor: pointer; width: 26px; height: 26px; border-radius: 6px; transition: all .12s; }
    #adminSettingsModal .as-x:hover { color: #14273D; background: rgba(20,39,61,.08); }
    #adminSettingsModal .as-body { padding: 14px; flex: 1; min-height: 0; overflow-y: auto; background: #fff; }
    #adminSettingsModal .as-loading { color: #8a939b; font-size: 13px; text-align: center; padding: 24px 0; }
    #adminSettingsModal .as-sec + .as-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef1f3; }
    #adminSettingsModal .as-sec-title { display: flex; align-items: baseline; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7c93aa; margin: 0 0 8px; }
    #adminSettingsModal .as-sec-title .as-count { font-weight: 600; color: #a9b6c4; letter-spacing: 0; }
    #adminSettingsModal .as-users { display: flex; flex-wrap: wrap; gap: 6px; }
    #adminSettingsModal .as-user { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #f4f8fc; border: 1px solid #dce8f4; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #14273D; }
    #adminSettingsModal .as-user i { color: #2b6cb0; font-size: 10px; }
    #adminSettingsModal .as-abts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
    #adminSettingsModal .as-abt { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 12.5px; }
    #adminSettingsModal .as-abt:hover { background: #f4f8fc; }
    #adminSettingsModal .as-abt-name { font-weight: 600; color: #14273D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #adminSettingsModal .as-abt-cnt { color: #6b7784; font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
    @media (max-width: 480px) { #adminSettingsModal .as-abts { grid-template-columns: 1fr; } }
    #adminSettingsModal .as-tabs { display: flex; gap: 2px; padding: 0 12px; background: #fff; border-bottom: 1px solid #eef1f3; }
    #adminSettingsModal .as-tab { border: none; background: transparent; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: #8a939b; cursor: pointer; border-bottom: 2px solid transparent; transition: all .12s; }
    #adminSettingsModal .as-tab i { font-size: 11px; margin-right: 4px; }
    #adminSettingsModal .as-sys-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; margin-bottom: 12px; }
    #adminSettingsModal .as-sys-kachel { background: #f6fafe; border: 1px solid #e3eef8; border-radius: 6px; padding: 7px 9px; }
    #adminSettingsModal .as-sys-kachel .k { display: block; font-size: 9px; color: #8a939b; letter-spacing: .05em; font-weight: 700; text-transform: uppercase; }
    #adminSettingsModal .as-sys-kachel .v { display: block; font-size: 14px; font-weight: 700; color: #14273D; margin-top: 2px; word-break: break-word; }
    #adminSettingsModal .as-sys-kachel .v small { font-size: 10px; font-weight: 600; color: #64748b; }
    #adminSettingsModal .as-sys-tab { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 10px; }
    #adminSettingsModal .as-sys-tab th { text-align: left; font-size: 9px; letter-spacing: .05em; color: #8a939b; text-transform: uppercase; padding: 3px 6px; border-bottom: 1px solid #e3eef8; }
    #adminSettingsModal .as-sys-tab td { padding: 3px 6px; border-bottom: 1px solid #f2f6fa; color: #14273D; }
    #adminSettingsModal .as-sys-tab tr:nth-child(even) td { background: #fafcfe; }
    #adminSettingsModal .as-sys-tab td.r { text-align: right; font-variant-numeric: tabular-nums; }
    #adminSettingsModal .as-sys-tab td.dim { color: #64748b; }
    #adminSettingsModal .as-sys-liste { display: flex; flex-wrap: wrap; gap: 3px; }
    #adminSettingsModal .as-sys-chip { background: #eef4f9; border: 1px solid #dde8f1; border-radius: 4px; padding: 1px 6px; font-size: 10.5px; color: #45525e; }
    #adminSettingsModal .as-sys-mehr { border: none; background: transparent; color: #2b6cb0; font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 0; }
    #adminSettingsModal .as-sys-mehr:hover { text-decoration: underline; }
    #adminSettingsModal .as-sys-scroll { max-height: 210px; overflow-y: auto; border: 1px solid #eef2f7; border-radius: 6px; padding: 4px 6px; }
    #adminSettingsModal .as-sys-stand { font-size: 10px; color: #8a939b; text-align: right; margin-top: 6px; }
    #adminSettingsModal .as-tab:hover { color: #14273D; }
    #adminSettingsModal .as-tab.active { color: #2b6cb0; border-bottom-color: #2b6cb0; }
    #adminSettingsModal .as-pane { display: none; }
    #adminSettingsModal .as-pane.active { display: block; }
    #adminSettingsModal .as-agrp-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7c93aa; margin: 2px 0 8px; }
    #adminSettingsModal .as-agrp-title:not(:first-child) { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef1f3; }
    #adminSettingsModal .as-auto { display: flex; gap: 10px; padding: 8px; border-radius: 8px; transition: background .12s; }
    #adminSettingsModal .as-auto:hover { background: #f4f8fc; }
    #adminSettingsModal .as-auto-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
    #adminSettingsModal .as-auto-ico.ico-mail { background: #e8f2fb; color: #2b6cb0; }
    #adminSettingsModal .as-auto-ico.ico-guard { background: #eaf6ee; color: #2e8b57; }
    #adminSettingsModal .as-auto-ico.ico-maint { background: #f1eef8; color: #6b4fa8; }
    #adminSettingsModal .as-auto-main { flex: 1; min-width: 0; }
    #adminSettingsModal .as-auto-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    #adminSettingsModal .as-auto-name { font-size: 13.5px; font-weight: 700; color: #14273D; }
    #adminSettingsModal .as-auto-time { flex: none; font-size: 11px; font-weight: 600; color: #2b6cb0; background: #eef5fc; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
    #adminSettingsModal .as-auto-desc { font-size: 12px; color: #6b7784; margin-top: 2px; line-height: 1.35; }
    #adminSettingsModal .as-auto-desc b { color: #14273D; font-weight: 600; }
    #adminSettingsModal .as-auto-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; padding: 8px 10px; background: #f7f9fb; border-radius: 7px; font-size: 11px; color: #8a939b; line-height: 1.4; }
    #adminSettingsModal .as-auto-note i { color: #a9b6c4; margin-top: 1px; }
    #adminSettingsModal .as-auto-top { align-items: center; }
    #adminSettingsModal .as-sw { position: relative; width: 38px; height: 22px; flex: none; }
    #adminSettingsModal .as-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
    #adminSettingsModal .as-sw span { position: absolute; inset: 0; background: #cdd6df; border-radius: 999px; transition: .15s; cursor: pointer; }
    #adminSettingsModal .as-sw span:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
    #adminSettingsModal .as-sw input:checked + span { background: #2b6cb0; }
    #adminSettingsModal .as-sw input:checked + span:before { transform: translateX(16px); }
    #adminSettingsModal .as-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
    #adminSettingsModal .as-field { display: flex; flex-direction: column; gap: 2px; }
    #adminSettingsModal .as-field label { font-size: 10px; font-weight: 700; color: #8a939b; text-transform: uppercase; letter-spacing: .04em; }
    #adminSettingsModal .as-field input { border: 1px solid #dce8f4; border-radius: 6px; padding: 4px 8px; font-size: 12.5px; color: #14273D; background: #fff; }
    #adminSettingsModal .as-field input[type=number] { width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
    #adminSettingsModal .as-field input[type=email] { width: 240px; max-width: 100%; }
    #adminSettingsModal .as-field input:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 2px rgba(43,108,176,.12); }
    #adminSettingsModal .as-auto.off { opacity: .5; }
    #adminSettingsModal .as-auto.off .as-fields { pointer-events: none; filter: grayscale(1); }
    #adminSettingsModal .as-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 14px; border-top: 1px solid #eef1f3; background: #fafbfc; }
    #adminSettingsModal .as-savemsg { font-size: 12px; color: #8a939b; margin-right: auto; }
    #adminSettingsModal .as-savemsg.ok { color: #2e8b57; font-weight: 600; }
    #adminSettingsModal .as-savemsg.err { color: #c0392b; font-weight: 600; }
    #adminSettingsModal .as-save { border: none; background: #2b6cb0; color: #fff; padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .12s; }
    #adminSettingsModal .as-save:hover { background: #245a94; }
    #adminSettingsModal .as-save[disabled] { opacity: .55; cursor: default; }
    #adminSettingsModal .as-firma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 4px; }
    #adminSettingsModal .as-ff { display: flex; flex-direction: column; gap: 3px; }
    #adminSettingsModal .as-ff.full { grid-column: 1 / -1; }
    #adminSettingsModal .as-ff label { font-size: 10px; font-weight: 700; color: #8a939b; text-transform: uppercase; letter-spacing: .04em; }
    #adminSettingsModal .as-ff input { border: 1px solid #dce8f4; border-radius: 6px; padding: 6px 9px; font-size: 13px; color: #14273D; background: #fff; }
    #adminSettingsModal .as-ff input:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 2px rgba(43,108,176,.12); }


    /* Start-Abstand statisch setzen, damit die Seite beim Laden NICHT springt (CLS).
       Das hmSpacer()-JS korrigiert danach nur noch millimetergenau. */
    body {
        padding-top: 53px;
        /* padding-bottom analog: hmSpacer() setzt beide Werte auf die gleiche
           gemessene Header-Hoehe, damit Fusszeile und Kopfzeile exakt gleich
           gross bleiben (auch nach Font-Loading/responsive Umbruechen). */
        padding-bottom: 53px;
    }

    .headermenu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        width: 100%;
        margin: 0;
        padding: 4px 16px;
        background: #e9f3fc;
        border-bottom: 1px solid #cadff1;
        box-shadow: 0 10px 12px -7px rgba(20, 39, 61, .32);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 13px;
    }

    @media print {
        .headermenu {
            position: static;
        }
        body {
            padding-top: 0 !important;
        }
    }

    /* Fusszeile: dezent dunkel mit Schatten NACH INNEN statt nach aussen.
       Die Hoehe kommt aus --fu-h und ist BEWUSST von der Kopfzeile getrennt:
       zwischen 788 und 992px rutscht die Suche oben in eine zweite Zeile,
       die Kopfzeile waechst dabei. Haengt die Fusszeile an --hm-h (das misst
       hmSpacer an der KOPFzeile), waechst sie mit. Alles, was unten am Rand
       klebt, rechnet deshalb mit --fu-h.

       z-index wie der Header (1030): Anfangs stand hier 2, damit die Fusszeile
       hinter den funktionalen Leisten (Kassenbeleg .kb-sticky-footer, Akte
       .akte-fuss) verschwindet, statt deren Knoepfe zu verdecken. Seit dem
       24.08. kleben diese Leisten UEBER der Fusszeile
       (bottom: calc(var(--hm-h) + X) bzw. var(--hm-h)) -- es gibt keine
       Ueberlappung mehr, gegen die man sich schuetzen muesste. Alle Fenster
       (3100 bis 5200), Meldungen (99998) und Tooltips (99999) liegen weiterhin
       davor. */
    .hm-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        width: 100%;
        /* EIGENE Hoehe, bewusst nicht die der Kopfzeile: die waechst
           zwischen 788 und 992px, weil dort die Suche in eine zweite
           Zeile rutscht. Die Fusszeile bleibt davon unberuehrt. */
        height: var(--fu-h, 43px);
        margin: 0;
        background: #e9f3fc;
        border-top: 1px solid #cadff1;
        /* Gespiegelter Header-Schatten: wirft nach oben aus der Flaeche,
           damit die Leiste genauso vorne liegt wie die Kopfzeile. */
        box-shadow: 0 -10px 12px -7px rgba(20, 39, 61, .32);
    }

    /* 3 Spalten ueber die VOLLE Fusszeilenbreite, ohne Aussenabstand.
       Anteile statt fester Pixel: 1fr 2fr 1fr ist dieselbe Aufteilung wie
       25/50/25, fuellt aber jede Fensterbreite komplett aus (feste Pixel
       koennen das nicht und liessen links und rechts einen Rand stehen). */
    .hm-footer-grid {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        align-items: center;
        height: 100%;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* Jede Spalte darf schrumpfen (min-width: 0) und ihren Inhalt bei
       Platzmangel seitlich wegschieben -- sichtbare Balken waeren in einer
       43 px hohen Leiste stoerend, deshalb sind sie ausgeblendet. */
    .hm-footer-grid > div {
        min-width: 0;
        height: 100%;
        display: flex;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .hm-footer-grid > div::-webkit-scrollbar { display: none; }

    /* Bei zu wenig Platz wuerden 'center' und 'flex-end' den Anfang des
       Inhalts abschneiden UND unerreichbar machen; 'safe' faellt in dem Fall
       auf linksbuendig zurueck. Die Zeile davor ist der Rueckfall fuer
       Browser, die 'safe' nicht kennen. */
    .hm-footer-links  { justify-content: flex-start; }
    .hm-footer-mitte  { justify-content: center; justify-content: safe center; }
    /* Traegt seit dem 02.09. die Kennzahlen und zentriert sie deshalb,
       statt sie an den Rand zu druecken. */
    .hm-footer-rechts { justify-content: center; justify-content: safe center; }

    /* Urlaubskalender-Knopf, sitzt ganz links ohne Abstand.
       Bewusst OHNE Bewegung beim Ueberfahren -- nur Farbe und Hintergrund. */
    .hm-footer-urlaub {
        flex: none;
        margin-left: 10px;
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; padding: 4px;
        border: none; background: transparent; color: #2b6cb0;
        border-radius: 7px; cursor: pointer;
        transition: background .12s, color .12s;
    }
    .hm-footer-urlaub:hover { background: rgba(43,108,176,.12); color: #245a94; }
    .hm-footer-urlaub:active { background: rgba(43,108,176,.2); }
    .hm-footer-urlaub { position: relative; }
    .hm-footer-urlaub svg { display: block; width: 100%; height: 100%; flex: none; }
    /* Zahl offener Eintraege: nur die Verwaltung sieht sie. Gleiche Sprache
       wie der To-do-Zaehler daneben, damit die Fusszeile einheitlich wirkt. */
    .ul-badge {
        position: absolute; top: -2px; right: -4px;
        min-width: 15px; height: 15px; padding: 0 4px;
        background: #e0605e; color: #fff; border-radius: 3px;
        font-size: .6rem; font-weight: 700; line-height: 15px; text-align: center;
        pointer-events: none;
    }

    /* Grosses Kalender-Fenster */
    .ul-modal { position: fixed; inset: 0; z-index: 4400; display: none; align-items: center; justify-content: center; }
    .ul-modal-bg { position: absolute; inset: 0; background: rgba(20,39,61,.5); }
    .ul-modal-box { position: relative; width: 1040px; max-width: 96vw; height: 74vh; max-height: 720px;
        display: flex; flex-direction: column; background: #fff; border-radius: 12px;
        box-shadow: 0 28px 70px rgba(0,0,0,.34); overflow: hidden; }
    .ul-kopf { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
        background: #e9f3fc; border-bottom: 1px solid #cadff1; }

    .ul-titel { flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
        color: #14273D; font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
        white-space: nowrap; }
    /* Dasselbe Symbol wie am Knopf, nur kleiner. Die Farbe kommt ueber
       currentColor aus der Schriftfarbe der Ueberschrift. */
    .ul-titel svg { width: 17px; height: 17px; color: #2b6cb0; flex: none; }

    /* Zarter Strich statt eines Abstands: trennt Titel und Bedienung sichtbar,
       ohne eine eigene Flaeche zu brauchen. */
    .ul-trenner { flex: none; width: 1px; height: 20px; background: #cadff1; }

    .ul-nav { display: flex; align-items: center; gap: 10px; }

    .ul-heute { border: 1px solid #cadff1; background: #fff; color: #2b6cb0; border-radius: 7px;
        height: 28px; padding: 0 14px; font-size: .74rem; font-weight: 700; cursor: pointer; }
    .ul-heute:hover { background: #dceaf8; border-color: #a8cbea; }

    /* Beide Pfeile als EIN Bedienelement mit gemeinsamem Rahmen. */
    .ul-pfeile { display: inline-flex; background: #fff; border: 1px solid #cadff1;
        border-radius: 7px; overflow: hidden; }
    .ul-nav-btn { border: none; background: none; color: #2b6cb0; width: 30px; height: 28px;
        font-size: .72rem; cursor: pointer; padding: 0; }
    .ul-nav-btn:hover { background: #dceaf8; }
    .ul-nav-btn + .ul-nav-btn { border-left: 1px solid #cadff1; }

    /* Feste Mindestbreite, sonst wandern die Pfeile beim Blaettern mit der
       Textlaenge ("Mai 2026" gegen "September 2026"). */
    .ul-monat { min-width: 178px; font-weight: 700; color: #14273D; font-size: 15px;
        letter-spacing: .2px; white-space: nowrap; }

    /* Alles Weitere sitzt rechts. */
    .ul-sicht { margin-left: auto; display: inline-flex; background: #fff; border: 1px solid #cadff1;
        border-radius: 7px; overflow: hidden; }
    .ul-s-btn { border: none; background: none; color: #45525f; height: 28px; padding: 0 16px;
        font-size: .74rem; font-weight: 700; cursor: pointer; }
    .ul-s-btn:hover { background: #dceaf8; }
    .ul-s-btn.ul-an { background: #2b6cb0; color: #fff; }
    .ul-s-btn + .ul-s-btn { border-left: 1px solid #cadff1; }
    .ul-s-btn.ul-an + .ul-s-btn { border-left-color: #2b6cb0; }

    .ul-x { border: none; background: none; font-size: 24px; color: #6b7784; cursor: pointer;
        line-height: 1; padding: 0 2px; width: 28px; height: 28px; border-radius: 7px; }
    .ul-x:hover { background: #f6dcdc; color: #b02a37; }
    /* Personenleiste in der Kopfzeile: bewusst kompakt, sie teilt sich den
       Platz mit Titel, Navigation und Umschalter. */
    .ul-personen { flex: none; display: flex; align-items: center; gap: 4px; margin-left: 6px; }
    .ul-person { display: inline-flex; align-items: center; gap: 4px; color: #fff;
        border-radius: 6px; padding: 3px 6px 3px 8px; font-size: .68rem; font-weight: 700;
        letter-spacing: .5px; line-height: 1.5; }
    .ul-person b { background: #fff; border-radius: 3px; padding: 0 4px;
        font-size: .66rem; min-width: 18px; text-align: center; }
    /* Wenig Resturlaub faellt durch die rote Zahl auf, auch auf farbigem Grund. */
    .ul-person.ul-knapp b { background: #fff; color: #b02a37; }
    .ul-person.ul-ich { box-shadow: 0 0 0 2px #14273D; }

    .ul-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 12px; }

    /* ---------- Jahresansicht ---------- */
    .ul-jahr { height: 100%; display: flex; flex-direction: column; }
    .ul-j-sicht { flex: none; display: inline-flex; align-self: flex-start; margin-bottom: 10px;
        background: #fff; border: 1px solid #e2e8ee; border-radius: 7px; overflow: hidden; }
    .ul-j-btn { border: none; background: none; color: #6b7a8d; height: 24px; padding: 0 12px;
        font-size: .7rem; font-weight: 600; cursor: pointer; }
    .ul-j-btn:hover { background: #f4f7fa; }
    .ul-j-btn.ul-an { background: #e9f3fc; color: #2b6cb0; font-weight: 700; }
    .ul-j-inhalt { flex: 1; min-height: 0; overflow: auto; }

    /* Zeitstrahl: eine Zeile je Person ueber das ganze Urlaubsjahr */
    .ul-strahl { display: flex; flex-direction: column; gap: 7px; }
    .ul-str-kopf, .ul-str-zeile { display: flex; align-items: center; gap: 10px; }
    .ul-str-name { flex: none; width: 42px; text-align: center; font-size: .72rem; font-weight: 700;
        letter-spacing: .5px; color: #fff; border-radius: 5px; padding: 3px 0; }
    .ul-str-kopf .ul-str-name { background: none; }
    .ul-str-band { flex: 1; min-width: 0; position: relative; height: 26px;
        background: #f6f9fc; border: 1px solid #eef2f6; border-radius: 6px; display: flex; }
    .ul-str-kopf .ul-str-band { height: 18px; background: none; border: none; }
    .ul-str-m { font-size: .6rem; font-weight: 700; color: #9aa4ad; text-align: center;
        border-left: 1px solid #eef2f6; line-height: 18px; overflow: hidden; }
    .ul-str-m:first-child { border-left: none; }
    .ul-str-block { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; cursor: pointer;
        min-width: 3px; }
    .ul-str-block:hover { filter: brightness(1.15); }
    /* Wartet noch auf das Haekchen: schraffiert statt voll gefuellt */
    .ul-str-offen { background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
    .ul-str-heute { position: absolute; top: 0; bottom: 0; width: 2px; background: #14273D; opacity: .5; }
    .ul-str-zahl { flex: none; width: 132px; font-size: .72rem; color: #6b7a8d; text-align: right; }
    .ul-str-zahl b { color: #14273D; }
    .ul-str-zahl i { font-style: normal; color: #9aa4ad; }
    .ul-str-zahl.ul-str-knapp i { color: #b02a37; font-weight: 700; }

    /* Zwoelf kleine Monatskalender */
    .ul-mini-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .ul-mini { border: 1px solid #eef2f6; border-radius: 8px; padding: 7px 8px 8px; background: #fff; }
    .ul-mini-kopf { font-size: .66rem; font-weight: 700; color: #45525f; text-align: center;
        margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
    .ul-mini-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .ul-mini-tag { font-size: .56rem; text-align: center; line-height: 15px; height: 15px;
        border-radius: 3px; color: #6b7a8d; }
    .ul-mini-leer { visibility: hidden; }
    .ul-mini-frei { color: #c3cbd3; }
    .ul-mini-voll { color: #fff; font-weight: 700; }
    .ul-mini-mehr { box-shadow: inset 0 0 0 1px #14273D; }
    .ul-mini-heute { box-shadow: inset 0 0 0 1px #2b6cb0; }
    .ul-kalender { height: 100%; }
    .ul-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 100%; grid-auto-rows: 1fr; }
    .ul-wt { text-align: center; font-size: .6rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .5px; color: #9aa4ad; padding-bottom: 1px; }
    .ul-raster > .ul-wt { grid-row: 1; }
    .ul-tag { border: 1px solid #eef2f6; border-radius: 6px; padding: 3px 4px; background: #fff;
        display: flex; flex-direction: column; gap: 2px; min-height: 52px; overflow: hidden; }
    .ul-tag.ul-we { background: #fafbfc; }
    .ul-tag.ul-leer { background: #f7f9fb; border-style: dashed; }
    .ul-tag.ul-heute-tag { border-color: #2b6cb0; box-shadow: inset 0 0 0 1px #2b6cb0; }
    .ul-tag:not(.ul-leer) { cursor: pointer; }
    .ul-tag:not(.ul-leer):hover { border-color: #cadff1; background: #f4f9fe; }
    /* Feiertag/Schliesstag: kostet keinen Urlaubstag, deshalb sichtbar abgesetzt */
    .ul-tag.ul-feier { background: #fdf6ec; border-color: #f2e3cd; }
    /* Besetzung als Flaeche: hellblau, wenn die Grenze erreicht ist,
       zart rot, wenn sie ueberschritten waere. */
    .ul-tag.ul-voll { background: #dcefff; border-color: #c2e0f7; }
    .ul-tag.ul-ueber { background: #fdeaea; border-color: #f3cfcf; }
    .ul-tag.ul-ueber .ul-nr { color: #b02a37; }
    .ul-tag.ul-feier .ul-nr { color: #b9822f; }
    /* Markierter Zeitraum */
    /* Kraeftiger als die Belegungsfarbe -- sonst waere nicht erkennbar,
       was gerade markiert ist und was nur belegt. */
    .ul-tag.ul-mark { background: #bfdcf5; border-color: #7fb4e0; }
    .ul-tag.ul-mark.ul-feier { background: #f6efe6; }
    .ul-tag.ul-mark .ul-nr { color: #1f4f7d; }
    .ul-tag.ul-mark-a { border-left: 3px solid #2b6cb0; }
    .ul-tag.ul-mark-z { border-right: 3px solid #2b6cb0; }
    .ul-nr { font-size: .68rem; font-weight: 700; color: #45525f; line-height: 1; }
    .ul-tag.ul-we .ul-nr { color: #9aa4ad; }
    .ul-marker { display: flex; flex-wrap: wrap; gap: 2px; }
    .ul-chip { color: #fff; border-radius: 3px; padding: 0 5px; font-size: .58rem; font-weight: 700;
        letter-spacing: .3px; line-height: 1.45; cursor: pointer; }
    .ul-chip:hover { filter: brightness(1.12); }
    .ul-chip.ul-chip-aktiv { box-shadow: 0 0 0 2px #14273D; }
    /* Wartet auf das Haekchen der Verwaltung: schraffiert + Ausrufezeichen */
    .ul-chip.ul-chip-offen { background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.5) 0 3px, transparent 3px 6px); }
    .ul-chip i { font-style: normal; margin-left: 2px; }
    /* Aktionsleiste: FESTE Hoehe, immer sichtbar. Die zweite Zeile wird nur
       unsichtbar geschaltet (nicht ausgeblendet), damit die Fensterhoehe beim
       Markieren konstant bleibt. */
    .ul-aktion { flex: none; height: 86px; display: flex; flex-direction: column; justify-content: center;
        gap: 7px; padding: 0 16px; background: #fbfdff; border-top: 1px solid #cadff1; }
    .ul-akt-zeile1 { display: flex; align-items: center; gap: 12px; min-height: 30px; }
    .ul-akt-zeile2 { display: flex; align-items: center; gap: 8px; min-height: 30px; visibility: hidden; }
    .ul-aktion.ul-akt-neu .ul-akt-zeile2,
    .ul-aktion.ul-akt-alt .ul-akt-zeile2 { visibility: visible; }

    .ul-akt-info { font-size: .8rem; color: #45525f; flex: 1; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ul-akt-info b { color: #14273D; }
    .ul-aktion.ul-akt-halb .ul-akt-info { color: #2b6cb0; }

    .ul-akt-personen { display: flex; gap: 5px; visibility: hidden; }
    .ul-aktion.ul-akt-neu .ul-akt-personen { visibility: visible; }
    .ul-akt-p { border: 1px solid #cadff1; background: #fff; color: #45525f; border-radius: 7px;
        min-width: 42px; height: 28px; font-size: .74rem; font-weight: 700; letter-spacing: .5px;
        cursor: pointer; padding: 0 8px; }
    .ul-akt-p:hover { background: #e9f3fc; }
    .ul-akt-p.ul-an { color: #fff; }

    .ul-akt-ab { border: none; background: none; font-size: 20px; color: #9aa4ad; cursor: pointer;
        line-height: 1; padding: 0 2px; visibility: hidden; }
    .ul-aktion.ul-akt-neu .ul-akt-ab,
    .ul-aktion.ul-akt-alt .ul-akt-ab,
    .ul-aktion.ul-akt-halb .ul-akt-ab { visibility: visible; }
    .ul-akt-ab:hover { color: #b02a37; }

    .ul-akt-arten { display: flex; gap: 5px; }
    .ul-aktion.ul-akt-alt .ul-akt-arten,
    .ul-aktion.ul-akt-alt .ul-akt-notiz,
    .ul-aktion.ul-akt-alt .ul-akt-ok { display: none; }
    .ul-art { border: 1px solid #e2e8ee; background: #fff; color: #6b7a8d; border-radius: 20px;
        height: 26px; padding: 0 12px; font-size: .7rem; font-weight: 600; cursor: pointer; }
    .ul-art:hover { background: #f4f7fa; }
    .ul-art.ul-an { color: #fff; font-weight: 700; }

    .ul-akt-notiz { flex: 1; min-width: 0; height: 28px; border: 1px solid #cadff1; border-radius: 6px;
        background: #fff; padding: 0 10px; font-size: .76rem; color: #45525f; }
    .ul-akt-notiz:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 3px rgba(43,108,176,.15); }

    .ul-akt-ok { border: none; background: #2b6cb0; color: #fff; border-radius: 7px; height: 28px;
        padding: 0 18px; font-size: .76rem; font-weight: 700; cursor: pointer; }
    .ul-akt-ok:hover { background: #245a94; }
    .ul-akt-ok:disabled { opacity: .55; cursor: default; }
    .ul-akt-weg { border: 1px solid #f0c8cc; background: #fff; color: #b02a37; border-radius: 7px;
        height: 28px; padding: 0 16px; font-size: .76rem; font-weight: 700; cursor: pointer; display: none; }
    .ul-aktion.ul-akt-alt .ul-akt-weg { display: inline-block; }
    /* Fremder Eintrag: nur ansehen, keine Bedienelemente (die Pruefung selbst
       laeuft weiter serverseitig). */
    .ul-aktion.ul-akt-fremd .ul-akt-weg { display: none; }

    .ul-akt-haken { border: 1px solid #b7e3c8; background: #fff; color: #1e7a48; border-radius: 7px;
        height: 28px; padding: 0 16px; font-size: .76rem; font-weight: 700; cursor: pointer; display: none; }
    .ul-aktion.ul-akt-offen .ul-akt-haken { display: inline-block; }
    .ul-akt-haken:hover { background: #eefaf2; }
    .ul-offen-hin { color: #b9822f; font-weight: 700; }
    .ul-warn-gelb { color: #a8761d; font-weight: 700; }
    .ul-warn-rot { color: #b02a37; font-weight: 700; }
    /* Zu viele gleichzeitig: Eintragen ist gesperrt, die Meldung steht daneben */
    .ul-aktion.ul-akt-sperre .ul-akt-ok { opacity: .45; pointer-events: none; }
    .ul-akt-weg:hover { background: #fdeeee; }

    .ul-fuss { flex: none; display: flex; align-items: center; gap: 14px; padding: 9px 16px;
        background: #f8fafc; border-top: 1px solid #eef2f6; }
    .ul-legende { display: flex; gap: 12px; flex-wrap: wrap; }
    .ul-leg { display: inline-flex; align-items: center; font-size: .66rem; color: #8a939b; }
    .ul-hinweis { margin-left: auto; font-size: .68rem; color: #9aa4ad; }

    @media (max-width: 900px) {
        .ul-modal-box { height: 92vh; }
        .ul-tag { min-height: 44px; }
    }

    /* Die Kopfzeile bricht bewusst NICHT um (das waere zwei Zeilen hoch und
       wuerde beim Blaettern springen). Stattdessen weicht der Reihe nach, was
       am ehesten entbehrlich ist. */
    /* Die Kopfzeile bricht bewusst NICHT um (das waere zwei Zeilen hoch und
       wuerde beim Blaettern springen). Stattdessen weicht der Reihe nach, was
       am ehesten entbehrlich ist. Die Personenleiste kam hinzu und braucht
       Platz, deshalb greift die erste Stufe frueher als zuvor. */
    @media (max-width: 1000px) {
        .ul-titel-text, .ul-trenner { display: none; }
        .ul-kopf { gap: 8px; padding: 10px 10px; }
    }
    @media (max-width: 820px) {
        .ul-monat { min-width: 118px; font-size: 13.5px; }
        .ul-heute { padding: 0 10px; }
        .ul-s-btn { padding: 0 11px; }
        .ul-person { padding: 3px 5px 3px 6px; font-size: .64rem; }
    }
    @media (max-width: 780px) {
        /* Derselbe Sprung geht auch ueber die Pfeile; das Schliessen dagegen
           laesst sich nicht ersetzen und bleibt deshalb. */
        .ul-heute { display: none; }
        .ul-monat { min-width: 96px; font-size: 12.5px; }
        .ul-s-btn { padding: 0 9px; font-size: .7rem; }
    }
    @media (max-width: 620px) {
        /* Dann der Resturlaub: er steht auch im Zeitstrahl der Jahresansicht,
           das Bedienen des Kalenders geht ohne ihn weiter. */
        .ul-personen { display: none; }
    }
    @media (max-width: 420px) {
        /* Ganz schmal bleiben nur noch Symbol, Blaettern, Zeitraum, Ansicht
           und Schliessen -- alles davon wird gebraucht. */
        .ul-monat { min-width: 76px; font-size: 11.5px; }
        .ul-nav-btn { width: 26px; }
        .ul-s-btn { padding: 0 7px; font-size: .66rem; }
        .ul-kopf { gap: 6px; padding: 10px 8px; }
        .ul-nav { gap: 6px; }
    }
    @media print { .ul-modal { display: none !important; } }


    .hm-footer-mitte {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    @media print {
        .hm-footer {
            display: none;
        }
        body {
            padding-bottom: 0 !important;
        }
    }

    /* Logo als "ebenbürtige" Pill: gleiche Optik wie ein Menüpunkt, so groß wie der Header zulässt */
    .headermenu .navbar-brand {
        padding: 4px 12px;
        margin-left: -12px;
        margin-right: 4px;
        border-radius: 6px;
        transition: opacity .15s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
    }

    .headermenu .navbar-brand:hover {
        opacity: .8;
    }

    .headermenu .navbar-brand:active {
        transform: scale(.94);
    }

    .headermenu .navbar-brand img {
        height: 30px;
        width: auto;
        max-width: none;
    }

    .headermenu .nav-item {
        padding: 0;
        margin: 0 3px;
    }

    .headermenu .nav-item a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 13px;
        border-radius: 6px;
        color: #5a6570;
        white-space: nowrap;
        transition: .15s background ease, .15s color ease;
    }

    .headermenu .nav-item a i {
        display: inline-block;
        width: 1.25em;
        text-align: center;
        margin-right: 0;
        font-size: 15px;
        vertical-align: middle;
    }

    /* Icon-only auf Desktop: Text-Labels erst im Mobil-Menü (dort gibt es kein Hover-Tooltip) */
    .headermenu .hm-lbl {
        display: none;
    }

    @media (max-width: 787px) {
        .headermenu .nav-item a {
            justify-content: flex-start;
        }

        .headermenu .hm-lbl {
            display: inline;
            margin-left: 8px;
        }

        .headermenu .nav-item a i {
            font-size: 13px;
            width: 18px;
            text-align: center;
        }
    }

    .headermenu .nav-item a:hover {
        background: rgba(45, 212, 191, .18);
        color: #14273D;
        text-decoration: none;
    }

    .headermenu .nav-item.active a {
        background: #46B2DC;
        color: #ffffff;
        font-weight: 600;
    }

    .headermenu .hm-search {
        position: relative;
        flex: 1 1 auto;
        min-width: 180px;
        margin: 0 18px;
    }

    .headermenu .hm-search input {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0 52px 0 32px;
        border: 1px solid #ced4da;
        border-radius: 5px;
        font-size: 13px;
        /* Sonderstellung: die Suche nutzt die Lese-Schrift, nicht die Eingabe-Schrift
           der Formularfelder. Der Ghost-Text uebernimmt die Metriken automatisch. */
        font-family: var(--font-lese) !important;
        letter-spacing: .01em;
        background: #f8fafb;
        box-sizing: border-box;
    }
    .headermenu .hm-search input::placeholder {
        font-family: var(--font-lese);
        letter-spacing: .01em;
        /* Der Hilfetext blendet am Ende weich aus, statt rueckwaerts
           geloescht zu werden. */
        color: #5a6570;
        /* Im Ruhezustand zurueckhaltend, beim Fokus deutlich. 0.70 ist
           die untere Grenze: darunter faellt der Kontrast unter 3 : 1. */
        opacity: .7;
        transition: opacity .45s ease;
    }

    .headermenu .hm-search input:focus::placeholder {
        opacity: 1;
    }

    .headermenu .hm-search input.hm-ph-weg::placeholder {
        opacity: 0;
    }

    .headermenu .hm-search input:focus {
        outline: none;
        border-color: #46B2DC;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(70, 178, 220, .15);
    }

    .headermenu .hm-search .hm-ghost {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        align-items: center;
        white-space: pre;
        overflow: hidden;
        pointer-events: none;
        display: none;
        text-align: left;
    }
    .headermenu .hm-search .hm-ghost .g-typed { color: transparent; }
    .headermenu .hm-search .hm-ghost .g-rest { color: #a3b1bd; }

    .headermenu .hm-invoice i,
    .headermenu .hm-cash i {
        display: inline-block;
        width: 1.25em;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }

    /* Natives Loeschkreuz abschalten: es sass fest am rechten Rand und
       kollidierte mit der Tastenkuerzel-Plakette. */
    .headermenu .hm-search input[type="search"]::-webkit-search-cancel-button,
    .headermenu .hm-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

    /* Plakette und eigenes Kreuz teilen sich denselben Platz und blenden weich um */
    .headermenu .hm-search-x {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%) scale(.8);
        opacity: 0;
        visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: none;
        border-radius: 3px;
        background: #fdeceb;
        color: #c0392b;
        font-size: 11px;
        line-height: 1;
        cursor: pointer;
        transition: opacity .16s ease, transform .16s ease, background .12s, color .12s;
    }
    .headermenu .hm-search-x:hover { background: #c0392b; color: #fff; }
    .headermenu .hm-search-x:active { background: #a32620; }
    .headermenu .hm-search.hat-text .hm-search-x { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
    .headermenu .hm-search.hat-text .hm-search-kbd { opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.8); }

    .headermenu .hm-search-kbd {
        position: absolute;
        right: 12px;
        top: 50%;
        opacity: 1;
        visibility: visible;
        transition: opacity .16s ease, transform .16s ease;
        transform: translateY(-50%);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .04em;
        color: #8a939b;
        background: #eef1f4;
        border: 1px solid #d9dee4;
        border-radius: 5px;
        padding: 1px 7px;
        pointer-events: none;
        line-height: 1.5;
    }

    .headermenu .hm-search .fa-search {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #8a939b;
        font-size: 12px;
        pointer-events: none;
    }

    .headermenu .hm-icons {
        display: flex;
        align-items: center;
        gap: 2px;
        background: #f8fafb;
        border: 1px solid #e3e8ec;
        border-radius: 8px;
        padding: 0;
        overflow: hidden;
    }

    .headermenu .hm-tool {
        position: relative;
    }

    .headermenu .hm-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #8a939b;
        padding: 5px 10px;
        border-radius: 6px;
        white-space: nowrap;
        transition: .15s background ease, .15s color ease;
    }

    .headermenu .hm-icon i {
        display: inline-block;
        width: 1.25em;
        text-align: center;
    }

    .headermenu .hm-icon:hover {
        background: #e9f3fc;
        color: #2b6cb0;
        box-shadow: inset 0 0 0 1px #cadff1;
        text-decoration: none;
    }

    .headermenu .hm-icon:active {
        background: #d9eafa;
        color: #245a94;
    }

    .headermenu .hm-icon { border-radius: 7px; }

    .headermenu #hmLogout {
        position: relative;
        overflow: hidden;
    }

    .headermenu #hmLogout i {
        position: relative;
        z-index: 1;
    }

    .headermenu #hmLogout .hm-hold-fill {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        background: rgba(220, 53, 69, .3);
        z-index: 0;
    }

    .hm-sess-overlay {
        position: fixed;
        inset: 0;
        background: rgba(20, 39, 61, .45);
        z-index: 4600;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hm-sess-card {
        width: 370px;
        max-width: calc(100vw - 30px);
        background: #fff;
        border: 1px solid #cadff1;
        border-radius: 8px;
        box-shadow: 0 12px 34px rgba(20, 39, 61, .25);
        overflow: hidden;
    }

    .hm-sess-kopf {
        background: #e9f3fc;
        border-bottom: 1px solid #cadff1;
        padding: 10px 14px;
        font-weight: 600;
        color: #14273D;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .hm-sess-kopf .x {
        cursor: pointer;
        color: #4a6076;
        padding: 0 4px;
        font-size: 18px;
        line-height: 1;
        user-select: none;
    }

    .hm-sess-body { padding: 12px 14px; }

    .hm-sess-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px dashed #e3ecf5;
        font-size: 13px;
    }

    .hm-sess-row:last-child { border-bottom: none; }
    .hm-sess-row .l { color: #8a939b; }
    .hm-sess-row .w { color: #14273D; font-weight: 600; }

    .hm-sess-fuss {
        padding: 10px 14px;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        border-top: 1px solid #eef3f8;
    }

    .hm-sess-btn {
        border-radius: 6px;
        padding: 6px 12px;
        font-size: 13px;
        cursor: pointer;
        border: 1px solid transparent;
    }

    .hm-sess-btn.zu { background: #e9f3fc; color: #2b6cb0; border-color: #cadff1; }
    .hm-sess-btn.zu:hover { background: #d9eafa; }
    .hm-sess-btn.aus { background: #e0605e; color: #fff; }
    .hm-sess-btn.aus:hover { background: #d14e4c; }

    .hm-sess-teil {
        margin: 10px 0 2px;
        padding-top: 8px;
        border-top: 1px solid #eef3f8;
        font-size: 10.5px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #8a939b;
    }

    .hm-sess-unit { display: flex; align-items: center; gap: 5px; }

    .hm-sess-inp {
        width: 52px;
        padding: 3px 6px;
        border: 1px solid #cadff1;
        border-radius: 6px;
        font-size: 13px;
        text-align: right;
        color: #14273D;
        background: #f8fbfe;
    }

    .hm-sess-u {
        border: 1px solid #cadff1;
        background: #f8fbfe;
        color: #4a6076;
        border-radius: 5px;
        padding: 3px 7px;
        font-size: 10.5px;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
    }
    .hm-sess-u:hover { background: #e9f3fc; }
    .hm-sess-u.active { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }

    .hm-sess-inp:focus {
        outline: none;
        border-color: #2b6cb0;
        box-shadow: 0 0 0 3px rgba(43, 108, 176, .15);
    }

    .hm-sess-btn.sp { background: #2b6cb0; color: #fff; }
    .hm-sess-btn.sp:hover { background: #245a94; }

    /* Direktvergabe-Modal: gleiches Muster wie .hm-sess-* (Session-Modal) */
    .tz-overlay { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; background: rgba(20,39,61,.45); }
    .tz-card { width: 760px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.32); overflow: hidden; }
    .tz-kopf { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; background: #e9f3fc; border-bottom: 1px solid #cadff1; font-weight: 700; color: #14273D; font-size: 13px; }
    .tz-kopf .x { cursor: pointer; font-size: 19px; color: #6b7784; line-height: 1; }
    .tz-kopf .x:hover { color: #b02a37; }
    /* Zweispaltig: links Formular, rechts Aside mit der Liste. Beide Spalten
       scrollen eigenstaendig -- min-height:0 ist noetig, damit Flex-Kinder
       ueberhaupt schrumpfen und einen Scrollbereich bilden duerfen. */
    .tz-body { display: flex; align-items: stretch; flex: 1; min-height: 0; }
    .tz-form { flex: 1; min-width: 0; padding: 11px 13px; overflow-y: auto; }
    .tz-aside { width: 300px; flex: none; display: flex; flex-direction: column; min-height: 0;
        border-left: 1px solid #eef2f6; background: #fbfdff; }
    .tz-aside-kopf { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px;
        border-bottom: 1px solid #eef2f6; font-size: .66rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .6px; color: #6b7a8d; background: #f4f9fe; }
    .tz-aside-kopf .fa { color: #2b6cb0; }
    .tz-aside-kopf .tz-anz { margin-left: auto; background: #2b6cb0; color: #fff; border-radius: 3px;
        padding: 1px 7px; font-size: .64rem; }
    /* Unter 720px Fensterbreite untereinander statt nebeneinander */
    @media (max-width: 720px) {
        .tz-body { flex-direction: column; }
        .tz-aside { width: auto; border-left: none; border-top: 1px solid #eef2f6; max-height: 240px; }
    }
    .tz-info { background: #f4f9fe; border: 1px solid #e2edf8; border-radius: 8px; padding: 9px 11px; margin-bottom: 11px; }
    .tz-info-kopf { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: #2b6cb0; margin-bottom: 7px; }
    .tz-info-kopf .fa { font-size: .68rem; }
    .tz-info-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .tz-info-zeile:last-of-type { margin-bottom: 0; }
    .tz-info-label { flex: none; width: 46px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #8a939b; }
    .tz-info-code { font-family: var(--font-eingabe, 'Courier Prime', monospace); font-size: .72rem; background: #fff; border: 1px solid #d9e6f2; border-radius: 5px; padding: 2px 7px; color: #14273D; overflow-wrap: anywhere; }
    .tz-info-fuss { font-size: .63rem; color: #8a939b; margin-top: 7px; padding-top: 6px; border-top: 1px dashed #dce8f3; }
    .tz-row { margin-bottom: 9px; }
    .tz-row label { font-size: .7rem; color: #8a939b; font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
    .tz-row input, .tz-row textarea { width: 100%; box-sizing: border-box; border: 1px solid #cadff1; border-radius: 6px; padding: 6px 9px; font-size: .82rem; color: #14273D; font-family: inherit; }
    .tz-row input:focus, .tz-row textarea:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 2px rgba(43,108,176,.12); }
    .tz-row textarea { resize: vertical; min-height: 48px; }
    /* Alle Empfaenger gleich breit: Raster mit gleichen Spalten statt
       inhaltsabhaengiger Breite -- sonst waere z.B. "WA" schmaler als "YE". */
    .tz-pillen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .tz-pille { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
        height: 30px; margin: 0; padding: 0; border: 1px solid #cadff1; border-radius: 7px;
        background: #fff; cursor: pointer; user-select: none; overflow: hidden;
        transition: background .12s, color .12s, border-color .12s, box-shadow .12s; }
    .tz-pille-txt { display: block; line-height: 1; font-size: .76rem; font-weight: 700;
        letter-spacing: .6px; color: #45525f; text-align: center; }
    .tz-pille.an .tz-pille-txt { color: #fff; }
    /* Die App versteckt native Checkboxen mit visibility:hidden UND float:left --
       unsichtbar, aber platzbelegend: der Kasten schob die Beschriftung aus der
       Mitte und machte die Pille hoeher. Hier deshalb komplett abschalten;
       der Label-Klick schaltet die Checkbox trotzdem. */
    .tz-pille input[type=checkbox] { display: none !important; float: none !important; margin: 0 !important; width: 0 !important; }
    .tz-pille:hover { background: #f4f9fe; border-color: #a9cdf0; }
    .tz-pille.an { background: #2b6cb0; border-color: #2b6cb0; color: #fff; box-shadow: 0 1px 3px rgba(43,108,176,.35); }
    .tz-pille.an:hover { background: #245a94; }
    /* Eigene Datumseingabe statt nativem Browser-Kalender (Projektvorgabe,
       gleiche Bauform wie das TUEV-Feld: tt . mm . jjjj mit Auto-Sprung). */
    /* Frist: Status oben in der Beschriftungszeile, darunter Schnellwahl
       (schmale Spalte) und Kalender NEBENEINANDER -- spart Hoehe. */
    .tz-row-frist { margin-bottom: 4px; }
    .tz-frist-kopf { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 5px; }
    .tz-frist-kopf label { margin: 0; }
    .tz-frist-body { display: flex; align-items: center; justify-content: center; gap: 9px; }
    .tz-schnell { display: flex; flex-direction: column; gap: 4px; flex: none; }
    .tz-chip { border: 1px solid #cadff1; background: #fff; color: #2b6cb0; border-radius: 6px; padding: 0 10px; height: 25px; font-size: .7rem; font-weight: 700; cursor: pointer; text-align: center; white-space: nowrap; font-family: inherit; }
    .tz-chip:hover { background: #e9f3fc; border-color: #a9cdf0; }
    .tz-chip.loeschen { color: #8a939b; border-color: #e2e8ee; margin-top: 2px; }
    .tz-chip.loeschen:hover { background: #f4f6f8; }
    /* Eigener Monatskalender -- der native Browser-Kalender war optisch nicht
       in die App integrierbar. Tage sind Knoepfe; erneuter Klick auf den
       gewaehlten Tag hebt die Frist wieder auf. */
    /* Kompakt: feste Spaltenbreite statt 1fr -- sonst zieht das Raster die
       Tagesfelder auf die volle Breite der Formularspalte auf. */
    /* Feste Groesse: die Hoehe darf beim Monatswechsel NICHT springen,
       sonst huepft das ganze Fenster (JS fuellt dafuer immer 6 Zeilen). */
    .tz-kalender { display: block; box-sizing: border-box; width: 188px; height: 176px;
        border: 1px solid #cadff1; background: #fff; border-radius: 7px; padding: 5px 6px 6px; overflow: hidden; }
    .tzk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
    .tzk-titel { font-size: .68rem; font-weight: 700; color: #14273D; }
    .tzk-nav { border: 1px solid #e2e8ee; background: #fff; color: #2b6cb0; border-radius: 4px; width: 19px; height: 18px; font-size: .55rem; cursor: pointer; line-height: 1; padding: 0; }
    .tzk-nav:hover { background: #e9f3fc; border-color: #cadff1; }
    .tzk-raster { display: grid; grid-template-columns: repeat(7, 24px); gap: 1px; }
    .tzk-wt { text-align: center; font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; color: #9aa4ad; padding-bottom: 1px; }
    .tzk-leer { height: 21px; }
    .tzk-tag { height: 21px; border: 1px solid transparent; background: none; border-radius: 4px; font-size: .68rem; color: #14273D; cursor: pointer; padding: 0; font-family: inherit; }
    .tzk-tag:hover { background: #e9f3fc; border-color: #cadff1; }
    .tzk-tag.we { color: #9aa4ad; }
    .tzk-tag.vorbei { color: #c9d1d8; }
    .tzk-tag.heute { border-color: #2b6cb0; font-weight: 700; }
    .tzk-tag.an { background: #2b6cb0; border-color: #2b6cb0; color: #fff; font-weight: 700; }
    .tzk-tag.an:hover { background: #245a94; }
    .tz-frist-hinweis { font-size: .66rem; font-weight: 700; color: #2b6cb0;
        background: #e9f3fc; border-radius: 20px; padding: 2px 10px; letter-spacing: .2px; }
    .tz-frist-hinweis.warn { color: #c0392b; background: #fdeceb; }

    /* Hinweis waehrend einer Bearbeitung */
    .tz-bearb-hinweis { display: none; align-items: center; gap: 7px; background: #fff6e8; border: 1px solid #f3d3a3; color: #9a5b00; border-radius: 7px; padding: 6px 10px; margin-bottom: 9px; font-size: .72rem; font-weight: 700; }
    .tz-bearb-hinweis button { margin-left: auto; border: 1px solid #e5c493; background: #fff; color: #9a5b00; border-radius: 5px; padding: 2px 8px; font-size: .68rem; font-weight: 700; cursor: pointer; }
    .tz-bearb-hinweis button:hover { background: #fff1dc; }

    /* Verwaltungsliste: jede Vergabe mit Empfaenger, Alter, Frist und Aktionen */
    .tz-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 7px; }
    .tzl-zeile { border: 1px solid #eef2f6; border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; background: #fff; }
    .tzl-zeile:hover { border-color: #cadff1; background: #fbfdff; }
    .tzl-kopf { display: flex; align-items: baseline; gap: 7px; }
    .tzl-an { flex: none; background: #e9f3fc; color: #2b6cb0; border-radius: 3px; padding: 1px 6px; font-size: .64rem; font-weight: 700; letter-spacing: .3px; }
    .tzl-betreff { font-size: .78rem; font-weight: 700; color: #14273D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tzl-text { font-size: .69rem; color: #6b7a8d; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tzl-fuss { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
    .tzl-meta { font-size: .64rem; color: #9aa4ad; }
    .tzl-frist { font-size: .64rem; font-weight: 700; color: #2b6cb0; }
    .tzl-frist.rot { color: #c0392b; }
    .tzl-akt { margin-left: auto; display: flex; gap: 4px; }
    .tzl-btn { border: 1px solid #e2e8ee; background: #fff; border-radius: 5px; width: 24px; height: 22px; font-size: .68rem; cursor: pointer; color: #6b7a8d; line-height: 1; }
    .tzl-btn.bearb:hover { border-color: #cadff1; background: #e9f3fc; color: #2b6cb0; }
    .tzl-btn.loesch:hover { border-color: #f2b8b5; background: #fdeceb; color: #c0392b; }
    /* Inline-Rueckfrage in der Zeile: Haken/Kreuz statt zweitem Fenster */
    .tzl-akt.fragt .tzl-btn.bearb, .tzl-akt.fragt .tzl-btn.loesch { display: none; }
    .tzl-frage { display: inline-flex; gap: 4px; }
    .tzl-btn.ja { border-color: #b7e0c8; background: #eafaf1; color: #1e9e63; }
    .tzl-btn.ja:hover { background: #d6f5e4; border-color: #8fd3ac; }
    .tzl-btn.nein { border-color: #e2e8ee; background: #fff; color: #8a939b; }
    .tzl-btn.nein:hover { background: #f4f6f8; }
    .tzl-btn:disabled { opacity: .5; cursor: default; }
    .tzl-leer { padding: 14px; text-align: center; color: #9aa4ad; font-size: .74rem; }
    .tzl-leer.warn { color: #c0392b; }

    .tz-fuss { flex: none; display: flex; justify-content: flex-end; gap: 7px; padding: 9px 13px; background: #f8fafc; border-top: 1px solid #eef2f6; }
    .tz-btn { border: 1px solid transparent; border-radius: 6px; padding: 6px 14px; font-size: .8rem; font-weight: 700; cursor: pointer; }
    .tz-btn.zu { background: #e9f3fc; color: #2b6cb0; border-color: #cadff1; }
    .tz-btn.zu:hover { background: #d9eafa; }
    .tz-btn.sp { background: #2b6cb0; color: #fff; }
    .tz-btn.sp:hover { background: #245a94; }
    .tz-btn.sp:disabled { opacity: .6; cursor: default; }

    .headermenu .hm-danger:hover {
        background: #fdeaea;
        color: #dc3545;
    }

    .headermenu .hm-stats-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        min-width: 200px;
        z-index: 2000;
    }

    .headermenu .hm-invoice {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: #46DD92;
        padding: 5px 12px;
        border: 1px solid #46DD92;
        border-radius: 6px;
        margin-right: 8px;
        white-space: nowrap;
        transition: .15s background ease, .15s color ease;
    }

    .headermenu .hm-invoice:hover {
        background: #2fbf7f;
        border-color: #2fbf7f;
        color: #ffffff;
        text-decoration: none;
    }

    .headermenu .hm-cash {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #2fbf7f;
        padding: 5px 12px;
        border: 1px solid #46DD92;
        border-radius: 6px;
        margin-right: 12px;
        white-space: nowrap;
        transition: .15s background ease, .15s color ease;
    }

    .headermenu .hm-cash:hover {
        background: #46DD92;
        color: #ffffff;
        text-decoration: none;
    }

    /* Echtzeit-Suchergebnisse */
    .headermenu .hm-search-results {
        /* NIE waagerecht scrollen: sonst laeuft die Zeile aus dem Fenster
           und die Fusszeile verrutscht mit. Ohne diese Zeile macht der
           Browser aus overflow-x automatisch "auto". */
        overflow-x: hidden;
        display: none;
        position: fixed;
        top: calc(var(--hm-h, 52px) + 4px);
        left: 50%;
        transform: translateX(-50%);
        width: 75vw;
        background: #ffffff;
        border: 1px solid #e3e8ec;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
        max-height: 420px;
        overflow-y: auto;
        z-index: 2000;
        text-transform: uppercase;
        text-align: left;
    }

    @media (max-width: 787px) {
        .headermenu .hm-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; width: auto; transform: none; }
    }

    .hm-cmd-row { display: flex; align-items: center; gap: 10px; }
    .hm-cmd-kuerzel { font-family: monospace; font-size: 12px; background: #14273D; color: #5eb5e0; border-radius: 4px; padding: 2px 7px; }
    .hm-cmd-label { flex: 1; }
    .hm-cmd-enter { font-size: 11px; color: #8a97a3; }
    .hm-cmd-leer { padding: 10px 14px; font-size: 13px; color: #8a97a3; }
    .hm-cmd-hint { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; opacity: .7; cursor: default; }
    .hm-cmd-fehlt {
        margin-left: auto;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .03em;
        color: #a3b1bd;
        white-space: nowrap;
    }
    .hm-search-row {
        /* Jede Zeile scrollt EINZELN in sich, statt Inhalt zu kuerzen -- Muster
           wie .tk-scroll in der Tageskasse. Die Bildlaufleiste bleibt verborgen,
           sonst waeren die Zeilen unterschiedlich hoch (nur ueberlaufende haetten
           eine). Das Fenster selbst scrollt nie waagerecht, dafuer sorgt
           overflow-x: hidden am Container. */
        overflow-x: auto;
        scrollbar-width: none;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-bottom: 1px solid #f0f3f5;
        color: #14273D;
        font-size: 12px;
    }

    .hm-search-row:hover {
        background: #eaf4f8;
        text-decoration: none;
        color: #14273D;
    }

    .hm-sr-name {
        flex: none;
        font-weight: 600;
        white-space: nowrap;
        color: #5eb5e0;
    }

    .hm-sr-wkz { color: #2b6cb0; font-weight: 600; }
    .hm-sr-tk {
        /* Kurze Marke: bleibt ganz lesbar, statt zu schrumpfen. */
        flex: none; display: inline-flex; align-items: center; gap: 4px; background: #e6f4ea; color: #1d7a3f; border: 1px solid #bfe3cc; border-radius: 9px; padding: 1px 8px; font-size: 10px; font-weight: 700; white-space: nowrap; margin-left: 6px; cursor: pointer; user-select: none; }
    .hm-sr-tk:hover { background: #d3ecdc; }
    .hm-sr-tk .fa { font-size: 9px; }
    .hm-sr-ap { color: #5eb5e0; font-weight: 600; white-space: nowrap; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
    .hm-sr-ap .fa { font-size: 10px; margin-right: 3px; opacity: .85; }
    /* Telefonnummer im Treffer: antippen waehlt. Gruen, weil es eine
       Handlung ausloest und kein reiner Hinweis ist. */
    .hm-sr-tel {
        /* 150px reichen fuer jede normale Nummer; die 168 zusammengeklebten
           im Bestand werden gekuerzt, der volle Wert steht im Tooltip. */
        flex: none; color: #2f855a; font-weight: 600; white-space: nowrap; margin-right: 8px;
        cursor: pointer; border-radius: 3px; padding: 1px 5px; background: #eaf5ee; }
    .hm-sr-tel:hover { background: #2f855a; color: #fff; }
    /* Nicht deutbare Nummer: sichtbar, aber kein Anruf-Ziel. */
    .hm-sr-tel.unklar { color: #8a939b; cursor: default; }
    .hm-sr-tel.unklar:hover { background: transparent; color: #8a939b; }
    .hm-sr-tel .fa { font-size: 9.5px; margin-right: 4px; opacity: .9; }
    /* Akten-Einsicht. Die Zeile selbst fuehrt in die gefilterte Liste. */
    .hm-sr-akte { flex: none; margin-right: 10px; color: #8fa3b5; cursor: pointer;
        padding: 2px 6px; border-radius: 3px; }
    .hm-sr-akte:hover { background: #2b6cb0; color: #fff; }
    .hm-sr-akte .fa { font-size: 12px; }

    .hm-search-row::-webkit-scrollbar { display: none; }
    /* Klebt beim Scrollen am rechten Rand, sonst waere es bei langen
       Zeilen erst nach dem Scrollen erreichbar. Der Hintergrund ist
       noetig, damit durchlaufender Text nicht darunter sichtbar wird. */
    .hm-sr-info {
        color: #5a6570;
        flex: 1 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hm-sr-date {
        /* Kuerzbar, statt die Zeile aufzudruecken (Muster von .hm-sr-ap). */
        flex: none;
        color: #8a939b;
        font-size: 10px;
        white-space: nowrap;
    }

    /* OFFEN-Badge im Suchergebnis: Doppelklick stellt auf ZAHLUNG (AJAX) */
    .hm-search-row .hm-badge-action { cursor: pointer; transition: transform .18s ease, filter .18s ease; }
    .hm-search-row .hm-badge-action:hover { transform: scale(1.05); filter: brightness(1.06); }
    @keyframes hmBadgeBounce { 0% {transform:scale(1);} 45% {transform:scale(1.06);} 100% {transform:scale(1);} }
    .hm-badge-bounce { animation: hmBadgeBounce .35s ease-out; }

    /* Tastatur-Navigation im Ergebnisfenster */
    .hm-search-row.hm-sel { background: #eaf4fb; box-shadow: inset 3px 0 0 #46B2DC; }
    .hm-search-info { padding: 8px 14px 10px 26px; background: #f7fafc; border-bottom: 1px solid #e4e9ee; font-size: 12px; text-align: left; }
    .hm-search-info div { display: flex; gap: 10px; padding: 1.5px 0; }
    .hm-search-info div span:first-child { color: #8a939b; min-width: 100px; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; padding-top: 2px; flex: 0 0 auto; }
    .hm-search-info div span:last-child { color: #2b3742; word-break: break-word; }

    /* Status-Badges im Ergebnisfenster: eigene Kopie, damit die Suche auf JEDER Seite
       identisch aussieht, auch auf Standalone-Seiten ohne css-style (z.B. Auftragsakte) */
    .hm-search-results .area-badge {
        flex: none; display: inline-block; padding: 2px 10px; border-radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
    .hm-search-results .badge-offen { background: #fff8e0; color: #a17d00; border: 1px solid #F2D231; }
    .hm-search-results .badge-unvollst { background: #fff1e6; color: #c25e00; border: 1px solid #ED8936; }
    .hm-search-results .badge-klaerfall { background: #f6ecfe; color: #7e22ce; border: 1px solid #a855f7; }
    .hm-search-results .badge-zahlung { background: #e6f7fb; color: #1a8dad; border: 1px solid #46BDDD; }
    .hm-search-results .badge-web { background: #f3ecff; color: #7c4bd1; border: 1px solid #b79aec; }
    .hm-search-results .badge-archiv { background: #e9f9f0; color: #1e9e63; border: 1px solid #46DD92; }
    .hm-search-results .badge-muell { background: #fdecec; color: #b02a37; border: 1px solid #e6a5a0; }

    /* Sammelrechnungen-Sektion in der Live-Suche */
    .hm-sr-head { padding: 8px 14px 4px; font-size: 10px; letter-spacing: .1em; color: #8a939b; border-top: 1px solid #eef1f4; background: #fafbfc; }
    .hm-sr-row { display: flex; gap: 10px; align-items: center; padding: 5px 14px; font-size: 12px; border-bottom: 1px solid #f2f4f6; background: #fafbfc; }
    .hm-sr-row b { color: #14273D; min-width: 72px; text-align: right; flex: 0 0 auto; }
    .hm-sr-row .hm-sr-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hm-sr-neu { flex: 0 0 auto; border: 1px solid #cadff1; background: #e9f3fc; color: #2b6cb0;
        border-radius: 5px; padding: 2px 7px; font-size: 12px; line-height: 1.2; cursor: pointer; }
    .hm-sr-neu:hover { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
    .hm-sr-neu.laeuft { opacity: .5; pointer-events: none; }
    .hm-sr-geb { flex: 0 0 auto; font-size: 10px; border-radius: 8px; padding: 1px 8px; background: #fdf6e3; color: #8a6d1a; }
    .hm-sr-geb.ja { background: #eef6ef; color: #2f6b3a; }

    /* Fester Footer im Ergebnisfenster: Fakten links, Tastenkuerzel rechts */
    .hm-search-footer { position: sticky; bottom: 0; background: #14273D; color: #cfd8e3; padding: 9px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; border-top: 2px solid #0e1c2e; border-radius: 0 0 8px 8px; text-transform: none; }
    .hm-search-footer .hm-sf-stats { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .hm-search-footer .hm-sf-stats b { color: #fff; font-size: 12px; }
    .hm-search-footer .hm-sf-stats .hm-sf-chip { background: rgba(255,255,255,.08); border-radius: 10px; padding: 1px 9px; white-space: nowrap; }
    .hm-sf-keys { display: flex; gap: 10px; flex-wrap: wrap; }
    .hm-sf-keys span { white-space: nowrap; color: #9fb2c6; }
    .hm-sf-keys b { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 0 6px; margin-right: 3px; color: #fff; font-weight: 600; font-size: 10.5px; }
    .hm-sf-syntax { flex-basis: 100%; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.1); font-size: 10px; color: #8fa3b8; }
    .hm-sf-syntax-titel { text-transform: uppercase; letter-spacing: .08em; font-size: 9px; color: #6e8399; }
    .hm-sf-syntax b { background: rgba(255,255,255,.1); border-radius: 3px; padding: 0 5px; margin-right: 3px; color: #d8e2ec; font-weight: 500; font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; }

    .hm-search-empty {
        padding: 10px 12px;
        color: #8a939b;
        font-size: 12px;
    }

    .hm-search-all {
        display: block;
        text-align: center;
        padding: 8px;
        font-size: 11px;
        font-weight: 600;
        color: #46B2DC;
        background: #f8fafb;
    }

    .hm-search-all:hover {
        background: #eaf4f8;
        text-decoration: none;
    }

    @media (max-width: 787px) {
        .headermenu .nav-item {
            margin: 2px 0;
        }

        .headermenu .hm-search {
            max-width: 100%;
            margin: 6px 0;
        }

        .headermenu .hm-icons {
            margin: 4px 0;
            display: inline-flex;
        }

        .headermenu .hm-cash,
        .headermenu .hm-invoice {
            margin: 4px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    /* 761–991px: Menü ausgeklappt, aber kompakt & ZWEIZEILIG, Suchleiste allein in Zeile 2 */
    @media (min-width: 788px) and (max-width: 991.98px) {
        /* Zweizeilig: Zeile 1 = Logo + alle Icons, Zeile 2 = Suche (volle Breite).
           Collapse per display:contents aufloesen -> Logo/Icons/Suche werden direkte
           Flex-Items der Navbar (Logo damit in Zeile 1, nicht vertikal mittig). */
        .headermenu { flex-wrap: wrap !important; align-items: center; }
        .headermenu .navbar-toggler { display: none !important; }
        .headermenu .navbar-collapse { display: contents !important; }
        .headermenu .navbar-brand { order: 0; }
        .headermenu .navbar-nav {
            order: 1; flex-direction: row !important; flex-wrap: nowrap; align-items: center;
            margin-left: auto;   /* zwei Auto-Margins (hier + hm-icons) zentrieren die Menü-Icons */
        }
        .headermenu .hm-invoice, .headermenu .hm-cash { order: 2; }
        .headermenu .hm-icons { order: 3; margin-left: auto; }
        .headermenu .hm-search {
            order: 4; flex-basis: 100%; width: 100%; margin: 8px 0 0; min-width: 0;
        }
        .headermenu .nav-item a { padding: 6px 9px; }
        .headermenu .nav-item a i { font-size: 14px; }
        .headermenu .hm-invoice, .headermenu .hm-cash { padding: 6px 9px; margin: 0 2px; }
        .headermenu .hm-invoice i, .headermenu .hm-cash i { font-size: 14px; }
        .headermenu .hm-icon { padding: 6px 8px; }
        .headermenu .hm-icons { gap: 2px; }
    }



/* ---------------------------------------------------------------------------
   Grundzustand: Der native Aufbau ist im Markup immer vorhanden, aber ab
   831 px unsichtbar. Das ist die EINZIGE Regel dieser Datei ausserhalb der
   Medienabfrage. Kein Desktop-Element wird dadurch veraendert.
   --------------------------------------------------------------------------- */
.na-app,
.na-blatt,
.na-anmeldung { display: none; }

@media (max-width: 830.98px) {

  /* -------------------------------------------------------------------------
     1 · Huelle
     html traegt die Farbe hinter dem Home-Indikator. Ohne diese Zeile zieht
     iOS den hellen Koerperhintergrund dorthin und unter der Reiter-Leiste
     bleibt ein heller Streifen stehen.
     ------------------------------------------------------------------------- */
  /* ⚠️ Die Huellen-Regeln greifen NUR auf Seiten, die den nativen Aufbau
     tatsaechlich tragen (.na-app bzw. .na-anmeldung im Markup). In Schritt 1
     sind das die offene Liste und die Anmeldung. Alle anderen Seiten (Kasse,
     Akte, Startseite ...) bleiben unter 831 px im heutigen Zustand B --
     ein pauschales body-fixed haette sie am Handy unbedienbar gemacht.
     :has() ist im Bestand bereits an drei Stellen im Einsatz; ohne
     :has-Unterstuetzung erscheinen die Karten zusaetzlich zur Seite
     (unschoen, aber bedienbar -- keine harte Abhaengigkeit). */
  html.na-touch:has(.na-app), html.na-touch:has(.na-anmeldung) { background: #14273D; }
  html.na-touch:has(.na-app), html.na-touch:has(.na-anmeldung),
  html.na-touch body:has(.na-app), html.na-touch body:has(.na-anmeldung) {
    /* 100% ist in iOS an den Layout-Viewport gebunden und endet vor der
       Home-Indikator-Zone. Die beiden folgenden Zeilen melden die
       tatsaechliche Hoehe; die letzte gueltige gewinnt. */
    height: 100%;
    height: -webkit-fill-available;
    height: 100dvh;
    /* Massgeblich: die selbst gemessene Hoehe. 100dvh ist beim ersten
       Laden in der installierten App zu gross. */
    height: var(--app-h, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
    /* Sonst vergroessert iOS beim Drehen die Schrift und behaelt das bei. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html.na-touch body:has(.na-app), html.na-touch body:has(.na-anmeldung) {
    position: fixed;
    inset: 0;
    width: 100%;
    margin: 0;
    background: #14273D;
    color: #14273D;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }

  /* -------------------------------------------------------------------------
     Fokus-Zoom abstellen -- gilt fuer JEDE Seite am Handy, nicht nur fuer die
     nativen.
     ⚠️ Warum ueber die Schriftgroesse und nicht ueber die Anzeige-Angabe:
     iOS zoomt beim Antippen in ein Feld hinein, sobald dessen Schrift kleiner
     als 16 px ist. "user-scalable=no" und "maximum-scale" ignoriert Safari
     seit iOS 10 (Barrierefreiheit), und die JS-Sperren im nativen Modus
     fangen nur Zwei-Finger- und Doppeltipp-Zoom ab, NICHT den Fokus-Zoom.
     Die Schriftgroesse ist damit der einzige verlaessliche Weg.
     "!important", weil einzelne Desktop-Regeln bis zu (1,1,2) spezifisch sind
     (Tabellenfilter, Einstellungsfenster) und sonst gewinnen wuerden.
     Ankreuz- und Auswahlfelder ausgenommen: sie zeigen keinen Text, die
     Groesse waere folgenlos, koennte aber ihre Optik verschieben.
     ------------------------------------------------------------------------- */
  html.na-touch input:not([type="checkbox"]):not([type="radio"]),
  html.na-touch textarea,
  html.na-touch select { font-size: 16px !important; }

  /* Desktop-Bestand wird AUSGEBLENDET, nicht entfernt -- und nur dort,
     wo der native Ersatz auch existiert. */
  html.na-touch body:has(.na-app) .headermenu, html.na-touch body:has(.na-anmeldung) .headermenu,
  html.na-touch body:has(.na-app) .hm-footer, html.na-touch body:has(.na-anmeldung) .hm-footer,
  html.na-touch body:has(.na-app) .na-weg-nativ, html.na-touch body:has(.na-anmeldung) .na-weg-nativ { display: none !important; }
  html.na-touch body:has(.na-app) .container, html.na-touch body:has(.na-app) .container-fluid,
  html.na-touch body:has(.na-anmeldung) .container, html.na-touch body:has(.na-anmeldung) .container-fluid {
    padding: 0 !important; max-width: none !important;
  }

  /* Unter der schwebenden Leiste darf nichts Marineblaues durchscheinen:
     .na-app deckt in der iOS-PWA nicht zuverlaessig bis zur Unterkante, und
     dahinter lagen bisher html und body in Marine. Gleiche Spezifitaet wie
     die Regeln oben, steht aber spaeter und gewinnt dadurch.
     Die ANMELDESEITE bleibt marine -- sie hat ihren eigenen Verlauf. */
  html.na-touch:has(.na-app),
  html.na-touch body:has(.na-app) {
    /* Oben marine wie der Kopf, darunter hell wie der Inhalt. Ein harter
       Umschlag statt einer einzigen Farbe, weil in der iOS-PWA an BEIDEN
       Enden etwas durchscheinen kann und die Farbe dort jeweils zur
       darueberliegenden Flaeche passen muss. 120 px deckt den Kopf sicher ab
       (Safe Area oben plus rund 47 px Kopfhoehe). */
    background: linear-gradient(#14273D 0 120px, #f7f9fc 120px);
  }

  html.na-touch .na-app {
    /* Polster, das die Beschriftung vom Home-Indikator freihaelt.
       Steht hier, weil Leiste UND Inhalt damit rechnen. */
    --na-polster: max(6px, calc(env(safe-area-inset-bottom) - 26px));
    display: flex;
    /* fixed statt absolute: die Vorlage haengt tief in Containern, ein
       positionierter Vorfahre wuerde den absoluten Aufbau einfangen. */
    position: fixed;
    inset: 0;
    /* Absicherung: in der iOS-PWA reichte inset allein nicht bis zur
       Unterkante. dvh ist die vom Geraet gemeldete Viewport-Hoehe. */
    height: var(--app-h, 100dvh);
    flex-direction: column;
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    /* Heller Grund: er umgibt die freistehende Reiter-Leiste unten. */
    background: #f7f9fc;
  }

  /* -------------------------------------------------------------------------
     2 · Kopfzeile
     Safe-Area als INNEN-Abstand. Als Aussenabstand schiebt iOS die Leiste
     um ihre volle Hoehe weg und darunter bleibt eine leere Flaeche.
     ------------------------------------------------------------------------- */
  .na-kopf {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top) + 8px) 14px 10px;
    background: #14273D;
    color: #fff;
    border-bottom: 2px solid #2b6cb0;
    box-shadow: 0 10px 12px -7px rgba(20,39,61,.32);
    z-index: 20;
  }

  /* Suche mittig im Kopf: sie ist das wichtigste Bedienelement der Liste. */
  .na-suche-feld {
    flex: 1; min-width: 0; position: relative;
    display: flex; align-items: center;
  }
  .na-suche-ico {
    position: absolute; left: 9px; width: 15px; height: 15px;
    color: #9fb4cc; pointer-events: none;
  }
  .na-suche-feld input {
    width: 100%; height: 34px; padding: 0 30px 0 30px;
    border: 1px solid rgba(202,223,241,.25); border-radius: 5px;
    background: rgba(255,255,255,.10); color: #fff;
    font-family: inherit; font-size: 16px; outline: none;
    -webkit-appearance: none; appearance: none;
    -webkit-user-select: text; user-select: text;
  }
  .na-suche-feld input::placeholder { color: #8ea4bd; font-size: 12.5px; }
  .na-suche-feld input:focus { border-color: #cadff1; background: rgba(255,255,255,.16); }
  /* Das eigene Loeschkreuz statt des nativen (das sieht je nach Geraet anders aus). */
  .na-suche-feld input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
  .na-suche-weg {
    position: absolute; right: 2px; width: 26px; height: 26px; padding: 0;
    border: 0; background: none; color: #9fb4cc; font-size: 15px; line-height: 1;
    display: none; align-items: center; justify-content: center; cursor: pointer;
  }
  .na-suche-weg.na-an { display: flex; }
  .na-kopf-btn {
    position: relative; flex: none; width: 34px; height: 34px; padding: 0;
    /* Rahmen und Flaeche wie das Suchfeld daneben, damit der Kopf aus einem
       Guss wirkt. box-sizing ist Pflicht: ohne es waechst der Knopf um die
       Rahmenbreite ueber die 34 px des Feldes hinaus. */
    box-sizing: border-box;
    border: 1px solid rgba(202,223,241,.25); border-radius: 5px;
    background: rgba(255,255,255,.10); color: #cadff1;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; cursor: pointer; transition: transform .08s, background .12s;
  }
  .na-kopf-btn svg { width: 15px; height: 15px; }
  .na-kopf-btn:active { transform: scale(.88); }
  /* 33 px sichtbar -> 45 px Tippflaeche, ohne die Optik zu aendern. */
  .na-kopf-btn::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: -2px; right: -2px; }

  /* -------------------------------------------------------------------------
     3 · Inhalt
     Der helle Grund gehoert dem Inhalt, nicht dem Koerper: sonst scheint er
     unter der Reiter-Leiste durch, wenn iOS den Viewport kleiner meldet.
     ------------------------------------------------------------------------- */
  .na-inhalt {
    flex: 1; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    background: #f7f9fc;
    /* Die Leiste schwebt, also haelt sich der Inhalt ihren Platz selbst frei.
       77 px = Rahmen 2 + Polster oben 10 + Knopf 43 + Abstand 10 + 12 px Luft
       + 12 px Luft; dazu das Safe-Area-Polster der Leiste. */
    padding: 12px 12px calc(77px + var(--na-polster));
  }

  /* -------------------------------------------------------------------------
     4 · Auftragskarte (ersetzt die Tabellenzeile)
     ------------------------------------------------------------------------- */
  .na-karte {
    background: #fff;
    border: 1px solid #cadff1;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(20,39,61,.07);
    margin-bottom: 10px;
    overflow: hidden;
    transition: background .15s;
  }
  .na-karte-kopf {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 11px 13px;
    border: 0; background: none; font-family: inherit; text-align: left;
    cursor: pointer; transition: background .15s;
  }
  /* Druck auf den Kopf faerbt die GANZE Karte. Bewusst ueber :has() und
     nicht ueber .na-karte:active: sonst wuerde auch ein Tipp auf Anruf
     oder SMS im Fuss die Karte einfaerben, obwohl das eigene Aktionen
     sind, die den Auftrag gar nicht oeffnen. */
  .na-karte:has(.na-karte-kopf:active) { background: #e3f1fd; }
  .na-karte-kopf:active { background: #e3f1fd; }   /* Rueckfall, falls :has() fehlt */
  .na-k-wer { flex: 1; min-width: 0; }
  .na-k-zeile1 { display: flex; align-items: center; gap: 7px; }
  .na-k-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F2D231; }
  .na-k-punkt.na-s-zahlung  { background: #2b6cb0; }
  .na-k-punkt.na-s-klaerfall { background: #a855f7; }
  .na-k-punkt.na-s-fertig    { background: #1e9e63; }
  .na-k-name {
    flex: 1; min-width: 0;
    font-size: 14.5px; font-weight: 700; color: #14273D; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Annahme (grau) und voraussichtliche Fertigstellung (gruen) untereinander,
     rechts neben beiden Textzeilen. Der senkrechte Strich fasst sie als
     Zeitraum zusammen -- ein Pfeil kam nicht in Frage, Courier Prime hat
     das Zeichen nicht. Ohne Termin bleibt es bei einer grauen Zeile. */
  .na-k-daten {
    flex: none; display: flex; flex-direction: column; gap: 2px;
    font-family: 'Courier Prime', monospace; white-space: nowrap; text-align: right;
  }
  .na-k-daten.na-mit-ziel { border-left: 2px solid #cadff1; padding-left: 7px; }
  .na-k-dan { font-size: 10.5px; color: #8a939b; }
  .na-k-dzi { font-size: 10.5px; font-weight: 700; color: #1e9e63; }
  .na-k-zeile2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
  .na-k-vorgang {
    flex: none; font-size: 10px; font-weight: 700; letter-spacing: .6px;
    background: #e9f3fc; color: #14273D; border-radius: 5px; padding: 2px 7px;
  }
  .na-k-kennz {
    flex: none; font-size: 11.5px; font-weight: 700; color: #14273D;
    font-family: 'Courier Prime', monospace; letter-spacing: .4px;
  }
  .na-k-auto {
    flex: 1; min-width: 0; font-size: 11px; color: #8a939b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .na-k-pfeil { flex: none; width: 13px; height: 13px; stroke: #b6c2cd; }
  .na-k-fuss { display: flex; gap: 8px; padding: 0 13px 11px; }
  .na-tel {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
    padding: 7px 12px; border-radius: 5px;
    background: #eaf6ef; color: #1e9e63; text-decoration: none;
    font-size: 12.5px; font-weight: 700; font-family: 'Courier Prime', monospace;
  }
  .na-tel svg { width: 13px; height: 13px; }
  /* Nicht deutbare Nummer: sichtbar, aber kein Anruf-Ziel. */
  .na-tel.na-unklar { background: #eef1f4; color: #8a939b; pointer-events: none; }
  /* SMS neben dem Anruf, gleiche Bauform, eigener Farbton. */
  .na-sms {
    /* ⚠️ Das ist ein <button> (er oeffnet das Vorlagen-Blatt, statt direkt zu
       senden). Ein Knopf bringt Rahmen, Systemschrift und auf iOS eine eigene
       Darstellung mit -- alles drei muss ausdruecklich weg, sonst sieht er
       fremd aus. Der Anruf daneben ist ein <a> und braucht das nicht. */
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    font-family: 'Courier Prime', monospace;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; min-height: 36px;
    padding: 7px 11px; border-radius: 5px;
    background: #e9f0fb; color: #2b6cb0; text-decoration: none;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  }
  .na-sms svg { width: 13px; height: 13px; }
  .na-sms:active { transform: scale(.96); }
  .na-anzahl {
    display: inline-flex; align-items: center; padding: 0 8px; border-radius: 5px;
    background: #fdf0e0; color: #975a16; font-size: 10px; font-weight: 700; letter-spacing: .5px;
    margin-left: auto;
  }
  /* Nachladen beim Scrollen: was noch nicht an der Reihe ist, wird gar nicht
     erst gezeichnet (display:none kostet kein Layout und kein Zeichnen). */
  .na-karte.na-spaeter, .na-karte.na-weg { display: none; }

  /* SMS-Blatt: Fahnen-Auswahl, eigener Text, Zaehler. */
  /* ---- Vorlagen: immer deutsch, deshalb Text statt Flagge ------------- */
  .na-sms-abschnitt { display: flex; align-items: baseline; gap: 8px;
    margin: 2px 0 7px; color: #5a6b7c; font-size: 11px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase; }
  .na-sms-gewaehlt { color: #2b6cb0; font-size: 12px; font-weight: 700;
    letter-spacing: 0; text-transform: none; }

  .na-sms-vorlagen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .na-sms-vor { position: relative; flex: none; min-height: 34px;
    padding: 7px 12px; border: 1px solid #cadff1; border-radius: 5px;
    background: #fff; color: #14273D; font-family: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s; }
  .na-sms-vor.na-aktiv { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
  .na-sms-vor:active { transform: scale(.97); }
  .na-sms-vweg { margin-left: 7px; color: #a3b1bd; font-weight: 700; }
  .na-sms-vor.na-aktiv .na-sms-vweg { color: rgba(255,255,255,.7); }

  /* ---- Sprachen: NUR Flaggen, dafuer ein Suchfeld --------------------- */
  .na-sms-suchzeile { position: relative; display: flex; align-items: center; margin-bottom: 8px; }
  .na-sms-suchico { position: absolute; left: 9px; width: 15px; height: 15px;
    color: #a3b1bd; pointer-events: none; }
  .na-sms-suche { width: 100%; height: 34px; box-sizing: border-box;
    padding: 0 10px 0 30px; border: 1px solid #cadff1; border-radius: 5px;
    background: #f7f9fc; color: #14273D; font-family: inherit;
    /* 16px ist Pflicht: darunter zoomt iOS beim Antippen hinein. */
    font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; }
  .na-sms-suche:focus { border-color: #2b6cb0; background: #fff; }
  .na-sms-suche::-webkit-search-cancel-button { -webkit-appearance: none; }

  /* Feste Spaltenzahl statt Umbruch: die Flaggen stehen dadurch in einem
     ruhigen Raster. Bei 390 px sind das rund 48 px je Feld, also ueber der
     geforderten Tippflaeche. */
  .na-sms-fahnen { display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 6px; margin-bottom: 14px; max-height: 132px; overflow-y: auto; }
  .na-sms-fl { min-height: 42px; padding: 0; border: 1px solid #cadff1;
    border-radius: 5px; background: #fff; font-size: 21px; line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s, transform .08s; }
  .na-sms-fl.na-aktiv { border-color: #2b6cb0; background: #e3f1fd;
    box-shadow: inset 0 0 0 1px #2b6cb0; }
  .na-sms-fl:active { transform: scale(.92); }
  .na-sms-laden { padding: 10px 2px; color: #8a97a3; font-size: 12.5px; }

  /* ---- Textfeld mit Ladeanzeige --------------------------------------- */
  .na-sms-textbox { position: relative; }
  .na-sms-laedt { position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center; gap: 9px;
    background: rgba(255,255,255,.86); border-radius: 5px;
    color: #2b6cb0; font-size: 13px; font-weight: 600; }
  .na-sms-laedt[hidden] { display: none; }
  .na-sms-kreisel { width: 16px; height: 16px; border: 2px solid #cadff1;
    border-top-color: #2b6cb0; border-radius: 50%; animation: naDreh .7s linear infinite; }
  @keyframes naDreh { to { transform: rotate(360deg); } }

  .na-sms-text {
    width: 100%; box-sizing: border-box;
    padding: 12px; border: 1px solid #dbe4ec; border-radius: 10px;
    /* 16px: darunter zoomt iOS beim Antippen. */
    font: 16px/1.45 inherit; color: #14273D; resize: vertical;
  }
  .na-sms-zaehler {
    margin-top: 6px; font-size: 12px; color: #8a97a3; text-align: right;
  }
  .na-sms-zaehler.na-viel { color: #b45309; }

  /* Name der eigenen Vorlage: eigene Zeile statt eines nativen Abfragefensters. */
  .na-sms-merkzeile { display: none; gap: 8px; margin-top: 12px; }
  .na-sms-merkzeile.na-an { display: flex; }
  .na-sms-merkname {
    flex: 1 1 auto; min-width: 0;
    padding: 10px 12px; border: 1px solid #dbe4ec; border-radius: 8px;
    font: 16px/1.2 inherit; color: #14273D;
  }
  .na-sms-merkok {
    flex: none; padding: 10px 16px; border: 0; border-radius: 8px;
    background: #2b6cb0; color: #fff; font-size: 13.5px; font-weight: 600;
  }
  .na-sms-meldung { margin-top: 10px; font-size: 12.5px; color: #2f855a; }
  .na-sms-meldung.na-fehler { color: #c53030; }

  .na-sms-merk {
    flex: none; padding: 12px 14px; border: 1px solid #dbe4ec; border-radius: 10px;
    background: #fff; color: #14273D; font-size: 13px;
  }
  .na-sms-los {
    flex: 1 1 auto; padding: 13px 16px; border: 0; border-radius: 10px;
    background: #2b6cb0; color: #fff; font-size: 14px; font-weight: 700;
  }
  .na-sms-los:active, .na-sms-merk:active { transform: scale(.98); }

  /* Befehlsmodus (":") -- dieselben Befehle wie am Desktop. */
  .na-befehle { display: none; padding: 10px 12px 2px; }
  .na-befehle.na-an { display: block; }
  .na-cmd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    margin-bottom: 8px;
    border: 1px solid #dbe4ec;
    border-radius: 10px;
    background: #fff;
  }
  .na-cmd[data-na-cmd]:active { background: #eef4fb; transform: scale(.99); }
  .na-cmd-kurz {
    font-weight: 700; font-size: 13.5px; color: #2b6cb0; white-space: nowrap;
  }
  .na-cmd-text {
    font-size: 13px; color: #14273D;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .na-cmd-hinweis {
    margin-left: auto; font-size: 11.5px; color: #8a97a3; white-space: nowrap;
  }
  .na-cmd-fehlt { opacity: .55; }

  /* Weiches Ausblenden des Platzhalters am Satzende. */
  #na-suche::placeholder { transition: opacity .32s ease; }
  #na-suche.na-ph-weg::placeholder { opacity: 0; }
  .na-mehr { height: 1px; }
  .na-fund { display: none; }
  .na-fund.na-an { display: block; }
  .na-fund-titel {
    padding: 14px 2px 8px; color: #5a6b7c; font-size: 11px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
  }
  .na-fund .na-karte { position: relative; }
  .na-fund-rubrik {
    position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none;
    font-size: 8.5px; font-weight: 700; letter-spacing: .5px;
    border-radius: 0 5px 0 5px; padding: 2px 6px;
    background: #eef1f4; color: #5a6b7c;
  }
  .na-fund-rubrik.na-r-offen     { background: #fdf6d8; color: #8a6d1a; }
  .na-fund-rubrik.na-r-zahlung   { background: #e9f0fb; color: #2b6cb0; }
  .na-fund-rubrik.na-r-klaerfall { background: #f3e8fd; color: #7e3ff2; }
  .na-fund-rubrik.na-r-archiv    { background: #eaf6ef; color: #1e9e63; }
  .na-fund-rubrik.na-r-muell     { background: #fdeaea; color: #c0392b; }
  .na-fund-rubrik.na-r-unvollst  { background: #fdf0e0; color: #975a16; }
  .na-fund-rubrik.na-r-web       { background: #e0f2f5; color: #0f6e76; }
  .na-fund-fuss { text-align: center; color: #8a939b; font-size: 11.5px; padding: 6px 0 2px; }
  .na-fund-fehler { text-align: center; color: #c0392b; font-size: 12px; padding: 10px 0 2px; }
  .na-nix { display: none; text-align: center; color: #8a939b; font-size: 13px; padding: 40px 20px; }
  .na-nix.na-an { display: block; }
  .na-listenfuss { text-align: center; font-size: 11px; color: #8a939b; padding: 8px 0 4px; letter-spacing: .4px; }
  .na-leer { text-align: center; color: #8a939b; padding: 70px 24px; }
  .na-leer svg { width: 46px; height: 46px; opacity: .4; margin-bottom: 12px; }
  .na-leer p { font-size: 14px; font-weight: 600; margin: 0; }

  /* -------------------------------------------------------------------------
     5 · Reiter-Leiste unten
     ------------------------------------------------------------------------- */
  /* Freistehende Insel mit abgerundeten Ecken. Die Safe Area ist hier
     AUSSEN-Abstand (anders als beim Kopf): die Leiste soll ueber dem
     Home-Indikator schweben. Die Flaeche darum ist der helle Grund von
  /* Freistehende Insel, die praktisch auf dem Bildschirmboden sitzt.
     Die Safe Area ist bewusst INNEN-Polster und NICHT Aussenabstand:
     env(safe-area-inset-bottom) meldet 34 px, der Home-Indikator belegt
     aber nur rund 8 bis 13 px ueber der Kante. Als Aussenabstand haette
     die Insel 34 px in der Luft gehangen. So bleibt sie 6 px ueber dem
     Rand und das Polster haelt nur die Beschriftungen vom Indikator frei
     (Text beginnt 22 px ueber der Kante, also 9 px Luft). Auf Geraeten
  /* Freistehende Insel, die UEBER dem Inhalt schwebt: absolut statt als
     Flex-Kind, damit .na-inhalt die volle Hoehe bekommt und nicht 72 px
     an die Leiste verliert. Der Inhalt haelt sich unten selbst Platz
     frei (padding-bottom dort), sonst waere die letzte Karte verdeckt.
     Die Safe Area ist INNEN-Polster, nicht Aussenabstand: sie meldet
  /* Freistehende Glas-Insel.
     Sie haengt am VIEWPORT (fixed), nicht an .na-app: in der iOS-PWA
     reichte die Huelle nicht zuverlaessig bis zur Unterkante.
     Freistehend ist erst moeglich, seit html/body die echte
     Viewport-Hoehe kennen (dvh / -webkit-fill-available) -- vorher
     blieb unter der Insel eine Flaeche stehen, die kein Element
     fuellen kann, weil sie ausserhalb des Viewports liegt.
     Die Weichzeichnung braucht auf iOS zwingend das -webkit-Praefix. */
  /* ---- Archiv-Uebersicht: Jahre mit Monatskacheln ---------------------- */
  .na-archiv-titel { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
  .na-archiv-titel b { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 1.4px; }
  .na-archiv-titel span { color: #9fb3c8; font-size: 11.5px; font-weight: 600; }

  .na-jahr { margin: 0 0 20px; }
  .na-jahr-kopf { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; }
  .na-jahr-kopf b { color: #14273D; font-size: 16px; font-weight: 700; letter-spacing: 1.4px;
    border-left: 3px solid #5eb5e0; padding-left: 8px; line-height: 1.1; }
  .na-jahr-kopf::after { content: ''; flex: 1; height: 1px; background: #cadff1; }
  .na-jahr-summe { color: #2b6cb0; background: #e9f3fc; border-radius: 20px;
    padding: 3px 11px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }

  /* Vorgangsarten: am Handy waagerecht scrollbar statt umbrechend --
     die Zeile bleibt dadurch immer einzeilig und ruhig. */
  .na-jahr-vorg { display: flex; gap: 5px; overflow-x: auto; margin: 0 0 9px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .na-jahr-vorg::-webkit-scrollbar { display: none; }
  .na-jahr-vorg span { flex: none; display: inline-flex; align-items: baseline; gap: 4px;
    background: #f4f8fc; border: 1px solid #e2ecf6; border-radius: 5px;
    padding: 3px 8px; font-size: 11px; color: #14273D; font-weight: 600; white-space: nowrap; }
  .na-jahr-vorg span b { color: #2b6cb0; font-size: 11px; font-weight: 700; letter-spacing: .3px; }

  /* Vier Kacheln je Zeile: bei 390 px sind das rund 80 px Breite und damit
     deutlich ueber der geforderten Tippflaeche von 44 px. */
  .na-monate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .na-monat { display: block; text-decoration: none; background: #fff; border: 1px solid #cadff1;
    border-radius: 10px; padding: 8px 6px 7px; text-align: center;
    -webkit-tap-highlight-color: transparent; transition: background .12s, border-color .12s; }
  .na-monat:active { background: #eef4fa; border-color: #2b6cb0; }
  .na-monat .m { display: block; color: #8a97a3; font-size: 10px; font-weight: 700;
    letter-spacing: .5px; line-height: 1.2; }
  .na-monat .n { display: block; color: #14273D; font-size: 17px; font-weight: 700; line-height: 1.3; }
  .na-monat .b { display: block; height: 3px; border-radius: 2px; background: #e6edf4;
    margin-top: 4px; overflow: hidden; }
  .na-monat .b i { display: block; height: 100%; background: #5eb5e0; border-radius: 2px; }

  .na-reiter {
    /* absolute statt fixed: haengt damit an der gemessenen Hoehe der
       Huelle, nicht am Viewport, den iOS beim ersten Laden falsch meldet. */
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    display: flex;
    background: rgba(20, 39, 61, .9);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(202, 223, 241, .22);
    border-radius: 22px;
    padding: 10px 6px var(--na-polster);
    box-shadow: 0 8px 26px -6px rgba(20, 39, 61, .38);
    z-index: 25;
  }
  .na-reiter-knopf {
    position: relative; flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 2px 3px; border: 0; border-radius: 5px; background: none;
    font-family: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
    color: #cadff1; text-decoration: none; cursor: pointer;
    transition: color .12s, background .12s, transform .08s;
  }
  .na-reiter-knopf svg { width: 21px; height: 21px; flex: none; }
  .na-reiter-knopf span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Inaktiv gedaempft; der Zaehler (i-Element) bleibt aussen vor. */
  .na-reiter-knopf svg,
  .na-reiter-knopf > span { opacity: .42; transition: opacity .12s; }
  .na-reiter-knopf:active { transform: scale(.92); }
    /* Aktiver Reiter: Akzentfarbe statt Flaeche. Ein Hintergrund waere auf der
     halbtransparenten Insel kaum zu sehen. Das SVG zeichnet mit currentColor
     und faerbt sich dadurch mit; der kraeftigere Strich macht den Unterschied
     auch ohne Farbwahrnehmung erkennbar. */
  /* Zustand ueber die Deckkraft von Symbol und Beschriftung, NICHT
     ueber den Knopf: opacity am Elternteil dimmt auch den roten
     Zaehler mit, und ein Kind kann das nicht zuruecknehmen. */
  .na-reiter-knopf.na-aktiv { color: #7cc9f0; }
  .na-reiter-knopf.na-aktiv svg,
  .na-reiter-knopf.na-aktiv > span { opacity: 1; }
  .na-reiter-knopf.na-aktiv svg { stroke-width: 2.2; }
  /* Die noch nicht gebauten Bereiche einheitlich gedaempft. Hover und Druck
     sind ausdruecklich mit abgeschaltet: sonst hellt der Knopf unter der Maus
     auf und die vier wirken unterschiedlich hell (am Rechner im
     Geraete-Modus sichtbar). Hoehere Spezifitaet als die Hover-Regel, damit
     die Reihenfolge im Stylesheet keine Rolle spielt. */
  .na-reiter-knopf[disabled],
  .na-reiter-knopf[disabled]:hover,
  .na-reiter-knopf[disabled]:active {
    /* ⚠️ KEIN opacity am Knopf: die Grundregel daempft bereits svg und
       span, beides wuerde sich multiplizieren (.5 x .42 = .21) und die
       gesperrten Reiter waeren fast unsichtbar. */
    transform: none;
    background: none;
    cursor: default;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
  }
  /* Gesperrt: deutlich blasser als ein inaktiver Reiter (.42). */
  .na-reiter-knopf[disabled] svg,
  .na-reiter-knopf[disabled] > span { opacity: .28; }
  /* 29 px sichtbar -> 45 px Tippflaeche. */
  .na-reiter-knopf::after { content: ''; position: absolute; top: -8px; bottom: -8px; left: 0; right: 0; }
  /* Leer = keine Zahl bekannt oder null -> der Punkt verschwindet ganz. */
  .na-reiter-punkt:empty { display: none; }
  .na-reiter-punkt {
    position: absolute; top: 2px; left: 50%; margin-left: 5px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: #c53030; color: #fff;
    font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
  }

  /* -------------------------------------------------------------------------
     6 · Blatt von unten (Auftrag ansehen)
     Bewusst ueber einen Uebergang statt einer Animation: display waere sofort
     weg und man saehe das Hinuntergleiten nicht. visibility bekommt beim
     Schliessen die volle Verzoegerung.
     ------------------------------------------------------------------------- */
  html.na-touch .na-blatt {
    /* Hoehe aus der Messung: die Box sitzt unten (align-items: flex-end),
       bei zu gross gemeldetem Viewport laege ihr Fuss ausserhalb. */
    display: flex; position: fixed; inset: 0; z-index: 45;
    height: var(--app-h, 100dvh);
    align-items: flex-end;
    background: rgba(20,39,61,.62);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .26s;
  }
  /* ⚠️ Praefix ist PFLICHT: die Grundregel oben traegt html.na-touch und
     waere sonst spezifischer -- dann bliebe das Blatt trotz .na-an unsichtbar.
     Genau dieser Fehler hat am 03.09. alle Blaetter lahmgelegt. */
  html.na-touch .na-blatt.na-an {
    visibility: visible; opacity: 1; pointer-events: auto;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    transition: opacity .2s ease, visibility 0s linear 0s;
  }
  /* Gilt fuer JEDE Box, damit kein Blatt vergessen wird. */
  .na-blatt > * { transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1); }
  html.na-touch .na-blatt.na-an > * { transform: translateY(0); }
  .na-blatt-box {
    width: 100%; max-height: 88%;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 5px 5px 0 0;
  }
  .na-blatt-kopf {
    flex: none; display: flex; align-items: center; gap: 9px;
    padding: 14px 16px 12px; border-bottom: 1px solid #edf1f5;
  }
  .na-blatt-kopf > div { flex: 1; min-width: 0; }
  .na-blatt-titel {
    font-size: 15px; font-weight: 700; color: #14273D; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .na-blatt-sub { font-size: 11px; color: #8a939b; margin-top: 3px; letter-spacing: .3px; }
  .na-blatt-zu {
    position: relative; flex: none; width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 5px; background: #edf1f5; color: #5a6570;
    font-family: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  }
  .na-blatt-zu::after { content: ''; position: absolute; inset: -5px; }
  .na-blatt-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: none; padding: 4px 16px 0; }
  .na-zeile { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef2f6; }
  .na-zeile dt { flex: none; width: 38%; margin: 0; font-size: 11.5px; font-weight: 500; color: #8a939b; letter-spacing: .3px; }
  .na-zeile dd { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; font-weight: 700; color: #14273D; }
  .na-blatt-hinweis { font-size: 11px; color: #8a939b; padding: 12px 0 4px; line-height: 1.5; }
  .na-blatt-fuss {
    flex: none; display: flex; gap: 9px;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 14px);
    border-top: 1px solid #edf1f5;
  }
  .na-blatt-ruf {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; border-radius: 5px; background: #1e9e63; color: #fff;
    text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .5px;
  }
  .na-blatt-ruf svg { width: 16px; height: 16px; }
  .na-blatt-ruf.na-unklar { background: #eef1f4; color: #8a939b; pointer-events: none; }

  /* -------------------------------------------------------------------------
     7 · Anmeldung im nativen Design
     Eingabefelder mindestens 16 px, sonst zoomt Safari beim Fokussieren.
     ------------------------------------------------------------------------- */
  html.na-touch .na-anmeldung {
    display: flex; position: fixed; inset: 0; z-index: 50;
    height: var(--app-h, 100dvh);
    flex-direction: column; align-items: center; justify-content: center;
    padding: calc(env(safe-area-inset-top) + 20px) 26px calc(env(safe-area-inset-bottom) + 40px);
    background: linear-gradient(180deg, #14273D 0%, #1d3a5f 100%);
    color: #fff;
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  /* Das App-Symbol bringt Grund und Rundung selbst mit -- keine Flaeche
     darunter, sonst raender es weiss ein. */
  .na-an-logo { margin-bottom: 30px; line-height: 0; }
  .na-an-logo img {
    width: 116px; height: 116px; display: block;
    border-radius: 26px;                      /* deckt die eigene Rundung sauber ab */
    box-shadow: 0 8px 22px rgba(0,0,0,.34);
  }
  /* Zwei gestapelte Felder ohne Beschriftung: der Abstand kommt vom Feld selbst. */
  .na-an-feld + .na-an-feld { margin-top: 14px; }
  /* Beide Eingabefelder gleich. ⚠️ 16px ist Pflicht: darunter zoomt iOS beim
     Antippen in das Feld hinein. */
  .na-an-feld {
    width: 100%; height: 50px; padding: 0 14px;
    border: 1.5px solid rgba(202,223,241,.3); border-radius: 5px;
    background: rgba(255,255,255,.08); color: #fff;
    font-family: 'Courier Prime', monospace; font-size: 16px; outline: none;
    -webkit-user-select: text; user-select: text;
  }
  .na-an-feld:focus { border-color: #cadff1; background: rgba(255,255,255,.14); }
  .na-an-feld::placeholder { color: #7f96b0; letter-spacing: 0; }
  /* Nur das Passwort sperrt die Zeichen weiter auseinander. */
  .na-an-pass { letter-spacing: 2px; }
  .na-an-los {
    width: 100%; height: 50px; margin-top: 14px;
    border: 0; border-radius: 5px; background: #2b6cb0; color: #fff;
    font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: 1px;
    cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: transform .08s, background .12s;
  }
  .na-an-los:active { transform: scale(.97); background: #245a94; }
  .na-an-hinweis { font-size: 11.5px; color: #7f96b0; margin-top: 16px; text-align: center; line-height: 1.5; min-height: 18px; }
  .na-an-hinweis.na-fehler { color: #ff8a80; font-weight: 700; }

  /* -------------------------------------------------------------------------
     8 · Zustaende
     Ueberfahren nur mit echtem Zeiger, sonst bleibt der Zustand nach dem
     Tipp haengen. Tastatur-Fokus bleibt sichtbar, nie der Browser-Standard.
     ------------------------------------------------------------------------- */
  @media (hover: hover) {
    /* Die ganze Karte faerbt sich, nicht nur der Kopf. */
    .na-karte:hover { background: #e3f1fd; }
    .na-karte-kopf:hover { background: #e3f1fd; }   /* Rueckfall, falls :has() fehlt */
    .na-reiter-knopf:hover { opacity: 1; }
    .na-an-los:hover { background: #245a94; }
  }
  .na-app :focus-visible,
  .na-blatt :focus-visible,
  .na-anmeldung :focus-visible { outline: 2px solid #2b6cb0; outline-offset: 2px; }

  /* Uebergaenge werden verkuerzt, NICHT entfernt: das Blatt arbeitet ueber
     den Uebergang und wuerde sonst nie sichtbar. */
  @media (prefers-reduced-motion: reduce) {
    .na-blatt, .na-blatt > *, .na-karte-kopf,
    .na-reiter-knopf, .na-an-los, .na-kopf-btn {
      transition-duration: .01ms !important;
    }
  }
}