:root { --bg: #f4f4f5; --kort: #fff; --tekst: #18181b; --svag: #71717a; --ok: #16a34a; --gammel: #ca8a04; --doed: #dc2626; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #18181b; --kort: #27272a; --tekst: #f4f4f5; --svag: #a1a1aa; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--tekst); }
a { color: inherit; }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
header h1 { font-size: 1.3rem; margin: 0; }
header h1 a { text-decoration: none; }
header small { color: var(--svag); font-weight: normal; font-size: .9rem; }
.info, .dage { padding: 0 16px; color: var(--svag); }
.dage { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 0 16px 24px; }
.kort { background: var(--kort); border-radius: 8px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; border-top: 4px solid transparent; }
.kort.ok { border-top-color: var(--ok); }
.kort.gammel { border-top-color: var(--gammel); }
.kort.doed { border-top-color: var(--doed); }
.kort img { width: 100%; height: 240px; object-fit: contain; background: #000; }
.kort .tom { height: 240px; display: grid; place-items: center; background: #000; color: #a1a1aa; }
.kort .navn { font-weight: 600; padding: 8px 10px 0; }
.kort .tid { color: var(--svag); font-size: .85rem; padding: 4px 10px 8px; }
body.login { display: grid; place-items: center; min-height: 100vh; }
.login form { background: var(--kort); padding: 24px; border-radius: 8px; display: grid; gap: 12px; width: min(320px, 90vw); }
.login h1 { margin: 0; font-size: 1.3rem; }
.login input, .login button { font: inherit; padding: 8px; border-radius: 6px; border: 1px solid var(--svag); }
.login button { background: var(--tekst); color: var(--bg); cursor: pointer; }
.fejl { color: var(--doed); margin: 0; }
.biograf { margin-bottom: 8px; }
.biograf h2 { font-size: 1.05rem; margin: 16px 16px 8px; padding-bottom: 6px; border-bottom: 1px solid var(--svag); }
.biograf h2 small { color: var(--svag); font-weight: normal; font-size: .85rem; }
.kort img, .kort .tom { height: 200px; }
.info-ok { color: var(--ok); margin: 0; }
.forklaring { padding: 0 16px; margin: 0 0 4px; color: var(--svag); font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.prik { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-left: 8px; }
.prik:first-child { margin-left: 0; }
.prik.ok { background: var(--ok); }
.prik.gammel { background: var(--gammel); }
.prik.doed { background: var(--doed); }