/* By-farver: må ikke ligne blå eller gul (kassefarverne). */
:root {
  --sindal: #1b7a3d;   /* grøn */
  --aalborg: #7b1fa2;  /* lilla */
  --text: #1a1a1a;
  --muted: #666;
  --bg: #f4f4f4;
  --error: #b00020;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; font-size: 18px; color: var(--text); background: var(--bg); }
[hidden] { display: none !important; }

.center { min-height: 100vh; display: grid; place-items: center; }
.card { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); min-width: 22rem; }
.card h1 { margin-top: 0; }
label { display: block; margin-bottom: 1rem; font-weight: 600; }
select, input { display: block; width: 100%; margin-top: .3rem; padding: .6rem; font-size: 1rem; }
button { padding: .6rem 1.2rem; font-size: 1rem; cursor: pointer; border: 1px solid #999; border-radius: 4px; background: #fff; }
form button[type=submit] { width: 100%; }
.row { display: flex; gap: 1rem; }
.row button { flex: 1; padding: 1.5rem; font-size: 1.3rem; }
.error { color: var(--error); min-height: 1.2em; }
.muted { color: var(--muted); }

#topbar { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; color: #fff; }
#topbar.sindal { background: var(--sindal); }
#topbar.aalborg { background: var(--aalborg); }
#city-name { font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
#topbar .spacer { flex: 1; }
#topbar button { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.content { padding: 2rem 1.5rem; }