/* Ergaenzungen zum Ladeplaner (siehe erweitert.js) */
.erw{margin:6px 0 14px; border:1px solid var(--linie); border-radius:var(--radius); background:var(--panel2)}
.erw>summary{cursor:pointer; padding:10px 12px; color:var(--grau); font-size:13px; list-style:none}
.erw>summary::-webkit-details-marker{display:none}
.erw>summary::before{content:"▸ "; color:var(--akzent2)}
.erw[open]>summary::before{content:"▾ "}
.erw .feld{padding:0 12px 10px}
.erw select,.erw input[type=datetime-local]{width:100%; background:var(--panel); color:var(--text);
  border:1px solid var(--linie); border-radius:9px; padding:8px 10px; font:inherit}
.erw select[multiple]{padding:4px}
.erw .chk,.erw .chks label{display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--text); margin:0 12px 10px 12px}
.erw .chks{display:flex; flex-wrap:wrap}
.erw .chks label{margin:0 14px 0 0}

.energie{margin:12px 0; padding:11px 12px; border:1px solid #1c4a5a; background:#0c2a3d; border-radius:var(--radius)}
.energie .titel{font-size:14px}
.energie .titel small{color:var(--grau); font-size:12px; margin-left:6px}
.energie .meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0 6px; font-size:13px; color:var(--grau)}
.energie .meta b{color:var(--text)}
.verkehr{margin:12px 0; padding:11px 12px; border:1px solid #5a4518; background:#2e2410; border-radius:var(--radius)}
.verkehr .titel{font-size:14px; margin-bottom:4px}
.klein{font-size:11.5px; color:var(--grau); line-height:1.45}

.alts{display:flex; gap:8px; margin:12px 0}
.alt{flex:1; background:var(--panel2); color:var(--text); border:1px solid var(--linie); border-radius:10px;
  padding:9px 8px; text-align:left; cursor:pointer; font:inherit; font-size:12.5px; display:flex; flex-direction:column; gap:2px}
.alt.an{border-color:var(--akzent2); background:#0e3a48}
.alt span{color:var(--grau)}

.live{margin-top:8px; font-size:12.5px; color:var(--grau); line-height:1.5}
.live b{color:var(--text)}

.aktionen{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0 6px}
.sek{background:var(--panel2); color:var(--text); border:1px solid var(--linie); border-radius:10px; padding:10px;
  cursor:pointer; font:inherit; font-size:13.5px}
.sek:hover{border-color:var(--akzent2)}
.sek.aus{opacity:.55}

.favs{margin-top:16px}
.favs .k{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--grau); margin-bottom:6px}
.fav{display:flex; gap:6px; margin-bottom:6px}
.fav button{background:var(--panel2); color:var(--text); border:1px solid var(--linie); border-radius:9px; padding:8px 10px;
  cursor:pointer; font:inherit; font-size:13px}
.fav button:first-child{flex:1; text-align:left}
.x{background:transparent; border:none; color:var(--grau); cursor:pointer; font-size:18px; padding:0 8px}

.fahrt{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px;
  border-top:1px solid var(--linie); padding:7px 0; color:var(--text)}
.knoepfe2{display:flex; gap:8px; margin-top:14px}
.knoepfe2 .knopf{flex:1}
.sek2{background:var(--panel2)!important; color:var(--text)!important; border:1px solid var(--linie)!important}

.autoknopf{position:absolute; right:12px; top:12px; background:var(--panel2); color:var(--grau); border:1px solid var(--linie);
  border-radius:9px; padding:5px 10px; font:inherit; font-size:12px; cursor:pointer}
.autoknopf.an{color:var(--akzent); border-color:var(--akzent)}
.kopf{position:relative}

/* Auto-Ansicht: grosse Ziele, mehr Kontrast, breiteres Panel */
body.auto{font-size:19px}
body.auto #panel{width:min(560px,55vw)}
body.auto .knopf,body.auto .sek,body.auto .alt,body.auto .chip{min-height:56px; font-size:1.05em}
body.auto input,body.auto select{min-height:52px; font-size:1.05em}
body.auto .zus .kachel .v{font-size:1.5em}
body.auto .energie .meta,body.auto .klein,body.auto .live{font-size:1em}
body.auto .autoknopf{padding:10px 16px; font-size:1em}

@media (max-width:820px){ body.auto #panel{width:auto} .aktionen{grid-template-columns:1fr 1fr} }

/* Favoriten-Orte: Schnellwahl unter Start/Ziel */
.orte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.orte .ort { background: rgba(95, 214, 230, .10); border: 1px solid rgba(95, 214, 230, .28); color: inherit;
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orte .ort .sym { margin-right: 5px; opacity: .85; }
.orte .ort.neu { background: transparent; border-style: dashed; opacity: .8; }
body.auto .orte .ort { font-size: 17px; padding: 9px 16px; }
.orte .ort.gew { border-color: var(--akzent, #B5F23D); }
/* Meine Ladekarten */
.karte-zeile { margin-top: 5px; font-size: 12.5px; line-height: 1.4; }
.karte-zeile .klein, .kz .klein { opacity: .7; font-size: 11.5px; }
.kartenliste { max-height: 46vh; overflow: auto; margin-top: 8px; }
.kartenliste .kg { margin-bottom: 8px; }
.kartenliste .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin: 4px 0; }
.kz { display: block; padding: 4px 0; cursor: pointer; }
/* Auswahl-Knoepfe in Dialogen (Modellwahl, Netzsuche) - vorher ungestylte weisse Browser-Knoepfe */
.wahl { background: rgba(95, 214, 230, .08); border: 1px solid rgba(95, 214, 230, .28); color: inherit; border-radius: 10px;
        padding: 9px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.wahl:hover, .wahl:focus { border-color: var(--akzent, #B5F23D); background: rgba(181, 242, 61, .08); outline: none; }
body.auto .wahl { font-size: 17px; padding: 12px 16px; }
#modelldialog #md-liste { padding-right: 4px; }
#modelldialog #md-suche { background: var(--panel2, #0c2740); color: inherit; border: 1px solid rgba(95, 214, 230, .35);
        border-radius: 10px; padding: 10px 12px; font: inherit; }

/* Fahrtplan-Fenster */
.fp-dialog{max-width:560px}
.fp-abfahrt{gap:8px; align-items:center; flex-wrap:wrap; margin:4px 0 8px}
.fp-abfahrt input{flex:1; min-width:190px; width:auto; background:var(--panel2,#16202a); color:var(--text); border:1px solid var(--linie);
  border-radius:10px; padding:8px 10px; font:inherit; color-scheme:dark}
.fp-abfahrt label{font-size:11px; color:var(--grau); text-transform:uppercase; letter-spacing:.04em}
.fp-liste{border-left:2px solid var(--linie); margin:10px 0 12px 6px}
.fp-zeile{display:grid; grid-template-columns:78px 1fr auto; gap:8px; padding:7px 0 7px 10px; position:relative; font-size:13.5px}
.fp-zeile::before{content:''; position:absolute; left:-6px; top:12px; width:10px; height:10px; border-radius:50%; background:var(--akzent2,#5FD6E6)}
.fp-zeile.fp-via::before{background:#fff}
.fp-zeile.fp-ende::before{background:var(--akzent,#B5F23D)}
.fp-zeit{font-variant-numeric:tabular-nums; color:var(--grau); white-space:nowrap}
.fp-zeit small{display:block; font-size:11px; opacity:.8}
.fp-ab{text-align:right}
.fp-detail{color:var(--grau); font-size:12.5px; margin-top:2px}
.fp-summen{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:6px 0 10px}
.fp-summen div{background:var(--panel2,#16202a); border:1px solid var(--linie); border-radius:10px; padding:8px 10px}
.fp-summen span{display:block; font-size:11px; color:var(--grau); text-transform:uppercase; letter-spacing:.04em}
.fp-summen b{font-size:15px} .fp-summen small{display:block; color:var(--grau); font-size:11px}
@media (max-width:480px){ .fp-zeile{grid-template-columns:62px 1fr} .fp-ab{grid-column:2; text-align:left} }

/* Wo ich lade */
.lz{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; padding:6px 0; border-bottom:1px solid var(--linie)}
.lz .kz{flex:1 1 220px; margin:0}
.lz-bev{font-size:12.5px; color:var(--grau); margin-left:24px}
.lz-wahl{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px}
.lz-wahl label{display:flex; gap:4px; align-items:center}
#ld-umweg{width:auto; display:inline-block; padding:3px 6px; margin-left:4px}
#kartendialog .feld label.kz, #kartendialog .lz label, #kartendialog .lz-wahl label{text-transform:none; letter-spacing:0;
  font-size:13.5px; color:var(--text); font-weight:normal; display:flex; gap:6px; align-items:center; margin:5px 0}
#kartendialog .lz label.lz-bev{font-size:12.5px; color:var(--grau); margin:0 0 0 24px}
#kartendialog .feld > label:first-child{margin-bottom:4px}

/* Welle 1 (Vertrag §15): kleine Zahlenfelder in Erweitert, Beschriftung normal statt Feld-Ueberschrift */
.erw .chks label{text-transform:none; letter-spacing:0; font-weight:400; white-space:nowrap; font-size:13px; color:var(--text); margin:0 14px 6px 0}
.erw .chks select{width:auto; padding:4px 6px; font-size:12px}
.erw input.e-zahl{display:inline-block; width:58px; padding:4px 6px; font-size:12px; background:var(--panel); color:var(--text);
  border:1px solid var(--linie); border-radius:6px}
.dialog .fp-verbrenner label{font-weight:400; color:var(--text); margin:0; display:inline-flex; gap:6px; align-items:center; font-size:13px; text-transform:none; letter-spacing:0}
.fp-tage{margin:8px 0 10px; display:flex; flex-direction:column; gap:6px}
.fp-tag{font-size:13px; padding:8px 10px; border:1px solid var(--linie); border-radius:10px}
.fp-tag.ueber{border-color:var(--warn,#FFB84D)}
.via-laden label{text-transform:none; letter-spacing:0; font-weight:400; font-size:12px}