/* Gemeinsame Eingabe für Fassade, Wände, Tore, Dach und Farben (H7/H8). Farben kommen aus den Variablen der Umgebung:
   --hz-akzent, --hz-rand, --hz-text, --hz-leise, --hz-flaeche, --hz-fehler, --hz-warn */
.hz-block { display: grid; gap: 12px; color: var(--hz-text, inherit); }
.hz-feld { display: grid; gap: 4px; }
.hz-lbl, .hz-feld label { font-size: 13px; color: var(--hz-leise, #57606a); }
.hz-block input[type=text], .hz-block select { border: 1px solid var(--hz-rand, #c5ccd6); border-radius: 6px; padding: 6px 8px; font: inherit; background: var(--hz-flaeche, #fff); color: inherit; min-height: 36px; max-width: 100%; }
.hz-block input.ungueltig { border-color: var(--hz-fehler, #b42318); }
.hz-kurz { width: 5.5em; }
.hz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hz-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hz-zeile > label { min-width: 11em; }
.hz-einheit, .hz-leise { font-size: 13px; color: var(--hz-leise, #57606a); }
.hz-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.hz-wahl label { position: relative; }
.hz-wahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hz-wahl span { display: inline-block; padding: 7px 12px; border: 1px solid var(--hz-rand, #c5ccd6); border-radius: 8px; background: var(--hz-flaeche, #fff); color: var(--hz-text, #1b1f24); font-size: 14px; cursor: pointer; }
.hz-wahl input:checked + span { background: var(--hz-akzent, #1f3a5f); border-color: var(--hz-akzent, #1f3a5f); color: #fff; }
.hz-wahl input:checked + span::before { content: "✓ "; }
.hz-wahl input:focus-visible + span { outline: 3px solid #e8871e; outline-offset: 2px; }
.hz-check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--hz-text, inherit); cursor: pointer; }
.hz-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hz-wand, .hz-tor { border: 1px solid var(--hz-rand, #c5ccd6); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; }
.hz-wand legend, .hz-tor legend { font-weight: 600; padding: 0 6px; }
.hz-knopf { border: 1px solid var(--hz-akzent, #1f3a5f); background: var(--hz-flaeche, #fff); color: var(--hz-akzent, #1f3a5f); border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.hz-knopf:hover { background: var(--hz-akzent, #1f3a5f); color: #fff; }
.hz-loeschen { justify-self: start; border-color: var(--hz-fehler, #b42318); color: var(--hz-fehler, #b42318); }
.hz-loeschen:hover { background: var(--hz-fehler, #b42318); }
.hz-neu { display: grid; gap: 6px; }
.hz-neuzeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hz-neuzeile > span { min-width: 8.5em; font-size: 13px; }
.hz-meld { border-left: 4px solid; padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.hz-fehlermeld { border-color: var(--hz-fehler, #b42318); background: #fdecea; color: #7a1a12; }
.hz-warn { border-color: #d98a00; background: #fff4e0; color: #5c3a00; }
.hz-info { border-color: #3a7bd5; background: #eaf2fc; color: #17324f; }
.hz-fehler { color: var(--hz-fehler, #b42318); font-size: 13px; }
.hz-farbe { display: inline-flex; gap: 8px; align-items: center; }
.hz-punkt { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #8a929c; flex: none; }