/* Approved LogicFabrik FINAL silverchrome navigation: only this component. */
.metal-navigation{position:relative!important;z-index:90!important;width:100%;margin-inline:auto;padding:0!important;background:transparent!important;overflow:visible!important}
.metal-navigation .nav-picture{width:100%;max-width:none}
.metal-navigation :is(button,input){font-family:Arial,Helvetica,sans-serif}
.metal-navigation .mobile-nav{display:none}
.metal-navigation .sr-only,.lf-menu-viewport .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.lf-menu-viewport[hidden],.lf-menu-dismiss[hidden]{display:none!important}
@media(max-width:699px){.metal-navigation .nav-picture{display:none!important}}
@media(min-width:700px){.metal-navigation .mobile-nav{display:none!important}}
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
  .hit{position:absolute;z-index:4;border:0;background:transparent;cursor:pointer;border-radius:14px;display:block;padding:0;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .hit:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 0 0 5px #31c4ffad,0 0 27px #9f44ff}
.nav-picture{position:relative;width:100%;aspect-ratio:1168 / 86;overflow:visible;isolation:isolate}
.nav-picture-art{width:100%;height:100%;display:block;pointer-events:none;-webkit-mask-image:none;mask-image:none}
.nav-picture .hit{position:absolute;z-index:5;display:block}
.nav-picture .hit.menu{left:1.2%;top:2%;width:8.3%;height:94%}
.nav-picture .hit.brand{left:10%;top:2%;width:26.8%;height:94%}
.nav-picture .hit.search{left:39.6%;top:11%;width:41.5%;height:78%}
.nav-picture .hit.cart{left:82.8%;top:2%;width:8.5%;height:94%}
.drawer[hidden]{display:none!important}
.drawer {position:fixed;top:8px;left:max(8px,calc((100vw - 1168px)/2 + 8px));bottom:auto;z-index:120;width:min(352px,94vw);
  aspect-ratio:352/456;overflow:hidden;padding:0;border:0;box-shadow:none;
  background:transparent;
  transform:translateX(-110%);opacity:1;
  will-change:transform,opacity;
  transition:transform 1.5s cubic-bezier(.65,0,.35,1)}
.drawer.open{transform:translateX(0);opacity:1;
  transition:transform 1.5s cubic-bezier(.65,0,.35,1)}
.drawer .drawer-links{position:absolute;inset:0;z-index:1}
.drawer .hot-close{position:absolute;right:31px;top:15px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:3}.drawer .hot-close:focus-visible{outline:2px solid #d6eeff;outline-offset:0;box-shadow:0 0 12px #68bffc}
/* Originalgetreue Seitenleiste: Sie gleitet ÜBER die Seite.
   Campus, Menüleiste, Wasserfall und Inhalt bleiben an ihrer ursprünglichen Position. */
@media(max-width:699px){body.lf-menu-open .drawer{z-index:300}}
@media(prefers-reduced-motion:reduce){.drawer,.drawer.open{transition:none!important}}
/* V14 SILBERCHROM – Referenz A (Menü/Header). Referenz B – unveränderte helle Grafiken unter dem Wasserfall. */
.nav-picture{position:relative;isolation:isolate}
.nav-picture-art{display:block;width:100%;height:100%;object-fit:fill;-webkit-mask-image:none;mask-image:none}
.nav-picture .hit.menu{left:1.6%;top:6%;width:7.2%;height:83%}
.nav-picture .hit.brand{left:6.1%;top:5%;width:24.9%;height:82%}
.nav-picture .hit.search{left:40.6%;top:10%;width:41.3%;height:74%}
.nav-picture .hit.cart{left:82.8%;top:5%;width:8.8%;height:85%}
.nav-picture .hit.account{left:91%;top:5%;width:7.9%;height:85%}
/* Overlay is clipped to the real shop stage; page never moves. */
.lf-menu-viewport{position:fixed;z-index:120;left:var(--lf-shop-left,0px);top:var(--lf-shop-top,0px);width:var(--lf-shop-width,100vw);height:var(--lf-shop-height,100dvh);overflow-x:hidden;overflow-y:auto;pointer-events:none;isolation:isolate}
.lf-menu-dismiss{position:fixed;z-index:119;inset:0;background:transparent;cursor:default}
.lf-menu-dismiss[hidden]{display:none!important}
.drawer{position:absolute!important;left:var(--lf-drawer-x,10px)!important;top:4px!important;width:var(--lf-menu-width,290px)!important;height:auto!important;aspect-ratio:370/535!important;max-width:none!important;max-height:none;border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent url('/assets/lf-final-sidebar.png') center/100% 100% no-repeat!important;overflow:hidden!important;z-index:2!important;opacity:1!important;transform:translateX(calc(-100% - 18px))!important;transition:transform 1.5s cubic-bezier(.65,0,.35,1)!important;will-change:transform;pointer-events:auto}
.drawer.open{transform:translateX(0)!important;opacity:1!important}
.drawer .hot-close{position:absolute!important;top:4.5%!important;right:5.0%!important;width:12%!important;height:9.2%!important;border-radius:50%;background:transparent;border:0;z-index:5}
.drawer .drawer-links{position:absolute;inset:0;z-index:4}.drawer .hot-close:focus-visible{outline:2px solid #e1f1ff;outline-offset:1px;box-shadow:0 0 12px #bddeff}
/* Silver/copper glow points take exactly 16s for one full frame revolution. */
.lf-orbit-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.lf-glint{fill:none;stroke-linecap:round;stroke-width:2.6;stroke-dasharray:5 995;opacity:.84;vector-effect:non-scaling-stroke}
.lf-glint-white{stroke:#f9ffff;filter:drop-shadow(0 0 4px #d9f4ff);animation:lf-orbit-white 16s linear infinite}
.lf-glint-copper{stroke:#ffcfaa;filter:drop-shadow(0 0 3px #fff0dc);animation:lf-orbit-copper 16s linear infinite}
@keyframes lf-orbit-white{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
@keyframes lf-orbit-copper{from{stroke-dashoffset:-500}to{stroke-dashoffset:-1500}}
.lf-orbit-sidebar{z-index:3}
@media(min-width:700px){.mobile{display:none!important}}
@media(max-width:699px){.lf-menu-viewport{z-index:300}}
@media(prefers-reduced-motion:reduce){.lf-glint{animation:none!important;opacity:0!important}.drawer,.drawer.open{transition:none!important}}
.nav-picture .hit.menu{left:1.8%;width:3.6%;top:27%;height:48%;border-radius:50%}
.nav-picture .hit.menu svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px #edf8ff)}
.nav-picture .hit.menu:focus-visible{outline:2px solid #fff7e8;outline-offset:2px}


/* V15 – Header und Slider exakt aus der freigegebenen 04.11.-Referenz.
   Unterhalb: V11 Campus/Waterfall and V14 approved lower graphics unchanged. */
.nav-picture{aspect-ratio:1448/108!important}
.nav-picture .hit.menu{left:1.1%!important;top:8%!important;width:6.0%!important;height:79%!important;background:transparent!important;outline-offset:2px;}
.nav-picture .hit.menu svg{display:none!important}
.nav-picture .hit.brand{left:7.4%!important;top:9%!important;width:22.7%!important;height:80%!important}
.nav-picture .hit.search{left:41.5%!important;top:10%!important;width:39.0%!important;height:80%!important}
.nav-picture .hit.cart{left:83.4%!important;top:4%!important;width:9.1%!important;height:90%!important}
.nav-picture .hit.account{left:93.2%!important;top:4%!important;width:6.5%!important;height:90%!important}
.drawer{aspect-ratio:367/519!important;transform:translateX(calc(-100% - 32px))!important;transition:transform 1.5s cubic-bezier(.65,0,.35,1)!important}
.drawer.open{transform:translateX(0)!important}
.drawer .hot-close{top:5%!important;right:7%!important;width:12.5%!important;height:8%!important}
/* Wide, softly glowing metallic reflection tracks; full circle ~16 seconds. */
.lf-glint{stroke-width:2.7;stroke-dasharray:34 966;opacity:.7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lf-glint-white{stroke:#f6fdff;filter:drop-shadow(0 0 5px #d5eeff) drop-shadow(0 0 9px #ffffff88);animation:lf-orbit-white 16s linear infinite}
.lf-glint-copper{stroke:#ffe2c2;stroke-dasharray:44 956;filter:drop-shadow(0 0 5px #ffdac2);animation:lf-orbit-copper 16s linear infinite}
@media(prefers-reduced-motion:reduce){.lf-glint{animation:none!important;opacity:0!important}.drawer{transition:none!important}}
/* V16 – AUSSCHLIESSLICH ergänzender Silberchrom-Schimmer, links → rechts.
   Die darunterliegende V15-HTML, alle Originalgrafiken, bestehenden Animationen,
   Klickflächen, Campus und Wasserfall bleiben bytegenau unverändert. */
@keyframes lf-v16-chrome-shimmer-ltr {
  from { background-position: 100% 50%; }
  to   { background-position: 0% 50%; }
}
/* Die Lichtbahn bewegt sich INNERHALB der Oberflächen: kein Überschwingen
   in den Campus oder außerhalb des freigestellten Seitenmenüs. */
.nav-picture::after,
.drawer::after,
.mobile-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    transparent 30%,
    rgba(218,232,252,.018) 39%,
    rgba(224,241,255,.072) 45%,
    rgba(255,255,255,.19) 50%,
    rgba(210,231,255,.072) 55%,
    rgba(225,235,255,.018) 61%,
    transparent 70%);
  background-size: 260% 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: .66;
  animation: lf-v16-chrome-shimmer-ltr 6s linear infinite;
  will-change: background-position;
}
/* Unterhalb aller interaktiven Klickflächen, oberhalb der Originalgrafik. */
.nav-picture::after { z-index: 2; border-radius: 38px; }
.drawer::after { z-index: 2; border-radius: 34px; }
.mobile-nav::after { z-index: 2; border-radius: 25px; }
@media (prefers-reduced-motion: reduce) {
  .nav-picture::after,.drawer::after,.mobile-nav::after { animation: none; opacity: 0; }
}

/* V17: Three deliberately limited adjustments. Campus, waterfall, cards, routing unchanged. */
/* 1. Slightly fuller 6s silver-chrome shimmer, same left-to-right travel. */
.nav-picture::after,.drawer::after,.mobile-nav::after {
  background-image:linear-gradient(90deg,
    transparent 27%, rgba(220,237,255,.018) 34%,
    rgba(232,245,255,.07) 40%, rgba(241,249,255,.17) 46%,
    rgba(255,255,255,.28) 50%, rgba(228,241,255,.16) 54%,
    rgba(220,236,250,.065) 61%, rgba(220,235,252,.016) 67%,transparent 74%);
  opacity:.78;
  animation-duration:6s;
}
/* 2. The original 16s motion now moves soft radial glow spots, not line segments. */
.lf-v17-orbit-spot {opacity:.85;mix-blend-mode:screen;pointer-events:none}
@media(prefers-reduced-motion:reduce){.lf-v17-orbit-spot{display:none!important}}
/* Remove only the three-pixel export stripe; retain image size and position. */

.nav-picture{z-index:40;}
.lf-inline-search{position:absolute;z-index:9;left:42.35%;top:18.0%;width:38.1%;height:64%;display:block;margin:0;}
.lf-inline-search-submit{position:absolute;left:0;top:0;height:100%;width:12%;background:transparent;border:0;border-radius:50%;cursor:pointer}
.lf-inline-search input{position:absolute;left:12.0%;top:0;width:87.5%;height:100%;border:0;outline:0;box-shadow:none;background:transparent;color:#f8f7f4;font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(11px,calc(var(--lf-layout-unit, 1vw) * 1.18),17px);line-height:1.3;padding:0 4px 0 0;letter-spacing:0;-webkit-appearance:none;appearance:none;border-radius:0}
.lf-inline-search input::placeholder{color:#f3f2f1;opacity:.98}
.lf-inline-search input::-webkit-search-cancel-button{display:none}
.lf-inline-search:focus-within{filter:drop-shadow(0 0 3px #e6e7ec50)}
.lf-inline-search-results{position:absolute;z-index:200;left:4%;top:calc(100% + 9px);width:96%;max-height:270px;overflow:auto;padding:8px;border:1px solid #d3c8c2;border-radius:13px;color:#f6f8fc;background:linear-gradient(145deg,#18273cfa,#0b1525fc);box-shadow:0 12px 35px #000a;text-align:left}
.lf-inline-search-results[hidden]{display:none!important}
.lf-inline-search-results a{display:block;color:#f5f5f5;text-decoration:none;border-radius:8px;font-size:clamp(12px,calc(var(--lf-layout-unit, 1vw) * 1.1),15px);padding:10px 11px;line-height:1.3}
.lf-inline-search-results a:hover,.lf-inline-search-results a:focus-visible{background:#c4d9f037;outline:1px solid #e7d9c9;outline-offset:-1px}
.lf-inline-search-results p{margin:4px 8px;color:#d1d7df;font:13px/1.45 Arial,sans-serif}
@media(max-width:699px){.lf-inline-search{display:none!important}}
/* No content shifting, menu overlays the site. */
.lf-menu-viewport .drawer{font-family:Arial,Helvetica,sans-serif}
.lf-menu-viewport[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.lf-menu-viewport .drawer{transition:none!important}}

/* 2026-11-05: align chrome navigation with the full-width campus and blend
   only the boundary above the original LOGICFABRIK lettering. Keep all assets,
   video frames, navigation interactions and original artwork unchanged. */
.metal-navigation {
  background:#010218!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

/* Dark sky blends over the first 18px of the campus video, well above lettering. */
body:has(.campus-hero) > .metal-navigation::after {
  content:"";
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  right:0;
  height:19px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,#010218 0%,rgba(1,2,24,.70) 34%,rgba(1,2,24,0) 100%
  );
}


/* Keep both moving header light layers inside the chrome endcap silhouette.
   Percentages follow the 1448 x 108 artwork at every desktop width. */


/* Mobile: one grid row, using contiguous slices of the original desktop chrome. */
@media(max-width:699px){
 .metal-navigation .mobile-nav{display:grid;grid-template-columns:clamp(32px,9vw,48px) minmax(82px,1fr) minmax(100px,1.35fr) clamp(37px,10vw,54px) clamp(32px,9vw,48px);align-items:stretch;position:relative;isolation:isolate;width:100%;height:clamp(44px,12vw,60px);padding:0;margin:0;gap:0;background:transparent;box-shadow:none}
 .metal-navigation .mobile-nav > :is(button,a,form){position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background-image:url('/assets/lf-final-header.png');background-repeat:no-repeat;background-color:transparent;color:inherit;z-index:3}
 .mobile-nav > button,.mobile-nav > a{cursor:pointer;-webkit-tap-highlight-color:transparent}
 .metal-navigation .mobile-nav-menu{background-size:1340.741% 100%;background-position:0 50%}
 .metal-navigation .mobile-logo{background-size:436.145% 100%;background-position:9.677% 50%}
 .metal-navigation .mobile-nav-search{background-size:237.377% 100%;background-position:72.792% 50%}
 .metal-navigation .mobile-nav-cart{background-size:1113.846% 100%;background-position:92.564% 50%}
 .metal-navigation .mobile-nav-account{background-size:1477.551% 100%;background-position:100% 50%}
 .metal-navigation .mobile-search-submit{position:relative;display:block;width:22%;height:100%;min-height:0;padding:0;margin:0;border:0;background:transparent;cursor:pointer}
 .metal-navigation .mobile-nav-search > input{position:absolute;left:22%;top:18%;width:72%;height:64%;min-width:0;padding:0;margin:0;border:0;outline:0;border-radius:0;box-shadow:none;background:transparent;color:#f7f8fb;font:400 16px/1.3 Arial,sans-serif;appearance:none}
 .mobile-nav-search > input::placeholder{color:#edf1f5;opacity:1;font-size:11px}
 .mobile-nav-search > input::-webkit-search-cancel-button{display:none}
 .metal-navigation .mobile-nav::after{z-index:4;border-radius:999px;clip-path:inset(2.778% .35% 1% round 999px)}
 .mobile-nav > :is(button,a):focus-visible,.metal-navigation .mobile-nav > .mobile-nav-search:focus-within{outline:2px solid #fff4ce;outline-offset:-3px;border-radius:999px}
 .metal-navigation .mobile-nav-search-results{position:absolute;left:0;top:calc(100% + 3px);z-index:300;width:max(100%,180px);max-width:calc(100vw - 120px);box-sizing:border-box;max-height:min(45dvh,290px);overflow:auto;padding:6px;border:1px solid #c7cfdd;border-radius:10px;background:linear-gradient(150deg,#20354e,#071223);box-shadow:0 8px 24px #0009}
 .mobile-nav-search-results[hidden]{display:none!important}
 .metal-navigation .mobile-nav-search-results a{display:block;width:auto;height:auto;min-height:44px;box-sizing:border-box;padding:12px 10px;color:#f5f7fa;background:transparent;border-radius:7px;font:400 14px/1.3 Arial,sans-serif;text-decoration:none}
 .mobile-nav-search-results a:hover,.mobile-nav-search-results a:focus-visible{background:#ffffff24}
 .mobile-nav-search-results p{margin:5px;color:#f1f1f1;font:13px/1.4 Arial,sans-serif}
}