/* ===================================================================
   Der modernisierte Laden
   ===================================================================
   Liegt hinter baender-shop.css und haengt vollstaendig an body.ov-shop2.
   Ohne die Klasse aendert diese Datei nichts — sie wird dann gar nicht
   erst geladen (siehe inc/shop2.php).

   Die Palette bleibt die des Baender-Themes: Lila auf Apricot, gewellte
   Kanten, dieselben Rundungen. Neu ist nur die Reihenfolge — erst Ware,
   dann Text — und die Dichte der Karten.

   Aufbau dieser Datei:
     1  Hero
     2  Kennzahlen
     3  Chips
     4  Karten und Plaketten
     5  Raster, das sich an die Zahl der Artikel anpasst
     6  Ausblick-Kachel
     7  "Warum OpenVuture"
     8  Produktseite
     9  Schmale Ansichten
   =================================================================== */


/* ===================================================================
   1  Hero
   ===================================================================
   Der Kaufweg bekam bisher eine FLACHE Platte (szene--flach), weil er
   ruhig sein soll. Der Hero ist die eine Ausnahme: er traegt die Welle
   wie die Inhaltsseiten, denn er ist der Einstieg und kein Arbeitsschritt.

   Damit gilt hier auch der Abstand der Inhaltsseiten: die Welle haengt
   um --welle nach unten ueber und schnitte sonst in die erste Zeile.
   baender-shop.css setzt padding-top mit !important (wegen i18n-geo.css),
   deshalb muss es hier ebenso stehen. */
/* NUR die Shop-Uebersicht — dort steht der Hero mit der Welle.
   ov-shop2 liegt auf dem ganzen Kaufweg, und Warenkorb, Kasse und Konto
   haben eine FLACHE Platte ohne Ueberstand. Der Abstand haette dort eine
   Luecke von 160 px ueber den Inhalt gelegt. */
body.ov-shop2.post-type-archive-product #main.main-content {
    padding-top: calc(var(--welle) + 40px) !important;
}

body.ov-shop2 .szene--shop2 {
    /* Der Einstieg soll auf einen Blick Text UND Ware zeigen, ohne dass
       man dafuer scrollen muss. Deshalb eine Mindesthoehe statt nur
       Innenabstand — die Kopfleiste und das Umbau-Band gehen davon ab. */
    min-height: min(86vh, 900px);
    padding: 120px 0 128px;
    align-items: center;
    /* Ueber die Buehne: #main traegt z-index 10 und eine deckende
       Apricot-Flaeche und wuerde den Wellenueberstand sonst uebermalen. */
    z-index: 11;
}

body.ov-shop2 .shop2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
}

body.ov-shop2 .shop2-hero__text { min-width: 0; }

body.ov-shop2 .shop2-hero h1 {
    font-size: clamp(34px, 4.1vw, 62px);
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}

body.ov-shop2 .shop2-hero__lead {
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.62;
    margin: 24px 0 0;
    max-width: 46ch;
    opacity: 0.92;
}

body.ov-shop2 .shop2-hero__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

body.ov-shop2 .shop2-btn {
    display: inline-block;
    border-radius: 999px;
    padding: 14px 28px;
    font-family: var(--fd);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    border: 2px solid var(--apri);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
/* BEIDE Knoepfe haben eine Flaeche. Ein blosser Umriss auf der Platte
   liest sich als durchsichtig und nicht als Knopf; unterschieden werden
   sie ueber die FARBE, nicht ueber "gefuellt gegen leer".
   Zweitrangig ist der dunklere Ton der Kopf- und Fussleiste — er steht
   klar auf der Platte und nimmt dem ersten Knopf nichts weg. */
body.ov-shop2 .shop2-btn--voll {
    background: var(--apri);
    color: var(--lila);
    border-color: var(--apri);
}
body.ov-shop2 .shop2-btn--leer {
    background: var(--band);
    color: var(--apri);
    border-color: var(--band);
}
body.ov-shop2 .shop2-btn--leer:hover { border-color: var(--apri); }
body.ov-shop2 .shop2-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

/* --- Die Ware im Hero ------------------------------------------- */
/* Das Bild liegt auf einer hellen Flaeche: Produktbilder bringen eigene
   Farben mit und stehen auf Apricot ruhiger als auf Lila. Dieselbe
   Entscheidung wie bei der Karte. */
body.ov-shop2 .shop2-hero__karussell {
    justify-self: end;
    width: 100%;
    max-width: 540px;
}

/* Alle Folien liegen in DERSELBEN Rasterzelle uebereinander. Damit gibt
   die hoechste die Hoehe vor und beim Wechsel springt nichts. */
body.ov-shop2 .shop2-hero__buehne {
    display: grid;
    grid-template-areas: "folie";
}
body.ov-shop2 .shop2-hero__ware {
    grid-area: folie;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Nur bei mehreren Artikeln wird geblendet — bei einem einzigen steht er
   einfach da und braucht weder Deckkraft noch Zeitgeber. */
body.ov-shop2 .shop2-hero__karussell--mehrere .shop2-hero__ware {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s;
}
body.ov-shop2 .shop2-hero__karussell--mehrere .shop2-hero__ware.ist-da {
    opacity: 1;
    visibility: visible;
}

/* --- Punkte --- */
body.ov-shop2 .shop2-hero__punkte {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 16px;
}
body.ov-shop2 .shop2-punkt {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 2px solid var(--apri);
    border-radius: 999px;
    background: none;
    cursor: pointer;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
}
body.ov-shop2 .shop2-punkt.ist-da { width: 26px; background: var(--apri); }
body.ov-shop2 .shop2-punkt:hover { background: rgba(255, 187, 138, 0.5); }

body.ov-shop2 .shop2-hero__rahmen {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 44px 18px 40px 20px;
    background: var(--apri);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

body.ov-shop2 .shop2-hero__rahmen img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ov-shop2 .shop2-hero__ware:hover .shop2-hero__rahmen img { transform: scale(1.05); }

/* Name und Preis als Bildunterschrift.

   Zwei Fassungen sind hier durchgefallen:
   - eine helle Pille UNTER dem Bild las sich wie ein Preisschild, also
     wie ein Angebot;
   - ein Verlauf IM Bild lag genau auf dem Logo des Motivs — die
     Produktbilder sind hier mittig aufgebaute Grafiken, jede
     Ueberlagerung am unteren Rand trifft etwas.

   Geblieben ist die schlichte Unterschrift: kein Kasten, keine Flaeche,
   nur Text in der Farbe des Abschnitts, buendig an den Bildkanten und
   dicht darunter. Damit gehoert sie sichtbar zum Bild, ohne etwas zu
   verdecken und ohne wie eine Auszeichnung zu wirken. */
body.ov-shop2 .shop2-hero__schild {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 16px 4px 0;
    color: var(--apri);
    /* Zurueckgenommen: die Unterschrift soll das Bild begleiten, nicht
       mit ihm um Aufmerksamkeit ringen. */
    opacity: 0.7;
}

/* Eine feine Linie stellt den Bezug zum Bild her, ohne einen Kasten
   daraus zu machen. */
body.ov-shop2 .shop2-hero__schild::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    margin-top: -11px;
    height: 2px;
    background: rgba(255, 187, 138, 0.22);
}

body.ov-shop2 .shop2-hero__name {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    /* Lange Namen duerfen das Schild nicht sprengen. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.ov-shop2 .shop2-hero__preis {
    font-weight: 700;
    font-size: 15.5px;
    white-space: nowrap;
}
/* Der Preis kommt in drei Schachteln und die innerste bringt ihre eigene
   Farbe mit — hier soll sie die des Schildes tragen. */
body.ov-shop2 .shop2-hero__preis .woocommerce-Price-amount,
body.ov-shop2 .shop2-hero__preis .woocommerce-Price-currencySymbol,
body.ov-shop2 .shop2-hero__preis bdi { color: var(--apri) !important; }


/* ===================================================================
   2  Kennzahlen
   ===================================================================
   Drei belegte Angaben zwischen Hero und Ware. Sie stehen auf Apricot,
   also in Lila, und sind durch senkrechte Haarlinien getrennt. */
/* ===================================================================
   3  Chips
   ===================================================================
   Die Kategorien standen bisher nur hinter dem Filter-Knopf. Offen
   darunter sind es ein Griff statt zwei — so macht es jede Vorlage.

   Der Filter-Knopf waere daneben ein zweiter Weg zum selben Ziel und
   faellt deshalb weg, sobald Chips da sind. */
body.ov-shop2 .shop2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 34px;
}

body.ov-shop2 .shop2-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* Eine leise Flaeche statt eines blossen Umrisses — sonst liest sich
       der nicht gewaehlte Chip als durchsichtig. Nicht dunkler als 0,07:
       darueber faellt die lila Schrift unter die Kontrastnorm. */
    background: rgba(97, 63, 117, 0.07);
    color: var(--lila);
    border: 2px solid var(--lila);
    border-radius: 999px;
    padding: 9px 18px;
    font: inherit;
    font-family: var(--fd);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
body.ov-shop2 .shop2-chip:hover { background: rgba(97, 63, 117, 0.12); }
body.ov-shop2 .shop2-chip.active { background: var(--lila); color: var(--apri); }

body.ov-shop2 .shop2-chip__zahl {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(97, 63, 117, 0.16);
}
body.ov-shop2 .shop2-chip.active .shop2-chip__zahl { background: rgba(255, 187, 138, 0.24); }

/* Zwei Wege zum selben Ziel sind einer zu viel. */
body.ov-shop2 .shop2-chips ~ .shop-controls .shop-filter-wrap,
body.ov-shop2 .shop-controls:has(~ .shop2-chips) .shop-filter-wrap { display: none; }


/* ===================================================================
   4  Karten und Plaketten
   ===================================================================
   Die Karte selbst stand schon gut da (baender-shop.css). Was fehlte,
   war die Reaktion beim Ueberfahren und ein Hinweis auf der Kachel. */

/* Der Zoom braucht einen Rahmen, der ihn beschneidet. Im WooCommerce-
   Raster steht das Bild ohne Huelle im Link — deshalb beschneidet hier
   die KARTE, und das Bild behaelt seine runden Ecken. */
body.ov-shop2 ul.products li.product { position: relative; }
body.ov-shop2 ul.products li.product a img {
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ov-shop2 ul.products li.product:hover a img { transform: scale(1.045); }

/* Der Knopf faerbt sich beim Ueberfahren der ganzen Karte mit — die
   Karte ist die Schaltflaeche, nicht nur der Knopf darauf. */
body.ov-shop2 ul.products li.product .button {
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
body.ov-shop2 ul.products li.product:hover .button { transform: translateY(-1px); }

/* --- Plaketten --------------------------------------------------- */
body.ov-shop2 .shop2-plaketten {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

body.ov-shop2 .shop2-plakette {
    display: inline-block;
    border-radius: 999px;
    padding: 6px 13px;
    font-family: var(--fd);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}
/* Nur die zwei Farben des Themes — Fremdtoene waren im Baender-Durchgang
   schon einmal zurueckzubauen. */
body.ov-shop2 .shop2-plakette--gratis { background: var(--apri); color: var(--lila); }
body.ov-shop2 .shop2-plakette--neu    { background: var(--lila); color: var(--apri); border: 2px solid var(--apri); }

/* WooCommerce setzt die eigene Sale-Plakette rechts — sonst laege sie
   auf den unseren. */
body.ov-shop2 ul.products li.product .onsale {
    position: absolute;
    top: 24px;
    right: 24px;
    left: auto;
    margin: 0;
    z-index: 3;
    background: var(--apri);
    color: var(--lila);
    border-radius: 999px;
    padding: 6px 13px;
    font-family: var(--fd);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    min-width: 0;
    min-height: 0;
    line-height: 1.3;
}


/* ===================================================================
   5  Raster nach Zahl der Artikel
   ===================================================================
   Es gibt nur EIN Layout. Unter sechs Artikeln traegt der Body zusaetzlich
   .ov-shop2--wenig, und dann laufen breitere Karten in weniger Spalten:
   ein angebrochenes Vierer-Raster liest sich sonst als Luecke.

   Ab sechs Artikeln faellt die Klasse weg und es bleibt beim Raster aus
   baender-shop.css. Beim Wachsen des Sortiments ist also nichts zu tun. */
body.ov-shop2--wenig ul.products {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 42px;
}
/* Ueber drei Karten in einer Reihe wirkt die einzelne wieder verloren. */
body.ov-shop2--wenig .shop-cat-section ul.products { max-width: 1180px; }

body.ov-shop2--wenig ul.products li.product .woocommerce-loop-product__title { font-size: 21px; }
body.ov-shop2--wenig ul.products li.product .price { font-size: 22px; }


/* ===================================================================
   6  Ausblick-Kachel
   ===================================================================
   Steht bei wenig Ware am Ende der letzten Reihe, damit sie nicht als
   Loch endet. Bewusst NICHT als Karte gezeichnet — gestrichelter Rahmen
   auf Apricot statt lila Flaeche —, damit sie nicht als Artikel gelesen
   wird. */
body.ov-shop2 .shop2-bald {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 30px 28px;
    min-height: 220px;
    color: var(--lila);
    background: none;
    border: 3px dashed rgba(97, 63, 117, 0.42);
    border-radius: 34px 14px 30px 16px;
}
body.ov-shop2 .shop2-bald::before,
body.ov-shop2 .shop2-bald::after { display: none; }

body.ov-shop2 .shop2-bald__zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 3px dashed rgba(97, 63, 117, 0.42);
    margin-bottom: 4px;
    opacity: 0.85;
}
body.ov-shop2 .shop2-bald__titel {
    font-family: var(--fd);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}
body.ov-shop2 .shop2-bald__text {
    font-size: 15px;
    line-height: 1.5;
    max-width: 32ch;
    opacity: 0.85;
}


/* ===================================================================
   7  "Warum OpenVuture"
   ===================================================================
   Der Fliesstext, der bisher VOR der Ware stand. Hinter der Ware und in
   Spalten gesetzt liest er sich als Nachwort statt als Huerde. */
body.ov-shop2 .shop2-warum {
    margin: 96px 0 0;
    padding: 48px 0 0;
    border-top: 3px solid rgba(97, 63, 117, 0.28);
    color: var(--lila);
}

body.ov-shop2 .shop2-warum__titel {
    font-family: var(--fd);
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 800;
    margin: 0 0 28px;
    color: var(--lila);
}

body.ov-shop2 .shop2-warum__spalten {
    columns: 2;
    column-gap: 56px;
}
body.ov-shop2 .shop2-warum__spalten p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.65;
    /* Ein Absatz soll nicht ueber den Spaltenumbruch zerrissen werden. */
    break-inside: avoid;
}


/* ===================================================================
   8  Produktseite
   =================================================================== */

/* Kennzeichnung ueber dem Titel — die Kaufspalte ist lila, also Apricot. */
body.ov-shop2.single-product .shop2-marke {
    display: block;
    font-family: var(--fm, var(--fd));
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.85;
    margin: 0 0 8px;
}

/* --- Vertrauenszeile --------------------------------------------- */
body.ov-shop2.single-product .shop2-vertrauen {
    list-style: none;
    margin: 22px 0 0;
    padding: 20px 0 0;
    border-top: 2px solid rgba(255, 187, 138, 0.32);
    display: flex;
    flex-direction: column;
    gap: 11px;
}
body.ov-shop2.single-product .shop2-vertrauen li {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.4;
}
body.ov-shop2.single-product .shop2-vertrauen li::before,
body.ov-shop2.single-product .shop2-vertrauen li::after { display: none; }
body.ov-shop2.single-product .shop2-vertrauen svg { flex: none; opacity: 0.9; }

/* --- Auswahl als Knoepfe statt Aufklappliste ---------------------- */
/* Die Liste bleibt im Dokument und fuehrt weiter die Auswahl — sie wird
   nur ausgeblendet. So bleiben Formular, Preisberechnung und die
   Rueckmeldung von WooCommerce unveraendert. */
body.ov-shop2.single-product .shop2-swatch-select { display: none !important; }

body.ov-shop2.single-product .shop2-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 2px 0;
}

body.ov-shop2.single-product .shop2-swatch {
    /* Eine leise Flaeche statt eines blossen Umrisses — ein Umriss auf
       der lila Karte liest sich als durchsichtig, nicht als Knopf. */
    background: rgba(255, 187, 138, 0.15);
    color: var(--apri);
    border: 2px solid var(--apri);
    border-radius: 999px;
    padding: 9px 18px;
    font: inherit;
    font-family: var(--fd);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s, color 0.16s, opacity 0.16s;
}
body.ov-shop2.single-product .shop2-swatch:hover { background: rgba(255, 187, 138, 0.18); }
body.ov-shop2.single-product .shop2-swatch[aria-pressed="true"] {
    background: var(--apri);
    color: var(--lila);
}
/* Nicht lieferbare Auswahl: sichtbar, aber erkennbar aus. */
body.ov-shop2.single-product .shop2-swatch[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Die Beschriftung der Auswahlzeile steht jetzt ueber den Knoepfen statt
   daneben — eine Tabellenspalte fuer ein Wort ist verschenkte Breite. */
body.ov-shop2.single-product div.product form.cart table.variations,
body.ov-shop2.single-product div.product form.cart table.variations tbody,
body.ov-shop2.single-product div.product form.cart table.variations tr,
body.ov-shop2.single-product div.product form.cart table.variations th,
body.ov-shop2.single-product div.product form.cart table.variations td {
    display: block;
    width: auto;
    text-align: left;
    padding: 0;
}
body.ov-shop2.single-product div.product form.cart table.variations tr { margin-bottom: 18px; }
body.ov-shop2.single-product div.product form.cart table.variations th.label {
    font-family: var(--fd);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 9px;
}

/* --- Galerie: Zaehler und Miniaturen ------------------------------ */
body.ov-shop2.single-product .woocommerce-product-gallery { position: relative; }

body.ov-shop2.single-product .shop2-zaehler {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 4;
    background: var(--lila);
    color: var(--apri);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--fd);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.24);
    pointer-events: none;
}


/* ===================================================================
   9  Schmale Ansichten
   =================================================================== */

@media (max-width: 1100px) {
    body.ov-shop2 .shop2-hero {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    body.ov-shop2 .shop2-hero__karussell { justify-self: start; max-width: 380px; }
    body.ov-shop2 .shop2-warum__spalten { columns: 1; }
}

@media (max-width: 900px) {
    body.ov-shop2 .shop2-kennzahlen { padding: 8px 32px 44px; gap: 18px 34px; }
    body.ov-shop2--wenig ul.products { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 820px) {
    /* Auf dem Handy passen Ueberschrift, Einleitung, Knoepfe UND ein
       grosses Produktbild nicht zusammen auf das erste Bild. Statt die
       Mindesthoehe zu halten, wird hier gestrafft — das Produkt soll
       wenigstens angeschnitten mit im Blick sein. */
    body.ov-shop2 .szene--shop2 { padding: 44px 0 48px; min-height: 0; }
    body.ov-shop2 .shop2-hero { gap: 26px; }
    body.ov-shop2 .shop2-hero__lead { margin-top: 18px; font-size: 16px; line-height: 1.52; }
    body.ov-shop2 .shop2-hero__knoepfe { margin-top: 24px; }
    body.ov-shop2 .shop2-hero__karussell { max-width: 300px; }
    body.ov-shop2 .shop2-hero h1 { font-size: clamp(28px, 7vw, 38px); }

    /* Die Chips laufen waagerecht weiter statt umzubrechen — vier Zeilen
       Kategorien waeren auf dem Handy so hoch wie eine halbe Karte. */
    body.ov-shop2 .shop2-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -20px;
        padding-inline: 20px;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }
    body.ov-shop2 .shop2-chips::-webkit-scrollbar { display: none; }
    body.ov-shop2 .shop2-chip { flex: none; scroll-snap-align: start; }
}

@media (max-width: 560px) {
    body.ov-shop2 .shop2-hero__karussell { max-width: 250px; }
    body.ov-shop2 .shop2-hero__name { font-size: 16px; }
    body.ov-shop2 .shop2-hero__preis { font-size: 16px; }
    body.ov-shop2 .shop2-hero__knoepfe { gap: 10px; }
    body.ov-shop2 .shop2-btn { padding: 13px 22px; font-size: 15px; }
    body.ov-shop2 .shop2-kz { padding-left: 16px; }
    body.ov-shop2 .shop2-bald { min-height: 0; padding: 26px 22px; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    body.ov-shop2 .shop2-hero__rahmen img,
    body.ov-shop2 ul.products li.product a img,
    body.ov-shop2 .shop2-btn,
    body.ov-shop2 ul.products li.product .button { transition: none; }
    body.ov-shop2 .shop2-hero__ware:hover .shop2-hero__rahmen img,
    body.ov-shop2 ul.products li.product:hover a img { transform: none; }
}


/* ===================================================================
   10  Nachtrag: Zuruecksetzen-Link
   =================================================================== */

/* Der Zuruecksetzen-Link von WooCommerce stand als nackte Zeile unter den
   Knoepfen. Er gehoert neben die Auswahl und leiser als sie. */
body.ov-shop2.single-product div.product form.cart .reset_variations {
    display: inline-block;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--apri);
    opacity: 0.75;
    text-decoration: underline;
}
body.ov-shop2.single-product div.product form.cart .reset_variations:hover { opacity: 1; }


/* ===================================================================
   11  Die Karte auf dem Handy
   ===================================================================
   responsive.css baut die Produktkarte unter 768 px zu einer schmalen
   Listenzeile um: Bild 88 px links, Name einzeilig mit Auslassung,
   Preis und Knopf daneben. Das war die Sprache des alten Ladens.

   Hier steht wieder die KARTE — Bild oben, Name, Preis, Knopf darunter,
   wie auf dem Rechner und wie in jeder Vorlage. Der ganze Block drueben
   ist mit !important gesetzt, deshalb geht es nur mit demselben Mittel.
   =================================================================== */

@media (max-width: 768px) {
    body.ov-shop2 ul.products {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 18px !important;
        margin: 0 !important;
    }

    body.ov-shop2 ul.products li.product {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        align-items: stretch !important;
        padding: 12px 12px 16px !important;
        margin: 0 !important;
    }

    /* Der Link umschliesst Bild, Name und Preis. display:contents drueben
       loest ihn auf — hier soll er wieder eine Spalte sein. */
    body.ov-shop2 ul.products li.product .woocommerce-LoopProduct-link {
        display: flex !important;
        flex-direction: column !important;
    }

    body.ov-shop2 ul.products li.product a img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 0 14px !important;
        border-radius: 22px 10px 18px 11px !important;
        align-self: auto !important;
    }

    body.ov-shop2 ul.products li.product .woocommerce-loop-product__title {
        white-space: normal !important;      /* kein "Wallpaper „Repair, Rev…" mehr */
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        padding: 0 4px !important;
        margin: 0 0 6px !important;
    }

    body.ov-shop2 ul.products li.product .price {
        font-size: 18px !important;
        padding: 0 4px !important;
        margin: auto 0 12px !important;      /* schiebt den Knopf nach unten */
    }

    body.ov-shop2 ul.products li.product .button {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Auf der kleinen Karte sass die Plakette mitten auf dem Motiv. */
    body.ov-shop2 .shop2-plaketten { top: 20px; left: 20px; }
    body.ov-shop2 ul.products li.product .onsale { top: 20px; right: 20px; }
}

/* Unter 430 px ist eine zweite Spalte zu schmal fuer Name und Knopf. */
@media (max-width: 430px) {
    body.ov-shop2 ul.products { grid-template-columns: 1fr !important; }
}


/* ===================================================================
   12  Ausgangszustand des scrollgebundenen Aufbaus
   ===================================================================
   baender.css blendet Platte und Bauteile nur auf der Startseite und den
   Inhaltsseiten aus — im Kaufweg laeuft anime.js gar nicht, dort waere
   opacity:0 ein Blitzer, bis das Skript nachbessert.

   Die Shop-UEBERSICHT ist jetzt die Ausnahme: dort laeuft der Aufbau.
   Warenkorb, Kasse und Konto bleiben ausdruecklich aussen vor, sonst
   verschwaende dort der Inhalt fuer immer.

   Faellt anime.js aus, setzt script.js beides wieder auf sichtbar —
   die Notbremse laeuft vor dem Auszeichnen. */
html.js body.ov-shop2.post-type-archive-product .szene--shop2 .platte { opacity: 0; }
html.js body.ov-shop2.post-type-archive-product [data-bau] {
    opacity: 0;
    will-change: transform, opacity;
}

/* Wer Bewegung abbestellt hat, sieht alles sofort. baender.css setzt das
   fuer .ov-baender bereits mit !important — hier steht es noch einmal,
   weil die Auswahl oben eigene ist. */
@media (prefers-reduced-motion: reduce) {
    html.js body.ov-shop2 .platte,
    html.js body.ov-shop2 [data-bau] { opacity: 1 !important; }
}


/* ===================================================================
   14  Sortierung
   ===================================================================
   Das native <select> bleibt im Dokument und fuehrt weiter den Wert —
   sichtbar ist die eigene Liste daneben. Sie spricht dieselbe Sprache
   wie der Filter-Knopf: Pille, lila Flaeche, apricot Schrift.
   =================================================================== */
body.ov-shop2 .shop2-sort__select {
    /* Nicht display:none — ein verstecktes Pflichtfeld liesse sich sonst
       nicht mehr melden, und Browser behandeln es anders. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body.ov-shop2 .shop2-sort { position: relative; }

body.ov-shop2 .shop2-sort__knopf {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--apri);
    color: var(--lila);
    border: 2px solid var(--apri);
    border-radius: 999px;
    padding: 11px 20px;
    font: inherit;
    font-family: var(--fd);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
}
/* Auch im geoeffneten Zustand eine Flaeche — vorher wurde der Knopf
   zum blossen Umriss und wirkte durchsichtig. */
body.ov-shop2 .shop2-sort__knopf:hover,
body.ov-shop2 .shop2-sort__knopf[aria-expanded="true"] {
    background: var(--band);
    color: var(--apri);
    border-color: var(--band);
}
body.ov-shop2 .shop2-sort__pfeil { transition: transform 0.22s; flex: none; }
body.ov-shop2 .shop2-sort__knopf[aria-expanded="true"] .shop2-sort__pfeil { transform: rotate(180deg); }

body.ov-shop2 .shop2-sort__liste {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    min-width: 260px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--apri);
    border: 2px solid var(--lila);
    border-radius: 22px 8px 18px 10px;
    box-shadow: 0 14px 30px var(--schatten);
}

body.ov-shop2 .shop2-sort__zeile {
    margin: 0;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--lila);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
body.ov-shop2 .shop2-sort__zeile::before,
body.ov-shop2 .shop2-sort__zeile::after { display: none; }
body.ov-shop2 .shop2-sort__zeile:hover,
body.ov-shop2 .shop2-sort__zeile:focus-visible {
    background: var(--lila);
    color: var(--apri);
    outline: none;
}
body.ov-shop2 .shop2-sort__zeile[aria-selected="true"] {
    background: var(--lila);
    color: var(--apri);
}

/* Auf schmalen Geraeten sitzt die Leiste ueber die volle Breite — die
   Liste soll dann nicht rechts heraushaengen. */
@media (max-width: 820px) {
    body.ov-shop2 .shop2-sort,
    body.ov-shop2 .shop2-sort__knopf { width: 100%; }
    body.ov-shop2 .shop2-sort__knopf { justify-content: space-between; }
    body.ov-shop2 .shop2-sort__liste { left: 0; right: 0; min-width: 0; }
}


/* ===================================================================
   15  Die Szenen der Uebersicht
   ===================================================================
   Aufgebaut wie die Startseite: eine .szene je Streifen. Das Lila kommt
   NICHT als Hintergrundfarbe, sondern als ov_platte() darauf — eine
   absolut gesetzte Flaeche mit gewellten Kanten, die beim Scrollen
   einrollt und deren Wellen sich verwandeln. Alles das steht schon in
   baender.css und script.js; hier stehen nur die Masse.

   Der Kaufweg ist sonst bewusst ruhig gestellt (szene--flach, kein
   anime.js). Die Uebersicht ist die Ausnahme — sie ist der Einstieg,
   kein Arbeitsschritt.
   =================================================================== */

body.ov-shop2.post-type-archive-product #main.main-content {
    padding-top: 0 !important;
    padding-bottom: 0;
    /* Die Platte greift seitlich ueber den Rand hinaus (-16 %). */
    overflow-x: clip;
}

/* Deutlich flacher als die Szenen der Startseite: dort bekommt jede
   fast einen Bildschirm, hier stehen Inhalte, die zusammengehoeren. */
body.ov-shop2 .szene--shop2-nutzen,
body.ov-shop2 .szene--shop2-ware,
body.ov-shop2 .szene--shop2-warum {
    min-height: 0;
    align-items: flex-start;
}
/* WICHTIG: die Wellen der NACHBARN ragen um --welle (120 px) in einen
   hellen Abschnitt hinein. 140 px Innenabstand liessen davon ganze
   20 px uebrig — gemessen, nicht geschaetzt. Wo eine Welle hineinragt,
   muss --welle deshalb AUFGESCHLAGEN werden.

   Freiraum, der am Ende wirklich steht: hell rund 150 px, dunkel rund
   210 px (dort ragt nichts herein). */
body.ov-shop2 .szene--shop2-nutzen.auf-apri {
    /* oben die Welle des Hero, unten die obere Welle der Ware */
    padding-top:    calc(var(--welle) + 180px);
    padding-bottom: calc(var(--welle) + 180px);
}
body.ov-shop2 .szene--shop2-ware {
    /* die eigenen Wellen liegen AUSSERHALB — nichts gegenzurechnen */
    padding: 252px 0 264px;
}
body.ov-shop2 .szene--shop2-warum.auf-apri {
    /* oben die untere Welle der Ware, unten folgt der Fuss */
    padding-top:    calc(var(--welle) + 180px);
    padding-bottom: 204px;
}

body.ov-shop2 .szene--shop2 .content-block {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
}


/* ===================================================================
   16  Was ein Kauf bewirkt — EIN Block, nicht drei Kaertchen
   ===================================================================
   Ein grosser Kasten auf hellem Grund, innen drei Spalten, getrennt
   durch feine senkrechte Linien. Jede Spalte laesst sich anfassen und
   erklaert sich dann selbst.
   =================================================================== */
/* Kein Rahmen, kein Kasten — die drei Spalten stehen frei auf dem
   Streifen und sind nur durch feine senkrechte Linien getrennt. */
body.ov-shop2 .shop2-nutzen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.ov-shop2 .shop2-kz {
    position: relative;
    border-left: 2px solid rgba(97, 63, 117, 0.28);
}
body.ov-shop2 .shop2-kz:first-child { border-left: none; }
body.ov-shop2 .shop2-kz:first-child .shop2-kz__griff { padding-left: 0; }

body.ov-shop2 .shop2-kz__griff {
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    font: inherit;
    color: var(--lila);
    background: none;
    border: none;
    padding: 8px 34px 10px;
    border-radius: 18px;
    cursor: pointer;
    transition: background 0.2s;
}
body.ov-shop2 .shop2-kz__griff:hover,
body.ov-shop2 .shop2-kz__griff:focus-visible,
body.ov-shop2 .shop2-kz__griff[aria-expanded="true"] { background: rgba(97, 63, 117, 0.09); }

body.ov-shop2 .shop2-kz__zeichen { display: block; margin-bottom: 18px; }

body.ov-shop2 .shop2-kz__wert {
    display: block;
    font-family: var(--fd);
    font-size: clamp(26px, 2.3vw, 36px);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 8px;
}
body.ov-shop2 .shop2-kz__text {
    display: block;
    font-size: 16px;
    line-height: 1.45;
}

body.ov-shop2 .shop2-kz__mehr {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 700;
    opacity: 0.62;
    transition: opacity 0.2s;
}
body.ov-shop2 .shop2-kz__griff:hover .shop2-kz__mehr,
body.ov-shop2 .shop2-kz__griff:focus-visible .shop2-kz__mehr,
body.ov-shop2 .shop2-kz__griff[aria-expanded="true"] .shop2-kz__mehr { opacity: 1; }

/* Die Erklaerung liegt UEBER dem Inhalt darunter statt ihn wegzuschieben:
   ein Aufklappen im Fluss laesst beim Ueberfahren die halbe Seite
   springen. */
body.ov-shop2 .shop2-kz__erklaerung {
    position: absolute;
    top: calc(100% + 14px);
    left: -3px;
    right: -3px;
    z-index: 45;
    background: var(--lila);
    color: var(--apri);
    border-radius: 22px 8px 18px 10px;
    padding: 20px 22px;
    font-size: 15px;
    line-height: 1.5;
    box-shadow: 0 14px 30px var(--schatten);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
body.ov-shop2 .shop2-kz__erklaerung::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 40px;
    width: 14px;
    height: 14px;
    background: var(--lila);
    transform: rotate(45deg);
    border-radius: 3px;
}
body.ov-shop2 .shop2-kz:hover .shop2-kz__erklaerung,
body.ov-shop2 .shop2-kz:focus-within .shop2-kz__erklaerung,
body.ov-shop2 .shop2-kz__griff[aria-expanded="true"] + .shop2-kz__erklaerung {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ===================================================================
   17  Die Ware auf dunklem Grund
   ===================================================================
   Das ganze Raster war fuer Apricot als Grund gebaut: lila Karten, lila
   Schrift, lila Umrisse. Auf dem dunklen Band stuende damit Lila auf
   Lila. Hier kehrt sich alles um — genau die Regel des Themes:
   auf Lila steht Apricot, auf Apricot steht Lila.
   =================================================================== */

/* --- Bedienleiste --- */
/* Ein blosser Umriss auf der Platte war dieselbe Farbe wie der Grund —
   die Leiste verschwand darin. Sie bekommt eine eigene, hellere Flaeche
   aus derselben Palette (Apricot mit wenig Deckkraft), damit sie als
   Bauteil zu erkennen ist. */
body.ov-shop2 .szene--shop2-ware .shop-controls {
    background: rgba(255, 187, 138, 0.15);
    border: 2px solid rgba(255, 187, 138, 0.34);
    box-shadow: 0 6px 18px rgba(38, 24, 48, 0.22);
}
body.ov-shop2 .szene--shop2-ware .woocommerce-result-count { color: var(--apri); }

/* Das Suchfeld selbst hat KEINEN eigenen Grund — die apricotfarbene
   Pille kommt von der Huelle .shop-search. Innen bleibt deshalb alles
   lila. Ein erster Versuch faerbte Platzhalter, Lupe und Kreuz apricot;
   sie standen damit apricot auf apricot und waren verschwunden. */
body.ov-shop2 .szene--shop2-ware .shop-search__icon,
body.ov-shop2 .szene--shop2-ware .shop-search__clear,
body.ov-shop2 .szene--shop2-ware .shop-search .shop-search__input { color: var(--lila); }
body.ov-shop2 .szene--shop2-ware .shop-search .shop-search__input::placeholder {
    color: var(--lila);
    opacity: 1;
}

/* --- Chips --- */
body.ov-shop2 .szene--shop2-ware .shop2-chip {
    color: var(--apri);
    border-color: var(--apri);
    background: rgba(255, 187, 138, 0.15);
}
body.ov-shop2 .szene--shop2-ware .shop2-chip:hover { background: rgba(255, 187, 138, 0.18); }
body.ov-shop2 .szene--shop2-ware .shop2-chip.active { background: var(--apri); color: var(--lila); }
body.ov-shop2 .szene--shop2-ware .shop2-chip__zahl { background: rgba(255, 187, 138, 0.22); }
body.ov-shop2 .szene--shop2-ware .shop2-chip.active .shop2-chip__zahl { background: rgba(97, 63, 117, 0.2); }

/* --- Kategorie-Ueberschrift --- */
body.ov-shop2 .szene--shop2-ware .shop-cat-title { color: var(--apri); }
body.ov-shop2 .szene--shop2-ware .shop-cat-line  { background: rgba(255, 187, 138, 0.5); }
body.ov-shop2 .szene--shop2-ware .shop-cat-count {
    background: var(--apri);
    color: var(--lila);
    border-color: var(--apri);
}

/* --- Die Karte: aus Lila wird Apricot --- */
body.ov-shop2 .szene--shop2-ware ul.products li.product {
    background: var(--apri);
    color: var(--lila);
    box-shadow: 0 8px 18px rgba(38, 24, 48, 0.32);
}
body.ov-shop2 .szene--shop2-ware ul.products li.product .woocommerce-loop-product__title,
body.ov-shop2 .szene--shop2-ware ul.products li.product .price,
body.ov-shop2 .szene--shop2-ware ul.products li.product .woocommerce-Price-amount,
body.ov-shop2 .szene--shop2-ware ul.products li.product .woocommerce-Price-currencySymbol,
body.ov-shop2 .szene--shop2-ware ul.products li.product .amount,
body.ov-shop2 .szene--shop2-ware ul.products li.product bdi { color: var(--lila) !important; }

/* Das Bild lag auf Apricot — auf der apricotfarbenen Karte gaebe das eine
   unsichtbare Kante. Es bekommt den dunklen Ton als Grund. */
body.ov-shop2 .szene--shop2-ware ul.products li.product a img { background: var(--lila); }

body.ov-shop2 .szene--shop2-ware ul.products li.product .button {
    background: var(--lila);
    color: var(--apri);
}
body.ov-shop2 .szene--shop2-ware ul.products li.product .button:hover { color: var(--apri); }

/* --- Plaketten --- */
body.ov-shop2 .szene--shop2-ware .shop2-plakette--gratis { background: var(--lila); color: var(--apri); }
body.ov-shop2 .szene--shop2-ware .shop2-plakette--neu {
    background: var(--apri);
    color: var(--lila);
    border: 2px solid var(--lila);
}
body.ov-shop2 .szene--shop2-ware ul.products li.product .onsale {
    background: var(--lila);
    color: var(--apri);
}

/* --- Ausblick-Kachel --- */
body.ov-shop2 .szene--shop2-ware .shop2-bald {
    color: var(--apri);
    border-color: rgba(255, 187, 138, 0.5);
}
body.ov-shop2 .szene--shop2-ware .shop2-bald__zeichen { border-color: rgba(255, 187, 138, 0.5); }

/* --- Kein Treffer --- */
body.ov-shop2 .szene--shop2-ware .shop-no-results { color: var(--apri); }

/* --- Sortierung und Filter --- */
body.ov-shop2 .szene--shop2-ware .shop2-sort__liste {
    border-color: var(--apri);
}
body.ov-shop2 .szene--shop2-ware .shop2-sort__knopf:hover,
body.ov-shop2 .szene--shop2-ware .shop2-sort__knopf[aria-expanded="true"] {
    background: var(--band);
    color: var(--apri);
    border-color: var(--band);
}


/* ===================================================================
   18  Schmale Ansichten der Baender
   =================================================================== */
@media (max-width: 1000px) {
    body.ov-shop2 .szene--shop2 > .buehne { padding: 0 32px; }
}

@media (max-width: 820px) {
    /* Auf dem Handy nicht das volle Mass — dort waeren 300 px zwei
       Bildschirme Leere am Stueck. Rund die Haelfte. */
    body.ov-shop2 .szene--shop2-nutzen.auf-apri {
        padding-top:    calc(var(--welle) + 90px);
        padding-bottom: calc(var(--welle) + 90px);
    }
    body.ov-shop2 .szene--shop2-ware { padding: 126px 0 134px; }
    body.ov-shop2 .szene--shop2-warum.auf-apri {
        padding-top:    calc(var(--welle) + 90px);
        padding-bottom: 108px;
    }

    /* Untereinander statt drei Spalten — mit waagerechten Trennlinien. */
    body.ov-shop2 .shop2-nutzen { grid-template-columns: 1fr; border-radius: 32px 14px 28px 16px; }
    body.ov-shop2 .shop2-kz {
        border-left: none;
        border-top: 2px solid rgba(97, 63, 117, 0.28);
    }
    body.ov-shop2 .shop2-kz:first-child { border-top: none; }
    body.ov-shop2 .shop2-kz__griff { padding: 26px 24px; border-radius: 0 !important; }

    /* Auf einer Spalte ist ein schwebendes Kaertchen unnoetig — die
       Erklaerung klappt hier im Fluss auf. */
    body.ov-shop2 .shop2-kz__erklaerung {
        position: static;
        transform: none;
        margin: 0 20px 22px;
        display: none;
    }
    body.ov-shop2 .shop2-kz__erklaerung::before { display: none; }
    body.ov-shop2 .shop2-kz__griff[aria-expanded="true"] + .shop2-kz__erklaerung {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}


/* ===================================================================
   19  Ruhigeres Raster
   ===================================================================
   Bedienleiste, Kategorieueberschrift und Karten standen zu dicht
   beieinander. Mehr Luft zwischen den Ebenen, mehr Luft in der Karte.
   =================================================================== */
body.ov-shop2 .szene--shop2-ware .shop-controls { margin-bottom: 64px; }
body.ov-shop2 .szene--shop2-ware .shop2-chips   { margin-bottom: 52px; }
body.ov-shop2 .szene--shop2-ware .shop-cat-header { margin-bottom: 34px; }
body.ov-shop2 .szene--shop2-ware .shop-cat-section { margin-bottom: 96px; }
body.ov-shop2 .szene--shop2-ware .shop-cat-section:last-of-type { margin-bottom: 0; }

body.ov-shop2 .szene--shop2-ware ul.products { gap: 42px; }
body.ov-shop2 .szene--shop2-ware ul.products li.product { padding: 18px 18px 24px; }
body.ov-shop2 .szene--shop2-ware ul.products li.product a img { margin-bottom: 20px; }
body.ov-shop2 .szene--shop2-ware ul.products li.product .woocommerce-loop-product__title { margin-bottom: 10px; }
body.ov-shop2 .szene--shop2-ware ul.products li.product .price { margin-bottom: 20px; }

@media (max-width: 820px) {
    body.ov-shop2 .szene--shop2-ware .shop-controls { margin-bottom: 34px; }
    body.ov-shop2 .szene--shop2-ware .shop-cat-section { margin-bottom: 60px; }
    body.ov-shop2 .szene--shop2-ware ul.products { gap: 22px !important; }
}


/* ===================================================================
   20  Produktseite: Ausrichtung, Menge, Reiter
   =================================================================== */

/* Bild und Kaufspalte standen NICHT auf einer Linie: die Kaufspalte ist
   `position: sticky; top: 118px`, und der Browser setzt diesen Versatz
   schon bei Scrollstellung 0 an — gemessen exakt 118 px, mit
   `position: static` sofort 0.

   Sticky bringt hier ohnehin nichts: die Kaufspalte ist hoeher als das
   Bild (925 gegen 735 px), es gibt also gar keinen Weg, den sie
   mitlaufen koennte. Sie steht jetzt im Fluss und damit buendig. */
body.ov-shop2.single-product div.product .summary {
    position: static;
    top: auto;
}

/* Die Reiter: der NICHT gewaehlte war ein blosser Umriss und las sich
   als durchsichtig. Beide haben jetzt eine Flaeche, unterschieden wird
   ueber die Farbe. */
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li {
    /* 0,12 verdunkelte den Grund so weit, dass die lila Schrift auf
       4,37:1 fiel — unter der Norm. 0,07 laesst 4,67:1 stehen und ist
       als Flaeche immer noch deutlich zu sehen. */
    background: rgba(97, 63, 117, 0.07);
}
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li:hover,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li:focus-within,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active:hover {
    background: var(--lila);
}
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li a { color: var(--lila); }
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li:hover a,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li:focus-within a,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active a,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active:hover a { color: var(--apri); }

/* Wird der Artikel einzeln verkauft (jeder Download), bleibt vom
   Mengenfeld eine leere Huelle stehen — sie liess links neben dem
   Kaufknopf eine Luecke. Weg damit, der Knopf nimmt die volle Breite. */
body.ov-shop2.single-product div.product form.cart .quantity:not(:has(input[type="number"])) {
    display: none;
}
body.ov-shop2.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    width: 100%;
}


/* ===================================================================
   21  Ruhende Knoepfe bekommen eine EIGENE Farbe
   ===================================================================
   Eine halbdurchsichtige Toenung derselben Farbe wie der Grund ist
   keine Flaeche — sie sieht aus wie der Hintergrund. Genau das war das
   Ergebnis der vorherigen Fassung (7 % Lila auf Apricot, 15 % Apricot
   auf Lila): kaum zu unterscheiden.

   Der Laden hat eine dritte Flaeche in der Palette: --band (#4C325D),
   der Ton von Kopf- und Fussleiste. Der ist auf BEIDEN Gruenden klar
   zu sehen. Deshalb gilt ab hier:

     ruhend    --band mit apricoter Schrift   (6,62:1)
     gewaehlt  auf Apricot: --lila            (5,14:1)
               auf Lila:    Apricot mit lila Schrift (5,14:1)
   =================================================================== */

/* --- Reiter der Produktseite (Grund: Apricot) --- */
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li {
    background: var(--band);
    border-color: var(--band);
}
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li a { color: var(--apri); }

body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li:hover,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li:focus-within,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active:hover {
    background: var(--lila);
    border-color: var(--apri);
}
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li:hover a,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li:focus-within a,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active a,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active:hover a { color: var(--apri); }

/* --- Format-Knoepfe auf der lila Kaufkarte --- */
body.ov-shop2.single-product .shop2-swatch {
    background: var(--band);
    border-color: var(--band);
    color: var(--apri);
}
body.ov-shop2.single-product .shop2-swatch:hover { background: var(--lila); border-color: var(--apri); }
body.ov-shop2.single-product .shop2-swatch[aria-pressed="true"] {
    background: var(--apri);
    border-color: var(--apri);
    color: var(--lila);
}

/* --- Kategorie-Chips --- */
body.ov-shop2 .shop2-chip {
    background: var(--band);
    border-color: var(--band);
    color: var(--apri);
}
body.ov-shop2 .shop2-chip:hover { background: var(--lila); border-color: var(--apri); }
body.ov-shop2 .shop2-chip.active {
    background: var(--apri);
    border-color: var(--apri);
    color: var(--lila);
}
body.ov-shop2 .shop2-chip__zahl { background: rgba(255, 187, 138, 0.22); }
body.ov-shop2 .shop2-chip.active .shop2-chip__zahl { background: rgba(97, 63, 117, 0.2); }
body.ov-shop2 .szene--shop2-ware .shop2-chip {
    background: var(--band);
    border-color: var(--band);
    color: var(--apri);
}
body.ov-shop2 .szene--shop2-ware .shop2-chip.active { background: var(--apri); color: var(--lila); }


/* ===================================================================
   22  Bild und Kaufkarte gleich hoch
   ===================================================================
   Sie standen mit 735 gegen 925 px verschieden hoch da. `align-items:
   start` laesst jede Spalte ihre eigene Hoehe behalten; `stretch` zieht
   beide auf die Hoehe der Zeile. Das Bild sitzt dann mittig in seiner
   Platte statt oben zu kleben. */
body.ov-shop2.single-product div.product { align-items: stretch; }
body.ov-shop2.single-product div.product .woocommerce-product-gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ===================================================================
   23  Bild und Kaufkarte auf EINER Flaeche
   ===================================================================
   Vorher waren es zwei getrennte lila Karten nebeneinander, mit einer
   Apricot-Fuge dazwischen. Jetzt liegt eine einzige Platte hinter
   beiden.

   Gebaut als Pseudo-Element des Rasters: ein ::before ist selbst ein
   Rasterelement und laesst sich damit exakt auf die erste Zeile und
   ueber beide Spalten legen — inklusive der Fuge. Kein Umbau der
   Vorlage noetig.

   Die Reiter liegen in Zeile 2 und bleiben davon unberuehrt. */
body.ov-shop2.single-product div.product {
    position: relative;
    /* Die Fuge zwischen Bild und Kaufspalte darf kleiner werden — sie
       trennt jetzt keine zwei Karten mehr, sondern gliedert eine. */
    column-gap: 12px;
}

body.ov-shop2.single-product div.product::before {
    content: "";
    grid-row: 1;
    grid-column: 1 / -1;
    background: var(--lila);
    border-radius: 42px 18px 36px 20px;
    box-shadow: 0 8px 18px var(--schatten-karte);
    z-index: 0;
}

/* Beide Spalten geben ihre eigene Flaeche ab und liegen auf der
   gemeinsamen. Ihre Innenabstaende behalten sie. */
body.ov-shop2.single-product div.product .woocommerce-product-gallery,
body.ov-shop2.single-product div.product .summary {
    position: relative;
    z-index: 1;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
body.ov-shop2.single-product div.product .woocommerce-product-gallery { padding: 34px; }
body.ov-shop2.single-product div.product .summary { padding: 34px 38px 34px 22px; }

/* Dieselbe Schwelle wie in baender-shop.css, wo das Raster einspaltig
   wird — untereinander muss die Platte ueber BEIDE Zeilen gehen. */
@media (max-width: 1100px) {
    body.ov-shop2.single-product div.product::before { grid-row: 1 / 3; }
    body.ov-shop2.single-product div.product .summary { padding: 22px 34px 34px; }
}


/* ===================================================================
   24  Gewaehlt und ruhend deutlicher unterscheiden
   ===================================================================
   --lila und --band sind beide dunkles Lila und liegen dicht
   beieinander — die Farbe allein trennt sie zu schwach. Der gewaehlte
   Knopf bekommt deshalb zusaetzlich einen apricoten Ring.

   Der Ring liegt INNEN (inset) und ist ein box-shadow, kein Rand:
     - aussen waere er apricot auf apricotem Grund, also unsichtbar
       (erster Versuch, genau so passiert);
     - ein Rand aenderte die Groesse, ein Schatten nicht. Beide Knoepfe
       bleiben damit exakt gleich gross. */
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active,
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs li.active:hover {
    box-shadow: inset 0 0 0 2px var(--apri);
}
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs { gap: 16px; }

/* Dasselbe fuer die Format-Knoepfe und die Chips: dort ist der
   gewaehlte ohnehin apricot gefuellt, der Ring waere doppelt gemoppelt.
   Sie bleiben wie sie sind. */

/* --- Farbpunkte statt Farbnamen (21.09.2026) ----------------------------
   Daten aus inc/shop2.php (Meta _ov_farbwerte), Aufbau in shop2.js. Der
   Name steht hinter der Beschriftung ("Farbe: navy") und als Tooltip.

   Jeder Punkt traegt einen apricoten Rand: Schwarz, Navy oder ein Lilaton
   verschwaenden sonst auf der lila Kaufkarte. Der Zustand zeigt sich wie
   ueberall im Laden nur ueber die Farbe, nie ueber die Groesse:
   ruhend Rand, ueberfahren zusaetzlich ein --band-Ring, gewaehlt ein
   apricoter Ring. */
body.ov-shop2.single-product .shop2-swatches--farbe { gap: 14px; padding: 5px; margin-left: -5px; }

body.ov-shop2.single-product .shop2-swatch.shop2-swatch--farbe {
    width: 38px;
    height: 38px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--apri);
    background: var(--farbe, #888888);
    color: transparent;
    box-shadow: 0 0 0 3px var(--lila);
    transition: box-shadow 0.16s, opacity 0.16s;
}
body.ov-shop2.single-product .shop2-swatch.shop2-swatch--farbe:hover {
    background: var(--farbe, #888888);
    border-color: var(--apri);
    box-shadow: 0 0 0 3px var(--lila), 0 0 0 5px var(--band);
}
body.ov-shop2.single-product .shop2-swatch.shop2-swatch--farbe[aria-pressed="true"] {
    background: var(--farbe, #888888);
    border-color: var(--apri);
    box-shadow: 0 0 0 3px var(--lila), 0 0 0 5px var(--apri);
}
body.ov-shop2.single-product .shop2-swatch.shop2-swatch--farbe:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--lila), 0 0 0 5px var(--apri);
}
/* Nicht lieferbar: durchgestrichen wie die Textknoepfe — hier als
   Schraegstrich ueber dem Punkt, text-decoration greift ohne Text nicht. */
body.ov-shop2.single-product .shop2-swatch.shop2-swatch--farbe[disabled] {
    opacity: 0.4;
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1.5px), var(--apri) calc(50% - 1.5px),
            var(--apri) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
        var(--farbe, #888888);
}
body.ov-shop2.single-product .shop2-farbname {
    font-weight: 400;
    color: var(--apri);
}

/* ===================================================================
   25  Breitere Karte auf grossen Bildschirmen (21.09.2026)
   ===================================================================
   Auf einem 2460 px breiten Fenster blieben links und rechts der auf
   1580 px begrenzten Karte je rund 500 px leeres Apricot ("wirkt so
   leer"). Ab 1700 px waechst die Karte jetzt mit — bis 1960 px und nie
   ueber 94 % der Fensterbreite. Bei 1700 px sind 94 % ziemlich genau die
   bisherigen 1580 px, der Uebergang springt also nicht.
   Die Kaufspalte bekommt dabei etwas mehr Anteil als vorher (1,1 : 0,9
   statt 1,15 : 0,85), sonst wuerde fast nur das Bild groesser. */
@media (min-width: 1700px) {
    body.ov-shop2.single-product div.product {
        max-width: min(1960px, 94vw);
        grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
    }
}

/* ===================================================================
   26  Beschreibung als Teil der Produktkarte (21.09.2026)
   ===================================================================
   Vorher: unter der Karte eine dicke lila Linie, zwei Reiter und eine
   kurze Liste lose auf Apricot — "wirkt verloren", auf breiten Schirmen
   erst recht. Jetzt laeuft die lila Platte (div.product::before) auch
   ueber die zweite Zeile, und Beschreibung und Details stehen darin
   NEBENEINANDER, beide sofort sichtbar. Die Reiter entfallen: bei zwei
   kurzen Abschnitten versteckten sie nur Inhalt hinter einem Klick.
   Auf der lila Flaeche kehrt sich die Schrift wie in der Kaufspalte um. */
body.ov-shop2.single-product div.product::before { grid-row: 1 / 3; }

body.ov-shop2.single-product div.product .woocommerce-tabs {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    border-top: none !important;
    padding: 0 42px 48px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: 64px;
    color: var(--apri);
}
/* Trennlinie INNERHALB der Karte, in der Farbe der Linien der Kaufspalte */
body.ov-shop2.single-product div.product .woocommerce-tabs::before {
    content: "";
    grid-column: 1 / -1;
    height: 2px;
    background: var(--apri);
    margin: 0 0 34px;
}
body.ov-shop2.single-product div.product .woocommerce-tabs ul.tabs { display: none !important; }
/* WooCommerce blendet nicht gewaehlte Reiter per Inline-Stil aus */
body.ov-shop2.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    display: block !important;
    margin: 0;
    padding: 0;
    color: var(--apri);
}
body.ov-shop2.single-product div.product .woocommerce-tabs .panel h2 {
    font-family: var(--fd);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--apri);
}
body.ov-shop2.single-product div.product .woocommerce-tabs .panel :is(h3, p, li, td, th, a, span, strong) { color: var(--apri); }
body.ov-shop2.single-product div.product .woocommerce-tabs .panel li::marker { color: var(--apri); }
body.ov-shop2.single-product div.product .woocommerce-tabs .panel ul { margin: 0; padding-left: 20px; }
body.ov-shop2.single-product div.product .woocommerce-tabs .panel li { margin: 0 0 6px; line-height: 1.5; }

/* Details-Tabelle (Farbe, Groesse): ohne Zebrastreifen und gepunktete
   Raender aus WooCommerce, Zeilen durch feine apricote Linien getrennt. */
body.ov-shop2.single-product div.product .woocommerce-tabs table.shop_attributes {
    border: none;
    margin: 0;
    width: 100%;
}
body.ov-shop2.single-product div.product .woocommerce-tabs table.shop_attributes :is(tr, th, td) {
    background: none !important;
    border: none;
}
body.ov-shop2.single-product div.product .woocommerce-tabs table.shop_attributes tr + tr :is(th, td) {
    border-top: 1px solid var(--apri);
}
body.ov-shop2.single-product div.product .woocommerce-tabs table.shop_attributes th {
    font-weight: 700;
    text-align: left;
    padding: 10px 18px 10px 0;
    width: 32%;
}
body.ov-shop2.single-product div.product .woocommerce-tabs table.shop_attributes td {
    padding: 10px 0;
    font-style: normal;
}
body.ov-shop2.single-product div.product .woocommerce-tabs table.shop_attributes td p { margin: 0; }

@media (max-width: 1100px) {
    body.ov-shop2.single-product div.product .woocommerce-tabs {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
        padding: 0 34px 36px !important;
    }
}
@media (max-width: 600px) {
    body.ov-shop2.single-product div.product .woocommerce-tabs { padding: 0 22px 30px !important; }
}
/* Unter 1100 px stapeln sich Bild, Kaufspalte und Beschreibung in DREI
   Zeilen — die Platte muss dann auch ueber die dritte laufen, sonst stand
   die (apricote) Beschreibung apricot auf apricot und war unsichtbar. */
@media (max-width: 1100px) {
    body.ov-shop2.single-product div.product::before { grid-row: 1 / 4; }
}

/* Keine Trennlinie zwischen Bild und Kaufspalte (User-Wunsch 21.09.2026).
   Sie kam aus product.css der alten Palette
   (".summary { border-left: 1px solid var(--color-border) }") und wurde
   im Baender-Theme zu einem apricoten Strich quer durch die Karte. */
body.ov-shop2.single-product div.product .summary {
    border-left: none;
    border-top: none;
}

/* Preisangaben unter dem Preis: Versand und § 19 UStG (inc/shop2.php) */
body.ov-shop2.single-product div.product .summary .shop2-preisinfo {
    margin: -6px 0 26px;
    color: var(--apri);
    font-size: 14px;
    line-height: 1.5;
}
body.ov-shop2.single-product div.product .summary .shop2-preisinfo p { margin: 0; color: var(--apri); }

/* ===================================================================
   27  Warenkorb aufgeraeumt (21.09.2026)
   =================================================================== */

/* --- Summenkarte: Zeilen als Beschriftung | Wert, ohne feste 55 %-Spalte
   aus cart.css (dort brachen "Standard: 4,99 €" und die Anschrift ueber
   vier Zeilen um). Linien liegen an den ZEILEN, nicht an einzelnen Zellen
   — vorher hing der Rand der Gesamtsumme nur an der Wertspalte. */
body.ov-shop2.woocommerce-cart .cart-totals-table-wrap,
body.ov-shop2.woocommerce-cart .cart-totals-actions { padding: 0; }
body.ov-shop2.woocommerce-cart .cart_totals table.shop_table,
body.ov-shop2.woocommerce-cart .cart_totals table.shop_table tbody { display: block; width: 100%; }
body.ov-shop2.woocommerce-cart .cart_totals table tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--apri);
}
body.ov-shop2.woocommerce-cart .cart_totals table th,
body.ov-shop2.woocommerce-cart .cart_totals table td {
    display: block;
    width: auto;
    padding: 0 !important;
    border: none !important;
    background: none;
    font-size: 15px;
}
body.ov-shop2.woocommerce-cart .cart_totals table th {
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
body.ov-shop2.woocommerce-cart .cart_totals table td { text-align: right; }
body.ov-shop2.woocommerce-cart .cart_totals table td::before { display: none; } /* data-title-Beschriftung der Handyansicht */
body.ov-shop2.woocommerce-cart .cart_totals table .order-total { border-bottom: none; padding-top: 16px; }
body.ov-shop2.woocommerce-cart .cart_totals table .order-total :is(th, td) {
    font-size: 21px !important;
    font-weight: 800;
}
body.ov-shop2.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount { font-size: inherit !important; color: var(--apri) !important; }
/* Versand: nur Art und Preis — keine Anschrift, kein Rechner. Kosten je
   Land stehen in "Gut zu wissen", berechnet wird endgueltig in der Kasse. */
body.ov-shop2.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.ov-shop2.woocommerce-cart .cart_totals .woocommerce-shipping-calculator { display: none; }
body.ov-shop2.woocommerce-cart .cart_totals ul#shipping_method { margin: 0; padding: 0; list-style: none; }
body.ov-shop2.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0; padding: 0; }

/* --- Knoepfe: gleiche Breite, klarer Abstand statt aneinanderkleben */
body.ov-shop2.woocommerce-cart .wc-proceed-to-checkout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 22px;
    padding: 0;
}
body.ov-shop2.woocommerce-cart .wc-proceed-to-checkout > * { width: 100% !important; max-width: none !important; margin: 0 !important; }
body.ov-shop2.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { margin: 0 !important; }
body.ov-shop2.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper,
body.ov-shop2.woocommerce-cart .wc-proceed-to-checkout .wcpay-express-checkout-wrapper { display: block; }

/* --- Posten: Merkmale als kleine Tabelle "Farbe  dusky pink / Groesse  S" */
body.ov-shop2.woocommerce-cart .woocommerce-cart-form dl.variation {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 6px 0 0;
    font-size: 14px;
}
body.ov-shop2.woocommerce-cart .woocommerce-cart-form dl.variation :is(dt, dd) { margin: 0; padding: 0; float: none; }
body.ov-shop2.woocommerce-cart .woocommerce-cart-form dl.variation dd p { margin: 0; }
body.ov-shop2.woocommerce-cart .woocommerce-cart-form dl.variation dt { font-weight: 700; }
/* Graue Pfeilknoepfe des Browsers im Mengenfeld passen nicht zur Pille */
body.ov-shop2 .quantity input.qty { -moz-appearance: textfield; appearance: textfield; text-align: center; }
body.ov-shop2 .quantity input.qty::-webkit-inner-spin-button,
body.ov-shop2 .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Unter den Posten: Vute | "Gut zu wissen" */
body.ov-shop2.woocommerce-cart .ov-korb-unten {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: center;
    margin-top: 46px;
}
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-mascot { margin: 0 !important; max-width: none; }
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-mascot img { max-width: min(300px, 100%) !important; }
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-bubble { font-size: 15px; max-width: 320px; }
body.ov-shop2 .ov-korb-info {
    background: var(--lila);
    color: var(--apri);
    border-radius: 34px 14px 30px 16px;
    padding: 28px 30px;
    box-shadow: 0 8px 18px var(--schatten-karte);
}
body.ov-shop2 .ov-korb-info__titel {
    font-family: var(--fd);
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 16px;
    color: var(--apri);
}
body.ov-shop2 .ov-korb-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
body.ov-shop2 .ov-korb-info li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; font-size: 15px; color: var(--apri); }
body.ov-shop2 .ov-korb-info li::before { display: none; }
body.ov-shop2 .ov-korb-info li svg { flex: none; margin-top: 1px; }
body.ov-shop2 .ov-korb-info :is(span, strong, a) { color: var(--apri); }
body.ov-shop2 .ov-korb-info a { text-decoration: underline; text-underline-offset: 3px; }

/* --- "Mehr aus dem Shop" ueber die ganze Breite */
body.ov-shop2.woocommerce-cart .ov-korb-empfehlung { grid-column: 1 / -1; margin-top: 72px; }
body.ov-shop2 .ov-korb-empfehlung__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 22px; }
body.ov-shop2 .ov-korb-empfehlung__kopf h2 { font-family: var(--fd); font-size: 28px; font-weight: 800; margin: 0; color: var(--lila); }
body.ov-shop2 .ov-korb-empfehlung__alle { color: var(--lila); font-weight: 700; }
body.ov-shop2 .ov-korb-empfehlung ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 22px;
    margin: 0;
}

@media (max-width: 900px) {
    body.ov-shop2.woocommerce-cart .ov-korb-unten { grid-template-columns: 1fr; gap: 28px; }
}

/* --- Leerer Warenkorb (woocommerce/cart/cart-empty.php) --------------- */
body.ov-shop2.woocommerce-cart .ov-korb-leer { grid-column: 1 / -1; width: 100%; }
body.ov-shop2 .ov-korb-leer__oben {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}
body.ov-shop2 .ov-korb-leer__karte {
    display: flex;
    align-items: center;
    gap: 34px;
    background: var(--lila);
    color: var(--apri);
    border-radius: 38px 16px 34px 18px;
    padding: 34px 40px;
    box-shadow: 0 8px 18px var(--schatten-karte);
}
body.ov-shop2 .ov-korb-leer__karte .ov-vute-confused img { width: 190px; height: auto; display: block; }
body.ov-shop2 .ov-korb-leer__text h2 {
    font-family: var(--fd);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--apri);
}
body.ov-shop2 .ov-korb-leer__text p { margin: 0 0 22px; color: var(--apri); font-size: 16px; line-height: 1.5; }
body.ov-shop2 .ov-korb-leer__knopf {
    display: inline-block;
    background: var(--apri);
    color: var(--lila);
    font-weight: 800;
    padding: 13px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 5px 10px var(--schatten-eng);
}
body.ov-shop2 .ov-korb-leer__knopf:hover { background: var(--band); color: var(--apri); }
body.ov-shop2 .ov-korb-leer .ov-korb-empfehlung { margin-top: 64px; }

@media (max-width: 900px) {
    body.ov-shop2 .ov-korb-leer__oben { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    body.ov-shop2 .ov-korb-leer__karte { flex-direction: column; text-align: center; padding: 28px 24px; gap: 18px; }
    body.ov-shop2 .ov-korb-leer__karte .ov-vute-confused img { width: 150px; }
}
/* pages.css begrenzt das Bild auf 60 % seiner Huelle — und die Huelle
   schrumpfte in der Flex-Zeile, Vute stand 60 px klein in der Karte. */
body.ov-shop2 .ov-korb-leer__karte .ov-vute-confused { flex: none; width: auto; margin: 0; }
body.ov-shop2 .ov-korb-leer__karte .ov-vute-confused img { max-width: none !important; }
@media (max-width: 600px) { body.ov-shop2 .ov-korb-leer__karte .ov-vute-confused img { width: 150px; } }
body.ov-shop2.woocommerce-cart .cart_totals .ov-versand-ziel { display: block; font-size: 13px; font-weight: 400; margin-top: 3px; color: var(--apri); }
body.ov-shop2.woocommerce-cart .ov-korb-unten .fox-mascot { justify-self: center; align-items: center; }
body.ov-shop2.woocommerce-cart .woocommerce-cart-form dl.variation :is(dt, dd, dd p) { font-size: 14px !important; line-height: 1.5; }

/* ===================================================================
   28  Kein "€ EUR" in der Block-Kasse (22.09.2026)
   ===================================================================
   Im Warenkorb nimmt der Filter wcpay_multi_currency_should_output_
   explicit_price den Waehrungszusatz weg. In der Kasse haengt ihn
   WooPayments per JavaScript als NACKTEN TEXTKNOTEN hinter den Betrag
   ("44,98 € EUR") — dort greift kein PHP-Filter mehr.

   Der Betrag selbst steckt in einem eigenen <span>. Die Huelle bekommt
   deshalb Schriftgroesse 0 (damit verschwindet der lose Text), das
   <span> holt sich seine Groesse zurueck. */
body.ov-baender--shop .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 0;
}
body.ov-baender--shop .wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-formatted-money-amount {
    font-size: 1.25rem;
}