/* wertermittlung v6 — Buehnenform "Formular als Dokument", HOCHMODERN:
   kompakter Kopf mit moderner Stat-Karte ("10 Minuten") statt
   Monumentalziffer, Formular als das EINE moderne Panel. */
@layer page, pageresponsive;

@layer page {
  .wm-hero { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(36px, 4.5vw, 64px); }
  /* v7 Konsens P4: die Stat-Karte fuellt ihre Spalte und sitzt auf der
     H1-Oberkante statt in der Spaltenmitte zu schweben */
  .wm-hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: clamp(28px, 4.5vw, 80px); align-items: start; }
  .wm-hero__lead { max-width: 860px; min-width: 0; }
  .wm-hero__h { margin-top: var(--sp-4); font-size: var(--fs-cinem); }
  .wm-hero__sub { margin-top: var(--sp-4); }
  .wm-hero__btns { margin-top: var(--sp-5); }
  /* v9: rechte Hero-Spalte = Stat-Karte + Foto-Karte (Kill-Liste P1) */
  .wm-hero__side { display: grid; gap: var(--sp-4); align-content: start; margin-top: 46px; min-width: 0; }
  .wm-hero__pic .passe__pic { aspect-ratio: 4 / 3; }
  .wm-hero__pic .passe__pic img { width: 100%; height: 100%; object-fit: cover; }
  /* Stat-Karte mit echtem Inhalt: Zeiten-Ledger + Adresse (v8 P5) */
  .wm-hero__fig { display: grid; justify-items: stretch; gap: var(--sp-3); width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-plate); box-shadow: var(--shadow-plate); padding: clamp(20px, 2.2vw, 28px); min-width: 0; }
  .wm-hero__hours { width: 100%; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); }
  .wm-hero__hours .hairtable__v { white-space: nowrap; }
  .wm-hero__note { font-size: var(--fs-sm); color: var(--ink-3); max-width: none; }

  /* Schritte: Ordinal-Liste links, Einleitung rechts */
  .wm-steps__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
  .wm-steps__intro { order: 2; }
  .wm-steps__list { order: 1; }
  .wm-steps__intro .lead { margin-top: var(--sp-3); }
  .wm-steps__promise { margin-top: var(--sp-4); display: grid; gap: 10px; }
  .wm-steps__promise li { display: flex; gap: 12px; align-items: baseline; font-size: var(--fs-sm); color: var(--ink-2); }
  .wm-steps__promise li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-2px); }
  .wm-steps__list .marginlist__item:last-child { border-bottom: 1px solid var(--line); }

  .wm-formgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
  .wm-sheet__head { margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line-gold); padding-bottom: var(--sp-4); }
  .wm-sheet__title { font-size: var(--fs-h2); }
  .wm-sheet__sub { margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--fs-sm); max-width: 52ch; }

  .wm-aside { display: grid; gap: var(--sp-5); align-content: start; }
  .wm-aside__call { display: grid; gap: 10px; justify-items: start; }
  .wm-phone { display: inline-flex; align-items: center; min-height: 48px; font-weight: var(--wght-numeral); font-size: var(--fs-num); color: var(--gold-deep); line-height: 1.1; transition: color var(--dur-q) var(--ease); }
  .wm-phone:hover { color: var(--ink); }
  .wm-aside__hours { font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .wm-aside__note { font-size: var(--fs-sm); color: var(--ink-2); }
  .wm-hints { border-top: 1px solid var(--line); padding-top: var(--sp-4); display: grid; gap: 10px; }
  .wm-hints li { display: flex; gap: 12px; align-items: baseline; font-size: var(--fs-sm); color: var(--ink-2); }
  .wm-hints li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-2px); }

  /* Buehne auf Quellbreite gecappt (kein Upscaling) */
  .wm-stage { max-width: 1100px; margin-inline: auto; }
  .wm-stage .passe__pic { aspect-ratio: 16 / 10; }
  .wm-stage .passe__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

  .wm-aside__fig { margin-top: var(--sp-3); }
  .wm-aside__fig .passe__pic { aspect-ratio: 4 / 3; }
  .wm-aside__fig .passe__pic img { width: 100%; height: 100%; object-fit: cover; }

  .wm-steps.section { padding-top: clamp(36px, 4.5vw, 72px); }

  /* v8 Konsens P5: echte Zweispaltigkeit - links Kopf + Hinweis +
     Foto-Karte, rechts das Akkordeon (faqsplit-Standard) */
  .wm-faq__fig { margin-top: var(--sp-5); max-width: 400px; }
  .wm-faq__fig .passe__pic { aspect-ratio: 4 / 3; }
  .wm-faq__fig .passe__pic img { width: 100%; height: 100%; object-fit: cover; }
  .wm-faq .faqsplit__note { max-width: 44ch; margin-top: var(--sp-3); color: var(--ink-2); }
}

@layer pageresponsive {
  @media (max-width: 980px) {
    .wm-formgrid { grid-template-columns: 1fr; }
    .wm-hero__grid { grid-template-columns: 1fr; align-items: start; }
    .wm-hero__side { justify-self: start; margin-top: 0; width: min(100%, 420px); }
    /* v10 (Kill-Liste v9 P6): Foto vor die Zeiten-Karte, damit auf 390 ein
       Bild oberhalb der Falte steht (gemessen: vorher erst bei y=1081) */
    .wm-hero__pic { order: -1; }
  }
  @media (max-width: 860px) {
    .wm-steps__grid { grid-template-columns: 1fr; }
    .wm-steps__intro { order: 1; }
    .wm-steps__list { order: 2; }
  }
  @media (max-width: 600px) {
    .wm-stage .passe__pic { aspect-ratio: 1200 / 908; }
    .wm-stage .passe__pic img { object-position: 50% 50%; }
    .wm-stage .passe__cap { margin-inline: 0; }
  }
  @media (max-width: 480px) {
    .wm-hero__btns .btn { width: 100%; }
  }
}