/* Zeiterfassung Arbor Surveyor — schlicht, mobil zuerst */
:root {
  --gruen: #1e6b3c;
  --gruen-dunkel: #14522c;
  --rot: #b3362b;
  --tinte: #22302a;
  --dezent: #6b7a72;
  --linie: #dde5df;
  --papier: #ffffff;
  --hintergrund: #f2f5f2;
  --wochenende: #fdf6e8;
  --feiertag: #e6f2e8;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--tinte); background: var(--hintergrund);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--gruen); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.25rem; margin: 0 0 .7rem; }
h2 { font-size: 1.05rem; margin: 1.1rem 0 .5rem; }

.kopf {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
  background: var(--gruen); color: #fff; padding: .55rem .9rem;
}
.kopf .marke { color: #fff; font-size: 1.05rem; margin-right: .4rem; }
.kopf nav { display: flex; flex-wrap: wrap; gap: .1rem; flex: 1; }
.kopf nav a {
  color: #e4efe7; padding: .3rem .55rem; border-radius: 6px; white-space: nowrap;
}
.kopf nav a.aktiv, .kopf nav a:hover {
  background: var(--gruen-dunkel); color: #fff; text-decoration: none;
}
.kopf .ich { font-size: .85rem; }
.kopf .ich a { color: #d3e5d8; }
.badge {
  background: #ffbf3f; color: #3a2c00; border-radius: 9px;
  padding: 0 .4rem; font-size: .78rem; font-weight: 700;
}

main { max-width: 1200px; margin: 1rem auto 3rem; padding: 0 .8rem; }
.karte {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 10px;
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.schmal { max-width: 480px; }
.mitte { margin-left: auto; margin-right: auto; }
.meldung {
  background: #fff6d9; border: 1px solid #ecd9a0; border-radius: 8px;
  padding: .6rem .9rem; margin-bottom: .8rem;
}
.hinweis { background: var(--feiertag); border-radius: 8px; padding: .5rem .8rem; }
.dezent { color: var(--dezent); }
.klein { font-size: .84rem; }
.plus { color: var(--gruen); }
.minus { color: var(--rot); }

/* Formulare */
label { display: block; margin: .55rem 0; font-size: .92rem; }
label.zeile { display: flex; align-items: center; gap: .45rem; }
input, select, button {
  font: inherit; padding: .45rem .55rem; border: 1px solid #b9c6bd;
  border-radius: 7px; background: #fff; max-width: 100%;
}
input[type=checkbox] { width: auto; padding: 0; }
label > input, label > select { display: block; width: 100%; margin-top: .2rem; }
label.zeile > input { display: inline; width: auto; }
.zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.zeilenform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.zeilenform label { margin: 0; }
button, .knopf {
  cursor: pointer; background: #eef3ef; border: 1px solid #b9c6bd;
  color: var(--tinte); border-radius: 7px; padding: .45rem .8rem; display: inline-block;
}
.knopf:hover, button:hover { text-decoration: none; filter: brightness(.97); }
button.primaer { background: var(--gruen); border-color: var(--gruen); color: #fff; }
button.ok { background: var(--gruen); border-color: var(--gruen); color: #fff; }
button.nein { background: var(--rot); border-color: var(--rot); color: #fff; }
.breit { width: 100%; }
.inline { display: inline; }

/* Tabellen */
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--linie); }
th { color: var(--dezent); font-weight: 600; font-size: .84rem; }
tr.wochenende td { background: var(--wochenende); }
tr.feiertag td { background: var(--feiertag); }
tr.heute td { box-shadow: inset 3px 0 0 var(--gruen); }
tr.summe td { border-top: 2px solid var(--tinte); border-bottom: none; }
.rollbar, .kalenderrolle { overflow-x: auto; }
.aktionen { white-space: nowrap; }
.aktionen form { margin-right: .2rem; }

/* Stempeluhr */
.stempeluhr { text-align: center; }
.timer {
  font-size: 3.2rem; font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--dezent); margin: .7rem 0;
}
.timer.laeuft { color: var(--gruen); }
.riesig {
  font-size: 1.25rem; font-weight: 700; padding: 1rem 2.4rem; border-radius: 12px;
  width: 100%; border: none; color: #fff; letter-spacing: .04em;
}
.riesig.start { background: var(--gruen); }
.riesig.stopp { background: var(--rot); }
.tageswerte {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  margin-top: 1.1rem; text-align: center;
}
.tageswerte span { display: block; font-size: .8rem; }
.tageswerte b { font-size: 1.1rem; }
.offline {
  background: #fff0f0; border: 1px solid #e3b7b2; border-radius: 8px;
  padding: .5rem; margin-bottom: .6rem; font-size: .88rem;
}
.versteckt { display: none; }

/* Werkzeugleiste (Zeiten/Kalender) */
.werkzeugleiste {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-bottom: .9rem;
}
.schalter { display: flex; border: 1px solid #b9c6bd; border-radius: 8px; overflow: hidden; }
.schalter a { padding: .4rem .8rem; background: #fff; color: var(--tinte); }
.schalter a.an { background: var(--gruen); color: #fff; }
.schalter a:hover { text-decoration: none; }
.navi { display: flex; gap: .5rem; align-items: center; }
.navi a { padding: .3rem .5rem; }

/* Crew-Kalender */
.crewkalender th, .crewkalender td { padding: .18rem .2rem; text-align: center; }
.crewkalender .namen { text-align: left; white-space: nowrap; padding-right: .7rem; }
.crewkalender td.zelle { min-width: 1.7rem; height: 2rem; border: 1px solid var(--linie); }
.crewkalender td.wochenende, .crewkalender th.wochenende { background: var(--wochenende); }
.crewkalender td.feiertag, .crewkalender th.feiertag { background: var(--feiertag); }
.crewkalender td.heute, .crewkalender th.heute { outline: 2px solid var(--gruen); outline-offset: -2px; }
.abw { font-size: 1rem; }
.abw.offen { opacity: .38; }
.abw.halb { font-size: .78rem; }
.legende { margin-top: .6rem; }

/* Dialog */
dialog.dialog {
  border: 1px solid var(--linie); border-radius: 12px; padding: 1.2rem 1.4rem;
  max-width: 460px; width: 92%;
}
dialog::backdrop { background: rgba(20, 40, 28, .45); }

.statistik .wichtig { background: #f2f8f3; }
.status.genehmigt { color: var(--gruen); font-weight: 600; }
.status.abgelehnt { color: var(--rot); }
.solltabelle th, .solltabelle td { text-align: center; }
.solltabelle input[type=text] { text-align: center; }

@media (max-width: 640px) {
  .zeile2 { grid-template-columns: 1fr; gap: 0; }
  .kopf .ich { order: 2; margin-left: auto; }
  .kopf nav { order: 3; flex-basis: 100%; }
  th, td { padding: .32rem .3rem; }
  .tageswerte { grid-template-columns: repeat(2, 1fr); }
}