/* ============================================================
   RMN POLISH LAYER  — rmn-3-230
   ============================================================
   Additiv. Geladen NACH elevation.css. Schwerpunkt: Navigation,
   Mobile-Experience, Loading-Wahrnehmung. Aendert kein Layout-
   Grundgeruest und kein Markup. Nutzt bestehende Tokens und die
   in 3-227 eingefuehrte body.page-*-Klasse.
   ============================================================ */

/* ------------------------------------------------------------
   1) MOBILE TAP-FEEDBACK
   (-webkit-tap-highlight-color war nirgends gesetzt -> graues Flackern)
   ------------------------------------------------------------ */
a, button, .btn, [role="button"], summary, label, input, select, textarea{
  -webkit-tap-highlight-color:transparent;
}
@media (hover:none) and (prefers-reduced-motion: no-preference){
  .btn:active{ transform:translateY(0) scale(.985); }
}

/* ------------------------------------------------------------
   2) AKTIVER NAV-ZUSTAND
   Nutzt body.page-* (3-227). Markiert den aktuellen Top-Link mit
   Orange + dezenter Unterstreichung. Sprach-agnostisch via href*=.
   ------------------------------------------------------------ */
.nav-links a{ position:relative; transition:color .2s ease; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after{ transform:scaleX(1); }

body.page-home   .nav-links a:first-child,
body.page-products .nav-links a[href*="/products"],
body.page-studio   .nav-links a[href*="/studio"],
body.page-media    .nav-links a[href*="/media"]{ color:var(--fg); }
body.page-home   .nav-links a:first-child::after,
body.page-products .nav-links a[href*="/products"]::after,
body.page-studio   .nav-links a[href*="/studio"]::after,
body.page-media    .nav-links a[href*="/media"]::after{ transform:scaleX(1); }

/* ------------------------------------------------------------
   3) SAFE-AREA (Notch / Landscape)
   Inhalt bleibt nie unter der Notch; nur auf Geraeten mit Inset wirksam.
   ------------------------------------------------------------ */
@supports (padding:max(0px)){
  .wrap{
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }
}

/* ------------------------------------------------------------
   4) IN-PAGE-ANKER unter der Sticky-Nav (z. B. #overview)
   ------------------------------------------------------------ */
:target{ scroll-margin-top:72px; }

/* ------------------------------------------------------------
   5) MOBILE-NAV: alle Top-Links erreichbar
   Bisher wurde ab <=480px der 4. Link (Media) komplett ausgeblendet.
   Jetzt: horizontale, snappende Scroll-Reihe mit Edge-Fade — kein
   Link geht verloren, kein Hamburger noetig.
   ------------------------------------------------------------ */
@media (max-width: 480px){
  .nav-links{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ scroll-snap-align:start; white-space:nowrap; }
  .nav-links a:nth-child(n+4){ display:inline-flex; }  /* Media wieder sichtbar */
}

/* ------------------------------------------------------------
   6) TOUCH-TARGETS in der Nav (>=44px) + Suchtrigger-Feedback
   ------------------------------------------------------------ */
@media (max-width: 880px){
  .nav-search-trigger{ min-height:44px; }
}
.nav-search-trigger{ transition:color .2s ease, background .2s ease; }

/* ------------------------------------------------------------
   7) SEARCH-OVERLAY: Mobile-Viewport-Hoehe + Scroll-Containment
   Verhindert Address-Bar-Sprung (100vh) und Scroll-Chaining auf Touch.
   ------------------------------------------------------------ */
.search-overlay{ overscroll-behavior:contain; }
@supports (height:100dvh){
  .search-overlay{ min-height:100dvh; }
}

/* ------------------------------------------------------------
   8) LOADING-WAHRNEHMUNG: weiches Einblenden frisch geladener Bilder
   (rein dekorativ, bricht nichts; bei reduced-motion sofort sichtbar)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  img[loading="lazy"]{
    animation:rmnImgIn .5s ease both;
  }
  @keyframes rmnImgIn{ from{ opacity:0; } to{ opacity:1; } }
}