/* MIW Zeven - Design Tokens & Base */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-ink: #12181f;
  --color-text: #eef1f5;
  --color-ink-soft: #dde3e8;
  --color-steel: #7e8b97;
  --color-line: rgb(255 255 255 / 0.12);
  --color-paper: #1c2530;
  --color-paper-tint: #161d25;
  --color-brand: #17629e;
  --color-brand-dark: #0e3f68;
  --color-brand-soft: #4d9bd6;
  --color-brand-tint: rgb(23 98 158 / 0.18);
  --color-focus: #d98a1c;

  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 1px rgb(0 0 0 / 0.25);
  --shadow-md: 0 16px 32px rgb(0 0 0 / 0.45);

  --container: 1180px;
  --nav-height: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* The hero's height is recalculated in JS as the mobile address bar
     shows/hides (see main.js). Without this, the browser's scroll
     anchoring can "helpfully" shift the scroll position to compensate the
     instant that resize lands, which is what showed up as a sudden jump
     once scrolled past the hero. Nothing else on the page resizes above
     the viewport unexpectedly (CLS measures 0), so this has no downside
     elsewhere. */
  overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--color-brand-soft); text-decoration: none; }
a:hover { color: #fff; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--color-text);
}
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; max-width: 65ch; }
.lede { font-size: 1.15rem; color: var(--color-ink-soft); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 200;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-brand);
  color: #fff;
}
.btn-primary:hover { background: var(--color-brand-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: transparent;
  border-color: rgb(255 255 255 / 0.55);
  color: #fff;
}
.btn-ghost:hover { background: rgb(255 255 255 / 0.12); color: #fff; transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border-color: var(--color-brand-soft);
  color: var(--color-brand-soft);
}
.btn-outline:hover { background: var(--color-brand-tint); color: #fff; transform: translateY(-2px); }
.btn:active { transform: translateY(1px); box-shadow: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-ink);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgb(0 0 0 / 0.35); }
.site-header .container {
  /* Overrides .container's 1180px reading-width cap: that width suits body
     copy, but starves the header, which has to fit a wordmark, 5 nav
     links, language switch, phone number and a CTA button on one row. At
     any desktop width the 1180px cap was forcing "Motoren-
     Instandsetzungs-Werk" to wrap onto 3 lines and crowd into "Start"
     right next to it, every single time, not just on narrow windows.
     Widened rather than uncapped (max-width: none read as pinned to the
     bare edge of the window on large monitors, no longer lined up with
     the rest of the page's content column) - but not by as much as
     1600px: the wordmark+subtitle plus full nav only need about 1330px
     combined (measured via getBoundingClientRect, German nav labels are
     the wider case), so a big surplus just stretched the subtitle far
     apart from "Start" via justify-content: space-between's leftover
     slack. 1360px keeps that gap snug while still leaving a sliver of
     margin instead of touching the window edge on very wide screens. The
     1360px breakpoint further down collapses to the mobile drawer nav
     before there's ever a risk of the two crowding into each other. */
  max-width: 1360px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #fff;
}
.brand:hover { color: #fff; }
.brand-mark {
  display: block;
  height: 40px;
  width: auto;
  flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.brand-text strong { font-size: 1.02rem; font-weight: 800; color: #fff; }
.brand-text span { font-size: 0.72rem; color: #9fb3c2; font-weight: 600; }

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
/* Scoped to "ul a" only: .main-nav also wraps the CTA button and phone
   link (both <a> tags), and an unscoped ".main-nav a" would win over
   ".btn" on specificity and crush the button's own padding. */
.main-nav ul a {
  display: inline-block;
  color: #cfd8e0;
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.8;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.main-nav ul a:hover,
.main-nav ul a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--color-brand-soft);
}
.nav-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.lang-switch {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: none;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch a {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #9fb3c2;
  line-height: 1.4;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a.is-active {
  background: var(--color-brand);
  color: #fff;
}
.nav-phone {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #fff;
  font-size: 0.94rem;
  white-space: nowrap;
}
.nav-phone svg { flex: none; color: var(--color-brand-soft); }
.nav-actions .btn { flex: none; }

.nav-toggle {
  display: none;
  flex: none;
  background: none;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Language flag: sits next to the hamburger, always visible in the
   collapsed mobile header (unlike .lang-switch, which is inside the
   off-canvas drawer and only visible once it's open). Shows the flag of
   whichever language is currently active; the link itself switches to
   the other one, same target .lang-switch already points at.
   display:none (not just an empty .lang-flag) at desktop width: a
   zero-size flex item still claims a slot in .site-header .container's
   justify-content:space-between, which would nudge .main-nav off the
   right edge. */
.mobile-nav-actions { display: none; align-items: center; gap: 0.75rem; flex: none; }
.lang-flag { font-size: 1.75rem; line-height: 1; }

/* Below 1360px there isn't room for logo + wordmark + 5 links + lang switch +
   phone + button on one line without the subtitle wrapping and crowding into
   "Start" (full content needs ~1330px, see .site-header .container above),
   so collapse straight to the drawer nav instead of letting that happen. */
@media (max-width: 1360px) {
  .brand-text span { display: none; }

  .main-nav {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--color-ink);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 0; white-space: normal; }
  .main-nav ul a {
    display: block;
    padding: 1rem 0.25rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }
  .nav-actions { flex-direction: column; align-items: stretch; margin-top: 1.5rem; }
  .lang-switch { align-self: center; }
  .nav-phone { justify-content: center; padding: 0.75rem; background: rgb(255 255 255 / 0.06); border-radius: var(--radius); }
  .nav-phone span { display: inline; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav-actions { display: flex; }
}

/* ---------- Hero ----------
   Base rules below are the no-JS / reduced-motion fallback: a normal
   fullscreen section with the intro copy followed directly by the stat
   numbers, both over the video. JS upgrades this to a pinned, scroll-scrubbed
   crossfade by adding .is-scrub to .hero (see main.js), which the rules
   further down override. */
.hero {
  position: relative;
  color: #fff;
  background: var(--color-ink);
  /* Override the generic `section { padding-block: 4.5rem }` rule below:
     the hero is full-bleed, that padding was leaving a bare band of the
     section's own background above and below the pinned video. */
  padding-block: 0;
}
.hero-pin {
  position: relative;
  min-height: 100vh; /* fallback: iOS Safari < 15.4 doesn't parse dvh */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  padding-block: 3rem;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* The source footage has real black pillarboxing baked into the pixels
     (the subject sits on its own black background, narrower than the
     1280px frame), so hero-poster.jpg is frame-001 pre-cropped to just the
     content region, not the raw frame, matching what main.js draws to
     canvas. Shows immediately, and is what no-JS visitors see permanently
     since the canvas bitmap otherwise stays empty. */
  background: var(--color-ink) url("../img/hero-poster.jpg") center / cover no-repeat;
  /* Just enough blur to take the edge off the JPEG frame sequence's
     compression blockiness without softening the footage itself, the
     colour tint layer below carries most of that job instead. */
  filter: blur(0.3px) saturate(1.2);
}
.hero-video-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Blue colour wash over the footage: brand-tied, and it evens out
     compression noise better than blur alone since it flattens local
     contrast instead of just softening edges. */
  background: linear-gradient(160deg, rgb(23 98 158 / 0.4) 0%, rgb(11 24 38 / 0.15) 45%, rgb(23 98 158 / 0.4) 100%);
  mix-blend-mode: color;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, rgb(11 24 38 / 0.92) 0%, rgb(11 24 38 / 0.78) 42%, rgb(11 24 38 / 0.45) 100%);
}
.hero-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.hero-content { max-width: 640px; }
.hero-layer.is-stats .hero-content { max-width: 760px; }
.hero-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  color: #cfe1f0;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.24);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.hero h1 { color: #fff; margin-bottom: 0.6em; }
.hero-sub { color: #e4ecf3; font-size: 1.1rem; max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }

/* On-load entrance for the intro copy, independent of the scroll-driven
   crossfade: simple staggered fade/rise the moment the page appears. */
.hero-layer.is-intro .hero-eyebrow,
.hero-layer.is-intro h1,
.hero-layer.is-intro .hero-sub,
.hero-layer.is-intro .hero-ctas {
  opacity: 0;
  animation: hero-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-layer.is-intro .hero-eyebrow { animation-delay: 0.05s; }
.hero-layer.is-intro h1 { animation-delay: 0.15s; }
.hero-layer.is-intro .hero-sub { animation-delay: 0.3s; }
.hero-layer.is-intro .hero-ctas { animation-delay: 0.45s; }

@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stat numbers, reused inside the hero (was its own section, now folded
   into the hero as the scroll-scrubbed video reaches its midpoint). */
.hero-layer.is-stats .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-layer.is-stats .stat-item {
  padding-inline: 1.75rem;
  border-left: 1px solid rgb(255 255 255 / 0.18);
}
.hero-layer.is-stats .stat-item:first-child { padding-left: 0; border-left: none; }
.hero-layer.is-stats .stat-num {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.hero-layer.is-stats .stat-label { color: #cfe1f0; font-size: 0.92rem; margin-top: 0.3rem; }

.hero-scroll-cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 3;
  transform: translateX(-50%);
  align-items: center;
  gap: 0.5rem;
  flex-direction: column;
  color: rgb(255 255 255 / 0.75);
}
.hero-scroll-cue span {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0));
  animation: hero-cue 1.6s ease-in-out infinite;
}
@keyframes hero-cue {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* Scroll-scrubbed pin, enabled by main.js when motion is allowed and the
   video is ready. Layers overlap via grid so the crossfade reads as one
   continuous hero rather than a second section appearing beneath.
   The total scroll-track height is set by main.js as an explicit px value
   (window.innerHeight * 2, or *1.8 under 760px), matched 1:1 to the same
   window.innerHeight the scroll-progress math reads every frame. Plain
   vh/window.innerHeight rather than dvh/visualViewport: those track the
   live visual viewport, which is exactly what's changing while a mobile
   browser's address bar animates, and reacting to that every frame is
   what caused the jumps and the lag this was rewritten to fix. Using the
   same static-during-a-scroll metric on both the CSS pin height and the
   JS track height keeps the two from ever disagreeing. */
.hero.is-scrub .hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  padding-block: 0;
  gap: 0;
}
.hero.is-scrub .hero-stage { display: grid; gap: 0; }
.hero.is-scrub .hero-layer {
  grid-area: 1 / 1;
  align-self: center;
  will-change: opacity, transform;
}
/* Safe default the instant .is-scrub lands, before the first inline-style
   update from main.js runs, so the stats layer never flashes at full
   opacity on top of the intro copy. */
.hero.is-scrub .hero-layer.is-stats { opacity: 0; }
.hero.is-scrub .hero-scroll-cue { display: flex; }

@media (max-width: 760px) {
  .hero-layer.is-stats .stat-row { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .hero-layer.is-stats .stat-item:nth-child(2n+1) { border-left: none; padding-left: 0; }
  .hero-scroll-cue { display: none !important; }
}

/* Page header (non-home hero): a real photo behind a color wash, not a
   flat fill, so inner pages carry the same photographic identity as the
   homepage hero instead of reading as empty. */
.page-header {
  position: relative;
  background-color: var(--color-ink);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-block: 5rem;
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(11 24 38 / 0.94) 0%, rgb(14 40 66 / 0.88) 45%, rgb(23 98 158 / 0.55) 100%);
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { color: #fff; margin-bottom: 0.4em; }
.page-header p { color: #d8e1e8; }
.breadcrumb {
  font-size: 0.85rem;
  color: #9fb3c2;
  margin-bottom: 1rem;
}
.breadcrumb a { color: #cfe1f0; }

/* ---------- Sections ---------- */
section { padding-block: 4.5rem; }
.section-tint { background: var(--color-paper-tint); }
.section-head { max-width: 640px; margin-bottom: 2.75rem; }
.section-head p { color: var(--color-ink-soft); }

@media (max-width: 760px) {
  section { padding-block: 3rem; }
}

/* Trust strip: real partner logos rather than text wordmarks, muted to a
   consistent grayscale so a full-colour crest (Scania) and a logo with its
   own brand-colour box baked in (JCB) don't clash sitting side by side,
   then bloom to full colour on hover. */
.trust-strip { padding-block: 4.75rem; border-bottom: 1px solid var(--color-line); }
.trust-strip .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  text-align: center;
}
.trust-strip-label {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-steel);
}
.trust-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem 4.25rem;
  width: 100%;
}
.trust-marks a {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
}
.trust-marks img {
  height: 68px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.trust-marks a:hover img,
.trust-marks a:focus-visible img {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.4));
}

@media (max-width: 620px) {
  .trust-marks { gap: 2.25rem 2.5rem; }
  .trust-marks img { height: 50px; max-width: 140px; }
}

/* Service grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.service-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  background: var(--color-paper);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.service-card:hover {
  border-color: var(--color-brand-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.service-card:hover .service-icon { background: var(--color-brand-soft); }
.service-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--color-brand);
  color: #fff;
  margin-bottom: 1.1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.service-card h3 { margin-bottom: 0.4em; font-size: 1.08rem; }
.service-card p { font-size: 0.95rem; color: var(--color-ink-soft); margin-bottom: 0; }

@media (max-width: 900px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* Offers grid: outbound links to marketplace listings, sitting on a
   .scroll-photo-bg section like the rest of the page */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.offer-tile {
  display: flex;
  flex-direction: column;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-lg);
  padding: 1.9rem;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.offer-tile:hover {
  color: #fff;
  transform: translateY(-4px);
  background: rgb(255 255 255 / 0.13);
  border-color: var(--color-brand-soft);
  box-shadow: 0 16px 32px rgb(3 8 14 / 0.35);
}
.offer-tile-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--color-brand);
  color: #fff;
  margin-bottom: 1.25rem;
  transition: background-color 0.2s ease;
}
.offer-tile:hover .offer-tile-icon { background: var(--color-brand-soft); }
.offer-tile h3 { color: #fff; margin-bottom: 0.4em; font-size: 1.12rem; }
.offer-tile p { color: #cfd8e0; font-size: 0.94rem; margin-bottom: 0; }
.offer-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}
.offer-tile-cta svg { transition: transform 0.2s ease; }
.offer-tile:hover .offer-tile-cta svg { transform: translate(3px, -3px); }

@media (max-width: 900px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .offer-grid { grid-template-columns: 1fr; }
}

/* Split section (image + text), used sparingly */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-height: 460px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.split-media.is-compact {
  max-width: 380px;
}
.split-media.is-compact img {
  aspect-ratio: 4 / 3;
  max-height: 340px;
}
.split-flip { grid-template-columns: 1fr 1.1fr; }
.split-flip .split-media { order: 2; }
.split-flip .split-body { order: 1; }

@media (max-width: 860px) {
  .split, .split-flip { grid-template-columns: 1fr; gap: 2rem; }
  .split-flip .split-media, .split-flip .split-body { order: initial; }
}

/* Page-fixed photo backdrop: one real position:fixed layer shared by every
   .scroll-photo-bg section on the page (each page only ever uses one
   image), sitting behind all real content via z-index:-1. This replaced a
   background-attachment:fixed on each section: mobile browsers recompute
   a fixed background's cover sizing against the viewport on every frame
   while the address bar shows/hides during scroll, which visibly resized
   and shifted the image.
   Sized with lvh (large viewport height, the size assuming the browser
   chrome is fully retracted) rather than inset:0/dvh: lvh stays constant
   through the address-bar show/hide animation, where dvh (and plain
   percentage/inset sizing, which resolves against the current visual
   viewport) changes continuously and reintroduced the same resize/jump
   this element was meant to fix. A little of the box extends below the
   visible area when the toolbar is showing, which is invisible and
   harmless since position:fixed already takes it out of layout. No forced
   GPU layer (translateZ/will-change) here: it competes with the hero's
   own canvas redraws for compositor budget and made the scroll-scrub
   animation lag behind instead of helping. */
.page-photo-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh; /* fallback: browsers without lvh support */
  height: 100lvh;
  z-index: -1;
  background-image: var(--scroll-bg-image, url("../img/kolben-blur.webp"));
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.page-photo-bg.bg-motoren { --scroll-bg-image: url("../img/motoren2-blur.webp"); }
.page-photo-bg.bg-schrauben { --scroll-bg-image: url("../img/schraubenschluessel-blur.webp"); }
.page-photo-bg.bg-telefon { --scroll-bg-image: url("../img/telefon-blur.webp"); }
.page-photo-bg.bg-austausch { --scroll-bg-image: url("../img/austauschmotoren-blur.webp"); }

/* Sections that reveal the fixed backdrop through their own translucent
   tint on ::before, so consecutive sections stay visually distinguishable
   while the same image shows through all of them. */
.scroll-photo-bg { position: relative; }
.scroll-photo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
}
.scroll-photo-bg .container { position: relative; z-index: 1; }

.scroll-photo-bg.tint-slate::before { background: rgb(22 29 37 / 0.85); }
.scroll-photo-bg.tint-brand::before { background: rgb(17 22 28 / 0.62); }
.scroll-photo-bg.tint-ink::before { background: rgb(18 24 31 / 0.88); }
.scroll-photo-bg.tint-paper::before { background: rgb(28 37 48 / 0.72); }
.scroll-photo-bg.tint-brand-soft::before { background: rgb(24 31 40 / 0.55); }

/* Feature list with grouped chunks (partner lists) */
.chunk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.chunk {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
}
.chunk h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand-soft);
  margin-bottom: 1rem;
}
.chunk ul { margin: 0; padding: 0; list-style: none; }
.chunk li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-line);
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.chunk li:hover { color: var(--color-brand-soft); padding-left: 0.4rem; }
.chunk li:first-child { border-top: none; padding-top: 0; }

@media (max-width: 760px) {
  .chunk-grid { grid-template-columns: 1fr; }
}

/* Bento-style capability grid for Leistungen */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 1.25rem;
}
.bento-cell {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-size: cover;
  background-position: center;
  transition: background-size 0.4s ease;
}
.bento-cell:hover { background-size: 108%; }
.bento-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(11 24 38 / 0) 40%, rgb(11 24 38 / 0.82) 100%);
}
.bento-cell span {
  position: relative;
  z-index: 1;
  padding: 1rem 1.1rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.bento-cell.large { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento-cell.wide { grid-column: 3 / 5; grid-row: 1 / 2; }
.bento-cell.normal-a { grid-column: 3 / 4; grid-row: 2 / 3; }
.bento-cell.normal-b { grid-column: 4 / 5; grid-row: 2 / 3; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: 260px repeat(3, 150px); }
  .bento-cell.large { grid-column: 1 / 3; grid-row: 1 / 2; }
  .bento-cell.wide { grid-column: 1 / 3; grid-row: 2 / 3; }
  .bento-cell.normal-a { grid-column: 1 / 2; grid-row: 3 / 4; }
  .bento-cell.normal-b { grid-column: 2 / 3; grid-row: 3 / 4; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: 220px repeat(3, 180px); }
  .bento-cell.large, .bento-cell.wide, .bento-cell.normal-a, .bento-cell.normal-b { grid-column: 1 / 2; }
  .bento-cell.large { grid-row: 1 / 2; }
  .bento-cell.wide { grid-row: 2 / 3; }
  .bento-cell.normal-a { grid-row: 3 / 4; }
  .bento-cell.normal-b { grid-row: 4 / 5; }
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.gallery-grid button {
  border: none;
  padding: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.gallery-grid button:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgb(9 15 22 / 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(90vw, 1100px); max-height: 82vh; border-radius: var(--radius); }
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox-caption { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; color: #cfd8e0; font-size: 0.9rem; }

/* Timeline (Über uns) */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  left: 84px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--color-line);
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1.75rem;
  padding-bottom: 2.1rem;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline-year {
  font-weight: 800;
  color: var(--color-brand-soft);
  padding-top: 0.05rem;
  padding-right: 12px;
  text-align: right;
}
.timeline li::after {
  content: "";
  position: absolute;
  left: 79px;
  top: 0.35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  border: 3px solid var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line);
}
.timeline-body p { margin: 0; color: var(--color-ink-soft); }

@media (max-width: 620px) {
  .timeline::before { left: 58px; }
  .timeline li { grid-template-columns: 58px 1fr; gap: 1rem; }
  .timeline li::after { left: 53px; }
  .timeline-year { font-size: 0.92rem; padding-right: 8px; }
}

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.contact-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contact-list li {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-line);
}
.contact-list li:first-child { border-top: none; padding-top: 0; }
.contact-list svg { flex: none; color: var(--color-brand-soft); margin-top: 0.15rem; }
.contact-list a, .contact-list span.value { font-weight: 700; color: var(--color-text); }
.contact-list .label { display: block; font-size: 0.82rem; color: var(--color-steel); font-weight: 600; }

.map-figure {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: var(--color-paper-tint);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* CTA band */
.cta-band {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: 0.35em; }
.cta-band p { color: #cfd8e0; margin-bottom: 0; }

/* Pill list (brand/model tags) */
.pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.pill-list li {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pill-list li:hover {
  border-color: var(--color-brand-soft);
  color: var(--color-brand-soft);
  transform: translateY(-2px);
}
.pill-list a { color: inherit; text-decoration: none; }

/* External marketplace links (Angebote): a compact icon-badge pill rather
   than a plain text pill, reusing the same icon-circle language as
   .service-icon elsewhere on the site. */
.platform-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.platform-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-paper);
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.platform-link:hover {
  border-color: var(--color-brand-soft);
  color: var(--color-brand-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.platform-link-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  transition: background-color 0.2s ease;
}
.platform-link:hover .platform-link-icon { background: var(--color-brand-soft); }
.platform-link-arrow { flex: none; opacity: 0.7; transition: transform 0.2s ease, opacity 0.2s ease; }
.platform-link:hover .platform-link-arrow { opacity: 1; transform: translate(2px, -2px); }

/* Product listing (Angebote), sourced from the CMS "Produkte" JSON
   collection via assets/js/collections.js. Filter bar is built by the same
   script, right before the grid, once there's more than a couple of
   entries to search/filter through. */
.product-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.product-search {
  flex: 1 1 240px;
  max-width: 320px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-text);
  font: inherit;
  font-size: 0.92rem;
}
.product-search::placeholder { color: var(--color-steel); }
.product-search:focus { outline: none; border-color: var(--color-brand-soft); }
.product-filter-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.product-filter-pills button {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.product-filter-pills button:hover { border-color: var(--color-brand-soft); color: var(--color-brand-soft); }
.product-filter-pills button.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.product-empty { color: var(--color-ink-soft); }
.product-empty[hidden] { display: none; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.product-card[hidden] { display: none; }
.product-card:hover {
  border-color: var(--color-brand-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.product-card-media { display: flex; gap: 2px; aspect-ratio: 4 / 3; overflow: hidden; }
.product-card-media img { flex: 1; width: 100%; height: 100%; object-fit: cover; min-width: 0; }
.product-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.product-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.product-card-head h3 { margin: 0; font-size: 1.05rem; }
.product-price { font-weight: 800; color: var(--color-brand-soft); white-space: nowrap; }
.product-condition {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-soft);
  background: var(--color-brand-tint);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.product-card-body p { margin: 0; color: var(--color-ink-soft); font-size: 0.92rem; }
/* Clipped to 3 lines on the card; the modal below shows the same text in
   full, so nothing is lost, just deferred until the card is clicked. */
.product-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* Product popup: full description, an image carousel (product cards allow
   up to 3 photos), and a CTA straight to the contact page. Structurally
   modeled on .lightbox further up, but with a body underneath the image
   instead of just a caption. */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgb(9 15 22 / 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.product-modal.is-open { display: flex; }
.product-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.product-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(9 15 22 / 0.55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.product-modal-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-paper-tint);
}
.product-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-modal-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(9 15 22 / 0.55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.product-modal-arrow.prev { left: 0.75rem; }
.product-modal-arrow.next { right: 0.75rem; }
.product-modal-arrow[hidden] { display: none; }
.product-modal-dots {
  position: absolute;
  bottom: 0.85rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}
.product-modal-dots[hidden] { display: none; }
.product-modal-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.4);
  cursor: pointer;
}
.product-modal-dots button.is-active { background: #fff; }
.product-modal-body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.product-modal-body p { margin: 0; color: var(--color-ink-soft); }
.product-modal-body .btn { align-self: flex-start; margin-top: 0.5rem; }

/* Legal content */
.prose h2 { margin-top: 2.2em; font-size: 1.2rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-ink-soft); max-width: 74ch; }
.prose ul { padding-left: 1.2rem; }

/* Footer */
.site-footer {
  background: var(--color-ink);
  color: #cfd8e0;
  padding-block: 3.5rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.footer-grid h3 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6rem; }
.footer-grid a { color: #cfd8e0; }
.footer-grid a:hover { color: #fff; }
.footer-brand p { color: #9fb3c2; font-size: 0.92rem; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: #9fb3c2;
}
.footer-bottom a { color: #9fb3c2; }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Utility */
.mt-0 { margin-top: 0; }
.text-steel { color: var(--color-steel); }