:root {
  --accent: #1d7d8f;   /* neutrale Akzentfarbe (Petrol) */
  --grau: #2b2f33;
}

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  background: var(--grau);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

header h1 {
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Responsive (Task 12): Header bricht auf schmalen Displays um, Karte bleibt voll */
@media (max-width: 640px) {
  header {
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
  }
  header h1 { font-size: 1rem; }
  #status { font-size: 0.78rem; text-align: center; }
}

#status {
  font-size: 0.85rem;
  opacity: 0.95;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #888;
  margin-right: 4px;
}
.dot.online { background: #2e7d32; }
.dot.offline { background: #b3261e; }

#map {
  flex: 1;
}

/* Marker-Popup */
.track-popup h3 {
  margin-bottom: 4px;
  color: var(--accent);
}
.track-popup table {
  font-size: 0.85em;
  border-collapse: collapse;
}
.track-popup td {
  padding: 1px 8px 1px 0;
}
.track-popup td:first-child {
  color: #666;
}

/* Admin-Seite (admin.html) */
.admin-wrap { max-width: 960px; margin: 0 auto; padding: 16px; }
.admin-card {
  background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
body { background: #f2f4f5; }
.admin-card h2 { font-size: 1rem; margin-bottom: 10px; color: var(--accent); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.admin-table th, .admin-table td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left; }
.admin-table th { background: #f5f5f5; }
.admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.admin-form label { font-size: .8em; color: #666; display: block; margin-bottom: 3px; }
.admin-form input, .admin-form select { width: 100%; padding: 7px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
.btn {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 8px 14px; cursor: pointer; font-size: .9em;
}
.btn.secondary { background: #666; }
.btn.danger { background: #b3261e; }
.token-reveal {
  background: #eef7f9; border: 1px dashed var(--accent); border-radius: 8px;
  padding: 12px; margin-top: 10px; word-break: break-all; font-family: monospace;
}
@media (max-width: 640px) {
  .admin-table { font-size: .78em; }
}