/* Customer-approved A2 design enhancement layer.
   The source HTML remains immutable in source/customer-master.html. */

:root {
  --contact-radius: 20px;
  --contact-ease: cubic-bezier(.2,.72,.2,1);
  /* Accessible replacement for the customer's very pale secondary token
     (6.3.1: darker, ≥ 4.5:1 also on the blue-white surfaces). */
  --soft: #53667a;
}

/* `overflow-x:hidden` on the body creates a second scroll container in
   Chromium and disables the intended sticky intro. `clip` prevents horizontal
   spill without changing the page's scrolling element. */
body { overflow-x: clip; }

html.js .rv { opacity: 0; transform: translate3d(0, 12px, 0); }
html.js .rv.in { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1 !important; transform: none !important; }
html:not(.js) header.top { transform: none !important; }
html:not(.js) .det,
html:not(.js) .faq .fa { max-height: none !important; opacity: 1 !important; }
html:not(.js) .more,
html:not(.js) .hero-motion-toggle { display: none !important; }

/* A usable compact jump navigation remains available when JavaScript is
   unavailable; the inert hamburger is intentionally removed in that mode. */
@media (max-width: 1220px) {
  html:not(.js) header.top .burger { display: none !important; }
  html:not(.js) header.top .mnav {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 6px 10px 8px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  html:not(.js) header.top .mnav a {
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    padding: 6px 10px;
    scroll-snap-align: start;
  }
}

.introwrap {
  /* 6.3.1: half the former scroll distance (460svh / min 3000px). The sheet
     below overlaps the last part of the intro (--front-sheet-overlap), so the
     content arrives while the hero leaves. Native scroll is never captured. */
  height: 256svh;
  min-height: 1600px;
  background: #07111b;
}

/* 6.3.1 – the site header is the top edge of the content sheet that rises
   over the hero. It keeps its sticky behaviour, but it can no longer float in
   the middle of a section: nothing of <main> lies above it until it docks. */
.cta2v6-front {
  --front-sheet-overlap: 44svh;
  --front-sheet-lip: 28px;
}

.intro-sticky {
  --hero-progress: 0;
  --hero-phase: 0;
  --people-phase: 0;
  --hero-exit: 0;
  --pointer-x-shift: 0px;
  --pointer-y-shift: 0px;
  --pointer-person-x: 0px;
  --pointer-person-y: 0px;
  --pointer-rotate-x: 0deg;
  --pointer-rotate-y: 0deg;
  --scan-y: 0%;
  --scan-opacity: .46;
  height: 100svh;
  min-height: 620px;
  isolation: isolate;
  perspective: 1100px;
  background:
    radial-gradient(75% 90% at 77% 47%, rgba(46,111,176,.3), transparent 66%),
    linear-gradient(145deg, #08131f, #0b1a29 52%, #07111b);
}

.intro-poster,
.intro-media,
.hero-depth-grid,
.hero-scan,
.hero-webgl,
.intro-veil,
.intro-sticky > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro-poster {
  z-index: 0;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}
.intro-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
}

.intro-media {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  filter: none;
  transform: none;
}

.intro-sticky.hero-video-ready .intro-poster {
  opacity: 0;
  visibility: hidden;
}

.intro-sticky.hero-video-ready .intro-media {
  opacity: 1;
  visibility: visible;
}

.hero-curtain {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #07111b;
  color: #dce9f6;
  pointer-events: none;
  animation: contact-curtain 1.34s var(--contact-ease) .12s both;
}

.hero-curtain span {
  font: 800 clamp(23px, 4vw, 48px)/1 var(--disp);
  letter-spacing: .2em;
  text-transform: uppercase;
  animation: contact-curtain-word 1.05s var(--contact-ease) both;
}

.hero-curtain i {
  position: absolute;
  left: 50%;
  top: calc(50% + 42px);
  width: min(330px, 62vw);
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, transparent, #7fb6ea 18%, #d7e9f9 50%, #7fb6ea 82%, transparent);
  box-shadow: 0 0 22px rgba(117,174,228,.7);
  animation: contact-curtain-line 1s var(--contact-ease) .08s both;
}

@keyframes contact-curtain {
  0%, 58% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

@keyframes contact-curtain-word {
  0% { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(9px); }
  35%, 70% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: translateY(-10px) scale(1.03); }
}

@keyframes contact-curtain-line {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0); }
  48%, 74% { opacity: 1; transform: translateX(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1); }
}

.hero-depth-grid {
  z-index: 2;
  inset: 9% 1% auto auto;
  width: min(62vw, 860px);
  height: min(82vw, 860px);
  border-radius: 50%;
  background-image:
    linear-gradient(rgba(121,178,229,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121,178,229,.12) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle, #000 0 42%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0 42%, transparent 72%);
  opacity: .16;
  transform-origin: 66% 48%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.hero-orbit {
  position: absolute;
  z-index: 3;
  top: 17%;
  right: 5%;
  width: min(47vw, 650px);
  aspect-ratio: 1;
  border: 1px solid rgba(138,192,239,.28);
  border-radius: 50%;
  box-shadow: inset 0 0 48px rgba(67,135,198,.07), 0 0 32px rgba(67,135,198,.08);
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.hero-orbit::before,
.hero-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hero-orbit::before {
  inset: 11%;
  border: 1px dashed rgba(173,211,244,.28);
}

.hero-orbit::after {
  top: 4%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #b9dcfb;
  box-shadow: 0 0 20px #6da9de;
}

.hero-orbit-b {
  top: 24%;
  right: 12%;
  width: min(34vw, 470px);
  border-color: rgba(124,176,224,.18);
}

.hero-scan {
  z-index: 5;
  top: var(--scan-y);
  bottom: auto;
  height: 1px;
  opacity: var(--scan-opacity);
  background: linear-gradient(90deg, transparent 8%, rgba(124,184,237,.1) 24%, rgba(187,220,248,.72) 68%, transparent 94%);
  box-shadow: 0 0 18px rgba(111,168,222,.28);
  will-change: top, opacity;
}

.hero-webgl {
  z-index: 2;
  pointer-events: none;
  opacity: .36;
  -webkit-mask-image: radial-gradient(circle at 68% 43%, #000 0 38%, transparent 72%);
  mask-image: radial-gradient(circle at 68% 43%, #000 0 38%, transparent 72%);
  transform-origin: 70% 45%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.hero-webgl canvas { width: 100%; height: 100%; display: block; }
.hero-webgl.webgl-fallback::before {
  content: "";
  position: absolute;
  right: 10%;
  top: 18%;
  width: min(43vw, 580px);
  aspect-ratio: 1;
  border: 1px solid rgba(138,192,239,.22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,144,207,.12), transparent 68%);
}
#cvGlobe { display: none; }
#cvFx { z-index: 3; opacity: .23; mix-blend-mode: screen; }

.intro-veil {
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(4,11,18,.91) 0%, rgba(4,11,18,.76) 37%, rgba(4,11,18,.34) 62%, rgba(4,11,18,.13) 82%, rgba(4,11,18,.25) 100%),
    linear-gradient(180deg, rgba(5,13,22,.3), rgba(5,13,22,.06) 46%, rgba(5,13,22,.74));
}

.phx {
  z-index: 8;
  left: clamp(34px, 4.5vw, 86px);
  top: clamp(172px, 27svh, 292px);
  width: clamp(152px, 14vw, 230px);
  transform: none;
  transform-origin: left center;
  transform-style: flat;
  will-change: transform, opacity;
}

.phx .float {
  animation: none;
  transform: translate3d(var(--pointer-x-shift), var(--pointer-y-shift), 0)
    rotateX(var(--pointer-rotate-x)) rotateY(var(--pointer-rotate-y));
  transform-style: flat;
  transition: transform .18s ease-out;
}
.phx .shine::after { animation-duration: 8s; opacity: .72; }

.intro-ui {
  z-index: 9;
  inset: auto auto clamp(66px, 9svh, 104px) clamp(36px, 5vw, 80px);
  width: min(52vw, 720px);
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  text-align: left;
  transform: none;
  transform-origin: left center;
  transform-style: flat;
  will-change: transform, opacity;
}

.intro-ui > * { transform-style: flat; }

.intro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: #dce9f6;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.intro-kicker::before {
  content: "";
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, #77aee2, transparent);
}

.intro-ui h1 {
  max-width: 100%;
  font-size: clamp(50px, 4.1vw, 74px);
  line-height: .96;
  letter-spacing: -.018em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: nowrap;
  /* Same shadow in every intro phase (formerly switched at the focus hold). */
  text-shadow: 0 4px 28px rgba(0,0,0,.64);
}

.intro-ui h1 .chrome {
  display: block;
  white-space: nowrap;
  background: none;
  color: #92c5f3;
  -webkit-text-fill-color: currentColor;
}
.intro-ui .claim {
  max-width: 610px;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: #f4f8fc;
  text-shadow: 0 3px 22px rgba(0,0,0,.72);
}
.intro-ui .icta { margin-top: 24px; }
.intro-ui .icta { justify-content: flex-start; }

.intro-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 9px;
  margin-top: 20px;
  transition: opacity .25s ease;
}

.intro-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(207,226,245,.25);
  border-radius: 999px;
  background: rgba(7,17,27,.42);
  color: #dce9f6;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: none;
}

.intro-proof span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #6fa8de;
  box-shadow: 0 0 12px rgba(111,168,222,.8);
}

.hero-persons {
  position: absolute;
  z-index: 6;
  right: max(1.8vw, 22px);
  bottom: 0;
  width: min(36vw, 720px);
  height: min(88svh, 950px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(8vw, 12%, 0) scale(.94);
  transform-origin: right bottom;
  will-change: transform, opacity;
}

.hero-persons::before {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -10%;
  width: 110%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,111,176,.28), transparent 66%);
  filter: blur(18px);
}

.hero-persons img {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  filter: var(--persons-grade);
  transform: translate3d(var(--pointer-person-x), var(--pointer-person-y), 0);
  transition: transform .2s ease-out;
}

.intro-sticky.hero-focus-hold .phx,
.intro-sticky.hero-focus-hold .intro-ui,
.intro-sticky.hero-focus-hold .hero-persons {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  will-change: auto;
}

.intro-sticky.hero-focus-hold .intro-ui > *,
.intro-sticky.hero-focus-hold .intro-ui h1,
.intro-sticky.hero-focus-hold .intro-ui h1 .chrome,
.intro-sticky.hero-focus-hold .intro-ui .claim {
  opacity: 1 !important;
  filter: none !important;
}

.intro-sticky.hero-focus-hold .phx .float {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.intro-sticky.hero-focus-hold .hero-persons img {
  transform: none !important;
  /* 6.3.2: die Farbangleichung an die Szene gilt in jeder Phase gleich. */
  filter: var(--persons-grade) !important;
  transition: none !important;
}
.intro-sticky.hero-focus-hold .hero-persons-tone {
  transform: none !important;
  transition: none !important;
}

.hero-stage-meta {
  position: absolute;
  z-index: 10;
  top: 50%;
  right: clamp(18px, 2.8vw, 46px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(220,233,246,.88);
  font: 800 12px/1 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  transition: opacity .2s ease;
}

.hero-stage-no {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgba(220,233,246,.3);
  border-radius: 50%;
  color: #fff;
  writing-mode: horizontal-tb;
  backdrop-filter: blur(6px);
}

.scrollcue { z-index: 9; bottom: 18px; gap: 6px; }
.hero-motion-toggle {
  position: absolute;
  z-index: 14;
  right: clamp(14px, 2.1vw, 30px);
  bottom: clamp(15px, 2vw, 26px);
  min-height: 44px;
  padding: 10px 14px 10px 36px;
  border: 1px solid rgba(220,233,246,.3);
  border-radius: 999px;
  background: rgba(7,17,27,.58);
  color: #eef6fd;
  font: 750 13px/1 var(--body);
  letter-spacing: .03em;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.hero-motion-toggle::before,
.hero-motion-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
}
.hero-motion-toggle::before { left: 17px; }
.hero-motion-toggle::after { left: 23px; }
.hero-motion-toggle[aria-pressed="true"]::before {
  left: 18px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  border-radius: 0;
  background: transparent;
}
.hero-motion-toggle[aria-pressed="true"]::after { display: none; }
.hero-motion-toggle:hover { border-color: rgba(220,233,246,.64); background: rgba(7,17,27,.78); }
html.hero-motion-paused .phx .shine::after,
html.hero-motion-paused .scrollcue .mouse::after,
html.hero-motion-paused .navtel .pulse::after,
html.hero-motion-paused .map .ring {
  animation-play-state: paused !important;
}
.scroll-progress {
  order: -1;
  width: min(220px, 46vw);
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.19);
}
.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--hero-progress));
  transform-origin: left;
  background: linear-gradient(90deg, #6fa8de, #f3f8fc);
}

/* The sheet starts with the header (see .cta2v6-front .cta2v6-header), so
   <main> itself follows directly below it without an own overlap or radius. */
main {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.cta2v6-front .cta2v6-header {
  margin-top: calc(-1 * var(--front-sheet-overlap, 0px));
  /* Opaque while it is the sheet edge over the dark hero; translucent again
     once docked (class set by the front-page script). */
  background-color: var(--cta2-surface, #edf3f8);
}
.cta2v6-front .cta2v6-header::before {
  content: "";
  position: absolute;
  right: 0;
  /* 1px into the header: no hairline seam at fractional scroll positions. */
  bottom: calc(100% - 1px);
  left: 0;
  height: calc(var(--front-sheet-lip, 28px) + 1px);
  border-radius: var(--front-sheet-lip, 28px) var(--front-sheet-lip, 28px) 0 0;
  background: var(--cta2-surface, #edf3f8);
  box-shadow: 0 -18px 60px rgba(3, 10, 17, .38);
  /* Shadow only above the lip, never on the header below it. */
  clip-path: inset(-160px 0 0 0);
  pointer-events: none;
}
.cta2v6-front .cta2v6-header.is-docked {
  background-color: var(--cta2-header-bg, rgba(237, 243, 248, .94));
}

section { padding: clamp(68px, 7vw, 94px) 0; }
.profile-intro { max-width: 820px; margin-bottom: 28px; }
.profile-intro p { margin: 9px 0 0; color: #38495b; font-size: clamp(16px, 2vw, 19px); line-height: 1.65; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi .n { font-size: clamp(24px, 3.2vw, 38px); }

/* Full-frame system for portraits, proof media and the viewer. Service thumbnails
   intentionally override it below with focus-aware cover; their viewer stays uncropped. */
.media-frame,
.br-media,
.wide-proof,
.recruit-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #dfe9f4;
}

.media-backdrop,
.br-media > span,
.wide-proof-backdrop,
.recruit-media > span {
  position: absolute;
  inset: -20px;
  background-image: var(--media);
  background-position: center;
  background-size: cover;
  filter: blur(18px) saturate(.72) brightness(.8);
  transform: scale(1.08);
  opacity: .42;
}

.media-frame img,
.br-media img,
.wide-proof img,
.recruit-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.svc {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  min-width: 0;
  padding: 0;
  border-radius: var(--contact-radius);
  box-shadow: 0 10px 26px rgba(24,38,52,.075);
}

.card::before {
  inset: 0 0 auto;
  z-index: 4;
  width: auto;
  height: 3px;
  transform: none;
}

.card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #dfe9f4;
  cursor: zoom-in;
  text-align: left;
}

.card-media .media-frame { display: block; width: 100%; height: 100%; }
.card-media .media-backdrop { display: none; }
.card-media img {
  object-fit: cover;
  object-position: var(--service-focus-d, 50% 50%);
}
.card-media::after {
  content: "Vollständig ansehen";
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(7,17,27,.7);
  color: #fff;
  font: 700 12px/1 var(--body);
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
}

.card-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.card-body .ic { margin-bottom: 13px; }
.card-body h3 { font-size: 18px; }
.card-body > p { min-height: 62px; }

.card-facts {
  margin: 14px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.card-facts li {
  position: relative;
  padding: 3px 0 3px 18px;
  color: #38495b;
  font-size: 12.75px;
  line-height: 1.45;
}

.card-facts li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 12px;
}
.card .card-actions .more { margin-top: 0; padding: 0; min-height: 44px; }
.card-route {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.card-route:hover { color: var(--blue); text-decoration: underline; }
.card.open .det { max-height: var(--detail-height, 360px); }

.brs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.br { padding: 0 0 22px; }
.br-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  appearance: none;
}
.br-media > span { display: none; }
.br-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--branch-focus-d, 50% 50%);
}
.br h3, .br p { margin-left: 22px; margin-right: 22px; }
.br h3 { margin-top: 20px; }

.wide-proof {
  display: grid;
  min-height: 420px;
  margin: 0 0 42px;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--sh-md);
  cursor: zoom-in;
}

.wide-proof img { max-height: 580px; }
.wide-proof figcaption {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 15px;
  max-width: min(420px, calc(100% - 32px));
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(7,17,27,.75);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  backdrop-filter: blur(8px);
}

.media-open:focus-visible,
.wide-proof:focus-visible {
  outline: 3px solid #2e6fb0;
  outline-offset: 4px;
}

.team {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tm {
  min-width: 0;
}
.tm > div:last-child {
  min-width: 0;
}
.tm span {
  overflow-wrap: break-word;
  /* 6.3.1 – roles never hyphenate ("Einsatzlei-ter"); they wrap at spaces. */
  -webkit-hyphens: manual;
  hyphens: manual;
}
.tm .av {
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  flex: 0 0 64px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--blue-wash);
  border: 2px solid rgba(46,111,176,.18);
  box-shadow: 0 8px 20px rgba(19,45,70,.12);
  isolation: isolate;
  contain: paint;
}
.tm .av img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

@media (max-width: 600px) {
  .team { grid-template-columns: minmax(0, 1fr); }
}

.certificate-proof {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(300px, 1.18fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
  margin-bottom: 34px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff, #edf4fb);
  box-shadow: var(--sh-md);
}
.certificate-proof h3 { margin: 9px 0 9px; } /* size: 6.3.1 block below */
.certificate-proof p { max-width: 570px; color: var(--mut); line-height: 1.65; }
.proof-document {
  display: block;
  width: 100%;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sh-sm);
  cursor: zoom-in;
}
.proof-document img { display: block; width: 100%; max-height: 390px; object-fit: contain; }
.secondary-proof { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 14px; margin-top: 18px; text-align: left; }
.secondary-proof img { height: 90px; }
.secondary-proof span { color: var(--blue-deep); font-weight: 800; }

.operational-cases .ref { min-height: 220px; }
.operational-cases .ref > b { font-size: 18px; }
.case-no { color: var(--blue); font-family: var(--disp); font-size: 28px; font-weight: 800; }

.recruit {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(340px, 1.18fr);
  align-items: center;
}
.recruit-media {
  grid-row: span 2;
  aspect-ratio: 16 / 9;
  margin: -20px 4px -20px -20px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 16px;
}
.recruit-media > span { display: none; }
.recruit-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.recruit > div:not(.gridd) { min-width: 0; }
.recruit > .btn { justify-self: start; }

/* WordPress global heading colors must never bleed into the blue career panel. */
body #karriere .recruit {
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(7,25,42,.06) 0 38%, rgba(7,25,42,.36) 58% 100%),
    radial-gradient(700px 300px at 14% 10%, rgba(111,168,222,.20), transparent 60%),
    linear-gradient(120deg, #21496f, #2e6fb0);
}
body #karriere .recruit .gridd { z-index: 0; opacity: .35; pointer-events: none; }
body #karriere .recruit > :not(.gridd) { position: relative; z-index: 1; }
body #karriere .recruit h2 {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(4, 17, 29, .34);
}
body #karriere .recruit p { color: #f1f7fd !important; }
body #karriere .rb,
body #karriere .bchip {
  color: #fff;
  border-color: #d8eafb;
  background: rgba(7,25,42,.56);
}
body #karriere .recruit .btn-p { color: #173a5b; background: #f8fbff; }
body #karriere .recruit .btn-p:hover { color: #12304b; background: #eaf2fb; }
body #karriere .recruit .btn-p:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #173a5b;
}

@media (max-width: 980px) {
  body #karriere .recruit {
    background:
      linear-gradient(180deg, rgba(7,25,42,.04) 0 42%, rgba(7,25,42,.36) 58% 100%),
      radial-gradient(700px 300px at 50% 8%, rgba(111,168,222,.20), transparent 60%),
      linear-gradient(120deg, #21496f, #2e6fb0);
  }
}

@media (max-width: 700px) {
  .card-media img { object-position: var(--service-focus-m, var(--service-focus-d, 50% 50%)); }
  .br-media img { object-position: var(--branch-focus-m, var(--branch-focus-d, 50% 50%)); }
}

.faq button.fq { min-height: 54px; }
.refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.leadbox .leadform { align-items: stretch; }

.form-preview-note {
  margin: 13px 0 0;
  padding: 11px 13px;
  border: 1px solid #c8d9ea;
  border-radius: 10px;
  background: var(--blue-wash);
  color: var(--blue-deep);
  font-size: 12.5px;
  line-height: 1.5;
}

.contact-fallback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px clamp(24px, 5vw, 68px);
  align-items: end;
  margin-top: 24px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid #bfd0e1;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 18%, rgba(111,168,222,.18), transparent 34%),
    #fff;
  box-shadow: var(--sh-sm);
}
.contact-fallback .ey { grid-column: 1 / -1; }
.contact-fallback h3 { margin: 0; font-family: var(--disp); font-size: clamp(24px, 3vw, 36px); line-height: 1.05; }
.contact-fallback p { max-width: 64ch; margin: 8px 0 0; color: var(--mut); }
.contact-fallback-actions { grid-column: 2; grid-row: 2 / span 2; display: grid; gap: 10px; min-width: 220px; }
.contact-fallback-actions .btn { width: 100%; justify-content: center; }

.form-preview-banner {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid #a9c5df;
  border-radius: 10px;
  background: #e8f1fa;
  color: #173f65;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}

.planning-points {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.planning-points li {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.cform .ds a {
  color: var(--blue-deep);
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.cform input:focus-visible,
.cform select:focus-visible,
.cform textarea:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
}

.job a,
.nap a,
#footer .cols a,
#footer nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

/* Keep every footer destination visually scannable at every viewport. The
   touch-target enhancement above must not collapse adjacent links inline. */
#footer .cols > div:not(:first-child) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 2px;
}

#footer .cols > div:not(:first-child) > a {
  width: 100%;
  margin: 0 !important;
}

.soc {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.cform .ds {
  min-height: 44px;
  align-items: center;
}

.cform .ds input {
  min-width: 24px;
  min-height: 24px;
}

.media-viewer {
  width: min(94vw, 1320px);
  max-width: none;
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #07111b;
  color: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.media-viewer::backdrop { background: rgba(3,9,15,.83); backdrop-filter: blur(8px); }
.media-viewer-inner { position: relative; display: grid; place-items: center; min-height: 180px; }
.media-viewer img { display: block; width: 100%; max-height: 84dvh; object-fit: contain; }
.media-viewer-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(7,17,27,.78);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

@media (hover:hover) and (pointer:fine) {
  .card-media img,
  .br-media img { transition: transform .45s var(--contact-ease); }
  .card-media:hover img,
  .br:hover .br-media img { transform: scale(1.018); }
}

@media (max-width: 980px) {
  .introwrap { height: 236svh; min-height: 1500px; }
  .cta2v6-front { --front-sheet-overlap: 38svh; }
  .intro-veil {
    background:
      linear-gradient(90deg, rgba(4,11,18,.9) 0%, rgba(4,11,18,.7) 48%, rgba(4,11,18,.2) 76%, rgba(4,11,18,.3)),
      linear-gradient(180deg, rgba(5,13,22,.42), rgba(5,13,22,.08) 48%, rgba(5,13,22,.82));
  }
  .phx {
    left: 5vw;
    top: clamp(42px, 6svh, 66px);
    width: min(25vw, 190px);
  }
  .intro-ui {
    inset: auto auto clamp(64px, 8svh, 90px) 5vw;
    width: min(50vw, 510px);
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    text-align: left;
  }
  .intro-ui h1 { font-size: clamp(38px, 5.1vw, 50px); }
  .intro-ui .claim { max-width: 48vw; }
  .hero-persons {
    right: 2vw;
    left: auto;
    width: min(44vw, 430px);
    height: min(69svh, 640px);
    margin: 0;
    transform: translate3d(0, 12%, 0) scale(.94);
    transform-origin: right bottom;
  }
  .hero-persons img { object-position: center bottom; }
  .hero-stage-meta {
    top: 18px;
    right: 18px;
    max-width: calc(100% - 36px);
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(220,233,246,.18);
    border-radius: 999px;
    background: rgba(7,17,27,.42);
    writing-mode: horizontal-tb;
    transform: none;
    backdrop-filter: blur(7px);
  }
  .hero-stage-name { writing-mode: horizontal-tb; }
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #svc .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 20px) / 2);
    justify-self: center;
  }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recruit { grid-template-columns: 1fr; }
  .recruit-media { grid-row: auto; width: 100%; max-height: 420px; margin: 0 0 8px; }
}

@media (min-width: 981px) {
  #svc .card:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Between tablet and compact desktop there is a narrow, reliable lane
   between the copy and the portrait. Keep the compact pause control there. */
@media (min-width: 721px) and (max-width: 980px) {
  .hero-motion-toggle {
    right: auto;
    bottom: 14px;
    left: 59%;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
    transform: translateX(-50%);
  }
  .hero-motion-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Compact desktop/tablet landscape needs its own Hero composition. At 1024px
   the full desktop art direction otherwise places the people behind the CTA. */
@media (min-width: 981px) and (max-width: 1100px) {
  .phx {
    left: 5vw;
    top: clamp(42px, 6svh, 66px);
    width: min(25vw, 190px);
  }
  .intro-ui {
    inset: auto auto clamp(62px, 8svh, 88px) 5vw;
    width: min(52vw, 560px);
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
  }
  .intro-ui h1 { font-size: clamp(42px, 6vw, 56px); }
  .intro-ui .claim { max-width: 48vw; }
  .hero-persons {
    right: 2vw;
    width: min(40vw, 410px);
    height: min(64svh, 620px);
    transform-origin: right bottom;
  }
  .hero-persons img { object-position: center bottom; }
}

@media (max-width: 720px) {
  .introwrap { height: 192svh; min-height: 1150px; }
  .cta2v6-front { --front-sheet-overlap: 28svh; --front-sheet-lip: 22px; }
  .intro-sticky { min-height: 0; }
  .intro-media { object-position: center; }
  .intro-veil {
    background:
      linear-gradient(180deg, rgba(4,11,18,.86) 0%, rgba(4,11,18,.73) 44%, rgba(4,11,18,.2) 70%, rgba(4,11,18,.58) 100%),
      linear-gradient(90deg, rgba(4,11,18,.42), rgba(4,11,18,.1));
  }
  .hero-webgl {
    opacity: .58;
    -webkit-mask-image: radial-gradient(circle at 50% 36%, #000 0 32%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 36%, #000 0 32%, transparent 70%);
  }
  .hero-depth-grid { top: 7%; right: -38%; width: 138vw; height: 138vw; background-size: 34px 34px; }
  .hero-orbit { top: 13%; right: -28%; width: 112vw; }
  .hero-orbit-b { top: 20%; right: -11%; width: 76vw; }
  .hero-stage-meta { top: 12px; right: 12px; max-width: calc(100% - 24px); opacity: .78; }
  .hero-motion-toggle {
    right: 12px;
    bottom: calc(13px + env(safe-area-inset-bottom));
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
  }
  .hero-motion-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  #cvFx { opacity: .14; }
  .phx {
    left: 18px;
    top: clamp(34px, 6svh, 58px);
    width: min(40vw, 170px);
  }
  .intro-ui {
    inset: clamp(108px, 15svh, 148px) 18px auto;
    width: auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    text-align: left;
  }
  .intro-kicker { max-width: 100%; font-size: 12px; letter-spacing: .1em; }
  .intro-ui h1 {
    max-width: 100%;
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: .96;
    text-wrap: nowrap;
  }
  .intro-ui h1 .chrome { display: block; white-space: nowrap; }
  .intro-ui .claim { max-width: min(100%, 38ch); margin-top: 12px; font-size: 14px; line-height: 1.5; }
  .intro-ui .icta { width: 100%; gap: 9px; margin-top: 18px; }
  .intro-ui .icta .btn { width: 100%; justify-content: center; min-height: 48px; padding: 12px 14px; }
  .intro-proof { display: none; }
  .hero-persons {
    right: 0;
    left: 0;
    width: min(86vw, 420px);
    height: min(48svh, 460px);
    margin-inline: auto;
    transform: translate3d(0, 12%, 0) scale(.94);
    transform-origin: center bottom;
  }
  .hero-persons img { object-position: center bottom; }
  .scrollcue .mouse { display: none; }
  .scrollcue { bottom: calc(12px + env(safe-area-inset-bottom)); font-size: 12px; letter-spacing: .22em; }
  section { padding: 62px 0 58px; }
  .svc, .brs, .refs { grid-template-columns: 1fr; }
  #svc .card:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
  .card-media { aspect-ratio: 16 / 9; }
  .card-body > p { min-height: 0; }
  /* 6.3.2: das Teamfoto steht im eigenen Seitenverhältnis (keine Balken), die Unterschrift
     darunter statt über den Personen. */
  .wide-proof { display: block; min-height: 0; margin-bottom: 30px; border-radius: 18px; }
  .wide-proof img { height: auto; max-height: none; }
  .wide-proof-backdrop { display: none; }
  .wide-proof figcaption {
    position: static;
    max-width: none;
    padding: 11px 16px 13px;
    border-top: 1px solid var(--cta2-card-border, rgba(46, 111, 176, .18));
    border-radius: 0;
    background: var(--cta2-card, #fff);
    color: var(--mut);
    font-size: 12.5px;
    line-height: 1.5;
    backdrop-filter: none;
  }
  .about { gap: 26px; }
  .certificate-proof { grid-template-columns: 1fr; padding: 20px; border-radius: 18px; }
  .proof-document img { max-height: 58dvh; }
  .recruit { padding: 22px; }
  .recruit-media { aspect-ratio: 16 / 9; }
body #karriere .recruit h2 {
    font-size: clamp(20px, 6.3vw, 26px);
    hyphens: none;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .leadform, .leadform input, .leadform .btn { width: 100%; min-width: 0; }
  .contact-fallback { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .contact-fallback .ey,
  .contact-fallback-actions { grid-column: auto; grid-row: auto; }
  .contact-fallback-actions { min-width: 0; margin-top: 8px; }
  .gbadge { white-space: normal; border-radius: 15px; line-height: 1.4; }
  .refs { grid-template-columns: minmax(0, 1fr); }
  .ref { min-width: 0; }
  .mcta .btn { min-width: 0; white-space: normal; line-height: 1.2; }
}

@media (max-width: 420px) {
  .wrap { padding-inline: 16px; }
  .kpis { grid-template-columns: 1fr; }
  .kpi { padding: 20px 16px; }
  .team { grid-template-columns: 1fr; }
  .intro-ui h1 { font-size: clamp(29px, 8.4vw, 36px); }
  .intro-kicker::before { width: 24px; }
  .card-body { padding: 18px; }
  .br h3, .br p { margin-left: 18px; margin-right: 18px; }
  .nap { padding: 20px 17px; }
  .nap .row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .nap .row b { min-width: 0; }
  #footer .cols > div:not(:first-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: 2px;
  }
  #footer .cols > div:not(:first-child) > a {
    width: 100%;
    margin: 0 !important;
  }
  #footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  #footer nav a { display: inline-flex; min-height: 44px; align-items: center; margin: 0 !important; }
  .soc { width: 44px; height: 44px; }
}

/* On common short desktop windows the centered scroll affordance otherwise
   sits directly on the primary CTA. Keep it visible, but move it into the
   quiet lower-left edge of the composition. */
/* The cue is decorative and must never intercept a CTA click. */
.scrollcue { pointer-events: none !important; }

@media (min-width: 981px) and (max-height: 950px) {
  .scrollcue {
    left: clamp(26px, 3vw, 48px);
    right: auto;
  }
  /* 6.3.2: without the mouse icon the cue stays below the proof chips (the
     progress line crossed "Präsenz" and "Klare Meldewege" at 1440 × 900). */
  .scrollcue .mouse { display: none; }
  .hero-motion-toggle {
    right: auto;
    bottom: 14px;
    left: 50%;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
    transform: translateX(-50%);
  }
  .hero-motion-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Keep the complete management portrait clear of both CTAs on very narrow,
   short phones. The transparent PNG remains uncropped and fully visible. */
@media (max-width: 360px) and (max-height: 760px) {
  .intro-ui .icta { gap: 7px; margin-top: 14px; }
  .intro-ui .icta .btn { min-height: 44px; padding-block: 10px; font-size: 13px; }
  .hero-persons { width: min(74vw, 280px); height: 38svh; }
}

@media (min-width: 721px) and (max-height: 650px) {
  .intro-sticky { height: 100svh; min-height: 0; }
  .phx { left: 22px; top: 26px; width: 126px; }
  .intro-ui {
    inset: auto auto 46px 4vw;
    width: min(52vw, 540px);
    justify-content: flex-start;
    padding: 0;
  }
  .intro-ui h1 { font-size: clamp(32px, 4.5vw, 42px); }
  .intro-ui .claim { max-width: 500px; margin-top: 9px; font-size: 12.5px; }
  .intro-ui .icta { margin-top: 13px; gap: 8px; }
  .intro-ui .icta .btn { min-height: 44px; padding: 9px 13px; font-size: 12px; }
  .intro-proof { display: none; }
  .hero-persons { right: 1.5vw; width: 32vw; height: 92svh; }
  .hero-stage-meta { display: none; }
  .scrollcue { display: none; }
  .hero-motion-toggle {
    right: auto;
    bottom: 14px;
    left: 64%;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    transform: translateX(-50%);
  }
  .hero-motion-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 720px) and (max-height: 650px) {
  .phx { left: 14px; top: 18px; width: 108px; }
  .intro-ui { inset: 76px 14px auto; }
  .intro-ui h1 { font-size: clamp(27px, 8.4vw, 34px); }
  .intro-ui .claim { margin-top: 8px; font-size: 12.5px; line-height: 1.35; }
  .intro-ui .icta { margin-top: 11px; gap: 7px; }
  .intro-ui .icta .btn { min-height: 44px; padding: 8px 11px; font-size: 12px; }
  .hero-persons { width: min(76vw, 360px); height: 42svh; }
  .hero-stage-meta { display: none; }
}

/* Switch before the desktop row can squeeze the logo or wrap labels. */
@media (max-width: 1220px) {
  .brand { flex: 0 0 auto; }
  .lk,
  .navtel { display: none; }
  .burger { display: block; }
  .burger { width: 44px; height: 44px; }
  .burger span:nth-child(1) { top: 14px; }
  .burger span:nth-child(2) { top: 21px; }
  .burger span:nth-child(3) { top: 28px; }
  .burger[aria-expanded="true"] span:nth-child(1),
  .burger[aria-expanded="true"] span:nth-child(3) { top: 21px; }
  html.mobile-menu-open,
  html.mobile-menu-open body { overflow: hidden; overscroll-behavior: none; }
  .mnav.open {
    position: fixed;
    z-index: 75;
    top: 67px;
    right: 0;
    bottom: auto;
    left: 0;
    height: calc(100dvh - 67px);
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
    background: #f3f6fa;
    box-shadow: 0 24px 48px rgba(18,37,56,.18);
  }
  html.mobile-menu-open .mcta,
  html.mobile-menu-open #tt { display: none !important; }
  .mnav a:last-child {
    font-size: clamp(11px, 3.45vw, 13px);
    white-space: nowrap;
  }
  .mnav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 350px) {
  #leistungen .shead h2 {
    font-size: 21px;
    letter-spacing: -.018em;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .introwrap { height: 100svh; min-height: 0; }
  .cta2v6-front { --front-sheet-overlap: 0px; }
  .intro-sticky { min-height: 0; }
  .intro-media { display: none; }
  .hero-webgl, #cvFx { display: none; }
  .hero-curtain, .hero-depth-grid, .hero-orbit, .hero-scan, .hero-stage-meta { display: none; }
  .intro-poster { opacity: 1 !important; visibility: visible !important; }
  .phx { opacity: 1 !important; transform: none !important; }
  .intro-ui { transform: none !important; opacity: 1 !important; }
  .hero-persons { opacity: 1 !important; transform: none !important; }
  .scrollcue { display: none; }
  .card-media img, .br-media img { transition: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .intro-proof { display: none; }
}


/* WordPress preview/admin-bar offsets. Public rendering is unchanged. */
.admin-bar header.top { top: 32px; }
@media (max-width: 1220px) {
  .admin-bar .mnav.open { top: 94px; height: calc(100dvh - 94px); }
}
@media (max-width: 782px) {
  .admin-bar header.top { top: 46px; }
  .admin-bar .mnav.open { top: 108px; height: calc(100dvh - 108px); }
}

/* 6.3.0 — "Weitere Dienstleistungen" closes the service grid. In the three-
   column desktop grid it fills the last row as a wide, horizontal card. */
.card--more {
  background: linear-gradient(135deg, #f7fbff, #eaf2fb);
}

@media (min-width: 981px) {
  #svc .card--more:last-child:nth-child(3n + 2) {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #svc .card--more:last-child:nth-child(3n + 2) .card-media {
    height: 100%;
    aspect-ratio: auto;
    min-height: 240px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  /* The row is as tall as the service cards above: centre the text beside
     the image and keep the actions close to it instead of at the bottom. */
  #svc .card--more:last-child:nth-child(3n + 2) .card-body { justify-content: center; }
  #svc .card--more:last-child:nth-child(3n + 2) .card-actions { margin-top: 18px; }
}

/* 6.3.0 — seals and memberships below the certificate cards. */
#zertifikate .cta2v6-trust {
  margin-top: 30px;
}

/* 6.3.0 — the fixed call bar (#mcta, up to 720 px) must not cover the last
   footer links; anchor and focus scrolling keep clear of it as well. */
@media (max-width: 720px) {
  html { scroll-padding-bottom: 96px; }
  .cta2v6-front .cta2v6-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* 6.3.0 — last-resort wrapping: a word wider than its column breaks instead
   of overlapping (only relevant while no condensed face is available). The
   mobile career headline does the same without hyphenation (above, max
   720 px): "verantwortungsvolles" was otherwise cut off at the panel edge.
   Only the hero claim keeps its deliberate no-split rule ("Vertrauenssache");
   the bundled display face makes it fit. */
.shead h2,
.card h3,
.br h3,
.contact-fallback h3,
.cta2v6-footer__cta h2 {
  overflow-wrap: break-word;
}

/* ==========================================================================
   6.3.1 – Blau-Weiß. Every light section uses the shared surfaces from
   style.css (reference: team section on /ueber-uns). Consecutive sections
   alternate surface a/b and are separated by the blue rule. Cards stay white
   with the blue card edge and shadow. Dark hero, blue bands and footer keep
   their colours.
   ========================================================================== */
body.cta2v6-front,
.cta2v6-front main { background: var(--cta2-surface, #edf3f8); }
.cta2v6-front main > section {
  background: var(--cta2-surface-a, #edf3f8);
  border-top: 1px solid var(--cta2-surface-rule, rgba(46, 111, 176, .14));
}
.cta2v6-front main > section:nth-of-type(even) { background: var(--cta2-surface-b, #f2f7fc); }
.cta2v6-front main > section:first-of-type { border-top: 0; }

/* :where keeps the hover rules of the cards in charge. */
.cta2v6-front main :where(.kpi, .card, .br, .tm, .cert, .ref, .step, .faq, .job, .bp, .nap, .contact-fallback, .certificate-proof, .wide-proof) {
  border-color: var(--cta2-card-border, rgba(46, 111, 176, .18));
  box-shadow: var(--sh-card);
}
.cta2v6-front main :where(.card, .br, .cert, .ref, .step, .job, .bp):hover { border-color: rgba(46, 111, 176, .34); }
.cta2v6-front main :where(.certificate-proof) { background: linear-gradient(135deg, #fff, #eef5fc); }

/* Small blue text sits directly on the tinted surfaces: the deep blue of the
   subpage kickers keeps it well above 4.5:1. The kicker is its own line, so
   it never shares a line box with the heading below it. */
.cta2v6-front main .ey {
  display: block;
  line-height: 1.5;
  color: var(--blue-deep);
}

/* ---------- Line breaks: headings and labels balanced, running text without
   orphans; related terms stay together in the markup (nbsp, cta2v6-nowrap). */
main :where(p, li, .bp span, .refnote) { text-wrap: pretty; }
/* Headings, labels and the short one-line facts (card bullets, timeline,
   "Passend für …") are balanced: Chrome's pretty only lifts visually short
   last lines, balance also avoids a lone long word under a short line. */
main :where(h2, h3, .ey, .kpi .l, .tm b, .tm span, .cert b, .cert span, .card-body > p, .ref > b, .bp b, .job h3, .step h3, .pr h3,
  .card h3, .br h3, .faq .fq, .usp, .bchip, .rb, .jb, .cat, .planning-points li, .secondary-proof span,
  .leadbox b, figcaption, .mile .yr, .mile .tx, .ref .who, .card-facts li, .det li, .btn) { text-wrap: balance; }

/* The hero headline is set in two deliberate lines. */
.intro-ui h1 .h1-line { display: block; }

/* KPI labels: scope and validity each on their own line. */
.kpi .l > span { display: block; }

/* Team: the role "ppa. stellv. Geschäftsführerin" never splits. Where the
   two-column team sits beside the timeline the cards stack portrait above
   name and role, so the role gets the full card width. */
.tm > div:last-child { flex: 1 1 auto; }
@media (min-width: 861px) {
  .tm {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
  }
  .tm > div:last-child { align-self: stretch; }
  .tm .av {
    width: 80px;
    height: 80px;
    flex-basis: 80px;
  }
}
/* Portraits fill the round frame; the faces sit in the upper middle of the
   landscape originals and stay complete. */
.tm .av img { object-position: 50% 20%; }

/* Certificates: scope, register number and validity on separate lines,
   badge above the text wherever the cards form a grid. */
.cert .cert-meta {
  margin-top: 7px;
  color: #38495b;
  font-weight: 600;
}
.cert .cert-meta > span { margin-top: 1px; color: inherit; }
@media (min-width: 521px) {
  .cert { flex-direction: column; gap: 12px; }
  .cert > div:last-child { align-self: stretch; min-width: 0; }
}

/* Panel heading in the display face (as the contact panel heading); sized so
   "Zwei aktuelle DEKRA-Zertifikate" stays on one line down to 320 px. */
.certificate-proof h3 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.05;
}
@media (max-width: 720px) {
  .certificate-proof h3 { font-size: min(22px, 5.9vw); }
}

/* Career headline: "verantwortungsvolles Berufsfeld" shares the last line on
   every desktop width (never larger than before, only as small as needed). */
.recruit > div:not(.gridd) { container-type: inline-size; }
@media (min-width: 721px) {
  body #karriere .recruit h2 { font-size: min(clamp(23px, 3.1vw, 35px), 5.7cqi); }
}
/* Mobile career headline: German hyphenation instead of a lone last word
   ("verantwortungs-/volles Berufsfeld"); also safe with the fallback face. */
@media (max-width: 720px) {
  body #karriere .recruit h2 {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
    -webkit-hyphenate-limit-before: 6;
    -webkit-hyphenate-limit-after: 6;
  }
}
@media (max-width: 340px) {
  main .ey { letter-spacing: .2em; }
}
/* Case titles ("Wechselnde Veranstaltungsdynamik") stay on one line wherever
   the column allows it. */
@media (max-width: 980px) {
  .operational-cases .ref > b { font-size: 17px; }
}
@media (max-width: 380px) {
  .operational-cases .ref > b { font-size: 16px; }
  .secondary-proof { grid-template-columns: 56px 1fr; gap: 10px; }
}

/* Hero kicker stays on one line (no split at the middle dot). 6.3.2: at 12 px
   (Punkt 10) the tracking narrows below 980 px; below 390 px the brand name is
   left out – the ContacT logo stands directly above the kicker. */
@media (max-width: 980px) {
  .intro-kicker { gap: 10px; font-size: 12px; letter-spacing: .1em; }
  .intro-kicker::before { width: 22px; flex: 0 0 auto; }
}
@media (max-width: 389px) {
  .intro-kicker-brand { display: none; }
}
@media (max-width: 360px) {
  .intro-kicker { gap: 8px; letter-spacing: .08em; }
  .intro-kicker::before { width: 16px; }
  .gbadge { padding-inline: 12px; }
  .bchip { padding-inline: 10px; font-size: 12px; }
}
/* Mobile call bar: the call button takes its natural width, so "Sicherheit
   anfragen" stays on one line down to 320 px. */
@media (max-width: 400px) {
  .mcta .btn-s { flex: 0 0 auto; }
}

/* The front page's global link colour (inline a{color:var(--blue)}) must not
   recolour the shared footer: legal links stay as on every subpage. */
.cta2v6-front .cta2v6-footer__legal a { color: inherit; }

/* Seals and memberships on the front page: white tiles with the blue card
   edge like every other card of the page. */
.cta2v6-front #zertifikate .cta2v6-trust__items li {
  border-color: var(--cta2-card-border, rgba(46, 111, 176, .18));
  box-shadow: 0 6px 16px rgba(33, 73, 111, .07);
}

/* Inline-flex links drop the space before their arrow; keep a small gap. */
.job a { gap: 6px; }

/* On phones the logo's underline would cross the hero kicker below it. */
@media (max-width: 720px) {
  .phx .uline { display: none; }
}

/* 6.3.1 – the fixed back-to-top button (front page, from 721 px) sat on the
   "Datenschutz" link while the footer's legal row reached the viewport edge
   (up to ~1290 px); the row keeps clear of it. */
@media (min-width: 721px) and (max-width: 1320px) {
  .cta2v6-front .cta2v6-footer__legal { padding-right: 64px; }
}

/* ==========================================================================
   6.3.2 – Startseite (Auftrag 01.10.2026)
   ========================================================================== */

/* Punkt 2 – Platzhalter bis zum Laden: winzige Vorschau (--lqip, im Markup) in
   der mittleren Bildfarbe (--lqip-c), gleiche Geometrie wie das Bild: cover mit
   demselben Fokuspunkt, contain für Teamfoto und Zertifikat. Kein grauer Kasten,
   kein leerer Kreis. Nach dem Laden deckt das Bild die Vorschau vollständig ab. */
.cta2v6-front :is(.card-media, .br-media, .recruit-media, .tm .av) img {
  background: var(--lqip-c, #dfe9f4) var(--lqip, none) 50% 50% / cover no-repeat;
}
.cta2v6-front .card-media img { background-position: var(--service-focus-d, 50% 50%); }
.cta2v6-front .br-media img { background-position: var(--branch-focus-d, 50% 50%); }
.cta2v6-front .tm .av img { background-position: 50% 20%; }
@media (max-width: 700px) {
  .cta2v6-front .card-media img { background-position: var(--service-focus-m, var(--service-focus-d, 50% 50%)); }
  .cta2v6-front .br-media img { background-position: var(--branch-focus-m, var(--branch-focus-d, 50% 50%)); }
}
.cta2v6-front :is(.wide-proof, .proof-document) img {
  background: var(--lqip, none) 50% 50% / contain no-repeat;
}

/* Punkt 2 – Einblenden an die Scrollposition gekoppelt: Deckkraft und 12 px
   Bewegung folgen dem Eintritt des Elements in den Viewport (fertig nach
   120–180 px, nebeneinanderliegende Karten leicht gestaffelt). Das rechnet der
   Compositor im selben Bild wie das Scrollen – kein Skript-Takt, kein leerer
   Bildschirm, auch nicht nach Rucklern oder Sprüngen. Ohne Unterstützung
   übernimmt das Skript in front-page.php (früher, kurz, bei Tempo sofort). */
@keyframes cta2v6-reveal {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .rv {
      animation-name: cta2v6-reveal;
      animation-duration: auto;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0px entry 120px;
    }
    html.js .rv.d1 { animation-range: entry 20px entry 140px; }
    html.js .rv.d2 { animation-range: entry 40px entry 160px; }
    html.js .rv.d3,
    html.js .rv.d4 { animation-range: entry 60px entry 180px; }
  }
}

/* Punkt 4 – das Hero ist beim Laden nie schwarz. Die Vorschau des Posters
   (--hero-lqip, im Markup) steht ab dem ersten Bild unter Poster und Video; der
   Vorhang des Ladeauftakts zeigt die abgedunkelte Szene statt einer schwarzen
   Fläche. Takt und Ablauf des Vorhangs bleiben unverändert. */
.intro-poster { background: #0b1a29 var(--hero-lqip, none) 50% 50% / cover no-repeat; }
.hero-curtain::before {
  content: "";
  position: absolute;
  inset: -48px;
  background: linear-gradient(rgba(22, 56, 96, .5), rgba(22, 56, 96, .5)), var(--hero-lqip, none) 50% 50% / cover no-repeat;
  filter: blur(22px) saturate(.9) brightness(.42);
}
.hero-curtain span { position: relative; }

/* Punkt 7 – die Geschäftsführung steht in der Szene statt davor: weicher
   Bodenschatten unter den Schuhen und eine leichte Angleichung an das kühle,
   gedämpfte Licht des Videos (etwas dunkler und entsättigt, kühle Tönung, zu den
   Füßen hin dunkler wie die Szene). Schatten- und Tönungsbox haben genau die Maße
   des gezeichneten Bildes (contain, unten rechts bzw. mittig) – über die
   Container-Einheiten der Box auch dort, wo das Bild die Breite statt der Höhe
   füllt (z. B. 1280 × 1024). Die Lage stammt aus dem Alphakanal des Freistellers
   (Sohlen bei 84,9 % und 86,5–88,6 % Höhe). Die Tönung ist auf die Personen
   maskiert und gilt in jeder Intro-Phase gleich. */
.hero-persons {
  --persons-grade: brightness(.9) contrast(1.05) saturate(.82);
  container-type: size;
}
.hero-persons-floor,
.hero-persons-tone {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  aspect-ratio: 996 / 1578;
  /* 996 / 1578 = 0,6312: gezeichnete Bildgröße bei object-fit: contain. */
  width: min(100cqw, 63.12cqh);
  height: min(100cqh, 158.43cqw);
  pointer-events: none;
}
.hero-persons-floor { z-index: 0; }
.hero-persons:not(.is-ready) .hero-persons-floor,
.hero-persons:not(.is-ready) .hero-persons-tone { visibility: hidden; }
.hero-persons-floor::before {
  content: "";
  position: absolute;
  left: 1%;
  top: 81.5%;
  width: 92%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(1, 6, 11, .74), rgba(1, 6, 11, .36) 52%, transparent);
  filter: blur(9px);
}
.hero-persons-floor i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 3, 7, .92), rgba(0, 3, 7, .46) 58%, transparent);
  filter: blur(3px);
}
.hero-persons-floor i:first-child { left: 8.5%; top: 83.1%; width: 42%; height: 3.8%; }
.hero-persons-floor i:last-child { left: 51%; top: 85.4%; width: 30%; height: 4.2%; transform: rotate(6deg); }
.hero-persons-tone {
  z-index: 1;
  -webkit-mask: url("assets/images/geschaeftsfuehrung-vollkoerper-v625-w480.webp") 0 0 / 100% 100% no-repeat;
  mask: url("assets/images/geschaeftsfuehrung-vollkoerper-v625-w480.webp") 0 0 / 100% 100% no-repeat;
  background: linear-gradient(180deg, rgba(70, 122, 182, .15) 0%, rgba(46, 96, 152, .2) 42%, rgba(8, 20, 34, .38) 76%, rgba(3, 10, 18, .56) 100%);
  mix-blend-mode: multiply;
  transform: translate3d(var(--pointer-person-x), var(--pointer-person-y), 0);
  transition: transform .2s ease-out;
}
@media (max-width: 1100px) {
  .hero-persons-floor,
  .hero-persons-tone { right: auto; left: 50%; }
  .hero-persons-floor { transform: translateX(-50%); }
  .hero-persons-tone { transform: translateX(-50%) translate3d(var(--pointer-person-x), var(--pointer-person-y), 0); }
  .intro-sticky.hero-focus-hold .hero-persons-tone { transform: translateX(-50%) !important; }
}

/* Punkt 8 – Siegel und Mitgliedschaften: die Startseite nutzt die gemeinsame,
   über die volle Breite verteilte Leiste aus style.css (.cta2v6-trust, gleiche
   Anordnung wie /zertifikate und Footer); keine eigene Überschreibung mehr. */