/*!
 * tour.css — Darstellung der geführten Tour.
 *
 * Anpassen geht über sechs Variablen — im eigenen Stylesheet setzen, egal ob
 * vor oder nach dieser Datei geladen:
 *
 *   :root { --tour-akzent:#f58431; --tour-flaeche:#151d28; }
 *
 * Dazu --tour-schrift für die Schrift der Karte (Vorgabe: Systemschrift), damit
 * die Führung die Hausschrift der Anwendung übernimmt, ohne Regeln zu überschreiben.
 *
 * Die Werte hier sind reine Rückfallwerte (var(--tour-x, vorgabe)). Sie greifen
 * nur, wo das Projekt nichts gesetzt hat — die Ladereihenfolge spielt deshalb
 * keine Rolle. Wer die Regeln selbst überschreibt statt der Variablen, hat
 * beim nächsten Kit-Update Arbeit.
 *
 * Klassenpräfix ist durchgehend  t-  — kurz genug zum Tippen, eigen genug,
 * dass es mit Tailwind, Bootstrap oder eigenem CSS nicht kollidiert.
 */

/* Innen wird nur mit --t-* gearbeitet. Jede dieser Zeilen liest zuerst die
   Projektvariable und fällt erst dann auf die eigene Vorgabe zurück. */
:root {
  --t-akzent:   var(--tour-akzent,   #4a8cff);
  --t-schleier: var(--tour-schleier, rgba(6, 10, 16, .72));
  --t-flaeche:  var(--tour-flaeche,  #151d28);
  --t-linie:    var(--tour-linie,    #2a3646);
  --t-ink:      var(--tour-ink,      #eef3fa);
  --t-ink2:     var(--tour-ink2,     #b8c4d4);
  --t-ink3:     var(--tour-ink3,     #7c8ba0);
  --t-radius:   var(--tour-radius,   10px);
  --t-breite:   var(--tour-breite,   380px);
  --t-schrift:  var(--tour-schrift,  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Helles Thema: beide gängigen Schalter werden erkannt — data-theme am
   Wurzelelement (Umschalter im Kopf) und die Systemvorgabe. Auch hier steht
   die Projektvariable vorn: wer eigene Farben setzt, behält sie. */
:root[data-theme="hell"], :root[data-theme="light"] {
  --t-schleier: var(--tour-schleier, rgba(15, 23, 34, .45));
  --t-flaeche:  var(--tour-flaeche,  #ffffff);
  --t-linie:    var(--tour-linie,    #dfe5ee);
  --t-ink:      var(--tour-ink,      #17202c);
  --t-ink2:     var(--tour-ink2,     #46536a);
  --t-ink3:     var(--tour-ink3,     #7a8699);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dunkel"]):not([data-theme="dark"]) {
    --t-schleier: var(--tour-schleier, rgba(15, 23, 34, .45));
    --t-flaeche:  var(--tour-flaeche,  #ffffff);
    --t-linie:    var(--tour-linie,    #dfe5ee);
    --t-ink:      var(--tour-ink,      #17202c);
    --t-ink2:     var(--tour-ink2,     #46536a);
    --t-ink3:     var(--tour-ink3,     #7a8699);
  }
}

/* ---------- Scheinwerfer ---------- */
/* Der Scheinwerfer ist ein leeres Element mit sehr großem box-shadow: das Loch
   in der Mitte bleibt hell, alles ringsum wird abgedunkelt. Deshalb braucht es
   keine vier Blenden und keine Bibliothek. */

.t-schirm { position: fixed; inset: 0; z-index: 9990; }

.t-licht {
  position: fixed; z-index: 9991; pointer-events: none; border-radius: 8px;
  box-shadow: 0 0 0 9999px var(--t-schleier);
  outline: 1px solid var(--t-akzent); outline-offset: 2px;
  transition: top .22s, left .22s, width .22s, height .22s;
}
.t-licht-aus { outline: none; }

/* ---------- Karte ---------- */

.t-karte {
  position: fixed; z-index: 9992;
  width: min(var(--t-breite), calc(100vw - 28px));
  background: var(--t-flaeche);
  border: 1px solid var(--t-linie);
  border-radius: var(--t-radius);
  padding: 16px 18px 13px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
  font: 400 13.5px/1.62 var(--t-schrift);
  color: var(--t-ink);
}
.t-marke {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--t-ink3); margin-bottom: 6px;
}
.t-titel { font-size: 15.5px; font-weight: 600; margin-bottom: 7px; letter-spacing: -.01em; }
.t-text  { color: var(--t-ink2); }

.t-sprung {
  width: 100%; margin-top: 13px; padding: 6px 8px;
  background: transparent; color: var(--t-ink);
  border: 1px solid var(--t-linie); border-radius: 7px;
  font: inherit; font-size: 12.5px;
}

.t-leiste { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.t-punkte { display: flex; gap: 4px; margin-right: auto; }
.t-punkt  { width: 6px; height: 6px; border-radius: 50%; background: var(--t-linie); }
.t-punkt-an { background: var(--t-akzent); }

.t-knopf {
  font: inherit; font-size: 12.5px; padding: 6px 13px; cursor: pointer;
  background: var(--t-akzent); color: #fff;
  border: 1px solid var(--t-akzent); border-radius: 7px;
}
.t-knopf:hover { filter: brightness(1.08); }
.t-knopf-leer {
  background: transparent; border-color: transparent; color: var(--t-ink3);
}
.t-knopf-leer:hover { background: transparent; color: var(--t-ink); filter: none; }
.t-karte :focus-visible { outline: 2px solid var(--t-akzent); outline-offset: 2px; }

/* ---------- Abschnittsliste auf der Hilfe-/Dokumentationsseite ---------- */

.t-abschnitte {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin: 6px 0 24px;
}
.t-abschnitt {
  border: 1px solid var(--t-linie); border-radius: 8px; padding: 14px 16px;
}
.t-abschnitt .nr { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-ink3); }
.t-abschnitt .na { font-size: 14.5px; font-weight: 600; margin: 4px 0 3px; }
.t-abschnitt .an { font-size: 12px; color: var(--t-ink3); margin-bottom: 11px; }
.t-abschnitt button, .t-start {
  font: inherit; font-size: 12.5px; padding: 7px 12px; cursor: pointer;
  background: var(--t-akzent); color: #fff;
  border: 1px solid var(--t-akzent); border-radius: 7px;
}
.t-start { width: 100%; }

/* ---------- Bewegung abbestellt ---------- */

@media (prefers-reduced-motion: reduce) {
  .t-licht { transition: none; }
}

/* ---------- Nachlesetext (tour-help.js) ---------- */

.t-nachlese {
  border: 1px solid var(--t-linie); border-radius: 8px;
  padding: 16px 20px; margin-bottom: 14px;
}
.t-nachlese-kopf {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-ink3); margin-bottom: 12px;
}
.t-nachlese-eintrag { margin-bottom: 13px; }
.t-nachlese-titel { font-weight: 600; margin-bottom: 2px; }
.t-nachlese-text  { color: var(--t-ink2); line-height: 1.62; }
.t-nachlese-link  { font-size: 11.5px; color: var(--t-ink3); text-decoration: none; }
.t-nachlese-link:hover { color: var(--t-akzent); }