/* ============================================
   StudioBuddy — Design System v2
   Grün + Weiß + Grau | Plus Jakarta Sans + IBM Plex Mono
   Referenz: Linear, Vercel, Stripe
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

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

:root{
  --g50:#f0fdf4;--g100:#dcfce7;--g200:#bbf7d0;--g300:#86efac;
  --g400:#4ade80;--g500:#22c55e;--g600:#16a34a;--g700:#15803d;--g800:#166534;--g900:#14532d;
  --w:#ffffff;
  --gr50:#f9fafb;--gr100:#f3f4f6;--gr200:#e5e7eb;--gr300:#d1d5db;
  --gr400:#9ca3af;--gr500:#6b7280;--gr600:#4b5563;--gr700:#374151;--gr800:#1f2937;--gr900:#111827;
  --red:#ef4444;--amber:#f59e0b;--orange:#f97316;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',monospace;
  --shadow-s:0 1px 2px rgba(0,0,0,.05);
  --shadow-m:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-l:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);
  --r-s:6px;--r-m:10px;--r-l:16px;--r-xl:24px;
  --max-w:1200px;--nav-h:72px;
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--sans);color:var(--gr800);background:var(--w);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{list-style:none}

/* Typography */
h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--gr900)}
h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--gr900)}
h3{font-size:1.25rem;font-weight:700;line-height:1.3;color:var(--gr900)}
h4{font-size:1rem;font-weight:600;color:var(--gr900)}
p{color:var(--gr600);line-height:1.7}
.mono{font-family:var(--mono)}
.label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--g600)}
.highlight{color:var(--g600)}

/* Layout */
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}
section{padding:100px 0}
.section-alt{background:var(--gr50)}
.text-center{text-align:center}

/* ========== NAV ========== */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--gr200);z-index:1000;display:flex;align-items:center}
.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{display:flex;align-items:center;gap:0;font-weight:700;font-size:1.15rem;color:var(--gr900)}
.nav-logo svg{height:28px;width:auto;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:8px 16px;font-size:.9rem;font-weight:500;color:var(--gr600);border-radius:var(--r-s);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--gr900);background:var(--gr100)}
.nav-links a.active{color:var(--g700);background:var(--g50)}
.btn-nav{background:var(--g600)!important;color:var(--w)!important;padding:9px 22px!important;border-radius:var(--r-m)!important;font-weight:600!important;box-shadow:0 1px 3px rgba(22,163,74,.25)!important;transition:all .2s!important}
.btn-nav:hover{background:var(--g700)!important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,163,74,.25)!important}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-family:var(--sans);font-size:.95rem;font-weight:600;border-radius:var(--r-m);border:none;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-primary{background:var(--g600);color:var(--w);box-shadow:0 1px 3px rgba(22,163,74,.3)}
.btn-primary:hover{background:var(--g700);box-shadow:0 4px 12px rgba(22,163,74,.3);transform:translateY(-1px)}
.btn-secondary{background:var(--w);color:var(--gr700);border:1px solid var(--gr300)}
.btn-secondary:hover{background:var(--gr50);border-color:var(--gr400);transform:translateY(-1px)}
.btn-white{background:var(--w);color:var(--g700);font-weight:700}
.btn-white:hover{background:var(--g50);transform:translateY(-1px)}
.btn-lg{padding:16px 32px;font-size:1rem}
.btn-ghost{background:transparent;color:var(--gr400);border:1px solid rgba(255,255,255,.15)}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--w);border-color:rgba(255,255,255,.3)}

/* ========== HERO ========== */
.hero{padding-top:calc(var(--nav-h) + 80px);padding-bottom:100px;text-align:center;background:linear-gradient(180deg,var(--w) 0%,var(--g50) 100%)}
.hero h1{max-width:820px;margin:0 auto 24px}
.hero .subline{font-size:1.15rem;color:var(--gr500);max-width:620px;margin:0 auto 40px}
.hero-buttons{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}

/* ========== STATS ========== */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto}
.stat-card{background:var(--w);border:1px solid var(--gr200);border-radius:var(--r-l);padding:36px 28px;text-align:center;transition:box-shadow .2s,transform .2s}
.stat-card:hover{box-shadow:var(--shadow-l);transform:translateY(-2px)}
.stat-number{font-family:var(--mono);font-size:2.5rem;font-weight:700;color:var(--red);line-height:1;margin-bottom:10px}
.stat-number.green{color:var(--g600)}
.stat-label{font-size:.9rem;color:var(--gr500);line-height:1.4}

/* ========== FEATURE CARDS ========== */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px;text-align:left}
.feature-card{background:var(--w);border:1px solid var(--gr200);border-radius:var(--r-l);padding:36px;transition:box-shadow .25s,transform .25s}
.feature-card:hover{box-shadow:var(--shadow-l);transform:translateY(-3px)}
.feature-icon{width:48px;height:48px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--g600)}
.feature-card h3{margin-bottom:10px}
.feature-card p{font-size:.93rem}

/* ========== FEATURE DETAIL (Produkt-Seite) ========== */
.feature-block{padding:100px 0}
.feature-block:nth-child(even){background:var(--gr50)}
.feature-detail{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.feature-detail.reversed{direction:rtl}
.feature-detail.reversed>*{direction:ltr}
.fd-text .label{margin-bottom:12px;display:block}
.fd-text h2{margin-bottom:16px;font-size:2rem}
.fd-text p{margin-bottom:20px}
.fd-visual{background:var(--gr50);border:1px solid var(--gr200);border-radius:var(--r-l);padding:28px}
.feature-block:nth-child(even) .fd-visual{background:var(--w)}

/* WhatsApp-Vorschauen */
.wa{background:var(--w);border:1px solid var(--gr200);border-radius:var(--r-l);padding:20px;margin-bottom:12px;position:relative}
.wa::before{content:'WhatsApp';position:absolute;top:-8px;left:16px;background:var(--g500);color:#fff;font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em}
.wa .name{font-weight:600;color:var(--gr900);margin-bottom:4px;font-size:.85rem}
.wa p{color:var(--gr700);font-size:.88rem;line-height:1.55}
.risk-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px;background:var(--w);border:1px solid var(--gr200);border-radius:var(--r-m)}
.risk-badge .num{font-family:var(--mono);font-size:1.4rem;font-weight:700;color:var(--red);line-height:1}
.risk-badge .meta{font-size:.8rem;color:var(--gr500)}
.risk-badge .meta strong{display:block;font-size:.85rem;color:var(--gr800);font-weight:600}
.upsell-badge .num{color:var(--g600)!important}

/* Streak-Stufen */
.streak-list{display:flex;flex-direction:column;gap:8px}
.streak-row{display:flex;align-items:center;gap:14px;background:var(--w);border:1px solid var(--gr200);border-radius:var(--r-m);padding:12px 16px}
.streak-badge{font-family:var(--mono);font-size:.82rem;font-weight:600;background:var(--g50);color:var(--g700);padding:4px 10px;border-radius:var(--r-s);min-width:62px;text-align:center;white-space:nowrap}
.streak-badge.gold{background:var(--g600);color:var(--w)}
.streak-reward{font-size:.88rem;color:var(--gr600)}

/* ========== DEMO (Lite-Vorschau) ========== */
.demo-section{background:var(--gr900);color:var(--w);padding:80px 0}
.demo-section.product-demo{padding-top:calc(var(--nav-h) + 60px)}
.demo-section h2{color:var(--w);text-align:center;margin-bottom:12px}
.demo-section .subline{text-align:center;color:var(--gr400);margin-bottom:48px;font-size:1.05rem}
.demo-wrap{background:var(--gr800);border-radius:var(--r-xl);border:1px solid rgba(255,255,255,.1);overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.demo-bar{display:flex;align-items:center;gap:8px;padding:14px 20px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.demo-dot{width:12px;height:12px;border-radius:50%}
.demo-dot:nth-child(1){background:#ff5f57}
.demo-dot:nth-child(2){background:#febc2e}
.demo-dot:nth-child(3){background:#28c840}
.demo-body{padding:24px;min-height:480px}

/* Lite-Demo KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.kpi{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-m);padding:18px}
.kpi .kpi-label{font-size:.72rem;color:var(--gr400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.kpi .kpi-val{font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--w)}
.kpi .kpi-val.red{color:var(--red)}
.kpi .kpi-val.green{color:var(--g400)}
.kpi .kpi-val.amber{color:var(--amber)}
.kpi .kpi-sub{font-size:.72rem;color:var(--gr500);margin-top:4px}

/* Lite-Demo Tabellen */
.demo-table-title{font-size:.9rem;font-weight:700;color:var(--w);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.demo-table{width:100%;border-collapse:collapse;margin-bottom:28px;font-size:.82rem}
.demo-table th{text-align:left;color:var(--gr400);font-weight:600;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.demo-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--gr300)}
.demo-table tr:hover td{background:rgba(255,255,255,.02)}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.72rem;font-weight:600;font-family:var(--mono)}
.pill-red{background:rgba(239,68,68,.15);color:#fca5a5}
.pill-amber{background:rgba(245,158,11,.15);color:#fcd34d}
.pill-green{background:rgba(34,197,94,.15);color:#86efac}
.pill-blue{background:rgba(59,130,246,.15);color:#93c5fd}

/* Lite-Demo WhatsApp-Vorschlag */
.demo-wa{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-m);padding:14px;margin:10px 0;font-size:.82rem;color:var(--gr300);line-height:1.5;position:relative}
.demo-wa::before{content:'WhatsApp-Vorschlag';position:absolute;top:-7px;left:12px;background:var(--g600);color:#fff;font-size:.58rem;font-weight:700;padding:1px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em}

/* Lite-Demo Blur-Overlay */
.demo-blur-row td{filter:blur(4px);user-select:none;-webkit-user-select:none}
.demo-cta-overlay{position:relative;margin-top:-20px;padding:32px;text-align:center;background:linear-gradient(180deg,rgba(31,41,55,0) 0%,rgba(31,41,55,.95) 30%,var(--gr800) 100%);border-radius:0 0 var(--r-m) var(--r-m)}
.demo-cta-overlay p{color:var(--gr300);margin-bottom:16px;font-size:.95rem}

/* WhatsApp-Highlight-Banner */
.wa-highlight{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-l);padding:32px;text-align:center;margin-top:48px}
.wa-highlight .wa-stat{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--g600);margin-bottom:4px}
.wa-highlight .wa-compare{font-size:.9rem;color:var(--gr500)}

/* ========== TRUST ========== */
.trust{text-align:center;padding:64px 0;border-top:1px solid var(--gr200)}
.trust-row{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;color:var(--gr500);font-size:.88rem}
.trust-item svg{width:20px;height:20px;color:var(--g500);flex-shrink:0}

/* ========== KONTAKT ========== */
.contact-section{background:var(--gr50);padding:80px 0}
.contact-form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.85rem;font-weight:600;color:var(--gr700)}
.form-group input,.form-group textarea{padding:12px 16px;border:1px solid var(--gr300);border-radius:var(--r-m);font-family:var(--sans);font-size:.95rem;color:var(--gr800);background:var(--w);transition:border-color .2s,box-shadow .2s;outline:none}
.form-group input:focus,.form-group textarea:focus{border-color:var(--g500);box-shadow:0 0 0 3px rgba(34,197,94,.1)}
.form-group textarea{min-height:120px;resize:vertical}
.contact-form .btn{align-self:flex-start;margin-top:8px}

/* ========== CTA-BANNER ========== */
.cta-banner{background:var(--g600);color:var(--w);text-align:center;padding:64px 0}
.cta-banner h2{color:var(--w);margin-bottom:16px;font-size:clamp(1.4rem,3vw,2rem)}
.cta-banner p{color:rgba(255,255,255,.85);margin-bottom:32px;font-size:1.05rem}

/* ========== CALL-SEITE ========== */
.call-hero{padding-top:calc(var(--nav-h) + 80px);padding-bottom:40px;text-align:center}
.call-hero .subline{font-size:1.1rem;color:var(--gr500);max-width:600px;margin:16px auto 0}
.pilot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:720px;margin:40px auto 0}
.pilot-card{display:flex;align-items:flex-start;gap:12px;text-align:left}
.pilot-icon{width:36px;height:36px;min-width:36px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;color:var(--g600)}
.pilot-card h4{font-size:.88rem;margin-bottom:2px}
.pilot-card p{font-size:.78rem;color:var(--gr500)}
.calendly-section{padding:40px 0 100px}
.calendly-wrap{max-width:800px;margin:0 auto;background:var(--w);border:1px solid var(--gr200);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);min-height:680px;display:flex;align-items:center;justify-content:center}
.calendly-ph{text-align:center;color:var(--gr400);padding:80px 40px}
.calendly-ph p{font-size:.9rem;margin-top:12px}
.calendly-ph code{display:block;margin-top:12px;font-family:var(--mono);font-size:.78rem;color:var(--gr500);background:var(--gr100);padding:8px 16px;border-radius:var(--r-s)}

/* ========== FOOTER ========== */
.footer{background:var(--gr900);color:var(--gr400);padding:40px 0;text-align:center;font-size:.85rem}
.footer a{color:var(--gr300);transition:color .2s}
.footer a:hover{color:var(--w)}

/* ========== MOBILES MENÜ ========== */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:1001}
.hamburger span{display:block;width:22px;height:2px;background:var(--gr700);margin:5px 0;border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ========== RESPONSIVE ========== */
@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  section{padding:64px 0}
  .hamburger{display:block}
  .nav-links{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--w);flex-direction:column;align-items:flex-start;padding:100px 32px 32px;gap:4px;border-left:1px solid var(--gr200);box-shadow:-10px 0 30px rgba(0,0,0,.1);transition:right .3s ease}
  .nav-links.open{right:0}
  .nav-links a{font-size:1rem;padding:12px 16px;width:100%}
  .features-grid{grid-template-columns:1fr}
  .feature-detail{grid-template-columns:1fr;gap:32px}
  .feature-detail.reversed{direction:ltr}
  .form-row{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .hero-buttons{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}
  .pilot-grid{grid-template-columns:1fr}
  .trust-row{flex-direction:column;gap:20px}
  .demo-body{min-height:400px}
  .kpi-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .kpi-grid{grid-template-columns:1fr}
  .demo-body{padding:16px}
}