/* Zuhause – Hannas App. Gestaltung wie das abgenommene Mockup (_Konzept/Mockup.html): Schrift und Fachfarben der Familie
   (SunnyMonitor/_Branding/tokens.css — die geteilten Werte hält FarbenTests mit tokens.css gleich), dazu eine helle Fassung fürs
   iPhone; dunkel folgt der Einstellung des Telefons. */
:root {
  /* Familie (_Branding/tokens.css) */
  --f-erzeugung: #facc15;
  --f-verbrauch: #38bdf8;
  --f-bezug: #e11d48;
  --f-einspeisung: #34d399;
  --font-display: "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
  --font-text: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Hell: kühles Grau mit dem Blau der Marke, weiße Karten */
  --grund: #e8edf3;
  --karte: #ffffff;
  --karte-2: #eef2f7;
  --linie: #d3dce7;
  --text: #172133;
  --text-2: #5a6a7e;
  --sonne: #eab308;
  --sonne-text: #a16207;
  --einsp-text: #047857;
  --bezug-text: #be123c;
  --ok: #059669;
  --achtung: #b45309;
  --nacht: #6366f1;
  --mond: #c7d2fe;
  --fenster: #dbeafe;
  --haus-wand: #f8fafc;
  --haus-dach: #94a3b8;
  --haus-kante: #475569;
  --haus-tuer: #64748b;
  --modul: #1e3a5f;
  --modul-kante: #93c5fd;
  --tab-haus: #0284c7;
  --tab-wasser: #ea580c;
  --tab-waerme: #db2777;
  --tab-pv: #ca8a04;
  --tab-glas: rgb(255 255 255 / .8);
  --schatten: 0 1px 2px rgb(15 23 42 / .06), 0 6px 18px rgb(15 23 42 / .07);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0f172a; --karte: #1e293b; --karte-2: #172235; --linie: #334155; --text: #e2e8f0; --text-2: #94a3b8;
    --sonne: #facc15; --sonne-text: #facc15; --einsp-text: #34d399; --bezug-text: #fb7185;
    --ok: #34d399; --achtung: #fbbf24; --nacht: #a5b4fc; --mond: #a5b4fc; --fenster: #334155;
    --haus-wand: #334155; --haus-dach: #475569; --haus-kante: #94a3b8; --haus-tuer: #1e293b; --modul: #0b1c33; --modul-kante: #60a5fa;
    --tab-haus: #38bdf8; --tab-wasser: #fb923c; --tab-waerme: #f472b6; --tab-pv: #facc15;
    --tab-glas: rgb(30 41 59 / .82); --schatten: 0 0 0 1px rgb(148 163 184 / .08);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; min-height: 100%; background: var(--grund); color: var(--text); font: 15px/1.4 var(--font-text);
       -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--tab-haus); outline-offset: 2px; }
a { color: var(--tab-haus); }

/* ---- Die App: Kopf, Seiten, Tab-Leiste ------------------------------------------------------------------------------------- */
.app { position: fixed; inset: 0; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; }
.kopf { flex: none; padding: calc(env(safe-area-inset-top, 0px) + 8px) 18px 6px; }
.kopf-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.kopf .unter { font-size: 13px; color: var(--text-2); }
.kopf h1 { margin: 2px 0 0; font: 700 29px/1.1 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf h1 span { display: none; }
.app[data-tab="haus"] [data-fuer="haus"], .app[data-tab="wasser"] [data-fuer="wasser"],
.app[data-tab="waerme"] [data-fuer="waerme"], .app[data-tab="pv"] [data-fuer="pv"] { display: inline; }
.live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--karte);
        box-shadow: var(--schatten); font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: puls 2s ease-in-out infinite; }
.live b { font-weight: 400; }
.live.still, .offline .live { color: var(--achtung); font-weight: 600; }
.live.still i, .offline .live i { background: var(--achtung); animation: none; }

.seiten { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.seiten::-webkit-scrollbar { display: none; }
.seite { display: none; flex-direction: column; gap: 12px; padding: 6px 16px 14px; }
.app[data-tab="haus"] [data-seite="haus"], .app[data-tab="wasser"] [data-seite="wasser"],
.app[data-tab="waerme"] [data-seite="waerme"], .app[data-tab="pv"] [data-seite="pv"] { display: flex; }
.fuss { margin: 0; padding: 2px 20px calc(112px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.abmelden { display: inline; }
.abmelden button { border: 0; padding: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; }

.tabs { position: fixed; left: max(12px, calc(50% - 248px)); right: max(12px, calc(50% - 248px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        height: 64px; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 26px; background: var(--tab-glas);
        -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
        box-shadow: 0 10px 28px rgb(15 23 42 / .16), 0 0 0 1px var(--linie); }
.tab { position: relative; border: 0; background: none; color: var(--text-2); cursor: pointer; display: flex; flex-direction: column;
       align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab[data-tab="haus"] { --akz: var(--tab-haus); }
.tab[data-tab="wasser"] { --akz: var(--tab-wasser); }
.tab[data-tab="waerme"] { --akz: var(--tab-waerme); }
.tab[data-tab="pv"] { --akz: var(--tab-pv); }
.tab[aria-current="page"] { color: var(--akz); }
.tab[aria-current="page"] svg { stroke-width: 2.2; }
.tab[aria-current="page"]::before { content: ""; position: absolute; inset: 7px 8px; border-radius: 18px; background: color-mix(in srgb, var(--akz) 15%, transparent); z-index: -1; }

/* ---- Karten und Grundbausteine ---------------------------------------------------------------------------------------------- */
.karte { background: var(--karte); border-radius: 22px; padding: 14px 16px; box-shadow: var(--schatten); }
.etikett { margin: 0 0 8px; font: 600 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kennzahl b { display: block; font: 700 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.kennzahl span { display: block; font-size: 12px; color: var(--text-2); line-height: 1.25; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.platzhalter p { margin: 0; color: var(--text-2); }
.einspeisung-text { color: var(--einsp-text); }
.bezug-text { color: var(--bezug-text); }

/* ---- Haus ------------------------------------------------------------------------------------------------------------------ */
.fluss { padding: 10px 10px 12px; }
.fluss svg { display: block; width: 100%; height: auto; }
.fluss-werte { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 2px; }
.fluss-werte b { display: block; font: 700 21px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.fluss-werte span { font-size: 12.5px; color: var(--text-2); }
.strahlen { transform-box: fill-box; transform-origin: center; animation: drehen 30s linear infinite; }
.strahlen line { stroke: var(--sonne); stroke-width: 3; stroke-linecap: round; }
.sonnenball { fill: var(--f-erzeugung); }
.mondball { fill: var(--mond); }
.mondschatten { fill: var(--karte); }
.stern { fill: var(--text-2); }
.spur { fill: none; stroke: var(--linie); stroke-width: 6; stroke-linecap: round; }
.punkte { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 12; animation: fliessen var(--dauer, 1.5s) linear infinite; }
.punkte.rueck { animation-direction: reverse; }
.punkte.sonnenstrom { stroke: var(--f-erzeugung); }
.punkte.einspeisung { stroke: var(--f-einspeisung); }
.punkte.bezug { stroke: var(--f-bezug); }
.wand { fill: var(--haus-wand); stroke: var(--haus-kante); stroke-width: 2; }
.dach { fill: var(--haus-dach); stroke: var(--haus-kante); stroke-width: 2; stroke-linejoin: round; }
.modul { fill: var(--modul); stroke: var(--modul-kante); stroke-width: .8; }
.fenster { fill: var(--fenster); }
.fenster.licht { fill: #fcd34d; }
.tuer { fill: var(--haus-tuer); }
.mast { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leitung { fill: none; stroke: var(--linie); stroke-width: 1.5; }
.boden { stroke: var(--linie); stroke-width: 2; stroke-linecap: round; }

.hinweis { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px; background: var(--hb); }
.hinweis .symbol { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--hs); color: var(--hf); }
.hinweis .symbol svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hinweis b { display: block; font: 600 17.5px/1.15 var(--font-display); }
.hinweis p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.35; }
.hinweis-gruen { --hb: color-mix(in srgb, var(--f-einspeisung) 20%, var(--karte)); --hs: color-mix(in srgb, var(--f-einspeisung) 30%, var(--karte)); --hf: var(--einsp-text); }
.hinweis-gelb { --hb: color-mix(in srgb, var(--f-erzeugung) 22%, var(--karte)); --hs: color-mix(in srgb, var(--f-erzeugung) 40%, var(--karte)); --hf: var(--sonne-text); }
.hinweis-netz { --hb: color-mix(in srgb, var(--nacht) 14%, var(--karte)); --hs: color-mix(in srgb, var(--nacht) 24%, var(--karte)); --hf: var(--nacht); }
.hinweis-still { --hb: color-mix(in srgb, var(--achtung) 16%, var(--karte)); --hs: color-mix(in srgb, var(--achtung) 26%, var(--karte)); --hf: var(--achtung); }

.ringe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ring b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ring span { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.25; margin-top: 2px; }
.ring-spur { fill: none; stroke: var(--karte-2); stroke-width: 8; }
.ring-wert { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring-zahl { font: 700 15px var(--font-display); fill: var(--text); }

.balken { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--karte-2); margin: 12px 0 0; gap: 2px; }
.balken i { display: block; height: 100%; }
.balken-sonne { background: var(--sonne); }
.balken-netz { background: var(--f-bezug); }
.balken .balken-netz { flex: 1; }

.verbraucher { display: flex; flex-direction: column; gap: 11px; }
.vzeile { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; }
.vzeile .ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--karte-2); color: var(--text-2); }
.vzeile .ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vzeile .name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vzeile .mini { height: 5px; border-radius: 3px; background: var(--karte-2); margin-top: 5px; overflow: hidden; }
.vzeile .mini i { display: block; height: 100%; border-radius: 3px; background: var(--f-verbrauch); }
.vzeile .wert { font: 600 16.5px var(--font-display); font-variant-numeric: tabular-nums; }
.marke { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px;
         background: color-mix(in srgb, var(--f-erzeugung) 28%, transparent); color: var(--sonne-text); }
.aus-liste { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }

/* ---- Einzelne Seiten: Anmelden, Kennwort, keine Verbindung ------------------------------------------------------------------ */
.einzelseite { max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 48px) 26px calc(env(safe-area-inset-bottom, 0px) + 32px);
               display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.einzelseite h1 { margin: 8px 0 0; font: 700 30px/1.1 var(--font-display); }
.einzelseite > p { margin: 0; color: var(--text-2); font-size: 15px; max-width: 32ch; }
.app-icon { border-radius: 18px; box-shadow: 0 8px 22px rgb(3 105 161 / .3); }
.formular { width: 100%; margin-top: 14px; display: grid; gap: 6px; text-align: left; }
.formular label { font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-top: 6px; }
.formular input { height: 48px; border-radius: 14px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); padding: 0 14px; font-size: 16px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; height: 50px; margin-top: 12px; padding: 0 22px; border: 0; border-radius: 14px;
         background: var(--tab-haus); color: #ffffff; font-size: 16.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.fehler { margin: 6px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 14px; background: color-mix(in srgb, var(--f-bezug) 12%, transparent); color: var(--bezug-text); }

/* ---- Bewegung --------------------------------------------------------------------------------------------------------------- */
@keyframes fliessen { to { stroke-dashoffset: -12; } }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}