/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0.1
Description: AutoExpert BG — html2wp-beaver child theme (tokens + residue).
Author: html2wp-beaver
template: bb-theme
*/

/* =========================================================================
   0. Material Symbols utility (font loaded locally via assets/fonts.css)
   ========================================================================= */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined[data-weight="fill"],
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }

/* =========================================================================
   1. Design tokens (mirror DESIGN.md + Tailwind config)
   ========================================================================= */
:root {
  --ae-bg:               #f8f9ff;
  --ae-surface-card:     #ffffff;
  --ae-surface-low:      #eff4ff;
  --ae-surface:          #e5eeff;
  --ae-surface-high:     #dce9ff;
  --ae-surface-highest:  #d3e4fe;
  --ae-surface-dim:      #cbdbf5;
  --ae-hero:             #213145;
  --ae-text:             #0b1c30;
  --ae-text-muted:       #45464d;
  --ae-on-dark:          #ffffff;
  --ae-on-hero:          #bec6e0;
  --ae-primary:          #000000;
  --ae-primary-hover:    #131b2e;
  --ae-cta:              #fd761a;
  --ae-cta-hover:        #9d4300;
  --ae-accent-soft:      #ffdbca;
  --ae-border:           #c6c6cd;
  --ae-border-strong:    #76777d;
  --ae-chip-info-bg:     #dae2fd;
  --ae-chip-info-text:   #131b2e;
  --ae-chip-neutral-bg:  #e5eeff;
  --ae-error-bg:         #ffdad6;
  --ae-error-text:       #93000a;
  --ae-error:            #ba1a1a;

  --ae-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ae-radius-sm:   4px;
  --ae-radius-md:   8px;
  --ae-radius-lg:   12px;
  --ae-radius-full: 9999px;

  --ae-gutter: 24px;
  --ae-section-py: 96px;
  --ae-card-pad: 24px;
}

/* =========================================================================
   2. Base typography (Inter) + page background
   ========================================================================= */
body.fl-builder,
body {
  font-family: var(--ae-font);
  background-color: var(--ae-bg);
  color: var(--ae-text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body, .fl-page-content { background-color: var(--ae-bg); }

.fl-heading, .fl-heading-text,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ae-font);
  color: var(--ae-text);
  letter-spacing: -0.01em;
}
.fl-rich-text, .fl-rich-text p { font-family: var(--ae-font); }

/* =========================================================================
   3. Section helpers (background + vertical padding on the row content wrap)
   ========================================================================= */
.ae > .fl-row-content-wrap { padding-left: 20px; padding-right: 20px; }
@media (min-width: 768px) { .ae > .fl-row-content-wrap { padding-left: 48px; padding-right: 48px; } }
.ae-sec-pad > .fl-row-content-wrap { padding-top: var(--ae-section-py); padding-bottom: var(--ae-section-py); }
.ae-bg-surface  > .fl-row-content-wrap { background-color: var(--ae-bg); }
.ae-bg-lowest   > .fl-row-content-wrap { background-color: var(--ae-surface-card); }
.ae-bg-low      > .fl-row-content-wrap { background-color: var(--ae-surface-low); }
.ae-bg-dim      > .fl-row-content-wrap { background-color: var(--ae-surface-dim); }
.ae-bg-highest  > .fl-row-content-wrap { background-color: var(--ae-surface-highest); }
.ae-bg-hero     > .fl-row-content-wrap { background-color: var(--ae-hero); }
.ae-bg-primary  > .fl-row-content-wrap { background-color: var(--ae-primary); }

/* Section titles / intro */
.ae-sec-title .fl-heading-text { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.ae-sec-intro .fl-rich-text,
.ae-sec-intro .fl-rich-text p { font-size: 16px; line-height: 24px; color: var(--ae-text-muted); }
.ae-center .fl-rich-text { text-align: center; }
.ae-center .fl-heading, .ae-center .fl-heading-text { text-align: center; }
.ae-center { text-align: center; }
.ae-body-lg .fl-rich-text, .ae-body-lg .fl-rich-text p { font-size: 18px; line-height: 28px; color: var(--ae-text-muted); }
.ae-intro-narrow { max-width: 66%; }
@media (max-width: 767px) { .ae-intro-narrow { max-width: 100%; } }

/* Box module: kill the default BB module bottom margin inside boxes */
.fl-module-box .fl-module { margin-bottom: 0; }

/* =========================================================================
   4. Header / Nav (Themer)
   ========================================================================= */
.ae-header.fl-row .fl-row-content-wrap { background-color: rgba(248,249,255,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(198,198,205,0.4); padding-top: 14px; padding-bottom: 14px; }
.ae-brand .fl-rich-text { display: flex; align-items: center; gap: 8px; font-size: 24px; line-height: 1; font-weight: 700; color: var(--ae-text); letter-spacing: -0.01em; }
.ae-brand .material-symbols-outlined { font-size: 28px; color: var(--ae-text); }
.ae-nav .fl-menu .menu > li > a { font-size: 14px; font-weight: 500; color: var(--ae-text-muted); padding: 8px 12px; border-radius: var(--ae-radius-sm); }
.ae-nav .fl-menu .menu > li > a:hover { color: var(--ae-text); background-color: var(--ae-surface-low); }
.ae-langtoggle .fl-rich-text { display: inline-flex; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-sm); overflow: hidden; background: var(--ae-surface-card); font-size: 12px; font-weight: 600; }
.ae-langtoggle .fl-rich-text span { display: inline-block; padding: 4px 12px; }
.ae-langtoggle .fl-rich-text .on { background: var(--ae-surface-dim); color: var(--ae-primary); border-right: 1px solid var(--ae-border); }
.ae-langtoggle .fl-rich-text .off { color: var(--ae-text-muted); }

/* =========================================================================
   5. Buttons (variants beyond BB fields → effects only)
   ========================================================================= */
.fl-button-wrap a.fl-button,
a.fl-button { font-family: var(--ae-font); display: inline-flex; align-items: center; gap: 8px; }
/* Ghost / glass button (hero secondary) */
.ae-btn-ghost a.fl-button { background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(198,198,205,0.3); color: #fff; }
.ae-btn-ghost a.fl-button:hover { background: rgba(255,255,255,0.2); }
.ae-btn-ghost a.fl-button .fl-button-text { color: #fff !important; }
/* Outline pill (reviews) */
.ae-btn-outline a.fl-button { background: transparent; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-full); color: var(--ae-text); }
.ae-btn-outline a.fl-button:hover { background: var(--ae-surface-high); }
.ae-btn-outline a.fl-button .fl-button-text { color: var(--ae-text) !important; }
/* Shadows for accent CTAs */
.ae-btn-accent a.fl-button { box-shadow: 0 10px 15px -3px rgba(15,23,42,0.18); }
.ae-btn-accent a.fl-button:hover { box-shadow: 0 20px 25px -5px rgba(15,23,42,0.22); }

/* =========================================================================
   6. Hero
   ========================================================================= */
.ae-hero-row .fl-row-content-wrap { min-height: 620px; display: flex; align-items: center; background-size: cover; background-position: center; }
.ae-hero-row .fl-row-content-wrap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(33,49,69,0.92), rgba(33,49,69,0.45)); z-index: 0; }
.ae-hero-row .fl-row-content { position: relative; z-index: 1; }
.ae-hero-inner { max-width: 760px; }
.ae-hero-inner .fl-heading-text { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.ae-badge .fl-rich-text { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--ae-radius-full); background: rgba(229,238,255,0.1); border: 1px solid rgba(198,198,205,0.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ae-surface-highest); font-size: 12px; font-weight: 600; }
.ae-badge .dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--ae-cta); display: inline-block; }
.ae-lead .fl-rich-text, .ae-lead .fl-rich-text p { font-size: 18px; line-height: 28px; color: var(--ae-on-hero); }

/* =========================================================================
   7. Trust bar (logo strip)
   ========================================================================= */
.ae-trust > .fl-row-content-wrap { padding-top: 32px; padding-bottom: 32px; }
.ae-trust-caption .fl-rich-text { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ae-text-muted); }
.ae-logos { opacity: 0.7; }
.ae-logo { opacity: 0.7; }
.ae-logo .fl-rich-text { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; color: var(--ae-text); }
.ae-logo .material-symbols-outlined { font-size: 32px; }

/* =========================================================================
   8. Service cards
   ========================================================================= */
.ae-card { position: relative; background: var(--ae-surface-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); overflow: hidden; transition: box-shadow .3s ease; }
.ae-card:hover { box-shadow: 0 4px 6px -1px rgba(15,23,42,0.1); }
.ae-card-photo img, .ae-card-photo .fl-photo-img { width: 100% !important; height: 192px; object-fit: cover; display: block; }
.ae-card-photo .fl-photo-content { line-height: 0; }
.ae-card-title .fl-heading-text { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ae-text); }
.ae-card-text .fl-rich-text, .ae-card-text .fl-rich-text p { font-size: 16px; line-height: 24px; color: var(--ae-text-muted); }

/* Chips overlaid on card image */
.ae-chip-wrap { position: absolute; top: 16px; left: 16px; z-index: 2; }
.ae-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--ae-radius-full); font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.ae-chip .material-symbols-outlined { font-size: 16px; }
.ae-chip.warn  { background: var(--ae-error-bg); color: var(--ae-error-text); border: 1px solid rgba(186,26,26,0.2); }
.ae-chip.value { background: var(--ae-chip-info-bg); color: var(--ae-chip-info-text); border: 1px solid rgba(190,198,224,0.5); }
.ae-chip.diag  { background: var(--ae-chip-neutral-bg); color: var(--ae-text); border: 1px solid var(--ae-border); }

/* =========================================================================
   9. Reviews
   ========================================================================= */
.ae-google { font-weight: 700; }
.ae-google .b1 { color: #4285F4; } .ae-google .r { color: #EA4335; } .ae-google .y { color: #FBBC05; } .ae-google .g { color: #34A853; }
.ae-reviews-head .fl-rich-text { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ae-rating-line .fl-rich-text { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--ae-text-muted); }
.ae-review-cta .fl-rich-text a { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-full); font-size: 14px; font-weight: 500; color: var(--ae-text); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.ae-review-cta .fl-rich-text a:hover { background: var(--ae-surface-high); }
.ae-review-cta .material-symbols-outlined { font-size: 18px; }
.ae-review { background: var(--ae-surface-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.ae-stars .fl-rich-text { display: flex; gap: 4px; color: var(--ae-cta); }
.ae-stars .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1; }
.ae-quote .fl-rich-text, .ae-quote .fl-rich-text p { font-size: 16px; line-height: 24px; color: var(--ae-text-muted); font-style: italic; font-weight: 500; }
.ae-author .fl-rich-text { display: flex; align-items: center; gap: 12px; }
.ae-author .ae-avatar { width: 40px; height: 40px; border-radius: 9999px; background: var(--ae-surface-highest); display: inline-flex; align-items: center; justify-content: center; color: var(--ae-primary); font-weight: 700; flex: 0 0 auto; }
.ae-author .ae-name { font-size: 14px; font-weight: 500; color: var(--ae-text); display: block; }
.ae-author .ae-role { font-size: 12px; font-weight: 600; color: var(--ae-text-muted); display: block; }

/* =========================================================================
   10. B2B
   ========================================================================= */
.ae-callout .fl-rich-text { background: var(--ae-surface-card); border: 1px solid rgba(198,198,205,0.5); border-left: 4px solid var(--ae-cta); border-radius: var(--ae-radius-lg); padding: 24px; font-size: 16px; line-height: 24px; color: var(--ae-text); }
.ae-b2b-media { position: relative; }
.ae-b2b-img img, .ae-b2b-img .fl-photo-img { width: 100% !important; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--ae-radius-lg); filter: grayscale(1) brightness(0.75); display: block; }
.ae-yearsbadge .fl-rich-text { position: absolute; bottom: -20px; right: -20px; background: var(--ae-cta); color: #fff; padding: 24px; border-radius: var(--ae-radius-lg); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2); }
.ae-yearsbadge .yb-num { font-size: 20px; font-weight: 700; display: block; }
.ae-yearsbadge .yb-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; display: block; }

/* =========================================================================
   11. Online-Gutachten band
   ========================================================================= */
.ae-eyebrow .fl-rich-text { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--ae-radius-full); background: rgba(0,0,0,0.05); color: var(--ae-primary); font-size: 12px; font-weight: 600; }
.ae-eyebrow .material-symbols-outlined { font-size: 16px; }

/* =========================================================================
   12. Contact + Gravity Form
   ========================================================================= */
.ae-contact-list .fl-rich-text { display: flex; flex-direction: column; gap: 16px; }
.ae-contact-list .fl-rich-text .row { display: flex; align-items: center; gap: 12px; color: var(--ae-text); font-size: 16px; }
.ae-contact-list .material-symbols-outlined { color: var(--ae-cta-hover); }
.ae-formwrap { background: var(--ae-surface-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); padding: 32px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
/* Gravity Forms — orbital variable theming (no !important) */
.ae-formwrap .gform_wrapper {
  --gf-color-primary: #fd761a;
  --gf-color-primary-rgb: 253,118,26;
  --gf-color-primary-contrast: #ffffff;
  --gf-ctrl-bg-color: #f8f9ff;
  --gf-ctrl-border-color: #c6c6cd;
  --gf-ctrl-radius: 4px;
  --gf-ctrl-label-color-primary: #45464d;
  --gf-field-img-choice-selected-color: #fd761a;
}
.ae-formwrap .gform_wrapper .gform_fields { grid-row-gap: 24px; grid-column-gap: 24px; }
.ae-formwrap .gform_wrapper .gfield_label { font-size: 12px; font-weight: 600; color: var(--ae-text-muted); }
.ae-formwrap .gform_wrapper .gform_footer .gform_button {
  background: var(--ae-cta) !important; color: #fff !important; border: none !important;
  border-radius: var(--ae-radius-md) !important; padding: 16px 32px !important;
  font-family: var(--ae-font); font-size: 14px; font-weight: 500;
}
.ae-formwrap .gform_wrapper .gform_footer .gform_button:hover { background: var(--ae-cta-hover) !important; }

/* =========================================================================
   13. Footer (Themer, dark)
   ========================================================================= */
.ae-footer.fl-row .fl-row-content-wrap { background: var(--ae-primary); padding-top: 48px; padding-bottom: 48px; border-top: 1px solid rgba(63,70,92,0.2); }
.ae-footer .fl-heading-text, .ae-footer .fl-rich-text, .ae-footer .fl-rich-text p { color: rgba(255,255,255,0.85); }
.ae-foot-brand .fl-rich-text { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: #fff; }
.ae-foot-brand .material-symbols-outlined { font-size: 26px; color: #fff; }
.ae-foot-tag .fl-rich-text { font-size: 12px; color: rgba(255,255,255,0.7); }
.ae-foot-links .fl-menu .menu > li > a { color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; padding: 2px 0; }
.ae-foot-links .fl-menu .menu > li > a:hover { color: #fff; }
.ae-foot-contact .fl-rich-text { display: flex; flex-direction: column; gap: 12px; }
.ae-foot-contact .fl-rich-text a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); text-decoration: none; }
.ae-foot-contact .fl-rich-text a.wa { color: var(--ae-accent-soft); }
.ae-foot-copy .fl-rich-text { font-size: 12px; color: rgba(255,255,255,0.5); }

/* =========================================================================
   14. Responsive
   ========================================================================= */
@media (max-width: 767px) {
  .ae-sec-pad > .fl-row-content-wrap { padding-top: 56px; padding-bottom: 56px; }
  .ae-hero-inner .fl-heading-text { font-size: 28px; line-height: 36px; }
  .ae-yearsbadge .fl-rich-text { bottom: 8px; right: 8px; }
}