/* Beleg-Bot — Design-System übernommen aus automatisierbar-demos
   (demos/rechnungseingang.html). Tokens unverändert, damit die App
   erkennbar aus derselben Familie stammt. */
:root{
  --bg:#0A0F0D; --surface-1:#111815; --surface-2:#18211D;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --text:#ECF3EF; --muted:#8A9892; --dim:#5A655F;
  --green:#15C97A; --green-soft:#5EE0A6; --green-glow:rgba(21,201,122,.16);
  --amber:#E0A23A; --red:#E06A5A;
  --radius:14px; --radius-pill:999px;
  --ease:.18s cubic-bezier(.2,.6,.2,1);
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.5;
  padding:max(16px,env(safe-area-inset-top)) 16px calc(124px + env(safe-area-inset-bottom));
  background-image:radial-gradient(900px 500px at 50% -10%,rgba(21,201,122,.10),transparent 70%);
}
.wrap{max-width:540px;margin:0 auto}

header{display:flex;align-items:center;gap:10px;padding:4px 2px 16px}
.kunde b{display:block;font-size:15px;font-weight:700;letter-spacing:-.2px}
.kunde span{display:block;color:var(--dim);font-size:11.5px}
.chip{margin-left:auto;font-size:11px;font-weight:600;color:var(--dim);
  border:1px solid var(--border-2);border-radius:var(--radius-pill);padding:4px 10px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:var(--ease)}
.chip.demo{color:var(--amber);border-color:rgba(224,162,58,.45);background:rgba(224,162,58,.10)}
.chip.echt{color:var(--green-soft);border-color:rgba(21,201,122,.4)}

.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:12px}
.card h2{font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px}

/* Beleg-Karte */
.beleg{display:flex;gap:12px;align-items:flex-start}
.beleg .thumb{width:56px;height:56px;border-radius:9px;background:rgba(255,255,255,.05);
  display:grid;place-items:center;font-size:22px;flex:none;overflow:hidden}
.beleg .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.beleg .m b{display:block;font-size:14.5px;font-weight:600}
.beleg .m span{display:block;color:var(--muted);font-size:13px}
.beleg .m .file{color:var(--green-soft);font-size:12.5px;margin-top:5px;font-family:var(--mono);
  word-break:break-all}

/* Notizfeld */
.notiz{width:100%;margin-top:14px;font:inherit;font-size:15px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:12px 13px;transition:var(--ease)}
.notiz::placeholder{color:var(--dim)}
.notiz:focus{outline:0;border-color:rgba(21,201,122,.4)}

/* Erfasste Felder */
.row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row .k{color:var(--muted);font-size:13.5px;flex:none}
.row .v{font-size:15.5px;font-weight:600;text-align:right;color:var(--dim);
  font-variant-numeric:tabular-nums;transition:opacity .28s ease,transform .28s ease}
.row .v.leer{font-weight:400}
.row .v.fill{color:var(--text);animation:pop .34s cubic-bezier(.2,.7,.3,1)}
.row .v.unsicher{color:var(--amber)}
@keyframes pop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Warte-Schimmer, solange die KI liest */
.row .v.warte{position:relative;color:transparent;min-width:88px;border-radius:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
  background-size:220% 100%;animation:shimmer 1.25s linear infinite}
@keyframes shimmer{from{background-position:220% 0}to{background-position:-20% 0}}

/* Ergebnis */
#ergebnis{display:none;border-color:rgba(21,201,122,.34);background:
  linear-gradient(180deg,var(--green-glow),transparent 60%),var(--surface-1)}
#ergebnis.on{display:block;animation:pop .4s cubic-bezier(.2,.7,.3,1)}
.ok{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--green-soft)}
.ok .dot{width:22px;height:22px;border-radius:50%;background:var(--green);color:#04180F;
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.ok + p{color:var(--muted);font-size:13.5px;margin-top:7px}
.datei{color:var(--green-soft);font-size:12.5px;margin-top:9px;font-family:var(--mono);
  word-break:break-all;display:block;text-decoration:none}
/* Monatsstand: eigene Spalte. Der Betrag ist deutlich breiter als die
   "40 Sek" aus der Vorlage und kollidiert sonst mit der Aktionsleiste. */
.zeit{display:flex;flex-direction:column;gap:2px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--border)}
.zeit .neu{font-size:27px;font-weight:800;letter-spacing:-.8px;color:var(--green-soft);
  font-variant-numeric:tabular-nums;line-height:1.15}
.zeit .lbl{color:var(--muted);font-size:12.5px}

/* Fehler */
#fehler{display:none;border-color:rgba(224,106,90,.4)}
#fehler.on{display:block;animation:pop .4s cubic-bezier(.2,.7,.3,1)}
#fehler .ok{color:var(--red)}
#fehler .ok .dot{background:var(--red);color:#1A0705}

/* Aktion: unteres Drittel, einhändig erreichbar */
.bar{position:fixed;left:0;right:0;bottom:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--bg) 34%)}
.bar .inner{max-width:540px;margin:0 auto}
button{width:100%;font:inherit;font-size:16.5px;font-weight:700;color:#04180F;
  background:var(--green);border:0;border-radius:var(--radius-pill);padding:17px;
  cursor:pointer;transition:var(--ease);-webkit-tap-highlight-color:transparent}
button:active{transform:scale(.985)}
button.ghost{background:transparent;color:var(--green-soft);border:1px solid rgba(21,201,122,.4)}
button[disabled]{opacity:.45}
#datei-input{display:none}

/* Personenauswahl auf der Startseite */
.pick{display:block;text-decoration:none;color:var(--text);background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;transition:var(--ease)}
.pick:active{transform:scale(.99)}
.pick b{font-size:16px;font-weight:600}
.pick .pfeil{margin-left:auto;color:var(--dim);font-size:20px}

@media (prefers-reduced-motion:reduce){
  .row .v.fill,#ergebnis.on,#fehler.on{animation:none}
  .row .v.warte{animation:none}
}