/* ==========================================================================
   MELANIE BELLOMO — Portfolio Prototyp
   Stylesheet-Aufbau:
   01 Tokens · 02 Reset · 03 Typografie · 04 Layout/Grid · 05 Utilities
   06 Header · 07 Hero · 08 ProjectFeature · 09 EditorialStatement
   10 SkillsAndTools · 11 AboutPreview · 12 Footer
   13 CaseStudy · 14 Motion · 15 Responsive
   ========================================================================== */

/* ---------- 00 SCHRIFTEN (selbst gehostet) -------------------------------
   Bricolage Grotesque trägt die Überschriften, Instrument Sans den Text.
   Beide liegen als woff2 im Projekt statt bei Google: keine Anfrage an
   einen fremden Server, kein Flackern beim Laden, und die Seite bleibt
   auch offline vollständig. `font-display: swap` zeigt sofort die
   Ersatzschrift, damit nichts unsichtbar bleibt.
   ====================================================================== */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");}
/* Nunito ist die Textschrift der Marke MONA und wird nur in deren Case Study
   gebraucht — deshalb erst dort geladen, nicht auf jeder Seite. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/nunito-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/nunito-latin-700-normal.woff2") format("woff2");}

/* ---------- 01 TOKENS ---------------------------------------------------- */
:root {
  /* Farbwelt */
  --cream:        #FAF7F1;
  --cream-2:      #F4EFE5;
  --cream-3:      #EDE6D9;
  --navy:         #17204A;
  --navy-deep:    #101733;
  --gold:         #B8945F;   /* dekorativ / große Flächen */
  --gold-ink:     #7E5C2C;   /* Text-tauglich auf Cream und auf den
                                getönten Kapitelflächen (AA) */
  --gold-light:   #DCC08C;   /* auf Navy */
  --ink:          #141B33;   /* Headlines auf Cream */
  --body:         #4B4943;   /* Fließtext auf Cream */
  --muted:        #5F5B53;   /* auf Creme 6,4:1, auf den getönten
                                Kapitelflächen 5,6:1 (vorher 4,4:1) */
  --line:         #DED6C7;

  --on-navy:      #F4EFE5;
  --on-navy-mut:  #A8AEC6;
  --line-navy:    rgba(244,239,229,.16);

  /* Typografie */
  --font-display: "Bricolage Grotesque", "Instrument Sans", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Arial, sans-serif;

  /* Bewusst kleiner als zuvor (max. 5,1rem): die vierzeilige Headline
     wirkte auf großen Schirmen gedrängt. */
  --fs-display:  clamp(2.2rem, 4.3vw, 4.15rem);
  --fs-h2:       clamp(2rem, 4.2vw, 3.55rem);
  --fs-h3:       clamp(1.45rem, 2.3vw, 2.1rem);
  --fs-h4:       clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-lead:     clamp(1.05rem, 1.25vw, 1.25rem);
  --fs-body:     clamp(1rem, .55vw + .85rem, 1.0625rem);
  --fs-small:    .9375rem;
  --fs-label:    .72rem;

  /* Raster & Raum */
  --pad:         clamp(1.25rem, 5vw, 5.5rem);
  --maxw:        1560px;
  --gap:         clamp(1.25rem, 2.4vw, 2.5rem);
  --section:     clamp(4rem, 7.5vw, 8rem);
  --section-sm:  clamp(3.25rem, 5.5vw, 5.5rem);

  /* Motion */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.23, 1, .32, 1);   /* kräftiges Ease-out für Eintritte */
  --dur:         700ms;
}

/* ---------- 02 RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Die Kopfzeile ist fixiert. Ohne dieses Polster landet jeder Ankersprung
   (#projekte, #ueber-mich, #kontakt, auch der Sprunglink) genau darunter
   und die ersten Zeilen des Ziels sind verdeckt. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: clamp(5.5rem, 10vh, 7.5rem);
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* height: auto ist die Absicherung für die width/height-Attribute im HTML.
   Ohne sie gewinnt die Höhenangabe aus dem Attribut gegen CSS, sobald dort
   keine Höhe steht — genau so wurden Marke und Projektkacheln gestreckt.
   Alle Regeln, die einem Bild bewusst eine Höhe geben, hängen an einer
   Klasse und schlagen diese Zeile. */
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Sichtbarer, ruhiger Focus-State (Accessibility) */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-navy :focus-visible, .footer :focus-visible, .cs-hero--navy :focus-visible {
  outline-color: var(--gold-light);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Bewegung über transform statt über `top` — `top` löst bei jedem Schritt
   Layout aus, transform läuft auf der Grafikkarte. */
.skip-link {
  position: absolute; left: var(--pad); top: 1rem; z-index: 200;
  background: var(--navy); color: var(--on-navy);
  padding: .75rem 1.15rem; font-size: var(--fs-small);
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform 180ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 03 TYPOGRAFIE ------------------------------------------------ */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.07;
  letter-spacing: -.018em;
  color: var(--ink);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -.014em;
  color: var(--ink);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--body);
  max-width: 34ch;
}
.body-text { max-width: 62ch; }
.body-text + .body-text { margin-top: 1.1em; }

/* Kleines Label mit Sperrung — durchgängiges Orientierungselement */
.label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.label--muted { color: var(--muted); }
.on-navy .label, .footer .label { color: var(--gold-light); }

.eyebrow {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--line); max-width: 120px;
}
.on-navy .eyebrow::after, .footer .eyebrow::after { background: var(--line-navy); }

/* ---------- 04 LAYOUT ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
/* Eine Rasterzeile innerhalb einer Rasterzeile spannt immer alle Spalten —
   sonst landet sie als einzelne Spalte im Elternraster. */
.grid > .grid { grid-column: 1 / -1; }
.section { padding-block: var(--section); }
.section--sm { padding-block: var(--section-sm); }
.section--navy {
  background: var(--navy);
  color: var(--on-navy-mut);
}
.section--navy .h2, .section--navy .h3, .section--navy .display { color: var(--on-navy); }
.section--cream2 { background: var(--cream-2); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 05 UTILITIES ------------------------------------------------- */
/* Link mit wanderndem Pfeil (Microinteraction) */
.arrow-link {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gold-ink);
  padding-block: .35em;
  transition: color 240ms var(--ease), transform 140ms var(--ease-out);
}
.arrow-link .arrow {
  display: inline-block;
  transition: transform 200ms var(--ease-out);
}
.arrow-link:hover .arrow, .arrow-link:focus-visible .arrow { transform: translateX(7px); }
.arrow-link:hover { color: var(--ink); }
.on-navy .arrow-link, .footer .arrow-link { color: var(--gold-light); }
.on-navy .arrow-link:hover, .footer .arrow-link:hover { color: var(--on-navy); }

.arrow-link--lg { font-size: clamp(1rem, 1.2vw, 1.15rem); }

/* ---------- Druckreaktion ------------------------------------------------
   Bisher gab es im ganzen Stylesheet keinen einzigen :active-Zustand.
   Auf dem Telefon bemerkte dadurch nichts den Druck. Kleine Elemente
   dürfen deutlich nachgeben, ganze Kacheln nur eine Spur — 0,97 wäre
   auf einer 480 px breiten Fläche zu viel. */
.arrow-link:active,
.nav__link:active,
.brand:active,
.nav-toggle:active { transform: scale(.97); }

.next-visual__link:active,
.next-project__link:active { transform: scale(.994); }

.nav__link, .brand, .nav-toggle { transition: transform 140ms var(--ease-out); }

/* Auf Zeigegeräten ohne Druckpunkt (Maus) genügt der Farbwechsel —
   die Skalierung ist für den Finger gedacht. */
@media (hover: hover) and (pointer: fine) {
  .arrow-link:active, .nav__link:active, .brand:active { transform: scale(.985); }
}

/* Unterstrichener Textlink */
.u-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 320ms var(--ease);
}
.u-link:hover, .u-link:focus-visible { background-size: 100% 1px; }

/* Platzhalter-Fläche — klar erkennbar, ersetzbar durch echtes Bild */
.placeholder {
  position: relative;
  display: grid;
  place-content: center;
  gap: .55rem;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg,
      rgba(20,27,51,.028) 0 2px, transparent 2px 11px),
    var(--ph-bg, var(--cream-3));
  border: 1px solid var(--ph-line, var(--line));
  color: var(--ph-fg, #69655E);
  padding: 2rem 1.5rem;
  overflow: hidden;
}
.placeholder__label {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ph-fg, #69655E);
}
.placeholder__hint {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ph-fg, #69655E);
  opacity: .85;
}
/* Markenwelt-Tönungen: deuten die eigene Farbwelt an, ohne Design zu erfinden */
.placeholder--mona   { --ph-bg: #F3E6EC; --ph-line: #E2CBD8; --ph-fg: #7D606D; }
/* Tönung nach AURUMs echtem Markenblau #29235C */
.placeholder--aurum  { --ph-bg: #322B6B; --ph-line: rgba(220,192,140,.38); --ph-fg: #D8C4A0; }
.placeholder--neutral{ --ph-bg: #EAE5DA; --ph-line: #D8D0C0; --ph-fg: #69655E; }

.ratio { position: relative; width: 100%; }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ratio > img { object-fit: cover; }
.ratio--21x9  { aspect-ratio: 21 / 9; }
.ratio--16x5  { aspect-ratio: 16 / 5; }
.ratio--16x9  { aspect-ratio: 16 / 9; }
.ratio--16x10 { aspect-ratio: 16 / 10; }   /* fehlte — Bilder in diesem Rahmen hatten Höhe 0 */
.ratio--3x2   { aspect-ratio: 3 / 2; }
.ratio--4x5   { aspect-ratio: 4 / 5; }
.ratio--1x1   { aspect-ratio: 1 / 1; }
.ratio--5x4   { aspect-ratio: 5 / 4; }

.caption {
  margin-top: .85rem;
  font-size: .8125rem;
  color: var(--muted);
  letter-spacing: .01em;
}
.section--navy .caption { color: var(--on-navy-mut); }

/* ---------- 06 HEADER ---------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: clamp(1.1rem, 2vw, 1.9rem);
  transition: padding-block 420ms var(--ease), background-color 420ms var(--ease),
              box-shadow 420ms var(--ease), backdrop-filter 420ms var(--ease);
}
.header::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(250,247,241,.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  opacity: 0;
  transition: opacity 420ms var(--ease);
  pointer-events: none;
}
.header.is-scrolled { padding-block: clamp(.7rem, 1.1vw, 1rem); }
.header.is-scrolled::before { opacity: 1; }
.header.is-scrolled { box-shadow: 0 1px 0 rgba(20,27,51,.07); }

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .95rem; }
.brand__mark {
  width: auto;
  height: clamp(34px, 3.6vw, 46px);
  transition: height 420ms var(--ease);
}
.header.is-scrolled .brand__mark { height: clamp(28px, 2.7vw, 34px); }
.brand__text { display: flex; flex-direction: column; gap: .28em; }
.brand__name {
  font-size: clamp(.72rem, .85vw, .82rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.brand__sub {
  font-size: .61rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.nav__link {
  position: relative;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  padding-block: .5rem;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: .1rem;
  width: 100%; height: 1px;
  background: var(--gold-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav__link:hover::after, .nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link .ext { font-size: .8em; display: inline-block; margin-left: .25em; }

.nav-toggle { display: none; }

/* ---------- 07 HERO (vollflächiges Bildband, Text links) ---------------- */
.hero {
  position: relative;
  /* Genau eine Bildschirmhöhe — der nächste Abschnitt beginnt erst darunter.
     svh statt vh, damit mobile Browserleisten die Höhe nicht springen lassen.
     Die Untergrenze verhindert Gedränge auf sehr flachen Fenstern. */
  min-height: 100vh;
  min-height: max(620px, 100svh);
  display: flex;
  align-items: center;
  /* Freiraum für die fixierte Kopfzeile, damit die Headline nicht darunter läuft */
  padding-top: clamp(5.5rem, 10vh, 8rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
}

/* Portrait: Deckkraft plus ein Hauch Maßstab, 1,02 auf 1. Kurz genug,
   dass niemand auf den Inhalt wartet. Nur hier — die globale Regel trägt
   auch die Case Studies. */
[data-page="home"] .hero__bg > * {
  transform: scale(1.02);
  transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-soft);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 28%;
}
/* Zwei sehr weiche Aufheller: oben für die Navigation, links für die Headline.
   Ohne sie läge die Navigation über dem dunklen Haar. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(250,247,241,.78) 0, rgba(250,247,241,.34) 55%, transparent 100%) top / 100% 190px no-repeat,
    linear-gradient(to right, rgba(250,247,241,.68) 0, rgba(250,247,241,.34) 34%, rgba(250,247,241,0) 58%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__col { grid-column: 1 / span 6; }

.hero__title { margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem); }
/* Drei Ebenen, drei Größen: Name klein, Rolle deutlich davor, Disziplinen
   als Meta-Zeile darunter. Vorher standen Name und Rolle in derselben Größe —
   damit war nicht erkennbar, welche der beiden Zeilen die Positionierung
   trägt. Die Rolle ist das, was ein Recruiter zuerst braucht. */
.hero__meta { display: flex; flex-direction: column; gap: .1rem; }
.hero__name {
  font-size: clamp(.95rem, 1.05vw, 1.0625rem);
  color: var(--body);
  font-weight: 500;
  letter-spacing: .012em;
}
.hero__role {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  line-height: 1.25;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.012em;
  margin-top: .12rem;
  margin-bottom: .8rem;
}
/* --muted lag auf der warmen Bildfläche bei 4,0:1 und damit unter AA.
   --body erreicht dort gemessene 6,8:1. */
.hero__disciplines {
  font-size: var(--fs-small);
  color: var(--body);
  letter-spacing: .035em;
}

/* Der Scroll-Hinweis sitzt im Raster, nicht am Viewport-Rand —
   sonst driftet er auf breiten Bildschirmen von der Headline weg. */
.hero__scroll {
  grid-column: 1 / span 3;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Auf der warmen Bildfläche etwas dunkler als das Standardgold.
     Gemessen gegen den hellsten Bildpunkt hinter der Zeile: 5,3:1 (AA). */
  color: #6E5126;
}
.hero__scroll svg { width: 11px; height: 30px; overflow: visible; flex: none; }
.hero__scroll .stem { animation: scrollHint 2.6s var(--ease-soft) infinite; }
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: .45; }
  45%      { transform: translateY(6px); opacity: 1; }
}

/* Flache Fenster (Laptops, geteilte Bildschirme): Typo und Abstände zurücknehmen,
   damit der Hero auf eine Bildschirmhöhe passt, ohne zu drängen.
   Steht bewusst nach den Hero-Regeln, sonst greifen die Überschreibungen nicht. */
@media (min-width: 721px) and (max-height: 780px) {
  .hero { --fs-display: clamp(2.1rem, 6.2vh, 3.4rem); }
  .hero__title { margin-bottom: 1.1rem; }
  .hero__role { margin-bottom: .55rem; }
  .hero__scroll { margin-top: clamp(1.25rem, 3vh, 2.25rem); }
}

/* ---------- 08 PROJECTFEATURE (kompakte Komposition auf Navy) ------------ */
/* Das Navy lag hier als ganze Sektionsfläche und riss die Seite in der
   Mitte auseinander. Die Arbeiten stehen jetzt auf einem warmen Sandton —
   eine Stufe dunkler als die Seitenfläche, mehr braucht es nicht, um den
   Abschnitt zu fassen. Navy bleibt Akzent: es sitzt in den Bildern selbst
   und trägt weiterhin den Fuß der Seite.
   Der Ton hängt an einer Variablen — eine Zeile genügt, um ihn zu wechseln. */
/* Der Übergang vom Hero in die Arbeiten läuft über einen Farbverlauf aus.
   Kein Morph, keine Animation — der Ton wechselt über rund 8 vh, wie ein
   Kapitelwechsel im Heft. */
.projects {
  --pj-bg:   #E7DFD0;        /* tiefer Sand */
  /* Gold auf dem tiefen Sand: --gold-ink käme hier nur auf 3,9:1.
     Dieser Ton erreicht 5,5:1 und ist derselbe, der im Hero den
     Scroll-Hinweis trägt — die Seite bleibt in einer Goldfamilie. */
  --pj-gold: #6E5126;
  background-color: var(--pj-bg);
  background-image: linear-gradient(to bottom, var(--cream), var(--pj-bg));
  background-size: 100% clamp(4rem, 8vh, 8rem);
  background-repeat: no-repeat;
  color: var(--body);
  padding-block: clamp(4.5rem, 8vw, 9rem);
  transition: background-color 900ms var(--ease-out);
}

/* Die drei Kacheln brauchen Breite. Der Abschnitt rückt deshalb etwas
   weiter an den Fensterrand als der übrige Satzspiegel — die Kante der
   Kopfzeile darüber bleibt davon unberührt. */
.projects > .wrap { max-width: 1680px; --pad: clamp(1.25rem, 3.6vw, 4rem); }
.projects .label { color: var(--pj-gold); }
.projects .eyebrow::after { background: var(--line); }

/* ---------- Werkzeuge · Logo-Marquee -----------------------------------
   Schmales Band direkt unter dem Hero. Zwei identische Listen laufen
   hintereinander; die Spur verschiebt sich um genau die halbe Breite,
   dadurch schließt der Umlauf ohne Sprung. */
/* Ein Kopf für alle Sektionen: kleiner Kicker, darunter die Überschrift in
   Displaygröße. Vorher trug die Projektsektion nur den Kicker in 11,5 px —
   der war so leicht zu übersehen, dass der wichtigste Abschnitt der Seite
   optisch gar keine Überschrift hatte. */
.sec-head { grid-column: 1 / -1; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.sec-title {
  margin: clamp(.6rem, 1.1vw, .9rem) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--ink);
}

/* ---------- Ausgewählte Arbeiten: drei Karten nebeneinander -------------
   Alle drei Projekte stehen gleichwertig in einer Reihe und sind auf dem
   Desktop gemeinsam erfassbar. Die Angaben liegen unten links direkt auf
   der Fläche.

   Kartenformat 3:2: bei 4:3 wird im STRAUCH-Video der Laptop am rechten
   Rand angeschnitten, bei 3:2 bleiben alle drei Geräte vollständig im
   Bild. `--pos` verschiebt den Ausschnitt je Projekt um wenige Prozent. */
.mocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  margin-top: clamp(2rem, 3.5vw, 3.25rem);
}

.mock {
  /* Die Karte besteht aus zwei Teilen: oben das Keyvisual, unten eine
     eigene Textfläche. Der Text liegt damit nicht mehr auf dem Bild —
     das Mockup bleibt vollständig sichtbar und der Text steht ruhig.
     Verhältnis: Visual rund 65 %, Textfläche rund 35 % der Kartenhöhe.
     Es entsteht aus dem Format 3:2 oben und der Zeilenhöhe unten,
     nicht aus festen Pixelwerten — dadurch stimmt es in jeder Breite. */
  --mock-body: #F6F1E7;      /* warmes Creme, eine Spur heller als der
                                Sandgrund der Sektion: die Karte hebt sich
                                ab, ohne hart zu schneiden */
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mock-body);
  border: 1px solid rgba(184, 148, 95, .26);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease);
}
.mock:focus-visible { outline-offset: 4px; }
/* Dezente Aufwertung beim Zeigen: das Visual skaliert um 2 %, die Karte
   selbst bleibt stehen. Kein Springen, keine Rotation. */
.mock:hover, .mock:focus-visible { box-shadow: 0 18px 44px -26px rgba(52, 12, 21, .55); }
.mock:hover .mock__stage > img,
.mock:hover .mock__stage > video,
.mock:focus-visible .mock__stage > img,
.mock:focus-visible .mock__stage > video { transform: scale(1.02); }
.mock:active { transform: scale(.996); }

/* Das Visual sitzt im oberen Teil der Karte. Format 3:2, weil bei 4:3 im
   STRAUCH-Video der Laptop am rechten Rand angeschnitten wird. */
.mock__stage {
  position: relative;
  flex: none;             /* das Format gibt die Höhe vor, nicht der
                             Restplatz der Karte */
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.mock__poster,
.mock__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50%) center;
  transition: transform 720ms var(--ease-out);
}
.mock__video { opacity: 0; }
.mock.is-playing .mock__video { opacity: 1; }
.mock.is-playing .mock__poster { visibility: hidden; }

/* Weicher Anschluss vom Bild in die Textfläche. Der Verlauf liegt
   ausschließlich im untersten Teil des Visuals und endet auf genau dem
   Ton der Textfläche darunter — dadurch gibt es keine sichtbare Kante,
   aber auch keine dunkle Fläche über dem Mockup. Nur ein Fünftel hoch:
   die oberen vier Fünftel des Bildes bleiben völlig unberührt. */
.mock__fade {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(246, 241, 231, 0)   0%,
    rgba(246, 241, 231, .18) 45%,
    rgba(246, 241, 231, .62) 76%,
    rgba(246, 241, 231, .92) 92%,
    rgba(246, 241, 231, 1)   100%);
}

/* Die Textfläche gehört der Karte, nicht dem Bild. Sie bewegt sich beim
   Zeigen nicht mit — nur das Visual darüber skaliert. */
.mock__body {
  flex: 1;                 /* füllt die Karte, wenn eine Nachbarkarte in
                              der Reihe höher ausfällt */
  background: var(--mock-body);
  padding: clamp(.7rem, .9vw, .95rem) clamp(.9rem, 1.45vw, 1.3rem)
           clamp(.8rem, 1.05vw, 1.1rem);
}
/* Die Nummer bleibt klein und zurückhaltend — sie ordnet, sie ruft nicht. */
.mock__n {
  display: block;
  font-size: .66rem;
  line-height: 1;          /* die geerbte Zeilenhöhe des Fließtexts machte
                              die Textfläche unnötig hoch */
  letter-spacing: .26em;
  font-weight: 600;
  color: var(--pj-gold);
}
.mock__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  line-height: 1.08;
  letter-spacing: -.008em;
  color: var(--ink);
  margin: .34rem 0 0;
}
.mock__sub {
  font-family: var(--font-sans);
  font-size: .54em;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--muted);
  margin-left: .5em;
}
.mock__disc {
  margin: .36rem 0 0;
  font-size: .77rem;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--body);
  /* Keine reservierte zweite Zeile mehr: die Karten stehen im Raster auf
     gleicher Höhe, und die Textfläche füllt den Rest (`flex: 1`). Der
     Platz entsteht also nur dort, wo eine Zeile wirklich umbricht. */
  text-wrap: balance;
}

/* Karte ohne eigene Case Study: gleicher Aufbau, aber kein Verweis —
   deshalb auch kein Schatten beim Zeigen. */

@media (max-width: 1200px) {
  .mocks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .mocks { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2rem); }
}

/* Bei reduzierter Bewegung keine Hover-Skalierung und kein Schatten. */
@media (prefers-reduced-motion: reduce) {
  .mock:hover .mock__stage > img,
  .mock:hover .mock__stage > video,
  .mock:focus-visible .mock__stage > img,
  .mock:focus-visible .mock__stage > video { transform: none; }
  .mock:hover, .mock:focus-visible { box-shadow: none; }
}


/* ---------- 12 FOOTER ---------------------------------------------------- */
/* Der Fuß bestand aus drei schmalen Säulen mit viel Leere dazwischen und
   darunter: die Kontaktspalte war nur zwei Rasterspalten breit, ihre Linien
   liefen ins Nichts, und unter allem standen rund 150 px ohne Inhalt.
   Jetzt sind es zwei klare Hälften — links die Ansprache mit der Signatur
   darunter, rechts die drei Verweise als geschlossene Liste. Die Höhen der
   beiden Hälften liegen damit dicht beieinander, die Leere verschwindet. */
.footer {
  background: var(--navy-deep);
  color: var(--on-navy-mut);
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: clamp(2rem, 3vw, 2.75rem);
}
.footer .grid { align-items: start; row-gap: clamp(2.5rem, 5vw, 4rem); }
.footer__title {
  grid-column: 1 / span 6;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--on-navy);
  max-width: 14ch;
}

/* Die Verweise stehen rechts und nehmen die volle Breite dieser Hälfte.
   Eine Linie oben schließt die Liste ab — vorher hingen drei Striche frei
   im Raum, weil nur die Unterkanten gezeichnet waren. */
.footer__contact {
  /* Über beide Zeilen: die Liste steht der Ansprache und der Signatur
     gemeinsam gegenüber, statt eine dritte Zeile zu erzwingen. Vier
     Rasterspalten statt fünf, damit der Pfeil nicht meterweit vom Wort
     entfernt steht. */
  grid-column: 9 / span 4;
  grid-row: 1 / span 2;
}
.footer__contact ul { border-top: 1px solid var(--line-navy); }
.footer__contact li + li { margin-top: 0; }
.footer__contact .arrow-link {
  justify-content: space-between;
  width: 100%;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--line-navy);
  padding-block: 1.05rem;
  transition: padding-left 320ms var(--ease-out), color 320ms var(--ease);
}
.footer__contact .arrow-link:hover,
.footer__contact .arrow-link:focus-visible { padding-left: .55rem; }

/* Signatur und Angaben stehen nebeneinander unter der Ansprache — die Marke
   liest sich so als Unterschrift unter dem Satz und nicht als loses Zeichen
   in einer eigenen Spalte. */
.footer__ident {
  grid-column: 1 / span 6;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
/* height: auto ist nötig, sobald das Bild width/height im HTML trägt —
   sonst gewinnt die Höhenangabe aus dem Attribut und die Marke wird
   auf 320 px gestreckt. */
/* Auf Navy verliert das Gold seine dunklen Verlaufsstellen — ein leichter
   Aufheller holt die Signatur zurück, ohne die Farbe zu verfälschen. */
/* Das Signet stand bis zuletzt links neben der Angabe, getrennt durch eine
   Haarlinie. Ohne das Signet hätte die Linie nichts mehr zu trennen —
   deshalb sind Linie und Einzug mit entfernt worden. */
.footer__ident p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
}
.footer__bottom {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-navy);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8125rem;
  color: var(--on-navy-mut);
}

/* ---------- 13 CASE STUDY ------------------------------------------------ */
.cs-hero {
  padding-top: clamp(8rem, 16vh, 13rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cs-hero__title {
  grid-column: 1 / span 8;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--ink);
}
.cs-hero__title { text-wrap: balance; }
.cs-hero__pos {
  grid-column: 1 / span 5;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--body);
  max-width: 34ch;
}
/* Link zum begehbaren Prototyp — sitzt unter der Projektbeschreibung,
   in derselben Spalte, damit die Kante des Heros erhalten bleibt. */
.cs-hero__live {
  grid-column: 1 / span 5;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
}
.cs-hero__live .arrow-link { font-size: var(--fs-small); }
@media (max-width: 1200px) { .cs-hero__live { grid-column: 1 / span 7; } }
@media (max-width: 900px)  { .cs-hero__live { grid-column: 1 / -1; } }

/* Die Eckdaten standen in der Rasterzeile unter dem Prototyp-Link und
   zogen den Hero dadurch um ihre volle Höhe nach unten — rund 300 px, die
   niemand braucht. Sie spannen jetzt über dieselben drei Zeilen wie
   Projektname, Beschreibung und Link und beginnen oben auf einer Linie mit
   dem Namen. Der Hero wird dadurch kürzer, ohne dass Inhalt wegfällt. */
.cs-hero__facts {
  grid-column: 9 / span 4;
  grid-row: 1 / span 3;
  align-self: start;
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-content: start;
}
.cs-fact { display: grid; gap: .3rem; }
.cs-fact dt {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.cs-fact dd { margin: 0; font-size: var(--fs-small); color: var(--ink); }

.cs-keyvisual { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.cs-keyvisual--devices { margin-top: clamp(3.5rem, 7vw, 6.5rem); }
.cs-keyvisual--devices figure { margin: 0; }
.cs-keyvisual--devices .caption { max-width: 54ch; margin: 1.25rem auto 0; text-align: center; }

/* STRAUCH-Eröffnung: Gerätedarstellung statt eines statischen Screens. */
.dm--strauch { --dm-pad-bottom: 5.5%; }
.dm--strauch .dm__reel {
  position: absolute;
  inset: 5.2% 0 0;
  overflow: hidden;
  background: var(--st-sand, #F4F1EA);
}
.dm--strauch .dm__reel img {
  opacity: 0;
  transition: opacity 680ms var(--ease-out);
}
.dm--strauch .dm__reel img:first-child { opacity: 1; }
.dm--strauch .dm__reel img.is-active { opacity: 1; }
.dm--strauch .dm__display img { object-position: top center; }

/* User-first-Argument: zwei Textspalten mit klarer inhaltlicher Gewichtung. */
.chapter--user-first { padding-block: clamp(5rem, 10vw, 10rem); }
.user-first__lead { grid-column: 1 / span 7; }
.user-first__copy { grid-column: 9 / span 4; align-self: end; }
.user-first__copy .lead { max-width: 28ch; }
.user-first__copy .body-text { margin-top: 1.35rem; }
.user-first__note {
  margin-top: 1.45rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(31, 81, 64, .25);
  color: var(--st-gruen);
  font-size: var(--fs-label);
  line-height: 1.55;
}

/* Interaktiver Before/After-Vergleich. Die Bilder bleiben vollflächig, nur
   die sichtbare Breite des Redesigns wird durch den Trenner verändert. */
.chapter--compare { padding-block: clamp(4.5rem, 9vw, 9rem); }
.compare-intro { grid-column: 1 / span 5; align-self: start; }
.compare-intro .body-text { max-width: 39ch; margin-top: 1.5rem; }
.compare-stage { grid-column: 7 / span 6; --compare-position: 50%; }
.compare-stage__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--st-sand);
  isolation: isolate;
}
.compare-stage__pane { position: absolute; inset: 0; overflow: hidden; }
.compare-stage__pane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Der Bestand liegt oben und wird von rechts her freigegeben: links bleibt
   die alte Seite, rechts kommt das Redesign zum Vorschein. */
.compare-stage__pane--before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
}
.compare-stage__pane--before img { object-position: top center; }
.compare-stage__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 2px;
  background: var(--st-gruen);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}
.compare-stage__handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--st-gruen);
  transform: translate(-50%, -50%);
}
.compare-stage__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.compare-stage__range {
  touch-action: pan-y;
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}
.compare-stage__range:focus-visible { opacity: .01; outline: 2px solid var(--st-gruen); outline-offset: -3px; }
.compare-stage__labels {
  display: flex;
  justify-content: space-between;
  margin-top: .8rem;
  color: var(--st-gruen);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.compare-stage .caption { margin-top: .85rem; }

.cs-section { padding-block: var(--section-sm); }
.cs-section__head { grid-column: 1 / span 3; }
.cs-section__body { grid-column: 5 / span 7; }
.cs-section__wide { grid-column: 1 / -1; }
.cs-section__title { margin-bottom: 1.1rem; }
.cs-num {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  color: var(--gold-ink);
  margin-bottom: .6rem;
  font-weight: 600;
}

.cs-media-grid { display: grid; gap: var(--gap); margin-top: clamp(1.75rem, 3vw, 2.75rem); }
/* Prozessschritte — kompakt in zwei Spalten, nur die tatsächlichen Schritte */
.steps {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.steps li {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding-block: .65rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink);
}
.steps li:nth-child(5), .steps li:nth-child(10) { border-bottom: 1px solid var(--line); }
.steps__n {
  flex: none;
  width: 1.9rem;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--gold-ink);
}

/* Zwei kurze Erläuterungen unter den Brand-Tafeln */
.notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
}
.note p:last-child {
  margin-top: .6rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--body);
  max-width: 46ch;
}

/* Einzelnes Motiv: nimmt nur die halbe Breite ein, statt zu dominieren */
.cs-media-grid--1 { grid-template-columns: repeat(2, 1fr); }
.cs-media-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cs-media-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cs-media-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Desktop-/Mobile-Paar: breiter Screen neben schmalem, oben ausgerichtet */
.cs-media-grid--split { grid-template-columns: 1.7fr 1fr; align-items: start; }
/* Spaltenbreiten im Verhältnis der Bildseiten (0,96 zu 1,13) — beide Tafeln
   werden dadurch exakt gleich hoch, ohne Beschnitt. */
.cs-media-grid--match { grid-template-columns: 5fr 6fr; align-items: start; }
/* Konstruktionstafel und fertige Marke: Spalten im Verhältnis der Bildseiten
   (1,01 zu 1,42), damit beide exakt gleich hoch stehen. */
.cs-media-grid--logo { grid-template-columns: 1fr 1.42fr; align-items: center; }

/* Bildtafel in Originalproportion — es wird nichts beschnitten. Für Boards,
   Screens und Mockups, deren Seitenverhältnis der Inhalt vorgibt. */
.plate { display: block; }
.plate img { display: block; width: 100%; height: auto; }
/* Tafeln mit hellem Eigenhintergrund brauchen eine feine Kante zur Cremefläche */
.plate--framed img { border: 1px solid var(--line); }

/* --- Satzspiegel und Bildmaße im Case-Study-Fluss ------------------------
   Grundsatz: Bilder bekommen die Breite, die ihr Inhalt braucht — nicht die
   des Containers. Nur zwei Motive laufen über zehn Spalten (Brand Board und
   Video), alles andere steht schmaler. Dadurch entsteht ein Wechsel aus
   Text, mittleren und großen Flächen statt einer Kette gleich breiter Bilder. */
.m-full   { grid-column: 1 / -1; }
.m-wide   { grid-column: 2 / span 10; }
.m-inset  { grid-column: 3 / span 8; }
.m-right  { grid-column: 5 / span 8; }
.m-left   { grid-column: 1 / span 8; }
.m-half-l { grid-column: 1 / span 6; }
.m-half-r { grid-column: 7 / span 6; }
.m-aside  { grid-column: 8 / span 5; }
.m-narrow { grid-column: 9 / span 3; }
.m-text   { grid-column: 4 / span 4; }
/* zweites Motiv eines Paares tiefer setzen — asymmetrisch statt Reihe */
.m-drop   { margin-top: clamp(2rem, 5vw, 5rem); }

/* Textabschnitte ohne Bild laufen über zwei Spalten, damit die Fläche
   getragen wird und die Zeilen ihre Länge behalten. */
.cs-section__body--wide { grid-column: 5 / span 8; }
.cs-cols {
  columns: 2;
  column-gap: clamp(2rem, 4vw, 4rem);
}
.cs-cols > * { break-inside: avoid; }
.cs-cols .body-text { max-width: none; }

/* Text neben Bild: schmalerer Satzspiegel, Bild rechts auf gleicher Höhe */
.cs-section__body--aside { grid-column: 4 / span 4; }

/* Eröffnungssatz eines Abschnitts */
.cs-lede {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
  max-width: 26ch;
  margin-bottom: 1.35rem;
}

/* Vollbreites Zitatband — der einzige dunkle Ruhepunkt der Seite */
.cs-band {
  background: var(--navy);
  color: var(--on-navy-mut);
  padding-block: clamp(3.5rem, 7vw, 7rem);
  margin-block: clamp(1rem, 2vw, 2rem);
}
.cs-band .cs-quote { grid-column: 2 / span 8; margin: 0; color: var(--on-navy); max-width: 20ch; }
.cs-band .cs-quote cite { color: var(--gold-light); }

/* Vollbreiter Musterstreifen — zeigt das Pattern als Band, wie gedacht */
.strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}
.strip img {
  width: 100%;
  height: clamp(96px, 11vw, 168px);
  object-fit: cover;
  object-position: center;
}

/* Video im Case-Study-Fluss — läuft, sobald der Abschnitt im Bild ist */
.cs-video { display: block; width: 100%; height: auto; background: var(--cream); }

/* Ablauf als Zeitstrahl: Linie und Punkte laufen beim Sichtbarwerden an.
   Kein Bildmaterial — die Schritte tragen sich selbst. */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-top: 2.9rem;
}
/* Grundlinie und laufende Linie liegen auf Höhe der Punktmitte */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 1.45rem;
  height: 1px;
  left: calc((100% / 3) / 2);
  right: calc((100% / 3) / 2);
}
.timeline::before { background: var(--line); z-index: 0; }
.timeline::after {
  z-index: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1400ms var(--ease) 160ms;
}
.timeline.is-in::after { transform: scaleX(1); }

.timeline__step { position: relative; }
.timeline__dot {
  position: absolute;
  z-index: 1;                 /* Punkte decken die Linie ab */
  top: -2.9rem;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--muted);
  opacity: 0;
  scale: .82;
  transition: opacity 520ms var(--ease), scale 520ms var(--ease),
              border-color 520ms var(--ease), color 520ms var(--ease);
  transition-delay: calc(220ms + var(--i, 0) * 460ms);
}
.timeline.is-in .timeline__dot {
  opacity: 1;
  scale: 1;
  border-color: var(--gold);
  color: var(--gold-ink);
}
.timeline__step > div {
  text-align: center;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 620ms var(--ease), translate 620ms var(--ease);
  transition-delay: calc(340ms + var(--i, 0) * 460ms);
}
.timeline.is-in .timeline__step > div { opacity: 1; translate: 0 0; }
.timeline__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
}
.timeline__note {
  margin-top: .55rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--body);
  max-width: 30ch;
  margin-inline: auto;
}

/* Telefonrahmen für mobile Ansichten und Social-Media-Karten */
.phones {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.phone-item { flex: 0 1 250px; }
/* Nacheinander einfliegen, sobald der Abschnitt erreicht ist */
[data-stagger-in] .phone-item {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-stagger-in].is-in .phone-item { opacity: 1; transform: none; }
.phone {
  position: relative;
  aspect-ratio: var(--phone-ratio, 390 / 844);
  border: 9px solid #26262A;
  border-radius: 2.4rem;
  background: #26262A;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(20, 27, 51, .14);
}
.phone::before {
  content: "";
  position: absolute; z-index: 2;
  top: 0; left: 50%; translate: -50% 0;
  width: 38%; height: .95rem;
  background: #26262A;
  border-radius: 0 0 .75rem .75rem;
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Quadratische Social-Karte mittig auf hellem Grund statt formatfüllend */
.phone--feed { background: #F9F6F0; }
.phone--feed img { object-fit: contain; object-position: center; }

/* Aussage aus dem Markenmanual — als Satz gesetzt, nicht als Grafik */
.cs-quote {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 24ch;
}
.cs-quote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--gold-ink);
}

/* Fertiges Brand-Board: nimmt die eigene Bildhöhe an, damit es so groß wie
   möglich steht — bei diesen Tafeln entscheidet die Größe über die Lesbarkeit.
   Der Rahmenhintergrund entspricht dem der Boards, damit keine Kante entsteht. */
.board {
  /* Drei gleich große quadratische Flächen; die Tafel wird vollständig
     eingepasst, nichts wird beschnitten. */
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #F8F2EE;
  border: 1px solid var(--line);
  overflow: hidden;
}
.board img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cs-list li {
  padding-block: .85rem;
  border-top: 1px solid var(--line);
  display: flex; gap: 1rem; align-items: baseline;
}
.cs-list li:last-child { border-bottom: 1px solid var(--line); }
.cs-list__k {
  flex: none; width: 2.5rem;
  font-size: var(--fs-label); letter-spacing: .16em;
  color: var(--gold-ink); font-weight: 600;
}

.todo {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--gold);
  background: rgba(184,148,95,.07);
  font-size: var(--fs-small);
  color: var(--muted);
}
.todo strong { color: var(--ink); font-weight: 600; }

/* Auf der Navy-Fläche braucht es das helle Gold — --gold-ink käme hier
   nur auf 3,0:1. */
.next-project .label,
.next-project .arrow-link { color: var(--gold-light); }
.next-project__link:hover .arrow-link { color: var(--on-navy); }

.next-project {
  background: var(--navy);
  color: var(--on-navy-mut);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.next-project__inner { grid-column: 1 / -1; }
.next-project__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.next-project__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1;
  color: var(--on-navy);
  transition: color 320ms var(--ease);
}
.next-project__link:hover .next-project__name { color: var(--gold-light); }
.next-project__link .arrow { transition: transform 200ms var(--ease-out); display: inline-block; }
.next-project__link:hover .arrow { transform: translateX(12px); }

/* ==========================================================================
   13b MONA CASE STUDY — projektspezifische Komponenten

   Diese Komponenten gehören nur zur MONA-Seite. Sie liegen bewusst in einem
   eigenen Abschnitt und sind über `.mona` gekapselt, damit die AURUM- und
   STRAUCH-Seiten und die Startseite unberührt bleiben.

   Farbdramaturgie: Der Einstieg ist neutral (Portfolio-Cream), das Brand
   System bringt die MONA-Farben in voller Stärke, die digitalen Abschnitte
   werden wieder ruhig, das Finale ist noch einmal Bild.
   ========================================================================== */
.mona {
  --mona-cream:    #F9F6F0;
  --mona-lila:     #CDB9D4;
  --mona-pink:     #F7B4BE;
  --mona-koralle:  #EFAE96;
  --mona-blau:     #CBD9F7;
  --mona-ink:      #292727;
  --tint-lila:     #F2ECF0;   /* Lila auf Cream, sehr schwach */
}

/* ---------- Flächen ------------------------------------------------------ */
.chapter { padding-block: clamp(4rem, 8vw, 9rem); }
.chapter--tight { padding-block: clamp(2.5rem, 5vw, 5rem); }
.chapter--tint  { background: var(--tint-lila); }
.chapter--warm  { background: var(--cream-2); }

/* ---------- EditorialStatement ------------------------------------------- */
.es__text {
  grid-column: 1 / span 8;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.95rem, 5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--ink);
}
.es__note {
  grid-column: 9 / span 4;
  align-self: end;
  padding-bottom: .4em;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--body);
}
.es--wide .es__text, .es__text.es--wide { grid-column: 1 / span 10; }
.es--lead .es__text, .es__text.es--lead { font-size: clamp(2.2rem, 6vw, 5.4rem); }

/* ---------- EditorialStatement mit Kante ---------------------------------- */
/* Variante für Aussagen, die sonst frei im Weißraum stehen würden. Label und
   Haarlinie geben dem Block eine Oberkante, die Notiz sitzt rechts auf der
   Grundlinie der letzten Zeile. Der Satz steht damit auf einer Fläche. */
.esa {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap, clamp(1rem, 2vw, 2rem));
  row-gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: end;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}
.esa__k {
  grid-column: 1 / -1;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.esa__text {
  grid-column: 1 / span 6;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6.4vw, 6.4rem);
  line-height: 1.04;
  letter-spacing: -.024em;
  color: var(--ink);
}
.esa__note {
  grid-column: 7 / span 4;
  padding-bottom: .35em;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--body);
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

/* ---------- Einleitungszeile über einer Bildreihe -------------------------- */
/* Ersetzt frei stehende Absätze unter Bildern: der Satz führt die Reihe an,
   statt darunter zu schweben. */
.lead-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: clamp(.75rem, 3vw, 3rem);
  align-items: baseline;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
  border-top: 1px solid var(--line);
}
.lead-row .body-text { max-width: 58ch; }

/* ---------- Marken-System: Aussage links, Farbwelt rechts ------------------ */
.sysrow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.sysrow__head {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.95rem, 4.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--ink);
}
.sysrow__lead .label { margin-bottom: .75rem; }
.sysrow__lead .body-text { max-width: 46ch; }
.sysrow__side { display: flex; flex-direction: column; }
.swatch-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(.9rem, 2vw, 1.6rem);
  align-items: center;
  padding: clamp(.7rem, 1.4vw, 1.05rem) 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.swatch-line:first-child { border-top: 1px solid var(--line); }
.sysrow__side.is-in .swatch-line { opacity: 1; transform: none; }
.swatch-line__field {
  width: clamp(2.6rem, 5vw, 4.2rem);
  aspect-ratio: 5 / 4;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(41, 39, 39, .06);
}
.swatch-line__name { font-size: var(--fs-small); color: var(--ink); }
.swatch-line__hex {
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- AudienceSplit ------------------------------------------------ */
.split__row {
  grid-column: 2 / span 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.75rem, 7vw, 7rem);
  align-items: center;
}
.split__side { opacity: 0; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.split__side--l { text-align: right; transform: translateX(-44px); }
.split__side--r { text-align: left;  transform: translateX(44px); }
.split.is-in .split__side { opacity: 1; transform: none; }
.split__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 3.2rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 1rem;
}
.split__list li {
  padding-block: .5rem;
  font-size: var(--fs-lead);
  color: var(--body);
}
.split__mark {
  width: clamp(84px, 12vw, 190px);
  opacity: 0;
  transform: scale(.9);
  transition: opacity 700ms var(--ease-out) 260ms, transform 900ms var(--ease-out) 260ms;
}
.split.is-in .split__mark { opacity: 1; transform: none; }
/* Der Satz stand frei in der Fläche, weder bei der einen noch bei der
   anderen Seite — er wirkte verloren. Er steht jetzt mittig unter dem
   Zeichen und ist durch eine kurze Haarlinie als Schluss des Vergleichs
   gekennzeichnet, statt einfach dazwischenzustehen. */
.split__foot {
  grid-column: 3 / span 8;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  position: relative;
}
.split__foot::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: clamp(48px, 6vw, 84px);
  height: 1px;
  transform: translateX(-50%);
  background: var(--gold);
  opacity: .6;
}

/* ---------- DesignNote ---------------------------------------------------- */
.dnote {
  border-left: 2px solid var(--gold);
  padding: .15rem 0 .15rem clamp(1rem, 1.6vw, 1.5rem);
  max-width: 34ch;
}
.dnote__k {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .5rem;
}
.dnote p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.35;
  color: var(--ink);
}

/* ---------- LogoStory: klebende Bühne, Schritte scrollen vorbei ---------- */
.logostory { grid-column: 1 / -1; display: grid; grid-template-columns: 6fr 6fr; gap: var(--gap); }
.logostory__sticky {
  grid-column: 1 / span 1;
  position: sticky;
  top: 19vh;          /* 19 + 62/2 = 50vh — auf einer Linie mit dem Schritttext */
  height: 62vh;
}
.logostory__stage { position: relative; width: 100%; height: 100%; }
.logostory__stage img {
  position: absolute; inset: 0; margin: auto;
  max-width: 82%; max-height: 82%; width: auto; height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(.975);
  transition: opacity 520ms var(--ease-out), transform 760ms var(--ease-out);
}
.logostory__stage img.is-active { opacity: 1; transform: none; }
.logostory__steps { grid-column: 2 / span 1; }
.logostory__step {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2rem;
}
.logostory__n {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--gold-ink);
  margin-bottom: .7rem;
}
.logostory__t {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: .9rem;
}
.logostory__step p:last-child { max-width: 40ch; font-size: var(--fs-small); line-height: 1.7; }

/* Finale Marke auf ruhiger Fläche */
.logo-final { background: var(--mona-cream); padding-block: clamp(4rem, 9vw, 9rem); }
.logo-final img { grid-column: 4 / span 6; width: 100%; height: auto; }

/* ---------- BrandSystem: Farbfelder -------------------------------------- */
.swatches { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.6rem, 1.2vw, 1.1rem); }
.swatch {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.swatches.is-in .swatch { opacity: 1; transform: none; }
.swatch__field { aspect-ratio: 4 / 5; border-radius: 2px; }
.swatch__name { margin-top: .8rem; font-size: var(--fs-small); color: var(--ink); }
.swatch__hex  { font-size: var(--fs-label); letter-spacing: .1em; color: var(--muted); }

/* ---------- BrandSystem: Schriftmuster ----------------------------------- */
.specimen { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.specimen__mark img { width: 100%; max-width: 420px; height: auto; }
/* Nunito ist die echte MONA-Textschrift und wird hier auch als solche gesetzt */
.nunito { font-family: "Nunito", var(--font-sans); }
.specimen__head {
  font-family: "Nunito", var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.2;
  color: var(--mona-ink);
}
.specimen__body {
  font-family: "Nunito", var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
  max-width: 40ch;
  margin-top: 1rem;
}

/* ---------- BrandSystem: Symbole ---------------------------------------- */
.symbols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 3rem); }
.symbol {
  text-align: center;
  opacity: 0;
  transform: scale(.92);
  transition: opacity 520ms var(--ease-out), transform 640ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.symbols.is-in .symbol { opacity: 1; transform: none; }
.symbol img { width: clamp(52px, 6vw, 86px); height: auto; margin-inline: auto; }
.symbol span { display: block; margin-top: .85rem; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- FullBleedVisual ---------------------------------------------- */
.fullbleed { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
.fullbleed img {
  width: 100%;
  height: clamp(320px, 64vh, 760px);
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.02);
  transition: transform 1400ms var(--ease-out);
}
.fullbleed.is-in img { transform: scale(1); }

/* Trenner-Variante: schmaleres Band im Originalseitenverhältnis. Es wird
   nichts beschnitten — stattdessen laufen die Kanten links und rechts über
   eine Maske in die Hintergrundfläche aus. Die Maske nimmt automatisch die
   Farbe des Abschnitts an, egal auf welcher Fläche das Motiv steht. */
.fullbleed--divider {
  width: min(100%, 1180px);      /* innerhalb von .wrap — kein 100vw, sonst
                                    schiebt die Innenabstandsbreite die Seite auf */
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.fullbleed--divider img { height: auto; object-fit: contain; }

/* ---------- Packaging: versetzte Komposition ----------------------------- */
.showcase { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.showcase__minor { margin-top: clamp(3rem, 8vw, 8rem); }
/* Ruhigere Variante: die Komposition steht eingerückt und kleiner, damit die
   Aufnahmen nicht über die volle Satzbreite laufen. */
.showcase--calm { grid-column: 3 / span 8; grid-template-columns: 6fr 4fr; gap: clamp(1.5rem, 5vw, 5rem); }
.showcase--calm .showcase__minor { margin-top: clamp(3.5rem, 9vw, 9rem); }

/* ---------- Produktwelt: fünf Farben ------------------------------------- */
.colorway { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.6rem, 1.4vw, 1.4rem); }
.colorway figure {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 560ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.colorway.is-in figure { opacity: 1; transform: none; }
.colorway img { width: 100%; height: auto; }
.colorway figcaption { margin-top: .75rem; font-size: var(--fs-small); color: var(--ink); }

/* ---------- StickyWebsiteStory ------------------------------------------- */
.webstory { grid-column: 1 / -1; display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 4vw, 4rem); }
.webstory__steps { grid-column: 1 / span 1; }
.webstory__step {
  /* Vorher 64vh je Schritt: fünf Schritte ergaben über 2800 px, in denen
     zwischen den Zeilen sehr viel Leere stand. 44vh reichen für einen
     ruhigen Wechsel und sparen rund einen Bildschirm. */
  min-height: 44vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 1.5rem;
}
.webstory__step > * { opacity: .34; transition: opacity 420ms var(--ease-out); }
.webstory__step.is-active > * { opacity: 1; }
.webstory__sticky { grid-column: 2 / span 1; position: sticky; top: 13vh; height: fit-content; }

.browser {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 64px rgba(20, 27, 51, .12);
}
.browser__bar {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding-inline: 15px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}
.browser__dot { width: 9px; height: 9px; border-radius: 50%; background: #CBC1B0; }
.browser__screen { position: relative; aspect-ratio: 16 / 10; background: var(--mona-cream); }
.browser__screen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0;
  transition: opacity 640ms var(--ease-out);
}
.browser__screen img.is-active { opacity: 1; }

/* ---------- DeviceAssembly ----------------------------------------------- */
.devices {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
}
.devices__item { flex: 0 1 clamp(150px, 17vw, 250px); }
.devices__item img { width: 100%; height: auto; }
.devices__item figcaption { margin-top: 1rem; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.devices__item--c { z-index: 2; transform: translateY(-26px); }
.devices__item--l, .devices__item--r {
  opacity: 0;
  transition: opacity 640ms var(--ease-out) 220ms, transform 860ms var(--ease-out) 220ms;
}
.devices__item--l { margin-right: -4%; transform: translateX(76px) scale(.94); }
.devices__item--r { margin-left:  -4%; transform: translateX(-76px) scale(.94); }
.devices.is-in .devices__item--l,
.devices.is-in .devices__item--r { opacity: 1; transform: none; }

/* ---------- SocialShowcase ------------------------------------------------ */
.social { grid-column: 1 / -1; display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.social__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1.4vw, 1.25rem); align-items: end; }
.social__cards img { width: 100%; height: auto; display: block; }
.social__phone img { width: 100%; height: auto; }
/* Die drei Beiträge stehen als Gerät wie das Profil daneben und steigen
   nacheinander ein. Der leichte Versatz nimmt der Reihe das Starre. */
.social__post {
  margin: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 620ms var(--ease-out), transform 780ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
/* Alle drei Aufnahmen liegen auf derselben Leinwand, dadurch stehen die
   Geräte exakt auf einer Linie. Der mittlere Beitrag ist bewusst angehoben —
   ein gesetzter Versatz, kein Zufall aus unterschiedlichen Bildhöhen. */
.social__post:nth-child(2) { margin-bottom: clamp(1.25rem, 3.5vw, 3.25rem); }
.social__cards.is-in .social__post { opacity: 1; transform: none; }

/* ---------- Finale -------------------------------------------------------- */
.finale { position: relative; }
/* Über die Spalten 2 bis 9 gesetzt lag die Zeile eine halbe Rasterspalte
   links der Mitte. Mittig im Zwölferraster sind die Spalten 3 bis 10. */
.finale__claim {
  grid-column: 3 / span 8;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
  margin-inline: auto;
}

/* ---------- NextProject mit Keyvisual ------------------------------------ */
.next-visual {
  background: var(--navy-deep);
  color: var(--on-navy-mut);
  padding-block: clamp(4rem, 8vw, 8.5rem);
}
.next-visual__label { grid-column: 1 / -1; color: var(--gold-light); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.next-visual__link { grid-column: 1 / span 5; align-self: center; display: block; }
.next-visual__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--on-navy);
}
.next-visual__disc {
  display: block;
  margin: 1rem 0 1.75rem;
  font-size: var(--fs-small);
  color: var(--on-navy-mut);
}
.next-visual__link .arrow-link { color: var(--gold-light); }
.next-visual__link:hover .arrow { transform: translateX(7px); }
.next-visual__media { grid-column: 7 / span 6; overflow: hidden; display: block; }
.next-visual__media img {
  width: 100%; height: auto;
  transition: transform 300ms var(--ease-out);
}
.next-visual__link:hover ~ .next-visual__media img,
.next-visual__media:hover img { transform: scale(1.02); }

/* ==========================================================================
   13c AURUM CASE STUDY — projektspezifische Komponenten

   Gegenstück zu MONA: dort weich, organisch, farbig. Hier geometrisch,
   ruhig, präzise. Gemeinsam ist beiden nur das Layoutgerüst des Portfolios;
   Farbe, Typografie, Bewegung und Bildmaße sind eigenständig.

   Die Markenschriften der Marke werden ausschließlich innerhalb der
   Markenpräsentation gesetzt — überall sonst spricht das Portfolio.
   ========================================================================== */
@font-face {
  font-family: "D-DIN Exp";
  src: url("../fonts/d-din-exp-bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "D-DIN";
  src: url("../fonts/d-din-regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Dolce Vita";
  src: url("../fonts/dolce-vita.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

.aurum {
  --au-ink:   #14102E;
  --au-navy:  #29235C;
  --au-gold:  #F6BD43;
  --au-creme: #F0E7E1;
  --au-soft:  #F7F4F2;
}

/* ---------- Flächen ------------------------------------------------------ */
.chapter--creme { background: var(--au-creme); }
.chapter--soft  { background: var(--au-soft); }
.chapter--navy  { background: var(--au-navy); color: rgba(255,255,255,.78); }
.chapter--ink   { background: var(--au-ink);  color: rgba(255,255,255,.72); }
.chapter--navy .es__text, .chapter--ink .es__text,
.chapter--navy .cs-section__title, .chapter--ink .cs-section__title { color: #fff; }
.chapter--navy .body-text, .chapter--ink .body-text { color: rgba(255,255,255,.78); }
.chapter--navy .label, .chapter--ink .label { color: var(--au-gold); }
.chapter--navy .caption, .chapter--ink .caption { color: rgba(255,255,255,.6); }
.chapter--navy .cs-num, .chapter--ink .cs-num { color: var(--au-gold); }

/* ---------- Naming Story: die Herleitung als Typografie ------------------ */
/* Herleitung des Namens als Kette. Drei Spalten pro Stufe: Nummer und Rolle,
   das Wort, die Erklärung. Die Rolle bekommt eine eigene Spalte — dadurch
   kann ein langes Wort wie ELEMENTSYMBOL nicht mehr ins Schriftbild laufen.
   Eine kurze Goldmarke auf jeder Oberkante macht die Abfolge sichtbar. */
.chain {
  grid-column: 2 / span 10;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chain__step {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.6vw, 3.25rem);
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms var(--ease-out), transform 780ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.chain__step:last-child { border-bottom: 1px solid var(--line); }
.chain__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 130ms + 180ms);
}
.chain.is-in .chain__step { opacity: 1; transform: none; }
.chain.is-in .chain__step::before { transform: scaleX(1); }
.chain__k {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
  padding-top: .45em;
}
.chain__n { font-variant-numeric: tabular-nums; opacity: .55; letter-spacing: .1em; }
.chain__v {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* Die letzte Stufe zeigt das Zeichen selbst — die Herleitung endet im Ergebnis */
.chain__mark {
  display: block;
  width: clamp(84px, 9vw, 140px);
  height: auto;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.chain__note {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--body);
  max-width: 44ch;
  padding-top: .6em;
}
.chain__note:empty { display: none; }

/* ---------- Aussage mit Erläuterung darunter, linksbündig ---------------- */
.stack { grid-column: 1 / span 7; }
.stack .label { margin-bottom: clamp(.9rem, 2vw, 1.4rem); }
.stack__head {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--ink);
}
.stack .body-text { max-width: 52ch; }

/* Linksbündige Einleitung — Gegenstück zu .m-text, das mittig sitzt */
.m-lead-l { grid-column: 1 / span 5; }
/* Steht sie unter einer eingerückten Reihe, richtet sie sich an deren Kante aus */
.appscreens + .m-lead-l { grid-column: 2 / span 5; }

/* ---------- Makler-App: drei freigestellte Geräte ------------------------ */
.appscreens {
  grid-column: 2 / span 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: stretch;
}
/* Zwei Reihen je Gerät: das Bild sitzt unten in seiner Reihe, die Bildunterschrift
   beginnt bei allen dreien auf derselben Linie. Der Versatz des mittleren Geräts
   verschiebt deshalb nur das Gerät, nicht die Beschriftung. */
.appscreens__item {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 660ms var(--ease-out), transform 820ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.appscreens__item:nth-child(2) img { margin-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.appscreens.is-in .appscreens__item { opacity: 1; transform: none; }
.appscreens img { width: 100%; height: auto; display: block; align-self: end; }
.appscreens figcaption { margin-top: clamp(1rem, 2vw, 1.6rem); }
.appscreens__t {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
}
.appscreens__m {
  display: block;
  margin-top: .5rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--body);
}

/* ---------- Farbpalette: große Flächen, keine Kärtchen ------------------- */
.palette {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.palette__field {
  box-shadow: inset 0 0 0 1px rgba(41, 35, 92, .08);
  display: flex;
  align-items: flex-end;
  min-height: clamp(230px, 42vh, 460px);
  padding: clamp(1rem, 1.8vw, 1.75rem);
  transform: scaleY(.94);
  transform-origin: bottom;
  opacity: 0;
  transition: opacity 620ms var(--ease-out), transform 820ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.palette.is-in .palette__field { opacity: 1; transform: none; }
.palette__name {
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
}
.palette__hex { font-size: var(--fs-small); letter-spacing: .06em; display: block; margin-top: .3rem; }

/* ---------- Schriftmuster in den echten Markenschriften ------------------ */
.au-specimen { grid-column: 1 / -1; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.au-specimen__row { display: grid; grid-template-columns: 3fr 9fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: baseline; }
.au-din  { font-family: "D-DIN Exp", var(--font-sans); font-weight: 700; }
.au-dolce{ font-family: "Dolce Vita", var(--font-display); font-weight: 400; }
.au-body { font-family: "D-DIN", var(--font-sans); font-weight: 400; }
.au-specimen__big {
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--au-navy);
}
.chapter--creme .au-specimen__big, .chapter--soft .au-specimen__big { color: var(--au-navy); }
.au-specimen__use { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.45; color: var(--au-navy); }
.au-specimen__meta { font-size: var(--fs-small); line-height: 1.7; color: var(--body); max-width: 40ch; }

/* ---------- Digitale Prinzipien: Typografie statt Karten ----------------- */
.principles { grid-column: 1 / -1; }
.principles li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.2vw, 2rem);
  border-top: 1px solid var(--line-navy);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease-out), transform 680ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.principles.is-in li { opacity: 1; transform: none; }
.principles li:last-child { border-bottom: 1px solid var(--line-navy); }
.principles__n { font-size: var(--fs-label); letter-spacing: .18em; font-weight: 600; color: var(--au-gold); }
.principles__t {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.6rem);
  line-height: 1.12;
  color: #fff;
}

/* ---------- Placeholder-System ------------------------------------------ */
.ph {
  position: relative;
  display: grid;
  place-content: center;
  gap: .6rem;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--au-soft);
  border: 1px solid rgba(41, 35, 92, .22);
}
.ph::before, .ph::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--au-gold);
}
.ph::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ph::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.ph__k {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8A6631;
}
.ph__t { font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--au-navy); }
.ph__m { font-size: var(--fs-small); color: #5B5878; }
.chapter--navy .ph, .chapter--ink .ph { background: rgba(255,255,255,.045); border-color: rgba(246,189,67,.3); }
.chapter--navy .ph__t, .chapter--ink .ph__t { color: #fff; }
.chapter--navy .ph__k, .chapter--ink .ph__k { color: var(--au-gold); }
.chapter--navy .ph__m, .chapter--ink .ph__m { color: rgba(255,255,255,.62); }

/* ---------- Browser in der dunklen Fassung ------------------------------ */
.browser--dark { border-color: rgba(255,255,255,.14); background: var(--au-ink); }
.browser--dark .browser__bar { background: rgba(255,255,255,.07); border-bottom-color: rgba(255,255,255,.1); }
.browser--dark .browser__dot { background: rgba(255,255,255,.28); }
.browser--dark .browser__screen { background: var(--au-ink); }

/* ---------- Marke groß auf Navy ----------------------------------------- */
.markstage {
  background: var(--au-navy);
  padding-block: clamp(5rem, 12vw, 12rem);
}
.markstage img {
  grid-column: 4 / span 6;
  width: 100%;
  max-width: 480px;      /* die Vorlage ist klein — nicht weiter hochziehen */
  margin-inline: auto;
  height: auto;
}

/* ---------- Gerätereihe: präzise, ohne Versatz --------------------------- */
.devices--precise .devices__item--c { transform: none; }
.devices--precise .devices__item { flex: 0 1 clamp(150px, 17vw, 250px); }
.devices--precise .devices__item--l { margin-right: 0; }
.devices--precise .devices__item--r { margin-left: 0; }
.devices--precise { gap: clamp(1rem, 2.5vw, 2.5rem); }
.chapter--navy .devices__item figcaption { color: rgba(255,255,255,.6); }

/* ---------- Feine Linie, die beim Erreichen aufläuft --------------------- */
.hairline {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--ease-out);
}
.hairline.is-in { transform: scaleX(1); }
.chapter--navy .hairline, .chapter--ink .hairline { background: rgba(246,189,67,.5); }

/* ==========================================================================
   13e STRAUCH CASE STUDY — projektspezifische Komponenten

   Dritte eigenständige Art Direction. MONA ist weich und pastellig, AURUM
   geometrisch in Navy und Gold — STRAUCH ist warm und handwerklich: Tannengrün
   als Akzent (die Farbe, die im Salon selbst vorkommt), Salonfotografie statt
   Produkt- oder Architekturaufnahmen, und ruhige Reihen statt Rasterflächen.
   ========================================================================== */
.strauch {
  --st-gruen:      #1F5140;   /* Tannengrün — Akzent der Marke */
  --st-gruen-tief: #153A2E;
  --st-sand:       #F4F1EA;   /* helle Fläche */
  --st-sepia:      #EDE6D8;   /* Archivton */
}

/* Flächen der Kapitel — dieselben Modifikatoren, andere Werte */
.strauch .chapter--tint { background: var(--st-sand); }
.strauch .chapter--warm { background: var(--st-sepia); }

/* Akzentfarbe übernimmt das Grün des Salons */
.strauch .label--muted,
.strauch .dnote__k,
.strauch .logostory__n,
.strauch .esa__k { color: var(--st-gruen); }
.strauch .hairline { background: var(--st-gruen); }

/* ---------- Befunde am Bestand ------------------------------------------- */
/* Nummer, Beobachtung, Auswirkung. Bewusst eine Liste und keine Kartenreihe:
   es sind Prüfergebnisse, keine Verkaufsargumente. */
.findings {
  grid-column: 2 / span 9;
  list-style: none;
  margin: 0;
  padding: 0;
}
.finding {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding-block: clamp(1.35rem, 2.8vw, 2.15rem);
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 740ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.finding:last-child { border-bottom: 1px solid var(--line); }
.findings.is-in .finding { opacity: 1; transform: none; }
.finding__n {
  font-size: var(--fs-label);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--st-gruen, var(--muted));
  padding-top: .4em;
}
.finding__t {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink);
}
.finding__d {
  margin-top: .6rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--body);
  max-width: 62ch;
}

/* ---------- Bestand gegen Entscheidung ----------------------------------- */
/* Zwei Spalten je Zeile. Die linke Seite bleibt zurückgenommen, die rechte
   trägt die Entscheidung — die Gegenüberstellung ist die Aussage. */
.decisions {
  grid-column: 1 / -1;
  display: grid;
}
.decision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 4vw, 4rem);
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.decision:last-child { border-bottom: 1px solid var(--line); }
.decisions.is-in .decision { opacity: 1; transform: none; }
.decision__k {
  display: block;
  margin-bottom: .7rem;
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.decision__after .decision__k { color: var(--st-gruen, var(--gold-ink)); }
.decision p {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--body);
  max-width: 46ch;
}
.decision__after p { color: var(--ink); }
.decision__after {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.25rem, 4vw, 4rem);
  margin-left: calc(clamp(1.25rem, 4vw, 4rem) * -1);
}

/* ==========================================================================
   13d DEVICE MOCKUP — Laptop und iPhone mit laufender Website

   Eigenständige Komponente, überall einsetzbar. Alle Klassen beginnen mit
   „dm", der Hintergrund bleibt transparent — sie setzt sich auf jede Fläche.
   Die Geräte sind aus CSS gebaut, damit sie in jeder Größe scharf bleiben.
   Liegt auch als Einzeldatei unter device-mockup/ mit eigener Anleitung.
   ========================================================================== */

.dm {
  /* Bühne */
  --dm-w: min(100%, 1180px);
  --dm-laptop: 78%;          /* Laptopbreite, bezogen auf die Bühne */
  --dm-phone: 15.5%;         /* iPhone-Breite, bezogen auf die Bühne */
  --dm-phone-right: 1%;      /* Einrückung des iPhones von rechts */
  --dm-phone-drop: 3%;       /* wie weit das iPhone unter die Laptopkante rutscht */
  --dm-pad-bottom: 4.5%;     /* Platz für Überstand und Schatten */

  /* Gehäuse */
  --dm-alu-1: #E8E9EB;
  --dm-alu-2: #C9CCD1;
  --dm-alu-3: #A8ACB3;
  --dm-alu-edge: #F4F5F7;
  --dm-bezel: #16171A;
  --dm-screen: #0C0D10;
  --dm-titan: #2B2C30;
  --dm-titan-2: #4A4C52;

  /* Bewegung */
  --dm-ease: cubic-bezier(.23, 1, .32, 1);

  position: relative;
  width: var(--dm-w);
  margin-inline: auto;
  padding-bottom: var(--dm-pad-bottom);   /* hält Überstand und Schatten im Kasten */
  /* Der Hintergrund bleibt bewusst leer — die Komponente ist transparent. */
}

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

/* Die Bühne trägt das Einblenden. Alles darunter bewegt sich nur über
   transform und opacity, damit kein Layout neu berechnet wird. */
.dm__stage {
  position: relative;
  opacity: 0;
  transform: scale(.985);
  transition: opacity 900ms var(--dm-ease), transform 1100ms var(--dm-ease);
  will-change: transform, opacity;
}
.dm.is-in .dm__stage { opacity: 1; transform: none; }

/* ---------- Laptop -------------------------------------------------------- */
.dm__laptop {
  position: relative;
  width: var(--dm-laptop);
  transform: translate3d(0, var(--dm-shift-l, 0px), 0);
  will-change: transform;
}

/* Deckel: Aluminiumrahmen mit feiner Kante */
.dm__lid {
  position: relative;
  border-radius: 1.1% / 1.6%;
  padding: .85% .85% 1.9%;
  background:
    linear-gradient(160deg, var(--dm-alu-edge) 0%, var(--dm-alu-1) 18%,
                             var(--dm-alu-2) 62%, var(--dm-alu-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 1px 2px rgba(16, 18, 24, .18);
}

/* Displayfläche: hier wird das Video exakt maskiert */
.dm__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: .5% / .9%;
  overflow: hidden;                 /* Maske — nichts läuft über den Rahmen */
  background: var(--dm-screen);
  isolation: isolate;
}
.dm__screen video,
.dm__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Schmale Browserleiste. Sie schafft den Rest an Höhe, den die Aufnahme
   gegenüber einem 16:9-Display mehr hat — dadurch bleibt seitlich nahezu
   nichts beschnitten. */
.dm__chrome {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 5.2%;
  min-height: 14px;
  display: flex;
  align-items: center;
  gap: .5%;
  padding-inline: 1.4%;
  background: #1B1C21;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dm__dot {
  width: 1.05%;
  aspect-ratio: 1;
  min-width: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  flex: none;
}
.dm__url {
  margin-left: 2.2%;
  height: 58%;
  flex: 0 1 26%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
.dm__screen video { top: 5.2%; height: 94.8%; }

/* Kamera im oberen Rahmen */
.dm__cam {
  position: absolute;
  top: .32%;
  left: 50%;
  transform: translateX(-50%);
  width: .42%;
  aspect-ratio: 1;
  min-width: 2px;
  border-radius: 50%;
  background: #2C2E33;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
}

/* Unterteil: nach unten leicht breiter, wie bei einem aufgeklappten Gerät */
.dm__base {
  position: relative;
  height: 0;
  padding-bottom: 2.05%;
  margin-inline: -2.2%;
  clip-path: polygon(1.8% 0, 98.2% 0, 100% 58%, 99% 100%, 1% 100%, 0 58%);
  background:
    linear-gradient(180deg,
      #6F737A 0 6%,          /* Schattenfuge zwischen Deckel und Unterteil */
      #E2E4E7 6% 22%,
      #CBCED3 22% 62%,
      #A9ADB4 62% 88%,
      #8B8F96 88% 100%);
}
/* Griffmulde */
.dm__base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13%;
  height: 34%;
  border-radius: 0 0 999px 999px;
  background: rgba(70, 74, 82, .32);
}

/* ---------- iPhone -------------------------------------------------------- */
.dm__phone {
  position: absolute;
  right: var(--dm-phone-right);
  bottom: calc(var(--dm-phone-drop) * -1);
  width: var(--dm-phone);
  z-index: 3;
  transform: translate3d(0, var(--dm-shift-p, 0px), 0);
  will-change: transform;
}

/* Rahmen aus Titan, sehr dünn */
.dm__frame {
  position: relative;
  border-radius: 15.5% / 7.2%;
  padding: 2.6%;
  background:
    linear-gradient(150deg, #6C6E75 0%, var(--dm-titan-2) 14%,
                            var(--dm-titan) 50%, #202126 86%, #55575D 100%);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .22),
    0 1px 3px rgba(16, 18, 24, .28);
}
.dm__display {
  position: relative;
  aspect-ratio: 430 / 932;         /* exakt das Seitenverhältnis der Aufnahme */
  border-radius: 13% / 6.1%;
  overflow: hidden;                 /* Maske */
  background: #000;
  isolation: isolate;
}
.dm__display video,
.dm__display img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dynamic Island liegt über dem Video */
.dm__island {
  position: absolute;
  z-index: 2;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 27%;
  height: 2.9%;
  min-height: 6px;
  border-radius: 999px;
  background: #05060A;
}

/* Seitentasten */
.dm__btn {
  position: absolute;
  width: 1.6%;
  border-radius: 2px;
  background: linear-gradient(180deg, #6A6C73, #3A3C42);
}
.dm__btn--power { right: -1.2%; top: 23%; height: 12%; }
.dm__btn--vol-a { left: -1.2%; top: 18%; height: 6%; }
.dm__btn--vol-b { left: -1.2%; top: 26.5%; height: 9%; }
.dm__btn--action { left: -1.2%; top: 12%; height: 4.2%; }

/* ---------- Kontaktschatten ---------------------------------------------- */
/* Weich auslaufend und halbtransparent, damit sie auf jedem Untergrund
   funktionieren und nichts einen Kasten um die Geräte zeichnet. */
.dm__shadow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(var(--b, 26px));
}
.dm__shadow--laptop {
  left: 6%;
  right: 6%;
  bottom: -1.4%;
  height: 4.5%;
  --b: 16px;
  background: rgba(18, 20, 28, .34);
}
.dm__shadow--laptop-soft {
  left: -2%;
  right: -2%;
  bottom: -5%;
  height: 11%;
  --b: 50px;
  background: rgba(18, 20, 28, .14);
}
.dm__shadow--phone {
  left: -16%;
  right: -16%;
  bottom: -2.6%;
  height: 6%;
  --b: 18px;
  background: rgba(18, 20, 28, .34);
}

/* ---------- Umbruch ------------------------------------------------------- */
@media (max-width: 1024px) {
  .dm {
    --dm-laptop: 82%;
    --dm-phone: 17%;
    --dm-phone-drop: 3%;
    --dm-pad-bottom: 5%;
  }
  .dm__shadow--laptop { --b: 22px; }
  .dm__shadow--laptop-soft { --b: 40px; }
}

@media (max-width: 680px) {
  /* Auf dem Telefon steht der Laptop über die volle Breite, das iPhone rückt
     darunter nach rechts und überlappt nur die Kante. So bleibt beides
     vollständig sichtbar — nichts wird abgeschnitten. */
  .dm {
    --dm-laptop: 100%;
    --dm-phone: 34%;
    --dm-pad-bottom: 3%;
  }
  .dm__phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: var(--dm-phone);
    margin: -7% 0 0 auto;
  }
  .dm__chrome { height: 6.5%; }
  .dm__screen video { top: 6.5%; height: 93.5%; }
  .dm--strauch .dm__reel { inset: 6.5% 0 0; }
  .dm__shadow--laptop { --b: 14px; }
  .dm__shadow--laptop-soft { --b: 26px; height: 10%; --b: 26px; }
  .dm__shadow--phone { --b: 14px; }
}

/* ---------- Reduzierte Bewegung ------------------------------------------ */
/* Kein Einblenden, keine Parallax. Die Aufnahmen laufen nicht von selbst an;
   stattdessen bekommt jedes Gerät eine Steuerung. */
@media (prefers-reduced-motion: reduce) {
  .dm__stage { opacity: 1 !important; transform: none !important; transition: none; }
  .dm__laptop, .dm__phone { transform: none !important; }
}

/* ---------- 14 MOTION ---------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Headline-Reveal zeilenweise über Maske */
/* Die Maske schneidet die Zeile ab — ohne Luft nach unten verliert sie die
   Unterlängen (g, j, y) und den Fuß von Zeichen wie „?“. Das Polster wird
   per negativem Rand wieder herausgerechnet, das Layout bleibt gleich. */
.mask { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .mask > span, .mask.is-in > span { transform: none; }

/* Bild-Reveal: sanftes Herunterskalieren + Maske */
[data-img-reveal] { overflow: hidden; }
[data-img-reveal] > * {
  transform: scale(1.03);
  opacity: 0;
  transition: transform 1200ms var(--ease), opacity 900ms var(--ease-soft);
}
[data-img-reveal].is-in > * { transform: scale(1); opacity: 1; }

/* Sehr subtile Parallax für einzelne große Bilder */
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .mask > span { transform: none; }
  [data-img-reveal] > * { opacity: 1; transform: none; }
  [data-stagger-in] .phone-item { opacity: 1; transform: none; }
  .split__side, .split__mark, .swatch, .symbol, .colorway figure,
  .swatch-line, .social__post,
  .devices__item--l, .devices__item--r { opacity: 1 !important; transform: none !important; }
  .fullbleed img { transform: none !important; }
  .webstory__step > * { opacity: 1 !important; }
  .palette__field, .principles li,
  .chain__step, .appscreens__item, .finding, .decision { opacity: 1 !important; transform: none !important; }
  .chain__step::before { transform: scaleX(1) !important; }
  .hairline { transform: scaleX(1) !important; }
  [data-parallax] { transform: none !important; }
}

/* ---------- 15 RESPONSIVE ------------------------------------------------ */

/* --- Tablet ---------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --gap: 1.5rem; }

  /* Hero bleibt vollflächig; das Bild rückt weiter nach rechts,
     damit die Freifläche für die Headline erhalten bleibt. */
  .hero { min-height: 100vh; min-height: max(560px, 100svh); }
  .hero__portrait { object-position: 78% 26%; }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(250,247,241,.8) 0, rgba(250,247,241,.36) 55%, transparent 100%) top / 100% 170px no-repeat,
      linear-gradient(to right, rgba(250,247,241,.8) 0, rgba(250,247,241,.46) 40%, rgba(250,247,241,0) 66%);
  }
  .hero__col { grid-column: 1 / span 8; }
  .hero__scroll { grid-column: 1 / span 6; }

  /* Gestapelt: die Zeilenzuweisung aus der Desktop-Regel muss weg, sonst
     lägen alle drei Blöcke übereinander. */
  .footer__title   { grid-column: 1 / span 12; grid-row: auto; margin-bottom: 0; }
  .footer__contact { grid-column: 1 / span 7;  grid-row: auto; }
  .footer__ident   { grid-column: 1 / span 7;  grid-row: auto; }

  .cs-hero__title { grid-column: 1 / span 10; }
  .cs-hero__pos { grid-column: 1 / span 7; }
  .cs-hero__facts { grid-column: 1 / span 12; grid-row: auto; margin-top: 2.5rem; grid-template-columns: repeat(3, 1fr); }
  .cs-media-grid--split { grid-template-columns: 1.5fr 1fr; }
  .cs-section__head { grid-column: 1 / span 12; margin-bottom: 1.5rem; }
  .cs-section__body,
  .cs-section__body--wide,
  .cs-section__body--aside { grid-column: 1 / span 12; }
  .m-full, .m-wide, .m-inset, .m-right, .m-left,
  .m-half-l, .m-half-r, .m-aside, .m-narrow, .m-text { grid-column: 1 / -1; }
  /* Im Umbruch behalten die Nebenmotive ihre Größe statt die volle Breite
     einzunehmen — sonst wird aus einer Randnotiz das Hauptmotiv. */
  .m-aside  { max-width: 520px; }
  .m-narrow { max-width: 340px; }
  .phone-item { flex: 0 1 205px; }
  .m-drop { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
  .cs-band .cs-quote { grid-column: 1 / -1; }

  /* ---------- MONA Case Study: Umbruch ---------------------------------- */
  .es__text, .es--wide .es__text, .es__text.es--wide { grid-column: 1 / -1; }
  .es__note { grid-column: 1 / -1; margin-top: 1.5rem; padding-bottom: 0; }

  .esa__text { grid-column: 1 / -1; }
  .esa__note {
    grid-column: 1 / -1;
    padding-bottom: 0;
    padding-left: 0;
    border-left: 0;
    max-width: 46ch;
  }
  .lead-row { grid-template-columns: 1fr; gap: .75rem; }
  .sysrow { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); }
  .sysrow__lead .body-text { max-width: none; }

  /* Zielgruppen untereinander: Kind, Marke, Eltern */
  .split__row { grid-column: 1 / -1; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2.5rem; }
  .split__side--l, .split__side--r { text-align: center; transform: translateY(24px); }
  .split.is-in .split__side { transform: none; }
  .split__foot { grid-column: 1 / -1; }

  /* Logostory: eine Spalte, Bühne bleibt oben stehen */
  .logostory { grid-template-columns: 1fr; }
  .logostory__sticky {
    grid-column: 1 / -1;
    top: 4.5rem;
    height: 34vh;
    background: var(--cream);
    padding-block: .75rem;
    z-index: 3;
  }
  .logostory__steps { grid-column: 1 / -1; }
  .logostory__step { min-height: 0; padding-block: clamp(2rem, 6vw, 3rem); }
  .logo-final img { grid-column: 1 / -1; }

  /* Website-Story: Rahmen bleibt oben stehen, die Stationen laufen darunter
     durch. So sieht man auf dem Telefon alle vier Screens statt nur den
     ersten — ohne die Bilder ein zweites Mal in den Quelltext zu schreiben. */
  .webstory { display: flex; flex-direction: column; }
  .webstory__sticky {
    order: -1;
    position: sticky;
    top: 4.5rem;
    background: var(--cream);
    padding-block: .5rem 1rem;
    z-index: 3;
  }
  .webstory__steps { margin-top: .5rem; }
  .webstory__step { min-height: 52vh; padding-block: 1rem; }
  .chapter--warm .webstory__sticky { background: var(--cream-2); }

  /* Geräte: keine Überlagerung, gleichmäßige Reihe */
  .devices { flex-wrap: wrap; gap: 1.25rem; }
  .devices__item, .devices__item--c { flex: 1 1 30%; min-width: 0; }
  .devices__item--c { transform: none; }
  /* Der Auftritt der äußeren beiden Geräte schob sie um 76 px nach innen.
     Auf schmalen Fenstern ragten sie dadurch für die Dauer der Einblendung
     rechts und links heraus und erzeugten kurz einen Querbalken. Der Versatz
     wird hier auf einen Bruchteil der eigenen Breite umgestellt — die
     Bewegung bleibt, das Überstehen verschwindet. */
  .devices__item--l { transform: translateX(12%) scale(.96); }
  .devices__item--r { transform: translateX(-12%) scale(.96); }
  .devices__item--l { margin-right: 0; }
  .devices__item--r { margin-left: 0; }

  .showcase, .specimen, .social { grid-template-columns: 1fr; }
  .social__phone { max-width: 320px; margin-inline: auto; }
  .next-visual__link, .next-visual__media { grid-column: 1 / -1; }
  /* ---------- AURUM Case Study: Umbruch --------------------------------- */
  .chain { grid-column: 1 / -1; }
  .chain__step { grid-template-columns: 1fr; gap: .75rem; }
  .chain__k { padding-top: 0; }
  .chain__note { padding-top: 0; max-width: none; }
  .stack { grid-column: 1 / -1; }
  .m-lead-l, .appscreens + .m-lead-l { grid-column: 1 / -1; }
  .appscreens { grid-column: 1 / -1; gap: .9rem; }
  .findings { grid-column: 1 / -1; }
  .au-specimen__row { grid-template-columns: 1fr; gap: 1rem; }
  .palette { grid-template-columns: repeat(5, 1fr); }
  .palette__field { min-height: clamp(180px, 26vh, 320px); }
  .markstage img { grid-column: 2 / span 10; }
  .principles li { grid-template-columns: 3.5rem 1fr; }

  .next-visual__media { margin-top: 2.5rem; }
  .showcase__minor { margin-top: 0; }
  .showcase--calm { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .showcase--calm .showcase__minor { margin-top: 0; max-width: 460px; }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .colorway { grid-template-columns: repeat(3, 1fr); }
  .symbols  { grid-template-columns: repeat(4, 1fr); }
  .finale__claim { grid-column: 1 / -1; }

}

/* --- Mobile ---------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --gap: 1.1rem;
    --pad: 1.35rem;
    --section: 4.5rem;
    --section-sm: 3.5rem;
    --fs-display: clamp(2rem, 9.8vw, 3.4rem);
    --fs-h2: clamp(1.75rem, 8vw, 2.6rem);
  }

  /* Navigation kompakt: Burger + Overlay-Panel, keine Hover-Abhängigkeit */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px; height: 48px;
    margin-right: -12px;
    align-items: flex-end;
    z-index: 120;
    position: relative;
  }
  .nav-toggle span {
    display: block; height: 1.5px; background: var(--ink);
    transition: transform 380ms var(--ease), opacity 240ms var(--ease), width 380ms var(--ease);
  }
  .nav-toggle span:nth-child(1) { width: 26px; }
  .nav-toggle span:nth-child(2) { width: 18px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { width: 26px; transform: translateY(-3.25px) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 6rem var(--pad) 3rem;
    background: var(--cream);
    transform: translateY(-100%);
    transition: transform 560ms var(--ease);
    z-index: 110;
    visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__link {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.01em;
    text-transform: none;
    padding-block: .55rem;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav__link::after { display: none; }

  /* Touch-Targets: mindestens 44 px hoch */
  .brand { padding-block: .5rem; min-height: 44px; }
  .brand__mark { height: 32px; }
  .brand__name { font-size: .68rem; letter-spacing: .2em; }
  .brand__sub { font-size: .56rem; }

  .arrow-link { padding-block: .7rem; min-height: 44px; }

  /* Hero gestapelt: Headline zuerst, Portrait darunter über die volle Breite.
     Text über dem Bild wäre auf dieser Breite nicht mehr sicher lesbar. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 6.5rem;
    padding-bottom: 0;
    min-height: auto;
  }
  .hero__bg {
    order: 2;
    position: relative;
    inset: auto;
    height: auto;
    margin-top: 1.5rem;
    margin-inline: calc(var(--pad) * -1);
    width: calc(100% + var(--pad) * 2);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 78%, transparent 100%);
  }
  .hero__portrait { height: auto; aspect-ratio: 1 / 0.95; object-position: 56% 28%; }
  .hero__scrim { display: none; }
  .hero__inner { order: 1; position: static; }
  .hero__col { grid-column: 1 / -1; }
  .hero__title { max-width: none; }
  .hero__scroll { display: none; }

  /* Projektname auf schmalen Schirmen etwas kleiner */

  .skill-item { flex-direction: column; gap: .4rem; align-items: flex-start; }
  .skill-item__note { text-align: left; }
  .tools { flex-direction: column; align-items: flex-start; gap: 1.25rem; }

  .footer__contact, .footer__ident { grid-column: 1 / -1; grid-row: auto; }
  .footer__ident { margin-top: 2.5rem; }
  .footer__bottom { flex-direction: column; gap: .4rem; }

  .cs-hero__title, .cs-hero__pos, .cs-hero__facts { grid-column: 1 / -1; }
  .cs-hero__facts { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
  .user-first__lead, .user-first__copy,
  .compare-intro, .compare-stage { grid-column: 1 / -1; }
  .user-first__copy { margin-top: 2.25rem; }
  .compare-stage { margin-top: 2.5rem; }
  .compare-stage__frame { aspect-ratio: 4 / 3; }
  .cs-media-grid--1, .cs-media-grid--2, .cs-media-grid--3, .cs-media-grid--split,
  .cs-media-grid--match, .cs-media-grid--logo { grid-template-columns: 1fr; }
  .cs-media-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-rows: none; grid-auto-flow: row; }
  .steps li:nth-child(5) { border-bottom: 0; }
  .steps li:last-child { border-bottom: 1px solid var(--line); }
  .notes { grid-template-columns: 1fr; gap: 1.75rem; }
  .cs-cols { columns: 1; }

  /* ---------- MONA Case Study: schmale Viewports ------------------------ */
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .colorway { grid-template-columns: repeat(2, 1fr); }
  .symbols  { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .devices { flex-direction: column; }
  .devices__item, .devices__item--c { flex: 0 0 auto; width: 74%; max-width: 300px; }
  /* Profil kleiner, die drei Beiträge bleiben nebeneinander — als Reihe
     bleiben sie lesbar, untereinander würde der Abschnitt zu lang. */
  .social__phone { max-width: 260px; margin-inline: auto; }
  .social__cards { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .social__post:nth-child(2) { margin-bottom: .75rem; }
  .logostory__sticky { height: 30vh; }
  .dnote { max-width: none; }
  /* ---------- AURUM: schmale Viewports ---------------------------------- */
  .palette { grid-template-columns: repeat(2, 1fr); }
  .palette__field { min-height: 150px; }
  /* Drei Geräte nebeneinander werden auf dem Telefon unlesbar klein —
     deshalb untereinander, jedes mit seiner Beschriftung darunter. */
  /* Bestand und Entscheidung untereinander — nebeneinander wird der Text zu schmal */
  .decision { grid-template-columns: 1fr; gap: 1.25rem; }
  .decision__after { border-left: 0; padding-left: 0; margin-left: 0; }
  .decision p { max-width: none; }
  .finding { grid-template-columns: 2.4rem 1fr; gap: .9rem; }
  .appscreens { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); justify-items: center; }
  .appscreens__item { display: block; width: 100%; max-width: 280px; }
  .appscreens__item:nth-child(2) img { margin-bottom: 0; }
  .appscreens figcaption { text-align: center; }
  .markstage img { grid-column: 1 / -1; }
  .devices--precise .devices__item,
  .devices--precise .devices__item--c { width: 78%; max-width: 320px; }

  /* Zeitstrahl senkrecht: Linie links, Punkte darauf */
  .timeline { grid-template-columns: 1fr; gap: 2rem; padding-top: 0; padding-left: 4rem; }
  .timeline::before, .timeline::after {
    top: 1.45rem; bottom: 1.45rem; height: auto;
    left: 1.45rem; right: auto; width: 1px;
  }
  .timeline::after { transform: scaleY(0); transform-origin: center top; }
  .timeline.is-in::after { transform: scaleY(1); }
  .timeline__dot { top: 0; left: -4rem; translate: 0 0; }
  .timeline__step { min-height: 2.9rem; }
  .timeline__step > div { text-align: left; }
  .timeline__note { margin-inline: 0; }
  .phone-item { flex: 1 1 230px; }
  .next-project__link { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* Touch: keine Hover-Effekte erzwingen */
@media (hover: none) {
  .project__link:hover .project__media img { transform: none; }
  .arrow-link:hover .arrow { transform: none; }
}

/* ==========================================================================
   STRAUCH — Case Study, Erweiterungen der Dramaturgie
   Eröffnungsmockup · Informationsarchitektur · Website-Reel · Weg-Liste
   Alle Bausteine nutzen Raster, Farben und Typografie des Portfolios.
   ========================================================================== */

/* ---------- Eröffnung: das vorhandene Mockup als Bühne ------------------- */
.cs-keyvisual--mockup { margin-top: clamp(2rem, 4vw, 3.75rem); }
.cs-keyvisual--mockup figure { margin: 0; }
.cs-keyvisual--mockup img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(8px, .9vw, 14px);
}
.cs-keyvisual--mockup .caption {
  max-width: 54ch;
  margin: 1.25rem auto 0;
  text-align: center;
}

/* ---------- Informationsarchitektur -------------------------------------
   Dieselbe Listenlogik wie die Befunde, damit Problem und Lösung im
   gleichen Format lesbar sind: links die Frage, rechts die Antwort der
   Seite. Kein Diagramm — die Reihenfolge ist die Aussage. */
.ia {
  grid-column: 2 / span 9;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ia__step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding-block: clamp(1.15rem, 2.4vw, 1.8rem);
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 740ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.ia__step:last-child { border-bottom: 1px solid var(--line); }
.ia.is-in .ia__step { opacity: 1; transform: none; }
.ia__n {
  font-size: var(--fs-label);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--st-gruen, var(--muted));
  padding-top: .45em;
}
.ia__q {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.75vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
}
.ia__a {
  margin-top: .5rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--body);
  max-width: 62ch;
}

/* ---------- Website-Reel -------------------------------------------------
   Die Aufnahme ist 1918 x 838 Pixel gross. Sie wird nicht beschnitten und
   nicht gestreckt; der Rahmen uebernimmt das Format der Aufnahme. */
.reelstage { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 4rem); }
.browser--lg { border-radius: clamp(10px, 1vw, 16px); box-shadow: 0 34px 90px rgba(20, 27, 51, .16); }
.browser--lg .browser__bar { height: clamp(34px, 3vw, 46px); }
.browser__screen--video {
  aspect-ratio: 1918 / 838;
  background: var(--st-sand, var(--cream-2));
}
.browser__screen--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.browser__screen--video video[controls] { object-fit: contain; background: var(--ink); }
.reelstage .caption { margin-top: 1rem; max-width: 62ch; }

/* ---------- Der Weg als Liste -------------------------------------------
   Sechs Stationen statt sechs Screens. Die Liste begleitet die Aufnahme,
   sie wiederholt sie nicht. */
.path {
  grid-column: 1 / -1;
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
.path__step {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.path.is-in .path__step { opacity: 1; transform: none; }
.path__n {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--st-gruen, var(--muted));
}
.path__t {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.25;
  color: var(--ink);
}
.path__d {
  margin-top: .4rem;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--body);
}

/* ---------- Schmalere Ansichten ----------------------------------------- */
@media (max-width: 1024px) {
  .ia { grid-column: 1 / -1; }
  .path { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cs-keyvisual--mockup { margin-top: clamp(2rem, 8vw, 3rem); }
  .path { grid-template-columns: 1fr; gap: 0; }
  .path__step { padding-block: 1rem; }
  .path__step:last-child { border-bottom: 1px solid var(--line); }
  .ia__step { grid-template-columns: 2.5rem 1fr; gap: .9rem; }
  .browser--lg { border-radius: 8px; }
  .reelstage { margin-top: 2rem; }
}
/* Drei Telefone nebeneinander sprengen unter 640 Pixel die Breite:
   die Ueberlappung entfaellt, die Kacheln teilen sich die Zeile.
   Bewusst auf STRAUCH begrenzt, damit die anderen Fallstudien unberuehrt bleiben. */
@media (max-width: 640px) {
  .strauch .devices { gap: .55rem; }
  .strauch .devices__item { flex: 1 1 0; min-width: 0; }
  .strauch .devices__item--l { margin-right: 0; transform: none; }
  .strauch .devices__item--r { margin-left: 0; transform: none; }
  .strauch .devices__item--c { transform: none; }
  .strauch .devices__item figcaption { margin-top: .6rem; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ia__step, .path__step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   STRAUCH — Bühne für den Vergleich, Schriftmaske, Bildbänder
   ========================================================================== */

/* Unterlängen: die Maske schneidet g, j und ß um zwei Pixel ab. Der Kasten
   bekommt unten Luft und holt sie über einen negativen Aussenabstand wieder
   aus dem Layout — die Zeilen sitzen also unverändert, nur nichts wird mehr
   beschnitten. */
.strauch .mask { padding-bottom: .16em; margin-bottom: -.16em; }

/* Der Vergleich bekommt die volle Breite — er ist der Kern des Kapitels. */
.chapter--compare .compare-intro { grid-column: 1 / span 7; }
.chapter--compare .compare-stage {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
/* Beide Mockups zeigen denselben Laptop an derselben Stelle. Der Trenner
   läuft deshalb nur über den Bildschirm, nicht über Gehäuse und Fuß. */
.chapter--compare .compare-stage__frame {
  aspect-ratio: 1080 / 747;
  max-width: 1180px;
  margin-inline: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.chapter--compare .compare-stage__pane { overflow: hidden; }
.chapter--compare .compare-stage__pane img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Der Trenner bleibt im Bildschirm: dieser sitzt im Mockup bei 10 % Rand
   links und rechts, oben 12,85 % und unten 15,26 %. */
.chapter--compare .compare-stage__frame { --cp: calc(10% + var(--compare-position) * .8); }
.chapter--compare .compare-stage__pane--before { clip-path: inset(0 calc(100% - var(--cp)) 0 0); }
.chapter--compare .compare-stage__handle {
  left: var(--cp);
  top: 12.85%;
  bottom: 15.26%;
  box-shadow: 0 0 0 1px rgba(253,251,247,.5);
}
.chapter--compare .compare-stage__handle::before {
  width: clamp(38px, 3.2vw, 52px);
  height: clamp(38px, 3.2vw, 52px);
  box-shadow: 0 6px 20px rgba(20,27,51,.28);
}
.chapter--compare .compare-stage__labels { max-width: 1180px; margin-inline: auto; padding-inline: 10%; }
.chapter--compare .compare-stage .caption { max-width: 1180px; margin-inline: auto; }
.compare-stage__labels {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 600;
}
.compare-stage .caption { max-width: 62ch; }

/* ==========================================================================
   STRAUCH — Bestandswand, Zahlenband, Bildbänder
   ========================================================================== */

/* ---------- Bestandswand -------------------------------------------------
   Links läuft die vollständige Aufnahme der alten Seite mit, rechts stehen
   die Befunde. Wer scrollt, sieht die Stelle, über die gerade geschrieben
   wird — das ist der Beleg, nicht die Behauptung. */
.wall {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 4.5vw, 5rem);
  align-items: start;
}
.wall__media { position: sticky; top: 12vh; }
.wall .findings { grid-column: auto; padding-top: clamp(1rem, 6vh, 5rem); }
/* Jeder Befund bekommt eine eigene Bildschirmhöhe. Dadurch bleibt die
   Aufnahme lange genug stehen, damit man die Stelle wirklich sieht. */
.wall .finding { min-height: 30vh; align-content: center; }
.wall .finding:first-child { border-top: 0; }
.browser--tall { border-radius: 10px; }
.browser__url {
  margin-left: .9rem;
  padding: .18rem .8rem;
  border-radius: 99px;
  background: rgba(255,255,255,.7);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.browser__screen--tall {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
}
.browser__screen--tall img {
  position: absolute;
  top: 0; left: 0; right: auto; bottom: auto;
  width: 100%;
  height: auto;
  opacity: 1;                 /* die Basisregel blendet Rahmenbilder aus */
  object-fit: fill;
  transition: none;
  will-change: transform;
}
.wall__media .caption { margin-top: .9rem; }

/* ---------- Der Bestand in Zahlen ---------------------------------------
   Vier Befunde, die sich zählen lassen. Keine erfundenen Kennzahlen —
   jede Zahl steht so in der Liste darüber. */
.tally {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tally__i {
  padding-block: clamp(1.75rem, 4vw, 3.25rem);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.tally.is-in .tally__i { opacity: 1; transform: none; }
.tally__i + .tally__i { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2.5vw, 2.5rem); }
.tally__n {
  display: flex;
  align-items: baseline;
  gap: .5em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tally__n em {
  font-style: normal;
  font-size: .34em;
  color: var(--st-gruen);
  transform: translateY(-.35em);
}
.tally__to { color: var(--st-gruen); }
.tally__l {
  margin-top: .9rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--body);
  max-width: 22ch;
}

/* Bildunterschrift unter einem Vollbild-Band */
.caption--band { margin-top: 1rem; }

@media (max-width: 1024px) {
  .wall { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
  .wall__media { position: static; }
  .browser__screen--tall { aspect-ratio: 4 / 3.2; }
  .wall .findings { padding-top: 0; }
  .wall .finding:first-child { border-top: 1px solid var(--line); }
  .wall .finding { min-height: 0; align-content: start; }
  .tally { grid-template-columns: repeat(2, 1fr); }
  .tally__i:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .tally__i:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .tally { grid-template-columns: 1fr; }
  .tally__i + .tally__i { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .browser__screen--tall { aspect-ratio: 4 / 3.6; }
}
@media (prefers-reduced-motion: reduce) {
  .tally__i { opacity: 1 !important; transform: none !important; transition: none !important; }
  .browser__screen--tall img { transform: none !important; }
}

/* ==========================================================================
   STRAUCH — Korrekturen: Eröffnung ruhiger, Bildbänder ungeschnitten
   ========================================================================== */

/* Die Eröffnung soll einladen, nicht erschlagen: das Mockup steht ruhig in
   der Mitte statt über die volle Rasterbreite. */
.cs-keyvisual--mockup img {
  max-width: min(100%, 900px);
  margin-inline: auto;
}

/* Bildbänder zeigen das Motiv vollständig. Der Zuschnitt auf feste Höhe
   hat oben und unten (Arbeiten) und links und rechts (Auszeichnung)
   Bildinhalt abgeschnitten. */
.strauch .fullbleed img {
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* Kein weicher Auslauf an den Seiten — die Kanten bleiben Kanten. */
.strauch .fullbleed--divider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: none;
          mask-image: none;
}
.strauch .fullbleed + .caption--band,
.strauch .fullbleed--divider + .caption--band {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
/* Luft um jedes Band, damit zwei Bänder nie aneinanderkleben. */
.strauch .band {
  margin-block: clamp(3.5rem, 8vw, 8rem);
}
/* Der persönliche Absatz steht etwas zurückgenommen unter der Einordnung. */
.es__note--personal { margin-top: 1.2rem; }

/* ==========================================================================
   13f STRAUCH — eine Kante, ein Maß

   Das Problem der Vorfassung waren nicht die einzelnen Bauteile, sondern ihre
   Ausrichtung: fünfzehn verschiedene linke Kanten auf einer Seite. Das Auge
   findet keinen Halt und springt.

   Deshalb hier nur zwei Maße:
     · Text  beginnt links an der Rasterkante und endet nach 54 Zeichen
     · Bild  spannt von der ersten bis zur letzten Rasterspalte
   Kein Wechsel der Seiten, keine Vollbild-Bänder, keine Sonderbreiten.
   Alles ist über `.strauch` gekapselt.
   ========================================================================== */

/* ---------- Hero ------------------------------------------------------- */
/* height:auto ist hier Pflicht — sonst gewinnt das height-Attribut aus dem
   Markup und staucht das Bild auf die falsche Höhe. */
.strauch .cs-keyvisual--wide { grid-column: 1 / -1; margin-top: clamp(1.5rem, 2.8vw, 2.5rem); }
.strauch .cs-keyvisual--wide img {
  width: 100%; height: auto; display: block;
  border-radius: clamp(8px, .8vw, 14px);
}

/* ---------- Die beiden einzigen Maße ------------------------------------ */
.strauch .sp      { grid-column: 1 / -1; }              /* volle Satzbreite */
.strauch .sp-text { max-width: 54ch; }                  /* Textmaß an der Kante */

/* Ruhiger, gleichmäßiger Abstand zwischen den Kapiteln. */
.strauch .chapter        { padding-block: clamp(3rem, 5.5vw, 5.5rem); }
.strauch .chapter--tight { padding-block: clamp(2.25rem, 4vw, 3.75rem); }

/* Kapitelkopf: überall dieselbe Bauform — Label, Überschrift, ein Absatz. */
.strauch .head { grid-column: 1 / -1; max-width: 54ch; }
.strauch .head .label { display: block; margin-bottom: clamp(.8rem, 1.6vw, 1.2rem); }
.strauch .head__t {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink);
}
.strauch .head__d { margin-top: clamp(1rem, 2vw, 1.5rem); }
.strauch .head + .sp { margin-top: clamp(2.25rem, 4.5vw, 4rem); }

/* Bildfläche — ein einziger Rahmen für jedes Bild auf der Seite. */
.strauch .shot {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: clamp(8px, .8vw, 14px);
  overflow: hidden;
  background: var(--cream-2);
  box-shadow: 0 1px 2px rgba(20,27,51,.05), 0 20px 44px -28px rgba(20,27,51,.3);
}
.strauch .shot > img { width: 100%; height: auto; display: block; }
.strauch figcaption.caption,
.strauch .shot + .caption { margin-top: .9rem; }

/* ---------- Blockfolge: Befunde und Entscheidungen --------------------- */
/* Beide benutzen dieselbe Bauform: Kennung, Überschrift, ein Satz, ein Bild. */
.strauch .block { grid-column: 1 / -1; }
.strauch .block + .block { margin-top: clamp(2.5rem, 4.5vw, 4.25rem); }
.strauch .block__k {
  display: block; margin-bottom: .75rem;
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--st-gruen);
}
.strauch .block__t {
  margin: 0 0 .8rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem); line-height: 1.16;
  letter-spacing: -.015em; color: var(--ink);
  max-width: 54ch;
}
.strauch .block__d {
  font-size: var(--fs-small); line-height: 1.7; color: var(--body);
  max-width: 54ch;
}
.strauch .block__media { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- Ablaufdiagramm --------------------------------------------- */
.strauch .flow {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.strauch .flow__i {
  position: relative; padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  opacity: 0; transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.strauch .flow.is-in .flow__i { opacity: 1; transform: none; }
.strauch .flow__i::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--st-gruen);
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}
.strauch .flow.is-in .flow__i::before { transform: scaleX(1); }
.strauch .flow__i::after {
  content: ""; position: absolute; top: -4px; left: 0;
  width: 10px; height: 10px; border-radius: 50%; background: var(--st-gruen);
}
.strauch .flow__n {
  display: block; font-size: var(--fs-label); letter-spacing: .16em;
  color: var(--st-gruen); font-variant-numeric: tabular-nums; margin-bottom: .45rem;
}
.strauch .flow__t {
  margin: 0 0 .45rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.15; color: var(--ink);
}
.strauch .flow__d { font-size: var(--fs-small); line-height: 1.6; color: var(--body); }

/* ---------- Farbe und Schrift ------------------------------------------ */
.strauch .sysbar {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.strauch .sysbar__i { display: flex; align-items: center; gap: .9rem; }
.strauch .sysbar__chip {
  width: clamp(2rem, 2.6vw, 2.6rem); aspect-ratio: 1; border-radius: 5px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(20,27,51,.18);
}
.strauch .sysbar__n, .strauch .sysbar__type { font-size: var(--fs-small); color: var(--ink); line-height: 1.35; }
.strauch .sysbar__m { display: block; font-size: var(--fs-label); letter-spacing: .1em; color: var(--muted); }

/* ---------- Geräte ------------------------------------------------------ */
/* Neben dem Text: drei kleinere Geräte, die die Spalte genau füllen. */
.strauch .devices--big { gap: clamp(.75rem, 1.6vw, 1.5rem); align-items: flex-end; justify-content: flex-start; flex-wrap: nowrap; }
.strauch .devices--big .devices__item { flex: 1 1 0; min-width: 0; max-width: 210px; }
.strauch .devices--big .devices__item figcaption { font-size: var(--fs-label); }

/* ---------- Randnotiz --------------------------------------------------- */
.strauch .sidenote {
  grid-column: 1 / -1; max-width: 54ch;
  padding-left: clamp(1rem, 1.8vw, 1.4rem);
  border-left: 2px solid var(--st-gruen);
  font-size: var(--fs-small); line-height: 1.7; color: var(--body);
}
.strauch .sidenote strong { color: var(--ink); font-weight: 600; }

/* ---------- Erkenntnisse ------------------------------------------------ */
.strauch .takeaways {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.strauch .takeaway {
  padding-top: clamp(.9rem, 1.8vw, 1.3rem); border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(16px);
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.strauch .takeaways.is-in .takeaway { opacity: 1; transform: none; }
.strauch .takeaway__n {
  display: block; margin-bottom: .6rem;
  font-size: var(--fs-label); letter-spacing: .16em;
  color: var(--st-gruen); font-variant-numeric: tabular-nums;
}
.strauch .takeaway p { font-size: var(--fs-small); line-height: 1.7; color: var(--body); }

/* ---------- Drei Begriffe unter dem Video ------------------------------ */
/* Sitzen dicht unter der Bildunterschrift, nicht als eigener Block mit
   Leerfläche darunter. */
.strauch .cues {
  grid-column: 1 / -1;
  list-style: none; margin: clamp(1rem, 1.8vw, 1.4rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.9rem, 2vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--muted);
}
.strauch .cues li { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.75rem); }
.strauch .cues li + li::before {
  content: ""; width: clamp(16px, 2vw, 28px); height: 1px; background: var(--st-gruen);
}

/* ---------- Vorher-Nachher an derselben Kante -------------------------- */
/* Innerhalb eines Paars gilt immer die Spalte des Paars. Bauteile wie .shot
   oder .compare-stage bringen sonst ihr eigenes `grid-column: 1 / -1` mit,
   spannen über beide Spalten und rutschen unter den Text. */
.strauch .pair > * { grid-column: auto; }
.strauch .compare-stage__labels { font-size: var(--fs-label); }

/* ---------- Umbrüche ---------------------------------------------------- */
@media (max-width: 1024px) {
  .strauch .flow      { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.75rem, 4vw, 2.5rem); }
  .strauch .takeaways { grid-template-columns: 1fr; }
  .strauch .sysbar    { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; }
}
@media (max-width: 760px) {
  .strauch .flow    { grid-template-columns: 1fr; }
  .strauch .bksteps { grid-template-columns: 1fr; }
  .strauch .sysbar  { grid-template-columns: 1fr; }
  .strauch .cues    { gap: .7rem; }
  .strauch .cues li { gap: .7rem; }
}

/* ---------- Reduzierte Bewegung ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .strauch .flow__i, .strauch .bkstep, .strauch .takeaway {
    opacity: 1 !important; transform: none !important;
  }
  .strauch .flow__i::before { transform: scaleX(1) !important; }
}

/* ---------- Text und Bild nebeneinander -------------------------------- */
/* Die Grundform für alles, was nicht über die volle Breite muss: Text links
   an der Kante, Bild rechts daneben und kleiner. Kein Stapeln, kein Springen. */
.strauch .pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}
.strauch .pair__text { max-width: 46ch; }
.strauch .pair__media { margin: 0; min-width: 0; }
.strauch .pair__media > img,
.strauch .pair__media .shot { width: 100%; }
.strauch .pair--top { align-items: start; }

/* ---------- Belege am Bestand: klebender Rahmen, Text läuft daneben ----- */
/* Dieselbe Bauform wie die Story-Sequenzen bei MONA: ein Rahmen bleibt
   stehen, der Text scrollt daran vorbei, das Bild wechselt mit. So sieht man
   ein Problem auf einen Blick statt drei Bilder untereinander. */
.strauch .webstory { grid-column: 1 / -1; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 4vw, 3.5rem); }
.strauch .webstory__steps { grid-column: 1 / span 1; }
.strauch .webstory__step { min-height: 58vh; }
.strauch .webstory__sticky { grid-column: 2 / span 1; top: 16vh; }
.strauch .webstory .browser { box-shadow: 0 20px 48px -26px rgba(20,27,51,.34); }
.strauch .webstory__k {
  display: block; margin-bottom: .7rem;
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--st-gruen);
}
.strauch .webstory__t {
  margin: 0 0 .8rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem); line-height: 1.16;
  letter-spacing: -.015em; color: var(--ink);
}
.strauch .webstory__d { font-size: var(--fs-small); line-height: 1.7; color: var(--body); max-width: 42ch; }

/* ---------- Logo: alt und neu nebeneinander ---------------------------- */
.strauch .logopair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: end;
}
.strauch .logopair figure { margin: 0; }
.strauch .logopair__frame {
  background: var(--cream-2);
  border-radius: clamp(8px, .8vw, 12px);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
}
.strauch .logopair__frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.strauch .logopair figcaption {
  margin-top: .8rem;
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.strauch .logopair figcaption em { font-style: normal; color: var(--st-gruen); }

/* ---------- Markenleiste: Farbe und Schrift bekommen einen Ort --------- */
/* Sie hängt direkt am Logo, nicht irgendwo allein zwischen zwei Kapiteln. */
.strauch .brandbar {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.strauch .brandbar__i { display: flex; flex-direction: column; gap: .75rem; }
.strauch .brandbar__chip {
  height: clamp(3rem, 6vw, 4.5rem); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(20,27,51,.16);
}
.strauch .brandbar__t {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--ink); line-height: 1.2;
}
.strauch .brandbar__m { display: block; margin-top: .3rem; font-size: var(--fs-label); letter-spacing: .1em; color: var(--muted); }

/* ---------- Laptop mit laufender Aufnahme ------------------------------ */
/* Nutzt das vorhandene Gerätemockup, aber ohne Telefon — der Laptop steht
   allein und füllt die Bühne. */
/* Das Fenster der Terminaufnahme bekommt exakt deren Seitenverhältnis —
   so wird weder beschnitten noch gepolstert. */
.strauch .pair__media .browser__screen--video { aspect-ratio: 1440 / 630; }
.strauch .pair__media .browser__screen--video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- Umbrüche für die neuen Bauteile ---------------------------- */
@media (max-width: 1024px) {
  .strauch .brandbar { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
}
@media (max-width: 860px) {
  /* Sequenz wird zur Folge: Rahmen oben klebend, Text darunter */
  .strauch .webstory { grid-template-columns: 1fr; }
  .strauch .webstory__steps, .strauch .webstory__sticky { grid-column: 1 / -1; }
  .strauch .webstory__step { min-height: 46vh; }
}
@media (max-width: 760px) {
  .strauch .pair { grid-template-columns: 1fr; gap: 1.5rem; }
  .strauch .pair__text { max-width: none; }
  .strauch .logopair { grid-template-columns: 1fr; }
  .strauch .brandbar { grid-template-columns: 1fr; }
}

/* ---------- Die komplette alte Seite läuft im Rahmen durch -------------- */
/* Nicht drei Ausschnitte, sondern der gesamte Auftritt: die Aufnahme wandert
   beim Scrollen durch den klebenden Rahmen, die Befunde stehen daneben. */
.strauch .wall { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 4vw, 4rem); }
.strauch .wall__media { position: sticky; top: 14vh; }
.strauch .wall .findings { grid-column: auto; padding-top: 0; }
.strauch .wall .finding {
  min-height: 44vh;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 0;
  border-top: 0;
  opacity: .3;
  transform: none;
  transition: opacity 420ms var(--ease-out);
}
.strauch .wall .finding.is-near { opacity: 1; }
.strauch .wall .finding:last-child { border-bottom: 0; }
.strauch .wall .finding__n {
  display: block; padding-top: 0; margin-bottom: .7rem;
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.strauch .wall .finding__t {
  margin-top: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem); line-height: 1.16; margin-bottom: .8rem;
}
.strauch .wall .browser__screen--tall { aspect-ratio: 4 / 5; }
.strauch .wall .browser { box-shadow: 0 20px 48px -26px rgba(20,27,51,.34); }
.strauch .wall__hint {
  margin-top: .9rem; font-size: var(--fs-label); letter-spacing: .1em; color: var(--muted);
}

/* ---------- Sequenz mit gemischten Bildformaten ------------------------- */
/* Für die Entscheidungen: die vier Belege haben sehr unterschiedliche
   Seitenverhältnisse. Deshalb keine beschneidende Fläche, sondern eine Bühne,
   in der jedes Bild vollständig steht. */
.strauch .fitstage {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--cream-2);
  border-radius: clamp(8px, .8vw, 14px);
  overflow: hidden;
}
.strauch .fitstage img {
  position: absolute; inset: clamp(1rem, 2.5vw, 2rem);
  width: auto; height: auto; max-width: calc(100% - clamp(2rem, 5vw, 4rem)); max-height: calc(100% - clamp(2rem, 5vw, 4rem));
  margin: auto; object-fit: contain;
  border-radius: 4px;
  opacity: 0; transform: scale(.985);
  transition: opacity 520ms var(--ease-out), transform 720ms var(--ease-out);
}
.strauch .fitstage img.is-active { opacity: 1; transform: none; }

/* Ohne JavaScript schaltet niemand die Ansichten frei; bei reduzierter
   Bewegung bleibt die Folge bewusst auf dem ersten Schritt stehen. In
   beiden Fällen lägen drei von vier Ansichten unsichtbar übereinander —
   deshalb dort alle vier untereinander, ohne klebende Bühne. */
@media (scripting: none), (prefers-reduced-motion: reduce) {
  .strauch .webstory[data-sequence] { display: block; }
  .strauch .webstory__sticky { position: static; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  /* Die 44vh je Schritt geben dem Scrollweg Luft. Ohne klebende Bühne
     stünden dazwischen nur Löcher — hier reicht der eigene Textblock. */
  .strauch .webstory__steps { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
  .strauch .webstory__step { min-height: 0; padding-block: 0; }
  .strauch .webstory__step > * { opacity: 1; }
  .strauch .fitstage {
    position: static; aspect-ratio: auto;
    display: grid; gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1rem, 2.5vw, 2rem);
  }
  .strauch .fitstage img {
    position: static; inset: auto;
    width: 100%; height: auto; max-width: 100%; max-height: none;
    opacity: 1; transform: none; transition: none;
  }
}

/* ---------- Geräte: gefächerter Einflug ---------------------------------- */
/* Die drei Telefone kommen von unten herein, leicht gedreht und versetzt —
   sie legen sich beim Ankommen gerade. */
.strauch .devices--big .devices__item {
  opacity: 0;
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
}
.strauch .devices--big .devices__item--l { transform: translateY(58px) rotate(-5deg); transition-delay: 0ms; }
.strauch .devices--big .devices__item--c { transform: translateY(72px) scale(.96); transition-delay: 110ms; }
.strauch .devices--big .devices__item--r { transform: translateY(58px) rotate(5deg); transition-delay: 220ms; }
.strauch .devices--big.is-in .devices__item { opacity: 1; transform: none; }

/* ---------- Logo: die beiden Negativfassungen --------------------------- */
.strauch .negpair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.strauch .negpair figure { margin: 0; }
.strauch .negpair img {
  width: 100%; height: auto; display: block;
  border-radius: clamp(8px, .8vw, 12px);
}
.strauch .negpair figcaption {
  margin-top: .8rem; font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

@media (max-width: 860px) {
  .strauch .wall { grid-template-columns: 1fr; }
  .strauch .wall__media { position: static; margin-bottom: 2rem; }
  .strauch .wall .finding { min-height: 0; padding-block: 1.25rem; opacity: 1; }
  .strauch .wall .browser__screen--tall { aspect-ratio: 3 / 4; }
}
@media (max-width: 760px) {
  .strauch .negpair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .strauch .wall .finding { opacity: 1 !important; }
  .strauch .devices--big .devices__item { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   13g  AURUM — der erklärende Absatz gehört zur Überschrift
   =========================================================================
   Zwei wiederkehrende Beschwerden aus dem Feedback: der erklärende Absatz
   steht irgendwo in der Fläche, und die Anwendungen sind über vier
   Abschnitte auseinandergezogen. Beides wird hier gelöst — ausschließlich
   für `.aurum`, MONA und STRAUCH bleiben unberührt.
   ====================================================================== */

/* --- Erklärender Absatz ---------------------------------------------------
   `.m-text` beginnt global in Spalte 4. Ohne Nachbarn links und rechts wirkt
   der Block verloren. Auf AURUM sitzt er stattdessen auf der linken Kante —
   also unter der Überschrift, die dort ebenfalls beginnt. */
.aurum .m-text { grid-column: 1 / span 6; }

/* Notiz neben der Überschrift: `.es__note` steht in Spalte 9–12 auf der
   Grundlinie der letzten Zeile. Eine Design Note darin braucht keinen
   eigenen Rand nach oben. */
.aurum .es__note > .dnote { max-width: none; }

/* --- Vollbild-Bänder: kein Überlauf --------------------------------------
   `.fullbleed` rechnet mit `50% - 50vw`. Innerhalb von `.wrap` ist 50 %
   nicht die halbe Fensterbreite, sondern die halbe Satzbreite — dadurch
   schob das Band die Seite um rund 14 px auf. Es bleibt jetzt in der
   Satzbreite und läuft über eine Maske aus, statt beschnitten zu werden. */
.aurum .fullbleed { width: 100%; margin-left: 0; }

/* --- Anwendungsgalerie ----------------------------------------------------
   Eine Galerie statt vier Abschnitten. Jede Aufnahme behält ihr eigenes
   Seitenverhältnis — es wird nichts beschnitten. Breite und Höhenversatz
   wechseln, damit ein Rhythmus entsteht und keine Kette gleich großer
   Kacheln. */
.aurum .mgal {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  row-gap: clamp(2.25rem, 5vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
/* Bauteile wie `figure` bringen kein eigenes `grid-column` mit — die
   Platzierung steuern ausschließlich die Modifier unten. */
.aurum .mgal__item { grid-column: 1 / -1; margin: 0; }
.aurum .mgal__item img {
  display: block;
  width: 100%;
  height: auto;                /* Originalproportion, kein Beschnitt */
  border-radius: clamp(6px, .6vw, 12px);
}
.aurum .mgal__item figcaption { margin-top: clamp(.75rem, 1.3vw, 1.15rem); }

/* Die Galerie trägt jetzt nur noch das Bildsprache-Paar: einmal groß links,
   einmal höher versetzt rechts. Die Regeln für die frühere Anwendungs-
   Galerie sind entfallen — diese Aufnahmen liegen seit dem Umbau auf der
   Bühne in Abschnitt 21 beziehungsweise im Band darunter. */
.aurum .mgal__a { grid-column: 1 / span 6; }
.aurum .mgal__b { grid-column: 8 / span 5; margin-top: clamp(2rem, 5vw, 5rem); }

/* Paar direkt unter einer Überschrift: enger angebunden */
.aurum .mgal--pair { margin-top: clamp(1.75rem, 3.5vw, 3rem); }

@media (max-width: 900px) {
  .aurum .m-text { grid-column: 1 / -1; }
  .aurum .mgal { row-gap: clamp(1.75rem, 5vw, 2.75rem); }
  .aurum .mgal__a,
  .aurum .mgal__b { grid-column: 1 / -1; margin-top: 0; }
}

/* =========================================================================
   14  OHNE JAVASCRIPT
   =========================================================================
   Die Einblende-Elemente starten mit `opacity: 0` und werden erst per
   IntersectionObserver sichtbar. Ist JavaScript aus oder blockiert, blieb
   die ganze Seite leer. Diese Abfrage greift ausschließlich in diesem Fall
   und zeigt alle Inhalte sofort — mit aktivem JavaScript ändert sie nichts.
   ====================================================================== */
@media (scripting: none) {
  [data-reveal], [data-img-reveal], [data-img-reveal] > *, [data-reveal-now],
  .mask > span, .chain__step, .appscreens__item, .principles li,
  .palette__field, .split__mark, .decision, .finding, .symbol,
  .guide, .mo-shot, .swatch-line,
  .flow__i, .tally__i, .devices__item, .takeaway {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* =========================================================================
   15  ÜBER MICH — Komposition statt Aufzählung
   =========================================================================
   Die Seite bestand aus vier Reihen, in denen der Text jeweils oben klebte.
   Neben dem hohen Porträt blieben dadurch rund 400 px leer, die Spalten 9
   bis 12 waren durchgehend unbenutzt. Alles hier ist auf die Über-mich-Seite
   begrenzt — die Case Studies benutzen dieselben Klassen und bleiben, wie
   sie sind.
   ====================================================================== */

/* --- Haltung als Zitat ---------------------------------------------------
   Derselbe Satz, der auf der Startseite einen eigenen Bildschirm
   beansprucht hat. Hier steht er in Textgröße hinter einer goldenen
   Haarlinie: erkennbar als Zitat, aber ohne die Seite zu übernehmen. */
[data-page="home"] .um-belief { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5.5rem); }
[data-page="home"] .um-belief .grid { align-items: center; row-gap: clamp(1.5rem, 3vw, 2.5rem); }
[data-page="home"] .um-belief__quote {
  grid-column: 1 / span 7;
  align-self: center;
  margin: 0;
  padding-left: clamp(1.1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--gold);
}
[data-page="home"] .um-belief__quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  line-height: 1.42;
  letter-spacing: -.004em;
  color: var(--ink);
  text-wrap: pretty;
}
/* Die Signatur steht nicht mehr klein unter dem Satz, sondern groß rechts
   daneben — sie zeichnet die Aussage, statt sie zu bebildern. */
[data-page="home"] .um-belief__sign {
  grid-column: 9 / span 4;
  align-self: center;
  justify-self: start;
  display: block;
  width: clamp(160px, 17vw, 280px);
  height: auto;
  margin: 0;
  opacity: .92;
}

@media (max-width: 1080px) {
  [data-page="home"] .um-belief__quote { grid-column: 1 / span 8; }
  [data-page="home"] .um-belief__sign  { grid-column: 10 / span 3; }
}
@media (max-width: 760px) {
  [data-page="home"] .um-belief__quote { grid-column: 1 / -1; }
  [data-page="home"] .um-belief__sign  { grid-column: 1 / -1; width: clamp(140px, 42vw, 200px); }
}

/* ==========================================================================
   16 FARBWELT WEINROT + DURCHGEHENDER HINTERGRUND
   Gilt nur für Startseite und Über mich. Die drei Case Studies behalten
   vorerst ihre bisherige Farbwelt — deshalb sind alle Werte hier über
   `[data-page]` gebunden und nicht in `:root` geändert.
   ========================================================================== */

[data-page="home"] {
  /* Weinrot ersetzt das Dunkelblau. Der Ton liegt in der Helligkeit dicht
     am bisherigen Navy, deshalb bleiben alle Kontraste auf den dunklen
     Flächen erhalten. */
  --navy:        #5E1F2A;
  --navy-deep:   #4A161F;
  --ink:         #5E1F2A;   /* Überschriften; Fließtext bleibt --body */

  /* Helle Töne auf Weinrot: warm statt bläulich, sonst beißt es sich. */
  --on-navy:     #F7F1E9;
  --on-navy-mut: #D9BBA6;
  --line-navy:   rgba(247,241,233,.18);

  /* Der Wolkengrund ist dunkler als Creme. Gold und das gedeckte Grau
     lagen darauf gemessen bei 3,2 bis 4,4:1 und damit unter AA — beide
     sind deshalb auf diesen Seiten nachgedunkelt. Die Werte sind an den
     gerenderten Pixeln geprüft, nicht geschätzt. */
  --gold-ink:    #63461B;
  --muted:       #4C4840;
  --pj-gold:     #63461B;

  /* Der Hintergrund liegt auf dem Body, nicht fest im Fenster: dadurch
     wandert man beim Scrollen durch das Bild, statt dass es stehen bleibt.
     Genau das macht den fließenden Übergang zwischen den Abschnitten.
     `cover` hält das Seitenverhältnis — das Bild wird nicht verzerrt,
     sondern oben und unten beschnitten. Die Cremefarbe darunter greift
     nur, falls das Bild nicht lädt. */
  background-color: var(--cream);
  background-image: url("../img/bg-clouds.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Die Abschnitte geben ihre eigenen Flächen auf, damit der Hintergrund
   durchläuft. Ohne das entstünde genau die Treppe, die verschwinden soll. */[data-page="home"] .projects,
[data-page="home"] .about,
[data-page="home"] .bio,
[data-page="home"] .skills,
[data-page="home"] .um-belief {
  background: transparent;
  background-image: none;
}

/* Die Kopfzeile bleibt eine eigene Fläche — sonst läuft die Navigation
   über wechselnde Bildtöne. Sie ist nur durchlässiger als vorher. */
[data-page="home"] .header::before {
  background: rgba(250,247,241,.74);
}

/* Goldakzente: die Haarlinien, die vorher in Beige lagen, tragen jetzt
   den Goldton. Sparsam — nur die Linien, nicht die Flächen. */
[data-page="home"] .eyebrow::after {
  background: linear-gradient(to right, var(--gold), rgba(184,148,95,0));
  max-width: 160px;
}
[data-page="home"] .rule {
  background: linear-gradient(to right,
    rgba(184,148,95,0), rgba(184,148,95,.55) 22%, rgba(184,148,95,.55) 78%, rgba(184,148,95,0));
}
[data-page="home"] .footer__contact li { border-color: rgba(220,192,140,.28); }

/* ==========================================================================
   17 ÜBER MICH — Biografie in Karten
   Links die Person, rechts drei Karten in fester Folge: Bildung,
   Berufserfahrung, Werkzeuge. Wer die Seite öffnet, hat die Eckdaten in
   einem Blick — ohne zu scrollen und ohne Fließtext zu lesen.

   Die Karten liegen durchscheinend auf dem Wolkengrund. Deshalb kein
   deckendes Creme: sonst wäre der fließende Übergang wieder weg.
   ========================================================================== */

/* --- Karte: eine Form für alles auf dieser Seite ------------------------- */
[data-page="home"] .bio__person { display: flex; flex-direction: column; }
[data-page="home"] .card {
  position: relative;
  background: rgba(250, 247, 241, .58);
  -webkit-backdrop-filter: saturate(125%) blur(10px);
          backdrop-filter: saturate(125%) blur(10px);
  border: 1px solid rgba(184, 148, 95, .30);
  border-radius: 14px;
  padding: clamp(1.2rem, 1.9vw, 1.8rem);
}
[data-page="home"] .card__key {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
  font-size: var(--fs-label);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
}
[data-page="home"] .card__letter {
  display: grid;
  place-items: center;
  width: 1.55rem; height: 1.55rem;
  border: 1px solid rgba(184, 148, 95, .5);
  border-radius: 50%;
  font-size: .68rem;
  letter-spacing: 0;
  color: var(--ink);
}

/* --- Linke Spalte -------------------------------------------------------- */
[data-page="home"] .bio { padding-block: clamp(4.5rem, 9vw, 8.5rem) clamp(2.5rem, 5vw, 4rem); }
/* Die Porträtkarte wandert beim Scrollen an der rechten Spalte entlang.
   Beide beginnen auf derselben Oberkante; am Ende steht die Unterkante
   der Karte auf der Unterkante der Werkzeug-Karte.

   Bewusst kein `position: sticky`: sticky bleibt am oberen Fensterrand
   kleben und springt dann los. Hier hängt der Weg direkt am Scrollstand —
   die Karte gleitet langsamer als die Seite und kommt genau am Ende an. */
/* Eigenes Raster statt der zwölf Spalten: das Verhältnis 37,5 zu 62,5
   liegt zwischen zwei Rasterspalten (5/12 wären 41,7 %, 4/12 nur 33,3 %)
   und ist mit ganzen Spalten nicht erreichbar. Die Kopfzeile darüber
   spannt weiterhin über beide.
   Der Abstand lag bei 100 px (1918) bzw. 87 px (1440) — Rinne plus
   Außenabstand. Er kommt jetzt aus einer einzigen Angabe und liegt rund
   ein Drittel tiefer: 66 px bzw. 52 px. */
[data-page="home"] .bio__grid {
  grid-template-columns: 37.5% 1fr;
  column-gap: clamp(1.75rem, 3.6vw, 4.125rem);
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
[data-page="home"] .bio__head { grid-column: 1 / -1; }
[data-page="home"] .bio__left  {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-self: start;
  /* Die Karte wandert beim Scrollen an der rechten Spalte entlang.
     Den Weg rechnet JavaScript aus (Block 16 in main.js); hier steht nur
     der Ausgangszustand. `will-change` hält die Fläche auf einer eigenen
     Ebene, sonst flimmert der Wolkengrund darunter. */
  will-change: transform;
}
[data-page="home"] .bio__right {
  grid-column: 2;
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

[data-page="home"] .bio__claim {
  margin: clamp(.8rem, 1.4vw, 1.1rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.35;
  color: var(--body);
  max-width: 26ch;
}

[data-page="home"] .bio__figure { margin: 0 0 clamp(.85rem, 1.5vw, 1.2rem); }
[data-page="home"] .bio__figure img {
  width: 100%;
  height: auto;
  /* Querformat statt hochformatig: die Karte muss samt Abstand nach oben
     kürzer sein als das Fenster, damit sie kleben kann. Bei 3:2 passt sie
     auch auf Laptops mit rund 800 px Fensterhöhe. */
  /* Format und Ausschnitt sind am Bild gerechnet: der Haaransatz liegt bei
     15,1 % der Bildhöhe. 3:2 zeigt rund ein Sechstel mehr vom Bild als
     16:9 — Kopf, Haare, Schulter und Oberkörper stehen dadurch
     natürlicher. Weiter kann das Format nicht gehen, ohne dass die Karte
     zu hoch für das Fenster wird und das Mitwandern ausfällt. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: 10px;
}
/* Notausgang für flache Fenster: 16:9 statt 3:2 macht die Karte rund 50 px
   kürzer, ohne sie schmaler zu machen. Nur so bleibt das Mitwandern auf
   Notebooks mit 800 bis 830 px Fensterhöhe möglich. Gesetzt wird die Klasse
   von JavaScript, nachdem gemessen wurde — nicht nach geratener Fensterhöhe. */
[data-page="home"] .bio__left.is-kompakt .bio__figure img { aspect-ratio: 16 / 9; }
[data-page="home"] .bio__ident {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
[data-page="home"] .bio__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
}
[data-page="home"] .bio__role {
  margin: .45rem 0 0;
  font-size: var(--fs-small);
  color: var(--muted);
}
[data-page="home"] .bio__lead {
  margin-top: clamp(.8rem, 1.4vw, 1.1rem);
  padding-top: clamp(.8rem, 1.4vw, 1.1rem);
  border-top: 1px solid rgba(184, 148, 95, .22);
}
[data-page="home"] .bio__lead p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--body);
}
[data-page="home"] .bio__lead p + p { margin-top: .75em; }

/* --- Einträge in den rechten Karten -------------------------------------- */
[data-page="home"] .entry-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.4rem);
}
[data-page="home"] .entry + .entry {
  padding-top: clamp(1rem, 1.8vw, 1.4rem);
  border-top: 1px solid rgba(184, 148, 95, .22);
}
/* Berufserfahrung als Folge: eine Linie mit Punkten je Station. */
[data-page="home"] .entry-list--track { padding-left: 1.35rem; }
[data-page="home"] .entry-list--track .entry { position: relative; }
[data-page="home"] .entry-list--track .entry::before {
  content: "";
  position: absolute;
  left: -1.35rem; top: .5em;
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--gold);
}
[data-page="home"] .entry-list--track .entry::after {
  content: "";
  position: absolute;
  left: calc(-1.35rem + .19rem); top: 1.1em; bottom: -1.4rem;
  width: 1px;
  background: rgba(184, 148, 95, .28);
}
[data-page="home"] .entry-list--track .entry:last-child::after { display: none; }
/* Die fertigen Einträge bekommen später diese drei Zeilen. */
[data-page="home"] .entry__role {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.2;
  color: var(--ink);
}
[data-page="home"] .entry__meta {
  margin: .3rem 0 0;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-page="home"] .entry__text {
  margin: .6rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--body);
}
[data-page="home"] .entry__text + .entry__text { margin-top: .65rem; }
/* Abschlussnote: eigene Zeile, etwas kräftiger als der Fließtext, aber
   ohne Fläche, Rahmen oder Versalien — sie soll sachlich lesbar sein und
   nicht wie eine Auszeichnung wirken. */
[data-page="home"] .entry__grade {
  margin: .55rem 0 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
}
[data-page="home"] .entry .todo { margin: 0; }
[data-page="home"] .entry__todo { font-style: italic; opacity: .85; text-transform: none; letter-spacing: .02em; }

/* --- Werkzeuge ----------------------------------------------------------- */
/* Alle Werkzeuge stehen auf dem Desktop in einer Zeile. Dafür sind
   Innenabstand, Rinne und Logohöhe knapper gefasst als zuvor — gerechnet
   gegen die Summe der sieben Elemente in der schmalsten Desktop-Breite,
   ab der die Spalten noch nebeneinander liegen. Umbrechen darf die Reihe
   trotzdem: unterhalb von 1080 px stapeln sich die Spalten ohnehin. */
[data-page="home"] .chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: clamp(.4rem, .62vw, .6rem);
}
[data-page="home"] .chip {
  display: flex; align-items: center;
  padding: .42rem clamp(.5rem, .78vw, .72rem);
  border: 1px solid rgba(184, 148, 95, .28);
  border-radius: 50vw;
  background: rgba(250, 247, 241, .5);
}
[data-page="home"] .chip img {
  height: clamp(13px, 1.05vw, 16px);
  width: auto;
  opacity: .82;
}
/* Werkzeuge ohne eigenes Logo stehen als Wort — auf derselben optischen
   Höhe wie die Bildmarken daneben. */
[data-page="home"] .chip--text {
  font-size: .74rem;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--body);
  padding-block: .5rem;
}

/* --- Fähigkeiten --------------------------------------------------------- */
[data-page="home"] .skills { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
[data-page="home"] .skills__head {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
[data-page="home"] .eyebrow--center { justify-content: center; }
[data-page="home"] .eyebrow--center::after { display: none; }
[data-page="home"] .skills__title {
  margin: clamp(.7rem, 1.2vw, 1rem) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.018em;
  color: var(--ink);
}
/* Sechs Spalten als Raster: die ersten drei Karten nehmen je zwei, die
   beiden unteren je drei. Dadurch sind die unteren beiden exakt gleich
   breit — mit `1fr`-Spalten wäre eine von beiden zwangsläufig breiter. */
[data-page="home"] .skills__grid {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
[data-page="home"] .skill { grid-column: span 2; }
[data-page="home"] .skill:nth-child(4),
[data-page="home"] .skill:nth-child(5) { grid-column: span 3; }
/* Nummer oben, Text unten — die Karten teilen dadurch dieselbe Grundlinie,
   unabhängig davon, wie lang der jeweilige Satz ist. */
[data-page="home"] .skill {
  display: flex;
  flex-direction: column;
  /* Kürzere Texte brauchen weniger Karte: vorher standen unter zwei Zeilen
     noch rund 130 px Luft. Die Mindesthöhe hält die Reihe trotzdem auf einer
     Linie, auch wenn eine Karte eine Zeile mehr hat. */
  min-height: clamp(10rem, 12.5vw, 12rem);
}
[data-page="home"] .skill__n {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .24em;
  font-weight: 600;
  color: var(--gold-ink);
  margin-bottom: auto;
  padding-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}
[data-page="home"] .skill__name {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ink);
}
[data-page="home"] .skill__note {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--body);
  max-width: 46ch;
}

@media (max-width: 1080px) {
  [data-page="home"] .bio__grid { grid-template-columns: 42% 1fr; }
  [data-page="home"] .skills__grid { grid-template-columns: repeat(2, 1fr); }
  [data-page="home"] .skill,
  [data-page="home"] .skill:nth-child(4),
  [data-page="home"] .skill:nth-child(5) { grid-column: span 1; }
  [data-page="home"] .skill:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  [data-page="home"] .bio__grid { grid-template-columns: 1fr; }
  [data-page="home"] .bio__left,
  [data-page="home"] .bio__right { grid-column: 1; }
  /* Gestapelt bewegt sich nichts mehr — JavaScript schaltet den Weg dort
     ohnehin ab; diese Zeile fängt den Fall ab, dass beim Verkleinern des
     Fensters noch eine Verschiebung stand. */
  [data-page="home"] .bio__left { transform: none !important; }
  [data-page="home"] .skills__grid { grid-template-columns: 1fr; }
  [data-page="home"] .skill,
  [data-page="home"] .skill:nth-child(4),
  [data-page="home"] .skill:nth-child(5) { grid-column: 1 / -1; }
  [data-page="home"] .bio__claim { max-width: none; }
}

/* ==========================================================================
   18 MOTION-SPRACHE FÜR DIE CASE STUDIES
   --------------------------------------------------------------------------
   Eine gemeinsame Sprache für alle Projekte: gleiches Easing, gleiche
   Größenordnung der Zeiten, gleiche Zurückhaltung. Die konkrete Bewegung
   darf sich je Projekt unterscheiden — AURUM ruhig und präzise, später MONA
   spielerischer, STRAUCH strukturierter, MOMent interface-nah. Geteilt wird
   das Verhalten, nicht die Choreografie.

   Das Easing läuft ohne Überschwingen aus: nichts federt, nichts kippt zurück.
   Die Zeiten sind bewusst lang — Bewegung soll bemerkt, aber nicht bestaunt
   werden.
   ========================================================================== */
:root {
  --mo-ease: cubic-bezier(.22, 1, .36, 1);
  --mo-fast: 500ms;   /* kleine Elemente, Zustandswechsel      */
  --mo-base: 700ms;   /* Standard: Einblendungen, Überblendungen */
  --mo-slow: 900ms;   /* große Flächen, Bühnenwechsel          */
}

/* ==========================================================================
   19 AURUM · SIGNATURE MOMENT 01 — AUS A UND U WIRD DAS SIGNET
   --------------------------------------------------------------------------
   Die Herleitung des Zeichens war bisher ein Satz Text neben einer
   Konstruktionszeichnung. Sie ist jetzt zu sehen: zwei Buchstaben, die
   zusammenrücken, und ein Zeichen, das daraus entsteht.

   GRUNDZUSTAND (ohne JavaScript, bei reduzierter Bewegung, auf Mobil):
   die drei Stufen stehen nebeneinander in einer Reihe. Vollständig
   verständlich, ohne dass sich etwas bewegen muss.

   BEWEGT (`is-motion`, gesetzt von Block 17 in main.js):
   dieselben drei Stufen liegen übereinander auf einer klebenden Bühne und
   lösen einander entlang des Scrollfortschritts `--p` ab. Alle Werte unten
   rechnen mit `--p`; bewegt werden nur transform und opacity.
   ========================================================================== */
.aurum .au { grid-column: 1 / -1; }

.aurum .au__stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.75rem);
  align-items: center;
}
.aurum .au__state {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.aurum .au__state img { width: 100%; height: 100%; object-fit: contain; }

/* Die beiden Buchstaben stehen in der Logoschrift — es ist dieselbe Schrift,
   aus der die Wortmarke gesetzt ist. */
.aurum .au__glyph {
  font-family: "Dolce Vita", var(--font-display), serif;
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 1;
  color: var(--au-navy);
}
/* Das U als oben offenes Rechteck. Alle Maße in em, damit es jeder
   Schriftgröße folgt: die Höhe entspricht der Versalhöhe des A daneben,
   die Strichstärke dem Stamm der Logoschrift. */
.aurum .au__glyph--u {
  display: block;
  /* Gemessen am A daneben: dessen Versalhöhe ist 0,70 em, und seine
     Grundlinie liegt 0,179 em über der Unterkante des Textkastens
     (Font-Ascent 101, Descent 24 bei 120 px Schriftgröße). Genau um diesen
     Betrag wird das U angehoben, damit beide auf einer Linie stehen.
     Die Breite folgt dem echten Zeichen: dort ist der goldene Rahmen mit
     602 zu 580 Pixeln nahezu quadratisch. */
  width: .68em;
  height: .70em;
  border: .055em solid currentColor;
  border-top: 0;
  margin-bottom: .179em;
}
.aurum .au__state--letters {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.75rem, 2.5vw, 2rem);
}

/* Bildunterschriften der drei Stufen. */
.aurum .au__steps {
  list-style: none;
  margin: clamp(1.75rem, 3.5vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.75rem);
}
.aurum .au__step p:last-child {
  margin: .5rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  max-width: 34ch;
}

@media (max-width: 700px) {
  .aurum .au__stage,
  .aurum .au__steps { grid-template-columns: 1fr; }
  .aurum .au__state { aspect-ratio: 3 / 2; }
  .aurum .au__step { padding-top: .25rem; }
}

/* --- Bewegter Zustand ---------------------------------------------------- */
.aurum .au.is-motion {
  /* Sicherheitswert: sollte das Skript die Klasse setzen und danach
     aussetzen, steht der Endzustand — das fertige Zeichen. Nie ein halber
     Zustand und nie eine leere Fläche. Im Normalfall überschreibt das
     Skript diesen Wert sofort mit dem echten Fortschritt. */
  --p: 1;
  /* Scrollweg der Bühne. Drei Stufen, jede bekommt rund 40 % einer
     Fensterhöhe — lang genug, dass nichts hetzt, kurz genug, dass niemand
     wartet. */
  height: 215vh;
  position: relative;
}
.aurum .au.is-motion .au__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.aurum .au.is-motion .au__stage {
  display: block;
  position: relative;
  width: clamp(240px, 38vh, 460px);
  aspect-ratio: 1 / 1;
}
.aurum .au.is-motion .au__state {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  will-change: transform, opacity;
}

/* Stufe 1 · die beiden Buchstaben.
   Das A steht von Anfang an — die Bühne ist nie leer. Das U tritt kurz
   darauf hinzu, dann rücken beide zusammen, bis sie einander überlagern.
   Die Zahl hinter jeder Klammer ist die Steilheit der Blende: 13 bedeutet,
   dass der Wechsel über rund 8 % des Scrollwegs läuft. */
.aurum .au.is-motion .au__glyph {
  font-size: clamp(3rem, 15vh, 7.5rem);
  transition: none;
}
/* Auseinander bei 0, überlagert bei 0,42. Die 514 px sind der Weg von
   −190 px bis +26 px, geteilt durch 0,42. */
.aurum .au.is-motion .au__glyph--a {
  transform: translateX(calc(-190px + clamp(0, var(--p), 0.42) * 514px));
}
.aurum .au.is-motion .au__glyph--u {
  transform: translateX(calc(190px - clamp(0, var(--p), 0.42) * 514px));
  opacity: clamp(0, calc((var(--p) - .04) * 13), 1);
}
/* Die Buchstabenebene tritt ab 0,44 zurück, während das Zeichen kommt. */
.aurum .au.is-motion .au__state--letters { opacity: clamp(0, calc((0.52 - var(--p)) * 13), 1); }

/* Stufe 2 · das A steht im U. Kommt, während die Buchstaben gehen. */
.aurum .au.is-motion .au__state--au {
  opacity: calc(
    clamp(0, calc((var(--p) - 0.44) * 13), 1) * clamp(0, calc((0.80 - var(--p)) * 13), 1));
  transform: scale(calc(0.96 + clamp(0, calc((var(--p) - 0.44) * 13), 1) * 0.04));
}

/* Stufe 3 · das fertige Signet. Bleibt bis zum Ende stehen. */
.aurum .au.is-motion .au__state--mark {
  opacity: clamp(0, calc((var(--p) - 0.72) * 13), 1);
}

/* Die Bildunterschriften folgen demselben Fortschritt: die jeweils gültige
   Stufe steht vorn, die anderen bleiben lesbar, treten aber zurück. */
.aurum .au.is-motion .au__steps {
  margin: 0;
  width: min(100%, 62rem);
}
.aurum .au.is-motion .au__step { opacity: .34; }
.aurum .au.is-motion .au__step--1 { opacity: calc(.34 + .66 * clamp(0, calc((0.46 - var(--p)) * 12), 1)); }
.aurum .au.is-motion .au__step--2 { opacity: calc(.34 + .66 * min(
    clamp(0, calc((var(--p) - 0.34) * 12), 1), clamp(0, calc((0.82 - var(--p)) * 12), 1))); }
.aurum .au.is-motion .au__step--3 { opacity: calc(.34 + .66 * clamp(0, calc((var(--p) - 0.70) * 12), 1)); }

/* ==========================================================================
   20 SEITENDURCHLAUF IM GERÄT (AURUM · Signature Moment 02)
   --------------------------------------------------------------------------
   Die Website soll im Gerät zu sehen sein, nicht daneben. Statt eines
   Videoclips läuft die Seite selbst durch den Rahmen: die echten Abschnitte
   liegen als eine Bahn übereinander, die einmal ruhig durchgescrollt wird —
   Einstieg, dann die tragenden Abschnitte, zuletzt der Kontaktabschnitt.

   Bewusst einmal und nicht in Schleife: eine endlos laufende Fläche zieht
   dauerhaft Aufmerksamkeit und kostet dauerhaft Rechenzeit. So bleibt am
   Ende der Abschnitt stehen, auf den es ankommt.

   Ohne Bewegung — reduzierte Bewegung, kein JavaScript, schnelles Scrollen —
   steht der Einstieg im Rahmen. Das ist ein vollständiges Bild, keine leere
   Fläche und kein halber Zustand.
   ========================================================================== */
.pgs {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Unter der Browserleiste des Laptops beginnen, wie zuvor das Video. */
.dm__screen .pgs { top: 5.2%; height: 94.8%; }

/* Die Bahn muss ihre Originalproportion behalten — nur dann entspricht ein
   Schritt genau einem Abschnitt. Die Geräteregeln weiter oben setzen für
   Bilder im Rahmen `height: 100%` und `object-fit: cover`; beides wird hier
   gezielt wieder aufgehoben. Deshalb die längeren Selektoren. */
.dm__screen .pgs__strip,
.dm__display .pgs__strip,
.pgs__strip {
  position: absolute;
  top: 0; left: 0; right: auto; bottom: auto;
  width: 100%;
  height: auto;
  object-fit: fill;
  display: block;
  will-change: transform;
}

/* Ruhen, Weiterziehen, Ruhen. Die Haltezeiten sind länger als die Wege:
   man soll den Abschnitt lesen können, nicht die Bewegung bestaunen. */
@keyframes au-pgs-5 {
  0%,   11% { transform: translateY(0); }
  19%,  30% { transform: translateY(-20%); }
  38%,  49% { transform: translateY(-40%); }
  57%,  68% { transform: translateY(-60%); }
  76%, 100% { transform: translateY(-80%); }
}
@keyframes au-pgs-3 {
  0%,   16% { transform: translateY(0); }
  26%,  45% { transform: translateY(-33.3333%); }
  55%, 100% { transform: translateY(-66.6667%); }
}
.pgs.is-running .pgs__strip--5 { animation: au-pgs-5 14s var(--mo-ease) forwards; }
.pgs.is-running .pgs__strip--3 { animation: au-pgs-3 14s var(--mo-ease) forwards; }

/* Schrittgesteuerte Variante: nicht die Zeit bestimmt die Stelle in der
   Seite, sondern der Schritt, den man gerade liest. `--i` setzt Block 09 in
   main.js. Die Höhe eines Abschnitts ist 100 % geteilt durch ihre Anzahl —
   deshalb zwei Regeln statt einer allgemeinen. */
.pgs__strip--5[data-seq-strip] {
  transform: translateY(calc(var(--i, 0) * -20%));
  transition: transform var(--mo-slow) var(--mo-ease);
}
.pgs__strip--3[data-seq-strip] {
  transform: translateY(calc(var(--i, 0) * -33.3333%));
  /* Das Telefon zieht kurz nach — das entspricht dem Blickverlauf und
     vermeidet, dass zwei Flächen gleichzeitig losfahren. */
  transition: transform var(--mo-slow) var(--mo-ease) 140ms;
}

@media (prefers-reduced-motion: reduce) {
  .pgs.is-running .pgs__strip--5,
  .pgs.is-running .pgs__strip--3 { animation: none; }
  .pgs__strip--5[data-seq-strip],
  .pgs__strip--3[data-seq-strip] { transition: none; transform: none; }
}

/* ==========================================================================
   21 AURUM · SIGNATURE MOMENT 03 — DIE ANWENDUNGEN AUF EINER BÜHNE
   --------------------------------------------------------------------------
   Vorher standen sechs Aufnahmen in voller Breite untereinander: rund 2900 px
   Seite, in denen man fünfmal dasselbe Prinzip noch einmal gezeigt bekam.
   Jetzt liegen sie in einer Komposition nebeneinander und bauen sich beim
   Scrollen nacheinander auf.

   Wichtig: es ist keine Slideshow. Nichts wird ersetzt, nichts verschwindet.
   Die Reihenfolge ordnet nur, in welcher Folge man die Anwendungen liest —
   am Ende steht das vollständige Bild.

   GRUNDZUSTAND (ohne JavaScript, reduzierte Bewegung, schmale Geräte):
   dieselben Aufnahmen in einem ruhigen Raster, alle sichtbar.
   ========================================================================== */
.aurum .appstage { grid-column: 1 / -1; }

/* --- Grundzustand: zweispaltiges Raster ---------------------------------- */
.aurum .appstage__board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.aurum .appstage__item { margin: 0; }
.aurum .appstage__item--welt { grid-column: 1 / -1; }
.aurum .appstage__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.aurum .appstage__item figcaption { margin-top: clamp(.7rem, 1.2vw, 1.05rem); }

@media (max-width: 700px) {
  .aurum .appstage__board { grid-template-columns: 1fr; }
}

/* --- Bewegter Zustand: freie Komposition auf einer klebenden Fläche ------- */
.aurum .appstage.is-motion {
  --p: 1;   /* Sicherheitswert, siehe Abschnitt 19: ohne Skript steht die
               vollständige Komposition */
  /* Fünf Anwendungen, jede bekommt rund 25 % einer Fensterhöhe. */
  height: 215vh;
  position: relative;
}
.aurum .appstage.is-motion .appstage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-content: center;
}
/* Die Bühne hatte `aspect-ratio: 16/9` UND `max-height: 82vh`. Sobald die
   Höhe griff, blieb die Breite bei 100 % — das Seitenverhältnis kippte, die
   Fläche wurde flacher als geplant, und alle in Prozent gesetzten
   Oberkanten rutschten zusammen. Dadurch lagen Aufnahmen übereinander und
   Bildunterschriften verschwanden darunter.
   Jetzt bestimmt die Höhe die Breite: das Verhältnis stimmt immer, und die
   Plätze unten stimmen damit auch. */
.aurum .appstage.is-motion .appstage__board {
  display: block;
  position: relative;
  /* 16:10 statt 16:9 — zwei Reihen 3:2-Aufnahmen brauchen etwas mehr Höhe,
     sonst müssten die Aufnahmen so schmal werden, dass rechts ein Loch
     bleibt. Die Höhe begrenzt die Breite, damit das Verhältnis nie kippt. */
  width: min(100%, calc(78vh * 16 / 10));
  aspect-ratio: 16 / 10;
  margin: 0 auto;
}
/* Die Plätze sind gesetzt, nicht gestreut: jede Aufnahme behält ihre
   Originalproportion (die Höhe folgt aus der Breite), nichts wird
   beschnitten, nichts überlappt. Die Werte sind Prozent der Bühnenbreite
   beziehungsweise -höhe. */
.aurum .appstage.is-motion .appstage__item {
  position: absolute;
  margin: 0;
  /* Auftritt: 0,20 Fortschritt Abstand zwischen den Anwendungen, Blende
     über rund 0,10. Der Vorlauf von 0,12 sorgt dafür, dass die erste
     Aufnahme schon steht, wenn die Bühne ankommt — sie ist nie leer. */
  --start: calc(var(--n) * 0.20 - 0.12);
  --an: clamp(0, calc((var(--p) - var(--start)) * 10), 1);
  opacity: var(--an);
  transform: translateY(calc((1 - var(--an)) * 22px));
  will-change: transform, opacity;
}
/* Die Plätze sind gerechnet, nicht geschätzt. Jede Aufnahme ist ein
   3:2-Format; auf einer Bühne im Verhältnis 16:10 ist ihre Bildhöhe das
   1,067-fache ihrer Breite, gemessen in Prozent der Bühnenhöhe. Dazu kommen
   5,5 % für die Bildunterschrift. Daraus ergeben sich die Unterkanten:

     Obere Reihe   Empfang     4 % + 25,6 + 5,5 = 35,1 %
                   Exposé      0 % + 34,1 + 5,5 = 39,6 %
                   Objektstr.  6 % + 27,7 + 5,5 = 39,2 %
     Untere Reihe  Markenwelt 44 % + 44,8 + 5,5 = 94,3 %
                   Welcome    50 % + 36,3 + 5,5 = 91,8 %

   Zwischen den Reihen bleiben 4,4 % Luft, seitlich 6 bis 8 %. Nichts
   überlagert sich, jede Bildunterschrift steht frei, und die Komposition
   nutzt die Bühne von 2 % bis 96 % Breite aus.
   Wer eine Breite ändert, muss die Oberkante mitrechnen. */
.aurum .appstage.is-motion .appstage__item--office  { left:  2%; top:  4%; width: 24%; }
.aurum .appstage.is-motion .appstage__item--expose  { left: 32%; top:  0%; width: 32%; }
.aurum .appstage.is-motion .appstage__item--mag     { left: 70%; top:  6%; width: 26%; }
.aurum .appstage.is-motion .appstage__item--welt    { left:  6%; top: 44%; width: 42%; }
.aurum .appstage.is-motion .appstage__item--welcome { left: 56%; top: 50%; width: 34%; }

/* Auf der Bühne stehen die Bildunterschriften klein unter der jeweiligen
   Aufnahme — sie sollen benennen, nicht erklären. Einzeilig, damit der
   gerechnete Platz von 5,5 % nicht gesprengt wird. */
.aurum .appstage.is-motion .appstage__item figcaption {
  margin-top: .45rem;
  font-size: .72rem;
  line-height: 1.3;
  white-space: nowrap;
}

/* --- Die drei Markenfassungen nebeneinander ------------------------------- */
/* Ersetzt die frühere klebende Sequenz. Gleiche Inhalte, ein Drittel der
   Höhe — und für schnelles Scrollen in einem Blick erfassbar. Die Plattform
   dahinter hält alle drei Fassungen optisch auf derselben Grundfläche,
   obwohl ihre Proportionen sehr unterschiedlich sind. */
.aurum .marks {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
/* Alle drei Flächen sind exakt gleich hoch. Vorher stand `width: 100%` auf
   den Bildern: die nahezu quadratische Bildmarke wurde dadurch höher als
   die beiden querformatigen Fassungen und schob ihre Bildunterschrift nach
   unten — die drei Texte standen im Zickzack. Jetzt begrenzt die Fläche die
   Höhe, das Bild passt sich ein (`min-height: 0` verhindert, dass ein
   Rasterelement seine Zeile aufzieht). */
.aurum .marks__plate {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  background: var(--au-soft);
  border-radius: 4px;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  overflow: hidden;
}
.aurum .marks__plate img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
/* Die Bildmarke ist fast quadratisch, die beiden anderen Fassungen sind
   breite Querformate. Damit alle drei optisch gleich schwer wirken, bekommt
   das Signet etwas weniger Höhe — sonst dominiert es die Reihe. */
.aurum .marks__item:first-child .marks__plate img { max-height: 82%; }
/* Die Bildunterschriften stehen dadurch auf einer Linie. */
.aurum .marks__item { display: flex; flex-direction: column; }
.aurum .marks__item p:last-child {
  margin: .5rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  max-width: 34ch;
}
@media (max-width: 760px) {
  .aurum .marks { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.75rem); }
  .aurum .marks__plate { aspect-ratio: 16 / 9; }
}

/* Die Geräte-Komposition sitzt jetzt in der klebenden Spalte der
   Website-Story. Der weiche Schatten des Telefons reicht rund 30 px über
   das Gerät hinaus; auf mittleren Breiten ragte er dadurch über den
   Fensterrand und erzeugte einen Querbalken. Die Breite steht deshalb hier
   im Stylesheet statt als Inline-Angabe im Markup — nur so lässt sie sich
   je Fensterbreite anpassen, ohne den Schatten zu beschneiden. */
.aurum .dm--webstory { --dm-w: min(100%, 880px); margin-inline: auto; }
@media (max-width: 760px) {
  .aurum .dm--webstory { --dm-w: 88%; }
}

/* Ruhige Linie statt eines weiteren Vollbilds vor dem Rückblick. Sie steht
   auf der Breite des Satzspiegels und ist bewusst schwach — sie trennt,
   ohne einen neuen Abschnitt anzukündigen. */
.aurum .cs-rule {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  background: linear-gradient(to right,
    rgba(184, 148, 95, 0), rgba(184, 148, 95, .45) 20%,
    rgba(184, 148, 95, .45) 80%, rgba(184, 148, 95, 0));
}

/* ==========================================================================
   22 MONA · SIGNATURE MOMENT 01 — AUS DEM ZEICHEN WIRD EIN SYSTEM
   --------------------------------------------------------------------------
   MONA bewegt sich anders als AURUM. Dieselbe Sprache — gleiches Easing,
   gleiche Zeiten, gleiche Zurückhaltung — aber weicher: die Teile kommen
   nicht aus der Geraden herein, sondern wachsen leicht auf und legen sich an
   ihren Platz. Nichts federt, nichts dreht sich, nichts hüpft.

   GRUNDZUSTAND (ohne JavaScript, reduzierte Bewegung, schmale Geräte):
   die vier Stufen des Zeichens nebeneinander, darunter Farbwelt, Symbole und
   Pattern. Alles sichtbar, alles lesbar, nur ohne Bewegung.

   BEWEGT: dieselben Teile auf einer klebenden Bühne. Erst löst die Marke
   einander ab, dann treten Farbwelt, Symbole und Pattern hinzu.
   ========================================================================== */
/* Die Markenabbildungen liegen auf ihrem eigenen Cremeton. Auf der etwas
   wärmeren Kapitelfläche zeichneten sich ihre Bildkästen als hellere
   Rechtecke ab. Der Abschnitt bekommt deshalb denselben Ton — dieselbe
   Farbe, die zuvor schon die Logo-Fläche trug. */
.mona .chapter--brand { background: var(--mona-cream); }
.mona .sysrow--intro { align-items: start; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.mona .sysrow__lead--note { align-self: end; }
.mona .bsys { grid-column: 1 / -1; }

/* --- Grundzustand -------------------------------------------------------- */
.mona .bsys__mark {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: end;
}
.mona .bsys__state { margin: 0; text-align: center; }
.mona .bsys__state img { width: 100%; height: auto; max-height: 190px; object-fit: contain; }
.mona .bsys__state figcaption { margin-top: clamp(.7rem, 1.2vw, 1rem); }
.mona .bsys__part { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mona .bsys__part .label { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.mona .bsys__pattern img { width: 100%; height: auto; border-radius: 8px; }
.mona .bsys__steps {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
}
.mona .bsys__step p:last-child {
  margin: .5rem 0 0; font-size: var(--fs-small); line-height: 1.7; max-width: 32ch;
}
/* Im Grundzustand stehen die Farbfelder und Symbole ohne Einblendung da —
   sonst blieben sie unsichtbar, wenn kein Beobachter sie freischaltet. */
.mona .bsys .swatch-line,
.mona .bsys .symbol { opacity: 1; transform: none; transition: none; }
.mona .bsys .swatch-line:first-of-type { border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .mona .bsys__mark { grid-template-columns: repeat(2, 1fr); }
  .mona .bsys__steps { grid-template-columns: 1fr; }
}

/* --- Bewegter Zustand ---------------------------------------------------- */
.mona .bsys.is-motion {
  --p: 1;              /* Sicherheitswert: ohne Skript steht das ganze System */
  height: 230vh;       /* vier Stufen des Zeichens plus drei Systemteile */
  position: relative;
}
.mona .bsys.is-motion .bsys__sticky {
  position: sticky; top: 0; height: 100vh;
  /* Die Kopfzeile liegt fest über der Seite. Ohne diesen Abstand lief die
     Konstruktionszeichnung — als einziges quadratisches Motiv der Reihe —
     oben darunter und wurde angeschnitten. */
  box-sizing: border-box;
  padding-top: clamp(3.5rem, 8vh, 6.5rem);
  display: grid; align-content: center; justify-items: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.mona .bsys.is-motion .bsys__board {
  position: relative;
  /* 60vh ließen unter dem Zeichen rund 190 px leere Fläche stehen, bevor die
     Schritte begannen. 48vh halten die Bühne beisammen; die Systemteile
     sitzen prozentual und wandern unverändert mit. */
  width: min(100%, calc(48vh * 16 / 10));
  aspect-ratio: 16 / 10;
}
.mona .bsys.is-motion .bsys__part,
.mona .bsys.is-motion .bsys__mark { position: absolute; margin: 0; }

/* Die Marke steht in der Mitte. Zuerst groß — sie ist der Ausgangspunkt —
   und macht sich kleiner, sobald das System um sie herum entsteht. */
.mona .bsys.is-motion .bsys__mark {
  display: block;
  left: 50%; top: 46%;
  width: 34%; aspect-ratio: 1001 / 705;
  transform: translate(-50%, -50%)
             scale(calc(1.42 - 0.42 * clamp(0, calc((var(--p) - 0.50) * 5), 1)));
  will-change: transform;
}
/* Zwei Reihen: das Motiv füllt den verfügbaren Platz, die Unterschrift sitzt
   direkt darunter. Vorher begrenzte eine Prozentangabe die Bildhöhe — sie
   griff nicht zuverlässig, das quadratische Konstruktionsbild ragte über
   seinen Kasten hinaus und riss die Unterschrift nach unten weg. */
.mona .bsys.is-motion .bsys__state {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  /* stretch, damit die Bildreihe eine feste Höhe bekommt — sonst fällt
     height:100% auf auto zurück und das Bild wächst über den Kasten. */
  align-items: stretch; justify-items: center; gap: .45rem;
}
.mona .bsys.is-motion .bsys__state img {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.mona .bsys.is-motion .bsys__state figcaption { margin-top: 0; }
/* Die Konstruktionszeichnung ist ein Blick in die Vektordatei und liegt
   deshalb als einzige auf grauem Grund. Ein schmaler Rahmen macht daraus
   ein bewusst gezeigtes Arbeitsdokument statt eines Ausreißers in der
   sonst cremefarbenen Reihe. */
.mona .bsys__state--2 img { border-radius: 10px; }
/* Vier Stufen, jede rund 0,16 Fortschritt lang, Blenden über 0,05.
   Die erste steht schon bei 0 — die Bühne ist nie leer. */
.mona .bsys.is-motion .bsys__state--1 { opacity: clamp(0, calc((0.17 - var(--p)) * 20), 1); }
.mona .bsys.is-motion .bsys__state--2 { opacity: calc(clamp(0, calc((var(--p) - 0.13) * 20), 1) * clamp(0, calc((0.33 - var(--p)) * 20), 1)); }
.mona .bsys.is-motion .bsys__state--3 { opacity: calc(clamp(0, calc((var(--p) - 0.29) * 20), 1) * clamp(0, calc((0.49 - var(--p)) * 20), 1)); }
.mona .bsys.is-motion .bsys__state--4 { opacity: clamp(0, calc((var(--p) - 0.45) * 20), 1); }

/* Die Systemteile legen sich um die Marke. Sie kommen weich: ein leichtes
   Aufgehen aus 96 % plus ein kurzer Weg von 14 px — kein Schieben, kein
   Springen. */
.mona .bsys.is-motion .bsys__part {
  --an: clamp(0, calc((var(--p) - var(--start)) * 9), 1);
  opacity: var(--an);
  transform: translateY(calc((1 - var(--an)) * 14px)) scale(calc(0.96 + 0.04 * var(--an)));
  will-change: transform, opacity;
}
.mona .bsys.is-motion .bsys__colors  { --start: 0.56; left:  1%; top: 10%; width: 25%; }
.mona .bsys.is-motion .bsys__icons   { --start: 0.70; left: 74%; top: 10%; width: 25%; }
/* Das Pattern ist ein Flächenmuster von 2000 × 901 px. In voller Breite wäre
   es auf der Bühne über 60 % hoch und läge über Marke und Symbolen. Es steht
   deshalb als schmales Band: feste Höhe, Ausschnitt statt Verkleinerung —
   so bleibt die Musterung in ihrer Originalgröße lesbar.
   Es steht mittig zwischen den beiden Spalten: auf flachen Bühnen (etwa
   1280 × 800) reicht die Farbliste weiter nach unten als das Band, ein
   volle Breite hätte sie überlagert. */
.mona .bsys.is-motion .bsys__pattern {
  --start: 0.84;
  left: 29%; bottom: 3%; width: 42%; height: 14%;
  overflow: hidden; border-radius: 8px;
}
.mona .bsys.is-motion .bsys__pattern img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 0;
}
.mona .bsys.is-motion .bsys__part .label { margin-bottom: .75rem; }
.mona .bsys.is-motion .swatch-line { padding-block: clamp(.22rem, .55vw, .48rem); gap: clamp(.5rem, 1.1vw, .9rem); }
.mona .bsys.is-motion .swatch-line__field { width: clamp(20px, 2vw, 30px); height: clamp(20px, 2vw, 30px); }
.mona .bsys.is-motion .swatch-line__name,
.mona .bsys.is-motion .swatch-line__hex { font-size: .68rem; }
.mona .bsys.is-motion .symbols--sys { grid-template-columns: repeat(2, 1fr); gap: clamp(.6rem, 1.4vw, 1.1rem); }
.mona .bsys.is-motion .symbol img { width: clamp(34px, 3.4vw, 52px); }
.mona .bsys.is-motion .symbol span { margin-top: .5rem; font-size: .62rem; }

/* Die Schritttexte stehen unter der Bühne. Der gerade gültige steht vorn,
   die anderen bleiben lesbar. */
.mona .bsys.is-motion .bsys__steps { margin: 0; width: min(100%, 64rem); }
.mona .bsys.is-motion .bsys__step { opacity: .34; }
.mona .bsys.is-motion .bsys__step--1 { opacity: calc(.34 + .66 * clamp(0, calc((0.20 - var(--p)) * 14), 1)); }
.mona .bsys.is-motion .bsys__step--2 { opacity: calc(.34 + .66 * min(clamp(0, calc((var(--p) - 0.11) * 14), 1), clamp(0, calc((0.36 - var(--p)) * 14), 1))); }
.mona .bsys.is-motion .bsys__step--3 { opacity: calc(.34 + .66 * min(clamp(0, calc((var(--p) - 0.27) * 14), 1), clamp(0, calc((0.52 - var(--p)) * 14), 1))); }
.mona .bsys.is-motion .bsys__step--4 { opacity: calc(.34 + .66 * clamp(0, calc((var(--p) - 0.46) * 14), 1)); }

/* --- MONA · Signature Moment 02: die Website scrollt zur Entscheidung ------ */
/* Die Regeln für das Browserfenster gelten Bildern im Fenster: sie liegen
   dort deckungsgleich übereinander und starten mit `opacity: 0`, weil bisher
   vier Einzelbilder gewechselt wurden. Die Bahn ist kein Wechselbild — sie
   braucht ihre Originalproportion und muss sichtbar sein. Deshalb die
   längeren Selektoren. */
.mona .browser__screen .pgs { position: absolute; inset: 0; overflow: hidden; }
.mona .browser__screen .pgs__strip {
  position: absolute;
  top: 0; left: 0; right: auto; bottom: auto;
  width: 100%; height: auto;
  object-fit: fill;
  opacity: 1;
  display: block;
  will-change: transform;
}
/* Die Mechanik ist dieselbe wie bei AURUM (Block 09 in main.js setzt `--i`),
   die Bewegung ist weicher: etwas länger, ohne harte Kante am Ende. Vier
   Abschnitte auf der Bahn — ein Schritt entspricht genau einem Viertel. */
.mona .pgs__strip--4[data-seq-strip] {
  transform: translateY(calc(var(--i, 0) * -25%));
  transition: transform var(--mo-slow) var(--mo-ease);
}
@media (prefers-reduced-motion: reduce) {
  .mona .pgs__strip--4[data-seq-strip] { transition: none; transform: none; }
}
/* Der gerade gültige Punkt bekommt zusätzlich zur höheren Deckkraft eine
   kurze Linie im Markenlila — ruhig genug, um nicht abzulenken, deutlich
   genug, um die Zuordnung sofort klar zu machen. */
.mona .webstory__step { position: relative; padding-left: clamp(1rem, 1.8vw, 1.5rem); }
.mona .webstory__step::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--mona-lila);
  transform: translateY(-50%);
  transition: height var(--mo-base) var(--mo-ease);
}
.mona .webstory__step.is-active::before { height: clamp(28px, 4vh, 44px); }
@media (prefers-reduced-motion: reduce) {
  .mona .webstory__step::before { transition: none; }
}
/* Das Video sitzt jetzt im selben Abschnitt wie die Aussage. */
.mona .webdigital__film { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ==========================================================================
   23 MONA · SIGNATURE MOMENT 03 — AUS DEM DESKTOP WIRD MOBIL
   --------------------------------------------------------------------------
   Nicht „Desktop, Text, drei Telefone“, sondern eine Bewegung: der große
   Bildschirm steht, tritt zurück, und die mobilen Ansichten treten nach vorn.
   Der Desktop bleibt dabei sichtbar — verkleinert im oberen Bereich — damit
   der Zusammenhang am Ende noch zu sehen ist und nicht nur währenddessen.

   GRUNDZUSTAND: Desktop oben, darunter die drei Telefone nebeneinander.
   ========================================================================== */
.mona .resp { grid-column: 1 / -1; }
.mona .resp__desk, .mona .resp__phone { margin: 0; }
.mona .resp__desk img, .mona .resp__phone img { width: 100%; height: auto; display: block; }
.mona .resp__desk figcaption,
.mona .resp__phone figcaption {
  margin-top: clamp(.7rem, 1.2vw, 1rem);
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
/* Grundzustand */
.mona .resp__board { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.mona .resp__desk { max-width: 760px; margin-inline: auto; }
.mona .resp__phone { display: none; }
.mona .resp__board::after { content: none; }
@supports (display: grid) {
  .mona .resp__board {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "d d d" "p1 p2 p3";
    align-items: end;
  }
  .mona .resp__desk  { grid-area: d; }
  .mona .resp__phone { display: block; }
  .mona .resp__phone--1 { grid-area: p1; }
  .mona .resp__phone--2 { grid-area: p2; }
  .mona .resp__phone--3 { grid-area: p3; }
}

/* --- Bewegter Zustand ---------------------------------------------------- */
.mona .resp.is-motion {
  --p: 1;            /* ohne Skript steht die vollständige Komposition */
  height: 200vh;
  position: relative;
}
.mona .resp.is-motion .resp__sticky {
  position: sticky; top: 0; height: 100vh;
  display: grid; align-content: center; justify-items: center;
}
/* Die Höhe bestimmt die Breite, damit das Verhältnis nie kippt und die
   gerechneten Plätze unten stimmen. */
.mona .resp.is-motion .resp__board {
  display: block;
  position: relative;
  width: min(100%, calc(82vh * 3 / 2));
  aspect-ratio: 3 / 2;
}
.mona .resp.is-motion .resp__desk,
.mona .resp.is-motion .resp__phone { position: absolute; will-change: transform, opacity; }

/* Der Desktop steht zuerst groß in der Mitte und zieht sich dann nach oben
   zurück. Bewegt wird nur transform — die Position im Layout bleibt. */
.mona .resp.is-motion .resp__desk {
  /* Gerechnet: bei 30 % Breite ist der Bildschirm samt Beschriftung rund
     30 % der Bühnenhöhe hoch. Die Telefone beginnen bei 36 % — dazwischen
     bleiben rund 20 px Luft, sodass die Beschriftung „Desktop" frei steht
     und nicht hinter dem mittleren Telefon verschwindet. */
  left: 35%; top: 0%; width: 30%;
  transform-origin: 50% 0%;
  transform: scale(calc(2.0 - 1.0 * clamp(0, calc((var(--p) - 0.14) * 4), 1)))
             translateY(calc((1 - clamp(0, calc((var(--p) - 0.14) * 4), 1)) * 42%));
  z-index: 1;
}
/* Die drei Ansichten treten nacheinander nach vorn: leichtes Aufgehen aus
   94 % und ein kurzer Weg von 18 px. Kein Schieben, kein Kippen, kein
   Nachfedern — MONA bewegt sich weich, nicht munter. */
.mona .resp.is-motion .resp__phone {
  --an: clamp(0, calc((var(--p) - var(--start)) * 6), 1);
  top: 36%; width: 19%;
  opacity: var(--an);
  transform: translateY(calc((1 - var(--an)) * 18px)) scale(calc(0.94 + 0.06 * var(--an)));
  z-index: 2;
}
.mona .resp.is-motion .resp__phone--1 { --start: 0.34; left: 16%; }
.mona .resp.is-motion .resp__phone--2 { --start: 0.50; left: 40.5%; top: 33%; }
.mona .resp.is-motion .resp__phone--3 { --start: 0.66; left: 65%; }

/* Der Satz stand vorher in einer eigenen, linksbündigen Rasterspalte weit
   unter den Geräten und wirkte dadurch verloren. Er steht jetzt mittig und
   dicht unter der Komposition — als deren Erklärung, nicht als eigener
   Block. */
.mona .resp__note {
  grid-column: 1 / -1;
  max-width: 54ch;
  margin: clamp(1.5rem, 2.6vw, 2.25rem) auto 0;
  text-align: center;
}

@media (max-width: 760px) {
  .mona .resp__board { grid-template-columns: 1fr; grid-template-areas: "d" "p1" "p2" "p3"; }
  .mona .resp__phone { max-width: 320px; margin-inline: auto; }
  .mona .resp__note { text-align: left; }
}

/* --- MONA · Realitätscheck ------------------------------------------------ */
/* Bewusst klein: ein Absatz mit einer Marke am Rand, kein eigener Abschnitt,
   keine Grafik, keine Zahl. Er gehört zur Geschichte an der Stelle, an der
   die Frage nach dem Elternvertrauen aufkommt — nicht als nachgereichter
   Beleg am Ende. */
.mona .check {
  grid-column: 3 / span 8;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-left: clamp(1rem, 1.8vw, 1.5rem);
  border-left: 2px solid var(--mona-lila);
}
.mona .check__k {
  margin: 0 0 .55rem;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.mona .check__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--body);
  max-width: 62ch;
}
@media (max-width: 900px) { .mona .check { grid-column: 1 / -1; } }

/* Die Reflexion beantwortet drei Fragen. Die kleinen Marken darüber machen
   das sichtbar, ohne aus dem Absatz eine Aufzählung zu machen. */
.mona .reflex__k {
  display: block;
  margin-bottom: .45rem;
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   24 MOMENT — FARBWELT UND KOMPONENTEN
   --------------------------------------------------------------------------
   Die Werte stammen aus der Dokumentation der App (DESIGN.md), nicht aus dem
   Brand Board: dort heißen zwei Töne anders und Mauve weicht ab. Maßgeblich
   ist der spätere App-Stand; das Brand Board wird unverändert als Bild
   gezeigt und nicht nachträglich umgefärbt.

   Die Seite übernimmt Raster, Kopfzeile, Fuß und Bewegungssprache des
   Portfolios. Eigen ist nur die Farbwelt und wenige Bausteine, die es für
   die App-Ansichten braucht.
   ========================================================================== */
.moment {
  --mo-plum-deep: #3A102B;   /* Primary — Aktionen, aktive Zustände       */
  --mo-plum:      #5D234B;   /* Secondary — Hervorhebungen, Beschriftungen */
  --mo-taupe:     #C8B7A6;
  --mo-sand:      #EADFCE;
  --mo-ivory:     #FBF8F3;

  /* Die Seite bindet die allgemeinen Rollen an diese Töne. Deep Plum auf
     Creme erreicht 15,4:1, Plum 11,0:1 — beide weit über AA. */
  --ink:      var(--mo-plum-deep);
  --gold-ink: var(--mo-plum);
  --gold:     var(--mo-taupe);
  --line:     #E4DCD0;
}
.moment .chapter--tint { background: var(--mo-ivory); }
/* Auf der Sandfläche liegt die normale Linienfarbe zu dicht am Untergrund —
   dort eine Spur kräftiger, damit Tabellen- und Kartenlinien sichtbar bleiben.
   Die Unterschriften unter den Geräten reichten dort in den weichen Schatten
   hinein und kamen an den gerenderten Pixeln auf 4,3:1. Mit #4C4840 sind es
   6,3:1 — dieselbe Nachdunklung wie auf den anderen warmen Flächen. */
.moment .chapter--warm { background: var(--mo-sand); --line: #D3C3AD; --muted: #4C4840; }
.moment .label--muted  { color: var(--mo-plum); }
.moment .dnote { border-left-color: var(--mo-plum); }

/* Der Claim steht direkt unter dem Projektnamen und trägt die Tonlage der
   Marke — dieselbe Serifenschrift wie in der App. */
.moment .cs-hero__claim {
  grid-column: 1 / span 6;
  margin-top: clamp(.9rem, 1.6vw, 1.4rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1.3;
  color: var(--mo-plum);
}
@media (max-width: 900px) { .moment .cs-hero__claim { grid-column: 1 / -1; } }

/* --- Gemeinsamer Abschnittskopf ------------------------------------------ */
.moment .mo-head { grid-column: 1 / span 7; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.moment .mo-head--narrow { grid-column: 1 / span 6; }
.moment .mo-head__title {
  margin: clamp(.8rem, 1.4vw, 1.1rem) 0 clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--ink);
  max-width: 20ch;
}
.moment .mo-head .body-text { max-width: 54ch; }
@media (max-width: 900px) { .moment .mo-head, .moment .mo-head--narrow { grid-column: 1 / -1; } }

/* --- Der Ausgangspunkt: Text und ein einzelner Screen -------------------- */
.moment .mo-origin {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.moment .mo-origin__text .body-text + .body-text { margin-top: clamp(1rem, 1.8vw, 1.5rem); }
.moment .mo-origin__text .body-text { max-width: 52ch; }
.moment .mo-origin__shot { margin: 0; max-width: 320px; justify-self: center; }

/* --- Vier Leitgedanken ---------------------------------------------------- */
.moment .guides {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.moment .guide {
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--mo-ivory);
  border: 1px solid var(--line);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.moment .guides.is-in .guide { opacity: 1; transform: none; }
.moment .guide__n {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--mo-plum);
}
.moment .guide__t {
  margin: clamp(1rem, 1.8vw, 1.5rem) 0 .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  color: var(--ink);
}
.moment .guide__d { margin: 0; font-size: var(--fs-small); line-height: 1.7; color: var(--body); }
@media (max-width: 760px) { .moment .guides { grid-template-columns: 1fr; } }

/* --- Der zentrale Ablauf: Schritte links, ein Bildschirm rechts ----------
   Dieselbe Mechanik wie in den anderen Case Studies (Block 09 in main.js):
   der Schritt, der in der Mitte des Fensters steht, bestimmt das Bild.
   Der Bildschirm bleibt dabei stehen, statt viermal neu aufzutauchen.
   Ohne JavaScript und bei reduzierter Bewegung stehen alle vier Ansichten
   nebeneinander — vollständig lesbar, nur ohne Ablauf. */
.moment .flowstage {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.moment .flowstage__steps { list-style: none; margin: 0; padding: 0; }
.moment .flowstage__step {
  min-height: 46vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 1.5rem;
  padding-left: clamp(1rem, 1.8vw, 1.5rem);
  position: relative;
}
.moment .flowstage__step > * { opacity: .34; transition: opacity 460ms var(--ease-out); }
.moment .flowstage__step.is-active > * { opacity: 1; }
.moment .flowstage__step::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--mo-plum);
  transform: translateY(-50%);
  transition: height var(--mo-base, 700ms) var(--mo-ease, ease);
}
.moment .flowstage__step.is-active::before { height: clamp(32px, 5vh, 52px); }
.moment .flowstage__n {
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--mo-plum); margin: 0;
}
.moment .flowstage__t {
  margin: .7rem 0 .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  line-height: 1.18;
  color: var(--ink);
}
.moment .flowstage__d { margin: 0; font-size: var(--fs-small); line-height: 1.75; color: var(--body); max-width: 40ch; }
/* Die vier Rahmen liegen übereinander: der erste hält die Höhe, die
   drei weiteren stehen absolut darüber und blenden über. */
.moment .flowstage__sticky {
  position: sticky; top: 13vh; height: fit-content;
  justify-self: center;
  width: min(100%, 340px);
}
.moment .flowstage__sticky .phone {
  opacity: 0;
  transition: opacity 620ms var(--ease-out);
}
.moment .flowstage__sticky .phone + .phone { position: absolute; inset: 0; }
.moment .flowstage__sticky .phone.is-active { opacity: 1; }
/* Ohne JavaScript schaltet niemand die Rahmen frei; bei reduzierter
   Bewegung bleibt die Sequenz bewusst auf dem ersten Schritt stehen.
   In beiden Fällen stünden drei von vier Bildschirmen unsichtbar
   übereinander — deshalb dort dasselbe ruhige Raster: alle vier
   Ansichten nebeneinander, ohne klebende Bühne und ohne Überblendung. */
@media (scripting: none), (prefers-reduced-motion: reduce) {
  .moment .flowstage { grid-template-columns: 1fr; }
  /* Die Schritthöhe von 46vh gibt dem Scrollweg Luft. Ohne Bühne
     stünden dazwischen nur Löcher — hier reicht der eigene Textblock. */
  .moment .flowstage__steps { display: grid; gap: clamp(1.75rem, 3.4vw, 2.75rem); }
  .moment .flowstage__step { min-height: 0; padding-block: 0; }
  .moment .flowstage__step > * { opacity: 1; }
  .moment .flowstage__step::before { height: clamp(32px, 5vh, 52px); }
  .moment .flowstage__sticky {
    position: static; width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 4vw, 3.5rem);
  }
  .moment .flowstage__sticky .phone { opacity: 1; transition: none; }
  .moment .flowstage__sticky .phone + .phone { position: static; inset: auto; }
}
@media (scripting: none) and (min-width: 861px), (prefers-reduced-motion: reduce) and (min-width: 861px) {
  .moment .flowstage__sticky { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Bildschirm im Rahmen ------------------------------------------------
   Das `aspect-ratio` des Rahmens gilt für die Außenkante, der Bildschirm
   liegt aber 9 px Rand weiter innen. Beides zusammen ergab unten einen
   etwa 20 px hohen hellen Streifen. Deshalb bestimmt hier das Bild selbst
   die Höhe — der Rahmen sitzt dann exakt auf dem Bildschirmexport. */
.moment .phone { --phone-ratio: 1170 / 2532; background: var(--mo-ivory); aspect-ratio: auto; }
.moment .phone img { width: 100%; height: auto; display: block; }
/* Im Ablauf liegen drei Rahmen über dem ersten und bekommen dessen Höhe
   vorgegeben — dort füllt der Bildschirm die Fläche formatgleich aus. */
.moment .flowstage__sticky .phone + .phone img { height: 100%; object-fit: cover; object-position: top center; }
/* In der Dreierreihe sitzt das Gerät unten in seiner Rasterzeile, damit
   alle drei Bildunterschriften auf einer Linie beginnen. Der Versatz des
   mittleren Geräts gehört an den Rahmen, nicht an das Bild darin —
   sonst entstünde innerhalb des Rahmens eine helle Fläche. */
.moment .appscreens .phone { align-self: end; }
.moment .appscreens__item:nth-child(2) img { margin-bottom: 0; }
.moment .appscreens__item:nth-child(2) .phone { margin-bottom: clamp(1.5rem, 4vw, 3.5rem); }

/* --- Text und Bildschirme nebeneinander ---------------------------------- */
.moment .mo-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.moment .mo-pair--rev { grid-template-columns: 7fr 5fr; }
.moment .mo-pair__title {
  margin: clamp(.8rem, 1.4vw, 1.1rem) 0 clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.16;
  color: var(--ink);
  max-width: 20ch;
}
.moment .mo-pair__text .body-text { max-width: 46ch; }
.moment .mo-pair__shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.moment .mo-pair__single { margin: 0; max-width: 320px; justify-self: center; }

/* Einzelne Bildschirme mit Unterschrift, gestaffelt eingeblendet. */
.moment .mo-shot { margin: 0; opacity: 0; transform: translateY(22px);
  transition: opacity 620ms var(--ease-out), transform 780ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms); }
.moment [data-inview].is-in .mo-shot { opacity: 1; transform: none; }
.moment .mo-shot figcaption { margin-top: clamp(.8rem, 1.4vw, 1.2rem); }

/* --- Marke: Zeichen, Farben, Schrift ------------------------------------- */
.moment .mo-brand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.moment .mo-brand__mark {
  display: grid; place-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--mo-ivory);
  border-radius: 6px;
  aspect-ratio: 4 / 3;
}
.moment .mo-brand__mark img { width: 100%; max-width: 220px; height: auto; }
.moment .mo-brand .label--muted { margin-bottom: clamp(1rem, 1.8vw, 1.4rem); }
/* Die Farbzeilen sind global auf opacity 0 gestellt und werden erst von
   .sysrow__side.is-in freigeschaltet. Hier gibt es diesen Container nicht,
   also wären sie dauerhaft unsichtbar — deshalb der Grundzustand sichtbar. */
.moment .mo-brand .swatch-line { opacity: 1; transform: none; transition: none; }
.moment .mo-brand .swatch-line:first-of-type { border-top: 1px solid var(--line); }
/* Kompaktere Zeilen, damit die Farbspalte nicht deutlich höher steht
   als die Zeichen- und die Schriftspalte daneben. */
.moment .mo-brand .swatch-line { padding: clamp(.5rem, .9vw, .8rem) 0; }
.moment .mo-brand .swatch-line__field { width: clamp(2.1rem, 3.4vw, 3rem); }
.moment .mo-serif { font-family: var(--font-display); }
.moment .mo-type__big {
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.2;
  color: var(--ink);
}
.moment .mo-type__ui {
  margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 .5rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--body);
}

/* --- Hell zu Dunkel: drei Ansichten nebeneinander ------------------------- */
.moment .mo-switch,
.moment .mo-result {
  grid-column: 2 / span 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.moment .mo-result { grid-column: 3 / span 8; grid-template-columns: repeat(2, 1fr); }

/* --- Feinschliff: ein Screen, drei Notizen ------------------------------- */
.moment .mo-refine {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.moment .mo-refine__shot { margin: 0; max-width: 320px; justify-self: center; }
.moment .mo-refine__notes { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); }

/* --- Hinweis zur Umsetzung ----------------------------------------------- */
.moment .mo-note {
  grid-column: 3 / span 8;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.moment .mo-note .body-text { max-width: 68ch; }

@media (max-width: 1080px) {
  .moment .mo-brand { grid-template-columns: 1fr 1fr; }
  .moment .mo-brand__type { grid-column: 1 / -1; }
  .moment .mo-switch, .moment .mo-result { grid-column: 1 / -1; }
  .moment .mo-note { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .moment .mo-origin,
  .moment .mo-pair,
  .moment .mo-pair--rev,
  .moment .mo-refine { grid-template-columns: 1fr; }
  .moment .mo-origin__shot,
  .moment .mo-pair__single,
  .moment .mo-refine__shot { order: -1; }
  /* Einspaltig gibt es keine klebende Bühne mehr, an der überblendet
     werden könnte. Statt die drei übrigen Rahmen unsichtbar übereinander
     zu legen, stehen alle vier als Raster unter den Schritten. */
  .moment .flowstage { display: flex; flex-direction: column; }
  .moment .flowstage__steps { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); }
  .moment .flowstage__step { min-height: 0; padding-block: 0; }
  .moment .flowstage__step > * { opacity: 1; }
  .moment .flowstage__step::before { height: clamp(32px, 5vh, 52px); }
  .moment .flowstage__sticky {
    position: static; width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    margin-top: clamp(2rem, 6vw, 3rem);
  }
  .moment .flowstage__sticky .phone { opacity: 1; transition: none; }
  .moment .flowstage__sticky .phone + .phone { position: static; inset: auto; }
}
@media (max-width: 640px) {
  .moment .mo-brand { grid-template-columns: 1fr; }
  .moment .mo-switch, .moment .mo-result,
  .moment .mo-pair__shots { grid-template-columns: 1fr; }
  .moment .mo-shot { max-width: 320px; margin-inline: auto; }
  /* Zu zweit nebeneinander wären die Bildschirme rund 160 px breit und
     damit nicht mehr lesbar — hier steht einer unter dem anderen. */
  .moment .flowstage__sticky {
    grid-template-columns: minmax(0, 320px);
    justify-content: center;
    gap: clamp(1.75rem, 6vw, 2.5rem);
  }
}

/* Ohne Bewegung stehen alle Ansichten und Karten sofort im Endzustand. */
@media (prefers-reduced-motion: reduce) {
  .moment .guide,
  .moment .mo-shot { opacity: 1 !important; transform: none !important; }
  .moment .flowstage__step > * { opacity: 1 !important; }
  .moment .flowstage__step::before { transition: none; }
}

/* =========================================================================
   25  RECHTLICHES UND FEHLERSEITE
   =========================================================================
   Impressum, Datenschutz und 404 sind reine Textseiten. Sie benutzen das
   vorhandene Raster, die vorhandene Typografie und die vorhandenen Farben —
   hier steht nur, was für eine lesbare Textspalte nötig ist. Keine neue
   Gestaltung, kein eigener Look.
   ====================================================================== */
/* Die Kopfzeile liegt fest über der Seite. Die Case Studies halten mit
   padding-top Abstand dazu — die Textseiten brauchen denselben, sonst
   rutscht die erste Zeile auf dem Telefon unter das Logo. */
[data-page="recht"] .chapter { padding-top: clamp(8rem, 16vh, 13rem); }
.recht {
  grid-column: 2 / span 8;
  padding-block: 0 clamp(2rem, 5vw, 4rem);
}
.recht--mitte { grid-column: 3 / span 8; }
.recht__title {
  /* „Datenschutzerklärung" ist ein Wort und bei 320 px breiter als die
     Spalte. Die Seite ist als lang="de" ausgezeichnet, deshalb trennt
     der Browser hier korrekt statt über den Rand zu laufen. */
  hyphens: auto;
  overflow-wrap: break-word;
  margin: .6rem 0 clamp(1.75rem, 3.5vw, 2.75rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
}
.recht h2 {
  margin: clamp(2rem, 4vw, 3rem) 0 .75rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.3;
  color: var(--ink);
}
.recht .body-text { max-width: 62ch; }
.recht__liste {
  margin: 0; padding-left: 1.2rem;
  max-width: 62ch;
  font-size: var(--fs-body); line-height: 1.75; color: var(--body);
}
.recht__liste li + li { margin-top: .5rem; }
/* Steht ein Absatz hinter einer Liste, braucht er denselben Abstand wie
   zwischen zwei Absätzen — sonst klebt er an der letzten Zeile. */
.recht__liste + .body-text { margin-top: 1.1em; }
/* Der Hinweiskasten ist bewusst auffällig: er soll vor dem Livegang
   nicht übersehen werden und danach mitsamt dieser Regel verschwinden. */
.recht__hinweis {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(.9rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
  border-left: 3px solid var(--gold-ink);
  background: rgba(99, 70, 27, .06);
  border-radius: 0 4px 4px 0;
}
.recht__hinweis p { margin: 0; font-size: var(--fs-small); line-height: 1.7; color: var(--body); max-width: 60ch; }
.recht__projekte {
  display: flex; flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  .recht, .recht--mitte { grid-column: 1 / -1; }
}

/* Rechtsverweise in der Fußzeile — gleiche Zeile, gleiche Schriftgröße
   wie die beiden vorhandenen Angaben daneben. */
.footer__legal { display: flex; gap: 1.25rem; }
.footer__legal a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--on-navy); border-bottom-color: currentColor; }