:root{
  --bg:#0f172a;
  --text:#e5e7eb;
  --muted:#b6c0d0;
  --line:rgba(255,255,255,.12);
  --red:#c71f1f;
  --red2:#a81414;
  --shadow: 0 10px 35px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 30% 0%, #18254a 0%, var(--bg) 60%);
  color:var(--text);
}
.wrap{max-width:1120px;margin:0 auto;padding:28px 18px 42px;}
.header{
  display:flex;gap:18px;align-items:center;padding:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:18px;box-shadow:var(--shadow);
}
.logo{width:260px;height:auto;border-radius:12px;flex:0 0 auto;}
.headText h1{margin:0;font-size:22px;line-height:1.2;}
.sub{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.4;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}
.card{
  border:1px solid var(--line);background:rgba(0,0,0,.18);
  border-radius:18px;padding:18px;box-shadow:var(--shadow);
}
.card h2{margin:0 0 14px;font-size:16px;letter-spacing:.2px;opacity:.95;}
.form{display:flex;flex-direction:column;gap:10px;}
.row{
  display:grid;grid-template-columns:1fr 1.25fr;gap:10px;align-items:center;
  padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);
}
.row span{color:var(--muted);font-size:13px;line-height:1.2;}
input,select{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);color:var(--text);outline:none;font-size:14px;
}
.btn{
  margin-top:8px;width:100%;border:0;padding:14px 16px;border-radius:16px;
  background:linear-gradient(180deg, var(--red), var(--red2));
  color:#fff;font-size:16px;font-weight:800;cursor:pointer;
}
.btn:hover{filter:brightness(1.05);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.resultBox,.breakdownBox{
  border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.03);
}
.kpi{font-size:16px;font-weight:800;margin-bottom:10px;}
.small{margin:0;color:var(--muted);font-size:12px;line-height:1.35;}
.breakdownBox pre{margin:10px 0 0;white-space:pre-wrap;font-size:12px;line-height:1.35;color:#d6deee;}
.disclaimer{
  margin-top:14px;padding:12px 14px;border:1px dashed rgba(255,255,255,.2);
  border-radius:14px;color:var(--muted);font-size:12px;line-height:1.45;
}
.footer{margin-top:12px;color:rgba(255,255,255,.35);font-size:12px;}
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
  .two{grid-template-columns: 1fr}
  .row{grid-template-columns: 1fr}

  /* Header: Logo über Text statt daneben */
  .header{
    flex-direction: column;
    align-items: flex-start;
  }
  .logo{
    width: 260px;
    max-width: 100%;
  }
}