:root {
    /* ================================
       Typography
    ================================ */
    --bd-font-primary: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bd-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Font Weights */
    --bd-fw-light: 300;
    --bd-fw-normal: 400;
    --bd-fw-medium: 500;
    --bd-fw-semibold: 600;
    --bd-fw-bold: 700;

    /* ================================
       Colors
    ================================ */
    --bd-color-primary: #c6a27a;
    --bd-color-secondary: #e9d8c6;
    --bd-color-hover: #b48f67;
    --bd-color-tertiary: #faf7f4;

    --bd-color-darker: #3a3a3c;
    --bd-color-body: #686868;
    --bd-color-altgrey: #6f7a63;
    --bd-color-darkgrey: #3a3a3c;
    --bd-color-lightgrey: #faf7f4;

    --bd-color-white: #ffffff;
    --bd-color-black: #000000;

    --bd-bg-page: #f5efe7;
    --bd-bg-section: var(--bd-color-lightgrey);
    --bd-bg-card: var(--bd-color-white);
    --bd-bg-invert: var(--bd-color-darker);
    --bd-bg-accent: var(--bd-color-secondary);

    --bd-color-border: #e5ded6;
    --bd-color-alternative: #e5ded6;

    /* Semantic Colors (optional, für später) */
    --bd-color-success: #4ade80;
    --bd-color-warning: #fbbf24;
    --bd-color-error: #ef4444;
    --bd-color-info: #3b82f6;

    /* ================================
       Typography Scale
    ================================ */
--bd-fs-h1: clamp(1.85rem, 2.2vw, 2.35rem);
--bd-fs-h2: clamp(1.6rem, 1.9vw, 1.95rem);
--bd-fs-h3: clamp(1.25rem, 1.45vw, 1.5rem);
--bd-fs-h4: clamp(1.05rem, 1.2vw, 1.2rem);
--bd-fs-h5: 1rem;
--bd-fs-h6: 0.9rem;

    --bd-fs-base: 1rem;
    --bd-fs-sm: 0.875rem;
    --bd-fs-xs: 0.75rem;
    --bd-fs-lg: 1.125rem;
    --bd-fs-xl: 1.25rem;

    --bd-fs-content: 1.05em;
    --bd-fs-content-large: 1.125em;

    --bd-lh-tight: 1.1;
    --bd-lh-snug: 1.2;
    --bd-lh-normal: 1.35;
    --bd-lh-loose: 1.4;
    --bd-lh-relaxed: 1.6;

    --bd-fs-topline: 1rem;
    --bd-fs-subline: 1rem;
    --bd-color-topline: #6f7a63;
    --bd-color-subline: #6f7a63;
    --bd-space-headline-bottom: 0.5em;

    /* Letter Spacing */
    --bd-ls-tight: -0.02em;
    --bd-ls-normal: 0;
    --bd-ls-wide: 0.025em;
    --bd-ls-wider: 0.05em;

    /* ================================
       Layout & Spacing
    ================================ */
    --bd-container-content: 1024px;
    --bd-container-narrow: 800px;
    --bd-container-wide: 1280px;
    --bd-container-full: 1520px;

    /* Spacing Scale */
    --bd-space-0: 0;
    --bd-space-1: 0.5rem;
    /* 8px */
    --bd-space-2: 1rem;
    /* 16px */
    --bd-space-3: 1.5rem;
    /* 24px */
    --bd-space-4: 2rem;
    /* 32px */
    --bd-space-5: 3rem;
    /* 48px */
    --bd-space-6: 4rem;
    /* 64px */
    --bd-space-7: 6rem;
    /* 96px */
    --bd-space-8: 8rem;
    /* 128px */

    /* Grid Gaps */
    --bd-gap-mobile: var(--bd-space-2);
    --bd-gap-tablet: var(--bd-space-3);
    --bd-gap-desktop: var(--bd-space-4);
    --bd-gap: var(--bd-gap-desktop);

    /* ================================
       Border Radius
    ================================ */
    --bd-radius-none: 0;
    --bd-radius-sm: 0.25rem;
    /* 4px */
    --bd-radius-base: 0.375rem;
    /* 6px */
    --bd-radius-md: 0.5rem;
    /* 8px */
    --bd-radius-lg: 0.625rem;
    /* 10px */
    --bd-radius-xl: 0.75rem;
    /* 12px */
    --bd-radius-2xl: 1rem;
    /* 16px */
    --bd-radius-3xl: 1.5rem;
    /* 24px */
    --bd-radius-full: 9999px;

    /* Component-specific radius */
    --bd-card-radius: var(--bd-radius-lg);
    --bd-btn-radius: var(--bd-radius-lg);
    --bd-input-radius: var(--bd-radius-md);

    /* ================================
       Shadows
    ================================ */
    --bd-shadow-none: none;
    --bd-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bd-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --bd-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --bd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --bd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --bd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --bd-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --bd-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Component-specific shadows */
    --bd-btn-shadow: var(--bd-shadow-md);
    --bd-card-shadow: var(--bd-shadow-sm);
    --bd-dropdown-shadow: var(--bd-shadow-lg);
    --bd-modal-shadow: var(--bd-shadow-2xl);

    /* ================================
       Transitions
    ================================ */
    --bd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --bd-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --bd-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --bd-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Easing Functions */
    --bd-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --bd-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --bd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ================================
       Z-Index Scale
    ================================ */
    --bd-z-base: 0;
    --bd-z-dropdown: 1000;
    --bd-z-sticky: 1020;
    --bd-z-fixed: 1030;
    --bd-z-modal-backdrop: 1040;
    --bd-z-modal: 1050;
    --bd-z-popover: 1060;
    --bd-z-tooltip: 1070;

    /* ================================
       Breakpoints
    ================================ */
    --bd-bp-sm: 480px;
    --bd-bp-md: 768px;
    --bd-bp-lg: 1024px;
    --bd-bp-xl: 1280px;
    --bd-bp-2xl: 1536px;

    /* ================================
       Opacity Scale
    ================================ */
    --bd-opacity-0: 0;
    --bd-opacity-10: 0.1;
    --bd-opacity-20: 0.2;
    --bd-opacity-30: 0.3;
    --bd-opacity-40: 0.4;
    --bd-opacity-50: 0.5;
    --bd-opacity-60: 0.6;
    --bd-opacity-70: 0.7;
    --bd-opacity-80: 0.8;
    --bd-opacity-90: 0.9;
    --bd-opacity-100: 1;

    /* ================================
       Button Tokens
    ================================ */
    --bd-btn-weight: 600;
    --bd-btn-trans: var(--bd-transition-base);

    --bd-btn-fs: 1rem;
    --bd-btn-fs-s: 0.875rem;
    --bd-btn-fs-l: 1.125rem;

    --bd-btn-py: 0.75em;
    --bd-btn-px: 1.5em;
    --bd-btn-py-s: 0.5em;
    --bd-btn-px-s: 1em;
    --bd-btn-py-l: 1em;
    --bd-btn-px-l: 2em;

    --bd-btn-min-h: 3rem;
    --bd-btn-min-h-s: 2.25rem;
    --bd-btn-min-h-l: 3.5rem;

    --bd-btn-focus-ring: 0 0 0 4px rgba(198, 162, 122, 0.25);

    /* ================================
       Form / Input Tokens
    ================================ */
    --bd-input-height: 2.75rem;
    --bd-input-height-sm: 2.25rem;
    --bd-input-height-lg: 3.5rem;

    --bd-input-padding-x: 1rem;
    --bd-input-padding-y: 0.5rem;

    --bd-input-bg: var(--bd-color-white);
    --bd-input-border: var(--bd-color-border);
    --bd-input-border-focus: var(--bd-color-primary);
    --bd-input-text: var(--bd-color-body);
    --bd-input-placeholder: var(--bd-color-altgrey);

    --bd-input-focus-ring: 0 0 0 3px rgba(198, 162, 122, 0.15);

    /* ================================
       Border Widths
    ================================ */
    --bd-border-0: 0;
    --bd-border-1: 1px;
    --bd-border-2: 2px;
    --bd-border-4: 4px;
    --bd-border-8: 8px;

    /* ================================
       Focus Ring
    ================================ */
    --bd-focus-ring-width: 3px;
    --bd-focus-ring-offset: 2px;
    --bd-focus-ring-color: rgba(198, 162, 122, 0.25);

    /* ================================
       Animation Durations
    ================================ */
    --bd-duration-75: 75ms;
    --bd-duration-100: 100ms;
    --bd-duration-150: 150ms;
    --bd-duration-200: 200ms;
    --bd-duration-300: 300ms;
    --bd-duration-500: 500ms;
    --bd-duration-700: 700ms;
    --bd-duration-1000: 1000ms;
}

/* =========================================================
   BASE STYLES
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--bd-font-primary);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--bd-color-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--bd-bg-page);
    margin: 0
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

p {
    margin: 0 0 1em 0;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0 0 1em 0;
    padding-left: 1.25em;
}

li+li {
    margin-top: 0.25em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:not(.bd-btn):hover {
    color: var(--bd-color-primary);
}

a:not(.bd-btn):visited {
    color: inherit;
}

a:focus-visible {
    outline: 2px solid var(--bd-color-primary);
    outline-offset: 2px;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

svg {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    height: 1px;
    background: var(--bd-color-alternative);
    margin: 2rem 0;
}

small {
    font-size: 0.85em;
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

/* Headlines */
h1,
h2,
h3,
h4,
h5,
h6,
.bd-h1,
.bd-h2,
.bd-h3,
.bd-h4,
.bd-h5,
.bd-h6 {
    font-family: var(--bd-font-primary);
    font-weight: 600;
    margin: 0 0 var(--bd-space-headline-bottom) 0;
    color: var(--bd-color-darker);
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
.bd-h1,
.bd-h2,
.bd-h3 {
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

h1,
.bd-h1 {
    font-size: var(--bd-fs-h1);
    line-height: var(--bd-lh-tight);
}

h2,
.bd-h2 {
    font-size: var(--bd-fs-h2);
    line-height: var(--bd-lh-snug);
}

h3,
.bd-h3 {
    font-size: var(--bd-fs-h3);
    line-height: 1.25;
}

h4,
.bd-h4 {
    font-size: var(--bd-fs-h4);
    line-height: 1.3;
}

h5,
.bd-h5 {
    font-size: var(--bd-fs-h5);
    line-height: var(--bd-lh-normal);
}

h6,
.bd-h6 {
    font-size: var(--bd-fs-h6);
    line-height: var(--bd-lh-loose);
    color: var(--bd-color-altgrey);
}

/* Topline/Subline */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    display: block;
    font-weight: 500;
}

h1 .bd-topline,
h2 .bd-topline,
h3 .bd-topline,
h4 .bd-topline,
h5 .bd-topline,
h6 .bd-topline {
    font-size: var(--bd-fs-topline);
    line-height: 1.2;
    color: var(--bd-color-topline);
    margin-bottom: 0.25em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

h1 .bd-subline,
h2 .bd-subline,
h3 .bd-subline,
h4 .bd-subline,
h5 .bd-subline,
h6 .bd-subline {
    font-size: var(--bd-fs-subline);
    line-height: 1.3;
    color: var(--bd-color-subline);
    margin-top: 0.25em;
    font-weight: 400;
}

/* Headline Links */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: var(--bd-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

h1 a:focus-visible,
h2 a:focus-visible,
h3 a:focus-visible,
h4 a:focus-visible,
h5 a:focus-visible,
h6 a:focus-visible {
    outline: 2px solid var(--bd-color-primary);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Compact Context */
.bd-narrow h1,
.bd-narrow h2,
.bd-narrow h3 {
    line-height: 1.05;
    margin-bottom: 0.25em;
}

/* Headline Groups */
.bd-headline-group {
    margin-bottom: 2rem;
}

.bd-headline-group--center {
    text-align: center;
}

.bd-headline-group--right {
    text-align: right;
}

.bd-headline-group--spaced>*+* {
    margin-top: 0.5em;
}

/* =========================================================
   BACKGROUND UTILITIES
   ========================================================= */

.bd-bg-primary {
    background-color: var(--bd-color-primary);
}

.bd-bg-secondary {
    background-color: var(--bd-color-secondary);
}

.bd-bg-tertiary {
    background-color: var(--bd-color-tertiary);
}

.bd-bg-light {
    background-color: var(--bd-color-lightgrey);
}

.bd-bg-white {
    background-color: var(--bd-color-white);
}

.bd-bg-dark {
    background-color: var(--bd-color-darker);
}

.bd-bg-page {
    background-color: var(--bd-bg-page);
}

.bd-bg-section {
    background-color: var(--bd-bg-section);
}

.bd-bg-card {
    background-color: var(--bd-bg-card);
}

.bd-bg-accent {
    background-color: var(--bd-bg-accent);
}

.bd-bg-invert {
    background-color: var(--bd-bg-invert);
}

/* =========================================================
   MEDIA ELEMENTS
   ========================================================= */

/* -------------------------
   Base Image/Video Reset
------------------------- */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

picture {
    display: block;
}

/* -------------------------
   Border Radius Variants
------------------------- */
.bd-media-rounded {
    border-radius: var(--bd-card-radius);
    overflow: hidden;
}

.bd-media-rounded-sm {
    border-radius: var(--bd-radius-sm);
    overflow: hidden;
}

.bd-media-rounded-lg {
    border-radius: var(--bd-radius-xl);
    overflow: hidden;
}

.bd-media-rounded-full {
    border-radius: var(--bd-radius-full);
    overflow: hidden;
}

.bd-media-circle {
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* -------------------------
   Object Fit
------------------------- */
.bd-media-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.bd-media-contain {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.bd-media-fill {
    object-fit: fill;
    width: 100%;
    height: 100%;
}

/* -------------------------
   Aspect Ratio Containers
------------------------- */
.bd-media-aspect {
    position: relative;
    overflow: hidden;
}

.bd-media-aspect img,
.bd-media-aspect video,
.bd-media-aspect iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bd-media-aspect--square {
    aspect-ratio: 1 / 1;
}

.bd-media-aspect--video {
    aspect-ratio: 16 / 9;
}

.bd-media-aspect--portrait {
    aspect-ratio: 3 / 4;
}

.bd-media-aspect--landscape {
    aspect-ratio: 4 / 3;
}

.bd-media-aspect--wide {
    aspect-ratio: 21 / 9;
}

/* -------------------------
   Borders & Effects
------------------------- */
.bd-media-bordered {
    border: var(--bd-border-2) solid var(--bd-color-border);
}

.bd-media-shadow {
    box-shadow: var(--bd-shadow-md);
}

.bd-media-shadow-sm {
    box-shadow: var(--bd-shadow-sm);
}

.bd-media-shadow-lg {
    box-shadow: var(--bd-shadow-lg);
}

/* -------------------------
   Grayscale & Filters
------------------------- */
.bd-media-grayscale {
    filter: grayscale(100%);
    transition: filter var(--bd-transition-base);
}

.bd-media-grayscale:hover {
    filter: grayscale(0%);
}

.bd-media-sepia {
    filter: sepia(50%);
}

.bd-media-blur {
    filter: blur(4px);
}

/* -------------------------
   Image Zoom on Hover
------------------------- */
.bd-media-zoom {
    overflow: hidden;
    position: relative;
}

.bd-media-zoom img {
    transition: transform var(--bd-transition-slow);
}

.bd-media-zoom:hover img {
    transform: scale(1.05);
}

/* -------------------------
   Figure with Caption
------------------------- */
.bd-figure {
    margin: 0;
    position: relative;
}

.bd-figure img {
    display: block;
    width: 100%;
}

.bd-figcaption {
    margin-top: var(--bd-space-2);
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-altgrey);
    line-height: var(--bd-lh-normal);
}

.bd-figcaption--center {
    text-align: center;
}

.bd-figcaption--italic {
    font-style: italic;
}

/* -------------------------
   Image Grid/Gallery
------------------------- */
.bd-image-grid {
    display: grid;
    gap: var(--bd-gap-mobile);
}

@media (min-width: 768px) {
    .bd-image-grid {
        gap: var(--bd-gap-tablet);
    }
}

@media (min-width: 1024px) {
    .bd-image-grid {
        gap: var(--bd-gap-desktop);
    }
}

.bd-image-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.bd-image-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.bd-image-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

/* -------------------------
   Avatar Sizes
------------------------- */
.bd-avatar {
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    flex-shrink: 0;
}

.bd-avatar--xs {
    width: 24px;
    height: 24px;
}

.bd-avatar--sm {
    width: 32px;
    height: 32px;
}

.bd-avatar--md {
    width: 48px;
    height: 48px;
}

.bd-avatar--lg {
    width: 64px;
    height: 64px;
}

.bd-avatar--xl {
    width: 96px;
    height: 96px;
}

.bd-avatar--2xl {
    width: 128px;
    height: 128px;
}

.bd-avatar-bordered {
    border: 3px solid var(--bd-color-white);
    box-shadow: 0 0 0 1px var(--bd-color-border);
}

/* -------------------------
   Avatar Group (Overlapping)
------------------------- */
.bd-avatar-group {
    display: flex;
    align-items: center;
}

.bd-avatar-group .bd-avatar {
    margin-left: -12px;
    border: 2px solid var(--bd-color-white);
    position: relative;
}

.bd-avatar-group .bd-avatar:first-child {
    margin-left: 0;
}

.bd-avatar-group .bd-avatar:hover {
    z-index: 10;
    transform: translateY(-2px);
    transition: transform var(--bd-transition-fast);
}

/* -------------------------
   Responsive Images
------------------------- */
.bd-img-responsive {
    width: 100%;
    height: auto;
    display: block;
}

/* -------------------------
   Background Image Containers
------------------------- */
.bd-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bd-bg-image--fixed {
    background-attachment: fixed;
}

.bd-bg-image--parallax {
    background-attachment: fixed;
    background-size: cover;
}

@media (max-width: 768px) {
    .bd-bg-image--parallax {
        background-attachment: scroll;
    }
}

/* -------------------------
   Video Container
------------------------- */
.bd-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.bd-video-container iframe,
.bd-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* -------------------------
   Icon Containers
------------------------- */
.bd-icon-box {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bd-radius-md);
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-primary);
    flex-shrink: 0;
}

.bd-icon-box--sm {
    width: 32px;
    height: 32px;
}

.bd-icon-box--lg {
    width: 64px;
    height: 64px;
}

.bd-icon-box--xl {
    width: 80px;
    height: 80px;
}

.bd-icon-box--circle {
    border-radius: 50%;
}

.bd-icon-box--primary {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-icon-box--secondary {
    background: var(--bd-color-secondary);
    color: var(--bd-color-darker);
}

/* -------------------------
   Image Overlay
------------------------- */
.bd-media-overlay {
    position: relative;
    overflow: hidden;
}

.bd-media-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--bd-transition-base);
}

.bd-media-overlay:hover::after {
    opacity: 1;
}

.bd-media-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bd-color-white);
    z-index: 2;
    text-align: center;
    opacity: 0;
    transition: opacity var(--bd-transition-base);
    pointer-events: none;
}

.bd-media-overlay:hover .bd-media-overlay-content {
    opacity: 1;
}

/* -------------------------
   Logo Images
------------------------- */
.bd-logo {
    max-width: 200px;
    height: auto;
}

.bd-logo--sm {
    max-width: 120px;
}

.bd-logo--lg {
    max-width: 280px;
}

.bd-logo--grayscale {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all var(--bd-transition-base);
}

.bd-logo--grayscale:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* -------------------------
   Thumbnail Grid
------------------------- */
.bd-thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: var(--bd-radius-md);
    background: var(--bd-color-lightgrey);
    aspect-ratio: 1 / 1;
}

.bd-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bd-transition-base);
}

.bd-thumbnail:hover img {
    transform: scale(1.1);
}

/* -------------------------
   Lazy Loading Placeholder
------------------------- */
.bd-media-loading {
    background: linear-gradient(90deg, 
        var(--bd-color-lightgrey) 0%, 
        var(--bd-color-alternative) 50%, 
        var(--bd-color-lightgrey) 100%);
    background-size: 200% 100%;
    animation: bd-skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes bd-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* -------------------------
   Picture Frame Effect
------------------------- */
.bd-picture-frame {
    padding: var(--bd-space-2);
    background: var(--bd-color-white);
    border: 1px solid var(--bd-color-border);
    box-shadow: var(--bd-shadow-sm);
}

.bd-picture-frame--thick {
    padding: var(--bd-space-3);
    border-width: 2px;
}

/* =========================================================
   SECTION SYSTEM
   ========================================================= */

.bd-section {
    margin-block: var(--bd-space-5);
}

.bd-section--tight {
    margin-block: var(--bd-space-3);
}

.bd-section--loose {
    margin-block: calc(var(--bd-space-5) * 1.5);
}

.bd-section--xl {
    margin-block: calc(var(--bd-space-5) * 2);
}

.bd-section-content,
.bd-content-section,
.bd-measure {
    font-size: var(--bd-fs-content);
    line-height: 1.65;
}

.bd-section--xl .bd-section-content {
    font-size: var(--bd-fs-content-large);
}

/* =========================================================
   CONTAINERS
   ========================================================= */

.bd-container {
    width: 100%;
    max-width: var(--bd-container-content);
    margin-inline: auto;
    padding-inline: var(--bd-space-3);
}

.bd-container-narrow {
    max-width: var(--bd-container-narrow);
}

.bd-container-wide {
    max-width: var(--bd-container-wide);
}

.bd-container-fluid {
    max-width: 100%;
}

/* Responsive Container Padding */
@media (min-width: 768px) {

    .bd-container,
    .bd-container-narrow,
    .bd-container-wide,
    .bd-container-fluid {
        padding-inline: var(--bd-space-4);
    }
}

@media (min-width: 1024px) {

    .bd-container,
    .bd-container-narrow,
    .bd-container-wide,
    .bd-container-fluid {
        padding-inline: var(--bd-space-5);
    }
}

/* Content Wrappers (Legacy Support) */
.bd-content {
    max-width: var(--bd-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bd-space-2);
    padding-right: var(--bd-space-2);
}

.bd-content-narrow {
    max-width: var(--bd-container-narrow);
}

.bd-content-wide {
    max-width: var(--bd-container-wide);
}

/* Measure (Reading Width) */
.bd-measure {
    max-width: 65ch;
}

.bd-measure-narrow {
    max-width: 50ch;
}

.bd-measure-wide {
    max-width: 80ch;
}

/* Breakout Fullwidth */
.bd-fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: var(--bd-space-3);
}

@media (min-width: 768px) {
    .bd-fullwidth {
        padding-inline: var(--bd-space-4);
    }
}

.bd-fullwidth-nopad {
    padding-inline: 0;
}

/* =========================================================
   GRID SYSTEM
   ========================================================= */

/* Grid Core (Mobile First) */
.bd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bd-gap-mobile);
}

.bd-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--bd-gap-mobile);
}

.bd-grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--bd-gap-mobile);
}

/* Grid Modifiers */
.bd-grid-dense {
    grid-auto-flow: dense;
}

/* Gap Modifiers */
.bd-gap-sm {
    gap: var(--bd-space-2);
}

.bd-gap-md {
    gap: var(--bd-gap-mobile);
}

.bd-gap-lg {
    gap: var(--bd-space-4);
}

.bd-row-gap-sm {
    row-gap: var(--bd-space-2);
}

.bd-col-gap-sm {
    column-gap: var(--bd-space-2);
}

/* Mobile Columns */
.bd-col-mobile-2 {
    grid-template-columns: repeat(2, 1fr);
}

.bd-col-mobile-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet Breakpoint (768px+) */
@media (min-width: 768px) {
    .bd-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--bd-gap-tablet);
    }

    .bd-grid-auto,
    .bd-grid-auto-fill {
        gap: var(--bd-gap-tablet);
    }

    /* Default Column Spans */
    .bd-col-1 {
        grid-column: span 1;
    }

    .bd-col-2 {
        grid-column: span 2;
    }

    .bd-col-3 {
        grid-column: span 3;
    }

    .bd-col-4 {
        grid-column: span 4;
    }

    .bd-col-5 {
        grid-column: span 5;
    }

    .bd-col-6 {
        grid-column: span 6;
    }

    .bd-col-7 {
        grid-column: span 7;
    }

    .bd-col-8 {
        grid-column: span 8;
    }

    .bd-col-9 {
        grid-column: span 9;
    }

    .bd-col-10 {
        grid-column: span 10;
    }

    .bd-col-11 {
        grid-column: span 11;
    }

    .bd-col-12 {
        grid-column: span 12;
    }

    /* Tablet Column Spans */
    .bd-col-md-1 {
        grid-column: span 1;
    }

    .bd-col-md-2 {
        grid-column: span 2;
    }

    .bd-col-md-3 {
        grid-column: span 3;
    }

    .bd-col-md-4 {
        grid-column: span 4;
    }

    .bd-col-md-5 {
        grid-column: span 5;
    }

    .bd-col-md-6 {
        grid-column: span 6;
    }

    .bd-col-md-7 {
        grid-column: span 7;
    }

    .bd-col-md-8 {
        grid-column: span 8;
    }

    .bd-col-md-9 {
        grid-column: span 9;
    }

    .bd-col-md-10 {
        grid-column: span 10;
    }

    .bd-col-md-11 {
        grid-column: span 11;
    }

    .bd-col-md-12 {
        grid-column: span 12;
    }

    /* Start Positions */
    .bd-start-2 {
        grid-column-start: 2;
    }

    .bd-start-3 {
        grid-column-start: 3;
    }

    .bd-start-4 {
        grid-column-start: 4;
    }

    .bd-start-5 {
        grid-column-start: 5;
    }

    .bd-start-auto {
        grid-column-start: auto;
    }

    .bd-start-md-2 {
        grid-column-start: 2;
    }

    .bd-start-md-3 {
        grid-column-start: 3;
    }

    .bd-start-md-4 {
        grid-column-start: 4;
    }

    .bd-start-md-5 {
        grid-column-start: 5;
    }

    .bd-start-md-auto {
        grid-column-start: auto;
    }

    /* Row Spans */
    .bd-row-span-2 {
        grid-row: span 2;
    }

    .bd-row-span-3 {
        grid-row: span 3;
    }

    .bd-row-span-4 {
        grid-row: span 4;
    }
}

/* Desktop Breakpoint (1024px+) */
@media (min-width: 1024px) {

    .bd-grid,
    .bd-grid-auto,
    .bd-grid-auto-fill {
        gap: var(--bd-gap-desktop);
    }

    /* Desktop Column Spans */
    .bd-col-lg-1 {
        grid-column: span 1;
    }

    .bd-col-lg-2 {
        grid-column: span 2;
    }

    .bd-col-lg-3 {
        grid-column: span 3;
    }

    .bd-col-lg-4 {
        grid-column: span 4;
    }

    .bd-col-lg-5 {
        grid-column: span 5;
    }

    .bd-col-lg-6 {
        grid-column: span 6;
    }

    .bd-col-lg-7 {
        grid-column: span 7;
    }

    .bd-col-lg-8 {
        grid-column: span 8;
    }

    .bd-col-lg-9 {
        grid-column: span 9;
    }

    .bd-col-lg-10 {
        grid-column: span 10;
    }

    .bd-col-lg-11 {
        grid-column: span 11;
    }

    .bd-col-lg-12 {
        grid-column: span 12;
    }

    /* Desktop Start Positions */
    .bd-start-lg-2 {
        grid-column-start: 2;
    }

    .bd-start-lg-3 {
        grid-column-start: 3;
    }

    .bd-start-lg-4 {
        grid-column-start: 4;
    }

    .bd-start-lg-5 {
        grid-column-start: 5;
    }

    .bd-start-lg-auto {
        grid-column-start: auto;
    }
}

/* =========================================================
   FLEX HELPERS
   ========================================================= */

.bd-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bd-space-3);
}

.bd-flex-nowrap {
    flex-wrap: nowrap;
}

.bd-flex-column {
    flex-direction: column;
}

/* Alignment */
.bd-flex-middle {
    align-items: center;
}

.bd-flex-top {
    align-items: flex-start;
}

.bd-flex-bottom {
    align-items: flex-end;
}

.bd-flex-stretch {
    align-items: stretch;
}

/* Justify Content */
.bd-flex-start {
    justify-content: flex-start;
}

.bd-flex-center {
    justify-content: center;
}

.bd-flex-end {
    justify-content: flex-end;
}

.bd-flex-between {
    justify-content: space-between;
}

.bd-flex-around {
    justify-content: space-around;
}

.bd-flex-evenly {
    justify-content: space-evenly;
}

/* Flex Items */
.bd-flex-1 {
    flex: 1;
}

.bd-flex-auto {
    flex: 1 1 auto;
}

.bd-flex-none {
    flex: none;
}

/* =========================================================
   GRID ALIGNMENT
   ========================================================= */

.bd-items-start {
    align-items: start;
}

.bd-items-center {
    align-items: center;
}

.bd-items-end {
    align-items: end;
}

.bd-items-stretch {
    align-items: stretch;
}

.bd-justify-start {
    justify-items: start;
}

.bd-justify-center {
    justify-items: center;
}

.bd-justify-end {
    justify-items: end;
}

.bd-justify-stretch {
    justify-items: stretch;
}

.bd-content-start {
    justify-content: start;
}

.bd-content-center {
    justify-content: center;
}

.bd-content-end {
    justify-content: end;
}

.bd-content-between {
    justify-content: space-between;
}

.bd-content-around {
    justify-content: space-around;
}

.bd-content-evenly {
    justify-content: space-evenly;
}

/* Self Alignment */
.bd-self-start {
    align-self: start;
}

.bd-self-center {
    align-self: center;
}

.bd-self-end {
    align-self: end;
}

.bd-self-stretch {
    align-self: stretch;
}

.bd-justify-self-start {
    justify-self: start;
}

.bd-justify-self-center {
    justify-self: center;
}

.bd-justify-self-end {
    justify-self: end;
}

.bd-justify-self-stretch {
    justify-self: stretch;
}

/* =========================================================
   ORDERING
   ========================================================= */

.bd-order-first {
    order: -1;
}

.bd-order-last {
    order: 999;
}

@media (min-width: 768px) {
    .bd-order-md-0 {
        order: 0;
    }

    .bd-order-md-1 {
        order: 1;
    }

    .bd-order-md-2 {
        order: 2;
    }

    .bd-order-md-first {
        order: -1;
    }

    .bd-order-md-last {
        order: 999;
    }
}

@media (min-width: 1024px) {
    .bd-order-lg-0 {
        order: 0;
    }

    .bd-order-lg-1 {
        order: 1;
    }

    .bd-order-lg-2 {
        order: 2;
    }

    .bd-order-lg-first {
        order: -1;
    }

    .bd-order-lg-last {
        order: 999;
    }
}

/* =========================================================
   VISIBILITY
   ========================================================= */

.bd-hidden {
    display: none !important;
}

.bd-hidden-mobile {
    display: none;
}

@media (min-width: 768px) {
    .bd-hidden-mobile {
        display: revert;
    }

    .bd-hidden-tablet {
        display: none;
    }
}

@media (min-width: 1024px) {
    .bd-hidden-tablet {
        display: revert;
    }

    .bd-hidden-desktop {
        display: none;
    }
}

/* Show Only on Specific Breakpoints */
.bd-show-mobile-only {
    display: revert;
}

@media (min-width: 768px) {
    .bd-show-mobile-only {
        display: none;
    }
}

.bd-show-tablet-only {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .bd-show-tablet-only {
        display: revert;
    }
}

.bd-show-desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .bd-show-desktop-only {
        display: revert;
    }
}

/* =========================================================
   CONTENT + SIDEBAR LAYOUT
   ========================================================= */

.bd-layout-main {
    display: flex;
    flex-direction: column;
    gap: var(--bd-gap-mobile);
}

@media (min-width: 768px) {
    .bd-layout-main {
        gap: var(--bd-gap-tablet);
    }
}

@media (min-width: 1024px) {
    .bd-layout-main {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--bd-gap-desktop);
    }

    .bd-layout-content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .bd-layout-sidebar {
        flex: 0 0 300px;
        max-width: 300px;
    }

    .bd-layout-sidebar-wide {
        flex: 0 0 400px;
        max-width: 400px;
    }

    .bd-layout-main.bd-sidebar-left {
        flex-direction: row-reverse;
    }
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */

/* Text Utilities */
.bd-text-small {
    font-size: 0.9rem;
}

.bd-text-muted {
    color: var(--bd-color-altgrey);
}

.bd-text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bd-text-strong {
    font-weight: 700;
}

.bd-text-left {
    text-align: left;
}

.bd-text-center {
    text-align: center;
}

.bd-text-right {
    text-align: right;
}

/* Display */
.bd-block { display: block; }
.bd-inline { display: inline; }
.bd-inline-block { display: inline-block; }

/* =========================================================
   MARGIN UTILITIES (Clean Specifity)
   ========================================================= */

/* Vertical */
.bd-my-0.bd-my-0 { margin-top: 0; margin-bottom: 0; }
.bd-my-s { margin-top: var(--bd-space-1); margin-bottom: var(--bd-space-1); }
.bd-my-m { margin-top: var(--bd-space-2); margin-bottom: var(--bd-space-2); }
.bd-my-l { margin-top: var(--bd-space-4); margin-bottom: var(--bd-space-4); }

/* Horizontal */
.bd-mx-0.bd-mx-0 { margin-left: 0; margin-right: 0; }
.bd-mx-s { margin-left: var(--bd-space-1); margin-right: var(--bd-space-1); }
.bd-mx-m { margin-left: var(--bd-space-2); margin-right: var(--bd-space-2); }
.bd-mx-l { margin-left: var(--bd-space-4); margin-right: var(--bd-space-4); }
.bd-mx-auto.bd-mx-auto { margin-left: auto; margin-right: auto; }

/* Individual Sides */
.bd-mt-0.bd-mt-0 { margin-top: 0; }
.bd-mt-s { margin-top: var(--bd-space-1); }
.bd-mt-m { margin-top: var(--bd-space-2); }
.bd-mt-l { margin-top: var(--bd-space-4); }
.bd-mt-xl { margin-top: var(--bd-space-6); }
.bd-mt-auto.bd-mt-auto { margin-top: auto; }

.bd-mb-0.bd-mb-0 { margin-bottom: 0; }
.bd-mb-s { margin-bottom: var(--bd-space-1); }
.bd-mb-m { margin-bottom: var(--bd-space-2); }
.bd-mb-l { margin-bottom: var(--bd-space-4); }
.bd-mb-xl { margin-bottom: var(--bd-space-6); }
.bd-mb-auto.bd-mb-auto { margin-bottom: auto; }

.bd-ml-0.bd-ml-0 { margin-left: 0; }
.bd-ml-s { margin-left: var(--bd-space-1); }
.bd-ml-m { margin-left: var(--bd-space-2); }
.bd-ml-l { margin-left: var(--bd-space-4); }
.bd-ml-auto.bd-ml-auto { margin-left: auto; }

.bd-mr-0.bd-mr-0 { margin-right: 0; }
.bd-mr-s { margin-right: var(--bd-space-1); }
.bd-mr-m { margin-right: var(--bd-space-2); }
.bd-mr-l { margin-right: var(--bd-space-4); }
.bd-mr-auto.bd-mr-auto { margin-right: auto; }


/* =========================================================
   PADDING UTILITIES (Clean Specifity)
   ========================================================= */

.bd-p-0.bd-p-0 { padding: 0; }
.bd-p-s { padding: var(--bd-space-1); }
.bd-p-m { padding: var(--bd-space-2); }
.bd-p-l { padding: var(--bd-space-4); }

/* Vertical */
.bd-py-0.bd-py-0 { padding-top: 0; padding-bottom: 0; }
.bd-py-s { padding-top: var(--bd-space-1); padding-bottom: var(--bd-space-1); }
.bd-py-m { padding-top: var(--bd-space-2); padding-bottom: var(--bd-space-2); }
.bd-py-l { padding-top: var(--bd-space-4); padding-bottom: var(--bd-space-4); }
.bd-py-xl { padding-top: var(--bd-space-6); padding-bottom: var(--bd-space-6); }

/* Horizontal */
.bd-px-0.bd-px-0 { padding-left: 0; padding-right: 0; }
.bd-px-s { padding-left: var(--bd-space-1); padding-right: var(--bd-space-1); }
.bd-px-m { padding-left: var(--bd-space-2); padding-right: var(--bd-space-2); }
.bd-px-l { padding-left: var(--bd-space-4); padding-right: var(--bd-space-4); }

/* Sides */
.bd-pt-0.bd-pt-0 { padding-top: 0; }
.bd-pt-s { padding-top: var(--bd-space-1); }
.bd-pt-m { padding-top: var(--bd-space-2); }
.bd-pt-l { padding-top: var(--bd-space-4); }

.bd-pb-0.bd-pb-0 { padding-bottom: 0; }
.bd-pb-s { padding-bottom: var(--bd-space-1); }
.bd-pb-m { padding-bottom: var(--bd-space-2); }
.bd-pb-l { padding-bottom: var(--bd-space-4); }

/* Divider */
.bd-divider {
    height: 1px;
    background: var(--bd-color-alternative);
    margin: 2rem 0;
}

.bd-divider--light {
    opacity: 0.4;
}

.bd-divider--spaced {
    margin: 3rem 0;
}

/* Aspect Ratio */
.bd-aspect-square {
    aspect-ratio: 1 / 1;
}

.bd-aspect-video {
    aspect-ratio: 16 / 9;
}

.bd-aspect-portrait {
    aspect-ratio: 3 / 4;
}

/* Width/Height */
.bd-w-full {
    width: 100%;
}

.bd-h-full {
    height: 100%;
}

.bd-min-w-0 {
    min-width: 0;
}

.bd-min-h-0 {
    min-height: 0;
}

/* Screen Reader Only */
.bd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   BD BUTTON SYSTEM – TOKEN DRIVEN, A11Y SAFE, FREEZE READY
   ========================================================= */

/* -------------------------
   Base Reset
------------------------- */
.bd-btn {
    all: unset;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;

    padding: var(--bd-btn-py) var(--bd-btn-px);
    min-height: var(--bd-btn-min-h);

    font-family: inherit;
    font-size: var(--bd-btn-fs);
    font-weight: var(--bd-btn-weight);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    user-select: none;

    cursor: pointer;

    border-radius: var(--bd-btn-radius);
    border: 2px solid transparent;
    background-color: transparent;
    color: inherit;

    transition: var(--bd-btn-trans);
}

/* -------------------------
   Interaction
------------------------- */
.bd-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-2px);
    box-shadow: var(--bd-btn-shadow);
}

.bd-btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(0);
    box-shadow: var(--bd-btn-shadow-none);
}

.bd-btn:focus-visible {
    outline: 2px solid var(--bd-color-primary);
    outline-offset: 4px;
    box-shadow: var(--bd-btn-focus-ring);
}

/* Motion Safety */
@media (prefers-reduced-motion: reduce) {
    .bd-btn {
        transition: none;
    }

    .bd-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* -------------------------
   Disabled
------------------------- */
.bd-btn:disabled,
.bd-btn[aria-disabled="true"],
.bd-btn.bd-is-disabled {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(100%);
}

/* -------------------------
   Variants
------------------------- */
.bd-btn--primary {
    background-color: var(--bd-color-primary);
    color: var(--bd-color-white);
    border-color: var(--bd-color-primary);
}

.bd-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--bd-color-hover);
    border-color: var(--bd-color-hover);
    color: var(--bd-color-white);
}

.bd-btn--secondary {
    background-color: var(--bd-color-white);
    color: var(--bd-color-primary);
    border-color: var(--bd-color-alternative);
}

.bd-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--bd-color-primary);
    color: var(--bd-color-hover);
}

.bd-btn--outline {
    background-color: transparent;
    color: var(--bd-color-primary);
    border-color: var(--bd-color-primary);
}

.bd-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-btn--text {
    padding: 0;
    min-height: auto;
    border: 0;
    background: transparent;
    color: var(--bd-color-primary);
    box-shadow: none;
    transform: none;
}

.bd-btn--text:hover:not(:disabled):not([aria-disabled="true"]) {
    text-decoration: underline;
    color: var(--bd-color-hover);
}

/* -------------------------
   Sizes
------------------------- */
.bd-btn--s {
    padding: var(--bd-btn-py-s) var(--bd-btn-px-s);
    font-size: var(--bd-btn-fs-s);
    min-height: var(--bd-btn-min-h-s);
}

.bd-btn--l {
    padding: var(--bd-btn-py-l) var(--bd-btn-px-l);
    font-size: var(--bd-btn-fs-l);
    min-height: var(--bd-btn-min-h-l);
}

.bd-btn--full {
    width: 100%;
    display: flex;
}

/* -------------------------
   Icon Support
------------------------- */
.bd-btn svg,
.bd-btn .fa,
.bd-btn .fas,
.bd-btn .far,
.bd-btn .fab {
    display: inline-block;
    line-height: 1;
    color: inherit;
    transition: transform 0.2s ease;
}

.bd-btn:hover .bd-icon-slide {
    transform: translateX(4px);
}

.bd-btn:hover .bd-icon-slide-left {
    transform: translateX(-4px);
}

/* =========================================================
   BD SIDEBAR & WIDGETS
   Global einsetzbar für News, Jobs, etc.
   ========================================================= */

.bd-sidebar {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-width: 0;
    color: var(--bd-color-body);
    font-size: 0.95rem;
    line-height: 1.55;
}

.bd-widget {
    padding: 0;
}

.bd-widget+.bd-widget {
    padding-top: 1.4rem;
}

.bd-widget-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bd-color-altgrey);
    font-weight: 700;
    margin-bottom: 1.25rem;
    display: block;
    border-bottom: 1px solid var(--bd-color-border);
    padding-bottom: 0.6rem;
}

.bd-sidebar p,
.bd-sidebar li,
.bd-sidebar a {
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------
   Standard Sidebar Links (exkl. Buttons & Share Icons)
--------------------------------------------------------- */
.bd-sidebar a:not(.bd-btn):not(.bd-share-icon) {
    color: var(--bd-color-body);
    text-decoration: none;
}

.bd-sidebar a:not(.bd-btn):not(.bd-share-icon):hover {
    color: var(--bd-color-primary);
}

/* ---------------------------------------------------------
   Social Share Buttons (isoliert)
--------------------------------------------------------- */
.bd-share-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bd-share-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-darkgrey);
    transition: 0.2s;
    font-size: 1.15rem;
    text-decoration: none;
}

.bd-share-icon:hover {
    background: var(--bd-color-primary);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Tag Cloud
--------------------------------------------------------- */
.bd-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.bd-tag {
    font-size: 0.85rem;
    color: var(--bd-color-body);
    background: var(--bd-color-lightgrey);
    padding: 6px 12px;
    border-radius: 6px;
    transition: 0.2s;
}

.bd-tag:hover {
    background: var(--bd-color-primary);
    color: #fff;
}

/* ---------------------------------------------------------
   Table of Contents
--------------------------------------------------------- */
.bd-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--bd-color-lightgrey);
}

.bd-toc-list li {
    margin: 0;
}

.bd-toc-list a {
    display: block;
    padding: 0.55rem 0 0.55rem 1.5rem;
    font-size: 0.95rem;
    color: var(--bd-color-body);
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: 0.2s;
}

.bd-toc-list a:hover {
    color: var(--bd-color-primary);
}

.bd-toc-list a.active {
    border-left-color: var(--bd-color-primary);
    color: var(--bd-color-primary);
    font-weight: 600;
}

/* ---------------------------------------------------------
   Contact Carousel
--------------------------------------------------------- */
.bd-carousel-wrapper {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bd-color-border);
    border-radius: var(--bd-card-radius);
    padding: 2.5rem 0;
    background: var(--bd-color-white);
    width: 100%;
}

.bd-contact-slide-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
}

.bd-contact-img-large {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bd-color-secondary);
    margin-bottom: 1rem;
}

.bd-contact-name {
    font-size: 1.15rem;
    margin: 0;
    font-weight: 700;
    color: var(--bd-color-darker);
    line-height: 1.2;
}

.bd-contact-position {
    font-size: 0.8rem;
    color: var(--bd-color-altgrey);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem;
}

.bd-contact-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: center;
}

.bd-carousel-controls {
    margin: 1.5rem 2rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--bd-color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bd-carousel-wrapper button.bd-carousel-arrow {
    all: unset;
    cursor: pointer;
    color: var(--bd-color-altgrey);
    font-size: 1.05rem;
    padding: 0.5rem;
    transition: 0.2s;
}

.bd-carousel-wrapper button.bd-carousel-arrow:hover {
    color: var(--bd-color-primary);
    transform: scale(1.15);
}




/* =========================================================
   FAQ
   ========================================================= */

.bd-faq-section h2 {
    text-align: center;
}

.bd-faq-section>details,
.bd-faq-section .bd-faq-details {
    max-width: var(--bd-container-narrow);
    margin-left: auto;
    margin-right: auto;
}

.bd-faq-details {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.bd-faq-summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 1.6rem 2.5rem 1.2rem 0;
    color: var(--bd-color-darker);
}

.bd-faq-summary::-webkit-details-marker {
    display: none;
}

.bd-faq-summary::after {
    content: "\f067";
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--bd-color-primary);
    transition: transform 0.25s ease;
}

.bd-faq-details[open] .bd-faq-summary::after {
    content: "\f068";
    transform: translateY(-50%) rotate(180deg);
}

.bd-faq-content {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--bd-color-body);
    padding: 0.25rem 0 1.75rem;
    max-width: 720px;
}

@media (hover: hover) {
    .bd-faq-summary:hover {
        color: var(--bd-color-primary);
    }
}

@media (max-width: 768px) {
    .bd-faq-summary {
        font-size: 1.05rem;
        padding-right: 2rem;
    }

    .bd-faq-content {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}



/* =========================================================
   CONTENT FLOW (Article Rhythm)
   Regelt vertikale Abstände innerhalb von Textblöcken
   Utilities dürfen explizit überschreiben
   ========================================================= */

.bd-content-flow > * + * {
    margin-top: var(--bd-space-3);
}

/* h1 = Einstieg / Hero */
.bd-content-flow h1,
.bd-content-flow .bd-h1 {
    margin-top: 0;
}

/* Headline-Rhythmus (nur wenn kein Utility gesetzt ist) */
.bd-content-flow h2:not([class*="bd-mt-"]),
.bd-content-flow .bd-h2:not([class*="bd-mt-"]) {
    margin-top: var(--bd-space-6);
}

.bd-content-flow h3:not([class*="bd-mt-"]),
.bd-content-flow .bd-h3:not([class*="bd-mt-"]) {
    margin-top: var(--bd-space-5);
}

.bd-content-flow h4:not([class*="bd-mt-"]),
.bd-content-flow .bd-h4:not([class*="bd-mt-"]) {
    margin-top: var(--bd-space-4);
}

.bd-content-flow h5:not([class*="bd-mt-"]),
.bd-content-flow h6:not([class*="bd-mt-"]) {
    margin-top: var(--bd-space-3);
}

/* Text & Listen: kein eigener Rhythmus, Flow steuert */
.bd-content-flow p,
.bd-content-flow ul,
.bd-content-flow ol {
    margin-bottom: 0;
}


/* =========================================================
   ICON LISTS (CSS driven, Gutenberg safe)
   ========================================================= */

   /* Inline Feature List */
.bd-list--inline {
    text-align: center;
}

.bd-list--inline li {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 var(--bd-space-3);
    padding-left: 1.6em;
    line-height: 1.4;
}


/* 1. Container Reset */
.bd-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

/* 2. List Item Spacing & Position */
.bd-list li {
    position: relative;
    padding-left: 1.85em;
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.bd-list.bd-flex {
    align-items: stretch;
}
.bd-list.bd-flex li {
display: inline-flex;
    align-items: baseline;
    gap: 0.6em;
    padding-left: 0;
}

.bd-list li:last-child {
    margin-bottom: 0;
}

/* 3. Base Icon Styling (The "Ghost" Icon) */
.bd-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25em;
    text-align: center;
    font-family: "Font Awesome 7 Pro";
    font-weight: 300;
    color: var(--bd-color-primary);
    transition: transform var(--bd-transition-fast);
}

/* 4. Icon Variants (The Content) */
.bd-list--check li::before { 
    content: "\f00c"; 
}

.bd-list--arrow li::before { 
    content: "\f061"; 
}

.bd-list--star li::before { 
    content: "\f005"; 
}

.bd-list--plus li::before { 
    content: "\2b"; 
}

/* 5. Interaction / Effects */
.bd-list--hover li {
    cursor: default;
}

.bd-list--hover li:hover::before {
    transform: translateX(3px);
}

/* =========================================================
   Icon + Text Pattern
   Zweck: Icon + Text (inline, barrierefrei, responsiv)
========================================================= */

.bd-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--bd-color-body);
    text-decoration: none;
    line-height: 1.4;
    margin: 0;
}

.bd-icon-text i {
    font-size: 1rem;
    color: var(--bd-color-primary);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* badge */
.bd-icon-text--badge i {
    background: var(--bd-color-hover);
    color: var(--bd-color-white);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 0.9rem;
}

/* muted */
.bd-icon-text--muted {
    color: var(--bd-color-altgrey);
}

.bd-icon-text--muted i {
    color: var(--bd-color-altgrey);
}

/* small */
.bd-icon-text--sm {
    font-size: 0.9rem;
}

.bd-icon-text--sm i {
    font-size: 0.85rem;
}

.bd-icon-text--sm.bd-icon-text--badge i {
    width: 1.8rem;
    height: 1.8rem;
}

/* large */
.bd-icon-text--lg {
    font-size: 1.05rem;
}

.bd-icon-text--lg i {
    font-size: 1.1rem;
}

.bd-icon-text--lg.bd-icon-text--badge i {
    width: 2.8rem;
    height: 2.8rem;
}

/* strong */
.bd-icon-text--strong {
    font-weight: 500;
}

.bd-icon-text--strong i {
    color: var(--bd-color-primary);
}

/* hover (links only) */
a.bd-icon-text:hover {
    color: var(--bd-color-primary);
}

/* plain icon hover */
a.bd-icon-text:hover i {
    color: var(--bd-color-hover);
}

/* badge hover overrides plain */
a.bd-icon-text.bd-icon-text--badge:hover i {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}



/* =========================================================
   MESSAGES / NOTIFICATIONS
   Für Formular-Feedback oder Hinweise
   ========================================================= */

.bd-msg {
    padding: var(--bd-space-3) var(--bd-space-4);
    border-radius: var(--bd-radius-md);
    margin-bottom: var(--bd-space-4);
    border-left: 4px solid transparent;
    font-size: var(--bd-fs-sm);
}

.bd-msg--success {
    background: #f0fdf4;
    color: #166534;
    border-color: var(--bd-color-success);
}

.bd-msg--error {
    background: #fef2f2;
    color: #991b1b;
    border-color: var(--bd-color-error);
}

/* =========================================================
   GUTENBERG SPECIFIC FIXES
   Sanftes Alignment für den Block-Editor
   ========================================================= */

.wp-block-image.alignfull {
    margin-block: var(--bd-space-5);
}

.wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: nowrap;
}

/* Hilfsklasse für flüssiges Type-Scale-Handling in ACF-Feldern */
.bd-rich-text h1, .bd-rich-text h2, .bd-rich-text h3 {
    text-wrap: balance;
}

/* =========================================================
   CARD SYSTEM
   ========================================================= */

.bd-card {
    background: var(--bd-bg-card);
    border-radius: var(--bd-card-radius);
    box-shadow: var(--bd-card-shadow);
    overflow: hidden;
    transition: all var(--bd-transition-base);
    display: flex;
    flex-direction: column;
}

.bd-card:hover {
    box-shadow: var(--bd-shadow-md);
}

/* Card Header */
.bd-card-header {
    padding: var(--bd-space-3) var(--bd-space-4);
    border-bottom: 1px solid var(--bd-color-border);
}

.bd-card-title {
    font-size: var(--bd-fs-h4);
    font-weight: 600;
    color: var(--bd-color-darker);
    margin: 0;
}

.bd-card-subtitle {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-altgrey);
    margin-top: 0.25rem;
}

/* Card Body */
.bd-card-body {
    padding: var(--bd-space-4);
    flex: 1;
}

.bd-card-body--compact {
    padding: var(--bd-space-3);
}

.bd-card-body--spacious {
    padding: var(--bd-space-5);
}

/* Card Footer */
.bd-card-footer {
    padding: var(--bd-space-3) var(--bd-space-4);
    border-top: 1px solid var(--bd-color-border);
    background: var(--bd-color-lightgrey);
}

/* Card Image */
.bd-card-image {
    width: 100%;
    height: auto;
    display: block;
}

.bd-card-image-wrapper {
    position: relative;
    overflow: hidden;
}

.bd-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bd-transition-slow);
}

.bd-card:hover .bd-card-image-wrapper img {
    transform: scale(1.05);
}

/* Card Variants */
.bd-card--bordered {
    border: 2px solid var(--bd-color-border);
    box-shadow: none;
}

.bd-card--elevated {
    box-shadow: var(--bd-shadow-lg);
}

.bd-card--elevated:hover {
    box-shadow: var(--bd-shadow-xl);
    transform: translateY(-4px);
}

.bd-card--flat {
    box-shadow: none;
}

.bd-card--interactive {
    cursor: pointer;
}

.bd-card--interactive:hover {
    border-color: var(--bd-color-primary);
    box-shadow: var(--bd-shadow-lg);
}

/* Card with Background */
.bd-card--primary {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-card--primary .bd-card-title {
    color: var(--bd-color-white);
}

.bd-card--secondary {
    background: var(--bd-color-secondary);
}

.bd-card--light {
    background: var(--bd-color-lightgrey);
}

/* Horizontal Card */
.bd-card--horizontal {
    flex-direction: row;
}

.bd-card--horizontal .bd-card-image-wrapper {
    flex: 0 0 40%;
    max-width: 40%;
}

.bd-card--horizontal .bd-card-body {
    flex: 1;
}

@media (max-width: 768px) {
    .bd-card--horizontal {
        flex-direction: column;
    }
    
    .bd-card--horizontal .bd-card-image-wrapper {
        flex: 0 0 auto;
        max-width: 100%;
    }
}

/* Blog Card / News Card */
.bd-card-blog {
    background: var(--bd-bg-card);
    border-radius: var(--bd-card-radius);
    overflow: hidden;
    box-shadow: var(--bd-card-shadow);
    transition: all var(--bd-transition-base);
}

.bd-card-blog:hover {
    box-shadow: var(--bd-shadow-lg);
    transform: translateY(-4px);
}

.bd-card-blog-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.bd-card-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bd-transition-slow);
}

.bd-card-blog:hover .bd-card-blog-image img {
    transform: scale(1.08);
}

.bd-card-blog-category {
    position: absolute;
    top: var(--bd-space-2);
    left: var(--bd-space-2);
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    padding: 0.25em 0.75em;
    border-radius: var(--bd-radius-full);
    font-size: var(--bd-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bd-card-blog-content {
    padding: var(--bd-space-4);
}

.bd-card-blog-meta {
    display: flex;
    align-items: center;
    gap: var(--bd-space-3);
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-altgrey);
    margin-bottom: var(--bd-space-2);
}

.bd-card-blog-title {
    font-size: var(--bd-fs-h3);
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: var(--bd-space-2);
    line-height: 1.3;
}

.bd-card-blog-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--bd-transition-fast);
}

.bd-card-blog-title a:hover {
    color: var(--bd-color-primary);
}

.bd-card-blog-excerpt {
    color: var(--bd-color-body);
    line-height: 1.6;
    margin-bottom: var(--bd-space-3);
}

.bd-card-blog-footer {
    padding-top: var(--bd-space-3);
    border-top: 1px solid var(--bd-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Product Card */
.bd-card-product {
    background: var(--bd-bg-card);
    border-radius: var(--bd-card-radius);
    overflow: hidden;
    box-shadow: var(--bd-card-shadow);
    transition: all var(--bd-transition-base);
    text-align: center;
}

.bd-card-product:hover {
    box-shadow: var(--bd-shadow-lg);
}

.bd-card-product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bd-color-lightgrey);
}

.bd-card-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bd-transition-slow);
}

.bd-card-product:hover .bd-card-product-image img {
    transform: scale(1.1);
}

.bd-card-product-badge {
    position: absolute;
    top: var(--bd-space-2);
    right: var(--bd-space-2);
    background: var(--bd-color-error);
    color: var(--bd-color-white);
    padding: 0.35em 0.75em;
    border-radius: var(--bd-radius-full);
    font-size: var(--bd-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.bd-card-product-body {
    padding: var(--bd-space-3);
}

.bd-card-product-title {
    font-size: var(--bd-fs-base);
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: var(--bd-space-1);
}

.bd-card-product-price {
    font-size: var(--bd-fs-h4);
    font-weight: 700;
    color: var(--bd-color-primary);
    margin-bottom: var(--bd-space-3);
}

.bd-card-product-price-old {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-altgrey);
    text-decoration: line-through;
    margin-left: var(--bd-space-1);
}

/* Team Card */
.bd-card-team {
    background: var(--bd-bg-card);
    border-radius: var(--bd-card-radius);
    overflow: hidden;
    box-shadow: var(--bd-card-shadow);
    text-align: center;
    transition: all var(--bd-transition-base);
}

.bd-card-team:hover {
    box-shadow: var(--bd-shadow-lg);
    transform: translateY(-4px);
}

.bd-card-team-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.bd-card-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter var(--bd-transition-slow);
}

.bd-card-team:hover .bd-card-team-image img {
    filter: grayscale(0%);
}

.bd-card-team-body {
    padding: var(--bd-space-4);
}

.bd-card-team-name {
    font-size: var(--bd-fs-h4);
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: 0.25rem;
}

.bd-card-team-role {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: var(--bd-space-3);
}

.bd-card-team-bio {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-body);
    line-height: 1.6;
    margin-bottom: var(--bd-space-3);
}

.bd-card-team-social {
    display: flex;
    gap: var(--bd-space-2);
    justify-content: center;
}

.bd-card-team-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-body);
    border-radius: 50%;
    transition: all var(--bd-transition-fast);
}

.bd-card-team-social a:hover {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    transform: translateY(-2px);
}

/* Feature Card / Icon Card */
.bd-card-feature {
    background: var(--bd-bg-card);
    border-radius: var(--bd-card-radius);
    padding: var(--bd-space-5);
    box-shadow: var(--bd-card-shadow);
    text-align: center;
    transition: all var(--bd-transition-base);
}

.bd-card-feature:hover {
    box-shadow: var(--bd-shadow-lg);
    transform: translateY(-4px);
}

.bd-card-feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--bd-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bd-color-secondary);
    color: var(--bd-color-primary);
    border-radius: var(--bd-radius-xl);
    font-size: 1.75rem;
}

.bd-card-feature-title {
    font-size: var(--bd-fs-h4);
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: var(--bd-space-2);
}

.bd-card-feature-text {
    color: var(--bd-color-body);
    line-height: 1.6;
}

/* Testimonial Card */
.bd-card-testimonial {
    background: var(--bd-bg-card);
    border-radius: var(--bd-card-radius);
    padding: var(--bd-space-5);
    box-shadow: var(--bd-card-shadow);
    position: relative;
}

.bd-card-testimonial-quote {
    font-size: 3rem;
    color: var(--bd-color-secondary);
    line-height: 1;
    margin-bottom: var(--bd-space-2);
}

.bd-card-testimonial-text {
    font-size: var(--bd-fs-lg);
    line-height: 1.7;
    color: var(--bd-color-body);
    margin-bottom: var(--bd-space-4);
    font-style: italic;
}

.bd-card-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--bd-space-3);
}

.bd-card-testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.bd-card-testimonial-name {
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: 0.25rem;
}

.bd-card-testimonial-role {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-altgrey);
}

/* Stat Card / Metric Card */
.bd-card-stat {
    background: var(--bd-bg-card);
    border-radius: var(--bd-card-radius);
    padding: var(--bd-space-4);
    box-shadow: var(--bd-card-shadow);
    transition: all var(--bd-transition-base);
}

.bd-card-stat:hover {
    box-shadow: var(--bd-shadow-md);
}

.bd-card-stat-label {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-altgrey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: var(--bd-space-2);
}

.bd-card-stat-value {
    font-size: var(--bd-fs-h1);
    font-weight: 700;
    color: var(--bd-color-primary);
    line-height: 1;
    margin-bottom: var(--bd-space-2);
}

.bd-card-stat-change {
    font-size: var(--bd-fs-sm);
    font-weight: 600;
}

.bd-card-stat-change--up {
    color: var(--bd-color-success);
}

.bd-card-stat-change--down {
    color: var(--bd-color-error);
}

/* Card Grid */
.bd-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--bd-gap-mobile);
}

@media (min-width: 768px) {
    .bd-card-grid {
        gap: var(--bd-gap-tablet);
    }
}

@media (min-width: 1024px) {
    .bd-card-grid {
        gap: var(--bd-gap-desktop);
    }
}

.bd-card-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.bd-card-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.bd-card-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* =========================================================
   BUTTON ENHANCEMENTS - ICON SUPPORT
   ========================================================= */

/* Icon-only Button */
.bd-btn--icon {
    padding: 0;
    width: var(--bd-btn-min-h);
    height: var(--bd-btn-min-h);
    min-height: auto;
}

.bd-btn--icon.bd-btn--s {
    width: var(--bd-btn-min-h-s);
    height: var(--bd-btn-min-h-s);
}

.bd-btn--icon.bd-btn--l {
    width: var(--bd-btn-min-h-l);
    height: var(--bd-btn-min-h-l);
}

.bd-btn--icon-circle {
    border-radius: 50%;
}

/* Button with Icon Left */
.bd-btn-icon-left {
    flex-direction: row;
}

/* Button with Icon Right */
.bd-btn-icon-right {
    flex-direction: row-reverse;
}

/* Icon Animations */
.bd-btn-icon-bounce:hover i,
.bd-btn-icon-bounce:hover svg {
    animation: bd-icon-bounce 0.5s ease;
}

@keyframes bd-icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.bd-btn-icon-spin:hover i,
.bd-btn-icon-spin:hover svg {
    animation: bd-icon-spin 0.6s ease;
}

@keyframes bd-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.bd-btn-icon-pulse:hover i,
.bd-btn-icon-pulse:hover svg {
    animation: bd-icon-pulse 0.6s ease;
}

@keyframes bd-icon-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Button Group */
.bd-btn-group {
    display: inline-flex;
    gap: 0;
}

.bd-btn-group .bd-btn {
    border-radius: 0;
    margin-left: -1px;
}

.bd-btn-group .bd-btn:first-child {
    border-top-left-radius: var(--bd-btn-radius);
    border-bottom-left-radius: var(--bd-btn-radius);
    margin-left: 0;
}

.bd-btn-group .bd-btn:last-child {
    border-top-right-radius: var(--bd-btn-radius);
    border-bottom-right-radius: var(--bd-btn-radius);
}

.bd-btn-group .bd-btn:hover,
.bd-btn-group .bd-btn:focus {
    z-index: 1;
}

/* Social Buttons */
.bd-btn--facebook {
    background: #1877f2;
    color: var(--bd-color-white);
    border-color: #1877f2;
}

.bd-btn--facebook:hover {
    background: #166fe5;
    border-color: #166fe5;
}

.bd-btn--twitter {
    background: #1da1f2;
    color: var(--bd-color-white);
    border-color: #1da1f2;
}

.bd-btn--twitter:hover {
    background: #1a94da;
    border-color: #1a94da;
}

.bd-btn--linkedin {
    background: #0077b5;
    color: var(--bd-color-white);
    border-color: #0077b5;
}

.bd-btn--linkedin:hover {
    background: #006399;
    border-color: #006399;
}

.bd-btn--instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: var(--bd-color-white);
    border-color: transparent;
}

.bd-btn--whatsapp {
    background: #25d366;
    color: var(--bd-color-white);
    border-color: #25d366;
}

.bd-btn--whatsapp:hover {
    background: #1fc959;
    border-color: #1fc959;
}

.bd-btn--youtube {
    background: #ff0000;
    color: var(--bd-color-white);
    border-color: #ff0000;
}

.bd-btn--youtube:hover {
    background: #cc0000;
    border-color: #cc0000;
}

/* Download Button */
.bd-btn--download {
    position: relative;
    overflow: hidden;
}

.bd-btn--download::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    transition: height var(--bd-transition-base);
}

.bd-btn--download:hover::after {
    height: 100%;
}

/* =========================================================
   DIVIDERS & SEPARATORS
   ========================================================= */

.bd-divider-text {
    display: flex;
    align-items: center;
    gap: var(--bd-space-3);
    margin: var(--bd-space-5) 0;
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-altgrey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.bd-divider-text::before,
.bd-divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bd-color-border);
}

.bd-divider-vertical {
    width: 1px;
    height: 100%;
    background: var(--bd-color-border);
    margin: 0 var(--bd-space-3);
}

/* =========================================================
   CALL-TO-ACTION SECTIONS
   ========================================================= */

.bd-cta {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    padding: var(--bd-space-6) var(--bd-space-4);
    border-radius: var(--bd-radius-xl);
    text-align: center;
}

.bd-cta-title {
    font-size: var(--bd-fs-h2);
    font-weight: 700;
    color: var(--bd-color-white);
    margin-bottom: var(--bd-space-3);
}

.bd-cta-text {
    font-size: var(--bd-fs-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--bd-space-4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.bd-cta-actions {
    display: flex;
    gap: var(--bd-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================
   ACCESSIBILITY / A11Y
   ========================================================= */

/* Screen Reader Only */
.bd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip Links */
.bd-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    padding: var(--bd-space-2) var(--bd-space-3);
    text-decoration: none;
    z-index: 100;
    font-weight: 600;
}

.bd-skip-link:focus {
    top: 0;
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus Visible Enhancement */
*:focus-visible {
    outline: var(--bd-focus-ring-width) solid var(--bd-focus-ring-color);
    outline-offset: var(--bd-focus-ring-offset);
}

/* =========================================================
   BADGES / PILLS
   ========================================================= */

.bd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em 0.75em;
    font-size: var(--bd-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--bd-radius-full);
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-darker);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.bd-badge--primary {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-badge--secondary {
    background: var(--bd-color-secondary);
    color: var(--bd-color-darker);
}

.bd-badge--success {
    background: var(--bd-color-success);
    color: var(--bd-color-white);
}

.bd-badge--warning {
    background: var(--bd-color-warning);
    color: var(--bd-color-darker);
}

.bd-badge--error {
    background: var(--bd-color-error);
    color: var(--bd-color-white);
}

.bd-badge--info {
    background: var(--bd-color-info);
    color: var(--bd-color-white);
}

.bd-badge--outline {
    background: transparent;
    border: 1px solid currentColor;
}

.bd-badge--lg {
    font-size: var(--bd-fs-sm);
    padding: 0.35em 1em;
}

.bd-badge--sm {
    font-size: 0.625rem;
    padding: 0.2em 0.5em;
}

/* Notification Dot */
.bd-badge-dot {
    position: relative;
}

.bd-badge-dot::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bd-color-error);
    border: 2px solid var(--bd-color-white);
}

/* =========================================================
   TOOLTIPS
   ========================================================= */

.bd-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.bd-tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--bd-space-1) var(--bd-space-2);
    background: var(--bd-color-darker);
    color: var(--bd-color-white);
    font-size: var(--bd-fs-xs);
    line-height: 1.4;
    border-radius: var(--bd-radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--bd-transition-fast);
    z-index: var(--bd-z-tooltip);
}

.bd-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--bd-color-darker);
}

.bd-tooltip:hover .bd-tooltip-content,
.bd-tooltip:focus .bd-tooltip-content {
    opacity: 1;
}

/* Tooltip Positions */
.bd-tooltip--top .bd-tooltip-content {
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
}

.bd-tooltip--bottom .bd-tooltip-content {
    top: 100%;
    bottom: auto;
    margin-top: 8px;
    transform: translateX(-50%) translateY(8px);
}

.bd-tooltip--bottom .bd-tooltip-content::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--bd-color-darker);
}

.bd-tooltip--right .bd-tooltip-content {
    left: 100%;
    top: 50%;
    bottom: auto;
    margin-left: 8px;
    transform: translateY(-50%) translateX(8px);
}

.bd-tooltip--left .bd-tooltip-content {
    right: 100%;
    left: auto;
    top: 50%;
    bottom: auto;
    margin-right: 8px;
    transform: translateY(-50%) translateX(-8px);
}

/* =========================================================
   MODALS / DIALOGS
   ========================================================= */

.bd-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--bd-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--bd-space-4);
}

.bd-modal.is-active {
    display: flex;
}

.bd-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--bd-z-modal-backdrop);
}

.bd-modal-content {
    position: relative;
    background: var(--bd-color-white);
    border-radius: var(--bd-radius-xl);
    box-shadow: var(--bd-modal-shadow);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: var(--bd-z-modal);
    animation: bd-modal-in var(--bd-transition-base);
}

@keyframes bd-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.bd-modal-header {
    padding: var(--bd-space-2);
    border-bottom: 1px solid var(--bd-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bd-modal-title {
    font-size: var(--bd-fs-h3);
    font-weight: 600;
    color: var(--bd-color-darker);
    margin: 0;
}

.bd-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--bd-color-body);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bd-radius-sm);
    transition: all var(--bd-transition-fast);
}

.bd-modal-close::before {
    content: "\f00d";
    font-family: "Font Awesome 7 Pro";
    font-weight: 300;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.bd-modal-close:hover {
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-darker);
}

.bd-modal-body {
    padding: var(--bd-space-4);
}

.bd-modal-footer {
    padding: var(--bd-space-4);
    border-top: 1px solid var(--bd-color-border);
    display: flex;
    gap: var(--bd-space-2);
    justify-content: flex-end;
}

/* Modal Sizes */
.bd-modal-content--sm {
    max-width: 400px;
}

.bd-modal-content--lg {
    max-width: 800px;
}

.bd-modal-content--xl {
    max-width: 1200px;
}

.bd-modal-content--full {
    max-width: calc(100vw - var(--bd-space-8));
    max-height: calc(100vh - var(--bd-space-8));
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */

.bd-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bd-space-1);
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-body);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bd-breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--bd-space-1);
}

.bd-breadcrumb a {
    color: var(--bd-color-body);
    text-decoration: none;
    transition: color var(--bd-transition-fast);
}

.bd-breadcrumb a:hover {
    color: var(--bd-color-primary);
}

.bd-breadcrumb li:not(:last-child)::after {
    content: '/';
    color: var(--bd-color-altgrey);
    margin-left: var(--bd-space-1);
}

.bd-breadcrumb li:last-child {
    color: var(--bd-color-darker);
    font-weight: 500;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.bd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bd-space-1);
    margin: var(--bd-space-5) 0;
    list-style: none;
    padding: 0;
}

.bd-pagination a,
.bd-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--bd-space-2);
    border-radius: var(--bd-radius-md);
    color: var(--bd-color-body);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--bd-transition-fast);
}

.bd-pagination a:hover {
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-primary);
}

.bd-pagination .is-active {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-pagination .is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.bd-pagination-prev,
.bd-pagination-next {
    font-weight: 600;
}

/* =========================================================
   PROGRESS BARS
   ========================================================= */

.bd-progress {
    width: 100%;
    height: 8px;
    background: var(--bd-color-lightgrey);
    border-radius: var(--bd-radius-full);
    overflow: hidden;
    position: relative;
}

.bd-progress-bar {
    height: 100%;
    background: var(--bd-color-primary);
    border-radius: var(--bd-radius-full);
    transition: width var(--bd-transition-slow);
    position: relative;
}

.bd-progress--lg {
    height: 12px;
}

.bd-progress--sm {
    height: 4px;
}

.bd-progress--striped .bd-progress-bar {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.bd-progress--animated .bd-progress-bar {
    animation: bd-progress-stripes 1s linear infinite;
}

@keyframes bd-progress-stripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

.bd-progress-bar--success {
    background: var(--bd-color-success);
}

.bd-progress-bar--warning {
    background: var(--bd-color-warning);
}

.bd-progress-bar--error {
    background: var(--bd-color-error);
}

/* =========================================================
   TABS
   ========================================================= */

.bd-tabs {
    display: flex;
    gap: var(--bd-space-1);
    border-bottom: 2px solid var(--bd-color-border);
    margin-bottom: var(--bd-space-4);
}

.bd-tab {
    padding: var(--bd-space-2) var(--bd-space-3);
    color: var(--bd-color-body);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--bd-transition-fast);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.bd-tab:hover {
    color: var(--bd-color-primary);
    border-bottom-color: var(--bd-color-primary);
}

.bd-tab.is-active {
    color: var(--bd-color-primary);
    border-bottom-color: var(--bd-color-primary);
}

.bd-tab-content {
    display: none;
}

.bd-tab-content.is-active {
    display: block;
    animation: bd-tab-in var(--bd-transition-base);
}

@keyframes bd-tab-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Variants */
.bd-tabs--pills {
    border-bottom: none;
    gap: var(--bd-space-2);
}

.bd-tabs--pills .bd-tab {
    border: none;
    border-radius: var(--bd-radius-md);
    margin-bottom: 0;
}

.bd-tabs--pills .bd-tab.is-active {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

/* =========================================================
   ACCORDIONS
   ========================================================= */

.bd-accordion {
    border: 1px solid var(--bd-color-border);
    border-radius: var(--bd-radius-lg);
    overflow: hidden;
}

.bd-accordion-item {
    border-bottom: 1px solid var(--bd-color-border);
}

.bd-accordion-item:last-child {
    border-bottom: none;
}

.bd-accordion-header {
    width: 100%;
    padding: var(--bd-space-3) var(--bd-space-4);
    background: var(--bd-color-white);
    border: none;
    text-align: left;
    font-size: var(--bd-fs-base);
    font-weight: 600;
    color: var(--bd-color-darker);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--bd-transition-fast);
}

.bd-accordion-header:hover {
    background: var(--bd-color-lightgrey);
}

.bd-accordion-icon {
    transition: transform var(--bd-transition-fast);
}

.bd-accordion-item.is-active .bd-accordion-icon {
    transform: rotate(180deg);
}

.bd-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--bd-transition-slow);
}

.bd-accordion-item.is-active .bd-accordion-content {
    max-height: 1000px;
}

.bd-accordion-body {
    padding: var(--bd-space-3) var(--bd-space-4);
    color: var(--bd-color-body);
    line-height: 1.6;
}

/* =========================================================
   TOASTS / SNACKBARS
   ========================================================= */

.bd-toast-container {
    position: fixed;
    top: var(--bd-space-4);
    right: var(--bd-space-4);
    z-index: var(--bd-z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--bd-space-2);
    max-width: 400px;
}

.bd-toast {
    background: var(--bd-color-white);
    border-radius: var(--bd-radius-lg);
    box-shadow: var(--bd-shadow-lg);
    padding: var(--bd-space-3) var(--bd-space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--bd-space-3);
    animation: bd-toast-in var(--bd-transition-base);
    border-left: 4px solid var(--bd-color-primary);
}

@keyframes bd-toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.bd-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bd-color-primary);
}

.bd-toast-content {
    flex: 1;
}

.bd-toast-title {
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: 0.25rem;
}

.bd-toast-message {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-body);
}

.bd-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--bd-color-body);
    opacity: 0.5;
    transition: opacity var(--bd-transition-fast);
}

.bd-toast-close:hover {
    opacity: 1;
}

/* Toast Variants */
.bd-toast--success {
    border-left-color: var(--bd-color-success);
}

.bd-toast--success .bd-toast-icon {
    color: var(--bd-color-success);
}

.bd-toast--warning {
    border-left-color: var(--bd-color-warning);
}

.bd-toast--warning .bd-toast-icon {
    color: var(--bd-color-warning);
}

.bd-toast--error {
    border-left-color: var(--bd-color-error);
}

.bd-toast--error .bd-toast-icon {
    color: var(--bd-color-error);
}

/* =========================================================
   ALERTS
   ========================================================= */

.bd-alert {
    padding: var(--bd-space-3) var(--bd-space-4);
    border-radius: var(--bd-radius-md);
    margin-bottom: var(--bd-space-4);
    border-left: 4px solid transparent;
    display: flex;
    gap: var(--bd-space-3);
}

.bd-alert-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.bd-alert-content {
    flex: 1;
}

.bd-alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.bd-alert-message {
    font-size: var(--bd-fs-sm);
    line-height: 1.5;
}

.bd-alert--success {
    background: #f0fdf4;
    color: #166534;
    border-color: var(--bd-color-success);
}

.bd-alert--warning {
    background: #fffbeb;
    color: #92400e;
    border-color: var(--bd-color-warning);
}

.bd-alert--error {
    background: #fef2f2;
    color: #991b1b;
    border-color: var(--bd-color-error);
}

.bd-alert--info {
    background: #eff6ff;
    color: #1e40af;
    border-color: var(--bd-color-info);
}

/* =========================================================
   TABLES
   ========================================================= */

.bd-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: var(--bd-space-4) 0;
}

.bd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--bd-fs-sm);
}

.bd-table th,
.bd-table td {
    padding: var(--bd-space-2) var(--bd-space-3);
    text-align: left;
    border-bottom: 1px solid var(--bd-color-border);
}

.bd-table thead th {
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-darker);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: var(--bd-fs-xs);
}

.bd-table tbody tr {
    transition: background var(--bd-transition-fast);
}

.bd-table tbody tr:hover {
    background: var(--bd-color-lightgrey);
}

/* Table Variants */
.bd-table--striped tbody tr:nth-child(even) {
    background: var(--bd-color-lightgrey);
}

.bd-table--bordered {
    border: 1px solid var(--bd-color-border);
}

.bd-table--bordered th,
.bd-table--bordered td {
    border: 1px solid var(--bd-color-border);
}

.bd-table--compact th,
.bd-table--compact td {
    padding: var(--bd-space-1) var(--bd-space-2);
}

/* Responsive Table */
@media (max-width: 768px) {
    .bd-table-responsive {
        display: block;
    }
    
    .bd-table-responsive thead {
        display: none;
    }
    
    .bd-table-responsive tr {
        display: block;
        margin-bottom: var(--bd-space-3);
        border: 1px solid var(--bd-color-border);
        border-radius: var(--bd-radius-md);
    }
    
    .bd-table-responsive td {
        display: flex;
        justify-content: space-between;
        padding: var(--bd-space-2);
        border-bottom: 1px solid var(--bd-color-border);
    }
    
    .bd-table-responsive td:last-child {
        border-bottom: none;
    }
    
    .bd-table-responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: var(--bd-space-2);
    }
}

/* =========================================================
   LOADING STATES
   ========================================================= */

/* Spinner */
.bd-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--bd-color-lightgrey);
    border-top-color: var(--bd-color-primary);
    border-radius: 50%;
    animation: bd-spin 0.8s linear infinite;
}

@keyframes bd-spin {
    to {
        transform: rotate(360deg);
    }
}

.bd-spinner--sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.bd-spinner--lg {
    width: 60px;
    height: 60px;
    border-width: 6px;
}

/* Skeleton Screen */
.bd-skeleton {
    background: linear-gradient(
        90deg,
        var(--bd-color-lightgrey) 0%,
        var(--bd-color-alternative) 50%,
        var(--bd-color-lightgrey) 100%
    );
    background-size: 200% 100%;
    animation: bd-skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--bd-radius-md);
}

.bd-skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.bd-skeleton-title {
    height: 2em;
    margin-bottom: 1em;
}

.bd-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.bd-skeleton-image {
    width: 100%;
    height: 200px;
}

/* Button Loading State */
.bd-btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.bd-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: bd-spin 0.6s linear infinite;
}

/* Disabled State */
.bd-btn:disabled,
.bd-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */

/* Text Truncation */
.bd-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Visibility Utilities */
.bd-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .bd-hide-mobile {
        display: block;
    }
    
    .bd-hide-tablet {
        display: none;
    }
}

@media (min-width: 1024px) {
    .bd-hide-tablet {
        display: block;
    }
    
    .bd-hide-desktop {
        display: none;
    }
}

.bd-show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .bd-show-mobile {
        display: none;
    }
}

/* Aspect Ratio Utilities */
.bd-aspect-square {
    aspect-ratio: 1 / 1;
}

.bd-aspect-video {
    aspect-ratio: 16 / 9;
}

.bd-aspect-portrait {
    aspect-ratio: 3 / 4;
}

.bd-aspect-landscape {
    aspect-ratio: 4 / 3;
}

/* Object Fit Utilities */
.bd-object-cover {
    object-fit: cover;
}

.bd-object-contain {
    object-fit: contain;
}

.bd-object-fill {
    object-fit: fill;
}

.bd-object-none {
    object-fit: none;
}

/* Position Utilities */
.bd-sticky {
    position: sticky;
    top: 0;
    z-index: var(--bd-z-sticky);
}

.bd-sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: var(--bd-z-sticky);
}

.bd-fixed {
    position: fixed;
    z-index: var(--bd-z-fixed);
}

/* Overflow Utilities */
.bd-overflow-hidden {
    overflow: hidden;
}

.bd-overflow-auto {
    overflow: auto;
}

.bd-overflow-scroll {
    overflow: scroll;
}

.bd-overflow-x-auto {
    overflow-x: auto;
}

.bd-overflow-y-auto {
    overflow-y: auto;
}

/* Pointer Events */
.bd-pointer-none {
    pointer-events: none;
}

.bd-pointer-auto {
    pointer-events: auto;
}

/* User Select */
.bd-select-none {
    user-select: none;
}

.bd-select-text {
    user-select: text;
}

.bd-select-all {
    user-select: all;
}

/* Cursor */
.bd-cursor-pointer {
    cursor: pointer;
}

.bd-cursor-not-allowed {
    cursor: not-allowed;
}

.bd-cursor-help {
    cursor: help;
}

/* =========================================================
   DROPDOWN MENUS
   ========================================================= */

.bd-dropdown {
    position: relative;
    display: inline-block;
}

.bd-dropdown-toggle {
    cursor: pointer;
}

.bd-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--bd-z-dropdown);
    min-width: 200px;
    background: var(--bd-color-white);
    border-radius: var(--bd-radius-md);
    box-shadow: var(--bd-dropdown-shadow);
    padding: var(--bd-space-2) 0;
    margin-top: var(--bd-space-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--bd-transition-fast);
}

.bd-dropdown.is-active .bd-dropdown-menu,
.bd-dropdown:hover .bd-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bd-dropdown-item {
    display: block;
    padding: var(--bd-space-2) var(--bd-space-3);
    color: var(--bd-color-body);
    text-decoration: none;
    transition: all var(--bd-transition-fast);
    white-space: nowrap;
}

.bd-dropdown-item:hover {
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-primary);
}

.bd-dropdown-item.is-active {
    background: var(--bd-color-secondary);
    color: var(--bd-color-primary);
    font-weight: 600;
}

.bd-dropdown-divider {
    height: 1px;
    background: var(--bd-color-border);
    margin: var(--bd-space-1) 0;
}

.bd-dropdown-header {
    padding: var(--bd-space-1) var(--bd-space-3);
    font-size: var(--bd-fs-xs);
    color: var(--bd-color-altgrey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Dropdown Positions */
.bd-dropdown-menu--right {
    left: auto;
    right: 0;
}

.bd-dropdown-menu--top {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--bd-space-1);
}

/* =========================================================
   POPOVERS
   ========================================================= */

.bd-popover {
    position: relative;
}

.bd-popover-content {
    position: absolute;
    z-index: var(--bd-z-popover);
    background: var(--bd-color-white);
    border: 1px solid var(--bd-color-border);
    border-radius: var(--bd-radius-md);
    box-shadow: var(--bd-shadow-lg);
    padding: var(--bd-space-3);
    min-width: 200px;
    max-width: 300px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--bd-transition-fast);
}

.bd-popover.is-active .bd-popover-content {
    opacity: 1;
    visibility: visible;
}

.bd-popover-title {
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: var(--bd-space-2);
}

.bd-popover-body {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-body);
    line-height: 1.5;
}

/* =========================================================
   FORM ENHANCEMENTS
   ========================================================= */

/* Input Group */
.bd-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.bd-input-group input {
    flex: 1;
    border-radius: 0;
    border-right: none;
}

.bd-input-group input:first-child {
    border-top-left-radius: var(--bd-input-radius);
    border-bottom-left-radius: var(--bd-input-radius);
}

.bd-input-group input:last-child {
    border-top-right-radius: var(--bd-input-radius);
    border-bottom-right-radius: var(--bd-input-radius);
    border-right: 1px solid var(--bd-input-border);
}

.bd-input-group .bd-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-height: var(--bd-input-height);
}

.bd-input-addon {
    display: flex;
    align-items: center;
    padding: 0 var(--bd-space-3);
    background: var(--bd-color-lightgrey);
    border: 1px solid var(--bd-input-border);
    color: var(--bd-color-body);
    font-size: var(--bd-fs-sm);
    white-space: nowrap;
}

.bd-input-addon:first-child {
    border-top-left-radius: var(--bd-input-radius);
    border-bottom-left-radius: var(--bd-input-radius);
    border-right: none;
}

.bd-input-addon:last-child {
    border-top-right-radius: var(--bd-input-radius);
    border-bottom-right-radius: var(--bd-input-radius);
    border-left: none;
}

/* Form Validation */
.bd-input-valid {
    border-color: var(--bd-color-success);
}

.bd-input-valid:focus {
    border-color: var(--bd-color-success);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}

.bd-input-invalid {
    border-color: var(--bd-color-error);
}

.bd-input-invalid:focus {
    border-color: var(--bd-color-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.bd-form-feedback {
    display: block;
    margin-top: var(--bd-space-1);
    font-size: var(--bd-fs-sm);
}

.bd-form-feedback--valid {
    color: var(--bd-color-success);
}

.bd-form-feedback--invalid {
    color: var(--bd-color-error);
}

/* Custom Checkbox */
.bd-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--bd-space-2);
    cursor: pointer;
    user-select: none;
}

.bd-checkbox input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bd-color-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-color-white);
    cursor: pointer;
    position: relative;
    transition: all var(--bd-transition-fast);
}

.bd-checkbox input[type="checkbox"]:checked {
    background: var(--bd-color-primary);
    border-color: var(--bd-color-primary);
}

.bd-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bd-color-white);
    font-size: 14px;
    font-weight: bold;
}

.bd-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--bd-color-primary);
    outline-offset: 2px;
}

/* Custom Radio */
.bd-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--bd-space-2);
    cursor: pointer;
    user-select: none;
}

.bd-radio input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bd-color-border);
    border-radius: 50%;
    background: var(--bd-color-white);
    cursor: pointer;
    position: relative;
    transition: all var(--bd-transition-fast);
}

.bd-radio input[type="radio"]:checked {
    border-color: var(--bd-color-primary);
}

.bd-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--bd-color-primary);
    border-radius: 50%;
}

.bd-radio input[type="radio"]:focus-visible {
    outline: 2px solid var(--bd-color-primary);
    outline-offset: 2px;
}

/* Toggle Switch */
.bd-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--bd-space-2);
    cursor: pointer;
    user-select: none;
}

.bd-toggle input[type="checkbox"] {
    appearance: none;
    width: 48px;
    height: 24px;
    background: var(--bd-color-border);
    border-radius: var(--bd-radius-full);
    position: relative;
    cursor: pointer;
    transition: background var(--bd-transition-fast);
}

.bd-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--bd-color-white);
    border-radius: 50%;
    transition: transform var(--bd-transition-fast);
}

.bd-toggle input[type="checkbox"]:checked {
    background: var(--bd-color-primary);
}

.bd-toggle input[type="checkbox"]:checked::after {
    transform: translateX(24px);
}

.bd-toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--bd-color-primary);
    outline-offset: 2px;
}

/* =========================================================
   RATING STARS
   ========================================================= */

.bd-rating {
    display: inline-flex;
    gap: 0.25rem;
    font-size: 1.25rem;
}

.bd-rating-star {
    color: var(--bd-color-border);
    cursor: pointer;
    transition: color var(--bd-transition-fast);
}

.bd-rating-star.is-active,
.bd-rating-star:hover {
    color: var(--bd-color-warning);
}

.bd-rating--sm {
    font-size: 1rem;
}

.bd-rating--lg {
    font-size: 1.5rem;
}

/* =========================================================
   STEPPER / STEPS INDICATOR
   ========================================================= */

.bd-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bd-space-4) 0;
}

.bd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.bd-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--bd-color-border);
    z-index: -1;
}

.bd-step.is-complete:not(:last-child)::after {
    background: var(--bd-color-primary);
}

.bd-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-body);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: var(--bd-space-2);
    transition: all var(--bd-transition-fast);
}

.bd-step.is-active .bd-step-number {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    box-shadow: 0 0 0 4px rgba(198, 162, 122, 0.2);
}

.bd-step.is-complete .bd-step-number {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-step-label {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-body);
    text-align: center;
}

.bd-step.is-active .bd-step-label {
    color: var(--bd-color-primary);
    font-weight: 600;
}

/* =========================================================
   TIMELINE
   ========================================================= */

.bd-timeline {
    position: relative;
    padding: var(--bd-space-4) 0;
}

.bd-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 2px;
    height: 100%;
    background: var(--bd-color-border);
}

.bd-timeline-item {
    position: relative;
    padding-left: var(--bd-space-6);
    padding-bottom: var(--bd-space-5);
}

.bd-timeline-item:last-child {
    padding-bottom: 0;
}

.bd-timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bd-color-white);
    border: 3px solid var(--bd-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bd-color-primary);
    font-weight: 600;
    z-index: 1;
}

.bd-timeline-content {
    background: var(--bd-color-white);
    border: 1px solid var(--bd-color-border);
    border-radius: var(--bd-radius-md);
    padding: var(--bd-space-4);
}

.bd-timeline-date {
    font-size: var(--bd-fs-sm);
    color: var(--bd-color-primary);
    font-weight: 600;
    margin-bottom: var(--bd-space-1);
}

.bd-timeline-title {
    font-size: var(--bd-fs-h4);
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: var(--bd-space-2);
}

.bd-timeline-text {
    color: var(--bd-color-body);
    line-height: 1.6;
}

/* =========================================================
   CHIPS / TAGS (Interactive)
   ========================================================= */

.bd-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--bd-space-1);
    padding: 0.35em 0.75em;
    background: var(--bd-color-lightgrey);
    color: var(--bd-color-darker);
    border-radius: var(--bd-radius-full);
    font-size: var(--bd-fs-sm);
    font-weight: 500;
    transition: all var(--bd-transition-fast);
}

.bd-chip:hover {
    background: var(--bd-color-secondary);
}

.bd-chip-remove {
    background: none;
    border: none;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bd-color-body);
    border-radius: 50%;
    transition: all var(--bd-transition-fast);
}

.bd-chip-remove:hover {
    background: var(--bd-color-border);
    color: var(--bd-color-darker);
}

.bd-chip--primary {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-chip--outline {
    background: transparent;
    border: 1px solid var(--bd-color-border);
}

/* =========================================================
   CAROUSEL / SLIDER INDICATORS
   ========================================================= */

.bd-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bd-space-2);
    padding: var(--bd-space-3) 0;
}

.bd-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bd-color-border);
    cursor: pointer;
    transition: all var(--bd-transition-fast);
}

.bd-carousel-dot:hover {
    background: var(--bd-color-altgrey);
}

.bd-carousel-dot.is-active {
    background: var(--bd-color-primary);
    transform: scale(1.2);
}

/* =========================================================
   EMPTY STATES
   ========================================================= */

.bd-empty-state {
    text-align: center;
    padding: var(--bd-space-7) var(--bd-space-4);
}

.bd-empty-state-icon {
    font-size: 4rem;
    color: var(--bd-color-border);
    margin-bottom: var(--bd-space-3);
}

.bd-empty-state-title {
    font-size: var(--bd-fs-h3);
    font-weight: 600;
    color: var(--bd-color-darker);
    margin-bottom: var(--bd-space-2);
}

.bd-empty-state-text {
    color: var(--bd-color-body);
    max-width: 400px;
    margin: 0 auto var(--bd-space-4);
    line-height: 1.6;
}

/* =========================================================
   NAVIGATION / MENU
   ========================================================= */

.bd-nav {
    display: flex;
    align-items: center;
    gap: var(--bd-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bd-nav-item {
    position: relative;
}

.bd-nav-link {
    display: block;
    padding: var(--bd-space-2) var(--bd-space-3);
    color: var(--bd-color-body);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--bd-transition-fast);
    border-radius: var(--bd-radius-md);
}

.bd-nav-link:hover,
.bd-nav-link.is-active {
    color: var(--bd-color-primary);
    background: var(--bd-color-lightgrey);
}

/* Vertical Navigation */
.bd-nav--vertical {
    flex-direction: column;
    align-items: stretch;
}

.bd-nav--vertical .bd-nav-link {
    width: 100%;
}

/* Pills Navigation */
.bd-nav--pills .bd-nav-link {
    border-radius: var(--bd-radius-full);
}

.bd-nav--pills .bd-nav-link.is-active {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

/* Underline Navigation */
.bd-nav--underline {
    border-bottom: 2px solid var(--bd-color-border);
}

.bd-nav--underline .bd-nav-link {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.bd-nav--underline .bd-nav-link:hover,
.bd-nav--underline .bd-nav-link.is-active {
    background: transparent;
    border-bottom-color: var(--bd-color-primary);
}

/* Mobile Menu Toggle */
.bd-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--bd-space-2);
    cursor: pointer;
    color: var(--bd-color-darker);
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .bd-menu-toggle {
        display: block;
    }
    
    .bd-nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: var(--bd-color-white);
        flex-direction: column;
        align-items: stretch;
        padding: var(--bd-space-5) var(--bd-space-3);
        box-shadow: var(--bd-shadow-xl);
        z-index: var(--bd-z-modal);
        transition: left var(--bd-transition-base);
        overflow-y: auto;
    }
    
    .bd-nav.is-active {
        left: 0;
    }
    
    .bd-nav-link {
        width: 100%;
    }
}

/* Mega Menu */
.bd-nav-mega {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 600px;
    background: var(--bd-color-white);
    border-radius: var(--bd-radius-lg);
    box-shadow: var(--bd-dropdown-shadow);
    padding: var(--bd-space-5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--bd-transition-fast);
    z-index: var(--bd-z-dropdown);
}

.bd-nav-item:hover .bd-nav-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bd-nav-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bd-space-4);
}

/* =========================================================
   HEADER / TOP BAR
   ========================================================= */

.bd-header {
    background: var(--bd-color-white);
    border-bottom: 1px solid var(--bd-color-border);
    padding: var(--bd-space-3) 0;
    position: sticky;
    top: 0;
    z-index: var(--bd-z-sticky);
    transition: all var(--bd-transition-base);
}

.bd-header--transparent {
    background: transparent;
    border-bottom: none;
}

.bd-header--scrolled {
    box-shadow: var(--bd-shadow-sm);
}

.bd-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bd-space-4);
}

.bd-header-logo img {
    max-height: 50px;
    width: auto;
}

.bd-header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.bd-header-actions {
    display: flex;
    align-items: center;
    gap: var(--bd-space-2);
}

/* =========================================================
   FOOTER
   ========================================================= */

.bd-footer {
    background: var(--bd-color-darker);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--bd-space-7) 0 var(--bd-space-4);
}

.bd-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--bd-transition-fast);
}

.bd-footer a:hover {
    color: var(--bd-color-white);
}

.bd-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--bd-space-5);
    margin-bottom: var(--bd-space-6);
}

.bd-footer-title {
    color: var(--bd-color-white);
    font-size: var(--bd-fs-h5);
    font-weight: 600;
    margin-bottom: var(--bd-space-3);
}

.bd-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bd-footer-links li {
    margin-bottom: var(--bd-space-2);
}

.bd-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--bd-space-4);
    margin-top: var(--bd-space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bd-space-3);
    font-size: var(--bd-fs-sm);
}

@media (max-width: 768px) {
    .bd-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================================================
   HERO SECTIONS
   ========================================================= */

.bd-hero {
    position: relative;
    padding: var(--bd-space-7) 0;
    overflow: hidden;
}

.bd-hero--fullheight {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.bd-hero--centered {
    text-align: center;
}

.bd-hero-content {
    position: relative;
    z-index: 2;
}

.bd-hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--bd-color-darker);
    margin-bottom: var(--bd-space-3);
    line-height: 1.1;
}

.bd-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--bd-color-body);
    margin-bottom: var(--bd-space-5);
    max-width: 600px;
}

.bd-hero--centered .bd-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.bd-hero-actions {
    display: flex;
    gap: var(--bd-space-3);
    flex-wrap: wrap;
}

.bd-hero--centered .bd-hero-actions {
    justify-content: center;
}

/* Hero with Background Image */
.bd-hero--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--bd-color-white);
}

.bd-hero--image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.bd-hero--image .bd-hero-title,
.bd-hero--image .bd-hero-subtitle {
    color: var(--bd-color-white);
}

/* Hero with Gradient */
.bd-hero--gradient {
    background: linear-gradient(135deg, var(--bd-color-primary) 0%, var(--bd-color-hover) 100%);
    color: var(--bd-color-white);
}

.bd-hero--gradient .bd-hero-title,
.bd-hero--gradient .bd-hero-subtitle {
    color: var(--bd-color-white);
}

/* =========================================================
   BANNER / ANNOUNCEMENT BAR
   ========================================================= */

.bd-banner {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    padding: var(--bd-space-2) 0;
    text-align: center;
    font-size: var(--bd-fs-sm);
    position: relative;
}

.bd-banner a {
    color: var(--bd-color-white);
    text-decoration: underline;
    font-weight: 600;
}

.bd-banner-close {
    position: absolute;
    right: var(--bd-space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--bd-color-white);
    cursor: pointer;
    padding: var(--bd-space-1);
    font-size: 1.25rem;
    opacity: 0.8;
    transition: opacity var(--bd-transition-fast);
}

.bd-banner-close:hover {
    opacity: 1;
}

/* =========================================================
   OVERLAY / BACKDROP
   ========================================================= */

.bd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: var(--bd-z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--bd-transition-base);
    backdrop-filter: blur(4px);
}

.bd-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   LIGHTBOX / IMAGE GALLERY
   ========================================================= */

.bd-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--bd-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--bd-space-4);
}

.bd-lightbox.is-active {
    display: flex;
}

.bd-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    animation: bd-lightbox-in var(--bd-transition-base);
}

@keyframes bd-lightbox-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.bd-lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--bd-radius-lg);
}

.bd-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: var(--bd-color-white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--bd-color-darker);
    transition: all var(--bd-transition-fast);
}

.bd-lightbox-close:hover {
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

.bd-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--bd-color-darker);
    transition: all var(--bd-transition-fast);
}

.bd-lightbox-nav:hover {
    background: var(--bd-color-white);
    transform: translateY(-50%) scale(1.1);
}

.bd-lightbox-prev {
    left: var(--bd-space-4);
}

.bd-lightbox-next {
    right: var(--bd-space-4);
}

.bd-lightbox-caption {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--bd-color-white);
    font-size: var(--bd-fs-sm);
}

/* Gallery Grid */
.bd-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--bd-space-2);
}

.bd-gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--bd-radius-md);
    cursor: pointer;
}

.bd-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bd-transition-slow);
}

.bd-gallery-item:hover img {
    transform: scale(1.1);
}

.bd-gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--bd-transition-fast);
}

.bd-gallery-item:hover::after {
    opacity: 1;
}

/* =========================================================
   SEARCH BAR / SEARCH BOX
   ========================================================= */

.bd-search {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.bd-search-input {
    width: 100%;
    padding: var(--bd-space-2) var(--bd-space-5) var(--bd-space-2) var(--bd-space-3);
    border: 1px solid var(--bd-input-border);
    border-radius: var(--bd-radius-full);
    font-size: var(--bd-fs-base);
    transition: all var(--bd-transition-fast);
}

.bd-search-input:focus {
    border-color: var(--bd-color-primary);
    outline: none;
    box-shadow: var(--bd-input-focus-ring);
}

.bd-search-button {
    position: absolute;
    right: var(--bd-space-1);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--bd-transition-fast);
}

.bd-search-button:hover {
    background: var(--bd-color-hover);
    transform: translateY(-50%) scale(1.05);
}

/* Search Results Dropdown */
.bd-search-results {
    position: absolute;
    top: calc(100% + var(--bd-space-1));
    left: 0;
    right: 0;
    background: var(--bd-color-white);
    border-radius: var(--bd-radius-lg);
    box-shadow: var(--bd-dropdown-shadow);
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--bd-transition-fast);
    z-index: var(--bd-z-dropdown);
}

.bd-search.is-active .bd-search-results {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bd-search-result-item {
    padding: var(--bd-space-3);
    border-bottom: 1px solid var(--bd-color-border);
    cursor: pointer;
    transition: background var(--bd-transition-fast);
}

.bd-search-result-item:last-child {
    border-bottom: none;
}

.bd-search-result-item:hover {
    background: var(--bd-color-lightgrey);
}

/* =========================================================
   FILTER BAR
   ========================================================= */

.bd-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--bd-space-3);
    padding: var(--bd-space-3);
    background: var(--bd-color-lightgrey);
    border-radius: var(--bd-radius-md);
    flex-wrap: wrap;
}

.bd-filter-group {
    display: flex;
    align-items: center;
    gap: var(--bd-space-2);
}

.bd-filter-label {
    font-size: var(--bd-fs-sm);
    font-weight: 600;
    color: var(--bd-color-darker);
}

.bd-filter-select {
    padding: var(--bd-space-1) var(--bd-space-2);
    border: 1px solid var(--bd-color-border);
    border-radius: var(--bd-radius-md);
    background: var(--bd-color-white);
    font-size: var(--bd-fs-sm);
    cursor: pointer;
}

.bd-filter-active {
    display: flex;
    align-items: center;
    gap: var(--bd-space-2);
    flex-wrap: wrap;
}

.bd-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--bd-space-1);
    padding: 0.35em 0.75em;
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    border-radius: var(--bd-radius-full);
    font-size: var(--bd-fs-xs);
    font-weight: 500;
}

.bd-filter-tag-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    opacity: 0.8;
    transition: opacity var(--bd-transition-fast);
}

.bd-filter-tag-remove:hover {
    opacity: 1;
}

/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */

.bd-back-to-top {
    position: fixed;
    bottom: var(--bd-space-4);
    right: var(--bd-space-4);
    width: 50px;
    height: 50px;
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    box-shadow: var(--bd-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--bd-transition-base);
    z-index: var(--bd-z-fixed);
}

.bd-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bd-back-to-top:hover {
    background: var(--bd-color-hover);
    transform: translateY(-4px);
}

/* =========================================================
   COOKIE CONSENT / GDPR BANNER
   ========================================================= */

.bd-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bd-color-darker);
    color: var(--bd-color-white);
    padding: var(--bd-space-4);
    z-index: var(--bd-z-fixed);
    box-shadow: var(--bd-shadow-xl);
    transform: translateY(100%);
    transition: transform var(--bd-transition-base);
}

.bd-cookie-banner.is-visible {
    transform: translateY(0);
}

.bd-cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bd-space-4);
    flex-wrap: wrap;
}

.bd-cookie-text {
    flex: 1;
    min-width: 250px;
    font-size: var(--bd-fs-sm);
    line-height: 1.6;
}

.bd-cookie-text a {
    color: var(--bd-color-white);
    text-decoration: underline;
}

.bd-cookie-actions {
    display: flex;
    gap: var(--bd-space-2);
    flex-shrink: 0;
}

/* =========================================================
   VIDEO PLAYER WRAPPER
   ========================================================= */

.bd-video-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bd-color-darker);
    border-radius: var(--bd-radius-lg);
    overflow: hidden;
}

.bd-video-player video,
.bd-video-player iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bd-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: opacity var(--bd-transition-fast);
}

.bd-video-overlay:hover {
    background: rgba(0, 0, 0, 0.7);
}

.bd-video-play-button {
    width: 80px;
    height: 80px;
    background: var(--bd-color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bd-color-primary);
    font-size: 2rem;
    transition: all var(--bd-transition-base);
}

.bd-video-overlay:hover .bd-video-play-button {
    transform: scale(1.1);
    background: var(--bd-color-primary);
    color: var(--bd-color-white);
}

/* =========================================================
   COMPARISON SLIDER (Before/After)
   ========================================================= */

.bd-comparison-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--bd-radius-lg);
}

.bd-comparison-image {
    width: 100%;
    height: auto;
    display: block;
}

.bd-comparison-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.bd-comparison-overlay img {
    width: 200%;
    height: 100%;
    object-fit: cover;
}

.bd-comparison-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: var(--bd-color-white);
    border-radius: 50%;
    box-shadow: var(--bd-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    z-index: 2;
}

.bd-comparison-divider {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bd-color-white);
    transform: translateX(-50%);
}

/* =========================================================
   PRINT STYLES
   ========================================================= */

@media print {
    .bd-sidebar, .bd-btn, .bd-carousel-controls, header, footer {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
        font-size: 10pt;
    }
    
    .bd-container {
        max-width: 100%;
        padding: 0;
    }
}