/* =====================================================================
   DESIGN V2 · STUFE 2 · LEITSEITEN
   Startseite · Display · Reinraum · Baumaschinen & Landtechnik
   Bausteine aus Prototyp A („Cinematic Precision“) und B („Interactive
   Engineering“). Lädt nach design-v2.css, nutzt dessen Tokens (--v2-*).

   - Nur Gestaltung der mit data-pilot-new eingefügten Elemente und der
     Abschlussbereiche; kein Bestandstext wird verändert oder versteckt.
   - Orange ausschließlich für Anfrage-Handlungen (Regel aus Stufe 1).
   - Bewegung nur über transform/opacity/clip-path; Reduced Motion am Ende.
===================================================================== */

:root {
  --v2-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --v2-radius: 18px;
  --v2-radius-lg: 24px;
  --v2-glass: rgba(143, 216, 255, 0.55);
  --v2-glue: rgba(0, 229, 255, 0.85);
  --v2-touch: rgba(150, 165, 255, 0.85);
  --v2-reflex: #ff9c5a;
  --v2-ray: #ffd27a;
}

/* Interaktive Bausteine erst zeigen, wenn design-v2.js läuft */
html:not(.v2-js) .v2-js-only {
  display: none !important;
}

.v2-note {
  margin: 0;
  font: 500 11px/1.4 var(--v2-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-muted-2);
}

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

/* =====================================================================
   1 · STARTSEITE · Hero mit Mini-Schichtstapel (B1)
===================================================================== */
.v2-mini {
  display: none;
}

@media (min-width: 1100px) {
  body[data-pilot-page="home"] .hero__content--modern {
    max-width: 700px;
  }

  .v2-mini {
    position: relative;
    display: block;
    justify-self: end;
    align-self: center;
    width: 340px;
    height: 330px;
    margin: 0;
    perspective: 1100px;
  }

  /* drei Schichten in Explosionsdarstellung */
  .v2-mini__l {
    position: absolute;
    left: 50%;
    width: 250px;
    height: 160px;
    margin-left: -125px;
    border-radius: 10px;
    transform: rotateX(60deg) rotateZ(-38deg);
    transform-style: preserve-3d;
  }

  .v2-mini__l--glass {
    top: 6px;
    border: 1px solid rgba(190, 232, 255, 0.75);
    background:
      linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.22) 40%, transparent 52%),
      linear-gradient(160deg, rgba(143, 216, 255, 0.2), rgba(143, 216, 255, 0.06));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 40px -18px rgba(0, 0, 0, 0.8);
  }

  .v2-mini__l--glue {
    top: 84px;
    border: 1px solid rgba(0, 229, 255, 0.9);
    background: linear-gradient(160deg, rgba(0, 229, 255, 0.34), rgba(0, 229, 255, 0.12));
    box-shadow: 0 0 34px rgba(0, 229, 255, 0.35), inset 0 0 24px rgba(0, 229, 255, 0.25);
    animation: v2-glow 5.5s ease-in-out infinite;
  }

  .v2-mini__l--panel {
    top: 162px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
      linear-gradient(90deg, transparent 12%, rgba(0, 229, 255, 0.5) 12% 13%, transparent 13%) 0 0 / 100% 100%,
      repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.08) 0 2px, transparent 2px 14px),
      linear-gradient(160deg, #13263a, #08111c);
    box-shadow: 0 40px 60px -24px rgba(0, 0, 0, 0.95);
  }

  /* Lichtstrahl durch den Stapel */
  .v2-mini__ray {
    position: absolute;
    top: -30px;
    left: 50%;
    width: 2px;
    height: 250px;
    margin-left: -1px;
    background: linear-gradient(180deg, rgba(255, 210, 122, 0), rgba(255, 210, 122, 0.95) 30%, rgba(0, 229, 255, 0.9) 70%, rgba(0, 229, 255, 0));
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7));
  }
}

@keyframes v2-glow {
  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

/* Hero-Standbild Startseite: Klebstoffauftrag auf Displaymodul statt Video-Poster.
   Video-Element nur ausgeblendet (lädt nicht, design-v2.js setzt preload=none). */
body[data-pilot-page="home"] #hero .hero__bg-video,
body[data-pilot-page="display"] #hero .hero__bg-video {
  display: none;
}

/* Display-Seite: eigene technische Illustration (SVG) als Hero-Hintergrund */
.v2-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 45%;
}

@media (max-width: 640px) {
  .v2-hero-art {
    object-position: 88% 20%;
    opacity: 0.7;
  }
}

.v2-hero-photo,
.v2-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.v2-hero-photo img {
  object-fit: cover;
  /* Düse und Display rechts der Textspalte */
  object-position: 70% 50%;
  filter: saturate(0.72) brightness(0.92) contrast(1.04);
}

@media (max-width: 640px) {
  .v2-hero-photo img {
    object-position: 50% 30%;
  }
}

/* Leitfaden-Blatt im Whitepaper-Banner (A8) */
.v2-paper {
  position: relative;
  flex: 0 0 auto;
  width: 88px;
  height: 116px;
  perspective: 600px;
}

.v2-paper__sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 12px;
  border-radius: 6px;
  background: linear-gradient(160deg, #f4f8fb, #d6e2ea);
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.35);
  transform: rotateY(-16deg) rotateX(6deg);
}

.v2-paper__sheet--back {
  background: linear-gradient(160deg, #0e1621, #1a232f);
  border: 1px solid rgba(0, 229, 255, 0.4);
  box-shadow: 0 0 34px rgba(0, 229, 255, 0.2);
  transform: rotateY(-16deg) rotateX(6deg) translate3d(12px, 10px, -24px);
}

.v2-paper__bar {
  display: block;
  width: 64%;
  height: 7px;
  border-radius: 2px;
  background: #0a1018;
}

.v2-paper__bar--s {
  width: 40%;
  height: 4px;
  background: #00879a;
}

.v2-paper__lines {
  display: block;
  flex: 1;
  margin-top: 4px;
  background: repeating-linear-gradient(180deg, rgba(10, 16, 24, 0.16) 0 2px, transparent 2px 8px);
  -webkit-mask: linear-gradient(90deg, #000 70%, transparent);
  mask: linear-gradient(90deg, #000 70%, transparent);
}

@media (max-width: 640px) {
  .v2-paper {
    display: none;
  }
}

/* =====================================================================
   2 · Querschnitt Lichtweg (Startseite, „Was ist Optical Bonding?“)
===================================================================== */
.v2-xsec {
  margin: 0 0 22px;
  padding: clamp(14px, 2.4vw, 22px) clamp(14px, 2.4vw, 22px) 14px;
  border-radius: var(--v2-radius);
  border: 1px solid var(--v2-line-2);
  background:
    linear-gradient(rgba(0, 229, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(120% 90% at 50% 0%, #13233a 0%, #08101a 72%);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.v2-xsec__svg {
  display: block;
  width: 100%;
  height: auto;
}

.v2-xsec .v2-note {
  margin-top: 8px;
}

.x-glass {
  fill: rgba(143, 216, 255, 0.2);
  stroke: rgba(170, 225, 255, 0.75);
}

.x-air {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.32);
  stroke-dasharray: 4 4;
}

.x-glue {
  fill: rgba(0, 229, 255, 0.5);
  stroke: rgba(0, 229, 255, 0.95);
}

.x-panel {
  fill: #1b2a3c;
  stroke: #3d5573;
}

.x-ray {
  fill: none;
  stroke: var(--v2-ray);
  stroke-width: 2;
  stroke-linecap: round;
}

.x-refl {
  fill: none;
  stroke: var(--v2-reflex);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}

.x-head {
  fill: var(--v2-ray);
}

.x-head-r {
  fill: var(--v2-reflex);
}

.x-mark {
  fill: var(--v2-reflex);
  stroke: rgba(4, 7, 13, 0.9);
  stroke-width: 1.5;
}

.x-label {
  fill: #a9bccd;
  font: 600 9.5px var(--v2-mono);
  letter-spacing: 0.08em;
}

.x-label--dark {
  fill: #02161c;
}

.x-title {
  fill: #d7e2ec;
  font: 650 13px "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.x-title--on {
  fill: var(--v2-cyan);
}

/* Smartphone: Grafik wird auf ~60 % verkleinert → Beschriftungen größer setzen */
@media (max-width: 560px) {
  .v2-xsec .x-label {
    font-size: 15px;
    letter-spacing: 0.02em;
  }

  .v2-xsec .x-title {
    font-size: 21px;
  }
}

/* =====================================================================
   3 · Vorher/Nachher-Vergleich (B4) · Startseite + Baumaschinen
===================================================================== */
.v2-compare {
  max-width: 880px;
  margin: clamp(48px, 7vw, 88px) auto 0;
}

.v2-compare--wide {
  max-width: 1000px;
}

.v2-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 1px solid var(--v2-line-2);
  background: rgba(255, 255, 255, 0.03);
}

.v2-tabs [role="tab"] {
  min-height: 44px;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--v2-muted);
font-weight: 600;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}

.v2-tabs [role="tab"]:hover {
  color: #fff;
}

.v2-tabs [role="tab"][aria-selected="true"] {
  background: var(--v2-ink);
  color: var(--v2-navy-950);
}

.v2-cmp {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-line-2);
  background: #0b1520;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.v2-cmp--wide {
  aspect-ratio: 16 / 9;
}

.v2-cmp__scene,
.v2-cmp__layer {
  position: absolute;
  inset: 0;
}

.v2-cmp__scene[hidden] {
  display: none;
}

.v2-cmp__layer--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.v2-cmp.is-animating .v2-cmp__layer--before {
  transition: clip-path 600ms var(--v2-ease);
}

.v2-cmp.is-animating .v2-cmp__handle {
  transition: left 600ms var(--v2-ease);
}

/* Bestandsillustration (beide Hälften in einer Datei), erst kurz vor Sichtbarkeit laden */
.v2-cmp.is-near .v2-photo {
  background-image: url("/media/optical_bonding-air_bonding-vs-optical_bonding.webp");
}

.v2-photo {
  background-color: #2a3646;
  background-repeat: no-repeat;
  background-size: 200% auto;
}

.v2-photo--before {
  background-position: 0 55%;
}

.v2-photo--after {
  background-position: 100% 55%;
}

.v2-cmp__tag {
  position: absolute;
  top: 14px;
  z-index: 3;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--v2-line-2);
  background: rgba(4, 7, 13, 0.8);
  color: var(--v2-ink);
  font: 600 11px/1 var(--v2-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

.v2-cmp__tag--before {
  left: 14px;
}

.v2-cmp__tag--after {
  right: 14px;
  border-color: rgba(0, 229, 255, 0.5);
  color: var(--v2-cyan);
}

.v2-cmp__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 4;
  width: 48px;
  margin-left: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  outline: none;
}

.v2-cmp__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 18px rgba(0, 229, 255, 0.6);
}

.v2-cmp__grip {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--v2-navy-950);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(0, 229, 255, 0.16);
  transition: transform var(--v2-fast) var(--v2-ease);
}

.v2-cmp__handle:hover .v2-cmp__grip {
  transform: scale(1.08);
}

.v2-cmp__handle:focus-visible .v2-cmp__grip {
  outline: 3px solid var(--v2-cyan);
  outline-offset: 3px;
}

.v2-compare__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 16px;
}

.v2-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-quick button {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--v2-line-2);
  background: transparent;
  color: var(--v2-ink-2);
font-weight: 500;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--v2-fast) ease, color var(--v2-fast) ease, background-color var(--v2-fast) ease;
}

.v2-quick button:hover {
  border-color: rgba(0, 229, 255, 0.55);
  background: rgba(0, 229, 255, 0.06);
  color: #fff;
}

/* Schematische HMI-Szene (Sonnenlicht / Fahrerhaus) */
.v2-scene-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2a3646 0%, #1a2330 55%, #121821 100%);
}

.v2-scene-bg--cab::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background:
    linear-gradient(100deg, transparent 0 7%, rgba(0, 0, 0, 0.5) 7% 10%, transparent 10%),
    linear-gradient(80deg, transparent 0 89%, rgba(0, 0, 0, 0.5) 89% 92%, transparent 92%),
    linear-gradient(180deg, #8fb7d6 0%, #c9d8e2 38%, #6f7d52 39%, #4e5a35 100%);
}

.v2-hmi {
  position: absolute;
  inset: 11% 13%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 5%;
  padding: 4%;
  border-radius: 12px;
  border: 8px solid #1b232d;
  background: #07131c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 50px rgba(0, 0, 0, 0.55);
  font-size: clamp(9px, 1.3vw, 14px);
}

.v2-cmp--wide .v2-hmi {
  inset: 12% 20% 14%;
}

.v2-hmi__bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 3%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.v2-hmi__led {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}

.v2-hmi__pill {
  width: 30%;
  height: 0.6em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.v2-hmi__pill--s {
  width: 14%;
  margin-left: auto;
  background: rgba(0, 229, 255, 0.45);
}

.v2-hmi__body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8%;
  align-items: center;
}

.v2-hmi__gauge {
  width: 100%;
  max-width: 160px;
  justify-self: center;
}

.v2-hmi__gauge .g-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 9;
}

.v2-hmi__gauge .g-val {
  fill: none;
  stroke: var(--v2-cyan);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 181 252;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.v2-hmi__bars {
  display: grid;
  gap: 1.1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-hmi__bars li {
  height: 0.75em;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--v2-cyan) calc(var(--v) * 100%), rgba(255, 255, 255, 0.1) 0);
}

.v2-hmi__keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4%;
}

.v2-hmi__keys span {
  height: 1.9em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.v2-hmi__keys span:first-child {
  background: #0f8f5a;
}

/* Luftspalt: Spiegelung und verwaschener Kontrast */
.v2-hmi--washed {
  filter: contrast(0.42) brightness(1.45) saturate(0.4);
}

.v2-sun {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v2-sun--before {
  background:
    linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0.15) 42%, transparent 52%),
    linear-gradient(115deg, transparent 52%, rgba(255, 255, 255, 0.3) 60%, transparent 68%),
    radial-gradient(70% 60% at 85% 0%, rgba(255, 240, 200, 0.55), transparent 70%);
}

.v2-sun--after {
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(255, 240, 200, 0.18), transparent 70%),
    linear-gradient(115deg, transparent 26%, rgba(255, 255, 255, 0.07) 32%, transparent 40%);
}

/* =====================================================================
   4 · Branchen-Bildkarten (A7) · Startseite + Display
===================================================================== */
.card:has(> .v2-card-img) {
  overflow: hidden;
}

.card > .v2-card-img {
  display: block;
  width: calc(100% + 52px);
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: -28px -26px 22px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  filter: saturate(0.82) brightness(0.86);
  -webkit-mask: linear-gradient(180deg, #000 62%, transparent 100%);
  mask: linear-gradient(180deg, #000 62%, transparent 100%);
  transition: transform 1.2s var(--v2-ease), filter 600ms ease;
}

.card:hover > .v2-card-img {
  transform: scale(1.045);
  filter: saturate(1) brightness(0.95);
}

.card:has(> .v2-card-img) > .card__title {
  position: relative;
  margin-top: -54px;
  text-shadow: 0 2px 18px rgba(4, 7, 13, 0.9);
}

/* Bestandsbild mit eingebranntem Schriftzug: Ausschnitt ohne Text (doppelte Überschrift vermeiden) */
.card > .v2-card-img[src*="automotive_rugged"] {
  transform: scale(1.42);
  transform-origin: 50% 100%;
}

.card:hover > .v2-card-img[src*="automotive_rugged"] {
  transform: scale(1.48);
}

@media (max-width: 640px) {
  .card > .v2-card-img {
    width: calc(100% + 40px);
    margin: -24px -20px 20px;
  }

  .card:has(> .v2-card-img) > .card__title {
    margin-top: -44px;
  }
}

/* =====================================================================
   5 · Technologie-Karten mit Schicht-Grafik (A4)
       Startseite (.card--tech) · Baumaschinen (.adhesive-card) · Display-Tabs
===================================================================== */
.v2-glyph {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
  overflow: visible;
}

.card--tech > .v2-glyph,
.adhesive-card > .v2-glyph {
  margin: 4px 0 22px;
}

.v2-glyph .g-glass {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1;
  transition: transform 600ms var(--v2-ease);
}

.v2-glyph .g-fill {
  fill: rgba(0, 229, 255, 0.32);
  stroke: var(--v2-cyan);
  stroke-width: 0.8;
}

.v2-glyph .g-panel {
  fill: #1a232f;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1;
  transition: transform 600ms var(--v2-ease);
}

.v2-glyph .g-roller {
  fill: none;
  stroke: var(--v2-cyan);
  stroke-width: 1.2;
}

.v2-glyph .g-ray {
  fill: none;
  stroke: var(--v2-cyan);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Hover: Schichten schließen sich (Prototyp A) */
.card--tech:hover .g-glass,
.adhesive-card:hover .g-glass {
  transform: translateY(7px);
}

.card--tech:hover .g-panel,
.adhesive-card:hover .g-panel {
  transform: translateY(-6px);
}

.card--tech,
.adhesive-card {
  isolation: isolate;
}

.card--tech::after,
.adhesive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(380px circle at 30% 0%, rgba(0, 229, 255, 0.12), transparent 55%);
  opacity: 0;
  transition: opacity var(--v2-dur) ease;
  pointer-events: none;
}

.card--tech:hover::after,
.adhesive-card:hover::after {
  opacity: 1;
}

.adhesive-card {
  position: relative;
  transition: border-color var(--v2-dur) ease;
}

.adhesive-card:hover {
  border-color: rgba(0, 229, 255, 0.4) !important;
}

/* =====================================================================
   6 · DISPLAY · Schichtaufbau mit Hotspots (B3 + B5)
===================================================================== */
.v2-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin: clamp(56px, 8vw, 96px) 0 0;
}

.v2-stack__stage {
  position: relative;
  padding: clamp(14px, 3vw, 30px);
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-line-2);
  background:
    linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(120% 90% at 50% 0%, #16253a 0%, #0a111b 70%);
  box-shadow: 0 50px 90px -60px rgba(0, 0, 0, 0.95);
  contain: layout paint;
  isolation: isolate;
}

.v2-stack__canvas {
  position: relative;
}

.v2-stack__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.v2-stack__svg .x-label {
  fill: #c3d3e0;
  font-size: 12px;
}

.v2-layer {
  transition: transform 700ms var(--v2-ease), opacity 400ms ease;
}

.v2-layer polygon,
.v2-layer path {
  transition: stroke 300ms ease;
}

.v2-stack__stage[data-mode="gap"] .v2-layer--glue {
  opacity: 0;
}

.v2-airgap,
.v2-stack-reflex {
  transition: opacity 400ms ease;
}

.v2-airgap {
  opacity: 0;
}

.v2-stack__stage[data-mode="gap"] .v2-airgap {
  opacity: 1;
}

.v2-stack__stage[data-mode="bonded"] .v2-layer {
  transform: translateY(var(--dy, 0px));
}

.v2-stack__stage[data-mode="bonded"] .v2-stack-reflex {
  opacity: 0.18;
}

.v2-layer.is-active polygon {
  stroke: #fff;
  stroke-width: 2;
}

.v2-layer.is-dim {
  opacity: 0.35;
}

.v2-hs {
  position: absolute;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--v2-navy-950);
  color: #fff;
  font: 700 14px/1 var(--v2-mono);
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.16);
  transition: transform var(--v2-fast) var(--v2-ease), background-color var(--v2-fast) ease, top 700ms var(--v2-ease), left 700ms var(--v2-ease);
}

.v2-hs:hover,
.v2-hs[aria-pressed="true"] {
  background: var(--v2-cyan);
  color: var(--v2-navy-950);
  transform: scale(1.08);
}

.v2-stack__side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.v2-seg {
  display: inline-flex;
  justify-self: start;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--v2-line-2);
  background: rgba(255, 255, 255, 0.03);
}

.v2-seg button {
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--v2-muted);
font-weight: 600;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}

.v2-seg button:hover {
  color: #fff;
}

.v2-seg button[aria-pressed="true"] {
  background: var(--v2-ink);
  color: var(--v2-navy-950);
}

.v2-parts {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: v2part;
}

.v2-parts li {
  counter-increment: v2part;
}

.v2-parts button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 22px 14px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--v2-line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--v2-ink-2);
font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}

.v2-parts button::before {
  content: counter(v2part);
  font: 700 12px var(--v2-mono);
  color: var(--v2-muted-2);
}

.v2-parts button:hover {
  border-color: rgba(0, 229, 255, 0.45);
  color: #fff;
}

.v2-parts button[aria-pressed="true"] {
  border-color: var(--v2-cyan);
  background: rgba(0, 229, 255, 0.07);
  color: #fff;
}

.v2-sw {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.v2-sw--glass {
  background: var(--v2-glass);
}

.v2-sw--glue {
  background: var(--v2-glue);
}

.v2-sw--touch {
  background: var(--v2-touch);
}

.v2-sw--panel {
  background: #3d5573;
}

.v2-sw--frame {
  background: #56616f;
}

.v2-detail {
  position: relative;
  padding: 20px 56px 20px 22px;
  border-radius: var(--v2-radius);
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: linear-gradient(170deg, rgba(0, 229, 255, 0.07), rgba(10, 16, 24, 0.9));
  animation: v2-in 360ms var(--v2-ease);
}

.v2-detail[hidden] {
  display: none;
}

.v2-detail__title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.v2-detail__text {
  margin: 0;
  color: var(--v2-ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.v2-detail__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--v2-line-2);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.v2-detail__close:hover {
  border-color: rgba(0, 229, 255, 0.55);
}

@keyframes v2-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* =====================================================================
   7 · DISPLAY · Verfahren-Tabs (B6)
===================================================================== */
.v2-tech {
  margin-top: clamp(28px, 4vw, 44px);
  overflow: hidden;
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-line-2);
  background: linear-gradient(180deg, rgba(21, 32, 43, 0.85), rgba(7, 10, 18, 0.95));
}

.v2-tech__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--v2-line-2);
}

.v2-tech__list [role="tab"] {
  position: relative;
  min-height: 64px;
  padding: 14px 18px;
  border: 0;
  border-right: 1px solid var(--v2-line);
  background: transparent;
  color: var(--v2-muted);
font-weight: 650;
  font-size: 17px;
  line-height: 1.15;
  font-family: inherit;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}

.v2-tech__list [role="tab"]:last-child {
  border-right: 0;
}

.v2-tech__list [role="tab"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--v2-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--v2-ease);
}

.v2-tech__list [role="tab"]:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
}

.v2-tech__list [role="tab"][aria-selected="true"] {
  color: #fff;
  background: rgba(0, 229, 255, 0.05);
}

.v2-tech__list [role="tab"][aria-selected="true"]::after {
  transform: scaleX(1);
}

.v2-tech__panel {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(22px, 4vw, 40px);
}

.v2-tech__panel[hidden] {
  display: none;
}

.v2-tech__panel .v2-glyph {
  max-width: 240px;
  animation: v2-in 420ms var(--v2-ease);
}

.v2-tech__panel p {
  margin: 0;
  max-width: 58ch;
  color: var(--v2-ink-2);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
}

/* =====================================================================
   8 · Anforderungs-Check (B8) · Startseite · Display · Baumaschinen
===================================================================== */
.v2-req {
  margin: 22px 0;
  padding: clamp(18px, 2.6vw, 24px);
  border-radius: var(--v2-radius);
  border: 1px solid rgba(0, 229, 255, 0.28);
  background:
    radial-gradient(500px 220px at 0% 0%, rgba(0, 229, 255, 0.08), transparent 70%),
    linear-gradient(170deg, rgba(21, 32, 43, 0.85), rgba(7, 10, 18, 0.92));
  box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.9);
}

.v2-req__lead {
  margin: 0 0 14px;
  color: var(--v2-ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

.v2-req__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--v2-line-2);
  background: rgba(4, 7, 13, 0.55);
  color: var(--v2-ink-2);
font-weight: 550;
  font-size: 14.5px;
  line-height: 1.2;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease, color var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease);
}

.v2-chip::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: transparent center / 12px no-repeat;
  transition: background-color var(--v2-fast) ease, border-color var(--v2-fast) ease;
}

.v2-chip:hover {
  border-color: rgba(0, 229, 255, 0.55);
  color: #fff;
}

.v2-chip:active {
  transform: scale(0.97);
}

.v2-chip[aria-pressed="true"] {
  border-color: var(--v2-cyan);
  background: rgba(0, 229, 255, 0.12);
  color: #fff;
}

.v2-chip[aria-pressed="true"]::before {
  border-color: var(--v2-cyan);
  background-color: var(--v2-cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23021015' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.v2-req__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--v2-line-2);
}

.v2-req__go {
  gap: 10px;
}

.v2-req__count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--v2-orange-700);
  font: 700 13px/1 var(--v2-mono);
}

.v2-req__count[hidden] {
  display: none;
}

.v2-req__ghost {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  background: none;
  color: var(--v2-ink-2);
font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  font-family: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 4px;
  cursor: pointer;
}

.v2-req__ghost:hover {
  color: #fff;
  text-decoration-color: var(--v2-cyan);
}

.v2-req__ghost[disabled] {
  opacity: 0.4;
  cursor: default;
}

.v2-req__status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: #7ff0c4;
  font-size: 14px;
  line-height: 1.4;
}

.v2-req__status.is-error {
  color: #ffb4a0;
}

/* Formularfeld nach Übernahme kurz hervorheben */
.v2-flash {
  animation: v2-flash 1.6s ease-out 1;
}

@keyframes v2-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.75);
  }

  100% {
    box-shadow: 0 0 0 14px rgba(0, 229, 255, 0);
  }
}

/* Display: Check im Abschlussband */
.cta-inline__text .v2-req {
  margin-bottom: 0;
}

/* =====================================================================
   9 · Abschluss-Karten (A10)
===================================================================== */
body[data-pilot-page="home"] #faq + .section--accent > .container,
body[data-pilot-page="loesung"] #contact + .section--accent > .container,
body[data-pilot-page="baumaschinen"] #contact + .section--accent > .container,
body[data-pilot-page="branche"] [id$="-cta"].section--accent > .container,
body[data-pilot-page="reinraum"] #cleanroom-audit > .container,
body[data-pilot-page="display-sub"] .section--accent .cta-inline,
body[data-pilot-page="display"] .section--accent .cta-inline {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1080px;
  padding: clamp(36px, 6vw, 80px) clamp(22px, 5vw, 72px);
  border-radius: 32px !important;
  border: 1px solid rgba(0, 229, 255, 0.26) !important;
  background:
    radial-gradient(640px 360px at 50% -10%, rgba(0, 229, 255, 0.16), transparent 62%),
    radial-gradient(460px 280px at 100% 110%, rgba(255, 140, 0, 0.13), transparent 70%),
    linear-gradient(160deg, rgba(14, 22, 33, 0.96), rgba(4, 7, 13, 0.98)) !important;
  box-shadow: 0 60px 120px -70px rgba(0, 229, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Lichtkante oben */
body[data-pilot-page="home"] #faq + .section--accent > .container::before,
body[data-pilot-page="loesung"] #contact + .section--accent > .container::before,
body[data-pilot-page="baumaschinen"] #contact + .section--accent > .container::before,
body[data-pilot-page="branche"] [id$="-cta"].section--accent > .container::before,
body[data-pilot-page="reinraum"] #cleanroom-audit > .container::before,
body[data-pilot-page="display-sub"] .section--accent .cta-inline::before,
body[data-pilot-page="display"] .section--accent .cta-inline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.9), transparent);
}

body[data-pilot-page="home"] #faq + .section--accent .section__title,
body[data-pilot-page="loesung"] #contact + .section--accent .section__title,
body[data-pilot-page="baumaschinen"] #contact + .section--accent .section__title,
body[data-pilot-page="branche"] [id$="-cta"].section--accent .section__title,
body[data-pilot-page="reinraum"] #cleanroom-audit .section__title {
  font-size: clamp(32px, 4.6vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

/* Bestands-Telefonbutton (weiß, Inline-Stil) als ruhiger Glas-Button */
body[data-pilot-page="home"] #faq + .section--accent a[href^="tel:"],
body[data-pilot-page="loesung"] #contact + .section--accent a[href^="tel:"],
body[data-pilot-page="baumaschinen"] #contact + .section--accent a[href^="tel:"] {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: none;
}

body[data-pilot-page="home"] #faq + .section--accent a[href^="tel:"]:hover,
body[data-pilot-page="loesung"] #contact + .section--accent a[href^="tel:"]:hover,
body[data-pilot-page="baumaschinen"] #contact + .section--accent a[href^="tel:"]:hover {
  border-color: rgba(0, 229, 255, 0.6) !important;
  background: rgba(0, 229, 255, 0.08) !important;
}

/* Display: Abschlussband mit Check zweispaltig */
body[data-pilot-page="display-sub"] .section--accent .cta-inline,
body[data-pilot-page="display"] .section--accent .cta-inline {
  align-items: flex-end;
  margin-inline: auto;
}

body[data-pilot-page="display-sub"] .section--accent .cta-inline__text,
body[data-pilot-page="display"] .section--accent .cta-inline__text {
  max-width: 660px;
}

body[data-pilot-page="display-sub"] .section--accent .cta-inline__text h3,
body[data-pilot-page="display"] .section--accent .cta-inline__text h3 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 12px;
}

body[data-pilot-page="display-sub"] .section--accent .cta-inline__text > p,
body[data-pilot-page="display"] .section--accent .cta-inline__text > p {
  font-size: 16.5px;
  color: var(--v2-ink-2);
}

body[data-pilot-page="display-sub"] .section--accent .cta-inline__actions,
body[data-pilot-page="display"] .section--accent .cta-inline__actions {
  flex-direction: column;
  align-items: stretch;
}

/* Reinraum: Audit-Abschluss mit Telefon als zweitem Weg */
.v2-audit-phone {
  margin-left: 12px;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .v2-audit-phone {
    margin: 12px 0 0;
  }

  body[data-pilot-page="reinraum"] #cleanroom-audit .contact__grid .btn {
    width: 100%;
    white-space: normal;
  }
}

/* =====================================================================
   10 · REINRAUM · Kinobild (A5), Galerie, Fotos je Ablaufschritt
===================================================================== */
.v2-cine {
  position: relative;
  margin: 0;
  background: var(--v2-navy-950);
}

.v2-cine__frame {
  position: relative;
  height: clamp(300px, 46vw, 640px);
  overflow: hidden;
}

.v2-cine__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 13, 0.35) 0%, rgba(4, 7, 13, 0) 30%, rgba(4, 7, 13, 0) 60%, rgba(4, 7, 13, 0.9) 100%);
  pointer-events: none;
}

.v2-cine__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Desktop: Bild öffnet sich beim Scrollen (design-v2.js setzt --p) */
.v2-cine.is-live {
  height: 150vh;
}

.v2-cine.is-live .v2-cine__frame {
  position: sticky;
  top: var(--v2-header);
  height: calc(100vh - var(--v2-header));
  clip-path: inset(calc((1 - var(--p, 1)) * 10%) calc((1 - var(--p, 1)) * 16%) round calc((1 - var(--p, 1)) * 28px));
}

.v2-cine.is-live .v2-cine__img {
  transform: scale(calc(1.14 - var(--p, 1) * 0.14));
}

.v2-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 18px;
  padding-bottom: clamp(56px, 7vw, 96px);
}

.v2-gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--v2-line);
}

.v2-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--v2-ease);
}

.v2-gallery figure:hover img {
  transform: scale(1.05);
}

@media (max-width: 720px) {
  .v2-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .v2-gallery figure:first-child {
    grid-column: 1 / -1;
  }
}

/* Ablauf: Foto je Schritt (alle Schritte sichtbar) */
.v2-step-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 2px 0 14px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--v2-line-2);
  filter: saturate(0.9);
}

@media (min-width: 720px) {
  .process-list__item:has(> .v2-step-img) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 26px;
    align-items: start;
    padding-bottom: 34px !important;
  }

  .process-list__item > .v2-step-img {
    grid-row: 1 / span 2;
    aspect-ratio: 4 / 3;
    margin: 0;
  }

  .process-list__item:has(> .v2-step-img) > .process-list__title {
    padding-top: 2px;
  }
}

/* Desktop/Tablet: weniger Leerraum über dem Hero, Anfrage-Button im ersten Bildschirm */
@media (min-width: 641px) {
  body[data-pilot-page] #hero .hero__container {
    padding-top: 44px !important;
    padding-bottom: 64px !important;
  }

  body[data-pilot-page] .hero__content--modern {
    padding-top: 24px;
  }

  /* Telefon + Anfrage nebeneinander statt umgebrochen */
  body[data-pilot-page="home"] .hero__actions--modern {
    max-width: 720px;
  }
}

/* =====================================================================
   11 · Mobile Anfrageführung: Anfrage-Button früher sichtbar
       (nur visuelle Reihenfolge nicht fokussierbarer Hero-Listen; Texte
       bleiben vollständig, Tab-Reihenfolge unverändert)
===================================================================== */
@media (max-width: 640px) {
  body[data-pilot-page] #hero.hero {
    min-height: 0;
  }

  body[data-pilot-page] #hero .hero__container {
    padding-top: 28px !important;
    padding-bottom: 40px !important;
  }

  body[data-pilot-page] .hero__content--modern {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
  }

  body[data-pilot-page] .hero__content--modern > * {
    order: 2;
  }

  body[data-pilot-page] .hero__content--modern > .hero__actions {
    order: 3;
    margin-bottom: 22px;
  }

  body[data-pilot-page] .hero__content--modern > .hero__highlights {
    order: 4;
  }

  body[data-pilot-page] .hero__content--modern > .hero__badges {
    order: 5;
  }

  body[data-pilot-page] .hero__eyebrow {
    align-self: flex-start;
    margin-bottom: 14px;
  }

  body[data-pilot-page] .hero__headline--modern {
    font-size: 31px !important;
    margin-bottom: 12px;
  }

  body[data-pilot-page] .hero__subheadline--modern {
    font-size: 15.5px !important;
    line-height: 1.55;
    margin-bottom: 18px;
  }
}

/* Sehr schmale Geräte: lange Bestands-H1 kompakter, damit der Anfrage-Button sichtbar bleibt */
@media (max-width: 400px) {
  body[data-pilot-page] .hero__headline--modern {
    font-size: 27px !important;
  }

  body[data-pilot-page] .hero__eyebrow {
    font-size: 11.5px;
    padding: 6px 10px;
    margin-bottom: 10px;
  }

  body[data-pilot-page] .hero__content--modern .breadcrumb {
    margin-bottom: 10px;
  }
}

/* =====================================================================
   12 · Responsiv
===================================================================== */
@media (max-width: 1023px) {
  .v2-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-pilot-page="display"] .section--accent .cta-inline {
    align-items: stretch;
  }

  body[data-pilot-page="display"] .section--accent .cta-inline__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .v2-tech__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-tech__list [role="tab"]:nth-child(2) {
    border-right: 0;
  }

  .v2-tech__list [role="tab"]:nth-child(-n + 2) {
    border-bottom: 1px solid var(--v2-line);
  }

  .v2-tech__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .v2-tech__panel .v2-glyph {
    max-width: 180px;
  }

  .v2-cmp--wide {
    aspect-ratio: 4 / 3.4;
  }

  .v2-cmp--wide .v2-hmi {
    inset: 12% 9% 14%;
  }
}

@media (max-width: 480px) {
  .v2-tabs {
    display: flex;
  }

  .v2-tabs [role="tab"] {
    flex: 1;
    padding: 8px 10px;
  }

  .v2-hs {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    font-size: 13px;
  }

  .v2-chip {
    font-size: 14px;
  }

  .v2-req__go {
    width: 100%;
  }

  .v2-cmp__tag {
    top: 10px;
    padding: 6px 8px;
    font-size: 10px;
  }

  .v2-cmp__tag--before {
    left: 10px;
  }

  .v2-cmp__tag--after {
    right: 10px;
  }
}

/* =====================================================================
   13 · Reduzierte Bewegung: Endzustände, keine Übergänge
===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .v2-mini__l--glue,
  .v2-detail,
  .v2-tech__panel .v2-glyph,
  .v2-flash {
    animation: none;
  }

  .v2-layer,
  .v2-hs,
  .v2-glyph .g-glass,
  .v2-glyph .g-panel,
  .card > .v2-card-img,
  .v2-gallery img,
  .v2-tech__list [role="tab"]::after,
  .v2-cmp.is-animating .v2-cmp__layer--before,
  .v2-cmp.is-animating .v2-cmp__handle {
    transition: none !important;
  }

  .card:hover > .v2-card-img,
  .v2-gallery figure:hover img,
  .card--tech:hover .g-glass,
  .card--tech:hover .g-panel,
  .adhesive-card:hover .g-glass,
  .adhesive-card:hover .g-panel {
    transform: none;
  }

  .v2-flash {
    box-shadow: 0 0 0 3px var(--v2-cyan);
  }

  .card:hover > .v2-card-img[src*="automotive_rugged"] {
    transform: scale(1.42);
  }
}

/* =====================================================================
   14 · STUFE 3 · HIGH-END-FOKUSMODULE (nur auf den Musterseiten eingebunden)
   Konzepte nach 21st-MCP-Recherche (Hairline Exploded, Scroll-Timeline,
   Image Comparison) und UI-UX-Pro-Max-Regeln, umgesetzt in CSS/SVG.
===================================================================== */
.v2-module-kicker {
  margin: 0 0 14px;
  font: 600 11.5px/1.3 var(--v2-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-cyan);
}

/* Dezentes Einblenden (einmalig; ohne JS/Reduced Motion sofort sichtbar) */
.v2-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--v2-ease), transform 400ms var(--v2-ease);
}

.v2-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Gemeinsamer Bühnen-Container für technische Grafiken (Blueprint) */
.v2-fog__stage,
.v2-size__canvas {
  position: relative;
  padding: clamp(14px, 2.6vw, 26px);
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-line-2);
  background:
    linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(120% 90% at 50% 0%, #15243a 0%, #09111b 72%);
  box-shadow: 0 50px 90px -60px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.v2-fog__stage svg,
.v2-size__canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Regler (Fogging, Größenrechner): große Touch-Fläche, sichtbarer Fokus */
.v2-fog__range input[type="range"],
.v2-size__field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.v2-fog__range input[type="range"]::-webkit-slider-runnable-track,
.v2-size__field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--v2-track, rgba(255, 255, 255, 0.14));
}

.v2-fog__range input[type="range"]::-moz-range-track,
.v2-size__field input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--v2-track, rgba(255, 255, 255, 0.14));
}

.v2-fog__range input[type="range"]::-webkit-slider-thumb,
.v2-size__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.5);
}

.v2-fog__range input[type="range"]::-moz-range-thumb,
.v2-size__field input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.5);
}

.v2-fog__range input[type="range"]:focus-visible,
.v2-size__field input[type="range"]:focus-visible {
  outline: 2px solid var(--v2-cyan);
  outline-offset: 4px;
  border-radius: 8px;
}

/* --- Taupunkt-Querschnitt (Kondensation & Fogging) --- */
.v2-fog {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: clamp(48px, 7vw, 88px) 0 0;
}

.f-case { fill: #1a2129; stroke: #3a4552; stroke-width: 1.2; }
.f-glass { fill: rgba(143, 216, 255, 0.2); stroke: rgba(190, 232, 255, 0.8); }
.f-glint { fill: rgba(255, 255, 255, 0.12); }
.f-air { stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 5 5; }
.f-moist circle { fill: rgba(170, 220, 255, 0.55); }
.f-drops ellipse { fill: rgba(200, 235, 255, 0.85); stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.6; }
.f-glue { fill: rgba(0, 229, 255, 0.42); stroke: rgba(0, 229, 255, 0.95); }
.f-panel { fill: #13263a; stroke: #3d5573; }
.f-ui { fill: none; stroke: var(--v2-cyan); stroke-width: 2.5; opacity: 0.85; }

.f-drops {
  opacity: var(--fog, 0);
  transition: opacity 300ms ease;
}

.f-moist {
  opacity: calc(1 - var(--fog, 0) * 0.7);
  transition: opacity 300ms ease;
}

/* Schleier über dem Display, solange Kondensat vorhanden ist */
.f-ui {
  opacity: calc(0.85 - var(--fog, 0) * 0.55);
  transition: opacity 300ms ease;
}

.f-glue,
.f-lab-glue {
  opacity: 0;
  transition: opacity 400ms ease;
}

.v2-fog__stage[data-mode="bonded"] .f-glue,
.v2-fog__stage[data-mode="bonded"] .f-lab-glue {
  opacity: 1;
}

.v2-fog__stage[data-mode="bonded"] .f-air,
.v2-fog__stage[data-mode="bonded"] .f-moist,
.v2-fog__stage[data-mode="bonded"] .f-lab-gap {
  opacity: 0;
}

.f-air,
.f-lab-gap {
  transition: opacity 400ms ease;
}

.v2-fog__side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.v2-fog__side .v2-module-kicker {
  margin: 0;
}

.v2-fog__range {
  display: grid;
  gap: 2px;
  --v2-track: linear-gradient(90deg, #ffb46b 0%, #ffd9a8 40%, rgba(0, 229, 255, 0.9) 55%, #7cc7ff 100%);
}

.v2-fog__rlabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink-2);
}

.v2-fog__scale {
  display: flex;
  justify-content: space-between;
  font: 600 11px/1 var(--v2-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-muted-2);
}

.v2-fog__dew {
  color: var(--v2-cyan);
  transform: translateX(10%);
}

.v2-fog__text {
  min-height: 4.8em;
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--v2-line-2);
  border-left: 2px solid var(--v2-cyan);
  background: rgba(255, 255, 255, 0.025);
  color: var(--v2-ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

/* --- Hygiene-Querschnitt (Medizintechnik) --- */
.v2-hyg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(40px, 6vw, 72px) 0 0;
}

.v2-hyg__pane {
  padding: 22px 22px 18px;
  border-radius: var(--v2-radius);
  border: 1px solid var(--v2-line-2);
  background:
    linear-gradient(rgba(0, 229, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(170deg, rgba(21, 32, 43, 0.85), rgba(7, 10, 18, 0.95));
}

.v2-hyg__pane--on {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 40px 80px -60px rgba(0, 229, 255, 0.5);
}

.v2-hyg__pane svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 6px 0 10px;
}

.v2-hyg__title {
  margin: 0;
  font: 600 12px/1.3 var(--v2-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v2-hyg__pane--on .v2-hyg__title {
  color: var(--v2-cyan);
}

.v2-hyg__cap {
  margin: 0;
  color: var(--v2-ink-2);
  font-size: 15px;
  font-weight: 600;
}

.v2-hyg > figcaption {
  grid-column: 1 / -1;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: inherit;
  font-size: 13px;
}

.h-case { fill: #1a2129; stroke: #3a4552; }
.h-glass { fill: rgba(143, 216, 255, 0.22); stroke: rgba(190, 232, 255, 0.8); }
.h-air { fill: rgba(255, 255, 255, 0.02); stroke: rgba(255, 255, 255, 0.28); stroke-dasharray: 4 4; }
.h-glue { fill: rgba(0, 229, 255, 0.45); stroke: rgba(0, 229, 255, 0.9); }
.h-panel { fill: #13263a; stroke: #3d5573; }
.h-edge { stroke: var(--v2-reflex); stroke-width: 2; }
.h-dirt circle { fill: #b58a5a; }
.h-call { fill: none; stroke: rgba(0, 229, 255, 0.7); stroke-width: 1.2; }
.h-call--warn { stroke: rgba(255, 156, 90, 0.8); }
.h-wipe { stroke: rgba(0, 229, 255, 0.55); stroke-width: 1.5; stroke-dasharray: 2 6; }
.h-warn { fill: var(--v2-reflex); }
.h-ok { fill: var(--v2-cyan); }

/* --- Größenrechner (Große Displays) --- */
.v2-size {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: clamp(36px, 5vw, 56px) 0 clamp(28px, 4vw, 44px);
  text-align: left;
}

.s-max { fill: rgba(255, 255, 255, 0.015); stroke: rgba(255, 255, 255, 0.35); stroke-dasharray: 6 6; }
.s-disp { fill: rgba(0, 229, 255, 0.14); stroke: var(--v2-cyan); stroke-width: 2; }
.s-diag { stroke: #ffd27a; stroke-width: 1.5; stroke-dasharray: 5 5; }

.v2-size__side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.v2-size__side .v2-module-kicker {
  margin: 0;
}

.v2-size__field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink-2);
}

.v2-size__field input {
  grid-column: 1 / -1;
}

.v2-size__out {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.v2-size__result {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  background: rgba(0, 229, 255, 0.05);
}

.v2-size__result dt {
  font: 600 11px/1.3 var(--v2-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v2-size__result dd {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 650;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.v2-size__hint {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-muted);
}

.v2-size__go {
  justify-self: start;
}

/* --- Prozessvergleich LOCA/OCA (Fachartikel) --- */
.v2-proc {
  margin: 2.2em 0 2.4em;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-line-2);
  background:
    radial-gradient(500px 240px at 0% 0%, rgba(0, 229, 255, 0.07), transparent 70%),
    linear-gradient(170deg, rgba(21, 32, 43, 0.85), rgba(7, 10, 18, 0.95));
}

.v2-proc__lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.v2-proc__name {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 650;
  color: #fff;
}

.v2-proc__name span {
  margin-left: 6px;
  font: 600 11px/1 var(--v2-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-cyan);
}

.v2-proc ol {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fortschrittslinie: wird beim Erscheinen einmal gezeichnet */
.v2-proc ol::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--v2-cyan), rgba(0, 229, 255, 0.15));
  transform-origin: top;
}

.v2-proc.v2-reveal ol::before {
  transform: scaleY(0);
  transition: transform 900ms var(--v2-ease) 150ms;
}

.v2-proc.v2-reveal.is-in ol::before {
  transform: scaleY(1);
}

.v2-proc li {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  padding: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
}

.v2-proc li svg {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.55);
  background: var(--v2-navy-900);
  fill: none;
  stroke: var(--v2-cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v2-proc li b {
  padding-top: 7px;
  color: #fff;
}

.v2-proc li span {
  color: var(--v2-muted);
  font-size: 14px;
}

@media (max-width: 1023px) {
  .v2-fog,
  .v2-size {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .v2-hyg,
  .v2-proc__lanes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-reveal,
  .v2-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .v2-proc.v2-reveal ol::before {
    transform: none;
    transition: none;
  }

  .f-drops,
  .f-moist,
  .f-ui,
  .f-glue,
  .f-air,
  .f-lab-glue,
  .f-lab-gap {
    transition: none;
  }
}

.v2-fog__side,
.v2-size__side {
  padding-right: 6px;
}

/* =====================================================================
   15 · STUFE 3B · FOTOS + TECHNISCHE BEWEGUNG (erste Umsetzungswelle)
   Fotos aus dem Medienpool (AVIF/WebP, srcset, feste Maße, lazy).
   Muster nach 21st-MCP-Recherche: Bento-Bildwand, Sticky Scroll Media,
   Line-Draw-Diagramm; Regeln UI UX Pro Max (CLS, Reduced Motion, Kontrast).
===================================================================== */
picture.v2-step-img,
.v2-photo-fig picture,
.v2-bento__tile picture {
  display: block;
  overflow: hidden;
}

picture.v2-step-img img,
.v2-photo-fig img,
.v2-bento__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Einzelfoto mit sachlicher Bildbeschreibung */
.v2-photo-fig {
  margin: 26px 0;
}

.v2-photo-fig picture {
  aspect-ratio: 3 / 2;
  border-radius: var(--v2-radius);
  border: 1px solid var(--v2-line-2);
  box-shadow: 0 34px 70px -48px rgba(0, 0, 0, 0.95);
}

.v2-photo-fig figcaption,
.v2-bento__tile figcaption,
.v2-sticky__cap {
  font: 600 11.5px/1.45 var(--v2-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v2-photo-fig figcaption {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 10px;
}

.v2-photo-fig figcaption::before {
  content: "";
  flex: 0 0 14px;
  height: 1px;
  background: var(--v2-cyan);
  transform: translateY(-3px);
}

.v2-photo-fig--wide {
  max-width: 880px;
  margin: clamp(32px, 5vw, 56px) auto 0;
}

.v2-photo-fig--wide picture {
  aspect-ratio: 21 / 9;
}

.v2-photo-fig--article {
  max-width: 720px;
}

.v2-photo-fig--portrait {
  max-width: 340px;
}

/* Hochformat im Artikel: quadratisch, unten ausgerichtet (Nadel + Klebstoff im Bild,
   Geräteaufdrucke am oberen Bildrand bleiben außerhalb) */
.v2-photo-fig--portrait picture {
  aspect-ratio: 1 / 1;
}

.v2-photo-fig--portrait img {
  object-position: 50% 100%;
}

/* Zwei Fertigungsdetails nebeneinander (Maschinenbau) */
.v2-photo-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 6px;
}

.v2-photo-duo .v2-photo-fig {
  margin: 0;
}

.v2-photo-duo picture {
  aspect-ratio: 4 / 3;
}

/* Bento-Bildwand (Reinraum): ein großes Motiv, Panorama, zwei Details */
.v2-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 230px);
  gap: 14px;
  padding-top: 18px;
  padding-bottom: clamp(56px, 7vw, 96px);
}

.v2-bento__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--v2-line);
  background: var(--v2-navy-800);
  isolation: isolate;
}

.v2-bento__tile--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.v2-bento__tile--wide {
  grid-column: span 2;
}

.v2-bento__tile picture {
  height: 100%;
}

.v2-bento__tile img {
  transition: transform 1.2s var(--v2-ease);
}

.v2-bento__tile::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(4, 7, 13, 0.88));
  pointer-events: none;
}

.v2-bento__tile figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  color: var(--v2-ink-2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.v2-bento__tile:hover img {
  transform: scale(1.04);
}

@media (max-width: 720px) {
  .v2-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 150px;
    gap: 10px;
  }

  .v2-bento__tile--hero {
    grid-row: span 2;
  }

  .v2-bento__tile figcaption {
    left: 10px;
    right: 10px;
    bottom: 8px;
    font-size: 10.5px;
  }
}

/* Sticky Technical Media (Medizintechnik-Prozess): Foto läuft mit den
   Schritten mit. Nur Desktop mit JS; sonst unverändert die Schrittliste. */
.v2-sticky {
  display: none;
}

@media (min-width: 1024px) {
  html.v2-js .section__container:has(> .v2-sticky) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    grid-template-areas: "head head" "steps media" "cta cta";
    column-gap: clamp(28px, 4vw, 56px);
  }

  html.v2-js .section__container:has(> .v2-sticky) > .section__header { grid-area: head; }
  html.v2-js .section__container:has(> .v2-sticky) > .process-steps { grid-area: steps; }
  html.v2-js .section__container:has(> .v2-sticky) > .cta-inline { grid-area: cta; }

  html.v2-js .v2-sticky {
    display: block;
    grid-area: media;
    margin: 0;
  }

  .v2-sticky__frame {
    position: sticky;
    top: calc(var(--v2-header) + 28px);
    aspect-ratio: 4 / 3.3;
    overflow: hidden;
    border-radius: var(--v2-radius-lg);
    border: 1px solid var(--v2-line-2);
    background: var(--v2-navy-800);
    box-shadow: 0 50px 90px -60px rgba(0, 0, 0, 0.95);
  }

  .v2-sticky__img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 520ms var(--v2-ease), transform 1.1s var(--v2-ease);
  }

  .v2-sticky__img.is-on {
    opacity: 1;
    transform: none;
  }

  .v2-sticky__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v2-sticky__frame::after {
    content: "";
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(transparent, rgba(4, 7, 13, 0.9));
    pointer-events: none;
  }

  .v2-sticky__cap {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    gap: 12px;
    align-items: baseline;
    color: var(--v2-ink-2);
  }

  .v2-sticky__n {
    flex: none;
    padding: 3px 7px;
    border: 1px solid rgba(0, 229, 255, 0.45);
    border-radius: 6px;
    color: var(--v2-cyan);
  }

  html.v2-js .section__container:has(> .v2-sticky) .process-step {
    transition: border-color 300ms ease, background-color 300ms ease, transform 0.25s;
  }

  html.v2-js .section__container:has(> .v2-sticky) .process-step.is-current {
    border-color: rgba(0, 229, 255, 0.55);
    background-color: rgba(0, 229, 255, 0.05);
  }
}

/* Lichtweg-Querschnitt (Reflexion & Kontrast): Strahlen zeichnen sich
   beim Einblenden, Reflexionen folgen gestaffelt (3 gegen 1). */
.v2-xsec[data-v2-draw] {
  max-width: 760px;
  margin: clamp(32px, 5vw, 56px) auto 0;
}

.v2-xsec[data-v2-draw].v2-reveal :is(.x-panel-gap, .x-panel-bond) .x-ray {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}

/* Reflexionen behalten ihr Strichmuster (Legende) und blenden gestaffelt ein */
.v2-xsec[data-v2-draw].v2-reveal :is(.x-panel-gap, .x-panel-bond) .x-refl,
.v2-xsec[data-v2-draw].v2-reveal .x-mark {
  opacity: 0;
}

.v2-xsec[data-v2-draw].is-in :is(.x-panel-gap, .x-panel-bond) .x-ray {
  animation: v2-draw 700ms var(--v2-ease) forwards;
}

.v2-xsec[data-v2-draw].is-in :is(.x-panel-gap, .x-panel-bond) .x-refl,
.v2-xsec[data-v2-draw].is-in .x-mark {
  animation: v2-pop 300ms ease forwards;
}

.v2-xsec[data-v2-draw].is-in .x-panel-bond .x-ray { animation-delay: 150ms; }
.v2-xsec[data-v2-draw].is-in .x-panel-gap .x-refl:nth-of-type(2) { animation-delay: 600ms; }
.v2-xsec[data-v2-draw].is-in .x-panel-gap .x-refl:nth-of-type(3) { animation-delay: 800ms; }
.v2-xsec[data-v2-draw].is-in .x-panel-gap .x-refl:nth-of-type(4) { animation-delay: 1000ms; }
.v2-xsec[data-v2-draw].is-in .x-panel-bond .x-refl { animation-delay: 750ms; }
.v2-xsec[data-v2-draw].is-in .x-panel-gap .x-mark:nth-of-type(1) { animation-delay: 550ms; }
.v2-xsec[data-v2-draw].is-in .x-panel-gap .x-mark:nth-of-type(2) { animation-delay: 750ms; }
.v2-xsec[data-v2-draw].is-in .x-panel-gap .x-mark:nth-of-type(3) { animation-delay: 950ms; }
.v2-xsec[data-v2-draw].is-in .x-panel-bond .x-mark { animation-delay: 700ms; }

@keyframes v2-draw {
  0%, 99% { marker-end: none; }
  100% { stroke-dashoffset: 0; }
}

@keyframes v2-pop {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* QA-Befund Stufe 3 (Fogging-Regler bei langsamer CPU): Neuberechnung auf
   die Bühne begrenzen, Deckkraft-Übergänge auf eigener Ebene */
.v2-fog__stage {
  contain: layout paint;
}

.f-drops,
.f-moist,
.f-ui {
  will-change: opacity;
}

@media (max-width: 760px) {
  .v2-photo-fig--portrait {
    max-width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-bento__tile img,
  .v2-sticky__img {
    transition: none !important;
  }

  .v2-bento__tile:hover img {
    transform: none;
  }
}

/* =====================================================================
   16 · STUFE 3C · PREMIUM VISUAL STORYTELLING
   Maßstab: Design-Lab-Prototypen A (Cinematic), B (3D-Schichtaufbau),
   C (horizontale Strecke, Umriss-Ziffern). 21st-MCP-Muster: Horizontal
   Scroll Gallery (gepinnt), Hairline Exploded (isometrische Ebenen).
   UI UX Pro Max: kein Scroll-Jacking, Reduced Motion = Endzustand,
   mobil Wischen statt Pinning, Inhalte ohne JS vollständig.
===================================================================== */

/* ---------- 16.1 Isometrische Schichten (SVG, gemeinsame Optik) ---------- */
.hx {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hx-floor { stroke: rgba(0, 229, 255, 0.07); stroke-width: 1; }
.hx-p-t { fill: #0d1824; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.hx-p-l { fill: #0a131d; stroke: rgba(255, 255, 255, 0.12); }
.hx-p-r { fill: #070d15; stroke: rgba(255, 255, 255, 0.12); }
.hx-screen { fill: #061019; }
.hx-ui-bg { fill: rgba(0, 229, 255, 0.1); }
.hx-ui { fill: var(--v2-cyan); opacity: 0.82; }
.hx-g-t { fill: rgba(0, 229, 255, 0.36); stroke: rgba(0, 229, 255, 0.95); stroke-width: 1; }
.hx-g-l, .hx-g-r { fill: rgba(0, 229, 255, 0.55); }
.hx-f-t { fill: rgba(160, 220, 255, 0.26); stroke: rgba(200, 238, 255, 0.85); stroke-width: 1; }
.hx-f-l, .hx-f-r { fill: rgba(160, 220, 255, 0.4); }
.hx-ln-t { fill: rgba(255, 180, 100, 0.14); stroke: rgba(255, 196, 130, 0.75); stroke-width: 1; }
.hx-ln-curl { fill: none; stroke: rgba(255, 196, 130, 0.75); stroke-width: 1.4; }
.hx-c-t { fill: rgba(170, 220, 255, 0.1); stroke: rgba(225, 242, 255, 0.8); stroke-width: 1.1; }
.hx-c-l { fill: rgba(170, 220, 255, 0.22); stroke: rgba(225, 242, 255, 0.4); }
.hx-c-r { fill: rgba(170, 220, 255, 0.15); stroke: rgba(225, 242, 255, 0.4); }
.hx-glare { fill: rgba(255, 255, 255, 0.32); }
.hx-t-t { fill: rgba(0, 229, 255, 0.05); stroke: rgba(0, 229, 255, 0.55); stroke-width: 1; }
.hx-t-l, .hx-t-r { fill: rgba(0, 229, 255, 0.25); }
.hx-tg { stroke: rgba(0, 229, 255, 0.3); stroke-width: 0.8; }
.hx-lab line { stroke: rgba(255, 255, 255, 0.32); stroke-width: 1; }
.hx-lab circle { fill: var(--v2-cyan); }
.hx-lab text,
.hx-tag {
  font: 600 13px/1 var(--v2-mono);
  letter-spacing: 0.12em;
  fill: var(--v2-muted);
}
.hx-tag { fill: var(--v2-cyan); }
.hx-tag--uv { fill: #b9a3ff; }
.hx-sw { stroke: var(--v2-cyan); stroke-width: 2.4; stroke-linecap: round; }
.hx-nz-body { fill: #263646; stroke: rgba(255, 255, 255, 0.28); }
.hx-nz-neck { fill: #8fa3b8; }
.hx-nz-tip { fill: #d5dee8; }
.hx-drop { fill: var(--v2-cyan); }
.hx-bead { fill: none; stroke: var(--v2-cyan); stroke-width: 5; stroke-linecap: round; opacity: 0.9; stroke-dasharray: 100; stroke-dashoffset: 0; }
.hx-dot { fill: var(--v2-cyan); }
.hx-vac-l { fill: none; stroke: rgba(0, 229, 255, 0.5); stroke-width: 1.2; stroke-dasharray: 6 6; }
.hx-lamp-t { fill: #1c1533; stroke: #8f72ff; }
.hx-lamp-l, .hx-lamp-r { fill: #140f25; stroke: rgba(143, 114, 255, 0.5); }
.hx-ray-uv { stroke: #a58bff; stroke-width: 2; opacity: 0.85; stroke-dasharray: 100; stroke-dashoffset: 0; }
.hx-arrow { fill: none; stroke: var(--v2-cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hx-auto-shell { fill: rgba(0, 229, 255, 0.03); stroke: rgba(0, 229, 255, 0.45); stroke-width: 1.4; stroke-dasharray: 2 7; }
.hx-beam { fill: rgba(255, 232, 180, 0.07); }
.hx-ray-in { stroke: #ffd27a; stroke-width: 2.2; stroke-dasharray: 100; stroke-dashoffset: 0; }
.hx-ray-refl { stroke: #ffa86b; stroke-width: 2; stroke-dasharray: 6 5; }
.hx-hit { fill: #ff9d4a; }
.hx--s4.hx--loca .hx-g-t { fill: rgba(0, 229, 255, 0.55); }
.hx--s5 .hx-glare, .hx--s4 .hx-glare, .hx--s3 .hx-glare { opacity: 0.25; }

/* Endlagen je Szene (ohne JS / Reduced Motion sichtbar) */
.hx--s1 :is(.hx-glass, .hx-move-glass) { transform: translateY(-110px); }
.hx--s2 .hx-glass { transform: translateY(-175px); }
.hx--s2 .hx-liner { transform: translate(18px, -26px); }
.hx--s3.hx--loca .hx-dose { opacity: 0; }

/* Startlagen: nur wenn die Strecke läuft und die Szene noch nicht aktiv ist */
.v2-hstory.is-live .hx :is(.hx-glass, .hx-move-glass, .hx-film, .hx-glue, .hx-dose, .hx-liner, .hx-press, .hx-auto, .hx-sweep, .hx-drop) {
  transition: transform 1.1s var(--v2-ease) 0.2s, opacity 0.8s ease 0.2s;
}

.v2-hstory.is-live .hx :is(.hx-bead, .hx-ray-uv, .hx-ray-in) {
  transition: stroke-dashoffset 1.1s var(--v2-ease) 0.35s;
}

.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s1 .hx-sweep { transform: translateX(-120px); opacity: 0; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s2 .hx-bead { stroke-dashoffset: 100; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s2 .hx-drop { transform: translateY(-26px); opacity: 0; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s2 .hx-dot { opacity: 0; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s2 .hx-film { transform: translateY(-60px); opacity: 0; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s2 .hx-liner { transform: translate(0, -40px); opacity: 0; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s3 .hx-glass { transform: translateY(-110px); }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s3 .hx-glue { opacity: 0; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s3.hx--loca .hx-dose { opacity: 1; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s3 .hx-press { transform: translateY(-30px); opacity: 0; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s4 .hx-ray-uv { stroke-dashoffset: 100; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s4 .hx-auto { transform: scale(1.12); transform-origin: center; opacity: 0; }
.v2-hstory.is-live .v2-hscene:not(.is-active) .hx--s5 .hx-ray-in { stroke-dashoffset: 100; }

.hx .hx-dot { transition: opacity 0.6s ease 0.9s; }
.hx .hx-auto { transform-box: fill-box; transform-origin: center; }

/* ---------- 16.2 Horizontale Prozess-Erzählung (Signatur) ---------- */
.v2-hstory {
  --hs-pad: max(24px, calc((var(--v2-vw, 100vw) - 1200px) / 2));
  position: relative;
  margin: clamp(56px, 8vw, 110px) 0 0;
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
  background:
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(90% 70% at 70% 40%, #10213a 0%, #070b12 70%);
}

/* Aus einer Textspalte heraus volle Breite (nur mit JS: Breite ohne Scrollleiste) */
html.v2-js .v2-hstory--bleed {
  margin-left: calc(50% - var(--v2-vw) / 2);
  margin-right: calc(50% - var(--v2-vw) / 2);
}

.v2-hstory__sticky {
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0;
  overflow: hidden;
}

.v2-hstory__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 0 var(--hs-pad);
}

.v2-hstory__kicker {
  margin: 0;
  font: 600 12px/1.3 var(--v2-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-cyan);
}

.v2-hstory__tabs {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--v2-line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.v2-hstory__tabs button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--v2-muted);
  font: 700 13px/1 var(--v2-mono);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}

.v2-hstory__tabs button[aria-selected="true"] {
  background: var(--v2-cyan);
  color: #04131a;
}

.v2-hstory__tabs button:focus-visible,
.v2-hstory__nav button:focus-visible {
  outline: 2px solid var(--v2-cyan);
  outline-offset: 3px;
}

.v2-hstory__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 600 12px/1 var(--v2-mono);
  letter-spacing: 0.14em;
  color: var(--v2-muted-2);
}

.v2-hstory__count b {
  color: var(--v2-ink);
  font-weight: 700;
}

.v2-hstory__nav {
  display: flex;
  gap: 8px;
}

.v2-hstory__nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--v2-line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--v2-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease;
}

.v2-hstory__nav button:hover {
  border-color: var(--v2-cyan);
  background: rgba(0, 229, 255, 0.08);
}

.v2-hstory__nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

.v2-hstory__bar {
  height: 2px;
  margin: 22px var(--hs-pad) 0;
  background: var(--v2-line);
  overflow: hidden;
}

.v2-hstory__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--v2-cyan), #7cf3ff);
  transform: scaleX(var(--hp, 0.2));
  transform-origin: left;
}

.v2-hstory__track {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
  margin: clamp(26px, 4vh, 44px) 0 0;
  padding: 0 var(--hs-pad);
  list-style: none;
}

.v2-hstory__track[hidden] {
  display: none;
}

.v2-hscene {
  position: relative;
  flex: 0 0 min(1080px, 84vw);
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  min-height: clamp(360px, 60vh, 580px);
  padding: clamp(22px, 3vw, 44px);
  border: 1px solid var(--v2-line-2);
  border-radius: 26px;
  background:
    radial-gradient(70% 80% at 75% 50%, rgba(0, 229, 255, 0.07), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  box-shadow: 0 60px 120px -70px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: opacity 0.6s ease, transform 0.8s var(--v2-ease), border-color 0.6s ease;
}

.v2-hscene::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--v2-cyan), transparent 70%);
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 1.2s var(--v2-ease);
}

.v2-hstory.is-live .v2-hscene:not(.is-active) {
  opacity: 0.42;
  transform: scale(0.965);
}

.v2-hscene.is-active {
  border-color: rgba(0, 229, 255, 0.35);
}

.v2-hscene.is-active::before {
  transform: scaleX(1);
}

.v2-hscene__copy {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
}

.v2-hscene__no {
  position: absolute;
  top: -8px;
  left: -4px;
  font-size: clamp(96px, 11vw, 176px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 229, 255, 0.45);
  transition: color 0.8s ease;
}

.v2-hscene.is-active .v2-hscene__no {
  color: rgba(0, 229, 255, 0.07);
}

.v2-hscene__step {
  margin: 0;
  font: 600 12px/1.3 var(--v2-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-cyan);
}

.v2-hscene__text {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(20px, 1.85vw, 29px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v2-ink);
}

.v2-hscene__art {
  position: relative;
  z-index: 1;
}

.v2-hscene__art .hx {
  transform: scale(1.12);
  transform-origin: 40% 55%;
}

.v2-hstory__note {
  margin: 18px var(--hs-pad) 0;
  font: 600 11px/1.4 var(--v2-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-muted-2);
}

/* Foto-Szenen (Reinraum) */
.v2-hscene--photo {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  padding: 14px;
}

.v2-hscene--photo .v2-hscene__art {
  order: -1;
  height: 100%;
  min-height: clamp(320px, 54vh, 540px);
  overflow: hidden;
  border-radius: 18px;
}

.v2-hscene--photo .v2-hscene__art picture,
.v2-hscene--photo .v2-hscene__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-hscene--photo .v2-hscene__art img {
  transform: scale(1.06);
  transition: transform 1.6s var(--v2-ease);
}

.v2-hscene--photo.is-active .v2-hscene__art img {
  transform: none;
}

.v2-hscene--photo .v2-hscene__copy {
  padding: 18px 18px 18px 6px;
}

.v2-hscene--photo .v2-hscene__text {
  font-size: clamp(17px, 1.4vw, 22px);
}

/* Desktop: gepinnte Strecke (JS setzt is-pinned und die Höhe) */
@media (min-width: 1024px) {
  .v2-hstory.is-pinned .v2-hstory__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: calc(var(--v2-header) + 8px) 0 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .v2-hstory.is-pinned .v2-hstory__track {
    will-change: transform;
  }
}

/* Mobil, Tablet, Reduced Motion: wischen statt pinnen */
@media (max-width: 1023px) {
  .v2-hstory__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--hs-pad);
    padding-bottom: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .v2-hscene {
    flex-basis: min(86vw, 560px);
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    scroll-snap-align: start;
  }

  .v2-hscene__copy {
    order: 2;
    padding-top: 64px;
  }

  .v2-hscene__no {
    font-size: 92px;
  }

  .v2-hscene--photo .v2-hscene__art {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .v2-hscene--photo .v2-hscene__copy {
    padding: 70px 8px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hstory__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .v2-hscene,
  .v2-hscene::before,
  .v2-hscene--photo .v2-hscene__art img {
    transition: none !important;
  }

  .v2-hscene--photo .v2-hscene__art img {
    transform: none;
  }
}

/* ---------- 16.3 Schichtaufbau (Exploded Display Layers, gepinnt) ---------- */
.v2-layers {
  position: relative;
  margin: clamp(48px, 7vw, 96px) 0 0;
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-line-2);
  background:
    linear-gradient(rgba(0, 229, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(100% 90% at 70% 40%, #13243b 0%, #070b12 72%);
  box-shadow: 0 60px 110px -70px rgba(0, 0, 0, 0.95);
}

.v2-layers__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(22px, 3.4vw, 48px);
}

.v2-layers__side {
  display: grid;
  gap: 18px;
  align-content: center;
}

.v2-layers__kicker {
  margin: 0;
  font: 600 12px/1.3 var(--v2-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-cyan);
}

.v2-layers__modes {
  display: grid;
  gap: 8px;
}

.v2-layers__modes button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--v2-line-2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--v2-ink-2);
  font: 600 15px/1.2 inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}

.v2-layers__modes button::before {
  content: attr(data-n);
  font: 700 12px/1 var(--v2-mono);
  color: var(--v2-muted-2);
}

.v2-layers__modes button[aria-pressed="true"] {
  border-color: rgba(0, 229, 255, 0.6);
  background: rgba(0, 229, 255, 0.08);
  color: var(--v2-ink);
}

.v2-layers__modes button[aria-pressed="true"]::before {
  color: var(--v2-cyan);
}

.v2-layers__modes button:focus-visible {
  outline: 2px solid var(--v2-cyan);
  outline-offset: 3px;
}

.v2-layers__bar {
  height: 2px;
  background: var(--v2-line);
}

.v2-layers__bar span {
  display: block;
  height: 100%;
  background: var(--v2-cyan);
  transform: scaleX(calc((var(--lp, 0) + 1) / 3));
  transform-origin: left;
  transition: transform 0.6s var(--v2-ease);
}

.v2-layers .hx :is(.hx-glass, .hx-touch, .hx-glue, .hx-rays, .hx-glare, .hx-ray-refl) {
  transition: transform 0.95s var(--v2-ease), opacity 0.7s ease;
}

/* Phase 0 · Komponenten (Grundzustand, auch ohne JS) */
.v2-layers .hx-glass { transform: translateY(-150px); }
.v2-layers .hx-touch { transform: translateY(-100px); }
.v2-layers .hx-glue { transform: translateY(-50px); }
.v2-layers .hx-rays { opacity: 0; }

/* Phase 1 · Mit Luftspalt: Glas + Touch stehen über dem Display, Reflexionen an jeder Grenzfläche */
.v2-layers[data-phase="1"] .hx-glass,
.v2-layers[data-phase="1"] .hx-touch { transform: translateY(-34px); }
.v2-layers[data-phase="1"] .hx-glue { transform: none; opacity: 0; }
.v2-layers[data-phase="1"] .hx-rays { opacity: 1; transform: translateY(-34px); }
.v2-layers[data-phase="1"] .hx-ray-refl--2 { transform: translateY(34px); }
.v2-layers[data-phase="1"] .hx-glare { opacity: 1; }

/* Phase 2 · Optisch gebondet: keine Luft, nur noch die Reflexion an der Glasoberfläche */
.v2-layers[data-phase="2"] :is(.hx-glass, .hx-touch, .hx-glue) { transform: none; }
.v2-layers[data-phase="2"] .hx-glue { filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.55)); }
.v2-layers[data-phase="2"] .hx-rays { opacity: 1; }
.v2-layers[data-phase="2"] :is(.hx-ray-refl--1, .hx-ray-refl--2) { opacity: 0; }
.v2-layers[data-phase="2"] .hx-glare { opacity: 0.22; }

@media (min-width: 1024px) {
  .v2-layers.is-pinned {
    height: 230vh;
    border-radius: 0;
    border-width: 1px 0;
    margin-left: calc(50% - var(--v2-vw, 100vw) / 2);
    margin-right: calc(50% - var(--v2-vw, 100vw) / 2);
  }

  .v2-layers.is-pinned .v2-layers__inner {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: calc(var(--v2-header) + 10px);
  }
}

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

  .v2-layers__modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .v2-layers__modes button {
    justify-content: center;
    text-align: center;
    font-size: 13px;
    padding: 6px 8px;
    flex-direction: column;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-layers .hx * {
    transition: none !important;
  }
}

/* ---------- 16.4 Cinematic Industrial Panel (Foto, Maskenöffnung) ---------- */
.v2-cinepanel {
  position: relative;
  max-width: 1200px;
  margin: clamp(40px, 6vw, 84px) auto 0;
}

.v2-cinepanel__frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--v2-line-2);
  aspect-ratio: 21 / 9;
  box-shadow: 0 60px 110px -70px rgba(0, 0, 0, 0.95);
}

.v2-cinepanel__frame picture,
.v2-cinepanel__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-cinepanel__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1.2px) 0 0 / 4px 4px,
    linear-gradient(90deg, rgba(4, 7, 13, 0.55), transparent 45%),
    linear-gradient(transparent 55%, rgba(4, 7, 13, 0.85));
  pointer-events: none;
}

.v2-cinepanel figcaption {
  position: absolute;
  left: clamp(18px, 3vw, 40px);
  bottom: clamp(16px, 2.6vw, 34px);
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  max-width: 70%;
  font: 600 12px/1.45 var(--v2-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink-2);
}

.v2-cinepanel figcaption b {
  flex: none;
  padding: 4px 8px;
  border: 1px solid rgba(0, 229, 255, 0.5);
  border-radius: 6px;
  color: var(--v2-cyan);
  font-weight: 700;
}

.v2-cinepanel.v2-reveal {
  opacity: 1;
  transform: none;
}

.v2-cinepanel.v2-reveal .v2-cinepanel__frame {
  clip-path: inset(7% 9% round 24px);
  transition: clip-path 1.4s var(--v2-ease);
}

.v2-cinepanel.v2-reveal img {
  transform: scale(1.12);
  transition: transform 1.8s var(--v2-ease);
}

.v2-cinepanel.v2-reveal.is-in .v2-cinepanel__frame {
  clip-path: inset(0 round 24px);
}

.v2-cinepanel.v2-reveal.is-in img {
  transform: none;
}

@media (max-width: 720px) {
  .v2-cinepanel__frame {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  .v2-cinepanel figcaption {
    max-width: none;
    right: 16px;
    font-size: 10.5px;
  }
}

/* ---------- 16.5 Anfrageführung: nur ein oranger Button je Abschluss ---------- */
.section--accent:has(.btn--primary:not(.v2-req__go)) .v2-req__go {
  background: transparent;
  color: var(--v2-cyan);
  border: 1px solid rgba(0, 229, 255, 0.6);
  box-shadow: none;
}

.section--accent:has(.btn--primary:not(.v2-req__go)) .v2-req__go:hover {
  background: rgba(0, 229, 255, 0.1);
  color: var(--v2-ink);
}

/* Fehlender Abschluss Automotive (#auto-cta): eigener Bereich mit Check */
.v2-autocta {
  scroll-margin-top: calc(var(--v2-header) + 16px);
}

/* 16.6 · Innerhalb von Fachartikeln: Listen-/Absatzregeln des Blogs nicht übernehmen */
.v2-hstory ol.v2-hstory__track {
  margin: clamp(26px, 4vh, 44px) 0 0;
  padding: 0 var(--hs-pad);
  list-style: none;
}

.v2-hstory li.v2-hscene {
  margin: 0;
  padding: clamp(22px, 3vw, 44px);
}

.v2-hstory li.v2-hscene--photo {
  padding: 14px;
}

.v2-hstory p.v2-hstory__kicker,
.v2-hstory p.v2-hscene__step,
.v2-hstory p.v2-hscene__text {
  margin: 0;
}

.v2-hstory p.v2-hscene__text {
  font-size: clamp(20px, 1.85vw, 29px);
  line-height: 1.25;
  color: var(--v2-ink);
}

.v2-hstory p.v2-hstory__note {
  margin: 18px var(--hs-pad) 0;
}

.v2-layers p.v2-layers__kicker {
  margin: 0;
}

@media (max-width: 1023px) {
  .v2-hstory ol.v2-hstory__track {
    padding-bottom: 18px;
  }
}

/* 16.7 · Schmale Bildschirme: Beschriftungen in den isometrischen Grafiken lesbar halten */
@media (max-width: 700px) {
  .hx-lab text,
  .hx-tag {
    font-size: 22px;
    letter-spacing: 0.06em;
  }

  .hx-lab circle {
    r: 4;
  }
}

/* 16.8 · Leistung: Szenen außerhalb des Sichtbereichs nicht rendern */
.v2-hscene {
  content-visibility: auto;
  contain-intrinsic-size: auto 580px;
}

/* 16.9 · Foto-Strecke: feste Szenenhöhe (Hochformat-Fotos dürfen die Bühne nicht strecken) */
@media (min-width: 1024px) {
  .v2-hscene--photo .v2-hscene__art {
    height: clamp(320px, 54vh, 540px);
    min-height: 0;
  }
}