/**
 * Blueprint Blocks — Frontend CSS
 * Version 1.3.1
 *
 * Farb-System:
 * Blocks nutzen CSS Custom Properties in dieser Prioritaet:
 *   1. --bbl-*        (expliziter Block-Override per ACF-Feld)
 *   2. --bp-ctx-*     (Section-Kontext, gesetzt von template-pagebuilder.php)
 *   3. --color-*      (globale Theme-Farben aus BP Options)
 *   4. Harte Fallbacks
 */

/* ─── Gemeinsame Block-Elemente ─────────────────────────────────────────── */

.bbl-eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bbl-eyebrow-color, var(--bp-ctx-primary, var(--color-primary, #e8834a)));
    margin-bottom: 1rem;
    font-family: sans-serif;
}

/* ─── Hero (bbl_hero) ────────────────────────────────────────────────────── */

.bbl-hero__headline {
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--bbl-headline-color, var(--bp-ctx-text, var(--color-heading, #1a1a2e)));
    margin: 0 0 1.5rem;
}
.bbl-hero__highlight {
    color: var(--bbl-highlight-color, var(--bp-ctx-primary, var(--color-primary, #e8834a)));
}
.bbl-hero__text {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
    color: var(--bbl-text-color, var(--bp-ctx-text-muted, var(--color-text-muted, #6b7280)));
    max-width: 640px;
    margin: 0 0 2rem;
}
.bbl-hero__image { width: 100%; height: auto; display: block; }
.bbl-stat-card {
    background: var(--bbl-surface);
    border-radius: 12px;
    padding: 2rem 2.5rem;
}
.bbl-stat-card__number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--bp-ctx-primary, var(--color-primary, #e8834a));
    line-height: 1;
    margin-bottom: 0.5rem;
}
.bbl-stat-card__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-ctx-text-muted, var(--color-text-muted, #6b7280));
}

/* Hero Ausrichtung */
.bbl-hero--center { text-align: center; }
.bbl-hero--center .bbl-hero__text { margin-left: auto; margin-right: auto; }
.bbl-hero--right  { text-align: right; }
.bbl-hero--right  .bbl-hero__text { margin-left: auto; }

@media (max-width: 63.9375em) {
    .bbl-hero .cell.large-4 { margin-top: 2rem; }
}

/* ─── Hero Full (bbl_hero_full) ──────────────────────────────────────────── */

.bbl-hero-full {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4rem;
    height: 100%;
    min-height: inherit;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.bbl-hero-full--center { align-items: center; text-align: center; }
.bbl-hero-full--right  { align-items: flex-end; text-align: right; }

.bbl-hero-full__eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bbl-eyebrow-color, rgba(255,255,255,0.5));
    margin-bottom: 1.25rem;
    font-family: sans-serif;
}
.bbl-hero-full__headline {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--bbl-headline-color, var(--bp-ctx-text, #ffffff));
    line-height: 1.0;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}
.bbl-hero-full__highlight {
    display: block;
    color: var(--bbl-highlight-color, var(--bp-ctx-primary, #e8834a));
}
.bbl-hero-full__text {
    font-size: clamp(0.875rem, 1.5vw, 0.9375rem);
    color: var(--bbl-text-color, var(--bp-ctx-text-muted, rgba(255,255,255,0.6)));
    line-height: 1.75;
    max-width: 440px;
    margin: 0 0 2rem;
    font-family: sans-serif;
}
.bbl-hero-full--center .bbl-hero-full__text { margin-left: auto; margin-right: auto; }
.bbl-hero-full__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.bbl-hero-full--center .bbl-hero-full__actions { justify-content: center; }

@media (max-width: 39.9375em) {
    .bbl-hero-full { padding: 2rem 1.5rem; min-height: 360px; }
    .bbl-hero-full__headline { font-size: clamp(2rem, 8vw, 2.5rem); }
}

/* ─── CTA (bbl_cta) ─────────────────────────────────────────────────────── */

.bbl-cta__headline {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--bbl-headline-color, var(--bp-ctx-text, var(--color-heading, #1a1a2e)));
    margin: 0 0 1rem;
}
.bbl-cta__text {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    color: var(--bbl-text-color, var(--bp-ctx-text-muted, var(--color-text-muted, #6b7280)));
    margin: 0 0 2rem;
    max-width: 640px;
}
.bbl-cta--centered .bbl-cta__text { margin-left: auto; margin-right: auto; }
.bbl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}
.bbl-cta--centered .bbl-cta__actions { justify-content: center; }

@media (max-width: 768px) {
    .bbl-cta__actions--split { justify-content: flex-start; margin-top: 1.5rem; }
}

/* ─── Intent-System ─────────────────────────────────────────────────────── */
/*
 * Zwei semantische Stufen:
 *   .bbl-intent-content    — ruhig, strukturiert (features)
 *   .bbl-intent-conversion — visuell dominant, Fokuspunkt (cta)
 *
 * Nutzt ausschliesslich bestehende Tokens: --bbl-surface-2, --bbl-btn-color etc.
 * Kein Hardcoding, kein neues Markup ausser der Klasse auf dem Block-Root.
 */

/* content: keine Overrides — surface-System laeuft wie Standard */
.bbl-intent-content {}

/* conversion: stärkerer Fokus via padding, button-weight und surface */
.bbl-intent-conversion {
    /* Option A: eigener Surface-Layer — hebt CTA von umliegenden Blocks ab */
    background: var(--bbl-surface-2);
    /* Option C: subtiler Divider nach oben */
    border-top: 1px solid var(--bp-ctx-border, var(--color-border, #d1d9e0));
    /* Micro Polish: definierte Box */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    /* Mehr Luft — CTA-Block hat mehr Atem-Raum */
    padding: 2.5rem;
}

/* CTA Headline: etwas groesser und schwerer als Features-Headline */
.bbl-intent-conversion .bbl-cta__headline {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    letter-spacing: -0.03em;
}

/* CTA Primary Button: groesser und schwerer als Standard */
.bbl-intent-conversion .bp-button--primary {
    padding: 0.875rem 2rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    /* Kein box-shadow override — bbl-btn-color reicht fuer Dominanz */
}

/* CTA Hollow Button: staerkere Border fuer Sichtbarkeit */
.bbl-intent-conversion .bp-button--hollow {
    border-width: 2px;
}

/* ─── Features (bbl_features) ───────────────────────────────────────────── */

/* ==========================================================================
   Surface / Depth Tokens (Blueprint Blocks)

   Drei Tiefenebenen — dynamisch ueber Section-Kontext und Theme-Vars:

   --bbl-bg        Hintergrund (= Section-Hintergrund)
   --bbl-surface   Erste Ebene drüber — Cards, Panels, Icons
   --bbl-surface-2 Zweite Ebene — Hover-States, stärkere Betonung

   Light Mode:
     surface   = leicht dunkler als bg  (#f0f2f5 oder color-surface)
     surface-2 = noch dunkler           (leichtes Grau)

   Dark Mode (is-dark Section):
     surface   = leicht heller als bg   (weiss ~6% Opacity)
     surface-2 = deutlich heller        (weiss ~12% Opacity)

   Die Tokens sind reine CSS-Custom-Properties — kein PHP, kein Hardcoding.
   Alle Blocks nutzen var(--bbl-surface) statt direkt auf Kontextwerte zu zeigen.
   ========================================================================== */

/* Surface Tokens — Light-Mode Defaults (gelten ausserhalb von .is-dark Sections) */
:root {
    --bbl-bg:        var(--color-bg, #ffffff);
    --bbl-surface:   var(--color-surface, #e8ecf0);   /* sichtbar dunkler als weiss */
    --bbl-surface-2: color-mix(in srgb, var(--color-surface, #e8ecf0) 60%, #b0b8c4 40%);
}

/* Surface Tokens — Dark-Mode Override (greift wenn Section .is-dark hat) */
.is-dark {
    --bbl-bg:        var(--bp-ctx-bg, #1a1a2e);
    --bbl-surface:   rgba(255, 255, 255, 0.11);   /* +10-15% heller als bg */
    --bbl-surface-2: rgba(255, 255, 255, 0.20);   /* +20-25% heller */
}

.bbl-features__header { margin-bottom: 3rem; }

.bbl-feature-item {
    height: 100%;
    padding: 2rem;
    text-align: left;
}
.bbl-feature-item--card {
    /* Surface Token statt direkt --bp-ctx-card-bg:
       gibt der Card eine klare eigene Ebene relativ zum Section-Hintergrund */
    background: var(--bbl-surface);
    border: 1px solid var(--bp-ctx-card-border, var(--color-border, #d1d9e0));
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bbl-feature-item--card:hover {
    /* Hover: eine Ebene tiefer -> surface-2 */
    background: var(--bbl-surface-2);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}
.bbl-feature-item--flat {
    padding: 1.5rem 0;
    border-top: 1px solid var(--bp-ctx-border, rgba(255, 255, 255, 0.12));
}
.bbl-feature-item--icon-top { text-align: center; padding: 2rem 1.5rem; }

.bbl-feature-item__icon {
    border-radius: 4px;
    /* Icon-Hintergrund = surface — konsistent mit Card-Hintergrund */
    background: var(--bbl-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--bbl-eyebrow-color, var(--bp-ctx-primary, var(--color-primary, #e8834a)));
}
.bbl-feature-item--icon-top .bbl-feature-item__icon { margin-left: auto; margin-right: auto; }
.bbl-feature-item__icon i { font-size: inherit; line-height: 1; display: block; }

.bbl-feature-item__img { margin-bottom: 1.25rem; border-radius: 4px; overflow: hidden; }
.bbl-feature-item__img img { width: 100%; height: auto; display: block; }

.bbl-feature-item__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bbl-headline-color, var(--bp-ctx-text, var(--color-heading, #1a1a2e)));
    margin: 0 0 0.75rem;
}
.bbl-feature-item__text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--bbl-text-color, var(--bp-ctx-text-muted, var(--color-text-muted, #6b7280)));
    margin: 0 0 1rem;
}
.bbl-feature-item__link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bp-ctx-primary, var(--color-primary, #e8834a));
    text-decoration: none;
}
.bbl-feature-item__link:hover { opacity: 0.8; }

/* ─── Text + Bild (bbl_text_image) ──────────────────────────────────────── */

.bbl-ti__headline {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--bbl-headline-color, var(--bp-ctx-text, var(--color-heading, #1a1a2e)));
    margin: 0 0 1.25rem;
}
.bbl-ti__text {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    line-height: 1.75;
    color: var(--bbl-text-color, var(--bp-ctx-text-muted, var(--color-text-muted, #6b7280)));
    margin: 0 0 1.75rem;
}
.bbl-ti__image { width: 100%; height: auto; display: block; }

@media (max-width: 63.9375em) {
    .bbl-text-image .grid-x { flex-direction: column; }
    .bbl-text-image .bbl-ti__image-col { order: -1 !important; margin-bottom: 1.5rem; }
}

/* ─── Bild (bbl_image) ───────────────────────────────────────────────────── */

.bbl-image-block { width: 100%; }
.bbl-image-block__caption {
    font-size: 0.8rem;
    color: var(--bp-ctx-text-muted, var(--color-text-muted, #6b7280));
    margin-top: 0.5rem;
    text-align: center;
}

/* ─── Buttons — alle Blocks ─────────────────────────────────────────────── */

.bbl-hero .bp-button,
.bbl-hero-full .bp-button,
.bbl-cta .bp-button,
.bbl-ti .bp-button,
.bbl-features .bp-button {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    border-radius: var(--btn-border-radius, 4px);
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.1s ease;
    font-family: sans-serif;
    cursor: pointer;
}

.bbl-hero .bp-button--primary,
.bbl-hero-full .bp-button--primary,
.bbl-cta .bp-button--primary,
.bbl-ti .bp-button--primary,
.bbl-features .bp-button--primary {
    background: var(--bbl-btn-color, var(--bp-ctx-primary, var(--color-primary, #e8834a)));
    color: var(--bbl-btn-text-color, #ffffff) !important;
    border: 2px solid var(--bbl-btn-color, var(--bp-ctx-primary, var(--color-primary, #e8834a)));
}

.bbl-hero .bp-button--hollow,
.bbl-hero-full .bp-button--hollow,
.bbl-cta .bp-button--hollow,
.bbl-ti .bp-button--hollow,
.bbl-features .bp-button--hollow {
    background: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.35);
}

.bbl-hero .bp-button--secondary,
.bbl-cta .bp-button--secondary {
    background: var(--color-secondary, #515f74);
    color: #ffffff !important;
    border: 2px solid var(--color-secondary, #515f74);
}

.bbl-hero .bp-button:hover,
.bbl-hero-full .bp-button:hover,
.bbl-cta .bp-button:hover,
.bbl-ti .bp-button:hover,
.bbl-features .bp-button:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* ─── Mobile Column Order ────────────────────────────────────────────────── */

@media (max-width: 39.9375em) {
    .cell.mobile-first { order: -1 !important; }
    .cell.mobile-last  { order: 99 !important; }
}

/* ─── Section Hero Full — strukturell ───────────────────────────────────── */

.pagebuilder-section--bbl_hero_full {
    display: flex;
    flex-direction: column;
}
.pagebuilder-section--bbl_hero_full .section-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pagebuilder-section--bbl_hero_full .grid-container,
.pagebuilder-section--bbl_hero_full .grid-container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pagebuilder-section--bbl_hero_full .bbl-hero-full { flex: 1; }

/* ─── Flush Sections (kein Gutter bei Bild-Spalten) ────────────────────── */

.pagebuilder-section.section-flush .grid-x.grid-margin-x {
    margin-left: 0;
    margin-right: 0;
}
.pagebuilder-section.section-flush .grid-x.grid-margin-x > .cell {
    padding-left: 0;
    padding-right: 0;
}