.rb{background:var(--hell)}
.rnav{display:flex;align-items:center;justify-content:space-between;padding:24px var(--rand)}
.rnav .logo{color:var(--text)}
.zurueck{min-height:44px;display:inline-flex;align-items:center;font:500 15px/1 var(--sans);text-decoration:none}
.zurueck:hover{text-decoration:underline}
/* Links die Eingaben, rechts das Ergebnis, das beim Tippen mitläuft */
.rmain{max-width:1120px;margin:0 auto;padding:56px var(--rand) 120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:start}
.rmain h1{font:400 clamp(36px,4vw,56px)/1.06 var(--serif);letter-spacing:-.02em;text-wrap:balance;max-width:14ch}
.rsub{margin-top:16px;font:400 18px/1.5 var(--sans);color:var(--grau)}
.rfelder{margin-top:40px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(27,26,24,.06),0 8px 24px rgba(27,26,24,.06)}
.feld{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 24px;padding:20px 24px}
.feld+.feld{border-top:1px solid rgba(27,26,24,.1)}
.feld label{font:500 17px/1.35 var(--sans)}
.eing{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 14px;border:1.5px solid rgba(27,26,24,.22);border-radius:12px;background:var(--hell);transition:border-color .2s;width:150px;justify-content:flex-end}
.eing:focus-within{border-color:var(--text)}
.feld input[type=number]{width:72px;border:0;background:none;color:var(--text);font:500 22px/1 var(--sans);text-align:right;font-variant-numeric:tabular-nums;outline:none}
.einh{font:500 15px/1 var(--sans);color:var(--grau)}
.feld:has(input[aria-invalid=true]) .eing{border-color:var(--alarm-chip)}
.fehler{grid-column:1/-1;font:500 14px/1.4 var(--sans);color:#B3321F}
.fehler:empty{display:none}
.ergebnis{position:sticky;top:32px;background:var(--dunkel);color:var(--hell);border-radius:20px;padding:36px}
.erg-kicker{font:500 14px/1 var(--sans);color:rgba(246,244,240,.6)}
.erg-zahl{margin-top:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
#ergZahl{font:400 clamp(64px,7vw,96px)/.95 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.erg-einh{font:400 28px/1 var(--serif);color:rgba(246,244,240,.8)}
.erg-band{display:grid;grid-template-columns:1fr 1fr;margin-top:28px;border-top:1px solid rgba(246,244,240,.14);border-bottom:1px solid rgba(246,244,240,.14)}
.erg-band div{padding:16px 0}.erg-band div+div{border-left:1px solid rgba(246,244,240,.14);padding-left:20px}
.erg-band dt{font:500 13px/1.3 var(--sans);color:rgba(246,244,240,.6)}
.erg-band dd{margin:6px 0 0;font:500 24px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.erg-fuss{margin-top:12px;font:400 13px/1.4 var(--sans);color:rgba(246,244,240,.5)}
.ergebnis.leer #ergZahl,.ergebnis.leer dd{opacity:.35}
.schritt{margin-top:36px;padding-top:28px;border-top:1px solid rgba(246,244,240,.14)}
.schritt h2{font:400 26px/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.schritt .btn{margin-top:20px;width:100%}
@media (max-width:900px){.rmain{grid-template-columns:minmax(0,1fr);gap:32px}.ergebnis{position:static}}
@media (max-width:760px){.rnav{padding:16px 20px}.rmain{padding:28px 16px 80px}.feld{grid-template-columns:1fr;padding:16px 18px}.eing{width:100%}.feld input[type=number]{width:100%;text-align:left}.ergebnis{padding:28px 22px}}
/* Regler unter jeder Zeile */
.regler{grid-column:1/-1;width:100%;height:28px;margin:4px 0 0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;--p:50%}
.regler::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--text) var(--p),rgba(27,26,24,.12) var(--p))}
.regler::-moz-range-track{height:6px;border-radius:999px;background:rgba(27,26,24,.12)}
.regler::-moz-range-progress{height:6px;border-radius:999px;background:var(--text)}
.regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;border:2px solid var(--text);box-shadow:0 2px 6px rgba(27,26,24,.2)}
.regler::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--text)}
.regler:focus-visible{outline:2px solid var(--akzent);outline-offset:4px;border-radius:999px}
@media (max-width:760px){
  .rmain h1{max-width:none}
  .feld{grid-template-columns:1fr auto;align-items:center}
  .eing{width:120px}
  .feld input[type=number]{width:100%;text-align:right}
}
/* Dreistellige Werte mit Einheit passen ins Feld, der Regelknopf bleibt am Ende ganz sichtbar */
.eing{width:auto;min-width:120px}
.feld input[type=number]{width:3.4ch}
.regler{width:calc(100% - 4px);margin-inline:2px}
.regler::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8px}
@media (max-width:760px){.eing{width:auto;min-width:110px}.feld input[type=number]{width:4ch}}
/* Pfeile im Zahlenfeld weg, die Regler ersetzen sie */
.feld input[type=number]{width:4ch;-moz-appearance:textfield;appearance:textfield}
.feld input[type=number]::-webkit-inner-spin-button,.feld input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}