/* ============================================================
   Love Überdachungen GmbH – Mobile-Stylesheet
   Wirkt nur bei Bildschirmen <= 768px.
   Bottom-Nav und Mehr-Panel sind hier global definiert.
   ============================================================ */

/* ---- Bottom-Nav: standardmäßig versteckt (Desktop-Verhalten) ---- */
.bottom-nav {
    display: none;
}

/* ---- Mehr-Panel: standardmäßig versteckt ---- */
.mehr-panel-overlay {
    display: none;
}

/* ---- Floating Action Button: standardmäßig versteckt ---- */
.fab {
    display: none;
}

/* ---- Kalender-Tabs + Termin-Karten: standardmäßig versteckt (nur Mobile) ---- */
.kalender-tabs {
    display: none;
}

.termin-karten-liste {
    display: none;
}

/* ---- Mobile-Tabs (Kunde-Detail): standardmäßig versteckt ---- */
.mobile-tabs {
    display: none;
}

/* ---- Mobile-Hinweis-Card: standardmäßig versteckt ---- */
.mobile-hinweis-card {
    display: none;
}

/* ---- Projektstatus-Karten-Liste: standardmäßig versteckt (Desktop nutzt Tabelle) ---- */
.projekte-karten-liste {
    display: none;
}

/* ---- Urlaubskalender-Listenansicht: standardmäßig versteckt (Desktop nutzt Kalender-Grid) ---- */
.urlaub-liste-mobile {
    display: none;
}

/* ============================================================
   MOBILE LAYOUT
   ============================================================ */
@media (max-width: 768px) {

    /* ---- Sidebar verstecken ---- */
    .sidebar {
        display: none !important;
    }

    /* ---- Hauptinhalt: volle Breite + Platz für Bottom-Nav ---- */
    .haupt-inhalt {
        margin-left: 0 !important;
        padding-bottom: 70px;
    }

    /* ---- Bottom-Nav anzeigen ---- */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--farbe-sidebar);
        box-shadow: 0 -2px 10px rgba(0,0,0,.3);
        border-top: 1px solid rgba(255,255,255,.08);
        z-index: 999;
    }

    .bottom-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.4rem 0.25rem;
        background: none;
        border: none;
        color: var(--farbe-sidebar-text);
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        min-height: 44px;
        transition: color .15s, background .15s;
        font-family: inherit;
    }

    .bottom-nav-btn:hover {
        color: #e0e0e0;
        background: var(--farbe-sidebar-hover);
        text-decoration: none;
    }

    .bottom-nav-btn .bottom-nav-icon {
        font-size: 22px;
        line-height: 1;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
        transition: opacity .15s;
    }

    .bottom-nav-btn:hover .bottom-nav-icon {
        opacity: 0.9;
    }

    .bottom-nav-btn .bottom-nav-label {
        font-size: 11px;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* Aktive Seite: weißer Text + roter Indikator-Strich oben (analog Desktop-Sidebar) */
    .bottom-nav-btn.aktiv {
        color: #fff;
        background: var(--farbe-sidebar-hover);
    }

    .bottom-nav-btn.aktiv .bottom-nav-icon {
        opacity: 1;
    }

    .bottom-nav-btn.aktiv::before {
        content: '';
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 3px;
        background: var(--farbe-rot);
        border-radius: 0 0 3px 3px;
    }

    /* ============================================================
       Mehr-Panel (Slide-Up)
       ============================================================ */
    .mehr-panel-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 1000;
        animation: mehr-panel-fade .2s ease;
    }

    .mehr-panel-overlay.offen {
        display: block;
    }

    .mehr-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70vh;
        background: var(--farbe-sidebar);
        color: var(--farbe-sidebar-text);
        border-radius: var(--radius-gross) var(--radius-gross) 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,.4);
        display: flex;
        flex-direction: column;
        animation: mehr-panel-slide .25s ease;
    }

    @keyframes mehr-panel-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes mehr-panel-slide {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .mehr-panel-kopf {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(255,255,255,.08);
        flex-shrink: 0;
    }

    .mehr-panel-titel {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
    }

    .mehr-panel-schliessen {
        background: none;
        border: none;
        font-size: 1.2rem;
        color: var(--farbe-sidebar-text);
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-klein);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s, color .15s;
    }

    .mehr-panel-schliessen:hover {
        background: var(--farbe-sidebar-hover);
        color: #fff;
    }

    .mehr-panel-liste {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 0;
    }

    .mehr-panel-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
        color: var(--farbe-sidebar-text);
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.05);
        min-height: 44px;
        transition: background .15s, color .15s;
    }

    .mehr-panel-link:hover {
        background: var(--farbe-sidebar-hover);
        text-decoration: none;
        color: #fff;
    }

    .mehr-panel-link-icon {
        font-size: 20px;
        width: 28px;
        text-align: center;
        flex-shrink: 0;
        opacity: 0.85;
    }

    .mehr-panel-link.gefahr {
        color: var(--farbe-rot);
    }

    .mehr-panel-link.gefahr:hover {
        background: var(--farbe-sidebar-hover);
        color: var(--farbe-rot);
    }

    /* ============================================================
       Touch-Optimierung: Buttons, Inputs, Tabellen
       ============================================================ */

    /* Mindestgröße für Touch-Targets */
    .btn,
    .btn-klein,
    .btn-nur-icon,
    button,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }

    .btn-klein {
        padding: 0.5rem 0.75rem;
    }

    /* iOS-Zoom verhindern: Inputs >= 16px */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea,
    .formular-feld,
    .form-feld,
    .such-eingabe {
        font-size: 16px !important;
    }

    /* Modale Dialoge: Full-Screen */
    .modal-overlay {
        padding: 0;
        align-items: stretch;
    }

    .modal-overlay.offen .modal,
    .modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-gross {
        max-width: 100% !important;
    }

    .modal-kopf {
        border-radius: 0;
        flex-shrink: 0;
    }

    .modal-koerper {
        flex: 1;
        overflow-y: auto;
    }

    .modal-fusszeile {
        border-radius: 0;
        flex-shrink: 0;
        flex-wrap: wrap;
    }

    /* Tabellen: horizontal scrollbar */
    .tabelle-container,
    table {
        overflow-x: auto;
    }

    table {
        display: block;
        width: 100%;
    }

    /* Kopfzeile: dunkler Sidebar-Look auf Mobile */
    .kopfzeile {
        padding: 0.75rem 1rem;
        background: var(--farbe-sidebar);
        color: var(--farbe-sidebar-text);
        border-bottom: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
    }

    .kopfzeile-logo {
        display: inline-block;
        height: 28px;
        width: auto;
    }

    .kopfzeile-titel {
        font-size: 1rem;
        text-align: left;
        color: #fff;
    }

    .kopfzeile-aktionen,
    .kopfzeile-aktionen .text-schwach,
    .kopfzeile-aktionen span {
        color: var(--farbe-sidebar-text);
    }

    /* Sekundär-Buttons in der Kopfzeile (z.B. „Zur Liste") für dunklen Hintergrund */
    .kopfzeile .btn-sekundaer {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.15);
        color: #e0e0e0;
    }

    .kopfzeile .btn-sekundaer:hover {
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.25);
        color: #fff;
    }

    .kopfzeile .btn-sekundaer svg {
        stroke: currentColor;
    }

    .seiten-inhalt {
        padding: 1rem;
    }

    /* Toast-Container an Bottom-Nav anpassen */
    .toast-container {
        bottom: 80px;
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }

    /* ============================================================
       MOBILE-KARTEN-LISTE
       Wiederverwendbares Karten-Layout für mobile Listen
       (z.B. Kundenliste statt Tabelle)
       ============================================================ */
    .mobile-karten-liste {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .mobile-karte {
        display: block;
        background: var(--farbe-weiss);
        border: 1px solid var(--farbe-rahmen);
        border-radius: var(--radius-mittel);
        box-shadow: var(--schatten-klein);
        padding: 12px;
        text-decoration: none;
        color: var(--farbe-text);
        transition: background .15s, box-shadow .15s;
        margin-bottom: 0;
    }

    .mobile-karte:hover,
    .mobile-karte:active {
        background: #f0f4ff;
        text-decoration: none;
        color: var(--farbe-text);
    }

    .mobile-karte-titel {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--farbe-text);
        margin-bottom: 0.25rem;
    }

    .mobile-karte-sub {
        font-size: 0.78rem;
        color: var(--farbe-text-schwach);
        margin-bottom: 0.4rem;
    }

    .mobile-karte-zeile {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.82rem;
        color: var(--farbe-text);
        margin-top: 0.2rem;
        line-height: 1.3;
    }

    .mobile-karte-zeile-icon {
        flex-shrink: 0;
        width: 18px;
        text-align: center;
        opacity: 0.7;
    }

    /* Klickbare Kontakt-Links (tel/mailto) */
    .mobile-karte-aktion {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.25rem 0;
        color: var(--farbe-primaer);
        font-size: 0.85rem;
        text-decoration: none;
        min-height: 32px;
    }

    .mobile-karte-aktion:hover,
    .mobile-karte-aktion:active {
        color: var(--farbe-primaer-hover);
        text-decoration: underline;
    }

    .mobile-karte-kontakt {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        margin-top: 0.4rem;
    }

    /* Status-Badge in der Karte (kleine farbige Pille) */
    .mobile-karte-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.15rem 0.55rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 600;
        background: #dbeafe;
        color: #1e40af;
        margin-top: 0.35rem;
    }

    /* ============================================================
       FLOATING ACTION BUTTON (FAB)
       ============================================================ */
    .fab.sichtbar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 80px;
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--farbe-primaer);
        color: #fff;
        border: none;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(0,0,0,.2);
        z-index: 998;
        transition: background .15s, transform .1s, box-shadow .15s;
        padding: 0;
    }

    .fab.sichtbar:hover {
        background: var(--farbe-primaer-hover);
    }

    .fab.sichtbar:active {
        transform: scale(0.95);
        box-shadow: 0 3px 8px rgba(0,0,0,.2);
    }

    /* Header-Aktion „Neuer Kunde" bei mobiler Ansicht ausblenden – FAB ersetzt */
    #btnNeuenKundenAnlegen,
    #btnDateiHochladen {
        display: none !important;
    }

    /* Suchleiste: Such-Eingabe auf volle Breite */
    .such-eingabe-wrapper {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    /* Pagination kompakter */
    .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* ============================================================
       KALENDER-SEITEN: Tab-Bar + Karten-Listen
       ============================================================ */

    /* Auf Kalender-Seiten verbirgt der Tab-Bar die normale Kopfzeile */
    .kalender-mobile-seite > .kopfzeile {
        display: none;
    }

    .kalender-mobile-seite > .seiten-inhalt {
        padding-top: 0;
    }

    /* Tab-Bar oben (sticky) – dunkler Sidebar-Look */
    .kalender-tabs {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--farbe-sidebar);
        border-bottom: 1px solid rgba(255,255,255,.08);
        height: 44px;
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
    }

    .kalender-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--farbe-sidebar-text);
        background: var(--farbe-sidebar);
        text-decoration: none;
        position: relative;
        padding: 0 0.4rem;
        text-align: center;
        border: none;
        cursor: pointer;
        font-family: inherit;
        line-height: 1.2;
        transition: color .15s, background .15s;
    }

    .kalender-tab:hover,
    .kalender-tab:active {
        color: #e0e0e0;
        text-decoration: none;
        background: var(--farbe-sidebar-hover);
    }

    .kalender-tab.aktiv {
        color: #fff;
        font-weight: 600;
        background: var(--farbe-sidebar-hover);
    }

    .kalender-tab.aktiv::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 12%;
        right: 12%;
        height: 3px;
        background: var(--farbe-rot);
        border-radius: 3px 3px 0 0;
    }

    /* Auf Kalender-Seiten: bestehende Wochen-/Tabellen-Ansicht ausblenden */
    .kalender-mobile-seite .kalender-wrapper,
    .kalender-mobile-seite .kalender-gitter,
    .kalender-mobile-seite .kalender-legende,
    .kalender-mobile-seite .uk-filter-bar,
    .kalender-mobile-seite .al-scroll-wrapper,
    .kalender-mobile-seite .ad-layout {
        display: none !important;
    }

    /* Mitarbeiter-Dropdown-Leiste (Außendienst) auf Mobile kompakt */
    .kalender-mobile-seite .ad-kopfleiste {
        margin-bottom: 0.5rem;
        padding: 0.5rem 0;
    }

    .kalender-mobile-seite .ad-kopfleiste .btn {
        display: none !important;
    }

    .kalender-mobile-seite .ad-kopfleiste .formular-feld {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Header-Aktion-Buttons der Kalenderseiten ausblenden – FAB ersetzt */
    #btnNeuenTermin,
    #btnNeueLieferung,
    #btnNeuesZuordnen {
        display: none !important;
    }

    /* ============================================================
       Termin-Karten (Mobile-Listenansicht)
       ============================================================ */
    .termin-karten-liste {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .termin-karten-leer {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--farbe-text-schwach);
        font-size: 0.85rem;
    }

    .termin-karten-gruppe-titel {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--farbe-text-schwach);
        padding: 0.6rem 0.25rem 0.25rem;
    }

    .termin-karte {
        display: flex;
        gap: 12px;
        background: var(--farbe-weiss);
        border: 1px solid var(--farbe-rahmen);
        border-left: 4px solid var(--farbe-primaer);
        border-radius: var(--radius-mittel);
        box-shadow: var(--schatten-klein);
        padding: 12px;
        cursor: pointer;
        transition: background .15s, box-shadow .15s;
    }

    .termin-karte:active {
        background: #f0f4ff;
    }

    .termin-karte.stand-eingetragen,
    .termin-karte.status-terminiert  { border-left-color: #1e88e5; }
    .termin-karte.stand-geplant      { border-left-color: #e53935; }
    .termin-karte.stand-bestaetigt,
    .termin-karte.status-erledigt    { border-left-color: #43a047; }
    .termin-karte.status-zugeordnet  { border-left-color: #999; }

    .termin-karte.status-erledigt {
        opacity: 0.55;
    }

    .termin-datum {
        flex-shrink: 0;
        width: 56px;
        text-align: center;
        line-height: 1.1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }

    .termin-datum-tag {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--farbe-text);
        line-height: 1;
    }

    .termin-datum-monat {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--farbe-text-schwach);
        font-weight: 600;
    }

    .termin-datum-wochentag {
        font-size: 0.65rem;
        text-transform: uppercase;
        color: var(--farbe-text-schwach);
        font-weight: 600;
    }

    .termin-datum-zeit {
        font-size: 0.7rem;
        color: var(--farbe-text);
        font-weight: 600;
        margin-top: 2px;
    }

    .termin-info {
        flex: 1;
        min-width: 0;
    }

    .termin-titel {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--farbe-text);
        margin-bottom: 0.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .termin-meta {
        font-size: 0.78rem;
        color: var(--farbe-text-schwach);
        line-height: 1.4;
        word-break: break-word;
    }

    .termin-notiz {
        font-size: 0.72rem;
        color: var(--farbe-text-schwach);
        margin-top: 0.25rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .termin-status {
        display: inline-block;
        margin-top: 0.35rem;
        padding: 1px 8px;
        border-radius: 9999px;
        font-size: 0.68rem;
        font-weight: 600;
        color: #fff;
    }

    .termin-status.eingetragen { background: #1e88e5; }
    .termin-status.geplant     { background: #e53935; }
    .termin-status.bestaetigt  { background: #43a047; }
    .termin-status.zugeordnet  { background: #999; }
    .termin-status.terminiert  { background: #1e88e5; }
    .termin-status.erledigt    { background: #43a047; }

    /* ============================================================
       MOBILE-TABS (Kunde-Detail) – dunkler Sidebar-Look
       ============================================================ */
    .mobile-tabs {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--farbe-sidebar);
        border-bottom: 1px solid rgba(255,255,255,.08);
        height: 44px;
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
        overflow-x: auto;
    }

    .mobile-tab {
        flex: 1;
        min-width: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--farbe-sidebar-text);
        background: var(--farbe-sidebar);
        text-decoration: none;
        position: relative;
        padding: 0 0.5rem;
        text-align: center;
        border: none;
        cursor: pointer;
        font-family: inherit;
        line-height: 1.2;
        white-space: nowrap;
        transition: color .15s, background .15s;
    }

    .mobile-tab:hover,
    .mobile-tab:active {
        color: #e0e0e0;
        background: var(--farbe-sidebar-hover);
    }

    .mobile-tab.aktiv {
        color: #fff;
        font-weight: 600;
        background: var(--farbe-sidebar-hover);
    }

    .mobile-tab.aktiv::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 12%;
        right: 12%;
        height: 3px;
        background: var(--farbe-rot);
        border-radius: 3px 3px 0 0;
    }

    /* ============================================================
       KUNDE-DETAIL: Mobile-Layout
       ============================================================ */

    /* Layout vertikal stapeln */
    .kd-layout {
        display: block !important;
        gap: 0 !important;
    }

    /* Header-Buttons, die auf Mobile keinen Sinn machen, ausblenden */
    .btn-freigaben-kunde {
        display: none !important;
    }

    /* Interne Projekt-Detail-Tabs (Übersicht/Dokumente/Notizen/Termine)
       auf Mobile verstecken – die obere Mobile-Tab-Bar steuert die Sichtbarkeit. */
    .kd-tabs {
        display: none !important;
    }

    .kd-tab-inhalt {
        display: none !important;
    }

    /* ---- Tab-spezifische Sichtbarkeit ---- */

    /* Tab "Stammdaten": Stamm-Karte + Projekte-Liste als Karten, kein #kdRechts */
    [data-kd-mobile-tab="stamm"] #kdStammKarte         { display: block !important; }
    [data-kd-mobile-tab="stamm"] #kdProjekteKarte      { display: block !important; }
    [data-kd-mobile-tab="stamm"] .kd-proj-liste        { display: flex !important; }
    [data-kd-mobile-tab="stamm"] .kd-proj-dropdown     { display: none !important; }
    [data-kd-mobile-tab="stamm"] #kdRechts             { display: none !important; }
    [data-kd-mobile-tab="stamm"] .kd-erstellt-info     { display: block !important; }

    /* Tab "Projekte": Dropdown + volle Detail-Ansicht (Übersicht + Termine sichtbar) */
    [data-kd-mobile-tab="projekte"] #kdStammKarte      { display: none !important; }
    [data-kd-mobile-tab="projekte"] #kdProjekteKarte   { display: block !important; }
    [data-kd-mobile-tab="projekte"] .kd-proj-liste     { display: none !important; }
    [data-kd-mobile-tab="projekte"] .kd-proj-dropdown  { display: block !important; }
    [data-kd-mobile-tab="projekte"] #kdRechts          { display: block !important; }
    [data-kd-mobile-tab="projekte"] #tabUebersicht     { display: block !important; }
    [data-kd-mobile-tab="projekte"] #tabTermine        { display: block !important; }
    [data-kd-mobile-tab="projekte"] .kd-erstellt-info  { display: none !important; }

    /* Tab "Dokumente": Dropdown + nur Dokumente */
    [data-kd-mobile-tab="dokumente"] #kdStammKarte     { display: none !important; }
    [data-kd-mobile-tab="dokumente"] #kdProjekteKarte  { display: block !important; }
    [data-kd-mobile-tab="dokumente"] .kd-proj-liste    { display: none !important; }
    [data-kd-mobile-tab="dokumente"] .kd-proj-dropdown { display: block !important; }
    [data-kd-mobile-tab="dokumente"] #kdRechts         { display: block !important; }
    [data-kd-mobile-tab="dokumente"] #tabDokumente     { display: block !important; }
    [data-kd-mobile-tab="dokumente"] .kd-erstellt-info { display: none !important; }

    /* Tab "Notizen": Dropdown + nur Notizen */
    [data-kd-mobile-tab="notizen"] #kdStammKarte       { display: none !important; }
    [data-kd-mobile-tab="notizen"] #kdProjekteKarte    { display: block !important; }
    [data-kd-mobile-tab="notizen"] .kd-proj-liste      { display: none !important; }
    [data-kd-mobile-tab="notizen"] .kd-proj-dropdown   { display: block !important; }
    [data-kd-mobile-tab="notizen"] #kdRechts           { display: block !important; }
    [data-kd-mobile-tab="notizen"] #tabNotizen         { display: block !important; }
    [data-kd-mobile-tab="notizen"] .kd-erstellt-info   { display: none !important; }

    /* Kundennotiz nur im Stammdaten-Tab sichtbar */
    [data-kd-mobile-tab="projekte"]  .kundennotiz-karte,
    [data-kd-mobile-tab="projekte"]  .kundennotiz-info-box,
    [data-kd-mobile-tab="dokumente"] .kundennotiz-karte,
    [data-kd-mobile-tab="dokumente"] .kundennotiz-info-box,
    [data-kd-mobile-tab="notizen"]   .kundennotiz-karte,
    [data-kd-mobile-tab="notizen"]   .kundennotiz-info-box { display: none !important; }

    /* Wenn nur ein Projekt vorhanden: Dropdown ausblenden */
    .kd-proj-dropdown.kd-versteckt {
        display: none !important;
    }

    /* Sticky Dropdown unterhalb der Mobile-Tab-Bar (44px hoch) */
    [data-kd-mobile-tab="projekte"] .kd-proj-dropdown,
    [data-kd-mobile-tab="dokumente"] .kd-proj-dropdown,
    [data-kd-mobile-tab="notizen"]   .kd-proj-dropdown {
        position: sticky;
        top: 44px;
        z-index: 40;
        background: var(--farbe-weiss);
        margin: 0 !important;
        padding: 0.5rem 0.75rem !important;
        border-bottom: 1px solid var(--farbe-rahmen);
    }

    [data-kd-mobile-tab="projekte"] .kd-proj-dropdown select,
    [data-kd-mobile-tab="dokumente"] .kd-proj-dropdown select,
    [data-kd-mobile-tab="notizen"]   .kd-proj-dropdown select {
        font-size: 16px !important;
        padding: 0.5rem 0.6rem !important;
    }

    /* Auf den Tabs Projekte/Dokumente/Notizen hat #kdProjekteKarte nur den Dropdown,
       kein Padding/Border drumherum nötig */
    [data-kd-mobile-tab="projekte"] #kdProjekteKarte,
    [data-kd-mobile-tab="dokumente"] #kdProjekteKarte,
    [data-kd-mobile-tab="notizen"]   #kdProjekteKarte {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    [data-kd-mobile-tab="projekte"] #kdProjekteKarte .kd-proj-kopf,
    [data-kd-mobile-tab="dokumente"] #kdProjekteKarte .kd-proj-kopf,
    [data-kd-mobile-tab="notizen"]   #kdProjekteKarte .kd-proj-kopf {
        display: none;
    }

    /* ---- Stammdaten-Tab: Projekt-Items als Karten ---- */
    [data-kd-mobile-tab="stamm"] .kd-proj-liste {
        gap: 8px;
    }

    [data-kd-mobile-tab="stamm"] .kd-proj-item {
        background: var(--farbe-weiss);
        border: 1px solid var(--farbe-rahmen) !important;
        border-radius: var(--radius-mittel);
        padding: 12px !important;
        box-shadow: var(--schatten-klein);
        margin-bottom: 0;
    }

    [data-kd-mobile-tab="stamm"] .kd-proj-item.aktiv {
        border-color: var(--farbe-primaer) !important;
        background: #eff6ff;
    }

    /* Mobile-Meta-Block (Wareneingang/Liefertermin/Montagetermin) */
    .kd-proj-mobile-meta {
        display: none;
    }

    [data-kd-mobile-tab="stamm"] .kd-proj-mobile-meta {
        display: block;
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px solid var(--farbe-rahmen);
        font-size: 0.74rem;
        color: var(--farbe-text-schwach);
        line-height: 1.5;
    }

    [data-kd-mobile-tab="stamm"] .kd-proj-mobile-meta strong {
        color: var(--farbe-text);
        font-weight: 600;
    }

    /* ============================================================
       KUNDE-DETAIL: Tab-Inhalt-Container & Dokument-Karten
       (verhindert horizontalen Overflow bei langen Dateinamen / vielen Filter-Tabs)
       ============================================================ */

    /* Alle Tab-Inhalts-Container streng auf Container-Breite begrenzen */
    .kd-tab-inhalt,
    #tabUebersicht,
    #tabDokumente,
    #tabNotizen,
    #tabTermine {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Karten innerhalb darunter ebenfalls zwingend auf Breite */
    #tabDokumente .karte,
    #tabDokumente .karte-inhalt,
    #tabDokumente .dokument-liste {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Filter-Tab-Reihe (Alle / Angebot / Rechnung …) darf horizontal scrollen,
       aber NICHT den Karten-Container nach außen drücken */
    #tabDokumente .dokument-typen-tabs {
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    /* Header-Button "Hochladen" innerhalb der Dokumenten-Karte ausblenden –
       der FAB übernimmt das auf Mobile */
    #tabDokumente .karte-kopf .btn-primaer {
        display: none !important;
    }

    /* Dokument-Karte: vertikales Layout mit umbruchfähigen Aktionen */
    #tabDokumente .dokument-karte {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem 0.75rem;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0.65rem 0.75rem;
    }

    #tabDokumente .dokument-info {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }

    #tabDokumente .dokument-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.85rem;
    }

    /* Dateiname ist evtl. ein klickbarer Block – soll trotzdem ellipsen */
    #tabDokumente .dokument-name [title],
    #tabDokumente .dokument-name span {
        max-width: 100%;
    }

    #tabDokumente .dokument-meta {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        font-size: 0.72rem;
        line-height: 1.4;
    }

    /* Aktionen brechen in eine eigene Zeile um, wenn nötig, und richten sich rechts aus */
    #tabDokumente .dokument-aktionen {
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.25rem;
    }

    /* Icon-only Buttons in den Aktionen kompakt halten */
    #tabDokumente .dokument-aktionen .btn-klein {
        min-width: 44px;
        padding: 0.5rem 0.6rem;
    }

    /* Notiz-Bereich auf Mobile umbruchfähig */
    #tabDokumente .dokument-karte .dokument-meta[style*="italic"] {
        word-break: break-word;
    }

    /* ============================================================
       MOBILE-HINWEIS-CARD ("Nur auf Desktop verfügbar")
       ============================================================ */
    .mobile-hinweis-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: var(--farbe-weiss);
        border: 1px solid var(--farbe-rahmen);
        border-radius: var(--radius-gross);
        box-shadow: var(--schatten-mittel);
        padding: 2rem 1.25rem;
        margin: 1.5rem 1rem;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-hinweis-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        line-height: 1;
    }

    .mobile-hinweis-titel {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--farbe-text);
        margin-bottom: 0.5rem;
    }

    .mobile-hinweis-text {
        font-size: 0.9rem;
        color: var(--farbe-text-schwach);
        line-height: 1.5;
        margin-bottom: 1.25rem;
    }

    .mobile-zurueck-button {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.75rem 1.25rem;
        background: var(--farbe-primaer);
        color: #fff;
        border: none;
        border-radius: var(--radius-klein);
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        min-height: 44px;
        cursor: pointer;
    }

    .mobile-zurueck-button:hover,
    .mobile-zurueck-button:active {
        background: var(--farbe-primaer-hover);
        color: #fff;
        text-decoration: none;
    }

    /* ============================================================
       INTERN-DATEIEN: Single-Column + Folder/File-Toggle
       ============================================================ */
    .datei-explorer {
        display: block !important;
    }

    /* Auf Mobile zwei Phasen: Ordner zeigen ODER Dateien zeigen */
    .datei-explorer .ordner-baum,
    .datei-explorer > div:first-child {
        width: 100% !important;
    }

    .datei-explorer .datei-liste,
    .datei-explorer > div:nth-child(2) {
        width: 100% !important;
    }

    /* Standard (Mobile, kein "zeigt-dateien"): nur Ordnerliste */
    .datei-explorer:not(.mobile-zeigt-dateien) > div:nth-child(2),
    .datei-explorer:not(.mobile-zeigt-dateien) .datei-liste {
        display: none !important;
    }

    /* Im "zeigt-dateien"-Modus: nur Dateiliste, Ordner versteckt */
    .datei-explorer.mobile-zeigt-dateien > div:first-child,
    .datei-explorer.mobile-zeigt-dateien .ordner-baum {
        display: none !important;
    }

    /* Mobile-Zurück-Header für Datei-Ansicht */
    .mobile-datei-zurueck {
        display: none;
    }

    .datei-explorer.mobile-zeigt-dateien .mobile-datei-zurueck {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: var(--farbe-weiss);
        border-bottom: 1px solid var(--farbe-rahmen);
        position: sticky;
        top: 0;
        z-index: 30;
        cursor: pointer;
    }

    .mobile-datei-zurueck-pfeil {
        font-size: 1.2rem;
        color: var(--farbe-primaer);
    }

    .mobile-datei-zurueck-text {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--farbe-text);
    }

    /* Ordner als große Karten */
    .ordner-eintrag,
    .ordner-baum-eintrag,
    [data-ordner-id] {
        min-height: 56px !important;
        padding: 1rem 1rem !important;
        font-size: 0.95rem !important;
    }

    /* ============================================================
       URLAUBSKALENDER: Listenansicht statt Kalendergrid
       ============================================================ */
    .urlaub-liste-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .mobile-urlaub-seite .kalender-gitter,
    .mobile-urlaub-seite .kalender-legende,
    .mobile-urlaub-seite .uk-filter {
        display: none !important;
    }

    .urlaub-karte {
        display: flex;
        gap: 12px;
        background: var(--farbe-weiss);
        border: 1px solid var(--farbe-rahmen);
        border-left: 4px solid var(--farbe-primaer);
        border-radius: var(--radius-mittel);
        box-shadow: var(--schatten-klein);
        padding: 12px;
        cursor: pointer;
    }

    .urlaub-karte:active {
        background: #f0f4ff;
    }

    .urlaub-karte.typ-urlaub        { border-left-color: #3b82f6; }
    .urlaub-karte.typ-krank         { border-left-color: #ef4444; }
    .urlaub-karte.typ-sonderurlaub  { border-left-color: #f97316; }
    .urlaub-karte.typ-feiertag      { border-left-color: #16a34a; }
    .urlaub-karte.typ-ferien_bayern { border-left-color: #34d399; }
    .urlaub-karte.typ-ferien_bw     { border-left-color: #facc15; }

    .urlaub-karte-info {
        flex: 1;
        min-width: 0;
    }

    .urlaub-karte-titel {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--farbe-text);
        margin-bottom: 0.2rem;
    }

    .urlaub-karte-zeitraum {
        font-size: 0.78rem;
        color: var(--farbe-text-schwach);
    }

    .urlaub-karte-typ {
        display: inline-block;
        margin-top: 0.3rem;
        padding: 1px 8px;
        border-radius: 9999px;
        font-size: 0.68rem;
        font-weight: 600;
        color: #fff;
    }

    .urlaub-karte-typ.urlaub        { background: #3b82f6; }
    .urlaub-karte-typ.krank         { background: #ef4444; }
    .urlaub-karte-typ.sonderurlaub  { background: #f97316; }
    .urlaub-karte-typ.feiertag      { background: #16a34a; }
    .urlaub-karte-typ.ferien_bayern { background: #34d399; }
    .urlaub-karte-typ.ferien_bw     { background: #facc15; color: #1f1f1f; }

    /* ============================================================
       PROJEKTSTATUS: Karten-Liste
       ============================================================ */
    .projekte-karten-liste {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .projekt-status-karte {
        display: block;
        background: var(--farbe-weiss);
        border: 1px solid var(--farbe-rahmen);
        border-left: 4px solid var(--farbe-primaer);
        border-radius: var(--radius-mittel);
        box-shadow: var(--schatten-klein);
        padding: 12px;
        text-decoration: none;
        color: var(--farbe-text);
        cursor: pointer;
    }

    .projekt-status-karte:active {
        background: #f0f4ff;
    }

    .projekt-status-karte-kunde {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--farbe-text);
        margin-bottom: 0.2rem;
    }

    .projekt-status-karte-projekt {
        font-size: 0.82rem;
        color: var(--farbe-text-schwach);
        margin-bottom: 0.4rem;
    }

    .projekt-status-karte-status {
        display: inline-block;
        padding: 0.25rem 0.6rem;
        border-radius: var(--radius-klein);
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        background: #f3f4f6;
        color: #374151;
    }

    .projekt-status-karte-meta {
        font-size: 0.75rem;
        color: var(--farbe-text-schwach);
        line-height: 1.4;
    }

    .projekt-status-karte-meta-zeile {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.15rem 0;
    }

    .projekt-status-karte-meta-label {
        font-weight: 500;
        color: var(--farbe-text-schwach);
    }

    .projekt-status-karte-meta-wert {
        color: var(--farbe-text);
        text-align: right;
    }

    /* Projektstatus: 2-Spalten-Grid → 1 Spalte */
    .mobile-projektstatus-seite .ps-grid {
        display: block !important;
    }

    .mobile-projektstatus-seite .status-filter-sidebar {
        position: static !important;
        max-height: 240px !important;
        margin-bottom: 0.5rem;
    }

    /* Tabelle in projektstatus auf Mobile verstecken (Karten ersetzen) */
    .mobile-projektstatus-seite #projekteTabelle .tabelle-container {
        display: none !important;
    }

    /* ============================================================
       ADMIN: nur Passwort-Tab zeigen (andere erfordern Desktop)
       ============================================================ */
    #tab-btn-benutzer,
    #tab-btn-import,
    #tab-btn-rollen {
        display: none !important;
    }

    #tab-inhalt-benutzer,
    #tab-inhalt-import,
    #tab-inhalt-rollen {
        display: none !important;
    }

    #tab-inhalt-passwort {
        display: block !important;
    }

    .mobile-admin-hinweis {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        border-radius: var(--radius-klein);
        padding: 0.6rem 0.8rem;
        font-size: 0.78rem;
        color: #9a3412;
        margin-bottom: 0.75rem;
    }
}

/* Mobile-Admin-Hinweis auf Desktop verstecken */
.mobile-admin-hinweis {
    display: none;
}
@media (max-width: 768px) {
    .mobile-admin-hinweis {
        display: block;
    }
}

/* ============================================================
   Desktop (>= 769px): Bottom-Nav versteckt, alles wie bisher
   ============================================================ */
@media (min-width: 769px) {
    .bottom-nav,
    .mehr-panel-overlay {
        display: none !important;
    }
}