/* =========================================================
   Lukas Krumme · Speaker-Seite (Handoff 11.10.2026)
   Gleiche Designlinie wie cinemade.de: ein Seitenrand, Raster 4/8/12 bei 700/1100, acht Schriftstufen, Rundungen 4/6/8.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg: #000; --surface: #0C0C0C; --surface-media: #141414;
  --text: #FFF; --text-2: #ABABAB; --text-3: #8A8A8A; --text-4: #6E6E6E; --dim: #5C5C5C;
  --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.08);
  --accent: #FE2C55; --glass: rgba(255,255,255,.16);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pad: clamp(20px, 5vw, 96px); --gut: clamp(16px, 2vw, 32px); --section: clamp(96px, 10vw, 192px); --cols: 4;
  --nav-h: 56px;
  --fD: 15vw; --fH2: 9.4vw; --fH3: 6.6vw; --fH4: 22px; --fLead: 17px; --fLeadL: 20px; --fRow: 18px; --fNum: 22vw;
}
@media (min-width: 700px) {
  :root { --cols: 8; --nav-h: 76px;
    --fD: clamp(56px, 6.6vw, 128px); --fH2: clamp(40px, 4.4vw, 84px); --fH3: clamp(26px, 2.5vw, 48px); --fH4: clamp(20px, 1.5vw, 28px);
    --fLead: clamp(18px, 1.25vw, 24px); --fLeadL: clamp(20px, 1.8vw, 34px); --fRow: clamp(18px, 1.25vw, 24px); --fNum: clamp(88px, 9vw, 176px); }
}
@media (min-width: 1100px) { :root { --cols: 12; } }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/InterVariable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/InterVariable-Italic.woff2') format('woff2'); }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .track::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
img, video { display: block; }
h1, h2, h3, p, ol, ul { margin: 0; }
.wrap { max-width: 1920px; margin: 0 auto; padding: 0 var(--pad); }
.sec { padding-top: var(--section); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); }
.lbl { margin: 0 0 24px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.lbl::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.h2 { margin: 0; font-size: var(--fH2); line-height: 1.02; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; }
.h2 .l { font-weight: 250; letter-spacing: -.035em; }
.lead { margin: 0; font-size: var(--fLead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.rowt { margin: 0; font-size: var(--fRow); font-weight: 600; letter-spacing: -.01em; }
.chip { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; background: rgba(255,255,255,.12); color: var(--text); white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 6px; font-size: 16px; font-weight: 600; white-space: nowrap; transition: background-color .25s, color .25s; }
.btn--primary { background: var(--text); color: #000; }
.btn--primary:hover { background: rgba(255,255,255,.78); color: #000; }
.btn--glass { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn--glass:hover { background: rgba(255,255,255,.26); }
.btn small { font-size: 14px; font-weight: 600; }
.btns { display: flex; gap: 12px; }
@media (max-width: 699px) { .btns { width: 100%; } .btns .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 15px; } }
.track { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 0 max(var(--pad), calc((100vw - 1920px) / 2 + 96px)); scroll-padding: 0 var(--pad); }
/* Kachel (Titel-Regel) */
.tile { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; container-type: inline-size; background: var(--surface-media); }
.tile > img:not(.tile__em), .tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.35) 34%, rgba(0,0,0,0) 62%); }
.tile__em { position: absolute; z-index: 2; top: 6cqw; right: 6cqw; width: 5cqw; height: auto; opacity: .9; }
.tile__t { position: absolute; z-index: 2; left: 6cqw; right: 6cqw; bottom: 6cqw; display: flex; flex-direction: column; align-items: flex-start; text-transform: uppercase; }
.tile__ctx { font-size: max(9px, 3.4cqw); font-weight: 300; letter-spacing: .26em; line-height: 1; margin-bottom: .5em; white-space: nowrap; }
.tile__ttl { font-size: 8.6cqw; font-weight: 700; letter-spacing: -.045em; line-height: .9; }
.tile__kind { font-size: max(8px, 2.4cqw); font-weight: 600; letter-spacing: .2em; color: var(--text-2); margin-top: .9em; }

/* ---------- Header ---------- */
.nav { position: sticky; top: 0; z-index: 50; margin-bottom: calc(-1 * var(--nav-h)); transition: background-color .4s; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,0) 100%); transition: opacity .4s; }
.nav.is-solid { background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.nav.is-solid::before { opacity: 0; }
.nav__bar { max-width: 1920px; margin: 0 auto; padding: 0 var(--pad); height: var(--nav-h); display: flex; align-items: center; gap: 40px; }
.nav__logo img { height: 14px; width: auto; }
.nav__links { display: none; gap: 28px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.nav__links a { transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__cta { margin-left: auto; display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 6px; background: var(--text); color: #000; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background-color .25s; }
.nav__cta:hover { background: rgba(255,255,255,.78); color: #000; }
@media (min-width: 700px) { .nav__logo img { height: 18px; } .nav__links { display: flex; } .nav__cta { height: 40px; padding: 0 18px; font-size: 14px; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 72% 38%, rgba(254,44,85,.16) 0%, rgba(254,44,85,0) 70%); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.hero__img { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero__body { position: relative; margin-top: -28vw; padding-bottom: 32px; }
.hero__text { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { display: flex; flex-direction: column; line-height: .94; }
.hero__a { font-size: var(--fD); font-weight: 250; letter-spacing: -.04em; }
.hero__b { font-size: var(--fD); font-weight: 700; letter-spacing: -.045em; }
.hero__c { font-size: var(--fLeadL); font-weight: 400; letter-spacing: -.02em; margin-top: .5em; line-height: 1.1; }
.hero__fmts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; font-size: 14px; font-weight: 500; }
.hero__fmts i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-2); }
.hero__p { margin: 16px 0 0; max-width: 30em; font-size: var(--fLead); line-height: 1.5; color: rgba(255,255,255,.86); text-wrap: pretty; }
.hero .btns { margin-top: 32px; }
.live { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 40px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.live__k { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.live__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(254,44,85,.22); }
.live__bar { position: relative; flex: 1; display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.live__bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 1s linear; }
.live__t { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.live__k .long { display: none; }
@media (min-width: 700px) {
  .hero { min-height: min(100vh, 1080px); }
  .hero__img { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(0deg, transparent 0%, #000 25%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(0deg, transparent 0%, #000 25%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero__body { margin-top: 0; padding-top: calc(var(--nav-h) + 32px); }
  .hero__text { grid-column: 1 / 7; }
  .hero__fmts { font-size: 16px; }
  .live { margin-top: clamp(48px, 5vw, 96px); }
  .live__k .long { display: inline; } .live__k .short { display: none; }
}
@media (min-width: 1100px) { .hero__img { width: 52%; } }

/* ---------- These (Scroll-Szene) ---------- */
.these { position: relative; }
.these__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.these__glow { position: absolute; inset: 0; pointer-events: none; opacity: .35; transition: opacity .6s; background: radial-gradient(35% 55% at 50% 50%, rgba(254,44,85,.22) 0%, rgba(254,44,85,0) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%); }
.these.is-b3 .these__glow { opacity: 1; }
.these__grid { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding: 72px var(--pad) 16px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); row-gap: 24px; align-items: center; }
.phone { grid-column: 1 / -1; grid-row: 1; justify-self: center; position: relative; height: min(56vh, 148vw); aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--surface-media); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px -30px rgba(0,0,0,.95); container-type: inline-size; }
.feed { position: absolute; inset: 0; transition: filter .6s; }
.these:not(.is-b1) .feed { filter: grayscale(1) brightness(.35) blur(2px); }
/* Feed-Rauschen (Beat 1): austauschbarer Stock-Content, nie CINEMADE-Clips */
.feed__card { position: absolute; inset: 0; overflow: hidden; transition: transform .6s cubic-bezier(.65, 0, .35, 1); container-type: inline-size; }
.feed__card.is-gone { transform: translateY(-105%); }
.feed__card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.feed__card > video.is-on { opacity: 1; }
.feed__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 34%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 20%); }
.feed__card > div { position: absolute; z-index: 1; }
.feed__hook { left: 8cqw; right: 8cqw; top: 30%; display: flex; justify-content: center; text-align: center; }
.feed__hook b { font-size: 9cqw; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.feed__rail { right: 5cqw; bottom: 30cqw; display: flex; flex-direction: column; align-items: center; gap: 5cqw; font-size: max(9px, 3.2cqw); font-weight: 600; }
.feed__rail span { display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.feed__rail span b { font-size: max(16px, 7cqw); font-weight: 400; line-height: 1; }
.feed__meta { left: 6cqw; right: 22cqw; bottom: 7cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.feed__meta strong { font-size: max(10px, 3.8cqw); font-weight: 700; }
.feed__meta span { font-size: max(9px, 3.2cqw); font-weight: 500; color: rgba(255,255,255,.75); }
.feed__meta em { display: flex; align-items: center; justify-content: space-between; margin-top: 1cqw; padding: 2.6cqw 3.4cqw; border-radius: 4px; background: rgba(255,255,255,.2); font-size: max(9px, 3.4cqw); font-weight: 700; font-style: normal; }
.phone__shade { position: absolute; inset: 0; z-index: 60; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 35%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 18%); }
.phone__swipe { position: absolute; z-index: 61; left: 50%; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.6); transition: opacity .4s; }
.phone__swipe b { font-size: 20px; font-weight: 400; }
.these:not(.is-b1) .phone__swipe { opacity: 0; }
/* Handy: Beat 2 als Overlay mittig im Mockup (Export 11.10., „mittlerer Part“) */
.phone__ask { position: absolute; inset: 0; z-index: 65; display: none; flex-direction: column; justify-content: center; padding: 0 9%; opacity: 0; transform: scale(.94); transition: opacity .6s, transform .8s var(--ease); pointer-events: none; }
.phone__ask h2 { margin: 0; font-size: 8.6cqw; line-height: 1; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.phone__ask .l { display: block; font-weight: 250; letter-spacing: -.04em; }
@media (max-width: 699px) {
  .these:not(.is-b1) .feed { filter: grayscale(1) brightness(.3) blur(4px); }
  .phone__ask { display: flex; }
  .these.is-b2 .phone__ask { opacity: 1; transform: none; }
  .beat[data-beat="2"] { display: none; }
  .these.is-b2 .beat[data-beat="1"] { opacity: .28; transform: none; }
}
/* Kunden-Wand (Beat 3, hinter der Szene) */
.twall { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.these.is-wall .twall { opacity: 1; }
.twall__grid { position: absolute; left: 50%; top: 50%; width: 120%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; transform: translate(-50%, -50%) rotate(-6deg) scale(1.35); transition: transform 1.6s var(--ease); }
.these.is-wall .twall__grid { transform: translate(-50%, -50%) rotate(-6deg) scale(1.25); }
.twall__tile { position: relative; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; background: var(--surface-media); container-type: inline-size; }
.twall__tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.twall__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 40%); }
.twall__l { position: absolute; z-index: 1; left: 8cqw; right: 8cqw; bottom: 8cqw; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; overflow: hidden; text-transform: uppercase; }
.twall__l small { max-width: 100%; font-size: 5.2cqw; font-weight: 300; letter-spacing: .2em; line-height: 1; margin-bottom: .7em; white-space: nowrap; overflow: hidden; }
.twall__l b { max-width: 100%; font-size: 11cqw; font-weight: 700; letter-spacing: -.045em; line-height: .9; overflow-wrap: anywhere; }
.twall__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.92) 72%, #000 100%); }
@media (min-width: 700px) {
  .twall__grid { width: 110%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .these.is-wall .twall__grid { transform: translate(-50%, -50%) rotate(-6deg) scale(1.1); }
  .twall__veil { background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.7) 100%); }
}
@media (min-width: 1100px) { .twall__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.fmt { position: absolute; inset: 0; z-index: 70; transform: translateY(105%); transition: transform .7s var(--ease); container-type: inline-size; background: var(--surface); }
.these.is-b3 .fmt { transform: none; }
.fmt > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.fmt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,0) 60%); }
.fmt > * { z-index: 1; }
.fmt__em { position: absolute; top: 8cqw; right: 8cqw; width: 8cqw; height: auto; opacity: .9; }
.fmt__k { position: absolute; left: 8cqw; top: 8cqw; display: flex; align-items: center; gap: .7em; font-size: max(9px, 4cqw); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.fmt__k::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--accent); }
.fmt__t { position: absolute; left: 8cqw; right: 8cqw; bottom: 20cqw; display: flex; flex-direction: column; text-transform: uppercase; }
.fmt__ctx { font-size: max(9px, 4.4cqw); font-weight: 300; letter-spacing: .3em; margin-bottom: .6em; }
.fmt__ttl { font-size: 13cqw; font-weight: 700; letter-spacing: -.045em; line-height: .9; }
.fmt__bar { position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw; display: flex; align-items: center; gap: 10px; }
.fmt__bar i { position: relative; flex: 1; display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.fmt__bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.fmt__time { font-size: max(10px, 4.4cqw); font-weight: 600; font-variant-numeric: tabular-nums; }
.these__text { grid-column: 1 / -1; grid-row: 2; display: grid; align-items: center; }
.beat { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s var(--ease); pointer-events: none; }
.beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.beat.is-past { transform: translateY(-24px); }
.beat__num { display: flex; align-items: baseline; gap: 16px; margin-top: 16px; }
.beat__num b { font-size: 18vw; font-weight: 700; letter-spacing: -.05em; line-height: .85; font-variant-numeric: tabular-nums; }
.beat__num span { font-size: 15px; line-height: 1.4; color: var(--text-2); max-width: 12em; }
.beat__big { margin: 0; font-size: var(--fD); line-height: .98; font-weight: 700; letter-spacing: -.05em; text-wrap: balance; }
.beat__big .l { display: block; font-weight: 250; letter-spacing: -.04em; }
.beat .lead { display: none; margin-top: 24px; line-height: 1.6; max-width: 28em; }
.beat__chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 24px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.beat__wl { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; font-weight: 600; opacity: 0; transform: translateY(12px); transition: opacity .8s, transform .8s var(--ease); }
.beat__wl i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(254,44,85,.22); }
.beat__wl span span { color: var(--text-2); }
.these.is-wall .beat__wl { opacity: 1; transform: none; }
@media (min-width: 700px) {
  .these__glow { background: radial-gradient(35% 55% at 72% 50%, rgba(254,44,85,.22) 0%, rgba(254,44,85,0) 70%); }
  .these__grid { padding: 76px var(--pad) 0; row-gap: 32px; }
  .phone { grid-column: 6 / 9; grid-row: 1; height: min(62vh, calc((100vw - 80px) * 3 / 8 * 16 / 9)); }
  .these__text { grid-column: 1 / 6; grid-row: 1; }
  .beat__num { margin-top: 40px; }
  .beat__num b { font-size: var(--fNum); }
  .beat__num span { font-size: clamp(16px, 1.25vw, 22px); }
  .beat .lead { display: block; }
  .beat__wl { margin-top: 32px; font-size: clamp(16px, 1.25vw, 22px); }
}
@media (min-width: 1100px) {
  .phone { grid-column: 8 / 12; height: min(72vh, 760px); }
  .these__text { grid-column: 1 / 7; }
}

/* ---------- Vortragsthemen ---------- */
.topics { display: flex; flex-direction: column; gap: clamp(40px, 4vw, 72px); }
.topics__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.topic { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); row-gap: 24px; align-items: center; padding: clamp(32px, 3vw, 56px) 0; border-bottom: 1px solid var(--line); }
.topic__n { grid-column: 1 / -1; align-self: start; font-size: var(--fH4); font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.topic__body { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.topic__body h3 { margin: 0; font-size: var(--fH3); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.topic__body .lead { line-height: 1.6; max-width: 30em; }
.topic__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.topic .tile { grid-column: 1 / -1; }
@media (min-width: 700px) { .topic__n { grid-column: 1 / 2; } .topic__body { grid-column: 2 / 9; } .topic .tile { grid-column: 2 / 9; } }
@media (min-width: 1100px) { .topic__body { grid-column: 2 / 7; } .topic .tile { grid-column: 8 / 13; } }

/* ---------- Formate ---------- */
.formats { display: flex; flex-direction: column; gap: clamp(40px, 4vw, 72px); }
.formats__grid { display: grid; grid-template-columns: 1fr; gap: clamp(8px, 1vw, 16px); }
.format { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2vw, 32px); border-radius: 6px; background: var(--surface); border: 1px solid rgba(255,255,255,.1); }
.format__dur { font-size: 13px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.format h3 { margin: auto 0 0; font-size: var(--fH4); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.format p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 700px) { .formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .format { min-height: 220px; } }
@media (min-width: 1100px) { .formats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .format { min-height: 280px; } }

/* ---------- Werdegang ---------- */
.career { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(40px, 4vw, 72px); align-items: start; }
.career__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 32px; }
.ccard { display: none; position: relative; width: min(100%, 360px); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--surface-media); border: 1px solid var(--line-soft); container-type: inline-size; }
.ccard > img[data-i], .ccard > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.ccard > img[data-i].is-on, .ccard > video.is-on { opacity: 1; }
.ccard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 45%); }
.ccard__em, .ccard__k, .ccard__prog { opacity: 0; transition: opacity .3s; }
.ccard.is-reel .ccard__em, .ccard.is-reel .ccard__k, .ccard.is-reel .ccard__prog { opacity: 1; }
.ccard__em { position: absolute; z-index: 1; top: 8cqw; right: 8cqw; width: 6cqw; height: auto; }
.ccard__k { position: absolute; z-index: 1; top: 8cqw; left: 8cqw; display: flex; align-items: center; gap: 8px; font-size: max(9px, 3.4cqw); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ccard__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(254,44,85,.22); }
.ccard__prog { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.ccard__prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .9s linear; }
.ccard__cap { position: absolute; z-index: 1; left: 8cqw; bottom: 8cqw; display: flex; flex-direction: column; gap: 4px; }
.ccard__cap b { font-size: max(16px, 8cqw); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.ccard__cap span { font-size: max(9px, 4cqw); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.chapters { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.chapter { display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 2.5vw, 44px) 0; border-bottom: 1px solid var(--line); cursor: default; }
.chapter__k { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text); transition: color .3s; }
.chapter__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transition: background-color .3s; }
.chapter h3 { margin: 0; font-size: var(--fH3); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; color: var(--text); transition: color .3s; }
.chapter .lead { line-height: 1.6; max-width: 32em; }
.reel { position: relative; display: block; margin-top: 16px; pointer-events: none; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--surface-media); border: 1px solid var(--line-soft); container-type: inline-size; }
.reel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,0) 65%); }
.reel > :not(video) { position: absolute; z-index: 1; }
.reel__em { position: absolute; top: 5cqw; right: 5cqw; width: 4cqw; height: auto; opacity: .9; }
.reel__foot { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.reel__t { display: flex; flex-direction: column; align-items: flex-start; text-transform: uppercase; }
.reel__ctx { font-size: max(9px, 2.4cqw); font-weight: 300; letter-spacing: .26em; line-height: 1; margin-bottom: .5em; }
.reel__ttl { font-size: max(22px, 6.4cqw); font-weight: 700; letter-spacing: -.045em; line-height: .9; }
.reel__lab { font-size: max(9px, 2cqw); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.reel__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.reel__prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .9s linear; }
@media (min-width: 700px) {
  .career__head { grid-column: 1 / 4; position: sticky; top: 120px; }
  .ccard { display: block; }
  .chapters { grid-column: 4 / 9; }
  .chapter:not(.is-on) .chapter__k { color: var(--text-3); }
  .chapter:not(.is-on) .chapter__k::before { background: var(--dim); }
  .chapter:not(.is-on) h3 { color: var(--text-3); }
  .chapter .reel { display: none; }
}
@media (min-width: 1100px) { .career__head { grid-column: 1 / 6; } .chapters { grid-column: 7 / 13; } }

/* ---------- Belege ---------- */
.proof { display: flex; flex-direction: column; gap: clamp(40px, 4vw, 72px); }
.proof__nums { row-gap: 40px; align-items: end; }
.proof__num { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.proof__num b { font-size: var(--fNum); font-weight: 700; letter-spacing: -.05em; line-height: .85; font-variant-numeric: tabular-nums; }
.proof__num span { font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 24em; }
.proof__row { display: flex; flex-direction: column; gap: 16px; }
.work { position: relative; flex: none; width: 78vw; scroll-snap-align: start; }
@media (min-width: 700px) { .proof__num:first-child { grid-column: 1 / 5; } .proof__num:last-child { grid-column: 5 / 9; } .work { width: 44vw; } }
@media (min-width: 1100px) { .proof__num:first-child { grid-column: 1 / 6; } .proof__num:last-child { grid-column: 7 / 12; } .work { width: clamp(280px, 22vw, 440px); } }

/* ---------- Abschluss ---------- */
.fin { position: relative; margin-top: var(--section); min-height: 560px; overflow: hidden; display: flex; align-items: center; }
.fin__wall { position: absolute; inset: -20% -10%; display: flex; flex-direction: column; justify-content: center; gap: 12px; transform: rotate(-7deg); opacity: .5; pointer-events: none; }
.fin__lane { display: flex; gap: 12px; animation: fin-drift 120s linear infinite alternate; }
.fin__lane:nth-child(even) { margin-left: -90px; animation-direction: alternate-reverse; }
.fin__lane img { flex: none; width: 46vw; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
@keyframes fin-drift { from { transform: translateX(0); } to { transform: translateX(-4%); } }
.fin__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 50%, rgba(0,0,0,.6) 100%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, #000 100%); }
.fin__in { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding: var(--section) var(--pad); }
.fin__c { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; }
.fin__h { margin: 0; font-size: var(--fD); line-height: 1; font-weight: 700; letter-spacing: -.05em; text-wrap: balance; }
.fin__h .l { display: block; font-weight: 250; letter-spacing: -.04em; }
.fin__p { margin: 32px 0 0; max-width: 30em; font-size: var(--fLead); line-height: 1.5; color: rgba(255,255,255,.86); text-wrap: pretty; }
.fin .btns { margin-top: 32px; }
.fin__mail { margin-top: 24px; font-size: 13px; font-weight: 500; color: var(--text-3); }
@media (min-width: 700px) { .fin { min-height: min(100vh, 880px); } .fin__lane img { width: 22vw; } .fin__c { grid-column: 1 / 8; } }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line-soft); }
.foot__in { max-width: 1920px; margin: 0 auto; padding: 40px var(--pad) 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; font-size: 13px; color: var(--text-2); }
.foot__in > a img { height: 16px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.foot a:hover { color: #fff; }
@media (min-width: 700px) { .foot__in { flex-direction: row; align-items: center; gap: 40px; } .foot__legal { margin-left: auto; } }

/* ---------- Kontakt-Dialog ---------- */
.ct { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transition: opacity .3s; }
.ct[hidden] { display: none; }
.ct.is-open { opacity: 1; }
.ct__panel { position: relative; width: 100%; max-width: 520px; border-radius: 8px 8px 0 0; overflow: hidden; background: var(--surface); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 120px -20px rgba(0,0,0,.9); transform: translateY(24px); transition: transform .45s var(--ease); }
.ct.is-open .ct__panel { transform: none; }
.ct__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 85% 0%, rgba(254,44,85,.18) 0%, rgba(254,44,85,0) 70%); }
.ct__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.08); font-size: 20px; line-height: 1; transition: background-color .2s; }
.ct__close:hover { background: rgba(255,255,255,.16); }
.ct__body { position: relative; display: flex; flex-direction: column; gap: 32px; padding: clamp(28px, 4vw, 40px); }
.ct__head { display: flex; align-items: center; gap: 16px; padding-right: 48px; }
.ct__head img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.ct__head div { display: flex; flex-direction: column; gap: 4px; }
.ct__head .lbl { margin: 0; }
.ct__head b { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.ct__p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.ct__links { display: flex; flex-direction: column; gap: 8px; }
.ct__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 16px 20px; border-radius: 6px; transition: background-color .2s; }
.ct__link > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.ct__link small { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ct__link b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ct__link > span:last-child { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ct__link--tel { background: var(--text); color: #000; }
.ct__link--tel:hover { background: rgba(255,255,255,.86); color: #000; }
.ct__link--tel small { color: var(--dim); }
.ct__link--mail { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.ct__link--mail:hover { background: rgba(255,255,255,.14); }
.ct__link--mail small { color: var(--text-2); }
.ct__copy { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-3); transition: color .2s; }
.ct__copy:hover { color: #fff; }
@media (min-width: 700px) { .ct { align-items: center; padding: 24px; } .ct__panel { border-radius: 8px; } }

/* ---------- Rechtsseiten ---------- */
.cm-legal { max-width: 760px; margin: 0 auto; padding: 140px var(--pad) 100px; }
.cm-legal h1 { margin: 0 0 8px; font-size: var(--fH3); font-weight: 700; letter-spacing: -.03em; }
.cm-legal .cm-legal__stand { margin: 0 0 48px; color: var(--text-2); font-size: 14px; }
.cm-legal h2 { margin: 44px 0 12px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.cm-legal p, .cm-legal li { font-size: 16px; line-height: 1.65; color: var(--text-2); }
.cm-legal p { margin: 0 0 14px; }
.cm-legal ul { margin: 0 0 14px; padding-left: 20px; }
.cm-legal a { text-decoration: underline; text-underline-offset: 3px; }
.cm-legal__back { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; height: var(--nav-h); padding: 0 var(--pad); background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0)); }
.cm-legal__back img { height: 16px; width: auto; }
.cm-footer { border-top: 1px solid var(--line-soft); max-width: 1920px; margin: 0 auto; padding: 40px var(--pad) 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; font-size: 13px; color: var(--text-2); }
.cm-footer img { height: 16px; width: auto; }
.cm-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.cm-footer__legal { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .fin__lane { animation: none; }
}