/* ==========================================================================
   pulb.werbung — Sektionen
   Die Hero-Geometrie ist masshaltig aus der Referenz uebernommen:
   Buehne 81.979vw x 40.208vw, Bildpositionen in vw, damit die Komposition
   auf jeder Bildschirmbreite identisch proportioniert bleibt.
   ========================================================================== */

/* ==========================================================================
   1 — Hero / Intro
   ========================================================================== */

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero__stage {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 81.979vw;
  height: 40.208vw;
}

/* --- Fliegende Bilder ----------------------------------------------------- */

.hero__img { position: absolute; }

.hero__img-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__img--1 { top: 12.760vw; left: 11.615vw; width: 22.969vw; height: 16.563vw; z-index: 60; }
.hero__img--2 { top: -0.781vw; left: 24.479vw; width: 13.958vw; height:  8.750vw; z-index: 20; }
.hero__img--3 { top:  9.167vw; left: 29.844vw; width: 16.510vw; height: 23.542vw; z-index: 10; }
.hero__img--4 { top: 26.198vw; left: 31.458vw; width: 24.948vw; height: 13.073vw; z-index: 50; }
.hero__img--5 { top: -0.104vw; left: 40.990vw; width: 22.552vw; height: 14.271vw; z-index: 30; }
.hero__img--6 { top: 23.073vw; left: 44.740vw; width: 21.979vw; height: 13.958vw; z-index: 70; }
.hero__img--7 { top:  9.323vw; left: 45.156vw; width: 17.031vw; height: 18.229vw; z-index: 10; }

/* --- Wortmarke ------------------------------------------------------------
   Liegt bewusst auf z-index 65: Bild 6 schiebt sich darueber, alles andere
   dahinter. Genau dieses Verschraenken macht die Tiefe der Vorlage aus.      */

.hero__mark {
  position: absolute;
  top: 5.6vw;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 31vw;
  height: 23vw;
  overflow: hidden;
  z-index: 90;   /* ueber allen Bildern: der kurze Schriftzug "WERBUNG"
                    vertraegt keine Ueberdeckung, anders als eine lange Wortmarke */
  pointer-events: none;
}

.hero__mark-inner { width: 100%; }

.hero__mark svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Grundzustand der Marke: Referenz-Grau. Der Cyan-Layer liegt darueber und
   wird per clip-path von links nach rechts freigelegt. */
.mark-base  { fill: var(--mark); }
.mark-cyan  { fill: var(--accent); }
.mark-word  { fill: var(--mark); }

/* Schmales Lichtband, das beim Sweep mitlaeuft */
.mark-sheen {
  fill: #ffffff;
  opacity: 0;
  mix-blend-mode: screen;
}

/* --- Unterzeile ----------------------------------------------------------- */

.hero__sub {
  position: absolute;
  bottom: 2.083vw;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 80;
}

.hero__sub p {
  font-size: clamp(.78rem, .99vw, 1.05rem);
  font-weight: 300;
  letter-spacing: .01em;
  color: rgba(169, 171, 181, .9);
}

/* --- Scroll-Hinweis ------------------------------------------------------- */

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 2.083vw;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .8vw;
}

.hero__scroll-line {
  display: block;
  width: 3.4vw;
  min-width: 40px;
  height: 1px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: scrollHint 2.6s var(--ease-io) infinite;
}

@keyframes scrollHint {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* --- Meta-Zeile, die beim Wegscrollen des Heros erscheint ----------------- */

.hero-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 var(--gutter) 2vw;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
}

.hero-meta__row {
  display: flex;
  justify-content: space-between;
  gap: 2vw;
  padding-top: 1.4vw;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   2 — Info
   ========================================================================== */

/* --- Grosser Claim im Split-Layout, wie in der Referenz ------------------- */

.claim {
  display: grid;
  grid-template-columns: auto minmax(4vw, 1fr) auto;
  align-items: start;
  gap: 1.5vw;
  padding-inline: var(--gutter);
  padding-block: 10vw 6vw;
}

/* Etwas kleiner als die allgemeine H1, damit jede Zeile in einer Zeile bleibt */
.claim .h1 { font-size: 5.2vw; }

.claim__left  { justify-self: start; }
.claim__right { justify-self: end; text-align: right; }

.claim__line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.claim__line > span { display: inline-block; }

.claim__right .claim__line > span { color: var(--mark); }

.claim__rule {
  align-self: center;
  height: 1px;
  width: 100%;
  min-width: 4vw;
  background: var(--line);
  transform-origin: left center;
  margin-top: 2.4vw;
}

.claim__text {
  grid-column: 1 / -1;
  max-width: 34ch;
  margin: 6vw auto 0;
  text-align: left;
}

/* --- Geisterschrift im Hintergrund --------------------------------------- */

.ghostline {
  position: relative;
  overflow: hidden;
  padding-block: 4vw 8vw;
  pointer-events: none;
  user-select: none;
}

.ghostline span {
  display: block;
  white-space: nowrap;
  font-family: var(--ff-display);
  font-size: 15vw;
  line-height: .9;
  letter-spacing: -.045em;
  color: #ffffff;
  opacity: .045;
  will-change: transform;
}

/* --- Leistungsliste ------------------------------------------------------- */

.services { padding-inline: var(--gutter); }

.services__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2vw;
  padding-bottom: 2.4vw;
  border-bottom: 1px solid var(--line);
}

.service {
  position: relative;
  display: grid;
  grid-template-columns: 5vw minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: baseline;
  gap: 2vw;
  padding-block: 2.2vw;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-med) var(--ease-out);
}

/* Cyan-Linie, die beim Hover von links einfaehrt */
.service::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease-out);
}

.service:hover::after { transform: scaleX(1); }

.service__num {
  font-family: var(--ff-text);
  font-size: clamp(.68rem, .74vw, .84rem);
  letter-spacing: .14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-med) var(--ease-out);
}

.service:hover .service__num { color: var(--accent); }

.service__title {
  font-family: var(--ff-display);
  font-size: clamp(1.35rem, 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--mark);
  transition: color var(--t-med) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

.service:hover .service__title {
  color: var(--fg);
  transform: translateX(.6vw);
}

.service__desc {
  font-size: clamp(.82rem, .92vw, 1rem);
  line-height: 1.58;
  color: var(--muted-2);
  max-width: 46ch;
}

/* --- Vollbild-Stapel -------------------------------------------------------
   Jedes Panel klebt oben fest; das naechste schiebt sich darueber. Der Text
   des verdeckten Panels wandert dabei mit hoch, damit er bis zuletzt mittig
   im sichtbaren Streifen steht — genau die Mechanik der Vorlage.            */

.stack {
  position: relative;
  z-index: 1;
}

.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.panel__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.panel__media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}

/* Abdunkeln plus ein Hauch Cyan aus der oberen Ecke */
.panel__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 78% 12%, rgba(0, 150, 206, .12), rgba(0, 150, 206, 0) 62%),
    linear-gradient(to bottom, rgba(21, 21, 25, .42) 0%, rgba(21, 21, 25, .10) 44%, rgba(21, 21, 25, .62) 100%);
}

.panel__body {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding-inline: var(--gutter);
  will-change: transform;
}

.panel__num {
  display: block;
  margin-bottom: 1.6vw;
  font-size: clamp(.68rem, .76vw, .88rem);
  letter-spacing: .3em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.panel__title {
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 7.4vw, 9rem);
  line-height: .96;
  letter-spacing: -.04em;
  font-weight: 400;
  color: var(--fg);
  margin-bottom: .28em;
}

.panel__lead {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.6vw, 1.8rem);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--fg);
  max-width: 24ch;
  margin: 0 auto .7em;
}

.panel__sub {
  font-size: clamp(.82rem, .95vw, 1.05rem);
  line-height: 1.6;
  color: var(--mark);
  max-width: 40ch;
  margin-inline: auto;
}

/* --- Drei Versprechen ueber Bildern -------------------------------------- */

.promise {
  position: relative;
  padding-block: 8vw 14vw;
}

.promise__head {
  text-align: center;
  margin-bottom: 6vw;
  padding-inline: var(--gutter);
}

.promise__head .h2 { margin-bottom: 1.4vw; }

.promise__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 1.6vw;
  padding-inline: var(--gutter);
  min-height: 46vw;
}

.promise__item {
  position: relative;
  overflow: hidden;
}

.promise__item--1 { margin-top: 0;    }
.promise__item--2 { margin-top: 12vw; }
.promise__item--3 { margin-top: 24vw; }

.promise__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.promise__media img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

.promise__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4vw;
  background: linear-gradient(to top, rgba(21, 21, 25, .92) 12%, rgba(21, 21, 25, 0));
}

.promise__num {
  display: block;
  margin-bottom: 1vw;
  font-size: clamp(.68rem, .74vw, .84rem);
  letter-spacing: .14em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.promise__text {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.5vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--fg);
  max-width: 22ch;
}

/* ==========================================================================
   3 — Portfolio
   Erst vier nummerierte Kategorien im Vierfeld, danach die Bilderwand.
   ========================================================================== */

.cats {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}

.cat {
  position: relative;
  display: block;
  min-height: 52vw;
  padding: 2.4vw var(--gutter) 3vw;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

.cat:nth-child(odd) { border-right: 1px solid var(--line); }

.cat__num {
  position: relative;
  z-index: 3;
  display: block;
  text-align: center;
  font-family: var(--ff-text);
  font-size: clamp(.7rem, .78vw, .9rem);
  letter-spacing: .16em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-med) var(--ease-out);
}

.cat:hover .cat__num { color: var(--accent); }

.cat__media {
  position: absolute;
  inset: 22% 12% 8%;
  z-index: 1;
  overflow: hidden;
}

.cat__media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-out);
  will-change: transform;
}

.cat:hover .cat__media img { transform: scale(1.07); }

.cat__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21, 21, 25, .8) 6%, rgba(21, 21, 25, .05) 60%);
}

.cat__body {
  position: absolute;
  inset: auto 12% 14%;
  z-index: 3;
  text-align: center;
}

.cat__kicker {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.8vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--mark);
  margin-bottom: -.12em;
}

.cat__title {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 4.2vw, 5rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--fg);
}

.cat__desc {
  margin-top: 1.2vw;
  font-size: clamp(.78rem, .88vw, .98rem);
  color: var(--muted-2);
}

/* --- Bilderwand ----------------------------------------------------------- */

.wall {
  position: relative;
  padding: 12vw 0;
  overflow: hidden;
  isolation: isolate;
}

.wall::before {
  content: '';
  position: absolute;
  inset: auto 0 -10vw 0;
  height: 46vw;
  z-index: -1;
  background: radial-gradient(60% 100% at 22% 100%,
              rgba(0, 150, 206, .06), rgba(0, 150, 206, 0) 68%);
  pointer-events: none;
}

.wall__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2vw;
  padding: 0 var(--gutter) 4vw;
}

/* Fuenf Spalten, die beim Scrollen unterschiedlich schnell laufen */
.wall__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6vw;
  padding-inline: var(--gutter);
  align-items: start;
}

.wall__col {
  display: flex;
  flex-direction: column;
  gap: 1.6vw;
  will-change: transform;
}

.wall__col--a { margin-top:  6vw; }
.wall__col--b { margin-top:  0;   }
.wall__col--c { margin-top: 10vw; }
.wall__col--d { margin-top:  2vw; }
.wall__col--e { margin-top:  8vw; }

.wall__item {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-2);
}

.wall__item img {
  width: 100%;
  height: auto;
  transform: scale(1.01);
  transition: transform 1.2s var(--ease-out), opacity var(--t-med) var(--ease-out);
  will-change: transform;
}

.wall__item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
}

.wall__item:hover img { transform: scale(1.06); }
.wall__item:hover::after { opacity: .55; }

/* Wenn ein Bild fokussiert wird, treten die uebrigen zurueck */
.wall__grid:hover .wall__item img { opacity: .48; }
.wall__grid .wall__item:hover img { opacity: 1; }

/* ==========================================================================
   4 — Kontakt
   ========================================================================== */

.contact {
  position: relative;
  padding: 12vw 0 8vw;
  isolation: isolate;
}

/* Weicher Cyan-Schimmer hinter den grossen Kontaktzeilen */
.contact::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 60vw;
  z-index: -1;
  background: radial-gradient(52% 46% at 50% 24%,
              rgba(0, 150, 206, .07), rgba(0, 150, 206, 0) 70%);
  pointer-events: none;
}

.contact__head {
  text-align: center;
  padding-inline: var(--gutter);
  margin-bottom: 6vw;
}

/* --- Grosse Kontaktzeilen ------------------------------------------------- */

.bigline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: 2.6vw var(--gutter);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.bigline:last-of-type { border-bottom: 1px solid var(--line); }

/* Cyan-Flaeche, die beim Hover von unten hochwischt */
.bigline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .7s var(--ease-out);
  z-index: 0;
}

.bigline:hover::before { transform: translateY(0); }

.bigline > * { position: relative; z-index: 1; }

.bigline__text {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--mark);
  transition: color .45s var(--ease-out);
}

.bigline__meta {
  font-size: clamp(.7rem, .8vw, .92rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .45s var(--ease-out);
  white-space: nowrap;
}

.bigline:hover .bigline__text,
.bigline:hover .bigline__meta { color: #fff; }

/* --- Anfrage-Block -------------------------------------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4vw;
  padding: 7vw var(--gutter) 0;
  align-items: start;
}

.contact__aside .h4 { margin-bottom: 1.6vw; }

.contact__facts {
  margin-top: 3vw;
  display: grid;
  gap: 1.2vw;
}

.contact__fact {
  display: grid;
  grid-template-columns: 9vw minmax(0, 1fr);
  gap: 1.2vw;
  padding-bottom: 1.2vw;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.contact__fact dt {
  font-size: clamp(.66rem, .72vw, .82rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__fact dd {
  font-size: clamp(.85rem, .95vw, 1.05rem);
  color: var(--mark);
  margin: 0;
}

/* ==========================================================================
   5 — Formular
   ========================================================================== */

.form { display: grid; gap: 2.2vw; }

.field {
  position: relative;
  display: block;
}

.field__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 1.1vw 0 .9vw;
  font-family: var(--ff-text);
  font-size: clamp(.9rem, 1vw, 1.1rem);
  color: var(--fg);
  transition: border-color var(--t-med) var(--ease-out);
}

textarea.field__input {
  resize: vertical;
  min-height: 8vw;
  line-height: 1.55;
}

.field__input::placeholder { color: transparent; }

.field__label {
  position: absolute;
  left: 0;
  top: 1.1vw;
  font-size: clamp(.9rem, 1vw, 1.1rem);
  color: var(--muted-2);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--t-med) var(--ease-out),
              color var(--t-med) var(--ease-out);
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-1.5em) scale(.7);
  color: var(--muted);
}

.field__input:focus { border-bottom-color: var(--accent); }
.field__input:focus + .field__label { color: var(--accent); }

/* Honeypot — nur fuer Bots sichtbar */
.field--trap {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.consent {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  font-size: clamp(.75rem, .84vw, .92rem);
  line-height: 1.5;
  color: var(--muted-2);
}

.consent input {
  appearance: none;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-top: .22em;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}

.consent input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.consent a { color: var(--mark); text-decoration: underline; text-underline-offset: .22em; }
.consent a:hover { color: var(--accent); }

.btn {
  position: relative;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1em 2.4em;
  border: 1px solid var(--line-strong);
  font-size: clamp(.78rem, .86vw, .96rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .55s var(--ease-out);
  z-index: -1;
}

.btn:hover {
  border-color: var(--accent);
  color: #fff;
}
.btn:hover::before { transform: translateY(0); }

.btn[disabled] { opacity: .45; pointer-events: none; }

/* Rueckmeldung nach dem Absenden */
.form__note {
  font-size: clamp(.8rem, .9vw, 1rem);
  line-height: 1.5;
  padding: 1em 1.2em;
  border-left: 2px solid var(--accent);
  background: var(--surface);
  color: var(--mark);
  display: none;
}

.form__note.is-visible { display: block; }
.form__note[data-state="error"] { border-left-color: #d8544a; }

.field__error {
  display: block;
  margin-top: .5em;
  font-size: clamp(.7rem, .78vw, .86rem);
  color: #d8544a;
  min-height: 1.2em;
}

/* ==========================================================================
   Startzustaende der Choreografie — siehe Erlaeuterung in layout.css
   ========================================================================== */

.js .hero__img {
  clip-path: inset(100% 100% 100% 100%);
  transform: scale(1.8);
  will-change: transform, clip-path;
}

.js .hero__mark-inner {
  transform: translateY(30vw);
  will-change: transform;
}

.js .mark-cyan            { clip-path: inset(0 100% 0 0); }
.js .hero__sub            { opacity: 0; transform: translateY(1.302vw); }
.js .hero__scroll         { opacity: 0; }
.js .claim__line > span   { transform: translateY(105%); }
.js .claim__rule          { transform: scaleX(0); }

/* ==========================================================================
   Verlaufsband unter den vier Kategorien
   Ein breiter Farbverlauf von Grau nach Cyan, der beim Scrollen seitlich
   durchwandert. Oben und unten weich in den Seitenhintergrund ausgeblendet,
   damit die Kante nicht hart abbricht.
   ========================================================================== */

.flow {
  position: relative;
  display: grid;
  place-items: center;
  height: 74vh;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
}

/* Bewusst viel breiter als das Fenster: bewegt wird per transform,
   nicht per background-position — das bleibt fluessig. */
.flow__grad {
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: -104%;
  width: 310%;
  z-index: -3;
  background: linear-gradient(101deg,
    #1a1b20   0%,
    #26272d  14%,
    #2f3d47  30%,
    #2c6a86  46%,
    #0b82b2  60%,
    #0096ce  70%,
    #45c2e8  80%,
    #2a4854  90%,
    #1a1b20 100%);
  will-change: transform;
}

/* Zusaetzliches Leuchten, das beim Scrollen aufzieht */
.flow__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90vw;
  height: 90vw;
  margin: -45vw 0 0 -45vw;
  z-index: -2;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(79, 195, 234, .55) 0%, rgba(0, 150, 206, .18) 38%, rgba(0, 150, 206, 0) 66%);
  will-change: transform, opacity;
}

/* Oben und unten in den Seitenhintergrund ueberblenden */
.flow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--bg) 0%, rgba(21, 21, 25, 0) 24%,
    rgba(21, 21, 25, 0) 76%, var(--bg) 100%);
  pointer-events: none;
}

/* Dunkler Kern hinter der Zeile: haelt den Text lesbar, egal wo der
   Verlauf gerade steht. */
.flow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(44% 46% at 50% 50%,
    rgba(10, 10, 12, .58), rgba(10, 10, 12, 0) 72%);
  pointer-events: none;
}

.flow__line {
  position: relative;
  text-align: center;
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 5vw, 6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--fg);
  text-shadow: 0 .06em .5em rgba(8, 10, 14, .35);
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Bewegtbild
   Fuenf hochformatige Platzhalter. Die Videos laufen stumm und nur solange
   sie im Bild sind — das spart Akku und Datenvolumen.
   ========================================================================== */

.reels { padding: 9vw var(--gutter) 2vw; }

.reels__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2vw;
  padding-bottom: 2.4vw;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4vw;
}

.reels__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4vw;
  align-items: start;
}

.reel { position: relative; margin: 0; }

/* Leicht versetzte Hoehen geben der Reihe Rhythmus */
.reel:nth-child(2) { margin-top: 3.4vw; }
.reel:nth-child(3) { margin-top: 1.2vw; }
.reel:nth-child(4) { margin-top: 4.8vw; }
.reel:nth-child(5) { margin-top: 2.2vw; }

.reel__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--surface-2);
}

.reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 1.2s var(--ease-out);
  will-change: transform;
}

.reel:hover .reel__video { transform: scale(1.07); }

.reel__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
}

.reel:hover .reel__frame::after { opacity: .6; }

.reel__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: .9vw;
}

.reel__num {
  font-size: clamp(.62rem, .7vw, .8rem);
  letter-spacing: .16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.reel__name {
  font-size: clamp(.68rem, .78vw, .88rem);
  letter-spacing: .06em;
  color: var(--muted-2);
}

/* Beim Ueberfahren eines Films treten die uebrigen zurueck */
.reels__row:hover .reel__video { opacity: .5; }
.reels__row .reel:hover .reel__video { opacity: 1; }
.reel__video { transition: transform 1.2s var(--ease-out), opacity var(--t-med) var(--ease-out); }

/* ==========================================================================
   Bilderwand: Duplex-Optik, Farbe beim Ueberfahren
   --------------------------------------------------------------------------
   Umgesetzt rein ueber CSS-Filter, es braucht also keine zweite Bilddatei:

     grayscale(1)   nimmt die Originalfarbe komplett heraus
     sepia(1)       legt die Grautoene auf eine einfarbige Rampe
     hue-rotate()   dreht diese Rampe vom Sepia-Braun ins Marken-Cyan
     saturate()     bestimmt, wie kraeftig der Duplex ausfaellt
     brightness/contrast  gleichen aus, was die Rampe an Tiefe kostet

   Die vier Werte stehen als Variablen direkt darueber — zum Nachjustieren
   reicht es, diese anzupassen. --duo-sat: 0 ergibt reine Graustufen.
   ========================================================================== */

.wall {
  --duo-hue:    158deg;   /* Sepia (~40 Grad) plus 158 ergibt das Cyan */
  --duo-sat:    1.5;      /* 0 = reine Graustufen, 1.5 = dezenter Duplex, 3 = sehr kraeftig */
  --duo-bright: .92;
  --duo-contr:  1.06;
}

.wall__item img {
  filter:
    grayscale(1)
    sepia(1)
    hue-rotate(var(--duo-hue))
    saturate(var(--duo-sat))
    brightness(var(--duo-bright))
    contrast(var(--duo-contr));
  /* Enthaelt bewusst auch transform und opacity, weil diese Regel die
     transition-Angabe weiter oben ersetzt. */
  transition:
    transform 1.2s var(--ease-out),
    opacity var(--t-med) var(--ease-out),
    filter .55s var(--ease-out);
}

/* Das angesteuerte Bild bekommt seine Farbe zurueck — auch bei
   Tastaturbedienung, nicht nur mit der Maus. */
.wall__item:hover img,
.wall__item:focus-visible img {
  filter: none;
}

/* Auf Touch-Geraeten gibt es kein Ueberfahren. Dort blieben die Arbeiten
   sonst dauerhaft entfaerbt — deshalb dort durchgehend in Farbe. */
@media (hover: none), (pointer: coarse) {
  .wall__item img { filter: none; }
}