/* ============================================================
   nytic.ch – Support und Kundenbereich
   ============================================================ */
.sp-body {
  --c: #90BE20;
  --c2: #5aa9ff;
  --muted: rgba(255, 255, 255, .62);
  --line: rgba(255, 255, 255, .09);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  background: #0b0c0a;
  margin-bottom: 0;
}
@supports (overflow: clip) { html.sp-js, html.sp-js .sp-body { overflow-x: clip; overflow-y: visible; } }
.sp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); position: relative; z-index: 1; }
.sp-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--c); margin: 0 0 .8rem; }
.sp-h2 { font-family: 'Thasadith', sans-serif; font-weight: 700; color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.05; margin: 0 0 1rem; }
.sp-lead { color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.75; max-width: 40rem; margin: 0 0 1.5rem; }
.sp-body svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.25rem; border-radius: 999px; font-weight: 700; font-size: .95rem; color: #fff !important; text-decoration: none !important;
  border: 1px solid rgba(144, 190, 32, .5); background: transparent; transition: transform .2s, background .25s, box-shadow .25s; }
.sp-btn svg { width: 16px; height: 16px; }
.sp-btn:hover { transform: translateY(-2px); background: rgba(144, 190, 32, .12); }
.sp-btn--primary { background: linear-gradient(120deg, var(--c), #b3dd3a); border-color: transparent; color: #0d1203 !important; box-shadow: 0 12px 34px -12px var(--c); }
.sp-btn--primary:hover { background: linear-gradient(120deg, var(--c), #b3dd3a); box-shadow: 0 16px 40px -12px var(--c); }

/* ---------- Hero ---------- */
.sp-hero { position: relative; overflow: hidden; padding: 125px 0 clamp(3rem, 6vw, 4.5rem);
  background: radial-gradient(55% 60% at 78% 40%, rgba(144, 190, 32, .12), transparent 70%), radial-gradient(40% 45% at 10% 20%, rgba(90, 169, 255, .08), transparent 70%), #0b0c0a; }
.sp-grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(144, 190, 32, .22) 1px, transparent 1.5px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 25%, transparent 80%); mask-image: radial-gradient(70% 70% at 70% 40%, #000 25%, transparent 80%); }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.sp-back { display: inline-flex; gap: .35rem; margin-bottom: 1.2rem; font-size: .85rem; font-weight: 700; color: var(--muted) !important; text-decoration: none !important; }
.sp-back:hover { color: var(--c) !important; }
.sp-head .sp-eyebrow { display: block; }
.sp-title { font-family: 'Thasadith', sans-serif; font-weight: 700; color: #fff; font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -.02em; margin: 0 0 1.1rem; }
.sp-title span { background: linear-gradient(100deg, var(--c), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.sp-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .9rem; border-radius: 999px; font-size: .85rem; color: rgba(255, 255, 255, .88) !important; text-decoration: none !important; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.sp-pill i { width: 9px; height: 9px; border-radius: 50%; background: #9aa0a6; }
.sp-pill.is-ok i { background: #4ade80; animation: spPing 2s infinite; }
.sp-pill.is-closed i { background: #ffd166; }
.sp-pill.is-err i { background: #ff5a4a; }
@keyframes spPing { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.sp-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Support-Szene: Karten schweben, Leitungen leuchten je nach Schritt (is-s0 … is-s5 von js/support.js) */
.sp-scene { position: relative; width: 100%; max-width: 470px; aspect-ratio: 400 / 500; margin: 0 auto; container-type: inline-size; color: #fff; }
.sp-wave { position: absolute; left: 50%; top: 49%; width: 70%; aspect-ratio: 1; margin: -35% 0 0 -35%; border-radius: 50%; border: 1.5px solid rgba(144, 190, 32, .35); animation: spWave 3.6s ease-out infinite; }
.sp-wave:nth-child(2) { animation-delay: 1.2s; }
.sp-wave:nth-child(3) { animation-delay: 2.4s; }
@keyframes spWave { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
.sp-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-link { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.4; stroke-dasharray: 3 7; animation: spFlow 1.2s linear infinite; transition: stroke .4s; }
@keyframes spFlow { to { stroke-dashoffset: -20; } }
.sp-link--call { stroke: rgba(90, 169, 255, .35); }
.is-s0:not(.is-s3) .sp-link--chat { stroke: rgba(144, 190, 32, .9); }
.is-s3:not(.is-s5) .sp-link--desk { stroke: rgba(239, 68, 59, .9); }
.is-s5 .sp-link--ticket { stroke: rgba(144, 190, 32, .9); }
.sp-hub { position: absolute; left: 47%; top: 49%; width: 12%; aspect-ratio: 1; margin: -6% 0 0 -6%; display: grid; place-items: center; border-radius: 30%; color: #0d1203;
  background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 0 0 8px rgba(144, 190, 32, .08), 0 18px 40px -14px rgba(144, 190, 32, .8); }
.sp-hub svg { width: 55%; height: 55%; stroke-width: 1.8; }

/* Karten */
.sp-sc { position: absolute; z-index: 2; font-size: 12px; font-size: 3.1cqw; border-radius: 1.1em; background: rgba(20, 23, 18, .94); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  translate: calc(var(--px, 0) * var(--z) * 12px) calc(var(--py, 0) * var(--z) * 10px); transition: translate .6s cubic-bezier(.2, .8, .2, 1);
  animation: spFloat 7s ease-in-out infinite; }
.sp-sc::before { content: ''; position: absolute; left: 1.2em; right: 1.2em; top: -1px; height: 2px; border-radius: 2px; background: var(--k); opacity: .8; }
@keyframes spFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sp-sc-head { display: flex; align-items: center; gap: .55em; padding: .75em .9em .6em; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: .95em; }
.sp-sc-head b { font-weight: 700; }
.sp-sc-head em { margin-left: auto; font: 700 .72em var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--k); }
.sp-ico { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .6em; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); }
.sp-ico svg { width: 62%; height: 62%; }

/* Chat */
.sp-chat { left: 0; top: 0; width: 62%; animation-delay: -1s; }
.sp-msgs { display: flex; flex-direction: column; gap: .45em; padding: .7em .8em .8em; min-height: 8.4em; }
.sp-msg { margin: 0; max-width: 88%; padding: .45em .7em; border-radius: .9em; font-size: .85em; line-height: 1.32;
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .45s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.sp-msg--in { align-self: flex-start; background: rgba(255, 255, 255, .08); border-bottom-left-radius: .25em; }
.sp-msg--out { align-self: flex-end; color: #0d1203; background: linear-gradient(120deg, var(--c), #b3dd3a); border-bottom-right-radius: .25em; }
.sp-msg--typing { align-self: flex-end; display: flex; gap: .3em; padding: .65em .8em; background: rgba(144, 190, 32, .18); border-bottom-right-radius: .25em; }
.sp-msg--typing i { width: .42em; height: .42em; border-radius: 50%; background: var(--c); animation: spType 1s ease-in-out infinite; }
.sp-msg--typing i:nth-child(2) { animation-delay: .15s; }
.sp-msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes spType { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.3em); opacity: 1; } }
.is-s0 .sp-msg--in, .is-s1 .sp-msg--typing, .is-s2 .sp-msg--out { opacity: 1; transform: none; }
.is-s2 .sp-msg--typing { display: none; }

/* Telefon */
.sp-call { right: 0; top: 10%; width: 39%; display: flex; align-items: center; gap: .7em; padding: .8em .9em; animation-delay: -3s; }
.sp-call-ico { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; color: #fff; background: var(--k); animation: spRing 8s infinite; }
.sp-call-ico svg { width: 52%; height: 52%; }
.sp-call-ico i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--k); animation: spRingWave 8s infinite; }
.sp-call-ico i + i { animation-delay: .5s; }
@keyframes spRing { 0%, 40% { transform: rotate(0); } 2%, 6%, 10%, 14%, 18%, 22%, 26%, 30%, 34% { transform: rotate(-14deg); } 4%, 8%, 12%, 16%, 20%, 24%, 28%, 32%, 36% { transform: rotate(14deg); } 41%, 100% { transform: rotate(0); background: #4ade80; } }
@keyframes spRingWave { 0%, 40% { opacity: 0; transform: scale(1); } 5%, 15%, 25%, 35% { opacity: .9; transform: scale(1); } 10%, 20%, 30%, 39% { opacity: 0; transform: scale(1.8); } 41%, 100% { opacity: 0; } }
.sp-call-txt { display: grid; min-width: 0; font-size: .9em; line-height: 1.3; }
.sp-call-txt b { font-weight: 700; }
.sp-call-a, .sp-call-b { grid-area: 2 / 1; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.sp-call-a { animation: spSwapA 8s steps(1) infinite; }
.sp-call-b { color: #4ade80; display: inline-flex; align-items: center; gap: .4em; animation: spSwapB 8s steps(1) infinite; }
@keyframes spSwapA { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes spSwapB { 0%, 40% { opacity: 0; } 41%, 100% { opacity: 1; } }
.sp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: .9em; font-style: normal; }
.sp-eq i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: spEq .7s ease-in-out infinite alternate; }
.sp-eq i:nth-child(2) { animation-delay: -.3s; }
.sp-eq i:nth-child(3) { animation-delay: -.5s; }
.sp-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes spEq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Fernwartung */
.sp-desk { right: 0; bottom: 0; width: 66%; animation-delay: -4.5s; }
.sp-conn > span { display: none; }
.sp-scene:not(.is-s3) .sp-conn-a, .is-s3:not(.is-s4) .sp-conn-b, .is-s4 .sp-conn-c { display: inline; }
.is-s4 .sp-conn { color: #4ade80; }
.sp-screen { position: relative; margin: .7em; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .6em; background: linear-gradient(160deg, #18324a, #0d1a26); border: 1px solid rgba(255, 255, 255, .08); }
.sp-win { position: absolute; left: 8%; top: 10%; width: 84%; height: 74%; border-radius: .4em; overflow: hidden; background: #e9eef2; transition: filter .5s; }
.sp-win-bar { display: flex; align-items: center; gap: .25em; padding: .3em .45em; background: #cfd8df; font-size: .7em; color: #34424d; }
.sp-win-bar i { width: .55em; height: .55em; border-radius: 50%; background: #9fb0bc; }
.sp-win-bar span { margin-left: .4em; font-weight: 700; }
.sp-win-body { display: grid; gap: .45em; padding: .7em; }
.sp-win-body span { height: .45em; border-radius: .3em; background: #c6d1d9; }
.sp-win-body span:nth-child(2) { width: 75%; }
.sp-win-body span:nth-child(3) { width: 88%; }
.sp-win-body span:nth-child(4) { width: 60%; }
.sp-dialog { position: absolute; left: 20%; top: 28%; width: 60%; display: grid; grid-template-columns: auto 1fr; gap: .2em .5em; align-items: center; padding: .55em .65em; border-radius: .45em; background: #fff; color: #23303a; font-size: .68em; line-height: 1.25; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); transition: opacity .3s, transform .35s; }
.sp-dialog b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; color: #fff; background: #ef443b; }
.sp-dialog em { grid-column: 2; justify-self: end; padding: .25em .7em; border-radius: .35em; font-style: normal; font-weight: 700; color: #fff; background: #2f7de1; }
.sp-fixed { position: absolute; left: 50%; top: 46%; display: flex; align-items: center; gap: .35em; padding: .35em .8em; border-radius: 999px; font-size: .8em; font-weight: 700; color: #0d1203; background: #4ade80;
  opacity: 0; transform: translate(-50%, 6px) scale(.9); transition: opacity .4s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.sp-fixed svg { width: 1em; height: 1em; stroke-width: 3; }
.sp-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6em; font-size: .8em; color: rgba(255, 255, 255, .85); background: rgba(8, 14, 20, .82); opacity: 0; transition: opacity .35s; }
.sp-wait i { width: 7em; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #ef443b, transparent) 0 0 / 50% 100% no-repeat, rgba(255, 255, 255, .12); animation: spBar 1s linear infinite; }
@keyframes spBar { from { background-position: -100% 0, 0 0; } to { background-position: 200% 0, 0 0; } }
.sp-cursor { position: absolute; left: 82%; top: 86%; width: 1.3em; height: 1.3em; fill: #fff; stroke: #111; stroke-width: 1.2; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); z-index: 3; }
.sp-click { position: absolute; left: 70%; top: 62%; width: 1.6em; height: 1.6em; margin: -.8em 0 0 -.8em; border-radius: 50%; border: 2px solid #fff; opacity: 0; z-index: 2; }
.sp-scene:not(.is-s3) .sp-win, .is-s3:not(.is-s4) .sp-win { filter: blur(1.5px) brightness(.55); }
.is-s3:not(.is-s4) .sp-wait { opacity: 1; }
.is-s4 .sp-cursor { opacity: 1; animation: spCursor 2.6s cubic-bezier(.45, 0, .2, 1) forwards; }
.is-s4 .sp-click { animation: spClickRing 2.6s ease-out forwards; }
.is-s4 .sp-dialog { animation: spDialogOut 2.6s forwards; }
.is-s5 .sp-dialog { opacity: 0; }
.is-s5 .sp-fixed { opacity: 1; transform: translate(-50%, 0) scale(1); }
.is-s5 .sp-cursor { opacity: 1; left: 72%; top: 64%; }
@keyframes spCursor { 0% { left: 82%; top: 86%; } 55% { left: 70%; top: 61%; } 62% { left: 70%; top: 62%; transform: scale(.85); } 70%, 100% { left: 72%; top: 64%; transform: none; } }
@keyframes spClickRing { 0%, 58% { opacity: 0; transform: scale(.3); } 62% { opacity: 1; } 85%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes spDialogOut { 0%, 66% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: scale(.92); } }

/* Ticket */
.sp-ticket { left: 0; bottom: 10%; width: 33%; display: flex; align-items: center; gap: .65em; padding: .75em .85em; animation-delay: -2s; }
.sp-tk-ico { display: grid; place-items: center; flex: 0 0 auto; width: 2.3em; height: 2.3em; border-radius: 50%; color: transparent; border: 2px dashed rgba(255, 255, 255, .25); transition: background .4s, border-color .4s, color .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.sp-tk-ico svg { width: 55%; height: 55%; stroke-width: 3; }
.is-s5 .sp-tk-ico { color: #0d1203; background: #4ade80; border: 2px solid #4ade80; transform: scale(1.12); box-shadow: 0 0 22px -2px #4ade80; }
.sp-tk-txt { display: grid; font-size: .9em; line-height: 1.3; }
.sp-tk-txt b { font-weight: 700; white-space: nowrap; }
.sp-tk-a, .sp-tk-b, .sp-tk-c { grid-area: 2 / 1; display: none; font: 700 .78em var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sp-scene:not(.is-s3) .sp-tk-a { display: block; color: #ffd166; }
.is-s3:not(.is-s5) .sp-tk-b { display: block; color: #5aa9ff; }
.is-s5 .sp-tk-c { display: block; color: #4ade80; }

/* Neustart der Geschichte: alles kurz ausblenden */
.sp-scene.is-reset .sp-msg { transition-duration: .3s; }

/* ---------- Drei Wege ---------- */
.sp-ways-sec { background: #0e100c; padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--line); }
.sp-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.sp-way { --k: var(--c); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.3rem, 2.6vw, 1.8rem); border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--k) 9%, #121410), #0e100c 65%); border: 1px solid color-mix(in srgb, var(--k) 28%, transparent); transition: transform .3s var(--ease), box-shadow .3s; }
.sp-way:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -36px var(--k); }
.sp-way-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.1rem; border-radius: 15px; color: #0b0c0a; background: var(--k); box-shadow: 0 14px 30px -14px var(--k); }
.sp-way-ico svg { width: 26px; height: 26px; }
.sp-way h3 { margin: 0 0 .5rem; font-family: 'Thasadith', sans-serif; font-weight: 700; color: #fff; font-size: 1.5rem; }
.sp-way p { margin: 0 0 1rem; color: var(--muted); line-height: 1.65; }
.sp-way ol { margin: 0 0 1.2rem; padding: 0; list-style: none; counter-reset: w; display: flex; flex-direction: column; gap: .35rem; }
.sp-way ol li { counter-increment: w; position: relative; padding-left: 1.8rem; color: rgba(255, 255, 255, .78); font-size: .9rem; line-height: 1.5; }
.sp-way ol li::before { content: counter(w); position: absolute; left: 0; top: .05rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font: 700 .7rem var(--mono); color: #0b0c0a; background: var(--k); }
.sp-way .sp-btn { margin-top: auto; align-self: flex-start; border-color: color-mix(in srgb, var(--k) 55%, transparent); }
.sp-way .sp-btn--primary { background: var(--k); color: #0b0c0a !important; box-shadow: 0 12px 30px -12px var(--k); }
.sp-contact-lines { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.2rem; }
.sp-contact-lines a { color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 1.05rem; }
.sp-contact-lines a:hover { color: var(--k) !important; }

/* ---------- Supportzeiten und Status ---------- */
.sp-info-sec { background: #10120e; padding: clamp(3rem, 7vw, 5rem) 0; }
.sp-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.sp-card { padding: clamp(1.3rem, 2.6vw, 1.8rem); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid var(--line); }
.sp-card h3 { margin: 0 0 .4rem; font-family: 'Thasadith', sans-serif; font-weight: 700; color: #fff; font-size: 1.45rem; }
.sp-card > p { color: var(--muted); line-height: 1.65; margin: 0 0 1.1rem; }
.sp-week { display: grid; grid-template-columns: 2.4rem 1fr; gap: .45rem .7rem; align-items: center; margin-bottom: 1rem; }
.sp-week b { font: 700 .78rem var(--mono); color: rgba(255, 255, 255, .7); }
.sp-week b.is-today { color: var(--c); }
.sp-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.sp-bar i { position: absolute; top: 0; bottom: 0; left: calc(8 / 24 * 100%); width: calc(9 / 24 * 100%); border-radius: 999px; background: linear-gradient(90deg, var(--c), var(--c2)); opacity: .8; }
.sp-bar.is-off i { display: none; }
.sp-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; display: none; }
.sp-bar.has-now em { display: block; }
.sp-scale { display: flex; justify-content: space-between; margin: -.4rem 0 1rem 3.1rem; font: .66rem var(--mono); color: rgba(255, 255, 255, .35); }
.sp-note { margin: 0; font-size: .88rem; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.sp-systems { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.sp-systems li { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: #fff; font-size: .92rem; }
.sp-systems li i { width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; flex: none; }
.sp-systems li.is-ok i { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, .7); }
.sp-systems li.is-err i { background: #ff5a4a; box-shadow: 0 0 8px rgba(255, 90, 74, .7); }
.sp-systems li span { margin-left: auto; font: 700 .7rem var(--mono); color: var(--muted); }
.sp-systems li.is-err span { color: #ff8a7a; }
.sp-skel { height: 40px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); background-size: 200% 100%; animation: spShim 1.4s linear infinite; }
@keyframes spShim { to { background-position: -200% 0; } }

/* ---------- Kundenbereich ---------- */
.sp-kunden-teaser { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.2rem; padding: clamp(1.3rem, 3vw, 2rem); border-radius: 24px;
  background: linear-gradient(120deg, rgba(144, 190, 32, .16), rgba(90, 169, 255, .1)); border: 1px solid rgba(144, 190, 32, .3); }
.sp-kunden-teaser h2 { margin: 0 0 .3rem; font-family: 'Thasadith', sans-serif; color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.sp-kunden-teaser p { margin: 0; color: var(--muted); max-width: 40rem; line-height: 1.65; }
.sp-logins-sec { background: #0e100c; padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--line); }
.sp-group + .sp-group { margin-top: 2.2rem; }
.sp-group > h2 { margin: 0 0 1rem; font: 700 .78rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .5); }
.sp-logins { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.sp-login { --k: var(--c); position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 18px; text-decoration: none !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--k) 8%, #121410), #0f110d 70%); border: 1px solid color-mix(in srgb, var(--k) 25%, transparent); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.sp-login:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--k) 60%, transparent); box-shadow: 0 20px 45px -28px var(--k); }
.sp-login-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #0b0c0a; background: var(--k); font: 800 .95rem 'Thasadith', sans-serif; }
.sp-login-ico svg { width: 22px; height: 22px; }
.sp-login b { display: block; color: #fff; font-size: 1rem; line-height: 1.25; }
.sp-login small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.4; margin-top: .1rem; }
.sp-login-go { margin-left: auto; color: rgba(255, 255, 255, .35); font-size: 1.2rem; transition: transform .25s var(--ease), color .25s; }
.sp-login:hover .sp-login-go { transform: translateX(3px); color: var(--k); }
.sp-faq { display: flex; flex-direction: column; gap: .6rem; }
.sp-faq details { border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); overflow: hidden; }
.sp-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; cursor: pointer; color: #fff; font-weight: 700; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 1rem var(--mono); color: var(--c); background: rgba(144, 190, 32, .12); transition: transform .3s var(--ease); }
.sp-faq details[open] summary::after { transform: rotate(45deg); }
.sp-faq details p { margin: 0; padding: 0 1.15rem 1.1rem; color: var(--muted); line-height: 1.7; }
.sp-faq details a { color: var(--c); }

/* ---------- Einblenden ---------- */
.sp-js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.sp-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsiv ---------- */
@media (max-width: 991.98px) {
  .sp-hero-grid, .sp-info-grid { grid-template-columns: 1fr; }
  .sp-scene { max-width: 440px; margin-top: .5rem; }
  .sp-ways { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-body *, .sp-body *::before, .sp-body *::after { animation: none !important; transition: none !important; }
  .sp-js [data-reveal] { opacity: 1; transform: none; }
}