/* Gaeste-Demo "Diese Woche in …" -- Eisvogel-Werte aus static/css/brand.css,
   hier bewusst eigenstaendig: brand.css bringt Dashboard-Komponenten mit,
   die auf dieser Seite nur im Weg waeren.

   Zuerst fuers Handy gebaut (die Demo wird auf Telefonen herumgereicht),
   breitere Bildschirme bekommen unten mehr Luft. Das eine auffaellige
   Element ist das Wochenlineal; auf dem Handy bleibt es beim Scrollen oben
   stehen, damit der Tag immer einen Daumen weit entfernt ist.

   Raster: 8 px. Eine Handlungsfarbe (Rost) fuer "Zur Veranstaltung",
   Eisvogel-Tuerkis nur fuer "ausgewaehlt". */

:root {
  --pebble: #E6E9E8;      /* Seitengrund */
  --paper: #FFFFFF;
  --ink: #0B2027;         /* Display, Primaertext */
  --ink-2: #2C3E43;       /* Fliesstext */
  --ink-3: #55666B;       /* Sekundaertext (5.6:1 auf Kiesel) */
  --rule: #CDD4D3;
  --teal: #1C7C8C;        /* Marke, Balken */
  --teal-deep: #0F4F5A;
  --kingfisher: #30C5DD;  /* nur fuer "ausgewaehlt" */
  --amber: #C0562A;       /* die eine Handlung: zur Veranstaltung */
  --amber-deep: #A5461F;

  --display: 'Bricolage Grotesque', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --page: min(1120px, 100% - 2 * var(--gutter));
  --radius: 14px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--pebble);
}

/* Blatt offen: Seite dahinter steht still (iOS scrollt sonst mit). */
html.is-locked, html.is-locked body { overflow: hidden; }

body {
  margin: 0;
  background: var(--pebble);
  color: var(--ink-2);
  font: 400 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--teal-deep); }

button { -webkit-user-select: none; user-select: none; touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--kingfisher);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Kopf ───────────────────────────────────────────── */

.masthead {
  width: var(--page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: max(8px, env(safe-area-inset-top));
  min-height: 56px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font: 700 18px/1 var(--display);
  letter-spacing: -0.01em;
}

.brand img { width: 30px; height: auto; }

.masthead-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
}

.masthead-link:hover { color: var(--ink); text-decoration: underline; }

/* ── Einstieg ───────────────────────────────────────── */

main { width: var(--page); margin: 0 auto; }

.intro { padding: 16px 0 16px; }

.intro h1 {
  margin: 0;
  font: 700 34px/1.05 var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.intro-sum {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.intro-sum strong { color: var(--ink); font-weight: 600; }

/* ── Wochenlineal ───────────────────────────────────── */

/* Klebt auf dem Handy oben. Der Streifen reicht bis an die Raender, damit
   beim Scrollen nichts seitlich hindurchscheint. */
.week {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 calc(-1 * var(--gutter));
  padding: max(8px, env(safe-area-inset-top)) var(--gutter) 8px;
  background: rgba(230, 233, 232, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.week.is-stuck { box-shadow: 0 1px 0 var(--rule); }

.ruler {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.day {
  appearance: none;
  border: 0;
  background: var(--paper);
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 12px;
  padding: 8px 0 10px;
  min-height: 88px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background-color 160ms ease, color 160ms ease;
}

.day:hover { background: #F4F7F7; }

.day[aria-pressed="true"] { background: var(--ink); color: #fff; }

.day-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--ink-3);
  white-space: nowrap;
}

.day[aria-pressed="true"] .day-name { color: rgba(255, 255, 255, .72); }

.day-num {
  font: 700 22px/1.1 var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.day[aria-pressed="true"] .day-num { color: #fff; }

.day-weather {
  display: flex;
  align-items: center;
  gap: 1px;
  min-height: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.day[aria-pressed="true"] .day-weather { color: rgba(255, 255, 255, .85); }

.day-weather svg { width: 14px; height: 14px; flex: none; }

/* Dichte: eine Linie, deren Laenge die Zahl des Tages traegt */
.density {
  margin-top: auto;
  width: 60%;
  height: 4px;
  border-radius: 2px;
  background: #E3E8E8;
  overflow: hidden;
}

.density i {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.day[aria-pressed="true"] .density { background: rgba(255, 255, 255, .18); }
.day[aria-pressed="true"] .density i { background: var(--kingfisher); }

.day.is-loading { cursor: default; }
.day.is-loading::after {
  content: "";
  position: absolute;
  inset: 12px 20%;
  background: linear-gradient(90deg, #EEF1F1, #F6F8F8, #EEF1F1);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Feste ueber mehrere Tage ───────────────────────── */

.fests { padding: 16px 0 0; }

.section-title {
  margin: 0 0 8px;
  font: 600 14px/1.3 var(--text);
  color: var(--ink-3);
}

/* Eine Karte, eine Zeile je Fest: Name in voller Breite (lesbar), darunter
   ein Balken, der genau unter seinen Tagen im Lineal liegt -- deshalb
   dasselbe Spaltenraster wie .ruler (--cols-gap, --cols-pad). */
.spans {
  --cols-gap: 4px;
  --cols-pad: 0px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
}

.spans li + li { border-top: 1px solid #E6EAEA; }

.span {
  appearance: none;
  border: 0;
  background: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 12px var(--cols-pad) 14px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--cols-gap);
  row-gap: 8px;
  min-height: 44px;
}

.span:hover .span-title { text-decoration: underline; text-underline-offset: 3px; }
.span:active { background: #F4F7F7; }

.span-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 0 16px;
}

.span-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.span-until {
  margin-left: auto;
  flex: none;
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.span-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--teal);
  margin: 0 6px;
}

.span-bar.is-open-left { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: calc(-1 * var(--cols-pad)); }
.span-bar.is-open-right { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: calc(-1 * var(--cols-pad)); }


/* ── Tagesansicht ───────────────────────────────────── */

.dayview { padding: 32px 0 0; scroll-margin-top: 112px; }

.dayhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dayhead h2 {
  margin: 0;
  font: 700 26px/1.15 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.daycount {
  margin: 0;
  flex: none;
  font-size: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Eine Zeile, seitlich wischbar -- nie drei Zeilen Chips. */
.filters {
  display: flex;
  gap: 8px;
  margin: 12px calc(-1 * var(--gutter)) 16px;
  padding: 4px var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.filters::-webkit-scrollbar { display: none; }

.filter {
  appearance: none;
  flex: none;
  scroll-snap-align: start;
  min-height: 44px;
  font: 500 15px/1 var(--text);
  color: var(--ink-2);
  background: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
}

.filter:hover { background: #F4F7F7; }

.filter[aria-pressed="true"] { background: var(--ink); color: #fff; }

.filter span { opacity: .6; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* Aufmacher des Tages */
.lead {
  display: block;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  width: 100%;
}

.lead-img { display: block; position: relative; aspect-ratio: 16 / 9; background: #DDE3E2; overflow: hidden; }
.lead-img img { width: 100%; height: 100%; object-fit: cover; }

.lead-text { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 20px; }

.lead-when { font-size: 15px; font-weight: 600; color: var(--teal-deep); font-variant-numeric: tabular-nums; }

.lead-title {
  font: 700 22px/1.15 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.lead-where { font-size: 15px; color: var(--ink-3); }

.lead-teaser {
  margin-top: 4px;
  font-size: 15px;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lead:hover .lead-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Liste */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 64px;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  min-height: 92px;
}

.row-time {
  font: 600 15px/22px var(--text);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.row-time.is-empty { font-size: 13px; font-weight: 500; color: var(--ink-3); }

.row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.row-meta {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-img {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #DDE3E2;
}
.row-img img { width: 100%; height: 100%; object-fit: cover; }

.row:active { background: rgba(255, 255, 255, .5); }
.row:hover .row-title { text-decoration: underline; text-underline-offset: 3px; }

.more { color: var(--ink-3); font-size: 14px; margin: 16px 0 0; }

.empty {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 24px 16px;
  margin: 0;
  color: var(--ink-3);
}

/* Dauerbrenner */
.longrun { padding: 40px 0 0; }
.longrun ul { list-style: none; margin: 0; padding: 0; background: var(--paper); border-radius: var(--radius); }
.longrun li + li { border-top: 1px solid #E6EAEA; }
.longrun li button {
  appearance: none; border: 0; background: none; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 12px 16px;
  font: 500 15px/1.35 var(--text); color: var(--ink); cursor: pointer; text-align: left;
}
.longrun li button:hover { text-decoration: underline; }
.longrun li small { flex: none; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.failure { padding: 32px 0; }
.failure h2 { font: 700 24px/1.2 var(--display); color: var(--ink); margin: 0 0 8px; }
.failure button {
  font: 600 15px/1 var(--text); color: #fff; background: var(--ink);
  border: 0; border-radius: 999px; min-height: 44px; padding: 0 20px; cursor: pointer;
}

/* ── Fuss ───────────────────────────────────────────── */

.colophon {
  width: var(--page);
  margin: 48px auto 0;
  padding: 16px 0 max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-3);
}

.colophon p { margin: 0 0 4px; }
.colophon nav { display: flex; flex-wrap: wrap; column-gap: 20px; }
.colophon a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-3); }

/* ── Detailblatt ────────────────────────────────────── */

/* Auf dem Handy ein Blatt von unten wie in iOS: runde obere Ecken, Griff,
   eigener Scrollbereich, die Knoepfe bleiben unten stehen. */
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + 16px));
  margin: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-2);
  box-shadow: 0 -8px 40px rgba(11, 32, 39, .22);
  overflow: hidden;
  flex-direction: column;
}

.sheet[open] { display: flex; animation: sheet-in 320ms cubic-bezier(.2, .8, .2, 1); }
.sheet.is-dragging { transition: none; animation: none; }
.sheet.is-returning { transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }

@keyframes sheet-in { from { transform: translateY(100%); } }

.sheet::backdrop { background: rgba(11, 32, 39, .45); animation: fade-in 240ms ease; }

@keyframes fade-in { from { opacity: 0; } }

.sheet-grab {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 4;
  touch-action: none;
}

.sheet-grab::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px rgba(11, 32, 39, .12);
}

.sheet-close { position: absolute; top: 12px; right: 12px; z-index: 5; margin: 0; }
.sheet-close button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(11, 32, 39, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}
.sheet-close button:hover { background: rgba(11, 32, 39, .78); }
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.sheet-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  flex: 1 1 auto;
}

/* Beim Oeffnen landet der Fokus hier statt auf "Schliessen" (sonst stuende
   sofort ein Fokusring auf dem Knopf). Tab fuehrt weiter zu den Knoepfen. */
.sheet-scroll:focus { outline: none; }

.sheet-img { position: relative; aspect-ratio: 16 / 9; background: #DDE3E2; overflow: hidden; }
.sheet-img img { width: 100%; height: 100%; object-fit: cover; }

/* "Symbolbild": das Foto ist ein lizenziertes Stockbild zum Thema, nicht
   diese Veranstaltung (services/symbolbild.py). Leise, aber immer lesbar. */
.symbolbild {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(11, 32, 39, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .95);
  font: 500 11px/1.2 var(--text);
  pointer-events: none;
}
.row-img .symbolbild {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 0 3px;
  border-radius: 0;
  text-align: center;
  font-size: 9px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sheet-body { padding: 20px 20px 8px; }
.sheet-when { font-size: 15px; font-weight: 600; color: var(--teal-deep); margin: 0; font-variant-numeric: tabular-nums; }
.sheet h2 { margin: 4px 0 4px; font: 700 26px/1.12 var(--display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.sheet-where { margin: 0; font-size: 15px; color: var(--ink-3); }
.sheet-desc { margin: 16px 0 0; white-space: pre-line; }
.sheet-source { margin: 16px 0 8px; font-size: 13px; color: var(--ink-3); }

.sheet-actions {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid #E6EAEA;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font: 600 16px/1 var(--text);
  border-radius: 12px;
  padding: 0 18px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}

.btn-primary { flex: 1 1 auto; background: var(--amber); color: #fff; }
.btn-primary:hover { background: var(--amber-deep); }
.btn-quiet { flex: 0 1 auto; background: #EEF1F1; color: var(--ink); }
.btn-quiet:hover { background: #E3E8E8; }
.btn-quiet:only-child { flex: 1 1 auto; }

/* ── Breiter ────────────────────────────────────────── */

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .masthead { min-height: 72px; }
  .intro { padding: 40px 0 24px; }
  .intro h1 { font-size: clamp(44px, 6vw, 68px); }
  .intro-sum { font-size: 19px; margin-top: 12px; }

  .week { position: static; margin: 0; padding: 8px; background: var(--paper); border-radius: var(--radius); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ruler { gap: 0; }
  .day { background: none; min-height: 148px; padding: 16px 12px 16px; align-items: flex-start; gap: 4px; border-radius: 10px; }
  .day + .day { box-shadow: inset 1px 0 0 var(--rule); }
  .day[aria-pressed="true"], .day[aria-pressed="true"] + .day { box-shadow: none; }
  .day-name { font-size: 14px; }
  .day-num { font-size: clamp(32px, 4vw, 48px); }
  .day-weather { font-size: 14px; gap: 4px; }
  .day-weather svg { width: 18px; height: 18px; }
  .density { width: 100%; height: 6px; }

  .fests { padding-top: 12px; }
  .section-title { font-size: 15px; }
  .spans { --cols-gap: 0px; --cols-pad: 8px; }
  .span-head { padding: 0 12px; }
  .span-bar { margin: 0 12px; }
  .span-title { font-size: 16px; }

  .dayview { padding-top: 48px; }
  .dayhead h2 { font-size: clamp(28px, 3.4vw, 36px); }
  .daycount { font-size: 16px; }
  .filters { flex-wrap: wrap; overflow: visible; margin: 16px 0 24px; padding: 0; }

  .lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-bottom: 24px; }
  .lead-img { aspect-ratio: 4 / 3; }
  .lead-text { padding: clamp(24px, 3.4vw, 40px); gap: 8px; }
  .lead-title { font-size: clamp(26px, 3vw, 36px); }
  .lead-teaser { -webkit-line-clamp: 4; font-size: 16px; }

  .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .row { grid-template-columns: 56px minmax(0, 1fr) 88px; gap: 16px; }
  .row-img { width: 88px; height: 66px; }

  .colophon { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 80px; }
  .colophon p { margin: 0; }

  .sheet {
    inset: 0;
    margin: auto;
    width: min(640px, 100% - 48px);
    max-height: min(88vh, 900px);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(11, 32, 39, .28);
  }
  .sheet[open] { animation: fade-in 200ms ease; }
  .sheet-grab { display: none; }
  .sheet-body { padding: 24px 28px 8px; }
  .sheet h2 { font-size: 30px; }
  .sheet-actions { padding: 16px 28px 20px; }
  .btn-primary { flex: 0 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .density i { transition: none; }
  .day { transition: none; }
  .day.is-loading::after { animation: none; }
  .sheet[open], .sheet::backdrop { animation: none; }
}