/* Serveflow MenuCard Premium Final v33
   Ziel:
   - Handy-Menü wieder kompakt
   - keine Glow-/Verlauf-Übertreibung
   - keine doppelten Rahmen hinter Unterkategorien
   - keine doppelten Footer-/Banner-Rahmen
   - Table/QR nutzt denselben Look wie MenuCard
*/

html,
body.sfm-body,
.sfm-body {
    background: #050814 !important;
    background-image: none !important;
    color: #f7fbff !important;
}

.sfm-body *,
.sfm-body *::before,
.sfm-body *::after {
    text-shadow: none !important;
}

/* App-Shell wieder wie Handy-Menü, nicht Desktop-Karte */
.sfm-body .sfm-page {
    background: transparent !important;
    background-image: none !important;
}

.sfm-body .sfm-shell,
.sfm-body .sfm-premium-footer-v56 {
    width: min(430px, calc(100vw - 26px)) !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.sfm-body .sfm-shell {
    padding: 34px 0 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Header */
.sfm-body .sfm-header {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(150, 175, 210, .18) !important;
    box-shadow: none !important;
    padding: 0 0 28px !important;
    margin: 0 0 16px !important;
}

.sfm-body .sfm-brand,
.sfm-body .sfm-brand-logo,
.sfm-body .sfm-brand img {
    filter: none !important;
}

/* Oberkategorien: KEIN Balken/Wrapper dahinter */
.sfm-body .sfm-tabs,
.sfm-body nav.sfm-tabs,
.sfm-body .sfm-tabbar,
.sfm-body .sfm-categories {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    border-radius: 0 !important;
}

.sfm-body .sfm-tabs::before,
.sfm-body .sfm-tabs::after,
.sfm-body .sfm-tabbar::before,
.sfm-body .sfm-tabbar::after {
    display: none !important;
    content: none !important;
}

.sfm-body .sfm-tab {
    min-height: 36px !important;
    padding: 9px 17px !important;
    border-radius: 999px !important;
    background: #0b1425 !important;
    background-image: none !important;
    border: 1px solid #223552 !important;
    box-shadow: none !important;
    color: #eef6ff !important;
    font-weight: 900 !important;
}

.sfm-body .sfm-tab.is-active,
.sfm-body .sfm-tab[aria-current="true"] {
    background: #5ce7ef !important;
    border-color: #5ce7ef !important;
    color: #061019 !important;
}

/* Hauptkategorie-Box */
.sfm-body .sfm-titlebox,
.sfm-body .sfm-category-box {
    background: #0d1627 !important;
    background-image: none !important;
    border: 1px solid #243651 !important;
    border-radius: 17px !important;
    box-shadow: none !important;
    padding: 16px 18px !important;
    margin: 0 0 14px !important;
}

.sfm-body .sfm-titlebox h1,
.sfm-body .sfm-titlebox h2,
.sfm-body .sfm-category-box h1,
.sfm-body .sfm-category-box h2 {
    color: #ffffff !important;
}

/* Unterkategorie-Wrapper darf KEIN eigener Card-Rahmen sein */
.sfm-body .sfm-section {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    border-radius: 0 !important;
}

.sfm-body .sfm-section-title-wrap,
.sfm-body .sfm-section-head,
.sfm-body .sfm-section-kicker,
.sfm-body .sfm-row-section-title,
.sfm-body .sfm-subcategory-title,
.sfm-body .sfm-subcategory-name,
.sfm-body .sfm-group-title,
.sfm-body [class*="subcategory"],
.sfm-body [class*="section-title"] {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.sfm-body .sfm-section-title,
.sfm-body .sfm-section-kicker,
.sfm-body .sfm-row-section-title,
.sfm-body .sfm-subcategory-title,
.sfm-body .sfm-subcategory-name,
.sfm-body .sfm-group-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #66eff6 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .24em !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.sfm-body .sfm-section-title::before,
.sfm-body .sfm-subcategory-title::before,
.sfm-body .sfm-subcategory-name::before,
.sfm-body .sfm-group-title::before,
.sfm-body .sfm-kicker::before,
.sfm-body .sfm-row-section-title::before,
.sfm-body .sfm-dot,
.sfm-body .sfm-section-dot,
.sfm-body .sfm-category-dot {
    background: #5ce7ef !important;
    border-color: #5ce7ef !important;
    color: #5ce7ef !important;
    box-shadow: none !important;
}

/* Produktkarte nur EIN Rahmen */
.sfm-body .sfm-card,
.sfm-body .sfm-product-card {
    background: #0a1323 !important;
    background-image: none !important;
    border: 1px solid #20334f !important;
    border-radius: 17px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin: 0 0 18px !important;
}

.sfm-body .sfm-row {
    background: #0b1424 !important;
    background-image: none !important;
    border-color: #1b2b43 !important;
    box-shadow: none !important;
    padding: 14px 15px !important;
}

.sfm-body .sfm-row:hover {
    background: #0e192b !important;
}

.sfm-body .sfm-row-name,
.sfm-body .sfm-product-title {
    color: #ffffff !important;
    font-weight: 950 !important;
}

.sfm-body .sfm-row-desc,
.sfm-body .sfm-product-description,
.sfm-body .sfm-muted {
    color: #c8d6e8 !important;
}

.sfm-body .sfm-price,
.sfm-body .sfm-price-pill {
    background: #101f31 !important;
    border: 1px solid #31506a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.sfm-body .sfm-add,
.sfm-body .sfm-add-button,
.sfm-body .sfm-button,
.sfm-body button.sfm-add {
    background: #5ce7ef !important;
    border: 1px solid #5ce7ef !important;
    color: #061019 !important;
    box-shadow: none !important;
    font-weight: 950 !important;
}

.sfm-body .sfm-badges span,
.sfm-body .sfm-badge,
.sfm-body .sfm-product-badge,
.sfm-body .sfm-allergen,
.sfm-body .sfm-allergen-badge,
.sfm-body .sfm-code-badge,
.sfm-body .sfm-row-code,
.sfm-body .sfm-pill {
    background: #10263a !important;
    border: 1px solid #315b75 !important;
    color: #8ff4ff !important;
    box-shadow: none !important;
}

/* Footer komplett entblocken */
.sfm-body .sfm-premium-footer-v56 {
    margin-top: 28px !important;
    padding: 0 0 30px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.sfm-body .sfm-v56-divider,
.sfm-body .sfm-v56-section::before,
.sfm-body .sfm-v56-section::after,
.sfm-body .sfm-v56-banners::before,
.sfm-body .sfm-v56-banners::after {
    display: none !important;
    content: none !important;
}

.sfm-body .sfm-v56-section {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 22px !important;
}

/* Folge uns */
.sfm-body .sfm-v56-follow {
    text-align: center !important;
    margin-top: 4px !important;
}

.sfm-body .sfm-v56-kicker,
.sfm-body .sfm-footer-follow-title,
.sfm-body .sfm-v56-follow-title {
    color: #dbe7f7 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .25em !important;
    margin-bottom: 14px !important;
}

.sfm-body .sfm-v56-socials {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
}

.sfm-body .sfm-v56-social,
.sfm-body .sfm-v56-social a,
.sfm-body .sfm-footer-social,
.sfm-body .sfm-footer-social a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: #101b2d !important;
    background-image: none !important;
    border: 1px solid #2b405f !important;
    color: #f6fbff !important;
    box-shadow: none !important;
}

/* App/WLAN */
.sfm-body .sfm-v56-install,
.sfm-body .sfm-footer-install,
.sfm-body .sfm-install-button {
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 16px !important;
    background: #5ce7ef !important;
    background-image: none !important;
    border: 1px solid #5ce7ef !important;
    color: #061019 !important;
    box-shadow: none !important;
    font-weight: 950 !important;
}

.sfm-body .sfm-v56-pill,
.sfm-body .sfm-footer-info-button,
.sfm-body .sfm-info-pill,
.sfm-body .sfm-info-button {
    min-height: 52px !important;
    border-radius: 15px !important;
    background: #0d1728 !important;
    background-image: none !important;
    border: 1px solid #2a3e5f !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Serveflow Footer Card: kleiner, feiner */
.sfm-body .sfm-v56-brand,
.sfm-body .sfm-footer-brand,
.sfm-body .sfm-powered-card,
.sfm-body .sfm-serveflow-card {
    background: #08111f !important;
    background-image: none !important;
    border: 1px solid #20334f !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: 22px 20px !important;
    color: #ffffff !important;
}

.sfm-body .sfm-v56-brand-logo {
    margin-bottom: 16px !important;
}

.sfm-body .sfm-v56-powered {
    margin: 0 0 16px !important;
    color: #ffffff !important;
}

.sfm-body .sfm-v56-brand-links {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 22px !important;
    margin: 0 !important;
}

.sfm-body .sfm-v56-brand-link,
.sfm-body .sfm-social-link,
.sfm-body .sfm-social-icon {
    display: grid !important;
    place-items: center !important;
    gap: 8px !important;
    min-width: 54px !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf4ff !important;
}

.sfm-body .sfm-v56-brand-link svg,
.sfm-body .sfm-v56-brand-link i {
    width: 40px !important;
    height: 40px !important;
    padding: 10px !important;
    border-radius: 999px !important;
    background: #101b2d !important;
    border: 1px solid #2b405f !important;
    color: #eaf4ff !important;
    box-sizing: border-box !important;
}

.sfm-body .sfm-v56-brand-link small {
    color: #dbe7f7 !important;
    letter-spacing: .08em !important;
    margin-top: 2px !important;
}

/* Banner: keine doppelten Rahmen, Bild soll selbst wirken */
.sfm-body .sfm-v56-banners {
    display: grid !important;
    gap: 14px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sfm-body .sfm-v56-banner,
.sfm-body .sfm-banner,
.sfm-body .sfm-footer-banner,
.sfm-body .sfm-ad-banner {
    display: block !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sfm-body .sfm-v56-banner a,
.sfm-body .sfm-banner a,
.sfm-body .sfm-footer-banner a,
.sfm-body .sfm-ad-banner a {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.sfm-body .sfm-v56-banner img,
.sfm-body .sfm-banner img,
.sfm-body .sfm-footer-banner img,
.sfm-body .sfm-ad-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    border: 1px solid rgba(115, 145, 190, .22) !important;
    box-shadow: none !important;
}

/* Legal */
.sfm-body .sfm-v56-legal,
.sfm-body .sfm-footer-legal {
    color: #b9c9dd !important;
    text-align: center !important;
    margin-top: 22px !important;
}

/* Artefakte / Separatoren */
.sfm-body .sfm-page > hr,
.sfm-body .sfm-shell > hr,
.sfm-body .sfm-footer-separator,
.sfm-body .sfm-menu-separator {
    display: none !important;
}

/* versehentlich sichtbare Slash-/Backslash-Artefakte nicht über CSS lösbar, werden in Blade entfernt */
@media (max-width: 520px) {
    .sfm-body .sfm-shell,
    .sfm-body .sfm-premium-footer-v56 {
        width: min(100% - 22px, 430px) !important;
    }

    .sfm-body .sfm-row {
        padding: 13px 14px !important;
    }
}