/* Fitbiene — mobile-first, Bienen-Look 🐝 */
:root {
  --gelb: #f7b500;
  --gelb-hell: #ffe9a8;
  --dunkel: #3a3226;
  --papier: #faf6ec;
  --karte: #ffffff;
  --rand: #e8dfc8;
  --gedimmt: #8a8272;
  --rot: #c0392b;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--papier);
  color: var(--dunkel);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gelb);
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  box-shadow: 0 2px 6px rgba(58, 50, 38, .15);
}
.logo { font-weight: 700; font-size: 1.1rem; color: var(--dunkel); text-decoration: none; }
.datum-wahl input { padding: 4px 8px; border: none; border-radius: 8px; font: inherit; }

main { max-width: 640px; margin: 0 auto; padding: 16px 12px; }

h1 { font-size: 1.3rem; margin-bottom: 12px; }
h2 { font-size: 1rem; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}

.gedimmt { color: var(--gedimmt); }
.klein { font-size: .8rem; font-weight: 400; }
.fehler { color: var(--rot); margin-bottom: 10px; }
.rechts { text-align: right; }
.inaktiv td { opacity: .45; }

/* Formulare */
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 8px;
}
.felder { display: flex; gap: 8px; }
.felder input, .felder select { min-width: 0; }
.zeilen-form { margin-top: 8px; }

.knopf {
  background: var(--gelb);
  color: var(--dunkel);
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
}
.knopf:active { transform: scale(.98); }
.knopf.leise { background: var(--gelb-hell); }
.knopf.breit { width: 100%; }

.loeschen {
  background: none; border: none; color: var(--gedimmt);
  cursor: pointer; padding: 4px 6px; font-size: .85rem;
}
.loeschen:hover { color: var(--rot); }
.loeschen:disabled { opacity: .25; cursor: default; }
.aktionen { white-space: nowrap; }
.aktionen a { text-decoration: none; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
th { text-align: left; font-size: .75rem; color: var(--gedimmt); font-weight: 600; padding: 4px 6px; }
td { padding: 6px; border-top: 1px solid var(--rand); }
td form { display: inline; }

/* Listen */
.liste { display: flex; flex-direction: column; gap: 10px; }
.listeneintrag { display: block; text-decoration: none; color: inherit; }
.listeneintrag strong { display: block; }
.listeneintrag:active { background: var(--gelb-hell); }

/* Login */
.login-karte { max-width: 340px; margin: 12vh auto 0; text-align: center; }
.login-biene { font-size: 3rem; }
.login-karte h1 { margin: 8px 0 2px; }
.login-karte p { margin-bottom: 14px; }

/* Heatmap */
.heatmap { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heatmap-spalte { display: flex; flex-direction: column; gap: 3px; }
.heatmap-zelle {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--rand); flex-shrink: 0;
}
.heatmap-zelle.trainiert { background: var(--gelb); }
.heatmap-zelle.zukunft { background: transparent; border: 1px dashed var(--rand); }

/* Untere Navigation */
.fussnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex;
  background: var(--karte);
  border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
}
.fussnav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 6px;
  text-decoration: none;
  color: var(--gedimmt);
  font-size: .68rem;
}
.fussnav a span { font-size: 1.25rem; }
.fussnav a.aktiv { color: var(--dunkel); font-weight: 600; }

canvas { max-width: 100%; }