/* city v9 — Buehnenform "Wegmarke": km-Stat-Karte + Fassaden-Foto-Karte
   im Hero (Kill-Liste P1: kein bildloser Formel-Hero), laden-front als
   angeschnittene Buehne ohne Schild-Beschnitt, Orts-Prosa in 64ch. */
@layer page, pageresponsive;

@layer page {
  .cy-hero { padding-top: clamp(40px, 5vw, 80px); overflow-x: clip; }
  /* v11 (Konsens beider Gutachten): die linke Spalte war zu 66% leer -
     232px Loch zwischen Lead und Buttons plus 187px darunter, above the fold.
     Die CTA-Zeile ankert jetzt am Spaltenfuss, die Lede-Zeile traegt eine
     Wegmarken-Fusszeile - Bodengap 0 statt 187px. */
  .cy-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "lede side" "cta side"; grid-template-rows: auto 1fr; gap: clamp(20px, 3vw, 48px) clamp(28px, 4.5vw, 96px); align-items: start; }
  .cy-hero__lede { grid-area: lede; min-width: 0; }
  .cy-hero__cta { grid-area: cta; align-self: end; }
  .cy-hero__facts { margin-top: var(--sp-5); width: min(100%, 520px); grid-template-columns: minmax(104px, max-content) minmax(0, 1fr); }
  .cy-hero__facts .hairtable__v { white-space: nowrap; }
  .cy-hero__foot { margin-top: var(--sp-4); padding-top: 14px; border-top: 1px solid var(--line-gold); font-size: var(--fs-cap); font-weight: 650; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
  .cy-hero__h { margin-top: var(--sp-4); font-size: var(--fs-cinem); }
  .cy-hero__sub { margin-top: var(--sp-4); }

  /* v9: rechte Hero-Spalte = Stat-Karte + gerahmtes Ziel-Foto (Kill P1) */
  .cy-hero__side { grid-area: side; display: grid; gap: var(--sp-4); align-content: start; justify-self: end; width: min(100%, 340px); min-width: 0; }
  .cy-hero__fig .passe__pic { aspect-ratio: 4 / 3; }
  .cy-hero__fig .passe__pic img { width: 100%; height: 100%; object-fit: cover; }

  /* km als ehrlicher lokaler USP - moderne Stat-Karte */
  .cy-dist { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-plate); box-shadow: var(--shadow-plate); padding: clamp(20px, 2.4vw, 32px); min-width: 0; }
  .cy-dist__lab { display: block; font-size: var(--fs-cap); font-weight: 650; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
  .cy-dist__fig { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; }
  .cy-dist__num { font-family: var(--ff-display); font-weight: var(--wght-numeral); font-variant-numeric: tabular-nums; font-size: clamp(36px, 3.4vw, 44px); line-height: 1; color: var(--gold-deep); }
  .cy-dist__unit { font-family: var(--ff-display); font-weight: var(--wght-numeral); font-size: clamp(17px, 1.5vw, 21px); color: var(--gold-deep); }
  .cy-dist__addr { display: block; margin-top: 14px; border-top: 1px solid var(--line-gold); padding-top: 12px; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  /* v8 P10: Zeiten-Ledger fuellt die Karte mit echtem Inhalt (ENV) */
  .cy-dist__hours { margin-top: 12px; border-top: 1px solid var(--line); }
  .cy-dist__hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); min-width: 0; }
  .cy-dist__hours > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .cy-dist__hours dt { font-size: var(--fs-cap); font-weight: 650; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
  .cy-dist__hours dd { font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

  .cy-catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 72px); border-top: 1px solid var(--line); }
  .cy-buys__note { margin-top: var(--sp-5); color: var(--ink-2); max-width: 72ch; }
  .cy-buys__note a { color: var(--gold-deep); font-weight: 600; }
  .cy-buys__note a:hover { color: var(--ink); }

  /* Ziel der Fahrt: Foto links angeschnitten bis zur Viewport-Kante.
     v9: hoehere Buehne (~3:2 statt ~16:9) -> das Schild "LAHN-DILL
     GOLDANKAUF HAIGER" verliert keine Buchstaben mehr (Kill-Liste P6),
     und die Caption fluchtet per Subgrid exakt auf der Content-Kante
     x=136 statt am Viewport-Gutter x=56 (Kill-Liste P7). */
  .cy-place.section { padding-block: 0; }
  .cy-place .cy-place__grid { align-items: stretch; }
  .cy-place__shot { display: grid; grid-template-columns: subgrid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
  .cy-place__pic { grid-column: 1 / -1; display: block; overflow: hidden; min-height: clamp(300px, 34vw, 520px); border-right: 1px solid var(--line-gold); }
  .cy-place__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; transition: transform var(--dur) var(--ease); }
  .cy-place__shot:hover .cy-place__pic img { transform: scale(1.03); }
  .cy-place__cap { grid-column: 2; margin: 12px 0; }
  .cy-place__txt { padding-block: clamp(36px, 5vw, 80px); padding-left: clamp(24px, 3.5vw, 72px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  .cy-place__h { font-size: var(--fs-h2); }
  .cy-place__txt p { margin-top: var(--sp-3); color: var(--ink-2); }
  .cy-place__cta { margin-top: var(--sp-5); }

  /* Orts-Absatz: Champagne-Zaesur, zweispaltige Hairline-Prosa.
     v9 (Kill-Liste P2): Messweite 62-66ch statt 82-86 CPL - die Spalten
     cappen auf 64ch und zentrieren die Anlage; Ordinale gliedern die Wand. */
  .cy-local { background: var(--champagne) url('/img/grain.svg'); background-size: 220px 220px; border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); }
  .cy-local .cap { color: var(--ink-2); }
  .cy-local__text { display: grid; grid-template-columns: repeat(2, minmax(0, 64ch)); justify-content: start; gap: 0 clamp(36px, 5vw, 88px); border-top: 1px solid var(--line-gold); }
  .cy-local__para { min-width: 0; padding-block: var(--sp-4); border-bottom: 1px solid var(--line-gold); }
  .cy-local__para p { color: var(--ink-2); max-width: 64ch; }
  .cy-local__para a { color: var(--gold-deep); font-weight: 600; }
  /* Ungerade Absatzzahl: die letzte Zelle traegt eine Foto-Karte statt
     leer zu bleiben (Kill-Liste P4: Leerflaechen aktiv fuellen) */
  .cy-local__fig { padding-block: var(--sp-4); border-bottom: 1px solid var(--line-gold); min-width: 0; }
  .cy-local__fig .passe__pic { aspect-ratio: 16 / 9; }
  .cy-local__fig .passe__pic img { width: 100%; height: 100%; object-fit: cover; }

  /* Nachbarorte + Ratgeber: eine zweispaltige Anlage */
  .cy-near__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); border-top: 1px solid var(--line); padding-top: var(--sp-5); align-items: start; }
  .cy-near__h { font-size: var(--fs-h3); margin-top: var(--sp-3); }
  .cy-near__list { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
  .cy-near__list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line-gold); padding-block: 10px; min-height: 44px; transition: color var(--dur-q) var(--ease); }
  .cy-near__list a::after { content: "\2192"; color: var(--gold-deep); transition: transform var(--dur-q) var(--ease); }
  .cy-near__list a:hover { color: var(--gold-deep); }
  .cy-near__list a:hover::after { transform: translateX(4px); }
  .cy-near__col:last-child .cy-near__list { grid-template-columns: minmax(0, 1fr); }
}

@layer pageresponsive {
  @media (min-width: 1200px) {
    .cy-place__h { hyphens: none; }
  }
  @media (max-width: 900px) {
    .cy-near__cols { grid-template-columns: 1fr; gap: var(--sp-5); }
    .cy-buys__note a, .cy-local__para a { padding-block: 12px; }
  }
  @media (max-width: 860px) {
    .cy-catgrid { grid-template-columns: 1fr; }
    .cy-local__text { grid-template-columns: 1fr; }
    .cy-place .cy-place__grid { grid-template-columns: 1fr; }
    .cy-place__shot { grid-column: 1; display: flex; flex-direction: column; }
    /* 3:2 entspricht fast dem nativen 1500x985 - kein Schild-Beschnitt */
    .cy-place__pic { min-height: 0; flex: none; border-right: 0; aspect-ratio: 3 / 2; }
    .cy-place__pic img { object-position: 50% 50%; }
    .cy-place__txt { grid-column: 1; padding-inline: var(--gutter); padding-block: clamp(24px, 5vw, 40px) clamp(28px, 6vw, 48px); }
    .cy-place__cap { margin: 12px 0 12px var(--gutter); }
  }
  @media (max-width: 640px) {
    /* Stat-Karte + Ziel-Foto bleiben ueber der Falte und VOR den CTAs -
       das erste Foto kommt @390 frueh statt bei y~2582 (Kill-Liste P6) */
    .cy-hero__grid { grid-template-columns: 1fr; grid-template-areas: "lede" "side" "cta"; }
    .cy-hero__side { justify-self: start; width: 100%; max-width: 420px; }
    /* Einspaltig ist die Fusszeile eine Dublette der Entfernungs-Karte direkt
       darunter - und sie schob das erste Foto auf y=838 an die Falte (844). */
    .cy-hero__foot { display: none; }
    .cy-hero__facts { width: 100%; }
  }
  @media (max-width: 900px) {
    /* v9 (Kill-Liste P6): gestapelte CTAs auf EINER Breite - die Spalte
       wird zwischen 600-900 so schmal, dass die Buttons ungleich stapelten */
    .cy-hero__cta .btn, .cy-place__cta .btn { width: 100%; }
  }
  @media (max-width: 560px) {
    .cy-near__list { grid-template-columns: minmax(0, 1fr); }
  }
}