/* SBVora v3 · loading-manifest-rail
 * Desktop (≥1121px): fixed rail on the right edge, 44px collapsed, expands on hover/focus.
 * ≤1120px: 44px chip bottom-left that opens the list as a bottom sheet.
 */

.manifest{
  --mf-bg:rgba(246,249,252,.94);
  --mf-solid:#f6f9fc;
  --mf-border:rgba(6,35,90,.18);
  --mf-rule:rgba(6,35,90,.12);
  --mf-text:#0b2946;
  --mf-muted:#4f5d7a;
  --mf-accent:#0b63b6;
  --mf-active-bg:rgba(36,154,230,.1);
  --mf-bars:#0b2946;
  --mf-shadow:0 18px 50px rgba(6,35,90,.14);
  --mf-p:0;
  position:fixed;
  z-index:95;
  margin:0;
  padding:0;
  display:block;
  justify-self:auto;
  font:inherit;
  letter-spacing:0;
  color:var(--mf-text);
}
html[data-theme="dark"] .manifest{
  --mf-bg:rgba(5,19,35,.93);
  --mf-solid:#071a2e;
  --mf-border:rgba(139,194,223,.24);
  --mf-rule:rgba(139,194,223,.14);
  --mf-text:#eaf7ff;
  --mf-muted:#9fbbd0;
  --mf-accent:#55c6f2;
  --mf-active-bg:rgba(45,197,248,.12);
  --mf-bars:#cfe6f5;
  --mf-shadow:0 18px 50px rgba(0,0,0,.4);
}
.manifest:not(.is-ready){display:none}
.manifest ol{list-style:none;margin:0;padding:0}
.manifest li{margin:0;padding:0}
.manifest a{position:relative;display:grid;color:inherit;text-decoration:none;transition:background-color .2s ease,color .2s ease}
/* style.css draws an underline on every `nav a::after`; the manifest has its own markers. */
.manifest a::after{content:none}
.manifest a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.manifest .le{grid-area:le;font:600 8.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--mf-muted);white-space:nowrap}
.manifest b{grid-area:lab;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;font-size:13px;letter-spacing:.01em}
.manifest a::before{content:"";grid-area:st;justify-self:center;font:700 12px/1 ui-monospace,Menlo,monospace;color:var(--mf-accent)}
.manifest li.is-loaded a::before{content:"\2713"}

/* Per-unit barcode: two stripe layers with different pitch/offset (set per item from JS). */
.manifest .bars{
  grid-area:bars;
  position:relative;
  display:block;
  width:26px;
  height:7px;
  color:var(--mf-bars);
  opacity:.26;
  background-image:
    repeating-linear-gradient(90deg,currentColor 0 var(--mf-b1,1px),transparent var(--mf-b1,1px) var(--mf-p1,3px)),
    repeating-linear-gradient(90deg,currentColor 0 var(--mf-b2,2px),transparent var(--mf-b2,2px) var(--mf-p2,8px));
  background-position:var(--mf-o1,0) 0,var(--mf-o2,0) 0;
  transition:opacity .3s ease;
}
.manifest li.is-loaded .bars{opacity:1}
/* Fill line under the barcode: full once loaded (scroll-driven where supported, see below). */
.manifest .bars::before{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left}
.manifest li.is-loaded .bars::before{transform:scaleX(1)}

/* One-shot laser sweep on a newly loaded unit. */
.manifest li.just-scanned .bars::after{
  content:"";position:absolute;top:-3px;bottom:-3px;left:0;width:2px;
  background:var(--cyan);box-shadow:0 0 6px var(--cyan),0 0 12px rgba(45,197,248,.6);
  animation:mf-sweep .6s cubic-bezier(.45,.05,.35,1) 1 both;
}
.manifest li.just-scanned a{animation:mf-flash .6s ease-out 1}
@keyframes mf-sweep{0%{left:-2px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes mf-flash{0%{background-color:rgba(45,197,248,.22)}100%{background-color:transparent}}

.manifest .manifest-count{margin:0;font:600 9px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mf-muted)}
.manifest .manifest-n{font-weight:700;color:var(--mf-text);white-space:nowrap;overflow:visible;padding:0}
.manifest.is-complete .manifest-n{color:var(--mf-accent)}

/* Hide during intro and hero; focus always brings it back for keyboard users. */
.manifest{transition:opacity .35s ease,transform .35s var(--ease,ease),visibility 0s linear 0s}
.manifest.is-intro:not(:focus-within),
.manifest.is-hero:not(.is-open):not(:focus-within){opacity:0;pointer-events:none}

/* ---------- Desktop rail ---------- */
@media (min-width:1121px){
  .manifest{
    top:50%;right:12px;
    width:44px;
    transform:translateY(-50%);
    background:var(--mf-bg);
    border:1px solid var(--mf-border);
    box-shadow:var(--mf-shadow);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
    overflow:hidden;
    transition:width .28s var(--ease,ease),opacity .35s ease,transform .35s var(--ease,ease);
  }
  .manifest.is-intro:not(:focus-within),
  .manifest.is-hero:not(:focus-within){transform:translate(14px,-50%)}
  .manifest:hover,.manifest:focus-within{width:236px}
  .manifest-chip{display:none}

  /* Header row: perforation when collapsed, title when expanded. */
  .manifest::before{
    content:attr(data-title);
    display:block;height:26px;padding:0 12px;
    font:700 8.5px/26px ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
    color:transparent;
    border-bottom:1px dashed var(--mf-rule);
    transition:color .2s ease;
  }
  .manifest:hover::before,.manifest:focus-within::before{color:var(--mf-muted)}

  .manifest ol{position:relative;width:234px}
  /* Progress track on the left edge. */
  .manifest ol::before,.manifest ol::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;pointer-events:none}
  .manifest ol::before{background:var(--mf-rule)}
  .manifest ol::after{background:var(--cyan);transform:scaleY(var(--mf-p));transform-origin:top;transition:transform .5s var(--ease,ease)}

  .manifest a{
    grid-template-columns:42px minmax(0,1fr) 26px;
    grid-template-rows:auto auto;
    grid-template-areas:"le lab st" "bars lab st";
    align-content:center;align-items:center;
    row-gap:5px;
    height:clamp(34px,calc((100vh - 200px) / 8),42px);
    padding-right:6px;
  }
  .manifest .le{justify-self:center;align-self:end}
  .manifest .bars{justify-self:center;align-self:start}
  .manifest b{padding-left:6px}
  .manifest a:hover{background:var(--mf-active-bg)}
  .manifest a[aria-current="location"]{background:var(--mf-active-bg);box-shadow:inset 2px 0 0 var(--cyan)}
  .manifest a[aria-current="location"] .le,.manifest a[aria-current="location"] b{color:var(--mf-accent)}

  .manifest .manifest-count{
    display:flex;align-items:center;gap:6px;
    width:234px;height:30px;padding:0 0 0 7px;
    border-top:1px dashed var(--mf-rule);
  }
  .manifest .manifest-n{flex:0 0 30px;text-align:center;font-size:8.5px;letter-spacing:0}
  .manifest:not(:hover):not(:focus-within) .manifest-w{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;
  }
}

/* ---------- Header nav mirror ---------- */
#mainNav a[aria-current="location"]{color:#0069b8}
#mainNav a[aria-current="location"]::after{right:0}
html[data-theme="dark"] #mainNav a[aria-current="location"]{color:#fff}
@media (max-width:860px){
  #mainNav a[aria-current="location"]{box-shadow:inset 2px 0 0 var(--cyan);padding-left:12px}
}

/* ---------- Chip + bottom sheet ---------- */
@media (max-width:1120px){
  .manifest{left:0;right:0;bottom:0;top:auto;width:auto;height:0;overflow:visible}
  .manifest.is-intro:not(:focus-within) .manifest-chip,
  .manifest.is-hero:not(.is-open):not(:focus-within) .manifest-chip,
  .manifest.is-end:not(.is-open):not(:focus-within) .manifest-chip{opacity:0;transform:translateY(10px);pointer-events:none}
  .manifest.is-hero:not(.is-open):not(:focus-within){opacity:1}

  .manifest-chip{
    position:fixed;z-index:3;
    left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    display:inline-flex;align-items:center;gap:10px;
    min-width:44px;height:44px;margin:0;padding:0 14px 0 12px;
    border:1px solid rgba(45,197,248,.5);border-radius:0;
    background:#061a36;color:#eaf7ff;
    font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;
    box-shadow:0 12px 30px rgba(6,26,54,.28);
    cursor:pointer;
    transition:opacity .3s ease,transform .3s var(--ease,ease),border-color .2s ease;
  }
  .manifest-chip:hover{border-color:var(--cyan)}
  .manifest-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
  .manifest-chip::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background:var(--cyan);transform:scaleX(var(--mf-p));transform-origin:left;transition:transform .5s var(--ease,ease)}
  .manifest-chip .bars{width:18px;height:12px;color:#8ee6ff;opacity:1}
  .manifest-chip .bars::before{content:none}
  .manifest.is-open .manifest-chip{border-color:var(--cyan)}
  html[data-theme="dark"] .manifest-chip{background:#0a2742;border-color:rgba(45,197,248,.6);box-shadow:0 12px 30px rgba(0,0,0,.45)}

  /* Dimmed backdrop */
  .manifest::before{content:"";position:fixed;inset:0;z-index:0;background:rgba(3,13,31,.42);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
  .manifest.is-open::before{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}

  .manifest ol{
    position:fixed;z-index:1;left:0;right:0;bottom:0;
    max-height:min(76vh,620px);overflow-y:auto;overscroll-behavior:contain;
    padding:0 16px calc(76px + env(safe-area-inset-bottom,0px));
    background:var(--mf-solid);color:var(--mf-text);
    border-top:1px solid rgba(45,197,248,.55);
    box-shadow:0 -24px 60px rgba(3,13,31,.25);
    transform:translateY(100%);visibility:hidden;
    transition:transform .3s var(--ease,ease),visibility 0s linear .3s;
  }
  .manifest.is-open ol{transform:none;visibility:visible;transition:transform .3s var(--ease,ease),visibility 0s}
  .manifest ol::before{
    content:attr(data-title);
    position:sticky;top:0;z-index:1;display:block;
    margin:0 -16px;padding:0 16px;height:46px;
    font:700 10px/46px ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;
    color:var(--mf-muted);background:var(--mf-solid);
    border-bottom:1px dashed var(--mf-rule);
  }
  .manifest a{
    grid-template-columns:58px minmax(0,1fr) 40px 24px;
    grid-template-areas:"le lab bars st";
    align-items:center;column-gap:10px;
    min-height:50px;padding:0 4px 0 10px;
    border-bottom:1px solid var(--mf-rule);
  }
  .manifest li:last-child a{border-bottom:0}
  .manifest .le{font-size:10px}
  .manifest b{font-size:15px}
  .manifest .bars{width:40px;height:10px}
  .manifest a[aria-current="location"]{background:var(--mf-active-bg);box-shadow:inset 2px 0 0 var(--cyan)}
  .manifest a[aria-current="location"] .le,.manifest a[aria-current="location"] b{color:var(--mf-accent)}

  /* Count: screen-reader only while closed (keeps the polite live region alive), visible in the open sheet. */
  .manifest .manifest-count{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;
  }
  .manifest.is-open .manifest-count{
    position:fixed;z-index:2;clip:auto;overflow:visible;margin:0;width:auto;height:44px;
    right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    display:flex;align-items:center;gap:6px;font-size:10px;
  }
  .manifest.is-open .manifest-n{font-size:11px}
}

/* ---------- Completion stamp on the contact card ---------- */
.contact-card.is-stamped{position:relative}
.manifest-stamp{
  position:absolute;right:0;top:0;z-index:2;
  display:block;max-width:100%;
  padding:9px 14px 8px;
  border:3px double var(--cyan);
  background:rgba(6,26,54,.32);
  color:#c8f3ff;
  font:400 12px/1.25 Michroma,"Arial Narrow",sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(-64%) rotate(-6deg);
  transform-origin:70% 50%;
  text-shadow:0 0 12px rgba(45,197,248,.35);
}
.manifest-stamp::after{
  content:attr(data-units);
  display:block;margin-top:5px;
  font:700 8.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.2em;color:#8ee6ff;
}
.manifest-stamp.is-down,.manifest-stamp.is-dropping{opacity:.95}
.manifest-stamp.is-dropping{animation:mf-stamp .26s cubic-bezier(.3,.6,.2,1) 1 both}
@keyframes mf-stamp{
  0%{opacity:0;transform:translateY(-64%) rotate(-6deg) scale(1.6)}
  70%{opacity:.95}
  100%{opacity:.95;transform:translateY(-64%) rotate(-6deg) scale(1)}
}
@media (max-width:560px){
  .manifest-stamp{font-size:10.5px;padding:8px 11px 7px;letter-spacing:.1em}
}

/* ---------- Scroll-driven fill (progressive enhancement) ---------- */
@supports (animation-timeline:view()) and (timeline-scope:--mf-a){
  @media (prefers-reduced-motion:no-preference) and (min-width:1121px){
    body{timeline-scope:--mf-top,--mf-arbeiten,--mf-live,--mf-werkbank,--mf-leistungen,--mf-systeme,--mf-studio,--mf-kontakt}
    #top{view-timeline-name:--mf-top}
    #arbeiten{view-timeline-name:--mf-arbeiten}
    #live{view-timeline-name:--mf-live}
    #werkbank{view-timeline-name:--mf-werkbank}
    #leistungen{view-timeline-name:--mf-leistungen}
    #systeme{view-timeline-name:--mf-systeme}
    #studio{view-timeline-name:--mf-studio}
    #kontakt{view-timeline-name:--mf-kontakt}
    .manifest li .bars::before{animation:mf-fill linear both;animation-range:cover 10% cover 90%}
    .manifest a[href="#top"] .bars::before{animation-timeline:--mf-top;animation-range:exit 0% exit 100%}
    .manifest a[href="#arbeiten"] .bars::before{animation-timeline:--mf-arbeiten}
    .manifest a[href="#live"] .bars::before{animation-timeline:--mf-live}
    .manifest a[href="#werkbank"] .bars::before{animation-timeline:--mf-werkbank}
    .manifest a[href="#leistungen"] .bars::before{animation-timeline:--mf-leistungen}
    .manifest a[href="#systeme"] .bars::before{animation-timeline:--mf-systeme}
    .manifest a[href="#studio"] .bars::before{animation-timeline:--mf-studio}
    .manifest a[href="#kontakt"] .bars::before{animation-timeline:--mf-kontakt;animation-range:entry 0% contain 100%}
    @keyframes mf-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ---------- Reduced motion: states only ---------- */
@media (prefers-reduced-motion:reduce){
  .manifest,.manifest *,.manifest::before,.manifest ol,.manifest ol::after,.manifest-chip,.manifest-chip::after{transition:none!important}
  .manifest li.just-scanned .bars::after{content:none;animation:none}
  .manifest li.just-scanned a{animation:none}
  .manifest-stamp.is-dropping{animation:none}
}

/* ---------- Print: the rail is screen chrome ---------- */
@media print{
  .manifest{display:none!important}
  html:not(.sbv-print-only) .manifest-stamp{opacity:1;color:#071426;background:none;border-color:#071426;text-shadow:none}
  html:not(.sbv-print-only) .manifest-stamp::after{color:#071426}
}