/* LW Haushaltsrechner v1.1.0 – Light UI aligned with Tilgungsrechner */
.lw-hr-wrapper{
  --lw-hr-accent:#BD9A68;
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --line:#e9e9ee;
  --ok:#10b981;
  --warn:#ef4444;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent 140px);
  color: var(--text);
  padding: clamp(14px, 2vw, 24px);
  border-radius: 0;
}

/* Card */
.lw-hr-wrapper .lw-hr-card{
  background: var(--bg);
  border:1px solid var(--line);
  border-radius: 18px;
  padding: clamp(12px, 2vw, 18px);
  box-shadow: 0 10px 30px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
}
.lw-hr-hero{border-left:6px solid var(--lw-hr-accent);margin-bottom:12px; background: linear-gradient(180deg, rgba(0,0,0,0.01), transparent);}
.lw-hr-hero h2{margin:0 0 6px 0;font-size:clamp(1.2rem, 1.1rem + .5vw, 1.6rem);line-height:1.25}
.lw-hr-intro{margin:0;color:var(--muted);font-size:clamp(.92rem, .88rem + .2vw, 1.05rem)}

.lw-hr-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:850px){.lw-hr-grid{grid-template-columns:repeat(2,1fr)}.lw-hr-result{grid-column:1/-1}}
.lw-hr-card h3{margin-top:0;margin-bottom:8px;font-size:1.05rem;color:#222}

/* Fields */
.lw-hr-field{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.lw-hr-field label{font-size:.92rem;color:#333}
.lw-hr-field input{
  background:#fafafe;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 12px;
  outline:none;
  -webkit-appearance:none; appearance:none;
}
.lw-hr-field input:focus{
  border-color: var(--lw-hr-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lw-hr-accent) 20%, transparent);
}

/* Buttons */
.lw-hr-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.lw-hr-btn{
  background: var(--lw-hr-accent);
  color:#fff;border:none;border-radius:999px;
  padding:12px 16px;font-weight:700;cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease, opacity .15s;
}
.lw-hr-btn:active{transform:scale(.98)}
.lw-hr-btn.ghost{background:transparent;border:1px solid var(--lw-hr-accent);color:var(--lw-hr-accent)}

/* Result KPI + bars */
.lw-hr-kpi{display:flex;align-items:baseline;gap:10px}
.lw-hr-kpi-value{font-size:2rem;font-weight:800}
.lw-hr-kpi-label{color:var(--muted)}
.lw-hr-muted{opacity:.75}

.lw-hr-bars{display:grid;gap:8px;margin-top:10px}
.lw-hr-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:#f7f7fb;border:1px solid var(--line);
  padding:10px;border-radius:12px
}
.lw-hr-bar span{color:#444;font-size:.92rem}
.lw-hr-bar strong{font-variant-numeric:tabular-nums}

/* Warning / hint (light yellow style) */
.lw-hr-warning{
  margin-top:10px;background:#fff3cd;border:1px solid #ffe69c;
  padding:10px 12px;border-radius:12px;color:#664d03
}

/* Note under calculator */
.lw-hr-note{margin-top:14px;color:var(--muted);font-size:.9rem}

/* Accessibility */
.lw-hr-sr{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}