/* ═══════════════════════════════════════════════
   BCS PORTFOLIO PLUGIN — Elementor Widgets CSS
   v2.6.0 — 8 Widgets: Portfolio + Image Strip + Testimonials + Intro Header + Testimonial Header + Section Intro + About + Page Closing
   v2.6.0: Typo-Norm via :root Custom Properties + Elliot-Filler-Karten
   ═══════════════════════════════════════════════ */

/* ─── TYPO-NORM v2.6.0 — über alle Widgets identisch ─── */
:root {
    --bcs-fz-h1:       clamp(40px, 6vw, 72px);
    --bcs-fz-h2:       clamp(28px, 4vw, 44px);
    --bcs-fz-overline: clamp(17px, 1.6vw, 20px);  /* +2px ggü. Body — gold-italic */
    --bcs-fz-body:     clamp(15px, 1.4vw, 18px);
    --bcs-fz-quote:    clamp(16px, 1.5vw, 19px);
    --bcs-fz-caption:  clamp(14px, 1.2vw, 16px);
}
/* Mobile-Override — Schriften auf Handy NICHT schrumpfen, sondern leicht vergrößern */
@media (max-width: 680px) {
    :root {
        --bcs-fz-h1:       clamp(34px, 8vw, 48px);
        --bcs-fz-h2:       clamp(26px, 7vw, 36px);
        --bcs-fz-overline: 19px;
        --bcs-fz-body:     17px;
        --bcs-fz-quote:    18px;
        --bcs-fz-caption:  16px;
    }
}

/* ── BCS-CI v2026.8 Token (Single Source of Truth = bcs-ci.json) ── */
.bcs-pg {
    --bcs-cream: #FBF9F7;
    --bcs-cream-warm: #E8E5DD;
    --bcs-meissen: #0F3460;
    --bcs-nacht-indigo: #1B2A6B;
    --bcs-tiefes-indigo: #0F1E4A;
    --bcs-meissen-kobalt: #0047AB;
    --bcs-gold: #C9A962;
    --bcs-text: #1A1A1A;
    --bcs-text-sec: #4A4A4D;
    --bcs-text-light: #666666;
    --bcs-dark: #0A0A0A;
    /* CI v2026.8: Border-Radius IMMER 0 (eckig = präzise) */
    --bcs-radius: 0;
    --bcs-pg-column-gap: 6px;
    --bcs-pg-row-gap: var(--bcs-pg-column-gap);
    /* v1.7.2: Abstand zwischen Filter-Leiste und Galerie (per Slider einstellbar) */
    --bcs-pg-filter-gallery-gap: 36px;
    --bcs-font-hl: 'Rajdhani', sans-serif;
    --bcs-font-tag: 'EB Garamond', serif;
    --bcs-font-body: 'Open Sans', sans-serif;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════ */
/* v1.7.2: Padding-Bottom (für Top-Filter) bzw. Padding-Top (für Bottom-Filter) sind per
   --bcs-pg-filter-gallery-gap einstellbar (Slider im Layout-Tab). */
.bcs-pg .bcs-pg-filter-bar {
    display: flex !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 40px 0 var(--bcs-pg-filter-gallery-gap, 36px) !important;
    flex-wrap: wrap !important;
}

/* Bottom filter bar variant: padding gespiegelt */
.bcs-pg .bcs-pg-filter-bar[data-filter-instance="bottom"] {
    padding: var(--bcs-pg-filter-gallery-gap, 36px) 0 40px !important;
}

/* Base button — override ALL theme button styles */
.bcs-pg .bcs-pg-filter-bar button.bcs-pg-fbtn,
.bcs-pg button.bcs-pg-fbtn {
    font-family: var(--bcs-font-hl) !important;
    font-weight: 600 !important;
    font-size: clamp(11px, 1.1vw, 13px) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 8px 18px !important;
    border-radius: var(--bcs-radius) !important;
    color: var(--bcs-text-light) !important;
    transition: color 0.3s, background-color 0.3s !important;
    position: relative !important;
    cursor: pointer !important;
    border: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* Hover: text turns Meissen-Kobalt (CI v2026.8: Hover-States = Kobalt) */
.bcs-pg .bcs-pg-filter-bar button.bcs-pg-fbtn:hover,
.bcs-pg button.bcs-pg-fbtn:hover,
.bcs-pg .bcs-pg-filter-bar button.bcs-pg-fbtn:focus,
.bcs-pg button.bcs-pg-fbtn:focus,
.bcs-pg .bcs-pg-filter-bar button.bcs-pg-fbtn:active,
.bcs-pg button.bcs-pg-fbtn:active {
    color: var(--bcs-meissen-kobalt) !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ACTIVE state — Meissen-Kobalt background, Cream text (CI v2026.8: CTA = Kobalt) */
.bcs-pg .bcs-pg-filter-bar button.bcs-pg-fbtn.active,
.bcs-pg button.bcs-pg-fbtn.active,
.bcs-pg button.bcs-pg-fbtn.active:hover,
.bcs-pg button.bcs-pg-fbtn.active:focus,
.bcs-pg button.bcs-pg-fbtn.active:active {
    background-color: var(--bcs-meissen-kobalt) !important;
    background-image: none !important;
    color: var(--bcs-cream) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Thin vertical category-colored separators between filter buttons */
.bcs-pg button.bcs-pg-fbtn + button.bcs-pg-fbtn {
    margin-left: 24px !important;
}

.bcs-pg button.bcs-pg-fbtn + button.bcs-pg-fbtn::before {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 14px !important;
    border-radius: 1px !important;
    background: var(--bcs-cat-color, var(--bcs-meissen-kobalt)) !important;
    opacity: 0.95 !important;
}

/* ═══════════════════════════════════════════════
   MASONRY GRID
   ═══════════════════════════════════════════════ */
.bcs-pg .bcs-pg-masonry {
    column-count: 3;
    column-gap: var(--bcs-pg-column-gap);
    max-width: 1480px;
    margin: 0 auto;
}

/* v2.9.8: Portfolio-Mobile-Halbierung entfernt — alle Kacheln werden mobil gezeigt.
   Testimonials-Halbierung bleibt aktiv (eigene Logik in JS). */
.bcs-testimonial-mobile-half-hidden {
    display: none !important;
}

/* v2.8.23: Bear-Kreis-Filler fuer leere Spalten am unteren Mobile-Ende.
   Cream-warm Karte mit Goldkreis-Outline + zentriertem Baeren-Logo.
   Stil analog zu .bcs-strip-filler. */
/* v2.9.13: Bear-Filler auf Mobile (≤768px) hart ausblenden — JS-Belt-and-suspenders. */
@media (max-width: 768px) {
    .bcs-pg .bcs-pg-filler { display: none !important; }
}
.bcs-pg .bcs-pg-filler {
    position: relative;
    background: var(--bcs-cream-warm, #E8E5DD);
    border-radius: 0;
    box-shadow: 0 4px 18px -4px rgba(15, 52, 96, 0.10);
    border: 1px solid rgba(10, 31, 60, 0.06);
    pointer-events: none;
}
.bcs-pg .bcs-pg-filler__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid rgba(201, 169, 98, 0.45);
    pointer-events: none;
}
.bcs-pg .bcs-pg-filler__bear {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36%;
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    object-fit: contain;
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.bcs-pg.bcs-pg-js-masonry .bcs-pg-masonry {
    column-count: auto !important;
    column-gap: 0 !important;
    position: relative !important;
}

.bcs-pg .bcs-pg-item {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 var(--bcs-pg-row-gap);
    position: relative;
    overflow: hidden;
    border-radius: var(--bcs-radius);
    cursor: pointer;
    background: #d5d1cb;
    opacity: 0;
    transform: translateY(14px);
    animation: bcs-pg-fadeIn 0.4s ease-out forwards;
}

.bcs-pg.bcs-pg-js-masonry .bcs-pg-item {
    position: absolute !important;
    display: block;
    margin: 0 !important;
}

@keyframes bcs-pg-fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bcs-pg .bcs-pg-item img {
    width: 100% !important;
    display: block !important;
    transition: none !important;
    box-shadow: 0 0 0 0 transparent !important;
    transform: none !important;
}

.bcs-pg .bcs-pg-item:hover img {
    transform: none !important;
}

/* Category accent bar on left */
.bcs-pg .bcs-pg-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.35s;
}

/* v1.4.4: Cat-Color-Bar wird auch im Hover nicht mehr eingeblendet —
   das Inner-Frame in .bcs-pg-info ist jetzt das einzige Hover-Signal. */
.bcs-pg .bcs-pg-item:hover::before {
    opacity: 0;
}

/* v1.4.3: Linie am Rand entfaellt — der Rahmen sitzt jetzt INNEN auf .bcs-pg-info::before */
.bcs-pg .bcs-pg-item:hover {
    box-shadow: none !important;
}

/* v1.4.13: Hover-Overlay default in Kobalt (CTA-Farbe). Marker-Kategorien (Shop/Digital)
   ueberschreiben --bcs-overlay-color per Inline-Style auf ihre Cat-Farbe (z.B. Meissen-Rot).
   Damit ist alles regulaere blau wie es war, nur Shop-Items leuchten rot. */
.bcs-pg .bcs-pg-info {
    position: absolute;
    inset: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: color-mix(in srgb, var(--bcs-overlay-color, #0047AB) 88%, transparent);
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: 2;
    pointer-events: none;
}

/* v1.4.12: Innerer Rahmen entfernt — die Cat-Farbe der Flaeche ist jetzt das einzige Hover-Signal. */

.bcs-pg .bcs-pg-item:hover .bcs-pg-info {
    opacity: 1 !important;
}

.bcs-pg .bcs-pg-info h3 {
    font-family: var(--bcs-font-hl) !important;
    font-weight: 700 !important;
    /* v1.4.3: +4px ueber alle Breakpoints */
    font-size: clamp(17px, 1.7vw, 21px) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--bcs-cream) !important;
    margin: 0 !important;
    transform: translateY(4px);
    transition: transform 0.35s;
}

.bcs-pg .bcs-pg-item:hover .bcs-pg-info h3 {
    transform: translateY(0);
}

/* v1.4.14: Client-Text — Default Gold (CI font_mixing.color_rules.on_dark).
   Bei Marker-Kategorien wechselt --bcs-client-color auf Meissen-Blau (Kontrast auf Rot). */
.bcs-pg .bcs-pg-client {
    font-family: var(--bcs-font-tag) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    font-size: clamp(15px, 1.35vw, 18px) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--bcs-client-color, var(--bcs-gold)) !important;
    display: block !important;
    transform: translateY(4px);
    transition: transform 0.35s 0.03s;
}

.bcs-pg .bcs-pg-item:hover .bcs-pg-client {
    transform: translateY(0);
}

/* Play badge for videos */
.bcs-pg .bcs-pg-play {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: rgba(10, 10, 10, 0.5) !important;
    border-radius: var(--bcs-radius) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.bcs-pg .bcs-pg-item:hover .bcs-pg-play {
    opacity: 0.85;
}

.bcs-pg .bcs-pg-play svg {
    width: 10px !important;
    height: 10px !important;
    fill: var(--bcs-cream) !important;
    margin-left: 1px;
}

/* Hidden state for filter */
.bcs-pg .bcs-pg-item.bcs-pg-hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════
   CHAOS LAYOUT (NEU v1.4.0)
   ═══════════════════════════════════════════════ */
.bcs-pg.bcs-pg-chaos.bcs-pg-js-masonry .bcs-pg-item {
    transition: none;
}

/* ═══════════════════════════════════════════════
   PROJECT DETAIL VIEW
   ═══════════════════════════════════════════════ */
.bcs-pg .bcs-pg-pv {
    position: fixed !important;
    inset: 0 !important;
    z-index: 800 !important;
    background: var(--bcs-cream) !important;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.bcs-pg .bcs-pg-pv.open {
    transform: translateY(0) !important;
}

/* CLOSE BUTTON — CI v2026.9 Exception "modal_close_buttons": Kreis erlaubt */
.bcs-pg .bcs-pg-pv button.bcs-pg-pv-close,
.bcs-pg button.bcs-pg-pv-close,
button.bcs-pg-pv-close {
    position: fixed !important;
    top: 18px !important;
    right: 24px !important;
    z-index: 810 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(250, 248, 245, 0.92) !important;
    background-image: none !important;
    border-radius: 50% !important;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
    cursor: pointer !important;
    border: 1.5px solid rgba(15, 52, 96, 0.22) !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: var(--bcs-meissen) !important;
}

.bcs-pg button.bcs-pg-pv-close:hover,
button.bcs-pg-pv-close:hover {
    background: rgba(250, 248, 245, 0.98) !important;
    color: var(--bcs-meissen-kobalt) !important;
    border-color: var(--bcs-meissen-kobalt) !important;
    opacity: 1 !important;
}

.bcs-pg button.bcs-pg-pv-close .bcs-pg-close-label,
button.bcs-pg-pv-close .bcs-pg-close-label {
    font-family: var(--bcs-font-hl) !important;
    font-weight: 700 !important;
    font-size: clamp(22px, 2vw, 28px) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════
   PREV / NEXT NAVIGATION
   ═══════════════════════════════════════════════ */
.bcs-pg .bcs-pg-pv-nav {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    align-self: flex-end !important;
    flex-shrink: 0 !important;
}

.bcs-pg button.bcs-pg-pv-prev,
.bcs-pg button.bcs-pg-pv-next {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid rgba(15, 52, 96, 0.22) !important;
    border-radius: var(--bcs-radius) !important;
    cursor: pointer !important;
    color: var(--bcs-meissen) !important;
    transition: border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

.bcs-pg button.bcs-pg-pv-prev:hover,
.bcs-pg button.bcs-pg-pv-next:hover {
    border-color: var(--bcs-meissen-kobalt) !important;
    color: var(--bcs-meissen-kobalt) !important;
    background: transparent !important;
}

.bcs-pg button.bcs-pg-pv-prev:disabled,
.bcs-pg button.bcs-pg-pv-next:disabled {
    opacity: 0.22 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.bcs-pg button.bcs-pg-pv-prev svg,
.bcs-pg button.bcs-pg-pv-next svg {
    width: 10px !important;
    height: 14px !important;
    display: block !important;
}

/* Project counter: "3 / 12" */
.bcs-pg .bcs-pg-pv-counter {
    font-family: var(--bcs-font-hl) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--bcs-text-light) !important;
    min-width: 52px !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════
   Detail View Header
   ═══════════════════════════════════════════════ */
.bcs-pg .bcs-pg-pv-header {
    padding: 96px 40px 48px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* v1.4.4: Title auf CI-h1 (2.5rem mobile / 4rem desktop) */
.bcs-pg .bcs-pg-pv-title {
    font-family: var(--bcs-font-hl) !important;
    font-weight: 700 !important;
    font-size: clamp(40px, 4.5vw, 64px) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--bcs-meissen) !important;
    line-height: 1.06 !important;
    margin: 0 0 24px !important;
}

.bcs-pg .bcs-pg-pv-meta {
    display: flex !important;
    gap: 48px !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

.bcs-pg .bcs-pg-pv-meta-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* v1.4.4: Meta-Label auf CI-Label-Spec (typography.hierarchy.label) */
.bcs-pg .bcs-pg-pv-meta-label {
    font-family: var(--bcs-font-hl) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--bcs-meissen-kobalt) !important;
}

.bcs-pg .bcs-pg-pv-meta-value {
    font-family: var(--bcs-font-hl) !important;
    font-weight: 500 !important;
    font-size: clamp(15px, 1.25vw, 19px) !important;
    letter-spacing: 0.3px !important;
    color: var(--bcs-text) !important;
}

/* v2.9.12: Korall-CTA-Link-Pille direkt unter der Description (eigene Zeile, prominenter) */
.bcs-pg .bcs-pg-pv-link-wrap {
    margin: 16px 0 8px !important;
    width: 100% !important;
}
.bcs-pg .bcs-pg-pv-link-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 26px !important;
    background: var(--pill-color, #D6453D) !important;
    color: #FBF9F7 !important;
    border-radius: 999px !important;
    font-family: var(--bcs-font-hl) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    line-height: 1 !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
    width: max-content !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
}
.bcs-pg .bcs-pg-pv-link-pill::after {
    content: "→" !important;
    font-weight: 700 !important;
    transition: transform .15s ease !important;
}
.bcs-pg .bcs-pg-pv-link-pill:hover,
.bcs-pg .bcs-pg-pv-link-pill:focus-visible {
    background: var(--pill-color, #D6453D) !important;
    color: #FBF9F7 !important;
    transform: translateY(-1px) !important;
    filter: brightness(0.92) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.24) !important;
}
.bcs-pg .bcs-pg-pv-link-pill:hover::after {
    transform: translateX(3px) !important;
}

/* v1.4.4: Description auf CI-body_large (1rem/1.125rem) */
.bcs-pg .bcs-pg-pv-description {
    font-family: var(--bcs-font-body) !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.15vw, 18px) !important;
    line-height: 1.6 !important;
    color: var(--bcs-text-sec) !important;
    margin: 20px 0 0 !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(15, 52, 96, 0.08) !important;
    max-width: 640px !important;
    white-space: pre-line !important;
}

/* ═══════════════════════════════════════════════
   VIDEO-CONTAINER (YouTube / Vimeo)
   ═══════════════════════════════════════════════ */
.bcs-pg .bcs-pg-pv-video {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 40px 32px !important;
    display: none;
}

.bcs-pg .bcs-pg-pv-video-inner {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: var(--bcs-radius) !important;
    background: var(--bcs-dark) !important;
}

.bcs-pg .bcs-pg-pv-video-inner iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: var(--bcs-radius) !important;
}

/* ═══════════════════════════════════════════════
   Gallery images in detail view
   ═══════════════════════════════════════════════ */
.bcs-pg .bcs-pg-pv-images {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 40px 80px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* v2.8.15: Hochformat-Bilder begrenzen sich auf max-height 80vh und zentrieren sich;
   Querformat füllt weiterhin die volle Container-Breite. */
.bcs-pg .bcs-pg-pv-images img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: var(--bcs-radius) !important;
    cursor: pointer !important;
    transition: box-shadow 0.3s ease !important;
    box-shadow: 0 0 0 0px transparent !important;
    opacity: 1 !important;
    transform: none !important;
}

.bcs-pg .bcs-pg-pv-images img:hover {
    box-shadow: 0 0 0 3px var(--bcs-gold) !important;
    opacity: 1 !important;
    transform: none !important;
}

.bcs-pg .bcs-pg-pv-images img[data-project-link] {
    cursor: pointer !important;
}

/* ═══════════════════════════════════════════════
   FULLSCREEN ZOOM
   ═══════════════════════════════════════════════ */
.bcs-pg .bcs-pg-fs {
    position: fixed !important;
    inset: 0 !important;
    z-index: 900 !important;
    /* v2.8.17: Lightbox-Hintergrund cream (statt schwarz) — durchgaengiges Branding */
    background: rgba(250, 248, 245, 0.97) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: zoom-out;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.bcs-pg .bcs-pg-fs.open {
    opacity: 1 !important;
    visibility: visible !important;
}

/* v2.8.11: Fullscreen-Stage — Bild + Branding in-flow; overflow hidden verhindert Überlauf */
.bcs-pg .bcs-pg-fs-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    max-width: 92vw !important;
    max-height: 92vh !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* v1.4.6: Bild hat IMMER Prioritaet — max 92vh wie vor dem Branding-Feature */
.bcs-pg .bcs-pg-fs-img {
    max-width: 92vw !important;
    max-height: 92vh !important;
    object-fit: contain !important;
    border-radius: var(--bcs-radius) !important;
    pointer-events: auto !important;
    cursor: zoom-out !important;
}

/* v2.8.11: Branding in-flow unter dem Bild — kein absolute mehr.
   Nur sichtbar wenn wirklich Platz da ist (Media Query unten). */
.bcs-pg .bcs-pg-fs-branding {
    display: none !important;
    text-align: center !important;
    /* v2.8.17: Branding-Farbe Meissen statt cream — passt zum hellen Hintergrund */
    color: var(--bcs-meissen) !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

/* v2.8.11: Bär kleiner */
.bcs-pg .bcs-pg-fs-bear {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    opacity: 0.7 !important;
    margin: 0 auto 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* v2.8.11: Text kleiner */
.bcs-pg .bcs-pg-fs-tagline {
    font-family: var(--bcs-font-tag) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    opacity: 0.7 !important;
    /* v2.8.17: Tagline-Farbe Meissen statt cream */
    color: var(--bcs-meissen) !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    text-transform: none !important;
}

/* v2.8.11: Branding nur wenn wirklich Platz — Threshold 980px Höhe (MacBook Pro 14"+, 1080p+).
   Bild bekommt reservierten Abstand (calc(92vh - 110px)), damit Bär + Tagline in-flow passen.
   Bei 980px: Bild max 793px + 20px gap + ~70px Branding = 883px < 92vh (902px). Passt immer. */
@media (min-width: 1280px) and (min-height: 980px) and (orientation: landscape) {
    .bcs-pg .bcs-pg-fs-img { max-height: calc(92vh - 110px) !important; }
    .bcs-pg .bcs-pg-fs-branding { display: block !important; }
}

/* Fullscreen close button — CI v2026.9 Exception "modal_close_buttons": Kreis erlaubt */
.bcs-pg .bcs-pg-fs button.bcs-pg-fs-close,
.bcs-pg button.bcs-pg-fs-close,
button.bcs-pg-fs-close {
    position: fixed !important;
    top: 18px !important;
    right: 24px !important;
    z-index: 910 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(8, 8, 8, 0.25) !important;
    background-image: none !important;
    border-radius: 50% !important;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

.bcs-pg button.bcs-pg-fs-close:hover,
button.bcs-pg-fs-close:hover {
    background: rgba(8, 8, 8, 0.4) !important;
    color: var(--bcs-cream) !important;
    border-color: var(--bcs-meissen-kobalt) !important;
}

.bcs-pg button.bcs-pg-fs-close .bcs-pg-close-label,
button.bcs-pg-fs-close .bcs-pg-close-label {
    font-family: var(--bcs-font-hl) !important;
    font-weight: 700 !important;
    font-size: clamp(22px, 2vw, 28px) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .bcs-pg .bcs-pg-filter-bar {
        padding: 32px 20px var(--bcs-pg-filter-gallery-gap, 28px) !important;
    }
    .bcs-pg .bcs-pg-filter-bar[data-filter-instance="bottom"] {
        padding: var(--bcs-pg-filter-gallery-gap, 28px) 20px 32px !important;
    }

    .bcs-pg .bcs-pg-pv-header {
        padding: 88px 28px 40px !important;
    }

    .bcs-pg .bcs-pg-pv-meta {
        gap: 32px !important;
    }

    .bcs-pg .bcs-pg-pv-video {
        padding: 0 28px 24px !important;
    }

    .bcs-pg .bcs-pg-pv-images {
        padding: 0 28px 60px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .bcs-pg .bcs-pg-filter-bar {
        padding: 24px 6px var(--bcs-pg-filter-gallery-gap, 20px) !important;
        gap: 3px !important;
    }
    .bcs-pg .bcs-pg-filter-bar[data-filter-instance="bottom"] {
        padding: var(--bcs-pg-filter-gallery-gap, 20px) 6px 24px !important;
    }

    .bcs-pg button.bcs-pg-fbtn {
        font-size: 10px !important;
        padding: 7px 12px !important;
    }

    .bcs-pg button.bcs-pg-fbtn + button.bcs-pg-fbtn {
        margin-left: 18px !important;
    }

    .bcs-pg button.bcs-pg-fbtn + button.bcs-pg-fbtn::before {
        left: -12px !important;
        width: 8px !important;
    }

    .bcs-pg .bcs-pg-info {
        padding: 22px !important;
    }
    .bcs-pg .bcs-pg-info::before {
        top: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
    }
    /* v2.9.8: Auf Mobile im Info-Overlay nur den Titel zeigen — Kunden-/Fließtext aus.
       Detail-Ansicht (.bcs-pg-pv-client) ist davon nicht betroffen. */
    .bcs-pg .bcs-pg-info .bcs-pg-client {
        display: none !important;
    }

    .bcs-pg .bcs-pg-pv-header {
        padding: 80px 10px 28px !important;
    }

    .bcs-pg .bcs-pg-pv-title {
        margin-bottom: 20px !important;
    }

    .bcs-pg .bcs-pg-pv-meta {
        gap: 20px !important;
    }

    .bcs-pg .bcs-pg-pv-video {
        padding: 0 10px 18px !important;
    }

    .bcs-pg .bcs-pg-pv-images {
        padding: 0 8px 48px !important;
        gap: 4px !important;
    }

    /* v2.8.22: Viewport-zentrierte Masonry — funktioniert egal wie viel Padding
       Elementor-Section/Column drumherum hat. Masonry exakt 100vw - 8px breit,
       per left:50% + translateX(-50%) zum Viewport zentriert. Innenrand 4px links/rechts. */
    .bcs-pg .bcs-pg-masonry {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
    }


    .bcs-pg .bcs-pg-pv-meta-label {
        font-size: 10px !important;
        letter-spacing: 1.8px !important;
    }

    .bcs-pg .bcs-pg-pv-meta-value {
        font-size: 15px !important;
    }

    .bcs-pg button.bcs-pg-pv-close,
    button.bcs-pg-pv-close,
    .bcs-pg button.bcs-pg-fs-close,
    button.bcs-pg-fs-close {
        top: 16px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .bcs-pg button.bcs-pg-pv-close .bcs-pg-close-label,
    button.bcs-pg-pv-close .bcs-pg-close-label,
    .bcs-pg button.bcs-pg-fs-close .bcs-pg-close-label,
    button.bcs-pg-fs-close .bcs-pg-close-label {
        font-size: 22px !important;
        letter-spacing: 0.5px !important;
    }

    .bcs-pg button.bcs-pg-pv-prev,
    .bcs-pg button.bcs-pg-pv-next {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .bcs-pg .bcs-pg-pv-counter {
        font-size: 11px !important;
        min-width: 44px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .bcs-pg .bcs-pg-filter-bar {
        padding: 20px 4px var(--bcs-pg-filter-gallery-gap, 16px) !important;
        gap: 2px !important;
    }
    .bcs-pg .bcs-pg-filter-bar[data-filter-instance="bottom"] {
        padding: var(--bcs-pg-filter-gallery-gap, 16px) 4px 20px !important;
    }

    .bcs-pg button.bcs-pg-fbtn {
        font-size: 9px !important;
        padding: 6px 10px !important;
        letter-spacing: 1.5px !important;
    }

    .bcs-pg button.bcs-pg-fbtn:not([data-f="all"]) {
        padding-left: 16px !important;
    }

    .bcs-pg .bcs-pg-pv-header {
        padding: 72px 8px 24px !important;
    }

    .bcs-pg .bcs-pg-pv-meta {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .bcs-pg .bcs-pg-pv-video {
        padding: 0 6px 14px !important;
    }

    .bcs-pg .bcs-pg-pv-images {
        padding: 0 6px 36px !important;
    }
}

/* ═══════════════════════════════════════════════
   BCS IMAGE STRIP WIDGET (NEU in v1.5.0)
   Editorial-Bilderstreifen mit Bär-Logo + vertikal versetzten Hochformat-Bildern.
   Auf Mobil 3-Spalten-Grid (oder 2/4 je nach Setting).
   ═══════════════════════════════════════════════ */
.bcs-strip {
    --bcs-strip-gap: 12px;
    --bcs-strip-amplitude: 90px;
    --bcs-strip-cols: 7;
    --bcs-strip-cols-mobile: 3;
    max-width: 1480px;
    margin: 0 auto;
    padding: 64px 32px;
    box-sizing: border-box;
}

/* v1.6.0: SPALTENBASIERTES Editorial-Masonry — jede Spalte ist eigene vertikale Saeule.
   Konstante Gaps innerhalb der Spalten, vertikaler Versatz zwischen den Spalten. */
.bcs-strip-cols {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--bcs-strip-gap) !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.bcs-strip-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--bcs-strip-gap) !important;
    /* Pro-Spalten Versatz: padding-top = amplitude * factor (0..1, inline gesetzt) */
    padding-top: calc(var(--bcs-strip-amplitude) * var(--col-offset-factor, 0)) !important;
}

.bcs-strip-item {
    aspect-ratio: var(--bcs-strip-aspect, 16 / 9);
    overflow: hidden !important;
    position: relative !important;
    transition: opacity 0.25s ease;
    margin: 0 !important;
}

/* v1.6.1: Logo-Variante A — schwebt absolut ueber der Spalte, nimmt KEINEN Flex-Slot weg.
   Damit verteilen sich alle Bilder gleichmaessig auf alle Spalten. */
.bcs-strip-col.has-logo {
    position: relative !important;
}

.bcs-strip-logo-cell.logo-variant-a {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 0 !important;
    background: transparent !important;
    /* z-index ueber Bildern, aber Klick durchlassen */
    z-index: 2 !important;
    pointer-events: none !important;
}
.bcs-strip-logo-cell.logo-variant-a .bcs-strip-logo {
    width: 56px !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 0.95 !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
}

/* Damit das Logo Platz hat, hat die Logo-Spalte (Variante A) ein min padding-top */
.bcs-strip-col.has-logo[data-logo-variant="a"],
.bcs-strip[data-logo-variant="a"] .bcs-strip-col.has-logo {
    padding-top: max(
        calc(var(--bcs-strip-amplitude) * var(--col-offset-factor, 0)),
        82px
    ) !important;
}

/* v2.7.3: Variante B — Logo-Card jetzt im selben Look wie die Elliot-Filler-Karten:
   Cream-Hintergrund, dünner Gold-Outline-Kreis, Bär zentriert. Einheitliche Bild-DNA
   über Image-Strip-Filler, Image-Strip-Logo-Header und Testimonial-Filler. */
.bcs-strip-logo-cell.logo-variant-b {
    position: relative;
    aspect-ratio: 1 / 1 !important;
    background: var(--cream-warm, #FBF9F7) !important;
    padding: 0 !important;
    border-radius: var(--r-card, 20px) !important;
    border: 1px solid rgba(10, 31, 60, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
/* Outline-Kreis — v2.8.13: 1/3 größer (64%→85%) */
.bcs-strip-logo-cell.logo-variant-b::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 169, 98, 0.45);
    pointer-events: none;
}
/* Logo-Bild — v2.8.13: 1/3 größer (32%→43%, max 128px) */
.bcs-strip-logo-cell.logo-variant-b .bcs-strip-logo {
    width: 43% !important;
    max-width: 128px !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 0.78;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(201, 169, 98, 0.22));
}

@media (max-width: 680px) {
    .bcs-strip-logo-cell.logo-variant-b .bcs-strip-logo {
        width: 48% !important;
    }
}

.bcs-strip-logo {
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.bcs-strip-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0;
}

.bcs-strip-item[data-action="lightbox"],
.bcs-strip-item[data-action="link"] {
    cursor: pointer;
}

.bcs-strip-item[data-action="lightbox"]:hover,
.bcs-strip-item[data-action="link"]:hover {
    opacity: 0.92;
}

.bcs-strip-caption {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: var(--bcs-font-body, 'Open Sans', sans-serif) !important;
    font-weight: 600 !important;
    font-size: var(--bcs-fz-caption) !important;
    letter-spacing: 0.04em !important;
    color: var(--bcs-cream, #FBF9F7) !important;
    pointer-events: none !important;
    text-transform: lowercase;
}
.bcs-strip-caption--shadow {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Mobile: Spalten brechen um zu 3 Spalten, Versatz aus, Logo-Card auf normale Card-Groesse */
@media (max-width: 768px) {
    .bcs-strip {
        padding: 40px 8px !important;
    }
    .bcs-strip-cols {
        flex-wrap: wrap !important;
    }
    .bcs-strip-col {
        flex: 0 0 calc((100% - 2 * var(--bcs-strip-gap)) / var(--bcs-strip-cols-mobile, 3)) !important;
        padding-top: 0 !important;
    }
}

/* Sehr klein — 2 Spalten */
@media (max-width: 480px) {
    .bcs-strip-col {
        flex: 0 0 calc((100% - var(--bcs-strip-gap)) / 2) !important;
    }
    /* v2.8.16: Bär-Filler allein in letzter Zeile → volle Breite (schließt die Lücke) */
    .bcs-strip-col--filler-only:last-child:nth-child(odd) {
        flex: 0 0 100% !important;
    }
}

/* Lightbox — minimal, eigene Klasse damit nicht mit Portfolio-FS kollidiert */
.bcs-strip-fs {
    position: fixed !important;
    inset: 0 !important;
    z-index: 900 !important;
    background: rgba(8, 8, 8, 0.97) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: zoom-out;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.bcs-strip-fs.open {
    opacity: 1 !important;
    visibility: visible !important;
}

.bcs-strip-fs-img {
    max-width: 92vw !important;
    max-height: 92vh !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

/* Close-Button: rund (CI v2026.9 modal_close_buttons-Exception) */
.bcs-strip-fs button.bcs-strip-fs-close,
button.bcs-strip-fs-close {
    position: fixed !important;
    top: 18px !important;
    right: 24px !important;
    z-index: 910 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(8, 8, 8, 0.25) !important;
    background-image: none !important;
    border-radius: 50% !important;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

button.bcs-strip-fs-close:hover {
    background: rgba(8, 8, 8, 0.4) !important;
    color: var(--bcs-cream, #FBF9F7) !important;
    border-color: var(--bcs-meissen-kobalt, #0047AB) !important;
}

/* ═══════════════════════════════════════════════
   v1.7.0 — CI Soft-Shadow für ALLE Widgets
   Meissen-Blau-getönt, subtil, brand-konsistent.
   ═══════════════════════════════════════════════ */

/* Portfolio-Gallery-Items */
.bcs-pg .bcs-pg-item {
    box-shadow: 0 4px 18px -4px rgba(15, 52, 96, 0.10), 0 1px 3px rgba(15, 52, 96, 0.06);
}

/* Image-Strip-Items */
.bcs-strip-item {
    box-shadow: 0 4px 18px -4px rgba(15, 52, 96, 0.10), 0 1px 3px rgba(15, 52, 96, 0.06);
}

/* Image-Strip Logo-Card (Variante B) */
.bcs-strip-logo-cell.logo-variant-b {
    box-shadow: 0 4px 18px -4px rgba(15, 52, 96, 0.10), 0 1px 3px rgba(15, 52, 96, 0.06);
}

/* ═══════════════════════════════════════════════
   BCS TESTIMONIALS WIDGET (NEU v1.7.0)
   ═══════════════════════════════════════════════ */
.bcs-testimonials {
    --bcs-test-gap: 24px;
    --bcs-test-amplitude: 70px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 64px 32px;
    box-sizing: border-box;
}

.bcs-testimonials-cols {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--bcs-test-gap) !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.bcs-testimonials-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--bcs-test-gap) !important;
    padding-top: calc(var(--bcs-test-amplitude) * var(--col-offset-factor, 0)) !important;
}

/* Testimonial-Card — Auto-Height je Textlaenge, mit CI Soft-Shadow */
.bcs-testimonial-card {
    background: #FFFFFF;
    padding: 32px;
    border-radius: 0;
    box-shadow: 0 4px 18px -4px rgba(15, 52, 96, 0.10), 0 1px 3px rgba(15, 52, 96, 0.06);
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    /* Auto-Hoehe: nimmt nur Platz, den der Inhalt braucht */
}

.bcs-testimonial-quote {
    font-family: var(--bcs-font-body, 'Open Sans', sans-serif) !important;
    font-weight: 400 !important;
    font-size: var(--bcs-fz-quote) !important;
    line-height: 1.55 !important;
    color: #1A1A1A !important;
    margin: 0 !important;
    /* Anführungszeichen werden vom User selbst gesetzt im Text */
    /* v2.8.24: Lange deutsche Komposita sauber umbrechen */
    overflow-wrap: break-word !important;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.bcs-testimonial-author {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: auto !important;
}

/* Avatar — rund per CI v2026.9 functional_round Exception */
.bcs-testimonial-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    background: #E8E5DD;
}

.bcs-testimonial-avatar-placeholder {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1A1A1A !important;
    color: #FBF9F7 !important;
    font-family: var(--bcs-font-hl, 'Rajdhani', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    user-select: none !important;
}

.bcs-testimonial-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.bcs-testimonial-name {
    font-family: var(--bcs-font-hl, 'Rajdhani', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    color: #1A1A1A !important;
    line-height: 1.2 !important;
    /* v2.8.24: break-word statt anywhere — bricht erst an Wortgrenzen, dann mit Hyphens */
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.bcs-testimonial-role {
    font-family: var(--bcs-font-body, 'Open Sans', sans-serif) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #666666 !important;
    line-height: 1.3 !important;
    /* v2.8.24: break-word statt anywhere — keine "Markenkommunikat/ion"-Brueche mehr */
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Mobile: Testimonials brechen auf 1 Spalte um, kein Versatz */
@media (max-width: 768px) {
    .bcs-testimonials {
        padding: 40px 8px !important;
    }
    .bcs-testimonials-cols {
        flex-wrap: wrap !important;
    }
    .bcs-testimonials-col {
        flex: 0 0 100% !important;
        padding-top: 0 !important;
    }
}

/* Tablet: 2 Spalten, kein Versatz */
/* v2.8.25: Range-Start auf 769px verschoben — sonst hat dieser Block den
   Mobile-Block (max-width:768px) ueberschrieben und Testimonials zeigten 2 Spalten
   statt 1 auf Mobile. */
@media (min-width: 769px) and (max-width: 1024px) {
    .bcs-testimonials-cols {
        flex-wrap: wrap !important;
    }
    .bcs-testimonials-col {
        flex: 0 0 calc((100% - var(--bcs-test-gap)) / 2) !important;
        padding-top: 0 !important;
    }
}

/* ═══════════════════════════════════════════════
   BCS MEDIA · INTRO HEADER (NEU in Suite v2.0.0)
   War vorher separates Plugin "bcs-intro-header".
   Slug bcs_intro_header und CSS-Klassen .bcs-ih__* unverändert.
   ═══════════════════════════════════════════════ */
.bcs-ih {
    padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px);
    background-color: #FBF9F7;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.bcs-ih__baer {
    width: 72px;
    height: 72px;
    display: block;
    margin: 0 auto 36px;
    object-fit: contain;
}

.bcs-ih__overline {
    display: block;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: var(--bcs-fz-overline);
    color: #C9A962;
    line-height: 1.6;
    margin: 0 auto 32px;
    max-width: 64ch;
}

.bcs-ih__h1 {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: var(--bcs-fz-h1) !important;
    line-height: 1.02 !important;
    letter-spacing: -.01em !important;
    color: #0047AB !important;
    text-transform: uppercase !important;
    margin: 0 0 32px !important;
    text-wrap: balance;
}

.bcs-ih__divider {
    display: block;
    width: 220px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, #C9A962 50%, transparent 100%);
    border: 0 !important;
    padding: 0;
    margin: 14px auto 0;
    align-self: center;
    opacity: 1;
}

/* v2.0.0: Default 90ch (war 72ch), per Slider 40-130ch einstellbar */
.bcs-ih__body {
    font-family: 'Open Sans', sans-serif;
    font-size: var(--bcs-fz-body);
    line-height: 1.75;
    color: rgba(10, 31, 60, .72);
    max-width: 90ch;
    margin: 0 auto 48px;
}

.bcs-ih__body--last {
    margin-bottom: 0;
}

.bcs-ih__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    align-items: center;
}

/* Button 1 — Default Meissen-Rot (CI v2026.12 Shop-Marker) */
.bcs-ih__btn-rot {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    padding: 18px 38px !important;
    background-color: #A6192E !important;
    border: 1px solid #A6192E !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(166, 25, 46, .28) !important;
    cursor: pointer;
    transition: all .25s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.bcs-ih__btn-rot:hover {
    background-color: #8a1426 !important;
    border-color: #8a1426 !important;
    box-shadow: 0 10px 28px rgba(166, 25, 46, .38) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

.bcs-ih__btn-preis {
    opacity: .82;
    font-weight: 500 !important;
    letter-spacing: .06em !important;
}

.bcs-ih__btn-link {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: #0F3460 !important;
    border-bottom: 1px solid rgba(15, 52, 96, .52) !important;
    padding-bottom: 4px !important;
    transition: color .2s, border-color .2s !important;
    text-decoration: none !important;
}

.bcs-ih__btn-link:hover {
    color: #A6192E !important;
    border-color: #A6192E !important;
}

/* Mobile Buttons full-width */
@media (max-width: 680px) {
    .bcs-ih__cta { flex-direction: column; }
    .bcs-ih__btn-rot,
    .bcs-ih__btn-link {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ═══════════════════════════════════════════════
   BCS MEDIA · TESTIMONIAL HEADER (NEU in Suite v2.1.0)
   Bär oben, überlappende Avatare, Sub-/Headline, 5-Sterne-Rating.
   ═══════════════════════════════════════════════ */
.bcs-th {
    padding: 80px clamp(20px, 5vw, 64px) 60px;
    background-color: #FBF9F7;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}

.bcs-th__baer {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 24px;
}

/* Avatar-Stack — überlappende Köpfe, mittig */
.bcs-th__avatars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    /* Linke und rechte Padding kompensieren das Border, damit Stack mittig wirkt */
    padding: 3px;
}

/* Avatar — rund per CI v2026.9 functional_round Exception */
.bcs-th__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid #FBF9F7;
    background: #E8E5DD;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Stack-Reihenfolge: erste oben, weitere darunter */
    position: relative;
    z-index: 1;
}

.bcs-th__avatar + .bcs-th__avatar {
    margin-left: -16px;
    z-index: 0;
}

/* Initialen-Placeholder für leere Avatare */
.bcs-th__avatar-placeholder {
    background: #1A1A1A !important;
    color: #FBF9F7 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    user-select: none;
}

/* Sub-Headline — Brand-Navy gedämpft, gleicher Ton wie Intro-Header Body */
.bcs-th__subtitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: var(--bcs-fz-overline);
    line-height: 1.55;
    color: rgba(15, 52, 96, 0.72);
    max-width: 56ch;
    margin: 0 auto 24px;
}

/* Headline — Rajdhani Bold, BIG, Meissen-Kobalt (BCS-Brand-Blau) */
.bcs-th__headline {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: var(--bcs-fz-h1) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.005em !important;
    color: #0047AB !important;
    text-transform: none !important;
    margin: 0 auto !important;
    max-width: 28ch;
    text-wrap: balance;
}

/* Rating-Block — Sterne + Text in einer Zeile */
.bcs-th__rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 28px auto 0;
    flex-wrap: wrap;
}

.bcs-th__stars {
    display: inline-flex;
    gap: 2px;
    font-size: 20px;
    line-height: 1;
}

.bcs-th__star {
    color: #C9A962;
    line-height: 1;
}

.bcs-th__rating-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: var(--bcs-fz-caption);
    color: #4A4A4D;
    line-height: 1.4;
}

/* Mobile-Anpassungen */
@media (max-width: 600px) {
    .bcs-th {
        padding: 56px 8px 48px;
    }
    .bcs-th__avatar {
        width: 44px;
        height: 44px;
    }
    .bcs-th__avatar + .bcs-th__avatar {
        margin-left: -12px;
    }
    .bcs-th__rating {
        flex-direction: column;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════
   BCS MEDIA · SECTION INTRO (NEU in Suite v2.2.0)
   Kompakter Section-Einleiter — Bär + Overline + Goldlinien + Headline + Body + 2 CTAs.
   CSS-Prefix .bcs-si__* (Section Intro), unabhängig vom Intro-Header.
   ═══════════════════════════════════════════════ */
.bcs-si {
    padding: 96px clamp(20px, 5vw, 64px) 80px;
    background-color: #FBF9F7;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}

.bcs-si__baer {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 32px;
    object-fit: contain;
}

/* Overline — Garamond italic Gold */
.bcs-si__overline {
    font-family: 'EB Garamond', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: var(--bcs-fz-overline) !important;
    color: #C9A962;
    line-height: 1.55;
    margin: 0 auto 24px;
    max-width: 64ch;
}

/* Goldene Trennlinie */
.bcs-si__divider {
    display: block;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C9A962, transparent);
    border: 0;
    margin: 24px auto;
}

/* Headline — Rajdhani Bold UPPERCASE Kobalt */
.bcs-si__headline {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: var(--bcs-fz-h1) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.005em !important;
    color: #0047AB !important;
    text-transform: uppercase !important;
    margin: 0 auto 32px !important;
    text-wrap: balance;
    max-width: 32ch;
}

/* Body — Open Sans, Brand-Navy gedämpft */
.bcs-si__body {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--bcs-fz-body) !important;
    line-height: 1.75 !important;
    color: rgba(15, 52, 96, 0.72);
    max-width: 78ch;
    margin: 0 auto 48px;
}

.bcs-si__body--last {
    margin-bottom: 0 !important;
}

/* CTA-Gruppe */
.bcs-si__cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

/* Primary Button — Kobalt-Pille */
.bcs-si__btn-primary {
    display: inline-flex !important;
    align-items: center;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 18px 38px !important;
    background-color: #0047AB !important;
    border: 1px solid #0047AB !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(0, 71, 171, 0.22) !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.bcs-si__btn-primary:hover {
    background-color: #003890 !important;
    border-color: #003890 !important;
    box-shadow: 0 10px 28px rgba(0, 71, 171, 0.32) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Ghost-Link */
.bcs-si__btn-link {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #0F3460 !important;
    border-bottom: 1px solid rgba(15, 52, 96, 0.52) !important;
    padding-bottom: 4px !important;
    text-decoration: none !important;
    transition: color 0.2s, border-color 0.2s !important;
    line-height: 1 !important;
}

.bcs-si__btn-link:hover {
    color: #0047AB !important;
    border-color: #0047AB !important;
}

/* Mobile Buttons full-width */
@media (max-width: 680px) {
    .bcs-si {
        padding: 64px 10px 56px;
    }
    .bcs-si__cta { flex-direction: column; }
    .bcs-si__btn-primary,
    .bcs-si__btn-link {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ═══════════════════════════════════════════════
   BCS MEDIA · ÜBER MICH / TEAM (NEU in Suite v2.3.0)
   Side-by-Side Bild + Text. Bild mit Card-Style-Radius.
   Mobile: stackt vertikal (Bild oben, Text darunter).
   ═══════════════════════════════════════════════ */
.bcs-about {
    --bcs-about-gap: 64px;
    --bcs-about-aspect: 4 / 5;
    padding: 80px clamp(20px, 5vw, 64px);
    background-color: #FBF9F7;
    box-sizing: border-box;
}

.bcs-about__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--bcs-about-gap);
}

/* Bild rechts → row-reverse */
.bcs-about--media-right .bcs-about__inner {
    flex-direction: row-reverse;
}

.bcs-about__media {
    flex: 0 0 42%;
    min-width: 0;
}

.bcs-about__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--bcs-about-aspect, 4 / 5);
    object-fit: cover;
    border-radius: 28px;
    /* CI Soft-Shadow — selbe Werte wie auf den anderen Cards */
    box-shadow: 0 4px 18px -4px rgba(15, 52, 96, 0.10), 0 1px 3px rgba(15, 52, 96, 0.06);
}

.bcs-about__img-placeholder {
    background: linear-gradient(135deg, #E8E5DD, #D8D3CA);
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: rgba(15, 52, 96, 0.4);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bcs-about__content {
    flex: 1 1 auto;
    min-width: 0;
}

.bcs-about__heading {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: var(--bcs-fz-h1) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.005em !important;
    color: #0F3460;
    margin: 0 0 24px !important;
    text-wrap: balance;
}

.bcs-about__paragraph {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--bcs-fz-body) !important;
    line-height: 1.75 !important;
    color: rgba(15, 52, 96, 0.78);
    margin: 0 0 20px !important;
    max-width: 64ch;
}

.bcs-about__paragraph:last-child {
    margin-bottom: 0 !important;
}

/* Mobile / Tablet — stackt vertikal */
@media (max-width: 900px) {
    .bcs-about {
        padding: 56px 10px;
    }
    .bcs-about__inner,
    .bcs-about--media-right .bcs-about__inner {
        flex-direction: column !important;
        gap: 32px !important;
    }
    .bcs-about__media {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 480px;
        margin: 0 auto;
    }
    .bcs-about__content {
        flex: 1 1 auto !important;
        width: 100%;
    }
    .bcs-about__heading {
        text-align: center;
    }
}


/* ════════════════════════════════════════════════════════════
   BCS PAGE CLOSING WIDGET (v2.4.0)
   Abschluss-Section am Seitenende — Bär + Headline + CTAs
   Variants: dark (Tiefes-Indigo Default) · light (Cream) · kobalt
   ════════════════════════════════════════════════════════════ */

.bcs-pc {
    position: relative;
    width: 100%;
    padding: 120px 24px;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
}

/* ─── VARIANTE: DARK (Default — Tiefes-Indigo · CI Footer) ─── */
.bcs-pc--variant-dark {
    background: #0F1E4A;
    color: #FBF9F7;
}
.bcs-pc--variant-dark .bcs-pc__overline { color: #C9A962; }
.bcs-pc--variant-dark .bcs-pc__headline { color: #FBF9F7; }
.bcs-pc--variant-dark .bcs-pc__subtext  { color: rgba(250, 248, 245, 0.78); }

/* dezenter Gold-Glow oben — signalisiert die Naht zum Content */
.bcs-pc--variant-dark::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(640px, 80vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 98, 0.55), transparent);
    pointer-events: none;
}

/* ─── VARIANTE: LIGHT (Cream — falls WP-Footer dunkel ist) ─── */
.bcs-pc--variant-light {
    background: #FBF9F7;
    color: #0F3460;
}
.bcs-pc--variant-light .bcs-pc__overline { color: #C9A962; }
.bcs-pc--variant-light .bcs-pc__headline { color: #0F3460; }
.bcs-pc--variant-light .bcs-pc__subtext  { color: rgba(15, 52, 96, 0.72); }

/* ─── VARIANTE: KOBALT (Vollfläche — intensiv) ─── */
.bcs-pc--variant-kobalt {
    background: #0047AB;
    color: #FBF9F7;
}
.bcs-pc--variant-kobalt .bcs-pc__overline { color: #C9A962; }
.bcs-pc--variant-kobalt .bcs-pc__headline { color: #FBF9F7; }
.bcs-pc--variant-kobalt .bcs-pc__subtext  { color: rgba(250, 248, 245, 0.85); }

/* ─── INNER-CONTAINER ─── */
.bcs-pc__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ─── BÄR ─── */
.bcs-pc__baer {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 28px;
    filter: drop-shadow(0 8px 24px rgba(201, 169, 98, 0.25));
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bcs-pc:hover .bcs-pc__baer {
    transform: translateY(-4px);
}

/* ─── OVERLINE (Garamond italic Gold) ─── */
.bcs-pc__overline {
    font-family: 'EB Garamond', serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: var(--bcs-fz-overline) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em;
    margin: 0 0 16px 0 !important;
    text-wrap: balance;
}

/* ─── HEADLINE (Rajdhani Bold — Hero-Größe wie Shop-Template .h1) ─── */
.bcs-pc__headline {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: var(--bcs-fz-h1) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.01em;
    margin: 0 0 24px 0 !important;
    text-wrap: balance;
    max-width: 22ch;
}

/* ─── SUBTEXT (Open Sans) ─── */
.bcs-pc__subtext {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--bcs-fz-body) !important;
    line-height: 1.65 !important;
    margin: 0 0 36px 0 !important;
    max-width: 56ch;
    text-wrap: pretty;
}

/* ─── CTA-GRUPPE ─── */
.bcs-pc__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: 100%;
}

/* ─── BUTTON BASIS ─── */
.bcs-pc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    cursor: pointer;
    transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease, color 250ms ease, border-color 250ms ease;
    white-space: nowrap;
    border: 2px solid transparent;
}
.bcs-pc__btn:hover { transform: translateY(-2px); }
.bcs-pc__btn:active { transform: translateY(0); }

.bcs-pc__btn-icon {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}

/* ─── PRIMARY (Kobalt — Termin) ─── */
.bcs-pc__btn--primary {
    background: #0047AB;
    color: #FBF9F7 !important;
    box-shadow: 0 8px 24px rgba(0, 71, 171, 0.35);
}
.bcs-pc__btn--primary:hover {
    background: #0055CC;
    box-shadow: 0 12px 32px rgba(0, 71, 171, 0.45);
}

/* ─── SHOP (warmes Shop-Rot — CI-Token --rot #D9531E) ─── */
.bcs-pc__btn--shop {
    background: #D9531E;
    color: #FBF9F7 !important;
    box-shadow: 0 8px 24px rgba(217, 83, 30, 0.35);
}
.bcs-pc__btn--shop:hover {
    background: #B23E13;
    box-shadow: 0 12px 32px rgba(217, 83, 30, 0.45);
}

/* ─── GHOST (Outline — Anrufen) ─── */
.bcs-pc__btn--ghost {
    background: transparent;
    border-color: currentColor;
    color: inherit !important;
    box-shadow: none;
    opacity: 0.92;
}
.bcs-pc__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
}
.bcs-pc--variant-light .bcs-pc__btn--ghost:hover {
    background: rgba(15, 52, 96, 0.06);
}

/* ─── PHONE-TEXT (unter den Buttons, ohne Icon — dezent) ─── */
.bcs-pc__phone {
    margin: 28px 0 0 0 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: inherit;
    opacity: 0.78;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
}
.bcs-pc__phone-prefix {
    font-style: italic;
    opacity: 0.85;
}
.bcs-pc__phone-link {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em;
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.bcs-pc__phone-link:hover {
    opacity: 1;
}
.bcs-pc--variant-light .bcs-pc__phone-link {
    border-bottom-color: rgba(15, 52, 96, 0.4);
}

/* ─── MOBILE (≤680px) — Buttons full-width gestapelt ─── */
@media (max-width: 680px) {
    .bcs-pc {
        padding: 80px 10px;
    }
    .bcs-pc__ctas {
        flex-direction: column;
        gap: 12px;
    }
    .bcs-pc__btn {
        width: 100%;
        max-width: 360px;
        padding: 18px 24px;
    }
    .bcs-pc__headline {
        max-width: 18ch;
    }
    .bcs-pc__phone {
        flex-direction: column;
        gap: 4px;
        margin-top: 24px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   ELLIOT-FILLER (v2.6.0)
   Verhindert leere Karten in Image-Strip und Testimonials.
   Wenn die Anzahl Items nicht zur Spaltenanzahl passt,
   wird die Lücke mit einem Outline-Kreis + Bär-Logo gefüllt.
   ════════════════════════════════════════════════════════════ */

.bcs-strip-filler,
.bcs-testimonial-filler {
    position: relative;
    background: var(--cream-warm, #FBF9F7);
    border-radius: var(--r-card, 20px);
    box-shadow: 0 6px 24px rgba(10, 31, 60, 0.04);
    border: 1px solid rgba(10, 31, 60, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

/* v2.8.13: Filler-Karten gemeinsame Basis */
.bcs-strip-filler,
.bcs-testimonial-filler,
.bcs-strip-cols .bcs-strip-col .bcs-strip-filler,
.bcs-testimonials-cols .bcs-testimonials-col .bcs-testimonial-filler {
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
}
/* Strip-Filler: Aspect-Ratio passend zu den Strip-Items */
.bcs-strip-filler,
.bcs-strip-cols .bcs-strip-col .bcs-strip-filler {
    aspect-ratio: var(--bcs-strip-aspect, 16 / 9) !important;
    max-height: none !important;
}
/* Testimonial-Filler: quadratisch, aber auf sinnvolles Kartenmaß gedeckelt */
.bcs-testimonial-filler,
.bcs-testimonials-cols .bcs-testimonials-col .bcs-testimonial-filler {
    aspect-ratio: 1 / 1 !important;
    max-height: 260px !important;
}

/* Kreis IMMER 1:1 — eigene aspect-ratio + width&height in % der Karte */
.bcs-strip-filler::before,
.bcs-testimonial-filler::before,
.bcs-strip-cols .bcs-strip-col .bcs-strip-filler::before,
.bcs-testimonials-cols .bcs-testimonials-col .bcs-testimonial-filler::before {
    aspect-ratio: 1 / 1 !important;
}

/* Der Outline-Kreis selbst zwingt sein eigenes 1:1 — als Sicherheits-Netz */
.bcs-strip-filler::before,
.bcs-testimonial-filler::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 169, 98, 0.45);
    pointer-events: none;
}

.bcs-strip-filler__bear,
.bcs-testimonial-filler__bear {
    width: 32%;
    height: auto;
    max-width: 96px;
    opacity: 0.78;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(201, 169, 98, 0.22));
}

@media (max-width: 680px) {
    .bcs-strip-filler__bear,
    .bcs-testimonial-filler__bear {
        width: 36%;
    }
}


/* ════════════════════════════════════════════════════════════
   BCS MARQUEE WIDGET (v2.8.0)
   Premium Editorial Trust-Marquee mit chaotischem Mix:
   Markennamen (UPPERCASE Rajdhani) + Marketing-Begriffe
   (italic Gold-Garamond) + Bär-Symbole (chaotisch eingestreut).
   ════════════════════════════════════════════════════════════ */

.bcs-mq {
    --bcs-mq-height: 60px;
    --bcs-mq-speed: 75s;
    --bcs-mq-fade: 110px;
    --bcs-mq-color: #FBF9F7;
    --bcs-mq-accent: #C9A962;

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid rgba(201,169,98,.20);
    border-bottom: 1px solid rgba(201,169,98,.20);
    box-shadow: 0 4px 16px rgba(10,31,60,.06);
    color: var(--bcs-mq-color);
}

/* Variants */
.bcs-mq--dark {
    background: linear-gradient(180deg, #0A1F3C 0%, #0F1E4A 50%, #0A1F3C 100%);
}
.bcs-mq--cream {
    background: linear-gradient(180deg, #FBF9F7 0%, #FBF9F7 50%, #FBF9F7 100%);
    --bcs-mq-color: #0A1F3C;
    border-color: rgba(10,31,60,.10);
}
.bcs-mq--kobalt {
    background: linear-gradient(180deg, #0047AB 0%, #003380 50%, #0047AB 100%);
}

/* Top + Bottom Gold-Glow Lines */
.bcs-mq::before,
.bcs-mq::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201,169,98,.6) 50%, transparent 100%);
    z-index: 3; pointer-events: none;
}
.bcs-mq::before { top: 0; }
.bcs-mq::after  { bottom: 0; }

/* Viewport */
.bcs-mq__viewport {
    position: relative; width: 100%; overflow: hidden;
    display: flex; flex-direction: column;
    height: var(--bcs-mq-height);
}

/* Soft fades — match each variant */
.bcs-mq__viewport::before,
.bcs-mq__viewport::after {
    content: ""; position: absolute; top: 0; bottom: 0;
    width: var(--bcs-mq-fade); z-index: 4; pointer-events: none;
}
.bcs-mq--dark .bcs-mq__viewport::before {
    left: 0; background: linear-gradient(90deg, #0A1F3C 0%, transparent 100%);
}
.bcs-mq--dark .bcs-mq__viewport::after {
    right: 0; background: linear-gradient(270deg, #0A1F3C 0%, transparent 100%);
}
.bcs-mq--cream .bcs-mq__viewport::before {
    left: 0; background: linear-gradient(90deg, #FBF9F7 0%, transparent 100%);
}
.bcs-mq--cream .bcs-mq__viewport::after {
    right: 0; background: linear-gradient(270deg, #FBF9F7 0%, transparent 100%);
}
.bcs-mq--kobalt .bcs-mq__viewport::before {
    left: 0; background: linear-gradient(90deg, #0047AB 0%, transparent 100%);
}
.bcs-mq--kobalt .bcs-mq__viewport::after {
    right: 0; background: linear-gradient(270deg, #0047AB 0%, transparent 100%);
}

.bcs-mq--rows-2 .bcs-mq__viewport {
    height: calc(var(--bcs-mq-height) * 2);
}
.bcs-mq--rows-3 .bcs-mq__viewport {
    height: calc(var(--bcs-mq-height) * 3);
}

/* Track */
.bcs-mq__track {
    display: flex; flex-shrink: 0; width: max-content;
    align-items: center; height: var(--bcs-mq-height);
    will-change: transform;
}
.bcs-mq .bcs-mq__viewport .bcs-mq__track--a {
    animation: bcs-mq-scroll-left  var(--bcs-mq-speed, 75s) linear infinite !important;
}
.bcs-mq .bcs-mq__viewport .bcs-mq__track--b {
    animation: bcs-mq-scroll-right var(--bcs-mq-speed, 75s) linear infinite !important;
}
.bcs-mq .bcs-mq__viewport .bcs-mq__track--c {
    animation: bcs-mq-scroll-left var(--bcs-mq-speed, 75s) linear infinite !important;
}
.bcs-mq--no-shadow {
    box-shadow: none !important;
}
.bcs-mq--no-fade .bcs-mq__viewport::before,
.bcs-mq--no-fade .bcs-mq__viewport::after {
    display: none !important;
}

@keyframes bcs-mq-scroll-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes bcs-mq-scroll-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Group */
.bcs-mq__group {
    display: flex; flex-shrink: 0; align-items: center;
    gap: 22px; padding-right: 22px;
    color: inherit; line-height: 1;
}

/* BRAND */
.bcs-mq__brand {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500; font-size: 18px;
    letter-spacing: .12em; text-transform: uppercase;
    white-space: nowrap;
    transition: color .3s ease, transform .3s ease;
    cursor: default; display: inline-block;
}
.bcs-mq__brand:hover {
    color: var(--bcs-mq-accent); transform: translateY(-1px);
}

/* WORD */
.bcs-mq__word {
    font-family: 'EB Garamond', serif;
    font-style: italic; font-weight: 500;
    font-size: 22px; letter-spacing: .01em;
    color: var(--bcs-mq-accent);
    white-space: nowrap;
    display: inline-block; transform: translateY(-1px);
}
.bcs-mq--word-shadow .bcs-mq__word {
    text-shadow: 0 0 18px rgba(201,169,98,.22);
}

/* BEAR */
.bcs-mq__bear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    color: var(--bcs-mq-accent); flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(201,169,98,.42));
    opacity: .92; transform: translateY(-1px);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.bcs-mq__bear svg,
.bcs-mq__bear img,
.bcs-mq__bear .bcs-mq__bear-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.bcs-mq:hover .bcs-mq__bear { transform: translateY(-3px) rotate(-3deg); }

/* Separator */
.bcs-mq__sep {
    color: var(--bcs-mq-accent);
    font-weight: 700; opacity: .55;
    font-size: 1.4em; line-height: 0;
    transform: translateY(-2px); display: inline-block;
}

/* Pause on hover */
.bcs-mq:hover .bcs-mq__track { animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bcs-mq__track { animation: none !important; }
}

/* Mobile */
@media (max-width: 680px) {
    .bcs-mq { --bcs-mq-fade: 50px; --bcs-mq-height: 56px; }
    .bcs-mq__brand { font-size: 16px; }
    .bcs-mq__word  { font-size: 20px; }
    .bcs-mq__bear { width: 32px !important; height: 32px !important; }
}
/* ═══════════════════════════════════════════════
   TOOL-BADGES v2.8.7 — Logo-Stack auf Cover + Detail-View
   Weiße Kreis-Badges mit farbigem Icon (mask), Position via Modifier-Klasse,
   Sichtbarkeit immer / nur-bei-hover.
   ═══════════════════════════════════════════════ */

.bcs-pg-tools {
    /* v2.8.8: halbierte Default-Größe + Olympic-Overlap (negative gap = Überlappung) */
    --bcs-tool-size: 16px;
    --bcs-tool-gap: -6px;
    --bcs-tool-inset: 10px;
    display: flex;
    flex-wrap: wrap;
    pointer-events: none;
    z-index: 4;
}
/* v2.8.8: Statt CSS-gap nutzen wir margin-left auf Folge-Badges — erlaubt negative Werte für Overlap */
.bcs-pg-tools .bcs-pg-tool-badge + .bcs-pg-tool-badge {
    margin-left: var(--bcs-tool-gap);
}

/* ── Cover-Variante: absolut auf dem Bild ── */
.bcs-pg-tools--cover {
    position: absolute;
    max-width: calc(100% - (var(--bcs-tool-inset) * 2));
}
.bcs-pg-tools--cover.bcs-pg-tools--bottom-right { bottom: var(--bcs-tool-inset); right:  var(--bcs-tool-inset); justify-content: flex-end; }
.bcs-pg-tools--cover.bcs-pg-tools--bottom-left  { bottom: var(--bcs-tool-inset); left:   var(--bcs-tool-inset); justify-content: flex-start; }
.bcs-pg-tools--cover.bcs-pg-tools--top-right    { top:    var(--bcs-tool-inset); right:  var(--bcs-tool-inset); justify-content: flex-end; }
.bcs-pg-tools--cover.bcs-pg-tools--top-left     { top:    var(--bcs-tool-inset); left:   var(--bcs-tool-inset); justify-content: flex-start; }

/* ── Sichtbarkeit ── */
.bcs-pg-tools--vis-always {
    opacity: 1;
    transform: none;
    transition: opacity .22s ease, transform .22s ease;
}
.bcs-pg-tools--vis-hover {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .22s ease, transform .22s ease;
}
.bcs-pg-item:hover .bcs-pg-tools--vis-hover,
.bcs-pg-item:focus-within .bcs-pg-tools--vis-hover {
    opacity: 1;
    transform: none;
}

/* ── Detail-View-Variante: inline neben Meta-Items ── */
.bcs-pg-tools--detail {
    --bcs-tool-size: 32px;
    position: static;
    pointer-events: auto;
}
.bcs-pg-pv-tools-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bcs-pg-pv-tools-wrap .bcs-pg-pv-meta-label {
    margin-bottom: 2px;
}

/* ── Einzelnes Badge: weißer Kreis, farbiges Icon via mask ── */
.bcs-pg-tool-badge {
    --bcs-tool-color: #0F3460;
    width: var(--bcs-tool-size);
    height: var(--bcs-tool-size);
    border-radius: 50%;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.18), 0 0 0 1px rgba(15, 52, 96, 0.04);
    pointer-events: auto;
    cursor: help;
    transition: transform .18s ease, box-shadow .18s ease;
    flex: 0 0 auto;
}
.bcs-pg-tool-badge:hover {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 4px 12px rgba(15, 52, 96, 0.24), 0 0 0 1px rgba(15, 52, 96, 0.06);
}

.bcs-pg-tool-icon {
    display: block;
    width: 60%;
    height: 60%;
    background-color: var(--bcs-tool-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ── Mobile: Badges etwas kleiner ── */
@media (max-width: 768px) {
    .bcs-pg-tools--cover {
        /* v2.8.8: halbiert + Overlap auch mobil */
        --bcs-tool-size: 13px;
        --bcs-tool-gap: -5px;
        --bcs-tool-inset: 8px;
    }
}


/* ═══════════════════════════════════════════════
   BCS SPACE — Trenner-Widget v1.0.0
   ═══════════════════════════════════════════════ */
.bcs-space {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
.bcs-space__line {
    display: block;
    max-width: 100%;
    background: linear-gradient(90deg, transparent 0%, #C9A962 50%, transparent 100%);
    pointer-events: none;
}


/* ═══════════════════════════════════════════════
   BCS SECTION-INTRO — Inline-Formatierungen v2.9.4
   ═══════════════════════════════════════════════ */
.bcs-si__overline .bcs-si__gold,
.bcs-si__headline .bcs-si__gold,
.bcs-si__body .bcs-si__gold {
    color: #C9A962 !important;
}
.bcs-si__overline .bcs-si__serif,
.bcs-si__headline .bcs-si__serif,
.bcs-si__body .bcs-si__serif {
    font-family: 'EB Garamond', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.bcs-si__btn-primary.bcs-si__btn--shop:hover {
    background-color: #B8401A !important;
    border-color: #B8401A !important;
    box-shadow: 0 10px 28px rgba(217, 83, 30, 0.35) !important;
}