/* ============================================
   theme-mobile.css — Mobile/Touch-Polish für digitalk24
   PWA, Smartphone-Hauptzielgerät (320–480 px)
   Brand-Gold: #c9a84c / #e5c666 / #0a0a0a
   Datum: 2026-05-06
   ============================================ */

/* ---------- Globale Touch-Basics ---------- */
html {
    /* iOS-Safari: 100dvh statt 100vh in Containern, die volle Höhe brauchen */
    -webkit-text-size-adjust: 100%;
}
body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior-y: contain;
}

/* iOS PWA Safe-Area: Header schiebt unter die Statusbar */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Touch-Geräte: hover-only-Effekte deaktivieren, Tap-Targets vergrößern */
@media (pointer: coarse) {
    .dk24-drag-handle,
    .dk24-widget-handle {
        opacity: 1 !important;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
    }
    /* Hover-States, die Inhalte einblenden, durchgehend zeigen */
    .cat-item .cat-actions { display: flex !important; }
    /* Keine Translate-Y-Hover-Animationen — fühlt sich auf Touch komisch an */
    .file-card:hover,
    .stat-card:hover,
    .btn:hover,
    .tab-button:hover,
    .upload-area:hover,
    .ach-card:hover,
    .lp-reactions button:hover {
        transform: none !important;
    }
}

/* iOS-Form-Zoom verhindern: alle Inputs >= 16px */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Scroll-Container brauchen weiches Touch-Scrolling */
.tab-buttons,
.settings-subnav,
.dk24-bottom-sheet-content,
[class*="scroll"],
.modal,
.modal-content {
    -webkit-overflow-scrolling: touch;
}

/* ---------- Dashboard: Header umbruch + safe-area ---------- */
@media (max-width: 768px) {
    .container { padding: 12px !important; }
    .header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .logo { flex: 1 1 auto; min-width: 0; }
    .logo h1 { font-size: 1.15rem !important; }
    .logo p { font-size: 0.7rem !important; }
    .user-info {
        flex-wrap: wrap;
        gap: 8px !important;
        font-size: 0.78rem;
        justify-content: flex-end;
    }
    .user-info #userName {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .help-videos-link { padding: 6px 10px !important; font-size: 0.75rem !important; }
    .trophy-btn { padding: 6px 10px !important; font-size: 0.78rem !important; }
    .theme-toggle { width: 36px !important; height: 36px !important; font-size: 0.95rem !important; }
    .logout-btn { padding: 6px 12px !important; font-size: 0.75rem !important; }
}

@media (max-width: 480px) {
    .container { padding: 8px !important; }
    .logo h1 { font-size: 1rem !important; }
    .logo p { display: none; }
    .help-videos-link span,
    .help-videos-link::after { } /* Platzhalter */
}

/* ---------- Tab-Bar: horizontaler Scroll mit Snap ---------- */
@media (max-width: 768px) {
    .tabs { padding: 6px !important; }
    .tab-buttons {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .tab-button {
        flex: 0 0 auto !important;
        white-space: nowrap;
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        scroll-snap-align: start;
        min-height: 44px;
    }
    .tab-content { padding: 14px 10px !important; }
}

/* ---------- Floating Action Button: Toolbar zu FAB+Sheet (Mobile + Desktop) ----- */
/* Auf ALLEN Geraeten ist die Toolbar default eingeklappt: nur der FAB-Toggle (+)
   und ggf. die erste Aktion sichtbar. Klick auf + klappt die restlichen Buttons aus. */
#dk24F7Toolbar > button.dk24-fab-action {
    min-width: 44px;
    min-height: 36px;
}
#dk24F7Toolbar:not(.dk24-fab-open) > button.dk24-fab-action {
    opacity: 0;
    transform: translateY(12px) scale(0.7);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}
#dk24F7Toolbar.dk24-fab-open > button.dk24-fab-action {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    max-height: 60px;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.dk24-fab-toggle {
    background: linear-gradient(135deg,#c9a84c,#e5c666) !important;
    border: none !important;
    color: #0a0a0a !important;
    width: 52px;
    height: 52px;
    border-radius: 50% !important;
    font-size: 22px !important;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(201,168,76,.45) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s ease;
    position: relative;
}
.dk24-fab-toggle::after {
    content: 'Klick für Aktionen';
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f0f10;
    color: #e5c666;
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid #c9a84c66;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
#dk24F7Toolbar:not(.dk24-fab-open) .dk24-fab-toggle:hover::after { opacity: 1; }
#dk24F7Toolbar.dk24-fab-open .dk24-fab-toggle { transform: rotate(45deg); }
@media (max-width: 768px) {
    #dk24F7Toolbar {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
        gap: 10px !important;
    }
    .dk24-fab-toggle { width: 56px; height: 56px; }
}

/* ---------- Stats-Cards: 2x2 statt 4er-Grid ---------- */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .stat-card { padding: 14px 12px !important; }
    .stat-number { font-size: 1.4rem !important; }
    .stat-label { font-size: 0.75rem !important; }
}
@media (max-width: 360px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* ---------- File-Cards: Padding, Buttons full-width auf schmalen Screens ---------- */
@media (max-width: 768px) {
    .files-grid,
    .collections-grid,
    #landingPagesList,
    #mediaLibrary,
    #abTestsList {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    .file-card {
        padding: 14px !important;
    }
    .file-card .file-actions,
    .file-card .collection-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .file-card .file-actions .btn,
    .file-card .collection-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 40px;
        font-size: 0.8rem;
        padding: 8px 10px !important;
        text-align: center;
        justify-content: center;
    }
    .file-card .dk24-menu-trigger {
        min-width: 44px !important;
        min-height: 36px !important;
    }
    /* Drag-Handle größer und immer sichtbar auf Touch */
    .dk24-drag-handle {
        opacity: 1 !important;
        font-size: 18px;
    }
}

/* ---------- Drei-Punkte-Aktionen-Popover als Bottom-Sheet ---------- */
@media (max-width: 600px) {
    /* Vollflächiger Backdrop hinter dem Sheet — verhindert "durchschimmern" */
    .dk24-menu.dk24-menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 9998;
        animation: dk24FadeIn 0.18s ease;
    }
    .dk24-menu.dk24-menu-open .dk24-menu-popover {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        border-radius: 16px !important;
        padding: 10px !important;
        z-index: 10000 !important;
        /* Vollständig deckender Hintergrund (kein rgba mit Alpha!) */
        background: #161616 !important;
        border: 1px solid rgba(201,168,76,0.28) !important;
        animation: dk24SheetUp 0.22s cubic-bezier(0.16,1,0.3,1);
        box-shadow: 0 -14px 60px rgba(0,0,0,0.85), 0 0 0 1px rgba(201,168,76,0.3) !important;
    }
    .dk24-menu-item {
        padding: 14px 14px !important;
        font-size: 1rem !important;
        min-height: 44px;
        color: #f5f5f0 !important;
    }
}
@keyframes dk24FadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes dk24SheetUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ---------- Stats-Modal: Tabelle wird zu Card-Liste ---------- */
@media (max-width: 600px) {
    #landingStatsModal .modal-content,
    #landingStatsModal > div {
        margin: 12px !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }
    #landingStatsModal table {
        display: block;
    }
    #landingStatsModal table thead { display: none; }
    #landingStatsModal table tbody,
    #landingStatsModal table tr {
        display: block;
        width: 100%;
    }
    #landingStatsModal table tr {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 10px;
    }
    #landingStatsModal table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0 !important;
        border: none !important;
        font-size: 0.88rem;
    }
    #landingStatsModal table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-weight: 600;
        flex: 0 0 auto;
    }
}

/* ---------- A/B-Test-Karten: Variant-Tabelle als Karten ---------- */
@media (max-width: 600px) {
    .ab-variant-table,
    table.dk24-variants {
        display: block;
    }
    .ab-variant-table thead,
    table.dk24-variants thead { display: none; }
    .ab-variant-table tr,
    table.dk24-variants tr {
        display: block;
        background: var(--bg-card);
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 8px;
        border: 1px solid var(--border);
    }
    .ab-variant-table td,
    table.dk24-variants td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0 !important;
        border: none !important;
    }
}

/* ---------- Settings-Sub-Nav: bereits vorhanden, Tap-Target-Polish ---------- */
@media (max-width: 900px) {
    .settings-subnav button {
        min-height: 44px;
    }
}

/* ---------- Modals generell: kein Bildschirm-Überlauf ---------- */
@media (max-width: 768px) {
    .modal,
    .ach-modal {
        max-height: calc(100dvh - 24px) !important;
    }
    .modal-content,
    .ach-modal-content {
        max-height: calc(100dvh - 48px) !important;
        overflow-y: auto;
    }
    .ach-grid {
        grid-template-columns: 1fr 1fr !important;
        padding: 14px !important;
    }
}
@media (max-width: 380px) {
    .ach-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Globale Suche / Cmd+K Modal ---------- */
@media (max-width: 600px) {
    #dk24SearchModal,
    .dk24-search-modal {
        padding: 10px !important;
    }
    #dk24SearchModal .modal,
    .dk24-search-modal .modal {
        max-width: calc(100vw - 20px) !important;
    }
}

/* ---------- Builder: 16px-Inputs sind oben schon, FAB-Save-Buttons groß genug ---------- */
@media (max-width: 768px) {
    .editor-panel input,
    .editor-panel textarea,
    .editor-panel select {
        font-size: 16px !important;
    }
    .action-buttons {
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .action-buttons .btn { min-height: 44px; }
    /* Akkordeon-Toggle-Header größer */
    .editor-section h3,
    .accordion-toggle,
    [data-accordion-toggle] {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ---------- Builder: Editor/Vorschau-Toggle (mobil-only) ---------- */
.dk24-builder-mobile-toggle { display: none; }
@media (max-width: 768px) {
    .dk24-builder-mobile-toggle {
        display: flex;
        position: fixed;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        background: var(--bg-card, #141414);
        border: 1px solid var(--accent, #c9a84c);
        border-radius: 50px;
        padding: 4px;
        gap: 2px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    }
    .dk24-builder-mobile-toggle button {
        background: transparent;
        border: none;
        color: var(--text-muted, #aaa);
        padding: 8px 18px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        font-family: var(--font);
        min-height: 36px;
    }
    .dk24-builder-mobile-toggle button.active {
        background: linear-gradient(135deg,#c9a84c,#e5c666);
        color: #0a0a0a;
    }
    /* Wenn Toggle aktiv: nur eine Seite zeigen */
    .builder-container.dk24-show-editor .preview-panel { display: none !important; }
    .builder-container.dk24-show-preview .editor-panel { display: none !important; }
    .builder-container.dk24-show-preview .preview-panel {
        height: auto !important;
        min-height: calc(100dvh - 110px) !important;
        order: 1 !important;
    }
}

/* ---------- Single-Landing: Reaktions-Buttons + Antwort-Tab ---------- */
@media (max-width: 600px) {
    .lp-reactions {
        flex-wrap: wrap;
        gap: 8px !important;
        justify-content: center;
    }
    .lp-reactions button {
        min-width: 64px !important;
        min-height: 64px !important;
        padding: 12px 14px !important;
        font-size: 0.85rem;
    }
    .lp-reactions .emoji { font-size: 1.6rem !important; }
}

/* Antwort-Lasche am Rand: auf Mobile als Bottom-Sheet, default eingefahren.
   Container ist nur 48px hoch (= Lasche), expandiert via max-height beim
   Klick auf die Lasche. Kein transform-Trick mehr, der die Lasche aus dem
   Viewport schob. Klasse .dk24-response-open wird vom JS-Toggle gesetzt. */
@media (max-width: 768px) {
    #response-tab-container {
        position: fixed !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        flex-direction: column !important;
        border-radius: 16px 16px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow: hidden !important;
        transition: max-height 0.32s cubic-bezier(0.16,1,0.3,1) !important;
        z-index: 9000 !important;
    }
    #response-tab-container.dk24-response-open {
        max-height: 85dvh !important;
    }
    #response-tab-trigger {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 14px !important;
        min-height: 48px;
        flex-shrink: 0;
    }
    .response-widget {
        width: 100% !important;
        max-height: calc(85dvh - 48px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 !important;
    }
    #response-tab-content {
        max-height: calc(70dvh - 60px) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Wavesurfer / Audio-Player auf voller Breite */
@media (max-width: 600px) {
    .wavesurfer,
    [id^="waveform"],
    audio {
        width: 100% !important;
    }
    .play-button,
    [class*="play-btn"] {
        min-width: 48px;
        min-height: 48px;
    }
}

/* ---------- Long-Press-Reorder-Hint (für Sortable-Touch) ---------- */
.dk24-reorder-mode .dk24-drag-handle {
    background: rgba(201,168,76,0.18) !important;
    color: #e5c666 !important;
    animation: dk24Wiggle 0.4s ease-in-out infinite alternate;
}
@keyframes dk24Wiggle {
    from { transform: rotate(-2deg); }
    to   { transform: rotate(2deg); }
}

/* ---------- 100dvh-Fix: Safari altes Verhalten ---------- */
@supports (height: 100dvh) {
    .builder-container { min-height: 100dvh !important; }
}

/* ============================================================
   FIX-PASS 2026-05-06 — Hamburger, Kategorie-Pills,
   horizontaler Overflow-Schutz, A/B-Cards, Settings-Stack
   ============================================================ */

/* ---------- Globaler Overflow-X-Schutz auf Mobile ---------- */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    html { overscroll-behavior-x: none; }
    /* Container nie breiter als Viewport */
    .container,
    .tab-content,
    .tab-panel,
    main,
    .main-content {
        max-width: 100vw !important;
        overflow-x: hidden;
    }
    /* Tabellen ohne Mobile-Layout dürfen scrollen, aber NICHT die Seite */
    .tab-panel table { max-width: 100%; }
    /* Bilder/Videos nie über Viewport */
    img, video, iframe { max-width: 100%; height: auto; }
}

/* ---------- Tab-Bar wird zu Hamburger-Drawer ---------- */
@media (max-width: 768px) {
    /* Original-Tab-Bar verstecken, Hamburger-Trigger zeigt die aktive Tab */
    .tabs > .tab-buttons {
        display: none !important;
    }
    /* Sticky-Bar mit Hamburger + Aktiv-Tab-Label */
    .dk24-mob-tabbar {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--bg-card, #141414);
        border: 1px solid var(--border, rgba(255,255,255,0.08));
        border-radius: 12px;
        margin-bottom: 14px;
        position: sticky;
        top: 4px;
        z-index: 50;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .dk24-mob-tabbar-burger {
        width: 44px;
        height: 44px;
        min-width: 44px;
        background: linear-gradient(135deg, #c9a84c, #e5c666);
        border: none;
        border-radius: 10px;
        color: #0a0a0a;
        font-size: 1.4rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(201,168,76,0.3);
    }
    .dk24-mob-tabbar-current {
        flex: 1;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-bright, #f5f5f0);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Drawer-Overlay */
    .dk24-mob-drawer-backdrop {
        position: fixed !important;
        inset: 0;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(2px);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }
    .dk24-mob-drawer-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
    .dk24-mob-drawer {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(82vw, 320px);
        background: var(--bg-card, #0f0f0f);
        border-right: 1px solid rgba(201,168,76,0.25);
        z-index: 9999;
        transform: translateX(-105%);
        transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
        display: flex;
        flex-direction: column;
        padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 calc(env(safe-area-inset-bottom, 0px) + 14px);
        box-shadow: 6px 0 32px rgba(0,0,0,0.5);
    }
    .dk24-mob-drawer.open { transform: translateX(0); }
    .dk24-mob-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 16px 16px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 8px;
    }
    .dk24-mob-drawer-title {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
        font-weight: 700;
    }
    .dk24-mob-drawer-close {
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 1.4rem;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    .dk24-mob-drawer-list {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 8px;
    }
    .dk24-mob-drawer-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 12px 14px;
        background: transparent;
        border: none;
        border-left: 3px solid transparent;
        border-radius: 10px;
        color: var(--text);
        font-size: 1rem;
        font-family: var(--font);
        text-align: left;
        cursor: pointer;
        margin-bottom: 2px;
    }
    .dk24-mob-drawer-item:active { background: rgba(201,168,76,0.08); }
    .dk24-mob-drawer-item.active {
        background: linear-gradient(90deg, rgba(201,168,76,0.18), rgba(229,198,102,0.04));
        border-left-color: #c9a84c;
        color: #e5c666;
        font-weight: 700;
    }
}
/* Hamburger-Bar + Drawer NUR auf Mobile rendern. Desktop muss diese Elemente
   komplett verstecken, sonst rendert der Drawer ohne Position-Fixed inline am
   Seitenende und produziert ein "Bereiche"-Banner unten links. */
.dk24-mob-tabbar,
.dk24-mob-drawer,
.dk24-mob-drawer-backdrop { display: none; }
@media (max-width: 768px) {
    .dk24-mob-tabbar { display: flex; }
    .dk24-mob-drawer,
    .dk24-mob-drawer-backdrop { display: block; }
}

/* ---------- Landing-Pages: Kategorien als Pill-Strip ---------- */
@media (max-width: 768px) {
    /* Wrapper-Flex umbrechen: Sidebar oben, Liste darunter */
    #landingpages > div[style*="display:flex"][style*="align-items:flex-start"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    #categorySidebar {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        flex-shrink: 1 !important;
    }
    /* Header-Zeile (Kategorien + Neu) */
    #categorySidebar > div:first-child {
        margin-bottom: 6px !important;
    }
    /* Cat-Tree wird horizontaler Scroll-Pill-Strip */
    #categoryTree {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }
    #categoryTree::-webkit-scrollbar { height: 4px; }
    #categoryTree::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
    #categoryTree .cat-item {
        flex: 0 0 auto !important;
        white-space: nowrap;
        padding: 8px 14px !important;
        margin: 0 !important;
        border: 1px solid var(--border);
        background: var(--bg-card);
        scroll-snap-align: start;
        font-size: 0.82rem;
        min-height: 38px;
    }
    #categoryTree .cat-item.active {
        border-color: #c9a84c;
        background: linear-gradient(135deg, #c9a84c, #e5c666);
        color: #0a0a0a !important;
    }
    #categoryTree .cat-item.active .cat-count {
        background: rgba(0,0,0,0.18);
        color: #0a0a0a;
    }
    /* Sub-Kategorien-Tree auf Mobile inline statt vertikal eingerueckt */
    #categoryTree .cat-children {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    /* Cat-actions (Edit/Delete) verstecken auf Mobile, Desktop hat Hover */
    #categoryTree .cat-actions { display: none !important; }
    #categoryTree .cat-toggle { display: none !important; }
    /* LP-Liste full-width */
    #landingpages > div[style*="display:flex"] > div[style*="flex:1"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ---------- A/B-Tests-Tab: Tabelle als Karten ---------- */
@media (max-width: 768px) {
    /* Inline-Style "min-width:640px" überschreiben via Selektor */
    #abTestsList table {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
        border-collapse: collapse;
    }
    #abTestsList table thead { display: none !important; }
    #abTestsList table tbody { display: block !important; }
    #abTestsList table tr {
        display: block !important;
        background: rgba(255,255,255,0.03);
        border: 1px solid var(--border) !important;
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    #abTestsList table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 12px;
        padding: 6px 0 !important;
        border: none !important;
        text-align: left !important;
        font-size: 0.88rem;
    }
    #abTestsList table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex: 0 0 auto;
    }
    #abTestsList table td:empty { display: none !important; }
    /* Scroll-Wrapper hat overflow:auto, das verhindert Card-Look. Resetten */
    #abTestsList > div > div[style*="overflow:auto"],
    #abTestsList div[style*="overflow:auto"] {
        overflow: visible !important;
    }
    /* Test-URL-Block: nicht überlaufen lassen */
    #abTestsList a[href^="http"] {
        word-break: break-all;
        font-size: 0.78rem;
    }
}

/* ---------- Settings-Tab: vertikal gestapelt, keine Sub-Nav ---------- */
@media (max-width: 768px) {
    .settings-shell {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    /* Sub-Nav komplett verstecken — User scrollt einfach durch alle Sections */
    .settings-subnav {
        display: none !important;
    }
    /* Alle Settings-Cards sichtbar machen, JS-display:none überschreiben */
    .settings-card {
        display: block !important;
        padding: 16px 14px !important;
    }
    /* Sticky-Section-Header für Orientierung beim Scrollen */
    .settings-card > h2,
    .settings-card > h3:first-child {
        position: sticky;
        top: 0;
        background: var(--bg-card);
        margin: -16px -14px 12px;
        padding: 12px 14px;
        z-index: 2;
        border-bottom: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
    }
}

/* ---------- FAB-Toolbar nicht mit Hamburger kollidieren lassen ---------- */
/* (Hamburger oben links, FAB unten rechts — keine Kollision) */