/* NICO HUA · Lead pages r1 (2026-11-02)
   Drei seitengebundene Korrekturen, jede streng auf ihre Route begrenzt:
   1. /webdesign-berlin: Berlin-Signatur (Skyline + NICO HUA) zwischen Hero und Film; Filmtexte in der
      Future-Bodoni statt Arial; Lesbarkeit über weichen Randverlauf statt dunklem Fleck hinter dem Text.
   2. /ueber-uns: Hero genau eine Bildschirmhöhe, Bild randlos von der Oberkante, weicher Übergang,
      keine abgeschnittenen Köpfe (vorher 1085 px hoch, Bild ab 168 px, Text zu tief; Handy: Bild ab 79 px).
   3. /prozess: Ab 2200 px wächst die Journey mit (bis 2720 px), die Bühne wird kinoartig breiter.
      Bis 2199 px unverändert. */

/* ---------- 1. Berlin-Signatur ---------- */
.nh-bsig{position:relative;height:260vh;background:#0a1212;color:#eee9df;--nh-bsig-p:0}
.nh-bsig__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center;justify-items:center;overflow:hidden;padding:clamp(72px,9vh,104px) clamp(16px,4vw,64px) clamp(16px,3vh,40px)}
.nh-bsig__eyebrow{margin:0 0 clamp(14px,2.4vh,28px);font-size:11px;letter-spacing:.34em;color:#d9c49b;opacity:clamp(0,calc(var(--nh-bsig-p)*4 - .2),1)}
.nh-bsig__title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the composition always fits one screen: width follows the height left after header, eyebrow and line */
.nh-bsig svg{display:block;width:min(100%,1680px,calc((100svh - 300px)*2220/1206));height:auto;overflow:visible}
.nh-bsig__line{margin:clamp(10px,2vh,24px) 0 0;max-width:46ch;text-align:center;font-family:"NH Bodoni Display","Bodoni 72",Didot,"Bodoni MT","Times New Roman",serif;font-style:italic;font-size:clamp(18px,1.7vw,26px);line-height:1.35;color:rgba(238,233,223,.86);text-wrap:balance;opacity:clamp(0,calc((var(--nh-bsig-p) - .84)*7),1);transform:translateY(calc((1 - clamp(0,calc((var(--nh-bsig-p) - .84)*7),1))*10px))}
.nh-bsig__coords{margin:10px 0 0;font-size:10px;letter-spacing:.32em;color:rgba(238,233,223,.5);opacity:clamp(0,calc((var(--nh-bsig-p) - .9)*10),1)}
.nh-bsig-draw{fill:none;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.nh-bsig-water{stroke:rgba(217,196,155,.55);stroke-width:1}
.nh-bsig-city{stroke:#d9c49b;stroke-width:1.1;opacity:.82}
.nh-bsig-tower{stroke:#d9c49b;stroke-width:1.4}
.nh-bsig-towerfill{fill:#d9c49b}
.nh-bsig-glyph{stroke:#eee9df;stroke-width:1.1}
.nh-bsig-tint{fill:#eee9df;opacity:.07}
.nh-bsig-solid{fill:#eee9df}
.nh-bsig.is-still{height:auto}
.nh-bsig.is-still .nh-bsig__stage{position:relative;height:auto;padding-block:16vh}
.nh-bsig.is-still :is(.nh-bsig__eyebrow,.nh-bsig__line,.nh-bsig__coords){opacity:1;transform:none}
@media (max-width:700px){
  .nh-bsig{height:220vh}
  .nh-bsig svg{width:calc(100% + 24px);max-width:none;margin-inline:-12px}
  .nh-bsig__line{font-size:17px;max-width:30ch}
}
/* the static signature image stays as fallback until the animated one is mounted */
.nh-bsig + .nh-berlin-film .nh-film-graffiti{display:none!important}

/* Berlin film: Future typography and a calm, image-friendly reading scrim */
.nh-berlin-film .nh-film-intro h2,.nh-film-scroll .scroll-scrub__title{font-family:"NH Bodoni Display","Bodoni 72",Didot,"Bodoni MT","Times New Roman",serif;font-weight:400;letter-spacing:0}
.nh-berlin-film .nh-film-intro h2{font-size:clamp(34px,5.4vw,76px);line-height:1.02}
.nh-film-scroll .scroll-scrub__title{font-size:clamp(34px,3.9vw,60px);line-height:1;margin:.18em 0 .32em}
.nh-film-scroll .scroll-scrub__kicker{font-weight:400;letter-spacing:.34em;font-size:11px;color:#d9c49b}
.nh-film-scroll .scroll-scrub__copy{padding-left:22px;border-left:1px solid rgba(217,196,155,.55);text-shadow:0 1px 1px rgba(0,0,0,.4),0 0 30px rgba(4,9,9,.6)}
.nh-film-scroll .scroll-scrub__copy::before{background:none!important}
.nh-film-scroll .scroll-scrub__body{color:rgba(246,241,231,.92);line-height:1.55}
.nh-film-scroll .scroll-scrub__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(7,13,13,.66) 0%,rgba(7,13,13,.5) 14%,rgba(7,13,13,.28) 27%,rgba(7,13,13,.1) 38%,rgba(7,13,13,0) 50%)}
@media (max-width:860px){
  .nh-film-scroll .scroll-scrub__media::after{background:linear-gradient(0deg,rgba(7,13,13,.8) 0%,rgba(7,13,13,.55) 20%,rgba(7,13,13,.2) 38%,rgba(7,13,13,0) 54%)}
}

/* ---------- 2. Über uns ---------- */
@media (min-width:901px){
  .score-shell[data-page="ueber-uns"] .us-hero-family{min-height:0!important;height:100svh;padding:0 0 0 max(20px,var(--pad))!important;grid-template-columns:minmax(0,1fr) min(50vw,calc(100svh*1122/1402))!important;grid-template-rows:1fr auto;grid-template-areas:"copy image" "names image"!important;column-gap:clamp(32px,5vw,96px)!important;row-gap:0!important;align-items:center}
  .score-shell[data-page="ueber-uns"] .us-hero-family .us-hero-copy{padding-top:93px;align-self:center}
  .score-shell[data-page="ueber-uns"] .us-hero-family .us-hero-names{align-self:end;padding-bottom:max(28px,4vh)!important}
  .score-shell[data-page="ueber-uns"] .us-hero-family .us-family-picture{height:100svh!important;width:100%!important;aspect-ratio:auto!important;align-self:stretch;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
  .score-shell[data-page="ueber-uns"] .us-hero-family .us-family-picture img{height:100%!important;object-fit:cover!important;object-position:50% 12%!important}
}
@media (max-width:900px){
  .score-shell[data-page="ueber-uns"] .us-hero-family{padding:0 0 max(24px,env(safe-area-inset-bottom))!important;grid-template-areas:"image" "copy" "names"!important;row-gap:0!important}
  .score-shell[data-page="ueber-uns"] .us-hero-family .us-family-picture{width:100%!important;max-height:72svh;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .score-shell[data-page="ueber-uns"] .us-hero-family .us-family-picture img{height:100%!important;max-height:72svh;object-fit:cover!important;object-position:50% 8%!important}
  .score-shell[data-page="ueber-uns"] .us-hero-family .us-hero-copy{position:relative;z-index:2;margin-top:-17svh;padding:0 20px}
  .score-shell[data-page="ueber-uns"] .us-hero-family .us-hero-names{padding:16px 20px 0!important}
}

/* ---------- 3. Prozess Ultra-Wide ---------- */
@media (min-width:2200px){
  .score-shell[data-page="prozess"] .pe-journey-grid{max-width:2720px!important;width:calc(100% - 2*clamp(96px,6vw,240px))!important;grid-template-columns:minmax(0,1.5fr) minmax(600px,1fr)!important;column-gap:clamp(72px,4.5vw,160px)}
  .score-shell[data-page="prozess"] .pe-phase-nav{padding-inline:max(clamp(96px,6vw,240px),calc(50vw - 1360px))!important}
  .score-shell[data-page="prozess"] .pe-live-stage{height:min(calc(100svh - 150px),1180px)}
  .score-shell[data-page="prozess"] .pe-assembly{scale:1.14;transform-origin:50% 50%}
  .score-shell[data-page="prozess"] .pe-chapters{max-width:760px}
}
@media (min-width:2800px){.score-shell[data-page="prozess"] .pe-assembly{scale:1.24}}
@media (min-width:3400px){.score-shell[data-page="prozess"] .pe-assembly{scale:1.32}}