/*
Theme Name: Blade Child - Healthy-Biking
Template: blade
Version: 9.0
Description: Child Theme fuer Healthy-Biking mit WPBakery-Optimierungen
Author: Healthy-Biking
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap');

/* ============================================================
   HINTERGRUNDFARBEN – !important ueberschreibt Blade-Theme #00798c
   Verwendung: el_class="hb-bg-sand" am [vc_row]
   ============================================================ */

/* Warmes Sandbeige – Philosophie, Säulen, Testimonials, BIKE-FIT */
.hb-bg-sand,
.hb-bg-sand .vc_row,
.wpb_row.hb-bg-sand,
.vc_row.hb-bg-sand {
    background-color: #f5f1e8 !important;
}

/* Helles Graubeige – BIKE-FIT Teaser, Coach-CTA */
.hb-bg-hellbeige,
.wpb_row.hb-bg-hellbeige,
.vc_row.hb-bg-hellbeige {
    background-color: #ede8dc !important;
}

/* Weiss – Karten-Hintergründe */
.hb-bg-weiss,
.wpb_row.hb-bg-weiss,
.vc_row.hb-bg-weiss {
    background-color: #ffffff !important;
}

/* Mittleres Waldgrün – Natur-Bonus Sektion */
.hb-bg-mittelgruen,
.wpb_row.hb-bg-mittelgruen,
.vc_row.hb-bg-mittelgruen {
    background-color: #2d5c3e !important;
}

/* Dunkles Waldgrün – Statistiken, Angebote */
.hb-bg-dunkelgruen,
.wpb_row.hb-bg-dunkelgruen,
.vc_row.hb-bg-dunkelgruen {
    background-color: #1a3d2b !important;
}

/* Sehr dunkles Grün – Statistik-Karten */
.hb-bg-tiefschwarzgruen,
.wpb_row.hb-bg-tiefschwarzgruen,
.vc_row.hb-bg-tiefschwarzgruen {
    background-color: #132b1e !important;
}

/* Teal – Akzent */
.hb-bg-teal,
.wpb_row.hb-bg-teal,
.vc_row.hb-bg-teal {
    background-color: #3ab5c5 !important;
}

/* ============================================================
   TEXTFARBEN AUF HELLEN HINTERGRÜNDEN
   ============================================================ */
.hb-bg-sand h1, .hb-bg-sand h2, .hb-bg-sand h3,
.hb-bg-sand h4, .hb-bg-sand h5, .hb-bg-sand h6,
.hb-bg-hellbeige h1, .hb-bg-hellbeige h2, .hb-bg-hellbeige h3,
.hb-bg-weiss h1, .hb-bg-weiss h2, .hb-bg-weiss h3 {
    color: #1a3d2b !important;
}

.hb-bg-sand p, .hb-bg-sand li,
.hb-bg-hellbeige p, .hb-bg-hellbeige li,
.hb-bg-weiss p, .hb-bg-weiss li {
    color: #2c4a38 !important;
}

/* ============================================================
   TEXTFARBEN AUF DUNKLEN HINTERGRÜNDEN
   ============================================================ */
.hb-bg-dunkelgruen h1, .hb-bg-dunkelgruen h2, .hb-bg-dunkelgruen h3,
.hb-bg-dunkelgruen h4, .hb-bg-dunkelgruen h5, .hb-bg-dunkelgruen h6,
.hb-bg-mittelgruen h1, .hb-bg-mittelgruen h2, .hb-bg-mittelgruen h3,
.hb-bg-tiefschwarzgruen h1, .hb-bg-tiefschwarzgruen h2, .hb-bg-tiefschwarzgruen h3 {
    color: #ffffff !important;
}

.hb-bg-dunkelgruen p, .hb-bg-dunkelgruen li,
.hb-bg-mittelgruen p, .hb-bg-mittelgruen li,
.hb-bg-tiefschwarzgruen p, .hb-bg-tiefschwarzgruen li {
    color: #c8e6c9 !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Grüner Primär-Button */
.hb-btn-green,
a.hb-btn-green {
    background-color: #1a3d2b !important;
    color: #ffffff !important;
    border: none !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: background-color 0.2s ease !important;
}
.hb-btn-green:hover,
a.hb-btn-green:hover {
    background-color: #2d5c3e !important;
    color: #ffffff !important;
}

/* Teal Sekundär-Button */
.hb-btn-teal,
a.hb-btn-teal {
    background-color: #3ab5c5 !important;
    color: #0f2018 !important;
    border: none !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: background-color 0.2s ease !important;
}
.hb-btn-teal:hover,
a.hb-btn-teal:hover {
    background-color: #2da0b0 !important;
    color: #0f2018 !important;
}

/* Outline-Button auf dunklem Hintergrund */
.hb-btn-outline-white,
a.hb-btn-outline-white {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
}
.hb-btn-outline-white:hover,
a.hb-btn-outline-white:hover {
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* ============================================================
   TYPOGRAFIE – Barlow Condensed fuer alle Ueberschriften
   ============================================================ */
.hb-heading-xl {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(40px, 6vw, 72px) !important;
    line-height: 1.0 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
}

.hb-heading-lg {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}

.hb-heading-md {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(22px, 3vw, 36px) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.hb-label {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}

/* ============================================================
   ABSTÄNDE – Sektions-Padding
   ============================================================ */
.hb-section-padding {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

.hb-section-padding-lg {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

/* ============================================================
   STATISTIK-KARTEN
   ============================================================ */
.hb-stat-card {
    background-color: #1e3d2a !important;
    border-radius: 8px !important;
    padding: 32px 24px !important;
    text-align: center !important;
}

/* ============================================================
   SÄULEN-KARTEN
   ============================================================ */
.hb-saeule-card {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* ============================================================
   NATUR-BONUS KARTEN
   ============================================================ */
.hb-natur-card {
    background-color: rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    text-align: center !important;
}

/* ============================================================
   HERO-BEREICH – Vollbildbreite
   Blade-Theme begrenzt Inhaltsbereich auf max-width.
   hb-hero-row bricht den Container aus und macht die Row bildschirmfüllend.
   ============================================================ */

/* Hero-Row: volle Bildschirmbreite, kein Container-Limit */
.hb-hero-row,
.wpb_row.hb-hero-row {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Container innerhalb der Hero-Row aufbrechen */
.hb-hero-row > .container,
.hb-hero-row > .grve-container,
.wpb_row.hb-hero-row > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* WPBakery Column innerhalb Hero-Row: kein Padding */
.hb-hero-row .wpb_column > .vc_column-inner,
.hb-hero-row .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Hero-Div selbst: volle Breite */
.hb-hero-row .wpb_text_column,
.hb-hero-row .wpb_wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

.hb-hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(15, 32, 24, 0.5) 0%,
        rgba(15, 32, 24, 0.3) 50%,
        rgba(15, 32, 24, 0.6) 100%
    ) !important;
}