/* ==========================================================================
   E.K.E. — Marketing Website
   Brand: deep black base, signal-red accent, silver/off-white text.
   Font: Plus Jakarta Sans (bold/rounded for headings, regular for body).

   MOBILE-FIRST: every rule below targets phones by default. Larger screens
   are opt-in via `@media (min-width: ...)` blocks placed right after the
   mobile rule they enhance — there is no "desktop base + mobile override"
   any more. Breakpoints used: 700px (tablet-ish two-up layouts start),
   900px (full desktop nav/hero/footer layout).
   ========================================================================== */

:root {
  --black-base: #0a0c10;
  --black-panel: #131519;
  --red: #c81e2c;
  --red-hover: #e23a2f;
  --silver: #aab0bb;
  --silver-dim: #6d7381;
  --off-white: #f2f1ee;
  --hairline: rgba(255, 255, 255, 0.1);
  --panel-glass: rgba(19, 21, 25, 0.6);

  /* Light-surface tokens for the "Leistungen" section downward — see the
     scoped override block below .hero-scroll. */
  --surface-light: #f7f7f8;
  --panel-light: #ffffff;
  --ink-light: #14161a;
  --muted-light: #55606e;
  --dim-light: #8a929e;
  --hairline-light: rgba(20, 22, 26, 0.12);

  --nav-height: 84px;
  --container: 1240px;
  --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black-base);
  color: var(--off-white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--off-white);
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Visually hidden but still exposed to assistive tech — used for the
   "opens in new tab" hint on external/WhatsApp links. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden off-screen until keyboard-focused, so keyboard users
   can jump past the floating nav straight to the page content. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: 8px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* Visible keyboard-focus ring. Sits outside the element's own box via the
   offset, so it reads clearly against both the dark hero/nav and the
   light "Leistungen"-downward sections, including on the solid-red .btn. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* ---------- Scroll reveal ----------
   script.js toggles .is-visible via IntersectionObserver the first time an
   element enters the viewport (one-time, not scroll-linked/continuous —
   keeps this cheap on mobile). transform/opacity only, so it's compositor-
   only work. transition-delay on nth-child gives sections with several
   items (FAQ rows, testimonial cards) a waterfall cascade instead of
   popping in together. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Buttons (pill + dark icon circle) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: var(--red);
  color: var(--off-white);
  border-radius: 999px;
  padding: 6px 6px 6px 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--red-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }

/* Secondary, lower-emphasis CTA (e.g. "Anrufen" next to the primary
   WhatsApp button) — ghost pill instead of a solid fill, glass-blurred to
   match the nav/trust-panel treatment so it reads at home over the video. */
.btn-outline {
  background: rgba(10, 12, 16, 0.35);
  border: 1.5px solid rgba(242, 241, 238, 0.4);
  color: var(--off-white);
  padding: 12px 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-outline:hover {
  background: rgba(242, 241, 238, 0.12);
  border-color: var(--off-white);
  transform: translateY(-1px);
}
.btn-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--black-base);
  color: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   "Angebot anfragen" dialog — native <dialog>, styled to match the site's
   existing glass-panel language (.mobile-menu/.trust-panel). Sits at body
   level in the DOM, so it always reads the root (dark-theme) custom
   properties regardless of which section is visible behind it.
   ========================================================================== */
.angebot-dialog {
  position: fixed;
  margin: auto;
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 64px);
  padding: clamp(28px, 5vw, 40px);
  background: var(--panel-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  color: var(--off-white);
}
.angebot-dialog::backdrop {
  background: rgba(10, 12, 16, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.angebot-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.angebot-dialog-head h2 {
  font-size: 1.4rem;
}
.angebot-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.angebot-close:hover {
  background: rgba(242, 241, 238, 0.1);
}
.angebot-dialog-lede {
  color: var(--silver);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 24px;
}
.angebot-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.angebot-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--silver);
}
.angebot-field input,
.angebot-field textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--off-white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  resize: vertical;
}
.angebot-field input::placeholder,
.angebot-field textarea::placeholder {
  color: var(--silver-dim);
}
.angebot-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

/* ==========================================================================
   Floating pill navigation
   Mobile: logo + burger only. Desktop (900px+): full nav links + CTA.
   ========================================================================== */
.floating-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: fit-content;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 6px 6px 18px;
  background: var(--panel-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--off-white);
  flex-shrink: 0;
}
.logo-img { height: 40px; width: auto; display: block; }

.nav-links {
  display: none;
  align-items: center;
  gap: 20px;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--silver);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--off-white); }

.nav-cta {
  display: none;
  padding: 4px 4px 4px 18px;
  font-size: 0.82rem;
  gap: 10px;
}
.nav-cta .btn-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
}

.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--off-white);
  margin: 0 auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
}

/* Clears the fixed floating-nav pill when jumping straight to a section
   via #leistungen/#preise/#faq (nav-links, footer nav, mobile menu). */
#leistungen,
#preise,
#faq {
  scroll-margin-top: 90px;
}

.mobile-menu {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 99;
  width: min(420px, calc(100% - 32px));
  background: var(--panel-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mobile-menu a {
  font-weight: 600;
  color: var(--off-white);
  padding: 6px 4px;
}
.mobile-menu .btn { justify-content: center; margin-top: 6px; }

/* ==========================================================================
   Hero: scroll-scrubbed image-sequence section
   ========================================================================== */
.hero-scroll {
  position: relative;
  height: 480vh;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #1a1d23 0%, var(--black-base) 70%);
}
/* Subtle film-grain texture over the hero footage — sits above the canvas
   and scrims (z-index 1) but below the headline/CTA content (z-index 2) —
   breaks up the flat gradient/video look without adding a visible library. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bottom-anchored scrim: keeps the headline and trust bar legible. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(10,12,16,0.97) 0%, rgba(10,12,16,0.75) 20%, rgba(10,12,16,0.25) 48%, rgba(10,12,16,0.1) 62%, rgba(10,12,16,0.5) 100%);
}
/* Left-anchored scrim: keeps the headline readable no matter what part of the
   video is behind it, instead of relying only on the bottom gradient. */
.hero-scrim-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,12,16,0.72) 0%, rgba(10,12,16,0.4) 32%, rgba(10,12,16,0.05) 60%, transparent 78%);
}

/* Scroll-progress bar pinned to the bottom edge of the video. Width is
   driven live by scroll progress (see tick() in script.js), so it's an
   honest "how far through the sequence" indicator, not decorative. */
.hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 2;
}
.hero-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--red);
}

/* Centred headline block, positioned just under the floating nav. */
.hero-content {
  position: absolute;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .hero-content { top: 128px; }
}

/* All 4 .hero-stage cards share one grid cell (stacked) so the block's
   height locks to the tallest one — swapping copy never shifts the CTA
   button or trust bar below it. */
.hero-stages {
  display: grid;
  max-width: 720px;
  margin-bottom: 28px;
}
.hero-stage {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-stage.is-active {
  opacity: 1;
  transform: translateY(0);
}
.hero-stage-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--off-white);
  opacity: 0.55;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  margin-bottom: 10px;
}
.hero-stage h1 {
  font-size: clamp(2.1rem, 9vw, 2.9rem);
  line-height: 1.06;
  margin-bottom: 16px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
}
.hero-stage p {
  font-size: 1.05rem;
  color: rgba(242, 241, 238, 0.85);
  max-width: 46ch;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .hero-stage h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); margin-bottom: 18px; }
  .hero-stage p { font-size: 1.2rem; }
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Static trust bar, pinned to the bottom of the hero regardless of stage.
   Sized up (bigger text, bolder weight, more padding) so it reads as a
   confident claim instead of fine print. */
.trust-panel {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--panel-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 22px 28px;
  text-align: center;
  max-width: calc(100vw - 32px);
}
.trust-item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--off-white);
  max-width: 26ch;
}
.trust-divider {
  width: 100%;
  height: 1px;
  background: var(--hairline);
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .trust-panel {
    bottom: 40px;
    flex-direction: row;
    gap: 28px;
    padding: 24px 40px;
  }
  .trust-item { font-size: 1.15rem; max-width: 24ch; }
  .trust-divider { width: 1px; height: 40px; }
}

/* ==========================================================================
   Light theme: "Leistungen" downward (services, pricing, FAQ, testimonials,
   footer) on the homepage — hero + nav stay dark on purpose, see below —
   plus the entire content area of every sub-page (Impressum, Datenschutz,
   AGB, Ratgeber articles, Strecken pages), which has no dark hero of its
   own and so should just read as a normal light page throughout.

   Implemented as a variable override scoped to these section classes, plus
   #main-content (the sub-pages' <main> wrapper — the homepage's own <main>
   uses id="top" instead, so this rule never touches the homepage/hero).
   Every color in this stylesheet (and extra-pages.css, which shares the
   same custom properties) already routes through --off-white/--silver/
   --silver-dim/--hairline/--black-panel, so redefining them here flips
   every downstream rule (headings, body copy, borders, panels) without
   touching each one individually. --black-base and --red are untouched,
   so the icon-circle-on-red button and the red accent stay exactly as
   they are on dark backgrounds (nav pill, hero). */
.services,
.pricing,
.faq,
.testimonials,
.site-footer,
#main-content {
  background: var(--surface-light);
  --off-white: var(--ink-light);
  --silver: var(--muted-light);
  --silver-dim: var(--dim-light);
  --hairline: var(--hairline-light);
  --black-panel: var(--panel-light);
}
/* `color` is inherited, not re-read live like a custom property — body's
   `color: var(--off-white)` already resolved to the dark-theme value up at
   <body>, so anything in here that doesn't set its own color (e.g.
   .route-fact .value) would otherwise inherit that stale light color
   straight through, invisible on this section's light background. Only
   needed on #main-content: the other selectors above always have some
   explicit color re-declaration lower down their own tree already (e.g.
   .footer-bottom's color), sub-pages didn't. */
#main-content {
  color: var(--off-white);
}
/* Button labels stay white regardless of section theme (red bg needs the
   contrast either way) — the --off-white override above would otherwise
   turn them dark since .btn also reads that variable. */
.services .btn,
.pricing .btn,
.faq .btn,
.testimonials .btn,
.site-footer .btn,
#main-content .btn {
  color: #f2f1ee;
}
/* Testimonial cards are deliberately the *base* surface tone against the
   --black-panel-toned section band (a recessed-card look, mirroring the
   original dark theme's --black-base-on-black-panel pairing) — so this
   needs its own explicit value rather than following --black-panel. */
.testimonials .testimonial-card {
  background: var(--surface-light);
}

/* ==========================================================================
   Leistungen — alternating rows (stacked on mobile, side-by-side on desktop)
   ========================================================================== */
.services {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 6vw 60px;
  /* The light-theme background (set on this same max-width/centered element,
     see the scoped override block near :root) would otherwise only paint
     the centered 1240px box and leave the page's dark background showing
     down the sides on wider screens. box-shadow can spread past the box's
     own edges (unlike background), so a huge spread here fakes a full-bleed
     fill without touching layout — clip-path just stops it from creating a
     horizontal scrollbar. */
  box-shadow: 0 0 0 100vmax var(--surface-light);
  clip-path: inset(0 -100vmax);
}
/* Soft dark-to-light handoff where the hero ends — full-bleed for the same
   reason as the box-shadow above (100vw + centering, not max-width). Sits
   behind the section's own content (z-index 0), which is why every direct
   child gets z-index 1 right below. */
.services::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 140px;
  background: linear-gradient(180deg, var(--black-base) 0%, var(--surface-light) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Faint grain across the whole section — same feTurbulence texture as the
   hero/pricing-panel, just much fainter, so the light "Leistungen"-downward
   surface doesn't read as completely flat/empty. Joins .services::before in
   the z-index:0 layer, still behind the real content below. */
.services::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.services > * {
  position: relative;
  z-index: 1;
}
.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
/* Small brand-red accent bar above every section heading — reuses the same
   --red accent language as .service-index/.service-bullets so the red
   thread from the hero keeps showing up all the way down the page instead
   of disappearing into plain text once the light theme starts. */
.section-head::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--red);
  margin-bottom: 20px;
}
.section-head h2 {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
}

/* Bento grid instead of a plain alternating left/right row list: one
   featured card carries visual weight, the other two stack beside it.
   Mobile: simple stacked column (the bento asymmetry only kicks in once
   there's room for two columns). */
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.service-card {
  min-width: 0;
  background: var(--black-panel);
  border: 1px solid var(--hairline);
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -30px rgba(20, 22, 26, 0.2);
}

.service-media-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--hairline);
}
.service-card-featured .service-media-photo { aspect-ratio: 4 / 3; }

.service-index {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.service-copy h3 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 18px;
}
.service-copy p {
  color: var(--silver);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 46ch;
}
.service-bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 0.94rem;
  color: var(--off-white);
  margin-bottom: 10px;
}
.service-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}

@media (min-width: 900px) {
  .services { padding: 140px 5vw 80px; }
  .section-head { margin-bottom: 80px; }
  .section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

  /* Asymmetric bento: the featured card spans both rows in a narrower
     second column, filling the grid with zero empty cells. */
  .services-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, minmax(260px, 1fr));
    grid-auto-flow: dense;
    gap: 28px;
  }
  .service-card-featured {
    grid-row: 1 / 3;
    flex-direction: row;
    align-items: stretch;
    padding: 40px;
  }
  .service-card-featured .service-media,
  .service-card-featured .service-copy {
    flex: 1 1 50%;
    min-width: 0;
  }
  .service-card-featured .service-media-photo {
    /* Cancels the base 4/3 ratio at this width: with both an aspect-ratio
       and a definite height, an auto width is derived FROM the ratio
       (height x 4/3) instead of filling the flex column — aspect-ratio:
       auto lets height:100% + the flex column's own width both apply. */
    aspect-ratio: auto;
    height: 100%;
  }
}

/* ==========================================================================
   Preise
   ========================================================================== */
.pricing {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 6vw 100px;
  /* Full-bleed light background without disturbing the centered max-width
     content box — see the longer comment on .services above. */
  box-shadow: 0 0 0 100vmax var(--surface-light);
  clip-path: inset(0 -100vmax);
}
/* Same faint grain as .services — negative z-index instead of the
   before/lift-children pattern used there, since .pricing has only the one
   .pricing-panel child and doesn't need every child individually lifted. */
.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Diagonal red band marking the Leistungen -> Preise transition — echoes
   the hero-scrim-left diagonal instead of a plain flat hairline, so the red
   thread from the hero keeps recurring down the page. Full-bleed for the
   same 100vw + centering reason as the box-shadow trick above. Sits right
   at the section's top edge, inside the padding, so it never overlaps
   actual text content. */
.pricing::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 32px;
  background: var(--red);
  opacity: 0.5;
  clip-path: polygon(0 0, 100% 70%, 100% 100%, 0 30%);
  pointer-events: none;
}
.pricing-panel {
  position: relative;
  overflow: hidden;
  background: var(--black-panel);
  border: 1px solid var(--hairline);
  border-radius: 32px;
  padding: clamp(40px, 6vw, 80px);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 30px 70px -32px rgba(20, 22, 26, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 80px -30px rgba(20, 22, 26, 0.22);
}
/* Same subtle grain treatment as the hero, toned down further since this
   sits on a much smaller, flatter panel. */
.pricing-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.pricing-panel > * {
  position: relative;
}
.pricing-panel h2 {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  margin-bottom: 20px;
}
/* Same red accent bar as .section-head — pricing-panel doesn't use that
   wrapper (it's a single centered panel, not a heading + body layout), so
   the h2 gets its own centered copy of the same accent. */
.pricing-panel h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--red);
  margin: 0 auto 20px;
}
.pricing-copy {
  color: var(--silver);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: 36px;
}
@media (min-width: 900px) {
  .pricing { padding: 40px 5vw 140px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--black-panel);
  border-top: 1px solid var(--hairline);
  padding: 70px 6vw 24px;
}
.footer-cta {
  max-width: var(--container);
  margin: 0 auto 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.footer-cta h2 {
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1.08;
}

.footer-columns {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--hairline);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col h4 {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: 6px;
}
.footer-col a,
.footer-col span {
  color: var(--off-white);
  font-size: 0.96rem;
}
.footer-col a:hover { color: var(--red); }

.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: var(--silver-dim);
  font-size: 0.85rem;
}
.footer-legal {
  display: flex;
  gap: 20px;
}
.footer-legal a:hover { color: var(--red); }

@media (min-width: 900px) {
  .site-footer { padding: 100px 5vw 32px; }
  .footer-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .footer-columns { grid-template-columns: repeat(4, 1fr); gap: 40px; }
}

/* ==========================================================================
   Reduced motion: static hero, no scroll-scrub
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-scroll {
    height: 100vh;
  }
  .hero-sticky {
    position: relative;
  }
}