/* ════════════════════════════════════════════════════════
   FB ERDBAU & TRANSPORTE — Mobile (< 880px)
   Alle Klassen mb-* prefixed → keine Kollision mit Desktop-CSS.
   CI: Koenigsblau #2F5FC4 · Bricolage Grotesque / Manrope / JetBrains Mono
   ════════════════════════════════════════════════════════ */

/* Sichtbarkeit: < 880px nur Mobile, darüber nur Desktop */
@media (max-width: 880px) {
  body > *:not(.m-site):not(script):not(style):not(link) { display: none !important; }
  html { scroll-behavior: smooth; }
}
@media (min-width: 881px) { .m-site { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.m-site {
  --bg: #F2F5FB; --bg-2: #E7ECF6; --surface: #DBE2F1; --surface-2: #CDD7EB;
  --line: #B9C5DD; --fg: #101723; --fg-2: #3B4656; --fg-3: #6A7488;
  --accent: #2F5FC4; --accent-2: #5B82D6; --accent-ink: #ffffff;
  --accent-light: #9FC0F5; --hero-em: #3B4656;
  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .m-site {
    --bg: #0A111C; --bg-2: #0E1622; --surface: #141D2B; --surface-2: #1B2536;
    --line: #263042; --fg: #EAEFF8; --fg-2: #9AA6BE; --fg-3: #6A7488; --hero-em: #9FC0F5;
  }
}
html[data-theme="dark"] .m-site {
  --bg: #0A111C; --bg-2: #0E1622; --surface: #141D2B; --surface-2: #1B2536;
  --line: #263042; --fg: #EAEFF8; --fg-2: #9AA6BE; --fg-3: #6A7488; --hero-em: #9FC0F5;
}

.m-site * { box-sizing: border-box; margin: 0; padding: 0; }
.m-site ::selection { background: var(--accent); color: var(--accent-ink); }
.m-site img { max-width: 100%; display: block; }
.m-site a { color: inherit; }

/* Typo */
.m-site h1, .m-site h2, .m-site h3 { font-family: var(--f-display); text-wrap: balance; }
.m-site h1 { font-weight: 700; font-size: clamp(40px, 11.5vw, 54px); line-height: 0.95; letter-spacing: -0.035em; }
.m-site h1 em { font-style: italic; font-weight: 500; color: var(--hero-em); }
.m-site h2 { font-weight: 600; font-size: clamp(32px, 9vw, 42px); line-height: 0.98; letter-spacing: -0.028em; margin-bottom: 14px; }
.m-site h3 { font-weight: 600; font-size: 17px; line-height: 1.12; letter-spacing: -0.02em; }
.m-site p { margin: 0 0 14px; text-wrap: pretty; }
.m-site .mb-lead { color: var(--fg-2); font-size: 16px; line-height: 1.6; margin: 0; }
.m-site .mb-eyebrow {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.m-site .mb-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
html[data-theme="dark"] .m-site .mb-eyebrow::before { background: var(--accent-light); }

/* Sections */
.m-site .mb-sec { padding: 56px 20px; border-bottom: 1px solid var(--line); }
.m-site .mb-sec:last-of-type { border-bottom: none; }

/* Header */
.m-site .mb-hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.m-site .mb-hdr-in { max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; }
.m-site .mb-hdr-in > img { height: 34px; width: auto; }
html[data-theme="dark"] .m-site .mb-hdr-in > img { filter: brightness(1.25); }
.m-site .mb-hdr-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-site .mb-hdr-name strong { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.1; }
.m-site .mb-hdr-name span { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.m-site .mb-hdr-call {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; background: var(--accent); color: var(--accent-ink);
  border-radius: 10px; text-decoration: none; font-family: var(--f-body); font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em; box-shadow: 0 1px 3px rgba(0,0,0,0.12); transition: background 0.2s; flex: none;
}
.m-site .mb-hdr-call:active { background: var(--accent-2); }

/* Shell */
.m-site .mb-shell { max-width: 480px; margin: 0 auto; padding-bottom: 96px; }

/* Buttons */
.m-site .mb-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 16px 28px; border-radius: 12px; border: none; cursor: pointer;
  font-family: var(--f-body); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.m-site .mb-btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(0,75,80,0.2); }
.m-site .mb-btn-primary:active { background: var(--accent-2); transform: translateY(1px); }
.m-site .mb-btn-ghost { background: color-mix(in oklab, var(--surface) 60%, transparent); color: var(--fg); border: 1px solid var(--line); }
.m-site .mb-btn-ghost:active { border-color: var(--accent); color: var(--accent); }
html[data-theme="dark"] .m-site .mb-btn-ghost:active { color: var(--accent-light); border-color: var(--accent-light); }

/* Hero C */
.m-site .mb-hero { padding: 36px 20px 56px; border-bottom: 1px solid var(--line); }
.m-site .mb-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 24px 0;
}
.m-site .mb-stats > div { padding: 14px 4px 12px; }
.m-site .mb-stats > div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.m-site .mb-stats strong { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1; display: block; }
.m-site .mb-stats span { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.m-site .mb-hero-img { width: 100%; height: 180px; object-fit: cover; border-radius: 18px; margin-bottom: 24px; filter: saturate(0.95) contrast(1.02); }

/* Kernwerte */
.m-site .mb-values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.m-site .mb-value { background: color-mix(in oklab, var(--surface) 50%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px; }
.m-site .mb-value h3 { font-size: 15px; margin-bottom: 4px; }
.m-site .mb-value p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }

/* Leistungen — Karten */
.m-site .mb-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.m-site .mb-svc-card { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklab, var(--surface) 40%, transparent); padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; min-height: 116px; }
.m-site .mb-svc-card .mb-num { font-family: var(--f-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.08em; }
.m-site .mb-svc-card h3 { font-size: 15px; line-height: 1.15; }
.m-site .mb-svc-card p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--fg-2); }

/* Fuhrpark */
.m-site .mb-fleet { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 20px 8px; margin: 0 -20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.m-site .mb-fleet::-webkit-scrollbar { display: none; }
.m-site .mb-fleet-card { flex: 0 0 72%; scroll-snap-align: start; margin: 0; }
.m-site .mb-fleet-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; filter: saturate(0.95) contrast(1.02); }
.m-site .mb-fleet-card figcaption { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 2px 0; }
.m-site .mb-fleet-card figcaption strong { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.m-site .mb-fleet-card figcaption span { font-family: var(--f-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase; }
.m-site .mb-fleet-hint { font-family: var(--f-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 10px; }

/* Fuhrpark-Slider (ein Bild, ganze Maschine zentriert, Auto-Wechsel) */
.m-site .mb-slider { margin-top: 24px; }
.m-site .mb-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.m-site .mb-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.6s ease; }
.m-site .mb-slide.is-on { opacity: 1; }
.m-site .mb-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.96) contrast(1.02); }
.m-site .mb-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 30px 16px 14px; background: linear-gradient(to top, rgba(13,20,17,0.88), rgba(13,20,17,0.55) 55%, transparent); }
.m-site .mb-slide figcaption strong { font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: #F2F5FB; }
.m-site .mb-slide figcaption span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243,245,242,0.72); white-space: nowrap; }
.m-site .mb-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.m-site .mb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: none; padding: 0; cursor: pointer; transition: width 0.3s, background 0.3s; }
.m-site .mb-dot.is-on { background: var(--accent); width: 20px; border-radius: 4px; }
html[data-theme="dark"] .m-site .mb-dot.is-on { background: var(--accent-light); }

/* Chronik */
.m-site .mb-chron { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 20px; border-top: 1px solid var(--line); }
.m-site .mb-chron > div { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); }
.m-site .mb-chron > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.m-site .mb-chron strong { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; display: block; line-height: 1.05; }
.m-site .mb-chron span { font-size: 12.5px; color: var(--fg-2); }

/* Kontakt */
.m-site .mb-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.m-site .mb-crow { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklab, var(--surface) 40%, transparent); text-decoration: none; color: var(--fg); transition: border-color 0.2s, background 0.2s; }
.m-site .mb-crow:active { border-color: var(--accent); }
.m-site .mb-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.m-site .mb-ic svg { width: 18px; height: 18px; }
.m-site .mb-crow-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-site .mb-crow-txt span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.m-site .mb-crow-txt strong { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.m-site .mb-arr { margin-left: auto; color: var(--fg-3); flex: none; }

/* Footer */
.m-site .mb-foot { background: #101723; color: #F2F5FB; padding: 48px 20px 32px; overflow: hidden; }
html[data-theme="dark"] .m-site .mb-foot { background: var(--bg-2); }
.m-site .mb-foot-display { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 13.5vw, 56px); line-height: 0.9; letter-spacing: -0.04em; color: rgba(243,245,242,0.06); white-space: nowrap; margin-bottom: 26px; user-select: none; }
.m-site .mb-foot-line { font-size: 13px; color: rgba(243,245,242,0.55); margin: 0 0 16px; }
.m-site .mb-foot-links { display: flex; gap: 20px; }
.m-site .mb-foot-links a { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243,245,242,0.4); text-decoration: none; }

/* Sticky Call CTA */
.m-site .mb-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent); transform: translateY(0); transition: transform 0.3s ease; }
.m-site .mb-sticky.mb-hidden { transform: translateY(110%); }
.m-site .mb-sticky a { max-width: 448px; margin: 0 auto; }
.m-site .mb-sticky .mb-sub { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.1em; opacity: 0.75; }
.m-site .mb-sticky .mb-btn { flex-direction: column; gap: 1px; min-height: 58px; padding: 10px 28px; }

/* Reveal */
.m-site .mb-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s ease; }
.m-site .mb-reveal.mb-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .m-site .mb-reveal { opacity: 1; transform: none; transition: none; } }