/* Colours and layout follow the Bäder-Heatmap design reference: teal scale for
   full / mixed / reduced water area, sticky pool column, light and dark themes. */
:root {
  --bg: #f4f7f8; --fg: #10262e; --mut: #51666e; --line: #cfdbe0; --surf: #fff;
  --full: #0b6e8a; --fullt: #fff; --mix: #4aa6bf; --mixt: #06232c;
  --restr: #cde8f0; --restrt: #0b3b4a; --group: #efe4c8; --groupt: #4a3a10;
  --none: #e3e8ea; --nonet: #5b6a70; --link: #0b5f78; --ok: #15803d; --warn: #b45309;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1a1f; --fg: #e4eef1; --mut: #9db2ba; --line: #26414b; --surf: #13252c;
    --full: #2aa7c9; --fullt: #031319; --mix: #1d7893; --mixt: #e8f6fa;
    --restr: #1b3f4b; --restrt: #bfe3ee; --group: #3d3418; --groupt: #f1e3b8;
    --none: #1a2b31; --nonet: #8ea2a9; --link: #7fd0e6; --ok: #4ade80; --warn: #fbbf24;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 1400px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-left)) 40px; }
h1 { font-size: 28px; line-height: 1.1; font-weight: 700; font-stretch: condensed; margin: 0 0 4px; letter-spacing: -0.01em; }
.meta { color: var(--mut); margin: 0 0 14px; max-width: 75ch; }
a { color: var(--link); }

.bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 0 0 12px; }
.bar label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--mut); }
.bar label.inl { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); }
.grow { flex: 1 1 280px; }
.grow input { width: 100%; }
input, select, button {
  font: inherit; color: var(--fg); background: var(--surf);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
}
input[type=range], input[type=checkbox] { padding: 0; }
button { cursor: pointer; }
button[type=submit] { background: var(--full); color: var(--fullt); border-color: var(--full); font-weight: 600; }
button:disabled { opacity: .6; cursor: progress; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.note { margin: -4px 0 12px; color: var(--mut); max-width: 80ch; min-height: 1em; }
.note.err { color: var(--warn); }
.status { margin: 0 0 10px; font-weight: 600; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 13px; }
.legend li { display: flex; align-items: center; gap: 6px; }
.sw { width: 26px; height: 16px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.sw.full { background: var(--full); } .sw.mix { background: var(--mix); } .sw.restr { background: var(--restr); }
.sw.group { background: var(--group); } .sw.none { background: var(--none); }
.sw.nd { background: transparent; border: 2px dashed var(--mut); }

.wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surf); }
table { border-collapse: separate; border-spacing: 0; min-width: 980px; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; font-size: 12.5px; }
thead th { position: sticky; top: 0; background: var(--surf); z-index: 2; font-weight: 600; white-space: nowrap; }
thead th.today { color: var(--link); }
thead th.we { color: var(--mut); }
thead th:first-child { left: 0; z-index: 3; }
tbody th { position: sticky; left: 0; background: var(--surf); z-index: 1; min-width: 200px; font-weight: 600; border-right: 1px solid var(--line); }
tbody th a { color: var(--fg); text-decoration: none; }
tbody th a:hover { color: var(--link); text-decoration: underline; }
.sub { display: block; font-weight: 400; color: var(--mut); font-size: 11.5px; }
td.num { text-align: right; white-space: nowrap; font-weight: 600; min-width: 70px; }
td.full { background: var(--full); color: var(--fullt); }
td.mix { background: var(--mix); color: var(--mixt); }
td.restr { background: var(--restr); color: var(--restrt); }
td.group { background: var(--group); color: var(--groupt); }
td.none { background: var(--none); color: var(--nonet); text-align: center; }
td.nd { outline: 2px dashed var(--mut); outline-offset: -3px; color: var(--mut); }
td.today { box-shadow: inset 3px 0 0 var(--link); }
td .area { display: block; font-size: 10.5px; opacity: .8; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; margin-left: 6px; border: 1px solid currentColor; }
.pill.on { color: var(--ok); } .pill.part { color: var(--warn); }
.empty { padding: 16px; color: var(--mut); }

footer { margin-top: 18px; color: var(--mut); font-size: 12.5px; max-width: 80ch; }

.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lang { display: flex; gap: 4px; }
.lang button, .lang a { padding: 3px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surf); color: var(--fg); text-decoration: none; }
.lang button[aria-pressed="true"], .lang a[aria-current="true"] { background: var(--full); color: var(--fullt); border-color: var(--full); font-weight: 600; }

.notes { margin-top: 18px; max-width: 90ch; }
.notes h2 { font-size: 17px; margin: 0 0 6px; }
ol.fn, ul.fn { margin: 0 0 8px; padding-left: 22px; color: var(--mut); font-size: 12.5px; }
ol.fn li, ul.fn li { margin: 2px 0; }
ol.fn strong { color: var(--fg); font-weight: 600; }
sup { font-size: 9.5px; font-weight: 700; margin-left: 1px; line-height: 0; }
th sup { color: var(--link); }
.orig { font-style: italic; }

/* ---------- phone day view (under 700 px); the table stays on wider screens ---------- */
.mtools, .dayview { display: none; }
.seg.full { background: var(--full); } .seg.reduced { background: var(--mix); } .seg.restricted { background: var(--group); }

@media (max-width: 700px) {
  main { padding-top: 14px; }
  h1 { font-size: 24px; }
  .meta { font-size: 13px; margin-bottom: 10px; }
  .wrap, ol.fn { display: none; }
  .bar.origin { gap: 8px; }
  .bar.origin .grow { flex-basis: 100%; }
  .bar.origin button { flex: 1 1 auto; }

  .mtools { display: flex; gap: 8px; margin: 0 0 10px; }
  .mtools button { flex: 1; font-size: 13px; }
  .mtools button[aria-expanded="true"] { border-color: var(--link); color: var(--link); }
  .filters, .legend { display: none; }
  .filters.open, .legend.open { display: flex; }
  .filters label { flex: 1 1 140px; }
  .filters label.inl { display: none; } /* "open now" is a tab in the day view instead */
  .filters input[type=search] { width: 100%; }
  .status { font-size: 13px; }

  .dayview { display: block; }
  .daytabs {
    display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 -16px 8px; padding: 2px 16px 6px; scrollbar-width: none;
  }
  .daytabs::-webkit-scrollbar { display: none; }
  .daytabs button {
    flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center;
    min-width: 56px; padding: 6px 8px; line-height: 1.15; border-radius: 10px;
  }
  .daytabs button span { font-weight: 600; font-size: 13px; }
  .daytabs button small { font-size: 11px; color: var(--mut); }
  .daytabs button.we span { color: var(--mut); }
  .daytabs .nowtab { min-width: 76px; border-color: var(--ok); margin-right: 4px; }
  .daytabs .nowtab span { color: var(--ok); }
  .daytabs .nowtab[aria-selected="true"] { background: var(--ok); border-color: var(--ok); }
  .daytabs button[aria-selected="true"] { background: var(--full); border-color: var(--full); }
  .daytabs button[aria-selected="true"] span, .daytabs button[aria-selected="true"] small { color: var(--fullt); }

  .dayscale { position: relative; height: 14px; margin: 0 0 2px; font-size: 10.5px; color: var(--mut); }
  .dayscale span { position: absolute; transform: translateX(-50%); }
  .dayscale span:first-child { transform: none; }

  .daylist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .drow { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .drow.none, .drow.nd { opacity: .6; }
  .dhead { display: flex; align-items: baseline; gap: 4px; font-weight: 600; font-size: 14px; }
  .dhead a { color: var(--fg); text-decoration: none; }
  .dhead sup { color: var(--link); }
  .dmin { margin-left: auto; padding-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .dsub { color: var(--mut); font-size: 12px; margin: 1px 0 6px; }
  .dsub .pill { margin-left: 6px; }
  .dbar { position: relative; height: 12px; border-radius: 3px; background: var(--none); overflow: hidden; }
  .dbar.nd { background: transparent; outline: 1px dashed var(--mut); outline-offset: -1px; }
  .dbar .seg { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
  .dbar .now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--warn); }
  .dtimes { font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .dtimes .area { display: inline; font-size: 10.5px; margin-right: 4px; color: var(--mut); text-transform: uppercase; font-weight: 600; }
  .dtimes .area::after { content: " "; }
  .dnotes { margin-top: 4px; font-size: 12.5px; color: var(--mut); }
  .dnotes summary { cursor: pointer; color: var(--link); }
  .dnotes ol { margin: 4px 0 0; padding-left: 20px; }
  .dnotes .ptag { display: none; }
  .daylist .empty { padding: 16px 0; }
}

/* ---------- Impressum and Datenschutz ---------- */
.legal { max-width: 75ch; }
.legal h1 { margin: 12px 0 10px; }
.legal h2 { font-size: 16px; margin: 20px 0 6px; }
.legal p, .legal li { line-height: 1.55; }
.legal .top { align-items: center; }
.draft { border: 1px dashed var(--warn); color: var(--warn); border-radius: 6px; padding: 8px 10px; font-weight: 600; }
.legal-links { margin-top: 10px; }

/* ---------- pool pages ---------- */
.pool { max-width: 75ch; }
.pool h1 { margin: 12px 0 4px; }
.pool h2 { font-size: 16px; margin: 20px 0 6px; }
.pool .addr { color: var(--mut); margin: 0 0 12px; }
.pool ul.week { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.pool ul.week li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.pool ul.week .d { flex: 0 0 110px; font-weight: 600; }
.pool ul.week .none { color: var(--mut); }
.pool .k { font-size: 12px; color: var(--mut); }

.poolindex { margin-top: 18px; }
.poolindex h2 { font-size: 17px; margin: 0 0 6px; }
.poolindex ul { columns: 3 220px; margin: 0; padding-left: 18px; font-size: 13px; }