/* lotse.css - der Lotse (08.10.2026, Bild 005/017 Variante B): ein Kasten unten rechts, am Handy ueber der Tab-Leiste; deckt er die
   Stelle zu, rueckt er nach oben (.oben). Die Stelle, um die es geht, leuchtet (.lotse-ziel). Nur Tokens. */
.lotse { position: fixed; right: var(--r-5); bottom: calc(var(--r-5) + 56px); width: 400px; max-width: calc(100vw - 2 * var(--r-4)); z-index: 55;
  background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--hebung-3);
  overflow: hidden; font: var(--normal) var(--groesse-2)/var(--zeile) var(--schrift); margin: 0; }
.lotse.oben { bottom: auto; top: calc(var(--r-8) + var(--r-3)); }
.lotse.links { right: auto; left: var(--r-5); }
.lotse-kopf { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-4); background: var(--petrol); color: var(--creme);
  font: var(--fett) var(--groesse-1)/var(--zeile-eng) var(--schrift); }
.lotse-kopf img { flex: 0 0 auto; }
.lotse-kopf-text { min-width: 0; overflow-wrap: anywhere; }
.lotse-kopf-rechts { margin-left: auto; white-space: nowrap; font-weight: var(--normal); color: var(--weiss-leise); }
.lotse-punkte { display: flex; gap: var(--r-1); padding: var(--r-3) var(--r-4) 0; }
.lotse-punkte i { display: block; flex: 1 1 0; max-width: 32px; height: 5px; border-radius: var(--rundung-pille); background: var(--sand-hell); }
.lotse-punkte i.fertig { background: var(--st-fertig-tief); }
.lotse-punkte i.jetzt { background: var(--tonerde); }
.lotse-inhalt { padding: var(--r-3) var(--r-4) var(--r-1); }
.lotse-titel { margin: 0 0 var(--r-2); display: flex; align-items: center; gap: var(--r-2); font: var(--fett) var(--groesse-4)/var(--zeile-eng) var(--schrift-kopf); color: var(--petrol); }
.lotse-text { margin: 0 0 var(--r-2); }
.lotse-wahl { display: flex; flex-direction: column; gap: var(--r-2); margin: 0 0 var(--r-2); }
.lotse-wahl .knopf { justify-content: flex-start; text-align: left; }
.lotse-zeig { display: inline-flex; align-items: center; gap: var(--r-1); margin: 0 0 var(--r-3); padding: var(--r-1) 0; border: 0; background: none; cursor: pointer;
  color: var(--petrol); font: var(--fett) var(--groesse-1)/var(--zeile-eng) var(--schrift); text-decoration: underline; text-underline-offset: 3px; }
.lotse-auto { display: flex; align-items: center; gap: var(--r-2); margin: 0 0 var(--r-2); padding: var(--r-2) var(--r-3); border-radius: var(--rundung);
  background: var(--flaeche-leise); color: var(--tinte-leise); font-size: var(--groesse-1); }
.lotse-auto.leer { display: none; }
.lotse-auto.geschafft { display: flex; background: var(--st-fertig-zart); color: var(--st-fertig-text); font-weight: var(--fett); }
.lotse-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); padding: var(--r-2) var(--r-4) var(--r-4); }
.lotse-luecke { flex: 1 1 auto; }

/* Die Stelle, um die es geht */
.lotse-ziel { outline: 3px solid var(--tonerde) !important; outline-offset: -3px; box-shadow: 0 0 0 9px var(--tonerde-zart) !important; border-radius: var(--rundung-gross);
  scroll-margin: var(--r-8); animation: lotse-leuchten 2.2s var(--kurve) 4; }
/* Hat die Stelle selbst den Tastatur-Fokus, zeigt eine doppelte Linie den Fokus zusaetzlich zum Leuchten (17.10.2026). */
.lotse-ziel:focus-visible { outline-style: double !important; outline-width: 6px !important; }
.lotse-blinkt { animation: lotse-blinken .4s var(--kurve) 4 !important; }
@keyframes lotse-leuchten { 0%, 100% { outline-color: var(--tonerde); } 50% { outline-color: var(--tonerde-zart); } }
@keyframes lotse-blinken { 0%, 100% { outline-color: var(--tonerde); } 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .lotse-ziel, .lotse-blinkt { animation: none !important; }
}

@media (max-width: 767px) {
  .lotse { left: var(--r-3); right: var(--r-3); width: auto; max-width: none;
    bottom: calc(var(--hoehe-tab-leiste) + env(safe-area-inset-bottom) + var(--r-2)); }
  .lotse.oben { top: calc(env(safe-area-inset-top) + var(--r-2)); bottom: auto; }
  .lotse.links { left: var(--r-3); }
  .lotse-inhalt { padding-top: var(--r-2); }
  .lotse-text { margin-bottom: var(--r-2); }
  .lotse-fuss .knopf, .lotse-zeig { min-height: var(--treffer-min); }
}