/* Designsystem uhl-bernd (aus IPSView-Widgets uebernommen) */
:root {
  --bg:    #141414;
  --text:  #f2f2f2;
  --muted: #aaaaaa;
  --card:  rgba(35,35,35,0.65);
  --bord:  rgba(255,255,255,0.10);
  --r:     5px;

  --tx:  #FFD44D;   /* Gelb  - Hauptwert */
  --rx:  #a6e3a1;   /* Gruen - gut/an   */
  --avg: #7DD4FC;   /* Hellblau         */
  --cap: #FFA040;   /* Orange           */
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  
}
.hidden { display: none !important; }

/* ---------- Status-Dots ---------- */
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.s-up   { background:#2ecc71; box-shadow:0 0 5px 1px rgba(46,204,113,.6); }
.s-down { background:#e74c3c; }

/* ---------- Karten ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 10px 12px;
}

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card { width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; padding:22px 18px; }
.login-title { font-size:26px; font-weight:700; color:var(--tx); text-align:center; }
.login-sub   { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; text-align:center; margin-bottom:6px; }
.login-card input {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 11px 12px;
  color: var(--text);
  font-size: 15px;
}
.login-card input:focus { outline:none; border-color: var(--tx); }
.login-err { color:#ff8a80; font-size:12px; text-align:center; min-height:16px; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--tx); color:#1a1a1a; border:none; border-radius:var(--r);
  padding: 11px; font-size:15px; font-weight:700; cursor:pointer;
}
.btn-primary:active { filter: brightness(.85); }
.btn-ghost {
  background:none; border:1px solid var(--bord); border-radius:var(--r);
  color:var(--muted); padding:5px 10px; font-size:11px; cursor:pointer;
}

/* ---------- Fusszeile (frueher Kopfbereich) ----------
   Verbindungsanzeige, Benutzer und Abmelden stehen unten, damit der Inhalt
   ganz oben beginnt und nichts Platz wegnimmt. */
.fuss {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  margin-top:6px; border-top:1px solid var(--bord);
}
.head-user { font-size:11px; color:var(--muted); }

/* ---------- Tabs (Seiten-Menue) ---------- */
.tabs {
  display:flex; gap:6px; max-width:900px; margin:0 auto;
  padding:calc(8px + env(safe-area-inset-top)) 10px 0;
}
.tabs button {
  flex:1; max-width:150px;
  background:rgba(255,255,255,.05); border:1px solid var(--bord); border-radius:var(--r);
  color:var(--muted); font-size:13px; font-weight:600; padding:9px 0; cursor:pointer;
}
.tabs button.active { background:var(--tx); border-color:var(--tx); color:#1a1a1a; font-weight:700; }
.page-empty { color:var(--muted); font-size:13px; text-align:center; padding:48px 0; }
.page-content { display:flex; flex-direction:column; gap:14px; }

/* Untermenue (Rubrik-Chips) */
.subtabs { display:flex; gap:6px; flex-wrap:wrap; }
.subtabs button {
  background:rgba(255,255,255,.05); border:1px solid var(--bord); border-radius:99px;
  color:var(--muted); font-size:11px; font-weight:600; padding:6px 13px; cursor:pointer;
}
.subtabs button.active { color:var(--tx); border-color:var(--tx); background:rgba(255,212,77,.08); }

/* Spannen-Anzeige (range-Kachel, z.B. PV-Prognose) */
.tile-range { font-size:11px; color:var(--muted); }

/* ---------- Klingel / Tuerstation ---------- */
.db-card { display:flex; flex-direction:column; gap:8px; }
.db-card.ringing { border-color:rgba(231,76,60,.6); box-shadow:0 0 0 1px rgba(231,76,60,.25); }
.db-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.db-status { font-size:12px; color:var(--muted); }
.db-status.alarm { color:#ff6b5e; font-weight:700; animation:db-blink 1s step-start infinite; }
@keyframes db-blink { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .db-status.alarm { animation:none; } }

/* Klingelbild-Rahmen. Zwei Dinge sind hier absichtlich so:
   - aspect-ratio 704/466: Die Kamera speichert 704x576, 1:1 angezeigt wirkt das Bild zu
     hoch (PAL, nicht-quadratische Pixel). Die Hoehe ist darum gestaucht. Flacher/hoeher
     stellen = NUR die zweite Zahl aendern, sonst nichts.
   - width in Prozent: Eine reine max-width in Pixeln greift am Handy nicht, weil der
     Bildschirm ohnehin schmaler ist. */
.db-frame {
  position:relative; width:63%; max-width:305px; margin:0 auto;
  aspect-ratio:704/466;
  background:#0d0d0d; min-height:60px; cursor:zoom-in;
  border:1px solid var(--bord); border-radius:var(--r); overflow:hidden;
  display:flex; align-items:center; justify-content:center; touch-action:pan-y;
}
.db-frame img { width:100%; height:100%; object-fit:fill; display:block; user-select:none; }

/* Vollbild beim Antippen - so darf die Kachel klein bleiben, ohne Details zu verlieren */
.db-voll {
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.94);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:10px; padding:12px; cursor:zoom-out;
}
/* Vollbild mit demselben gestauchten Verhältnis, sonst sähe es dort anders aus */
.db-voll img { max-width:100%; max-height:82vh; aspect-ratio:704/466; object-fit:fill; border-radius:var(--r); }
.db-voll .db-voll-txt { color:var(--muted); font-size:12px; text-align:center; }
.db-empty { position:absolute; color:var(--muted); font-size:12px; }
.db-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:52px; border:none; border-radius:var(--r);
  background:rgba(0,0,0,.45); color:#fff; font-size:26px; line-height:1; cursor:pointer;
}
.db-nav:active { background:rgba(0,0,0,.7); }
.db-nav.prev { left:6px; }
.db-nav.next { right:6px; }
.db-caption { font-size:11px; color:var(--muted); text-align:center; }
.db-dots { display:flex; gap:6px; justify-content:center; }
.db-dot {
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.18); border:none;
}
.db-dot.active { background:var(--tx); }

.db-hist-title { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.db-hist { display:flex; flex-direction:column; }
.db-hist-row {
  display:flex; justify-content:space-between; gap:10px;
  font-size:11px; padding:2px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.db-hist-row:last-child { border-bottom:none; }
.db-hist-row.muted { color:var(--muted); }
.db-hist-rel { color:var(--muted); }

/* Türöffner ganz oben, mittig - ohne Scrollen erreichbar */
.db-open-top { display:flex; justify-content:center; }
.db-open-top .db-btn {
  flex:0 1 auto; min-width:220px; max-width:340px;
  padding:14px 22px; font-size:15px;
}

.db-actions { display:flex; gap:8px; }
.db-btn {
  flex:1; background:rgba(255,255,255,.06); border:1px solid var(--bord); border-radius:var(--r);
  color:var(--text); font-size:13px; font-weight:600; padding:11px 8px; cursor:pointer;
}
.db-btn:active { background:rgba(255,255,255,.12); }
.db-btn:disabled { opacity:.5; cursor:default; }
.db-btn.aktiv { background:rgba(166,227,161,.14); border-color:rgba(166,227,161,.45); color:var(--rx); }
.db-open { background:rgba(255,212,77,.12); border-color:rgba(255,212,77,.4); color:var(--tx); }
.db-open.armed { background:rgba(231,76,60,.22); border-color:rgba(231,76,60,.65); color:#ff8a80; }

/* Hoch/Runter-Kachel */
.tile-updown .ud-row { display:flex; gap:6px; flex:1; }
.tile-updown .ud-row button {
  flex:1; background:rgba(255,212,77,.12); border:1px solid rgba(255,212,77,.4);
  border-radius:var(--r); color:var(--tx); font-size:13px; font-weight:700;
  padding:14px 4px; cursor:pointer;
}
.tile-updown .ud-row button:active { background:rgba(255,212,77,.28); }

/* ---------- Dashboard ---------- */
.wrap { padding: 10px; display:flex; flex-direction:column; gap:14px; max-width:900px; margin:0 auto; }
.section-title {
  font-size:10px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.08em; margin: 4px 2px 6px;
}
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
/* layout:"liste" in devices.json -> alle Kacheln untereinander (z.B. Jalousie-Szenen) */
.grid.liste { grid-template-columns: 1fr; }

/* ---------- Kacheln ---------- */
.tile { display:flex; flex-direction:column; gap:6px; min-height:74px; }
.tile-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.tile-val { font-size:22px; font-weight:700; color:var(--tx); word-break:break-word; }
.tile-val.text { font-size:14px; color:var(--text); font-weight:600; }
.tile-unit { font-size:12px; color:var(--muted); font-weight:400; margin-left:3px; }

/* Switch */
.tile-switch { cursor:pointer; user-select:none; }
.tile-switch .tile-val { font-size:15px; color:var(--muted); }
.tile-switch.on { border-color: rgba(166,227,161,.45); }
.tile-switch.on .tile-val { color: var(--rx); }
.sw-row { display:flex; align-items:center; justify-content:space-between; }
.sw-track {
  width:40px; height:22px; border-radius:99px; background:rgba(255,255,255,.10);
  position:relative; transition:background .15s;
}
.tile-switch.on .sw-track { background:rgba(166,227,161,.35); }
.sw-knob {
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#888; transition:left .15s, background .15s;
}
.tile-switch.on .sw-knob { left:20px; background:var(--rx); }

/* Rollladen / Dimmer */
.tile-shutter input[type=range] {
  width:100%; appearance:none; -webkit-appearance:none; height:8px; border-radius:99px;
  background: rgba(255,255,255,.08); outline:none;
}
.tile-shutter input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--tx); border:2px solid #fff;
  box-shadow:0 0 6px 3px rgba(255,212,77,.5); cursor:pointer;
}
.tile-shutter input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:var(--tx); border:2px solid #fff; cursor:pointer;
}
.preset-row { display:flex; gap:6px; }
.preset-row button {
  flex:1; background:rgba(255,255,255,.06); border:1px solid var(--bord);
  border-radius:var(--r); color:var(--muted); font-size:11px; padding:5px 0; cursor:pointer;
}
.preset-row button:active { color:var(--tx); border-color:var(--tx); }

/* Skript-Button */
.tile-script { align-items:stretch; justify-content:center; }
.tile-script button {
  background:rgba(255,212,77,.12); border:1px solid rgba(255,212,77,.4);
  border-radius:var(--r); color:var(--tx); font-size:13px; font-weight:700;
  padding:14px 8px; cursor:pointer;
}
.tile-script button:active { background:rgba(255,212,77,.28); }

/* Toast */
.toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:rgba(120,20,20,.9); border:1px solid rgba(255,80,80,.4);
  color:#ff8a80; font-size:12px; padding:8px 14px; border-radius:var(--r); z-index:50;
}
.toast.ok { background:rgba(20,80,30,.9); border-color:rgba(46,204,113,.4); color:var(--rx); }

/* ---------- Energie-Panel: Flussdiagramm ---------- */
.en-flow-card { padding: 6px 4px 2px; }
.en-flow { width:100%; max-width:440px; display:block; margin:0 auto; }
.en-edge { fill:none; stroke-width:2; stroke-linecap:round; }
.en-base { stroke:rgba(255,255,255,.08); }
.en-anim { stroke-dasharray:5 7; animation:en-dash 1.05s linear infinite; }
.en-anim.rev { animation-direction:reverse; }
@keyframes en-dash { to { stroke-dashoffset:-24; } }
@media (prefers-reduced-motion: reduce) { .en-anim { animation:none; } }
.en-hub  { fill:rgba(255,255,255,.25); }
.en-node { fill:rgba(255,255,255,.03); stroke-width:2; }
.en-icon { stroke:rgba(242,242,242,.85); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.en-lbl  { font-size:9px; letter-spacing:.06em; text-transform:uppercase; fill:var(--muted); }
.en-val  { font-size:14px; font-weight:700; fill:var(--text); }
.en-soc  { font-size:11px; font-weight:700; fill:var(--rx); }
.en-batt-fill { fill:rgba(166,227,161,.5); }

/* ---------- Energie-Panel: Verlaufschart ---------- */
.en-chart-card { display:flex; flex-direction:column; gap:8px; }
.en-chart-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.en-chart-title { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.en-range-row { display:flex; gap:6px; }
.en-range-row button {
  background:rgba(255,255,255,.06); border:1px solid var(--bord); border-radius:var(--r);
  color:var(--muted); font-size:11px; padding:4px 10px; cursor:pointer;
}
.en-range-row button.active { color:var(--tx); border-color:var(--tx); }
.en-legend { display:flex; gap:14px; align-items:center; }
.en-legend .item { display:flex; gap:6px; align-items:center; font-size:11px; color:var(--muted); }
.en-legend .key { width:14px; height:2px; border-radius:1px; display:inline-block; }
.en-legend .key.dotted, .en-tip .t-key.dotted { background:none !important; height:0; border-top:2px dotted; border-radius:0; }
.en-plot { position:relative; width:100%; transition:opacity .2s; }
.en-plot svg { display:block; width:100%; height:auto; }
.en-grid-line { stroke:rgba(255,255,255,.07); stroke-width:1; }
.en-tick { font-size:10px; fill:var(--muted); }
.en-series { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.en-cross { stroke:rgba(255,255,255,.25); stroke-width:1; }
.en-empty { color:var(--muted); font-size:12px; text-align:center; padding:24px 0; }
.en-tip {
  position:absolute; z-index:5; background:rgba(28,28,28,.95); border:1px solid var(--bord);
  border-radius:var(--r); padding:7px 10px; font-size:11px; pointer-events:none; min-width:140px;
}
.en-tip .t-time { color:var(--muted); margin-bottom:4px; }
.en-tip .t-row { display:flex; align-items:center; gap:6px; margin-top:2px; }
.en-tip .t-key { width:12px; height:2px; border-radius:1px; flex-shrink:0; }
.en-tip .t-lbl { color:var(--muted); }
.en-tip .t-val { font-weight:700; color:var(--text); margin-left:auto; padding-left:10px; }