/* ─── FONT ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ─── TOKENS ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;

  /* Surfaces – tiefes, leicht blaustichiges Schwarz statt #000.
     Die Seite wandert von hier nach unten schrittweise dunkler. */
  --void:   oklch(6.6% 0.007 265);
  --bg-0:   oklch(9.8% 0.008 265);
  --bg-1:   oklch(12.8% 0.009 265);
  --bg-2:   oklch(16.5% 0.010 265);
  --bg-3:   oklch(21% 0.011 265);

  /* Schrift */
  --fg-0:   oklch(97.5% 0.004 265);
  --fg-1:   oklch(75% 0.006 265);
  --fg-2:   oklch(70% 0.008 265);
  --fg-3:   oklch(65% 0.008 265);

  /* Linien */
  --hair:   oklch(100% 0 0 / .085);
  --hair-2: oklch(100% 0 0 / .16);
  --hair-3: oklch(100% 0 0 / .28);

  /* Ein einziger Akzent: warmes Ember (Scheinwerfer, Abendlicht, Bremsglut) */
  --ember:     oklch(78% 0.135 62);
  --ember-mut: oklch(78% 0.135 62 / .16);
  --ember-dim: oklch(78% 0.135 62 / .38);

  /* Getönte Schatten statt reinem Schwarz */
  --shadow-s: 0 1px 2px oklch(6% .01 265 / .5);
  --shadow-m: 0 12px 32px -12px oklch(5% .012 265 / .75);
  --shadow-l: 0 40px 90px -30px oklch(4% .012 265 / .9);

  --font:   -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --font-d: 'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --gx: clamp(20px, 6vw, 96px);
  /* Von clamp(88px, 11vw, 190px) heruntergenommen. Die Trennung zwischen
     den Abschnitten bleibt deutlich, fällt aber bei den kurzen Sektionen
     (Über mich, In Zahlen, Fragen) nicht mehr als Leerlauf auf. */
  --sy: clamp(64px, 8vw, 140px);
  --maxw: 1560px;

  /* Bewegungssprache: eine Familie, überall dieselben Kurven.
     --spring trägt die großen Auftritte (Hero-Headline), --ease-o alles Kleine. */
  --spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --apple:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-o:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  --dur-hover: 240ms;
  --dur-ui:    260ms;
  --dur-rv:    700ms;

  /* z-Skala statt willkürlicher 9999er */
  --z-grain:  80;
  --z-nav:    90;
  --z-menu:   85;
  --z-modal: 100;
  --z-intro: 120;
  --z-skip:  130;
}

html { scroll-behavior: smooth; background: var(--bg-0); }
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--fg-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
}
body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
::selection { background: var(--ember-dim); color: oklch(14% .01 265); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

/* dezente Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: oklch(30% .01 265); border-radius: 99px; border: 3px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: oklch(40% .01 265); }

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: var(--z-skip);
  background: var(--fg-0); color: var(--bg-0);
  padding: .6rem 1.1rem; border-radius: 8px; font-size: .85rem; font-weight: 600;
  transition: top .2s var(--ease-o);
}
.skip-link:focus-visible { top: 16px; }

/* Display-Stimme: leicht expandiertes Archivo */
.display {
  font-family: var(--font-d);
  font-stretch: 112%;
  letter-spacing: -.035em;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ─── FILMKORN (fix, nie im Scroll-Container) ────────────────────────── */
.grain {
  position: fixed; inset: -60px; z-index: var(--z-grain);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .045;
  mix-blend-mode: overlay;
}

/* ─── INTRO-VORHANG ──────────────────────────────────────────────────── */
.intro {
  position: fixed; inset: 0; z-index: var(--z-intro);
  background: var(--bg-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem;
  transition: opacity .55s var(--ease-o), transform .75s var(--apple);
  will-change: transform, opacity;
}
.intro-mark { opacity: 1; }
@keyframes introMark { to { opacity: 1; transform: none; } }
.intro.is-off { display: none; }

/* ─── SCROLL-REVEALS ─────────────────────────────────────────────────── */
/* Verborgen wird nur, wenn JS wirklich läuft – sonst bliebe bei einem
   Skriptfehler die halbe Seite dauerhaft unsichtbar. */
.js [data-rv] {
  opacity: 0;
  transform: translate3d(0, var(--rv-y, 20px), 0);
  transition:
    opacity 480ms var(--ease-o) var(--rvd, 0ms),
    transform var(--dur-rv) var(--spring) var(--rvd, 0ms);
}
.js [data-rv].is-in { opacity: 1; transform: none; }

/* ─── KATEGORIE-ZEILEN: SEITLICHES EINFLIEGEN ────────────────────────── */
/* Der Container bleibt bis zum Aufbau unsichtbar; visibility ist – anders
   als opacity – von den Kindern überschreibbar, deshalb können die einzelnen
   Begriffe darin einzeln erscheinen. */
.js [data-fly] { visibility: hidden; }
.js [data-fly] .fly,
.js [data-fly] .fly-sep {
  visibility: visible;
  display: inline-block;
  opacity: 0;
  transform: translate3d(var(--fx, 0px), 0, 0) scale(var(--fs, 1));
  transition: opacity 420ms var(--ease-o) var(--fd, 0ms),
              transform 640ms var(--spring) var(--fd, 0ms);
}
.js [data-fly].is-flown .fly,
.js [data-fly].is-flown .fly-sep { opacity: 1; transform: none; }
.fly-sep { pointer-events: none; }

/* Maskierte Zeile: schiebt sich hinter der eigenen Kante hervor */
.mask { display: block; overflow: hidden; }
.mask > i { display: block; font-style: inherit; }
.js .mask > i {
  transform: translate3d(0, 108%, 0);
  transition: transform var(--dur-rv) var(--spring) var(--rvd, 0ms);
}
.js .mask.is-in > i, .js [data-rv].is-in .mask > i { transform: none; }

/* ─── NAV ────────────────────────────────────────────────────────────── */
#site-nav {
  position: fixed;
  top: 14px; left: 14px; right: 14px;
  z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 14px clamp(14px, 3vw, 26px);
  border-radius: 999px;
  background: oklch(12% .009 265 / .55);
  border: 1px solid oklch(100% 0 0 / .10);
  box-shadow: var(--shadow-m), inset 0 1px 0 oklch(100% 0 0 / .07);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: padding .5s var(--apple), background .5s var(--ease-o),
              border-color .5s var(--ease-o), box-shadow .5s var(--ease-o),
              transform .6s var(--apple), top .4s var(--apple);
  overflow: hidden;
}
#site-nav.is-top {
  padding: 20px clamp(16px, 3vw, 30px);
  background: oklch(12% .009 265 / .18);
  border-color: oklch(100% 0 0 / .06);
  box-shadow: none;
}
#site-nav.is-hidden { transform: translateY(calc(-100% - 20px)); }

/* Scroll-Fortschritt als Haarlinie in der Pille */
.nav-progress {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--ember), oklch(90% .05 62));
  transform: scaleX(var(--p, 0)); transform-origin: left;
  opacity: .75;
}
#site-nav.is-top .nav-progress { opacity: 0; }

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img {
  height: 22px; width: auto; object-fit: contain; display: block;
  transition: height .5s var(--apple), opacity .3s;
  opacity: .95;
}
#site-nav.is-top .nav-logo-img { height: 28px; }
.nav-logo:hover .nav-logo-img { opacity: 1; }

.nav-links {
  display: flex; gap: .3rem; align-items: center;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
  position: relative;
  font-size: .875rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--fg-1);
  padding: .4rem .95rem; border-radius: 99px;
  transition: color .25s var(--ease-o), background .25s var(--ease-o);
}
.nav-links a::after {
  content: ''; position: absolute; left: 50%; bottom: .18rem;
  width: 3px; height: 3px; border-radius: 50%; background: var(--ember);
  transform: translateX(-50%) scale(0);
  transition: transform .35s var(--spring);
}
.nav-links a:hover { color: var(--fg-0); background: oklch(100% 0 0 / .06); }
.nav-links a.is-active { color: var(--fg-0); }
.nav-links a.is-active::after { transform: translateX(-50%) scale(1); }

.nav-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nav-ig {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--fg-1);
  border: 1px solid transparent;
  transition: color .25s, background .25s, border-color .25s, transform .35s var(--spring);
}
.nav-ig:hover { color: var(--fg-0); background: oklch(100% 0 0 / .07); border-color: var(--hair); transform: translateY(-1px); }

.nav-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--bg-0); background: var(--fg-0);
  padding: .42rem .5rem .42rem 1rem; border-radius: 99px;
  transition: transform .35s var(--spring), background .25s;
}
.nav-cta i {
  display: grid; place-items: center; font-style: normal;
  width: 24px; height: 24px; border-radius: 50%;
  background: oklch(10% .01 265 / .10);
  transition: transform .4s var(--spring), background .25s;
}
.nav-cta svg { display: block; }
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta:hover i { transform: translate(2px, -2px); background: oklch(10% .01 265 / .18); }
.nav-cta:active { transform: scale(.97); }

.nav-burger {
  display: none; position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 1px solid var(--hair); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 1.5px; margin-left: -7.5px;
  background: var(--fg-0); border-radius: 2px;
  transition: transform .45s var(--apple), opacity .2s var(--ease-o);
}
.nav-burger span:nth-child(1) { transform: translateY(-4.5px); }
.nav-burger span:nth-child(2) { transform: translateY(0); }
.nav-burger span:nth-child(3) { transform: translateY(4.5px); }
.nav-burger.open span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-burger.open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* Mobile-Panel: wächst aus der Nav-Pille (räumlich verankert) */
.nav-mobile {
  position: fixed; top: 12px; left: 14px; right: 14px;
  z-index: var(--z-menu);
  padding: 78px clamp(18px, 5vw, 28px) 22px;
  border-radius: 30px;
  background: oklch(11% .009 265 / .86);
  border: 1px solid oklch(100% 0 0 / .1);
  box-shadow: var(--shadow-l);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  transform-origin: top center;
  opacity: 0; transform: translateY(-12px) scale(.97);
  pointer-events: none;
  transition: opacity .38s var(--ease-o), transform .55s var(--apple), visibility .38s;
  visibility: hidden;
}
.nav-mobile.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.nav-mobile > a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-d); font-stretch: 108%;
  font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em;
  color: var(--fg-0);
  padding: .72rem 0;
  border-bottom: 1px solid var(--hair);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-o), transform .6s var(--spring), color .2s;
}
.nav-mobile > a:last-of-type { border-bottom: none; }
.nav-mobile > a span { font-family: var(--font); font-size: .6rem; font-weight: 600; letter-spacing: .14em; color: var(--fg-3); }
.nav-mobile.open > a { opacity: 1; transform: none; }
.nav-mobile.open > a:nth-child(1) { transition-delay: .06s; }
.nav-mobile.open > a:nth-child(2) { transition-delay: .11s; }
.nav-mobile.open > a:nth-child(3) { transition-delay: .16s; }
.nav-mobile.open > a:nth-child(4) { transition-delay: .21s; }
.nav-mobile-foot a {
  font-size: .8rem; font-weight: 500; color: var(--fg-1);
  transition: color .2s var(--ease-o);
}
.nav-mobile-foot a:hover { color: var(--fg-0); }
.nav-mobile-foot {
  margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
  font-size: .8rem; color: var(--fg-2);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-o) .26s, transform .6s var(--spring) .26s;
}
.nav-mobile.open .nav-mobile-foot { opacity: 1; transform: none; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 84;
  background: oklch(6% .01 265 / .55);
  opacity: 0; pointer-events: none;
  transition: opacity .38s var(--ease-o);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
}

/* ─── BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font); font-size: .875rem; font-weight: 500; letter-spacing: -.012em;
  padding: .58rem .62rem .58rem 1.25rem;
  border-radius: 99px; border: 1px solid transparent;
  cursor: pointer; touch-action: manipulation;
  transform: translate3d(var(--mgx, 0px), var(--mgy, 0px), 0) scale(var(--mgs, 1));
  transition: transform .45s var(--spring), background .3s var(--ease-o),
              border-color .3s var(--ease-o), color .3s var(--ease-o), box-shadow .3s;
}
.btn i {
  display: grid; place-items: center; font-style: normal; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  transition: transform .45s var(--spring), background .3s;
}
.btn i svg { display: block; }
.btn:active { --mgs: .975; transition-duration: .12s; }
.btn-solid { color: oklch(13% .01 265); background: var(--fg-0); box-shadow: 0 2px 20px -6px oklch(100% 0 0 / .3); }
.btn-solid i { background: oklch(10% .01 265 / .10); }
.btn-solid:hover { background: oklch(100% 0 0); box-shadow: 0 6px 34px -8px oklch(100% 0 0 / .42); }
.btn-solid:hover i { transform: translate(2px, -2px); background: oklch(10% .01 265 / .2); }
.btn-glass {
  color: var(--fg-0);
  background: oklch(100% 0 0 / .06);
  border-color: oklch(100% 0 0 / .16);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .08);
}
.btn-glass i { background: oklch(100% 0 0 / .1); }
.btn-glass:hover { background: oklch(100% 0 0 / .12); border-color: oklch(100% 0 0 / .3); }
.btn-glass:hover i { transform: translate(2px, -2px); background: oklch(100% 0 0 / .18); }
.btn-pad { padding-right: 1.25rem; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

/* ─── HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  overflow: hidden; display: flex; flex-direction: column;
  padding-top: calc(64px + 26px);
  isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center 38%;
}
.hero-photo img {
  width: 100%;
  object-fit: cover; object-position: center 38%;
  display: block;
  /* Das Auto liegt im Original bei 40–65 % der Bildhöhe und landete damit
     genau dort, wo die Überschrift steht. „object-position" konnte das
     nicht beheben: Der Bildkasten ist hoch genug, dass „cover" senkrecht
     gar nicht beschneidet – es gab nichts zu verschieben.
     Also wird der Beschnitt erst hergestellt: Das Bild ist 125 % des
     Kastens hoch und wird um 26 % seiner eigenen Höhe angehoben. Oben
     fällt damit ein Stück weg, das Auto rückt von 45–73 % auf 20–55 % der
     Herohöhe – über die Überschrift, die bei 54 % beginnt.
     Die 125 % sind der Mindestwert für diesen Hub: Bei weniger Höhe
     entstünde beim Anheben unten eine Lücke (1 / (1,12 × 0,74) = 1,21).
     Preis dafür sind 76 statt 94 % sichtbarer Bildbreite. */
  height: 112.5%;
  transform: translateY(-13%);
}
/* Einzige Bewegung in diesem Abschnitt beim Scrollen: ein sehr flacher
   Parallax auf dem Foto. Scroll-getrieben in CSS, läuft also nicht auf dem
   Main-Thread und ist ohne Unterstützung schlicht nicht vorhanden. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-photo {
      height: 106%;
      animation: heroDrift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100svh;
    }
    @keyframes heroDrift { to { transform: translateY(-5%); } }
  }
}

.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  /* Ein einziger, durchgehend weicher Verlauf. Die Stops folgen einer
     Potenzkurve statt geraden Segmenten – jede Steigungsänderung im Verlauf
     erzeugt sonst eine sichtbare Mach-Kante quer durchs Bild. */
  background:
    radial-gradient(135% 78% at 50% -8%,
      oklch(8% .008 265 / .68) 0%,
      oklch(8% .008 265 / .46) 26%,
      oklch(8% .008 265 / .24) 48%,
      oklch(8% .008 265 / .08) 66%,
      oklch(8% .008 265 / 0) 82%),
    linear-gradient(to top,
      oklch(9.8% .008 265 / 1)   0%,
      oklch(8.4% .008 265 / .82) 10%,
      oklch(8%   .008 265 / .65) 20%,
      oklch(8%   .008 265 / .50) 30%,
      oklch(8%   .008 265 / .37) 40%,
      oklch(8%   .008 265 / .26) 50%,
      oklch(8%   .008 265 / .17) 60%,
      oklch(8%   .008 265 / .10) 70%,
      oklch(8%   .008 265 / .04) 80%,
      oklch(8%   .008 265 / 0)   92%);
}

.hero-meta {
  position: relative; z-index: 2;
  padding: 2.6rem var(--gx) 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: oklch(100% 0 0 / .9);
  text-shadow: 0 1px 14px oklch(8% .008 265 / .7);
}
.hero-meta .live {
  display: inline-flex; align-items: center; gap: .5em;
}
.hero-meta .live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 0 0 var(--ember-dim);
  animation: pulseDot 2.6s var(--ease-io) infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 var(--ember-mut); }
  50%      { box-shadow: 0 0 0 5px oklch(78% .135 62 / 0); }
}

.hero-body {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gx) clamp(2.4rem, 5vw, 5.5rem);
  max-width: var(--maxw); width: 100%; margin: 0 auto;
}
.hero-rule {
  width: 100%; height: 1px; background: oklch(100% 0 0 / .2);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  transform: scaleX(0); transform-origin: left;
  animation: ruleIn 1.1s var(--apple) .32s forwards;
}
@keyframes ruleIn { to { transform: scaleX(1); } }

.hero-h1 {
  font-family: var(--font-d); font-stretch: 112%;
  /* Die Größe hängt an vmin, nicht an vw – das ist der Kern der Sache.
     Der Platz, den die Überschrift dem Foto wegnimmt, ist eine Frage der
     HÖHE; die Schrift skalierte aber nach der BREITE. Auf einem flachen,
     breiten Fenster lief das auseinander: bei 1280 × 800 ergab 7,6 vw
     97 px Schrift, der Textblock belegte 58 % der Herohöhe und vom Auto
     blieben 23 % der Fläche frei. Auf 768 × 1024 – gleiche Schriftformel,
     mehr Höhe – waren es 78 %.
     Breiten-Breakpoints hätten das nicht lösen können: 1024 × 768 und
     1024 × 1366 haben dieselbe Breite und völlig verschiedenen Platz.
     vmin nimmt immer die knappere der beiden Achsen.
     Gemessen (freie Autofläche, Rasterabtastung) bei 1280 × 800:
       7,6 vw → 97 px / 23 %      7,8 vmin → 62 px / 73 %
       8,2 vmin → 66 px / 69 %    9 vmin  → 72 px / 62 %
     7,8 vmin gewählt: der größte Wert, bei dem die Überschrift auf ALLEN
     acht geprüften Breiten dreizeilig bleibt – ab 8 vmin bricht sie auf
     768 px in vier Zeilen um. Nach unten begrenzt die Hierarchie: bei
     6,6 vmin wäre sie mit 53 px kleiner als die Sektionstitel (56 px).
     Auf Telefonen greift weiterhin der Mindestwert von 2 rem. */
  font-size: clamp(2rem, 7.8vmin, 7.6rem);
  font-weight: 780; line-height: .93; letter-spacing: -.045em;
  color: oklch(100% 0 0);
  margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem);
  text-wrap: balance;
}
.hero-h1 .mask > i {
  transform: translate3d(0, 108%, 0);
  animation: lineUp 1.15s var(--spring) forwards;
}
.hero-h1 .mask:nth-of-type(1) > i { animation-delay: .42s; }
.hero-h1 .mask:nth-of-type(2) > i { animation-delay: .50s; }
.hero-h1 .mask:nth-of-type(3) > i { animation-delay: .58s; }
@keyframes lineUp { to { transform: none; } }

.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.4rem;
}
.hero-services {
  font-size: .72rem; font-weight: 400; letter-spacing: .04em;
  color: oklch(100% 0 0 / .74); max-width: 34ch; line-height: 1.9;
}
.hero-services .fly-sep { color: var(--ember); }
.hero-cta {
  display: flex; gap: .6rem; flex-wrap: wrap;
  opacity: 0; animation: fadeSlide .9s var(--spring) .92s forwards;
}
/* Platz für den Scroll-Hinweis in der rechten Randspalte freihalten */
@media (min-width: 901px) { .hero-foot { padding-right: 58px; } }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Scroll-Hinweis: nur eine Haarlinie, die nach unten läuft. Der frühere
   Schriftzug stand über dem hellsten Teil des Fotos und war kaum lesbar. */
.hero-scroll {
  position: absolute; right: var(--gx); bottom: clamp(2.4rem, 5vw, 5.5rem); z-index: 2;
  display: flex; justify-content: center;
  width: 1px; height: 54px;
  background: oklch(100% 0 0 / .16);
  opacity: 0; animation: fadeSlide .9s var(--spring) 1.05s forwards;
}
.hero-scroll::after {
  content: ''; width: 1px; height: 100%;
  background: linear-gradient(to bottom, oklch(100% 0 0 / .85), oklch(100% 0 0 / .1));
  box-shadow: 0 0 10px oklch(8% .008 265 / .8);
  animation: scrollCue 2.4s var(--ease-io) infinite;
}
@keyframes scrollCue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 900px) { .hero-scroll { display: none; } }


/* ─── SEKTIONS-BÄNDER UND -NÄHTE ─────────────────────────────────────── */
/* Jede Sektion sitzt auf einem eigenen Ton. Damit die Kante trennt, ohne zu
   schneiden, läuft der Ton der vorigen Sektion noch ein Stück in die neue
   hinein – abgegrenzt und verzahnt zugleich. */
.band { position: relative; isolation: isolate; }
.band::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 180px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--band-from, transparent), transparent);
}

/* ─── SECTION-SHELL ──────────────────────────────────────────────────── */
.sec {
  padding: var(--sy) var(--gx);
  max-width: var(--maxw); margin: 0 auto;
}
.sec-alt { background: var(--bg-1); max-width: none; }
.sec-alt > .sec-inner { max-width: var(--maxw); margin: 0 auto; }
.sec-head { margin-bottom: clamp(2.8rem, 5.5vw, 5.5rem); }
/* Naht: dieselbe Linie an jedem Sektionsanfang, aber das Ember-Segment
   darauf wandert von Sektion zu Sektion weiter nach rechts – ein
   Fortschrittsband, das die Abschnitte sichtbar aneinanderreiht. */
.sec-index {
  --rv-y: 0px;
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3);
  padding-bottom: clamp(1rem, 1.8vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 2.8vw, 2.4rem);
}
.sec-index b {
  font-weight: 700; color: var(--ember); font-variant-numeric: tabular-nums;
}
.sec-index::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hair);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--apple) var(--rvd, 0ms);
}
.sec-index::before {
  content: ''; position: absolute; bottom: 0; height: 1px;
  left: var(--seam-at, 0%); width: clamp(70px, 9vw, 130px);
  background: linear-gradient(90deg, oklch(78% .135 62 / 0), var(--ember), oklch(78% .135 62 / 0));
  opacity: 0;
  transition: opacity .9s var(--ease-o) calc(var(--rvd, 0ms) + 620ms);
}
.js .sec-index.is-in::after { transform: scaleX(1); }
.js .sec-index.is-in::before { opacity: 1; }
html:not(.js) .sec-index::after { transform: scaleX(1); }
html:not(.js) .sec-index::before { opacity: 1; }
.sec-title {
  font-family: var(--font-d); font-stretch: 112%;
  font-size: clamp(1.95rem, 4.4vw, 5rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1.0;
  color: var(--fg-0);
  text-wrap: balance;
}
.sec-sub {
  font-size: 1rem; color: var(--fg-1); font-weight: 300;
  line-height: 1.8; max-width: 54ch; margin-top: 1.3rem;
  text-wrap: pretty;
}

/* ─── KI-CHIP ────────────────────────────────────────────────────────── */
.chip-ki {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: .32em;
  font-size: .57rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: oklch(100% 0 0 / .94);
  background: oklch(9% .008 265 / .58);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid oklch(100% 0 0 / .22);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .12);
  padding: .3em .78em; border-radius: 99px;
  pointer-events: none;
}

/* ─── LEISTUNGEN: AKKORDEON ──────────────────────────────────────────── */
.leistungen-intro .sec-sub { max-width: 58ch; }
.svc-list { border-top: 1px solid var(--hair); }

.svc-item {
  position: relative;
  border-bottom: 1px solid var(--hair);
  transition: background .4s var(--ease-o),
              opacity 480ms var(--ease-o) var(--rvd, 0ms),
              transform var(--dur-rv) var(--spring) var(--rvd, 0ms);
}
.svc-item.open { background: oklch(100% 0 0 / .015); }
/* Ember-Linie, die beim Hover von links einläuft */
.svc-item::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--ember), transparent 70%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--apple);
}
.svc-item:hover::before, .svc-item.open::before { transform: scaleX(1); }

.svc-trigger {
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center;
  gap: 1.5rem; padding: clamp(1.5rem, 2.6vw, 2.3rem) 0;
  cursor: pointer; user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.svc-num {
  font-size: .62rem; font-weight: 600; letter-spacing: .12em;
  color: var(--fg-3); padding-top: .3em; font-variant-numeric: tabular-nums;
  transition: color .35s var(--ease-o);
}
.svc-item:hover .svc-num, .svc-item.open .svc-num { color: var(--ember); }
.svc-name {
  font-family: var(--font-d); font-stretch: 108%;
  font-size: clamp(1.4rem, 3vw, 3.2rem);
  font-weight: 620; letter-spacing: -.035em; line-height: 1.06;
  color: var(--fg-1);
  transition: color .35s var(--ease-o), transform .6s var(--apple);
}
.svc-item:hover .svc-name { color: var(--fg-0); transform: translateX(8px); }
.svc-item.open .svc-name { color: var(--fg-0); transform: translateX(8px); }

.svc-toggle {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hair-2);
  flex-shrink: 0;
  transition: transform .55s var(--apple), background .3s, border-color .3s;
}
.svc-toggle::before, .svc-toggle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--fg-1); border-radius: 2px;
  transition: background .3s, opacity .3s var(--ease-o), transform .45s var(--apple);
}
.svc-toggle::before { width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; }
.svc-toggle::after  { width: 1.5px; height: 11px; margin: -5.5px 0 0 -.75px; }
.svc-item:hover .svc-toggle { border-color: var(--hair-3); }
.svc-item.open .svc-toggle {
  transform: rotate(135deg);
  background: var(--fg-0); border-color: var(--fg-0);
}
.svc-item.open .svc-toggle::before,
.svc-item.open .svc-toggle::after { background: var(--bg-0); }
.svc-item.open .svc-toggle::after { opacity: 0; }

/* Ausklappen über die Höhe: die verbreitete 0fr→1fr-Grid-Variante springt in
   manchen Engines ohne Zwischenschritte, eine Höhen-Transition läuft überall.
   Ohne JS bleibt alles offen, damit die Leistungstexte erreichbar sind. */
.svc-body { overflow: hidden; }
.js .svc-body { height: 0; transition: height .55s var(--apple); }
.svc-body-inner {
  padding: 0 0 clamp(2rem, 3.5vw, 3.2rem) calc(54px + 1.5rem);
  display: grid; grid-template-columns: minmax(0, 44ch) 1fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-o), transform .6s var(--apple);
}
.svc-item.open .svc-body-inner { opacity: 1; transform: none; transition-delay: .12s; }
.svc-text { font-size: .95rem; color: var(--fg-1); font-weight: 300; line-height: 1.85; text-wrap: pretty; }
.svc-text p + p { margin-top: .9rem; }
.svc-note {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: 1.4rem; padding: .95rem 1.1rem;
  border: 1px solid var(--ember-mut); border-radius: 14px;
  background: oklch(78% .135 62 / .05);
  font-size: .82rem; color: var(--fg-1); line-height: 1.7;
}
.svc-note .mark { font-size: .95rem; line-height: 1.5; color: var(--ember); }
.svc-note strong { color: var(--fg-0); font-weight: 600; }
.svc-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.svc-tag {
  font-size: .72rem; font-weight: 500; color: var(--fg-1);
  background: oklch(100% 0 0 / .055);
  border: 1px solid var(--hair);
  padding: .3rem .8rem; border-radius: 99px; letter-spacing: -.01em;
  transition: background .25s, color .25s, border-color .25s;
}
.svc-tag:hover { background: oklch(100% 0 0 / .1); color: var(--fg-0); border-color: var(--hair-2); }

.svc-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svc-media-item, .svc-vid-thumb {
  position: relative;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--hair); padding: 0; background: var(--bg-2);
  transition: transform .55s var(--spring), border-color .35s, box-shadow .45s;
  opacity: 0; transform: translateY(16px);
}
.svc-item.open .svc-media-item,
.svc-item.open .svc-vid-thumb { opacity: 1; transform: none; }
.svc-item.open .svc-media-grid > *:nth-child(1) { transition-delay: .14s; }
.svc-item.open .svc-media-grid > *:nth-child(2) { transition-delay: .19s; }
.svc-item.open .svc-media-grid > *:nth-child(3) { transition-delay: .24s; }
.svc-item.open .svc-media-grid > *:nth-child(4) { transition-delay: .29s; }
.svc-item.open .svc-media-grid > *:nth-child(5) { transition-delay: .34s; }
.svc-item.open .svc-media-grid > *:nth-child(6) { transition-delay: .39s; }
.svc-item.open .svc-media-grid > *:nth-child(7) { transition-delay: .44s; }
.svc-media-item:hover, .svc-vid-thumb:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--hair-2);
  box-shadow: var(--shadow-m);
}
.svc-media-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; height: auto;
  transition: filter .5s var(--ease-o), transform .8s var(--spring);
}
.svc-media-item:hover .svc-media-img { transform: scale(1.06); }
.svc-vid-thumb { aspect-ratio: 4/3; }
.svc-vid-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  transition: transform .8s var(--spring);
}
.svc-vid-thumb:hover img { transform: scale(1.06); }
.svc-play-icon {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: oklch(8% .008 265 / .32);
  transition: background .35s var(--ease-o);
}
.svc-play-icon::before {
  content: '';
  width: 46px; height: 46px; border-radius: 50%;
  background: oklch(10% .008 265 / .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/18px no-repeat;
  border: 1px solid oklch(100% 0 0 / .38);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .5s var(--spring), background .3s;
}
.svc-vid-thumb:hover .svc-play-icon { background: oklch(8% .008 265 / .18); }
.svc-vid-thumb:hover .svc-play-icon::before { transform: scale(1.1); background-color: oklch(12% .008 265 / .62); }

/* ─── PORTFOLIO ──────────────────────────────────────────────────────── */
#portfolio { position: relative; }
.pf-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: clamp(2.2rem, 4vw, 3.8rem); flex-wrap: wrap; gap: 1.8rem;
}
.pf-filter { display: flex; gap: .4rem; flex-wrap: wrap; }
.f-btn {
  position: relative;
  font-family: var(--font); font-size: .78rem; font-weight: 500; letter-spacing: -.012em;
  color: var(--fg-1); background: oklch(100% 0 0 / .035);
  border: 1px solid var(--hair); padding: .44rem 1rem; border-radius: 99px;
  cursor: pointer; touch-action: manipulation;
  transition: color .3s var(--ease-o), background .3s var(--ease-o),
              border-color .3s var(--ease-o), transform .35s var(--spring);
}
.f-btn:hover { color: var(--fg-0); background: oklch(100% 0 0 / .08); border-color: var(--hair-2); }
.f-btn.on {
  color: oklch(13% .01 265); background: var(--fg-0); border-color: var(--fg-0);
  box-shadow: 0 2px 18px -6px oklch(100% 0 0 / .35);
}
.f-btn:active { transform: scale(.96); }
.pf-count {
  font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); font-variant-numeric: tabular-nums; margin-top: .9rem;
}

/* Basis: CSS-Spalten-Masonry (funktioniert auch ohne JS, ohne Beschnitt) */
.masonry { columns: 3; column-gap: 14px; }
/* Aufwertung per JS: echtes Grid-Masonry mit korrekter Leserichtung */
.masonry.grid-on {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 2px;
  column-gap: 14px; row-gap: 0;
  grid-auto-flow: row dense;
  align-items: start;
}
.masonry.grid-on .pf-card { margin-bottom: 0; grid-row-end: span var(--span, 160); align-self: start; }

.pf-card {
  --rv-y: 16px;
  display: block; width: 100%; text-align: left;
  border: none; background: none; font-family: var(--font);
  break-inside: avoid; margin-bottom: 14px;
  border-radius: 16px; overflow: hidden; position: relative; cursor: pointer;
  padding: 0;
  transition: opacity .45s var(--ease-o), transform .55s var(--spring), box-shadow .5s var(--ease-o);
}
.pf-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .07);
  transition: box-shadow .45s var(--ease-o), opacity .4s;
}
.pf-card:hover::after { box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .2); }
.pf-card.out { opacity: 0; transform: scale(.96) translateY(8px); pointer-events: none; }
.pf-card.hide { display: none; }
.pf-card:hover { box-shadow: var(--shadow-l); }

.pf-thumb {
  display: block; width: 100%; height: auto;
  transform: scale(1.001);
  filter: saturate(.88) brightness(.93);
  transition: transform .95s var(--spring), filter .6s var(--ease-o);
}
.pf-card:hover .pf-thumb { transform: scale(1.055); filter: saturate(1.04) brightness(1); }

/* Lichtkegel folgt dem Zeiger (nur Desktop, nur die gehoverte Karte) */
.pf-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease-o);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), oklch(100% 0 0 / .14), transparent 62%);
  mix-blend-mode: soft-light;
}
.pf-card:hover .pf-glow { opacity: 1; }

.pf-cap {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, oklch(7% .008 265 / .82) 0%, oklch(7% .008 265 / .2) 42%, transparent 68%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem 1.2rem;
  opacity: 0; transition: opacity .4s var(--ease-o);
}
.pf-card:hover .pf-cap, .pf-card:focus-visible .pf-cap { opacity: 1; }
.pf-cap > span { display: block; transform: translateY(10px); transition: transform .55s var(--spring); }
.pf-card:hover .pf-cap > span { transform: none; }
.pf-card:hover .pf-cap .pf-label { transition-delay: .04s; }
.pf-cat {
  font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember); margin-bottom: .3rem;
}
.pf-label { font-size: .88rem; font-weight: 600; color: oklch(100% 0 0); letter-spacing: -.015em; line-height: 1.3; }
.pf-card:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ─── ÜBER MICH ──────────────────────────────────────────────────────── */
.about-layout {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(3rem, 6vw, 7.5rem); align-items: start;
  margin-top: clamp(2.5rem, 4vw, 4.5rem);
}
.about-sticky { position: sticky; top: 110px; }
.about-photo {
  width: 100%; aspect-ratio: 3/4; border-radius: 22px;
  overflow: hidden; position: relative; display: block;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-l);
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  transition: transform 1.1s var(--spring);
}
.about-photo:hover img { transform: scale(1.03); }
.about-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, oklch(7% .008 265 / .62), transparent 46%);
}
.about-photo::after {
  content: 'Luan Schmauder · gecaptured';
  position: absolute; bottom: 1.3rem; left: 1.3rem; z-index: 2;
  font-size: .68rem; letter-spacing: .05em; color: oklch(100% 0 0 / .62);
  pointer-events: none;
}
.about-pull {
  font-family: var(--font-d); font-stretch: 108%;
  font-size: clamp(1.4rem, 2.4vw, 2.15rem);
  font-weight: 620; letter-spacing: -.032em; line-height: 1.18;
  color: var(--fg-0); margin-bottom: 2rem; text-wrap: balance;
}
.about-p {
  font-size: 1.02rem; color: var(--fg-1); font-weight: 300; line-height: 1.9;
  margin-bottom: 1.2rem; max-width: 68ch; text-wrap: pretty;
}
.about-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem; }
.atag {
  font-size: .76rem; font-weight: 500; color: var(--fg-1);
  background: oklch(100% 0 0 / .05); border: 1px solid var(--hair);
  padding: .36rem .9rem; border-radius: 99px; letter-spacing: -.012em;
  transition: background .25s, color .25s, border-color .25s, transform .35s var(--spring);
}
.atag:hover { background: oklch(100% 0 0 / .1); color: var(--fg-0); border-color: var(--hair-2); transform: translateY(-1px); }

.about-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 2.4rem;
}
.about-gallery img {
  width: 100%; aspect-ratio: 1/1; height: auto;
  object-fit: cover; border-radius: 14px; display: block;
  border: 1px solid var(--hair);
  filter: saturate(.85) brightness(.9);
  transition: transform .7s var(--spring), filter .5s var(--ease-o), border-color .35s;
}
.about-gallery img:hover {
  transform: translateY(-4px) scale(1.03);
  filter: saturate(1.03) brightness(1);
  border-color: var(--hair-2);
}

/* ─── KONTAKT ────────────────────────────────────────────────────────── */
#kontakt {
  position: relative;
  background: var(--bg-1);
  padding: var(--sy) var(--gx) calc(var(--sy) * .72);
  overflow: hidden;
}
/* weiches Ember-Licht, unten links verankert – gibt dem Abschluss Wärme,
   ohne als Fläche lesbar zu werden */
#kontakt::after {
  content: ''; position: absolute; left: -14%; bottom: -34%;
  width: 78%; height: 96%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, oklch(78% .135 62 / .11), oklch(78% .135 62 / 0) 72%);
}
.kontakt-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; }
.kontakt-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(3rem, 6vw, 7.5rem); align-items: start;
}
.kontakt-h {
  font-family: var(--font-d); font-stretch: 112%;
  font-size: clamp(2.4rem, 5.4vw, 6.2rem);
  font-weight: 730; letter-spacing: -.045em; line-height: .95;
  color: var(--fg-0); margin-bottom: 1.1rem; text-wrap: balance;
}
.kontakt-sub {
  font-size: 1.02rem; color: var(--fg-1); font-weight: 300;
  max-width: 40ch; line-height: 1.8;
}

/* Direkte Kontaktwege als große, anfassbare Zeilen */
.kontakt-lines { margin-top: clamp(2.4rem, 4vw, 3.6rem); border-top: 1px solid var(--hair); }
.kontakt-line {
  position: relative; display: flex; align-items: center; gap: 1.2rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--hair);
}
.kontakt-line::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--ember), oklch(78% .135 62 / 0));
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--apple);
}
.kl-label {
  flex: 0 0 4.5rem;
  font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-3);
}
.kl-value {
  flex: 1;
  font-family: var(--font-d); font-stretch: 106%;
  font-size: clamp(1.05rem, 1.9vw, 1.55rem);
  font-weight: 600; letter-spacing: -.032em; color: var(--fg-1);
  transition: color .3s var(--ease-o), transform .55s var(--apple);
}
.kl-arrow {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--hair-2); display: grid; place-items: center;
  color: var(--fg-2);
  transition: transform .5s var(--spring), border-color .3s, color .3s, background .3s;
}
.kontakt-line:hover::after { transform: scaleX(1); }
.kontakt-line:hover .kl-value { color: var(--fg-0); transform: translateX(6px); }
.kontakt-line:hover .kl-arrow {
  transform: translate(2px, -2px);
  border-color: var(--ember-dim); color: var(--ember);
  background: oklch(78% .135 62 / .08);
}
.kontakt-line:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 6px; }
.kontakt-note {
  margin-top: 1.7rem; font-size: .84rem; line-height: 1.75;
  color: var(--fg-2); font-weight: 300; max-width: 34ch;
}

/* Formular: Felder ohne Kasten, nur eine Linie, die beim Fokus einläuft */
.kontakt-form { position: relative; }
.form-eyebrow {
  font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-3); display: block; margin-bottom: 1.9rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--hair);
}
.f-field { position: relative; padding-top: 1.35rem; margin-bottom: 1.9rem; }
.f-field label {
  position: absolute; top: 0; left: 0;
  font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-3);
  transition: color .3s var(--ease-o);
}
.f-field input,
.f-field textarea {
  width: 100%; display: block;
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid var(--hair-2);
  padding: .5rem 0 .75rem;
  font-family: var(--font); font-size: 1.02rem; line-height: 1.6;
  color: var(--fg-0); outline: none; -webkit-appearance: none;
  transition: border-color .3s var(--ease-o);
}
.f-field textarea { min-height: 116px; resize: vertical; }
.f-field input::placeholder,
.f-field textarea::placeholder { color: var(--fg-3); }
.f-field::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--apple);
}
.f-field:focus-within::after { transform: scaleX(1); }
.f-field:focus-within label { color: var(--ember); }
.f-field input:user-invalid,
.f-field textarea:user-invalid { border-bottom-color: oklch(62% .16 25 / .7); }

.form-send {
  width: 100%; justify-content: center;
  margin-top: .6rem; padding: 1.05rem 1.6rem;
  font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  border-radius: 99px;
}
.form-consent { margin-top: 1.2rem; font-size: .76rem; line-height: 1.7; color: var(--fg-2); }
.form-consent a {
  color: var(--fg-1); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--hair-2);
  transition: color .2s, text-decoration-color .2s;
}
.form-consent a:hover { color: var(--fg-0); text-decoration-color: var(--ember); }
/* ─── LEGAL (Impressum / Datenschutz) ────────────────────────────────── */
#legal {
  position: relative;
  background: var(--bg-0);
  padding: calc(var(--sy) * .62) var(--gx);
}
.legal-wrap { max-width: 960px; margin: 0 auto; }
.legal-intro {
  font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 1.4rem;
}
.legal-item { border-bottom: 1px solid var(--hair); }
.legal-item:first-of-type { border-top: 1px solid var(--hair); }
.legal-head {
  display: flex; align-items: center; gap: 1.1rem;
  padding: clamp(1.3rem, 2.2vw, 1.8rem) 0;
  cursor: pointer; list-style: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.legal-head::-webkit-details-marker { display: none; }
.legal-head::marker { content: ''; }
.legal-eyebrow {
  flex: 0 0 auto;
  font-size: .57rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); border: 1px solid var(--hair-2);
  padding: 4px 10px; border-radius: 20px; white-space: nowrap; line-height: 1.5;
  transition: color .3s, border-color .3s;
}
.legal-title {
  flex: 1;
  font-family: var(--font-d); font-stretch: 106%;
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  font-weight: 620; letter-spacing: -.03em; color: var(--fg-1);
  transition: color .3s var(--ease-o), transform .55s var(--apple);
}
.legal-toggle {
  position: relative; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--hair-2);
  transition: transform .55s var(--apple), background .3s, border-color .3s;
}
.legal-toggle::before, .legal-toggle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--fg-1); border-radius: 2px;
  transition: background .3s, opacity .3s, transform .45s var(--apple);
}
.legal-toggle::before { width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; }
.legal-toggle::after  { width: 1.5px; height: 11px; margin: -5.5px 0 0 -.75px; }
.legal-item.is-open .legal-toggle {
  transform: rotate(135deg); background: var(--fg-0); border-color: var(--fg-0);
}
.legal-item.is-open .legal-toggle::before { background: var(--bg-0); }
.legal-item.is-open .legal-toggle::after { opacity: 0; }
.legal-item.is-open .legal-title { color: var(--fg-0); }
.legal-item.is-open .legal-eyebrow { color: var(--ember); border-color: var(--ember-mut); }

/* Sanftes Öffnen über grid-template-rows – ohne JS bleibt das Panel offen
   sichtbar, damit die Rechtstexte immer erreichbar sind. */
.legal-body-wrap { overflow: hidden; }
.js .legal-body-wrap {
  height: 0; opacity: 0;
  transition: height .5s var(--apple), opacity .35s var(--ease-o);
}
.js .legal-item.is-open .legal-body-wrap { opacity: 1; }
.legal-body { padding: .2rem 0 2.4rem; max-width: 76ch; }
.legal-body h3 {
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-2);
  margin-top: 2rem; margin-bottom: .7rem;
}
.legal-body h3:first-child { margin-top: 0; }
.legal-body p, .legal-body address {
  font-size: .9rem; line-height: 1.9; color: var(--fg-1);
  font-style: normal; margin-bottom: .55rem; text-wrap: pretty;
}
.legal-body a {
  color: var(--fg-0); border-bottom: 1px solid var(--hair-2);
  transition: border-color .2s, color .2s;
}
.legal-body a:hover { border-color: var(--ember); color: oklch(100% 0 0); }
.legal-body p.legal-note {
  font-size: .84rem; line-height: 1.85; color: var(--fg-2);
  margin-top: .9rem; padding-left: 1rem; border-left: 1px solid var(--ember-mut);
}

/* ─── FOOTER ─────────────────────────────────────────────────────────── */
#site-footer {
  position: relative;
  background: var(--void);
  padding: clamp(3.4rem, 6vw, 5.5rem) var(--gx) 1.8rem;
  overflow: hidden;
}
.footer-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; }
.footer-mark {
  display: inline-block;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.footer-mark img {
  height: clamp(34px, 5.2vw, 62px); width: auto; display: block;
  opacity: .9; transition: opacity .35s var(--ease-o);
}
.footer-mark:hover img { opacity: 1; }
.footer-cols {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding: clamp(2rem, 3.5vw, 3rem) 0;
  border-top: 1px solid var(--hair);
}
.f-col h3 {
  font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 1.1rem;
}
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.f-col a, .f-col address {
  font-size: .86rem; line-height: 1.8; color: var(--fg-2); font-style: normal;
  transition: color .25s var(--ease-o);
}
.f-col a:hover { color: var(--fg-0); }
.f-col address a { display: inline-block; }
.f-nav-link { position: relative; display: inline-block; }
.f-nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--ember);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--apple);
}
.f-nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-ig {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 500; color: var(--fg-1);
  background: oklch(100% 0 0 / .05); border: 1px solid var(--hair);
  padding: 10px 18px; border-radius: 50px; white-space: nowrap;
  transition: color .25s, background .25s, border-color .25s, transform .4s var(--spring);
}
.footer-ig:hover {
  color: var(--fg-0); background: oklch(100% 0 0 / .09);
  border-color: var(--hair-2); transform: translateY(-2px);
}
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem 1.5rem;
  padding-top: 1.6rem; border-top: 1px solid var(--hair);
  font-size: .73rem; letter-spacing: .03em; color: var(--fg-3);
}
.footer-bottom .fb-right { display: flex; align-items: center; gap: .6rem; }
.footer-bottom .fb-dot { color: var(--ember); }

/* ─── LIGHTBOX ───────────────────────────────────────────────────────── */
.lb-overlay, .vid-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: oklch(6% .008 265 / .9);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .38s var(--ease-o), backdrop-filter .4s;
  cursor: pointer;
}
.lb-overlay.open, .vid-overlay.open { opacity: 1; pointer-events: auto; }
.lb-stage {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  max-width: 92vw;
  transform: scale(.94) translateY(14px);
  transition: transform .55s var(--apple);
}
.lb-overlay.open .lb-stage { transform: none; }
.lb-img {
  max-width: 92vw; max-height: 80vh; border-radius: 14px;
  object-fit: contain; display: block; cursor: default; user-select: none;
  box-shadow: var(--shadow-l);
  border: 1px solid var(--hair);
}
.lb-cap {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center;
  font-size: .74rem; letter-spacing: .05em; color: var(--fg-2); cursor: default;
}
.lb-counter { font-variant-numeric: tabular-nums; color: var(--fg-3); font-size: .7rem; letter-spacing: .1em; }
.lb-cap .lb-cap-ki {
  display: none;
  font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-0);
  border: 1px solid var(--ember-dim);
  background: oklch(78% .135 62 / .1);
  padding: .24em .75em; border-radius: 99px;
}
.lb-cap.is-ki .lb-cap-ki { display: inline-flex; }
.lb-close, .vid-close {
  position: absolute; top: 1.4rem; right: 1.4rem;
  width: 42px; height: 42px; border-radius: 50%;
  background: oklch(100% 0 0 / .08); border: 1px solid var(--hair-2); cursor: pointer;
  display: grid; place-items: center;
  color: var(--fg-0); font-size: 1.05rem;
  transition: background .25s, transform .35s var(--spring), border-color .25s;
}
.lb-close:hover, .vid-close:hover { background: oklch(100% 0 0 / .16); transform: rotate(90deg); border-color: var(--hair-3); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 50px; height: 50px; border-radius: 50%;
  background: oklch(100% 0 0 / .07); border: 1px solid var(--hair-2); cursor: pointer;
  display: grid; place-items: center;
  color: var(--fg-0); font-size: 1.2rem;
  transition: background .25s, border-color .25s, transform .4s var(--spring);
}
.lb-nav:hover { background: oklch(100% 0 0 / .15); border-color: var(--hair-3); }
.lb-prev { left: 1.4rem; }
.lb-next { right: 1.4rem; }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 720px) {
  .lb-prev { left: .7rem; } .lb-next { right: .7rem; }
  .lb-nav { width: 42px; height: 42px; }
  .lb-close, .vid-close { top: .8rem; right: .8rem; }
}

.vid-player {
  max-width: 92vw; max-height: 85vh; border-radius: 14px;
  display: block; cursor: default;
  box-shadow: var(--shadow-l); border: 1px solid var(--hair);
  transform: scale(.95); transition: transform .55s var(--apple);
}
.vid-overlay.open .vid-player { transform: none; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .masonry, .masonry.grid-on { columns: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontakt-grid { gap: clamp(2.4rem, 4vw, 4rem); }
  .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-cols .f-col:last-child { grid-column: 1 / -1; }
  .about-sticky { position: static; }
}
/* Text neben Medienraster wird hier zu schmal – die Vorschaubilder
   schrumpfen sonst auf unter 80px. */
@media (max-width: 1000px) {
  .svc-body-inner { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; gap: 2.8rem; }
  .about-photo { max-width: 360px; }
  .kontakt-grid { grid-template-columns: 1fr; gap: clamp(2.8rem, 6vw, 4rem); }
  .kontakt-sub { max-width: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .about-photo { max-width: 300px; }
  .pf-top { flex-direction: column; align-items: flex-start; }
  .svc-trigger { grid-template-columns: 38px 1fr auto; gap: 1rem; }
  .svc-body-inner { padding-left: calc(38px + 1rem); grid-template-columns: 1fr; gap: 1.6rem; }
  .svc-toggle { width: 32px; height: 32px; }
  .kl-label { flex-basis: 3.6rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; gap: 2rem; }
  .footer-cols .f-col:last-child { grid-column: auto; }
}
@media (max-width: 580px) {
  .masonry, .masonry.grid-on { columns: 1; grid-template-columns: minmax(0, 1fr); }
  .hero-meta { font-size: .54rem; }
  .hero-meta .hide-xs { display: none; }
  .svc-media-grid { grid-template-columns: repeat(2, 1fr); }
  .about-gallery { grid-template-columns: repeat(2, 1fr); }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .lb-img { max-height: 72vh; }
}

/* ─── BEWEGUNG REDUZIEREN ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .12s !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  /* Reveals bleiben als reines Opacity-Fade erhalten – kein Versatz, keine
     Skalierung. Bewegung weg, Verständlichkeit bleibt. */
  .js [data-rv] {
    transform: none !important;
    transition: opacity 260ms ease !important;
    transition-delay: 0ms !important;
  }
  .js .mask > i { transform: none !important; transition: none !important; }
  .js [data-fly] .fly, .js [data-fly] .fly-sep {
    transform: none !important;
    transition: opacity 240ms ease !important;
    transition-delay: 0ms !important;
  }
  .hero-photo, .hero-photo img { transform: none !important; height: 100%; }
  .hero-meta, .hero-foot, .hero-scroll { opacity: 1; }
  .hero-rule { transform: scaleX(1); }
  .hero-h1 .mask > i { transform: none; }
  .intro { display: none; }
  .pf-card:hover .pf-thumb, .pf-card:hover,
  .svc-media-item:hover, .svc-vid-thumb:hover,
  .about-gallery img:hover, .about-photo:hover img { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #site-nav, .nav-mobile { background: oklch(11% .009 265 / .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lb-overlay, .vid-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: oklch(6% .008 265 / .98); }
}
@media (prefers-contrast: more) {
  :root { --hair: oklch(100% 0 0 / .28); --hair-2: oklch(100% 0 0 / .45); --fg-1: oklch(88% .005 265); --fg-2: oklch(74% .006 265); }
}
/* Auf Touch bleibt :hover nach dem Tippen hängen – dort keine Hover-Bewegung. */
@media (hover: none) {
  .pf-cap { opacity: 1; background: linear-gradient(to top, oklch(7% .008 265 / .78) 0%, transparent 52%); }
  .pf-cap > span { transform: none; }
  .pf-card:hover .pf-thumb,
  .svc-media-item:hover, .svc-vid-thumb:hover,
  .svc-media-item:hover .svc-media-img, .svc-vid-thumb:hover img,
  .about-gallery img:hover, .about-photo:hover img,
  .atag:hover, .nav-ig:hover, .footer-ig:hover { transform: none; }
  .kontakt-line:hover .kl-value, .kontakt-line:hover .kl-arrow { transform: none; }
  .pf-card:hover, .svc-media-item:hover, .svc-vid-thumb:hover { box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SHOWCASE-LAYER — alles, was in der schlanken Fassung bewusst fehlt
   ══════════════════════════════════════════════════════════════════════ */

/* Lenis übernimmt das Scrollen; natives Smooth-Scroll muss dafür weg. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ─── INTRO: „ge" wächst zu „gecaptured" ────────────────────────────── */
/* Statt eines Prozentzählers wird die Wortmarke selbst geschrieben. Der
   Trick spart eine zweite Schriftart: gezeigt wird das echte Logo, aber
   zunächst nur bis zur Lücke zwischen „ge" und „captured" beschnitten
   (gemessen an der Pixeldatei: x = 137 von 610 = 22,46 %). Der Kasten
   wächst dann auf die volle Breite – dadurch schiebt sich „ge" im
   zentrierten Layout nach links und das Wort vervollständigt sich um es
   herum. Kein Nachbau der Marke in einer Fremdschrift, kein Zähler. */
/* Die Wortmarke ist jetzt das einzige Element im Ladebild – der Balken
   darunter ist weg. Also darf sie den Moment auch tragen: von 30–58 px
   auf 40–68 px. Der Zwischenraum ist ohne zweites Element wirkungslos,
   bleibt aber stehen, falls dort je wieder etwas hinzukommt.
   Die „ge → gecaptured"-Rechnung hängt an --iw-h (CSS-Startbreite) und an
   der zur Laufzeit gemessenen Bildbreite – beide wachsen automatisch mit. */
.intro { gap: clamp(1.6rem, 4vh, 2.6rem); --iw-h: clamp(40px, 6.5vw, 68px); }
.intro-word { position: relative; display: inline-flex; opacity: 0; }
.intro-mark {
  overflow: hidden;
  /* Startbreite ohne Umweg über JS, damit im ersten Bild nicht kurz das
     ganze Wort steht: Seitenverhältnis der Datei ist 610:120, die Lücke
     nach „ge" liegt bei 22,46 % → 5,0833 × 0,2246 = 1,1417 Höhen. */
  width: calc(var(--iw-h) * 1.1417);
  animation: none !important;      /* der Auftritt der schlanken Fassung */
  opacity: 1; transform: none;     /* würde GSAPs Breitenfahrt stören    */
}
.intro-mark img {
  height: var(--iw-h); width: auto; max-width: none;
  display: block; opacity: .95;
}
/* Kante des Wischs – macht aus dem Aufdecken eine Absicht statt eines
   Ladefehlers. Verschwindet, sobald das Wort vollständig ist. */
.intro-word::after {
  content: ''; position: absolute; right: -2px; top: 6%; bottom: 6%;
  width: 2px; background: var(--ember);
  transition: opacity .3s var(--ease-o);
}
.intro-word.is-done::after { opacity: 0; }
.intro-veil {
  position: fixed; inset: 0; z-index: 119; pointer-events: none;
  background: var(--bg-0); transform-origin: top;
}

/* ─── ENDLOS-LEISTE ──────────────────────────────────────────────────── */
/* Das Label steht im Fluss NEBEN dem Band, nicht darüber. Als absolut
   positioniertes Overlay verdeckte es zuvor den vorbeilaufenden Text zur
   Hälfte – es sah aus, als lägen zwei Beschriftungen übereinander. */
.marquee {
  display: flex; align-items: center;
  gap: clamp(.9rem, 2.4vw, 2.2rem);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--bg-0);
  padding: 1.5rem var(--gx);
}
.marquee-viewport { position: relative; flex: 1 1 auto; overflow: hidden; min-width: 0; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group {
  display: flex; align-items: center; flex: 0 0 auto;
  gap: 0 3.2rem; padding-right: 3.2rem;
}
.marquee-item {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap;
}
.marquee-item::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ember); opacity: .55; flex: 0 0 auto;
}
.marquee-label {
  flex: 0 0 auto;
  font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap;
  padding-right: clamp(.9rem, 2.4vw, 2.2rem);
  border-right: 1px solid var(--hair);
}
.marquee-viewport::before, .marquee-viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(30px, 6vw, 90px); z-index: 1;
  pointer-events: none;
}
/* Zwei Stopps laufen mit konstanter Steigung gegen null und brechen am
   Ende hart ab – dieselbe Mach-Kante wie beim Wash. Ausgelaufene Kurve,
   Farbe ausgeschrieben, weil var(--bg-0) keine Alpha-Variante zulässt. */
.marquee-viewport::before {
  left: 0;
  background: linear-gradient(90deg,
    oklch(9.8% .008 265 / 1)   0%,
    oklch(9.8% .008 265 / .93) 18%,
    oklch(9.8% .008 265 / .78) 34%,
    oklch(9.8% .008 265 / .56) 50%,
    oklch(9.8% .008 265 / .33) 66%,
    oklch(9.8% .008 265 / .14) 80%,
    oklch(9.8% .008 265 / .04) 91%,
    oklch(9.8% .008 265 / 0)   100%);
}
.marquee-viewport::after {
  right: 0;
  background: linear-gradient(270deg,
    oklch(9.8% .008 265 / 1)   0%,
    oklch(9.8% .008 265 / .93) 18%,
    oklch(9.8% .008 265 / .78) 34%,
    oklch(9.8% .008 265 / .56) 50%,
    oklch(9.8% .008 265 / .33) 66%,
    oklch(9.8% .008 265 / .14) 80%,
    oklch(9.8% .008 265 / .04) 91%,
    oklch(9.8% .008 265 / 0)   100%);
}
@media (max-width: 600px) { .marquee-label { display: none; } }

/* ─── MASKIERTER TEXT-REVEAL (Wortduplikat) ──────────────────────────── */
/* Wort-Maske: ein Fenster von genau einer Zeilenhöhe, das Wort schiebt sich
   von unten hinein. Etwas Luft nach oben/unten, damit Ober- und Unterlängen
   (ä, g, ü) nicht an der Kante beschnitten werden. */
.mw {
  display: inline-block; vertical-align: top;
  overflow: hidden;
  padding: 0.12em 0 0.16em;
  margin: -0.12em 0 -0.16em;
}
.mw-i { display: block; }
/* Zeichenweiser Hero-Reveal – Wörter bleiben als Einheit umbruchfest */
.chw { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; will-change: transform; }

/* ─── EINHEITLICHER ZEILENRHYTHMUS IM HERO ───────────────────────────── */
/* Gemessen bei 375 px: Schriftgrad 44 px, Zeilenhöhe 40,92 px – das
   Halbleading ist also NEGATIV (−3,54 px). Die Tinte eines Buchstabens
   ragt oben wie unten gut 3 px aus seiner Zeilenbox heraus.
   Mit „overflow: clip" auf .mask wurde genau dieser Überstand an jeder
   Blockkante abgeschnitten: das „g" von „Videograf" verlor seine
   Unterlänge, das „g" von „Fotograf" mitten im selben Block nicht.
   Metrisch waren alle Abstände identisch (41/41/40/41 px) – optisch
   wirkte der Sprung zwischen zwei Blöcken deshalb größer als der Umbruch
   innerhalb eines Blocks. Ein Blockbeschnitt kann bei umbrechenden
   Zeilen gar nicht stimmen: er kennt nur die Blockkante, nicht die
   Zeilenkante. Also fällt er weg – der Auftritt läuft stattdessen als
   Steigen mit Einblenden, das bei jeder Breite gleich aussieht. */
.hero-h1 .mask { overflow: visible; }

/* ─── PROZESS: GEPINNTES BILD, DURCHLAUFENDE SCHRITTE ────────────────── */
/* Eigene Polsterung statt .sec – sonst käme das Seitengutter doppelt:
   einmal von .sec, einmal von .pz-inner. */
#prozess { position: relative; background: var(--bg-1); padding: var(--sy) 0; }
.pz-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gx); }
.pz-head { margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }
.pz-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.pz-steps { display: flex; flex-direction: column; }
.pz-step {
  padding: clamp(2.5rem, 7vh, 5rem) 0;
  border-top: 1px solid var(--hair);
  opacity: .28;
  transition: opacity .5s var(--ease-o);
}
.pz-step.is-active { opacity: 1; }
.pz-step:last-child { border-bottom: 1px solid var(--hair); }
.pz-num {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  color: var(--ember); margin-bottom: 1rem; font-variant-numeric: tabular-nums;
}
.pz-title {
  font-family: var(--font-d); font-stretch: 108%;
  font-size: clamp(1.5rem, 3.2vw, 2.9rem);
  font-weight: 640; letter-spacing: -.035em; line-height: 1.08;
  color: var(--fg-0); margin-bottom: .9rem; text-wrap: balance;
}
.pz-text { font-size: .96rem; line-height: 1.85; color: var(--fg-1); font-weight: 300; max-width: 44ch; text-wrap: pretty; }
.pz-media {
  position: relative; width: 100%; aspect-ratio: 4/5;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--hair); box-shadow: var(--shadow-l);
}
.pz-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: 0;
}
.pz-media img:first-child { opacity: 1; }
.pz-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, oklch(7% .008 265 / .3), transparent 48%);
}
.pz-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; z-index: 2;
  width: 100%; background: oklch(100% 0 0 / .12);
}
.pz-progress i {
  display: block; height: 100%; width: 100%;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
}
/* Die Bildspalte bleibt stehen, während die Schritte durchlaufen.
   position:sticky ist hier robuster als ein GSAP-Pin: die Spalte landet am
   Ende der Strecke von selbst richtig, statt an ihre Ausgangsposition
   zurückzuspringen. Echtes ScrollTrigger-Pinning steckt in der
   horizontalen Galerie. */
.pz-sticky { position: sticky; top: 104px; align-self: start; }
@media (max-width: 900px) {
  .pz-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pz-media { aspect-ratio: 3/2; }
  .pz-step { opacity: 1; padding: 2rem 0; }
}

/* ─── ZAHLEN ─────────────────────────────────────────────────────────── */
#zahlen { background: var(--bg-0); }
.stats {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--hair);
}
.stat { padding: clamp(2rem, 4vw, 3.4rem) 0; position: relative; }
.stat + .stat { border-left: 1px solid var(--hair); padding-left: clamp(1.5rem, 4vw, 4rem); }
.stat-num {
  display: flex; align-items: baseline; gap: .1em;
  font-family: var(--font-d); font-stretch: 110%;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-weight: 720; letter-spacing: -.05em; line-height: 1;
  color: var(--fg-0); font-variant-numeric: tabular-nums;
}
.stat-num em { font-style: normal; font-size: .34em; color: var(--ember); letter-spacing: 0; }
.stat-label {
  margin-top: 1rem; font-size: .74rem; font-weight: 500; letter-spacing: .04em;
  color: var(--fg-2); line-height: 1.6; max-width: 22ch;
}
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; gap: 0; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--hair); padding-left: 0; }
}

/* ─── NAVBAR: GRÖSSENVERHÄLTNISSE ────────────────────────────────────── */
/* Vorher: is-top und is-scrolled unterschieden sich um 4px Höhe – der
   Übergang war nicht wahrnehmbar. Und das Logo (24px) war kleiner als der
   CTA-Button (37px), die Marke stand also hinter dem Button zurück.
   Jetzt: echtes Zusammenziehen um gut 20px, Logo als größtes Element. */
#site-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 11px clamp(14px, 2vw, 22px);
}
#site-nav.is-top { padding: 19px clamp(18px, 2.6vw, 30px); }

/* Mittiges Menü ohne absolute Positionierung: als eigene Rasterspalte kann
   es nicht mehr mit Logo oder Button kollidieren, wenn eines davon wächst. */
.nav-links {
  position: static; left: auto; transform: none;
  justify-self: center;
  gap: .2rem;
}
.nav-links a { font-size: .845rem; padding: .44rem .92rem; }

.nav-logo-img { height: 21px; }
#site-nav.is-top .nav-logo-img { height: 30px; }

.nav-ig { width: 34px; height: 34px; }
#site-nav.is-top .nav-ig { width: 38px; height: 38px; }

/* Der Button bleibt bewusst niedriger als das Logo hoch ist – die Marke
   soll das größte Element in der Leiste sein, nicht der Button. */
.nav-cta {
  font-size: .8rem;
  padding: .38rem .4rem .38rem 1rem;
}
.nav-cta i { width: 23px; height: 23px; }
#site-nav.is-top .nav-cta { padding: .42rem .44rem .42rem 1.1rem; }
#site-nav.is-top .nav-cta i { width: 24px; height: 24px; }

@media (max-width: 900px) {
  #site-nav { grid-template-columns: auto 1fr; }
  .nav-right { justify-self: end; }
  /* Fingerfreundliche Ziele auf Touch */
  .nav-burger { width: 44px; height: 44px; }
  .nav-ig, #site-nav.is-top .nav-ig { width: 44px; height: 44px; }
}

/* ─── SCHWARZ-WEISS-FARBBEWEGUNG ─────────────────────────────────────── */
/* Eine Zahl steuert alles: --bw von 0 (schwarz) bis 1 (weiß).
   Die Bühne legt einen weißen Schleier über den dunklen Grund – bei 0 ist
   sie vollständig transparent, es gibt also keine Farbkante.
   Der Textblock führt eine gegenläufige dunkle Platte mit, die schneller
   deckend wird als die Bühne hell (Faktor 1.6). Genau das hält den
   Kontrast in jedem Zwischenzustand über 4.5:1 – ein bloßes Umfärben von
   Grund und Schrift träfe sich bei 50 % in identischer Helligkeit. */
.pz-stage {
  --bw: 0;
  position: relative;
  padding: clamp(1.6rem, 4vw, 4rem) 0;
}
/* Der helle Ton liegt als eigene Ebene darüber und wird nur ein- und
   ausgeblendet. Deckkraft wird vom Compositor erledigt – im Gegensatz zu
   einer animierten background-color muss die Fläche nicht in jedem Frame
   neu gemalt werden, was auf Mobilgeräten den Unterschied macht.
   Der Verlauf sorgt zugleich für weiche Ober- und Unterkanten. */
.pz-wash {
  position: absolute; left: 0; right: 0;
  top: calc(-1 * clamp(50px, 8vh, 110px)); bottom: calc(-1 * clamp(50px, 8vh, 110px));
  pointer-events: none; z-index: 0;
  opacity: var(--bw);
  will-change: opacity;
  /* Der Verlauf lief zuvor mit vier Stopps: 0 → deckend → deckend → 0.
     An den beiden Knicken springt die Steigung, und genau dort sieht das
     Auge eine Mach-Kante – eine helle bzw. dunkle Linie, die im Bild gar
     nicht steht. Beide Schultern folgen jetzt einer Potenzkurve und
     laufen mit Steigung null aus. */
  --wash: clamp(50px, 8vh, 110px);
  background: linear-gradient(to bottom,
    rgb(240 239 235 / 0)    0,
    rgb(240 239 235 / .06)  calc(var(--wash) * .22),
    rgb(240 239 235 / .20)  calc(var(--wash) * .42),
    rgb(240 239 235 / .44)  calc(var(--wash) * .62),
    rgb(240 239 235 / .72)  calc(var(--wash) * .80),
    rgb(240 239 235 / .92)  calc(var(--wash) * .93),
    rgb(240 239 235)        var(--wash),
    rgb(240 239 235)        calc(100% - var(--wash)),
    rgb(240 239 235 / .92)  calc(100% - var(--wash) * .93),
    rgb(240 239 235 / .72)  calc(100% - var(--wash) * .80),
    rgb(240 239 235 / .44)  calc(100% - var(--wash) * .62),
    rgb(240 239 235 / .20)  calc(100% - var(--wash) * .42),
    rgb(240 239 235 / .06)  calc(100% - var(--wash) * .22),
    rgb(240 239 235 / 0)    100%);
}
.pz-stage > .pz-inner { position: relative; z-index: 1; }

/* Gegenläufige dunkle Platte hinter dem Textblock. Sie wird schneller
   deckend (Faktor 1.6) als der Grund hell – dadurch bleibt die helle
   Schrift in jedem Zwischenzustand lesbar. */
.pz-stage .pz-steps {
  position: relative;
  border-radius: clamp(12px, 1.6vw, 22px);
  padding: 0 clamp(0px, 2.2vw, 30px);
}
.pz-stage .pz-steps::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgb(13 14 17);
  /* Vorher: min(1, --bw * 1.6). Eine Gerade mit Knick – ab --bw = 0,625
     stand die Platte still, während der Grund weiter aufhellte. Genau an
     dieser Stelle sprang die Steigung von 1,6 auf 0, und das war als
     kurzes Stocken im Farbverlauf zu sehen.
     Jetzt --bw · (2 − --bw): eine Parabel, die bei 0 mit Steigung 2
     startet (deckt also schneller ab als die alte Gerade) und bei 1 mit
     Steigung 0 landet. Kein min() mehr nötig, weil sie den Wert 1 nie
     überschreitet – die Funktion ist über die ganze Strecke stetig, auch
     in der Ableitung. Gemessener Textkontrast im ungünstigsten
     Zwischenzustand: 12,8:1 (gefordert 4,5:1). */
  opacity: calc(var(--bw) * (2 - var(--bw)));
  will-change: opacity;
}
.pz-stage .pz-media { border-color: transparent; }
/* Die Überschrift der Sektion bleibt bewusst außerhalb der Bühne auf dem
   dunklen Grund – so muss dort nichts gegengeführt werden. */

/* ─── KONTAKT: EMBER-SCHEIN LÄUFT INNERHALB DER SEKTION AUS ──────────── */
/* Das war die eigentliche Ursache der harten Kante zu „Rechtliches" – nicht
   der Nahtwert. Gemessen: der Schein saß in einem Kasten mit
   „bottom: -34%; height: 96%", also ragten 399 px davon unter die
   Sektionskante. „overflow: hidden" auf #kontakt schnitt sie ab – und zwar
   an einer Stelle, an der der Verlauf noch 0,065 Deckkraft hatte. Ein
   warmer Streifen, der auf halber Leuchtkraft abbricht, direkt über einer
   anderen Fläche: genau das liest das Auge als Schnitt.
   Jetzt sitzt der Verlauf im Sektionskasten selbst, und seine senkrechte
   Reichweite endet rechnerisch genau an der Unterkante (66 % + 34 % = 100 %).
   Dort ist er auf null, es gibt nichts mehr abzuschneiden. Waagerecht darf
   er weiter über den Bildschirmrand hinauslaufen – dort grenzt keine zweite
   Fläche an, also entsteht auch keine Kante.
   Die Stopps folgen wieder einer ausgelaufenen Kurve statt zweier Punkte. */
#kontakt::after {
  left: 0; right: 0; top: 0; bottom: 0;
  width: auto; height: auto;
  background: radial-gradient(42% 34% at 24% 66%,
    oklch(78% .135 62 / .12)  0%,
    oklch(78% .135 62 / .106) 16%,
    oklch(78% .135 62 / .081) 34%,
    oklch(78% .135 62 / .052) 52%,
    oklch(78% .135 62 / .026) 68%,
    oklch(78% .135 62 / .009) 82%,
    oklch(78% .135 62 / .002) 93%,
    oklch(78% .135 62 / 0)    100%);
}

/* ─── ZAHLEN: MASSVERHÄLTNISSE ───────────────────────────────────────── */
/* Drei Beobachtungen aus der Nahsicht:
   1. Die Zahl stand mit 6,5 rem größer da als die Kontakt-Überschrift
      (6,2 rem) – eine Kennzahl, die lauter spricht als jede Überschrift der
      Seite. Jetzt 5 rem: in ihrer Spalte weiterhin dominant, in der
      Seitenhierarchie aber unter den Überschriften.
   2. Beschriftung und Zahl standen im Verhältnis 1:8,8 (11,8 px zu 104 px).
      Die Beschriftung trägt aber die Aussage – die Zahl allein sagt nichts.
      Jetzt 12,5 px auf --fg-1 statt --fg-2: lesbar als Satz, nicht als
      Bildunterschrift. Verhältnis 1:6,4.
   3. Der Zwischenraum kam doppelt: einmal als grid-gap, einmal als
      padding-left der Folgespalte – zusammen bis zu 8 rem. Die drei Kacheln
      trieben auseinander. Jetzt trägt allein die Polsterung den Abstand,
      links wie rechts gleich, wodurch die Trennlinie mittig im Zwischenraum
      steht statt bündig an der Spaltenkante. Und eine untere Haarlinie
      schließt den Block ab – vorher stand er oben in einer Linie und lief
      unten ins Nichts aus. */
.stats {
  gap: 0;
  border-bottom: 1px solid var(--hair);
  /* „1fr" ist kurz für minmax(auto, 1fr) – eine Spalte darf also über ihren
     Anteil hinauswachsen, wenn ihr Inhalt schmaler nicht umbricht. Auf
     768 px trieb die Textkachel ihre Spalte dadurch auf 255 px, während die
     beiden Zahlenspalten bei 205 px blieben; die Trennlinien standen nicht
     mehr im gleichen Abstand. minmax(0, 1fr) bindet alle drei fest. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat { padding: clamp(2rem, 4vw, 3.2rem) clamp(1.1rem, 2.6vw, 2.6rem); }
.stat:first-child { padding-left: 0; }
.stat:last-child  { padding-right: 0; }
.stat + .stat { padding-left: clamp(1.1rem, 2.6vw, 2.6rem); }
.stat-num {
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  gap: .04em;
}
.stat-label {
  margin-top: 1.1rem;
  font-size: .78rem;
  color: var(--fg-1);
  max-width: 24ch;
}
@media (max-width: 720px) {
  /* Gestapelt braucht es keine seitliche Polsterung mehr.
     Und das Stapeln selbst muss hier erneut stehen: die Dreispaltigkeit
     oben ist unbedingt notiert und steht später im Stilblatt als die
     ursprüngliche Stapelregel – sie würde sie sonst überstimmen. */
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding-left: 0; padding-right: 0; }
}

/* ─── DRITTE KACHEL: AUSSAGE STATT ZAHL ──────────────────────────────── */
/* Die Kachel muss sich neben zwei Zahlen behaupten, ohne eine vorzutäuschen.
   Deshalb dieselbe Schriftfamilie und derselbe Schnittbereich wie bei den
   Zahlen, nur kleiner: eine 5 rem hohe Ziffer und zwei Zeilen Text zu je
   2,35 rem belegen ungefähr dieselbe optische Fläche. Und weil hier keine
   Beschriftungszeile darunter folgt, wird der Satz senkrecht mittig
   gestellt – sonst hinge er oben und die Kachel sähe unfertig aus. */
.stat-claim { display: flex; flex-direction: column; justify-content: center; }
.stat-claim-text {
  position: relative;
  margin: 0; padding-left: 1.15rem;
  font-family: var(--font-d); font-stretch: 110%;
  /* Knapp über der Stapelschwelle (721 px) ist die Spalte nur rund 203 px
     breit – „Kundenzufriedenheit" lief dort rechts aus dem Raster. Die
     Schriftgröße hängt deshalb an der Fensterbreite; nachgemessen passt der
     Satz damit von 721 px aufwärts mit Rand.
     Silbentrennung ausdrücklich NICHT: zusammen mit text-wrap: balance
     wählt der Browser sonst auch dann eine Trennung, wenn Platz da ist –
     auf 1440 px stand dort „Garantierte Kun-denzufriedenheit". */
  font-size: clamp(1.05rem, 2.4vw, 2.35rem);
  font-weight: 620; letter-spacing: -.03em; line-height: 1.08;
  color: var(--fg-0); text-wrap: balance; hyphens: manual;
  max-width: 15ch;
}
/* GOLD-AKZENT 1 – ruhiger Puls an der Vertrauensaussage. Nimmt das Motiv
   des Punkts aus der Hero-Kopfzeile auf, damit es nicht wie ein neues
   Element wirkt, sondern wie dieselbe Sprache an anderer Stelle. */
.claim-dot {
  position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 0 var(--ember-mut);
  animation: pulseDot 2.6s var(--ease-io) infinite;
}
@media (max-width: 720px) {
  .stat-claim { justify-content: flex-start; }
  .stat-claim-text { font-size: 1.5rem; max-width: 20ch; }
}

/* ─── GOLD-AKZENT 2: PORTFOLIO-FILTER ────────────────────────────────── */
/* Der aktive Filter war rein weiß, der Überfahr-Zustand nur etwas heller.
   Beides ohne eigene Farbe. Jetzt trägt der Überfahr-Zustand Gold, und
   unter der aktiven Pille liegt ein warmer Schein statt eines neutralen. */
.f-btn:hover {
  color: var(--ember);
  border-color: var(--ember-mut);
  background: oklch(78% .135 62 / .07);
}
.f-btn.on, .f-btn.on:hover {
  color: oklch(13% .01 265); background: var(--fg-0); border-color: var(--fg-0);
  box-shadow: 0 3px 20px -7px oklch(78% .135 62 / .75);
}

/* ─── GOLD-AKZENT 3: WANDERNDER PUNKT AN DER ABLAUF-LINIE ────────────── */
/* Sitzt an der Spitze des Fortschrittsbalkens und läuft am selben Scrub
   mit. Der weiche Schein macht ihn sichtbar, ohne dass er über der
   Bildkante als harter Kreis klebt. */
.pz-dot {
  position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--ember);
  box-shadow: 0 0 12px 2px oklch(78% .135 62 / .55);
  pointer-events: none; will-change: transform;
}

/* ─── GOLD-AKZENT 4: PORTFOLIO-KARTEN ────────────────────────────────── */
/* Beim Überfahren folgt jeder Karte ein Lichtschein dem Zeiger. Der war
   bisher neutral weiß – über soft-light auf einem Foto heißt das: das Bild
   wird nur heller. Mit warmem Licht bekommt es stattdessen einen Ton, ohne
   dass die Farbwerte des Fotos gekippt würden. Der Effekt liegt hinter dem
   Zeiger, ist also nie gleichzeitig auf mehr als einer Karte zu sehen. */
.pf-glow {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    oklch(80% .10 62 / .17), transparent 62%);
}

/* ─── GOLD-AKZENT 5: VERWEISE IM FUSSBEREICH ─────────────────────────── */
/* Sie gingen beim Überfahren auf reines Weiß – derselbe Zustand wie
   „ausgewählt", also kein eigenes Signal. Gold trennt beides. */
.f-col a:hover { color: var(--ember); }

/* Die Kontaktzeilen haben ihren goldenen Unterstrich und den goldenen
   Pfeil bereits aus der schlanken Fassung – hier absichtlich nichts
   Zusätzliches, sonst lägen zwei Regeln übereinander. */

/* ─── GOLD-AKZENT 5: SCHEIN AN DER ZAHLEN-SEKTION ────────────────────── */
/* Blendet beim Erreichen des Abschnitts sanft ein und wieder aus – über
   --glow, das der Scroll setzt. Nur Deckkraft, also Compositor-Arbeit. */
#zahlen { position: relative; --glow: 0; }
#zahlen::before {
  content: ''; position: absolute; left: 0; right: 0; top: -8%; height: 116%;
  pointer-events: none; z-index: 0;
  opacity: var(--glow); will-change: opacity;
  background: radial-gradient(38% 46% at 76% 50%,
    oklch(78% .135 62 / .105) 0%,
    oklch(78% .135 62 / .092) 16%,
    oklch(78% .135 62 / .069) 34%,
    oklch(78% .135 62 / .044) 52%,
    oklch(78% .135 62 / .022) 68%,
    oklch(78% .135 62 / .010) 82%,
    oklch(78% .135 62 / .002) 93%,
    oklch(78% .135 62 / 0)    100%);
}
#zahlen > * { position: relative; z-index: 1; }

/* ─── KI-KENNZEICHNUNG IM ABLAUF ─────────────────────────────────────── */
/* Das vierte Ablaufbild ist KI-generiert. Die Seite kennzeichnet jedes
   KI-Bild mit „✦ KI" – diese Zusage gilt auch hier, also wandert das
   Kennzeichen mit dem Bildwechsel ein und wieder aus. */
.pz-ki {
  opacity: 0; transform: translateY(-4px);
  transition: opacity .45s var(--ease-o), transform .45s var(--ease-o);
}
.pz-media.is-ki .pz-ki { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .claim-dot { animation: none; }
  .pz-dot { display: none; }
  #zahlen { --glow: 0 !important; }
}

/* ─── FAQ ────────────────────────────────────────────────────────────── */
#fragen { background: var(--bg-1); }
.faq-wrap { max-width: 1000px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-item:first-of-type { border-top: 1px solid var(--hair); }
.faq-q {
  display: flex; align-items: center; gap: 1.2rem;
  width: 100%; text-align: left; background: none; border: none;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  cursor: pointer; font-family: var(--font-d); font-stretch: 106%;
  font-size: clamp(1.05rem, 2vw, 1.6rem); font-weight: 620;
  letter-spacing: -.03em; color: var(--fg-1);
  transition: color .3s var(--ease-o);
}
.faq-item.is-open .faq-q, .faq-q:hover { color: var(--fg-0); }
.faq-n {
  flex: 0 0 auto; font-family: var(--font); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; color: var(--fg-3); font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease-o);
}
.faq-item.is-open .faq-n { color: var(--ember); }
.faq-q span.faq-label { flex: 1; }
.faq-sign {
  position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hair-2);
  transition: transform .5s var(--apple), background .3s, border-color .3s;
}
.faq-sign::before, .faq-sign::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--fg-1); border-radius: 2px;
  transition: background .3s, opacity .3s;
}
.faq-sign::before { width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; }
.faq-sign::after  { width: 1.5px; height: 10px; margin: -5px 0 0 -.75px; }
.faq-item.is-open .faq-sign { transform: rotate(135deg); background: var(--fg-0); border-color: var(--fg-0); }
.faq-item.is-open .faq-sign::before { background: var(--bg-1); }
.faq-item.is-open .faq-sign::after { opacity: 0; }
.faq-a { overflow: hidden; }
.js .faq-a { height: 0; }
.faq-a-inner {
  padding: 0 0 2rem calc(1.2rem + 2.6rem);
  font-size: .95rem; line-height: 1.9; color: var(--fg-1); font-weight: 300;
  max-width: 68ch; text-wrap: pretty;
}
@media (max-width: 600px) { .faq-a-inner { padding-left: 0; } }

/* ─── TOUCH-ZIELE UND MIKRO-TYPOGRAFIE AUF KLEINEN SCHIRMEN ──────────── */
/* Gemessen auf 375px: Filter-Buttons waren 31px hoch, Footer-Links 25px –
   beide unter der 44px-Marke. Die Mikro-Labels lagen bei 9,3px. */
@media (max-width: 900px) {
  .f-btn { padding: .78rem 1.05rem; }
  .pf-filter { gap: .5rem; }
  .f-col ul { gap: .1rem; }
  .f-col ul a { display: block; padding: .62rem 0; }
  .f-col h3 { font-size: .68rem; }
  .f-field label { font-size: .68rem; }
  .pf-count { font-size: .68rem; }
  .f-col address { line-height: 2.1; }
  /* Telefonnummer und Adresse sind auf dem Telefon die wahrscheinlichsten
     Ziele überhaupt und lagen bei 20–25 px. */
  .nav-mobile-foot a { display: block; padding: .6rem 0; }
  #site-footer address a { display: block; padding: .55rem 0; }
  .legal-eyebrow { font-size: .62rem; }
  .legal-intro { font-size: .68rem; }
  .sec-index { font-size: .66rem; }
  .marquee-item { font-size: .74rem; }
  .stat-label { font-size: .82rem; }

  /* Entschlacken: was auf kleinen Schirmen nur noch Zeile frisst.
     Die zweite Meta-Zeile („Fotografie · Videografie · KI-Medien") stand
     erst ab 580 px zurück und zwang die Kopfzeile bis dahin in zwei
     Zeilen – dieselben drei Begriffe stehen zwei Bildschirme weiter als
     Leistungsüberschriften ohnehin auf der Seite. */
  /* Zwei Klassen tief statt einer, weil sonst nichts passiert: der
     Einflug-Layer setzt „.js [data-fly] .fly { display: inline-block }" –
     drei Klassen, also gewichtiger als „.hero-meta .hide-xs". Die
     580-px-Regel der schlanken Fassung war deshalb schon vorher wirkungslos;
     die Zeile stand auch auf 375 px noch da. */
  .js .hero-meta .hide-xs { display: none; }
  /* Der Marken-Zusatz reicht als einzelne Zeile; ohne zweiten Block darf
     sie linksbündig stehen statt auseinandergezogen. */
  .hero-meta { justify-content: flex-start; }
  /* Der Aufzählungspunkt hinter jedem Leistenbegriff verdoppelt bei
     schmaler Ansicht nur die Trennzeichen der Kopfzeile. */
  .marquee-item::after { display: none; }
  .marquee-group { gap: 0 2.2rem; padding-right: 2.2rem; }
  /* Die laufende Leiste braucht keinen doppelten Rahmen aus Linie und
     Randverlauf, wenn sie ohnehin die volle Breite einnimmt. */
  .marquee { padding: 1.15rem var(--gx); }
}

/* ─── KURZE SEKTIONEN ETWAS ENGER ────────────────────────────────────── */
/* Nachgemessen bei 1280 px: Die Lücke zwischen zwei Abschnitten ist immer
   genau zweimal --sy – Polsterung unten plus Polsterung oben. Zusätzliche
   sektionseigene Abstände gibt es bei 04, 05 und 06 nicht, die Lücke kommt
   dort also nicht von einem doppelten Wert, sondern schlicht daher, dass
   die drei wenig Inhalt tragen: kurzer Über-mich-Text, drei Kacheln, ein
   Akkordeon. Derselbe Abstand, der zwischen Portfolio-Blöcken ruhig wirkt,
   liest sich hier als Leerlauf. Deshalb für diese drei 78 %:
   204 px → 160 px zwischen ihnen, die Trennung bleibt klar sichtbar. */
#ueber, #zahlen, #fragen {
  padding-top: calc(var(--sy) * .78);
  padding-bottom: calc(var(--sy) * .78);
}

/* ─── SEKTIONSNÄHTE: AUSLAUFEN STATT ABBRECHEN ───────────────────────── */
/* Die Naht blendet den Ton der vorigen Sektion in die neue hinein. Sie lief
   als Zweistopp-Verlauf mit konstanter Steigung und brach nach 180 px
   schlagartig ab – die Steigung springt dort von konstant auf null, und
   das sieht man als feine Querlinie. Die Farbe steckt in --band-from und
   lässt sich ohne color-mix nicht in Alpha-Stufen zerlegen; deshalb bleibt
   sie flächig und die Kurve steckt in der Maske. Ergebnis: gleiche Farbe,
   weicher Auslauf, kein Bandingsprung. */
.band::before {
  height: 200px;
  background: var(--band-from, transparent);
  -webkit-mask-image: var(--seam-fade);
  mask-image: var(--seam-fade);
}
:root {
  --seam-fade: linear-gradient(to bottom,
    rgb(0 0 0 / 1)   0%,
    rgb(0 0 0 / .95) 10%,
    rgb(0 0 0 / .84) 22%,
    rgb(0 0 0 / .67) 36%,
    rgb(0 0 0 / .48) 50%,
    rgb(0 0 0 / .30) 64%,
    rgb(0 0 0 / .15) 77%,
    rgb(0 0 0 / .05) 88%,
    rgb(0 0 0 / .01) 96%,
    rgb(0 0 0 / 0)   100%);
}

/* Gleicher Gewichtsfehler, andere Stelle: „.hero-meta .live" schreibt
   inline-flex, damit der pulsende Punkt neben der Zeile sitzt – der
   Einflug-Layer überschrieb das mit inline-block, der Punkt landete auf der
   Grundlinie statt in der Mitte und der Abstand fiel weg. */
.js .hero-meta .live { display: inline-flex; }

/* ─── HERO: LUFT ZWISCHEN LEISTE UND KOPFZEILE ───────────────────────── */
/* Der Hero hält oben 90 px frei – ein Wert, der für die alte, flachere
   Leiste gerechnet war. Seit dem Größenumbau endet die Leiste je nach
   Breite bei 92 px (Desktop) bzw. 98 px (bis 900 px, dort ist sie höher).
   Die Freihaltung war also kleiner als die Leiste selbst; die Kopfzeile
   stand mit 34 px unter einer Kante, die sie eigentlich um 8 px
   überlappte. Jetzt deckt die Freihaltung die größte gemessene
   Leistenhöhe ab, die 2,6 rem der Kopfzeile bleiben als bewusste Luft
   darüber stehen – gemessen 43–60 px je nach Breite.
   Die Überschrift selbst bleibt unten verankert und wandert nicht mit. */
.hero { padding-top: clamp(100px, 12vh, 110px); }

/* ─── HERO: CSS-Auftritt an GSAP übergeben ───────────────────────────── */
/* Die Keyframes des schlanken Entwurfs würden GSAPs Inline-Werte über-
   schreiben. Ohne !important auf transform/opacity, damit GSAP weiter
   setzen darf – und ohne GSAP bleibt trotzdem alles sichtbar. */
.hero-h1 .mask > i { animation: none !important; transform: none; }
.hero-rule  { animation: none !important; transform: scaleX(1); }
.hero-cta   { animation: none !important; opacity: 1; }
.hero-scroll{ animation: none !important; opacity: 1; }

/* ─── REDUZIERTE BEWEGUNG: Showcase-Teile ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { transform: none !important; }
  .pz-step { opacity: 1 !important; }
  .pz-stage { --bw: 0 !important; }
  .intro-veil { display: none; }
}

/* Der CSS-Scroll-Parallax des schlanken Entwurfs wird hier von GSAP übernommen */
.hero-photo { animation: none !important; height: 112% !important; }



/* Shared interaction fixes. */
[hidden] { display:none !important; }
.form-status { margin-top:1rem; color:var(--fg-1); line-height:1.6; }
.form-status:empty { display:none; }
.form-status[data-state="error"] { color:#ffb3a7; }
.form-status[data-state="success"] { color:#afe3c2; }
.form-send:disabled { opacity:.65; cursor:wait; }
#video-status { position:absolute; bottom:3rem; left:5%; right:5%; text-align:center; color:white; }
html:not(.js) .faq-a { height:auto; }
html:not(.js) .faq-a-inner { opacity:1; transform:none; }
html:not(.js) .pf-filter { display:none; }
html:not(.js) .hero-h1 .mask > i { transform:none; }
.hero-h1 .mask > i[aria-hidden] { display:block; }
/* Original typography and motion, with room between the ideas. */
:root { --sy:clamp(96px,10vw,176px); }
p,.faq-a-inner { hyphens:none; }
.sec-sub { max-width:54ch; line-height:1.8; }
.sec-head { margin-bottom:clamp(3rem,5vw,5rem); }
.hero-photo { height:100% !important; }
.hero-photo img { height:100%; transform:none; object-position:center 38%; }
.hero-h1 { font-size:clamp(2.65rem,5.5vw,5.8rem); }
.hero-foot { margin-top:2.3rem; }
.hero-meta { font-size:.66rem; }
.svc-trigger { padding:clamp(2rem,4vw,3.8rem) 0; }
.svc-name { font-size:clamp(1.5rem,3.4vw,3.4rem); }
.svc-toggle { display:grid;place-items:center;font-size:1.7rem;font-weight:400;transition:transform .4s var(--ease-o); }
.svc-toggle::before,.svc-toggle::after { display:none; }
.svc-trigger:hover .svc-toggle { transform:translate(4px,-4px); }
.svc-trigger:focus-visible { outline-offset:10px; }
.about-p { max-width:62ch;line-height:1.9;margin-top:2rem; }
.about-pull { margin-bottom:2.5rem; }
.about-layout { margin-top:clamp(3rem,6vw,6rem); }
.portfolio-more { text-align:center;margin-top:3rem; }
.pf-top { gap:2rem;margin-bottom:3rem; }
.paper { --fg-0:#17191b;--fg-1:#35383c;--fg-2:#4c5157;--fg-3:#565c63;--hair:rgb(20 23 26 / .16);--hair-2:rgb(20 23 26 / .22);--hair-3:rgb(20 23 26 / .3);--ember:#885019; background:#f5f4f0 !important;color:var(--fg-0); }
.paper.band::before,.paper.band::after { display:none; }
.paper .sec-index { color:var(--fg-2); }
.paper .faq-q { color:var(--fg-0);min-height:84px; }
.paper .faq-a-inner { color:var(--fg-1);font-size:1rem;line-height:1.85;padding-bottom:2rem; }
.paper .faq-item.is-open .faq-sign::before { background:#f5f4f0; }
.faq-wrap { max-width:1040px; }
.faq-list { margin-top:3rem; }
.legal-note small { display:block;font-size:.82rem;color:var(--fg-2);line-height:1.65; }
.stat-claim-text { font-size:clamp(1.5rem,2.5vw,2.3rem);max-width:17ch; }
.service-hero { min-height:95svh; }
.service-hero .hero-h1 { font-size:clamp(3rem,7vw,7.2rem); }
.service-hero .hero-photo img { object-position:center 35%; }
.service-hero .hero-meta { order:-1; }
.service-hero .hero-meta a { display:inline-flex;align-items:center;min-height:44px; }
.hero-ki { z-index:3;top:160px;bottom:auto; }
.service-inner { max-width:var(--maxw);margin:auto;padding:0 var(--gx); }
.service-intro { padding:var(--sy) 0; }
.service-lead { font:500 clamp(1.8rem,3.7vw,3.6rem)/1.32 var(--font-d);letter-spacing:-.03em;max-width:29ch;margin:3rem 0 clamp(5rem,9vw,9rem);text-wrap:pretty; }
.service-editorial { display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,8vw,8rem);align-items:start; }
.service-editorial .sec-title { font-size:clamp(2rem,3.7vw,3.7rem);max-width:15ch; }
.service-editorial p,.service-film p { font-size:1.1rem;line-height:1.85;max-width:47ch;color:var(--fg-1); }
.service-process .pz-head { padding-bottom:3rem; }
.service-story { display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,8vw,8rem);align-items:start; }
.service-story-copy { position:sticky;top:160px; }
.service-story .sec-title { margin:2rem 0;max-width:13ch; }
.service-examples { display:grid;gap:5rem; }
.story-image { display:block;width:85%;border-radius:0;aspect-ratio:4/5;overflow:hidden; }
.story-image:nth-child(2) { justify-self:end;margin-top:1rem; }
.story-image img { width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-o); }
.story-image:hover img { transform:scale(1.035); }
.service-film { padding:var(--sy) 0; }
.service-film-grid { display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:5rem; }
.service-film .sec-title { margin:2rem 0; }
.service-film .svc-vid-thumb { width:min(100%,360px);aspect-ratio:9/16;justify-self:center;border-radius:0; }
.service-film .svc-vid-thumb img { width:100%;height:100%;object-fit:cover; }
.film-caption { position:absolute;bottom:1.5rem;left:1rem;right:1rem;color:#fff;z-index:2;font-size:.9rem; }
.service-film .svc-vid-thumb::after { content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#000b); }
.service-next { display:grid;grid-template-columns:1fr auto;gap:.8rem;margin-top:7rem;padding-top:2rem;border-top:1px solid var(--hair-2); }
.service-next > span:first-child { grid-column:1/-1;color:var(--fg-2);font-size:.8rem; }
.service-next strong { font:500 clamp(1.8rem,4vw,3.5rem)/1.2 var(--font-d); }
.service-next > span:last-child { font-size:2rem; }
.service-contact .btn { margin-top:2rem; }
.web-hero-art { background:#171c22;overflow:hidden; }
.web-art { position:relative;width:100%; }
.web-hero-art > .web-art { width:62%;margin:9rem 5% 0 auto;transform:rotate(-5deg); }
.web-window { overflow:hidden;border:1px solid #ffffff38;border-radius:10px;background:#11161b;box-shadow:0 30px 70px #0005; }
.web-bar { height:36px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:10px;color:#cbd0d5; }
.web-canvas { aspect-ratio:1.6;position:relative;background:#14181b;overflow:hidden; }
.web-canvas > img { position:absolute;width:100%;height:100%;object-fit:cover;opacity:.7; }
.web-type { position:absolute;bottom:18%;left:6%;font:600 clamp(24px,4vw,60px)/1 var(--font-d);letter-spacing:-.04em;color:#fff; }
.web-bottom { position:absolute;left:6%;right:6%;bottom:6%;display:flex;justify-content:space-between;font-size:9px;color:#fff; }
.web-phone { width:22%;position:absolute;right:-3%;bottom:-12%;border:5px solid #272b30;border-radius:22px;overflow:hidden;background:#e6e2db;box-shadow:0 20px 40px #0006; }
.web-phone img { width:100%;aspect-ratio:3/4;object-fit:cover;display:block; }
.web-phone p { padding:10%;font:500 clamp(12px,1.8vw,22px)/1.1 var(--font-d);color:#181a1c; }
.web-phone-top { position:absolute;top:7px;left:33%;width:34%;height:5px;background:#111;border-radius:8px; }
.web-process-media { overflow:visible !important;aspect-ratio:1.1 !important;background:none !important;display:flex;align-items:center; }
.web-process-media .web-art img { opacity:1;position:static; }
.web-process-media .web-canvas > img { position:absolute;opacity:.7; }
.web-process-media .web-phone img,.hero-photo .web-phone img { height:auto; }
.web-process-media .web-type { font-size:clamp(22px,3vw,40px); }
.web-design-specimen { background:#f5f4f0;color:#191b1e;padding:clamp(2rem,5vw,5rem);aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between; }
.specimen-kicker,.specimen-foot { font-size:.75rem; }
.specimen-type { font:500 clamp(2.8rem,5vw,5rem)/1 var(--font-d);letter-spacing:-.06em; }
.specimen-line { height:1px;background:currentColor; }
@media(min-width:721px) { .service-2 .hero-veil { background:linear-gradient(90deg,#090b0ed9,transparent),linear-gradient(0deg,#090b0ef2,transparent 80%); } }
@media(max-width:900px) { .nav-links{display:none}.nav-burger{display:flex} }
@media(max-width:720px) {
 :root { --gx:24px;--sy:88px; }
 .hero { min-height:850px;min-height:max(780px,100svh);padding-top:80px; }
 .hero-photo { height:58% !important;inset:0 0 auto; }
 .hero-photo img { object-fit:cover;object-position:55% 40%; }
 .hero-veil { background:linear-gradient(0deg,var(--bg-0) 0%,var(--bg-0) 37%,transparent 76%,#0004 100%); }
 .hero-meta { padding-top:1.5rem;font-size:.58rem; }
 .hero-body { padding-bottom:3rem; }
 .hero-h1 { font-size:clamp(2rem,7.4vw,3.2rem);line-height:1.06;letter-spacing:-.035em; }
 .hero-foot { gap:1.5rem;margin-top:1.8rem; }
 .hero-services { font-size:.64rem; }
 .hero-cta { flex-wrap:wrap;gap:.6rem; }
 .hero-cta .btn { padding:.8rem 1rem;font-size:.77rem; }
 .hero-cta .btn i { display:none; }
 .hero-scroll { display:none; }
 .sec-title { font-size:clamp(2rem,8vw,2.8rem);line-height:1.13; }
 .sec-sub { font-size:1rem;line-height:1.8; }
 .svc-trigger { grid-template-columns:24px minmax(0,1fr) 24px;gap:.8rem;padding:1.9rem 0; }
 .svc-name { font-size:clamp(1.2rem,5vw,1.65rem);line-height:1.3; }
 .svc-toggle { width:24px;height:24px;font-size:1.4rem; }
 .svc-num { font-size:.62rem; }
 .pz-head { margin-bottom:2.5rem; }
 .pz-step { padding:2.2rem 0;opacity:1; }
 .pz-text { line-height:1.85; }
 .pz-stage .pz-steps { padding:0 1rem; }
 .pz-grid { display:flex;flex-direction:column;gap:1.5rem; }
 .pz-stage .pz-sticky { display:block;order:-1;position:sticky;top:86px;z-index:2;width:100%;padding-bottom:.75rem; }
 .pz-stage .pz-media { aspect-ratio:16/9;max-height:220px;border-radius:12px; }
 .pz-stage .pz-steps { width:100%; }
 .pf-top { align-items:flex-start; }
 .pf-filter { gap:.2rem;flex-wrap:wrap; }
 .f-btn { min-height:44px;padding:.6rem .7rem; }
 .about-photo { max-width:270px; }
 .about-gallery { grid-template-columns:1fr 1fr;gap:.8rem; }
 .about-p { font-size:1rem;line-height:1.85; }
 .stats { grid-template-columns:1fr 1fr; }
 .stat { padding:1.5rem 1rem 1.5rem 0; }
 .stat + .stat { border-left:0;padding-left:1rem; }
 .stat.stat-claim { grid-column:1/-1;padding:2rem 0;border-top:1px solid var(--hair); }
 .stat-claim-text { font-size:1.8rem;max-width:21ch; }
 .stat-label { font-size:.8rem; }
 .faq-q { gap:.8rem; }
 .faq-label { font-size:1rem;line-height:1.55; }
 .faq-n { display:none; }
 .faq-a-inner { padding-left:0 !important; }
 .service-hero { min-height:max(760px,95svh); }
 .service-hero .hero-h1 { font-size:clamp(2.5rem,10vw,4rem); }
 .service-hero .hero-meta { flex-wrap:wrap;gap:.7rem; }
 .service-lead { font-size:1.85rem;line-height:1.4;margin:2.5rem 0 4.5rem; }
 .service-editorial,.service-story,.service-film-grid { grid-template-columns:1fr;gap:2.5rem; }
 .service-editorial p,.service-film p { font-size:1rem; }
 .service-story-copy { position:static; }
 .service-examples { gap:2rem;margin-top:1rem; }
 .story-image { width:88%; }
 .service-film .svc-vid-thumb { width:260px; }
 .service-next { margin-top:4rem; }
 .web-hero-art > .web-art { width:85%;margin:10rem auto 0;transform:rotate(-4deg); }
 .web-bar { font-size:8px;height:24px;padding:0 10px; }
 .web-phone { border-width:3px;border-radius:12px; }
 .hero-ki { top:170px; }
}
@media(prefers-reduced-motion:reduce) { .pz-stage{--bw:1}.service-story-copy{position:static}.web-hero-art > .web-art{transform:none} }
html:not(.js) .intro,html:not(.js) .intro-veil { display:none; }
.error-main { max-width:1000px;margin:12vh auto;padding:var(--gx); }
.error-main p { color:var(--fg-1);margin:2rem 0;max-width:55ch; }
.error-main .portfolio-next { display:flex;gap:2rem;align-items:center;flex-wrap:wrap; }
.error-main .text-link { text-decoration:underline;text-underline-offset:.3em; }

/* One rhythm for the whole site: masked type, opening frames, quiet parallax. */
:root { --motion-enter:var(--ease-o); --motion-change:var(--apple); }
.motion-ready [data-rv] { transition:none; }
.motion-ready [data-copy-motion],.motion-ready [data-image-motion] { opacity:1;transform:none; }
.motion-ready [data-mask] { opacity:1;transform:none; }
.motion-ready .about-photo img,.motion-ready .about-gallery img,
.motion-ready .story-image img,.motion-ready .service-film .svc-vid-thumb img { transition:none; }
.motion-sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;user-select:none; }
.copy-visual { display:inline; }
.copy-word { display:inline-block;vertical-align:top;overflow:hidden;padding:.12em 0 .16em;margin:-.12em 0 -.16em; }
.copy-word-inner { display:block; }
.paper-frame { position:relative;background:var(--bg-0);isolation:isolate;overflow:clip; }
.paper-frame > .paper { position:relative;z-index:1;transform-origin:50% 0; }
.paper-edge { position:absolute;top:0;left:var(--gx);right:var(--gx);height:1px;background:#f5f4f0;opacity:0;pointer-events:none;z-index:2; }
.service-hero > .hero-photo { overflow:hidden; }
.service-hero .hero-photo > img { display:block;transform:none;object-position:var(--hero-position,center 38%); }
.service-1 { --hero-position:55% 42%; }
.service-5 { --hero-position:50% 34%; }
.service-3 { --hero-position:50% 30%; }
.service-hero .hero-body { padding-bottom:clamp(3rem,6vw,6rem); }
.service-hero .hero-rule { background:rgb(245 244 240 / .34); }
.story-image { transform-origin:50% 50%; }
.service-next { transition:color .35s var(--motion-enter); }
.service-next > span:last-child { transition:transform .55s var(--motion-enter); }
.service-next:hover strong { color:var(--ember); }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .service-next:hover > span:last-child { transform:translate(7px,-7px); }
}
.web-window,.web-phone { transform-origin:50% 60%; }
.web-window { position:relative; }
.web-phone { z-index:2;left:-4%;right:auto;width:28%; }
.web-canvas > img { object-position:62% 50%; }
.web-shine { position:absolute;inset:-15% auto -15% 0;width:38%;pointer-events:none;background:linear-gradient(105deg,transparent,rgb(255 251 238 / .16) 50%,transparent); }
.optical-frame { position:absolute;inset:clamp(12px,2vw,24px);z-index:2;pointer-events:none;opacity:0; }
.optical-edge { position:absolute;display:block;background:rgb(255 249 231 / .85); }
.edge-x { width:clamp(18px,2.5vw,36px);height:1px; }
.edge-y { height:clamp(18px,2.5vw,36px);width:1px; }
.edge-tl { top:0;left:0;transform-origin:top left; }
.edge-tr { top:0;right:0;transform-origin:top right; }
.edge-bl { bottom:0;left:0;transform-origin:bottom left; }
.edge-br { bottom:0;right:0;transform-origin:bottom right; }
.service-trace { position:absolute;bottom:-1px;left:0;width:100%;height:1px;pointer-events:none;background:linear-gradient(90deg,var(--ember),rgb(255 237 200 / .22) 64%,transparent);transform-origin:left;opacity:0; }
.story-image { position:relative; }
.web-process-media::after { display:none; }
.web-design-specimen { overflow:hidden; }
/* Limited source: use the existing portrait as a portrait, without a wide crop. */
@media(min-width:901px) {
 .hero-source-limited .hero-photo { left:auto;right:var(--gx);top:0;width:min(58vw,780px);height:100% !important; }
 .hero-source-limited .hero-photo > img { object-fit:contain;object-position:center 36%; }
 .hero-source-limited .hero-veil { background:linear-gradient(90deg,var(--bg-0) 12%,transparent 82%),linear-gradient(0deg,var(--bg-0),transparent 80%); }
 .hero-source-limited .hero-h1 { max-width:12ch; }
}
/* Native page transitions keep the same navigation in place where supported. */
@view-transition { navigation:auto; }
#site-nav { view-transition-name:site-navigation; }
::view-transition-old(root) { animation:page-out .18s ease-out both; }
::view-transition-new(root) { animation:page-in .42s var(--motion-enter) both; }
::view-transition-group(site-navigation) { animation-duration:.42s; }
@keyframes page-out { to { opacity:0; } }
@keyframes page-in { from { opacity:0; } to { opacity:1; } }
@media(max-width:900px) {
 .hero-source-limited .hero-photo > img { object-fit:contain; }
 .hero-source-limited .hero-photo { background:var(--bg-0); }
 .copy-word { padding:.12em 0 .16em; }
}
@media(prefers-reduced-motion:reduce) {
 .paper-frame > .paper { clip-path:none !important;transform:none !important; }
 .story-image,.service-film .svc-vid-thumb { clip-path:none !important; }
 .copy-word-inner { transform:none !important;opacity:1 !important; }
 .optical-frame,.web-shine,.service-trace { display:none; }
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
}

/* Centered wordmark and bloom, followed by an expanding picture window. */
html { scrollbar-gutter:stable; }
.intro { display:none;transition:none;will-change:auto;background:transparent;overflow:hidden; }
.intro-veil { display:none; }
html.intro-pending .intro:not(.is-off) { display:flex; }
.intro-word { position:absolute;left:50%;top:50%;display:block;width:calc(var(--iw-h) * 5.083333);opacity:1;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 0 7px rgb(255 252 240 / .32)) drop-shadow(0 0 25px rgb(255 193 113 / .46)); }
.intro-mark { position:relative;z-index:1;width:100%;clip-path:inset(0% 77.54% 0% 0%);transform:translateX(38.77%); }
.intro-mark img { width:100%;height:auto; }
.intro-word::after { display:none; }
.intro-window { position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;pointer-events:none; }
.intro-window-surface { fill:var(--bg-0); }
.intro-window-edge { stroke:rgb(255 231 193 / .6);stroke-width:1; }
.intro-halo { position:absolute;inset:-150% -55%;background:radial-gradient(ellipse,rgb(255 201 134 / .24) 0%,rgb(239 164 75 / .09) 28%,transparent 68%);opacity:0;transform-origin:center;pointer-events:none; }
.intro-polish { position:absolute;inset:0;z-index:2;overflow:hidden;opacity:0;pointer-events:none;-webkit-mask:url('../bilder/logo-weiss.png') center/100% 100% no-repeat;mask:url('../bilder/logo-weiss.png') center/100% 100% no-repeat; }
.intro-polish-light { position:absolute;top:-70%;bottom:-70%;left:0;width:35%;background:linear-gradient(110deg,transparent,rgb(255 225 169 / .9) 48%,white 52%,transparent);transform:translateX(-160%); }
/* Hero labels are ready before the curtain opens, with no delayed re-entry. */
.js .hero [data-fly] .fly,.js .hero [data-fly] .fly-sep { opacity:1;transform:none;transition:none; }
@media(prefers-reduced-motion:reduce) {
 html.intro-pending .intro { display:none; }
}