/* ===================================================================
   BAENDER — der Kaufweg
   ===================================================================
   Shop, Kategorie, Produkt, Warenkorb, Kasse und Konto.

   RUHIG, ausdruecklich anders als der Rest: keine Wellen, kein
   scrollgebundener Aufbau, kein Kippen zum Mauszeiger. Wer kauft, will
   keine Bewegung im Weg. Der Kopf ist dieselbe lila Platte wie auf den
   Inhaltsseiten, nur mit geraden Kanten (szene--flach).

   Der Aufbau folgt dem, was moderne Laeden gemeinsam haben:
     - grosses, ruhiges Bild je Artikel auf hellem Grund
     - der Preis ist die zweite Zeile, nicht die fuenfte
     - eine mitlaufende Leiste fuer Suchen, Filtern und Sortieren
     - auf der Produktseite Bild links, Kaufspalte rechts und mitlaufend
     - im Warenkorb die Posten links, die Summe rechts und mitlaufend
   Palette und Regeln bleiben die des Themes: zwei Farben, keine
   Zwischentoene, Karten in voller Gegenfarbe.

   ACHTUNG BEIM ERWEITERN: ".woocommerce" NICHT als Nachfahren schreiben.
   Auf /shop/ und der Produktseite ist das eine BODY-Klasse, im Warenkorb
   und im Konto dagegen ein umschliessendes <div>. "body.ov-baender--shop
   .woocommerce ..." greift deshalb auf der halben Strecke nie — genau
   daran hingen Produktname und Preis unsichtbar auf der Karte.
   body.ov-baender--shop allein reicht als Anker.
   =================================================================== */


/* ===================================================================
   Buehne und Kopf
   =================================================================== */
body.ov-baender--shop #main.main-content {
    position: relative;
    z-index: 10;
    background: var(--apri);
    color: var(--lila);
    max-width: none;
    width: 100%;
    margin: 0;
    display: block;
    padding: 0 0 120px;
    /* i18n-geo.css nimmt der Buehne den oberen Abstand mit !important,
       sobald das Umbau-Banner davor steht. */
    /* Kopf und erste Karte sind beide lila. Ohne genug Apricot dazwischen
       lesen sie sich als ein Block. */
    padding-top: 64px !important;
}

body.ov-baender--shop .szene--kopf {
    min-height: 0;
    padding: 84px 0 56px;
    align-items: flex-end;
    z-index: 11;
}
body.ov-baender--shop .szene--kopf h1 {
    font-size: clamp(34px, 4vw, 56px);
    margin: 0;
}
body.ov-baender--shop .szene--kopf .marke { margin-bottom: 10px; }
body.ov-baender--shop .kopf__zurueck {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}
body.ov-baender--shop .kopf__zurueck:hover { text-decoration: underline; }

/* Die flache Platte.
   .platte__inhalt ragt oben und unten je --welle ueber den Abschnitt
   hinaus — dort liegen bei den Wellen-Platten die beiden SVG. Ohne
   Wellen muss dieser Ueberstand WEG, sonst deckt die lila Flaeche 120 px
   in den Inhalt hinein: genau so verschwand die obere Haelfte der
   Shop-Ueberschrift hinter dem Kopf.
   Erst danach darf .platte__mitte den Rahmen ganz ausfuellen — sonst
   blieben zwei durchsichtige Baender stehen. */
body.ov-baender--shop .szene--flach .platte__inhalt,
body.ov-baender--shop .szene--flach .platte__mitte {
    top: 0;
    bottom: 0;
}
/* Ein gerader Abschluss wirft einen geraden Schatten — eng gehalten,
   damit er die helle Flaeche darunter nicht eintruebt. */
body.ov-baender--shop .szene--flach .platte {
    filter: drop-shadow(0 4px 8px var(--schatten-eng));
}

/* Der Inhalt liegt auf derselben Breite wie Kopf und Fuss. */
body.ov-baender--shop .content-block {
    background: none;
    border-radius: 0;
    min-height: 0;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 54px;
    color: var(--lila);
}
body.ov-baender--shop .content-block::before,
body.ov-baender--shop .content-block::after { content: none; }
body.ov-baender--shop .content-block + .content-block { margin-top: 56px; }

/* Fliesstext im Kaufweg — dieselbe Behandlung wie auf den Inhaltsseiten,
   und aus demselben Grund in :where(): sonst schlaegt die Prosa-Regel
   jede Bauteil-Regel (eine Produktkarte ist ein <li>). */
body.ov-baender--shop .content-block :where(h1, h2, h3, h4, h5, h6) { color: inherit; }
body.ov-baender--shop .content-block :where(h2) {
    font-family: var(--fd);
    font-size: clamp(24px, 2.6vw, 34px);
    margin: 0 0 14px;
}
body.ov-baender--shop .content-block :where(p, li) { color: inherit; font-size: 17px; line-height: 1.65; }
body.ov-baender--shop .content-block :where(p) { margin: 0 0 16px; max-width: 74ch; }
body.ov-baender--shop .content-block :where(a) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.ov-baender--shop .content-block :where(strong) { color: inherit; font-weight: 800; }

body.ov-baender--shop .shop-banner-title { color: var(--lila); }
body.ov-baender--shop .shop-banner-text,
body.ov-baender--shop .shop-banner-text p { color: var(--lila); }


/* ===================================================================
   Die Leiste: suchen, filtern, sortieren
   ===================================================================
   Eine mitlaufende Zeile. Sie bleibt beim Scrollen unter der Kopfleiste
   stehen, damit man nicht nach oben muss, um die Auswahl zu aendern. */
body.ov-baender--shop .shop-controls {
    position: sticky;
    top: 96px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 999px;
    padding: 12px 16px 12px 22px;
    margin: 0 0 40px;
    box-shadow: 0 6px 14px var(--schatten-karte);
}
body.ov-baender--shop .shop-controls__left,
body.ov-baender--shop .shop-controls__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
body.ov-baender--shop .woocommerce-result-count {
    color: var(--apri);
    font-size: 14.5px;
    font-weight: 700;
    margin: 0;
}

/* Suchfeld: helle Flaeche auf der lila Leiste.
   Das Lupensymbol liegt in shop.css absolut im Feld (left: 12px) — die
   Flaeche bleibt deshalb position: relative und das Feld behaelt seinen
   linken Innenabstand. Ein Flex-Umbau haette das Symbol auf den Text
   gelegt, genau so stand es im ersten Anlauf. */
body.ov-baender--shop .shop-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 320px;
    background: var(--apri);
    border: none;
    border-radius: 999px;
    padding: 0;
}
body.ov-baender--shop .shop-search__icon { color: var(--lila); left: 16px; }
body.ov-baender--shop .shop-search .shop-search__input {
    background: none;
    border: none;
    color: var(--lila);
    font: inherit;
    font-size: 15.5px;
    height: 44px;
    padding: 0 38px 0 42px;
    width: 100%;
    line-height: 1;
}
body.ov-baender--shop .shop-search .shop-search__input::placeholder { color: var(--lila); opacity: 1; }
body.ov-baender--shop .shop-search .shop-search__input:focus { outline: none; }
body.ov-baender--shop .shop-search:focus-within { outline: 3px solid var(--apri); outline-offset: 3px; }
body.ov-baender--shop .shop-search__clear {
    background: none;
    border: none;
    color: var(--lila);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    right: 14px;
}

/* Filter und Sortierung: Pillen in der Gegenfarbe der Leiste. */
body.ov-baender--shop .shop-filter-btn,
body.ov-baender--shop .woocommerce-ordering select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    height: 44px;
    padding: 0 22px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 44px;
    cursor: pointer;
    box-shadow: none;
    text-align: left;
}
/* Das Auswahlmenue bringt keinen eigenen Pfeil mehr mit (appearance:none
   in shop.css) — er wird als Hintergrundbild gesetzt, sonst sieht man
   nicht, dass man hier waehlen kann. Rechts Platz dafuer freihalten. */
body.ov-baender--shop .woocommerce-ordering select {
    display: inline-block;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23613F75' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 14px;
}
body.ov-baender--shop .shop-filter-btn:hover,
body.ov-baender--shop .woocommerce-ordering select:hover { color: var(--lila); }
body.ov-baender--shop .woocommerce-ordering { margin: 0; float: none; }

body.ov-baender--shop .shop-filter-dropdown {
    background: var(--lila);
    border: 3px solid var(--apri);
    border-radius: 26px 10px 22px 12px;
    padding: 12px;
    box-shadow: 0 9px 18px var(--schatten);
}
body.ov-baender--shop .shop-filter-pill {
    background: none;
    color: var(--apri);
    border: 2px solid var(--apri);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    cursor: pointer;
}
body.ov-baender--shop .shop-filter-pill.active,
body.ov-baender--shop .shop-filter-pill:hover {
    background: var(--apri);
    color: var(--lila);
}


/* ===================================================================
   Kategorie-Abschnitte
   =================================================================== */
body.ov-baender--shop .shop-cat-section { margin-bottom: 64px; }
body.ov-baender--shop .shop-cat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
body.ov-baender--shop .shop-cat-title {
    font-family: var(--fd);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lila);
}
body.ov-baender--shop .shop-cat-line {
    flex: 1;
    height: 3px;
    background: var(--lila);
    border: none;
}
body.ov-baender--shop .shop-cat-count {
    background: var(--lila);
    color: var(--apri);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 800;
}


/* ===================================================================
   Die Produktkarte
   ===================================================================
   Der Aufbau moderner Laeden: ein grosses ruhiges Bild, darunter Name
   und Preis, der Knopf ueber die volle Breite. Das Bild liegt auf einer
   HELLEN Flaeche — Produktfotos bringen eigene Farben mit und stehen auf
   Apricot ruhiger als auf Lila. */
body.ov-baender--shop ul.products,
body.ov-baender--shop .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ov-baender--shop ul.products li.product,
body.ov-baender--shop .product-card {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 34px 14px 30px 16px;
    padding: 14px 14px 20px;
    margin: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 14px var(--schatten-karte);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
    overflow: hidden;
}
body.ov-baender--shop ul.products li.product:hover,
body.ov-baender--shop .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 13px 24px var(--schatten);
}

/* ACHTUNG: der Link von WooCommerce umschliesst BILD, NAME UND PREIS
   (woocommerce-LoopProduct-link). Ein aspect-ratio mit overflow:hidden
   darauf hat Name und Preis weggeschnitten — die Karten waren leer.
   Das feste Seitenverhaeltnis gehoert deshalb an das Bild. */
body.ov-baender--shop ul.products li.product > a.woocommerce-LoopProduct-link,
body.ov-baender--shop .product-card > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    margin: 0 0 4px;
}
body.ov-baender--shop ul.products li.product a img,
body.ov-baender--shop .product-card-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0 0 16px;
    background: var(--apri);
    border-radius: 24px 10px 20px 12px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Der Zoom beim Ueberfahren braucht einen Rahmen, der ihn beschneidet —
   sonst waechst das Bild ueber die Karte hinaus. */
body.ov-baender--shop .product-card-image {
    display: block;
    border-radius: 24px 10px 20px 12px;
    overflow: hidden;
    background: var(--apri);
}
/* Der Zoom laeuft nur dort, wo ein Rahmen ihn beschneidet. Im
   WooCommerce-Raster steht das Bild ohne Huelle im Link — ein
   vergroessertes Bild verloere dort seine runden Ecken. Die Karte hebt
   sich beim Ueberfahren, das reicht. */
body.ov-baender--shop .product-card:hover .product-card-image img { transform: scale(1.05); }

body.ov-baender--shop ul.products li.product .woocommerce-loop-product__title,
body.ov-baender--shop .product-card-name {
    font-family: var(--fd);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--apri);
    margin: 0 6px 6px;
    padding: 0;
    text-wrap: balance;
}
body.ov-baender--shop ul.products li.product .price,
body.ov-baender--shop .product-card-price {
    color: var(--apri);
    font-size: 19px;
    font-weight: 800;
    margin: 0 6px 14px;
}
body.ov-baender--shop ul.products li.product .price del { opacity: 1; text-decoration: line-through; }
body.ov-baender--shop ul.products li.product .price ins { text-decoration: none; }

/* Der Knopf sitzt am unteren Rand und ist bei jeder Karte gleich weit
   unten — auch wenn ein Name zweizeilig umbricht. */
body.ov-baender--shop ul.products li.product .price,
body.ov-baender--shop .product-card-price { margin-top: auto; }

body.ov-baender--shop ul.products li.product .button,
body.ov-baender--shop .product-card-btn a,
body.ov-baender--shop .product-card-btn button {
    display: block;
    width: 100%;
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 13px 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
}
body.ov-baender--shop ul.products li.product .button:hover,
body.ov-baender--shop .product-card-btn a:hover,
body.ov-baender--shop .product-card-btn button:hover { color: var(--lila); }
body.ov-baender--shop ul.products li.product .added_to_cart { display: none; }

/* Der Preis kommt von WooCommerce in drei Schachteln (span.amount > bdi >
   span.currencySymbol), und die innerste bringt ihre eigene Farbe mit. Sie
   sollen alle die Farbe ihrer Umgebung tragen — auf der Karte Apricot, auf
   Apricot Lila. */
body.ov-baender--shop .woocommerce-Price-amount,
body.ov-baender--shop .woocommerce-Price-currencySymbol,
body.ov-baender--shop .amount,
body.ov-baender--shop bdi,
body.ov-baender--shop .price bdi,
body.ov-baender--shop .price del,
body.ov-baender--shop .price ins {
    /* !important ist hier noetig und kein Versehen: cart.css setzt
       .woocommerce-Price-amount mit "color: … !important" und dazu eine
       feste Schriftgroesse von 24 px. Ohne Gegenwehr stand der Preis in
       jeder Karte lila auf lila — und immer 24 px gross, egal wo. */
    color: inherit !important;
    font-size: inherit !important;
    padding: 0;
}

/* Plaketten (Angebot, ausverkauft) tragen die Gegenfarbe der Bildflaeche. */
body.ov-baender--shop span.onsale {
    background: var(--lila);
    color: var(--apri);
    border-radius: 999px;
    padding: 5px 14px;
    font-weight: 800;
    min-height: 0;
    min-width: 0;
    line-height: 1.4;
    top: 22px;
    left: 22px;
    margin: 0;
}

body.ov-baender--shop .shop-no-results { color: var(--lila); }
body.ov-baender--shop .shop-no-results p { color: inherit; font-size: 19px; }


/* ===================================================================
   Die Produktseite
   ===================================================================
   Bild links, Kaufspalte rechts — und die Kaufspalte laeuft mit, damit
   der Knopf auch bei langer Beschreibung erreichbar bleibt. */
/* Die Produktseite hat KEINEN .content-block: woocommerce.php ruft dort
   woocommerce_content() ohne Huelle auf. Die Breite und der seitliche
   Abstand muessen deshalb an das Raster selbst — sonst laeuft die Seite
   als einzige bis an die Fensterraender. */
body.ov-baender--shop.single-product div.product {
    /* product.css legt die ganze Produktseite auf --color-surface, und das
       ist im Baender-Theme --band. Der Grund gehoert hier aber Apricot:
       auf dem dunklen Band standen Beschreibung und Reiter unlesbar. */
    background: none;
    background-color: transparent;
    border: none;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 54px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 54px;
    align-items: start;
}
body.ov-baender--shop.single-product div.product .woocommerce-product-gallery {
    grid-column: 1;
    width: auto;
    float: none;
    margin: 0;
    background: var(--lila);
    border-radius: 42px 18px 36px 20px;
    padding: 18px;
    box-shadow: 0 8px 18px var(--schatten-karte);
}
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 {
    background: var(--apri);
    border-radius: 30px 12px 26px 14px;
    overflow: hidden;
}
body.ov-baender--shop.single-product div.product .woocommerce-product-gallery img {
    border-radius: 0;
    width: 100%;
    height: auto;
    display: block;
}
body.ov-baender--shop.single-product div.product .flex-control-thumbs {
    display: flex;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
body.ov-baender--shop.single-product div.product .flex-control-thumbs li { width: 74px; margin: 0; }
body.ov-baender--shop.single-product div.product .flex-control-thumbs img {
    border-radius: 14px;
    border: 3px solid transparent;
    background: var(--apri);
    opacity: 1;
}
body.ov-baender--shop.single-product div.product .flex-control-thumbs img.flex-active,
body.ov-baender--shop.single-product div.product .flex-control-thumbs img:hover { border-color: var(--apri); }

/* Die Kaufspalte ist die Karte der Seite: volle Gegenfarbe. */
body.ov-baender--shop.single-product div.product .summary {
    grid-column: 2;
    width: auto;
    float: none;
    margin: 0;
    position: sticky;
    top: 118px;
    background: var(--lila);
    color: var(--apri);
    border-radius: 42px 18px 36px 20px;
    padding: 38px 34px;
    box-shadow: 0 8px 18px var(--schatten-karte);
}
body.ov-baender--shop.single-product div.product .product_title {
    font-family: var(--fd);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    color: var(--apri);
    margin: 0 0 14px;
}
body.ov-baender--shop.single-product div.product p.price,
body.ov-baender--shop.single-product div.product span.price {
    color: var(--apri);
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 18px;
}
body.ov-baender--shop.single-product div.product .summary p,
body.ov-baender--shop.single-product div.product .summary li,
body.ov-baender--shop.single-product div.product .summary label,
body.ov-baender--shop.single-product div.product .woocommerce-product-details__short-description,
body.ov-baender--shop.single-product div.product .woocommerce-product-details__short-description p { color: var(--apri); }

/* Ausfuehrungen, Menge, Kaufknopf */
body.ov-baender--shop.single-product div.product form.cart table.variations th,
body.ov-baender--shop.single-product div.product form.cart table.variations td {
    border: none;
    padding: 6px 0;
    color: var(--apri);
    background: none;
}
body.ov-baender--shop div.product form.cart select,
body.ov-baender--shop div.product form.cart .qty {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 12px 16px;
    font: inherit;
    font-size: 16px;
}
body.ov-baender--shop div.product form.cart .single_add_to_cart_button,
body.ov-baender--shop div.product form.cart button.button {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 16px 32px;
    font-weight: 800;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 5px 10px var(--schatten-eng);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ov-baender--shop div.product form.cart .single_add_to_cart_button:hover { transform: translateY(-3px); }
body.ov-baender--shop div.product .reset_variations { color: var(--apri); }

/* Kategorien und Schlagwoerter unter dem Kaufknopf: eine ruhige Zeile,
   keine Tabelle. WooCommerce gibt sie als <span>-Folge aus. */
body.ov-baender--shop.single-product div.product .product_meta {
    display: block;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px solid var(--apri);
    font-size: 14.5px;
    color: var(--apri);
}
body.ov-baender--shop.single-product div.product .product_meta > span {
    display: block;
    margin-bottom: 6px;
}
/* Artikelnummer, Kategorien und Schlagwoerter bringen eigene Klassen mit
   (sku_wrapper, posted_in, tagged_as) und holen sich sonst die gedaempfte
   Farbe der alten Palette — auf der lila Karte unsichtbar. */
body.ov-baender--shop.single-product div.product .product_meta a,
body.ov-baender--shop.single-product div.product .product_meta span,
body.ov-baender--shop.single-product div.product .sku_wrapper,
body.ov-baender--shop.single-product div.product .sku,
body.ov-baender--shop.single-product div.product .posted_in,
body.ov-baender--shop.single-product div.product .tagged_as { color: var(--apri); }

/* Die Beschreibung steht unter beiden Spalten auf Apricot. */
body.ov-baender--shop.single-product div.product .woocommerce-tabs,
body.ov-baender--shop.single-product div.product .product_meta,
body.ov-baender--shop.single-product div.product .related,
body.ov-baender--shop.single-product div.product .upsells {
    grid-column: 1 / -1;
    color: var(--lila);
}
/* product.css macht aus dem Kasten eine Flex-Zeile mit senkrechter
   Reiterspalte links und legt ihn auf --color-surface-alt (= Lila). Beides
   faellt weg: die Reiter stehen als Zeile ueber der Beschreibung, der
   Kasten selbst ist offen. Sonst stand der ganze Block lila auf lila. */
body.ov-baender--shop div.product .woocommerce-tabs {
    display: block;
    background: none;
    background-color: transparent;
    border: none;
    border-top: 3px solid var(--lila) !important;
    padding-top: 36px;
    margin-top: 56px;
}
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
    border: none;
    background: none;
    min-width: 0;
}
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs::before { display: none; }
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: 2px solid var(--lila);
    border-radius: 999px;
    margin: 0;
    padding: 0;
}
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li::before,
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li::after { display: none; }
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li a {
    color: var(--lila);
    font-weight: 700;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li.active { background: var(--lila); }
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li.active a { color: var(--apri); }
/* Die Reiterleiste bringt aus product.css noch eine eigene Flaeche mit —
   der nicht gewaehlte Reiter stand sonst lila auf lila. Und ein Link im
   Beschreibungstext liegt auf Apricot, nicht auf der Kaufkarte. */
body.ov-baender--shop.single-product div.product .woocommerce-tabs ul.tabs,
body.ov-baender--shop .wc-tabs {
    /* product.css setzt ".wc-tabs { background-color: … !important }" —
       dagegen hilft nur dasselbe Mittel. Ohne das stand der nicht
       gewaehlte Reiter lila auf lila. */
    background: none !important;
    background-color: transparent !important;
}
body.ov-baender--shop.single-product div.product .woocommerce-tabs .panel a,
body.ov-baender--shop.single-product div.product .woocommerce-Tabs-panel a { color: var(--lila); }
/* product.css legt den Beschreibungskasten auf --color-surface-alt, und
   das ist im Baender-Theme Lila — die Beschreibung stand lila auf lila.
   Der Kasten faellt weg, der Text laeuft auf Apricot. */
body.ov-baender--shop div.product .woocommerce-tabs .woocommerce-Tabs-panel,
body.ov-baender--shop div.product .woocommerce-tabs .panel {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    color: var(--lila);
}
body.ov-baender--shop div.product .woocommerce-tabs .panel h2,
body.ov-baender--shop div.product .woocommerce-tabs .panel h3,
body.ov-baender--shop div.product .woocommerce-tabs .panel p,
body.ov-baender--shop div.product .woocommerce-tabs .panel li,
body.ov-baender--shop div.product .woocommerce-tabs .panel td,
body.ov-baender--shop div.product .woocommerce-tabs .panel th { color: var(--lila); }


/* ===================================================================
   Der Warenkorb
   ===================================================================
   WooCommerce liefert eine Tabelle. Auf schmalen Fenstern ist eine
   Tabelle mit sechs Spalten unbrauchbar — hier wird sie ab 900 px
   abwaerts zu einer Liste aus Karten umgebaut. */
body.ov-baender--shop.woocommerce-cart .content-block { padding-left: 54px; padding-right: 54px; }

body.ov-baender--shop table.shop_table {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 38px 16px 34px 18px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 0 0 32px;
}
body.ov-baender--shop table.shop_table th,
body.ov-baender--shop table.shop_table td {
    color: var(--apri);
    border: none;
    padding: 18px 20px;
    background: none;
}
body.ov-baender--shop table.shop_table thead th {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.ov-baender--shop table.shop_table tbody tr + tr td { border-top: 2px solid var(--apri); }
body.ov-baender--shop table.shop_table td.product-thumbnail img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    background: var(--apri);
    border-radius: 18px 8px 16px 9px;
    border: none;
}
body.ov-baender--shop table.shop_table td.product-name a { color: var(--apri); font-weight: 700; text-decoration: none; }
body.ov-baender--shop table.shop_table td.product-name a:hover { text-decoration: underline; }
body.ov-baender--shop table.shop_table td.product-remove a {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    display: inline-block;
    font-weight: 800;
    text-decoration: none;
}

/* Mengenwahl */
body.ov-baender--shop .quantity input.qty,
body.ov-baender--shop table.shop_table .quantity input.qty {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 10px 12px;
    width: 78px;
    text-align: center;
    font: inherit;
    font-weight: 700;
}

/* Gutschein und Aktualisieren */
body.ov-baender--shop .coupon input.input-text {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    font: inherit;
}
body.ov-baender--shop button.button,
body.ov-baender--shop a.button,
body.ov-baender--shop input.button {
    background: var(--band);
    color: var(--apri);
    border: none;
    border-radius: 999px;
    padding: 13px 26px;
    font-weight: 800;
    box-shadow: 0 5px 10px var(--schatten-eng);
    text-decoration: none;
}
body.ov-baender--shop button.button:hover,
body.ov-baender--shop a.button:hover,
body.ov-baender--shop input.button:hover { color: var(--apri); }
/* Auf der lila Tabelle waere --band zu nah am Untergrund. */
body.ov-baender--shop table.shop_table button.button,
body.ov-baender--shop table.shop_table a.button,
body.ov-baender--shop table.shop_table input.button {
    background: var(--apri);
    color: var(--lila);
}
body.ov-baender--shop table.shop_table button.button:hover { color: var(--lila); }

/* Posten links, Summe rechts — und die Summe laeuft mit, wie die
   Kaufspalte der Produktseite.

   WooCommerce legt das Formular mit der Tabelle und den Block mit der
   Summe als GESCHWISTER in <div class="woocommerce">. Das Raster muss
   deshalb dort ansetzen; ein Raster auf .cart-collaterals allein haette
   die Summe nur unter die Tabelle geschoben, nicht daneben. */
/* cart.css faerbt den Knopf "Warenkorb aktualisieren" ueber
   ".woocommerce table.cart td.actions .button" (vier Klassen) und schlaegt
   damit die allgemeine Knopfregel — er stand lila auf lila. */
body.ov-baender--shop table.cart td.actions .button,
body.ov-baender--shop table.shop_table td.actions .button {
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 800;
}
body.ov-baender--shop table.cart td.actions .button:hover { color: var(--lila); border: none; }

body.ov-baender--shop.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    gap: 34px;
    align-items: start;
}
body.ov-baender--shop.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
body.ov-baender--shop.woocommerce-cart .cart-collaterals {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
}
/* Vute haengt an woocommerce_cart_collaterals und wird deshalb VOR der
   Summe ausgegeben. In der schmalen Spalte gehoert die Summe nach oben —
   sie ist der Grund, warum die Spalte mitlaeuft. */
body.ov-baender--shop.woocommerce-cart .cart_totals { order: -1; }
body.ov-baender--shop .cart_totals {
    position: sticky;
    top: 118px;
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 38px 16px 34px 18px;
    padding: 30px 28px;
    box-shadow: 0 8px 18px var(--schatten-karte);
    width: auto;
    float: none;
}
body.ov-baender--shop .cart_totals h2 {
    font-family: var(--fd);
    color: var(--apri);
    font-size: 24px;
    margin: 0 0 16px;
}
body.ov-baender--shop .cart_totals table,
body.ov-baender--shop .cart_totals table.shop_table {
    background: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
body.ov-baender--shop .cart_totals table th,
body.ov-baender--shop .cart_totals table td {
    color: var(--apri);
    border: none;
    padding: 8px 0;
    background: none;
}
body.ov-baender--shop .cart_totals table .order-total th,
body.ov-baender--shop .cart_totals table .order-total td {
    border-top: 2px solid var(--apri);
    padding-top: 14px;
    font-size: 19px;
    font-weight: 800;
}
body.ov-baender--shop .wc-proceed-to-checkout { padding: 0; margin-top: 18px; }
body.ov-baender--shop .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 17px 24px;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}
body.ov-baender--shop .wc-proceed-to-checkout a.checkout-button:hover { color: var(--lila); }

/* Der Weg zurueck in den Shop im leeren Warenkorb. .nav-btn kommt aus
   header.css und traegt dort die Farben der alten Palette. */
body.ov-baender--shop .content-block .nav-btn,
body.ov-baender--shop .return-to-shop .button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--band);
    color: var(--apri);
    border: none;
    border-radius: 999px;
    padding: 13px 26px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 5px 10px var(--schatten-eng);
}
body.ov-baender--shop .content-block .nav-btn:hover,
body.ov-baender--shop .return-to-shop .button:hover { color: var(--apri); }

/* cart.css legt der Summenzeile mit !important eine Flaeche in
   --color-border-hover unter, und das ist im Baender-Theme Apricot: im
   Bild stand dort ein leerer heller Kasten statt der Zahl. Dasselbe gilt
   fuer den Kassenknopf, der in --color-accent (= Lila) auf der lila
   Karte verschwand. Beides muss mit demselben Mittel zurueck. */
body.ov-baender--shop .order-total th,
body.ov-baender--shop .order-total td {
    background-color: transparent !important;
    color: var(--apri);
}
body.ov-baender--shop .checkout-button,
body.ov-baender--shop .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--apri) !important;
    color: var(--lila) !important;
    margin: 0 !important;
    border-radius: 999px !important;
}

/* Vute steht im Warenkorb neben der Summe. Das Bild ist eine sehr grosse
   PNG-Datei — ohne Deckel fuellt es einen ganzen Bildschirm. */
body.ov-baender--shop .fox-mascot { padding: 0; margin-top: 34px; }
body.ov-baender--shop .fox-mascot img { max-width: min(260px, 60vw); height: auto; }
body.ov-baender--shop .fox-mascot figcaption,
body.ov-baender--shop .fox-mascot p { color: var(--lila); }

body.ov-baender--shop .cart-empty,
body.ov-baender--shop .cart-empty { color: var(--lila); }


/* ===================================================================
   Die Kasse
   ===================================================================
   Zwei Spalten: die Eingaben links, die Bestellung rechts und
   mitlaufend. Ein Kaufweg soll zeigen, was er kostet, waehrend man
   tippt. */
body.ov-baender--shop.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    gap: 40px;
    align-items: start;
}
body.ov-baender--shop.woocommerce-checkout #customer_details { grid-column: 1; }
body.ov-baender--shop.woocommerce-checkout #order_review_heading,
body.ov-baender--shop.woocommerce-checkout #order_review { grid-column: 2; }
body.ov-baender--shop.woocommerce-checkout #order_review {
    position: sticky;
    top: 118px;
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 38px 16px 34px 18px;
    padding: 30px 28px;
    box-shadow: 0 8px 18px var(--schatten-karte);
}
body.ov-baender--shop .woocommerce-billing-fields,
body.ov-baender--shop .woocommerce-shipping-fields,
body.ov-baender--shop .woocommerce-additional-fields {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 34px;
}
body.ov-baender--shop .woocommerce-billing-fields h3,
body.ov-baender--shop .woocommerce-shipping-fields h3,
body.ov-baender--shop .woocommerce-additional-fields h3 {
    font-family: var(--fd);
    color: var(--lila);
    font-size: 24px;
    margin: 0 0 16px;
}
body.ov-baender--shop.woocommerce-checkout #order_review_heading {
    font-family: var(--fd);
    color: var(--lila);
    font-size: 24px;
    margin: 0 0 14px;
}

/* Eingabefelder auf Apricot: lila Flaeche, helle Schrift. */
body.ov-baender--shop form .form-row label { color: var(--lila); font-weight: 700; }
body.ov-baender--shop form .form-row input.input-text,
body.ov-baender--shop form .form-row select,
body.ov-baender--shop form .form-row textarea,
body.ov-baender--shop .select2-container .select2-selection {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 16px;
    padding: 13px 16px;
    font: inherit;
    font-size: 16px;
    height: auto;
}
body.ov-baender--shop form .form-row input.input-text::placeholder { color: var(--apri); opacity: 1; }
body.ov-baender--shop form .form-row input:focus,
body.ov-baender--shop form .form-row select:focus,
body.ov-baender--shop form .form-row textarea:focus {
    outline: 3px solid var(--lila);
    outline-offset: 3px;
}
body.ov-baender--shop .select2-container .select2-selection__rendered { color: var(--apri); line-height: 1.4; }
body.ov-baender--shop .select2-container .select2-selection__arrow { top: 12px; }

/* Auf der lila Bestellkarte drehen sich die Felder um. */
body.ov-baender--shop #order_review label,
body.ov-baender--shop #order_review th,
body.ov-baender--shop #order_review td,
body.ov-baender--shop #order_review p { color: var(--apri); }
body.ov-baender--shop #order_review table.shop_table {
    background: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 18px;
}
body.ov-baender--shop #order_review table.shop_table tbody tr + tr td { border-top: 2px solid var(--apri); }
body.ov-baender--shop #order_review .order-total th,
body.ov-baender--shop #order_review .order-total td {
    border-top: 2px solid var(--apri);
    font-size: 19px;
    font-weight: 800;
}
body.ov-baender--shop #payment {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
}
body.ov-baender--shop #payment ul.payment_methods {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 16px;
}
body.ov-baender--shop #payment ul.payment_methods li {
    background: none;
    border: 2px solid var(--apri);
    border-radius: 18px;
    padding: 12px 14px;
    margin: 0 0 10px;
    color: var(--apri);
}
body.ov-baender--shop #payment div.payment_box {
    background: var(--apri);
    color: var(--lila);
    border-radius: 14px;
}
body.ov-baender--shop #payment div.payment_box::before { display: none; }
body.ov-baender--shop #payment #place_order {
    display: block;
    width: 100%;
    background: var(--apri);
    color: var(--lila);
    border: none;
    border-radius: 999px;
    padding: 17px 24px;
    font-size: 17px;
    font-weight: 800;
}
body.ov-baender--shop #payment #place_order:hover { color: var(--lila); }

body.ov-baender--shop .checkout-tax-notice {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 22px 10px 20px 12px;
}
body.ov-baender--shop .checkout-tax-notice strong { color: inherit; }


/* ===================================================================
   Mein Konto
   =================================================================== */
body.ov-baender--shop.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
body.ov-baender--shop .woocommerce-MyAccount-navigation {
    background: var(--lila);
    border: none;
    border-radius: 34px 14px 30px 16px;
    padding: 16px;
    width: auto;
    float: none;
    box-shadow: 0 6px 14px var(--schatten-karte);
}
body.ov-baender--shop .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
body.ov-baender--shop .woocommerce-MyAccount-navigation ul li { margin: 0 0 6px; }
body.ov-baender--shop .woocommerce-MyAccount-navigation ul li a {
    display: block;
    background: none;
    color: var(--apri);
    border: none;
    border-radius: 999px;
    padding: 11px 18px;
    font-weight: 700;
    text-decoration: none;
}
body.ov-baender--shop .woocommerce-MyAccount-navigation ul li.is-active a,
body.ov-baender--shop .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--apri);
    color: var(--lila);
}
body.ov-baender--shop .woocommerce-MyAccount-content {
    background: none;
    border: none;
    padding: 0;
    width: auto;
    float: none;
    color: var(--lila);
}
body.ov-baender--shop .woocommerce-MyAccount-content h2,
body.ov-baender--shop .woocommerce-MyAccount-content h3,
body.ov-baender--shop .woocommerce-MyAccount-content p,
body.ov-baender--shop .woocommerce-MyAccount-content li { color: var(--lila); }
body.ov-baender--shop .woocommerce-MyAccount-content .woocommerce-orders-table {
    background: var(--lila);
    border-radius: 34px 14px 30px 16px;
}
body.ov-baender--shop .woocommerce-MyAccount-content .woocommerce-orders-table th,
body.ov-baender--shop .woocommerce-MyAccount-content .woocommerce-orders-table td { color: var(--apri); border: none; }

/* Anmelde- und Registrierformular */
body.ov-baender--shop form.login,
body.ov-baender--shop form.register,
body.ov-baender--shop form.lost_reset_password {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 38px 16px 34px 18px;
    padding: 32px 30px;
    box-shadow: 0 8px 18px var(--schatten-karte);
}
body.ov-baender--shop form.login label,
body.ov-baender--shop form.register label,
body.ov-baender--shop form.login p,
body.ov-baender--shop form.register p { color: var(--apri); }
body.ov-baender--shop form.login input.input-text,
body.ov-baender--shop form.register input.input-text {
    background: var(--apri);
    color: var(--lila);
    border: none;
}
body.ov-baender--shop form.login button.button,
body.ov-baender--shop form.register button.button {
    background: var(--apri);
    color: var(--lila);
}


/* ===================================================================
   Meldungen
   ===================================================================
   Hinweis, Fehler und Erfolg tragen keine eigene Signalfarbe — die
   Palette hat zwei Toene. Unterschieden wird ueber die Umkehrung. */
body.ov-baender--shop .woocommerce-info,
body.ov-baender--shop .woocommerce-message,
body.ov-baender--shop .woocommerce-error {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 22px 10px 20px 12px;
    padding: 16px 22px;
    list-style: none;
}
body.ov-baender--shop .woocommerce-error { border-left: 8px solid var(--band); }
body.ov-baender--shop .woocommerce-info a,
body.ov-baender--shop .woocommerce-message a,
body.ov-baender--shop .woocommerce-error a { color: var(--apri); }
body.ov-baender--shop .woocommerce-info::before,
body.ov-baender--shop .woocommerce-message::before,
body.ov-baender--shop .woocommerce-error::before { display: none; }

/* Vute im Warenkorb */
body.ov-baender--shop .fox-bubble {
    background: var(--lila);
    color: var(--apri);
    border: none;
}
/* Das Zipfelchen ist KEIN Rand-Dreieck, sondern ein um 45 Grad
   gedrehtes Quadrat (pages.css). Ein border-top-color bewirkt daran
   nichts — es traegt seine eigene Flaeche in --color-surface-alt2, und
   das ist im Baender-Theme der dunklere Ton --band. Es stand dadurch in
   einer anderen Farbe als die Blase und ueberlagerte sie sichtbar.
   Flaeche und Raender muessen deshalb hier gesetzt werden. */
body.ov-baender--shop .fox-bubble::after {
    background: var(--lila);
    border: none;
}


/* ===================================================================
   Schmale Fenster
   =================================================================== */
@media (max-width: 1100px) {
    body.ov-baender--shop.single-product div.product,
    body.ov-baender--shop.woocommerce-checkout form.checkout,
    body.ov-baender--shop .cart-collaterals {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Eine Spalte allein genuegt NICHT: product.css stellt ueber
       grid-template-areas "gallery summary" beide in DIESELBE Zeile.
       Mit nur einer Spalte lagen Bild und Kaufspalte dadurch
       uebereinander — zwischen 769 und 1100 px, in beiden Fassungen
       des Ladens. Die Bereichsvorlage muss mit umgestellt werden. */
    body.ov-baender--shop.single-product div.product {
        grid-template-areas:
            "gallery"
            "summary"
            "tabs";
    }
    body.ov-baender--shop.single-product div.product .woocommerce-product-gallery,
    body.ov-baender--shop.single-product div.product .summary,
    body.ov-baender--shop.woocommerce-checkout #customer_details,
    body.ov-baender--shop.woocommerce-checkout #order_review_heading,
    body.ov-baender--shop.woocommerce-checkout #order_review,
    body.ov-baender--shop .cart_totals { grid-column: 1; position: static; }
    body.ov-baender--shop.woocommerce-account .woocommerce,
    body.ov-baender--shop.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr); }
    body.ov-baender--shop.woocommerce-cart .woocommerce-cart-form,
    body.ov-baender--shop.woocommerce-cart .cart-collaterals { grid-column: 1; }
}

@media (max-width: 1000px) {
    body.ov-baender--shop .content-block { padding: 0 32px; }
    body.ov-baender--shop.woocommerce-cart .content-block { padding-left: 32px; padding-right: 32px; }
    body.ov-baender--shop .shop-controls { position: static; }
}

@media (max-width: 900px) {
    /* Eine Tabelle mit sechs Spalten ist auf dem Handy unbrauchbar. Jede
       Zeile wird zu einer Karte, die Spaltennamen stehen als Etikett
       davor (data-title liefert WooCommerce selbst mit). */
    body.ov-baender--shop table.shop_table,
    body.ov-baender--shop table.shop_table tbody,
    body.ov-baender--shop table.shop_table tr,
    body.ov-baender--shop table.shop_table td { display: block; width: 100%; }
    body.ov-baender--shop table.shop_table thead { display: none; }
    body.ov-baender--shop table.shop_table tr {
        border-bottom: 2px solid var(--apri);
        padding: 14px 4px;
    }
    body.ov-baender--shop table.shop_table tr:last-child { border-bottom: none; }
    body.ov-baender--shop table.shop_table tbody tr + tr td { border-top: none; }
    body.ov-baender--shop table.shop_table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 7px 16px;
        text-align: right;
    }
    body.ov-baender--shop table.shop_table td::before {
        content: attr(data-title);
        font-weight: 800;
        font-size: 13px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: left;
    }
    body.ov-baender--shop table.shop_table td.product-thumbnail { justify-content: flex-start; }
    body.ov-baender--shop table.shop_table td.product-thumbnail::before { display: none; }
}

@media (max-width: 820px) {
    body.ov-baender--shop #main.main-content {
        padding: 0 0 80px;
        padding-top: 32px !important;
        /* Unter 821 px steht der Fuss wieder im Fluss. */
        margin-bottom: 0 !important;
    }
    body.ov-baender--shop .szene--kopf { padding: 72px 0 44px; }
    body.ov-baender--shop .shop-controls {
        border-radius: 34px;
        padding: 14px 16px;
    }
    body.ov-baender--shop .shop-search .shop-search__input { min-width: 0; width: 100%; }
    body.ov-baender--shop .shop-search { flex: 1 1 100%; }
    body.ov-baender--shop ul.products,
    body.ov-baender--shop .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
    body.ov-baender--shop.single-product div.product .summary { padding: 28px 22px; }
}


/* ===================================================================
   Die Kasse — WooCommerce Blocks
   ===================================================================
   ACHTUNG: /kasse/ ist NICHT das klassische form.checkout aus dem
   Shortcode, sondern der Block-Checkout (wc-block-*). Die Regeln fuer
   .woocommerce-checkout weiter oben greifen dort kein einziges Mal —
   das faellt nicht auf, solange die Seite im Umbau-Modus gesperrt ist
   und auf den Warenkorb umleitet. Beim Pruefen also erst die Sperre
   loesen (Vuturepage -> Wartungsmodus), sonst sieht man die Seite nie.

   Blocks bringt eine eigene Gestaltung mit: Eingabefelder in der
   Akzentfarbe mit WEISSER Schrift und schwebender Beschriftung, die
   IM Feld liegt. Weiss ist in dieser Palette keine Farbe, und eine
   lila Beschriftung auf lila Feld ist unsichtbar — beides wird hier
   umgestellt.
   =================================================================== */

/* Links die Eingaben, rechts die Bestellung — Blocks bringt das Raster
   selbst mit, die Spalten bekommen hier nur ihre Flaechen. */
body.ov-baender--shop .wc-block-checkout,
body.ov-baender--shop .wc-block-checkout__main {
    background: none;
    color: var(--lila);
}
body.ov-baender--shop .wc-block-checkout__main :where(h1, h2, h3, h4),
body.ov-baender--shop .wc-block-checkout__main .wc-block-components-title,
body.ov-baender--shop .wc-block-checkout__main .wc-block-components-checkout-step__title,
body.ov-baender--shop .wc-block-checkout__main .wc-block-components-checkout-step__description,
body.ov-baender--shop .wc-block-checkout__main p,
body.ov-baender--shop .wc-block-checkout__main span,
body.ov-baender--shop .wc-block-checkout__main legend { color: var(--lila); }

/* checkout.css legt JEDEN Schritt mit !important auf --color-surface-alt,
   und das ist im Baender-Theme Lila — der lila Text der Spalte stand
   darauf unsichtbar. Dagegen hilft nur dasselbe Mittel.

   Frueher stand hier `background: none` und damit lag die ganze linke
   Spalte flach auf dem Seitengrund: zehn Schritte ohne eine einzige
   Kante, an der das Auge haengenbleibt. Jetzt traegt jeder Schritt
   seine eigene Karte — siehe den Abschnitt „Ebenen der Kasse“ unten,
   dort steht auch, warum die Karte HELLER ist und nicht dunkler. */
body.ov-baender--shop .wc-block-components-checkout-step {
    background: var(--kasse-karte) !important;
    background-color: var(--kasse-karte) !important;
    border: none !important;
    border-radius: 38px 16px 34px 18px;
    /* Kein !important noetig: checkout.css setzt das Polster ohne, und
       diese Datei laeuft spaeter. Nur die Flaeche oben braucht es. */
    padding: 26px 30px 28px;
    margin: 0 0 18px;
    box-shadow: 0 7px 14px var(--schatten-eng);
}
/* Gespiegelte Rundung im Wechsel — ein Stapel identischer Karten wirkt
   sonst gestanzt. Dieselbe Unruhe, die die Baender der Seite geben. */
body.ov-baender--shop .wc-block-components-checkout-step:nth-of-type(even) {
    border-radius: 16px 38px 18px 34px;
}
/* Die Bestelluebersicht liegt schon auf der lila Karte — ein eigener
   Rahmen darum ergaebe eine Schachtel in der Schachtel. */
body.ov-baender--shop .wp-block-woocommerce-checkout-order-summary-block,
body.ov-baender--shop .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}
/* Die nicht gewaehlten Versand- und Zahlungsoptionen kommen dort in
   einem eigenen Violettton (rgba 44,26,92) — eine Zwischenfarbe, die es
   in dieser Palette nicht gibt. */
body.ov-baender--shop .wc-block-components-radio-control__option:not(.wc-block-components-radio-control__option--checked-option-highlighted),
body.ov-baender--shop .wc-block-components-radio-control-accordion-option:not(.wc-block-components-radio-control-accordion-option--checked-option-highlighted) {
    background: none !important;
    background-color: transparent !important;
}
body.ov-baender--shop .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.ov-baender--shop .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
    background: var(--lila) !important;
    color: var(--apri) !important;
}
body.ov-baender--shop .wc-block-components-checkout-step__heading { margin-top: 0; }
body.ov-baender--shop .wc-block-components-checkout-step__title {
    font-family: var(--fd);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Eingabefelder: lila Flaeche, APRICOT Schrift. Blocks setzt dort sonst
   #fff — eine dritte Farbe, die es hier nicht gibt. */
body.ov-baender--shop .wc-block-components-text-input input[type="text"],
body.ov-baender--shop .wc-block-components-text-input input[type="email"],
body.ov-baender--shop .wc-block-components-text-input input[type="tel"],
body.ov-baender--shop .wc-block-components-text-input input[type="number"],
body.ov-baender--shop .wc-block-components-textarea,
body.ov-baender--shop .wc-blocks-components-select__select,
body.ov-baender--shop .components-combobox-control__input,
body.ov-baender--shop .wc-block-components-combobox input {
    background: var(--lila) !important;
    color: var(--apri) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 16px;
}
body.ov-baender--shop .wc-block-components-text-input input:focus,
body.ov-baender--shop .wc-block-components-textarea:focus,
body.ov-baender--shop .wc-blocks-components-select__select:focus {
    outline: 3px solid var(--lila) !important;
    outline-offset: 3px;
}

/* Die schwebende Beschriftung liegt IM Feld — auf Lila gehoert sie in
   Apricot. Mit der lila Vorgabe stand sie unsichtbar im Feld. */
body.ov-baender--shop .wc-block-components-text-input label,
body.ov-baender--shop .wc-blocks-components-select__label,
body.ov-baender--shop .wc-block-components-combobox label {
    color: var(--apri) !important;
}
body.ov-baender--shop .wc-block-components-text-input input::placeholder { color: var(--apri); opacity: 1; }
/* Der Pfeil des Auswahlmenues und das Ortssymbol liegen ebenfalls auf Lila. */
body.ov-baender--shop .wc-blocks-components-select__expand,
body.ov-baender--shop .wc-block-components-address-autocomplete-icon { fill: var(--apri); color: var(--apri); }

/* Kaestchen und Auswahlknoepfe */
body.ov-baender--shop .wc-block-components-checkbox__label,
body.ov-baender--shop .wc-block-components-radio-control__label,
body.ov-baender--shop .wc-block-components-radio-control__description,
body.ov-baender--shop .wc-block-checkout__guest-checkout-notice,
body.ov-baender--shop .wc-block-checkout__login-prompt,
body.ov-baender--shop .wc-block-checkout__add-note,
body.ov-baender--shop .wc-block-checkout__terms { color: var(--lila); }
body.ov-baender--shop .wc-block-components-checkbox .wc-block-components-checkbox__input {
    border: 2px solid var(--lila);
    background: var(--apri);
}
body.ov-baender--shop .wc-block-components-checkbox .wc-block-components-checkbox__input:checked { background: var(--lila); }
body.ov-baender--shop .wc-block-components-checkbox__mark { fill: var(--apri); }
body.ov-baender--shop .wc-block-components-radio-control__option {
    background: none;
    border: 2px solid var(--lila);
    border-radius: 18px;
    margin-bottom: 10px;
}
body.ov-baender--shop .wc-block-components-radio-control__option--checked-option-highlighted,
body.ov-baender--shop .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    background: var(--lila);
}
body.ov-baender--shop .wc-block-components-radio-control__option--checked-option-highlighted .wc-block-components-radio-control__label,
body.ov-baender--shop .wc-block-components-radio-control__option--checked-option-highlighted .wc-block-components-radio-control__description { color: var(--apri); }

/* Die Bestellspalte ist die Karte der Seite: volle Gegenfarbe, und sie
   laeuft mit — derselbe Gedanke wie im Warenkorb. */
body.ov-baender--shop .wc-block-checkout__sidebar {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 38px 16px 34px 18px;
    padding: 26px 24px;
    box-shadow: 0 8px 18px var(--schatten-karte);
    position: sticky;
    top: 118px;
    align-self: start;
}
body.ov-baender--shop .wc-block-checkout__sidebar *,
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-title,
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-product-name,
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-totals-item__label,
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-totals-item__value,
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-product-details__name,
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-product-details__value { color: var(--apri); }
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-panel,
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    background: none;
    border-color: var(--apri);
}
body.ov-baender--shop .wc-block-components-order-summary-item__image img {
    background: var(--apri);
    border-radius: 14px;
}
body.ov-baender--shop .wc-block-components-totals-footer-item {
    border-top: 2px solid var(--apri);
    font-weight: 800;
}
body.ov-baender--shop .wc-block-components-order-summary-item__quantity {
    background: var(--apri);
    color: var(--lila);
    border-color: var(--apri);
}

/* Der Kaufknopf: Blocks setzt ihn in der Akzentfarbe mit weisser
   Schrift. Er steht auf Apricot und traegt deshalb --band, wie jeder
   Knopf im Inhalt. */
body.ov-baender--shop .wc-block-components-button,
body.ov-baender--shop .wc-block-components-checkout-place-order-button {
    background: var(--band) !important;
    color: var(--apri) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 16px 32px;
    font-weight: 800;
    box-shadow: 0 5px 10px var(--schatten-eng);
}
body.ov-baender--shop .wc-block-components-button__text,
body.ov-baender--shop .wc-block-components-checkout-place-order-button__text { color: var(--apri) !important; }
body.ov-baender--shop .wc-block-components-button:hover { color: var(--apri) !important; }
/* Auf der lila Bestellkarte waere --band zu nah am Untergrund. */
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-button {
    background: var(--apri) !important;
    color: var(--lila) !important;
}
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-button__text { color: var(--lila) !important; }

/* Meldungen tragen keine eigene Signalfarbe. */
body.ov-baender--shop .wc-block-components-notice-banner {
    background: var(--lila);
    color: var(--apri);
    border: none;
    border-radius: 20px 8px 18px 10px;
}
body.ov-baender--shop .wc-block-components-notice-banner *,
body.ov-baender--shop .wc-block-components-notice-banner svg { color: var(--apri); fill: var(--apri); }

body.ov-baender--shop .wc-block-components-validation-error {
    color: var(--lila);
    font-weight: 800;
}
body.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-validation-error { color: var(--apri); }

@media (max-width: 1100px) {
    body.ov-baender--shop .wc-block-checkout__sidebar { position: static; }
}


/* ===================================================================
   Ebenen der Kasse
   ===================================================================
   Die Kasse lag komplett auf einer Ebene: Seitengrund Apricot, darauf
   zehn Schritte ohne eigene Flaeche, und als einziger Gegenpol die lila
   Bestellspalte rechts. Ein Formular ohne Kanten liest sich wie eine
   Liste ohne Absaetze.

   WARUM DIE KARTE HELLER IST UND NICHT DUNKLER — das ist gemessen, nicht
   geraten. Apricot mit einem Schuss Lila abzudunkeln haette die Karte
   sichtbar gemacht, aber den lila Text darauf mitgenommen:

       Seitengrund #FFBB8A            Lila darauf  5,14
       8 % Lila beigemischt #ECAC87   Lila darauf  4,37  <- unter AA
       16 % Weiss beigemischt #FFC69D Lila darauf  5,58  <- besser als jetzt

   Die helle Karte gewinnt also doppelt: Sie hebt sich ab UND der Text
   steht besser als vorher. Sie liegt oben und wirft deshalb Schatten —
   dieselbe Regel wie bei den lila Karten auf den Inhaltsseiten.

   Damit hat die Seite drei Ebenen statt einer:
       Seitengrund   Apricot        die Flaeche, auf der alles liegt
       Schrittkarte  Apricot hell   wo etwas einzutragen ist
       Lila          Eingabefelder, Schnellkauf oben, Bestellung rechts
   =================================================================== */

body.ov-baender--shop.woocommerce-checkout {
    /* Apricot mit 16 % Weiss. Steht hier und nicht in der Palette:
       Diese Flaeche gibt es ausschliesslich in der Kasse. */
    --kasse-karte: #FFC69D;
}

/* Das Raster: Blocks laesst die Spalten ueber die volle Breite laufen.
   Bei --breite 1580px standen die Eingabefelder dann vereinzelt in
   einer sehr weiten Spalte. Gedeckelt liest sich die Strecke als Weg. */
body.ov-baender--shop .wc-block-checkout {
    max-width: 1240px;
    margin-inline: auto;
    gap: 40px;
}

/* --- Schrittnummern ------------------------------------------------
   Blocks bringt eigene mit, aber nur unter der Klasse
   .wc-block-checkout__form--with-step-numbers und als schlichtes „1.“
   mit senkrechtem Strich. Ob die Klasse da ist, haengt an einer
   Block-Einstellung — darauf baut hier nichts auf. Stattdessen der
   Kreis, den das Theme ohnehin kennt (.ic): auf heller Karte lila
   Flaeche mit apricot Zeichen. */
body.ov-baender--shop .wc-block-checkout__main { counter-reset: kasse; }

body.ov-baender--shop .wc-block-components-checkout-step__title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 4px;
}
body.ov-baender--shop .wc-block-components-checkout-step__title::before {
    counter-increment: kasse;
    content: counter(kasse);
    /* Die Vorgabe von Blocks setzt das Zeichen absolut nach links
       ausserhalb der Karte — hier soll es in der Zeile stehen. */
    position: static;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--lila);
    color: var(--apri);
    font-family: var(--fd);
    font-size: 16px;
    font-weight: 800;
    line-height: 34px;
    text-align: center;
}
/* Der senkrechte Strich von Blocks verbindet Schritte, die jetzt in
   getrennten Karten liegen — er lief quer durch die Raender. */
body.ov-baender--shop .wc-block-components-checkout-step__content::before,
body.ov-baender--shop .wc-block-components-checkout-step__description::before {
    content: none;
}
/* Das Einrueckungspolster der Blocks-Nummerierung entfaellt mit ihr. */
body.ov-baender--shop .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number {
    padding: 0;
}
body.ov-baender--shop .wc-block-components-checkout-step__description {
    margin: 0 0 16px 47px;
    opacity: 0.85;
}

/* --- Der Schnellkauf oben ------------------------------------------
   Apple Pay, PayPal und Co. sind die Abkuerzung, nicht Schritt eins.
   Als lila Karte steht das sofort im Bild und gibt der Spalte oben
   links einen Anker, der die Bestellspalte rechts ausbalanciert.
   :has() sorgt dafuer, dass bei abgeschalteten Verfahren keine leere
   lila Flaeche stehen bleibt. */
body.ov-baender--shop .wp-block-woocommerce-checkout-express-payment-block:has(.wc-block-components-express-payment) {
    background: var(--lila);
    border-radius: 38px 16px 34px 18px;
    padding: 24px 26px;
    margin-bottom: 22px;
    box-shadow: 0 8px 18px var(--schatten-karte);
}
body.ov-baender--shop .wp-block-woocommerce-checkout-express-payment-block:has(.wc-block-components-express-payment) :where(p, span, legend, h2, .wc-block-components-title) {
    color: var(--apri);
}
body.ov-baender--shop .wc-block-components-express-payment__event-buttons > li { margin-bottom: 10px; }

/* --- Abschluss -----------------------------------------------------
   Zustimmung und Kaufknopf gehoeren zusammen und sind der Moment, auf
   den die Seite zulaeuft. Sie bekommen keine Karte, sondern Luft: der
   Knopf traegt --band und ist damit der dunkelste Punkt der Spalte. */
body.ov-baender--shop .wc-block-checkout__terms {
    margin: 26px 0 18px;
    padding: 0 30px;
}
body.ov-baender--shop .wc-block-checkout__actions {
    padding: 0 30px 8px;
}
body.ov-baender--shop .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
    width: 100%;
    padding: 19px 32px;
    font-size: 17px;
}

/* --- Dichte --------------------------------------------------------
   Die Felder standen mit dem Abstand der Vorgabe sehr weit
   auseinander; innerhalb einer Karte darf es enger zugehen. */
body.ov-baender--shop .wc-block-components-checkout-step__content > * + * { margin-top: 14px; }
body.ov-baender--shop .wc-block-components-address-form .wc-block-components-text-input { margin-top: 12px; }

/* Die Fassung fuers Handy steht NICHT hier, sondern in
   css/shop-mobil.css, Abschnitt F — diese Datei laeuft frueher, und
   shop-mobil.css haette jede Medienabfrage von hier wieder ueberholt.
   Wer die Karten aendert, zieht dort nach. */


/* ===================================================================
   Reiter der Produktseite — alle drei Zustaende
   ===================================================================
   product.css legt beim Ueberfahren eine Flaeche in --color-accent-light
   unter den LINK, und das ist im Baender-Theme Apricot. Auf dem
   GEWAEHLTEN Reiter blieb die Schrift dabei apricot — beim Ueberfahren
   verschwand die Beschriftung also vollstaendig (1,00:1 gemessen).

   Deshalb stehen Flaeche UND Schrift aller drei Zustaende hier an EINER
   Stelle, statt sich auf Regeln aus zwei Dateien zu verlassen:

     ruhend    Umriss  — lila Rahmen, lila Schrift auf Apricot
     ueberfahren       — lila Flaeche, apricot Schrift
     gewaehlt          — lila Flaeche, apricot Schrift, kraeftigerer Rand
   =================================================================== */
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li a,
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li a:hover,
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li a:focus {
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
    border-radius: 999px;
}

/* Ruhend */
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li {
    background: none;
    transition: background 0.18s;
}
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li a { color: var(--lila); }

/* Ueberfahren und Tastaturfokus — die FLAECHE wechselt, nicht der Link */
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li:hover,
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li:focus-within {
    background: var(--lila);
}
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li:hover a,
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li:focus-within a {
    color: var(--apri);
}

/* Gewaehlt — auch beim Ueberfahren, sonst faellt er wieder auf */
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li.active,
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li.active:hover {
    background: var(--lila);
    /* KEINE andere Randbreite als der ruhende Reiter — 3 gegen 2 px
       liess den gewaehlten enger wirken. Beide Knoepfe sind gleich
       gross, unterschieden wird nur ueber die Farbe. */
    border-width: 2px;
}
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li.active a,
body.ov-baender--shop div.product .woocommerce-tabs ul.tabs li.active:hover a { color: var(--apri); }

/* ===================================================================
   Vute im Warenkorb
   ===================================================================
   Er steht jetzt unter der Postenliste in der breiten linken Spalte
   (siehe openvuture_fox_mascot, Hook woocommerce_after_cart_table) und
   darf den Platz auch nutzen — vorher war er in der schmalen Spalte
   eingezwaengt, waehrend links eine grosse Flaeche leer blieb. */
body.ov-baender--shop.woocommerce-cart .fox-mascot {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 56px auto 0;
    padding: 0;
    max-width: 620px;
}
body.ov-baender--shop.woocommerce-cart .fox-mascot img {
    max-width: min(440px, 72vw);
    width: 100%;
    height: auto;
}
body.ov-baender--shop.woocommerce-cart .fox-bubble {
    max-width: 460px;
    font-size: 17px;
    line-height: 1.5;
    padding: 16px 22px;
}

@media (max-width: 900px) {
    body.ov-baender--shop.woocommerce-cart .fox-mascot { margin-top: 36px; }
    body.ov-baender--shop.woocommerce-cart .fox-mascot img { max-width: min(300px, 70vw); }
}

/* ===================================================================
   Kasse — Felder, Auswahlmenues und Auswahlknoepfe aus einem Guss
   ===================================================================
   Stand 21.09.2026. Gemessen im Browser, nicht aus dem Quelltext
   gelesen — alle Punkte unten waren real sichtbar:

   1. checkout.css (alte dunkle Palette) setzt Felder und die HUELLE des
      Auswahlmenues mit !important auf --color-surface (= --band), 4 px
      Rundung und einen Rand in rgba(255,255,255,.07). Die Regeln oben
      ueberschreiben nur input[type=…] und das <select> selbst. Beim
      Land/Region-Menue stand deshalb hinter dem runden Feld ein eckiger
      Kasten in einem anderen Lila — "nicht so wie die anderen".
   2. Die Beschriftung der GEWAEHLTEN Zahlungsart ("Karte") und der Preis
      der gewaehlten Versandart ("Kostenlos") standen lila auf lila,
      1,00:1. Die Umfaerbung oben kannte nur __option, nicht die
      Akkordeon-Variante der Zahlungsarten und nicht __secondary-label.
   3. Die Auswahlknoepfe waren Weiss mit schwarzem Punkt — Weiss ist in
      dieser Palette keine Farbe.
   4. Die Kartenfelder von WooPayments hatten gar keinen Kasten. Sie
      liegen in einem iframe und werden von WooPayments nach einem
      versteckten Klon des E-Mail-Felds gestaltet (#wcpay-hidden-input).
      Der ist lila — auf der lila Karte der gewaehlten Zahlungsart also
      unsichtbar. Der Klon bekommt deshalb --band mit apricoter Schrift.
      NICHT Apricot mit lila Schrift (erster Versuch): die ruhende
      Beschriftung ("Kartennummer") misst WooPayments am ECHTEN
      E-Mail-Label, und das ist apricot — sie stand dann apricot auf
      apricot und war weg.
   5. Kein Feld hatte einen Hover-Zustand. Jetzt alle denselben, und nur
      ueber die Farbe (--lila -> --band), nie ueber Masse.
   =================================================================== */

/* 1a. Jedes Feld — auch eines ohne type-Attribut und die Notiz. */
body.ov-baender--shop .wc-block-components-text-input input,
body.ov-baender--shop .wc-block-components-textarea,
body.ov-baender--shop .wc-block-checkout__add-note textarea {
    background: var(--lila) !important;
    color: var(--apri) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

/* 1b. Die Huelle des Auswahlmenues ist das, was man als Feld sieht —
   sie bekommt dieselbe Form und Flaeche wie jedes andere Feld. */
body.ov-baender--shop .wc-blocks-components-select__container,
body.ov-baender--shop .wc-block-components-select-input,
body.ov-baender--shop .wc-block-components-country-input .wc-blocks-components-select__container,
body.ov-baender--shop .wc-block-components-state-input .wc-blocks-components-select__container {
    background: var(--lila) !important;
    color: var(--apri) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}
/* Die aufgeklappte Liste zeichnet der Browser selbst; Firefox und
   Chromium uebernehmen dafuer die Farben der <option>. */
body.ov-baender--shop .wc-blocks-components-select__select option {
    background: var(--lila);
    color: var(--apri);
}

/* 5. Hover: ein Zustand fuer alle Felder und das Menue. --band traegt
   die apricote Schrift und Beschriftung mit 6,62:1. */
body.ov-baender--shop .wc-block-components-text-input input,
body.ov-baender--shop .wc-block-components-textarea,
body.ov-baender--shop .wc-block-checkout__add-note textarea,
body.ov-baender--shop .wc-blocks-components-select__container,
body.ov-baender--shop .wc-blocks-components-select__select {
    transition: background-color .15s ease;
}
body.ov-baender--shop .wc-block-components-text-input input:hover,
body.ov-baender--shop .wc-block-components-textarea:hover,
body.ov-baender--shop .wc-block-checkout__add-note textarea:hover,
body.ov-baender--shop .wc-blocks-components-select__container:hover,
body.ov-baender--shop .wc-blocks-components-select__container:hover .wc-blocks-components-select__select {
    background: var(--band) !important;
}

/* 3. Auswahlknoepfe wie die Kaestchen: Apricot mit lila Ring, gewaehlt
   ein lila Punkt. Auf der lila Flaeche der gewaehlten Option wird der
   Ring apricot, damit der Kreis sich abhebt. */
body.ov-baender--shop .wc-block-components-radio-control__input {
    background: var(--apri) !important;
    border: 2px solid var(--lila) !important;
}
body.ov-baender--shop .wc-block-components-radio-control__input:checked {
    border-color: var(--apri) !important;
}
body.ov-baender--shop .wc-block-components-radio-control__input:checked::before {
    background: var(--lila) !important;
}

/* 2. Alles, was auf der lila Flaeche einer gewaehlten Option steht, in
   Apricot — Versandart UND Zahlungsart, Beschriftung UND Preis. `span`
   steht mit drin, weil "Kostenlos" in einem eigenen inneren <span>
   (.wc-block-checkout__shipping-option--free) sitzt, und das holt sich
   von `.wc-block-checkout__main span` sonst wieder Lila. */
body.ov-baender--shop .wc-block-components-radio-control__option--checked-option-highlighted :is(
    .wc-block-components-radio-control__label,
    .wc-block-components-radio-control__secondary-label,
    .wc-block-components-radio-control__description,
    .wc-block-components-radio-control__secondary-description,
    .wc-block-components-payment-method-label,
    .wc-block-formatted-money-amount,
    span),
body.ov-baender--shop .wc-block-components-radio-control-accordion-option--checked-option-highlighted :is(
    .wc-block-components-radio-control__label,
    .wc-block-components-radio-control__secondary-label,
    .wc-block-components-radio-control__description,
    .wc-block-components-radio-control__secondary-description,
    .wc-block-components-payment-method-label,
    .wc-block-formatted-money-amount,
    span) {
    color: var(--apri) !important;
}

/* Versand- und Zahlungsarten dieselbe Form: ungewaehlt ein lila Umriss,
   gewaehlt lila gefuellt. Die Zahlungsarten hatten ungewaehlt gar keinen
   Umriss und gewaehlt 4 px Rundung statt 18 px. Der Umriss sitzt an
   der aeusseren Huelle, das innere Label bekommt keinen zweiten. */
body.ov-baender--shop .wc-block-components-radio-control-accordion-option {
    border: 2px solid var(--lila) !important;
    border-radius: 18px !important;
    margin-bottom: 10px;
}
body.ov-baender--shop .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
    border: none !important;
    margin-bottom: 0;
}
/* Die Zaehlplakette "+ 2" neben den Kartenlogos war fast schwarz auf
   Lila (1,97:1). */
body.ov-baender--shop .payment-methods--logos-count {
    background: var(--band) !important;
    color: var(--apri) !important;
    border: none !important;
}

/* 4. Das Muster, nach dem WooPayments die Kartenfelder im iframe
   gestaltet. Zwei IDs, damit es die type-Regel oben sicher schlaegt. */
body.ov-baender--shop #wcpay-hidden-div #wcpay-hidden-input,
body.ov-baender--shop #wcpay-hidden-div #wcpay-hidden-invalid-input {
    background: var(--band) !important;
    color: var(--apri) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

/* Warenkorb: die Versandart in der Summenkarte stand lila auf lila. */
body.ov-baender--shop .cart_totals .woocommerce-shipping-methods,
body.ov-baender--shop .cart_totals .woocommerce-shipping-methods label,
body.ov-baender--shop .cart_totals .woocommerce-shipping-methods li {
    color: var(--apri);
}

/* ===================================================================
   Gast-Downloads (inc/gast-downloads.php)
   ===================================================================
   Hinweis auf der Danke-Seite ueber der Download-Tabelle und in
   Mein Konto -> Downloads. Umriss statt Flaeche: darunter folgt die
   lila Tabelle, zwei lila Kaesten hintereinander liefen ineinander.
   Dieselbe Form wie eine ungewaehlte Option in der Kasse. */
body.ov-baender--shop .ov-gd-hinweis {
    border: 2px solid var(--lila);
    border-radius: 18px;
    padding: 20px 24px;
    margin: 28px 0 24px;
    color: var(--lila);
    max-width: 760px;
}
body.ov-baender--shop .ov-gd-hinweis > :last-child { margin-bottom: 0; }
body.ov-baender--shop .ov-gd-hinweis p { margin: 0 0 10px; color: var(--lila); }
body.ov-baender--shop .ov-gd-hinweis .ov-gd-hinweis__titel {
    font-family: var(--fd);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--lila);
}
body.ov-baender--shop .ov-gd-hinweis__konto { font-size: 15px; }
body.ov-baender--shop .ov-gd-hinweis__form { margin: 14px 0 0; }
/* Der Knopf "Bestaetigungslink senden" erbte den Kontoknopf mit WEISSER
   Schrift. Knopfregel des Ladens: auf Apricot ruhend --band, ueberfahren
   --lila, beides mit apricoter Schrift. */
body.ov-baender--shop .ov-gd-hinweis .button {
    background: var(--band) !important;
    color: var(--apri) !important;
    border: none !important;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 800;
}
body.ov-baender--shop .ov-gd-hinweis .button:hover,
body.ov-baender--shop .ov-gd-hinweis .button:focus-visible {
    background: var(--lila) !important;
    color: var(--apri) !important;
}