/* ============================================================================
   synDexx | Signature Navigation Master (NUR NAVIGATION)
   Diesen gesamten Block UNTEN an die bestehende CSS-Datei anfuegen.
   Keine globalen body-, h1-, .section- oder Layout-Regeln.
   ============================================================================ */
.signature-nav {
  --lime:#c8ff3d;
  --curve:cubic-bezier(.19,1,.22,1);
  --fluid:cubic-bezier(.22,1,.36,1);
  --progress:0;
}
.signature-nav,
.signature-nav *,
.signature-nav *::before,
.signature-nav *::after { box-sizing:border-box; }
.signature-nav[hidden] { display:none !important; }
.signature-nav a:focus-visible { outline:2px solid #c8ff3d; outline-offset:3px; }
.signature-nav .morph-pill { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
    /* Compact, sculpted navigation — 44px wide on desktop. */
    .signature-nav { position:fixed; z-index:80; width:44px; padding:10px 0; right:clamp(17px,2.5vw,34px); top:50%; transform:translateY(-50%); border-radius:25px; isolation:isolate; background:linear-gradient(155deg,rgba(53,61,54,.96),rgba(23,29,24,.97) 34%,rgba(16,20,17,.985) 100%); box-shadow:0 18px 52px rgba(24,31,25,.20),0 4px 11px rgba(24,31,25,.11),inset 0 1px 0 rgba(255,255,255,.21),inset 0 0 0 1px rgba(255,255,255,.085); -webkit-backdrop-filter:blur(20px) saturate(145%); backdrop-filter:blur(20px) saturate(145%); }
    .signature-nav::before { content:""; position:absolute; z-index:-1; inset:1px; border-radius:24px; background:radial-gradient(90% 29% at 50% 0%,rgba(255,255,255,.16),transparent),linear-gradient(92deg,rgba(255,255,255,.035),transparent 35%,rgba(255,255,255,.03)); pointer-events:none; }
    .signature-nav::after { content:""; position:absolute; inset:-1px; border-radius:26px; border:1px solid rgba(255,255,255,.13); pointer-events:none; }
    .signature-nav .nav-items { display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; width:100%; padding:5px 0; }
    .signature-nav .nav-track, .signature-nav .nav-track-fill { position:absolute; left:50%; width:1px; border-radius:10px; transform:translateX(-50%); pointer-events:none; }
    .signature-nav .nav-track { top:var(--track-top,24px); height:var(--track-height,160px); background:linear-gradient(to bottom,rgba(255,255,255,.20),rgba(255,255,255,.11),rgba(255,255,255,.20)); }
    .signature-nav .nav-track-fill { top:var(--track-top,24px); height:var(--track-height,160px); transform-origin:center top; transform:translateX(-50%) scaleY(var(--progress,0)); background:linear-gradient(to bottom,#ebffaf,#c8ff3d 55%,#defc8c); box-shadow:0 0 9px rgba(200,255,61,.32); will-change:transform; }
    .signature-nav .nav-traveler { position:absolute; z-index:3; width:5px; height:5px; top:0; left:0; border-radius:50%; opacity:0; background:#efffc7; box-shadow:0 0 12px 4px rgba(200,255,61,.65),0 0 26px 8px rgba(200,255,61,.24); pointer-events:none; }
    /* The dots NEVER translate, rotate or grow when hovered. */
    .signature-nav .nav-link { position:relative; z-index:4; display:grid; place-items:center; width:44px; height:28px; flex:0 0 28px; text-decoration:none; color:white; outline-offset:2px; }
    .signature-nav .dot-ring { position:relative; display:grid; place-items:center; width:14px; height:14px; border-radius:50%; border:1px solid rgba(229,240,222,.32); background:radial-gradient(circle at 45% 35%,rgba(255,255,255,.17),rgba(255,255,255,.02)); box-shadow:inset 0 1px 1px rgba(255,255,255,.09); transition:border-color .38s ease,box-shadow .42s ease,background .38s ease; }
    .signature-nav .dot-ring::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid transparent; opacity:0; transition:opacity .45s ease,border-color .45s ease; }
    .signature-nav .dot { width:4px; height:4px; flex:0 0 4px; border-radius:50%; background:#d6e1d2; box-shadow:0 0 3px rgba(255,255,255,.25); transition:background .35s ease,box-shadow .35s ease; }
    .signature-nav .nav-link:hover .dot-ring, .signature-nav .nav-link:focus-visible .dot-ring { border-color:rgba(226,246,204,.55); }
    .signature-nav .nav-link.is-current .dot-ring { border-color:rgba(218,255,126,.85); background:radial-gradient(circle,rgba(200,255,61,.17),rgba(255,255,255,.035)); box-shadow:0 0 12px rgba(200,255,61,.13),inset 0 1px 0 rgba(255,255,255,.12); }
    .signature-nav .nav-link.is-current .dot-ring::after { opacity:1; border-color:rgba(200,255,61,.42); }
    .signature-nav .nav-link.is-current .dot { background:var(--lime); box-shadow:0 0 0 2px rgba(200,255,61,.12),0 0 11px 3px rgba(200,255,61,.62),0 0 24px 6px rgba(200,255,61,.20); animation:sdxQuietBreathe 3.2s ease-in-out infinite; }
    @keyframes sdxQuietBreathe { 0%,100%{box-shadow:0 0 0 2px rgba(200,255,61,.12),0 0 11px 3px rgba(200,255,61,.55),0 0 23px 5px rgba(200,255,61,.16)} 50%{box-shadow:0 0 0 3px rgba(200,255,61,.17),0 0 15px 4px rgba(200,255,61,.79),0 0 30px 7px rgba(200,255,61,.27)} }
    /* The bridge is the transient liquid connection to the dot. */
    .signature-nav .morph-bridge { position:absolute; z-index:1; right:21px; top:50%; width:30px; height:14px; border-radius:999px; transform:translateY(-50%) scaleX(.15); transform-origin:right center; opacity:0; background:linear-gradient(90deg,rgba(31,41,29,0),rgba(72,87,55,.95) 58%,rgba(200,255,61,.35)); filter:blur(2px); transition:opacity .35s ease,transform .48s var(--fluid); pointer-events:none; }
    .signature-nav .nav-link.is-open .morph-bridge { opacity:1; transform:translateY(-50%) scaleX(1); }
    .signature-nav .morph-pill { --light-x:50%; --light-y:50%; position:absolute; z-index:2; right:22px; top:50%; min-height:46px; width:max-content; display:flex; align-items:center; gap:11px; padding:7px 11px 7px 9px; border-radius:999px; border:1px solid rgba(234,252,218,.18); color:#fbfff8; background:radial-gradient(110px 70px at var(--light-x) var(--light-y),rgba(223,255,170,.125),transparent 73%),linear-gradient(155deg,rgba(57,67,54,.98),rgba(22,29,23,.985) 56%,rgba(16,21,17,.99)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 19px 40px rgba(17,31,20,.22),0 0 0 1px rgba(255,255,255,.025); -webkit-backdrop-filter:blur(16px) saturate(155%); backdrop-filter:blur(16px) saturate(155%); opacity:0; transform:translate3d(7px,-50%,0) scaleX(.055) scaleY(.39); transform-origin:right center; clip-path:inset(0 0 0 96% round 999px); pointer-events:none; will-change:transform,opacity; }
    .signature-nav .morph-pill::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(112deg,transparent 10%,rgba(255,255,255,.12) 37%,rgba(200,255,61,.115) 48%,transparent 68%); opacity:0; transform:translateX(-100%); }
    .signature-nav .morph-pill::after { content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgba(200,255,61,.0); pointer-events:none; transition:border-color .38s ease,box-shadow .45s ease; }
    .signature-nav .nav-link.is-open .morph-pill { pointer-events:auto; opacity:1; transform:translate3d(-13px,-50%,0) scale(1); clip-path:inset(0 0 0 0 round 999px); }
    .signature-nav .nav-link.is-open .morph-pill::before { animation:sdxSurfaceCaustic .95s var(--fluid) both; }
    .signature-nav .nav-link.is-open .morph-pill::after { border-color:rgba(200,255,61,.20); box-shadow:0 0 20px rgba(200,255,61,.16); }
    .signature-nav .nav-link:hover .morph-pill, .signature-nav .nav-link:focus-visible .morph-pill { box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 20px 43px rgba(17,31,20,.26),0 0 28px rgba(200,255,61,.20); }
    .signature-nav .nav-link:hover .morph-pill::after, .signature-nav .nav-link:focus-visible .morph-pill::after { border-color:rgba(200,255,61,.32); box-shadow:0 0 24px rgba(200,255,61,.21); }
    @keyframes sdxSurfaceCaustic { 0%{opacity:0;transform:translateX(-90%)} 26%{opacity:.8} 100%{opacity:0;transform:translateX(100%)} }
    .signature-nav .label-icon { position:relative; display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border-radius:50%; color:#edffcb; background:linear-gradient(160deg,rgba(200,255,61,.17),rgba(200,255,61,.05)); border:1px solid rgba(200,255,61,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); }
    .signature-nav .label-icon svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
    .signature-nav .label-name { position:relative; font-size:12.5px; letter-spacing:.015em; font-weight:530; white-space:nowrap; padding-right:4px; }
    .signature-nav .label-arrow { position:relative; display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.08); color:#e6ffab; font-size:14px; font-weight:400; }
    .signature-nav .label-icon, .signature-nav .label-name, .signature-nav .label-arrow { opacity:0; transform:translateX(12px) scale(.94); transition:opacity .24s ease,transform .47s var(--curve); }
    .signature-nav .nav-link.is-open .label-icon { opacity:1; transform:none; transition-delay:.12s; }
    .signature-nav .nav-link.is-open .label-name { opacity:1; transform:none; transition-delay:.19s; }
    .signature-nav .nav-link.is-open .label-arrow { opacity:1; transform:none; transition-delay:.24s; }
    .signature-nav .label-glow { position:absolute; z-index:-1; inset: -12px -14px; opacity:0; border-radius:999px; background:radial-gradient(ellipse at 80% 50%,rgba(200,255,61,.23),transparent 68%); filter:blur(12px); pointer-events:none; transition:opacity .45s ease; }
    .signature-nav .nav-link.is-open .label-glow { opacity:1; }
@media (max-width:600px) {
  .signature-nav { right:12px; width:40px; padding:8px 0; border-radius:23px; }
  .signature-nav::after { border-radius:24px; }
  .signature-nav .nav-link { width:40px; }
  .signature-nav .nav-items { gap:10px; }
  .signature-nav .morph-pill { min-height:44px; padding:6px 10px 6px 8px; }
  .signature-nav .label-icon { width:25px; height:25px; flex-basis:25px; }
  .signature-nav .label-name { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .signature-nav *,
  .signature-nav *::before,
  .signature-nav *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .signature-nav .morph-pill,
  .signature-nav .label-icon,
  .signature-nav .label-name,
  .signature-nav .label-arrow { will-change:auto; }
}

/* ===============================================================
   Scroll-Reveal: ueber Header/Hero verborgen, im Content sichtbar.
   Nur die .signature-nav wird animiert; keine Seitenlayouts betroffen.
   =============================================================== */
.signature-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(34px,-50%,0) scale(.77);
  transform-origin: right center;
  transition: opacity .48s ease, transform .78s cubic-bezier(.16,1,.3,1), visibility 0s linear .78s;
}
.signature-nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,-50%,0) scale(1);
  transition: opacity .6s ease, transform .82s cubic-bezier(.16,1,.3,1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .signature-nav, .signature-nav.is-visible { transition: none !important; }
}

/* synDexx v2 – aufgehelltes Rauchglas (~10 %), nur Navigation. */
.signature-nav {
  background:linear-gradient(155deg,rgba(66,74,67,.96),rgba(36,42,37,.97) 34%,rgba(29,33,30,.985) 100%);
}
.signature-nav .morph-pill {
  background:radial-gradient(110px 70px at var(--light-x) var(--light-y),rgba(223,255,170,.125),transparent 73%),linear-gradient(155deg,rgba(70,80,67,.98),rgba(35,41,36,.985) 56%,rgba(29,34,30,.99));
}
/* Zurueck nach oben – innerhalb der Navigation, ohne Aenderung der index.php. */
.signature-nav .sdx-nav-to-top {
  appearance:none; -webkit-appearance:none; background:transparent; border:0;
  border-top:1px solid rgba(255,255,255,.16);
  color:#e6ffae; display:grid; place-items:center;
  width:28px; height:34px; padding:7px 0 0; margin:8px auto 0;
  cursor:pointer; border-radius:0 0 14px 14px;
  transition:color .25s ease, filter .25s ease;
}
.signature-nav .sdx-nav-to-top svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.signature-nav .sdx-nav-to-top:hover,
.signature-nav .sdx-nav-to-top:focus-visible { color:#c8ff3d; filter:drop-shadow(0 0 5px rgba(200,255,61,.55)); }
.signature-nav .sdx-nav-to-top:focus-visible { outline:2px solid #c8ff3d; outline-offset:2px; }
/* Smartphone: kein Seitennavigations-Overlay; Original-Aufwaertspfeil bleibt. */
@media (max-width:767px) {
  .signature-nav, .signature-nav.is-visible { display:none !important; }
}
/* Tablet: auf 70 % skaliert, 6 px vom rechten Rand; inkl. aufgeklappter Labels. */
@media (min-width:768px) and (max-width:1199px) {
  .signature-nav { right:6px; transform:translate3d(34px,-50%,0) scale(.54); }
  .signature-nav.is-visible { transform:translate3d(0,-50%,0) scale(.70); }
}
/* Auf Tablet und Desktop ersetzt der integrierte Pfeil den Originalbutton. */
@media (min-width:768px) {
  #scrollTopBtn { display:none !important; }
}


/* ========================================================================
   synDexx v3 | echtes optisches Rauchglas, vertikale Center-Out-Entfaltung
   AUSSCHLIESSLICH .signature-nav; Layout und Inhalte bleiben unangetastet.
   ======================================================================== */
.signature-nav {
  /* Transparente Schichten erlauben dem backdrop-filter echte Lichtbrechung. */
  background:
    radial-gradient(ellipse 115% 38% at 23% 0%, rgba(255,255,255,.19),transparent 72%),
    linear-gradient(106deg, rgba(66,82,70,.53) 0%,rgba(34,49,41,.56) 44%,rgba(20,35,28,.63) 100%);
  -webkit-backdrop-filter: blur(19px) saturate(160%) contrast(1.08);
  backdrop-filter: blur(19px) saturate(160%) contrast(1.08);
  border: 1px solid rgba(244,255,239,.17);
  box-shadow:
    0 19px 45px rgba(12,30,19,.18),
    0 4px 15px rgba(15,34,18,.13),
    inset 1px 1px 0 rgba(255,255,255,.25),
    inset -1px -1px 0 rgba(7,17,11,.18);
  /* Zuerst ein vertikaler Lichtkern, dann organisch nach OBEN UND UNTEN. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0,-50%,0) scaleY(.025) scaleX(.86);
  transform-origin: 50% 50%;
  filter: blur(4px);
  transition:
    transform .88s cubic-bezier(.19,1,.24,1),
    opacity .35s ease,
    filter .65s ease,
    visibility 0s linear .88s;
}
.signature-nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,-50%,0) scaleY(1) scaleX(1);
  filter: blur(0);
  transition:
    transform .98s cubic-bezier(.16,1,.24,1),
    opacity .37s ease,
    filter .78s ease,
    visibility 0s;
}
.signature-nav::before {
  background:
    radial-gradient(ellipse 90% 28% at 25% 2%,rgba(255,255,255,.25),transparent),
    linear-gradient(100deg,rgba(255,255,255,.10),transparent 36%,rgba(255,255,255,.035) 75%);
}
.signature-nav::after { border-color: rgba(255,255,255,.19); }
/* Auch die Labels sind echtes transluzentes Glas und keine deckenden Platten. */
.signature-nav .morph-pill {
  background:
    radial-gradient(110px 65px at var(--light-x) var(--light-y),rgba(218,255,166,.17),transparent 75%),
    linear-gradient(145deg,rgba(72,88,71,.80),rgba(34,51,41,.86) 65%,rgba(24,38,30,.89));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
/* Der Ruecksprung ist als eigenstaendiger Abschluss sofort erkennbar. */
.signature-nav .sdx-nav-to-top {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:36px;
  height:52px;
  padding:7px 0 4px;
  margin:9px auto 0;
  border-top:1px solid rgba(255,255,255,.20);
  border-radius:0 0 19px 19px;
  color:#ecffcf;
  filter:none;
}
.signature-nav .sdx-nav-to-top .sdx-top-icon {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1px solid rgba(200,255,61,.75);
  border-radius:50%;
  background:rgba(200,255,61,.17);
  box-shadow:0 0 0 3px rgba(200,255,61,.045),inset 0 1px 0 rgba(255,255,255,.19);
  transition:transform .35s cubic-bezier(.18,1,.3,1),background .3s ease,box-shadow .3s ease;
}
.signature-nav .sdx-nav-to-top .sdx-top-icon svg {
  width:18px;
  height:18px;
  stroke-width:2.5;
  stroke:#dfff95;
}
.signature-nav .sdx-nav-to-top .sdx-top-text {
  font:700 8px/1.1 Arial,sans-serif;
  letter-spacing:.11em;
  color:#e5f8cb;
}
.signature-nav .sdx-nav-to-top:hover .sdx-top-icon,
.signature-nav .sdx-nav-to-top:focus-visible .sdx-top-icon {
  transform:translateY(-3px);
  background:rgba(200,255,61,.30);
  box-shadow:0 0 18px rgba(200,255,61,.38);
}
@media (min-width:768px) and (max-width:1199px) {
  .signature-nav { transform:translate3d(0,-50%,0) scale(.64,.02); }
  .signature-nav.is-visible { transform:translate3d(0,-50%,0) scale(.70); }
}
@media (max-width:767px) {
  .signature-nav, .signature-nav.is-visible { display:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  .signature-nav, .signature-nav.is-visible {
    transition:none !important;
    filter:none !important;
  }
}

/* v4 | Verbindungsfaden konsequent HINTER den Navigationspunkten.
   Die halbtransparenten Glaspunkte bekommen einen dezenten undurchsichtigen
   Kern, damit sich die grüne Linie niemals durch ihre Mitte zeichnet. */
.signature-nav > .nav-track,
.signature-nav > .nav-track-fill {
  z-index:0;
  width:1px;
}
.signature-nav > .nav-traveler { z-index:1; }
.signature-nav .nav-items { z-index:2; }
.signature-nav .nav-link { z-index:3; }
.signature-nav .dot-ring {
  z-index:4;
  isolation:isolate;
  background:radial-gradient(circle at 42% 30%,#5b6756 0%,#344439 52%,#26382e 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 0 0 2px rgba(30,47,37,.35);
}
.signature-nav .nav-link.is-current .dot-ring {
  background:radial-gradient(circle at 45% 32%,#526844 0%,#324c34 58%,#233c2c 100%);
}
.signature-nav .dot { position:relative; z-index:1; }

/* v5: Premium-Rauchglas fuer ausfahrende Menue-Beschriftungen.
   Hintergrund dezent erkennbar, Schrift bewusst deckend und lesbar. */
.signature-nav .morph-pill {
  background:
    radial-gradient(ellipse 90% 85% at 20% 12%, rgba(235,255,215,.18), transparent 73%),
    linear-gradient(140deg, rgba(57,76,62,.76) 0%, rgba(31,49,38,.81) 54%, rgba(17,31,23,.86) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(145%) contrast(1.08);
  backdrop-filter: blur(20px) saturate(145%) contrast(1.08);
  border: 1px solid rgba(240,255,230,.23);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 34px rgba(12,29,18,.23), 0 0 0 1px rgba(255,255,255,.035);
}
.signature-nav .morph-pill .label-name {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(8,19,12,.95), 0 0 12px rgba(8,19,12,.65);
}
.signature-nav .morph-pill .label-icon,
.signature-nav .morph-pill .label-arrow {
  text-shadow: 0 1px 3px rgba(8,19,12,.7);
}


/* ==========================================================================
   synDexx Signature v6 — Center-out Liquid Glass
   CSS scoped to signature navigation only. Mobile navigation stays hidden.
   ========================================================================== */
.signature-nav {
  /* Darker, genuinely transmissive smoked glass on white content surfaces.
     Very subtle botanical green undertone, no solid grey overlay. */
  background:
    radial-gradient(ellipse 130% 36% at 18% 4%,rgba(229,255,218,.115),transparent 72%),
    linear-gradient(106deg,rgba(39,58,47,.77) 0%,rgba(25,45,34,.81) 48%,rgba(15,32,22,.85) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(145%) contrast(1.13);
  backdrop-filter:blur(24px) saturate(145%) contrast(1.13);
  border:1px solid rgba(230,255,225,.18);
  box-shadow:0 16px 45px rgba(12,31,21,.19),0 4px 12px rgba(12,31,21,.11),
             inset 1px 1px 0 rgba(244,255,232,.19),inset -1px -1px 0 rgba(3,14,7,.18);
  transform-origin:50% 50%;
  transform:translate3d(0,-50%,0) scale3d(.73,.018,1);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  filter:none;
  transition:none;
  will-change:transform,opacity;
}
.signature-nav::before {
  background:radial-gradient(ellipse 85% 33% at 28% 1%,rgba(236,255,220,.22),transparent 75%),
    linear-gradient(95deg,rgba(239,255,230,.09),transparent 48%,rgba(239,255,230,.035));
}
.signature-nav.is-visible {
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  transform:translate3d(0,-50%,0) scale3d(1,1,1);
  filter:none;
  animation:sdxLiquidBloom 1120ms both;
  transition:none;
}
.signature-nav.is-closing {
  visibility:visible;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,-50%,0) scale3d(.73,.018,1);
  filter:none;
  animation:sdxLiquidFold 760ms both;
  transition:none;
}
/* Choreographed vertical birth: soft kernel -> symmetric stretch -> subtle
   elastic crest -> stabilized translucent capsule. No displacement of dots. */
@keyframes sdxLiquidBloom {
  0%   {opacity:0;transform:translate3d(0,-50%,0) scale3d(.56,.014,1);border-radius:30px;}
  13%  {opacity:.73;transform:translate3d(0,-50%,0) scale3d(1.07,.075,1);border-radius:28px;}
  31%  {opacity:1;transform:translate3d(0,-50%,0) scale3d(.95,.38,1);border-radius:28px;}
  55%  {opacity:1;transform:translate3d(0,-50%,0) scale3d(1.035,.83,1);border-radius:26px;}
  76%  {opacity:1;transform:translate3d(0,-50%,0) scale3d(.991,1.024,1);border-radius:24px;}
  89%  {opacity:1;transform:translate3d(0,-50%,0) scale3d(1.006,.994,1);border-radius:25px;}
  100% {opacity:1;transform:translate3d(0,-50%,0) scale3d(1,1,1);border-radius:25px;}
}
@keyframes sdxLiquidFold {
  0%   {opacity:1;transform:translate3d(0,-50%,0) scale3d(1,1,1);}
  23%  {opacity:1;transform:translate3d(0,-50%,0) scale3d(1.025,.81,1);}
  58%  {opacity:.93;transform:translate3d(0,-50%,0) scale3d(.94,.34,1);}
  80%  {opacity:.60;transform:translate3d(0,-50%,0) scale3d(1.08,.065,1);}
  100% {opacity:0;transform:translate3d(0,-50%,0) scale3d(.56,.014,1);}
}
/* Internal glassware fades in just after capsule finds some height. */
.signature-nav .nav-items,
.signature-nav > .nav-track,
.signature-nav > .nav-track-fill,
.signature-nav > .nav-traveler,
.signature-nav .sdx-nav-to-top {
  transition:opacity .24s ease;
}
.signature-nav.is-visible .nav-items,
.signature-nav.is-visible > .nav-track,
.signature-nav.is-visible > .nav-track-fill,
.signature-nav.is-visible .sdx-nav-to-top {
  animation:sdxContentsMaterialize 850ms ease both;
}
@keyframes sdxContentsMaterialize {0%,18%{opacity:0}55%{opacity:.25}100%{opacity:1}}
.signature-nav.is-closing .nav-items,
.signature-nav.is-closing .sdx-nav-to-top {opacity:0;transition:opacity .16s ease;}
/* Integrated return button: no text beneath the arrow. A separate glass
   micro-label emerges LEFT on pointer hover / keyboard focus. */
.signature-nav .sdx-nav-to-top {
  position:relative;
  flex-direction:row;
  gap:0;
  width:36px;
  height:42px;
  padding:7px 0 5px;
  margin:8px auto 0;
  overflow:visible;
}
.signature-nav .sdx-nav-to-top .sdx-top-icon {
  width:29px;height:29px;flex:none;
  background:rgba(200,255,61,.15);
  border-color:rgba(210,255,112,.82);
}
.signature-nav .sdx-nav-to-top .sdx-top-flyout {
  position:absolute;
  right:calc(100% + 11px);
  top:50%;
  transform:translate3d(11px,-50%,0) scale(.82);
  transform-origin:right center;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:9px 14px;
  border-radius:999px;
  color:#fff;
  font:600 12px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:.01em;
  text-shadow:0 1px 5px rgba(0,12,5,.6);
  background:linear-gradient(138deg,rgba(54,76,58,.81),rgba(15,32,21,.89));
  border:1px solid rgba(239,255,229,.23);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 24px rgba(5,26,14,.22);
  transition:opacity .24s ease,transform .48s cubic-bezier(.19,1,.22,1);
}
.signature-nav .sdx-nav-to-top:hover .sdx-top-flyout,
.signature-nav .sdx-nav-to-top:focus-visible .sdx-top-flyout {
  opacity:1;
  transform:translate3d(0,-50%,0) scale(1);
}
@media (min-width:768px) and (max-width:1199px) {
  .signature-nav {right:6px;}
  .signature-nav.is-visible {animation:sdxTabletBloom 1120ms both;transform:translate3d(0,-50%,0) scale(.70);}
  .signature-nav.is-closing {animation:sdxTabletFold 760ms both;}
  @keyframes sdxTabletBloom {
    0%{opacity:0;transform:translate3d(0,-50%,0) scale(.40,.010)}
    16%{opacity:.8;transform:translate3d(0,-50%,0) scale(.75,.060)}
    54%{opacity:1;transform:translate3d(0,-50%,0) scale(.73,.57)}
    79%{opacity:1;transform:translate3d(0,-50%,0) scale(.69,.72)}
    100%{opacity:1;transform:translate3d(0,-50%,0) scale(.70)}
  }
  @keyframes sdxTabletFold {
    0%{opacity:1;transform:translate3d(0,-50%,0) scale(.70)}
    55%{opacity:.8;transform:translate3d(0,-50%,0) scale(.72,.24)}
    100%{opacity:0;transform:translate3d(0,-50%,0) scale(.40,.010)}
  }
}
@media (max-width:767px) {
  .signature-nav,.signature-nav.is-visible,.signature-nav.is-closing{display:none !important;}
}
@media (prefers-reduced-motion:reduce) {
  .signature-nav.is-visible,.signature-nav.is-closing,
  .signature-nav.is-visible .nav-items,.signature-nav.is-visible .sdx-nav-to-top,
  .signature-nav.is-visible > .nav-track,.signature-nav.is-visible > .nav-track-fill {
    animation:none !important; transition:none !important;
  }
  .signature-nav.is-visible {opacity:1;transform:translate3d(0,-50%,0) scale(1);}
  .signature-nav.is-closing {opacity:0;visibility:hidden;}
  .signature-nav .sdx-top-flyout {transition:none !important;}
}


/* =======================================================================
 synDexx v7 — component choreography, NOT resizing the navigation/dots.
 Glass silhouette unfurls from the center with clip-path. Children form a
 center-out wave; progress and labels retain their own original transforms.
 ======================================================================= */
.signature-nav {
  transform:translate3d(0,-50%,0) !important;
  transform-origin:50% 50%;
  clip-path:inset(49.8% 2% 49.8% 2% round 25px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  animation:none;
  transition:none;
  filter:none;
}
.signature-nav.is-visible {
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  transform:translate3d(0,-50%,0) !important;
  animation:sdxV7Unfurl 795ms cubic-bezier(.2,.78,.2,1) both;
}
.signature-nav.is-closing {
  visibility:visible;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,-50%,0) !important;
  animation:sdxV7Gather 590ms cubic-bezier(.42,0,.32,1) both;
}
@keyframes sdxV7Unfurl {
  0% {opacity:0;clip-path:inset(49.8% 0 49.8% 0 round 25px);}
  17% {opacity:1;clip-path:inset(43% 0 43% 0 round 25px);}
  67% {opacity:1;clip-path:inset(3% 0 3% 0 round 25px);}
  100% {opacity:1;clip-path:inset(0 0 0 0 round 25px);}
}
@keyframes sdxV7Gather {
  0% {opacity:1;clip-path:inset(0 0 0 0 round 25px);}
  50% {opacity:1;clip-path:inset(28% 0 28% 0 round 25px);}
  100% {opacity:0;clip-path:inset(49.8% 0 49.8% 0 round 25px);}
}
/* Child entry is composed in JS with individual timelines; no dot movement. */
.signature-nav:not(.is-visible) .nav-link,
.signature-nav:not(.is-visible) .sdx-nav-to-top {opacity:0;}
.signature-nav.is-visible .nav-link,
.signature-nav.is-visible .sdx-nav-to-top {opacity:1;}
/* Remove earlier monolithic content animation, which fought the stagger. */
.signature-nav.is-visible .nav-items,
.signature-nav.is-visible > .nav-track,
.signature-nav.is-visible > .nav-track-fill,
.signature-nav.is-visible .sdx-nav-to-top {animation:none;}
@media (min-width:768px) and (max-width:1199px) {
  .signature-nav {right:6px;transform:translate3d(0,-50%,0) scale(.70) !important;}
  .signature-nav.is-visible,.signature-nav.is-closing {transform:translate3d(0,-50%,0) scale(.70) !important;animation-duration:795ms;}
  .signature-nav.is-closing {animation-duration:590ms;}
}
@media (max-width:767px) {
  .signature-nav,.signature-nav.is-visible,.signature-nav.is-closing {display:none !important;}
}
@media (prefers-reduced-motion:reduce) {
  .signature-nav.is-visible,.signature-nav.is-closing {animation:none !important;}
  .signature-nav.is-visible {clip-path:inset(0 round 25px);opacity:1;}
  .signature-nav.is-closing {clip-path:inset(49.8% 0 49.8% 0 round 25px);opacity:0;visibility:hidden;}
}

/* v8: Isolate the reveal from layout. No filter animation on nodes. */
@media (min-width:768px) and (prefers-reduced-motion:no-preference) {
  .signature-nav { contain:layout style; }
  .signature-nav .nav-link, .signature-nav .sdx-nav-to-top { backface-visibility:hidden; }
}


/* ================================================================
   synDexx v9 — GLASS-ONLY unfurl, flyouts NEVER clipped.
   Parent stays at its full geometry for pointer hit testing/labels.
   Glass skin unfurls independently through a pseudo-element.
   ================================================================ */
@media (min-width:768px) {
  .signature-nav,
  .signature-nav.is-visible,
  .signature-nav.is-closing {
    clip-path:none !important;
    overflow:visible !important;
    animation:none !important;
    background:transparent !important;
    box-shadow:none !important;
    border-color:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .signature-nav {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .signature-nav.is-visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .signature-nav.is-closing {
    opacity:1;
    visibility:visible;
    pointer-events:none;
  }
  .signature-nav::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    border-radius:25px;
    border:1px solid rgba(218,255,216,.21);
    background:
      radial-gradient(ellipse 85% 32% at 28% 1%,rgba(239,255,225,.13),transparent 74%),
      linear-gradient(106deg,rgba(39,58,47,.79),rgba(25,43,33,.84) 48%,rgba(15,31,22,.89));
    box-shadow:0 18px 43px rgba(12,26,17,.18),inset 1px 1px 0 rgba(246,255,235,.18);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    backdrop-filter:blur(22px) saturate(145%);
    clip-path:inset(49.8% 0 49.8% 0 round 25px);
    opacity:0;
    transform:none;
    transition:none;
    animation:none;
  }
  .signature-nav.is-visible::before {
    animation:sdxV9GlassOpen 560ms cubic-bezier(.18,.75,.2,1) both;
  }
  .signature-nav.is-closing::before {
    animation:sdxV9GlassClose 420ms cubic-bezier(.45,0,.35,1) both;
  }
  /* Glass skin only: no clipping of pills, names or return flyout. */
  @keyframes sdxV9GlassOpen {
    0%   {opacity:.25;clip-path:inset(49.8% 0 49.8% 0 round 25px)}
    18%  {opacity:.95;clip-path:inset(40% 0 40% 0 round 25px)}
    65%  {opacity:1;clip-path:inset(1.5% 0 1.5% 0 round 25px)}
    83%  {opacity:1;clip-path:inset(.4% 0 .4% 0 round 25px)}
    100% {opacity:1;clip-path:inset(0 0 0 0 round 25px)}
  }
  @keyframes sdxV9GlassClose {
    0%   {opacity:1;clip-path:inset(0 0 0 0 round 25px)}
    25%  {opacity:1;clip-path:inset(4% 0 4% 0 round 25px)}
    72%  {opacity:.9;clip-path:inset(39% 0 39% 0 round 25px)}
    100% {opacity:0;clip-path:inset(49.8% 0 49.8% 0 round 25px)}
  }
  .signature-nav .nav-link .morph-pill,
  .signature-nav .sdx-nav-to-top .sdx-top-flyout {
    clip-path:none;
  }
  /* morph uses an explicit clip path on the pill; allow its own animation. */
  .signature-nav .nav-link .morph-pill {
    clip-path:inset(0 0 0 96% round 999px);
  }
  .signature-nav .nav-link.is-open .morph-pill {
    clip-path:inset(0 0 0 0 round 999px);
  }
}
@media (min-width:768px) and (max-width:1199px) {
  .signature-nav,.signature-nav.is-visible,.signature-nav.is-closing {
    transform:translate3d(0,-50%,0) scale(.70) !important;
    right:6px;
  }
}
@media (min-width:768px) and (prefers-reduced-motion:reduce) {
  .signature-nav.is-visible::before {animation:none !important;clip-path:none;opacity:1;}
  .signature-nav.is-closing::before {animation:none !important;opacity:0;}
}


/* ==============================================================
   synDexx v10 | States: invisible hero / expanded / tiny right dock
   Scope intentionally limited to the signature navigation + original top control.
   ============================================================== */
@media (min-width:768px) {
  /* Hard hide *all* layers outside the content; no faint ghost stroke. */
  .signature-nav:not(.is-visible),
  .signature-nav.is-closing:not(.is-visible) {
    opacity:0 !important; visibility:hidden !important;
    pointer-events:none !important; animation:none !important;
  }
  .signature-nav:not(.is-visible)::before,
  .signature-nav:not(.is-visible)::after {
    opacity:0 !important; visibility:hidden !important;
    animation:none !important; border:0 !important; box-shadow:none !important;
  }
  .signature-nav:not(.is-visible) .nav-items,
  .signature-nav:not(.is-visible) .nav-track,
  .signature-nav:not(.is-visible) .nav-track-fill,
  .signature-nav:not(.is-visible) .nav-traveler,
  .signature-nav:not(.is-visible) .sdx-nav-action {
    visibility:hidden !important; opacity:0 !important;
  }
  .signature-nav,
  .signature-nav.is-visible {
    right:max(0px,calc(clamp(17px,2.5vw,34px) - 15px));
  }
  .signature-nav .sdx-nav-to-top {display:none !important;}
  .signature-nav .sdx-nav-action {
    position:relative; z-index:10; display:grid; place-items:center;
    width:30px;height:30px; margin:8px auto 2px;padding:0;
    cursor:pointer; border-radius:50%;
    border:1px solid rgba(220,244,213,.30);
    background:rgba(27,45,33,.30);
    color:#eaffd2;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11);
    -webkit-appearance:none;appearance:none;
    transition:background .22s ease,border-color .22s ease,transform .24s ease;
  }
  .signature-nav .sdx-nav-action:hover,
  .signature-nav .sdx-nav-action:focus-visible {
    background:rgba(99,130,81,.30);
    border-color:rgba(200,255,61,.65);
    transform:scale(1.055);
    outline:none;
  }
  .signature-nav .sdx-action-icon {display:grid;place-items:center;}
  .signature-nav .sdx-action-icon svg {
    width:16px;height:16px; fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
  .signature-nav .sdx-action-flyout {
    position:absolute;right:calc(100% + 12px);top:50%;
    white-space:nowrap;padding:8px 13px;border-radius:22px;
    font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:#f7fff2; background:rgba(26,46,32,.83);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid rgba(222,249,208,.25);
    box-shadow:0 8px 24px rgba(8,20,12,.22);
    opacity:0;pointer-events:none;
    transform:translate(7px,-50%) scale(.94);
    transition:opacity .22s ease,transform .30s cubic-bezier(.2,1,.3,1);
  }
  .signature-nav .sdx-nav-action:hover .sdx-action-flyout,
  .signature-nav .sdx-nav-action:focus-visible .sdx-action-flyout {
    opacity:1;transform:translate(0,-50%) scale(1);
  }
  /* Dock appears as a single tiny circular glass control right at the edge. */
  .signature-nav.is-visible.is-docked {
    width:44px !important;padding:0 !important;right:0 !important;
    height:44px !important;border-radius:50% !important;
    transform:translate3d(0,-50%,0) !important;
    overflow:visible !important;
    opacity:1 !important;
  }
  .signature-nav.is-docked::before {
    border-radius:50% !important;clip-path:none !important;
    animation:none !important;opacity:1 !important;
  }
  .signature-nav.is-docked::after {opacity:0 !important;}
  .signature-nav.is-docked .nav-items,
  .signature-nav.is-docked > .nav-track,
  .signature-nav.is-docked > .nav-track-fill,
  .signature-nav.is-docked > .nav-traveler,
  .signature-nav.is-docked .sdx-nav-to-top {
    display:none !important;
  }
  .signature-nav.is-docked .sdx-nav-action {
    margin:7px auto !important; width:30px;height:30px;
  }
  /* The original site's top button is only available in docked mode. */
  html:not(.sdx-nav-user-docked) #scrollTopBtn {display:none !important;}
  html.sdx-nav-user-docked #scrollTopBtn {display:block !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}
}
@media (min-width:768px) and (max-width:1199px) {
  .signature-nav,.signature-nav.is-visible {right:0 !important;}
  .signature-nav.is-visible.is-docked {transform:translate3d(0,-50%,0) scale(.70) !important;transform-origin:right center;}
}
@media (max-width:767px) {
  .signature-nav,.signature-nav.is-visible {display:none !important;}
}
@media (prefers-reduced-motion:reduce) {
  .signature-nav .sdx-nav-action,.signature-nav .sdx-action-flyout {transition:none !important;}
}

/* v10 Dock-Feinschliff: gleiche rechte Achse und Durchmesser wie #scrollTopBtn. */
@media (min-width:768px) {
  .signature-nav.is-visible.is-docked {
    width:46px !important;
    height:46px !important;
    right:30px !important;
    border-radius:50% !important;
    transform:translate3d(0,-50%,0) !important;
  }
  .signature-nav.is-docked .sdx-nav-action {
    width:34px !important;
    height:34px !important;
    margin:6px auto !important;
  }
}
@media (min-width:768px) and (max-width:1199px) {
  .signature-nav.is-visible.is-docked {
    right:30px !important;
    transform:translate3d(0,-50%,0) !important;
  }
}


/* synDexx – Signature Scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: #A0C533 #F5F8F2;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F5F8F2;
}

::-webkit-scrollbar-thumb {
  background: #A0C533;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #C8FF3D;
}


/* synDexx Scrollbar: Oben unsichtbar */
html.sdx-scrollbar-hidden {
  scrollbar-color: transparent transparent;
}

html.sdx-scrollbar-hidden::-webkit-scrollbar-thumb,
html.sdx-scrollbar-hidden::-webkit-scrollbar-track {
  background: transparent;
}


/* synDexx – Scrollbar nur auf Desktop ausblenden */
@media (min-width: 1200px) {
  html {
    scrollbar-width: none !important;
  }

  html::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
}