* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #0b5fa5; --green: #1a7f37; --yellow: #b58a00; --red: #c62828;
  --bg: #f4f7fa; --card: #ffffff; --text: #17242f; --muted: #5c6b78;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px; color: var(--text); background: var(--bg);
  display: flex; flex-direction: column; height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}
header {
  background: var(--blue); color: #fff; padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  display: flex; justify-content: space-between; align-items: center; flex: none;
}
header h1 { font-size: 1.25rem; }
.header-right { display: flex; align-items: center; gap: 10px; }
.header-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
#stand { font-size: 0.9rem; opacity: 0.9; }
#counter { font-size: 0.78rem; opacity: 0.85; }
#counter.counter-low { color: #ffd28a; opacity: 1; font-weight: 700; }
#refresh {
  background: rgba(255,255,255,0.2); color: #fff; border: none; border-radius: 8px;
  font-size: 1.4rem; width: 44px; height: 44px; cursor: pointer; flex: none;
}

.tabs { display: flex; flex: none; background: #0a5391; }
.tab {
  flex: 1; background: none; border: none; color: #cfe0f0; cursor: pointer;
  font-size: 1.05rem; font-weight: 600; padding: 12px 8px;
  border-bottom: 3px solid transparent;
}
.tab.active { color: #fff; border-bottom-color: #fff; background: rgba(255,255,255,0.08); }
.notice { background: #fff3cd; color: #664d03; padding: 10px 16px; font-size: 0.95rem; flex: none; }
.summary { padding: 10px 16px; font-weight: 600; flex: none; color: #fff; }
.summary.gruen { background: var(--green); }
.summary.gelb { background: var(--yellow); }
.summary.rot { background: var(--red); }
.hidden { display: none !important; }

.board { flex: 2 1 0; overflow-y: auto; background: var(--card); }
.flight-row {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 4px 12px;
  padding: 12px 16px; border-bottom: 1px solid #e3e9ee; align-items: center;
}
.flight-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.flight-time .old { text-decoration: line-through; color: var(--muted); font-weight: 400; font-size: 0.85rem; display: block; }
.flight-dest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flight-dest small { color: var(--muted); display: block; font-size: 0.8rem; }
.flight-status { text-align: right; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.flight-status small { display: block; color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.st-puenktlich { color: var(--green); }
.st-verspaetet, .st-boarding { color: var(--yellow); }
.st-annulliert, .st-umgeleitet { color: var(--red); }
.st-gestartet { color: var(--muted); }

.myflight {
  min-height: 170px; overflow-y: auto; flex: none;
  background: var(--blue); color: #fff; padding: 14px 16px;
  border-top-left-radius: 18px; border-top-right-radius: 18px;
}
.myflight h2 { font-size: 1rem; opacity: 0.85; margin-bottom: 6px; }
.myflight .big { font-size: 1.7rem; font-weight: 800; }
.myflight .row { margin-top: 6px; font-size: 1rem; }
.myflight .badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; background: rgba(255,255,255,0.25);
}
.myflight .delay-ok { color: #b6f0c1; }
.myflight .delay-bad { color: #ffd28a; }
.myflight .cancelled { color: #ffb4a9; }
.myflight button.link {
  background: none; border: none; color: #cfe6ff; text-decoration: underline;
  font-size: 0.95rem; margin-top: 8px; cursor: pointer; padding: 6px 0;
}
.loading { padding: 20px; color: var(--muted); }

.overlay {
  position: fixed; inset: 0; background: rgba(10, 25, 40, 0.75);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.dialog {
  background: #fff; border-radius: 16px; padding: 24px; width: min(92vw, 360px);
  display: flex; flex-direction: column; gap: 12px;
}
.dialog h2 { font-size: 1.2rem; }
.dialog label { font-size: 0.9rem; color: var(--muted); }
.dialog input {
  font-size: 1.3rem; padding: 12px; border: 2px solid #c8d4de; border-radius: 10px; width: 100%;
}
.dialog-buttons { display: flex; gap: 10px; justify-content: flex-end; }
.dialog button {
  font-size: 1.05rem; padding: 12px 18px; border-radius: 10px; border: none;
  background: #e6ecf1; cursor: pointer;
}
.dialog button.primary { background: var(--blue); color: #fff; font-weight: 700; }
.error { color: var(--red); font-size: 0.95rem; }