/* DESIGNSPRACHE – alle Grundwerte der Seite an einem Ort (Styleguide 2.0)
   Regeln:
   · Farbe: Navy trägt, Creme und Beige geben Ruhe, Blau nur für Links, Labels und Nummern. Transparenzen immer aus den
     Farbkanälen (--*-rgb), nie aus freien Werten.
   · Schrift: Agenda für Titel (600), Inter für Text (300 / 400 / 600), Agenda Condensed (700) nur im Portfolio.
     Labels immer 12px, Grossbuchstaben, 0.12em Sperrung.
   · Abstände: nur Stufen aus der Skala --s-1 … --s-10. Seitenrand --edge, Abschnitte --section.
   · Radius: Bilder und Karten --r-m, Leisten --r-s, Knöpfe --r-pill, runde Knöpfe --r-round. Randabfallend = 0.
   · Bewegung: drei Kurven, fünf Dauern. --ease-out für alles, was ankommt (Auftritte, Hover),
     --ease-in-out für alles, was von A nach B fährt (Übergänge, Slider, Balken), --ease-soft für reine Ein-/Ausblendungen. */
:root {
  /* Farben */
  --navy: #152b4f;        --navy-rgb: 21 43 79;
  --navy-deep: #0f2140;   --deep-rgb: 15 33 64;      /* Flächen unter Bildern, Abdunklungen, Schatten */
  --blue: #2e5d93;
  --beige: #eae3d6;
  --cream: #f6f4ee;       --cream-rgb: 246 244 238;
  --white: #fff;          --white-rgb: 255 255 255;
  --text: #2b3240;
  --muted: #4a5263;
  --light: #c9d3e3;       --light-rgb: 201 211 227;
  --glow-rgb: 130 182 250;                           /* Leuchten im Werdegang */
  --error: #b3261e;
  --line: rgb(var(--navy-rgb) / 0.18);               /* Haarlinie auf hellem Grund */
  --line-strong: rgb(var(--navy-rgb) / 0.3);         /* Eingabefelder, unterstrichene Links */
  --line-dark: rgb(var(--light-rgb) / 0.3);          /* Haarlinie auf Navy */
  --line-dark-strong: rgb(var(--white-rgb) / 0.6);   /* Überschriften-Linien, Rahmen von Knöpfen auf Navy */
  --scrim: rgb(var(--deep-rgb) / 0.46);              /* Abdunklung über Fotos mit weisser Schrift */
  --shadow-m: 0 18px 44px rgb(var(--deep-rgb) / 0.45);
  --shadow-l: 10px 22px 54px rgb(var(--deep-rgb) / 0.55), 3px 6px 14px rgb(var(--deep-rgb) / 0.25);
  --shadow-xl: 20px 32px 64px rgb(var(--deep-rgb) / 0.65), 0 8px 22px rgb(var(--deep-rgb) / 0.3);

  /* Schrift */
  --font: "Inter", system-ui, sans-serif;
  --font-title: "agenda", "Inter", system-ui, sans-serif;
  --font-cond: "agenda-condensed", "agenda", "Inter", system-ui, sans-serif;
  --fs-hero: clamp(54px, 13.6vw, 290px);    /* Name im Hero (Agenda) */
  --fs-display: clamp(44px, 5.2vw, 76px);   /* Titel jedes Abschnitts */
  --fs-num-xl: clamp(56px, 7vw, 96px);      /* Jahreszahlen */
  --fs-num: clamp(48px, 5vw, 72px);         /* Nummern 01–04 */
  --fs-h3: clamp(22px, 1.9vw, 26px);        /* Titel innerhalb eines Abschnitts */
  --fs-h4: 20px;                            /* kleine Titel, Spaltenköpfe */
  --fs-lead: clamp(19px, 1.6vw, 23px);
  --fs-body: 17px;
  --fs-meta: 14px;
  --fs-label: 12px;
  --lh-tight: 0.95;  --lh-title: 1.2;  --lh-text: 1.6;
  --track-title: -0.01em;   /* Agenda gemischt */
  --track-caps: 0.04em;     /* Agenda in Grossbuchstaben */
  --track-label: 0.12em;    /* Inter-Labels */

  /* Abstände (8er-Raster, darunter 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;  --s-9: 96px;  --s-10: 128px;
  --edge: clamp(24px, 5vw, 96px);           /* Seitenrand für randabfallende Bereiche (Hero, Portfolio, Footer) */
  --gutter: 24px;                           /* Innenabstand des Inhaltsrahmens */
  --section: clamp(80px, 9vw, 120px);       /* Abstand oben und unten in jedem Abschnitt */
  --max: 1080px;
  --nav-h: 64px;

  /* Radius */
  --r-s: 3px;  --r-m: 14px;  --r-pill: 999px;  --r-round: 50%;

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-xs: 0.2s;   /* Hover, Farbe */
  --dur-s: 0.4s;    /* Zustände von Knöpfen und Karten */
  --dur-m: 0.8s;    /* Ein- und Ausblenden, Übergänge im Portfolio */
  --dur-l: 1.2s;    /* Auftritte */
  --dur-xl: 1.6s;   /* grosse Bewegungen (Kartenreihe) */
  --dur-xxl: 2.4s;  /* langsames Zoomen */
  --stagger: 0.1s;  /* Versatz zwischen gestaffelten Elementen */
  --rise: 48px;     /* Weg beim Aufsteigen */
  --slide: 90px;    /* Weg beim seitlichen Hereingleiten */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Sichtbarer Tastaturfokus: Blau auf hell, Hellblau auf Navy */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav:not(.is-light) :focus-visible, .top :focus-visible, .timeline :focus-visible,
.contact :focus-visible, .lightbox :focus-visible { outline-color: var(--light); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section) 0; }
.section--beige { background: var(--beige); }

.h2 {
  font-family: var(--font-title);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-title);
  color: var(--navy);
  margin-bottom: var(--s-6);
}
.h2--light { color: var(--white); }

.h3 {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-title);
  font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-title);
  color: var(--navy);
  margin: 0 0 var(--s-4);
}
/* Kleines Quadrat wie im Lebenslauf */
.h3::before { content: ""; width: 11px; height: 11px; background: var(--navy); }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--navy); margin-bottom: var(--s-4); max-width: 62ch; }

.btn {
  display: inline-block;
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-6);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  font-weight: 600; line-height: 1;
  letter-spacing: var(--track-label);
  font-size: var(--fs-label);
  text-transform: uppercase;
  transition: background var(--dur-xs);
}
.btn:hover { background: var(--blue); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--beige); }

/* KNOPF (.cta) – einheitlich für alle Handlungen auf der Seite
   Links ein Kreis mit Pfeil; beim Darüberfahren wächst der Kreis über den ganzen Knopf, der Pfeil schiebt sich nach rechts.
   Standard für hellen Grund (Kreis Navy), .cta--light für dunklen Grund und Fotos (Kreis weiss), .cta--down für Downloads. */
.cta {
  --cta-size: 48px; --cta-fill: var(--navy); --cta-ink: var(--white);
  position: relative; isolation: isolate; display: inline-flex; align-items: center;
  height: var(--cta-size); padding: 0 var(--s-5) 0 calc(var(--cta-size) + var(--s-4));
  border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: var(--fs-label); font-weight: 600; line-height: 1; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--navy);
}
.cta--light { --cta-fill: var(--white); --cta-ink: var(--navy); color: var(--white); }
.cta__circle {
  position: absolute; z-index: -1; left: 0; top: 0; width: var(--cta-size); height: var(--cta-size);
  border-radius: var(--r-pill); background: var(--cta-fill); color: var(--cta-ink);
  transition: width var(--dur-s) var(--ease-in-out);
}
.cta__arrow {
  position: absolute; top: 0; bottom: 0; left: 14px; margin: auto; width: 18px; height: 2px; background: transparent;
  transition: transform var(--dur-s) var(--ease-in-out), background var(--dur-s) var(--ease-in-out);
}
.cta__arrow::before {
  content: ""; position: absolute; top: -4px; right: 1px; width: 10px; height: 10px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}
.cta__text { transition: color var(--dur-s) var(--ease-in-out); }
.cta:hover .cta__circle, .cta:focus-visible .cta__circle { width: 100%; }
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { background: currentColor; transform: translateX(var(--s-4)); }
.cta:hover .cta__text, .cta:focus-visible .cta__text { color: var(--cta-ink); }
/* nach unten gedreht; translateX läuft dann senkrecht: in Ruhe 6px hoch (Spitze mittig), beim Darüberfahren nach unten */
.cta--down .cta__arrow { left: 15px; transform: rotate(90deg) translateX(-6px); }
.cta--down:hover .cta__arrow, .cta--down:focus-visible .cta__arrow { transform: rotate(90deg) translateX(-2px); }
@media (max-width: 760px) {
  .cta { --cta-size: 44px; }
}

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s-6);
  color: var(--white);
  border: 0 solid transparent; border-bottom-width: 1px;
  transition: background var(--dur-xs), border-color var(--dur-xs), color var(--dur-xs);
}
/* Immer durchsichtig; auf hellem Grund wechselt nur die Schrift auf Navy (.is-light setzt script.js) */
.nav.is-light { color: var(--navy); }
/* die Leiste lässt Klicks durch (script.js prüft, was darunter liegt); ihre Links bleiben klickbar */
.nav { pointer-events: none; }
.nav a, .nav button { pointer-events: auto; }
.nav__logo {
  font-weight: 600; letter-spacing: 0.15em; text-decoration: none; font-size: 18px;
}
.nav__links { display: flex; gap: var(--s-6); }
.nav__links a {
  text-decoration: none; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; opacity: 0.85;
}
.nav__links a:hover { opacity: 1; }
/* Aktueller Bereich: feine Linie unter dem Link */
@media (max-width: 1300px) {   /* sechs Punkte plus Portfolio-Kapitel: etwas enger */
  .nav__links { gap: var(--s-5); }
}
@media (max-width: 900px) {    /* nur das Logo-Zeichen, damit alle sechs Punkte Platz haben */
  .nav__name { display: none; }
}
.nav__links a[aria-current="true"] {
  opacity: 1;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
}

/* PROFIL */
.facts { border-top: 1px solid var(--line); }
.facts div { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.facts dt {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--blue);
}
.facts dd { color: var(--text); }

/* BILDANSICHT
   Raster: oben die Leiste, in der Mitte Pfeil – Bild – Pfeil, unten die Vorschaubilder.
   Gleiche Sprache wie die Seite: runde Knöpfe wie im Portfolio, Zähler dünn wie die Nummern, Bild mit --r-m und Schatten. */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-5) var(--s-5);
  padding: var(--s-5) var(--edge) var(--s-6);
  background: rgb(var(--deep-rgb) / 0.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: var(--white);
  animation: lb-in var(--dur-s) var(--ease-soft) backwards;
}
.lightbox[hidden] { display: none; }
.lightbox.is-closing { animation: lb-out var(--dur-xs) var(--ease-soft) forwards; }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-out { to { opacity: 0; } }

.lightbox__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-5); }
.lightbox__head { flex: 1; min-width: 0; }
.lightbox__kicker {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--light);
}
.lightbox__kicker:empty { display: none; }
.lightbox__caption {
  font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-title); color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lightbox__count { display: flex; align-items: baseline; gap: var(--s-2); font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1; }
.lightbox__count[hidden] { display: none; }
.lightbox__now { font-size: var(--fs-h3); color: var(--white); }
.lightbox__of, .lightbox__total { font-size: var(--fs-meta); color: var(--light); }

/* runde Knöpfe wie die Pfeile im Portfolio */
.lightbox__close, .lightbox__nav {
  display: grid; place-items: center; flex: none; padding: 0;
  border: 1px solid var(--line-dark-strong); border-radius: var(--r-round); background: transparent; color: var(--white);
  cursor: pointer; transition: background var(--dur-xs) var(--ease-soft), color var(--dur-xs) var(--ease-soft), transform var(--dur-s) var(--ease-out);
}
.lightbox__close { width: 48px; height: 48px; }
.lightbox__nav { width: 56px; height: 56px; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--white); color: var(--navy); }
.lightbox__nav--prev:hover { transform: translateX(-3px); }
.lightbox__nav--next:hover { transform: translateX(3px); }
.lightbox__nav[hidden] { visibility: hidden; display: grid; }

.lightbox__figure {
  grid-column: 2; grid-row: 2; height: 100%; min-height: 0; margin: 0;
  display: grid; grid-template-rows: minmax(0, 1fr); justify-items: center; align-items: center;
  animation: lb-pop var(--dur-m) var(--ease-out) backwards;
}
@keyframes lb-pop { from { opacity: 0; transform: scale(0.97) translateY(var(--s-4)); } }
.lightbox__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-m); box-shadow: var(--shadow-xl);
}
.lightbox__img[hidden], .player[hidden] { display: none; }
.lightbox__desc { margin-top: var(--s-1); max-width: 70ch; font-size: var(--fs-meta); color: var(--light); }
.lightbox__desc:empty { display: none; }

/* Vorschaubilder: direkt zu einem Bild springen */
.lightbox__thumbs {
  grid-column: 1 / -1; justify-self: center; display: flex; gap: var(--s-2); max-width: 100%;
  overflow-x: auto; padding: var(--s-1); scrollbar-width: none;
}
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumbs[hidden] { display: none; }
.lightbox__thumb {
  flex: 0 0 auto; width: 64px; height: 48px; padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden;
  background: var(--navy-deep); cursor: pointer; opacity: 0.4;
  transition: opacity var(--dur-xs) var(--ease-soft), transform var(--dur-s) var(--ease-out);
}
.lightbox__thumb:hover { opacity: 0.8; }
.lightbox__thumb.is-active { opacity: 1; transform: translateY(calc(var(--s-1) * -1)); box-shadow: 0 0 0 2px var(--white); }
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.no-scroll { overflow: hidden; }

@media (max-width: 760px) {
  .lightbox { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; padding: var(--s-4) var(--s-4) var(--s-5); gap: var(--s-4); }
  .lightbox__figure { grid-column: 1; }
  .lightbox__nav { grid-row: 4; width: 48px; height: 48px; }
  .lightbox__nav--prev { grid-column: 1; justify-self: start; }
  .lightbox__nav--next { grid-column: 1; justify-self: end; }
  .lightbox__desc { display: none; }
  .lightbox__thumbs { grid-row: 3; }
  .lightbox__close { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__figure { animation-name: lb-in; }
}

/* Videoplayer: schlicht, ein grosser Abspielknopf und eine dünne Leiste, die beim Abspielen verschwindet */
.player {
  position: relative; width: min(1200px, 100%); max-height: calc(100vh - 140px);
  aspect-ratio: 16 / 9; background: var(--navy-deep); border-radius: var(--r-m); overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.lightbox__video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--navy-deep); }
.lightbox .player__big {
  cursor: pointer; color: var(--white); padding: 0;
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: var(--r-round);
  display: grid; place-items: center; background: rgb(var(--white-rgb) / 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(var(--white-rgb) / 0.35); opacity: 1;
  transition: transform var(--dur-xs) var(--ease-soft), background var(--dur-xs) var(--ease-soft), opacity var(--dur-xs) var(--ease-soft);
}
.player__big svg { width: 30px; height: 30px; fill: var(--white); margin-left: 3px; }
.lightbox .player__big:hover { transform: scale(1.07); background: rgb(var(--white-rgb) / 0.26); }
.player.is-playing .player__big { opacity: 0; pointer-events: none; transform: scale(0.85); }
.player__bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
  padding: 36px 16px 12px; background: linear-gradient(to top, rgb(var(--deep-rgb) / 0.72), rgb(var(--deep-rgb) / 0));
  transition: opacity var(--dur-xs) var(--ease-soft);
}
.player.is-playing.is-idle .player__bar { opacity: 0; pointer-events: none; }
.player.is-playing.is-idle { cursor: none; }
.lightbox .player__btn { background: none; border: 0; color: var(--white); cursor: pointer; opacity: 0.85; display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-round); }
.player__btn svg { width: 20px; height: 20px; fill: currentColor; }
.player__btn .i-pause, .player__btn .i-mute { display: none; }
.player.is-playing .player__btn .i-play { display: none; }
.player.is-playing .player__btn .i-pause { display: block; }
.player.is-muted .player__btn .i-vol { display: none; }
.player.is-muted .player__btn .i-mute { display: block; }
.player__time, .player__dur { flex: none; font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: rgb(var(--white-rgb) / 0.85); min-width: 2.6em; }
.player__dur { text-align: right; }
.player__track { position: relative; flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.player__track::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: var(--r-s); background: rgb(var(--white-rgb) / 0.25); transition: height var(--dur-xs); }
.player__buf, .player__fill { position: absolute; left: 0; height: 3px; border-radius: var(--r-s); transition: height var(--dur-xs); }
.player__buf { background: rgb(var(--white-rgb) / 0.28); width: 0; }
.player__fill { background: var(--white); width: 0; }
.player__knob { position: absolute; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: var(--r-round); background: var(--white); transform: scale(0); transition: transform var(--dur-xs); }
.player__track:hover::before, .player__track:hover .player__buf, .player__track:hover .player__fill, .player__track:focus-visible::before, .player__track:focus-visible .player__buf, .player__track:focus-visible .player__fill { height: 5px; }
.player__track:hover .player__knob, .player__track:focus-visible .player__knob, .player.is-scrub .player__knob { transform: scale(1); }
@media (max-width: 760px) {
  .player { border-radius: var(--r-m); }
  .lightbox .player__big { width: 60px; height: 60px; }
  .player__bar { gap: 8px; padding: 28px 10px 8px; }
  .player__dur { display: none; }
}

/* STÄRKEN
   Titel so gross wie «Wer ich bin», Nummern dünn und gross wie die Jahreszahlen im Werdegang. */
.skills { overflow-x: clip; }
.skills__head { margin-bottom: var(--s-8); }
.skills__title { margin-bottom: var(--s-5); }
.skills__head .lead { color: var(--muted); max-width: 34ch; margin: 0; }

.strengths { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7) var(--s-6); }
.strength { display: flex; flex-direction: column; }
.strength__nr {
  font-size: var(--fs-num); font-weight: 300; line-height: 1; letter-spacing: var(--track-title);
  color: var(--blue); font-variant-numeric: tabular-nums; margin-bottom: var(--s-5);
}
/* Balken: füllt sich von 0 auf 100 %. Alle starten zusammen, links ist zuerst voll, rechts zuletzt (--dur). */
.strength__bar { position: relative; height: 3px; margin-bottom: var(--s-5); background: var(--line); border-radius: var(--r-s); overflow: hidden; }
.strength__bar span {
  position: absolute; inset: 0; background: var(--navy);
  transform-origin: left; transform: scaleX(1);
  transition: transform var(--dur, var(--dur-l)) var(--ease-in-out) 0.25s;
}
.strength:nth-child(1) { --dur: var(--dur-l); }
.strength:nth-child(2) { --dur: calc(var(--dur-l) + 0.5s); }
.strength:nth-child(3) { --dur: calc(var(--dur-l) + 1s); }
.strength:nth-child(4) { --dur: calc(var(--dur-l) + 1.5s); }
.is-armed .strength:not(.is-in) .strength__bar span { transform: scaleX(0); }
.strength__h {
  font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-title);
  color: var(--navy); margin-bottom: var(--s-2);
}
.strength p { color: var(--muted); max-width: 34ch; }

/* UNTERLAGEN: eine Zeile pro Datei, wie die Kontaktliste mit Haarlinien; beim Darüberfahren füllt sich die Zeile in Navy */
.docs { overflow-x: clip; }
/* gleicher heller Grund wie die Stärken: Abstand dazwischen nicht doppelt */
.skills + .docs { padding-top: 0; }
.docs__list { list-style: none; border-top: 1px solid var(--line); }
.docs__list li { border-bottom: 1px solid var(--line); }
.doc {
  position: relative; display: grid; grid-template-columns: 72px 1fr auto 44px; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-4); color: var(--navy); text-decoration: none; isolation: isolate;
}
.doc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy);
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-s) var(--ease-out);
}
.doc:hover::before, .doc:focus-visible::before { transform: scaleY(1); }
.doc:hover, .doc:focus-visible { color: var(--white); }
.doc { transition: color var(--dur-xs) var(--ease-soft); }
.doc__nr { font-size: var(--fs-h3); font-weight: 300; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; transition: color var(--dur-xs); }
.doc:hover .doc__nr, .doc:focus-visible .doc__nr { color: var(--light); }
.doc__name { font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-title); }
.doc__meta { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--dur-xs); }
.doc:hover .doc__meta, .doc:focus-visible .doc__meta { color: var(--light); }
.doc__icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: var(--r-round); }
.doc__icon svg { width: 20px; height: 20px; transition: transform var(--dur-s) var(--ease-out); }
.doc:hover .doc__icon svg { transform: translateY(3px); }
.docs__all { margin-top: var(--s-7); }

/* Einfliegen beim Scrollen (wie im Werdegang): script.js setzt .is-armed auf den Bereich und .is-in auf jedes Element.
   Ohne JavaScript ist alles sofort sichtbar. */
.rise { transition: opacity var(--dur-m) var(--ease-soft), translate var(--dur-l) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.is-armed .rise:not(.is-in) { opacity: 0; translate: 0 var(--rise); }
.is-armed .rise--side:not(.is-in) { translate: calc(var(--slide) * -1) 0; }
.is-armed .rise--right:not(.is-in) { translate: var(--slide) 0; }
/* Footer-Foto: zieht beim Hereinscrollen langsam auf */
.contact__bg.rise { transition: opacity var(--dur-xl) var(--ease-soft), scale var(--dur-xxl) var(--ease-out); }
.is-armed .rise--zoom:not(.is-in) { translate: none; scale: 1.12; }
@media (prefers-reduced-motion: reduce) {
  .rise { transition: opacity var(--dur-m) var(--ease-soft); }
  .is-armed .rise:not(.is-in) { translate: none; }
  .is-armed .rise--zoom:not(.is-in) { scale: none; }
  .strength__bar span { transition: none; }
}
@media (max-width: 1100px) {
  .strengths { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-6); }
}

/* Einfliegen von der Seite (Stärken und Unterlagen)
   Stärken: die linke Hälfte kommt von links, die rechte von rechts; zuerst die äusseren Spalten, dann die inneren.
   Unterlagen: jede Zeile teilt sich, Nummer und Name von links, Angaben und Download-Knopf von rechts. */
.strength:nth-child(1), .strength:nth-child(4) { --i: 1; }
.strength:nth-child(2), .strength:nth-child(3) { --i: 2.5; }
.is-armed .strength.rise:nth-child(-n+2):not(.is-in) { translate: calc(var(--slide) * -1) 0; }
.is-armed .strength.rise:nth-child(n+3):not(.is-in) { translate: var(--slide) 0; }
@media (max-width: 1100px) {   /* zwei Spalten: links von links, rechts von rechts, jede Reihe gemeinsam */
  .strength:nth-child(n) { --i: 1; }
  .strength:nth-child(even) { --i: 2; }
  .is-armed .strength.rise:nth-child(odd):not(.is-in) { translate: calc(var(--slide) * -1) 0; }
  .is-armed .strength.rise:nth-child(even):not(.is-in) { translate: var(--slide) 0; }
}
@media (max-width: 760px) {    /* eine Spalte: alle in Leserichtung von links, kürzerer Weg */
  .strength:nth-child(n) { --i: 0; }
  .is-armed .strength.rise:nth-child(n):not(.is-in) { translate: calc(var(--slide) * -0.5) 0; }
}

.is-arming .rise, .is-arming .rise .doc > * { transition: none !important; }   /* Startzustand sofort, ohne Hinausfliegen */
/* Zurücksetzen passiert ausserhalb des Bildes: dort sofort, ohne Verzögerung und ohne Hinausfliegen */
.is-armed .rise:not(.is-in), .is-armed .rise:not(.is-in) .doc > *, .is-armed .rise:not(.is-in) .strength__bar span { transition-duration: 0s; transition-delay: 0s; }
.is-armed .rise--split:not(.is-in) { opacity: 1; translate: none; }   /* die Zeile selbst (mit ihrer Linie) steht, nur der Inhalt fliegt */
.rise--split .doc > * {
  transition: opacity var(--dur-m) var(--ease-soft), translate var(--dur-l) var(--ease-out), color var(--dur-xs) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--stagger)), calc(var(--i, 0) * var(--stagger)), 0s;
}
.is-armed .rise--split:not(.is-in) .doc > * { opacity: 0; }
.is-armed .rise--split:not(.is-in) :is(.doc__nr, .doc__name) { translate: calc(var(--slide) * -1) 0; }
.is-armed .rise--split:not(.is-in) :is(.doc__meta, .doc__icon) { translate: var(--slide) 0; }
@media (max-width: 760px) {
  .is-armed .rise--split:not(.is-in) :is(.doc__nr, .doc__name, .doc__meta) { translate: calc(var(--slide) * -0.5) 0; }
  .is-armed .rise--split:not(.is-in) .doc__icon { translate: calc(var(--slide) * 0.5) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-armed .strength.rise:nth-child(n):not(.is-in),
  .is-armed .rise--split:not(.is-in) .doc > * { translate: none; }
}

/* Aufzählung nach Styleguide: Halbgeviertstrich, Folgezeilen bündig */
.dash { list-style: none; }
.dash li { position: relative; padding-left: 1.1em; }
.dash li + li { margin-top: 4px; }
.dash li::before { content: "–"; position: absolute; left: 0; color: var(--navy); }

/* NACHRICHT: Titel links, Formular rechts; Felder nur mit Haarlinie wie die Listen der Unterlagen */
.message { overflow-x: clip; }
.docs + .message { padding-top: 0; }
.message__inner { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s-7) clamp(var(--s-6), 7vw, var(--s-10)); align-items: start; }
.message__head .lead { color: var(--muted); max-width: 30ch; }
.message__direct { margin-top: var(--s-6); font-size: var(--fs-body); line-height: 1.8; }
.message__direct a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color var(--dur-xs); }
.message__direct a:hover { border-color: var(--navy); }
.message__form { display: grid; gap: var(--s-6); padding-top: var(--s-2); }
.field { display: grid; gap: var(--s-2); }
.field label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue);
}
.field label span { font-weight: 400; letter-spacing: var(--track-caps); text-transform: none; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: var(--s-3) 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; font: inherit; font-size: var(--fs-lead); color: var(--navy); resize: vertical;
  transition: border-color var(--dur-xs);
}
.field textarea { min-height: 140px; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--navy); padding-bottom: calc(var(--s-3) - 1px); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--error); }
.message__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.message__note { font-size: var(--fs-meta); color: var(--muted); }
.message__note.is-error { color: var(--error); }
@media (max-width: 860px) {
  .message__inner { grid-template-columns: 1fr; }
}

/* KONTAKT / FOOTER
   Foto als Bühne, unten Navy. --edge = gleicher Seitenrand wie der Name im Hero. */
.contact {
  --bg-h: min(78%, 900px);   /* Höhe des Fotos; darunter nur Navy */
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy); color: var(--white);
  padding: var(--section) var(--edge) var(--s-6);
}
.contact__bg {
  position: absolute; z-index: -2; left: 0; top: 0; width: 100%; height: var(--bg-h);
  object-fit: cover; object-position: 60% 45%;   /* Sonne und Boot im Bild halten */
  /* weich in den Navy-Grund auslaufen, ohne Kante */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
/* oben leicht abgedunkelt für den Titel, ab der Mitte läuft das Bild in Navy aus */
.contact::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--bg-h);
  background:
    linear-gradient(180deg, rgb(var(--navy-rgb) / 0.55) 0%, rgb(var(--navy-rgb) / 0.05) 25%, rgb(var(--navy-rgb) / 0.12) 45%,
      rgb(var(--navy-rgb) / 0.7) 68%, rgb(var(--navy-rgb) / 0.85) 100%),
    linear-gradient(90deg, rgb(var(--navy-rgb) / 0.35), transparent 45%);
}
.contact__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); }
.contact__title {
  font-family: var(--font-title); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--track-title); text-shadow: 0 2px 24px rgb(var(--deep-rgb) / 0.35);
}

/* drei Spalten wie in der Vorlage: Menü breit, Kontakt und Unterlagen schmaler */
.contact__cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-6) clamp(var(--s-5), 3vw, var(--s-7));
  margin-top: clamp(180px, 24vw, 340px);
}
.contact__h {
  font-family: var(--font-title); font-weight: 600; font-size: var(--fs-h4); letter-spacing: var(--track-caps);
  text-transform: uppercase; padding-bottom: var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line-dark-strong);
}
.contact__links { list-style: none; display: grid; gap: var(--s-1); font-weight: 300; font-size: var(--fs-body); color: var(--light); }
.contact__links a { color: inherit; text-decoration: none; transition: color var(--dur-xs); }
.contact__links a:hover { color: var(--white); }
.contact__copy { margin-top: var(--s-8); font-size: var(--fs-label); letter-spacing: var(--track-caps); color: rgb(var(--light-rgb) / 0.7); }


@media (max-width: 760px) {
  .contact__top { flex-direction: column; }
  .contact { --bg-h: 62%; }
  .contact__cols { grid-template-columns: 1fr 1fr; margin-top: 140px; }
  .contact__col--menu { grid-column: 1 / -1; }
  .is-armed .contact .rise--side:not(.is-in) { translate: calc(var(--slide) * -0.5) 0; }
  .is-armed .contact .rise--right:not(.is-in) { translate: calc(var(--slide) * 0.5) 0; }
}


/* RESPONSIVE */

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { padding: 0 var(--s-4); }
  .h2 { font-size: clamp(40px, 13vw, 64px); }
  .nav__links { gap: var(--s-3); }
  .nav__links a { font-size: 11px; letter-spacing: 0.06em; }
  .nav__links a:nth-child(3), .nav__links a:nth-child(4) { display: none; }   /* Handy: Profil, Portfolio, Unterlagen, Kontakt */
  .nav .logo { width: 26px; height: 26px; }
    

  .strengths { grid-template-columns: 1fr; }
  .strengths { gap: var(--s-7); }
  .skills__head { margin-bottom: var(--s-7); }
  .doc { grid-template-columns: 1fr 40px; gap: var(--s-1) var(--s-4); padding: var(--s-5) var(--s-1); }
  .doc__nr { display: none; }
  .doc__name { grid-column: 1; }
  .doc__meta { grid-column: 1; grid-row: 2; }
  .doc__icon { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; }

  /* Portfolio mobil: seitlich wischen */

}

@media (max-width: 420px) {
  .nav .nav__logo { display: none; }
  .nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ===== Wiedererkennung: Sucher-Motiv ===== */

/* Logo (JL im Sucher) */
.logo { display: block; width: 30px; height: 30px; }
/* Zeichen mit Name wie auf janisluebke.ch */
.nav__logo { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; transition: opacity var(--dur-xs); }
.nav__name {
  font-family: var(--font-title); font-weight: 600; font-size: 17px; line-height: 1;
  letter-spacing: var(--track-caps); text-transform: uppercase;
}

/* WERDEGANG: Zeitachse auf Navy
   Stationen abwechselnd links und rechts, die Linie in der Mitte zeichnet sich beim Scrollen (--p, 0–1, siehe script.js). */
.timeline { background: var(--navy); color: var(--white); }
.timeline .h2 { margin-bottom: var(--s-8); }
.timeline__track { --p: 0; position: relative; }
.timeline__line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px;
  background: var(--line-dark);
}
.timeline__fill {
  position: absolute; inset: 0; background: var(--light);
  transform-origin: top; transform: scaleY(var(--p));
}
.timeline__list { position: relative; z-index: 1; list-style: none; display: grid; gap: 170px; }
.stop {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 160px; align-items: start;
  opacity: 0.4; transition: opacity var(--dur-s) var(--ease-soft);
}
.stop.is-reached { opacity: 1; }
/* Einfliegen von links: Überschrift und der Inhalt jeder Station gleiten beim Erreichen herein (Punkt und Linie bleiben stehen) */
.timeline .h2, .stop__year, .stop__body { transition: opacity var(--dur-m) var(--ease-soft), translate var(--dur-l) var(--ease-out); }
.stop__body { transition-delay: 0.12s; }
.timeline { overflow-x: clip; }
.timeline .h2:not(.is-in) { translate: calc(var(--slide) * -1) 0; opacity: 0; }
/* was links der Linie steht, kommt von links, was rechts steht, von rechts */
.stop:not(.is-reached) .stop__year, .stop:not(.is-reached) .stop__body { opacity: 0; }
.stop:not(.is-reached) .stop__year, .stop:nth-child(even):not(.is-reached) .stop__body { translate: calc(var(--slide) * -1) 0; }
.stop:not(.is-reached) .stop__body, .stop:nth-child(even):not(.is-reached) .stop__year { translate: var(--slide) 0; }
/* Quadrat auf der Linie (aus dem Lebenslauf) */
.stop::before {
  content: ""; box-sizing: border-box; position: absolute; left: 50%; top: 0.9em; width: 12px; height: 12px; margin-left: -6px;
  background: var(--navy); border: 1px solid var(--light); border-radius: var(--r-round);
  transition: background var(--dur-s), box-shadow var(--dur-m), transform var(--dur-m) var(--ease-out);
}
.stop.is-reached::before { background: var(--light); }
/* aktuelle Station: Punkt und Jahreszahl leuchten in der Akzentfarbe, wie die Faserenden */
.stop.is-current::before { background: var(--white); transform: scale(1.25); box-shadow: 0 0 0 4px rgb(var(--glow-rgb) / 0.22), 0 0 18px 2px rgb(var(--glow-rgb) / 0.85); }
.stop__year { transition: opacity var(--dur-m) var(--ease-soft), translate var(--dur-l) var(--ease-out), color var(--dur-m) var(--ease-soft), text-shadow var(--dur-l) var(--ease-soft); }
.stop.is-reached .stop__year { color: var(--white); }
.stop.is-current .stop__year { text-shadow: 0 0 28px rgb(var(--glow-rgb) / 0.55), 0 0 2px rgb(var(--white-rgb) / 0.5); }
.stop__year {
  font-size: var(--fs-num-xl); font-weight: 300; line-height: 1; color: var(--light);
  font-variant-numeric: tabular-nums; text-align: right;
}
.stop__meta { font-size: var(--fs-meta); color: var(--light); font-variant-numeric: tabular-nums; }
.stop__h {
  font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-title);
  margin: var(--s-1) 0 var(--s-2);
}
.stop__body p:not(.stop__meta) { color: var(--light); max-width: 46ch; }
/* jede zweite Station gespiegelt */
.stop:nth-child(even) .stop__year { order: 2; text-align: left; }
.stop:nth-child(even) .stop__body { order: 1; text-align: right; }
.stop:nth-child(even) .stop__body p { margin-left: auto; }
.stop--next .stop__h { color: var(--white); }
.stop__img { margin: var(--s-5) 0 0; width: min(100%, 360px); }
.stop__img img { display: block; width: 100%; height: auto; border-radius: var(--r-m); box-shadow: var(--shadow-m); }
.stop__img--sq { width: min(100%, 300px); }
.stop:nth-child(even) .stop__img { margin-left: auto; }
.stop--next .cta { margin-top: var(--s-5); }

@media (max-width: 760px) {
  .nav__name { display: none; }
  /* Bereiche untereinander, flacher */
  /* Zeitachse links, alle Stationen rechts davon */
  .timeline__line { left: 5.5px; }   /* Mitte der Punkte (.stop::before) */
  .timeline__list { gap: 96px; }
  .stop { grid-template-columns: 1fr; padding-left: 42px; }
  .stop::before { left: 5.5px; top: 0.6em; }
  .stop__year, .stop:nth-child(even) .stop__year { order: 0; text-align: left; font-size: 44px; margin-bottom: 8px; }
  .stop:nth-child(even) .stop__body { order: 0; text-align: left; }
  .stop:nth-child(even) .stop__body p { margin-left: 0; }
}

@media (max-width: 760px) {
  .stop:not(.is-reached) .stop__year, .stop:nth-child(even):not(.is-reached) .stop__year, .stop:not(.is-reached) .stop__body, .stop:nth-child(even):not(.is-reached) .stop__body { translate: 40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stop { opacity: 1; }
  .timeline .h2, .stop__year, .stop__body { transition: none; translate: none !important; opacity: 1 !important; }
}

/* HERO
   Drei Ebenen übereinander: Himmel (top__bg), Name, freigestellte Berge (top__fg).
   Beide Bildebenen haben exakt dieselbe Grösse und Lage, sonst passen die Berge nicht aufeinander.
   object-position 58.5 %: der Horizont liegt im Bild bei rund 58.5 % der Höhe und bleibt so bei jedem
   Seitenverhältnis an derselben Stelle. Der Name steht auf dem Horizont, Gras, Zelt und Büsche ragen hinein.
   Horizontal 58 %: auf dem Handy bleibt die Sonne im Bild.
   Auf der Bühne setzt script.js --sink (Name sinkt) und --morph (Übergang zum Bergbild). */
.top {
  position: relative; height: 100vh; min-height: 560px; overflow: hidden;
  background: var(--navy); color: var(--white);
}
.top__bg, .top__fg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 58.5%;
  transform: translate3d(0, calc(var(--sink, 0) * -2.5vh), 0) scale(calc(1 + var(--sink, 0) * 0.06 + var(--morph, 0) * 0.04));
}
.top__bg { z-index: 0; }
.top__fg { z-index: 2; pointer-events: none; }
/* Vorne dasselbe Foto, aber nur die Berge: Maske mit gleicher Grösse und Lage wie object-fit/-position */
.top__fg {
  -webkit-mask-image: url("assets/hero/montalivet-maske.png?v=2"); mask-image: url("assets/hero/montalivet-maske.png?v=2");
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-position: 58% 58.5%; mask-position: 58% 58.5%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.top__text {
  position: absolute; z-index: 1;
  left: var(--edge); right: var(--s-8);
  bottom: 44.5%;
  transform: translate3d(0, calc(var(--sink, 0) * 14vh), 0);
  opacity: calc(1 - var(--sink, 0) * 1.25);
}
.top__kicker {
  font-weight: 300; font-size: clamp(22px, 3.2vw, 52px); line-height: 1.1;
  margin-bottom: 0.08em; padding-left: 0.08em;
}
/* Agenda läuft schmaler als Inter: grösser erst, wenn Agenda geladen ist (.has-agenda) */
.top__name {
  font-family: var(--font-title); font-weight: 600; text-transform: uppercase;
  font-size: clamp(48px, 11.5vw, 250px); line-height: 0.8; letter-spacing: var(--track-caps);   /* Inter, bis Agenda geladen ist */
  white-space: nowrap;
}
.has-agenda .top__name { font-size: var(--fs-hero); }
/* Kanäle senkrecht am rechten Rand */
.top__social {
  position: absolute; z-index: 3; right: var(--edge); bottom: var(--s-6);
  list-style: none; display: flex; gap: var(--s-5);
}
.top__social a, .top__credit {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--light); text-decoration: none;
}
.top__social a:hover { color: var(--white); }
.top__social, .top__credit { transition: opacity var(--dur-xs); }
.stage--pin .top__social, .stage--pin .top__credit { opacity: calc(1 - var(--sink, 0) * 2.5); }
.top__credit {
  position: absolute; z-index: 3; left: var(--edge); bottom: var(--s-6);
  font-weight: 400; letter-spacing: var(--track-caps); text-transform: none; font-size: var(--fs-label);
}

@media (max-width: 760px) {
  .top__name { font-size: 11.5vw; }
  .has-agenda .top__name { font-size: 13.6vw; }
  .top__social { right: var(--s-4); bottom: var(--s-8); gap: var(--s-4); }
  .top__credit { bottom: var(--s-5); }
}

/* BÜHNE: Start und «Wer ich bin»
   Grundzustand (Handy, «Bewegung reduzieren»): Hero, darunter Porträt und Text auf Creme.
   .stage--pin (Desktop): alles bleibt stehen, script.js setzt --sink, --morph und --card (0–1). */
.stage { position: relative; }
.stage__sticky { position: relative; }
.about {
  position: relative; overflow: hidden; background: var(--cream);
  padding: var(--s-9) max(var(--s-4), env(safe-area-inset-right, 0px)) var(--s-9) max(var(--s-4), env(safe-area-inset-left, 0px));
}
/* «Wer ich bin»: Porträt links, Text rechts, auf der hellen Fläche */
.about__card {
  position: relative; z-index: 1; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center;
  gap: clamp(var(--s-6), 6vw, var(--s-9));
}
.about__photo { margin: 0; overflow: hidden; background: var(--beige); aspect-ratio: 3 / 4; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.about__text { min-width: 0; }
.about__text .h2 { margin: 0 0 var(--s-6); }
.about__text .lead { max-width: 32ch; margin-bottom: var(--s-5); }
.about__text p:not(.lead) { max-width: 52ch; color: var(--muted); }
/* Fakten ohne Linien: zwei luftige Spalten */
.about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); margin-top: var(--s-7); border: 0; }
.about__facts div { padding: 0; border: 0; }
.about__facts dd { margin-top: var(--s-1); }

/* Text fliesst gestaffelt ein: jedes Element (--i) kommt etwas später.
   Ohne Bühne (Handy) ist --card nicht gesetzt und alles sofort sichtbar. */
.flow {
  --t: clamp(0, calc((var(--card, 1) - 0.4 - var(--i, 0) * 0.06) * 4), 1);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * var(--s-6)), 0);
}

.stage--pin { height: 410vh; }   /* 210vh (Animation 183vh + kurze Lesepause) + 100vh Bühne + 100vh, in der das Portfolio darüberfährt */
.stage--pin .stage__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.stage--pin .top { position: absolute; inset: 0; height: auto; min-height: 0; }
/* Übergang: die helle Fläche blendet über das Montalivet-Bild. Fährt das Portfolio darüber (--enter 0–1), dunkelt sie sanft zu Navy ab. */
.stage--pin .about {
  position: absolute; inset: 0; z-index: 4; padding: 0;
  background: rgb(var(--cream-rgb) / var(--morph, 0));
  pointer-events: none;
}
.stage--pin .about__card { z-index: 1; }
/* Porträt links über die volle Höhe, Text rechts mittig */
.stage--pin .about::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--navy); opacity: calc(var(--enter, 0) * 0.7);
}
.stage--pin .about__card {
  position: absolute; inset: 0; max-width: none; margin: 0;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 0; align-items: stretch;
  pointer-events: none;
}
.stage--pin.is-card .about__card { pointer-events: auto; }
.stage--pin .about__photo {
  --pp: clamp(0, calc(var(--card, 0) * 1.7), 1);
  aspect-ratio: auto; height: 100%;
  clip-path: inset(0 calc((1 - var(--pp)) * 100%) 0 0);
}
.stage--pin .about__photo img { transform: scale(calc(1.1 - var(--pp) * 0.1)); }
.stage--pin .about__text {
  align-self: center;
  padding: calc(var(--nav-h) + var(--s-5)) clamp(var(--s-7), 7vw, var(--s-10)) var(--s-7);
  max-width: 820px;
}


@media (max-width: 760px) {
  .about { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .about__card { grid-template-columns: 1fr; gap: var(--s-6); }
  .about__photo { max-height: 70vh; }
  /* auf dem Handy ragt der Titel von unten ins Porträt */
  .about__text .h2 { margin: 0 0 var(--s-5); }
  .about__facts { grid-template-columns: 1fr; }
}

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* PORTFOLIO: Vollbild-Slider
   Aufbau wie ein Reise-Slider: das Bild füllt die Bühne, links Titel und Text, unten rechts die nächsten Arbeiten,
   darunter Pfeile, Fortschritt und Zähler. Eckig, ohne Schatten und Verläufe (Styleguide); die Abdunklung ist eine flache Navy-Fläche.
   .works--pin (Desktop): schiebt sich von unten über die Bühne. Blättern nur mit Pfeilen, Pfeiltasten, seitlichem Scrollen oder Timer. */
.works { position: relative; z-index: 2; background: var(--navy); color: var(--white); }
/* Desktop: das Portfolio beginnt in der letzten Bildschirmhöhe der Bühne und schiebt sich von unten über das stehende Video */
.works--pin { margin-top: -100vh; }
.works__sticky { position: relative; height: 100svh; min-height: 620px; max-height: 940px; overflow: hidden; }
.works--pin .works__sticky { position: sticky; top: 0; height: 100vh; max-height: none; }
.works__stage {
  --pad: var(--edge);
  --col: clamp(340px, 44vw, 780px);          /* hier beginnt die rechte Spalte */
  --gap: 34px;                                  /* Abstand zwischen den Karten */
  /* Breite so, dass rechts etwa 3,7 Karten sichtbar sind (die vierte angeschnitten); bei niedrigen Fenstern begrenzt die Höhe */
  --cardW: min(calc((100vw - var(--col) - 3 * var(--gap)) / 3.7), calc(46vh * 0.7));
  --cardH: calc(var(--cardW) / 0.7);
  --below-cards: clamp(112px, 17vh, 160px);     /* Platz unter den Karten; Pfeile, Linie und Zahl stehen darin mittig */
  --foot: 36px;
  --below: calc(var(--foot) + 48px + 24px);   /* Handy: Platz für die Steuerung unter dem Text */
  position: absolute; inset: 0; overflow: hidden;
}

/* Slides: gestapelt, die aktive blendet über die vorige */
.slide {
  position: absolute; inset: 0; background: var(--navy);
  opacity: 0; visibility: hidden; z-index: 0;
  transition: opacity var(--dur-m) var(--ease-soft), visibility 0s linear var(--dur-m);
}
/* Die alte Slide wird beim Weggehen mit Bild und Text grösser, während die neue Karte aufgeht */
.slide.is-prev { opacity: 1; visibility: visible; z-index: 2; transform: scale(1.14); transition: transform var(--dur-m) var(--ease-in-out); }
.slide.is-active { opacity: 1; visibility: visible; z-index: 6; transition: opacity var(--dur-m) var(--ease-soft); }
/* Während die Karte zum Vollbild wächst: Hintergrund und Abdunklung der neuen Slide warten, nur ihr Text steht schon darüber */
.slide.is-morphing { opacity: 1; visibility: visible; transition: none; background: none; }
.slide.is-morphing::before, .slide.is-morphing .slide__bg, .slide.is-morphing .slide__video { opacity: 0; }
.slide.is-morphing .slide__bg { transform: none; transition: none; }
/* Rückwärts: die vorige Arbeit liegt sofort voll da (ohne Einblenden), das Zwischenbild schrumpft darüber in seine Karte */
.slide.is-entering { transition: none; }
/* … und der Text der Arbeit, die geht, blendet über dem schrumpfenden Bild aus */
.slide.is-leaving { opacity: 1; visibility: visible; z-index: 8; transition: none; background: none; pointer-events: none; }
.slide.is-leaving::before, .slide.is-leaving .slide__bg, .slide.is-leaving .slide__video { opacity: 0; }
/* flache Navy-Abdunklung über dem Bild, damit weisse Schrift lesbar bleibt */
.slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim); }
.slide__bg, .slide__video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.slide__bg { transform: scale(1.07); transition: transform var(--dur-xxl) var(--ease-out); }
.slide.is-active .slide__bg { transform: none; }
.slide__video { opacity: 0; transition: opacity var(--dur-m) var(--ease-soft); }
.slide__video.is-playing { opacity: 1; }

/* Gerahmte Arbeiten (Design): Hintergrund = dasselbe Bild unscharf und abgedunkelt, die Arbeit selbst ganz im Rahmen.
   Der Rahmen steht rechts über der Kartenreihe; die Karten dürfen ihn unten leicht überlappen. */
.slide--frame::before { display: none; }
.slide--frame .slide__bg { filter: blur(38px) brightness(0.46) saturate(1.1); transform: scale(1.3); transition: none; }
.slide--frame.is-active .slide__bg { transform: scale(1.3); }
.slide__feature {
  --avail: calc(100vw - var(--col) - var(--pad));            /* Platz rechts neben dem Text */
  --fh: calc(var(--stageH, 100vh) - var(--nav-h) - 56px - var(--below-cards) - var(--cardH) + 56px);   /* --stageH setzt script.js */
  --fw: min(var(--avail), calc(var(--fh) * 1.78));
  position: absolute; z-index: 2; left: var(--col); top: calc(var(--nav-h) + 56px);
  height: var(--fh); width: var(--fw);
  border-radius: var(--r-m); overflow: hidden; background: rgb(var(--deep-rgb) / 0.25);
  box-shadow: var(--shadow-l);
}
/* Ohne Kartenreihe (Design): der Rahmen nutzt die ganze Höhe über den Pfeilen und steht mittig rechts neben dem Text */
.works--nocards .works__cards { display: none; }
.works--nocards .slide__feature {
  --area: calc(var(--stageH, 100vh) - var(--nav-h) - 40px - var(--below-cards) - 12px);   /* Höhe zwischen Kapiteln und Pfeilen */
  --fh: min(var(--area), calc(var(--avail) / 1.78));                                        /* Seitenverhältnis der Arbeit bleibt erhalten */
  top: calc(var(--nav-h) + 40px + (var(--area) - var(--fh)) / 2); margin-left: calc((var(--avail) - var(--fw)) / 2);
}
.slide__feature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__feature .slide__video { z-index: 1; }
/* Video: Vorschau läuft im Rahmen, der runde Knopf öffnet das ganze Video */
.slide__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0;
  border: 1px solid rgb(var(--white-rgb) / 0.75); border-radius: var(--r-round); background: rgb(var(--deep-rgb) / 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; transition: transform var(--dur-xs) var(--ease-soft), background var(--dur-xs) var(--ease-soft);
}
.slide__play::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--white);
}
.slide__play:hover { transform: scale(1.08); background: rgb(var(--white-rgb) / 0.2); }
/* ohne Bild: grosses Zeichen mit Hinweis */
.slide__feature--plain { display: grid; place-content: center; justify-items: center; gap: 18px; background: rgb(var(--white-rgb) / 0.06); }
.slide__feature .slide__mark { position: static; width: min(18%, 130px); transform: none; opacity: 0.55; }
.feature__note { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--light); }
.slide--frame.is-morphing .slide__bg, .slide--frame.is-leaving .slide__bg { opacity: 1; }
.slide--frame.is-morphing .slide__feature, .slide--frame.is-leaving .slide__feature { opacity: 0; }
/* ohne Bild: grosses Logo ganz leicht im Hintergrund */
.slide--mark::before, .slide[data-fit="mark"]::before { background: none; }
.slide__mark {
  position: absolute; z-index: 0; right: var(--pad); top: 46%; width: min(34vw, 460px); height: auto;
  color: var(--white); opacity: 0.07; transform: translateY(-50%);
}

/* Text links, senkrecht mittig */
.slide__copy {
  position: absolute; z-index: 3; left: var(--pad); top: 50%; transform: translateY(-50%);
  width: calc(var(--col) - var(--pad) - 36px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.slide__copy > * {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur-m) var(--ease-soft), transform var(--dur-m) var(--ease-out);
}
.slide.is-active .slide__copy > * { opacity: 1; transform: none; transition-delay: calc(var(--td, 0.2s) + var(--k, 0) * 0.11s); }
/* Titel: Wort für Wort aus einer Maske nach oben */
.slide__copy > .slide__title { opacity: 1; transform: none; }
.slide__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0 0.06em; margin: -0.12em 0 -0.06em; }
.slide__title .w > span {
  display: inline-block; transform: translate3d(0, 115%, 0);
  transition: transform var(--dur-m) var(--ease-out);
}
.slide.is-active .slide__title .w > span { transform: none; transition-delay: calc(var(--td, 0.2s) + var(--wi, 0) * 0.12s); }
/* Gerahmte Arbeiten blenden über die alte: der Text wartet, bis die neue Arbeit steht */
.slide--frame { --td: 0.55s; }
/* Seitlicher Wechsel gerahmter Arbeiten (siehe swap() in script.js): beide Slides stehen übereinander, Rahmen und Text fährt per Animation */
.slide.is-swap-out { opacity: 1; visibility: visible; z-index: 2; transition: none; }
.slide.is-swap-in { opacity: 1; visibility: visible; transition: none; }
.slide--frame.is-swap-in { background: none; }
.slide.is-swap-out .slide__copy > * { opacity: 1; transform: none; transition: none; }
.slide.is-swap-out .slide__title .w > span { transform: none; transition: none; }
/* Abgang: der alte Text bleibt stehen und wird mit dem Bild grösser, bis die neue Karte darüber liegt */
.slide.is-prev .slide__copy > * { opacity: 1; transform: none; transition: none; }
.slide.is-prev .slide__title .w > span { transform: none; transition: none; }
/* Während das Bild wächst bleibt der neue Text unsichtbar; er erscheint erst, wenn das Bild gross steht */
.slide.is-morphing .slide__copy > *, .slide.is-entering .slide__copy > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: none; }
.slide.is-morphing .slide__copy > .slide__title, .slide.is-entering .slide__copy > .slide__title { opacity: 1; transform: none; }
.slide.is-morphing .slide__title .w > span, .slide.is-entering .slide__title .w > span { transform: translate3d(0, 115%, 0); transition: none; }
.slide.is-leaving .slide__copy > * { opacity: 0; transform: translate3d(0, -12px, 0); transition: opacity var(--dur-s) var(--ease-soft), transform var(--dur-s) var(--ease-soft); transition-delay: 0s; }
.slide.is-leaving .slide__title .w > span { transform: none; transition: none; }
.slide__copy > :nth-child(2) { --k: 1; }
.slide__copy > :nth-child(3) { --k: 2; }
.slide__copy > :nth-child(4) { --k: 3; }
.slide__tag {
  position: relative; padding-top: 14px;
  font-size: var(--fs-meta); letter-spacing: 0.02em; color: var(--light);
}
.slide__tag::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 2px; background: var(--white); }
.slide__title {
  margin: 10px 0 18px;
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(36px, min(4.8vw, 9vh), 88px); line-height: 0.94; letter-spacing: 0.01em;
  hyphens: manual; overflow-wrap: break-word; text-wrap: balance;
}
.has-cond .slide__title { font-size: clamp(44px, min(6.2vw, 10.5vh), 116px); }
.slide__desc { max-width: 40ch; margin-bottom: 24px; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; color: var(--light); }


/* Oben mittig: die drei Kapitel */
.works__top {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(var(--nav-h) + 24px);
  display: flex; justify-content: center;
}
.works__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 34px; }
.works__tab {
  padding: 6px 0; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--light); opacity: 0.7;
  font: inherit; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  transition: opacity var(--dur-xs), border-color var(--dur-xs), color var(--dur-xs);
}
.works__tab:hover { opacity: 1; }
/* In der Navigationsleiste: im freien Raum zwischen Logo und Links (die Leiste ist flex mit space-between),
   so überdecken die Kapitel nie die Links. Nur sichtbar, solange das Portfolio im Bild ist. */
.nav .works__tabs {
  height: 100%; margin: 0 var(--s-6); flex-wrap: nowrap; gap: var(--s-5); align-items: center;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-xs) var(--ease-soft), visibility 0s linear var(--dur-xs);
}
.nav.is-works .works__tabs { opacity: 1; visibility: visible; transition-delay: 0s; }
.works__tab[aria-disabled] { opacity: 0.4; cursor: default; }
.works__tab[aria-current="true"] { color: var(--white); opacity: 1; border-bottom-color: var(--white); }

/* Rechts unten: Kartenreihe, Pfeile, Fortschritt, Zähler */
.works__right { position: absolute; z-index: 10; left: var(--col); right: 0; bottom: 0; }
/* wachsende Karten dürfen über den Rand der Reihe hinausragen: der Zuschnitt ist grosszügiger als die Reihe selbst */
.works__cards { height: var(--cardH); clip-path: inset(-60px 0 -170px -30px); }   /* links nur so viel, wie die erste Karte beim Wachsen braucht, sonst blitzt die vorige durch */
.works__track {
  display: flex; gap: var(--gap); width: max-content; will-change: transform;
  transition: transform var(--dur-xl) var(--ease-in-out);
}
.card {
  position: relative; z-index: var(--z, 1); flex: 0 0 var(--cardW); height: var(--cardH); padding: 0; overflow: hidden;
  border: 0; border-radius: var(--r-m); background: var(--navy-deep); box-shadow: var(--shadow-l); color: var(--white);   /* Schatten fällt nach rechts unten; die linke Karte liegt über der rechten (--z) */
  font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s);
}
/* Darauffahren: die Karte wächst und hebt sich ab */
.card:hover, .card:focus-visible {
  transform: scale(1.1); z-index: 2000; box-shadow: var(--shadow-xl);
}
/* Das Bild zeigt einen Ausschnitt (--cz = Zoom, --cfy = Höhe der Hauptsache); object-position setzt script.js */
.card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--cz, 1)); transform-origin: 50% var(--cfy, 50%); transition: transform var(--dur-m) var(--ease-soft);
}
.card:hover img { transform: scale(calc(var(--cz, 1) * 1.06)); }
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(to top, rgb(var(--deep-rgb) / 0.78), rgb(var(--deep-rgb) / 0));
}
/* Text auf der Karte: wo es ist / was es ist */
.card__cap { position: absolute; z-index: 1; left: 16px; right: 12px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.card__tag { position: relative; padding-top: 12px; font-size: clamp(11px, 0.9vw, 14px); line-height: 1.25; color: rgb(var(--white-rgb) / 0.85); }
.card__tag::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 2px; background: var(--white); }
.card__title {
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(19px, 1.95vw, 30px); line-height: 1; white-space: nowrap;
}
.card--plain { display: grid; place-items: center; background: rgb(var(--white-rgb) / 0.08); }
.card__mark { width: 42%; height: auto; color: var(--white); opacity: 0.85; }
/* die Karte, aus der gerade das Vollbild wächst, ist leer, bis es fertig ist */
.card.is-taken { opacity: 0; }
.card.is-past { box-shadow: none; opacity: 0; }   /* Karten links der Reihe (die gerade gewachsene) bleiben weg, auch während die Reihe noch nachrückt */
.card__cap, .card::after { transition: opacity var(--dur-s) var(--ease-soft); }
.card.is-landing { box-shadow: none; transition: none; }
.card.is-landing .card__cap, .card.is-landing::after { opacity: 0; transition: none; }

/* Zwischenbild für die Übergänge Karte ↔ Vollbild (siehe script.js); die Geometrie animiert script.js */
.works__morph { position: absolute; left: 0; top: 0; overflow: hidden; background: var(--navy); pointer-events: none; }
.works__morph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.works__morph.is-plain img { display: none; }
.works__morph i { position: absolute; inset: 0; background: var(--scrim); opacity: 0; }
.works__controls { display: flex; align-items: center; gap: 14px; height: var(--below-cards); padding-right: var(--pad); }
.works__btn {
  flex: none; width: 48px; height: 48px; border: 1px solid var(--line-dark-strong); border-radius: var(--r-round); background: transparent; color: var(--white);
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: background var(--dur-xs), color var(--dur-xs);
}
.works__btn:hover { background: var(--white); color: var(--navy); }
/* Timer: die Linie füllt sich in 7,5 Sekunden */
.works__line { position: relative; flex: none; width: clamp(90px, 9vw, 150px); height: 2px; margin-left: 10px; background: rgb(var(--white-rgb) / 0.3); }
.works__bar {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--white);
  transform-origin: left; transform: scaleX(0);
  animation: works-timer 7.5s linear forwards;
}
.works.is-paused .works__bar, .works.is-arriving .works__bar { animation-play-state: paused; }
@keyframes works-timer { to { transform: scaleX(1); } }
.works__count { overflow: hidden; margin-left: auto; font-family: var(--font-cond); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.works__num { font-size: clamp(40px, 4.4vw, 64px); }

/* Einblenden beim Hineinscrollen (.is-entered setzt script.js): Die erste Arbeit steht sofort da, nur Karten und Steuerung warten aufs Einrasten */
.slide__feature { transition: opacity var(--dur-m) var(--ease-soft) 0.1s, translate var(--dur-m) var(--ease-out) 0.1s; }
.works:not(.is-entered) .card { opacity: 0; }
.works.is-entered .card {
  animation: card-in calc(2.1s + var(--ci, 0) * 0.4s) var(--ease-out) backwards, card-fade var(--dur-m) var(--ease-out) backwards;
  animation-delay: calc(0.05s + var(--ci, 0) * 0.14s), calc(0.05s + var(--ci, 0) * 0.14s);
}
/* wie im Vorbild: die Reihe fährt von weit rechts herein, die erste Karte kommt zuerst zur Ruhe, jede weitere liegt etwas zurück und schliesst dann auf */
@keyframes card-in { from { translate: calc(46vw + var(--ci, 0) * 9vw) 0; } }
@keyframes card-fade { from { opacity: 0; } }
.works.is-entered .card.is-still { animation: none; }   /* versteckte Karten fahren nicht mit */
.works__controls, .works__count { transition: opacity var(--dur-m) var(--ease-soft) 0.7s, translate var(--dur-m) var(--ease-out) 0.7s; }
.works:not(.is-entered) .works__controls { opacity: 0; translate: 0 18px; transition: none; }

/* Hinausfahren beim Weiterscrollen nach unten: Text nach links, Karten/Steuerung/Rahmen nach rechts (--exit setzt script.js) */
.slide__copy { translate: calc(var(--exit, 0) * -45vw) 0; opacity: calc(1 - var(--exit, 0) * 1.2); }
.works__right { translate: calc(var(--exit, 0) * 45vw) 0; opacity: calc(1 - var(--exit, 0) * 1.2); }
.slide__feature { transform: translateX(calc(var(--exit, 0) * 60vw)); }

/* Handy und «Bewegung reduzieren»: eine Spalte, Kartenreihe aus, Pfeile und Wischen */
@media (max-width: 760px) {
  .works__stage { --pad: 20px; --foot: 24px; --col: 0px; --below: calc(var(--foot) + 48px + 24px); }
  .works__right { left: var(--pad); right: var(--pad); bottom: var(--foot); }
  .works__cards { display: none; }
  .works__controls { height: 48px; padding-right: 0; }
  .works__top { top: calc(var(--nav-h) + 14px); }
  .works__tabs { gap: 2px 22px; }
  .works__tab { font-size: 11px; letter-spacing: 0.08em; }
  .slide::before { background: rgb(var(--deep-rgb) / 0.52); }
  .slide__copy { left: var(--pad); width: calc(100% - 2 * var(--pad)); top: 50%; }
  .slide__title { font-size: clamp(34px, 11vw, 52px); margin: 8px 0 12px; }
  .has-cond .slide__title { font-size: clamp(40px, 13vw, 60px); }
  .slide__desc {
    margin-bottom: var(--s-4); font-size: var(--fs-meta);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .slide__mark { width: 60vw; top: 38%; }
  .works__num { font-size: 40px; }
  /* gerahmte Arbeit: oben unter den Kapiteln, der Text darunter am unteren Rand */
  .slide__feature, .works--nocards .slide__feature { left: var(--pad); right: var(--pad); width: auto; margin-left: 0; top: calc(var(--nav-h) + 62px); height: clamp(140px, 27vh, 280px); }
  .slide--frame .slide__copy { top: auto; bottom: calc(var(--below) + 4px); transform: none; }
}
/* niedrige Handys: weniger Text, damit nichts übereinander liegt */
@media (max-width: 760px) and (max-height: 720px) {
  .slide__desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide__copy, .works__right { translate: none; opacity: 1; }
  .slide__feature { transform: none; }
  .slide, .slide__bg, .slide__copy > *, .works__track, .works__bar { transition: none !important; }
  .slide__bg { transform: none !important; }
    .slide__copy > *, .slide__title .w > span { opacity: 1; transform: none !important; }
  .works__bar { animation: none !important; }
  .card { transition: none !important; }
}

.works :focus-visible { outline-color: var(--light); }

/* LOADER (nur erster Besuch, html.is-loading) und Auftritt des Hero (html.is-revealed)
   script.js zählt die Prozente hoch und setzt danach is-revealed. */
html.is-loading, html.is-loading body { overflow: hidden; }
.loader {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: max(40px, env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  color: var(--white); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-s) var(--ease-soft), visibility 0s 0.5s;
}
html.is-loading .loader { opacity: 1; visibility: visible; transition: none; }
.loader__wheel {
  width: 26px; height: 26px; border-radius: var(--r-round);
  border: 2px solid rgb(var(--white-rgb) / 0.25); border-top-color: var(--white);
  animation: loader-spin var(--dur-m) linear infinite;
}
.loader__pct {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label);
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgb(var(--deep-rgb) / 0.35);
}
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* Vor dem Auftritt: nur das Hero-Bild */
html.is-intro .nav,
html.is-intro .top__kicker,
html.is-intro .top__name,
html.is-intro .top__social,
html.is-intro .top__credit { opacity: 0; visibility: hidden; }

/* Auftritt: Nav morpht von oben rein, «Hallo, ich bin» von links nach rechts, Texte von unten nach oben */
html.is-revealed .nav { animation: intro-nav var(--dur-m) var(--ease-out) 0.05s backwards; }
html.is-revealed .top__kicker { animation: intro-kicker var(--dur-l) var(--ease-out) 0.35s backwards; }
html.is-revealed .top__name { animation: intro-up var(--dur-l) var(--ease-out) 0.6s backwards; }
html.is-revealed .top__social,
html.is-revealed .top__credit { animation: intro-up var(--dur-m) var(--ease-out) 1s backwards; }

@keyframes intro-nav {
  from { opacity: 0; transform: translateY(-100%) scaleY(0.6); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes intro-kicker {
  from { opacity: 0; transform: translateX(-48px); clip-path: inset(-20% 100% -20% 0); }
  to { opacity: 1; transform: none; clip-path: inset(-20% -10% -20% 0); }
}
@keyframes intro-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .loader__wheel { animation-duration: 2.4s; }
  html.is-revealed .nav,
  html.is-revealed .top__kicker,
  html.is-revealed .top__name,
  html.is-revealed .top__social,
  html.is-revealed .top__credit { animation: intro-fade var(--dur-m) var(--ease-soft) backwards; }
}

/* Footer-Titel: gleicher Auftritt wie im Hero, sobald er ins Bild kommt (script.js setzt .is-armed und .is-in).
   «Lernen wir» deckt sich von links nach rechts auf, «uns kennen.» steigt von unten auf. */
.contact__line { display: block; }
.contact__title.is-armed:not(.is-in) .contact__line { opacity: 0; }
.contact__title.is-in .contact__line--a { animation: intro-kicker var(--dur-l) var(--ease-out) 0.1s backwards; }
.contact__title.is-in .contact__line--b { animation: intro-up var(--dur-l) var(--ease-out) 0.4s backwards; }
@media (prefers-reduced-motion: reduce) {
  .contact__title.is-in .contact__line--a,
  .contact__title.is-in .contact__line--b { animation: intro-fade var(--dur-m) var(--ease-soft) backwards; }
}