/* Dokumenthülle nur für das Lab; V667 teilt ausschliesslich die Szenenregeln mit dem Startseitenintro. */
html.symmle-visual-lab-document,
html.symmle-visual-lab-document body.symmle-visual-lab-page {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 100%;
  max-width: none;
  background: #020a10 !important;
  color: #edf4f1;
  color-scheme: dark;
}

:is(#symmle-visual-lab, #symmle-start-intro-scene),
:is(#symmle-visual-lab, #symmle-start-intro-scene) * { box-sizing: border-box; }

:is(#symmle-visual-lab, #symmle-start-intro-scene) {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: clip;
  background: #020a10;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:is(#symmle-visual-lab, #symmle-start-intro-scene) .svl-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 19% 12%, #15373d80, transparent 52%),
    radial-gradient(ellipse at 88% 69%, #103d454d, transparent 50%),
    radial-gradient(ellipse at 50% -35%, #32697755, transparent 65%),
    linear-gradient(150deg, #06141e, #02090f 60%, #061720);
}

:is(#symmle-visual-lab, #symmle-start-intro-scene) .svl-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.95;
}

:is(#symmle-visual-lab, #symmle-start-intro-scene) .svl-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#020b11a8, #020b11a8),
    linear-gradient(180deg, #01080dcc, #01080d55 13%, transparent 25%, transparent 81%, #01080d66);
}

#symmle-visual-lab .svl-header {
  /* Sticky wie .sm-nav der Startseite; gleiche Grid-Zelle erhält die Bildmitte. */
  position: sticky;
  z-index: 31;
  top: 0;
  grid-area: 1 / 1;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: max(28px, env(safe-area-inset-top)) clamp(24px, 4.2vw, 84px);
  border: 0;
  background: none;
}

#symmle-visual-lab .svl-header-actions {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 50px);
}

#symmle-visual-lab .svl-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: clamp(142px, 14vw, 196px);
  min-height: 44px;
}

#symmle-visual-lab .svl-brand img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

#symmle-visual-lab .svl-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 50px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

#symmle-visual-lab a {
  color: #e3eeeb;
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
}

#symmle-visual-lab .svl-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: 0.015em;
  white-space: nowrap;
  transition: color 180ms ease;
}

#symmle-visual-lab a:hover { color: #fff; }
#symmle-visual-lab a:focus-visible { outline: 2px solid #b2d8d4; outline-offset: 8px; }

:is(#symmle-visual-lab, #symmle-start-intro-scene) .svl-center {
  position: relative;
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: inherit;
  padding: 132px 24px;
  pointer-events: none;
}

:is(#symmle-visual-lab, #symmle-start-intro-scene) :is(#symmle-visual-lab-title, #symmle-start-intro-title) {
  margin: 0;
  padding: 0;
  max-width: 100%;
  border: 0;
  color: #edf4f1;
  background: none;
  font: 480 clamp(34px, 4.55vw, 84px) / 1.22 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: -0.044em;
  text-align: center;
  text-transform: none;
  text-wrap: balance;
  text-shadow: 0 2px 32px #01080d88;
  pointer-events: auto;
}

:is(#symmle-visual-lab, #symmle-start-intro-scene) :is(#symmle-visual-lab-title, #symmle-start-intro-title) span { display: block; }

@media (max-width: 600px) {
  #symmle-visual-lab .svl-header { padding: max(18px, env(safe-area-inset-top)) 18px; gap: 14px; }
  #symmle-visual-lab .svl-brand { width: 120px; }
  #symmle-visual-lab .svl-nav { gap: 18px; }
  #symmle-visual-lab .svl-header-actions { gap: 18px; }
  #symmle-visual-lab .svl-nav a { font-size: 13px; }
  :is(#symmle-visual-lab, #symmle-start-intro-scene) .svl-center { padding: 112px 16px; }
  :is(#symmle-visual-lab, #symmle-start-intro-scene) :is(#symmle-visual-lab-title, #symmle-start-intro-title) { font-size: clamp(26px, 6.5vw, 39px); line-height: 1.3; }
}

@media (max-width: 420px) {
  #symmle-visual-lab .svl-header { gap: 10px; }
  #symmle-visual-lab .svl-brand { width: 88px; }
  #symmle-visual-lab .svl-nav,
  #symmle-visual-lab .svl-header-actions { gap: 12px; }
  #symmle-visual-lab .svl-nav a { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #symmle-visual-lab .svl-nav a { transition: none; }
}

/* Menüvertrag der bestehenden Startseite: .sm-nav-*, is-menu-open,
   data-sm-menu-toggle; keine neue Scrollrichtung-/Header-Zustandsmaschine. */
body.symmle-visual-lab-page.symmle-menu-open { overflow: hidden !important; }
#symmle-visual-lab:not([data-sm-menu-ready="1"]) .sm-nav-menu-link { visibility: hidden; }
#symmle-visual-lab.is-menu-open .svl-nav { visibility: hidden; }

#symmle-visual-lab .sm-nav-menu-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: #e3eeeb;
    background: transparent;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 240ms ease;
}

#symmle-visual-lab .sm-nav-menu-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.45);
    transform-origin: center;
    transition:
        opacity 180ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

#symmle-visual-lab .sm-nav-menu-line {
    position: absolute;
    left: 9px;
    display: block;
    width: 24px;
    height: 1.6px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition:
        top 380ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 190ms ease;
}

#symmle-visual-lab .sm-nav-menu-line:nth-child(1) { top: 13px; }
#symmle-visual-lab .sm-nav-menu-line:nth-child(2) { top: 20px; }
#symmle-visual-lab .sm-nav-menu-line:nth-child(3) { top: 27px; }

#symmle-visual-lab .sm-nav-menu-link:hover,
#symmle-visual-lab .sm-nav-menu-link:focus-visible {
    background: transparent;
    outline: none;
}

#symmle-visual-lab .sm-nav-menu-link:focus-visible::after {
    opacity: 0.48;
    transform: scaleX(1);
}

#symmle-visual-lab:not(.is-menu-open) .sm-nav-menu-link:hover .sm-nav-menu-line:nth-child(1),
#symmle-visual-lab:not(.is-menu-open) .sm-nav-menu-link:focus-visible .sm-nav-menu-line:nth-child(1) {
    top: 10px;
    transform: translateX(-1px) scaleX(1.06);
}

#symmle-visual-lab:not(.is-menu-open) .sm-nav-menu-link:hover .sm-nav-menu-line:nth-child(2),
#symmle-visual-lab:not(.is-menu-open) .sm-nav-menu-link:focus-visible .sm-nav-menu-line:nth-child(2) {
    transform: translateX(1.5px) scaleX(0.88);
}

#symmle-visual-lab:not(.is-menu-open) .sm-nav-menu-link:hover .sm-nav-menu-line:nth-child(3),
#symmle-visual-lab:not(.is-menu-open) .sm-nav-menu-link:focus-visible .sm-nav-menu-line:nth-child(3) {
    top: 30px;
    transform: translateX(-0.5px) scaleX(1.09);
}

#symmle-visual-lab.is-menu-open .sm-nav-menu-link:hover,
#symmle-visual-lab.is-menu-open .sm-nav-menu-link:focus-visible {
    background: transparent;
}

#symmle-visual-lab.is-menu-open .sm-nav-menu-line:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
}

#symmle-visual-lab.is-menu-open .sm-nav-menu-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.28);
}

#symmle-visual-lab.is-menu-open .sm-nav-menu-line:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
}

#symmle-visual-lab.is-menu-open .sm-nav-menu-link:hover .sm-nav-menu-line:nth-child(1),
#symmle-visual-lab.is-menu-open .sm-nav-menu-link:focus-visible .sm-nav-menu-line:nth-child(1) {
    transform: translate3d(-1px, -1px, 0) rotate(38deg) scaleX(1.08);
}

#symmle-visual-lab.is-menu-open .sm-nav-menu-link:hover .sm-nav-menu-line:nth-child(3),
#symmle-visual-lab.is-menu-open .sm-nav-menu-link:focus-visible .sm-nav-menu-line:nth-child(3) {
    transform: translate3d(1px, 1px, 0) rotate(-52deg) scaleX(0.94);
}


#symmle-visual-lab .sm-nav-panel {
  position: fixed;
  inset: 0;
  z-index: 29;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #edf4f1;
  background: #020a10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-18px);
  transition: opacity 300ms ease, transform 360ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 360ms;
}
#symmle-visual-lab.is-menu-open .sm-nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
#symmle-visual-lab .sm-nav-panel-inner {
  display: grid;
  align-items: center;
  width: min(1180px, 88vw);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(132px, 15vh) 0 52px;
}
#symmle-visual-lab .sm-nav-panel-links { display: grid; }

@media (prefers-reduced-motion: reduce) {
  #symmle-visual-lab .sm-nav-menu-link,
  #symmle-visual-lab .sm-nav-menu-link::after,
  #symmle-visual-lab .sm-nav-menu-line,
  #symmle-visual-lab .sm-nav-panel { transition: none !important; }
}