/* ==========================================================================
   BookTo — Kurze Einfuehrung (screens/tour.js), Vorbild GazeTo-Onboarding:
   mittige Buehne, Punkte oben, Zurueck/Weiter unten an festen Plaetzen.
   ========================================================================== */
.tour { display: flex; flex-direction: column; }
.tour__skip { min-height: 64px; align-self: center; }
.tour__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tour__buehne {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tour__punkte { display: inline-flex; gap: 10px; margin-top: 4px; }
.tour__punkt {
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--color-border-strong);
  transition: width .25s ease, background .25s ease;
}
.tour__punkt.is-on { width: 34px; background: var(--color-primary-dark, var(--color-primary)); }
@media (prefers-reduced-motion: reduce) { .tour__punkt { transition: none; } }
.tour__stand {
  margin: 6px 0 8px;
  font-size: .95rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted, var(--color-text));
}
.tour__schritt { width: 100%; }
.tour__titel { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.25; margin: 0 0 8px; }
.tour__lead { font-size: 1.15rem; line-height: 1.45; margin: 0 auto 16px; max-width: 40em; }

.tour__zeilen, .tour__karten { list-style: none; margin: 0; padding: 0; text-align: start; }
.tour__zeilen { display: grid; gap: 10px; max-width: 680px; margin: 0 auto; }
.tour__zeile {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  border-radius: var(--radius-lg, 16px);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  font-size: 1.15rem; line-height: 1.4;
}
.tour__zeichen {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-alt); color: var(--color-primary-dark, var(--color-primary));
}
.tour__zeichen svg { width: 28px; height: 28px; }

.tour__karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.tour__karte {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-lg, 16px);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
}
.tour__karte-ico {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.tour__karte-ico svg { width: 30px; height: 30px; }
.tour__karte-text { display: flex; flex-direction: column; gap: 4px; font-size: 1.05rem; line-height: 1.45; }
.tour__karte-text strong { font-size: 1.2rem; }

.tour__start { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 8px; }
.tour__gross { min-height: 96px; min-width: 240px; font-size: 1.2rem; }

.tour__fuss {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.tour__nav { min-height: 80px; min-width: 200px; font-size: 1.2rem; }
.tour__nav[disabled] { opacity: .45; }
@media (max-width: 600px) {
  .tour__nav { min-width: 0; flex: 1 1 0; }
  .tour__zeile { font-size: 1.05rem; }
}

/* Startseite: „Kurze Einführung" unter den Kacheln. */
.starttour { display: flex; justify-content: center; margin: 8px 0 4px; }
.starttour .btn { min-height: 64px; }

/* ── Schritt „Sprache" (wie GazeTo: Flagge + Name als Kacheln) ── */
.tour__sprachen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
}
.tour__sprache {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px;
  padding: 8px 14px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit; font-family: var(--font-label); font-weight: 700; font-size: 1.05rem;
  text-align: start;
  cursor: pointer;
}
.tour__sprache img { width: 36px; height: 24px; flex: 0 0 auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.tour__sprache span { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.tour__sprache:hover { background: var(--color-primary-bg); }
.tour__sprache[aria-pressed="true"],
.tour__weg[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* ── Schritt „Bedienung": eine Wahl, die sofort gilt ── */
.tour__wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  text-align: start;
}
.tour__weg {
  display: flex; align-items: center; gap: 16px;
  min-height: 96px;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.tour__weg:hover { background: var(--color-primary-bg); }
.tour__weg-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; font-size: 1.05rem; line-height: 1.4; }
.tour__weg-text strong { font-size: 1.2rem; }
.tour__haken { flex: 0 0 auto; width: 32px; height: 32px; color: var(--color-primary); visibility: hidden; }
.tour__haken svg { width: 32px; height: 32px; }
.tour__weg[aria-pressed="true"] .tour__haken { visibility: visible; }

/* ── Telefon (gemessen 24.10.2026 auf 390 × 844): Neben den großen
   Rolltasten bleiben rund 240 px. Unten liefen Zurück und Weiter über,
   die Bedienwege brachen jedes Wort um, die Sprachen standen einzeln. ── */
@media (max-width: 600px) {
  .tour__buehne { padding: 8px 8px 16px; }
  .tour__fuss { flex-wrap: wrap; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .tour__fuss .tour__skip { order: 3; flex: 1 1 100%; }
  .tour__nav { flex: 1 1 0; min-width: 0; min-height: 72px; font-size: 1.1rem; padding-left: 12px; padding-right: 12px; }
  .tour__sprachen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tour__sprache { padding: 6px 8px; gap: 8px; font-size: .95rem; }
  .tour__sprache img { width: 28px; height: 19px; }
  .tour__weg { gap: 10px; padding: 10px; min-height: 88px; }
  .tour__weg .tour__zeichen { width: 40px; height: 40px; }
  .tour__weg .tour__zeichen svg { width: 22px; height: 22px; }
  .tour__haken, .tour__haken svg { width: 24px; height: 24px; }
  .tour__weg-text { font-size: .98rem; }
  .tour__weg-text strong { font-size: 1.08rem; }
}