/* r5 · 2026-11-03 · Nico: home rails (01 / line / SCROLL TO EXPLORE, hero + scenes) back at their r3 position; r4 rail centring removed. */
/* NICO HUA · Mobile polish r1 (2026-11-02)
   1) Startseite: die Leiste „01 / Strich / SCROLL TO EXPLORE“ bleibt auch im vertikalen Handy-Hero (slider.css des
      Hero-Sliders blendete sie unter 900 px aus). Position wie in der Seitentypografie: unter dem Header, links.
   2) /webdesign „One system. Any shape.“: am Handy wieder drei Größen (Desktop groß, Tablet mittel, Mobile klein,
      gestaffelt) statt drei gleich breiter Rahmen – die angehängte Regel vom 31.10. stapelte alle auf volle Breite. */
@media (max-width:900px){
  html .score-shell[data-page="home"] .nh-hero-vertical .intro-rail{
    display:flex!important;top:calc(var(--nh-mobile-header-total,64px) + 16px)!important;left:18px;height:auto;z-index:8;pointer-events:none}
  html .score-shell[data-page="webdesign"] .web-matter-stage{
    display:block!important;position:relative;height:auto!important;min-height:0!important;perspective:none;padding-bottom:4px}
  html .score-shell[data-page="webdesign"] .web-matter-frame{
    position:relative!important;inset:auto!important;height:auto!important;max-height:none!important;transform:none!important;margin:0}
  html .score-shell[data-page="webdesign"] .web-matter-wide{width:84%!important;aspect-ratio:16/10!important;z-index:1}
  html .score-shell[data-page="webdesign"] .web-matter-tablet{width:50%!important;aspect-ratio:3/2!important;margin:-15% 0 0 auto!important;z-index:2}
  html .score-shell[data-page="webdesign"] .web-matter-phone{width:30%!important;aspect-ratio:2/3!important;margin:-26% 0 0 10%!important;border-radius:14px;z-index:3}
  html .score-shell[data-page="webdesign"] .web-matter-phone figcaption{left:8px;right:8px;bottom:7px;font-size:7px!important;gap:4px}
  html .score-shell[data-page="webdesign"] .web-matter-axis{position:relative!important;inset:auto!important;margin-top:18px}
}
@media (max-width:560px){
  html .score-shell[data-page="webdesign"] .web-matter-wide{width:90%!important}
  html .score-shell[data-page="webdesign"] .web-matter-tablet{width:54%!important;margin-top:-17%!important}
  html .score-shell[data-page="webdesign"] .web-matter-phone{width:33%!important;margin-top:-28%!important}
}
/* r2 · Startseite, Handy: der Textblock der Slides 2–5 („WEB. MOTION. SOUND.“, Text, zwei Knöpfe) hing am unteren
   Rand und rutschte mit jeder längeren Überschrift nach oben. Jetzt feste Höhe: Überschrift beginnt auf jedem Slide
   an derselben Stelle, die Knöpfe bleiben unten – wie der erste Slide bis zum Ende. */
@media (max-width:900px){
  html .score-shell[data-page="home"] .nh-hero-vertical .nh-hero-live-copy{
    display:flex!important;flex-direction:column;height:286px!important;bottom:clamp(105px,13svh,190px)!important;top:auto!important}
  html .score-shell[data-page="home"] .nh-hero-vertical .nh-hero-live-copy h1{min-height:84px}
  html .score-shell[data-page="home"] .nh-hero-vertical .nh-hero-live-copy p{min-height:36px;margin-top:14px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html .score-shell[data-page="home"] .nh-hero-vertical .nh-hero-live-actions{margin-top:auto!important;padding-top:14px}
  html .score-shell[data-page="home"] .nh-hero-vertical .nh-hero-live-copy small{position:absolute;left:0;bottom:-24px;margin:0}
}
/* r3 · /webdesign „The grid is only the start“: am Handy zeigte der fast quadratische Rahmen nur die rechte Hälfte des
   Bildes – das Raster fehlte. Jetzt behält der Rahmen das Bildverhältnis, das ganze Motiv ist zu sehen. */
@media (max-width:900px){
  html .score-shell[data-page="webdesign"] .signature-web figure{aspect-ratio:1600/1195!important;height:auto!important}
  html .score-shell[data-page="webdesign"] .signature-web figure img{object-position:50% 50%!important}
}
/* ===== r4 · 2026-11-02 · Nico, Handy ≤ 900 px (Desktop nur Punkt 4) =====================================
   1) Startseite: Leiste „01 / Linie / SCROLL TO EXPLORE“ mittig, der Hinweis zentriert UNTER der Linie –
      im Future-Hero (alle Welten) und genauso für 02, 03, 04, 05. Ungerade Breite + linke Kante auf ganzen
      Pixeln: die 1-px-Linien liegen exakt auf dem Pixelraster.
   2) Haarlinien knackig statt dünn/pixelig beim Wischen: die Tiefenbewegung (--depth-*) des Hero-Textes und
      der Bögen rastet auf ganze CSS-Pixel ein (= ganze Gerätepixel), ohne Mikro-Drehung der Signalzeile; Abschnitte
      mit Rahmenlinien gleiten am Handy nicht mehr um Bruchteile von Pixeln ein (wie schon unter 700 px üblich).
   3) Querlinie „taucht wieder auf“: die scroll-gesteuerten Übergangslinien (.intro-handoff/.intro-arrival)
      der Szenen 02–05 liefen beim Wischen quer über den ganzen Bildschirm – am 31.10. wurde dieselbe Linie
      im ersten Hero am Handy ausgeblendet; jetzt auch in den folgenden Szenen.
   4) Startseite (Handy + Desktop, Nico-Brief #20): „SCROLL / TO EXPLORE“ vollständig und exakt mittig unter der
      eigenen Linie der Leiste.
   5) Future-Hero, nur Handy: die dünne Stufenlinie unter WEB / MOTION / SOUND lief durch Wörter und Unterstriche –
      ausgeblendet (Desktop behält sie).
   Nur Layout/Darstellung: keine Gesten- oder Scroll-Regeln. */
@media (max-width:900px){
  html .score-shell[data-page="home"] .intro-stage .intro-copy{
    transform:translate3d(round(var(--depth-copy-x,0px),1px),round(var(--depth-copy-y,0px),1px),0)!important}
  html .score-shell[data-page="home"] .intro-stage .hero-discipline-signal{
    transform:translate3d(0,round(var(--signal-y,0px),1px),0)!important}
  html .score-shell[data-page="home"] .intro-stage .intro-arcs{
    transform:translate3d(round(var(--depth-arc-x,0px),1px),round(var(--depth-fg-y,0px),1px),0)!important}
  html .score-shell[data-page="home"] main>section.score-movement:not(.intro-scene),
  html .score-shell[data-page] .about-us-page>section.score-movement.score-movement,
  html .score-shell[data-page]>footer.score-coda.score-movement.score-movement{transform:none!important}
  html .score-shell[data-page="home"] .intro-nico .nh-signal-route{visibility:hidden!important}
  html .score-shell[data-page="home"] .intro-stage .intro-handoff,
  html .score-shell[data-page="home"] .intro-stage .intro-arrival{visibility:hidden!important}
}