/* ============================================================
   NORDVOGEL MEDIA — Design System
   Videoproduktion & Social Media · Hamburg · Uelzen · Berlin
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Farben */
  --bg:          #0B0B0C;
  --bg-alt:      #0F0F11;
  --surface:     #141416;
  --surface-2:   #1B1B1E;
  --line:        rgba(255,255,255,.085);
  --line-strong: rgba(255,255,255,.19);
  --fg:          #F2F1EE;
  --fg-dim:      #ABABB2;
  --muted:       #74747C;
  --accent:      #F2541B;
  --accent-2:    #FF8B4D;
  --accent-soft: rgba(242,84,27,.10);

  /* Typo */
  --font-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Maße */
  --wrap:      1240px;
  --wrap-slim: 820px;
  --gut:       clamp(22px, 5.5vw, 72px);
  --sec:       clamp(88px, 11.5vw, 172px);
  --radius:    10px;
  --radius-lg: 14px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .55s;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Filmisches Grain — passend zur Videoproduktion */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--slim { max-width: var(--wrap-slim); }
.section { padding-block: var(--sec); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- 4. Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h-display { font-size: clamp(2.9rem, 8.4vw, 6.6rem); }
.h1        { font-size: clamp(2.4rem, 6.2vw, 4.6rem); }
.h2        { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.h3        { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.15; }
.h4        { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.25; letter-spacing: -.02em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow { align-items: flex-start; }
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  /* Bei mehrzeiligem Eyebrow am ersten Zeilenmittelpunkt ausrichten */
  margin-top: .55em;
}
.eyebrow--plain::before { display: none; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--fg-dim);
  line-height: 1.6;
  max-width: 62ch;
  text-wrap: pretty;
}
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.italic-accent {
  font-style: italic;
  color: var(--accent);
  font-family: var(--font-display);
  /* Kursive Glyphen fressen sonst den Wortabstand zum Folgewort auf */
  padding-right: .07em;
}

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translate(3px, -3px); }

.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--ink); }
.btn--accent:hover { --btn-bg: var(--accent-2); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--line-strong);
}
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.08); border-color: var(--fg); }
.btn--lg { padding: 1.15rem 2rem; font-size: .95rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translate(3px, -3px); }

/* ---------- 6. Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              backdrop-filter .4s var(--ease), transform .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(var(--ink-rgb),.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.header.is-hidden { transform: translateY(-102%); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 76px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.03em;
  z-index: 2;
}
.logo__mark { width: 26px; height: 26px; flex: none; }
.logo__mark path { fill: var(--accent); }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  position: relative;
  padding: .5rem .85rem;
  font-size: .875rem;
  color: var(--fg-dim);
  border-radius: 100px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover { color: var(--fg); background: rgba(255,255,255,.07); }
.nav a[aria-current="page"] { color: var(--fg); }
.nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .18rem;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
}
.header__cta { display: inline-flex; }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.burger span {
  position: absolute;
  left: 13px;
  width: 18px; height: 1.5px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile Menü */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  padding: 108px var(--gut) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  /* visibility schaltet beim Öffnen sofort und beim Schließen erst
     nach der Blende. Sonst gilt die Überlagerung im Moment des
     Öffnens noch als unsichtbar und nimmt keinen Fokus an. */
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s;
}
.mobile-nav ul { display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav ul a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -.035em;
  border-bottom: 1px solid var(--line);
}
.mobile-nav ul a span {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .1em;
}
.mobile-nav__foot { display: grid; gap: 1rem; }
.mobile-nav__foot a.mn-contact { font-family: var(--font-mono); font-size: .8rem; color: var(--fg-dim); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(620px, 100svh, 1000px);
  display: flex;
  align-items: flex-end;
  padding-block: 140px clamp(40px, 7vw, 72px);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb),.72) 0%, rgba(var(--ink-rgb),.38) 38%, rgba(var(--ink-rgb),.96) 100%),
    radial-gradient(900px 620px at 78% 12%, rgba(255,90,31,.16), transparent 66%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__title { margin-block: 1.1rem 1.6rem; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero__title .line > span {
  display: block;
  transform: translate3d(0, 130%, 0);
  animation: heroRise 1.05s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span { animation-delay: .12s; }
.hero__title .line:nth-child(2) > span { animation-delay: .24s; }
@keyframes heroRise { to { transform: none; } }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.4rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.hero__locations { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.hero__locations li {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hero__locations li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.scroll-hint {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.scroll-hint svg { animation: bob 2.1s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- 8. Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: clamp(2.2rem, 5vw, 4.5rem); padding-right: clamp(2.2rem, 5vw, 4.5rem); }
.marquee__group span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.marquee__group span:hover { color: var(--fg); }
.marquee__group i { color: var(--accent); font-style: normal; font-size: .7em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 9. Section Head ---------- */
.sec-head { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head--split {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.sec-head__title { display: grid; gap: 1.1rem; }

/* ---------- 10. Leistungen ---------- */
.pillars { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: clamp(1.8rem, 3.2vw, 2.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.pillar::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.pillar:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-4px); }
.pillar:hover::before { transform: scaleX(1); }
.pillar__num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--accent);
}
.pillar__head { display: grid; gap: .85rem; }
.pillar__list { display: grid; gap: 0; margin-top: auto; }
.pillar__list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .72rem 0;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  color: var(--fg-dim);
}
.pillar__list li svg { flex: none; color: var(--accent); opacity: .85; }

/* ---------- 11. Prozess ---------- */
.steps { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.step {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.4rem) 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  transition: background .35s var(--ease);
}
.section--alt .step { background: var(--bg-alt); }
.step:hover { background: var(--surface); }
.step__num { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); letter-spacing: .1em; padding-top: .35rem; }
.step__body { color: var(--fg-dim); font-size: .96rem; max-width: 58ch; }

/* ---------- 12. Arbeiten / Portfolio ---------- */
.works { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(2, minmax(0,1fr)); }
.work {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.work:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.work--wide { grid-column: span 2; }
.work__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    linear-gradient(140deg, #1A1A1D 0%, #121214 100%);
}
.work--wide .work__media { aspect-ratio: 21 / 9; }
.work__media img, .work__media video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); }
.work:hover .work__media img, .work:hover .work__media video { transform: scale(1.045); }
.work__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--ink-rgb),.85) 100%);
}
/* Platzhalter, solange kein Bild hinterlegt ist */
.work__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.34);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
}
.work__info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.work__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.tag {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--fg-dim);
  background: rgba(var(--ink-rgb),.5);
  backdrop-filter: blur(6px);
}
.work__play {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--ink);
  transform: scale(.86);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.work:hover .work__play { transform: none; opacity: 1; }

/* ---------- 13. Standorte ---------- */
.geo { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; }
.geo__list { display: flex; flex-wrap: wrap; gap: .55rem; }
.geo__list li {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.03em;
  padding: .5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fg-dim);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.geo__list li:hover { color: var(--fg); border-color: var(--accent); background: var(--accent-soft); }
.geo__list li.is-primary { color: var(--fg); border-color: var(--line-strong); }

/* ---------- 14. Team ---------- */
.team { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(2, minmax(0,1fr)); }
.member {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.member:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.member__media { aspect-ratio: 4/5; position: relative; background: linear-gradient(160deg,#1C1C20,#121214); }
.member__media img { width: 100%; height: 100%; object-fit: cover; }
.member__body { padding: 1.3rem clamp(1.1rem,2vw,1.6rem) 1.5rem; display: grid; gap: .3rem; }
.member__role { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* ---------- 15. Testimonials ---------- */
.quotes { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.quote {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quote__text { color: var(--fg-dim); font-size: .96rem; }
.quote__author { margin-top: auto; display: flex; align-items: center; gap: .85rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.quote__avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .78rem;
  border: 1px solid rgba(255,90,31,.28);
}
.stars { display: flex; gap: 2px; color: var(--accent); }

/* ---------- 16. FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.15rem, 2.4vw, 1.7rem) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.8vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -.02em;
  transition: color .3s var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__icon { position: relative; width: 20px; height: 20px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%,-50%);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq__q[aria-expanded="true"] { color: var(--accent); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%,-50%) rotate(0); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--fg-dim); max-width: 70ch; padding-bottom: 1.6rem; font-size: .96rem; }

/* ---------- 17. CTA ---------- */
.cta {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(700px 420px at 82% 8%, rgba(255,90,31,.16), transparent 68%),
    var(--surface);
  padding: clamp(2.4rem, 6vw, 5rem) clamp(1.6rem, 5vw, 4.5rem);
  overflow: hidden;
  display: grid;
  gap: 1.6rem;
  justify-items: start;
}
.cta__title { max-width: 20ch; }

/* ---------- 18. Kontakt / Formular ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; }
.contact-card { display: grid; gap: 1.6rem; }
.contact-item { display: grid; gap: .3rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.contact-item__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.contact-item a:hover { color: var(--accent); }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.field { display: grid; gap: .5rem; }
.field label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: .95rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #5C5C64; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.field textarea { resize: vertical; min-height: 148px; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .82rem; color: var(--muted); }
.check input { width: 17px; height: 17px; margin-top: .2rem; accent-color: var(--accent); flex: none; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.form__note { font-size: .78rem; color: var(--muted); }

/* ---------- 19. Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2rem; background: var(--bg-alt); }
.footer__top { display: grid; gap: clamp(2rem,4vw,3rem); grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); }
.footer__brand { display: grid; gap: 1rem; align-content: start; max-width: 34ch; }
.footer__col h3 { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.footer__col ul { display: grid; gap: .6rem; }
.footer__col a { font-size: .9rem; color: var(--fg-dim); transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  margin-top: clamp(2.5rem,5vw,4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer__legal a:hover { color: var(--fg); }

/* ---------- 20. Innere Seiten ---------- */
.page-hero {
  padding-block: clamp(140px, 18vw, 200px) clamp(48px, 7vw, 88px);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 480px at 15% 0%, rgba(255,90,31,.13), transparent 66%);
  pointer-events: none;
}
.page-hero__inner { position: relative; display: grid; gap: 1.4rem; }
.crumb { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; gap: .6rem; flex-wrap: wrap; }
.crumb a:hover { color: var(--accent); }

.prose { display: grid; gap: 1.3rem; max-width: 76ch; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 1.6rem; }
.prose h3 { font-size: clamp(1.05rem, 1.8vw, 1.25rem); margin-top: 1rem; }
.prose p, .prose li { color: var(--fg-dim); font-size: .95rem; }
.prose ul { display: grid; gap: .5rem; padding-left: 1.1rem; list-style: disc; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--fg); font-weight: 600; }
.todo {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 5px;
  background: rgba(255,90,31,.14);
  border: 1px dashed rgba(255,90,31,.5);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: .8em;
}

.feature-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.feature {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: .7rem;
  align-content: start;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.feature:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.feature__icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(255,90,31,.24);
  margin-bottom: .3rem;
}
.feature p { color: var(--fg-dim); font-size: .92rem; }

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: repeat(2, minmax(0,1fr)); align-items: center; }
.split__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(150deg,#161618,#0D0D0E); position: relative; }
.split__media img, .split__media video { width: 100%; height: 100%; object-fit: cover; }

.pricing { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.plan {
  display: flex; flex-direction: column; gap: 1.3rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.plan.is-featured { border-color: rgba(255,90,31,.45); background: linear-gradient(180deg, rgba(255,90,31,.07), var(--surface) 45%); }
.plan__badge { align-self: flex-start; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 100px; background: var(--accent); color: var(--ink); }
.plan ul { display: grid; gap: .65rem; margin-top: auto; }
.plan li { display: flex; gap: .6rem; font-size: .9rem; color: var(--fg-dim); }
.plan li svg { flex: none; color: var(--accent); margin-top: .3rem; }

/* ---------- 21. Scroll-Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 22. Responsive ---------- */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
  .quotes { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .feature-grid, .pricing { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .pillars, .works, .team, .geo, .contact-grid, .split, .sec-head--split { grid-template-columns: 1fr; }
  .work--wide { grid-column: auto; }
  .work--wide .work__media { aspect-ratio: 16/10; }
  .step { grid-template-columns: 56px 1fr; }
  .step__body { grid-column: 2; }
}
@media (max-width: 640px) {
  .quotes, .feature-grid, .pricing, .form__row { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__meta { flex-direction: column; align-items: flex-start; }
  .scroll-hint { display: none; }
}

/* ---------- 23. A11y / Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 10000;
  padding: .7rem 1.1rem;
  background: var(--accent);
  color: var(--ink);
  border-radius: 8px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   24. CRAFT LAYER — Tiefe, Glas, Licht, Motion
   ============================================================ */

/* ---------- 24.1 Erweiterte Tokens ---------- */
:root {
  --ink:        #0A0A0B;
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow-md:  0 18px 40px -28px rgba(0,0,0,.9);
  --shadow-lg:  0 40px 90px -50px rgba(0,0,0,.95);
  --glow:       0 0 0 0 transparent;   /* Glut abgeschaltet, bleibt aber listentauglich */
  --hair:       0 0 0 0 transparent;   /* innere Lichtkante abgeschaltet */
  --radius:     10px;
  --radius-lg:  14px;
}

html { background: var(--bg); }

/* ---------- 24.2 Ambientes Licht hinter dem gesamten Layout ---------- */
body::before {
  content: '';
  position: fixed;
  inset: -25vh -20vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44vw 44vh at 14% 6%,  rgba(255,90,31,.14),  transparent 62%),
    radial-gradient(40vw 40vh at 86% 24%, rgba(255,161,60,.085), transparent 64%),
    radial-gradient(52vw 46vh at 58% 92%, rgba(96,120,255,.075), transparent 66%);
  animation: ambient 30s var(--ease-inout) infinite alternate;
  will-change: transform;
}
@keyframes ambient {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.03); }
}

/* ---------- 24.3 Typografische Feinjustierung ---------- */
body { letter-spacing: -.008em; font-feature-settings: "cv11" 1; }
h1, h2, h3, h4 { letter-spacing: -.042em; font-feature-settings: "ss01" 1, "cv11" 1; }
.h-display { line-height: .93; letter-spacing: -.052em; }
.h1 { line-height: .97; letter-spacing: -.046em; }
.h2 { line-height: 1.0; }
.lead { letter-spacing: -.012em; }

/* ---------- 24.4 Scroll-Fortschritt ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 1001;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* ---------- 24.5 Header als schwebende Glas-Pille ---------- */
.header { padding-top: 0; transition: padding-top .55s var(--ease-out), transform .55s var(--ease-out); }
.header.is-stuck {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: 12px;
}
.header__inner {
  border: 1px solid transparent;
  border-radius: 100px;
  transition: height .55s var(--ease-out), background .55s var(--ease-out),
              border-color .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.header.is-stuck .header__inner {
  height: 62px;
  background: rgba(32,32,39,.62);
  border-color: var(--line);
  box-shadow: var(--shadow-md), var(--hair);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

/* Wandernde Pille hinter der Navigation */
.nav { position: relative; }
.nav a { position: relative; z-index: 1; }
.nav a:hover { background: transparent; }
.nav__pill {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  height: 34px;
  width: 0;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  transform: translate3d(var(--x, 0px), -50%, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity .35s var(--ease-out);
}
.nav.is-hot .nav__pill { opacity: 1; }
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

/* ---------- 24.6 Buttons: Magnetismus, Glanz, Glut ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--hair);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform .5s var(--ease-out), background-color .35s var(--ease),
              border-color .35s var(--ease), color .35s var(--ease),
              box-shadow .5s var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.32) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease-out);
}
.btn:hover::before { transform: translateX(130%); }
.btn:hover { --my: -3px; }
.btn:active { --my: 0px; transition-duration: .12s; }
.btn--accent {
  background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: var(--glow), var(--hair);
}
.btn--accent:hover { box-shadow: 0 18px 48px -20px rgba(255,90,31,.52), var(--hair); }
.btn--ghost { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost:hover { box-shadow: var(--shadow-sm), var(--hair); }
.btn svg { transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translate(3px, -3px); }

/* Textlink: Unterstrich läuft ein */
.link-arrow { position: relative; }
.link-arrow::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease-out);
}
.link-arrow:hover::before { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { transition: transform .45s var(--ease-out); }

/* ---------- 24.7 Karten: Neigung, Lichtkegel, Elevation ---------- */
.pillar, .feature, .work, .quote, .member, .plan {
  position: relative;
  box-shadow: var(--hair);
  transform: perspective(1100px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translate3d(0, var(--lift, 0px), 0);
  transition: transform .6s var(--ease-out), border-color .5s var(--ease-out),
              box-shadow .6s var(--ease-out), background .5s var(--ease-out);
}
.pillar:hover, .feature:hover, .work:hover, .quote:hover, .member:hover, .plan:hover {
  --lift: -6px;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md), var(--hair);
}
.pillar::after, .feature::after, .work::after, .quote::after, .member::after, .plan::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%),
              rgba(255,255,255,.075), transparent 62%);
  transition: opacity .5s var(--ease-out);
}
.pillar:hover::after, .feature:hover::after, .work:hover::after,
.quote:hover::after, .member:hover::after, .plan:hover::after { opacity: 1; }

.pillar::before { height: 2px; transition: transform .7s var(--ease-out); }

.feature__icon { transition: transform .5s var(--ease-out), background .4s var(--ease), border-color .4s var(--ease); }
.feature:hover .feature__icon { transform: translateY(-2px) rotate(-4deg) scale(1.06); border-color: rgba(255,90,31,.5); }

/* ---------- 24.8 Arbeiten ---------- */
.work__media img, .work__media video {
  filter: saturate(.92) contrast(1.02);
  transition: transform 1.2s var(--ease-out), filter .8s var(--ease-out);
}
.work:hover .work__media img, .work:hover .work__media video { transform: scale(1.07); filter: saturate(1.06) contrast(1.03); }
.work__info { transition: transform .6s var(--ease-out); }
.work:hover .work__info { transform: translateY(-4px); }
.work__play { box-shadow: var(--glow); transition: transform .5s var(--ease-out), opacity .4s var(--ease-out); }
.tag { transition: border-color .35s var(--ease), color .35s var(--ease); }
.work:hover .tag { border-color: rgba(255,255,255,.34); color: var(--fg); }

/* ---------- 24.9 Prozess-Schritte ---------- */
.step { position: relative; }
.step > * { position: relative; z-index: 1; }
.step::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gut) * -.45);
  z-index: 0;
  border-radius: 18px;
  background: var(--surface);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.step:hover::before { opacity: 1; }
.step:hover { background: var(--bg); }
.section--alt .step:hover { background: var(--bg-alt); }
.step__num { transition: transform .55s var(--ease-out), color .4s var(--ease); }
.step:hover .step__num { transform: translateX(6px); color: var(--accent-2); }

/* ---------- 24.10 Marquee mit Scroll-Schwung ---------- */
.marquee__group { transform: skewX(var(--skew, 0deg)); transition: transform .6s var(--ease-out); }
.marquee__group span { transition: color .35s var(--ease), transform .5s var(--ease-out); }
.marquee__group span:hover { color: var(--accent); transform: translateY(-2px); }

/* ---------- 24.11 Sektionen, CTA, Formular ---------- */
.section--alt { position: relative; }
.section--alt::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.cta { box-shadow: var(--shadow-lg), var(--hair); }
.cta::after {
  content: '';
  position: absolute;
  top: -60%; right: -12%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,90,31,.22), transparent 62%);
  filter: blur(26px);
  animation: floatGlow 20s var(--ease-inout) infinite alternate;
}
@keyframes floatGlow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-12%, 14%, 0) scale(1.18); }
}
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: 0 0 0 3px rgba(255,90,31,.16);
}
.field input, .field textarea, .field select {
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.footer__col a { display: inline-block; transition: color .3s var(--ease), transform .45s var(--ease-out); }
.footer__col a:hover { transform: translateX(4px); }
.geo__list li { transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease-out); }
.geo__list li:hover { transform: translateY(-3px); }

/* ---------- 24.12 FAQ ---------- */
.faq__q { transition: color .35s var(--ease), padding-left .45s var(--ease-out); }
.faq__q:hover { padding-left: .7rem; }
.faq__icon { transition: transform .5s var(--ease-out); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__a { transition: grid-template-rows .6s var(--ease-out); }

/* ---------- 24.13 Hero-Choreografie ---------- */
.hero__inner { transform: translate3d(0, var(--hy, 0px), 0); opacity: var(--ho, 1); }
.hero__bg { transform: translate3d(0, var(--py, 0px), 0) scale(1.08); }
.hero__bg img, .hero__bg video { animation: heroZoom 2.6s var(--ease-out) both; }
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: none; } }
.hero__title .line > span { animation-duration: 1.25s; animation-timing-function: var(--ease-out); }
.hero__inner > .eyebrow,
.hero__inner > .lead,
.hero__inner > .btn-row,
.hero__inner > .hero__meta { opacity: 0; animation: heroIn 1.1s var(--ease-out) forwards; }
.hero__inner > .eyebrow    { animation-delay: .06s; }
.hero__inner > .lead       { animation-delay: .46s; }
.hero__inner > .btn-row    { animation-delay: .58s; }
.hero__inner > .hero__meta { animation-delay: .70s; }
@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- 24.14 Scroll-Reveal, verfeinert ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(8px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out), filter .95s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Wortweiser Zeilenaufbau für Überschriften */
.split-text .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Unterlaengen (g, j, y) sitzen tiefer als die Zeilenhoehe erlaubt.
     Die Maske bekommt deshalb Spielraum, den der negative Rand
     sofort wieder aus dem Layout nimmt. */
  padding-bottom: .34em;
  margin-bottom: -.34em;
}
.split-text .word > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0, 130%, 0);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 38ms);
}
.split-text.is-in .word > i { transform: none; }

/* ---------- 24.15 Mobile-Menü ---------- */
.mobile-nav {
  background: rgba(var(--ink-rgb),.94);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}
.mobile-nav ul a {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), color .3s var(--ease);
}
.mobile-nav.is-open ul a { opacity: 1; transform: none; }
.mobile-nav.is-open li:nth-child(1) a { transition-delay: .10s; }
.mobile-nav.is-open li:nth-child(2) a { transition-delay: .16s; }
.mobile-nav.is-open li:nth-child(3) a { transition-delay: .22s; }
.mobile-nav.is-open li:nth-child(4) a { transition-delay: .28s; }
.mobile-nav.is-open li:nth-child(5) a { transition-delay: .34s; }
.mobile-nav ul a:hover { color: var(--accent); }

/* ---------- 24.16 Eigener Cursor ---------- */
.cursor, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 10001;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
body.cursor-live .cursor, body.cursor-live .cursor-dot { opacity: 1; }
.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--fg);
  mix-blend-mode: difference;
}
.cursor {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  display: grid;
  place-items: center;
  transition: width .45s var(--ease-out), height .45s var(--ease-out),
              margin .45s var(--ease-out), background .4s var(--ease-out),
              border-color .4s var(--ease-out), opacity .3s var(--ease-out);
}
.cursor span {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: transparent;
  transition: color .3s var(--ease-out);
}
body.cursor-link .cursor {
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  background: rgba(255,255,255,.09);
  border-color: transparent;
}
body.cursor-media .cursor {
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  background: var(--accent);
  border-color: transparent;
}
body.cursor-media .cursor span { color: var(--ink); }
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input:is([type="text"],[type="email"],[type="tel"],[type="search"],[type="url"],:not([type])),
html.has-cursor textarea { cursor: text !important; }
html.has-cursor select { cursor: pointer !important; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* ---------- 24.17 Seitenübergang ---------- */
.page-fade {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: var(--bg);
  opacity: 1;
  pointer-events: none;
  transition: opacity .8s var(--ease-out);
}
body.is-ready .page-fade { opacity: 0; }
body.is-leaving .page-fade { opacity: 1; transition-duration: .32s; }

/* ---------- 24.18 Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .cta::after { animation: none; }
  .split-text .word > i { transform: none; }
  .hero__inner > .eyebrow, .hero__inner > .lead,
  .hero__inner > .btn-row, .hero__inner > .hero__meta { opacity: 1; }
  .hero__bg { transform: none; }
  .mobile-nav ul a { opacity: 1; transform: none; }
  .page-fade { display: none; }
  .cursor, .cursor-dot { display: none; }
}

/* ============================================================
   25. SIGNATURE LAYER — Trägheit, Rail, Wortlicht, Decode
   ============================================================ */

/* ---------- 25.1 Trägheits-Scroll ---------- */
html.is-smooth { scroll-behavior: auto; }
html.is-smooth .smooth-content {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1;
}

/* Schlanke Bildlaufleiste */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: content-box; }

/* ---------- 25.2 Abschnitts-Rail ---------- */
.rail {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 900;
  transform: translateY(-50%);
  display: grid;
  gap: 15px;
}
.rail__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 26px; height: 10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.rail__dot::after {
  content: '';
  width: 8px; height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.24);
  transition: width .5s var(--ease-out), background .5s var(--ease-out);
}
.rail__dot:hover::after { width: 16px; background: rgba(255,255,255,.55); }
.rail__dot.is-active::after { width: 22px; background: var(--accent); }
.rail__dot span {
  position: absolute;
  right: 34px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: rgba(var(--ink-rgb),.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .3rem .6rem;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.rail__dot:hover span { opacity: 1; transform: none; }
@media (max-width: 1280px) { .rail { display: none; } }

/* ---------- 25.3 Wortlicht: Absätze hellen beim Scrollen auf ---------- */
.fade-words > i {
  font-style: inherit;
  opacity: clamp(.14, calc((var(--wp, 0) * (var(--n, 1) + 7) - var(--i, 0)) / 7), 1);
}

/* ---------- 25.4 Pfeil-Wechsel in Buttons und Links ---------- */
.btn__ico {
  position: relative;
  display: inline-block;
  flex: none;
  overflow: hidden;
}
.btn__ico svg { position: absolute; inset: 0; transition: transform .55s var(--ease-out); }
.btn__ico svg + svg { transform: translate3d(-130%, 130%, 0); }
.btn:hover .btn__ico svg,
.link-arrow:hover .btn__ico svg { transform: translate3d(130%, -130%, 0); }
.btn:hover .btn__ico svg + svg,
.link-arrow:hover .btn__ico svg + svg { transform: none; }

/* ---------- 25.5 Logo ---------- */
.logo__mark { transition: transform .7s var(--ease-out); }
.logo:hover .logo__mark { transform: translateY(-3px) rotate(-8deg) scale(1.08); }

/* ---------- 25.6 Decode-Effekt ---------- */
.eyebrow.is-decoding { color: var(--accent); }

/* ---------- 25.7 Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-words > i { opacity: 1; }
  .rail { display: none; }
}

/* ============================================================
   26. QUIET LAYER — Reduktion, Präzision, Ruhe
   Weniger Effekt, mehr Haltung: flache Flächen, Haarlinien,
   ruhiges Licht, präzise Kanten, zurückhaltende Bewegung.
   ============================================================ */

/* ---------- 26.1 Grund & Licht ---------- */
body::before {
  inset: -20vh -10vw;
  background:
    radial-gradient(46vw 42vh at 12% 2%,  rgba(242,84,27,.075), transparent 64%),
    radial-gradient(38vw 38vh at 88% 30%, rgba(242,84,27,.028), transparent 66%);
  animation-duration: 48s;
}
body::after { opacity: .019; }

/* ---------- 26.2 Typografie ---------- */
h1, h2, h3, h4 { font-weight: 400; }
.h-display { font-weight: 400; letter-spacing: -.045em; line-height: .95; }
.h1        { font-weight: 400; letter-spacing: -.038em; }
.h2        { font-weight: 400; letter-spacing: -.032em; }
.h3        { font-weight: 500; letter-spacing: -.022em; font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.h4        { font-weight: 500; }

.lead {
  font-size: clamp(1rem, 1.15vw, 1.075rem);
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 54ch;
}

.eyebrow {
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--muted);
  gap: .75em;
}
.eyebrow::before { width: 4px; height: 4px; margin-top: .62em; }

.italic-accent { color: var(--fg); font-style: italic; opacity: .96; }
.hero__title .italic-accent {
  padding-right: .06em;
  color: var(--accent);
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--ink-rgb),.66);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.header.is-stuck::before { opacity: 1; }
.header.is-stuck { background: transparent; border-bottom-color: transparent; }

.logo { font-weight: 500; font-size: 1rem; letter-spacing: -.02em; }
.logo__mark { width: 22px; height: 22px; }
.logo:hover .logo__mark { transform: none; }

.nav { gap: 0; }
.nav a { padding: .5rem .9rem; font-size: .8125rem; letter-spacing: -.005em; border-radius: 6px; }
.nav__pill { height: 30px; border-radius: 6px; background: rgba(255,255,255,.055); }
.nav a[aria-current="page"]::after {
  left: 50%; right: auto; bottom: .3rem;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 26.4 Buttons: flach, präzise, ohne Glanz ---------- */
.btn {
  border-radius: 8px;
  padding: .82rem 1.35rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: -.005em;
  box-shadow: none;
}
.btn::before { display: none; }
.btn--lg { padding: 1rem 1.7rem; font-size: .875rem; }
.btn:hover { --my: -1px; }

.btn--accent {
  --btn-bg: var(--fg);
  --btn-fg: var(--ink);
  background-image: none;
  box-shadow: none;
}
.btn--accent:hover { --btn-bg: #FFFFFF; box-shadow: none; }

.btn--ghost {
  border-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn--ghost:hover { --btn-bg: transparent; border-color: var(--line-strong); box-shadow: none; }

.link-arrow {
  font-size: .69rem;
  letter-spacing: .16em;
  color: var(--fg-dim);
  border-bottom-color: var(--line);
}
.link-arrow:hover { color: var(--fg); border-color: transparent; }
.link-arrow::before { background: var(--fg); }

.burger { border-radius: 8px; border-color: var(--line); }

/* ---------- 26.5 Karten entmaterialisieren ---------- */
.pillar, .feature, .quote, .member, .plan {
  background: transparent;
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  transform: translate3d(0, var(--lift, 0px), 0);
  transition: border-color .45s var(--ease-out), transform .45s var(--ease-out),
              background .45s var(--ease-out);
}
.pillar:hover, .feature:hover, .quote:hover, .member:hover, .plan:hover {
  --lift: -2px;
  background: rgba(255,255,255,.018);
  border-color: var(--line-strong);
  box-shadow: none;
}
/* Lichtkegel und 3-D-Neigung entfallen */
.pillar::after, .feature::after, .work::after,
.quote::after, .member::after, .plan::after { display: none; }
.pillar::before { background: var(--accent); height: 1px; }

.feature { gap: .55rem; padding: clamp(1.5rem, 2.4vw, 2rem); }
.feature__icon {
  width: 22px; height: 22px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--fg-dim);
  margin-bottom: .9rem;
}
.feature:hover .feature__icon { transform: none; border-color: transparent; color: var(--accent); }
.feature p { font-size: .89rem; line-height: 1.65; }

.pillar { gap: 1.9rem; }
.pillar__num { color: var(--muted); letter-spacing: .18em; font-size: .66rem; }
.pillar__list li { font-size: .875rem; padding: .78rem 0; }
.pillar__list li svg { color: var(--muted); opacity: 1; }

.quote { background: transparent; }
.quote__avatar { background: transparent; border-color: var(--line); color: var(--fg-dim); }
.stars { color: var(--fg-dim); }

/* ---------- 26.6 Arbeiten: Bild führt, Rahmen tritt zurück ---------- */
.work {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  transform: translate3d(0, var(--lift, 0px), 0);
  transition: transform .5s var(--ease-out);
}
.work:hover { --lift: -3px; border-color: transparent; }
.work__media {
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.work__media::after { background: linear-gradient(180deg, transparent 42%, rgba(var(--ink-rgb),.9) 100%); }
.work:hover .work__media img, .work:hover .work__media video { transform: scale(1.035); filter: none; }
.work__media img, .work__media video { filter: none; }
.work__info { padding: clamp(1.1rem, 2vw, 1.5rem); }
.work__info .h3 { font-weight: 500; }
.work:hover .work__info { transform: none; }
.work__play {
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: var(--fg);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tag {
  border-radius: 4px;
  border-color: var(--line);
  background: rgba(var(--ink-rgb),.55);
  font-size: .6rem;
  letter-spacing: .13em;
  padding: .28rem .55rem;
}

/* ---------- 26.7 Prozess, Standorte, FAQ ---------- */
.step::before { display: none; }
.step:hover { background: transparent; }
.section--alt .step:hover { background: transparent; }
.step__num { color: var(--muted); letter-spacing: .16em; font-size: .7rem; }
.step:hover .step__num { transform: none; color: var(--accent); }
.step__body { font-size: .9rem; }
.steps { background: transparent; gap: 0; }
.steps .step + .step { border-top: 1px solid var(--line); }
.step { background: transparent !important; }

.geo__list li {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 6px;
  padding: .45rem .8rem;
}
.geo__list li:hover { background: transparent; border-color: var(--line-strong); color: var(--fg); transform: none; }

.faq__q { font-weight: 400; letter-spacing: -.025em; }
.faq__q:hover { color: var(--fg); padding-left: 0; }
.faq__q[aria-expanded="true"] { color: var(--fg); }
.faq__q .faq__icon { color: var(--muted); }

/* ---------- 26.8 CTA, Formular, Footer ---------- */
.cta {
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  border-color: var(--line);
  box-shadow: none;
}
.cta::after {
  top: auto; bottom: -70%; right: -8%;
  width: 44%;
  background: radial-gradient(circle, rgba(242,84,27,.14), transparent 64%);
  animation: none;
}
.section--alt::before { background: var(--line); }

.field input, .field textarea, .field select {
  background: transparent;
  border-radius: 8px;
  border-color: var(--line);
  font-size: .9rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--line-strong);
  background: rgba(255,255,255,.02);
  box-shadow: none;
}
.footer { background: transparent; }
.footer__col a:hover { color: var(--fg); transform: none; }

/* ---------- 26.9 Marquee als stille Kundenzeile ---------- */
.marquee { padding-block: 1.15rem; border-block-color: var(--line); }
.marquee__group { gap: clamp(2rem, 4vw, 3.4rem); padding-right: clamp(2rem, 4vw, 3.4rem); }
.marquee__group span {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}
.marquee__group span:hover { color: var(--fg-dim); transform: none; }
.marquee__group i { color: var(--line-strong); font-size: .5em; }
.marquee__group { transform: none; }

/* ---------- 26.10 Hero ---------- */
.hero__bg::after {
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb),.8) 0%, rgba(var(--ink-rgb),.5) 40%, rgba(var(--ink-rgb),.98) 100%),
    radial-gradient(900px 620px at 80% 8%, rgba(242,84,27,.09), transparent 68%);
}
.hero__bg img, .hero__bg video { animation: none; }
.hero__title { margin-block: 1.4rem 1.8rem; }
.hero__locations li::before { background: var(--line-strong); }
.hero__locations li:first-child::before { background: var(--accent); }

/* ---------- 26.11 Bewegung: knapp, ohne Weichzeichner ---------- */
[data-reveal] {
  transform: translate3d(0, 16px, 0);
  filter: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-in { filter: none; }
.hero__inner > .eyebrow, .hero__inner > .lead,
.hero__inner > .btn-row, .hero__inner > .hero__meta { animation-duration: .85s; }
@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
.split-text .word > i { transition-delay: calc(var(--i, 0) * 26ms); }

/* Wortlicht abgeschaltet — Text bleibt lesbar */
.fade-words > i { opacity: 1 !important; }

/* ---------- 26.12 Cursor & Randelemente ---------- */
.progress { height: 1px; background: rgba(255,255,255,.42); }
.cursor { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-color: rgba(255,255,255,.22); }
.cursor-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
body.cursor-link .cursor { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
body.cursor-media .cursor {
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  background: rgba(var(--ink-rgb),.5);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.cursor-media .cursor span { color: var(--fg); font-size: .55rem; }

.rail { right: 26px; gap: 13px; }
.rail__dot::after { width: 6px; background: rgba(255,255,255,.18); }
.rail__dot:hover::after { width: 14px; background: rgba(255,255,255,.45); }
.rail__dot.is-active::after { width: 18px; background: var(--fg); }
.rail__dot span { border-radius: 5px; background: rgba(var(--ink-rgb),.85); font-size: .58rem; }

/* ---------- 26.13 Innere Seiten ---------- */
.page-hero::before { background: radial-gradient(780px 460px at 12% 0%, rgba(242,84,27,.08), transparent 68%); }
.split__media { border-radius: var(--radius-lg); }
.plan__badge { border-radius: 5px; }
.plan.is-featured { border-color: var(--line-strong); background: rgba(255,255,255,.022); }
.skip-link { border-radius: 6px; }
.prose p, .prose li { font-size: .93rem; line-height: 1.75; }

/* ---------- 26.14 Feinschliff Raum ---------- */
.sec-head { margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.sec-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.pillars, .works { gap: clamp(1rem, 1.6vw, 1.25rem); }
.feature-grid { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature { border: 0; border-radius: 0; background: transparent; }
.feature + .feature { border-left: 1px solid var(--line); }
.feature:hover { background: rgba(255,255,255,.022); }

@media (max-width: 1080px) {
  .feature-grid > .feature:nth-child(odd) { border-left: 0; }
  .feature-grid > .feature:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .feature + .feature { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- 26.15 Preistafeln & Listen ---------- */
.plan li svg { color: var(--muted); }
.plan__badge {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(242,84,27,.4);
  letter-spacing: .16em;
}
.plan__price, .plan h3 { font-weight: 400; }
.check input { accent-color: var(--fg); }
.todo {
  background: transparent;
  border-style: solid;
  border-color: var(--line-strong);
  color: var(--muted);
  border-radius: 4px;
}
.mobile-nav ul a { font-weight: 400; letter-spacing: -.04em; }
.mobile-nav ul a span { font-size: .64rem; letter-spacing: .16em; }

/* ============================================================
   27. NORDVOGEL LAYER — heller, kühler, Glas & Nordlicht
   ============================================================ */

/* ---------- 27.1 Palette: angehoben und kühl statt neutralschwarz ---------- */
:root {
  --ink-rgb:     13, 16, 23;
  --ink:         #0A0C11;

  --bg:          #212936;
  --bg-alt:      #262F3D;
  --surface:     #2C3648;
  --surface-2:   #354052;

  --line:        rgba(198,214,240,.15);
  --line-strong: rgba(198,214,240,.31);

  --fg:          #F6F8FC;
  --fg-dim:      #C6CDDA;
  --muted:       #99A3B5;

  --accent:      #F2541B;
  --accent-2:    #FF9152;
  --accent-soft: rgba(242,84,27,.11);

  /* Nordtöne — tragen Licht, Kanten und die Vogel-Andeutung */
  --nord:        #5EA8FF;
  --nord-2:      #7FE3E0;
  --glass:       rgba(255,255,255,.055);
  --glass-line:  rgba(255,255,255,.11);

  --shadow-md:   0 18px 44px -30px rgba(0,0,0,.75);
  --shadow-lg:   0 44px 96px -54px rgba(0,0,0,.85);
}

html { background: var(--bg); }

/* ---------- 27.2 Nordlicht — kühles Ambiente, mehr Wanderung ---------- */
body::before {
  background:
    radial-gradient(50vw 48vh at 10% 2%,  rgba(94,168,255,.26),  transparent 64%),
    radial-gradient(44vw 42vh at 90% 16%, rgba(127,227,224,.17), transparent 66%),
    radial-gradient(40vw 40vh at 76% 72%, rgba(242,84,27,.15),   transparent 66%),
    radial-gradient(58vw 52vh at 28% 98%, rgba(120,132,255,.15), transparent 68%);
  filter: blur(14px);
  animation: nordlicht 34s var(--ease-inout) infinite alternate;
}
@keyframes nordlicht {
  0%   { transform: translate3d(0, 0, 0)        scale(1)    rotate(0deg); }
  33%  { transform: translate3d(2.5%, -2.5%, 0) scale(1.08) rotate(1.2deg); }
  66%  { transform: translate3d(-2%, 1.5%, 0)   scale(1.05) rotate(-1deg); }
  100% { transform: translate3d(1.5%, 2.5%, 0)  scale(1.09) rotate(.6deg); }
}

/* ---------- 27.4 Hero: gerichteter Scrim statt flächiger Abdunklung ---------- */
/* Links trägt er die Typo, rechts lässt er Nordlicht und Formation durch. */
.hero__bg::after {
  background:
    linear-gradient(100deg, rgba(var(--ink-rgb),.66) 0%, rgba(var(--ink-rgb),.24) 48%, transparent 100%),
    linear-gradient(180deg, transparent 58%, rgba(var(--ink-rgb),.55) 100%),
    radial-gradient(900px 620px at 80% 14%, rgba(94,168,255,.16), transparent 66%);
}

/* ---------- 27.5 Glas & Unschärfe ---------- */
.header.is-stuck .header__inner {
  background: rgba(33,39,52,.5);
  border-color: var(--glass-line);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
}
.pillar, .work, .member, .quote, .plan {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.feature-grid { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.feature:hover { background: rgba(255,255,255,.05); }
.plan.is-featured { background: rgba(255,255,255,.07); border-color: var(--line-strong); }
.mobile-nav { background: rgba(21,25,34,.84); backdrop-filter: blur(32px) saturate(170%); -webkit-backdrop-filter: blur(32px) saturate(170%); }
.btn--ghost { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ---------- 27.6 Mehr Motion ---------- */
.pillar, .work, .member, .quote, .plan {
  transition: transform .7s var(--ease-out), background .5s var(--ease),
              border-color .5s var(--ease), box-shadow .7s var(--ease-out);
}
.pillar:hover, .work:hover, .member:hover, .quote:hover, .plan:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--shadow-lg);
  border-color: rgba(94,168,255,.32);
  background: rgba(255,255,255,.07);
}

/* Reveals kommen weicher und tiefer aus der Unschärfe */
[data-reveal] {
  transform: translate3d(0, 38px, 0) scale(.988);
  filter: blur(13px);
  transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out), filter 1.05s var(--ease-out);
}
[data-reveal].is-in { transform: none; filter: none; }

@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(14px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.split-text .word > i { transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--i, 0) * 42ms); }

/* ---------- 27.7 Feinschliff: klarer, ruhiger ---------- */
body::after { opacity: .019; }            /* Grain zurücknehmen — sauberer */
.progress { background: linear-gradient(90deg, var(--nord), var(--accent)); height: 2px; }
.eyebrow::before { background: var(--nord); }
.section--alt { background: rgba(255,255,255,.018); }

/* ---------- 27.8 Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ============================================================
   28. WORTMARKE
   Der Vogel lebt nur noch in der Marke – nicht mehr im Hintergrund.
   ============================================================ */

/* ---------- 28.1 Wortmarke: leichter Auftrieb beim Hover ---------- */
.logo__mark {
  transition: transform .55s var(--ease-out);
  transform-origin: 60% 60%;
}
.logo:hover .logo__mark { transform: translate3d(2px, -3px, 0) rotate(-8deg); }

/* ---------- 28.2 CTA: Licht statt Wasserzeichen ---------- */
.cta > * { position: relative; z-index: 1; }

/* ---------- 28.5 Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo__mark { transform: none; }
}

/* ============================================================
   29. HOCHFORMAT — 9:16 für Reels, Shorts und TikTok
   ============================================================ */

.reels__rail {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.4rem);
  padding-block: 10px;
  overflow: hidden;
  /* Kanten ausblenden, damit das Band nicht abgeschnitten wirkt */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reels__track {
  display: flex;
  gap: clamp(13px, 1.3vw, 20px);
  width: max-content;
  animation: reelzug 68s linear infinite;
  will-change: transform;
}
.reels__rail:hover .reels__track,
.reels__rail:focus-within .reels__track { animation-play-state: paused; }
/* Der Track wird per JS verdoppelt — daher exakt -50% für den nahtlosen Umlauf */
@keyframes reelzug { to { transform: translate3d(-50%, 0, 0); } }

.reel {
  flex: none;
  width: clamp(184px, 16.5vw, 262px);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .6s var(--ease-out), border-color .45s var(--ease),
              box-shadow .6s var(--ease-out);
}
.reel:hover {
  transform: translate3d(0, -10px, 0) scale(1.025);
  border-color: rgba(94,168,255,.4);
  box-shadow: var(--shadow-lg);
}

.reel__media {
  position: relative;
  aspect-ratio: 9 / 16;      /* das Format, um das es geht */
  overflow: hidden;
  background: linear-gradient(155deg, var(--surface-2) 0%, var(--surface) 100%);
}
.reel__media video, .reel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.reel:hover .reel__media video { transform: scale(1.06); }
.reel__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(var(--ink-rgb),.9) 100%);
  pointer-events: none;
}

/* Platzhalter, solange keine Datei hinterlegt ist */
.reel__placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .6rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--muted);
}

.reel__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: grid;
  gap: .3rem;
  padding: 1rem 1.05rem 1.1rem;
}
.reel__platform {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--fg);
  padding: .3rem .55rem;
  border-radius: 5px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.reel__title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  .reels__track { animation: none; }
  .reels__rail { overflow-x: auto; }
}

/* Kopf und Band enger zusammen, Karten etwas größer für mehr Präsenz */
.reels .sec-head { margin-bottom: clamp(.5rem, 1.2vw, 1.2rem); }
.reel { width: clamp(206px, 18.5vw, 296px); }

/* ---------- 29.1 Hochformat-Trio in den Split-Sektionen ---------- */
.reel-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 1vw, 15px);
  align-items: start;
}
/* Leichter Treppenversatz — nimmt der Reihe das Statische */
.reel-stack__item:nth-child(1) { transform: translateY(16px); }
.reel-stack__item:nth-child(3) { transform: translateY(-16px); }
.reel-stack__item {
  margin: 0;
  transition: transform .6s var(--ease-out);
}
.reel-stack__item .reel__media {
  border-radius: 13px;
  border: 1px solid var(--line);
  transition: border-color .45s var(--ease), box-shadow .6s var(--ease-out);
}
.reel-stack__item:hover .reel__media {
  border-color: rgba(94,168,255,.4);
  box-shadow: var(--shadow-lg);
}
.reel-stack__item:nth-child(1):hover { transform: translateY(8px); }
.reel-stack__item:nth-child(2):hover { transform: translateY(-8px); }
.reel-stack__item:nth-child(3):hover { transform: translateY(-24px); }
.reel-stack figcaption {
  margin-top: .7rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 560px) {
  .reel-stack { gap: 8px; }
  .reel-stack__item:nth-child(1),
  .reel-stack__item:nth-child(3) { transform: none; }
  .reel-stack figcaption { font-size: .52rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-stack__item, .reel-stack__item:hover { transform: none; }
}

/* ============================================================
   30. PERFORMANCE
   Der Trägheits-Scroll verschiebt <main> pro Frame per transform.
   Jedes backdrop-filter darin zwingt den Compositor, seinen
   Hintergrund bei jedem Frame neu abzutasten und weichzuzeichnen.
   Deshalb bleibt der Effekt nur dort, wo er etwas leistet:
   auf Ebenen, die ÜBER bewegtem Inhalt liegen.
   ============================================================ */

.pillar, .work, .member, .quote, .plan, .feature-grid, .reel,
.reel-stack__item .reel__media, .split__media,
.btn, .btn--ghost, .tag, .work__play, .reel__platform, .todo, .plan__badge {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Glaswirkung ohne Blur halten: etwas mehr Eigenfläche statt Abtastung */
.pillar, .work, .member, .quote, .plan, .feature-grid, .reel {
  background: rgba(255,255,255,.055);
}
.reel__platform { background: rgba(20,24,32,.82); }

/* Vollflächiges, animiertes filter:blur() muss jeden Frame neu
   gerastert werden. Die Verläufe sind ohnehin weich — der Filter
   kostet viel und bringt visuell fast nichts. */
body::before { filter: none; }

/* Dem Compositor sagen, dass diese Ebenen für sich stehen */
.reels__rail { contain: paint; }
.reel, .reel-stack__item { contain: layout paint; }

/* ============================================================
   31. HERO — Bewegtbild, Nordlicht und Sucher
   Der Hero trägt drei wiedererkennbare Zeichen: das Nordlicht,
   den Sucher-Rahmen und den Lichtstrich in der Diagonale.
   Alle drei kehren weiter unten auf der Seite wieder.
   ============================================================ */

.hero {
  --mx: 0;                       /* Zeigerposition, von main.js geglättet */
  --my: 0;
  min-height: clamp(680px, 100svh, 1060px);
  isolation: isolate;
}

/* Die Ebenen laufen dem Zeiger unterschiedlich schnell nach – daraus
   entsteht Tiefe, ohne dass sich etwas sichtbar bewegt.
   translate steht bewusst getrennt von transform, sonst würde es die
   Nordlicht-Animation überschreiben. */
.hero__aurora { translate: calc(var(--mx) * -26px) calc(var(--my) * -18px); }
.hero__weave  { translate: calc(var(--mx) *  13px) calc(var(--my) *   9px); }
.hero__video  { translate: calc(var(--mx) * -10px) calc(var(--my) *  -7px); }
.hero__bg {
  overflow: hidden;
  background:
    linear-gradient(162deg, #27344C 0%, #1B2436 52%, #141B27 100%);
}
/* Der Scrim ist jetzt ein eigenes Element und liegt über dem Film */
.hero__bg::after { content: none; }

/* ---------- 31.1 Nordlicht: die Grundstimmung ---------- */
.hero__aurora {
  position: absolute;
  inset: -14%;
  background:
    radial-gradient(44% 42% at 26% 24%, rgba(94,168,255,.78),  transparent 68%),
    radial-gradient(36% 34% at 78% 12%, rgba(127,227,224,.50), transparent 70%),
    radial-gradient(46% 44% at 72% 84%, rgba(242,84,27,.46),   transparent 70%),
    radial-gradient(52% 48% at 2%  94%, rgba(122,138,255,.44), transparent 72%);
  filter: saturate(1.12);
  animation: heroAurora 46s var(--ease-inout) infinite alternate;
  will-change: transform;
}
@keyframes heroAurora {
  0%   { transform: translate3d(0, 0, 0)       scale(1)    rotate(0deg); }
  50%  { transform: translate3d(3%, -2%, 0)    scale(1.10) rotate(2deg); }
  100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.06) rotate(-1.6deg); }
}

/* ---------- 31.2 Raster: feine Linien in der Signatur-Diagonale ---------- */
.hero__weave {
  position: absolute;
  inset: -10%;
  background:
    repeating-linear-gradient(104deg,
      rgba(255,255,255,.085) 0 1px,
      transparent 1px 52px);
  -webkit-mask-image: radial-gradient(78% 66% at 62% 34%, #000 12%, transparent 76%);
          mask-image: radial-gradient(78% 66% at 62% 34%, #000 12%, transparent 76%);
  opacity: .9;
}

/* ---------- 31.3 Der Film ---------- */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;                       /* erst sichtbar, wenn er wirklich läuft */
  transform: scale(1.04);
  transition: opacity 1.6s var(--ease-out), transform 2.4s var(--ease-out);
}
.hero.is-live .hero__video { opacity: 1; transform: none; }

/* Läuft ein Film, tritt das Nordlicht zurück und wird zur Färbung */
.hero.is-live .hero__aurora { opacity: .5; mix-blend-mode: screen; }
.hero.is-live .hero__weave  { opacity: .5; }

/* ---------- 31.4 Scrim: links tragend, rechts durchlässig ---------- */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg,  rgba(var(--ink-rgb),.74) 0%, rgba(var(--ink-rgb),.34) 38%, transparent 76%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.50) 0%, transparent 24%, transparent 46%, rgba(var(--ink-rgb),.70) 100%);
}

/* ---------- 31.5 Lichtstrich: die eine Bewegung, die bleibt ---------- */
.hero__beam {
  position: absolute;
  inset: -30% -60%;
  background: linear-gradient(104deg,
    transparent 42%,
    rgba(190,222,255,.11) 49%,
    rgba(255,255,255,.20) 50%,
    rgba(190,222,255,.11) 51%,
    transparent 58%);
  animation: heroBeam 13s var(--ease-inout) infinite;
  will-change: transform, opacity;
}
@keyframes heroBeam {
  0%,  62%, 100% { transform: translate3d(-58%, 0, 0); opacity: 0; }
  70%            { opacity: .85; }
  92%            { transform: translate3d(58%, 0, 0);  opacity: 0; }
}

/* ---------- 31.6 Sucher-Rahmen ---------- */
.viewfinder {
  position: absolute;
  inset: clamp(14px, 1.6vw, 26px);
  pointer-events: none;
  z-index: 2;
}
.viewfinder span {
  position: absolute;
  width: clamp(20px, 2.4vw, 38px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.26);
}
.viewfinder span:nth-child(1) { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.viewfinder span:nth-child(2) { top: 0;    right: 0;   border-left: 0;  border-bottom: 0; }
.viewfinder span:nth-child(3) { bottom: 0; left: 0;    border-right: 0; border-top: 0; }
.viewfinder span:nth-child(4) { bottom: 0; right: 0;   border-left: 0;  border-top: 0; }

.viewfinder--hero {
  inset: clamp(84px, 9vh, 108px) clamp(16px, 2vw, 34px) clamp(16px, 2vw, 34px);
}
.viewfinder--hero span { border-color: rgba(255,255,255,.28); }
.viewfinder--hero span:nth-child(4) { border-color: rgba(242,84,27,.85); }

@keyframes heroRec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,84,27,.5); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(242,84,27,0); opacity: .55; }
}

/* Der Ton-Schalter erscheint nur, wenn tatsächlich ein Film läuft */
.hero__sound { display: none; cursor: pointer; transition: color .35s var(--ease), border-color .35s var(--ease); }
@keyframes heroEq { from { height: 3px; } to { height: 10px; } }

/* ---------- 31.8 Standortstempel an der linken Kante ---------- */
.hero__inner::before {
  content: 'Hamburg · 53°33′N 10°00′E';
  position: absolute;
  left: -2.9rem;
  bottom: 8.5rem;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .55;
  pointer-events: none;
}
@media (max-width: 1400px) { .hero__inner::before { display: none; } }

/* ---------- 31.9 Typo: Unterlängen brauchen Luft ---------- */
/* line-height .95 schneidet das g in „Wirkung“ – die Zeilenmaske
   bekommt deshalb unten deutlich mehr Spielraum. */
.hero__title .line {
  padding-bottom: .42em;
  margin-bottom: -.42em;
}
/* Frueher lag hier ein wandernder Farbverlauf per background-clip:text.
   Safari beschneidet die Schriftfuellung dabei auf die Zeilenbox — die
   Unterlaenge des g wird flach abgeschnitten. Deshalb: einfarbig. */
.hero__title .italic-accent {
  padding-right: .06em;
  color: var(--accent);
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
}

/* ---------- 31.10 Kante zum nächsten Abschnitt ---------- */
/* Filmkorn: im Hero etwas kräftiger als auf dem Rest der Seite */
.hero__scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(242,84,27,.55) 18%, rgba(94,168,255,.4) 52%, transparent);
  z-index: 2;
}

/* ---------- 31.11 Kleine Schirme ---------- */
@media (max-width: 900px) {
  .hero { min-height: clamp(620px, 92svh, 900px); }
}
@media (max-width: 640px) {
  .viewfinder--hero { inset: 74px 10px 10px; }
  .viewfinder--hero span { width: 18px; }
}

/* ---------- 31.12 Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__aurora, .hero__beam, .hero__rec, .hero__eq i { animation: none; }
  .hero__aurora, .hero__weave, .hero__video { translate: none; }
  .hero__beam { opacity: 0; }
  .hero__video { transition: none; }
}

/* ============================================================
   32. ARBEITEN — vier Beispiele: ein Leitprojekt, drei Belege
   ============================================================ */

.works--four {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.works--four .work { grid-column: span 2; }
.works--four .work--wide { grid-column: span 6; }
.works--four .work--wide .work__media { aspect-ratio: 21 / 9; }
.works--four .work:not(.work--wide) .work__media { aspect-ratio: 4 / 3; }

@media (max-width: 900px) {
  .works--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works--four .work { grid-column: span 1; }
  .works--four .work--wide { grid-column: span 2; }
  .works--four .work--wide .work__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .works--four { grid-template-columns: 1fr; }
  .works--four .work--wide { grid-column: span 1; }
}

/* ============================================================
   33. SIGNATUR IM SEITENVERLAUF
   Sucher und Nordlicht tauchen unten wieder auf, damit der Hero
   nicht wie ein Fremdkörper über dem Rest der Seite steht.
   ============================================================ */

.cta { position: relative; }
.cta .viewfinder { inset: clamp(12px, 1.4vw, 20px); }
.cta .viewfinder span { border-color: rgba(255,255,255,.18); }
.cta .viewfinder span:nth-child(4) { border-color: rgba(242,84,27,.55); }


/* ============================================================
   34. RESPONSIVE KORREKTUREN
   Abschnitt 26.14 setzt .sec-head--split nach der 900px-Abfrage
   erneut auf zwei Spalten. Auf dem Telefon quetscht das Überschrift
   und Fließtext nebeneinander — die Korrektur muss deshalb hier
   ganz am Ende stehen.
   ============================================================ */

@media (max-width: 900px) {
  .sec-head--split { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ============================================================
   35. WEICHE ÜBERGÄNGE
   Die Abschnitte stießen bisher mit einer harten Haarlinie
   aneinander. Statt einer Kante blendet der helle Streifen jetzt
   oben und unten aus — man sieht den Wechsel, aber keinen Strich.
   ============================================================ */

/* Die alte Trennlinie über jedem hellen Abschnitt entfällt ersatzlos */
.section--alt::before { content: none; }

/* Der helle Streifen bekommt weiche Enden statt Kanten */
.section--alt {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.026) 12%,
    rgba(255,255,255,.026) 88%,
    transparent 100%);
}

/* Laufband: die beiden Rahmenlinien laufen zu den Seiten hin aus */
.marquee {
  border-block: 0;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), var(--line), transparent);
  opacity: .8;
}
.marquee::before { top: 0; }
.marquee::after  { bottom: 0; }

/* Hero: kein Strich mehr, sondern ein Lichtsaum, der in das
   Laufband ausläuft */
/* Der Inhalt bleibt über dem unteren Saum — sonst legt sich der
   Verlauf bei hellem Filmmaterial über Orte und Scroll-Hinweis. */
.hero__inner { z-index: 2; }

.hero::after {
  height: clamp(100px, 14vh, 170px);
  background: linear-gradient(180deg, transparent, var(--bg));
  opacity: .92;
  z-index: 1;
}

/* Der Statement-Abschnitt schließt direkt an das Laufband an und
   trägt den Übergang mit einem eigenen, sehr weichen Lichtsaum */
.section--statement::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: clamp(120px, 18vh, 220px);
  background: linear-gradient(180deg, rgba(94,168,255,.055), transparent);
  pointer-events: none;
}

/* ============================================================
   36. HOCHFORMAT-BAND — Mitte nach vorn, nichts mehr abgeschnitten
   ============================================================ */

/* Die Rail schnitt die angehobene Karte oben ab: overflow:hidden
   und contain:paint klippen an der Polsterkante, und 10px reichten
   für Anheben plus Vergrößerung nicht. */
.reels__rail { padding-block: 48px 30px; }

@property --focus { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --hover { syntax: '<number>'; inherits: false; initial-value: 0; }

/* --focus setzt main.js pro Bild: 1 in der Bildmitte, 0 am Rand.
   Die mittlere Karte wächst, die äußeren treten zurück — dadurch
   bleibt die Gesamtbreite gleich und nichts überlappt. */
.reel {
  --focus: 0;
  --hover: 0;
  transform:
    translate3d(0, calc(var(--focus) * -14px + var(--hover) * -6px), 0)
    scale(calc(.925 + var(--focus) * .135 + var(--hover) * .025));
  transition:
    --hover .5s var(--ease-out),
    border-color .45s var(--ease),
    box-shadow .6s var(--ease-out),
    filter .5s var(--ease);
  filter: brightness(calc(.78 + var(--focus) * .22));
  will-change: transform;
}
.reel:hover { --hover: 1; }

/* Die Regel aus Abschnitt 29 setzte hier noch ihr eigenes transform */
.reel:hover {
  transform:
    translate3d(0, calc(var(--focus) * -14px + var(--hover) * -6px), 0)
    scale(calc(.925 + var(--focus) * .135 + var(--hover) * .025));
  border-color: rgba(94,168,255,.4);
  box-shadow: var(--shadow-lg);
}

/* Die vordere Karte bekommt zusätzlich Kante und Schatten */
.reel { box-shadow: 0 calc(var(--focus) * 30px) calc(var(--focus) * 60px) calc(var(--focus) * -34px) rgba(0,0,0,.85); }

@media (prefers-reduced-motion: reduce) {
  .reel { --focus: 1; filter: none; transform: none; }
  .reel:hover { transform: none; }
  .reels__rail { padding-block: 10px; }
}

/* ---------- 36.1 404: Wege statt Sackgasse ---------- */
.notfound-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.notfound-links a {
  display: block;
  padding: 1.1rem 1.3rem;
  background: var(--bg);
  color: var(--fg-dim);
  font-size: .95rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.notfound-links a:hover,
.notfound-links a:focus-visible { background: rgba(255,255,255,.04); color: var(--fg); }

/* ============================================================
   37. TIPPZIELE
   Alleinstehende Links lagen bei 16–23 px Höhe und damit unter
   der 24-px-Grenze aus WCAG 2.2 (2.5.8). Links mitten im Fließtext
   sind davon ausgenommen und bleiben, wie sie sind.
   ============================================================ */

.crumb a,
.footer__legal a,
.footer__col a,
.mn-contact,
.link-arrow,
.notfound-links a,
.check span a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;      /* 26 statt 24, damit Rundung nie darunter fällt */
}
.crumb { align-items: center; }
.check span a { min-height: 0; }        /* liegt im Satz, das Label trägt das Ziel */
.check label, .check { min-height: 24px; }

/* ---------- 37.1 Kontrast der Kleinschrift ---------- */
/* Die Eyebrow-Zeilen lagen mit var(--muted) bei 4,22:1 und damit
   unter den 4,5:1, die WCAG für Text unter 24 px verlangt. */
.eyebrow,
.member__role,
.plan__badge { color: #ABB5C5; }
.eyebrow--plain { color: var(--muted); }   /* nur Ziffern, rein dekorativ */

/* ============================================================
   38. HOCHFORMAT ALS WISCHER
   Das Band läuft nicht mehr von selbst um. Man zieht es zur Seite,
   es rastet Karte für Karte ein, und die Karte in der Mitte tritt
   nach vorn — sie ist der Titel des Bandes.
   ============================================================ */

.reels__rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reels__rail::-webkit-scrollbar { width: 0; height: 0; }

/* Beim Ziehen muss das Einrasten aus — sonst kämpft es gegen die Hand.
   Beim Loslassen kommt es zurück und die nächste Karte rastet ein. */
.reels__rail.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.reels__rail.is-grabbing .reel { pointer-events: none; }

/* Während der Selbstlauf zieht, gilt dasselbe: erst am Ende der
   Bewegung darf wieder eingerastet werden. */
.reels__rail.is-sliding { scroll-snap-type: none; }

.reels__track {
  animation: none;
  width: max-content;
  /* Polster an den Enden, damit auch die erste und die letzte Karte
     bis in die Bildmitte wandern können */
  padding-inline: max(var(--gut), calc(50vw - clamp(206px, 18.5vw, 296px) / 2));
}

.reel {
  scroll-snap-align: center;
  -webkit-user-drag: none;
}
.reel img, .reel video { -webkit-user-drag: none; pointer-events: none; }

/* ---------- 38.1 Die vordere Karte ---------- */
.reel.is-front { border-color: rgba(94,168,255,.42); }
.reel.is-front .reel__platform {
  background: var(--accent);
  color: var(--ink);
}
.reel.is-front .reel__title { font-size: 1.06rem; }
.reel__title { transition: font-size .45s var(--ease-out); }
.reel__platform { transition: background .45s var(--ease), color .45s var(--ease); }

/* ---------- 38.2 Bedienung unter dem Band ---------- */
.reels__navwrap { margin-top: clamp(1.3rem, 2.4vw, 2rem); }
.reels__nav { display: flex; align-items: center; gap: .8rem; }

.reels__arrow {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              background .35s var(--ease), opacity .35s var(--ease);
}
.reels__arrow:hover:not(:disabled) {
  color: var(--fg);
  border-color: var(--accent);
  background: rgba(242,84,27,.09);
}
.reels__arrow:disabled { opacity: .3; cursor: default; }

.reels__count {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--muted);
  margin-left: .5rem;
}
.reels__count b { color: var(--fg); font-weight: 400; }

.reels__hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.reels__hint::before,
.reels__hint::after {
  content: '';
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
.reels__hint::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
@media (max-width: 560px) { .reels__hint { display: none; } }

/* ---------- 38.3 Ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .reel__title, .reel__platform { transition: none; }
  /* Gleich große Karten, dafür bleibt das Wischen erhalten */
  .reel { --focus: 0; transform: none; filter: none; }
  .reel.is-front { border-color: var(--accent); }
}

/* ============================================================
   34. VIMEO — die Filme liegen im Vimeo-Konto, nicht im Ordner
   ------------------------------------------------------------
   Jede Kachel trägt ihre Video-ID als data-video. Sichtbar ist
   zuerst nur das Standbild von Vimeo; den Player hängt
   JavaScript erst ein, wenn die Kachel ins Bild kommt — und auf
   schmalen Geräten gar nicht, dort trägt das Standbild allein.
   Ein Klick öffnet den Film gross, mit Ton und Bedienung.
   ============================================================ */

/* ---------- 34.1 Standbild ---------- */
.work__poster,
.reel__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), opacity 1s var(--ease-out);
}
.work:hover .work__poster { transform: scale(1.045); }
.reel:hover .reel__poster { transform: scale(1.06); }

/* Läuft der Film, tritt das Standbild zurück — aber es bleibt
   stehen, damit beim Pausieren kein schwarzes Loch entsteht. */
.has-vplayer.is-playing .work__poster,
.has-vplayer.is-playing .reel__poster { opacity: 0; }

/* ---------- 34.2 Der eingehängte Player ----------
   Bewusst ohne z-index: der Verlauf in ::after liegt danach im
   Baum und bleibt so über dem Bild — die Schrift auf der Kachel
   behält ihren Grund. Der Rahmen nimmt keine Klicks an, damit
   die ganze Kachel ein Ziel bleibt.                            */
.vplayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  background: #000;
  pointer-events: none;
  transition: opacity 1.1s var(--ease-out);
}
/* Der Rahmen wird auf Deckung gerechnet, nicht eingepasst.
   Vimeo legt schwarze Balken um den Film, sobald der Rahmen ein
   anderes Seitenverhaeltnis hat als das Video — bei einer 21:9-Kachel
   mit 16:9-Film also oben und unten. Deshalb wird der Rahmen
   ueberdimensioniert und mittig beschnitten, genau wie ein
   object-fit: cover es mit einem Bild taete.
   Die Rechnung braucht die Masse des Containers, nicht des Fensters —
   dafuer ist container-type: size da. */
.vplayer { container-type: size; }
.vplayer iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;

  /* Querformat: 16:9 */
  width: 100cqw;
  height: calc(100cqw * 9 / 16);
  min-width: calc(100cqh * 16 / 9);
  min-height: 100cqh;
}
[data-video-ratio="9:16"] .vplayer iframe,
[data-hero-ratio="9:16"] .vplayer iframe {
  width: 100cqw;
  height: calc(100cqw * 16 / 9);
  min-width: calc(100cqh * 9 / 16);
  min-height: 100cqh;
}

/* Faellt container-type aus (aeltere Browser), traegt der alte Weg:
   eingepasst statt beschnitten — schlechter, aber nie kaputt. */
@supports not (container-type: size) {
  .vplayer iframe {
    top: 0; left: 0; transform: none;
    width: 100%; height: 100%;
    min-width: 0; min-height: 0;
  }
}
.has-vplayer.is-playing .vplayer { opacity: 1; }

/* ---------- 34.2b Hero-Standbild ----------
   Traegt den Hero, solange der Film nicht laeuft: auf dem Handy,
   bei „weniger Bewegung“ und in den ersten Sekunden. Bewusst
   zurueckgenommen — der Scrim darueber haelt die Schrift lesbar. */
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .78;   /* ein echtes Bild, kein Schleier — der Scrim traegt die Schrift */
  transition: opacity 1.4s var(--ease-out);
}
.hero.is-live .hero__poster { opacity: 0; }

/* ---------- 34.3 Hero-Film ----------
   Der Rahmen wird auf Deckung gerechnet: 16:9 über ein Fenster
   beliebiger Form, ohne schwarze Balken an den Rändern.        */
.hero__video {
  overflow: hidden;
  background: transparent;
}
.hero__video iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;      /* 16:9, an der Breite gemessen */
  min-width: 177.78vh;                /* … und an der Höhe, je nachdem */
  min-height: 100vh;
  border: 0;
  pointer-events: none;
}

/* ---------- 34.4 Abspielmarke auf den Hochformat-Karten ---------- */
.reel__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  z-index: 2;
  display: grid;
  place-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: #fff;
  background: rgba(20,20,22,.45);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.reel:hover .reel__play,
.reel.is-front .reel__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- 34.4b Hochformat-Trio auf den Leistungsseiten ----------
   Die Figur bleibt eine Figur (wegen figcaption), der Link liegt
   nur um das Bild — so bleibt die Bildunterschrift auswaehlbar. */
.reel-stack__link { display: block; }
.reel-stack__link .reel__play { width: 42px; height: 42px; }
.reel-stack__item:hover .reel__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- 34.5 Hochformat-Kacheln im Arbeiten-Raster ---------- */
.works--portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.works--portrait .work__media { aspect-ratio: 9 / 16; }
@media (max-width: 900px) { .works--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .works--portrait { grid-template-columns: 1fr; } }

/* ---------- 34.6 Der grosse Film: Overlay mit Ton und Bedienung ---------- */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease), visibility .32s;
}
.vmodal.is-open { opacity: 1; visibility: visible; }
.vmodal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8,8,10,.86);
  backdrop-filter: blur(14px) saturate(.7);
  -webkit-backdrop-filter: blur(14px) saturate(.7);
}
.vmodal__dialog {
  position: relative;
  width: min(1180px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-strong, rgba(255,255,255,.16));
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.985);
  transition: transform .4s var(--ease-out);
}
.vmodal.is-open .vmodal__dialog { transform: none; }
.vmodal--portrait .vmodal__dialog {
  aspect-ratio: 9 / 16;
  width: auto;
  height: min(84vh, 900px);
  max-width: 100%;
}
.vmodal__dialog iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmodal__close {
  position: absolute;
  top: clamp(.6rem, 2vw, 1rem);
  right: clamp(.6rem, 2vw, 1rem);
  z-index: 3;
  width: 42px; height: 42px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(20,20,22,.6);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .3s var(--ease), transform .3s var(--ease-out);
}
.vmodal__close:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.vmodal__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1rem, 3vw, 1.6rem);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.vmodal.is-open .vmodal__caption { opacity: 1; }
body.vmodal-open { overflow: hidden; }

/* Zeigt der Rechner „weniger Bewegung“ an oder ist das Fenster
   schmal, bleibt es beim Standbild — der Klick öffnet trotzdem. */
@media (prefers-reduced-motion: reduce) {
  .vplayer, .work__poster, .reel__poster, .vmodal, .vmodal__dialog { transition: none; }
}

/* ============================================================
   35. REDUKTION
   ------------------------------------------------------------
   Weniger Drumherum, gleiche Haltung. Was hier steht, nimmt
   Dekoration zurueck und laesst dafuer Inhalt, Typografie und
   Bewegtbild wirken. Die Regeln stehen bewusst am Ende: sie
   ueberschreiben Frueheres, ohne es zu zerreissen.
   ============================================================ */

/* ---------- 35.1 Hero: nur noch Film, Satz, zwei Wege ----------
   Sucherrahmen und Lichtkegel lagen ueber einem Film, der selbst
   schon genug erzaehlt. Beides faellt weg — die Ecken bleiben als
   Signatur unten am CTA erhalten, wo nichts mit ihnen konkurriert. */
.viewfinder--hero { display: none; }
.hero__beam { display: none; }

/* ---------- 35.2 Ueberschriften: Zeilen begrenzen ----------
   Ein Satz ueber fuenf Zeilen ist keine Ueberschrift mehr, sondern
   ein Absatz in Grossbuchstabenhoehe. Im geteilten Kopf bekommt er
   deshalb etwas weniger Groesse und ein festes Mass. */
.sec-head--split .sec-head__title .h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  max-width: 15ch;
}
.sec-head--split { align-items: start; }
.sec-head--split .lead { max-width: 46ch; }

/* ---------- 35.3 Leistungen: offene Spalten statt Kaesten ----------
   Zwei umrandete Karten nebeneinander sehen aus wie ein Formular.
   Die Rahmen fallen weg, eine Haarlinie trennt — das liest sich wie
   eine Doppelseite und laesst die beiden Disziplinen gleichwertig
   nebeneinander stehen, statt sie einzusperren. */
.pillars {
  gap: 0;
  border-top: 1px solid var(--line);
}
.pillar {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: clamp(2rem, 3.4vw, 3.2rem) clamp(1.5rem, 2.8vw, 2.6rem);
  gap: 1.5rem;
  transition: none;
}
.pillar:first-child { border-left: 0; padding-left: 0; }
.pillar:last-child  { padding-right: 0; }
.pillar:hover {
  background: transparent;
  border-color: var(--line);
  transform: none;
}
.pillar::before { display: none; }

/* Die Ordnungszahl traegt die Sektion optisch */
.pillar__num {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Gross genug, dass die beiden Disziplinen die Sektion tragen —
   die Typografie ist hier das Gestaltungsmittel, nicht der Rahmen. */
.pillar__head .h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: .98;
  transition: color .4s var(--ease);
}
.pillar:hover .pillar__head .h2 { color: var(--accent); }

/* Eine Linie, die beim Ueberfahren aufzieht: der einzige Effekt,
   den die Spalte braucht. */
.pillar__num { position: relative; padding-top: 1.1rem; display: block; }
.pillar__num::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.pillar:hover .pillar__num::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .pillar__num::before { transition: none; }
}

/* Die Haekchen waren sechsmal dieselbe Geste. Die Haarlinie
   zwischen den Zeilen leistet dasselbe und ist stiller. */
.pillar__list li svg { display: none; }
.pillar__list li {
  gap: 0;
  padding: .8rem 0;
  font-size: .9rem;
}
.pillar__list li:last-child { border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-left: 0; border-top: 1px solid var(--line); padding-inline: 0; }
  .pillar:first-child { border-top: 0; }
}

/* ---------- 35.4 Kanten ruhiger ----------
   Die Kacheln hatten Rahmen, Schatten und Verlauf zugleich. Einer
   davon genuegt: das Bild selbst. */
.reel { background: transparent; }
.reel__media { border: 0; }
.reel-stack__item .reel__media { border-color: var(--line); box-shadow: none; }
.reel-stack__item:hover .reel__media { border-color: var(--line-strong); box-shadow: none; }

/* ---------- 35.5 Leistungen: Bild hinter der Spalte ----------
   Zwei Textspalten nebeneinander sind ehrlich, aber leise. Ein
   Standbild dahinter erdet jede Disziplin in dem, was sie
   herstellt — sichtbar genug, um zu wirken, blass genug, um die
   Schrift nicht zu stoeren. Die Maske laesst es nach unten
   auslaufen, damit die Liste auf ruhigem Grund steht. */
.pillar { position: relative; isolation: isolate; }
.pillar__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .28;
  filter: grayscale(.25) contrast(1.08) brightness(.9);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.62) 48%, transparent 86%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.62) 48%, transparent 86%);
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out), transform 1.2s var(--ease-out);
  pointer-events: none;
}
.pillar:hover .pillar__bg {
  opacity: .45;
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .pillar__bg, .pillar:hover .pillar__bg { transition: none; transform: none; }
}

/* ---------- 35.6 Deckung ohne Haarriss ----------
   Container-Query-Einheiten messen die Inhaltsflaeche, der Rahmen
   der Kachel liegt einen Pixel weiter aussen. Ohne diesen Ueberstand
   blitzt an den Kanten der Hintergrund durch. */
.vplayer { inset: -1px; }

/* ============================================================
   36. SCHRIFT DARF NICHT ABGESCHNITTEN WERDEN
   ------------------------------------------------------------
   Die Ueberschriften wurden zeilen- bzw. wortweise aufgedeckt:
   jedes Wort sass in einer Box mit overflow:hidden, aus der es
   hochfuhr. Das sieht gut aus — und schneidet zuverlaessig alles
   ab, was ueber die Zeilenbox hinausragt: die Unterlaenge von g,
   j, y und den Ueberhang kursiver Buchstaben nach rechts
   („Wirkung", „Substanz", „dein Film").

   Mehr Polster hilft nur scheinbar: die Maske schneidet nach
   Layout-Kanten, die Schrift ragt aber nach Tinte darueber
   hinaus. Deshalb faellt die Maske weg. Die Woerter steigen
   weiterhin auf, jetzt aber mit Deckkraft statt Beschnitt —
   dieselbe Bewegung, ohne dass je ein Buchstabe verloren geht.
   ============================================================ */

/* ---------- 36.1 Hero-Zeilen ---------- */
.hero__title .line {
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}
.hero__title .line > span {
  display: block;
  opacity: 0;
  transform: translate3d(0, .42em, 0);
  animation: zeileAuf 1.05s var(--ease-out) forwards;
}
@keyframes zeileAuf { to { opacity: 1; transform: none; } }

/* ---------- 36.2 Wortweiser Aufbau ---------- */
.split-text .word {
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}
.split-text .word > i {
  opacity: 0;
  transform: translate3d(0, .38em, 0);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 38ms);
}
.split-text.is-in .word > i { opacity: 1; transform: none; }

/* Kursive Buchstaben ragen nach rechts ueber ihre Box hinaus.
   Ohne diesen Ausgleich stoesst das letzte Wort einer Zeile an
   den Umbruch — sichtbar beim n in „dein Film". */
.italic-accent { padding-right: .12em; margin-right: -.04em; }

@media (prefers-reduced-motion: reduce) {
  .hero__title .line > span { animation: none; opacity: 1; transform: none; }
  .split-text .word > i { transition: none; opacity: 1; transform: none; }
}

/* ---------- 36.3 Logo: der Ton liegt auf „Nord" ---------- */
.logo__wort { font-weight: 400; }
.logo__wort b { font-weight: 600; }

/* ---------- 36.4 Leistungen: die Spalten brauchen Rand ----------
   Bisher sass die linke Spalte samt Bild hart an der Satzkante —
   das las sich wie ein Anschnitt, nicht wie eine Gestaltung. Beide
   Spalten bekommen denselben Innenabstand, das Bild einen eigenen
   Rahmen mit Radius. So steht die Sektion, statt zu verrutschen. */
.pillars {
  gap: clamp(1rem, 2vw, 2rem);
  border-top: 0;
}
.pillar {
  border-left: 0;
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.8rem);
  overflow: hidden;
}
.pillar:first-child,
.pillar:last-child { padding: clamp(1.8rem, 3vw, 2.8rem); }
.pillar__bg { border-radius: inherit; }

/* Eine Haarlinie oben statt eines Rahmens ringsum: genug Kontur,
   um die Spalte zu halten, ohne sie einzurahmen. */
.pillar::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
}
.pillar__num { padding-top: 0; }
.pillar__num::before { top: -1px; }

@media (max-width: 760px) {
  .pillar, .pillar:first-child, .pillar:last-child {
    border-top: 0;
    padding: clamp(1.6rem, 5vw, 2.2rem);
  }
}

/* ============================================================
   37. FEINSCHLIFF
   ============================================================ */

/* ---------- 37.1 Feature-Raster: Unterlaengen in der letzten Zeile ----------
   Das Raster rundet seine Ecken mit overflow:hidden. Die Zellen der
   untersten Reihe endeten so knapp am Rand, dass g, p und y der letzten
   Textzeile angeschnitten wurden (gemessen: ~5 px). Etwas mehr Luft
   nach unten in jeder Zelle, dann reicht die Rundung nicht mehr in
   die Schrift. */
.feature { padding-bottom: calc(clamp(1.5rem, 2.4vw, 2rem) + .45rem); }

/* ---------- 37.2 Leistungen: beide Titel auf einer Zeile ----------
   „Social Media Marketing“ brach um, „Videoproduktion“ nicht — die
   Spalten wirkten dadurch verschieden hoch. Eine Stufe kleiner, und
   beide sitzen gleich. */
.pillar__head .h2 { font-size: clamp(1.9rem, 3.1vw, 2.55rem); }

/* ---------- 37.3 Hero: Schrift auf bewegtem Grund ----------
   Der neue Showreel ist heller und unruhiger als der alte. Der Scrim
   links und unten traegt etwas mehr, damit die Zeile auch ueber einem
   hellen Frame steht. */
.hero__scrim {
  background:
    linear-gradient(92deg,  rgba(var(--ink-rgb),.82) 0%, rgba(var(--ink-rgb),.46) 40%, rgba(var(--ink-rgb),.08) 78%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.55) 0%, transparent 26%, transparent 44%, rgba(var(--ink-rgb),.78) 100%);
}

/* ---------- 37.4 Poster: weiche Schaerfe beim Laden ----------
   Die kleineren Aufloesungen aus dem srcset kommen zuerst — kein
   harter Sprung, wenn der Browser spaeter nachschaerft. */
.work__poster, .reel__poster { background: #101012; }

/* ============================================================
   38. FILTER UND LIGHTBOX-PFEILE
   ============================================================ */

/* ---------- 38.1 Filterleiste auf der Arbeiten-Seite ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}
.filter__btn {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .7rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter__btn:hover { color: var(--fg); border-color: var(--fg); }
.filter__btn[aria-pressed="true"] {
  background: var(--fg);
  color: var(--ink);
  border-color: var(--fg);
}
.filter__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- 38.2 Lightbox: blaettern ---------- */
.vmodal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(20,20,22,.6);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.vmodal__nav--prev { left:  clamp(.6rem, 2vw, 1rem); }
.vmodal__nav--next { right: clamp(.6rem, 2vw, 1rem); }
.vmodal__nav:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.vmodal__nav:disabled { opacity: .22; cursor: default; }
.vmodal--einzeln .vmodal__nav { display: none; }
@media (max-width: 700px) {
  .vmodal__nav { width: 40px; height: 40px; top: auto; bottom: .7rem; transform: none; }
  .vmodal__caption { padding-bottom: 3.6rem; }
}

/* ---------- 38.3 Lightbox ueber allem ----------
   Die Kopfleiste (z 1000) und der Fortschrittsbalken (z 1001) lagen
   ueber dem abgedunkelten Grund — der Film stand nicht allein. Die
   Lightbox liegt jetzt darueber; nur der eigene Cursor bleibt oben. */
.vmodal { z-index: 5000; }

/* ============================================================
   39. GRAFIKEN IN DEN MEDIENKAESTEN
   ------------------------------------------------------------
   Wo ein Foto fehlte, steht jetzt eine Zeichnung: Sucher,
   Reels, Laerm-zu-Signal, Storyboard, Schnittspuren. SVG im
   HTML — scharf in jeder Groesse, nichts zu laden. Sie sprechen
   die Sprache der Seite: Haarlinien, Mono-Beschriftung, ein
   Akzent. Bewegung nur im Kleinen, und nur, wenn erwuenscht.
   ============================================================ */
.split__media--grafik {
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(150deg, #151518, #0C0C0E);
}
.split__media .grafik {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.grafik text {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .16em;
}
.grafik__rec   { animation: grafikBlink 1.4s steps(1, end) infinite; }
.grafik__kopf2 { animation: grafikKopf2 12s linear infinite; }
@keyframes grafikBlink { 50% { opacity: .15; } }
@keyframes grafikKopf2 { from { transform: translateX(0); } to { transform: translateX(650px); } }
/* Fortschrittsbalken: Film (8 s) und Story (5 s) laufen durch */
.grafik__lauf, .grafik__lauf2 { stroke-dasharray: 100; stroke-dashoffset: 100; }
.grafik__lauf  { animation: grafikLauf 8s linear infinite; }
.grafik__lauf2 { animation: grafikLauf 5s linear infinite; }
@keyframes grafikLauf { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .grafik, .grafik * { animation: none !important; }
  .grafik__puls { display: none; }
  .grafik__lauf, .grafik__lauf2 { stroke-dashoffset: 58; }
}

/* ============================================================
   40. SEO: DIE H1 NENNT DAS ANGEBOT
   ------------------------------------------------------------
   Google liest die H1 als Thema der Seite. „Kein Content-Laerm.
   Nur Wirkung." ist ein starker Satz, sagt aber nichts ueber das
   Angebot. Deshalb ist die kleine Zeile darueber jetzt die H1 und
   der Slogan ein Absatz — optisch bleibt alles, wie es war. Die
   Regeln gleichen genau die Stile aus, die sonst mit dem Element
   wechseln wuerden (Abstand, Zeilenhoehe, Schriftmerkmale).
   ============================================================ */
h1.eyebrow {
  margin: 0;
  line-height: inherit;
  text-wrap: wrap;
  font-feature-settings: normal;
}
p.hero__title {
  font-family: var(--font-display);
  font-feature-settings: "ss01" 1, "cv11" 1;
  text-wrap: balance;
  max-width: none;
  color: inherit;
}

/* ============================================================
   41. LOGO: DAS ORIGAMI-ZEICHEN
   ------------------------------------------------------------
   Kopf und Fuss tragen das komplette Logo (Vogel + Schriftzug)
   als Bild in drei Aufloesungen. Die alte gezeichnete Marke und
   der gesetzte Schriftzug entfallen.
   ============================================================ */
.logo__bild { display: block; height: 40px; width: auto; }
.footer .logo__bild { height: 44px; }
@media (max-width: 560px) { .logo__bild { height: 34px; } }

/* ---------- 41.1 404: Wegweiser-Raster ohne Loecher ----------
   auto-fit liess bei sechs Links und vier Spalten zwei leere
   Zellen stehen, durch die der Rastergrund schien. Feste Spalten-
   zahlen, die sechs glatt teilen, und Links, die ihre Zelle
   ganz fuellen. Die Linien entstehen aus Rahmen, nicht aus Luecken. */
.notfound-links {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.notfound-links li {
  margin: 0;
  display: flex;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.notfound-links a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: transparent;
  color: var(--fg-dim);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.notfound-links a::after { content: '→'; color: var(--muted); transition: transform .3s var(--ease), color .3s var(--ease); }
.notfound-links a:hover::after { transform: translateX(4px); color: var(--accent); }
@media (max-width: 900px) { .notfound-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .notfound-links { grid-template-columns: 1fr; } }

/* ---------- 41.2 Der Vogel bewegt sich allein ----------
   Das Logo ist in der Luecke zwischen Vogel und Schriftzug geteilt.
   Nebeneinander ohne Abstand ergeben beide Teile genau das Original;
   beim Ueberfahren hebt sich nur der Vogel und kippt leicht. */
/* Vogel und Schrift sind zwei deckungsgleiche Ebenen in voller Logogroesse
   (nach Farbe getrennt, weil die Fluegelspitze ueber das N ragt und es
   keine saubere senkrechte Trennlinie gibt). Die Schrift steht im Fluss,
   der Vogel liegt exakt darueber. */
.logo__bild { position: relative; display: block; height: 40px; width: auto; }
.logo__bild img { display: block; height: 100%; width: auto; }
.logo__bild .logo__vogel { position: absolute; left: 0; top: 0; z-index: 1; }
.footer .logo__bild { height: 44px; }
@media (max-width: 560px) { .logo__bild { height: 34px; } }
.logo__vogel {
  transform-origin: 15.4% 52.4%;
  transition: transform .55s var(--ease-out);
}
.logo:hover .logo__vogel,
.logo:focus-visible .logo__vogel { transform: translate3d(2px, -3px, 0) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) {
  .logo__vogel { transition: none; }
  .logo:hover .logo__vogel, .logo:focus-visible .logo__vogel { transform: none; }
}

/* ============================================================
   42. KOPFZEILE BEIM SCROLLEN: NUR DIE PILLE
   ------------------------------------------------------------
   Im gescrollten Zustand lag hinter der abgerundeten Leiste noch
   eine Flaeche ueber die volle Fensterbreite (dunkel, unscharf,
   mit Linie unten). Zwei Ebenen uebereinander wirken unruhig —
   es bleibt nur die Pille selbst.
   ============================================================ */
.header::before,
.header.is-stuck::before { display: none; }
.header.is-stuck {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- 42.1 Hero: kein Standortstempel ----------
   Die senkrechte Koordinatenzeile links am Hero entfaellt. */
.hero__inner::before { content: none; display: none; }