/* ============================================
   Ketex – global.css
   NUR CSS-only Dinge. Farben, Fonts, Abstände
   werden über Elementor Kit (siehe `ketex-setup.php` → `configure_theme_foundation()`) gesetzt.
   ============================================ */

/* ── Self-hosted Fonts (DSGVO) ── */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lora/lora-v37-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/lora/lora-v37-latin_latin-ext-500.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/lora/lora-v37-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lora/lora-v37-latin_latin-ext-700.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/lora/lora-v37-latin_latin-ext-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/lora/lora-v37-latin_latin-ext-500italic.woff2') format('woff2'); }

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/dm-sans/dm-sans-v17-latin_latin-ext-300.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-sans/dm-sans-v17-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dm-sans/dm-sans-v17-latin_latin-ext-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/dm-sans/dm-sans-v17-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/dm-sans/dm-sans-v17-latin_latin-ext-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/dm-sans/dm-sans-v17-latin_latin-ext-italic.woff2') format('woff2'); }

/* CSS Custom Properties */
:root {
    --ketex-primary:    #B8452E;
    --ketex-secondary:  #A3434B;
    --ketex-bg:         #FCFAF8;
    --ketex-bg-warm:    #EDE7DE;
    --ketex-bg-light:   #FAF8F5;
    --ketex-dark:       #2A2622;
    --ketex-text:       #2A2622;
    --ketex-border:     #E8E0D8;
    --ketex-header-height: 80px;
    --ketex-content-max: 1400px;

    /* ── Typografie-Rollen (Phase 1: Struktur verbindlich; Skala-Werte provisorisch, Feinjustierung Phase 3/Claude Design) ── */
    --ketex-font-title: 'Lora', Georgia, serif;
    --ketex-font-ui:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --ketex-title-display: clamp(36px, 6.6vw, 96px);
    --ketex-title-page:    clamp(28px, 4vw, 48px);
    --ketex-title-product: clamp(26px, 2.4vw, 34px);
    --ketex-title-section: 28px;
    --ketex-title-card:    20px;
    --ketex-title-card-sm: 16px;
    --ketex-title-weight:        400;
    --ketex-title-weight-strong: 600;
    --ketex-label:  13px;
    --ketex-kicker: 11px;

    /* muted-Rollen getrennt (vorher mischte --ketex-text-muted beide) */
    --ketex-text-muted:   #6B6B6B;  /* sekundärer Fließtext */
    --ketex-kicker-color: #8A8075;  /* Label/Kicker-Grau */
}

/* Native Basis-Typografie (Brand-Body-Schrift).
   Kam früher vom Elementor-Kit (`.elementor-kit-6835`-Global-Styles); da das Kit
   auf nativen Seiten dequeut wird (elementor-decouple, front_page/woo/recipe), war
   die Body-Schrift dort ungesetzt → Browser-Default „Times". Hier nativ ersetzt.
   Auf Elementor-Seiten (Suche) gewinnt weiter `.elementor-kit-6835` (Klasse > body). */
body {
    font-family: var(--ketex-font-ui);
    color: var(--ketex-text);
}

/* Text wrapping + Titel-Default (Fallback-Netz).
   Jede Überschrift erbt per Default die Titel-Familie (Lora) UND den Titel-Weight
   (400) — statt Body-Font (DM Sans) bzw. UA-Default „bold" (700). Fehlt einer
   Titel-Regel mal Familie oder Gewicht (z.B. bei WooCommerce-/Plugin-Headings),
   ist sie damit trotzdem automatisch Lora 400 statt DM-Sans oder fett-700.
   Element-Selektor (Spezifität 0,0,1) → jede Klassen-Regel gewinnt: bewusste
   DM-Sans-Headings (z.B. .ketex-footer__heading) setzen ihre Familie explizit
   und bleiben unberührt.
   Projekt-Entscheidung: alle Lora-Titel sind 400 (leichter Editorial-Serifen-Look,
   „nicht fett"). Die strong-Stufe (--ketex-title-weight-strong, 600) ist derzeit
   bewusst ungenutzt — als Reserve für eine spätere Aufmacher-/Kacheln-Feinjustierung
   (Phase 3/Claude Design) definiert, nicht verwaist. */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font-family: var(--ketex-font-title);
    font-weight: var(--ketex-title-weight);
}
p {
    text-wrap: pretty;
}

/* Links: im Ruhezustand keine Unterstreichung — die Terrakotta-/Akzentfarbe
   signalisiert den Link. Fließtext-Links (in Absätzen) bekommen beim Hover
   eine Unterstreichung als Affordance (WCAG 1.4.1 — Erkennbarkeit nicht nur
   über Farbe). Struktur-Links (Nav, Cards, Buttons) liegen nicht in <p> und
   bleiben unberührt; komponenten-eigene Hover-Unterstreichungen bleiben. */
a { text-decoration: none; }
p a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Die Akzentfarbe, die der Absatz darüber voraussetzt, gab es bislang nur an
   Komponenten und an der Template-Hülle `.ketex-page__content` (weiter unten).
   Jeder Link außerhalb davon fiel auf das Browser-Blau #0000EE zurück — real
   gemessen im Magazin-Fließtext („Hier kann das Buch bestellt werden") und in
   den Kategorie-Links der Produktseite. Deshalb hier als Element-Default.
   `:where()` hält die Spezifität bei 0: jede Komponentenregel — Header, Footer,
   Breadcrumb, Karte, `color: inherit` — gewinnt weiterhin ohne !important.
   Buttons sind ausgenommen, und zwar über beide Klassen: Woo-Blocks rendern
   „In den Warenkorb" als `a.wp-block-button__link` OHNE `wp-element-button`.
   Ein Default, der nur letztere ausnimmt, färbt diesen Button terrakotta auf
   terrakotta — auf /warenkorb/ real erzeugt, als das hier noch in theme.json
   als `elements.link` stand. */
:where(a:not(.button):not(.wp-element-button):not(.wp-block-button__link)) {
    color: var(--ketex-primary);
}

/* ── Hero H1: Nur Dinge die Elementor nicht kann ── */
/* font-weight, line-height, letter-spacing → Elementor Kit Global Styles */
/* clamp() responsive font-size und max-width → CSS (Elementor kann kein clamp) */
.ketex-hero-h1 {
    font-size: var(--ketex-title-display);
    color: #FCFAF8;
    max-width: 672px;
}

/* ── Kicker (kleine Beschriftung über Headings) ── */
.ketex-kicker {
    font-family: var(--ketex-font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #B8452E;
    margin: 0 0 16px 0;
}
/* Hero-Kicker: Lovable hat 14px, 4.2px letter-spacing, rgba(252,250,248,0.8) */
.ketex-kicker-light {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 4.2px;
    color: rgba(252, 250, 248, 0.8);
}

/* ── Badge/Tag Pill ── */
.ketex-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(184, 69, 46, 0.1);
    color: #B8452E;
    font-family: var(--ketex-font-ui);
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 99px;
}

/* ── Kategorie-Karten: Label am unteren Rand ── */
.ketex-cat-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}
.ketex-cat-label {
    color: #FCFAF8;
    font-family: var(--ketex-font-ui);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

/* ── Produkt-Mini-Card (Damit gelingt's) — Lovable: horizontal, kompakt ── */
.ketex-mini-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.ketex-mini-card-link {
    text-decoration: none;
    color: inherit;
    flex: 1;
    max-width: 380px;
}
.ketex-mini-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E7E1DA;
    border-radius: 12px;
    padding: 12px;
    transition: box-shadow 0.25s ease;
}
.ketex-mini-card:hover {
    box-shadow: 0 4px 16px rgba(42, 38, 34, 0.08);
}
.ketex-mini-card-img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
}
.ketex-mini-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ketex-mini-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ketex-mini-card-name {
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--ketex-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ketex-mini-card-rating {
    font-size: 12px;
    color: var(--ketex-text-muted);
}
.ketex-mini-card-stars {
    color: #F59E0B;
    letter-spacing: 1px;
}
.ketex-mini-card-price {
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--ketex-secondary);
}

/* ── WooCommerce Products Widget (Bestseller, Lovable-Design) ── */
/* Grid: gleiche Kartenhoehe */
.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
/* Card container: Flexbox fuer Button am unteren Rand.
   Mit :not(.ketex-product-card) gescoped — Shop-Archive nutzt seit Bundle B
   Phase 1 eigenes Markup mit eigenen Styles (Block am Datei-Ende). */
.woocommerce ul.products li.product:not(.ketex-product-card) {
    background: #FAF8F5;
    border: 1px solid #E7E1DA;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product:not(.ketex-product-card):hover {
    box-shadow: 0 8px 24px rgba(42, 38, 34, 0.1);
    transform: translateY(-2px);
}
/* Produkt-Bild: randlos, quadratisch */
.woocommerce ul.products li.product:not(.ketex-product-card) a img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    border-radius: 0;
    display: block;
    margin: 0;
    padding: 0;
}
/* Bild-Link: kein Padding */
.woocommerce ul.products li.product:not(.ketex-product-card) a.woocommerce-LoopProduct-link {
    display: block;
    padding: 0;
    margin: 0;
}
/* Content-Bereich unter dem Bild: alle Text-Elemente horizontal einruecken.
   WICHTIG: Cards nutzen .ketex-product-card__category + .ketex-rating (Custom),
   nicht WCs .star-rating — daher beide explizit. */
.woocommerce ul.products li.product:not(.ketex-product-card) .woocommerce-loop-product__title,
.woocommerce ul.products li.product:not(.ketex-product-card) .price,
.woocommerce ul.products li.product:not(.ketex-product-card) .star-rating,
.woocommerce ul.products li.product:not(.ketex-product-card) .ketex-product-card__category,
.woocommerce ul.products li.product:not(.ketex-product-card) .ketex-rating {
    padding-left: 16px;
    padding-right: 16px;
}
/* Kategorie-Kicker: etwas Abstand zum Bild oben */
.woocommerce ul.products li.product:not(.ketex-product-card) .ketex-product-card__category {
    margin-top: 14px;
}
/* Produktname: Lora 400 16px dunkel */
.woocommerce ul.products li.product:not(.ketex-product-card) .woocommerce-loop-product__title {
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-card-sm);
    font-weight: 400;
    color: var(--ketex-dark);
    line-height: 1.5;
    margin-top: 8px;
    margin-bottom: 4px;
}
/* Preis: 16px 600, Lovable-Rot */
.woocommerce ul.products li.product:not(.ketex-product-card) .price {
    font-size: 16px;
    font-weight: 600;
    color: #B8452E;
    margin-bottom: 12px;
}
/* Sterne: gelb */
.woocommerce ul.products li.product:not(.ketex-product-card) .star-rating {
    color: #F59E0B;
    margin-top: 12px;
    margin-bottom: 4px;
}
/* MwSt/Versand-Hinweis ausblenden */
.woocommerce ul.products li.product:not(.ketex-product-card) .wc-gzd-additional-info,
.woocommerce ul.products li.product:not(.ketex-product-card) .tax-info,
.woocommerce ul.products li.product:not(.ketex-product-card) .price .woocommerce-Price-currencySymbol + .tax,
.woocommerce ul.products li.product:not(.ketex-product-card) .woocommerce-loop-product__link + .price ~ *:not(.button):not(.add_to_cart_button) {
    display: none;
}
.woocommerce ul.products .wgm-info,
.woocommerce ul.products .includes_tax,
.woocommerce ul.products .shipping-info {
    display: none;
}
/* Button: volle Breite am Kartenende (kein Inset mehr, da kein Card-Container) */
.woocommerce ul.products li.product:not(.ketex-product-card) .button,
.woocommerce ul.products li.product:not(.ketex-product-card) .add_to_cart_button,
.woocommerce ul.products li.product:not(.ketex-product-card) a.product_type_simple {
    background-color: var(--ketex-primary);
    color: var(--ketex-bg);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--ketex-font-ui);
    padding: 12px 24px;
    margin: auto 0 0 0;
    width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
    transition: opacity 0.2s;
}
.woocommerce ul.products li.product:not(.ketex-product-card) .button:hover {
    opacity: 0.88;
}
/* Wishlist-Link ausblenden */
.woocommerce ul.products li.product:not(.ketex-product-card) .tinvwl_add_to_wishlist_button,
.woocommerce ul.products li.product:not(.ketex-product-card) .yith-wcwl-add-to-wishlist,
.woocommerce ul.products li.product:not(.ketex-product-card) [class*="wishlist"] {
    display: none;
}
/* Produktname-Link: Farbe dunkel, nicht Accent */
.woocommerce ul.products li.product:not(.ketex-product-card) a {
    color: var(--ketex-dark);
    text-decoration: none;
}
.woocommerce ul.products li.product:not(.ketex-product-card) a:hover .woocommerce-loop-product__title {
    color: var(--ketex-primary);
}

/* ── Newsletter Karte ── */
.ketex-newsletter-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(252,250,248,0.1);
    border-radius: 16px;
}

/* ── Star Rating (HTML) ── */
.ketex-stars {
    color: #E8A838;
    font-size: 14px;
    letter-spacing: 1px;
}
.ketex-rating-text {
    font-family: var(--ketex-font-ui);
    font-size: 13px;
    color: var(--ketex-text-muted);
    margin-left: 6px;
}

/* ── Footer Links ── */
.ketex-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ketex-footer-links li {
    margin-bottom: 10px;
}
.ketex-footer-links a {
    color: rgba(252,250,248,0.65);
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.ketex-footer-links a:hover {
    color: #FCFAF8;
}

/* ── Social Icons ── */
.ketex-social-icons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.ketex-social-icons a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(252,250,248,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(252,250,248,0.65);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.ketex-social-icons a:hover {
    border-color: rgba(252,250,248,0.5);
    color: #FCFAF8;
}

/* ── Kategorie-Karten ── */
.ketex-category-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}
.ketex-category-card img {
    transition: transform 0.4s ease;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}
.ketex-category-card:hover img {
    transform: scale(1.05);
}


/* ── Scroll-Animationen ── */
.ketex-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.ketex-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── WPForms Newsletter ── */
.ketex-newsletter-form .wpforms-field-label {
    display: none;
}
.ketex-newsletter-form input[type="email"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(252, 250, 248, 0.2) !important;
    border-radius: 8px !important;
    color: var(--ketex-bg) !important;
    padding: 12px 16px !important;
    font-family: var(--ketex-font-ui) !important;
    font-size: 15px !important;
}
.ketex-newsletter-form input[type="email"]::placeholder {
    color: rgba(252, 250, 248, 0.5) !important;
}
.ketex-newsletter-form input[type="email"]:focus {
    border-color: rgba(252, 250, 248, 0.5);
    outline: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.12);
}
.ketex-newsletter-form button[type="submit"] {
    background-color: var(--ketex-primary) !important;
    color: var(--ketex-bg) !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--ketex-font-ui) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 28px !important;
    cursor: pointer;
    transition: opacity 0.2s !important;
}
.ketex-newsletter-form button[type="submit"]:hover {
    opacity: 0.88;
}

/* ── Breadcrumbs (Helper-Plugin) ── */
.ketex-breadcrumbs {
    font-family: var(--ketex-font-ui);
    font-size: 13px;
    color: var(--ketex-text-muted);
    padding: 16px 0;
}
.ketex-breadcrumbs a {
    color: var(--ketex-text-muted);
    text-decoration: none;
}
.ketex-breadcrumbs a:hover {
    color: var(--ketex-primary);
}
.ketex-breadcrumbs .sep {
    margin: 0 8px;
    color: #C8C0B8;
}
.ketex-breadcrumbs .current {
    color: var(--ketex-text);
}

/* === SHOP === */

/* Spalten-Modifier-Klassen (Bundle C).
   Wrapper .ketex-shop-archive-wrap bekommt drei Modifier-Klassen
   ketex-cols-desktop-N, ketex-cols-tablet-N, ketex-cols-mobile-N
   die je nach Breakpoint greifen. Tablet ≤ 980px, Mobile ≤ 600px. */

.ketex-shop-archive-wrap .woocommerce ul.products,
.woocommerce .ketex-shop-archive-wrap ul.products {
    display: grid !important;
    gap: 32px;
}

.ketex-cols-desktop-2 .woocommerce ul.products,
.woocommerce .ketex-cols-desktop-2 ul.products { grid-template-columns: repeat(2, 1fr); }
.ketex-cols-desktop-3 .woocommerce ul.products,
.woocommerce .ketex-cols-desktop-3 ul.products { grid-template-columns: repeat(3, 1fr); }
.ketex-cols-desktop-4 .woocommerce ul.products,
.woocommerce .ketex-cols-desktop-4 ul.products { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
    .ketex-cols-tablet-1 .woocommerce ul.products,
    .woocommerce .ketex-cols-tablet-1 ul.products { grid-template-columns: 1fr; }
    .ketex-cols-tablet-2 .woocommerce ul.products,
    .woocommerce .ketex-cols-tablet-2 ul.products { grid-template-columns: repeat(2, 1fr); }
    .ketex-cols-tablet-3 .woocommerce ul.products,
    .woocommerce .ketex-cols-tablet-3 ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .ketex-cols-mobile-1 .woocommerce ul.products,
    .woocommerce .ketex-cols-mobile-1 ul.products { grid-template-columns: 1fr; }
    .ketex-cols-mobile-2 .woocommerce ul.products,
    .woocommerce .ketex-cols-mobile-2 ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* Produktkarten ausserhalb der Custom-Card (Defensive — falls WC-Defaults
   irgendwo doch greifen, z.B. in einem nicht-uebersteuerten Loop) */
.woocommerce ul.products li.product:not(.ketex-product-card) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
    float: none;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* Bio-Badge-Overlay auf Card (vom [ketex_bio_badge style=mini]-Shortcode) */
.ketex-bio-badge--mini {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    z-index: 2;
    display: inline-block;
    line-height: 0;
}
.ketex-bio-badge--mini svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Bio-Badge Voll auf Single Product */
.ketex-bio-badge--full {
    display: inline-block;
    max-width: 140px;
    margin: 0 0 16px;
    line-height: 0;
}
.ketex-bio-badge--full svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Single-Position des Kategorie-Labels bleibt */
.ketex-product-card__category[data-position="single"] {
    margin: 0 0 8px;
    font-size: 12px;
}

/* Single Product Add-to-Cart Button — WC-Default-Lila ueberschreiben */
.woocommerce div.product .single_add_to_cart_button.button.alt,
body.woocommerce-page .single_add_to_cart_button.button.alt {
    background-color: var(--ketex-primary);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-weight: 500;
    font-size: 15px;
    padding: 14px 28px;
    text-transform: none;
    transition: background 0.2s ease;
}
.woocommerce div.product .single_add_to_cart_button.button.alt:hover,
body.woocommerce-page .single_add_to_cart_button.button.alt:hover {
    background-color: #9E3B26;
    color: #fff;
}

/* ── Pricing-Meta-Block unter Preis (Grundpreis + MwSt) ── */
.ketex-pricing-meta {
    margin: 8px 0 16px;
    font-family: var(--ketex-font-ui);
}
.ketex-pricing-meta > div {
    color: var(--ketex-text-muted);
    line-height: 1.4;
}
.ketex-pricing-meta__unit {
    font-size: 14px;
    margin-bottom: 2px;
}
/* Leeres Austauschziel: Variable Produkte ohne Grundpreis rendern den
   Container trotzdem, damit product-variation-fields.js beim Wechsel auf eine
   Variation MIT Fuellmenge ein Ziel hat. Solange nichts drinsteht, darf er
   nichts einnehmen — kein Abstand, keine Trennlinie. Sobald das JS schreibt,
   greift :empty nicht mehr und die Zeile erscheint. */
.ketex-pricing-meta__unit:empty {
    display: none;
}
.ketex-pricing-meta__tax {
    font-size: 12px;
    margin-bottom: 2px;
}
.ketex-pricing-meta__tax a {
    color: inherit;
    text-decoration: none;
}
.ketex-pricing-meta__tax a:hover {
    color: var(--ketex-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ══════════════════════════════════════════
   SINGLE-PRODUCT-PAGE (Native Template — Bundle A.5)
   ══════════════════════════════════════════ */

.ketex-product-single {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.ketex-product-single__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 260px;
    gap: 40px;
    margin: 32px 0;
}
/* Wenn Sidebar nicht gerendert wird (keine Recommends), Galerie + Summary nutzen den Platz */
.ketex-product-single__grid:not(:has(.ketex-product-single__sidebar)) {
    grid-template-columns: 1fr 1.1fr;
}
/* Title kleiner damit er nicht umbricht */
.ketex-product-single__summary .product_title {
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-product);
    font-weight: var(--ketex-title-weight);
    line-height: 1.15;
    margin-bottom: 12px;
}
/* Preis dunkel statt rot — Lovable */
.ketex-product-single__summary p.price,
.ketex-product-single__summary p.price .woocommerce-Price-amount,
.ketex-product-single__summary .price > .woocommerce-Price-amount {
    color: var(--ketex-dark);
    font-size: 28px;
    font-weight: 600;
}
/* Preis-Abstand zur Grundpreis-/MwSt-Zeile kompakt halten (WC-Default 1em = 32px
   bei 32px-Preis zu luftig). Grundpreis + MwSt gehören eng an den Preis. */
.ketex-product-single__summary p.price { margin-bottom: 10px; }
/* USP-Bullets: orange runder Check-Badge statt Plain-✓ */
.ketex-product-single__summary .woocommerce-product-details__short-description ul,
.ketex-product-single__summary .woocommerce-product-details__short-description ul.ketex-usp-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}
.ketex-product-single__summary .woocommerce-product-details__short-description ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    line-height: 1.5;
    list-style: none;
}
.ketex-product-single__summary .woocommerce-product-details__short-description ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    background-color: var(--ketex-primary);
    color: #fff;
    border-radius: 999px;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    font-weight: 700;
}

/* Sterne-Bereich (Reviews): Lovable-Style "★★★★☆ 4,8 (124 Bewertungen)" */
.ketex-product-single__summary .woocommerce-product-rating {
    margin: 0 0 12px;
}
.ketex-product-single__summary .woocommerce-product-rating .woocommerce-review-link {
    display: none; /* eigener Count-Text in .ketex-rating__count, WC-Link unnoetig */
}
.ketex-rating--filled {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
}
.ketex-rating__stars {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px;
    color: #D9D1C7; /* leere Sterne (Hintergrund) */
    white-space: nowrap;
}
/* NUR im filled-State die ★★★★★-Hintergrund-Schicht per ::before erzeugen.
   Im empty-State traegt der Span bereits eigenen ☆☆☆☆☆-Text — sonst doppelt. */
.ketex-rating--filled .ketex-rating__stars::before {
    content: "★★★★★";
}
.ketex-rating__stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: var(--ketex-primary); /* gefuellte Sterne */
}
.ketex-rating__stars-fill::before {
    content: "★★★★★";
}
.ketex-rating__value {
    font-weight: 600;
    color: var(--ketex-dark);
}
.ketex-rating__count {
    color: var(--ketex-text-muted);
}

/* Sidebar versteckt wenn leer (Recommends-Shortcode liefert nichts) */
.ketex-product-single__sidebar:empty {
    display: none;
}
/* WC-Excerpt kann auch ohne <ul> als Plain-Text mit ✓-prefix kommen — den NICHT doppelt-icon */
.ketex-product-single__summary .woocommerce-product-details__short-description > p {
    margin: 8px 0;
    line-height: 1.5;
}
/* Sterne-empty-State komplett ausblenden (Lovable: Reviews-Zeile fehlt wenn keine Reviews) */
.ketex-product-single__summary .ketex-rating--empty {
    display: none;
}
/* Single-Product-Layout stackt erst unter dem Lovable-Mobile-Breakpoint (767px).
   Tablet (768–1024) bleibt 3-spaltig (Galerie + Info + Sidebar). */
@media (max-width: 767px) {
    .ketex-product-single__grid {
        grid-template-columns: 1fr;
    }
    /* Denselben Selektor wie oben tragen, sonst gewinnt die Zwei-Spalten-Regel:
       :not() plus :has() zaehlt zwei Klassen, die blosse Grid-Klasse eine — und
       eine Media-Query umschliesst eine Regel, sie gewichtet sie nicht. Ohne
       diese Zeile blieb jede Produktseite OHNE Sidebar auf Mobil zweispaltig
       (#143). */
    .ketex-product-single__grid:not(:has(.ketex-product-single__sidebar)) {
        grid-template-columns: 1fr;
    }
    .ketex-product-single__sidebar { display: none; }
}
.ketex-product-single__gallery,
.ketex-product-single__summary,
.ketex-product-single__sidebar { min-width: 0; }

/* ── Galerie (Swiper) ── */
.ketex-gallery { position: relative; }
.ketex-gallery__main {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}
.ketex-gallery__main-img {
    width: 100%;
    height: auto;
    display: block;
}
/* Swiper-Default-Pfeil-Look ueberschreiben (Standard ist blau + Custom-Font 'swiper-icons') */
.ketex-gallery__main .swiper-button-prev,
.ketex-gallery__main .swiper-button-next,
.ketex-gallery__nav-prev,
.ketex-gallery__nav-next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    background-color: rgba(255,255,255,0.92);
    border: 1px solid var(--ketex-border);
    border-radius: 999px;
    color: var(--ketex-dark);
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ketex-gallery__main .swiper-button-prev:hover,
.ketex-gallery__main .swiper-button-next:hover {
    background-color: #fff;
    border-color: var(--ketex-primary);
    color: var(--ketex-primary);
}
/* Swiper rendert eigene Pfeile via ::after mit Font 'swiper-icons' — wir ersetzen */
.ketex-gallery__main .swiper-button-prev::after,
.ketex-gallery__main .swiper-button-next::after,
.ketex-gallery__nav-prev::after,
.ketex-gallery__nav-next::after {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: currentColor;
}
.ketex-gallery__main .swiper-button-prev::after,
.ketex-gallery__nav-prev::after { content: '‹'; font-size: 22px; margin-top: -2px; }
.ketex-gallery__main .swiper-button-next::after,
.ketex-gallery__nav-next::after { content: '›'; font-size: 22px; margin-top: -2px; }
.ketex-gallery__nav-prev { left: 12px; }
.ketex-gallery__nav-next { right: 12px; }

/* Bei nur einem Bild oder Loop=off: deaktivierte Pfeile abblenden */
.ketex-gallery__nav-prev.swiper-button-disabled,
.ketex-gallery__nav-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
/* Bei nur einem Bild gar nicht erst rendern */
.ketex-gallery[data-gallery-total="1"] .ketex-gallery__nav-prev,
.ketex-gallery[data-gallery-total="1"] .ketex-gallery__nav-next,
.ketex-gallery[data-gallery-total="1"] .ketex-gallery__counter {
    display: none;
}

/* Thumbnail-Reihe mit eigenen Vor/Zurueck-Buttons bei >5 Bildern */
.ketex-gallery__thumbs-wrap {
    position: relative;
    padding: 0 32px;
}
.ketex-gallery__thumbs-prev,
.ketex-gallery__thumbs-next {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    color: var(--ketex-text-muted);
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}
.ketex-gallery__thumbs-prev { left: 0; }
.ketex-gallery__thumbs-next { right: 0; }
.ketex-gallery__thumbs-prev::after { content: '‹'; font-size: 20px; }
.ketex-gallery__thumbs-next::after { content: '›'; font-size: 20px; }
.ketex-gallery__thumbs-prev:hover,
.ketex-gallery__thumbs-next:hover { color: var(--ketex-primary); }
.ketex-gallery__thumbs-prev.swiper-button-disabled,
.ketex-gallery__thumbs-next.swiper-button-disabled { opacity: 0.3; cursor: default; }
.ketex-gallery__counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(42,38,34,0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-family: var(--ketex-font-ui);
    z-index: 10;
    pointer-events: none;
}
.ketex-gallery__thumbs .swiper-slide {
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.ketex-gallery__thumbs .swiper-slide-thumb-active,
.ketex-gallery__thumbs .swiper-slide:hover {
    opacity: 1;
}
.ketex-gallery__thumbs .swiper-slide-thumb-active {
    border-color: var(--ketex-primary);
}
.ketex-gallery__thumb-img { width: 100%; height: auto; display: block; }

/* ── Sterne-empty-State ── */
.ketex-rating--empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
}
.ketex-rating__stars {
    color: #D6CFC7;
    letter-spacing: 2px;
}
.ketex-rating__label {
    color: var(--ketex-text-muted);
}

/* ── Bio-Badge Single-Style (eigene Zeile, klein, inline) ── */
.ketex-bio-badge--single {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 16px 0;
    background-color: #F0F7EC;
    border: 1px solid #C9E0BC;
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: #3D6B26;
}
.ketex-bio-badge--single .ketex-bio-badge__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
}
.ketex-bio-badge--single .ketex-bio-badge__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Variations: Pills + Swatches ── */
.ketex-variations { margin: 12px 0; }
/* Sweep2 KEEP: Visually-Hidden-Pattern (nativer Variations-Select); Entfernen riskiert sichtbaren Roh-Select, 0 variable Produkte lokal — konservativ behalten */
.ketex-variations__hidden-select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.ketex-variations__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ketex-variations__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 8px 16px;
    background-color: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    color: var(--ketex-dark);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ketex-variations__option:hover {
    border-color: var(--ketex-primary);
}
.ketex-variations__option.is-selected {
    background-color: var(--ketex-primary);
    border-color: var(--ketex-primary);
    color: #fff;
}
.ketex-variations__options--color .ketex-variations__option,
.ketex-variations__options--image .ketex-variations__option {
    padding: 4px;
    min-width: 0;
}
.ketex-variations__swatch-color {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--ketex-border);
}
.ketex-variations__swatch-image {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

/* ── Status-Row ── */
.ketex-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 16px 0;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
}
.ketex-status-row__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ketex-text-muted);
}
.ketex-status-row__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ketex-status-row__stock--in {
    color: #3D8B5F;
    font-weight: 600;
}
.ketex-status-row__stock--out {
    color: #B8452E;
    font-weight: 600;
}
.ketex-status-row__stock--backorder {
    color: #C77B30;
    font-weight: 600;
}

/* ── Schnellzahlung ── */
.ketex-quickpay {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    background-color: #FAF8F5;
}
.ketex-quickpay__heading {
    margin: 0 0 12px;
    font-family: var(--ketex-font-ui);
    font-size: var(--ketex-label);
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--ketex-kicker-color);
    text-transform: uppercase;
}
.ketex-quickpay__buttons:empty,
.ketex-quickpay__klarna:empty,
.ketex-quickpay__express:empty { display: none; }
.ketex-quickpay__klarna,
.ketex-quickpay__express { margin-bottom: 12px; }
.ketex-quickpay__trust {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ketex-text-muted);
    font-family: var(--ketex-font-ui);
}
.ketex-quickpay__lock { margin-right: 4px; }

/* ── Trust-Row ── */
.ketex-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
    margin: 16px 0 0;
    border-top: 1px solid var(--ketex-border);
    font-family: var(--ketex-font-ui);
    font-size: 13px;
    color: var(--ketex-text-muted);
}
.ketex-trust-row__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ketex-trust-row__icon { flex-shrink: 0; }

/* ── Wishlist: Heart-Icon-Button neben ATC (CSS-Override für ti-woocommerce-wishlist) ── */
form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
form.cart .tinv-wraper.tinv-wishlist,
.product .tinvwl-after-add-to-cart {
    order: 99;
    margin: 0;
    flex: 0 0 auto;
}
form.cart .tinv-wraper .tinvwl-tooltip,
/* Sweep2 KEEP: Wishlist-Text im ATC-Formular; rendert lokal nicht — konservativ behalten */
form.cart .tinvwl-txt {
    display: none !important;
}
form.cart .tinvwl_add_to_wishlist_button,
.tinvwl_add_to_wishlist_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 999px;
    color: var(--ketex-text-muted);
    transition: all 0.15s ease;
}
.tinvwl_add_to_wishlist_button:hover {
    background-color: rgba(184, 69, 46, 0.05);
    border-color: var(--ketex-primary);
    color: var(--ketex-primary);
}
.tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.tinvwl_add_to_wishlist_button.in-wishlist {
    background-color: var(--ketex-primary);
    border-color: var(--ketex-primary);
    color: #fff;
}
.tinvwl_add_to_wishlist_button .tinvwl-icon-frame {
    margin: 0;
}
.tinvwl_add_to_wishlist_button .ftinvwl-heart-o::before,
.tinvwl_add_to_wishlist_button .ftinvwl-heart::before {
    font-size: 20px;
}
/* Heart-Icon kommt als ::before mit font-family 'tinvwl-webfont'.
   Plugin setzt vertical-align: sub — das verschiebt das Glyph in
   einem flex-Kreis-Button nach unten. Erzwingen: middle + line-height 1. */
.tinvwl_add_to_wishlist_button::before,
form.cart .tinvwl_add_to_wishlist_button::before {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}
/* Cart-Form-Alignment robust: identische Höhe für Qty / Button / Wishlist,
   damit die drei in einer Linie sitzen. */
form.cart .quantity,
form.cart .quantity input.qty,
form.cart .single_add_to_cart_button,
form.cart .tinv-wraper.tinv-wishlist > a {
    min-height: 48px;
}

/* USP-Bullets auf Single Product mit rotem Checkmark */
.woocommerce-product-details__short-description ul {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.woocommerce-product-details__short-description ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
}
.woocommerce-product-details__short-description ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23B8452E'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3Cpath d='M6 10l3 3 5-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

/* Vorraetig-Status rot mit Checkmark */
.product .stock.in-stock {
    color: var(--ketex-primary);
    font-weight: 600;
    position: relative;
    padding-left: 22px;
}
.product .stock.in-stock::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ketex-primary);
    font-weight: bold;
}

/* Tabs: flach mit durchgehender Trennlinie unten, kein Container/Border um die Tabs */
.woocommerce-tabs .wc-tabs {
    border: 0;
    border-bottom: 1px solid var(--ketex-border);
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.woocommerce-tabs .wc-tabs li {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 32px 0 0;
    display: inline-block;
}
.woocommerce-tabs .wc-tabs li::before,
.woocommerce-tabs .wc-tabs li::after {
    display: none;
    content: none;
}
.woocommerce-tabs .wc-tabs li a {
    background: transparent;
    color: var(--ketex-dark);
    border: 0;
    padding: 12px 0;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}
.woocommerce-tabs .wc-tabs li.active a {
    color: var(--ketex-primary);
    border-bottom-color: var(--ketex-primary);
}
.woocommerce-tabs .wc-tabs li:hover a {
    color: var(--ketex-primary);
}

/* Anwendungstipps: nummerierte Liste mit primary-orange Kreis-Marker */
.ketex-usage-tips ol {
    list-style: none;
    counter-reset: ketex-tip;
    padding: 0;
    margin: 16px 0;
}
.ketex-usage-tips ol > li {
    counter-increment: ketex-tip;
    position: relative;
    padding-left: 36px;
    margin-bottom: 12px;
    font-family: var(--ketex-font-ui);
    line-height: 1.6;
}
.ketex-usage-tips ol > li::before {
    content: counter(ketex-tip);
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: var(--ketex-primary);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--ketex-font-ui);
}

/* Upsell-Cards (Single Product "Das koennte dich auch interessieren"): schlanker Stil — kein Preis, keine Sterne, Text-Link statt Button */
.upsells.products li.product .star-rating,
/* Sweep2 KEEP: Teil der WC-Upsells-Sektion (s.o.) — konservativ behalten */
.upsells.products li.product .price {
    display: none !important;
}
.upsells.products li.product .button.details-link--text {
    background: transparent;
    color: var(--ketex-primary);
    padding: 0;
    margin: 4px 0 0;
    width: auto;
    text-align: left;
    font-weight: 600;
    border-radius: 0;
    display: inline-block;
}
.upsells.products li.product .button.details-link--text:hover {
    color: #9E3B26;
    background: transparent;
}

/* Paginierung: minimalistisch (Zahlen ohne Box, aktiv = primary-orange unterstrichen) */
.woocommerce nav.woocommerce-pagination {
    margin: 48px 0 0;
    text-align: center;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
    border: 0;
    display: inline-flex;
    /* Ohne Umbruch reiht sich jede Seitenzahl in eine Zeile — auf Telefonbreite lief die
       Liste damit aus dem Viewport (wie .ketex-page__pagination .nav-links es bereits loest). */
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: 0;
    overflow: visible;
    background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers {
    background: transparent;
    border: 0;
    color: var(--ketex-text-muted, #6B6B6B);
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    min-width: 28px;
    padding: 8px 4px;
    line-height: 1;
    border-radius: 0;
    transition: color 0.2s ease;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current,
/* Sweep2 KEEP (lasttragend, verifiziert): Terrakotta-Hover-Unterstrich; ungeflaggt gewinnt WC-Border (Grau) */
.woocommerce nav.woocommerce-pagination ul li .page-numbers:hover {
    color: var(--ketex-primary) !important;
    border-bottom: 2px solid var(--ketex-primary) !important;
    background: transparent !important;
}

/* Cross-Promo Cards (Archive) */
.ketex-shop-promo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.ketex-shop-promo__card {
    display: block;
}
.ketex-shop-promo__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
}
.ketex-promo-tag {
    display: block;
    background: transparent;
    color: var(--ketex-primary);
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-family: var(--ketex-font-ui);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 12px 0 4px;
}
.ketex-shop-promo__title {
    font-family: var(--ketex-font-title);
    margin: 4px 0;
    font-size: var(--ketex-title-card);
    color: var(--ketex-dark);
}
.ketex-shop-promo__excerpt {
    color: var(--ketex-text-muted);
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.ketex-shop-promo__link {
    color: var(--ketex-primary);
    font-weight: 600;
    text-decoration: none;
}
@media (max-width: 768px) {
    .ketex-shop-promo {
        grid-template-columns: 1fr;
    }
}

/* KETEX-EMPFIEHLT-Sidebar */
.ketex-recommends {
    background: var(--ketex-bg);
    border-radius: 12px;
    padding: 20px;
}
.ketex-recommends__heading {
    font-family: var(--ketex-font-ui);
    font-size: var(--ketex-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ketex-primary);
    margin: 0 0 16px;
}
.ketex-recommends__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    margin-bottom: 16px;
    color: inherit;
}
.ketex-recommends__thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.ketex-recommends__caption {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ketex-kicker-color);
    margin-bottom: 4px;
}
.ketex-recommends__title {
    display: block;
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-card);
    color: var(--ketex-dark);
}
.ketex-recommends__cta {
    display: inline-block;
    margin-top: 8px;
    color: var(--ketex-primary);
    font-weight: 600;
    text-decoration: none;
}

/* "Das kannst du damit backen" Cards */
.ketex-recipes-for-product {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}
.ketex-recipes-for-product__card {
    text-decoration: none;
    color: inherit;
}
.ketex-recipes-for-product__image {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 12px;
}
.ketex-recipes-for-product__title {
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-card);
    margin: 8px 0 0;
    color: var(--ketex-dark);
}
.ketex-recipes-for-product__cta {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ketex-primary);
    font-weight: 600;
    text-decoration: none;
    margin-top: 24px;
}

/* Shop-Filter-Dropdown */
.ketex-shop-filter {
    appearance: none;
    background: transparent;
    border: 0;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    color: var(--ketex-dark);
    padding: 4px 24px 4px 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23333'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 12px 8px;
    width: auto;
    min-width: 80px;
}
.ketex-shop-filter:focus {
    outline: 2px solid var(--ketex-primary);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════
   BUNDLE A.5 FOLLOW-UP FIXES
   ══════════════════════════════════════════ */

/* ── Breadcrumbs auf Single-Produktseite mit Content-Body-Container ──
   ⚠️ Die beiden `.site-main > …`-Varianten sehen wie Dubletten aus, sind aber
   die tragenden Selektoren: WooCommerce setzt selbst
   `.woocommerce .woocommerce-breadcrumb { margin:0 0 1em; padding:0 }`
   (Spezifität 0,2,0) und schlüge `nav.woocommerce-breadcrumb` (0,1,1). Erst
   `.site-main > nav.woocommerce-breadcrumb` (0,2,1) gewinnt.
   `.site-main` kommt NICHT aus Hello Elementor, sondern aus WooCommerces
   `global/wrapper-start.php` — es überlebt die Parent-Ablösung. In Slice 3
   waren die beiden Zeilen kurzzeitig entfernt; im Pixel-Diff sprang der
   Breadcrumb auf Shop, Produkt und Angebote nach links an den Rand. */
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb,
.site-main > .woocommerce-breadcrumb,
.site-main > nav.woocommerce-breadcrumb {
    max-width: 1320px;
    margin: 16px auto 0;
    padding: 0 24px;
}

/* ── Quantity-Input neben ATC: gestylt + sauberer Abstand ── */
form.cart .quantity input.qty {
    width: 64px;
    height: 48px;
    padding: 0 8px;
    background-color: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 16px;
    color: var(--ketex-dark);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
form.cart .quantity input.qty::-webkit-outer-spin-button,
form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
form.cart .quantity input.qty:focus {
    outline: none;
    border-color: var(--ketex-primary);
}
form.cart .quantity {
    margin-right: 4px;
}
form.cart .single_add_to_cart_button {
    min-height: 48px;
    padding-left: 24px;
    padding-right: 24px;
}

/* ── Wunschbetrag-Feld auf der Gutschein-Produktseite (#117) ──
   Steht zwischen Variantenauswahl und Warenkorb-Button. Sichtbar
   ausgeliefert und von voucher-amount-field.js versteckt, solange keine
   Wunschbetrag-Variante gewaehlt ist — diese Richtung, damit das Feld ohne
   JavaScript benutzbar bleibt. Masse und Fokusfarbe folgen dem
   Quantity-Input darueber, damit beide Eingaben im Formular gleich wirken. */
.ketex-voucher-amount {
    margin: 0 0 16px;
    font-family: var(--ketex-font-ui);
}
.ketex-voucher-amount--hidden {
    display: none;
}
.ketex-voucher-amount__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ketex-dark);
    margin-bottom: 6px;
}
.ketex-voucher-amount__input {
    width: 100%;
    max-width: 200px;
    height: 48px;
    padding: 0 12px;
    background-color: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 16px;
    color: var(--ketex-dark);
    appearance: textfield;
    -moz-appearance: textfield;
}
.ketex-voucher-amount__input::-webkit-outer-spin-button,
.ketex-voucher-amount__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ketex-voucher-amount__input:focus {
    outline: none;
    border-color: var(--ketex-primary);
}
.ketex-voucher-amount__hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ketex-text-muted);
}

/* ── Empfaengerdaten auf der Gutschein-Produktseite (#124) ──
   Steht unter dem Wunschbetrag, vor dem Warenkorb-Button. Alle vier Felder
   sind optional; ein leeres Formular heisst Selbstkauf, und genau das sagt
   der Hinweis unter der Ueberschrift. Masse und Fokusfarbe folgen dem
   Betragsfeld darueber, damit beide Eingaben im Formular gleich wirken.

   Das fieldset traegt die Browser-Vorgaben (Rahmen, Innenabstand, eigene
   Legenden-Ausrichtung) — sie werden hier abgeraeumt, sonst steht ein
   grauer Kasten mitten im Produktformular. */
.ketex-voucher-recipient {
    /* `form.cart` ist flex mit wrap und align-items:center. Ohne eine volle
       Flex-Basis bleibt das Fieldset ein 344 px breites Item, und Mengenfeld
       plus Warenkorb-Button ruecken daneben — auf halbe Hoehe des
       Nachrichtenfelds, mitten ins Formular. Gemessen 2026-09-03 bei 1920 px. */
    flex: 1 0 100%;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    font-family: var(--ketex-font-ui);
}
.ketex-voucher-recipient__legend {
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ketex-dark);
}
.ketex-voucher-recipient__hint {
    margin: 4px 0 12px;
    font-size: 12px;
    color: var(--ketex-text-muted);
}
.ketex-voucher-recipient__field {
    margin: 0 0 12px;
}
.ketex-voucher-recipient__label {
    display: block;
    font-size: 13px;
    color: var(--ketex-dark);
    margin-bottom: 6px;
}
.ketex-voucher-recipient__input,
.ketex-voucher-recipient__textarea {
    width: 100%;
    /* Das Theme rechnet in content-box. Ohne diese Zeile addiert sich das
       Innenpolster auf die 100 % — gemessen 2026-09-03 bei 390 px: 184 px
       Feld in einer 158 px breiten Spalte, rechts abgeschnitten. Der
       Overflow-Test sieht das NICHT, weil ein overflow:hidden darueber liegt. */
    box-sizing: border-box;
    padding: 0 12px;
    background-color: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 16px;
    color: var(--ketex-dark);
}
.ketex-voucher-recipient__input {
    height: 48px;
}
.ketex-voucher-recipient__textarea {
    /* Kein height: der Inhalt bestimmt die Hoehe ueber rows, und das Feld
       bleibt vom Nutzer vergroesserbar. */
    padding: 12px;
    line-height: 1.5;
    resize: vertical;
}
.ketex-voucher-recipient__input--date {
    /* Der Datumsdialog braucht die volle Breite nicht, und ein 100 % breites
       Datumsfeld sieht neben seinem Inhalt leer aus. */
    max-width: 200px;
}
.ketex-voucher-recipient__input:focus,
.ketex-voucher-recipient__textarea:focus {
    outline: none;
    border-color: var(--ketex-primary);
}

/* ── Variations-Dropdown (Fallback wenn Attribut-Type = 'select') ── */
.woocommerce-product-details__short-description + .product-information,
table.variations {
    width: 100%;
    margin: 0;
    border: 0;
}
table.variations,
table.variations tbody,
table.variations tr,
table.variations td,
table.variations th {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
}
table.variations tr { margin-bottom: 12px; }
table.variations label {
    display: block;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--ketex-dark);
    margin-bottom: 6px;
}
table.variations td.value {
    position: relative;
}
table.variations select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 10px 36px 10px 14px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    color: var(--ketex-dark);
    cursor: pointer;
}
table.variations select:focus {
    outline: none;
    border-color: var(--ketex-primary);
}
table.variations .reset_variations {
    display: inline-block;
    font-size: 12px;
    color: var(--ketex-text-muted);
    margin-top: 6px;
}

/* ── ATC-Button: disabled-State sauberer (statt rosa opacity 0.5) ── */
.woocommerce div.product .single_add_to_cart_button.disabled,
.woocommerce div.product .single_add_to_cart_button.wc-variation-selection-needed,
/* Sweep2 KEEP: Out-of-Stock-Button-Stil; Stock-State lokal nicht zuverlässig fixturebar — konservativ behalten */
body.woocommerce-page .single_add_to_cart_button.disabled.button.alt {
    opacity: 1;
    background-color: var(--ketex-border) !important;
    color: var(--ketex-text-muted) !important;
    cursor: not-allowed;
    /* WC setzt .disabled per JS; die geerbte background-Transition (0.2s) bliebe
       sonst am terrakotta-Startwert haengen → disabled-Beige nie sichtbar. */
    transition: none !important;
}
.woocommerce div.product .single_add_to_cart_button.disabled:hover,
.woocommerce div.product .single_add_to_cart_button.wc-variation-selection-needed:hover,
body.woocommerce-page .single_add_to_cart_button.disabled.button.alt:hover {
    background-color: var(--ketex-border) !important;
    color: var(--ketex-text-muted) !important;
}

/* ── Wishlist: Heart-Icon-Button statt Default-Text-Link ── */
/* Text-Label des Plugins komplett ausblenden */
.tinvwl_add_to_wishlist-text,
.tinvwl-after-add-to-cart .tinvwl-tooltip,
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist-text {
    display: none;
}

/* Button als Heart-Icon-Button stylen */
.tinvwl_add_to_wishlist_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 999px;
    color: var(--ketex-text-muted);
    transition: all 0.15s ease;
    font-size: 0;
    text-decoration: none;
}

/* Heart-Icon via Pseudo-Element (Plugin nutzt selber ein Icon-Font, das war aber via Text platziert) */
.tinvwl_add_to_wishlist_button::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") no-repeat center / contain;
}

.tinvwl_add_to_wishlist_button:hover {
    background-color: rgba(184, 69, 46, 0.05);
    border-color: var(--ketex-primary);
    color: var(--ketex-primary);
}

/* Filled-State wenn Produkt in Wishlist */
.tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.tinvwl_add_to_wishlist_button.in-wishlist {
    background-color: var(--ketex-primary);
    border-color: var(--ketex-primary);
    color: #fff;
}
.tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before,
.tinvwl_add_to_wishlist_button.in-wishlist::before {
    background-color: #fff;
    /* Solid-Heart (gefuelltes Herz) */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") no-repeat center / contain;
}

/* ── "Das kannst du damit backen" Section-Wrapper (Bundle A.5) ── */
.ketex-product-section {
    max-width: 1320px;
    margin: 48px auto;
    padding: 0 24px;
}
.ketex-product-section__heading {
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-section);
    margin: 0 0 24px;
    color: var(--ketex-dark);
}

/* ── Related Products (Aehnliche Produkte) — Lovable-Look ── */
.related.products,
.upsells.products {
    max-width: 1320px;
    margin: 48px auto;
    padding: 0 24px;
}
.related.products > h2,
.upsells.products > h2 {
    font-family: var(--ketex-font-title);
    font-size: 28px;
    font-weight: var(--ketex-title-weight);
    margin: 0 0 24px;
    color: var(--ketex-dark);
}
.related.products ul.products,
/* Sweep2 KEEP: WC-Upsells-Sektion; dieses Theme rendert keine WC-Upsells (nutzt Content-Cross-Sells) — lokal nicht als redundant verifizierbar, konservativ behalten */
.upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 960px) {
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: 1fr;
    }
}
.related.products ul.products li.product,
.upsells.products ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}
/* Hello Elementor / WC injizieren ein ::before "clearfix" das im Grid einen Slot belegt → Offset in Spalte 1 */
.related.products ul.products::before,
.related.products ul.products::after,
.upsells.products ul.products::before,
.upsells.products ul.products::after {
    content: none !important;
    display: none !important;
}

/* ── BUNDLE B PHASE 1: Shop-Archive Native ──────────────────────── */

/* WC-Default-Clearfix auf ul.products::before/::after wird im CSS-Grid zu
   einem unsichtbaren Grid-Item und besetzt die erste Cell — Cards springen
   um eine Spalte nach rechts. Global ausschalten (war nur fuer related/
   upsells gesetzt, nicht fuer den Haupt-Shop-Loop). */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

/* Outer-Wrapper: max-width + horizontales Padding.
   Astras site-content-layout='page-builder' macht .ast-container 100% breit
   (Phase-3a-Erbe fuer Elementor-Archive) — daher hier eigener Container. */
.ketex-shop-archive-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (max-width: 600px) {
    .ketex-shop-archive-wrap { padding: 0 16px; }
}

/* Hero */
.ketex-shop-archive__hero {
    padding: 48px 0 24px;
    text-align: center;
}
.ketex-shop-archive__hero-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}
.ketex-shop-archive__kicker {
    display: inline-block;
    font-family: var(--ketex-font-ui);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ketex-primary);
    margin-bottom: 12px;
}
.ketex-shop-archive__title {
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-page);
    font-weight: var(--ketex-title-weight);
    color: var(--ketex-dark);
    line-height: 1.2;
    margin: 0 0 12px;
}
.ketex-shop-archive__subtitle {
    font-family: var(--ketex-font-ui);
    font-size: 16px;
    color: var(--ketex-text-muted);
    line-height: 1.6;
}
.ketex-shop-archive__subtitle p { margin: 0; }


/* Custom-Card (eigenes Markup — keine WC-Klassen-Overrides noetig) */
.woocommerce ul.products li.product.ketex-product-card {
    background: #FFFFFF;
    border: 1px solid var(--ketex-border);
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
    /* WC-Core gibt li.product fuer columns-3 ein width:30.75% + float:left
       — das macht Grid-Items nur 1/3 der Cell breit. Zuruecksetzen. */
    width: 100% !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product.ketex-product-card:hover {
    box-shadow: 0 8px 24px rgba(42, 38, 34, 0.1);
    transform: translateY(-2px);
}

/* Card-Inhalt ist in zwei separate Klick-Links aufgeteilt (Image-Link +
   Body-Link), damit Overlay-Links (Sale-Badge, Wishlist) NICHT zu
   nested <a>-in-<a> werden — was Browser auf chaotische Weise reparieren
   wuerden. */
.ketex-product-card__image-link,
.ketex-product-card__body-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.ketex-product-card__body-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.ketex-product-card__image-link:hover,
.ketex-product-card__body-link:hover { color: inherit; }

.ketex-product-card__media {
    position: relative;
    line-height: 0;
}
.ketex-product-card__media .ketex-product-card__image,
.ketex-product-card__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.ketex-product-card__onsale {
    /* Unten-links auf dem Bild platziert — vermeidet Konflikt mit Wishlist-
       Overlay (oben rechts) und Bio-Badge (oben links).
       Komplett mit !important weil WC-Core .woocommerce ul.products
       li.product .onsale (Specificity 0,3,1) sonst Position UND Erscheinungs-
       bild (rund, gruen, min-width 3.236em, line-height 3.236em) erzwingt. */
    position: absolute !important;
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--ketex-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    /* Groesser fuer klickbare Touch-Target + bessere Lesbarkeit (Lovable). */
    padding: 8px 14px !important;
    font-family: var(--ketex-font-ui) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    z-index: 2;
    cursor: pointer;
}
a.ketex-product-card__onsale:hover {
    background: #9E3B26;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.ketex-product-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Geteilte Pill (SSoT) für anklickbare Kategorie-/Typ-/Thema-Links über alle Card-Typen.
   Optik = Variante B (Lovable-gemessen). Position/z-index liefern die card-spezifischen Klassen. */
.ketex-pill {
    display: inline-block;
    background: #FCFAF8;
    color: #2A2622;
    border: 1px solid #E0D8CC;
    border-radius: 9999px;
    padding: 3px 10px;
    font-family: var(--ketex-font-ui);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.ketex-pill:hover { background: #F2EBE1; border-color: #D8CEBE; }

.ketex-product-card__category {
    align-self: flex-start;
    margin: 0 0 8px;
}
.ketex-product-card__body .ketex-rating {
    margin: 0 0 8px;
}
.ketex-product-card__title {
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-card-sm);
    font-weight: 400;
    color: var(--ketex-dark);
    line-height: 1.4;
    margin: 0 0 8px;
}
.ketex-product-card__price {
    font-family: var(--ketex-font-ui);
    font-size: 16px;
    font-weight: 600;
    color: var(--ketex-primary);
    margin: 0;
    line-height: 1.3;
}
.ketex-product-card__price .price,
.ketex-product-card__price ins,
.ketex-product-card__price del {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    background: transparent;
}
.ketex-product-card__price ins {
    text-decoration: none;
}
.ketex-product-card__price del {
    color: var(--ketex-text-muted);
    font-weight: 400;
    margin-left: 8px;
    /* Browser-Default fuer <del> ist line-through — explizit setzen
       weil "text-decoration: inherit" im vorigen Reset das geloescht
       hat. */
    text-decoration: line-through;
}
.ketex-product-card__unit {
    font-family: var(--ketex-font-ui);
    font-size: 12px;
    color: var(--ketex-text-muted);
    margin: 2px 0 0;
}
.ketex-product-card__unit .ketex-pricing-meta__unit {
    font-size: inherit;
    margin: 0;
}

.ketex-product-card__button.button.details-link {
    display: block;
    /* Lovable: Inset zum Card-Rand statt edge-to-edge.
       margin-top:auto pusht den Button bei flex-column-Card nach unten;
       seitlich + unten 16px Abstand zum Card-Border. */
    margin: auto 16px 16px;
    padding: 14px 16px;
    background: var(--ketex-primary);
    color: #fff;
    border: 0;
    border-radius: 8px;
    text-align: center;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.2s ease;
}
.ketex-product-card__button.button.details-link:hover {
    background: #9E3B26;
    color: #fff;
}

/* ── Wishlist-Button als Overlay oben rechts auf dem Bild (Lovable archive-03) ──
   Plugin ti-woocommerce-wishlist haengt einen .tinv-wraper.tinvwl-loop-button-
   wrapper an woocommerce_after_shop_loop_item. Default-Rendering ist eine eigene
   Reihe unter dem Card-Body — wir positionieren ihn absolut auf dem Bild. */
.ketex-product-card .tinvwl-loop-button-wrapper {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}
.ketex-product-card a.tinvwl_add_to_wishlist_button {
    width: 36px;
    height: 36px;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ketex-dark);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ketex-product-card a.tinvwl_add_to_wishlist_button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
    color: var(--ketex-primary);
}
/* Heart-Icon (Plugin nutzt ::before mit tinvwl-webfont + margin-right:5px
   fuer abgesetzte Text-Labels; im Icon-only-Kreis muessen wir den Margin
   resetten und vertikal sauber zentrieren). */
.ketex-product-card a.tinvwl_add_to_wishlist_button::before {
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    font-size: 18px !important;
    width: auto !important;
    height: auto !important;
}
/* Versteckter Text-Label-Span (a11y) darf das Flex-Layout nicht aufblasen. */
.ketex-product-card a.tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text {
    display: none;
}

/* Empty-Rating in Card: outline-Sterne + Label */
.ketex-product-card__body .ketex-rating--empty .ketex-rating__label {
    font-size: 12px;
}

/* Cross-Promo Wrapper — visuelle Trennung zum Produkt-Grid darueber
   (border-top + grosszuegiger Abstand). */
.ketex-shop-archive__cross-promo {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--ketex-border);
}
.ketex-shop-archive__cross-promo-header {
    text-align: center;
    margin: 0 0 32px;
}
.ketex-shop-archive__cross-promo-title {
    font-family: var(--ketex-font-title);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: var(--ketex-title-weight);
    color: var(--ketex-dark);
    line-height: 1.2;
    margin: 0;
}

/* Mobile-Tweaks */
@media (max-width: 600px) {
    .ketex-shop-archive__hero { padding: 32px 0 16px; }
}

/* ── BUNDLE B PHASE 2: FacetWP Filter-Bar + Drawer ──────────────── */

/* === Filter-Bar (oben ueber dem Grid) === */
.ketex-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0;
    border-bottom: 1px solid var(--ketex-border);
    margin: 0 0 32px;
}

.ketex-filter-bar__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 999px;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--ketex-dark);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.ketex-filter-bar__trigger:hover {
    border-color: var(--ketex-primary);
    background: #FAF8F5;
}
.ketex-filter-bar__icon { color: currentColor; }

.ketex-filter-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
    height: 20px;
    background: var(--ketex-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
/* hidden-Attribut hat Default-Specificity 0,1,0 — gleicher Wert wie unsere Klasse.
   Mit Browser-Default User-Agent CSS verliert es manchmal. Explizit unsichtbar. */
.ketex-filter-bar__count[hidden] {
    display: none;
}

.ketex-filter-bar__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.ketex-filter-bar__sort {
    margin-left: auto;
}
.ketex-filter-bar__sort .woocommerce-ordering select {
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    padding: 8px 32px 8px 14px;
    border: 1px solid var(--ketex-border);
    border-radius: 999px;
    background: #fff;
    color: var(--ketex-dark);
    cursor: pointer;
}
.ketex-filter-bar__search { margin-left: auto; min-width: 220px; }
.ketex-filter-bar__search .facetwp-search-wrap,
.ketex-filter-bar__search input[type="text"] { width: 100%; }
.ketex-filter-bar__dropdowns { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ketex-filter-bar__dropdowns .facetwp-facet { margin: 0; }
.ketex-filter-bar__dropdowns select,
.ketex-filter-bar__dropdowns .facetwp-dropdown { min-width: 180px; }

/* FacetWP-Selections-Pills im .pills-Wrapper */
.ketex-filter-bar__pills .facetwp-selections ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ketex-filter-bar__pills .facetwp-selections li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    background: var(--ketex-bg, #FAF8F5);
    border: 1px solid var(--ketex-border);
    border-radius: 999px;
    font-family: var(--ketex-font-ui);
    font-size: 13px;
    color: var(--ketex-dark);
    cursor: pointer;
}
.ketex-filter-bar__pills .facetwp-selections li:hover {
    background: var(--ketex-border);
}

/* === Drawer (off-canvas slide-in von rechts) === */
.ketex-filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.25s;
}
.ketex-filter-drawer[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s;
}
/* WP-Admin-Bar Offset für Filter-Drawer */
body.admin-bar .ketex-filter-drawer { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ketex-filter-drawer { top: 46px; }
}

.ketex-filter-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(42, 38, 34, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.ketex-filter-drawer[aria-hidden="false"] .ketex-filter-drawer__overlay {
    opacity: 1;
}

.ketex-filter-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.ketex-filter-drawer[aria-hidden="false"] .ketex-filter-drawer__panel {
    transform: translateX(0);
}

.ketex-filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ketex-border);
}
.ketex-filter-drawer__header h2 {
    font-family: var(--ketex-font-title);
    font-size: 20px;
    font-weight: var(--ketex-title-weight);
    margin: 0;
    color: var(--ketex-dark);
}
.ketex-filter-drawer__close {
    background: transparent;
    border: 0;
    font-size: 28px;
    color: var(--ketex-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.ketex-filter-drawer__close:hover { color: var(--ketex-dark); }

.ketex-filter-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 24px;
}

.ketex-filter-group {
    padding: 16px 0;
    border-bottom: 1px solid var(--ketex-border);
}
.ketex-filter-group:last-child { border-bottom: 0; }
.ketex-filter-group__title {
    font-family: var(--ketex-font-ui);
    font-size: var(--ketex-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ketex-kicker-color);
    margin: 0 0 12px;
}

/* Auto-Hide leerer Facets — vom shop-facetwp.php-Render-Hook
   bekommt jeder leere Facet die Klasse .is-empty. */
.ketex-filter-group:has(.is-empty) { display: none; }

/* Drawer-Footer: subtile Hintergrundfarbe + grosszuegiges Padding fuer
   klare Trennung vom scrollenden Body. */
.ketex-filter-drawer__footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid var(--ketex-border);
    background: #FAF8F5;
}

/* Reset-Link: kein Underline-by-default, Hover wirft Underline an.
   Wirkt als sekundaere Aktion neben dem Apply-Primary. */
.ketex-filter-drawer__reset {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--ketex-text-muted);
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    font-weight: 500;
    padding: 14px 4px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ketex-filter-drawer__reset:hover {
    color: var(--ketex-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Apply-Button: Primary-Pill ohne .button-Klasse im Markup (vorher gab
   WC-Default-CSS .button { background:#ebe9eb; color:#515151 } den
   Button hell-lila). */
.ketex-filter-drawer__apply {
    flex: 1 1 auto;
    padding: 14px 20px;
    background: var(--ketex-primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--ketex-font-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(184, 69, 46, 0.18);
    -webkit-appearance: none;
    appearance: none;
}
.ketex-filter-drawer__apply:hover {
    background: #9E3B26;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(184, 69, 46, 0.25);
}
.ketex-filter-drawer__apply:active {
    transform: translateY(0);
}
.ketex-filter-drawer__apply [data-facetwp-total] {
    margin-right: 4px;
    font-weight: 700;
}

/* === FacetWP-Checkbox-Override (Lovable-Look) === */
.ketex-filter-group .facetwp-facet { margin: 0; }
.ketex-filter-group .facetwp-checkbox,
.ketex-filter-group .facetwp-checkbox.checked,
/* Sweep2 KEEP: deaktivierte Facetten-Option; lokal nicht triggerbar — konservativ behalten */
.ketex-filter-group .facetwp-checkbox.disabled {
    /* FacetWP-Default-Sprite (checkbox-on.png + checkbox-off.png) komplett
       deaktivieren — die wuerden sonst als graue Balken durchs Label laufen.
       !important weil FacetWP-Plugin-CSS spaeter geladen wird und gleiche
       Specificity (0,2,0) hat. */
    background-image: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat;
}
.ketex-filter-group .facetwp-checkbox {
    display: flex;
    align-items: center;
    padding: 6px 0 6px 28px;
    cursor: pointer;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    color: var(--ketex-dark);
    position: relative;
}
.ketex-filter-group .facetwp-checkbox::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid var(--ketex-border);
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}
.ketex-filter-group .facetwp-checkbox.checked::before {
    border-color: var(--ketex-primary);
    background: var(--ketex-primary);
}
.ketex-filter-group .facetwp-checkbox.checked::after {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.ketex-filter-group .facetwp-counter {
    color: var(--ketex-text-muted);
    font-size: 12px;
    margin-left: 4px;
}

/* === FacetWP-Slider-Override (noUiSlider, NICHT jQuery-UI) === */
/* FacetWP rendert .facetwp-slider mit noUiSlider-Klassen:
   .noUi-target > .noUi-base > .noUi-connects > .noUi-connect
                            > .noUi-origin > .noUi-handle > .noUi-touch-area */
.ketex-filter-group .facetwp-slider.noUi-target {
    margin: 16px 10px 8px;
    height: 4px;
    background: var(--ketex-border);
    border: 0;
    box-shadow: none;
}
.ketex-filter-group .facetwp-slider .noUi-connects {
    border-radius: 999px;
}
.ketex-filter-group .facetwp-slider .noUi-connect {
    background: var(--ketex-primary);
}
.ketex-filter-group .facetwp-slider .noUi-handle {
    width: 18px;
    height: 18px;
    top: -8px;
    right: -9px;
    background: #fff;
    border: 2px solid var(--ketex-primary);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: grab;
}
.ketex-filter-group .facetwp-slider .noUi-handle::before,
.ketex-filter-group .facetwp-slider .noUi-handle::after {
    display: none;  /* noUiSlider-Default-Linien im Handle weg */
}
.ketex-filter-group .facetwp-slider .noUi-handle:focus,
.ketex-filter-group .facetwp-slider .noUi-handle.noUi-active {
    outline: none;
    box-shadow: 0 0 0 4px rgba(184, 69, 46, 0.18);
}
.ketex-filter-group .facetwp-slider-label {
    display: block;
    font-family: var(--ketex-font-ui);
    font-size: 13px;
    color: var(--ketex-text-muted);
    margin: 4px 0 8px;
}
/* Reset-Button (FacetWP rendert <input type="button" value="Reset" class="facetwp-slider-reset">).
   facetwp-hidden ist FacetWP's eigene Hide-Klasse — versteckt den Button initial. */
.ketex-filter-group .facetwp-slider-reset {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 18px;
    background: transparent;
    color: var(--ketex-text-muted);
    border: 1px solid var(--ketex-border);
    border-radius: 999px;
    font-family: var(--ketex-font-ui);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    -webkit-appearance: none;  /* iOS-Safari-Reset */
    appearance: none;
}
.ketex-filter-group .facetwp-slider-reset:hover {
    border-color: var(--ketex-primary);
    color: var(--ketex-primary);
}
.ketex-filter-group .facetwp-slider-reset.facetwp-hidden {
    display: none;
}

/* === FacetWP-Pager-Override === */
.facetwp-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 32px 0 0;
}
.facetwp-pager .facetwp-page {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ketex-border);
    border-radius: 4px;
    background: #fff;
    color: var(--ketex-dark);
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.facetwp-pager .facetwp-page.active,
.facetwp-pager .facetwp-page:hover {
    background: var(--ketex-primary);
    color: #fff;
    border-color: var(--ketex-primary);
}

/* === Body-Scroll-Lock === */
body.ketex-drawer-open {
    overflow: hidden;
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
    .ketex-filter-bar {
        gap: 8px;
    }
    .ketex-filter-bar__sort {
        margin-left: 0;
        width: 100%;
        order: 3;
    }
    .ketex-filter-bar__pills {
        order: 2;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .ketex-filter-drawer__panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Hero mit Background-Image (Bundle C).
   Background = <img>, Overlay = absolut positionierte div.
   Overlay-Color/Opacity werden in einem <style>-Block in <head>
   gesetzt (siehe ketex_layout_emit_hero_overlay_style in mu-plugin). */
.ketex-shop-archive__hero--has-bg {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ketex-shop-archive__hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}
.ketex-shop-archive__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Fallback wenn der wp_head-Style aus irgendeinem Grund nicht greift */
    background-color: rgba(28, 28, 28, 0.45);
}
.ketex-shop-archive__hero--has-bg .ketex-shop-archive__hero-inner {
    /* Text auf Bild lesbar machen — global.css verwaltet sonst die default
       Inner-Padding/Typography des Hero-Innenbereichs. */
    position: relative;
    z-index: 1;
    color: #fff;
}
.ketex-shop-archive__hero--has-bg .ketex-shop-archive__kicker,
.ketex-shop-archive__hero--has-bg .ketex-shop-archive__title,
.ketex-shop-archive__hero--has-bg .ketex-shop-archive__subtitle,
.ketex-shop-archive__hero--has-bg .ketex-shop-archive__subtitle p {
    color: #fff;
}

/* === Bundle F: Reset Elementor-Kit Link-Color für native Header/Footer === */
/* Link-Farben der nativen Chrome-Komponenten erben die Textfarbe ihres Containers.
   (Früher an body[class*="elementor-kit-"] gescoped, um das Elementor-Kit-Linkrot
   #B8452E zu überschreiben; nach der Elementor-Deinstallation greift dieser Scope
   nicht mehr — daher unconditional, sonst schlägt das Browser-Default-Blau durch.) */
.ketex-header a,
.ketex-header button,
.ketex-footer a,
.ketex-drawer a,
.ketex-drawer button,
.ketex-topbar a,
.ketex-search-panel a,
.ketex-auth-modal a {
    color: inherit;
}
.ketex-header a:hover,
.ketex-footer a:hover {
    color: inherit;
}

/* === Bundle F: Theme-Tokens === */
:root {
  /* SlimWoo-Tokens auf die Ketex-Werte abbilden (#63, Aufgabe 11).
     Die Compliance-Bloecke werden seit der Herausloesung vom Paket gestaltet
     (base.css). Dessen Regeln lesen --slimwoo-*; ohne diese Abbildung faenden
     sie ihre Fallback-Literale statt der Ketex-Palette, und die Darstellung
     veraenderte sich still. Ein fremdes Theme laesst den Block weg und bekommt
     die Fallbacks — genau dafuer sind sie da. */
  --slimwoo-primary:      var(--ketex-primary);
  --slimwoo-secondary:    var(--ketex-secondary);
  --slimwoo-accent:       var(--ketex-accent);
  --slimwoo-bg:           var(--ketex-bg);
  --slimwoo-bg-light:     var(--ketex-bg-light);
  --slimwoo-border:       var(--ketex-border);
  --slimwoo-text:         var(--ketex-text);
  --slimwoo-text-muted:   var(--ketex-text-muted);
  --slimwoo-label:        var(--ketex-label);
  --slimwoo-font-ui:      var(--ketex-font-ui);
  --slimwoo-font-title:   var(--ketex-font-title);
  --slimwoo-title-card:   var(--ketex-title-card);
  --slimwoo-title-weight: var(--ketex-title-weight);

  /* Aliase: Bundle-F-Naming-Convention auf bestehende Tokens mappen */
  --ketex-accent:    var(--ketex-secondary);
  --ketex-bg-soft:   #F4EFE7;
  --ketex-bg-cream:  var(--ketex-bg-warm);
  --ketex-ink:       var(--ketex-dark);
  --ketex-ink-soft:  var(--ketex-text-muted);
  --ketex-ink-dark:  #1a1815;

  --ketex-topbar-height: 36px;
  --ketex-topbar-font-size: 13px;

  --ketex-header-height-desktop: 72px;
  --ketex-header-height-scrolled: 56px;
  --ketex-header-height-mobile: 64px;
  --ketex-header-z: 1000;

  --ketex-drawer-width: 360px;
  --ketex-drawer-z: 1100;
  --ketex-backdrop-z: 1099;
  --ketex-modal-z: 1200;
  --ketex-search-panel-z: 999;

  --ketex-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ketex-dur-fast: 150ms;
  --ketex-dur-base: 220ms;
  --ketex-dur-slow: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ketex-dur-fast: 0ms; --ketex-dur-base: 0ms; --ketex-dur-slow: 0ms; }
}

/* === Bundle F: Top-Bar === */
.ketex-topbar { position: relative; width: 100%; font-size: var(--ketex-topbar-font-size); line-height: 1.4; }
.ketex-topbar.is-dismissed { display: none; }
.ketex-topbar__inner { max-width: 1400px; margin-inline: auto; padding: 8px 40px; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: var(--ketex-topbar-height); }
.ketex-topbar__close { background: transparent; border: 0; cursor: pointer; padding: 4px; color: inherit; opacity: .7; transition: opacity var(--ketex-dur-fast) var(--ketex-ease-out); }
.ketex-topbar__close:hover { opacity: 1; }
.ketex-topbar__close svg { width: 14px; height: 14px; }

.ketex-topbar--bg-bg-soft  { background: var(--ketex-bg-soft);  color: var(--ketex-ink); }
.ketex-topbar--bg-bg-cream { background: var(--ketex-bg-cream); color: var(--ketex-ink); }
.ketex-topbar--bg-primary  { background: var(--ketex-primary);  color: #fff; }
.ketex-topbar--bg-accent   { background: var(--ketex-accent);   color: #fff; }
.ketex-topbar--bg-ink      { background: var(--ketex-ink);      color: #fff; }
.ketex-topbar--bg-ink-dark { background: #1a1815;               color: #fff; }
.ketex-topbar a { color: inherit; text-decoration: none; }
.ketex-topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ketex-topbar__usp { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.ketex-topbar__item { display: inline-flex; align-items: center; gap: 6px; }
.ketex-topbar__icon { width: 14px; height: 14px; flex-shrink: 0; }

.ketex-topbar__action { font-weight: 500; }
.ketex-topbar__action a { font-weight: 600; }

@media (max-width: 767px) {
  .ketex-topbar__inner { padding-inline: 20px; }
  .ketex-topbar__usp--cycle { display: grid; }
  .ketex-topbar__usp--cycle .ketex-topbar__item { grid-area: 1/1; opacity: 0; transition: opacity var(--ketex-dur-base) var(--ketex-ease-out); }
  .ketex-topbar__usp--cycle .ketex-topbar__item.is-active { opacity: 1; }
}

/* === Bundle F: Header === */
.ketex-header {
  position: sticky; top: 0; z-index: var(--ketex-header-z);
  background: var(--ketex-bg);
  border-bottom: 1px solid var(--ketex-border);
  transition: padding var(--ketex-dur-base) var(--ketex-ease-out);
}
/* WP-Admin-Bar Offset für Sticky-Header */
body.admin-bar .ketex-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ketex-header { top: 46px; }
}
.ketex-header__inner {
  max-width: 1400px; margin-inline: auto;
  padding: 10px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: var(--ketex-header-height-desktop);
  transition: min-height var(--ketex-dur-base) var(--ketex-ease-out);
}

body.is-scrolled .ketex-header__inner { min-height: var(--ketex-header-height-scrolled); padding-block: 6px; }

.ketex-header__logo { flex-shrink: 0; }
.ketex-header__logo-link { display: inline-flex; align-items: center; position: relative; }
.ketex-header__logo--full,
.ketex-header__logo--compact { display: block; max-height: 44px; width: auto; transition: max-height var(--ketex-dur-base) var(--ketex-ease-out), opacity var(--ketex-dur-base) var(--ketex-ease-out); }

/* Crossfade nur wenn Compact-Logo vorhanden (Marker-Klasse .has-compact) */
.ketex-header__logo-link.has-compact .ketex-header__logo--compact { max-height: 40px; }
body:not(.is-scrolled) .ketex-header__logo-link.has-compact .ketex-header__logo--compact,
body.is-scrolled .ketex-header__logo-link.has-compact .ketex-header__logo--full {
    opacity: 0;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Ohne Compact-Logo: Full-Logo schrumpft proportional, bleibt im Flow (kein Layout-Shift) */
body.is-scrolled .ketex-header__logo-link:not(.has-compact) .ketex-header__logo--full {
    max-height: 40px;
}

.ketex-header__logo--text { font-family: var(--ketex-font-title); font-size: 24px; color: var(--ketex-ink); text-decoration: none; }

/* `min-width: 0` hebt die Flex-Vorgabe `min-width: auto` auf, die einen
   Flex-Punkt nicht unter seine Inhaltsbreite schrumpfen laesst. Logo und
   Icon-Leiste sind bewusst shrink-fest; ohne diese Zeile war die Navigation
   damit ebenfalls unnachgiebig, und ein Menue, das breiter wurde als der
   Restplatz, schob die Icon-Leiste aus dem Viewport heraus — die ganze Seite
   wurde horizontal scrollbar (gemessen 2026-08-13: 1086 px Inhalt bei 1024 px
   Viewport, 62 px Ueberlauf). Zusammen mit dem Umbruch unten degradiert ein zu
   langes Menue jetzt sichtbar in die Hoehe, statt die Seite zu sprengen. */
.ketex-header__nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.ketex-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ketex-header__action-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ketex-ink);
  text-decoration: none;
  position: relative;
  transition: color var(--ketex-dur-fast) var(--ketex-ease-out);
}
.ketex-header__action-icon:hover { color: var(--ketex-primary); }
.ketex-header__action-icon svg { width: 20px; height: 20px; }
.ketex-header__burger { display: none; }

.ketex-header .ketex-cart-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ketex-primary); color: #fff;
  border-radius: 9px;
  font-family: var(--ketex-font-ui);
  font-size: 11px; font-weight: 600; line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}
.ketex-header .ketex-cart-count[data-count="0"] { display: none; }

/* Account-Dropdown */
.ketex-header__account { position: relative; }
.ketex-header__account-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px; padding: 12px;
  background: var(--ketex-bg); border: 1px solid var(--ketex-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.ketex-header__account-dropdown[hidden] { display: none; }
.ketex-header__account-greeting { margin: 0 0 8px; padding: 0 8px 8px; border-bottom: 1px solid var(--ketex-border); font-size: 13px; color: var(--ketex-ink-soft); }
.ketex-header__account-menu { list-style: none; margin: 0; padding: 0; }
.ketex-header__account-menu a { display: block; padding: 8px; color: var(--ketex-ink); text-decoration: none; border-radius: 4px; }
.ketex-header__account-menu a:hover { background: var(--ketex-bg-soft); color: var(--ketex-primary); }

/* === Bundle F: Mega-Menu === */
/* Gleiche Notbremse wie beim einfachen Menue — siehe .ketex-simplemenu. */
.ketex-header .ketex-megamenu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ketex-header .ketex-megamenu__item { position: static; }
.ketex-header .ketex-megamenu__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--ketex-ink); text-decoration: none;
  font-family: var(--ketex-font-ui); font-weight: 500; font-size: 15px;
  transition: color var(--ketex-dur-fast) var(--ketex-ease-out), background-color var(--ketex-dur-fast) var(--ketex-ease-out);
}
.ketex-header .ketex-megamenu__link:hover {
  color: var(--ketex-accent);
  background-color: rgba(184, 69, 46, 0.08);
}
/* Active-State (current page / ancestor) — gleicher Pink-Pill wie Hover, persistent */
.ketex-header .ketex-megamenu__item.current-menu-item > .ketex-megamenu__link,
.ketex-header .ketex-megamenu__item.current-menu-parent > .ketex-megamenu__link,
.ketex-header .ketex-megamenu__item.current-menu-ancestor > .ketex-megamenu__link,
.ketex-header .ketex-megamenu__item.current_page_item > .ketex-megamenu__link,
.ketex-header .ketex-megamenu__item.current_page_parent > .ketex-megamenu__link,
.ketex-header .ketex-megamenu__item.current_page_ancestor > .ketex-megamenu__link,
.ketex-header .ketex-simplemenu > li.current-menu-item > a,
.ketex-header .ketex-simplemenu > li.current-menu-parent > a,
.ketex-header .ketex-simplemenu > li.current-menu-ancestor > a,
.ketex-header .ketex-simplemenu > li.current_page_item > a,
.ketex-header .ketex-simplemenu > li.current_page_parent > a,
.ketex-header .ketex-simplemenu > li.current_page_ancestor > a {
  color: var(--ketex-accent);
  background-color: rgba(184, 69, 46, 0.08);
}
.ketex-header .ketex-megamenu__caret { width: 12px; height: 12px; transition: transform var(--ketex-dur-fast) var(--ketex-ease-out); }
.ketex-header .ketex-megamenu__item--has-panel.is-open .ketex-megamenu__caret { transform: rotate(180deg); }

.ketex-header .ketex-megamenu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ketex-bg); border-top: 1px solid var(--ketex-border);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  padding: 24px 40px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--ketex-dur-base) var(--ketex-ease-out), transform var(--ketex-dur-base) var(--ketex-ease-out), visibility 0s linear var(--ketex-dur-base);
}
.ketex-header .ketex-megamenu__item--has-panel:hover > .ketex-megamenu__panel,
.ketex-header .ketex-megamenu__item--has-panel.is-open > .ketex-megamenu__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.ketex-header .ketex-megamenu__panel-inner { max-width: 1400px; margin: 0 auto; }
.ketex-header .ketex-megamenu__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, max-content)); justify-content: start; gap: 32px; }
.ketex-header .ketex-megamenu__col { font-size: 14px; }
.ketex-header .ketex-megamenu__heading { display: block; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--ketex-border); color: var(--ketex-ink); font-family: var(--ketex-font-ui); font-weight: 600; text-decoration: none; }
.ketex-header .ketex-megamenu__heading:hover { color: var(--ketex-accent); }
.ketex-header .ketex-megamenu__list { list-style: none; margin: 0; padding: 0; }
.ketex-header .ketex-megamenu__sub-item a { display: block; padding: 6px 0; color: var(--ketex-ink-soft); text-decoration: none; }
.ketex-header .ketex-megamenu__sub-item a:hover { color: var(--ketex-primary); }

/* === Bundle F: Simple-Menu (Mega-Menu disabled) === */
.ketex-header .ketex-simplemenu {
    list-style: none; margin: 0; padding: 0;
    /* Umbruch als Notbremse, nicht als Gestaltung: solange das Menue passt,
       aendert `wrap` nichts. Wird es zu lang, waechst die Kopfzeile in die
       Hoehe — sichtbar und harmlos — statt Menuepunkte abzuschneiden oder die
       Seite horizontal scrollbar zu machen. */
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
}
.ketex-header .ketex-simplemenu > li {
    position: relative;
}
.ketex-header .ketex-simplemenu > li > a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    color: var(--ketex-ink); text-decoration: none;
    font-family: var(--ketex-font-ui); font-weight: 500; font-size: 15px;
    border-radius: 8px;
    transition: background-color var(--ketex-dur-fast) var(--ketex-ease-out), color var(--ketex-dur-fast) var(--ketex-ease-out);
}
.ketex-header .ketex-simplemenu > li > a:hover {
    background-color: rgba(184, 69, 46, 0.08);
}
.ketex-header .ketex-simplemenu > li.menu-item-has-children > a::after {
    content: "▾"; font-size: 0.7em; margin-left: 2px; opacity: 0.6;
}
.ketex-header .ketex-simplemenu .sub-menu {
    list-style: none; margin: 0; padding: 8px 0;
    position: absolute; top: 100%; left: 0;
    min-width: 220px;
    background: var(--ketex-bg);
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--ketex-dur-fast) var(--ketex-ease-out), transform var(--ketex-dur-fast) var(--ketex-ease-out), visibility 0s linear var(--ketex-dur-fast);
    z-index: 10;
}
.ketex-header .ketex-simplemenu > li:hover > .sub-menu,
.ketex-header .ketex-simplemenu > li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: 0s;
}
.ketex-header .ketex-simplemenu .sub-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--ketex-ink); text-decoration: none;
    font-size: 14px;
    transition: background-color var(--ketex-dur-fast) var(--ketex-ease-out);
}
.ketex-header .ketex-simplemenu .sub-menu a:hover {
    background-color: var(--ketex-bg-soft);
    color: var(--ketex-accent);
}
.ketex-header .ketex-simplemenu .sub-menu .sub-menu {
    top: 0; left: 100%;
}

@media (max-width: 1023px) {
  .ketex-header__nav { display: none; }
  .ketex-header__burger { display: inline-flex; }
  .ketex-header__inner { padding: 8px 20px; min-height: var(--ketex-header-height-mobile); }
  .ketex-header__logo--full { max-height: 40px; }

  /* Ohne Navigation bleiben nur Logo + Aktionen; beide waren shrink-fest, wodurch ihre
     Summe (Logo-Eigenbreite + Icon-Leiste) den Viewport ueberschritt und die Seite
     horizontal scrollbar machte. Das Logo skaliert jetzt proportional in den Restplatz,
     womit ein Ueberlauf unabhaengig vom Seitenverhaeltnis des Logo-Assets ausgeschlossen ist. */
  .ketex-header__logo { flex-shrink: 1; min-width: 0; }
  .ketex-header__logo-link { max-width: 100%; }
  .ketex-header__logo--full,
  .ketex-header__logo--compact { max-width: 100%; }
}

/* Telefonbreite: Zwischenraeume schrumpfen vor dem Logo. Die Icon-Buttons ruecken
   zusammen statt schmaler zu werden, damit die Touch-Flaechen 40 px breit bleiben. */
@media (max-width: 479px) {
  .ketex-header__inner { gap: 8px; }
  .ketex-header__actions { gap: 0; }
}

/* === Bundle F: Desktop-Search-Panel === */
.ketex-search-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: var(--ketex-search-panel-z);
  background: var(--ketex-bg); border-bottom: 1px solid var(--ketex-border);
  padding: 24px 40px;
  transform: translateY(-100%); opacity: 0;
  pointer-events: none;
  transition: transform var(--ketex-dur-base) var(--ketex-ease-out), opacity var(--ketex-dur-fast) var(--ketex-ease-out);
}
.ketex-search-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ketex-search-panel[hidden] { display: none; }
/* WP-Admin-Bar Offset für Search-Panel */
body.admin-bar .ketex-search-panel { top: calc(100% + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .ketex-search-panel { top: calc(100% + 46px); }
}
.ketex-search-panel__form { max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.ketex-search-panel__form input[type="search"] {
  flex: 1; min-height: 44px; padding: 0 16px;
  background: var(--ketex-bg-soft); border: 1px solid var(--ketex-border); border-radius: 6px;
  font-family: var(--ketex-font-ui); font-size: 16px;
}
.ketex-search-panel__form button { background: transparent; border: 0; cursor: pointer; padding: 8px; color: var(--ketex-ink); }
.ketex-search-panel__form button:hover { color: var(--ketex-primary); }

/* === Bundle F: Mobile-Drawer === */
.ketex-drawer { position: fixed; inset: 0; z-index: var(--ketex-drawer-z); pointer-events: none; }
.ketex-drawer[hidden] { display: none; }
/* WP-Admin-Bar Offset für Mobile-Nav-Drawer */
body.admin-bar .ketex-drawer { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ketex-drawer { top: 46px; }
}
.ketex-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ketex-dur-base) var(--ketex-ease-out);
}
.ketex-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--ketex-drawer-width); max-width: 90vw;
  background: var(--ketex-bg);
  transform: translateX(100%);
  transition: transform var(--ketex-dur-base) var(--ketex-ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.ketex-drawer.is-open { pointer-events: auto; }
.ketex-drawer.is-open .ketex-drawer__backdrop { opacity: 1; pointer-events: auto; }
.ketex-drawer.is-open .ketex-drawer__panel { transform: translateX(0); }

.ketex-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ketex-border); }
.ketex-drawer__title { font-family: var(--ketex-font-title); font-size: var(--ketex-title-card); color: var(--ketex-ink); }
.ketex-drawer__close { background: transparent; border: 0; cursor: pointer; padding: 4px; color: var(--ketex-ink); }
.ketex-drawer__close svg { width: 20px; height: 20px; }

.ketex-drawer__search { display: flex; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--ketex-border); }
.ketex-drawer__search input[type="search"] { flex: 1; min-height: 40px; padding: 0 12px; background: var(--ketex-bg-soft); border: 1px solid var(--ketex-border); border-radius: 6px; }
.ketex-drawer__search button { background: transparent; border: 0; cursor: pointer; padding: 8px; color: var(--ketex-ink); }

.ketex-drawer__nav { padding: 8px 0; flex: 1; }
.ketex-drawer__menu, .ketex-drawer__sub-menu { list-style: none; margin: 0; padding: 0; }
.ketex-drawer__nav-row { display: flex; align-items: stretch; }
.ketex-drawer__nav-link { flex: 1; padding: 12px 20px; color: var(--ketex-ink); text-decoration: none; font-weight: 500; }
.ketex-drawer__nav-link:hover { color: var(--ketex-primary); background: var(--ketex-bg-soft); }
.ketex-drawer__nav-toggle { background: transparent; border: 0; cursor: pointer; padding: 0 20px; color: var(--ketex-ink); }
.ketex-drawer__nav-caret { width: 16px; height: 16px; transition: transform var(--ketex-dur-fast) var(--ketex-ease-out); }
.ketex-drawer__nav-item.is-open > .ketex-drawer__nav-row .ketex-drawer__nav-caret { transform: rotate(180deg); }
.ketex-drawer__nav-item.is-open > .ketex-drawer__sub-menu { display: block; }
.ketex-drawer__nav-item--depth-1 > .ketex-drawer__nav-row .ketex-drawer__nav-link { padding-left: 36px; }
.ketex-drawer__nav-item--depth-2 > .ketex-drawer__nav-row .ketex-drawer__nav-link { padding-left: 52px; font-size: 14px; color: var(--ketex-ink-soft); }

.ketex-drawer__account { padding: 16px 20px; border-top: 1px solid var(--ketex-border); display: flex; flex-direction: column; gap: 8px; }
.ketex-drawer__account a, .ketex-drawer__auth-trigger {
  display: block; padding: 10px 12px; background: var(--ketex-bg-soft); color: var(--ketex-ink); text-decoration: none; border-radius: 4px; text-align: center;
  border: 0; cursor: pointer; font-family: inherit; font-size: inherit;
}

body.ketex-drawer-open { overflow: hidden; }

/* === Side-Cart (Off-Canvas Mini-Cart, ketex-drawer-Look) === */
.ketex-cart-drawer__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#ketex-cart-drawer .woocommerce-mini-cart {
  list-style: none; margin: 0; padding: 4px 20px; flex: 1; overflow-y: auto;
}
/* Zeile: Bild links (absolut), Text in der Mitte, „×" oben rechts — kein Overlap. */
#ketex-cart-drawer .woocommerce-mini-cart-item {
  position: relative; padding: 16px 36px 16px 64px; min-height: 48px;
  border-bottom: 1px solid var(--ketex-border);
}
/* Doppellinie zur Zwischensumme vermeiden: letzte Position ohne untere Linie
   (die __total behält ihre obere Trennlinie). */
#ketex-cart-drawer .woocommerce-mini-cart-item:last-child { border-bottom: 0; }
#ketex-cart-drawer .woocommerce-mini-cart-item img {
  position: absolute; left: 0; top: 16px; float: none;
  width: 48px; height: 48px; object-fit: cover; border-radius: 8px; margin: 0;
}
#ketex-cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
  color: var(--ketex-ink); text-decoration: none; font-weight: 600; display: block; line-height: 1.35;
}
#ketex-cart-drawer .woocommerce-mini-cart-item > a:not(.remove):hover { color: var(--ketex-primary); }
/* Preis prominent (dunkel), MwSt-Hinweis gedämpft/klein — nicht umgekehrt. */
#ketex-cart-drawer .woocommerce-mini-cart-item .quantity {
  display: block; color: var(--ketex-ink); font-size: 14px; font-weight: 500; margin-top: 4px;
}
/* .wgm-info/.woocommerce-de_price_taxrate = German Markets Preis-Suffix (faellt
   mit dem Cut weg), .slimwoo-cart-note = die native Nachfolge-Angabe. Die
   Nachfolge braucht die Typografie HIER und nicht nur in commerce.css: der
   Drawer haengt site-weit im Header, commerce.css laedt aber nur auf
   Warenkorb/Kasse/Konto (commerce-styles.php) — sonst stuende der
   MwSt-Pflichthinweis auf allen uebrigen Seiten in voller Fliesstextgroesse. */
#ketex-cart-drawer .woocommerce-mini-cart-item .wgm-info,
#ketex-cart-drawer .woocommerce-mini-cart-item .woocommerce-de_price_taxrate,
#ketex-cart-drawer .woocommerce-mini-cart-item .slimwoo-cart-note {
  color: var(--ketex-ink-soft); font-size: 12px; margin-top: 2px;
}
/* wpautop() im cart-item-data-Template verpackt den Wert in <p>. */
#ketex-cart-drawer .woocommerce-mini-cart-item .slimwoo-cart-note p { margin: 0; }
#ketex-cart-drawer a.remove_from_cart_button {
  position: absolute; right: 0; top: 16px; width: 22px; height: 22px; line-height: 20px;
  text-align: center; border-radius: 50%; background: var(--ketex-bg-soft);
  color: var(--ketex-ink-soft); text-decoration: none; font-size: 15px; font-weight: 400;
}
/* Sweep2 KEEP: Basis redundant, Hover-Zustand lokal nicht verifiziert (Drawer) — konservativ behalten */
#ketex-cart-drawer a.remove_from_cart_button:hover { background: var(--ketex-primary); color: #fff !important; }
#ketex-cart-drawer .woocommerce-mini-cart__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0; padding: 16px 20px; border-top: 1px solid var(--ketex-border);
  font-family: var(--ketex-font-title); font-size: 17px; color: var(--ketex-ink);
}
#ketex-cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount { color: var(--ketex-primary); font-weight: 700; }
#ketex-cart-drawer .woocommerce-mini-cart__buttons {
  margin: 0; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px;
}
#ketex-cart-drawer .woocommerce-mini-cart__buttons .button {
  display: block; text-align: center; padding: 13px; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-family: var(--ketex-font-ui);
}
#ketex-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: transparent; color: var(--ketex-primary); border: 1px solid var(--ketex-primary);
}
#ketex-cart-drawer .woocommerce-mini-cart__buttons .checkout {
  background: var(--ketex-primary); color: #fff;
}
#ketex-cart-drawer .woocommerce-mini-cart__empty-message {
  padding: 48px 20px; text-align: center; color: var(--ketex-ink-soft);
}
/* Rechtshinweis im Side-Cart (Versandkosten/Zahlungsweisen/Widerruf): kleiner,
   gedämpft, mit Padding; Links in Terrakotta ohne Unterstreichung.
   Vor dem Cut rendert German Market den Absatz (`jde_hint`), danach
   slimwoo_mini_cart_disclaimer_markup() — beide tragen dieselbe Klasse, damit
   diese Regel über den Cut hinweg trägt. */
#ketex-cart-drawer .jde_hint {
  margin: 12px 0 20px; padding: 0 20px;
  font-size: 12.5px; line-height: 1.5; color: var(--ketex-ink-soft);
}
#ketex-cart-drawer .jde_hint a {
  color: var(--ketex-primary); text-decoration: none;
}
#ketex-cart-drawer .jde_hint a:hover { text-decoration: underline; }

/* === Bundle F: Footer === */
.ketex-footer { background: var(--ketex-ink); color: rgba(255,255,255,0.72); margin-top: 80px; }
/* Startseite endet mit der dunklen Newsletter-CTA-Sektion — dieselbe Farbe wie
   der Footer (--ketex-ink). Der 80px-Abstand ist dort ein heller Fremdstreifen
   zwischen zwei dunklen Blöcken; die Sektion soll nahtlos in den Footer laufen.
   ⚠️ Diese Regel stand schon einmal hier und ging beim Block-Theme-Rückbau
   (fcc1914, ADR 0003) unbemerkt mit verloren — der weiße Balken kam damit
   zurück und fiel erst in der Cutover-Generalprobe am 2026-08-09 wieder auf. */
body.home .ketex-footer { margin-top: 0; }
.ketex-footer a,
.ketex-footer__menu a,
.ketex-footer__legal a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}
.ketex-footer a:hover,
.ketex-footer__menu a:hover,
.ketex-footer__legal a:hover {
    color: #fff;
}
.ketex-footer__main {
  max-width: 1400px; margin-inline: auto;
  padding: 60px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 60px;
}
.ketex-footer__col { min-width: 0; }
.ketex-footer__heading {
  font-family: var(--ketex-font-ui);
  font-size: var(--ketex-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.ketex-footer__tagline { font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.ketex-footer__menu, .ketex-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ketex-footer__menu li, .ketex-footer__legal li { font-size: 14px; }
.ketex-footer__legal { flex-direction: row; gap: 16px; flex-wrap: wrap; }

.ketex-footer__social { list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 12px; }
.ketex-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.08); border-radius: 50%;
  transition: background var(--ketex-dur-fast) var(--ketex-ease-out);
}
.ketex-footer__social a:hover { background: rgba(255,255,255,0.18); }
.ketex-footer__social svg { width: 18px; height: 18px; }

.ketex-footer__newsletter-subtext { font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.ketex-footer__contact { font-size: 13px; line-height: 1.7; margin: 16px 0 0; color: rgba(255,255,255,0.55); }

.ketex-footer__bottom { background: #1a1815; }
.ketex-footer__bottom-inner {
  max-width: 1400px; margin-inline: auto;
  padding: 20px 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.ketex-footer__copyright { margin: 0; font-size: 13px; color: rgba(255,255,255,0.45); }

@media (max-width: 1023px) {
  .ketex-footer__main { grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 20px; }
  .ketex-footer__col--newsletter { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ketex-footer__main { grid-template-columns: 1fr; }
  .ketex-footer__bottom-inner { flex-direction: column; align-items: flex-start; padding: 16px 20px; }
}

/* === Bundle F: Auth-Modal === */
.ketex-auth-modal { position: fixed; inset: 0; z-index: var(--ketex-modal-z); pointer-events: none; }
.ketex-auth-modal[hidden] { display: none; }
.ketex-auth-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0; transition: opacity var(--ketex-dur-base) var(--ketex-ease-out);
  pointer-events: none;
}
.ketex-auth-modal:not([hidden]) { pointer-events: auto; }
.ketex-auth-modal:not([hidden]) .ketex-auth-modal__backdrop { opacity: 1; pointer-events: auto; }
.ketex-auth-modal__panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  max-height: 90vh; overflow-y: auto;
  background: var(--ketex-bg);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
}
.ketex-auth-modal__close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; cursor: pointer; padding: 6px; color: var(--ketex-ink-soft); }
.ketex-auth-modal__close:hover { color: var(--ketex-ink); }
.ketex-auth-modal__tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--ketex-border); }
.ketex-auth-modal__tab {
  flex: 1; background: transparent; border: 0; cursor: pointer;
  padding: 12px 8px; font-family: inherit; font-size: 14px; color: var(--ketex-ink-soft);
  border-bottom: 2px solid transparent;
  transition: color var(--ketex-dur-fast), border-color var(--ketex-dur-fast);
}
.ketex-auth-modal__tab.is-active { color: var(--ketex-ink); border-bottom-color: var(--ketex-primary); }
.ketex-auth-modal__tab:hover { color: var(--ketex-ink); }

.ketex-auth-modal__form { display: flex; flex-direction: column; gap: 12px; }
.ketex-auth-modal__form[hidden] { display: none; }
.ketex-auth-modal__form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ketex-ink-soft); }
.ketex-auth-modal__form input[type="text"],
.ketex-auth-modal__form input[type="email"],
.ketex-auth-modal__form input[type="password"] {
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--ketex-border); border-radius: 6px;
  font: inherit;
}
.ketex-auth-modal__checkbox { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ketex-ink); }
.ketex-auth-modal__checkbox input { margin-top: 3px; }
.ketex-auth-modal__submit {
  background: var(--ketex-primary); color: #fff; border: 0; cursor: pointer;
  padding: 12px 16px; border-radius: 6px;
  font: inherit; font-weight: 600;
  transition: background var(--ketex-dur-fast) var(--ketex-ease-out);
}
.ketex-auth-modal__submit:hover { background: var(--ketex-accent); }
.ketex-auth-modal__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.ketex-auth-modal__status { margin-top: 8px; padding: 10px; border-radius: 6px; font-size: 13px; display: none; }
.ketex-auth-modal__status.is-success { display: block; background: #e9f5ec; color: #1e4d2b; }
.ketex-auth-modal__status.is-error   { display: block; background: #fbe9e7; color: #8c2e1a; }
.ketex-auth-modal__honeypot { position: absolute; left: -9999px; }

/* Auth-Modal: per-Field-Errors (Tooltip-Callout-Style) */
.ketex-auth-modal__field { position: relative; }
.ketex-auth-modal__field-tip {
    position: relative;
    margin-top: 6px;
    padding: 8px 12px 8px 32px;
    background: #fbe9e7;
    color: #8c2e1a;
    border: 1px solid #f3b9ad;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}
.ketex-auth-modal__field-tip::before {
    content: "!";
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    background: #c34521;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}
.ketex-auth-modal__field-tip::after {
    content: "";
    position: absolute;
    top: -6px; left: 16px;
    width: 10px; height: 10px;
    background: #fbe9e7;
    border-left: 1px solid #f3b9ad;
    border-top: 1px solid #f3b9ad;
    transform: rotate(45deg);
}
.ketex-auth-modal__field-tip[hidden] { display: none; }
.ketex-auth-modal__field.has-error input[type="text"],
.ketex-auth-modal__field.has-error input[type="email"],
.ketex-auth-modal__field.has-error input[type="password"] {
    border-color: #c34521;
}
.ketex-auth-modal__field.has-error .ketex-auth-modal__checkbox > input[type="checkbox"] {
    outline: 2px solid #c34521;
    outline-offset: 2px;
}

/* Auth-Modal: Pflichtfeld-Marker (vor Submit sichtbar, :has() seit 2022 baseline) */
.ketex-auth-modal__field:has(input[required]:not([type="checkbox"])) > label::after {
    content: " *";
    color: #c34521;
    font-weight: 700;
}
.ketex-auth-modal__field:has(.ketex-auth-modal__checkbox input[required]) .ketex-auth-modal__checkbox > span::after {
    content: " *";
    color: #c34521;
    font-weight: 700;
    margin-left: 2px;
}
.ketex-auth-modal__form::after {
    content: "* Pflichtfeld";
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ketex-ink-soft);
}
.ketex-auth-modal__form[hidden]::after { display: none; }

body.ketex-modal-open { overflow: hidden; }

/* === Bundle F: Newsletter-Form === */
.ketex-newsletter-form { display: flex; flex-direction: column; gap: 10px; position: relative; }
.ketex-newsletter-form__row { display: flex; gap: 8px; }
.ketex-newsletter-form__row input[type="email"] {
  /* min-width: 0 hebt die intrinsische Eingabefeld-Mindestbreite auf — ohne sie
     schiebt das Feld den Absende-Button auf schmalen Telefonen aus dem Viewport. */
  flex: 1; min-width: 0; min-height: 40px; padding: 0 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; border-radius: 6px;
  font: inherit;
}
.ketex-newsletter-form__row input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }
.ketex-newsletter-form__submit {
  background: var(--ketex-primary); color: #fff; border: 0; cursor: pointer;
  padding: 0 16px; min-height: 40px; border-radius: 6px;
  font: inherit; font-weight: 600;
  transition: background var(--ketex-dur-fast) var(--ketex-ease-out);
}
.ketex-newsletter-form__submit:hover { background: var(--ketex-accent); }
.ketex-newsletter-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.ketex-newsletter-form__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.4; }
.ketex-newsletter-form__consent input { margin-top: 3px; flex-shrink: 0; }
.ketex-newsletter-form__consent a { color: inherit; text-decoration: none; }
.ketex-newsletter-form__consent a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ketex-newsletter-form__status { padding: 8px 10px; border-radius: 6px; font-size: 13px; display: none; }
.ketex-newsletter-form__status.is-success { display: block; background: rgba(76,175,80,0.15); color: #cde9d2; }
.ketex-newsletter-form__status.is-error   { display: block; background: rgba(244,67,54,0.15); color: #fcd1cb; }

/* Newsletter-Form: Pflichtfeld-Marker für Consent-Checkbox
   (Email-Label ist .screen-reader-text, daher visuell nicht markierbar; Pflicht greift via Server-Validation) */
.ketex-newsletter-form__consent:has(input[required]) > span::after {
    content: " *";
    color: #c34521;
    font-weight: 700;
    margin-left: 2px;
}

/* Cross-Sell-Sektionen (Produkte + Inhalte, getrennt, volle typ-reine Cards) */
.ketex-crosssell { margin: 3.5rem 0 1rem; }
.ketex-crosssell__title { margin-bottom: 1.25rem; }
/* Inhalts-Karten-Grid (recipe-card / editorial-card); Produkt-Sektion nutzt das WC-Grid */
.ketex-crosssell-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ketex-crosssell-grid { grid-template-columns: repeat(4, 1fr); } }
/* WC-Produkt-Sektion außerhalb des Shop-Archivs: Grid erzwingen (gegen .woocommerce flex-Default) */
/* Sweep2 KEEP: Content-Cross-Sell-Grid (Magazin/Rezept/Editorial); lokal kein Content — konservativ behalten, nicht als redundant verifizierbar */
.ketex-crosssell .woocommerce ul.products.ketex-crosssell__products { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 0; }
@media (min-width: 768px) { .ketex-crosssell .woocommerce ul.products.ketex-crosssell__products { grid-template-columns: repeat(4, 1fr); } }

/* ── Geteilter Featured-Aufmacher (editorial + rezepte) ──
   Liegt global, weil beide Archive den editorial-featured-Partial nutzen
   (editorial-archive.css wird nur auf editorial-Archiven geladen). SSoT. */
/* Stretched-Link-Pattern: ganze Karte → Artikel (über __more::after); Typ-Pill liegt mit z-index darüber. */
.ketex-editorial-featured { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; margin: 2rem 0; border: 1px solid #E8E0D8; border-radius: 14px; overflow: hidden; background: #FAF8F5; transition: box-shadow .2s; }
@media (min-width: 880px) { .ketex-editorial-featured { grid-template-columns: 1.1fr 1fr; } }
.ketex-editorial-featured:hover { box-shadow: 0 6px 18px rgba(42,38,34,.08); }
.ketex-editorial-featured__media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.ketex-editorial-featured__panel { padding: 1.8rem 2rem; display: flex; flex-direction: column; gap: .8rem; justify-content: center; }
.ketex-editorial-featured__meta { display: flex; align-items: center; gap: .6rem; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ketex-kicker-color); }
.ketex-editorial-featured__cat { position: relative; z-index: 2; align-self: flex-start; }
.ketex-editorial-featured__title { font-family: var(--ketex-font-title); font-size: var(--ketex-title-card); line-height: 1.25; color: #2A2622; }
.ketex-editorial-featured__excerpt { color: var(--ketex-text-muted); line-height: 1.55; }
.ketex-editorial-featured__more { align-self: flex-start; color: #B8452E; font-weight: 600; text-decoration: none; }
.ketex-editorial-featured__more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Bei aktivem FacetWP-Filter clientseitig ausgeblendet (editorial-featured.js, Spec P1). */
.ketex-editorial-featured--hidden { display: none; }

/* ── Geteilte Editorial-Card (Magazin-Archiv + Magazin-Single) ── SSoT.
   editorial-archive.css wird nur auf Archiven geladen; das redaktionelle
   Single (single-magazin.php) nutzt dieselbe Karte → hierher gehoben. */
/* Stretched-Link-Pattern: Card-Optik auf der Card selbst (kein umschließender __link mehr),
   der Titel-Link deckt via ::after die ganze Karte; Typ-Pill liegt mit z-index darüber. */
.ketex-editorial-card { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid #E8E0D8; border-radius: 12px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.ketex-editorial-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-2px); }
.ketex-editorial-card__media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.ketex-editorial-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.ketex-editorial-card__meta { display: flex; gap: .6rem; align-items: center; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ketex-kicker-color); }
.ketex-editorial-card__cat { position: relative; z-index: 2; align-self: flex-start; }
.ketex-editorial-card__titlewrap { margin: 0; }
.ketex-editorial-card__title { display: block; font-family: var(--ketex-font-title); font-weight: var(--ketex-title-weight); font-size: var(--ketex-title-card); line-height: 1.3; color: #2A2622; text-decoration: none; }
.ketex-editorial-card__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ketex-editorial-card__excerpt { font-size: .9rem; color: var(--ketex-text-muted); line-height: 1.5; }

/* ── Magazin-Content-Blöcke (Slice 2): ketex/tipp Callout ── */
.ketex-tipp { display: block; margin: 1.5rem 0; padding: 16px 18px; background: #FAF8F5; border: 1px solid #E7E1DA; border-left: 3px solid #B8452E; border-radius: 8px; }
.ketex-tipp__label { display: block; font-family: var(--ketex-font-ui); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: #B8452E; margin: 0 0 6px; }
.ketex-tipp__body { font-size: 15px; line-height: 1.6; color: #2A2622; }
.ketex-tipp__body p:last-child { margin-bottom: 0; }

/* ketex/produkt-tipp — horizontale Inline-Produkt-Empfehlung (kein Warenkorb) */
.ketex-produkt-tipp { display: flex; align-items: center; gap: 16px; margin: 1.5rem 0; padding: 12px; background: #fff; border: 1px solid #E7E1DA; border-radius: 12px; }
.ketex-produkt-tipp__media { flex-shrink: 0; width: 72px; height: 72px; display: block; }
.ketex-produkt-tipp__image { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.ketex-produkt-tipp__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ketex-produkt-tipp__kicker { font-family: var(--ketex-font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ketex-kicker-color); }
.ketex-produkt-tipp__name { font-family: var(--ketex-font-title); font-size: 16px; color: #2A2622; text-decoration: none; }
.ketex-produkt-tipp__name:hover { color: #B8452E; }
.ketex-produkt-tipp__price { font-size: 14px; font-weight: 600; color: #A3434B; }
.ketex-produkt-tipp__cta { flex-shrink: 0; }
.ketex-produkt-tipp--editor { color: var(--ketex-text-muted); font-style: italic; }

/* ============================================
   FORM ATOM (kanonisch) — Style-Guide Slice 1
   Konsolidiert aus den bisher verstreuten Input-Stilen (Auth-Modal /
   Newsletter / WC-Variations-Select). Zentrales Feld-Set für Warenkorb +
   Kasse. Werte aus dem Bestand übernommen (8px Radius wie Select/Newsletter,
   10×14 Padding + Chevron-SVG aus dem Variations-Select, Border-Token,
   Focus = --ketex-primary). Bestehende Auth-/Newsletter-Felder können später
   hierauf migriert werden.
   ============================================ */
.ketex-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ketex-field__label { font-family: var(--ketex-font-ui); font-size: 13px; font-weight: 600; color: var(--ketex-dark); }
.ketex-field__input,
.ketex-field__select,
.ketex-field__textarea {
    width: 100%;
    padding: 10px 14px;
    background-color: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    color: var(--ketex-dark);
    line-height: 1.4;
}
.ketex-field__input::placeholder,
.ketex-field__textarea::placeholder { color: var(--ketex-text-muted); }
.ketex-field__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.ketex-field__input:focus,
.ketex-field__select:focus,
.ketex-field__textarea:focus { outline: none; border-color: var(--ketex-primary); }

/* Checkbox / Radio — native, brand-getintet */
.ketex-field--check { flex-direction: row; align-items: flex-start; gap: 8px; }
.ketex-field--check .ketex-field__label { font-weight: 400; }
.ketex-field__check { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--ketex-primary); flex: 0 0 auto; cursor: pointer; }

/* Fehler-State */
.ketex-field--error .ketex-field__input,
.ketex-field--error .ketex-field__select,
.ketex-field--error .ketex-field__textarea { border-color: var(--ketex-secondary); }
.ketex-field__error { font-family: var(--ketex-font-ui); font-size: 12px; color: var(--ketex-secondary); }

/* Deaktiviert */
.ketex-field--disabled .ketex-field__input,
.ketex-field--disabled .ketex-field__select,
.ketex-field__input:disabled,
.ketex-field__select:disabled,
.ketex-field__textarea:disabled {
    background-color: var(--ketex-bg-light);
    color: var(--ketex-text-muted);
    cursor: not-allowed;
}

/* details-Blöcke im Tab "Pflichtangaben" — kompakte, ruhige Typografie */
.woocommerce-Tabs-panel--slimwoo_pflichtangaben { max-width: 620px; }


/* ══════════════════════════════════════════
   SEITEN-GRUNDGERÜST (Frontend-Verselbstständigung Slice 1)
   theme/partials/page-shell.php — page.php · single.php ·
   index.php · archive.php. Vorher fiel all das auf Hello
   Elementors index.php: kein Container, kein Titel, Text ab x = 0
   über die volle Viewport-Breite.
   Maße wie der übrige Content-Rahmen: 1400px, Gutter 40px.
   ══════════════════════════════════════════ */
.ketex-page__wrap {
    max-width: var(--ketex-content-max);
    margin-inline: auto;
    padding: 1.5rem 40px 4rem;
}
/* Variante „flush": Warenkorb/Kasse/Konto bringen ihr Layout selbst mit
   (commerce.css begrenzt .ketex-page__content eigenhändig) — ein zweiter
   Container hier ergäbe doppelte Innenabstände. */
.ketex-page--flush .ketex-page__wrap {
    max-width: none;
    padding: 0;
}

.ketex-page__header { margin: 0 0 2rem; }
.ketex-page__title {
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-page);
    font-weight: var(--ketex-title-weight);
    line-height: 1.15;
    color: var(--ketex-text);
    margin: 0;
}
.ketex-page__description {
    font-family: var(--ketex-font-ui);
    color: var(--ketex-text-muted);
    margin: 0.75rem 0 0;
    max-width: 68ch;
}

/* Fließtext-Spalte: Rechtstexte und redaktionelle Seiten lesen sich auf
   1400px nicht — der Text bekommt eine eigene, schmalere Zeilenlänge,
   Medien und Blöcke mit eigener Breite bleiben davon unberührt.
   ⚠️ Die gesamte Prosa-Typografie hängt an :not(.ketex-page--flush). Sonst
   griffe sie auch auf Warenkorb/Kasse/Konto — dort ist .ketex-page__content
   nicht Fließtext, sondern der Block-Cart: die Link-Regel unterstrich real
   jeden Produktnamen und jeden „Details ansehen"-Button (im Vorher/Nachher-
   Screenshot gesehen, nicht am DOM geraten). */
.ketex-page:not(.ketex-page--flush) .ketex-page__content {
    font-family: var(--ketex-font-ui);
    color: var(--ketex-text);
    line-height: 1.7;
    max-width: 896px;
}
.ketex-page--list .ketex-page__content { max-width: none; }

/* Ausrichtung „Breit" (alignwide) auf Inhaltsseiten.
   Die 896 px oben sind Lesebreite und für AGB, Widerruf und Datenschutz genau
   richtig — zweispaltige Abschnitte oder eine Kartenreihe werden darin
   eingequetscht. Statt die Lesebreite für alle zu opfern, darf ein einzelner
   Block im Editor auf „Breit" gestellt werden und bricht dann bis zur
   wideSize aus theme.json aus.
   Der Ausbruch geht nur nach RECHTS: .ketex-page__content ist im Wrap
   linksbündig, nicht zentriert — ein symmetrischer Ausbruch schöbe den Block
   um 152 px nach links aus der Flucht von Breadcrumb, Seitentitel und
   Fließtext (auf ketex-local im Screenshot gesehen). So beginnt jede Zeile der
   Seite an derselben Kante. */
.ketex-page:not(.ketex-page--flush) .ketex-page__content > .alignwide {
    --ketex-alignwide: min(var(--wp--style--global--wide-size, 1200px), calc(100vw - 80px));
    width: var(--ketex-alignwide);
    max-width: var(--ketex-alignwide);
    margin-left: 0;
    margin-right: calc(100% - var(--ketex-alignwide));
}

.ketex-page:not(.ketex-page--flush) .ketex-page__content > h1,
.ketex-page:not(.ketex-page--flush) .ketex-page__content > h2,
.ketex-page:not(.ketex-page--flush) .ketex-page__content > h3,
.ketex-page:not(.ketex-page--flush) .ketex-page__content > h4 {
    font-family: var(--ketex-font-title);
    font-weight: var(--ketex-title-weight);
    color: var(--ketex-text);
}
.ketex-page:not(.ketex-page--flush) .ketex-page__content > h2 { font-size: var(--ketex-title-section); margin: 2rem 0 0.75rem; }
.ketex-page:not(.ketex-page--flush) .ketex-page__content > h3 { font-size: var(--ketex-title-card); margin: 1.75rem 0 0.5rem; }
.ketex-page:not(.ketex-page--flush) .ketex-page__content > h4 { font-size: var(--ketex-title-card-sm); margin: 1.5rem 0 0.5rem; }
.ketex-page:not(.ketex-page--flush) .ketex-page__content > p  { margin: 0 0 1rem; }
.ketex-page:not(.ketex-page--flush) .ketex-page__content > ul,
.ketex-page:not(.ketex-page--flush) .ketex-page__content > ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.ketex-page:not(.ketex-page--flush) .ketex-page__content li { margin: 0 0 0.35rem; }
/* Link-Unterstreichung nur im echten Fließtext — nicht im Listen-Modus
   (dort sind die Links Kartentitel) und nicht auf Karten/Buttons. */
/* .ketex-feature-card ausgenommen: die Karte IST der Link — sie unterstreichen
   hieße Titel und Beschreibungstext der ganzen Kachel unterstreichen (auf
   /kontakt/ real gesehen, als die Kartenreihe dorthin wanderte). */
/* Die Farbe steht seit theme.json `styles.elements.link` auch dort — als Default
   für JEDEN Link, im Frontend wie im Editor-Canvas. Hier bleibt sie trotzdem:
   diese Regel trägt die Fließtext-Unterstreichung und setzt sich mit ihrer
   höheren Spezifität gegen Plugin-CSS durch, das ein `:where()`-Default nicht
   schlägt. Sie ist damit Absicherung, nicht mehr die einzige Quelle. */
.ketex-page:not(.ketex-page--flush):not(.ketex-page--list) .ketex-page__content a:not(.button):not(.wp-element-button):not(.ketex-feature-card) {
    color: var(--ketex-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ketex-page:not(.ketex-page--flush):not(.ketex-page--list) .ketex-page__content a:not(.button):not(.wp-element-button):not(.ketex-feature-card):hover { color: var(--ketex-secondary); }
.ketex-page:not(.ketex-page--flush) .ketex-page__content img { max-width: 100%; height: auto; }
.ketex-page:not(.ketex-page--flush) .ketex-page__content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.ketex-page:not(.ketex-page--flush) .ketex-page__content th,
.ketex-page:not(.ketex-page--flush) .ketex-page__content td { border: 1px solid var(--ketex-border); padding: 8px 12px; text-align: left; }

.ketex-page__comments { max-width: 896px; margin-top: 3rem; }

/* ── Listen-Modus (archive.php / index.php) ── */
.ketex-page__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) { .ketex-page__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .ketex-page__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ketex-page__entry {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ketex-border);
    border-radius: 12px;
    overflow: hidden;
}
.ketex-page__entry-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ketex-page__entry-body { padding: 16px 18px 20px; }
.ketex-page__entry-title {
    font-family: var(--ketex-font-title);
    font-size: var(--ketex-title-card);
    font-weight: var(--ketex-title-weight);
    margin: 0 0 0.5rem;
}
.ketex-page__entry-title a { color: var(--ketex-text); text-decoration: none; }
.ketex-page__entry-title a:hover { color: var(--ketex-primary); }
.ketex-page__entry-excerpt { font-size: 14px; color: var(--ketex-text-muted); margin: 0; line-height: 1.6; }

.ketex-page__empty { font-family: var(--ketex-font-ui); color: var(--ketex-text-muted); }

.ketex-page__pagination { margin-top: 2.5rem; }
.ketex-page__pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ketex-page__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ketex-border);
    border-radius: 8px;
    font-family: var(--ketex-font-ui);
    font-size: 14px;
    color: var(--ketex-text);
    text-decoration: none;
}
.ketex-page__pagination .page-numbers:hover { border-color: var(--ketex-primary); color: var(--ketex-primary); }
.ketex-page__pagination .page-numbers.current {
    background: var(--ketex-primary);
    border-color: var(--ketex-primary);
    color: #fff;
}
.ketex-page__pagelinks { margin-top: 1.5rem; font-family: var(--ketex-font-ui); font-size: 14px; }

@media (max-width: 767px) {
    .ketex-page__wrap { padding: 1rem 20px 3rem; }
    .ketex-page--flush .ketex-page__wrap { padding: 0; }
}

/* ── Gutscheinfeld in Warenkorb und Kasse (#118) ─────────────────────────── */

.slimwoo-voucher {
    border-top: 1px solid var(--ketex-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

.slimwoo-voucher__heading {
    font-family: var(--ketex-font-ui);
    font-size: var(--ketex-label);
    color: var(--ketex-ink);
    margin: 0 0 0.5rem;
}

.slimwoo-voucher__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.slimwoo-voucher__label {
    flex-basis: 100%;
    font-size: var(--ketex-label);
    color: var(--ketex-text-muted);
}

/* min-width: 0 verhindert den Ueberlauf schmaler Flex-Kinder — dieselbe
   Ursache wie beim Header-Ueberlauf (#55). */
.slimwoo-voucher__input {
    flex: 1 1 12rem;
    min-width: 0;
    border: 1px solid var(--ketex-border);
    background: var(--ketex-bg);
    color: var(--ketex-text);
    padding: 0.5rem 0.75rem;
}

.slimwoo-voucher__submit,
.slimwoo-voucher__remove {
    font-family: var(--ketex-font-ui);
    cursor: pointer;
}

.slimwoo-voucher__submit {
    background: var(--ketex-primary);
    color: var(--ketex-bg);
    border: none;
    padding: 0.5rem 1rem;
}

.slimwoo-voucher__submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.slimwoo-voucher__error {
    color: var(--ketex-accent);
    font-size: var(--ketex-label);
    margin: 0.5rem 0 0;
}

.slimwoo-voucher__list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.slimwoo-voucher__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.slimwoo-voucher__code {
    font-family: var(--ketex-font-ui);
    color: var(--ketex-text);
}

.slimwoo-voucher__amount {
    color: var(--ketex-ink);
}

.slimwoo-voucher__remove {
    background: none;
    border: none;
    padding: 0;
    color: var(--ketex-text-muted);
    text-decoration: underline;
    font-size: var(--ketex-label);
}