/* ============================================================
   EINSATZPLANER — Geführte Tour durch die Demo („Führung")

   Scheinwerfer auf echte Bedienelemente + Sprechblase mit
   Schritt-für-Schritt-Erklärung. Klassenname „fuehrung", weil
   „tour" in der App bereits die Tagesroute auf der Karte meint.
   Overlays liegen nach Projektregel über allem (z-index 100000).
   ============================================================ */

.fuehrung-schleier {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

/* Waehrend des Films fuehrt die Kamera allein: Die browsereigene
   Scroll-Verankerung wuerde bei Seiten-Neuaufbauten ruckartig
   nachjustieren - und ein seitenweites "scroll-behavior: smooth"
   macht aus jedem einzelnen Kameraschritt eine eigene, konkurrierende
   Browser-Animation samt Aufholspruengen. Beides aus. */
html.fuehrung-laeuft { overflow-anchor: none; scroll-behavior: auto; }

/* Schleier bewusst hell (32% statt frueher 62%): Der Kunde soll die
   GANZE Oberflaeche jederzeit erkennen koennen - gefuehrt wird der
   Blick durch den kraeftigen Leuchtring, nicht durch Dunkelheit. */
.fuehrung-scheinwerfer {
  position: fixed;
  z-index: 100001;
  border-radius: 12px;
  box-shadow:
    0 0 0 4px rgba(23, 195, 200, 1),
    0 0 26px 5px rgba(23, 195, 200, .55),
    0 0 0 9999px rgba(7, 27, 54, .32);
  transition: all .45s cubic-bezier(.3, .8, .3, 1);
  pointer-events: none;
}

.fuehrung-scheinwerfer.ist-mittig {
  box-shadow: 0 0 0 9999px rgba(7, 27, 54, .32);
}

/* Uebersichts-Moment: Beim Betreten einer neuen Ansicht faellt der
   Schleier fuer gut zwei Sekunden komplett - erst danach fuehrt der
   Scheinwerfer ins Detail. Der sanfte Uebergang kommt aus der
   transition der Grundregel. */
.fuehrung-scheinwerfer.ist-uebersicht {
  box-shadow: none;
}

.fuehrung-blase {
  position: fixed;
  z-index: 100002;
  width: min(360px, calc(100vw - 24px));
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #102135;
  box-shadow: 0 24px 60px rgba(7, 27, 54, .35);
  transition: top .45s cubic-bezier(.3, .8, .3, 1), left .45s cubic-bezier(.3, .8, .3, 1);
}

.fuehrung-schrittzahl {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #08777b;
}

.fuehrung-titel {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.25;
  color: #071b36;
}

.fuehrung-text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #43536a;
}

.fuehrung-knopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fuehrung-knopf {
  white-space: nowrap;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(7, 27, 54, .16);
  border-radius: 10px;
  background: #ffffff;
  color: #071b36;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.fuehrung-knopf.ist-primaer {
  border-color: transparent;
  background: linear-gradient(140deg, #1d4674 0%, #0b1d34 78%);
  color: #ffffff;
}

.fuehrung-knopf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 195, 200, .35);
}

.fuehrung-beenden {
  margin-left: auto;
  border: none;
  background: none;
  color: #607083;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fuehrung-punkte {
  display: flex;
  gap: 5px;
  margin: 0 0 12px;
}

.fuehrung-punkte i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(7, 27, 54, .15);
}

.fuehrung-punkte i.ist-erledigt { background: #17c3c8; }

/* Handy: Blase unten andocken, volle Breite */
@media (max-width: 640px) {
  .fuehrung-blase {
    left: 8px !important;
    right: 8px;
    bottom: 8px;
    top: auto !important;
    width: auto;
  }
  /* Ausweichen nach oben, wenn das Ziel hinter der Blase laege (2026-09-30) */
  .fuehrung-blase.ist-oben {
    top: 8px !important;
    bottom: auto;
  }
}

/* Zeitbalken des Film-Modus: füllt sich über die Lesezeit des Schritts */
.fuehrung-zeitbalken {
  height: 4px;
  margin: 0 0 12px;
  border-radius: 3px;
  background: rgba(7, 27, 54, .1);
  overflow: hidden;
}

.fuehrung-zeitbalken i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: #17c3c8;
  transition-property: width;
  transition-timing-function: linear;
}

/* ------------------------------------------------------------------
   Zeiger-Choreographie (Pilot EinsatzPlaner): sichtbarer Mauszeiger,
   Klick-Puls, fliegende Auftragskarte und sanfte Kamera. In Apps ohne
   Choreographie bleiben diese Klassen schlicht ungenutzt.
   ------------------------------------------------------------------ */
.fuehrung-zeiger {
  position: fixed;
  z-index: 100003;
  width: 22px;
  height: 30px;
  background: #ffffff;
  clip-path: polygon(0 0, 0 82%, 21% 66%, 36% 100%, 52% 93%, 37% 60%, 60% 57%);
  filter: drop-shadow(0 1px 1.5px rgba(7, 27, 54, .85));
  opacity: 0;
  pointer-events: none;
  transition:
    left .85s cubic-bezier(.45, .05, .35, 1),
    top .85s cubic-bezier(.45, .05, .35, 1),
    opacity .4s;
}

.fuehrung-zeiger.ist-da { opacity: 1; }

.fuehrung-klickpuls {
  position: fixed;
  z-index: 100002;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: rgba(23, 195, 200, .5);
  pointer-events: none;
  animation: fuehrung-puls .65s ease-out forwards;
}

@keyframes fuehrung-puls {
  from { box-shadow: 0 0 0 0 rgba(23, 195, 200, .65); opacity: 1; }
  to { box-shadow: 0 0 0 30px rgba(23, 195, 200, 0); opacity: 0; }
}

.fuehrung-zieh-klon {
  position: fixed;
  z-index: 100002;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(7, 27, 54, .45);
  transform: rotate(2.5deg) scale(1.04);
  transition:
    left 1.4s cubic-bezier(.5, .05, .3, 1),
    top 1.4s cubic-bezier(.5, .05, .3, 1);
}

/* Vorgefuehrte Aufklappliste eines Auswahlfeldes: vom Film gezeichnet,
   mit den ECHTEN Eintraegen des Feldes - native Listen lassen sich
   nicht per Skript oeffnen (Browser-Schutz, besonders Safari). */
.fuehrung-auswahl-liste {
  position: fixed;
  z-index: 100002;
  max-width: min(340px, calc(100vw - 16px));
  padding: 4px;
  border: 1px solid rgba(7, 27, 54, .14);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(7, 27, 54, .28);
}

.fuehrung-auswahl-eintrag {
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13.5px;
  color: #102135;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fuehrung-auswahl-eintrag.ist-wahl {
  background: rgba(23, 195, 200, .16);
  color: #071b36;
  font-weight: 700;
}

/* Buehne der sanften Kamera: die App zoomt weich auf den Ort des
   Geschehens; Mass und Mitte setzt die Film-Logik zur Laufzeit. */
.fuehrung-kamera-buehne {
  transition: transform .95s cubic-bezier(.3, .7, .3, 1);
}

/* Beim Zeigen/Beruehren wird die Blase voll deckend */
.fuehrung-blase:hover,
.fuehrung-blase:focus-within {
  background: #ffffff;
}

/* ------------------------------------------------------------------
   Schmale Bedienleiste statt Textfenster (alle Bildschirmgroessen)

   Waehrend der Film MIT Ton laeuft, schrumpft die Begleitblase zu
   einer flachen Leiste: Fortschrittsbalken, Pause, Ton, Beenden.
   Erklaert wird gesprochen, das Bild bleibt fuer App, Zeiger und
   Scheinwerfer frei. Ohne Ton / bei Stummschaltung faellt die Blase
   automatisch in die volle Textform zurueck (Untertitel).

   Fester Platz unten mittig - die !important-Angaben ueberstimmen die
   je Schritt errechnete Eckenposition, damit nichts mehr springt.
   ------------------------------------------------------------------ */
.fuehrung-blase.ist-leiste {
  left: 50% !important;
  top: auto !important;
  right: auto;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(430px, 100vw - 24px);
  padding: 9px 12px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
}

.fuehrung-blase.ist-leiste .fuehrung-schrittzahl,
.fuehrung-blase.ist-leiste .fuehrung-titel,
.fuehrung-blase.ist-leiste .fuehrung-text,
.fuehrung-blase.ist-leiste .fuehrung-punkte,
.fuehrung-blase.ist-leiste .fuehrung-knopf.ist-nav {
  display: none;
}

.fuehrung-blase.ist-leiste .fuehrung-zeitbalken {
  height: 3px;
  margin: 0 0 8px;
}

.fuehrung-blase.ist-leiste .fuehrung-knopfzeile {
  flex-wrap: nowrap;
  gap: 6px;
}

/* Mehrere Apps geben Knoepfen global eine Mindestbreite (bis 154 px).
   Drei davon sprengen die schmale Leiste und schieben „Beenden" aus
   dem Bild - in der Leiste zaehlt darum nur die eigene Breite. */
.fuehrung-blase.ist-leiste .fuehrung-knopfzeile > * {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

.fuehrung-blase.ist-leiste .fuehrung-knopf {
  min-height: 34px;
  padding: 0 13px;
  font-size: 14px;
}

/* Manche Apps geben Knoepfen global 46 px Hoehe - in der Leiste
   wird das auf das Mass der uebrigen Schalter zurueckgeholt. */
.fuehrung-blase.ist-leiste .fuehrung-beenden {
  margin-left: auto;
  min-height: 34px;
  padding: 0 4px;
  font-size: 13px;
}

/* Transparenzhinweis KI-Stimme (EU-AI-Act, Art. 50) auf der Startkarte */
.fuehrung-ki-hinweis {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid #08777b;
  background: rgba(8, 119, 123, .08);
  font-size: 12px;
  line-height: 1.45;
  color: #2f4858;
}