/* =====================================================================
   KI-Werkstatt · Führungs-Baustein v1
   Randmarke: Pfeil im linken Rand, roter Rand um die aktive Zone.

   Gilt ab Einstieg und in allen fünf Stationen gleich.

   Aufgabe der Marke: zeigen, WO der nächste Handgriff sitzt. Eine Bühne
   trägt oft viel Lesestoff über dem Aufgabenblock; die Marke sagt, wo
   gewählt oder gedrückt wird. Ist die Aufgabe erledigt, wandert sie auf
   „weiter" in der Fußleiste.

   Drei feste Regeln:
   1. Sie zeigt auf den AUFGABENBLOCK, nie auf eine einzelne Option.
      Ein Pfeil aufs richtige Feld würde die Antwort verraten.
   2. Gibt es einen eindeutigen Aktionsknopf, zeigt sie direkt darauf.
   3. Auf Bühnen ohne Handgriff („In diesem Schritt ist nichts zu tun.
      Sie lesen mit.") zeigt sie auf „weiter", nicht ins Leere.

   KEIN Hinweis- und KEIN Löse-Knopf. Der Hinweis steht bereits fest in
   jedem Aufgabenblock als Zeile „Kriterium". Und es gibt keine Sackgasse:
   falsche Antworten erklären sich, die Markier-Aufgabe kennt gar keine
   falsche Antwort. Ein Löse-Knopf hätte nichts zu lösen und würde nur
   die Lehre aus dem Fehlgriff überspringen.

   Voraussetzung: Die Bühne braucht einen Container mit position:relative
   und links genug Rand (Richtwert 150 px), damit die Marke Platz hat.
   ===================================================================== */

/* ---------- Randmarke ---------- */

/* Die Marke wandert NICHT über den Bildschirm. Sie blendet aus, springt
   unsichtbar an die neue Stelle und blendet dort wieder ein. Fliegen wäre
   Bewegung quer über die Bühne — genau das, was hier nicht sein soll.
   Deshalb liegt hier ein Übergang nur auf der Deckkraft, keiner auf der
   Position. Die Dauer muss zu WECHSEL_MS in kiw-fuehrung-v1.js passen. */
.kiw-marke{
  position:absolute; left:var(--kiw-marke-links, 34px); width:100px; z-index:40;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.kiw-marke.an{ opacity:1 }

/* Die Stationen haben eine mittig gesetzte, schmale Bahn. Die Marke sitzt
   deshalb im AUSSENrand: die Station setzt --kiw-marke-links auf einen
   negativen Wert. Wird das Fenster zu schmal, ist dort kein Platz mehr —
   dann entfällt der Pfeil und der rote Rand markiert allein. Die Marke am
   „weiter"-Knopf bleibt, die braucht keinen Seitenrand. */
@media (max-width:1080px){
  .kiw-marke.am-zone{ display:none }
}

/* Modus AKTION: waagerecht direkt links vom eindeutigen Handgriff. */
.kiw-marke.am-aktion{width:64px;height:30px;z-index:120}
.kiw-marke.am-aktion .dreh{right:2px;top:0}
.kiw-marke.am-aktion .wort{display:none}

/* Modus KNOPF: senkrecht ÜBER „weiter", im freien Streifen oberhalb der
   Fußleiste. Hier darf die Marke ausdrücklich auf den Knopf zeigen — es
   soll klar sein, dass es weitergeht.

   Senkrecht und mittig über dem Knopf, damit sie nichts überlagert:
   links neben „weiter" steht „zurück", da wäre sie im Weg.

   Voraussetzung an die Bühne: unten mindestens Fußleistenhöhe + 60 px
   Luft lassen, damit kein Inhalt in den Streifen ragt. */
.kiw-marke.am-knopf{ width:42px; height:46px; z-index:120 }
.kiw-marke.am-knopf .dreh{
  right:auto; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(90deg) scale(.72);
}
.kiw-marke.am-knopf .wort{ display:none }

/* Der Pfeil sitzt am ANFANG der Sektion, nicht in ihrer Mitte.
   Bei hohen Sektionen läge die Mitte sonst außerhalb des Bildes
   oder hinter der Fußleiste. */
/* .dreh trägt die Drehung, .pfeil den Puls — sonst würden sich
   beide dieselbe transform-Eigenschaft streitig machen. */
.kiw-marke .dreh{
  position:absolute; right:8px; top:16px;
  line-height:0; transform-origin:center center;
}
.kiw-marke .pfeil{
  line-height:0; color:var(--akzent);
  animation:kiw-puls 2.4s ease-in-out infinite;
}
@keyframes kiw-puls{
  0%,100%{ opacity:.68; transform:translateX(-7px) }
  50%    { opacity:1;  transform:translateX(0) }
}

/* Das Wort sagt, was zu tun ist: lesen · wählen · senden · weiter */
.kiw-marke .wort{
  position:absolute; right:8px; top:58px;
  font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--akzent); opacity:.8; text-align:right; width:92px; line-height:1.3;
}

/* ---------- Schalter ---------- */
.kiw-orientierung{
  position:fixed;right:12px;top:12px;z-index:180;display:flex;align-items:center;gap:7px;
  border:1px solid rgba(20,20,20,.18);border-radius:999px;padding:6px 10px;
  background:rgba(246,245,242,.92);color:var(--muted);font:700 11px/1.2 inherit;
  letter-spacing:.02em;cursor:pointer;box-shadow:0 2px 10px rgba(20,20,20,.06);
  backdrop-filter:blur(6px)
}
.kiw-orientierung:hover{color:var(--fg);border-color:rgba(20,20,20,.34)}
.kiw-orientierung:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.kiw-orientierung-punkt{width:8px;height:8px;border-radius:50%;background:var(--akzent)}
.kiw-orientierung[data-zustand="aus"] .kiw-orientierung-punkt{background:var(--line)}
.kiw-ohne-fuehrung .kiw-marke{display:none!important}

/* Wer die Animation abgestellt hat, bekommt eine ruhige Marke statt keiner. */
@media (prefers-reduced-motion:reduce){
  .kiw-marke .pfeil{ animation:none; opacity:.9 }
}

/* ---------- Aktive Zone ----------
   Kein Abdunkeln des übrigen Bildschirms. Roter Rand UND Abdunkeln
   wären dieselbe Aussage zweimal. */

.kiw-zone{ transition:border-color .35s }
.kiw-zone.kiw-aktiv{ border-color:var(--akzent) }
.kiw-aktionsziel{outline:2px solid var(--akzent);outline-offset:3px}

/* Rückweg sitzt in derselben Kopfzeile wie Station, Titel und Fortschritt.
   Dadurch braucht die gemeinsame Hülle keine zweite Navigationsleiste. */
.kiw-zur-karte{flex:none;font:700 11.5px/1.2 inherit;color:var(--fg);background:#fff;
  border:1.5px solid var(--line);border-radius:9px;padding:7px 11px;cursor:pointer;white-space:nowrap}
.kiw-zur-karte:hover{border-color:var(--fg)}
.kiw-zur-karte:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
@media(max-width:680px){.kiw-zur-karte{margin-left:auto}}

/* ---------- NEXperts-Marke bei direktem Seitenaufruf ----------
   In der Werkstatt-Hülle steht die Marke bereits über dem Iframe. Direkt
   geöffnete Einführung und Stationen erhalten dieselbe Leiste hier. */
.kiw-direkt-mit-marke{padding-top:54px!important}
.kiw-direkt-mit-marke .kiw-orientierung{top:66px}
.nx-marke{position:fixed;inset:0 0 auto;z-index:220;height:54px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:8px 20px;
  background:#0E2841;border-bottom:1px solid rgba(141,86,254,.24);
  box-shadow:0 7px 22px rgba(14,40,65,.14);color:#fff}
.nx-marke img{width:132px;height:auto;display:block}
.nx-marke span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.nx-marke span b{color:#8D56FE}
@media(max-width:680px){
  .kiw-direkt-mit-marke{padding-top:48px!important}.kiw-direkt-mit-marke .kiw-orientierung{top:58px}
  .nx-marke{height:48px;padding:7px 12px}.nx-marke img{width:112px}.nx-marke span{font-size:0}
  .nx-marke span::after{content:'KI-WERKSTATT';font-size:8px;letter-spacing:.07em}
}