/* ============================================================================
   VDM - Mobilmuster (Handy unter 768 px)
   Konzept: docs/ui/mobil-konzept.md
   Alles hier wirkt NUR unter 768 px; ab 768 px bleibt die Oberflaeche unveraendert.
   ========================================================================== */

/* Filter-Knopf: nur auf dem Handy sichtbar */
.vdm-fk-knopf {
    display: none;
}

@media (max-width: 767.98px) {
    .vdm-fk-knopf {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2.6rem;
        height: 2.6rem;
        padding: 0;
        border: 1px solid var(--vdm-border-card, #d9dde2);
        border-radius: 0.6rem;
        background: var(--vdm-surface-card, #fff);
        color: var(--vdm-text-strong, #1b2430);
        cursor: pointer;
    }

    .vdm-fk-knopf.is-offen {
        border-color: var(--vdm-blau, #2563eb);
        color: var(--vdm-blau, #2563eb);
        background: color-mix(in srgb, var(--vdm-blau, #2563eb) 10%, var(--vdm-surface-card, #fff));
    }

    .vdm-fk-badge {
        position: absolute;
        top: -0.3rem;
        right: -0.3rem;
        min-width: 1.15rem;
        height: 1.15rem;
        padding: 0 0.25rem;
        border-radius: 999px;
        background: var(--vdm-blau, #2563eb);
        color: var(--vdm-auf-akzent, #fff);
        font-size: 0.72rem;
        line-height: 1.15rem;
        text-align: center;
    }

    /* Eingeklappt: markierte Teile ausblenden */
    .vdm-fk:not(.is-offen) .vdm-fk-aus {
        display: none !important;
    }
}

/* ----------------------------------------------------------------------------
   Werkzeugleiste "entity-toolbar" (Einrichtungen, Fuhrpark, Geraete, Koeche, ...)
   Eingeklappt: [Neu] [Suche ........] [Filter]; aufgeklappt: Rest darunter.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .vdm-fk .entity-toolbar-card {
        padding: 0.45rem !important;
    }

    .vdm-fk .entity-toolbar-shell {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.45rem !important;
    }

    .vdm-fk:not(.is-offen) .entity-toolbar-left {
        display: none !important;
    }

    .vdm-fk .entity-toolbar-left {
        order: 2;
    }

    .vdm-fk .entity-toolbar-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .vdm-fk .entity-grid-search {
        flex: 1 1 8rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* ----------------------------------------------------------------------------
   Ergebnis-/Sortierzeile ueber Kartenlisten ("...-mobile-listbar"): eine schlanke Zeile.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    [class*="-mobile-listbar"] {
        gap: 0.4rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 0.85rem !important;
        flex: 0 0 auto !important;
        min-height: 2.3rem !important;
        align-items: center !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }

    [class*="-mobile-listbar"] > [class*="-mobile-sort"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.4rem !important;
        margin: 0 !important;
    }

    [class*="-mobile-listbar"] label > span {
        display: none !important;
    }

    [class*="-mobile-sort-direction"] {
        width: 2.1rem !important;
        height: 2.1rem !important;
    }

    [class*="-mobile-listbar"] select {
        height: 2.1rem !important;
        max-width: 9.5rem;
    }
}

/* ----------------------------------------------------------------------------
   Hilfsklassen
   vdm-mob-icon : Knopf zeigt auf dem Handy nur sein Symbol (Text ausgeblendet)
   vdm-mob-aus  : Element erscheint auf dem Handy gar nicht
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .vdm-mob-aus {
        display: none !important;
    }

    .vdm-mob-icon .dxbl-btn-text,
    button.vdm-mob-icon {
        font-size: 0 !important;
    }

    button.vdm-mob-icon svg,
    button.vdm-mob-icon .dxbl-image {
        font-size: initial;
        margin: 0 !important;
    }

    /* Kopfzeile der Boards: Titel links, Neu-Symbol rechts, Rest hinter dem Filter-Knopf */
    .boards-fk .boards-kopf {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 0.4rem !important;
    }

    .boards-fk .boards-kopf-aktionen {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
    }

    .boards-fk .boards-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .boards-fk .boards-suche {
        flex: 1 1 8rem !important;
        min-width: 0 !important;
    }
}

/* ----------------------------------------------------------------------------
   Detailansicht auf Handy und Tablet (unter 1200 px): Titelzeile, Bereichs-Chips, Aktionsblatt.
   Farben nur ueber Theme-Variablen (docs/Konventionen/themes-und-schemata.md).
   -------------------------------------------------------------------------- */
.vdm-mt, .vdm-mr {
    display: none;
}

@media (max-width: 1199.98px) {
    .vdm-mt {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        min-height: 3.2rem;
        padding: 0 0.35rem;
        background: var(--vdm-surface-card, #fff);
        border-bottom: 1px solid var(--vdm-border-card, #d9dde2);
        color: var(--vdm-text-strong, #17202b);
    }

    .vdm-mt-btn {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 0;
        border-radius: 0.6rem;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .vdm-mt-btn:active {
        background: color-mix(in srgb, var(--vdm-blau, #2563eb) 12%, transparent);
    }

    .vdm-mt-titel {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .vdm-mt-schleier {
        position: fixed;
        inset: 0;
        z-index: 1300;
        background: rgba(8, 16, 28, 0.45);
    }

    .vdm-mt-blatt {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1301;
        padding: 0.5rem 0.75rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
        border-radius: 1.1rem 1.1rem 0 0;
        background: var(--vdm-surface-card, #fff);
        color: var(--vdm-text-strong, #17202b);
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.25);
    }

    .vdm-mt-griff {
        width: 2.5rem;
        height: 0.25rem;
        margin: 0.2rem auto 0.6rem;
        border-radius: 2px;
        background: var(--vdm-border-card, #c4cad2);
    }

    .vdm-mt-eintrag {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        width: 100%;
        min-height: 3.2rem;
        padding: 0 0.5rem;
        border: 0;
        border-bottom: 1px solid var(--vdm-border-card, #e6e9ed);
        background: transparent;
        color: inherit;
        font-size: 1.02rem;
        text-align: left;
        cursor: pointer;
    }

    .vdm-mt-eintrag:last-child {
        border-bottom: 0;
    }

    .vdm-mt-eintrag:disabled {
        opacity: 0.45;
    }

    .vdm-mt-eintrag.is-gefahr {
        color: var(--vdm-danger-text, #b42318);
    }

    .vdm-mt-sym {
        display: inline-grid;
        place-items: center;
        width: 1.4rem;
    }

    /* Bereichs-Chips: waagerecht wischbar, bleiben unter der Titelzeile stehen */
    .vdm-mr {
        flex: 0 0 auto;
        min-height: 3.4rem;
        position: sticky;
        top: 3.2rem;
        z-index: 29;
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        padding: 0.55rem 0.7rem 0.45rem;
        background: var(--vdm-surface-app, #f3f4f6);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .vdm-mr::-webkit-scrollbar {
        display: none;
    }

    .vdm-mr-chip {
        flex: 0 0 auto;
        min-height: 2.5rem;
        padding: 0 0.95rem;
        border: 1px solid var(--vdm-border-card, #d9dde2);
        border-radius: 999px;
        background: var(--vdm-surface-card, #fff);
        color: var(--vdm-text-strong, #17202b);
        font-size: 0.9rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .vdm-mr-chip.is-an {
        border-color: var(--vdm-blau, #2563eb);
        background: var(--vdm-blau, #2563eb);
        color: var(--vdm-auf-akzent, #fff);
    }

    .vdm-mr-inhalt {
        min-width: 0;
        touch-action: pan-y;
    }
}

/* Einrichtungsdetails (Handy/Tablet): Desktop-Kopfzeile aus, nur der aktive Bereich sichtbar */
@media (max-width: 1199.98px) {
    .details-page.is-mobil > .details-header {
        display: none !important;
    }

    .details-page.is-mobil .mobil-aus {
        display: none !important;
    }

    .details-page.is-mobil .mobil-ue .details-pane-right {
        display: none !important;
    }

    .details-page.is-mobil .mobil-tab .details-pane-left {
        display: none !important;
    }

    /* eigene Reiterleiste der DevExpress-Seiten ausblenden: die Bereichs-Chips steuern den Wechsel */
    .details-page.is-mobil .details-tabs-layout dxbl-tab-list {
        display: none !important;
    }
}


/* Einrichtungsliste: Detail-Drawer als Vollbild-Blatt (Handy und Tablet) */
@media (max-width: 1199.98px) {
    .entity-detail.is-mobil .entity-detail-header-actions,
    .entity-detail.is-mobil .entity-detail-tabs,
    .entity-detail.is-mobil .entity-detail-eyebrow,
    .entity-detail.is-mobil .entity-detail-title {
        display: none !important;
    }

    .entity-detail.mobil-ue .entity-detail-tabs-section {
        display: none !important;
    }

    .entity-detail.mobil-tab .entity-master-section {
        display: none !important;
    }

    .entity-detail.is-mobil .entity-detail-header {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        min-height: 0 !important;
    }
}

/* ----------------------------------------------------------------------------
   Rezepte: Werkzeugzeile (Handy) und Drawer als Vollbild-Blatt (Handy und Tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .rezepte-fk .rezepte-toolbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.45rem !important;
    }

    .rezepte-fk .rezepte-actions {
        order: 1;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .rezepte-fk .rezepte-filter-row {
        order: 2;
    }

    .rezepte-fk .rezepte-search-row {
        flex: 1 1 12rem !important;
        min-width: 0 !important;
    }

    .rezepte-fk .rezepte-search {
        width: 100% !important;
    }

    .rezepte-fk .rezepte-primary-action.is-create {
        width: 2.6rem !important;
        min-width: 2.6rem !important;
        height: 2.6rem !important;
        padding: 0 !important;
        justify-content: center;
    }
}

@media (max-width: 1199.98px) {
    .rezepte-drawer-content.is-mobil .rezepte-mini-actions {
        display: none !important;
    }

    .rezepte-drawer-content.is-mobil.mobil-0 .rz-b1,
    .rezepte-drawer-content.is-mobil.mobil-0 .rz-b2,
    .rezepte-drawer-content.is-mobil.mobil-0 .rz-b3,
    .rezepte-drawer-content.is-mobil.mobil-1 .rz-b0,
    .rezepte-drawer-content.is-mobil.mobil-1 .rz-b2,
    .rezepte-drawer-content.is-mobil.mobil-1 .rz-b3,
    .rezepte-drawer-content.is-mobil.mobil-2 .rz-b0,
    .rezepte-drawer-content.is-mobil.mobil-2 .rz-b1,
    .rezepte-drawer-content.is-mobil.mobil-2 .rz-b3,
    .rezepte-drawer-content.is-mobil.mobil-3 .rz-b0,
    .rezepte-drawer-content.is-mobil.mobil-3 .rz-b1,
    .rezepte-drawer-content.is-mobil.mobil-3 .rz-b2 {
        display: none !important;
    }
}

/* Rezepte: Filter-Knopf rechts neben der Suche; Hero im Blatt straffen */
@media (max-width: 767.98px) {
    .rezepte-fk .rezepte-primary-action.is-create {
        order: 1;
    }

    .rezepte-fk .rezepte-search-row {
        order: 2;
    }

    .rezepte-fk .vdm-fk-knopf {
        order: 3;
    }
}

@media (max-width: 1199.98px) {
    .rezepte-drawer-content.is-mobil .rezepte-drawer-subtitle {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .rezepte-fk .rezepte-actions > .vdm-fk-aus {
        order: 4;
    }
}

/* Rezept-Detailseite (Handy und Tablet): eigene Kopfzeile/Reiter aus, nur der aktive Bereich */
@media (max-width: 1199.98px) {
    .rezepte-detail-page.is-mobil .rezepte-detail-toolbar,
    .rezepte-detail-page.is-mobil .rezepte-tabs {
        display: none !important;
    }

    .rezepte-detail-page.is-mobil.mobil-0 .rezepte-tab-panel {
        display: none !important;
    }

    .rezepte-detail-page.is-mobil:not(.mobil-0) .rezepte-master-panel {
        display: none !important;
    }
}

/* ----------------------------------------------------------------------------
   Maskierte Symbole (alle Breiten): <img>-Symbole erben die Textfarbe nicht und zeichneten auf gruenen
   Hauptknoepfen schwarz. Ein maskiertes Symbol uebernimmt die Textfarbe des Knopfs (jedes Schema).
   -------------------------------------------------------------------------- */
.vdm-sym {
    display: inline-block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: var(--vdm-sym) center / contain no-repeat;
    mask: var(--vdm-sym) center / contain no-repeat;
}

.vdm-sym-add {
    --vdm-sym: url("/images/artikelstamm/add.svg");
}

.vdm-sym-edit {
    --vdm-sym: url("/images/artikel-detail/edit.svg");
}

/* ----------------------------------------------------------------------------
   Artikelstamm: Werkzeugzeile (Handy), Drawer und Detailseite als Vollbild-Blatt (Handy und Tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .artikel-fk .artikel-toolbar-card {
        padding: 0.45rem !important;
    }

    .artikel-fk .artikel-toolbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.45rem !important;
    }

    .artikel-fk .artikel-toolbar-actions {
        order: 1;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .artikel-fk .artikel-toolbar-left {
        order: 2;
    }

    .artikel-fk .artikel-primary-action {
        order: 1;
        width: 2.6rem !important;
        min-width: 2.6rem !important;
        height: 2.6rem !important;
        padding: 0 !important;
        justify-content: center;
    }

    .artikel-fk .artikel-grid-search {
        order: 2;
        flex: 1 1 8rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .artikel-fk .vdm-fk-knopf {
        order: 3;
    }

    .artikel-fk .artikel-toolbar-actions > .vdm-fk-aus {
        order: 4;
    }
}

@media (max-width: 1199.98px) {
    .artikel-detail.is-mobil .artikel-detail-actions,
    .artikel-detail.is-mobil .artikel-drawer-tabs,
    .artikel-detail.is-mobil .artikel-detail-title {
        display: none !important;
    }

    /* Detailseite */
    .artikel-detail-shell.is-mobil {
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        border: 0 !important;
        padding: 0.5rem !important;
        min-height: 0 !important;
    }

    .artikel-detail-shell.is-mobil .artikel-breadcrumb,
    .artikel-detail-shell.is-mobil .artikel-hero-actions,
    .artikel-detail-shell.is-mobil .artikel-image-placeholder,
    .artikel-detail-shell.is-mobil .artikel-title-line h1 {
        display: none !important;
    }

    .artikel-detail-shell.is-mobil .artikel-details-kommentare-host {
        order: 10;
    }

    .artikel-detail-shell.is-mobil.mobil-stamm .ad-dekl,
    .artikel-detail-shell.is-mobil.mobil-stamm .ad-tab,
    .artikel-detail-shell.is-mobil.mobil-stamm .ad-komm,
    .artikel-detail-shell.is-mobil.mobil-dekl .ad-stamm,
    .artikel-detail-shell.is-mobil.mobil-dekl .ad-tab,
    .artikel-detail-shell.is-mobil.mobil-dekl .ad-komm,
    .artikel-detail-shell.is-mobil.mobil-tab .ad-stamm,
    .artikel-detail-shell.is-mobil.mobil-tab .ad-dekl,
    .artikel-detail-shell.is-mobil.mobil-tab .ad-komm,
    .artikel-detail-shell.is-mobil.mobil-komm .ad-stamm,
    .artikel-detail-shell.is-mobil.mobil-komm .ad-dekl,
    .artikel-detail-shell.is-mobil.mobil-komm .ad-tab,
    .artikel-detail-shell.is-mobil.mobil-komm .vdm-mr-inhalt {
        display: none !important;
    }

    .artikel-detail-shell.is-mobil .artikel-tabs {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    .artikel-detail.is-mobil .artikel-hero-facts,
    .artikel-detail.is-mobil .artikel-detail-subtitle-current,
    .artikel-detail.is-mobil .artikel-detail-subtitle {
        display: none !important;
    }
}

/* Artikel-Detailseite: Meta-Zeile und Kennzeichen einzeilig, waagerecht wischbar */
@media (max-width: 1199.98px) {
    .artikel-detail-shell.is-mobil .artikel-meta-line,
    .artikel-detail-shell.is-mobil .artikel-flag-strip {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        font-size: 0.82rem;
    }

    .artikel-detail-shell.is-mobil .artikel-meta-line::-webkit-scrollbar,
    .artikel-detail-shell.is-mobil .artikel-flag-strip::-webkit-scrollbar {
        display: none;
    }

    .artikel-detail-shell.is-mobil .artikel-meta-line > *,
    .artikel-detail-shell.is-mobil .artikel-flag-strip > * {
        flex: 0 0 auto;
    }
}

/* ---------- Administration: Benutzer-Detail als Blatt (Handy + Tablet) ---------- */
@media (max-width: 1199.98px) {
    .entity-detail.ub-mobil.is-mobil .entity-detail-hero,
    .entity-detail.ub-mobil.is-mobil .ub-aktionen,
    .entity-detail.ub-mobil.is-mobil details.entity-detail-section > summary {
        display: none !important;
    }

    .entity-detail.ub-mobil.is-mobil.mobil-0 .ub1, .entity-detail.ub-mobil.is-mobil.mobil-0 .ub2, .entity-detail.ub-mobil.is-mobil.mobil-0 .ub3, .entity-detail.ub-mobil.is-mobil.mobil-0 .ub4, .entity-detail.ub-mobil.is-mobil.mobil-0 .ub5,
    .entity-detail.ub-mobil.is-mobil.mobil-1 .ub0, .entity-detail.ub-mobil.is-mobil.mobil-1 .ub2, .entity-detail.ub-mobil.is-mobil.mobil-1 .ub3, .entity-detail.ub-mobil.is-mobil.mobil-1 .ub4, .entity-detail.ub-mobil.is-mobil.mobil-1 .ub5,
    .entity-detail.ub-mobil.is-mobil.mobil-2 .ub0, .entity-detail.ub-mobil.is-mobil.mobil-2 .ub1, .entity-detail.ub-mobil.is-mobil.mobil-2 .ub3, .entity-detail.ub-mobil.is-mobil.mobil-2 .ub4, .entity-detail.ub-mobil.is-mobil.mobil-2 .ub5,
    .entity-detail.ub-mobil.is-mobil.mobil-3 .ub0, .entity-detail.ub-mobil.is-mobil.mobil-3 .ub1, .entity-detail.ub-mobil.is-mobil.mobil-3 .ub2, .entity-detail.ub-mobil.is-mobil.mobil-3 .ub4, .entity-detail.ub-mobil.is-mobil.mobil-3 .ub5,
    .entity-detail.ub-mobil.is-mobil.mobil-4 .ub0, .entity-detail.ub-mobil.is-mobil.mobil-4 .ub1, .entity-detail.ub-mobil.is-mobil.mobil-4 .ub2, .entity-detail.ub-mobil.is-mobil.mobil-4 .ub3, .entity-detail.ub-mobil.is-mobil.mobil-4 .ub5,
    .entity-detail.ub-mobil.is-mobil.mobil-5 .ub0, .entity-detail.ub-mobil.is-mobil.mobil-5 .ub1, .entity-detail.ub-mobil.is-mobil.mobil-5 .ub2, .entity-detail.ub-mobil.is-mobil.mobil-5 .ub3, .entity-detail.ub-mobil.is-mobil.mobil-5 .ub4 {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    .entity-detail.ub-mobil.is-mobil .entity-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
    }

    .entity-detail.ub-mobil.is-mobil .detail-fact {
        padding: 0.4rem 0.55rem !important;
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Titelzeile des Blatts: sicher antippbar (Touch), auch unter Statusleiste/Notch */
@media (max-width: 1199.98px) {
    .vdm-mt {
        padding-top: env(safe-area-inset-top, 0px);
        position: sticky;
        isolation: isolate;
    }

    .vdm-mt-btn,
    .vdm-mt-eintrag,
    .vdm-mr-chip {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
}

/* ---------- Produktion: Kühllager-Temperaturen und Abkühlung (Handy) ---------- */
@media (max-width: 767.98px) {
    .kl-head p, .ak-head p,
    .kl-eyebrow, .ak-eyebrow,
    .ak-sequence-info {
        display: none !important;
    }

    .kl-head h1, .ak-head h1 {
        font-size: 1.15rem !important;
        margin: 0 !important;
    }

    .kl-filter, .ak-filter {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem !important;
        align-items: end;
    }

    .kl-filter label, .ak-filter label {
        min-width: 0;
    }

    .kl-filter .dxbl-combobox, .ak-filter .dxbl-combobox,
    .kl-filter .dxbl-date-edit, .ak-filter .dxbl-date-edit,
    .kl-filter dxbl-combo-box, .ak-filter dxbl-combo-box,
    .kl-filter dxbl-date-edit, .ak-filter dxbl-date-edit {
        width: 100% !important;
        min-width: 0;
    }
}

/* ---------- Hilfe-/Chat-Drawer (.vhd): auf dem Handy Vollbild ---------- */
@media (max-width: 560px) {
    .vhd,
    .vhd.big {
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    .vhd-head {
        padding: 0.55rem 0.8rem !important;
        padding-top: calc(0.55rem + env(safe-area-inset-top, 0px)) !important;
    }

    .vhd-sub {
        display: none !important;
    }

    .vhd-tools .vhd-ic:first-child {
        display: none !important;
    }

    .vhd-ic {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* Der eingebettete Chat (im Hilfe-Drawer) darf nie "eingefahren" werden: sonst sitzt er um 53 px nach rechts verschoben. */
.chat-fab-host.is-embedded,
.chat-fab-host.is-embedded.is-eingefahren {
    transform: none !important;
}

/* Artikelstamm (Handy/Tablet): Blätterleiste fest am unteren Rand der Liste, keine Karten darunter sichtbar */
@media (max-width: 1360px) {
    .artikel-mobile-card-list {
        padding-bottom: 0 !important;
    }

    .artikel-mobile-card-list .artikel-server-pager {
        position: sticky !important;
        bottom: 0 !important;
        margin: 0.35rem -1rem 0 !important;
        border-radius: 0 !important;
        border-width: 1px 0 0 !important;
        box-shadow: 0 -0.35rem 0.9rem rgba(15, 23, 42, 0.08) !important;
        padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px)) !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
    }
}

/* Artikel-Drawer (Handy/Tablet): das Blatt selbst scrollt (Titelzeile bleibt oben, Chips darunter) */
@media (max-width: 1199.98px) {
    .artikel-detail.is-mobil {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ---------- Boards: Board-Ansicht (BoardDetail) auf Handy und Tablet ---------- */
@media (max-width: 1199.98px) {
    /* Die Kopfzeile mit Aktionen ersetzt die MobilTitelzeile (Zurueck, Titel, +, "..."). */
    .board-detail-page .bd-head {
        display: none !important;
    }

    .board-detail-page .bd-kopfbereich {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Ansichtswechsel Tabelle/Board/Kalender/Zeitleiste: eine Zeile, seitlich wischbar */
    .board-detail-page .bd-ansicht-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.6rem !important;
        padding-top: 0.2rem;
        -webkit-overflow-scrolling: touch;
    }

    .board-detail-page .bd-tab-gruppe {
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
    }

    .board-detail-page .bd-tab {
        min-height: 2.5rem;
        padding-inline: 0.75rem;
        white-space: nowrap;
    }

    .board-detail-page .bd-gruppieren {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    /* Suche und Filter-Knopf in einer Zeile; alles Weitere erst nach Antippen */
    .board-detail-page .bd-fk .bd-filterleiste:first-child {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem !important;
    }

    .board-detail-page .bd-fk .bd-suche {
        flex: 1 1 10rem !important;
        min-width: 0;
        max-width: none !important;
        width: auto !important;
    }

    .board-detail-page .bd-fk .bd-suche input {
        min-height: 2.4rem;
    }

    .board-detail-page .bd-fk .bd-filterleiste--etiketten:empty {
        display: none !important;
    }

    /* Spalten nacheinander wischen (Snap), je Spalte fast die ganze Breite */
    .board-detail-page .bd-board {
        scroll-snap-type: x mandatory;
        margin-left: -0.9rem !important;
        margin-right: -0.9rem !important;
        padding: 0 0.9rem 1.5rem !important;
        gap: 0.7rem !important;
        scroll-padding-inline: 0.9rem;
        -webkit-overflow-scrolling: touch;
    }

    .board-detail-page .bd-column {
        flex: 0 0 calc(100vw - 3.2rem) !important;
        min-width: 0 !important;
        max-width: none !important;
        scroll-snap-align: start;
    }

    /* Spalte loeschen ist ein Desktop-Werkzeug (Einstellungen) und gehoert nicht in die Daumenzone */
    .board-detail-page .bd-column-head .bd-icon-btn {
        display: none !important;
    }
}

/* Boards: kleine Symbolknoepfe bekommen eine groessere Tippflaeche (ohne die Optik zu aendern) */
@media (max-width: 767.98px) {
    .bd-erledigt-kreis,
    .bd-icon-btn,
    .boards-fav-star {
        position: relative;
    }

    .bd-erledigt-kreis::after,
    .bd-icon-btn::after,
    .boards-fav-star::after {
        content: "";
        position: absolute;
        inset: -0.6rem;
    }

    .bd-filter-chip,
    .bd-label-chip {
        min-height: 2rem;
    }
}

@media (max-width: 767.98px) {
    .board-detail-page .bd-filterleiste {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Boards: Tabellenansicht auf dem Handy als Kartenzeilen statt 860 px breiter Tabelle */
@media (max-width: 767.98px) {
    .board-detail-page .bd-tabelle {
        overflow-x: visible !important;
    }

    .board-detail-page .bd-tabelle-zeile,
    .board-detail-page .bd-tabelle-gruppe,
    .board-detail-page .bd-tabelle-leer {
        min-width: 0 !important;
    }

    .board-detail-page .bd-tabelle-kopfzeile {
        display: none !important;
    }

    .board-detail-page .bd-tabelle-zeile:not(.bd-tabelle-add) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 0.35rem 0.6rem !important;
        padding: 0.65rem 0.7rem !important;
    }

    /* 1 Aufgabe | 2 Liste | 3 Labels | 4 Person | 5 Prioritaet | 6 Frist | 7 Fortschritt */
    .board-detail-page .bd-tabelle-zeile:not(.bd-tabelle-add) > :nth-child(1) {
        grid-column: 1 / -1;
        font-size: 0.95rem;
    }

    .board-detail-page .bd-tabelle-zeile:not(.bd-tabelle-add) > :nth-child(3) {
        grid-column: 1 / -1;
    }

    .board-detail-page .bd-tabelle-zeile .bd-zelle-select {
        min-height: 2.2rem;
        width: 100%;
        border-color: var(--vdm-border-card, #d9dde2) !important;
        background: var(--vdm-surface-card, #fff) !important;
    }

    .board-detail-page .bd-tabelle-zeile:not(.bd-tabelle-add) > :nth-child(7)::before {
        content: "\2611\00a0";
    }
}

/* Boards-Unterseiten (Archiv, Vorlagen, Bausteine, Auslastung, Felder, Formulare): Tippflaechen auf dem Handy */
@media (max-width: 767.98px) {
    .bd-back,
    .bv-back,
    .ausl-mehr {
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
    }

    .boards-field-check,
    .bv-check,
    .bf-check {
        min-height: 2.2rem;
    }

    .board-detail-page input[type="checkbox"],
    .entity-page input[type="checkbox"] {
        width: 1.15rem;
        height: 1.15rem;
    }
}

/* ---------- Kueche: Kaltverpflegung (Handy) ---------- */
@media (max-width: 767.98px) {
    /* Das Raster der Seite bekam seine Breite vom breitesten Inhalt (Reiter, Tabellen): 553 px statt 375 px */
    .kv-page {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 0.75rem 0 !important;
    }

    .kv-page > * {
        min-width: 0;
    }

    .kv-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kv-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 2.75rem;
    }

    .kv-panel {
        margin-left: 0 !important;
        padding: 0.75rem !important;
        min-width: 0;
        overflow-x: auto;
    }
}

/* ---------- Kueche: Portionsreduzierung (Handy) ---------- */
@media (max-width: 767.98px) {
    /* Das Seitenraster hatte keine Spaltenbreite und wuchs auf 645 px (Karten mit Mindestbreiten) */
    .pr-page-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pr-page-shell > *,
    .pr-hero > *,
    .pr-summary-deck > * {
        min-width: 0;
    }

    .pr-summary-deck {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pr-hero h1 {
        font-size: 1.35rem !important;
    }

    .pr-hero p {
        display: none;
    }
}

@media (max-width: 767.98px) {
    /* Die Abfragezeile behielt die Spalten der Tablet-Regel (38 164 38 0 165 190 px): auf dem Handy drei Spalten */
    .pr-query,
    .pr-query.pr-week-query {
        grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem !important;
    }

    .pr-query > .pr-day-shortcuts,
    .pr-query > .pr-load,
    .pr-query > .pr-scope,
    .pr-query > .pr-query-feedback {
        grid-column: 1 / -1 !important;
        min-width: 0;
        width: auto;
    }

    .pr-day-shortcuts {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 767.98px) {
    /* Inhalt zuerst: der Hinweis "Entscheidungsworkflow" erklaert nur, er steuert nichts */
    .pr-hero-actions .pr-mode {
        display: none !important;
    }

    .pr-metrics {
        gap: 0.4rem !important;
    }
}

/* ---------- Kueche: Warenannahme-Quote (Handy) ---------- */
@media (max-width: 767.98px) {
    .waq-hero-text p {
        display: none !important;
    }

    .waq-filter {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem !important;
        align-items: end;
    }

    .waq-filter > label:nth-child(3),
    .waq-filter > button {
        grid-column: 1 / -1;
    }

    .waq-filter input,
    .waq-filter select {
        width: 100% !important;
        min-width: 0;
    }
}

/* ---------- Kueche: Vitalbuffet-Hub und Wochenplan (Handy) ---------- */
@media (max-width: 767.98px) {
    .vbhub-page {
        padding: 0.4rem 0.5rem !important;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .vbhub-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .vbhub-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding-inline: 0.8rem !important;
        min-height: 2.75rem;
    }

    .vbe-page {
        padding: 0.6rem 0.25rem 1rem !important;
        min-width: 0;
        max-width: 100%;
    }

    .vbhub-panel {
        margin: 0 !important;
    }

    .vbe-sub {
        display: none !important;
    }

    .vbe-head,
    .vbe-head > * {
        min-width: 0;
        max-width: 100%;
    }

    .vbe-week-nav {
        flex-wrap: wrap !important;
        max-width: 100%;
        row-gap: 0.35rem;
    }

    .vbe-field {
        min-width: 0;
        max-width: 100%;
    }

    .vbe-fields {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        min-width: 0;
    }
}

/* ---------- Vertrieb: Kalender (Handy) ---------- */
@media (max-width: 767.98px) {
    .vk-fk .vertrieb-live-card {
        padding: 0.4rem 0.5rem !important;
        gap: 0.4rem !important;
    }

    .vk-fk .vertrieb-live-actions {
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .vk-fk .vertrieb-view-mode-combo {
        flex: 1 1 100%;
        min-width: 0;
        width: 100% !important;
    }

    .vk-fk .vertrieb-live-actions .dxbl-btn.vdm-mob-icon {
        min-width: 2.6rem;
        height: 2.6rem;
    }
}

/* ---------- Vertrieb: Einstellungen und Mitarbeiter (Handy) ---------- */
@media (max-width: 767.98px) {
    .vertrieb-settings-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .vertrieb-settings-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 2.75rem;
        padding-inline: 0.9rem !important;
    }

    .vertrieb-map-style-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vertrieb-map-style-preview {
        width: auto !important;
    }

    .vertrieb-settings-panel {
        min-width: 0;
    }

    .vertrieb-settings-panel input[type="checkbox"] {
        width: 1.3rem;
        height: 1.3rem;
    }

    .vertrieb-settings-panel input[type="color"] {
        width: 2.6rem;
        height: 2.2rem;
    }

    .vertrieb-settings-panel .form-control-sm {
        min-height: 2.4rem;
    }
}

@media (max-width: 767.98px) {
    .entity-page > .entity-page-title {
        font-size: 1.4rem !important;
        margin: 0.2rem 0 0.4rem !important;
    }

    .vertrieb-settings-panel .vertrieb-color-cell > span:not(.vertrieb-color-dot) {
        display: none;
    }

    .vertrieb-settings-panel .dxbl-grid-filter-row {
        display: none !important;
    }

    .vertrieb-settings-note {
        font-size: 0.85rem !important;
        padding: 0.45rem 0.6rem !important;
    }
}

/* ---------- Vertrieb: Arbeitsbereich (Handy und Tablet) ---------- */
.ab-karten {
    display: none;
}

@media (max-width: 1199.98px) {
    .vertrieb-grid-host .vertrieb-main-grid {
        display: none !important;
    }

    .ab-karten {
        display: grid;
        gap: 0.55rem;
        align-content: start;
        grid-auto-rows: max-content;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0.1rem 0 1rem;
    }

    .ab-karte {
        display: grid;
        gap: 0.3rem;
        text-align: left;
        width: 100%;
        padding: 0.65rem 0.8rem;
        border: 1px solid var(--vdm-border-card, #d9dde2);
        border-radius: 0.7rem;
        background: var(--vdm-surface-card, #fff);
        color: var(--vdm-text-strong, #17202b);
        min-width: 0;
    }

    .ab-karte.is-selected {
        border-color: var(--vdm-blau, #2563eb);
    }

    .ab-karte-kopf {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .ab-karte-kopf > strong {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .ab-karte-titel {
        color: var(--vdm-text-muted, #5b6573);
        font-size: 0.9rem;
        overflow-wrap: anywhere;
    }

    .ab-karte-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.2rem 0.6rem;
        font-size: 0.82rem;
        color: var(--vdm-text-muted, #5b6573);
    }

    /* Detail als Blatt: Titelzeile ersetzt Kopf und Aktionsblock */
    .ab-detail.is-mobil .entity-detail-hero,
    .ab-detail.is-mobil .detail-action-grid,
    .ab-detail.is-mobil .detail-primary-cta,
    .ab-detail.is-mobil .entity-detail-section:has(.detail-action-grid) {
        display: none !important;
    }

    .ab-detail.is-mobil {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    /* Kennzahlen als eine wischbare Zeile statt sieben Kacheln untereinander */
    .vertrieb-kpi-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.2rem;
    }

    .vertrieb-kpi-card {
        flex: 0 0 auto !important;
        min-width: 6.2rem;
        padding: 0.45rem 0.7rem !important;
    }

    .vertrieb-filter-row > div:first-child {
        display: none;
    }

    .ab-fk .entity-page-header {
        margin-bottom: 0.4rem !important;
    }

    .ab-fk .entity-page-header-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.4rem;
    }
}

@media (max-width: 767.98px) {
    .ab-fk .entity-page-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.5rem 0.6rem !important;
    }

    .ab-fk .entity-page-header .entity-page-title {
        font-size: 1.15rem !important;
        margin: 0 !important;
    }
}

/* Arbeitsbereich: Detail-Drawer als Vollbild-Blatt unterhalb der Kopfleiste */
@media (max-width: 1199.98px) {
    .vertrieb-workspace .dxbl-drawer-panel {
        position: fixed !important;
        top: var(--vdm-topbar-height, 58px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        z-index: 900;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Besuchsprotokoll/Termin-Editor (DxPopup) als Vollbild-Blatt auf dem Handy */
@media (max-width: 767.98px) {
    dxbl-modal-dialog.protocol-editor-popup,
    .protocol-editor-popup {
        position: fixed !important;
        left: 0 !important;
        top: 58px !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100dvh - 58px) !important;
        max-height: calc(100dvh - 58px) !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    .protocol-editor-popup .dxbl-popup-content,
    .protocol-editor-popup .dxbl-modal-body {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    .protocol-popup-footer-left,
    .protocol-popup-footer-right {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.4rem !important;
        width: 100%;
    }

    .protocol-popup-footer-left > *,
    .protocol-popup-footer-right > * {
        min-width: 0;
    }
}

/* ---------- Vertrieb: Karte (Handy und Tablet) ---------- */
@media (max-width: 980px) {
    .sales-map-page {
        display: block !important;
        min-height: 0 !important;
    }

    .sales-map-page > * + * {
        margin-top: 0.6rem;
    }

    .sales-map-side {
        display: flex !important;
        flex-direction: column;
        gap: 0.6rem;
    }

    .sales-map-list {
        max-height: none !important;
        overflow: visible !important;
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .sales-map-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.4rem;
    }

    .sales-map-canvas {
        min-height: 60vh !important;
    }

    .sales-map-kpis {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .ab-karten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Vertrieb: Teamplanung (Handy und Tablet) ---------- */
.tp-karten {
    display: none;
}

@media (max-width: 1199.98px) {
    .vertrieb-grid-host .vertrieb-main-grid,
    .freigaben-host .freigaben-main-grid {
        display: none !important;
    }

    .tp-karten {
        display: grid;
        gap: 0.5rem;
        grid-auto-rows: max-content;
    }

    .tp-karte {
        display: grid;
        gap: 0.25rem;
        padding: 0.6rem 0.8rem;
        border: 1px solid var(--vdm-border-card, #d9dde2);
        border-radius: 0.7rem;
        background: var(--vdm-surface-card, #fff);
        min-width: 0;
    }

    .tp-karte-kopf {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .tp-karte-kopf > strong {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .tp-status {
        flex: 0 0 auto;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        background: var(--vdm-surface-card-muted, #eef1f4);
        font-size: 0.78rem;
    }

    .tp-karte-titel,
    .tp-karte-meta {
        color: var(--vdm-text-muted, #5b6573);
        font-size: 0.85rem;
        overflow-wrap: anywhere;
    }

    .tp-karte-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.1rem 0.7rem;
    }

    /* Der Arbeitsbereich scrollt als Ganzes (Termine, dann Freigaben); vorher schnitt overflow:hidden alles ab */
    #vertrieb-teamplanung-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    #vertrieb-teamplanung-content .vertrieb-grid-host {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .vertrieb-grid-host .tp-karten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tp-aus {
        display: none !important;
    }
}

/* ---------- Tourenplanung: Liste (Handy) ---------- */
@media (max-width: 767.98px) {
    .tp-page {
        gap: 0.6rem !important;
        padding: 0 !important;
    }

    .tp-header-top {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    .tp-header-top .tp-eyebrow,
    .tp-header-top .tp-plan-modus ~ * {
        display: none;
    }

    .tp-header-actions {
        justify-content: stretch !important;
        flex-wrap: nowrap;
    }

    .tp-header-actions > * {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Datum und Suche in einer Zeile, Filter-Knopf rechts; Kueche, Fahrzeug und Stammdaten dahinter */
    .tpl-fk .tp-overview-filter {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        align-items: end;
    }

    .tpl-fk .tp-overview-filter > label:not(.vdm-fk-aus) {
        grid-column: 1;
    }

    .tpl-fk .tp-overview-filter > .vdm-fk-knopf {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: end;
    }

    .tpl-fk .tp-overview-filter > .vdm-fk-aus,
    .tpl-fk .tp-overview-filter > details {
        grid-column: 1 / -1;
    }

    .tpl-fk .tp-overview-filter .dxbl-date-edit,
    .tpl-fk .tp-overview-filter dxbl-date-edit,
    .tpl-fk .tp-overview-filter .dxbl-combobox,
    .tpl-fk .tp-overview-filter dxbl-combo-box {
        width: 100% !important;
    }

    .tpl-fk .tp-overview-search {
        flex: 1 1 auto;
    }
}

@media (max-width: 767.98px) {
    /* Tourenplanung: Uebersicht war ein Raster ohne Spaltenbreite (Karten 373 px in 356 px) */
    .tp-overview {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tp-overview > * {
        min-width: 0;
    }

    .tp-overview-day-note {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.4rem;
        font-size: 0.85rem;
    }

    .tp-overview-day-note > svg,
    .tp-overview-day-note > span:nth-child(2) {
        display: none;
    }

    .tp-overview-kpis-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.2rem;
    }

    .tp-overview-kpis-chips > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .tp-family-card {
        max-width: 100%;
        box-sizing: border-box;
    }

    .tp-family-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
    }

    .tp-family-facts > :first-child {
        grid-column: 1 / -1;
    }
}

/* Einrichtungscheck: Symbole (ObIcon). Kindkomponenten bekommen das Scope-Attribut der Seite nicht,
   deshalb stehen diese Regeln global und haengen am Seitenumschlag. */
.objektbesuch-page .ob-icon {
    flex: none;
    vertical-align: -0.2em;
}

.objektbesuch-page .dxbl-btn .ob-icon,
.objektbesuch-page .ob3-knopf .ob-icon,
.objektbesuch-page .objektbesuch-auto-advance-toggle .ob-icon {
    margin-right: 0.4rem;
}

.objektbesuch-page .ob2-fuss .ob2-haupt .ob-icon {
    margin-right: 0;
    margin-left: 0.4rem;
}

.objektbesuch-page .ob2-blatt-kopf h3 .ob-icon,
.objektbesuch-page .objektbesuch-signatures h3 .ob-icon {
    margin-right: 0.5rem;
    color: var(--vdm-text-muted, #5f6b7a);
}

.objektbesuch-page .ob2-summe > div .ob-icon {
    display: block;
    margin: 0 auto 0.2rem;
}

.objektbesuch-page .ob2-summe .a .ob-icon {
    color: var(--vdm-success, #16a34a);
}

.objektbesuch-page .ob2-summe .b .ob-icon {
    color: var(--vdm-danger, #dc2626);
}

.objektbesuch-page .ob2-leer .ob-icon {
    display: block;
    margin: 0 auto 0.5rem;
    color: var(--vdm-success, #16a34a);
}

.objektbesuch-page .ob3-final-hinweis .ob-icon {
    color: var(--vdm-success, #16a34a);
}

.objektbesuch-page .ob3-menue-text {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.objektbesuch-page .ob3-menue-text .ob-icon {
    color: var(--vdm-text-muted, #5f6b7a);
}

.objektbesuch-page .objektbesuch-validation .ob-icon {
    vertical-align: -0.15em;
}

/* Einrichtungscheck (Handy/Tablet): Seite mindestens bildschirmhoch, damit die untere Leiste unten bleibt */
@media (max-width: 1199.98px) {
    .objektbesuch-page.ob2 {
        min-height: calc(100dvh - var(--vdm-topbar-height, 58px) - 1.5rem);
    }

    .objektbesuch-page .ob2-fuss {
        margin-top: auto;
    }
}

/* Einrichtungscheck: lange Bereichsnamen im Blatt kuerzen statt die Zaehler umzubrechen */
.objektbesuch-page .ob3-bereich-zeile .ob3-bereich-name {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Einrichtungscheck: der schwebende Hilfe-Knopf deckt auf dem Desktop die Knoepfe unten im Abschluss-Block ab */
body:has(.objektbesuch-page) .vhd-fab {
    display: none !important;
}

/* ---------- Einrichtungscheck: Touch-Bedienung (Handy und Tablet) ---------- */
@media (max-width: 1199.98px) {
    .objektbesuch-item-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
    }

    .objektbesuch-item-actions .objektbesuch-choice-btn,
    .objektbesuch-item-actions .dxbl-btn {
        min-height: 2.6rem !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        width: 100%;
    }

    /* Der Hilfe-Knopf schwebt sonst ueber den Antwortknoepfen und dem Diktat-Knopf */
    body:has(.objektbesuch-page) .vhd-fab {
        display: none !important;
    }

    .objektbesuch-page .objektbesuch-remark-input {
        min-height: 2.6rem;
        font-size: 0.9rem;
    }

    /* Uebrige Knoepfe (Info, Abschluss, Naechste Pruefung): ruhige Groesse statt Standard 44 px / fett */
    .objektbesuch-page .objektbesuch-item-head .dxbl-btn:not(.objektbesuch-choice-btn),
    .objektbesuch-page .objektbesuch-item-hints .dxbl-btn:not(.objektbesuch-choice-btn),
    .objektbesuch-page .ob2-punkte .dxbl-btn:not(.objektbesuch-choice-btn),
    .objektbesuch-page .ob2-fuss .dxbl-btn {
        min-height: 2.4rem !important;
        padding-block: 0.25rem !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
    }

    .objektbesuch-page .objektbesuch-signature-canvas {
        touch-action: none;
        min-height: 9rem;
    }
}

/* Lager und Fuhrpark Mobil/Tablet (06.10.2026, docs/ui/mobil-konzept.md Abschnitt 3 und 6):
   Tippflächen >= 40 px für Knöpfe und Tabellenfilter, Filterzeile der Tabellen auf dem Handy ausgeblendet (Suchfeld bleibt),
   Knopfreihen brechen um statt über den Rand zu laufen. Nur Anzeige, keine Fachlogik. */
@media (max-width: 1199.98px) {
    .content .dxbl-btn { min-height: 40px; }
    .content .dxbl-grid .dxbl-btn,
    .content .dxbl-grid-filter-row .dxbl-btn { min-width: 40px; }
    .content .dxbl-grid .dxbl-grid-filter-row .dxbl-text-edit-input,
    .content .dxbl-grid .dxbl-grid-search-box .dxbl-text-edit-input { min-height: 40px; font-size: 1rem; }
    .content .dxbl-grid-filter-row td { padding-top: 4px; padding-bottom: 4px; }
}
@media (max-width: 767.98px) {
    .content .dxbl-grid:has(.dxbl-grid-search-box) .dxbl-grid-filter-row { display: none; }
    .content .dxbl-btn { max-width: 100%; }
    .content .dxbl-btn .dxbl-btn-caption { white-space: normal; text-align: left; }
}
@media (max-width: 1199.98px) {
    .content .dxbl-btn { min-height: 40px !important; }
    .content .dxbl-grid .dxbl-btn,
    .content .dxbl-grid-filter-row .dxbl-btn,
    .content .dxbl-grid-header-row .dxbl-btn { min-width: 40px !important; }
    .content .lueb-artlink { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
    .content .lpr-time, .content .lwac-suchfeld, .content .lwac-daybtn { min-height: 40px; }
    .content .lwac-daybtn { min-width: 40px; }
    .content .lpr-time, .content .lwac-suchfeld { font-size: 1rem; }
}
@media (max-width: 1199.98px) {
    .content .lwac-chip { min-height: 40px; }
    .content .fahrzeug-fk-actions { flex-wrap: wrap; max-width: 100%; }
    .content .fahrzeug-fk-actions .dxbl-btn { max-width: 100%; }
}

/* Kartenansicht für Lager-Tabellen (06.10.2026): ab 768 px unsichtbar, auf dem Handy statt der Tabelle */
.vdm-karten { display: none; }
@media (max-width: 767.98px) {
    .content .dxbl-grid.lueb-grid, .content .dxbl-grid.lart-grid, .content .dxbl-grid.lbs-grid { display: none; }
    .vdm-karten { display: grid; gap: 8px; padding: 4px 0 12px; }
    .vdm-karten-suche { width: 100%; min-height: 40px; padding: 0 12px; font-size: 1rem; border: 1px solid var(--vdm-border-card); border-radius: 10px; background: var(--vdm-surface-card); color: var(--vdm-text); }
    .vdm-karte { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--vdm-border-card); border-radius: 12px; background: var(--vdm-surface-card); color: var(--vdm-text); text-decoration: none; min-width: 0; }
    .vdm-karte.is-leise { opacity: .75; }
    .vdm-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .vdm-karte-titel { font-weight: 600; color: var(--vdm-text-strong); overflow-wrap: anywhere; min-width: 0; }
    .vdm-karte-marke { flex: none; font-size: 0.8rem; color: var(--vdm-text-muted); }
    .vdm-karte-zeile { font-size: 0.86667rem; color: var(--vdm-text-muted); overflow-wrap: anywhere; }
    .vdm-karte-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 0.93333rem; }
    .vdm-karte-werte small { display: block; font-size: 0.73333rem; color: var(--vdm-text-muted); }
    .vdm-karte-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .vdm-karte-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--vdm-border-card); border-radius: 10px; background: transparent; color: var(--vdm-text-strong); font: inherit; font-size: 0.9rem; }
    .vdm-karte-knopf img { width: 18px; height: 18px; }
    .vdm-karte-knopf.is-gefahr { color: var(--vdm-danger-text); border-color: var(--vdm-danger-border); }
}
@media (max-width: 767.98px) {
    a.vdm-karte-titel { display: inline-flex; align-items: center; min-height: 40px; }
}