/* ==========================================================================
   Segeltörns 2027 — stylesheet
   Structure: tokens → base → layout → components → utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Type. Swap --font-display for a self-hosted webfont later if wanted;
     nothing else needs to change. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1: clamp(1.19rem, 1.12rem + 0.34vw, 1.42rem);
  --step-2: clamp(1.41rem, 1.29rem + 0.58vw, 1.80rem);
  --step-3: clamp(1.68rem, 1.48rem + 0.95vw, 2.29rem);
  --step-4: clamp(2.00rem, 1.69rem + 1.51vw, 2.60rem);
  --step-5: clamp(2.37rem, 1.90rem + 2.32vw, 3.68rem);

  /* Spacing scale */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;

  /* Content column widths. --col-text is the reading measure and doubles as
     the section width for prose sections, so text and headings share an edge.
     Sized so the longest heading ("Interesse? Dann sag mir Bescheid", 32
     characters at --step-4) still fits on one line. */
  --col-text: 44rem;
  --col-mid: 62rem;
  --col-wide: 78rem;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;

  /* Colour — light */
  --bg: #f4f1ea;
  --surface: #ffffff;
  --surface-alt: #fbf9f4;
  --surface-sunk: #efebe1;
  --border: #e2dbcd;
  --border-strong: #cec3ae;
  --text: #13232c;
  --text-muted: #55666f;
  --text-faint: #7b8a92;

  --accent: #0d6d8a;
  --accent-hover: #0a5670;
  --accent-soft: #e2f0f5;
  --on-accent: #ffffff;

  --deep: #0c2233;
  --deep-2: #143047;

  /* Concept colours — also used by the gallery headers and the compare table */
  --flausch: #2f8b78;
  --flausch-soft: #e2f1ec;
  --spass: #b8791f;
  --spass-soft: #f8eeda;
  --spinner: #b04530;
  --spinner-soft: #f8e6e1;

  --settled: #2f8b78;
  --open: #b8791f;
  --open-soft: #f8eeda;

  --shadow-s: 0 1px 2px rgb(12 34 51 / 0.06), 0 2px 6px rgb(12 34 51 / 0.05);
  --shadow-m: 0 2px 4px rgb(12 34 51 / 0.05), 0 10px 24px -8px rgb(12 34 51 / 0.14);
  --shadow-l: 0 24px 60px -20px rgb(12 34 51 / 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1620;
    --surface: #11242f;
    --surface-alt: #0e1f29;
    --surface-sunk: #081420;
    --border: #1f3846;
    --border-strong: #2d4d5e;
    --text: #e6eef2;
    --text-muted: #a2b6c0;
    --text-faint: #7d939e;

    --accent: #55b9d6;
    --accent-hover: #7dcde3;
    --accent-soft: #0f3646;
    --on-accent: #05202b;

    --deep: #071520;
    --deep-2: #0d2635;

    --flausch: #55b7a1;
    --flausch-soft: #12332e;
    --spass: #d6a04a;
    --spass-soft: #33270f;
    --spinner: #dd7b62;
    --spinner-soft: #341812;

    --settled: #55b7a1;
    --open: #d6a04a;
    --open-soft: #33270f;

    --shadow-s: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-m: 0 10px 26px -10px rgb(0 0 0 / 0.6);
    --shadow-l: 0 24px 60px -20px rgb(0 0 0 / 0.75);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behaviour: smooth;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-s);
  /* No text-wrap: balance — it breaks lines early to even them out, which
     reads as a wrap with room to spare. Headings should only break when the
     block is actually too narrow for the next word. */
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-s);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover);
}

strong {
  font-weight: 650;
}

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

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

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

/* One content column per section.
   Everything inside a section sits flush-left in the same column, so kicker,
   heading, paragraphs, hints, tables, disclosures and the form all share one
   left and one right edge. The column itself is centred on the page (auto
   margins), which is what makes the block look centred without any element
   being individually centred — that was the thing that could never line up,
   because the blocks have different natural widths.
   On narrow screens all three widths collapse to the same 100% - 2.5rem,
   so phones get one full-width column with a consistent gutter. */
.wrap {
  width: min(100% - 2.5rem, var(--col-text));
  margin-inline: auto;
}

/* Sections holding a grid or table need more room than a reading column. */
.section--wide-text > .wrap {
  width: min(100% - 2.5rem, var(--col-mid));
}

.wrap--wide,
.section--wide-text > .wrap--wide {
  width: min(100% - 2.5rem, var(--col-wide));
}

.section {
  padding-block: var(--space-xl);
  scroll-margin-top: 5rem;
}

.section+.section {
  border-top: 1px solid var(--border);
}

.section--surface {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.section--sunk {
  background: var(--surface-sunk);
}

.section--deep {
  background: var(--deep);
  color: #dbe7ee;
  border-top: none;
}

.section--deep h2,
.section--deep h3 {
  color: #fff;
}

.section--deep .section__kicker {
  color: #7fd0e8;
}

.section__kicker {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2xs);
}

.section__title {
  font-size: var(--step-4);
  margin-bottom: var(--space-m);
}

/* No per-element max-widths here on purpose: the column above already sets
   the measure, so every block simply fills it and lines up. */

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}

.section h3 {
  font-size: var(--step-2);
  margin-top: var(--space-l);
}

.section h4 {
  font-size: var(--step-1);
  margin-top: var(--space-m);
}

.bullets {
  padding-left: 1.15rem;
}

.bullets li {
  margin-bottom: var(--space-2xs);
}

.bullets li::marker {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-s) 0;
}

.skip-link:focus {
  left: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--deep) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.topbar__inner {
  width: min(100% - 2rem, 78rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 3.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.wordmark__mark {
  font-size: 1.15rem;
}

.topnav {
  margin-left: auto;
}

.topnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topnav__list a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-s);
  color: #cfe0e9;
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
}

.topnav__list a:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.topnav__toggle {
  display: none;
}

.langswitch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
}

.langswitch__item {
  display: block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #cfe0e9;
}

.langswitch__item:hover {
  color: #fff;
  background: rgb(255 255 255 / 0.12);
}

.langswitch__item.is-active {
  background: #fff;
  color: var(--deep);
}

@media (max-width: 62rem) {
  .topnav__toggle {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: var(--radius-s);
    cursor: pointer;
  }

  .topnav__toggle-bars,
  .topnav__toggle-bars::before,
  .topnav__toggle-bars::after {
    display: block;
    width: 1.05rem;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    content: "";
  }

  .topnav__toggle-bars {
    position: relative;
  }

  .topnav__toggle-bars::before {
    position: absolute;
    top: -6px;
  }

  .topnav__toggle-bars::after {
    position: absolute;
    top: 6px;
  }

  .topnav__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1rem 1rem;
    background: var(--deep);
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
    display: none;
  }

  .topnav__list.is-open {
    display: flex;
  }

  .topnav__list a {
    padding: 0.6rem 0.4rem;
    font-size: 0.98rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.07);
  }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

/* Proportions follow hero-preview.html: a wide, poster-like band rather than a
   tall banner with oversized type. At 1440x900 this box is ~2.4:1, the same
   shape as the preview frame. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(72vh, 38rem);
  display: flex;
  align-items: flex-end;
  background: var(--deep);
  color: #fff;
  overflow: hidden;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__media img {
  object-position: var(--hero-focus, center);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(6 18 27 / 0.92) 0%, rgb(6 18 27 / 0.62) 38%, rgb(6 18 27 / 0.22) 70%, rgb(6 18 27 / 0.45) 100%);
}

/* The hero is a full-bleed banner, not part of the reading column — keep it
   on the wider measure so its text stays aligned with the top bar rather than
   drifting toward the middle of the page. */
.hero__inner.wrap {
  width: min(100% - 2.5rem, var(--col-mid));
  padding-block: var(--space-xl) var(--space-l);
}

.hero__kicker {
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.8rem);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fd8ee;
  margin-bottom: var(--space-2xs);
}

.hero__title {
  /* Deliberately NOT --step-5: that rendered ~59px at 1440px, half again as
     large as the preview's equivalent. This tracks the preview's proportion
     (~4% of the text column). */
  font-size: clamp(1.5rem, 1.0rem + 2.3vw, 2.45rem);
  line-height: 1.12;
  margin-bottom: var(--space-2xs);
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.4);
}

.hero__subtitle {
  font-size: var(--step-0);
  max-width: 38rem;
  color: #dce9f0;
  margin-bottom: var(--space-s);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-m);
}

.hero__stand {
  font-size: var(--step--1);
  color: #a9c2ce;
  margin: 0;
}

/* Phones: photo on top, text underneath instead of over it.
   On a portrait screen a landscape photo under object-fit:cover always shows
   its FULL height and is cropped horizontally only — so the people sit in the
   lower two thirds no matter what object-position says, which is exactly where
   bottom-anchored overlay text lands. Vertical focus tuning cannot fix that;
   separating the two can. The photo also gets a wider slice this way (~58% of
   its width instead of ~30%), so more of the crew is visible. */
@media (max-width: 40rem) {
  .hero {
    display: block;
    min-height: 0;
  }

  .hero__media {
    position: relative;
    display: block;
    height: 42vh;
    min-height: 14rem;
    max-height: 24rem;
    z-index: auto;
  }

  .hero__media img {
    z-index: auto;
    object-position: var(--hero-focus-mobile, var(--hero-focus, center));
  }

  /* The scrim exists to make overlay text legible; there is no overlay now. */
  .hero__scrim {
    display: none;
  }

  .hero__inner {
    padding-block: var(--space-m) var(--space-l);
  }

  .hero__title {
    text-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   6. Buttons + pills
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 620;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.btn--ghost {
  border-color: rgb(255 255 255 / 0.45);
  color: #fff;
  background: rgb(255 255 255 / 0.06);
}

.btn--ghost:hover {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.pill {
  display: inline-block;
  padding: 0.08em 0.6em;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 0.12em;
  white-space: nowrap;
}

.pill--open {
  background: var(--open-soft);
  color: var(--open);
  border: 1px solid color-mix(in srgb, var(--open) 35%, transparent);
}

/* --------------------------------------------------------------------------
   7. Status grid — "settled" vs "still open"
   -------------------------------------------------------------------------- */

.statusgrid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--space-m);
}

.statuscard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
}

.statuscard__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step-1);
  margin: 0 0 var(--space-s);
}

.statuscard__icon {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
}

.statuscard--settled .statuscard__icon {
  background: var(--flausch-soft);
  color: var(--settled);
}

.statuscard--open .statuscard__icon {
  background: var(--open-soft);
  color: var(--open);
}

.statuscard ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.statuscard li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: var(--space-2xs);
}

.statuscard li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  font-weight: 700;
}

.statuscard--settled li::before {
  content: "✓";
  color: var(--settled);
}

.statuscard--open li::before {
  content: "?";
  color: var(--open);
}

/* --------------------------------------------------------------------------
   8. Concept cards
   -------------------------------------------------------------------------- */

.concepts {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr));
  margin-top: var(--space-l);
}

.concept {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--concept-colour, var(--accent));
  border-radius: var(--radius-m);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
}

.concept--flausch {
  --concept-colour: var(--flausch);
  --concept-soft: var(--flausch-soft);
}

.concept--spass {
  --concept-colour: var(--spass);
  --concept-soft: var(--spass-soft);
}

.concept--spinner {
  --concept-colour: var(--spinner);
  --concept-soft: var(--spinner-soft);
}

.concept__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--concept-soft);
  color: var(--concept-colour);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  margin: 0 0 var(--space-2xs);
}

.concept__name {
  font-size: var(--step-2);
  margin: 0 0 0.15rem;
  color: var(--concept-colour);
}

.concept__tagline {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: var(--space-s);
}

.concept__body p {
  margin-bottom: var(--space-xs);
}

.concept__rhythm {
  margin: var(--space-s) 0;
  padding-top: var(--space-s);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--step--1);
}

.concept__rhythm>div {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.22rem 0;
}

.concept__rhythm dt {
  flex: none;
  color: var(--text-faint);
  min-width: 8.5rem;
}

.concept__rhythm dd {
  margin: 0;
  font-weight: 600;
}

.concept__for {
  margin: auto 0 0;
  padding-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.concept__for strong {
  color: var(--concept-colour);
}

/* --------------------------------------------------------------------------
   9. Comparison table
   -------------------------------------------------------------------------- */

.tablewrap {
  overflow-x: auto;
  margin: var(--space-l) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--step--1);
}

.compare th,
.compare td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.compare thead th {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-alt);
  border-bottom: 2px solid var(--border-strong);
}

.compare__concept--flausch {
  color: var(--flausch);
}

.compare__concept--spass {
  color: var(--spass);
}

.compare__concept--spinner {
  color: var(--spinner);
}

.compare tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   10. Facts, hints, disclosures, checklists, changelog
   -------------------------------------------------------------------------- */

.facts {
  margin: var(--space-m) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--surface);
}

.facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
}

.facts__row:last-child {
  border-bottom: none;
}

.facts dt {
  flex: none;
  min-width: 11rem;
  color: var(--text-muted);
  font-size: var(--step--1);
  padding-top: 0.12em;
}

.facts dd {
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.facts__row.is-open dd {
  font-weight: 500;
  color: var(--text-muted);
}

.hint {
  margin: var(--space-m) 0;
  padding: var(--space-s) var(--space-m);
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.hint p:last-child {
  margin-bottom: 0;
}

.hint__title {
  font-weight: 700;
}

.hint--warn {
  background: var(--open-soft);
  border-left-color: var(--open);
}

.hint--money {
  background: var(--flausch-soft);
  border-left-color: var(--flausch);
}

.disclosure {
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  margin: var(--space-xs) 0;
  overflow: hidden;
}

.disclosure summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-left: 0.15rem;
}

.disclosure[open] summary::before {
  transform: rotate(45deg);
}

.disclosure summary:hover {
  background: var(--surface-alt);
}

.disclosure__body {
  padding: 0 1rem 0.35rem 2.2rem;
}

.disclosure__body>p:first-child {
  margin-top: 0;
}

/* Nested disclosures step back visually. */
.disclosure .disclosure {
  background: var(--surface-alt);
}

.checklist {
  margin: var(--space-m) 0;
}

.checklist__title {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-xs);
}

.checklist__items {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--space-l);
}

.disclosure .checklist__items {
  /* Inside a disclosure the available width is roughly halved. */
  columns: 1;
}

.checklist__items li {
  break-inside: avoid;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.35rem;
}

.checklist__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
}

@media (max-width: 42rem) {
  .checklist__items {
    columns: 1;
  }
}

.changelog {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  border-left: 2px solid var(--border);
}

.changelog>li {
  position: relative;
  padding: 0 0 var(--space-s) var(--space-m);
}

.changelog>li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.changelog__date {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 0 0 0.2rem;
}

.changelog ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* --------------------------------------------------------------------------
   11. Gallery
   -------------------------------------------------------------------------- */

.galleryweek__week+.galleryweek__week {
  margin-top: var(--space-xl);
}

.galleryweek__head {
  border-left: 4px solid var(--week-colour, var(--accent));
  padding-left: var(--space-s);
  margin-bottom: var(--space-m);
  max-width: 44rem;
}

.galleryweek__head--flausch {
  --week-colour: var(--flausch);
}

.galleryweek__head--spinner {
  --week-colour: var(--spinner);
}

.galleryweek__head h3 {
  margin-top: 0;
  font-size: var(--step-2);
  color: var(--week-colour);
}

.galleryweek__head p {
  margin-bottom: 0;
  color: var(--text-muted);
}

.section--deep .galleryweek__head p {
  color: #b6cbd6;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery__button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--surface-sunk);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}

.gallery__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.gallery__button:hover img,
.gallery__button:focus-visible img {
  transform: scale(1.045);
}

.gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.8rem 0.7rem 0.55rem;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  color: #fff;
  background: linear-gradient(to top, rgb(4 14 21 / 0.85), rgb(4 14 21 / 0));
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery__button:hover .gallery__caption,
.gallery__button:focus-visible .gallery__caption {
  opacity: 1;
  transform: none;
}

/* Phones show only the first few photos per week; the rest stay in the DOM
   (the lightbox collects them all at load) and are reached through the button
   below. At this width the grid is a single column, so 39 photos would be
   roughly 10,000px of scrolling for anyone who does not want to look. */
.gallery__more {
  display: none;
}

@media (max-width: 37rem) {
  .gallery__item--extra {
    display: none;
  }

  .gallery__more {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.8rem 1rem;
    background: rgb(255 255 255 / 0.06);
    color: inherit;
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: 999px;
    font: inherit;
    font-weight: 620;
    cursor: pointer;
  }

  .gallery__more:hover {
    background: rgb(255 255 255 / 0.14);
  }
}

/* Touch devices have no hover, so keep captions visible there. */
@media (hover: none) {
  .gallery__caption {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgb(4 12 18 / 0.94);
  backdrop-filter: blur(4px);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-l);
}

.lightbox__caption {
  color: #dfeaf0;
  font-size: 0.95rem;
  text-align: center;
  max-width: 46rem;
  min-height: 1.2em;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.2);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgb(255 255 255 / 0.24);
}

.lightbox__close {
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.6rem;
  line-height: 1;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: 0.22em;
}

.lightbox__nav--prev {
  left: 0.75rem;
}

.lightbox__nav--next {
  right: 0.75rem;
}

/* --------------------------------------------------------------------------
   13. Form
   -------------------------------------------------------------------------- */

.form {
  margin-top: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
}

.field {
  margin-bottom: var(--space-m);
  border: none;
  padding: 0;
}

.field--group {
  margin-bottom: var(--space-l);
}

.field__label {
  display: block;
  font-weight: 620;
  margin-bottom: 0.3rem;
  padding: 0;
}

.field__help {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0 0 0.45rem;
}

.field__input {
  display: block;
  width: 100%;
  padding: 0.62rem 0.8rem;
  font: inherit;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
}

.field__input:focus {
  border-color: var(--accent);
  background: var(--surface);
}

textarea.field__input {
  resize: vertical;
  min-height: 5rem;
}

.req {
  color: var(--spinner);
}

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

.choices--cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--step--1);
  user-select: none;
}

.choices--cols .choice {
  border-radius: var(--radius-s);
}

.choice:hover {
  border-color: var(--accent);
}

.choice input {
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin: 0;
}

.choice:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}

.form__privacy {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.form__status {
  font-size: var(--step--1);
  font-weight: 600;
}

.form__status[data-state="ok"] {
  color: var(--settled);
}

.form__status[data-state="error"] {
  color: var(--spinner);
}

/* --- edit link ------------------------------------------------------------ */

/* Shown when the page was opened with ?edit=<token>. Sits above the fields so
   it is read before anything is changed. */
.form__editnotice {
  margin-top: 0;
}

.form__link {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--surface-sunk);
  border-radius: var(--radius-s);
}

.form__link-intro {
  margin-bottom: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* The field takes the leftover width; below ~30rem the button drops under it
   rather than squeezing the link into a few characters. */
.form__linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.form__linkfield {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: var(--step--1);
}

.form__copy {
  flex: 0 0 auto;
}

.field__input[aria-invalid="true"] {
  border-color: var(--spinner);
  background: var(--spinner-soft);
}

/* Honeypot — off-screen but not display:none, which some bots detect. */
/* --- 1..10 likelihood scale ---------------------------------------------- */

/* A grid with an explicit column count, not flex-wrap: flex breaks wherever
   the buttons happen to stop fitting, which gave 7 + 3 on a phone with the
   short row stretched to full width. Ten across, or a clean 5 + 5. */
.scale__row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.35rem;
}

.scale__item {
  min-width: 0;
}

.scale__item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.scale__item span {
  display: grid;
  place-items: center;
  padding: 0.5rem 0.2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.scale__item:hover span {
  border-color: var(--accent);
}

.scale__item input:checked+span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* The radio itself is visually hidden, so the focus ring has to be drawn here. */
.scale__item input:focus-visible+span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.scale__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

.scale__ends span:last-child {
  text-align: right;
}

/* Below this the ten buttons no longer fit on one line at a usable size:
   two rows of five, and the end labels stacked rather than in two narrow
   columns that wrap to three lines each. */
@media (max-width: 34rem) {
  .scale__row {
    grid-template-columns: repeat(5, 1fr);
  }

  .scale__ends {
    display: grid;
    gap: 0.2rem;
  }

  .scale__ends span:last-child {
    text-align: left;
  }
}

/* --- week availability grid ---------------------------------------------- */

.weeks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.4rem;
}

.weekbtn {
  --week-bg: var(--open-soft);
  --week-fg: var(--open);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: var(--week-bg);
  color: var(--week-fg);
  border: 1px solid color-mix(in srgb, var(--week-fg) 45%, transparent);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.weekbtn:hover {
  border-color: var(--week-fg);
}

/* Colour is never the only signal — every state also carries its own glyph,
   which matters for colour-blind users and in high-contrast modes. */
.weekbtn__glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--week-fg) 22%, transparent);
  font-size: 0.78rem;
  line-height: 1;
}

.weekbtn[data-state="ja"] {
  --week-bg: var(--flausch-soft);
  --week-fg: var(--settled);
}

.weekbtn[data-state="nein"] {
  --week-bg: var(--spinner-soft);
  --week-fg: var(--spinner);
  opacity: 0.75;
}

.weekbtn[data-state="nein"] .weekbtn__dates {
  text-decoration: line-through;
}

.weeks__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.7rem 0 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.weeks__key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.weeks__key-glyph {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--open-soft);
  color: var(--open);
}

.weeks__key[data-state="ja"] .weeks__key-glyph {
  background: var(--flausch-soft);
  color: var(--settled);
}

.weeks__key[data-state="nein"] .weeks__key-glyph {
  background: var(--spinner-soft);
  color: var(--spinner);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   14. Footer + utilities
   -------------------------------------------------------------------------- */

.sitefooter {
  background: var(--deep);
  color: #a9c2ce;
  padding-block: var(--space-l);
  font-size: var(--step--1);
}

.sitefooter p {
  margin-bottom: 0.3rem;
  max-width: 44rem;
}

.sitefooter__stand {
  color: #fff;
  font-weight: 620;
}

.sitefooter a {
  color: #8fd8ee;
}

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