/* ============================================================
   E-Rechnung erstellen – Gestaltung des Formulars
   Farben, Schrift und Abstände kommen aus stil.css; die Erklärkarten
   der Selbstprüfung aus werkzeuge/e-rechnung-pruefen/stil.css.
   ============================================================ */
.es-schritte{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
.es-schritt{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;padding:1.4rem 1.5rem 1.5rem;min-width:0}
.es-schritt > h2{font-size:1.25rem;margin:0 0 .9rem;display:flex;gap:.6rem;align-items:baseline}
.es-schritt > h2 .nr{color:var(--gruen-t);font-size:.82rem;font-weight:700;letter-spacing:.08em}
.es-schritt > p.erkl{color:var(--tinte-2);font-size:.93rem;margin:-.4rem 0 1rem}
.es-raster{display:grid;gap:.8rem 1rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.es-raster .es-feld{min-width:0}
.es-raster .breit{grid-column:1/-1}
.es-feld label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.25rem;color:var(--tinte)}
.es-feld label small{font-weight:400;color:var(--tinte-2)}
/* Auswahlkreise und Häkchen ausgenommen – sonst bekämen sie volle Breite und Rahmen
   und rutschten in den Auswahlknöpfen in eine eigene Zeile. */
.es-feld input:not([type="radio"]):not([type="checkbox"]),.es-feld select,.es-feld textarea{width:100%;font:inherit;font-size:.95rem;color:var(--tinte);
  padding:.55rem .7rem;background:var(--weiss);border:1px solid #C9D2CD;border-radius:8px}
.es-feld textarea{min-height:4.2rem;resize:vertical}
.es-feld input:focus,.es-feld select:focus,.es-feld textarea:focus{outline:2px solid var(--gruen-t);outline-offset:1px}
.es-feld input.fehlt{border-color:var(--signal);background:var(--signal-h)}
.es-feld .hilfe{font-size:.8rem;color:var(--tinte-2);margin:.3rem 0 0;line-height:1.45}
.es-wahl{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .9rem}
/* Die Knöpfe sind normale Textzeilen (inline-block), nicht selbst Flex-Container:
   als Flex-Container brachen die Wörter einzeln um ("an / einem / Tag"), weil Text,
   Kreis und Zusatz getrennt gemessen wurden. flex:0 0 auto – der Knopf schrumpft nicht. */
.es-wahl label{display:inline-block;flex:0 0 auto;max-width:100%;line-height:1.35;
  border:1px solid var(--linie);border-radius:8px;padding:.5rem .8rem;cursor:pointer;font-size:.93rem;font-weight:560;background:var(--weiss)}
.es-wahl label small{font-weight:400;color:var(--tinte-2)}
.es-wahl label:has(input:checked){border-color:var(--gruen-t);background:var(--gruen-h);color:var(--gruen-d)}
.es-wahl label:has(input:disabled){opacity:.55;cursor:not-allowed}
.es-wahl input{margin:0 .35rem 0 0;vertical-align:-.1em;accent-color:var(--gruen-t)}
.es-haken{display:flex;align-items:flex-start;gap:.6rem;font-size:.93rem;margin:.9rem 0}
.es-haken input{width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:var(--gruen-t);flex:none}
[hidden]{display:none !important}

/* Stammdaten-Leiste und Hinweise */
.es-leiste{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:0 0 .9rem}
.es-leiste label.es-knopf-klein{display:inline-block;cursor:pointer}
.es-leiste .es-klein{flex:1 1 100%}
.es-meldung{background:var(--gruen-h);border-left:3px solid var(--gruen-t);border-radius:0 10px 10px 0;padding:.7rem .9rem;font-size:.93rem;margin:0 0 .9rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.es-meldung.warnung{background:var(--signal-h);border-color:var(--signal)}
.es-meldung .akt{display:flex;gap:.4rem;flex-wrap:wrap}
.es-kunden{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin:0 0 .9rem}
.es-kunden .es-feld{flex:1 1 16rem}

/* Positionen */
.es-tab-wrap{overflow-x:auto;border:1px solid var(--linie);border-radius:10px}
.es-tab{border-collapse:collapse;width:100%;min-width:52rem;font-size:.9rem}
.es-tab th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tinte-2);text-align:left;padding:.5rem .5rem;background:var(--grau);border-bottom:1px solid var(--linie)}
.es-tab td{padding:.35rem .4rem;border-bottom:1px solid var(--linie);vertical-align:top}
.es-tab td input,.es-tab td select{width:100%;font:inherit;font-size:.9rem;padding:.45rem .55rem;border:1px solid #C9D2CD;border-radius:6px;background:var(--weiss)}
.es-tab td input:focus,.es-tab td select:focus{outline:2px solid var(--gruen-t);outline-offset:1px}
.es-tab td.zahl input{text-align:right;font-variant-numeric:tabular-nums}
.es-tab td.netto{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap;padding-top:.75rem}
.es-tab td.akt{white-space:nowrap;padding-top:.5rem}
.es-tab .weg{background:none;border:1px solid var(--linie);border-radius:6px;font:inherit;font-size:.8rem;padding:.3rem .55rem;cursor:pointer;color:var(--tinte-2)}
.es-tab .weg:hover{background:var(--signal-h);color:var(--signal);border-color:var(--signal)}
.es-tab .nur-regel{display:none}
.steuerfall-regel .es-tab .nur-regel{display:table-cell}
.es-tab-akt{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.es-knopf-klein{background:var(--weiss);border:1px solid var(--linie);border-radius:8px;font:inherit;font-size:.9rem;font-weight:600;padding:.5rem .9rem;cursor:pointer;color:var(--tinte)}
.es-knopf-klein:hover{background:var(--grau)}
.es-knopf-klein.rot{color:var(--signal);border-color:#E7C7B0}
.es-knopf-klein.rot:hover{background:var(--signal-h);border-color:var(--signal)}

/* Summen */
.es-summen{margin-top:1rem;margin-left:auto;max-width:24rem;border:1px solid var(--linie);border-radius:10px;padding:.8rem 1rem;font-size:.95rem}
.es-summen div{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0}
.es-summen div.brutto{border-top:2px solid var(--tinte);margin-top:.3rem;padding-top:.5rem;font-weight:750;font-size:1.05rem}
.es-summen span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.es-summen.fehler{color:var(--signal);background:var(--signal-h);border-color:var(--signal)}
.es-summen.fehler span:last-child{white-space:normal;text-align:right}
.es-summen span{min-width:0;overflow-wrap:anywhere}

/* Prüfen und Herunterladen */
.es-pruefen-akt{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:.6rem 0 1rem}
.es-pruefen-akt .btn{cursor:pointer;font-family:inherit}
.es-fehlerliste{margin:.8rem 0 0;padding:.9rem 1.1rem 1rem 2rem;background:var(--signal-h);border-left:3px solid var(--signal);border-radius:0 10px 10px 0;font-size:.93rem}
.es-fehlerliste li{margin:.15rem 0}
.es-download{margin-top:1.2rem;background:var(--gruen-h);border:1px solid var(--gruen-t);border-radius:12px;padding:1.1rem 1.3rem}
.es-download h3{margin:0 0 .5rem}
.es-download p{margin:.4rem 0;font-size:.93rem}
.es-download .btn{cursor:pointer;font-family:inherit}
.es-download .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.es-klein{font-size:.82rem;color:var(--tinte-2)}

@media (max-width:760px){
  .es-tab-wrap{overflow:visible;border:none}
  .es-tab{min-width:0;display:block}
  .es-tab thead{display:none}
  .es-tab tbody{display:block}
  .es-tab tr{display:block;border:1px solid var(--linie);border-radius:10px;padding:.5rem .8rem .7rem;margin-bottom:.7rem;background:var(--weiss)}
  .es-tab td{display:flex;align-items:center;gap:.6rem;border:none;padding:.25rem 0}
  .es-tab td::before{content:attr(data-label);flex:0 0 6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tinte-2)}
  .es-tab td:first-child{flex-wrap:wrap}
  .es-tab td:first-child input{flex:1 1 100%}
  .es-tab td:first-child .p-beschr{margin-left:6.6rem}
  .es-tab td.netto{justify-content:flex-start}
  .es-tab td.akt::before{content:""}
  .steuerfall-regel .es-tab .nur-regel{display:flex}
  .es-summen{max-width:none}
}