:root {
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-text: #1b2430;
  --color-muted: #5d6b7a;
  --color-accent: #0b6fb4;
  /* Darker than a "nice" heart red on purpose: this colour also carries the
     "♥ Favorieten (n)" label and the detail button text, and #e2365b lands at
     4.27:1 on white — below the 4.5:1 the app is held to. */
  --color-favorite: #d62b52;
  --color-border: #dfe4ea;
  --radius: 12px;
  --gap: 1rem;
  --max-width: 76rem;

  /* Without this the browser renders native widgets (the date dropdown's popup,
     scrollbars, the text caret, autofill) in its light-mode colours on top of
     our dark surfaces. It also makes the UA's default control text follow the
     theme instead of staying near-black. */
  color-scheme: light dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem;
}

.site-header__home { color: inherit; text-decoration: none; }
.site-header__title { margin: 0; font-size: 1.4rem; }
.site-header__subtitle { margin: 0.15rem 0 0; color: var(--color-muted); font-size: 0.9rem; }

#main { max-width: var(--max-width); margin: 0 auto; padding: 1rem; }

.view[hidden] { display: none; }

.status:empty { display: none; }
.status {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--gap);
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card__link { display: block; color: inherit; text-decoration: none; }
.card__link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }

.card__image {
  display: block;
  width: 100%;
  height: 10rem;
  object-fit: cover;
  background: var(--color-border);
}

.card__label {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.card__body { padding: 0.75rem; }
.card__title { margin: 0 0 0.15rem; font-size: 1.05rem; line-height: 1.3; }
.card__relation { margin: 0 0 0.4rem; color: var(--color-muted); font-size: 0.85rem; }
.card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.8rem; color: var(--color-muted); }
.card__meta-item::after { content: '·'; margin-left: 0.35rem; }
.card__meta-item:last-child::after { content: ''; }
.card__date { margin: 0.4rem 0 0; font-size: 0.8rem; }

.card__favorite,
.card__hide {
  position: absolute;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.card__favorite { top: 0.5rem; color: var(--color-favorite); }
/* Directly below the heart, both over the 10rem image: the card body has text
   in it and a button floating over that is unreadable at 360px. */
.card__hide { top: 3.25rem; color: var(--color-muted); font-size: 1rem; }

.card__favorite:focus-visible,
.card__hide:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.card--favorite { border-color: var(--color-favorite); box-shadow: 0 0 0 1px var(--color-favorite); }
/* Only the content dims. Dimming the whole card would dim the very button you
   need to press to bring the activity back. */
.card--hidden .card__link { opacity: 0.45; }
.card--hidden .card__hide { color: var(--color-accent); }

.result-count { color: var(--color-muted); font-size: 0.9rem; }
.empty { text-align: center; padding: 2rem; color: var(--color-muted); }

.error { padding: 1rem; }
.button {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}

.filter-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-bg);
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
}

.filter-bar__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filter-search { flex: 1 1 18rem; }
.filter-search input, .filter-date select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  /* Form controls do not inherit colour from the page: without this the browser
     paints its own near-black text on our dark surface. Same reason the .chip
     rule below sets a colour — a <button> uses `buttontext`, not `inherit`. */
  color: var(--color-text);
  font: inherit;
}

.filter-bar__details { margin-top: 0.5rem; }
.filter-bar__details summary { cursor: pointer; color: var(--color-accent); font-size: 0.9rem; }

.filter-group { border: none; margin: 0.75rem 0 0; padding: 0; }
.filter-group__legend { font-size: 0.8rem; color: var(--color-muted); padding: 0; margin-bottom: 0.3rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.chip {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.85rem;
  cursor: pointer;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip--on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.chip--favorites { color: var(--color-favorite); }
.chip--favorites.chip--on { background: var(--color-favorite); border-color: var(--color-favorite); color: #fff; }
.chip--hidden { color: var(--color-muted); }
.chip--hidden.chip--on { background: var(--color-muted); border-color: var(--color-muted); color: #fff; }
.chip:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.button--ghost { background: transparent; color: var(--color-accent); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.detail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; }
.detail__back, .detail__back:visited { display: inline-block; margin-bottom: 1rem; color: var(--color-accent); text-decoration: none; }
.detail__header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.detail__title { margin: 0; font-size: 1.6rem; }
.detail__relation { margin: 0.15rem 0 1rem; color: var(--color-muted); }
.detail__image { display: block; width: 100%; height: auto; max-height: 24rem; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.detail__description { margin-bottom: 1.25rem; }
.detail__description h3 { font-size: 1rem; }

.detail__facts { margin: 0; display: grid; gap: 0.5rem; }
.detail__row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); }
.detail__row dt { color: var(--color-muted); font-size: 0.9rem; }
.detail__row dd { margin: 0; }

/* Links in the fact rows and the description are the only ones the browser
   would style itself: default #0000EE (and purple once visited) is unreadable
   on the dark surface. :visited too, or every link the kids opened once turns
   into low-contrast purple. */
.detail__row a,
.detail__row a:visited,
.detail__description a,
.detail__description a:visited {
  color: var(--color-accent);
}

.detail__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.detail__favorite {
  border: 1px solid var(--color-favorite);
  background: transparent;
  color: var(--color-favorite);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font: inherit;
}

.detail__hide {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font: inherit;
}

.detail__share {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font: inherit;
}

.detail__share-status { margin: 0.75rem 0 0; color: var(--color-muted); }
.detail__share-url { width: 100%; font: inherit; padding: 0.4rem; margin-top: 0.5rem; }

@media (max-width: 32rem) {
  .detail__row { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #151a21;
    --color-surface: #1e252e;
    --color-text: #eef2f6;
    --color-muted: #a3b1c0;
    --color-border: #2f3944;
    --color-accent: #4aa8e8;
    /* The light-mode red is too dark against a dark surface (3.2:1); this one
       reads at 6.4:1 there. */
    --color-favorite: #ff7d97;
  }
  .card__favorite, .card__hide { background: rgba(30, 37, 46, 0.92); }
  /* Filled chips and buttons use a light accent in dark mode, so their label
     has to flip to dark text. Ghost buttons are transparent on a dark surface,
     so they must keep the light accent colour — otherwise they read as empty
     pills. */
  .chip--on, .button:not(.button--ghost), .chip--favorites.chip--on,
  .chip--hidden.chip--on { color: #10161d; }
}

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Touch targets: Apple HIG minimum is 44px. The heart sits right next to a
   linked photo, so anything smaller turns into an accidental navigation. */
.card__favorite { width: 2.75rem; height: 2.75rem; }
.chip { min-height: 2.75rem; }
.button { min-height: 2.75rem; }
.filter-search input, .filter-date select { min-height: 2.75rem; }
.detail__favorite { min-height: 2.75rem; }
/* The summary is the only way into the chip groups on a phone, so it needs a
   real target too rather than a line of text. */
.filter-bar__details summary { min-height: 2.75rem; display: flex; align-items: center; }

/* Hover effects latch on touch devices until you tap somewhere else, so they
   are gated behind an actual pointer. */
@media (hover: hover) and (pointer: fine) {
  .card, .chip, .button, .card__favorite { transition: transform 120ms ease, box-shadow 120ms ease; }
  .card:hover { box-shadow: 0 4px 16px rgb(0 0 0 / 0.08); }
  .card__favorite:hover { transform: scale(1.08); }
}

/* iOS Safari zooms the viewport when a focused field is smaller than 16px and
   does not zoom back out. Never let these shrink. */
input, select, textarea { font-size: max(1rem, 16px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (min-width: 48rem) {
  #main { padding: 1.5rem; }
  .site-header { padding: 1.25rem 1.5rem; }
  .site-header__title { font-size: 1.7rem; }
}

/* iPad mini: 768px portrait gives two comfortable columns, 1024px landscape
   three — a min of 15rem would leave a lone card on the last row. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 80rem) {
  .offer-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 30rem) {
  .offer-grid { grid-template-columns: 1fr; }
  .filter-bar__row { gap: 0.4rem; }
  .filter-search { flex: 1 1 100%; }
  /* Phone width: search plus one filters button. The date select and the
     favorites chip share the second row instead of wrapping one per line. */
  .filter-date { flex: 1 1 45%; }
}

.skip-link {
  position: absolute;
  left: -999px;
  background: var(--color-accent);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.site-footer {
  max-width: var(--max-width);
  margin: 2rem auto 0;
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.85rem;
}
.site-footer a, .site-footer a:visited { color: var(--color-accent); }