/* Stromzaehler -- Anzeige. Auf einen Bildschirm gerechnet, der aus einigen
   Metern Abstand lesbar sein soll: wenige, grosse Zahlen. */
:root {
  --grund: #11212b;
  --flaeche: #18303d;
  --rand: #24485a;
  --schrift: #eef4f7;
  --gedaempft: #8fa9b7;
  --bezug: #ffb02e;
  --einspeisung: #4cc98a;
  --warnung: #ff6b5e;
  /* Farben fuer die Kurven der Schaltdosen. Bewusst nur drei: mehr Linien
     in einem Bild liest niemand mehr auseinander. */
  /* Die drei Phasen. Die Norm sieht Braun, Schwarz und Grau vor (IEC
     60446) -- auf dunklem Grund waeren Schwarz und Grau kaum zu
     unterscheiden, und darum geht es hier: die Schieflast soll ins Auge
     fallen. L1 bleibt dem Braun nah, L2 und L3 weichen bewusst ab. */
  --l1: #d98c4a;
  --l2: #6cb6e8;
  --l3: #b58cd9;
  --dose-a: #6ba8ff;
  --dose-b: #c58cf0;
  --dose-c: #f0a6c0;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut wirkt nur ueber das Standard-Stylesheet des Browsers
   -- jede eigene display-Regel schlaegt es. Ein Block mit display:inline-flex
   bleibt also sichtbar, obwohl er hidden traegt. Darum hier ausdruecklich
   und mit Vorrang. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 1.2rem;
  background: var(--grund);
  color: var(--schrift);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

main { max-width: 1100px; margin: 0 auto; }

section { margin-bottom: 1.2rem; }

h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gedaempft);
  margin: 0 0 .5rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* --- Momentanwert --------------------------------------------------- */
.jetzt { text-align: center; padding: .5rem 0 0; }

.gross {
  font-size: clamp(4rem, 17vw, 9rem);
  font-weight: 250;
  line-height: 1;
  color: var(--bezug);
  letter-spacing: -.03em;
}

.einheit {
  font-size: .32em;
  font-weight: 400;
  color: var(--gedaempft);
  margin-left: .15em;
}

.unterzeile { color: var(--gedaempft); margin-top: .3rem; font-size: 1rem; }
.trenner { opacity: .5; margin: 0 .4rem; }

.phasen {
  display: flex;
  /* stretch statt der Vorgabe: hat nur eine Phase eine Zuordnungszeile,
     stuenden die drei Kacheln sonst unterschiedlich hoch nebeneinander. */
  align-items: stretch;
  justify-content: center;
  gap: .6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.phase {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-top: 3px solid var(--ph-farbe, var(--rand));
  border-radius: 8px;
  padding: .5rem .9rem;
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-align: left;
}

.phase-l1 { --ph-farbe: var(--l1); }
.phase-l2 { --ph-farbe: var(--l2); }
.phase-l3 { --ph-farbe: var(--l3); }

.ph-name {
  color: var(--ph-farbe, var(--gedaempft));
  font-size: .8rem;
  letter-spacing: .08em;
  font-weight: 600;
}

.ph-w { font-size: 1.3rem; font-weight: 500; }
.ph-ui { color: var(--gedaempft); font-size: .8rem; }

/* Ein Balken je Phase, bezogen auf die hoechste der drei. So faellt eine
   Schieflast ins Auge, ohne dass man drei Zahlen vergleichen muss. */
.ph-balken {
  height: 4px;
  background: var(--grund);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .3rem;
}

.ph-fuellung {
  height: 100%;
  width: 0;
  background: var(--ph-farbe, var(--gedaempft));
  transition: width .5s ease;
}

.schieflast {
  color: var(--gedaempft);
  font-size: .8rem;
  margin-top: .5rem;
}

/* --- Mittelwerte ---------------------------------------------------- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .6rem;
}

/* Die Ueberschrift ist Teil des Gitters und muesste sich sonst eine Spalte
 * mit der ersten Kachel teilen. Ueber die ganze Breite, und der Abstand
 * darunter kommt vom gap. */
.kacheln h2 {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.kachel {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: .8rem 1rem;
}

.kachel-titel {
  color: var(--gedaempft);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.kachel-wert { font-size: 1.9rem; font-weight: 300; margin: .2rem 0; }
.kachel-fuss { color: var(--gedaempft); font-size: .78rem; }

/* --- Laufende Viertelstunde ----------------------------------------- */
.viertelstunde {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--bezug);
  border-radius: 10px;
  padding: .9rem 1.1rem;
}

.vs-titel {
  color: var(--gedaempft);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.vs-inhalt { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vs-wert { font-size: 2.4rem; font-weight: 300; min-width: 6rem; }

.vs-balken {
  flex: 1 1 12rem;
  height: 10px;
  background: var(--grund);
  border-radius: 5px;
  overflow: hidden;
}

.vs-fuellung {
  height: 100%;
  width: 0;
  background: var(--bezug);
  transition: width .6s ease;
}

.vs-hinweis { color: var(--gedaempft); font-size: .85rem; }

.erklaerung {
  color: var(--gedaempft);
  font-size: .82rem;
  line-height: 1.45;
  margin: .6rem 0 0;
  max-width: 62ch;
}

/* --- Graph ----------------------------------------------------------- */
.graph-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
}

.graph-kopf nav { display: flex; gap: .3rem; flex-wrap: wrap; }

.graph-kopf a {
  color: var(--gedaempft);
  text-decoration: none;
  font-size: .85rem;
  padding: .25rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
}

.graph-kopf a.hier { color: var(--grund); background: var(--bezug); border-color: var(--bezug); }

#chart {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: .4rem;
}

.chart { width: 100%; height: auto; display: block; }
.gitter { stroke: var(--rand); stroke-width: .5; }
.achse { fill: var(--gedaempft); font-size: 11px; }
.linie { fill: none; stroke: var(--bezug); stroke-width: 2; stroke-linejoin: round; }
.flaeche { fill: var(--bezug); opacity: .13; }

/* --- Spitzen --------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--rand); text-align: left; }
th { color: var(--gedaempft); font-weight: 500; font-size: .8rem; text-transform: uppercase; }
.r { text-align: right; }
.stark { font-weight: 600; }
.muted { color: var(--gedaempft); }
.hoechste td { color: var(--bezug); }
.luecke { color: var(--warnung); }

footer {
  max-width: 1100px;
  margin: 1.5rem auto 0;
  color: var(--gedaempft);
  font-size: .78rem;
  text-align: center;
}

/* Kommen keine Telegramme mehr, faellt die grosse Zahl sichtbar ab --
   eine eingefrorene Anzeige soll nicht wie eine laufende aussehen. */
body.veraltet .gross { color: var(--warnung); opacity: .55; }
body.veraltet .unterzeile { color: var(--warnung); }

@media (max-width: 600px) {
  body { padding: .7rem; }
  .vs-wert { font-size: 1.8rem; }
}

/* Fehlermeldungen des Servers im Klartext -- der Statuscode allein sagt
   nichts darueber, was zu tun ist. */
.fehlerkasten {
  background: #3a1d1c;
  border: 1px solid var(--warnung);
  border-radius: 8px;
  color: #ffd9d5;
  padding: .8rem 1rem;
  margin: 0 0 1rem;
  white-space: pre-wrap;
  font-size: .85rem;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Grundlast ------------------------------------------------------- */
.grundlast {
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--einspeisung);
  border-radius: 10px;
}

.gl-kopf {
  color: var(--gedaempft);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.gl-zeile { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.gl-wert { font-size: 1.9rem; font-weight: 300; color: var(--einspeisung); }
.gl-wann { color: var(--gedaempft); }
.gl-weitere { color: var(--gedaempft); font-size: .82rem; margin-top: .2rem; }
.gl-rand { color: var(--gedaempft); font-size: .82rem; margin-top: .35rem; }

/* --- Hausverbrauch --------------------------------------------------- */
.haus {
  margin-top: .9rem;
  padding: .5rem .9rem;
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 999px;
}

.haus-wert { font-size: 1.4rem; font-weight: 400; color: var(--einspeisung); }
.haus-text { color: var(--gedaempft); font-size: .85rem; }

/* --- Schaltdosen ------------------------------------------------------ */
.dosen-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
}

.dose {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--dose-a);
  border-radius: 10px;
  padding: .7rem .9rem;
}

.dose-erzeugung { border-left-color: var(--einspeisung); }
.dose-stumm { opacity: .5; }
.dose-name { color: var(--gedaempft); font-size: .82rem; }
.dose-wert { font-size: 1.5rem; font-weight: 300; margin: .1rem 0; }
.dose-erzeugung .dose-wert { color: var(--einspeisung); }
.dose-fuss { color: var(--gedaempft); font-size: .78rem; }

/* --- Weitere Kurven im Graphen --------------------------------------- */
.linie-dose { stroke-width: 1.5; }
.reihe-erzeugung { stroke: var(--einspeisung); }
.reihe-a { stroke: var(--dose-a); }
.reihe-b { stroke: var(--dose-b); }
.reihe-c { stroke: var(--dose-c); }

.legende {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .5rem;
  color: var(--gedaempft);
  font-size: .8rem;
}

.legende-eintrag { display: inline-flex; align-items: center; gap: .35rem; }

.legende-eintrag i {
  width: 14px;
  height: 0;
  border-top: 2px solid currentColor;
  display: inline-block;
}

.legende-eintrag i.linie { border-color: var(--bezug); }
.legende-eintrag i.reihe-erzeugung { border-color: var(--einspeisung); }
.legende-eintrag i.reihe-a { border-color: var(--dose-a); }
.legende-eintrag i.reihe-b { border-color: var(--dose-b); }
.legende-eintrag i.reihe-c { border-color: var(--dose-c); }

.reihe-l1 { stroke: var(--l1); }
.reihe-l2 { stroke: var(--l2); }
.reihe-l3 { stroke: var(--l3); }
.legende-eintrag i.reihe-l1 { border-color: var(--l1); }
.legende-eintrag i.reihe-l2 { border-color: var(--l2); }
.legende-eintrag i.reihe-l3 { border-color: var(--l3); }

/* Die Nulllinie nur zeigen, wenn es etwas darunter gibt -- eine
   einspeisende Phase. Sonst waere sie bloss die Grundlinie. */
.nulllinie { stroke: var(--gedaempft); stroke-width: 1; stroke-dasharray: 4 4; }

.graph-kopf nav.ansicht { margin-left: auto; }
.graph-kopf nav.ansicht a { border-style: dashed; }
.graph-kopf nav.ansicht a.hier { border-style: solid; }

.linie.gedaempft { stroke: var(--gedaempft); stroke-width: 1.5; opacity: .7; }
.flaeche.gedaempft { fill: var(--gedaempft); opacity: .08; }
.legende-eintrag i.linie.gedaempft { border-color: var(--gedaempft); }

/* --- Schalter an den Dosen ------------------------------------------- */
.dose-knopf {
  margin-top: .5rem;
  width: 100%;
  padding: .35rem .6rem;
  font: inherit;
  font-size: .85rem;
  color: var(--schrift);
  background: transparent;
  border: 1px solid var(--rand);
  border-radius: 6px;
  cursor: pointer;
}

.dose-knopf:hover:not(:disabled) { border-color: var(--bezug); color: var(--bezug); }
.dose-knopf.knopf-aus:hover:not(:disabled) { border-color: var(--warnung); color: var(--warnung); }
.dose-knopf:disabled { opacity: .5; cursor: default; }

/* --- Anmeldung ------------------------------------------------------- */

body.anmeldeseite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.anmeldung {
  max-width: 24rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.anmeldung h1 {
  margin: 0 0 1.25rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.anmeldung form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.anmeldung label {
  font-size: 0.85rem;
  color: var(--matt, #8fa3b0);
}

.anmeldung input[type="password"] {
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
}

.anmeldung input[type="password"]:focus {
  outline: 2px solid var(--akzent, #4aa3c7);
  outline-offset: 1px;
}

.anmeldung button,
.anmeldung .knopf {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: #06131b;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--akzent, #4aa3c7);
  border: 0;
  border-radius: 6px;
}

.anmeldung button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.anmeldung .fehler {
  padding: 0.5rem 0.7rem;
  margin-top: 0.9rem;
  font-size: 0.9rem;
  background: rgba(200, 70, 70, 0.16);
  border-left: 3px solid #c84646;
  border-radius: 3px;
}

.hinweis-kasten {
  padding: 0.7rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--akzent, #4aa3c7);
  border-radius: 3px;
}

.hinweis-kasten code {
  font-size: 0.85em;
  white-space: nowrap;
}

/* Rollenhinweis im Fuss */
.rolle {
  white-space: nowrap;
}

.abmelden {
  display: inline;
}

.abmelden button {
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  opacity: 0.75;
}

.abmelden button:hover {
  opacity: 1;
}

/* --- Phasenzuordnung der Schaltdosen --------------------------------- */

/* Das Kennzeichen an der Dosenkachel. Farbe und Beschriftung wie bei der
   Phasenkachel, nur kleiner -- es soll einordnen, nicht ablenken. */
.dose-phase {
  display: inline-block;
  padding: .05rem .3rem;
  margin-right: .4rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: .05em;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: .9;
}

.dose-phase.phase-l1 { color: var(--l1, #e0913c); }
.dose-phase.phase-l2 { color: var(--l2, #4a9fd4); }
.dose-phase.phase-l3 { color: var(--l3, #a978d8); }

/* Bekannter und offener Anteil unter dem Phasenbalken. */
.ph-zu {
  display: block;
  /* Nach unten geschoben, damit die Zeile am Fuss der Kachel steht und die
     Balken aller drei auf einer Hoehe bleiben. */
  margin-top: auto;
  padding-top: .35rem;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--gedaempft);
}

.ph-zu em {
  font-style: normal;
  opacity: .75;
}

.ph-zu-warnung {
  color: #d98b6a;
}