/* Entwurf 3 – Grüße aus Rettenegg. System: design/3.md. Rules use only the tokens in :root. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/jost-normal-400-600.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/literata-normal-400-600.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/literata-italic-400.woff2") format("woff2"); }

:root {
  --c-paper: #ffffff;
  --c-sky: #eef1f2;
  --c-ink: #233342;
  --c-muted: #56636e;
  --c-rose: #a3434f;
  --c-white: #ffffff;
  color-scheme: light;

  --font-head: "Jost", "Futura", system-ui, sans-serif;
  --font-text: "Literata", Georgia, serif;

  --fs-n1: .885rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.275rem;
  --fs-2: 1.53rem;
  --fs-3: 1.836rem;
  --fs-4: 2.203rem;
  --fs-5: 2.644rem;
  --fs-6: 3.172rem;
  --fs-mark: clamp(1.836rem, 1rem + 3.4vw, 3.172rem);
  --track-mark: .14em;
  --track-head: .04em;

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --gutter: 2rem;
  --side: var(--s-4);
  --max: 72rem;
  --frame: 64rem;
  --radius: 4px;
}
@media (min-width: 48rem) { :root { --side: var(--s-6); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font-text); font-size: var(--fs-0); line-height: 1.65; color: var(--c-ink); background: var(--c-paper); }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 var(--s-3); }
a { color: var(--c-ink); text-underline-offset: .2em; }
a:hover { color: var(--c-rose); }
:focus-visible { outline: 3px solid var(--c-rose); outline-offset: 3px; }
figure { margin: 0; }
figcaption { margin-top: var(--s-2); font-size: var(--fs-n1); font-style: italic; color: var(--c-muted); }
.wrap { width: min(var(--max), 100% - 2 * var(--side)); margin-inline: auto; }
.skip { position: absolute; left: var(--s-3); top: calc(var(--s-8) * -1); padding: var(--s-2) var(--s-3); background: var(--c-ink); color: var(--c-white); z-index: 1; }
.skip:focus { top: var(--s-3); }
.skip:hover { color: var(--c-white); }

/* Wordmark band */
.band { background: var(--c-sky); padding-block: var(--s-4) var(--s-8); }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-5); list-style: none; margin: 0; padding: 0; font-family: var(--font-head); font-size: var(--fs-n1); letter-spacing: var(--track-head); }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.mark { text-align: center; padding-top: var(--s-7); }
.mark__title { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: var(--fs-mark); line-height: 1.15; letter-spacing: var(--track-mark); text-transform: uppercase; }
.mark__title span { display: block; }
.mark__place { margin: var(--s-3) 0 0; font-style: italic; color: var(--c-muted); }
@media (min-width: 48rem) { .mark__title span { display: inline; } }

/* Hero: framed photo pulled up into the band */
.frame { width: min(var(--frame), 100% - 2 * var(--side)); margin: calc(var(--s-7) * -1) auto 0; }
.frame img { width: 100%; border-radius: var(--radius); }
.hero__text { text-align: center; padding-block: var(--s-5) var(--s-8); }
.quiet { max-width: 34rem; margin-inline: auto; font-size: var(--fs-2); font-style: italic; line-height: 1.4; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-4); border: 1px solid var(--c-ink); border-radius: var(--radius); background: var(--c-ink); color: var(--c-white); font-family: var(--font-head); font-weight: 500; letter-spacing: var(--track-head); text-decoration: none; }
.btn:hover { background: var(--c-rose); border-color: var(--c-rose); color: var(--c-white); }
.btn--line { background: transparent; color: var(--c-ink); }
.btn--light { background: var(--c-white); border-color: var(--c-white); color: var(--c-ink); }

/* Headings */
.h2 { margin: 0 0 var(--s-4); font-family: var(--font-head); font-weight: 500; font-size: var(--fs-4); line-height: 1.15; letter-spacing: var(--track-head); }
.h3 { margin: 0 0 var(--s-3); font-family: var(--font-head); font-weight: 500; font-size: var(--fs-2); line-height: 1.2; letter-spacing: var(--track-head); }
.note { font-size: var(--fs-n1); color: var(--c-muted); }
@media (min-width: 64rem) { .h2 { font-size: var(--fs-5); } }

/* Sections */
.section { display: grid; gap: var(--s-6) var(--gutter); padding-bottom: var(--s-8); }
.section p { max-width: 38rem; }
.facts { display: grid; grid-template-columns: 1fr; margin: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--c-sky); }
.facts dt { padding-top: var(--s-2); font-family: var(--font-head); font-weight: 500; letter-spacing: var(--track-head); }
.facts dd { margin: 0; padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-sky); }
@media (min-width: 36rem) {
  .facts { grid-template-columns: 9rem 1fr; }
  .facts dt { padding-block: var(--s-2); border-bottom: 1px solid var(--c-sky); }
  .facts dd { padding-top: var(--s-2); }
}
@media (min-width: 48rem) {
  .section { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .stay__text { grid-column: 1 / 7; }
  .stay__photo { grid-column: 8 / 13; }
  .inn__photo { grid-column: 1 / 6; }
  .inn__text { grid-column: 7 / 13; }
}
.stay__photo img, .inn__photo img { width: 100%; border-radius: var(--radius); }

/* Postcards */
.cards { background: var(--c-sky); padding-block: var(--s-8); margin-bottom: var(--s-8); }
.cards__intro { max-width: 40rem; margin-bottom: var(--s-6); font-size: var(--fs-1); line-height: 1.5; }
.cards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); }
.card { display: grid; padding: var(--s-2); background: var(--c-paper); border-radius: var(--radius); }
.card__img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__text { display: flex; flex-direction: column; padding: var(--s-4) var(--s-3) var(--s-3); }
.card__title { margin: 0 0 var(--s-2); font-family: var(--font-head); font-weight: 500; font-size: var(--fs-1); line-height: 1.25; letter-spacing: var(--track-head); color: var(--c-rose); }
.card__text p { font-size: var(--fs-n1); line-height: 1.6; }
.card__fact { margin: auto 0 0; padding-top: var(--s-2); border-top: 1px solid var(--c-muted); font-style: italic; color: var(--c-muted); }
@media (min-width: 36rem) {
  .card { grid-template-columns: 7fr 5fr; }
  .card__img { aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 56rem) { .cards__list { grid-template-columns: repeat(2, 1fr); } }

/* Contact band */
.contact { background: var(--c-ink); color: var(--c-white); padding-block: var(--s-8); }
.contact__grid { display: grid; gap: var(--s-6) var(--gutter); }
.contact .actions { justify-content: flex-start; }
.contact__addr { font-style: normal; font-size: var(--fs-2); line-height: 1.4; margin-bottom: var(--s-4); }
.contact__link { color: var(--c-white); }
.contact a:hover { color: var(--c-sky); }
.contact__note { font-size: var(--fs-n1); }
.contact :focus-visible { outline-color: var(--c-white); }
.contact .btn--light:hover { background: var(--c-sky); border-color: var(--c-sky); color: var(--c-ink); }
@media (min-width: 48rem) {
  .contact__grid { grid-template-columns: repeat(12, 1fr); }
  .contact__grid > :first-child { grid-column: 1 / 8; }
  .contact__grid > :last-child { grid-column: 9 / 13; padding-top: var(--s-3); }
}

/* Footer */
.foot { padding-block: var(--s-6); font-size: var(--fs-n1); }
.foot__dl { display: grid; grid-template-columns: 1fr; margin: 0 0 var(--s-4); }
.foot__dl dt { font-family: var(--font-head); font-weight: 500; }
.foot__dl dd { margin: 0 0 var(--s-2); overflow-wrap: anywhere; }
@media (min-width: 48rem) { .foot__dl { grid-template-columns: auto 1fr; gap: 0 var(--s-5); } .foot__dl dd { margin: 0; } }