/* ==========================================================================
   Page CSS: Umgebung (Template folgt in Paket 3)
   Extracted 1:1 from the approved draft umgebung-entwurf-1.html
   (OD-Studio-Revision 2026-10-06). Per-motif crop decisions cite the photo
   register ID (foto-index); KI-generated band photos cite gen-NNNN.
   Shared components live in components.css/sections.css; rules below
   override where this subpage intentionally diverges from the homepage.
   Section ids (#einkaufen, #ausfluege, …) double as anchor-bar targets –
   templates must keep them.
   ========================================================================== */

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

/* Wide crops 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)); }

/* Draft deviations from the shared components (extracted from startseite):
   anchor hover stays subtle (hairline) on this page, submenus are wider
   (longer category labels), ghost links are set in 1rem */
.anchor-bar a:hover { border-bottom-color: var(--color-hairline); }
.anchor-bar a.is-active:hover, .anchor-bar a[aria-current="true"]:hover { border-bottom-color: var(--color-ink); }
.sub { min-width: 260px; }
@media (max-width: 1240px) { .sub { min-width: 0; } } /* mobile nav: static list, no fixed width (components.css) */
.ghost-link { font-size: 1rem; }

/* 1 · Title band – sv-0049 (7821×3788, panorama 2.06:1): object-position
   50% 55% – horizon with hills and tree line rests in the middle third.
   Height comes from padding-top so the text zone never clips the photo. */
.hero {
  position: relative;
  height: auto;
  min-height: clamp(420px, 62vh, 720px);
  padding-top: clamp(320px, 55vh, 800px);
  overflow: hidden;
  background: var(--dark-bg);
  color: var(--dark-fg);
  display: flex;
  align-items: flex-end;
}
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(47 46 46 / 0.75) 0, rgb(47 46 46 / 0.7) 110px, rgb(47 46 46 / 0.55) 200px, rgb(47 46 46 / 0) 300px);
}
/* 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; max-width: 34em; }

/* 2 · Intro */
.intro .intro-head { grid-column: 1 / span 6; }
.intro .prose { grid-column: 8 / span 5; }

/* 3 · Filter & search – styled placeholder without function (stage 1) */
.finder { padding-block: var(--space-8); }
.finder fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.finder legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--fs-small); font-weight: 600; }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.finder .f-ukat { margin-top: var(--space-3); } /* subcategory chips (umgebung-konzept.md Nr. 23) */
.filter-chip { min-height: 44px; padding: 0 var(--space-2); border: 1px solid var(--color-hairline); border-radius: 0; background: var(--color-bg); color: var(--color-ink); font: 600 var(--fs-small)/1 var(--font-body); cursor: pointer; transition: border-color var(--ease-control); }
.filter-chip:hover { border-color: var(--color-ink); }
.filter-chip[aria-pressed="true"] { background: var(--color-ink); color: #ffffff; border-color: var(--color-ink); }
.filter-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); margin-top: var(--space-4); }
.field label { display: block; margin-bottom: 6px; font-size: var(--fs-small); font-weight: 600; }
.field select, .field input { width: 100%; min-height: 48px; padding: 0 var(--space-2); border: 1px solid var(--color-ink); border-radius: 0; background: var(--color-bg); color: var(--color-ink); font: 400 var(--fs-body)/1 var(--font-body); }
.field input::placeholder { color: var(--color-muted); }
.finder-note { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-muted); }

/* Category heads (photo bands) */
.cat-head { position: relative; height: var(--cat-head-h); overflow: hidden; background: var(--dark-bg); color: var(--dark-fg); display: flex; align-items: flex-end; margin: 0; }
.cat-head > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-head .veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--veil-ink-strong) 0, rgb(47 46 46 / 0.75) 120px, var(--veil-ink-none) 190px); }
/* Bright category photos (Einkaufen, Ausflüge): white veil only under the
   title line, dark text */
#einkaufen .cat-head, #ausfluege .cat-head { background: var(--color-bg); color: var(--color-ink); }
#einkaufen .cat-head .veil, #ausfluege .cat-head .veil { background: linear-gradient(to top, rgb(255 255 255 / 0.85) 0, rgb(255 255 255 / 0.72) 120px, rgb(255 255 255 / 0) 190px); }
#einkaufen .cat-head .eyebrow, #ausfluege .cat-head .eyebrow { color: var(--color-ink); }
.cat-head .cat-title { position: relative; z-index: 1; padding-bottom: var(--space-5); }
/* Marking for KI-generated symbolic images – subtle, bottom right
   (smartphone: top right so the headline stays clear) */
.sym-tag { position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 2; padding: 2px 8px; background: rgb(255 255 255 / 0.85); color: var(--color-ink); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.01em; }
.cat-head .eyebrow { color: #ffffff; font-weight: 600; margin-bottom: var(--space-1); }
.cat-head h2 { font-size: var(--fs-h2); }
/* Crops of the category heads */
.ph-gen-0001 { object-position: 50% 55%; } /* gen-0001 Restaurant: couple and table well above the text zone, only the table edge remains below */
.ph-gen-0002 { object-position: 50% 100%; } /* gen-0002 Markt: bottom edge flush – fruit and vegetables at the top, only floor below */
.ph-0054 { object-position: 50% 50%; } /* sv-0054 Golfplatz-Panorama 4.05:1: band narrower than the image, empty foreground lawn below */
.ph-0050 { object-position: 50% 85%; } /* sv-0050 Taiko-Bühne: heads and drums at the top, only skirts and dark stage edge below */
.ph-0008 { object-position: 50% 40%; } /* sv-0008 Dünenkamm und Sandweg above the text zone, only sand below */
.ph-gen-0003 { object-position: 50% 48%; } /* gen-0003 Lichterabend: candle rows and silhouettes above the text zone, only sand below */

/* Entry lists – hairlines carry the structure, not the photo */
.entries { padding-block: var(--space-8) var(--band-pad); }
.entry { padding-block: var(--space-5); border-top: var(--line); row-gap: var(--space-2); }
.entry:last-child { border-bottom: var(--line); }
.entry-head { grid-column: 1 / span 4; }
.entry-body { grid-column: 5 / span 6; }
.entry-aside { grid-column: 11 / span 2; justify-self: end; }
.entry h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.entry-body p + p { margin-top: var(--space-1); }
.entry-note { color: var(--color-muted); font-size: var(--fs-small); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--color-hairline); background: var(--color-bg); color: var(--color-ink); font-size: var(--fs-chip); line-height: 1.35; }
.chips.date li { font-weight: 600; }
.chip-inv { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--color-ink); color: #ffffff; font-size: var(--fs-chip); font-weight: 700; line-height: 1.35; }
.tip { margin-top: var(--space-3); padding-top: var(--space-2); border-top: var(--line); display: grid; gap: var(--space-1); justify-items: start; }
.tip p { font-style: italic; }
.more { margin-top: var(--space-3); }
.more-label { font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--space-1); }
/* Featured entry (Golf-Club Kitzeberg) */
.entry.featured { padding-block: var(--space-8); }
.entry.featured h3 { font-size: var(--fs-h3-featured); }
.entry.featured .entry-body .lead { font-size: var(--fs-lead); }
/* Entry with photo: photo right, text remains equivalent */
.entry-photo { margin: 0; width: 220px; }
.entry-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; } /* sv-0013: eagle and pedestal centered */
.entry-photo figcaption { margin-top: 6px; font-size: 0.75rem; color: var(--color-muted); line-height: 1.4; }
.entry.has-photo .entry-body { grid-column: 5 / span 5; }
.entry.has-photo .entry-aside { grid-column: 10 / span 3; }

/* 10 · Finale (contact band basics in sections.css) */
.contact .contact-head { grid-column: 1 / span 6; }
.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); }
.next-links { margin-top: var(--space-10); padding-top: var(--space-2); border-top: var(--line); display: flex; flex-wrap: wrap; column-gap: var(--space-5); }

/* Tablet */
@media (max-width: 960px) {
  .intro .intro-head, .intro .prose, .contact .contact-head { grid-column: 1 / -1; }
  .entry-head { grid-column: 1 / span 5; }
  .entry-body, .entry.has-photo .entry-body { grid-column: 6 / -1; }
  .entry-aside, .entry.has-photo .entry-aside { grid-column: 6 / -1; justify-self: start; }
  .filter-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filter-fields .field-search { grid-column: 1 / -1; }
}

/* Smartphone */
@media (max-width: 600px) {
  .hero .veil { background: linear-gradient(to top, rgb(47 46 46 / 0.8) 0, rgb(47 46 46 / 0.75) 100px, rgb(47 46 46 / 0.6) 180px, rgb(47 46 46 / 0) 260px); }
  .entry-head, .entry-body, .entry.has-photo .entry-body, .entry-aside, .entry.has-photo .entry-aside { grid-column: 1 / -1; }
  .entry.has-photo .entry-aside { grid-row: 1; } /* entry photo above the text */
  .entry-photo { width: 100%; max-width: 320px; }
  .entry.featured { padding-block: var(--space-6); }
  /* long chip rows scroll horizontally without scrolling the page sideways */
  .chips.scroll, .filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chips.scroll::-webkit-scrollbar, .filter-chips::-webkit-scrollbar { display: none; }
  .chips.scroll li, .filter-chip { flex: 0 0 auto; white-space: nowrap; }
  .filter-fields { grid-template-columns: 1fr; }
  .cat-head .cat-title { padding-bottom: var(--space-3); }
  .cat-head .veil { background: linear-gradient(to top, rgb(47 46 46 / 0.9) 0, rgb(47 46 46 / 0.78) 110px, var(--veil-ink-none) 170px); }
  #einkaufen .cat-head .veil, #ausfluege .cat-head .veil { background: linear-gradient(to top, rgb(255 255 255 / 0.9) 0, rgb(255 255 255 / 0.78) 110px, rgb(255 255 255 / 0) 170px); }
  .sym-tag { bottom: auto; top: var(--space-2); }
}

/* ==========================================================================
   P3 additions (not in the draft): live entries from the tips
   (inc/tipps.php) and the working filter (umgebung-konzept.md Nr. 17).
   ========================================================================== */
/* The filter hides entries/bands with the hidden attribute; the layout
   classes (.grid etc.) would otherwise override the UA display:none. */
.finder[hidden], .cat[hidden], .entry[hidden], .filter-chips[hidden] { display: none; }
/* Map links in the aside: stacked, aligned right like the draft's "Karte". */
.entry-aside .map-links { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); margin: 0; }
.entry.has-photo .entry-aside .map-links { align-items: flex-start; margin-top: var(--space-2); }
/* Phone, e-mail, website below the text. */
.entry-links { margin-top: var(--space-2); font-size: var(--fs-small); }
.entry-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Category without band photo: heading on white instead of on the photo. */
.cat-title-plain { padding-top: var(--space-10); padding-bottom: var(--space-3); }
@media (max-width: 960px) {
  .entry-aside .map-links { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); }
}
/* Two filter fields (no events, so no date field): place narrow, search wide. */
@media (min-width: 961px) {
  .filter-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .filter-fields:has(.field-zeit) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); }
}
/* Date filter: "from – to" side by side on every width. */
.field-zeit { border: 0; margin: 0; padding: 0; min-width: 0; }
.field-zeit legend { margin-bottom: 6px; }
.zeit-felder { display: flex; align-items: center; gap: var(--space-1); }
.zeit-felder input { flex: 1 1 0; min-width: 0; }
/* Filter status and reset button side by side. */
.finder-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.finder-foot .finder-note { margin-top: 0; }
.finder-foot .ghost-link { background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; }