/* ==========================================================================
   Band components shared across pages: title band (hero), statement +
   numbers, fog band, room mosaic, photo band, walks/pano, signature band,
   reviews, contact band. Extracted from startseite-entwurf-2.html; several
   components reappear on the subpages (walks, contact, numbers).
   Photo-specific object-position values live in the page templates as
   inline styles – they are per-motif crop decisions (design system v2:
   "Ausschnitt per object-position dokumentieren").
   ========================================================================== */

/* 1 · Title band -------------------------------------------------------- */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 560px;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veil { position: absolute; inset: 0; }
.hero-text { position: relative; z-index: 1; padding-top: clamp(var(--space-5), 6vh, var(--space-12)); }
.hero h1 { font-size: var(--fs-hero); line-height: 0.96; letter-spacing: -0.01em; max-width: 12em; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  margin-top: var(--space-3);
}
.hero-meta p {
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-ink);
  max-width: 28em;
}
.hero-sub { margin-top: var(--space-2); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); font-weight: 600; line-height: 1.4; }
/* Plate behind text on light veil: keeps 4.5:1 even over dark image parts */
.hero-text .plate {
  display: inline-block;
  background: rgb(255 255 255 / 0.72);
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-left: calc(-1 * var(--space-3));
}
@media (max-width: 600px) {
  .hero { height: auto; min-height: 640px; }
}

/* 2 · Statement + numbers ------------------------------------------------ */
.statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: var(--fs-statement);
  line-height: 1.08;
  grid-column: 1 / span 10;
  text-wrap: balance;
}
.statement-note { grid-column: 1 / span 7; margin-top: var(--space-3); font-size: var(--fs-lead); color: var(--color-muted); }
.numbers {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-ink);
}
.numbers li { padding: var(--space-3) var(--space-3) 0 0; border-right: var(--line); }
.numbers li + li { padding-left: var(--space-3); }
.numbers li:last-child { border-right: 0; }
.numbers .n { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: condensed; font-size: var(--fs-num); line-height: 1; }
.numbers .n small { font-size: 0.4em; margin-left: 4px; }
.numbers .t { display: block; margin-top: var(--space-1); }
.numbers .t-line { display: block; }
@media (max-width: 960px) {
  .statement, .statement-note { grid-column: 1 / -1; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .numbers li { border-right: 0; border-bottom: var(--line); padding: var(--space-3) var(--space-2) var(--space-3) 0; }
  .numbers li + li { padding-left: 0; }
  .numbers li:nth-child(odd) { border-right: var(--line); }
  .numbers li:nth-child(even) { padding-left: var(--space-3); }
}

/* 3 · Fog band (signature element, max. once per page) ------------------- */
.fog { position: relative; overflow: hidden; padding-block: clamp(var(--space-10), 11vw, 160px); }
.fog > .fog-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fog > .fog-veil {
  position: absolute; inset: 0;
  background: var(--fog);
  -webkit-backdrop-filter: blur(var(--fog-blur));
  backdrop-filter: blur(var(--fog-blur));
}
.fog-grid { position: relative; z-index: 1; align-items: center; }
.fog-box {
  grid-column: 1 / span 6;
  grid-row: 1;
  z-index: 2;
  background: var(--dark-bg);
  color: var(--dark-fg);
  padding: clamp(var(--space-4), 4.5vw, var(--space-8));
}
.fog-box h2 { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.fog-box p { color: var(--dark-fg); }
.fog-box p + p { margin-top: var(--space-2); }
.fog-box .ghost-link { margin-top: var(--space-4); }
.fog-photo { grid-column: 6 / span 7; grid-row: 1; margin: 0; z-index: 1; }
.fog-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 960px) {
  .fog-box { grid-column: 1 / span 8; grid-row: 1; align-self: start; }
  .fog-photo { grid-column: 4 / -1; grid-row: 1; margin-top: 55%; }
  .fog-grid { align-items: start; }
}
@media (max-width: 600px) {
  .fog-box { grid-column: 1 / -1; }
  .fog-photo { grid-column: 1 / -1; grid-row: 2; margin: var(--space-3) 0 0 var(--space-6); }
}

/* 4 · Room mosaic --------------------------------------------------------*/
.rooms-head { align-items: end; margin-bottom: var(--space-8); row-gap: var(--space-3); }
.rooms-head h2 { grid-column: 1 / span 6; font-size: var(--fs-h2); }
.rooms-head h2 .line { display: block; } /* one word per line, at every width */
.rooms-head p { grid-column: 8 / span 5; }
.mosaic { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3); }
.mosaic figure { position: relative; margin: 0; overflow: hidden; }
.mosaic img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mosaic .m-tall { grid-row: span 2; }
.mosaic .m-tall img { aspect-ratio: auto; }
.mosaic .m-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3); }
.rooms-more { margin-top: var(--space-6); }
@media (max-width: 960px) {
  .rooms-head h2, .rooms-head p { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .mosaic, .mosaic .m-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .mosaic .m-tall { grid-row: auto; }
  .mosaic .m-tall img { aspect-ratio: 1 / 1; }
}

/* 5 · Photo band without text --------------------------------------------*/
.photo-band { margin: 0; }
.photo-band img { width: 100%; aspect-ratio: 16 / 9; max-height: 92svh; object-fit: cover; }
@media (max-width: 600px) {
  .photo-band img { aspect-ratio: 4 / 3; }
}

/* 6 · Walks list + panorama (dark band context) ---------------------------*/
.walks {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--line-dark);
}
.walks li { padding: var(--space-3) var(--space-2) 0 0; }
.walks .n { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: condensed; font-size: var(--fs-num); line-height: 1; }
.walks .n small { font-size: 0.4em; margin-left: 4px; }
.walks .t { display: block; margin-top: var(--space-1); color: var(--dark-muted); }
.pano { margin: var(--space-12) 0 0; }
.pano img { width: 100%; height: auto; }
.dark figcaption, .pano figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--dark-muted); }
@media (max-width: 600px) {
  .walks { grid-template-columns: 1fr; }
  .walks li { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--line-dark); }
  .walks .t { margin-top: 0; }
}

/* 7 · Signature band (photo, text top in ink veil) -------------------------*/
.sig-band {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 88svh;
  min-height: 440px;
  overflow: hidden;
  background: var(--dark-bg);
  color: var(--dark-fg);
}
.sig-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sig-band .veil { background: linear-gradient(to bottom, var(--veil-ink-strong) 0%, var(--veil-ink-mid) 26%, var(--veil-ink-none) 52%); }
.sig-text { position: relative; z-index: 1; padding-block: var(--space-8); }
.photo-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.5rem);
  line-height: 1.06;
  max-width: 16em;
  text-wrap: balance;
}
@media (max-width: 600px) {
  .sig-band { aspect-ratio: auto; min-height: 480px; }
  .sig-text { padding-block: var(--space-6); }
}

/* 8 · Reviews (dark band) ---------------------------------------------------*/
.reviews-inner { grid-column: 2 / span 10; text-align: center; }
.reviews .eyebrow { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); margin-bottom: var(--space-4); }
.review-quote { margin: 0; }
.review-quote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: var(--fs-statement);
  line-height: 1.12;
  text-wrap: balance;
}
.review-source {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--line-dark);
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--dark-muted);
}
@media (max-width: 960px) {
  .reviews-inner { grid-column: 1 / -1; }
}

/* Own published reviews (stage 3 part B, G7b): homepage band and reviews page */
.bw-eigene { grid-column: 2 / span 10; margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--line-dark); display: grid; gap: var(--space-3); }
.bw-eigene-titel { font-size: var(--fs-h3); margin: 0; }
.bw-liste { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .bw-eigene .bw-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bw-karte { margin: 0; padding-top: var(--space-2); border-top: 1px solid currentColor; display: grid; gap: var(--space-1); align-content: start; }
.bw-karte blockquote { margin: 0; }
.bw-karte blockquote p { margin: 0 0 0.5em; font-size: var(--fs-lead); line-height: 1.45; }
.bw-karte figcaption { font-size: var(--fs-small); color: var(--color-muted); }
.reviews .bw-karte figcaption, .reviews .bw-schnitt { color: var(--dark-muted); }
.reviews .text-link, .reviews .bw-echtheit summary { color: var(--dark-fg); }
.bw-sterne { font-size: 1.3rem; letter-spacing: 2px; }
.bw-schnitt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.bw-echtheit { font-size: var(--fs-small); max-width: 60ch; }
.bw-echtheit summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.bw-echtheit p { margin: 0 0 0.75em; }
.bw-echtheit h2 { font-size: var(--fs-h3); }
.bw-kopf h1 { margin-bottom: var(--space-2); }
.bw-kopf .bw-schnitt { margin-top: var(--space-3); }
.bw-seite .container { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .bw-seite .bw-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } }
@media (max-width: 960px) { .bw-eigene { grid-column: 1 / -1; } }

/* 9 · Contact band (stage 1: displayed contact data only, no form) ---------*/
.contact { row-gap: var(--space-5); align-items: end; }
.contact h2 { grid-column: 1 / span 6; font-size: var(--fs-h2); }
.contact-body { grid-column: 8 / span 5; }
.contact dl { margin: 0; border-top: 1px solid var(--color-ink); }
.contact .row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: var(--line);
}
.contact dt { color: var(--color-muted); font-size: var(--fs-small); }
.contact dd { margin: 0; }
.contact .hint { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-muted); }
.contact a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; } /* tap target: call / write directly from the phone */
@media (max-width: 960px) {
  .contact h2, .contact-body { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .contact .row { grid-template-columns: 1fr; gap: 4px; }
}