/* ============================================================
   Johann Fleis — AI Art Director
   Design system: Espresso / Amber / Cream · cinematic editorial
   ============================================================ */

:root {
  /* palette (aus dem Studio-Foto) */
  --espresso-900: #0c0806;
  --espresso-800: #140d09;
  --espresso-700: #1c130c;
  --espresso-600: #271a10;
  --amber:        #f0a94e;
  --amber-soft:   #f6c07a;
  --amber-deep:   #c77b34;
  --cream:        #f2e7d7;
  --cream-dim:    #cdbda6;
  --taupe:        #97836c;
  --line:         rgba(242, 231, 215, 0.14);

  /* type */
  --f-display: "Fraunces", Georgia, serif;
  --f-sans:    "Familjen Grotesk", system-ui, sans-serif;
  --f-mono:    "Spline Sans Mono", ui-monospace, monospace;

  --nav-h: 74px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Position der Sektions-Marker — in jeder Sektion identisch */
  --marker-x: clamp(20px, 6vw, 120px);
  --marker-top: calc(var(--nav-h) + clamp(20px, 2.8vh, 38px));
  --marker-bottom: clamp(26px, 4.2vh, 54px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;               /* Sektionen rasten bündig oben ein (kein 40px-Bleed) */
  -webkit-text-size-adjust: 100%;

  /* Full-Page-Scroll: jede Sektion rastet als ganzer Screen ein */
  scroll-snap-type: y mandatory;

  /* native Scrollleiste weg — die Licht-Linie ist der Indikator */
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* alt-Edge */
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* WebKit / Blink */

/* Scroll-Sperre, solange die Intro läuft (JS nimmt .locked wieder weg).
   Während .locked sieht man NUR das Video — sonst nichts. */
html.locked, html.locked body {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--espresso-900);
  color: var(--cream);
  font-family: var(--f-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip statt hidden → bricht position:sticky nicht */
}

img { max-width: 100%; display: block; }

.mono {
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72em;
}
.muted { color: var(--taupe); }
em { font-style: italic; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 60px);
  color: var(--cream);
}
/* Fixer Balken hinter der Nav — deckt den oberen Rand sauber ab */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(10, 6, 4, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--line);
}

.nav__brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.nav__brand-mark {
  font-family: var(--f-display);
  font-weight: 600; font-size: 20px; letter-spacing: 0.02em;
}
.nav__brand-text {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.85;
}

.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__link {
  position: relative;
  color: inherit; text-decoration: none;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 0; opacity: 0.72;
  transition: opacity 0.3s var(--ease);
}
.nav__link:hover, .nav__link.is-active { opacity: 1; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
/* Kontakt = Call-to-Action: eigenständiger Pill-Button statt Text-Link.
   Ruhezustand amber-umrandet mit zartem Tint, füllt sich beim Hover / wenn
   die Kontakt-Sektion aktiv ist satt amber mit dunkler Schrift. */
.nav__link--cta {
  opacity: 1;
  color: var(--amber-soft);
  padding: 7px 18px;
  border: 1px solid rgba(240, 169, 78, 0.45);
  border-radius: 999px;
  background: rgba(240, 169, 78, 0.07);
  transition: color 0.35s var(--ease), background-color 0.35s var(--ease),
              border-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
              transform 0.35s var(--ease);
}
.nav__link--cta::after { display: none; }            /* kein Unterstrich */
.nav__link--cta:hover,
.nav__link--cta.is-active {
  color: var(--espresso-900);
  background-color: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 6px 20px rgba(240, 169, 78, 0.28);
}
.nav__link--cta:hover { transform: translateY(-1px); }


/* ---------- Sprachumschalter DE / EN ---------- */
.lang {
  display: flex; align-items: center; gap: 4px;
  margin-left: clamp(6px, 1vw, 14px);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--cream);
}
.lang__opt { opacity: 0.45; transition: opacity 0.3s var(--ease); }
.lang__opt.is-on { opacity: 1; }
.lang:hover .lang__opt { opacity: 0.8; }
.lang:hover .lang__opt.is-on { opacity: 1; }
.lang__sep { opacity: 0.3; }

.nav__burger { display: none; }

/* ============================================================
   HERO  (fixed → Content scrollt darüber)
   ============================================================ */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  z-index: 3;                         /* liegt ÜBER Linie/Timecode (z2) und gibt sie beim Wegscrollen frei */
  overflow: hidden;
  background: var(--espresso-900);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Layer 0 — Walk-in-Video (spielt 1×, friert am Ende ein) */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  background: var(--espresso-900);
  transform: scale(1.09);           /* End-Zustand: leicht herangezoomt */
  transform-origin: 48% 40%;
  transition: transform 2.8s var(--ease);
}

/* Layer 1 — scharfes Standbild (ECHTES Gesicht), verdeckt das Video im Ruhezustand */
.hero__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 1; pointer-events: none;
  opacity: 1;
  transform: scale(1.09); transform-origin: 48% 40%;
  /* Weiche Überblendung — ungefährlich, weil sie erst NACH dem Videoende
     startet: das Video steht dann auf seinem letzten Bild still. */
  transition: opacity 0.75s var(--ease), transform 2.8s var(--ease);
}

/* Layer 1 — Vignette: fährt das Licht runter, sobald Johann sitzt */
.hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(62% 64% at 48% 42%,
      rgba(6,4,2,0) 0%, rgba(6,4,2,0) 34%, rgba(6,4,2,0.82) 100%);
  opacity: 1;
  transition: opacity 2.2s var(--ease) 0.6s;
}

/* Layer 5 — dünne Kontur-Linie EXAKT an der Silhouette (aus Alpha-Kante) */
.hero__outline {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 5; pointer-events: none;
  transform: scale(1.09); transform-origin: 48% 40%;   /* zoomt mit dem Cutout */
  clip-path: inset(0 0 0 0);                            /* Reveal-Wipe von oben */
  transition: transform 2.8s var(--ease),
              clip-path 2.4s cubic-bezier(0.6,0,0.35,1) 0.6s;
}

/* Layer 2 — Name, HINTER dem Cutout */
.hero__name {
  /* 32 % (= ~18 px höher als 34 % bei 900 px Höhe) */
  position: absolute; left: 50%; top: 32%;
  transform: translate(-50%, -50%) scale(1.04);
  z-index: 2;
  margin: 0; text-align: center;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(46px, 13vw, 210px);
  line-height: 1;
  letter-spacing: -0.02em;
  word-spacing: 0.3em;
  color: transparent;
  background: linear-gradient(180deg, #fbf1e2 0%, #e8cfa8 55%, #b98a4e 100%);
  -webkit-background-clip: text; background-clip: text;
  opacity: 0.92;
  white-space: nowrap;
  text-shadow: 0 0 60px rgba(240,160,80,0.15);
  /* Name = langsamste Animation, kommt zuletzt an */
  transition: opacity 1.6s var(--ease) 0.6s, transform 2.6s var(--ease) 0.6s;
}

/* Layer 4 — Cutout (deckungsgleich mit dem eingefrorenen Video) */
.hero__subject {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 4;
  opacity: 1;
  transform: scale(1.09); transform-origin: 48% 40%;
  /* nur ein Hauch warmer Halo (ganz leicht, wie am Anfang) */
  filter: drop-shadow(0 0 22px rgba(240,180,110,0.14));
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  transition: opacity 0.75s var(--ease), transform 2.8s var(--ease);
}

/* Layer 6 — Text unten links */
.hero__meta {
  position: absolute; left: clamp(20px, 4vw, 60px); bottom: clamp(26px, 5vh, 60px);
  z-index: 6; max-width: 34ch;
  transition: opacity 1.4s var(--ease) 1.1s, transform 1.4s var(--ease) 1.1s;
}
.hero__role { margin: 0 0 10px; }
.hero__role .mono { color: var(--amber-soft); font-size: 13px; letter-spacing: 0.28em; }
.hero__claim {
  margin: 0 0 18px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.28;
  color: var(--cream);
}
.hero__claim em { color: var(--amber-soft); }
.hero__tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim);
}
.hero__tools i { width: 3px; height: 3px; border-radius: 50%; background: var(--amber-deep); display: inline-block; }

/* Hero-Code unten rechts (via .section__code positioniert) — blendet beim
   Reveal ein wie hero__meta, ersetzt den früheren Scroll-Indikator. */
.hero__code { transition: opacity 1s var(--ease) 1.6s; }

.hero__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Intro-Choreografie ----------
   Während .intro auf <html> liegt, läuft das Video. Sobald es endet (JS
   entfernt .intro), fliegen Name/Nav/Content ein, der Glow zeichnet sich,
   die Kamera zoomt auf Johann, und das Licht fährt runter (Vignette).       */
.nav { transition: transform 1.3s var(--ease) 0.35s; }

/* Ausgangszustand während das Video läuft */
.intro .nav             { transform: translateY(-100%); }
.intro .hero__video     { transform: scale(1); }               /* normal, kein Zoom */
.intro .hero__still      { opacity: 0; transform: scale(1); }  /* Standbild erscheint erst beim Reveal */
.intro .hero__vignette  { opacity: 0; }                        /* volles Licht */
.intro .hero__name        { opacity: 0; transform: translate(-50%, calc(-50% - 120vh)) scale(1); }  /* fliegt von ganz oben rein */
.intro .hero__outline     { transform: scale(1); clip-path: inset(0 0 100% 0); }  /* Linie wipet von oben rein */
.intro .hero__subject     { opacity: 0; transform: scale(1); } /* Cutout unsichtbar, Video zeigt Bewegung */
.intro .hero__meta      { opacity: 0; transform: translateY(48px); }
.intro .hero__code      { opacity: 0; }
.intro .hero__tag       { opacity: 0; }

/* Sektions-Marke im Hero: liegt an derselben Stelle wie in den Content-
   Sektionen und blendet beim Reveal sanft ein (wie hero__meta). */
.hero__tag { transition: opacity 1s var(--ease) 1.5s; }

/* ============================================================
   CONTENT — scrollt über den fixierten Hero
   ============================================================ */
.content {
  position: relative;
  z-index: 1;                         /* unter Linie/Timecode (z2) und Hero (z3) */
  background: var(--espresso-800);
}

.section {
  padding: clamp(90px, 14vh, 180px) clamp(20px, 6vw, 120px);
  position: relative;
  min-height: 100vh; min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;           /* ein Scroll = genau eine Sektion weiter */
  display: flex;
  flex-direction: column;
  justify-content: center;            /* Inhalt vertikal in der Bildschirmmitte … */
  justify-content: safe center;       /* … aber ohne oben abzuschneiden, wenn's höher wird */
}
.section + .section { border-top: 1px solid var(--line); }

.section__head { max-width: 62ch; margin-bottom: clamp(48px, 8vh, 96px); }

/* ---------- Sektions-Marker: in JEDER Sektion an exakt derselben Stelle ----------
   Beide sind absolut zur Sektion positioniert (nicht im Textfluss und nicht fixed),
   damit sie überall gleich sitzen und beim Scrollen nicht umspringen.            */
.section__tag {
  position: absolute;
  top: var(--marker-top);
  left: var(--marker-x);
  margin: 0;
  color: var(--amber);
  z-index: 3;
}
.section__code {
  position: absolute;
  right: var(--marker-x);
  bottom: var(--marker-bottom);
  text-align: right;
  line-height: 1.3;
  z-index: 3;
  pointer-events: none;
}
.section__code b {
  display: block;
  font-family: var(--f-mono); font-weight: 500;
  font-size: 26px; letter-spacing: 0.05em;
  color: var(--amber-soft);
}
.section__code i {
  font-family: var(--f-mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cream-dim);
}
.section__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(40px, 7vw, 96px); line-height: 0.98;
  letter-spacing: -0.02em; margin: 0 0 26px;
}
.section__title em { color: var(--amber-soft); }
.section__lead { font-size: clamp(16px, 1.5vw, 20px); color: var(--cream-dim); max-width: 52ch; }
.portfolio__note {
  margin: 12px 0 0; font-size: 11px; letter-spacing: 0.06em;
  color: var(--taupe); max-width: 52ch;
}

/* ---------- roter Faden: das Licht ---------- */
.thread {
  position: fixed; left: clamp(18px, 3.4vw, 52px); top: 0;
  height: 100vh; height: 100svh; z-index: 2; width: 2px; pointer-events: none;
  /* immer da — der Hero (z3) deckt sie ab und gibt sie beim Wegscrollen frei. Kein Fade. */
}
.thread__rail {
  position: absolute; left: 0; top: 12vh; bottom: 12vh; width: 1px;
  background: linear-gradient(var(--line), rgba(240,169,78,0.25), var(--line));
}
.thread__node {
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(240,169,78,0.16), 0 0 22px 6px rgba(240,169,78,0.55);
  transition: box-shadow 0.4s var(--ease);
}
.thread.pulse .thread__node {
  box-shadow: 0 0 0 7px rgba(240,169,78,0.22), 0 0 36px 12px rgba(240,169,78,0.8);
}

/* ============================================================
   WERDEGANG — Timeline
   ============================================================ */
/* 2 Spalten × 3 Reihen — damit der Werdegang auf EINEN Screen passt */
.timeline {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(3px, 0.45vh, 7px);
}
.tl {
  display: grid;
  grid-template-columns: minmax(58px, 74px) 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(6px, 0.72vh, 10px) 0;
  border-top: 1px solid var(--line);
}
.tl__year {
  font-family: var(--f-display);
  font-size: clamp(25px, 2.4vw, 34px); font-weight: 300;
  line-height: 1; color: var(--cream);
  display: flex; flex-direction: column; gap: 3px;
}
.tl__year small { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--taupe); }
.tl__kind { color: var(--amber-deep); display: inline-block; margin-bottom: 6px; font-size: 10.5px; }
.tl__role {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.22; margin: 0 0 4px;
}
.tl__org { margin: 0 0 6px; color: var(--amber-soft); font-size: clamp(13px, 1vw, 15px); }
.tl__desc { margin: 0; color: var(--cream-dim); font-size: clamp(13px, 1vw, 15px); line-height: 1.5; max-width: 46ch; }

/* ---- inhaltsdichte Sektionen kompakt rahmen, damit sie in 100vh passen ---- */
.werdegang, .skills, .portfolio {
  /* muss den freistehenden Tag (--marker-top) freihalten */
  padding-top: clamp(112px, 14vh, 150px);
  padding-bottom: clamp(56px, 7vh, 84px);   /* Platz für den Code unten rechts */
}
.werdegang .section__head,
.skills .section__head,
.portfolio .section__head { margin-bottom: clamp(14px, 2.2vh, 28px); }

.werdegang .section__title,
.skills .section__title,
.portfolio .section__title { font-size: clamp(28px, 4vw, 54px); margin-bottom: 12px; }

.werdegang .section__lead,
.skills .section__lead,
.portfolio .section__lead { font-size: clamp(13px, 1.05vw, 15px); }

/* Werdegang ist die dichteste Sektion — Weißraum knapper, Schrift bleibt gross */
.werdegang { padding-top: clamp(108px, 13.2vh, 142px); padding-bottom: clamp(46px, 5.6vh, 68px); }
.werdegang .section__title { font-size: clamp(26px, 3.6vw, 48px); }
.werdegang .section__head { margin-bottom: clamp(8px, 1.2vh, 15px); }

/* ============================================================
   SKILLS
   ============================================================ */
.skillgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, 1.8vw, 30px);
  width: 100%;
}
.skillgroup { border-top: 1px solid var(--line); padding-top: 18px; }
.skillgroup__label { color: var(--amber-deep); display: block; margin-bottom: 16px; font-size: 11.5px; }
.skilllist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.skilllist li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: clamp(14.5px, 1.15vw, 17px); color: var(--cream);
  border-bottom: 1px solid rgba(242,231,215,0.05); padding-bottom: 10px;
}
.skilllist li:last-child { border-bottom: none; }
.skilllist span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--taupe); white-space: nowrap; }

/* ---------- Toolstack-Laufband (Endlosschleife) ---------- */
.marquee { margin-top: clamp(22px, 3.4vh, 44px); width: 100%; }
.marquee__label {
  display: block; color: var(--taupe); font-size: 9.5px;
  margin-bottom: clamp(10px, 1.4vh, 16px);
}
.marquee__viewport {
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding-top: clamp(14px, 1.8vh, 22px);
  /* an den Rändern weich auslaufen lassen, statt hart abzuschneiden */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex; align-items: center;
  gap: clamp(34px, 4.6vw, 78px);
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
/* Liste steht 2× im Track → -50 % ist exakt ein Durchlauf, daher nahtlos */
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__viewport:hover .marquee__track { animation-play-state: paused; }

.marquee__item { display: flex; align-items: center; flex: none; }
.marquee__item b {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--cream); opacity: 0.5;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease);
}
/* Sobald echte SVGs drin liegen, greifen diese Regeln automatisch */
.marquee__item img {
  display: block; width: auto;
  height: clamp(17px, 2.1vh, 26px);
  opacity: 0.55;
  filter: brightness(0) invert(1);      /* beliebig buntes Logo → einfarbig hell */
  transition: opacity 0.4s var(--ease);
}
.marquee__viewport:hover .marquee__item b,
.marquee__viewport:hover .marquee__item img { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__viewport { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
/* ---------- Zwei Laufbänder: oben nach rechts, unten nach links ----------
   Einheitliche Reihenhöhe, Breite folgt dem Seitenverhältnis — dadurch stehen
   16:9, 9:16 und 3:4 sauber nebeneinander auf einer gemeinsamen Grundlinie. */
.reels { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 22px); width: 100%; }

.reel__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reel__track {
  display: flex; align-items: stretch;
  gap: clamp(10px, 1.2vw, 18px);
  width: max-content;
}
/* Liste steht 2× im Track → -50 % ist genau ein Durchlauf, also nahtlos */
.reel--right .reel__track { animation: reel-right 78s linear infinite; }
.reel--left  .reel__track { animation: reel-left  78s linear infinite; }
@keyframes reel-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes reel-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reel__viewport:hover .reel__track { animation-play-state: paused; }

.reel__item {
  --reel-h: clamp(140px, 22vh, 224px);   /* etwas niedriger → der „02"-Marker unten rechts kollidiert nicht mehr mit der unteren Reihe */
  position: relative; flex: none; margin: 0;
  height: var(--reel-h);
  border-radius: 4px; overflow: hidden;
  background: var(--espresso-600);
  border: 1px solid var(--line);
}
.reel__item.is-169 { aspect-ratio: 16 / 9; }
.reel__item.is-916 { aspect-ratio: 9 / 16; }
.reel__item.is-34  { aspect-ratio: 3 / 4;  }

.reel__media {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}
.reel__item:hover .reel__media { transform: scale(1.04); }

.reel__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 22px 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(to top, rgba(8,5,3,0.88), transparent);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.reel__item:hover .reel__cap { opacity: 1; }
.reel__cap b { font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--cream); }
.reel__cap .mono { font-size: 8.5px; color: var(--amber-soft); letter-spacing: 0.16em; }

@media (prefers-reduced-motion: reduce) {
  .reel--right .reel__track, .reel--left .reel__track { animation: none; }
  .reel__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.work { position: relative; }
.work__no {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  color: var(--cream); font-size: 12px; letter-spacing: 0.18em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.work__ph {
  /* Höhe viewport-relativ statt fixem Seitenverhältnis → Sektion bleibt bei 100vh */
  height: clamp(115px, 19vh, 225px);
  border-radius: 4px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(240,169,78,0.16), transparent 60%),
    linear-gradient(150deg, var(--espresso-600), var(--espresso-900));
  border: 1px solid var(--line);
  position: relative;
  transition: border-color 0.5s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.work__ph::after {
  content: "IN ARBEIT"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.28em;
  color: rgba(242,231,215,0.28);
}
.work:hover .work__ph {
  transform: translateY(-4px);
  border-color: rgba(240,169,78,0.5);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(240,169,78,0.14);
}
.work__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.work__meta h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; margin: 0; }
.work__meta .mono { color: var(--amber-deep); }

/* ============================================================
   PROFIL — Wer ich bin + Nutzen fürs Team
   ============================================================ */
.profil__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(32px, 3.6vw, 64px);
  align-items: start;          /* Tops bündig statt vertikal zentriert */
  width: 100%;
  max-width: 1200px;           /* nicht über die ganze Ultrawide-Breite ziehen */
}
.profil__text .section__title { margin-bottom: clamp(20px, 2.6vh, 32px); }
.profil__text p {
  margin: 0 0 clamp(12px, 1.6vh, 20px);
  max-width: 46ch;
  color: var(--cream-dim);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.65;
}
.profil__text p:last-child { margin-bottom: 0; color: var(--cream); }

/* Nutzen-Spalte als eigenständiges Panel — bindet sie an den Text statt frei
   rechts zu schweben (gleiche Container-Sprache wie die Ziel-Karten). */
.profil__value {
  background: linear-gradient(158deg, rgba(240,169,78,0.05), rgba(20,13,9,0.3));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 3vh, 34px) clamp(22px, 2vw, 32px);
}
.profil__value-label { display: block; color: var(--taupe); font-size: 9.5px; margin-bottom: clamp(14px, 2vh, 22px); }
.benefit { border-top: 1px solid var(--line); padding: clamp(13px, 1.8vh, 20px) 0; }
.benefit:first-child { border-top: none; padding-top: 0; }   /* im Panel: Trenner nur zwischen den Punkten */
.benefit:last-child { padding-bottom: 0; }
.benefit__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(17px, 1.6vw, 22px); color: var(--amber-soft);
  margin: 0 0 6px;
}
.benefit__text {
  margin: 0; color: var(--cream-dim);
  font-size: clamp(13px, 1vw, 15px); line-height: 1.5; max-width: 44ch;
}

/* ============================================================
   ZIEL — Was ich suche
   ============================================================ */
/* Kopf näher an die Karten rücken (Standard-Abstand war zu groß → Void) */
.ziel .section__head { margin-bottom: clamp(22px, 3.4vh, 44px); }

.ziel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  width: 100%;
}
/* Karten als eigenständige Panels statt loser Hairlines — gibt der Sektion Halt */
.zielcard {
  background: linear-gradient(158deg, rgba(240,169,78,0.06), rgba(20,13,9,0.35));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 2.6vh, 30px) clamp(18px, 1.5vw, 26px);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.zielcard:hover {
  border-color: rgba(240,169,78,0.4);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.zielcard__label {
  display: block; color: var(--amber-deep); font-size: 10px;
  margin-bottom: clamp(12px, 1.6vh, 18px);
}
.zielcard__value {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(24px, 2.9vw, 40px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--cream);
  margin: 0 0 10px;
}
.zielcard__note { margin: 0; color: var(--taupe); font-size: clamp(12.5px, 0.95vw, 14.5px); }

.ziel__note {
  width: 100%;
  margin: clamp(26px, 3.6vh, 50px) 0 0;
  padding-top: clamp(16px, 2vh, 26px);
  border-top: 1px solid var(--line);
  color: var(--cream-dim);
  font-size: clamp(13px, 1.05vw, 15px);
}

/* ============================================================
   ÜBERSICHT / KONTAKT
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px;
  padding: 15px 26px; border: 1px solid var(--line); border-radius: 40px;
  color: var(--cream); text-decoration: none;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.btn .mono { color: var(--amber-soft); }
.btn:hover { border-color: var(--amber-deep); background: rgba(240,169,78,0.06); }

/* Übersicht — links Text, rechts die PDF-Vorschau */
.uebersicht__grid {
  display: grid;
  /* Text bekommt eine feste Lesebreite, das Blatt den Rest — dadurch stehen
     beide zueinander statt an den Außenkanten zu kleben.                    */
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
  width: 100%;
}
.uebersicht__text .section__title { margin-bottom: 20px; }
.uebersicht__text .section__lead { max-width: 34ch; }

/* Fakten zum Dokument — gibt der linken Spalte Substanz */
.facts {
  margin: clamp(26px, 3.6vh, 44px) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line);
}
.facts > div {
  display: flex; align-items: baseline; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid rgba(242,231,215,0.05);
}
.facts dt { flex: none; width: 6.5rem; color: var(--taupe); font-size: 9.5px; }
.facts dd { margin: 0; color: var(--cream-dim); font-size: clamp(13px, 1vw, 15px); }

/* Platzhalter-Blatt im A4-Format */
.pdfprev { display: flex; justify-content: center; }
.pdfprev__stack { position: relative; }

.pdfprev__sheet {
  position: relative;
  height: min(60vh, 600px);
  aspect-ratio: 1 / 1.414;
  border: 1px solid rgba(242,231,215,0.16);
  border-radius: 4px;
  background: linear-gradient(158deg, rgba(242,231,215,0.11), rgba(242,231,215,0.035));
  box-shadow: 0 34px 80px rgba(0,0,0,0.55);
  padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: rotate(-1.4deg);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
/* zweites Blatt dahinter → Tiefe */
.pdfprev__sheet--back {
  position: absolute; inset: 0;
  transform: rotate(3deg) translate(10px, 6px);
  background: rgba(242,231,215,0.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.pdfprev__stack:hover .pdfprev__sheet { transform: rotate(0deg); }
.pdfprev__stack:hover .pdfprev__sheet--back { transform: rotate(2deg) translate(14px, 8px); }

.pdfprev__badge {
  position: absolute; top: 13px; right: 15px;
  font-size: 8px; color: var(--taupe); letter-spacing: 0.2em;
}

/* Kopfbereich: „Foto" + Name */
.pdfprev__head { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.pdfprev__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 2px;
  background: radial-gradient(80% 80% at 50% 35%, rgba(240,169,78,0.30), rgba(242,231,215,0.06));
}
.pdfprev__headlines { display: flex; flex-direction: column; gap: 7px; flex: 1; }

.pdfprev__line {
  display: block; height: 6px; width: 100%; border-radius: 2px;
  background: rgba(242,231,215,0.13);
}
.pdfprev__line--name { height: 13px; width: 74%; background: rgba(240,169,78,0.42); }
.pdfprev__line--head { height: 7px; width: 44%; background: rgba(240,169,78,0.26); margin: 13px 0 9px; }
.pdfprev__rule { display: block; height: 1px; background: rgba(242,231,215,0.12); margin: 14px 0 4px; }

.pdfprev__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pdfprev__cols > div { display: flex; flex-direction: column; gap: 8px; }

.kontakt { background: var(--espresso-900); }
.kontakt__inner { width: 100%; }
.kontakt__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(34px, 6vw, 84px); line-height: 1.02;
  letter-spacing: -0.02em; margin: 0 0 40px;
}
.kontakt__title em { color: var(--amber-soft); }
.kontakt__mail {
  display: inline-block;
  font-family: var(--f-display); font-size: clamp(22px, 3vw, 40px);
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.kontakt__mail:hover { color: var(--amber-soft); border-color: var(--amber-deep); }
.kontakt__loc { display: block; margin-top: 30px; color: var(--taupe); }
.kontakt__facts { max-width: 44rem; }
.kontakt__facts dt { width: 8.5rem; }

.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(30px, 5vh, 62px); padding-top: 22px;
  border-top: 1px solid var(--line); color: var(--taupe);
}

/* ============================================================
   REVEAL animations
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll-line::after { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 20px clamp(20px, 6vw, 40px) 30px;
    background: rgba(12,8,6,0.96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%); transition: transform 0.5s var(--ease);
    mix-blend-mode: normal;
  }
  .nav { mix-blend-mode: normal; color: var(--cream); }
  .nav.open .nav__links { transform: none; }
  .nav__link { font-size: 15px; padding: 10px 0; }
  .nav__link--cta { padding: 9px 20px; margin-top: 8px; align-self: flex-start; }
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: none; border: 0; cursor: pointer;
  }
  .nav__burger span { display: block; width: 22px; height: 1.6px; background: var(--cream); transition: transform 0.4s var(--ease), opacity 0.3s; }
  .nav.open .nav__burger span:first-child { transform: translateY(3.3px) rotate(45deg); }
  .nav.open .nav__burger span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

  .hero__meta { max-width: 90vw; }
  .hero__scroll { display: none; }
  .thread { display: none; }                   /* Licht-Linie nur auf Desktop */
  .uebersicht__grid { grid-template-columns: 1fr; }
  .pdfprev { display: none; }                  /* Vorschau auf Mobile ausblenden */

  /* Snapping auf Mobile aus — mit der ein-/ausfahrenden Browser-Leiste ruckelt es sonst */
  html { scroll-snap-type: none; }
  .section, .hero { scroll-snap-align: none; }

  .timeline { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; gap: 8px; }
  .tl__year { flex-direction: row; align-items: baseline; gap: 12px; }
  .skillgrid { grid-template-columns: 1fr; }

  /* Profil: die zwei Spalten stapeln (nebeneinander zu eng auf dem Handy) */
  .profil__grid { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 40px); max-width: none; }

  /* Hero-Code unten rechts ausblenden — kollidiert sonst mit den Tool-Chips.
     Die „01 — START"-Marke oben links zeigt die Nummer weiterhin. */
  .hero__code { display: none; }
}

/* ============================================================
   DRUCK — Lebenslauf auf A4, im Look der Website
   Aus denselben Daten wie die Seite: einmal gebaut, immer aktuell.
   Browser → Drucken → „Als PDF sichern".
   ============================================================ */
.printhead { display: none; }
.btn--print { cursor: pointer; font: inherit; background: none; }

@media print {
  @page { size: A4 portrait; margin: 0; }

  html, body {
    background: var(--espresso-900) !important;
    color: var(--cream) !important;
    scroll-snap-type: none !important;
    overflow: visible !important; height: auto !important;
    font-family: var(--f-sans);
    font-size: 9.2pt; line-height: 1.42;
    /* erzwingt Hintergründe, auch wenn „Hintergrundgrafiken“ im Dialog aus ist */
    -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
  }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Alles, was nur am Bildschirm Sinn ergibt */
  .nav, .hero, .thread, .section__code, .reels, .marquee,
  .hero__scroll, .btn--print, .foot, .lang { display: none !important; }
  #portfolio { display: none !important; }

  .content {
    display: flex; flex-direction: column;
    background: var(--espresso-900) !important; box-shadow: none !important;
    padding: 0 14mm 12mm;
  }
  .printhead  { display: flex; order: 0; }
  #profil     { order: 1; }
  #werdegang  { order: 2; }
  #skills     { order: 3; }
  #ziel       { order: 4; }
  #kontakt    { order: 5; }

  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }

  .section {
    min-height: 0 !important; height: auto !important;
    display: block !important;
    padding: 0 0 4.5mm !important;
    border: 0 !important; scroll-snap-align: none !important;
  }
  .section + .section { border-top: 0 !important; }

  /* ---------- Briefkopf: Foto + Name, volle Blattbreite ---------- */
  .printhead {
    align-items: center; gap: 8mm;
    margin: 0 -14mm 6mm;                    /* randlos über die Seite */
    padding: 10mm 14mm 8mm;
    background:
      radial-gradient(60% 120% at 78% 40%, rgba(240,169,78,0.16), transparent 70%),
      linear-gradient(160deg, var(--espresso-700), var(--espresso-900));
    border-bottom: 0.5pt solid rgba(240,169,78,0.35);
  }
  .printhead__photo {
    width: 30mm; height: 40mm; object-fit: cover;
    border-radius: 1.5mm; flex: none;
    border: 0.5pt solid rgba(242,231,215,0.22);
  }
  .printhead__text { flex: 1; }
  .printhead h1 {
    font-family: var(--f-display); font-weight: 600;
    font-size: 30pt; line-height: 0.95; letter-spacing: -0.02em;
    margin: 0 0 2.5mm; color: var(--cream);
  }
  .printhead__role {
    font-family: var(--f-mono); font-size: 8pt; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--amber); margin: 0 0 3mm;
  }
  .printhead__claim {
    font-family: var(--f-display); font-size: 11.5pt; line-height: 1.25;
    color: var(--cream-dim); margin: 0 0 4mm; max-width: 90mm;
  }
  .printhead__contact {
    font-family: var(--f-mono); font-size: 7.6pt; letter-spacing: 0.1em;
    color: var(--cream-dim); margin: 0; line-height: 1.7;
  }

  /* ---------- Sektionsüberschriften ---------- */
  .section__tag, .section__title { display: none !important; }
  .section::before {
    display: block;
    font-family: var(--f-mono); font-weight: 500;
    font-size: 7.6pt; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--amber); margin: 0 0 3mm; padding-bottom: 1.6mm;
    border-bottom: 0.5pt solid rgba(242,231,215,0.16);
  }
  #profil::before    { content: "Profil"; }
  #werdegang::before { content: "Werdegang"; }
  #skills::before    { content: "Kenntnisse & Werkzeuge"; }
  #ziel::before      { content: "Was ich suche"; }
  #kontakt::before   { content: "Kontakt"; }

  .section__lead, .section__head { max-width: none !important; margin-bottom: 2.5mm !important; }
  .section__lead { font-size: 8.6pt !important; color: var(--cream-dim) !important; }

  /* ---------- Profil ---------- */
  .profil__grid { display: grid !important; grid-template-columns: 1.35fr 1fr !important; gap: 8mm !important; align-items: start !important; }
  .profil__text p { color: var(--cream-dim) !important; font-size: 9pt !important;
    max-width: none !important; margin: 0 0 2mm !important; line-height: 1.5 !important; }
  .profil__text p:last-child { color: var(--cream) !important; }
  .profil__value-label { color: var(--taupe) !important; font-size: 7pt !important; margin-bottom: 2mm !important; }
  .benefit { border-color: rgba(242,231,215,0.14) !important; padding: 1.6mm 0 !important; break-inside: avoid; }
  .benefit__title { color: var(--amber-soft) !important; font-size: 9.5pt !important; margin-bottom: 0.6mm !important; }
  .benefit__text { color: var(--cream-dim) !important; font-size: 8pt !important; max-width: none !important; line-height: 1.4 !important; }

  /* ---------- Werdegang ---------- */
  .timeline { display: block !important; }
  .tl {
    display: grid !important; grid-template-columns: 20mm 1fr !important;
    gap: 5mm !important; padding: 2.2mm 0 !important;
    border-top: 0.5pt solid rgba(242,231,215,0.14) !important;
    break-inside: avoid;
  }
  .tl__year { font-size: 12.5pt !important; color: var(--cream) !important; font-weight: 300 !important; }
  .tl__year small { color: var(--taupe) !important; font-size: 6.8pt !important; }
  .tl__kind { color: var(--amber-deep) !important; font-size: 6.6pt !important; margin-bottom: 1mm !important; }
  .tl__role { font-size: 10.5pt !important; color: var(--cream) !important; margin-bottom: 0.6mm !important; }
  .tl__org  { color: var(--amber-soft) !important; font-size: 8.4pt !important; margin-bottom: 1mm !important; }
  .tl__desc { color: var(--cream-dim) !important; font-size: 8.2pt !important; max-width: none !important; line-height: 1.4 !important; }

  /* ---------- Skills ---------- */
  .skillgrid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 6mm !important; }
  .skillgroup { border-color: rgba(242,231,215,0.14) !important; padding-top: 2mm !important; break-inside: avoid; }
  .skillgroup__label { color: var(--amber-deep) !important; font-size: 6.6pt !important; margin-bottom: 1.6mm !important; }
  .skilllist { gap: 1.1mm !important; }
  .skilllist li { font-size: 8.2pt !important; color: var(--cream) !important;
    border-bottom-color: rgba(242,231,215,0.07) !important; padding-bottom: 1.1mm !important; }
  .skilllist span { color: var(--taupe) !important; font-size: 6.2pt !important; }

  /* ---------- Ziel ---------- */
  .ziel__grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 6mm !important; }
  .zielcard { border-color: rgba(242,231,215,0.14) !important; padding-top: 2mm !important; break-inside: avoid; }
  .zielcard__label { color: var(--amber-deep) !important; font-size: 6.6pt !important; margin-bottom: 1.4mm !important; }
  .zielcard__value { font-size: 12pt !important; color: var(--cream) !important; margin-bottom: 0.8mm !important; }
  .zielcard__note { color: var(--taupe) !important; font-size: 7.6pt !important; }
  .ziel__note { border-color: rgba(242,231,215,0.14) !important; color: var(--cream-dim) !important;
    font-size: 8.2pt !important; margin-top: 2.5mm !important; padding-top: 2mm !important; }

  /* ---------- Kontakt ---------- */
  .kontakt__inner { width: auto !important; }
  .kontakt__title { font-size: 13pt !important; margin: 0 0 2mm !important; color: var(--cream) !important; line-height: 1.15 !important; }
  .kontakt__title br { display: none; }
  .kontakt__title em { color: var(--amber-soft) !important; }
  .kontakt__mail { font-size: 11pt !important; color: var(--amber-soft) !important; border-bottom: 0 !important; }
  .kontakt__loc { color: var(--taupe) !important; margin-top: 1.5mm !important; font-size: 7.6pt !important; }
}