/* ════════════════════════════════════
   R2lab — style.css
════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:      #06060f;
  --surface: rgba(255,255,255,0.035);
  --border:  rgba(255,255,255,0.08);
  --purple:  #7c3aed;
  --purple-l:#a78bfa;
  --cyan:    #22d3ee;
  --pink:    #f472b6;
  --green:   #10b981;
  --white:   #eeeeff;
  --muted:   rgba(238,238,255,0.45);
  --r:       18px;
}

html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  background:var(--bg);
  color:var(--white);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  cursor:none;
  line-height:1.65;
}
::selection { background:var(--purple); color:#fff; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--purple-l); border-radius:2px; }
img { display:block; width:100%; height:100%; object-fit:cover; }

/* ── HINTERGRUND ── */
.blob {
  position:fixed; border-radius:50%;
  filter:blur(90px); pointer-events:none; z-index:0; opacity:.09;
}
.blob-1 { width:600px; height:600px; background:var(--purple); top:-200px; right:-120px;
           animation:bf 14s ease-in-out infinite alternate; }
.blob-2 { width:480px; height:480px; background:var(--cyan);   bottom:-130px; left:-100px;
           animation:bf 18s ease-in-out infinite alternate-reverse; }
.blob-3 { width:400px; height:400px; background:var(--pink);   top:50%; left:45%; margin:-200px;
           animation:bf 11s ease-in-out infinite alternate; }
@keyframes bf {
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(30px,22px) scale(1.1); }
}
.grid-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.02;
  background:
    linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size:70px 70px;
}
.noise {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.015;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── PRELOADER ── */
#loader {
  position:fixed; inset:0; z-index:9000;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transition:opacity .7s, visibility .7s;
}
#loader.gone { opacity:0; visibility:hidden; }
.l-logo-svg { width:160px; height:46px; animation:lglow 1.4s ease-in-out infinite alternate; }
@keyframes lglow { from{filter:blur(0)} to{filter:blur(1px) brightness(1.5)} }
.l-bar  { width:240px; height:2px; background:rgba(255,255,255,.08); border-radius:1px; overflow:hidden; }
.l-fill { height:100%; width:0; background:linear-gradient(90deg,var(--purple),var(--cyan),var(--pink)); border-radius:1px; }
.l-pct  { font-size:.78rem; color:var(--muted); letter-spacing:3px; }

/* ── CURSOR ── */
#cur, #cur-r {
  position:fixed; border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
}
#cur   { width:9px; height:9px; background:var(--white); transition:width .25s,height .25s,background .3s; }
#cur-r { width:36px; height:36px; border:1.5px solid rgba(167,139,250,.45); transition:width .35s,height .35s,border-color .35s; }
body.hov #cur   { width:18px; height:18px; background:var(--purple-l); }
body.hov #cur-r { width:58px; height:58px; border-color:var(--purple-l); }

/* ── HAMBURGER ── */
.hamburger {
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background:var(--white); border-radius:1px;
  transition:transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.mobile-menu {
  position:fixed; inset:0; z-index:800;
  background:rgba(6,6,15,.97);
  backdrop-filter:blur(30px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.25,.46,.45,.94);
}
.mobile-menu.open { transform:translateX(0); }
.mob-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:none; color:var(--muted);
  font-size:1.5rem; cursor:pointer;
  transition:color .3s;
}
.mob-close:hover { color:var(--white); }
.mob-nav { display:flex; flex-direction:column; align-items:center; gap:1.5rem; margin-bottom:2rem; }
.mob-nav a {
  font-size:1.8rem; font-weight:700; color:var(--white);
  text-decoration:none; letter-spacing:-1px;
  transition:color .3s;
}
.mob-nav a:hover { color:var(--purple-l); }
.mob-cta { margin-top:1rem; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 6%;
  transition:all .5s;
}
nav.sticky {
  background:rgba(6,6,15,.88);
  backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
  padding:1rem 6%;
}
.n-logo-wrap { text-decoration:none; line-height:1; }
.n-logo-svg  { width:130px; height:38px; }
.n-links { display:flex; gap:2.5rem; list-style:none; }
.n-links a {
  color:var(--muted); text-decoration:none; font-size:.88rem; letter-spacing:.4px;
  transition:color .3s; position:relative;
}
.n-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px;
  background:linear-gradient(90deg,var(--purple-l),var(--cyan));
  transition:width .3s;
}
.n-links a:hover { color:var(--white); }
.n-links a:hover::after { width:100%; }
.n-cta {
  padding:.65rem 1.5rem; border-radius:100px;
  background:linear-gradient(135deg,var(--purple),var(--purple-l));
  color:#fff; font-size:.83rem; font-weight:700; text-decoration:none;
  box-shadow:0 0 22px rgba(124,58,237,.4); transition:all .3s; letter-spacing:.3px;
}
.n-cta:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(124,58,237,.65); }

/* ── HERO ── */
#hero {
  position:relative; height:100vh; min-height:600px;
  display:flex; flex-direction:column;
  justify-content:flex-end;
  padding-bottom:10vh;
  overflow:hidden;
}
#cvs {
  position:absolute; inset:0;
  width:100%; height:100%; z-index:0;
}
.hero-text {
  position:relative; z-index:2;
  text-align:center;
  padding:0 6%;
  max-width:900px; margin:0 auto; width:100%;
}

/* Hero animierte Elemente */
.hero-anim {
  opacity:0; transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.hero-anim.vis { opacity:1; transform:translateY(0); }

.h-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem 1.1rem; border-radius:100px;
  border:1px solid rgba(167,139,250,.3);
  background:rgba(167,139,250,.08);
  font-size:.76rem; color:var(--purple-l);
  letter-spacing:2px; text-transform:uppercase;
  margin-bottom:1.5rem;
}
.badge-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--green); animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.h-title {
  font-size:clamp(2.5rem,7vw,7rem); font-weight:900;
  line-height:.95; letter-spacing:-3px;
  margin-bottom:1.4rem;
}
.grad {
  background:linear-gradient(135deg,var(--purple-l) 0%,var(--cyan) 55%,var(--pink) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.h-sub {
  font-size:1.05rem; color:var(--muted);
  max-width:560px; line-height:1.8;
  margin:0 auto 2rem;
}
.h-btns {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}

/* ── BUTTONS ── */
.btn {
  padding:.95rem 2rem; border-radius:100px;
  font-size:.92rem; font-weight:700; text-decoration:none;
  border:none; cursor:none;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:all .3s;
}
.btn-p {
  background:linear-gradient(135deg,var(--purple),var(--purple-l));
  color:#fff; box-shadow:0 0 28px rgba(124,58,237,.4);
}
.btn-p:hover { transform:translateY(-3px); box-shadow:0 0 55px rgba(124,58,237,.65); }
.btn-g {
  background:rgba(255,255,255,.04); color:var(--white);
  border:1px solid var(--border);
}
.btn-g:hover { background:rgba(255,255,255,.09); transform:translateY(-3px); }

/* Scroll Indicator */
.scroll-ind {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--muted); font-size:.68rem; letter-spacing:3px; text-transform:uppercase;
  z-index:2;
  opacity:0; animation:fadeup .8s 3.5s ease forwards;
}
.s-mouse { width:20px; height:33px; border:1.5px solid rgba(255,255,255,.2); border-radius:10px; display:flex; justify-content:center; padding-top:5px; }
.s-wheel { width:2px; height:7px; background:var(--purple-l); border-radius:1px; animation:sw 1.6s ease-in-out infinite; }
@keyframes sw { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(10px)} }

/* ── MARQUEE ── */
.marquee {
  padding:2rem 0; overflow:hidden;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.012); position:relative; z-index:2;
}
.m-track { display:flex; white-space:nowrap; animation:mroll 22s linear infinite; }
.m-track:hover { animation-play-state:paused; }
.m-item {
  display:inline-flex; align-items:center; gap:.7rem;
  padding:0 2.5rem; color:rgba(255,255,255,.28);
  font-size:.87rem; font-weight:600; letter-spacing:.5px; transition:color .3s;
}
.m-item:hover { color:rgba(255,255,255,.75); }
.m-sep { width:5px; height:5px; border-radius:50%; background:var(--purple-l); opacity:.55; }
@keyframes mroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── SECTION BASE ── */
.section { position:relative; z-index:2; padding:9rem 6%; }
.s-tag {
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.72rem; letter-spacing:4px; text-transform:uppercase; color:var(--cyan); margin-bottom:1rem;
}
.s-tag::before { content:''; width:36px; height:1px; background:var(--cyan); }
.s-title {
  font-size:clamp(2rem,4.5vw,3.6rem); font-weight:900;
  letter-spacing:-2px; line-height:1.05; margin-bottom:1rem;
}
.s-title em {
  font-style:normal;
  background:linear-gradient(135deg,var(--purple-l),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.s-desc { color:var(--muted); font-size:1rem; max-width:520px; line-height:1.8; }
.center { text-align:center; }
.center .s-tag  { justify-content:center; }
.center .s-desc { margin:0 auto; }

/* ── ÜBER MICH ── */
.about-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:6rem;
  margin-top:4rem; align-items:center;
}
.about-img-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.about-glow {
  position:absolute; inset:-20px;
  background:radial-gradient(circle,rgba(124,58,237,.18),transparent 65%); pointer-events:none;
}
.about-img {
  width:100%; max-width:440px; aspect-ratio:1;
  border-radius:28px; overflow:hidden;
  border:1px solid var(--border);
  transition:transform .4s;
}
.about-img:hover { transform:rotate(-2deg) scale(1.02); }
.about-img img { object-position:center top; }
.about-text h2 { font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:900; letter-spacing:-1px; margin-bottom:1.2rem; line-height:1.25; }
.about-text p { color:var(--muted); line-height:1.85; margin-bottom:1.1rem; font-size:.97rem; }
.about-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.chip {
  padding:.4rem 1rem; border-radius:100px; font-size:.78rem; font-weight:700; letter-spacing:.5px;
  border:1px solid var(--border); background:var(--surface); color:var(--muted); transition:all .3s;
}
.chip:hover { border-color:var(--purple-l); color:var(--purple-l); background:rgba(167,139,250,.08); }

/* ── LEISTUNGEN ── */
.srv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:4rem; }
.srv-card {
  padding:2.3rem; border-radius:var(--r);
  border:1px solid var(--border); background:var(--surface);
  backdrop-filter:blur(16px);
  transition:transform .4s,border-color .4s,box-shadow .4s;
  position:relative; overflow:hidden; cursor:none;
}
.srv-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  opacity:0; transition:opacity .4s; border-radius:var(--r);
}
.srv-card:hover { transform:translateY(-8px); border-color:rgba(167,139,250,.45); box-shadow:0 20px 60px rgba(124,58,237,.2); }
.srv-card:hover::after { opacity:.04; }
.srv-n   { font-size:.7rem; letter-spacing:3px; color:var(--purple-l); margin-bottom:1.4rem; font-weight:700; }
.srv-ico { font-size:2rem; margin-bottom:1rem; display:block; }
.srv-t   { font-size:1.1rem; font-weight:800; margin-bottom:.6rem; }
.srv-d   { font-size:.87rem; color:var(--muted); line-height:1.75; }
.srv-arr { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.4rem; font-size:.82rem; font-weight:700; color:var(--purple-l); transition:gap .3s; }
.srv-card:hover .srv-arr { gap:.8rem; }

/* ── STATISTIKEN ── */
.stats-row {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.012);
}
.stat {
  padding:3.5rem 2rem; text-align:center;
  border-right:1px solid var(--border);
  position:relative; overflow:hidden; transition:background .3s;
}
.stat:last-child { border-right:none; }
.stat:hover { background:rgba(167,139,250,.05); }
.stat::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:linear-gradient(90deg,var(--purple),var(--cyan)); transition:width .4s;
}
.stat:hover::after { width:55%; }
.s-n {
  font-size:3rem; font-weight:900; letter-spacing:-2px; line-height:1;
  background:linear-gradient(135deg,var(--white),var(--purple-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.s-l { font-size:.73rem; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:.4rem; }

/* ── PORTFOLIO ── */
.portfolio-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:4rem; }
.port-card {
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--border); background:var(--surface);
  transition:transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s;
  cursor:none;
}
.port-card:hover { transform:translateY(-10px); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.port-card.wide { grid-column:1/-1; }
.port-thumb { overflow:hidden; position:relative; }
.port-thumb img { min-height:240px; transition:transform .6s cubic-bezier(.25,.46,.45,.94); }
.port-card.wide .port-thumb img { min-height:360px; }
.port-card:hover .port-thumb img { transform:scale(1.06); }
.port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(6,6,15,.9) 0%,transparent 60%); pointer-events:none;
}
.port-body { padding:1.8rem; }
.port-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem; }
.p-tag { padding:.25rem .75rem; border-radius:100px; font-size:.72rem; font-weight:700; letter-spacing:.5px; }
.t-pu { background:rgba(139,92,246,.15); color:#a78bfa; border:1px solid rgba(139,92,246,.25); }
.t-cy { background:rgba(34,211,238,.12);  color:#67e8f9; border:1px solid rgba(34,211,238,.2); }
.t-pi { background:rgba(244,114,182,.12); color:#f9a8d4; border:1px solid rgba(244,114,182,.2); }
.port-title { font-size:1.3rem; font-weight:800; margin-bottom:.4rem; }
.port-desc  { font-size:.88rem; color:var(--muted); line-height:1.6; }
.port-link  { display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; color:var(--cyan); font-size:.83rem; font-weight:700; text-decoration:none; transition:gap .3s; }
.port-link:hover { gap:.9rem; }

/* ── ABLAUF ── */
.proc-section { background:linear-gradient(180deg,transparent,rgba(124,58,237,.04),transparent); }
.proc-steps   { display:flex; flex-direction:column; margin-top:3.5rem; border:1px solid var(--border); border-radius:24px; overflow:hidden; }
.proc-step {
  display:grid; grid-template-columns:80px 1fr auto;
  align-items:center; gap:2rem; padding:3rem 3.5rem;
  border-bottom:1px solid var(--border);
  transition:background .4s; cursor:none; position:relative; overflow:hidden;
}
.proc-step:last-child { border-bottom:none; }
.proc-step::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--purple),var(--cyan));
  transform:scaleY(0); transform-origin:top; transition:transform .4s;
}
.proc-step:hover { background:rgba(167,139,250,.04); }
.proc-step:hover::before { transform:scaleY(1); }
.proc-num {
  width:60px; height:60px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:900; letter-spacing:-1px;
  background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(34,211,238,.1));
  border:1px solid var(--border); color:var(--purple-l); flex-shrink:0; transition:all .4s;
}
.proc-step:hover .proc-num { background:linear-gradient(135deg,var(--purple),var(--purple-l)); color:#fff; border-color:transparent; box-shadow:0 0 20px rgba(124,58,237,.4); }
.proc-t { font-size:1.15rem; font-weight:800; margin-bottom:.5rem; }
.proc-d { font-size:.9rem; color:var(--muted); line-height:1.78; max-width:600px; }
.proc-ico { font-size:2.5rem; opacity:.3; transition:opacity .4s; }
.proc-step:hover .proc-ico { opacity:.7; }

/* ── PREISE ── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:4rem; align-items:start; }
.price-card {
  padding:2.5rem; border-radius:var(--r);
  border:1px solid var(--border); background:var(--surface);
  backdrop-filter:blur(16px);
  position:relative; transition:transform .4s,box-shadow .4s; cursor:none;
}
.price-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(124,58,237,.15); }
.price-card.featured {
  border-color:rgba(167,139,250,.45);
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(34,211,238,.06));
  transform:scale(1.03);
}
.price-card.featured:hover { transform:scale(1.03) translateY(-6px); }
.price-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  padding:.3rem 1rem; border-radius:100px;
  background:linear-gradient(135deg,var(--purple),var(--purple-l));
  font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; white-space:nowrap;
}
.price-label  { font-size:.73rem; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:.8rem; }
.price-name   { font-size:1.4rem; font-weight:900; margin-bottom:.5rem; }
.price-desc   { font-size:.86rem; color:var(--muted); line-height:1.7; margin-bottom:1.8rem; }
.price-val    { font-size:2.8rem; font-weight:900; letter-spacing:-2px; background:linear-gradient(135deg,var(--white),var(--purple-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.price-period { font-size:.78rem; color:var(--muted); margin-bottom:1.8rem; margin-top:.3rem; }
.price-features { list-style:none; margin-bottom:2rem; }
.price-features li { font-size:.87rem; color:var(--muted); padding:.5rem 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.7rem; }
.price-features li:last-child { border-bottom:none; }
.price-features li span { color:var(--green); font-size:.95rem; }
.price-btn { display:block; text-align:center; padding:.9rem 1.5rem; border-radius:100px; font-size:.88rem; font-weight:700; text-decoration:none; transition:all .3s; }
.price-btn-p { background:linear-gradient(135deg,var(--purple),var(--purple-l)); color:#fff; box-shadow:0 0 22px rgba(124,58,237,.35); }
.price-btn-p:hover { box-shadow:0 0 45px rgba(124,58,237,.6); transform:translateY(-2px); }
.price-btn-g { background:rgba(255,255,255,.04); color:var(--white); border:1px solid var(--border); }
.price-btn-g:hover { background:rgba(255,255,255,.09); transform:translateY(-2px); }
.pricing-note { text-align:center; color:var(--muted); font-size:.82rem; margin-top:2rem; line-height:1.6; }

/* ── SUPPORT ABO ── */
.support-abo {
  margin-top:3rem;
  padding:3rem;
  border-radius:var(--r);
  border:1px solid rgba(167,139,250,.25);
  background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(34,211,238,.04));
  display:flex; justify-content:space-between; align-items:center; gap:3rem; flex-wrap:wrap;
}
.abo-badge {
  display:inline-block;
  padding:.3rem .9rem; border-radius:100px; margin-bottom:1rem;
  background:rgba(167,139,250,.15); border:1px solid rgba(167,139,250,.3);
  font-size:.72rem; color:var(--purple-l); letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
}
.abo-title { font-size:1.6rem; font-weight:900; letter-spacing:-1px; margin-bottom:.7rem; }
.abo-title em { font-style:normal; background:linear-gradient(135deg,var(--purple-l),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.abo-desc { font-size:.92rem; color:var(--muted); line-height:1.8; max-width:520px; margin-bottom:1.5rem; }
.abo-features { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.abo-features span { font-size:.83rem; color:var(--muted); }
.abo-right { text-align:center; flex-shrink:0; }
.abo-price { font-size:3.5rem; font-weight:900; letter-spacing:-2px; background:linear-gradient(135deg,var(--white),var(--purple-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.abo-price span { font-size:1.2rem; font-weight:400; }
.abo-sub { font-size:.8rem; color:var(--muted); margin-top:.3rem; }

/* ── TESTIMONIALS ── */
.testi-section { text-align:center; }
.t-slider { max-width:820px; margin:4rem auto 0; position:relative; overflow:hidden; }
.t-track  { display:flex; transition:transform .6s cubic-bezier(.25,.46,.45,.94); }
.t-slide  { flex:0 0 100%; padding:0 1rem; }
.t-card {
  padding:3rem; border-radius:24px;
  border:1px solid var(--border); background:var(--surface); backdrop-filter:blur(20px);
}
.t-stars  { color:#fbbf24; font-size:1.1rem; margin-bottom:1.5rem; letter-spacing:2px; }
.t-quote  { font-size:1.05rem; font-style:italic; line-height:1.88; color:rgba(255,255,255,.7); margin-bottom:2rem; }
.t-author { display:flex; align-items:center; justify-content:center; gap:1rem; }
.t-av     { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:900; color:#fff; flex-shrink:0; }
.t-name   { font-weight:800; font-size:.95rem; }
.t-role   { font-size:.78rem; color:var(--muted); }
.t-nav    { display:flex; justify-content:center; gap:.8rem; margin-top:1.8rem; }
.t-btn    { width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--white); font-size:1rem; cursor:none; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.t-btn:hover { background:var(--purple); border-color:var(--purple); }
.t-dots   { display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.t-dot    { width:6px; height:6px; border-radius:3px; background:var(--border); cursor:none; transition:all .3s; }
.t-dot.on { background:var(--purple-l); width:22px; }

/* ── CTA ── */
.cta-box {
  padding:5.5rem 4rem; border-radius:28px; text-align:center;
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(34,211,238,.07),rgba(244,114,182,.09));
  border:1px solid rgba(167,139,250,.2); position:relative; overflow:hidden;
}
.cta-glow {
  position:absolute; top:50%; left:50%; width:700px; height:400px;
  background:radial-gradient(ellipse,rgba(124,58,237,.28),transparent 70%);
  transform:translate(-50%,-50%); pointer-events:none;
}
.cta-tag { font-size:.72rem; letter-spacing:4px; text-transform:uppercase; color:var(--cyan); margin-bottom:1rem; position:relative; z-index:1; }
.cta-title { font-size:clamp(2rem,5vw,4.5rem); font-weight:900; letter-spacing:-2px; line-height:1; margin-bottom:1.2rem; position:relative; z-index:1; }
.cta-sub   { font-size:1rem; color:var(--muted); max-width:460px; margin:0 auto 2rem; line-height:1.8; position:relative; z-index:1; }
.cta-phone {
  display:block; font-size:2rem; font-weight:900; letter-spacing:-1px; text-decoration:none;
  background:linear-gradient(135deg,var(--white),var(--purple-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:1.8rem; position:relative; z-index:1; transition:filter .3s;
}
.cta-phone:hover { filter:brightness(1.3); }
.cta-btns  { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
.cta-small { font-size:.78rem; color:var(--muted); margin-top:1.5rem; letter-spacing:1px; position:relative; z-index:1; }

/* ── KONTAKT ── */
.c-wrap { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.c-info-item {
  display:flex; align-items:center; gap:1rem;
  padding:1.2rem 1.4rem; border-radius:14px;
  border:1px solid var(--border); background:var(--surface);
  text-decoration:none; margin-bottom:.8rem; transition:all .3s;
}
.c-info-item:hover { border-color:rgba(167,139,250,.4); transform:translateX(7px); background:rgba(124,58,237,.06); }
.c-ico { width:42px; height:42px; border-radius:12px; flex-shrink:0; background:linear-gradient(135deg,var(--purple),var(--purple-l)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.c-lbl { font-size:.72rem; color:var(--muted); letter-spacing:1px; margin-bottom:.2rem; }
.c-v   { font-weight:700; font-size:.93rem; color:var(--white); }
.c-form { display:flex; flex-direction:column; gap:1.1rem; }
.f-g   { display:flex; flex-direction:column; gap:.45rem; }
.f-g label { font-size:.75rem; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
.f-g input, .f-g textarea, .f-g select {
  padding:.95rem 1.2rem; background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:12px;
  color:var(--white); font-size:.93rem; font-family:inherit;
  outline:none; resize:none; appearance:none;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.f-g input:focus, .f-g textarea:focus, .f-g select:focus {
  border-color:var(--purple-l); box-shadow:0 0 0 3px rgba(167,139,250,.12); background:rgba(124,58,237,.04);
}
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.sub-btn {
  padding:1rem 2rem; border-radius:100px;
  background:linear-gradient(135deg,var(--purple),var(--purple-l));
  color:#fff; font-size:.93rem; font-weight:700; border:none; cursor:none;
  box-shadow:0 0 28px rgba(124,58,237,.35); letter-spacing:.3px; transition:all .3s;
}
.sub-btn:hover { box-shadow:0 0 55px rgba(124,58,237,.6); transform:translateY(-2px); }

/* ── FOOTER ── */
footer { position:relative; z-index:2; padding:3.5rem 6% 2rem; border-top:1px solid var(--border); }
.f-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.f-logo-svg { width:130px; height:38px; }
.f-tagline { color:var(--muted); font-size:.83rem; margin-top:.4rem; }
.f-socials { display:flex; gap:.7rem; }
.f-soc {
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:.88rem; color:var(--muted); text-decoration:none; transition:all .3s;
}
.f-soc:hover { border-color:var(--purple-l); color:var(--white); transform:translateY(-3px); background:rgba(124,58,237,.1); }
.f-bot { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--border); font-size:.78rem; color:rgba(255,255,255,.2); }
.f-links { display:flex; gap:2rem; }
.f-links a { color:rgba(255,255,255,.3); text-decoration:none; font-size:.78rem; transition:color .3s; }
.f-links a:hover { color:var(--white); }

/* ── REVEAL ANIMATIONEN ── */
.rv  { opacity:0; transform:translateY(40px);  transition:opacity .85s ease,transform .85s ease; }
.rvl { opacity:0; transform:translateX(-45px); transition:opacity .85s ease,transform .85s ease; }
.rvr { opacity:0; transform:translateX(45px);  transition:opacity .85s ease,transform .85s ease; }
.rvs { opacity:0; transform:scale(.92);        transition:opacity .85s ease,transform .85s ease; }
.rv.go, .rvl.go, .rvr.go, .rvs.go { opacity:1; transform:none; }

@keyframes fadeup { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ── RESPONSIVE ── */
@media (max-width:900px) {

  /* Nav: immer sichtbar auf Mobile */
  nav {
    background:rgba(6,6,15,.92);
    backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
    padding:1rem 5%;
  }
  .n-links { display:none; }
  .n-cta   { display:none; }
  .hamburger { display:flex; }

  /* Hero */
  #hero { padding-bottom:8vh; }
  .h-title { letter-spacing:-2px; }

  /* Sections */
  .section { padding:6rem 5%; }

  /* About */
  .about-wrap { grid-template-columns:1fr; gap:3rem; }
  .about-img  { max-width:320px; margin:0 auto; }

  /* Services */
  .srv-grid { grid-template-columns:1fr; }

  /* Stats */
  .stats-row { grid-template-columns:1fr 1fr; }
  .stat { border-right:none; border-bottom:1px solid var(--border); }
  .stat:last-child { border-bottom:none; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns:1fr; }
  .port-card.wide { grid-column:auto; }

  /* Process */
  .proc-step { grid-template-columns:60px 1fr; padding:2rem 1.5rem; }
  .proc-ico  { display:none; }

  /* Pricing */
  .pricing-grid { grid-template-columns:1fr; }
  .price-card.featured { transform:none; }
  .price-card.featured:hover { transform:translateY(-6px); }

  /* Support Abo */
  .support-abo { flex-direction:column; text-align:center; }
  .abo-features { justify-content:center; }

  /* Contact */
  .c-wrap { grid-template-columns:1fr; gap:3rem; }
  .f-row  { grid-template-columns:1fr; }

  /* Footer */
  .f-top { flex-direction:column; gap:1.5rem; text-align:center; }
  .f-bot { flex-direction:column; gap:1rem; text-align:center; }
  .f-links { justify-content:center; }
}

@media (max-width:480px) {
  .h-title { letter-spacing:-1px; }
  .h-btns  { flex-direction:column; align-items:center; }
  .btn     { width:100%; max-width:300px; justify-content:center; }
}