/* Entwurf 1 – „Erholung“. System: design/1.md (ref. Luura) */

@font-face {
  font-family: "Gilda Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/gilda-display-normal-400.woff2") format("woff2");
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/commissioner-normal-400-700.woff2") format("woff2");
}

:root {
  /* colour */
  --c-paper: #f4f6f1;
  --c-ink: #1e2b24;
  --c-pine: #2f4a3a;
  --c-zirbe: #c99560;
  --c-mist: #dce3da;
  --c-muted: #5b6b60;

  /* type: ratio 1.25 */
  --font-head: "Gilda Display", "Didot", "Georgia", serif;
  --font-body: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --fs--1: 0.8rem;
  --fs-0: 1rem;
  --fs-1: 1.25rem;
  --fs-2: 1.563rem;
  --fs-3: 1.953rem;
  --fs-4: 2.441rem;
  --fs-5: 3.052rem;
  --fs-display: clamp(2.441rem, 8.5vw, 5.96rem);
  --track-wide: 0.14em;
  --track-0: 0;

  /* space: 8-based */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  --radius-0: 0;
  --radius-round: 50%;
  --radius-pill: 999px;

  --gutter: var(--space-4);
  --max: 1240px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--c-zirbe); color: var(--c-ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--c-pine); }
:focus-visible { outline: 3px solid var(--c-pine); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--space-3); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--space-3); top: var(--space-3); z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--c-ink); color: var(--c-paper);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.skip:hover { color: var(--c-paper); }

/* ---------- header ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) 0;
}
.top__context {
  margin: 0;
  font-size: var(--fs--1);
  line-height: 1.4;
  color: var(--c-muted);
  max-width: 14rem;
}
.top__nav { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--c-ink); padding-top: var(--space-3); }
.top__nav ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-0);
}
.top__nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.top__nav a:hover { text-decoration: underline; }
.disc {
  display: grid; place-items: center;
  width: 5.5rem; aspect-ratio: 1;
  border-radius: var(--radius-round);
  background: var(--c-zirbe);
  color: var(--c-ink);
  font-family: var(--font-head); font-size: var(--fs-0);
  text-decoration: none;
  transform: rotate(-12deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s;
}
.disc:hover { transform: rotate(0deg); background: var(--c-mist); color: var(--c-ink); }

@media (min-width: 960px) {
  .top {
    grid-template-columns: 1fr auto 1fr;
    padding-inline: var(--space-6);
  }
  .top__nav { grid-column: 2; grid-row: 1; border-top: 0; padding-top: 0; }
  .disc { justify-self: end; width: 7rem; font-size: var(--fs-1); }
}

/* ---------- opening ---------- */
.opening {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-7);
  text-align: center;
}
.wordmark {
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  /* the wide tracking adds space after the last letter; pull it back for optical centring */
  margin-right: calc(var(--track-wide) * -1);
}
.slogan {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-head);
  font-size: var(--fs-1);
}
@media (min-width: 600px) { .slogan { font-size: var(--fs-2); } }
.opening__where { color: var(--c-muted); margin-bottom: var(--space-5); }
.opening__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  margin: 0;
}

@media (min-width: 960px) {
  .opening { padding-inline: var(--space-6); padding-top: var(--space-7); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-0); font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.btn:hover { background: var(--c-ink); color: var(--c-paper); }
.btn--solid { background: var(--c-pine); border-color: var(--c-pine); color: var(--c-paper); }
.btn--solid:hover { background: var(--c-ink); border-color: var(--c-ink); }
.btn--light { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-ink); }
.btn--light:hover { background: var(--c-zirbe); border-color: var(--c-zirbe); color: var(--c-ink); }
.btn--line { border-color: var(--c-paper); color: var(--c-paper); }
.btn--line:hover { background: var(--c-paper); color: var(--c-ink); }

/* ---------- views (wide photos) ---------- */
.view { margin: 0; }
.view img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 960px) { .view img { aspect-ratio: 16 / 7; } }
.view figcaption {
  max-width: var(--max); margin: 0 auto; padding: var(--space-2) var(--gutter) 0;
  font-size: var(--fs--1); color: var(--c-muted);
}
.view--inset { margin: 0 0 var(--space-7); }
.view--inset img { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .view--inset img { aspect-ratio: 16 / 8; } }
.view--inset figcaption { padding-inline: 0; }

/* ---------- chapters ---------- */
.chapter {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
}
.chapter > h2 {
  font-size: var(--fs-3);
  text-align: center;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.statement {
  font-family: var(--font-head);
  max-width: 30ch;
  margin: 0 auto var(--space-7);
  text-align: center;
  font-size: var(--fs-3);
  line-height: 1.3;
  text-wrap: balance;
}
.lead { font-size: var(--fs-1); line-height: 1.5; }

.pair { display: grid; gap: var(--space-5); align-items: start; }
.pair__text { max-width: 62ch; }

.cols { display: grid; gap: var(--space-6); }
.item h3 { font-size: var(--fs-2); margin-bottom: var(--space-3); }
.item p { max-width: 62ch; }

.postcard { margin: 0 0 var(--space-4); }
.postcard img {
  width: auto;
  padding: var(--space-3);
  background: var(--c-paper);
  border: 1px solid var(--c-mist);
  border-radius: var(--radius-0);
  box-shadow: 0 var(--space-1) var(--space-4) color-mix(in srgb, var(--c-ink) 12%, transparent);
}
.postcard figcaption { margin-top: var(--space-2); font-size: var(--fs--1); color: var(--c-muted); }
.postcards { display: grid; gap: var(--space-4); margin-block: var(--space-5); }

.quote {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--c-mist);
}
.quote p { font-family: var(--font-head); font-size: var(--fs-1); line-height: 1.45; }
.quote footer { font-size: var(--fs--1); color: var(--c-muted); }

.list-title { font-size: var(--fs-1); margin: var(--space-7) 0 var(--space-3); }
.places {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--c-ink);
}
.places li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-mist);
}
.places span { color: var(--c-muted); }
.places--ski li { font-family: var(--font-head); font-size: var(--fs-1); }
.places--ski span { font-family: var(--font-body); font-size: var(--fs-0); }

@media (min-width: 600px) {
  .pair { grid-template-columns: auto 1fr; gap: var(--space-6); }
  .postcards { grid-template-columns: repeat(auto-fit, minmax(14rem, max-content)); }
  .places:not(.places--ski) { columns: 2; column-gap: var(--space-6); }
  .places:not(.places--ski) li { break-inside: avoid; }
}
@media (min-width: 960px) {
  .chapter { padding-inline: var(--space-6); padding-block: var(--space-9); }
  .chapter > h2 { font-size: var(--fs-3); }
  .statement { font-size: var(--fs-5); line-height: 1.2; }
  .pair { max-width: 62rem; margin-inline: auto; }
  .cols { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .cols--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

/* winter: pine field */
.chapter--winter {
  max-width: none;
  background: var(--c-pine);
  color: var(--c-paper);
}
.chapter--winter > * { max-width: calc(var(--max) - var(--space-6) * 2); margin-inline: auto; }
.chapter--winter .statement { max-width: 30ch; }
.chapter--winter .places { border-top-color: var(--c-paper); }
.chapter--winter .places li { border-bottom-color: color-mix(in srgb, var(--c-paper) 25%, transparent); }
.chapter--winter .places span { color: var(--c-mist); }
.chapter--winter a:hover { color: var(--c-zirbe); }

/* ---------- band (garden & stüberl) ---------- */
.band { background: var(--c-mist); }
.band__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
}
.band h2 {
  font-size: var(--fs-3);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space-6);
}
.band .cols p { font-size: var(--fs-1); line-height: 1.55; max-width: 34ch; margin-inline: auto; }
.band__note { margin: var(--space-6) auto 0; max-width: 62ch; text-align: center; font-size: var(--fs--1); }
@media (min-width: 960px) {
  .band__inner { padding-inline: var(--space-6); }
}

/* ---------- facts ---------- */
.facts { margin: var(--space-3) 0 0; border-top: 1px solid var(--c-ink); }
.facts div {
  display: grid; gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-mist);
}
.facts dt { font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .facts div { grid-template-columns: 12rem 1fr; }
}
#preise h3 { font-size: var(--fs-2); }

/* ---------- contact ---------- */
.contact { background: var(--c-ink); color: var(--c-paper); text-align: center; }
.contact__inner { max-width: 48rem; margin: 0 auto; padding: var(--space-8) var(--gutter); }
.contact h2 { font-size: var(--fs-4); font-weight: 400; margin-bottom: var(--space-4); }
.contact__name { font-family: var(--font-head); font-size: var(--fs-1); }
.contact address { font-style: normal; font-size: var(--fs-1); line-height: 1.5; margin-bottom: var(--space-5); }
.contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.contact__note { color: var(--c-mist); margin: 0; }
.contact :focus-visible { outline-color: var(--c-zirbe); }
@media (min-width: 960px) {
  .contact h2 { font-size: var(--fs-5); }
}

/* ---------- footer ---------- */
.foot {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter) var(--space-6);
  font-size: var(--fs--1);
  color: var(--c-muted);
}
.foot h2 { font-size: var(--fs-1); color: var(--c-ink); margin-bottom: var(--space-2); }
.facts--foot { max-width: 48rem; color: var(--c-ink); }
.foot__demo { margin-top: var(--space-5); max-width: 70ch; }
@media (min-width: 960px) {
  .foot { padding-inline: var(--space-6); }
}