/* ===========================================================================
   fressnapf Charge

   Farben aus dem Logo GEMESSEN: #31632f (Markengrün), #db4333 (Akzent).
   Nicht geschätzt – ein erster Versuch aus einem Markenfoto lag deutlich
   daneben.

   Die Hausschrift stand nicht zur Verfügung; hier steht die Systemschrift.
   Vor einem echten Einsatz gehört das durch die Markenführung.
   =========================================================================== */
:root{
  --gruen:#31632f; --gruen-dunkel:#22461f; --gruen-hell:#eaf1e9;
  --rot:#db4333; --tinte:#14241d; --grau:#5d6b65; --linie:#dfe5e2;
  --flaeche:#f6f8f7; --weiss:#fff;
  --frei:#16a34a; --laedt:#0284c7; --fertig:#d97706; --belegt:#94a3b8;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--flaeche);color:var(--tinte);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--gruen-dunkel)}

/* Leiste der Vorführung – bewusst abgesetzt, damit niemand sie für einen
   Teil der Anwendung hält. */
.demoleiste{background:var(--tinte);color:#fff;padding:.45rem .8rem;font-size:.78rem;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.demoleiste .uhr{background:var(--gruen);padding:.1rem .45rem;border-radius:6px;
  font-weight:800;font-variant-numeric:tabular-nums}
.demoleiste form{display:flex;gap:.3rem;flex-wrap:wrap;margin:0}
.demoleiste button{font-size:.74rem;padding:.25rem .5rem;border-radius:6px;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff}
.demoleiste button:hover{background:rgba(255,255,255,.26)}
.demoleiste button.warn{border-color:rgba(219,67,51,.6)}
.demoleiste .rechts{margin-left:auto}
.demoleiste a{color:#8fd3b4}
.demoleiste .hint{opacity:.7}

.kopf{background:var(--gruen);color:#fff;padding:.9rem .8rem}
.kopf-innen{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:.9rem}
.marke-link{display:block;width:92px;flex:0 0 auto}
.marke{width:100%;height:auto;display:block}
/* Im grünen Balken wird das Grün weiß – das rote Kabel bleibt rot.
   AUSDRÜCKLICH NUR DORT (.kopf davor): Ohne diese Einschränkung galt die
   Regel auch auf der weißen Anmeldekarte, und dort war vom Zeichen nur noch
   das rote Kabel zu sehen – der Rest war Weiß auf Weiß. */
.kopf .marke [fill="#31632f"]{fill:#fff}
.kopf .marke [stroke="#31632f"]{stroke:#fff}
.kopf h1{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.kopf h1 span{font-weight:400;opacity:.92}
.kopf p{margin:0;font-size:.82rem;opacity:.9}

.nav{background:var(--weiss);border-bottom:1px solid var(--linie);display:flex;
  overflow-x:auto}
.nav a{flex:1 0 auto;text-align:center;padding:.65rem .8rem;font-size:.84rem;
  font-weight:600;color:var(--grau);text-decoration:none;border-bottom:2px solid transparent;
  white-space:nowrap}
.nav a.an{color:var(--gruen);border-bottom-color:var(--gruen)}
.punkt{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;
  margin-left:.3rem;background:var(--rot);color:#fff;border-radius:9px;font-size:.66rem;
  font-style:normal;font-weight:800;vertical-align:1px}

.inhalt{max-width:980px;margin:0 auto;padding:1rem .8rem 3rem}

.flash{padding:.6rem .8rem;border-radius:10px;margin-bottom:.8rem;font-size:.88rem}
.flash.ok{background:var(--gruen-hell);border:1px solid var(--gruen)}
.flash.err{background:#fef2f2;border:1px solid var(--rot)}

.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;
  padding:.9rem 1rem;margin-bottom:.8rem}
.karte.hoch{border-color:var(--gruen);background:var(--gruen-hell)}
.karte.warn{border-color:var(--fertig);background:#fffbeb}
.karte h2{margin:0 0 .4rem;font-size:1rem}
.karte p{margin:.25rem 0;font-size:.88rem;color:var(--grau)}
.karte p.stark{color:var(--tinte)}
.klein{font-size:.78rem;color:var(--grau);margin-top:.5rem}

.knopf{display:inline-block;background:var(--gruen);color:#fff;border:none;
  padding:.6rem 1rem;border-radius:10px;font-weight:700;font-size:.9rem;cursor:pointer;
  text-decoration:none}
.knopf:hover{background:var(--gruen-dunkel)}
.knopf.aus{background:var(--weiss);color:var(--tinte);border:1px solid var(--linie)}
.knopf.voll{display:block;width:100%;text-align:center;margin-top:.6rem}
.reihe{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}

.wahl{display:flex;gap:.35rem;flex-wrap:wrap;margin:.4rem 0}
.wahl label{border:1px solid var(--linie);background:var(--weiss);padding:.4rem .7rem;
  border-radius:9px;font-size:.84rem;cursor:pointer}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl input:checked + span{color:#fff}
.wahl label:has(input:checked){background:var(--gruen);border-color:var(--gruen);
  color:#fff;font-weight:700}

.raster{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin:.6rem 0}
.raster.weit{grid-template-columns:repeat(5,1fr)}
@media(min-width:620px){.raster{grid-template-columns:repeat(10,1fr)}}
.platz{aspect-ratio:4/5;border-radius:10px;border:1.5px solid var(--linie);
  background:var(--weiss);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.1rem;font-size:.62rem;color:var(--grau);padding:.2rem;
  text-align:center;text-decoration:none}
.platz b{font-size:.74rem;color:var(--tinte)}
.platz.frei{border-color:var(--frei);background:#f0fdf4;color:#15803d}
.platz.laedt{border-color:var(--laedt);background:#eff6ff;color:#0369a1}
.platz.fertig{border-color:var(--fertig);background:#fffbeb;color:#b45309}
.platz.stoerung{border-color:var(--rot);background:#fef2f2;color:var(--rot)}
.platz.reserviert{border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen-dunkel)}
.platz.ich{outline:3px solid var(--gruen);outline-offset:1px}
.legende{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.72rem;color:var(--grau);
  margin-top:.5rem}
.legende span{display:flex;align-items:center;gap:.3rem}
.pkt{width:9px;height:9px;border-radius:50%}

.liste{list-style:none;margin:.5rem 0 0;padding:0}
.liste li{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;
  border-top:1px solid var(--linie);font-size:.88rem}
.liste li:first-child{border-top:none}
.nr{width:25px;height:25px;border-radius:50%;background:var(--gruen-hell);
  color:var(--gruen-dunkel);display:grid;place-items:center;font-size:.74rem;
  font-weight:800;flex:0 0 auto}
.nr.ich{background:var(--gruen);color:#fff}
.liste .rest{margin-left:auto;font-size:.76rem;color:var(--grau);text-align:right}

.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:.6rem 0}
@media(min-width:620px){.zahlen{grid-template-columns:repeat(4,1fr)}}
.zahlen div{background:var(--flaeche);border-radius:10px;padding:.6rem .7rem}
.zahlen .lab{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grau)}
.zahlen .val{font-size:1.3rem;font-weight:800}

.balken{height:9px;background:var(--linie);border-radius:5px;overflow:hidden;margin:.4rem 0}
.balken i{display:block;height:100%;background:var(--gruen)}

.weg{text-decoration:line-through;opacity:.55}
.log{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--tinte);
  color:#cfe8dc;border-radius:12px;padding:.7rem .85rem;max-height:260px;overflow:auto}
.log div{padding:.1rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.log .z{color:#7dd3b0}

.fuss{text-align:center;font-size:.74rem;color:var(--grau);padding:1.4rem .8rem 2rem;
  line-height:1.7}

.anmeldung{max-width:360px;margin:2.5rem auto;background:var(--weiss);
  border:1px solid var(--linie);border-radius:16px;padding:1.4rem}
.anmeldung h2{margin:.2rem 0 .8rem;font-size:1.05rem}
.anmeldung select,.anmeldung input{width:100%;padding:.6rem .7rem;border-radius:10px;
  border:1px solid var(--linie);font-size:.95rem;margin-bottom:.7rem;background:var(--weiss)}
.anmeldung .marke{width:130px;margin:0 auto .8rem;display:block}

/* Verwaltungsmaske der Wallboxen */
.tab{width:100%;border-collapse:collapse;font-size:.85rem;margin:.5rem 0}
.tab th,.tab td{text-align:left;padding:.45rem .4rem;border-bottom:1px solid var(--linie);
  vertical-align:top}
.tab th{color:var(--grau);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;white-space:nowrap}
.tab code{font-size:.8rem;background:var(--flaeche);padding:.1rem .3rem;border-radius:5px}
.warnfarbe{color:var(--fertig);font-weight:600}
pre.code{background:var(--tinte);color:#cfe8dc;padding:.7rem .85rem;border-radius:10px;
  font-size:.76rem;overflow-x:auto;line-height:1.5}
.bearb{margin-top:.3rem}
.bearb summary{cursor:pointer;font-size:.78rem;color:var(--gruen)}
.bearb label{display:block;font-size:.78rem;color:var(--grau);margin:.45rem 0}
.bearb label.zeile{display:flex;align-items:center;gap:.4rem}
.bearb input[type=text],.bearb input[type=number],.bearb select{width:100%;padding:.4rem .5rem;
  border:1px solid var(--linie);border-radius:8px;font-size:.84rem;margin-top:.15rem}
.bearb input[type=checkbox]{width:auto;margin:0}
.formreihe{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  align-items:end}
.formreihe label{font-size:.78rem;color:var(--grau)}
.formreihe input,.formreihe select{width:100%;padding:.45rem .55rem;border:1px solid var(--linie);
  border-radius:8px;font-size:.86rem;margin-top:.15rem}
.knopf.klein{padding:.3rem .6rem;font-size:.76rem}

/* Leitstand – der Betriebstag im Zeitraffer */
.ls-kopf{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline}
.ls-uhr{font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--gruen)}
.ls-tempo{font-size:.86rem;color:var(--grau)}
.ls-leute{margin-left:auto;font-size:.86rem;color:var(--grau)}
.ls-plaetze{display:grid;gap:.45rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.ls-plaetze{grid-template-columns:repeat(5,1fr)}}
@media(min-width:900px){.ls-plaetze{grid-template-columns:repeat(10,1fr)}}
.ls-plaetze.klein-raster{grid-template-columns:repeat(4,1fr)}
@media(min-width:560px){.ls-plaetze.klein-raster{grid-template-columns:repeat(10,1fr)}}
.ls-platz{border:1.5px solid var(--linie);border-radius:10px;padding:.4rem .35rem;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;background:var(--weiss);
  min-height:5.2rem;justify-content:center}
.ls-platz .ls-id{font-size:.74rem;font-weight:800}
.ls-platz .ls-txt{font-size:.68rem;color:var(--grau)}
.ls-platz .ls-wer{font-size:.6rem;color:var(--grau);text-align:center;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.ls-balken{display:block;width:80%;height:5px;background:var(--linie);border-radius:3px;
  overflow:hidden;margin:.1rem 0}
.ls-balken b{display:block;height:100%;background:var(--gruen);transition:width .4s ease}
.ls-platz.frei{border-color:var(--frei);background:#f0fdf4}
.ls-platz.laedt{border-color:var(--laedt);background:#eff6ff}
.ls-platz.fertig{border-color:var(--fertig);background:#fffbeb}
.ls-platz.fertig .ls-balken b{background:var(--fertig)}
.ls-platz.stoerung{border-color:var(--rot);background:#fef2f2}
.ls-platz.reserviert{border-color:var(--gruen);background:var(--gruen-hell)}
.ls-zwei{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:800px){.ls-zwei{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}

/* Anmeldung mit Code */
.codefeld{text-align:center;font-size:1.3rem;letter-spacing:.12em;font-weight:700;
  text-transform:uppercase;font-family:ui-monospace,Menlo,Consolas,monospace}

/* Nutzerverwaltung */
.tab code.gross{font-size:.95rem;font-weight:700;letter-spacing:.06em}
.linkfeld{width:100%;max-width:17rem;font-size:.7rem;padding:.2rem .3rem;
  border:1px solid var(--linie);border-radius:6px;color:var(--grau);
  font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:.2rem}
.marke-extern{display:inline-block;font-size:.66rem;background:var(--sand);
  color:#5a4a00;padding:.08rem .35rem;border-radius:5px;font-weight:700}
tr.stillgelegt{opacity:.5}
.rollenwahl{font-size:.78rem;padding:.25rem .3rem;border:1px solid var(--linie);
  border-radius:7px}
.aktionen{white-space:nowrap}
.aktionen .knopf{margin:0 .1rem .15rem 0}
.ls-kwh{font-size:.58rem;color:var(--grau);line-height:1.1;text-align:center}
.marke-firma{display:inline-block;font-size:.64rem;background:var(--gruen-hell);
  color:var(--gruen-dunkel);padding:.08rem .35rem;border-radius:5px;font-weight:700;
  margin-left:.3rem;white-space:nowrap}

/* Willkommenstour */
.tour{max-width:620px;margin:0 auto;text-align:center}
.tour-bild{background:var(--weiss);border:1px solid var(--linie);border-radius:16px;
  padding:.6rem;margin-bottom:1rem}
.tour-bild img{width:100%;height:auto;display:block;border-radius:10px}
.tour-text{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;
  padding:1.1rem 1.2rem;text-align:left}
.tour-text.merk{background:var(--gruen-hell);border-color:var(--gruen)}
.tour-text h2{margin:0 0 .5rem;font-size:1.15rem;color:var(--gruen)}
.tour-text p{margin:0;font-size:.95rem;line-height:1.6}
.tour-punkte{display:flex;gap:.4rem;justify-content:center;margin:1rem 0}
.tour-punkte i{width:9px;height:9px;border-radius:50%;background:var(--linie);display:block}
.tour-punkte i.an{background:var(--gruen);width:24px;border-radius:5px}
.tour-knoepfe{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.vorschau-schild{display:inline-block;border:2px solid var(--gruen);border-radius:14px;
  padding:1rem 1.4rem;text-align:center;background:var(--weiss)}
.vorschau-schild h3{margin:0 0 .5rem;font-size:1.5rem;color:var(--gruen)}
.vorschau-schild svg{display:block;margin:0 auto}
.vorschau-schild p{word-break:break-all;max-width:18rem;margin:.5rem auto 0}