/* ============================================================================
   myDraft CMS — Mobile Module Layer (mobile.css)
   ----------------------------------------------------------------------------
   Zentrales Mobile-Stylesheet fuer ALLE Frontend-Module. Wird nach
   default.css/theme_3.css geladen und nutzt den zentralen Modul-Wrapper
   <section class="cms-module-box" data-cms-module="typ"> (inc_buildbox.php).

   Prinzipien:
   - Desktop bleibt unveraendert: Layout-Umbauten nur innerhalb von
     @media (max-width: 767.98px) / (max-width: 575.98px).
   - Guards (img/table/form) gelten global, aber ausschliesslich innerhalb
     von .cms-module-box — kein Einfluss auf Template-Chrome/ACP/E-Mails.
   - Card-Stacking fuer Daten-Tabellen nutzt data-label-Attribute, die die
     Module serverseitig ausgeben (td[data-label="Menge"] etc.).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Stufe 1 — Globale Guards (alle Viewports, nur Modul-Inhalte)
   -------------------------------------------------------------------------- */

/* Medien duerfen ihre Modul-Spalte niemals sprengen. Ausnahme: Jssor-Slides
   (u="image"), deren Groesse das Slider-JS selbst verwaltet. */
.cms-module-box img:not([u="image"]) {
    max-width: 100%;
    height: auto;
}
.cms-module-box video,
.cms-module-box iframe,
.cms-module-box embed,
.cms-module-box object {
    max-width: 100%;
}

/* Lange URLs/IDs ohne Leerzeichen duerfen nicht ueberlaufen. */
.cms-module-box {
    overflow-wrap: anywhere;
}

/* iOS: Auto-Zoom bei Fokus verhindern (Inputs < 16px zoomen sonst). */
.cms-module-box input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.cms-module-box select,
.cms-module-box textarea {
    font-size: 16px;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Stufe 1b — Tabellen-Guard (< md): breite Daten-Tabellen werden horizontal
   scrollbar statt das Layout zu sprengen. Tabellen mit der Klasse
   .cms-stack-table werden stattdessen als Karten gestapelt (siehe unten).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .cms-module-box table:not(.cms-stack-table) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cms-module-box table:not(.cms-stack-table) td,
    .cms-module-box table:not(.cms-stack-table) th {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* --------------------------------------------------------------------------
   Stufe 2 — Card-Stacking fuer Daten-Tabellen (.cms-stack-table)
   Die Module (shop_cart, portal_ordercentral, *_speisekarte) geben
   data-label-Attribute auf den <td>s aus; der <thead> wird mobil verborgen.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .cms-module-box table.cms-stack-table,
    .cms-module-box table.cms-stack-table tbody,
    .cms-module-box table.cms-stack-table tr,
    .cms-module-box table.cms-stack-table td {
        display: block;
        width: 100%;
    }
    .cms-module-box table.cms-stack-table thead {
        display: none;
    }
    .cms-module-box table.cms-stack-table tr {
        margin: 0 0 0.9rem;
        padding: 0.5rem 0.25rem;
        border: 1px solid var(--color-border, #2a3a5c);
        border-radius: 0.6rem;
        background: var(--color-surface, rgba(15, 22, 41, 0.6));
    }
    /* Summen-/Meta-Zeilen (Versand, MwSt, Gesamt) bleiben kompakt.
       Erkannt serverseitig via .cms-stack-summary ODER generisch ueber
       colspan-Zeilen (Legacy-Module ohne eigene Klasse). */
    .cms-module-box table.cms-stack-table tr.cms-stack-summary,
    .cms-module-box table.cms-stack-table tr:has(> td[colspan]) {
        border: 0;
        background: transparent;
        margin-bottom: 0;
        padding: 0.15rem 0.25rem;
    }
    .cms-module-box table.cms-stack-table td {
        border: 0;
        padding: 0.3rem 0.6rem;
        text-align: left !important;
    }
    .cms-module-box table.cms-stack-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.1rem;
        font-size: var(--font-size-xs, 0.75rem);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-muted, #cbd5e1);
    }
    /* Leere/Fuell-Zellen und reine Aktionszellen ohne Label-Inhalt weg. */
    .cms-module-box table.cms-stack-table td.cms-stack-hidden {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Stufe 2 — Modul-Pattern-Fixes via data-cms-module-Scope
   -------------------------------------------------------------------------- */

/* Jssor-Produktslider: der 5000px-Zentrier-Hack und feste 980px-Buehne
   duerfen mobil niemals ueberlaufen (das JS skaliert zusaetzlich, Stufe 3). */
.cms-module-box[data-cms-module="shop_product_slider"],
.cms-module-box[data-cms-module="portal_shop_product_slider"] {
    overflow: hidden;
}
.cms-module-box[data-cms-module="shop_product_slider"] div[style*="width: 5000px"],
.cms-module-box[data-cms-module="shop_product_slider"] div[style*="width: 5164px"],
.cms-module-box[data-cms-module="portal_shop_product_slider"] div[style*="width: 5000px"],
.cms-module-box[data-cms-module="portal_shop_product_slider"] div[style*="width: 5164px"] {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center;
}

/* Speisekarten: Browse-Tabelle (width="65%") und Page-Gadgets volle Breite. */
@media (max-width: 767.98px) {
    .cms-module-box[data-cms-module="shop_speisekarte"] table[width="65%"],
    .cms-module-box[data-cms-module="mekong_shop_speisekarte"] table[width="65%"] {
        width: 100% !important;
    }
    /* <h1> je Artikelzeile wurde zu .speisekarte-item-name (Stufe 3). */
    .cms-module-box .speisekarte-item-name {
        display: block;
        font-size: var(--font-size-lg, 1.0625rem);
        font-weight: 700;
        line-height: 1.3;
    }
}

/* Warenkorb: Checkout-Button nicht mehr floaten lassen. */
@media (max-width: 767.98px) {
    .cms-module-box[data-cms-module="shop_cart"] #shop_cart_info_button,
    .cms-module-box[data-cms-module="shop_cart"] [id^="shop_cart_info_button"] {
        float: none !important;
        width: 100%;
        margin-top: 1rem;
    }
    .cms-module-box[data-cms-module="shop_cart"] #shop_cart_info_button .btn,
    .cms-module-box[data-cms-module="shop_cart"] [id^="shop_cart_info_button"] .btn {
        width: 100%;
    }
}

/* Kategorie-Aktionsleiste (RSS-Abo/Aktualisieren): Buttons untereinander. */
@media (max-width: 575.98px) {
    .cms-module-box[data-cms-module="news_categoryview"] .rss_category[style*="float"],
    .cms-module-box[data-cms-module="rss_categoryview"] .rss_category[style*="float"] {
        float: none !important;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .cms-module-box[data-cms-module="news_categoryview"] .rss_category .button_ext,
    .cms-module-box[data-cms-module="rss_categoryview"] .rss_category .button_ext {
        display: block;
        text-align: center;
    }
}

/* Shop-Galerie-Thumbs (float:left) duerfen mobil umbrechen. */
@media (max-width: 575.98px) {
    .cms-module-box[data-cms-module="shop_item_detail"] img.shop_galery[style*="float"],
    .cms-module-box[data-cms-module="portal_shop_item_detail"] img.shop_galery[style*="float"],
    .cms-module-box[data-cms-module="shop_cart_order_buynow"] img.shop_galery[style*="float"],
    .cms-module-box[data-cms-module="shop_item_detail"] img[style*="float:left"],
    .cms-module-box[data-cms-module="portal_shop_item_detail"] img[style*="float:left"],
    .cms-module-box[data-cms-module="shop_cart_order_buynow"] img[style*="float:left"] {
        float: none !important;
        display: inline-block;
        margin: 0 0.25rem 0.25rem 0;
    }
    #shop_item_picture_main {
        width: 100% !important;
        height: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Stufe 2 — Touch-Target-Optimierung (WCAG 2.5.5 / iOS HIG)
   Interaktive Steuerelemente (Buttons, Actions, Pagings) erhalten auf Touch-
   Geräten mindestens 44×44 CSS-Pixel. Textlinks behalten ihren natürlichen
   Fluss, um Lesbarkeit und Textumbruch nicht zu zerstören.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px),
       (pointer: coarse) {
    .cms-module-box button,
    .cms-module-box .btn,
    .cms-module-box a.btn,
    .cms-module-box input[type="submit"],
    .cms-module-box input[type="button"],
    .cms-module-box .btn-touch-target,
    .cms-module-box .mobile-touch-btn,
    .cms-module-box .rss-share-btn,
    .cms-module-box .rss-social-follow-btn,
    .cms-module-box .page-link,
    .cms-module-box .pagination a,
    .cms-module-box .acp_page_navi a,
    .cms-module-box .acp_page_navi span,
    .cms-module-box .toggle-btn,
    .cms-module-box .vote-up,
    .cms-module-box .vote-down,
    .cms-module-box .bookmark-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    .cms-module-box .badge[href] {
        min-height: 32px;
        min-width: auto;
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.6rem;
    }
}

/* --------------------------------------------------------------------------
   Stufe 3 — Content-Spacing-Harmonisierung auf Mobile
   Reduziert Paddings und Margins um ~25% auf kleinen Viewports,
   sodass mehr Content "above the fold" sichtbar ist.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .cms-module-box .p-3 { padding: 0.625rem !important; }
    .cms-module-box .p-4, .cms-module-box .p-md-4 { padding: 0.75rem !important; }
    .cms-module-box .p-md-5 { padding: 0.875rem !important; }
    .cms-module-box .my-3 { margin-top: 0.625rem !important; margin-bottom: 0.625rem !important; }
    .cms-module-box .my-4 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
    .cms-module-box .mb-3 { margin-bottom: 0.625rem !important; }
    .cms-module-box .mb-4 { margin-bottom: 0.75rem !important; }
    .cms-module-box .mt-4 { margin-top: 0.75rem !important; }
    .cms-module-box .pt-3 { padding-top: 0.625rem !important; }
    .cms-module-box .pt-4 { padding-top: 0.75rem !important; }
    .cms-module-box .pb-3 { padding-bottom: 0.625rem !important; }
    .cms-module-box .gap-3 { gap: 0.625rem !important; }
}

/* --------------------------------------------------------------------------
   Stufe 4 — Typografie/Feinheiten auf kleinen Viewports
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* Uebergrosse Inline-Headlines in Modulen begrenzen. */
    .cms-module-box h1 { font-size: 1.5rem; }
    .cms-module-box h2 { font-size: 1.25rem; }
    .cms-module-box h3 { font-size: 1.1rem; }

    /* Aktions-Buttonreihen (Teilen/Kommentare/Play) sauber umbrechen. */
    .cms-module-box .d-flex.gap-2,
    .cms-module-box .d-flex.gap-3 {
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------------------
   Stufe 5 — prefers-reduced-motion Override fuer Inline-Styles
   Module wie rss_content_view haben transition in style-Attribut,
   das CSS-Regeln ueberschreibt. !important stellt Reduce-Motion sicher.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cms-module-box *[style*="transition"] {
        transition: none !important;
        animation: none !important;
    }
    .cms-module-box *[style*="transform"] {
        transform: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Stufe 6 — Loading & Feedback States
   Einheitliche Skelett- und Ladezustände für alle AJAX-getriebenen Module.
   -------------------------------------------------------------------------- */
/* Skeleton-Puls für "Mehr laden"-Container */
.cms-loading {
    position: relative;
    overflow: hidden;
}
.cms-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%
    );
    animation: cms-loading-shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes cms-loading-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Inline-Spinner für Submit-Buttons */
.btn.is-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}
.btn.is-loading::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cms-spin 0.6s linear infinite;
    vertical-align: middle;
}
@keyframes cms-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Stufe 7 — Form Validation UX
   Bootstrap-kompatible .is-invalid / .is-valid für Echtzeit-Feedback.
   -------------------------------------------------------------------------- */
.cms-module-box .is-invalid {
    border-color: var(--color-red, #ef4444) !important;
    box-shadow: 0 0 0 3px var(--color-red-dim, rgba(239, 68, 68, 0.15)) !important;
}
.cms-module-box .is-valid {
    border-color: var(--color-green, #10b981) !important;
    box-shadow: 0 0 0 3px var(--color-green-dim, rgba(16, 185, 129, 0.15)) !important;
}
.cms-module-box .invalid-feedback {
    display: none;
    color: var(--color-red, #ef4444);
    font-size: var(--font-size-xs, 0.75rem);
    margin-top: 0.25rem;
}
.cms-module-box .is-invalid ~ .invalid-feedback {
    display: block;
}

/* --------------------------------------------------------------------------
   Stufe 8 — Empty State Utility
   Einheitliche "Keine Daten"-Darstellung mit Icon, Text und optionalem CTA.
   -------------------------------------------------------------------------- */
.cms-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-lg, 0.75rem);
    background: rgba(255, 255, 255, 0.02);
    gap: 0.75rem;
}
.cms-empty-state-icon {
    font-size: 2.5rem;
    opacity: 0.6;
}
.cms-empty-state-title {
    font-size: var(--font-size-lg, 1.0625rem);
    font-weight: 700;
    color: var(--color-text-heading, #ffffff);
    margin: 0;
}
.cms-empty-state-text {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #94a3b8);
    max-width: 320px;
    line-height: 1.5;
}
.cms-empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    background: var(--color-accent-dim, rgba(245, 166, 35, 0.12));
    color: var(--color-accent, #f5a623);
    border: 1px solid var(--color-accent, #f5a623);
    text-decoration: none;
    transition: all 0.2s ease;
}
.cms-empty-state-cta:hover {
    background: var(--color-accent, #f5a623);
    color: var(--color-primary, #060a14);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Stufe 9 — Scroll-Driven Animations (Progressive Enhancement)
   Chrome 115+ / Edge 115+ unterstützt animation-timeline: scroll().
   Fade-in für Modul-Karten beim Scrollen in den Viewport.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
    .cms-module-box[data-cms-module] .rss-category-card,
    .cms-module-box[data-cms-module] .tsec-video-rec-card {
        animation: cms-scroll-fade-in both;
        animation-timeline: view();
        animation-range: entry 5% cover 30%;
    }
    @keyframes cms-scroll-fade-in {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Reduced Motion: bereits global in default.css (S6) definiert.
   Dieses Modul nutzt dieselben Werte für seine Inhalte. */

/* --------------------------------------------------------------------------
   Stufe 10 — Mobile-First Grid Stacking & Safe-Area Ergonomie
   -------------------------------------------------------------------------- */

/* Safe Area Insets für moderne Smartphones (Notch / Home-Indicator) */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 767.98px) {
        body {
            padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        }
        .iss-mobile-bottom-nav,
        .rss-mobile-sticky-dock {
            padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
        }
        .mobile-bottom-actions {
            padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
        }
    }
}

/* --------------------------------------------------------------------------
   Stufe 11 — Native Touch Ergonomie & 48x48px Touch Targets (WCAG AAA)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Touch Target Mindestgröße & Tap Highlight */
    .btn,
    .nav-link,
    .iss-mobile-bottom-nav a,
    .rss-mobile-sticky-dock a,
    .mobile-menu-trigger,
    .category-pill,
    .cms-empty-state-cta,
    button:not(.btn-close),
    input[type="button"],
    input[type="submit"] {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Haptisches Micro-Feedback bei Berührung */
    .btn:active,
    .iss-mobile-bottom-nav a:active,
    .category-pill:active,
    .cms-module-box .card:active {
        transform: scale(0.97);
        transition: transform 0.08s ease-out;
    }

    /* Zero Cumulative Layout Shift (0 CLS) Guard */
    .cms-module-box img,
    .rss-feed-image,
    .article-thumbnail {
        aspect-ratio: auto;
        content-visibility: auto;
    }

    /* Modern App-Shell Bottom Navigation Bar */
    .iss-mobile-bottom-nav,
    .rss-mobile-sticky-dock {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: auto;
        min-height: 60px;
        background: rgba(15, 23, 42, 0.88);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
        padding: 0.4rem 0.5rem;
    }

    .iss-mobile-bottom-nav .nav-item,
    .rss-mobile-sticky-dock .dock-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--color-text-muted, #94a3b8);
        text-decoration: none;
        gap: 0.2rem;
    }

    .iss-mobile-bottom-nav .nav-item.active,
    .rss-mobile-sticky-dock .dock-item.active,
    .iss-mobile-bottom-nav .nav-item:hover {
        color: var(--color-accent, #6366f1);
    }
}

/* Garantierter Mobile-First-Spaltenstapel auf Viewports unterhalb lg (< 992px) */
@media (max-width: 991.98px) {
    .cms-page-container .col-main,
    .cms-page-container .col-left,
    .cms-page-container .col-right,
    .cms-page-container .sidebar {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .cms-page-container .col-main {
        order: 1 !important;
        margin-bottom: 1.5rem;
    }
    .cms-page-container .col-left {
        order: 2 !important;
        margin-bottom: 1.5rem;
    }
    .cms-page-container .col-right {
        order: 3 !important;
        margin-bottom: 1.5rem;
    }
}

/* Karten- und Typografie-Optimierung auf kleinen Mobilgeräten (< 576px) */
@media (max-width: 575.98px) {
    .container, .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .hero-banner h1,
    .isharestuff-hero-section h1 {
        font-size: clamp(1.35rem, 0.95rem + 2.5vw, 1.85rem) !important;
    }
    .isharestuff-hero-section {
        padding: 1.25rem 0.85rem !important;
    }
    .isharestuff-card-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .rss_head_link {
        font-size: clamp(1rem, 0.9rem + 0.8vw, 1.15rem) !important;
        line-height: 1.35 !important;
    }
    .rss_head_link a {
        display: inline !important;
    }

    .rss-search-input-group {
        flex-direction: column !important;
        border-radius: 1rem !important;
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }
    .rss-search-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .rss-search-trends {
        gap: 0.35rem !important;
    }
    .rss-search-trend {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.6rem !important;
    }
    .rss-view-switcher {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
    }
}

/* --------------------------------------------------------------------------
   Stufe 12 — Globaler Zero Overflow-X Guard (Verhindert horizontales Ausbrechen)
   -------------------------------------------------------------------------- */
html, body, .cms-page-container, .container, .container-fluid, .page-wrapper {
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Stufe 13 — Smart-Sticky Header & Swipeable Category Snap Navigation
   -------------------------------------------------------------------------- */
.header, .sticky-header, header {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
.header.header-hidden, .sticky-header.header-hidden, header.header-hidden {
    transform: translateY(-100%) !important;
}

/* Horizontal Swipeable Container with Scroll-Snap */
.category-pills-nav, .rss-category-pills, .rss-search-trends, .nav-pills-scrollable {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 0.35rem !important;
    gap: 0.5rem !important;
}

.category-pills-nav::-webkit-scrollbar,
.rss-category-pills::-webkit-scrollbar,
.rss-search-trends::-webkit-scrollbar,
.nav-pills-scrollable::-webkit-scrollbar {
    display: none !important;
}

.category-pill, .rss-search-trend, .nav-pills-scrollable .nav-item {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   Stufe 14 — Mobile Bottom Navigation Dock (App-Style)
   -------------------------------------------------------------------------- */
.mobile-bottom-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: rgba(11, 15, 25, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-bottom-dock.dock-hidden {
    transform: translateY(100%) !important;
}

.mobile-bottom-dock-inner {
    height: 56px;
    padding: 0 0.5rem;
}

.mobile-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    transition: all 0.2s ease;
    padding: 4px 0;
}

.mobile-dock-item .dock-icon {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}

.mobile-dock-item .dock-label {
    line-height: 1;
    letter-spacing: -0.2px;
}

.mobile-dock-item:hover,
.mobile-dock-item.active {
    color: #38bdf8;
    text-decoration: none;
}

.mobile-dock-item.active .dock-icon {
    transform: scale(1.15);
}

/* Stacking with Sticky Audio Dock (< 992px) */
@media (max-width: 991.98px) {
    #mydraftAudioDock {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 6px !important;
    }

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
}