/*
Theme Name: FileZafe Divi Child
Theme URI: https://neu.filezafe.de
Description: Child-Theme der FileZafe Marketing-Webseite. Enthaelt Brand-Tokens (Lila/Lime), Geist-Font, Mobile-Menue, Pill/Card/Tick-List-Utilities.
Author: SynVation GmbH
Author URI: https://synvation.de
Template: Divi
Version: 1.0.0
Text Domain: filezafe-divi-child
*/

/* ============================================================
   1. DESIGN TOKENS — fileZafe Brand
   ============================================================ */
:root {
    --bp-primary:        #481058;                /* ink — Lila/Aubergine */
    --bp-primary-2:      #5A1E6C;                /* ink2 — heller fuer Hover */
    --bp-primary-3:      #6C3080;                /* ink3 — Borders auf dunkel */
    --bp-primary-soft:   rgba(72, 16, 88, 0.10); /* Pill-BG, sehr dezent */
    --bp-secondary:      #90C020;                /* lime/teal — CTA-Akzent */
    --bp-secondary-deep: #72A015;                /* lime dunkler — Hover */
    --bp-secondary-glow: #BBE070;                /* lime hell — Highlights */
    --bp-signal:         #E8A93C;                /* warmes Gelb — selten */
    --bp-sand:           #E8D5A3;                /* sekundaer-Akzent */

    --bp-text:           #481058;                /* Primaer-Text = ink */
    --bp-muted:          rgba(72, 16, 88, 0.62); /* Body-Sekundaer */
    --bp-muted-2:        rgba(72, 16, 88, 0.42); /* Caption */
    --bp-mute-dark:      rgba(255, 255, 255, 0.68);
    --bp-mute-dark-2:    rgba(255, 255, 255, 0.42);

    --bp-bg-dark:        #481058;                /* dunkle Surfaces = ink */
    --bp-bg-soft:        #F6F3EC;                /* paper — body BG */
    --bp-bg-soft-2:      #EEEADF;                /* paper-2 — section-alt */
    --bp-bg-soft-3:      #DFD9C9;                /* paper-3 — Borders auf hell */
    --bp-white:          #FAFAF7;                /* echtes Weiss fuer Cards */
    --bp-border:         rgba(72, 16, 88, 0.08);

    --bp-radius:         16px;
    --bp-radius-sm:      8px;
    --bp-radius-lg:      24px;
    --bp-radius-pill:    999px;

    --bp-shadow-sm:      0 1px 2px rgba(72, 16, 88, 0.04), 0 8px 24px rgba(72, 16, 88, 0.06);
    --bp-shadow-lg:      0 4px 12px rgba(72, 16, 88, 0.08), 0 16px 48px rgba(72, 16, 88, 0.12);
}

/* ============================================================
   2. TYPOGRAPHY — Geist
   ============================================================ */
body, .et_pb_module, input, select, textarea, button {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--bp-text);
}
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
    font-family: 'Geist', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bp-text);
    line-height: 1.05;
}
h1, .et_pb_module h1 { font-size: clamp(40px, 8vw, 96px); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
h2, .et_pb_module h2 { font-size: clamp(32px, 5vw, 64px); font-weight: 700; letter-spacing: -0.03em; }
h3, .et_pb_module h3 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 600; letter-spacing: -0.02em; }
h4, .et_pb_module h4 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }

.bp-eyebrow {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--bp-muted);
}
.bp-caption {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bp-muted-2);
}

/* ============================================================
   3. BUTTONS — module_class="bp-btn" / "bp-btn-secondary" / "bp-btn-dark" / "bp-btn-lime"
   ============================================================ */
.et_pb_button.bp-btn, a.bp-btn, .bp-btn {
    background-color: var(--bp-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--bp-radius-pill) !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-block;
    transition: transform .18s, box-shadow .18s, background .18s;
}
.et_pb_button.bp-btn:hover, a.bp-btn:hover, .bp-btn:hover {
    background-color: var(--bp-primary-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(72, 16, 88, 0.30);
}
.et_pb_button.bp-btn:after, a.bp-btn:after { content: "" !important; display: none !important; }

.et_pb_button.bp-btn-secondary, a.bp-btn-secondary, .bp-btn-secondary {
    background-color: transparent !important;
    color: var(--bp-text) !important;
    border: 2px solid var(--bp-text) !important;
    border-radius: var(--bp-radius-pill) !important;
    padding: 12px 26px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-block;
}
.et_pb_button.bp-btn-secondary:hover, a.bp-btn-secondary:hover, .bp-btn-secondary:hover {
    background-color: var(--bp-text) !important;
    color: #fff !important;
}
.et_pb_button.bp-btn-secondary:after { content: "" !important; display: none !important; }

.bp-btn-dark { background-color: var(--bp-bg-dark) !important; color: #fff !important; }
.bp-btn-dark:hover { background-color: #2A0A33 !important; color: #fff !important; }

.et_pb_button.bp-btn-lime, a.bp-btn-lime, .bp-btn-lime {
    background-color: var(--bp-secondary) !important;
    color: var(--bp-primary) !important;
    border: none !important;
    border-radius: var(--bp-radius-pill) !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-block;
    transition: transform .18s, box-shadow .18s, background .18s;
}
.et_pb_button.bp-btn-lime:hover, a.bp-btn-lime:hover, .bp-btn-lime:hover {
    background-color: var(--bp-secondary-deep) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(114, 160, 21, 0.40);
}
.et_pb_button.bp-btn-lime:after, a.bp-btn-lime:after { content: "" !important; display: none !important; }

/* ============================================================
   4. PILL (Eyebrow-Style)
   Use: <span class="bp-pill">DSGVO-konform</span>
   ============================================================ */
.bp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--bp-radius-pill);
    background: var(--bp-primary-soft);
    color: var(--bp-primary);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.bp-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bp-secondary);
    flex-shrink: 0;
}
.bp-pill--lime { background: rgba(144, 192, 32, 0.15); color: var(--bp-secondary-deep); }
.bp-pill--lime::before { background: var(--bp-primary); }

/* ============================================================
   5. BACKGROUNDS
   ============================================================ */
.bp-bg-brand-gradient {
    background: linear-gradient(135deg, var(--bp-primary) 0%, var(--bp-primary-2) 100%);
    color: #fff;
}
.bp-bg-brand-gradient h1, .bp-bg-brand-gradient h2, .bp-bg-brand-gradient h3, .bp-bg-brand-gradient h4 { color: #fff; }
.bp-bg-lime-gradient {
    background: linear-gradient(135deg, var(--bp-secondary) 0%, var(--bp-secondary-glow) 100%);
}
.bp-bg-dark { background: var(--bp-bg-dark); color: #fff; }
.bp-bg-dark h1, .bp-bg-dark h2, .bp-bg-dark h3, .bp-bg-dark h4 { color: #fff; }
.bp-bg-soft { background: var(--bp-bg-soft); }
.bp-bg-soft-2 { background: var(--bp-bg-soft-2); }
.bp-bg-paper { background: var(--bp-bg-soft); }

.bp-honeycomb-bg {
    background-image: url('assets/img/honeycomb-pattern.svg');
    background-repeat: repeat;
    background-size: 56px 64px;
}

/* ============================================================
   6. CARDS
   ============================================================ */
.bp-card {
    background: var(--bp-white);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow-sm);
    padding: 28px;
}
.bp-card--lg { padding: 36px; }
.bp-card--highlight {
    border: 2px solid var(--bp-secondary);
    box-shadow: var(--bp-shadow-lg);
    position: relative;
}
.bp-card--highlight::before {
    content: "Empfehlung";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bp-secondary);
    color: var(--bp-primary);
    padding: 4px 14px;
    border-radius: var(--bp-radius-pill);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ============================================================
   7. TICK LIST (lime checkmarks auf Brand)
   ============================================================ */
.bp-tick-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.bp-tick-list li {
    position: relative;
    padding-left: 32px !important;
    margin-bottom: 10px !important;
    line-height: 1.5;
}
.bp-tick-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bp-secondary);
    color: var(--bp-primary);
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   8. FOOTER (Theme Builder section bekommt dunklen ink-BG)
   ============================================================ */
#main-footer, .et-l--footer { background: var(--bp-bg-dark); color: #fff; }
#main-footer a, .et-l--footer a { color: rgba(255, 255, 255, 0.85); }
#main-footer a:hover, .et-l--footer a:hover { color: var(--bp-secondary); }
#main-footer h1, #main-footer h2, #main-footer h3, #main-footer h4,
.et-l--footer h1, .et-l--footer h2, .et-l--footer h3, .et-l--footer h4 { color: #fff; }

/* ============================================================
   9. UTILITIES
   ============================================================ */
.bp-text-muted { color: var(--bp-muted) !important; }
.bp-text-lime  { color: var(--bp-secondary) !important; }
.bp-text-ink   { color: var(--bp-primary) !important; }
.bp-img-shadow img {
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow-lg);
}
.bp-highlight {
    background: linear-gradient(180deg, transparent 60%, var(--bp-secondary-glow) 60%);
    padding: 0 4px;
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    .bp-card { padding: 22px; }
    .bp-card--lg { padding: 26px; }
}
@media (max-width: 640px) {
    .bp-pill { font-size: 11px; padding: 5px 12px; }
}