/* ============================================================
   main.css — layout & component styles
   Foundation (reset, base, background glow) established in Phase 2.
   Section/component styles are added per-section in Phase 3, using
   ONLY var(--*) tokens from style.css and blueprint-measured values.
   ============================================================ */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
}

/* ---------- Layout scaffold ---------- */
.site-main {
  position: relative;
  z-index: 1;
}

/* Centered content container. Design is 1920 wide (treated as MAX). */
.container {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  position: relative;
}


/* ============================================================
   Section/component styles — Phase 3
   Every value traces to docs/home/blueprint-*.txt + figma-audit.json.
   Design width 1920 = MAX; clamp() scales headings + major spacing.
   ============================================================ */

/* ---------- Reusable: module section wrapper ---------- */
.module {
  position: relative;
  z-index: 1;
}

/* ---------- Reusable: section headings / intro ---------- */
/* 80/900 lh90 center white — hero headline, REFERENZEN, BECOME A FRIEND (typography 3:78/3:447/3:477) */
.section-heading {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(40px, 4.1667vw, 80px);
  line-height: 1.125; /* 90/80 */
  text-align: center;
  color: var(--color-white);
  margin: 0;
}

/* 24/300 lh37 center white — hero subtext + references intro (typography 3:443/3:473) */
.section-intro {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 37px;
  text-align: center;
  color: var(--color-white);
  margin: 0;
}

/* ---------- Reusable: buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  border: none;
}

/* CTA "Kontakt aufnehmen" — lime, r3, black 20/700, 250×45, persistent glow (briefing: cta-glow) */
.btn--cta {
  position: relative;
  overflow: hidden; /* clips the hover sheen to the pill */
  height: 45px;
  padding: 0 clamp(22px, 1.979vw, 38px);
  background: var(--color-lime);
  color: var(--color-bg);
  border-radius: var(--radius-btn);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 20px rgba(183, 255, 43, 0.45);
  animation: cta-glow 3s ease-in-out infinite;
  transition: box-shadow var(--transition-normal), transform 0.28s var(--ease-soft),
    border-radius var(--transition-nav);
}
/* Diagonal light sheen (same "Blitz" as .btn--ghost-white) — parked off the left
   edge, sweeps across on hover. Sits above the fill, below the label. */
.btn--cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-soft);
  pointer-events: none;
}
.btn--cta:hover::before {
  left: 130%;
}
/* Hover: the fill + glow pulse slowly lime (#B7FF2B) → green (#2BEB7C) → back,
   LOOPING for as long as the cursor stays on the button, plus a subtle lift. */
.btn--cta:hover {
  transform: translateY(-1px);
  animation: cta-hover-pulse 1.6s ease infinite;
}
@keyframes cta-hover-pulse {
  0%   { background-color: var(--color-lime);  box-shadow: 0 0 18px rgba(183, 255, 43, 0.45); }
  50%  { background-color: var(--color-green); box-shadow: 0 0 26px rgba(43, 235, 124, 0.5); }
  100% { background-color: var(--color-lime);  box-shadow: 0 0 18px rgba(183, 255, 43, 0.45); }
}

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(183, 255, 43, 0.38); }
  50%      { box-shadow: 0 0 24px rgba(183, 255, 43, 0.55); }
}

/* CTA label: full wording by default; the short form ("Kontakt") shows only on
   the mobile header (toggled in the nav-collapse media query). */
.btn--cta__short { display: none; }

/* "Mehr über uns" — transparent pill with a whisper-subtle top-down gradient and
   a thin light border (per client screenshot). Cool hover: a light sheen sweeps
   across while a soft brand-green glow blooms in and the border turns green. */
.btn--ghost-white {
  position: relative;
  overflow: hidden; /* clips the hover sheen to the pill */
  height: 45px;
  padding: 0 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  background-color: rgba(255, 255, 255, 0.02); /* essentially transparent; tints green on hover */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0)); /* ganz dezenter Gradient */
  transition: transform var(--transition-fast), box-shadow var(--transition-normal),
    background-color var(--transition-normal), border-color var(--transition-normal);
}
/* Diagonal light sheen — parked off the left edge, sweeps across on hover. */
.btn--ghost-white::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-soft);
  pointer-events: none;
}
.btn--ghost-white:hover {
  transform: translateY(-1px);
  border-color: rgba(43, 235, 124, 0.75);
  background-color: rgba(43, 235, 124, 0.1);
  box-shadow: 0 0 24px rgba(43, 235, 124, 0.3);
}
.btn--ghost-white:hover::before {
  left: 130%;
}

/* "Nachricht absenden" reuses the nav CTA style — see .btn--cta above
   (same lime pill, persistent glow + hover colour-pulse). */

/* ============================================================
   Global: site header / nav  (node 3:522)
   Nav band 1795 wide at frame x=67 (→ inset L67 / R58 of 1920).
   Sticky/fixed, transparent at top; JS adds .is-scrolled → shrink +
   translucent rounded bg (briefing: nav-shrink).
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* Flex parent so the inner can morph its width via flex-grow (1 → 0):
     full-width at the top (original layout), hugging its content when scrolled.
     flex-grow IS animatable, so the bar narrows smoothly with no layout snap. */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Resting-state "loosen" amount added to every gap. It is 0 up to ~1500px
     (so the bar never outgrows narrow desktops) and grows on wider screens —
     making the top bar a little less compact where there's room. .is-scrolled
     sets it to 0, so the sticky bar stays exactly the approved compact spacing;
     each gap has its own transition, so the snap animates smoothly. */
  --nav-extra: clamp(0px, calc(3.7vw - 55px), 22px);
  padding: 13px 0 0;
  transition: padding var(--transition-nav);
}

.site-header__inner {
  position: relative; /* anchors the glass pill (::before) */
  display: flex;
  align-items: center;
  /* width:auto (overrides .container's width:100%) + flex-grow:0 → the inner hugs
     its content and .container's margin-inline:auto centres it. The nav reads as
     one compact centred cluster in BOTH states; scrolling only fades the glass in
     and shrinks the height. Full width is restored below the collapse breakpoint. */
  width: auto;
  flex: 0 1 auto;
  min-height: var(--nav-height); /* 109px — resting height */
  padding-left: calc(clamp(20px, 2vw, 40px) + var(--nav-extra));
  padding-right: calc(clamp(20px, 2vw, 40px) + var(--nav-extra));
  /* Height shrinks on scroll; the glass look lives on ::before and fades via
     opacity, so backdrop-filter/border-radius never interpolate — that keeps the
     shrink smooth & soft (uichemy technique). */
  transition: min-height var(--transition-nav), padding var(--transition-nav);
}

/* Header content sits above the glass pill. */
.site-header__inner > * {
  position: relative;
  z-index: 1;
}

/* The translucent glass pill — ALWAYS rendered, invisible at the top of the
   page (opacity:0), fades in on scroll. Dark padding-box fill + a subtle
   brand gradient (white → green → lime) 1px border, soft shadow and blur —
   the uichemy technique adapted to the CAF palette. Only opacity transitions,
   so the whole bar appears buttery-smooth rather than janking in. */
.site-header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px; /* komplett rund — Stadium-/Pill-Enden, nicht nur abgerundet */
  pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(6, 6, 8, 0.7), rgba(6, 6, 8, 0.7)) padding-box,
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.5),
      rgba(43, 235, 124, 0.25) 32%,
      rgba(255, 255, 255, 0.06) 58%,
      rgba(183, 255, 43, 0.2)) border-box;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity var(--transition-nav);
}
/* Mobile: drop the backdrop blur — it is a heavy per-frame GPU cost at phone
   pixel ratios; a slightly more opaque fill reads the same without it. */
@media (max-width: 1024px) {
  .site-header__inner::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      linear-gradient(rgba(6, 6, 8, 0.82), rgba(6, 6, 8, 0.82)) padding-box,
      linear-gradient(135deg,
        rgba(255, 255, 255, 0.5),
        rgba(43, 235, 124, 0.25) 32%,
        rgba(255, 255, 255, 0.06) 58%,
        rgba(183, 255, 43, 0.2)) border-box;
  }
}

.site-header__logo {
  flex: 0 0 auto;
  /* Compact base + resting-state loosen (see --nav-extra); sticky → compact. */
  margin-right: calc(clamp(20px, 2.4vw, 44px) + var(--nav-extra));
  display: flex;
  align-items: center;
  transition: margin-right var(--transition-nav);
}
.site-header__logo img {
  width: 99px;
  height: 35px;
}

.site-nav {
  flex: 0 1 auto;
  /* Gap between nav and actions (resting looser via --nav-extra, sticky compact). */
  margin-right: calc(clamp(22px, 2.4vw, 44px) + var(--nav-extra));
  transition: margin-right var(--transition-nav);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: calc(clamp(16px, 1.7vw, 30px) + var(--nav-extra));
  transition: gap var(--transition-nav);
}
.site-nav__link {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 104px; /* click-area height per node 3:493 etc. */
  color: var(--color-white);
  white-space: nowrap;
  transition: color var(--transition-fast), line-height var(--transition-nav);
}
.site-nav__link.is-active {
  color: var(--color-green); /* current page — #2BEB7C (same weight, not bold) */
}

/* hugeinc-style per-character roll (JS: initNavRoll splits each link into
   .nav-roll__char, each holding the letter twice — one on top, an identical
   twin below). On hover each letter rolls up and its twin rolls in from
   beneath, staggered per character (--ci) for a travelling wave. The roll is
   monochrome (links stay white); only the active link is green. */
.nav-roll {
  display: inline-flex;
  line-height: 1.25;
  vertical-align: middle;
}
.nav-roll__char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
}
.nav-roll__top,
.nav-roll__bot {
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--ci, 0) * 24ms);
}
.nav-roll__bot {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  color: inherit; /* monochrome roll — matches the link colour (white) */
}
/* Active link (Home) is green top and bottom, so its roll stays green. */
.site-nav__link.is-active .nav-roll__bot {
  color: var(--color-green);
}
.site-nav__link:hover .nav-roll__top,
.site-nav__link:focus-visible .nav-roll__top {
  transform: translateY(-100%);
}
.site-nav__link:hover .nav-roll__bot,
.site-nav__link:focus-visible .nav-roll__bot {
  transform: translateY(0);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: calc(clamp(14px, 1.2vw, 22px) + var(--nav-extra) * 0.6);
  flex: 0 0 auto;
  transition: gap var(--transition-nav);
}

/* CTA in the nav is a fully-round pill in every state (the site-wide r3 CTA
   outside the header — e.g. the contact section — is untouched). */
.site-header .btn--cta {
  border-radius: 999px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-white);
}
.lang-switch__lang {
  color: var(--color-white); /* EN (and inactive) — nur weiß */
  transition: color var(--transition-fast), font-weight 280ms ease;
}
.lang-switch__lang.is-active {
  font-weight: 700; /* DE — bold weiß */
  color: var(--color-white);
}
/* Hovering the inactive language (EN) eases smoothly toward bold — font-weight
   is animated through the intermediate 400/500/600 Barlow instances (loaded in
   functions.php) so it thickens gradually instead of snapping. */
.lang-switch__lang:hover {
  font-weight: 700;
}
.lang-switch__sep {
  color: var(--color-white);
  opacity: 0.6;
}

/* ============================================================
   Scrolled state (.is-scrolled) — same compact centred cluster as the top;
   scrolling only fades the ::before glass pill in and shrinks the height
   (109 → 72). Spacing, the round CTA and the DE|EN styling already live in
   the resting state above. Shares var(--transition-nav) → one soft beat.
   ============================================================ */
.site-header.is-scrolled {
  --nav-extra: 0px; /* collapse the resting loosen → compact sticky spacing */
  padding: 10px clamp(12px, 2vw, 40px) 0; /* light outer breathing room */
}
.site-header.is-scrolled .site-header__inner {
  min-height: 72px;
}
.site-header.is-scrolled .site-header__inner::before {
  opacity: 1;
}
.site-header.is-scrolled .site-nav__link {
  line-height: 72px;
}

/* Mobile burger — hidden on desktop, wired in Phase 4/5 */
.site-header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 34px;
  height: 26px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.site-header__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ============================================================
   Module: hero  (nodes 3:477 headline, 3:473 subtext)
   headline top at page y=305; nav is a fixed overlay above it.
   ============================================================ */
/* Full-bleed header video with the headline set plakativ over it. */
.hero {
  --hero-y: 54%; /* shared vertical anchor for video + headline (below centre) */
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
  background: var(--color-bg); /* black — the video is composed on black too */
}
/* The clip is a 16:9 laptop composed on black — show it CONTAINED and centred
   (never cover/crop) so it keeps clean space on every side. Any letterbox is
   invisible against the black hero background. Anchored a little below centre. */
.hero__video {
  position: absolute;
  top: var(--hero-y);
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: min(94%, 1456px);
  max-height: 83svh;
  object-fit: contain;
  z-index: 0;
}
/* Subtle scrim for headline legibility over any footage. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.3) 100%);
}
.hero__inner {
  position: absolute;
  top: var(--hero-y); /* same anchor as the video → headline stays over its centre */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
  z-index: 2;
}
.hero__headline {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(42px, 5vw, 96px);
  line-height: 1.08;
  text-align: center;
  color: var(--color-white);
  margin: 0;
}
/* Mobile-only line break hidden on desktop (see hero.php + the 768 breakpoint). */
.hero__headline .hero__br--m { display: none; }
.hero__subtext {
  max-width: 743px;
  margin: 44px auto 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 37px;
  text-align: center;
  color: var(--color-white);
}
@media (max-width: 768px) {
  .hero { --hero-y: 50%; min-height: 100svh; } /* fullscreen header on mobile */
  /* Mobile: the header video fills the screen (cover), not contained. */
  .hero__video {
    inset: 0;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
  }
  .hero__headline { font-size: clamp(38px, 10vw, 60px); } /* a touch larger */
  /* 3-line break on mobile: show the mobile breaks, drop the desktop one. */
  .hero__headline .hero__br--m { display: inline; }
  .hero__headline .hero__br--d { display: none; }
  /* Black→transparent gradients top + bottom over the fullscreen video. The top
     one is dark enough through the nav zone so logo/CTA/burger read on black. */
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 13%, rgba(0, 0, 0, 0) 46%),
      linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.92) 8%, rgba(0, 0, 0, 0.5) 24%, rgba(0, 0, 0, 0) 52%);
  }
}


/* ============================================================
   Module: media_team  (node 3:457)
   Centered group photo 1272×808 (frame x=324 → 324px margins),
   r15, bottom-fade overlay, pulsing CSS play button, bottom
   caption (#TEAM CAF / tagline / Mehr-über-uns).
   ============================================================ */
.media-team {
  padding-top: clamp(38px, 3.958vw, 76px);
  padding-bottom: clamp(24px, 2.448vw, 47px);
}
.media-team__inner {
  display: flex;
  justify-content: center;
}
.media-team__figure {
  position: relative;
  width: 1272px;
  max-width: calc(100% - 48px);
  aspect-ratio: 1272 / 808;
  margin: 0;
  border-radius: var(--radius-card); /* 15px */
  overflow: hidden;
  /* Subtle neutral drop shadow (no colour) — gentle lift off the background. */
  box-shadow:
    0 18px 40px -24px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.media-team__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* bottom-fade overlay (3:456): transparent 15% → #000 98%, top→bottom */
.media-team__overlay {
  position: absolute;
  inset: 0;
  /* Original bottom-fade: transparent at the top → full black at the bottom. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 15%, #000000 98%);
  pointer-events: none;
  z-index: 2; /* above the playing video (z-index:1), below the caption */
}

/* Pulsing play button (briefing: play-pulse). Transparent, brand color. */
.play-button {
  position: absolute;
  top: 46%; /* nudged lower per client */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: transform var(--transition-fast), background var(--transition-fast);
  animation: play-pulse 2.4s ease-out infinite;
}
.play-button:hover {
  background: rgba(43, 235, 124, 0.2);
}
.play-button__triangle {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid var(--color-green);
}
@keyframes play-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 235, 124, 0.45); }
  70%  { box-shadow: 0 0 0 24px rgba(43, 235, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 235, 124, 0); }
}

/* Bottom-anchored caption. bottom 12% ≈ 97px of 808 (button→photo-bottom). */
.media-team__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 3; /* stays above the playing video (z-index:1) and gradient (2) */
  padding-inline: 16px;
}
.media-team__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(48px, 5.2083vw, 100px);
  line-height: 0.9; /* 90/100 */
  color: var(--color-white);
}
.media-team__tagline {
  margin: 11px 0 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-white);
}
.media-team__br--m { display: none; } /* mobile-only line break (see ≤768) */
.media-team__cta {
  margin-top: 41px;
}

/* ============================================================
   Module: references  (nodes 3:447 / 3:443 / cards 3:442..3:367)
   Centered header + 2×3 card grid (1272 wide: 2×608 + 56 col-gap,
   43 row-gap). Cards r15: image + 0.5 bottom-gradient + title/subtitle.
   ============================================================ */
.references {
  padding-top: clamp(24px, 2.448vw, 47px);
  padding-bottom: clamp(52px, 6.094vw, 117px);
}
/* When references is the FIRST section on a page (e.g. /referenzen/), clear the
   fixed nav AND give the split-flap headline its own breathing room — a big
   gap above (below the nav) and below (before the cards) so it reads as its
   own act, not glued to the grid. */
.references:first-child {
  padding-top: calc(var(--nav-height) + clamp(84px, 10vw, 185px));
}
.references:first-child .references__grid {
  margin-top: clamp(48px, 6vw, 104px);
}
.references__header {
  text-align: center;
}

/* -- Assembling headline (Referenzen page only) ---------------------------
   Reproduces the client's logo-build GIF: the letters start scattered — each
   offset, rotated (a touch in 3D too) and shrunk — then fly + spin into place
   and settle with a small overshoot, staggered left→right. JS (initBuildHeading)
   builds one .bl span per letter and sets each one's random start offset via
   CSS vars, then adds .is-in to play it once in view. The plain <h2> text is
   the no-JS / reduced-motion fallback (a plain white word). */
.references__heading--build,
.page-hero__heading {
  font-family: var(--font-sans);
  font-size: clamp(46px, 9.6vw, 150px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-align: center;
  color: #ffffff;
  perspective: 900px;
  margin: 0 0 clamp(20px, 3vw, 52px);
}
/* longer / multi-word page-hero headings step down so they don't fill the screen
   (single words like LEISTUNGEN keep the full clamp above) */
.page-hero__heading--medium { font-size: clamp(38px, 6.2vw, 96px); }
.page-hero__heading--long   { font-size: clamp(32px, 4.8vw, 72px); }
/* page opener (e.g. /leistungen/) — clear the fixed nav, centred */
.page-hero {
  padding-top: calc(var(--nav-height) + clamp(84px, 10vw, 185px));
  padding-bottom: clamp(48px, 7vw, 110px);
}
.page-hero__inner { text-align: center; }
/* intro width: wide enough that the short Jobs intro fits on ONE line (≈942px)
   while the longer Leistungen intro (≈1448px) still wraps; text-wrap:balance
   keeps that wrap to two even lines (mobile ≤768 wraps freely at 16px). */
.page-hero__intro { max-width: 980px; margin: 0 auto; text-wrap: balance; }

/* page_content — plain long-form pages (Impressum, AGB, Datenschutz, Jobs). */
.page-doc {
  padding-top: calc(var(--nav-height) + clamp(48px, 6vw, 96px));
  padding-bottom: clamp(60px, 10vw, 140px);
}
.page-doc__inner {
  max-width: 900px;           /* comfortable reading measure */
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.page-doc__title {
  margin: 0 0 clamp(28px, 3.4vw, 52px);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  color: #fff;
}
.page-doc__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.78);
}
.page-doc__body h2,
.page-doc__body h3,
.page-doc__body h4 {
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  margin: clamp(28px, 3vw, 46px) 0 clamp(10px, 1vw, 16px);
}
.page-doc__body h2 { font-size: clamp(22px, 2vw, 30px); }
.page-doc__body h3 { font-size: clamp(19px, 1.6vw, 24px); }
.page-doc__body h4 { font-size: clamp(17px, 1.3vw, 20px); }
.page-doc__body p { margin: 0 0 1.1em; }
.page-doc__body ul,
.page-doc__body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.page-doc__body ul { list-style: disc; }
.page-doc__body ol { list-style: decimal; }
.page-doc__body li { margin: 0 0 0.4em; }
.page-doc__body li::marker { color: var(--color-green, #2beb7c); }
.page-doc__body strong { color: #fff; font-weight: 600; }
.page-doc__body a { color: var(--color-green, #2beb7c); text-decoration: underline; text-underline-offset: 2px; }
.page-doc__body a:hover { text-decoration: none; }
.page-doc__body img { max-width: 100%; height: auto; }
/* trust badges (Impressum / Datenschutz) — a small row at the top */
.page-doc__badges { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2vw, 28px); margin: 0 0 clamp(30px, 3.4vw, 50px); }
.page-doc__badges img { height: clamp(72px, 8vw, 100px); width: auto; border-radius: 6px; }
/* job role card — square illustration left, heading + text right */
.page-doc__role { display: flex; gap: clamp(20px, 3vw, 40px); align-items: flex-start; margin: clamp(30px, 3.4vw, 50px) 0; }
.page-doc__role-img { width: clamp(120px, 20vw, 190px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.page-doc__role-text { min-width: 0; }
.page-doc__role-text h3 { margin-top: 0; }
@media (max-width: 640px) {
  .page-doc__role { flex-direction: column; gap: clamp(14px, 4vw, 22px); }
  .page-doc__role-img { width: min(200px, 62%); }
}
/* content appended AFTER modules (Jobs: how-to-apply + perks below the bands).
   No nav-clearance (a section already precedes it) and pulled up so it doesn't
   float far below the last band; bigger, more prominent type so it doesn't get
   lost. Green headings tie it to the role bands above. */
.page-doc--after-modules { padding-top: 0; margin-top: calc(-1 * clamp(30px, 6vw, 96px)); }
.page-doc--after-modules .page-doc__body { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.7; }
.page-doc--after-modules .page-doc__body h3 {
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--color-green, #2beb7c);
  margin: clamp(40px, 4.5vw, 72px) 0 clamp(14px, 1.4vw, 24px);
}
.page-doc--after-modules .page-doc__body h3:first-child { margin-top: 0; }
.page-doc--after-modules .page-doc__body li { margin-bottom: 0.6em; }

/* service_stack — the Leistungen list, built 1:1 from the Figma "leistungen"
   page (frame 51:3, 1920 wide). Each service is a band whose top + bottom #333
   hairlines span the FULL browser width (border on the full-bleed .svc-row),
   while the content (.svc-row__inner) stays centred at the 1920 design width with
   a vertical rail on the OUTER side of the text. Layout ALTERNATES — odd bands:
   text left / square photo right; even bands mirror (photo left / text right,
   rail on the right). The square (1:1) photo fills the band height so it butts
   against both lines. Barlow: title 500/30 green, body 300/21 white. Fades in. */
.svc-rows {
  padding: clamp(20px, 5vw, 90px) 0 clamp(80px, 12vw, 180px);
  --svc-hair: #333;        /* Figma line stroke rgb(51,51,51) */
  --svc-rail: 16.5%;       /* rail inset — Figma x-rel 318 / 1920 */
  overflow-x: clip;        /* the reveal slides text/photo in horizontally — clip so it never adds page scroll */
}
.svc-rows__inner { width: 100%; }
/* clickable service pills (jump-links) shown below the hero intro — same look as
   the Referenzen branch pills, with the home "Mehr über uns" hover (light sheen
   + green glow). Clicking one smooth-scrolls to that service band (#svc-N). */
.svc-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 0.7vw, 12px);
  max-width: 1300px;                 /* wider so the 9 service pills fit in 2 rows, not 3 */
  margin: calc(-1 * clamp(26px, 4vw, 62px)) auto clamp(50px, 6.5vw, 104px);
  padding-inline: clamp(20px, 5vw, 40px);
}
.svc-pill {
  position: relative;
  overflow: hidden;                 /* clips the hover sheen */
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.02);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast, 0.18s ease), box-shadow var(--transition-normal, 0.25s ease),
    background-color var(--transition-normal, 0.25s ease), border-color var(--transition-normal, 0.25s ease),
    color var(--transition-normal, 0.25s ease);
}
.svc-pill::before {                 /* diagonal light sheen — sweeps across on hover */
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-soft, cubic-bezier(0.22, 0.61, 0.36, 1));
  pointer-events: none;
}
.svc-pill:hover,
.svc-pill:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(43, 235, 124, 0.75);
  background-color: rgba(43, 235, 124, 0.1);
  color: #fff;
  box-shadow: 0 0 24px rgba(43, 235, 124, 0.3);
}
.svc-pill:hover::before,
.svc-pill:focus-visible::before { left: 130%; }
@media (max-width: 768px) {
  .svc-nav { gap: 8px; margin-bottom: clamp(36px, 9vw, 60px); }
  .svc-pill { height: 40px; padding: 0 18px; }
}
/* optional lead paragraph above the bands (e.g. Jobs "Die folgenden Bereiche …").
   Green, wider (4 lines not 5), and pulled up close to the hero intro. */
.svc-rows__intro {
  max-width: 1080px;
  margin: calc(-1 * clamp(60px, 8vw, 115px)) auto clamp(40px, 5vw, 80px);
  padding-inline: clamp(20px, 5vw, 40px);
  text-align: center;
  color: var(--color-green, #2beb7c);
  text-decoration: none;
}
/* Jobs page (#278): the role bands are ~20% more compact than the Leistungen
   services (client: "sieht alles zu massig aus"). The inner content shrinks to
   80% (image, text + rail scale together; the hairlines stay full-bleed); the
   fonts and between-band gap are reduced to match. Desktop only — mobile keeps
   its full-width single-column layout. */
@media (min-width: 769px) {
  :is(.page-id-278, .parent-pageid-278) .svc-row__inner { max-width: min(80vw, 1536px); }
  :is(.page-id-278, .parent-pageid-278) .svc-row__title { font-size: clamp(17px, 1.25vw, 24px); }
  :is(.page-id-278, .parent-pageid-278) .svc-row__body  { font-size: clamp(12px, 0.9vw, 17px); }
  :is(.page-id-278, .parent-pageid-278) .svc-row + .svc-row { margin-top: clamp(32px, 3.4vw, 52px); }
}
/* full-bleed band: the hairlines run edge-to-edge of the browser */
.svc-row {
  border-top: 1px solid var(--svc-hair);
  border-bottom: 1px solid var(--svc-hair);
}
.svc-row + .svc-row { margin-top: clamp(40px, 4.2vw, 64px); }  /* air between bands */
/* the actual content, centred at the design width */
.svc-row__inner {
  position: relative;
  max-width: var(--site-max);   /* 1920 — the Figma frame width */
  margin-inline: auto;
  display: grid;
  /* gutter | text | gap | square photo | margin — hairline/rail column edges */
  grid-template-columns: 16.5fr 28.5fr 5fr 33.4fr 16.6fr;
  align-items: center;
}
.svc-row__inner::before {   /* vertical rail, spanning top line → bottom line */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--svc-rail);
  border-left: 1px solid var(--svc-hair);
  pointer-events: none;
}
.svc-row__text {
  grid-column: 2;
  grid-row: 1;             /* keep text + photo on the SAME row (no auto-wrap) */
  min-width: 0;
  padding-left: clamp(20px, 3vw, 58px);   /* breathing room off the rail (Figma ~57px) */
}
.svc-row__title {
  margin: 0 0 clamp(14px, 1.4vw, 26px);
  font-family: var(--font-sans);
  font-weight: 500;                       /* Barlow Medium */
  font-size: clamp(21px, 1.56vw, 30px);   /* 30 @1920 */
  line-height: 1.23;                      /* 37/30 */
  color: var(--color-green, #2beb7c);     /* headlines green */
}
.svc-row__body {
  font-family: var(--font-sans);
  font-weight: 300;                       /* Barlow Light */
  font-size: clamp(15px, 1.1vw, 21px);    /* 21 @1920 */
  line-height: 1.76;                      /* 37/21 */
  color: #fff;
}
.svc-row__body p { margin: 0 0 0.9em; }
.svc-row__body p:last-child { margin-bottom: 0; }
.svc-row__body .svc-hl { color: #fff; font-weight: 700; }   /* key terms: white + bold */
/* inline "Mehr über …" link at the bottom of a service — white with a small
   right arrow; the whole thing (text + arrow) turns green #2BEB7C on hover. */
.svc-row__more {
  display: inline-block;
  margin-top: clamp(10px, 1.1vw, 18px);   /* a bit more air above the link */
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  transition: color var(--transition-normal, 0.25s ease);
}
.svc-row__more::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.45em;
  vertical-align: middle;   /* optically centred on the text's x-height */
  position: relative;
  top: -0.06em;             /* tiny lift so it sits dead-centre with the caps */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition-normal, 0.25s ease);
}
.svc-row__more:hover, .svc-row__more:focus-visible { color: var(--color-green, #2beb7c); }
.svc-row__more:hover::after, .svc-row__more:focus-visible::after { transform: translateX(3px); }
.svc-row__media {
  grid-column: 4;
  grid-row: 1;             /* same row as the text */
  position: relative;
  aspect-ratio: 1 / 1;             /* Figma masked image = 642×642 square */
  overflow: hidden;
  background: #0c0e0d;
}
.svc-row__media--placeholder {
  background: linear-gradient(135deg, #2b2d2f 0%, #17191a 60%, #101211 100%);
}
.svc-row__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* even bands mirror: photo left, text right, rail on the RIGHT edge of the text */
.svc-row:nth-child(even) .svc-row__inner { grid-template-columns: 16.6fr 33.4fr 5fr 28.5fr 16.5fr; }
.svc-row:nth-child(even) .svc-row__media { grid-column: 2; }
.svc-row:nth-child(even) .svc-row__text {
  grid-column: 4;
  padding-left: 0;
  padding-right: clamp(20px, 3vw, 58px);
}
.svc-row:nth-child(even) .svc-row__inner::before {
  left: auto;
  right: var(--svc-rail);
  border-left: 0;
  border-right: 1px solid var(--svc-hair);
}
/* reveal (driven by the row's .is-visible from initScrollReveal). Transform only
   → cheap on mobile. The transition sits on a base rule that ALWAYS applies so it
   animates both in and out. Each element slides in from its OWN side: on normal
   bands text-from-left + photo-from-right; on mirrored (even) bands the photo is
   LEFT and text RIGHT, so photo-from-left + text-from-right. */
html.js .svc-row[data-anim="fade"] .svc-row__text,
html.js .svc-row[data-anim="fade"] .svc-row__media {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s var(--ease-soft, cubic-bezier(0.22, 0.61, 0.36, 1));
}
html.js .svc-row[data-anim="fade"] .svc-row__text  { transform: translateX(-48px); }
html.js .svc-row[data-anim="fade"] .svc-row__media { transform: translateX(48px); }
html.js .svc-row:nth-child(even)[data-anim="fade"] .svc-row__media { transform: translateX(-48px); }
html.js .svc-row:nth-child(even)[data-anim="fade"] .svc-row__text  { transform: translateX(48px); }
/* revealed → settle. LAST in source so it wins over the even-band offsets above
   (equal specificity) and both odd + even bands land at their final position. */
html.js .svc-row[data-anim="fade"].is-visible .svc-row__text,
html.js .svc-row[data-anim="fade"].is-visible .svc-row__media {
  opacity: 1;
  transform: none;
}
@media (max-width: 768px) {
  /* single column, content CENTRED, generous space between services */
  .svc-row__inner,
  .svc-row:nth-child(even) .svc-row__inner { grid-template-columns: 1fr; padding-inline: 24px; text-align: center; }
  .svc-row__inner::before { display: none; }          /* no vertical rail */
  .svc-row { border-top: 0; border-bottom: 0; }        /* remove ALL thin separator lines on mobile */
  .svc-row + .svc-row { margin-top: clamp(64px, 16vw, 110px); }  /* more air between services */
  .svc-row__text,
  .svc-row:nth-child(even) .svc-row__text { grid-column: 1; grid-row: auto; padding: 0; }
  .svc-row__media,
  .svc-row:nth-child(even) .svc-row__media { grid-column: 1; grid-row: auto; margin-top: clamp(18px, 5vw, 28px); }
  /* reveal: the WHOLE block (headline + text + photo) fades UP from the bottom as
     one unit — nothing slides in from left/right on mobile (like other pages). */
  html.js .svc-row[data-anim="fade"] {
    transform: translateY(42px);
    transition: opacity 0.7s ease, transform 0.7s var(--ease-soft, cubic-bezier(0.22, 0.61, 0.36, 1));
  }
  html.js .svc-row[data-anim="fade"].is-visible { transform: none; }
  html.js .svc-row[data-anim="fade"] .svc-row__text,
  html.js .svc-row[data-anim="fade"] .svc-row__media,
  html.js .svc-row:nth-child(even)[data-anim="fade"] .svc-row__text,
  html.js .svc-row:nth-child(even)[data-anim="fade"] .svc-row__media {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* media_statement — the code screenshot ("visual") sits on a full-browser-width
   green gradient stage (GitHub-Copilot vibe, in our colour) that ends flush with
   the bottom of the visual; below it a statement whose words light up green at
   the active scroll position and then settle to readable white behind it (à la
   hugeinc.com/company). Built for the Figma "B2b White Label" page (54:3). Swap
   --wl-glow on .media-statement__stage to recolour (150,110,255 = GitHub purple). */
.media-statement {
  margin-top: calc(-1 * clamp(44px, 6.5vw, 120px));   /* lift the whole visual + glow up toward the intro */
  padding: 0 0 clamp(48px, 7vw, 104px);
}
/* full-width dark stage with a soft green glow behind the screenshot so the
   visual pops out of the black. The visual sits on a glassy frame with a bright
   glow across its top edge; its bottom is clipped so it sinks behind a black
   edge (overflow + negative media margin + ::after). */
.media-statement__stage {
  position: relative;
  width: 100%;
  padding: clamp(72px, 9vw, 184px) clamp(20px, 5vw, 40px) 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--color-bg, #000) 0%, transparent 17%),   /* soft fade from the hero black into the glow — kept short so the glow reaches higher */
    radial-gradient(80% 74% at 50% 42%, rgba(43, 235, 124, 0.44), rgba(43, 235, 124, 0.11) 46%, transparent 74%),
    radial-gradient(135% 105% at 50% 40%, rgba(43, 235, 124, 0.14), transparent 60%),
    var(--color-bg, #000);
}
/* the visual dips below the stage; overflow clips it → it disappears behind the
   black edge created by ::after. */
.media-statement__media {
  position: relative;
  z-index: 1;
  max-width: 1013px;              /* the Figma visual width */
  margin: 0 auto calc(-1 * clamp(24px, 3vw, 54px));  /* only the very bottom tucks behind the edge */
  line-height: 0;
}
/* the black edge — fades the stage's bottom strip (gradient + visual) into the
   page black so the screenshot sinks behind it. */
.media-statement__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: clamp(64px, 8vw, 130px);
  background: linear-gradient(180deg, transparent, var(--color-bg, #000) 92%);
  pointer-events: none;
}
/* glassy frame with a light border + a bright glow across the top-centre edge */
.media-statement__frame {
  position: relative;
  display: block;
  border-radius: clamp(10px, 1.1vw, 16px);
  padding: clamp(4px, 0.5vw, 8px);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    0 0 74px -6px rgba(43, 235, 124, 0.42),   /* green halo → visual pops */
    0 34px 80px -30px rgba(0, 0, 0, 0.7),      /* depth */
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.media-statement__frame::before {   /* top-edge glow highlight */
  content: "";
  position: absolute;
  top: -1px;
  left: 24%;
  right: 24%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent);
  box-shadow: 0 0 22px 5px rgba(202, 255, 224, 0.72);
  pointer-events: none;
}
.media-statement__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(7px, 0.8vw, 11px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
/* slideshow: stacked images that cross-fade (initSlideshow, main.js). The wrapper
   holds the aspect (inline style) + rounded clip; slides fill it and fade. */
.media-statement__slides {
  position: relative;
  display: block;
  border-radius: clamp(7px, 0.8vw, 11px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.media-statement__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.media-statement__slide.is-active { opacity: 1; }
/* fine loading bar at the top edge → shows time until the next slide (JS drives
   the fill's scaleX over the interval). */
.media-statement__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.14);   /* subtle track */
  overflow: hidden;
}
.media-statement__progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);     /* dezent — soft white, not the loud green */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.media-statement__inner {
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  text-align: center;
}
/* the statement: initScrubFill (main.js) sets each word's colour live on scroll —
   dim ahead, brand green at the active edge, then latched to white behind it (more
   readable). Fallback / reduced motion: plain white text (no word spans). */
.media-statement__text {
  max-width: clamp(720px, 52vw, 780px);      /* scales with the clamped font so it stays 9 lines across desktop widths */
  margin: clamp(88px, 12vw, 190px) auto 0;   /* more air up to the visual/header area */
  font-family: var(--font-sans);
  font-weight: 700;                       /* Barlow Bold */
  font-size: clamp(24px, 2.55vw, 40px);   /* 40 @1920 */
  line-height: 1.68;                      /* 67/40 */
  color: #fff;
  text-wrap: pretty;                      /* avoid a lone last word ("ausgelegt.") */
}
.media-statement__text p { margin: 0; }
.media-statement__text .wl-word { transition: color 0.14s linear; }

/* B2B hero intro (#302): types itself in like code with a blinking terminal
   caret (initTypewriter, main.js). The full text is laid out up front and the
   characters are just revealed in place, so nothing reflows / re-centres while it
   types. Monospace "code" face, centred, 15% larger than the base intro. */
:is(.page-id-302, .parent-pageid-302) .page-hero__intro {
  font-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
  font-size: clamp(15px, 1.5vw, 21px);    /* +15% */
  letter-spacing: -0.01em;
  line-height: 1.8;
  text-align: center;
  text-wrap: balance;
  max-width: 820px;
}
:is(.page-id-302, .parent-pageid-302) .page-hero__intro .wl-word { white-space: nowrap; }
:is(.page-id-302, .parent-pageid-302) .page-hero__intro .wl-char { visibility: hidden; }
:is(.page-id-302, .parent-pageid-302) .page-hero__intro .wl-char.is-on { visibility: visible; }
:is(.page-id-302, .parent-pageid-302) .page-hero__intro .wl-char.is-cur { position: relative; }
:is(.page-id-302, .parent-pageid-302) .page-hero__intro .wl-char.is-cur::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0.16em;
  width: 0.5em;
  height: 1.02em;
  background: var(--color-green, #2beb7c);
  animation: wl-blink 1.05s steps(1, end) infinite;
}
@keyframes wl-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (max-width: 768px) {
  .media-statement__text { margin-top: clamp(40px, 11vw, 64px); }
  /* the .container has no inline padding — give the centred code intro a gutter */
  :is(.page-id-302, .parent-pageid-302) .page-hero__intro { padding-inline: clamp(22px, 6vw, 34px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.page-id-302, .parent-pageid-302) .page-hero__intro .wl-char.is-cur::after { animation: none; }
  .media-statement__text .wl-word { transition: none; }
}

/* profile_glow — a SOFT, airy person section (glassmorphism-inspired, in our CI):
   a light rounded card holds the portrait with gentle layered shadows and a
   whisper of green ambiance, plus a floating white identity pill with a soft
   green tag. Deliberately soft — not the hard dark-glow frame, not Leistungen. */
.profile-glow {
  position: relative;
  padding: clamp(60px, 9vw, 150px) 0 clamp(70px, 10vw, 180px);
  overflow: hidden;
}
.profile-glow::before {              /* very soft, diffuse green ambiance */
  content: "";
  position: absolute;
  z-index: 0;
  left: -12%;
  top: 50%;
  width: 72%;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(43, 235, 124, 0.16), rgba(43, 235, 124, 0.04) 60%, transparent 74%);
  pointer-events: none;
}
.profile-glow__inner {
  position: relative;
  z-index: 1;
  max-width: min(1240px, 90vw);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.profile-glow__grid {
  display: grid;
  grid-template-columns: minmax(240px, 400px) 1fr;   /* round portrait | text */
  gap: clamp(40px, 5.5vw, 100px);
  align-items: center;
}
.profile-glow__media { position: relative; margin: 0; }
/* soft ROUND portrait: circular ring, faint light border, gentle diffuse shadow +
   a whisper of green ambiance (same soft style, just circular instead of a card) */
.profile-glow__frame {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: clamp(6px, 0.7vw, 11px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 30px 64px -30px rgba(0, 0, 0, 0.5),
    0 0 66px -14px rgba(43, 235, 124, 0.20);   /* soft green ambiance, gentle */
}
.profile-glow__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
/* floating soft contact pill — our logo on black + the phone number (tap-to-call) */
.profile-glow__badge {
  position: absolute;
  left: 50%;
  bottom: clamp(-6px, -0.6vw, -14px);   /* straddles the bottom of the circle */
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px 7px 7px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.profile-glow__badge:hover,
.profile-glow__badge:focus-visible {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 26px 52px -16px rgba(0, 0, 0, 0.5);
}
.profile-glow__badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  background: #0b0d0c;                 /* phone icon on black */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-glow__badge-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.profile-glow__badge-phone {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: #0e1512;
  white-space: nowrap;
}
.profile-glow__eyebrow {
  margin: 0 auto clamp(56px, 8vw, 120px);   /* centred heading — extra air below to the block */
  text-align: center;
  white-space: nowrap;                     /* one line */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(23px, 2.2vw, 40px);
  line-height: 1.2;
  color: var(--color-green, #2beb7c);
}
/* Markus' text reads as a QUOTE: a big green quotation mark on top, slightly
   larger body. */
.profile-glow__body {
  position: relative;
  margin: 0;                              /* reset <blockquote> default margins */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.2vw, 22px);
  line-height: 1.74;
  color: #fff;
}
.profile-glow__body::before {
  content: "\201C";                       /* large decorative opening quote */
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(58px, 6vw, 100px);
  line-height: 0.72;
  color: var(--color-green, #2beb7c);
  margin-bottom: clamp(4px, 0.6vw, 12px);
}
.profile-glow__body p { margin: 0 0 0.9em; }
.profile-glow__body p:last-child { margin-bottom: 0; }
.profile-glow__body strong { font-weight: 600; }   /* the "Ich bin Markus …" lead line */
@media (max-width: 860px) {
  .profile-glow__inner { max-width: 460px; }
  .profile-glow__eyebrow { white-space: normal; }   /* allow wrap on narrow phones */
  .profile-glow__grid {
    grid-template-columns: 1fr;
    gap: clamp(30px, 7vw, 48px);
    text-align: center;
  }
  .profile-glow__media { max-width: 340px; margin-inline: auto; width: 100%; }
  .profile-glow__badge { left: 50%; transform: translateX(-50%); bottom: clamp(-14px, -3vw, -20px); }
  .profile-glow__badge:hover,
  .profile-glow__badge:focus-visible { transform: translateX(-50%) translateY(-2px); }
  .profile-glow::before { left: 50%; top: 30%; width: 150%; transform: translate(-50%, -50%); }
  /* mobile: drop the decorative quote mark entirely (client) — the grid gap above
     keeps a clean space between the portrait/pill and the quote text. */
  .profile-glow__body::before { display: none; }
}

/* feature_rows — the Website Management list (Figma "management", frame 55:3): a
   wide rounded lead image, then rows of a rounded square image (left) + green
   title + white body (right). No hairlines, generous spacing; fades in. */
.feat-rows {
  padding: clamp(56px, 9vw, 150px) 0 clamp(70px, 11vw, 180px);   /* more air below the header visual */
  overflow-x: clip;   /* the rows slide in horizontally on scroll — never add page scroll */
}
.feat-rows__inner {
  max-width: min(1180px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
/* lead / header visual — the SAME framed-glow treatment as the B2B White Label
   header (media_statement): glassy outline, bright top-edge glow, green halo. */
.feat-rows__lead {
  position: relative;
  margin: 0 auto clamp(60px, 9vw, 150px);
}
.feat-rows__lead-frame {
  position: relative;
  display: block;
  border-radius: clamp(12px, 1.3vw, 20px);
  padding: clamp(5px, 0.55vw, 9px);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    0 0 100px -6px rgba(43, 235, 124, 0.44),   /* green halo */
    0 44px 100px -40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.feat-rows__lead-frame::before {              /* bright top-edge glow highlight */
  content: "";
  position: absolute;
  top: -1px;
  left: 26%;
  right: 26%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent);
  box-shadow: 0 0 22px 5px rgba(202, 255, 224, 0.7);
  pointer-events: none;
}
.feat-rows__lead-img { width: 100%; height: auto; display: block; border-radius: clamp(8px, 0.95vw, 14px); }
.feat-row {
  display: grid;
  grid-template-columns: clamp(220px, 27vw, 370px) 1fr;   /* square image | text (a touch smaller) */
  gap: clamp(36px, 5.5vw, 96px);
  align-items: center;
}
.feat-row + .feat-row { margin-top: clamp(56px, 8.5vw, 128px); }
.feat-row__media { position: relative; }   /* reveal target */
/* SAME outline as the header visual (glassy translucent frame + bright top-edge
   glow), but WITHOUT the green background glow — just a realistic depth shadow. */
.feat-row__frame {
  position: relative;
  display: block;
  border-radius: clamp(14px, 1.4vw, 22px);
  padding: clamp(5px, 0.55vw, 9px);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 26px 56px -28px rgba(0, 0, 0, 0.7),          /* depth only — no green halo */
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.feat-row__imgbox {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: clamp(9px, 1vw, 16px);
  overflow: hidden;
  background: #0c0e0d;
}
.feat-row__frame--placeholder .feat-row__imgbox {
  background: linear-gradient(135deg, #2b2d2f 0%, #17191a 60%, #101211 100%);
}
.feat-row__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-row__text { max-width: 80%; }   /* copy 20% less wide than the column (client) */
.feat-row__num {
  display: block;
  margin-bottom: clamp(8px, 0.9vw, 14px);
  font-family: 'SFMono-Regular', ui-monospace, 'Fira Code', Menlo, Consolas, monospace;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-green, #2beb7c);
  opacity: 0.85;
}
.feat-row__title {
  margin: 0 0 clamp(12px, 1.2vw, 20px);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.15vw, 33px);
  line-height: 1.12;
  color: var(--color-green, #2beb7c);
}
.feat-row__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.62;
  color: #fff;
}
.feat-row__body p { margin: 0 0 0.8em; }
.feat-row__body p:last-child { margin-bottom: 0; }
/* directional reveal on scroll: the visual slides in from the LEFT, the text
   from the RIGHT, each settling into place (driven by .is-visible from
   initScrollReveal). Transform only → cheap. */
html.js .feat-row[data-anim="fade"] .feat-row__media,
html.js .feat-row[data-anim="fade"] .feat-row__text {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.75s var(--ease-soft, cubic-bezier(0.22, 0.61, 0.36, 1));
}
html.js .feat-row[data-anim="fade"] .feat-row__media { transform: translateX(-52px); }  /* from left */
html.js .feat-row[data-anim="fade"] .feat-row__text  { transform: translateX(52px); }   /* from right */
html.js .feat-row[data-anim="fade"].is-visible .feat-row__media,
html.js .feat-row[data-anim="fade"].is-visible .feat-row__text {
  opacity: 1;
  transform: none;
}
@media (max-width: 820px) {
  .feat-row {
    grid-template-columns: 1fr;
    gap: clamp(22px, 5vw, 34px);
    text-align: center;
    max-width: 480px;
    margin-inline: auto;
  }
  .feat-row__media { max-width: 340px; margin-inline: auto; width: 100%; order: 2; }  /* visual below the text on mobile */
  .feat-row__text { max-width: none; order: 1; }   /* full width, text FIRST when stacked */
  .feat-row + .feat-row { margin-top: clamp(52px, 12vw, 80px); }
  /* no sideways slide on mobile (stacked layout) — just the plain fade */
  html.js .feat-row[data-anim="fade"] .feat-row__media,
  html.js .feat-row[data-anim="fade"] .feat-row__text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* linkedin_reviews — "Das sagen unsere Kunden": centred heading + sub-headline
   over the client's Elfsight LinkedIn testimonials widget (referenzen page). */
.lr-reviews { padding: clamp(56px, 9vw, 130px) 0 clamp(20px, 4vw, 60px); }
.lr-reviews__inner { text-align: center; }
.lr-reviews__heading {
  margin: 0 0 clamp(14px, 1.6vw, 26px);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 40px);   /* a touch smaller than before */
  line-height: 1.1;
  color: #fff;
}
.lr-reviews__subheadline {
  max-width: 760px;
  margin: 0 auto clamp(32px, 4vw, 60px);
}
/* wider than the reference thumb grid above (1272) but not full page width;
   generous gap between the heading and the testimonial cards */
.lr-reviews__widget { max-width: 1440px; margin: clamp(44px, 5vw, 76px) auto 0; }
/* the Elfsight carousel nav arrow (circle) is white, not green (dark chevron stays);
   on hover the circle turns brand green #2BEB7C and the chevron inside turns white */
.lr-reviews__widget .es-carousel-arrow-control { background: #fff !important; }
.lr-reviews__widget .es-carousel-arrow-control:hover { background: #2beb7c !important; }
.lr-reviews__widget .es-carousel-arrow-control:hover,
.lr-reviews__widget .es-carousel-arrow-control:hover .es-carousel-arrow-control-icon,
.lr-reviews__widget .es-carousel-arrow-control:hover .es-carousel-arrow-control-icon svg,
.lr-reviews__widget .es-carousel-arrow-control:hover .es-carousel-arrow-control-icon path {
  color: #fff !important;
  fill: #fff !important;
}

/* letter build-in — shared by any [data-build] heading (Referenzen headline +
   case-study hero title), so the customer name animates just like REFERENZEN. */
[data-build] .bl {
  display: inline-block;
  transform-origin: 50% 60%;
  opacity: 0;
  transform:
    translate(var(--dx, 0), var(--dy, 0.6em))
    rotate(var(--rot, -16deg))
    rotateY(var(--ry, 40deg))
    scale(0.7);
  transition:
    transform 0.72s cubic-bezier(0.34, 1.42, 0.44, 1),
    opacity 0.42s ease;
  transition-delay: calc(var(--i, 0) * 55ms);
}
[data-build] .bl--space { width: 0.3em; }
/* keep a word's letters together — the line may only wrap between words */
[data-build] .bl-word { display: inline-block; white-space: nowrap; }
[data-build].is-in .bl {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-build] .bl {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.references__intro {
  margin-top: 22px; /* heading bottom 1739 → intro top 1761 */
}
.references__br--m { display: none; } /* mobile-only line break (see ≤768) */

/* -- Branches (Referenzen page): a title + a centred wrap of pill tags.
   The pills echo the home "Mehr über uns" ghost pill (.btn--ghost-white) but
   are NON-interactive <li> tags, and they fade in centred + staggered. */
.references__branches {
  margin-top: clamp(40px, 5vw, 84px);
  text-align: center;
}
.references__branches-title {
  margin: 0 0 clamp(22px, 2.6vw, 38px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.35;
  color: var(--color-white);
  opacity: 0.92;
}
.references__branches-br { display: none; } /* mobile-only line break (see ≤768) */
.branch-pills {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px; /* wide enough to keep all pills within 2 rows on desktop */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 0.8vw, 14px);
}
/* Forced line break in the pill row (from a "---" sentinel branch) — a
   full-width, zero-height flex item pushes the following pills to a new row. */
.branch-pills__break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.branch-pill {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  color: rgba(255, 255, 255, 0.82); /* softer than pure white — reads more understated */
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 400; /* dezenter (was 600) */
  line-height: 1;
  white-space: nowrap;
}
/* Cool entrance: each pill rises + fades in, cascading left→right (via --i). */
html.js .branch-pill[data-anim="fade"] {
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-soft, cubic-bezier(0.22, 0.61, 0.36, 1));
  transition-delay: calc(var(--i, 0) * 0.05s);
}
html.js .branch-pill[data-anim="fade"].is-visible {
  transform: none;
}
.references__grid {
  margin: 95px auto 0; /* intro bottom 1795 → first card top 1890 */
  width: min(1272px, 100% - 40px); /* exact 1272 at ≥1312vw; fluid below (20px gutters) */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* (1272-56)/2 = 608 at design width */
  justify-content: center;
  column-gap: clamp(24px, 2.917vw, 56px);
  row-gap: 43px; /* row pitch 499 - card 456 */
}

.ref-card {
  position: relative;
  width: 100%;
  aspect-ratio: 608 / 456;
  border-radius: var(--radius-card); /* 15px */
  overflow: hidden;
  background: #333333; /* dark-grey fallback shown when a card has no image (placeholders) */
  /* Subtle neutral drop shadow (matches the video thumb treatment). */
  box-shadow:
    0 14px 32px -22px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.ref-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
}
/* bottom-fade overlay (3:433): transparent 29% → #000 100%, at opacity 0.5 */
.ref-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 29%, #000000 100%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2; /* above the hover video, so the caption stays legible over it */
}
.ref-card__text {
  position: absolute;
  left: 6.086%;    /* 37/608 */
  right: 6.086%;
  bottom: 8.114%;  /* 37/456 → same pixel gap at the bottom as on the left */
  z-index: 3;      /* above the overlay + hover video */
}
.ref-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3; /* tight, so the customer name sits close to the service below */
  color: var(--color-white);
  overflow-wrap: break-word;
  transition: color var(--transition-normal);
}
.ref-card__subtitle {
  margin: 6px 0 0; /* small breathing room below the customer name */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 25px;
  line-height: 1.2;
  color: var(--color-white);
  transition: color var(--transition-normal);
}
/* Hover: the caption STAYS and turns brand-green (#2BEB7C); JS plays the
   per-card ref_thumb video behind it (Phase 5); subtle image zoom underneath. */
.ref-card:hover .ref-card__title,
.ref-card:hover .ref-card__subtitle {
  color: var(--color-green);
}
.ref-card:hover .ref-card__img {
  transform: scale(1.04);
}

/* ============================================================
   Module: logo_marquee  (node 3:352) — rendered as a static CUSTOMER-LOGO WALL
   The 24 partner logos from chris-andfriends.de, in the exact same order, on a
   6-column proportional grid (mirrors the reference caps per logo). Each logo
   fades in left→right, staggered by its --i index (see the fade-reveal block).
   All logos are unified to clean white (filter) regardless of their source fills.
   ============================================================ */
.logo-wall {
  padding-top: clamp(56px, 6.4vw, 118px);
  padding-bottom: clamp(60px, 6.8vw, 131px);
}
.logo-wall__grid {
  max-width: 1440px; /* reference logo-grid width (kept narrower than --site-max for density) */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(28px, 3vw, 48px) clamp(32px, 4vw, 64px);
  align-items: center;
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
}
.logo-wall__item {
  max-width: 160px; /* generous outer box — the real cap is the per-logo rule below */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wall__logo {
  max-width: 128px;
  max-height: 68px;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Logos are authored white-on-transparent (as on chris-andfriends.de) — no
     recolour filter, so self-styled marks like DIHK keep their intended look. */
}
.logo-wall__item.is-hk .logo-wall__logo { transform: translateY(-4px); }
.logo-wall__item.is-tv .logo-wall__logo { transform: translateY(-10px); }

/* Per-logo caps, one per position (order is fixed — see logo_marquee.php).
   Sized so every logo covers roughly the SAME visual area (~5200px²) instead
   of a shared box, which made square/icon marks (Haferkater, Fernsehturm,
   BBG, VDI/VDE, Lohrmanns) read much smaller than wide wordmarks. */
.logo-wall__item:nth-child(1) .logo-wall__logo  { max-width: 82.8px;  max-height: 62.8px; } /* Harley */
.logo-wall__item:nth-child(2) .logo-wall__logo  { max-width: 103.1px; max-height: 50.4px; } /* Olympiastadion */
.logo-wall__item:nth-child(3) .logo-wall__logo  { max-width: 128px;   max-height: 40.4px; } /* DRK */
.logo-wall__item:nth-child(4) .logo-wall__logo  { max-width: 124.9px; max-height: 41.6px; } /* VDA */
.logo-wall__item:nth-child(5) .logo-wall__logo  { max-width: 154.4px; max-height: 33.7px; } /* CDU */
.logo-wall__item:nth-child(6) .logo-wall__logo  { max-width: 128px;   max-height: 39px; }   /* Konrad-Adenauer-Stiftung */
.logo-wall__item:nth-child(7) .logo-wall__logo  { max-width: 94.7px;  max-height: 54.9px; } /* Bauer Media Group */
.logo-wall__item:nth-child(8) .logo-wall__logo  { max-width: 110.4px; max-height: 47.1px; } /* Hitschler */
.logo-wall__item:nth-child(9) .logo-wall__logo  { max-width: 67.2px;  max-height: 68px; }   /* Haferkater */
.logo-wall__item:nth-child(10) .logo-wall__logo { max-width: 70.7px;  max-height: 68px; }   /* Berliner Fernsehturm */
.logo-wall__item:nth-child(11) .logo-wall__logo { max-width: 124.4px; max-height: 41.8px; } /* Flix */
.logo-wall__item:nth-child(12) .logo-wall__logo { max-width: 151.3px; max-height: 34.4px; } /* Johannesstift Diakonie */
.logo-wall__item:nth-child(13) .logo-wall__logo { max-width: 101.9px; max-height: 51px; }   /* DHIK */
.logo-wall__item:nth-child(14) .logo-wall__logo { max-width: 107.2px; max-height: 48.5px; } /* Vytal */
.logo-wall__item:nth-child(15) .logo-wall__logo { max-width: 69.1px;  max-height: 68px; }   /* BBG */
.logo-wall__item:nth-child(16) .logo-wall__logo { max-width: 73.6px;  max-height: 68px; }   /* Lohrmanns Brew */
.logo-wall__item:nth-child(17) .logo-wall__logo { max-width: 90.7px;  max-height: 57.3px; } /* WvSC */
.logo-wall__item:nth-child(18) .logo-wall__logo { max-width: 101.2px; max-height: 51.4px; } /* Eckert & Ziegler */
.logo-wall__item:nth-child(19) .logo-wall__logo { max-width: 59.5px;  max-height: 68px; }   /* VDI/VDE */
.logo-wall__item:nth-child(20) .logo-wall__logo { max-width: 104.1px; max-height: 50px; }   /* Bundesbau */
.logo-wall__item:nth-child(21) .logo-wall__logo { max-width: 103.5px; max-height: 50.2px; } /* DHU */
.logo-wall__item:nth-child(22) .logo-wall__logo { max-width: 80.6px;  max-height: 64.5px; } /* EuroEyes */
.logo-wall__item:nth-child(23) .logo-wall__logo { max-width: 99.2px;  max-height: 52.4px; } /* KZBV */
.logo-wall__item:nth-child(24) .logo-wall__logo { max-width: 113.5px; max-height: 45.8px; } /* Patrizia */

@media (max-width: 1200px) {
  .logo-wall__grid { grid-template-columns: repeat(4, 1fr); }
  .logo-wall__item:nth-child(1) .logo-wall__logo  { max-width: 66.2px;  max-height: 50.2px; }
  .logo-wall__item:nth-child(2) .logo-wall__logo  { max-width: 82.5px;  max-height: 40.3px; }
  .logo-wall__item:nth-child(3) .logo-wall__logo  { max-width: 102.4px; max-height: 32.3px; }
  .logo-wall__item:nth-child(4) .logo-wall__logo  { max-width: 99.9px;  max-height: 33.3px; }
  .logo-wall__item:nth-child(5) .logo-wall__logo  { max-width: 123.5px; max-height: 27px; }
  .logo-wall__item:nth-child(6) .logo-wall__logo  { max-width: 102.4px; max-height: 31.2px; }
  .logo-wall__item:nth-child(7) .logo-wall__logo  { max-width: 75.8px;  max-height: 43.9px; }
  .logo-wall__item:nth-child(8) .logo-wall__logo  { max-width: 88.3px;  max-height: 37.7px; }
  .logo-wall__item:nth-child(9) .logo-wall__logo  { max-width: 53.8px;  max-height: 54.4px; }
  .logo-wall__item:nth-child(10) .logo-wall__logo { max-width: 56.6px;  max-height: 54.4px; }
  .logo-wall__item:nth-child(11) .logo-wall__logo { max-width: 99.5px;  max-height: 33.4px; }
  .logo-wall__item:nth-child(12) .logo-wall__logo { max-width: 121px;   max-height: 27.5px; }
  .logo-wall__item:nth-child(13) .logo-wall__logo { max-width: 81.5px;  max-height: 40.8px; }
  .logo-wall__item:nth-child(14) .logo-wall__logo { max-width: 85.8px;  max-height: 38.8px; }
  .logo-wall__item:nth-child(15) .logo-wall__logo { max-width: 55.3px;  max-height: 54.4px; }
  .logo-wall__item:nth-child(16) .logo-wall__logo { max-width: 58.9px;  max-height: 54.4px; }
  .logo-wall__item:nth-child(17) .logo-wall__logo { max-width: 72.6px;  max-height: 45.8px; }
  .logo-wall__item:nth-child(18) .logo-wall__logo { max-width: 81px;    max-height: 41.1px; }
  .logo-wall__item:nth-child(19) .logo-wall__logo { max-width: 47.6px;  max-height: 54.4px; }
  .logo-wall__item:nth-child(20) .logo-wall__logo { max-width: 83.3px;  max-height: 40px; }
  .logo-wall__item:nth-child(21) .logo-wall__logo { max-width: 82.8px;  max-height: 40.2px; }
  .logo-wall__item:nth-child(22) .logo-wall__logo { max-width: 64.5px;  max-height: 51.6px; }
  .logo-wall__item:nth-child(23) .logo-wall__logo { max-width: 79.4px;  max-height: 41.9px; }
  .logo-wall__item:nth-child(24) .logo-wall__logo { max-width: 90.8px;  max-height: 36.6px; }
}
@media (max-width: 760px) {
  .logo-wall__grid { grid-template-columns: repeat(3, 1fr); }
  .logo-wall__item:nth-child(1) .logo-wall__logo  { max-width: 51.8px; max-height: 39.2px; }
  .logo-wall__item:nth-child(2) .logo-wall__logo  { max-width: 64.4px; max-height: 31.5px; }
  .logo-wall__item:nth-child(3) .logo-wall__logo  { max-width: 80px;   max-height: 25.2px; }
  .logo-wall__item:nth-child(4) .logo-wall__logo  { max-width: 78.1px; max-height: 26px; }
  .logo-wall__item:nth-child(5) .logo-wall__logo  { max-width: 96.5px; max-height: 21.1px; }
  .logo-wall__item:nth-child(6) .logo-wall__logo  { max-width: 80px;   max-height: 24.4px; }
  .logo-wall__item:nth-child(7) .logo-wall__logo  { max-width: 59.2px; max-height: 34.3px; }
  .logo-wall__item:nth-child(8) .logo-wall__logo  { max-width: 69px;   max-height: 29.4px; }
  .logo-wall__item:nth-child(9) .logo-wall__logo  { max-width: 42px;   max-height: 42.5px; }
  .logo-wall__item:nth-child(10) .logo-wall__logo { max-width: 44.2px; max-height: 42.5px; }
  .logo-wall__item:nth-child(11) .logo-wall__logo { max-width: 77.8px; max-height: 26.1px; }
  .logo-wall__item:nth-child(12) .logo-wall__logo { max-width: 94.6px; max-height: 21.5px; }
  .logo-wall__item:nth-child(13) .logo-wall__logo { max-width: 63.7px; max-height: 31.9px; }
  .logo-wall__item:nth-child(14) .logo-wall__logo { max-width: 67px;   max-height: 30.3px; }
  .logo-wall__item:nth-child(15) .logo-wall__logo { max-width: 43.2px; max-height: 42.5px; }
  .logo-wall__item:nth-child(16) .logo-wall__logo { max-width: 46px;   max-height: 42.5px; }
  .logo-wall__item:nth-child(17) .logo-wall__logo { max-width: 56.7px; max-height: 35.8px; }
  .logo-wall__item:nth-child(18) .logo-wall__logo { max-width: 63.2px; max-height: 32.1px; }
  .logo-wall__item:nth-child(19) .logo-wall__logo { max-width: 37.2px; max-height: 42.5px; }
  .logo-wall__item:nth-child(20) .logo-wall__logo { max-width: 65.1px; max-height: 31.2px; }
  .logo-wall__item:nth-child(21) .logo-wall__logo { max-width: 64.7px; max-height: 31.4px; }
  .logo-wall__item:nth-child(22) .logo-wall__logo { max-width: 50.4px; max-height: 40.3px; }
  .logo-wall__item:nth-child(23) .logo-wall__logo { max-width: 62px;   max-height: 32.8px; }
  .logo-wall__item:nth-child(24) .logo-wall__logo { max-width: 70.9px; max-height: 28.6px; }
}
@media (max-width: 479px) {
  .logo-wall { padding-top: 3rem; padding-bottom: 3rem; }
  .logo-wall__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}

/* ============================================================
   Module: services_accordion  (nodes 3:141 visual, 3:140..3:92)
   Left visual 726×632 (r15) + right accordion 622 wide, 94px gap,
   block centered (239px margins), bottom-aligned. First item open.
   ============================================================ */
.services {
  padding-top: clamp(60px, 6.875vw, 132px);
  padding-bottom: clamp(48px, 5.521vw, 106px);
}
.services__inner {
  display: flex;
  justify-content: center;
  align-items: stretch; /* image matches the accordion's height (equal-height columns) */
  gap: 94px; /* visual right 965 → accordion left 1059 */
}
.services__visual {
  position: relative;
  flex: 0 0 auto;
  width: 726px;
  max-width: 42%;
  /* No fixed aspect-ratio — the figure stretches to the accordion height and the
     image fills it (object-fit: cover), so both columns are always equal-height. */
  margin: 0;
  border-radius: var(--radius-card); /* 15px */
  overflow: hidden;
}
/* The open service's video fills the visual box (same crop for every service). */
.services__visual-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.services__accordion {
  flex: 0 0 auto;
  width: 622px;
  max-width: 46%;
}

/* Accordion items */
.accordion__item {
  border-bottom: 1px solid var(--color-line); /* Linie 6 #707070 */
  padding-bottom: 12px;
}
.accordion__item + .accordion__item {
  margin-top: 5px; /* closed pitch 107 = 90 header + 12 pad + 5 gap */
}
.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 90px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.accordion__title {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 30px;
  line-height: 90px;
  color: var(--color-white);
  transition: color var(--transition-normal);
}
.accordion__plus {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 90px;
  color: var(--color-white);
  transform-origin: 50% 50%; /* rotate around the plus's true centre */
  transition: color var(--transition-normal), transform var(--transition-normal);
}
.accordion__plus svg {
  display: block;
}
/* Hover a CLOSED item → title + plus turn green and the plus rotates 90°.
   On click the item becomes .is-open (no longer matches :hover-not-open), so the
   plus animates back to 0° — "das Plus dreht sich wieder zurück". */
.accordion__item:not(.is-open) .accordion__header:hover .accordion__title,
.accordion__item:not(.is-open) .accordion__header:hover .accordion__plus {
  color: var(--color-green);
}
.accordion__item:not(.is-open) .accordion__header:hover .accordion__plus {
  transform: rotate(90deg);
}
/* Body reveal: the open body is given a CONSTANT reserved height (--acc-body-h =
   the tallest item's body, measured by main.js). Since every open body is that
   same height and exactly one item is always open, the accordion's total height
   never changes when switching items (no jump), whatever the copy length — and
   the left image (align-items: stretch) matches that constant height. Shorter
   bodies simply leave a little empty space below their text. */
.accordion__body {
  height: 0;
  overflow: hidden;
  transition: height var(--transition-slow);
}
.accordion__body-clip {
  min-height: 0;
}
.accordion__body-text {
  margin: 0;
  padding-bottom: 21px; /* body node ends → 33px to divider (12 item pad + 21) */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  color: var(--color-white);
  max-width: 546px; /* body node width 3:132 */
}
.accordion__item.is-open .accordion__title,
.accordion__item.is-open .accordion__plus {
  color: var(--color-green); /* open item stays green; its plus rests at 0° */
}
.accordion__item.is-open .accordion__body {
  height: var(--acc-body-h, auto);
}

/* ============================================================
   Module: contact_calendly  (nodes 3:78/3:77/3:43/3:39)
   Centered heading; row = form (639, left x=239) + calendly (806×572
   r29, right); gap 82; then centered contact info (50/900, 2 lines).
   ============================================================ */
.contact {
  position: relative; /* anchor for the success overlay */
  padding-top: clamp(48px, 5.521vw, 106px);
  padding-bottom: clamp(44px, 4.688vw, 90px);
}
.contact__heading {
  text-align: center;
}
.contact__row {
  margin-top: 165px; /* heading bottom 4987 → form top 5152 */
  padding-left: clamp(20px, 12.448vw, 239px);  /* form left x=239 */
  padding-right: clamp(16px, 8.021vw, 154px);  /* calendly right x=1766 (1920-1766=154) */
  display: flex;
  align-items: stretch; /* Calendly matches the form's height → one cohesive block */
  justify-content: space-between;
  gap: clamp(32px, 4.271vw, 82px); /* form right 878 → calendly left 960 */
}

/* ---- Left: contact form (node 3:77, 639 wide) ----
   Grow-ratio 639 : 806 vs the Calendly box → both are exactly 639/806
   at design width and shrink proportionally below it (no overflow). */
.contact-form {
  flex: 639 1 0;
  min-width: 0;
  max-width: 639px;
  /* No bottom padding: the form ends at the submit button, so the stretched
     Calendly box lines up exactly with "Nachricht absenden". */
}
.contact-form__field {
  padding-bottom: 40px; /* label 37 + input 24 + 40 = 101 (field pitch) */
  cursor: text; /* the whole field shows the typing cursor → "you can type here" */
}
.contact-form__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 37px;
  color: var(--color-white);
  cursor: text; /* typing cursor over the label too (matches the field) */
  transition: color var(--transition-normal), opacity var(--transition-fast);
}
.contact-form__label--sm {
  font-size: 18px; /* "Wie können wir helfen?" (3:57) */
}
.contact-form__control {
  display: block;
  width: 100%;
  height: 24px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-line); /* Linie 7-10 #707070 */
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  padding: 0;
}
.contact-form__control:focus {
  outline: none;
  border-bottom-color: var(--color-green);
}
/* The label doubles as a placeholder — it fades out while the field is focused
   or already filled (main.js toggles .is-active), signalling "type here". */
.contact-form__field.is-active .contact-form__label {
  opacity: 0;
}
/* Required-field error (main.js adds .is-error on submit): field + label go red.
   Kept visible even while focused (overrides the placeholder-hide) so the red
   label still flags the empty field until it's filled. */
.contact-form__field.is-error .contact-form__label {
  color: #ff0054;
  opacity: 1;
}
.contact-form__field.is-error .contact-form__control,
.contact-form__field.is-error .contact-form__control:focus {
  border-bottom-color: #ff0054;
}
.contact-form__error {
  margin: 22px 0 4px; /* sit a little below the consent text, not glued to it */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #ff0054;
}
.contact-form__error[hidden] {
  display: none;
}
/* Consent checkbox in an error state (unticked on submit). */
.contact-form__consent.is-error .contact-form__checkbox {
  border-color: #ff0054;
}
.contact-form__consent.is-error .contact-form__consent-text {
  color: #ff0054;
}
.contact-form__field--message {
  padding-bottom: 45px; /* message underline 475 → consent 520 */
}
.contact-form__control--area {
  height: 135px; /* label 37 + area 135 → underline at ~172 below label (Linie 10 at 475) */
  resize: vertical;
  line-height: 27px;
}

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 27px; /* checkbox 21 + gap → text at left 48 */
}
.contact-form__checkbox {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin: 4px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--color-line); /* #707070, r5 */
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}
.contact-form__checkbox:checked {
  background: var(--color-green);
  border-color: var(--color-green);
}
.contact-form__checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--color-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.contact-form__consent-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-white);
  cursor: pointer;
}
.contact-form__submit {
  height: 45px;
  margin-top: 72px; /* consent bottom 568 → submit 640 */
  border-radius: 999px; /* fully round — same as the nav CTA */
}

/* ---- Right: Calendly (node 3:43) — stretches to the form's height (no fixed
   aspect-ratio here; the row's align-items: stretch drives it). No placeholder
   box behind it — just the embed itself. ---- */
.contact__calendly {
  position: relative; /* the widget is absolutely-positioned inside (see below) */
  flex: 806 1 0;
  min-width: 0;
  max-width: 806px;
  border-radius: var(--radius-calendly); /* 29px — clips the embed's corners */
}

/* ---- Contact info (node 3:39, 50/900 center) ---- */
.contact__info {
  margin-top: 124px; /* form bottom 5866 → info top 5990 */
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(28px, 2.6042vw, 50px);
  line-height: 1.8; /* 90/50 */
  color: var(--color-white);
}
/* Phone (tel:) + email (mailto:) are call-to-action links → lime on hover. */
.contact__info-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-normal);
}
.contact__info-link:hover,
.contact__info-link:focus-visible {
  color: var(--color-lime); /* #B7FF2B */
}

/* ---- Contact success overlay — reveals after a valid submit (main.js adds
   .is-shown); a paper plane takes off along a dashed trail, then the message
   rises in. ---- */
.contact-success {
  position: fixed; /* always centred in the viewport, fully in view */
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  background:
    radial-gradient(58% 55% at 50% 42%, rgba(43, 235, 124, 0.14), transparent 72%),
    var(--color-bg);
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* Lock page scroll while the success overlay is open. */
body.contact-success-open { overflow: hidden; }
.contact-success[hidden] { display: none; }
.contact-success.is-shown { opacity: 1; }
.contact-success__inner { max-width: 640px; }
.contact-success__flight {
  position: relative;
  width: 340px;
  max-width: 100%;
  height: 150px;
  margin: 0 auto 24px;
}
.contact-success__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.contact-success.is-shown .contact-success__trail {
  animation: cs-trail-in 0.6s ease 0.15s forwards;
}
@keyframes cs-trail-in { to { opacity: 1; } }
/* The plane follows the same curve as the dashed trail (offset-path), nose along
   the flight direction, fading in/out at the ends so it loops seamlessly. */
.contact-success__jet {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  offset-path: path('M8 132 C 70 60, 120 150, 190 78 S 300 34, 332 24');
  offset-rotate: auto;
  offset-distance: 0%;
  will-change: offset-distance, opacity;
}
.contact-success.is-shown .contact-success__jet {
  animation: cs-fly 3.6s ease-in-out infinite;
}
@keyframes cs-fly {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.contact-success__jet svg { display: block; filter: drop-shadow(0 4px 10px rgba(43, 235, 124, 0.35)); }
.contact-success__title {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.1;
  color: var(--color-green);
  opacity: 0;
}
.contact-success__text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  color: var(--color-white);
  opacity: 0;
}
.contact-success__close {
  display: inline-block;
  margin-top: 30px;
  padding: 6px 4px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  opacity: 0;
  transition: color var(--transition-normal);
}
.contact-success__close:hover,
.contact-success__close:focus-visible {
  color: var(--color-green); /* #2BEB7C on hover */
}
.contact-success.is-shown .contact-success__title { animation: cs-rise 0.6s var(--ease-soft) 0.35s both; }
.contact-success.is-shown .contact-success__text  { animation: cs-rise 0.6s var(--ease-soft) 0.5s both; }
.contact-success.is-shown .contact-success__close { animation: cs-rise 0.6s var(--ease-soft) 0.65s both; }
@keyframes cs-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
  .contact-success__flight { transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-success__jet { animation: none; opacity: 1; offset-distance: 60%; }
  .contact-success__trail,
  .contact-success__title,
  .contact-success__text,
  .contact-success__close { animation: none; opacity: 1; }
}

/* ============================================================
   Global: site footer  (node 3:38, 1920×72)
   Left: pin + address (x=323). Right cluster (40px gaps): Jobs♡,
   Impressum, AGB, Datenschutz (ends x=1589). 10px brand-gradient bar.
   181px gap above = contact pb 90 + footer pt 91.
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  padding-top: clamp(44px, 4.74vw, 91px);
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 18px;
  padding-left: clamp(20px, 16.82vw, 323px);  /* address frame x=323 */
  padding-right: clamp(20px, 17.24vw, 331px); /* legal group right edge → 331 margin */
}
.site-footer__address {
  display: flex;
  align-items: center;
  gap: 10px; /* pin(15) at x=323, text at x=348 */
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-white);
}
/* Pin rendered as a CSS mask so it recolours with the link → white, green on hover. */
.site-footer__pin {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: var(--color-white);
  -webkit-mask: url(../images/footer-pin.png) center / contain no-repeat;
  mask: url(../images/footer-pin.png) center / contain no-repeat;
  transition: background-color var(--transition-normal);
}
/* Address links to the Google-Maps entry (opens in a new tab) → green on hover. */
.site-footer__address-link {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* pin(15) → text */
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-normal);
}
.site-footer__address-link:hover,
.site-footer__address-link:focus-visible {
  color: var(--color-green); /* #2BEB7C */
}
.site-footer__address-link:hover .site-footer__pin,
.site-footer__address-link:focus-visible .site-footer__pin {
  background-color: var(--color-green); /* icon turns green too */
}
.site-footer__right,
.site-footer__menu {
  display: flex;
  align-items: center;
  gap: 40px; /* uniform 40px between Jobs, Impressum, AGB, Datenschutz */
}
.site-footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__link {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-white);
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.site-footer__link:hover {
  color: var(--color-green);
}
.site-footer__heart {
  font-size: 15px; /* ♡ node 3:26 */
}
/* 10px brand-gradient bar (3:36): #B7FF2B → #2BEB7C, 40px below the links row */
.site-footer__bar {
  height: 5px; /* half the original 10px strip */
  margin-top: 40px; /* links row bottom (22) → bar top (62) */
  background: var(--gradient-footer);
}

/* ============================================================
   RESPONSIVE — GLOBAL BASE (Phase 4)
   Desktop 1920→collapse handled by clamp() in the rules above.
   These are low-specificity safeguards; media queries follow.
   ============================================================ */
html,
body {
  min-width: 320px;
}

/* Prevent any decorative bleed from forcing horizontal scroll. */
.hero {
  overflow: hidden;
}

/* Mobile nav overlay — hidden on desktop, shown at the nav-collapse breakpoint. */
.mobile-nav {
  display: none;
}

/* ============================================================
   BREAKPOINT — Nav collapse @ 1400px
   The 8 full-word links + 250px CTA cannot compress below ~1368px
   (measured), so the nav — and ONLY the nav — becomes a hamburger
   here. All section layouts stay in their desktop composition until
   the 1024px breakpoint below.
   ============================================================ */
@media (max-width: 1400px) {
  /* Nav collapses to logo + burger → the bar spans full width in BOTH states
     (the desktop pill hugs its content; here it must not shrink to a tiny
     cluster). The .is-scrolled override matches specificity so it wins. */
  .site-header__inner,
  .site-header.is-scrolled .site-header__inner {
    flex-grow: 1;
  }

  .site-nav {
    display: none;
  }

  /* Logo left, the burger + CTA group pushed to the right edge. */
  .site-header__logo {
    margin-right: auto;
  }

  /* Right group: CTA then burger. Logo (margin-right:auto) sits left; CTA and
     burger share the same 40px height, vertically centred, with an even gap. */
  .site-header__actions {
    display: flex;
    align-items: center;
    order: 2; /* CTA left of the burger */
    height: 40px;
  }
  .site-header__actions .lang-switch {
    display: none;
  }
  .site-header__actions .btn--cta {
    height: 40px;
    padding: 0 20px;
    font-size: 16px;
    animation: none; /* no continuous glow repaint on mobile (perf) */
  }
  /* Mobile CTA label shortens to just "Kontakt". */
  .site-header__actions .btn--cta__full { display: none; }
  .site-header__actions .btn--cta__short { display: inline; }

  .site-header__burger {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* lines are right-aligned (per screenshot) */
    justify-content: center;
    gap: 5px;
    order: 3; /* burger is the right-most element */
    margin-left: 16px; /* even gap to the CTA */
    width: 40px;
    height: 40px;
    padding: 0;
  }
  .site-header__burger span {
    display: block;
    width: 26px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--color-white);
    transition: width 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
  }
  /* Uneven, right-aligned lines: short top, full middle + bottom. */
  .site-header__burger span:nth-child(1) { width: 15px; }
  /* Open → morph into an X (equal, centred lines that cross). */
  .site-header__burger.is-open {
    align-items: center;
  }
  .site-header__burger.is-open span { width: 24px; }
  .site-header__burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header__burger.is-open span:nth-child(2) { opacity: 0; }
  .site-header__burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Fullscreen overlay menu — always laid out on mobile so it can animate;
     it is clipped to nothing (+ pointer-events/visibility off) until opened. */
  .mobile-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 96px 24px 48px;
    background: #000000; /* fully opaque black */
    overflow-y: auto;
    /* Creative open: an iris expanding out of the burger. Its centre (--iris-x/y)
       is measured from the burger in JS so the reveal starts exactly there. */
    visibility: hidden;
    pointer-events: none;
    clip-path: circle(0% at var(--iris-x, calc(100% - 42px)) var(--iris-y, 42px));
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s;
  }
  .mobile-nav.is-open {
    visibility: visible;
    pointer-events: auto;
    clip-path: circle(150% at var(--iris-x, calc(100% - 42px)) var(--iris-y, 42px));
    transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  /* Menu open: keep the burger (→ X) and logo above the overlay; hide the header
     CTA + pill so only the logo and the X remain over the menu. */
  body.is-nav-open .site-header__inner {
    z-index: 95; /* above the overlay (90) */
  }
  body.is-nav-open .site-header__inner::before,
  body.is-nav-open .site-header__actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  /* Menu items cascade up + fade in, staggered, after the iris starts opening. */
  .mobile-nav__item,
  .mobile-nav__cta,
  .mobile-nav__lang {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mobile-nav.is-open .mobile-nav__item,
  .mobile-nav.is-open .mobile-nav__cta,
  .mobile-nav.is-open .mobile-nav__lang {
    opacity: 1;
    transform: none;
  }
  .mobile-nav.is-open .mobile-nav__item:nth-child(1) { transition-delay: 0.22s; }
  .mobile-nav.is-open .mobile-nav__item:nth-child(2) { transition-delay: 0.28s; }
  .mobile-nav.is-open .mobile-nav__item:nth-child(3) { transition-delay: 0.34s; }
  .mobile-nav.is-open .mobile-nav__item:nth-child(4) { transition-delay: 0.40s; }
  .mobile-nav.is-open .mobile-nav__item:nth-child(5) { transition-delay: 0.46s; }
  .mobile-nav.is-open .mobile-nav__item:nth-child(6) { transition-delay: 0.52s; }
  .mobile-nav.is-open .mobile-nav__item:nth-child(7) { transition-delay: 0.58s; }
  .mobile-nav.is-open .mobile-nav__item:nth-child(8) { transition-delay: 0.64s; }
  .mobile-nav.is-open .mobile-nav__cta  { transition-delay: 0.68s; }
  .mobile-nav.is-open .mobile-nav__lang { transition-delay: 0.74s; }
  .mobile-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
  }
  .mobile-nav__item {
    width: 100%;
    text-align: center;
  }
  .mobile-nav__link {
    display: block;
    padding: 12px 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.3;
    color: var(--color-white);
    transition: color var(--transition-fast);
  }
  .mobile-nav__link.is-active {
    color: var(--color-green); /* #2BEB7C — current page, not bold */
  }
  .mobile-nav__link:hover {
    color: var(--color-green);
  }
  .mobile-nav__cta {
    margin-top: 20px;
  }
  .mobile-nav__lang {
    margin-top: 22px;
    font-size: 18px;
  }
  .mobile-nav__lang .lang-switch__lang {
    padding: 8px 10px;
  }
}

/* ============================================================
   BREAKPOINT — Tablet layout shift @ 1024px
   Multi-column rows stack; oversized desktop vertical gaps tighten.
   References stays 2-up (fits); it collapses to 1-up at 768.
   ============================================================ */
@media (max-width: 1024px) {
  /* MEDIA TEAM — caption headline eases down a touch on tablet */
  .media-team__caption {
    bottom: 10%;
  }

  /* SERVICES — visual over accordion, both centered */
  .services__inner {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }
  .services__visual {
    width: 100%;
    max-width: 726px;
  }
  .services__accordion {
    width: 100%;
    max-width: 660px;
  }

  /* CONTACT — form over Calendly, centered; drop the 239/154 side insets */
  .contact__row {
    flex-direction: column;
    align-items: center;
    gap: 56px;
    margin-top: 80px;
    padding-left: clamp(20px, 5vw, 80px);
    padding-right: clamp(20px, 5vw, 80px);
  }
  .contact-form {
    flex: 0 0 auto;
    width: 100%;
    max-width: 639px;
  }
  .contact__calendly {
    flex: 0 0 auto;
    width: 100%;
    max-width: 806px;
    aspect-ratio: 806 / 572; /* stacked: no form to match → own height back */
  }
  .contact__info {
    margin-top: 80px;
  }
}

/* ============================================================
   BREAKPOINT — Mobile @ 768px
   Everything single-column; typography & spacing scale down.
   ============================================================ */
@media (max-width: 768px) {
  /* HERO */
  .hero {
    padding-inline: 24px;
  }
  .hero__subtext {
    margin-top: 28px;
    font-size: 18px;
    line-height: 28px;
  }

  /* MEDIA TEAM + AGENTUR HERO (same photo box → same side gutters) */
  .media-team,
  .agentur-hero {
    padding-inline: 24px;
  }
  .media-team__figure {
    max-width: 100%;
    aspect-ratio: 4 / 5; /* wide crop gets too short on phones — give the caption room */
  }
  .media-team__tagline {
    margin-top: 8px;
    font-size: 15px;
    line-height: 22px;
  }
  .media-team__br--m { display: inline; } /* "25 Friends …" → 2nd line */
  .media-team__cta {
    margin-top: 24px;
  }
  .play-button {
    width: 72px;
    height: 72px;
  }
  .play-button__triangle {
    border-top-width: 11px;
    border-bottom-width: 11px;
    border-left-width: 17px;
  }

  /* REFERENCES — single column */
  .references {
    padding-inline: 24px;
  }
  .references__intro {
    font-size: 18px;
    line-height: 28px;
  }
  .references__br--m { display: inline; } /* "made by chris and friends" → 2nd line */
  .references__branches { margin-top: clamp(28px, 8vw, 48px); }
  .references__branches-br { display: inline; } /* "Website Expertise setzen:" → 2nd line */
  .branch-pills { gap: 8px; }
  /* drop the forced row-break on mobile — it sits full-width with gap on both
     sides, so it doubles the gap at that spot; hiding it keeps every pill an
     identical 8px apart as they wrap naturally. */
  .branch-pills__break { display: none; }
  .branch-pill { height: 40px; padding: 0 20px; }
  .references__grid {
    width: min(608px, 100%);
    margin-top: 48px;
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  /* SERVICES — drop the visual (service videos) on mobile; accordion only. */
  .services {
    padding-inline: 24px;
  }
  .services__visual {
    display: none;
  }
  .accordion__title {
    font-size: 24px;
  }
  .accordion__header {
    height: auto;
    min-height: 72px;
    padding-block: 14px;
    gap: 12px;
  }
  .accordion__title,
  .accordion__plus {
    line-height: 1.3;
  }
  .accordion__plus {
    font-size: 40px;
  }

  /* CONTACT */
  .contact {
    padding-inline: 24px;
  }
  .contact__row {
    margin-top: 56px;
    padding-inline: 0;
  }
  /* Calendly needs much more height on mobile so the booking is actually usable. */
  .contact__calendly {
    aspect-ratio: auto;
    height: clamp(600px, 92vh, 780px);
  }
  .contact-form__label {
    font-size: 20px;
    line-height: 30px;
  }
  .contact__info {
    margin-top: 56px;
  }

  /* FOOTER — centered: address on top, legal links below */
  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-inline: 24px;
  }
  .site-footer__right,
  .site-footer__menu {
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 24px; /* the <ul> itself must wrap, not just its <nav> wrapper */
  }
  .site-footer__link {
    padding-block: 10px; /* ≥40px tap height on touch */
  }
  /* Mobile footer: show only the legal links, ordered Impressum · Datenschutz · AGB
     (menu order is Jobs · Impressum · AGB · Datenschutz). */
  .site-footer__menu li:nth-child(1) { display: none; } /* "Jobs …" */
  .site-footer__menu li:nth-child(2) { order: 1; }      /* Impressum */
  .site-footer__menu li:nth-child(4) { order: 2; }      /* Datenschutz */
  .site-footer__menu li:nth-child(3) { order: 3; }      /* AGB */
}

/* ============================================================
   BREAKPOINT — Small mobile @ 480px
   Typography & spacing fine-tuning only — no layout changes.
   ============================================================ */
@media (max-width: 480px) {
  .hero,
  .media-team,
  .agentur-hero,
  .references,
  .services,
  .contact {
    padding-inline: 16px;
  }
  .site-footer__inner {
    padding-inline: 16px;
  }

  .section-heading {
    font-size: 32px;
  }
  /* Assembling headline stays prominent on phones but scales to fit one line. */
  .references__heading--build,
  .page-hero__heading {
    font-size: clamp(30px, 8.4vw, 48px);
  }
  .hero__headline {
    font-size: clamp(34px, 10.5vw, 46px); /* stays a touch larger on small phones */
  }
  .hero__subtext,
  .references__intro,
  .page-hero__intro {
    font-size: 16px;
    line-height: 26px;
  }
  .media-team__title {
    font-size: 40px;
  }
  .accordion__title {
    font-size: 20px;
  }
  .accordion__plus {
    font-size: 34px;
  }
  .contact-form__label {
    font-size: 18px;
  }
  .contact__info {
    font-size: 18px;
    line-height: 1.6;
    overflow-wrap: anywhere; /* long email token must break, not overflow */
  }
}

/* ============================================================
   PHASE 5 — Interaction hooks (JS-driven; briefing_interactions[])
   CSS-only briefing behaviours (cta/mehr/submit glow, play-pulse,
   marquee, accordion plus-spin, ref-hover text hide) are in
   their module blocks above. This block adds the states main.js toggles.
   ============================================================ */

/* Mobile-menu body scroll-lock (JS adds .is-nav-open on <body>). */
body.is-nav-open {
  overflow: hidden;
}

/* ---- Hero intro (headline 3:477 + subtext 3:473) ----
   Subtext fades/rises in on load; then its words run a green colour wave. */
[data-anim="fade-up"] {
  animation: hero-fade-up 0.8s ease both;
}
.hero__subtext[data-anim="fade-up"] {
  animation-delay: 0.18s;
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Headline: shown statically — it is simply THERE on load, no fade/rise.
   hero.php still splits the copy into .hero__line > .hero__line-inner so the
   two lines break exactly ("DEINE AGENTUR FÜR" / "WEBSITES UND ONLINESHOPS"). */
.hero__headline[data-anim] {
  animation: none;
}
.hero__line {
  display: block;
  padding-top: 0.08em;  /* room for the Ü umlaut */
  margin-top: -0.08em;  /* …without shifting the layout */
}
.hero__line-inner {
  display: block;
}

/* Subtext key terms — the copy stays white, the wrapped terms (.hl) are simply
   #2BEB7C (statically green; main.js only wraps them, no pulsing). */
.hero__subtext .hl {
  color: var(--color-green);
}

/* ---- Scroll reveals (video-slide-up 3:457, refs-stagger 3:442..3:367) ----
   Hidden state applies ONLY with JS (html.js) so no-JS users see content.
   main.js adds .is-visible via IntersectionObserver. */
html.js [data-anim="slide-up"] {
  opacity: 0;
  transform: translateY(64px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
html.js [data-anim="slide-up"].is-visible {
  opacity: 1;
  transform: none;
}

html.js [data-anim="ref-card"] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i, 0) * 0.06s);
  will-change: opacity, transform;
}
html.js [data-anim="ref-card"].is-left  { transform: translateX(-56px); }
html.js [data-anim="ref-card"].is-right { transform: translateX(56px); }
html.js [data-anim="ref-card"].is-visible {
  opacity: 1;
  transform: none;
}
/* Single-column mobile: the desktop L/R directional slide has no meaning and its
   ±56px X-offset overflows a full-width card (clipped, but dirties mid-reveal
   screenshots). Slide up instead. Placed AFTER the base rules so it wins on
   source order at equal specificity. */
@media (max-width: 768px) {
  html.js [data-anim="ref-card"].is-left,
  html.js [data-anim="ref-card"].is-right {
    transform: translateY(40px);
  }
}

/* ---- fade reveals (team caption: #TEAM CAF + tagline + button) ----
   Simply blend in on scroll into view, lightly staggered via --i. */
html.js [data-anim="fade"] {
  opacity: 0;
  transition: opacity 0.7s ease;
  transition-delay: calc(var(--i, 0) * 0.14s);
  will-change: opacity;
}
html.js [data-anim="fade"].is-visible {
  opacity: 1;
}
/* Logo wall: each logo fades in on its own, cascading left→right by --i index. */
html.js .logo-wall__item[data-anim="fade"] {
  transition: opacity 0.55s ease;
  transition-delay: calc(var(--i, 0) * 0.05s);
}
/* Leistungen: faster fade + tighter stagger (image + first item, then the rest). */
html.js .services__visual[data-anim="fade"],
html.js .accordion__item[data-anim="fade"] {
  transition: opacity 0.35s ease;
  transition-delay: calc(var(--i, 0) * 0.06s);
}

/* ---- video-play (team 3:457) — only the play button disappears; the gradient,
   caption texts and "Mehr über uns" button stay overlaid on the playing video. */
.media-team__figure.is-playing .play-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.media-team__figure video,
.media-team__figure iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  z-index: 1; /* plays behind the gradient + caption (which stay visible) */
}

/* ---- ref-hover-video (each card) — plays over the image, UNDER the gradient
   overlay (z2) + caption (z3) so the green-on-hover text stays readable.
   Only visible while hovering (.is-playing); on mouse-leave it hides again so
   the card snaps back to its thumbnail image. ---- */
.ref-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ref-card.is-playing .ref-card__video {
  opacity: 1;
}

/* ---- Reduced motion — respect the OS preference ---- */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Headline lines: no rise, just show them in place. */
  .hero__line-inner {
    animation: none !important;
    transform: none !important;
  }
  .btn--cta,
  .play-button {
    animation: none !important;
  }
}

/* ============================================================
   PHASE 6 — hooks for the ACF-driven markup
   (No geometry changes to existing modules — these style new
   elements introduced when content became CMS-dynamic.)
   ============================================================ */

/* Accordion body is now a wysiwyg field → it emits its own <p>. The text
   styles live on .accordion__body-text (inherited by the <p>); just reset the
   paragraph's default margins so the 21px padding math is preserved. */
.accordion__body-text > :first-child { margin-top: 0; }
.accordion__body-text > :last-child { margin-bottom: 0; }
.accordion__body-text p { margin: 0; }
.accordion__body-text p + p { margin-top: 1em; }

/* Reference card optional link — a transparent stretched anchor over the card
   (above overlay/text/hover-video so it stays the click target). */
.ref-card__link {
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* Calendly inline widget — its height is synced to the FORM height by main.js
   (initCalendly): widget.js writes an inline position/height that CSS !important
   can't reliably beat, so JS drives the size. overflow:hidden trims any few px
   so the embed lines up flush with the form (same top level with "Name", same
   bottom). */
.contact__calendly { overflow: hidden; }
.contact__calendly .calendly-inline-widget {
  width: 100% !important;
}
.contact__calendly iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Native contact-form additions: honeypot (hidden) + status banner. */
.contact-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact__status {
  max-width: 639px;
  margin: 0 auto 28px;
  padding: 14px 20px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  border-radius: 8px;
}
.contact__status--ok {
  color: var(--color-green);
  border: 1px solid var(--color-green);
}
.contact__status--err {
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}

/* Header logo text fallback (shown only when no logo image is set). */
.site-header__logo-text {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}

/* ============================================================
   Floating welcome-video widget (global, bottom-right)
   Bubble (winkewinke) ↔ expanded player (welcome_340x460) ↔ white dot.
   All three states share the bottom-right anchor + transform-origin, so each
   scales in/out of the same corner — the player appears to grow out of the
   bubble, and the bubble collapses into the dot. (JS: initWelcomeWidget.)
   ============================================================ */
.welcome-widget {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 70;
  width: 0;
  height: 0;
  font-family: var(--font-sans);
  /* Hidden below the fold; slides up into view once the "Referenzen" heading is
     reached (main.js adds .is-revealed via IntersectionObserver). */
  opacity: 0;
  transform: translateY(170px);
  transition: transform 0.6s var(--ease-soft), opacity 0.45s ease;
}
.welcome-widget.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Out of the way while the mobile nav overlay is open. */
body.is-nav-open .welcome-widget.is-revealed,
body.is-nav-open .welcome-widget {
  opacity: 0;
  pointer-events: none;
}
.welcome-widget__bubble,
.welcome-widget__player,
.welcome-widget__dot {
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: bottom right;
  transition: transform 0.45s var(--ease-soft), opacity 0.35s ease;
}

/* ---- Bubble: circular teaser video ---- */
.welcome-widget__bubble {
  width: clamp(76px, 8vw, 96px);
  height: clamp(76px, 8vw, 96px);
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
}
.welcome-widget.is-bubble .welcome-widget__bubble {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.welcome-widget__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.16);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.welcome-widget__teaser {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hover the VIDEO circle → lift + green glow. Triggered by the video button
   only, so hovering the close × never lights up the circle (independent hovers). */
.welcome-widget__open:hover,
.welcome-widget__open:focus-visible {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.6),
    0 0 0 2px var(--color-green), 0 0 26px 2px rgba(43, 235, 124, 0.5);
  outline: none;
}
/* Soft pulsing ring — a sibling layer (not clipped), animates ONLY while the
   video button is hovered/focused (not the ×). */
.welcome-widget__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-green);
  opacity: 0;
  pointer-events: none;
}
.welcome-widget__open:hover ~ .welcome-widget__ring,
.welcome-widget__open:focus-visible ~ .welcome-widget__ring {
  animation: welcome-ring 1.6s ease-out infinite;
}
@keyframes welcome-ring {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.5); }
}
/* Close × — a crisp SVG cross on a glassy dark chip, sitting ON the circle's
   top-right edge. Its own hover (independent from the video): flips to white and
   spins 90°. → collapse to the dot. */
.welcome-widget__close {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: background var(--transition-normal), color var(--transition-normal),
    transform var(--transition-normal), box-shadow var(--transition-normal);
}
.welcome-widget__close svg { display: block; }
.welcome-widget__close:hover,
.welcome-widget__close:focus-visible {
  background: #fff;
  color: var(--color-bg);
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 0, 0, 0.5);
  outline: none;
}

/* ---- Player: the expanded welcome video ---- */
.welcome-widget__player {
  width: min(340px, calc(100vw - 32px));
  aspect-ratio: 340 / 460;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
  opacity: 0;
  transform: scale(0.28);
  pointer-events: none;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.welcome-widget.is-open .welcome-widget__player {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.welcome-widget__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.welcome-widget__player-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-normal), transform var(--transition-fast);
}
.welcome-widget__player-close:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.08);
}

/* ---- Dot: a white dot with a white outline ---- */
.welcome-widget__dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid #fff;   /* outline */
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  transition: transform 0.4s var(--ease-soft), opacity 0.3s ease, box-shadow var(--transition-normal);
}
.welcome-widget__dot::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;          /* the dot */
}
.welcome-widget.is-dot .welcome-widget__dot {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.welcome-widget__dot:hover {
  transform: scale(1.18);
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .welcome-widget__bubble:hover::after { animation: none; }
}

/* ============================================================
   Agentur page — agentur_hero · leadership · team_mosaic
   Reuses the global header/nav (above) + the contact "Become a
   friend" block + the site footer (below). Figma canvas 17:2.
   ============================================================ */

/* ---------- agentur_hero: rounded media box + overlaid headline ---------- */
.agentur-hero {
  padding-top: calc(var(--nav-height) + clamp(20px, 4vw, 90px)); /* clear the fixed nav */
  padding-bottom: clamp(40px, 4vw, 80px);
}
/* "Über uns" (Agentur, id 73 / EN 323): the first screen is the interactive 3D
   logo animation (Three.js, Figma-Make export). It fills one viewport above the
   team photo, so the photo stays below the fold. Static white logo is the
   fallback (mobile / reduced-motion / no-WebGL — see logo3d-init.js). DE + EN. */
:is(.page-id-73, .parent-pageid-73) .agentur-hero { padding-top: 13vh; } /* logo area sits below the nav; balances the gap nav↔logo↔photo */
/* Team-photo panel: full-width opaque cover that scrolls up and slides over the
   pinned, shrinking logo (min-height = the scroll "runway" for the effect). */
.agentur-hero__cover {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  /* Soft top edge: fade transparent → bg so the panel slides WEICH over the logo
     (no hard black cut) and the photo emerges softly right below the logo area. */
  background: linear-gradient(to bottom, transparent 0, var(--color-bg) 22vh);
  display: flex;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: clamp(40px, 8vh, 90px);
}
/* The 3D-logo screen is PINNED (sticky) while you scroll the first viewport and
   shrinks (--logo-s, set by logo3d-init.js); the photo panel above slides over it. */
.logo3d-wrap {
  position: sticky;
  top: 13vh;                 /* pin just below the floating nav (matches the section padding) */
  z-index: 0;
  width: 100%;
  height: 46vh;              /* half-height → the 3D logo renders ~half size (fitMesh fits to height) */
  overflow: hidden;
  background: transparent; /* logo floats over the dark header; the photo panel covers it on scroll */
}
.logo3d { width: 100%; height: 100%; transform: scale(var(--logo-s, 1)); transform-origin: 50% 50%; }
.logo3d__fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--logo-s, 1));
  width: min(58vw, 460px);
  height: auto;
  z-index: 1;
  pointer-events: none;
}
/* Capable devices: hide the static logo from the FIRST paint (class set in <head>
   by logo3d-init.js) so the white SVG never flashes during the bundle download.
   Removed again if the bundle fails → fallback reappears. */
html.logo3d-3d .logo3d__fallback { display: none; }
/* No scale-in entrance (client 2026-09-10): the 3D logo simply appears at full
   size and idles as usual — no grow-from-0. The scroll-shrink still lives on
   `.logo3d` via `--logo-s`; the fallback stays hidden (rule above) so nothing
   flashes during the bundle download. */
.agentur-hero__inner { padding-inline: 0; }
/* Same box as the home group photo (.media-team__figure): 1272 wide, r15. */
.agentur-hero__media {
  position: relative;
  width: 1272px;
  max-width: calc(100% - 48px);
  margin-inline: auto;
  aspect-ratio: 1272 / 808;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #0d0d0d;
}
.agentur-hero__img,
.agentur-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agentur-hero__scrim {
  position: absolute;
  inset: 0;
  /* Same bottom-fade as the home group photo (.media-team__overlay): clear at
     the top → full black at the bottom, so the image runs out into black. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 15%, #000000 98%);
  pointer-events: none;
}
.agentur-hero__headline {
  position: absolute;
  left: 50%;
  bottom: clamp(110px, 20%, 300px); /* sits higher over the photo */
  transform: translateX(-50%);
  width: min(94%, 1080px);
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400; /* Barlow, light — thinner than the #TEAM CAF weight */
  font-size: clamp(22px, 2.9vw, 46px);
  line-height: 1.15;
  color: var(--color-white);
}

/* ---------- stats: count-up numbers + labels ---------- */
.stats {
  padding-top: clamp(36px, 4vw, 84px);
  padding-bottom: clamp(36px, 4vw, 84px);
}
.stats__inner { padding-inline: clamp(20px, 5vw, 80px); }
.stats__row {
  max-width: 1272px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 3vw, 44px) clamp(24px, 4vw, 72px);
}
.stat {
  flex: 0 1 auto;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px); /* breathing room between number and label */
  text-align: center;
}
.stat__num {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
  color: var(--color-white);
  font-variant-numeric: tabular-nums; /* stop width jitter while counting */
}
.stat__label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.3;
  color: var(--color-white);
}

/* ---------- leadership: heading + 3 portrait cards ---------- */
.leadership {
  padding-top: clamp(64px, 7.5vw, 148px); /* more air below the group photo */
  padding-bottom: clamp(40px, 5vw, 96px);
}
.leadership__inner { padding-inline: clamp(20px, 5vw, 80px); }
.leadership__heading {
  margin: 0 0 clamp(48px, 6vw, 108px); /* more air before the 3 photos */
  text-align: center;
  text-transform: uppercase;
  /* Same typeface/weight/tracking as .agentur-hero__headline (no letter-spacing). */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(21px, 1.92vw, 35px); /* −20% vs previous clamp(26px,2.4vw,44px) */
  line-height: 1.15;
  color: var(--color-white);
}
.leadership__grid {
  max-width: 1456px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 44px);
}
.leadership__card { margin: 0; }
.leadership__photo {
  position: relative;
  aspect-ratio: 453 / 470;
  border-radius: var(--radius-card);
  /* overflow VISIBLE so the additive .leadership__snap can cast its shadow past
     the portrait edge. The rounded corners therefore live on the children that
     paint the portrait (img + overlay + this box's own background). */
  overflow: visible;
  background: #0d0d0d;
}
.leadership__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}
/* LinkedIn icon on a leadership portrait (Chris/Markus) — white, turns LinkedIn
   blue on hover/focus; links to the profile in a new tab (opens the app on
   mobile). Soft shadow keeps the white glyph readable on light photos. */
.leadership__linkedin {
  position: absolute;
  top: clamp(12px, 1.3vw, 20px);
  right: clamp(12px, 1.3vw, 20px);
  z-index: 3;
  display: inline-flex;
  color: #fff;
  line-height: 0;
  transition: color var(--transition-normal, 0.25s ease), transform var(--transition-normal, 0.25s ease);
}
.leadership__linkedin:hover,
.leadership__linkedin:focus-visible {
  color: #0a66c2;                 /* LinkedIn blue */
  transform: scale(1.08);
}
.leadership__linkedin svg { display: block; width: clamp(20px, 2vw, 26px); height: auto; }
/* Name sits overlaid bottom-left ON the photo (like .ref-card/.media-team) —
   own bottom-fade scrim so it stays legible over any portrait. */
.leadership__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.75) 100%);
  border-radius: var(--radius-card);
  pointer-events: none;
}
.leadership__meta {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(14px, 1.8vw, 24px);
  text-align: left;
}
.leadership__name {
  margin: 0;
  /* Same typeface/weight as .agentur-hero__headline, just a bit smaller. */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(20px, 2.3vw, 36px);
  line-height: 1.15;
  color: var(--color-white);
}
.leadership__role {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1vw, 18px);
  color: var(--color-white);
  opacity: 0.7;
}

/* "Mehr über {name}" expandable — label + plus + hairline (per-card, independent
   toggles; JS just flips .is-open, height comes from the 0fr→1fr grid trick so
   no JS measuring is needed for the variable-length bio text). */
.leadership__more {
  margin-top: 22px;
}
.leadership__more-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}
.leadership__more-label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 20px); /* same size as .stat__label ("Agenturgründung") */
}
.leadership__more-plus {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transform-origin: 50% 50%;
  transition: color var(--transition-normal), transform var(--transition-normal);
}
.leadership__more-plus svg { display: block; }
.leadership__more:not(.is-open) .leadership__more-btn:hover {
  color: var(--color-green);
  border-color: var(--color-green);
}
.leadership__more:not(.is-open) .leadership__more-btn:hover .leadership__more-plus {
  transform: rotate(90deg);
}
.leadership__more.is-open .leadership__more-btn {
  color: var(--color-green);
  border-color: var(--color-green);
}
.leadership__more.is-open .leadership__more-plus {
  transform: rotate(45deg); /* + -> ×, a clear "click to close" */
}
.leadership__more-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.leadership__more.is-open .leadership__more-body {
  grid-template-rows: 1fr;
}
.leadership__more-body-inner {
  overflow: hidden;
  min-height: 0;
}
.leadership__more-bio {
  padding-top: 16px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 20px); /* same size as .stat__label ("Agenturgründung") */
  line-height: 1.6;
  color: var(--color-white);
  opacity: 0.85;
}
/* Additive "snapshot": a second photo tilts + pops onto the portrait's lower
   corner when the card's "Mehr über …" is expanded. It ADDS a photo on top of
   the (still fully visible) portrait — never a cross-fade/replace. Sits inside
   .leadership__photo (bottom-right); the name overlay is bottom-left, so they
   don't collide. Revealed via .is-bio-open (toggled in main.js). */
.leadership__snap {
  position: absolute;
  right: clamp(12px, 4.5%, 22px);
  bottom: clamp(12px, 4.5%, 22px);
  width: 52%;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  /* No border — it lifts off the portrait on a soft, even shadow: three
     stacked layers whose blur is larger than their offset, so the shadow
     wraps evenly around the tile (an elegant ambient lift) instead of reading
     as one hard drop shadow. Needs .leadership__photo overflow:visible. */
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.16),
    0 6px 22px rgba(0, 0, 0, 0.20),
    0 14px 44px rgba(0, 0, 0, 0.24);
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(14px) rotate(0deg) scale(0.62);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-soft),
              transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1); /* slight overshoot */
  z-index: 4; /* above the portrait overlay + name */
}
.leadership__snap-img {
  display: block;
  width: 100%;
  height: auto;
}
.leadership__card.is-bio-open .leadership__snap {
  opacity: 1;
  transform: translateY(0) rotate(-5deg) scale(1);
}
.leadership__more-bio p {
  margin: 0 0 14px; /* gap before the "Und sonst so:" paragraph */
}
.leadership__more-bio p:last-child {
  margin-bottom: 0;
}
.leadership__more-bio strong {
  font-weight: 400; /* not bold — just full-opacity for a subtle lead-in emphasis */
  opacity: 1;
}

/* ---------- team_mosaic: heading + subtext + photo collage ---------- */
.team-mosaic {
  padding-top: clamp(40px, 5vw, 96px);
  padding-bottom: clamp(52px, 6vw, 117px);
}
.team-mosaic__inner { padding-inline: clamp(20px, 5vw, 80px); }
.team-mosaic__subtext {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 24px);
  color: var(--color-white);
  opacity: 0.85;
}
.team-mosaic__grid {
  max-width: 1750px; /* reference container width */
  margin: clamp(36px, 4vw, 72px) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.7vw, 12px);
}
/* Justified row of 5 (matches the reference exactly — see team_mosaic.php).
   flex-grow = the tile's aspect ratio + flex-basis:0 makes every tile in the
   row land at the SAME height while the row fills edge-to-edge: width_i =
   grow_i/Σgrow * rowWidth; height_i = width_i/ar_i = rowWidth/Σgrow for every
   tile (ar_i cancels), so no hardcoded per-row pixel heights are needed. */
.team-mosaic__row {
  display: flex;
  gap: clamp(6px, 0.7vw, 12px);
}
.team-mosaic__tile {
  flex-grow: var(--grow, 1);
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  aspect-ratio: var(--ar, 1 / 1);
  border-radius: var(--radius-card); /* same token as .leadership__photo */
  overflow: hidden;
  background: #0d0d0d;
}
.team-mosaic__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mosaic tiles reveal as they scroll into view — no per-tile stagger delay. */
html.js .team-mosaic__tile[data-anim="fade"] { transition-delay: 0s; }

@media (max-width: 480px) {
  /* Below phone width, 5-across gets uncomfortably small — drop the strict
     equal-height justification and let each row wrap onto 2 lines, still in
     strict source order, each tile keeping its own crop. */
  .team-mosaic__row { flex-wrap: wrap; }
  .team-mosaic__tile { flex: 1 1 28%; aspect-ratio: var(--ar, 1 / 1); }
}

/* ---------- Agentur page — responsive ---------- */
@media (max-width: 1024px) {
  .leadership__grid { gap: clamp(14px, 2vw, 28px); }
  .team-mosaic__grid { columns: 3 200px; }
}
/* Below the 3D-logo desktop threshold (1024px, where the animation never runs):
   no logo screen and no scroll hint — the group photo simply sits at the top. */
@media (max-width: 1023.98px) {
  .logo3d-wrap { display: none; }             /* hides the (static) logo + scroll-hint mouse */
  .agentur-hero__cover {
    min-height: 0;                            /* drop the sticky "runway" */
    padding-top: 0;
    background: none;                         /* no slide-over gradient needed */
  }
  :is(.page-id-73, .parent-pageid-73) .agentur-hero {
    padding-top: clamp(128px, 34vw, 168px);  /* photo clears the floating nav pill */
  }
}
@media (max-width: 768px) {
  .agentur-hero { padding-top: clamp(128px, 34vw, 168px); } /* drop the group photo well clear of the floating nav pill */
  .agentur-hero__media { max-width: 100%; aspect-ratio: 4 / 5; } /* match home photo on phones */
  /* Stats stack one-per-row on phones → more room, so the numbers can grow. */
  .stats__row {
    flex-direction: column;
    align-items: center;
    gap: clamp(30px, 8vw, 48px);
  }
  .stat { min-width: 0; width: 100%; }
  .stat__num { font-size: clamp(56px, 17vw, 84px); }
  .stat__label { font-size: clamp(17px, 4.4vw, 22px); }
  .agentur-hero__br--d { display: none; } /* desktop-only break — wrap naturally on phones */
  .agentur-hero__headline {
    width: min(88%, 904px);
    font-size: clamp(24px, 6.4vw, 40px);
    bottom: clamp(70px, 16%, 190px); /* sits higher, mirrors the desktop raise */
  }
  .leadership__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 28px;
  }
  .team-mosaic__grid { columns: 2 140px; column-gap: 10px; }
  .team-mosaic__tile { margin-bottom: 10px; }
}

/* ============================================================
   Case study — reference detail page (e.g. /referenzen/vytal/)
   Template: template-parts/sections/case_study.php
   ============================================================ */
.case {
  padding-top: calc(var(--nav-height) + clamp(56px, 7vw, 120px)); /* text-only hero clears the fixed nav */
  padding-bottom: clamp(56px, 7vw, 128px);
}
.case--hasvideo { padding-top: 0; } /* video hero is full-bleed to the very top */
.case__inner { padding-inline: clamp(20px, 5vw, 80px); }
/* pull the content (starting with the 4 facts) up onto the hero's dark lower
   edge so the USPs sit higher — still legible (scrim is near-black there). */
.case--hasvideo .case__inner {
  position: relative;
  z-index: 3;
  margin-top: clamp(-120px, -8vw, -72px);
}

/* hero */
.case-hero { padding-inline: clamp(20px, 5vw, 80px); }
.case-hero__inner { max-width: 1040px; margin: 0 auto; text-align: center; }
.case-hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--color-white);
  perspective: 900px; /* depth for the [data-build] letter assemble */
}
/* the build-in wraps each word in an inline-block .bl-word; align them to the
   top so a wrapped multi-line title has no baseline-induced gap between lines */
.case-hero__title .bl-word,
.case-hero__title .bl { vertical-align: top; }
/* long client names shrink so the longest word fits the centred hero */
.case-hero__title--medlong { font-size: clamp(36px, 6vw, 88px); }
.case-hero__title--long    { font-size: clamp(30px, 5.2vw, 74px); }
.case-hero__title--xlong   { font-size: clamp(26px, 4.6vw, 64px); }
.case-hero__subtitle {
  margin: clamp(18px, 2.2vw, 34px) auto 0;
  max-width: 860px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(19px, 1.9vw, 28px); /* bumped — was a touch small */
  line-height: 1.5;
  color: var(--color-white);
  opacity: 0.92;
}
/* full-bleed video hero */
.case-hero.has-video {
  position: relative;
  min-height: clamp(560px, 82vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-inline: 0;
}
.case-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.case-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* darken for legibility + fade to near-black at the bottom so it blends into the page */
  background:
    radial-gradient(130% 105% at 50% 40%, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.58)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.30) 42%, rgba(0, 0, 0, 0.72) 76%, rgba(0, 0, 0, 0.98) 100%);
}
.case-hero.has-video .case-hero__inner {
  position: relative;
  z-index: 2;
  padding: calc(var(--nav-height) + clamp(24px, 4vw, 60px)) clamp(20px, 5vw, 60px) clamp(40px, 6vw, 96px);
}

/* facts row (Auftraggeber / Branche / …) */
.case-facts {
  list-style: none;
  margin: clamp(38px, 4.6vw, 76px) auto 0;
  padding: clamp(22px, 2.4vw, 34px) 0;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(22px, 4vw, 64px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.case-fact { display: flex; flex-direction: column; gap: 7px; text-align: center; }
.case-fact__label {
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.case-fact__value {
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 600;
  color: var(--color-white);
}

/* lead image — fits within the box in either orientation (portrait capped by
   height, landscape by width) so a tall hero shot doesn't blow up. */
.case-lead { margin: clamp(40px, 5vw, 90px) auto 0; max-width: 1120px; text-align: center; }
.case-lead__img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-card);
}

/* story blocks */
.case-block { margin: clamp(56px, 7vw, 120px) auto 0; max-width: 1240px; }
.case-block--text { max-width: 820px; text-align: center; }
.case-block--text .case-block__body { text-align: center; }
/* centered logo wall (e.g. partners & technologies) */
.case-block__logos {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(30px, 3.4vw, 58px) clamp(34px, 3.8vw, 66px);
  /* break out wider than the 820 text column so the BIGGER logos still form 2
     rows; centred on the column via a symmetric (negative) left margin */
  margin: clamp(40px, 4.4vw, 70px) 0 0;
  width: min(1120px, calc(100vw - 40px));
  margin-left: calc((100% - min(1120px, calc(100vw - 40px))) / 2);
}
.case-block__logos li { display: inline-flex; }
.case-block__logo {
  height: clamp(30px, 3.4vw, 52px);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  opacity: 1;
  transition: transform 0.32s var(--ease-soft, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.case-block__logo:hover { transform: scale(1.09); }
.case-block--split {
  display: grid;
  align-items: center; /* text + image centred to each other → balanced, no side sits higher/lower */
  gap: clamp(28px, 4vw, 72px);
}
/* give the IMAGE column the larger share (~56%) so landscape shots read big
   enough; portraits are height-capped so they stay put. */
.case-block--split.is-left  { grid-template-columns: 0.88fr 1.12fr; } /* image on the right */
.case-block--split.is-right { grid-template-columns: 1.12fr 0.88fr; } /* image on the left */
.case-block--split.is-right .case-block__text { order: 2; }   /* image on the left */
.case-block--split.is-right .case-block__media { order: 1; }
.case-block__heading {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.12;
  color: var(--color-white);
}
.case-block__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.62;
  color: var(--color-white);
  opacity: 0.86;
}
.case-block__body p { margin: 0 0 1em; }
.case-block__body p:last-child { margin-bottom: 0; }
/* bullet list (e.g. "Die Aufgaben") */
.case-block__subhead {
  margin: clamp(22px, 2.4vw, 34px) 0 clamp(12px, 1.2vw, 18px);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--color-white);
}
.case-block__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 13px);
}
.case-block__list li {
  position: relative;
  padding-left: 1.5em;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.5;
  color: var(--color-white);
  opacity: 0.88;
}
.case-block__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent, #2beb7c); /* brand-green bullet dot */
}
.case-block__media { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.4vw, 20px); }
/* fill the column width for landscape shots, but cap portraits to a moderate
   height so ALL blocks stay a similar size → consistent spacing/rhythm from one
   section to the next (a tall portrait no longer towers over a short landscape). */
.case-block__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(380px, 42vw, 560px);
  border-radius: var(--radius-card);
}
.case-block__caption {
  margin: 4px 0 0;
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
/* composite media — a cut-out (image2) standing in FRONT of image1 */
.case-block__media--composite { width: 100%; }
.case-block__stage { position: relative; display: block; width: 100%; }
.case-block__img--base {
  width: 100%;
  max-width: 100%;
  max-height: none;
  border-radius: var(--radius-card);
}
.case-block__overlay {
  position: absolute;
  bottom: 0;
  left: 3%;
  width: auto;
  max-width: 47%;
  height: auto;
  /* cap height so a TALL cut-out (e.g. portrait Lisa) can't tower above the
     board into the block above — she just stands a touch above it */
  max-height: 112%;
  z-index: 2; /* solid, standing IN FRONT of the board */
}
/* a black gradient over the LOWER part of the whole visual (board + her legs)
   so it fades into black — she stays solid, nothing looks see-through. */
.case-block__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, #000 8%, rgba(0, 0, 0, 0.85) 34%, rgba(0, 0, 0, 0) 100%);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  z-index: 3;
  pointer-events: none;
}

/* edge fade — the image dissolves into the black page on one edge */
.case-block__media[data-fade] { position: relative; }
.case-block__media[data-fade]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-card);
}
.case-block__media[data-fade="right"]::after  { background: linear-gradient(to right,  rgba(0,0,0,0) 30%, #000 92%); }
.case-block__media[data-fade="left"]::after   { background: linear-gradient(to left,   rgba(0,0,0,0) 30%, #000 92%); }
.case-block__media[data-fade="bottom"]::after { background: linear-gradient(to bottom, rgba(0,0,0,0) 38%, #000 95%); }
.case-block__media[data-fade="top"]::after    { background: linear-gradient(to top,    rgba(0,0,0,0) 38%, #000 95%); }
/* enlarge a small portrait image (e.g. a phone mock-up that reads too small) */
.case-block__media--big .case-block__img { max-height: clamp(460px, 54vw, 720px); }

/* group eyebrow ("Die Aufgaben") */
.case-eyebrow {
  margin: clamp(64px, 8vw, 130px) auto 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 52px);
  color: var(--color-white);
}
.case-eyebrow + .case-block { margin-top: clamp(24px, 2.8vw, 48px); } /* tighter after a group header */

/* testimonial — simple: a circular photo on top, an italic quote centred
   below it, with a clean name/role (no quote mark, no glow). */
.cs-quote {
  margin: clamp(80px, 9vw, 150px) auto 0;   /* a touch more air to the block above */
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 3vw, 40px);
}
.cs-quote--noimg { max-width: 720px; }
.cs-quote__photo {
  width: clamp(150px, 18vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #0d0d0d;
}
/* the source portrait is a wide shot with a black vignette baked in; zoom +
   focus so the baked-in black top/bottom falls outside the circle */
.cs-quote__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--q-pos, 50% 28%);
  transform: scale(var(--q-scale, 1));
  display: block;
}
.cs-quote__body { min-width: 0; }
.cs-quote__text {
  margin: 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--color-white);
}
.cs-quote__by { margin-top: clamp(16px, 1.8vw, 26px); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cs-quote__author { font-family: var(--font-sans); font-weight: 700; font-size: clamp(16px, 1.2vw, 19px); color: var(--color-white); }
.cs-quote__role { font-size: clamp(14px, 1vw, 16px); color: var(--color-accent, #2beb7c); }

/* cta to the live project */
.case-cta { margin: clamp(56px, 7vw, 120px) auto 0; text-align: center; }
.case-cta__label { margin: 0 0 clamp(22px, 2.6vw, 40px); font-size: clamp(16px, 1.3vw, 20px); color: var(--color-white); opacity: 0.85; }
.case-cta__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

@media (max-width: 768px) {
  .case-hero.has-video { min-height: clamp(440px, 74vh, 640px); }
  /* Below the header there is NO left/right on phones — a 2-col split makes the
     text endless and the image tiny. Stack everything, centred. (The is-left/
     is-right rules are higher-specificity, so they must be overridden too.) */
  .case-block--split,
  .case-block--split.is-left,
  .case-block--split.is-right { grid-template-columns: 1fr; gap: clamp(40px, 11vw, 60px); } /* more room text↔visual within a block */
  .case-block--split.is-right .case-block__text,
  .case-block--split.is-right .case-block__media { order: 0; } /* text above image */
  .case-block { text-align: center; }
  .case-block__body,
  .case-block__subhead { text-align: center; }
  .case-block__list { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  /* clearly bigger gaps between sections on phones (client: deutlich größer) */
  .case-block,
  .cs-quote,
  .case-cta { margin-top: clamp(120px, 30vw, 180px); }
  .case-eyebrow { margin-top: clamp(132px, 34vw, 195px); }
  .case-block__heading { margin-bottom: clamp(16px, 3.5vw, 24px); }
  .case-facts { gap: 18px 30px; }
  .cs-quote { gap: clamp(30px, 8vw, 44px); } /* photo↔text a touch more too */
}

/* ------------------------------------------------------------------
 * /website-agentur/ landing page (body.caf-landing)
 * ------------------------------------------------------------------ */
/* At the top the bare header spans the full width — logo hard left, CTA hard
 * right, no glass pill (it stays opacity:0). On scroll the inner max-width
 * shrinks so both elements "fahren zusammen" to the centre and the normal glass
 * nav pill fades in (same design as the rest of the site), sticky. */
/* Logo + CTA sit together, centred, with a wide gap at the top; on scroll the gap
 * tightens and the glass nav pill fades in — so the transform to the sticky nav
 * stays clearly visible. (Inner keeps the base width:auto → centred by .container.) */
/* Compact centred glass nav (logo + CTA) shown from the very top — same look as
 * the site's scrolled sticky nav, so it's visible from the beginning. */
.caf-landing .site-header__inner {
  justify-content: center;
  gap: clamp(18px, 3vw, 48px);
  max-width: min(92vw, 560px);
  min-height: 72px;
}
/* Drop the huge resting margin (--nav-extra) that otherwise flings the CTA to the edge. */
.caf-landing .site-header__logo { margin-right: 0; }
/* Logo hover "Blitz/Glanz": clipped to the LOGO SHAPE (mask of the SVG), not a
 * rectangle. Two layers make it read as a real flash, not a flat gradient wipe:
 *   1) ::before — a SHARP metallic streak (thin grey shoulders + hot white core)
 *      masked to the glyphs, that whips across;
 *   2) the logo img BLOOMS a white glow (drop-shadow, which hugs the SVG alpha)
 *      as the streak passes — light actually spills onto the dark header.
 * Both LOOP while hovered (like the CTA keeps pulsing), with a rest gap between
 * glints so it stays dezent. Site-wide, gated by the `--glint` class (only added
 * when an SVG logo exists); mask URL from the inline --caf-logo-mask. */
.site-header__logo--glint { position: relative; }
.site-header__logo--glint::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg,
      transparent 44%,
      rgba(150, 158, 172, 0.28) 47.5%,
      rgba(255, 255, 255, 0.98) 50%,
      rgba(150, 158, 172, 0.28) 52.5%,
      transparent 56%);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 135% 0;            /* rest: streak parked off-screen */
  -webkit-mask: var(--caf-logo-mask) no-repeat center / 100% 100%;
          mask: var(--caf-logo-mask) no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 1;                             /* glints over the logo glyphs */
}
.site-header__logo--glint:hover::before { animation: caf-logo-glint 1.5s ease-out infinite; }
.site-header__logo--glint:hover img     { animation: caf-logo-bloom 1.5s ease-out infinite; }
/* streak whips across in the first ~28%, then parks off-screen until the next loop */
@keyframes caf-logo-glint {
  0%   { background-position: 135% 0; }
  28%  { background-position: -35% 0; }
  100% { background-position: -35% 0; }
}
/* white light bloom, peaking as the streak crosses the middle of the wordmark */
@keyframes caf-logo-bloom {
  0%, 6%  { filter: none; }
  16%     { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.42)) drop-shadow(0 0 13px rgba(255, 255, 255, 0.25)); }
  28%     { filter: none; }
  100%    { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__logo--glint:hover::before,
  .site-header__logo--glint:hover img { animation: none; }
}
/* Glass pill always visible (not just on scroll). */
.caf-landing .site-header__inner::before { opacity: 1; }
/* A little breathing room from the browser top edge above the pill. */
.caf-landing .site-header { padding-top: 18px; }

/* Landing CTA: normal size + case "Kostenfreie Beratung", no icon. */

/* Leave a black band above the photo so the sticky nav sits on black (not over
 * the photo): room for the pill + a gap down to the group photo. */
.caf-landing .media-team {
  padding-top: clamp(116px, 14vh, 150px);
}
/* Lift the "DIE RELAUNCH PROFIS …" headline up toward the play button. */
.caf-landing .media-team__caption {
  bottom: 24%;
}
/* Hero group photo/video fades in on load like the rest of the page. It's above
 * the fold, so the scroll-reveal observer sets is-visible before first paint and
 * the element pops in with no transition — use a load animation instead. */
.caf-landing .media-team__figure[data-anim] {
  opacity: 1;
  transform: none;
  transition: none;
  animation: caf-hero-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.caf-landing .media-team__figure [data-anim] { opacity: 1; transform: none; } /* headline rides the figure fade */
@keyframes caf-hero-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .caf-landing .media-team__figure[data-anim] { animation: none; }
}

/* Website-screenshot slider (references, landing page). Exactly one screenshot
 * is visible, centred; the viewport is one slide wide so neighbours don't peek. */
.ref-slider { padding: clamp(40px, 5vw, 90px) 0; }
.ref-slider__heading { text-align: center; margin: 0 0 clamp(28px, 4vw, 56px); }
.ref-slider__viewport {
  position: relative;
  width: min(990px, 94vw);   /* another ~15% larger */
  margin-inline: auto;
}
.ref-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  list-style: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ref-slider__track::-webkit-scrollbar { display: none; }
.ref-slider__slide {
  flex: 0 0 100%;   /* one slide fills the viewport → only one visible */
  width: 100%;
  scroll-snap-align: center;
}
.ref-slider__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 15px);
}
/* Prev/next arrows OUTSIDE the image, in the black gutter: dark chevron on a
 * round WHITE disc (so they never get lost), disc turns #2BEB7C on hover.
 * Hidden on narrow screens (no gutter room → swipe/drag). */
.ref-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 3.2vw, 54px);
  height: clamp(44px, 3.2vw, 54px);
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease-soft);
}
.ref-slider__nav:hover { background: #2BEB7C; color: #111; transform: translateY(-50%) scale(1.08); }
.ref-slider__nav--prev { left: -92px; }
.ref-slider__nav--next { right: -92px; }
@media (max-width: 1200px) { .ref-slider__nav { display: none; } }
/* Dot pagination under the visuals: active = filled white, others = outline. */
.ref-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(22px, 2.2vw, 36px);
}
.ref-slider__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1.5px solid #fff;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ref-slider__dot.is-active { background: #fff; }
.ref-slider__dot:hover { transform: scale(1.25); }
/* Customer name ABOVE each slide's visual — large + green, with space to the
 * intro above and to the image below. */
.ref-slider__caption {
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  text-align: center;
  color: #2BEB7C;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 32px);
}
.ref-slider__track { cursor: grab; }
.ref-slider__track.is-grabbing { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.ref-slider__track.is-grabbing .ref-slider__img { pointer-events: none; }
/* Intro line under the slider heading. */
.ref-slider__intro {
  max-width: 760px;
  margin: clamp(-8px, -0.5vw, 0px) auto clamp(44px, 5.5vw, 80px);
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.6;
}

/* Hero headline: two lines (manual break), balanced + homogeneous on the photo. */
.caf-landing .media-team__title {
  font-size: clamp(24px, 5.6vw, 60px);
  line-height: 1.08;
  max-width: min(94%, 960px);
  margin-inline: auto;
  text-wrap: normal;
}

/* "IN BESTER GESELLSCHAFT" — one line, with generous space down to the logos. */
.logo-wall__intro {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(56px, 8vw, 112px);
}
.logo-wall__heading {
  white-space: nowrap;
  font-size: clamp(18px, 5vw, 46px);
}
.logo-wall__text {
  margin: 16px auto 0;
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.6;
  color: var(--color-white);
}

/* "WARUM CHRIS AND FRIENDS?" — more breathing room above the section, white
 * heading + text, with space between the headline and the paragraph. */
.caf-landing .svc-rows { margin-top: clamp(48px, 7vw, 110px); }
.caf-landing .svc-rows__intro,
.caf-landing .svc-rows__intro p { color: var(--color-white); }
.caf-landing .svc-rows__intro h2 {
  color: var(--color-white);
  margin: 0 0 clamp(16px, 1.8vw, 28px);
}
.svc-usps__intro, .svc-usps .svc-rows__intro { text-align: center; }

/* The 6 USPs as a 3-column card grid that fades in card-by-card (--i stagger,
 * left→right / top→bottom). */
.svc-usps__grid {
  list-style: none;
  margin: clamp(30px, 4vw, 60px) auto 0;
  max-width: 1040px;                 /* not full width */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
}
.usp-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(20px, 1.8vw, 28px);
  text-align: center;                /* everything centred */
}
.usp-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #2BEB7C;                    /* headline green, check in front */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 22px);
}
.usp-card__icon { display: inline-flex; flex: none; color: #2BEB7C; }
.usp-card__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.55;
}
/* smaller WARUM intro paragraph */
.caf-landing .svc-rows__intro p {
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.55;
}
/* Tighten the (much too large) gap between the USP grid and "Das sagen unsere
 * Kunden" — both sides carried big vertical padding. */
.caf-landing .svc-usps { padding-bottom: clamp(24px, 3.5vw, 56px); }
.caf-landing .lr-reviews { padding-top: clamp(24px, 3.5vw, 56px); }

/* Landing-page contact subline under the swapped "JETZT KONTAKT AUFNEHMEN". */
.contact__subline {
  max-width: 720px;
  margin: clamp(12px, 1.4vw, 20px) auto 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.35vw, 23px);
  line-height: 1.5;
}
html.js .usp-card[data-anim="fade"] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-soft, cubic-bezier(0.22, 0.61, 0.36, 1));
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .usp-card[data-anim="fade"].is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) { .svc-usps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-usps__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html.js .usp-card[data-anim="fade"] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Cookie banner — global, slides up from the bottom ~10s after load.
   Dark glass like the nav pill; slim (one line) and deliberately muted so it
   is present without demanding attention. main.js initCookieBanner drives
   show + consent (localStorage). Off-screen + aria-hidden at rest → no flash.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  transform: translateY(115%);            /* parked below the viewport */
  transition: transform 0.55s var(--ease-soft);
  /* dark glass, same recipe as the nav pill */
  background: rgba(6, 6, 8, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 9px clamp(16px, 4vw, 28px);
  text-align: center;
  font-family: var(--font-sans);
  font-size: clamp(12.5px, 0.95vw, 14px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.68);
}
.cookie-banner__lead { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cookie-banner__icon { display: inline-flex; }
.cookie-banner__icon svg { display: block; }
.cookie-banner__title { color: #fff; font-weight: 400; }   /* plain white, not bold */
.cookie-banner__text { color: rgba(255, 255, 255, 0.6); }
.cookie-banner__policy {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.cookie-banner__policy:hover { color: rgba(255, 255, 255, 0.92); }
.cookie-banner__actions { display: inline-flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.cookie-banner__btn {
  margin: 0;
  padding: 2px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
/* Decline is as easy/visible as accept (one click, same size) — just quieter. */
/* "ablehnen": regular weight, same look as the Cookie-Regeln link (not bold). */
.cookie-banner__decline { font-weight: 400; color: rgba(255, 255, 255, 0.6); }
.cookie-banner__decline:hover { color: rgba(255, 255, 255, 0.92); }
.cookie-banner__accept { color: var(--color-lime); }   /* quiet brand affordance */
.cookie-banner__accept:hover { color: var(--color-green); }
/* Mobile: drop the backdrop blur (heavy per-frame GPU cost at phone DPR) —
   a more opaque fill reads the same. Matches the nav pill's mobile fallback. */
@media (max-width: 1024px) {
  .cookie-banner {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(6, 6, 8, 0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }   /* appears in place, no slide */
}


/* Consent text: the word "Datenschutzerklärung" links to the policy (new tab)
   but must NOT be recognizable as a link — inherit colour, no underline, no
   pointer cursor, no hover/focus change. Just clickable. */
.contact-form__consent-text .consent-link,
.contact-form__consent-text .consent-link:hover,
.contact-form__consent-text .consent-link:focus,
.contact-form__consent-text .consent-link:active {
  color: inherit;
  text-decoration: none;
  cursor: inherit;
  background: none;
  border: 0;
}