/* Fairhours – geführter Rundgang auf /demo (Bedienung: assets/rundgang.js). Je Schritt ein echtes Bildschirmfoto der Demo
   (bausteine.js bildschirmfoto, Bilder in assets/bilder/, hell und dunkel). Oben Schritt-Text und Schrittliste, darunter die
   Bühne über die volle Breite: Breite Aufnahmen brauchen etwa 70 % ihrer Breite, sonst ist die Schrift darin zu klein.
   Handy-Aufnahme und schmales Formular stehen in der Mitte. Ohne Skript stehen alle Bilder und Texte untereinander. */

.rundgang { display: grid; gap: clamp(24px, 3vw, 36px) 48px; grid-template-areas: "text" "buehne" "liste"; }
.rundgang-text { grid-area: text; display: flex; flex-direction: column; gap: 20px; }
.rundgang-buehne { grid-area: buehne; }
.rg-liste { grid-area: liste; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .rundgang { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-areas: "text liste" "buehne buehne"; align-items: start; }
}

.h3-rundgang { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
.rg-zaehler { font-size: 15px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.rg-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.rg-knopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px;
  border: 2px solid var(--ink); font-size: 16px; font-weight: 700;
}
.rg-knopf-voll { border-color: var(--pt); background: var(--pt); color: var(--on-pt); }
.rg-knopf:disabled { opacity: .45; cursor: default; border-color: var(--line); background: none; color: var(--ink); }
.rg-schritt {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px;
  text-align: left; font-size: 16px; font-weight: 700; color: var(--ink2);
}
.rg-schritt:hover { color: var(--ink); }
.rg-schritt[aria-current="step"] { background: var(--sf); color: var(--ink); box-shadow: inset 3px 0 0 var(--ac); }
.rg-n { font-family: var(--fd); font-weight: 800; width: 22px; flex: none; }
.rg-d { margin: 0 0 8px 48px; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.ist-rundgang .rg-d { display: none; }

/* Bühne: dunkle Fläche, das Bildschirmfoto so groß wie aufgenommen, kleiner wenn der Platz fehlt */
.rundgang-buehne {
  display: flex; flex-direction: column; gap: 32px;
  padding: clamp(14px, 2.5vw, 32px); border-radius: 12px; background: var(--deep);
}
.rundgang-schirm { width: 100%; animation: fhIn .35s var(--ez) both; }
.rundgang-schirm .bildschirmfoto { margin: 0 auto; }
.rundgang-schirm .bildschirmfoto picture { display: block; }
.rundgang-schirm .bildschirmfoto img { margin: 0 auto; }
.rundgang-schirm-breit .bildschirmfoto { max-width: 100%; }
.rundgang-schirm-handy .bildschirmfoto { max-width: 300px; }
.rundgang-schirm-schmal .bildschirmfoto { max-width: 470px; }
@media (max-width: 599px) {
  .rundgang-schirm-handy .bildschirmfoto { max-width: 250px; }
}
@media (prefers-reduced-motion: reduce) { .rundgang-schirm { animation: none; } }