/* Vidotion — Startseite. Craft-Baseline (light, emerald). */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --paper: oklch(0.99 0.006 150);
  --paper-2: oklch(0.965 0.009 155);
  --ink: oklch(0.25 0.03 162);
  --dim: oklch(0.44 0.03 162);
  --faint: oklch(0.49 0.028 162);
  --emerald: oklch(0.4 0.076 162);
  --emerald-deep: oklch(0.27 0.05 160);
  --emerald-ink: oklch(0.2 0.04 160);
  --sage: oklch(0.62 0.035 150);
  --mint: oklch(0.88 0.07 165);
  --sand: oklch(0.9 0.03 82);
  --cream: oklch(0.972 0.016 88);
  --accent: var(--emerald);
  --line: oklch(0.25 0.03 162 / 0.12);
  --line-strong: oklch(0.25 0.03 162 / 0.22);

  --display: "Hanken Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;

  --t-0: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --t-1: clamp(1.15rem, 1.02rem + 0.55vw, 1.5rem);
  --h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  --h1: clamp(2.4rem, 1.2rem + 5.4vw, 5.2rem);

  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --radius: 14px;
  --maxw: 1240px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
/* KEIN scroll-behavior:smooth — Lenis übernimmt das Smooth-Scrolling.
   Mit smooth animiert der Browser auch GSAPs Scroll-Restore beim
   ScrollTrigger.refresh() → alle Trigger-Positionen werden falsch gemessen
   (Effekte/Shader "mal da, mal weg"). Anker laufen über lenis.scrollTo. */
html {
  scroll-behavior: auto;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Immer der normale Pfeil — kein Text-I-Beam über Überschriften/Absätzen.
     Links/Buttons/Inputs setzen ihren eigenen Cursor. */
  cursor: default;
}
a,
button,
summary,
label,
[role="button"] {
  cursor: pointer;
}
input,
textarea,
select {
  cursor: auto;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.serif-em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--emerald);
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--s5);
  top: var(--s5);
  z-index: 999;
  background: var(--emerald);
  color: var(--paper);
  padding: 12px var(--s5);
  border-radius: 8px;
}
:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
}

.atmos {
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  opacity: 0.4; /* keep the page close to the hero white — only a whisper of ambient */
  background:
    radial-gradient(
      36% 30% at 16% 12%,
      oklch(0.9 0.07 166 / 0.5),
      transparent 60%
    ),
    radial-gradient(
      40% 34% at 88% 28%,
      oklch(0.88 0.08 150 / 0.42),
      transparent 62%
    ),
    radial-gradient(
      46% 40% at 72% 80%,
      oklch(0.9 0.06 168 / 0.4),
      transparent 62%
    ),
    radial-gradient(
      34% 32% at 10% 72%,
      oklch(0.88 0.07 158 / 0.32),
      transparent 60%
    );
}
@media (prefers-reduced-motion: no-preference) {
  .atmos {
    animation: atmosDrift 26s ease-in-out infinite alternate;
  }
}
@keyframes atmosDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1.6%, -2%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-1.6%, 1.4%, 0) scale(1.05);
  }
}
#fluid {
  position: fixed;
  inset: 0;
  z-index: 9; /* subtle green trail above content, below the nav */
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
#fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* R47 Mobil-Perf: grain = Fullscreen-mix-blend-Composite auf jeder Scroll-
   Frame, atmos = animierter 124%-Fixed-Layer — beides auf Handys spürbar,
   optisch dort verzichtbar */
@media (max-width: 820px) {
  .grain {
    display: none;
  }
  .atmos {
    animation: none !important;
    will-change: auto;
  }
}

/* Subseiten: sanfter Farbverlauf nach unten (Papier → leicht dunkleres
   Smaragd) + feines Punktraster, das nach unten hin auftaucht. Startseite
   (.home) hat ihr eigenes dunkles Outro und bleibt unberührt. */
body:not(.home) {
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    var(--paper) 42%,
    oklch(0.93 0.022 160) 78%,
    oklch(0.89 0.032 162) 100%
  );
  min-height: 100vh;
}
body:not(.home)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    oklch(0.4 0.076 162 / 0.06) 1px,
    transparent 1.6px
  );
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 20%, #000 100%);
}

main {
  position: relative;
  z-index: 2;
}
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(var(--s5), 4vw, var(--s8));
}
.section {
  padding-block: clamp(var(--s8), 9vw, var(--s10));
}
/* sanftes Smaragd-Band statt Beige — Marken-Wash + feines Punktraster */
.section--tint {
  position: relative;
  background:
    radial-gradient(
      ellipse 70% 120% at 50% 0%,
      oklch(0.62 0.09 162 / 0.1),
      transparent 70%
    ),
    linear-gradient(180deg, oklch(0.95 0.02 162), oklch(0.965 0.012 158));
  border-block: 1px solid oklch(0.4 0.076 162 / 0.12);
}
.section--tint::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    oklch(0.4 0.076 162 / 0.14) 1px,
    transparent 1.4px
  );
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(
    ellipse 65% 70% at 50% 50%,
    #000 20%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 65% 70% at 50% 50%,
    #000 20%,
    transparent 78%
  );
}
.section--tint > .wrap {
  position: relative;
  z-index: 1;
}
.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--emerald);
  font-weight: 600;
}
.lead {
  margin-top: var(--s4);
  max-width: 52ch;
  color: var(--dim);
  font-size: var(--t-1);
}
.sec-head h2 {
  font-size: var(--h2);
  margin-top: var(--s4);
  max-width: 18ch;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease),
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.btn--primary {
  background: var(--emerald);
  color: var(--paper);
}
.btn--primary:hover {
  transform: translateY(-2px);
}
.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--emerald);
  color: var(--emerald);
  transform: translateY(-2px);
}
.btn--light {
  background: var(--paper);
  color: var(--emerald-ink);
}
.btn--light:hover {
  transform: translateY(-2px);
}

/* nav — floating dark liquid-glass pill */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: clamp(10px, 1.5vw, 18px) clamp(12px, 4vw, 24px);
  pointer-events: none; /* only the pill is interactive; hero stays clickable */
}
.nav__inner {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  width: max-content;
  max-width: min(94vw, 920px);
  margin-inline: auto;
  padding: 9px 9px 9px 22px;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
  border-radius: 999px;
  color: oklch(0.97 0.01 160);
  background: oklch(0.22 0.022 165 / 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(0.92);
  backdrop-filter: blur(16px) saturate(160%) brightness(0.92);
  border: 1px solid oklch(1 0 0 / 0.1);
  box-shadow:
    0 10px 34px -10px oklch(0.12 0.03 160 / 0.55),
    inset 0 1px 0 0 oklch(1 0 0 / 0.22),
    inset 0 -1px 0 0 oklch(0.1 0.02 160 / 0.3);
  transition:
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    padding 0.35s var(--ease);
}
/* Apple-ish specular rim — inset-shadow gloss on the lower-right edge */
.nav__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset -10px -8px 0 -11px oklch(1 0 0 / 0.9),
    inset 0 -9px 0 -8px oklch(1 0 0 / 0.85);
  opacity: 0.5;
  filter: blur(1px) brightness(1.1);
}
/* Arne: überall der HELLERE, cleanere Glas-Look der Startseite (vorher 0.82 =
   fast schwarz auf den Subpages). Jetzt nah am Start-Zustand (0.55), nur einen
   Hauch dichter für Lesbarkeit über hellem Content. */
.nav--solid .nav__inner {
  background: oklch(0.22 0.022 165 / 0.58);
  box-shadow:
    0 12px 36px -12px oklch(0.1 0.03 160 / 0.5),
    inset 0 1px 0 0 oklch(1 0 0 / 0.22),
    inset 0 -1px 0 0 oklch(0.1 0.02 160 / 0.3);
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .nav__inner {
    background: oklch(0.2 0.022 165 / 0.95);
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: inherit;
  text-shadow: 0 1px 2px oklch(0.1 0.02 160 / 0.35);
}
.brand__mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.brand__mark svg {
  width: 100%;
  height: 100%;
}
/* recolor the mark light so it reads on the dark glass */
.nav .brand__mark path {
  fill: var(--mint);
}
.nav .brand__mark path:nth-child(2),
.nav .brand__mark path:nth-child(3) {
  fill: oklch(0.8 0.045 152);
}
.nav__links {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}
.nav__links a {
  font-size: 0.92rem;
  color: oklch(0.9 0.018 160);
  text-shadow: 0 1px 2px oklch(0.1 0.02 160 / 0.3);
  transition: color 0.2s;
}
.nav__links a:hover {
  color: #fff;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: var(--s5);
}
@media (max-width: 820px) {
  .nav__links {
    display: none;
  }
  /* CTA steckt im Burger-Panel → Pill = nur Brand + Burger (aufgeräumt, kein
     umbrechender Button mehr). */
  .nav__right {
    display: none;
  }
  .nav__inner {
    width: auto;
    justify-content: space-between;
    gap: 16px;
    padding-left: 18px;
  }
}

/* nav CTA: bright mint so it reads on the near-black glass (dark emerald vanished) */
.nav .btn--primary {
  background: var(--mint);
  color: var(--emerald-ink);
}
.nav .btn--primary:hover {
  background: oklch(0.93 0.085 165);
  transform: translateY(-2px);
}

/* ---------- Mobile-Navigation (Hamburger + Panel) — .nav__links ist <=820px
   ausgeblendet; Burger + Panel werden per JS (mobileNav) gebaut. ---------- */
.nav__burger {
  display: none;
}
@media (max-width: 820px) {
  .nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    margin-inline: auto;
    background: oklch(0.95 0.01 160);
    transition:
      transform 0.3s var(--ease),
      opacity 0.2s var(--ease);
  }
  .nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}
.nav__mobile {
  pointer-events: auto;
  position: fixed;
  top: calc(clamp(10px, 1.5vw, 18px) + 62px);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 420px);
  padding: 14px;
  border-radius: 22px;
  background: oklch(0.19 0.022 165 / 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: 0 24px 60px -20px oklch(0.1 0.03 160 / 0.6);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.nav__mobile[hidden] {
  display: none;
}
@media (min-width: 821px) {
  .nav__mobile {
    display: none !important;
  }
}
.nav__mobile-h {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  margin: 10px 0 2px 14px;
}
.nav__mobile-link,
.nav__mobile-sub {
  display: block;
  padding: 13px 14px;
  border-radius: 12px;
  color: oklch(0.92 0.018 160);
  font-size: 1.02rem;
  font-weight: 500;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.nav__mobile-sub {
  padding-block: 11px;
  padding-left: 26px;
  font-size: 0.96rem;
  color: oklch(0.84 0.02 160);
}
.nav__mobile-link:hover,
.nav__mobile-sub:hover,
.nav__mobile-link:focus-visible,
.nav__mobile-sub:focus-visible {
  background: oklch(1 0 0 / 0.07);
  color: #fff;
}
.nav__mobile-cta {
  margin-top: 12px;
  justify-content: center;
  width: 100%;
}
body.nav-open {
  overflow: hidden;
}

/* hero */
.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
}
/* soft colour bleed at the bottom → grounds the laptop into the first section (no hard cut) */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    oklch(0.99 0.006 150 / 0.5) 60%,
    var(--paper) 100%
  );
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__copy {
  position: absolute;
  z-index: 3;
  left: clamp(var(--s5), 9vw, 165px);
  top: clamp(92px, 18vh, 215px);
  /* wider + flatter, sitting at the laptop-screen height (Arne: breiter statt tief) */
  max-width: min(56ch, 56vw);
  text-shadow: 0 1px 24px oklch(0.99 0.006 150 / 0.85);
}
.hero__copy h1 {
  font-size: clamp(2rem, 1.2rem + 2.7vw, 3.5rem);
  max-width: 22ch;
}
/* kinetic service words — horizontal row, decode + emerald on hover */
.hero__words {
  list-style: none;
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.hero__words li {
  display: flex;
  align-items: center;
}
.hero__words li:not(:first-child)::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 16px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.6;
}
.hero__words a {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s var(--ease);
}
.hero__words a:hover,
.hero__words a:focus-visible {
  color: var(--emerald);
}
.hero__btn {
  margin-top: var(--s5);
}
.hero__scroll {
  position: absolute;
  z-index: 3;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (max-width: 820px) {
  .hero__copy {
    left: var(--s5);
    right: var(--s5);
    top: auto;
    bottom: 14svh;
    transform: none;
    max-width: none;
    text-shadow: 0 1px 16px rgba(255, 255, 255, 0.8);
  }
}

/* leistungen — full-width ScrollStack cards on white */
.pillars {
  position: relative;
  background: transparent;
  isolation: isolate;
}
/* wraps the header + cards + the three backdrop layers, so those layers'
   inset:0 covers only the card stage — NOT the tall GSAP pin-spacer that
   .handoff adds after it. Without this, .pillars__bg (dark end-state) painted
   the whole pinned tail black, leaving a black-over-white seam between the
   released handoff wipe and the white #prozess section. */
.pillars__stage {
  position: relative;
}
.pillars__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0; /* JS raises this; radial fade keeps edges clean */
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 58% at 50% 52%,
    rgb(7 16 12 / 0.95) 0%,
    rgb(7 16 12 / 0.68) 42%,
    rgb(7 16 12 / 0.28) 60%,
    rgb(7 16 12 / 0) 78%
  );
}
.pillars__glow {
  position: absolute;
  inset: 4% 7%;
  z-index: -2;
  opacity: 0; /* JS raises this toward the black end — cards "light" the dots green */
  pointer-events: none;
  background: radial-gradient(
    ellipse 44% 38% at 50% 48%,
    oklch(0.68 0.18 162 / 0.68),
    oklch(0.58 0.14 162 / 0.24) 46%,
    transparent 76%
  );
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(
    ellipse 58% 48% at 50% 50%,
    #000 0 58%,
    transparent 82%
  );
  mask-image: radial-gradient(
    ellipse 58% 48% at 50% 50%,
    #000 0 58%,
    transparent 82%
  );
}
.pillars__grid {
  position: absolute;
  inset: 3% 5%;
  z-index: -1;
  opacity: 0; /* JS raises this toward the black end */
  background-image: radial-gradient(
    oklch(1 0 0 / 0.16) 1.4px,
    transparent 1.5px
  );
  background-size: 30px 30px;
  background-position: center;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse 56% 46% at 50% 50%,
    #000 0 50%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 56% 46% at 50% 50%,
    #000 0 50%,
    transparent 78%
  );
}
.sstack {
  position: relative;
  max-width: min(
    1360px,
    88vw
  ); /* narrower → dotted backdrop visible around the cards */
  margin: var(--s8) auto 0;
  padding-bottom: 34vh; /* room for the last card to pin then release */
}
.scard {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 70vh, 760px); /* bigger */
  border-radius: 34px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  border: 1px solid var(--line);
  box-shadow: 0 36px 70px -38px oklch(0.2 0.04 160 / 0.4);
  transform-origin: top center;
  will-change: transform;
  color: #fff;
  background: linear-gradient(
    150deg,
    oklch(0.22 0.05 160),
    oklch(0.18 0.04 160)
  ); /* darkest step as fallback */
}
.scard--g1 {
  background: linear-gradient(
    150deg,
    oklch(0.22 0.05 160),
    oklch(0.18 0.04 160)
  );
}
.scard--g2 {
  background: linear-gradient(
    150deg,
    oklch(0.34 0.07 162),
    oklch(0.28 0.06 160)
  );
}
.scard--g3 {
  background: linear-gradient(150deg, oklch(0.5 0.1 163), oklch(0.42 0.09 162));
}
.scard--g4 {
  background: linear-gradient(
    150deg,
    oklch(0.82 0.1 166),
    oklch(0.74 0.11 165)
  );
}
.scard__txt {
  padding: clamp(var(--s6), 4vw, var(--s9));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scard__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  color: var(--emerald);
}
.scard__accent {
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 10px;
}
.scard__accent path {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 4;
  stroke-linecap: round;
}
.scard h3 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  margin-top: 8px;
  color: var(--emerald-ink);
}
.scard p {
  margin-top: var(--s4);
  max-width: 42ch;
  font-size: var(--t-1);
  color: var(--dim);
}
.scard__list {
  list-style: none;
  margin-top: var(--s5);
  display: grid;
  gap: 10px;
}
.scard__list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  color: var(--ink);
}
.scard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: oklch(0.4 0.076 162 / 0.16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231E4D3D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/10px no-repeat;
}
.scard .pillar__link {
  margin-top: var(--s6);
}
.scard__media {
  position: relative;
  min-height: 340px;
  overflow: hidden;
}
.scard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(0.36 0.07 162 / 0.3);
  mix-blend-mode: multiply;
}
.pillar__link {
  margin-top: var(--s4);
  display: inline-flex;
  gap: 0.4em;
  color: var(--emerald);
  font-weight: 600;
  font-size: 0.92rem;
}
/* g1–g3 are dark → light text; g4 is light green → dark text */
.scard--g1 .scard__n,
.scard--g2 .scard__n,
.scard--g3 .scard__n {
  color: var(--mint);
}
.scard--g4 .scard__n {
  color: var(--emerald-ink);
}
.scard--g1 h3,
.scard--g2 h3,
.scard--g3 h3 {
  color: #fff;
}
.scard--g4 h3 {
  color: var(--emerald-ink);
}
.scard--g1 p,
.scard--g2 p,
.scard--g3 p {
  color: oklch(0.92 0.025 165);
}
.scard--g4 p {
  color: oklch(0.28 0.04 160);
}
.scard--g1 .scard__list li,
.scard--g2 .scard__list li,
.scard--g3 .scard__list li {
  color: oklch(0.95 0.02 165);
}
.scard--g4 .scard__list li {
  color: oklch(0.24 0.04 160);
}
.scard--g1 .scard__accent path,
.scard--g2 .scard__accent path,
.scard--g3 .scard__accent path {
  stroke: var(--mint);
}
.scard--g4 .scard__accent path {
  stroke: var(--emerald-ink);
}
.scard--g1 .pillar__link,
.scard--g2 .pillar__link,
.scard--g3 .pillar__link {
  color: var(--mint);
}
.scard--g4 .pillar__link {
  color: var(--emerald-ink);
}
.scard--g1 .scard__list li::before,
.scard--g2 .scard__list li::before,
.scard--g3 .scard__list li::before {
  background: oklch(0.88 0.07 165 / 0.2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2388e0b0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/10px no-repeat;
}
@media (max-width: 820px) {
  .sstack {
    max-width: min(620px, calc(100vw - 32px));
    padding-bottom: var(--s7);
  }
  .scard {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 24px;
    margin-bottom: var(--s6);
  }
  .scard__media {
    min-height: 210px;
    order: -1;
  }
}

/* process — white pinned step-by-step section (3-column row) */
.prozess {
  position: relative;
  background: var(--paper);
}
.psteps {
  margin-top: var(--s7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--s5), 3vw, var(--s7));
  align-items: start;
}
.pstep {
  display: flex;
  flex-direction: column;
}
.pstep__media {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 30px 70px -45px var(--emerald-ink);
}
.pstep__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pstep__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.8rem, 2.2vw, 2.6rem);
  color: var(--emerald);
  margin-top: var(--s4);
}
.pstep__txt h3 {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
  margin-top: 6px;
  color: var(--emerald-ink);
}
.pstep__txt p {
  margin-top: var(--s3);
  color: var(--dim);
  font-size: 1rem;
}
@media (max-width: 820px) {
  .psteps {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
}

/* portfolio horizontal */
.portfolio {
  overflow: hidden;
  background: var(--paper);
}
/* 3D coverflow stage — centre card forward, neighbours tilt + recede (JS-driven) */
.portfolio__track {
  position: relative;
  height: clamp(420px, 68vh, 680px);
  margin-top: var(--s8);
  perspective: 1700px;
  transform-style: preserve-3d;
}
.proj {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(48vw, 580px);
  aspect-ratio: 16/11;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s6);
  box-shadow: 0 40px 80px -40px var(--emerald-ink);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* static fallback (reduced-motion + mobile): swipeable row */
.portfolio__track.pf-static {
  height: auto;
  perspective: none;
  display: flex;
  gap: var(--s5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--s5);
}
.portfolio__track.pf-static .proj {
  position: relative;
  inset: auto;
  transform: none;
  opacity: 1;
  flex: 0 0 min(84vw, 520px);
  scroll-snap-align: center;
}
@media (max-width: 820px) {
  .portfolio__track {
    height: auto;
    perspective: none;
    display: flex;
    gap: var(--s5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--s5);
  }
  .proj {
    position: relative;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
    flex: 0 0 84vw;
    scroll-snap-align: center;
  }
}
.proj img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.7s var(--ease);
}
.proj:hover img {
  transform: scale(1.06);
}
.proj::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    oklch(0.2 0.04 160 / 0.1) 0%,
    transparent 32%,
    oklch(0.18 0.04 160 / 0.86) 100%
  );
}
.proj span {
  position: relative;
  z-index: 2;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint);
}
.proj h3 {
  position: relative;
  z-index: 2;
  font-size: 1.55rem;
  margin-top: 6px;
}
.proj__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--glow-c, #3ad17e) 0%,
    transparent 68%
  );
  opacity: 0.4;
  filter: blur(50px);
  pointer-events: none;
  transition: background-color 0.4s;
}
.pf-rail {
  position: relative;
  max-width: min(1120px, 88vw);
  margin: var(--s7) auto 0;
  height: 2px;
  background: var(--line-strong);
  border-radius: 2px;
}
.pf-rail__dot {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px oklch(0.88 0.07 165 / 0.18);
}
.pf-rail__idx {
  position: absolute;
  top: 14px;
  left: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: oklch(0.85 0.03 165);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .pf-rail {
    display: none;
  }
}

/* why / stats — emerald */
.why {
  /* dark island, but edges fade to paper so light→dark→light is seamless */
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    var(--emerald) 14%,
    var(--emerald-deep) 86%,
    var(--paper) 100%
  );
  color: var(--paper);
}
.why .kicker {
  color: var(--mint);
}
.why .lead {
  color: oklch(0.92 0.03 165);
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s6);
  margin-top: var(--s8);
}
.stat__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.6rem+3vw, 4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__lbl {
  margin-top: 10px;
  color: oklch(0.9 0.03 165);
  font-size: 0.98rem;
}

/* faq */
.faq__list {
  margin-top: var(--s7);
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5) 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary {
  transition: color 0.25s;
}
.faq__item summary:hover,
.faq__item[open] summary {
  color: var(--emerald);
}
.faq__item summary .ic {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--faint);
  transition:
    transform 0.35s var(--ease),
    color 0.25s;
}
.faq__item summary:hover .ic,
.faq__item[open] summary .ic {
  color: var(--emerald);
}
.faq__item[open] summary .ic {
  transform: rotate(45deg);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.faq__item[open] .faq__a {
  grid-template-rows: 1fr;
}
.faq__a > div {
  overflow: hidden;
}
.faq__a p {
  padding-bottom: var(--s5);
  color: var(--dim);
  max-width: 64ch;
}

/* cta */
.cta {
  text-align: center;
}
.cta h2 {
  font-size: var(--h2);
  max-width: 18ch;
  margin-inline: auto;
}
.cta .actions {
  margin-top: var(--s6);
  display: flex;
  gap: var(--s4);
  justify-content: center;
  flex-wrap: wrap;
}
.cta__note {
  margin-top: var(--s5);
  color: var(--faint);
  font-size: 0.92rem;
}

/* footer */
/* Layout 1:1 wie der Startseiten-Footer (.ofoot), damit About-/Subpage-Footer
   und Startseite GENAU gleich aussehen. Trennstrich auf __grid (in .wrap) →
   nur Content-Breite. */
.footer {
  padding: 8vh 0 48px;
  color: var(--dim);
}
.footer__grid {
  border-top: 1px solid var(--line);
  padding-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 8vw, 120px);
  justify-content: space-between;
  align-items: flex-start;
}
.footer__grid > div:first-child {
  flex: 0 1 320px;
}
.footer a {
  color: var(--dim);
}
.footer a:hover {
  color: var(--ink);
}
.footer__cols {
  display: flex;
  gap: clamp(36px, 5vw, 72px);
  flex-wrap: wrap;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.footer__col h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.footer__col a {
  font-size: 0.95rem;
}
.footer__legal {
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--faint);
  max-width: 34ch;
}
.footer__social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.footer__social .soc {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  color: var(--emerald);
  transition:
    border-color 0.25s var(--ease),
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.footer__social .soc svg {
  width: 18px;
  height: 18px;
}
.footer__social .soc:hover {
  border-color: var(--emerald);
  background: var(--paper-2);
  color: var(--emerald-ink);
  transform: translateY(-2px);
}
.footer__social .soc:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
}

/* reveal */
[data-reveal] {
  opacity: 1;
}
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============ SUBPAGES ============ */
.subhero {
  padding: calc(var(--s10) + 56px) 0 var(--s8);
  position: relative;
}
.subhero .crumbs {
  font-size: 0.8rem;
  color: var(--faint);
  margin-bottom: var(--s4);
}
.subhero .crumbs a {
  color: var(--emerald);
}
.subhero h1 {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem);
  max-width: 16ch;
}
.subhero h1 .serif-em {
  display: inline;
}
.subhero .lead {
  max-width: 56ch;
}
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0;
}
.subnav a {
  font-size: 0.95rem;
  color: var(--dim);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.subnav a:hover {
  color: var(--ink);
}
.subnav a.active {
  color: var(--emerald);
  border-bottom-color: var(--emerald);
  font-weight: 600;
}
.two-col {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: center;
}
.two-col.rev > :first-child {
  order: 2;
}
@media (max-width: 820px) {
  .two-col {
    grid-template-columns: 1fr;
  }
  .two-col.rev > :first-child {
    order: 0;
  }
}
.media-frame {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px -55px var(--emerald-ink);
  aspect-ratio: 4/3;
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flist {
  list-style: none;
  margin-top: var(--s5);
  display: grid;
  gap: 2px;
}
.flist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.flist li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: oklch(0.4 0.076 162 / 0.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E4D3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/14px no-repeat;
}
.flist li b {
  font-weight: 600;
}
.flist li span {
  color: var(--dim);
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s5);
}
.tag {
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--dim);
}

/* before / after (scroll-driven) */
.ba {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16/10;
  box-shadow: 0 40px 90px -55px var(--emerald-ink);
  --x: 18%;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba__before {
  filter: grayscale(1) contrast(0.92) brightness(1.04);
  clip-path: inset(0 0 0 var(--x));
}
.ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}
.ba__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.ba__tag {
  position: absolute;
  top: 16px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: oklch(0.2 0.04 160 / 0.6);
  color: #fff;
  backdrop-filter: blur(4px);
}
.ba__tag.l {
  left: 16px;
}
.ba__tag.r {
  right: 16px;
}

/* hover-play video */
.hovervid {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16/9;
  cursor: pointer;
  box-shadow: 0 40px 90px -55px var(--emerald-ink);
}
.hovervid img,
.hovervid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hovervid video {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.hovervid.is-playing video {
  opacity: 1;
}
.hovervid__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: oklch(0.2 0.04 160 / 0.55);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: opacity 0.3s;
}
.hovervid.is-playing .hovervid__badge {
  opacity: 0;
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s5);
  margin-top: var(--s7);
}
.vcard {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.vcard h3 {
  font-size: 1.2rem;
}
.vcard p {
  margin-top: 8px;
  color: var(--dim);
  font-size: 0.96rem;
}
.prose {
  max-width: 70ch;
}
.prose p {
  margin-top: var(--s4);
  color: var(--dim);
}
.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: var(--s7);
}

/* nav dropdown (Leistungen) */
.nav__has-drop {
  position: relative;
  display: inline-flex;
}
/* Hover-Brücke: NUR über dem Trigger (schmal), damit das Dropdown nicht schon
   aufgeht, wenn man knapp unter „Vidotion"/den Nachbarlinks steht. */
.nav__has-drop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -14px;
  right: -14px;
  height: 16px;
}
.nav__drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 248px;
  /* dunkles Glas wie die Menüleiste selbst — kein weißes Panel, das sich
     gegen die dunkle Nav schneidet */
  background: oklch(0.21 0.024 165 / 0.97);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 56px -22px rgb(0 0 0 / 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease);
  z-index: 60;
}
.nav__has-drop:hover .nav__drop,
.nav__has-drop:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__drop a {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: oklch(0.9 0.018 160);
  white-space: nowrap;
  text-shadow: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.nav__drop a:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--mint);
}
.nav__drop a:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .nav__drop {
    transition: none;
  }
}

/* Werte-Karten (Über uns) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: var(--s7);
}
@media (max-width: 820px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 30px 70px -55px var(--emerald-ink);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -50px var(--emerald-ink);
}
.step__n {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--emerald);
  letter-spacing: 0.04em;
}
.step h3 {
  font-size: 1.4rem;
  margin-top: var(--s4);
}
.step p {
  margin-top: var(--s3);
  color: var(--dim);
  font-size: 0.98rem;
}

/* team */
.team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  margin-top: var(--s8);
}
@media (max-width: 760px) {
  .team {
    grid-template-columns: 1fr;
  }
}
.member {
  padding: clamp(var(--s6), 4vw, var(--s8));
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper-2);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.member:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -40px var(--emerald-ink);
}
.member__av {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--emerald), var(--emerald-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
}
.member h3 {
  margin-top: var(--s5);
  font-size: 1.6rem;
}
.member__role {
  margin-top: 4px;
  color: var(--emerald);
  font-weight: 600;
  font-size: 0.95rem;
}
.member p {
  margin-top: var(--s4);
  color: var(--dim);
  max-width: 42ch;
}
.member__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s5);
}
.member__tags span {
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: oklch(0.4 0.076 162 / 0.1);
  color: var(--emerald);
}

/* reviews / testimonials */
.reviews {
  background: transparent;
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s5);
  margin-top: var(--s8);
}
.review {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 30px 60px -52px var(--emerald-ink);
  display: flex;
  flex-direction: column;
}
.review__stars {
  color: var(--emerald);
  letter-spacing: 3px;
  font-size: 1.05rem;
}
.review__quote {
  margin-top: var(--s4);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  flex: 1;
}
.review__author {
  margin-top: var(--s6);
  display: flex;
  align-items: center;
  gap: 12px;
}
.review__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--emerald), var(--emerald-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex: 0 0 auto;
}
.review__name {
  font-weight: 600;
  font-size: 0.95rem;
}
.review__role {
  color: var(--faint);
  font-size: 0.85rem;
}

/* social — image marquee (feed wall) */
.marquee {
  margin-top: var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__row {
  display: flex;
  gap: var(--s5);
  width: max-content;
  will-change: transform;
}
.marquee__row img {
  width: clamp(180px, 22vw, 250px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  flex: 0 0 auto;
  box-shadow: 0 24px 50px -38px var(--emerald-ink);
  /* Feed läuft grau — nur das Bild unter dem Cursor wird farbig (Lauf
     bleibt an, kein Pausieren) */
  filter: grayscale(1) contrast(0.96);
  transition:
    filter 0.4s var(--ease),
    transform 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .marquee__row img:hover {
    filter: grayscale(0) contrast(1);
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__row {
    animation: mq 42s linear infinite;
  }
  .marquee__row--rev {
    animation-direction: reverse;
    animation-duration: 50s;
  }
}
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Sichtbarkeit: Aufrufe-Diagramm (scroll-getrieben) + Stats ---------- */
.seo-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
@media (max-width: 900px) {
  .seo-grid {
    grid-template-columns: 1fr;
  }
}
.seo-chartcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: 0 40px 90px -60px var(--emerald-ink);
  display: flex;
  flex-direction: column;
}
.seo-chartcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.seo-chartcard__label {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}
.seo-chartcard__trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--emerald);
}
.seo-chartcard__trend svg {
  width: 16px;
  height: 16px;
}
.seo-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.seo-chart__grid {
  stroke: var(--line);
  stroke-width: 1;
}
.seo-chart__bar {
  fill: url(#seoBar);
  fill: oklch(0.62 0.09 162 / 0.28);
}
.seo-chart__area {
  fill: oklch(0.5 0.09 162 / 0.12);
}
.seo-chart__line {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.seo-chart__dot {
  fill: var(--paper);
  stroke: var(--emerald);
  stroke-width: 2.5;
}
.seo-chart__lbl {
  fill: var(--faint);
  font-size: 13px;
  font-family: var(--body);
  text-anchor: middle;
}
.seo-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.seo-stat {
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.seo-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem);
  line-height: 1;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
}
.seo-stat span {
  display: block;
  margin-top: 8px;
  color: var(--dim);
  font-size: 0.95rem;
}

/* showcase — white card zooms to fullscreen, green flowing lines + info */
.showcase {
  position: relative;
}
.showcase__stage {
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper); /* same white as the rest → fully fluid */
}
.showcase__card {
  position: relative;
  width: 46vw;
  height: 29vw;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--emerald-ink);
  box-shadow: 0 50px 120px -45px oklch(0.2 0.04 160 / 0.45);
  will-change: width, height, border-radius;
}
.showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showcase__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0.16 0.04 160 / 0.42) 0%,
    oklch(0.13 0.035 160 / 0.8) 100%
  );
}
.showcase__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(840px, 88vw);
  text-align: center;
  color: #fff;
  z-index: 2;
}
.showcase__content .kicker {
  color: var(--mint);
}
.showcase__content h2 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.2rem);
  margin-top: var(--s4);
  color: #fff;
}
.showcase__content .serif-em {
  color: var(--mint);
}
.showcase__sub {
  margin: var(--s5) auto 0;
  max-width: 52ch;
  color: oklch(0.92 0.03 165);
  font-size: var(--t-1);
}
.showcase__facts {
  margin-top: var(--s7);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(var(--s6), 6vw, var(--s9));
}
.showcase__facts b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.showcase__facts span {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  color: oklch(0.9 0.03 165);
}
@media (max-width: 820px) {
  .showcase__card {
    width: 88vw;
    height: 62vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .showcase__card {
    width: 92vw;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* reduced-motion / no-JS fallback for the pillar slideshow → readable list */
.pillars--static .pillars__sticky {
  height: auto;
  overflow: visible;
}
.pillars--static .pillars__stage {
  grid-template-columns: 1fr;
}
.pillars--static .pillars__panel {
  min-height: 0;
}
.pillars--static .pslide {
  position: relative;
  inset: auto;
  opacity: 1 !important;
  transform: none !important;
  margin-bottom: var(--s7);
}
.pillars--static .pillars__media {
  display: none;
}

/* ---------- reusable curved page-wipe overlay + last-card zoom layer (cards → prozess) ---------- */
.pwipe {
  position: fixed;
  inset: 0;
  z-index: 46; /* above content (main z-index:2), below nav (z-index:50) */
  pointer-events: none;
  display: none; /* JS shows it while a wipe is mid-flight */
}
.pwipe svg {
  width: 100%;
  height: 100%;
  display: block;
}
.handoff {
  position: relative;
  height: 1px; /* the pin adds the real scroll length via end: "+=..." */
}
.scard__zoom {
  position: fixed;
  z-index: 45;
  background-size: cover;
  background-position: center;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: left, top, width, height, border-radius;
}
/* fills the viewport behind the frozen card + growing zoom layer during the
   handoff pin, so the already-scrolled-past #prozess section underneath
   never bleeds through at the edges before the wipe reveals it. */
.handoff__backdrop {
  position: fixed;
  inset: 0;
  z-index: 43;
  background: var(
    --paper
  ); /* the swipe reveals the actual next-section background */
  opacity: 0;
  pointer-events: none;
}

/* ---------- outro: pinned green wipe → green bg → scroll green→black → Threads shader at bottom ---------- */
.greenwipe {
  position: relative;
  height: 1px;
} /* pin adds scroll length via end:"+=..." */
.outro {
  position: relative;
  isolation: isolate;
  color: #fff;
}
.outro__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #1e4d3d; /* JS lerps green → black on scroll */
}
.outro__shader {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0; /* JS raises it only over the CTA/footer (black) region */
  pointer-events: none;
}
/* lift content above the shader and give each block a readable glass panel */
.outro > section,
.outro > .outro__end {
  position: relative;
  z-index: 1;
}
.outro .review,
.outro .faq__list,
.outro .stats > div,
.outro .cta .actions {
  background: oklch(0.18 0.03 160 / 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(0.9 0.06 160 / 0.16);
  border-radius: 18px;
}
.outro .kicker {
  color: var(--mint);
}
.outro h2,
.outro .review__quote,
.outro .faq__item summary {
  color: #fff;
}
.outro .lead,
.outro .review__role,
.outro .cta__note,
.outro .faq__a p {
  color: oklch(0.9 0.03 165);
}
.outro .btn--ghost {
  border-color: oklch(0.9 0.06 160 / 0.4);
  color: #fff;
} /* --ink/--line-strong assume the light page; on the green/black outro they're unreadable */
.outro .btn--ghost:hover {
  border-color: var(--mint);
  color: var(--mint);
}
.outro .why {
  background: transparent;
} /* drop the old dark emerald gradient — shader shows through */
.outro .reviews,
.outro .faq,
.outro .cta,
.outro .footer {
  background: transparent;
}
.outro .footer {
  border-top-color: oklch(0.9 0.06 160 / 0.16);
  color: oklch(0.85 0.03 165);
}
.outro .footer a,
.outro .footer__col h3,
.outro .footer__legal {
  color: oklch(0.85 0.03 165);
}
/* cursor scoping: splash trail off once the outro is active */
body.outro-active #fluid {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .outro__bg {
    background: linear-gradient(160deg, #123a2b, #06120c);
  }
  .outro__shader {
    display: none;
  }
}

/* ===== Über-uns Outro: Weiß→Grün→Schwarz + Faulty-Terminal-Shader (Arne
   2026-07-09). uform + Footer sitzen über dem fixed Shader; die uwhy-Karten
   darüber blenden beim Reinscrollen weg (aboutOutro in app.js). ===== */
.uoutro {
  position: relative;
  z-index: 0;
  isolation: isolate;
  color: #fff;
}
/* Leistungen (uoutro liegt direkt unter <body>, NACH main): über main (z2)
   heben, sonst verdeckt das sticky Zoom-Bild den fixed Grid-Distortion-Shader
   → Crossfade Bild→Shader am Zoom-Ende funktioniert erst so. Über-uns-uoutro
   liegt IN main und bleibt unberührt (dort muss uwhy z2 über dem Shader sein). */
body > .uoutro {
  z-index: 3;
}
/* Grid-Distortion-Overlay auf dem Zoom-Mittelbild: der Kästchen-Effekt liegt
   schon auf dem kleinen Bild und wächst beim Zoom mit (Arne 2026-07-10).
   img bleibt als Fallback darunter. */
.zoomp__gd {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
/* Basis-BG der Outro-Zone = dunkel (Leistungen nutzen das hinter dem Grid-
   Distortion-Shader). Über-uns überschreibt mit display:none (dort liefert der
   durchgehende Seiten-Gradient das Schwarz). */
.uoutro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #0b2018 0%, #071711 42%, #05100b 100%);
}
/* Leistungen: die Formular-Section im Outro selbst transparent, damit der
   fixed Grid-Distortion-Shader durchkommt (das Band-BG entfällt hier). */
.uoutro .uform.section {
  background: transparent;
}
/* Formular-Zone = Viewport minus Footer (364px), Inhalt vertikal zentriert →
   am Seitenende steht der Block komplett sichtbar mittig zwischen Nav und
   Fußzeile (Arne 2026-07-10; gilt für Leistungen UND Über-uns). */
.uoutro .uform {
  min-height: calc(100vh - 364px);
  min-height: calc(100svh - 364px);
  display: grid;
  align-content: center;
  /* top-Padding ≈ Nav-Unterkante → zentriert zwischen Nav und Fußzeile,
     Karte rutscht nie unter die fixe Menüleiste */
  padding: 110px 0 20px;
}
.uoutro__shader {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.uoutro > section,
.uoutro > footer {
  position: relative;
  z-index: 1;
}
.uoutro .kicker {
  color: oklch(0.88 0.08 165);
}
.uoutro .uform__h {
  color: #fff;
}
.uoutro .uform__sub {
  color: oklch(0.86 0.03 165);
}
.uoutro .footer {
  background: transparent;
  color: oklch(0.85 0.03 165);
}
.uoutro .footer__grid {
  border-top-color: oklch(0.9 0.06 160 / 0.16);
}
.uoutro .footer a,
.uoutro .footer__col h3,
.uoutro .footer__legal,
.uoutro .footer p {
  color: oklch(0.85 0.03 165);
}
.uoutro .footer .brand {
  color: #fff;
}
.uoutro .footer a:hover {
  color: #fff;
}
/* Social-Buttons im dunklen Footer = Startseiten-Stil (Arne 2026-07-10:
   der helle paper-2-Hover machte die Icons auf Dunkel unkenntlich) */
.uoutro .footer__social .soc {
  border-color: rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.05);
  color: oklch(0.88 0.03 165);
}
.uoutro .footer__social .soc:hover {
  border-color: oklch(0.88 0.07 165 / 0.6);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  transform: translateY(-2px);
}
/* Leistungen (uoutro auf Body-Ebene): der fixe Shader ist stellenweise HELL —
   dunkler Verlauf hinter der Fußzeile, damit Text/Logo/Icons überall lesbar
   sind (Arne R43). Über-uns-uoutro liegt IN main und hat eh schwarzen Grund. */
body > .uoutro .footer {
  position: relative;
}
body > .uoutro .footer::before {
  content: "";
  position: absolute;
  inset: -140px 0 0 0;
  background: linear-gradient(
    180deg,
    rgb(5 14 10 / 0) 0%,
    rgb(5 14 10 / 0.5) 30%,
    rgb(5 14 10 / 0.78) 100%
  );
  pointer-events: none;
}
body > .uoutro .footer .footer__grid {
  position: relative;
  z-index: 1;
}
/* ===== Über-uns: durchgehender Seiten-Verlauf Weiß→Grün→Schwarz (Arne
   2026-07-10). Ein Gradient-Layer über die GESAMTE Doc-Höhe; Sektionen
   transparent; unten läuft er ins Schwarz, wo der Ripple-Grid-Shader einblendet.
   atmos/#fx sind auf dieser Seite entfernt (sonst „Matsch auf Dunkel"). ===== */
body.about {
  position: relative;
  background: #05100b;
}
.uabout-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f3f9f5 15%,
    #e0efe8 32%,
    #c6e0d3 47%,
    #9ecbb4 59%,
    #5f987d 69%,
    #2c5844 78%,
    #123529 85%,
    #08190f 93%,
    #05100b 100%
  );
}
body.about main {
  position: relative;
  z-index: 1;
}
body.about .uhero,
body.about .uduo,
body.about .uteam,
body.about .uwhy {
  background: transparent;
}
/* uwhy-Karten ÜBER den fixed Ripple-Grid-Shader heben (der uoutro-Shader
   paintet sonst beim Einblenden vor die Karten — Arne 2026-07-10) */
body.about .uwhy {
  position: relative;
  z-index: 2;
}
/* eigener uoutro-BG entfällt — der Seiten-Verlauf liefert das Schwarz */
body.about .uoutro__bg {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .uoutro__shader {
    display: none;
  }
}

/* ============================================================
   ÜBER-UNS · Team-Showcase (dark band) + ProfileCard-Port
   (React Bits ProfileCard, adaptiert auf echte Foto-Karten)
   ============================================================ */

/* dunkles Feature-Band, damit die neon-holografischen Karten sitzen */
.team-showcase {
  position: relative;
  overflow: hidden;
  color: #fff;
  /* Light → Dark-Bridge: obere Kante = Papier (nahtloser Anschluss an die helle
     Duo-Section), dunkelt im oberen Padding nach Smaragd ab, damit die weiße
     Überschrift immer auf Dunkel sitzt. Ab hier läuft die Seite bis zum Shader
     durchgehend dunkel (kein zweiter harter Farbsprung mehr). */
  padding-top: clamp(140px, 24vh, 300px);
  background:
    radial-gradient(
      120% 70% at 50% 32%,
      oklch(0.42 0.08 162 / 0.45) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      var(--paper) 0%,
      var(--emerald-deep) 16%,
      oklch(0.15 0.03 160) 100%
    );
}
.team-showcase .kicker {
  color: var(--mint);
}
.team-showcase h2,
.team-showcase .sec-head {
  color: #fff;
}

.pc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: clamp(32px, 5vw, 72px);
  justify-content: center;
  margin-top: var(--s8);
}
@media (max-width: 720px) {
  .pc-grid {
    grid-template-columns: minmax(0, 340px);
    gap: 56px;
  }
}
.pc-col {
  display: flex;
  flex-direction: column;
}
.pc-bio {
  margin-top: var(--s5);
  text-align: left;
}
.pc-bio p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.98rem;
  max-width: 42ch;
}
.pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s4);
}
.pc-tags span {
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

/* -- die Karte -- */
.pc-card-wrapper {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --background-x: 50%;
  --background-y: 50%;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --card-opacity: 0;
  --card-radius: 26px;
  --sunpillar-1: hsl(2, 100%, 73%);
  --sunpillar-2: hsl(53, 100%, 69%);
  --sunpillar-3: hsl(93, 100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);
  --behind-glow: oklch(0.66 0.15 162 / 0.55);
  position: relative;
  perspective: 620px;
  touch-action: none;
}
/* emerald-getönter Glow hinter der Karte, folgt dem Cursor */
.pc-card-wrapper::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    var(--behind-glow) 0%,
    transparent 62%
  );
  filter: blur(46px) saturate(1.15);
  opacity: calc(0.9 * var(--card-opacity));
  transition: opacity 0.35s ease;
}
.pc-card-wrapper:hover,
.pc-card-wrapper.active {
  --card-opacity: 1;
}

.pc-card {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 0.74;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #0b0d10;
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.7);
  transform: rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
  transition: transform 0.9s var(--ease);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.pc-card-wrapper.active .pc-card {
  transition: none;
}
.pc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  z-index: 0;
}
/* Foto-Scrim unten → Text lesbar */
.pc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--card-radius);
  background: linear-gradient(
    to top,
    rgba(5, 9, 7, 0.86) 0%,
    rgba(5, 9, 7, 0.3) 30%,
    transparent 52%
  );
}
.pc-shine,
.pc-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--card-radius);
}
/* holografischer Regenbogen-Schimmer (color-dodge) */
.pc-shine {
  --space: 5%;
  --angle: -45deg;
  z-index: 3;
  mix-blend-mode: color-dodge;
  opacity: 0.5;
  filter: brightness(0.66) contrast(1.35) saturate(0.42);
  transition:
    opacity 0.6s ease,
    filter 0.6s ease;
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--sunpillar-1) calc(var(--space) * 1),
      var(--sunpillar-2) calc(var(--space) * 2),
      var(--sunpillar-3) calc(var(--space) * 3),
      var(--sunpillar-4) calc(var(--space) * 4),
      var(--sunpillar-5) calc(var(--space) * 5),
      var(--sunpillar-6) calc(var(--space) * 6),
      var(--sunpillar-1) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      rgba(0, 0, 0, 0.1) 12%,
      rgba(0, 0, 0, 0.15) 20%,
      rgba(0, 0, 0, 0.25) 120%
    );
  background-position:
    0 var(--background-y),
    var(--background-x) var(--background-y),
    center;
  background-blend-mode: color, hard-light;
  background-size:
    500% 500%,
    300% 300%,
    200% 200%;
}
.pc-card-wrapper:hover .pc-shine,
.pc-card-wrapper.active .pc-shine {
  opacity: 0.82;
  filter: brightness(0.85) contrast(1.5) saturate(0.6);
}
/* Cursor-Glanzlicht */
.pc-glare {
  z-index: 4;
  mix-blend-mode: overlay;
  filter: brightness(0.85) contrast(1.15);
  opacity: calc(0.45 + 0.4 * var(--card-opacity));
  transition: opacity 0.35s ease;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(248, 25%, 86%) 12%,
    hsla(207, 40%, 30%, 0.8) 90%
  );
}
/* Glas-Infoleiste unten */
.pc-info {
  position: absolute;
  z-index: 5;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.pc-name {
  display: block;
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.1;
}
.pc-role {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  margin-top: 3px;
}
.pc-btn {
  flex: 0 0 auto;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.2s;
}
.pc-btn:hover {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

/* -- sanftes 3D-Tilt-Frame (Duo-Foto, helle Section) -- */
.tilt-frame {
  perspective: 900px;
}
.tilt-frame__inner {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 90px -55px var(--emerald-ink);
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 0.55s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-frame.active .tilt-frame__inner {
  transition: none;
}
.tilt-frame__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
.tilt-frame__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    circle at var(--px, 50%) var(--py, 50%),
    rgba(255, 255, 255, 0.4),
    transparent 46%
  );
}
.tilt-frame.active .tilt-frame__glare {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pc-card,
  .tilt-frame__inner {
    transform: none;
  }
}

/* ---------- Über-uns: „Warum ausgerechnet wir?" (dunkel, seamlos aus der
   Team-Section, führt in die CTA/Shader-Zone) ---------- */
.whyus {
  position: relative;
  color: #fff;
  padding-block: clamp(var(--s8), 11vh, var(--s10));
  /* Top = Team-Bottom (oklch 0.15 …), Bottom = udark (#0b1611) → beide Nähte
     unsichtbar, eine durchgehende dunkle Abfahrt bis zum Shader. */
  background: linear-gradient(180deg, oklch(0.15 0.03 160) 0%, #0b1611 100%);
}
.whyus .kicker {
  color: var(--mint);
}
.whyus h2 {
  color: #fff;
}
.whyus__lead {
  margin-top: var(--s4);
  max-width: 46ch;
  color: rgb(255 255 255 / 0.74);
  font-size: var(--t-1);
}
.whyus__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 30px);
  margin-top: var(--s7);
}
@media (max-width: 720px) {
  .whyus__grid {
    grid-template-columns: 1fr;
  }
}
.why-card {
  padding: clamp(22px, 2.4vw, 36px);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.1);
  transition:
    border-color 0.3s var(--ease),
    background 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.why-card:hover {
  border-color: oklch(0.7 0.12 162 / 0.5);
  background: rgb(255 255 255 / 0.06);
  transform: translateY(-3px);
}
.why-card__n {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mint);
  margin-bottom: var(--s3);
}
.why-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.62rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.why-card p {
  margin-top: var(--s3);
  color: rgb(255 255 255 / 0.72);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ---------- Before/After Drag-Slider (Social) ---------- */
.baGrid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: 40px;
}
@media (max-width: 860px) {
  .baGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.baslider {
  position: relative;
  --x: 50%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow:
    0 1px 2px rgb(10 25 18 / 0.07),
    0 18px 40px -18px rgb(10 25 18 / 0.28);
  user-select: none;
  touch-action: pan-y;
}
.baslider--wide {
  aspect-ratio: 16 / 10;
}
.baslider--tall {
  aspect-ratio: 4 / 5;
}
.baslider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
/* „Vorher"-Ebene: nur bis zur Reglerposition sichtbar */
.baslider__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
}
/* Platzhalter-Look (später durch echtes Rohmaterial ersetzen, Filter entfernen) */
.baslider__img--flat {
  filter: saturate(0.42) contrast(0.9) brightness(1.1);
}
.baslider__img--snap {
  filter: saturate(0.6) contrast(0.92) brightness(1.06);
}
/* Trennlinie + Griff */
.baslider__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 2px;
  margin-left: -1px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 0 1px rgb(10 25 18 / 0.16);
  pointer-events: none;
}
.baslider__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 4px 14px rgb(10 25 18 / 0.32);
}
/* zwei kleine Pfeile im Griff */
.baslider__knob::before,
.baslider__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  transform: translateY(-50%);
}
.baslider__knob::before {
  left: 10px;
  border-right: 7px solid var(--ink);
}
.baslider__knob::after {
  right: 10px;
  border-left: 7px solid var(--ink);
}
/* Labels */
.baslider__tag {
  position: absolute;
  top: 14px;
  z-index: 2;
  pointer-events: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgb(10 25 18 / 0.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.baslider__tag--l {
  left: 14px;
}
.baslider__tag--r {
  right: 14px;
}
/* der eigentliche Regler: volle Fläche, unsichtbar — Drag/Touch/Tastatur gratis */
.baslider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.baslider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 520px;
  cursor: ew-resize;
}
.baslider__range::-moz-range-thumb {
  width: 46px;
  height: 520px;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
/* Tastatur-Fokus hebt den Griff hervor */
.baslider__range:focus-visible ~ .baslider__line .baslider__knob {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.baCard__cap {
  margin-top: 16px;
}
.baCard__k {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.baCard__cap p {
  color: var(--dim);
  max-width: 46ch;
  line-height: 1.5;
}

/* ---------- Feed & Stories Showcase (Social) ---------- */
.feedShow {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 860px) {
  .feedShow {
    grid-template-columns: 1fr;
    gap: 36px;
    justify-items: center;
  }
}
.phone {
  position: relative;
  border-radius: 40px;
  padding: 12px;
  background: linear-gradient(160deg, #26352e, #0f1712);
  box-shadow:
    0 2px 4px rgb(10 25 18 / 0.1),
    0 30px 60px -24px rgb(10 25 18 / 0.45);
  aspect-ratio: 9 / 19;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
.phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 22px;
  border-radius: 0 0 14px 14px;
  background: #0f1712;
  z-index: 2;
}
.phone__grid {
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
  background: #0f1712;
}
.phone__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stories__h {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  line-height: 1.1;
}
.stories__p {
  color: var(--dim);
  margin: 10px 0 22px;
  max-width: 44ch;
  line-height: 1.5;
}
.stories__row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.story {
  margin: 0;
  width: clamp(116px, 15vw, 148px);
}
.story img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid var(--accent);
  box-shadow: 0 10px 24px -12px rgb(10 25 18 / 0.4);
}
.story figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--dim);
  text-align: center;
}

/* ---------- Leistungs-Hero: großes grünes Bild + Titel-Wort links ---------- */
.lhero {
  /* NICHT fullscreen (Arne): 82vh, erste Section lugt drunter rein. sticky →
     bleibt im Hintergrund, .lbody scrollt (schneller) mit Diagonale darüber. */
  position: sticky;
  top: 0;
  height: 82vh;
  height: 82svh;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #0c2318; /* dunkelgrüner Fallback, bis das Bild lädt/fehlt */
}
.lhero__img {
  /* Overscan für den Parallax (GSAP schiebt das Bild in y — die CSS-scale-
     Property komponiert mit dem transform, kein Konflikt). 1.24 = 12% je Seite:
     größer als der Parallax-Hub (max 9%), damit NIE der dunkle Fallback oben/
     unten durchblitzt (früher 1.12 ⇒ dunkelgrüner Streifen). */
  scale: 1.24;
}
/* Content-Panel: liegt ÜBER dem Hero (z1). Trägt den SEITEN-VERLAUF selbst
   (oben Papier → unten hellgrün). GERADE, HARTE Oberkante (Arne: kein Dreieck,
   kein weicher Fade) — ein klarer Abschnitt, der beim Scrollen über den Hero
   fährt. Der sticky-Hero bewegt sich dahinter weiter parallax. */
.lbody {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    var(--paper) 34%,
    oklch(0.93 0.022 160) 76%,
    oklch(0.89 0.032 162) 100%
  );
}
.lhero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Motiv sitzt rechts, Negativraum links — vertikal center-croppen */
  object-position: 62% center;
  user-select: none;
  -webkit-user-drag: none;
}
/* linker Scrim: sichert die Titel-Lesbarkeit über dem (dunklen) Negativraum */
.lhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(6 20 14 / 0.62) 0%,
    rgb(6 20 14 / 0.26) 36%,
    transparent 60%
  );
}
.lhero__inner {
  position: relative;
  z-index: 2;
  padding-inline: clamp(28px, 6vw, 168px);
  max-width: min(1000px, 94vw);
}
.lhero__kicker {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.86 0.09 165);
  margin-bottom: clamp(10px, 1.2vw, 18px);
}
.lhero__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(3rem, 1.5rem + 6.6vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: oklch(0.97 0.02 160);
}
@media (max-width: 700px) {
  /* mobil den Negativraum zeigen, damit der Titel frei steht */
  .lhero__img {
    object-position: 76% center;
  }
  .lhero::before {
    background: linear-gradient(
      90deg,
      rgb(6 20 14 / 0.72) 0%,
      rgb(6 20 14 / 0.4) 46%,
      rgb(6 20 14 / 0.15) 100%
    );
  }
}

/* ---------- Leistungs-Feature-Section „Was drin ist" (full-width, überall gleich) ---------- */
.lfeat {
  background: transparent;
  padding: clamp(76px, 9vh, 150px) 0 clamp(56px, 7vh, 110px);
}
.lfeat__wrap {
  max-width: min(1760px, 92vw);
  margin-inline: auto;
}
.lfeat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-bottom: clamp(26px, 2.6vw, 44px);
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  margin-bottom: clamp(40px, 4vw, 76px);
}
.lfeat__kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s3);
}
.lfeat__h {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lfeat__note {
  color: var(--dim);
  max-width: 40ch;
  align-self: end;
}
/* 2 Spalten: links interaktive Liste, rechts die Detail-Bühne */
.lfeat__cols {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) 1.18fr;
  gap: clamp(32px, 4vw, 84px);
  align-items: start;
}
.lfeat__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lfeat__row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 1.4vw, 28px);
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  padding: clamp(20px, 1.9vw, 32px) 0;
  cursor: pointer;
  transition:
    padding-left 0.45s var(--ease),
    color 0.3s var(--ease);
}
.lfeat__list li:last-child .lfeat__row {
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
}
/* Akzentlinie oben, wächst bei aktiv (die „Linie") */
.lfeat__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.lfeat__row.is-active::before {
  transform: scaleX(1);
}
.lfeat__row.is-active {
  padding-left: clamp(12px, 1vw, 22px);
}
.lfeat__row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lfeat__num {
  flex: none;
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--faint);
  transition: color 0.3s var(--ease);
}
.lfeat__row.is-active .lfeat__num {
  color: var(--accent);
}
.lfeat__rowtitle {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: color-mix(in oklch, var(--ink) 52%, transparent);
  transition: color 0.3s var(--ease);
}
.lfeat__row.is-active .lfeat__rowtitle,
.lfeat__row:hover .lfeat__rowtitle {
  color: var(--ink);
}
/* rechte Bühne: aktives Panel (kleineres Bild links + Info-Block rechts) blendet
   ein. Nummer läuft über einen CSS-Counter (kein HTML nötig). */
.lfeat__stage {
  position: relative;
  min-height: clamp(430px, 30vw, 560px);
  counter-reset: lfp;
}
.lfeat__panel {
  counter-increment: lfp;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2vw, 40px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease),
    visibility 0.5s;
}
.lfeat__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* längliches Bild oben (Arne) */
.lfeat__vis {
  position: relative;
  margin: 0;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 5 / 2;
  background:
    radial-gradient(
      120% 120% at 82% 12%,
      oklch(0.55 0.1 164 / 0.55),
      transparent 60%
    ),
    linear-gradient(135deg, oklch(0.42 0.09 163), oklch(0.28 0.065 162));
  border: 1px solid oklch(0.7 0.06 165 / 0.22);
  box-shadow: 0 24px 52px -30px rgb(6 20 14 / 0.5);
  display: grid;
  place-items: center;
}
.lfeat__vis img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bild im <img> (Platzhalter oder echt) → Text-Label + Punktraster weg */
.lfeat__vis:has(img) figcaption,
.lfeat__vis:has(img)::after {
  display: none;
}
/* dezentes Punkt-Raster im Platzhalter (verschwindet, sobald ein echtes Bild
   im <img> liegt — das deckt figure komplett ab) */
.lfeat__vis::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    oklch(0.85 0.05 165 / 0.14) 1px,
    transparent 1.4px
  );
  background-size: 22px 22px;
  pointer-events: none;
}
/* Platzhalter-Label (bis echtes Bild ins <img> kommt) — kleiner + „Vorschau" */
.lfeat__vis figcaption {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 0.9rem + 0.9vw, 1.8rem);
  color: oklch(0.96 0.02 160);
  letter-spacing: -0.01em;
  text-align: center;
  padding: 0 10%;
}
.lfeat__vis figcaption::before {
  content: "Vorschau";
  display: block;
  font-family: var(--sans, inherit);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.86 0.09 165);
  margin-bottom: 0.7em;
}
/* Info-Zeile UNTER dem Bild: Ghost-Nummer links, Text rechts, Akzent-Linie oben */
.lfeat__pdesc {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 1.8vw, 34px);
  color: var(--dim);
  font-size: var(--t-0);
  line-height: 1.6;
  max-width: 68ch;
  padding-top: clamp(16px, 1.4vw, 26px);
  border-top: 2px solid var(--accent);
}
.lfeat__pdesc::before {
  content: counter(lfp, decimal-leading-zero);
  flex: none;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--accent);
}
@media (max-width: 900px) {
  .lfeat__cols {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }
  .lfeat__stage {
    min-height: 0;
  }
  .lfeat__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    gap: clamp(16px, 4vw, 26px);
  }
  .lfeat__panel.is-active {
    display: flex;
  }
  .lfeat__vis {
    aspect-ratio: 3 / 2;
  }
  .lfeat__pdesc {
    max-width: none;
  }
}
/* Handy (Arne 2026-07-15): die 5 Punkte als HORIZONTALE Nummern-Tabs (01–05
   nebeneinander, gleiche Ebene) statt untereinander — sonst sieht man auf dem
   iPhone nur die Nummern und nicht den Inhalt darunter, und beim Scrollen zum
   Inhalt sind die Tabs weg. Tippen auf eine Nummer zeigt Titel + Bild + Text
   direkt darunter. */
@media (max-width: 620px) {
  .lfeat__list {
    display: flex;
    gap: 8px;
    margin: 0 0 clamp(20px, 5vw, 30px);
  }
  .lfeat__list li {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Desktop-Reihen-Optik (Trennlinien, Akzentstrich, Indent) auf dem Tab-Chip
     zurücksetzen */
  .lfeat__list li:last-child .lfeat__row {
    border-bottom: 0;
  }
  .lfeat__row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 13px 4px;
    border: 1px solid color-mix(in oklch, var(--ink) 16%, transparent);
    border-radius: 12px;
    transition:
      background 0.3s var(--ease),
      border-color 0.3s var(--ease),
      color 0.3s var(--ease);
  }
  .lfeat__row::before {
    display: none;
  }
  .lfeat__rowtitle {
    display: none;
  }
  .lfeat__num {
    font-size: 1.15rem;
    color: var(--ink);
    opacity: 0.5;
  }
  .lfeat__row.is-active {
    padding-left: 4px;
    background: var(--accent);
    border-color: var(--accent);
  }
  .lfeat__row.is-active .lfeat__num {
    color: #fff;
    opacity: 1;
  }
  .lfeat__row:focus-visible {
    outline-offset: 2px;
  }
  /* Panel-Titel („Landingpages" …) als Caption unten aufs Bild — sonst fehlt bei
     Nur-Nummern-Tabs der Name der Leistung */
  .lfeat__vis:has(img) figcaption {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    text-align: left;
    padding: 42px 16px 14px;
    background: linear-gradient(to top, rgb(4 14 9 / 0.82), transparent);
    font-size: clamp(1.3rem, 5vw, 1.7rem);
  }
  .lfeat__vis figcaption::before {
    display: none;
  }
  /* Ghost-Nummer in der Beschreibung raus: die Tab-Leiste zeigt die aktive
     Nummer schon, und der CSS-Counter zählt die display:none-Panels nicht mit
     (zeigte sonst immer „01"). */
  .lfeat__pdesc::before {
    display: none;
  }
  .lfeat__pdesc {
    padding-top: 14px;
  }
}

/* ---------- Leistungs-Referenzen (Portfolio je Leistungsseite) ----------
   Basis-Section + Web-Variante (Browser-Mockup-Grid mit Scroll-Parallax).
   Platzhalter jetzt; echtes Screenshot/Video kommt später ins .lref__shot. */
.lref {
  padding: clamp(72px, 9vh, 150px) 0 clamp(24px, 4vh, 64px);
}
.lref__wrap {
  max-width: min(1760px, 92vw);
  margin-inline: auto;
}
.lref__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 4.4vw, 84px);
}
.lref__head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.lref__head .lref__note {
  color: var(--dim);
  max-width: 38ch;
  align-self: end;
  font-size: var(--t-0);
}
.lref__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 46px);
  align-items: start;
}
.lref__mock {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow:
    0 2px 6px rgb(6 20 14 / 0.06),
    0 26px 56px -32px rgb(6 20 14 / 0.4);
  will-change: transform;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.lref__mock:hover {
  box-shadow:
    0 4px 10px rgb(6 20 14 / 0.08),
    0 40px 80px -34px rgb(6 20 14 / 0.5);
}
/* Browser-Chrome */
.lref__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: oklch(0.29 0.03 160);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.lref__chrome span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.26);
}
.lref__chrome span:first-child {
  background: oklch(0.72 0.16 30 / 0.85);
}
.lref__chrome span:nth-child(2) {
  background: oklch(0.83 0.15 85 / 0.85);
}
.lref__chrome span:nth-child(3) {
  background: oklch(0.75 0.15 150 / 0.85);
}
.lref__chrome b {
  margin-left: 10px;
  height: 18px;
  flex: 1;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.08);
}
.lref__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      120% 120% at 80% 8%,
      oklch(0.55 0.1 164 / 0.5),
      transparent 60%
    ),
    linear-gradient(150deg, oklch(0.42 0.09 163), oklch(0.26 0.06 162));
}
.lref__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lref__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    oklch(0.85 0.05 165 / 0.13) 1px,
    transparent 1.4px
  );
  background-size: 22px 22px;
  pointer-events: none;
}
.lref__ph {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.5rem);
  color: oklch(0.96 0.02 160);
  text-align: center;
  padding: 0 10%;
}
.lref__ph::before {
  content: "Vorschau";
  display: block;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.86 0.09 165);
  margin-bottom: 0.6em;
}
.lref__mock figcaption {
  padding: clamp(15px, 1vw, 22px) clamp(16px, 1.2vw, 26px);
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem);
  letter-spacing: -0.01em;
}
.lref__mock figcaption em {
  display: block;
  font-family: var(--body);
  font-style: normal;
  color: var(--faint);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .lref__row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Referenz-Wand (.rgal) — Masonry-Spalten, 3D-Fly-in, Spalten-
   Parallax, BG-Farbübergang. Ersetzt die alte Device-Mockup-.lref-Galerie.
   Platzhalter jetzt; echtes Bild/Video kommt später ins .rgal__card. ---------- */
.rgal {
  position: relative;
  /* Accent je Seite via inline --rgal-accent überschreibbar (Farbübergang) */
  --rgal-accent: oklch(0.62 0.13 162);
  --rgal-mix: 0;
  /* BG lerpt beim Scrollen von Papier → sanfter Accent-Ton (JS scrubbt --rgal-mix
     0→1). Farbübergang je Seite unterschiedlich (eigener Accent). */
  background-color: color-mix(
    in oklch,
    var(--paper),
    var(--rgal-accent) calc(var(--rgal-mix) * 16%)
  );
  padding: clamp(84px, 11vh, 176px) 0 clamp(72px, 9vh, 150px);
  overflow: hidden;
}
.rgal__wrap {
  max-width: min(1640px, 92vw);
  margin-inline: auto;
}
.rgal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: clamp(44px, 5vw, 92px);
}
.rgal__kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rgal-accent);
  margin-bottom: var(--s3);
}
.rgal__head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.rgal__note {
  color: var(--dim);
  max-width: 40ch;
  font-size: var(--t-0);
  padding-bottom: 0.3em;
}
/* echte Spalten-DOM → Parallax pro Spalte. perspective fürs 3D-Fly-in. */
.rgal__cols {
  display: flex;
  gap: clamp(12px, 1.4vw, 26px);
  align-items: flex-start;
  perspective: 1500px;
}
.rgal__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 26px);
  will-change: transform;
}
/* mittlere Spalte tiefer angesetzt (versetztes Packen) */
.rgal__col--mid {
  margin-top: clamp(26px, 6vh, 92px);
}
.rgal__card {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(
      120% 120% at 78% 12%,
      color-mix(in oklch, var(--rgal-accent) 55%, transparent),
      transparent 62%
    ),
    linear-gradient(150deg, oklch(0.4 0.085 163), oklch(0.25 0.06 162));
  border: 1px solid oklch(0.7 0.06 165 / 0.16);
  box-shadow:
    0 2px 6px rgb(6 20 14 / 0.06),
    0 26px 56px -34px rgb(6 20 14 / 0.42);
  transform-origin: center top;
  will-change: transform, opacity;
}
/* Größen-Varianz (Masonry-Feel) */
.rgal__card--tall {
  aspect-ratio: 3 / 4;
}
.rgal__card--port {
  aspect-ratio: 4 / 5;
}
.rgal__card--sq {
  aspect-ratio: 1 / 1;
}
.rgal__card--wide {
  aspect-ratio: 4 / 3;
}
.rgal__card--xl {
  aspect-ratio: 5 / 7;
}
.rgal__shot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.rgal__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rgal__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    oklch(0.85 0.05 165 / 0.14) 1px,
    transparent 1.5px
  );
  background-size: 22px 22px;
  pointer-events: none;
}
.rgal__ph {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 0.82rem + 0.5vw, 1.35rem);
  color: oklch(0.96 0.02 160);
  text-align: center;
  padding: 0 12%;
  line-height: 1.15;
}
.rgal__ph::before {
  content: "Vorschau";
  display: block;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.86 0.09 165);
  margin-bottom: 0.6em;
}
/* Meta-Overlay unten, faded, fährt bei Hover/Focus auf */
.rgal__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(16px, 1.4vw, 26px);
  color: #fff;
  background: linear-gradient(
    to top,
    rgb(5 14 10 / 0.86) 0%,
    rgb(5 14 10 / 0.3) 60%,
    transparent 100%
  );
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.rgal__card:hover .rgal__meta,
.rgal__card:focus-within .rgal__meta {
  opacity: 1;
  transform: none;
}
.rgal__card:hover .rgal__shot img,
.rgal__card:focus-within .rgal__shot img {
  transform: scale(1.08);
}
.rgal__type {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.9 0.09 165);
  margin-bottom: 5px;
}
.rgal__title {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .rgal__cols {
    perspective: none;
  }
  .rgal__col--mid {
    margin-top: 0;
  }
  /* Meta auf Touch immer sichtbar (kein Hover) */
  .rgal__meta {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 620px) {
  .rgal__cols {
    flex-direction: column;
  }
}

/* ---------- Zoom-Parallax-Referenzen (Leistungen): Bild-Collage zoomt beim
   Scrollen — Mittelbild wächst bildschirmfüllend, die anderen fliegen 3D nach
   außen aus dem Bild. Port von Olivier Laroses „Zoom Parallax" auf Vanilla +
   GSAP (Sticky-Viewport + scrub-getriebenes scale je Element). ---------- */
.zoomp {
  position: relative;
  background: var(--paper);
}
.zoomp__intro {
  text-align: center;
  padding: clamp(72px, 10vh, 150px) 0 clamp(24px, 4vh, 52px);
}
.zoomp__kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: var(--s3);
}
.zoomp__h {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-inline: auto;
}
.zoomp__note {
  margin: var(--s4) auto 0;
  max-width: 48ch;
  color: var(--dim);
  font-size: var(--t-0);
}
/* Scroll-Bühne: 300vh Höhe → gibt dem Zoom Weg; das Sticky-Kind bleibt kleben. */
.zoomp__scroll {
  position: relative;
  height: 300vh;
}
.zoomp__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
}
.zoomp__el {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.zoomp__img {
  position: relative;
  width: 25vw;
  height: 25vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -34px rgb(6 20 14 / 0.55);
}
.zoomp__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Versetzte Start-Positionen der Collage (relativ zur Bildschirmmitte). Beim
   Skalieren des Eltern-.zoomp__el wächst der Versatz mit → Bilder fliegen raus. */
.zoomp__el:nth-child(2) .zoomp__img {
  top: -30vh;
  left: 5vw;
  width: 35vw;
  height: 30vh;
}
.zoomp__el:nth-child(3) .zoomp__img {
  top: -10vh;
  left: -25vw;
  width: 20vw;
  height: 45vh;
}
.zoomp__el:nth-child(4) .zoomp__img {
  left: 27.5vw;
  width: 25vw;
  height: 25vh;
}
.zoomp__el:nth-child(5) .zoomp__img {
  top: 27.5vh;
  left: 5vw;
  width: 20vw;
  height: 25vh;
}
.zoomp__el:nth-child(6) .zoomp__img {
  top: 27.5vh;
  left: -22.5vw;
  width: 30vw;
  height: 25vh;
}
.zoomp__el:nth-child(7) .zoomp__img {
  top: 22.5vh;
  left: 25vw;
  width: 15vw;
  height: 15vh;
}
/* Mobil (R44): organische Kollage wie Desktop — Hero 44vw (4:5, Faktor 4 ⇒
   füllt Screen) mittig, Satelliten in verschiedenen Größen/Formaten eng
   drumherum. width in vw + aspect-ratio, NIE vh-Höhen (Portrait verzerrt);
   svh nur für Bühnenhöhe (URL-Bar-Sprünge). */
@media (max-width: 820px) {
  .zoomp__scroll {
    height: 260svh;
  }
  .zoomp__sticky {
    height: 100svh;
  }
  .zoomp__img {
    width: 44vw;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  /* Organische Kollage wie Desktop (Arne R44): Hero mittig, drumherum
     verschiedene Größen + FORMATE (landscape/portrait/quadratisch), eng
     gesetzt (~8–14px), nichts überlappt. Offsets/Höhen komplett vw-basiert
     (aspect-ratio statt vh — Verhältnis-stabil auf jedem Gerät). */
  /* oben Mitte-rechts, breit */
  .zoomp__el:nth-child(2) .zoomp__img {
    top: calc(-39.4vw - 10px);
    left: 6vw;
    width: 38vw;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  /* links, hoch */
  .zoomp__el:nth-child(3) .zoomp__img {
    top: -12vw;
    left: -35vw;
    width: 22vw;
    height: auto;
    aspect-ratio: 2 / 3;
  }
  /* rechts, quadratisch */
  .zoomp__el:nth-child(4) .zoomp__img {
    top: -6vw;
    left: 36vw;
    width: 24vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* unten Mitte-rechts */
  .zoomp__el:nth-child(5) .zoomp__img {
    top: calc(38.5vw + 10px);
    left: 12vw;
    width: 26vw;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  /* unten links, breit */
  .zoomp__el:nth-child(6) .zoomp__img {
    top: calc(39vw + 10px);
    left: -26vw;
    width: 34vw;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  /* oben rechts, klein quadratisch */
  .zoomp__el:nth-child(7) .zoomp__img {
    top: -38vw;
    left: 36vw;
    width: 16vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}
/* Reduced-motion (alle Breiten): kein Sticky-Zoom (JS überspringt) →
   simple Galerie. Steht NACH dem Mobile-Block, gewinnt bei gleicher
   Spezifität; !important panzert gegen Inline-Transforms. */
@media (prefers-reduced-motion: reduce) {
  .zoomp__scroll {
    height: auto;
  }
  .zoomp__sticky {
    position: static;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: var(--s5) 5vw clamp(48px, 8vh, 90px);
  }
  .zoomp__el {
    position: static;
    display: block;
    transform: none !important;
  }
  .zoomp__img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
  }
  .zoomp__el:first-child {
    grid-column: 1 / -1;
  }
  .zoomp__el:first-child .zoomp__img {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Leistungen: Abschluss-Section (CTA + Footer) steigt mit runder
   Oberkante ÜBER das letzte, bildschirmfüllende Zoom-Bild — statt hartem
   Schnitt Bild→Fläche. Panel-BG = Body-Gradient-Boden (nahtlos in den Footer).
   Nur Desktop (mobil ist der Zoom ein Grid, kein Vollbild-Abschluss). ---------- */
@media (min-width: 821px) {
  .lbody .cta {
    position: relative;
    z-index: 5;
    margin-top: -11vh;
    padding-top: clamp(96px, 15vh, 190px);
    border-radius: clamp(32px, 3.4vw, 64px) clamp(32px, 3.4vw, 64px) 0 0;
    background: oklch(0.89 0.032 162);
    box-shadow: 0 -30px 64px -30px rgb(6 20 14 / 0.32);
  }
}

/* =====================================================================
   ÜBER-UNS v2 — breite 2K-Editorial-Seite, durchgehende Weiß→Grün→Schwarz-
   Abfahrt (Sektions-Gradienten stitchen an den Nähten), großzügige Typo,
   Hairline-Dividers + nummerierte Marker als „Striche/Symbole".
   ===================================================================== */
.uabout {
  position: relative;
  overflow: clip;
}
/* breiter Container als .wrap (füllt 2560 statt mittig-schmal) */
.uwrap {
  width: min(1680px, 90vw);
  margin-inline: auto;
}
/* wiederkehrender Sektions-Kopf: Hairline + nummeriertes Label + große Headline */
.usec-head {
  border-top: 1px solid var(--line-strong);
  padding-top: clamp(28px, 3vw, 56px);
  margin-bottom: clamp(48px, 6vh, 104px);
}
.usec-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emerald);
}
.usec-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0;
  color: var(--emerald);
}
.usec-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}
/* helle Variante (Grün/Schwarz-Zone) */
.usec-label--light {
  color: var(--mint);
}
.usec-label--light .usec-num {
  color: var(--mint);
}

/* ---------- HERO (weiß) ---------- */
.uhero {
  padding: clamp(112px, 15vh, 220px) 0 clamp(56px, 8vh, 120px);
  /* GANZ weiß — die Farbabfahrt startet erst bei „Wer macht was". */
}
.uhero__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s5);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s5);
}
.uhero__kicker {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--emerald);
}
.uhero__crumbs {
  font-size: 0.85rem;
  color: var(--faint);
}
.uhero__crumbs a {
  color: var(--emerald);
}
/* Headline links (groß), Index rechts (füllt die obere Fläche auf 2K) */
.uhero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 130px);
  align-items: start;
  margin-top: clamp(40px, 6vh, 90px);
}
.uhero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 1.6rem + 6.6vw, 8.4rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.uhero__title .serif-em {
  font-size: 0.92em;
}
.uhero__lead {
  margin-top: clamp(28px, 4vh, 52px);
  font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--dim);
  max-width: 44ch;
}
.uhero__aside {
  padding-top: clamp(8px, 1.6vh, 30px);
}
.uhero__asidekicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s4);
}
/* Kontakt-Karte im Hero-Aside: Icon-Liste mit Hairline-Trennern (statt der
   alten „Auf dieser Seite"-Sprungmarken — auf 3 Sektionen brachten die nichts,
   Kontakt ist an der prominenten Stelle nützlicher). */
.ucontact {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
}
.ucontact li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(13px, 1.9vh, 20px) 0;
  border-bottom: 1px solid var(--line);
}
.ucontact li:last-child {
  border-bottom: 0;
}
.ucontact__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  color: var(--emerald);
}
.ucontact__ic svg {
  width: 18px;
  height: 18px;
}
.ucontact a,
.ucontact__t {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ucontact a {
  transition: color 0.2s var(--ease);
}
.ucontact a:hover {
  color: var(--emerald);
}
.ucontact a:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Region + Reaktionszeit sind Info, kein Link → etwas ruhiger */
.ucontact li:nth-child(n + 3) .ucontact__t {
  font-weight: 500;
  color: var(--dim);
}

/* ---------- DUO (weiß, „Wer wir sind") ---------- */
.uduo {
  padding: clamp(40px, 6vh, 96px) 0 clamp(72px, 10vh, 160px);
  /* noch ganz weiß */
}
.uduo__grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(36px, 5vw, 100px);
  align-items: center;
}
.uduo__h {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: var(--s5);
  max-width: 14ch;
}
.uduo__text p {
  margin-top: var(--s5);
  color: var(--dim);
  font-size: var(--t-1);
  max-width: 52ch;
}
.uduo__media {
  margin: 0;
}
.uduo__media .tilt-frame__inner {
  aspect-ratio: 5 / 6;
  border-radius: 26px;
}

/* ---------- WER MACHT WAS (Grün) — alternierende Personen-Reihen ---------- */
.uteam {
  position: relative;
  color: #fff;
  /* Opaker Bridge: oben Weiß (nahtlos aus der weißen Duo-Section), fadet im
     textfreien Top-Padding smooth nach Smaragd — dann DURCHGEHEND weiter runter
     (uwhy/udark setzen die Abfahrt fort → kein Plateau, keine Naht). Opak =
     die hellen fixed atmos-Blobs schimmern NICHT durch (das war der Matsch). */
  padding: clamp(150px, 24vh, 320px) 0 clamp(80px, 11vh, 170px);
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    oklch(0.36 0.07 162) 15%,
    oklch(0.3 0.06 161) 55%,
    oklch(0.24 0.05 161) 100%
  );
}
.uteam .usec-head {
  border-top: 0;
  padding-top: 0;
}
.uteam__h {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: var(--s4);
  max-width: 20ch;
}
.uperson {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding: clamp(48px, 7vh, 110px) 0;
}
/* Kein Personen-Strich mehr (Arne-Strich weg) — nur die Label-Linie am Kopf. */
.uperson--rev .uperson__media {
  order: 2;
}
.uperson__media {
  margin: 0;
  max-width: 460px;
  width: 100%;
  justify-self: center;
}
/* Foto ohne Info-Overlay/Scrim (Name steht daneben) */
.uperson__media .pc-card {
  aspect-ratio: 0.82;
}
.uperson__media .pc-card::after {
  display: none;
}
.uperson__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.4rem, 1.6rem + 2vw, 4rem);
  color: var(--mint);
  line-height: 1;
  opacity: 0.9;
}
.uperson__role {
  margin-top: var(--s4);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
}
.uperson__name {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: var(--s3);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.uperson__age {
  font-family: var(--display);
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 0.55);
}
.uperson__bio {
  margin-top: var(--s5);
  color: rgb(255 255 255 / 0.8);
  font-size: var(--t-1);
  line-height: 1.55;
  max-width: 50ch;
}
.uperson__tools {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: var(--s6);
}
.uperson__tools li {
  font-size: 0.86rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  color: rgb(255 255 255 / 0.9);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.16);
}

/* ---------- WARUM WIR (Grün→Schwarz) — 4 Spalten mit Strich-Trennern ---------- */
.uwhy {
  position: relative;
  color: #fff;
  padding: clamp(80px, 11vh, 170px) 0 clamp(96px, 13vh, 200px);
  /* Abfahrt geht durch: Top = uteam-Boden (0.24) → Boden = udark-Top (0.15). */
  background: linear-gradient(
    180deg,
    oklch(0.24 0.05 161) 0%,
    oklch(0.15 0.035 161) 100%
  );
}
/* Strich ÜBER „03 Warum wir" weg (Arne) — nur die Label-Linie bleibt. */
.uwhy .usec-head {
  border-top: 0;
  padding-top: 0;
}
.uwhy__h {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: var(--s4);
  max-width: 18ch;
}
.uwhy__lead {
  margin-top: var(--s5);
  max-width: 54ch;
  color: rgb(255 255 255 / 0.76);
  font-size: var(--t-1);
}
.uwhy__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.5vw, 26px);
  margin-top: clamp(48px, 7vh, 100px);
}
/* echte Kärtchen mit Cursor-Spotlight (konsistenter Karten-Look für die Seite) */
.uwhy__card {
  position: relative;
  padding: clamp(28px, 2vw, 40px);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.045);
  border: 1px solid rgb(255 255 255 / 0.1);
  overflow: hidden;
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    opacity 0.3s var(--ease),
    filter 0.3s var(--ease);
}
.uwhy__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    oklch(0.72 0.13 162 / 0.18),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.uwhy__card:hover {
  border-color: oklch(0.7 0.12 162 / 0.45);
  transform: translateY(-4px);
}
.uwhy__card:hover::before {
  opacity: 1;
}
.uwhy__card > * {
  position: relative;
  z-index: 1;
}
.uwhy__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--mint);
}
.uwhy__card h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: var(--s4);
}
.uwhy__card p {
  margin-top: var(--s4);
  color: rgb(255 255 255 / 0.72);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .uwhy__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 920px) {
  .uhero__grid {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }
  .uduo__grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  .uduo__media {
    max-width: 460px;
  }
  .uperson {
    grid-template-columns: 1fr;
    gap: var(--s6);
    text-align: left;
  }
  .uperson--rev .uperson__media {
    order: 0;
  }
  .uperson__media {
    justify-self: start;
    max-width: 380px;
  }
}
@media (max-width: 620px) {
  .uwhy__grid {
    grid-template-columns: 1fr;
  }
}

/* ========== Über-uns v3: GANZE SEITE WEISS. Team/Why (vorher Grün/Weiß-Text)
   → transparenter Hintergrund + dunkler Text auf Weiß. Kein Shader, kein
   Dunkelbereich, nichts überlagert. ========== */
.uteam,
.uwhy {
  background: transparent;
  color: var(--ink);
}
.uteam {
  /* Bridge-Padding weg (kein Grün-Übergang mehr) */
  padding: clamp(72px, 10vh, 150px) 0 clamp(72px, 10vh, 150px);
}
.uteam .usec-label--light,
.uteam .usec-label--light .usec-num,
.uwhy .usec-label--light,
.uwhy .usec-label--light .usec-num {
  color: var(--emerald);
}
.uteam__h,
.uwhy__h {
  color: var(--ink);
}
/* Karten-Text hell (Arne R47): dunkles Grau war auf dem dunkelgrünen
   Glass-Grund schlecht lesbar */
.uwhy__card h3 {
  color: #fff;
}
.uperson__role,
.uperson__name,
.uwhy__n {
  color: var(--ink);
}
.uperson__role,
.uwhy__n {
  color: var(--emerald);
}
.uperson__name {
  color: var(--ink);
}
.uperson__age {
  color: var(--faint);
}
.uperson__bio,
.uwhy__lead {
  color: var(--dim);
}
.uwhy__card p {
  color: oklch(0.88 0.015 165 / 0.92);
}
.uperson__tools li {
  color: var(--dim);
  background: var(--paper-2);
  border-color: var(--line);
}
/* Liquid-Glass-Karten (Arne R42: exakt der uform__card-Look des Projektanfrage-
   Blocks — sehr durchsichtig, starker Blur, Hintergrund nur verschwommen).
   Hover = Fokus: aktive Karte hebt sich + wird deckender, Geschwister dimmen */
.uwhy__card {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.18);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 40px 90px -60px rgb(0 0 0 / 0.8);
}
/* Spekular-Sheen wie .uform__card::before — ::before ist hier schon der
   Spotlight-Layer, deshalb als ::after */
.uwhy__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgb(255 255 255 / 0.08) 0%,
    transparent 36%,
    transparent 74%,
    rgb(255 255 255 / 0.03) 100%
  );
  pointer-events: none;
  z-index: 0;
}
/* !important nötig: der data-reveal-Tween hinterlässt inline transform/opacity
   auf den Karten — Dim läuft deshalb komplett über filter (GSAP-frei) */
.uwhy__card:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: oklch(0.62 0.13 162 / 0.55);
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 30px 64px -32px rgb(6 20 14 / 0.55);
}
.uwhy__card::before {
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    oklch(0.62 0.13 162 / 0.12),
    transparent 62%
  );
}
@media (hover: hover) {
  .uwhy__grid:has(.uwhy__card:hover) .uwhy__card:not(:hover) {
    filter: opacity(0.5) saturate(0.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .uwhy__card:hover {
    transform: none !important;
  }
}

/* ========== LOSLEGEN — Kontakt-Formular-Template (weiß) ========== */
.uform {
  padding: clamp(80px, 12vh, 190px) 0 clamp(72px, 10vh, 150px);
}
.uform__wrap {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 5vw, 96px);
  /* „Loslegen" vertikal mittig auf Kartenhöhe (Arne 2026-07-09) */
  align-items: center;
}
.uform__h {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: var(--s3);
  max-width: 13ch;
}
.uform__sub {
  margin-top: var(--s5);
  color: var(--dim);
  font-size: var(--t-1);
  max-width: 42ch;
}
/* Liquid-Glass-Karte v2 (Arne 2026-07-09: „mehr Liquid Glass, NICHT grün"):
   kühl-neutrales Graphit-Glas (hue 250, fast chromafrei) — nimmt den grünen
   Home-Outro NICHT mehr an. Starker Blur + Top-Sheen + Spekular-Streif = echter
   Glass-Look. Helle Felder innen. */
/* Liquid-Glass v3 (Arne 2026-07-10): heller, durchsichtiger Weiß-Glass im
   Stil der FAQ-Boxen (rgb-white-Alpha + Blur) — der Hintergrund/Shader
   scheint klar durch, wirkt leicht und hochwertig statt massiv-dunkel. */
.uform__card {
  position: relative;
  overflow: hidden;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 26px;
  padding: clamp(24px, 3vw, 48px);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 40px 90px -60px rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
}
/* Spekular-Sheen — der „nasse" Glanz oben-links, kein Deko-Overkill */
.uform__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgb(255 255 255 / 0.08) 0%,
    transparent 36%,
    transparent 74%,
    rgb(255 255 255 / 0.03) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.uform__card > * {
  position: relative;
  z-index: 1;
}
/* Leistungs-Subpages: dunkles Grün-Schwarz-Band hinter dem Glas, damit die
   Karte überall crisp-dunkel wirkt (auf Weiß wurde sie matschig-grau). Ist
   zugleich das Substrat für den Grid-Distortion-Shader (Increment 3).
   Scope `.uform.section` trifft NUR Leistungen — Über-uns `.uform` bleibt. */
.uform.section {
  position: relative;
  background: radial-gradient(
    130% 105% at 50% -12%,
    oklch(0.22 0.035 162) 0%,
    oklch(0.13 0.022 162) 52%,
    oklch(0.08 0.014 162) 100%
  );
}
.uform.section .kicker {
  color: oklch(0.86 0.09 162);
}
.uform.section .uform__h {
  color: #fff;
}
.uform.section .uform__sub {
  color: oklch(0.85 0.03 165);
}
/* Grid-Distortion-Shader (React Bits, vanilla-Port) als lebendiger Hintergrund
   hinter dem Leistungs-Formular — grünes Fluid, das der Cursor verzerrt. Liegt
   über dem statischen Band, unter dem Glas-Formular. */
.uform.section {
  overflow: hidden;
}
.uform__gd {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.uform__gd.is-on {
  opacity: 1;
}
.uform.section > .uwrap {
  position: relative;
  z-index: 1;
}
/* dunkler Scrim über dem Shader, damit die weiße Schrift + das Glas lesbar
   bleiben (Fluid ist stellenweise hell-grün) */
.uform__gd::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 72% 50%,
    oklch(0.1 0.02 162 / 0.32),
    oklch(0.08 0.02 162 / 0.72) 100%
  );
  pointer-events: none;
}
.uform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.uform__card > .uform__row:first-child {
  margin-top: 0;
}
.ufield {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 16px;
}
.uform__row .ufield {
  margin-top: 0;
}
.ufield label,
.uform__chips legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.ufield label .opt {
  color: var(--faint);
  font-weight: 400;
}
.ufield input,
.ufield textarea {
  font: inherit;
  font-size: 0.98rem;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.ufield input:focus,
.ufield textarea:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px oklch(0.62 0.13 162 / 0.18);
}
.ufield textarea {
  resize: vertical;
  min-height: 96px;
}
.uform__chips {
  border: 0;
  padding: 0;
  margin: 22px 0 0;
}
.uform__chips legend {
  padding: 0;
  margin-bottom: 12px;
}
.uchips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.uchip {
  position: relative;
  display: inline-flex;
}
.uchip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.uchip span {
  display: block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-size: 0.9rem;
  color: var(--dim);
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.uchip input:checked + span {
  /* fast-weiß + dunkelgrüne Schrift: hebt sich auf dem dunklen Glass überall
     ab (Emerald ging auf Über-uns unter — Arne 2026-07-10) */
  background: oklch(0.97 0.01 165);
  border-color: oklch(0.97 0.01 165);
  color: var(--emerald-ink);
  font-weight: 600;
}
.uchip input:focus-visible + span {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}
.uform__consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--dim);
  line-height: 1.45;
}
.uform__consent input {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--emerald);
}
.uform__consent a {
  color: var(--emerald);
  text-decoration: underline;
}
.uform__submit {
  margin-top: 22px;
  width: 100%;
  justify-content: center;
  /* gleiche helle Mint-Farbe wie der Nav-CTA (Arne 2026-07-10) */
  background: var(--mint);
  color: var(--emerald-ink);
}
.uform__submit:hover {
  background: oklch(0.93 0.085 165);
  transform: translateY(-2px);
}
.uform__note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--faint);
  text-align: center;
}
.uform__done {
  display: none;
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: 12px;
  background: oklch(0.95 0.045 162);
  border: 1px solid oklch(0.7 0.1 162 / 0.4);
  color: var(--emerald-ink);
  font-size: 0.95rem;
}
.uform.is-sent .uform__done {
  display: block;
}
/* Turnstile-Widget (R47: appearance=interaction-only — unsichtbar, solange
   Cloudflare keine Interaktion verlangt). Platz nur reservieren, wenn die
   Challenge-Box wirklich erscheint (iframe da) — sonst null Layout-Einfluss. */
.uform__card .cf-turnstile {
  margin-top: 0;
  min-height: 0;
}
/* solange keine Challenge-Box nötig ist, injiziert Turnstile trotzdem einen
   ~73px-Platzhalter — komplett kollabieren */
.uform__card .cf-turnstile:not(:has(iframe)) {
  height: 0;
  overflow: hidden;
}
.uform__card .cf-turnstile:has(iframe) {
  margin-top: var(--s4);
  min-height: 65px;
}
/* Honeypot: für Menschen unsichtbar (kein display:none — manche Bots
   überspringen das), für Screenreader via aria-hidden + tabindex raus */
.uform__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.uform__error {
  margin-top: 14px;
  font-size: 0.92rem;
  text-align: center;
  color: oklch(0.78 0.14 25);
}
/* --- Felder/Chips/Labels für die dunkle Liquid-Glass-Karte --- */
.uform__card .ufield label,
.uform__card .uform__chips legend {
  color: oklch(0.97 0.01 165);
}
.uform__card .ufield label .opt {
  color: oklch(0.82 0.02 165 / 0.62);
}
.uform__card .ufield input,
.uform__card .ufield textarea {
  background: oklch(1 0 0 / 0.06);
  border-color: oklch(1 0 0 / 0.2);
  color: #fff;
}
.uform__card .ufield input::placeholder,
.uform__card .ufield textarea::placeholder {
  color: oklch(0.92 0 0 / 0.4);
}
.uform__card .ufield input:focus,
.uform__card .ufield textarea:focus {
  border-color: oklch(0.78 0.14 162);
  background: oklch(1 0 0 / 0.1);
  box-shadow: 0 0 0 3px oklch(0.62 0.13 162 / 0.3);
}
.uform__card .uchip span {
  background: oklch(1 0 0 / 0.06);
  border-color: oklch(1 0 0 / 0.2);
  color: oklch(0.93 0.01 165 / 0.92);
}
.uform__card .uchip input:checked + span {
  /* fast-weiß + dunkelgrüne Schrift: hebt sich auf dem dunklen Glass überall
     ab (Emerald ging auf Über-uns unter — Arne 2026-07-10) */
  background: oklch(0.97 0.01 165);
  border-color: oklch(0.97 0.01 165);
  color: var(--emerald-ink);
  font-weight: 600;
}
.uform__card .uform__consent {
  color: oklch(0.86 0.01 165 / 0.85);
}
.uform__card .uform__consent input {
  accent-color: var(--emerald);
}
.uform__card .uform__consent a {
  color: oklch(0.84 0.12 162);
}
.uform__card .uform__note {
  /* R43: 0.6-alpha ging auf hellen Shader-Streifen unter */
  color: oklch(0.95 0.01 165 / 0.85);
}
.uform__card .uform__done {
  background: oklch(0.3 0.06 162 / 0.6);
  border-color: oklch(0.7 0.12 162 / 0.5);
  color: oklch(0.95 0.05 162);
}
@media (max-width: 900px) {
  .uform__wrap {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  .uform__h {
    max-width: none;
  }
}
@media (max-width: 540px) {
  .uform__row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Über-uns: schwarze CTA+Footer-Zone. FloatingLines-Shader fadet wie
   auf der Startseite erst SPÄT beim Runterscrollen FULLSCREEN rein (fixed
   inset:0, Opacity an .ucta gekoppelt via app.js uAboutOutro()) — nicht mehr
   die halbe Zonen-Höhe. ---------- */
.udark {
  position: relative;
  z-index: 3;
  color: #fff;
  /* Abschluss: dunkles Smaragd (= uwhy-Boden) → fast Schwarz. Opak; der fixed
     Shader legt sich drüber. */
  background: linear-gradient(180deg, oklch(0.15 0.035 161) 0%, #05100b 55%);
}
.udark__shader {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  display: none;
}
.udark > .ucta,
.udark > .footer {
  position: relative;
  z-index: 1;
}
.ucta {
  /* „Loslegen" genau mittig über dem Footer — identisch zur Startseite (.octa). */
  min-height: calc(100vh - 330px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8vh 0;
}
.ucta .kicker {
  color: oklch(0.88 0.07 165);
}
.ucta h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: var(--s3);
  color: #fff;
}
.ucta__sub {
  margin: var(--s4) auto 0;
  max-width: 52ch;
  color: rgb(255 255 255 / 0.78);
  font-size: var(--t-1);
}
.ucta .actions {
  margin-top: var(--s6);
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  justify-content: center;
}
.udark .btn--ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 0.32);
}
.udark .btn--ghost:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.08);
}
.udark .footer {
  background: transparent;
  color: oklch(0.85 0.03 165);
}
.udark .footer__grid {
  border-top-color: oklch(0.9 0.06 160 / 0.16);
}
.udark .footer a,
.udark .footer__col h3,
.udark .footer__legal {
  color: oklch(0.85 0.03 165);
}
.udark .footer a:hover {
  color: #fff;
}
.udark .footer__social .soc {
  border-color: oklch(0.9 0.06 160 / 0.22);
  color: oklch(0.88 0.08 165);
}
.udark .footer__social .soc:hover {
  border-color: oklch(0.88 0.08 165);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .udark {
    background: linear-gradient(160deg, #123a2b, #06120c);
  }
  .udark__shader {
    display: none !important;
  }
}

/* ============ LEGAL-SEITEN (Impressum / Datenschutz) — R42 ============ */
/* Sanfter Verlauf Weiß → Hellgrün über die volle Dokumenthöhe; sonst
   bewusst effektfrei (kein JS, kein Shader auf den Rechtsseiten). */
body.legal {
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    oklch(0.965 0.02 160) 45%,
    oklch(0.9 0.05 160) 100%
  );
}
body.legal .prose h2 {
  color: var(--emerald-ink);
}
body.legal .prose a {
  color: var(--emerald);
  text-underline-offset: 3px;
}
body.legal .legal-stand {
  margin-top: var(--s7);
  font-size: 0.85rem;
  color: var(--faint);
}
/* Footer auf Hellgrün: Social-Hover ohne den weißen paper-2-Block —
   nur Smaragd-Rand + Lift (dunkler Footer-Stil, hell übersetzt) */
body.legal .footer__social .soc {
  border-color: rgb(6 20 14 / 0.28);
  color: var(--emerald-ink);
}
body.legal .footer__social .soc:hover {
  border-color: var(--emerald);
  background: rgb(6 20 14 / 0.06);
  color: var(--emerald-ink);
  transform: translateY(-2px);
}
body.legal .footer__legal,
body.legal .footer__col h3 {
  color: oklch(0.42 0.03 162);
}