/* ===================================================================
   Der Laden auf dem Handy (22.09.2026)
   ===================================================================
   Liegt als LETZTE Datei hinter shop2.css (inc/shop2.php) und gilt nur
   dort, wo der modernisierte Laden laeuft. Fast alles steht unter
   max-width: 820px — ab da stapelt der Laden ohnehin einspaltig.

   Was vorher schief lief (User: "Buttons im Nirgendwo, viel zu viel
   Abstand, Buttons verschieden gross"):
     - Seitenraender addierten sich: Buehne 32 px + Kartenrand 54 px +
       Innenabstand 34 px. Die Produktkarte war auf 390 px nur 282 px
       breit, das Bild 213 px. In der Kasse waren es 32 + 16 + 8 px.
     - Die Kaufspalte ist eine Flex-Spalte mit gap: 24px, und JEDES Kind
       bringt dazu eigene Aussenabstaende mit — daher die Loecher
       zwischen Marke, Titel und Preis.
     - responsive.css (alte Palette) baut unter 768 px mit !important um:
       Galeriebild 4:3 beschnitten, Produktname align-self: end (kurze
       Namen standen rechtsbuendig), Preis zentriert.

   Die Masse hier:
     --m-rand   16 px  Seitenrand fuer Text und Formulare
     10 px             Rand der Produktkarte — sie soll fast den ganzen
                       Bildschirm nutzen
     48 px             Hoehe jedes erstrangigen Knopfs
     44 px             Hoehe der Auswahl- und Leistenknoepfe

   Farben bleiben unangetastet — hier geht es nur um Masse und Anordnung.
   =================================================================== */


/* ===================================================================
   A  Ueberall: das Auge im Passwortfeld
   ===================================================================
   WooCommerce zeichnet das Auge mit seiner eigenen Symbolschrift, und
   die laedt das Theme nicht. Uebrig blieb ein einzelner Punkt unter dem
   Feld. Jetzt ein SVG als Maske — die Farbe kommt aus currentColor. */
body.ov-baender--shop .password-input {
    position: relative;
    display: block;
}
body.ov-baender--shop .password-input input.input-text { padding-right: 52px; }
body.ov-baender--shop .show-password-input {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 36px;
    height: 36px;
    margin: -18px 0 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--lila);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    box-shadow: none;
}
body.ov-baender--shop .show-password-input::before,
body.ov-baender--shop .show-password-input::after { content: none; display: none; }
body.ov-baender--shop .show-password-input {
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
            mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
body.ov-baender--shop .show-password-input.display-password {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='3' y1='21' x2='21' y2='3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='3' y1='21' x2='21' y2='3'/%3E%3C/svg%3E");
}
body.ov-baender--shop .show-password-input:focus-visible { outline: 3px solid var(--lila); outline-offset: 2px; }


/* ===================================================================
   A1  Ueberall: der Galerie-Zaehler sitzt auf dem Bild
   ===================================================================
   shop2.js haengt ihn in den Bildrahmen (.flex-viewport). Ohne Skript
   bleibt er an der Galerie und behaelt die alte Lage aus shop2.css. */
body.ov-shop2.single-product .woocommerce-product-gallery .flex-viewport { position: relative; }
body.ov-shop2.single-product .flex-viewport > .shop2-zaehler {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
}


/* ===================================================================
   A2  Ueberall: Filter und Sortierung in derselben Farbe
   ===================================================================
   Beide sind gleichrangig und stehen nebeneinander — der Filter trug aber
   --band (ueber ".content-block .nav-btn"), die Sortierung Apricot. Jetzt
   beide Apricot mit lila Schrift, ueberfahren und offen --band. */
body.ov-shop2 .shop-controls .shop-filter-btn {
    background: var(--apri);
    color: var(--lila);
    border: 2px solid var(--apri);
    box-shadow: none;
}
body.ov-shop2 .shop-controls .shop-filter-btn:hover,
body.ov-shop2 .shop-controls .shop-filter-btn[aria-expanded="true"] {
    background: var(--band);
    color: var(--apri);
    border-color: var(--band);
}


@media (max-width: 820px) {

/* ===================================================================
   B  Grundmasse
   =================================================================== */
body.ov-baender--shop { --m-rand: 16px; }

/* Buehne: auf Warenkorb, Kasse und Konto sitzt die flache Kopfplatte
   darueber. Die Shop-Uebersicht setzt ihren eigenen Abstand (0) und
   bleibt hier aussen vor. */
body.ov-baender--shop:not(.post-type-archive-product) #main.main-content {
    padding-top: 18px !important;
    padding-bottom: 40px;
}
/* Die Produktseite hat keinen Kopf — die Karte beginnt direkt unter
   dem Umbau-Band. */
body.ov-baender--shop.single-product #main.main-content { padding-top: 10px !important; }

body.ov-baender--shop .szene > .buehne,
body.ov-shop2 .szene--shop2 > .buehne { padding: 0 var(--m-rand); }
body.ov-baender--shop .content-block,
body.ov-baender--shop.woocommerce-cart .content-block { padding: 0 var(--m-rand); }
body.ov-baender--shop .content-block + .content-block { margin-top: 28px; }

/* Flache Kopfplatte (Warenkorb, Kasse, Konto): 225 px fuer drei Zeilen
   waren fast ein Drittel des Bildschirms. */
body.ov-baender--shop .szene--kopf:not(.szene--shop2) { padding: 22px 0 20px; }
body.ov-baender--shop .szene--kopf:not(.szene--shop2) h1 { font-size: 30px; line-height: 1.1; }
body.ov-baender--shop .szene--kopf .marke { margin-bottom: 4px; font-size: 12px; }
body.ov-baender--shop .kopf__zurueck { margin-bottom: 8px; font-size: 14px; }


/* ===================================================================
   C  Shop-Uebersicht
   =================================================================== */

/* --- Hero --- */
body.ov-shop2 .szene--shop2 { padding: 24px 0 30px; }
body.ov-shop2 .shop2-hero { gap: 22px; }
body.ov-shop2 .shop2-hero h1 { font-size: clamp(27px, 7.6vw, 36px); }
body.ov-shop2 .shop2-hero__lead { margin-top: 12px; font-size: 15.5px; line-height: 1.52; }

/* Zwei Knoepfe gleicher Groesse nebeneinander statt zwei verschieden
   breiter Pillen untereinander. */
body.ov-shop2 .shop2-hero__knoepfe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}
body.ov-shop2 .shop2-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
}

/* Das Produktbild nutzt die ganze Breite — vorher 250 px, rechts daneben
   blieb ein Drittel des Bildschirms leer. */
body.ov-shop2 .shop2-hero__karussell { max-width: none; justify-self: stretch; }
body.ov-shop2 .shop2-hero__rahmen { border-radius: 30px 14px 26px 14px; }
body.ov-shop2 .shop2-hero__schild { margin-top: 12px; }
body.ov-shop2 .shop2-hero__punkte { margin-top: 12px; }

/* --- Was ein Kauf bewirkt --- */
/* Oben ragt die Welle des Hero herein, unten die der Ware — beide sind
   mit --welle aufgeschlagen, dazu nur noch ein kleiner Freiraum. */
body.ov-shop2 .szene--shop2-nutzen.auf-apri {
    padding-top: calc(var(--welle) + 18px);
    padding-bottom: calc(var(--welle) + 18px);
}
/* Zeichen links, Zahl und Text rechts: eine Angabe ist so rund 110 px
   hoch statt 230. Der erste Eintrag hatte links 0, die anderen 24 px —
   jetzt stehen alle buendig. */
body.ov-shop2 .shop2-kz { padding-left: 0; }
body.ov-shop2 .shop2-kz__griff,
body.ov-shop2 .shop2-kz:first-child .shop2-kz__griff {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 16px 4px;
}
body.ov-shop2 .shop2-kz__zeichen { grid-column: 1; grid-row: 1 / span 3; margin: 4px 0 0; }
body.ov-shop2 .shop2-kz__griff > :not(.shop2-kz__zeichen) { grid-column: 2; }
body.ov-shop2 .shop2-kz__wert { font-size: 25px; margin-bottom: 4px; }
body.ov-shop2 .shop2-kz__text { font-size: 15.5px; }
body.ov-shop2 .shop2-kz__mehr { margin-top: 8px; }
body.ov-shop2 .shop2-kz__erklaerung { margin: 0 0 16px; }

/* --- Die Ware --- */
body.ov-shop2 .szene--shop2-ware { padding: 34px 0 40px; }

/* Bedienleiste als Raster: Suche ueber die volle Breite, darunter Filter
   und Sortierung in EINER Hoehe. Die beiden Huellen loesen sich auf,
   ihre Kinder werden Rasterzellen. Nicht mitlaufend — auf dem Handy
   deckte sie sonst ein Viertel des Bildes zu. */
body.ov-baender--shop .shop-controls {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 26px 12px 22px 12px;
}
body.ov-shop2 .szene--shop2-ware .shop-controls { margin-bottom: 24px; }
body.ov-baender--shop .shop-controls__left,
body.ov-baender--shop .shop-controls__actions { display: contents; }
body.ov-baender--shop .shop-search { grid-column: 1 / -1; order: 1; flex: none; }
body.ov-baender--shop .shop-search .shop-search__input { height: 46px; font-size: 16px; }
body.ov-baender--shop .shop-filter-wrap { order: 2; position: relative; }
body.ov-baender--shop .shop-controls .woocommerce-ordering { order: 3; min-width: 0; }
body.ov-baender--shop .shop-controls .woocommerce-result-count {
    order: 4;
    grid-column: 1 / -1;
    text-align: center;
    font-size: 13px;
    margin: -2px 0 0;
    opacity: 0.9;
}
/* Ohne Filter (bei Chips blendet shop2.css ihn aus) nimmt die
   Sortierung die ganze Zeile. */
body.ov-shop2 .shop2-chips ~ .shop-controls .woocommerce-ordering,
body.ov-shop2 .shop-controls:has(~ .shop2-chips) .woocommerce-ordering { grid-column: 1 / -1; }
body.ov-baender--shop .shop-filter-btn,
body.ov-shop2 .shop2-sort__knopf {
    height: 46px;
    min-height: 46px;
    padding: 0 14px;
    gap: 8px;
    font-size: 14.5px;
    line-height: 1;
    justify-content: center;
}
body.ov-baender--shop .shop-filter-btn { width: 100%; }
body.ov-shop2 .shop2-sort__knopf { justify-content: space-between; min-width: 0; }
body.ov-shop2 .shop2-sort__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Die Filterliste hing rechtsbuendig am Knopf und lief links aus dem
   Bild — der Knopf steht jetzt links. */
body.ov-baender--shop .shop-filter-dropdown { left: 0; right: auto; }

/* Chips laufen seitlich bis an den Bildschirmrand weiter. */
body.ov-shop2 .shop2-chips {
    margin-inline: calc(var(--m-rand) * -1);
    padding-inline: var(--m-rand);
}
body.ov-shop2 .szene--shop2-ware .shop2-chips { margin-bottom: 22px; }
body.ov-shop2 .shop2-chip { min-height: 44px; }

/* Kategorien */
body.ov-shop2 .szene--shop2-ware .shop-cat-header { margin-bottom: 16px; }
body.ov-shop2 .szene--shop2-ware .shop-cat-section { margin-bottom: 36px; }
body.ov-baender--shop .shop-cat-title { font-size: 22px; }

/* --- Die Karte --- */
body.ov-shop2 ul.products,
body.ov-shop2 .szene--shop2-ware ul.products { gap: 16px !important; }
body.ov-shop2 ul.products li.product,
body.ov-shop2 .szene--shop2-ware ul.products li.product { padding: 10px 10px 14px !important; }
body.ov-shop2 ul.products li.product a img,
body.ov-shop2 .szene--shop2-ware ul.products li.product a img { margin: 0 0 12px !important; }
/* responsive.css setzt align-self: end — kurze Namen ("Oversized Team
   Hoodie") standen dadurch rechtsbuendig, lange linksbuendig. */
body.ov-shop2 ul.products li.product .woocommerce-loop-product__title,
body.ov-shop2 .szene--shop2-ware ul.products li.product .woocommerce-loop-product__title {
    align-self: stretch !important;
    text-align: left !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    padding: 0 6px !important;
    margin: 0 0 4px !important;
}
body.ov-shop2 ul.products li.product .price,
body.ov-shop2 .szene--shop2-ware ul.products li.product .price {
    align-self: flex-start !important;
    text-align: left !important;
    font-size: 18px !important;
    padding: 0 6px !important;
    margin: auto 0 12px !important;
}
body.ov-shop2 ul.products li.product .button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 16px !important;
    font-size: 15px !important;
    line-height: 1.2;
}
body.ov-shop2 .shop2-plaketten { top: 18px; left: 18px; }
body.ov-shop2 ul.products li.product .onsale { top: 18px; right: 18px; }
body.ov-shop2 .shop2-bald { padding: 20px 18px; min-height: 0; gap: 8px; }
body.ov-shop2 .shop2-bald__zeichen { width: 44px; height: 44px; }

/* --- Warum OpenVuture --- */
body.ov-shop2 .szene--shop2-warum.auf-apri {
    padding-top: calc(var(--welle) + 22px);
    padding-bottom: 44px;
}
/* Die Linie und die 96 px darueber trennten den Abschnitt ein zweites
   Mal — die Welle tut das schon. */
body.ov-shop2 .shop2-warum { margin: 0; padding: 0; border-top: none; }
body.ov-shop2 .shop2-warum__titel { font-size: 26px; margin: 0 0 14px; }
body.ov-shop2 .shop2-warum__spalten p { font-size: 15.5px; line-height: 1.6; margin: 0 0 14px; }


/* ===================================================================
   D  Produktseite
   ===================================================================
   Die Karte geht fast bis an den Rand (10 px), die Innenabstaende sind
   auf 12–16 px gesenkt. Bild vorher 213 px breit, jetzt rund 346 px. */
body.ov-baender--shop.single-product div.product {
    padding: 0 10px;
    row-gap: 0;
    column-gap: 0;
}
body.ov-shop2.single-product div.product::before { border-radius: 30px 14px 26px 14px; }

/* --- Galerie --- */
body.ov-shop2.single-product div.product .woocommerce-product-gallery { padding: 12px 12px 0; }
body.ov-baender--shop.single-product div.product .woocommerce-product-gallery__wrapper,
body.ov-baender--shop.single-product div.product .woocommerce-product-gallery .flex-viewport {
    border-radius: 22px 10px 20px 10px !important;
}
/* responsive.css beschnitt jedes Galeriebild auf 4:3 (object-fit: cover)
   — bei quadratischen Produktfotos fehlten Kapuze und Saum. */
body.ov-baender--shop.single-product div.product .woocommerce-product-gallery img {
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}
/* Vorschaubilder: fuenf gleich breite Kacheln ueber die ganze Breite
   statt 74 px fester Breite, von denen die vierte angeschnitten war. */
body.ov-baender--shop.single-product div.product .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
}
body.ov-baender--shop.single-product div.product .flex-control-thumbs li {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
body.ov-baender--shop.single-product div.product .flex-control-thumbs img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    border-width: 2px;
}
/* Der Zaehler "1/5" sitzt auf dem Bild (A1) — hier nur kleiner. */
body.ov-shop2.single-product .shop2-zaehler { padding: 5px 11px; font-size: 12px; }

/* --- Kaufspalte --- */
body.ov-shop2.single-product div.product .summary {
    gap: 0;
    padding: 18px 16px 20px;
}
body.ov-shop2.single-product .shop2-marke { font-size: 12px; margin: 0 0 6px; }
body.ov-baender--shop.single-product div.product .product_title {
    font-size: 27px;
    line-height: 1.12;
    margin: 0 0 10px;
}
body.ov-baender--shop.single-product div.product p.price,
body.ov-baender--shop.single-product div.product .summary > .price {
    font-size: 26px;
    margin: 0 0 8px;
}
body.ov-shop2.single-product div.product .summary .shop2-preisinfo {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.45;
}
body.ov-baender--shop.single-product div.product .woocommerce-product-details__short-description { margin: 0 0 18px; }
body.ov-baender--shop.single-product div.product .woocommerce-product-details__short-description p {
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 0 10px;
}

/* --- Auswahl --- */
body.ov-shop2.single-product div.product form.cart { margin: 0; }
body.ov-shop2.single-product div.product form.cart table.variations { margin: 0 0 6px; }
body.ov-shop2.single-product div.product form.cart table.variations tr { margin-bottom: 14px; }
body.ov-shop2.single-product div.product form.cart table.variations tr:last-child { margin-bottom: 0; }
body.ov-shop2.single-product div.product form.cart table.variations th.label { margin-bottom: 8px; }
/* Groessen als gleich breite Kacheln: "XS" und "XXL" waren verschieden
   breit, und die Reihe brach an zufaelliger Stelle um. */
body.ov-shop2.single-product .shop2-swatches:not(.shop2-swatches--farbe) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 8px;
}
body.ov-shop2.single-product .shop2-swatch:not(.shop2-swatch--farbe) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 8px;
    font-size: 15px;
}
body.ov-shop2.single-product .shop2-swatches--farbe { gap: 12px; }
body.ov-shop2.single-product .shop2-swatch.shop2-swatch--farbe { width: 40px; height: 40px; }
/* "Zuruecksetzen" ist unsichtbar, bis etwas gewaehlt ist, haelt aber
   seine Zeile frei — 28 px Luecke ueber dem Kaufknopf. Er steht jetzt
   rechts neben der Beschriftung "Groesse". */
body.ov-shop2.single-product div.product form.cart table.variations tr { position: relative; }
body.ov-shop2.single-product div.product form.cart .reset_variations {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    line-height: 22px;
    font-size: 13.5px;
}

/* Menge und Kaufknopf in einer Zeile, beide gleich hoch. Der Knopf lief
   vorher rechts aus der Karte heraus. */
body.ov-shop2.single-product div.product form.cart .woocommerce-variation-add-to-cart,
body.ov-shop2.single-product div.product form.cart:not(.variations_form) {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
}
body.ov-shop2.single-product div.product form.cart .single_variation_wrap { margin: 0; }
body.ov-shop2.single-product div.product form.cart .woocommerce-variation { margin: 0; }
body.ov-shop2.single-product div.product form.cart .woocommerce-variation:not(:empty) { margin: 4px 0 0; }
body.ov-shop2.single-product div.product form.cart .quantity { flex: 0 0 76px; margin: 0; }
body.ov-shop2.single-product div.product form.cart .quantity input.qty {
    width: 100%;
    height: 52px;
    padding: 0 8px;
    font-size: 17px;
}
body.ov-shop2.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    padding: 0 16px;
    font-size: 17px;
    line-height: 1.15;
    white-space: normal;
}

/* --- Vertrauenszeile und Kategorien --- */
body.ov-shop2.single-product .shop2-vertrauen { margin: 18px 0 0; padding: 16px 0 0; gap: 10px; }
body.ov-shop2.single-product .shop2-vertrauen li { font-size: 14.5px; }
body.ov-baender--shop.single-product div.product .product_meta { margin-top: 16px; padding-top: 14px; font-size: 14px; }
body.ov-baender--shop.single-product div.product .product_meta > span { margin-bottom: 4px; }

/* --- Beschreibung in der Karte --- */
body.ov-shop2.single-product div.product .woocommerce-tabs {
    padding: 0 16px 22px !important;
    row-gap: 22px;
}
body.ov-shop2.single-product div.product .woocommerce-tabs::before { margin: 0 0 2px; }
body.ov-shop2.single-product div.product .woocommerce-tabs .panel h2 { font-size: 20px; margin: 0 0 10px; }
body.ov-shop2.single-product div.product .woocommerce-tabs .panel :is(p, li) { font-size: 15.5px; }
body.ov-shop2.single-product div.product .woocommerce-tabs table.shop_attributes th { width: 34%; padding-right: 12px; }

/* Verwandte Artikel unter der Karte */
body.ov-baender--shop.single-product div.product .related,
body.ov-baender--shop.single-product div.product .upsells { margin-top: 32px; padding: 0 6px; }


/* ===================================================================
   E  Warenkorb
   =================================================================== */

/* --- Posten als kompakte Karte ---
   Vorher eine Spalte "Beschriftung | Wert" je Zelle; der Name stand
   rechtsbuendig in einem schmalen Streifen neben "PRODUKT". Jetzt:
       [Bild] Name, Merkmale        [x]
       [Bild] Preis
       Anzahl [ 1 ]      Summe 39,99 € */
body.ov-baender--shop.woocommerce-cart table.shop_table.cart { margin: 0 0 22px; border-radius: 28px 12px 24px 12px; }
body.ov-baender--shop.woocommerce-cart table.cart tr.cart_item {
    display: grid;
    /* Vier Spalten: die dritte richtet sich nach "Zwischensumme" und
       darf dem Namen oben keinen Platz nehmen — der laeuft ueber sie. */
    grid-template-columns: 76px minmax(0, 1fr) auto 32px;
    grid-template-areas:
        "bild  name  name  weg"
        "bild  preis preis preis"
        "menge menge summe summe";
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    padding: 16px;
}
body.ov-baender--shop.woocommerce-cart table.cart tr.cart_item td {
    display: block;
    width: auto;
    padding: 0;
    text-align: left;
    border: none;
}
body.ov-baender--shop.woocommerce-cart table.cart tr.cart_item td::before { content: none; display: none; }
body.ov-baender--shop.woocommerce-cart table.cart td.product-thumbnail { grid-area: bild; }
body.ov-baender--shop.woocommerce-cart table.cart td.product-thumbnail img {
    width: 76px;
    height: 76px;
    border-radius: 16px 8px 14px 8px;
}
body.ov-baender--shop.woocommerce-cart table.cart td.product-name { grid-area: name; font-size: 16px; line-height: 1.3; }
body.ov-baender--shop.woocommerce-cart table.cart td.product-name > a { font-size: 16px; }
body.ov-baender--shop.woocommerce-cart table.cart td.product-remove { grid-area: weg; }
body.ov-baender--shop.woocommerce-cart table.cart td.product-remove a { width: 32px; height: 32px; line-height: 30px; }
body.ov-baender--shop.woocommerce-cart table.cart td.product-price { grid-area: preis; font-weight: 800; font-size: 16px; }
body.ov-baender--shop.woocommerce-cart table.cart td.product-quantity {
    grid-area: menge;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
body.ov-baender--shop.woocommerce-cart table.cart td.product-subtotal {
    grid-area: summe;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    font-weight: 800;
    font-size: 16px;
}
/* Beschriftungen als eigene kleine Zeile vor dem Wert */
body.ov-baender--shop.woocommerce-cart table.cart tr.cart_item td.product-quantity::before,
body.ov-baender--shop.woocommerce-cart table.cart tr.cart_item td.product-subtotal::before {
    content: attr(data-title);
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.9;
}
body.ov-baender--shop.woocommerce-cart table.cart td.product-quantity input.qty { width: 64px; height: 44px; padding: 0 6px; }
body.ov-shop2.woocommerce-cart .woocommerce-cart-form dl.variation { margin-top: 4px; }

/* Aktualisieren: ueber die volle Breite, gleiche Hoehe wie der Rest */
body.ov-baender--shop.woocommerce-cart table.cart td.actions {
    display: block;
    padding: 0 16px 16px;
    border: none;
}
body.ov-baender--shop.woocommerce-cart table.cart td.actions::before { content: none; display: none; }
body.ov-baender--shop.woocommerce-cart table.cart td.actions .button {
    width: 100%;
    min-height: 48px;
    margin: 0;
}
body.ov-baender--shop.woocommerce-cart table.cart td.actions .coupon {
    display: flex;
    gap: 10px;
    margin: 0 0 10px;
    float: none;
    width: 100%;
}
body.ov-baender--shop.woocommerce-cart table.cart td.actions .coupon .input-text { flex: 1 1 auto; min-width: 0; height: 48px; }
body.ov-baender--shop.woocommerce-cart table.cart td.actions .coupon .button { width: auto; flex: none; }

/* --- Vute und "Gut zu wissen" --- */
/* Vute nahm allein einen ganzen Bildschirm ein. Jetzt klein neben seiner
   Sprechblase. */
body.ov-shop2.woocommerce-cart .ov-korb-unten { gap: 16px; margin-top: 22px; }
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-mascot {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    justify-self: stretch;
}
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-mascot .fox-svg-btn { grid-column: 1; grid-row: 1; margin: 0; }
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-mascot img { width: 96px !important; max-width: 96px !important; height: auto; }
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-bubble {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 12px 14px;
    font-size: 14.5px;
    text-align: left;
}
/* Die Spitze der Sprechblase zeigt nach links auf Vute statt nach unten. */
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-bubble::after {
    top: 50%;
    bottom: auto;
    left: -8px;
    margin-top: -8px;
    transform: rotate(45deg);
}
body.ov-shop2 .ov-korb-info { padding: 20px 18px; border-radius: 28px 12px 24px 12px; }
body.ov-shop2 .ov-korb-info__titel { font-size: 20px; margin-bottom: 12px; }
body.ov-shop2 .ov-korb-info ul { gap: 11px; }
body.ov-shop2 .ov-korb-info li { font-size: 14.5px; }

/* --- Summe --- */
body.ov-baender--shop .cart_totals { padding: 20px 18px; border-radius: 28px 12px 24px 12px; }
body.ov-baender--shop .cart_totals h2 { font-size: 22px; margin: 0 0 6px; padding: 0; }
body.ov-shop2.woocommerce-cart .cart_totals table tr { padding: 11px 0; }
body.ov-shop2.woocommerce-cart .cart_totals table .order-total :is(th, td) { font-size: 20px !important; }
body.ov-baender--shop .cart-totals-actions { padding: 0; }
/* Alle Bezahlknoepfe gleich hoch und gleich breit. Die Knoepfe von
   PayPal und Google/Apple Pay sind Fremdrahmen — ihre Hoehe kommt aus den
   Einstellungen der Anbieter, hier werden nur die Huellen angeglichen. */
body.ov-shop2.woocommerce-cart .wc-proceed-to-checkout { gap: 10px; margin-top: 16px; }
body.ov-baender--shop .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 20px;
    font-size: 17px;
}

/* Leere Huellen (Klarna-Hinweis, der hier abgeschaltet ist) behielten
   ihre 2 x 20 px Aussenabstand — Leerraum unter den Bezahlknoepfen. */
body.ov-baender--shop .cart-totals-actions > div:empty { margin: 0; }
body.ov-baender--shop .cart-totals-actions { gap: 0; }

/* --- Mehr aus dem Shop --- */
body.ov-shop2.woocommerce-cart .ov-korb-empfehlung { margin-top: 40px; }
body.ov-shop2 .ov-korb-leer .ov-korb-empfehlung { margin-top: 36px; }
body.ov-shop2 .ov-korb-empfehlung__kopf { margin-bottom: 14px; gap: 12px; }
body.ov-shop2 .ov-korb-empfehlung__kopf h2 { font-size: 22px; line-height: 1.2; }
body.ov-shop2 .ov-korb-empfehlung__alle { white-space: nowrap; font-size: 15px; }
body.ov-shop2 .ov-korb-empfehlung ul.products { gap: 16px !important; }

/* --- Leerer Warenkorb --- */
body.ov-shop2 .ov-korb-leer__oben { gap: 16px; }
body.ov-shop2 .ov-korb-leer__karte { padding: 22px 18px; gap: 14px; border-radius: 28px 12px 24px 12px; }
body.ov-shop2 .ov-korb-leer__karte .ov-vute-confused img { width: 120px; }
body.ov-shop2 .ov-korb-leer__text h2 { font-size: 24px; }
body.ov-shop2 .ov-korb-leer__text p { margin-bottom: 16px; font-size: 15.5px; }
body.ov-shop2 .ov-korb-leer__knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 24px;
}


/* ===================================================================
   F  Kasse (WooCommerce Blocks)
   ===================================================================
   Die Felder standen um Buehne + Schritt + Optionsrahmen eingerueckt
   (32 + 16 + 8 px) und waren nur 294 von 390 px breit. */
body.ov-baender--shop .wp-block-woocommerce-checkout { padding-top: 6px; }
body.ov-baender--shop .wc-block-checkout { margin-bottom: 0; }
/* Die Schritte tragen seit dem Umbau eigene Karten (baender-shop.css,
   Abschnitt „Ebenen der Kasse“). Hier wird die Karte nur enger gezogen,
   NICHT abgeschaltet — sonst laege am Handy wieder alles flach auf
   einer Flaeche. Diese Datei laeuft zuletzt und hat das letzte Wort. */
body.ov-baender--shop .wc-block-components-checkout-step {
    padding: 22px 18px 24px;
    margin-bottom: 14px;
    border-radius: 28px 12px 26px 14px;
}
body.ov-baender--shop .wc-block-components-checkout-step:nth-of-type(even) {
    border-radius: 12px 28px 14px 26px;
}
body.ov-baender--shop .wc-block-components-checkout-step__content { padding: 0 !important; }
body.ov-baender--shop form.wc-block-checkout__form > div:empty { margin: 0; }
body.ov-baender--shop .wc-block-components-checkout-step__heading-container { margin-bottom: 12px; }
body.ov-baender--shop .wc-block-components-checkout-step__heading { margin-bottom: 0; }
body.ov-baender--shop .wc-block-components-checkout-step__title { font-size: 21px; margin-bottom: 0; padding-left: 0; gap: 11px; }
/* Die Nummer eine Spur kleiner, damit die Ueberschrift einzeilig bleibt */
body.ov-baender--shop .wc-block-components-checkout-step__title::before {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}
/* Am Handy steht die Beschreibung unter der Nummer statt daneben */
body.ov-baender--shop .wc-block-components-checkout-step__description { margin: 0 0 12px; }
body.ov-baender--shop .wc-block-components-radio-control,
body.ov-baender--shop .wc-block-components-radio-control--highlight-checked { padding: 0 !important; }
body.ov-baender--shop .wc-block-components-radio-control__option { margin-bottom: 8px; }
body.ov-baender--shop .wc-block-components-radio-control-accordion-content { padding: 12px 14px 14px; }

/* Schnellkauf-Karte am Handy enger (Flaeche kommt aus baender-shop.css) */
body.ov-baender--shop .wp-block-woocommerce-checkout-express-payment-block:has(.wc-block-components-express-payment) {
    padding: 18px 16px;
    margin-bottom: 16px;
    border-radius: 28px 12px 26px 14px;
}
/* Express-Kasse: Rahmen und Luft zurueckgenommen */
body.ov-baender--shop .wc-block-components-express-payment--checkout { margin-bottom: 18px; }
body.ov-baender--shop .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content { padding: 16px 12px 12px; }
body.ov-baender--shop .wc-block-components-express-payment-continue-rule { margin: 16px 0; }

/* Die aufklappbare Bestelluebersicht oben */
body.ov-baender--shop .wc-block-components-checkout-order-summary__title { padding: 14px 16px; }
body.ov-baender--shop .wc-block-components-checkout-order-summary__content { padding: 0 16px 12px; }

/* Bestellspalte (steht auf dem Handy unter den Eingaben) */
body.ov-baender--shop .wc-block-checkout__sidebar { padding: 18px 16px; border-radius: 28px 12px 24px 12px; }

/* Kaufknopf: volle Breite, gleiche Hoehe wie im Warenkorb */
body.ov-baender--shop .wc-block-checkout__actions { padding-bottom: 0; }
body.ov-baender--shop .wc-block-checkout__actions_row { display: flex; flex-direction: column-reverse; gap: 14px; }
body.ov-baender--shop .wc-block-components-checkout-place-order-button {
    width: 100%;
    min-height: 52px;
    padding: 12px 20px;
    font-size: 17px;
}
body.ov-baender--shop .wc-block-components-checkout-return-to-cart-button { align-self: center; }
/* Das seitliche Polster von Zustimmung und Kaufknopf (baender-shop.css
   setzt dort 30px, damit sie mit den Karten fluchten) waere am Handy
   verschenkte Breite. */
body.ov-baender--shop .wc-block-checkout__terms { margin: 10px 0 14px; padding-inline: 4px; font-size: 14px; }
body.ov-baender--shop .wc-block-checkout__actions { padding-inline: 4px; }


/* ===================================================================
   G  Mein Konto
   =================================================================== */
body.ov-baender--shop.woocommerce-account .woocommerce { gap: 18px; }
body.ov-baender--shop.woocommerce-account .content-block :where(h2) { font-size: 24px; margin: 0 0 12px; }
body.ov-baender--shop form.login,
body.ov-baender--shop form.register,
body.ov-baender--shop form.lost_reset_password {
    padding: 20px 16px;
    margin: 0 0 20px;
    border-radius: 28px 12px 24px 12px;
}
body.ov-baender--shop form.login .form-row,
body.ov-baender--shop form.register .form-row { margin: 0 0 14px; padding: 0; }
body.ov-baender--shop form.login input.input-text,
body.ov-baender--shop form.register input.input-text { height: 50px; font-size: 16px; }
/* "Angemeldet bleiben" und der Knopf standen gedrungen in einer Zeile —
   jetzt untereinander, der Knopf ueber die ganze Breite. */
body.ov-baender--shop form.login .form-row:has(.woocommerce-form-login__submit) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}
body.ov-baender--shop form.login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 10px; margin: 0; }
body.ov-baender--shop form.login .woocommerce-form-login__rememberme input { width: 20px; height: 20px; margin: 0; }
body.ov-baender--shop form.login button.button,
body.ov-baender--shop form.register button.button,
body.ov-baender--shop form.lost_reset_password button.button {
    width: 100%;
    min-height: 50px;
    margin: 0;
    font-size: 16px;
}
body.ov-baender--shop form.login .lost_password { margin: 4px 0 0; text-align: center; }
/* Kontonavigation als waagerechte Leiste, die seitlich weiterlaeuft —
   eine Liste mit sieben Zeilen stand vor jedem Inhalt. */
body.ov-baender--shop .woocommerce-MyAccount-navigation { padding: 8px; border-radius: 24px 12px 20px 12px; }
body.ov-baender--shop .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
body.ov-baender--shop .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
body.ov-baender--shop .woocommerce-MyAccount-navigation ul li { margin: 0; flex: none; }
body.ov-baender--shop .woocommerce-MyAccount-navigation ul li a { padding: 10px 16px; white-space: nowrap; font-size: 15px; }

/* Meldungen */
body.ov-baender--shop .woocommerce-info,
body.ov-baender--shop .woocommerce-message,
body.ov-baender--shop .woocommerce-error { padding: 14px 16px; margin: 0 0 16px; font-size: 15px; }

}  /* Ende max-width: 820px */


/* ===================================================================
   G2  Tablet hochkant (601–820 px)
   ===================================================================
   Einspaltig ueber die volle Breite waere das Produktbild hier 780 px
   hoch — ein ganzer Bildschirm, bevor Name und Preis kommen. */
@media (min-width: 601px) and (max-width: 820px) {
    body.ov-shop2.single-product div.product .woocommerce-product-gallery {
        width: 100%;
        max-width: 560px;
        justify-self: center;
    }
    body.ov-shop2 .shop2-hero__karussell { max-width: 460px; justify-self: start; }
}


/* ===================================================================
   H  Sehr schmale Handys (bis 380 px)
   =================================================================== */
@media (max-width: 380px) {
    body.ov-baender--shop { --m-rand: 14px; }
    body.ov-baender--shop.single-product div.product { padding: 0 6px; }
    body.ov-shop2.single-product div.product .summary { padding: 16px 12px 18px; }
    body.ov-shop2.single-product div.product .woocommerce-tabs { padding: 0 12px 20px !important; }
    body.ov-shop2 .shop2-btn { font-size: 14px; padding: 8px; }
    /* "Standardsortierung" passte hier nicht mehr in den Knopf. */
    body.ov-baender--shop .shop-filter-btn { padding: 0 12px; font-size: 14px; }
    body.ov-shop2 .shop2-sort__knopf { padding: 0 12px; gap: 6px; font-size: 13px; }
    body.ov-baender--shop.woocommerce-cart table.cart tr.cart_item { grid-template-columns: 64px minmax(0, 1fr) auto 32px; padding: 14px; }
    body.ov-baender--shop.woocommerce-cart table.cart td.product-thumbnail img { width: 64px; height: 64px; }
}