/* ============================================================ Qcells Energie · V46 Design-System: 3 Themes (solar, tech, green) × Dark/Light. Gesteuert über und . ============================================================ */ * { box-sizing: border-box; } :root { --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --r-lg: 22px; --r-md: 14px; --r-sm: 10px; --topbar-h: 62px; --bottomnav-h: 64px; --content-max: 1180px; --dur: .22s; } /* ---------- Energie-Farben (Dark) ---------- */ :root[data-mode="dark"] { color-scheme: dark; --c-pv: #fbbf24; --c-pv2: #f59e0b; --c-house: #60a5fa; --c-grid-in: #fb7185; --c-grid-out: #2dd4bf; --c-batt: #4ade80; --c-soc: #34d399; --ok: #34d399; --warn: #fbbf24; --err: #fb7185; --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-soft: 0 4px 16px rgba(0, 0, 0, .25); } /* ---------- Energie-Farben (Light) ---------- */ :root[data-mode="light"] { color-scheme: light; --c-pv: #f59e0b; --c-pv2: #d97706; --c-house: #2563eb; --c-grid-in: #e11d48; --c-grid-out: #0d9488; --c-batt: #16a34a; --c-soc: #059669; --ok: #059669; --warn: #d97706; --err: #e11d48; --shadow: 0 12px 32px rgba(31, 27, 22, .10); --shadow-soft: 0 4px 14px rgba(31, 27, 22, .08); } /* ---------- Theme: Warm & Solar ---------- */ :root[data-theme="solar"][data-mode="dark"] { --bg: #131009; --bg-glow1: rgba(251, 191, 36, .07); --bg-glow2: rgba(217, 119, 6, .05); --card: #1d1913; --card2: #27221a; --card-glass: rgba(29, 25, 19, .82); --text: #f5f0e6; --text-dim: #b8ae9c; --text-faint: #837a6a; --line: rgba(245, 240, 230, .08); --line-strong: rgba(245, 240, 230, .16); --accent: #fbbf24; --accent-contrast: #221a08; --accent-soft: rgba(251, 191, 36, .14); --accent-line: rgba(251, 191, 36, .35); } :root[data-theme="solar"][data-mode="light"] { --bg: #f8f4ec; --bg-glow1: rgba(245, 158, 11, .10); --bg-glow2: rgba(217, 119, 6, .06); --card: #fffdf9; --card2: #f5efe3; --card-glass: rgba(255, 253, 249, .86); --text: #2b251d; --text-dim: #6f6555; --text-faint: #9c917f; --line: rgba(43, 37, 29, .09); --line-strong: rgba(43, 37, 29, .18); --accent: #d97706; --accent-contrast: #ffffff; --accent-soft: rgba(217, 119, 6, .11); --accent-line: rgba(217, 119, 6, .35); } /* ---------- Theme: Clean Tech ---------- */ :root[data-theme="tech"][data-mode="dark"] { --bg: #0c1016; --bg-glow1: rgba(56, 189, 248, .07); --bg-glow2: rgba(99, 102, 241, .06); --card: #151b24; --card2: #1d2531; --card-glass: rgba(21, 27, 36, .82); --text: #ecf1f8; --text-dim: #a3aebe; --text-faint: #6e7889; --line: rgba(236, 241, 248, .08); --line-strong: rgba(236, 241, 248, .16); --accent: #38bdf8; --accent-contrast: #06222f; --accent-soft: rgba(56, 189, 248, .13); --accent-line: rgba(56, 189, 248, .35); } :root[data-theme="tech"][data-mode="light"] { --bg: #f2f5f9; --bg-glow1: rgba(2, 132, 199, .08); --bg-glow2: rgba(79, 70, 229, .05); --card: #ffffff; --card2: #edf1f7; --card-glass: rgba(255, 255, 255, .86); --text: #1c2430; --text-dim: #5b6675; --text-faint: #8b95a5; --line: rgba(28, 36, 48, .09); --line-strong: rgba(28, 36, 48, .18); --accent: #0284c7; --accent-contrast: #ffffff; --accent-soft: rgba(2, 132, 199, .10); --accent-line: rgba(2, 132, 199, .35); } /* ---------- Theme: Energy Green ---------- */ :root[data-theme="green"][data-mode="dark"] { --bg: #0d1310; --bg-glow1: rgba(52, 211, 153, .07); --bg-glow2: rgba(16, 185, 129, .05); --card: #161f1a; --card2: #1e2a23; --card-glass: rgba(22, 31, 26, .82); --text: #edf5f0; --text-dim: #a5b5ab; --text-faint: #6f8076; --line: rgba(237, 245, 240, .08); --line-strong: rgba(237, 245, 240, .16); --accent: #34d399; --accent-contrast: #06281c; --accent-soft: rgba(52, 211, 153, .13); --accent-line: rgba(52, 211, 153, .35); } :root[data-theme="green"][data-mode="light"] { --bg: #f1f8f3; --bg-glow1: rgba(5, 150, 105, .09); --bg-glow2: rgba(16, 185, 129, .05); --card: #ffffff; --card2: #e9f3ec; --card-glass: rgba(255, 255, 255, .86); --text: #1e2b23; --text-dim: #5c6f63; --text-faint: #8ba093; --line: rgba(30, 43, 35, .09); --line-strong: rgba(30, 43, 35, .18); --accent: #059669; --accent-contrast: #ffffff; --accent-soft: rgba(5, 150, 105, .10); --accent-line: rgba(5, 150, 105, .35); } /* ============================================================ Grundlayout ============================================================ */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--text); background: radial-gradient(1100px 500px at 15% -5%, var(--bg-glow1), transparent 60%), radial-gradient(900px 500px at 95% 10%, var(--bg-glow2), transparent 55%), var(--bg); background-attachment: fixed; min-height: 100vh; transition: background-color var(--dur), color var(--dur); } .app { max-width: var(--content-max); margin: 0 auto; padding: 0 16px calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 24px); } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; } h2 { font-size: 19px; } h3 { font-size: 15px; } p { margin: 6px 0 0; color: var(--text-dim); font-size: 13.5px; } .num, .kpi-value, .node-value, .stat-value { font-variant-numeric: tabular-nums; } /* ============================================================ Topbar ============================================================ */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); margin: 0 -16px 14px; padding-left: 16px; padding-right: 16px; background: var(--card-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .brand-logo { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--c-pv2, var(--accent))); color: var(--accent-contrast); box-shadow: var(--shadow-soft); } .brand-logo svg { width: 22px; height: 22px; } .brand-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; } .brand-sub { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } .topnav { display: none; gap: 4px; margin-left: 10px; } .topnav .nav-item { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text-dim); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background var(--dur), color var(--dur); } .topnav .nav-item svg { width: 17px; height: 17px; } .topnav .nav-item:hover { color: var(--text); background: var(--card2); } .topnav .nav-item.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } .top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .status-chip { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 2.4s infinite; } .status-chip.err .status-dot { background: var(--err); animation: none; } .status-chip.err { color: var(--err); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); } 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } .status-chip .status-text { display: none; } .icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--text-dim); cursor: pointer; transition: color var(--dur), border-color var(--dur), transform .12s; } .icon-btn:hover { color: var(--text); border-color: var(--line-strong); } .icon-btn:active { transform: scale(.94); } .icon-btn svg { width: 19px; height: 19px; } /* Menü-Dropdown */ .menu-wrap { position: relative; } .menu-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 230px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 6px; display: none; z-index: 60; } .menu-pop.open { display: block; animation: pop .14s ease-out; } @keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } } .menu-user { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .menu-user strong { display: block; font-size: 14px; } .menu-user span { font-size: 12px; color: var(--text-faint); } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; } .menu-item:hover { background: var(--card2); } .menu-item svg { width: 17px; height: 17px; color: var(--text-dim); } .menu-item.danger { color: var(--err); } .menu-item.danger svg { color: var(--err); } /* ============================================================ Bottom-Navigation (Mobil) ============================================================ */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--card-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); } .bottomnav .nav-item { flex: 1; max-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--text-faint); font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; transition: color var(--dur); } .bottomnav .nav-item svg { width: 22px; height: 22px; } .bottomnav .nav-item.active { color: var(--accent); } .bottomnav .nav-item:active { transform: scale(.95); } /* ============================================================ Views & Cards ============================================================ */ .view { display: none; } .view.active { display: block; animation: viewIn .25s ease-out; } @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: 18px; margin-bottom: 14px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .card-head p { margin-top: 2px; } .eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-bottom: 2px; } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; } /* ============================================================ Energiefluss (Hero) ============================================================ */ .hero-card { position: relative; overflow: hidden; } .flow-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 12px; align-items: stretch; } .flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .flow-path { fill: none; stroke-linecap: round; opacity: .12; transition: opacity .4s, stroke-width .4s; } .flow-particle { opacity: 0; } .flow-node { position: relative; z-index: 1; background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; transition: border-color .4s, box-shadow .4s; } .flow-node.active-node { border-color: var(--node-color, var(--accent-line)); box-shadow: 0 0 0 1px var(--node-color, transparent) inset, var(--shadow-soft); } .node-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .node-head svg { width: 18px; height: 18px; flex: 0 0 auto; } .node-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); } .node-value { font-size: clamp(19px, 5.4vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; } .node-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .node-badges { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } .node-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); white-space: nowrap; } .node-badge svg { width: 13px; height: 13px; flex: 0 0 auto; } .node-badge strong { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .node-pv .node-head svg { color: var(--c-pv); } .node-grid .node-head svg { color: var(--c-grid-in); } .node-batt .node-head svg { color: var(--c-batt); } .node-house .node-head svg { color: var(--c-house); } /* Zentrum: Heute-Ring */ .flow-center { grid-column: 1 / -1; justify-self: center; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 168px; height: 168px; border-radius: 50%; background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft), 0 0 0 10px var(--accent-soft); position: relative; } .center-ring { position: absolute; inset: -1px; } .center-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .center-ring circle { fill: none; stroke-width: 4; } .center-ring .ring-bg { stroke: var(--line); } .center-ring .ring-val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .8s ease; } .center-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); } .center-value { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 2px 0; } .center-unit { font-size: 12px; color: var(--text-dim); font-weight: 600; } .center-status { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--text-dim); } .center-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .center-status.err .dot { background: var(--err); } /* Batterie-Balken */ .batt-bar { height: 6px; border-radius: 4px; background: var(--line); margin-top: 8px; overflow: hidden; } .batt-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c-batt), var(--c-soc)); width: 0; transition: width .8s ease; } .batt-bar.low .batt-fill { background: linear-gradient(90deg, var(--err), var(--warn)); } /* ============================================================ KPI-Kacheln ============================================================ */ .kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-soft); min-width: 0; } .kpi-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .kpi-label svg { width: 14px; height: 14px; flex: 0 0 auto; } .kpi-value { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; white-space: nowrap; } .kpi-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ Charts ============================================================ */ .chart-box { position: relative; width: 100%; height: 300px; } .chart-box.tall { height: 360px; } .chart-box.small { height: 240px; } .chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .chart-empty { position: absolute; inset: 0; display: none; place-items: center; color: var(--text-faint); font-size: 13.5px; text-align: center; padding: 20px; } .chart-empty.show { display: grid; } /* ============================================================ Steuerelemente ============================================================ */ .seg { display: inline-flex; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; } .seg button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background var(--dur), color var(--dur); white-space: nowrap; } .seg button.active { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-soft); } .range-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .range-label { font-size: 13.5px; font-weight: 700; min-width: 130px; text-align: center; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color var(--dur), background var(--dur), transform .12s; text-decoration: none; } .btn:hover { border-color: var(--accent-line); } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn svg { width: 16px; height: 16px; } .btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-contrast); } .btn.primary:hover { filter: brightness(1.06); } .btn.small { padding: 6px 11px; font-size: 12.5px; border-radius: 10px; } .btn.icon-only { padding: 8px 10px; } button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================ Statistiken (Ertrag) ============================================================ */ .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; } .stat { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; min-width: 0; } .stat-label { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; } .stat-value { font-size: 18px; font-weight: 800; margin-top: 2px; white-space: nowrap; } .stat-sub { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-value .up { color: var(--ok); } .stat-value .down { color: var(--err); } /* ============================================================ Livewerte ============================================================ */ .live-group { margin-bottom: 14px; } .live-group-head { display: flex; align-items: center; gap: 9px; margin: 0 2px 8px; font-size: 13px; font-weight: 700; color: var(--text-dim); } .live-group-head svg { width: 16px; height: 16px; color: var(--accent); } .live-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .live-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; } .live-name { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .live-val { font-size: 16.5px; font-weight: 750; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; } .live-ts { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; } .live-tile.stale { opacity: .55; } /* ============================================================ Formulare & Admin ============================================================ */ .subnav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; } .subnav button { flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .subnav button.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .admin-panel { display: none; } .admin-panel.active { display: block; } fieldset.form-group { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px 16px; margin: 0 0 14px; background: var(--card2); } fieldset.form-group legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); padding: 0 7px; } .form-grid { display: grid; grid-template-columns: 1fr; gap: 11px; } label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); min-width: 0; } label.field > span { padding-left: 2px; } input, select, textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 12px; width: 100%; transition: border-color var(--dur); } input:hover, select:hover { border-color: var(--accent-line); } input::placeholder { color: var(--text-faint); } label.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--text); padding: 4px 2px; cursor: pointer; } label.check input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; padding: 0; } .form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .saved-hint { font-size: 12.5px; color: var(--ok); font-weight: 600; } .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .toolbar-input { width: auto; min-width: 0; flex: 1 1 130px; } .toolbar-input.small { flex: 0 0 84px; } .toolbar-select { width: auto; } /* Tabellen */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; font-size: 13px; } thead th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 10px 12px; background: var(--card2); border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; } tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--card2); } td input, td select { padding: 6px 9px; font-size: 13px; } td input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); } .row-actions { display: flex; gap: 6px; } /* Debug / Code */ pre, code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; } pre { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; overflow: auto; max-height: 420px; white-space: pre-wrap; word-break: break-word; color: var(--text-dim); } .api-list { display: flex; flex-direction: column; gap: 6px; } .api-list code { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; overflow-x: auto; white-space: nowrap; } .kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .kv-grid > div { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; min-width: 0; } .kv-grid strong { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 2px; } .kv-grid span { font-size: 13px; font-weight: 600; word-break: break-word; } details.fold { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 14px; background: var(--card2); margin-top: 12px; } details.fold summary { padding: 12px 0; font-weight: 600; font-size: 13.5px; cursor: pointer; color: var(--text-dim); } details.fold[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; } details.fold > *:not(summary) { margin-bottom: 12px; } /* SQL Browser */ .sql-layout { display: grid; grid-template-columns: 1fr; gap: 14px; } .sql-tables { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; } .sql-table-item { text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card2); color: var(--text); padding: 8px 11px; font: inherit; font-size: 13px; cursor: pointer; } .sql-table-item span { display: block; font-size: 11px; color: var(--text-faint); } .sql-table-item.active { border-color: var(--accent-line); background: var(--accent-soft); } .sql-meta { font-size: 12px; color: var(--text-faint); margin: 8px 2px; } .sql-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--text-dim); } textarea.sql-input { min-height: 96px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; resize: vertical; } /* ============================================================ Theme-Sheet (Darstellung) ============================================================ */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 90; display: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .sheet-backdrop.open { display: block; animation: fadeIn .18s; } @keyframes fadeIn { from { opacity: 0; } } .sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(480px, 100%); z-index: 91; background: var(--card); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: none; box-shadow: var(--shadow); } .sheet.open { display: block; animation: sheetUp .25s ease-out; } @keyframes sheetUp { from { transform: translate(-50%, 40px); opacity: 0; } } .sheet-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 14px; } .seg.mode-seg { display: flex; width: 100%; margin: 10px 0 16px; } .mode-seg button { flex: 1; } .theme-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .theme-card { border: 2px solid var(--line); border-radius: var(--r-md); background: var(--card2); padding: 11px 8px 9px; cursor: pointer; font: inherit; color: var(--text); text-align: center; transition: border-color var(--dur); } .theme-card.active { border-color: var(--accent); background: var(--accent-soft); } .theme-card .swatches { display: flex; justify-content: center; gap: 4px; margin-bottom: 7px; } .theme-card .sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); } .theme-card .tname { font-size: 12px; font-weight: 700; } .sw-solar-a { background: #fbbf24; } .sw-solar-b { background: #1d1913; } .sw-solar-c { background: #f8f4ec; } .sw-tech-a { background: #38bdf8; } .sw-tech-b { background: #151b24; } .sw-tech-c { background: #f2f5f9; } .sw-green-a { background: #34d399; } .sw-green-b { background: #161f1a; } .sw-green-c { background: #f1f8f3; } /* ============================================================ Toast ============================================================ */ .toast { position: fixed; left: 50%; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 16px); transform: translate(-50%, 16px); background: var(--card); color: var(--text); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 11px 18px; font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100; max-width: min(92vw, 480px); text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ============================================================ Login ============================================================ */ .login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; } .login-shell { width: min(400px, 100%); } .login-card { padding: 28px 26px; } .login-logo { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--c-pv2, var(--accent))); color: var(--accent-contrast); margin-bottom: 16px; box-shadow: var(--shadow-soft); } .login-logo svg { width: 30px; height: 30px; } .login-card h1 { font-size: 22px; margin-bottom: 2px; } .login-form { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; } .login-form button { margin-top: 4px; } .login-error { background: rgba(251, 113, 133, .12); border: 1px solid rgba(251, 113, 133, .4); color: var(--err); border-radius: 10px; padding: 10px 13px; font-size: 13px; font-weight: 600; margin-top: 14px; } .login-hint { font-size: 13px; color: var(--text-dim); margin-top: 12px; } .hidden { display: none !important; } /* ============================================================ Helfer ============================================================ */ .admin-hidden { display: none !important; } .muted { color: var(--text-faint); font-size: 13px; } .spacer { flex: 1; } .loading-pulse { animation: skeleton 1.4s ease-in-out infinite; } @keyframes skeleton { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================ Responsive: Tablet & Desktop ============================================================ */ @media (min-width: 560px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } .live-grid { grid-template-columns: repeat(3, 1fr); } .form-grid { grid-template-columns: repeat(2, 1fr); } .stat-row { grid-template-columns: repeat(4, 1fr); } .kv-grid { grid-template-columns: repeat(3, 1fr); } .status-chip .status-text { display: inline; } } @media (min-width: 900px) { body { font-size: 15.5px; } .app { padding-bottom: 40px; } .topnav { display: flex; } .bottomnav { display: none; } .toast { bottom: 28px; } .kpi-grid { grid-template-columns: repeat(6, 1fr); } .live-grid { grid-template-columns: repeat(4, 1fr); } .grid-2 { grid-template-columns: 1fr 1fr; } .form-grid { grid-template-columns: repeat(3, 1fr); } /* Energiefluss Desktop: 3 Spalten, Zentrum in der Mitte */ .flow-stage { grid-template-columns: minmax(190px, 1fr) minmax(200px, auto) minmax(190px, 1fr); grid-template-rows: 1fr 1fr; gap: 18px 26px; min-height: 300px; } .flow-center { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 195px; height: 195px; } .node-pv { grid-column: 1; grid-row: 1; } .node-grid { grid-column: 3; grid-row: 1; } .node-batt { grid-column: 1; grid-row: 2; } .node-house { grid-column: 3; grid-row: 2; } .flow-node { padding: 15px 17px; } .node-value { font-size: 27px; } .chart-box { height: 340px; } .chart-box.tall { height: 420px; } .chart-box.small { height: 260px; } .sql-layout { grid-template-columns: 240px 1fr; } .sql-tables { max-height: 520px; } .sheet { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: var(--r-lg); border-bottom: 1px solid var(--line-strong); } .sheet.open { animation: pop .18s ease-out; } .sheet-grab { display: none; } } /* Mobil: Energiefluss-Reihenfolge — PV/Netz oben, Zentrum Mitte, Akku/Haus unten */ @media (max-width: 899px) { .node-pv { grid-column: 1; grid-row: 1; } .node-grid { grid-column: 2; grid-row: 1; } .flow-center { grid-row: 2; margin: 6px 0; } .node-batt { grid-column: 1; grid-row: 3; } .node-house { grid-column: 2; grid-row: 3; } }