/* styles.css – minimalistisch, schwarz/weiß, modern */
/* Schriftgrößen ca. +30% */

:root{
  --bg:#fff;
  --fg:#111;
  --muted:#6b6b6b;
  --card:#f7f7f7;
  --line:#e5e5e5;
  --radius:16px;
  --transition: 260ms cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  /* 16px -> ~20.8px (gerundet 21px) */
  font:21px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--line);
}
/* 22px -> ~28.6px (gerundet 29px) */
.brand{ font-weight:900; letter-spacing:.3px; font-size:29px; }
/* 14px -> ~18.2px (gerundet 18px) */
.subtitle{ color:var(--muted); font-size:18px; }

.container{ max-width:1100px; margin:40px auto; padding:0 16px; }

.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: 0 10px 18px rgba(0,0,0,.04);
}

.steps-indicator{ display:flex; gap:10px; margin-bottom:18px; align-items:center; }
.step-dot{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  color:var(--muted); transition:var(--transition);
}
.step-dot.active{ background:#000; color:#fff; border-color:#000; }
.step-dot span{ font-weight:800; }

.wizard{
    position: relative;
    transition: height var(--transition);
    overflow-anchor: none;
}

.wizard .step{
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition);
    /* keine max-height hier */
}
.wizard .step.active{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Feldset-Margins neutralisieren (gegen visuelle Sprünge) */
.wizard fieldset{
    margin: 0;
    padding: 0;
    border: 0;
}

legend{ font-weight:900; margin-bottom:6px; letter-spacing:.2px; }
.hint{ color:var(--muted); margin:6px 0 18px; }

.grid-2{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:14px;
}

.field{ display:flex; flex-direction:column; gap:6px; }
.label{ font-weight:700; }

/* Eingabefelder erben jetzt die größere Body-Schriftgröße */
select, input[type="text"], input[type="number"]{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  background:#fff; color:#111; outline:none; transition:var(--transition);
}
select:focus, input:focus{ border-color:#000; box-shadow:0 0 0 3px rgba(0,0,0,.08); }

.nav{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

.btn{
  appearance:none; border:none; background:#000; color:#fff;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  font-weight:800; transition:var(--transition);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.ghost{ background:#fff; color:#000; border:1px solid #000; }

.action-row{ display:flex; gap:10px; margin:6px 0 12px; }

.muted{ color:var(--muted); }
/* 13px -> ~16.9px (gerundet 17px) */
.small{ font-size:17px; }

.score-cards{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:12px; margin-top:8px;
}
.score-card{
  border:1px solid var(--line); border-radius:12px; padding:12px;
  background:var(--card);
}
.score-title{ font-weight:800; margin-bottom:4px; }
/* 28px -> ~36.4px (gerundet 36px) */
.score-value{ font-size:36px; font-weight:900; letter-spacing:.5px; }
/* 13px -> ~17px */
.score-desc{ color:var(--muted); font-size:17px; }

.overall{
  display:flex; align-items:center; justify-content:space-between;
  border:2px solid #000; border-radius:14px; padding:12px 14px; margin-top:12px;
  background:#fff;
}
.overall-label{ font-weight:900; }
/* 34px -> ~44.2px (gerundet 44px) */
.overall-value{ font-size:44px; font-weight:900; }

.hidden{ display:none; }

.app-footer{
  margin:40px auto 24px; text-align:center; color:var(--muted);
}

/* Summary Panel */
.summary-panel{
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    background:var(--card);
    margin-top:12px;
}
.summary-title{
    font-weight:900;
    margin-bottom:8px;
}
.summary-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap:8px 14px;
}
/* 12px -> ~15.6px (gerundet 16px) */
.summary-grid .k{
    display:block;
    color:var(--muted);
    font-size:16px;
    margin-bottom:2px;
}
.summary-grid .v{
    font-weight:800;
}

/* Verhindert Scroll-Anker-Effekte und minimiert Layout-Shifts */
.wizard { overflow-anchor: none; }