/* ============================================================
 * MB MICROMARKETING — Globale Styles für Impreza
 * ============================================================
 * Einmal in Impreza → "Theme Options" → "Custom CSS" einfügen.
 * Lädt FontAwesome + Google Fonts automatisch.
 * ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Roboto:wght@400;500;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
  /* Brand */
  --mbm-red-900: #4D0000;
  --mbm-red-800: #730000;
  --mbm-red-700: #990000;
  --mbm-red-600: #B82828;
  --mbm-red-200: #F2C7C7;
  --mbm-red-100: #FBE8E8;
  --mbm-green-700: #3DA01D;
  --mbm-green-600: #4DC727;
  --mbm-green-500: #6FD64D;
  --mbm-green-100: #E5F7DC;

  /* Neutrals */
  --mbm-ink:    #1F2428;
  --mbm-ink-2:  #3C4650;
  --mbm-ink-3:  #6B7380;
  --mbm-line:   #E5E8EC;
  --mbm-line-2: #D6DCE3;
  --mbm-bg:     #FFFFFF;
  --mbm-bg-alt: #F4EFE8;
  --mbm-bg-sunk:#F2F4F7;

  --mbm-font-sans:    'Open Sans', system-ui, sans-serif;
  --mbm-font-display: 'Roboto', system-ui, sans-serif;
}

/* Body baseline */
.mbm-page { font-family: var(--mbm-font-sans); color: var(--mbm-ink); line-height: 1.7; font-size: 16px; }
.mbm-page * { box-sizing: border-box; }

/* Headlines auf Roboto */
.mbm-page h1, .mbm-page h2, .mbm-page h3, .mbm-page h4, .mbm-page .mbm-h {
  font-family: var(--mbm-font-display) !important;
}

/* Eyebrow / kleine Labels */
.mbm-eyebrow {
  font: 700 14px var(--mbm-font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mbm-red-700);
}

/* Buttons */
.mbm-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:4px;
  font:700 14px var(--mbm-font-display);
  cursor:pointer; border:1px solid transparent;
  transition:all .2s cubic-bezier(.2,.7,.2,1);
  text-decoration:none;
}
.mbm-btn-primary { background: var(--mbm-red-700); color: #fff !important; }
.mbm-btn-primary:hover { background: var(--mbm-red-800); color: #fff !important; text-decoration:none; }
.mbm-btn-accent { background: var(--mbm-green-600); color: #fff !important; }
.mbm-btn-accent:hover { background: var(--mbm-green-700); color: #fff !important; text-decoration:none; }
.mbm-btn-ghost-light {
  background: rgba(255,255,255,.1); color:#fff !important;
  border-color: rgba(255,255,255,.6);
}
.mbm-btn-ghost-light:hover { background: rgba(255,255,255,.2); color:#fff !important; text-decoration:none; }
.mbm-btn-ghost {
  background:transparent; color: var(--mbm-red-700) !important;
  border-color: var(--mbm-red-700);
}
.mbm-btn-ghost:hover { background: var(--mbm-red-100); color: var(--mbm-red-700) !important; text-decoration:none; }

/* Hero base */
.mbm-hero { position:relative; color:#fff; overflow:hidden; padding: 64px 0 96px; }
.mbm-hero-inner { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }
.mbm-hero-bottom { position:absolute; bottom:0; left:0; right:0; height:6px; background:var(--mbm-green-600); z-index:5; }
.mbm-eyebrow-w {
  display:inline-block; font:700 12px var(--mbm-font-display);
  text-transform:uppercase; letter-spacing:.18em;
  color:#F2C7C7; border:1px solid rgba(255,255,255,.4);
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.mbm-h1 {
  font:800 64px/1.05 var(--mbm-font-display);
  letter-spacing:-.025em; color:#fff; margin:0 0 14px;
  text-wrap:balance; max-width:880px;
}
.mbm-h1 sup { font-size:.5em; vertical-align:super; font-weight:600; opacity:.85; }
.mbm-h1 em { font-style:normal; color: var(--mbm-green-500); }
.mbm-hero-tag {
  font:400 22px/1.45 var(--mbm-font-sans);
  color:#F2C7C7; max-width:640px; margin:0 0 28px;
}
.mbm-hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.mbm-hero-stats {
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.18);
  max-width:780px; margin-top:36px;
}
.mbm-hero-stats > div { padding:0 18px; border-left:1px solid rgba(255,255,255,.12); }
.mbm-hero-stats > div:first-child { border-left:0; padding-left:0; }
.mbm-hero-stats b {
  display:block; font:800 28px var(--mbm-font-display);
  color:#fff; letter-spacing:-.01em; line-height:1;
}
.mbm-hero-stats span {
  font:600 11px var(--mbm-font-display); color:#F2C7C7;
  text-transform:uppercase; letter-spacing:.12em;
  margin-top:6px; display:block;
}

/* Section base */
.mbm-section { max-width:1100px; margin:0 auto; padding:88px 24px; }
.mbm-section.wide { max-width:1200px; }
.mbm-section.narrow { max-width:920px; }
.mbm-section h2 {
  font:800 38px/1.15 var(--mbm-font-display);
  color:var(--mbm-ink); letter-spacing:-.015em;
  margin:0 0 16px; text-wrap:balance;
}
.mbm-section p {
  font:400 17px/1.7 var(--mbm-font-sans);
  color:var(--mbm-ink-2); margin:0 0 16px;
  max-width:680px;
}
.mbm-section p.lead {
  font-size:21px; color:var(--mbm-ink); font-weight:500;
}

/* CTA Band */
.mbm-cta-band {
  background: var(--mbm-ink); color:#fff;
  padding:72px 24px; text-align:center;
}
.mbm-cta-band h2 {
  font:800 36px/1.15 var(--mbm-font-display); color:#fff;
  margin:0 auto 10px; text-wrap:balance; max-width:760px;
}
.mbm-cta-band p {
  font:400 17px/1.55 var(--mbm-font-sans);
  color:rgba(255,255,255,.78);
  margin:0 auto 26px; max-width:600px;
}
.mbm-cta-band .btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 880px) {
  .mbm-h1 { font-size: 36px; }
  .mbm-section h2 { font-size: 28px; }
  .mbm-hero-stats { grid-template-columns: 1fr 1fr; }
}