/* Zaehlerstandsmeldung in der Gestaltung "Tiefenwasser" (Zustimmungsportal). Ergaenzt /static/css/site.css um die
   Bausteine der Zaehlerstandsmeldung; gleiche Farben, Abstaende und Typografie. */

/* Schritte: mit JavaScript ist immer nur einer sichtbar, ohne JavaScript stehen alle untereinander */
html.js .zs-step { display: none; }
html.js .zs-step.active { display: block; animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
html:not(.js) .zs-js-only { display: none; }
html:not(.js) .zs-step + .zs-step { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.zs-step h2 { margin-bottom: var(--s2); }

/* Schrittleiste: aktueller Schritt hervorgehoben */
.steps li.current { background: #fff; border-color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-deep), 0 10px 24px -18px rgba(11, 106, 153, .9); }
.steps li.current strong { color: var(--brand-deep); }
@media (max-width: 640px) {
  /* Auf dem Handy eine kompakte Leiste: Nummer oben, Stichwort darunter, der Zusatztext entfaellt */
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin-bottom: var(--s3); }
  .steps li { padding: .55rem .3rem .5rem; font-size: 0; line-height: 1.25; text-align: center; }
  .steps li::before { position: static; display: grid; margin: 0 auto .3rem; width: 1.7rem; height: 1.7rem; font-size: .85rem; }
  .steps li strong { font-size: .78rem; margin: 0; color: var(--brand-ink); hyphens: none; overflow-wrap: normal; }
}

/* Stammdaten des Zaehlers */
/* Beschriftung nie mitten im Wort trennen; lange Werte (E-Mail-Adressen) duerfen umbrechen */
table.zs-facts { table-layout: auto; }
table.zs-facts th { width: 1%; white-space: nowrap; background: var(--ice); font-size: .9rem; }
table.zs-facts td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.zs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
@media (max-width: 640px) { .zs-row { grid-template-columns: 1fr; } }
.zs-unit { position: relative; }
.zs-unit .input { padding-right: 3.6rem; }
.zs-unit span { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-family: var(--font-head); font-weight: 600; color: var(--muted); pointer-events: none; }
.input.zs-big { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.input[disabled] { background: var(--ice); color: var(--ink-soft); }

/* Fehlerhinweise (dieselben Klassen wie in der klassischen Gestaltung, setzt das Skript) */
.invalid-feedback { display: none; margin: .45rem 0 0; color: var(--err); font-size: .95rem; font-weight: 600; }
.input.is-invalid { border-color: var(--err); background: var(--err-bg); }
.is-invalid ~ .invalid-feedback, .zs-unit:has(.is-invalid) ~ .invalid-feedback { display: block; }
.check:has(.is-invalid) { border-color: var(--err); background: var(--err-bg); }
.check:has(.is-invalid) + .invalid-feedback { display: block; margin: -.5rem 0 var(--s2); }

.zs-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.zs-actions .btn-primary { flex: 1 1 auto; }
@media (max-width: 640px) { .zs-actions { flex-direction: column-reverse; } }

/* Foto: FilePond an die Formularfelder angeglichen */
.zs-photo .filepond--root { margin: 0; font-family: var(--font-body); }
.zs-photo .filepond--panel-root { background: var(--ice); border: 2px dashed var(--line-strong); border-radius: var(--radius-s); }
.zs-photo .filepond--drop-label { min-height: 7rem; color: var(--ink-soft); font-size: 1rem; }
.zs-photo .filepond--drop-label label { font-weight: 600; cursor: pointer; }
.zs-photo .filepond--label-action { color: var(--brand-deep); text-decoration-color: var(--brand); }
.zs-photo .filepond--item-panel { border-radius: var(--radius-s); }
.zs-help { margin: 0 0 var(--s2); }
.zs-help summary { cursor: pointer; color: var(--brand-deep); font-weight: 600; }
.zs-help img { display: block; width: 100%; height: auto; margin-top: var(--s2); border-radius: var(--radius-s); border: 1px solid var(--line); }

/* Angebot "Jahresverbrauchsabrechnung digital" (nur ohne bisherige Angabe) */
.zs-consent { margin-top: var(--s3); border-color: var(--info-line); background: linear-gradient(180deg, var(--info-bg), #fff 70%); }
.zs-consent .overline { margin-bottom: var(--s1); }
.zs-consent h3 { font-size: 1.2rem; font-weight: 600; color: var(--brand-ink); margin-bottom: var(--s1); }
.zs-consent .check { margin-bottom: var(--s2); }
.zs-consent .check label strong { display: block; color: var(--brand-ink); margin-bottom: .25rem; }
.zs-declaration { display: block; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
html.js [data-consent-mail][hidden] { display: none; }