/* ===================================================================
   FB Autoteile – Single Color Overrides (standalone)
   Source: theme-colorful-overrides.css (colors only, no layout)
   Purpose: Make the site more colorful + gray cards, without changing layout
   Usage: Load THIS file LAST after all other CSS.
   =================================================================== */

/* 0) Palette & Tokens */
:root{
  --brand: #0d5cab;
  --brand-2:#1f8bd1;
  --mint:  #7ce6cb;
  --peach: #ffb6ab;
  --blue:  #84abff;

  --txt:   #1f2733;
  --muted: #5b6574;

  --card-gray-1:#f9fafb;
  --card-gray-2:#f3f4f6;
  --card-gray-3:#e5e7eb;
  --line:        #d1d5db;
}

/* 1) Seite – Pastell-Glows + helle Basis */
html, body{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(124, 230, 203, .26), transparent 60%),
    radial-gradient(1000px 520px at 90% 8%, rgba(255, 182, 171, .22), transparent 60%),
    radial-gradient(900px 520px at 50% 100%, rgba(132, 171, 255, .18), transparent 55%),
    linear-gradient(180deg, #f9fcff 0%, #f6f9ff 50%, #f7fff9 100%) !important;
  color: var(--txt) !important;
}

/* 2) Typografie & Links */
a{ color: var(--brand) !important; }
a:hover{ color: var(--brand-2) !important; text-decoration: none; }

/* 3) Hero – satter Blauverlauf */
.welcome-hero{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #79b4ff 0%, #3b8cff 45%, var(--brand) 100%) !important;
  color: #fff !important;
}
.welcome-hero h1{ text-shadow: 0 2px 12px rgba(0,0,0,.18) !important; }
.welcome-hero .lead{ opacity:.95 !important; }
.welcome-hero__sep path{ fill:#ffffff !important; }

/* 4) Buttons */
.btn{
  background:#ffffff !important;
  color: var(--brand) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 6px 18px rgba(13,92,171,.18) !important;
}
.btn:hover{
  box-shadow: 0 10px 28px rgba(13,92,171,.24) !important;
}
.btn.alt{
  background: rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  border-color: rgba(255,255,255,.35) !important;
}
.btn.alt:hover{
  background: rgba(255,255,255,.18) !important;
}

/* 5) Boxen – grauer Verlauf + weiche Glows */
.card, .perk, .ka-card, .zb-card{
  background: linear-gradient(180deg, var(--card-gray-1) 0%, var(--card-gray-2) 100%) !important;
  border: 1px solid var(--card-gray-3) !important;
  border-radius: 16px;
  box-shadow:
    0 8px 22px rgba(13,92,171,.10),
    0 2px 8px rgba(0,0,0,.05) !important;
  color: var(--txt) !important;
}
.card:hover, .perk:hover, .ka-card:hover, .zb-card:hover{
  background: linear-gradient(180deg, #f3f4f6 0%, #e8eaee 100%) !important;
  box-shadow:
    0 14px 40px rgba(13, 92, 171, .16),
    0 6px 18px rgba(0,0,0,.06),
    0 0 0 4px rgba(13,92,171,.08) !important;
}

/* 6) Icon-/Akzentfarben */
.perk-ico svg,
.card-ico svg{
  stroke: var(--brand) !important;
  fill: none !important;
}
.perk-ico svg path[fill],
.card-ico svg path[fill]{
  fill: var(--brand) !important;
}

/* 7) Navigation – Hover-Hintergrund */
.nav-links a{ color: #0b1b33 !important; }
.nav-links a:hover{
  background: rgba(13,92,171,.08) !important;
  text-decoration: none !important;
}
.nav-links a.active{
  color: var(--brand) !important;
  border-bottom: 2px solid var(--brand) !important;
}

/* 8) Marken-Karussell */
#brands .brand{
  background: linear-gradient(#ffffff,#ffffff) padding-box,
             linear-gradient(135deg,#dfe8f6,#eef3fb) border-box !important;
  border: 1px solid transparent !important;
}
#brands .brand-track{
  border-color: var(--line) !important;
}

/* 9) Trennlinie */
.section-sep{
  height:2px !important;
  background: linear-gradient(90deg, transparent, #d9dde3 15%, #cfd4db 50%, #d9dde3 85%, transparent) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 6px 20px rgba(13,92,171,.08) !important;
  border: 0 !important;
}

/* 10) Footer */
.site-footer{
  background: linear-gradient(180deg, #ffffff, #f3f6fb) !important;
  color: #333 !important;
}
.site-footer .muted{ color: var(--muted) !important; }
.site-footer .muted:hover{ color:#111 !important; }

/* 11) Social-Icon Glows */
.social a[aria-label="Facebook"]:hover svg{ filter: drop-shadow(0 6px 14px rgba(59,89,152,.35)) !important; }
.social a[aria-label="Instagram"]:hover svg{ filter: drop-shadow(0 6px 14px rgba(253,160,133,.35)) !important; }
.social a[aria-label="WhatsApp"]:hover svg{ filter: drop-shadow(0 6px 14px rgba(37,211,102,.35)) !important; }

/* 12) Form-Farben */
input, select, textarea{
  border-color: var(--card-gray-3) !important;
  background-color: #fff !important;
  color: var(--txt) !important;
}
input:focus, select:focus, textarea:focus{
  outline: 0 !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(13,92,171,.18) !important;
}

/* 13) Utilities */
.text-brand{ color: var(--brand) !important; }
.text-muted{ color: var(--muted) !important; }
.border-line{ border-color: var(--line) !important; }