/* ==========================================================================
   Handy & Tablet – lädt nach allen anderen Stylesheets.
   Bis 1100 px: Touch-Bedienung. Bis 820 px: untere Navigation. Bis 760 px: Handy.
   ========================================================================== */

.mobil-nav, .sidebar-konto, .nav-search-btn, .mobil-dock, .filter-knopf, .angebot-leiste { display: none; }

/* Touch-Geräte zeigen keine Hover-Zustände: versteckte Bedienelemente sichtbar machen */
@media (hover: none) {
    .cal-day a { opacity: 1; }
    .hw-table tbody tr:hover td { background: transparent; }
    .gal-item:hover img { transform: none; }
}

/* ── Touch: alles, was man antippt ──────────────────────────────────────── */
@media (max-width: 1100px), (pointer: coarse) {
    html { -webkit-text-size-adjust: 100%; }
    a, button, label, summary { -webkit-tap-highlight-color: hsl(var(--c-primary) / .12); }
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
        min-height: 44px;
        font-size: 16px; /* unter 16 px zoomt iOS beim Antippen in das Feld */
    }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    .hw-btn { min-height: 44px; padding-left: var(--s-4); padding-right: var(--s-4); font-size: 14px; }
    .hw-btn.small { min-height: 40px; font-size: 13.5px; }
    .hw-btn.xs { min-height: 36px; font-size: 13px; }
    .login-demo select, main select, main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), main textarea { font-size: 16px !important; min-height: 44px; }
    #lcvTool button { min-height: 40px; }
    .hw-tab { min-height: 44px; }
    .hw-tabs { scrollbar-width: none; flex-wrap: nowrap; }
    .hw-tabs::-webkit-scrollbar { display: none; }
    .hw-tab { flex: 0 0 auto; white-space: nowrap; }
    .sidebar-nav a, .quick-action-btn { min-height: 44px; }
    .legend-chip { min-height: 36px; }
    .hw-modal-close { width: 44px; height: 44px; font-size: 22px; }
    .nav-dm-btn, .nav-bell-btn, .logout-btn, ._hamburger-btn { min-width: 44px; min-height: 44px; }
    .nav-bell-item { min-height: 52px; }
    .gal-edit { min-width: 36px; min-height: 36px; }
    .gal-cap a { padding: var(--s-2) var(--s-1); }
}

/* Tablet quer: Hauptspalte plus schmale Aktionsspalte */
@media (min-width: 821px) and (max-width: 1100px) {
    .hw-split { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* Breite Tabellen auf dem Tablet als zweispaltige Kartenliste */
table.karten, table.karten tbody { display: block; width: 100%; }
table.karten thead { display: none; }
table.karten tfoot { display: block; }
table.karten tfoot tr { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); }
table.karten tfoot td { padding: 0; border: 0; background: none; }
table.karten tbody tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line);
}
table.karten tbody tr:last-child { border-bottom: 0; }
table.karten tbody tr::after { content: ''; order: 0; flex-basis: 100%; height: 0; }
table.karten tbody tr:active { background: var(--surface-2); }
table.karten td {
    display: block;
    flex: 1 1 calc(50% - var(--s-2));
    order: 1;
    min-width: 0;
    padding: 2px 0;
    border: 0;
    background: none !important;
    text-align: left;
    white-space: normal;
    font-size: 14px;
    overflow-wrap: anywhere;
}
table.karten td::before { content: attr(data-label); display: block; color: var(--text-3); font-size: 12px; }
table.karten td.num { text-align: left; }
table.karten td.karte-voll { flex-basis: 100%; }
table.karten td.karte-voll .hw-btn { min-height: 40px; }
table.karten td a:not(.row-link):not(.hw-btn) { display: inline-block; padding: 3px 0; }
table.karten td .person-cell { display: inline-flex; }
table.karten td.karte-titel { order: -2; flex-basis: 100%; font-size: 15px; }
table.karten td.karte-titel::before { display: none; }
table.karten td.karte-titel .row-link { font-size: 16px; font-weight: 600; }
table.karten td.karte-titel .row-link::after { content: ''; position: absolute; inset: 0; }
table.karten td.karte-chip { order: -1; flex: 0 0 auto; }
table.karten td.karte-chip::before { display: none; }
table.karten td.karte-weg, table.karten td.karte-leer { display: none; }
table.karten td a:not(.row-link), table.karten td button, table.karten td select, table.karten td form, table.karten .tel-link { position: relative; z-index: 1; }
table.karten .tel-link { display: inline-block; padding: var(--s-2) 0; color: var(--primary); font-weight: 500; }
@media (min-width: 761px) {
    table.karten tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    table.karten tbody tr { align-content: start; }
    table.karten tbody tr:nth-child(odd) { border-right: 1px solid var(--line); }
}

#bulkForm:has(table.karten) #bulkBar { display: none; }

/* ── Untere Navigation (Handy, Tablet hoch) ─────────────────────────────── */
@media (max-width: 820px) {
    :root { --mobil-nav-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
    body { padding-bottom: var(--mobil-nav-h); }
    body.werkzeug { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

    .mobil-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 150;
        display: flex;
        height: var(--mobil-nav-h);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: hsl(var(--c-chrome) / .94);
        -webkit-backdrop-filter: saturate(1.6) blur(12px);
        backdrop-filter: saturate(1.6) blur(12px);
        border-top: 1px solid var(--line);
    }
    .mobil-nav a, .mobil-nav button {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        border: 0;
        background: none;
        color: var(--text-3);
        font: inherit;
        font-size: 11.5px;
        font-weight: 500;
        cursor: pointer;
    }
    .mobil-nav svg { width: 23px; height: 23px; }
    .mobil-nav .active { color: var(--primary); font-weight: 600; }
    .mobil-nav a:active, .mobil-nav button:active { background: var(--surface-hover); }
    .mobil-nav b {
        position: absolute;
        top: 5px;
        left: calc(50% + 6px);
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: var(--r-full);
        background: hsl(var(--c-danger));
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }
    body.werkzeug .mobil-nav, body.tippt .mobil-nav, body.tippt .mobil-dock { display: none; }
    body.tippt { padding-bottom: 0; }

    /* Kopfzeile: Firma, Suche, Glocke. Rest liegt unter „Mehr“ */
    .erp-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand actions" "search search";
        row-gap: 0;
        height: auto;
        min-height: 52px;
        padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
        padding-top: calc(var(--s-1) + env(safe-area-inset-top, 0px));
    }
    .client-branding { grid-area: brand; }
    .user-menu { grid-area: actions; gap: 0; }
    ._hamburger-btn { display: none; }
    .brand-text h1 { font-size: 16px; }
    .nav-search-btn {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: var(--text-2);
    }
    .nav-search-btn svg { width: 21px; height: 21px; }
    .header-search-form { display: none; grid-area: search; max-width: none; padding: var(--s-1) var(--s-3) var(--s-2) 0; }
    body.suche-offen .header-search-form { display: block; }
    .nav-bell-wrap { position: static; }
    .nav-bell-dropdown { position: fixed; top: 60px; left: var(--s-3); right: var(--s-3); width: auto; }
    #navBellList { max-height: calc(100dvh - 220px); }

    /* „Mehr“-Menü */
    .erp-sidebar { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .sidebar-konto {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s-2);
        padding: var(--s-3);
        border-bottom: 1px solid var(--line);
    }
    .sidebar-konto .nav-user { order: -1; flex: 1 0 100%; display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
    .sidebar-konto .user-avatar { display: grid; }
    .sidebar-konto .nav-role-switch { flex: 1; max-width: none; }
    .sidebar-konto .nav-dm-btn, .sidebar-konto .logout-btn { flex: 1 1 0; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text-2); }
    .sidebar-konto .nav-dm-btn::after { content: 'Hell / Dunkel'; margin-left: var(--s-2); font-size: 13px; }
    .sidebar-konto .logout-btn::after { content: 'Abmelden'; margin-left: var(--s-2); font-size: 13px; }

    /* Angebotstool: Preisleiste statt Navigation */
    .angebot-leiste {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 150;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
        padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
        background: var(--chrome);
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 16px hsl(222 30% 8% / .08);
    }
    .angebot-leiste small { display: block; font-size: 12px; color: var(--text-3); }
    .angebot-leiste b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); }
    body.tippt .angebot-leiste { display: none; }
}

/* ── Handy ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .hw-main { padding: var(--s-4) var(--s-3) var(--s-6); }
    .hw-card-head { padding-left: var(--s-4); padding-right: var(--s-4); }
    .hw-card-body { padding-left: var(--s-4); padding-right: var(--s-4); }
    .hw-eyebrow { display: none; }
    .hw-subtitle { font-size: 14px; }

    .hw-page-head { gap: var(--s-3); margin-bottom: var(--s-4); }
    .hw-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
    .hw-actions .hw-btn { justify-content: center; height: auto; padding-top: var(--s-2); padding-bottom: var(--s-2); white-space: normal; line-height: 1.25; }
    .hw-actions form, .hw-actions form .hw-btn { width: 100%; }
    .hw-actions .hw-btn.primary { grid-column: 1 / -1; order: -1; }

    /* Kennzahlen als Wischleiste, randlos bis zum Bildschirmrand */
    .hw-grid:has(> .hw-kpi), .pipeline-tiles {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(136px, 42%);
        grid-template-columns: none;
        gap: var(--s-2);
        margin-left: calc(var(--s-3) * -1);
        margin-right: calc(var(--s-3) * -1);
        padding: 0 var(--s-3) var(--s-1);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-left: var(--s-3);
        scrollbar-width: none;
    }
    .hw-grid:has(> .hw-kpi)::-webkit-scrollbar, .pipeline-tiles::-webkit-scrollbar { display: none; }
    .hw-grid:has(> .hw-kpi) > *, .pipeline-tiles > * { scroll-snap-align: start; }

    /* Eingeklappte Auswertungen */
    .hw-card.klappbar > .hw-card-head { cursor: pointer; min-height: 52px; }
    .hw-card.klappbar > .hw-card-head::after {
        content: '';
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-left: var(--s-2);
        border-right: 2px solid var(--text-3);
        border-bottom: 2px solid var(--text-3);
        transform: rotate(-135deg);
        transition: transform var(--t-med) var(--ease-out);
    }
    .hw-card.klappbar.zu > .hw-card-head::after { transform: rotate(45deg); }
    .hw-card.klappbar.zu > *:not(.hw-card-head) { display: none; }
    .hw-card.klappbar.zu > .hw-card-head { border-bottom: 0; }
    .hw-card.klappbar.zu > .hw-card-head .hw-card-sub { display: none; }

    /* Filter */
    .hw-filterbar { grid-template-columns: minmax(0, 1fr) auto; }
    .hw-filterbar > :first-child { grid-column: 1; }
    .hw-filterbar .filter-knopf { display: inline-flex; grid-column: 2; grid-row: 1; }
    .hw-filterbar:has(.filter-knopf) > *:not(:first-child):not(.filter-knopf) { display: none; grid-column: 1 / -1; }
    .hw-filterbar.filter-offen > *:not(:first-child):not(.filter-knopf) { display: block; }
    .hw-filterbar.filter-offen > button[type="submit"] { display: none; }

    #bulkBar { display: none; }

    .hw-form-grid > * { grid-column: 1 / -1 !important; }

    /* Dialoge kommen von unten, der Schließen-Knopf bleibt erreichbar */
    .hw-modal-overlay { align-items: flex-end; padding: 0; overflow: hidden; }
    .hw-modal, .hw-modal.sm {
        width: 100%;
        max-height: 92dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: 0;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
    }
    .hw-modal-head { position: sticky; top: 0; z-index: 2; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); background: var(--surface); }
    .hw-modal-body { padding: var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
    .hw-modal .btn-row .hw-btn, .hw-modal button[type="submit"] { flex: 1 1 auto; justify-content: center; }

    /* Kundenakte */
    .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step { min-width: 74px; }
    .steps { padding: var(--s-3) var(--s-2); scrollbar-width: none; }
    .sprung-leiste {
        position: sticky;
        top: 52px;
        z-index: 50;
        display: flex;
        gap: var(--s-1);
        margin: 0 calc(var(--s-3) * -1) var(--s-3);
        padding: var(--s-2) var(--s-3);
        overflow-x: auto;
        background: hsl(var(--c-bg) / .94);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        scrollbar-width: none;
    }
    .sprung-leiste::-webkit-scrollbar { display: none; }
    .sprung-leiste a {
        flex: 0 0 auto;
        padding: var(--s-2) var(--s-3);
        border: 1px solid var(--line);
        border-radius: var(--r-full);
        background: var(--surface);
        color: var(--text-2);
        font-size: 13px;
        font-weight: 500;
    }
    .hw-card { scroll-margin-top: 110px; }

    .mobil-dock {
        position: fixed;
        inset: auto 0 var(--mobil-nav-h) 0;
        z-index: 140;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: var(--s-2);
        padding: var(--s-2) var(--s-3);
        background: var(--chrome);
        border-top: 1px solid var(--line);
    }
    .mobil-dock .hw-btn { padding: 0 var(--s-1); justify-content: center; }
    body:has(.mobil-dock) { padding-bottom: calc(var(--mobil-nav-h) + 60px); }
    .hw-actions .auf-handy-im-dock { display: none; }

    /* Kalender */
    .legend-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--s-3) * -1); padding-right: var(--s-3); }
    .legend-chips::-webkit-scrollbar { display: none; }
    .legend-chip { flex: 0 0 auto; }
    .cal-head .legend-chips { display: none; }
    .calendar-table th { padding: var(--s-1) 0; }
    .calendar-table td { height: 58px; }
    .cal-day { justify-content: center; }
    .cal-day a, .cal-more { display: none; }
    .calendar-table td { font-size: 0; text-align: center; }
    .calendar-table .cal-ev { display: inline-block; width: 6px; height: 6px; margin: 1px; border-radius: 50%; }

    /* Rechnung bleibt ein Dokument, wird nur enger gesetzt */
    .invoice-paper { padding: var(--s-4); overflow-x: auto; }
    .mail-layout { gap: var(--s-3); }
    .chart-box, .chart-box.lg { height: 240px; }
}

/* Drucken: nichts Mobiles auf Papier */
@media print {
    .mobil-nav, .mobil-dock, .angebot-leiste, .sprung-leiste { display: none !important; }
    body { padding-bottom: 0 !important; }
}

@media (max-width: 760px) {
    #lcvTool label { margin-bottom: var(--s-2); }
}