/* ==========================================================
   ontopa — Werbeagentur · style.css
   ========================================================== */

:root {
  /* Farben – warme Abendlicht-Palette */
  --ink: #16120f;
  --night: #0d0a08;
  --cream: #f5efe6;
  --sand: #d4b7a6;
  --dune: #c98a4b;
  --ember: #b8461b;
  --rust: #6e1a0c;
  --gold: #d4a85a;
  --muted: rgba(22, 18, 15, .62);

  /* Schriften */
  --f-display: "Syne", sans-serif;
  --f-serif: "Instrument Serif", serif;
  --f-body: "Inter Tight", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", monospace;

  /* Abstände (Skala ×1.618) */
  --s0: .618rem;
  --s1: 1rem;
  --s2: 1.618rem;
  --s3: 2.618rem;
  --s4: 4.236rem;
  --s5: 6.854rem;
  --s6: 11.09rem;

  /* Schriftgrößen */
  --fs-sm: .786rem;
  --fs-5: clamp(2.618rem, 6vw, 4.236rem);
  --fs-6: clamp(3.4rem, 10vw, 6.854rem);

  --radius: 1.618rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
::selection { background: var(--ember); color: var(--cream); }

.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Text-Split (von JS erzeugt) ---------- */
/* Masken für Text-Animationen: großzügig nach oben (Umlaute) und unten (g, p, y, j) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .2em .14em .5em; margin: -.2em -.14em -.5em; }
/* nach der Animation: Maske weg, nichts wird mehr abgeschnitten */
.split-done .w, .split-done .ch, .footer__mark.split-done .ch { overflow: visible; }
.w__i { display: inline-block; }
/* kursive Wörter: Platz für Unterlänge und Schräglage (auch für Farbverläufe) */
em.w__i { padding: .05em .16em .42em .04em; margin: -.05em -.16em -.42em -.04em; }
.sw { opacity: .15; }

/* ---------- Buttons (dezenter Hover) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  padding: .95em 1.7em; border-radius: 999px;
  font-weight: 500; font-size: .95rem; line-height: 1;
  transition: background-color .35s ease, box-shadow .35s ease, color .35s ease, opacity .35s ease;
}
.btn__arrow { transition: transform .35s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--light { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .3); }
.btn--light:hover { background: #f6f2ec; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .38); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: #2c241e; }
.btn--square { border-radius: 4px; background: #fff; color: var(--ember); font-weight: 600; }
.btn--square:hover { background: #f6f2ec; }
.btn--sm { padding: .75em 1.35em; font-size: .85rem; }

/* Showreel-Button im Hero: weiß mit Play-Kreis */
.btn--play { color: #fff; padding-left: .7em; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.btn--play:hover { opacity: .85; }
.btn__play {
  display: grid; place-items: center;
  width: 2.2em; height: 2.2em; margin: -.65em .15em -.65em 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8);
  transition: background-color .35s ease;
}
.btn__play svg { width: .75em; height: .75em; margin-left: .12em; }
.btn--play:hover .btn__play { background: rgba(255, 255, 255, .18); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: var(--s1); left: 0; right: 0; z-index: 60;
  width: max-content; max-width: calc(100% - 2rem); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: .45rem .45rem .45rem 1.25rem;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  box-shadow: 0 10px 40px -12px rgba(22, 18, 15, .3);
  transition: transform .7s var(--ease-out), background .4s;
}
.nav.is-hidden { transform: translateY(-160%); }
.nav.is-scrolled { background: rgba(255, 255, 255, .9); }
.nav__logo { display: flex; align-items: center; gap: .5rem; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; }
.nav__mark {
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, var(--gold), var(--ember));
}
.nav__links { display: flex; gap: var(--s2); font-size: .85rem; }
.nav__links a { position: relative; color: rgba(22, 18, 15, .75); transition: color .3s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__burger { display: none; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav__burger span { width: 16px; height: 1.5px; background: var(--cream); transition: transform .5s var(--ease-out); }
.nav__burger.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  clip-path: circle(0% at calc(100% - 3rem) 2.5rem);
  transition: clip-path 1s var(--ease-out);
  pointer-events: none;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 3rem) 2.5rem); pointer-events: auto; }
.menu__links { display: grid; gap: var(--s0); text-align: center; }
.menu__links a { display: flex; gap: 1rem; align-items: baseline; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.6rem, 11vw, 4.2rem); line-height: 1.1; }
.menu__links .mono { color: var(--gold); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .45em 1em; border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  font-size: .8rem; font-weight: 500;
  box-shadow: 0 4px 20px -6px rgba(0, 0, 0, .18);
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative; height: 100svh; min-height: 640px;
  display: grid; place-items: center; text-align: center;
  overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(232, 230, 238, .96) 0%,
    rgba(236, 226, 224, .6) 30%,
    rgba(255, 214, 180, .08) 58%,
    rgba(22, 18, 15, .4) 100%);
}

/* Goldener Schnitt: statisch. Beim Laden blenden zuerst die Linien ein,
   dann schwingt die Spirale in einem Zug von innen nach außen auf. */
.hero__phi { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.phi { position: absolute; left: 0; top: 0; }
.phi__sq { position: absolute; outline: 1px solid rgba(255, 255, 255, .26); outline-offset: -.5px; opacity: 0; }
.phi__spiral { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.phi__spiral path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; stroke-linecap: round; }
.phi__num {
  position: absolute; padding: .5em .6em; opacity: 0;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: rgba(255, 255, 255, .8);
}
.phi__eye { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 14px 4px rgba(246, 211, 140, .75); opacity: 0; }

.hero__content { position: relative; z-index: 2; max-width: 64rem; padding: 0 var(--s2); margin-top: -5vh; }
.hero__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--fs-6); line-height: .95; letter-spacing: -.045em;
  margin: var(--s2) 0 var(--s1);
}
.hero__title em {
  font-size: 1.1em; letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--ember) 0%, var(--dune) 50%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { font-size: clamp(1rem, 1.4vw, 1.2rem); color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); max-width: 36rem; margin: 0 auto var(--s3); }
.hero__ctas { display: flex; gap: var(--s0); justify-content: center; align-items: center; flex-wrap: wrap; }
.hero__coords {
  position: absolute; z-index: 3; right: var(--s3); bottom: var(--s3);
  text-align: right; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.scroll-pill {
  position: absolute; z-index: 3; bottom: var(--s2); left: 50%; translate: -50% 0;
  display: flex; gap: .6em; align-items: center;
  padding: .65em 1.3em; border-radius: 999px;
  background: rgba(30, 40, 35, .4); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
}
.scroll-pill span { display: inline-block; animation: bob 1.6s ease-in-out infinite; }

/* ==========================================================
   AGENTUR (Intro)
   ========================================================== */
.intro { position: relative; height: 230vh; background: var(--rust); }
.intro__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center; color: #fff;
}
.intro__media { position: absolute; inset: 0; }
.intro__tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(232, 168, 70, .35), transparent 60%),
    linear-gradient(120deg, rgba(190, 120, 55, .72) 0%, rgba(160, 55, 20, .7) 55%, rgba(70, 8, 6, .9) 100%);
}
.intro__center { position: relative; display: flex; align-items: center; gap: var(--s2); }
.intro__mark {
  font-family: var(--f-body); font-weight: 600;
  font-size: clamp(4rem, 13vw, 13rem); line-height: .8; letter-spacing: -.06em;
  white-space: nowrap;
}
.intro__mark span { font-weight: 300; }
.intro__label { line-height: 1.5; }
.services {
  position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3);
  display: flex; justify-content: space-between; color: #fff;
}

/* ==========================================================
   ARBEITEN
   ========================================================== */
.work { background: var(--sand); padding: var(--s6) var(--s2); }
.section-head { max-width: 1400px; margin: 0 auto var(--s4); display: grid; gap: var(--s1); }
.section-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--fs-5); line-height: 1; letter-spacing: -.04em; max-width: 14ch;
}
.section-title em { color: var(--ember); font-size: 1.08em; }
.section-lead { color: var(--muted); max-width: 30rem; }

.work__card {
  position: relative; max-width: 1400px; margin: 0 auto;
  aspect-ratio: 1.618; border-radius: var(--radius); overflow: hidden;
  color: #fff; box-shadow: 0 60px 100px -40px rgba(80, 30, 10, .55);
}
.work__slides, .work__img { position: absolute; inset: 0; }
/* eigene Ebene, damit wechselnde Bilder nie über Text und Route liegen */
.work__slides { z-index: 0; isolation: isolate; }
.work__img { clip-path: inset(0 0 0 100%); }
.work__img.is-active { clip-path: inset(0 0 0 0); }
.work__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(40, 15, 5, .6), transparent 62%),
    linear-gradient(0deg, rgba(40, 15, 5, .5), transparent 38%);
}
.work__body { position: absolute; left: 8%; top: 50%; translate: 0 -50%; max-width: 30rem; }
.work__meta { display: inline-block; margin-bottom: var(--s0); opacity: .85; }
.work__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 4.236rem); line-height: 1; letter-spacing: -.035em;
  margin-bottom: var(--s1);
}
.work__text { font-size: .95rem; opacity: .92; margin-bottom: var(--s2); max-width: 26rem; }
.work__row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.work__client { font-size: .9rem; opacity: .9; }

.route { position: absolute; right: 7%; top: 50%; translate: 0 -50%; width: 36%; overflow: visible; pointer-events: none; }
.route__path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.route__dot { fill: #fff; }
.route__ring { fill: var(--ember); stroke: #fff; stroke-width: 3; }
.route text { fill: #fff; font-family: var(--f-body); font-size: 15px; font-weight: 600; }
.route .route__small { font-size: 12px; font-weight: 400; opacity: .85; }


.work__controls { position: absolute; right: 7%; bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.work__toggle {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  transition: background .3s, border-color .3s;
}
.work__toggle:hover { background: rgba(255, 255, 255, .15); border-color: #fff; }
.work__toggle .i-play { display: none; margin-left: 2px; }
.work__toggle[aria-pressed="true"] .i-play { display: block; }
.work__toggle[aria-pressed="true"] .i-pause { display: none; }
.work__pager { display: flex; align-items: center; gap: var(--s2); }
.pager__btn { display: flex; align-items: center; gap: var(--s1); font-weight: 600; font-size: .9rem; color: rgba(255, 255, 255, .65); transition: color .4s; }
.pager__btn.is-active { color: #fff; }
.pager__line { position: relative; width: 0; height: 2px; background: rgba(255, 255, 255, .3); transition: width .8s var(--ease-out); overflow: hidden; }
.pager__btn.is-active .pager__line { width: clamp(60px, 9vw, 120px); }
.pager__fill { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }

/* ==========================================================
   SHOWREEL — schwarz, schwingende Punkt-Säulen, Video in der Mitte
   ========================================================== */
.motion {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); color: var(--cream);
  padding: var(--s6) var(--s2);
}
/* Brandungswelle aus Punkten (Canvas, max. 30 fps, nur wenn sichtbar) */
.motion__dots { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.wave-canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 66%; max-width: none; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
/* dunkler Schleier hinter Text und Video, Ränder weich */
.motion__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 19% at 50% 19%, rgba(13, 10, 8, .95) 0%, rgba(13, 10, 8, .7) 50%, rgba(13, 10, 8, 0) 100%),
    linear-gradient(90deg, var(--night) 0%, rgba(13, 10, 8, 0) 12%, rgba(13, 10, 8, 0) 88%, var(--night) 100%),
    linear-gradient(180deg, var(--night) 0%, rgba(13, 10, 8, 0) 14%, rgba(13, 10, 8, 0) 86%, var(--night) 100%);
}
.motion__head { text-align: center; margin-bottom: var(--s4); }
.motion__kicker { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.25; letter-spacing: -.03em; color: rgba(245, 239, 230, .75); margin-bottom: .45em; padding-bottom: .1em; }
.motion__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 1.2; letter-spacing: -.045em;
  padding-bottom: .2em;    /* Platz für Unterlängen (g) in jedem Browser */
  position: relative; z-index: 2; overflow: visible;
}
.motion__title em { display: inline-block; padding: 0 .12em .25em 0; }
.motion__title em { color: var(--gold); font-size: 1.08em; }
.motion__lead { max-width: 30rem; margin: var(--s3) auto 0; text-align: center; color: rgba(245, 239, 230, .6); }

/* Video in der Mitte */
.reel-video {
  position: relative; max-width: 1000px; margin: 0 auto; aspect-ratio: 16 / 9;
  transition: max-width .9s var(--ease-out), border-radius .9s var(--ease-out);
  border-radius: 20px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(245, 239, 230, .14), 0 50px 120px -40px rgba(0, 0, 0, .9), 0 0 120px -30px rgba(212, 168, 90, .35);
}
.reel-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-video__cover {
  position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45));
  transition: background-color .4s ease, opacity .5s ease;
}
.reel-video__play {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(245, 239, 230, .94); color: var(--ink);
  transition: transform .5s var(--ease-out);
}
.reel-video__play svg { margin-left: 4px; }
.reel-video__cover:hover .reel-video__play { transform: scale(1.06); }
.reel-video__meta {
  position: absolute; left: var(--s2); right: var(--s2); bottom: var(--s2);
  display: flex; justify-content: space-between; font-size: .7rem; color: rgba(255, 255, 255, .85);
}
.reel-video__meta span { display: flex; align-items: center; gap: .5em; }
.reel-video__rec { width: 7px; height: 7px; border-radius: 50%; background: #e5533d; }
.reel-video.is-playing .reel-video__cover { opacity: 0; pointer-events: none; }
/* beim Abspielen wird das Video auf der Seite größer (kein Vollbild) */
.reel-video.is-big { max-width: min(1400px, 100%); border-radius: 12px; }
.reel-video__missing {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 1rem;
  font-size: .75rem; color: rgba(245, 239, 230, .7); background: rgba(0, 0, 0, .75);
}
.reel-video.is-missing .reel-video__missing { display: grid; }
.reel-video.is-missing .reel-video__cover { opacity: 0; pointer-events: none; }

/* ==========================================================
   FOTOGRAFIE
   ========================================================== */
.photo { padding: var(--s6) var(--s2); background: var(--night); color: var(--cream); }
.photo .section-title em { color: var(--gold); }
.photo .section-lead { color: rgba(245, 239, 230, .65); }
.section-head--split { grid-template-columns: 1.618fr 1fr; align-items: end; column-gap: var(--s3); }
.mosaic {
  max-width: 1400px; margin: 0 auto;
  aspect-ratio: 1.618;
  display: grid; grid-template-columns: 61.8% 38.2%;
}
.mosaic__r { display: grid; grid-template-rows: 61.8% 38.2%; min-height: 0; }
.mosaic__rb { display: grid; grid-template-columns: 38.2% 61.8%; min-height: 0; }
.tile { position: relative; overflow: hidden; border: 3px solid var(--night); border-radius: 8px; min-height: 0; }
.tile img { transition: scale 1.4s var(--ease-out); }
.tile:hover img { scale: 1.03; }
.tile figcaption { position: absolute; left: 1rem; bottom: .8rem; color: #fff; font-size: .68rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

/* ==========================================================
   SOCIAL MEDIA & ADS — gleicher Stil wie "Arbeiten": helle Fläche,
   große abgerundete Karte mit Foto + warmem Ton, darauf die Handys
   ========================================================== */
/* Farbe der Sektion: hier einfach ändern */
.social {
  /* Sand-Rosé (wie "Arbeiten") */
  background: linear-gradient(180deg, #D4B7A6 0%, #e6d6cc 55%, #ffffff 100%);   /* oben Sand-Rosé, unten weiß */
  color: var(--ink); padding: var(--s6) var(--s2);
}
.social .section-title { font-size: clamp(3rem, 8vw, 6.4rem); max-width: 12ch; }
.social .section-title em { color: var(--ember); }
.social .section-lead { color: var(--muted); }
.social__card {
  position: relative; max-width: 1400px; margin: 0 auto;
  height: clamp(560px, 62vw, 760px); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 60px 100px -40px rgba(80, 30, 10, .55);
}
/* Hintergrund der Karte: dunkler Verlauf mit feinem Punktraster und goldenem Licht (kein Foto) */
.social__card {
  background:
    radial-gradient(circle, rgba(245, 239, 230, .1) 1px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(150deg, #2a1d16 0%, #1a120d 60%, #120c09 100%);
}
.social__glow {
  position: absolute; left: 50%; top: 52%; width: 85%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(240, 196, 110, .6) 0%, rgba(212, 120, 50, .3) 30%, rgba(184, 70, 27, .1) 50%, rgba(184, 70, 27, 0) 66%);
}
.social__card { box-shadow: 0 0 0 1px rgba(240, 196, 110, .22), 0 70px 120px -40px rgba(0, 0, 0, .65); }
.social__stage { position: absolute; inset: 0; }

.phone {
  position: absolute; top: 50%; width: 250px; aspect-ratio: 9 / 19;
  padding: 9px; border-radius: 40px; background: #0b0908;
  box-shadow: 0 0 0 1px rgba(240, 196, 110, .45), 0 0 60px -10px rgba(240, 196, 110, .35), 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.phone--center { left: 50%; z-index: 2; transform: translate(-50%, -50%); }
.phone--left { left: 50%; width: 220px; transform: translate(calc(-50% - 210px), -46%) rotate(-7deg); }
.phone--right { left: 50%; width: 220px; transform: translate(calc(-50% + 210px), -46%) rotate(7deg); }
.phone__screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #2a231d; }
.phone__ui {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem .9rem; color: #fff; font-size: .74rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 25%, transparent 55%, rgba(0, 0, 0, .7) 100%);
}
.phone__top { display: flex; align-items: center; gap: .45rem; padding-top: .6rem; }
.phone__top small { margin-left: auto; font-size: .62rem; opacity: .8; }
.phone__avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--ember)); box-shadow: 0 0 0 2px #fff; }
.phone__bottom { display: flex; gap: .9rem; font-weight: 600; }
.phone__bottom--ad { flex-direction: column; gap: .6rem; font-weight: 400; }
.phone__bottom--ad p { font-size: .78rem; line-height: 1.35; }
.phone__cta { display: block; text-align: center; padding: .6em; border-radius: 8px; background: #fff; color: var(--ink); font-weight: 600; }

.kpi {
  position: absolute; z-index: 3; padding: .8rem 1.1rem; border-radius: 14px;
  background: rgba(255, 255, 255, .95); color: var(--ink);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5);
}
.kpi small { display: block; font-size: .62rem; color: #8a7f74; }
.kpi strong { font-family: var(--f-display); font-size: 1.9rem; letter-spacing: -.02em; color: var(--ember); }
/* Kennzahlen kleben direkt an den Handys */
.kpi strong { display: inline-block; min-width: 3.2ch; font-variant-numeric: tabular-nums; }
.kpi--a { left: calc(50% - 370px); top: calc(50% - 215px); }
.kpi--b { left: calc(50% + 255px); top: calc(50% - 70px); }
.kpi--c { left: calc(50% - 235px); top: calc(50% + 195px); }

.social__platforms {
  position: absolute; left: 0; right: 0; bottom: var(--s2); z-index: 3;
  display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; font-size: .66rem; color: #fff;
}
.social__platforms li { padding: .5em 1em; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; }

.social__list {
  list-style: none; max-width: 1400px; margin: var(--s4) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
}
.social__list li { display: grid; gap: .35rem; padding-top: var(--s1); border-top: 1px solid rgba(22, 18, 15, .18); }
.social__list .mono { color: var(--ember); }
.social__list strong { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.social__list p { color: var(--muted); font-size: .92rem; }

/* ==========================================================
   CALL TO ACTION
   ========================================================== */
.cta {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--s6) var(--s2); text-align: center;
  overflow: hidden; isolation: isolate; background: var(--cream);
}
.cta__sky { position: absolute; inset: 0; z-index: -2; }
.cta__fade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .85) 0%,
    rgba(255, 255, 255, .45) 40%,
    rgba(245, 239, 230, .15) 75%,
    rgba(201, 138, 75, .25) 100%);
}
.cta__inner { max-width: 60rem; margin: 0 auto; }
.cta--page { min-height: 92svh; padding-top: calc(var(--s6) + 2rem); }
/* Himmel läuft weich in die Formular-Sektion aus */
.cta--page .cta__fade, .cta--joined .cta__fade {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .85) 0%,
    rgba(255, 255, 255, .45) 40%,
    rgba(245, 239, 230, .4) 75%,
    var(--cream) 100%);
}
.checks { display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); font-size: .72rem; }
.checks li { display: flex; gap: .5em; align-items: center; }
.checks span { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font-size: .6rem; }
.cta__title {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 7.5rem); line-height: .95; letter-spacing: -.02em;
  margin: 0 auto var(--s2);
}
.cta__title em { color: var(--ember); }
.cta__inner > p { max-width: 36rem; margin: 0 auto var(--s3); color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.cta__ctas { display: flex; gap: var(--s0); justify-content: center; flex-wrap: wrap; }

/* ==========================================================
   PROJEKTANFRAGE (eigene Seite, Karte im Fenster-Look)
   ========================================================== */
.request {
  padding: var(--s3) var(--s2) var(--s6);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 35%, #e8c27c 80%, #c98a4b 100%);
}
.brief {
  position: relative; max-width: 900px; margin: 0 auto; padding: .7rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 50px 100px -40px rgba(80, 50, 10, .45);
}
.brief__bar { display: flex; align-items: center; gap: 6px; padding: .2rem .4rem .7rem; }
.brief__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.brief__bar i:nth-child(2) { background: #febc2e; }
.brief__bar i:nth-child(3) { background: #28c840; }
.brief__bar span { flex: 1; text-align: center; padding-right: 42px; font-size: .66rem; color: var(--muted); text-transform: none; }
.brief__body { background: #fff; border-radius: 14px; padding: clamp(1.4rem, 3.5vw, 2.6rem); display: grid; gap: 1.6rem; }
.brief__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field > span, .group__label { font-size: .8rem; color: #777; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  padding: .85em 1em; border: 1px solid #e6e1da; border-radius: 12px;
  background: #fbf9f6; outline: none; resize: vertical;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.field input:focus, .field textarea:focus { border-color: var(--dune); background: #fff; box-shadow: 0 0 0 4px rgba(201, 138, 75, .12); }
.field.is-error input { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192, 57, 43, .1); }
.group { display: grid; gap: .7rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .6em 1.1em; border: 1px solid #e6e1da; border-radius: 999px; font-size: .85rem;
  transition: background-color .3s, color .3s, border-color .3s;
}
.chip:hover { border-color: #c9c1b6; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.brief__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brief__foot small { color: #888; font-size: .78rem; }
.brief__done {
  position: absolute; inset: 2.6rem .7rem .7rem; border-radius: 14px; background: #fff;
  display: grid; place-items: center; text-align: center; padding: var(--s3);
  opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s;
}
.brief__done h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; margin-bottom: var(--s1); }
.brief__done p { color: var(--muted); max-width: 26rem; margin: 0 auto var(--s2); }
.brief.is-sent .brief__done { opacity: 1; visibility: visible; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief__foot small a { color: inherit; text-decoration: underline; }
.brief__error { color: #c0392b; font-size: .85rem; margin: -.6rem 0 0; }
.brief.is-sending button[type="submit"] { opacity: .55; cursor: wait; }

/* ==========================================================
   IMPRESSUM & DATENSCHUTZ
   ========================================================== */
.legal { background: var(--cream); padding: calc(var(--s6) + 1rem) var(--s2) var(--s6); }
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal__back { display: inline-block; margin-bottom: var(--s3); color: var(--ember); }
.legal__back:hover { opacity: .7; }
.legal__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--fs-5); line-height: 1; letter-spacing: -.04em; margin-bottom: var(--s3);
  hyphens: manual;
}
.legal h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; margin: var(--s3) 0 var(--s0); }
.legal p, .legal li { color: rgba(22, 18, 15, .78); }
.legal p + p { margin-top: var(--s0); }
.legal ul { list-style: disc; padding-left: 1.2rem; margin-top: var(--s0); display: grid; gap: .4rem; }
.legal a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.legal mark { background: rgba(212, 168, 90, .35); padding: 0 .2em; border-radius: 3px; }
.legal__note { padding: var(--s1); border-radius: 12px; background: rgba(212, 168, 90, .18); font-size: .92rem; }
.legal__hint { color: #8a7f74; font-size: .88em; }
.legal__date { margin-top: var(--s4); color: #8a7f74; }
.footer__cols li { color: rgba(245, 239, 230, .75); }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer { background: var(--ink); color: var(--cream); padding: var(--s5) var(--s2) var(--s2); overflow: hidden; }
.footer__cols {
  display: grid; grid-template-columns: 1.618fr 1fr 1fr; gap: var(--s3);
  max-width: 1400px; margin: 0 auto var(--s4);
}
.footer__cols h4 { color: rgba(245, 239, 230, .45); margin-bottom: var(--s0); font-weight: 400; }
.footer__cols p { max-width: 26rem; color: rgba(245, 239, 230, .75); }
.footer__cols li a, .footer__bottom a { transition: color .3s; }
.footer__cols li a:hover, .footer__bottom a:hover { color: var(--gold); }
.footer__mark {
  max-width: 1400px; margin: 0 auto; text-align: center; white-space: nowrap;
  font-family: var(--f-display); font-weight: 800;
  font-size: 18vw; line-height: .8; letter-spacing: -.05em;
}
.footer__mark-inner { display: inline-block; }
.footer__mark .ch { display: inline-block; overflow: hidden; vertical-align: top; padding: .3em 0 .62em; margin: -.3em 0 -.62em; }
.footer__mark .ch > span { display: inline-block; }
.footer__mark .ch:last-child { color: var(--gold); font-weight: 500; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; max-width: 1400px; margin: var(--s2) auto 0; color: rgba(245, 239, 230, .5); }

/* ---------- Video-Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center;
  background: rgba(5, 5, 5, .92);
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__frame { position: relative; width: min(90vw, 1100px); aspect-ratio: 16 / 9; background: #111; border-radius: 12px; overflow: hidden; scale: .9; transition: scale .7s var(--ease-out); }
.modal.is-open .modal__frame { scale: 1; }
.modal__frame video { width: 100%; height: 100%; object-fit: cover; }
.modal__frame.is-empty::after {
  content: "Lege dein Video unter assets/video/showreel.mp4 ab";
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem;
  color: rgba(245, 239, 230, .6); font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}
.modal__close { position: absolute; top: var(--s2); right: var(--s2); width: 56px; height: 56px; border-radius: 50%; color: #fff; font-size: 1.2rem; border: 1px solid rgba(255, 255, 255, .3); transition: background .3s; }
.modal__close:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Keyframes ---------- */
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 70, 27, .55); }
  70% { box-shadow: 0 0 0 8px rgba(184, 70, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 70, 27, 0); }
}
@keyframes ring { 0% { scale: 1; opacity: 1; } 100% { scale: 1.4; opacity: 0; } }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 960px) {
  .nav { gap: var(--s1); }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .hero__coords { display: none; }
  .intro__center { flex-direction: column; text-align: center; }
  .services { flex-wrap: wrap; justify-content: center; gap: .8rem 2rem; }

  .work__card { aspect-ratio: auto; min-height: 780px; }
  .work__body { left: var(--s2); right: var(--s2); top: var(--s3); translate: none; }
  .route { width: 78%; right: 11%; top: auto; bottom: 15%; translate: none; }
  .work__controls { left: var(--s2); right: var(--s2); bottom: var(--s2); justify-content: center; gap: var(--s1); }

  .section-head--split { grid-template-columns: 1fr; row-gap: var(--s1); }
  .social__list { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .reel-video { border-radius: 14px; }
  .reel-video__play { width: 72px; height: 72px; }
  .social__card { height: 600px; }
  .phone { width: 180px; }
  .phone--left, .phone--right { width: 150px; }
  .phone--left { transform: translate(calc(-50% - 110px), -50%) rotate(-7deg); }
  .phone--right { transform: translate(calc(-50% + 110px), -50%) rotate(7deg); }
  .kpi { padding: .55rem .8rem; }
  .kpi strong { font-size: 1.1rem; }
  .kpi--a { left: max(10px, calc(50% - 170px)); top: calc(50% - 205px); }
  .kpi--b { left: calc(50% + 62px); top: calc(50% - 30px); }
  .kpi--c { left: max(10px, calc(50% - 150px)); top: calc(50% + 150px); }
  .social__list { grid-template-columns: 1fr; }
  .mosaic { aspect-ratio: .618; grid-template-columns: 1fr; grid-template-rows: 61.8% 38.2%; }
  .mosaic__r { grid-template-rows: 1fr; grid-template-columns: 61.8% 38.2%; }
  .mosaic__rb { grid-template-columns: 1fr; grid-template-rows: 38.2% 61.8%; }
  .brief__grid { grid-template-columns: 1fr; }
  .work__pager { gap: var(--s0); }
  .pager__btn.is-active .pager__line { width: 40px; }
  .footer__cols { grid-template-columns: 1fr; }
}

/* ==========================================================
   HANDY-OPTIMIERUNG (bis 600 px)
   ========================================================== */
@media (max-width: 600px) {
  /* weniger Leerraum zwischen den Sektionen */
  .work, .photo, .social, .motion { padding: var(--s5) var(--s1); }
  .cta { padding: var(--s5) var(--s1); min-height: 88svh; }
  .request { padding: var(--s2) var(--s1) var(--s5); }
  .section-head { margin-bottom: var(--s3); }

  /* Hero: Spirale ruhiger, Zahlen weg, damit der Text frei bleibt */
  .phi__num { display: none; }
  .hero__phi { opacity: .55; }
  .hero__content { margin-top: 0; padding: 0 var(--s1); }
  .hero__ctas { flex-direction: column; gap: var(--s1); }

  /* Agentur: Leistungen sauber in 2×2 */
  .services { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; text-align: center; left: var(--s1); right: var(--s1); bottom: var(--s2); }

  /* Showreel */
  .motion__head { margin-bottom: var(--s3); }
  .motion__lead { font-size: .92rem; padding: 0 var(--s0); }
  .reel-video__meta { left: var(--s1); right: var(--s1); bottom: var(--s0); font-size: .6rem; }

  /* Social: nur ein Handy in der Mitte, Kennzahlen drumherum, Plattformen darunter */
  .social .section-title { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .social__card { height: 560px; }
  .phone--left, .phone--right { display: none; }
  .phone--center { width: 200px; top: 46%; }
  .kpi--a { left: 12px; top: 52px; }
  .kpi--b { left: auto; right: 12px; top: 46%; }
  .kpi--c { left: 12px; top: auto; bottom: 92px; }
  .social__platforms { bottom: var(--s1); padding: 0 var(--s1); gap: .35rem; font-size: .58rem; }
  .social__list { margin-top: var(--s3); gap: var(--s2); }

  /* Kontakt & Formular */
  .cta__title { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .cta__ctas { flex-direction: column; align-items: center; }
  .brief { padding: .45rem; border-radius: 18px; }
  .brief__body { padding: 1.2rem; gap: 1.3rem; }
  .brief__foot { flex-direction: column; align-items: stretch; text-align: center; }
  .brief__foot .btn { justify-content: center; }

  /* Footer */
  .footer { padding: var(--s4) var(--s1) var(--s2); }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: .6rem; }

  /* Fotos */
  .tile { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}