/* ==========================================================================
   EnergyNexus — PowerDot-Nachbau, Gestaltung (146 und Air)

   Gehoert zu stil/powerdot.js. Diese Datei traegt nur Gehaeuse, Rahmen und
   die Bedienelemente DANEBEN. Alles INNERHALB der runden Scheibe kommt aus
   dem Skript und traegt Geraetefarben — die stehen dort als Hexwerte, weil
   sie aus der Firmware kommen und nicht aus dem Gestaltungssystem der Seite.

   Der Nachbau rechnet innen in Geraetepunkten (412 x 412). Die Skalierung
   nach aussen macht eine einzige transform auf .pd-flaeche; jede Stelle aus
   der Firmware (y=-72, x=-90 ...) bleibt dadurch unveraendert im Skript.
   ========================================================================== */

.powerdot{
  margin:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  /* min-width:0 hebt das stillschweigende min-width:auto auf. Ohne das kann
     der Baustein als Flex- oder Rasterkind nicht unter die feste Breite
     seines Geraets schrumpfen und schiebt stattdessen seinen Behaelter
     auseinander — dieselbe Breite, die passeAn() gleich messen will. */
  min-width:0;max-width:100%;
}

/* Gehaeuse ---------------------------------------------------------------
   Der Rand liegt im box-shadow, nicht im Kasten: so bleibt die Scheibe
   genau --pd-mass gross und die Umrechnung auf Geraetepunkte stimmt. Der
   Platz fuer den Rand kommt aus dem margin. */
/* Das Netz gegen zu schmale Fenster ---------------------------------------
   Die Breite kommt aus passeAn(); dort steht die Rechnung. Faellt das
   Skript aus dem Tritt, faengt max-width. Abgezogen werden die 22 px
   Rand — mit blossem 100% stuende der Kasten selbst zwar im Behaelter,
   seine Raender ragten aber weiter hinaus.
   height:auto + aspect-ratio statt fester Hoehe: greift max-width doch
   einmal, bleibt die Scheibe rund statt zur Ellipse zu werden. Solange
   passeAn() arbeitet, kommt dabei dasselbe heraus wie vorher. */
.pd-geraet{
  width:var(--pd-mass,412px);height:auto;aspect-ratio:1;
  max-width:calc(100% - 22px);
  margin:11px;border-radius:50%;
  background:#000;position:relative;overflow:hidden;
  /* touch-action:none, weil auch nach oben und unten gewischt wird — mit
     pan-y wuerde die Seite rollen und die Geste nie beim Geraet ankommen. */
  touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;
  box-shadow:
    0 0 0 1px rgba(235,234,231,.12),
    0 0 0 10px #151515,
    0 0 0 11px rgba(235,234,231,.10),
    0 20px 46px rgba(0,0,0,.55);
}
.pd-geraet:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 1px rgba(235,234,231,.12),
    0 0 0 10px #151515,
    0 0 0 13px var(--hot,#ff5a1f),
    0 20px 46px rgba(0,0,0,.55);
}
.pd-geraet:active{cursor:grabbing;}

.pd-flaeche{
  position:absolute;left:0;top:0;width:412px;height:412px;
  transform:scale(var(--pd-skala,1));transform-origin:0 0;
  font-family:Montserrat,'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:500;line-height:1;letter-spacing:0;
}

/* Seiten ------------------------------------------------------------------
   Immer nur zwei Seiten gleichzeitig im Baum: die aktuelle und die, die
   gerade hinausschiebt. Der Uebergang entspricht dem Geraet (250 ms). */
.pd-seite{position:absolute;left:0;top:0;width:412px;height:412px;will-change:transform;}
.pd-seite.pd-lauf{transition:transform 250ms cubic-bezier(.25,.55,.3,1);}

.pd-t{position:absolute;white-space:nowrap;}

/* Solar-Geraeteliste (build_solar_detail) ---------------------------------
   Rollbarer Spaltenfluss. Alle Masse stehen im Skript, weil sie aus der
   Firmware kommen; hier steht nur, was das Rollen und den Fluss ausmacht. */
.pd-liste{
  position:absolute;box-sizing:border-box;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:#3a3a66 transparent;
  overscroll-behavior:contain;touch-action:pan-y;
}
.pd-liste:focus-visible{outline:2px solid var(--hot,#ff5a1f);outline-offset:2px;}
.pd-liste::-webkit-scrollbar{width:4px;}
.pd-liste::-webkit-scrollbar-thumb{background:#3a3a66;border-radius:2px;}
.pd-liste::-webkit-scrollbar-track{background:transparent;}

.pd-zeile{display:flex;flex-direction:row;align-items:center;flex:0 0 auto;box-sizing:border-box;}
.pd-zeilenpunkt{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.pd-zeilenspalte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;row-gap:1px;}

/* Der anklickbare Streifen unten schliesst die Liste. */
.pd-schliessen{
  position:absolute;left:0;bottom:0;width:412px;
  padding:0;margin:0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.pd-schliessen:focus-visible{outline:2px solid var(--hot,#ff5a1f);outline-offset:-3px;}

/* Tank-Einzelwert: die Fuellflaeche wird auf den Kreis beschnitten
   (lv_obj_set_style_clip_corner). */
.pd-scheibe{position:absolute;border-radius:50%;overflow:hidden;}

/* Punkte am unteren Rand --------------------------------------------------
   Sichtbar sind 12 Punkte-Pixel (412*7/240), anfassbar ist mehr — sonst
   waere das Ziel bei kleiner Darstellung nicht zu treffen.

   40 px und nicht 34: die ganze Vorschau wird auf schmalen Schirmen
   herunterskaliert, und die Trefferflaeche skaliert mit. Bei 320 px kam sie
   damit auf 21 x 21 und lag unter den 24 x 24 aus WCAG 2.5.8 - gemessen, nicht
   geschaetzt. 40 px halten dieselbe Skalierung bei rund 25 px aus.
   Sichtbar aendert sich nichts, der Punkt darin bleibt 12 px. */
.pd-punkt{
  position:absolute;width:40px;height:40px;padding:0;margin:0;
  background:none;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.pd-punkt i{display:block;width:12px;height:12px;border-radius:50%;background:#333;}
.pd-punkt:focus-visible{outline:2px solid var(--hot,#ff5a1f);outline-offset:-4px;}

/* Knoepfe IM Geraet (Air: Zeit stellen, Temperatur-Versatz) ---------------
   st_make_btn im Quelltext. Groesse, Farbe und Stelle stehen im Skript, weil
   sie aus der Firmware kommen; hier steht nur, was einen Knopf ausmacht. */
.pd-knopf{
  font:inherit;line-height:1;padding:0;margin:0;border:0;
  background:transparent;color:inherit;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
}
.pd-knopf:focus-visible{outline:2px solid var(--hot,#ff5a1f);outline-offset:2px;}
/* Die Zahlenfelder von Tag/Monat/Jahr/Stunde/Minute stehen im Flussband der
   Zeile, nicht absolut — deshalb kein pd-t davor. */
.pd-feld{position:static;display:inline-flex;}

/* Pulsierendes Badge (lv_anim auf die Deckkraft, 650 ms hin und zurueck) */
@keyframes pd-puls{from{opacity:1;}to{opacity:.43;}}
.pd-puls{animation:pd-puls 650ms ease-in-out infinite alternate;}

/* Leiste daneben ---------------------------------------------------------- */
.pd-leiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.pd-schalter{
  font:inherit;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  color:var(--bone,#ebeae7);background:transparent;
  border:1px solid var(--umriss,rgba(235,234,231,.38));
}
.pd-schalter::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--umriss,rgba(235,234,231,.38));
}
.pd-schalter[aria-pressed="true"]::before{background:var(--gut,#5bd08a);}
.pd-schalter:hover{border-color:var(--bone,#ebeae7);}

.pd-seitenname{
  font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint,rgba(235,234,231,.50));
}

.pd-hinweis{
  font-size:13px;line-height:1.6;max-width:46ch;
  color:var(--faint,rgba(235,234,231,.50));
}

/* Nur fuer Vorlesegeraete */
.pd-nurton{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Ruhige Darstellung ------------------------------------------------------
   Ohne Bewegung: keine Uebergaenge. Der Selbstlauf und das Fortschreiben
   der Werte werden im Skript abgeschaltet, nicht hier. */
@media (prefers-reduced-motion:reduce){
  .pd-seite.pd-lauf{transition:none;}
  .pd-puls{animation:none;}
}