/* Terminal-Health. Nur Tokens aus hx/tokens.css (GR-09), Größen in rem (GR-08), sichtbarer Fokus (GR-10). */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; background: var(--hx-color-bg); color: var(--hx-color-text);
  font-family: var(--hx-font-sans); font-size: var(--hx-text-md); line-height: var(--hx-leading-normal);
}
:focus-visible { outline: var(--hx-focus-ring-width) solid var(--hx-color-focus); outline-offset: var(--hx-focus-ring-offset); }
[hidden] { display: none !important; }
.sprung { position: absolute; left: var(--hx-space-2); top: -4rem; padding: var(--hx-space-2) var(--hx-space-4); background: var(--hx-color-surface); color: var(--hx-color-text); z-index: var(--hx-z-modal); }
.sprung:focus { top: var(--hx-space-2); }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf */
.kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hx-space-3);
  padding: var(--hx-space-3) var(--hx-space-6); background: var(--hx-color-primary); color: var(--hx-color-on-primary);
}
.marke { display: flex; align-items: center; gap: var(--hx-space-3); color: inherit; text-decoration: none; font-weight: var(--hx-font-weight-bold); font-size: var(--hx-text-lg); }
.logo { height: 2rem; width: auto; }
.kopf-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hx-target-gap); }
.wer { font-size: var(--hx-text-sm); }
main { max-width: 72rem; margin: 0 auto; padding: var(--hx-space-6) var(--hx-space-4) var(--hx-space-12); }
main:focus { outline: none; }
.seitentitel { font-size: var(--hx-text-2xl); margin: 0 0 var(--hx-space-4); }
h2 { font-size: var(--hx-text-xl); margin: 0 0 var(--hx-space-2); }
h3 { font-size: var(--hx-text-lg); margin: 0; }

/* Knöpfe: mindestens 44 px (Hausregel), 8 px Abstand */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hx-space-2);
  min-height: var(--hx-target-min); min-width: var(--hx-target-min); padding: var(--hx-space-2) var(--hx-space-4);
  border: 2px solid var(--hx-color-border-strong); border-radius: var(--hx-radius-md);
  background: var(--hx-color-surface); color: var(--hx-color-text);
  font: inherit; font-weight: var(--hx-font-weight-medium); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--hx-color-surface-sunken); }
.btn-primaer { background: var(--hx-color-primary); border-color: var(--hx-color-primary); color: var(--hx-color-on-primary); }
.btn-primaer:hover { background: var(--hx-color-primary-hover); }
.btn-warn { background: var(--hx-color-warning-solid); border-color: var(--hx-color-warning-solid); color: var(--hx-color-warning-on-solid); }
.btn-danger { background: var(--hx-color-danger-solid); border-color: var(--hx-color-danger-solid); color: var(--hx-color-danger-on-solid); }
.btn-warn:hover, .btn-danger:hover { filter: brightness(0.92); }
.btn-leise { background: transparent; border-color: currentColor; color: inherit; }
.kopf .btn-leise:hover { background: var(--hx-color-primary-hover); }
.btn-klein { padding: var(--hx-space-1) var(--hx-space-3); font-size: var(--hx-text-sm); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
/* Gesperrt: bleibt sichtbar und lesbar, der Grund steht darunter (MA-14) */
.btn.gesperrt { background: var(--hx-color-neutral-bg); border-color: var(--hx-color-neutral-border); color: var(--hx-color-neutral-text); cursor: not-allowed; filter: none; }
.btn.gesperrt:hover { background: var(--hx-color-neutral-bg); filter: none; }
.gesperrt-grund { margin: var(--hx-space-1) 0 0; font-size: var(--hx-text-sm); color: var(--hx-color-text-muted); max-width: 22rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--hx-target-gap); margin-top: var(--hx-space-3); }

/* Karten und Raster */
.karte { background: var(--hx-color-surface); border: 1px solid var(--hx-color-border); border-radius: var(--hx-radius-lg); padding: var(--hx-space-5); margin-bottom: var(--hx-space-5); box-shadow: var(--hx-shadow-sm); }
.karte.schmal { max-width: 34rem; margin-inline: auto; }
.haus { margin-bottom: var(--hx-space-8); }
.haus-name { margin: 0 0 var(--hx-space-3); color: var(--hx-color-text-muted); font-size: var(--hx-text-sm); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--hx-space-4); }
.terminal { background: var(--hx-color-surface); border: 1px solid var(--hx-color-border); border-left-width: 0.5rem; border-radius: var(--hx-radius-lg); padding: var(--hx-space-4); box-shadow: var(--hx-shadow-sm); display: flex; flex-direction: column; gap: var(--hx-space-3); }
.terminal.stufe-ok { border-left-color: var(--hx-color-success-solid); }
.terminal.stufe-hinweis { border-left-color: var(--hx-color-warning-solid); }
.terminal.stufe-stoerung, .terminal.stufe-aus { border-left-color: var(--hx-color-danger-solid); }
.terminal.stufe-neutral { border-left-color: var(--hx-color-neutral-solid); }
.t-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hx-space-2); }
.t-detail, .t-stand { margin: 0; }
.t-stand { font-size: var(--hx-text-sm); color: var(--hx-color-text-muted); }

/* Status: immer Wort + Zeichen, nie nur Farbe (GR-03) */
.chip { display: inline-flex; align-items: center; gap: var(--hx-space-2); padding: var(--hx-space-1) var(--hx-space-3); border-radius: var(--hx-radius-full); border: 1px solid; font-weight: var(--hx-font-weight-bold); }
.chip-zeichen { font-weight: var(--hx-font-weight-bold); }
.chip.stufe-ok { background: var(--hx-color-success-bg); color: var(--hx-color-success-text); border-color: var(--hx-color-success-border); }
.chip.stufe-hinweis { background: var(--hx-color-warning-bg); color: var(--hx-color-warning-text); border-color: var(--hx-color-warning-border); }
.chip.stufe-stoerung, .chip.stufe-aus { background: var(--hx-color-danger-bg); color: var(--hx-color-danger-text); border-color: var(--hx-color-danger-border); }
.chip.stufe-neutral { background: var(--hx-color-neutral-bg); color: var(--hx-color-neutral-text); border-color: var(--hx-color-neutral-border); }
.stufe-text.stufe-stoerung { color: var(--hx-color-danger-text); font-weight: var(--hx-font-weight-bold); }
.stufe-text.stufe-hinweis { color: var(--hx-color-warning-text); font-weight: var(--hx-font-weight-bold); }

.werte { display: grid; grid-template-columns: max-content 1fr; gap: var(--hx-space-1) var(--hx-space-4); margin: 0; font-size: var(--hx-text-sm); }
.werte dt { color: var(--hx-color-text-muted); }
.werte dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .werte { grid-template-columns: 1fr; } .werte dd { margin-bottom: var(--hx-space-2); } }

.aktionen { display: flex; flex-wrap: wrap; gap: var(--hx-space-4) var(--hx-target-gap); margin-top: auto; padding-top: var(--hx-space-2); }
.aktion { display: flex; flex-direction: column; align-items: flex-start; }

/* Aufträge, Alarme, Banner */
.auftrag { border: 1px solid var(--hx-color-info-border); background: var(--hx-color-info-bg); color: var(--hx-color-info-text); border-radius: var(--hx-radius-md); padding: var(--hx-space-3); }
.auftrag p { margin: var(--hx-space-1) 0 0; }
.auftrag.ok { border-color: var(--hx-color-success-border); background: var(--hx-color-success-bg); color: var(--hx-color-success-text); }
.auftrag.fehler { border-color: var(--hx-color-danger-border); background: var(--hx-color-danger-bg); color: var(--hx-color-danger-text); }
.alarme { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hx-space-2); }
.alarm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hx-space-2); border: 1px solid var(--hx-color-danger-border); background: var(--hx-color-danger-bg); color: var(--hx-color-danger-text); border-radius: var(--hx-radius-md); padding: var(--hx-space-2) var(--hx-space-3); font-size: var(--hx-text-sm); }
.alarm.schwere-hinweis { border-color: var(--hx-color-warning-border); background: var(--hx-color-warning-bg); color: var(--hx-color-warning-text); }
.alarm-text { flex: 1 1 14rem; }
.quittiert { font-style: italic; }
.banner { display: flex; align-items: flex-start; gap: var(--hx-space-3); border: 1px solid; border-radius: var(--hx-radius-md); padding: var(--hx-space-3) var(--hx-space-4); margin: 0 0 var(--hx-space-4); }
.banner-stoerung { background: var(--hx-color-danger-bg); color: var(--hx-color-danger-text); border-color: var(--hx-color-danger-border); }
.banner-ok { background: var(--hx-color-success-bg); color: var(--hx-color-success-text); border-color: var(--hx-color-success-border); }
.hinweiskasten { background: var(--hx-color-info-bg); color: var(--hx-color-info-text); border: 1px solid var(--hx-color-info-border); border-radius: var(--hx-radius-md); padding: var(--hx-space-3) var(--hx-space-4); margin: 0 0 var(--hx-space-3); }
.hinweistext { color: var(--hx-color-text-muted); font-size: var(--hx-text-sm); margin: var(--hx-space-1) 0 0; }

/* Formulare */
.feld-label { display: block; font-weight: var(--hx-font-weight-medium); margin: var(--hx-space-3) 0 var(--hx-space-1); }
input[type="text"], input[type="email"], input[type="number"], textarea {
  width: 100%; min-height: var(--hx-target-min); padding: var(--hx-space-2) var(--hx-space-3); font: inherit; color: var(--hx-color-text);
  background: var(--hx-color-surface); border: 2px solid var(--hx-color-border-strong); border-radius: var(--hx-radius-md);
}
textarea[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--hx-color-danger-solid); border-width: 3px; }
.feld-fehler { color: var(--hx-color-danger-text); font-weight: var(--hx-font-weight-medium); margin: var(--hx-space-1) 0; }
.feld-fehler:not([hidden])::before { content: "✕ "; }
fieldset { border: 1px solid var(--hx-color-border); border-radius: var(--hx-radius-md); margin: var(--hx-space-3) 0; padding: var(--hx-space-3); }
legend { font-weight: var(--hx-font-weight-medium); padding: 0 var(--hx-space-2); }
.checkreihe { display: flex; flex-wrap: wrap; gap: var(--hx-space-2) var(--hx-space-5); }
.checkspalte { display: flex; flex-direction: column; gap: var(--hx-space-1); }
.check { display: inline-flex; align-items: center; gap: var(--hx-space-2); min-height: var(--hx-target-min); }
.check input, .bestaetigung input { width: 1.5rem; height: 1.5rem; accent-color: var(--hx-color-primary); flex: none; }
.bestaetigung { display: flex; align-items: flex-start; gap: var(--hx-space-3); margin: var(--hx-space-3) 0; padding: var(--hx-space-3); background: var(--hx-color-danger-bg); color: var(--hx-color-danger-text); border: 1px solid var(--hx-color-danger-border); border-radius: var(--hx-radius-md); }
.formgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--hx-space-4); }

/* Fenster */
dialog { width: min(34rem, calc(100% - 2rem)); padding: var(--hx-space-5); border: 2px solid var(--hx-color-border-strong); border-radius: var(--hx-radius-lg); background: var(--hx-color-surface); color: var(--hx-color-text); }
dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.dlg-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hx-target-gap); margin-top: var(--hx-space-4); }

/* Tabellen (dürfen als einzige Ansicht seitwärts scrollen) */
.tabelle-rahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--hx-text-sm); }
th, td { text-align: left; padding: var(--hx-space-2) var(--hx-space-3); border-bottom: 1px solid var(--hx-color-border); vertical-align: top; }
thead th { background: var(--hx-color-surface-sunken); }
.geraete { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hx-space-1); }
.qr { display: block; margin: var(--hx-space-4) auto; background: var(--hx-color-surface); padding: var(--hx-space-2); border-radius: var(--hx-radius-md); }

input.zahl { width: 5rem; }
.geraete-limit { display: flex; flex-direction: column; gap: var(--hx-space-1); margin-bottom: var(--hx-space-2); }