/* Entwurf 2 – „Hausgemacht“. System: design/2.md (ref. Spots Travel) */

@font-face {
  font-family: "Petrona";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/petrona-normal-400-800.woff2") format("woff2");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/golos-text-normal-400-700.woff2") format("woff2");
}

:root {
  /* colour – taken from the house photo */
  --c-wall: #fbfbf8;
  --c-wood: #3a2a1f;
  --c-geranie: #b8264a;
  --c-wiese: #4f6b2e;
  --c-himmel: #ddeaf4;
  --c-white: #ffffff;

  /* type: ratio 1.2, base 17px */
  --font-head: "Petrona", "Georgia", serif;
  --font-body: "Golos Text", "Segoe UI", system-ui, sans-serif;
  --fs--1: 0.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;
  --track-tight: -0.01em;

  /* space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;

  --radius-s: 3px;
  --radius-pill: 999px;

  --max: 1120px;
  --dash: 1px dashed var(--c-wood);
  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-wall);
  color: var(--c-wood);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--c-geranie); color: var(--c-white); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-geranie); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--c-wood); }
:focus-visible { outline: 3px solid var(--c-geranie); outline-offset: 3px; border-radius: var(--radius-s); }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0; text-wrap: balance; color: var(--c-wood); }
h2 { font-size: var(--fs-3); font-weight: 600; letter-spacing: var(--track-tight); }
h3 { font-size: var(--fs-2); font-weight: 600; }
p { margin: 0 0 var(--space-4); }
figure { margin: 0; }
figcaption { margin-top: var(--space-2); font-size: var(--fs--1); }

.skip {
  position: absolute; left: var(--space-3); top: var(--space-3); z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--c-wood); color: var(--c-white);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.skip:hover { color: var(--c-white); }

/* ---------- header bar: dashed cells ---------- */
.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: var(--dash);
}
.bar > * { padding: var(--space-3) var(--space-4); }
.bar__name {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-2);
  color: var(--c-wood); text-decoration: none; line-height: 1.2;
}
.bar__phone {
  align-self: stretch; display: flex; align-items: center;
  border-left: var(--dash);
  font-weight: 600; color: var(--c-wood); text-decoration: none; white-space: nowrap;
}
.bar__phone:hover { color: var(--c-geranie); }
.bar__nav { grid-column: 1 / -1; grid-row: 2; border-top: var(--dash); padding-block: var(--space-2); }
.bar__nav ul {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  margin: 0; padding: 0; list-style: none;
}
.bar__nav a { color: var(--c-wood); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.bar__nav a:hover { color: var(--c-geranie); text-decoration: underline; }

@media (min-width: 1024px) {
  .bar { grid-template-columns: auto 1fr auto; }
  .bar__nav { grid-column: 2; grid-row: 1; border-top: 0; border-left: var(--dash); display: flex; align-items: center; justify-content: flex-end; }
}

/* ---------- intro ---------- */
.intro {
  max-width: 50rem;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-6);
  text-align: center;
}
.intro h1 {
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.1;
  color: var(--c-geranie);
}
.intro__sub { margin: var(--space-4) auto var(--space-5); font-size: var(--fs-1); line-height: 1.45; max-width: 36rem; }
.intro__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3) var(--space-5); margin: 0; }

@media (min-width: 640px) {
  .intro h1 { font-size: var(--fs-5); }
}
@media (min-width: 1024px) {
  .intro { padding-top: var(--space-8); }
  .intro h1 { font-size: var(--fs-6); }
}

.pill {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--c-geranie);
  border-radius: var(--radius-pill);
  background: var(--c-geranie); color: var(--c-white);
  font-weight: 600; text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.pill:hover { background: var(--c-wood); border-color: var(--c-wood); color: var(--c-white); }
.pill--line { background: transparent; color: var(--c-wood); border-color: var(--c-wood); }
.pill--line:hover { background: var(--c-wood); color: var(--c-white); }
.textlink { font-weight: 600; }

/* ---------- photo cluster: honest sizes, staggered ---------- */
.cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-3);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-7);
}
.cluster__item img { border-radius: var(--radius-s); }
.cluster__item--a { grid-column: 1 / -1; justify-self: center; }
.cluster__item--b { margin-top: var(--space-5); }
.cluster__item--d, .cluster__item--e { display: none; }

@media (min-width: 640px) {
  .cluster {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
    gap: var(--space-4);
  }
  .cluster__item--a { order: 2; width: 292px; margin-top: var(--space-6); }
  .cluster__item--b { order: 1; width: 150px; margin-top: var(--space-7); }
  .cluster__item--c { order: 3; width: 240px; margin-top: 0; }
  .cluster__item--d { order: 4; display: block; width: 135px; margin-top: var(--space-8); }
  .cluster__item--e { order: 5; display: block; width: 220px; margin-top: var(--space-5); }
}
@media (min-width: 1024px) {
  .cluster { flex-wrap: nowrap; max-width: 1240px; }
  .cluster__item { flex: 0 1 auto; min-width: 0; }
  .cluster__item--a { flex-basis: 292px; }
  .cluster__item--b { width: 170px; flex-basis: 170px; }
  .cluster__item--c { width: 290px; flex-basis: 290px; }
  .cluster__item--d { width: 150px; flex-basis: 150px; }
  .cluster__item--e { width: 240px; flex-basis: 240px; }
}

/* ---------- breakfast + menu card ---------- */
.breakfast {
  display: grid; gap: var(--space-6);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  border-top: var(--dash);
}
.breakfast__text { max-width: 34rem; }
.breakfast__text h2 { margin-bottom: var(--space-4); }
.breakfast__text p:first-of-type { font-size: var(--fs-1); line-height: 1.5; }

.menu {
  background: var(--c-white);
  border: var(--dash);
  border-radius: var(--radius-s);
  padding: var(--space-5) var(--space-4);
  box-shadow: 0 var(--space-2) var(--space-5) color-mix(in srgb, var(--c-wood) 10%, transparent);
}
.menu__head {
  font-family: var(--font-head); font-size: var(--fs-1); font-weight: 600; text-align: center;
  padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: var(--dash);
}
.menu__list { margin: 0; padding: 0; list-style: none; }
.menu__list li { display: flex; align-items: baseline; gap: var(--space-2); padding-block: var(--space-2); }
.menu__item { font-family: var(--font-head); font-size: var(--fs-1); font-weight: 500; }
.menu__dots { flex: 1; min-width: var(--space-4); border-bottom: 2px dotted var(--c-wiese); transform: translateY(calc(var(--space-1) * -1)); }
.menu__how { color: var(--c-wiese); font-weight: 600; text-align: right; }
.menu__foot { margin: var(--space-4) 0 0; text-align: center; font-size: var(--fs--1); }

@media (min-width: 640px) {
  .menu { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .breakfast { grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; padding-block: var(--space-8); }
  .breakfast__text h2 { font-size: var(--fs-4); }
}

/* ---------- rooms ---------- */
.rooms {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  border-top: var(--dash);
}
.rooms > h2 { text-align: center; margin-bottom: var(--space-6); }
.sheet { display: grid; gap: var(--space-5); padding-block: var(--space-5); }
.sheet + .sheet { border-top: var(--dash); padding-top: var(--space-6); }
.sheet h3 { margin-bottom: var(--space-3); }
.sheet__text { max-width: 36rem; }
.sheet__lead { font-size: var(--fs-1); line-height: 1.5; }
.sheet__facts { margin-top: 0; align-self: start; }
.sheet__photos { display: grid; gap: var(--space-4); align-content: start; }
.sheet__photos img { border-radius: var(--radius-s); }

@media (min-width: 640px) {
  .sheet__photos { grid-template-columns: repeat(2, minmax(0, 224px)); }
}
@media (min-width: 1024px) {
  .rooms > h2 { font-size: var(--fs-4); }
  .sheet { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .sheet__photos { justify-content: end; }
}

.facts { margin: var(--space-4) 0 0; border-top: var(--dash); }
.facts div { display: grid; gap: 0 var(--space-4); padding: var(--space-2) 0; border-bottom: var(--dash); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .facts div { grid-template-columns: 9rem 1fr; }
}

/* ---------- house features ---------- */
.house {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  border-top: var(--dash);
}
.house > h2 { text-align: center; margin-bottom: var(--space-6); }
.features { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.features li { border-top: 2px solid var(--c-wiese); padding-top: var(--space-3); }
.features h3 { font-size: var(--fs-1); margin-bottom: var(--space-2); }
.features p { margin: 0; }
.house__more { margin: var(--space-6) auto 0; max-width: 46rem; text-align: center; font-size: var(--fs--1); }
.quote { margin: var(--space-7) auto 0; max-width: 40rem; text-align: center; }
.quote p { font-family: var(--font-head); font-size: var(--fs-2); line-height: 1.35; color: var(--c-geranie); }
.quote footer { font-size: var(--fs--1); }

@media (min-width: 640px) {
  .features { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
}
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(4, 1fr); }
  .house > h2 { font-size: var(--fs-4); }
  .quote p { font-size: var(--fs-3); }
}

/* ---------- around ---------- */
.around {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  border-top: var(--dash);
}
.around > h2 { text-align: center; margin-bottom: var(--space-6); }
.around__cols { display: grid; gap: var(--space-6); }
.around h3 { margin-bottom: var(--space-3); }
.around p { max-width: 36rem; }
.dashlist { margin: 0; padding: 0; list-style: none; border-top: var(--dash); }
.dashlist li { padding: var(--space-2) 0; border-bottom: var(--dash); }
@media (min-width: 1024px) {
  .around > h2 { font-size: var(--fs-4); }
  .around__cols { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

/* ---------- sky band ---------- */
.sky { background: var(--c-himmel); border-top: var(--dash); }
.sky__inner { max-width: var(--max); margin: 0 auto; padding: var(--space-7) var(--space-4); }
.sky h2 { text-align: center; margin-bottom: var(--space-6); }
.sky h3 { font-size: var(--fs-1); margin-bottom: var(--space-3); }
.sky__cols { display: grid; gap: var(--space-6); }
.sky address { font-style: normal; margin-bottom: var(--space-4); }
.sky__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sky .facts { margin-top: 0; }
@media (min-width: 1024px) {
  .sky h2 { font-size: var(--fs-4); }
  .sky__cols { grid-template-columns: 1fr 1.2fr 1fr; gap: var(--space-6); }
}

/* ---------- footer ---------- */
.foot {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  font-size: var(--fs--1);
}
.foot h2 { font-size: var(--fs-1); margin-bottom: var(--space-3); }
.facts--foot { max-width: 46rem; }
@media (min-width: 640px) { .facts--foot div { grid-template-columns: 13rem 1fr; } }
.foot__demo { margin-top: var(--space-5); max-width: 70ch; }