:root {
  --bg: #15171a;
  --bg-2: #1d2024;
  --panel: #23272c;
  --panel-edge: #3a3f46;
  --text: #e9e4da;
  --muted: #a39d92;
  --brass: #c8862a;
  --brass-light: #e8c27a;
  --danger: #e0614f;
  --ok: #6fbf73;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(200, 134, 42, 0.16), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  min-height: 100vh;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }
.loading { margin: auto; color: var(--muted); }

.screen-center { margin: auto; width: 100%; max-width: 420px; padding: 24px 16px; }
.brand { text-align: center; margin-bottom: 22px; }
.brand h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 2.8rem);
  letter-spacing: 0.14em;
  margin: 0;
  color: var(--brass-light);
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(200, 134, 42, 0.35);
}
.brand p { margin: 6px 0 0; color: var(--muted); letter-spacing: 0.08em; font-size: 0.9rem; }

.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--panel-edge);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.card h2 { margin: 0 0 6px; font-size: 1.2rem; }
.card .hint { margin: 0 0 16px; color: var(--muted); font-size: 0.92rem; line-height: 1.4; }

form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 0.88rem; color: var(--muted); }
input {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #121417;
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 11px 12px;
}
input:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: transparent; }

button {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 7px;
  padding: 11px 14px;
  border: 1px solid #8a5a17;
  color: #1a1206;
  background: linear-gradient(180deg, var(--brass-light), var(--brass));
}
button:hover { filter: brightness(1.07); }
button:disabled { opacity: 0.6; cursor: wait; }
button.ghost { background: transparent; color: var(--text); border-color: var(--panel-edge); }
.link {
  background: none; border: none; padding: 4px 0; color: var(--brass-light);
  font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.card > .link { display: block; margin: 12px auto 0; }

.error {
  color: var(--danger);
  background: rgba(224, 97, 79, 0.1);
  border: 1px solid rgba(224, 97, 79, 0.4);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 0.9rem;
}
.error:empty { display: none; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: rgba(18, 20, 23, 0.85);
  border-bottom: 1px solid var(--panel-edge);
}
.topbar .logo { font-family: var(--display); letter-spacing: 0.12em; color: var(--brass-light); font-weight: bold; }
.topbar .spacer { flex: 1; }
.topbar .user { color: var(--muted); font-size: 0.92rem; }
.badge {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--brass); color: var(--brass-light);
}
.home { margin: 32px auto; width: 100%; max-width: 560px; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
.status-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

@media (max-width: 480px) {
  .topbar .user { display: none; }
  .card { padding: 18px; }
}

/* Reiterleisten mit der Maus ziehbar */
.drag-scroll { cursor: grab; user-select: none; }
.drag-scroll.dragging { cursor: grabbing; }
.drag-scroll.dragging .tab { pointer-events: none; }
/* Regler für Anzahlen (Gruppe, Flotte, Staffel) */
.count-picker { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.count-picker input[type=range] { width: 120px; height: 26px; accent-color: var(--brass); }
.cp-out { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--brass-light); font-weight: 700; font-size: 0.85rem; }
.version-badge { position: fixed; right: 6px; bottom: 3px; z-index: 50; font-size: 10px; letter-spacing: 0.05em; color: #f3e9d0; opacity: 0.9; pointer-events: none; user-select: none;
  /* dunkle Kontur für helle Hintergründe, leichtes warmes Leuchten für dunkle */
  text-shadow: 0 0 1px #000, 0 1px 1px #000, 0 0 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.7), 0 0 10px rgba(232, 194, 122, 0.5); }