:root {
  --forest: #183d2b;
  --forest-soft: #246246;
  --lime: #91c76f;
  --lime-soft: #e8f3e2;
  --ink: #15211b;
  --muted: #657169;
  --line: #dce6df;
  --surface: #ffffff;
  --canvas: #f4f7f4;
  --warning: #8a5b12;
  --warning-soft: #fff4d8;
  --danger: #a73b31;
  --danger-soft: #fce9e7;
  --shadow: 0 8px 30px rgba(24, 61, 43, .09);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: var(--forest-soft); }
.shell { max-width: 1160px; margin: 0 auto; padding: 0 22px 40px; }
.topbar {
  background: var(--forest);
  color: white;
  border-bottom: 4px solid var(--lime);
}
.topbar-inner { max-width: 1160px; margin: 0 auto; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 42px; height: 42px; border-radius: 50%; background: var(--lime); color: var(--forest); display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.brand-title { margin: 0; font-size: 1.05rem; letter-spacing: .01em; }
.brand-subtitle { margin: 1px 0 0; font-size: .78rem; color: #d8e8dc; }
.top-status { text-align: right; font-size: .8rem; color: #d8e8dc; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--lime); }
.dot.off { background: #dfbd65; }

.page-head { padding: 30px 0 20px; }
.eyebrow { color: var(--forest-soft); font-size: .78rem; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; margin: 0 0 5px; }
h1 { font-size: clamp(1.7rem, 4vw, 2.25rem); letter-spacing: -.03em; margin: 0; line-height: 1.12; }
.lead { max-width: 780px; margin: 9px 0 0; color: var(--muted); }

.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 25px; }
.status-card { background: var(--surface); padding: 15px; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 3px 12px rgba(24, 61, 43, .035); }
.status-label { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.status-card strong { display: block; font-size: .94rem; color: var(--forest); }
.status-card.warning strong { color: var(--warning); }

.grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
.stack { display: grid; gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.card h2 { color: var(--forest); letter-spacing: -.02em; font-size: 1.2rem; margin: 0 0 4px; }
.card-intro { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.card-note { background: var(--lime-soft); color: #285239; border-left: 3px solid var(--lime); border-radius: 6px; padding: 11px 12px; font-size: .85rem; margin: 16px 0 0; }

form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
label { display: block; font-weight: 700; font-size: .82rem; color: var(--forest); margin-bottom: 5px; }
input, select, textarea { font: inherit; width: 100%; padding: 10px 11px; border: 1px solid #bccdc1; border-radius: 9px; color: var(--ink); background: white; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(145,199,111,.32); border-color: var(--forest-soft); }
button { font: inherit; font-weight: 800; border: 0; border-radius: 9px; padding: 10px 14px; cursor: pointer; }
.button-primary { color: white; background: var(--forest); margin-top: 15px; }
.button-primary:hover { background: #102e20; }
.button-approve { color: #164427; background: #dff0d4; padding: 7px 10px; font-size: .8rem; }
.button-reject { color: #8b2f27; background: var(--danger-soft); padding: 7px 10px; font-size: .8rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 7px; }

.table-wrap { overflow-x: auto; margin: 14px -3px 0; }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .87rem; }
th { text-align: left; color: var(--muted); font-size: .73rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding: 9px 8px; }
td { vertical-align: top; border-bottom: 1px solid #eef2ef; padding: 11px 8px; }
td small { color: var(--muted); display: block; margin-top: 2px; }
.status { display: inline-block; font-weight: 800; font-size: .74rem; padding: 3px 8px; border-radius: 999px; }
.status.offen { color: #7a4a00; background: var(--warning-soft); }
.status.genehmigt { color: #206033; background: var(--lime-soft); }
.status.gemeldet { color: #1f5579; background: #e4f1fa; }
.status.abgelehnt { color: #8b2f27; background: var(--danger-soft); }
.empty { text-align: center; color: var(--muted); padding: 20px 0 6px; }

.note-list { display: grid; gap: 10px; }
.note { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.note p { margin: 0; white-space: pre-wrap; font-size: .9rem; }
.note-meta { display: flex; justify-content: space-between; gap: 12px; font-size: .74rem; color: var(--muted); margin: 0 0 5px; }
.system-list { list-style: none; padding: 0; margin: 10px 0 0; }
.system-list li { padding: 9px 0; border-bottom: 1px solid #eef2ef; font-size: .88rem; }
.system-list li:last-child { border-bottom: 0; }
.system-list strong { color: var(--forest); }

.flash { border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; font-weight: 650; font-size: .9rem; }
.flash.success { background: var(--lime-soft); color: #285239; }
.flash.error { background: var(--danger-soft); color: #85352d; }
.footer { max-width: 1160px; margin: 0 auto; padding: 20px 22px 32px; font-size: .78rem; color: var(--muted); }
.landing { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 15%, #dcefd2, transparent 42%), var(--canvas); }
.landing-card { width: min(560px, 100%); text-align: center; background: white; border: 1px solid var(--line); border-radius: 22px; padding: 42px 30px; box-shadow: var(--shadow); }
.landing-card .brand-mark { margin: 0 auto 18px; width: 58px; height: 58px; font-size: 28px; }
.landing-card h1 { color: var(--forest); }
.landing-card p { color: var(--muted); max-width: 420px; margin: 14px auto 0; }

@media (max-width: 880px) { .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .shell { padding: 0 14px 28px; } .topbar-inner { padding: 15px 14px; } .top-status { display: none; } .status-grid { grid-template-columns: 1fr 1fr; gap: 9px; } .status-card { padding: 12px; } .card { padding: 17px; border-radius: 13px; } form .form-grid { grid-template-columns: 1fr; } .field.full { grid-column: auto; } }

/* Minimaler Monats-Stundenzettel */
.narrow-shell { max-width: 900px; }
.compact-head { padding-bottom: 16px; }
.month-navigation { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: center; margin-bottom: 16px; }
.month-navigation h2 { margin: 0; }
.button-secondary { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 800; font-size: 1.6rem; text-decoration: none; line-height: 1; }
.timesheet-total { display: flex; justify-content: space-between; align-items: baseline; border: 1px solid var(--line); background: #f7faf7; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; }
.timesheet-total span { color: var(--muted); font-weight: 700; font-size: .82rem; }
.timesheet-total strong { color: var(--forest); font-size: 1.1rem; }
.timesheet-grid { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.timesheet-head, .timesheet-row { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(74px, .8fr); gap: 8px; align-items: center; padding: 8px 10px; }
.timesheet-head { color: var(--muted); background: #f1f5f1; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.timesheet-row { border-top: 1px solid #edf1ed; }
.timesheet-row.weekend { background: #fafbfa; }
.timesheet-row.future { opacity: .52; }
.timesheet-row label { margin: 0; font-size: .84rem; }
.timesheet-row input { min-width: 0; padding: 8px 7px; font-size: .88rem; }
.timesheet-row input:disabled { background: #f3f5f3; color: var(--muted); }
.save-timesheet { width: 100%; margin-top: 16px; padding: 13px 16px; }
.quick-actions { display: grid; gap: 12px; margin-top: 18px; }
.action-card, .history-card { padding: 0; overflow: hidden; }
.action-card summary, .history-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 17px 19px; color: var(--forest); }
.action-card summary::-webkit-details-marker, .history-card summary::-webkit-details-marker { display: none; }
.action-card summary strong, .history-card summary strong { display: block; }
.action-card summary small, .history-card summary small { display: block; color: var(--muted); font-size: .8rem; font-weight: 500; margin-top: 2px; }
.action-card[open] summary, .history-card[open] summary { border-bottom: 1px solid var(--line); background: #fbfdfb; }
.action-card form, .history-card > div { padding: 0 19px 19px; }
.form-topspace { margin-top: 16px; }
.history-card { margin-top: 18px; }
@media (max-width: 560px) {
  .timesheet-card { padding: 14px; }
  .timesheet-head, .timesheet-row { grid-template-columns: 78px 1fr 1fr 68px; gap: 5px; padding: 7px 6px; }
  .timesheet-head { font-size: .64rem; }
  .timesheet-row label { font-size: .76rem; }
  .timesheet-row input { padding: 7px 4px; font-size: .78rem; }
  .month-navigation { margin: 2px 0 13px; }
}