:root{
  --bg:#08090c;
  --sf:#0f1117;
  --bd:#1e2130;
  --tx:#e0e2ec;
  --tx2:#8b8fa3;
  --ac:#c4a35a;
  --ac2:#a88b3d;
  --green:#1D9E75;
  --blue:#378ADD;
  --coral:#D85A30;
  --red:#ef4444;
  --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font-family:-apple-system,'SF Pro Text','Segoe UI',sans-serif;line-height:1.6;min-height:100vh}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}

.container{max-width:1000px;margin:0 auto;padding:0 24px}

nav{padding:18px 0;border-bottom:1px solid var(--bd);position:sticky;top:0;background:rgba(8,9,12,0.92);backdrop-filter:blur(12px);z-index:50}
nav .container{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-size:1.3rem;font-weight:700;letter-spacing:-.5px}
.logo a{color:var(--tx)}
.logo span{color:var(--ac)}
.nav-right{display:flex;gap:14px;align-items:center;font-size:.85rem}
.nav-right a{color:var(--tx2)}

.lang-switch{position:relative}
.lang-switch button{background:var(--sf);border:1px solid var(--bd);color:var(--tx);padding:5px 11px;border-radius:6px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:6px}
.lang-switch button:hover{border-color:var(--ac)}
.lang-switch .menu{display:none;position:absolute;right:0;top:36px;background:var(--sf);border:1px solid var(--bd);border-radius:8px;min-width:180px;max-height:340px;overflow-y:auto;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.lang-switch.open .menu{display:block}
.lang-switch .menu a{display:block;padding:8px 12px;font-size:.8rem;color:var(--tx);border-bottom:1px solid var(--bd)}
.lang-switch .menu a:last-child{border-bottom:none}
.lang-switch .menu a:hover{background:var(--bd);text-decoration:none}
.lang-switch .menu a.current{color:var(--ac);font-weight:600}
.lang-switch .menu a .pending{color:var(--tx2);font-size:.7rem;margin-left:6px}

.hero{text-align:center;padding:36px 0 24px}
.hero h1{font-size:2.2rem;font-weight:800;letter-spacing:-.5px;margin-bottom:12px;line-height:1.2}
.hero h1 .gold{color:var(--ac)}
.hero p.lead{font-size:1rem;color:var(--tx2);max-width:600px;margin:0 auto 16px}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.badge{background:var(--sf);border:1px solid var(--bd);padding:5px 14px;border-radius:20px;font-size:.85rem;color:var(--tx2)}
.badge strong{color:var(--tx)}

section{padding:28px 0}
section h2{font-size:1.5rem;font-weight:700;margin-bottom:8px}
section .subtitle{color:var(--tx2);margin-bottom:32px;font-size:.95rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);padding:24px;text-align:center}
.card.featured{border-color:var(--ac)}
.card .plan-name{font-size:.85rem;color:var(--tx2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.card .price{font-size:2rem;font-weight:700;margin-bottom:4px}
.card .price span{font-size:.9rem;font-weight:400;color:var(--tx2)}
.card .detail{font-size:.9rem;color:var(--tx2);margin-bottom:16px;min-height:1.2em}
.card .effective{font-size:.8rem;color:var(--ac);margin-bottom:16px;min-height:1.2em}
.card ul{list-style:none;text-align:left;font-size:.85rem;color:var(--tx2);margin-bottom:16px}
.card ul li{padding:4px 0}
.card ul li::before{content:"✓  ";color:var(--green)}

.btn{display:block;width:100%;padding:10px;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s,border .2s}
.btn-gold{background:var(--ac);color:var(--bg)}.btn-gold:hover{background:var(--ac2)}
.btn-outline{background:transparent;border:1px solid var(--bd);color:var(--tx)}.btn-outline:hover{border-color:var(--ac);color:var(--ac)}
.btn:disabled{opacity:.5;cursor:wait}

.signup-row{display:flex;gap:8px;margin-top:8px}
.signup-row input{flex:1;padding:8px 12px;border:1px solid var(--bd);border-radius:6px;background:var(--bg);color:var(--tx);font-size:.85rem}
.signup-row input:focus{border-color:var(--ac);outline:none}
.signup-row button{white-space:nowrap;width:auto;padding:8px 14px}
.signup-result{font-size:.8rem;margin-top:8px;min-height:1.2em}

.chart-section{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);padding:32px;margin-bottom:20px}
.chart-wrap{position:relative;width:100%;height:420px;margin:24px 0}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:.8rem;color:var(--tx2);margin-top:12px}
.legend span{display:flex;align-items:center;gap:5px}
.legend .dot{width:10px;height:10px;border-radius:2px}

.dsgvo-box{background:rgba(29,158,117,0.08);border:1px solid rgba(29,158,117,0.25);border-radius:var(--radius);padding:24px;margin:24px 0}
.dsgvo-box h3{color:var(--green);font-size:1rem;margin-bottom:8px}
.dsgvo-box p{color:var(--tx2);font-size:.9rem;line-height:1.7}

.api-demo{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius);padding:24px;margin:18px 0}
.api-demo h3{margin-bottom:12px;font-size:1rem}
.api-demo pre{background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:16px;overflow-x:auto;font-size:.8rem;color:var(--ac);line-height:1.6;font-family:ui-monospace,Menlo,Consolas,monospace}
.api-demo .response{color:var(--green)}

.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

footer{border-top:1px solid var(--bd);padding:30px 0;margin-top:40px;text-align:center;font-size:.8rem;color:var(--tx2)}
footer .links{margin-top:8px}
footer a{color:var(--ac);margin:0 8px}

.translation-notice{background:rgba(196,163,90,0.1);border:1px solid var(--ac);border-radius:var(--radius);padding:14px 18px;margin:20px 0;font-size:.85rem;color:var(--tx2)}
.translation-notice strong{color:var(--ac)}

@media(max-width:600px){
  .container{padding:0 16px}
  .hero h1{font-size:1.7rem}
  nav .container{flex-direction:column;align-items:stretch}
  .nav-right{justify-content:center;flex-wrap:wrap}
}