/* ============================================================
   tschapke.com — Portfolio Martin Reza Tschapke (MRT)
   System: MRT-Styleguide
   Fluides Root · 1 Akzent #00FF80 · 0 Radius · 0 Schatten
   ============================================================ */

/* Display-Schrift seit 27.10.2026: MRT Display (eigene Schrift).
   /fonts/ wird ein Jahr immutable gecacht → bei neuer Schriftfassung ?v= hier und im Preload (build_site.py) erhöhen. */
@font-face {
  font-family: "MRT Display";
  src: url("../fonts/MRTDisplay-Regular.woff2?v=20261027-2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Fluides Root-System: 1rem = 1 Designpixel/10 @1280 --- */
html { font-size: 2.66666667vw; }
@media only screen and (min-width: 600px) { html { font-size: 0.78125vw; } }
@media only screen and (min-width: 1440px) { html { font-size: 11.25px; } }

:root {
  --green: #00ff80;
  --black: #000000;
  --dark: #202020;
  --white: #ffffff;
  --gray-100: #ececee;
  --gray-200: #e1e1e5;
  --gray-300: #cdcdcd;

  --font-display: "MRT Display", sans-serif;
  --font-body: -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-bold: -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-head: -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-display: 5.5rem;  --lh-display: 5.5rem;
  --fs-h2: 2.4rem;       --lh-h2: 3.6rem;
  --fs-h3: 2.4rem;       --lh-h3: 3.2rem;
  --fs-body: 1.8rem;     --lh-body: 3.4rem;
  --fs-body-s: 1.6rem;   --lh-body-s: 3rem;
  --fs-eyebrow: 1.4rem;  --lh-eyebrow: 1.7rem;
  --ls-eyebrow: 0.2rem;

  --container: 84vw;
  --max-display: 34rem;
  --section-s: 4rem;
  --section-m: 8rem;

  --icon-chip: 3.4rem;
  --logo-size: 4.5rem;

  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-shift: 0.6s;
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  /* Off-Canvas: die Seite rückt genau um die Menübreite zur Seite */
  --menu-w: 76vw;
  --shift-x: -80vw;
  --shift-y: 8vh;
}
@media only screen and (min-width: 600px) {
  :root {
    --fs-display: 12rem; --lh-display: 12rem;
    --fs-h2: 3.2rem;     --lh-h2: 5.2rem;
    --fs-body: 2.4rem;   --lh-body: 4.5rem;
    --container: 76.5625vw;
    --max-display: 94rem;
    --section-s: 7.5rem;
    --section-m: 15rem;
    --menu-w: 62rem;
    --shift-x: calc(-1 * var(--menu-w));
  }
}

/* --- Basis: dunkler Backdrop, weiße Bühne scrollt (nie das Fenster) --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--dark);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }

/* Fokus: Schwarz auf hellen/grünen Flächen, Grün auf dunklen (Kontrast > 3:1) */
a:focus-visible, button:focus-visible {
  outline: 0.3rem solid var(--black);
  outline-offset: 0.3rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.menu__wrap a:focus-visible, .menu__close:focus-visible,
.hero a:focus-visible, .overlap__box a:focus-visible,
.burger--ondark:focus-visible {
  outline-color: var(--green);
}

.container__main {
  position: absolute;
  inset: 0;
  background: var(--white);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 2;
  transition: transform var(--dur-shift) var(--ease-out-quart);
}
body.menu-open .container__main {
  transform: translate(var(--shift-x), var(--shift-y));
  cursor: pointer;
}

/* ============ Navigation: Logo + Burger (fixed, kein Header-Balken) ============ */
.chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  pointer-events: none;
  transition: transform var(--dur-shift) var(--ease-out-quart);
}
body.menu-open .chrome { transform: translate(var(--shift-x), var(--shift-y)); }

.logo__wrap {
  position: absolute;
  top: 3rem; left: 3rem;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.logo__box {
  width: var(--logo-size); height: var(--logo-size);
  background: var(--green);
  color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-bold);
  font-weight: 800; font-style: italic;
  font-size: 1.55rem;
}
.logo__word {
  padding-left: 1.2rem;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-in-out-quart);
}
.logo--small .logo__word { opacity: 0; }
.logo__word--ondark { color: var(--white); }

.burger {
  position: absolute;
  top: 3.8rem; right: 3rem;
  width: 2.4rem; height: 2.4rem;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  align-content: space-between;
  transition: opacity var(--dur-fast);
}
.burger i { display: block; width: 0.45rem; height: 0.45rem; background: var(--black); }
.burger--ondark i { background: var(--white); }
.burger:hover { opacity: 0.6; }

/* ============ Off-Canvas-Menü (Backdrop = body #202020) ============ */
/* Desktop: zwei Spalten (Navigation + Leistungen) in genau dem Raum, den der
   Page-Shift freigibt. Mobil: eine Spalte, Leistungen unter der Navigation. */
.menu__wrap {
  position: fixed;
  top: 0; right: 0;
  width: var(--menu-w); height: 100%;
  padding: 10rem 4rem 4rem 7rem;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "nav svc" "meta svc";
  justify-content: start;
  align-content: start;
  column-gap: 7rem;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
  overflow-y: auto;
}
body.menu-open .menu__wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease-out 0.08s;
}
.menu__nav { grid-area: nav; }
.menu__svc { grid-area: svc; }
@media only screen and (max-width: 599px) {
  .menu__wrap {
    padding: 9rem 2rem 2rem 3rem;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "nav" "svc" "meta";
  }
  .menu__svc, .menu__meta { margin-top: 3rem; }
}
.menu__link {
  display: block;
  color: var(--white);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 3.9rem;
  opacity: 0.3;
}
@media only screen and (min-width: 600px) {
  .menu__link { font-size: 3.2rem; line-height: 5.2rem; }
}
.menu__head {
  display: block;
  margin: 1.4rem 0 1.4rem;
  color: var(--white);
  opacity: 0.5;
}
.menu__sublink {
  display: block;
  color: var(--white);
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 3.2rem;
  opacity: 0.3;
}
@media only screen and (min-width: 600px) {
  .menu__sublink { font-size: 2rem; line-height: 3.8rem; }
}
.menu__link:hover, .menu__link:focus-visible, .menu__link--active,
.menu__sublink:hover, .menu__sublink:focus-visible, .menu__sublink--active { opacity: 1; }
.menu__meta { grid-area: meta; margin-top: 3.5rem; }
.menu__meta a {
  display: block;
  color: var(--white);
  font-size: 1.8rem; line-height: 3.4rem;
  opacity: 0.3;
}
.menu__meta a:hover, .menu__meta a:focus-visible { opacity: 1; }
/* Sprachschalter EN / DE (§5): aktive Sprache bold, die andere wie die übrigen Meta-Links */
.lang-switch { display: block; }
.lang-switch a, .first-footer .lang-switch a { display: inline; }
.lang-switch b { font-family: var(--font-bold); font-weight: 700; }
.menu__meta .lang-switch { color: rgba(255, 255, 255, 0.3); font-size: 1.8rem; line-height: 3.4rem; margin-top: 1.5rem; }
.menu__meta .lang-switch b { color: var(--white); }
.first-footer .lang-switch { margin-top: 1rem; color: rgba(0, 0, 0, 0.5); }
.first-footer .lang-switch a { opacity: 1; color: inherit; }
.first-footer .lang-switch a:hover, .first-footer .lang-switch a:focus-visible { color: var(--black); }
.first-footer .lang-switch b { color: var(--black); }
/* Einlauf: Einträge gleiten gestaffelt nach, nur Position + Opacity (§7) */
.menu__link, .menu__head, .menu__sublink, .menu__meta a, .menu__meta .lang-switch {
  translate: 3rem 0;
  transition: opacity var(--dur-fast), translate 0.3s var(--ease-out-quart);
}
.menu__meta .lang-switch a { translate: none; }
body.menu-open .menu__link, body.menu-open .menu__head,
body.menu-open .menu__sublink, body.menu-open .menu__meta a, body.menu-open .menu__meta .lang-switch {
  translate: 0 0;
  transition: opacity var(--dur-fast), translate 0.7s var(--ease-out-quart) calc(0.1s + var(--i, 0) * 0.035s);
}
.menu__close {
  position: fixed;
  top: 3rem; right: 3rem;
  z-index: 3;
  width: 2.4rem; height: 2.4rem;
  padding: 0; border: 0; background: none;
  color: var(--white);
  font-size: 2.2rem; line-height: 1; font-weight: 300;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast), visibility 0s linear var(--dur-fast);
}
body.menu-open .menu__close {
  opacity: 0.6;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-fast);
}
body.menu-open .menu__close:hover, body.menu-open .menu__close:focus-visible { opacity: 1; }

/* ============ Layout-Utilities ============ */
.wrap { width: var(--container); margin: 0 auto; }
.section-m { padding-top: var(--section-m); padding-bottom: var(--section-m); }
.section-s { padding-top: var(--section-s); padding-bottom: var(--section-s); }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* Einheitlicher Sektionskopf: Eyebrow + H2 + optionaler Lead */
.sec-head { margin-bottom: 7rem; }
.sec-head .eyebrow { display: block; margin-bottom: 2rem; }
.sec-head__lead {
  max-width: 75.2rem;
  margin-top: 2rem;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}
.sec-head__lead--gross { max-width: none; margin-top: 3rem; font-size: var(--fs-body); line-height: var(--lh-body); }
.h2 {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.body-s { font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
strong, b { font-family: var(--font-bold); font-weight: 700; }

/* Inline-Link: grüne Unterstreichung, Hover -> schwarz */
.link {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.link::after {
  content: "";
  position: absolute;
  bottom: 0.4rem; left: 0;
  width: 100%; height: 0.2rem;
  background: var(--green);
  transition: all var(--dur-fast) var(--ease-out-quart);
}
.link:hover::after, .link:focus-visible::after { background: var(--black); }

/* Eyebrow-CTA mit Pfeil-Chip (DER Button des Systems) */
.cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.cta-chip__box {
  width: var(--icon-chip); height: var(--icon-chip);
  background: var(--green);
  color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
}

/* dynamicLink — 3-Phasen-Sweep (Footer-CTA) */
.dyn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 1rem;
  overflow: hidden;
  padding: 0 0 0 1rem;
  min-height: var(--icon-chip);
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: var(--fs-body-s);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--black);
}
.dyn__arrow {
  position: relative;
  z-index: 1;
  width: var(--icon-chip); height: var(--icon-chip);
  display: flex; align-items: center; justify-content: center;
  font-weight: 400; font-size: 1.9rem;
}
.dyn__box {
  position: absolute;
  top: 0; right: 0;
  width: var(--icon-chip); height: 100%;
  background: var(--green);
  z-index: -1;
}
.dyn:hover .dyn__box, .dyn:focus-visible .dyn__box { animation: dyn-sweep 0.6s var(--ease-in-out-quart); }
.dyn:hover .dyn__arrow, .dyn:focus-visible .dyn__arrow { animation: dyn-arrow 0.4s var(--ease-in-out-quart); }
@keyframes dyn-sweep {
  0%    { width: var(--icon-chip); transform: translateX(0); }
  33%   { width: 100%; transform: translateX(0); }
  66%   { width: 100%; transform: translateX(-120%); }
  66.1% { width: var(--icon-chip); transform: translateX(100%); }
  100%  { width: var(--icon-chip); transform: translateX(0); }
}
@keyframes dyn-arrow {
  0% { transform: translateX(0); }
  50% { transform: translateX(-0.5rem); }
  100% { transform: translateX(0); }
}

/* Dieselbe Animation für alle Buttons (seit 30.10.2026): js/main.js legt über jeden Button eine Kopie seines Inhalts
   (.fx) in Füllfarbe mit dunkler Schrift. Sie ist per clip-path auf das Pfeil-Quadrat zugeschnitten (--fx-ruhe, bei
   Buttons ohne Quadrat 0) und läuft beim Hover wie im Footer: aufziehen über die ganze Breite, nach links hinaus,
   von rechts zurück. Weil die Kopie ihre eigene Schrift mitbringt, bleibt das Label auch auf dunklem Grund lesbar.
   Quadrat links (Zurück-Pfeil): gespiegelt. Farbe je Umgebung über --fx-bg / --fx-fg. */
.fx-host { position: relative; }
.fx {
  position: absolute; inset: 0; z-index: 1;
  display: inherit; align-items: inherit; justify-content: inherit; gap: inherit; padding: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; white-space: inherit;
  background: var(--fx-bg, var(--green)); color: var(--fx-fg, var(--black));
  clip-path: inset(0 0 0 calc(100% - var(--fx-ruhe, 0px)));
  pointer-events: none; user-select: none;
}
.fx--links { clip-path: inset(0 calc(100% - var(--fx-ruhe, 0px)) 0 0); }
.fx .cta-chip__box { background: transparent; color: inherit; }
/* Das Quadrat darunter wird durchsichtig, damit es wie im Footer mitläuft statt stehen zu bleiben */
.fx-host > .cta-chip__box, .pj-cta .fx-host > .cta-chip__box { background: transparent; color: inherit; }
.fx-host:hover > .fx, .fx-host:focus-visible > .fx { animation: fx-sweep 0.6s var(--ease-in-out-quart); }
.fx-host:hover > .fx--links, .fx-host:focus-visible > .fx--links { animation-name: fx-sweep-links; }
.fx-host:hover > .fx .cta-chip__box, .fx-host:focus-visible > .fx .cta-chip__box { animation: dyn-arrow 0.4s var(--ease-in-out-quart); }
@keyframes fx-sweep {
  0%    { clip-path: inset(0 0 0 calc(100% - var(--fx-ruhe, 0px))); }
  33%   { clip-path: inset(0 0 0 0); }
  66%   { clip-path: inset(0 100% 0 0); }
  66.1% { clip-path: inset(0 0 0 100%); }
  100%  { clip-path: inset(0 0 0 calc(100% - var(--fx-ruhe, 0px))); }
}
@keyframes fx-sweep-links {
  0%    { clip-path: inset(0 calc(100% - var(--fx-ruhe, 0px)) 0 0); }
  33%   { clip-path: inset(0 0 0 0); }
  66%   { clip-path: inset(0 0 0 100%); }
  66.1% { clip-path: inset(0 100% 0 0); }
  100%  { clip-path: inset(0 calc(100% - var(--fx-ruhe, 0px)) 0 0); }
}
/* Auf grünen Flächen läuft Schwarz, auf dem grünen Hero-Button Weiß, auf Projektseiten die Projektfarbe */
.contact-cta__btn, .nwl-teaser__btn { --fx-bg: var(--black); --fx-fg: var(--white); }
.hero__btn { --fx-bg: var(--white); --fx-fg: var(--black); }
.pj-cta .cta-chip { --fx-bg: var(--pc); --fx-fg: var(--pc-text); }

/* ============ Hero (dunkel) ============ */
.hero {
  background: var(--dark);
  color: var(--white);
  padding: 24rem 0 var(--section-m);
}
.hero .eyebrow { color: var(--white); opacity: 0.5; margin-bottom: 4rem; }
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  max-width: var(--max-display);
}
.display em { font-style: normal; color: var(--green); }
/* mittlere Display-Stufe für Projekt-/Unterseiten-Titel */
.display--m { font-size: 8rem; line-height: 8rem; }
@media only screen and (max-width: 599px) { .display--m { font-size: 4.4rem; line-height: 4.4rem; } }
.hero__copy {
  margin-top: 4.5rem;
  max-width: 64rem;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--white);
  opacity: 0.75;
}

/* Hero „Ich baue" (Startseite, 23.10.2026): eine zentrierte
   Headline über dem Video („Ich baue" weiß, Rollwort grün), darunter nur der Kontakt-Button. Das Rollwort läuft im Takt
   durch (main.js) und verlinkt auf die jeweilige Leistung. Ankunft hart gebremst wie in den Typo-Animationen. */
.hero--words {
  position: relative; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 14rem 0 10rem; text-align: center;
  background: #8a8a8a url(/img/hero/hero-doku-v6-poster.jpg) center / cover;
}
/* Hintergrundvideo (S/W-Doku-Montage); leichte Abdunklung zur Mitte hin für die grüne Schrift.
   Bei „Bewegung reduzieren“ steht das Poster. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__shade {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.hero--words > .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
/* Display 135px / lh 1.0 (12rem), mobil 52px / lh 1.1. Seit „Personal Brands." im Roll
   ist (längstes Wort, 9,5 em) am Desktop 10rem, damit es in eine Zeile passt; mobil bricht es um.
   In MRT Display ist es 9,72 em breit → max-width 98rem, sonst schneidet die Rollwort-Maske den Punkt ab. */
.hero__hl {
  margin: 0;
  max-width: 98rem;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 10rem;
  line-height: 1;
  color: var(--white);
}
.hero__link { display: block; color: var(--green); }
.hero__roll { display: block; height: 1em; overflow: clip; }
.hero__col { display: flex; flex-direction: column; transition: transform 0.7s cubic-bezier(0.05, 0, 0.03, 1); }
.hero__col > span { display: block; height: 1em; white-space: nowrap; }
.hero__btn {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: 5rem;
  padding: 1rem 1.6rem;
  background: var(--green);
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
@media only screen and (max-width: 599px) {
  .hero--words { padding: 13rem 0 8rem; }
  /* mobil bleibt die Schrift groß; jedes Rollwort bekommt zwei Zeilen Platz, damit „Personal
     Brands." umbrechen kann, ohne dass der Button springt (Wörter stehen oben im Fach) */
  .hero__hl { font-size: 5rem; line-height: 1.1; }
  html[lang="en"] .hero__hl { font-size: 4.6rem; } /* „NEWSLETTERS." braucht etwas mehr Platz */
  .hero__roll, .hero__col > span { height: 2.2em; }
  .hero__col > span { white-space: normal; }
  .hero__btn { margin-top: 1.6rem; }
}

/* Display-Headline auf Weiß (Projektseiten) */
.page-head { padding: 22rem 0 var(--section-s); }
.page-head .eyebrow { margin-bottom: 3rem; }
.page-head .display { color: var(--black); }

/* ============ Intro / Textblöcke ============ */
.intro__grid {
  display: grid;
  gap: 3rem;
}
@media only screen and (min-width: 600px) {
  .intro__grid { grid-template-columns: 1fr 1fr; gap: 7rem; align-items: start; }
}
.intro__grid figure { margin: 0; }
.intro p + p { margin-top: 3rem; }
.intro .cta-chip { margin-top: 5rem; }

/* Bilder: Graustufen-Pflicht, Farbe erst beim Hover */
/* .gs (Graustufen, Farbe erst beim Hover) seit 22.10.2026 nicht mehr auf den Projektseiten: Bilder zeigen sofort Farbe */
.gs { filter: grayscale(100%); transition: filter var(--dur-base) ease-in-out; }
.gs:hover { filter: grayscale(0); }

/* ============ ProjectBox (Portfolio-Signatur) ============ */
.pbox-list { display: flex; flex-direction: column; }
.pbox {
  display: flex;
  gap: 2.4rem;
  padding-bottom: var(--section-s);
  color: var(--black);
}
.pbox__cat {
  flex: 0 0 2.4rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: 1.7rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
.pbox__body { flex: 1 1 auto; }
.pbox__link { display: block; color: inherit; }
.pbox__images {
  position: relative;
  width: 41.5rem; height: 37.5rem;
  max-width: 100%;
}
.pbox__image {
  position: absolute;
  top: 2rem; left: 4rem;
  width: 33.5rem; height: 33.5rem;
  object-fit: cover;
}
/* Hover-Choreografie nur auf Desktop (Mobil: statisch versetzt, kein Split) */
@media only screen and (min-width: 600px) {
  .pbox__image {
    filter: grayscale(100%);
    transition:
      filter var(--dur-base) ease-in-out,
      transform 0.25s var(--ease-in-out-quart) 0.25s,
      translate 0.25s var(--ease-in-out-quart);
  }
  .pbox__caption, .pbox__cat {
    transition:
      transform 0.25s var(--ease-in-out-quart) 0.25s,
      translate 0.25s var(--ease-in-out-quart);
  }
  /* Auffächern zweistufig (translateY sofort, translateX +250ms), Grau fällt.
     Text-Block UND Kategorie-Label wandern mit dem Undercover-Bild nach außen: so bleibt
     der Abstand zwischen Label und Titel konstant. (Wanderte das Label mit dem Top-Bild,
     kreuzte es den Titel und schob sich unter das Undercover-Bild.) */
  .pbox:hover .pbox__image, .pbox:focus-within .pbox__image { filter: grayscale(0); }
  .pbox:hover .pbox__image--top, .pbox:focus-within .pbox__image--top { transform: translateX(4vw); translate: 0 -2vw; }
  .pbox:hover .pbox__image--under, .pbox:focus-within .pbox__image--under { transform: translateX(-4vw); translate: 0 2vw; }
  .pbox:hover .pbox__caption, .pbox:focus-within .pbox__caption { transform: translateX(-4vw); translate: 0 2vw; }
  .pbox:hover .pbox__cat, .pbox:focus-within .pbox__cat { transform: translateX(-4vw) rotate(180deg); translate: 0 2vw; }
  /* gerade Boxen fächern gespiegelt auf */
  .pbox:nth-child(2n):hover .pbox__image--top, .pbox:nth-child(2n):focus-within .pbox__image--top { transform: translateX(-4vw); translate: 0 -2vw; }
  .pbox:nth-child(2n):hover .pbox__image--under, .pbox:nth-child(2n):focus-within .pbox__image--under { transform: translateX(4vw); translate: 0 2vw; }
  .pbox:nth-child(2n):hover .pbox__caption, .pbox:nth-child(2n):focus-within .pbox__caption { transform: translateX(4vw); translate: 0 2vw; }
  .pbox:nth-child(2n):hover .pbox__cat, .pbox:nth-child(2n):focus-within .pbox__cat { transform: translateX(4vw) rotate(180deg); translate: 0 2vw; }
}
.pbox__title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 1.6rem 0 0;
  display: inline-block;
}
.pbox__arrow {
  display: inline-block;
  width: var(--icon-chip);
  transition: width var(--dur-base);
}
.pbox:hover .pbox__arrow, .pbox:focus-within .pbox__arrow { width: 5.2rem; }
.pbox__sub {
  display: block;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.pbox:hover .pbox__sub, .pbox:focus-within .pbox__sub { opacity: 1; }
/* Desktop: alternierend rechtsbündig */
@media only screen and (min-width: 600px) {
  .pbox { width: 50%; }
  .pbox:nth-child(2n) { align-self: flex-end; flex-direction: row-reverse; }
}
/* Mobil: kein Split, Bilder statisch versetzt */
@media only screen and (max-width: 599px) {
  .pbox__images { width: 100%; height: 27rem; }
  .pbox__image { width: 22.5rem; height: 22.5rem; top: 0; left: 0; filter: none; }
  .pbox__image--top { top: 4rem; left: 4rem; }
  .pbox__sub { opacity: 1; }
}

/* ============ Typo-Animation ============
   900×370-Fläche über die volle Breite, Display-Schrift 120 px (= 13,3 vw), zwei zentrierte
   Zeilen im Abstand 0,83 em, weißer Grund, Akteur schwarz, Aussage grün. Takt 70 Frames ≈ 2,34 s:
   Frame 10–40 raus (extremes Anrollen), 40–50 Schaft zieht nach, 50–60 rein (hartes Abbremsen),
   60–65 Schaft zieht sich zusammen, Rest = Ruhe. Prozent = Frame / 70.
   Kurven: raus cubic-bezier(0.999, 0, 0.993, 1) = lange anrollen, dann rausschießen;
   rein cubic-bezier(0.01, 0, 0.014, 1) = reinschießen, hart abbremsen. Kein var() in Keyframes (wird dort ignoriert).
   Grundzustand jedes Bewegten = Ruhebild, Keyframes erzeugen nur die Wege (reduced-motion = Ruhebild). */
.typo-anim {
  --ta-dur: 2.336s;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: min(13.333vw, 24rem, calc(90vw / (var(--n) * 0.62)));
  line-height: 1;
  text-align: center;
  padding: 0.75em 0 0.7em;
  overflow: clip;
  hyphens: manual;
}
.ta-statement { display: block; color: var(--green); white-space: nowrap; }
.ta-stage { position: relative; height: 1em; margin-top: -0.17em; overflow: clip; white-space: nowrap; }
.ta-anchor { position: relative; display: inline-block; vertical-align: top; height: 1em; text-align: left; }
.ta-ghost { visibility: hidden; }
.ta-mv { position: absolute; left: 0; top: 0; }
.ta-line { display: inline-flex; align-items: center; height: 1em; vertical-align: top; }
.ta-word { display: inline-block; }

/* Pfeil: Schaft 0,07 em stark mit schräg angeschnittenem Ende, Kopf mit abgesetztem unteren Strich */
.ta-arrow { display: inline-flex; align-items: center; height: 0.733em; margin: -0.03em 0.16em 0 0; flex: 0 0 auto; }
.ta-shaft {
  display: block;
  width: 0.69em;
  height: 0.0707em;
  align-self: flex-start;
  margin: 0.3285em -0.001em 0 0;   /* exakt auf Höhe des Schaftstücks im Kopf (y −9,97…7,0 von −88…88) */
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0.0477em 100%);
}
.ta-head { display: block; width: 0.358em; height: 0.733em; fill: currentColor; }

/* Variante „Über mich“: Schaft dehnt sich mit, Wort + Kopf schießen rechts raus, Kopie kommt von links */
.ta-push-out { animation: ta-push-out var(--ta-dur) infinite; }
.ta-push-out .ta-shaft { animation: ta-stretch var(--ta-dur) infinite; }
.ta-push-in { animation: ta-push-in var(--ta-dur) infinite; }
.ta-push-in .ta-shaft { animation: ta-shrink var(--ta-dur) infinite; }
@keyframes ta-stretch {
  0%, 14.286% { width: 0.69em; animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143%, 100% { width: calc(0.69em + 110vw); }
}
@keyframes ta-push-out {
  0%, 57.143% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(1, 0, 1, 1); }
  71.428% { transform: translateX(110vw); opacity: 1; }
  71.429%, 100% { transform: translateX(110vw); opacity: 0; }
}
@keyframes ta-push-in {
  0%, 71.428% { transform: translateX(-110vw); opacity: 0; }
  71.429% { transform: translateX(-110vw); opacity: 1; animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  85.714%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes ta-shrink {
  0%, 85.714% { width: 2.79em; margin-left: -2.1em; animation-timing-function: cubic-bezier(0.067, 0, 0, 1); }
  92.857%, 100% { width: 0.69em; margin-left: 0; }
}

/* Treffer (Meta-Ads): Pfeil zieht sich zurück und schießt mit langem Schaft ins Ziel */
.ta-arrow--hit { animation: ta-hit var(--ta-dur) infinite; }
.ta-arrow--hit .ta-shaft { animation: ta-shrink var(--ta-dur) infinite; }
@keyframes ta-hit {
  0%, 14.286% { transform: translateX(0); animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143%, 71.429% { transform: translateX(-110vw); animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  85.714%, 100% { transform: translateX(0); }
}

/* Welle (Corporate Design, „MARKE MIT WIRKUNG."): ein Impuls läuft Buchstabe für Buchstabe durch die Zeile,
   jeder wird kurz nach unten gestoßen und rastet hart bremsend wieder ein (2 Frames Versatz je Zeichen) */
.typo-anim--wave .ta-stage { overflow: visible; }
.ta-wv { display: inline-block; animation: ta-wave var(--ta-dur) infinite; animation-delay: calc(var(--i) * 0.067s); }
@keyframes ta-wave {
  0%, 14.286% { transform: translateY(0); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  21.429% { transform: translateY(0.45em); animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  40%, 100% { transform: translateY(0); }
}

/* Laden (Websites): Wort verschwindet nach rechts, lädt von links neu, grüner Balken läuft mit */
.ta-wipe { animation: ta-wipe var(--ta-dur) infinite; }
.ta-bar { position: absolute; left: 0; top: 0.93em; width: 100%; height: 0.0707em; background: var(--green); transform-origin: left; transform: scaleX(0); animation: ta-bar var(--ta-dur) infinite; }
@keyframes ta-wipe {
  0%, 14.286% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143% { clip-path: inset(0 0 0 100%); }
  57.144%, 71.429% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  85.714%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes ta-bar {
  0%, 71.429% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  85.714% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Aufdecken (Audit, Personal Brands): grüner Deckel schiebt sich drauf und wird weggerissen */
.ta-cover { position: relative; overflow: clip; }
.ta-lid { position: absolute; inset: 0.12em 0 0.07em; background: var(--green); transform: translateX(-101%); animation: ta-lid var(--ta-dur) infinite; }
@keyframes ta-lid {
  0%, 14.286% { transform: translateX(-101%); animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143%, 71.429% { transform: translateX(0); animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  85.714%, 100% { transform: translateX(101%); }
}

/* Ankommen (E-Mail): Wort geht links raus, die neue „Nachricht" kommt von rechts an */
.ta-away { animation: ta-away var(--ta-dur) infinite; }
.ta-arrive { animation: ta-arrive var(--ta-dur) infinite; }
@keyframes ta-away {
  0%, 14.286% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143% { transform: translateX(-110vw); opacity: 1; }
  57.144%, 100% { transform: translateX(-110vw); opacity: 0; }
}
@keyframes ta-arrive {
  0%, 71.428% { transform: translateX(110vw); opacity: 0; }
  71.429% { transform: translateX(110vw); opacity: 1; animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  85.714%, 100% { transform: translateX(0); opacity: 1; }
}

/* Feed (Social Media): Wort scrollt nach oben weg, das nächste rückt von unten nach */
.ta-scroll-out { animation: ta-scroll-out var(--ta-dur) infinite; }
.ta-scroll-in { animation: ta-scroll-in var(--ta-dur) infinite; }
@keyframes ta-scroll-out {
  0%, 14.286% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143% { transform: translateY(-110%); opacity: 1; }
  57.144%, 100% { transform: translateY(-110%); opacity: 0; }
}
@keyframes ta-scroll-in {
  0%, 71.428% { transform: translateY(110%); opacity: 0; }
  71.429% { transform: translateY(110%); opacity: 1; animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  85.714%, 100% { transform: translateY(0); opacity: 1; }
}

/* Zusammenführen (CRM): drei Wörter fliegen in drei Richtungen weg und docken wieder an */
.ta-words { display: inline-block; }
.ta-part { display: inline-block; }
.ta-part--left { animation: ta-left var(--ta-dur) infinite; }
.ta-part--below { animation: ta-below var(--ta-dur) infinite; }
.ta-part--right { animation: ta-right var(--ta-dur) infinite; }
@keyframes ta-left {
  0%, 14.286% { transform: translateX(0); animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143%, 71.429% { transform: translateX(-110vw); animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  85.714%, 100% { transform: translateX(0); }
}
@keyframes ta-below {
  0%, 14.286% { transform: translateY(0); animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143%, 72.857% { transform: translateY(110%); animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  87.143%, 100% { transform: translateY(0); }
}
@keyframes ta-right {
  0%, 14.286% { transform: translateX(0); animation-timing-function: cubic-bezier(0.999, 0, 0.993, 1); }
  57.143%, 74.286% { transform: translateX(110vw); animation-timing-function: cubic-bezier(0.01, 0, 0.014, 1); }
  88.571%, 100% { transform: translateX(0); }
}

/* ============ Ticker (grüne Laufschrift, Blueprint: ticker__wrap) ============ */
.ticker {
  display: block;
  background: var(--green);
  color: var(--black);
  overflow: hidden;
  padding: 2.2rem 0;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 22s linear infinite;
}
.ticker:hover .ticker__track, .ticker:focus-visible .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-right: 7rem;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.6rem;
  white-space: nowrap;
}
.ticker__item i { font-style: normal; font-weight: 400; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ============ Plain-Teaser (Blueprint: plain__wrap) ============ */
.teaser__text { max-width: 94rem; }
.teaser__text p + p { margin-top: 3rem; }
.teaser__text .cta-chip { margin-top: 5rem; }

/* ============ Werte (Blueprint: values__wrap) ============ */
.values__grid {
  display: grid;
  gap: 6rem 7rem;
  margin-top: 7rem;
}
@media only screen and (min-width: 600px) { .values__grid { grid-template-columns: 1fr 1fr; } }
.values__item .eyebrow { display: block; color: inherit; margin-bottom: 1.6rem; }
.values__item .eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.4rem; height: 1.4rem;
  background: var(--green);
  margin-right: 1.4rem;
  vertical-align: baseline;
}
.values__item h3 {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 0 0 1.6rem;
}
.values__item p { font-size: var(--fs-body-s); line-height: var(--lh-body-s); }

/* ============ Fullwidth-Bild ============ */
.fullbleed { overflow: hidden; }
.fullbleed img {
  width: 100%;
  height: 56rem;
  object-fit: cover;
}
@media only screen and (max-width: 599px) { .fullbleed img { height: 32rem; } }
/* Motive mit Raster bis an den Rand (Moodboard-Wand): volles Format statt Beschnitt */
.fullbleed--full img { height: auto; }

/* Keyvisual mit Board-Typo „DESIGN, DAS ARBEITET." im freien Weißraum links.
   Der grüne Balken schiebt sich ein, sobald der Block ins Bild kommt (.reveal--in). */
.keyvisual { position: relative; }
/* volles 21:9-Format: der Papierstapel reicht fast an Ober- und Unterkante, Beschnitt würde ihn kappen */
.keyvisual img { height: auto; object-position: 100% 50%; }
.keyvisual__text { position: absolute; inset: 0; display: flex; align-items: center; }
.keyvisual__text .wrap { width: var(--container); }
.keyvisual__text .eyebrow { display: block; margin-bottom: 3rem; }
.keyvisual__hl {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 10rem;
  line-height: 1;
}
.keyvisual__mark {
  display: inline-block;
  padding: 0.06em 0.1em 0.02em;
  background: linear-gradient(var(--green), var(--green)) no-repeat 0 0 / 0% 100%;
  transition: background-size 0.9s var(--ease-in-out-quart) 0.4s;
}
.keyvisual.reveal--in .keyvisual__mark { background-size: 100% 100%; }
@media only screen and (max-width: 599px) {
  /* Handy: neben dem Papierstapel ist kein Platz — Text steht über dem Bild */
  .keyvisual { display: flex; flex-direction: column-reverse; }
  .keyvisual__text { position: static; padding: var(--section-s) 0 3rem; }
  .keyvisual__hl { font-size: 5.6rem; }
  .keyvisual img { height: 26rem; }
}

/* ============ Leistungen ============ */
.skills { background: var(--gray-100); }
.skills__grid {
  display: grid;
  gap: 5rem 7rem;
  margin-top: 7rem;
}
@media only screen and (min-width: 600px) { .skills__grid { grid-template-columns: repeat(4, 1fr); } }
.skills__col .eyebrow { display: block; margin-bottom: 1.6rem; }
.skills__lead {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.8rem;
  margin: 0 0 1.6rem;
}
.skills__col ul {
  margin: 0; padding: 0;
  list-style: none;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}
.skills__col li { padding: 0.4rem 0; }
.skills__grid + .cta-chip { margin-top: 7rem; }

/* ============ Leistungsliste (Linklist-Rows, §5.5: instant in, eased out) ============ */
.svc-list { display: flex; flex-direction: column; gap: 0.4rem; }
.svc-list + .cta-chip { margin-top: 5rem; }
.svc-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 30rem) minmax(0, 1fr) var(--icon-chip);
  grid-template-areas: "num title text arrow";
  align-items: center;
  column-gap: 3rem;
  min-height: 9rem;
  padding: 2.2rem 3rem;
  background: var(--gray-100);
  color: var(--black);
  transition: background-color var(--dur-base) var(--ease-out-quart);
}
.svc-row:hover, .svc-row:focus-visible { background: var(--green); transition-duration: 0s; }
.svc-row__num { grid-area: num; }
.svc-row__title {
  grid-area: title;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.svc-row__text {
  grid-area: text;
  font-size: var(--fs-body-s);
  line-height: 2.6rem;
  opacity: 0.6;
}
.svc-row__arrow {
  grid-area: arrow;
  width: var(--icon-chip); height: var(--icon-chip);
  display: flex; align-items: center; justify-content: center;
  background: var(--green);
  font-size: 1.8rem;
  transition: transform 0.1s ease-in-out;
}
.svc-row:hover .svc-row__arrow, .svc-row:focus-visible .svc-row__arrow {
  background: var(--white);
  transform: translateX(0.5rem);
}
@media only screen and (max-width: 599px) {
  .svc-row {
    grid-template-columns: minmax(0, 1fr) var(--icon-chip);
    grid-template-areas: "num arrow" "title arrow" "text arrow";
    row-gap: 0.8rem;
    padding: 2.4rem 2rem;
  }
}

/* ============ Grüner CTA-Banner (Kontakt) ============ */
.contact-cta {
  background: var(--green);
  color: var(--black);
  position: relative;
  overflow: hidden;
  min-height: 32.4rem;
  padding: 4.8rem 4.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-cta__hl {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 4.4rem;
  max-width: 17em;
  margin: 0 0 3rem;
  position: relative;
  z-index: 2;
}
.contact-cta__btn {
  display: inline-block;
  width: fit-content;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 1.4rem 2rem;
  position: relative;
  z-index: 2;
  border: 0;
  cursor: pointer;
}
.contact-cta__meta { position: relative; z-index: 2; margin-top: 3rem; font-size: var(--fs-body-s); line-height: 3rem; }
.contact-cta__illu {
  position: absolute;
  right: 2rem; bottom: -1rem;
  width: 47rem; max-width: 46%;
  z-index: 1;
}
.contact-cta__illu * { vector-effect: non-scaling-stroke; }
.illu-bob    { animation: cta-bob 1.33s ease-in-out infinite; }
.illu-pupil  { animation: cta-look 8s ease-in-out infinite; }
.illu-spin   { animation: cta-line 8s linear infinite; transform-origin: center; transform-box: fill-box; }
.illu-plus   { animation: cta-plus 8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.illu-circle { animation: cta-circ 8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes cta-bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes cta-look {
  0% { transform: translate(0, 0); } 16.7%, 29.2% { transform: translate(9px, 0); }
  45.8%, 70.8% { transform: translate(-7px, 0); }
  83.3%, 91.7% { transform: translate(-7px, 5px); } 100% { transform: translate(0, 0); }
}
@keyframes cta-line { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } }
@keyframes cta-plus {
  0%, 34.6% { transform: scale(1) rotate(0deg); } 38.7% { transform: scale(1.2) rotate(180deg); }
  42.9%, 100% { transform: scale(1) rotate(360deg); }
}
@keyframes cta-circ {
  0%, 62.1% { transform: scale(1) rotate(0deg); } 66.2% { transform: scale(0.7) rotate(180deg); }
  70.4%, 100% { transform: scale(1) rotate(360deg); }
}
@media (max-width: 720px) { .contact-cta__illu { display: none; } }

/* ============ Footer (zweistufig) ============ */
.first-footer {
  background: var(--gray-100);
  padding: 7rem 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  font-size: var(--fs-body-s);
  line-height: 4.3rem;
}
.first-footer__col1 {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 900px) { .first-footer__col1 { flex: 1 1 34%; } }
.first-footer__mail {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.6rem;
}
.first-footer a { display: block; opacity: 0.5; transition: opacity var(--dur-fast); }
.first-footer a:hover, .first-footer a:focus-visible { opacity: 1; }
.first-footer__col1 a.first-footer__mail { opacity: 1; }
/* dynamicLink-CTA im Footer (§5.9): voll deckend, ohne Einzug */
.first-footer a.dyn { display: inline-flex; opacity: 1; padding-left: 0; margin-top: 2rem; }
.first-footer__col { flex: 1 1 auto; }
.first-footer__head { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.first-footer__meta { text-align: right; flex: 1 1 auto; }
.second-footer {
  background: var(--white);
  padding: 3rem;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  opacity: 0.5;
}

/* ============ Projektseiten ============ */
.phero { margin-bottom: var(--section-s); }
.phero img { width: 100%; height: 48rem; object-fit: cover; }
@media only screen and (max-width: 599px) { .phero img { height: 28rem; } }
/* Über mich: Porträt höchstens so breit wie die Textspalte (.teaser__text), Höhe im gleichen Verhältnis wie sonst (seit 26.10.2026) */
.phero--text img { height: auto; aspect-ratio: 2 / 1; }
@media only screen and (max-width: 599px) { .phero--text img { aspect-ratio: 3 / 2; } }

.pmeta {
  display: flex;
  gap: 2.8rem;
  padding: 1.1rem 0;
  align-items: flex-start;
}
.pmeta + .pmeta { margin-top: 2rem; }
.pmeta__label {
  flex: 0 0 24rem;
  font-family: var(--font-bold);
  font-weight: 700;
}
.pmeta__text { flex: 1 1 auto; max-width: 86rem; }
.pmeta__text p + p { margin-top: 2rem; }
@media only screen and (max-width: 599px) {
  .pmeta { flex-direction: column; gap: 0.5rem; }
  .pmeta__label { flex: 0 0 auto; }
}

.pcontent ul {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.pcontent ul li {
  padding: 0.6rem 0 0.6rem 3.4rem;
  position: relative;
}
.pcontent ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.9rem;
  width: 1.4rem; height: 0.2rem;
  background: var(--green);
}

.gallery { display: flex; flex-direction: column; gap: var(--section-s); }
.gallery figure { margin: 0; }
.gallery figcaption {
  margin-top: 1.6rem;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  max-width: 75.2rem;
}

/* ImageText-Überlapp-Modul (Signatur: Bild 92vw, dunkle Box -8vw) */
.overlap {
  width: 92vw;
  margin: var(--section-s) 0 var(--section-m) calc((92vw - 100%) / -2);
}
.overlap img { width: 100%; height: 52rem; object-fit: cover; }
@media only screen and (max-width: 599px) { .overlap img { height: 30rem; } }
.overlap__box {
  background: var(--dark);
  color: var(--white);
  padding: 5rem 4.4rem;
  width: min(64rem, 90%);
  margin: -8vw auto 0;
  position: relative;
  z-index: 2;
}
.overlap__box .eyebrow { display: block; color: var(--green); margin-bottom: 2rem; }
.overlap__box p { font-size: var(--fs-body-s); line-height: var(--lh-body-s); }

/* Prev/Next-Navigation */
.pnav {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: var(--section-s) 0;
  flex-wrap: wrap;
}

/* ============ Projektseiten (seit 24.10.2026) ============
   Farben je Projekt setzt build_project() als :root-Variablen: --pc Projektfarbe (Band, Balken, Pfeil-Kacheln),
   --pc-text Schrift darauf, --green Akzent der ganzen Seite. Kopf-Maße:
   Bilder 64rem 3:2, hinten 23|28rem, vorn 38,5|16,5rem, Titel 12rem
   mit −6,3rem, Rahmen 86rem; mobil 31,5rem, 0|19,5 und 6|14,1rem, Titel 5,5rem mit +5,6rem, Rahmen 45,5rem). Die Bühne
   ist 128rem breit und zentriert, weil das Root hier ab 1440 px nicht weiter wächst. Einflug: beide Bilder
   diagonal gegeneinander, 500 ms easeInOutQuart. Zahlengrößen rechnet der Generator aus den Laufweiten der Display-Schrift. */
.pj-hero { position: relative; height: 86rem; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.pj-hero__stage { position: absolute; top: 0; bottom: 0; left: 50%; width: 128rem; margin-left: -64rem; }
.pj-hero__img { position: absolute; width: 64rem; aspect-ratio: 3 / 2; overflow: hidden; }
.pj-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-hero__img--under { top: 28rem; left: 23rem; animation: pj-under .5s cubic-bezier(.77,0,.175,1) .05s both; }
.pj-hero__img--top { top: 16.5rem; left: 38.5rem; animation: pj-top .5s cubic-bezier(.77,0,.175,1) .05s both; }
html.pl-on .pj-hero__img { animation-play-state: paused; }
@keyframes pj-under { from { transform: translate(31vw, -31vw); } to { transform: none; } }
@keyframes pj-top { from { transform: translate(-31vw, 31vw); } to { transform: none; } }
.pj-hero__title { position: relative; z-index: 2; margin: -6.3rem 0 0; max-width: 94rem; font-family: var(--font-display);
  font-weight: 300; text-transform: uppercase; font-size: 12rem; line-height: 12rem; text-align: center; }
.pj-text { max-width: 76rem; margin: 0 auto; padding: 4rem 0 var(--section-m); }
.pj-text h2 { font-family: var(--font-bold); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: 4rem; }
.pj-text p { font-size: var(--fs-body); line-height: var(--lh-body); }
.pj-text p + p { margin-top: 3rem; }
.pj-band { background: var(--pc); color: var(--pc-text); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.pj-band ul { width: 62vw; max-width: 90rem; list-style: none; margin: 0; padding: 15rem 0; font-size: 3.2rem; line-height: 4.8rem; }
.pj-band li { position: relative; padding: 1rem 0 1rem 5.5rem; }
.pj-band li::before { content: ""; position: absolute; left: 0; top: 2.6rem; width: 2.2rem; height: 1.1rem;
  border-left: .3rem solid currentColor; border-bottom: .3rem solid currentColor; transform: rotate(-45deg); }
/* Kennzahlen: zentrierte Light-Headline, Zahlen in der Display-Schrift nebeneinander, Beschreibung darunter. Unter jeder
   Zahl ein Balken in Projektfarbe (die Zahlen selbst bleiben schwarz und auf Weiß lesbar). Subgrid hält Zahl,
   Bezeichnung und Text spaltenübergreifend auf einer Linie. main.js zählt die Ziffern beim Hineinscrollen hoch
   (.pj-stat__val ist ein Fach in Breite des Endwerts) und öffnet den Balken aus der Mitte. */
.pj-stats { padding: var(--section-m) 0 4rem; text-align: center; }
.pj-stats__hl { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 6rem; }
.pj-stats__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 4rem; width: var(--container); margin: 0 auto; }
.pj-stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; justify-items: center; }
.pj-stat__num { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs); line-height: 1; white-space: nowrap; word-spacing: -.3em; }
.pj-stat__num::after { content: ""; display: block; width: 6rem; height: .6rem; margin: 2.2rem auto 0; background: var(--pc); }
.pj-stat__val { display: inline-block; text-align: center; }
.pj-stat--bereit .pj-stat__num::after { clip-path: inset(0 50%); }
.pj-stat--los .pj-stat__num::after { clip-path: inset(0); transition: clip-path 1.2s var(--ease-in-out-quart) calc(var(--d, 0ms) + .2s); }
.pj-stat__label { margin-top: 2.4rem; font-family: var(--font-bold); font-weight: 700; font-size: 2.2rem; line-height: 3rem; }
.pj-stat__label, .pj-stat__text { max-width: 100%; hyphens: none; overflow-wrap: break-word; }   /* Desktop: am Leerzeichen umbrechen, nicht an ­ */
.pj-stat__text { margin-top: .8rem; max-width: 26rem; font-size: var(--fs-body-s); line-height: 2.6rem; color: rgb(0 0 0 / .7); }
/* Rotes Etikett für unbelegte Zahlen und nicht freigegebene Kundenstimmen (nur mit ENTWURF=1 im Build) */
.pj-draft { display: block; width: fit-content; max-width: 100%; margin: 1.2rem auto 0; font-size: 1.1rem; letter-spacing: .15em;
  text-transform: uppercase; background: #c00; color: #fff; padding: .3rem .8rem; }
.pj-quote { padding-top: var(--section-m); text-align: center; }
.pj-quote figure { max-width: 96rem; margin: 0 auto; }
.pj-quote blockquote { margin: 0; font-size: 3.2rem; line-height: 4.8rem; }
.pj-quote blockquote::before { content: ""; display: block; width: 6rem; height: .6rem; margin: 0 auto 4rem; background: var(--pc); }
.pj-quote figcaption { margin-top: 3rem; font-size: var(--fs-body-s); line-height: 2.6rem; color: rgb(0 0 0 / .7); }
.pj-quote figcaption b { display: block; font-family: var(--font-bold); font-weight: 700; font-size: 2.2rem; line-height: 3rem; color: #000; }
.pj-cta { display: flex; justify-content: center; padding: 8rem 0; }
.pj-cta .cta-chip__box { background: var(--pc); color: var(--pc-text); }
.pj-full img { width: 100%; height: 76rem; object-fit: cover; display: block; }
/* Projekt-Karussell (seit 26.10.2026, ersetzt das Vollbild, wenn projektseiten.py „karussell“ setzt): im Inhaltsraster,
   alle Bilder gleich hoch im eigenen Format, das nächste schaut angeschnitten hervor. Inaktive Bilder über Opacity (.3). */
.pj-slider { width: var(--container); margin: 0 auto; padding-bottom: var(--section-m); }
.pj-slider__track { display: flex; gap: 2.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; outline: none; }
.pj-slider__track::-webkit-scrollbar { display: none; }
.pj-slider__slide { flex: 0 0 auto; height: 54rem; margin: 0; scroll-snap-align: start; opacity: .3;
  transition: opacity .6s var(--ease-out-quart); }
.pj-slider__slide.is-active { opacity: 1; }
.pj-slider__slide { max-width: 100%; }
.pj-slider__slide img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: cover; }
.pj-slider__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 2.4rem;
  padding-top: 2.4rem; border-top: 1px solid var(--line, #ECECEE); }
.pj-slider__info { display: flex; align-items: baseline; gap: 2.4rem; margin: 0; }
.pj-slider__count { font-family: var(--font-bold); font-weight: 700; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.pj-slider__label { font-size: var(--fs-body-s); color: rgb(0 0 0 / .7); }
.pj-slider__nav { display: flex; gap: .8rem; }
.pj-slider__btn { border: 0; padding: 0; cursor: pointer; background: var(--pc); color: var(--pc-text); font-family: inherit;
  transition: opacity .3s ease-in-out; }
.pj-slider__btn:disabled { opacity: .3; cursor: default; }
.pj-slider__btn:focus-visible, .pj-slider__track:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pj-slider__track { scroll-behavior: auto; } .pj-slider__slide { transition: none; } }
.pj-next { text-align: center; padding: var(--section-m) 2rem; }
.pj-next p { font-family: var(--font-bold); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: 3rem; }
.pj-next__title { display: inline-block; font-family: var(--font-display); text-transform: uppercase; line-height: 1;
  font-size: min(11rem, calc(104rem / var(--w))); word-spacing: -.25em; }
.pj-next .cta-chip__box { display: inline-flex; margin: 4rem auto 0; background: var(--pc); color: var(--pc-text); }
@media only screen and (max-width: 599px) {
  .pj-hero { height: 45.5rem; }
  .pj-hero__stage { left: 0; width: 100%; margin-left: 0; }
  .pj-hero__img { width: 31.5rem; }
  .pj-hero__img--under { top: 19.5rem; left: 0; }
  .pj-hero__img--top { top: 14.1rem; left: 6rem; }
  .pj-hero__title { margin-top: 5.6rem; max-width: 34rem; font-size: 5.5rem; line-height: 5.5rem; }
  .pj-band ul { width: 84vw; padding: 8rem 0; font-size: 2.2rem; line-height: 3.4rem; }
  .pj-band li { padding-left: 3.8rem; }
  .pj-band li::before { top: 1.8rem; width: 1.6rem; height: .8rem; }
  .pj-stats { padding-bottom: 0; }
  .pj-stats__hl { margin-bottom: 4rem; padding: 0 1.6rem; }
  .pj-stats__grid { grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); column-gap: 2rem; }
  .pj-stat { margin-bottom: 5rem; }
  .pj-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* ungerade Anzahl: letzte Zahl mittig */
  .pj-stat__num { font-size: var(--fs-m); }
  .pj-stat__num::after { width: 4.4rem; height: .4rem; margin-top: 1.4rem; }
  .pj-stat__label { font-size: 1.8rem; line-height: 2.4rem; margin-top: 1.6rem; hyphens: manual; }   /* mobil an den ­-Wortfugen aus projektseiten.py trennen */
  .pj-stat__text { font-size: 1.5rem; line-height: 2.2rem; }
  .pj-quote blockquote { font-size: 2.2rem; line-height: 3.4rem; }
  .pj-full img { height: 32rem; }
  .pj-slider__slide { height: 40rem; max-width: 86%; }   /* das nächste Bild schaut auch mobil hervor */
  .pj-slider__slide img { width: 100%; object-fit: cover; }
  .pj-slider__track { gap: 1.6rem; }
  .pj-slider__info { gap: 1.6rem; }
  .pj-next__title { font-size: min(5.6rem, calc(86vw / var(--w-m))); }
}
@media (prefers-reduced-motion: reduce) { .pj-hero__img { animation: none; } }

/* ============ Prozess-Streifen (Leistungsseiten; seit 25.10.2026) ============
   Ab 600 px läuft der Streifen beim Scrollen
   um −60 % nach links, die Schritte werden nacheinander aktiv (grünes Quadrat, Titel und Pfeil voll). Darunter
   stehen die Schritte untereinander, Pfeile nach unten gedreht. Steuerung in js/main.js.
   Einleitung und Schritte stehen links auf der Linie der Seite (.wrap), und die Schritte
   sind eine eigene Sektion mit gleichem Abstand nach oben und unten. */
.process__intro__headline { display: inline-block; margin: 1.6rem 0; font-family: var(--font-bold); font-weight: 700;
  font-size: 2.4rem; line-height: 3.6rem; }
.process__intro__text { font-size: 1.8rem; line-height: 3.4rem; }
.process__itemswrap { position: relative; }
.process__items { display: flex; flex-direction: column; gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
.process__item { flex: 1 0 auto; }
.process__item__content { display: flex; align-items: center; gap: 1.2rem; }
.process__item__checkbox { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 4.5rem; height: 4.5rem; background-color: var(--gray-300); opacity: 0.2;
  transition: background-color 0.3s var(--ease-in-out-quart);
  font-family: var(--font-bold); font-weight: 700; font-size: 2.4rem; line-height: 1.2; }
.process__item--active .process__item__checkbox { background-color: var(--green); opacity: 1; }
.process__item__title { margin: 0; color: #030303; opacity: 0.2; transition: opacity 0.3s var(--ease-in-out-quart);
  font-family: var(--font-bold); font-weight: 700; font-size: 1.8rem; line-height: 1.3; }
.process__item--active .process__item__title { opacity: 1; }
.process__item__arrow { display: flex; justify-content: center; width: 4.6rem; height: 4.6rem; padding: 1rem;
  margin-top: 1.4rem; transform: rotate(90deg); color: var(--gray-100); transition: color 0.3s var(--ease-in-out-quart); }
.process__item__arrow svg { display: block; height: 100%; }
.process__item--active .process__item__arrow { color: var(--black); }
.process__item:last-child .process__item__arrow { display: none; }
@media only screen and (min-width: 600px) {
  .process__intro__headline { font-size: 3.2rem; line-height: 5.2rem; margin: 0 0 3.3rem; }
  .process__intro__text { font-size: 2.4rem; line-height: 4.5rem; }
  .process__itemswrap { height: 7.4rem; }
  .process__items { position: absolute; left: 0; top: 0; flex-direction: row; gap: 4rem; will-change: transform; }
  .process__item { display: flex; align-items: center; gap: 4rem; }
  .process__item__content { gap: 2rem; }
  .process__item__checkbox { font-size: 3.8rem; width: 7.4rem; height: 7.4rem; }
  .process__item__title { font-size: 2.8rem; line-height: 1.4; }
  .process__item__arrow { margin: 0; padding: 0; transform: none; width: 4rem; height: auto; }
  .process__item__arrow svg { width: 100%; height: auto; }
  /* Reduzierte Bewegung: kein Laufband, Schritte umbrechen und sind alle aktiv */
  .process--statisch .process__itemswrap { height: auto; }
  .process--statisch .process__items { position: static; flex-wrap: wrap; row-gap: 3rem; }
}

/* ============ Blog (seit 25.10.2026): Übersicht /blog und Artikel /blog/<slug> ============
   Nach dem Artikel-Layout des MRT-Styleguides (§9.7), Maße in rem. Bilder aus der Bildwelt
   (S/W + ein Grün) ohne Graufilter. Übersicht: 1 Spalte, ab 600 px 2, ab 1024 px 3. */
.blog { padding: 16rem 0 var(--section-m); }
.blog__hl { max-width: 54.4rem; margin: 0 0 3.4rem; font-family: var(--font-bold); font-weight: 700;
  font-size: 3.2rem; line-height: 4rem; }
@media only screen and (min-width: 600px) { .blog__hl { font-size: 5rem; line-height: 6rem; margin-bottom: 5rem; } }

.bteaser-grid { display: grid; grid-template-columns: 1fr; column-gap: 3.2rem; }
@media only screen and (min-width: 600px) { .bteaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media only screen and (min-width: 1024px) { .bteaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bteaser { margin: 0 0 4.8rem; }
.bteaser__link { display: block; }
.bteaser__bild { position: relative; aspect-ratio: 357 / 208; background: var(--green); }
.bteaser__bild img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
@media (hover: hover) and (min-width: 1024px) {
  .bteaser__link:hover .bteaser__bild img { transform: translate(1rem, -1rem); }
}
.bteaser__link:focus-visible .bteaser__bild img { transform: translate(1rem, -1rem); }
.bteaser__type { margin: 0.8rem 0 0; font-weight: 400; font-size: 1.6rem; line-height: 3.2rem; }
.bteaser__hl { margin: 0; font-family: var(--font-bold); font-weight: 700; font-size: 2.2rem; line-height: 3.2rem; }
@media only screen and (min-width: 1024px) { .bteaser__hl { font-size: 2.4rem; line-height: 3.6rem; } }
.bteaser__excerpt { margin: 1.6rem 0 0; font-weight: 400; font-size: 1.6rem; line-height: 2.6rem; }

/* Artikel: Kopf und Text in der 75,2rem-Spalte, Titelbild über die volle Breite (3:2) */
.artikel { padding-top: 14rem; }
.artikel__kopf, .artikel__inhalt, .artikel__fuss, .nwl-teaser { max-width: 75.2rem; margin-left: auto; margin-right: auto; }
.artikel__kopf { padding: 2.2rem 0 2rem; }
.artikel__type { margin: 0 0 1.4rem; font-weight: 400; font-size: 1.8rem; line-height: 3.2rem; }
.artikel__hl { margin: 0 0 2.2rem; font-family: var(--font-bold); font-weight: 700; font-size: 3.2rem; line-height: 4rem;
  hyphens: manual; }
.artikel__excerpt { margin: 0 0 3.6rem; font-weight: 400; font-size: 1.8rem; line-height: 3.2rem; }
@media only screen and (min-width: 600px) {
  .artikel__hl { font-size: 5rem; line-height: 6rem; margin-bottom: 3.2rem; }
  .artikel__excerpt { font-size: 2.4rem; line-height: 3.8rem; }
}
.metabox { display: inline-flex; align-items: center; }
.metabox__bild { flex: none; width: 5.2rem; height: 5.2rem; margin: 0 1.2rem 0 0; object-fit: cover;
  border-radius: 50%; /* die dokumentierte Radius-Ausnahme des Styleguides */ }
.metabox__text { font-weight: 400; font-size: 1.6rem; line-height: 2.6rem; }
.artikel__bild { margin: 0; padding: 4rem 0 6rem; }
.artikel__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.artikel__inhalt { color: #030303; font-weight: 400; font-size: 1.8rem; line-height: 3.2rem; }
.artikel__inhalt > :first-child { margin-top: 0; }
.artikel__inhalt p { margin: 4rem 0; }
.artikel__inhalt h2 { margin: 5.6rem 0 0; font-family: var(--font-bold); font-weight: 700; font-size: 2.4rem; line-height: 3.6rem; }
.artikel__inhalt h3 { margin: 4rem 0 0; font-family: var(--font-bold); font-weight: 700; font-size: 2.2rem; line-height: 3.2rem; }
@media only screen and (min-width: 1024px) {
  .artikel__inhalt h2 { font-size: 3rem; line-height: 4rem; }
  .artikel__inhalt h3 { font-size: 2.4rem; line-height: 3.6rem; }
}
.artikel__inhalt h2 + p, .artikel__inhalt h3 + p, .artikel__inhalt h2 + ul, .artikel__inhalt h3 + ul { margin-top: 2.4rem; }
.artikel__inhalt ul, .artikel__inhalt ol { margin: 2.4rem 0; padding-left: 4rem; }
.artikel__inhalt li + li { margin-top: 1.8rem; }
.artikel__inhalt strong, .artikel__inhalt b { font-family: var(--font-bold); font-weight: 700; }
.artikel__inhalt a { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 0.2rem;
  text-underline-offset: 0.3rem; transition: text-decoration-color var(--dur-fast); }
.artikel__inhalt a:hover, .artikel__inhalt a:focus-visible { text-decoration-color: var(--black); }
.artikel__inhalt figure { margin: 5.6rem 0 7.2rem; }
.artikel__inhalt figure picture { display: block; }
.artikel__inhalt figure img { width: 100%; }
@media only screen and (max-width: 599px) {
  /* Grafiken auf dem Handy über die volle Breite (eigene Handy-Fassungen mit größerer Schrift) */
  .artikel__inhalt figure { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .artikel__inhalt figcaption { padding: 0 8vw; }
}
.artikel__inhalt figcaption { margin: 0.8rem 0 0; font-size: 1.6rem; line-height: 2.6rem; color: rgba(0, 0, 0, 0.55); }
.artikel__inhalt blockquote { margin: 5.6rem 0; padding: 0 0 0 2.4rem; border-left: 0.4rem solid var(--green);
  font-family: var(--font-bold); font-weight: 700; font-size: 2.4rem; line-height: 3.6rem; }
.artikel__inhalt .quellen { font-size: 1.6rem; line-height: 2.6rem; color: rgba(0, 0, 0, 0.7); }
.artikel__inhalt .quellen li + li { margin-top: 0.8rem; }

/* Teilen (reine Links, keine Fremd-Skripte) und Themen */
.artikel__fuss { padding-top: 4rem; }
.teilen { display: flex; gap: 0.8rem; margin: 1.6rem 0; }
.teilen a { display: grid; place-items: center; width: 4rem; height: 4rem; background: var(--black); color: var(--white);
  transition: transform 0.3s var(--ease-in-out-quart); }
.teilen a:hover, .teilen a:focus-visible { transform: scale(1.1); }
.teilen svg { width: 2.2rem; height: 2.2rem; }
.themen { margin: 0 0 3.2rem; font-weight: 400; font-size: 1.6rem; line-height: 2.6rem; }
.themen a { font-family: var(--font-bold); font-weight: 700; white-space: nowrap; }   /* Quadrat bleibt beim Umbruch am Wort */
.themen a::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin: 0 0.5rem 0.3rem 0.3rem;
  background: var(--black); }
.themen a:hover, .themen a:focus-visible { text-decoration: underline; text-decoration-color: var(--green);
  text-decoration-thickness: 0.2rem; text-underline-offset: 0.3rem; }
.themen--tags { margin-bottom: 0.8rem; }

/* Tag-Filter der Blog-Übersicht (seit 27.10.2026): Filter aus dem Style Guide (§5.7), Eyebrow-Typo, „/“ als Trenner,
   inaktiv Deckkraft .2, aktiv 1 und mit „ד (Klick darauf zeigt wieder alle) */
.blog__filter { margin: -1.6rem 0 5rem; line-height: 3.2rem; }
.blog__filter-el { display: inline-block; white-space: nowrap; }
.blog__filter a { opacity: 0.2; transition: opacity var(--dur-base); }
.blog__filter a.on, .blog__filter a:hover, .blog__filter a:focus-visible { opacity: 1; }
.blog__filter a.on:not([data-tag=""])::after { content: " \00d7"; }
.blog__filter i { font-style: normal; padding: 0 1.5rem; opacity: 0.25; }
.blog__filter-el:last-child i { display: none; }

/* Newsletter-Block nach dem Artikel: grüne Fläche, weißer Button, die animierte Strich-Illustration des Kontaktblocks */
.nwl-teaser { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; min-height: 32.4rem; margin-bottom: 9.6rem; padding: 3.7rem 5.4rem; background: var(--green); }
.nwl-teaser__hl { position: relative; z-index: 2; max-width: 39rem; margin: 0 0 1.9rem; font-family: var(--font-bold);
  font-weight: 700; font-size: 3.2rem; line-height: 4rem; }
@media only screen and (min-width: 600px) { .nwl-teaser__hl { font-size: 5rem; line-height: 6rem; } }
.nwl-teaser__btn { position: relative; z-index: 2; display: inline-flex; align-items: center; height: 4.3rem; padding: 0 2rem;
  background: var(--white); color: var(--black); font-family: var(--font-head); font-weight: 500; font-size: 1.3rem;
  letter-spacing: 0.1rem; text-transform: uppercase; }
.nwl-teaser .contact-cta__illu { right: 1rem; bottom: -1rem; width: 36rem; max-width: 48%; }
@media only screen and (max-width: 720px) {
  /* mobil: Text oben, Illustration unten rechts sichtbar */
  .nwl-teaser { justify-content: flex-start; min-height: 42.8rem; padding: 3.2rem 2.4rem; }
  .nwl-teaser .contact-cta__illu { display: block; width: 78%; max-width: none; right: -1rem; bottom: -1rem; }
}

/* Weitere Artikel unter dem Artikel */
.weitere { padding: 0 0 8rem; }
.weitere .wrap { border-top: 0.1rem solid #e3e3e3; padding-top: 3rem; }
.weitere--uebersicht { padding-bottom: var(--section-m); }   /* Startseite und Projektübersicht: drei neueste Artikel, darunter Link zum Blog */

/* ============ FAQ (Leistungsseiten, seit 27.10.2026): Accordion nach Style Guide §5.6 ============
   Natives <details>, damit die Antworten ohne JS im HTML stehen. Kopf #ECECEE mit weißem Plus-Chip (offen: Minus),
   Hover wie die Linklist: Chip sofort grün, weich zurück. Öffnen per block-size (.3s easeInOutQuart), wo der
   Browser interpolate-size kann; sonst klappt es ohne Übergang auf. */
.faq__list { display: flex; flex-direction: column; gap: 0.4rem; interpolate-size: allow-keywords; }
.faq__head {
  display: flex; justify-content: space-between; align-items: center; gap: 3rem;
  min-height: 8rem; padding: 1.6rem 1.6rem 1.6rem 2.2rem;
  background: var(--gray-100); color: var(--black);
  cursor: pointer; list-style: none;
}
.faq__head::-webkit-details-marker { display: none; }
.faq__frage { font-family: var(--font-bold); font-weight: 700; font-size: 1.8rem; line-height: 2.6rem; }
.faq__plus {
  flex: 0 0 auto;
  width: var(--icon-chip); height: var(--icon-chip);
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  font-size: 2rem; line-height: 1;
  transition: background-color var(--dur-base) var(--ease-out-quart);
}
.faq__plus::before { content: "+"; }
.faq__item[open] .faq__plus::before { content: "\2212"; }
.faq__head:hover .faq__plus, .faq__head:focus-visible .faq__plus { background: var(--green); transition-duration: 0s; }
.faq__item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size var(--dur-base) var(--ease-in-out-quart), content-visibility var(--dur-base) allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
.faq__panel { padding: 2.4rem 2.2rem 3.6rem; }
.faq__panel p { max-width: 86rem; font-size: 1.8rem; line-height: 3.2rem; }
@media only screen and (min-width: 600px) {
  .faq__frage { font-size: 2.2rem; line-height: 3.2rem; }
}

/* ============ Scroll-Reveal ============ */
.reveal {
  opacity: 0;
  transform: translateY(1vw);
  transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart);
}
.reveal.reveal--in { opacity: 1; transform: translateY(0); }

/* ============ Zeilen-Animation (Absätze in voller Textgröße auf Startseite, Leistungen und Über mich; seit 25.10.2026, ausgeweitet 26.10.2026) ============
   Jede Zeile steigt 1,3em auf und blendet ein (easeOutExpo, 1,8 s),
   Zeilen 60 ms versetzt. Beim Zurückscrollen läuft sie rückwärts, unterste Zeile zuerst (easeOutQuart, 0,9 s;
   die exakt gespiegelte Kurve stand fast eine Sekunde still). Wörter liegen als inline-block in ihrer Zeile und
   teilen sich deren Verzögerung --d, die js/main.js je Richtung setzt. */
[data-zeilen] .zw { display: inline-block; opacity: 0; transform: translateY(1.3em);
  transition: opacity 0.9s var(--ease-out-quart), transform 0.9s var(--ease-out-quart);
  transition-delay: calc(var(--d, 0) * 1ms); }
[data-zeilen].zeilen--in .zw { opacity: 1; transform: none;
  transition-duration: 1.8s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
[data-zeilen].zeilen--sofort .zw { transition: none; }

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .typo-anim * { animation: none !important; }
  .ta-push-in, .ta-arrive, .ta-scroll-in { visibility: hidden; }
  .reveal { opacity: 1; transform: none; }
  [data-zeilen] .zw { opacity: 1; transform: none; }
}

/* Preloader (Variante C „Grüne Linie", 23.10.2026): Linie wächst mit dem Ladefortschritt, öffnet
   sich zur grünen Fläche und wischt nach oben weg. Nur beim Einstieg von außen (Kopf-Skript setzt
   html.pl-on), Ablauf in main.js, spätestens nach 3 s. Ohne JS bzw. bei „Bewegung reduzieren“ aus. */
.pl { display: none; }
html.pl-on .pl {
  display: block;
  position: fixed; inset: 0; z-index: 9999;
  background: var(--dark);
  animation: pl-safety 0s 4.5s forwards; /* Notbremse, falls main.js nicht läuft */
}
@keyframes pl-safety { to { visibility: hidden; } }
.pl__line {
  position: absolute; inset: 0;
  background: var(--green);
  clip-path: inset(calc(50% - 0.15rem) 100% calc(50% - 0.15rem) 0);
}
.pl__label {
  position: absolute; right: 3rem; top: calc(50% + 1.6rem);
  font-family: var(--font-head); font-weight: 500;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--white); opacity: 0.5; font-variant-numeric: tabular-nums;
  transition: opacity 0.2s;
}
html.pl-on .pl--out { background: transparent; }
.pl--open .pl__label { opacity: 0; }
.pl--open .pl__line { clip-path: inset(0 0 0 0) !important; transition: clip-path 0.45s var(--ease-in-out-quart); }
.pl--out .pl__line { clip-path: inset(0 0 100% 0) !important; transition: clip-path 0.7s var(--ease-in-out-quart); }


/* ============ Kontaktseite (seit 23.10.2026): eine Frage pro Bildschirm ============
   Im MRT-System: dunkle Fläche, Frage in der Display-Schrift,
   Unterstreichungs-Feld (Fokus grün), Auswahl als Prozess-Quadrate, seitlicher Übergang, grüne
   Fortschrittslinie wie beim Preloader. Logik in main.js, Versand an api/anfrage.js. */
.kf { position: relative; background: var(--dark); color: var(--white); min-height: 100vh; min-height: 100svh; display: flex; padding: 15rem 0 5rem; }
.kf [hidden] { display: none !important; }
.kf__form { width: var(--container); margin: 0 auto; display: flex; flex-direction: column; }
.kf__bar { position: absolute; top: 0; left: 0; right: 0; height: 0.4rem; background: rgba(255, 255, 255, 0.08); }
.kf__bar span { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.6s var(--ease-in-out-quart); }
.kf__viewport { overflow: hidden; transition: height 0.6s var(--ease-in-out-quart); }
.kf__track { display: flex; align-items: flex-start; transition: transform 0.6s var(--ease-in-out-quart); }
.kf__slide { flex: 0 0 100%; min-width: 0; border: 0; margin: 0; padding: 0.6rem; }
.kf__count { display: block; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: none; opacity: 0.5; margin: 0 0 3rem; }
.kf__q { display: block; width: 100%; max-width: 104rem; padding: 0; margin: 0 0 5rem; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 7.2rem; line-height: 1; }
.kf__hint { font-size: 1.8rem; line-height: 2.6rem; opacity: 0.55; margin: -3rem 0 3.6rem; }

.kf__line { display: block; width: min(68rem, 100%); padding: 1.2rem 0; background: transparent; border: 0; border-bottom: 0.2rem solid rgba(255, 255, 255, 0.35); border-radius: 0;
  color: var(--white); font-family: var(--font-body); font-weight: 300; font-size: 3.4rem; line-height: 1.3; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.3s var(--ease-out-quart); }
.kf__line::placeholder { color: rgba(255, 255, 255, 0.3); }
.kf__line:focus { border-bottom-color: var(--green); }
.kf__line.is-invalid { border-bottom-color: var(--white); }
.kf__line--s { font-size: 2.2rem; margin-top: 3.2rem; width: min(48rem, 100%); }
.kf__line--area { width: min(84rem, 100%); min-height: 15rem; font-size: 2.6rem; resize: vertical; }

.kf__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 6rem; max-width: 104rem; }
.kf__opt { position: relative; display: flex; align-items: center; gap: 1.6rem; cursor: pointer; color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-bold); font-weight: 700; font-size: 2.4rem; line-height: 1.3; transition: color 0.2s var(--ease-out-quart); }
.kf__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kf__box { flex: 0 0 2.6rem; height: 2.6rem; border: 0.2rem solid rgba(255, 255, 255, 0.45); display: flex; align-items: center; justify-content: center;
  color: var(--black); font-family: var(--font-body); font-size: 1.6rem; transition: background-color 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart); }
.kf__opt:hover { color: var(--white); }
.kf__opt:hover .kf__box { border-color: var(--white); }
.kf__opt.is-checked { color: var(--white); }
.kf__opt.is-checked .kf__box { background: var(--green); border-color: var(--green); }
.kf__opt.is-checked .kf__box::after { content: "✓"; }
.kf__opt.is-focus .kf__box { outline: 0.2rem solid var(--green); outline-offset: 0.3rem; }
.kf__opt--consent { align-items: flex-start; max-width: 72rem; margin-top: 4.4rem; font-family: var(--font-body); font-weight: 300; font-size: 1.6rem; line-height: 2.6rem; }
.kf__opt--consent .kf__box { flex-basis: 2.4rem; height: 2.4rem; }
.kf__opt--consent.is-invalid .kf__box { border-color: var(--white); }
.kf__opt--consent .link { color: var(--white); }

.kf__err { display: flex; align-items: center; gap: 1.2rem; margin: 2.4rem 0 0; font-family: var(--font-bold); font-weight: 700; font-size: 1.7rem; line-height: 2.4rem; }
.kf__err::before { content: "!"; flex: 0 0 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--black); font-size: 1.4rem; }
.kf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Navigation unten links: leises „Zurück“, kräftiges „Weiter →“ mit grünem Pfeil-Chip */
.kf__nav { display: flex; align-items: center; gap: 4rem; margin-top: auto; padding-top: 5rem; }
.kf__prev { background: none; border: 0; padding: 0; cursor: pointer; color: var(--white); opacity: 0.45; transition: opacity 0.2s;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.kf__prev:hover, .kf__prev:focus-visible { opacity: 1; }
.kf__next, .kf__send { display: inline-flex; align-items: center; gap: 1.6rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--white);
  font-family: var(--font-display); font-weight: 400; font-size: 4rem; line-height: 1; text-transform: uppercase; }
.kf__next:focus-visible, .kf__send:focus-visible, .kf__prev:focus-visible { outline: 0.2rem solid var(--green); outline-offset: 0.6rem; }
.kf__send[disabled] { opacity: 0.5; cursor: progress; }
.kf__keyhint { font-size: 1.4rem; opacity: 0.35; }

.kf__done { flex: 1; animation: kf-in 0.6s var(--ease-out-quart); }
.kf__done:focus { outline: none; }
.kf__done-text { font-size: 2.4rem; line-height: 1.6; max-width: 70rem; opacity: 0.8; }
.kf .kf__done:target { display: block !important; }
@keyframes kf-in { from { opacity: 0; transform: translateX(4rem); } to { opacity: 1; transform: none; } }

/* Ohne JavaScript: alle Fragen untereinander, nur „Absenden“ */
.kf:not(.kf--js) .kf__track { flex-direction: column; }
.kf:not(.kf--js) .kf__slide + .kf__slide { margin-top: 10rem; }
.kf:not(.kf--js) .kf__keyhint { display: none; }

/* Unter dem Formular: direkter Kontakt + nächste Schritte */
.kf-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.kf-info .eyebrow { margin-bottom: 1.6rem; }
.kf-info__lead { font-size: var(--fs-body-s); line-height: var(--lh-body-s); margin: 0 0 1.6rem; }
.kf-info__contact { font-size: var(--fs-body-s); line-height: 3.2rem; }
.kf-next { list-style: none; margin: 0; padding: 0; counter-reset: kfn; }
.kf-next li { counter-increment: kfn; position: relative; padding: 0 0 1.6rem 4.4rem; font-size: 1.5rem; line-height: 2.3rem; }
.kf-next li::before { content: counter(kfn, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center;
  background: var(--green); font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; }
.kf-next b { display: block; }

@media only screen and (max-width: 599px) {
  .kf { padding: 13rem 0 5rem; }
  .kf__q { font-size: 4.2rem; margin-bottom: 3.6rem; }
  .kf__hint { margin: -2rem 0 2.8rem; }
  .kf__line { font-size: 2.4rem; }
  .kf__line--s { font-size: 1.9rem; }
  .kf__line--area { font-size: 2rem; }
  .kf__opts { grid-template-columns: 1fr; gap: 1.6rem; }
  .kf__opt { font-size: 1.9rem; }
  .kf__nav { gap: 3rem; padding-top: 4rem; }
  .kf__next, .kf__send { font-size: 3rem; }
  .kf__keyhint { display: none; }
  .kf-info__grid { grid-template-columns: 1fr; gap: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kf__track, .kf__bar span, .kf__viewport { transition: none; }
  .kf__done { animation: none; }
}

/* ============ Terminseite /termin (seit 06.11.2026): Calendly erst nach Klick ============ */
.kf-info__termin { margin-top: 2.4rem; }
.tb { display: grid; grid-template-columns: 4fr 7fr; gap: 6rem; align-items: start; }
.tb__lead { font-size: var(--fs-body-s); line-height: var(--lh-body-s); margin: 0 0 3.2rem; }
.tb__alt { font-size: 1.5rem; line-height: 2.8rem; margin-top: 2.4rem; }
.tb__cal { background: #ECECEE; min-height: 68rem; position: relative; }
.tb__gate { padding: 6rem; max-width: 60rem; }
.tb__gate .eyebrow { margin-bottom: 2rem; }
.tb__gate-text { font-size: 1.5rem; line-height: 2.4rem; margin: 0 0 3.2rem; }
.tb__load { display: inline-flex; align-items: center; gap: 1.4rem; padding: 0 0 0 2rem; }
.tb__load .cta-chip__box { height: 4.6rem; width: 4.6rem; }
.tb__direct { font-size: 1.4rem; margin-top: 2.4rem; }
.tb__frame { display: block; width: 100%; height: 72rem; border: 0; background: #fff; }
.tb__cal.is-loaded { background: #fff; min-height: 0; }
@media only screen and (max-width: 599px) {
  .tb { grid-template-columns: 1fr; gap: 4rem; }
  .tb__cal { min-height: 0; }
  .tb__gate { padding: 3.2rem 2.4rem; }
  .tb__frame { height: 110rem; }
}

/* ============ Einwilligungs-Banner (seit 23.10.2026, nur wenn Tracking-IDs gesetzt sind) ============
   Dunkle Fläche mit grüner Oberkante, unten links, 0 Radius/0 Schatten. „Alle akzeptieren“ und
   „Nur notwendige“ sehen bewusst gleich aus (keine Lenkung, § 25 TDDDG). */
.cc {
  position: fixed; left: 3rem; bottom: 3rem; z-index: 90;
  width: min(56rem, calc(100vw - 6rem));
  max-height: calc(100vh - 6rem); overflow-y: auto;
  padding: 3.2rem 3.2rem 2.8rem;
  background: #202020; color: var(--white);
  border-top: 0.4rem solid var(--green);
  translate: 0 2rem; opacity: 0;
  transition: opacity 0.4s var(--ease-out-quart), translate 0.4s var(--ease-out-quart);
}
.cc[hidden] { display: none; }
.cc.is-in { translate: 0 0; opacity: 1; }
.cc .eyebrow { display: block; margin-bottom: 1.4rem; color: var(--green); }
.cc__text { font-size: var(--fs-body-s); line-height: 2.6rem; color: rgba(255, 255, 255, 0.8); }
.cc__text .link { color: var(--white); }
.cc__text .link:hover::after, .cc__text .link:focus-visible::after { background: var(--white); }
.cc__opts { display: grid; gap: 1.6rem; margin-top: 2.4rem; padding-top: 2.4rem; border-top: 0.1rem solid rgba(255, 255, 255, 0.15); }
.cc__opts[hidden] { display: none; }
.cc__opt { position: relative; display: flex; align-items: flex-start; gap: 1.6rem; cursor: pointer;
  font-size: var(--fs-body-s); line-height: 2.4rem; color: rgba(255, 255, 255, 0.7); }
.cc__opt b { display: block; color: var(--white); }
.cc__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cc__box { flex: 0 0 2.4rem; height: 2.4rem; margin-top: 0.1rem; border: 0.2rem solid rgba(255, 255, 255, 0.45);
  display: flex; align-items: center; justify-content: center; color: var(--black); font-size: 1.5rem; font-family: var(--font-bold);
  transition: background var(--dur-fast), border-color var(--dur-fast); }
.cc__opt:hover .cc__box { border-color: var(--white); }
.cc__opt input:checked + .cc__box { background: var(--green); border-color: var(--green); }
.cc__opt input:checked + .cc__box::after { content: "✓"; }
.cc__opt input:focus-visible + .cc__box { outline: 0.2rem solid var(--green); outline-offset: 0.3rem; }
.cc__opt.is-locked { cursor: default; }
.cc__opt.is-locked .cc__box { opacity: 0.5; }
.cc__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.2rem; margin-top: 2.8rem; }
.cc__btn {
  flex: 1 1 0; min-width: max-content;
  padding: 1.4rem 2rem;
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--white); background: transparent; border: 0.2rem solid var(--white); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.cc__btn[hidden] { display: none; }
.cc__btn:focus-visible { border-color: var(--green); outline: 0; }   /* Hover: Sweep wie alle Buttons (.fx) */
.cc__link {
  flex: 0 0 100%; text-align: left; padding: 0.4rem 0;
  font-size: 1.5rem; color: rgba(255, 255, 255, 0.6); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 0.4rem; text-decoration-thickness: 0.2rem;
}
.cc__link:hover, .cc__link:focus-visible { color: var(--white); outline: 0; }
.cc.is-open .cc__link { display: none; }
/* Footer-Schalter „Cookie-Einstellungen“ sieht aus wie die übrigen Footer-Links */
.first-footer .cc-open { display: block; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left;
  opacity: 0.5; transition: opacity var(--dur-fast); }
.first-footer .cc-open:hover, .first-footer .cc-open:focus-visible { opacity: 1; }
@media only screen and (max-width: 599px) {
  .cc { left: 0; bottom: 0; width: 100%; max-height: 85vh; padding: 2.8rem 1.6rem 2.4rem; }
  .cc__text, .cc__opt { font-size: 1.8rem; line-height: 2.8rem; }
  .cc__btn { flex: 1 1 100%; padding: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .cc { transition: none; translate: none; } }

/* ============ Newsletter-Anmeldung (Footer + /newsletter, seit 24.10.2026) ============
   Kompaktform laut Styleguide §5.8: Eingabe + quadratischer 4.5rem-Button in #E1E1E5, Pfeil gleitet beim Hover.
   Double-Opt-in über api/newsletter.js, Logik in main.js ([data-nl]). */
.nl { width: 100%; max-width: 46rem; margin-top: 4.5rem; line-height: 1.5; }
.nl .first-footer__head { display: block; margin-bottom: 1rem; }
.nl__text { font-size: var(--fs-body-s); line-height: 2.6rem; opacity: 0.7; margin-bottom: 1.6rem; }
.nl__row { display: flex; gap: 0.2rem; }
.nl__input {
  flex: 1 1 auto; min-width: 0; height: 4.5rem; padding: 0 1.6rem;
  border: 0; border-radius: 0; background: var(--gray-200); color: var(--black);
  font: inherit; font-size: var(--fs-body-s); outline: 0;
  box-shadow: inset 0 -0.3rem 0 transparent; transition: box-shadow var(--dur-fast);
}
.nl__input::placeholder { color: rgba(0, 0, 0, 0.45); }
.nl__input:focus-visible { box-shadow: inset 0 -0.3rem 0 var(--green); }
.nl__btn {
  flex: 0 0 4.5rem; height: 4.5rem; border: 0; border-radius: 0; padding: 0;
  background: var(--gray-200); color: var(--black); font-size: 2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: background var(--dur-fast);
}
.nl__btn span { display: block; transition: translate 0.3s var(--ease-out-quart); }
.nl__btn:hover, .nl__btn:focus-visible { background: var(--green); outline: 0; }
.nl__btn:hover span, .nl__btn:focus-visible span { translate: 0.4rem 0; }
.nl__btn:disabled { cursor: wait; opacity: 0.6; }
.nl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl__hint { font-size: 1.3rem; line-height: 2rem; opacity: 0.6; margin-top: 1rem; }
.first-footer .nl__hint a, .nlpage .nl__hint a { display: inline; opacity: 1; text-decoration: underline; text-underline-offset: 0.3rem; }
.nl__msg { font-size: var(--fs-body-s); line-height: 2.4rem; margin-top: 1.2rem; }
.nl__msg:empty { display: none; }
.nl__msg.is-ok { font-family: var(--font-bold); font-weight: 700; padding-left: 1.4rem; border-left: 0.4rem solid var(--green); }
.nl__msg.is-err { font-family: var(--font-bold); font-weight: 700; }
.nl.is-done .nl__row, .nl.is-done .nl__hint { display: none; }
/* Seite /newsletter */
.nlpage__state .h2 { margin-bottom: 2rem; }
.nlpage__form .nl { margin-top: 5rem; }
.nlpage__form .nl__input, .nlpage__form .nl__btn { background: var(--gray-100); }
.nlpage__form .nl__btn:hover, .nlpage__form .nl__btn:focus-visible { background: var(--green); }

/* Dokumentarisches Studiofoto unten auf der Startseite (seit 24.10.2026):
   volle Breite im Format 3:2, auf dem Handy etwas höher beschnitten, Personen bleiben mittig */
.fullbleed--photo img { height: auto; aspect-ratio: 3 / 2; object-position: 60% 50%; }
@media only screen and (max-width: 599px) { .fullbleed--photo img { aspect-ratio: 4 / 3; height: auto; object-position: 66% 50%; } }
/* Graustufen → Farbe beim Hineinscrollen (seit 24.10.2026): main.js setzt --gs von 1 (Bildoberkante am
   unteren Rand) bis 0 (Bildmitte ~ Bildschirmmitte). Ohne JS oder bei reduced motion bleibt das Bild farbig. */
.fullbleed--photo img { filter: grayscale(var(--gs, 0)) contrast(calc(1 + var(--gs, 0) * 0.06)); will-change: filter; }

/* ============ Projektseiten im Case-Aufbau (seit 24.10.2026, _build/cases.py) ============ */
.case-head .eyebrow { display: block; margin-bottom: 2.4rem; }
.case-head__hl { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; line-height: 1; font-size: 9rem; max-width: 110rem; }
.case-head__hl em { font-style: normal; color: var(--black); background: linear-gradient(transparent 64%, var(--green) 64%); }
@media only screen and (max-width: 599px) { .case-head__hl { font-size: 5.4rem; } }
.case-intro { display: grid; grid-template-columns: 30rem 1fr; gap: 8rem; }
.case-facts dt { font-family: var(--font-bold); font-weight: 700; font-size: var(--fs-body-s); line-height: 2.6rem; }
.case-facts dd { font-size: var(--fs-body-s); line-height: 2.6rem; margin: 0 0 2.4rem; opacity: 0.75; }
.case-story p + p { margin-top: 3rem; }
.case-story p { font-size: var(--fs-body); line-height: var(--lh-body); }
@media only screen and (max-width: 599px) { .case-intro { grid-template-columns: 1fr; gap: 4rem; } }
.case-sec-hl { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: 7rem; line-height: 1; margin-bottom: 3rem; }
.case-vorgehen { max-width: 76rem; font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.case-tiles { display: grid; gap: 3rem; margin-top: 7rem; }
.case-tile { display: grid; grid-template-columns: 1fr 1fr; background: var(--gray-100); min-height: 46rem; }
.case-tile__img { overflow: hidden; }
.case-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-tile__img--contain { background: #fff; display: flex; align-items: center; }
.case-tile__img--contain img { object-fit: contain; height: auto; }
.case-tile__text { padding: 6rem 6rem; display: flex; flex-direction: column; justify-content: center; }
.case-tile:nth-child(even) .case-tile__img { order: 2; }
.case-tile__text h3 { font-family: var(--font-bold); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: 2.4rem; }
.case-tile__text ul { padding: 0; margin: 0; }
.case-tile__text li { list-style: none; position: relative; padding-left: 2.4rem; font-size: var(--fs-body-s); line-height: 2.8rem; margin-bottom: 1.2rem; }
.case-tile__text li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 1rem; height: 1rem; background: var(--green); }
@media only screen and (max-width: 599px) {
  .case-tile { grid-template-columns: 1fr; }
  .case-tile:nth-child(even) .case-tile__img { order: 0; }
  .case-tile__img img { height: 28rem; }
  .case-tile__text { padding: 3.6rem 2.4rem; }
}
.case-results { background: var(--green); color: var(--black); padding: var(--section-m) 0; }
.case-results .eyebrow { display: block; margin-bottom: 2rem; }
.case-results__lead { max-width: 76rem; font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: 7rem; }
.case-results__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6rem; }
.case-num--word + .case-num__text { font-size: var(--fs-body-s); line-height: 2.8rem; margin-top: 1.6rem; }
.case-num { font-family: var(--font-display); font-size: 13rem; line-height: 1; display: block; white-space: nowrap; }
.case-num__label { font-family: var(--font-bold); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); display: block; margin-top: 1.6rem; }
.case-num__text { font-size: var(--fs-body-s); line-height: 2.6rem; display: block; margin-top: 0.8rem; max-width: 40rem; }
@media only screen and (max-width: 599px) { .case-results__grid { grid-template-columns: 1fr; gap: 5rem; } .case-num { font-size: 9rem; } }
.case-num--word { font-size: 5.6rem; line-height: 1.05; white-space: normal; hyphens: manual; }
@media only screen and (max-width: 599px) { .case-num--word { font-size: 3.8rem; } }
.case-quote { position: relative; max-width: 110rem; margin: 0; padding-left: 4rem; border-left: 0.6rem solid var(--green); }
.case-quote .eyebrow { display: block; margin-bottom: 2.4rem; }
.case-quote blockquote { margin: 0; font-family: var(--font-bold); font-weight: 700; font-size: 3.6rem; line-height: 5rem; }
.case-quote figcaption { margin-top: 3rem; font-size: var(--fs-body-s); line-height: 2.6rem; }
.case-quote figcaption b { display: block; }
.case-quote__draft { display: inline-block; margin-bottom: 1.6rem; font-size: 1.2rem; letter-spacing: .15em; text-transform: uppercase; background: #c00; color: #fff; padding: .4rem 1rem; }
@media only screen and (max-width: 599px) { .case-quote { padding-left: 2.4rem; } .case-quote blockquote { font-size: 2.4rem; line-height: 3.4rem; } }
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem 3rem; }
.case-gallery figure { margin: 0; }
.case-gallery img { width: 100%; height: 40rem; object-fit: cover; display: block; }
.case-gallery figcaption { margin-top: 1.6rem; font-size: 1.5rem; line-height: 2.4rem; opacity: .7; max-width: 60rem; }
@media only screen and (max-width: 599px) { .case-gallery { grid-template-columns: 1fr; } .case-gallery img { height: 26rem; } }

/* Projekt-Header (seit 24.10.2026): zwei versetzte Bilder (hinten grünes Duotone,
   vorn Graustufen-Hero), darüber der Projektname in der Display-Schrift, schwarz, mittig über beide Bilder. */
.case-hero { padding: 16.5rem 0 8rem; }
.case-hero__stage { position: relative; width: 79.5rem; height: 54rem; margin: 0 auto; translate: 8rem 0; }
.case-hero__img { position: absolute; width: 64rem; aspect-ratio: 3 / 2; overflow: hidden; }
.case-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-hero__img--back { left: 0; top: 11.5rem; }
.case-hero__img--front { right: 0; top: 0; }

.case-hero__title {
  position: absolute; left: 50%; top: 22rem; translate: -50% -50%; width: max-content; max-width: 120rem; margin-left: -8rem;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1; color: var(--black);
  font-size: min(12rem, calc(118rem / (var(--n) * 0.62))); text-align: center; hyphens: manual;
}
.case-lead { padding-bottom: 2rem; }
.case-lead .eyebrow { display: block; margin-bottom: 2.4rem; }
.case-lead .case-head__hl { font-size: 7.2rem; }
@media only screen and (max-width: 599px) {
  .case-hero { padding: 11rem 0 5rem; }
  .case-hero__stage { width: 100%; height: 72vw; translate: none; }
  .case-hero__img { width: 84vw; }
  .case-hero__img--back { left: 0; top: 16vw; }
  .case-hero__img--front { right: 0; top: 0; }
  .case-hero__title { left: 58vw; top: 28vw; margin-left: 0; max-width: 80vw; width: 80vw; white-space: normal; font-size: min(12vw, calc(150vw / (var(--n) * 0.62))); }
  .case-lead .case-head__hl { font-size: 4.6rem; }
}
/* Einstieg: beide Bilder werden sichtbar und fliegen
   diagonal gegeneinander ein, hinten von rechts oben (31vw | −31vw), vorn von links unten (−31vw | 31vw), 500 ms
   easeInOutQuart, gleichzeitig. Der Titel steht. Während der Preloader läuft, wartet die Animation (pausiert). */
.case-hero { overflow: hidden; }
.case-hero__img--back { animation: case-in-back 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.05s both; }
.case-hero__img--front { animation: case-in-front 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.05s both; }
html.pl-on .case-hero__img { animation-play-state: paused; }
@keyframes case-in-back { from { transform: translate(31vw, -31vw); } to { transform: none; } }
@keyframes case-in-front { from { transform: translate(-31vw, 31vw); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .case-hero__img { animation: none; } }

/* Terminseite: Überschrift „Lass uns sprechen.“ als Typo-Animation „Nachricht“ (seit 06.11.2026):
   das letzte Wort wird wie eine Chat-Nachricht getippt, grüner Block-Cursor, steht kurz, wird gelöscht, neu getippt.
   Ohne JS bzw. bei reduzierter Bewegung steht das Wort fertig da. Logik in js/main.js */
.tw { display: inline-block; white-space: nowrap; }
.tw__cur { display: inline-block; width: .5em; height: .82em; background: var(--green); vertical-align: -.04em; margin-left: .06em; }
.tw__cur.is-blink { animation: tw-blink .9s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw__cur.is-blink { animation: none; } }