/* ===========================================================================
   Aussehen der geführten Rundgänge
   ===========================================================================
   Überschreibt driver.css so, dass die Sprechblase eine ganz normale Karte
   des Portals ist: dieselben Farbmerkmale, dieselben Schriften, derselbe
   Radius. Kein einziger Wert wird hier neu erfunden.

   Alle Größen hängen an --schrift-skalierung. Ohne das bliebe ausgerechnet
   die Hilfe klein, wenn jemand "Große Schrift" einschaltet.
   ======================================================================== */

.driver-popover.kiefer-tour {
  background: var(--farbe-karte);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-flaeche-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px 20px 16px;
  max-width: 340px;
  font-family: var(--font-text);
}

.driver-popover.kiefer-tour .driver-popover-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(16px * var(--schrift-skalierung, 1));
  line-height: 1.3;
  color: var(--farbe-text);
  margin-bottom: 6px;
}

.driver-popover.kiefer-tour .driver-popover-description {
  font-size: calc(14px * var(--schrift-skalierung, 1));
  line-height: 1.55;
  color: var(--farbe-text-gedaempft);
  margin-bottom: 14px;
}

/* Der Pfeil muss die Farbe der Karte tragen, sonst steht ein weißes Dreieck
   an einem papierfarbenen Kasten. */
.driver-popover.kiefer-tour .driver-popover-arrow-side-left   { border-left-color:   var(--farbe-karte); }
.driver-popover.kiefer-tour .driver-popover-arrow-side-right  { border-right-color:  var(--farbe-karte); }
.driver-popover.kiefer-tour .driver-popover-arrow-side-top    { border-top-color:    var(--farbe-karte); }
.driver-popover.kiefer-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--farbe-karte); }

.driver-popover.kiefer-tour .driver-popover-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.driver-popover.kiefer-tour .driver-popover-progress-text {
  font-size: calc(12px * var(--schrift-skalierung, 1));
  color: var(--farbe-text-gedaempft);
  font-variant-numeric: tabular-nums;
}

/* Die Schaltflächen sind die des Portals -- driver.js bringt eigene mit,
   die hier vollständig übergangen werden. */
.driver-popover.kiefer-tour .driver-popover-navigation-btns { gap: 8px; }
.driver-popover.kiefer-tour button {
  font-family: var(--font-text);
  font-size: calc(13.5px * var(--schrift-skalierung, 1));
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-klein);
  border: 0;
  text-shadow: none;
  background: var(--farbe-aktion);
  color: var(--farbe-karte);
  cursor: pointer;
}
.driver-popover.kiefer-tour button:hover { background: var(--farbe-aktion-hover); }
.driver-popover.kiefer-tour .driver-popover-prev-btn {
  background: transparent;
  color: var(--farbe-akzent);
  border: 1px solid var(--farbe-flaeche-rand);
}
.driver-popover.kiefer-tour .driver-popover-prev-btn:hover { background: var(--farbe-flaeche); }
.driver-popover.kiefer-tour button:focus-visible {
  outline: 2px solid var(--farbe-fokus);
  outline-offset: 2px;
}
.driver-popover.kiefer-tour .driver-popover-close-btn {
  background: transparent;
  color: var(--farbe-text-gedaempft);
  font-size: calc(20px * var(--schrift-skalierung, 1));
  padding: 4px 8px;
}

/* --- Der Einstieg im Hilfefenster ---------------------------------------- */
.tour-starten {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--farbe-akzent);
  border-radius: var(--radius-klein);
  background: var(--farbe-akzent-sanft);
  color: var(--farbe-text);
  cursor: pointer;
  font-family: var(--font-text);
}
.tour-starten:hover { background: var(--farbe-akzent-sanft); border-color: var(--farbe-akzent-dunkel); }
.tour-starten .tour-symbol {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--farbe-aktion);
  color: var(--farbe-karte);
  font-size: calc(12px * var(--schrift-skalierung, 1));
}
.tour-starten .tour-titel {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(14.5px * var(--schrift-skalierung, 1));
}
.tour-starten .tour-unter {
  display: block;
  font-size: calc(12.5px * var(--schrift-skalierung, 1));
  color: var(--farbe-text-gedaempft);
  margin-top: 2px;
  line-height: 1.4;
}

/* Seiten ohne Rundgang: eine Zeile statt eines leeren Fensters. */
.tour-kein-rundgang {
  margin: 0;
  padding: 18px 4px;
  font-size: calc(14px * var(--schrift-skalierung, 1));
  line-height: 1.55;
  color: var(--farbe-text-gedaempft);
}

/* --- Das einmalige Angebot beim ersten Besuch ---------------------------- */
/* Am Fuß, nicht als Fenster vor der Seite: wer zum ersten Mal eine Rechnung
   sucht, soll zuerst die Rechnung sehen. */
.tour-angebot {
  position: fixed;
  left: 50%;
  bottom: 74px;                 /* über "Aa" und "?" unten rechts */
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: calc(100vw - 32px);
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--farbe-flaeche-rand);
  background: var(--farbe-karte);
  box-shadow: var(--schatten);
  font-size: calc(13.5px * var(--schrift-skalierung, 1));
  color: var(--farbe-text);
}
.tour-angebot-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.tour-angebot button {
  width: auto;
  padding: 8px 14px;
  font-size: calc(13px * var(--schrift-skalierung, 1));
}

@media (max-width: 560px) {
  .tour-angebot { left: 16px; right: 16px; transform: none; max-width: none; }
  .tour-angebot-knoepfe { margin-left: 0; width: 100%; }
  .tour-angebot-knoepfe button { flex: 1; }
  .driver-popover.kiefer-tour { max-width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .driver-popover.kiefer-tour, .driver-active-element { transition: none !important; }
}