:root{
  --gruen-dunkel:#3C5A2C;
  --gruen-hell:#90A57B;
  --rot:#CE392E;
  --rosa:#DC8688;
  --bg:#FAFAF8;
  --karte:#ffffff;
  --text:#243019;
  --grau:#8a8f83;
  --linie:#e7e7e1;
  --schatten:0 2px 10px rgba(60,90,44,.08);
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
h1{font-size:1.35rem;margin:0;color:var(--gruen-dunkel)}
h2{color:var(--gruen-dunkel)}

/* Ansichten */
.view{display:none;padding:0 18px 24px;max-width:560px;margin:0 auto}
.view.active{display:block}
.topbar{display:flex;justify-content:center;align-items:center;padding:22px 0 10px}
.topbar.small{justify-content:flex-start;padding:24px 0 8px}
.logo{height:96px;width:auto}

/* Fahren */
.fahren-inner{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:8px}
.hint{color:var(--grau);text-align:center;font-size:.95rem;line-height:1.5;margin:6px 4px 0}
.bigbtn{
  width:230px;height:230px;border-radius:50%;border:none;color:#fff;
  font-size:1.5rem;font-weight:600;letter-spacing:.2px;box-shadow:var(--schatten);
  cursor:pointer;transition:transform .08s ease, filter .15s ease;
}
.bigbtn:active{transform:scale(.97)}
.bigbtn.start{background:var(--gruen-hell)}
.bigbtn.stop{background:var(--rot)}
.linkbtn{background:none;border:none;color:var(--gruen-dunkel);font-size:.95rem;text-decoration:underline;padding:10px;cursor:pointer}
.linkbtn.danger{color:var(--rot);display:block;margin:8px auto 0;text-decoration:none}

/* Live-Anzeige */
.live{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 4px}
.live-km{font-size:4.2rem;font-weight:700;color:var(--gruen-dunkel);line-height:1}
.live-km small{font-size:1.2rem;color:var(--grau);margin-left:6px;font-weight:600}
.live-time{font-size:1.1rem;color:var(--grau);font-variant-numeric:tabular-nums}
.live-status{font-size:.85rem;color:var(--rosa);min-height:1em}

/* Liste */
.liste-controls{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.liste-controls label{color:var(--grau);font-size:.9rem}
select,input[type=text],input[type=date]{
  font:inherit;padding:11px 12px;border:1px solid var(--linie);border-radius:12px;
  background:var(--karte);color:var(--text);width:100%;
}
#month-select{width:auto;flex:1}
.summary{background:var(--gruen-dunkel);color:#fff;border-radius:var(--radius);padding:16px 18px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--schatten)}
.summary .big{font-size:1.6rem;font-weight:700}
.summary .lbl{font-size:.8rem;opacity:.85}
.summary .euro{color:#fff;text-align:right}

.export-row{display:flex;gap:10px;margin:14px 0}
.exportbtn{flex:1;padding:13px;border:none;border-radius:12px;background:var(--gruen-dunkel);color:#fff;font-weight:600;font-size:1rem;cursor:pointer}
.exportbtn.ghost{background:#fff;color:var(--gruen-dunkel);border:1.5px solid var(--gruen-hell)}
.exportbtn:active{filter:brightness(.95)}

.trip-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.trip{background:var(--karte);border-radius:14px;padding:13px 15px;box-shadow:var(--schatten);display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-left:5px solid var(--gruen-hell)}
.trip.privat{border-left-color:var(--rosa)}
.trip .z{font-weight:600}
.trip .m{color:var(--grau);font-size:.85rem;margin-top:3px}
.trip .km{text-align:right;font-weight:700;color:var(--gruen-dunkel);white-space:nowrap}
.trip .km small{display:block;font-weight:500;color:var(--grau);font-size:.8rem}
.empty{color:var(--grau);text-align:center;padding:40px 10px}

/* Einstellungen */
.settings{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:.85rem;color:var(--grau)}
.card{background:var(--karte);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--schatten)}
.card.info{border-left:5px solid var(--rot)}
.card strong{color:var(--gruen-dunkel)}
.card p{margin:8px 0 0;color:var(--text);font-size:.9rem;line-height:1.5}

/* Segment dienstlich/privat */
.seg{display:flex;background:#eef0ea;border-radius:12px;padding:4px;gap:4px}
.seg-btn{flex:1;border:none;background:none;padding:10px;border-radius:9px;font:inherit;color:var(--grau);cursor:pointer}
.seg-btn.active{background:#fff;color:var(--gruen-dunkel);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* Formular-Sheet */
.sheet{position:fixed;inset:0;background:rgba(36,48,25,.35);display:flex;align-items:flex-end;z-index:50}
.sheet-inner{background:var(--bg);width:100%;max-width:560px;margin:0 auto;border-radius:22px 22px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:13px}
.sheet-actions{display:flex;gap:10px;margin-top:4px}

/* Tabbar */
.tabbar{position:fixed;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--karte);border-top:1px solid var(--linie);display:flex;z-index:40}
.tab{flex:1;border:none;background:none;color:var(--grau);font-size:.72rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.tab .tab-ico{font-size:1.15rem;line-height:1}
.tab.active{color:var(--gruen-dunkel);font-weight:600}

/* Toast */
.toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--gruen-dunkel);color:#fff;padding:11px 18px;border-radius:24px;font-size:.9rem;box-shadow:var(--schatten);z-index:60}