/* vibecoding-webseite.de — main stylesheet */

:root{
  --bg: #07070d;
  --bg-alt: #0c0d18;
  --surface: rgba(255,255,255,0.045);
  --surface-strong: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.09);
  --text: #f2f3fb;
  --text-dim: #a3a6c2;
  --violet: #8b5cf6;
  --indigo: #6366f1;
  --cyan: #22d3ee;
  --pink: #ec4899;
  --green: #34d399;
  --grad: linear-gradient(135deg, var(--violet), var(--indigo) 55%, var(--cyan));
  --radius: 20px;
  --shadow: 0 20px 60px -20px rgba(99,102,241,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk','Inter',sans-serif;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.02em;
}
p{color:var(--text-dim); margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
code, .mono{font-family:'JetBrains Mono', ui-monospace, monospace;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

.gradient-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Animated aurora background */
.aurora{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:var(--bg);
}
.aurora span{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.45;
  animation:float 22s ease-in-out infinite;
}
.aurora span:nth-child(1){width:520px;height:520px;background:var(--violet);top:-160px;left:-120px;animation-duration:26s;}
.aurora span:nth-child(2){width:460px;height:460px;background:var(--cyan);top:10%;right:-160px;animation-duration:30s;animation-delay:-6s;}
.aurora span:nth-child(3){width:420px;height:420px;background:var(--pink);bottom:-180px;left:20%;animation-duration:24s;animation-delay:-12s;}
.aurora span:nth-child(4){width:360px;height:360px;background:var(--indigo);bottom:5%;right:10%;animation-duration:34s;animation-delay:-4s;}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(40px,-30px) scale(1.08);}
  66%{transform:translate(-30px,20px) scale(0.94);}
}
@media (prefers-reduced-motion: reduce){
  .aurora span{animation:none;}
  html{scroll-behavior:auto;}
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
}
.site-header::before{
  content:'';
  position:absolute; inset:0;
  backdrop-filter:blur(14px);
  background:rgba(7,7,13,0.65);
  z-index:-1;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.nav-links{display:flex; gap:32px; align-items:center;}
.nav-links a{color:var(--text-dim); font-weight:500; font-size:0.95rem; transition:color .2s;}
.nav-links a:hover{color:var(--text);}
.header-actions{display:flex; gap:12px; align-items:center;}
.nav-toggle{display:none; background:none; border:0; color:var(--text); font-size:1.6rem; cursor:pointer; flex-shrink:0;}
.nav-actions-mobile{display:none;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--grad); color:#08080f; box-shadow:var(--shadow);}
.btn-primary:hover{box-shadow:0 24px 70px -18px rgba(99,102,241,0.55);}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-strong);}
.btn-sm{padding:9px 18px; font-size:0.85rem;}
.btn-block{width:100%;}

/* Hero */
.hero{padding:100px 0 60px; position:relative; max-width:100vw; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.hero-grid > *{min-width:0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border);
  font-size:0.82rem; color:var(--text-dim); margin-bottom:22px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan);}
.hero h1{font-size:clamp(2.3rem, 4.4vw, 3.6rem); font-weight:700;}
.hero-sub{font-size:1.15rem; max-width:540px;}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-trust{display:flex; gap:28px; margin-top:44px; flex-wrap:wrap;}
.hero-trust div{display:flex; flex-direction:column;}
.hero-trust strong{font-size:1.5rem; font-family:'Space Grotesk',sans-serif;}
.hero-trust span{font-size:0.82rem; color:var(--text-dim);}

.hero-visual{position:relative;}
.code-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow);
  position:relative;
  animation:drift 8s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
.code-card .dots{display:flex; gap:6px; margin-bottom:16px;}
.code-card .dots span{width:11px;height:11px;border-radius:50%;}
.code-card .dots span:nth-child(1){background:#ff5f56;}
.code-card .dots span:nth-child(2){background:#ffbd2e;}
.code-card .dots span:nth-child(3){background:#27c93f;}
.code-card pre{margin:0; font-size:0.86rem; color:#c9cbe8; overflow-x:auto; max-width:100%;}
.code-card .k{color:#c084fc;} .code-card .s{color:#5eead4;} .code-card .c{color:#64748b;} .code-card .f{color:#93c5fd;}

.floating-badge{
  position:absolute;
  background:var(--surface-strong);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  border-radius:14px;
  padding:12px 16px;
  font-size:0.85rem;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.5);
}
.floating-badge.b1{top:-24px; right:-10px; animation:drift 7s ease-in-out infinite; animation-delay:-2s;}
.floating-badge.b2{bottom:-20px; left:-24px; animation:drift 9s ease-in-out infinite; animation-delay:-4s;}
.floating-badge strong{color:var(--green);}

/* Sections generic */
section{padding:90px 0;}
.section-head{text-align:center; max-width:660px; margin:0 auto 56px;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-size:clamp(1.8rem, 3.2vw, 2.6rem);}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* How it works */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.steps > *, .pricing-grid > *, .explain-grid > *, .footer-grid > *{min-width:0;}
.step-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 22px; position:relative; transition:transform .25s ease, border-color .25s ease;
}
.step-card:hover{transform:translateY(-6px); border-color:rgba(139,92,246,0.5);}
.step-num{
  width:38px;height:38px; border-radius:11px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#08080f; margin-bottom:16px;
}
.step-card h3{font-size:1.05rem;}
.step-card p{font-size:0.92rem; margin:0;}

/* Pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
.price-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:34px 28px; display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.price-card:hover{transform:translateY(-8px); box-shadow:var(--shadow); border-color:rgba(139,92,246,0.4);}
.price-card.featured{border-color:var(--violet); background:linear-gradient(180deg, rgba(139,92,246,0.12), rgba(34,211,238,0.04));}
.price-card .badge{
  position:absolute; top:18px; right:18px; background:var(--grad); color:#08080f;
  font-size:0.72rem; font-weight:700; padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
}
.price-card h3{font-size:1.2rem; margin-bottom:6px;}
.price-card .price{font-family:'Space Grotesk',sans-serif; font-size:2.6rem; font-weight:700; margin:6px 0 4px;}
.price-card .price span{font-size:1rem; color:var(--text-dim); font-weight:500;}
.price-card .price-note{font-size:0.82rem; color:var(--text-dim); margin-bottom:22px;}
.price-card .feature-list{margin-bottom:26px; flex:1; display:flex; flex-direction:column; gap:16px;}
.price-card .feature-list li{display:flex; gap:12px; align-items:flex-start;}
.price-card .feature-list .check{
  flex-shrink:0; width:20px; height:20px; margin-top:1px; border-radius:50%;
  background:rgba(52,211,153,0.15); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; line-height:1;
}
.price-card .feature-list .feat-title{display:block; color:var(--text); font-weight:600; font-size:0.92rem; margin-bottom:3px;}
.price-card .feature-list .feat-desc{display:block; color:var(--text-dim); font-size:0.84rem; line-height:1.5;}

.seo-banner{
  display:flex; align-items:center; gap:14px; justify-content:center;
  max-width:640px; margin:0 auto 40px; padding:14px 24px;
  background:linear-gradient(120deg, rgba(52,211,153,0.12), rgba(34,211,238,0.08));
  border:1px solid rgba(52,211,153,0.3); border-radius:999px;
  font-size:0.9rem; text-align:center; flex-wrap:wrap;
}
.seo-banner strong{color:var(--green);}

.domain-notice{
  display:flex; gap:20px; align-items:flex-start;
  margin-top:32px; padding:26px 28px; border-radius:var(--radius);
  background:linear-gradient(120deg, rgba(236,72,153,0.10), rgba(139,92,246,0.08));
  border:1px solid rgba(236,72,153,0.3);
}
.domain-notice .icon{font-size:1.6rem; flex-shrink:0;}
.domain-notice h4{margin:0 0 8px; font-size:1.05rem;}
.domain-notice p{margin:0 0 14px; font-size:0.92rem;}

.vollservice-tag{margin:-4px 0 16px;}
.vollservice-link{
  width:100%; display:flex; align-items:center; justify-content:flex-start; gap:10px;
  background:rgba(52,211,153,0.12); border:1.5px solid rgba(52,211,153,0.55); border-radius:10px;
  padding:10px 14px; font-size:0.83rem; font-weight:700; color:var(--green);
  cursor:pointer; font-family:inherit; text-align:left; transition:background .2s, border-color .2s, transform .15s;
}
.vollservice-link .vs-badge{
  flex-shrink:0; background:var(--green); color:#08150f; font-weight:800; font-size:0.78rem;
  padding:5px 10px; border-radius:999px; white-space:nowrap;
}
.vollservice-link .vs-label{font-size:0.82rem; line-height:1.35;}
.vollservice-link .vs-label small{display:block; font-weight:500; color:var(--text-dim); font-size:0.74rem;}
.vollservice-link .arrow{display:inline-block; transition:transform .2s; font-weight:700; margin-left:2px;}
.vollservice-link:hover{background:rgba(52,211,153,0.22); border-color:var(--green); transform:translateY(-1px);}
.vollservice-link:hover .arrow{transform:translateX(4px);}
.vollservice-link:active{transform:translateY(0);}

.guide-modal .modal-price{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; color:var(--green); margin:2px 0 18px;}
.guide-modal .modal-price span{font-size:0.85rem; color:var(--text-dim); font-weight:500;}
.guide-modal .vollservice-list{display:flex; flex-direction:column; gap:10px; margin:0 0 20px;}
.guide-modal .vollservice-list li{font-size:0.9rem; color:var(--text);}
.guide-modal .vollservice-list li span{display:block; color:var(--text-dim); font-size:0.83rem;}
.guide-modal .warn-box{
  background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.3); border-radius:10px;
  padding:14px 16px; font-size:0.85rem; color:var(--text-dim); margin-bottom:16px; line-height:1.6;
}
.guide-modal .warn-box strong{color:#fca5a5;}
.guide-modal .partner-note{
  background:rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.3); border-radius:10px;
  padding:14px 16px; font-size:0.85rem; color:var(--text-dim); margin-bottom:16px; line-height:1.6;
}
.guide-modal .partner-note strong{color:var(--cyan);}
.guide-modal h5.section-title{margin:22px 0 10px; font-size:0.95rem; color:var(--text);}
.guide-modal ol.transfer-steps{margin:0 0 16px; padding-left:18px; color:var(--text-dim); font-size:0.86rem; line-height:1.8;}

/* Cookie-Consent-Banner */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--bg-alt); border-top:1px solid var(--border);
  box-shadow:0 -12px 40px rgba(0,0,0,0.4);
}
.cookie-banner-inner{
  max-width:1180px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookie-banner-text{flex:1; min-width:260px;}
.cookie-banner-text strong{display:block; margin-bottom:4px; font-size:0.95rem;}
.cookie-banner-text p{margin:0; font-size:0.86rem; color:var(--text-dim); line-height:1.6;}
.cookie-banner-text p a{color:var(--cyan);}
.cookie-banner-actions{display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0;}
.cookie-settings-panel{
  margin-top:14px; padding:14px 16px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px; max-width:420px;
}
.cookie-settings-panel[hidden]{display:none;}
.cookie-settings-panel label{display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--text);}
.cookie-settings-panel input[type="checkbox"]{width:auto;}
@media (max-width:680px){
  .cookie-banner-inner{flex-direction:column; align-items:stretch;}
  .cookie-banner-actions{justify-content:stretch;}
  .cookie-banner-actions .btn{flex:1;}
}

dialog.guide-modal{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-alt); color:var(--text);
  max-width:640px; width:92vw; padding:0; margin:auto;
}
dialog.guide-modal::backdrop{background:rgba(4,4,8,0.75); backdrop-filter:blur(4px);}
.guide-modal .guide-inner{padding:32px;}
.guide-modal h3{margin-top:0;}
.guide-modal .guide-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:20px 0;}
.guide-modal .guide-col{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px;}
.guide-modal .guide-col h5{margin:0 0 10px; font-size:0.95rem; color:var(--cyan);}
.guide-modal .guide-col ol{margin:0; padding-left:18px; color:var(--text-dim); font-size:0.86rem; line-height:1.7;}
.guide-modal .guide-note{font-size:0.82rem; color:var(--text-dim); background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:20px;}
.guide-modal .guide-close{display:flex; justify-content:flex-end;}
@media (max-width:600px){
  .guide-modal .guide-cols{grid-template-columns:1fr;}
  .domain-notice{flex-direction:column;}
}

/* Vibecoding explainer */
.explain-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.explain-points li{display:flex; gap:14px; margin-bottom:20px;}
.explain-points .ico{
  width:42px;height:42px;border-radius:12px; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.explain-points h4{margin:0 0 4px; font-size:1rem;}
.explain-points p{margin:0; font-size:0.92rem;}
.explain-quote{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px;
}

/* FAQ */
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.faq-item summary{
  cursor:pointer; padding:20px 24px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:1.4rem; color:var(--violet); transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-body{padding:0 24px 22px; color:var(--text-dim); font-size:0.94rem;}

/* Partner banner */
.partner-banner{
  border-radius:var(--radius); border:1px solid var(--border);
  background:linear-gradient(120deg, rgba(34,211,238,0.10), rgba(139,92,246,0.10));
  padding:38px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.partner-banner .txt{max-width:640px;}
.partner-banner h3{margin-bottom:8px;}
.hosting-note{
  margin-top:18px; padding:16px 20px; border-radius:14px;
  background:rgba(236,72,153,0.08); border:1px solid rgba(236,72,153,0.25); font-size:0.88rem; color:var(--text-dim);
}
.hosting-note strong{color:var(--text);}

/* Portal CTA */
.portal-cta{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:48px; text-align:center;
}
.portal-cta .btn-row{display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap;}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:56px 0 28px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; margin-bottom:40px;}
.footer-grid h5{font-size:0.85rem; color:var(--text); margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid ul a{color:var(--text-dim); font-size:0.92rem; transition:color .2s;}
.footer-grid ul a:hover{color:var(--text);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--border); font-size:0.85rem; color:var(--text-dim);
}

/* Generic form styles used across kunde/admin */
.auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-size:0.85rem; margin-bottom:7px; color:var(--text-dim);}
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:rgba(255,255,255,0.03); color:var(--text); font-size:0.95rem; font-family:inherit;
}
.form-group textarea{resize:vertical; min-height:110px;}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{outline:2px solid var(--violet); outline-offset:1px;}
.db-choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.db-choice-card{
  display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:14px;
  border:1px solid var(--border); background:rgba(255,255,255,0.03); cursor:pointer;
  font-weight:400; transition:border-color .15s, background .15s;
}
.db-choice-card:has(input:checked){border-color:var(--violet); background:rgba(139,92,246,0.1);}
.db-choice-title{font-family:'Space Grotesk','Inter',sans-serif; font-weight:600; color:var(--text); font-size:0.98rem;}
.db-choice-desc{font-size:0.82rem; color:var(--text-dim); line-height:1.55;}
@media (max-width:640px){.db-choice-grid{grid-template-columns:1fr;}}
.alert{padding:12px 16px; border-radius:10px; font-size:0.9rem; margin-bottom:18px;}
.alert-error{background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.35); color:#fca5a5;}
.alert-success{background:rgba(52,211,153,0.12); border:1px solid rgba(52,211,153,0.35); color:#6ee7b7;}

/* Dashboard shells */
.dash-shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
.dash-side{background:var(--bg-alt); border-right:1px solid var(--border); padding:26px 18px; display:flex; flex-direction:column;}
.dash-side .brand{margin-bottom:30px;}
.dash-side nav a{display:block; padding:11px 14px; border-radius:10px; color:var(--text-dim); font-size:0.92rem; margin-bottom:4px;}
.dash-side nav a:hover, .dash-side nav a.active{background:var(--surface); color:var(--text);}
.dash-side nav a.nav-link-badge{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.dash-side .nav-section-label{
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim); opacity:0.6; margin:18px 0 6px 14px;
}
.dash-side .nav-section-label:first-child{margin-top:0;}
.dash-main{padding:36px 40px;}

.filter-tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.filter-tabs a{
  padding:8px 16px; border-radius:999px; font-size:0.85rem; font-weight:600;
  background:var(--surface); border:1px solid var(--border); color:var(--text-dim);
}
.filter-tabs a:hover{color:var(--text); background:var(--surface-strong);}
.filter-tabs a.active{background:var(--grad); color:#08080f; border-color:transparent;}
.dash-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px;}
.status-pill{display:inline-block; padding:4px 12px; border-radius:999px; font-size:0.78rem; font-weight:600;}
.status-neu{background:rgba(99,102,241,0.15); color:#a5b4fc;}
.status-in_bearbeitung{background:rgba(234,179,8,0.15); color:#fde047;}
.status-warten_kunde{background:rgba(236,72,153,0.15); color:#f9a8d4;}
.status-fertig{background:rgba(52,211,153,0.15); color:#6ee7b7;}
.status-offen{background:rgba(99,102,241,0.15); color:#a5b4fc;}
.status-geschlossen{background:rgba(148,163,184,0.15); color:#cbd5e1;}
.status-bezahlt{background:rgba(52,211,153,0.15); color:#6ee7b7;}
.status-unbezahlt{background:rgba(239,68,68,0.15); color:#fca5a5;}
table{width:100%; border-collapse:collapse;}
table th, table td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--border); font-size:0.9rem;}
table th{color:var(--text-dim); font-weight:600; font-size:0.8rem; text-transform:uppercase; letter-spacing:.04em;}

/* Domain-Transfer Stepper */
.stepper{display:flex; margin:8px 0 28px;}
.stepper .step{flex:1; text-align:center; position:relative; padding-top:38px;}
.stepper .step .dot{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--surface-strong); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; color:var(--text-dim); z-index:1;
}
.stepper .step .line{position:absolute; top:13px; left:-50%; width:100%; height:2px; background:var(--border); z-index:0;}
.stepper .step:first-child .line{display:none;}
.stepper .step .label{font-size:0.78rem; color:var(--text-dim);}
.stepper .step.done .dot{background:var(--green); border-color:var(--green); color:#08150f;}
.stepper .step.done .line{background:var(--green);}
.stepper .step.current .dot{background:var(--violet); border-color:var(--violet); color:#fff;}
.stepper .step.current .label{color:var(--text); font-weight:600;}

.code-input{
  font-family:'JetBrains Mono', ui-monospace, monospace; letter-spacing:1px; font-size:1rem;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; max-width:min(460px, 100%); width:100%; margin:0 auto 20px;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
  .explain-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .dash-shell{grid-template-columns:1fr;}
  .dash-side{display:none;}
}
@media (max-width: 680px){
  .nav-links{
    position:fixed; top:76px; left:0; right:0; bottom:0;
    background:rgba(7,7,13,0.98); flex-direction:column; padding:32px 24px; gap:22px;
    transform:translateX(100%); transition:transform .25s ease; z-index:40;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .header-actions .btn:not(.nav-toggle){display:none;}
  .nav-actions-mobile{display:flex; flex-direction:column; gap:12px; margin-top:8px; width:100%;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .partner-banner{flex-direction:column; align-items:flex-start;}
}