/* Gartenteich – Dashboard nach dem Claude-Design „Zisternenwasser-Überwachungs-App" (design_handoff_zisterne/Zisterne.dc.html, übernommen aus dem Zisternen-Projekt). Tokens, Maße und Texte stammen aus der Design-Referenz; statt des 3D-Tanks zeigt die Bühne den Teich im Querschnitt. Drei Themes – dunkel (Standard), hell, natur – über data-theme am : Knopf im Kopf, Wahl in localStorage "teich.theme"; ohne eigene Wahl setzt index.html hell/dunkel nach der Systemeinstellung. */ :root { color-scheme: dark; --bg: #0d141a; --bg-1: #0d141a; /* Seitenverlauf oben, zugleich Farbe der Statusleiste (theme-color) */ --bg-2: #080c10; /* Seitenverlauf unten */ --text: #eaf2f8; --dim: #7e93a3; --panel: rgba(255, 255, 255, 0.045); --panel-b: rgba(255, 255, 255, 0.09); --accent: #39b6e8; --water: #54c4f0; --ok: #46d39a; --warn: #f0b24a; --bad: #f0706f; --stage: radial-gradient(130% 90% at 50% 8%, rgba(57, 182, 232, 0.16), transparent 62%); --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; } :root[data-theme="light"] { color-scheme: light; --bg: #eef3f6; --bg-1: #f2f6f8; --bg-2: #e6edf1; --text: #15242e; --dim: #5d7180; --panel: #ffffff; --panel-b: rgba(20, 44, 60, 0.1); --accent: #2f8fd6; --water: #2f8fd6; --ok: #1ea97c; --warn: #cf8a1f; --bad: #d65555; --stage: radial-gradient(130% 90% at 50% 8%, rgba(47, 143, 214, 0.18), transparent 62%); } :root[data-theme="organic"] { color-scheme: light; --bg: #f1ece1; --bg-1: #f4efe5; --bg-2: #ebe4d6; --text: #322c22; --dim: #7d735f; --panel: #fbf8f1; --panel-b: rgba(60, 50, 30, 0.12); --accent: #c47a4a; --water: #3fae9a; --ok: #5a9e6a; --warn: #c98a32; --bad: #c45c4f; --stage: radial-gradient(130% 90% at 50% 8%, rgba(63, 174, 154, 0.18), transparent 62%); } @keyframes zpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { background: var(--bg-2); } body { min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%) no-repeat; color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; display: flex; justify-content: center; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--mono); } .app { width: 100%; max-width: 460px; /* Abstände wie im Design; als Home-Bildschirm-App kommen die Ränder für Notch und Home-Leiste dazu (viewport-fit=cover; im Browser sind sie 0) */ padding: calc(20px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) calc(34px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; } /* ---------- Kopf ---------- */ .kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kopf-titel { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .overline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--dim); text-transform: uppercase; } .titel { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pille { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-b); flex: none; } .pille-punkt { width: 8px; height: 8px; border-radius: 999px; background: var(--dim); animation: zpulse 1.8s ease-in-out infinite; } .pille[data-status="online"] .pille-punkt { background: var(--ok); } .pille[data-status="sensorfehler"] .pille-punkt { background: var(--warn); } .pille[data-status="offline"] .pille-punkt, .pille[data-status="server"] .pille-punkt { background: var(--bad); } .pille-text { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; } .kopf-rechts { display: flex; align-items: center; gap: 8px; flex: none; } /* Theme-Knopf; das Symbol kommt aus dem CSS, damit es schon beim ersten Zeichnen zum Theme passt (vor app.js) */ .theme-knopf { width: 34px; height: 34px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-b); color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 15px; line-height: 1; flex: none; } .theme-knopf::before { content: "\263E"; } /* ☾ dunkel */ :root[data-theme="light"] .theme-knopf::before { content: "\2600\FE0E"; } /* ☀ hell, als Textzeichen statt Emoji */ :root[data-theme="organic"] .theme-knopf::before { content: "\2766"; } /* ❦ natur */ .theme-knopf:active { transform: scale(0.94); } .theme-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Banner ---------- */ .banner { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 14px; --ton: var(--warn); background: color-mix(in srgb, var(--ton) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ton) 38%, transparent); } .banner[data-ton="bad"] { --ton: var(--bad); } .banner[data-ton="accent"] { --ton: var(--accent); } .banner-punkt { width: 9px; height: 9px; border-radius: 999px; margin-top: 5px; flex: none; background: var(--ton); } .banner-text { display: flex; flex-direction: column; gap: 2px; } .banner-titel { font-size: 14px; font-weight: 700; color: var(--text); } .banner-sub { font-size: 12.5px; color: var(--dim); line-height: 1.45; } /* ---------- Bühne (Teich im Querschnitt) ---------- */ .buehne { position: relative; height: 336px; border-radius: 22px; overflow: hidden; background: var(--panel); border: 1px solid var(--panel-b); } .buehne-glow { position: absolute; inset: 0; background: var(--stage); } .teich { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .teich-erde { fill: color-mix(in srgb, var(--dim) 13%, transparent); } .teich-schicht path { fill: none; stroke: color-mix(in srgb, var(--dim) 22%, transparent); stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round; } .teich-folie { fill: none; stroke: color-mix(in srgb, var(--text) 26%, transparent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .teich-gelaende path { fill: none; stroke: color-mix(in srgb, var(--ok) 55%, var(--dim)); stroke-width: 1.6; stroke-linecap: round; } .teich-schilf path { fill: none; stroke: color-mix(in srgb, var(--ok) 70%, var(--dim)); stroke-width: 1.7; stroke-linecap: round; opacity: 0.85; } .teich-kolben { fill: color-mix(in srgb, var(--warn) 35%, #5c3f26); } /* Wasser: Pegel per transform (weich), Welle läuft nur bei Live-Daten */ .teich-wasser { transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1); } .teich-tiefe-oben { stop-color: var(--water); stop-opacity: 0.8; } .teich-tiefe-unten { stop-color: color-mix(in srgb, var(--water) 50%, #03141f); stop-opacity: 0.95; } .teich-koerper { fill: url(#teich-tiefe); transition: opacity 600ms ease; } .teich-spiegel { fill: none; stroke: color-mix(in srgb, var(--water) 45%, white); stroke-width: 1.6; } .teich[data-live="ja"] .teich-welle { animation: teich-welle 5s linear infinite; } .teich[data-live="nein"] .teich-koerper { opacity: 0.45; } @keyframes teich-welle { to { transform: translateX(36px); } } .teich-normal { stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; } .teich-grenze { stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 5 4; } .teich[data-filter="unterbrochen"] .teich-grenze { stroke: var(--bad); } .teich-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; fill: var(--dim); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; } .teich-label-normal { fill: var(--text); opacity: 0.75; } .teich-label-grenze { fill: var(--warn); } .teich[data-filter="unterbrochen"] .teich-label-grenze { fill: var(--bad); } /* Führungsrohr, Sensor, Kabel */ .teich-rohr-mantel { stroke: color-mix(in srgb, var(--text) 32%, transparent); stroke-width: 8; stroke-linecap: round; } .teich-rohr-innen { stroke: color-mix(in srgb, var(--bg) 55%, transparent); stroke-width: 4; stroke-linecap: round; } .teich-sensor { fill: color-mix(in srgb, var(--text) 62%, var(--dim)); } .teich-messpunkt { fill: var(--accent); } .teich-kabel { fill: none; stroke: color-mix(in srgb, var(--text) 38%, transparent); stroke-width: 1.5; stroke-linecap: round; } /* Filterbecken und Kreislauf: fließt nur, solange der Teich über der Filtergrenze steht */ .teich-becken-wasser { fill: var(--water); opacity: 0.7; transition: y 1100ms cubic-bezier(0.2, 0.7, 0.2, 1), height 1100ms cubic-bezier(0.2, 0.7, 0.2, 1); } .teich-leitung { fill: none; stroke: color-mix(in srgb, var(--text) 20%, transparent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .teich-pumpe { fill: color-mix(in srgb, var(--text) 40%, var(--dim)); } .teich-fluss, .teich-strahl { fill: none; stroke: var(--water); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 6; opacity: 0; transition: opacity 400ms ease; } .teich[data-live="ja"][data-filter="ok"] .teich-fluss, .teich[data-live="ja"][data-filter="ok"] .teich-strahl, .teich[data-live="ja"][data-filter="knapp"] .teich-fluss, .teich[data-live="ja"][data-filter="knapp"] .teich-strahl { opacity: 0.95; animation: teich-fluss 1.1s linear infinite; } .teich[data-filter="knapp"] .teich-fluss, .teich[data-filter="knapp"] .teich-strahl { animation-duration: 2.4s; } .teich[data-filter="unterbrochen"] .teich-leitung { stroke: color-mix(in srgb, var(--bad) 45%, transparent); } @keyframes teich-fluss { to { stroke-dashoffset: -18; } } /* Anzeige oben links über dem Gelände (der Teich liegt in der unteren Hälfte) */ .readout { position: absolute; left: 20px; top: 16px; display: flex; flex-direction: column; gap: 4px; } .readout-zahl { display: flex; align-items: baseline; gap: 4px; line-height: 1; font-family: var(--mono); font-size: 60px; font-weight: 700; color: var(--water); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .readout-einheit { font-size: 24px; font-weight: 500; letter-spacing: 0; } .readout-sub { font-size: 13px; color: var(--dim); font-weight: 500; font-variant-numeric: tabular-nums; } .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .overlay-titel { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bad); } .overlay[data-ton="warn"] .overlay-titel { color: var(--warn); } .overlay[data-ton="dim"] .overlay-titel, .overlay[data-ton="laden"] .overlay-titel { color: var(--dim); } .overlay-sub { font-size: 13px; color: var(--dim); } /* Ladezustand beim Start: drehender Ring über dem noch leeren Tank */ .overlay-spinner { display: none; width: 26px; height: 26px; margin-bottom: 6px; border-radius: 999px; border: 2.5px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: zdreh 0.9s linear infinite; } .overlay[data-ton="laden"] .overlay-spinner { display: block; } @keyframes zdreh { to { transform: rotate(360deg); } } /* ---------- Kennzahlen ---------- */ .karten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 11px; } .karte { padding: 14px 13px; border-radius: 16px; background: var(--panel); border: 1px solid var(--panel-b); display: flex; flex-direction: column; gap: 7px; min-width: 0; } .karte-label { font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: 0.02em; } .karte-wert { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Untertitel dürfen auf schmalen Handys umbrechen statt abgeschnitten zu werden */ .karte-sub { font-size: 11px; line-height: 1.3; color: var(--dim); overflow-wrap: anywhere; } .karte-wert[data-filter="ok"] { color: var(--ok); } .karte-wert[data-filter="knapp"] { color: var(--warn); } .karte-wert[data-filter="unterbrochen"] { color: var(--bad); } .karte-trend { font-family: var(--font); } .karte-trend[data-trend="steigt"] { color: var(--ok); } .karte-trend[data-trend="faellt"] { color: var(--dim); } .karte-trend[data-trend="stabil"] { color: var(--accent); } /* ---------- Verlauf ---------- */ .verlauf { padding: 16px 16px 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--panel-b); display: flex; flex-direction: column; gap: 12px; } .verlauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .verlauf-titel { font-size: 13px; font-weight: 700; color: var(--text); } .bereiche { display: flex; gap: 2px; } .bereiche button { font-size: 11px; letter-spacing: 0.06em; color: var(--dim); padding: 4px 7px; border-radius: 8px; transition: color 160ms ease, background 160ms ease; } .bereiche button:hover { color: var(--text); } .bereiche button.selected { color: var(--text); background: var(--panel-b); } .chart-wrap { position: relative; width: 100%; height: 92px; } #chart { width: 100%; height: 100%; display: block; overflow: visible; } .chart-schwelle { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; } .chart-normal { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; opacity: 0.8; } .chart-flaeche { fill: url(#zfill); } .chart-linie { fill: none; stroke: var(--water); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-ende { fill: var(--water); } .chart-ende-glow { fill: var(--water); opacity: 0.25; } .chart-fehler rect { fill: var(--warn); opacity: 0.6; } .chart-cursor line { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 2 3; } .chart-cursor circle { fill: var(--water); stroke: var(--bg); stroke-width: 2; } .chart-hit { fill: transparent; cursor: crosshair; } .tooltip { position: absolute; pointer-events: none; background: var(--text); color: var(--bg); font-size: 11px; line-height: 1.4; padding: 6px 9px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); z-index: 5; } .tooltip strong { font-weight: 700; } .tooltip .tt-zeit { display: block; opacity: 0.7; font-size: 10px; letter-spacing: 0.04em; } .chart-leer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 12px; text-align: center; } .verlauf-achse { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); letter-spacing: 0.04em; } .verlauf-schwelle { color: var(--warn); opacity: 0.8; } /* ---------- Fuß ---------- */ .fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; font-size: 12px; color: var(--dim); } .fuss .mono { font-size: 10.5px; letter-spacing: 0.05em; } .fuss-link { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--panel-b); transition: color 160ms ease, border-color 160ms ease; } .fuss-link:hover { color: var(--text); border-color: var(--dim); } /* ---------- Diagnose ---------- */ .diagnose { padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--panel-b); } .diagnose summary { cursor: pointer; list-style: none; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; justify-content: space-between; } .diagnose summary::-webkit-details-marker { display: none; } .diagnose summary::after { content: "+"; font-size: 14px; } .diagnose[open] summary::after { content: "–"; } .diagnose-liste { margin-top: 12px; display: flex; flex-direction: column; } .diagnose-liste div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--panel-b); font-size: 12px; } .diagnose-liste dt { color: var(--dim); } .diagnose-liste dd { font-family: var(--mono); font-size: 11.5px; color: var(--text); text-align: right; } .diagnose-hinweis { margin-top: 10px; font-size: 11px; color: var(--dim); line-height: 1.45; } /* ---------- Kleine Bildschirme ---------- */ @media (max-width: 380px) { .app { padding: calc(16px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)); } .readout-zahl { font-size: 52px; } .karte-wert { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .pille-punkt { animation: none; } .teich[data-live="ja"] .teich-welle { animation: none; } .teich .teich-fluss, .teich .teich-strahl { animation: none !important; } .overlay-spinner { animation-duration: 2.4s; } * { transition-duration: 0.01ms !important; } }