/* ueber-uns v6 — Buehnenform "Inhaber-Brief", HOCHMODERN: kompakter
   typografischer Auftakt, die Fassade als groesste ruhig gerahmte Kachel,
   Zitat in Switzer-Praezision statt Zodiak-Monument, Anruf-Panel modern. */
@layer page, pageresponsive;

@layer page {
  .uu-intro { padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 80px); }
  /* v7 Konsens P10: Brief links, gerahmte Fassade fuellt die Rechtshaelfte */
  .uu-introgrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 80px); align-items: center; }
  .uu-letter { position: relative; min-width: 0; border-left: 2px solid var(--line-gold); padding-left: clamp(20px, 3.5vw, 56px); }
  .uu-intro__title { margin-top: var(--sp-4); font-size: var(--fs-cinem); max-width: 20ch; }
  .uu-letter .lead { margin-top: var(--sp-4); max-width: 52ch; }
  .uu-intro__btns { margin-top: var(--sp-5); }
  /* Unterschriftszeile: leise, praezise */
  .uu-letter__sign { margin-top: var(--sp-6); display: flex; align-items: center; gap: 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
  .uu-letter__rule { display: inline-block; width: clamp(40px, 5vw, 88px); height: 1px; background: var(--gold); }

  /* Fassaden-Buehne im Hero: Ladenfoto im Lift-Rezept (v9: Stills
     tragen ihr Grading in der Quelldatei) */
  .uu-stage { min-width: 0; }
  .uu-stage .passe__pic { aspect-ratio: 4 / 3; }
  .uu-stage .passe__pic img { width: 100%; height: 100%; object-fit: cover; }

  /* Leitsatz: Zodiak als AKZENT-Zitat (v7 Konsens P10 - das Zitat ist
     Akzentstimme, keine H2; Groesse bleibt unter dem 44px-Gate) */
  .uu-creed-sec { padding-block: clamp(56px, 7vw, 112px); border-bottom: 1px solid var(--line); }
  .uu-creed { font-family: var(--ff-display); font-weight: 480; font-size: clamp(23px, calc(13px + 1.7vw), 34px); line-height: 1.34; letter-spacing: 0; max-width: 46ch; margin-left: clamp(0px, 8vw, 160px); border-left: 2px solid var(--line-gold); padding-left: clamp(20px, 3vw, 48px); text-wrap: pretty; color: var(--ink); }
  .uu-creed__hi { color: var(--gold-deep); }

  .uu-why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
  .uu-why__head { position: sticky; top: calc(var(--topline-h) + var(--header-h) + 24px); display: grid; gap: var(--sp-5); }
  .uu-why__pic { min-width: 0; }
  .uu-why__pic .passe__pic { aspect-ratio: 4 / 3; }
  .uu-why__pic .passe__pic img { width: 100%; height: 100%; object-fit: cover; }

  /* Vier Versprechen hell (O1), Switzer-Titel; v9 (Kill-Liste P8): die
     Anlage traegt rechts eine Foto-Karte statt einer toten Spalte */
  .uu-trust-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
  .uu-trust { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .uu-trust__row { display: grid; gap: 8px; padding-block: var(--sp-4); border-bottom: 1px solid var(--line); min-width: 0; }
  .uu-trust__t { font-weight: var(--wght-head); font-size: var(--fs-h3); color: var(--ink); }
  .uu-trust__p { color: var(--ink-2); font-size: var(--fs-sm); max-width: 60ch; }
  .uu-trust__pic { min-width: 0; position: sticky; top: calc(var(--topline-h) + var(--header-h) + 24px); }
  .uu-trust__pic .passe__pic { aspect-ratio: 4 / 3; }
  .uu-trust__pic .passe__pic img { width: 100%; height: 100%; object-fit: cover; }

  .uu-why-sec.section { padding-bottom: clamp(40px, 5vw, 80px); }
  .uu-trust-sec.section { padding-block: clamp(48px, 6vw, 96px); }
  .uu-visit-sec.section { padding-block: clamp(48px, 6vw, 96px); }

  .uu-visit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
  .uu-visit .lead { margin-top: var(--sp-3); }
  .uu-visit__btns { margin-top: var(--sp-5); align-items: center; }
  /* Anruf-Panel = die EINE Platte der Seite; ueberlappt die Banderolen-Naht.
     v9: das Emblem sitzt MIT Anbindung im Panel-Kopf (Kill-Liste P4/P8) */
  .uu-call { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-plate); box-shadow: var(--shadow-plate); padding: clamp(24px, 3vw, 40px); display: grid; gap: 12px; justify-items: start; position: relative; z-index: 2; }
  .uu-call__head { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line-gold); padding-bottom: 12px; }
  .uu-call__emblem { width: 44px; height: 44px; object-fit: contain; flex: none; }
  .uu-call__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); }
  .uu-call__phone:hover { color: var(--ink); }
  /* v8 Konsens P6: die Zeiten-Zelle lief @768 ueber - schmalere
     Schluessel-Spalte + die ganze Range bricht nie */
  .uu-call .hairtable { width: 100%; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); }
  .uu-call .hairtable__v { white-space: nowrap; }
  .uu-call__addr { font-style: normal; font-size: var(--fs-sm); color: var(--ink-2); }
}

@layer pageresponsive {
  @media (min-width: 721px) {
    /* moderat: die Platte kragt in die Banderole, ohne das Schild zu decken */
    .uu-call { margin-top: calc(-1 * clamp(72px, 8vw, 120px)); }
  }
  @media (max-width: 900px) {
    /* Hero stapelt: Brief, darunter die gerahmte Fassade */
    .uu-introgrid { grid-template-columns: 1fr; gap: var(--sp-5); }
    .uu-stage { max-width: 560px; }
  }
  @media (max-width: 900px) {
    /* v9 (Kill-Liste P8): @768 laufen die Warum-Spalten einspaltig -
       die 4fr/7fr-Anlage wurde dort zu eng */
    .uu-why { grid-template-columns: 1fr; gap: var(--sp-4); }
    .uu-why__head { position: static; gap: var(--sp-4); }
    .uu-why__pic { max-width: 520px; }
    .uu-trust-wrap { grid-template-columns: 1fr; gap: var(--sp-4); }
    .uu-trust__pic { position: static; max-width: 520px; }
  }
  @media (max-width: 720px) {
    .uu-visit { grid-template-columns: 1fr; }
    .uu-creed { margin-left: 0; }
  }
  @media (max-width: 560px) {
    .uu-letter { border-left: 0; padding-left: 0; }
    .uu-letter__sign { margin-top: var(--sp-5); }
  }
}