/* Gratis-Rechner «Kosten nach Wertquote verteilen»: Seitenschicht auf LeZo UI 2.0 (../lezo/lezo-ui.css wird vorher geladen).
   Eigenständig, damit die Seite als eigene Website laufen kann. Die Regeln für Rechner und Blätter entsprechen kit/style.css (Stand 07.11.2026). */

.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}

/* 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-end;margin:0 0 var(--a4)}
.rechner .zeile .feld{margin:0;flex:1 1 11rem}
.rechner .knoepfe{display:flex;flex-wrap:wrap;gap:var(--a2);margin:var(--a3) 0}
.rechner .tabelle input{width:100%;min-width:5.5rem;min-height:var(--tipp);box-sizing:border-box;font:inherit;padding:6px 8px;border:1px solid var(--linie-stark);border-radius:var(--r-m);background:var(--flaeche);color:var(--ink)}
.rechner .tabelle input.num{text-align:right}
.rechner .tabelle td.weg{width:1%;white-space:nowrap}
.rechner .plus{color:var(--fehler);font-weight:600}
.rechner .minus{color:var(--ok);font-weight:600}
.rechner .ergebnis-ok{color:var(--ok);font-weight:700}
.rechner .ergebnis-rot{color:var(--fehler);font-weight:700}
.rechner .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rechner .scroll table{min-width:34rem}
.rechner .tabelle{overflow-x:auto}
.rechner .tabelle table{min-width:30rem;width:100%;border-collapse:collapse}
.rechner .tabelle th,.rechner .tabelle td{border:1px solid var(--linie);padding:var(--a2) var(--a3);text-align:left;vertical-align:top}
.rechner .tabelle th{background:var(--flaeche-2);color:var(--text-2);font-weight:600}

/* Blatt für Druck und PDF */
.blatt{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);padding:var(--a6);margin:0 0 var(--a5)}
.blatt h3{margin-top:0}
.blatt h4{margin:var(--a5) 0 var(--a2)}
.blatt table{width:100%;border-collapse:collapse;margin:var(--a3) 0;font-size:var(--fs-s)}
.blatt th,.blatt td{border:1px solid var(--linie);padding:var(--a2) var(--a3);text-align:left;vertical-align:top}
.blatt th{background:var(--flaeche-2);font-weight:600}
.blatt .r,.blatt td.r,.blatt th.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.blatt .summe td,.blatt .summe th{font-weight:700;background:var(--flaeche-2)}
.blatt p{margin:0 0 var(--a3)}
.blatt .small{font-size:var(--fs-s)}

/* 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}
.zubringer a.textlink{display:inline-flex;align-items:center;min-height:var(--tipp);font-weight:600}
.faq h3{margin-top:var(--a5)}

@media (max-width:700px){
  .seite{padding:var(--a5) var(--a4) 0}
  .blatt{padding:var(--a4);overflow-x:auto}
}
@media (max-width:480px){
  .rechner .zeile .feld{flex:1 1 100%}
}

/* Druck: A4, schwarz auf weiss. Kopf, Fuss und Eingaben tragen die Klasse noprint. */
@page{size:A4;margin:18mm}
@media print{
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .noprint{display:none!important}
  .seite{max-width:none;padding:0}
  .btn{display:none!important}
  .rechner .scroll{overflow:visible}
  .rechner .scroll table{min-width:0}
  .blatt{border:0;border-radius:0;padding:0;margin:0;background:none}
  .blatt h3,.blatt h4{color:#000;break-after:avoid}
  .blatt th,.blatt td{border:1px solid #999;color:#000}
  .blatt th{background:#eee}
  .blatt tr{break-inside:avoid}
  .rechner .plus,.rechner .minus{color:#000}
}

/* Tippflaechen auf kleinen Bildschirmen: Knoepfe mind. 44 px (S-GR1, 07.11.) */
@media (max-width:600px){.rechner .btn.klein{min-height:var(--tipp)}}