:root{
  --brand:#D7DD1F;   /* Gelb */
  --bg:#3D3A37;      /* Hintergrund */
  --line:rgba(255,255,255,.25);
  --ink:#ffffff;
  --ink-dim:#eeeeee;
  --panel:#2c2a28;
}

/* Basis */
html,body{
  height:100%;
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden; /* horizontales Scrollen verhindern */
}

/* Wrapper bündig */
.wrap{
  width:100%;
  max-width:none;      /* volle Breite */
  margin:0 auto;
  padding:0;           /* bündig mit restlichem Seiten-Content */
}

/* Titelbereich */
.title{margin:0 0 30px 0}
.title h1{margin:0 0 6px 0;font-size:28px;color:var(--ink)}
.title p{margin:0 0 24px 0;color:var(--ink-dim)}

/* Kalkulator-Block */
.kalkulator{
  background:var(--bg);
  border-radius:0;
  padding:0;
  width:100%;
}

/* Fortschritt */
.progress{
  height:8px;
  background:var(--panel);
  border:0;
  border-radius:0;
  overflow:hidden;
  margin:0 0 20px 0;
}
.progress>div{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#000,var(--brand));
  transition:width .25s;
}

/* Steps */
.step{
  display:none;
  text-align:left;
  padding:20px 0;
  border-bottom:1px dashed var(--line);
}
.step.active{display:block}
.step h2{
  font-size:18px;
  margin:0 0 14px 0;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* Reihen */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed var(--line);
}
.row:last-child{border-bottom:0}
.money{font-variant-numeric:tabular-nums}

input[type="number"]{
  width:120px;
  padding:10px;
  border-radius:0;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  box-sizing:border-box;
}
input[type="checkbox"]{transform:scale(1.15)}

/* Navigation */
.nav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:16px 0;
}
button{
  cursor:pointer;
  padding:10px 14px;
  border-radius:0;
  background:var(--brand);
  color:#000;
  border:0;
  font-weight:700;
}
button.ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
}

/* Zusammenfassung unten */
.summary{
  padding:20px 0;
  margin-top:36px; /* extra Abstand zwischen Kalkulator & Summe */
}
.summary h2{
  margin:0 0 14px 0;
  font-size:18px;
  text-transform:uppercase;
}
.line{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px dashed var(--line);
}
.total{
  font-size:22px;
  font-weight:700;
}

/* Highlight der Gesamtsumme */
.total-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  margin-top:10px;
  background:var(--brand);
  color:#000;
  font-weight:800;
  font-size:22px;
  border-radius:0;
  width:100%;
  box-sizing:border-box; /* verhindert Überbreite */
}