/* ==========================================================================
   Page CSS: Unterkunft (Template folgt in Paket 3)
   Extracted 1:1 from the approved draft unterkunft-entwurf-1.html
   (OD-Studio-Revision 2026-10-06). Per-motif crop decisions cite the photo
   register ID (foto-index); templates use ph-NNNN classes instead of the
   draft's inline styles (README convention: crops live in the page CSS).
   Shared components (band/grid/chips/contact basics) live in
   components.css/sections.css; rules below override where this subpage
   intentionally diverges from the homepage.
   ========================================================================== */

/* Token overrides for this page (draft :root deviations from tokens.css) */
:root {
  --fs-hero: clamp(2.75rem, 1.2rem + 4.6vw, 6rem);
}

/* Wide crop tricks (hero 116.3%, sv-0020 151.5%) must never scroll the page */
body { overflow-x: clip; }

/* Sticky anchor bar on this page: extend the default scroll offset
   (components.css: main [id]) by the bar height */
main [id] { scroll-margin-top: calc(var(--header-h) + var(--anchor-h) + var(--space-2)); }

/* 1 · Title band – taller panorama (78vh) so the text zone sits over the
   dark flower bed instead of the bright house wall.
   sv-0019 (4032×3024): image box 116.3% wide, flush left → the right 14%
   (garage door and house number on the garage wall) always stay outside. */
.hero {
  position: relative;
  height: clamp(640px, 78vh, 880px);
  overflow: hidden;
  background: var(--dark-bg);
  color: var(--dark-fg);
  display: flex;
  align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img {
  position: absolute;
  top: 0; left: 0;
  width: 116.3%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 35% 25%;
}
/* Narrow ink veil as a strip under the text: fading bright at the top because
   the first headline line reaches over the light house wall
   (min. 0.52 for 3:1, set 0.55–0.75). */
.hero .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(47 46 46 / 0.7) 0, rgb(47 46 46 / 0.56) 140px, rgb(47 46 46 / 0.54) 285px, rgb(47 46 46 / 0) 330px);
}
/* padding-top: 0 overrides the homepage hero text (sections.css) */
.hero-text { position: relative; z-index: 1; padding-top: 0; padding-bottom: clamp(var(--space-5), 6vh, var(--space-8)); }
.hero h1 { font-size: var(--fs-hero); line-height: 0.96; letter-spacing: -0.01em; max-width: 12em; }
.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; }

/* 2 · Overview */
.overview .head-title { grid-column: 1 / span 6; }
.overview .prose { grid-column: 8 / span 5; }
.honest { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--line); color: var(--color-ink); }

/* 3 · Ground floor – mosaic: top row hall/wardrobe 4:5, below that sofa and
   kitchen as the key rooms, each across the full mosaic width at 3:2 */
.mosaic-2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.mosaic-2x2 .ph { aspect-ratio: 4 / 5; }
.mosaic-2x2 .ph.landscape { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.eg-layout { row-gap: var(--space-6); }
.eg-layout .eg-text { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--anchor-h) + var(--space-4)); align-self: start; }
.eg-layout .mosaic-2x2 { grid-column: 6 / span 7; }
/* Crops: sv-0044 (hall, portrait) · sv-0046 (wardrobe, portrait) ·
   sv-0036 (sofa/stove/fireplace kept in frame, 4:3 in 3:2 cell) ·
   sv-0035 (cooking counter left, dining table center, terrace door right) */
.ph-0044 img { object-position: 50% 55%; }
.ph-0046 img { object-position: 50% 50%; }
.ph-0036 img { object-position: 50% 55%; }
.ph-0035 img { object-position: 50% 50%; }

/* 4 · Stair band (photo) – sv-0045 portrait 4284×5712: object-position
   50% 32% shows the upper flight with two recessed step lights on the right;
   narrow white veil as a strip under the text line (min. 0.58, set 0.7–0.85);
   one third taller since 2026-10-25 (operator: two-line sentence stood above it). */
.stair-band {
  position: relative;
  height: clamp(380px, 60vh, 640px);
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
  display: flex;
  align-items: flex-end;
}
.stair-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.stair-band .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgb(255 255 255 / 0.85) 0, rgb(255 255 255 / 0.7) 147px, rgb(255 255 255 / 0) 227px); }
.stair-band .tag { background: var(--color-ink); color: var(--dark-fg); }
.stair-band .band-text { position: relative; z-index: 1; padding-bottom: var(--space-8); }
/* Overrides the homepage signature-band variant (sections.css) */
.photo-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  max-width: 14em;
  text-wrap: balance;
}

/* 5 · Upper floor – two alternating blocks */
.og-block { row-gap: var(--space-4); align-items: start; }
.og-block + .og-block { margin-top: var(--space-12); }
.og-block .og-text { grid-column: 1 / span 4; }
.og-block .og-photos { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.og-block.flip .og-text { grid-column: 9 / span 4; grid-row: 1; }
.og-block.flip .og-photos { grid-column: 1 / span 7; grid-row: 1; }
.og-text h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
/* Bedroom pictures (bed, desk) across the full width at 3:2, like ground floor */
.og-photos .ph.landscape { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.og-photos .ph.portrait { aspect-ratio: 3 / 4; }
/* Crops: sv-0027 (bed, nightstands, wardrobe kept in frame, 4:3 in 3:2 cell) ·
   sv-0042 (desk and corner window kept in frame, 4:3 in 3:2 cell) ·
   sv-0040 (washbasin) and sv-0041 (shower) natural 3:4, no crop */
.ph-0027 img { object-position: 50% 50%; }
.ph-0042 img { object-position: 50% 50%; }

/* 6 · Lower floor – sv-0032 (bedroom) and sv-0047 (utility room) natural
   4:3, stacked full width */
.ue-layout { row-gap: var(--space-6); align-items: start; }
.ue-layout .ue-text { grid-column: 1 / span 5; }
.ue-layout .ue-photos { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ue-photos .ph { aspect-ratio: 4 / 3; }
.ue-photos .ph.wide { grid-column: 1 / -1; }
.ue-text h3 { font-size: var(--fs-h3); margin: var(--space-5) 0 var(--space-2); }

/* 7 · Outdoors – three photos 4:3 */
.out-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.out-photos .ph { aspect-ratio: 4 / 3; }
.ph-0039 img { object-position: 50% 60%; } /* sv-0039: sofa and parasol centered */
.ph-0021 img { object-position: 50% 55%; } /* sv-0021: terrace with open parasol */
/* sv-0020 (5712×4284): crop x 0–66%, y 24–90% → garages and house number
   stay outside. Image 151.5% wide, flush left, shifted up 36.4% of box height. */
.ph-0020 img { position: absolute; left: 0; top: -36.4%; width: 151.5%; max-width: none; height: auto; object-fit: initial; }

/* 2 · Fact sheet under the overview heading (operator 22.10.2026) */
.steckbrief { margin: var(--space-5) 0 0; border-top: 1px solid var(--color-ink); }
.steckbrief > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--line); }
.steckbrief dt { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-chip); line-height: 1.9; color: var(--color-muted); }
.steckbrief dd { margin: 0; font-weight: 600; line-height: 1.5; }

/* 8 · Amenities – groups are <details>, open by default, closed on phones
   by unterkunft.js (operator 22.10.2026) */
.amenities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.amenity { padding: 0 0 var(--space-4); border-top: var(--line); }
.amenity summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-top: var(--space-4); }
.amenity summary::-webkit-details-marker { display: none; }
.amenity summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.amenity h3 { font-size: var(--fs-h3); margin: 0; flex: 1; }
.amenity .pfeil { width: 18px; height: 18px; flex: none; transition: transform var(--ease-control); }
.amenity[open] .pfeil { transform: rotate(180deg); }
.amenity[open] summary { margin-bottom: var(--space-2); }
.amenity ul { list-style: none; margin: 0; padding: 0; }
.amenity li { padding: 4px 0 4px 18px; position: relative; }
.amenity li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 8px; height: 1px; background: var(--color-ink); }
.amenities-intro { grid-column: 8 / span 5; }

/* 9 · Location – LIGHT band with light map (karte-kitzeberg-hell.svg).
   Overrides the dark walks context from sections.css. */
.lage-layout { row-gap: var(--space-6); align-items: start; }
.lage-layout .lage-text { grid-column: 1 / span 5; }
.lage-layout .lage-text > p { font-size: var(--fs-lead); }
.lage-layout .lage-map { grid-column: 7 / span 6; }
.walks { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--line); }
.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: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); line-height: 1; }
.walks .n small { font-size: 0.45em; margin-left: 4px; }
.walks .t { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: var(--fs-small); }
.lage-map figure { margin: 0; }
.lage-map img { display: block; width: 100%; height: auto; border: var(--line); }
.map-source { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); }
.map-links { display: flex; flex-wrap: wrap; column-gap: var(--space-4); row-gap: var(--space-2); margin-top: var(--space-4); }
.lage-hint { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--color-muted); }

/* 10 · Contact band additions (basics in sections.css) */
.placeholder { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 10px; border: 1px dashed var(--color-muted); background: var(--color-bg); font-size: 0.9375rem; }
.placeholder small { font-size: 0.75rem; color: var(--color-muted); }
.house-rules { margin-top: var(--space-10); padding-top: var(--space-3); border-top: var(--line); display: grid; gap: var(--space-1); }
.house-rules p { font-weight: 600; }

/* Tablet */
@media (max-width: 960px) {
  .overview .head-title, .overview .prose,
  .eg-layout .eg-text, .eg-layout .mosaic-2x2, .og-block .og-text, .og-block .og-photos,
  .og-block.flip .og-text, .og-block.flip .og-photos, .ue-layout .ue-text, .ue-layout .ue-photos,
  .amenities-intro, .lage-layout .lage-text, .lage-layout .lage-map { grid-column: 1 / -1; grid-row: auto; }
  .eg-layout .eg-text { position: static; }
  .overview .head-title { margin-bottom: var(--space-5); }
  .amenities { column-gap: var(--space-5); }
}

/* Smartphone */
@media (max-width: 600px) {
  /* min-height: 0 overrides the homepage mobile hero (sections.css) */
  .hero { height: clamp(420px, 62vh, 560px); min-height: 0; }
  .hero-media img { object-position: 35% 40%; }
  .hero .veil { background: linear-gradient(to top, rgb(47 46 46 / 0.75) 0, rgb(47 46 46 / 0.58) 120px, rgb(47 46 46 / 0.55) 195px, rgb(47 46 46 / 0) 240px); }
  .mosaic-2x2 { gap: var(--space-2); }
  .stair-band .veil { background: linear-gradient(to top, rgb(255 255 255 / 0.9) 0, rgb(255 255 255 / 0.72) 147px, rgb(255 255 255 / 0) 227px); }
  .stair-band .band-text { padding-bottom: var(--space-6); }
  .og-photos, .ue-photos { gap: var(--space-2) !important; }
  .out-photos { grid-template-columns: 1fr; gap: var(--space-2); }
  .amenities { grid-template-columns: 1fr; }
  .steckbrief > div { grid-template-columns: 1fr; row-gap: 2px; }
  .amenity { padding-bottom: 0; }
  .amenity summary { padding: var(--space-2) 0; }
  .amenity[open] ul { padding-bottom: var(--space-3); }
  .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; }
}
@media (prefers-reduced-motion: reduce) { .amenity .pfeil { transition: none; } }
/* Wider than a phone the groups stay open and look as before: no arrow,
   no click target (operator 22.10.2026; unterkunft.js keeps them open). */
@media (min-width: 601px) {
  .amenity .pfeil { display: none; }
  .amenity summary { cursor: default; pointer-events: none; }
}