/*
  Gemeinsames Stylesheet der Abrechnungs-Seiten.

  Die Werte stammen aus solarmanager_website (Tailwind), sind hier aber als
  einfaches CSS abgelegt — diese Seiten sollen ohne Build-Schritt auskommen:

    Flaeche       dark-900  #fafafa      Karte      dark-700  #ffffff
    Rand          gray-200  #e4e4e7      Text       gray-700  #3f3f46
    Ueberschrift  gray-900  #18181b      gedaempft  gray-600  #52525b
    Button        solar-500 #18181b      Hover      solar-400 #27272a
    Link/Akzent   solar-600 #1d4ed8
    Radius        rounded-xl = .75rem    Navigation h-16 = 4rem
*/

:root {
  --flaeche: #fafafa;
  --karte: #ffffff;
  --getoent: #f4f4f5;
  --rand: #e4e4e7;
  --text: #3f3f46;
  --ueberschrift: #18181b;
  --gedaempft: #52525b;
  --leise: #71717a;
  --button: #18181b;
  --button-hover: #27272a;
  --akzent: #1d4ed8;
  --akzent-flaeche: #eff6ff;
  --fehler: #b91c1c;
  --fehler-flaeche: #fef2f2;
  --fehler-rand: #fecaca;
  --gut: #15803d;
  --gut-flaeche: #f0fdf4;
  --gut-rand: #bbf7d0;

  /* Eigenstrom gruen, Netzstrom grau: dieselbe Lesart wie im lokalen Frontend.
     Ein gedecktes Smaragd statt des grellen Signalgruens - die Balken sind
     grosse Flaechen, und was auf einem Knopf frisch wirkt, schreit hier. */
  --pv: #0f8b5f;
  /* Netzstrom war ein reines Grau (#a1a1aa). Ein Grau ist im Diagramm keine Farbe, sondern
     das Fehlen einer: Es traegt keine Identitaet, verschwindet neben jeder Flaeche und hat
     gegen die Kartenflaeche nur 2,5:1 Kontrast. Geprueft mit dem Paletten-Validator - Chroma
     0,013 lag unter dem Mindestwert, der Kontrast unter 3:1.
     Das Violett ist der Gegenpol zum PV-Gruen: Abstand 26 bei normalem Sehen, 20 bei
     Deuteranopie, 8 bei Tritanopie, Kontrast ueber 3:1. */
  --netz: #6d5bd0;
  /* Der Speicher bekommt eine eigene Farbe: Er ist mal Quelle, mal Ziel. */
  --akku: #0891b2;
  /* Unterwegs geladen - weder eigener Strom noch eigener Netzanschluss. */
  --extern: #d98324;

  /* Kraftstoff im Kostenvergleich. Eigene Namen, obwohl das Gelb dem von --extern gleicht:
     Das Violett des Netzstroms hatte zuvor im Kostendiagramm den Diesel eingefaerbt - dieselbe
     Farbe stand damit auf einer Seite fuer zwei verschiedene Dinge. Geprueft mit dem
     Paletten-Validator gegen das PV-Gruen: Abstand 24 bei normalem Sehen, ueber 8 bei jeder
     Farbsehschwaeche. */
  --diesel: #2563eb;
  --e10: #d98324;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Lange Werte ohne Leerzeichen - eine Anlagen-Kennung, eine E-Mail-Adresse -
   brechen um, statt die Seite zu verbreitern. */
body { overflow-wrap: anywhere; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 1rem;
  line-height: 1.5;
  background: var(--flaeche);
  color: var(--text);
}

/* --- Navigation, wie auf den Unterseiten der Website --- */
nav {
  background: rgba(250, 250, 250, .8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-innen {
  max-width: 80rem; margin: 0 auto; min-height: 4rem;
  padding: .5rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.marke {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none;
  font-weight: 600; letter-spacing: -.025em;
  color: var(--ueberschrift);
}
.marke img { width: 1.5rem; height: 1.5rem; }
/* Umbrechen statt schieben: Ohne das waren Anlagenname, Ansichtswahl und die
   beiden Knoepfe zusammen breiter als ein Telefon - und die ganze Seite wurde
   mitgezogen, sodass rechts alles abgeschnitten war. */
.nav-rechts {
  display: flex; align-items: center; gap: 1rem; font-size: .875rem;
  flex-wrap: wrap; row-gap: .5rem; min-width: 0;
}
/* Umbrechen duerfen sie, verschwinden nicht: Ohne Untergrenze schrumpft ein
   Auswahlfeld mit langem Inhalt - etwa einer Anlagenadresse - auf den blossen
   Pfeil zusammen und sieht aus, als waere es leer. */
.nav-rechts > * { min-width: 0; }
.nav-rechts select { min-width: 8rem; max-width: 16rem; }
/* Die Adresse der Anlage steht ganz da. Abgeschnitten ("Taunusstraße 4, 63654 Büdin…")
   sagt sie genau das nicht mehr, was sie soll: an welcher Anlage man gerade ist - und
   auf dem Desktop ist der Platz da. Auf dem Telefon kuerzt die Regel weiter unten. */
#anlagenName { white-space: nowrap; }
/* Das Menue hinter dem Pfeil neben "Profil". Es haengt an seinem Knopf, nicht an der
   Kopfzeile: Sonst stuende es bei umgebrochener Leiste an der falschen Stelle. */
/* Der Pfeil gehoert zu "Profil", nicht in die Reihe der uebrigen Punkte: Der Abstand der
   Kopfzeile (1 rem) trennte beide, als waeren es zwei Sachen. */
.menuefeld { position: relative; display: inline-flex; margin-left: -.75rem; }

/* Muss stehen, sonst gewinnt das display oben gegen das hidden-Attribut und der Pfeil
   bliebe auch dem Mitglied sichtbar - genau das war der Fall. */
.menuefeld[hidden] { display: none; }
.nav-rechts button.menueknopf { padding: 0 .25rem; font-size: 1rem; line-height: 1; }

/* "Profil" bekommt Luft nach links: Es steht mit dem Pfeil als Paar da, und ohne diesen
   Abstand klebte es an der Hilfe daneben, die zur Ansichtswahl gehoert. */
.nav-rechts #profilAuf { margin-left: .5rem; }
.menue {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 20;
  min-width: 10rem; padding: .25rem;
  background: var(--karte); border: 1px solid var(--rand); border-radius: .75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.menue a, .menue button {
  display: block; width: 100%;
  padding: .5rem .75rem;
  font: inherit; font-size: .875rem; text-align: left; text-decoration: none;
  color: var(--text); background: none; border: 0; border-radius: .5rem;
  cursor: pointer;
}
.menue a:hover, .menue button:hover { background: var(--getoent); color: var(--akzent); }

.nav-rechts a, .nav-rechts button.leise {
  color: var(--gedaempft); text-decoration: none;
  background: none; border: 0; font: inherit; cursor: pointer;
  transition: color .15s;
}
.nav-rechts a:hover, .nav-rechts button.leise:hover { color: var(--akzent); }

/* --- Grundgeruest --- */
main { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1rem; }
main.schmal { max-width: 32rem; }

h1 {
  margin: 0 0 .75rem;
  font-size: 1.875rem; font-weight: 700; letter-spacing: -.025em;
  color: var(--ueberschrift);
}
h2 {
  margin: 2rem 0 .75rem;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.0125em;
  color: var(--ueberschrift);
}
.unterzeile { margin: 0 0 2rem; color: var(--gedaempft); }

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: .75rem;
  padding: 1.5rem;
}
.karten { display: grid; gap: 1rem; grid-template-columns: 1fr; }

/* Kennzahlen fuellen die Breite, statt in einem starren Raster Luecken zu
   lassen: Bei sieben Werten in drei Spalten bleiben sonst zwei Loecher, und
   die Kacheln sind breiter, als ihr Inhalt es braucht. */
.karten.werte {
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .75rem;
}
.karten.werte .karte { padding: .875rem 1rem; }

@media (min-width: 640px) {
  .karten.zwei { grid-template-columns: repeat(2, 1fr); }
  .karten.drei { grid-template-columns: repeat(3, 1fr); }
  .nav-innen, main { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* --- Kennzahl --- */
.kennzahl .bezeichnung {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--leise); margin: 0 0 .35rem;
}
.kennzahl .wert {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em;
  color: var(--ueberschrift); margin: 0;
  font-variant-numeric: tabular-nums;
}
.kennzahl .zusatz { margin: .25rem 0 0; font-size: .8125rem; color: var(--gedaempft); }

/* In der dichten Reihe etwas kleiner - dort stehen viele Werte nebeneinander,
   und die Kachel soll nicht hoeher werden als ihr Inhalt. */
.karten.werte .kennzahl .wert { font-size: 1.5rem; }
.karten.werte .kennzahl .bezeichnung { margin-bottom: .2rem; }
.karten.werte .kennzahl .zusatz { font-size: .75rem; }

/* --- Formular --- */
label { display: block; font-size: .875rem; font-weight: 500; color: var(--ueberschrift); margin-bottom: .375rem; }
/* Zahlenfelder nur innerhalb eines Formularfelds: Frei stehende liegen in Tabellen und
   neben ihrer Einheit ("82 kWh") und bringen ihre eigene Breite mit - volle Breite
   schoebe dort die Einheit aus der Zeile. Im Formular dagegen sah ein Feld in
   Browser-Vorgabebreite neben den langen Textfeldern aus wie ein Versehen. */
input[type=email], input[type=password], input[type=text], select,
.feld input[type=number], .feld input[type=datetime-local],
.feld input[type=date], .feld input[type=time] {
  width: 100%;
  padding: .625rem .75rem;
  font-family: inherit; font-size: 1rem;
  color: var(--text); background: var(--karte);
  border: 1px solid var(--rand); border-radius: .75rem;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
}
.feld + .feld { margin-top: 1rem; }

/* --- Passwort einblenden ---------------------------------------------------
   Das Auge sitzt IM Feld, nicht daneben: Daneben waere es eine zweite Spalte,
   die das Feld schmaler macht, und auf dem Telefon rutscht es unter die
   Eingabe. Das Feld bekommt dafuer rechts Platz. */
.pwfeld { position: relative; }
.pwfeld input { padding-right: 3rem; }

.pwauge {
  position: absolute; top: 50%; right: .375rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0; border: 0; border-radius: .5rem;
  background: none; color: var(--leise); cursor: pointer;
  transition: color .12s, background .12s;
}
.pwauge:hover { color: var(--ueberschrift); background: var(--getoent); }
.pwauge:focus-visible {
  outline: none; color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
}
.pwauge svg {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Welches der beiden Symbole gilt, entscheidet der Zustand des Knopfes -
   so steht die Wahrheit an einer Stelle und nicht zweimal. */
.pwauge .zu { display: none; }
.pwauge[aria-pressed="true"] .auf { display: none; }
.pwauge[aria-pressed="true"] .zu { display: block; }

button.haupt,
a.haupt {
  width: 100%;
  margin-top: 1.5rem;
  padding: .875rem 2rem;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  color: #fff; background: var(--button);
  border: 1px solid var(--button); border-radius: .75rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
/* Als Link braucht er, was ein Knopf mitbringt: Blockform, Mitte, keine Unterstreichung. */
a.haupt {
  display: inline-block;
  width: auto;
  text-align: center;
  text-decoration: none;
}

button.haupt:hover:not(:disabled),
a.haupt:hover { background: var(--button-hover); border-color: var(--button-hover); }

/* Die Knopfzeile am Fuss eines Dialogs.
   Die Knoepfe bringen ihren eigenen Abstand nach oben mit - der stammt aus den Formularen,
   wo sie allein unter einem Feld stehen. Im Dialog kam der Abstand des Formulars dazu, und
   zwischen den Knoepfen stand er ein zweites Mal: drei Zentimeter Luft um zwei Knoepfe. */
.dialogfuss {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Untereinander und alle gleich breit. Nach Textlaenge bemessen war "PayPal" schmaler als
   "Als PDF", und verschieden weit reichende Knoepfe untereinander sehen aus wie ein
   Versehen. Zurueckhaltend wird ein Knopf ueber Farbe und Hoehe, nicht ueber die Breite. */
.dialogfuss button, .dialogfuss a.haupt { margin-top: 0; width: 100%; }

/* "Schliessen" tut nichts - er darf flacher sein als der Weg, der etwas tut. */
.dialogfuss .klein {
  padding: .5rem 1.25rem;
  font-size: .875rem;
}

button.haupt:disabled { opacity: .5; cursor: default; }

/* Der zweite Knopf im Dialog: derselbe Koerper, aber ohne Farbe. Zwei gefuellte Knoepfe
   nebeneinander streiten um dieselbe Aufmerksamkeit, und nur einer ist gemeint. */
button.zweit {
  margin-top: 1.5rem;
  padding: .875rem 1.5rem;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  color: var(--ueberschrift); background: transparent;
  border: 1px solid var(--rand); border-radius: .75rem;
  cursor: pointer;
}
button.zweit:hover { background: var(--getoent); }

.hinweis { margin: .5rem 0 0; font-size: .75rem; color: var(--leise); }
a.akzent { color: var(--akzent); text-decoration: none; }
a.akzent:hover { text-decoration: underline; }

/* Die Offen-Kachel ist ein Knopf und soll wie eine Kachel aussehen: Ein
   <button> bringt eigene Schrift, eigene Ausrichtung und einen Rahmen mit. */
button.offenknopf {
  font: inherit; text-align: left; cursor: pointer;
  display: block; width: 100%;
  transition: border-color .12s, background .12s;
}
button.offenknopf:hover { border-color: var(--akzent); background: var(--akzent-flaeche); }
button.offenknopf .zusatz { color: var(--akzent); }

/* --- QR-Code ---------------------------------------------------------------
   Der Code soll gross genug sein, um ihn aus einem Meter Abstand zu scannen,
   und darf trotzdem auf ein Blatt passen. */
.qrbild { margin: 1rem 0; text-align: center; }
.qrbild svg { width: 100%; max-width: 18rem; height: auto; }
.qradresse {
  margin: 0; text-align: center;
  font-size: .8125rem; color: var(--leise);
  overflow-wrap: anywhere;
}
/* Ein Knopf, der wie ein Verweis aussieht - in einer Tabellenzelle waere ein richtiger
   Knopf zu laut. Der Umriss muss dafuer ausdruecklich weg: Ohne diese Zeilen bringt der
   Browser seinen eigenen mit, und in der Spalte standen kleine graue Kaestchen. */
button.qrknopf {
  padding: 0;
  font: inherit;
  color: var(--akzent);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
button.qrknopf:hover { color: var(--button-hover); }
button.qrknopf:disabled { color: var(--leise); cursor: default; }

/* Gedruckt wird der Aufkleber, nicht die Seite dahinter.

   Der Dialog selbst laesst sich nicht drucken: Ein mit showModal() geoeffneter
   Dialog liegt im Top-Layer, und den geben die Browser unterschiedlich aus - auf
   dem Telefon kam die ganze Seite heraus, auf dem Rechner der Dialograhmen mit
   Hintergrund und Rundung drumherum. Darum wird der Aufkleber vor dem Druck in
   ein eigenes Blatt kopiert (#druckBlatt), und gedruckt wird nur das. */
#druckBlatt { display: none; }

@media print {
  body > *:not(#druckBlatt) { display: none !important; }
  dialog { display: none !important; }

  #druckBlatt {
    display: block;
    margin: 0; padding: 0; border: 0; background: none;
    text-align: center; color: #000;
  }
  #druckBlatt h2 { margin: 0 0 .5rem; font-size: 1rem; }
  #druckBlatt .qrbild { margin: 0 auto; }
  /* Fuenf Zentimeter im Quadrat. Gross genug, dass jede Handykamera ihn aus dem Stand
     liest, klein genug fuer einen Aufkleber an der Wallbox - zwoelf Zentimeter fuellten
     eine halbe Seite und passten auf kein Etikett. */
  #druckBlatt .qrbild svg { width: 5cm; height: 5cm; max-width: 5cm; }
  #druckBlatt .qradresse { margin: .35rem 0 0; font-size: .6875rem; color: #000; }

  @page { margin: 1cm; }
}

/* Eine Zeile, die sich aufklappen laesst, muss danach aussehen. */
tr.anklickbar { cursor: pointer; }
tr.anklickbar:hover { background: var(--getoent); }

/* Speicher im Dialog: je Gerät eine Karte mit Skala und Kennzahlen. */
.akkukarte {
  margin-top: 1rem; padding: .875rem 1rem;
  border: 1px solid var(--rand); border-radius: .75rem; background: var(--karte);
}
.akkukarte .kopf { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ueberschrift); }
.akkukarte .kennzahlen {
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: .75rem 0 0;
}
.akkukarte .kennzahlen dt { font-size: .75rem; color: var(--leise); }
.akkukarte .kennzahlen dd { margin: 0; font-size: .875rem; color: var(--text); }

/* Die Skala trägt die ganze Spanne, die Marke den Stand - dieselbe Lesart wie die Säule
   auf der Karte, nur liegend. Platz oben für die Marke, damit sie nicht überdeckt. */
.akkubalken { position: relative; margin: 1.75rem 0 .25rem; }
.akkubalken .skala {
  height: .875rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rand);
  background-image: linear-gradient(to right,
    #AB001C 0%, #FF2400 18%, #FF6D00 32%, #FFE100 45%, #FFE100 55%,
    #B6FF00 65%, #49FF00 78%, #00FF00 89%, #00AB1C 100%);
}
.akkubalken .marke {
  position: absolute; bottom: 1.25rem; transform: translateX(-50%);
  padding: .1rem .35rem; white-space: nowrap;
  font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ueberschrift); background: var(--karte);
  border: 1px solid var(--rand); border-radius: .375rem;
}
.akkubalken .marke::after {
  content: ''; position: absolute; left: 50%; bottom: -.3rem; transform: translateX(-50%);
  border-left: .25rem solid transparent; border-right: .25rem solid transparent;
  border-top: .3rem solid var(--rand);
}

.akkufrage { margin: 1.5rem 0 .25rem; font-size: 1rem; color: var(--ueberschrift); }

/* Reihenfolge der Verbraucher: eine nummerierte Liste mit zwei Pfeilen je Zeile.
   Die Nummer traegt die Aussage - sie ist die Prioritaet, nicht bloss eine Zaehlung. */
.prioliste { list-style: none; margin: 1rem 0 0; padding: 0; }
.prioliste li {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .25rem; border-bottom: 1px solid var(--rand);
}
.prioliste li:last-child { border-bottom: 0; }
.prioliste .rang {
  flex: 0 0 1.75rem; height: 1.75rem; display: grid; place-items: center;
  font-size: .8125rem; font-weight: 600;
  color: var(--ueberschrift); background: var(--getoent); border-radius: 50%;
}
.prioliste .name { flex: 1 1 auto; min-width: 0; }
.prioliste .pfeile { display: flex; gap: .25rem; }
/* Grosszuegige Flaechen: Die Pfeile werden auf dem Telefon mit dem Daumen getroffen. */
.prioliste .pfeile button {
  width: 2.25rem; height: 2.25rem;
  font: inherit; font-size: 1rem; line-height: 1;
  color: var(--ueberschrift); background: var(--karte);
  border: 1px solid var(--rand); border-radius: .5rem; cursor: pointer;
}
.prioliste .pfeile button:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.prioliste .pfeile button:disabled { opacity: .35; cursor: default; }

.prioreserve {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 1.25rem; font-size: .9375rem;
}
.prioreserve .einheit { display: flex; align-items: center; gap: .35rem; color: var(--gedaempft); }
.prioreserve input { width: 6rem; text-align: right; }

/* Auch die Speichersaeule fuehrt weiter. Nur der Zeiger, kein zweiter Kasten: Die Saeule hat
   schon eine Form, und ein Rahmen darum sagte nichts, was der Zeiger nicht sagt. */
.akkusaeule.anklickbar { cursor: pointer; }
.akkusaeule.anklickbar:hover .marke { border-color: var(--akzent); color: var(--akzent); }

/* --- Bezahlen --------------------------------------------------------------
   Ein Link je Abrechnungszeile. Klein, aber als Knopf erkennbar: Er fuehrt aus
   der Seite heraus zu PayPal, und genau das soll man ihm ansehen. */
a.bezahlen,
button.bezahlen {
  display: inline-block;
  padding: .25rem .625rem;
  font-size: .8125rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--button);
  border: 1px solid var(--button); border-radius: .5rem;
  transition: background .15s, border-color .15s;
}
a.bezahlen:hover,
button.bezahlen:hover { background: var(--button-hover); border-color: var(--button-hover); }

/* Schon bezahlt: kein Knopf mehr, sondern eine Feststellung. */
.erledigt {
  display: inline-block;
  padding: .25rem .625rem;
  font-size: .8125rem; font-weight: 500; white-space: nowrap;
  color: var(--gut); background: var(--gut-flaeche);
  border: 1px solid var(--gut-rand); border-radius: .5rem;
}

/* Der Stand eines Zugangs in der Benutzertabelle. Nur Farbe, kein Kaestchen: In einer
   Zeile mit Rolle, Status und drei Zahlen ist jedes weitere Feld eines zu viel. */
.zugang-gut { color: var(--gut); }
.zugang-offen { color: var(--fehler); }

/* --- Meldungen --- */
.meldung {
  padding: .875rem 1rem;
  border-radius: .75rem;
  margin-bottom: 1.25rem;
  font-size: .875rem;
  border: 1px solid;
}
.meldung.fehler { color: var(--fehler); border-color: var(--fehler-rand); background: var(--fehler-flaeche); }
.meldung.gut    { color: var(--gut);    border-color: var(--gut-rand);    background: var(--gut-flaeche); }
.meldung.info   { color: var(--akzent); border-color: #bfdbfe;            background: var(--akzent-flaeche); }

/* --- Tabelle --- */
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--rand); }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); font-weight: 600; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Ein Nebensatz in einer Zelle - die Dauer neben dem Ende, die Phasen neben
   der Leistung. Leiser als der Wert, damit er ihn nicht ueberdeckt. */
td .zusatz, th .zusatz { font-size: .8125rem; color: var(--leise); }

tr:last-child td { border-bottom: 0; }

/* Eine Karte, die nur eine Tabelle traegt, braucht oben und unten weniger Luft: Die erste
   und die letzte Zeile bringen ihre eigene mit, und zusammen mit dem Kartenrand stand
   darueber eine leere Bank - besonders da, wo keine Kopfzeile den Platz fuellt. */
.karte > table:first-child { margin-top: -.6rem; }
.karte > table:last-child { margin-bottom: -.6rem; }

/* --- Marke fuer die Testansicht --- */
.testband {
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e;
  border-radius: .75rem; padding: .75rem 1rem; margin-bottom: 1.5rem;
  font-size: .875rem;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.testband select { width: auto; padding: .35rem .5rem; font-size: .875rem; }

/* --- Hilfe-Dialog --- */
dialog.hilfe {
  max-width: 44rem;
  width: calc(100% - 2rem);

  /* Hoeher als der Bildschirm darf er nicht werden, und was nicht passt, muss scrollen
     koennen. Seit im Ladevorgang-Dialog auch die Kurve steht, reicht der Inhalt auf einem
     Telefon ueber die Bildschirmhoehe hinaus - ohne diese beiden Zeilen liegt der
     Schliessen-Knopf unerreichbar darunter. */
  max-height: 90vh;
  overflow: auto;

  padding: 1.5rem;
  border: 1px solid var(--rand);
  border-radius: .75rem;
  background: var(--karte);
  color: var(--text);
}
dialog.hilfe::backdrop { background: rgba(24, 24, 27, .45); }

/* Der Detail-Dialog hat eine zweispaltige Tabelle, keine dreispaltige: links
   die Beschriftung, rechts der Wert. Beide duerfen umbrechen - ein Wert, der
   nicht umbrechen darf, schiebt die Beschriftung daneben auf einen Buchstaben
   je Zeile zusammen und laeuft trotzdem aus dem Dialog heraus. */
/* Feste Spaltenbreiten und normales Umbrechen. Beides noetig: body traegt
   overflow-wrap: anywhere (fuer lange Kennungen und Adressen), und das erlaubt
   dem Browser, die Mindestbreite einer Zelle auf EIN ZEICHEN zu druecken - in
   einer Tabelle mit automatischer Breite wird daraus eine Spalte aus
   einzelnen Buchstaben. */
dialog.detail .livewerte { table-layout: fixed; width: 100%; }
dialog.detail .livewerte th[scope="row"] {
  white-space: normal; text-align: left; width: 55%;
  overflow-wrap: break-word;
}
dialog.detail .livewerte td.zahl {
  white-space: normal; text-align: right;
  overflow-wrap: break-word;

  /* Die Breite ausdruecklich zuruecknehmen: In der Live-Werteliste steht
     width: 1%, damit die Zahlenspalte nur so breit wird wie ihr Inhalt. Mit
     table-layout: fixed ist 1% aber kein Wunsch, sondern eine Ansage - der
     ganze Rest geht an die Beschriftung, und die Zahl bricht nach jedem
     Zeichen um. Genau das war hier zu sehen. */
  width: 45%;
}
dialog.detail .hinweis { margin: .75rem 0 0; }
dialog.hilfe h2 { font-size: 1.25rem; }
dialog.hilfe h3 {
  margin: 1.5rem 0 .5rem;
  font-size: 1rem; font-weight: 600; color: var(--ueberschrift);
}
dialog.hilfe p { margin: 0 0 .75rem; font-size: .875rem; }
dialog.hilfe table { margin-bottom: .5rem; }
dialog.hilfe td:not(:first-child), dialog.hilfe th:not(:first-child) { text-align: center; }

footer {
  padding: 2rem 1rem;
  border-top: 1px solid var(--rand);
  text-align: center;
}
footer a { color: var(--leise); text-decoration: none; font-size: .75rem; }
footer a:hover { color: var(--text); }
footer p { margin: 1rem 0 0; font-size: .75rem; color: var(--gedaempft); }

/* --- Monatsverlauf --------------------------------------------------------
   Das SVG traegt feste Koordinaten und skaliert ueber die viewBox. Deshalb
   braucht es hier nur eine Breite - und passt damit von selbst auf ein Telefon. */
svg.verlauf { width: 100%; height: auto; display: block; color: var(--text); }
/* Groesser, als es am Monitor noetig waere: Das SVG hat eine feste Breite von
   640 und wird auf einem Telefon auf ein knappes Drittel gestaucht - aus 11 px
   werden dabei 6, und das liest niemand. */
/* Keine Groesse hier: Die Schrift steht in viewBox-Einheiten und wird mit der
   Grafik gestaucht oder gedehnt. Wie gross eine Einheit auf dem Bildschirm ist,
   haengt von der Breite der Karte ab - das weiss nur die Stelle, die zeichnet
   (diagrammSchrift), und sie setzt die Groesse am <svg>. */
svg.verlauf .achse { font-size: inherit; fill: var(--gedaempft); }
svg.verlauf .mitte { text-anchor: middle; }
.punkt {
  display: inline-block; width: .6rem; height: .6rem;
  border-radius: 50%; margin-right: .35rem; vertical-align: baseline;
}

/* --- Kleine Bildschirme ---------------------------------------------------
   Eine Tabelle mit sechs Spalten passt auf kein Telefon. Statt Spalten zu
   verstecken - dann fehlt genau die gesuchte Zahl - wird jede Zeile zu einem
   eigenen kleinen Block, der seine Ueberschriften mitbringt. */
@media (max-width: 640px) {
  /* Schmale Raender: Auf einem Telefon ist jeder Millimeter Inhalt mehr wert als der
     Abstand zum Displayrand. Die Tabelle stand sonst in einer Spalte, die schmaler war
     als noetig, und die Zahlen ruckten aneinander. */
  main { padding: 1.25rem .5rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.125rem; }
  .karte { padding: .75rem .625rem; }

  /* Nichts darf breiter werden als der Bildschirm. Eine einzige zu breite
     Zelle zieht sonst die ganze Seite mit, und der Rand rechts fehlt. */
  .nav-innen { padding: .5rem .75rem; }
  #anlagenName { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* Zwei Kacheln nebeneinander und deutlich flacher. Auf einem Telefon zaehlt,
     wie viele Werte ohne Scrollen zu sehen sind - eine Kachel, die den halben
     Bildschirm fuellt, zeigt einen Wert und verdeckt sechs. */
  .karten { gap: .5rem; }
  .karten.werte, .karten.zwei, .karten.drei { grid-template-columns: 1fr 1fr; }

  /* Eine ungerade letzte Kachel nimmt die ganze Breite, statt eine leere
     Haelfte neben sich stehen zu lassen. */
  .karten.werte > .karte:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .karten.werte .karte { padding: .625rem .75rem; }
  .karten.werte .kennzahl .wert { font-size: 1.125rem; }
  .karten.werte .kennzahl .bezeichnung { font-size: .625rem; letter-spacing: .03em; }
  .karten.werte .kennzahl .zusatz { font-size: .6875rem; }

  .unterzeile { margin-bottom: 1.25rem; font-size: .875rem; }
  h2 { margin: 1.5rem 0 .5rem; }
  body { font-size: .9375rem; }
  table { font-size: .8125rem; }

  /* Tabellen bleiben Tabellen - auch auf dem Telefon. Aufgeklappt zu Kacheln
     steht derselbe Inhalt dreimal so hoch, jede Spaltenueberschrift wiederholt
     sich je Zeile, und untereinander vergleichen laesst sich nichts mehr.
     Wird eine Tabelle zu breit, scrollt ihre Karte waagerecht. */
  .karte { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Entscheidend: Die Tabelle darf BREITER werden als die Karte. Ohne das
     presst sie sich in die Kartenbreite, und der Browser bricht notfalls nach
     jedem Buchstaben um - eine Spalte aus einzelnen Zeichen untereinander. */
  .karte table { width: auto; min-width: 100%; }
  th, td { padding: .45rem .35rem; white-space: nowrap; }

  /* Die Werteliste der Live-Daten ist keine solche Tabelle: Sie hat zwei
     Spalten und soll die Breite fuellen. */
  .karte table.livewerte { width: 100%; }
  .livewerte th[scope="row"] { white-space: normal; }

  /* Die Dauer entfaellt auf dem Telefon: Sie ist ein Nebensatz und kostet
     eine ganze Spaltenbreite. Beginn und Ende stehen ja da. */
  td .dauer { display: none; }

  /* Nebenspalten weichen, damit die wichtigen ohne Scrollen dastehen: Datum,
     Betrag, Bezahlen. Der Rest steht am Rechner - und bei einer Rechnung
     zaehlt zuerst, was sie kostet und wie man sie begleicht. */
  th.nebensache, td.nebensache { display: none; }

  /* 26 Einheiten bei rund halber Darstellungsgroesse ergeben wieder gut 13
     Punkte auf dem Schirm - dieselbe Groesse wie die Tabellen daneben. */


  /* Im Dialog gilt die nowrap-Regel der Tabellen nicht: Dort stehen ganze
     Saetze, und die sollen umbrechen statt den Dialog zu verbreitern. */
  dialog th, dialog td { white-space: normal; }

  /* Schmalere Raender wie bei den Karten: Der Dialog steht auf dem Telefon ohnehin fast
     ueber die volle Breite, und der QR-Code will jeden Millimeter davon. */
  dialog.hilfe { width: calc(100% - 1rem); padding: 1rem .75rem; }

  td select, td input { max-width: 100%; }

  /* Formulare stapeln statt zu quetschen. */
  form > div { flex: 1 1 100% !important; }
  form button.haupt { width: 100% !important; }
}

/* --- Tooltip ---------------------------------------------------------------
   Eigener statt des eingebauten: Der erscheint erst nach einer Sekunde,
   verschwindet nach wenigen und bricht lange Texte nicht um. */
.tooltip {
  position: fixed;
  z-index: 50;
  max-width: 16rem;
  padding: .5rem .625rem;
  border-radius: .5rem;
  background: var(--ueberschrift);
  color: #fafafa;
  font-size: .8125rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(24, 24, 27, .25);
}
.tooltip[hidden] { display: none; }

svg.verlauf g[data-hinweis] rect { transition: opacity .1s; }
svg.verlauf g[data-hinweis]:hover rect { opacity: .78; }

/* --- Bereiche --------------------------------------------------------------
   Die Seite beantwortet vier verschiedene Fragen, und man kommt jeweils wegen
   einer. Als eine lange Rolle muss man an drei davon vorbeiscrollen. */
/* Als geschlossene Leiste, nicht als Reihe von Textknoepfen: Ein Unterstrich
   allein hebt den offenen Bereich zu wenig ab - man sieht nicht auf einen
   Blick, wo man ist. */
.tableiste {
  display: inline-flex; gap: .25rem; flex-wrap: wrap;
  padding: .25rem;
  border: 1px solid var(--rand);
  border-radius: .625rem;
  background: var(--getoent);
  margin: 0 0 1.5rem;
}
button.tab {
  background: none; border: 0; border-radius: .5rem;
  padding: .5rem .875rem;
  font: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--gedaempft);
  cursor: pointer;
  transition: background .12s, color .12s;
}
button.tab:hover { background: rgba(255, 255, 255, .6); color: var(--ueberschrift); }
button.tab.aktiv {
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(24, 24, 27, .18);
}
button.tab.aktiv:hover { background: var(--akzent); color: #fff; }

@media (max-width: 640px) {
  /* Zwei mal zwei statt drei und einer: Vier Namen nebeneinander werden auf
     einem Telefon zu schmal, und der vierte rutscht dann allein und mittig in
     eine zweite Zeile - das sieht aus wie ein Fehler. Im Raster stehen alle
     gleich breit und links buendig untereinander. */
  .tableiste {
    display: grid; width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
  }
  button.tab { padding: .5rem .375rem; font-size: .875rem; }
}

section[data-bereich] > h2:first-child { margin-top: 0; }

/* --- Preiszeile ------------------------------------------------------------
   Der Preis ist die Grundlage der Rechnung. Als graues Kleingedrucktes unter
   den Mengen wurde er uebersehen - dabei ist er die Zahl, wegen der jemand
   die Abrechnung oeffnet. */
.preiszeile {
  margin: .75rem 0 .25rem;
  padding: .625rem .875rem;
  border-radius: .5rem;
  background: var(--akzent-flaeche);
  color: var(--ueberschrift);
  font-size: 1rem;
}
.preiszeile strong {
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.preiszeile.ohne { background: var(--fehler-flaeche); color: var(--fehler); }

/* Das Wetterzeichen traegt keine Zahl - es steht schmal und mittig. */
td.wetter { text-align: center; font-size: 1.125rem; width: 2.5rem; cursor: default; }

/* --- Werteliste ------------------------------------------------------------
   Beschriftung links, Zahl rechts, duenne Linien dazwischen. Kacheln
   beantworten dieselbe Frage schlechter: Sie brechen in ungleiche Reihen um,
   und die Zahlen stehen nicht untereinander, wo man sie vergleichen koennte. */
.werteliste { display: flex; gap: 1.25rem; align-items: stretch; padding: 1.25rem 1.5rem; }
.werteliste .werte { flex: 1 1 auto; min-width: 0; }

.werteliste .kopf {
  margin: 0 0 .5rem;
  font-size: 1.0625rem; font-weight: 600; color: var(--ueberschrift);
}

/* Ueberschrift und Zeitstempel in einer Zeile: Der Stand gehoert zu allem,
   was darunter steht, nicht hinter die letzte Zahl. */
.livekopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.livekopf .kopf { margin: 0; }

/* Rechts in der Kopfzeile der Karte: der Zeitstempel und, beim Betreiber, der Weg zur
   Reihenfolge. Untereinander und rechtsbuendig - der Knopf soll den Stand nicht verdraengen,
   und nebeneinander passt beides auf einem Telefon nicht. */
.kopfrechts { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.kopfrechts button.leise {
  padding: 0; font: inherit; font-size: .8125rem;
  color: var(--akzent); background: none; border: 0; cursor: pointer;
}
.kopfrechts button.leise:hover { text-decoration: underline; }
.werteliste .stand { margin: 0; font-size: .75rem; color: var(--leise); }

/* Die Werte als Tabelle: Zahlen stehen untereinander und lassen sich
   vergleichen, die Beschriftung bleibt links davon. */
/* Dichter als die uebrigen Tabellen: Hier stehen ein Dutzend Zeilen untereinander, die
   miteinander verglichen werden - je weniger Weg das Auge zwischen ihnen zuruecklegt, desto
   eher sieht man den Zusammenhang. Die grosszuegige Zeilenhoehe der Abrechnungstabelle ist
   fuer Zeilen gedacht, die man einzeln liest. */
.livewerte { margin-top: .5rem; }
/* Ohne Trennlinien, wie im Solarmanager: Ein Dutzend Linien untereinander zerlegt die Karte
   in ein Dutzend Kaestchen. Die Zahlen stehen ohnehin in einer Spalte. */
.livewerte th, .livewerte td { padding: .3rem .4rem; border-bottom: 0; }
.livewerte th[scope="row"] {
  font-size: .9375rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--gedaempft); line-height: 1.3;
}
.livewerte th .zusatz { font-size: .8125rem; color: var(--leise); }
.livewerte td.zahl {
  font-size: 1.0625rem; font-weight: 700; color: var(--ueberschrift);
  white-space: nowrap; width: 1%;
}

/* Nebensaechliches: gleiche Tabelle, aber ohne Betonung. Der letzte Kontakt und die Zahl der
   nicht zugeordneten Ladungen sind Randangaben - in derselben Groesse und Fettung wie ein
   Messwert ziehen sie den Blick auf sich, obwohl sie ihn nicht verdienen. */
.livewerte.leise td.zahl { font-size: 1rem; font-weight: 400; color: var(--text); }

/* Fuss der Ladekurve: Legende links, Hoechstwert rechts. Die Farbe steckt im Punkt davor,
   nicht in der Schrift - farbiger Text ist schlechter zu lesen und traegt die Identitaet
   nicht besser als ein Punkt daneben. */
.kurvenfuss { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: .5rem 0 0; }
.kurvenfuss .punkt {
  display: inline-block; width: .625rem; height: .625rem; border-radius: 50%;
  margin-left: .75rem;
}
.kurvenfuss .punkt:first-child { margin-left: 0; }
.kurvenfuss .hoechst { margin-left: auto; color: var(--leise); }
svg.ladekurve { margin-top: .5rem; }


/* Der Fuellstand als Saeule: als Hoehe schneller zu lesen denn als Zahl.

   Die Saeule wuchs frueher mit der Karte mit (flex: 1 1 auto). Neben einer langen Werteliste
   wurde daraus ein handhoher Balken, der die Karte beherrschte - dabei ist er eine Angabe
   unter vielen. Jetzt hat er eine feste, ruhige Hoehe und steht mittig neben den Werten.

   Kein gezeichneter Rahmen mehr, sondern ein Schatten nach innen: Ein Rahmen liegt ausserhalb
   der abgerundeten Form und laesst die Kanten eckig wirken. */
.akkusaeule {
  flex: 0 0 4.75rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}

/* Traegt die Saeule und die Marke daneben. Die Marke liegt absolut darin, damit sie auf der
   Hoehe des Standes sitzt statt darunter. */
.akkusaeule .saeulenfeld {
  position: relative; flex: 1 1 auto; display: flex; justify-content: flex-end;
  width: 100%; min-height: 6rem;
}
/* "Akku" traegt dieselbe Schrift wie "Aktuell" daneben und steht links wie diese: Beides
   sind Ueberschriften der Karte, und zwei Ueberschriften nebeneinander sollen auch wie zwei
   Ueberschriften aussehen. Als kleines Versal-Woertchen wirkte es wie eine Spaltenbezeichnung
   der Tabelle rechts. */
.akkusaeule .bezeichnung {
  margin: 0; align-self: flex-start;
  font-size: 1.0625rem; font-weight: 600; color: var(--ueberschrift);
}

/* Die Skala von Rot (leer) ueber Gelb nach Gruen (voll) - dieselbe wie im Solarmanager
   selbst. Wer beides kennt, soll die Farbe nicht zweimal lernen muessen.

   Sie liegt auf der ganzen Saeule und nicht auf der Fuellung: So faerbt sich der Stand
   immer nach seiner eigenen Hoehe, ohne dass das Stylesheet die Hoehe kennen muss. Abgedeckt
   wird der leere Teil darueber (.leer).

   Kein gezeichneter Rahmen, sondern ein Schatten nach innen: Ein Rahmen liegt ausserhalb der
   abgerundeten Form und laesst die Kanten eckig wirken. */
.akkusaeule .saeule {
  width: 1.25rem; height: 100%;
  border-radius: .375rem;
  box-shadow: inset 0 0 0 1px var(--rand);
  background-image: linear-gradient(to top,
    #AB001C 0%, #FF2400 18%, #FF6D00 32%, #FFE100 45%, #FFE100 55%,
    #B6FF00 65%, #49FF00 78%, #00FF00 89%, #00AB1C 100%);
}

/* Die Marke sitzt auf der Hoehe des Standes und zeigt mit einer Spitze auf die Saeule.
   bottom in Prozent: Das ist genau die Skala der Saeule, ohne eine Umrechnung. */
.akkusaeule .marke {
  position: absolute; right: 1.25rem; transform: translateY(50%);
  padding: .1rem .35rem; margin-right: .3rem;
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ueberschrift); background: var(--karte);
  border: 1px solid var(--rand); border-radius: .375rem;
  transition: bottom .3s;
}
.akkusaeule .marke::after {
  content: ''; position: absolute; right: -.3rem; top: 50%; transform: translateY(-50%);
  border-top: .25rem solid transparent; border-bottom: .25rem solid transparent;
  border-left: .3rem solid var(--rand);
}

@media (max-width: 640px) {
  .werteliste { padding: 1rem; gap: .875rem; }
  .livewerte td.zahl { font-size: 1rem; }
  /* Schmaler, aber nicht schmaler als die Marke: Sie liegt links neben der Saeule und
     ragte sonst in die Werteliste hinein. */
  .akkusaeule { flex-basis: 4.25rem; }
  .akkusaeule .marke { font-size: .75rem; padding: .1rem .3rem; }
}

/* --- Überweisung: die Angaben unter dem GiroCode -------------------------- */
/* Zwei Spalten, damit Bezeichnung und Wert untereinander stehen und die IBAN
   sich mit dem Kontoauszug vergleichen lässt, ohne zu suchen. */
/* Trennt die beiden Zahlwege: oben antippen, unten scannen. */
.zahltrenner {
  margin: 1.25rem 0;
  border: 0;
  border-top: 1px solid var(--rand);
}

/* Die Angaben unter dem Code. Bezeichnung ueber dem Wert statt daneben: Der
   Verwendungszweck ist laenger als jede Spalte, die daneben noch Platz liesse,
   und bei zwei Spalten bricht er als einziger um - was die Zeilen verschiebt. */
.zahldaten { margin-top: 1rem; }

.zahldaten div {
  padding: .3rem 0;
  border-top: 1px solid var(--rand);
}

.zahldaten div:last-child { border-bottom: 1px solid var(--rand); }

.zahldaten span {
  display: block;
  color: var(--gedaempft);
  font-size: .75rem;
}

.zahldaten b {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Der Knopf steht neben dem PayPal-Link und soll wie er aussehen, nicht wie
   ein Formularelement. Abgesetzt, weil er einen zweiten Weg oeffnet statt
   direkt zu bezahlen. */
button.bezahlen {
  font: inherit;
  cursor: pointer;
}

/* Der PayPal-Link im Dialog steht fuer sich, mit Luft darunter. */
/* Der PayPal-Weg steht fuer sich, mit Luft darunter. Der Knopf traegt seinen eigenen
   Abstand nach oben mit - hier stoert er, weil der Absatz ihn schon setzt. */
/* PayPal und der Beleg sind zwei Wege zum selben Ziel und stehen deshalb gleich breit
   untereinander. Nach Textlaenge bemessen waere "PayPal" schmaler als "Als PDF" - und es
   saehe aus, als waere der eine Weg weniger wert als der andere. */
#ueberweisenPaypal { margin: .75rem 0 0; }
#ueberweisenPaypal a.haupt { margin-top: 0; width: 100%; }

/* Der THG-Hinweis steht neben dem Impressum und tritt wie es zurück: ein
   Angebot, keine Aufforderung. */
footer #thgLink { margin-left: 1rem; }

/* Eine Zeile mit Haken und Beschriftung, wie sie unter einer Tabelle steht.
   Abgesetzt durch eine Linie: Sie gehoert nicht mehr zur Liste darueber, sondern ist eine
   Einstellung - ohne die Trennung sah sie aus wie eine weitere Tabellenzeile. */
.schalterzeile {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1rem -1rem -1rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--rand);
  background: var(--getoent);
  border-radius: 0 0 8px 8px;
  font-size: .875rem;
  cursor: pointer;
}

.schalterzeile input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--akzent);
  cursor: pointer;
}

.schalterzeile .hinweis { margin: 0; }

/* Der Stand ("eingeschaltet", "wird uebernommen ...") rutscht ans Ende der Zeile, damit er
   die Beschriftung nicht verschiebt, waehrend er erscheint und wieder geht. */
.schalterzeile #belegMailStand { margin-left: auto; }

/* --- Wochenansicht der Ladepunkte ----------------------------------------------------
   Tage als Spalten, die Uhrzeit senkrecht - wie in jedem Kalender. Ein Block ist eine
   belegte Zeit, die Luecke dazwischen ist frei. */
.wkal {
  margin: 0 0 .75rem;
  font-size: .8rem;
}

.wkalkopf {
  display: flex;
  margin-bottom: .25rem;
}

.wkalkopf .wkalachse {
  flex: 0 0 2.2rem;
}

.wkalspaltenkopf {
  flex: 1 1 0;
  text-align: center;
  color: var(--gedaempft);
  min-width: 0;
}

.wkalspaltenkopf em {
  font-style: normal;
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.wkalspaltenkopf b {
  color: var(--ueberschrift);
}

.wkalspaltenkopf.istheute b,
.wkalspaltenkopf.istheute em {
  color: var(--akzent);
}

.wkalgitter {
  display: flex;
  height: 30rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  overflow: hidden;
  background: var(--karte);
}

.wkalgitter .wkalachse {
  position: relative;
  flex: 0 0 2.2rem;
  border-right: 1px solid var(--rand);
  background: var(--getoent);
}

/* Die Stundenzahl sitzt an ihrer Linie, nicht darunter. */
.wkalachse i {
  position: absolute;
  right: .25rem;
  transform: translateY(-50%);
  font-style: normal;
  font-size: .65rem;
  color: var(--leise);
}

/* Die erste und die letzte Zahl liegen genau auf dem Rand: mittig gesetzt ragen sie zur
   Haelfte aus dem Gitter und werden abgeschnitten. Sie ruecken nach innen. */
.wkalachse i:first-child { transform: none; }
.wkalachse i:last-child  { transform: translateY(-100%); }

.wkalspalte {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid var(--rand);
  /* Eine Linie alle drei Stunden: genug, um einen Block auf eine Uhrzeit zurueckzulesen,
     ohne dass das Gitter die Bloecke uebertoent. */
  background-image: repeating-linear-gradient(to bottom,
    var(--rand) 0 1px, transparent 1px 12.5%);
}

.wkalspalte:first-of-type {
  border-left: 0;
}

.wkalfrei {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--gut-flaeche);
  border-left: 3px solid var(--gut);
}

/* Belegt heisst hier gesperrt: In diesen Stunden kommt man nicht an den Ladepunkt, und
   dieselbe Farbe traegt die Seite sonst fuer alles, was nicht geht. Blau las sich wie eine
   Auskunft und stand zudem neben einer Legende in einem dritten Ton. */
.wkalblock {
  position: absolute;
  overflow: hidden;
  background: var(--fehler-flaeche);
  border: 1px solid var(--fehler-rand);
  border-left: 3px solid var(--fehler);
  border-radius: 3px;
  font-style: normal;
  font-size: .68rem;
  line-height: 1.1;
  color: var(--fehler);
  padding: 1px 2px;
}

/* Das eigene Auto in der zweiten Farbe: Es belegt den Platz genauso, aber man erkennt
   sich selbst sofort wieder. */
.wkalblock.eigen {
  background: #fef3c7;
  border-color: #fcd34d;
  border-left-color: #b45309;
  color: #78350f;
}

/* Ein volles Auto, das noch ansteckt: Der Platz ist besetzt, aber nicht gebraucht - Laden
   ist moeglich, sobald umgesteckt wird. Blau, weil es weder "gesperrt" (rot) noch "frei"
   (gruen) ist, und weil gelb schon das eigene Auto meint. */
.wkalblock.voll {
  background: #dbeafe;
  border-color: #93c5fd;
  border-left-color: #1d4ed8;
  color: #1e3a8a;
}

.wkalblock span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wkaljetzt {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fehler);
  z-index: 2;
}

/* Die Beschriftung sitzt ueber der Linie am rechten Rand der Spalte, klein und in der
   Farbe der Linie - so ist klar, wozu der Strich gehoert, ohne die Bloecke zu verdecken. */
.wkaljetzt b {
  position: absolute;
  right: .2rem;
  bottom: .15rem;
  font-size: .7rem;
  line-height: 1;
  font-weight: 600;
  color: var(--fehler);
  pointer-events: none;
}

/* Die gezogene Spanne waehrend der Auswahl im Kalender. */
.wkalwahl {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(37, 99, 235, .18);
  border: 1px dashed #2563eb;
  z-index: 3;
  pointer-events: none;
}

.wkalspalte {
  cursor: crosshair;
}

.wkallegende.jetzt {
  height: 2px;
  background: var(--fehler);
  border-radius: 0;
  vertical-align: 3px;
}

.wkallegende {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: .15rem;
}

/* Dieselben Werte wie die Flaechen im Gitter, nicht nur aehnliche: Eine Legende, deren
   Farbton neben dem erklaerten Block ein anderer ist, erklaert nichts. */
.wkallegende.belegt { background: var(--fehler-flaeche); border: 1px solid var(--fehler-rand); }
.wkallegende.eigen  { background: #fef3c7; border: 1px solid #fcd34d; }
.wkallegende.voll   { background: #dbeafe; border: 1px solid #93c5fd; }
.wkallegende.frei   { background: var(--gut-flaeche); border: 1px solid var(--gut-rand); }

@media (max-width: 640px) {
  .wkal { font-size: .72rem; }
  .wkalgitter { height: 22rem; }
  .wkalgitter .wkalachse,
  .wkalkopf .wkalachse { flex-basis: 1.7rem; }
  .wkalblock { font-size: .6rem; }
}

/* --- Einstellungen der Anlage (verwaltung.html) -------------------------------------
   Drei Gruppen statt einer langen Formularrolle: Wer hier ist, will meist genau eine Sache
   aendern - die Bankverbindung, den Aufschlag oder was Gaeste sehen. */
.einst-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 2rem 0 .75rem;
}
.einst-kopf h2 { margin: 0; }

/* Der Stand als Pille neben der Ueberschrift: Er soll auffallen, wenn etwas offen ist,
   aber nicht zwischen den Feldern stehen. */
.einst-status {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .65rem;
  font-size: .75rem; font-weight: 500;
  border-radius: 999px;
  color: var(--gedaempft); background: var(--getoent);
  white-space: nowrap;
}
.einst-status::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: currentColor;
}
.einst-status[data-art="laedt"]::before { animation: einst-puls 1.2s ease-in-out infinite; }
.einst-status[data-art="offen"]  { color: #a16207; background: #fefce8; }
.einst-status[data-art="gut"]    { color: var(--gut); background: var(--gut-flaeche); }
.einst-status[data-art="fehler"] { color: var(--fehler); background: var(--fehler-flaeche); }
@keyframes einst-puls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .einst-status[data-art="laedt"]::before { animation: none; }
}

.einst { display: grid; gap: 1rem; }

.einst-gruppe {
  margin: 0; min-width: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: .75rem;
  transition: opacity .2s;
}
.einst-gruppe:disabled { opacity: .55; }

.einst-gruppe legend {
  float: left; width: 100%;
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1.25rem; padding: 0;
}
.einst-gruppe legend + * { clear: both; }
.einst-gruppe legend strong { display: block; font-size: 1rem; color: var(--ueberschrift); }
.einst-gruppe legend small  { display: block; font-size: .8125rem; color: var(--leise); }

.einst-symbol {
  flex: none;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  font-size: 1rem; font-weight: 600;
  color: var(--akzent); background: var(--akzent-flaeche);
  border-radius: .6rem;
}

.einst-feld + .einst-feld,
.einst-zeile + .einst-feld,
.einst-feld + .einst-zeile,
.einst-schalter + .einst-feld { margin-top: 1rem; }

.einst-zeile { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* Nebeneinander stehen die Felder auf einer Linie - der Abstand gilt nur untereinander. */
.einst-zeile > .einst-feld { margin-top: 0; }
@media (min-width: 640px) {
  .einst-zeile { grid-template-columns: 3fr 2fr; }
}

.einst-schmal { max-width: 11rem; }

.einst input[type=url],
.einst input[type=number] {
  width: 100%;
  padding: .625rem .75rem;
  font-family: inherit; font-size: 1rem;
  color: var(--text); background: var(--karte);
  border: 1px solid var(--rand); border-radius: .75rem;
}
.einst-mono { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* Ein Feld mit festem Vorsatz oder Einheit: ein Rahmen um beides, damit klar ist, dass
   nur der Rest einzutippen ist. */
.einst-eingabe {
  display: flex; align-items: stretch;
  background: var(--karte);
  border: 1px solid var(--rand); border-radius: .75rem;
  overflow: hidden;
}
.einst-eingabe:focus-within {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
}
.einst .einst-eingabe input {
  flex: 1; min-width: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
.einst-vor, .einst-nach {
  display: flex; align-items: center;
  padding: 0 .75rem;
  font-size: .9375rem; color: var(--leise);
  background: var(--getoent);
}
.einst-vor  { border-right: 1px solid var(--rand); }
.einst-nach { border-left: 1px solid var(--rand); }

.einst-feld.ungueltig input,
.einst-feld.ungueltig .einst-eingabe { border-color: var(--fehler); }
.einst-feld .einst-fehler { margin: .375rem 0 0; font-size: .75rem; color: var(--fehler); }

.einst-hilfe { margin: .5rem 0 0; font-size: .75rem; color: var(--leise); }

/* Kippschalter statt Haken: Es ist ein Zustand der Anlage, keine Auswahl in einer Liste. */
.einst-schalter {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0; padding: .875rem 1rem;
  background: var(--getoent);
  border-radius: .75rem;
  cursor: pointer;
  font-weight: 400;
}
.einst-schalter strong { display: block; font-size: .9375rem; font-weight: 500; color: var(--ueberschrift); }
.einst-schalter small  { display: block; font-size: .8125rem; color: var(--leise); }
.einst-schalter input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.einst-knopf {
  flex: none; position: relative;
  width: 2.75rem; height: 1.5rem;
  background: #d4d4d8; border-radius: 999px;
  transition: background .2s;
}
.einst-knopf::after {
  content: ""; position: absolute; top: .1875rem; left: .1875rem;
  width: 1.125rem; height: 1.125rem;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.einst-schalter input:checked + .einst-knopf { background: var(--akzent); }
.einst-schalter input:checked + .einst-knopf::after { transform: translateX(1.25rem); }
.einst-schalter input:focus-visible + .einst-knopf { box-shadow: 0 0 0 3px rgba(29, 78, 216, .3); }
fieldset:disabled .einst-schalter { cursor: default; }

/* Der Fuss klebt unten, solange es etwas zu speichern gibt: Der Knopf soll nicht hinter
   den Feldern verschwinden - daran ist die Zahlungsmeldung schon einmal gescheitert. */
.einst-fuss {
  position: sticky; bottom: 0;
  display: flex; justify-content: flex-end; gap: .75rem;
  padding: .75rem 0;
  background: linear-gradient(to bottom, transparent, var(--flaeche) 35%);
}
.einst-fuss button { width: auto; margin-top: 0; padding: .7rem 1.5rem; }
.einst-fuss button:disabled { opacity: .45; cursor: default; }
@media (max-width: 639px) {
  .einst-fuss button { flex: 1; }
}

/* --- Lademodus (Dialog auf der Uebersicht) -------------------------------------------
   Kacheln statt einer Auswahlliste: Jeder Modus traegt Symbol, Namen und einen Satz, was
   er tut. Wer umschaltet, will das auf einen Blick vergleichen - in einer Liste stuende
   nur der Name. */
.lademodus-dialog { max-width: 30rem; }

.lm-punkt + .lm-punkt { margin-top: 1.5rem; }
.lm-titel { margin: 0 0 .5rem; font-size: .9375rem; }
.lm-fremd { margin: 0 0 .5rem; }

.lm-kacheln { display: grid; gap: .5rem; }

.lm-kachel {
  display: flex; align-items: center; gap: .875rem;
  width: 100%;
  padding: .75rem .875rem;
  font: inherit; text-align: left;
  color: var(--text); background: var(--karte);
  border: 1px solid var(--rand); border-radius: .75rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.lm-kachel:hover:not(:disabled) { border-color: #a1a1aa; }
.lm-kachel:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29, 78, 216, .25); }
.lm-kachel:disabled { cursor: default; }
.lm-kachel:disabled:not([aria-checked="true"]):not(.lm-schaltet) { opacity: .55; }

.lm-kachel[aria-checked="true"] {
  border-color: var(--akzent);
  background: var(--akzent-flaeche);
  box-shadow: inset 0 0 0 1px var(--akzent);
}

.lm-symbol {
  flex: none;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  color: var(--gedaempft); background: var(--getoent);
  border-radius: .65rem;
  transition: color .15s, background .15s;
}
.lm-symbol svg { width: 1.35rem; height: 1.35rem; }
.lm-kachel[aria-checked="true"] .lm-symbol { color: #fff; background: var(--akzent); }

.lm-text { flex: 1; min-width: 0; }
.lm-text strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--ueberschrift); }
.lm-text small  { display: block; margin-top: .1rem; font-size: .8125rem; color: var(--leise); }

/* Der Haken rechts: ein leerer Kreis, der sich fuellt. Beim Umschalten dreht er sich, damit
   der Klick eine sichtbare Antwort hat, bevor der Solarmanager quittiert. */
.lm-haken {
  flex: none; position: relative;
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--rand); border-radius: 50%;
  transition: border-color .15s, background .15s;
}
.lm-kachel[aria-checked="true"] .lm-haken { border-color: var(--akzent); background: var(--akzent); }
.lm-kachel[aria-checked="true"] .lm-haken::after {
  content: ""; position: absolute; left: .34rem; top: .14rem;
  width: .3rem; height: .6rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lm-schaltet .lm-haken {
  border-color: var(--rand); border-top-color: var(--akzent);
  animation: lm-dreht .8s linear infinite;
}
@keyframes lm-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lm-schaltet .lm-haken { animation: none; border-color: var(--akzent); }
}

.lm-stand { min-height: 1.1rem; margin: .5rem 0 0; font-size: .8125rem; color: var(--leise); }
.lm-stand.gut    { color: var(--gut); }
.lm-stand.fehler { color: var(--fehler); }