/* Winkler Studios — Relaunch.
   Umsetzung des Claude-Design-Entwurfs "Filmproduktion Website Relaunch"
   (Dateien: Winkler Studios.dc.html, SiteHeader, SiteFooter, Film, Fotografie,
   Motion Design, Mietstudio, Ausbildung, Journal).

   Der Entwurf setzt alles inline. Hier stehen dieselben Werte einmal als Klassen:
   gleiche Farben, gleiche clamp()-Stufen, gleiche Kurven. Zwei Dinge kommen dazu,
   weil der Entwurf sie nicht hatte — Umbrüche für schmale Schirme und
   prefers-reduced-motion. */

:root {
  --bg:      oklch(0.155 0.006 100);
  --bg-2:    oklch(0.185 0.007 100);
  --bg-3:    oklch(0.205 0.008 100);
  --bg-4:    oklch(0.235 0.009 100);
  --ink:     oklch(0.96 0.008 95);
  --acc:     oklch(0.7 0.105 196);
  --acc-hi:  oklch(0.78 0.1 196);
  --on-acc:  oklch(0.16 0.02 196);
  --pad:     clamp(20px, 4vw, 56px);
  --ease:    cubic-bezier(.16, 1, .3, 1);
  --serif:   'Instrument Serif', Georgia, serif;
  --sans:    Archivo, Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc); }
img, video { display: block; max-width: 100%; }
::selection { background: var(--acc); color: oklch(0.15 0.02 196); }

@keyframes ws-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes ws-cue  { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(8px); opacity: 1 } }
@keyframes ws-rise { from { transform: translateY(115%) rotate(2deg); } to { transform: translateY(0) rotate(0); } }
@keyframes ws-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Schriftrollen ---------- */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
}
.mono--s   { font-size: 10px; letter-spacing: .18em; }
.mono--w   { letter-spacing: .14em; }
.mono--acc { color: var(--acc); }
.mono--dim { color: oklch(0.96 0.008 95 / 0.45); }
.mono--mid { color: oklch(0.96 0.008 95 / 0.55); }

.serif { font-family: var(--serif); font-weight: 400; }
em.acc { font-style: italic; color: var(--acc); }

.lead   { font-size: clamp(15px, 1.2vw, 19px); line-height: 1.5; color: oklch(0.96 0.008 95 / .75); text-wrap: pretty; }
.copy   { font-size: 15px; line-height: 1.65; color: oklch(0.96 0.008 95 / .7); text-wrap: pretty; }
.copy--s{ font-size: 14px; line-height: 1.55; color: oklch(0.96 0.008 95 / .58); text-wrap: pretty; }

/* ---------- Kopfzeile ---------- */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  padding: 20px var(--pad);
  background: linear-gradient(oklch(0.155 0.006 100 / .92), oklch(0.155 0.006 100 / 0));
}
.hd__mark { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); min-width: 0; overflow: hidden; }
.hd__mark img { height: 24px; width: auto; flex: none; }
.hd__page {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: oklch(0.96 0.008 95 / .55);
  border-left: 1px solid oklch(0.96 0.008 95 / .2);
  padding-left: clamp(10px, 1.2vw, 16px);
}
.nav { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 26px); flex: none; font-size: clamp(11px, 1.1vw, 13px); white-space: nowrap; }
.nav a { opacity: .78; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"] { color: var(--acc); }
.nav__cta { flex: none; padding: 9px 18px; border: 1px solid oklch(0.96 0.008 95 / .32); border-radius: 100px; opacity: 1; }
.nav__cta:hover { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.nav__toggle { display: none; }

/* ---------- Abschnitte ---------- */
.sec       { padding: clamp(70px, 9vw, 130px) var(--pad); }
.sec--lg   { padding: clamp(80px, 12vw, 180px) var(--pad); }
.sec--flat { padding-top: 0; }
.sec--tint { background: var(--bg-2); }
.sec--sub  { padding: clamp(140px, 18vh, 220px) var(--pad) clamp(40px, 5vw, 70px); }

.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.g12--tight { gap: clamp(12px, 1.6vw, 22px); }
.c3 { grid-column: span 3 } .c4 { grid-column: span 4 } .c5 { grid-column: span 5 }
.c6 { grid-column: span 6 } .c7 { grid-column: span 7 } .c9 { grid-column: span 9 }
.gauto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: clamp(28px, 3vw, 46px); }
.gauto--wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.gauto--mid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(24px, 3vw, 48px); }

.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 660px; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.hero__plate { position: absolute; inset: -12% 0; will-change: transform; }
.hero__plate video, .hero__plate img { width: 100%; height: 100%; object-fit: cover; }
/* Showreel als Vimeo-Player im Hintergrund. Der Player kann kein object-fit,
   also bekommt der Rahmen selbst das Bildformat des Films (--reel, hier
   Cinemascope 2.353) und wird so groß, dass er die Platte in beide Richtungen
   deckt; die Container-Einheiten messen die Platte. Das Standbild liegt
   darunter und trägt, bis der Player steht. */
.hero__plate--reel { container-type: size; }
.hero__plate--reel img { position: absolute; inset: 0; }
.hero__plate--reel iframe {
  position: absolute; top: 50%; left: 50%;
  width:  max(100cqw, calc(100cqh * var(--reel)));
  height: max(100cqh, calc(100cqw / var(--reel)));
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, oklch(0.135 0.006 100 / .92) 0%, oklch(0.135 0.006 100 / .35) 42%, transparent 62%),
    radial-gradient(120% 80% at 70% 10%, oklch(0.155 0.006 100 / .3) 20%, oklch(0.135 0.006 100 / .92) 95%);
}
/* Zweite Rasterzeile: die leere 1fr darüber drückt die Schlagzeile an den
   unteren Rand — im Entwurf tat das der Showreel-Knopf in Zeile eins. */
.hero__body { position: relative; grid-row: 2; padding: 0 var(--pad) clamp(28px, 4vw, 48px); }
.hero__h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px, 11.5vw, 208px); line-height: .86; letter-spacing: -.02em; text-wrap: balance;
}
.hero__foot { margin-top: clamp(28px, 4vw, 52px); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 32px; padding-top: 26px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); }

/* Jede Zeile läuft aus einer Maske nach oben herein. Der Entwurf gab der Maske
   .04em Luft nach unten — zu wenig: Instrument Serif setzt bei line-height .86
   tiefe Unterlängen, und p, g, ß standen abgeschnitten da. .18em fangen sie auf,
   der negative Rand nimmt die Luft für den Zeilenabstand wieder heraus. */
.line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.14em; }
.line > * { display: block; animation: ws-rise 1.25s var(--ease) both; }
.d1 > * { animation-delay: .2s } .d2 > * { animation-delay: .32s } .d3 > * { animation-delay: .42s }
.fade  { animation: ws-fade 1.2s var(--ease) both; }
.fade--1 { animation-delay: .15s } .fade--2 { animation-delay: .7s }

.cue { display: inline-block; animation: ws-cue 2.2s ease-in-out infinite; }

/* ---------- Laufband ---------- */
.marquee { padding: 30px 0; background: var(--bg-2); overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: ws-marquee 42s linear infinite; }
.marquee__set { display: flex; gap: 56px; padding-right: 56px; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 40px); color: oklch(0.96 0.008 95 / .42); white-space: nowrap; }

/* ---------- Medien ---------- */
.media { position: relative; overflow: hidden; background: var(--bg-3); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--16x10 { aspect-ratio: 16 / 10 } .media--16x9 { aspect-ratio: 16 / 9 }
.media--4x5  { aspect-ratio: 4 / 5 }  .media--1x1  { aspect-ratio: 1 / 1 }
.media--3x4  { aspect-ratio: 3 / 4 }  .media--4x3  { aspect-ratio: 4 / 3 }
.media__cap {
  position: absolute; inset: auto auto 14px 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: oklch(0.96 0.008 95 / .75); text-shadow: 0 1px 10px oklch(0.12 0 0 / .8);
}
.band { height: clamp(300px, 46vh, 520px); overflow: hidden; position: relative; }
.band--tall { height: clamp(320px, 52vh, 580px); }
.band__plate { position: absolute; inset: -14% 0; will-change: transform; }
.band__plate img, .band__plate video { width: 100%; height: 100%; object-fit: cover; }
.band .media__cap { inset: auto auto 18px 20px; }

/* Erste Reihe der Arbeiten: links liegt ein 16:10, rechts ein 4:5 — bei sieben
   zu fünf Spalten sind das zwei sehr verschiedene Höhen. Die Füllvariante lässt
   das breite Bild die Höhe der Rasterreihe annehmen, die das hohe Bild vorgibt.
   Unterhalb von 900 px steht jede Karte allein; dort gilt wieder 16:10, sonst
   fiele das Bild ohne Reihenpartner auf die Höhe null zusammen. */
.lift--fill { display: flex; flex-direction: column; }
.lift--fill .media { flex: 1; min-height: 0; aspect-ratio: auto; }

.lift { transition: transform .8s var(--ease); }
.lift:hover { transform: translateY(-10px); }
.lift:hover { color: inherit; }

.work__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 16px; }
.work__t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 40px); }
.work__t--s { font-size: clamp(20px, 1.9vw, 32px); }
.work__m { font-family: var(--mono); font-size: 11px; color: oklch(0.96 0.008 95 / .5); }

/* ---------- Leistungskarten ---------- */
.svc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.svc:hover { color: var(--acc); }
.svc__t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 40px); line-height: 1.02; }
.fact__t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; }
.fact__t--big { font-size: clamp(30px, 2.8vw, 46px); }

/* ---------- Schiene ---------- */
.rail { display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.rail::-webkit-scrollbar { display: none; }
.rail__card { flex: 0 0 clamp(250px, 25vw, 360px); scroll-snap-align: start; background: var(--bg-3); border-radius: 26px; overflow: hidden; transition: transform .7s var(--ease); }
.rail__card:hover { transform: translateY(-8px); }
.rail__body { padding: 22px 24px 26px; }
.rail__t { margin: 10px 0 8px; font-family: var(--serif); font-size: clamp(24px, 2vw, 34px); line-height: 1; }
.rail__nav { display: flex; gap: 10px; }
.rail__btn { width: 46px; height: 46px; border-radius: 100px; border: 0; cursor: pointer; background: var(--bg-3); color: var(--ink); font-size: 16px; }
.rail__btn:hover { background: var(--acc); color: var(--on-acc); }

/* ---------- Knöpfe, Chips, Zahlen ---------- */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 30px; border-radius: 100px; font-size: clamp(16px, 1.4vw, 20px); }
.cta--s { padding: 22px 26px; font-size: 15px; }
.cta--solid { background: var(--acc); color: var(--on-acc); }
.cta--solid:hover { background: var(--acc-hi); color: var(--on-acc); }
.cta--ghost { border: 1px solid oklch(0.96 0.008 95 / .22); color: oklch(0.96 0.008 95 / .8); }
.cta--ghost:hover { border-color: oklch(0.96 0.008 95 / .6); color: var(--ink); }
.cta--outline { border: 1px solid oklch(0.7 0.105 196 / .5); }
.cta--outline:hover { background: var(--acc); color: var(--on-acc); }
.btn-inline { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border: 1px solid oklch(0.96 0.008 95 / .24); border-radius: 100px; font-size: 14px; }
.btn-inline:hover { border-color: oklch(0.96 0.008 95 / .6); }
.btn-pill { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; background: var(--acc); color: var(--on-acc); border-radius: 100px; font-size: 15px; }
.btn-pill:hover { background: var(--acc-hi); color: var(--on-acc); }
.tag { display: inline-block; margin-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); background: oklch(0.7 0.105 196 / .12); border-radius: 100px; padding: 10px 18px; }
.pill { background: var(--bg-4); border-radius: 100px; padding: 9px 16px; font-size: 13px; color: oklch(0.96 0.008 95 / .78); }
.chip { padding: 9px 18px; border-radius: 100px; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid oklch(0.96 0.008 95 / .22); background: transparent; color: oklch(0.96 0.008 95 / .7); }
.chip[aria-pressed="true"] { border-color: var(--acc); background: var(--acc); color: var(--on-acc); }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__n { margin: 0; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 58px); line-height: .95; }
.brief { margin: 0; display: flex; gap: 16px; font-size: clamp(15px, 1.3vw, 19px); color: oklch(0.96 0.008 95 / .78); }
.brief span:first-child { flex: none; font-family: var(--mono); font-size: 11px; padding-top: 4px; color: var(--acc); }
.list-row { margin: 0; display: flex; gap: 14px; font-size: 15px; line-height: 1.5; color: oklch(0.96 0.008 95 / .78); }
.list-row span:first-child { flex: none; font-family: var(--mono); font-size: 11px; padding-top: 3px; color: oklch(0.96 0.008 95 / .35); }

/* ---------- Journal ---------- */
.post { display: flex; flex-direction: column; gap: 14px; background: var(--bg-3); border-radius: 26px; padding: clamp(24px, 2.4vw, 32px); transition: transform .7s var(--ease), background .5s; }
.post:hover { transform: translateY(-8px); background: var(--bg-4); color: inherit; }
.post__cat { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); background: oklch(0.7 0.105 196 / .12); border-radius: 100px; padding: 6px 13px; }
.post__t { font-family: var(--serif); font-size: clamp(24px, 2vw, 32px); line-height: 1.12; }
.post__more { margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }

/* ---------- Fuß ---------- */
.foot { padding: clamp(60px, 8vw, 120px) var(--pad) 0; }
.foot__h { margin: 0 0 clamp(36px, 5vw, 70px); font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 10vw, 168px); line-height: .86; letter-spacing: -.025em; }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; padding: 34px 0 56px; }
.foot__col p.h { margin: 0 0 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: oklch(0.96 0.008 95 / .45); }
.foot__col p, .foot__col a { font-size: 15px; line-height: 1.6; }
.foot__links { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 30px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: oklch(0.96 0.008 95 / .45); }
.foot__bar img { height: 18px; width: auto; opacity: .8; }
.credits { padding: 0 var(--pad) 30px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; line-height: 1.8; color: oklch(0.96 0.008 95 / .3); }
.credits a { color: oklch(0.96 0.008 95 / .45); }

.news { display: flex; gap: 8px; align-items: center; background: var(--bg-3); border-radius: 100px; padding: 10px 8px 10px 18px; }
.news input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font-family: var(--sans); font-size: 15px; }
.news button { flex: none; width: 34px; height: 34px; border-radius: 100px; border: 0; cursor: pointer; background: var(--acc); color: var(--on-acc); font-size: 14px; }

/* Filmkorn. Der Entwurf nahm dafür einen 1px/3px-Verlauf — auf Schirmen mit
   doppelter Pixeldichte bandet der zu einem sichtbaren Zeilenraster. Hier steht
   stattdessen echtes Rauschen als SVG im Dokument: keine Anfrage nach draußen,
   keine Bänder, gleiche Wirkung. */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@media (min-resolution: 2dppx) { .grain { opacity: .038; background-size: 150px 150px; } }

/* ---------- Schmale Schirme ----------
   Der Entwurf kennt nur das Zwölftelraster; auf dem Telefon bricht es. Hier
   fallen alle Spalten auf volle Breite, die Navigation klappt auf. */
@media (max-width: 900px) {
  .c3, .c4, .c5, .c6, .c7, .c9 { grid-column: 1 / -1; }
  .lift--fill .media { flex: none; aspect-ratio: 16 / 10; }
  .g12 { gap: clamp(20px, 5vw, 36px); }
  .hero { height: auto; min-height: 0; padding-top: 120px; }
  .hero__plate { inset: 0; }
}
@media (max-width: 780px) {
  .hd { padding: 14px var(--pad); }
  .nav {
    position: fixed; inset: 56px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2);
    padding: 8px var(--pad) 20px;
    font-size: 16px;
    border-bottom: 1px solid oklch(0.96 0.008 95 / .12);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 0; border-top: 1px solid oklch(0.96 0.008 95 / .1); }
  .nav__cta { margin-top: 14px; text-align: center; border-top: 0; }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    background: transparent; border: 1px solid oklch(0.96 0.008 95 / .32);
    border-radius: 100px; padding: 8px 16px; cursor: pointer;
    color: var(--ink); font-family: var(--mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .hero__h1 { font-size: clamp(40px, 13vw, 76px); }
  .foot__h  { font-size: clamp(36px, 13vw, 76px); }
  .rail__card { flex-basis: 78vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .cue { animation: none; }
  .line > *, .fade { animation: none; opacity: 1; transform: none; }
  .lift, .rail__card, .post { transition: none; }
  .hero__plate--reel iframe { display: none; }
}