/* ==========================================================================
   editing.halovisionai.cloud — Jayden Mikus, short-form editor

   Palette, type and the Fraunces display word are ported from
   studio.halovisionai.cloud, including its measured contrast decisions.
   The entrance hall itself is not: instead of the Studio's night-sky
   mountains, this one is staged as a timeline — three parallax tracks
   (V2/V1/A1), a scrubbing playhead and a live audio-meter canvas, because
   the point of this site is the edit, not the view.
   ========================================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('assets/fonts/fraunces-latin.woff2') format('woff2-variations');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('assets/fonts/bricolage-latin.woff2') format('woff2-variations');
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* Papier — the night grounds */
  --papier:      #0C0820;
  --papier-tief: #130D2A;
  --sand:        #1A1236;
  --nacht:       #120C22;
  --nacht-2:     #1E1436;

  /* Tinte — warm off-white, never pure #fff */
  --tinte:       #F6EFE6;
  --tinte-matt:  rgba(246,239,230,.76);
  --tinte-leise: rgba(246,239,230,.60);

  /* Rot. Two of them on purpose: --rot carries display sizes and fills,
     --rot-schrift carries small type. --rot on --papier measures 4.27:1,
     which is under the 4.5 small text needs; --rot-schrift measures 7.8. */
  --rot:         #D93A1E;
  --rot-schrift: #F5836A;
  --rot-tief:    #A32410;
  --sonne:       #F2A93B;
  --koralle:     #F1745C;

  --strich:      rgba(246,239,230,.16);
  --strich-hell: rgba(246,239,230,.26);

  --display: 'Fraunces', 'Instrument Serif', ui-serif, Georgia, serif;
  --sans:    'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:   'Instrument Serif', ui-serif, Georgia, serif;

  --schwung: cubic-bezier(.16,1,.3,1);

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:17px;
  font-weight:300;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scrollbar-width:thin;
  scrollbar-color:rgba(246,239,230,.18) transparent;
}
body::-webkit-scrollbar{ width:8px }
body::-webkit-scrollbar-track{ background:transparent }
body::-webkit-scrollbar-thumb{ background:rgba(246,239,230,.18); border-radius:99px }

img,video,canvas{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }

/* ══════════════════════════════════════════════════════════════════════════
   VORHALLE — the entrance hall.
   A 300vh track over a fixed scene. Everything sinks as you scroll, because
   the camera rises. Three stages cross-fade in the same grid cell.
   ══════════════════════════════════════════════════════════════════════════ */

.vorhalle{ position:relative; z-index:2; height:300vh; pointer-events:none }
.vorhalle__szene{ position:fixed; inset:0; overflow:hidden; background:#07061A }
.vorhalle[data-fertig] .vorhalle__szene{ visibility:hidden }

/* Dark edit-bay ambience, not sky: a warm glow low and off-centre (the same
   role the Studio's low sun played, kept for the contrast it buys the word)
   over a cool violet wash. Never a grey ramp — that reads as fog. */
.vorhalle__grund{
  position:absolute; inset:0;
  background:
    radial-gradient(64% 46% at 42% 82%, rgba(217,58,30,.22) 0%, rgba(196,86,118,.12) 44%, transparent 76%),
    radial-gradient(96% 60% at 22% 0%, rgba(84,64,160,.38) 0%, transparent 62%),
    linear-gradient(180deg, #1A1236 0%, #150F2C 36%, #100A22 66%, #07061A 100%);
}

/* One canvas, two layers: a star field that drifts upward (its speed is tied
   to scroll, so movement reads as progress) and the audio meter along a
   baseline in front of it. Both are confined to the upper part of the scene
   in JS so they never fight the timeline tracks stacked at the very bottom. */
.vorhalle__wellen{ position:absolute; inset:0; display:block }

/* The glow. It sits at 42%, not centre: a light core directly behind the
   word costs exactly the contrast large type needs. Centred with `translate`,
   never `transform` — the driver writes `transform` on every parallax layer
   each frame and would overwrite a centring placed in the same field. */
.vorhalle__gluehen{
  position:absolute; left:42%; bottom:30vh; width:min(34vh,44vw); aspect-ratio:1;
  translate:-50% 50%; will-change:transform; pointer-events:none;
  border-radius:50%; filter:blur(4px);
  background:radial-gradient(circle at 50% 50%,
    rgba(255,180,140,.60) 0%, rgba(217,58,30,.30) 40%, rgba(217,58,30,.12) 62%, transparent 78%);
}

/* Three tracks, three depths — V2/V1/A1, the layout of a real timeline.
   They stand for the mountains' three ridges: same parallax rig, same
   opacity ramp, but built from clip blocks generated in JS instead of a
   traced skyline, because there is no fixed "shape" for an edit to trace. */
.vorhalle__zeitleiste{
  position:absolute; left:0; right:0; bottom:0; height:30vh; pointer-events:none;
  display:flex; flex-direction:column; justify-content:flex-end; gap:9px;
  padding:0 0 6vh;
}
.vorhalle__spur{
  position:relative; overflow:hidden; height:30px;
  display:flex; align-items:center;
  will-change:opacity;
}
.spur-label{
  position:absolute; left:14px; top:50%; translate:0 -50%; z-index:2;
  font-size:9px; font-weight:600; letter-spacing:.2em; color:rgba(246,239,230,.5);
}
/* The content is wider than the viewport and slides under the mask on
   `.spur-clips`; the wrapper only ever shows opacity/blur, never a transform,
   so the two never fight for the same property. */
.spur-clips{
  position:absolute; top:0; bottom:0; left:0; width:170%;
  display:flex; align-items:center; gap:8px; padding-left:58px;
  will-change:transform; pointer-events:none;
}
.spur-clip{
  flex:none; height:62%; border-radius:4px;
  background:var(--sand); border:1px solid rgba(246,239,230,.14);
}
.spur-clip--akzent{ background:linear-gradient(180deg, var(--rot-tief), rgba(217,58,30,.4)) }
.spur-clip--ton{
  background-color:var(--nacht-2);
  background-image:repeating-linear-gradient(90deg, rgba(246,239,230,.32) 0 2px, transparent 2px 6px);
}
.vorhalle__spur--fern { height:24px; opacity:.46; filter:blur(.5px) }
.vorhalle__spur--mitte{ height:28px; opacity:.74 }
.vorhalle__spur--nah  { height:34px; opacity:1 }

/* The playhead. Its `left` tracks scroll progress in JS — scrubbing the
   timeline forward is scrolling the page down. */
.vorhalle__kopf{
  position:absolute; top:-8px; bottom:0; left:10%; width:1.5px;
  will-change:left; pointer-events:none; opacity:.55;
  background:linear-gradient(180deg, transparent, var(--rot) 16%, var(--rot-schrift) 82%, transparent);
  box-shadow:0 0 9px 0 rgba(217,58,30,.4);
}
.vorhalle__kopf::before{
  content:''; position:absolute; top:-5px; left:50%; translate:-50% 0;
  width:7px; height:7px; border-radius:2px;
  background:var(--rot); box-shadow:0 0 6px rgba(217,58,30,.5);
}
.vorhalle__zeitcode{
  position:absolute; bottom:100%; left:50%; translate:-50% 0; margin-bottom:8px;
  font-size:10px; letter-spacing:.1em; white-space:nowrap; font-weight:600;
  color:var(--tinte); background:rgba(7,6,26,.72); border:1px solid var(--strich);
  padding:3px 7px; border-radius:5px;
}

@media (max-width:640px){
  .vorhalle__zeitleiste{ height:22vh; gap:6px }
  .spur-label{ display:none }
  .spur-clips{ padding-left:0 }
}

/* The veil behind the word. A sibling of the stage, never its ::before: as a
   pseudo-element it disappears together with the stage whenever a contrast
   check hides the text, so the measurement never sees it and reports numbers
   that did not change. Over a star field it reads as depth, not as a box. */
.vorhalle__schleier{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 42% at 50% 48%,
    rgba(7,6,26,.62) 0%, rgba(7,6,26,.42) 46%, rgba(7,6,26,.16) 72%, transparent 88%);
}

.vorhalle__buehne{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:0 5vw; text-align:center;
}
/* All stages share one grid cell so they can cross-fade. Side by side and
   toggled with display:none they could not blend, and a hard swap mid-scroll
   is the one edge this page has nowhere.
   The fade itself is JS-driven (rahmen() in app.js), which runs on
   requestAnimationFrame — a tab loaded in the background can delay that
   first frame indefinitely, and until it runs every stage sits at the
   browser's default opacity (1), stacked and unreadable. This default
   is the fallback for exactly that gap: correct at rest with no JS at all,
   overridden the instant the real driver gets its first frame. */
.vorhalle__etappe{ grid-area:1/1; width:100%; will-change:transform, opacity; opacity:0 }
.vorhalle__etappe:first-child{ opacity:1 }

.vorhalle__kicker{
  margin:0 0 clamp(1rem,2.4vh,1.8rem);
  font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rot-schrift);
}

/* The word is a <p>, not a heading. The page's <h1> lives further down; a
   second <h1> up here would read as a new topic to a search engine. */
.vorhalle__wort{
  margin:0; font-family:var(--display); font-weight:900; color:var(--rot);
  line-height:.82; letter-spacing:-.03em; text-transform:uppercase;
  font-size:clamp(4.4rem, 21vw, 17rem);
  /* The glow sits AROUND the glyph, never under it: it lifts the mood without
     lightening the letter face itself. */
  text-shadow:0 0 46px rgba(217,58,30,.42), 0 0 120px rgba(217,58,30,.20);
}
.vorhalle__wort--lang{ font-size:clamp(2.6rem, 10.5vw, 8.5rem); white-space:nowrap }

.vorhalle__unter{
  margin:clamp(20px,3.4vh,40px) auto 0; max-width:46ch;
  font-size:clamp(.95rem,1.25vw,1.15rem); line-height:1.75; font-weight:300;
  letter-spacing:.02em; color:rgba(246,239,230,.72);
}
.vorhalle__unter b{ display:block; font-weight:300; color:var(--tinte) }
.vorhalle__unter em{ font-style:normal; color:var(--rot-schrift) }

/* ══════════════════════════════════════════════════════════════════════════
   THE PAGE — slides over the fixed night with its own night-to-paper ramp.
   The scene is covered, never faded out: a night going transparent at the
   same time would be a double exposure.
   ══════════════════════════════════════════════════════════════════════════ */

.seite{ position:relative; z-index:3; background:var(--papier) }
.seite::before{
  content:''; position:absolute; left:0; right:0; top:-26vh; height:26vh;
  background:linear-gradient(180deg, transparent 0%, rgba(12,8,32,.55) 46%, var(--papier) 100%);
  pointer-events:none;
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:2 }
section{ position:relative }

.kicker{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rot-schrift);
  display:flex; align-items:center; gap:12px; margin:0 0 26px;
}
.kicker::before{ content:''; width:34px; height:1px; background:linear-gradient(90deg,var(--rot),transparent) }

h2.section-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:1.04; letter-spacing:-.025em;
  margin:0 0 22px; color:var(--tinte);
}
h2.section-title em{ font-style:italic; color:var(--rot-schrift) }

.lede{
  font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.72; font-weight:300;
  color:var(--tinte-matt); max-width:62ch; margin:0 0 12px;
}
.footnote{ font-size:13px; line-height:1.62; color:var(--tinte-leise); max-width:74ch; font-weight:300 }
.footnote a{ color:var(--tinte-matt); border-bottom:1px solid var(--strich) }
.footnote a:hover{ color:var(--rot-schrift); border-color:var(--rot-schrift) }

/* ---------- surfaces + buttons ------------------------------------------- */

.glass{
  background:rgba(246,239,230,.035);
  border:1px solid var(--strich);
  box-shadow:inset 0 1px 0 rgba(246,239,230,.07), 0 24px 60px -30px rgba(0,0,0,.7);
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  position:relative; will-change:transform;
  transition:transform .4s var(--schwung), background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* White on --rot measures 4.59:1 — it passes, and it is the only fill that
   carries the brand red at full strength. */
.btn-primary{ background:var(--rot); color:#fff; box-shadow:0 10px 44px -12px rgba(217,58,30,.65) }
.btn-primary:hover{ background:var(--rot-tief); box-shadow:0 14px 56px -12px rgba(217,58,30,.8) }
.btn-ghost{ border:1px solid var(--strich-hell); color:var(--tinte) }
.btn-ghost:hover{ border-color:rgba(246,239,230,.5); background:rgba(246,239,230,.05) }
.btn:active{ transform:scale(.96) }
.btn .arr{ transition:transform .4s var(--schwung) }
.btn:hover .arr{ transform:translateX(4px) }

/* ---------- header -------------------------------------------------------- */
/* No bar. The mark floats over every section — the whole page is dark, so it
   never needs a background pill to stay legible while scrolling. */

.site-head{
  position:fixed; top:0; left:0; z-index:60;
  padding:16px var(--gutter);
}
.brand{
  font-family:var(--display); font-weight:900; font-size:15px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinte);
}

/* ---------- language switch (lives in the footer, not up top) ------------ */

.lang{ display:flex; align-items:center; border:1px solid var(--strich); border-radius:999px; overflow:hidden }
.lang button{
  font-size:10.5px; letter-spacing:.14em; font-weight:600; padding:7px 12px;
  color:var(--tinte-leise); transition:color .25s ease, background-color .25s ease;
}
.lang button[aria-pressed="true"]{ color:var(--tinte); background:rgba(246,239,230,.10) }

/* ---------- film strip ---------------------------------------------------- */

.strip{
  padding:0 0 6px; overflow:hidden;
  border-top:1px solid var(--strich); border-bottom:1px solid var(--strich);
  background:var(--papier-tief);
}
.strip-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px var(--gutter) 14px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--tinte-leise);
}
.strip-track{ display:flex; gap:10px; width:max-content; padding:0 0 18px; will-change:transform }
.strip-cell{
  width:116px; aspect-ratio:9/16; border-radius:6px; overflow:hidden;
  position:relative; border:1px solid var(--strich); flex:none;
  filter:grayscale(1) contrast(1.05) brightness(.6) sepia(.25);
  transition:filter .5s ease, transform .5s var(--schwung);
}
.strip:hover .strip-cell{ filter:grayscale(.5) brightness(.8) }
.strip-cell:hover{ filter:none !important; transform:translateY(-5px) scale(1.03) }

/* ---------- person ("off camera") ------------------------------------------ */

.person{ padding:clamp(96px,13vw,168px) 0; background:var(--papier) }
.person .section-title{ max-width:22ch }
.person .lede{ margin-bottom:clamp(34px,5vw,52px) }

.hand-ai{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:62ch; margin-bottom:clamp(26px,4vw,38px) }
@media (max-width:640px){ .hand-ai{ grid-template-columns:1fr } }

.hand-ai-item{ border-radius:16px; padding:22px 22px 20px }
.hand-ai-tag{
  display:inline-flex; align-items:center; margin-bottom:12px;
  font-size:11px; font-weight:600; letter-spacing:.06em;
  color:var(--rot-schrift); border:1px solid rgba(217,58,30,.4);
  border-radius:999px; padding:5px 12px;
}
.hand-ai-item--ai .hand-ai-tag{ color:var(--tinte-matt); border-color:var(--strich-hell) }
.hand-ai-item p{ margin:0; font-size:14px; line-height:1.62; color:var(--tinte-matt); font-weight:300 }

.person-line{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--rot-schrift);
  max-width:44ch; margin:0;
}

/* ---------- layered text (port of 21st.dev @xubohuah/layered-text) -------- */

.layered-sec{
  padding:clamp(110px,16vw,190px) 0;
  overflow:hidden; display:flex; flex-direction:column; align-items:center;
  background:var(--nacht);
  border-bottom:1px solid var(--strich);
}
.layered-sec .cap{
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--tinte-leise); margin-bottom:clamp(40px,7vw,76px);
  text-align:center; padding:0 var(--gutter);
}
/* The skew throws the lower rows well below the element's layout box, so the
   block needs reserved space underneath or the hint lands on the last word. */
.layered{
  margin:0 auto 250px;
  font-family:var(--sans); font-weight:800; letter-spacing:-2px;
  text-transform:uppercase; color:var(--tinte);
  cursor:pointer; font-size:72px; user-select:none;
}
.layered ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; align-items:center }
.layered li{ overflow:hidden; position:relative; height:60px }
.layered p{ margin:0; padding:0 15px; height:60px; line-height:55px; white-space:nowrap; vertical-align:top }
.layered p.b{ color:var(--rot) }

@media (max-width:767px){
  .layered{ font-size:36px; letter-spacing:-1px; margin-bottom:140px }
  .layered li{ height:35px }
  .layered p{ height:35px; line-height:30px; padding:0 8px }
}

.layered-hint{
  margin-top:0; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinte-leise); display:flex; align-items:center; gap:10px;
}
.layered-hint .pulse{ width:5px; height:5px; border-radius:50%; background:var(--rot); animation:pulse 2s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1; box-shadow:0 0 12px var(--rot) } }

/* ---------- proof / chart ------------------------------------------------- */

.proof{ padding:clamp(96px,13vw,168px) 0 }
.proof-head{ max-width:76ch; margin-bottom:clamp(50px,7vw,82px) }

.chart-card{ border-radius:20px; padding:clamp(24px,3.4vw,44px); margin-bottom:30px }
.chart-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:34px }
.chart-top h3{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0 }
.chart-top .meta{ font-size:11.5px; color:var(--tinte-leise) }

/* margin, not padding: the bar area must be exactly 100% of .chart so the
   median line can sit at a plain percentage of it */
.chart{ position:relative; height:300px; margin-top:34px; display:flex; align-items:flex-end; gap:clamp(3px,.7vw,9px) }

.bar-wrap{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative }
.bar{
  width:100%; height:0; border-radius:3px 3px 0 0; position:relative;
  background:linear-gradient(180deg, var(--rot) 0%, rgba(217,58,30,.30) 100%);
  transition:background .3s ease, box-shadow .3s ease;
}
.bar-wrap:hover .bar{ background:linear-gradient(180deg, var(--koralle), rgba(217,58,30,.5)); box-shadow:0 0 24px -4px rgba(241,116,92,.7) }
.bar.outlier{ background:linear-gradient(180deg, var(--sonne) 0%, rgba(217,58,30,.45) 100%) }
/* torn top edge = the axis is broken here, this bar runs off the scale */
.bar.outlier::before{
  content:''; position:absolute; top:-7px; left:0; right:0; height:8px;
  background:repeating-linear-gradient(135deg, var(--sonne) 0 5px, transparent 5px 10px);
}
.bar.dim{ background:linear-gradient(180deg, rgba(246,239,230,.24), rgba(246,239,230,.07)) }

.bar-val{
  position:absolute; top:-21px; left:50%; transform:translateX(-50%);
  font-size:10px; color:var(--tinte-matt); white-space:nowrap;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.bar-wrap:hover .bar-val,.bar-wrap.always .bar-val{ opacity:1; color:var(--tinte) }

.median-line{ position:absolute; left:0; right:0; border-top:1px dashed rgba(246,239,230,.38); pointer-events:none; opacity:0 }
.median-line span{
  position:absolute; right:0; top:-20px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--tinte);
  background:var(--papier); padding:2px 8px; border-radius:4px; border:1px solid var(--strich);
}

.chart-x{
  display:flex; justify-content:space-between; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--strich);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinte-leise);
}

.tip{
  position:fixed; z-index:70; pointer-events:none;
  padding:9px 13px; border-radius:8px;
  background:rgba(18,12,34,.96); border:1px solid rgba(217,58,30,.45);
  font-size:12px; line-height:1.45; max-width:250px;
  opacity:0; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.tip.on{ opacity:1; transform:translateY(0) }
.tip .v{ color:var(--rot-schrift); font-weight:600 }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px }
@media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr) } }

.stat-card{ border-radius:16px; padding:26px 24px 24px; position:relative; overflow:hidden }
.stat-card .n{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,3.6vw,2.9rem); letter-spacing:-.03em; line-height:1;
  margin-bottom:12px; color:var(--tinte);
}
.stat-card .n .suf{ font-size:.5em; color:var(--rot-schrift); margin-left:2px }
.stat-card .t{ font-size:13px; font-weight:600; margin-bottom:6px }
.stat-card .d{ font-size:12.5px; color:var(--tinte-leise); line-height:1.5 }
.stat-card::after{
  content:''; position:absolute; top:0; left:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--rot),transparent 70%); opacity:.7;
}

/* ---------- process ------------------------------------------------------- */

.process{ padding:clamp(96px,13vw,168px) 0; background:var(--papier-tief); border-top:1px solid var(--strich) }
.proc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:54px }
@media (max-width:860px){ .proc-grid{ grid-template-columns:1fr } }

.proc-card{ border-radius:18px; padding:34px 32px 32px; position:relative; transition:transform .5s var(--schwung), border-color .4s ease }
.proc-card:hover{ transform:translateY(-4px); border-color:rgba(217,58,30,.45) }
.proc-num{ font-family:var(--display); font-weight:900; font-size:13px; letter-spacing:.22em; color:var(--rot-schrift); margin-bottom:20px }
.proc-card h3{ font-family:var(--display); font-weight:400; font-size:1.6rem; margin:0 0 6px; letter-spacing:-.02em; color:var(--tinte) }
.proc-card .page{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--tinte-leise); margin-bottom:16px }
.proc-card p{ margin:0; font-size:14.5px; line-height:1.66; color:var(--tinte-matt); font-weight:300 }

/* ---------- work grid ----------------------------------------------------- */

.work{ padding:clamp(96px,13vw,168px) 0 }
/* 28 Shorts: only 7, 4 and 2 columns fill the last row (5 and 3 leave gaps) */
.work-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:14px; margin-top:54px }
@media (max-width:1080px){ .work-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:640px) { .work-grid{ grid-template-columns:repeat(2,1fr); gap:10px } }

/* .short is a real <button>, so the UA padding/alignment has to be reset */
.short{
  position:relative; display:block; width:100%; padding:0; text-align:left;
  aspect-ratio:9/16; border-radius:14px; overflow:hidden;
  border:1px solid var(--strich); background:var(--sand); cursor:pointer;
  transition:transform .5s var(--schwung), border-color .4s ease, box-shadow .4s ease;
}
.short:hover{
  transform:translateY(-6px); border-color:rgba(217,58,30,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 40px -10px rgba(217,58,30,.35);
}
/* YouTube serves Shorts thumbnails pillarboxed inside a 4:3 frame. Rendering
   at full height with auto width and centring crops the black bars off. */
.strip-cell img,.short img{
  position:absolute; top:0; left:50%; height:100%; width:auto; max-width:none;
  transform:translateX(-50%);
}
.short img{ transition:transform .7s var(--schwung), filter .4s ease }
.short:hover img{ transform:translateX(-50%) scale(1.06) }
.short iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4 }

.short-shade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,8,32,0) 34%, rgba(12,8,32,.72) 68%, rgba(12,8,32,.97) 100%);
}
.short-meta{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:12px 12px 13px; pointer-events:none }
.short-views{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1; margin-bottom:5px; color:var(--tinte) }
.short-label{ display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,239,230,.74) }
.short-play{
  position:absolute; z-index:3; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; background:rgba(12,8,32,.6); border:1px solid rgba(246,239,230,.3);
  backdrop-filter:blur(6px); display:grid; place-items:center;
  opacity:0; transform:scale(.85);
  transition:opacity .35s ease, transform .35s var(--schwung); pointer-events:none;
}
.short:hover .short-play{ opacity:1; transform:scale(1) }
.short-play svg{ width:15px; height:15px; margin-left:2px; fill:var(--tinte) }

.short.top::before{
  content:'TOP'; position:absolute; z-index:3; top:10px; left:10px;
  font-size:8.5px; letter-spacing:.2em; font-weight:700;
  padding:4px 8px; border-radius:4px; background:var(--rot); color:#fff;
}

.work-foot{ margin-top:34px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between }

/* ---------- longform ------------------------------------------------------ */

.longform{ padding:clamp(96px,13vw,168px) 0; background:var(--papier-tief); border-top:1px solid var(--strich) }

.reel{ margin-top:44px; border-radius:20px; overflow:hidden }
.reel video{ display:block; width:100%; aspect-ratio:16/9; background:#000 }
.reel-cap{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 20px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinte-leise); border-top:1px solid var(--strich);
}
.reel-dur{ font-family:var(--display); letter-spacing:0; text-transform:none; color:var(--tinte-matt) }

/* ---------- contact ------------------------------------------------------- */

.contact{
  padding:clamp(100px,14vw,180px) 0 0;
  background:var(--nacht); border-top:1px solid var(--strich);
  position:relative; overflow:hidden;
}
/* the same low sun as the entrance hall, coming back at the end */
.contact-glow{
  position:absolute; bottom:-30%; left:50%; transform:translateX(-50%);
  width:120%; height:90%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,150,102,.16) 0%, rgba(217,58,30,.07) 40%, transparent 68%);
}
.contact-inner{ text-align:center; position:relative; z-index:2 }
.contact .lede{ margin-left:auto; margin-right:auto }
.contact .kicker{ justify-content:center }
.contact-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:40px }

.contact-word{
  font-family:var(--display); font-weight:900;
  font-size:clamp(3.4rem,17vw,13rem); letter-spacing:-.03em; line-height:.82;
  text-align:center; text-transform:uppercase; color:var(--rot);
  text-shadow:0 0 46px rgba(217,58,30,.36), 0 0 120px rgba(217,58,30,.18);
  margin:clamp(60px,9vw,110px) 0 -.1em;
  user-select:none; pointer-events:none; white-space:nowrap; overflow:hidden;
}

/* sits outside <main> so it registers as the page's contentinfo landmark,
   which means it carries the section background itself */
.site-foot{
  position:relative; z-index:4;
  background:var(--nacht); border-top:1px solid var(--strich);
  padding:26px var(--gutter);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:11.5px; color:var(--tinte-leise);
}
.site-foot a:hover{ color:var(--rot-schrift) }
.site-foot .links{ display:flex; gap:22px }

/* ---------- reveal animations (JS adds .in) ------------------------------- */

.rv{ opacity:0; transform:translateY(26px) }
.rv.in{ opacity:1; transform:none; transition:opacity .9s var(--schwung), transform .9s var(--schwung) }

.line-mask{ display:block; overflow:hidden }
.line-mask > span{ display:block; transform:translateY(102%) }
.line-mask.in > span{ transform:none; transition:transform 1.05s var(--schwung) }

/* ---------- reduced motion: drop every effect, keep the content ----------- */

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .rv{ opacity:1 !important; transform:none !important }
  .line-mask > span{ transform:none !important }
  .strip-track{ transform:none !important }
}