/* Gratis-Rechner «Verkaufspreis aus Wareneinsatz»: Seitenschicht auf LeZo UI 2.0 (../lezo/lezo-ui.css wird vorher geladen).
   Eigenständig, damit die Seite als eigene Website laufen kann. Muster: stwe-kit/gratis-rechner/gratis.css (ST1). */

.seite{max-width:46rem;margin:0 auto;padding:var(--a8) var(--a5) 0}
.seite>h1{margin-top:0}

/* Tippflächen: Kopf- und Fusszeilen-Links mindestens 44 px hoch */
.kopf nav a{min-height:var(--tipp)}
.fuss nav a{display:flex;align-items:center;min-height:var(--tipp);padding:0}

.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Rechner */
.rechner section{margin:0 0 var(--a8)}
.rechner h2{margin-top:0}
.rechner .zeile{display:flex;flex-wrap:wrap;gap:var(--a3);align-items:flex-start;margin:0 0 var(--a2)}
.rechner .zeile .feld{margin:0 0 var(--a3);flex:1 1 14rem}
.rechner .zeile .feld.schmal{flex:1 1 9rem}
.rechner .knoepfe{display:flex;flex-wrap:wrap;gap:var(--a2);margin:var(--a3) 0}
.rechner fieldset.zutat{margin:0 0 var(--a4);padding:var(--a4) var(--a4) var(--a2);border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche)}
.rechner fieldset.zutat legend{padding:0 var(--a2);font-weight:700}
.rechner .ergebnis-karte .gross-zahl{font-size:var(--fs-l);margin:0 0 var(--a4)}
.rechner .ergebnis-karte .gross-zahl strong{font-size:1.6rem;font-variant-numeric:tabular-nums}
.rechner .ergebnis-karte h3{margin:var(--a5) 0 var(--a2)}
.rechner .ergebnis-ok{color:var(--ok);font-weight:700}
.rechner .ergebnis-rot{color:var(--fehler);font-weight:700}
.rechner .tabelle th[scope=row]{font-weight:500;color:var(--text)}
.rechner .tabelle td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rechner .tabelle td.stark{font-weight:700}
.rechner .meldung ul{margin:var(--a2) 0 0;padding-left:1.2rem}

/* Zubringer-Box zum Kit und FAQ */
.zubringer{background:var(--akzent-weich);border-color:var(--akzent-rand);margin:var(--a6) 0}
.zubringer p:last-child{margin-bottom:0}
.faq h3{margin-top:var(--a5)}

@media (max-width:700px){
  .seite{padding:var(--a5) var(--a4) 0}
}
@media (max-width:480px){
  .rechner .zeile .feld,.rechner .zeile .feld.schmal{flex:1 1 100%}
  .rechner fieldset.zutat{padding:var(--a3) var(--a3) var(--a1,4px)}
}