:root {
  --petrol: #009493;
  --akzent: #00ddd3;
  --dunkel: #2d3f3c;
  --dunkel-2: #22302e;
  --flaeche: #f4f7f7;
  --text: #1d2a28;
  --text-2: #5b6b69;
  --rand: #d9e2e1;
  --ok: #1f9d55;
  --warn: #c98200;
  --fehler: #c0392b;
  --radius: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--flaeche); }
a { color: var(--petrol); }
button, input, select { font: inherit; }
[hidden] { display: none !important; }

.kopf {
  display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 16px;
  background: var(--dunkel); color: #fff;
}
.kopf img { height: 30px; }
.kopf .titel { font-weight: 600; letter-spacing: .02em; }
.kopf .titel small { font-weight: 400; opacity: .7; margin-left: 8px; }
.kopf .platz { flex: 1; }
.kopf a, .kopf button.link { color: #fff; text-decoration: none; opacity: .85; background: none; border: 0; cursor: pointer; padding: 6px 8px; }
.kopf a:hover, .kopf button.link:hover { opacity: 1; text-decoration: underline; }

.knopf {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--petrol);
  background: var(--petrol); color: #fff; cursor: pointer; font-weight: 500;
}
.knopf:hover { filter: brightness(1.08); }
.knopf.zweit { background: #fff; color: var(--petrol); }
.knopf.klein { padding: 4px 10px; font-size: .9em; }
.knopf.gefahr { background: #fff; color: var(--fehler); border-color: var(--fehler); }
.knopf:disabled { opacity: .5; cursor: default; }

/* Anmeldung */
/* Hintergrund wie die MeshCentral-Anmeldung (meshcentral-branding/logos/bg-robotik.jpg): linke Haelfte frei fuer die Maske */
.anmeldung {
  min-height: 100%; display: grid; align-items: center; justify-items: start; padding: 0 0 0 max(6vw, 24px);
  background: #1b2624 url(/img/login-hintergrund.jpg) right center / cover no-repeat;
}
@media (max-width: 900px) {
  .anmeldung { justify-items: center; padding: 0; background-image: url(/img/login-hintergrund-960.jpg); background-position: 70% center; }
}
.anmeldung form { width: min(360px, 92vw); background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.anmeldung .marke { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; background: var(--dunkel); margin: -28px -28px 20px; padding: 16px 28px; border-radius: 12px 12px 0 0; color: #fff; }
.anmeldung .marke img { height: 34px; }
.feld { display: grid; gap: 4px; margin-bottom: 14px; }
.feld label { font-size: .85em; color: var(--text-2); }
.feld input, .feld select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; }
.feld input:focus, .feld select:focus { outline: 2px solid var(--akzent); border-color: var(--petrol); }
.meldung { padding: 8px 10px; border-radius: 6px; font-size: .9em; margin-bottom: 12px; }
.meldung.fehler { background: #fdecea; color: var(--fehler); }

/* Geraeteliste */
.inhalt { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.inhalt h1 { font-size: 1.3em; margin: 0 0 16px; }
.suche { width: 100%; max-width: 360px; padding: 9px 10px; border: 1px solid var(--rand); border-radius: 6px; margin-bottom: 16px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kachel {
  display: block; text-align: left; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.kachel:hover { border-color: var(--petrol); box-shadow: 0 2px 10px rgba(0,148,147,.15); }
.kachel .name { font-weight: 600; margin-bottom: 4px; }
.kachel .unter { color: var(--text-2); font-size: .88em; }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9aa; margin-right: 6px; vertical-align: middle; }
.punkt.an { background: var(--ok); }
.leer { color: var(--text-2); padding: 24px 0; }

/* Zellenansicht */
.zelle { display: grid; grid-template-rows: 52px 1fr; height: 100%; }
.zelle main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 8px; padding: 8px; min-height: 0; background: var(--dunkel-2); }
.zelle.layout-unten main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 300px; }
.panel { position: relative; background: #000; border-radius: 6px; overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.panel .leiste { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--dunkel); color: #fff; font-size: .9em; }
.panel .leiste .platz { flex: 1; }
.panel .leiste strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.panel .leiste .knopf, .panel .leiste .badge { white-space: nowrap; flex-shrink: 0; }
.panel .leiste .knopf { border-color: rgba(255,255,255,.35); background: transparent; color: #fff; }
.panel iframe { flex: 1; width: 100%; border: 0; background: #111; }
.panel video { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.kameras { display: grid; gap: 8px; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
.status {
  position: absolute; inset: 34px 0 0 0; display: grid; place-items: center; text-align: center; color: #fff; padding: 20px;
  background: rgba(0,0,0,.72); font-size: .95em; pointer-events: none;
}
.status .icon { font-size: 28px; margin-bottom: 6px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .78em; font-weight: 600; background: #555; color: #fff; }
.badge.live { background: #c0392b; }
.badge.ok { background: var(--ok); }
.badge.warn { background: var(--warn); }
.badge.fehler { background: var(--fehler); }
.drehen { width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--akzent); border-radius: 50%; animation: drehen .8s linear infinite; margin: 0 auto 8px; }
@keyframes drehen { to { transform: rotate(360deg); } }
.tabs-schmal { display: none; }

@media (max-width: 900px) {
  .zelle { grid-template-rows: auto 1fr; }
  .zelle main, .zelle.layout-unten main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); padding: 4px; }
  .kopf { gap: 8px; padding: 0 8px; min-width: 0; }
  .kopf .titel, .kopf .gedimmt { display: none; }
  .panel .leiste { flex-wrap: wrap; row-gap: 4px; }
  .zelle .status { inset: 70px 0 0 0; }
  .tabs-schmal { display: flex; gap: 4px; }
  .zelle[data-ansicht="desktop"] .kameras { display: none; }
  .zelle[data-ansicht="kamera"] #desktopPanel { display: none; }
  #layoutKnopf { display: none; }
}

/* Admin */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); margin-bottom: 16px; flex-wrap: wrap; }
.reiter button { background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--text-2); border-bottom: 2px solid transparent; }
.reiter button.aktiv { color: var(--petrol); border-bottom-color: var(--petrol); font-weight: 600; }
table.liste { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; font-size: .92em; }
table.liste th, table.liste td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
table.liste th { background: #eef3f3; font-weight: 600; color: var(--text-2); font-size: .85em; }
table.liste code { font-size: .85em; word-break: break-all; }
.formular { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.formular .aktionen { grid-column: 1 / -1; display: flex; gap: 8px; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kennzahl { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px; }
.kennzahl .wert { font-size: 1.6em; font-weight: 700; color: var(--petrol); }
.kennzahl .label { color: var(--text-2); font-size: .85em; }
.kopf a.logo { opacity: 1; padding: 0; }
.gedimmt { opacity: .7; }

/* Kamerasteuerung (PTZ): kompaktes Steuerfeld unten rechts ueber dem Kamerabild, fingerfreundlich (min. 40 px) */
.ptz { position: absolute; right: 6px; bottom: 6px; display: grid; grid-template-columns: auto auto; align-items: end; gap: 4px 6px; padding: 6px;
  border-radius: 10px; background: rgba(20,30,29,.35); color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; }
.ptz-pad { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); gap: 3px; }
.ptz-pad [data-richtung="hoch"] { grid-column: 2; grid-row: 1; }
.ptz-pad [data-richtung="links"] { grid-column: 1; grid-row: 2; }
.ptz-pad .ptz-rundum { grid-column: 2; grid-row: 2; font-size: .68em; }
.ptz-pad [data-richtung="rechts"] { grid-column: 3; grid-row: 2; }
.ptz-pad [data-richtung="runter"] { grid-column: 2; grid-row: 3; }
.ptz-knopf { min-width: 40px; min-height: 40px; padding: 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.4);
  color: #fff; font-size: 1em; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ptz-knopf:hover { border-color: var(--akzent); }
.ptz-knopf.gedrueckt, .ptz-knopf:active { background: var(--petrol); border-color: var(--akzent); }
.ptz-knopf.klein { min-width: 46px; font-size: .8em; }
.ptz-presets { display: grid; grid-template-columns: repeat(2, auto); gap: 3px; grid-column: 1; grid-row: 1; }
.ptz-presets:empty { display: none; }
.ptz-pad { grid-column: 2; grid-row: 1; }
.ptz-info { grid-column: 1 / -1; font-size: .72em; text-align: right; max-width: 240px; justify-self: end; text-shadow: 0 1px 2px #000; }
.ptz-info:empty { display: none; }
.ptz-info.warn { color: #ffd27a; }
.ptz-info.fehler { color: #ff9c92; }
.panel .leiste .knopf.aktiv { background: rgba(255,255,255,.15); }
@media (max-width: 900px) { .ptz { right: 4px; bottom: 4px; padding: 4px; } }