/* =============================================================================
   BLUEPRINT D18 — SURFACE / ELEVATION / GLOSS SYSTEM
   =============================================================================
   Theme-side CSS-only Token-Layer + Utility-Klassen + Component-Harmonization.

   Token-Architektur:
     --bp-surface-*    Background-Farben für Flächen/Cards/Panels
     --bp-radius-*     Card-/Panel-/Section-Radien
     --bp-shadow-*     Elevation-Skala (von none bis float)
     --bp-gloss-*      Glossy/Glass-Effekte (backdrop-filter)
     --bp-border-*     Border-Tokens für gloss/strong/standard

   Utility-Klassen:
     .bp-surface-*     Background-Fläche setzen
     .bp-elevation-*   Shadow setzen
     .bp-card--*       Card-Modifier (flat/soft/glass/gloss/bordered/minimal)
     .bp-panel--*      Panel-Modifier
   
   Component-Harmonization (sanft, additive):
     bbl-feature-item, bbl-integration-item, bbl-pricing-card, bbl-cta,
     bbl-stat-card

   NICHT GETOUCHT (D19.3 — Commerce-Layer-Trennung):
     - assets/css/bp-surface.css (Section-Surface-System, eigene Architektur)
     - inc/woocommerce/css/product-card.css (NEVER-TOUCH)
     - inc/woocommerce/css/woocommerce-system.css (NEVER-TOUCH)
     - .bp-product-card (WooCommerce-Layer, eigener Commerce-CSS-Stack)
     - .woocommerce ul.products li.product, .woocommerce .product, .products .product

   Defaults sind neutral hell, niedrige Schatten, ruhig.
   Audiopixel-Farben werden NICHT als Surface-Defaults gesetzt.

   @package Blueprint
   @since   1.19.12-d18
   ========================================================================== */


/* =============================================================================
   TOKEN-DEFINITIONEN — :root (Light Default)
   ========================================================================== */

:root {
    /* ── Surface (Background-Farben) ───────────────────────────────────── */
    --bp-surface-flat:      var(--color-bg, #ffffff);
    --bp-surface-soft:      var(--color-surface, #f7f8fa);
    --bp-surface-muted:     #eef0f3;
    --bp-surface-glass:     rgba(255, 255, 255, 0.62);
    --bp-surface-gloss:     rgba(255, 255, 255, 0.78);
    --bp-surface-elevated:  #ffffff;
    --bp-surface-dark:      #0e0f14;

    /* ── Border (Linien) ─────────────────────────────────────────────── */
    --bp-surface-border:        rgba(0, 0, 0, 0.08);
    --bp-surface-border-strong: rgba(0, 0, 0, 0.14);
    --bp-surface-border-gloss:  rgba(255, 255, 255, 0.5);

    /* ── Radius ──────────────────────────────────────────────────────── */
    --bp-radius-card:    12px;
    --bp-radius-panel:   16px;
    --bp-radius-section: 24px;

    /* ── Elevation / Shadow ──────────────────────────────────────────── */
    /* Sehr zurueckhaltend — Apple-/Linear-like, kein WP-Plugin-Look. */
    --bp-shadow-none:  none;
    --bp-shadow-soft:  0 1px 2px rgba(15, 18, 28, 0.04);
    --bp-shadow-card:  0 2px 6px rgba(15, 18, 28, 0.06), 0 1px 2px rgba(15, 18, 28, 0.04);
    --bp-shadow-panel: 0 6px 18px rgba(15, 18, 28, 0.07), 0 2px 4px rgba(15, 18, 28, 0.04);
    --bp-shadow-float: 0 12px 32px rgba(15, 18, 28, 0.09), 0 4px 8px rgba(15, 18, 28, 0.05);

    /* ── Gloss / Glass ───────────────────────────────────────────────── */
    --bp-gloss-bg:        rgba(255, 255, 255, 0.78);
    --bp-gloss-highlight: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 100%);
    --bp-glass-blur:      14px;
    --bp-glass-saturate:  160%;
}

/* Dark-Mode-Overrides: Token werden umgepolt, Utility-Klassen unveraendert */
[data-theme="dark"],
.is-dark {
    --bp-surface-flat:      var(--color-bg, #0e0f14);
    --bp-surface-soft:      rgba(255, 255, 255, 0.04);
    --bp-surface-muted:     rgba(255, 255, 255, 0.07);
    --bp-surface-glass:     rgba(20, 22, 30, 0.55);
    --bp-surface-gloss:     rgba(255, 255, 255, 0.08);
    --bp-surface-elevated:  rgba(255, 255, 255, 0.06);
    --bp-surface-dark:      #0a0b10;

    --bp-surface-border:        rgba(255, 255, 255, 0.08);
    --bp-surface-border-strong: rgba(255, 255, 255, 0.16);
    --bp-surface-border-gloss:  rgba(255, 255, 255, 0.14);

    --bp-shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.4);
    --bp-shadow-card:  0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --bp-shadow-panel: 0 6px 18px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35);
    --bp-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);

    --bp-gloss-bg:        rgba(255, 255, 255, 0.06);
    --bp-gloss-highlight: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%);
}


/* =============================================================================
   SURFACE UTILITY-KLASSEN
   ========================================================================== */

.bp-surface-flat {
    background-color: var(--bp-surface-flat);
}
.bp-surface-soft {
    background-color: var(--bp-surface-soft);
}
.bp-surface-muted {
    background-color: var(--bp-surface-muted);
}
.bp-surface-elevated {
    background-color: var(--bp-surface-elevated);
}
.bp-surface-dark {
    background-color: var(--bp-surface-dark);
    color: #ffffff;
}

.bp-surface-glass {
    background-color: var(--bp-surface-glass);
    -webkit-backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
}

.bp-surface-gloss {
    background-color: var(--bp-surface-gloss);
    background-image: var(--bp-gloss-highlight);
    -webkit-backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    border: 1px solid var(--bp-surface-border-gloss);
}

/* Fallback fuer Browser ohne backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bp-surface-glass {
        background-color: rgba(255, 255, 255, 0.92);
    }
    .bp-surface-gloss {
        background-color: rgba(255, 255, 255, 0.95);
    }
}


/* =============================================================================
   ELEVATION UTILITY-KLASSEN
   ========================================================================== */

.bp-elevation-none  { box-shadow: var(--bp-shadow-none); }
.bp-elevation-soft  { box-shadow: var(--bp-shadow-soft); }
.bp-elevation-card  { box-shadow: var(--bp-shadow-card); }
.bp-elevation-panel { box-shadow: var(--bp-shadow-panel); }
.bp-elevation-float { box-shadow: var(--bp-shadow-float); }


/* =============================================================================
   CARD-KOMPONENTE — D18 Basis + Modifier
   ========================================================================== */

.bp-card {
    /* Basis: ruhig, neutral, Box-Model safe. */
    box-sizing: border-box;
    background-color: var(--bp-surface-flat);
    border: 1px solid transparent;
    border-radius: var(--bp-radius-card);
    padding: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.bp-card--flat {
    background-color: var(--bp-surface-flat);
    box-shadow: var(--bp-shadow-none);
}

.bp-card--soft {
    background-color: var(--bp-surface-soft);
    box-shadow: var(--bp-shadow-soft);
}

.bp-card--bordered {
    background-color: var(--bp-surface-flat);
    border: 1px solid var(--bp-surface-border);
    box-shadow: var(--bp-shadow-none);
}

.bp-card--minimal {
    background-color: transparent;
    border: 1px solid var(--bp-surface-border);
    box-shadow: var(--bp-shadow-none);
    padding: 1rem;
}

.bp-card--glass {
    background-color: var(--bp-surface-glass);
    -webkit-backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    border: 1px solid var(--bp-surface-border-gloss);
    box-shadow: var(--bp-shadow-soft);
}

.bp-card--gloss {
    background-color: var(--bp-surface-gloss);
    background-image: var(--bp-gloss-highlight);
    -webkit-backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    border: 1px solid var(--bp-surface-border-gloss);
    box-shadow: var(--bp-shadow-soft);
}

/* Card-Hover: nur leichter Lift, kein Inner-Element-Jitter */
.bp-card:hover,
.bp-card--soft:hover,
.bp-card--bordered:hover,
.bp-card--glass:hover,
.bp-card--gloss:hover {
    transform: translateY(-2px);
    box-shadow: var(--bp-shadow-card);
}
.bp-card--flat:hover,
.bp-card--minimal:hover {
    transform: translateY(-1px);
    box-shadow: var(--bp-shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
    .bp-card,
    .bp-card:hover,
    .bp-card--flat:hover,
    .bp-card--soft:hover,
    .bp-card--bordered:hover,
    .bp-card--minimal:hover,
    .bp-card--glass:hover,
    .bp-card--gloss:hover {
        transform: none;
        transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }
}

/* Fallback fuer Glass/Gloss-Cards ohne backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bp-card--glass { background-color: rgba(255, 255, 255, 0.92); }
    .bp-card--gloss { background-color: rgba(255, 255, 255, 0.95); }
}


/* =============================================================================
   PANEL-KOMPONENTE
   ========================================================================== */

.bp-panel {
    box-sizing: border-box;
    background-color: var(--bp-surface-flat);
    border: 1px solid var(--bp-surface-border);
    border-radius: var(--bp-radius-panel);
    padding: 1.75rem;
    box-shadow: var(--bp-shadow-soft);
}

.bp-panel--soft {
    background-color: var(--bp-surface-soft);
    border-color: transparent;
    box-shadow: var(--bp-shadow-none);
}

.bp-panel--glass {
    background-color: var(--bp-surface-glass);
    -webkit-backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    border-color: var(--bp-surface-border-gloss);
    box-shadow: var(--bp-shadow-soft);
}

.bp-panel--gloss {
    background-color: var(--bp-surface-gloss);
    background-image: var(--bp-gloss-highlight);
    -webkit-backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    border-color: var(--bp-surface-border-gloss);
    box-shadow: var(--bp-shadow-soft);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bp-panel--glass { background-color: rgba(255, 255, 255, 0.92); }
    .bp-panel--gloss { background-color: rgba(255, 255, 255, 0.95); }
}


/* =============================================================================
   D19.1 — SECTION PANEL
   =============================================================================
   Inner Visual Panel innerhalb .section-inner. Wird gerendert wenn
   section_surface_target = 'panel' (Default) UND mindestens eine D19-Achse
   ungleich 'default'. Begrenzung via max-width auf Container-Breite, damit
   Gloss/Glass/Surface nicht ueber die ganze Browserbreite laeuft.

   D19-Modifier (.bp-card--*, .bp-surface-*, .bp-elevation-*) werden auf
   diesem Element kombiniert — gleiche Token-Bindung wie Section-Wrapper.
   ========================================================================== */

.bp-section-panel {
    position: relative;
    width: 100%;
    /* Container-Width via Foundation-Token --container-max. Wird per Section
       vom Renderer dynamisch gesetzt (container/container-1400/1600/1920/custom),
       sodass das Panel automatisch der gewaehlten Container-Breite folgt.
       Foundation-Default: 1200px (definiert in foundation-xy-grid.css :root). */
    max-width: var(--container-max, 1200px);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--bp-radius-panel);
    box-sizing: border-box;
}

/* container-fluid: section nutzt .grid-container-fluid → Panel folgt full-width.
   Markup-Struktur: <section> > .section-inner > .bp-section-panel > .grid-container-fluid.
   Detection ueber das Vorhandensein eines fluid-Containers im Panel-Subtree. */
.bp-section-panel:has(> .grid-container-fluid),
.bp-section-panel--fluid {
    max-width: 100%;
}

/* Padding nur fuer aktive Visual-States — verhindert doppelte Section-Padding.
   Section-Padding (padding_top/padding_bottom) lebt am <section>-Wrapper,
   Panel-Padding lebt nur INNEN am Panel.
   D19.3 — neue Panel-Style-Modifier (bp-section-panel--*) ergaenzt. Alte
   Modifier-Form (bp-surface-*, bp-elevation-*, bp-card--*) bleibt als
   Legacy-Pfad. */
.bp-section-panel.bp-surface-flat,
.bp-section-panel.bp-surface-soft,
.bp-section-panel.bp-surface-glass,
.bp-section-panel.bp-surface-gloss,
.bp-section-panel.bp-surface-dark,
.bp-section-panel.bp-elevation-soft,
.bp-section-panel.bp-elevation-card,
.bp-section-panel.bp-elevation-panel,
.bp-section-panel.bp-elevation-float,
.bp-section-panel.bp-card--soft,
.bp-section-panel.bp-card--gloss,
.bp-section-panel.bp-card--minimal,
.bp-section-panel.bp-card--bordered,
.bp-section-panel--soft,
.bp-section-panel--gloss,
.bp-section-panel--glass,
.bp-section-panel--dark {
    padding: var(--bp-panel-padding, clamp(1.5rem, 4vw, 3rem));
}

/* D19.3 — Panel-Style-Modifier (neue Achse) ─────────────────────────── */
.bp-section-panel--soft {
    background-color: var(--bp-surface-soft);
    border: 1px solid var(--bp-surface-border);
}
.bp-section-panel--gloss {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68));
    border: 1px solid rgba(255, 255, 255, 0.85);
}
.bp-section-panel--glass {
    background-color: var(--bp-surface-glass);
    border: 1px solid var(--bp-surface-border-gloss);
    -webkit-backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
    backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
}
.bp-section-panel--dark {
    background-color: var(--bp-surface-dark);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bp-section-panel--glass {
        background-color: rgba(255, 255, 255, 0.92);
    }
}

/* Bei Target=panel sitzt der Foundation-Container INNERHALB des Panels.
   Damit Inhalt nicht doppelt eingerueckt wird (Panel-Padding + Container-Padding),
   Container-Padding innerhalb eines Panels auf 0 reduzieren. Width des Containers
   wird durch das Panel begrenzt. */
.bp-section-panel > .grid-container,
.bp-section-panel > .grid-container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}


/* =============================================================================
   COMPONENT-HARMONIZATION (Teil 4b)
   =============================================================================
   Bestehende Plugin-Blocks bekommen sanfte D18-Defaults aufgesattelt.
   Pattern: hoehere Spezifitaet als Plugin-Default, aber sehr zurueckhaltend.
   Kein automatisches Gloss — User opt-in via Modifier-Klasse.
   ========================================================================== */

/* ─── Feature Items (bbl_features) ─────────────────────────────────────── */
.bbl-feature-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bbl-features--surface-card .bbl-feature-item,
.bbl-features--surface-raised .bbl-feature-item {
    border: 1px solid var(--bp-surface-border);
    border-radius: var(--bbl-feat-card-radius, var(--bp-radius-card));
}
.bbl-features--surface-card .bbl-feature-item:hover,
.bbl-features--surface-raised .bbl-feature-item:hover {
    /* Bestehender translateY(-4px) bleibt — wir setzen nur ruhigeren Shadow */
    box-shadow: var(--bbl-feat-card-shadow-hover, var(--bp-shadow-card));
    border-color: var(--bp-surface-border-strong);
}

/* ─── Pricing Cards — editorial/ruhig statt WP-Builder-Look ───────────── */
.bbl-pricing-card {
    /* Zusaetzliche dezente Border + sauberer Radius — falls Plugin-Token = 0 */
    border: 1px solid var(--bp-surface-border);
    border-radius: var(--bbl-price-radius, var(--bp-radius-card));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bbl-pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bbl-price-shadow, var(--bp-shadow-card));
    border-color: var(--bp-surface-border-strong);
}
.bbl-pricing-card.is-featured {
    /* Featured-Hervorhebung: ruhiger als Plugin-Default (scale 1.04 bleibt) */
    border-color: var(--bp-surface-border-strong);
    box-shadow: var(--bbl-price-shadow, var(--bp-shadow-panel));
}
.bbl-pricing-card.is-featured:hover {
    /* Nicht zusaetzlich liften (sonst Doppelbewegung mit scale) */
    transform: scale(1.04);
    box-shadow: var(--bbl-price-shadow, var(--bp-shadow-float));
}

/* ─── Integrations / Partner-Grid ─────────────────────────────────────── */
.bbl-integrations--surface-card .bbl-integration-item {
    border: 1px solid var(--bp-surface-border);
    border-radius: var(--bbl-integration-radius, var(--bp-radius-card));
}
.bbl-integrations--surface-card a.bbl-integration-item.is-linked:hover {
    border-color: var(--bp-surface-border-strong);
    box-shadow: var(--bbl-integration-shadow-hover, var(--bp-shadow-soft));
}

/* ─── Stat Cards ──────────────────────────────────────────────────────── */
.bbl-stat-card {
    border: 1px solid var(--bp-surface-border);
}

/* ─── CTA Surface Cards ──────────────────────────────────────────────── */
.bbl-cta--surface-card {
    border: 1px solid var(--bp-surface-border);
    border-radius: var(--bbl-cta-radius, var(--bp-radius-panel));
}
.bbl-cta--surface-raised {
    /* Plugin nutzt --token-shadow-md — wir senken auf bp-shadow-panel */
    box-shadow: var(--bbl-cta-shadow, var(--bp-shadow-panel));
}

/* ─── WooCommerce Product Card — KEINE D18/D19 Harmonization ──────────
   D19.3 Regression-Fix: WooCommerce Product Cards (.bp-product-card) sind
   ein eigener Commerce-Layer. Sie werden EXKLUSIV ueber den Plugin-CSS-
   Layer gestyled:
     - inc/woocommerce/css/product-card.css      (NEVER-TOUCH)
     - inc/woocommerce/css/woocommerce-system.css (NEVER-TOUCH)

   Pre-D19.3 (v1.19.12 → v1.19.17) hatten wir hier ein defensives Layer
   mit border-radius:var(--bp-radius-card) + hover-translateY(-2px) + Shadow.
   Das hat Shop-Archive-Cards unbeabsichtigt veraendert (Rundung, Lift).
   Komplett entfernt. WENN ein expliziter Commerce-Card-Style (z.B.
   shop_card_style oder product_card_style) eingefuehrt wird, kommt der
   in einer eigenen Plugin-CSS-Datei, NICHT hier.

   ACCEPTANCE: Shop-Archive/Single-Related sehen wieder exakt aus wie vor
   D18. section_card_style hat KEINEN Effekt auf .bp-product-card.
   ────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .bbl-feature-item,
    .bbl-feature-item:hover,
    .bbl-pricing-card,
    .bbl-pricing-card:hover,
    .bbl-pricing-card.is-featured,
    .bbl-pricing-card.is-featured:hover {
        transform: none;
    }
}


/* =============================================================================
   D19.2 — CARD STYLE PROPAGATION TO REAL CHILD CARDS
   =============================================================================
   section_card_style wird ueber .bp-card-context--<style> am Section-Wrapper
   propagiert und stylet echte Card-Elemente in der Section:

     .bbl-feature-item       Feature-Items
     .bbl-pricing-card       Pricing-Cards
     .bbl-integration-item   Integrations
     .bbl-testimonial-card   Testimonials (forward-compat)
     .bbl-team-card          Team-Cards (forward-compat)
     .bbl-post-card          Post-Cards (forward-compat)
     .bp-card                Generic Card

   .bp-product-card wird AUSDRUECKLICH NICHT BERUEHRT (D19.3 — Commerce-Layer-
   Trennung). WooCommerce Product Cards laufen exklusiv ueber den Plugin-CSS-
   Stack (inc/woocommerce/css/product-card.css, NEVER-TOUCH). Wenn ein
   expliziter Commerce-Card-Style noetig wird (shop_card_style /
   product_card_style), kommt der dort hin, nicht hier.

   Card-Styles bleiben token-gebunden, Hover dezent (kein Lift bei minimal/
   bordered, soft Lift bei soft/gloss). prefers-reduced-motion neutralisiert.
   ========================================================================== */

/* Shared Selector-List als CSS-Var-Vehikel — zentrale Pflege.
   Hinweis: CSS hat kein "Selektor-include", daher Wiederholung pro Variant. */

/* ─── Soft ─────────────────────────────────────────────────────────────── */
.bp-card-context--soft .bbl-feature-item,
.bp-card-context--soft .bbl-pricing-card,
.bp-card-context--soft .bbl-integration-item,
.bp-card-context--soft .bbl-testimonial-card,
.bp-card-context--soft .bbl-team-card,
.bp-card-context--soft .bbl-post-card,
.bp-card-context--soft .bp-card:not(.bp-product-card) {
    background-color: var(--bp-surface-soft);
    border: 1px solid var(--bp-surface-border);
    border-radius: var(--bp-radius-card);
    box-shadow: var(--bp-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.bp-card-context--soft .bbl-feature-item:hover,
.bp-card-context--soft .bbl-pricing-card:hover,
.bp-card-context--soft .bbl-integration-item:hover,
.bp-card-context--soft .bbl-testimonial-card:hover,
.bp-card-context--soft .bbl-team-card:hover,
.bp-card-context--soft .bbl-post-card:hover,
.bp-card-context--soft .bp-card:not(.bp-product-card):hover {
    transform: translateY(-2px);
    box-shadow: var(--bp-shadow-card);
    border-color: var(--bp-surface-border-strong);
}

/* ─── Gloss (D19.3 — staerker, hochwertiger Look) ────────────────────────
   Sichtbares Glossy: weisses Gradient-Background, weisse Highlight-Border,
   weicher Schatten. Backdrop-filter nur als "kann"-Beigabe (Browser-Support).
   ::before liefert subtilen oberen Highlight-Streifen ueber positionierten Cards.
   .bp-card nutzt :not(.bp-product-card) — WooCommerce ist ausgeschlossen. */
.bp-card-context--gloss .bbl-feature-item,
.bp-card-context--gloss .bbl-pricing-card,
.bp-card-context--gloss .bbl-integration-item,
.bp-card-context--gloss .bbl-testimonial-card,
.bp-card-context--gloss .bbl-team-card,
.bp-card-context--gloss .bbl-post-card,
.bp-card-context--gloss .bp-card:not(.bp-product-card) {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72));
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--bp-radius-card);
    box-shadow: 0 14px 36px rgba(16, 24, 32, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}
/* Subtiler Highlight-Streifen am oberen Rand */
.bp-card-context--gloss .bbl-feature-item::before,
.bp-card-context--gloss .bbl-pricing-card::before,
.bp-card-context--gloss .bbl-integration-item::before,
.bp-card-context--gloss .bbl-testimonial-card::before,
.bp-card-context--gloss .bbl-team-card::before,
.bp-card-context--gloss .bbl-post-card::before,
.bp-card-context--gloss .bp-card:not(.bp-product-card)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 1;
}
.bp-card-context--gloss .bbl-feature-item:hover,
.bp-card-context--gloss .bbl-pricing-card:hover,
.bp-card-context--gloss .bbl-integration-item:hover,
.bp-card-context--gloss .bbl-testimonial-card:hover,
.bp-card-context--gloss .bbl-team-card:hover,
.bp-card-context--gloss .bbl-post-card:hover,
.bp-card-context--gloss .bp-card:not(.bp-product-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(16, 24, 32, 0.12);
}

/* @supports-Fallback fuer Browser ohne Gradient-Support (sehr selten) ist
   nicht noetig — linear-gradient ist baseline. */

/* ─── Minimal ──────────────────────────────────────────────────────────── */
/* Sehr zurueckhaltend: weder Background noch Shadow, nur dezente Border. */
.bp-card-context--minimal .bbl-feature-item,
.bp-card-context--minimal .bbl-pricing-card,
.bp-card-context--minimal .bbl-integration-item,
.bp-card-context--minimal .bbl-testimonial-card,
.bp-card-context--minimal .bbl-team-card,
.bp-card-context--minimal .bbl-post-card,
.bp-card-context--minimal .bp-card:not(.bp-product-card) {
    background-color: transparent;
    border: 1px solid var(--bp-surface-border);
    border-radius: var(--bp-radius-card);
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.bp-card-context--minimal .bbl-feature-item:hover,
.bp-card-context--minimal .bbl-pricing-card:hover,
.bp-card-context--minimal .bbl-integration-item:hover,
.bp-card-context--minimal .bbl-testimonial-card:hover,
.bp-card-context--minimal .bbl-team-card:hover,
.bp-card-context--minimal .bbl-post-card:hover,
.bp-card-context--minimal .bp-card:not(.bp-product-card):hover {
    border-color: var(--bp-surface-border-strong);
    background-color: var(--bp-surface-soft);
}

/* ─── Bordered ─────────────────────────────────────────────────────────── */
/* Klare Border-Definition, neutraler Background, kein Shadow. */
.bp-card-context--bordered .bbl-feature-item,
.bp-card-context--bordered .bbl-pricing-card,
.bp-card-context--bordered .bbl-integration-item,
.bp-card-context--bordered .bbl-testimonial-card,
.bp-card-context--bordered .bbl-team-card,
.bp-card-context--bordered .bbl-post-card,
.bp-card-context--bordered .bp-card:not(.bp-product-card) {
    background-color: var(--bp-surface-elevated);
    border: 2px solid var(--bp-surface-border-strong);
    border-radius: var(--bp-radius-card);
    box-shadow: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.bp-card-context--bordered .bbl-feature-item:hover,
.bp-card-context--bordered .bbl-pricing-card:hover,
.bp-card-context--bordered .bbl-integration-item:hover,
.bp-card-context--bordered .bbl-testimonial-card:hover,
.bp-card-context--bordered .bbl-team-card:hover,
.bp-card-context--bordered .bbl-post-card:hover,
.bp-card-context--bordered .bp-card:not(.bp-product-card):hover {
    transform: translateY(-1px);
    border-color: var(--color-primary, var(--bp-surface-border-strong));
}

/* ─── WooCommerce Product Card — NICHT BERUEHRT ───────────────────────
   D19.3 Regression-Fix: D19.2 hatte hier ein "defensives" Hover/Transition-
   Layer fuer .bp-product-card im Card-Context. Das verletzt die Trennung
   Commerce-Layer vs. Section-Card-System. KOMPLETT ENTFERNT — section_card_style
   hat KEINEN Effekt auf WooCommerce Product Cards. Wenn ein expliziter
   shop_card_style oder product_card_style eingefuehrt wird, sitzt der in
   einer eigenen Datei (inc/woocommerce/css/…), nicht hier.
   ────────────────────────────────────────────────────────────────────── */

/* ─── Reduced Motion — Card-Context neutralisieren (nur Section-Cards) ── */
@media (prefers-reduced-motion: reduce) {
    .bp-card-context--soft .bbl-feature-item,
    .bp-card-context--soft .bbl-pricing-card,
    .bp-card-context--soft .bbl-integration-item,
    .bp-card-context--soft .bbl-testimonial-card,
    .bp-card-context--soft .bbl-team-card,
    .bp-card-context--soft .bbl-post-card,
    .bp-card-context--soft .bp-card:not(.bp-product-card),
    .bp-card-context--gloss .bbl-feature-item,
    .bp-card-context--gloss .bbl-pricing-card,
    .bp-card-context--gloss .bbl-integration-item,
    .bp-card-context--gloss .bbl-testimonial-card,
    .bp-card-context--gloss .bbl-team-card,
    .bp-card-context--gloss .bbl-post-card,
    .bp-card-context--gloss .bp-card,
    .bp-card-context--bordered .bbl-feature-item,
    .bp-card-context--bordered .bbl-pricing-card,
    .bp-card-context--bordered .bbl-integration-item,
    .bp-card-context--bordered .bbl-testimonial-card,
    .bp-card-context--bordered .bbl-team-card,
    .bp-card-context--bordered .bbl-post-card,
    .bp-card-context--bordered .bp-card:not(.bp-product-card) {
        transform: none !important;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }
}


/* =============================================================================
   FILTER: prefers-color-scheme als zusaetzliche Auto-Detection
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bp-surface-glass: rgba(20, 22, 30, 0.55);
    }
}