/* ==========================================================================
   realonaut.com – Ankündigung REALONAUT 360 (/360/)
   Nur auf dieser Seite geladen (inc/setup.php). Setzt tokens, komponenten,
   startseite und unterseiten voraus; der Hero nutzt das Ausschnitt-Feld der
   Startseite (.hero-field, .notch), darin statt der Punkte ein drehbares Panorama.
   ========================================================================== */

/* ---------- 01b Namen: Zusatz „u. v. m.“ leiser ---------- */
.names .names-mehr { font-weight: 400; color: var(--ink-muted); }

/* ---------- 01 Hero: Panorama im Feld ---------- */
.pano { background: var(--surface-2); }
.pano-still,
.pano canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pano-still { object-fit: cover; }
.pano canvas { opacity: 0; transition: opacity 600ms var(--ease); cursor: grab; touch-action: pan-y; outline: none; }
.pano canvas:active { cursor: grabbing; }
.pano.is-live canvas { opacity: 1; }
.pano canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); }
.pano-hint {
  position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px);
  margin: 0; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-size: var(--fs-small); font-weight: 600;
  pointer-events: none; opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.pano.is-live .pano-hint { opacity: 1; }
.pano.is-used .pano-hint { opacity: 0; }
.hero-360 .notch-br { width: min(460px, 40%); }
@media (max-width: 900px) {
  .hero-360 .field-art { height: clamp(300px, 88vw, 460px); }
  .hero-360 .notch-br { width: auto; }
}

/* ---------- 02 Weniger: Überschrift links oben, Text versetzt rechts darunter ---------- */
.less { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) clamp(24px, 3vw, 48px); }
.less .h2 { grid-column: 1 / span 9; max-width: 18ch; }
.less-copy { grid-column: 6 / -1; display: grid; gap: var(--sp-4); max-width: 58ch; }
.less-copy p:not(.lead) { color: var(--ink-muted); }
@media (max-width: 900px) { .less .h2, .less-copy { grid-column: 1 / -1; } }

/* ---------- 03 Drei Schritte mit Screenshot ---------- */
.steps360 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) clamp(24px, 3vw, 48px); }
.steps360 li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); align-content: start; }
.steps360 .shot360 { grid-column: 1 / -1; margin-bottom: var(--sp-3); }
.steps360 .n { grid-row: span 2; font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 0.9; }
.steps360 p { color: var(--ink-muted); max-width: 40ch; }
.steps360 .todo { grid-column: 1 / -1; }
@media (max-width: 900px) { .steps360 { grid-template-columns: 1fr; } }

/* Screenshot der Plattform: flach, mit feiner Kante wie die Projekt-Screenshots */
.shot360 { margin: 0; display: grid; gap: var(--sp-2); }
.shot360 img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; display: block; border-radius: var(--r-media); background: var(--surface); box-shadow: 0 0 0 var(--stroke) var(--line-soft); }
.shot360 figcaption { font-size: var(--fs-caption); color: var(--ink-muted); }

/* ---------- 04 Funktionen: Raster mit unterschiedlich großen Feldern ---------- */
.fn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3); }
.fn { grid-column: span 4; background: var(--surface); border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--sp-5); align-content: space-between; }
.fn-text { display: grid; gap: var(--sp-3); }
.fn-text p { color: var(--ink-muted); max-width: 44ch; }
.fn .h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); max-width: 16ch; }
.fn .fine { font-size: var(--fs-small); }
.fn-wide { grid-column: span 8; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
.fn-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fn-flip .fn-text { order: 2; }
.fn-tall { grid-row: span 2; }
.fn-tall .shot360 img { aspect-ratio: 4 / 5; }
.fn-ink { background: var(--inverse); color: var(--on-inverse); }
.fn-ink .fn-text p { color: var(--on-inverse); opacity: 0.8; }
.fn-ink .shot360 img { box-shadow: none; }
.fn-figure { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 1.6rem + 2.8vw, 4.5rem); white-space: nowrap; line-height: 1; letter-spacing: var(--display-tracking); align-self: center; }
.fn-figure span { display: block; color: var(--accent); background: none; }
.fn-ember { background: var(--accent); color: var(--on-accent); }
.fn-ember .fn-text p { color: var(--on-accent); }
.fn .todo { align-self: end; }
@media (max-width: 1100px) { .fn-wide { grid-template-columns: 1fr; } .fn-flip .fn-text { order: 0; } }
@media (max-width: 900px) {
  .fn, .fn-wide { grid-column: span 6; }
  .fn-wide, .fn-tall { grid-column: 1 / -1; }
  .fn-tall { grid-row: auto; }
  .fn-tall .shot360 img { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) { .fn { grid-column: 1 / -1; } }

/* ---------- 06 Kamera (oranger Block) ---------- */
.camera .h2 { max-width: 14ch; }
.camera .punkt-list { font-size: var(--fs-lead); line-height: 1.45; gap: var(--sp-3); }

/* ---------- 07 Bestandskunden ---------- */
.namecard.bestand { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.namecard.bestand .h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem); max-width: 16ch; }
.namecard.bestand p { margin-top: 0; }
@media (max-width: 700px) { .namecard.bestand { grid-template-columns: 1fr; } }