/* ============================================================
   components3.css — loaded AFTER style.css, animations.css,
   gate.css, components2.css (final override layer)
   Sara & Jonathan — refinements batch 3
   ============================================================ */


/* ============================================================
   1) BLOCKSATZ (justify) for running body text
   Applies to long-form paragraphs only. Headings, centered
   blocks, labels, nav and buttons stay untouched.
   ============================================================ */
.tl-body p,
.hotel-more-body p,
.hotel-card p,
#benvenuti .reveal p,
.sec-head p,
.faq details p,
.day-info p,
.contrib-box p,
.note-box p,
.nearby-card p,
.info-item p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
}

/* --- explicit exceptions: keep centered / normal, never justified --- */
.text-center p,
.hero p,
.page-hero p,
.form-note,
.cd-label,
.card p,
.team-card p{
  text-align:center;
  text-justify:auto;
  hyphens:none;
  -webkit-hyphens:none;
  -ms-hyphens:none;
}

/* --- mobile: justify creates ugly rivers of space, switch off --- */
@media(max-width:680px){
  .tl-body p,
  .hotel-card p{
    text-align:left;
    hyphens:auto;
    -webkit-hyphens:auto;
  }
}


/* ============================================================
   2) HOME HERO — bottom alignment so text never covers faces
   Desktop: content sits low, near the bottom third.
   Mobile: a little more breathing room above the footer edge.
   .page-hero is intentionally left untouched.
   ============================================================ */
.hero{justify-content:flex-end}
.hero-inner{padding-bottom:9vh}

@media(max-width:680px){
  .hero-inner{padding-bottom:12vh}
}


/* ============================================================
   3) TIMELINE — dual-image FLANK layout
   Text sits centered BETWEEN two images on desktop:
   [image] [text] [image]
   ============================================================ */
.tl-item.flank{
  grid-template-columns:1fr 1fr 1fr;
  gap:1.8rem;
  text-align:center;
  /* the row is wider than .timeline (880px). margin:auto would resolve to 0 and
     push the whole row to the right, so centre it on the timeline axis instead. */
  width:min(1080px,94vw);
  margin-left:50%;
  transform:translateX(-50%);
}
/* .tl-item:nth-child(even) .tl-body{order:1} from style.css would break the
   image-text-image order on even rows -> force symmetric placement */
.tl-item.flank .tl-body{
  order:0;
  text-align:center;
}
.tl-item.flank .tl-media{order:0}
.tl-item.flank .tl-media img{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:var(--shadow);
}
/* center timeline line/dot is not relevant across a 3-col flank row */
.tl-item.flank .tl-dot{display:none}

/* --- mobile: stack single column, image / text / image order kept --- */
@media(max-width:1040px){
  .tl-item.flank{
    grid-template-columns:1fr;
    gap:1.4rem;
    text-align:left;
    width:100%;
    margin-left:0;
    transform:none;
  }
  .tl-item.flank .tl-body{
    text-align:left;
  }
  .tl-item.flank .tl-media img{
    height:240px;
  }
}

/* .tl-item.dual rules from components2.css are untouched and still apply */


/* ============================================================
   4) RSVP DIETARY — multi-select pill checkboxes
   .diet-group wraps .diet-opt pills + a free-text .diet-other
   ============================================================ */
.diet-group{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.diet-opt{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.6rem 1rem;
  cursor:pointer;
  font-family:var(--sans);
  font-size:.85rem;
  color:var(--text);
  background:var(--cream);
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.diet-opt input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.diet-opt:has(input:checked){
  border-color:var(--gold);
  background:#fff;
  color:var(--gold-deep);
  font-weight:600;
}
.diet-opt:hover{border-color:var(--gold)}

.diet-other{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--olive-deep);
  background:var(--cream);
  transition:border .25s;
  margin-top:.6rem;
}
.diet-other:focus{
  outline:none;
  border-color:var(--gold);
}


/* ============================================================
   5) TEAM PHOTO — real <img> with icon fallback
   .team-photo holds .tp-img (covers circle) + .tp-icon (fallback,
   shown when img is missing / onerror hides it)
   ============================================================ */
.team-photo{
  position:relative;
  overflow:hidden;
}
.team-photo .tp-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  z-index:2;
}
.team-photo .tp-icon{
  position:relative;
  z-index:1;
}


/* ============================================================
   6) STAY MORE LINKS — booking.com / airbnb.com row
   ============================================================ */
.stay-more-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.5rem;
}

/* ============================================================
   Feedback 5 additions
   ============================================================ */
/* erasmus: taller media so sign + both people fit */
.tl-item.tl-tall .tl-media img{height:460px}
@media(max-width:680px){.tl-item.tl-tall .tl-media img{height:420px}}

/* Story links (e.g. Tana del Poeta) highlighted */
.tl-body a{color:var(--gold-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.tl-body a:hover{color:var(--olive-deep)}

/* Flank rows: interrupt the central timeline line behind the centered text */
.tl-item.flank .tl-body{background:var(--white);position:relative;z-index:2;padding:0 .6rem}

/* page-hero with headlines pushed to the TOP (over the heads) */
.page-hero--top{align-items:flex-start}
.page-hero--top .page-hero-inner{padding-top:3rem;padding-bottom:1rem}

/* FAQ hero on mobile: get BOTH animals (dog + cat) in frame, dog not
   clipped at the left. Photo is 1600x900 (16:9). The old fix only touched
   background-size/position and could not win: a bare background-size
   percentage scales width and derives height from the image's own aspect
   ratio (ratio-preserving, NOT "cover times that factor" - confirmed the
   hard way on the Kampanien hero, see below). On the old portrait-ish mobile
   container (min-height:54vh, e.g. ~390x456) that math forces a choice
   between (a) a narrow ~48%-of-width "cover" window - much too tight to
   hold the dog (source x0-750) AND the cat (source x970-1400), a combined
   span of ~1400px/1600px of width - or (b) a wider window that no longer
   fills the container's height, which showed up as a tiled/repeated photo
   (background-repeat defaults to repeat and nothing here ever set
   no-repeat). Rendered proof: the old 115%/30% produced exactly that repeat
   bug, plus cropped off the dog's front paws (visible native x-range was
   ~104-1495, i.e. the leftmost 104px, where the paws sit, was gone).
   Fix follows the same technique already proven on #camp-hero/#prog-hero:
   drop the container to a short/wide band via `aspect-ratio` instead of
   fighting background-size, and let plain `cover` (already the base
   .hero-bg default, no override needed) do the crop. At aspect-ratio 8/5
   the container is HEIGHT-constrained by `cover` (verified: for any width
   W, container height is W/1.6, and W/1.6/900 > W/1600 for all W here) -
   so `cover` shows the image's FULL native height (0-900, zero vertical
   crop - both the dog's paws at the bottom and the cat's ears at the top
   are automatically in) and only crops horizontally, to a visible native
   window of exactly 1440/1600 = 90% of the width. `background-position:
   left` (not center) puts that 10% crop entirely on the right, in the
   empty plant/pot area - so x0 (the dog's paws) stays pinned to the frame's
   left edge instead of being shaved off, and the cat (which ends at x1400)
   is fully inside the 1440px window with margin to spare.
   page-hero-inner's site-wide padding (144px top + 56px bottom, confirmed
   via rendered getBoundingClientRect) doesn't fit inside the new ~244px
   (390px-wide phone) band, so it's tightened here the same way #camp-hero
   and #rsvp-hero already tighten their own mobile padding - text content
   itself only needs ~76px, comfortably inside the reduced padding.
   Desktop (>680px) is completely untouched: no rule in this block applies
   above the breakpoint, so the inline background-size:cover /
   background-position:center 35% and the base .page-hero{min-height:54vh}
   keep driving desktop exactly as before. The position override still
   needs !important - the base value is an inline style attribute, which
   otherwise beats any external class/ID rule regardless of specificity. */
@media(max-width:680px){
  #faq-hero.page-hero{min-height:0;aspect-ratio:8/5}
  #faq-hero .hero-bg{background-position:left center !important}
  #faq-hero .page-hero-inner{padding:1.75rem 1.25rem 1.25rem}
}

/* Full-width banner hero (e.g. Anreise ship+Vesuv): whole image, no crop, no grey bars */
.page-hero.page-hero--banner{min-height:0;height:auto;display:grid;grid-template-rows:1fr;overflow:hidden}
.page-hero--banner>*{grid-area:1/1;min-width:0;min-height:0}
.page-hero--banner .hero-banner-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.page-hero--banner .hero-banner-ov{background:rgba(54,60,38,.42)}
.page-hero--banner .page-hero-inner{position:static;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}
/* tall banner (e.g. Kampanien): headline near the top so it is above the fold */
.page-hero--banner.page-hero--top .page-hero-inner{justify-content:flex-start;padding-top:2.2rem}

/* Kampanien hero: docks flush BELOW the fixed header (no white gap, no overlap).
   Feedback 9: zoom the image out from a tight cover-crop (background-size 115%
   on desktop) - verified geometrically (image is 1600x1200; the desktop
   container is width-constrained by its 16/9 ratio). CORRECTED after this
   round's own verification: `background-size` as a bare percentage is NOT
   "cover scaled by that factor" - it is a percentage of the CONTAINER's own
   width (height:auto, ratio-preserving). For a 4:3 photo (1600x1200) in a
   16/9-wide container, plain `cover` already needs zero extra scale (at
   reference width 1600 the image sits at native 1:1 and only needs
   TOP/BOTTOM cropping) - so `background-size:115%` does not "zoom out" at
   all, it scales the image a further 15% past cover, i.e. zooms IN. Rendered
   screenshot showed the result: an extreme close-up, and on mobile the text
   box landing directly across her chin. Reverted to plain `cover` (no
   background-size override) - that alone is already the least-cropped
   framing possible while still filling the container edge to edge; "zooming
   out" further than that is not achievable without visible gaps (that would
   just be `contain`, which is the beige-letterboxed look Feedback 9 asked to
   REMOVE from the Programm hero elsewhere in this file).
   Both heads span source rows ~60 (his hairline) to ~820 (her chin) of the
   1200px-tall photo. The original `aspect-ratio:16/9` only has room for a
   900px-tall crop window (at reference width 1600) - too short to fit both
   full heads AND a real gap below the chin for text. Widened the band to
   `aspect-ratio:16/10` (1000px window) and moved `background-position` to
   `center 25%` (crop offset 50px from the top: window = source rows 50-1050)
   - clears his hairline (60) with a small margin, and leaves 230px of clear
   torso/ruins below her chin (820) for the text box, still comfortably
   inside the 16/10 band.
   Text push-down uses the SAME bottom-anchor mechanism the RSVP hero already
   uses: align-items:flex-end pins the text box to the hero's bottom edge at
   any width (a fixed rem margin/padding does not scale with the hero's own
   height and overflowed badly at narrower desktop widths - confirmed broken
   at 1024px, do not use that approach again), plus the same scoped
   slightly-smaller font-size precedent RSVP set.
   On mobile, `aspect-ratio:3/4` makes `cover` HEIGHT-constrained instead of
   width-constrained, so the FULL image height shows automatically (zero
   vertical crop) with only a horizontal crop around centre - which is
   already where both heads sit. No background-size override needed there
   either; the previous `204%` was the same zoom-IN mistake, just recomputed
   for the other axis, and produced the exact chin-overlap seen in the
   screenshot.
   Feedback 10 asked to shorten the band further (16/9 -> 21/9 or 24/9, "so
   the page content is reached faster"). Tried 21/9 (and the fallback plain
   16/9, 900px window) first, at several `background-position` values each -
   EVERY one, verified by rendering and zooming into the actual pixels (not
   just computed geometry), put the text box across some part of her face:
   her chin sits much lower in-frame than his (she's angled closer to
   camera), so her head + a clear gap below it needs more vertical room than
   a 900px window has, regardless of crop offset - confirmed exhaustively at
   position values 0/5/15/23/27/34/35/45/55/65/75/85/90/95/100%. The ONLY
   values that clear her face push the crop so far down that his forehead/
   hair is cropped off entirely (visible in the top-of-frame check) - the
   two requirements ("shorter band" and "both full heads incl. hair
   visible") are not jointly satisfiable for this photo below a ~1000px
   window. Since the client's own priority order puts "text never overlaps
   a face" above both the exact aspect-ratio number and full-hair
   visibility (explicitly stated as "Pflicht-Kriterium, nicht Zahlenwert"
   for the analogous Kampanien text-padding question), kept `aspect-ratio:
   16/9` (still meaningfully shorter than the previous 16/10 - real,
   visible reduction in scroll distance) and moved `background-position` to
   `center 90%` - the crop trades his hairline/forehead (cropped) for a
   clean, comfortably-clear gap between her chin and the text at every
   width verified (1024/1440/1728px, DE+IT). If full hair visibility for
   him is later found to matter more than the shorter band, revert to
   16/10 + center 25% (the prior, fully-verified Feedback 9 state). */
#camp-hero.page-hero{min-height:0;aspect-ratio:16/9;margin-top:var(--header-h,6.6rem)}
#camp-hero.page-hero--top{align-items:flex-end}
#camp-hero .hero-bg{background-position:center 90% !important}
#camp-hero .page-hero-inner{padding-top:0;padding-bottom:1.6rem}
#camp-hero .page-hero-inner h1{font-size:clamp(1.9rem,4.6vw,2.9rem)}
#camp-hero .page-hero-inner .script{font-size:clamp(1.4rem,2.9vw,2rem)}
@media(max-width:680px){
  #camp-hero.page-hero{aspect-ratio:3/4}
  #camp-hero .hero-bg{background-position:center center !important}
  #camp-hero .page-hero-inner{padding-bottom:1.6rem}
}

/* Storia + Team heroes: brighten the shared dark overlay a bit for these two
   pages only (scoped by id, not the global .page-hero .hero-bg::after rule
   which every other sub-page hero still uses). */
#story-hero .hero-bg::after{background:rgba(54,60,38,.3)}
#team-hero .hero-bg::after{background:rgba(54,60,38,.3)}

/* ============================================================
   Feedback 6
   ============================================================ */
/* HOME hero: split text — "Wir heiraten/Ci sposiamo" above the heads,
   names + date below, faces stay clear (mobile + desktop). Creme text, gold accents. */
.hero.hero--split{display:block}
.hero--split .hero-top{position:absolute;z-index:3;left:0;right:0;text-align:center;top:calc(var(--header-h,90px) + 3vh)}
.hero--split .hero-bottom{position:absolute;z-index:3;left:0;right:0;text-align:center;bottom:5vh}
.hero--split .eyebrow{color:#f2ead9;text-shadow:0 2px 14px rgba(0,0,0,.55);margin:0}
.hero--split h1{color:#f2ead9;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.hero--split .hero-meta{color:#f2ead9;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero--split .amp{color:var(--gold)}
.hero--split .hero-meta .dot{color:var(--gold)}
/* scrim: darken top + bottom (readable creme), keep the middle face band clear */
.hero--split .hero-bg::after{background:linear-gradient(to bottom,rgba(0,0,0,.44) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.58) 100%)}
@media(max-width:680px){
  .hero--split .hero-top{top:calc(var(--header-h,80px) + 5vh)}
  .hero--split .hero-bottom{bottom:7vh}
}

/* PROGRAMM hero: wide band. Originally "contain" (whole alley visible with a
   light beige frame) - superseded by Feedback 9 below, which switches this
   to "cover" edge-to-edge on all sizes. Aspect ratios kept as-is. */
#prog-hero.page-hero{min-height:0;aspect-ratio:16/7}
#prog-hero .hero-bg::after{background:rgba(54,60,38,.2)}
#prog-hero .page-hero-inner .script,#prog-hero .page-hero-inner h1{text-shadow:0 2px 16px rgba(0,0,0,.6)}
@media(max-width:680px){#prog-hero.page-hero{aspect-ratio:4/3}}

/* RSVP hero: (superseded by Feedback 7/8 below - the headline moved from the
   top to the bottom of the hero. Text-shadow kept, top-padding rules dropped.)
   Feedback 9: strengthened further below (now the only contrast device once
   the green blur-box background is removed) - this base value is superseded
   by the later, stronger rule; kept here only so cascade order stays clear. */
#rsvp-hero .page-hero-inner .script,#rsvp-hero .page-hero-inner h1{text-shadow:0 2px 12px rgba(0,0,0,.5)}

/* ============================================================
   Feedback 7
   ============================================================ */
/* PROGRAMM hero: no beige frame around the title image. Was mobile-only
   (@media max-width:680px) fixing the "contain" beige-letterbox look on
   small screens; now unconditional per Feedback 9 (client wants edge-to-edge
   cover on ALL sizes, not just mobile), so the media-query scoping that used
   to matter here is gone - this single rule now covers every viewport. */
#prog-hero .hero-bg{background-size:cover !important;background-color:transparent !important}

/* ANREISE banner: a bit taller (vertical breathing room) with a beige frame.
   The image is now cropped (object-fit:cover) to guarantee it always fills
   this box edge-to-edge (zero beige strip) - `height` is set equal to
   `min-height` (not just min-height alone) because the image's height:100%
   rule needs a DEFINITE container height to resolve against; min-height on
   its own leaves the container's height as "auto", which a percentage
   height cannot size against (classic CSS percentage-height-in-auto-height
   parent problem). Border-box sizing means the existing padding-top (fixed
   header offset, below) is already included in this height, not added on
   top of it. */
#anreise-hero.page-hero--banner{background-color:var(--beige);align-items:center;min-height:34vh;height:34vh}
#anreise-hero .hero-banner-ov{display:none}
#anreise-hero .page-hero-inner .script,
#anreise-hero .page-hero-inner h1{text-shadow:0 2px 16px rgba(0,0,0,.65),0 0 30px rgba(0,0,0,.45)}
/* ============================================================
   Feedback 9
   ============================================================ */
/* ANREISE banner, MOBILE ONLY: the image was width:100%/height:auto (full
   natural height, however tall that makes the hero). Client wants a fixed,
   shorter band here on phones. Image fills the container edge-to-edge via the
   shared `.page-hero--banner .hero-banner-img{width:100%;height:100%;
   object-fit:cover}` rule above; `height` must equal `min-height` here too
   (same reasoning as the desktop rule) so that percentage still resolves.
   Single mobile height/min-height pair (32vh, was 22vh pre-Feedback-9/34vh
   desktop) controls the band here; keep both in sync if this ever changes. */
@media(max-width:680px){
  #anreise-hero.page-hero--banner{min-height:32vh;height:32vh}
  #anreise-hero .hero-banner-img{object-position:center}
  /* Smaller, less dominant headline/script on the shorter mobile band.
     Base sizes (style.css): h1 clamp(2.4rem,6vw,4rem), .script
     clamp(1.8rem,4vw,2.8rem) - global, so scoped one-step-down overrides here
     instead of touching those (they drive every other page-hero too). */
  #anreise-hero .page-hero-inner h1{font-size:clamp(2rem,5vw,3.2rem)}
  #anreise-hero .page-hero-inner .script{font-size:clamp(1.5rem,3.5vw,2.2rem);opacity:.85}
}

/* RSVP hero: headline BELOW the faces. (Feedback 9: the darker-beige/green
   blur-box background this comment used to describe is removed below - text
   now sits directly on the photo, carried by the strengthened text-shadow
   instead. padding-right/left and the bottom-spacing pieces this rule still
   controls are left in place; the Feedback 8 block right after this one is
   the single source of truth for padding-top/bottom and margin-bottom, so
   both are zeroed here to avoid two rules fighting over the same box.) */
#rsvp-hero.page-hero{align-items:flex-end}
#rsvp-hero .page-hero-inner{
  padding:1.1rem 2rem 1.2rem;
  margin-bottom:0;
  background:none;
  border-radius:3px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@media(max-width:680px){
  #rsvp-hero .page-hero-inner{padding:.9rem 1.1rem 1rem;margin-bottom:0}
}

/* HOTEL CARDS (Feedback 7 order): prominent maps/web links, distance, price, then details */
.hotel-links{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin:.4rem 0 .7rem}
.hotel-link--maps,.hotel-link--web{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .95rem;
  border:1px solid var(--gold);
  border-radius:2px;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-deep);
  text-decoration:none;
  transition:background .25s ease,color .25s ease;
}
.hotel-link--maps{background:var(--gold);color:#fff;border-color:var(--gold)}
.hotel-link--maps:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.hotel-link--web:hover{background:var(--gold);color:#fff}
.hotel-card .hotel-dist{display:block;margin:.2rem 0 .35rem}

/* components2.css injected an extra 'Mehr Infos ' via ::before, which produced
   "Mehr Infos Piu info" on the italian cards. The summary now carries the
   correct label per language, so drop the injected text. */
.hotel-more summary::before{content:none}
.hotel-more summary span{display:inline}

/* ============================================================
   Feedback 8
   ============================================================ */
/* ANREISE banner: on mobile, the forced 34vh min-height leaves a large empty
   beige gap below the image (image is width:100%/height:auto and rarely
   reaches 34vh on narrow phones). Let the box hug the image's natural height.
   That alone still left a residual gap: the generic `section{padding:6rem 0}`
   / mobile `4.2rem 0` rule (style.css) still applies to this element (it's
   the <section> itself), padding the beige box top+bottom around the image
   even with min-height:0. The BOTTOM half of that padding is pure waste (the
   banner is meant to be a flush strip, the section after it has its own
   spacing) - drop it. The TOP half, though, is load-bearing: `.site-header`
   is `position:fixed`, so it does not push this section down in normal
   flow - that top padding was the only thing clearing the fixed header. Swap
   it for an explicit header-height offset instead of removing it outright,
   same pattern as `#camp-hero`/`#rsvp-hero` elsewhere in this file. */
#anreise-hero.page-hero--banner{padding-top:var(--header-h,90px);padding-bottom:0}
@media(max-width:680px){
  #anreise-hero.page-hero--banner{padding-top:var(--header-h,80px);min-height:0}
}

/* RSVP hero: the photo is 1600x1200 (4:3), heads sit roughly 46-66% down the
   frame. The old approach used the base `.page-hero{min-height:54vh}` (a
   viewport-HEIGHT length) together with full viewport WIDTH and a fixed
   `background-position` percentage. That combination is not just "a crop" -
   the container's own aspect ratio (width/54vh) changes with the viewport's
   own aspect ratio, so a percentage tuned to look right on one monitor
   (e.g. 1440x900) puts the crop somewhere else entirely on a wider/shorter
   window (confirmed: fine at 1440px, faces covered at ~1728px). Fixing the
   container to an explicit `aspect-ratio` instead makes width and height
   scale together, so the crop is IDENTICAL in relative terms at every
   viewport width - this is the same pattern `#prog-hero`/`#camp-hero`
   already use above, just not one this hero had.
   Desktop bandratio 12/5: at native image width 1600 that shows image rows
   400-1067 (of 1200) - mountain down to mid-torso, heads (555-790) centered
   in the top half with the bottom ~35% of the band free for the text box.
   Mobile ratio 3/4 (portrait band): cover ends up width-constrained instead
   of height-constrained, so the FULL image height shows (just horizontally
   cropped around centre, which is where the couple already stand) - heads
   and the box both have all the room they need. */
/* Feedback 10: found a real bug while re-verifying at 768px (a width never
   tested in the round above, which only covered 390-700 and 1200+) - his
   chin sat right under "Bist du am Start?". Root cause: aspect-ratio:12/5
   makes hero height = width/2.4, so at 1440px the hero is 600px tall but at
   768px it's only 320px - the text box's own height barely shrinks (its
   font-size clamps bottom out well before 768px), so it eats a much bigger
   FRACTION of a short hero and collides with the (also-shrunk-less-than-
   the-hero) faces. Fixed by flooring the height with min-height:420px so
   the 681-~1000px range gets a taller-than-pure-aspect-ratio band (verified
   at 768/900/1024px alongside 1440/1728px - the min-height is a no-op above
   ~1010px since aspect-ratio already exceeds it there). background-position
   moved from 75% to 85% at the same time - 75% was already producing a
   near-zero margin at 1440 once the actual text-box height (after Feedback
   9's font-size/shadow rules) is accounted for; 85% restores real clearance
   at every width re-tested. */
#rsvp-hero.page-hero{aspect-ratio:12/5;min-height:420px}
#rsvp-hero .hero-bg{background-position:center 85% !important}
#rsvp-hero.page-hero--top{align-items:flex-end}
#rsvp-hero .page-hero-inner{padding-top:0;padding-bottom:2.4rem;margin-bottom:0}
/* Feedback 9: smaller headline (the big base sizes were partly there to stay
   legible over the green box; a plain photo backdrop reads better with less
   bulk) and a stronger shadow to replace the contrast the box used to give -
   deliberately does NOT touch aspect-ratio/background-position/padding-top
   above, which is the verified face-clearance fix from the previous round. */
#rsvp-hero .page-hero-inner h1{font-size:clamp(2rem,5vw,3.5rem)}
#rsvp-hero .page-hero-inner .script{font-size:clamp(1.5rem,3.5vw,2.4rem)}
#rsvp-hero .page-hero-inner .script,
#rsvp-hero .page-hero-inner h1{text-shadow:0 2px 16px rgba(0,0,0,.65)}
@media(max-width:680px){
  #rsvp-hero.page-hero{aspect-ratio:3/4}
  #rsvp-hero .hero-bg{background-position:center center !important}
  #rsvp-hero .page-hero-inner{padding-bottom:1.6rem;margin-bottom:0}
}

/* PROGRAMM day-info paragraphs: style.css sets margin-bottom:0 on these,
   so multi-sentence entries (e.g. "Work in progress", "Treffpunkt") run
   together with no visible break. Give them the same clear paragraph
   separation "Unsere Geschichte" gets from the untouched global default. */
.day-info p{margin-bottom:.85rem}
.day-info p:last-child{margin-bottom:0}