/* ---------------------------------------------------------
   balli Kurier & Transport — Stylesheet
   --------------------------------------------------------- */

:root {
  --black: #0b0b0c;
  --near-black: #141416;
  --white: #ffffff;
  --off-white: #f6f5f3;
  --grey-50: #fafafa;
  --grey-100: #eeeeee;
  --grey-300: #c8c7c5;
  --grey-500: #8b8a88;
  --grey-700: #55534f;
  --text-dark: #17161a;
  --text-light: #f4f3f1;
  --warm-grey-dark: #26221e;

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

  --container: 1240px;
  --section-pad: clamp(4rem, 9vw, 8rem);
  --radius: 14px;
  --header-h: 112px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  *, *::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-sans);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
picture { display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  z-index: 2000;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid #2f6fed;
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-700);
  margin-bottom: 0.9rem;
}
.eyebrow--light { color: rgba(255,255,255,0.82); }

h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); line-height: 1.1; }
h3 { font-size: 1.15rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 0.95rem 1.6rem;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn span { transition: transform 0.25s var(--ease); display: inline-block; }
.btn:hover span { transform: translateX(3px); }
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--black); color: var(--white); }
.btn--primary:hover { background: #262626; }

.btn--ghost-dark { background: transparent; color: var(--black); border-color: var(--black); }
.btn--ghost-dark:hover { background: var(--black); color: var(--white); }

.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn--ghost-light:hover { background: var(--white); color: var(--black); }

.btn--small { padding: 0.7rem 1.25rem; font-size: 0.88rem; }
.btn--full { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
/* One clear rule, two states only:
   - default = "past the story": stable dark translucent bar + blur, always
     white logo/text, regardless of which section happens to sit behind it.
   - .site-header--overlay = only while the hero/scroll-video is still behind
     the header: near-transparent gradient, same white logo/text.
   This replaces the old per-section light/dark toggle, which produced a
   flickering mix of white bars, black bars and bleed-through video frames
   as different sections passed under the header. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(10,10,11,0.9);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
  gap: 1rem;
}
.brand { display: inline-flex; }
.brand__logo {
  width: clamp(110px, 14vw, 150px);
  height: auto;
  display: block;
  color: var(--white);
}
.site-footer__brand .brand__logo { width: 150px; margin-bottom: 0.25rem; color: var(--black); }

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.2rem);
}
.primary-nav ul { display: flex; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.primary-nav a:not(.btn) {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  position: relative;
  padding-bottom: 3px;
  color: var(--white);
  transition: color 0.4s var(--ease);
  white-space: nowrap;
}
.primary-nav a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: currentColor;
  transition: right 0.25s var(--ease);
}
.primary-nav a:not(.btn):hover::after { right: 0; }

.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem;
  color: var(--white);
}
.nav-toggle__box { display: flex; flex-direction: column; gap: 5px; width: 24px; }
.nav-toggle__bar { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header directly over the hero/scroll-video: near-transparent, just enough
   gradient to keep the logo/nav readable against bright frames. */
.site-header--overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 100%);
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* ---------- Reveal-on-scroll (light sections after the story) ---------- */
/* Visible is the default and the no-JS/no-IntersectionObserver/reduced-motion
   fallback. JS opts an element INTO a temporary hidden "is-pending" state
   only once it is actually about to observe and reveal it, and force-clears
   that state on a short timer regardless of whether the observer ever fires
   (a backgrounded/hidden tab can stall it) — so content can never be left
   permanently invisible. See js/main.js. */
[data-reveal] {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-pending {
  opacity: 0;
  transform: translateY(22px);
}

/* ---------------------------------------------------------
   STORY — sticky fullscreen scrollytelling sequence
   --------------------------------------------------------- */
.story {
  background: var(--black);
  /* The sticky header still reserves its own height in normal flow, which
     would otherwise push the story's top edge below y=0 — leaving a sliver
     at the very top where the header has nothing dark to float over, so it
     wrongly renders solid at scroll position 0. Pulling the story up by the
     header's height lets the video start exactly at the viewport top, with
     the (higher z-index, transparent-in-overlay-mode) header floating over it. */
  margin-top: calc(-1 * var(--header-h));
}
.story__track {
  position: relative;
  height: 720vh;
  /* svh (small viewport height) ignores the mobile browser's collapsible
     address/toolbar, so this scroll distance never changes as the visitor
     scrolls past the story — vh would recompute mid-scroll on some mobile
     browsers, subtly reflowing a 7.2-screen-tall track underfoot. */
  height: 720svh;
}
.story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Small viewport height: guarantees the sticky frame never exceeds what is
     actually visible once the mobile browser's toolbar is showing, which is
     what left a black band of unfilled space below the fold on first load. */
  height: 100svh;
  overflow: hidden;
}
/* The poster shows until the first frame has been drawn onto the canvas. */
.story__media {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--black) url("../assets/img/scrollstory-poster.jpg") 50% 50% / cover no-repeat;
}
/* <canvas> elements (frame sequence). object-fit works on canvas just like on
   video: the bitmap keeps the frame's native size, CSS does cover/contain. */
.story__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.story__video--bg { display: none; }
.story__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 50%, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.28) 20%, rgba(0,0,0,0.3) 78%, rgba(0,0,0,0.62) 100%);
  pointer-events: none;
}

.story__loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,11,12,0.35);
  opacity: 1;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.story__loading.is-hidden { opacity: 0; }
.spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: var(--white);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.story__progress {
  position: absolute;
  left: clamp(1.25rem, 4vw, 3rem);
  right: clamp(1.25rem, 4vw, 3rem);
  top: calc(var(--header-h) + 10px);
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  z-index: 3;
}
.story__progress span {
  display: block; height: 100%; width: 0%;
  background: var(--white);
  border-radius: 999px;
}

.story__scenes { position: absolute; inset: 0; z-index: 2; }
.story__scene {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 14vh, 8rem) clamp(1.25rem, 6vw, 4rem);
  visibility: hidden;
  pointer-events: none;
  text-align: center;
}
.story__scene.is-active { visibility: visible; pointer-events: auto; }
.story__scene:first-child { visibility: visible; pointer-events: auto; }
/* Copy always sits in the vertical middle of the frame (data-vpos is no
   longer used for top/bottom pinning). */

.story__copy { max-width: 980px; color: var(--white); }
.story__kicker {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.88);
  margin-bottom: 0.9rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  opacity: 0;
  will-change: opacity, transform, filter;
}
.story__headline {
  color: var(--white);
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 26px rgba(0,0,0,0.5);
}
.story__headline .word {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.story__sub {
  margin-top: 1.3rem;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  opacity: 0;
  will-change: opacity, transform, filter;
}
.story__cta {
  margin-top: 1.9rem;
  opacity: 0;
  will-change: opacity, transform, filter;
}
/* Keyboard users tabbing in before the scroll-driven reveal reaches an
   element should still see what they've focused, not an invisible target. */
.story__kicker:focus-visible,
.story__headline .word:focus-visible,
.story__sub:focus-visible,
.story__cta:focus-visible {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
/* The hero (first scene) must read as a complete, finished page the instant
   it paints — before scrollstory.js has even run once, let alone before the
   video's metadata arrives. CSS default state is therefore already fully
   revealed here (JS's PHASES_HERO computes this same end-state once it runs,
   so there is no visual jump — only a later, scroll-driven fade-out). This
   also serves as the no-JS fallback, since nothing would otherwise reveal it. */
.story__scene:first-child .story__kicker,
.story__scene:first-child .story__headline .word,
.story__scene:first-child .story__sub,
.story__scene:first-child .story__cta {
  opacity: 1;
  filter: none;
  transform: none;
}

.story__scrollhint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 3;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  transition: opacity 0.4s var(--ease);
}
.story__scrollhint-arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  position: relative;
  animation: bob 2.2s var(--ease) infinite;
  flex: none;
}
.story__scrollhint-arrow::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--white);
  border-bottom: 1.5px solid var(--white);
  transform: translate(-50%, -65%) rotate(45deg);
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .story__scrollhint-arrow { animation: none; } }

@media (max-width: 640px) {
  /* Two-layer canvas: the real 16:9 frame is shown uncropped (contain) so no
     subject is ever cut off, while an enlarged, blurred, darkened copy of the
     same clip fills the letterbox bands behind it so the screen still reads
     as edge-to-edge. Both layers are drawn from the same scroll-driven frame. */
  .story__video--bg {
    display: block;
    object-fit: cover;
    object-position: var(--mobile-obj-x, 50%) 50%;
    /* Geometrically this layer already fully covers the sticky frame (scaled
       1.2 from center, so it overshoots every edge). The gap visitors saw
       wasn't missing coverage — it was this filter combined with the scrim's
       darkest zones crushing the blurred video to flat, texture-less black.
       A lighter brightness keeps it readably "filled" instead of empty. */
    filter: blur(28px) brightness(0.78) saturate(1.15);
    transform: scale(1.2);
  }
  .story__video--fg {
    object-fit: contain;
    background: transparent;
  }
  h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .story__sub { font-size: 1.1rem; }

  /* On a narrow, very tall screen the letterboxed 16:9 video only ever
     occupies a horizontal band near the middle of the frame. Pinning copy to
     the very top or bottom (desktop's data-vpos) left a huge unbalanced void
     between the text block and the scroll hint. Centering the copy overlays
     it on that same middle band instead, so text, video and the scroll hint
     read as one deliberately composed viewport rather than a tall gap. */
  .story__scene,
  .story__scene[data-vpos="top"],
  .story__scene[data-vpos="bottom"] {
    align-items: center;
    padding-top: clamp(5.5rem, 15vh, 7rem);
    padding-bottom: clamp(5.5rem, 15vh, 7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story { display: none; }
}

/* ---------------------------------------------------------
   STORY-STATIC — reduced-motion fallback, normal document flow
   --------------------------------------------------------- */
.story-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .story-static { display: block; padding-block: var(--section-pad); background: var(--white); }
}
.story-static > .wrap { max-width: 760px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.story-static__lede { color: var(--grey-700); font-size: 1.05rem; margin-top: 1.1rem; }

.story-static__scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.story-static__scene--reverse { direction: rtl; }
.story-static__scene--reverse > * { direction: ltr; }
.story-static__scene picture { border-radius: var(--radius); overflow: hidden; }
.story-static__scene img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.story-static__copy p:not(.eyebrow) { color: var(--grey-700); margin-block: 1rem 1.5rem; }

@media (max-width: 780px) {
  .story-static__scene { grid-template-columns: 1fr; }
  .story-static__scene--reverse { direction: ltr; }
}

/* ---------------------------------------------------------
   LEISTUNGEN — dark chapter-transition intro + editorial numbered list
   --------------------------------------------------------- */
.leistungen { background: var(--white); }
.leistungen__intro {
  position: relative;
  background: var(--black);
  padding-block: clamp(5rem, 16vh, 9rem);
  overflow: hidden;
}
.leistungen__intro h2 { color: var(--white); }
.leistungen__intro .wrap { position: relative; z-index: 1; }
.leistungen__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  max-width: none;
  height: auto;
  color: var(--white);
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .leistungen__watermark { opacity: 0.06 !important; transform: translate(-50%, -50%) !important; }
}
/* Editorial bento mosaic: four asymmetric image tiles, text lives directly
   on the photo via a bottom gradient — no cards, no equal-sized grid. */
.leistungen__mosaic {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.leistung-tile--a { grid-area: 1 / 1 / 3 / 2; }
.leistung-tile--b { grid-area: 1 / 2 / 2 / 4; }
.leistung-tile--c { grid-area: 2 / 2 / 3 / 3; }
.leistung-tile--d { grid-area: 2 / 3 / 3 / 4; }

.leistung-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--white);
  background: var(--near-black);
}
.leistung-tile picture,
.leistung-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leistung-tile img { transition: transform 0.7s var(--ease); }
.leistung-tile:hover img,
.leistung-tile:focus-visible img { transform: scale(1.045); }

.leistung-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.72) 100%);
  transition: background 0.4s var(--ease);
}
.leistung-tile:hover .leistung-tile__overlay,
.leistung-tile:focus-visible .leistung-tile__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 20%, rgba(0,0,0,0.85) 100%);
}
.leistung-tile__num {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.5rem;
}
.leistung-tile__title {
  display: block;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.leistung-tile__text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.96rem;
  color: rgba(255,255,255,0.88);
  max-width: 32ch;
}
.leistung-tile__arrow {
  margin-top: 0.9rem;
  display: inline-block;
  width: fit-content;
  font-size: 1.1rem;
  transition: transform 0.3s var(--ease);
}
.leistung-tile:hover .leistung-tile__arrow,
.leistung-tile:focus-visible .leistung-tile__arrow { transform: translateX(5px); }

@media (max-width: 900px) {
  .leistungen__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 260px 200px; }
  .leistung-tile--a { grid-area: 1 / 1 / 2 / 3; }
  .leistung-tile--b { grid-area: 2 / 1 / 3 / 3; }
  .leistung-tile--c { grid-area: 3 / 1 / 4 / 2; }
  .leistung-tile--d { grid-area: 3 / 2 / 4 / 3; }
}

@media (max-width: 640px) {
  .leistungen__mosaic {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
  .leistung-tile { height: 68vw; min-height: 220px; }
  .leistung-tile--a, .leistung-tile--c { height: 82vw; min-height: 260px; }
}

/* ---------------------------------------------------------
   UEBER UNS — dark split
   --------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.split__media { position: relative; overflow: hidden; }
.split__media img { height: 100%; width: 100%; object-fit: cover; }
.split__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 6vw, 5rem); }
.split__copy p:not(.eyebrow) { margin-top: 1.2rem; color: var(--grey-300); max-width: 46ch; }
.split--dark { background: var(--near-black); color: var(--text-light); }
.split--dark h2 { color: var(--white); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; min-height: auto; }
  .split__media { aspect-ratio: 16/9; }
}

/* ---------------------------------------------------------
   EINSATZGEBIETE — full-bleed photo section
   --------------------------------------------------------- */
.areas { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; }
.areas__bg { position: absolute; inset: 0; z-index: 0; }
.areas__bg img { width: 100%; height: 100%; object-fit: cover; }
.areas__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.1) 100%);
}
.areas__inner { position: relative; z-index: 1; color: var(--white); max-width: 620px; }
.areas__inner h2 { color: var(--white); text-shadow: 0 4px 24px rgba(0,0,0,0.4); }
.areas__inner p { margin-top: 1.2rem; color: rgba(255,255,255,0.9); font-size: 1.05rem; max-width: 46ch; }

/* ---------------------------------------------------------
   VORTEILE — dark editorial list
   --------------------------------------------------------- */
.advantages { background: var(--near-black); color: var(--text-light); padding-block: var(--section-pad); }
.advantages h2 { color: var(--white); }

.advantages__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Left rail stays put while the panels on the right scroll past/stack over it. */
.advantages__intro {
  position: sticky;
  top: calc(var(--header-h) + 2.5rem);
}
.advantages__intro-media {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0.85;
}
/* `height:100%` on the <img> alone does nothing here: percentage heights only
   resolve against a definite ancestor height, and the <picture> in between
   (plain display:block, no explicit height) breaks that chain — the image
   was rendering at its own intrinsic aspect ratio, filling only part of the
   aspect-ratio box above and leaving the rest as bare section background
   (this, not spacing, was the "gap" between the image and the first card).
   Giving <picture> the same 100% height closes the chain. */
.advantages__intro-media picture,
.advantages__intro-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A plain, robust vertical sequence — no position:sticky, no stacking, no
   per-child top/z-index/scale tiers. An earlier sticky-stack version (each
   panel pinned a little lower than the last, sliding over the previous one)
   depended on every panel already being fully opaque and fully revealed at
   the exact moment it started to overlap the one behind it; in practice a
   not-yet-revealed panel (see the reveal-on-scroll notes above) is briefly
   translucent, so panels visibly showed through one another mid-scroll.
   Plain flow can never overlap, so it can never show that bleed-through. */
.advantages__panels { display: block; }
.advantages__panel {
  list-style: none;
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.advantages__panel:last-child { margin-bottom: 0; }
/* Both variants now share one warm, dark family — just a step apart in
   value — instead of the previous pure-black/pure-white alternation, so the
   sequence reads as one cohesive, high-quality set rather than a hard flicker. */
.advantages__panel--dark { background: var(--black); color: var(--text-light); border: 1px solid rgba(255,255,255,0.07); }
.advantages__panel--light { background: var(--warm-grey-dark); color: var(--text-light); border: 1px solid rgba(255,255,255,0.07); }
.advantages__panel--light .advantages__num { color: rgba(255,255,255,0.32); }
.advantages__panel--light h3 { color: var(--white); }
.advantages__panel--light p { color: var(--grey-300); }

.advantages__num {
  display: block;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 0.9rem;
}
.advantages__panel h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 0.5rem; }
.advantages__panel--dark h3 { color: var(--white); }
.advantages__panel p { font-size: 1rem; color: var(--grey-300); }

@media (max-width: 900px) {
  /* The sticky left rail is a desktop-only trick (the cards themselves are
     plain flow at every width, see above). Below the desktop breakpoint,
     single column, plain flow throughout, in the order heading -> image ->
     cards -> cards. */
  .advantages__layout { grid-template-columns: 1fr; gap: 0; }
  .advantages__intro { position: static; }
  /* Below desktop the box switches from the 4:5 portrait crop to a 16:9
     landscape one — a portrait box on a wide van photo cropped off the
     front/rear under cover. `height: auto` + `aspect-ratio` (not a fixed
     px height) keeps the box's height tied to its own width instead of a
     tall ancestor, which is what caused the same crop when `picture` was
     given `height: 100%` here. */
  .advantages__intro-media {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-inline: 0;
  }
  .advantages__intro-media picture { display: block; width: 100%; height: 100%; }
  .advantages__intro-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .advantages__panels { margin-top: 28px; }
  .advantages__panel { margin-bottom: 20px; }
}

/* ---------------------------------------------------------
   VERSPRECHEN — emotional closer
   --------------------------------------------------------- */
/* Cinematic closer: full-bleed photo (same world as the opening video),
   dark gradient for legibility, large left-aligned type — no white card. */
.promise {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}
.promise__bg { position: absolute; inset: 0; z-index: 0; }
.promise__bg img { width: 100%; height: 100%; object-fit: cover; }
.promise::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%),
              linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 40%);
}
.promise__watermark {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 4%;
  width: 46%;
  max-width: 560px;
  height: auto;
  color: var(--white);
  opacity: 0.16;
  transform: translateY(-50%);
  pointer-events: none;
}
.promise__inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding-block: clamp(3rem, 8vw, 5rem);
}
.promise h2 { max-width: 14ch; color: var(--white); text-shadow: 0 4px 26px rgba(0,0,0,0.4); }
.promise__text { margin-top: 1.4rem; color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 46ch; text-shadow: 0 2px 16px rgba(0,0,0,0.4); }
.promise .btn { margin-top: 1.9rem; }

@media (max-width: 780px) {
  .promise { min-height: 78vh; align-items: flex-end; }
  .promise__inner { padding-bottom: clamp(2.5rem, 8vw, 3.5rem); }
  .promise__watermark { width: 70%; opacity: 0.13; right: -6%; }
}

/* ---------------------------------------------------------
   KONTAKT / CTA
   --------------------------------------------------------- */
.cta { padding-block: var(--section-pad); background: var(--white); }
.cta__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.cta p:not(.eyebrow) { color: var(--grey-700); margin-top: 1.2rem; max-width: 46ch; }

.contact-form {
  background: var(--off-white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  gap: 1rem;
}
.contact-form__row { display: grid; gap: 0.4rem; }
.contact-form__row label { font-size: 0.88rem; font-weight: 600; color: var(--grey-700); }
.contact-form__row .optional { font-weight: 400; color: var(--grey-500); }
.contact-form input, .contact-form textarea {
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--text-dark);
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--black); }
.contact-form__status { font-size: 0.9rem; font-weight: 600; color: #1e7d3d; }
.contact-form__note { font-size: 0.78rem; color: var(--grey-500); line-height: 1.5; }

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

/* ---------- Footer ---------- */
.site-footer { background: var(--off-white); border-top: 1px solid var(--grey-100); }
.site-footer__inner {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 3rem);
}
.site-footer__brand p { margin-top: 1rem; color: var(--grey-700); font-weight: 600; }
.site-footer h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.1rem; color: var(--grey-700); }
.site-footer__nav ul { display: grid; gap: 0.65rem; }
.site-footer__nav a { text-decoration: none; color: var(--text-dark); font-weight: 500; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__contact p { color: var(--grey-700); margin-bottom: 1.1rem; max-width: 32ch; }
.site-footer__bottom {
  border-top: 1px solid var(--grey-100);
  padding-block: 1.4rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--grey-500);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .primary-nav {
    position: fixed;
    inset: calc(env(safe-area-inset-top, 0px) + 64px) 0 auto 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem clamp(1.25rem, 6vw, 2.5rem) 2rem;
    gap: 1.5rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    border-bottom: 1px solid var(--grey-100);
    box-shadow: 0 16px 32px rgba(0,0,0,0.08);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .primary-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .primary-nav ul { flex-direction: column; gap: 1.1rem; }
  .primary-nav.is-open a:not(.btn) { color: var(--text-dark); }
  .nav-cta { justify-content: center; }
}

@media (max-width: 640px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .btn { width: 100%; justify-content: center; }
  .story__cta { width: auto; }
}