/* Zuladungsrechner Wohnmobil (camping.domain-root.de; T41, 29.10.2026). Rahmen, Felder und Knöpfe aus domainroot.css
   (.dr-werkzeug, .dr-feld, .dr-btn, .dr-tabelle); Farben nur über die Variablen des Hosts. Druckansicht: Formular und
   Knöpfe blendet domainroot.css aus, gedruckt werden Ampel, Rechnung und Hinweise. */
.dr-zl-form { grid-template-columns: minmax(0, 1fr); align-items: start; }
.dr-zl-gruppe { border: 1px solid var(--dr-linie); border-radius: 12px; padding: .7rem .95rem .85rem; margin: 0; min-width: 0; }
.dr-zl-gruppe legend { font-weight: 700; font-size: .95rem; padding: 0 .3rem; }
.dr-main .prose .dr-zl-gruppe > p.dr-klein, .dr-zl-gruppe > p.dr-klein { margin: 0 0 .6rem; color: var(--dr-tinte-2); }
.dr-zl-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.dr-zl-felder .dr-feld input { width: 100%; }
.dr-zl-form input[aria-invalid="true"] { border-color: var(--dr-warn); }

.dr-main .prose .dr-zl-liste, .dr-zl-liste { list-style: none; margin: 0; padding: 0; }
.dr-main .prose .dr-zl-zeile, .dr-zl-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; margin: 0; padding: .55rem 0; border-top: 1px solid var(--dr-linie); }
.dr-zl-zeile:first-child { border-top: 0; }
.dr-zl-zeile::before { content: none !important; }
.dr-zl-check { display: flex; gap: .55rem; align-items: center; min-height: 44px; min-width: 12rem; flex: 1 1 12rem; font-weight: 700; cursor: pointer; }
.dr-zl-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--dr-marke); flex: none; margin: 0; }
.dr-zl-marke { align-self: center; font-size: .75rem; font-weight: 700; padding: .1rem .55rem; border-radius: 99px; border: 1px solid var(--dr-linie-2); background: var(--dr-flaeche); color: var(--dr-tinte-2); }
.dr-zl-marke--schaetz { border-color: var(--dr-vorsicht-linie); background: var(--dr-vorsicht-tint); color: var(--dr-vorsicht); }
.dr-zl-mini { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; font-weight: 600; }
.dr-zl-mini input { width: 6.5rem; font: inherit; font-size: 1rem; padding: .5rem .65rem; border-radius: 8px; border: 1.5px solid var(--dr-linie-2); background: var(--dr-grund); color: var(--dr-tinte); }
.dr-zl-mini input:focus { border-color: var(--dr-marke); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dr-akzent) 22%, transparent); }
.dr-zl-mini--name { flex: 1 1 14rem; }
.dr-zl-mini--name input { width: 100%; }

.dr-main .prose .dr-zl-fehler, .dr-zl-fehler { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid var(--dr-warn-linie); border-radius: 10px; background: var(--dr-warn-tint); color: var(--dr-warn); font-weight: 600; }
.dr-main .prose .dr-zl-fehler p, .dr-main .prose .dr-zl-fehler ul { margin: 0 0 .3rem; }

.dr-zl-ergebnis { overflow-wrap: anywhere; }
.dr-main .prose .dr-zl-leer, .dr-zl-leer { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: var(--dr-flaeche); border: 1px solid var(--dr-linie); color: var(--dr-tinte-2); }
.dr-zl-druckkopf { display: none; }
.dr-zl-ampel { margin: 0 0 1rem; padding: .8rem 1rem; border: 2px solid var(--dr-linie-2); border-left-width: 8px; border-radius: 12px; background: var(--dr-flaeche); }
.dr-main .prose .dr-zl-ampel p { margin: 0 0 .3rem; }
.dr-main .prose .dr-zl-ampel p:last-child { margin: 0; }
.dr-main .prose .dr-zl-ampel-titel, .dr-zl-ampel-titel { font-size: 1.3rem; font-weight: 800; line-height: 1.3; }
.dr-zl-ampel--gruen { border-color: var(--dr-tipp-linie); border-left-color: var(--dr-tipp); background: var(--dr-tipp-tint); }
.dr-zl-ampel--gruen .dr-zl-ampel-titel { color: var(--dr-tipp); }
.dr-zl-ampel--gelb { border-color: var(--dr-vorsicht-linie); border-left-color: var(--dr-vorsicht); background: var(--dr-vorsicht-tint); }
.dr-zl-ampel--gelb .dr-zl-ampel-titel { color: var(--dr-vorsicht); }
.dr-zl-ampel--rot { border-color: var(--dr-warn-linie); border-left-color: var(--dr-warn); background: var(--dr-warn-tint); }
.dr-zl-ampel--rot .dr-zl-ampel-titel { color: var(--dr-warn); }
.dr-zl-ampel a { font-weight: 700; }
.dr-zl-zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dr-zl-tabelle tfoot th, .dr-zl-tabelle tfoot td { border-top: 2px solid var(--dr-linie-2); }
.dr-main .prose .dr-zl-hinweise, .dr-zl-hinweise { margin: 1rem 0 0; font-size: .95rem; }

@media (max-width: 640px) {
    .dr-zl-felder { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .dr-zl-druckkopf { display: block; font-weight: 800; font-size: 13pt; margin: 0 0 .5rem; }
    .dr-zl-ampel { background: #fff !important; border-color: #000 !important; }
    .dr-zl-ampel-titel { color: #000 !important; }
}