:root{color-scheme:dark;--red:#ff1720;--bg:#000;--card:#101010;--line:#292929;--muted:#9d9d9d;--text:#fff}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:radial-gradient(circle at top,#202020 0,#050505 42%,#000 100%);color:var(--text);font-family:Inter,Arial,sans-serif;min-height:100svh}
.app{width:min(430px,100%);margin:0 auto;padding:calc(env(safe-area-inset-top) + 10px) 14px 120px;overflow:visible}
.logoHeader{height:auto;display:flex;align-items:center;justify-content:center;overflow:visible;margin:0 0 8px}
.logo{display:block;width:100%;max-width:390px;height:auto;object-fit:contain;object-position:center;margin:0 auto 12px}
.widgetCard{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:linear-gradient(145deg,rgba(255,23,32,.22),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:16px;margin:8px 0 12px;box-shadow:0 20px 60px rgba(255,23,32,.10)}
.widgetCard span,.widgetCard small{display:block;color:var(--muted);font-size:12px}
.widgetCard strong{display:block;font-size:40px;line-height:1;color:var(--red);letter-spacing:-.07em;margin:5px 0 0}
.widgetSide{text-align:right}
.widgetSide span{color:#fff;font-weight:900;font-size:14px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:22px;margin:10px 0 12px;box-shadow:0 22px 70px rgba(255,23,32,.12)}
.hero span,.hero small,.miniStats span,.miniStats small,label,.message{color:var(--muted)}
.hero strong{display:block;font-size:72px;line-height:.95;color:var(--red);letter-spacing:-.08em;margin-top:8px}
.hero small{font-size:16px}
.miniStats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.miniStats article,.card{background:rgba(16,16,16,.96);border:1px solid var(--line);border-radius:24px;box-shadow:0 16px 50px rgba(0,0,0,.35)}
.miniStats article{padding:14px}
.miniStats strong{display:block;font-size:25px;margin-top:5px;letter-spacing:-.04em}
.card{padding:16px;margin-bottom:14px}
.card.compact{padding:14px}
h2{font-size:20px;margin:0 0 14px;letter-spacing:-.03em}
.compact h2{font-size:16px;margin:0 0 10px}
form{display:grid;gap:12px}
label{display:grid;gap:7px;font-size:13px}
input,select{width:100%;min-height:52px;border:1px solid var(--line);border-radius:17px;background:#050505;color:#fff;font-size:17px;padding:0 14px;outline:none}
input:focus,select:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
input[type="date"]{width:100%;box-sizing:border-box;min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:17px;background:#050505;color:#fff;font-size:17px;appearance:none;-webkit-appearance:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button{min-height:54px;border:0;border-radius:18px;background:var(--red);color:#fff;font-weight:850;font-size:16px;cursor:pointer}
.vehicleRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.smallBtn{min-height:52px;border-radius:16px;padding:0 14px;font-size:14px;white-space:nowrap}
.currencyRow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.currencyBtn{min-height:42px;border-radius:14px;background:#111;border:1px solid #333;color:#fff;font-size:14px}
.currencyBtn.active{background:var(--red);border-color:var(--red)}
.sectionTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.entries{display:grid;gap:10px}
.entry{display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px;border:1px solid var(--line);border-radius:18px;background:#070707}
.entry strong{font-size:18px;color:var(--red)}
.entry small,.entry span{color:var(--muted);font-size:13px}
.entry .right{text-align:right}
.deleteBtn{margin-top:8px;min-height:auto;padding:6px 9px;border-radius:10px;background:#111;border:1px solid #333;color:#ff1720;font-size:12px;font-weight:700;cursor:pointer}

/* Sprachleiste klein, mittig, unten */
#languageBar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);z-index:2147483647;display:flex;justify-content:center;align-items:center;gap:6px;width:auto;margin:0;padding:6px;background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.18);border-radius:999px;box-shadow:0 12px 40px rgba(0,0,0,.70);pointer-events:auto}
.languageButton{display:flex;align-items:center;justify-content:center;min-width:42px;width:42px;min-height:32px;height:32px;padding:0;border-radius:999px;border:1px solid #444;background:#181818;color:#fff;font-size:12px;font-weight:900;line-height:1}
.languageButton.active{background:var(--red);border-color:var(--red);color:#fff}
@media (max-width:360px){.logo{max-height:96px}.hero strong{font-size:60px}.app{padding-left:10px;padding-right:10px}.vehicleRow{grid-template-columns:1fr}.smallBtn{width:100%}}


.legalCard{
  margin-top:10px;
}

.legalCard p{
  color:#b8b8b8;
  line-height:1.6;
  font-size:14px;
}

.legalCard strong{
  color:#ffffff;
}


.legalButtonWrap{
  display:flex;
  justify-content:center;
  margin-top:6px;
  margin-bottom:20px;
}

.legalBtn{
  min-height:40px;
  padding:10px 18px;
  border-radius:999px;
  background:#121212;
  border:1px solid #333;
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.legalModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999999;
  padding:20px;
}

.legalModal.show{
  display:flex;
}

.legalContent{
  width:min(420px,100%);
  max-height:85vh;
  overflow:auto;
  background:#0d0d0d;
  border:1px solid #2d2d2d;
  border-radius:24px;
  padding:22px;
  position:relative;
}

.closeLegal{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  min-height:auto;
  border-radius:999px;
  background:#181818;
  border:1px solid #333;
  color:#fff;
  font-size:16px;
  font-weight:900;
}

.legalContent p{
  color:#b8b8b8;
  line-height:1.6;
  font-size:14px;
}

.legalContent strong{
  color:#fff;
}


.infoButtons{
  display:flex;
  justify-content:center;
  margin-top:8px;
  margin-bottom:10px;
}


#consumptionChart{
width:100%;
background:#050505;
border-radius:18px;
border:1px solid #252525;
padding:10px;
}

.uploadBox{
display:flex;
align-items:center;
justify-content:center;
min-height:54px;
border-radius:18px;
border:1px dashed #444;
background:#090909;
cursor:pointer;
text-align:center;
}

.uploadBox input{
display:none;
}

.vehiclePreview{
width:100%;
margin-top:12px;
border-radius:20px;
border:1px solid #252525;
display:none;
}

.serviceEntry{
padding:12px;
border-radius:16px;
border:1px solid #252525;
margin-top:10px;
background:#080808;
}

.serviceEntry strong{
color:#ff1720;
}


/* Buttons ganz unten platzieren */
.infoButtons,
.legalButtonWrap{
  position:relative;
  margin-top:28px !important;
  margin-bottom:0 !important;
}

.app{
  padding-bottom:220px !important;
}


.deleteServiceBtn,
.deleteImageBtn{
margin-top:10px;
min-height:auto;
padding:8px 12px;
border-radius:12px;
background:#111;
border:1px solid #333;
color:#ff1720;
font-size:12px;
font-weight:800;
}


.instagramWrap{
display:flex;
justify-content:center;
margin-top:14px;
margin-bottom:8px;
}

.instagramLink{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
border-radius:999px;
border:1px solid #333;
background:#111;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:800;
transition:.2s ease;
}

.instagramLink:hover{
border-color:#ff1720;
color:#ff1720;
}


.instagramLink{
  padding:14px 24px !important;
  font-size:15px !important;
  font-weight:900 !important;
  gap:10px !important;
}


.instagramLink{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
}

.instagramLink svg{
width:18px;
height:18px;
flex:none;
}


/* Gleichmäßige Abstände zwischen unteren Buttons */
.infoButtons,
.legalButtonWrap,
.instagramWrap{
  margin-top:14px !important;
  margin-bottom:14px !important;
}

.infoButtons{
  margin-top:24px !important;
}