/* ============================================================
   BOCKMARKETING – GLOBALES DESIGN-SYSTEM
   Einmalig einfügen in: Divi → Theme-Optionen → Allgemeine Einstellungen → Custom CSS
   Ersetzt die bisher auf jeder Seite wiederholten Basis-Regeln
   (Font-Import, Farbvariablen, Eyebrow, Button, Ghost-Word-Grundgerüst).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,800;1,600&family=Caveat:wght@600;700&display=swap');

:root {
    --bm-dark: #004a63;
    --bm-teal: #00688b;
    --bm-gold: #d4a373;
    --bm-text: #4a4a4a;
    --bm-heading: #1a1a1a;
    --bm-bg: #f7f6f3;
    --bm-bg-alt: #f9f8f5;
    --bm-border: #e5e2dc;
}

/* ===== EYEBROW (Label über Überschriften) =====
   Verwendung: <div class="bm-eyebrow"><span class="bm-eyebrow-line"></span><span class="bm-eyebrow-text">Label</span></div> */
.bm-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.bm-eyebrow-line { width: 24px; height: 1px; background: var(--bm-gold); display: inline-block; }
.bm-eyebrow-text { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--bm-gold); }

/* ===== BUTTON (Haupt-CTA) =====
   Verwendung: <a href="..." class="bm-btn">Unverbindlich sprechen</a> */
.bm-btn { display: inline-block; background: var(--bm-gold); color: #fff !important; padding: 15px 32px; border-radius: 4px; text-decoration: none !important; font-weight: 700; font-size: 14.5px; transition: filter 0.25s ease; }
.bm-btn:hover { filter: brightness(1.06); }
.bm-btn-outline { display: inline-block; background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,0.35); padding: 14px 28px; border-radius: 4px; text-decoration: none !important; font-weight: 700; font-size: 14.5px; transition: border-color 0.25s ease; }
.bm-btn-outline:hover { border-color: #fff; }

/* ===== ÜBERSCHRIFTEN (Playfair-Basis) =====
   Verwendung: <h1 class="bm-h1">...</h1>  /  <h2 class="bm-h2">...</h2> */
.bm-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    line-height: 1.25; font-weight: 600; margin: 0 0 16px;
}
.bm-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    line-height: 1.3; font-weight: 600; margin: 0;
}
.bm-accent-teal { color: var(--bm-teal); font-style: italic; }
.bm-accent-gold { color: var(--bm-gold); font-style: italic; }

/* ===== GHOST-WORD (großes, blasses Hintergrund-Wort) =====
   Verwendung: <span class="bm-ghost bm-ghost--dark">Wort</span> auf dunklem Grund
              <span class="bm-ghost bm-ghost--light">Wort</span> auf hellem Grund
   Elternelement braucht: position: relative; overflow: hidden; */
.bm-ghost {
    position: absolute; z-index: 0;
    font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600;
    font-size: clamp(60px, 8vw, 120px); line-height: 1;
    white-space: nowrap; user-select: none; pointer-events: none;
}
.bm-ghost--dark { color: rgba(255,255,255,0.045); }
.bm-ghost--light { color: rgba(0,104,139,0.05); }

/* ===== HANDSCHRIFT-LABEL (kleine, schräge Notiz-Optik) =====
   Verwendung: <span class="bm-handnote bm-handnote--gold">Ihre Frage</span> */
.bm-handnote {
    font-family: 'Caveat', cursive; font-weight: 700; font-size: 18px;
    display: block; transform: rotate(-3deg); transform-origin: left center;
    margin-bottom: 12px; line-height: 1.2;
}
.bm-handnote--gold { color: var(--bm-gold); }
.bm-handnote--teal { color: var(--bm-teal); }

/* ===== NUMMERIERUNG (kursive Playfair-Zahl, z. B. 01/02/03) =====
   Verwendung: <span class="bm-num">01</span> */
.bm-num {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600;
    color: var(--bm-gold); display: block; line-height: 1;
}

/* ===== ZITAT (Playfair kursiv, Gold-Rand links) =====
   Verwendung: <p class="bm-quote bm-quote--light">Zitat</p> auf hellem Grund (Textfarbe Petrol)
              <p class="bm-quote bm-quote--dark">Zitat</p> auf dunklem Grund (Textfarbe Gold) */
.bm-quote {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600;
    line-height: 1.55; border-left: 2px solid var(--bm-gold); padding-left: 22px; margin: 0;
}
.bm-quote--light { color: var(--bm-teal); }
.bm-quote--dark { color: var(--bm-gold); }

/* ===== STATISTIK (große Playfair-Zahl + kleines Label darunter) =====
   Verwendung: <div><span class="bm-stat-value">15.000+</span><span class="bm-stat-label">Beschreibung</span></div> */
.bm-stat-value {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    display: block; line-height: 1.1; margin-bottom: 4px;
}
.bm-stat-value--gold { color: var(--bm-gold); }
.bm-stat-label { font-size: 13px; line-height: 1.5; }

/* ===== HANDSCHRIFT-LABEL (kleine, schräge Notiz-Optik) =====
   Verwendung: <span class="bm-handnote q">Ihre Frage</span> (Gold) / <span class="bm-handnote a">Mein Angebot</span> (Petrol) */
.bm-handnote {
    font-family: 'Caveat', cursive; font-weight: 700; font-size: 18px;
    display: block; transform: rotate(-3deg); transform-origin: left center;
    margin-bottom: 12px; line-height: 1.2;
}
.bm-handnote.q { color: var(--bm-gold); margin-top: 0; }
.bm-handnote.a { color: var(--bm-teal); margin-top: 20px; margin-bottom: 14px; }