/* ==========================================================
   Frederick Pietsch, Video Editor
   Schwarz, Karopapier, Rot und Blau wie im Showreel
   ========================================================== */

/* ---------- Schrift (lokal, kein fremder Server) ----------
   Archivo ist eine einzige Schriftdatei mit verstellbarer Breite:
   sehr schmal und fett für Überschriften, normal für Text. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --titel: "Anton", "Archivo", Impact, "Arial Narrow", sans-serif;
  --schwarz: #0b0b0b;
  --kalk: #ece8e1;
  --grau: #a8a39b;
  --linie: rgba(236, 232, 225, 0.2);
  --flaeche: #171717;

  /* Die zwei Farben aus dem Showreel: roter Filzstift, blaue Karolinien */
  --rot: #e63b2e;
  --blau: #3f86c9;

  --schrift: "Archivo", "Arial Narrow", Arial, sans-serif;
  --rand: clamp(20px, 5vw, 64px);
  --breite: 1280px;
  --abstand: clamp(72px, 10vw, 140px);
  --karo: 64px;
  /* Feines, stillstehendes Filmkorn für die schwarzen Flächen */
  --korn: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.3 -0.12%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E");
  --wellenform: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1040 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M1 38V62M5 39V61M9 32V68M13 38V62M17 31V69M21 32V68M25 36V64M29 27V73M33 35V65M37 26V74M41 33V67M45 32V68M49 24V76M53 13V87M57 29V71M61 26V74M65 15V85M69 6V94M73 15V85M77 20V80M81 3V97M85 28V72M89 6V94M93 21V79M97 25V75M101 26V74M105 21V79M109 7V93M113 25V75M117 14V86M121 13V87M125 20V80M129 16V84M133 30V70M137 30V70M141 27V73M145 16V84M149 23V77M153 27V73M157 40V60M161 42V58M165 43V57M169 40V60M173 41V59M177 44V56M181 43V57M185 44V56M189 42V58M193 44V56M197 46V54M201 43V57M205 46V54M209 34V66M213 27V73M217 36V64M221 29V71M225 36V64M229 24V76M233 20V80M237 23V77M241 16V84M245 27V73M249 18V82M253 19V81M257 19V81M261 21V79M265 12V88M269 8V92M273 20V80M277 15V85M281 30V70M285 13V87M289 15V85M293 6V94M297 11V89M301 24V76M305 22V78M309 15V85M313 32V68M317 21V79M321 29V71M325 30V70M329 32V68M333 17V83M337 32V68M341 30V70M345 27V73M349 19V81M353 35V65M357 29V71M361 28V72M365 23V77M369 26V74M373 26V74M377 36V64M381 34V66M385 36V64M389 31V69M393 31V69M397 40V60M401 39V61M405 37V63M409 37V63M413 32V68M417 43V57M421 45V55M425 46V54M429 43V57M433 43V57M437 42V58M441 40V60M445 41V59M449 42V58M453 41V59M457 41V59M461 45V55M465 39V61M469 21V79M473 19V81M477 21V79M481 28V72M485 28V72M489 34V66M493 24V76M497 35V65M501 35V65M505 33V67M509 34V66M513 31V69M517 36V64M521 37V63M525 35V65M529 36V64M533 32V68M537 38V62M541 25V75M545 30V70M549 37V63M553 36V64M557 35V65M561 35V65M565 39V61M569 29V71M573 28V72M577 35V65M581 35V65M585 40V60M589 41V59M593 38V62M597 38V62M601 31V69M605 39V61M609 40V60M613 28V72M617 33V67M621 38V62M625 33V67M629 40V60M633 33V67M637 26V74M641 27V73M645 30V70M649 36V64M653 34V66M657 37V63M661 28V72M665 31V69M669 28V72M673 34V66M677 45V55M681 42V58M685 41V59M689 42V58M693 42V58M697 42V58M701 42V58M705 45V55M709 44V56M713 45V55M717 46V54M721 46V54M725 45V55M729 36V64M733 30V70M737 27V73M741 34V66M745 28V72M749 27V73M753 28V72M757 36V64M761 38V62M765 38V62M769 39V61M773 39V61M777 34V66M781 31V69M785 32V68M789 36V64M793 34V66M797 32V68M801 40V60M805 33V67M809 29V71M813 30V70M817 30V70M821 34V66M825 37V63M829 29V71M833 35V65M837 28V72M841 25V75M845 33V67M849 33V67M853 24V76M857 27V73M861 36V64M865 36V64M869 36V64M873 23V77M877 24V76M881 35V65M885 24V76M889 21V79M893 26V74M897 32V68M901 28V72M905 35V65M909 37V63M913 21V79M917 27V73M921 29V71M925 22V78M929 31V69M933 24V76M937 41V59M941 45V55M945 45V55M949 45V55M953 45V55M957 43V57M961 45V55M965 45V55M969 46V54M973 43V57M977 45V55M981 45V55M985 45V55M989 30V70M993 35V65M997 28V72M1001 33V67M1005 32V68M1009 31V69M1013 38V62M1017 31V69M1021 34V66M1025 37V63M1029 22V78M1033 33V67M1037 27V73%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--schwarz);
}

body {
  margin: 0;
  background: var(--korn) 0 0 / 240px 240px fixed, var(--schwarz);
  color: var(--kalk);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }

/* Überschriften: schmal, fett, in Großbuchstaben */
h1, h2, h3 {
  margin: 0;
  font-family: var(--titel);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(3.4rem, 11vw, 9rem); }
h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.karofeld :focus-visible { outline-color: var(--schwarz); }

::selection { background: var(--rot); color: var(--schwarz); }

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.nur-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprung {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--kalk);
  color: var(--schwarz);
  padding: 10px 16px;
  z-index: 100;
}
.sprung:focus { top: 12px; }

.einleitung {
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  max-width: 36em;
}
.leise { color: var(--grau); }

/* ---------- Knopf: die eine Handlungsaufforderung ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 30px;
  background: var(--kalk);
  color: var(--schwarz);
  font: inherit;
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--kalk);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.knopf:hover { background: var(--rot); border-color: var(--rot); transform: rotate(-1.5deg); }
.knopf:active { transform: scale(0.98); }
.knopf--klein { min-height: 44px; padding: 8px 20px; font-size: 0.9375rem; }
.kopf .knopf { background: transparent; color: var(--kalk); }
.kopf .knopf:hover { background: var(--rot); color: var(--schwarz); }
.knopf--dunkel { background: var(--schwarz); color: var(--kalk); border-color: var(--schwarz); }
.knopf--dunkel:hover { background: var(--rot); border-color: var(--rot); color: var(--schwarz); }

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--korn) 0 0 / 240px 240px fixed, var(--schwarz);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--rot);
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: left center;
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  text-decoration: none;
}
.logo__zeichen {
  position: relative;
  width: 44px; height: 26px;
  flex: none;
}
.logo__zeichen::before,
.logo__zeichen::after {
  content: "";
  position: absolute;
  height: 11px;
  border-radius: 2px;
}
.logo__zeichen::before,
.logo__zeichen::after { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.logo:hover .logo__zeichen::before { transform: translateX(14px); }
.logo:hover .logo__zeichen::after { transform: translateX(-10px); }
.logo__zeichen::before { left: 0; top: 0; width: 30px; background: var(--rot); }
.logo__zeichen::after { right: 0; bottom: 0; width: 34px; background: var(--kalk); }

.nav { display: flex; align-items: center; gap: 36px; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.nav__link:hover,
.nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

.menue-knopf {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0 8px 12px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--kalk);
  cursor: pointer;
}
.menue-knopf__striche { position: relative; width: 22px; height: 12px; }
.menue-knopf__striche::before,
.menue-knopf__striche::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}
.menue-knopf__striche::before { top: 0; }
.menue-knopf__striche::after { bottom: 0; }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { top: 5px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { bottom: 5px; transform: rotate(-45deg); }

/* ---------- Karopapier: helle Fläche mit blauen Linien ---------- */
.karofeld {
  background-color: var(--kalk);
  background-image:
    linear-gradient(rgba(63, 134, 201, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 134, 201, 0.34) 1px, transparent 1px);
  background-size: var(--karo) var(--karo);
  color: var(--schwarz);
}
.blatt { border-radius: 3px; }

/* ---------- Startbereich ---------- */
.start { padding-top: clamp(20px, 3vw, 44px); }
.riesig-rahmen { container-type: inline-size; }
.riesig {
  font-size: 20.6cqw;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  margin-left: -0.03em;
}
.start__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px clamp(28px, 5vw, 72px);
  padding-block: clamp(24px, 3vw, 40px) clamp(36px, 5vw, 64px);
}
.start__zeile p { margin: 0; max-width: 30em; }

.buehne {
  padding: clamp(18px, 3vw, 44px);
}
.buehne__oben {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: end;
  gap: clamp(20px, 4vw, 56px);
}
.buehne__film { position: relative; }
.buehne__film::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid var(--schwarz);
  border-radius: 4px;
  filter: url(#skizze);
  pointer-events: none;
  z-index: 2;
}
.buehne__notiz h2 { margin-bottom: 14px; }
.buehne__notiz p { max-width: 24em; }

/* ---------- Zeitleiste: Leistungen als Clips wie im Schnittprogramm ---------- */
.zeitleiste {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 10px;
  margin-top: clamp(26px, 4vw, 48px);
  --kopf: calc(54.1667% - 3px);
}
.zeitleiste__lineal {
  grid-column: 2;
  height: 18px;
  border-bottom: 2px solid var(--schwarz);
  background-image: linear-gradient(90deg, var(--schwarz) 2px, transparent 2px);
  background-size: calc(100% / 12) 100%;
}
.zeitleiste__namen {
  grid-column: 1;
  display: grid;
  grid-auto-rows: 54px;
  gap: 8px;
  padding-top: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  align-items: center;
}
.zeitleiste__feld { grid-column: 2; position: relative; padding-top: 10px; }
.zeitleiste__spuren {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-auto-rows: 54px;
  gap: 8px 0;
  list-style: none;
  margin: 0; padding: 0;
  background-image: linear-gradient(rgba(11, 11, 11, 0.07) 54px, transparent 54px);
  background-size: 100% 62px;
}
.clip {
  grid-row: var(--z);
  grid-column: var(--a) / var(--e);
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 14px 0 18px;
  margin-right: 4px;
  background: var(--f, var(--rot));
  color: var(--schwarz);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: inset 6px 0 0 rgba(11, 11, 11, 0.28);
}
.clip--blau { --f: var(--blau); }
.clip--dunkel { --f: var(--schwarz); color: var(--kalk); box-shadow: inset 6px 0 0 rgba(236, 232, 225, 0.3); }
/* Der Abspielkopf färbt ein, was er überfahren hat: Text und Wellenform bekommen links von ihm eine zweite Farbe.
   --k ist der Abstand des Abspielkopfs vom linken Rand des jeweiligen Elements und wird vom Skript gesetzt. */
.clip span,
.welle {
  background-image: linear-gradient(90deg, var(--an, var(--kalk)) var(--k, 0px), var(--aus, var(--schwarz)) var(--k, 0px));
}
.clip span {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.clip--dunkel span { --an: var(--rot); --aus: var(--kalk); }

/* Tonspur: stilisierte Wellenform */
.clip--ton { position: relative; }
.welle {
  --aus: rgba(11, 11, 11, 0.5);
  position: absolute;
  left: 176px; right: 12px;
  top: 14%; height: 72%;
  -webkit-mask-image: var(--wellenform);
  mask-image: var(--wellenform);
  -webkit-mask-size: 1040px 100%;
  mask-size: 1040px 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.k1 { --z: 2; --a: 1; --e: 7; }
.k2 { --z: 2; --a: 7; --e: 14; }
.k3 { --z: 3; --a: 1; --e: 25; }
.k4 { --z: 1; --a: 14; --e: 20; }
.k5 { --z: 2; --a: 14; --e: 23; }
.k6 { --z: 1; --a: 3; --e: 10; }

/* Der Abspielkopf fährt beim Laden einmal über die Zeitleiste. Das ist die einzige große Bewegung der Seite. */
.abspielkopf {
  position: absolute;
  top: -6px; bottom: -6px;
  left: var(--kopf);
  width: 2px;
  background: var(--schwarz);
  pointer-events: none;
}
.abspielkopf::before {
  content: "";
  position: absolute;
  left: -8px; top: -4px;
  width: 18px; height: 18px;
  background: var(--rot);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
.abspielkopf { transition: left 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.abspielkopf.ist-gefuehrt { transition: none; animation: none !important; }
@keyframes abspielen { from { left: 0; } to { left: var(--kopf); } }
.js .abspielkopf { animation: abspielen 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 1.15s backwards; }

/* Zeitcode über der Zeitleiste */
.zeitcode {
  position: absolute;
  right: 0; top: -30px;
  padding: 3px 9px 2px;
  background: var(--schwarz);
  color: var(--kalk);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  border-radius: 3px;
}

/* Clips werden beim Laden nacheinander auf die Zeitleiste gelegt */
@keyframes clip-rein {
  from { opacity: 0; transform: translateX(-28px) scaleX(0.7); }
  to { opacity: 1; transform: none; }
}
.clip { transform-origin: left center; }
.js .clip { animation: clip-rein 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.55s + var(--i, 0) * 0.08s); }
.k1 { --i: 0; } .k2 { --i: 1; } .k5 { --i: 2; } .k6 { --i: 3; } .k4 { --i: 4; } .k3 { --i: 5; }

/* Hauptüberschrift: Die zwei Wörter werden beim Laden von unten eingeschnitten */
@keyframes einschnitt {
  from { clip-path: inset(100% -5% -20% -5%); transform: translateY(14%); }
  to { clip-path: inset(-20% -5% -20% -5%); transform: none; }
}
.riesig span:not(.nur-screenreader) { display: inline-block; }
.js .riesig span:not(.nur-screenreader) { animation: einschnitt 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.js .riesig span:last-child { animation-delay: 0.14s; }

.schild {
  position: absolute;
  right: -4%; bottom: 6%;
  padding: 8px 14px 7px 18px;
  background: var(--blau);
  color: var(--schwarz);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1;
  text-transform: uppercase;
  border-radius: 5px;
  box-shadow: inset 6px 0 0 rgba(11, 11, 11, 0.28);
}

/* ---------- Video mit Klick zum Laden ---------- */
.video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--flaeche);
  color: var(--kalk);
  text-decoration: none;
}
.video--hoch { aspect-ratio: 9 / 16; }
.video > img,
.video > iframe,
.video > .platzhalter {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video > img { object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.video:hover > img { transform: scale(1.03); }
.video__start {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 18px 8px 12px;
  background: var(--schwarz);
  color: var(--kalk);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.video__start i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--rot);
}
.video:hover .video__start { background: var(--rot); color: var(--schwarz); }
.video:hover .video__start i { background: var(--schwarz); }
.video:hover .video__start i path { fill: var(--rot); }
.video.ist-geladen .video__start { display: none; }

.hinweis {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--grau);
  max-width: 46em;
}

/* ---------- Platzhalter-Flächen ---------- */
.platzhalter {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background-color: var(--kalk);
  background-image:
    linear-gradient(rgba(11, 11, 11, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 11, 11, 0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
  color: var(--schwarz);
}
.platzhalter--hoch { aspect-ratio: 9 / 16; }
.platzhalter svg { width: clamp(56px, 9vw, 96px); height: auto; }
.platzhalter__marke {
  display: grid;
  place-items: center;
  width: clamp(110px, 16vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--s, var(--rot));
  transform: rotate(var(--w, -6deg));
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); }
.abschnitt--eng { padding-block: calc(var(--abstand) * 0.6); }
.abschnitt--linie { border-top: 1px solid var(--linie); }

.seitenkopf { padding-block: clamp(36px, 6vw, 88px) clamp(40px, 6vw, 80px); }
.seitenkopf .einleitung { margin-top: clamp(22px, 3vw, 34px); }

/* ---------- Bild und Text nebeneinander ---------- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.duo--umgekehrt { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.duo__text h2 { margin-bottom: 26px; }
.duo__text p { max-width: 34em; }
.duo__text .textlink { margin-top: 20px; }

.portraet { position: relative; width: min(100%, 360px); }
.portraet img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(1) contrast(1.06);
}
/* ---------- Referenzen ---------- */
.projekt {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(28px, 5vw, 80px);
  padding-block: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--linie);
}
.projekt:nth-of-type(even) .projekt__medien { order: 2; }
.projekt__medien--schmal { max-width: 340px; width: 100%; justify-self: center; }
.projekt h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 22px; }
.projekt__text { position: sticky; top: 116px; }

.schlagworte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 26px 0 0; padding: 0;
}
.schlagworte li {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 13px;
  border: 1px solid var(--linie);
  border-radius: 999px;
}

/* ---------- Über mich ---------- */
.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px clamp(32px, 6vw, 96px);
}
.spalten__inhalt { max-width: 40em; }
.spalten__inhalt > p:first-child { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.45; }

/* Der farbige Punkt hat dieselbe Farbe wie der passende Sticker auf der Startseite */
.leistungen { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; }
.leistungen li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 8px 24px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--linie);
}
.leistungen li:last-child { border-bottom: 1px solid var(--linie); }
.leistungen li::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--s);
}
.leistungen p { color: var(--grau); margin: 0; }

.werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  list-style: none;
  margin: 0; padding: 0;
}
.werkzeuge li {
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  text-transform: uppercase;
  padding: 8px 20px;
  border: 2px solid var(--kalk);
  border-radius: 999px;
}

.schnell { padding: clamp(32px, 5vw, 64px); }
.schnell h2 { margin-bottom: 22px; }
.schnell p { max-width: 38em; }

/* ---------- Abschluss mit Handlungsaufforderung ---------- */
.abschluss__innen {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px 48px;
  padding: clamp(48px, 8vw, 104px) clamp(24px, 6vw, 88px);
}
.abschluss h2 { max-width: 9em; }
.abschluss p { max-width: 28em; margin-top: 20px; }

/* ---------- Kontakt ---------- */
.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.formular { display: grid; gap: 22px; }
.feld { display: grid; gap: 8px; }
.feld label { font-weight: 700; font-size: 0.9375rem; }
.feld input,
.feld textarea {
  width: 100%;
  font: inherit;
  color: var(--kalk);
  background: var(--flaeche);
  border: 1px solid rgba(236, 232, 225, 0.45);
  border-radius: 6px;
  padding: 14px 16px;
  min-height: 54px;
  transition: border-color 0.2s ease;
}
.feld textarea { min-height: 190px; resize: vertical; line-height: 1.5; }
.feld input:focus,
.feld textarea:focus { outline: 3px solid var(--rot); outline-offset: 1px; border-color: var(--kalk); }
.feld--falle {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.formular__fuss small { color: var(--grau); font-size: 0.875rem; flex: 1 1 240px; }
.meldung {
  padding: 16px 18px;
  border-radius: 6px;
  border: 2px solid var(--kalk);
  font-weight: 600;
}
.meldung[hidden] { display: none; }
.meldung--gut { border-color: var(--blau); }
.meldung--fehler { border-color: var(--rot); }

.direkt { border-top: 2px solid var(--kalk); padding-top: 22px; }
.direkt h2 { font-size: 2rem; margin-bottom: 18px; }
.direkt dl { margin: 0; display: grid; gap: 18px; }
.direkt dt { font-size: 0.875rem; font-weight: 700; color: var(--grau); }
.direkt dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 46em; }
.rechtstext h2 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); margin: 2em 0 0.5em; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext a { overflow-wrap: anywhere; }
.pruefhinweis {
  border: 2px dashed var(--rot);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 2em;
}

/* ---------- Fußzeile ---------- */
.fuss { padding-block: 48px 36px; font-size: 0.9375rem; }
.fuss__innen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 48px;
}
.fuss__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  list-style: none;
  margin: 0; padding: 0;
}
.fuss__liste a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss__liste a:hover { text-decoration: underline; }

/* ---------- Dezentes Einblenden, nur an wenigen Stellen ---------- */
.js [data-zeig] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js [data-zeig].ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .js [data-zeig] { opacity: 1; transform: none; }
}

/* ==========================================================
   Schmale Bildschirme: eigener Durchgang
   ========================================================== */
@media (max-width: 1020px) {
  .buehne__oben { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .projekt { grid-template-columns: minmax(0, 1fr); }
  .projekt:nth-of-type(even) .projekt__medien { order: 0; }
  .projekt__text { position: static; }
  .kontakt, .spalten { grid-template-columns: minmax(0, 1fr); }
  .start__zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .start__zeile .knopf { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  html { scroll-padding-top: 76px; }
  :root { --karo: 48px; }

  .kopf__innen { min-height: 68px; }
  .menue-knopf { display: inline-flex; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--rand) 28px;
    background: var(--schwarz);
    border-bottom: 1px solid var(--linie);
    display: none;
  }
  .nav.ist-offen { display: flex; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: flex;
    padding: 14px 0;
    font-family: var(--titel);
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1.1;
    text-transform: uppercase;
    border-bottom: 1px solid var(--linie);
  }
  .nav .knopf { margin-top: 24px; min-height: 54px; font-size: 1.0625rem; }

  /* Überschrift in zwei Zeilen, damit sie groß bleibt */
  .riesig { font-size: 39.5cqw; white-space: normal; line-height: 1; }
  .riesig span:not(.nur-screenreader) { display: block; }

  .start__zeile { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .start__zeile p + p { display: none; }
  .start__zeile .knopf,
  .abschluss .knopf,
  .formular .knopf { width: 100%; }

  /* Papier liegt gerade und reicht bis an den Rand */
  .buehne, .abschluss, .schnell { border-radius: 0; margin-inline: calc(var(--rand) * -1); }
  .buehne { padding: 20px var(--rand) 32px; }

  /* Zeitleiste: jeder Clip bekommt eine eigene Spur, versetzt wie im Schnittprogramm */
  .zeitleiste { grid-template-columns: minmax(0, 1fr); --kopf: 93%; }
  .zeitleiste__namen { display: none; }
  .zeitleiste__lineal, .zeitleiste__feld { grid-column: 1; }
  .zeitleiste__lineal { background-size: calc(100% / 6) 100%; }
  .zeitleiste__spuren { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 48px; background-size: 100% 56px; background-image: linear-gradient(rgba(11, 11, 11, 0.07) 48px, transparent 48px); }
  .clip { font-size: 1.05rem; }
  .welle { left: 148px; }
  .k1 { --z: 1; --a: 1; --e: 4; }
  .k2 { --z: 2; --a: 2; --e: 6; }
  .k3 { --z: 3; --a: 1; --e: 7; }
  .k4 { --z: 4; --a: 3; --e: 7; }
  .k5 { --z: 5; --a: 1; --e: 6; }
  .k6 { --z: 6; --a: 2; --e: 7; }
  .schild { right: -8%; }

  .duo, .duo--umgekehrt { grid-template-columns: minmax(0, 1fr); }
  .portraet { width: min(72%, 260px); }

  .projekt__medien--schmal { max-width: 280px; justify-self: start; }

  .leistungen li { grid-template-columns: 28px minmax(0, 1fr); }
  .leistungen li p { grid-column: 2; }

  .schnell { padding-inline: var(--rand); }
  .abschluss__innen { padding: 56px var(--rand); align-items: stretch; }
  .fuss__innen { flex-direction: column; align-items: flex-start; }
}