/* ============================================================================
   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)
   Alle interaktiven Elemente erhalten auf Touch-Geräten mindestens
   44×44 CSS-Pixel — essentiell für Barrierefreiheit & Mobile UX.
   Ausnahme: Inline-Links im Fließtext (z.B. Artikel-Body, Kommentare).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px),
       (pointer: coarse) {
    .cms-module-box a:not(.article-body a, .rss_content_text a, .md-comment-body a),
    .cms-module-box button,
    .cms-module-box .btn,
    .cms-module-box .rss-share-btn,
    .cms-module-box .rss-social-follow-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Kleine Badge-Links duerfen als inline-flex behandelt werden,
       aber ihre Padding-Integritaet behalten. */
    .cms-module-box .badge[href] {
        min-height: auto;
        min-width: auto;
    }
    /* Inline-Links im Fließtext NICHT zwingen — brechen sonst den Lesefluss. */
    .cms-module-box .article-body a,
    .cms-module-box .rss_content_text a,
    .cms-module-box .md-comment-body a {
        min-height: auto;
        min-width: auto;
        display: inline;
    }
}

/* --------------------------------------------------------------------------
   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. */