/* shop/public/css/mobile.css
   ---------------------------------------------------------------------------
   Zentrale Mobil-Ebene fuer den Shop. Wird als LETZTES Stylesheet geladen und
   gewinnt damit gegen die verstreuten Regeln in header.css, shop.css,
   product.css, rent.css und responsive.css.

   WICHTIG: Alles steht in Media-Queries. Eine einzige falsch gesetzte Klammer
   liess zuletzt Mobil-Regeln auf den Desktop durchschlagen.
   --------------------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL (bis 900px)
   ═══════════════════════════════════════════════════════════════════════════ */
/* iOS Safari vergroessert Text beim Drehen ins Querformat automatisch.
   Ohne diese Angabe wirkt die Seite im Querformat deutlich zu gross. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Aktive Seite im Footer kenntlich machen. Bewusst ausserhalb der
   Media-Query: gilt auch am Desktop. */
.shop-footer .footer-links a.active {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {

    /* ── 1) Nichts laeuft ueber den Rand ──────────────────────────────── */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    /* ── 2) Kopfzeile ─────────────────────────────────────────────────── */
    /* Der Header ist sticky mit z-index:1000 und bildet damit einen eigenen
       Stapelkontext: Alles darin - auch das aufgeklappte Menue - kann die
       1000 nach aussen nicht ueberschreiten und lag deshalb unter der
       Verdunkelung (1400). Header daher hoeher setzen. */
    .shop-header,
    body > header {
        z-index: 1600 !important;
    }

    .header-top {
        padding: 6px 10px !important;
        gap: .5rem;
    }

    .header-top .partner-logo img {
        max-height: 26px !important;
    }

    .header-top .logo img {
        max-height: 46px !important;
    }

    .shop-header .header-bottom,
    body > header .header-bottom {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem;
        padding: .4rem .8rem;
        position: relative;
        /* Das Menue liegt INNERHALB der Kopfzeile: deren z-index begrenzt es.
           Muss daher ueber der Verdunkelung (1400) liegen. */
        z-index: 1600;
    }

    /* Burger: war absolut positioniert und dadurch praktisch unsichtbar */
    .shop-header .menu-toggle,
    body > header .menu-toggle,
    .menu-toggle {
        display: inline-flex !important;
        position: static !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-left: auto;
        font-size: 1.0rem;
        line-height: 1;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, .12);
        background: rgba(0, 0, 0, .05);
        cursor: pointer;
    }

    /* ── 3) Navigationsmenue ──────────────────────────────────────────── */
    .shop-header nav,
    body > header nav {
        width: 100%;
        order: 10;
    }

    .nav-links {
        display: none !important;
    }

    /* Aufgeklappt: eigene Ebene ueber Footer und Miet-Leiste, in sich
       scrollbar (im Querformat war der Login sonst nicht erreichbar). */
    .nav-links.active {
        display: flex !important;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;                  /* im Querformat kein Vollbild */
        width: min(360px, 92vw);
        border-radius: 0 0 0 12px;
        z-index: 1500;
        flex-direction: column;
        gap: 0;
        max-height: 100vh;
        margin: 0;
        padding: .3rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        list-style: none;
        background: #fff;
        border-bottom: 1px solid var(--c-border);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    }

    .nav-links.active .nav-left,
    .nav-links.active .nav-center,
    .nav-links.active .nav-right {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .nav-links.active li {
        list-style: none;
        width: 100%;
    }

    .nav-links.active li + li {
        border-top: 1px solid #f1f5f9;
    }

    .nav-links.active li > a {
        display: block;
        padding: .8rem .7rem;
        border-radius: 8px;
    }

    .nav-links.active li > a:hover,
    .nav-links.active li.active > a {
        background: #f3f4f6;
    }

    /* Klickfaenger hinter dem Menue: schliesst es beim Tippen daneben. */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1400;          /* unter dem Menue (1500), ueber dem Inhalt */
        display: none;
        background: rgba(0, 0, 0, .35);
    }

    .nav-backdrop.show {
        display: block;
    }

    /* Konto-Menue im aufgeklappten Burger: Das Untermenue ist absolut
       positioniert und wurde vom scrollbaren Menue abgeschnitten. Auf
       Mobilgeraeten klappt es daher im Textfluss auf. */
    .nav-links.active .user-nav {
        width: 100%;
    }

    .nav-links.active .user-nav-trigger {
        display: block;
        width: 100%;
        padding: .8rem .7rem;
        text-align: left;
    }

    .nav-links.active .user-nav .user-dropdown {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 .3rem 1rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #f9fafb;
    }

    .nav-links.active .user-nav .user-dropdown::before {
        display: none !important;     /* Sprechblasen-Pfeil entfaellt */
    }

    .nav-links.active .user-nav.open .user-dropdown {
        display: block !important;
    }

    .nav-links.active .user-dropdown li a {
        display: block;
        padding: .65rem .5rem;
    }

    /* ── 4) Kategorie-Sidebar als Offcanvas ───────────────────────────── */
    .category-sidebar {
        position: fixed !important;
        top: 0;
        left: -100%;
        width: min(82vw, 300px);
        height: 100vh;
        margin: 0;
        padding: 1rem;
        background: #fff;
        z-index: 1200;
        overflow-y: auto;
        box-shadow: 2px 0 14px rgba(0, 0, 0, .18);
        transition: left .25s ease;
    }

    .category-sidebar.open {
        left: 0 !important;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1100;
        display: none;
    }

    .sidebar-backdrop.show {
        display: block;
    }

    .sidebar-open-btn {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        margin: .6rem 0;
        padding: .6rem 1rem;
        font-size: .95rem;
        font-weight: 600;
        color: var(--c-text);
        background: #f3f4f6;
        border: 1px solid var(--c-border);
        border-radius: 10px;
        cursor: pointer;
    }

    .category-sidebar .sidebar-close-btn {
        display: block;
        width: 100%;
        margin-bottom: .8rem;
        padding: .55rem;
        font-size: .95rem;
        background: #f3f4f6;
        border: 1px solid var(--c-border);
        border-radius: 8px;
        cursor: pointer;
    }

    /* ── 5) Seitenraster auf eine Spalte ──────────────────────────────── */
    .rent-page .rent-layout,
    .rent-layout,
    .product-page .product-layout,
    .shop-layout,
    .product-layout {
        display: block !important;
        width: 100%;
        padding: .8rem 0 !important;
    }

    /* ── 6) Filterleiste ──────────────────────────────────────────────── */
    .product-filterbar {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .product-filterbar .pf-field,
    .product-filterbar .pf-search,
    .product-filterbar .pf-controls {
        flex: 1 1 100%;
        min-width: 0;
    }

    .product-filterbar input,
    .product-filterbar select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pf-price-inputs {
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    /* ── 7) Produkt- und Mietkarten kompakt ───────────────────────────
       Bild links ueber alle Zeilen, alle uebrigen Kinder fliessen
       nacheinander in Spalte 2. Werden sie demselben Rasterbereich
       zugewiesen, liegen sie uebereinander - das war der Fehler zuvor. */
    .product-grid,
    .rent-product-grid,
    .products-grid,
    .rent-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .55rem !important;
        width: 100%;
    }

    .product-card,
    .rent-card {
        display: grid !important;
        grid-template-columns: 76px minmax(0, 1fr);
        align-content: start;
        column-gap: .7rem;
        row-gap: 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: .55rem !important;
        text-align: left !important;
    }

    .product-card > *,
    .rent-card > * {
        grid-column: 2;
        min-width: 0;
        margin: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .product-card > a:first-child,
    .product-card > img:first-child,
    .product-card > .product-image,
    .rent-card > a:first-child,
    .rent-card > img:first-child,
    .rent-card > .rent-card-img {
        grid-column: 1;
        grid-row: 1 / span 99;
        align-self: start;
        width: 76px !important;
        max-width: 76px;
    }

    .product-card img,
    .rent-card img {
        width: 76px !important;
        height: 76px !important;
        object-fit: contain;
        display: block;
    }

    .product-card h3,
    .rent-card h3 {
        font-size: .85rem !important;
        line-height: 1.2 !important;
    }

    .product-card .price,
    .rent-card .price {
        font-size: .9rem !important;
        line-height: 1.2 !important;
        font-weight: 700;
    }

    .product-card small,
    .rent-card small,
    .product-card .stock-badge,
    .rent-card .stock-badge {
        font-size: .7rem !important;
        line-height: 1.2 !important;
    }

    /* Versandhinweis kostet nur Hoehe - der Preis nennt die MwSt. bereits */
    .product-card .shipping-note,
    .product-card > small:last-child {
        display: none !important;
    }

    /* Menge + Warenkorb in einer Zeile, kompakt */
    .product-card form,
    .rent-card form {
        display: flex !important;
        align-items: center;
        gap: .35rem;
        margin-top: .25rem !important;
    }

    /* In Karten nur das Symbol: die Beschriftung sprengte sonst die Karte.
       Der Text steckt im selben Textknoten wie das Emoji, daher wird die
       Schrift ausgeblendet und das Symbol per ::before gesetzt. */
    .product-card .btn-cart,
    .rent-card .btn-cart,
    .rent-card-actions .btn-cart,
    .rent-card-actions .btn-rent-add,
    .product-card form .btn-cart,
    .rent-card .rent-card-actions .btn-rent-add {
        font-size: 0 !important;
        letter-spacing: -1px;          /* falls die Schrift doch greift */
        color: transparent !important; /* zweite Absicherung */
        width: 44px !important;
        min-width: 44px;
        max-width: 44px;
        height: 38px;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .product-card .btn-cart::before,
    .rent-card .btn-cart::before,
    .rent-card-actions .btn-cart::before,
    .rent-card-actions .btn-rent-add::before {
        content: "🛒";
        font-size: 1.05rem !important;
        letter-spacing: normal;
        color: #fff !important;        /* Symbol bleibt sichtbar */
        line-height: 1;
    }

    /* Details-Knopf daneben darf schrumpfen, aber nicht ueberlaufen */
    .rent-card-actions {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: .4rem;
        margin-top: .3rem !important;
    }

    .rent-card-actions .btn-details,
    .product-card .btn-details {
        flex: 0 1 auto;
        min-width: 0;
        padding: .4rem .6rem !important;
        font-size: .78rem !important;
        white-space: nowrap;
    }

    .product-card input[type="number"],
    .rent-card input[type="number"] {
        width: 52px !important;
        padding: .25rem .3rem !important;
        font-size: .8rem !important;
    }

    /* Knoepfe nebeneinander in einer eigenen Zeile */
    .product-card .btn-details,
    .product-card .btn-cart,
    .rent-card .btn-details,
    .rent-card .btn-cart,
    .product-card form,
    .rent-card form {
        justify-self: start;
        width: auto !important;
        max-width: 100%;
        margin-top: .3rem !important;
        padding: .4rem .7rem !important;
        font-size: .8rem !important;
        white-space: nowrap;
    }

    /* ── 7b) Produkt-Detailseite ──────────────────────────────────────
       .product-detail-layout ist in product.css MIT Mobil-Regel und in
       shop.css NOCHMALS ohne definiert. shop.css wird spaeter geladen und
       gewinnt - dadurch blieb das Raster 360px + 1fr, und die Angaben
       standen ausserhalb des Bildschirms. */
    .product-detail-layout {
        display: block !important;
        width: 100%;
        max-width: 100%;
    }

    .product-image-box {
        padding: .7rem !important;
        margin-bottom: .9rem;
    }

    .product-image-box img {
        max-height: 220px !important;
    }

    .product-detail {
        width: 100%;
        max-width: 100%;
    }

    .product-detail h2 {
        font-size: 1.15rem !important;
        line-height: 1.25;
    }

    .prod-thumbs {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .prod-thumbs img {
        width: 56px !important;
        height: 56px !important;
        object-fit: contain;
    }

    .quantity-selector {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
    }

    .product-detail .btn-cart,
    .product-detail button[type="submit"] {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        height: auto;
        font-size: .95rem !important;
        color: #fff !important;
        padding: .75rem !important;
    }

    /* Auf der Detailseite die volle Beschriftung zeigen (kein Symbol-Knopf) */
    .product-detail .btn-cart::before {
        content: none !important;
    }

    /* ── 8) Miet-Detailseite ──────────────────────────────────────────── */
    .rent-detail,
    .rent-detail-inner,
    .rent-booking,
    .rent-detail-grid {
        display: block !important;
        width: 100%;
        max-width: 100%;
    }

    /* ── 9) Miet-Warenkorb als schwebender Symbol-Knopf ───────────────────
       Die volle Leiste lag entweder ueber dem Footer oder erzwang unten eine
       Luecke. Zugeklappt ist sie jetzt ein runder Knopf unten rechts, der
       nichts verdeckt; erst beim Antippen klappt der Bereich auf. */
    .rc-panel {
        right: .8rem !important;
        left: auto !important;
        bottom: 1rem !important;
        width: 58px !important;
        max-width: 58px;
        border-radius: 50% !important;
        overflow: visible !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    }

    .rc-panel .rc-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        padding: 0 !important;
        border-radius: 50%;
        font-size: 0 !important;        /* Beschriftung ausblenden */
        color: transparent !important;
        position: relative;
    }

    .rc-panel .rc-toggle::before {
        content: "🛒";
        font-size: 1.5rem !important;
        color: #fff !important;
        line-height: 1;
    }

    /* Anzahl als Blase am Knopf */
    .rc-panel .rc-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 22px;
        height: 22px;
        padding: 0 5px;
        font-size: .72rem !important;
        line-height: 22px;
        color: #fff !important;
        background: var(--c-success);
        border-radius: 999px;
        text-align: center;
    }

    /* Aufgeklappt: volle Breite wie gewohnt */
    .rc-panel.rc-open {
        right: .5rem !important;
        left: .5rem !important;
        width: auto !important;
        max-width: none;
        border-radius: 12px !important;
        overflow: hidden !important;
        max-height: 80vh;
        overflow-y: auto !important;
    }

    .rc-panel.rc-open .rc-toggle {
        width: 100%;
        height: auto;
        padding: .7rem 1rem !important;
        border-radius: 0;
        justify-content: flex-start;
        font-size: .95rem !important;
        color: #fff !important;
    }

    .rc-panel.rc-open .rc-toggle::before {
        margin-right: .4rem;
    }

    .rc-panel.rc-open .rc-badge {
        position: static;
        margin-left: auto;
    }

    /* Kein Extra-Platz mehr noetig - der Knopf schwebt frei */
    body.has-rent-cart {
        padding-bottom: 0 !important;
    }

    /* ── 10) Mini-Warenkorb ───────────────────────────────────────────── */
    .mini-cart-dropdown {
        position: fixed !important;
        top: 100px;
        right: .5rem;
        left: .5rem;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        z-index: 1400;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    }

    .mini-cart-item {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: .5rem;
        padding: .5rem 0;
    }

    .mini-cart-item > * {
        min-width: 0;
        position: static !important;
        float: none !important;
    }

    .mini-cart-img,
    .mini-cart-img img {
        width: 44px !important;
        height: 44px !important;
        object-fit: contain;
    }

    /* Produktname umbrechen statt ueberlagern */
    /* Der Name erbt sonst eine sehr grosse Schrift aus dem Desktop-/Theme-CSS */
    .mini-cart-name,
    .mini-cart-name a,
    .mini-cart-item a,
    .mini-cart-info a,
    .mini-cart-info strong {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: .82rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        overflow-wrap: anywhere;
    }

    .mini-cart-meta {
        display: flex;
        align-items: center;
        gap: .35rem;
        font-size: .78rem;
        white-space: nowrap;
    }

    .mini-cart-meta input {
        width: 44px !important;
        padding: .2rem .3rem;
    }

    .mini-cart .btn-secondary,
    .mini-cart a.btn,
    .mini-cart button {
        padding: .5rem .7rem !important;
        font-size: .82rem !important;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* ── 11) Warenkorb neben dem Burger (per JS dorthin verschoben) ───── */
    .header-bottom .mobile-cart-slot {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
    }

    .header-bottom .mobile-cart-slot + .menu-toggle {
        margin-left: .5rem;
    }

    .header-bottom .mobile-cart-slot li {
        list-style: none;
    }

    .header-bottom .mobile-cart-slot a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        font-size: 1.35rem;
        border: 1px solid rgba(0, 0, 0, .12);
        background: rgba(0, 0, 0, .05);
        border-radius: 10px;
        position: relative;
        text-decoration: none;
    }

    .header-bottom .mobile-cart-slot a span {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        padding: 0 5px;
        font-size: .72rem;
        line-height: 20px;
        text-align: center;
        color: #fff !important;
        background: var(--c-danger);
        border-radius: 999px;
    }

    /* ── 11b) Mein Konto ──────────────────────────────────────────────── */

    .account-wrapper,
    .account-content {
        width: 100%;
        max-width: 100%;
        padding: 0 .6rem;
        box-sizing: border-box;
    }

    /* Reiter als scrollbare Leiste statt mehrzeiligem Block */
    /* Reiter als Raster: alles sichtbar, nichts zu wischen */
    .account-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: .4rem;
        margin-bottom: .9rem;
        overflow: visible !important;
    }

    .account-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .6rem .5rem;
        font-size: .82rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .account-card {
        padding: .8rem !important;
        margin-bottom: .8rem;
    }

    .page-title,
    .account-card h2 {
        font-size: 1.15rem !important;
    }

    /* Tabellen werden zu Karten: Spalten quetschen fuehrte zu ueberlappenden
       Texten. Jede Zeile ist nun ein Block, jede Zelle eine Beschriftung mit
       Wert (Beschriftung kommt aus data-label in account.php). */
    .account-table.orders-table,
    .account-table.rentals-table,
    .account-table.orders-table tbody,
    .account-table.rentals-table tbody,
    .account-table.orders-table tr,
    .account-table.rentals-table tr:not([id^="rental-detail-"]),
    .account-table.orders-table td,
    .account-table.rentals-table td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .account-table.orders-table thead,
    .account-table.rentals-table thead {
        display: none !important;      /* Kopfzeile entfaellt, Labels stehen an den Zellen */
    }

    .account-table.orders-table tr,
    .account-table.rentals-table tr {
        margin-bottom: .7rem;
        padding: .6rem .7rem;
        border: 1px solid var(--c-border);
        border-radius: 10px;
        background: #fff;
    }

    .account-table.orders-table td,
    .account-table.rentals-table td {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: .8rem;
        padding: .25rem 0 !important;
        border: 0 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .account-table.orders-table td::before,
    .account-table.rentals-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--c-muted);
        font-size: .78rem;
        font-weight: 600;
        text-align: left;
    }

    /* Zellen ohne Beschriftung (Aktionsspalte) volle Breite */
    .account-table.orders-table td:not([data-label]),
    .account-table.rentals-table td:not([data-label]) {
        justify-content: flex-end;
        padding-top: .5rem !important;
    }

    /* Aufgeklappte Buchungs-Details: volle Breite, kein Label */
    .account-table.rentals-table tr[id^="rental-detail-"] {
        margin-top: -.6rem;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        background: #f9fafb;
    }

    /* Die Detailzeile steuert das Skript (auf/zu) - hier nur Optik, kein display */
    .account-table.rentals-table tr[id^="rental-detail-"] td {
        display: block;
        text-align: left !important;
        padding: .5rem !important;
    }

    .account-table.rentals-table tr[id^="rental-detail-"] td::before {
        content: none;
    }

    .account-table tr[id^="rental-detail-"] > td > div {
        display: block !important;
    }

    .account-table tr[id^="rental-detail-"] > td > div > div {
        margin-bottom: .7rem;
    }

    /* Bestell-Detailansicht: account.js baut die Bloecke mit Inline-Styles
       (grid-template-columns:1fr 1fr). Nur !important schlaegt Inline-Styles. */
    #order-detail-modal [style*="grid-template-columns:1fr 1fr"],
    #order-detail-body [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: .6rem !important;
    }

    #order-detail-modal {
        padding: .5rem !important;
    }

    #order-detail-body {
        font-size: .85rem;
    }

    /* Positionstabelle im Detail als Karten (Beschriftungen setzt mobile-ui.js) */
    #order-detail-body table.as-cards,
    #order-detail-body table.as-cards tbody,
    #order-detail-body table.as-cards tr,
    #order-detail-body table.as-cards td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #order-detail-body table.as-cards thead {
        display: none !important;
    }

    #order-detail-body table.as-cards tr {
        margin-bottom: .6rem;
        padding: .5rem .6rem;
        border: 1px solid var(--c-border);
        border-radius: 10px;
        background: #fff;
    }

    #order-detail-body table.as-cards td {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: .8rem;
        padding: .2rem 0 !important;
        border: 0 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: .82rem;
    }

    #order-detail-body table.as-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--c-muted);
        font-size: .76rem;
        font-weight: 600;
        text-align: left;
    }

    /* Formulare und Adressen einspaltig, Knoepfe bedienbar */
    .form-row,
    .address-grid,
    .addr-edit-form,
    .phone-add-form,
    .phone-edit-form {
        display: block !important;
    }

    .form-group {
        margin-bottom: .7rem;
    }

    .form-group input:not([type="radio"]):not([type="checkbox"]),
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    .account-card .btn,
    .account-card .btn-primary,
    .account-card .btn-secondary {
        width: 100%;
        margin-top: .4rem;
        padding: .7rem !important;
    }

    .phone-item,
    .address-card {
        display: block;
        padding: .7rem !important;
    }

    .phone-actions,
    .addr-display + div {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-top: .5rem;
    }

    .btn-sm,
    .btn-sm-addr {
        flex: 1 1 auto;
        text-align: center;
    }

    /* ── 11c) Miet-Buchungsstrecke ────────────────────────────────────── */

    /* Zweispaltige Raster brechen um. rent-review-layout klappt erst bei
       600px um und blieb im Querformat (874px) zweispaltig. */
    .rent-detail-grid,
    .rent-review-layout,
    .rent-form-row,
    .rent-review-left,
    .rent-review-right {
        display: block !important;
        width: 100%;
        max-width: 100%;
    }

    .rent-review-left > *,
    .rent-review-right > * {
        max-width: 100%;
    }

    /* Detailseite: Bild volle Breite statt 40 % */
    .rent-detail-img {
        width: 100% !important;
        max-height: 240px;
        object-fit: contain;
    }

    /* Buchungsleiste ueber dem Formular */
    .rent-booking-bar {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .6rem .7rem;
        margin: .8rem 0 1rem;
        font-size: .82rem;
    }

    .rent-data-form,
    .rent-data-page,
    .rent-review-page {
        padding: 0 .6rem 2rem !important;
        max-width: 100% !important;
    }

    /* Formularfelder und Auswahlknoepfe */
    .rent-form-group {
        margin-bottom: .7rem;
    }

    /* Radio und Checkbox ausnehmen - sonst werden sie ueber die volle Zeile
       gedehnt und die Beschriftung rutscht an den rechten Rand. */
    .rent-input,
    .rent-data-form input:not([type="radio"]):not([type="checkbox"]),
    .rent-data-form select,
    .rent-data-form textarea {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 1rem;              /* verhindert das Zoomen beim Tippen (iOS) */
    }

    .rent-fulfil-choice {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .4rem;
    }

    /* Auswahlzeilen: Feld links, Text direkt daneben */
    .rent-fulfil-choice label,
    .rent-data-form label {
        display: flex;
        align-items: center;
        gap: .55rem;
        width: 100%;
        text-align: left !important;
        cursor: pointer;
    }

    .rent-data-form input[type="radio"],
    .rent-data-form input[type="checkbox"] {
        width: 20px !important;
        min-width: 20px;
        height: 20px;
        margin: 0 !important;
        flex: 0 0 auto;
    }

    .rent-type-btn {
        width: 100%;
        justify-content: flex-start;
        padding: .7rem .8rem;
    }

    /* Datumsfelder im Miet-Warenkorb nebeneinander, aber umbrechbar */
    .rc-date-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    }

    .rc-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Uebersichtstabelle "Buchung pruefen" als Karten
       (Beschriftungen setzt mobile-ui.js aus der Kopfzeile) */
    .review-table.as-cards,
    .review-table.as-cards tbody,
    .review-table.as-cards tr,
    .review-table.as-cards td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    .review-table.as-cards thead {
        display: none !important;
    }

    .review-table.as-cards tr {
        margin-bottom: .6rem;
        padding: .5rem .6rem;
        border: 1px solid var(--c-border);
        border-radius: 10px;
        background: #fff;
    }

    .review-table.as-cards td {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: .8rem;
        padding: .2rem 0 !important;
        border: 0 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: .82rem;
    }

    .review-table.as-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--c-muted);
        font-size: .76rem;
        font-weight: 600;
        text-align: left;
    }

    /* Abschluss-Schaltflaechen bequem bedienbar */
    .rent-review-page .btn,
    .rent-data-page .btn,
    .rent-review-page button[type="submit"],
    .rent-data-page button[type="submit"] {
        width: 100%;
        padding: .8rem !important;
        font-size: .95rem !important;
    }

    /* ── 12) Footer flach ─────────────────────────────────────────────── */
    .shop-footer {
        padding: .5rem .6rem !important;
    }

    .shop-footer .footer-content {
        display: flex;
        flex-direction: column;
        gap: .25rem !important;
        margin: 0;
        padding: 0;
    }

    .shop-footer .footer-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: .2rem .8rem;
        margin: 0;
        padding: 0;
    }

    .shop-footer .footer-links a {
        padding: .2rem .1rem;
        font-size: .85rem;
        white-space: nowrap;
    }

    .shop-footer p,
    .shop-footer .footer-copy {
        margin: 0 !important;
        padding: 0;
        font-size: .72rem;
        line-height: 1.3;
        text-align: center;
    }

    .shop-footer .footer-col:empty,
    .shop-footer .footer-content > div:empty {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEHR SCHMAL (bis 380px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

    .product-card,
    .rent-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .product-card > a:first-child,
    .product-card > img:first-child,
    .rent-card > a:first-child,
    .rent-card > img:first-child {
        width: 64px !important;
        max-width: 64px;
    }

    .product-card img,
    .rent-card img {
        width: 64px !important;
        height: 64px !important;
    }
}