/* Venom Studio – öffentliche Website-Seiten (Funktionen, Vergleich, FAQ, Galerie, Blog) */
:root{--sp-bg:#09090c;--sp-bg2:#0f0e15;--sp-card:#121119;--sp-card2:#17151f;--sp-line:rgba(255,255,255,.08);--sp-line2:rgba(167,139,250,.28);--sp-text:#f4f2fb;--sp-muted:#a7a2b8;--sp-dim:#77728a;--sp-accent:#8b5cf6;--sp-accent2:#a78bfa;--sp-radius:18px;--sp-font:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.sp{margin:0;background:var(--sp-bg);color:var(--sp-text);font:16px/1.6 var(--sp-font);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body.sp::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 15% -10%,rgba(139,92,246,.18),transparent 60%),radial-gradient(700px 420px at 100% 10%,rgba(167,139,250,.08),transparent 60%);z-index:0}
body.sp>*{position:relative;z-index:1}
body.sp>.sp-top{position:sticky;top:0;z-index:30}
main{flex:1}
a{color:var(--sp-accent2);text-decoration:none}
a:hover{color:#c4b5fd}
.sp-wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopfzeile */
.sp-top{position:sticky;top:0;z-index:20;background:rgba(9,9,12,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--sp-line)}
.sp-top-in{display:flex;align-items:center;gap:20px;height:68px}
.sp-logo{display:flex;align-items:center;gap:10px;color:var(--sp-text);font-weight:800;letter-spacing:-.01em}
.sp-logo img{border-radius:10px;box-shadow:0 6px 20px rgba(139,92,246,.3)}
.sp-nav{display:flex;gap:4px;margin-left:12px;padding:4px;border:1px solid var(--sp-line);border-radius:12px;background:rgba(255,255,255,.02)}
.sp-nav a{padding:7px 12px;border-radius:9px;color:var(--sp-muted);font-size:14px;font-weight:600}
.sp-nav a:hover{color:var(--sp-text);background:rgba(255,255,255,.04)}
.sp-nav a.active{color:var(--sp-text);background:rgba(139,92,246,.18);box-shadow:inset 0 0 0 1px var(--sp-line2)}
.sp-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.sp-lang{display:inline-grid;place-items:center;min-width:42px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--sp-line);color:var(--sp-text);font-weight:700;font-size:13px}
.sp-nav-toggle,.sp-burger{display:none}

/* Buttons */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:11px;border:1px solid var(--sp-line);background:rgba(255,255,255,.03);color:var(--sp-text);font-weight:700;font-size:14px;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.sp-btn:hover{color:var(--sp-text);background:rgba(255,255,255,.07);transform:translateY(-1px)}
.sp-btn-primary{border-color:transparent;background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 8px 24px rgba(139,92,246,.35)}
.sp-btn-primary:hover{background:linear-gradient(135deg,#9d74f8,#8b5cf6);box-shadow:0 10px 30px rgba(139,92,246,.5)}
.sp-btn-lg{height:50px;padding:0 24px;font-size:15px;border-radius:13px}

/* Hero */
.sp-hero{text-align:center;padding:72px 0 36px}
.sp-hero-left{text-align:left;padding-top:28px}
.sp-hero h1{margin:0 auto 14px;max-width:880px;font-size:clamp(34px,5vw,58px);line-height:1.08;letter-spacing:-.035em;font-weight:850;background:linear-gradient(180deg,#fff 30%,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-hero-left h1{margin-left:0}
.sp-lead{margin:0 auto;max-width:720px;color:var(--sp-muted);font-size:clamp(16px,1.6vw,19px)}
.sp-hero-left .sp-lead{margin-left:0}
.sp-kicker{margin:0 0 10px;color:var(--sp-accent2);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sp-hero:not(.sp-hero-left) .sp-hero-actions{justify-content:center}
.sp-crumbs{display:flex;gap:8px;padding-top:28px;color:var(--sp-dim);font-size:14px}
.sp-crumbs a{color:var(--sp-muted)}

/* Karten */
.sp-grid{display:grid;gap:18px}
.sp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--sp-radius);background:linear-gradient(180deg,var(--sp-card2),var(--sp-card));border:1px solid var(--sp-line);color:var(--sp-text);transition:border-color .2s,transform .2s,box-shadow .2s}
a.sp-card:hover,.sp-post-card:hover{color:var(--sp-text);border-color:var(--sp-line2);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(139,92,246,.12)}
.sp-card h2{margin:0;font-size:20px;letter-spacing:-.01em}
.sp-card p{margin:0;color:var(--sp-muted);font-size:15px}
.sp-icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;font-size:24px;background:rgba(139,92,246,.14);box-shadow:inset 0 0 0 1px var(--sp-line2)}
.sp-icon-lg{width:64px;height:64px;font-size:32px;border-radius:18px;margin-bottom:18px}
.sp-more{margin-top:auto;padding-top:6px;color:var(--sp-accent2);font-weight:700;font-size:14px}

/* Funktionsseite */
.sp-cmds{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;color:var(--sp-dim);font-size:14px}
code{font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:4px 8px;border-radius:8px;background:rgba(139,92,246,.12);color:#ddd6fe;border:1px solid var(--sp-line2)}
.sp-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:28px 0}
.sp-point{padding:22px 24px;border-radius:var(--sp-radius);background:var(--sp-card);border:1px solid var(--sp-line);border-left:3px solid var(--sp-accent)}
.sp-point h3{margin:0 0 6px;font-size:17px}
.sp-point p{margin:0;color:var(--sp-muted);font-size:15px}
.sp-others{padding:20px 0 8px}
.sp-others h2{font-size:22px;margin:0 0 14px}
.sp-chips{display:flex;flex-wrap:wrap;gap:10px}
.sp-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--sp-line);background:var(--sp-card);color:var(--sp-text);font-weight:600;font-size:14px}
.sp-chip:hover{border-color:var(--sp-line2);color:var(--sp-text)}
.sp-chip-all{color:var(--sp-accent2)}

/* Vergleich */
.sp-table-wrap{overflow-x:auto;border-radius:var(--sp-radius);border:1px solid var(--sp-line);background:var(--sp-card)}
.sp-table{width:100%;border-collapse:collapse;min-width:680px}
.sp-table th,.sp-table td{padding:15px 18px;border-bottom:1px solid var(--sp-line);text-align:center;font-size:15px}
.sp-table tbody tr:last-child th,.sp-table tbody tr:last-child td{border-bottom:0}
.sp-table thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-muted);background:rgba(255,255,255,.02)}
.sp-table thead th.sp-us{color:#fff;background:rgba(139,92,246,.2)}
.sp-table tbody th{text-align:left;font-weight:600}
.sp-table td:nth-child(2){background:rgba(139,92,246,.07)}
.sp-yes{color:#4ade80;font-weight:800;font-size:18px}
.sp-no{color:var(--sp-dim);font-size:18px}
.sp-txt{color:var(--sp-muted);font-size:14px!important}
.sp-note{margin:16px 0 0;color:var(--sp-dim);font-size:14px;text-align:center}

/* FAQ */
.sp-faq-list{max-width:860px;display:flex;flex-direction:column;gap:12px}
.sp-faq{border-radius:16px;background:var(--sp-card);border:1px solid var(--sp-line);padding:0 22px}
.sp-faq[open]{border-color:var(--sp-line2)}
.sp-faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";color:var(--sp-accent2);font-size:22px;line-height:1;transition:transform .2s}
.sp-faq[open] summary::after{transform:rotate(45deg)}
.sp-faq p{margin:0 0 20px;color:var(--sp-muted)}

/* Galerie */
.sp-server-head{display:flex;align-items:center;gap:14px}
.sp-server-head img,.sp-server-letter{width:64px;height:64px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(139,92,246,.45)}
.sp-server-letter{display:grid;place-items:center;background:linear-gradient(135deg,#4c1d95,#8b5cf6);font-weight:800;font-size:26px}
.sp-badge{display:inline-block;margin-top:4px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(139,92,246,.16);color:#ddd6fe}
.sp-server-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sp-stat{color:var(--sp-muted);font-size:14px}
.sp-stat b{color:var(--sp-text)}
.sp-empty{padding:48px 24px;border-radius:var(--sp-radius);border:1px dashed var(--sp-line2);text-align:center;color:var(--sp-muted);background:rgba(139,92,246,.04)}

/* Blog */
.sp-post-card time,.sp-article time{color:var(--sp-dim);font-size:13px;font-weight:600;letter-spacing:.03em}
.sp-post-card h2 a{color:var(--sp-text)}
.sp-cover{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:12px;border:1px solid var(--sp-line)}
.sp-cover-lg{margin:8px 0 28px}
.sp-article{max-width:780px;padding:20px 0 40px}
.sp-article h1{font-size:clamp(30px,4.2vw,46px);line-height:1.12;letter-spacing:-.03em;margin:10px 0 14px}
.sp-article .sp-lead{margin:0 0 26px}
.sp-prose{font-size:17px;color:#dcd8ea}
.sp-prose h2{font-size:26px;margin:34px 0 10px;color:#fff;letter-spacing:-.015em}
.sp-prose h3{font-size:20px;margin:26px 0 8px;color:#fff}
.sp-prose p{margin:0 0 16px}
.sp-prose ul,.sp-prose ol{padding-left:22px;margin:0 0 16px}
.sp-prose li{margin:5px 0}
.sp-prose blockquote{margin:0 0 16px;padding:12px 18px;border-left:3px solid var(--sp-accent);background:rgba(139,92,246,.07);border-radius:0 12px 12px 0;color:var(--sp-muted)}
.sp-prose strong{color:#fff}

/* Abschluss-CTA */
.sp-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:56px auto 64px;padding:34px 36px;border-radius:24px;background:radial-gradient(600px 220px at 0% 0%,rgba(139,92,246,.32),transparent 70%),linear-gradient(135deg,#17132a,#100e18);border:1px solid var(--sp-line2)}
.sp-cta h2{margin:0 0 6px;font-size:26px;letter-spacing:-.02em}
.sp-cta p{margin:0;color:var(--sp-muted)}
.sp-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Fußzeile */
.sp-foot{border-top:1px solid var(--sp-line);background:rgba(255,255,255,.01)}
.sp-foot-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:28px 0}
.sp-foot-brand{display:flex;align-items:center;gap:12px}
.sp-foot-brand img{border-radius:9px}
.sp-foot-brand small{display:block;color:var(--sp-dim);font-size:13px}
.sp-foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-left:auto}
.sp-foot-links a{color:var(--sp-muted);font-size:14px}
.sp-foot-links a:hover{color:var(--sp-text)}
.sp-copy{color:var(--sp-dim);width:100%;font-size:13px}

/* Mobil */
@media (max-width:1020px){
  .sp-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:40px;margin-left:auto;padding:0 10px;border-radius:10px;border:1px solid var(--sp-line);cursor:pointer;order:3}
  .sp-burger i{display:block;height:2px;border-radius:2px;background:var(--sp-text)}
  .sp-top-actions{margin-left:0;order:2;margin-left:auto}
  .sp-nav{display:none;position:absolute;left:20px;right:20px;top:72px;flex-direction:column;margin:0;padding:8px;background:#121119;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
  .sp-nav a{padding:12px 14px;font-size:16px}
  .sp-nav-toggle:checked ~ .sp-nav{display:flex}
}
@media (max-width:700px){
  .sp-grid-3,.sp-grid-2,.sp-points{grid-template-columns:1fr}
  .sp-hero{padding:48px 0 24px}
  .sp-logo span{display:none}
  .sp-cta{padding:26px 22px}
  .sp-foot-links{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Aktions-Banner */
.sp-promo{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:linear-gradient(90deg,#4c1d95,#7c3aed 50%,#4c1d95);color:#fff;font-size:14px;text-align:center}
.sp-promo span{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:800}
.sp-promo em{font-style:normal;opacity:.9}
.sp-promo a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Hellmodus (gleicher Schalter wie im Kundenbereich: localStorage venom_theme) */
.sp-theme{display:inline-grid;place-items:center;width:40px;height:38px;padding:0;border-radius:10px;border:1px solid var(--sp-line);background:transparent;color:var(--sp-text);font-size:17px;cursor:pointer}
.sp-theme:hover{border-color:var(--sp-line2);background:rgba(139,92,246,.1)}
html[data-theme="light"]{color-scheme:light;--sp-bg:#f6f7fb;--sp-bg2:#ffffff;--sp-card:#ffffff;--sp-card2:#fbfaff;--sp-line:#e3e1ea;--sp-line2:rgba(110,45,222,.35);--sp-text:#1a1820;--sp-muted:#5f5a70;--sp-dim:#7a7589;--sp-accent:#6e2dde;--sp-accent2:#6d28d9}
html[data-theme="light"] body.sp::before{background:radial-gradient(900px 500px at 15% -10%,rgba(139,92,246,.10),transparent 60%)}
html[data-theme="light"] .sp-top{background:rgba(255,255,255,.88)}
html[data-theme="light"] .sp-nav a:hover{background:rgba(40,30,70,.05)}
html[data-theme="light"] .sp-nav a.active{background:rgba(139,92,246,.1)}
html[data-theme="light"] .sp-btn{background:#fff}
html[data-theme="light"] .sp-btn:hover{background:#f4f1fb}
html[data-theme="light"] .sp-btn-primary,html[data-theme="light"] .sp-btn-primary:hover{color:#fff}
html[data-theme="light"] .sp-hero h1{background:linear-gradient(180deg,#1a1820 30%,#6d28d9);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] a.sp-card:hover,html[data-theme="light"] .sp-post-card:hover{box-shadow:0 18px 40px rgba(40,30,70,.12)}
html[data-theme="light"] .sp-table thead th.sp-us{color:#3d167f;background:rgba(139,92,246,.12)}
html[data-theme="light"] .sp-prose{color:#34303f}
html[data-theme="light"] .sp-prose h2,html[data-theme="light"] .sp-prose h3,html[data-theme="light"] .sp-prose strong{color:#1a1820}
html[data-theme="light"] .sp-prose code{color:#5b21b6}
html[data-theme="light"] .sp-cta{background:radial-gradient(600px 220px at 0% 0%,rgba(139,92,246,.14),transparent 70%),linear-gradient(135deg,#ffffff,#f5f1ff);color:#1a1820}
html[data-theme="light"] .sp-nav{background:#fff}
html[data-theme="light"] .sp-yes,html[data-theme="light"] .sp-good{color:#15803d}
@media(max-width:900px){html[data-theme="light"] .sp-nav{box-shadow:0 20px 50px rgba(40,30,70,.15)}}
.sp-table-wrap{position:relative}
@media(max-width:600px){.sp-table{min-width:540px}.sp-table th,.sp-table td{padding:10px 12px}}
html[data-theme="light"] .sp-btn-primary{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-color:transparent}
html[data-theme="light"] .sp-btn-primary:hover{background:linear-gradient(135deg,#9d74f8,#8b5cf6)}