/* 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}
}