/* ══════════════════════════════════════════════════════════════
   Die Filmemacher – HTML-Entwurf nach PSD (1920 px breit)
   Maße aus der PSD stehen jeweils als Obergrenze im clamp().
══════════════════════════════════════════════════════════════ */

:root {
  --dunkel: #17120f;
  --text-dunkel: #1d1d1b;
  --weiss: #fff;
  --karte: rgba(230, 230, 230, .86);
  --fehler: #b3261e;

  --schrift: 'PT Sans', system-ui, sans-serif;
  --schrift-karte: 'Raleway', system-ui, sans-serif;

  --breite: 1142px;                        /* Inhaltsbreite laut PSD (x 389–1531) */
  --rand: 16px;
  --kante: clamp(36px, 8.85vw, 170px);     /* Tiefe der schrägen Sektionskanten */
  --nr: clamp(54px, 4.75vw, 91px);         /* Fadenkreuz */
  --nr-abstand: clamp(46px, 4.2vw, 80px);  /* Kantenspitze → Mitte Fadenkreuz */
  --strich: clamp(48px, 4.7vw, 90px);

  --klein: clamp(17px, 1.3vw, 25px);
  --gross: clamp(32px, 2.6vw, 50px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dunkel);
  color: var(--weiss);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
figure, p, h1, h2, ul, address { margin: 0; }

.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;
}

/* ─── Gemeinsame Bausteine ─────────────────────────────────── */

.logo {
  display: block;
  aspect-ratio: 1005.3 / 472.3;
  background: currentColor;
  -webkit-mask: url('../img/logo.svg') center / contain no-repeat;
  mask: url('../img/logo.svg') center / contain no-repeat;
}

.strich {
  display: block;
  width: 2px;
  height: var(--strich);
  margin-inline: auto;
  background: var(--weiss);
}

.titel {
  font-size: var(--gross);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
}
.titel span {
  display: block;
  margin-bottom: .35em;
  font-size: var(--klein);
  font-weight: 400;
  text-transform: none;
}

.nummer {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--nr);
  height: var(--nr);
  margin: calc(var(--nr-abstand) - var(--nr) / 2) auto 0;
  color: var(--weiss);
}
.nummer svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.nummer .zahl {
  position: relative;
  top: .055em;          /* Zeilenbox zentriert, die Ziffer säße sonst 0,055 em zu hoch (gemessen) */
  grid-area: 1 / 1;
  font-size: calc(var(--nr) * .36);
  line-height: 1;
}
/* Aufblitzen wie im Startband, wenn die Zahl erscheint */
.nummer .blitz {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
}

.inhalt {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  text-align: center;
}

/* ─── Sektionen mit schrägen Kanten ────────────────────────── */

.sek {
  display: flow-root;   /* Margins der Kinder nicht mit der negativen Überlappung verrechnen */
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.sek + .sek {
  margin-top: calc(-1 * var(--kante));
  padding-top: var(--kante);
}

/* Unterkante als V (Spitze in der Mitte) */
.hero, .film, .referenzen {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kante)), 50% 100%, 0 calc(100% - var(--kante)));
}
/* Team: eine durchgehende Schräge, links höher */
.team {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--kante)));
}

.hero       { z-index: 5; }
.team       { z-index: 4; }
.film       { z-index: 3; }
.referenzen { z-index: 2; }
.kontakt    { z-index: 1; }

.sek-hintergrund {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Hero ─────────────────────────────────────────────────── */

.hero {
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  background: #0b0d0f;
}

.hero-medien { position: absolute; inset: 0; z-index: -1; }
.hero-medien::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .25), transparent 22%, transparent 62%, rgba(0, 0, 0, .35));
}
.hero-standbild,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video { opacity: 0; transition: opacity 1.2s ease; }
.hero-video.laeuft { opacity: 1; }

.hero-kontakt {
  position: absolute;
  top: clamp(14px, 1.5vw, 29px);
  right: max(var(--rand), (100% - var(--breite)) / 2);
  display: flex;
  gap: clamp(20px, 2.6vw, 50px);
}
.hero-kontakt a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--weiss);
}
.hero-kontakt svg {
  width: clamp(24px, 1.6vw, 32px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: square;
  transition: opacity .2s;
}
.hero-kontakt a:hover svg { opacity: .7; }

.hero-logo {
  width: clamp(250px, 36vw, 693px);
  margin-bottom: calc(var(--kante) * .9);
  color: var(--weiss);
}
/* Logo wird gezeichnet wie auf der alten Seite: erst der Rahmen, dann die Senkrechte,
   der Schriftzug blendet ein. Das SVG erzeugt werkzeuge/web_erzeugen.py in index.html. */
.logo-zeichnung { display: block; width: 100%; height: auto; }
.logo-zeichnung .zug {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-miterlimit: 10;
}
.logo-zeichnung .wort { fill: currentColor; }
/* Länge, Dauer und Verzug stehen als --laenge/--dauer/--verzug am jeweiligen Pfad;
   web_erzeugen.py rechnet sie aus der Geometrie, damit beide Striche wie eine
   durchgehende Linie wirken, die der Schriftzug unterbricht. */
.js .logo-zeichnung .zug {
  stroke-dasharray: var(--laenge);
  stroke-dashoffset: var(--laenge);
  animation: logo-zeichnen var(--dauer) var(--verzug) linear forwards;
}
.js .logo-zeichnung .wort { opacity: 0; animation: logo-einblenden var(--dauer) var(--verzug) ease forwards; }

@keyframes logo-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes logo-einblenden { to { opacity: 1; } }

.hero-unten {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  text-align: center;
}
.hero-claim {
  margin-bottom: clamp(18px, 1.5vw, 28px);
  font-size: clamp(13px, .85vw, 16px);
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── 1 · Team ─────────────────────────────────────────────── */

.team { background: #0a1a1d; }
.team .sek-hintergrund { object-position: 0% 20%; }
.team .titel { margin-top: clamp(40px, 5.9vw, 114px); }

.personen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 3.2vw, 61px);
  margin-top: clamp(28px, 3.1vw, 59px);
}
.person {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, .9vw, 17px);
}
.person--links  { flex-direction: row-reverse; }   /* Kontaktdaten außen neben dem Portrait */
.person img {
  width: clamp(140px, 11.1vw, 213px);
  height: auto;
  flex: none;
}
.person figcaption {
  margin-bottom: clamp(10px, 1vw, 20px);
  font-size: clamp(14px, .85vw, 16px);
  line-height: 1.15;
}
.person--links figcaption  { text-align: right; }
.person--rechts figcaption { text-align: left; }
.person figcaption a { display: block; text-decoration: none; }
.person figcaption a:hover { text-decoration: underline; }

.team-text {
  max-width: 1010px;
  margin: clamp(28px, 3vw, 58px) auto 0;
  font-size: var(--klein);
  line-height: 1.3;
}
.team .strich {
  margin-top: clamp(48px, 6.8vw, 131px);
  margin-bottom: calc(var(--kante) / 2 + clamp(10px, 1.25vw, 24px));
}

/* ─── 2 · Film ─────────────────────────────────────────────── */

.film { background: #2a2118; }
/* Oberkante ist die Team-Schräge: deren Mitte liegt nur eine halbe Kante tief */
.film .nummer { margin-top: calc(var(--nr-abstand) - var(--nr) / 2 - var(--kante) / 2); }
.film .titel { margin-top: clamp(40px, 3.7vw, 71px); }
.film .titel + .strich { margin-top: clamp(24px, 2.5vw, 48px); }

/* Begriffe laufen wie auf einer Filmrolle: Mauszeiger (oder Scrollen) dreht sie durch,
   der Begriff in der Mitte ist fett und größer, nach oben und unten läuft es aus. */
.rolle {
  --zeile: calc(clamp(24px, 2.08vw, 40px) * 1.7);
  margin: clamp(22px, 2.2vw, 42px) 0 clamp(26px, 2.8vw, 53px);
}
.rolle.bereit {
  position: relative;
  height: calc(var(--zeile) * 7);
  overflow: hidden;
  cursor: ns-resize;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.leistungen {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(24px, 2.08vw, 40px);
  line-height: 1.7;
}
.rolle.bereit .leistungen { position: absolute; inset: 0; }
.rolle.bereit li {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: calc(var(--zeile) / -2);
  height: var(--zeile);
  transition: font-weight .2s ease;
  will-change: transform, opacity;
}
.rolle.bereit li.mitte { font-weight: 700; }
.film .strich:last-child { margin-bottom: clamp(30px, 3vw, 58px); }

/* ─── 3 · Referenzen – Filmstreifen ────────────────────────── */

.referenzen { background: var(--dunkel); }
.referenzen .nummer { z-index: 3; }

.referenzen .titel { margin-top: clamp(40px, 5.9vw, 114px); }

.streifen {
  --bild-b: clamp(250px, 35.7vw, 686px);
  width: 112%;
  margin: clamp(48px, 6.5vw, 125px) 0 0 -6%;
  transform: rotate(2.4deg);
}
.streifen-swiper { overflow: visible; }
.streifen .swiper-slide { width: var(--bild-b); }

.bild {
  position: relative;
  aspect-ratio: 1780 / 1621;
  user-select: none;
}
/* Fenster der gezeichneten Filmkachel – Werte gibt werkzeuge/web_erzeugen.py aus
   (2,25 % / 15,05 %, 95,51 × 69,90 %); hier minimal größer, damit das Foto unter dem
   Filmrand verschwindet und an den Kanten nichts durchblitzt */
.bild-foto,
.bild-play {
  position: absolute;
  left: 2.0%;
  top: 14.8%;
  width: 96.0%;
  height: 70.4%;
}
.bild-foto {
  object-fit: cover;
  filter: grayscale(1) contrast(.62) brightness(1.12);
  transition: filter .6s ease;
}
.bild-rahmen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Randbeschriftung wie auf echtem Film */
.bild-rahmen .kante {
  fill: #c3a768;
  font-family: var(--schrift);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 5px;
}
.swiper-slide-active .bild-foto { filter: none; }

.bild-play {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--weiss);
  cursor: pointer;
}
.bild-play::before {
  content: '';
  width: clamp(48px, 4.2vw, 80px);
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath fill='%23fff' d='M0 0l10 6-10 6z'/%3E%3C/svg%3E") 56% 50% / 30% no-repeat,
    rgba(0, 0, 0, .28);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .4s, transform .4s;
}
.swiper-slide-active .bild-play::before { opacity: .92; transform: none; }
.swiper-slide-active .bild-play:hover::before,
.swiper-slide-active .bild-play:focus-visible::before { opacity: 1; transform: scale(1.06); }
.bild-play:focus-visible { outline: 2px solid var(--weiss); outline-offset: -6px; }

.streifen-steuerung {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: clamp(44px, 5.7vw, 110px) auto 0;
}
.bildtext { transition: opacity .35s ease, transform .35s ease; }
.bildtext.wechselt { opacity: 0; transform: translateY(6px); }
.bildtext-kunde {
  display: block;
  font-size: clamp(13px, 1.25vw, 24px);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bildtext-titel {
  display: block;
  font-size: clamp(22px, 2.03vw, 39px);
  line-height: 1.2;
}

.pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--weiss);
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s;
}
.pfeil::before {
  content: '';
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateX(3px) rotate(-45deg);
}
.pfeil--weiter::before { transform: translateX(-3px) rotate(135deg); }
.pfeil:hover { opacity: 1; }

.referenzen .strich {
  margin-top: clamp(30px, 3.3vw, 63px);
  margin-bottom: clamp(16px, 2.3vw, 44px);
}

/* ─── 4 · Kontakt ──────────────────────────────────────────── */

.kontakt {
  /* Der Himmel ist ein Verlauf in den Farben des Fotos (an dessen oberer Hälfte abgenommen).
     Das Foto sitzt unten, ist oben weich ausgeblendet und geht nahtlos in den Verlauf über.
     Dadurch liegt das Formular in jeder Auflösung auf ruhigem Himmel, und Wiese samt Kirche
     bleiben immer im Bild – ganz gleich, wie hoch die Sektion gerade ist. */
  /* Verlauf in den Farben des Fotohimmels – sichtbar, falls das Foto einmal nicht lädt */
  background: linear-gradient(to bottom, #1c3251 0%, #2e4363 18%, #495f7e 38%, #657b99 58%, #7d93aa 78%);
  /* Hoch genug, dass der Himmel im Foto das ganze Formular trägt: Der Horizont liegt bei 55 %
     der Bildhöhe, das Formular endet darüber. Auf flachen Fenstern begrenzt 150svh die Höhe. */
  min-height: min(calc(100vw / 1.17), 165svh);
  display: flex;
  flex-direction: column;
}
.kontakt > .inhalt { flex: 1; display: flex; flex-direction: column; }
.kontakt-raster { flex: 1; }
/* Unten ausrichten – Wiese und Kirche bleiben in jeder Auflösung im Bild */
.kontakt .sek-hintergrund { object-position: 70% 100%; }
/* Darüber ein Himmelsschleier: Er zieht die obere Hälfte in die Farbe des Himmels, damit das
   Formular dort immer auf ruhigem Grund liegt – egal, wie weit das Foto gerade beschnitten ist. */
.kontakt .titel { margin-top: clamp(36px, 2.6vw, 50px); }

/* links: Kleingedrucktes oben, Karte unten · rechts: Formular */
.kontakt-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    ".     formular"
    "karte formular";
  column-gap: clamp(24px, 4vw, 70px);
  align-items: start;
  margin-top: clamp(20px, 2vw, 36px);
  text-align: left;
}
.formular { grid-area: formular; justify-self: end; width: min(100%, 440px); }
.karte    { grid-area: karte; align-self: end; width: min(100%, 460px); }

.feld { position: relative; margin-bottom: 7px; }
/* Felder liegen im Himmel: nur eine dünne weiße Linie, keine Fläche */
.feld input,
.feld textarea {
  display: block;
  width: 100%;
  padding: 18px 13px 5px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 0;
  background: transparent;
  color: var(--weiss);
  font: 16px/1.3 var(--schrift);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.feld textarea { min-height: 64px; resize: vertical; }
.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--weiss);
  box-shadow: 0 0 0 1px var(--weiss);
}
/* Chrome füllt ausgefüllte Felder sonst weiß */
.feld input:-webkit-autofill,
.feld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--weiss);
  transition: background-color 9999s;
}
.feld label {
  position: absolute;
  left: 14px;
  top: 13px;
  color: rgba(255, 255, 255, .85);
  font-size: 16px;
  line-height: 1.2;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .2s ease, color .2s;
}
.feld input:focus + label,
.feld input:not(:placeholder-shown) + label,
.feld textarea:focus + label,
.feld textarea:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(.72);
}
.feld.fehler input,
.feld.fehler textarea { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler); }
.feld.fehler label { color: #ffc4c0; }

/* Einwilligung statt Kleingedrucktem – der lange Text steht in der Datenschutzerklärung */
.zustimmung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.zustimmung input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1px solid rgba(255, 255, 255, .7);
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.zustimmung input:checked::after {
  content: '';
  display: block;
  width: 6px;
  height: 11px;
  margin: 1px auto 0;
  border: solid var(--weiss);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.zustimmung input:focus-visible { outline: 2px solid var(--weiss); outline-offset: 2px; }
.zustimmung.fehler input { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler); }

.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Einwilligung und Button nebeneinander – hält das Formular flach genug für den Himmel */
.abschluss {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  margin-top: 14px;
}
.abschluss .zustimmung { flex: 1; }

.senden {
  flex: none;
  margin-top: 0;
  padding: 13px 26px;
  border: 0;
  background: var(--dunkel);
  color: var(--weiss);
  font: 700 15px/1 var(--schrift);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
.senden:hover { background: #000; }
.senden:focus-visible { outline: 2px solid var(--weiss); outline-offset: 2px; }

.formular-meldung {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(23, 18, 15, .86);
  font-size: 16px;
}

.karte {
  --schraeg: clamp(48px, 5vw, 86px);    /* PSD: 43 px Gefälle auf 222 px Breite */
  margin-top: clamp(40px, 5vw, 90px);
  padding: calc(var(--schraeg) + 18px) clamp(20px, 1.5vw, 28px) 26px;
  background: var(--karte);
  color: var(--text-dunkel);
  font-family: var(--schrift-karte);
  clip-path: polygon(0 0, 100% var(--schraeg), 100% 100%, 0 100%);
}
.logo--karte { width: min(62%, 241px); margin-bottom: 20px; color: var(--text-dunkel); }
.karte address {
  font-style: normal;
  font-size: clamp(16px, 1.2vw, 21px);
  line-height: 1.25;
}
.karte address a { text-decoration: none; }
.karte address a:hover { text-decoration: underline; }
.karte-links {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  font-size: 14px;
}

/* ─── Video-Lightbox ───────────────────────────────────────── */

.kino {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--weiss);
}
.kino[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.kino::backdrop { background: rgba(8, 6, 5, .94); }
.kino-video {
  width: min(92vw, 1280px, 82vh * 16 / 9);
  width: min(92vw, 1280px, 82dvh * 16 / 9);
  height: auto;
  background: #000;
}
.kino-video.hoch {   /* Social-Media-Hochformat */
  width: auto;
  height: min(82vh, 92vw * 16 / 9);
  height: min(82dvh, 92vw * 16 / 9);
}
.kino-titel { font-size: 18px; text-align: center; padding-inline: var(--rand); }
.kino-zu {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.kino-zu::before,
.kino-zu::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 23px;
  width: 24px;
  height: 2px;
  background: var(--weiss);
  transform: rotate(45deg);
}
.kino-zu::after { transform: rotate(-45deg); }

/* ─── Scroll-Animationen (Reset beim Zurückscrollen) ───────── */

.js [data-animate] { transition: opacity .9s ease, transform .9s ease; }
.js [data-animate]:not(.sichtbar) { opacity: 0; transform: translateY(26px); }

/* Team: Thomas kommt von links, Resi von rechts, die Kontaktdaten folgen aus derselben Richtung */
.js .person[data-animate]:not(.sichtbar) { opacity: 1; transform: none; }
.js .person img { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1); }
.js .person figcaption { transition: opacity .6s ease .45s, transform .6s ease .45s; }
.js .person:not(.sichtbar) img,
.js .person:not(.sichtbar) figcaption { opacity: 0; }
.js .person--links:not(.sichtbar) img       { transform: translateX(-70px); }
.js .person--rechts:not(.sichtbar) img      { transform: translateX(70px); }
.js .person--links:not(.sichtbar) figcaption  { transform: translateX(-28px); }
.js .person--rechts:not(.sichtbar) figcaption { transform: translateX(28px); }

/* Marken: erst fährt das Fadenkreuz scharf, dann kommt die Zahl */
.js [data-animate="marke"]:not(.sichtbar) { opacity: 1; transform: none; }
.js [data-animate="marke"] svg { transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); }
.js [data-animate="marke"] .zahl { transition: opacity .14s ease .52s, transform .14s ease .52s; }
.js [data-animate="marke"]:not(.sichtbar) svg { opacity: 0; transform: scale(1.5); }
.js [data-animate="marke"]:not(.sichtbar) .zahl { opacity: 0; transform: scale(.88); }
.js [data-animate="marke"].sichtbar .blitz { animation: marke-blitz .4s .45s ease-out; }

@keyframes marke-blitz {
  0%   { opacity: 0; transform: scale(.5); }
  30%  { opacity: .9; }
  100% { opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-animate],
  .js [data-animate]:not(.sichtbar) { opacity: 1; transform: none; transition: none; }
  .hero-video { display: none; }
  .js .logo-zeichnung .zug { stroke-dashoffset: 0; animation: none; }
  .js .logo-zeichnung .wort { opacity: 1; animation: none; }
  .js [data-animate="marke"] svg,
  .js [data-animate="marke"] .zahl,
  .js [data-animate="marke"]:not(.sichtbar) svg,
  .js [data-animate="marke"]:not(.sichtbar) .zahl { opacity: 1; transform: none; transition: none; }
  .js [data-animate="marke"] .blitz,
  .js [data-animate="marke"].sichtbar .blitz { opacity: 0; animation: none; }
  .js .person img,
  .js .person figcaption,
  .js .person:not(.sichtbar) img,
  .js .person:not(.sichtbar) figcaption { opacity: 1; transform: none; transition: none; }
}

/* ─── Handy ────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .hero-logo { width: min(78vw, 340px); }
  /* Hochformat schneidet das 2,35:1-Video stark zu – Ausschnitt eher links (Kreuz im Standbild) */
  .hero-standbild, .hero-video { object-position: 32% 50%; }

  .personen { column-gap: 14px; }
  .person,
  .person--links { flex-direction: column; align-items: center; justify-content: flex-end; }
  .person img { width: 100%; max-width: 170px; }
  .person figcaption,
  .person--links figcaption,
  .person--rechts figcaption {
    margin: 10px 0 0;
    font-size: 13px;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .team-text br { display: none; }

  .streifen { --bild-b: 74vw; width: 130%; margin-left: -15%; transform: rotate(2deg); }
  .streifen-steuerung { gap: 4px; }

  /* Am Handy sind nur die Eingabefelder weiß hinterlegt – der Rest bleibt wie am Desktop */
  .feld input,
  .feld textarea {
    border-color: rgba(29, 29, 27, .25);
    background: rgba(255, 255, 255, .9);
    color: var(--text-dunkel);
  }
  .feld input:focus,
  .feld textarea:focus {
    border-color: var(--text-dunkel);
    background: #fff;
    box-shadow: 0 0 0 1px var(--text-dunkel);
  }
  .feld label { color: #5d5851; }
  .feld input:-webkit-autofill,
  .feld input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-dunkel); }
  .abschluss { flex-direction: column; align-items: stretch; gap: 16px; }
  .senden { align-self: flex-start; }
  .kontakt-raster {
    grid-template-columns: 1fr;
    grid-template-areas: "formular" "karte";
    row-gap: 24px;
  }
  .formular, .karte { width: 100%; }
  .karte { margin-inline: calc(-1 * var(--rand)); padding-inline: 20px; width: auto; }
}