/* Skonto-Rechner: Formular und Ergebnisliste. stil.css hat keine Eingabefelder, deshalb diese wenigen Regeln
   in derselben Farbwelt (Variablen aus stil.css). */
.rechner__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.rechner__feld { display: flex; flex-direction: column; gap: 6px; }
.rechner__feld label { font-size: 15px; font-weight: 600; color: var(--tinte); }
.rechner__optional { font-weight: 400; color: var(--leise); }
.rechner__eingabe { position: relative; display: flex; align-items: center; }
.rechner__feld input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--linie-stark); border-radius: 6px; background: var(--papier); color: var(--tinte); font: inherit; font-size: 16px; }
.rechner__eingabe input { padding-right: 72px; }
.rechner__feld input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.rechner__einheit { position: absolute; right: 12px; font-size: 15px; color: var(--leise); pointer-events: none; }
.rechner__hilfe { font-size: 13px; color: var(--leise); }
.rechner__hinweis { margin-top: 24px; padding: 12px 16px; border-radius: 8px; background: var(--flaeche); color: var(--tinte-2); font-size: 15px; }
.rechner__ergebnis { margin-top: 28px; padding: 24px 28px; border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--papier); }
.rechner__liste { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; font-size: 16px; }
.rechner__liste dt { color: var(--leise); }
.rechner__liste dd { margin: 0; color: var(--tinte); font-feature-settings: "tnum" 1; }
.rechner__haupt { font-weight: 600; }
.rechner__zusatz { margin-left: 6px; font-size: 14px; color: var(--leise); }
.rechner__daten { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
.rechner__einordnung { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--tinte-2); }

@media (max-width: 720px) {
  .rechner__felder { grid-template-columns: 1fr; gap: 16px; }
  .rechner__ergebnis { padding: 20px 16px; }
  .rechner__liste { grid-template-columns: 1fr; gap: 2px; }
  .rechner__liste dd + dt { margin-top: 10px; }
  .rechner__zusatz { display: block; margin-left: 0; }
}
/* hidden gegen die display-Regeln oben durchsetzen (Daten nur mit Rechnungsdatum, Hinweis nur bei Fehlern) */
.rechner [hidden] { display: none; }