/* wartung.<domain>: wie im Hub Linien statt Schatten, Radius höchstens 6 px. Das Terminal bleibt in beiden Farbmodi dunkel. */
:root {
  color-scheme: light dark;
  --grund: #f6f6f4; --flaeche: #ffffff; --t: #1c1e21; --t2: #5c6168; --linie: #d9dadc; --p: #2f55c9; --auf-p: #ffffff; --schlecht: #b3261e; --gut: #1f7a45; --mittel: #96600a;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #101214; --flaeche: #17191c; --t: #e9eaec; --t2: #a2a7ae; --linie: #2c2f33; --p: #7f9ef2; --auf-p: #10131a; --schlecht: #f2867e; --gut: #6fcf97; --mittel: #e0b25c; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { height: var(--hoehe, 100dvh); display: flex; flex-direction: column; overflow: hidden; background: var(--grund); color: var(--t); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.kopf { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
#zustand { color: var(--t2); margin-right: auto; }
#zustand[data-zustand="verbunden"] { color: var(--gut); }
#zustand[data-zustand="unterbrochen"] { color: var(--mittel); }
.flaeche { flex: 1; min-height: 0; padding: 8px; background: #17191c; }
.flaeche .xterm { height: 100%; }
.tasten { display: none; gap: 4px; padding: 4px 8px; overflow-x: auto; background: var(--flaeche); border-top: 1px solid var(--linie); }
.fuss { padding: 6px 16px; color: var(--t2); font-size: 12px; background: var(--flaeche); border-top: 1px solid var(--linie); }
.knopf { min-height: 36px; padding: 6px 12px; border: 1px solid var(--p); border-radius: 6px; background: var(--p); color: var(--auf-p); font: inherit; font-weight: 600; cursor: pointer; }
.knopf.leise { background: transparent; border-color: var(--linie); color: var(--t); font-weight: 400; white-space: nowrap; }
.knopf:disabled { opacity: .6; cursor: default; }
.knopf:focus-visible, input:focus-visible { outline: 2px solid var(--p); outline-offset: 1px; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: rgb(0 0 0 / .55); }
.dialog { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 400px; padding: 20px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; }
.dialog h1 { margin: 0; font-size: 18px; }
.dialog p { margin: 0; color: var(--t2); }
.dialog label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.dialog input { min-height: 40px; padding: 8px; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); color: var(--t); font: inherit; font-size: 16px; font-weight: 400; }
.dialog .fehler { color: var(--schlecht); }
@media (max-width: 700px) {
  .tasten { display: flex; }
  .fuss { display: none; }
  .tasten .knopf { flex: none; min-height: 44px; min-width: 44px; }
}