/* DailyWork v0.2 – hell, ruhig, Rot nur für Handlungsbedarf */
* { box-sizing: border-box; margin: 0; }
:root {
  --rot: #d92c2c; --rot-hell: #fdeeee; --rot-rand: #f5cccc;
  --gruen: #157f46; --gruen-hell: #e6f5ec;
  --blau: #2458d6; --blau-hell: #e9effc;
  --violett: #6d33d6; --violett-hell: #f0e9fc;
  --orange: #c46a06; --orange-hell: #fcf1e2;
  --tinte: #182130; --grau-6: #64707f; --grau-4: #aab3bf; --grau-3: #dde2e8; --grau-1: #f3f5f7;
  --rand: 14px; --schatten: 0 1px 2px rgba(18,28,45,.06), 0 2px 8px rgba(18,28,45,.05);
}
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--grau-1); color: var(--tinte); font-size: 15px; line-height: 1.45; }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }
.layout { display: flex; min-height: 100vh; }
.ico { width: 18px; height: 18px; flex: none; }

/* ---------- Sidebar ---------- */
.sidebar { width: 224px; background: #fff; border-right: 1px solid var(--grau-3); padding: 22px 12px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.logo { font-size: 25px; font-weight: 800; letter-spacing: -.02em; padding: 0 12px 20px; }
.logo-daily { color: var(--tinte); } .logo-work { color: var(--rot); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { color: var(--tinte); padding: 9px 12px; border-radius: 9px; display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14.5px; }
.sidebar nav a .ico { color: var(--grau-6); }
.sidebar nav a:hover { background: var(--grau-1); text-decoration: none; }
.sidebar nav a.aktiv { background: var(--rot-hell); color: var(--rot); font-weight: 650; box-shadow: inset 3px 0 0 var(--rot); }
.sidebar nav a.aktiv .ico { color: var(--rot); }
.zaehler { margin-left: auto; background: var(--rot); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; font-weight: 700; }
.zaehler.grau { background: var(--grau-3); color: var(--tinte); }
.sidebar-fuss { margin-top: auto; font-size: 11px; color: var(--grau-4); padding: 10px 12px 0; }

/* ---------- Kopfleiste ---------- */
.hauptbereich { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kopfleiste { background: #fff; border-bottom: 1px solid var(--grau-3); padding: 10px 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 5; }
.suchfeld { display: flex; align-items: center; gap: 8px; background: var(--grau-1); border: 1px solid transparent; border-radius: 10px; padding: 7px 12px; flex: 1; max-width: 420px; color: var(--grau-6); }
.suchfeld:focus-within { background: #fff; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.suchfeld input { border: 0; background: transparent; padding: 0; font-size: 14.5px; width: 100%; }
.suchfeld input:focus { outline: none; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.firma { font-weight: 700; } .datum { color: var(--grau-6); font-size: 13.5px; }
main { padding: 26px 28px 70px; max-width: 1180px; width: 100%; }
.flash { margin: 16px 28px 0; } .flash div { background: var(--gruen-hell); color: var(--gruen); border-radius: 10px; padding: 10px 14px; margin-bottom: 6px; font-weight: 550; }

h1 { font-size: 22px; letter-spacing: -.01em; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--grau-6); margin-bottom: 14px; font-weight: 650; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.kopfzeile h1 { margin: 0; }

/* ---------- Karten & KPI ---------- */
.karte { background: #fff; border-radius: var(--rand); box-shadow: var(--schatten); padding: 20px 22px; margin-bottom: 20px; }
.kpi-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: #fff; border-radius: var(--rand); box-shadow: var(--schatten); padding: 16px 18px; display: block; color: inherit; transition: box-shadow .15s, transform .15s; }
.kpi:hover { box-shadow: 0 4px 14px rgba(18,28,45,.12); transform: translateY(-1px); text-decoration: none; }
.kpi .label { font-size: 12px; color: var(--grau-6); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.kpi .wert { font-size: 25px; font-weight: 780; margin-top: 5px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .unter { font-size: 13px; color: var(--grau-6); margin-top: 2px; }
.kpi.gruen .wert { color: var(--gruen); } .kpi.orange .wert { color: var(--orange); } .kpi.violett .wert { color: var(--violett); }
.trend { font-weight: 700; } .trend.hoch { color: var(--gruen); } .trend.runter { color: var(--rot); }

/* ---------- Schnellaktionen ---------- */
.schnell { display: flex; gap: 8px; flex-wrap: wrap; }
.schnell a { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--grau-3); border-radius: 99px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--tinte); }
.schnell a:hover { border-color: var(--tinte); text-decoration: none; }
.schnell .ico { width: 15px; height: 15px; }

/* ---------- Heute wichtig ---------- */
.warnkarte { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--rot-rand); border-left: 4px solid var(--rot); border-radius: 11px; padding: 13px 16px; margin-bottom: 10px; }
.warnkarte .ico { color: var(--rot); width: 20px; height: 20px; }
.warnkarte .titel { font-weight: 660; } .warnkarte .text { color: var(--grau-6); font-size: 13.5px; }
.alles-gut { background: var(--gruen-hell); color: var(--gruen); border-radius: 11px; padding: 15px 18px; font-weight: 550; }

/* ---------- Pipeline ---------- */
.pipeline { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.stufe { flex: 1; min-width: 125px; background: var(--grau-1); border-radius: 11px; padding: 12px 14px; text-align: center; }
.stufe .name { font-size: 11.5px; color: var(--grau-6); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.stufe .anzahl { font-size: 21px; font-weight: 780; margin: 3px 0 1px; }
.stufe .wert { font-size: 12.5px; color: var(--grau-6); font-variant-numeric: tabular-nums; }
.stufe.letzte { background: var(--gruen-hell); } .stufe.letzte .anzahl { color: var(--gruen); }

/* ---------- Stepper (Workflow-Leiste) ---------- */
.stepper { display: flex; align-items: center; margin-bottom: 20px; overflow-x: auto; padding: 2px 0; }
.schritt { display: flex; align-items: center; white-space: nowrap; }
.schritt .punkt { width: 24px; height: 24px; border-radius: 50%; background: var(--grau-3); color: var(--grau-6); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.schritt .name { font-size: 13px; color: var(--grau-6); margin: 0 10px 0 7px; font-weight: 550; }
.schritt .linie { width: 34px; height: 2px; background: var(--grau-3); margin-right: 10px; }
.schritt.fertig .punkt { background: var(--gruen); color: #fff; }
.schritt.fertig .name { color: var(--gruen); }
.schritt.fertig .linie { background: var(--gruen); }
.schritt.jetzt .punkt { background: var(--tinte); color: #fff; box-shadow: 0 0 0 3px var(--grau-3); }
.schritt.jetzt .name { color: var(--tinte); font-weight: 700; }
.schritt.tot { opacity: .35; }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--grau-6); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--grau-3); font-weight: 650; }
td { padding: 11px 10px; border-bottom: 1px solid var(--grau-1); vertical-align: middle; font-variant-numeric: tabular-nums; }
tr:hover td { background: #fafbfc; }
.rechts { text-align: right; } th.rechts { text-align: right; }

/* ---------- Pillen ---------- */
.pille { display: inline-block; border-radius: 99px; padding: 2.5px 11px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.pille.grau { background: var(--grau-1); color: var(--grau-6); }
.pille.blau { background: var(--blau-hell); color: var(--blau); }
.pille.gruen { background: var(--gruen-hell); color: var(--gruen); }
.pille.rot { background: var(--rot-hell); color: var(--rot); }
.pille.orange { background: var(--orange-hell); color: var(--orange); }
.pille.violett { background: var(--violett-hell); color: var(--violett); }

/* ---------- Knöpfe & Formulare ---------- */
.knopf { display: inline-flex; align-items: center; gap: 6px; background: var(--tinte); color: #fff; border: 0; border-radius: 9px; padding: 8px 16px; font-size: 14px; font-weight: 620; cursor: pointer; font-family: inherit; }
.knopf:hover { opacity: .88; text-decoration: none; }
.knopf.hell { background: #fff; color: var(--tinte); border: 1px solid var(--grau-3); }
.knopf.hell:hover { border-color: var(--tinte); opacity: 1; }
.knopf.rot { background: var(--rot); } .knopf.gruen { background: var(--gruen); }
.knopf.klein { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
form.inline { display: inline; }
label { display: block; font-size: 13px; font-weight: 620; color: var(--grau-6); margin: 13px 0 4px; }
input, select, textarea { width: 100%; border: 1px solid var(--grau-3); border-radius: 9px; padding: 9px 11px; font-size: 14.5px; font-family: inherit; background: #fff; color: var(--tinte); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.formular-schmal { max-width: 580px; }
.felder-reihe { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .felder-reihe > div { flex: 1; min-width: 110px; }

.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.leer { color: var(--grau-6); padding: 20px 0; }
.leer a { font-weight: 600; }
.summen { margin-top: 14px; margin-left: auto; max-width: 320px; }
.summen div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.summen .gesamt { border-top: 2px solid var(--tinte); font-weight: 780; font-size: 16px; margin-top: 4px; padding-top: 7px; }
.hinweis { font-size: 13px; color: var(--grau-6); }
.listenzeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grau-1); }
.listenzeile:last-of-type { border-bottom: 0; }

/* ---------- Finanzen & Syltra ---------- */
.betrag-plus { color: var(--gruen); font-weight: 650; }
.betrag-minus { color: var(--tinte); font-weight: 550; }
.legende { display: flex; gap: 18px; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--grau-6); }
.legende .punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pruef-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--grau-1); flex-wrap: wrap; }
.pruef-info { min-width: 200px; }
.pruef-aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pruef-aktionen select { width: auto; padding: 6px 9px; font-size: 13.5px; }
.checkbox { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--grau-6); margin: 0; font-weight: 550; white-space: nowrap; }
.checkbox input { width: auto; }
.beitrag-zeile { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--grau-1); flex-wrap: wrap; }
.beitrag-info { flex: 1; min-width: 260px; }
.beitrag-info .pille { margin-left: 4px; }
.beitrag-aktionen { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.beitrag-aktionen input[type=date] { padding: 6px 9px; font-size: 13.5px; }
.syltra-strip { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.mini-kpi .label { font-size: 12px; color: var(--grau-6); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.mini-kpi .wert { font-size: 21px; font-weight: 780; margin-top: 2px; }
.mini-kpi .unter { font-size: 12.5px; color: var(--grau-6); }

/* ---------- Dokumente & Assistent ---------- */
.doku-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.doku-kachel img { width: 100%; height: 110px; object-fit: cover; border-radius: 9px; display: block; border: 1px solid var(--grau-3); }
.doku-datei { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 110px; background: var(--grau-1); border-radius: 9px; text-align: center; font-size: 12px; color: var(--grau-6); }
.doku-info { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.assistent-knopf { position: fixed; right: 22px; bottom: 22px; z-index: 50; background: var(--tinte); color: #fff; border-radius: 50%; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 23px; box-shadow: 0 4px 16px rgba(18,28,45,.28); }
.assistent-knopf:hover { text-decoration: none; transform: scale(1.06); }

/* ---------- Belege & KI-Entwurf ---------- */
.beleg-zeile { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--grau-1); flex-wrap: wrap; }
.beleg-vorschau img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--grau-3); display: block; }
.beleg-form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; flex: 1; }
.beleg-form input, .beleg-form select { width: auto; padding: 7px 9px; font-size: 13.5px; }
.beleg-status { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.a-blase { max-width: 85%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; line-height: 1.5; }
.a-ki { background: var(--grau-1); align-self: flex-start; }
.a-ich { background: var(--blau-hell); align-self: flex-end; }

@media print {
  .sidebar, .kopfleiste, .assistent-knopf, .kopfzeile .knopf, .kopfzeile a { display: none !important; }
  body { background: #fff; } .karte, .kpi { box-shadow: none; border: 1px solid var(--grau-3); }
  main { padding: 0; max-width: 100%; }
}

/* ---------- Suche ---------- */
.such-gruppe { margin-bottom: 6px; }
.such-gruppe h2 { margin: 18px 0 6px; }

/* ---------- Mobil ---------- */
@media (max-width: 920px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: column; padding: 12px 10px 8px; }
  .sidebar nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .sidebar nav a { flex: none; padding: 8px 12px; }
  .sidebar nav a.aktiv { box-shadow: none; }
  .logo { padding: 0 6px 10px; font-size: 21px; }
  .sidebar-fuss { display: none; }
  .kopfleiste { padding: 10px 14px; } .kopf-rechts .firma { display: none; }
  main { padding: 18px 14px 60px; }
  .raster-2 { grid-template-columns: 1fr; }
}